/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
button,
[type="button"],
[type="submit"],
[type="reset"] {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
button::-moz-focus-inner {
  border: 0;
}
button:focus,
button:focus-visible,
[type="button"]:focus,
[type="button"]:focus-visible,
[type="submit"]:focus,
[type="submit"]:focus-visible,
[type="reset"]:focus,
[type="reset"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ── Variables ── */
:root {
  /* 前景色 RGB：所有 rgba(var(--fg-rgb),α) 的薄膜/描边/微光/半透文字都由它统一控制。
     深色=白(255)，亮色翻成深(见 [data-theme=light])。一处开关，整套换肤。 */
  --fg-rgb:  255,255,255;
  --black:   #000;
  --bg:      #000000;
  --bg2:     #09090b;
  --bg3:     #18181b;
  --bg4:     #27272a;
  --line:    rgba(var(--fg-rgb),.08);
  --line2:   rgba(var(--fg-rgb),.14);
  --dim:     rgba(var(--fg-rgb),.34);
  --muted:   rgba(var(--fg-rgb),.52);
  --sub:     rgba(var(--fg-rgb),.72);
  --text:    #f5f5f5;
  --text2:   #ffffff;
  --white:   #ffffff;
  --accent:  #ffffff;
  --accent-soft: rgba(var(--fg-rgb),.08);
  --glass:   rgba(10,10,12,.92);
  --bar-bg:  rgba(0,0,0,.68);   /* 顶栏毛玻璃（亮色翻成浅色玻璃） */
  --dock-bg: rgba(0,0,0,.84);   /* 底部 dock 毛玻璃 */
  --shadow:  0 24px 80px rgba(0,0,0,.42);
  --radius:  18px;
  --r-sm:    12px;
  --header:  74px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-total: calc(var(--header) + var(--safe-top));
  --input-h: 84px;
  --drawer:  260px;
  --composer-side: 43px;
  --composer-center-h: 43px;
}

/* ── 亮色主题：白底黑字，沿用 design.md 的色调分层（白卡浮在浅灰底）+ 幽灵描边 ──
   --fg-rgb 翻成深色 → 所有薄膜/描边/微光/半透文字自动从"白film"变"黑film"；
   --white/--accent/--text 翻深，--black 翻白，让前景/主按钮整体适配。 */
[data-theme="light"] {
  --fg-rgb:  24,24,27;
  --black:   #ffffff;
  --bg:      #eceef1;
  --bg2:     #f4f5f7;
  --bg3:     #ffffff;
  --bg4:     #e6e7eb;
  --text:    #18181b;
  --text2:   #000000;
  --white:   #18181b;
  --accent:  #18181b;
  --glass:   rgba(255,255,255,.9);
  --bar-bg:  rgba(248,249,251,.78);
  --dock-bg: rgba(248,249,251,.86);
  --shadow:  0 16px 48px rgba(0,0,0,.12);
}

/* ── Body ── */
body {
  font-family: 'Manrope', -apple-system, 'SF Pro Text', 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(var(--fg-rgb),.05), transparent 30%),
    radial-gradient(circle at top right, rgba(var(--fg-rgb),.03), transparent 24%),
    var(--bg);
  color: var(--text);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
}

/* ── Overlay ── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 90;
}
.hidden { display: none !important; }

/* ── Panels ── */
.tips-panel {
  position: fixed; top: 88px; right: 16px;
  width: min(320px, calc(100vw - 32px));
  background: var(--glass);
  border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 22px;
  z-index: 101;
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}
.tips-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-size: .86rem; font-weight: 700; color: var(--white);
}
.tips-list {
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* ── Settings Panel ── */
.settings-panel {
  position: fixed; top: 0; right: 0;
  width: min(380px, 100vw);
  height: 100dvh;
  background: rgba(8,8,10,.96);
  border-left: 1px solid rgba(var(--fg-rgb),.08);
  z-index: 100;
  overflow-y: auto;
  padding: calc(var(--safe-top) + 24px) 20px 24px;
  display: flex; flex-direction: column; gap: 6px;
  animation: slideIn .2s ease;
  backdrop-filter: blur(24px);
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.sp-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .9rem; font-weight: 600; color: var(--white);
  margin-bottom: 16px;
}
.sp-section { margin-bottom: 16px; }
.sp-row { display: flex; justify-content: space-between; align-items: center; }
.sp-label {
  font-size: .72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 6px;
}
.sp-section input,
.sp-section select {
  width: 100%;
  background: var(--bg3); border: 1px solid var(--line2);
  border-radius: var(--r-sm); padding: 9px 12px;
  color: var(--text); font-size: .9rem; outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
}
.sp-section input:focus,
.sp-section select:focus { border-color: var(--white); }
.sp-section select { cursor: pointer; }
.sp-save {
  margin-top: 8px; padding: 11px;
  background: var(--white); color: var(--black);
  border: none; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: opacity .15s;
}
.sp-save:hover { opacity: .85; }

/* Toggle */
.toggle { display: flex; align-items: center; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); }
.toggle input { display: none; }
.settings-home-row { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.settings-home-row, .settings-home-name { user-select: none; -webkit-user-select: none; }
.toggle-track {
  width: 40px; height: 22px;
  background: var(--line2); border-radius: 11px;
  position: relative; transition: background .2s;
}
.toggle-track::after {
  content: ''; position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--muted); border-radius: 50%;
  transition: transform .2s, background .2s;
}
.toggle input:checked + .toggle-track { background: var(--white); }
.toggle input:checked + .toggle-track::after { transform: translateX(18px); background: var(--black); }

/* ── Header ── */
#appHeader {
  height: var(--header-total);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--safe-top) 20px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb),.06);
  background: var(--bar-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  flex-shrink: 0;
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
}
.logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem; font-weight: 700;
  color: var(--white); letter-spacing: -.03em;
  cursor: pointer;
}
.ver {
  font-size: .6rem; font-weight: 500;
  color: var(--muted); vertical-align: super;
  margin-left: 4px;
}
/* 版本号 / video 调试按钮：仅在「设置 → 调试模式」开启时显示 */
html:not([data-debug="on"]) .ver,
html:not([data-debug="on"]) .vs-debug-toggle { display: none; }
.header-left, .header-right { display: flex; gap: 10px; align-items: center; }
.header-copy { cursor: pointer; }
.header-topic-badge {
  border: 1px solid rgba(255,90,90,.28);
  background: rgba(255,64,64,.12);
  color: #ff7b7b;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
/* 「单色控制台」装饰文字：手机+桌面都隐藏（用户嫌占地方） */
.header-mode-label { display: none; }
.header-copy:hover .logo { opacity: .9; }
/* 「智能中枢」装饰文字：手机+桌面都隐藏 */
.header-eyebrow { display: none; }
/* Header 的 ✨ icon：手机+桌面都隐藏（用户嫌占地方） */
.header-mark { display: none; }
.header-mark .material-symbols-outlined { color: var(--white); font-size: 24px; }

/* ── Buttons ── */
.icon-btn {
  background: rgba(var(--fg-rgb),.03); border: 1px solid rgba(var(--fg-rgb),.08);
  color: var(--muted); font-size: 1rem; cursor: pointer;
  padding: 8px 10px; border-radius: 12px;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
  line-height: 1;
}
.icon-btn:hover { color: var(--white); background: rgba(var(--fg-rgb),.08); border-color: rgba(var(--fg-rgb),.18); transform: translateY(-1px); }
.icon-btn.dim { font-size: .9rem; }

/* ── App Body ── */
.app-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
  padding-top: var(--header-total);
}

