/* ============================================================
   考研阅读 · 纸面印刷极简（Print Minimal）
   黑白灰 + 单一墨色点缀 · 发丝线分隔 · 排版优先 · 克制动效
   ============================================================ */

:root {
  /* --- Typography --- */
  --font-display: "Libre Bodoni", Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --reading-size: 17px;

  /* --- Spacing rhythm (4/8 grid) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* --- Radius（收窄：仅弹层与输入控件保留小圆角） --- */
  --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-pill: 999px;

  /* --- Motion tokens --- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms; --dur-med: 220ms;

  /* --- 纸面浅色 --- */
  --bg: #FCFBF8;              /* 纸白（微暖） */
  --fg: #191919;              /* 墨黑 */
  --fg-muted: #55524B;
  --fg-faint: #8B877E;
  --card-bg: #FCFBF8;         /* 与底色同纸，去卡片感 */
  --surface-hi: #F3F1EA;
  --surface-highest: #E9E6DC;
  --border: #E3E0D5;          /* 发丝线 */
  --border-strong: #C9C5B8;
  --ink: #2C4A63;             /* 唯一墨色点缀（黛青） */
  --action-bg: #191919;
  --action-fg: #FCFBF8;
  --accent: var(--ink);
  --accent-soft: rgba(44, 74, 99, 0.08);
  --on-accent: #FCFBF8;
  --star: #A8823C;            /* 降饱和金 */
  --destructive: #96473A;     /* 降饱和赭红 */
  --destructive-soft: rgba(150, 71, 58, 0.08);
  --scrim: rgba(25, 25, 25, 0.32);
  --shadow-float: 0 16px 40px rgba(25, 25, 25, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111110;              /* 近黑（微暖） */
    --fg: #EDEAE3;              /* 暖白 */
    --fg-muted: #A5A196;
    --fg-faint: #6E6B62;
    --card-bg: #111110;
    --surface-hi: #1B1B19;
    --surface-highest: #262623;
    --border: #282723;
    --border-strong: #3D3B34;
    --ink: #9FB8CC;             /* 暗下提亮的黛青 */
    --action-bg: #EDEAE3;
    --action-fg: #111110;
    --accent-soft: rgba(159, 184, 204, 0.10);
    --on-accent: #111110;
    --star: #C7A45E;
    --destructive: #C97B6C;
    --destructive-soft: rgba(201, 123, 108, 0.10);
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

/* 手动指定深色（覆盖系统浅色） */
:root[data-theme="dark"] {
  --bg: #111110;
  --fg: #EDEAE3;
  --fg-muted: #A5A196;
  --fg-faint: #6E6B62;
  --card-bg: #111110;
  --surface-hi: #1B1B19;
  --surface-highest: #262623;
  --border: #282723;
  --border-strong: #3D3B34;
  --ink: #9FB8CC;
  --action-bg: #EDEAE3;
  --action-fg: #111110;
  --accent-soft: rgba(159, 184, 204, 0.10);
  --on-accent: #111110;
  --star: #C7A45E;
  --destructive: #C97B6C;
  --destructive-soft: rgba(201, 123, 108, 0.10);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* ============ Base ============ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--fg);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button {
  font: inherit; color: inherit; border: none; background: none;
  cursor: pointer; padding: 0;
}
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--action-bg); color: var(--action-fg);
  padding: var(--s-2) var(--s-4);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 14px; font-weight: 600;
  z-index: 200;
}
.skip-link:focus { left: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============ Animations（仅保留功能性动效） ============ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(24%); opacity: 0.7; } to { transform: none; opacity: 1; } }
@keyframes popIn { from { transform: scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* 入场瀑布已移除：view-anim / card-anim 保留类名但无动效 */
.view-anim, .card-anim { animation: none; }

/* ============ Layout shell ============ */
#app { min-height: 100vh; min-height: 100dvh; }
.view {
  padding: 0 var(--s-4) calc(88px + env(safe-area-inset-bottom));
  max-width: 760px;
  margin: 0 auto;
}

/* ============ Top navigation (desktop) ============ */
.topnav {
  display: none;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  max-width: 1120px; margin: 0 auto;
  padding: 0 var(--s-5);
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.brand:hover { opacity: 0.65; }
.brand-en {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-faint);
}
.topnav-links { display: flex; align-items: center; gap: var(--s-4); }
.theme-btn { margin-left: var(--s-3); color: var(--fg-muted); }
.theme-btn:hover { color: var(--fg); }
.topnav-links a {
  position: relative;
  padding: var(--s-2) 2px;
  font-size: 14px; font-weight: 500;
  color: var(--fg-faint);
  transition: color var(--dur-fast) var(--ease-out);
}
.topnav-links a:hover { color: var(--fg); }
.topnav-links a.active { color: var(--fg); font-weight: 600; }
.topnav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--ink);
}

