/* 跨书词汇复现追踪 · 前端样式
   Phase B 设计语言：Glassmorphism 侧边栏 · Aurora 背景 · Gradient 级别徽章 · 大字号标题 */

* { box-sizing: border-box; }

:root {
  /* 背景与层次 */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.75);
  --surface-soft: rgba(241, 245, 249, 0.80);
  --surface-hover: rgba(241, 245, 249, 0.90);

  /* 边框 */
  --border: rgba(226, 232, 240, 0.80);
  --border-strong: #cbd5e1;
  --border-glass: rgba(255, 255, 255, 0.45);

  /* 文字 */
  --text: #0f172a;
  --text-soft: #334155;
  --muted: #64748b;
  --muted-light: #94a3b8;

  /* 强调色 · indigo */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: rgba(238, 242, 255, 0.90);
  --accent-ring: rgba(79, 70, 229, 0.15);

  /* 高亮色 · amber */
  --hl-bg: #fef3c7;
  --hl-strong: #f59e0b;
  --hl-text: #78350f;

  /* 级别渐变色（flat 用于文字/占位，grad 用于徽章） */
  --l1: #10b981;
  --l1-grad: linear-gradient(135deg, #34d399, #06b6d4);
  --l2: #3b82f6;
  --l2-grad: linear-gradient(135deg, #22d3ee, #3b82f6);
  --l3: #6366f1;
  --l3-grad: linear-gradient(135deg, #60a5fa, #6366f1);
  --l4: #a855f7;
  --l4-grad: linear-gradient(135deg, #818cf8, #a855f7);
  --l5: #ec4899;
  --l5-grad: linear-gradient(135deg, #c084fc, #ec4899);
  --l6: #f43f5e;
  --l6-grad: linear-gradient(135deg, #f472b6, #f43f5e);

  /* 角色 */
  --special: #db2777;
  --common: #475569;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 30px -8px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.12);
  --shadow-colored: 0 10px 30px -8px rgba(79, 70, 229, 0.20);

  /* 圆角（整体放大） */
  --r-sm: 6px;
  --r: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* 过渡 */
  --t-fast: 150ms ease;
  --t: 280ms cubic-bezier(0.32, 0.72, 0, 1);
  --t-slow: 500ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── Aurora 背景（fixed，不影响布局） ──────────────────────────── */
html::before {
  content: "";
  position: fixed;
  top: -15vh; right: -15vw;
  width: 55vw; height: 55vh;
  border-radius: 50%;
  background: rgba(129, 140, 248, 0.13);
  filter: blur(100px);
  z-index: 0;
  pointer-events: none;
}
html::after {
  content: "";
  position: fixed;
  bottom: -15vh; left: -15vw;
  width: 55vw; height: 55vh;
  border-radius: 50%;
  background: rgba(244, 63, 94, 0.08);
  filter: blur(100px);
  z-index: 0;
  pointer-events: none;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "PingFang SC", "HarmonyOS Sans", "Noto Sans SC", "Source Han Sans SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ─── 顶栏 ─────────────────────────────────────────────────────────── */
.topbar {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-glass);
  padding: 12px 24px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
}

.topbar h1 {
  margin: 0;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar h1::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, var(--accent), var(--l2));
  border-radius: 2px;
}

/* 桌面端筛选条：topbar 下方独立一行 */
.filters-pane {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  padding: 8px 24px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#search {
  flex: 1 1 320px;
  min-width: 240px;
  padding: 8px 12px;
  border: 1.5px solid rgba(79, 70, 229, 0.35);
  border-radius: var(--r-md);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: inherit;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.07);
}
#search::placeholder { color: var(--muted-light); }
#search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

/* ─── 级别筛选 · 父级别 chip + 子级别 pill ───────────────────────── */
.level-filter {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.level-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 3px;
  background: var(--surface-soft);
  border-radius: 999px;
}
.level-toggle {
  cursor: pointer;
  border: none;
  font-family: inherit;
  min-width: 26px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all var(--t-fast);
}
.level-toggle:hover { transform: scale(1.05); }
.level-toggle.partial { opacity: 0.7; }
.level-toggle.off {
  background: var(--surface) !important;
  color: var(--muted);
  box-shadow: none;
  opacity: 0.55;
}
.sub-level-pill {
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--surface);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.sub-level-pill:hover { color: var(--text-soft); border-color: var(--border-strong); }
.sub-level-pill.active {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.sub-level-pill.active { background-color: transparent; }
.sub-level-pill.active.L1 { background-image: var(--l1-grad); }
.sub-level-pill.active.L2 { background-image: var(--l2-grad); }
.sub-level-pill.active.L3 { background-image: var(--l3-grad); }
.sub-level-pill.active.L4 { background-image: var(--l4-grad); }
.sub-level-pill.active.L5 { background-image: var(--l5-grad); }
.sub-level-pill.active.L6 { background-image: var(--l6-grad); }

.tier-filter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--surface-soft);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--muted);
}
.tier-filter-wrap label { white-space: nowrap; }
#tier-filter {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
}

.stats {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ─── 主布局 ──────────────────────────────────────────────────────── */
.layout {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
}

/* ─── 左侧词列表面板 ────────────────────────────────────────────── */
.word-list-pane {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--border-glass);
  box-shadow: 20px 0 40px -20px rgba(15, 23, 42, 0.05);
  min-height: 0;
}

.list-header {
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 2;
}

.list-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.list-header-row + .list-header-row { margin-top: 10px; }

.list-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}

