/* =========================================================================
   BookPress Design System v2.0
   ─────────────────────────────────────────────────────────────────────────
   定位：AI 原生 · 编辑出版物 · 国际化 · 单琥珀 + ink + 中性
   对标：Stripe Docs × NYT Long-form × Linear Changelog
   原则：Ink-first · Singular accent · Cartographic motif · Latin+CJK equal · Editorial sharpness
   ========================================================================= */

/* ─── 1. RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
hr { border: none; border-top: 1px solid var(--line); margin: var(--s-4) 0; }
button { background: none; border: none; padding: 0; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* ─── 2. TOKENS ────────────────────────────────────────────────────────── */
:root {
  /* ── Ink scale ── */
  --ink:         #0B0D10;
  --ink-soft:    #2C3036;
  --ink-mute:    #707682;
  --ink-faint:   #A1A6B0;

  /* ── Surface ── */
  --bg:          #FFFFFF;
  --paper:       #FBFBF8;
  --paper-2:     #F2F2EE;

  /* ── Lines ── */
  --line:        #E5E7EB;
  --line-soft:   #F0F1F4;

  /* ── Accent (single source of truth) ── */
  --accent:      #D97706;
  --accent-hover:#B45309;
  --accent-soft: #FEF3E8;
  --accent-line: #FCD9A8;

  /* ── Data-viz (限定使用) ── */
  --data-blue:   #2563EB;
  --data-green:  #059669;
  --data-red:    #DC2626;

  /* ── Semantic aliases ── */
  --success:     var(--data-green);
  --warning:     var(--accent);
  --error:       var(--data-red);

  /* ── Typography ── */
  --serif: 'Source Serif 4', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', 'SF Mono', 'Roboto Mono', monospace;

  /* Type scale (1.25 ratio) */
  --fs-display: 56px;  --lh-display: 1.08;
  --fs-h1:      36px;  --lh-h1:      1.15;
  --fs-h2:      28px;  --lh-h2:      1.25;
  --fs-h3:      21px;  --lh-h3:      1.35;
  --fs-body:    17px;  --lh-body:    1.85;
  --fs-ui:      14px;  --lh-ui:      1.5;
  --fs-sm:      13px;  --lh-sm:      1.55;
  --fs-xs:      11px;  --lh-xs:      1.4;

  --ls-tight:    -0.015em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-caps:      0.18em;     /* mono kicker */
  --ls-caps-wide: 0.28em;     /* hero kicker */

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

  /* ── Radius ── */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 8px;
  --r-pill: 9999px;

  /* ── Borders ── */
  --bw-hair: 0.5px;
  --bw-thin: 1px;
  --bw-mark: 2px;

  /* ── Shadows (用得很少) ── */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(11, 13, 16, 0.04);
  --sh-2: 0 4px 12px rgba(11, 13, 16, 0.06);

  /* ── Motion ── */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 400ms;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --w-reading: 720px;        /* 阅读列宽 */
  --w-container: 1200px;     /* 主容器 */
  --w-narrow: 880px;         /* 中等容器（form / drawer 等） */
}

/* ─── 3. BASE TYPOGRAPHY ──────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--ink-soft);
  background: var(--bg);
  font-feature-settings: 'cv11', 'ss01';  /* Inter 字符变体 */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

p { margin: 0 0 var(--s-3); }

a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--accent-hover); }

strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }

code, kbd {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: var(--r-1);
}

/* 选中色 */
::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

/* ─── 4. LAYOUT PRIMITIVES ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 0 var(--s-4);
}
.container-narrow { max-width: var(--w-narrow); }
.container-reading { max-width: var(--w-reading); }

/* Stack — vertical flex with gap */
.stack { display: flex; flex-direction: column; }
.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }

/* ─── 5. KICKER（替代 emoji 章节标识）────────────────────────────────── */
.kicker {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent-hover);
  font-weight: 500;
}
.kicker-wide {
  font-size: 11px;
  letter-spacing: var(--ls-caps-wide);
}
.kicker-mute { color: var(--ink-mute); }
.kicker::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 6px;
  opacity: 0.7;
}
.kicker.no-line::before { display: none; }