/* ============ Bottom navigation (mobile) ============ */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom));
}
.navitem {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 76px; min-height: 44px;
  padding: var(--s-1) var(--s-3);
  color: var(--fg-faint);
  transition: color var(--dur-fast) var(--ease-out);
}
.navitem:active { color: var(--fg-muted); }
.navitem .navicon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 30px;
}
.navitem span {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em;
}
.navitem.active { color: var(--fg); }
.navitem.active::before {
  content: ''; position: absolute; top: -9px; left: 50%;
  width: 18px; height: 2px; margin-left: -9px;
  background: var(--ink);
}

/* ============ Generic controls ============ */
.svg-icon { width: 22px; height: 22px; fill: currentColor; flex: none; }
.svg-icon.sm { width: 18px; height: 18px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border-radius: var(--r-md);
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { color: var(--ink); }
.icon-btn:active { color: var(--fg-muted); }
.icon-btn svg { pointer-events: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5);
  border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-filled { background: var(--action-bg); color: var(--action-fg); }
.btn-filled:hover { opacity: 0.88; }
.btn-tonal {
  background: transparent; color: var(--fg);
  border: 1px solid var(--border-strong);
}
.btn-tonal:hover { border-color: var(--fg); }
.btn-text { color: var(--fg-muted); font-weight: 600; padding: 0 var(--s-3); min-height: 44px; letter-spacing: 0.02em; }
.btn-text:hover { color: var(--fg); }
.btn-accent { background: var(--ink); color: var(--on-accent); }

/* ============ Library ============ */
.lib-head { padding: var(--s-7) var(--s-1) var(--s-2); }
.lib-head .masthead {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-3);
}
.lib-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 36px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.15;
}
.lib-head .sub {
  margin-top: var(--s-2);
  font-size: 13px; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.searchbar {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-3);
  padding: 0 var(--s-1);
  height: 48px;
  background: transparent;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.searchbar:focus-within { border-color: var(--fg); }
.searchbar svg { flex: none; color: var(--fg-faint); width: 20px; height: 20px; }
.searchbar input {
  flex: 1; height: 100%; min-width: 0;
  border: none; background: none; outline: none;
  font-size: 15px; color: var(--fg);
}
.searchbar input::placeholder { color: var(--fg-faint); }

/* filter panel（去盒子，仅行分隔） */
.filter-panel {
  margin: 0 0 var(--s-2);
  padding: var(--s-1) var(--s-1);
}
.fp-row {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-2) 0;
}
.fp-row + .fp-row { border-top: 1px solid var(--border); }
.fp-label {
  flex: none; width: 44px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  padding-top: 7px;
}
.fp-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 2px var(--s-3); min-width: 0; }
.fp-stats {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-2); padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.fp-clear {
  font-size: 12px; font-weight: 600; color: var(--ink);
  letter-spacing: 0.04em;
  min-height: 28px; padding: 0 var(--s-1);
}
.fp-clear:hover { text-decoration: underline; text-underline-offset: 3px; }

/* chips：文字按钮，选中为墨色填充（高对比反馈） */
.chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  min-height: 32px; padding: 0 var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--fg); }
.chip.on {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  font-weight: 700;
}
.chip.on svg { color: var(--bg); }