/* ── History Drawer ── */
.history-drawer {
  width: var(--drawer);
  min-width: var(--drawer);
  border-right: 1px solid rgba(var(--fg-rgb),.08);
  display: flex; flex-direction: column;
  padding: 22px 14px 18px;
  overflow: hidden;
  transition: width .2s;
  background: rgba(var(--fg-rgb),.02);
}
.drawer-title {
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--dim); margin-bottom: 12px; padding: 0 4px;
}
#historyList {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.history-search-wrap {
  margin-bottom: 10px;
}
.history-search {
  width: 100%;
  background: rgba(var(--fg-rgb),.035); border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 16px; color: var(--text);
  font-size: .82rem; font-family: inherit;
  padding: 11px 13px; outline: none;
}
.history-search:focus { border-color: rgba(var(--fg-rgb),.18); box-shadow: 0 0 0 4px rgba(var(--fg-rgb),.04); }
/* ── Tag bar ── */
.sort-bar {
  display: flex; gap: 4px; padding: 4px 0 6px;
}
.sort-btn {
  font-size: .68rem; padding: 2px 10px; border-radius: 10px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line2); cursor: pointer;
  transition: all .15s;
}
.sort-btn:hover { color: var(--white); border-color: var(--white); }
.sort-btn.active {
  background: var(--accent); color: var(--black); border-color: var(--accent);
}
.tag-bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px 0 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.tag-pill {
  font-size: .68rem; padding: 2px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--tag-color, #666) 15%, transparent);
  color: var(--tag-color, #888);
  border: 1px solid color-mix(in srgb, var(--tag-color, #666) 30%, transparent);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.tag-pill:hover {
  background: color-mix(in srgb, var(--tag-color, #666) 25%, transparent);
  border-color: var(--tag-color, #666);
}
.tag-pill.active {
  background: color-mix(in srgb, var(--tag-color, #666) 35%, transparent);
  color: var(--white); border-color: var(--tag-color, #666);
}
.tag-count { opacity: .6; margin-left: 2px; }

/* ── History items ── */
.h-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 10px; border-radius: 16px;
  font-size: .8rem; line-height: 1.45; color: var(--muted); cursor: pointer;
  flex-shrink: 0;
  transition: color .12s, background .12s, border-color .12s;
  border: 1px solid transparent;
}
.h-item:hover { color: var(--white); background: rgba(var(--fg-rgb),.04); border-color: rgba(var(--fg-rgb),.08); }
.h-item-left {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 1;
}
.h-select {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; flex-shrink: 0; cursor: pointer;
  border: 2px solid rgba(var(--fg-rgb),.35); border-radius: 5px;
  background: transparent; position: relative; vertical-align: middle;
  margin: 0;
}
.h-select:checked {
  background: var(--white); border-color: var(--white);
}
.h-select:checked::after {
  content: ''; position: absolute;
  left: 5px; top: 2px; width: 5px; height: 10px;
  border: solid #000; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.h-main {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
}
.h-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.h-time {
  font-size: .62rem; color: var(--dim);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.h-tags { display: flex; gap: 3px; flex-shrink: 0; }
.h-tag {
  font-size: .6rem; padding: 1px 5px; border-radius: 6px;
  background: color-mix(in srgb, var(--tag-color, #666) 18%, transparent);
  color: var(--tag-color, #888);
  border: 1px solid color-mix(in srgb, var(--tag-color, #666) 30%, transparent);
  white-space: nowrap;
}
.h-topic {
  font-size: .62rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--topic-color, #666) 18%, transparent);
  color: var(--topic-color, #bbb);
  border: 1px solid color-mix(in srgb, var(--topic-color, #666) 34%, transparent);
  white-space: nowrap;
}
.h-topic.unclassified {
  --topic-color: #ff6b6b;
  color: #ff8f8f;
}
.h-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.foot-row { display: flex; gap: 6px; }
.foot-row .list-cmd { flex: 1; margin-top: 0; text-align: center; }
.foot-row-stack { flex-direction: column; }
.list-cmd {
  margin-top: 10px;
  background: none; border: 1px solid var(--line2);
  border-radius: var(--r-sm); padding: 8px;
  color: var(--dim); font-size: .78rem;
  font-family: monospace; cursor: pointer;
  transition: color .15s, border-color .15s;
  text-align: left;
}
.list-cmd:hover { color: var(--white); border-color: var(--muted); }
.batch-bar,
.topic-filter-bar,
.topic-manager-sort-row,
.topic-picker-chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.batch-bar {
  align-items: center; justify-content: space-between;
  padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg2);
}
.batch-copy { font-size: .78rem; color: var(--sub); }
.batch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-action-btn {
  border: 1px solid var(--line2); background: var(--bg3); color: var(--white);
  border-radius: 999px; padding: 8px 12px; font-size: .76rem; cursor: pointer;
}
.topic-action-btn.primary {
  border-color: rgba(var(--fg-rgb),.18); background: rgba(var(--fg-rgb),.08);
}
.topic-action-btn.danger {
  border-color: rgba(255,90,90,.3); background: rgba(255,64,64,.12); color: #ff7b7b;
}
.topic-filter-pill {
  font-size: .7rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--bg3); color: var(--sub); cursor: pointer;
}
.topic-filter-pill.active {
  background: rgba(var(--fg-rgb),.1); color: var(--white); border-color: rgba(var(--fg-rgb),.2);
}
.topic-filter-pill.unclassified.active { color: #ff8f8f; border-color: rgba(255,90,90,.28); background: rgba(255,64,64,.1); }
.topic-filter-pill.forgot.active { color: #ffb080; border-color: rgba(255,160,80,.3); background: rgba(255,140,60,.1); }
.topic-manage-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--bg3); color: var(--white); cursor: pointer;
}
.dim-text { font-size: .82rem; color: var(--dim); padding: 4px; }

/* ── YouTube Flashcards Entry ── */
.yt-flash-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(var(--fg-rgb),.06);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(var(--fg-rgb),.05), rgba(var(--fg-rgb),.02));
  display: flex; flex-direction: column; gap: 8px;
}
.yt-flash-panel.mobile { margin-bottom: 12px; }
.yt-flash-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.yt-flash-title {
  font-size: .78rem; font-weight: 700; color: var(--white);
}
.yt-flash-sub {
  font-size: .72rem; line-height: 1.55; color: var(--sub);
}
.yt-flash-input,
.yt-flash-textarea {
  width: 100%;
  background: var(--bg3); border: 1px solid var(--line2);
  border-radius: 12px; color: var(--text);
  font-size: .82rem; font-family: inherit;
  padding: 10px 12px; outline: none;
}
.yt-flash-input:focus,
.yt-flash-textarea:focus { border-color: var(--white); }
.yt-flash-textarea {
  min-height: 96px; resize: vertical; max-height: 220px;
}
.yt-flash-actions {
  display: flex; gap: 8px;
}
.yt-flash-btn,
.yt-flash-mini-btn {
  background: transparent; border: 1px solid var(--line2);
  color: var(--sub); border-radius: 10px; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.yt-flash-btn {
  width: 100%; padding: 10px 12px; font-size: .82rem; font-weight: 700;
}
.yt-flash-mini-btn {
  padding: 6px 10px; font-size: .7rem;
}
.yt-flash-btn:hover,
.yt-flash-mini-btn:hover { color: var(--white); border-color: var(--muted); }
.yt-flash-btn.primary {
  background: var(--white); color: var(--black); border-color: var(--white);
}
.yt-flash-btn.primary:hover { opacity: .9; }
.yt-flash-btn:disabled {
  opacity: .5; cursor: wait;
}
.yt-flash-status {
  font-size: .72rem; line-height: 1.5; color: var(--dim);
}
.yt-flash-status.ok { color: var(--sub); }
.yt-flash-status.warn { color: var(--sub); }
.yt-flash-status.error { color: var(--sub); }

.yt-flash-logs {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: rgba(var(--fg-rgb),.04);
  border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .65rem;
  line-height: 1.45;
  color: var(--dim);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
}


/* ── Content ── */
.content {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}

/* ── Output ── */
.output {
  flex: 1; overflow-y: auto;
  padding: 34px 28px 220px;
}
.tab-page { width: 100%; }
.home-shell,
.vocab-shell {
  max-width: 1040px;
  display: flex; flex-direction: column; gap: 30px;
}
.home-hero,
.vocab-hero {
  padding: 10px 0 0;
}
.result-panel {
  margin-top: 18px;
  max-width: 880px;
}
.vocab-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.module-action-btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(var(--fg-rgb),.08);
  background: rgba(var(--fg-rgb),.04);
  color: var(--white);
  border-radius: 18px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.module-action-btn:hover {
  background: rgba(var(--fg-rgb),.08);
  border-color: rgba(var(--fg-rgb),.18);
  transform: translateY(-1px);
}
.module-action-btn .material-symbols-outlined { font-size: 18px; }
.vocab-empty-card {
  max-width: 720px;
}

/* ── Welcome / Home Hub ── */
.welcome { padding: 40px 0 20px; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--fg-rgb),.12);
  border-radius: 999px;
  padding: 8px 14px;
  margin-bottom: 18px;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--sub);
  background: rgba(var(--fg-rgb),.03);
}
.welcome-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.35rem, 7vw, 4.4rem);
  font-weight: 700;
  color: var(--white); letter-spacing: -.06em;
  line-height: 1.04;
  margin-bottom: 10px;
  max-width: 780px;
}
.welcome-sub {
  font-size: 1rem; color: var(--muted); margin-bottom: 0;
  line-height: 1.8; max-width: 760px;
}
.welcome-tips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tip {
  font-size: .76rem; color: var(--sub);
  background: rgba(var(--fg-rgb),.04); border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 999px; padding: 7px 12px;
}
.tip code {
  background: none; color: var(--white);
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: .8rem;
}
.feature-section {
  border: 1px solid rgba(var(--fg-rgb),.05);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(var(--fg-rgb),.03), rgba(var(--fg-rgb),.012));
  box-shadow: var(--shadow);
  padding: 26px;
}
.feature-head {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 20px;
}
.feature-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.18rem; font-weight: 600; color: var(--white);
  letter-spacing: -.02em;
}
.feature-sub {
  font-size: .82rem; color: var(--muted); line-height: 1.7;
  max-width: 620px;
}
.feature-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.feature-card {
  width: 100%; text-align: left;
  display: flex; gap: 16px; align-items: flex-start;
  background: rgba(var(--fg-rgb),.03); border: 1px solid rgba(var(--fg-rgb),.05);
  border-radius: 20px; padding: 22px;
  color: inherit; cursor: pointer; transition: all .25s ease;
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb),.03);
}
.feature-card:hover {
  border-color: rgba(var(--fg-rgb),.24);
  background: rgba(var(--fg-rgb),.05);
}
.feature-icon {
  width: 58px; height: 58px; flex-shrink: 0;
  border-radius: 16px; background: rgba(var(--fg-rgb),.05);
  border: 1px solid rgba(var(--fg-rgb),.08);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb),.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.feature-icon .material-symbols-outlined {
  color: var(--white);
  font-size: 30px;
}
.feature-copy { min-width: 0; }
.feature-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; font-weight: 600; color: var(--white); margin-bottom: 4px;
  letter-spacing: -.01em;
}
/* 工具卡片描述：手机+桌面都隐藏（卡片名已经够表达） */
.feature-desc { display: none; }
.home-quick-note {
  font-size: .78rem; color: var(--dim); padding: 0 2px 6px;
}
.feature-grid-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.topic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.topic-card {
  min-height: 120px;
}

/* ── Vocab (话题) Tab — 富信息话题卡 ── */
/* === Stitch-inspired monochrome vocab homepage === */
.vocab-shell {
  display: flex; flex-direction: column;
  gap: 22px;
  padding: 8px 0 28px;
}
.vocab-topic-hd {
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 4px 6px;
}
.vocab-topic-hd-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem; font-weight: 700; letter-spacing: -.035em;
  color: var(--white); line-height: 1.05;
}
.vocab-topic-hd-sub {
  font-size: .82rem; color: var(--dim);
  letter-spacing: .01em; line-height: 1.6;
  max-width: 34em;
}
.vocab-topic-legend { display: none; }
.vocab-topic-list {
  display: flex; flex-direction: column;
  gap: 12px;
}
.vocab-topic-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 14px;
  padding: 22px 22px 18px;
  border-radius: 18px;
  border: 1px solid rgba(var(--fg-rgb),.06);
  background: rgba(var(--fg-rgb),.025);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease, transform .12s ease;
}
.vocab-topic-card:hover {
  border-color: rgba(var(--fg-rgb),.32);
  background: rgba(var(--fg-rgb),.04);
}
.vocab-topic-card:active { transform: scale(.995); }
.vocab-topic-card-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(var(--fg-rgb),.04);
  border: 1px solid rgba(var(--fg-rgb),.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
}
.vocab-topic-card-icon .material-symbols-outlined {
  font-size: 28px; color: var(--white);
  font-variation-settings: 'FILL' 1, 'wght' 400;
}
.vocab-topic-card-body {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  justify-content: center;
}
.vocab-topic-card-title-row {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.vocab-topic-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.018em;
  color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.vocab-topic-card-due {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em;
  color: var(--white);
  background: rgba(var(--fg-rgb),.12);
  border: 1px solid rgba(var(--fg-rgb),.22);
  text-transform: uppercase;
  white-space: nowrap;
}
.vocab-topic-card-sub {
  font-size: .68rem;
  color: rgba(var(--fg-rgb),.42);
  text-transform: uppercase; letter-spacing: .22em; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vocab-topic-card-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding-top: 4px;
}
.vts {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 10px;
  background: rgba(var(--fg-rgb),.03);
  border: 1px solid rgba(var(--fg-rgb),.05);
  min-width: 0;
}
.vts b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--white);
  line-height: 1;
  letter-spacing: -.01em;
}
.vts span {
  font-size: .58rem;
  color: rgba(var(--fg-rgb),.42);
  letter-spacing: .04em;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.vts-zero b { color: rgba(var(--fg-rgb),.28); }
.vts-zero span { color: rgba(var(--fg-rgb),.28); }
.vocab-topic-card-meter {
  grid-column: 1 / -1;
  height: 2px; border-radius: 2px;
  background: rgba(var(--fg-rgb),.06);
  overflow: hidden;
}
.vocab-topic-card-meter-fill {
  height: 100%;
  background: rgba(var(--fg-rgb),.55);
  transition: width .35s ease;
}
.vocab-topic-card.has-due .vocab-topic-card-sub { color: var(--white); }
.vocab-topic-card.has-due .vocab-topic-card-icon {
  background: rgba(var(--fg-rgb),.08);
  border-color: rgba(var(--fg-rgb),.18);
}
.vocab-topic-card.fully-mastered .vocab-topic-card-icon .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.vocab-topic-card.fully-mastered .vocab-topic-card-meter-fill { background: var(--white); }
.vocab-topic-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 80px 24px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb),.025);
  border: 1px solid rgba(var(--fg-rgb),.06);
  text-align: center;
}
.vocab-topic-empty-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(var(--fg-rgb),.04);
  border: 1px solid rgba(var(--fg-rgb),.08);
  display: flex; align-items: center; justify-content: center;
}
.vocab-topic-empty-icon .material-symbols-outlined {
  font-size: 32px; color: var(--white);
}
.vocab-topic-empty-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem; font-weight: 700; color: var(--white);
  letter-spacing: -.015em;
}
.vocab-topic-empty-text {
  font-size: .82rem; line-height: 1.65; color: var(--dim);
  max-width: 320px;
}
.tools-vault-section {
  margin-top: 6px;
}
.settings-shell {
  gap: 20px;
}
.settings-card-stack {
  max-width: 860px;
}
.settings-home-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-home-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--fg-rgb),.06);
  border-radius: 20px;
  background: rgba(var(--fg-rgb),.025);
}
.settings-home-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .98rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0;
}
.settings-select {
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--line2); border-radius: 12px;
  padding: 8px 12px; font-family: inherit; font-size: .85rem;
  cursor: pointer; min-width: 116px;
}
/* 可点击进入子页的设置行（按钮形态，沿用 .settings-home-row 卡片样式） */
.settings-nav-row {
  width: 100%; font-family: inherit; text-align: left; cursor: pointer;
  /* 抹掉浏览器默认按钮的蓝色链接式描边/着色，让内部 span 自己控制颜色 */
  color: inherit;
  -webkit-appearance: none; appearance: none;
  text-decoration: none;
}
.settings-nav-row:hover,
.settings-nav-row:focus,
.settings-nav-row:active,
.settings-nav-row:visited { color: inherit; text-decoration: none; }
.settings-row-value {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: .92rem; white-space: nowrap;
}
.settings-row-chevron { font-size: 1.2rem; color: var(--dim); }