/* ─── 6. BUTTONS ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 0 var(--s-3);
  height: 40px;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 500;
  border: var(--bw-thin) solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
  text-decoration: none;
}
.btn-sm { height: 32px; font-size: var(--fs-sm); padding: 0 var(--s-2); }
.btn-lg { height: 48px; font-size: 15px; padding: 0 var(--s-4); }

/* Primary ink */
.btn-ink {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-ink:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

/* Secondary outlined */
.btn-outline {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover { border-color: var(--ink); }

/* Tertiary ghost */
.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
}
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); }

/* Accent — 全站极少用，只在主 CTA */
.btn-accent {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn:disabled, .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── 7. INPUTS ───────────────────────────────────────────────────────── */
.input, .textarea, .select {
  display: block;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  height: 40px;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  color: var(--ink);
  background: var(--bg);
  border: var(--bw-thin) solid var(--line);
  border-radius: var(--r-1);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.textarea {
  height: auto;
  min-height: 96px;
  padding: var(--s-3);
  line-height: 1.6;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--ink);
  border-width: var(--bw-thin);
}
.input:focus-visible { border-color: var(--accent); border-width: var(--bw-mark); padding: calc(var(--s-2) - 1px) calc(var(--s-3) - 1px); }
.input.error, .textarea.error { border-color: var(--error); border-width: var(--bw-mark); }

/* ─── 8. CARDS ────────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: var(--bw-thin) solid var(--line);
  border-radius: var(--r-1);
  padding: var(--s-4);
}
.card-bg { background: var(--bg); }
.card-hover {
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  cursor: pointer;
}
.card-hover:hover {
  border-color: var(--ink-mute);
  transform: translateY(-2px);
  box-shadow: var(--sh-1);
}

/* ─── 9. TAGS ─────────────────────────────────────────────────────────── */
/* 主要样式：inline text only — 用 # 前缀 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}
.tag::before { content: '#'; opacity: 0.6; }
.tag.no-hash::before { content: ''; }
.tag-link { color: var(--ink-soft); }
.tag-link:hover { color: var(--accent-hover); }

/* Pill 变体：仅状态用（IN LIBRARY / NOT YET） */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  background: var(--paper-2);
  color: var(--ink-mute);
  border-radius: var(--r-pill);
}
.tag-pill::before { content: ''; }
.tag-pill.accent { background: var(--accent-soft); color: var(--accent-hover); }
.tag-pill.success { background: rgba(5, 150, 105, 0.10); color: var(--data-green); }
.tag-pill.info { background: rgba(37, 99, 235, 0.10); color: var(--data-blue); }

/* Data tag：有色 dot + text（用于 mini-graph / 推荐维度） */
.tag-data {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
}
.tag-data::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
.tag-data.blue::before { background: var(--data-blue); }
.tag-data.green::before { background: var(--data-green); }
.tag-data.red::before { background: var(--data-red); }

/* ─── 10. NAVIGATION ─────────────────────────────────────────────────── */
nav.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--bw-thin) solid var(--line);
}
nav.top > .nav-inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding: var(--s-2) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
}