/* article list：去盒子，发丝线分隔 */
.article-list {
  display: flex; flex-direction: column;
  padding-bottom: var(--s-5);
  border-top: 1px solid var(--border-strong);
}
.article-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-2);
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: var(--s-4) var(--s-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.article-card:hover { background: var(--surface-hi); }

.ac-top { display: flex; align-items: baseline; gap: var(--s-3); min-height: 20px; flex-wrap: wrap; }
/* 来源与话题统一为小型大写文字（去彩色徽章） */
.src-badge {
  display: inline;
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
  background: none;
}
.src-eco, .src-sa, .src-nat, .src-gua { background: none; color: var(--fg-muted); }
.badge {
  display: inline;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-faint);
  background: none;
}

/* 难度：细横线刻度 */
.diff-dots { display: inline-flex; gap: 3px; margin-left: 2px; align-items: center; }
.diff-dots i {
  width: 10px; height: 2px; border-radius: 0;
  background: var(--surface-highest);
  display: block;
}
.diff-dots i.f { background: var(--fg); }

.ac-fav { margin-left: auto; color: var(--fg-faint); align-self: flex-start; }
.ac-fav:hover { color: var(--star); background: transparent; }
.fav-active { color: var(--star) !important; }

.ac-title {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700;
  line-height: 1.32; letter-spacing: -0.005em;
  color: var(--fg);
}
.ac-meta {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: 12px; color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.empty-state {
  margin: var(--s-8) var(--s-5);
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px; line-height: 1.9;
}

/* ============ Reader ============ */
.reader-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 2px;
  margin: 0 calc(-1 * var(--s-4));
  padding: var(--s-1) var(--s-2);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.reader-topbar .title {
  flex: 1; min-width: 0;
  font-size: 14.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 var(--s-1);
}

.rprog {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; overflow: hidden;
}
.rprog-fill {
  height: 100%; width: 0%;
  background: var(--ink);
  transition: width 120ms linear;
}

.reader-head { padding: var(--s-6) 0 var(--s-1); max-width: 780px; margin: 0 auto; }
.reader-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700;
  line-height: 1.22; letter-spacing: -0.01em;
}
.reader-meta {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-3);
  font-size: 12px; color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.reader-actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }

.restore-hint {
  max-width: 780px; margin: var(--s-3) auto 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: 2px solid var(--ink);
  font-size: 13px; color: var(--fg-muted);
  display: flex; align-items: center; gap: var(--s-2);
}
.restore-hint button {
  color: var(--ink); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: none; cursor: pointer;
  min-height: 32px; padding: 0 var(--s-1);
}

.paras { padding: var(--s-4) 0 var(--s-7); max-width: 780px; margin: 0 auto; }
.para {
  padding: var(--s-4) 0 var(--s-3);
  border-bottom: 1px solid var(--border);
}
.para:last-child { border-bottom: none; }
.para.speaking { border-left: 2px solid var(--ink); padding-left: var(--s-4); margin-left: -2px; }
.para .en {
  font-family: var(--font-display);
  font-size: var(--reading-size);
  line-height: 1.9; letter-spacing: 0.005em;
  color: var(--fg);
  max-width: 70ch;
  overflow-wrap: anywhere;
}
.para .en .w {
  padding: 0 1px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.para .en .w:hover {
  color: var(--ink);
  text-decoration: underline dotted var(--ink);
  text-underline-offset: 4px;
}
.para .en .w:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}
.para .zh {
  margin-top: var(--s-3);
  font-size: calc(var(--reading-size) - 2px);
  line-height: 1.8;
  color: var(--fg-muted);
  border-left: 2px solid var(--border-strong);
  padding-left: var(--s-3);
}
.para-ctrl { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-3); }

/* 段控按钮：细线直角 */
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: transparent;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pill-btn:hover { color: var(--fg); border-color: var(--fg); }
.pill-btn.on {
  background: var(--action-bg);
  border-color: var(--action-bg);
  color: var(--action-fg);
}
.pill-btn svg { width: 15px; height: 15px; fill: currentColor; }