.list-count {
  font-size: 11px;
  color: var(--muted);
  padding: 2px 8px;
  background: var(--surface-soft);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.list-header .toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}
.list-header .toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.list-header .toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: var(--border-strong);
  position: relative;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  transition: background 200ms ease;
}
.list-header .toggle input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 180ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.list-header .toggle input[type="checkbox"]:checked {
  background: var(--accent);
}
.list-header .toggle input[type="checkbox"]:checked::before {
  transform: translateX(12px);
}
.list-header .toggle span {
  font-size: 12px;
  color: var(--text-soft);
}

.list-header select {
  padding: 4px 22px 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 12px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>") no-repeat right 7px center;
  color: var(--text-soft);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-fast);
  font-family: inherit;
}
.list-header select:hover { border-color: var(--border-strong); }
.list-header select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ?-提示气泡 */
.hint {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  cursor: help;
  user-select: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.hint:hover, .hint:focus {
  background: var(--accent);
  color: #fff;
  outline: none;
}
.hint::before,
.hint::after {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) 50ms, visibility var(--t-fast) 50ms;
  z-index: 1000;
}
/* 气泡向右展开（east 方向），避开左侧窄栏溢出 */
.hint::before {
  content: attr(data-tip);
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  padding: 10px 12px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  white-space: normal;
  text-align: left;
}
.hint::after {
  content: "";
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #1e293b;
}
.hint:hover::before,
.hint:hover::after,
.hint:focus::before,
.hint:focus::after {
  opacity: 1;
  visibility: visible;
}

/* ─── 词列表 ─────────────────────────────────────────────────────── */
.word-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.08) transparent;
  padding: 6px 8px;
}
.word-list::-webkit-scrollbar { width: 4px; }
.word-list::-webkit-scrollbar-track { background: transparent; }
.word-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
}
.word-list::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.14); }

.word-list .loading {
  padding: 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.word-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: var(--r-lg);
  border-left: none;
  margin-bottom: 2px;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.word-row:hover { background: rgba(255,255,255,0.65); }
.word-row.active {
  background: #ffffff;
  box-shadow: var(--shadow-md);
  transform: translateX(2px);
}
.word-row.active .surf { color: var(--accent); }

.word-row .surf {
  font-family: "SF Mono", "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.word-row .meta {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: 8px;
}
.word-row .badge-lemma {
  font-size: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  margin-left: 6px;
  font-family: inherit;
  font-weight: 500;
}

/* ─── 详情区 ─────────────────────────────────────────────────────── */
.detail {
  flex: 1;
  overflow-y: auto;
  padding: 28px 36px 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.detail::-webkit-scrollbar { width: 4px; }
.detail::-webkit-scrollbar-track { background: transparent; }
.detail::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
}

.placeholder {
  color: var(--muted);
  padding: 60px 20px;
  text-align: center;
  font-size: 13px;
}

.detail h2 {
  margin: 0 0 8px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1.05;
}

/* 音标行 */
.phonetics-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 16px;
  min-height: 22px;
}
.phonetics-ipa {
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-style: italic;
}
.phonetics-ipa.loaded { color: var(--text-soft); }
.phonetics-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}
.phonetics-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.phonetics-btn:active { transform: scale(0.95); }