/* 设置项选择子页（从右滑入，iOS push 风格，跟随主题） */
.settings-picker {
  position: fixed; inset: 0; z-index: 120;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.settings-picker.show { transform: translateX(0); }
.settings-picker-head {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 12px 14px; border-bottom: 1px solid var(--line);
}
.settings-picker-back {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--white);
  cursor: pointer; padding: 4px;
}
.settings-picker-back .material-symbols-outlined { font-size: 1.7rem; }
.settings-picker-title { font-size: 1.02rem; font-weight: 700; color: var(--white); }
.settings-picker-list { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.settings-picker-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--bg3);
  color: var(--white); font-size: 1rem; font-family: inherit; cursor: pointer;
}
.settings-picker-item.active { border-color: var(--line2); background: var(--bg4); }
.settings-picker-check { color: var(--white); font-size: 1.25rem; min-width: 1.25rem; }
/* 高级用法提示子页：信息条目（不可选） */
.settings-guide-list { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.settings-guide-item {
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--bg3);
  color: var(--white); font-size: .95rem; line-height: 1.5;
}
.settings-home-desc {
  font-size: .82rem;
  line-height: 1.7;
  color: var(--muted);
}
.settings-home-save {
  margin-top: 6px;
}
.settings-tips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Bottom Dock / Input Bar ── */
.bottom-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  background: var(--dock-bg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-top: 1px solid rgba(var(--fg-rgb),.08);
}
.composer-slot.hidden { display: none; }
.input-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 10px;
  border-top: 1px solid rgba(var(--fg-rgb),.02);
  background: transparent;
  flex-shrink: 0;
}
textarea {
  flex: 1;
  height: var(--composer-center-h);
  min-height: var(--composer-center-h);
  max-height: var(--composer-center-h);
  /* 亮度 +20% (alpha ×1.2) */
  background: rgba(var(--fg-rgb),.07); border: 1px solid rgba(var(--fg-rgb),.14);
  border-radius: 16px; color: var(--text);
  font-size: .88rem; font-family: inherit;
  padding: 11px 14px; resize: none; outline: none;
  line-height: 1.2;
  transition: border-color .15s, background .15s, box-shadow .15s;
  overflow-y: hidden;
  scrollbar-width: none;
}
textarea:focus { border-color: rgba(var(--fg-rgb),.26); background: rgba(var(--fg-rgb),.10); box-shadow: 0 0 0 4px rgba(var(--fg-rgb),.06); }
textarea::placeholder { color: rgba(var(--fg-rgb),.45); }
textarea::-webkit-scrollbar { display: none; }
.send-btn {
  width: var(--composer-side); height: var(--composer-side); flex: 0 0 var(--composer-side);
  background: var(--white); border: none;
  border-radius: 16px; color: var(--black);
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: opacity .15s, transform .15s; display: flex;
  align-items: center; justify-content: center;
  box-shadow: none;
}
.send-btn:hover { opacity: .92; transform: translateY(-1px); }
.send-btn:disabled { opacity: .3; cursor: not-allowed; }

.bottom-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
}
.bottom-nav-btn {
  border: 1px solid rgba(var(--fg-rgb),.06);
  background: rgba(var(--fg-rgb),.02);
  color: var(--muted);
  border-radius: 20px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all .18s ease;
  font-family: inherit;
}
.bottom-nav-btn .material-symbols-outlined {
  font-size: 22px;
}
.bottom-nav-btn span:last-child {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
}
.bottom-nav-btn.active {
  color: var(--white);
  background: rgba(var(--fg-rgb),.08);
  border-color: rgba(var(--fg-rgb),.18);
}
.bottom-nav-btn:hover {
  color: var(--white);
  border-color: rgba(var(--fg-rgb),.14);
}

/* Mode toggle button */
.mode-toggle {
  width: var(--composer-side); height: var(--composer-side); flex: 0 0 var(--composer-side);
  background: rgba(var(--fg-rgb),.035); border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 16px; color: var(--text2);
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .15s;
}
.mode-toggle .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.mode-toggle:active,
.mode-toggle:hover { background: rgba(var(--fg-rgb),0.08); border-color: rgba(var(--fg-rgb),.18); transform: translateY(-1px); }

/* Voice mode bar */
.voice-bar { align-items: center; }
.hold-talk-btn {
  flex: 1;
  height: var(--composer-center-h);
  min-height: var(--composer-center-h);
  max-height: var(--composer-center-h);
  background: var(--bg3); border: 1px solid var(--line2);
  border-radius: 16px; color: var(--text2);
  font-size: .88rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all .15s;
  user-select: none; -webkit-user-select: none;
}
.hold-talk-btn:active, .hold-talk-btn.recording {
  background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4);
  color: #EF4444;
}

/* STT Result Overlay */
.stt-result-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 60;
  display: flex; justify-content: center; align-items: center;
  padding: 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.stt-result-overlay.hidden { display: none !important; }
.stt-result-card {
  max-width: 500px; width: 100%;
  background: var(--bg2); border: 1px solid var(--line2);
  border-radius: 20px; padding: 32px 24px; text-align: center;
}
.stt-result-text {
  font-size: 1.4rem; font-weight: 600; color: var(--white);
  line-height: 1.6; margin-bottom: 24px; min-height: 60px;
  word-break: break-word;
}
.stt-result-actions {
  display: flex; gap: 12px; justify-content: center;
}
.stt-btn {
  border: none; border-radius: var(--r-sm); padding: 12px 28px;
  font-size: 1rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.stt-exit { background: rgba(239,68,68,0.12); color: #EF4444; }
.stt-retry { background: rgba(var(--fg-rgb),0.08); color: var(--dim); }
.stt-send { background: var(--white); color: var(--black); }

/* Recording pulse animation for STT overlay */
.stt-result-card.recording .stt-result-text::before {
  content: ''; display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  background: #EF4444; margin-right: 8px; vertical-align: middle;
  animation: av-pulse 1.2s ease-in-out infinite;
}
@keyframes av-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

/* ── Result ── */
.result {
  animation: fadeUp .2s ease;
  max-width: 860px;
  background: linear-gradient(180deg, rgba(var(--fg-rgb),.035), rgba(var(--fg-rgb),.015));
  border: 1px solid rgba(var(--fg-rgb),.06);
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--shadow);
}
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
/* 流式过程中每 150ms 重写 innerHTML，每次都触发 fadeUp 会导致屏幕闪烁。
   仅在最终（非 streaming）和初次（loader→result 切换）保留淡入。 */
.result.streaming { animation: none; }

.r-word {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 6vw, 3rem); font-weight: 700;
  color: var(--white); letter-spacing: -.05em;
  line-height: 1.08;
  margin-bottom: 10px;
}
.r-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; margin-bottom: 22px;
}
.r-ipa {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .88rem; color: var(--sub);
}
.r-pos {
  font-size: .72rem; color: var(--sub);
  border: 1px solid rgba(var(--fg-rgb),.12); border-radius: 999px;
  padding: 5px 10px; text-transform: uppercase; letter-spacing: .12em;
  font-style: normal;
  background: rgba(var(--fg-rgb),.04);
}
.r-meaning {
  font-size: 1rem; color: var(--white); font-weight: 600;
}

.speak-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.speak-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--fg-rgb),.04); border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 999px; padding: 8px 14px;
  font-size: .78rem; color: var(--sub); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.speak-pill:hover { color: var(--white); border-color: rgba(var(--fg-rgb),.18); background: rgba(var(--fg-rgb),.08); }

.topic-detail-btn {
  border: 1px solid var(--line2); background: var(--bg3); color: var(--white);
  border-radius: 999px; padding: 10px 14px; font-size: .82rem; cursor: pointer;
}
.topic-detail-btn:hover { border-color: rgba(var(--fg-rgb),.18); }

.word-topic-chips {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.word-topic-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--topic-color, var(--line2));
  background: color-mix(in srgb, var(--topic-color, #888) 14%, transparent);
  color: var(--topic-color, var(--white));
  border-radius: 999px; padding: 6px 4px 6px 12px; font-size: .8rem; line-height: 1;
}
.word-topic-chip-name { font-weight: 600; }
.word-topic-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(var(--fg-rgb),.08); color: inherit;
  font-size: .9rem; line-height: 1; cursor: pointer; padding: 0;
}
.word-topic-chip-x:hover { background: rgba(var(--fg-rgb),.18); }
.word-topic-empty {
  color: var(--dim); font-size: .82rem;
}
.word-topic-add {
  border: 1px dashed var(--line2); background: transparent; color: var(--sub);
  border-radius: 999px; padding: 6px 12px; font-size: .8rem; cursor: pointer;
}
.word-topic-add:hover { border-color: rgba(var(--fg-rgb),.28); color: var(--white); }

.block { margin-bottom: 24px; }
.block-title {
  font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--dim); margin-bottom: 12px;
}