nav.top .wordmark {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
}
nav.top .wordmark .brand-mark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
nav.top .wordmark .brand-zh {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
nav.top .wordmark .brand-en {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: center;
  padding-left: 2px;
  border-left: 1px solid var(--line);
  margin-left: 2px;
  padding-left: var(--s-2);
}
nav.top .wordmark:hover .brand-mark { color: var(--accent); }

/* 画像入口高亮 */
.user-dropdown-item.portrait-link {
  color: var(--accent-hover);
  font-weight: 500;
}

/* ─── 语言切换器 ─────────────────────────────────── */
.nav-end { display: flex; align-items: center; gap: var(--s-2); }
.lang-switch { position: relative; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-trigger:hover { border-color: var(--ink-mute); color: var(--ink); }
.lang-trigger svg { opacity: 0.7; }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  box-shadow: var(--sh-2);
  padding: var(--s-1);
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  z-index: 60;
}
.lang-menu.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.lang-item {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%;
  padding: 8px var(--s-2);
  background: none; border: none;
  border-radius: var(--r-1);
  cursor: pointer;
  text-align: left;
  font-family: var(--sans); font-size: var(--fs-ui);
  color: var(--ink-soft);
}
.lang-item:hover { background: var(--paper-2); color: var(--ink); }
.lang-item.active { color: var(--accent-hover); font-weight: 500; }
.lang-item .lang-short {
  font-family: var(--mono); font-size: 10px;
  width: 22px; text-align: center;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.lang-item.active .lang-short { color: var(--accent-hover); }
.lang-item .lang-label { flex: 1; }
.lang-item .lang-soon {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.lang-item.soon { opacity: 0.5; cursor: default; }
.lang-item.soon:hover { background: none; color: var(--ink-soft); }

/* ─── 语言专属字体（按需加载，i18n.js 注入 link）──────── */
html[lang="ja"] {
  --serif: 'Noto Serif JP', 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
  --sans:  'Inter', 'Noto Sans JP', -apple-system, sans-serif;
}
html[lang="ko"] {
  --serif: 'Noto Serif KR', 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
  --sans:  'Inter', 'Noto Sans KR', -apple-system, sans-serif;
}
html[lang="ar"] {
  --serif: 'Noto Naskh Arabic', 'Source Serif 4', Georgia, serif;
  --sans:  'Noto Sans Arabic', 'Inter', -apple-system, sans-serif;
  --mono:  'Noto Sans Arabic', 'JetBrains Mono', monospace;
}
/* 阿语正文行高放大一档（阿拉伯字形较高）*/
html[lang="ar"] body { line-height: 1.7; }
html[lang="ar"] .reading { line-height: 2.0; }

/* ─── RTL（阿拉伯语等）─────────────────────────── */
html.rtl { direction: rtl; }
html.rtl .nav-inner,
html.rtl .ft-top,
html.rtl .stats-row,
html.rtl .hero-counter { flex-direction: row-reverse; }
html.rtl nav.top ul { flex-direction: row-reverse; }
html.rtl .lang-menu, html.rtl .user-dropdown { right: auto; left: 0; }
html.rtl .reading h3 { padding-left: 0; padding-right: var(--s-2); }
html.rtl .reading h3::before { left: auto; right: 0; }
html.rtl .oneliner { border-left: none; border-right: var(--bw-mark) solid var(--accent); }
html.rtl .reading blockquote { border-left: none; border-right: var(--bw-mark) solid var(--line); padding-left: 0; padding-right: var(--s-3); }

nav.top ul {
  list-style: none;
  display: flex;
  gap: var(--s-4);
  margin: 0; padding: 0;
}
nav.top ul a {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: var(--bw-mark) solid transparent;
  transition: all var(--t-fast) var(--ease);
}
nav.top ul a:hover { color: var(--ink); }
nav.top ul a.current {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

nav.top .nav-end {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
/* 用户区：语言切换之后的「身份切换 + 头像」必须同一行水平居中（否则头像会掉到下一行）*/
#navUser {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* User avatar */
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-menu { position: relative; }
.user-dropdown {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  min-width: 220px;
  background: var(--bg);
  border: var(--bw-thin) solid var(--line);
  border-radius: var(--r-1);
  box-shadow: var(--sh-2);
  padding: var(--s-1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.user-dropdown.show {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.user-dropdown-head {
  padding: var(--s-2) var(--s-2) var(--s-3);
  border-bottom: var(--bw-thin) solid var(--line);
  margin-bottom: var(--s-1);
}
.user-dropdown-name { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--ink); }
.user-dropdown-email { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.user-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px var(--s-2);
  font-size: var(--fs-ui);
  color: var(--ink-soft);
  border-radius: var(--r-1);
  text-decoration: none;
  background: none; border: none; cursor: pointer;
}
.user-dropdown-item:hover { background: var(--paper-2); color: var(--ink); }
.user-dropdown-sep { height: 1px; background: var(--line); margin: 6px 10px; }

/* ─── 11. FOOTER ─────────────────────────────────────────────────────── */
footer.site {
  margin-top: var(--s-8);
  border-top: var(--bw-thin) solid var(--line);
  padding: var(--s-6) var(--s-4) var(--s-5);
  color: var(--ink-mute);
}
footer.site .ft-inner {
  max-width: var(--w-container);
  margin: 0 auto;
}
footer.site .ft-brand {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
footer.site .ft-brand-en {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 8px;
}
footer.site .ft-mission {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-soft);
  margin: var(--s-2) 0 var(--s-4);
}
footer.site .ft-top {
  display: flex;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
footer.site .ft-brand-block { max-width: 360px; }
footer.site .ft-links {
  display: flex;
  gap: var(--s-7);
  flex-wrap: wrap;
}
footer.site .ft-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
footer.site .ft-col h6 {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 2px;
  font-weight: 500;
}
footer.site .ft-col a {
  font-size: var(--fs-ui);
  color: var(--ink-soft);
  text-decoration: none;
}
footer.site .ft-col a:hover { color: var(--accent-hover); }
footer.site .ft-bottom {
  max-width: var(--w-container);
  margin: var(--s-5) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-top: var(--s-4);
  border-top: var(--bw-hair) solid var(--line);
  font-size: 12px;
  color: var(--ink-mute);
}
footer.site .ft-bottom a { color: var(--ink-soft); text-decoration: none; }
footer.site .ft-bottom a:hover { color: var(--accent-hover); }

/* ─── 12. TOAST ──────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 24px; left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: var(--fs-ui);
  padding: 10px 18px;
  border-radius: var(--r-1);
  box-shadow: var(--sh-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── 13. READING CONTAINER（出版物级阅读体验） ─────────────────────── */
.reading {
  max-width: var(--w-reading);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.reading h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--ink);
  margin: var(--s-7) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: var(--bw-thin) solid var(--line);
  display: flex; flex-direction: column; gap: var(--s-1);
  scroll-margin-top: 80px;
}
.reading h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.reading h2 .ch-num {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--accent-hover);
  font-weight: 600;
}
.reading h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
  margin: var(--s-5) 0 var(--s-3);
  padding-left: var(--s-2);
  position: relative;
  scroll-margin-top: 80px;
}
.reading h3::before {
  content: '';
  position: absolute;
  left: 0; top: 0.32em; bottom: 0.32em;
  width: var(--bw-mark);
  background: var(--accent);
}
.reading p { margin: 0 0 var(--s-3); }
.reading strong { color: var(--ink); font-weight: 600; }
.reading a {
  color: var(--ink);
  border-bottom: var(--bw-thin) solid var(--accent);
}
.reading a:hover { color: var(--accent-hover); }
.reading blockquote {
  margin: var(--s-4) 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-3);
  border-left: var(--bw-mark) solid var(--line);
  font-style: italic;
  color: var(--ink-mute);
}
.reading ul, .reading ol {
  margin: 0 0 var(--s-3);
  padding-left: var(--s-4);
}
.reading li { margin-bottom: 6px; }
.reading li::marker { color: var(--ink-mute); }
.reading hr { margin: var(--s-5) 0; border-top-color: var(--line); }

/* mermaid 容器 */
.reading .mermaid, .mermaid {
  margin: var(--s-4) 0;
  padding: var(--s-4);
  background: var(--paper);
  border: var(--bw-thin) solid var(--line);
  border-radius: var(--r-1);
  text-align: center;
  overflow-x: auto;
  font-family: var(--sans);
}
.reading .mermaid svg, .mermaid svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.reading .mermaid + p > em:only-child,
.mermaid + p > em:only-child {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  text-align: center;
  margin-top: -8px;
  margin-bottom: var(--s-3);
  letter-spacing: 0.02em;
}

/* ─── 14. ONE-LINER（一句话答案）─────────────────────────────────────── */
.oneliner {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  padding: var(--s-3) var(--s-4);
  border-left: var(--bw-mark) solid var(--accent);
  margin: var(--s-3) 0;
  background: transparent;
}

/* ─── 15. DRAWER ─────────────────────────────────────────────────────── */
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg);
  border-left: var(--bw-thin) solid var(--line);
  box-shadow: var(--sh-2);
  padding: var(--s-5) var(--s-4);
  z-index: 100;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease);
}
.drawer.show { transform: translateX(0); }

/* ─── 16. UTILITIES ──────────────────────────────────────────────────── */
.text-mute { color: var(--ink-mute); }
.text-soft { color: var(--ink-soft); }
.text-ink  { color: var(--ink); }
.text-accent { color: var(--accent-hover); }

.font-serif { font-family: var(--serif); }
.font-sans  { font-family: var(--sans); }
.font-mono  { font-family: var(--mono); }

.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-body { font-size: var(--fs-body); }

.center-text { text-align: center; }
.muted { color: var(--ink-mute); }

.divider { border-top: var(--bw-thin) solid var(--line); margin: var(--s-4) 0; }
.divider-strong { border-top: var(--bw-mark) solid var(--ink); margin: var(--s-5) 0; }

/* ─── 17. RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --fs-display: 40px;
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 19px;
    --fs-body: 16px;
  }
  .container { padding: 0 var(--s-3); }
  nav.top > .nav-inner { padding: var(--s-2) var(--s-3); }
  nav.top ul { gap: var(--s-3); }
}

@media (max-width: 480px) {
  .drawer { width: 100vw; }
}

/* 移动端顶栏不溢出：身份切换收成图标、语言切换收紧、间距压缩 */
@media (max-width: 560px) {
  nav.top .nav-end { gap: 6px; }
  #navUser { gap: 6px; }
  .ident-switch { margin-right: 0; }
  .ident-btn #identName { display: none; }          /* 身份 pill 只留图标+箭头，省空间 */
  .ident-btn { padding: 6px 8px; }
  .ident-menu { min-width: 200px; }
  .lang-trigger span { display: none; }              /* 语言只留地球图标 */
  nav.top .wordmark .brand-zh { font-size: 16px; }
}

/* ─── 移动端导航：汉堡菜单 ─────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 38px; padding: 9px; margin-left: 2px;
  background: none; border: none; cursor: pointer; flex: 0 0 auto;
}
.nav-burger span { display: block; height: 2px; width: 20px; background: var(--ink); border-radius: 2px; transition: transform .22s var(--ease), opacity .18s; }
nav.top.nav-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
nav.top.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
nav.top.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  nav.top > .nav-inner { position: relative; gap: var(--s-2); }
  .nav-burger { display: inline-flex; }
  nav.top .wordmark .brand-en { display: none; }
  nav.top ul {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: var(--bw-thin) solid var(--line);
    box-shadow: 0 14px 28px rgba(10,13,16,.10);
    padding: 0 var(--s-4); max-height: 0; overflow: hidden;
    opacity: 0; pointer-events: none;
    transition: max-height .26s var(--ease), opacity .2s, padding .26s var(--ease);
  }
  nav.top.nav-open ul { max-height: 72vh; opacity: 1; pointer-events: auto; padding: var(--s-2) var(--s-4); }
  nav.top ul li { width: 100%; }
  nav.top ul a { display: block; padding: 14px 2px; border-bottom: 1px solid var(--line); border-left: none; }
  nav.top ul li:last-child a { border-bottom: none; }
  nav.top ul a.current { color: var(--accent-deep, #A8842E); border-bottom-color: var(--line); }
}

/* ─── 18. EMPTY STATE ───────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: var(--s-8) var(--s-4);
  color: var(--ink-mute);
}
.empty-icon { font-size: 40px; margin-bottom: var(--s-2); opacity: 0.6; }
.empty p { font-size: var(--fs-ui); margin: var(--s-1) 0; }
.empty a { color: var(--accent-hover); }

/* ─── 19. BADGE（统计数字）─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.badge strong { color: var(--ink); font-weight: 600; }

/* ─── 20. STATS ROW ─────────────────────────────────────────────────── */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.stats-row .sep { color: var(--line); }

/* =========================================================================
   LEGACY SHIM —— 老 inline styles 的兼容映射
   逐页面迁移完后可以删除（迁移期 6 个月内保留）
   ========================================================================= */
:root {
  /* 颜色 */
  --gold:        var(--accent);
  --gold-light:  var(--accent-soft);
  --gold-deep:   var(--accent-hover);
  --accent-deep: var(--accent-hover);
  --seal:        var(--accent);
  --seal-2:      var(--accent-hover);
  --jade:        var(--data-green);
  --red:         var(--data-red);
  --blue:        var(--data-blue);
  --night-0:     #0B1424;
  --night-1:     #1A1F2E;
  --paper-3:     var(--line);
  --bg-2:        var(--paper);
  --ink-2:       var(--ink-soft);
  --ink-3:       var(--ink-mute);

  /* 字体别名 */
  --font-serif: var(--serif);
  --font-sans:  var(--sans);
  --font-mono:  var(--mono);
  --latin:      var(--serif);

  /* 圆角别名 */
  --r-sm: var(--r-1);
  --r-md: var(--r-1);
  --r-lg: var(--r-2);
  --r-xl: var(--r-2);
  --radius: var(--r-1);
  --radius-lg: var(--r-2);

  /* 阴影别名 */
  --sh-3: var(--sh-2);
  --sh-4: var(--sh-2);
  --shadow-soft: var(--sh-1);
  --shadow-elev: var(--sh-2);

  /* 缓动 */
  --ease-default: var(--ease);
  --t-slow: 400ms;

  /* spacing 扩展 */
  --s-9: 128px;
  --s-10: 160px;
}

/* 老 tag-seal / tag-gold（标签 + 模型）→ v2 克制 pill */
.tag-seal, .tag-gold {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  font-family: var(--sans);
  font-size: 11.5px;
  border-radius: var(--r-pill);
  line-height: 1.5;
}
.tag-seal::before, .tag-gold::before { content: ''; }
.tag-seal { background: var(--paper-2); color: var(--ink-mute); }       /* 标签：中性 */
.tag-gold { background: var(--accent-soft); color: var(--accent-hover); } /* 模型：琥珀 */

/* ── 书封面（真封面 cover_url，没有则生成式）────────────────── */
.bk-cover { width: 100%; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--paper-2); margin-bottom: 14px; box-shadow: 0 2px 8px rgba(10,13,16,.08); }
.bk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-cover.gen { display: flex; align-items: center; justify-content: center; padding: 16px 16px 16px 22px; text-align: center; position: relative;
  background: linear-gradient(135deg, hsl(var(--h,30) 42% 44%), hsl(var(--h,30) 46% 30%)); }