/* 单词标题行：h2 + 音标 + 朗读按钮 + 语速按钮（同行排列） */
.word-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.word-headline h2 { margin: 0; flex-shrink: 0; }

.speed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.speed-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.detail .lemma-note {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 20px;
}
.detail .lemma-note code {
  padding: 1px 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-sm);
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  margin: 0 2px;
}

/* ─── 汇总卡 ─────────────────────────────────────────────────────── */
.summary-card {
  background: var(--surface);
  border: 1px solid rgba(226, 232, 240, 0.60);
  border-radius: var(--r-xl);
  padding: 22px 26px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.summary-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 50%;
  height: 120%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.summary-card .row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
}
.summary-card .row + .row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.summary-card .metric {
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.summary-card .metric strong {
  color: var(--accent);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.summary-card .row + .row .metric strong {
  /* 第二行指标相对次要，字号和颜色稍弱 */
  color: var(--text);
  font-size: 14px;
}

/* ─── 级别色片 ───────────────────────────────────────────────────── */
.level-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-soft);
}
.level-bar + .level-bar { margin-left: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 7px;
  border-radius: var(--r);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.03em;
  line-height: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.chip.L1 { background: var(--l1-grad); }
.chip.L2 { background: var(--l2-grad); }
.chip.L3 { background: var(--l3-grad); }
.chip.L4 { background: var(--l4-grad); }
.chip.L5 { background: var(--l5-grad); }
.chip.L6 { background: var(--l6-grad); }

/* ─── 词库标签 ───────────────────────────────────────────────────── */
.bank-chip {
  display: inline-block;
  padding: 1px 7px;
  background: var(--surface-soft);
  color: var(--text-soft);
  border-radius: var(--r-sm);
  font-size: 11px;
  margin-right: 4px;
  font-family: "SF Mono", ui-monospace, monospace;
  letter-spacing: -0.01em;
}

/* ─── 复现书目区 ─────────────────────────────────────────────────── */
.occurrences-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 14px;
}
.occurrences h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}
.occurrences h3 .muted {
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
}
.book-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.book-sort select {
  padding: 4px 22px 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 12px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>") no-repeat right 7px center;
  color: var(--text-soft);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-fast);
  font-family: inherit;
}
.book-sort select:hover { border-color: var(--border-strong); }
.book-sort select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ─── 书卡 ───────────────────────────────────────────────────────── */
.book-card {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  padding: 16px 20px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t), transform var(--t);
}
.book-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* 按级别着色左边框 */
.book-card[data-level="L1"] { border-left: 3px solid var(--l1); }
.book-card[data-level="L2"] { border-left: 3px solid var(--l2); }
.book-card[data-level="L3"] { border-left: 3px solid var(--l3); }
.book-card[data-level="L4"] { border-left: 3px solid var(--l4); }
.book-card[data-level="L5"] { border-left: 3px solid var(--l5); }
.book-card[data-level="L6"] { border-left: 3px solid var(--l6); }

.book-card .book-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.book-card .book-header .course {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 12px;
}
.book-card .book-header .book-title {
  font-weight: 600;
  color: var(--text);
}

.book-card .book-count {
  margin-left: auto;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  padding: 2px 10px;
  background: var(--accent-soft);
  border-radius: 999px;
  white-space: nowrap;
}

.role-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.role-badge.special { background: var(--special); }
.role-badge.common { background: var(--common); }