/* Forms grid */
.forms-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.form-chip {
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 12px;
  min-width: 120px;
}
.fc-label { font-size: .68rem; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.fc-val { font-size: .9rem; color: var(--text); margin-top: 2px; }
.fc-ipa { font-size: .78rem; color: var(--muted); font-family: monospace; }

/* Root */
.root-line {
  font-size: .88rem; color: var(--sub);
  background: var(--bg3); border-left: 2px solid var(--line2);
  padding: 10px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Examples */
.ex-list { display: flex; flex-direction: column; gap: 10px; }
.ex-item {
  padding: 14px 16px;
  border: 1px solid rgba(var(--fg-rgb),.06);
  background: rgba(var(--fg-rgb),.025);
  border-radius: 18px;
}
.ex-en { font-size: .92rem; color: var(--text); line-height: 1.72; }
.ex-cn { font-size: .8rem; color: var(--muted); margin-top: 6px; }

/* Senses (multi-pos definitions) */
.senses-list { display: flex; flex-direction: column; gap: 12px; }
.sense-item {
  padding: 12px 14px;
  border: 1px solid rgba(var(--fg-rgb),.06);
  background: rgba(var(--fg-rgb),.025);
  border-radius: 14px;
}
.sense-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.sense-meaning {
  font-size: .98rem; color: var(--white); font-weight: 600;
  line-height: 1.4;
}
.sense-ex {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(var(--fg-rgb),.08);
}

.pos-badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: .7rem;
  font-weight: 800;
  border-radius: 6px;
  text-transform: lowercase;
  letter-spacing: .03em;
  font-style: normal;
  white-space: nowrap;
}
/* 4 colors total: 红(动词) 黄(形/副) 蓝(名词) 灰(其余) */
.pos-noun  { background: rgba(33,150,243,.18); color: #64b5f6; }
.pos-verb  { background: rgba(229,57,53,.20);  color: #ef5350; }
.pos-mod   { background: rgba(251,192,45,.20); color: #ffd54f; }
.pos-other { background: rgba(var(--fg-rgb),.08); color: var(--sub); }

/* Word Family chips */
.fam-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* 句子查询里多组 family 并列：每组一行，行间留间距 */
.fam-rows {
  display: flex; flex-direction: column; gap: 10px;
}
.fam-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: rgba(var(--fg-rgb),.04);
  border: 1px solid rgba(var(--fg-rgb),.10);
  border-radius: 999px;
  color: var(--text);
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.fam-chip:hover { background: rgba(var(--fg-rgb),.08); border-color: rgba(var(--fg-rgb),.22); }
.fam-chip:active { transform: scale(.97); }
.fam-chip.is-base {
  background: rgba(255,193,7,.10);
  border-color: rgba(255,193,7,.35);
}
.fam-chip.is-base .fam-word { font-weight: 700; }
.fam-chip .fam-word { line-height: 1.2; }

/* Family view in History Vault */
.fam-list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0;
}
.fam-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(var(--fg-rgb),.03);
  border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 12px;
  cursor: pointer;
}
.fam-row:hover { background: rgba(var(--fg-rgb),.06); }
.fam-row .fam-base-word { font-weight: 700; font-size: 1rem; }
.fam-row .fam-members-preview { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.fam-row .fam-count {
  background: rgba(255,193,7,.15); color: #ffd54f;
  padding: 2px 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 700;
}
.fam-backfill-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin: 6px 0;
  background: rgba(33,150,243,.08);
  border: 1px solid rgba(33,150,243,.25);
  border-radius: 10px;
  font-size: .82rem; color: var(--text);
}
.fam-backfill-bar button {
  background: var(--white); color: var(--black);
  border: none; padding: 6px 12px;
  border-radius: 8px; font-weight: 600;
  cursor: pointer; font-size: .82rem;
}
.fam-backfill-bar button:disabled { opacity: .55; cursor: progress; }

/* Correction */
.fix-old { color: var(--dim); text-decoration: line-through; font-size: .88rem; }
.fix-new { color: var(--white); font-size: .95rem; font-weight: 600; margin-top: 4px; }
.fix-note { font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* Grammar */
.gram-original {
  font-size: .9rem; color: var(--muted);
  padding: 14px 16px; border: 1px solid rgba(var(--fg-rgb),.06);
  background: rgba(var(--fg-rgb),.025);
  border-radius: 18px; margin-bottom: 14px;
}
.gram-error {
  border: 1px solid rgba(var(--fg-rgb),.08); background: rgba(var(--fg-rgb),.03);
  border-radius: 18px; padding: 14px 16px; margin-bottom: 10px;
}
.gram-ok {
  border: 1px solid rgba(var(--fg-rgb),.08); background: rgba(var(--fg-rgb),.03);
  border-radius: 18px; padding: 14px 16px;
}
.g-label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; color: var(--dim); margin-bottom: 8px; }
.g-text { font-size: .92rem; color: var(--text); }
.g-expl { font-size: .8rem; color: var(--muted); margin-top: 6px; line-height: 1.65; }

/* Translation */
.trans-head {
  font-size: clamp(1.45rem, 4.8vw, 2.2rem);
  line-height: 1.38;
  word-break: break-word;
}
.trans-main-card,
.trans-option-card,
.trans-style-note {
  border: 1px solid rgba(var(--fg-rgb),.06);
  border-radius: 20px;
  background: rgba(var(--fg-rgb),.03);
}
.trans-main-card {
  font-size: 1.03rem;
  color: var(--white);
  line-height: 1.9;
  padding: 16px 18px;
}
.trans-main-card-subtle {
  color: var(--sub);
}
.trans-style-note {
  font-size: .84rem;
  color: var(--sub);
  line-height: 1.78;
  padding: 14px 16px;
}
.trans-option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trans-option-card {
  padding: 16px;
}
.trans-option-card.primary {
  border-color: rgba(var(--fg-rgb),.12);
}
.trans-option-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.t-num { font-size: .64rem; color: var(--dim); text-transform: uppercase; letter-spacing: .18em; font-weight: 800; }
.t-text { font-size: .94rem; color: var(--white); line-height: 1.85; }
.t-style { font-size: .75rem; color: var(--muted); line-height: 1.6; }

/* Compare */
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.cmp-card {
  border: 1px solid rgba(var(--fg-rgb),.06); border-radius: 20px; padding: 16px; background: rgba(var(--fg-rgb),.025);
}
.cmp-word { font-family: 'Space Grotesk', sans-serif; font-size: 1.12rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.cmp-meaning { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.cmp-usage { font-size: .82rem; color: var(--sub); line-height: 1.72; }
.cmp-diff {
  border-left: 2px solid rgba(var(--fg-rgb),.24);
  padding: 12px 16px; margin-bottom: 18px;
  font-size: .88rem; color: var(--sub); line-height: 1.72;
  background: rgba(var(--fg-rgb),.02);
  border-radius: 0 16px 16px 0;
}

/* Slang */
.slang-box {
  border: 1px dashed rgba(var(--fg-rgb),.14); border-radius: 18px;
  padding: 14px 16px; background: rgba(var(--fg-rgb),.025);
}
.slang-meaning { font-size: .9rem; color: var(--white); margin-bottom: 6px; }
.slang-ex { font-size: .82rem; color: var(--muted); font-style: italic; line-height: 1.7; }

.visual-note {
  font-size: .88rem; color: var(--sub); line-height: 1.78;
  background: rgba(var(--fg-rgb),.03); border: 1px solid rgba(var(--fg-rgb),.06);
  border-radius: 18px; padding: 14px 16px;
}
.visual-note-sub {
  font-size: .76rem; color: var(--dim); line-height: 1.6;
}
.visual-note-sub-inline {
  margin: -2px 0 10px;
}

/* Images */
.img-row { display: flex; gap: 10px; flex-wrap: nowrap; }
.img-card { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.img-card img {
  width: 100%; height: 96px; object-fit: cover;
  border-radius: 16px; border: 1px solid rgba(var(--fg-rgb),.06);
  filter: grayscale(100%);
}
.img-card img:hover { filter: grayscale(0%); }
.img-source {
  font-size: .64rem; color: var(--dim); opacity: .7;
  margin-top: 5px; letter-spacing: .08em; text-transform: uppercase;
}
.img-refresh-btn {
  background: none; border: 1px solid var(--line2);
  border-radius: 50%; width: 22px; height: 22px;
  color: var(--muted); font-size: .8rem; cursor: pointer;
  margin-left: 8px; vertical-align: middle;
  transition: color .15s, border-color .15s, transform .3s;
  display: inline-flex; align-items: center; justify-content: center;
}
.img-refresh-btn:hover { color: var(--white); border-color: var(--white); transform: rotate(180deg); }

/* 提示词编辑按钮（在刷新按钮左侧） */
.img-prompt-edit-btn {
  background: none; border: 1px solid var(--line2);
  border-radius: 50%; width: 22px; height: 22px;
  color: var(--muted); font-size: .72rem; cursor: pointer;
  margin-left: 8px; vertical-align: middle;
  transition: color .15s, border-color .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.img-prompt-edit-btn:hover { color: var(--white); border-color: var(--white); }
.img-prompt-edit-btn.has-custom { color: #f5b96a; border-color: #f5b96a; }

/* 提示词编辑遮罩层 */
.img-prompt-overlay {
  position: fixed; inset: 0; z-index: 2200;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.img-prompt-overlay.hidden { display: none; }
.img-prompt-card {
  background: var(--bg2, var(--bg2)); border: 1px solid var(--line);
  border-radius: var(--r-sm, 12px);
  width: 100%; max-width: 520px;
  padding: 18px 18px 14px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 10px;
}
.img-prompt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.img-prompt-title { font-size: .95rem; font-weight: 600; color: var(--white); }
.img-prompt-word { font-size: .8rem; color: var(--dim); font-style: italic; }
.img-prompt-hint { font-size: .72rem; color: var(--dim); line-height: 1.5; }
.img-prompt-text {
  width: 100%; min-height: 140px; resize: vertical;
  background: rgba(var(--fg-rgb),.04); border: 1px solid var(--line2);
  border-radius: var(--r-sm, 12px); color: var(--white);
  padding: 10px 12px; font-size: .82rem; line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.img-prompt-text:focus { outline: none; border-color: var(--white); }
.img-prompt-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.img-prompt-actions .img-prompt-btn {
  background: none; border: 1px solid var(--line2);
  color: var(--muted); padding: 6px 14px;
  font-size: .78rem; border-radius: var(--r-sm, 12px);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.img-prompt-actions .img-prompt-btn:hover { color: var(--white); border-color: var(--white); }
.img-prompt-actions .img-prompt-submit { background: var(--white); color: var(--black); border-color: var(--white); }
.img-prompt-actions .img-prompt-submit:hover { background: #ddd; }
.ai-img-loading {
  width: 140px; height: 105px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px dashed var(--line);
  font-size: .78rem; color: var(--dim);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.4 } 50% { opacity:1 } }

.ai-img-blocked {
  width: 140px; height: 105px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  border-radius: var(--r-sm); border: 1px dashed var(--line2);
  background: var(--bg2, transparent);
  color: var(--dim);
  cursor: help;
}
.ai-img-blocked-icon {
  font-size: 32px !important;
  color: var(--dim);
  opacity: .7;
}
.ai-img-blocked-text {
  font-size: .72rem;
  color: var(--dim);
  letter-spacing: .02em;
}

/* Image pin & footer */
.img-card-footer {
  display: flex; align-items: center; gap: 4px; margin-top: 3px;
}
.img-card-footer .img-source { margin-top: 0; }
.img-pin-btn {
  background: none; border: 1px solid var(--line2);
  border-radius: 4px; padding: 0 4px; height: 18px;
  font-size: .7rem; cursor: pointer; line-height: 1;
  color: var(--dim); transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.img-pin-btn:hover { border-color: var(--accent); color: var(--accent); }
.img-pin-btn:disabled { opacity: .5; cursor: default; }
.img-card-pinned { position: relative; flex: none; width: 100%; }
.img-card-pinned img {
  display: block;
  width: auto; max-width: 100%;
  height: auto; min-height: 0; max-height: 220px;
  object-fit: contain; aspect-ratio: auto;
  margin: 0 auto;
  filter: none; cursor: pointer;
}
.img-card-pinned .img-source {
  font-size: .65rem; color: var(--accent); opacity: .8; margin-top: 3px;
}

/* Lightbox */
.img-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; animation: fadeIn .15s ease;
}
.img-lightbox img {
  max-width: 94vw; max-height: 88vh; object-fit: contain;
  border-radius: 8px;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Loading */
.loading-dots {
  display: flex; gap: 5px; padding: 20px 0;
}
.loading-dots span {
  width: 6px; height: 6px; background: var(--muted);
  border-radius: 50%; animation: blink 1s infinite ease-in-out;
}
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }

/* ── 查词 Loading：2D 水波纹（小圆向外慢慢扩散）—— 配色取自 stitch/DESIGN.md ── */
.zen-loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 45%, rgba(0,17,21,.34), rgba(0,17,21,.58));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  animation: zenFade .6s ease both;
}
@keyframes zenFade { from { opacity: 0 } to { opacity: 1 } }

.zen-loader-inner {
  display: flex; flex-direction: column; align-items: center;
}

/* 彩虹水波纹：每圈一个颜色，按彩虹色序（红橙黄绿蓝靛紫）依次扩散、循环 */
.zen-ripple {
  position: relative; width: 200px; height: 200px;
  display: grid; place-items: center;
}
.zen-ripple span {                    /* 向外扩散的圆环（2D 细线） */
  position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: zenRippleOut 4.2s cubic-bezier(.22, .61, .36, 1) infinite;
}
.zen-ripple span:nth-child(1) { color: #ff1f1f; animation-delay: 0s;      }
.zen-ripple span:nth-child(2) { color: #ff8a00; animation-delay: .6s;     }
.zen-ripple span:nth-child(3) { color: #ffe000; animation-delay: 1.2s;    }
.zen-ripple span:nth-child(4) { color: #14e34f; animation-delay: 1.8s;    }
.zen-ripple span:nth-child(5) { color: #00a3ff; animation-delay: 2.4s;    }
.zen-ripple span:nth-child(6) { color: #4f5dff; animation-delay: 3.0s;    }
.zen-ripple span:nth-child(7) { color: #c61fff; animation-delay: 3.6s;    }
@keyframes zenRippleOut {
  0%   { transform: scale(.3); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: scale(9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zen-ripple span { animation: none; opacity: .3; }
  .zen-ripple span:nth-child(1) { transform: scale(2); }
  .zen-ripple span:nth-child(2) { transform: scale(3); }
  .zen-ripple span:nth-child(3) { transform: scale(4); }
  .zen-ripple span:nth-child(4) { transform: scale(5); }
  .zen-ripple span:nth-child(5) { transform: scale(6); }
  .zen-ripple span:nth-child(6) { transform: scale(7); }
  .zen-ripple span:nth-child(7) { transform: scale(8); }
}

/* App 启动画面：冷启动时全屏覆盖一句鼓励文案，淡出后回正常 UI */
.app-splash {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .42s ease;
}
.app-splash.hide { opacity: 0; pointer-events: none; }
.app-splash-text {
  font-size: 1.2rem; font-weight: 600; letter-spacing: .04em;
  color: var(--white);
  text-align: center; padding: 0 24px; max-width: 28em;
  line-height: 1.6;
  animation: appSplashBreath 2.4s ease-in-out infinite;
}
@keyframes appSplashBreath {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .app-splash-text { animation: none; opacity: .9; }
}

/* ── Word List Modal ── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 200;
  backdrop-filter: blur(18px);
}
.wl-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(900px, 96vw); max-height: 82dvh;
  background: var(--glass); border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 26px; z-index: 201;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.wl-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--white);
  flex-shrink: 0;
}
#listContent { overflow-y: auto; padding: 16px 20px; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th {
  text-align: left; padding: 8px 12px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim); border-bottom: 1px solid var(--line);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--sub); }
td:first-child { color: var(--white); font-weight: 600; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg3); }
code { font-family: 'SF Mono','Fira Code',monospace; font-size: .85em; }

/* ── Word List Toolbar ── */
.wl-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.wl-count { font-size: .72rem; color: var(--dim); }
.wl-clear {
  background: none; border: 1px solid var(--line2);
  border-radius: var(--r-sm); padding: 4px 10px;
  color: var(--dim); font-size: .75rem; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.wl-clear:hover { color: #c97; border-color: #c97; }

/* Word list: type icon */
.type-icon { margin-right: 5px; }

/* Example cell: truncate long text */
.ex-cell { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Action cell */
.act-cell { white-space: nowrap; display: flex; gap: 6px; align-items: center; padding: 8px 10px; }
.act-speak {
  padding: 3px 8px !important; font-size: .75rem !important;
  border-radius: 12px !important;
}
.act-retrans {
  background: none; border: 1px solid var(--line2);
  border-radius: var(--r-sm); padding: 3px 10px;
  color: var(--muted); font-size: .8rem; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.act-retrans:hover { color: var(--white); border-color: var(--white); background: var(--bg3); }

/* Focused row in word list (keyboard nav) */
tr:focus {
  outline: none;
  background: var(--bg3) !important;
}
tr:focus td { background: var(--bg3); }

/* ── Error debug (API 报错详情) ── */
.error-box .err-details {
  font-size: 0.8rem; font-family: ui-monospace, monospace;
  background: var(--bg3); border: 1px solid var(--line2);
  border-radius: var(--r-sm); padding: 10px 12px;
  margin-top: 8px; max-height: 240px; overflow: auto;
  white-space: pre-wrap; word-break: break-all; color: var(--sub);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 2px; }

/* ── Mobile ── */
@media (max-width: 640px) {
  :root {
    --header: 68px;
    --composer-side: 38px;
    --composer-center-h: 38px;
  }
  .history-drawer { display: none !important; }
  #appHeader { padding: var(--safe-top) 14px 0; }
  .header-mark { width: 36px; height: 36px; border-radius: 12px; }
  .header-eyebrow { display: none; }
  .header-mode-label { display: none; }
  .output { padding: 18px 14px 216px; }
  .input-bar { padding: 8px 10px 6px; gap: 8px; }
  .welcome-title { font-size: 2rem; }
  .welcome-sub { font-size: .9rem; }
  .feature-section, .result { padding: 20px; border-radius: 20px; }
  .r-word { font-size: 1.75rem; }
  .cmp-grid { grid-template-columns: 1fr; }
  .settings-panel { width: 100vw; }
  .tips-panel {
    top: 76px; right: 12px; left: 12px; width: auto;
  }
  .feature-grid,
  .feature-grid-tools { grid-template-columns: 1fr; gap: 12px; }
  .feature-card { padding: 18px; border-radius: 18px; gap: 14px; }
  .feature-icon { width: 50px; height: 50px; border-radius: 14px; }
  .feature-icon .material-symbols-outlined { font-size: 26px; }
  .feature-name { font-size: 1rem; }
  .vocab-head { flex-direction: column; align-items: flex-start; }
  .module-action-btn { width: 100%; justify-content: center; }
  .bottom-nav { gap: 8px; padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); }
  .bottom-nav-btn { min-height: 72px; border-radius: 18px; }
}

/* ── Mobile History Full Page ── */
.hist-page {
  position: fixed; inset: 0;
  z-index: 150;
  background: var(--bg);
  display: flex; flex-direction: column;
}
@keyframes slideInLeft { from { transform: translateX(100%); } to { transform: translateX(0); } }
.hist-page-hd {
  height: var(--header-total);
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--safe-top) 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--white);
  flex-shrink: 0;
}
.hist-page-search {
  padding: 12px 14px 0;
}
.hist-page-summary {
  padding: 10px 14px 0;
  font-size: .78rem;
  color: var(--muted);
}
.hist-page-toolbar {
  padding: 10px 14px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.hist-page-list {
  flex: 1; overflow-y: auto; padding: 10px 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}

.theme-cmd {
  margin-top: 4px;
  background: linear-gradient(135deg, rgba(var(--fg-rgb),.08), rgba(var(--fg-rgb),.03));
  border-color: rgba(var(--fg-rgb),.14);
  color: var(--sub);
}
.theme-cmd:hover { border-color: rgba(var(--fg-rgb),.28); color: var(--white); }

/* ── Topic Manager / Picker ── */
.topic-manager-page,
.topic-picker-page {
  position: fixed; inset: 0; z-index: 2100;
  background: var(--bg); display: flex; flex-direction: column;
}
.topic-manager-header,
.topic-picker-header {
  height: var(--header-total); display: flex; align-items: center; justify-content: space-between;
  padding: var(--safe-top) 16px 0; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.topic-manager-title,
.topic-picker-title { font-size: .92rem; font-weight: 700; color: var(--white); }
.topic-manager-body,
.topic-picker-body {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.topic-manager-search-row,
.topic-manager-sort-row { display: flex; gap: 8px; }
.topic-manager-list,
.topic-picker-list {
  display: flex; flex-direction: column; gap: 10px;
}
.topic-manager-card,
.topic-picker-item {
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg2);
  padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topic-manager-main,
.topic-picker-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.topic-manager-name,
.topic-picker-name { font-size: .88rem; font-weight: 700; color: var(--white); }
.topic-manager-meta,
.topic-picker-meta { font-size: .74rem; color: var(--muted); }
.topic-manager-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.topic-picker-section { display: flex; flex-direction: column; gap: 8px; }
.topic-picker-label { font-size: .72rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.topic-picker-chip,
.topic-picker-create {
  border: 1px solid var(--line2); background: var(--bg3); color: var(--white);
  border-radius: 12px; padding: 10px 12px; font-size: .82rem; cursor: pointer; text-align: left;
}
.topic-picker-chip.active,
.topic-picker-item.active { border-color: rgba(var(--fg-rgb),.2); background: rgba(var(--fg-rgb),.08); }
.topic-picker-empty { font-size: .8rem; color: var(--dim); padding: 8px 2px; }


/* ── Video Analysis Page ── */
.video-analysis-page {
  position: fixed; inset: 0; z-index: 172;
  background: var(--bg); display: flex; flex-direction: column;
}
.va-header {
  height: var(--header); display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.va-title { font-size: .92rem; font-weight: 700; color: var(--white); }
.va-actions { display: flex; align-items: center; gap: 6px; }
.vs-debug-toggle {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(var(--fg-rgb),.15);
  background: transparent; color: var(--dim); cursor: pointer;
  transition: all .12s;
}
.vs-debug-toggle:hover { color: var(--white); border-color: rgba(var(--fg-rgb),.3); }
.vs-debug-toggle.on {
  background: rgba(255,180,90,.18);
  border-color: rgba(255,180,90,.5);
  color: #ffd6a3;
}
.vs-logs-wrap {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
}
.vs-logs-wrap.hidden { display: none; }
.vs-logs-wrap .yt-flash-logs { margin-top: 0; }
.vs-debug-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.vs-logs-copy {
  font-size: .72rem; font-family: inherit;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(var(--fg-rgb),.15);
  background: rgba(var(--fg-rgb),.04); color: rgba(var(--fg-rgb),.7);
  cursor: pointer;
  transition: all .15s;
}
.vs-logs-copy:hover {
  background: var(--white); color: var(--black);
  border-color: var(--white);
}
.va-body {
  flex: 1; overflow-y: auto;
  padding: 20px 16px calc(118px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 16px;
}
.va-hero {
  padding: 16px; border-radius: 12px;
  background: var(--bg2);
}
.va-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem; font-weight: 700; color: var(--white); line-height: 1.4;
  letter-spacing: -.01em;
}
.va-hero-sub {
  margin-top: 8px; font-size: .82rem; color: rgba(var(--fg-rgb),.6); line-height: 1.7;
}
.va-note {
  font-size: .76rem; color: rgba(var(--fg-rgb),.4); line-height: 1.6;
}

/* ── 历史分析按钮（stitch 风：glass-card + chevron） ── */
.vs-history-open {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(var(--fg-rgb),.03);
  border: 1px solid rgba(var(--fg-rgb),.1);
  color: var(--white); cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .92rem; font-weight: 600; letter-spacing: -.005em;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}
.vs-history-open:hover {
  border-color: rgba(var(--fg-rgb),.35);
  background: rgba(var(--fg-rgb),.05);
}
.vs-history-open:active { transform: scale(.985); }
.vs-history-open::before {
  content: 'history';
  font-family: 'Material Symbols Outlined';
  font-size: 22px; font-weight: 400;
  color: var(--white);
}
.vs-history-open .vs-history-open-label {
  flex: 1; text-align: left;
}
.vs-history-open::after {
  content: 'chevron_right';
  font-family: 'Material Symbols Outlined';
  font-size: 22px; font-weight: 400;
  color: rgba(var(--fg-rgb),.4);
}

/* ── 底部固定的 URL 输入 / 进度条容器（stitch Quick Prompt 风） ── */
.va-footer {
  position: absolute; left: 0; right: 0;
  bottom: 0; z-index: 1;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6) 40%, rgba(0,0,0,.95));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.va-input-row {
  display: flex; gap: 12px; align-items: stretch;
}
.va-input-row.hidden { display: none; }
.va-url-input {
  flex: 1; min-width: 0;
  background: var(--bg4); color: var(--white);
  border: 1px solid rgba(var(--fg-rgb),.2); border-radius: 12px;
  padding: 12px 16px; font-size: .9rem; line-height: 1.4;
  font-family: inherit;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.va-url-input::placeholder { color: rgba(var(--fg-rgb),.4); }
.va-url-input:focus {
  border-color: var(--white);
  box-shadow: 0 0 0 1px var(--white);
}
.va-analyze-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 22px; border: 0; border-radius: 12px;
  background: var(--white); color: var(--black);
  font-weight: 700; font-size: .9rem;
  font-family: 'Space Grotesk', sans-serif; letter-spacing: -.005em;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.va-analyze-btn:hover { background: #e4e4e7; }
.va-analyze-btn:active { transform: scale(.96); }
.va-analyze-btn:disabled {
  background: rgba(var(--fg-rgb),.3); color: rgba(0,0,0,.5);
  cursor: not-allowed; transform: none;
}

.va-progress {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(var(--fg-rgb),.03);
  border: 1px solid rgba(var(--fg-rgb),.1);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.va-progress.hidden { display: none; }
.va-progress-label {
  font-size: .82rem; color: rgba(var(--fg-rgb),.85); line-height: 1.55;
  font-feature-settings: 'tnum';
}
.va-progress-label.ok { color: var(--white); }
.va-progress-label.warn { color: rgba(var(--fg-rgb),.7); }
.va-progress-label.error { color: #ffb3b3; }
.va-progress-bar {
  height: 3px; background: rgba(var(--fg-rgb),.1);
  border-radius: 999px; overflow: hidden;
}
.va-progress-bar-fill {
  height: 100%; width: 0%;
  background: var(--white);
  border-radius: 999px;
  transition: width .35s ease-out;
}
.vs-result { display: flex; flex-direction: column; gap: 0; }
.vs-result.hidden { display: none; }
.vs-overview {
  padding: 18px 18px 20px; border-radius: 12px 12px 0 0;
  background: var(--bg2);
  display: flex; flex-direction: column; gap: 10px;
}
.vs-overview + .vs-segments {
  border-radius: 0 0 12px 12px;
  margin-top: 0;
}
.vs-overview-meta {
  display: flex; flex-wrap: wrap; gap: 6px; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  color: rgba(var(--fg-rgb),.4);
}
.vs-chip {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(var(--fg-rgb),.06); color: rgba(var(--fg-rgb),.6);
}
.vs-chip.author, .vs-chip.auto { background: rgba(var(--fg-rgb),.08); color: rgba(var(--fg-rgb),.7); }
.vs-overview-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.18rem; font-weight: 700; color: var(--white); line-height: 1.4;
  letter-spacing: -.015em;
}
.vs-overview-summary {
  color: rgba(var(--fg-rgb),.7); font-size: .88rem; line-height: 1.7;
}
.vs-open-original {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .78rem; color: rgba(var(--fg-rgb),.6); text-decoration: none;
  transition: color .15s ease;
}
.vs-open-original:hover { color: var(--white); }
.vs-overview-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; gap: 10px;
}
.vs-clear-btn {
  font-size: .72rem; color: rgba(var(--fg-rgb),.45);
  background: transparent; border: 1px solid rgba(var(--fg-rgb),.12);
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: color .15s, border-color .15s;
  font-family: inherit;
}
.vs-clear-btn:hover { color: var(--white); border-color: rgba(var(--fg-rgb),.3); }
.vs-overview-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 4px;
}
.vs-back-history {
  font-family: inherit;
  font-size: .78rem; color: rgba(var(--fg-rgb),.7);
  background: rgba(var(--fg-rgb),.06);
  border: 1px solid rgba(var(--fg-rgb),.12);
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.vs-back-history:hover {
  color: var(--white);
  background: rgba(var(--fg-rgb),.1);
  border-color: rgba(var(--fg-rgb),.22);
}
.vs-make-topic-bar {
  position: sticky; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 0 8px;
  margin-top: 4px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  z-index: 2;
}
.vs-make-topic-bar .vs-seg-make-topic {
  font-size: .96rem; padding: 12px 28px; border-radius: 14px;
  min-width: 220px;
}
.vs-chip.topic { background: var(--white); color: var(--black); font-weight: 700; }
.vs-chip.provenance { font-weight: 700; letter-spacing: .12em; }
.vs-chip.provenance.qwen { background: rgba(var(--fg-rgb),.08); color: rgba(var(--fg-rgb),.7); }

/* ── History 面板（stitch 风：单色 + glass） ── */
.vs-history-panel {
  display: flex; flex-direction: column;
}
.vs-history-panel.hidden { display: none; }
.vs-history-head {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  padding: 4px 0 12px;
  flex-shrink: 0;
}
.vs-history-head-title {
  font-size: .72rem; font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: .14em;
  flex: 1;
}
.vs-history-empty {
  text-align: center; padding: 60px 0;
  color: rgba(var(--fg-rgb),.4); font-size: .9rem;
}
.vs-history-list { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.vs-history-item {
  padding: 14px 16px; border-radius: 12px;
  background: var(--bg2);
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.vs-history-item:hover { background: var(--bg3); }
.vs-history-item:active { transform: scale(.99); }
.vs-history-item-row {
  display: flex; align-items: center; gap: 10px;
  font-size: .66rem; color: rgba(var(--fg-rgb),.4);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  margin-bottom: 8px;
}
.vs-history-time { font-feature-settings: 'tnum'; }
.vs-history-source {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--fg-rgb),.06); color: rgba(var(--fg-rgb),.65);
}
.vs-history-segs { margin-left: auto; color: rgba(var(--fg-rgb),.6); }
.vs-history-del {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(var(--fg-rgb),.35); font-size: 1.1rem; padding: 0 4px;
  line-height: 1;
  transition: color .15s ease;
}
.vs-history-del:hover { color: #ffb3b3; }
.vs-history-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .98rem; font-weight: 700; color: var(--white);
  line-height: 1.4; letter-spacing: -.01em;
}
.vs-history-summary {
  margin-top: 6px; font-size: .82rem; color: rgba(var(--fg-rgb),.6);
  line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vs-segments {
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg2); border-radius: 12px;
  overflow: hidden;
}
.vs-seg {
  padding: 20px 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  background: transparent;
  transition: background .2s ease;
}
.vs-seg + .vs-seg {
  /* 用更深的背景叠层而非分割线（DESIGN.md no-line 规则） */
  border-top: 1px solid rgba(var(--fg-rgb),.04);
}
.vs-seg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: -2px;
}
.vs-seg-time {
  font-size: .68rem; color: rgba(var(--fg-rgb),.4);
  font-feature-settings: 'tnum';
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.vs-seg-jump {
  font-size: .7rem; color: rgba(var(--fg-rgb),.6); text-decoration: none;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(var(--fg-rgb),.05);
  border: 1px solid rgba(var(--fg-rgb),.08);
  transition: color .15s, background .15s, border-color .15s;
}
.vs-seg-jump:hover {
  color: var(--white); background: rgba(var(--fg-rgb),.1);
  border-color: rgba(var(--fg-rgb),.25);
}
.vs-seg-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.04rem; font-weight: 700; color: var(--white); line-height: 1.4;
  letter-spacing: -.015em;
}
.vs-seg-viewpoint {
  color: rgba(var(--fg-rgb),.78); font-size: .92rem; line-height: 1.75;
}
.vs-seg-en {
  color: rgba(var(--fg-rgb),.6); font-size: .9rem; line-height: 1.75;
  letter-spacing: .005em;
  font-style: italic;
}
.vs-kw {
  display: inline; cursor: pointer; padding: 1px 4px;
  margin: 0 -1px; border-radius: 4px;
  color: var(--white); font-weight: 600; font-style: normal;
  background: rgba(var(--fg-rgb),.1);
  transition: background .15s ease, color .15s ease;
}
.vs-kw:hover, .vs-kw:focus {
  background: var(--white); color: var(--black);
  outline: none;
}
.vs-word {
  display: inline-block;
  padding: 1px 4px;
  margin: 1px -1px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--white);
  font-style: normal;
  transition: background .12s, border-color .12s, color .12s;
}
.vs-word.plain { color: var(--muted); }
.vs-word:hover { background: rgba(var(--fg-rgb),.06); }
.vs-word.selected {
  background: rgba(var(--fg-rgb),.16);
  border-color: rgba(var(--fg-rgb),.28);
  color: var(--white);
  font-weight: 600;
}
.vs-seg-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px;
}
.vs-seg-make-topic {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .86rem; font-weight: 600;
  padding: 8px 14px; border-radius: 12px;
  background: var(--white); color: var(--black);
  border: none; cursor: pointer;
  transition: opacity .15s, transform .12s;
}
.vs-seg-make-topic:hover:not(:disabled) { opacity: .9; }
.vs-seg-make-topic:active:not(:disabled) { transform: scale(.97); }
.vs-seg-make-topic:disabled {
  background: rgba(var(--fg-rgb),.08);
  color: rgba(var(--fg-rgb),.4);
  cursor: not-allowed;
}
.vs-seg-actions-hint {
  font-size: .74rem; color: var(--dim);
}
.vs-seg.loading { opacity: .65; }
.vs-seg.failed { background: rgba(var(--fg-rgb),.025); }
.vs-seg.incomplete { background: rgba(var(--fg-rgb),.02); }
.vs-seg-incomplete-hint {
  font-size: .76rem; color: rgba(var(--fg-rgb),.55); line-height: 1.55;
}
.vs-seg-foot {
  display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px;
}
.vs-seg-fix {
  font-size: .7rem; color: rgba(var(--fg-rgb),.5);
  background: transparent; border: 1px solid rgba(var(--fg-rgb),.12);
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font-family: inherit;
  transition: color .15s, border-color .15s, background .15s;
}
.vs-seg-fix:hover {
  color: var(--white); border-color: rgba(var(--fg-rgb),.3);
  background: rgba(var(--fg-rgb),.04);
}
.vs-seg-correct {
  margin-top: 8px; padding: 12px;
  border-radius: 10px;
  background: rgba(var(--fg-rgb),.04);
  display: flex; flex-direction: column; gap: 8px;
}
.vs-seg-correct.hidden { display: none; }
.vs-correct-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg4); color: var(--white);
  border: 1px solid rgba(var(--fg-rgb),.15); border-radius: 8px;
  padding: 10px 12px; font-size: .82rem; line-height: 1.55;
  resize: vertical; min-height: 60px;
  font-family: inherit;
}
.vs-correct-input:focus { outline: none; border-color: var(--white); }
.vs-correct-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.vs-correct-cancel,
.vs-correct-submit {
  font-size: .76rem; padding: 6px 14px; border-radius: 999px;
  cursor: pointer; border: 1px solid transparent;
  font-family: inherit; font-weight: 600;
  transition: all .15s;
}
.vs-correct-cancel {
  background: transparent; color: rgba(var(--fg-rgb),.55);
  border-color: rgba(var(--fg-rgb),.15);
}
.vs-correct-cancel:hover { color: var(--white); border-color: rgba(var(--fg-rgb),.3); }
.vs-correct-submit {
  background: var(--white); color: var(--black);
}
.vs-correct-submit:hover { background: #e4e4e7; }
.vs-seg-skeleton {
  color: rgba(var(--fg-rgb),.4); font-style: italic;
  animation: vs-pulse 1.4s ease-in-out infinite;
}
.vs-seg-error {
  font-size: .8rem; color: #ffb3b3; line-height: 1.6;
}
.vs-seg-error a {
  color: var(--white); margin-left: 6px; text-decoration: underline;
}
@keyframes vs-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.vs-secondary {
  border: 1px solid rgba(var(--fg-rgb),.05); border-radius: 16px;
  background: var(--bg2); padding: 12px 16px;
}
.vs-secondary[open] { padding-bottom: 16px; }
.vs-secondary-title {
  cursor: pointer; font-size: .82rem; color: var(--sub); list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.vs-secondary-title::-webkit-details-marker { display: none; }
.vs-secondary-title::before {
  content: '+'; display: inline-block; width: 14px; text-align: center;
  color: var(--dim); font-weight: 700;
}
.vs-secondary[open] .vs-secondary-title::before { content: '−'; }
.vs-secondary-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }

/* ── YouTube Flashcards Page ── */
.yt-flash-page {
  position: fixed; inset: 0; z-index: 175;
  background: var(--bg); display: flex; flex-direction: column;
}
.ytf-header {
  height: var(--header-total); display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: var(--safe-top) 16px 0; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.ytf-title { font-size: .92rem; font-weight: 700; color: var(--white); }
.ytf-meta { min-width: 48px; text-align: right; font-size: .75rem; color: var(--dim); }
.ytf-body {
  flex: 1; overflow-y: auto; padding: 18px 16px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.ytf-hero {
  padding: 16px; border: 1px solid rgba(var(--fg-rgb),.06); border-radius: 22px;
  background: linear-gradient(135deg, rgba(var(--fg-rgb),.06), rgba(var(--fg-rgb),.025));
}
.ytf-source {
  font-size: .72rem; color: var(--sub); margin-bottom: 8px;
}
.ytf-hero-title {
  font-size: 1.15rem; font-weight: 800; color: var(--white); line-height: 1.35;
}
.ytf-summary {
  margin-top: 8px; color: var(--sub); font-size: .82rem; line-height: 1.7;
}
.ytf-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: .78rem; color: var(--white);
  text-decoration: none; border-bottom: 1px dashed rgba(var(--fg-rgb),.25);
}
.ytf-card-wrap { perspective: 1600px; }
.ytf-card {
  position: relative; min-height: 400px; cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.3,.9,.3,1.05);
}
.ytf-card.flipped { transform: rotateY(180deg); }
.ytf-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--bg2);
  box-shadow: 0 1px 2px rgba(15,17,21,0.04), 0 8px 24px -12px rgba(15,17,21,0.12);
  padding: 22px 20px;
}
.ytf-back { transform: rotateY(180deg); }
.ytf-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 16px;
}
.ytf-tag {
  font-size: .74rem; font-weight: 700; color: var(--white);
  background: rgba(var(--fg-rgb),.08); border: 1px solid rgba(var(--fg-rgb),.14);
  padding: 4px 10px; border-radius: 999px;
}
.ytf-count { font-size: .74rem; color: var(--dim); }
.ytf-key {
  font-size: .82rem; color: var(--sub); line-height: 1.6; margin-bottom: 12px;
}
.ytf-en {
  font-size: 1.32rem; line-height: 1.65; color: var(--white);
  letter-spacing: -.01em;
}
.ytf-bottom {
  margin-top: auto; padding-top: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}
.ytf-hint { font-size: .76rem; color: var(--dim); }
.ytf-listen,
.ytf-nav-btn {
  border: 1px solid var(--line2); background: var(--bg3); color: var(--white);
  border-radius: 12px; cursor: pointer; transition: all .15s;
}
.ytf-listen {
  padding: 10px 14px; font-size: .82rem; font-weight: 600;
}
.ytf-listen:hover,
.ytf-nav-btn:hover { border-color: var(--muted); }
.ytf-explain {
  font-size: 1.02rem; line-height: 1.85; color: var(--white); margin-bottom: 18px;
}
.ytf-context {
  margin-top: auto; padding: 14px 16px; border-radius: 14px;
  background: var(--bg3); border-left: 3px solid var(--accent);
  color: var(--sub); font-size: .82rem; line-height: 1.7;
}
.ytf-context-label {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 6px;
}
.ytf-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ytf-nav-btn {
  flex: 1; padding: 12px 14px; font-size: .85rem; font-weight: 700;
}
.ytf-nav-btn:disabled { opacity: .35; cursor: default; }
.ytf-empty {
  padding: 20px; border: 1px dashed var(--line2); border-radius: 16px;
  color: var(--dim); font-size: .84rem; line-height: 1.7;
}

/* ── Game: Picture Talk ── */
.game-cmd {
  margin-top: 4px;
  background: linear-gradient(135deg, rgba(var(--fg-rgb),.08), rgba(var(--fg-rgb),.03));
  border-color: rgba(var(--fg-rgb),.14);
  color: var(--sub);
}
.game-cmd:hover { border-color: rgba(var(--fg-rgb),.28); color: var(--white); }

.game-page {
  position: fixed; inset: 0; z-index: 160;
  background: var(--bg); display: flex; flex-direction: column;
}
.game-hd {
  height: var(--header-total); display: flex; align-items: center; justify-content: space-between;
  padding: var(--safe-top) 16px 0; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.game-title { font-size: .9rem; font-weight: 600; color: var(--white); }
.game-score {
  font-size: .85rem; font-weight: 700; color: var(--white);
  background: rgba(var(--fg-rgb),.08); padding: 3px 10px; border-radius: 12px;
}
.game-body {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 20px;
}

/* Start */
.game-start { text-align: center; max-width: 360px; }
.game-start-icon { font-size: 3rem; margin-bottom: 12px; }
.game-start-title { font-size: 1.5rem; font-weight: 800; color: var(--white); margin-bottom: 4px; }
.game-start-sub { font-size: .85rem; color: var(--muted); margin-bottom: 24px; }
.game-diff { display: flex; gap: 8px; margin-bottom: 20px; }
.diff-btn {
  flex: 1; padding: 12px 8px; border-radius: var(--r-sm);
  background: var(--bg3); border: 1px solid var(--line2);
  color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: all .15s; text-align: center; line-height: 1.4;
}
.diff-btn span { font-size: .68rem; font-weight: 400; opacity: .7; }
.diff-btn.active { border-color: rgba(var(--fg-rgb),.22); color: var(--white); background: rgba(var(--fg-rgb),.08); }
.diff-btn:hover { border-color: var(--muted); }
.game-go {
  width: 100%; padding: 14px; border: none; border-radius: var(--radius);
  background: var(--white); color: var(--black); font-size: .95rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.game-go:hover { opacity: .85; }
.game-go:disabled { opacity: .4; cursor: not-allowed; }
.game-pool-info { font-size: .72rem; color: var(--dim); margin-top: 12px; }

/* Play */
.game-play {
  text-align: center; width: 100%; max-width: 400px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.game-progress { font-size: .75rem; color: var(--dim); }
.game-timer {
  width: 100%; height: 3px; background: var(--line);
  border-radius: 2px; overflow: hidden; position: relative;
}
.game-timer::after {
  content: ''; position: absolute; left: 0; top: 0; height: 100%;
  background: var(--white); border-radius: 2px;
  width: var(--timer-pct, 100%); transition: width .3s linear;
}
.game-img-wrap {
  width: 280px; height: 210px; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3);
}
.game-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
}
.game-hint {
  font-size: .9rem; color: var(--muted);
  background: var(--bg3); padding: 6px 14px; border-radius: 16px;
}
.game-stt {
  min-height: 40px; font-size: 1rem; color: var(--white);
  padding: 8px; word-break: break-word;
}
.game-mic-row { display: flex; gap: 12px; align-items: center; }
.game-mic {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bg3); border: 2px solid var(--line2);
  font-size: 1.5rem; cursor: pointer;
  transition: all .2s; display: flex; align-items: center; justify-content: center;
}
.game-mic:hover { border-color: rgba(var(--fg-rgb),.22); }
.game-mic.recording {
  border-color: var(--white); background: rgba(var(--fg-rgb),.12);
  animation: micPulse 1s ease infinite;
}
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.3); } 50% { box-shadow: 0 0 0 12px rgba(239,68,68,0); } }
.game-hint-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--line2);
  font-size: 1.1rem; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.game-hint-btn:hover { border-color: var(--muted); }
.game-hint-btn:disabled { opacity: .3; cursor: not-allowed; }
.game-skip {
  background: none; border: 1px solid var(--line2);
  border-radius: 20px; padding: 8px 16px; color: var(--dim);
  font-size: .8rem; cursor: pointer; transition: all .15s;
}
.game-skip:hover { color: var(--white); border-color: var(--muted); }

/* Reveal */
.game-reveal {
  text-align: center; max-width: 400px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.game-stars { font-size: 2rem; letter-spacing: 4px; }
.game-reveal-word { font-size: 1.8rem; font-weight: 800; color: var(--white); }
.game-reveal-meta { font-size: .85rem; color: var(--muted); }
.game-reveal-mine {
  font-size: .85rem; color: var(--sub); padding: 8px 14px;
  background: var(--bg3); border-radius: var(--r-sm); max-width: 100%;
  word-break: break-word;
}
.game-reveal-ex {
  font-size: .82rem; color: var(--muted); line-height: 1.6;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  max-width: 100%; text-align: left;
}
.game-next {
  margin-top: 8px; padding: 12px 32px; border: none; border-radius: 20px;
  background: var(--white); color: var(--black); font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.game-next:hover { opacity: .85; }

/* Final */
.game-final { text-align: center; max-width: 360px; }
.game-final-icon { font-size: 3rem; margin-bottom: 8px; }
.game-final-score { font-size: 2rem; font-weight: 800; color: var(--white); margin-bottom: 4px; }
.game-final-detail { font-size: .85rem; color: var(--muted); margin-bottom: 20px; line-height: 1.8; }
.game-back {
  width: 100%; margin-top: 8px; padding: 12px;
  background: none; border: 1px solid var(--line2); border-radius: var(--radius);
  color: var(--muted); font-size: .9rem; cursor: pointer; transition: all .15s;
}
.game-back:hover { color: var(--white); border-color: var(--muted); }

/* ── Word Detail Page ── */
.word-detail-page {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.wd-header {
  height: var(--header-total);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--safe-top) 16px 0; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.wd-title { font-size: .95rem; font-weight: 600; color: var(--white); }
.wd-delete { color: #e74c3c !important; }
.wd-delete .material-symbols-outlined { font-size: 1.2rem; }
.wd-body {
  flex: 1; overflow-y: auto; padding: 20px 16px 80px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
}
.wd-hint {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center; padding: 14px;
  font-size: .78rem; color: var(--dim);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.wd-hint-top {
  bottom: auto; top: 0;
  padding-top: calc(var(--safe-top) + 52px);
}
.wd-hint.visible { opacity: 1; }

/* ── Topic Review ── */
.tr-page {
  position: fixed; inset: 0; z-index: 180;
  background: var(--bg); display: flex; flex-direction: column;
}
.tr-hd {
  height: var(--header-total); display: flex; align-items: center; justify-content: space-between;
  padding: var(--safe-top) 16px 0; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.tr-title { font-size: .92rem; font-weight: 700; color: var(--white); }
.tr-hd-right { display: flex; align-items: center; gap: 10px; }
.tr-progress { font-size: .72rem; color: var(--dim); }
.tr-auto-speak-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.toggle-sm { transform: scale(.8); transform-origin: right center; }
.tr-body {
  flex: 1; overflow-y: auto; padding: 18px 16px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
/* topic picker */
.tr-topic-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.tr-topic-chip {
  border: 1px solid var(--line2); background: var(--bg3); color: var(--sub);
  border-radius: 999px; padding: 10px 16px; font-size: .82rem; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tr-topic-chip:active { background: rgba(var(--fg-rgb),.06); }
.tr-topic-count { font-size: .68rem; color: var(--dim); margin-left: 4px; }
/* card */
.tr-card {
  border: 1px solid rgba(var(--fg-rgb),.06); border-radius: 22px;
  background: var(--bg2); padding: 22px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.tr-word {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem; font-weight: 800; color: var(--white);
}
.tr-ipa { font-size: .82rem; color: var(--muted); }
.tr-speak-row { display: flex; gap: 8px; }
.tr-img {
  width: 100%; max-height: 240px; object-fit: cover; border-radius: 14px;
  background: var(--bg3);
}
.tr-example {
  font-size: .92rem; color: var(--sub); line-height: 1.7;
  font-style: italic;
}
.tr-meaning {
  font-size: .95rem; color: var(--white); line-height: 1.6;
}
.tr-actions {
  display: flex; gap: 10px; margin-top: 4px;
}
.tr-btn {
  flex: 1; border: 1px solid var(--line2); background: var(--bg3); color: var(--sub);
  border-radius: 999px; padding: 14px 0; font-size: .88rem; cursor: pointer; text-align: center;
}
.tr-btn.know { border-color: rgba(100,255,180,.26); color: #c0ffe0; }
.tr-btn.forgot { border-color: rgba(255,120,120,.22); color: #ffd4d4; }
/* review log chips */
.tr-log { display: flex; flex-wrap: wrap; gap: 5px; }
.tr-log-chip {
  font-size: .6rem; padding: 2px 6px; border-radius: 6px;
  background: rgba(var(--fg-rgb),.05); color: var(--dim);
}
.tr-log-chip.know { color: #a0e8c0; background: rgba(100,255,180,.08); }
.tr-log-chip.forgot { color: #ffb0b0; background: rgba(255,120,120,.08); }
/* summary */
.tr-summary-card {
  border: 1px solid rgba(var(--fg-rgb),.06); border-radius: 22px;
  background: var(--bg2); padding: 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.tr-summary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.tr-stat {
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg3); padding: 14px;
}
.tr-stat-label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.tr-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--white); margin-top: 4px; }
.tr-kicker { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tr-empty { font-size: .84rem; line-height: 1.7; color: var(--dim); }

/* topic list with progress */
.tr-topic-list { display: flex; flex-direction: column; gap: 12px; }
.tr-topic-row {
  border: 1px solid var(--line2); background: var(--bg2); border-radius: 16px;
  padding: 14px 16px; cursor: pointer; transition: border-color .15s;
}
.tr-topic-row:active { border-color: rgba(var(--fg-rgb),.15); }
.tr-topic-row-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tr-topic-name { font-size: .88rem; font-weight: 700; color: var(--white); }
.tr-topic-due { font-size: .72rem; color: var(--dim); }
.tr-topic-due.has-due { color: #ffb080; }
.tr-progress-bar {
  height: 20px; border-radius: 6px; background: var(--bg3); overflow: hidden;
  display: flex; width: 100%;
  /* 进入页面时从左到右"增长"铺满（每条按行号错峰，形成自上而下小级联） */
  animation: trBarGrow .5s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes trBarGrow { from { width: 0; } to { width: 100%; } }
.tr-progress-seg {
  height: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* 相邻色段之间一道暗缝，区分相近的几段绿 */
.tr-progress-seg + .tr-progress-seg { box-shadow: inset 1px 0 0 rgba(0,0,0,.4); }
.tr-seg-num {
  font-size: .68rem; font-weight: 700; line-height: 1;
  color: var(--white); text-shadow: 0 1px 2px rgba(0,0,0,.45);
  white-space: nowrap; padding: 0 2px;
}
/* 完全掌握金徽章（话题名旁 / 图例） */
.tr-topic-badge {
  font-size: .8rem; line-height: 1;
  color: #f5c542; text-shadow: 0 0 8px rgba(245,197,66,.55);
}
.tr-topic-name .tr-topic-badge { margin-left: 6px; }
/* 顶部统一颜色图例（说明各颜色代表什么） */
.tr-color-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 16px; }
.tr-legend-item { font-size: .68rem; color: var(--sub); display: flex; align-items: center; gap: 5px; }
.tr-legend-dot { width: 9px; height: 9px; border-radius: 3px; }
/* topic status page */
.tr-status-card {
  border: 1px solid rgba(var(--fg-rgb),.06); border-radius: 22px;
  background: var(--bg2); padding: 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.tr-stage-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: .82rem; }
.tr-stage-label { color: var(--sub); }
.tr-stage-count { color: var(--white); font-weight: 700; }
.tr-start-btn {
  border: 1px solid rgba(var(--fg-rgb),.14); background: rgba(var(--fg-rgb),.08); color: var(--white);
  border-radius: 999px; padding: 14px 0; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-align: center; width: 100%;
}
.tr-start-btn[disabled] { opacity: .4; cursor: not-allowed; }
.tr-card-stage { font-size: .7rem; color: var(--dim); letter-spacing: .08em; }
/* summary stage change */
.tr-stage-change { font-size: .68rem; color: var(--dim); }
.tr-stage-change.up { color: #a0e8c0; }
.tr-stage-change.down { color: #ffb0b0; }

/* ── Snap (随手拍) Page ── */
.snap-page {
  position: fixed; inset: 0; z-index: 150;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.snap-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-top) + 12px) 14px 12px;
  border-bottom: 1px solid rgba(var(--fg-rgb),.06);
  background: var(--bar-bg); backdrop-filter: blur(24px);
}
.snap-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; font-weight: 600; color: var(--white);
  letter-spacing: -.01em;
}
.snap-hd-right { display: inline-flex; align-items: center; gap: 4px; }
.snap-retry-btn { opacity: .6; }
.snap-body { flex: 1; overflow-y: auto; padding: 20px 16px calc(var(--safe-bottom) + 24px); position: relative; }
.snap-body.snap-body-camera { padding: 0; overflow: hidden; }
.snap-camera {
  position: absolute; inset: 0;
  background: #000;
  overflow: hidden;
}
.snap-cam-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}
.snap-cam-error {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 60px 24px;
  background: var(--bg);
  z-index: 4;
  text-align: center;
}
.snap-cam-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px calc(var(--safe-bottom) + 24px);
  z-index: 3;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
}
.snap-cam-controls > * { pointer-events: auto; }
.snap-cam-album {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.7);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  backdrop-filter: blur(10px);
}
.snap-cam-album img {
  width: 100%; height: 100%; object-fit: cover; display: none;
}
.snap-cam-album.has-thumb img { display: block; }
.snap-cam-album.has-thumb .material-symbols-outlined { display: none; }
.snap-cam-album .material-symbols-outlined { color: #fff; font-size: 24px; }
.snap-cam-shutter {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 3px rgba(0,0,0,.15);
  cursor: pointer; padding: 0;
  transition: transform .12s;
  outline: 3px solid transparent;
  outline-offset: -10px;
}
.snap-cam-shutter:active { transform: scale(.94); }
.snap-cam-spacer { width: 52px; height: 52px; display: inline-block; }
.snap-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 60px 24px;
}
.snap-empty-icon {
  width: 84px; height: 84px; border-radius: 22px;
  background: rgba(var(--fg-rgb),.05);
  border: 1px solid rgba(var(--fg-rgb),.08);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(20px);
}
.snap-empty-icon .material-symbols-outlined { font-size: 42px; color: var(--white); }
.snap-empty-text {
  color: var(--muted); font-size: .92rem; line-height: 1.7;
  text-align: center; max-width: 320px;
}
.snap-capture-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 16px;
  background: var(--white); color: var(--black);
  border: none; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .98rem; font-weight: 600;
  transition: opacity .15s, transform .15s;
}
.snap-capture-btn:hover { opacity: .9; }
.snap-capture-btn:active { transform: scale(.98); }
.snap-capture-btn .material-symbols-outlined { font-size: 20px; }
.snap-capture-row {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.snap-capture-btn-alt {
  background: rgba(var(--fg-rgb),.06);
  color: var(--white);
  border: 1px solid rgba(var(--fg-rgb),.12);
}
.snap-capture-btn-alt:hover { background: rgba(var(--fg-rgb),.10); opacity: 1; }
.snap-progress {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 80px 24px;
}
.snap-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(var(--fg-rgb),.12);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: snapSpin .8s linear infinite;
}
@keyframes snapSpin { to { transform: rotate(360deg); } }
.snap-progress-text { color: var(--muted); font-size: .9rem; }
.snap-result { display: flex; flex-direction: column; gap: 18px; }
.snap-photo-wrap {
  width: 100%; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(var(--fg-rgb),.06);
  background: rgba(var(--fg-rgb),.03);
}
.snap-photo-wrap img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.snap-card {
  border: 1px solid rgba(var(--fg-rgb),.05);
  border-radius: 20px; padding: 20px;
  background: linear-gradient(180deg, rgba(var(--fg-rgb),.03), rgba(var(--fg-rgb),.012));
}
.snap-card-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .7rem; font-weight: 700;
  color: var(--dim); text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: 10px;
}
.snap-sentence-en {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--white); font-size: 1.12rem; font-weight: 500;
  line-height: 1.55; letter-spacing: -.01em;
}
.snap-sentence-cn { color: var(--muted); font-size: .92rem; line-height: 1.7; margin-top: 10px; }
.snap-kw {
  background: rgba(var(--fg-rgb),.10);
  border: 1px solid rgba(var(--fg-rgb),.16);
  border-radius: 8px;
  padding: 1px 6px;
  cursor: pointer;
  color: var(--white);
  transition: background .15s, border-color .15s;
}
.snap-kw:hover { background: rgba(var(--fg-rgb),.18); border-color: rgba(var(--fg-rgb),.32); }

.snap-word {
  display: inline-block;
  padding: 1px 4px;
  margin: 1px -1px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--white);
  transition: background .12s, border-color .12s, color .12s;
}
.snap-word.plain { color: var(--muted); }
.snap-word:hover { background: rgba(var(--fg-rgb),.06); }
.snap-word.selected {
  background: rgba(var(--fg-rgb),.16);
  border-color: rgba(var(--fg-rgb),.28);
  color: var(--white);
}
.snap-word.selected:hover { background: rgba(var(--fg-rgb),.22); }

/* 标题分词：词组/句子标题里每个词可点选，点一次高亮，再点一次进入查询 */
.tap-word {
  display: inline-block;
  padding: 0 3px;
  margin: 0 -1px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  color: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.tap-word:hover { background: rgba(var(--fg-rgb),.08); }
.tap-word.armed {
  background: rgba(var(--fg-rgb),.20);
  border-color: rgba(var(--fg-rgb),.36);
}
.tap-word.armed::after {
  content: '再点查询';
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  font-size: .6em;
  font-weight: 500;
  color: var(--muted);
  background: rgba(var(--fg-rgb),.10);
  border-radius: 4px;
  vertical-align: middle;
}

.snap-actions {
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch;
}
.snap-make-topic-btn {
  width: 100%;
  padding: 16px 20px;
  border-radius: 18px;
  background: var(--white);
  color: #000;
  border: none;
  font-weight: 700; font-size: 1rem;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: .01em;
  transition: opacity .15s, transform .12s;
}
.snap-make-topic-btn:hover:not(:disabled) { opacity: .9; }
.snap-make-topic-btn:active:not(:disabled) { transform: scale(.99); }
.snap-make-topic-btn:disabled { opacity: .35; cursor: not-allowed; }
.snap-actions-hint {
  color: var(--muted); font-size: .82rem; text-align: center;
}
.snap-objects-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.snap-obj-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: rgba(var(--fg-rgb),.04);
  border: 1px solid rgba(var(--fg-rgb),.06);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer; text-align: left;
  color: inherit; font-family: inherit;
  transition: background .15s, border-color .15s, transform .15s;
}
.snap-obj-chip:hover { background: rgba(var(--fg-rgb),.07); border-color: rgba(var(--fg-rgb),.18); }
.snap-obj-chip:active { transform: scale(.98); }
.snap-obj-chip.selected {
  background: rgba(var(--fg-rgb),.16);
  border-color: rgba(var(--fg-rgb),.32);
}
.snap-obj-chip.selected:hover { background: rgba(var(--fg-rgb),.20); }
.snap-obj-en {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; color: var(--white); font-size: .95rem;
}
.snap-obj-cn { color: var(--muted); font-size: .78rem; }
.snap-topic-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.snap-topic-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--fg-rgb),.08);
  border: 1px solid rgba(var(--fg-rgb),.14);
  border-radius: 999px;
  padding: 4px 10px 4px 12px;
  font-size: .82rem; font-weight: 600;
  color: var(--white);
  transition: border-color .15s, background .15s;
}
.snap-topic-chip:focus-within {
  border-color: rgba(var(--fg-rgb),.40);
  background: rgba(var(--fg-rgb),.12);
}
.snap-topic-hash { color: var(--white); opacity: .85; }
.snap-topic-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-family: inherit;
  font-size: .82rem; font-weight: 600;
  padding: 4px 0;
  width: 9ch;
  min-width: 6ch;
  field-sizing: content; /* 现代浏览器自动撑宽 */
}
.snap-topic-input::placeholder { color: var(--muted); font-weight: 500; }
.snap-topic-edit {
  font-size: 14px !important;
  color: var(--muted);
  opacity: .7;
}
.snap-topic-chip:focus-within .snap-topic-edit { opacity: 0; }

.snap-history { display: flex; flex-direction: column; gap: 12px; }
.snap-history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 6px;
}
.snap-history-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .78rem; font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: .14em;
}
.snap-history-empty {
  color: var(--muted); text-align: center; padding: 60px 16px;
  font-size: .9rem;
}
.snap-history-list { display: flex; flex-direction: column; gap: 10px; }
.snap-history-item {
  position: relative;
  display: flex; gap: 12px; align-items: stretch;
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(var(--fg-rgb),.06);
  background: rgba(var(--fg-rgb),.03);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.snap-history-item:hover {
  background: rgba(var(--fg-rgb),.05);
  border-color: rgba(var(--fg-rgb),.14);
}
.snap-history-thumb {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 12px; overflow: hidden;
  background: rgba(var(--fg-rgb),.05);
}
.snap-history-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snap-history-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.snap-history-row1 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.snap-history-time { font-size: .76rem; color: var(--dim); }
.snap-history-topic {
  font-size: .76rem; color: var(--white);
  background: rgba(var(--fg-rgb),.08);
  border: 1px solid rgba(var(--fg-rgb),.14);
  border-radius: 999px; padding: 1px 8px;
}
.snap-history-en {
  font-size: .85rem; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.snap-history-del {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; line-height: 20px; text-align: center;
  border: none; background: transparent;
  color: var(--dim); cursor: pointer; font-size: 16px;
  border-radius: 50%;
}
.snap-history-del:hover { background: rgba(var(--fg-rgb),.08); color: var(--white); }

/* ── Resize smooth ── */
* { transition-property: none; }
.settings-panel, .icon-btn, .send-btn, .mode-toggle, .sp-save,
.speak-pill, .h-item, .list-cmd, textarea,
.sp-section input, .sp-section select,
.toggle-track, .toggle-track::after { transition-property: all; }

@media (max-width: 640px) {
  .batch-bar,
  .topic-manager-search-row,
  .topic-manager-sort-row,
  .topic-manager-actions { flex-direction: column; }
}