.bk-cover.gen::before { content: ''; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 3px; background: rgba(255,255,255,.32); border-radius: 2px; }
.bk-cover.gen span { color: #fff; font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.42; letter-spacing: .01em; }
.bk-cover-sm { aspect-ratio: 3 / 4; width: 56px; flex: 0 0 56px; margin: 0; border-radius: 4px; }
.bk-cover-sm.gen span { font-size: 10px; padding: 0 2px; }

/* ── 全局身份切换器（我自己 / 孩子）── */
.ident-switch { position: relative; display: inline-flex; align-items: center; margin-right: 6px; }
.ident-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 13px; cursor: pointer; font-family: var(--font-sans, sans-serif); transition: border-color .15s; }
.ident-btn:hover { border-color: var(--accent); }
.ident-btn .ident-caret { color: var(--ink-mute); font-size: 11px; }
.ident-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(10,13,16,.16); padding: 6px; z-index: 200; }
.ident-opt { display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: 8px; padding: 9px 12px; border: none; background: none; border-radius: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left; text-decoration: none; }
.ident-opt:hover { background: var(--paper); }
.ident-opt.on { color: var(--accent-deep, var(--accent)); font-weight: 600; }
.ident-opt.ident-add { color: var(--ink-mute); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 11px; }

/* ═══════════════════ webapp / 移动端收尾（PWA 手感）═══════════════════ */
/* iOS 刘海/底部安全区：viewport-fit=cover 后用 env() 让导航与内容避开 */
@supports (padding: max(0px)) {
  nav.top { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}
/* 安装到桌面后的独立窗口（standalone）：去掉浏览器多余留白感 */
@media all and (display-mode: standalone) {
  nav.top { position: sticky; top: 0; }
}
@media (max-width: 560px) {
  /* 防 iOS 输入聚焦自动放大：表单控件统一 ≥16px */
  input, textarea, select, .input, .textarea, .select,
  .lib-search, .gph-search { font-size: 16px !important; }
  /* 窄屏：所有卡片网格塌成单列，杜绝右侧横向溢出 */
  .shelf-grid, .shelf-tab3, .insights-grid, .candidates-grid, .bl-cards,
  .pc-grid, .advisor-grid, .pf-grid, .rec-grid, .reading-grid, .sr-stats,
  .swatches, .booklist-grid { grid-template-columns: 1fr !important; }
  /* 搜索框/工具栏：移动端撑满，不再用桌面 min-width 撑破布局 */
  .lib-search, .gph-search { min-width: 0 !important; width: 100%; flex: 1 1 100%; }
  /* 触达目标：小按钮在手机上给足可点面积 */
  .btn-sm { min-height: 38px; }
  /* 长按钮文字允许换行，避免溢出 */
  .btn { white-space: normal; }
}
/* 知识图谱：固定 680px 在手机上太高，按视口收敛 */
@media (max-width: 760px) {
  #graphSvg, .graph-svg { height: clamp(360px, 68vh, 680px) !important; }
}