/* A.2: 公共词分层徽章 */
.tier-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tier-badge.L1_cross    { background: #6c8f4a; }  /* 绿系：L1跨级复现 */
.tier-badge.L2_cross    { background: #4a6c8f; }  /* 蓝系：L2跨书复现 */
.tier-badge.bank_new    { background: #8f4a6c; }  /* 紫红：词库命中New */
.tier-badge.bank_review { background: #8f6c4a; }  /* 棕系：词库复现Review */
.tier-badge.dolch_func  { background: #4a4a4a; }  /* 深灰：高频功能词 */

.trans {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* ─── 句子（blockquote 风格） ───────────────────────────────────── */
.sentence {
  margin: 8px 0 0;
  padding: 10px 14px;
  background: rgba(238, 242, 255, 0.35);
  border-left: 3px solid rgba(99, 102, 241, 0.25);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.75;
  font-style: italic;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sent-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sent-speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
  width: 22px; height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: rgba(79, 70, 229, 0.85);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sent-speak-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(99, 102, 241, 0.25);
}
.sent-speak-btn:active { transform: scale(0.92); }
.sentence + .sentence { margin-top: 6px; }

.sentence .hl {
  background: var(--hl-bg);
  color: var(--hl-text);
  font-weight: 600;
  padding: 1px 4px;
  border-radius: var(--r-sm);
  box-decoration-break: clone;
}

.sentence .clickable {
  cursor: pointer;
  text-decoration: underline dotted transparent;
  text-underline-offset: 2px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.sentence .clickable:hover {
  color: var(--hl-strong);
  text-decoration-color: var(--hl-strong);
}

/* ─── 短语区 ─────────────────────────────────────────────────────── */
.phrase-list {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--r-md);
  font-size: 12px;
  line-height: 1.6;
}
.phrase-list > div + div { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #fde68a; }
.phrase-list .phrase-type {
  display: inline-block;
  font-size: 10px;
  background: var(--hl-strong);
  color: #fff;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  margin-right: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}
.phrase-list .sentence {
  border-left: none;
  padding-left: 6px;
  margin-top: 4px;
}

/* ─── 错误态 ─────────────────────────────────────────────────────── */
.error {
  padding: 20px 24px;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  margin: 20px;
  font-size: 13px;
  line-height: 1.7;
}
.error code {
  padding: 1px 6px;
  background: #fee2e2;
  border-radius: var(--r-sm);
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 12px;
}

/* ─── 辅助 ───────────────────────────────────────────────────────── */
.muted { color: var(--muted); }

/* ─── Phase A · 新增基础样式（桌面端默认） ──────────────────────── */
.mobile-only { display: none !important; }

.topbar-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.topbar-row #search { flex: 1 1 auto; min-width: 0; }

/* 桌面端隐藏手机专属元素 */
.filters-pane .sheet-header,
.filters-pane .sheet-done { display: none; }

/* sheet-body：桌面端透明容器（子元素直接参与父 flex） */
.sheet-body { display: contents; }

/* 分层筛选行：独立一行（flex-basis:100% 强制换行），label + select + 释义 */
.tier-filter-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  flex-basis: 100%;           /* 在 .filters-pane flex 中独占一行 */
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* 分层释义文本 */
.tier-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
  min-width: 180px;
}
.tier-desc:empty { display: none; }

/* 图标按钮 */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  flex: 0 0 auto;
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--text); }
.icon-btn:active { transform: scale(0.97); }
.icon-btn:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.icon-btn-sm { width: 32px; height: 32px; }

/* 筛选数量徽章 */
.filter-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 10px;
  line-height: 1;
}
.filter-count.hidden { display: none; }

/* 返回按钮 */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 16px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.detail-back:hover { border-color: var(--border-strong); color: var(--text); }
.detail-back:active { transform: scale(0.98); }

/* Bottom sheet 额外内容（桌面端已隐藏 .sheet-header / .sheet-done） */
.sheet-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.sheet-done {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);
}
.sheet-done:hover { background: var(--accent-hover); }
.sheet-done:active { transform: scale(0.99); }

/* Backdrop（仅移动端激活；桌面端 display:none） */
.backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.backdrop.open { opacity: 1; pointer-events: auto; }

/* 防止 body 滚动（抽屉打开时） */
body.no-scroll { overflow: hidden; }

/* ─── Phase A · 手机端（≤768px） ────────────────────────────────── */
@media (max-width: 900px) {
  .mobile-only { display: inline-flex !important; }
  button.mobile-only.sheet-done { display: block !important; }
  div.mobile-only.sheet-header { display: flex !important; }

  /* 顶栏：紧凑，恢复列方向 */
  .topbar { padding: 12px 16px 10px; flex-direction: column; align-items: stretch; }
  .topbar h1 { font-size: 14px; margin-bottom: 8px; }
  .topbar-row { gap: 8px; margin-bottom: 0; }
  .topbar-row #search { padding: 10px 12px; font-size: 16px; }  /* 避免 iOS 自动缩放（阈值 16px）*/

  /* stats 简化：允许多行，避免尾部被截断看不全 */
  .stats {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
  }

  /* filters-pane → 底部抽屉 */
  .filters-pane {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 20px 0;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
    transform: translateY(calc(100% + 20px));
    transition: transform 260ms cubic-bezier(0.32, 0.72, 0.20, 1);
    max-height: 85vh;
  }

  /* sheet-body：抽屉内可滚动内容区 */
  .sheet-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 8px;
  }

  /* 完成按钮：固定在底部，不随内容滚动 */
  #filter-done {
    flex-shrink: 0;
    margin: 0 -20px;
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    border-top: 1px solid var(--border);
    font-size: 16px;
  }
  .filters-pane::before {
    content: "";
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: var(--border-strong);
    border-radius: 2px;
  }
  .filters-pane.open { transform: translateY(0); }

  .sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
  }

  /* 抽屉里的筛选按钮放大 */
  .level-filter {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    font-size: 13px;
  }
  .level-group {
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px 6px;
  }
  .level-toggle {
    min-width: 32px;
    padding: 6px 12px;
    font-size: 12px;
  }
  .sub-level-pill {
    padding: 7px 14px;
    font-size: 13px;
    min-height: 36px;
  }
  .tier-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .tier-filter-wrap {
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
  }
  .tier-filter-wrap label { font-size: 13px; }
  #tier-filter {
    flex: 1 1 auto;
    padding: 10px 12px;
    font-size: 14px;
    min-height: 40px;
  }
  .tier-desc {
    font-size: 12px;
    padding: 8px 10px;
    background: var(--surface-soft);
    border-radius: var(--r-sm);
    min-width: 0;
  }

  /* Backdrop 仅手机端启用 */
  .backdrop { display: block; }

  /* 主布局：改为堆叠（列表全宽，详情变滑入式全屏） */
  /* z-index:auto 移除 .layout 产生的 stacking context，让 .detail 的 z-index:500
     直接在 root 上与 .topbar(z-index:10) 比较，确保详情全屏覆盖顶栏。 */
  .layout { flex-direction: column; z-index: auto; }
  .word-list-pane {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* 详情：全屏滑入 */
  .detail {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--bg);
    padding: 16px 18px 40px;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0.20, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.detail-open .detail { transform: translateX(0); }
  body.detail-open .word-list-pane { visibility: hidden; }  /* 防止背后内容 tab 可达 */

  /* 详情：移动端字号/间距调整 */
  .detail h2 { font-size: 32px; letter-spacing: -0.03em; }
  .summary-card { padding: 12px 14px; }
  .summary-card .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .summary-card .metric {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .book-card { padding: 14px 14px; }
  .book-card .book-header {
    gap: 6px;
    flex-wrap: wrap;
  }
  .book-card .sentence {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.55;
  }

  /* 词列表：行更高，便于触控 */
  .word-row {
    padding: 12px 14px;
    min-height: 48px;
  }
  .word-row .surf { font-size: 15px; }

  /* 列表 header */
  .list-header { padding: 10px 14px; }
  .list-header select { min-height: 36px; }

  /* toggle 拉大 */
  .list-header .toggle { min-height: 36px; padding: 4px 8px; }

  /* 详情：全宽 + 防止横向溢出 */
  .detail { overflow-x: hidden; }
  .detail-content { width: 100%; box-sizing: border-box; }

  /* ?-提示气泡：手机端改为向上弹出，避免右侧溢出屏幕 */
  .hint::before {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: min(240px, calc(100vw - 32px));
  }
  .hint::after {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border-right-color: transparent;
    border-top-color: #1e293b;
  }
}

/* ─── 单词对比 ───────────────────────────────────────────────────── */

/* 详情页标题行：标题 + "+对比" 按钮 */
.detail-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.detail-title-row h2 { margin: 0; }

.detail-actions { flex-shrink: 0; }

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  font-family: inherit;
}
.action-btn:hover {
  background: #e0e7ff;
  border-color: var(--accent);
}
.action-btn:active { transform: scale(0.98); }

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
  margin-left: 8px;
  font-family: inherit;
  text-decoration: underline;
}
.link-btn:hover { color: var(--accent-hover); }