/* ============ Player bar ============ */
.playerbar {
  position: fixed; z-index: 30;
  left: 16px; right: 16px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  max-width: 688px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5);
  border-radius: var(--r-md);
  background: var(--action-bg);
  color: var(--action-fg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-float);
  animation: sheetUp var(--dur-med) var(--ease-out) both;
}
.playerbar .pb-status {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.playerbar .pb-btn { min-width: 44px; min-height: 44px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; }
.playerbar .pb-btn.main { background: var(--action-fg); color: var(--action-bg); }
.playerbar .pb-btn.sub { color: var(--action-fg); opacity: 0.8; }
.playerbar .pb-btn.sub:hover { opacity: 1; }

/* ============ Sheet / Dialog / Toast ============ */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--scrim);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn var(--dur-fast) var(--ease-out);
}
.sheet {
  width: 100%; max-width: 760px;
  max-height: 82dvh; overflow-y: auto;
  background: var(--bg);
  border-top: 1px solid var(--border-strong);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s-3) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-float);
  animation: sheetUp 260ms var(--ease-out);
}
.sheet-grab {
  width: 32px; height: 3px; border-radius: 2px;
  background: var(--border-strong);
  margin: 0 auto var(--s-4);
}
.sheet-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.sheet h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg); word-break: break-word;
}
.sheet .phonetic {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 15px; color: var(--fg-muted);
  margin: var(--s-1) 0 var(--s-3);
}
.sheet .phonetic .icon-btn { min-width: 36px; min-height: 36px; }
.sheet .dict-src {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint);
  margin-left: auto;
  align-self: center;
}
.def-item {
  display: flex; gap: var(--s-3); align-items: baseline;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--border);
  font-size: 15.5px; line-height: 1.7; color: var(--fg);
}
.def-item:first-of-type { border-top: none; }
.pos-tag {
  flex: none;
  font-size: 11.5px; font-weight: 700;
  font-style: italic;
  font-family: var(--font-display);
  color: var(--ink);
  background: none;
  border-radius: 0;
  padding: 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.def-item .def-text { flex: 1; min-width: 0; }
.def-item .def-example {
  display: block; margin-top: 2px;
  font-size: 13px; color: var(--fg-faint); font-style: italic;
}
.def-item .def-en {
  display: block; margin-top: 3px;
  font-size: 13px; color: var(--fg-faint); font-style: italic;
}
.def-empty { color: var(--fg-muted); padding: var(--s-2) 0; }
.def-loading {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--fg-muted); font-size: 14px;
  padding: var(--s-4) 0;
}
.def-loading .spinner {
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--border-strong);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.sheet-actions { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-5); flex-wrap: wrap; }

.dialog-wrap {
  position: fixed; inset: 0; z-index: 70;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
  animation: fadeIn var(--dur-fast) var(--ease-out);
}
.dialog {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s-5);
  max-width: 340px; width: 100%;
  box-shadow: var(--shadow-float);
  animation: popIn 200ms var(--ease-out);
}
.dialog h3 { margin: 0 0 var(--s-2); font-size: 18px; font-weight: 700; font-family: var(--font-display); }
.dialog p { margin: 0 0 var(--s-5); font-size: 14px; line-height: 1.65; color: var(--fg-muted); }
.dialog .row { display: flex; justify-content: flex-end; gap: var(--s-2); }