/* 对比拾取提示横幅 */
.compare-picker-banner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text);
  width: 100%;
  margin-top: 8px;
}
.compare-picker-banner b { color: var(--accent); }

/* 词列表：对比中的两个词高亮（A 蓝、B 粉） */
.word-row.compare-a {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.word-row.compare-a .surf { color: var(--accent); font-weight: 600; }
.word-row.compare-a::before {
  content: "A";
  display: inline-block;
  margin-right: 6px;
  padding: 1px 5px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  vertical-align: middle;
}
.word-row.compare-b {
  background: #fce7f3;
  border-left-color: var(--special);
}
.word-row.compare-b .surf { color: var(--special); font-weight: 600; }
.word-row.compare-b::before {
  content: "B";
  display: inline-block;
  margin-right: 6px;
  padding: 1px 5px;
  background: var(--special);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  vertical-align: middle;
}

/* 对比视图主容器 */
.compare-view { display: block; }

.compare-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.compare-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.compare-header h2 .trans {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 18px;
  color: var(--accent);
  font-weight: 500;
  margin: 0 4px;
}

/* 并排两张对比卡 */
.compare-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 28px;
}
.compare-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.compare-card.compare-a { border-top: 3px solid var(--accent); }
.compare-card.compare-b { border-top: 3px solid var(--special); }

.compare-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.compare-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}
.compare-card.compare-a .compare-tag { background: var(--accent); }
.compare-card.compare-b .compare-tag { background: var(--special); }
.compare-word {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-light);
  letter-spacing: 0.1em;
  padding: 0 4px;
}

.compare-metrics .cm-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}
.compare-metrics .cm-row + .cm-row {
  border-top: 1px solid var(--surface-soft);
}
.compare-metrics .cm-label {
  flex: 0 0 70px;
  color: var(--muted);
  font-size: 12px;
}
.compare-metrics .cm-value {
  flex: 1 1 auto;
  color: var(--text-soft);
  word-break: break-word;
}
.compare-metrics .cm-value strong {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 对比卡片下面的章节标题 */
.compare-section {
  margin-bottom: 24px;
}
.compare-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.compare-section h3 .muted {
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
  font-size: 12px;
}

/* 共同书目卡：A/B 各自次数徽章 */
.common-book-card {
  border-left: 3px solid #14b8a6;  /* 青绿色：表示交集 */
}
.common-book-card .compare-counts {
  display: inline-flex;
  gap: 6px;
  background: none;
  padding: 0;
}
.compare-counts .cnt-a {
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.compare-counts .cnt-b {
  padding: 2px 8px;
  background: #fce7f3;
  color: var(--special);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.common-book-card .sentence.side-a {
  border-left-color: var(--accent);
}
.common-book-card .sentence.side-b {
  border-left-color: var(--special);
}

.muted-empty {
  padding: 16px 18px;
  background: var(--surface-soft);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: 13px;
}
.muted-empty b { color: var(--text); }

/* 仅 A / 仅 B 折叠列表 */
.compare-only-fold {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0;
  margin-bottom: 8px;
  overflow: hidden;
}
.compare-only-fold > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-soft);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.compare-only-fold > summary::-webkit-details-marker { display: none; }
.compare-only-fold > summary::before {
  content: "▶";
  display: inline-block;
  font-size: 9px;
  color: var(--muted);
  transition: transform var(--t-fast);
}
.compare-only-fold[open] > summary::before { transform: rotate(90deg); }
.compare-only-fold > summary:hover { background: var(--surface-soft); }
.compare-only-fold > summary b {
  color: var(--text);
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 13px;
}
.compare-only-fold > summary .muted {
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
.only-list {
  border-top: 1px solid var(--border);
  max-height: 280px;
  overflow-y: auto;
}
.only-book-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--surface-soft);
}
.only-book-row:last-child { border-bottom: none; }
.only-book-row .book-title {
  flex: 1;
  color: var(--text);
  font-weight: 500;
}
.only-book-row .course {
  color: var(--muted);
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px;
}
.only-book-row .book-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* 对比视图：手机端响应式 */
@media (max-width: 900px) {
  .detail-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .compare-cards {
    grid-template-columns: 1fr;
  }
  .compare-vs {
    padding: 4px 0;
    font-size: 12px;
  }
  .compare-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .compare-header h2 { font-size: 18px; }
  .compare-header h2 .trans { font-size: 15px; }
  .compare-card { padding: 14px 14px; }
  .compare-metrics .cm-label { flex: 0 0 60px; font-size: 11px; }
  .compare-metrics .cm-row { font-size: 13px; }
  .common-book-card .compare-counts {
    margin-left: auto;
  }
}

/* 防止 iOS 表单缩放（全局 search 输入最小 16px；上面移动端已覆盖） */
@media (hover: none) and (pointer: coarse) {
  .word-row { cursor: default; }  /* 移动端不显示 pointer cursor */
}