.toast {
  position: fixed; z-index: 90;
  left: 50%; transform: translateX(-50%) translateY(16px);
  bottom: calc(96px + env(safe-area-inset-bottom));
  background: var(--fg);
  color: var(--bg);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ Wordbook ============ */
.wb-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-6) 0 var(--s-3);
}
.wb-head h1 {
  margin: 0; flex: 1;
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -0.01em;
}
.wb-list {
  padding-bottom: var(--s-5);
  display: grid; gap: 0;
  border-top: 1px solid var(--border-strong);
}
.wb-card {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: var(--s-4) var(--s-1);
}
.wb-main { flex: 1; min-width: 0; }
.wb-word {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  color: var(--fg); word-break: break-word;
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
}
.wb-word small {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 400;
  color: var(--fg-muted);
}
.wb-def {
  margin-top: var(--s-2);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.wb-def-line {
  display: flex; gap: var(--s-2); align-items: baseline;
  font-size: 13.5px; line-height: 1.7;
  color: var(--fg-muted);
}
.wb-def-line .pos-tag { font-size: 11px; padding: 0; }
.wb-actions { display: flex; flex-direction: column; }

/* ============ Settings ============ */
.set-head { padding: var(--s-6) 0 var(--s-3); }
.set-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -0.01em;
}
.set-body {
  padding-bottom: var(--s-5);
  display: flex; flex-direction: column;
}
.set-card {
  background: transparent;
  border-top: 1px solid var(--border-strong);
  padding: var(--s-5) var(--s-1);
}
.set-card h2 {
  margin: 0 0 var(--s-1);
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-faint);
}
.set-card .hint {
  font-size: 12.5px; color: var(--fg-faint);
  line-height: 1.65; margin-bottom: var(--s-3);
}
.set-card .hint.warn { color: var(--destructive); }
.set-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; min-height: 44px;
}
.set-row label {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 500;
}
.set-row .value {
  font-size: 13px; color: var(--fg-muted);
  min-width: 44px; text-align: right;
  font-variant-numeric: tabular-nums;
}
input[type="range"] {
  flex: 1.6; min-width: 80px;
  accent-color: var(--ink);
  height: 28px;
}
select.field, input.field[type="text"], input.field[type="password"] {
  width: 100%;
  padding: var(--s-3) 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  font-size: 14px;
  margin-top: var(--s-3);
  outline: none; min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
select.field:focus, input.field:focus { border-color: var(--fg); }
select.field { appearance: none; }

.seg {
  display: flex; gap: var(--s-4);
  margin-top: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.seg button {
  flex: none; min-height: 42px; padding: 0 2px;
  font-size: 13.5px; font-weight: 500;
  color: var(--fg-faint);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.seg button:hover { color: var(--fg-muted); }
.seg button.on {
  color: var(--fg); font-weight: 700;
}
.seg button.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--ink);
}
.set-foot {
  text-align: center;
  font-size: 11.5px; color: var(--fg-faint);
  padding: var(--s-4) 0 var(--s-5);
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

/* ============ Responsive: tablet / desktop ============ */
@media (min-width: 768px) {
  .topnav { display: block; }
  .bottomnav { display: none; }
  .view {
    max-width: 1120px;
    padding-left: var(--s-5);
    padding-right: var(--s-5);
    padding-bottom: var(--s-8);
  }
  .lib-head { padding-top: var(--s-7); }
  .lib-head h1 { font-size: 42px; }
  .lib-content { max-width: none; }
  /* 桌面网格：发丝线版式（上下左右细线分格） */
  .article-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .article-card {
    border-right: 1px solid var(--border);
    padding: var(--s-5) var(--s-5);
  }
  .article-card:nth-child(2n) { border-right: none; }
  .ac-title { font-size: 22px; }
  .reader-topbar { margin: 0 calc(-1 * var(--s-5)); padding: var(--s-1) var(--s-3); }
  .reader-head h2 { font-size: 40px; }
  .playerbar { bottom: var(--s-5); }
  .toast { bottom: var(--s-8); }
  .sheet {
    align-self: center;
    max-width: 560px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    margin-bottom: 10vh;
    animation: popIn 220ms var(--ease-out);
  }
  .overlay { align-items: center; }
  .sheet-grab { display: none; }
  .wb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .wb-card { border-right: 1px solid var(--border); padding: var(--s-4) var(--s-4); }
  .wb-card:nth-child(2n) { border-right: none; }
  .set-body { max-width: 760px; }
}
@media (min-width: 1200px) {
  .article-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-card:nth-child(2n) { border-right: 1px solid var(--border); }
  .article-card:nth-child(3n) { border-right: none; }
  .wb-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wb-card:nth-child(2n) { border-right: 1px solid var(--border); }
  .wb-card:nth-child(3n) { border-right: none; }
}