/* ============ 主题变量 ============ */
:root {
  color-scheme: light;
  --page: #f3f7fc;
  --surface: #fbfdff;
  --surface-2: #edf3f9;
  --ink: #172640;
  --ink-2: #50617a;
  --muted: #8492a7;
  --hair: #dce5f0;
  --axis: #b5c6da;
  --ring: rgba(35, 77, 128, 0.10);
  --shadow: 0 1px 2px rgba(27, 57, 92, .04), 0 12px 30px rgba(27, 57, 92, .07);
  --accent: #4b83e8;
  --accent-ink: #2b5fb6;
  --accent-soft: rgba(75, 131, 232, .11);

  /* 挖空 */
  --blank-bg: rgba(42, 120, 214, .11);
  --blank-line: rgba(42, 120, 214, .50);
  --reveal: #1c5cab;
  --miss-bg: rgba(208, 59, 59, .11);
  --miss-line: #d03b3b;
  --miss-ink: #b0302f;

  /* 状态（仅用于 忘了/模糊/记得，始终配图标+文字） */
  --good: #0ca30c;
  --warn: #fab219;
  --bad: #d03b3b;

  /* 掌握度：单色相顺序色阶（蓝，浅→深）+ 中性“未学” */
  --m0: #b7d3f6; --m1: #86b6ef; --m2: #5598e7; --m3: #256abf; --m4: #104281;
  --m-none: #dbe5f0;
  /* 层级：有序色阶（已校验 ordinal PASS） */
  --l0: #dcdad2; --l1: #86b6ef; --l2: #3987e5; --l3: #1c5cab; --l4: #0d366b;

  --read-font: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "PingFang SC", "Microsoft YaHei", serif;
  --ui-font: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --read-size: 19px;
  --radius: 14px;
  --nav-w: 76px;
  --tab-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ============ Premium study workspace ============
   A stronger shell and clearer composition give the dashboard an authored
   visual hierarchy while the mastery map keeps its original geometry. */
:root {
  --rail: #252833;
  --rail-ink: #f7f8fc;
  --rail-muted: #aab0bf;
  --rail-line: rgba(255,255,255,.11);
  --signal: #2d9f87;
}
:root[data-theme="dark"] {
  --rail: #111217;
  --rail-ink: #f2f3f7;
  --rail-muted: #9da3b1;
  --rail-line: rgba(255,255,255,.12);
  --signal: #55c4a4;
}
:root[data-theme="sepia"] {
  --rail: #403a38;
  --rail-ink: #fffaf2;
  --rail-muted: #cfc2b8;
  --rail-line: rgba(255,250,242,.15);
}
body { background: linear-gradient(180deg, color-mix(in srgb, var(--page) 92%, white), var(--page)); }

@media (min-width: 900px) {
  .nav.linear-nav {
    background: var(--rail);
    border-right-color: transparent;
    box-shadow: 12px 0 36px rgba(20,24,32,.08);
  }
  .nav.linear-nav .linear-brand { color: var(--rail-ink); }
  .nav.linear-nav .brand-copy strong { color: var(--rail-ink); }
  .nav.linear-nav .brand-copy small,
  .nav.linear-nav .nav-section-label,
  .nav.linear-nav .nav-hint,
  .nav.linear-nav .nav-sync { color: var(--rail-muted); }
  .nav.linear-nav .workspace-context { border-color: var(--rail-line); background: rgba(255,255,255,.06); }
  .nav.linear-nav .workspace-context .workspace-name b { color: var(--rail-ink); }
  .nav.linear-nav a:not(.brand-home) { color: var(--rail-muted); }
  .nav.linear-nav a:not(.brand-home):hover { background: rgba(255,255,255,.07); color: var(--rail-ink); }
  .nav.linear-nav a:not(.brand-home).on { background: rgba(117,115,225,.22); color: var(--rail-ink); box-shadow: inset 2px 0 0 #9a96ff; }
  .nav.linear-nav a:not(.brand-home).on svg { stroke: #b6b3ff; }
  .nav.linear-nav .nav-foot { border-top-color: var(--rail-line); }
  .nav.linear-nav::after { display: none; }
  .subj-bar { border-bottom: 1px solid var(--hair); box-shadow: 0 1px 0 rgba(31,35,41,.02); }
  .dashboard-grid { gap: 22px; }
  .dashboard-grid > .map-panel,
  .dashboard-grid > .chapter-panel,
  .dashboard-grid > .insight-grid,
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; }
  .chapter-panel .ch-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

.dashboard-stats {
  border-color: color-mix(in srgb, var(--ink) 10%, var(--hair));
  box-shadow: 0 12px 30px rgba(31,35,41,.065), 0 1px 2px rgba(31,35,41,.04);
}
.stat-primary {
  border-left: 0;
  color: #fff;
  background: linear-gradient(135deg, #252831 0%, #343844 100%);
}
.stat-primary .eyebrow, .stat-primary .stat-caption { color: rgba(247,248,252,.62); }
.stat-primary .stat-value { color: #fff; }
.stat-primary .stat-value small { color: rgba(247,248,252,.68); }
.stat-primary .stat-cta { border-color: rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.08); }
.stat-primary .stat-cta:hover { background: rgba(255,255,255,.16); }
.stat-primary .stat-ring .ring-meter circle:first-child { stroke: rgba(255,255,255,.18) !important; }
.stat-primary .stat-ring .ring-meter circle:last-child { stroke: #aaa7ff !important; }
.stat-grid { background: var(--surface); }
.stat-item { border-left-color: var(--hair); }
.stat-item:nth-child(2) .stat-value { color: var(--accent-ink); }
.stat-item:nth-child(3) .stat-value { color: var(--signal); }
.stat-item:nth-child(3) .stat-caption { color: color-mix(in srgb, var(--signal) 72%, var(--muted)); }
.map-panel { border-color: color-mix(in srgb, var(--ink) 9%, var(--hair)); }
#toc { border-top: 1px solid var(--hair); }
.toc-ch { margin: 0; border-bottom: 1px solid var(--hair); }
.toc-ch > .hd, .toc-ch.open > .hd { min-height: 58px; padding: 0 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.toc-body { padding: 4px 0 10px 30px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* base toc reset */

/* ============ Final cascade for the crafted workspace ============ */
body { background: var(--page); }
.page-head { align-items: center; }
.page-title-block { min-width: 0; }
.page-kicker, .panel-kicker { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.page-kicker { margin-bottom: 7px; }
.page-kicker span { color: color-mix(in srgb, var(--muted) 55%, transparent); padding: 0 3px; }
.panel-kicker { margin-bottom: 4px; letter-spacing: .1em; }
.page-head-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.subject-label { flex: none; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.subject-tabs { display: flex; align-items: center; gap: 3px; min-width: 0; }
.subject-tabs button { min-width: 0; }
.stat-primary { position: relative; background: #252831; }
:root[data-theme="dark"] .stat-primary { background: #111318; }
:root[data-theme="sepia"] .stat-primary { background: #433c37; }
.stat-primary-action { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.action-label { color: rgba(247,248,252,.54); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow-dot { width: 6px; height: 6px; display: inline-block; margin: 0 6px 1px 0; border-radius: 50%; background: #aaa7ff; box-shadow: 0 0 0 3px rgba(170,167,255,.14); }
.stat-item .stat-value { color: var(--ink); }
.stat-item-review .eyebrow::before { content: ''; width: 6px; height: 6px; display: inline-block; margin: 0 6px 1px 0; border-radius: 50%; background: var(--signal); }
.stat-item-review .stat-caption { color: color-mix(in srgb, var(--signal) 68%, var(--muted)); }
.sync-dot.offline { background: var(--muted); }

@media (min-width: 900px) {
  .subj-bar { height: calc(var(--safe-t) + 52px); padding: var(--safe-t) 36px 0; gap: 14px; background: var(--surface); border-bottom-color: var(--hair); }
  .subject-tabs { flex: 1; }
  .subject-tabs button { flex: 0 0 auto; min-width: 128px; height: 34px; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 52px + 24px); }
  .page-head { margin-bottom: 22px; }
  .page-head h1 { font-size: 28px; letter-spacing: -.035em; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.58fr) minmax(320px, .92fr); column-gap: 24px; row-gap: 22px; align-items: start; }
  .dashboard-grid > .map-panel { grid-column: 1; grid-row: 1; }
  .dashboard-grid > .chapter-panel { grid-column: 2; grid-row: 1; }
  .dashboard-grid > .insight-grid { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; grid-row: 3; }
  .chapter-panel .ch-rows { grid-template-columns: 1fr; max-height: 520px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
  .chapter-panel .ch-rows::-webkit-scrollbar { width: 4px; }
  .chapter-panel .ch-rows::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 99px; }
  .chapter-panel .panel-head { align-items: flex-end; }
  .dashboard-stats { margin-bottom: 22px; }
}

@media (max-width: 899px) { .page-head-actions { width: auto; } .subject-label { font-size: 9px; } }

@media (max-width: 639px) {
  body { background: var(--page); }
  .subj-bar { height: calc(var(--safe-t) + 44px); padding: var(--safe-t) 13px 0; gap: 11px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 1px 0 var(--hair); }
  .subject-tabs { flex: 1; gap: 0; }
  .subject-tabs button { flex: 1; height: 33px; padding: 0 8px; border-radius: 0; font-size: 12.5px; }
  .page-head { display: block; margin: 0 1px 14px; }
  .page-kicker { margin-bottom: 6px; font-size: 9.5px; }
  .page-head h1 { font-size: 24px; letter-spacing: -.045em; line-height: 1.15; }
  .page-head .sub { max-width: 100%; margin-top: 5px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-head-actions { width: 100%; margin-top: 11px; }
  .page-head-actions .seg { width: 100%; }
  .page-head-actions .seg button { flex: 1; min-width: 0; padding: 0 7px; font-size: 11.5px; }
  .browse-head .page-head-actions { justify-content: flex-end; }
  .browse-head .page-head-actions .btn { min-width: 94px; }
  .dashboard-stats { margin-bottom: 14px; border-radius: 14px; box-shadow: 0 1px 2px rgba(31,35,41,.06), 0 9px 22px rgba(31,35,41,.05); }
  .stat-primary { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; min-height: 116px; padding: 16px 14px; }
  .stat-primary-action { gap: 4px; }
  .stat-primary .stat-value { font-size: 32px; }
  .stat-primary .stat-caption { max-width: 155px; font-size: 10.5px; }
  .stat-cta { min-height: 35px; padding: 0 9px; border-radius: 8px; font-size: 11px; }
  .stat-grid { border-top-color: color-mix(in srgb, var(--hair) 80%, transparent); }
  .stat-item { min-height: 74px; padding: 11px 9px; }
  .stat-item .stat-value { font-size: 22px; }
  .stat-item .stat-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .map-panel { padding: 16px 0 11px; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: transparent; box-shadow: none; }
  .map-panel .panel-head { padding: 0 2px; margin-bottom: 9px; }
  .map-panel .hint { padding: 0 2px; }
  .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { padding-left: 2px; padding-right: 2px; }
  .chapter-panel .panel-head, .trend-panel .panel-head, .weak-panel .panel-head, .keyword-panel .panel-head { align-items: flex-end; }
  .chapter-panel .panel-kicker, .trend-panel .panel-kicker, .weak-panel .panel-kicker, .keyword-panel .panel-kicker { font-size: 9px; }
  .ch-row { min-height: 62px; padding: 10px 3px; border-top-color: color-mix(in srgb, var(--hair) 75%, transparent); }
  .ch-row .name .no { display: inline-grid; place-items: center; width: 27px; height: 22px; margin-right: 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: 10px; }
  .nav { background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 -6px 22px rgba(31,35,41,.08); }
  .nav a.on { color: var(--accent-ink); }
  .nav a.on svg { background: transparent; }
  .nav a.on::before { display: block; top: 0; width: 28px; height: 2px; border-radius: 0 0 4px 4px; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) { .stat-cta, .nav a, .ch-row, .toc-card { transition: none !important; } } /* early cascade */

/* ============ 2026 workspace direction ============
   A final, deliberate layer for the product shell. It keeps the map drawing
   untouched while giving every surrounding surface one clear visual system:
   quiet paper, ink-black navigation, one violet action color, and compact
   information bands that scan well on a phone. */
:root {
  --page: #f2f2ef;
  --surface: #fcfcfa;
  --surface-2: #e9e9e5;
  --ink: #202127;
  --ink-2: #686a75;
  --muted: #9597a0;
  --hair: #deded9;
  --axis: #b7b8bd;
  --ring: rgba(32, 33, 39, .08);
  --shadow: 0 1px 2px rgba(32, 33, 39, .04), 0 16px 34px rgba(32, 33, 39, .055);
  --accent: #6965d8;
  --accent-ink: #514db4;
  --accent-soft: rgba(105, 101, 216, .11);
  --good: #2f9f82;
  --signal: #2f9f82;
  --warn: #c59135;
  --bad: #c7555b;
  --rail: #1c1d24;
  --rail-ink: #f7f7f4;
  --rail-muted: #a2a3ae;
  --rail-line: rgba(255,255,255,.12);
}
:root[data-theme="dark"] {
  --page: #15161b;
  --surface: #1d1e25;
  --surface-2: #272831;
  --ink: #f2f2ee;
  --ink-2: #c0c0c8;
  --muted: #8c8e99;
  --hair: #34353e;
  --axis: #62636d;
  --ring: rgba(255,255,255,.08);
  --shadow: 0 1px 2px rgba(0,0,0,.22), 0 18px 40px rgba(0,0,0,.18);
  --accent: #9a96ff;
  --accent-ink: #b6b3ff;
  --accent-soft: rgba(154,150,255,.15);
  --rail: #101116;
  --rail-ink: #f7f7f4;
  --rail-muted: #9b9ca7;
  --rail-line: rgba(255,255,255,.12);
}
:root[data-theme="sepia"] {
  --page: #efe8dc;
  --surface: #fbf4e8;
  --surface-2: #e9dece;
  --ink: #3c342d;
  --ink-2: #716357;
  --muted: #9b8976;
  --hair: #ded0bd;
  --accent: #765fc1;
  --accent-ink: #604aa9;
  --accent-soft: rgba(118,95,193,.12);
  --rail: #3a3535;
  --rail-ink: #fffaf2;
  --rail-muted: #d0c4b8;
  --rail-line: rgba(255,250,242,.16);
}

body { background: var(--page); color: var(--ink); }
.main { max-width: 1440px; }
.page-head { margin-top: 8px; }
.page-head h1 { font-weight: 680; letter-spacing: -.04em; }
.page-head .sub { color: var(--ink-2); }
.page-kicker, .panel-kicker { color: var(--muted); letter-spacing: .16em; }
.panel { border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(32,33,39,.035), 0 12px 30px rgba(32,33,39,.045); }
.panel .panel-head { margin-bottom: 16px; }
.panel h2 { font-weight: 650; letter-spacing: -.02em; }
.seg { border: 1px solid var(--hair); background: var(--surface-2); }
.seg button { min-height: 34px; }
.seg button.on { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(32,33,39,.1); }
.btn { border-radius: 9px; font-weight: 620; }
.btn.accent { background: var(--accent); box-shadow: 0 5px 14px rgba(105,101,216,.22); }
.btn.accent:hover { background: var(--accent-ink); }

/* Subject bar: a compact workspace switcher rather than a second page header. */
.subj-bar { background: var(--surface); border-bottom: 1px solid var(--hair); }
.subject-label { display: inline-flex; align-items: center; gap: 7px; }
.subject-mini-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.subject-status { margin-left: auto; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.subject-tabs button { color: var(--muted); }
.subject-tabs button.on { color: var(--ink); }

/* The summary is one command surface, not a light card glued to a dark card. */
.dashboard-stats {
  background: #24252e;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(31,31,40,.15);
}
.stat-primary { background: #24252e; border-right: 1px solid rgba(255,255,255,.1); }
.stat-grid { background: #2a2b34; }
.stat-item { border-left-color: rgba(255,255,255,.1); }
.stat-item .eyebrow, .stat-item .stat-caption { color: rgba(247,247,244,.58); }
.stat-item .stat-value { color: #f7f7f4; }
.stat-item:nth-child(2) .stat-value { color: #b7b4ff; }
.stat-item:nth-child(3) .stat-value { color: #64c6a9; }
.stat-item:nth-child(3) .stat-caption { color: rgba(100,198,169,.8); }
.stat-primary .stat-cta { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 5px 16px rgba(105,101,216,.28); }
.stat-primary .stat-cta:hover { background: #7c78ea; }
.stat-primary .stat-ring .ring-meter circle:first-child { stroke: rgba(255,255,255,.15) !important; }
.stat-primary .stat-ring .ring-meter circle:last-child { stroke: #aaa7ff !important; }

/* Desktop shell */
@media (min-width: 900px) {
  :root { --nav-w: 252px; }
  .nav.linear-nav { width: var(--nav-w); background: var(--rail); box-shadow: 16px 0 44px rgba(20,20,26,.1); }
  .nav.linear-nav .linear-brand { margin: 0 6px 26px; }
  .nav.linear-nav .workspace-context { border-radius: 10px; }
  .nav.linear-nav a:not(.brand-home) { height: 40px; border-radius: 9px; }
  .nav.linear-nav a:not(.brand-home).on { background: rgba(154,150,255,.18); box-shadow: inset 3px 0 0 #aaa7ff; }
  .subj-bar { left: var(--nav-w); height: calc(var(--safe-t) + 60px); padding: var(--safe-t) 42px 0; }
  .subject-tabs button { height: 38px; min-width: 138px; border-radius: 9px; }
  .main { padding-left: calc(var(--nav-w) + 56px); padding-right: 56px; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 60px + 30px); }
  .page-head { margin-bottom: 26px; }
  .page-head h1 { font-size: 32px; }
  .dashboard-stats { grid-template-columns: minmax(400px, 1.08fr) minmax(0, 1.42fr); min-height: 148px; }
  .stat-primary { grid-template-columns: 74px minmax(0, 1fr) auto; padding: 24px 28px; }
  .stat-ring, .stat-ring .ring-meter { width: 74px; height: 74px; }
  .stat-item { min-height: 148px; padding: 22px 20px; }
  .stat-item .stat-value { font-size: 29px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.3fr) minmax(340px, .86fr); gap: 20px; }
  .dashboard-grid > .map-panel { grid-column: 1; grid-row: 1; }
  .dashboard-grid > .chapter-panel { grid-column: 2; grid-row: 1; }
  .dashboard-grid > .insight-grid { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; grid-row: 3; }
  .map-panel, .chapter-panel { min-height: 100%; border-radius: 18px; }
  .map-panel { padding: 22px 24px 20px; }
  .chapter-panel { padding: 22px 22px 18px; }
  .chapter-panel .ch-rows { max-height: 568px; }
  .insight-grid { gap: 20px; }
  .keyword-panel { border-radius: 18px; }
}

/* Phone shell: full-width reading surfaces and a shorter, two-column chapter rail. */
@media (max-width: 899px) {
  body { background: var(--page); }
  .main { padding: calc(var(--safe-t) + 16px) 14px calc(var(--tab-h) + var(--safe-b) + 24px); }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 43px + 18px); }
  .subject-status { display: none; }
  .subj-bar { height: calc(var(--safe-t) + 43px); padding: var(--safe-t) 14px 0; background: color-mix(in srgb, var(--surface) 96%, transparent); }
  .subject-label { font-size: 9.5px; letter-spacing: .12em; }
  .subject-tabs button { height: 34px; border-radius: 8px 8px 0 0; }
  .page-head { gap: 9px; margin: 0 0 16px; }
  .page-head h1 { font-size: 27px; line-height: 1.12; }
  .page-head .sub { font-size: 12px; margin-top: 5px; }
  .dashboard-head .page-head-actions { grid-column: 1 / -1; width: 100%; margin-top: 2px; }
  .dashboard-head .page-head-actions .seg { width: 100%; }
  .dashboard-head .page-head-actions .seg button { flex: 1; }
  .browse-head .page-head-actions { align-self: end; }
  .dashboard-stats { grid-template-columns: 1fr; margin-bottom: 18px; border-radius: 18px; }
  .stat-primary { grid-template-columns: 56px minmax(0, 1fr) auto; min-height: 118px; padding: 18px 16px; gap: 11px; }
  .stat-ring, .stat-ring .ring-meter { width: 56px; height: 56px; }
  .stat-primary .stat-value { font-size: 34px; }
  .stat-primary .stat-caption { font-size: 10.5px; max-width: 160px; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.1); }
  .stat-item { min-height: 74px; padding: 12px 11px; border-left-color: rgba(255,255,255,.1); }
  .stat-item:first-child { border-left: 0; }
  .stat-item .stat-value { font-size: 22px; }
  .stat-item .stat-caption { font-size: 10px; }
  .dashboard-grid { display: grid; gap: 14px; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border-radius: 18px; padding: 16px 15px 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(32,33,39,.035), 0 9px 22px rgba(32,33,39,.045); }
  .map-panel .panel-head { margin-bottom: 11px; }
  .map-panel .legend { gap: 4px 9px; font-size: 10.5px; }
  .tm-mobile-only { padding: 10px 8px; border-radius: 12px; background: var(--surface-2); }
  .hm-wrap { max-height: 222px; scrollbar-width: none; }
  .hm-wrap::-webkit-scrollbar { width: 0; height: 0; }
  .map-panel .hint { margin-top: 10px !important; font-size: 10.5px; line-height: 1.45; }
  .chapter-panel .panel-head { margin-bottom: 10px; }
  .chapter-panel .legend { display: flex; gap: 5px 9px; font-size: 10px; overflow: hidden; }
  .chapter-panel .ch-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ch-row { min-height: 66px; padding: 10px 0; border-top-color: var(--hair); border-radius: 0; }
  .ch-row .name { white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ch-row .name .no { display: inline-grid; place-items: center; width: 24px; height: 20px; margin-right: 5px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9px; }
  .ch-row .pct { font-size: 12px; }
  .ch-row .bars { gap: 4px; }
  .mbar, .stack { height: 6px; }
  .insight-grid { gap: 14px; }
  .panel .panel-head { margin-bottom: 12px; }
  .nav { background: #202127; border-top: 0; box-shadow: 0 -12px 28px rgba(20,20,26,.16); }
  .nav a, .nav a.on { color: rgba(247,247,244,.62); }
  .nav a.on { color: #fff; }
  .nav a.on svg { color: #aaa7ff; stroke: #aaa7ff; background: transparent; }
  .nav a.on::before { display: block; top: 0; width: 34px; height: 2px; background: #aaa7ff; box-shadow: none; }
  .startbar { bottom: calc(var(--tab-h) + var(--safe-b) + 10px); border-radius: 14px; }
}

/* Directory: index the chapters and keep the selected session visible above the nav. */
#toc { counter-reset: toc-chapter; }
.toc-ch { counter-increment: toc-chapter; }
.toc-ch > .hd::before { content: counter(toc-chapter, decimal-leading-zero); color: var(--accent-ink); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.toc-ch > .hd { grid-template-columns: 22px 22px minmax(0,1fr) auto; border-color: var(--hair); }
.toc-ch > .hd .ttl { font-weight: 650; }
.toc-ch > .hd .meta .mbar { height: 6px; }
.toc-card { border-radius: 7px; }
.toc-card .ct { line-height: 1.4; }
@media (max-width: 639px) {
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 60px; grid-template-columns: 22px 20px minmax(0,1fr) auto; padding: 0 2px; }
  .toc-ch > .hd .ttl { font-size: 13.5px; }
  .toc-ch > .hd .meta { gap: 6px; }
  .toc-ch > .hd .meta .mbar { width: 38px; }
  .toc-body { padding-left: 28px; }
}

/* ============ 2026.09 command-center pass ============
   The final layer owns the responsive composition. Earlier rules are kept for
   the study surface and map renderer, but dashboard chrome is intentionally
   consolidated here so visual changes cannot be shadowed by old overrides. */
:root {
  --page: #f4f4f1;
  --surface: #ffffff;
  --surface-2: #ecece8;
  --ink: #1f2024;
  --ink-2: #64666f;
  --muted: #92949c;
  --hair: #dfdfda;
  --axis: #b9babd;
  --accent: #5d60d8;
  --accent-ink: #494cb9;
  --accent-soft: rgba(93,96,216,.12);
  --good: #2f9f82;
  --signal: #2f9f82;
  --warn: #ce8746;
  --bad: #c85b61;
  --shadow: 0 1px 2px rgba(31,32,36,.04), 0 14px 34px rgba(31,32,36,.055);
  --rail: #1b1c21;
  --rail-ink: #f7f7f4;
  --rail-muted: #a2a4ae;
  --rail-line: rgba(255,255,255,.12);
}
:root[data-theme="dark"] {
  --page: #141518;
  --surface: #1c1d22;
  --surface-2: #27282e;
  --ink: #f2f2ed;
  --ink-2: #c0c1c7;
  --muted: #8d8f99;
  --hair: #33343b;
  --axis: #595a63;
  --accent: #9b98ff;
  --accent-ink: #bdbaff;
  --accent-soft: rgba(155,152,255,.15);
  --shadow: 0 1px 2px rgba(0,0,0,.22), 0 18px 42px rgba(0,0,0,.17);
  --rail: #101115;
}
:root[data-theme="sepia"] {
  --page: #f0e9dd;
  --surface: #fbf6ed;
  --surface-2: #e9dfd0;
  --ink: #3b332b;
  --ink-2: #716458;
  --muted: #9b8977;
  --hair: #ded0bd;
  --accent: #715dcc;
  --accent-ink: #5b49a5;
  --accent-soft: rgba(113,93,204,.12);
  --rail: #3a3535;
}

body { background: var(--page); color: var(--ink); }
.main { max-width: 1540px; }
.page-head { align-items: center; }
.page-head h1 { font-weight: 720; letter-spacing: -.045em; }
.page-head .sub { color: var(--ink-2); }
.page-kicker, .panel-kicker { letter-spacing: .14em; font-weight: 700; }
.panel { border-color: var(--hair); box-shadow: var(--shadow); }
.panel h2 { font-weight: 680; letter-spacing: -.025em; }
.panel-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.map-expand { display: none; height: 28px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 7px; color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.map-expand:hover { color: var(--ink); background: var(--surface-2); }

/* The command surface reads as one instrument: metadata, score, action, then
   a quiet evidence rail. It avoids the previous stack of unrelated cards. */
.dashboard-stats { overflow: hidden; border: 1px solid rgba(27,28,33,.12); border-radius: 16px; background: #24252d; box-shadow: 0 18px 44px rgba(30,31,39,.13); }
.stat-primary { display: flex; flex-direction: column; gap: 17px; min-width: 0; padding: 21px 24px 16px; background: #24252d; border-right: 1px solid rgba(255,255,255,.1); }
.stat-primary-top, .stat-primary-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.stat-primary-top .eyebrow { color: rgba(247,247,244,.78); }
.stat-context, .stat-next-hint { color: rgba(247,247,244,.46); font-size: 10.5px; white-space: nowrap; }
.stat-primary-main { display: grid; grid-template-columns: 68px minmax(0,1fr) auto; align-items: center; gap: 16px; min-width: 0; }
.stat-primary-copy { min-width: 0; }
.stat-primary .stat-value { color: #fafaf7; font-size: 40px; font-weight: 720; letter-spacing: -.055em; line-height: 1; }
.stat-primary .stat-value small { margin-left: 3px; color: rgba(247,247,244,.62); font-size: 17px; letter-spacing: 0; }
.stat-primary .stat-caption { margin-top: 7px; max-width: 270px; color: rgba(247,247,244,.58); font-size: 11px; line-height: 1.45; }
.stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 68px; height: 68px; }
.stat-primary .stat-ring .ring-meter circle:first-child { stroke: rgba(255,255,255,.16) !important; }
.stat-primary .stat-ring .ring-meter circle:last-child { stroke: #aaa7ff !important; }
.stat-primary-action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.stat-primary .stat-cta { min-height: 37px; padding: 0 12px; border: 0; border-radius: 8px; background: #6a67e2; color: #fff; box-shadow: 0 7px 18px rgba(71,69,171,.33); font-size: 12px; font-weight: 680; }
.stat-primary .stat-cta:hover { background: #7774ee; }
.stat-primary-bottom { padding-top: 2px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(247,247,244,.55); font-size: 11px; }
.status-pulse { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #62c8a9; box-shadow: 0 0 0 3px rgba(98,200,169,.13); vertical-align: 1px; }
.stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: #2b2c34; }
.stat-item { min-width: 0; padding: 23px 20px 18px; border-left: 1px solid rgba(255,255,255,.1); }
.stat-item:first-child { border-left: 0; }
.stat-item .eyebrow, .stat-item .stat-caption { color: rgba(247,247,244,.52); }
.stat-item .stat-value { color: #f7f7f4; font-size: 30px; font-weight: 680; letter-spacing: -.045em; }
.stat-item .stat-value small { color: rgba(247,247,244,.52); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.stat-item:nth-child(2) .stat-value { color: #bbb8ff; }
.stat-item:nth-child(3) .stat-value { color: #66c8ab; }
.stat-item:nth-child(3) .stat-caption { color: rgba(102,200,171,.78); }

@media (min-width: 900px) {
  :root { --nav-w: 244px; }
  .nav.linear-nav { width: var(--nav-w); background: var(--rail); box-shadow: 16px 0 44px rgba(20,20,26,.11); }
  .nav.linear-nav a:not(.brand-home).on { background: rgba(154,150,255,.17); box-shadow: inset 3px 0 0 #aaa7ff; }
  .subj-bar { left: var(--nav-w); height: calc(var(--safe-t) + 58px); padding: var(--safe-t) 46px 0; background: rgba(255,255,255,.72); }
  :root[data-theme="dark"] .subj-bar { background: rgba(28,29,34,.88); }
  .main { padding-left: calc(var(--nav-w) + 52px); padding-right: 52px; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 58px + 30px); }
  .page-head { margin-bottom: 24px; }
  .page-head h1 { font-size: 32px; }
  .dashboard-stats { grid-template-columns: minmax(420px,1.08fr) minmax(0,1.42fr); min-height: 170px; }
  .dashboard-grid { grid-template-columns: minmax(0,1.32fr) minmax(340px,.86fr); gap: 18px; }
  .dashboard-grid > .map-panel { grid-column: 1; grid-row: 1; }
  .dashboard-grid > .chapter-panel { grid-column: 2; grid-row: 1; }
  .dashboard-grid > .insight-grid { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; grid-row: 3; }
  .map-panel, .chapter-panel { min-height: 100%; border-radius: 14px; }
  .map-panel { padding: 21px 23px 18px; }
  .chapter-panel { padding: 21px 21px 17px; }
  .chapter-panel .ch-rows { max-height: 568px; }
  .insight-grid { gap: 18px; }
}

@media (max-width: 899px) {
  .main { padding: calc(var(--safe-t) + 14px) 14px calc(var(--tab-h) + var(--safe-b) + 24px); }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 44px + 14px); }
  .subj-bar { height: calc(var(--safe-t) + 44px); padding: var(--safe-t) 13px 0; background: color-mix(in srgb, var(--surface) 92%, transparent); }
  .dashboard-stats { margin-bottom: 16px; border-radius: 14px; }
  .dashboard-grid { gap: 0; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: transparent; box-shadow: none; }
  .map-panel { padding: 17px 0 13px; order: 2; }
  .chapter-panel { padding: 17px 0 13px; order: 1; }
  .insight-grid { order: 3; gap: 10px; }
  .keyword-panel { order: 4; }
  .map-panel .panel-head { display: block; margin-bottom: 10px; }
  .map-panel .panel-head-actions { justify-content: flex-start; margin-top: 8px; gap: 8px; }
  .map-panel .legend { flex: 1; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .map-panel .legend::-webkit-scrollbar { display: none; }
  .map-expand { display: inline-flex; align-items: center; justify-content: center; }
  .tm-mobile-only { padding: 9px 8px 8px; border: 1px solid var(--hair); border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
  .hm-wrap { max-height: 182px; overflow: hidden; }
  .map-is-expanded .hm-wrap { max-height: 420px; overflow-y: auto; }
  .map-is-expanded .map-expand { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--hair)); }
  .chapter-panel .panel-head { margin-bottom: 8px; }
  .chapter-panel .legend { display: none; }
  .chapter-panel .ch-rows { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; }
  .ch-row { min-height: 58px; padding: 8px 0; border-top-color: var(--hair); border-radius: 0; }
  .ch-row .name { line-height: 1.25; }
  .ch-row .name .no { width: 23px; height: 20px; margin-right: 5px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9px; }
  .ch-row .pct { font-size: 12px; }
  .mbar, .stack { height: 5px; }
  .nav { background: var(--surface); border-top: 1px solid var(--hair); box-shadow: 0 -6px 20px rgba(31,32,36,.06); }
  .nav a, .nav a.on { color: var(--muted); }
  .nav a.on { color: var(--accent-ink); }
  .nav a.on svg { color: var(--accent); stroke: var(--accent); }
  .nav a.on::before { top: 0; width: 32px; height: 2px; background: var(--accent); box-shadow: none; }
}

@media (max-width: 639px) {
  html, body { overflow-x: hidden; }
  .main { padding-left: 13px; padding-right: 13px; padding-bottom: calc(var(--tab-h) + var(--safe-b) + 20px); }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 44px + 11px); }
  .subj-bar { padding-left: 12px; padding-right: 12px; }
  .subject-label { font-size: 9px; }
  .subject-tabs button { height: 32px; font-size: 12.5px; }
  .page-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 0 10px; margin: 1px 1px 12px; }
  .page-kicker { display: none; }
  .page-head h1 { font-size: 25px; line-height: 1.1; }
  .page-head .sub { margin-top: 4px; font-size: 11.5px; }
  .dashboard-head .page-head-actions { grid-column: 2; grid-row: 1; width: auto; margin: 0 0 3px; }
  .dashboard-head .page-head-actions .seg { width: auto; }
  .dashboard-head .page-head-actions .seg button { flex: none; min-width: 50px; padding: 0 8px; font-size: 0; }
  .dashboard-head .page-head-actions .seg button::after { font-size: 11px; }
  .dashboard-head .page-head-actions .seg button:first-child::after { content: '全部'; }
  .dashboard-head .page-head-actions .seg button:last-child::after { content: '高频'; }
  .dashboard-stats { margin-bottom: 10px; border-radius: 14px; box-shadow: 0 12px 28px rgba(31,32,36,.12); }
  .stat-primary { gap: 12px; min-height: 151px; padding: 14px 14px 11px; }
  .stat-primary-top { gap: 8px; }
  .stat-context, .stat-next-hint { font-size: 10px; }
  .stat-primary-main { grid-template-columns: 51px minmax(0,1fr) auto; gap: 10px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 51px; height: 51px; }
  .stat-primary .stat-value { font-size: 34px; }
  .stat-primary .stat-caption { max-width: 175px; margin-top: 5px; font-size: 10px; }
  .stat-primary .stat-cta { min-height: 34px; padding: 0 10px; font-size: 11px; }
  .stat-primary-bottom { padding-top: 8px; font-size: 10.5px; }
  .stat-next-hint { display: none; }
  .stat-grid { min-height: 66px; }
  .stat-item { min-height: 66px; padding: 10px 9px 8px; }
  .stat-item .eyebrow { font-size: 10px; }
  .stat-item .stat-value { margin-top: 2px; font-size: 22px; }
  .stat-item .stat-caption { margin-top: 1px; font-size: 9.5px; }
  .dashboard-grid { gap: 0; }
  .panel .panel-head { gap: 6px; }
  .panel h2 { font-size: 15px; }
  .panel .panel-kicker { font-size: 9px; }
  .chapter-panel .ch-rows { grid-template-columns: 1fr; column-gap: 0; }
  .ch-row { min-height: 50px; grid-template-columns: minmax(0,1fr) 45px; gap: 2px 9px; padding: 7px 2px; }
  .ch-row .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  .ch-row .bars { grid-column: 1; gap: 3px; }
  .ch-row .pct { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; }
  .map-panel { padding-top: 15px; }
  .map-panel .hint { margin-top: 8px !important; font-size: 10.5px; line-height: 1.35; }
  .insight-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trend-panel, .weak-panel { min-width: 0; padding: 14px 0 12px; }
  .trend-panel .panel-head, .weak-panel .panel-head { display: block; }
  .trend-panel .panel-head .hint { display: block; margin-top: 3px; }
  .weak-panel .panel-head .btn { margin-top: 6px; }
  .weak-item { grid-template-columns: minmax(0,1fr) auto; gap: 2px 5px; padding: 9px 0; }
  .weak-item .t { font-size: 12px; }
  .weak-item .p { font-size: 10px; }
  .weak-item .r { font-size: 11px; }
  .keyword-panel { padding: 14px 0 12px; }
  .keyword-panel .panel-head { display: block; }
  .keyword-panel .panel-head .hint { margin-top: 3px; }
  .kw-cloud { gap: 5px; }
  .kw-cloud button { padding: 5px 8px; border-radius: 7px; font-size: 12px; }
  .nav a { min-height: 44px; font-size: 10px; }
  .nav a svg { width: 20px; height: 20px; }
  .startbar { left: 9px; right: 9px; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); padding: 10px; border-radius: 13px; }
}

@media (min-width: 480px) and (max-width: 899px) {
  .chapter-panel .ch-rows { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; }
  .ch-row { min-height: 58px; grid-template-columns: minmax(0,1fr) 45px; }
  .ch-row .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-cta, .map-expand, .nav a, .ch-row, .toc-card { transition: none !important; }
}

/* ============ FINAL OVERRIDE / 2026-09-25 ============
   This block intentionally lives at EOF so the product has one predictable
   responsive composition after the historical stylesheet layers. */
:root {
  --page: #f5f6f4; --surface: #fff; --surface-2: #eef0ee;
  --ink: #171922; --ink-2: #5c606c; --muted: #8c919c; --hair: #e0e4e1;
  --accent: #5d5fe3; --accent-ink: #4749b3; --accent-soft: rgba(93,95,227,.12);
  --good: #2eaa89; --signal: #2eaa89; --warn: #c8893b; --bad: #c25761;
  --rail: #17181e; --rail-ink: #f5f6f7; --rail-muted: #9da1ad; --rail-line: rgba(255,255,255,.12);
  --shadow: 0 1px 2px rgba(25,28,34,.04), 0 14px 34px rgba(25,28,34,.055);
  --ease-standard: cubic-bezier(.2,.75,.25,1);
}
:root[data-theme="dark"] { --page:#111216; --surface:#1a1b21; --surface-2:#25262e; --ink:#f5f5f1; --ink-2:#c2c4cc; --muted:#8e919c; --hair:#33353d; --accent:#9b98ff; --accent-ink:#c0bdff; --accent-soft:rgba(155,152,255,.16); --good:#5dc8a5; --signal:#5dc8a5; --warn:#e1ad60; --bad:#eb7c86; --rail:#0b0c10; --rail-ink:#f5f5f1; --rail-muted:#a4a7b2; --rail-line:rgba(255,255,255,.13); --shadow:0 1px 2px rgba(0,0,0,.25),0 18px 42px rgba(0,0,0,.18); }
:root[data-theme="sepia"] { --page:#f1eadf; --surface:#fffaf1; --surface-2:#ece1d1; --ink:#3c342e; --ink-2:#74665b; --muted:#9c8978; --hair:#ded1c1; --accent:#6e5ac2; --accent-ink:#5948a0; --accent-soft:rgba(110,90,194,.13); --rail:#3b3534; --rail-ink:#fffaf1; --rail-muted:#d0c3b7; --rail-line:rgba(255,250,241,.16); }
html, body { background: var(--page); color: var(--ink); }
body { font-family: var(--ui-font); -webkit-font-smoothing: antialiased; }
.panel, .tile { border-color: var(--hair); box-shadow: var(--shadow); }
.page-head h1 { letter-spacing: -.055em; }
.page-head .sub { color: var(--ink-2); }
.seg { border-color: var(--hair); background: var(--surface-2); }
.seg button { color: var(--ink-2); transition: background .18s var(--ease-standard), color .18s var(--ease-standard), transform .18s var(--ease-standard); }
.seg button.on { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgba(25,28,34,.1); }
.btn { border-radius: 9px; font-weight: 650; transition: transform .18s var(--ease-standard), background .18s var(--ease-standard), box-shadow .18s var(--ease-standard); }
.btn:active, .stat-cta:active { transform: translateY(1px) scale(.985); }
.btn.accent { background: var(--accent); box-shadow: 0 7px 18px rgba(93,95,227,.22); }

@media (min-width: 900px) {
  :root { --nav-w: 248px; }
  .nav.linear-nav { width: var(--nav-w) !important; background: var(--rail); border-right: 0; box-shadow: 15px 0 42px rgba(22,23,29,.12); }
  .nav.linear-nav .linear-brand { margin: 0 4px 24px; }
  .nav.linear-nav .workspace-context { border-color: var(--rail-line); background: rgba(255,255,255,.055); }
  .nav.linear-nav .brand-copy strong, .nav.linear-nav .workspace-name b { color: var(--rail-ink); }
  .nav.linear-nav .brand-copy small, .nav.linear-nav .workspace-name small, .nav.linear-nav .nav-section-label, .nav.linear-nav .nav-hint, .nav.linear-nav .nav-sync { color: var(--rail-muted); }
  .nav.linear-nav a:not(.brand-home) { height: 42px; color: var(--rail-muted); border-radius: 9px; }
  .nav.linear-nav a:not(.brand-home):hover { color: var(--rail-ink); background: rgba(255,255,255,.07); }
  .nav.linear-nav a:not(.brand-home).on { color: var(--rail-ink); background: rgba(132,128,242,.2); box-shadow: inset 3px 0 0 #aaa7ff; }
  .nav.linear-nav a:not(.brand-home).on svg { stroke: #bdbaff; }
  .nav.linear-nav .nav-foot { border-top-color: var(--rail-line); }
  .subj-bar { left: var(--nav-w); height: calc(var(--safe-t) + 58px); padding: var(--safe-t) 48px 0; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom-color: var(--hair); }
  .subj-bar button { min-width: 142px; height: 36px; border-radius: 9px; }
  .main { max-width: 1500px; padding-left: calc(var(--nav-w) + 50px); padding-right: 50px; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 58px + 30px); }
  .page-head { margin-bottom: 24px; }
  .page-head h1 { font-size: 32px; }
  .dashboard-stats { border-radius: 18px; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border-radius: 16px; }
  #toc { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; border: 0; }
  .toc-ch { margin: 0; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 4px 16px rgba(26,29,34,.035); }
  .toc-ch.open { grid-column: 1 / -1; }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 76px; padding: 0 16px; border: 0; background: var(--surface); }
  .toc-ch > .hd:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
  .toc-body { background: color-mix(in srgb, var(--surface-2) 38%, var(--surface)); border-top: 1px solid var(--hair); padding: 8px 14px 14px 42px; }
  .toc-sec > .sh { padding: 11px 4px 7px; }
  .toc-card { min-height: 44px; padding: 8px; border-radius: 8px; }
  .toc-card:hover { background: var(--surface); box-shadow: 0 2px 7px rgba(25,28,34,.05); }
}

.dashboard-stats { border: 1px solid rgba(22,24,31,.14); background: #20222b; box-shadow: 0 18px 42px rgba(22,24,31,.14); }
.stat-primary { background: linear-gradient(135deg, #242632, #17181e); }
.stat-grid { background: #292b35; }
.stat-item { border-left-color: rgba(255,255,255,.11); }
.stat-item .eyebrow, .stat-item .stat-caption { color: rgba(247,248,250,.56); }
.stat-item .stat-value { color: #fafaf7; }
.stat-item:nth-child(2) .stat-value { color: #bbb8ff; }
.stat-item:nth-child(3) .stat-value { color: #67c9aa; }
.stat-primary .stat-cta { background: #6e6aee; box-shadow: 0 7px 18px rgba(76,73,187,.35); }
.stat-primary .stat-ring .ring-meter circle:first-child { stroke: rgba(255,255,255,.16) !important; }
.stat-primary .stat-ring .ring-meter circle:last-child { stroke: #aaa7ff !important; }

@media (max-width: 899px) {
  html, body { overflow-x: hidden; }
  .main { max-width: none; padding: calc(var(--safe-t) + 15px) 14px calc(var(--tab-h) + var(--safe-b) + 26px) !important; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 44px + 15px) !important; }
  .subj-bar { height: calc(var(--safe-t) + 44px); padding: var(--safe-t) 13px 0; gap: 7px; background: color-mix(in srgb, var(--surface) 93%, transparent); backdrop-filter: blur(18px); }
  .subject-label { font-size: 9px; letter-spacing: .14em; }
  .subject-tabs { flex: 1; }
  .subject-tabs button { height: 33px; padding: 0 10px; border-radius: 8px 8px 0 0; font-size: 12.5px; }
  .subject-tabs button.on { box-shadow: inset 0 -2px 0 var(--accent); background: transparent; color: var(--ink); }
  .page-head { margin: 2px 1px 14px; gap: 8px; }
  .page-head h1 { font-size: 25px; line-height: 1.1; }
  .page-head .sub { margin-top: 4px; font-size: 11.5px; }
  .dashboard-head .page-head-actions { width: auto; }
  .dashboard-head .page-head-actions .seg button { min-width: 49px; padding: 0 8px; font-size: 0; }
  .dashboard-head .page-head-actions .seg button::after { font-size: 11px; }
  .dashboard-head .page-head-actions .seg button:first-child::after { content: '全部'; }
  .dashboard-head .page-head-actions .seg button:last-child::after { content: '高频'; }
  .dashboard-stats { margin-bottom: 13px; border-radius: 18px; box-shadow: 0 14px 30px rgba(22,24,31,.13); }
  .stat-primary { min-height: 142px; padding: 15px 14px 11px; gap: 13px; }
  .stat-primary-main { grid-template-columns: 52px minmax(0,1fr) auto; gap: 11px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 52px; height: 52px; }
  .stat-primary .stat-value { font-size: 35px; }
  .stat-primary .stat-caption { max-width: 162px; font-size: 10px; }
  .stat-primary .stat-cta { min-height: 36px; padding: 0 10px; font-size: 11px; }
  .stat-primary-bottom { padding-top: 8px; font-size: 10.5px; }
  .stat-next-hint { display: none; }
  .stat-grid { min-height: 70px; }
  .stat-item { min-height: 70px; padding: 10px 9px 8px; }
  .stat-item .stat-value { margin-top: 2px; font-size: 23px; }
  .stat-item .stat-caption { margin-top: 2px; font-size: 9.5px; }
  .dashboard-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .dashboard-grid > .map-panel { order: 1 !important; }
  .dashboard-grid > .chapter-panel { order: 2 !important; }
  .dashboard-grid > .insight-grid { order: 3 !important; grid-template-columns: 1fr !important; }
  .dashboard-grid > .keyword-panel { order: 4 !important; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border: 0 !important; border-top: 1px solid var(--hair) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  .map-panel { padding: 16px 0 13px !important; }
  .chapter-panel { padding: 16px 0 10px !important; }
  .map-panel .panel-head { margin-bottom: 9px; }
  .map-panel .panel-head-actions { justify-content: flex-start; margin-top: 8px; }
  .map-panel .legend { gap: 4px 9px; font-size: 10.5px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .map-panel .legend::-webkit-scrollbar { display: none; }
  .map-expand { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; border-radius: 8px; }
  .tm-mobile-only { padding: 9px 8px 8px; border: 1px solid var(--hair); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 56%, var(--surface)); }
  .hm-wrap { max-height: 176px !important; gap: 7px; }
  .map-is-expanded .hm-wrap { max-height: 390px !important; overflow-y: auto; }
  .chapter-panel .panel-head { margin-bottom: 8px; }
  .chapter-panel .legend { display: none; }
  .chapter-panel .ch-rows { display: grid; grid-template-columns: 1fr !important; }
  .ch-row { min-height: 58px; padding: 8px 2px; }
  .ch-row .name { font-size: 13px; }
  .ch-row .name .no { width: 24px; height: 21px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9px; }
  .nav { z-index: 30; height: calc(var(--tab-h) + var(--safe-b)); background: rgba(23,24,30,.96); border-top: 0; box-shadow: 0 -10px 28px rgba(22,23,29,.16); }
  .nav a, .nav a.on { color: rgba(245,246,247,.55); }
  .nav a.on { color: #fff; }
  .nav a.on svg { stroke: #bdbaff; color: #bdbaff; }
  .nav a.on::before { top: 0; width: 32px; height: 2px; background: #aaa7ff; box-shadow: none; }
  .startbar { left: 10px !important; right: 10px !important; bottom: calc(var(--tab-h) + var(--safe-b) + 9px) !important; padding: 10px !important; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(23,24,30,.97); color: #f7f7f4; box-shadow: 0 16px 34px rgba(22,23,29,.24); max-height: none !important; display: block !important; overflow: visible !important; }
  .startbar .opts { display: grid !important; grid-template-columns: auto minmax(0,1fr); gap: 6px 8px; align-items: center; font-size: 10px; color: rgba(247,247,244,.58); }
  .startbar .opts > span { display: block !important; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
  .startbar .seg { min-width: 0; overflow-x: auto; display: flex; flex-wrap: nowrap; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); scrollbar-width: none; }
  .startbar .seg::-webkit-scrollbar { display: none; }
  .startbar .seg button { flex: none; min-height: 30px; padding: 0 9px; border-color: transparent; color: rgba(247,247,244,.7); background: transparent; font-size: 10.5px; }
  .startbar .seg button.on { color: #fff; background: #625fe2; box-shadow: none; }
  .startbar .row { gap: 8px; padding-top: 8px; margin-top: 2px; border-top: 1px solid rgba(255,255,255,.12); }
  .startbar .count { font-size: 11px; color: rgba(247,247,244,.72); }
  .startbar .count b { color: #fff; font-size: 17px; }
  .startbar .row .btn { height: 40px; min-height: 40px; flex: 1; border-radius: 10px; font-size: 11px; }
  #toc { display: flex !important; flex-direction: column; gap: 9px; border: 0; margin-top: 3px; }
  .toc-ch { margin: 0; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 4px 15px rgba(26,29,34,.035); }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 68px; padding: 0 12px; border: 0; background: var(--surface); }
  .toc-ch > .hd:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
  .toc-ch > .hd .ttl { font-size: 13.5px; line-height: 1.35; }
  .toc-ch > .hd .meta { gap: 6px; font-size: 11px; }
  .toc-body { padding: 5px 8px 10px 30px; border-top: 1px solid var(--hair); background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); }
  .toc-sec > .sh { padding: 9px 4px 5px; font-size: 12px; }
  .toc-card { min-height: 45px; padding: 8px 6px; border-radius: 8px; }
  .toc-card .ct { font-size: 12.5px; }
  .toc-card:hover { background: var(--surface); box-shadow: 0 2px 8px rgba(25,28,34,.05); }
  .settings-head { margin-bottom: 16px; }
  .set-group, .settings-head + .grid > .panel, #view[data-page="settings"] > .panel { border-radius: 15px; background: var(--surface); box-shadow: 0 5px 18px rgba(25,28,34,.045); }
  .set-row { min-height: 62px; padding: 12px 1px; align-items: center; }
  .set-row .lbl { min-width: 110px; font-size: 14px; }
  .set-row .lbl small { max-width: 185px; font-size: 11.5px; line-height: 1.35; }
}
@media (max-width: 380px) {
  .main { padding-left: 11px !important; padding-right: 11px !important; }
  .stat-primary-main { grid-template-columns: 48px minmax(0,1fr) auto; gap: 8px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 48px; height: 48px; }
  .stat-primary .stat-value { font-size: 32px; }
  .stat-primary .stat-caption { max-width: 135px; }
  .toc-ch > .hd, .toc-ch.open > .hd { padding-left: 9px; padding-right: 9px; }
  .toc-ch > .hd .ttl { font-size: 12.8px; }
  .toc-body { padding-left: 26px; }
}

/* Keep source tables, equations, and the four-library switcher usable on phones. */
.study-table-scroll { max-width: 100%; overflow-x: auto; margin: .65em 0 1em; -webkit-overflow-scrolling: touch; }
.study-source-table { min-width: 520px; border-collapse: collapse; font-size: .9em; line-height: 1.55; }
.study-source-table td { min-width: 7em; padding: .42em .58em; border: 1px solid var(--hair); vertical-align: top; }
.study-source-table tr:first-child td { background: var(--surface-2); font-weight: 650; }
.study-table-blank, .study-table-mark { display: block; width: 100%; }
.katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: .25em 0; }
.katex { font-size: 1em; }
.source-image-missing { margin: .75em 0; padding: 12px 14px; border: 1px dashed var(--hair); border-radius: 10px; color: var(--muted); font-size: .86em; background: var(--surface-2); }
@media (max-width: 639px) {
  .subj-bar { overflow: hidden; }
  .subj-bar .subject-label { flex: 0 0 auto; }
  .subj-bar .subject-tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .subj-bar .subject-tabs::-webkit-scrollbar { display: none; }
  .subj-bar .subject-tabs button { flex: 0 0 auto; min-width: 92px; padding-inline: 10px; white-space: nowrap; }
  .subj-bar .subject-status { display: none; }
}

/* ============ MOBILE DENSITY FINISH ============
   Keep the empty dashboard useful without leaving large dead zones, and give
   the directory enough scroll room when its fixed study bar is active. */
@media (max-width: 639px) {
  #view[data-page="dashboard"] #trend .empty,
  #view[data-page="dashboard"] #weak .empty,
  #view[data-page="dashboard"] #kw .empty {
    padding: 12px 8px;
    font-size: 12px;
    line-height: 1.6;
  }

  #view[data-page="dashboard"] .hm-wrap { max-height: 150px !important; }
  #view[data-page="dashboard"] .ch-row { min-height: 54px; padding-top: 6px; padding-bottom: 6px; }

  #view[data-page="browse"] #toc { gap: 6px; }
  #view[data-page="browse"] .toc-ch > .hd,
  #view[data-page="browse"] .toc-ch.open > .hd {
    min-height: 64px;
    padding-left: 11px;
    padding-right: 11px;
  }
  #view[data-page="browse"] .toc-ch > .hd .ttl { font-size: 13.2px; }

  /* The bar overlays the list by design; extra scroll space lets the last
     chapters remain reachable instead of permanently sitting underneath it. */
  #view[data-page="browse"]:has(.startbar.on) {
    padding-bottom: calc(var(--tab-h) + var(--safe-b) + 196px) !important;
  }
  body:has(.startbar.on) { scroll-padding-bottom: calc(var(--tab-h) + var(--safe-b) + 196px); }
}

/* ============ FINAL 2026.09.25 POLISH ============ */
:root {
  --page:#f5f6f8; --surface:#fff; --surface-2:#eef1f5; --ink:#20232b; --ink-2:#626977;
  --muted:#939aa7; --hair:#dde2e9; --ring:rgba(32,35,43,.075); --accent:#5c58d6;
  --accent-ink:#4945ad; --accent-soft:rgba(92,88,214,.12); --good:#259b79; --signal:#259b79;
  --warn:#c5843b; --bad:#c65a67; --rail:#1c1e24; --rail-ink:#f6f7fa; --rail-muted:#a4a8b3;
  --rail-line:rgba(255,255,255,.12); --shadow:0 1px 2px rgba(29,34,44,.045),0 18px 42px rgba(29,34,44,.065);
  --ease-standard:cubic-bezier(.22,.72,.2,1);
}
:root[data-theme="sepia"] {
  --page:#f3f0eb; --surface:#fffdfa; --surface-2:#eeeae3; --ink:#292b31; --ink-2:#656a74;
  --muted:#92908c; --hair:#e0dcd5; --ring:rgba(39,40,45,.075); --accent:#5f5bd1;
  --accent-ink:#4d49ac; --accent-soft:rgba(95,91,209,.12); --rail:#24252b; --rail-ink:#fafaf8;
  --rail-muted:#aeb0b9; --rail-line:rgba(255,255,255,.13); --shadow:0 1px 2px rgba(39,40,45,.045),0 18px 42px rgba(39,40,45,.055);
}
:root[data-theme="dark"] {
  --page:#121419; --surface:#1b1e25; --surface-2:#252932; --ink:#f1f3f6; --ink-2:#c0c4ce;
  --muted:#8d94a1; --hair:#343944; --ring:rgba(255,255,255,.09); --accent:#9a96ff;
  --accent-ink:#bdb9ff; --accent-soft:rgba(154,150,255,.16); --rail:#0e1015; --rail-ink:#f7f8fb;
  --rail-muted:#a1a6b2; --rail-line:rgba(255,255,255,.13); --shadow:0 1px 2px rgba(0,0,0,.24),0 20px 46px rgba(0,0,0,.2);
}
html, body { background:var(--page); color:var(--ink); }
body { font-family:var(--ui-font); letter-spacing:0; }
.panel, .tile { border-color:var(--hair); box-shadow:var(--shadow); }
.panel { border-radius:15px; }
.page-kicker, .panel-kicker { color:var(--muted); letter-spacing:.13em; }
.page-head h1 { letter-spacing:-.055em; }
.seg { border-color:var(--hair); background:var(--surface-2); }
.seg button { color:var(--ink-2); transition:background .18s var(--ease-standard),color .18s var(--ease-standard),box-shadow .18s var(--ease-standard); }
.seg button.on { color:var(--ink); background:var(--surface); box-shadow:0 1px 3px rgba(29,34,44,.1); }
.btn { border-radius:9px; font-weight:650; transition:transform .16s var(--ease-standard),background .18s var(--ease-standard),box-shadow .18s var(--ease-standard); }
.btn.accent { background:var(--accent); box-shadow:0 8px 18px rgba(92,88,214,.22); }
.btn.ghost { background:var(--surface); }

.dashboard-stats { border:1px solid rgba(26,29,37,.14); border-radius:18px; background:#232630; box-shadow:0 18px 44px rgba(30,32,42,.16); }
.stat-primary { background:#232630; }
.stat-grid { background:#2a2d37; }
.stat-item { border-left-color:rgba(255,255,255,.1); }
.stat-item .eyebrow, .stat-item .stat-caption { color:rgba(247,248,251,.56); }
.stat-item .stat-value { color:#fafaf7; }
.stat-item:nth-child(2) .stat-value { color:#c0bdff; }
.stat-item:nth-child(3) .stat-value { color:#6bd0ae; }
.stat-primary .stat-cta { background:#6c67e8; }

.toc-ch > .hd:hover { background:var(--surface-2); }
.toc-card:hover { background:var(--surface); box-shadow:0 2px 8px rgba(29,34,44,.06); }
.startbar { border-color:rgba(255,255,255,.13); border-radius:15px; box-shadow:0 20px 48px rgba(24,26,33,.2); }
.study { isolation:isolate; opacity:1; background:var(--page); animation:none; }
.study-top { border-bottom:1px solid var(--hair); background:var(--surface); }
.study-scroll { background:var(--page); }
.sheet.enter { animation:none; }
.hm-wrap .hm-cell, .hm-wrap .hm-ch-block { animation:none !important; }

@media (min-width:900px) {
  :root { --nav-w:252px; }
  .nav.linear-nav { width:var(--nav-w); background:var(--rail); border-right:0; box-shadow:18px 0 46px rgba(21,24,31,.14); }
  .nav.linear-nav .linear-brand { margin:0 8px 28px; }
  .nav.linear-nav .workspace-context { background:rgba(255,255,255,.065); border-color:var(--rail-line); }
  .nav.linear-nav .brand-copy strong, .nav.linear-nav .workspace-name b { color:var(--rail-ink); }
  .nav.linear-nav .brand-copy small, .nav.linear-nav .workspace-name small, .nav.linear-nav .nav-section-label, .nav.linear-nav .nav-hint, .nav.linear-nav .nav-sync { color:var(--rail-muted); }
  .nav.linear-nav a:not(.brand-home) { height:42px; min-height:42px; color:var(--rail-muted); border-radius:10px; }
  .nav.linear-nav a:not(.brand-home):hover { color:var(--rail-ink); background:rgba(255,255,255,.07); }
  .nav.linear-nav a:not(.brand-home).on { color:var(--rail-ink); background:rgba(128,124,235,.2); box-shadow:inset 3px 0 0 #aaa7ff; }
  .nav.linear-nav a:not(.brand-home).on svg { stroke:#bdbaff; }
  .nav.linear-nav .nav-foot { border-top-color:var(--rail-line); }
  .subj-bar { left:var(--nav-w); height:calc(var(--safe-t) + 58px); padding:var(--safe-t) clamp(30px,4vw,56px) 0; background:var(--surface); border-bottom:1px solid var(--hair); }
  .subj-bar button { min-width:132px; height:36px; border-radius:9px; }
  .main { width:calc(100% - var(--nav-w)); max-width:1420px; margin:0 0 0 var(--nav-w); padding:calc(var(--safe-t) + 26px) clamp(30px,4vw,62px) 72px; }
  .main.has-subj-bar { padding-top:calc(var(--safe-t) + 58px + 30px); }
  .page-head { margin-bottom:26px; }
  .page-head h1 { font-size:32px; line-height:1.08; }
  .dashboard-grid { grid-template-columns:minmax(0,1.35fr) minmax(320px,.8fr); gap:20px; }
  .dashboard-grid > .map-panel { grid-column:1; grid-row:1; }
  .dashboard-grid > .chapter-panel { grid-column:2; grid-row:1; }
  .dashboard-grid > .insight-grid { grid-column:1 / -1; grid-row:2; }
  .dashboard-grid > .keyword-panel { grid-column:1 / -1; grid-row:3; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border-radius:16px; }
  .chapter-panel .ch-rows { max-height:562px; }
  #toc { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .toc-ch { border-radius:14px; border-color:var(--hair); box-shadow:0 5px 18px rgba(29,34,44,.04); }
  .toc-ch.open { grid-column:1 / -1; }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height:72px; padding:0 16px; background:var(--surface); }
  .toc-body { padding:8px 14px 14px 42px; background:var(--surface-2); border-top:1px solid var(--hair); }
}

@media (max-width:899px) {
  html, body { overflow-x:hidden; }
  .main { max-width:none; padding:calc(var(--safe-t) + 16px) 14px calc(var(--tab-h) + var(--safe-b) + 28px) !important; }
  .main.has-subj-bar { padding-top:calc(var(--safe-t) + 44px + 16px) !important; }
  .subj-bar { height:calc(var(--safe-t) + 44px); padding:var(--safe-t) 13px 0; gap:8px; background:var(--surface); border-bottom:1px solid var(--hair); }
  .subject-label { font-size:9px; letter-spacing:.14em; }
  .subject-tabs { flex:1; min-width:0; }
  .subject-tabs button { height:33px; border-radius:8px 8px 0 0; font-size:12.5px; }
  .subject-tabs button.on { background:var(--accent-soft); color:var(--accent-ink); box-shadow:inset 0 -2px 0 var(--accent); }
  .page-head { margin:1px 1px 15px; gap:8px; }
  .page-head h1 { font-size:27px; line-height:1.1; }
  .page-head .sub { font-size:11.5px; margin-top:4px; }
  .dashboard-head .page-head-actions { width:auto; margin-top:0; }
  .dashboard-head .page-head-actions .seg { width:auto; }
  .dashboard-head .page-head-actions .seg button { min-width:49px; padding:0 9px; font-size:0; }
  .dashboard-head .page-head-actions .seg button::after { font-size:11px; }
  .dashboard-head .page-head-actions .seg button:first-child::after { content:'全部'; }
  .dashboard-head .page-head-actions .seg button:last-child::after { content:'高频'; }
  .dashboard-stats { margin-bottom:16px; border-radius:17px; }
  .stat-primary { min-height:140px; padding:15px 15px 11px; gap:12px; }
  .stat-primary-main { grid-template-columns:52px minmax(0,1fr) auto; gap:10px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width:52px; height:52px; }
  .stat-primary .stat-value { font-size:35px; }
  .stat-primary .stat-caption { max-width:160px; font-size:10px; }
  .stat-primary .stat-cta { min-height:36px; padding:0 10px; border-radius:9px; font-size:11px; }
  .stat-next-hint { display:none; }
  .stat-grid { min-height:68px; }
  .stat-item { min-height:68px; padding:10px 9px 8px; }
  .stat-item .stat-value { font-size:23px; }
  .stat-item .stat-caption { font-size:9.5px; }
  .dashboard-grid { display:flex !important; flex-direction:column !important; gap:0 !important; }
  .dashboard-grid > .map-panel { order:1 !important; }
  .dashboard-grid > .chapter-panel { order:2 !important; }
  .dashboard-grid > .insight-grid { order:3 !important; }
  .dashboard-grid > .keyword-panel { order:4 !important; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border:0 !important; border-top:1px solid var(--hair) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; padding:16px 1px 13px !important; }
  .map-panel .legend { gap:4px 9px; font-size:10px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .map-panel .legend::-webkit-scrollbar { display:none; }
  .tm-mobile-only { padding:9px 8px 8px; border:1px solid var(--hair); border-radius:13px; background:var(--surface-2); }
  .hm-wrap { max-height:184px !important; gap:7px; }
  .map-is-expanded .hm-wrap { max-height:390px !important; }
  .chapter-panel .legend { display:none; }
  .chapter-panel .ch-rows { grid-template-columns:1fr !important; }
  .ch-row { min-height:53px; grid-template-columns:minmax(0,1fr) 44px; gap:2px 9px; padding:7px 1px; }
  .ch-row .name { font-size:13px; line-height:1.25; }
  .ch-row .name .no { width:23px; height:20px; border-radius:6px; }
  .nav { z-index:30; height:calc(var(--tab-h) + var(--safe-b)); background:rgba(28,30,36,.97); border-top:0; box-shadow:0 -12px 30px rgba(18,20,26,.2); }
  .nav a, .nav a.on { color:rgba(247,248,251,.56); }
  .nav a.on { color:#fff; }
  .nav a.on svg { color:#bdbaff; stroke:#bdbaff; }
  .nav a.on::before { top:0; width:34px; height:2px; background:#aaa7ff; box-shadow:none; }
  .startbar { left:10px !important; right:10px !important; bottom:calc(var(--tab-h) + var(--safe-b) + 9px) !important; padding:10px !important; border-radius:15px; background:rgba(28,30,36,.98); }
  .startbar .seg { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); }
  .startbar .seg button { min-height:30px; padding:0 9px; font-size:10.5px; color:rgba(247,248,251,.7); }
  .startbar .seg button.on { background:#6864e3; color:#fff; }
  .startbar .row .btn { min-height:40px; height:40px; border-radius:10px; }
  #toc { display:flex !important; flex-direction:column; gap:8px; margin-top:2px; }
  .toc-ch { border-radius:13px; border-color:var(--hair); box-shadow:0 4px 14px rgba(29,34,44,.04); }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height:57px; padding:0 11px; }
  .toc-ch > .hd .ttl { font-size:13px; line-height:1.3; }
  .toc-ch > .hd .meta { gap:5px; font-size:10px; }
  .toc-ch > .hd .meta .mbar { width:34px; }
  .toc-body { padding:5px 7px 9px 28px; border-top:1px solid var(--hair); background:var(--surface-2); }
  .toc-sec > .sh { padding:8px 4px 5px; font-size:11.5px; }
  .toc-card { min-height:42px; padding:7px 5px; border-radius:8px; }
  .toc-card .ct { font-size:12px; }
  .set-group { padding:16px 15px 10px; }
  .set-row { min-height:58px; gap:10px; }
  .set-row .lbl { font-size:13px; }
  .set-row .lbl small { font-size:10px; line-height:1.3; }
  .settings-head { margin-bottom:14px; }
  .study-top { padding:calc(9px + var(--safe-t)) 12px 9px; gap:9px; }
  .study-top .x { width:40px; height:40px; }
  .study-top .tools button { width:36px; height:36px; }
  .sheet { padding:20px 24px 72px; line-height:1.9; }
  .sheet h1 { font-size:1.34em; margin-bottom:19px; }
  .study-bar { padding:10px 12px calc(11px + var(--safe-b)); }
  .bigbtn { height:52px; border-radius:11px; font-size:15px; }
  .grades { gap:7px; }
  .grade { height:58px; border-radius:11px; font-size:14px; }
}

@media (max-width:380px) {
  .stat-primary-main { grid-template-columns:46px minmax(0,1fr) auto; gap:8px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width:46px; height:46px; }
  .stat-primary .stat-value { font-size:31px; }
  .stat-primary .stat-caption { max-width:132px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition-duration:.001ms !important; }
}

/* ============ 2026-09-25 final product pass ============
   One last, intentionally small design system sits after the historical
   layers above.  It gives the workspace a stable visual language without
   touching the map drawing or study behaviour. */
:root {
  --page: #f5f6f4;
  --surface: #ffffff;
  --surface-2: #eef0ee;
  --ink: #171922;
  --ink-2: #5c606c;
  --muted: #8c919c;
  --hair: #e0e4e1;
  --accent: #5d5fe3;
  --accent-ink: #4749b3;
  --accent-soft: rgba(93,95,227,.12);
  --good: #2eaa89;
  --signal: #2eaa89;
  --warn: #c8893b;
  --bad: #c25761;
  --rail: #17181e;
  --rail-ink: #f5f6f7;
  --rail-muted: #9da1ad;
  --rail-line: rgba(255,255,255,.12);
  --shadow: 0 1px 2px rgba(25,28,34,.04), 0 14px 34px rgba(25,28,34,.055);
  --ease-standard: cubic-bezier(.2,.75,.25,1);
}
:root[data-theme="dark"] {
  --page: #111216; --surface: #1a1b21; --surface-2: #25262e;
  --ink: #f5f5f1; --ink-2: #c2c4cc; --muted: #8e919c; --hair: #33353d;
  --accent: #9b98ff; --accent-ink: #c0bdff; --accent-soft: rgba(155,152,255,.16);
  --good: #5dc8a5; --signal: #5dc8a5; --warn: #e1ad60; --bad: #eb7c86;
  --rail: #0b0c10; --rail-ink: #f5f5f1; --rail-muted: #a4a7b2; --rail-line: rgba(255,255,255,.13);
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 18px 42px rgba(0,0,0,.18);
}
:root[data-theme="sepia"] {
  --page: #f1eadf; --surface: #fffaf1; --surface-2: #ece1d1;
  --ink: #3c342e; --ink-2: #74665b; --muted: #9c8978; --hair: #ded1c1;
  --accent: #6e5ac2; --accent-ink: #5948a0; --accent-soft: rgba(110,90,194,.13);
  --rail: #3b3534; --rail-ink: #fffaf1; --rail-muted: #d0c3b7; --rail-line: rgba(255,250,241,.16);
}

html, body { background: var(--page); color: var(--ink); }
body { font-family: var(--ui-font); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel, .tile { border-color: var(--hair); box-shadow: var(--shadow); }
.panel h2 { letter-spacing: -.035em; }
.page-head h1 { letter-spacing: -.055em; }
.page-head .sub { color: var(--ink-2); }
.page-kicker, .panel-kicker { color: var(--muted); letter-spacing: .16em; }
.seg { border-color: var(--hair); background: var(--surface-2); }
.seg button { color: var(--ink-2); transition: background .18s var(--ease-standard), color .18s var(--ease-standard), transform .18s var(--ease-standard); }
.seg button.on { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgba(25,28,34,.1); }
.btn { border-radius: 9px; font-weight: 650; transition: transform .18s var(--ease-standard), background .18s var(--ease-standard), box-shadow .18s var(--ease-standard); }
.btn:active, .stat-cta:active { transform: translateY(1px) scale(.985); }
.btn.accent { background: var(--accent); box-shadow: 0 7px 18px rgba(93,95,227,.22); }
.btn.accent:hover { background: var(--accent-ink); }

/* Desktop workspace: quiet paper, high-contrast rail, compact command header. */
@media (min-width: 900px) {
  :root { --nav-w: 248px; }
  .nav.linear-nav { width: var(--nav-w); background: var(--rail); border-right: 0; box-shadow: 15px 0 42px rgba(22,23,29,.12); }
  .nav.linear-nav .linear-brand { margin: 0 4px 24px; }
  .nav.linear-nav .workspace-context { border-color: var(--rail-line); background: rgba(255,255,255,.055); }
  .nav.linear-nav .brand-copy strong, .nav.linear-nav .workspace-name b { color: var(--rail-ink); }
  .nav.linear-nav .brand-copy small, .nav.linear-nav .workspace-name small,
  .nav.linear-nav .nav-section-label, .nav.linear-nav .nav-hint, .nav.linear-nav .nav-sync { color: var(--rail-muted); }
  .nav.linear-nav a:not(.brand-home) { height: 42px; color: var(--rail-muted); border-radius: 9px; }
  .nav.linear-nav a:not(.brand-home):hover { color: var(--rail-ink); background: rgba(255,255,255,.07); }
  .nav.linear-nav a:not(.brand-home).on { color: var(--rail-ink); background: rgba(132,128,242,.2); box-shadow: inset 3px 0 0 #aaa7ff; }
  .nav.linear-nav a:not(.brand-home).on svg { stroke: #bdbaff; }
  .nav.linear-nav .nav-foot { border-top-color: var(--rail-line); }
  .subj-bar { left: var(--nav-w); height: calc(var(--safe-t) + 58px); padding: var(--safe-t) 48px 0; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom-color: var(--hair); }
  .subj-bar button { min-width: 142px; height: 36px; border-radius: 9px; }
  .main { max-width: 1500px; padding-left: calc(var(--nav-w) + 50px); padding-right: 50px; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 58px + 30px); }
  .page-head { margin-bottom: 24px; }
  .page-head h1 { font-size: 32px; }
  .dashboard-stats { border-radius: 18px; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border-radius: 16px; }

  /* Directory is a chapter board: two compact columns, open chapter spans both. */
  #toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 0; }
  .toc-ch { margin: 0; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 4px 16px rgba(26,29,34,.035); }
  .toc-ch.open { grid-column: 1 / -1; }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 76px; padding: 0 16px; border: 0; background: var(--surface); }
  .toc-ch > .hd:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
  .toc-ch > .hd .ttl { font-size: 14px; }
  .toc-body { background: color-mix(in srgb, var(--surface-2) 38%, var(--surface)); border-top: 1px solid var(--hair); padding: 8px 14px 14px 42px; }
  .toc-sec > .sh { padding: 11px 4px 7px; }
  .toc-card { min-height: 44px; padding: 8px 8px; border-radius: 8px; }
  .toc-card:hover { background: var(--surface); box-shadow: 0 2px 7px rgba(25,28,34,.05); }
}

/* Shared summary surface. The hierarchy is carried by spacing and contrast,
   so the page remains calm even when the map contains hundreds of cells. */
.dashboard-stats { border: 1px solid rgba(22,24,31,.14); background: #20222b; box-shadow: 0 18px 42px rgba(22,24,31,.14); }
.stat-primary { background: linear-gradient(135deg, #242632, #17181e); }
.stat-grid { background: #292b35; }
.stat-item { border-left-color: rgba(255,255,255,.11); }
.stat-item .eyebrow, .stat-item .stat-caption { color: rgba(247,248,250,.56); }
.stat-item .stat-value { color: #fafaf7; }
.stat-item:nth-child(2) .stat-value { color: #bbb8ff; }
.stat-item:nth-child(3) .stat-value { color: #67c9aa; }
.stat-primary .stat-cta { background: #6e6aee; box-shadow: 0 7px 18px rgba(76,73,187,.35); }
.stat-primary .stat-cta:hover { background: #7c78f7; }
.stat-primary .stat-ring .ring-meter circle:first-child { stroke: rgba(255,255,255,.16) !important; }
.stat-primary .stat-ring .ring-meter circle:last-child { stroke: #aaa7ff !important; }

/* Mobile: one scroll surface, large enough controls, and a restrained bottom rail. */
@media (max-width: 899px) {
  html, body { overflow-x: hidden; }
  .main { max-width: none; padding: calc(var(--safe-t) + 15px) 14px calc(var(--tab-h) + var(--safe-b) + 26px); }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 44px + 15px); }
  .subj-bar { height: calc(var(--safe-t) + 44px); padding: var(--safe-t) 13px 0; gap: 7px; background: color-mix(in srgb, var(--surface) 93%, transparent); backdrop-filter: blur(18px); }
  .subject-label { font-size: 9px; letter-spacing: .14em; }
  .subject-tabs { flex: 1; }
  .subject-tabs button { height: 33px; padding: 0 10px; border-radius: 8px 8px 0 0; font-size: 12.5px; }
  .subject-tabs button.on { box-shadow: inset 0 -2px 0 var(--accent); background: transparent; color: var(--ink); }
  .page-head { margin: 2px 1px 14px; gap: 8px; }
  .page-head h1 { font-size: 25px; line-height: 1.1; }
  .page-head .sub { margin-top: 4px; font-size: 11.5px; }
  .dashboard-head .page-head-actions { width: auto; }
  .dashboard-head .page-head-actions .seg button { min-width: 49px; padding: 0 8px; font-size: 0; }
  .dashboard-head .page-head-actions .seg button::after { font-size: 11px; }
  .dashboard-head .page-head-actions .seg button:first-child::after { content: '全部'; }
  .dashboard-head .page-head-actions .seg button:last-child::after { content: '高频'; }
  .dashboard-stats { margin-bottom: 13px; border-radius: 18px; box-shadow: 0 14px 30px rgba(22,24,31,.13); }
  .stat-primary { min-height: 142px; padding: 15px 14px 11px; gap: 13px; }
  .stat-primary-top { gap: 8px; }
  .stat-context { font-size: 10px; }
  .stat-primary-main { grid-template-columns: 52px minmax(0,1fr) auto; gap: 11px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 52px; height: 52px; }
  .stat-primary .stat-value { font-size: 35px; }
  .stat-primary .stat-caption { max-width: 162px; font-size: 10px; }
  .stat-primary .stat-cta { min-height: 36px; padding: 0 10px; font-size: 11px; }
  .stat-primary-bottom { padding-top: 8px; font-size: 10.5px; }
  .stat-next-hint { display: none; }
  .stat-grid { min-height: 70px; }
  .stat-item { min-height: 70px; padding: 10px 9px 8px; }
  .stat-item .eyebrow { font-size: 10px; }
  .stat-item .stat-value { margin-top: 2px; font-size: 23px; }
  .stat-item .stat-caption { margin-top: 2px; font-size: 9.5px; }
  .dashboard-grid { display: flex; flex-direction: column; gap: 0; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: transparent; box-shadow: none; }
  .map-panel { order: 1; padding: 16px 0 13px; }
  .chapter-panel { order: 2; padding: 16px 0 10px; }
  .insight-grid { order: 3; gap: 0; }
  .keyword-panel { order: 4; padding: 15px 0 12px; }
  .map-panel .panel-head { margin-bottom: 9px; }
  .map-panel .panel-head-actions { justify-content: flex-start; margin-top: 8px; }
  .map-panel .legend { gap: 4px 9px; font-size: 10.5px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .map-panel .legend::-webkit-scrollbar { display: none; }
  .map-expand { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; border-radius: 8px; }
  .tm-mobile-only { padding: 9px 8px 8px; border: 1px solid var(--hair); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 56%, var(--surface)); }
  .hm-wrap { max-height: 176px; gap: 7px; }
  .map-is-expanded .hm-wrap { max-height: 390px; overflow-y: auto; }
  .map-panel .hint { margin-top: 8px !important; font-size: 10.5px; line-height: 1.4; }
  .chapter-panel .panel-head { margin-bottom: 8px; }
  .chapter-panel .legend { display: none; }
  .chapter-panel .ch-rows { display: grid; grid-template-columns: 1fr; }
  .ch-row { min-height: 58px; padding: 8px 2px; border-top-color: var(--hair); }
  .ch-row .name { font-size: 13px; }
  .ch-row .name .no { width: 24px; height: 21px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9px; }
  .ch-row .pct { font-size: 12px; }
  .mbar, .stack { height: 5px; }
  .trend-panel, .weak-panel { padding: 15px 0 12px; }
  .trend-panel .panel-head, .weak-panel .panel-head { margin-bottom: 9px; }
  .weak-item { padding: 9px 0; }
  .keyword-panel .panel-head { margin-bottom: 8px; }
  .nav { z-index: 30; height: calc(var(--tab-h) + var(--safe-b)); background: rgba(23,24,30,.96); border-top: 0; box-shadow: 0 -10px 28px rgba(22,23,29,.16); }
  .nav a, .nav a.on { color: rgba(245,246,247,.55); }
  .nav a.on { color: #fff; }
  .nav a svg { width: 21px; height: 21px; }
  .nav a.on svg { stroke: #bdbaff; color: #bdbaff; }
  .nav a.on::before { top: 0; width: 32px; height: 2px; background: #aaa7ff; box-shadow: none; }

  /* Selection dock: two compact controls rows with a single clear action. */
  .startbar { left: 10px; right: 10px; bottom: calc(var(--tab-h) + var(--safe-b) + 9px); padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(23,24,30,.97); color: #f7f7f4; box-shadow: 0 16px 34px rgba(22,23,29,.24); }
  .startbar .opts { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 8px; align-items: center; font-size: 10px; color: rgba(247,247,244,.58); }
  .startbar .opts > span { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
  .startbar .seg { min-width: 0; overflow-x: auto; display: flex; flex-wrap: nowrap; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); scrollbar-width: none; }
  .startbar .seg::-webkit-scrollbar { display: none; }
  .startbar .seg button { flex: none; min-height: 30px; padding: 0 9px; border-color: transparent; color: rgba(247,247,244,.7); background: transparent; font-size: 10.5px; }
  .startbar .seg button.on { color: #fff; background: #625fe2; box-shadow: none; }
  .startbar .row { gap: 8px; padding-top: 8px; margin-top: 2px; border-top: 1px solid rgba(255,255,255,.12); }
  .startbar .count { font-size: 11px; color: rgba(247,247,244,.72); }
  .startbar .count b { color: #fff; font-size: 17px; }
  .startbar .row .btn { height: 40px; min-height: 40px; flex: 1; border-radius: 10px; font-size: 11px; }

  /* Directory: a chapter board with clear open/closed states. */
  #toc { display: flex; flex-direction: column; gap: 9px; border: 0; margin-top: 3px; }
  .toc-ch { margin: 0; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 4px 15px rgba(26,29,34,.035); }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 68px; padding: 0 12px; border: 0; background: var(--surface); }
  .toc-ch > .hd:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
  .toc-ch > .hd .ttl { font-size: 13.5px; line-height: 1.35; }
  .toc-ch > .hd .meta { gap: 6px; font-size: 11px; }
  .toc-ch > .hd .meta .mbar { width: 38px; }
  .toc-body { padding: 5px 8px 10px 30px; border-top: 1px solid var(--hair); background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); }
  .toc-sec > .sh { padding: 9px 4px 5px; font-size: 12px; }
  .toc-card { min-height: 45px; padding: 8px 6px; border-radius: 8px; }
  .toc-card .ct { font-size: 12.5px; }
  .toc-card:hover { background: var(--surface); box-shadow: 0 2px 8px rgba(25,28,34,.05); }
  .browse-head .page-head-actions .btn { min-height: 36px; }

  /* Settings: rows remain readable at 320–430px and controls never squeeze labels. */
  .settings-head { margin-bottom: 16px; }
  .set-group, .settings-head + .grid > .panel, #view[data-page="settings"] > .panel { border-radius: 15px; background: var(--surface); box-shadow: 0 5px 18px rgba(25,28,34,.045); }
  .set-row { min-height: 62px; padding: 12px 1px; align-items: center; }
  .set-row .lbl { min-width: 110px; font-size: 14px; }
  .set-row .lbl small { max-width: 185px; font-size: 11.5px; line-height: 1.35; }
  .set-row .seg { max-width: 100%; }
  .set-row .seg button { min-height: 36px; padding: 0 10px; font-size: 12px; }
}

@media (max-width: 380px) {
  .main { padding-left: 11px; padding-right: 11px; }
  .stat-primary-main { grid-template-columns: 48px minmax(0,1fr) auto; gap: 8px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 48px; height: 48px; }
  .stat-primary .stat-value { font-size: 32px; }
  .stat-primary .stat-caption { max-width: 135px; }
  .toc-ch > .hd, .toc-ch.open > .hd { padding-left: 9px; padding-right: 9px; }
  .toc-ch > .hd .ttl { font-size: 12.8px; }
  .toc-body { padding-left: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .seg button, .toc-card, .ch-row, .nav a, .stat-cta { transition: none !important; }
}

/* ============ PRODUCT PASS: final cascade ============
   Surrounding layout only; map rendering and interaction code stay intact. */
:root {
  --page: #f5f5f2; --surface: #fff; --surface-2: #eeefec;
  --ink: #202126; --ink-2: #686a74; --muted: #9496a0; --hair: #dedfdc;
  --accent: #5c59d8; --accent-ink: #4845b1; --accent-soft: rgba(92,89,216,.11);
  --good: #2a9a7d; --signal: #2a9a7d;
  --shadow: 0 1px 2px rgba(28,30,36,.04), 0 12px 30px rgba(28,30,36,.055);
}
:root[data-theme="dark"] {
  --page: #141519; --surface: #1c1d22; --surface-2: #282930;
  --ink: #f3f3ee; --ink-2: #c4c5cb; --muted: #8f919c; --hair: #35363e;
  --accent: #9b98ff; --accent-ink: #c0bdff; --accent-soft: rgba(155,152,255,.15);
  --good: #67c8a9; --signal: #67c8a9;
  --shadow: 0 1px 2px rgba(0,0,0,.24), 0 18px 40px rgba(0,0,0,.18);
}
body { background: var(--page); }
.main { max-width: 1460px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-weight: 730; letter-spacing: -.045em; }
.page-head .sub { color: var(--ink-2); }
.panel { border: 1px solid var(--hair); box-shadow: var(--shadow); }
.panel h2 { font-weight: 700; letter-spacing: -.03em; }

.dashboard-stats {
  overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 10%, var(--hair));
  border-radius: 16px; background: var(--surface); box-shadow: 0 12px 30px rgba(29,31,38,.07);
}
.stat-primary { position: relative; isolation: isolate; background: #252731; border-right: 0; border-left: 3px solid #8f8bff; }
.stat-primary::after {
  content: ''; position: absolute; z-index: -1; width: 180px; height: 180px; right: -76px; top: -82px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(255,255,255,.025), 0 0 0 36px rgba(255,255,255,.018); pointer-events: none;
}
.stat-grid { background: var(--surface); }
.stat-item { border-left-color: var(--hair); }
.stat-item .eyebrow, .stat-item .stat-caption { color: var(--muted); }
.stat-item .stat-value { color: var(--ink); }
.stat-item:nth-child(2) .stat-value { color: var(--accent-ink); }
.stat-item:nth-child(3) .stat-value { color: var(--good); }
.stat-item:nth-child(3) .stat-caption { color: color-mix(in srgb, var(--good) 75%, var(--muted)); }

@media (min-width: 900px) {
  .dashboard-stats { grid-template-columns: minmax(440px,1.08fr) minmax(0,1.42fr); min-height: 172px; }
  .stat-primary { padding-left: 25px; }
  .dashboard-grid { grid-template-columns: minmax(0,1.38fr) minmax(350px,.86fr); gap: 20px; }
  .dashboard-grid > .map-panel { grid-column: 1; grid-row: 1; }
  .dashboard-grid > .chapter-panel { grid-column: 2; grid-row: 1; }
  .dashboard-grid > .insight-grid { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; grid-row: 3; }
  .map-panel, .chapter-panel { min-height: 100%; }
  .chapter-panel .ch-rows { max-height: 560px; }
}

@media (max-width: 899px) {
  .dashboard-grid { display: flex; flex-direction: column; gap: 0; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel {
    border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: transparent; box-shadow: none;
  }
  .map-panel { order: 1; margin: 0 -2px; padding: 17px 2px 15px; }
  .chapter-panel { order: 2; padding: 17px 2px 14px; }
  .insight-grid { order: 3; gap: 0; grid-template-columns: 1fr; }
  .keyword-panel { order: 4; }
  .map-panel .panel-head { margin-bottom: 10px; }
  .map-panel .panel-head-actions { gap: 8px; }
  .chapter-panel .panel-head { margin-bottom: 9px; }
  .chapter-panel .legend { display: none; }
  .chapter-panel .ch-rows { grid-template-columns: 1fr; }
  .ch-row {
    min-height: 57px; padding: 9px 3px 10px;
    border-top-color: color-mix(in srgb, var(--hair) 86%, transparent);
    border-left: 3px solid transparent; border-radius: 0 8px 8px 0;
    transition: background-color .14s ease, border-color .14s ease;
  }
  .ch-row:hover, .ch-row:focus-visible { background: var(--surface-2); border-left-color: var(--accent); }
  .ch-row .name { font-size: 13.5px; font-weight: 560; }
  .ch-row .name .no { display: inline-grid; place-items: center; width: 28px; height: 22px; margin-right: 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 10px; font-weight: 700; }
  .ch-row .pct { font-size: 12px; font-weight: 700; }
  .mbar, .stack { height: 5px; }
}

@media (max-width: 479px) {
  .main { padding-left: 12px; padding-right: 12px; }
  .page-head { margin: 2px 1px 13px; }
  .page-head h1 { font-size: 25px; }
  .page-head .sub { font-size: 11px; }
  .dashboard-stats { border-radius: 15px; }
  .stat-primary { min-height: 148px; padding: 14px 13px 11px 12px; gap: 12px; }
  .stat-primary-main { grid-template-columns: 49px minmax(0,1fr) auto; gap: 10px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 49px; height: 49px; }
  .stat-primary .stat-value { font-size: 34px; }
  .stat-primary .stat-caption { max-width: 170px; font-size: 10px; }
  .stat-primary .stat-cta { min-height: 34px; padding: 0 10px; font-size: 11px; }
  .stat-context { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
  .stat-grid { min-height: 68px; }
  .stat-item { min-height: 68px; padding: 10px 8px 8px; }
  .stat-item .eyebrow { font-size: 10px; }
  .stat-item .stat-value { font-size: 22px; }
  .stat-item .stat-caption { font-size: 9.5px; }
  .map-panel { padding-top: 16px; }
  .tm-mobile-only { border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); }
  .hm-wrap { max-height: 196px; }
  .map-is-expanded .hm-wrap { max-height: 380px; }
  .trend-panel .panel-head, .weak-panel .panel-head { display: flex; }
  .trend-panel .panel-head .hint { margin-top: 0; }
}

#toc { border-top: 1px solid var(--hair); }
.toc-ch { margin: 0; border-bottom: 1px solid var(--hair); }
.toc-ch > .hd, .toc-ch.open > .hd { min-height: 62px; padding: 0 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.toc-ch > .hd:hover { background: var(--surface-2); }
.toc-ch > .hd .ttl { font-weight: 650; }
.toc-body { padding: 5px 0 12px 30px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.toc-sec > .sh { padding: 10px 6px 6px; }
.toc-card { min-height: 42px; padding: 8px 6px; border-radius: 7px; }
.toc-card .ct { font-size: 13.5px; }
@media (max-width: 639px) {
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 58px; padding: 0 3px; }
  .toc-ch > .hd { grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px; }
  .toc-ch > .hd .ttl { font-size: 14px; }
  .toc-ch > .hd .meta { gap: 6px; font-size: 11px; }
  .toc-ch > .hd .meta .mbar { width: 48px; }
  .toc-body { padding-left: 22px; }
  .toc-sec > .sh { grid-template-columns: 22px minmax(0,1fr) auto; gap: 7px; padding: 9px 4px 5px; font-size: 12.5px; }
  .toc-card { grid-template-columns: 22px minmax(0,1fr) auto; gap: 7px; padding: 8px 4px; }
  .toc-card .ct { font-size: 13px; }
  .toc-card .ct .pp { display: none; }
  .toc-card .cm { gap: 4px; }
  .startbar { left: 9px; right: 9px; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); padding: 11px; border-radius: 14px; }
  .startbar .opts { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 7px 9px; align-items: center; }
  .startbar .opts .seg { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .startbar .opts .seg::-webkit-scrollbar { display: none; }
  .startbar .opts .seg button { flex: none; padding: 5px 9px; font-size: 11px; }
}
.set-group, .settings-head + .grid > .panel { box-shadow: var(--shadow); }
@media (max-width: 639px) {
  .set-row { align-items: flex-start; padding: 14px 2px; }
  .set-row .lbl { flex: 1 1 120px; }
  .set-row > .seg, .set-row > .btn, .set-row > div { flex: none; }
}

/* ============ PRODUCT PASS: hard cascade for the composed workspace ============
   The legacy stylesheet has several historical media layers. These focused
   declarations use importance only where the final composition must win. */
@media (max-width: 899px) {
  .dashboard-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .dashboard-grid > .map-panel { order: 1 !important; }
  .dashboard-grid > .chapter-panel { order: 2 !important; }
  .dashboard-grid > .insight-grid { order: 3 !important; grid-template-columns: 1fr !important; }
  .dashboard-grid > .keyword-panel { order: 4 !important; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel {
    border: 0 !important; border-top: 1px solid var(--hair) !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
  }
  .map-panel { margin: 0 -2px !important; padding: 17px 2px 15px !important; }
  .chapter-panel { padding: 17px 2px 14px !important; }
  .chapter-panel .legend { display: none !important; }
  .chapter-panel .ch-rows { grid-template-columns: 1fr !important; }
  .ch-row { min-height: 57px !important; padding: 9px 3px 10px !important; border-left: 3px solid transparent !important; border-radius: 0 8px 8px 0 !important; }
  .ch-row:hover, .ch-row:focus-visible { background: var(--surface-2) !important; border-left-color: var(--accent) !important; }
  .ch-row .name { font-size: 13.5px !important; font-weight: 560 !important; }
  .ch-row .name .no { width: 28px !important; height: 22px !important; margin-right: 7px !important; border-radius: 6px !important; font-size: 10px !important; }
  .mbar, .stack { height: 5px !important; }
}
@media (max-width: 479px) {
  .main { padding-left: 12px !important; padding-right: 12px !important; }
  .dashboard-stats { border-radius: 15px !important; background: var(--surface) !important; }
  .stat-primary { min-height: 148px !important; padding: 14px 13px 11px 12px !important; }
  .stat-primary-main { grid-template-columns: 49px minmax(0,1fr) auto !important; gap: 10px !important; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 49px !important; height: 49px !important; }
  .stat-primary .stat-value { font-size: 34px !important; }
  .stat-grid { background: var(--surface) !important; }
  .stat-item { border-left-color: var(--hair) !important; min-height: 68px !important; padding: 10px 8px 8px !important; }
  .stat-item .eyebrow, .stat-item .stat-caption { color: var(--muted) !important; }
  .stat-item .stat-value { color: var(--ink) !important; font-size: 22px !important; }
  .stat-item:nth-child(2) .stat-value { color: var(--accent-ink) !important; }
  .stat-item:nth-child(3) .stat-value { color: var(--good) !important; }
  .hm-wrap { max-height: 196px !important; }
  .map-is-expanded .hm-wrap { max-height: 380px !important; }
  .insight-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 639px) {
  /* Keep the selection dock to one compact row so it never covers a chapter list. */
  .startbar {
    left: 9px !important; right: 9px !important;
    bottom: calc(var(--tab-h) + var(--safe-b) + 8px) !important;
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 8px !important; padding: 8px 9px !important; border-radius: 13px !important;
    max-height: 76px !important; overflow: hidden !important;
  }
  .startbar .opts {
    flex: 1 1 auto !important; min-width: 0 !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; scrollbar-width: none !important; gap: 6px !important;
  }
  .startbar .opts::-webkit-scrollbar { display: none; }
  .startbar .opts > span { display: none !important; }
  .startbar .opts .seg { flex: none !important; }
  .startbar .opts .seg button { min-height: 28px !important; padding: 4px 8px !important; font-size: 10.5px !important; }
  .startbar .row { flex: none !important; gap: 6px !important; }
  .startbar .count { font-size: 11px !important; white-space: nowrap !important; }
  .startbar .count b { font-size: 15px !important; }
  .startbar .row .btn { height: 36px !important; min-height: 36px !important; padding: 0 10px !important; font-size: 11px !important; }
}

@media (max-width: 639px) {
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 64px !important; align-items: center !important; }
  .toc-ch > .hd .ttl { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-height: 1.3 !important; font-size: 13px !important; }
  .toc-ch > .hd .meta { align-self: center !important; gap: 4px !important; font-size: 10px !important; }
  .toc-ch > .hd .meta .mbar { width: 28px !important; }
  .toc-ch > .hd .meta .num:last-of-type { width: 28px !important; }
  .toc-ch > .hd .meta .chev { width: 15px !important; height: 15px !important; }
}

/* ============ PRODUCT PASS: hierarchy, density, and narrow screens ============
   This layer intentionally changes the composition around the heatmap while
   leaving the heatmap drawing and card interactions untouched. */
:root {
  --page: #f5f5f2;
  --surface: #ffffff;
  --surface-2: #eeefec;
  --ink: #202126;
  --ink-2: #686a74;
  --muted: #9496a0;
  --hair: #dedfdc;
  --accent: #5c59d8;
  --accent-ink: #4845b1;
  --accent-soft: rgba(92,89,216,.11);
  --good: #2a9a7d;
  --signal: #2a9a7d;
  --shadow: 0 1px 2px rgba(28,30,36,.04), 0 12px 30px rgba(28,30,36,.055);
}
:root[data-theme="dark"] {
  --page: #141519;
  --surface: #1c1d22;
  --surface-2: #282930;
  --ink: #f3f3ee;
  --ink-2: #c4c5cb;
  --muted: #8f919c;
  --hair: #35363e;
  --accent: #9b98ff;
  --accent-ink: #c0bdff;
  --accent-soft: rgba(155,152,255,.15);
  --good: #67c8a9;
  --signal: #67c8a9;
  --shadow: 0 1px 2px rgba(0,0,0,.24), 0 18px 40px rgba(0,0,0,.18);
}

body { background: var(--page); }
.main { max-width: 1460px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-weight: 730; letter-spacing: -.045em; }
.page-head .sub { color: var(--ink-2); }
.panel { border: 1px solid var(--hair); box-shadow: var(--shadow); }
.panel h2 { font-weight: 700; letter-spacing: -.03em; }

/* The summary is one composed object: a dark command strip plus quiet metrics. */
.dashboard-stats {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, var(--hair));
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(29,31,38,.07);
}
.stat-primary {
  position: relative;
  isolation: isolate;
  background: #252731;
  border-right: 0;
  border-left: 3px solid #8f8bff;
}
.stat-primary::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  height: 180px;
  right: -76px;
  top: -82px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(255,255,255,.025), 0 0 0 36px rgba(255,255,255,.018);
  pointer-events: none;
}
.stat-grid { background: var(--surface); }
.stat-item { border-left-color: var(--hair); }
.stat-item .eyebrow, .stat-item .stat-caption { color: var(--muted); }
.stat-item .stat-value { color: var(--ink); }
.stat-item:nth-child(2) .stat-value { color: var(--accent-ink); }
.stat-item:nth-child(3) .stat-value { color: var(--good); }
.stat-item:nth-child(3) .stat-caption { color: color-mix(in srgb, var(--good) 75%, var(--muted)); }

/* Desktop keeps a calm two-column command surface. */
@media (min-width: 900px) {
  .dashboard-stats { grid-template-columns: minmax(440px,1.08fr) minmax(0,1.42fr); min-height: 172px; }
  .stat-primary { padding-left: 25px; }
  .dashboard-grid { grid-template-columns: minmax(0,1.38fr) minmax(350px,.86fr); gap: 20px; }
  .dashboard-grid > .map-panel { grid-column: 1; grid-row: 1; }
  .dashboard-grid > .chapter-panel { grid-column: 2; grid-row: 1; }
  .dashboard-grid > .insight-grid { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; grid-row: 3; }
  .map-panel, .chapter-panel { min-height: 100%; }
  .chapter-panel .ch-rows { max-height: 560px; }
}

/* Phone composition: map is visible early, chapters are a single readable queue. */
@media (max-width: 899px) {
  .dashboard-grid { display: flex; flex-direction: column; gap: 0; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel {
    border: 0;
    border-top: 1px solid var(--hair);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .map-panel {
    order: 1;
    margin: 0 -2px;
    padding: 17px 2px 15px;
  }
  .chapter-panel { order: 2; padding: 17px 2px 14px; }
  .insight-grid { order: 3; gap: 0; }
  .keyword-panel { order: 4; }
  .map-panel .panel-head { margin-bottom: 10px; }
  .map-panel .panel-head-actions { gap: 8px; }
  .chapter-panel .panel-head { margin-bottom: 9px; }
  .chapter-panel .legend { display: none; }
  .chapter-panel .ch-rows { grid-template-columns: 1fr; }
  .ch-row {
    min-height: 57px;
    padding: 9px 3px 10px;
    border-top-color: color-mix(in srgb, var(--hair) 86%, transparent);
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    transition: background-color .14s ease, border-color .14s ease;
  }
  .ch-row:hover, .ch-row:focus-visible { background: var(--surface-2); border-left-color: var(--accent); }
  .ch-row .name { font-size: 13.5px; font-weight: 560; }
  .ch-row .name .no {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 22px;
    margin-right: 7px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 10px;
    font-weight: 700;
  }
  .ch-row .pct { font-size: 12px; font-weight: 700; }
  .mbar, .stack { height: 5px; }
  .insight-grid { grid-template-columns: 1fr; }
  .trend-panel, .weak-panel { min-width: 0; padding: 16px 2px 14px; }
}

@media (max-width: 479px) {
  .main { padding-left: 12px; padding-right: 12px; }
  .page-head { margin: 2px 1px 13px; }
  .page-head h1 { font-size: 25px; }
  .page-head .sub { font-size: 11px; }
  .dashboard-stats { border-radius: 15px; }
  .stat-primary { min-height: 148px; padding: 14px 13px 11px 12px; gap: 12px; }
  .stat-primary-main { grid-template-columns: 49px minmax(0,1fr) auto; gap: 10px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 49px; height: 49px; }
  .stat-primary .stat-value { font-size: 34px; }
  .stat-primary .stat-caption { max-width: 170px; font-size: 10px; }
  .stat-primary .stat-cta { min-height: 34px; padding: 0 10px; font-size: 11px; }
  .stat-context { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
  .stat-grid { min-height: 68px; }
  .stat-item { min-height: 68px; padding: 10px 8px 8px; }
  .stat-item .eyebrow { font-size: 10px; }
  .stat-item .stat-value { font-size: 22px; }
  .stat-item .stat-caption { font-size: 9.5px; }
  .map-panel { padding-top: 16px; }
  .tm-mobile-only { border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); }
  .hm-wrap { max-height: 196px; }
  .map-is-expanded .hm-wrap { max-height: 380px; }
  .insight-grid { grid-template-columns: 1fr; }
  .trend-panel .panel-head, .weak-panel .panel-head { display: flex; }
  .trend-panel .panel-head .hint { margin-top: 0; }
}

/* Directory: a quiet file-list surface rather than a stack of floating cards. */
#toc { border-top: 1px solid var(--hair); }
.toc-ch { margin: 0; border-bottom: 1px solid var(--hair); }
.toc-ch > .hd, .toc-ch.open > .hd {
  min-height: 62px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.toc-ch > .hd:hover { background: var(--surface-2); }
.toc-ch > .hd .ttl { font-weight: 650; }
.toc-body { padding: 5px 0 12px 30px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.toc-sec > .sh { padding: 10px 6px 6px; }
.toc-card { min-height: 42px; padding: 8px 6px; border-radius: 7px; }
.toc-card .ct { font-size: 13.5px; }

@media (max-width: 639px) {
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 58px; padding: 0 3px; }
  .toc-ch > .hd { grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px; }
  .toc-ch > .hd .ttl { font-size: 14px; }
  .toc-ch > .hd .meta { gap: 6px; font-size: 11px; }
  .toc-ch > .hd .meta .mbar { width: 48px; }
  .toc-body { padding-left: 22px; }
  .toc-sec > .sh { grid-template-columns: 22px minmax(0,1fr) auto; gap: 7px; padding: 9px 4px 5px; font-size: 12.5px; }
  .toc-card { grid-template-columns: 22px minmax(0,1fr) auto; gap: 7px; padding: 8px 4px; }
  .toc-card .ct { font-size: 13px; }
  .toc-card .ct .pp { display: none; }
  .toc-card .cm { gap: 4px; }
  .startbar { left: 9px; right: 9px; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); padding: 11px; border-radius: 14px; }
  .startbar .opts { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 7px 9px; align-items: center; }
  .startbar .opts .seg { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .startbar .opts .seg::-webkit-scrollbar { display: none; }
  .startbar .opts .seg button { flex: none; padding: 5px 9px; font-size: 11px; }
}

/* Settings uses the same full-width rows and keeps controls from squeezing. */
.set-group, .settings-head + .grid > .panel { box-shadow: var(--shadow); }
@media (max-width: 639px) {
  .set-row { align-items: flex-start; padding: 14px 2px; }
  .set-row .lbl { flex: 1 1 120px; }
  .set-row > .seg, .set-row > .btn, .set-row > div { flex: none; }
}

@media (max-width: 639px) {
  .page-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; }
  .page-title-block { grid-column: 1; }
  .dashboard-head .page-head-actions { grid-column: 1 / -1; grid-row: 2; }
  .browse-head .page-head-actions { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 2px; }
  .browse-head .page-head-actions .btn { min-height: 36px; padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-stats, .panel, .btn, .nav a, .toc-card { transition: none !important; }
}

/* ============ Crafted workspace pass ============
   The map cells and drawing logic remain unchanged. This layer gives the
   surrounding app a calmer information hierarchy, removes competing color
   signals, and makes the phone layout use one clear scroll surface. */
body { background: var(--page); }
.page-head { align-items: center; }
.page-title-block { min-width: 0; }
.page-kicker, .panel-kicker {
  color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  line-height: 1.2; text-transform: uppercase;
}
.page-kicker { margin-bottom: 7px; }
.page-kicker span { color: color-mix(in srgb, var(--muted) 55%, transparent); padding: 0 3px; }
.panel-kicker { margin-bottom: 4px; letter-spacing: .1em; }
.page-head-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.subject-label {
  flex: none; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
}
.subject-tabs { display: flex; align-items: center; gap: 3px; min-width: 0; }
.subject-tabs button { min-width: 0; }

.stat-primary { position: relative; }
.stat-primary-action { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.action-label { color: rgba(247,248,252,.54); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow-dot { width: 6px; height: 6px; display: inline-block; margin: 0 6px 1px 0; border-radius: 50%; background: #aaa7ff; box-shadow: 0 0 0 3px rgba(170,167,255,.14); }
.stat-item .stat-value { color: var(--ink); }
.stat-item-review .eyebrow::before { content: ''; width: 6px; height: 6px; display: inline-block; margin: 0 6px 1px 0; border-radius: 50%; background: var(--signal); }
.stat-item-review .stat-caption { color: color-mix(in srgb, var(--signal) 68%, var(--muted)); }
.stat-primary { background: #252831; }
:root[data-theme="dark"] .stat-primary { background: #111318; }
:root[data-theme="sepia"] .stat-primary { background: #433c37; }
.stat-grid { background: var(--surface); }

@media (min-width: 900px) {
  .subj-bar {
    height: calc(var(--safe-t) + 52px); padding: var(--safe-t) 36px 0; gap: 14px;
    background: var(--surface); border-bottom-color: var(--hair);
  }
  .subject-tabs { flex: 1; }
  .subject-tabs button { flex: 0 0 auto; min-width: 128px; height: 34px; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 52px + 24px); }
  .page-head { margin-bottom: 22px; }
  .page-head h1 { font-size: 28px; letter-spacing: -.035em; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.58fr) minmax(320px, .92fr); column-gap: 24px; row-gap: 22px; align-items: start; }
  .dashboard-grid > .map-panel { grid-column: 1; grid-row: 1; }
  .dashboard-grid > .chapter-panel { grid-column: 2; grid-row: 1; }
  .dashboard-grid > .insight-grid { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; grid-row: 3; }
  .chapter-panel .ch-rows { grid-template-columns: 1fr; max-height: 520px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
  .chapter-panel .ch-rows::-webkit-scrollbar { width: 4px; }
  .chapter-panel .ch-rows::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 99px; }
  .chapter-panel .panel-head { align-items: flex-end; }
  .dashboard-stats { margin-bottom: 22px; }
  .map-panel, .chapter-panel { min-height: 100%; }
}

@media (max-width: 899px) {
  .page-head-actions { width: auto; }
  .subject-label { font-size: 9px; }
}

@media (max-width: 639px) {
  body { background: var(--page); }
  .subj-bar {
    height: calc(var(--safe-t) + 44px); padding: var(--safe-t) 13px 0; gap: 11px;
    background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 1px 0 var(--hair);
  }
  .subject-tabs { flex: 1; gap: 0; }
  .subject-tabs button { flex: 1; height: 33px; padding: 0 8px; border-radius: 0; font-size: 12.5px; }
  .page-head { display: block; margin: 0 1px 14px; }
  .page-kicker { margin-bottom: 6px; font-size: 9.5px; }
  .page-head h1 { font-size: 24px; letter-spacing: -.045em; line-height: 1.15; }
  .page-head .sub { max-width: 100%; margin-top: 5px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-head-actions { width: 100%; margin-top: 11px; }
  .page-head-actions .seg { width: 100%; }
  .page-head-actions .seg button { flex: 1; min-width: 0; padding: 0 7px; font-size: 11.5px; }
  .browse-head .page-head-actions { justify-content: flex-end; }
  .browse-head .page-head-actions .btn { min-width: 94px; }
  .dashboard-stats { margin-bottom: 14px; border-radius: 14px; box-shadow: 0 1px 2px rgba(31,35,41,.06), 0 9px 22px rgba(31,35,41,.05); }
  .stat-primary { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; min-height: 116px; padding: 16px 14px; }
  .stat-primary-action { gap: 4px; }
  .stat-primary .stat-value { font-size: 32px; }
  .stat-primary .stat-caption { max-width: 155px; font-size: 10.5px; }
  .stat-cta { min-height: 35px; padding: 0 9px; border-radius: 8px; font-size: 11px; }
  .stat-grid { border-top-color: color-mix(in srgb, var(--hair) 80%, transparent); }
  .stat-item { min-height: 74px; padding: 11px 9px; }
  .stat-item .stat-value { font-size: 22px; }
  .stat-item .stat-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .map-panel {
    padding: 16px 0 11px; border: 0; border-top: 1px solid var(--hair); border-radius: 0;
    background: transparent; box-shadow: none;
  }
  .map-panel .panel-head { padding: 0 2px; margin-bottom: 9px; }
  .map-panel .hint { padding: 0 2px; }
  .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { padding-left: 2px; padding-right: 2px; }
  .chapter-panel .panel-head, .trend-panel .panel-head, .weak-panel .panel-head, .keyword-panel .panel-head { align-items: flex-end; }
  .chapter-panel .panel-kicker, .trend-panel .panel-kicker, .weak-panel .panel-kicker, .keyword-panel .panel-kicker { font-size: 9px; }
  .ch-row { min-height: 62px; padding: 10px 3px; border-top-color: color-mix(in srgb, var(--hair) 75%, transparent); }
  .ch-row .name .no { display: inline-grid; place-items: center; width: 27px; height: 22px; margin-right: 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: 10px; }
  .nav { background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 -6px 22px rgba(31,35,41,.08); }
  .nav a.on { color: var(--accent-ink); }
  .nav a.on svg { background: transparent; }
  .nav a.on::before { display: block; top: 0; width: 28px; height: 2px; border-radius: 0 0 4px 4px; box-shadow: none; }
  .sync-dot.offline { background: var(--muted); }
}

@media (prefers-reduced-motion: reduce) {
  .stat-cta, .nav a, .ch-row, .toc-card { transition: none !important; }
}
.map-panel .panel-head { align-items: center; }
.map-panel .panel-head h2 { letter-spacing: -.02em; }

@media (max-width: 639px) {
  body { background: linear-gradient(180deg, #f8f9fb 0, var(--page) 44%, #f7f8fa 100%); }
  .dashboard-stats { border-color: color-mix(in srgb, var(--ink) 10%, var(--hair)); box-shadow: 0 8px 24px rgba(31,35,41,.06); }
  .stat-primary { min-height: 116px; background: linear-gradient(135deg, #252831 0%, #343844 100%); }
  .stat-primary .stat-caption { color: rgba(247,248,252,.62); }
  .stat-grid { background: var(--surface); }
  .stat-item:nth-child(2) .stat-value { color: var(--accent-ink); }
  .stat-item:nth-child(3) .stat-value { color: var(--signal); }
  .map-panel { border-color: color-mix(in srgb, var(--ink) 9%, var(--hair)); }
}
:root[data-font="sans"] { --read-font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }

:root[data-theme="sepia"] {
  --page: #efe6d2; --surface: #f6eedd; --surface-2: #ebe1ca;
  --ink: #3a3024; --ink-2: #6a5c48; --muted: #978a74; --hair: #ddd0b4; --axis: #c9b995;
  --ring: rgba(80, 60, 20, .10); --shadow: 0 1px 2px rgba(80, 60, 20, .05), 0 8px 24px rgba(80, 60, 20, .07);
  --blank-bg: rgba(140, 100, 40, .12); --blank-line: rgba(140, 100, 40, .5); --reveal: #7a4f12;
  --accent-soft: rgba(42, 120, 214, .09);
  --m-none: #e2d7bf; --l0: #d8cbae;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #111110; --surface: #1a1a19; --surface-2: #222220;
  --ink: #ecebe6; --ink-2: #c3c2b7; --muted: #898781; --hair: #2c2c2a; --axis: #383835;
  --ring: rgba(255, 255, 255, .08); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --accent: #3987e5; --accent-ink: #86b6ef; --accent-soft: rgba(57, 135, 229, .16);
  --blank-bg: rgba(57, 135, 229, .18); --blank-line: rgba(109, 167, 236, .6); --reveal: #9ec5f4;
  --miss-bg: rgba(230, 103, 103, .16); --miss-line: #e66767; --miss-ink: #f09a9a;
  /* 深色：同一色阶，贴近背景 = 低，越亮 = 越高 */
  --m0: #184f95; --m1: #256abf; --m2: #3987e5; --m3: #6da7ec; --m4: #b7d3f6;
  --m-none: #2a2a28;
  --l0: #333331; --l1: #184f95; --l2: #2a78d6; --l3: #6da7ec; --l4: #b7d3f6;
}

/* ============ 基础 ============ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--page); color: var(--ink);
  font: 15px/1.6 var(--ui-font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s, color .3s;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
a { color: var(--accent-ink); text-decoration: none; }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ============ 外壳：侧边栏（宽屏）/ 底部标签栏（窄屏）============ */
.shell { min-height: 100%; }
.nav {
  position: fixed; z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  display: flex;
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); font-size: 11.5px; letter-spacing: .02em; transition: color .2s;
}
.nav a svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav a.on { color: var(--ink); }
.nav a.on svg { stroke: var(--accent); }
.nav .brand { display: none; }
.main { padding: calc(20px + var(--safe-t)) 18px calc(var(--tab-h) + var(--safe-b) + 28px); max-width: 1180px; margin: 0 auto; }

@media (max-width: 899px) {
  .nav { left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); border-top: 1px solid var(--hair); }
  .nav a { flex: 1; }
}
@media (min-width: 900px) {
  .nav { top: 0; bottom: 0; left: 0; width: var(--nav-w); flex-direction: column; padding: 22px 0; gap: 8px; border-right: 1px solid var(--hair); }
  .nav a { height: 64px; }
  .nav .brand { display: grid; place-items: center; height: 56px; margin-bottom: 14px; }
  .main { padding: 36px 40px 60px calc(var(--nav-w) + 40px); }
}

/* ============ 页面通用 ============ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 22px; flex-wrap: wrap; }
.page-head h1 { font: 600 26px/1.25 var(--ui-font); margin: 0; letter-spacing: .01em; }
.page-head .sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.panel {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), 0 0 0 1px var(--ring);
  padding: 20px 20px 18px;
}
.panel h2 { font: 600 15.5px/1.3 var(--ui-font); margin: 0; }
.panel .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.panel .hint { color: var(--muted); font-size: 12.5px; }
.grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.two-1 { grid-template-columns: 3fr 2fr; } }

.seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { padding: 6px 13px; border-radius: 8px; font-size: 13px; color: var(--ink-2); transition: background .2s, color .2s; white-space: nowrap; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--ring); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 500;
  background: var(--surface-2); color: var(--ink); transition: transform .12s, background .2s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--ink); color: var(--surface); }
.btn.accent { background: var(--accent); color: #fff; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
.btn.sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 9px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.chip.hf { background: var(--accent-soft); color: var(--accent-ink); }
.lvpill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.lvpill i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ============ 统计块 ============ */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 900px) { .tiles { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.tile { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), 0 0 0 1px var(--ring); padding: 16px 18px; }
.tile .k { color: var(--muted); font-size: 12.5px; }
.tile .v { font: 600 30px/1.15 var(--ui-font); margin-top: 6px; letter-spacing: -.01em; }
.tile .v small { font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.tile.hero { grid-column: span 2; display: flex; align-items: center; gap: 18px; }
@media (min-width: 900px) { .tile.hero { grid-column: auto; } }
.tile.hero .v { font-size: 42px; }
.tile .d { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ring-meter { flex: none; }

.filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

/* ============ 图表 ============ */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--ui-font); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.tip {
  position: fixed; z-index: 90; pointer-events: none; background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; max-width: 280px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14), 0 0 0 1px var(--ring); opacity: 0; transition: opacity .12s;
}
.tip.on { opacity: 1; }
.tip b { font-weight: 600; }
.tip .row { display: flex; justify-content: space-between; gap: 14px; color: var(--ink-2); }
.tip .row span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }

.tm-crumb { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; min-height: 22px; }
.tm-crumb button { color: var(--accent-ink); }
.tm-cell { cursor: pointer; transition: opacity .15s; }
.tm-cell:hover { opacity: .82; }

/* 各章条目 */
.ch-rows { display: flex; flex-direction: column; }
.ch-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 4px 12px; align-items: center;
  padding: 11px 6px; border-top: 1px solid var(--hair); cursor: pointer; border-radius: 8px; transition: background .15s;
}
.ch-row:first-child { border-top: 0; }
.ch-row:hover { background: var(--surface-2); }
.ch-row .name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-row .name .no { color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; }
.ch-row .pct { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.ch-row .bars { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 5px; }
@media (min-width: 700px) {
  .ch-row { grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 52px; }
  .ch-row .bars { display: contents; }
}
.mbar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.mbar > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .5s; }
.stack { display: flex; gap: 2px; height: 8px; }
.stack > i { height: 100%; border-radius: 2px; min-width: 0; transition: flex-grow .5s; }
.stack > i:first-child { border-radius: 4px 2px 2px 4px; }
.stack > i:last-child { border-radius: 2px 4px 4px 2px; }
.col-head { display: none; font-size: 11.5px; color: var(--muted); padding: 0 6px 6px; }
@media (min-width: 700px) { .col-head { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 52px; gap: 12px; } .col-head span:last-child { text-align: right; } }

/* 薄弱清单 / 关键词 */
.weak-list { display: flex; flex-direction: column; }
.weak-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 4px; border-top: 1px solid var(--hair); cursor: pointer; border-radius: 8px; }
.weak-item:first-child { border-top: 0; }
.weak-item:hover { background: var(--surface-2); }
.weak-item .t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weak-item .p { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weak-item .r { grid-row: span 2; align-self: center; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.kw-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-cloud button { padding: 6px 11px; border-radius: 9px; background: var(--surface-2); font-size: 13.5px; display: inline-flex; gap: 7px; align-items: baseline; transition: background .15s; }
.kw-cloud button:hover { background: var(--accent-soft); }
.kw-cloud button b { font-weight: 600; font-size: 11.5px; color: var(--miss-ink); font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 13.5px; line-height: 1.8; }

/* ============ 目录 ============ */
.toc-ch { margin-bottom: 10px; }
.toc-ch > .hd {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 14px 16px; background: var(--surface); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--ring); cursor: pointer;
}
.toc-ch.open > .hd { border-radius: var(--radius) var(--radius) 0 0; }
.toc-ch > .hd .ttl { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-ch > .hd .meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.toc-ch > .hd .meta .mbar { width: 70px; }
.toc-body { display: none; background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 0 0 1px var(--ring); padding: 4px 8px 10px; }
.toc-ch.open .toc-body { display: block; }
.toc-sec > .sh { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 8px 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.toc-card { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 8px; border-radius: 9px; cursor: pointer; }
.toc-card:hover { background: var(--surface-2); }
.toc-card .ct { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-card .ct .pp { color: var(--muted); font-size: 12px; margin-right: 6px; }
.toc-card .cm { display: flex; gap: 8px; align-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.chk {
  width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--axis); display: grid; place-items: center;
  transition: background .15s, box-shadow .15s; flex: none;
}
.chk.on { background: var(--accent); box-shadow: none; }
.chk.part { box-shadow: inset 0 0 0 1.5px var(--accent); }
.chk.part::after { content: ''; width: 9px; height: 2px; border-radius: 1px; background: var(--accent); }
.chk.on::after { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translate(0, -1px) rotate(-45deg); }
.chev { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; transition: transform .2s; }
.toc-ch.open .chev { transform: rotate(90deg); }

/* 开始背诵底栏 */
.startbar {
  position: fixed; z-index: 25; left: 12px; right: 12px; bottom: calc(var(--tab-h) + var(--safe-b) + 10px);
  background: var(--surface); border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.16), 0 0 0 1px var(--ring);
  padding: 14px; display: flex; flex-direction: column; gap: 12px; transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s; max-width: 760px; margin: 0 auto;
}
.startbar.on { transform: none; opacity: 1; pointer-events: auto; }
@media (min-width: 900px) { .startbar { left: calc(var(--nav-w) + 24px); right: 24px; bottom: 24px; } }
.startbar .opts { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); }
.startbar .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.startbar .count { font-size: 14px; }
.startbar .count b { font-size: 18px; }

/* ============ 背诵（沉浸模式）============ */
.study {
  position: fixed; inset: 0; z-index: 50; background: var(--page); display: flex; flex-direction: column;
  animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.study-top {
  flex: none; display: flex; align-items: center; gap: 12px; padding: calc(12px + var(--safe-t)) 16px 10px;
  transition: opacity .4s;
}
.study-top .x { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.study-top .x:hover { background: var(--surface-2); color: var(--ink); }
.study-top .x svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.progress { flex: 1; height: 4px; background: var(--hair); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.study-top .cnt { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.study-top .tools { display: flex; gap: 2px; }
.study-top .tools button { width: 34px; height: 34px; border-radius: 9px; color: var(--muted); font-size: 13px; display: grid; place-items: center; }
.study-top .tools button:hover { background: var(--surface-2); color: var(--ink); }

.study-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet {
  max-width: 720px; margin: 0 auto; padding: 20px 26px 60px;
  font-family: var(--read-font); font-size: var(--read-size); line-height: 1.95; color: var(--ink);
}
.sheet.enter { animation: cardIn .38s cubic-bezier(.2,.8,.2,1); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } }
.sheet .crumb { font-family: var(--ui-font); font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.sheet .crumb span + span::before { content: '›'; margin: 0 6px; opacity: .6; }
.sheet .qhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--ui-font); margin-bottom: 6px; }
.sheet h1 { font-family: var(--read-font); font-size: 1.45em; line-height: 1.4; font-weight: 700; margin: 0 0 22px; letter-spacing: .01em; }
.sheet .lvtag { font-size: 12px; padding: 3px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.sheet p { margin: 0 0 .85em; text-align: justify; text-justify: inter-ideograph; }
.sheet .node { margin: 0; }
.sheet .node .node { margin-left: 0; }
.sheet .nh { font-weight: 700; margin: 1.1em 0 .35em; line-height: 1.6; }
.sheet .d2 > .nh { font-size: 1.12em; }
.sheet .d3 > .nh { font-size: 1.02em; }
.sheet .item { display: grid; grid-template-columns: auto 1fr; gap: 0 .35em; margin: 0 0 .5em; }
.sheet .item .mk { font-weight: 600; color: var(--ink-2); }
.sheet .nh .mk { color: var(--ink-2); margin-right: .15em; }
.sheet .inline-x { font-weight: 400; }
.sheet .nh-end { display: none; }
.sheet .kw-read { font-weight: 700; color: var(--ink); box-shadow: inset 0 -.35em 0 var(--accent-soft); }
.sheet img { max-width: 100%; border-radius: 10px; margin: 8px 0 16px; box-shadow: 0 0 0 1px var(--ring); }

/* 挖空：关键词 */
.bk {
  color: transparent; background: var(--blank-bg); border-radius: 5px; box-shadow: inset 0 -2px 0 var(--blank-line);
  padding: 0 .12em; margin: 0 .04em; cursor: pointer; transition: color .25s, background .25s, box-shadow .25s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; user-select: none;
}
.bk.open { color: var(--reveal); background: transparent; box-shadow: inset 0 -2px 0 var(--blank-line); font-weight: 600; }
.bk.miss { color: var(--miss-ink); background: var(--miss-bg); box-shadow: inset 0 -2px 0 var(--miss-line); }
/* 挖空：主干句 */
.bs {
  color: transparent; background: var(--blank-bg); border-radius: 6px; cursor: pointer;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .3s, background .3s; user-select: none;
  padding: .12em .1em;
}
.bs.open { color: var(--ink); background: color-mix(in srgb, var(--blank-bg) 40%, transparent); }
.bs.open .kw { color: var(--reveal); font-weight: 600; }
.bs.miss { color: var(--miss-ink); background: var(--miss-bg); }
/* 已揭开的普通句子（L3/L4 揭晓后可点击标记漏掉） */
.sx { cursor: pointer; border-radius: 5px; transition: background .2s, color .2s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sx.miss { color: var(--miss-ink); background: var(--miss-bg); }
.markable .sx:hover { background: var(--surface-2); }
/* 框架层占位 */
.ph { display: block; height: .62em; border-radius: 5px; background: var(--blank-bg); margin: .55em 0 .7em; cursor: pointer; transition: opacity .2s; }
.ph:hover { opacity: .75; }
.item .ph { margin: .62em 0 .5em; }
.anim-in { animation: revealIn .45s ease both; }
@keyframes revealIn { from { opacity: 0; transform: translateY(4px); } }

/* 题干层 */
.recall-space { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 34vh; text-align: center; color: var(--muted); font-family: var(--ui-font); gap: 18px; }
.breath { width: 74px; height: 74px; border-radius: 50%; background: var(--accent-soft); position: relative; animation: breath 5.5s ease-in-out infinite; }
.breath::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; background: var(--accent); opacity: .35; }
@keyframes breath { 0%, 100% { transform: scale(.82); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
.recall-space .t1 { font-size: 15px; color: var(--ink-2); }
.recall-space .t2 { font-size: 12.5px; }

/* 底部操作 */
.study-bar {
  flex: none; padding: 12px 16px calc(14px + var(--safe-b)); display: flex; justify-content: center;
  background: linear-gradient(to top, var(--page) 70%, transparent);
}
.study-bar .inner { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 9px; }
.study-bar .note { text-align: center; font-size: 12.5px; color: var(--muted); min-height: 18px; }
.bigbtn {
  height: 56px; border-radius: 16px; font-size: 16px; font-weight: 600; width: 100%;
  background: var(--ink); color: var(--surface); transition: transform .12s, opacity .2s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.bigbtn:active { transform: scale(.985); }
.bigbtn .kbd, .grade .kbd { font-size: 11px; font-weight: 500; opacity: .5; border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; line-height: 16px; }
.grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grade {
  height: 62px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--ring), var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 15px; font-weight: 600;
  transition: transform .12s, box-shadow .2s, background .2s; position: relative;
}
.grade:active { transform: scale(.97); }
.grade .gl { display: flex; align-items: center; gap: 7px; }
.grade .gi { width: 10px; height: 10px; border-radius: 50%; }
.grade .gs { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.grade.g0 .gi { background: var(--bad); }
.grade.g1 .gi { background: var(--warn); }
.grade.g2 .gi { background: var(--good); }
.grade.suggest { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
@media (hover: hover) { .study-bar .kb-only { display: inline; } }
@media (hover: none) { .kbd { display: none; } }

/* 小结 */
.summary { max-width: 560px; margin: 0 auto; padding: 30px 24px 40px; text-align: center; font-family: var(--ui-font); }
.summary h2 { font-size: 24px; margin: 18px 0 6px; }
.summary .big { font-size: 54px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.summary .gstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0; }
.summary .gstats div { background: var(--surface); border-radius: 14px; padding: 14px 8px; box-shadow: 0 0 0 1px var(--ring); }
.summary .gstats b { display: block; font-size: 24px; }
.summary .gstats span { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.summary .delta { display: flex; flex-direction: column; gap: 8px; text-align: left; margin: 0 0 26px; }
.summary .delta .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; background: var(--surface); border-radius: 12px; padding: 12px 14px; box-shadow: 0 0 0 1px var(--ring); font-size: 14px; }
.summary .delta .row .v { font-variant-numeric: tabular-nums; }
.up { color: #006300; }
:root[data-theme="dark"] .up { color: #0ca30c; }
.summary .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============ 卡片详情抽屉 ============ */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.28); animation: fadeIn .2s; }
.drawer {
  position: fixed; z-index: 61; background: var(--surface); box-shadow: 0 -10px 40px rgba(0,0,0,.2);
  left: 0; right: 0; bottom: 0; max-height: 86vh; border-radius: 22px 22px 0 0; overflow-y: auto;
  padding: 10px 22px calc(22px + var(--safe-b)); animation: up .3s cubic-bezier(.2,.8,.2,1);
}
.drawer::before { content: ''; display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--hair); margin: 0 auto 14px; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 900px) {
  .drawer { left: auto; top: 0; bottom: 0; right: 0; width: 460px; max-height: none; border-radius: 22px 0 0 22px; padding: 26px 26px 30px; animation: slideL .3s cubic-bezier(.2,.8,.2,1); }
  .drawer::before { display: none; }
  @keyframes slideL { from { transform: translateX(40px); opacity: 0; } }
}
.drawer h3 { font: 700 20px/1.4 var(--read-font); margin: 6px 0 6px; }
.drawer .kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.drawer .kv div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.drawer .kv b { display: block; font-size: 19px; }
.drawer .kv span { font-size: 12px; color: var(--muted); }
.drawer .hist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 18px; font-size: 13px; }
.drawer .hist .h { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; color: var(--ink-2); }
.drawer .lvpick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0 16px; }
.drawer .lvpick button { padding: 9px 2px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; line-height: 1.3; }
.drawer .lvpick button b { display: block; font-size: 14px; }
.drawer .lvpick button.cur { box-shadow: inset 0 0 0 2px var(--accent); }
.drawer .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.drawer .actions .btn { flex: 1; min-width: 140px; }

/* ============ 设置 ============ */
.set-group { margin-bottom: 16px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 2px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.set-row:first-of-type { border-top: 0; }
.set-row .lbl { font-size: 14.5px; }
.set-row .lbl small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; background: var(--muted); }
.sync-dot.ok { background: var(--good); }
.sync-dot.syncing { background: var(--accent); animation: pulse 1s infinite; }
.sync-dot.error { background: var(--bad); }
@keyframes pulse { 50% { opacity: .3; } }
.sync-badge { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--muted); }

/* 登录 */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.login form { width: 100%; max-width: 340px; text-align: center; }
.login h1 { font: 700 24px/1.3 var(--read-font); margin: 18px 0 6px; }
.login p { color: var(--muted); font-size: 13.5px; margin: 0 0 26px; }
.login input {
  width: 100%; height: 50px; border-radius: 14px; border: 0; padding: 0 16px; font: inherit; font-size: 16px;
  background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--hair); outline: none; margin-bottom: 12px; text-align: center;
}
.login input:focus { box-shadow: 0 0 0 2px var(--accent); }
.login .btn { width: 100%; height: 50px; }
.login .err { color: var(--miss-ink); font-size: 13px; min-height: 20px; margin-top: 10px; }

.toast {
  position: fixed; z-index: 95; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 24px); transform: translate(-50%, 10px);
  background: var(--ink); color: var(--surface); padding: 10px 18px; border-radius: 12px; font-size: 13.5px; opacity: 0; transition: .25s; pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============ 科目切换栏（顶部，全端可见）============ */
.subj-bar {
  position: fixed; z-index: 19; left: 0; right: 0; top: 0;
  height: calc(var(--safe-t) + 46px);
  padding: var(--safe-t) 14px 0;
  display: flex; gap: 6px; justify-content: center; align-items: center;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--hair);
}
.subj-bar button {
  flex: 1; max-width: 200px; height: 34px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background .2s, color .2s;
}
.subj-bar button.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.subj-bar button:hover:not(.on) { background: var(--surface-2); color: var(--ink); }
/* push main below the subjbar on all screen sizes */
.main.has-subj-bar { padding-top: calc(var(--safe-t) + 46px + 20px); }
@media (min-width: 900px) {
  .subj-bar { left: var(--nav-w); }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 46px + 36px); }
}

/* ============ 掌握热力图（手机）============ */
@keyframes hm-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes hm-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.hm-wrap {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 320px; overflow-y: auto; overflow-x: hidden;
  padding: 2px 2px 2px 0;
  /* stable scrollbar to prevent layout shift */
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.hm-wrap::-webkit-scrollbar { width: 4px; }
.hm-wrap::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 2px; }

.hm-ch-block {
  display: flex; align-items: flex-start; gap: 8px;
  min-width: 0; /* prevent flex children from expanding beyond parent */
  animation: hm-fadein .22s ease both;
}

/* drawHeatmap may run again after a viewport resize. Once the first layout is
   painted, keep updates static so ResizeObserver/content changes do not replay
   every cell's pop-in animation and make the map appear to flash. */
.hm-wrap.hm-ready .hm-ch-block,
.hm-wrap.hm-ready .hm-cell { animation: none; }

/* chapter-number circle with conic-gradient arc */
.hm-ch-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer; border: 0; padding: 0;
  /* arc ring: accent color fills to --cp, rest is hair */
  background: conic-gradient(
    var(--accent) calc(var(--cp, 0%) * 1),
    var(--hair) 0
  );
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
/* color the arc by mastery bin */
.hm-ch-num[data-bin="0"] { background: conic-gradient(var(--m0) calc(var(--cp,0%)*1), var(--hair) 0); }
.hm-ch-num[data-bin="1"] { background: conic-gradient(var(--m1) calc(var(--cp,0%)*1), var(--hair) 0); }
.hm-ch-num[data-bin="2"] { background: conic-gradient(var(--m2) calc(var(--cp,0%)*1), var(--hair) 0); }
.hm-ch-num[data-bin="3"] { background: conic-gradient(var(--m3) calc(var(--cp,0%)*1), var(--hair) 0); }
.hm-ch-num[data-bin="4"] { background: conic-gradient(var(--m4) calc(var(--cp,0%)*1), var(--hair) 0); }
/* inner surface disc creates donut effect */
.hm-ch-num::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--surface);
}
.hm-ch-n {
  position: relative; z-index: 1;
  font-size: 9.5px; font-weight: 800; color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hm-ch-num:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.hm-ch-num:active { transform: scale(1.05); }
.hm-ch-num:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hm-cells { flex: none; min-width: 0; overflow: hidden; }

.hm-cell {
  border-radius: 3px; cursor: pointer; border: 0; padding: 0; display: block;
  animation: hm-pop .2s cubic-bezier(.34,1.56,.64,1) both;
  -webkit-tap-highlight-color: transparent;
  /* subtle inner highlight */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.hm-cell:hover {
  transform: scale(1.55); z-index: 2; position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.hm-cell:active { transform: scale(1.25); }
.hm-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 3; position: relative; }

.hm-filler {
  background: color-mix(in srgb, var(--hair) 45%, transparent) !important;
  box-shadow: none !important; cursor: default; pointer-events: none;
  border-radius: 2px;
}
.hm-cell[data-bin="-1"] { background: var(--m-none); }
.hm-cell[data-bin="0"]  { background: var(--m0); }
.hm-cell[data-bin="1"]  { background: var(--m1); }
.hm-cell[data-bin="2"]  { background: var(--m2); }
.hm-cell[data-bin="3"]  { background: var(--m3); }
.hm-cell[data-bin="4"]  { background: var(--m4); }

/* chapter title tooltip — two-line pill */
.hm-tooltip {
  position: fixed; z-index: 90; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--ink); color: var(--surface);
  border-radius: 12px; padding: 8px 13px;
  max-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
  opacity: 0; transform: translateX(-8px) scale(.96);
  transition: opacity .17s ease, transform .2s cubic-bezier(.2,.9,.3,1);
  transform-origin: left center;
}
.hm-tooltip.on { opacity: 1; transform: translateX(0) scale(1); }
.hm-tt-title { font-size: 13px; font-weight: 600; line-height: 1.4; white-space: normal; }
.hm-tt-pct { font-size: 11.5px; opacity: .72; font-variant-numeric: tabular-nums; }

.hm-footer {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--hair);
}
.hm-density { font-size: 11px; color: var(--muted); flex: none; }
.hm-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent) calc(var(--progress,40%)), var(--hair) 0);
  outline: none; cursor: pointer;
}
.hm-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.22); border: 3px solid var(--surface);
  transition: transform .12s;
}
.hm-slider::-webkit-slider-thumb:active { transform: scale(1.2); }
.hm-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface);
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.22);
}

/* ============ 修正 .btn 内 SVG 尺寸 ============ */
.btn svg, .bigbtn svg { width: 18px; height: 18px; flex: none; }

/* ============ 手机紧凑间距 ============ */
@media (max-width: 639px) {
  .panel { padding: 14px 14px 12px; }
  .tiles { gap: 8px; margin-bottom: 10px; }
  .grid { gap: 10px; }
  .tile .v { font-size: 24px; }
  .tile.hero .v { font-size: 34px; }
  .page-head h1 { font-size: 22px; }
  .page-head { margin-bottom: 14px; }
}

/* hide/show treemap vs grid by screen width */
.tm-mobile-only { display: none; }
.tm-desktop-only { display: block; }
@media (max-width: 639px) {
  .tm-mobile-only { display: block; }
  .tm-desktop-only { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============ 移动端沉浸布局 ============
   Keep the first screen useful on a phone: compact chrome, clear hierarchy,
   and a short mastery map that does not force a second scroll inside a card. */
@media (max-width: 639px) {
  html, body { overflow-x: hidden; }
  body { font-size: 14px; }
  .main {
    padding-left: 12px; padding-right: 12px;
    padding-bottom: calc(var(--tab-h) + var(--safe-b) + 18px);
  }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 46px + 12px); }

  /* The subject switcher is a quiet glass rail instead of a full-width block. */
  .subj-bar {
    height: calc(var(--safe-t) + 44px);
    padding-left: 12px; padding-right: 12px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }
  .subj-bar button { height: 32px; font-size: 13px; }

  .page-head { align-items: center; gap: 8px; margin: 2px 2px 12px; }
  .page-head h1 { font-size: 21px; letter-spacing: -.01em; }
  .page-head .sub { font-size: 12px; }
  .page-head > .seg { width: 100%; }
  .page-head > .seg button { flex: 1; }

  .tiles { gap: 8px; margin-bottom: 9px; }
  .tile { padding: 12px 13px; border-radius: 13px; }
  .tile .k { font-size: 11.5px; }
  .tile .v { font-size: 23px; margin-top: 3px; }
  .tile .v small { font-size: 13px; }
  .tile .d { font-size: 11px; line-height: 1.35; margin-top: 3px; }
  .tile.hero { gap: 12px; min-height: 92px; }
  .tile.hero .v { font-size: 32px; }

  .grid { gap: 9px; }
  .panel { padding: 13px 13px 11px; border-radius: 13px; }
  .panel .panel-head { margin-bottom: 10px; gap: 7px; }
  .panel h2 { font-size: 14.5px; }
  .panel .hint { font-size: 11.5px; }
  .legend { gap: 4px 9px; font-size: 11px; }
  .legend i { width: 9px; height: 9px; margin-right: 3px; }

  /* The old 320px inner scroller made the dashboard feel like a nested app.
     A shorter map keeps chapter context visible while the page remains the
     only primary scroll surface. */
  .hm-wrap {
    max-height: 214px;
    gap: 7px;
    overscroll-behavior: contain;
    contain: layout paint;
  }
  .hm-ch-block { gap: 7px; }
  .hm-ch-num { width: 25px; height: 25px; }
  .hm-cells { max-width: calc(100vw - 67px); }
  .hm-footer { gap: 8px; padding-top: 8px; }
  .hm-density { font-size: 10.5px; }
  /* Hundreds of cells can repaint during a mobile resize. Keep the map crisp
     and stable; chapter transitions still provide motion elsewhere. */
  .hm-cell, .hm-ch-block {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hm-cell:hover { transform: none; }
  .hm-slider { min-width: 100px; }

  .ch-row { padding: 9px 4px; gap: 3px 8px; }
  .ch-row .name, .weak-item .t { font-size: 13px; }
  .ch-row .pct { font-size: 13px; }
  .ch-row .bars { gap: 4px; }
  .mbar, .stack { height: 6px; }

  .nav {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 -5px 24px rgba(20, 18, 14, .06);
  }
  .nav a { min-height: 44px; font-size: 10.5px; gap: 2px; }
  .nav a svg { width: 21px; height: 21px; }

  .startbar { left: 10px; right: 10px; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); padding: 11px; border-radius: 15px; gap: 9px; }
  .startbar .opts { gap: 6px 9px; font-size: 11.5px; }
  .startbar .row { gap: 8px; }
  .startbar .row .btn { min-width: 126px; }
}

/* ============ 成就系统 ============ */

/* 掌握即时小提示 */
.ach-burst {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 900; pointer-events: none;
  background: rgba(8,10,30,.88); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15); border-radius: 20px;
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  color: #c8d2ff; letter-spacing: .04em;
  opacity: 0; transition: opacity .25s, transform .25s cubic-bezier(.2,.9,.3,1);
}
.ach-burst.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 成就横幅 */
.ach-banner {
  position: fixed; top: 16px; right: 16px; z-index: 800;
  width: 320px; max-width: calc(100vw - 32px);
  border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; gap: 12px; padding: 14px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  opacity: 0; transform: translateX(24px) scale(.97);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1);
}
.ach-banner.on { opacity: 1; transform: translateX(0) scale(1); }

.ach-bg {
  position: absolute; inset: 0; z-index: 0;
}

.ach-ring {
  position: relative; z-index: 1; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--ring, #5ab4f0);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 12px var(--ring, #5ab4f0);
}

.ach-text {
  position: relative; z-index: 1; flex: 1; min-width: 0;
}
.ach-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(200,210,255,.55); margin-bottom: 2px;
}
.ach-name { font-size: 15px; font-weight: 700; color: #e8eaf6; }
.ach-lore { font-size: 11.5px; color: rgba(200,210,255,.65); line-height: 1.5; margin-top: 2px; }

.ach-view {
  position: relative; z-index: 1; flex: none;
  font-size: 18px; text-decoration: none;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(255,255,255,.1);
  transition: background .15s;
}
.ach-view:hover { background: rgba(255,255,255,.2); }

.ach-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.12);
  color: rgba(200,210,255,.6); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.ach-close:hover { background: rgba(255,255,255,.25); color: #fff; }

/* 粒子 canvas */
.ach-canvas {
  position: fixed; inset: 0; z-index: 799; pointer-events: none;
}

/* 星图导航链接 */
.nav-ext {
  color: inherit; text-decoration: none;
}

/* ============ 轻量沉浸层 ============
   A restrained cool gradient gives the learning surface a sense of depth while
   preserving the existing light, sepia, and dark theme choices. */
body {
  background:
    radial-gradient(900px 520px at 4% -12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(760px 460px at 100% 4%, color-mix(in srgb, #7d8cff 7%, transparent), transparent 72%),
    var(--page);
  background-attachment: fixed;
}
.panel, .tile {
  border: 1px solid color-mix(in srgb, var(--accent) 9%, var(--hair));
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 98%, white), var(--surface));
}
.tile.hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 68%, var(--surface)), var(--surface)); }
.btn.accent { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 94%, white), var(--accent)); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 22%, transparent); }
.subj-bar, .nav { box-shadow: 0 6px 24px color-mix(in srgb, var(--ink) 6%, transparent); }

@media (max-width: 639px) {
  .main { scroll-padding-top: calc(var(--safe-t) + 52px); }
  .panel, .tile { box-shadow: 0 7px 22px color-mix(in srgb, var(--ink) 7%, transparent), 0 0 0 1px var(--ring); }
  .nav a { position: relative; }
  .nav a.on::before { content: ''; position: absolute; top: 5px; width: 24px; height: 3px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); }
  .hm-wrap.hm-ready .hm-cell, .hm-wrap.hm-ready .hm-ch-block { animation: none !important; opacity: 1; transform: none; }
}

/* ============ Linear-inspired application chrome ============
   The mastery map keeps its existing geometry and cell language. The shell,
   content surfaces, controls and study flow share this quieter product layer. */
:root {
  --page: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f5;
  --ink: #1f2329;
  --ink-2: #565d6a;
  --muted: #89919e;
  --hair: #e1e5ea;
  --axis: #c5ccd5;
  --ring: rgba(31, 35, 41, .08);
  --shadow: 0 1px 2px rgba(31,35,41,.04), 0 14px 34px rgba(31,35,41,.055);
  --accent: #5e64d6;
  --accent-ink: #4f55b9;
  --accent-soft: rgba(94, 100, 214, .11);
  --good: #148566;
  --warn: #ad741e;
  --bad: #bd4548;
  --radius: 10px;
  --nav-w: 236px;
  --ease-standard: cubic-bezier(.2,.7,.2,1);
}

:root[data-theme="sepia"] {
  --page: #f4eee3; --surface: #fbf6ec; --surface-2: #eee6d8;
  --ink: #3c342a; --ink-2: #6c5d4c; --muted: #968876; --hair: #dfd3c0; --axis: #c8b79f;
  --ring: rgba(85, 62, 30, .10); --shadow: 0 1px 2px rgba(85,62,30,.05), 0 14px 34px rgba(85,62,30,.07);
  --accent: #7561b5; --accent-ink: #5f4b9f; --accent-soft: rgba(117,97,181,.12);
}

:root[data-theme="dark"] {
  --page: #18191c; --surface: #202125; --surface-2: #292b30;
  --ink: #f1f2f4; --ink-2: #c3c7d0; --muted: #8f96a3; --hair: #34373e; --axis: #4c515c;
  --ring: rgba(255,255,255,.085); --shadow: 0 1px 2px rgba(0,0,0,.32), 0 16px 36px rgba(0,0,0,.22);
  --accent: #8b8ff2; --accent-ink: #b9bbff; --accent-soft: rgba(139,143,242,.16);
  --good: #48b894; --warn: #e3ad57; --bad: #f08387;
}

body {
  background: var(--page);
  background-attachment: initial;
  transition: background-color .22s var(--ease-standard), color .22s var(--ease-standard);
}

.nav {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-color: var(--hair);
  box-shadow: none;
}
.nav a { transition: background-color .16s var(--ease-standard), color .16s var(--ease-standard); }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.on { background: var(--accent-soft); color: var(--ink); }
.nav a.on svg { stroke: var(--accent); }
.nav::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent); opacity: .5; pointer-events: none; }
.nav .brand { color: var(--ink); }
.nav .brand::after {
  content: '背诵台'; display: none; font-size: 14px; font-weight: 650; letter-spacing: -.01em;
}
.nav .nav-ext { margin-top: 4px; }

.main { max-width: 1320px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 25px; font-weight: 650; letter-spacing: -.025em; }
.page-head .sub { color: var(--muted); }

.panel, .tile {
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(31,35,41,.035), 0 8px 24px rgba(31,35,41,.035);
  background: var(--surface);
}
.panel { border-radius: 10px; padding: 22px 22px 20px; }
.tile { border-radius: 10px; padding: 18px 19px; }
.tile.hero {
  color: #f7f8ff;
  border-color: transparent;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(139, 143, 242, .38), transparent 54%),
    linear-gradient(135deg, #202337 0%, #2c2f59 100%);
  box-shadow: 0 12px 28px rgba(40, 43, 90, .20);
}
.tile.hero .k, .tile.hero .d, .tile.hero .v small { color: rgba(247,248,255,.68); }
.tile.hero .v { color: #fff; }
.tile.hero .ring-meter circle:first-child { stroke: rgba(255,255,255,.16) !important; }
.panel h2 { font-size: 15px; letter-spacing: -.01em; }
.panel .panel-head { margin-bottom: 15px; }
.tile .v { letter-spacing: -.035em; }

.seg { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px; padding: 2px; }
.seg button { min-height: 34px; border-radius: 6px; transition: background-color .16s var(--ease-standard), color .16s var(--ease-standard), box-shadow .16s var(--ease-standard); }
.seg button.on { box-shadow: 0 1px 2px rgba(31,35,41,.08), 0 0 0 1px var(--ring); }
.btn { height: 42px; border-radius: 8px; font-weight: 600; transition: transform .14s var(--ease-standard), background-color .16s var(--ease-standard), box-shadow .16s var(--ease-standard), opacity .16s; }
.btn:hover { box-shadow: 0 3px 12px rgba(31,35,41,.08); }
.btn.primary { background: var(--ink); color: var(--surface); }
.btn.accent { background: var(--accent); box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 22%, transparent); }
.btn.ghost { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.btn.sm { height: 36px; border-radius: 7px; font-weight: 550; }
.chip { border-radius: 5px; }

.subj-bar {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-color: var(--hair); box-shadow: none;
  justify-content: flex-start;
}
.subj-bar button { border-radius: 7px; transition: background-color .16s var(--ease-standard), color .16s var(--ease-standard); }
.subj-bar button.on { background: var(--accent-soft); color: var(--accent-ink); }

.ch-row, .weak-item, .toc-card { transition: background-color .14s var(--ease-standard), box-shadow .14s var(--ease-standard); }
.ch-row:hover, .weak-item:hover, .toc-card:hover { background: var(--surface-2); }
.toc-ch > .hd, .toc-body { box-shadow: 0 0 0 1px var(--ring); }
.toc-ch > .hd { border: 1px solid var(--hair); }
.toc-body { border: 1px solid var(--hair); border-top: 0; }
.startbar { border: 1px solid var(--hair); box-shadow: 0 18px 44px rgba(31,35,41,.14); border-radius: 12px; }

.study { background: var(--page); }
.study-top { border-bottom: 1px solid var(--hair); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.study-top .x { border-radius: 8px; }
.study-top .x:hover, .study-top .tools button:hover { background: var(--surface-2); }
.progress { height: 5px; }
.progress i { background: var(--accent); }
.sheet { border: 1px solid var(--hair); box-shadow: 0 12px 40px rgba(31,35,41,.06); border-radius: 12px; }
.study-bar { border-top: 1px solid var(--hair); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bigbtn, .grade { border-radius: 9px; }
.grade:hover { box-shadow: 0 4px 15px rgba(31,35,41,.08); }
.summary .gstats div, .summary .delta .row { border: 1px solid var(--hair); box-shadow: none; }

.drawer { border: 1px solid var(--hair); box-shadow: -18px 0 44px rgba(31,35,41,.12); }
.scrim { background: rgba(15, 18, 24, .34); backdrop-filter: blur(2px); }
.drawer .kv div, .drawer .lvpick button { border: 1px solid var(--hair); background: var(--surface-2); }

.set-row { border-color: var(--hair); }
.login input { border: 1px solid var(--hair); box-shadow: none; }
.login input:focus { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent); }
.toast { border: 1px solid color-mix(in srgb, var(--surface) 18%, transparent); box-shadow: 0 12px 30px rgba(31,35,41,.18); }

@media (min-width: 900px) {
  .nav { width: var(--nav-w); padding: 12px 12px 18px; gap: 3px; align-items: stretch; }
  .nav .brand { height: 54px; margin: 0 0 12px; padding: 0 10px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
  .nav .brand::after { display: block; }
  .nav .brand svg { width: 30px; height: 30px; }
  .nav a { min-height: 44px; height: 44px; flex-direction: row; justify-content: flex-start; padding: 0 12px; border-radius: 8px; gap: 11px; font-size: 13px; }
  .nav a svg { width: 19px; height: 19px; }
  .nav .nav-ext { margin-top: auto; }
  .subj-bar { left: var(--nav-w); height: calc(var(--safe-t) + 58px); padding: var(--safe-t) 32px 0; gap: 4px; }
  .subj-bar button { flex: 0 0 auto; min-width: 124px; height: 36px; }
  .main { padding: 86px 56px 72px calc(var(--nav-w) + 56px); }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 58px + 28px); }
  .page-head { align-items: center; }
}

@media (max-width: 899px) {
  .nav a { min-height: 44px; }
  .seg button { min-height: 38px; }
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .panel, .tile { box-shadow: 0 5px 18px rgba(31,35,41,.055), 0 0 0 1px var(--ring); }
}

@media (max-width: 639px) {
  .page-head h1 { font-size: 21px; }
  .panel { padding: 14px 14px 12px; }
  .tile { padding: 13px 14px; }
  .subj-bar { background: color-mix(in srgb, var(--surface) 94%, transparent); }
  .startbar { box-shadow: 0 12px 34px rgba(31,35,41,.16); }
  .study-top { padding-left: 12px; padding-right: 12px; }
  .sheet { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
  .study-bar { padding-left: 12px; padding-right: 12px; }
}

/* ============ Dashboard composition v2 ============
   The dashboard uses one intentional summary surface instead of a pile of
   independent tiles. Map internals remain untouched; only the surrounding
   hierarchy and responsive shell are rebalanced. */
.dashboard-stats {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  min-height: 136px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31,35,41,.035), 0 8px 24px rgba(31,35,41,.035);
}
.stat-primary {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 20px 22px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 72%, var(--surface)), var(--surface));
}
.stat-ring { display: grid; place-items: center; width: 68px; height: 68px; }
.stat-ring .ring-meter { width: 68px; height: 68px; }
.stat-ring .ring-meter circle:first-child { stroke: var(--hair) !important; }
.stat-ring .ring-meter circle:last-child { stroke: var(--accent) !important; }
.stat-primary-copy, .stat-item { min-width: 0; }
.eyebrow { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.stat-value { margin-top: 4px; color: var(--ink); font: 650 34px/1.05 var(--ui-font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stat-value small { margin-left: 3px; color: var(--muted); font-size: .48em; font-weight: 550; letter-spacing: 0; }
.stat-caption { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.stat-cta { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--hair)); border-radius: 8px; color: var(--accent-ink); background: color-mix(in srgb, var(--surface) 65%, transparent); font-size: 12px; font-weight: 650; white-space: nowrap; transition: background-color .16s var(--ease-standard), transform .16s var(--ease-standard); }
.stat-cta:hover { background: var(--surface); transform: translateY(-1px); }
.stat-cta svg { width: 14px; height: 14px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
.stat-item { display: flex; flex-direction: column; justify-content: center; min-height: 136px; padding: 18px 16px; border-left: 1px solid var(--hair); }
.stat-item .stat-value { font-size: 26px; }
.dashboard-stats + .grid { gap: 20px; }
.map-panel { overflow: hidden; }

@media (max-width: 899px) {
  .dashboard-stats { grid-template-columns: 1fr; min-height: 0; margin-bottom: 12px; }
  .stat-primary { min-height: 118px; padding: 17px 16px; }
  .stat-grid { border-top: 1px solid var(--hair); }
  .stat-item { min-height: 76px; padding: 12px 11px; }
  .stat-item .stat-value { font-size: 23px; }
  .stat-item .stat-caption { font-size: 10.5px; }
}

@media (max-width: 639px) {
  .subj-bar { height: calc(var(--safe-t) + 43px); padding: var(--safe-t) 12px 0; gap: 2px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 1px 0 var(--hair); }
  .subj-bar button { min-width: 0; height: 34px; padding: 0 14px; border-radius: 0; background: transparent; color: var(--muted); font-size: 13px; }
  .subj-bar button.on { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 43px + 14px); }
  .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 0 2px 12px; }
  .page-head h1 { font-size: 23px; letter-spacing: -.035em; }
  .page-head .sub { min-width: 0; margin-top: 3px; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
  .page-head > .seg { width: auto; max-width: 184px; align-self: center; }
  .page-head > .seg button { flex: none; min-height: 32px; padding: 0 9px; font-size: 11.5px; }
  .dashboard-stats { border-radius: 15px; box-shadow: 0 1px 2px rgba(31,35,41,.035), 0 6px 18px rgba(31,35,41,.035); }
  .stat-primary { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 11px; min-height: 112px; padding: 16px 13px; }
  .stat-ring, .stat-ring .ring-meter { width: 56px; height: 56px; }
  .stat-primary .stat-value { margin-top: 3px; font-size: 31px; }
  .stat-primary .stat-caption { max-width: 150px; font-size: 10.5px; }
  .stat-cta { min-height: 34px; padding: 0 8px; font-size: 11px; }
  .stat-cta svg { width: 13px; height: 13px; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-item { min-height: 72px; padding: 11px 9px; }
  .eyebrow { font-size: 10.5px; }
  .stat-item .stat-value { margin-top: 4px; font-size: 22px; }
  .stat-item .stat-caption { margin-top: 3px; font-size: 10px; }
  .dashboard-stats + .grid { gap: 12px; }
  .panel { border-radius: 13px; box-shadow: 0 1px 2px rgba(31,35,41,.035), 0 5px 16px rgba(31,35,41,.03); }
  .map-panel { padding: 13px 12px 11px; }
  .map-panel .panel-head { margin-bottom: 8px; }
  .map-panel .hint { margin-top: 8px !important; font-size: 10.5px; line-height: 1.45; }
  .map-panel .legend { gap: 4px 8px; font-size: 10.5px; }
  .hm-wrap { max-height: 214px; scrollbar-width: none; }
  .hm-wrap::-webkit-scrollbar { width: 0; height: 0; }
  .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { box-shadow: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 15px 2px 3px; background: transparent; }
  .chapter-panel .panel-head, .trend-panel .panel-head, .weak-panel .panel-head, .keyword-panel .panel-head { margin-bottom: 9px; }
  .chapter-panel .legend { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .chapter-panel .legend::-webkit-scrollbar { display: none; }
  .nav { background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 -4px 18px rgba(31,35,41,.07); }
  .nav a.on { background: transparent; color: var(--accent-ink); }
  .nav a.on svg { width: 24px; height: 24px; padding: 4px; border-radius: 8px; background: var(--accent-soft); }
  .nav a.on::before { display: none; }

  /* Directory becomes a quiet, scan-first list instead of stacked cards. */
  #toc { border-top: 1px solid var(--hair); }
  .toc-ch { margin: 0; border-bottom: 1px solid var(--hair); }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 56px; padding: 0 3px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .toc-ch > .hd .ttl { font-size: 14px; }
  .toc-ch > .hd .meta { gap: 7px; font-size: 11.5px; }
  .toc-ch > .hd .meta .mbar { width: 42px; }
  .toc-body { padding: 3px 0 10px 28px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .toc-sec > .sh { padding: 8px 0 5px; font-size: 12.5px; }
  .toc-card { min-height: 42px; padding: 8px 6px; border-radius: 6px; }
  .toc-card .ct { font-size: 13px; }
}

/* ============ Final visual pass ============ */
:root {
  --rail: #252833;
  --rail-ink: #f7f8fc;
  --rail-muted: #aab0bf;
  --rail-line: rgba(255,255,255,.11);
  --signal: #2d9f87;
}
:root[data-theme="dark"] { --rail: #111217; --rail-ink: #f2f3f7; --rail-muted: #9da3b1; --rail-line: rgba(255,255,255,.12); --signal: #55c4a4; }
:root[data-theme="sepia"] { --rail: #403a38; --rail-ink: #fffaf2; --rail-muted: #cfc2b8; --rail-line: rgba(255,250,242,.15); }
body { background: linear-gradient(180deg, color-mix(in srgb, var(--page) 92%, white), var(--page)); }

.dashboard-stats { border-color: color-mix(in srgb, var(--ink) 10%, var(--hair)); box-shadow: 0 12px 30px rgba(31,35,41,.065), 0 1px 2px rgba(31,35,41,.04); }
.stat-primary { border-left: 0; color: #fff; background: linear-gradient(135deg, #252831 0%, #343844 100%); }
.stat-primary .eyebrow, .stat-primary .stat-caption { color: rgba(247,248,252,.62); }
.stat-primary .stat-value { color: #fff; }
.stat-primary .stat-value small { color: rgba(247,248,252,.68); }
.stat-primary .stat-cta { border-color: rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.08); }
.stat-primary .stat-cta:hover { background: rgba(255,255,255,.16); }
.stat-primary .stat-ring .ring-meter circle:first-child { stroke: rgba(255,255,255,.18) !important; }
.stat-primary .stat-ring .ring-meter circle:last-child { stroke: #aaa7ff !important; }
.stat-grid { background: var(--surface); }
.stat-item { border-left-color: var(--hair); }
.stat-item:nth-child(2) .stat-value { color: var(--accent-ink); }
.stat-item:nth-child(3) .stat-value { color: var(--signal); }
.stat-item:nth-child(3) .stat-caption { color: color-mix(in srgb, var(--signal) 72%, var(--muted)); }
.map-panel { border-color: color-mix(in srgb, var(--ink) 9%, var(--hair)); }

@media (min-width: 900px) {
  .nav.linear-nav { background: var(--rail); border-right-color: transparent; box-shadow: 12px 0 36px rgba(20,24,32,.08); }
  .nav.linear-nav .linear-brand { color: var(--rail-ink); }
  .nav.linear-nav .brand-copy strong { color: var(--rail-ink); }
  .nav.linear-nav .brand-copy small, .nav.linear-nav .nav-section-label, .nav.linear-nav .nav-hint, .nav.linear-nav .nav-sync { color: var(--rail-muted); }
  .nav.linear-nav .workspace-context { border-color: var(--rail-line); background: rgba(255,255,255,.06); }
  .nav.linear-nav .workspace-context .workspace-name b { color: var(--rail-ink); }
  .nav.linear-nav a:not(.brand-home) { color: var(--rail-muted); }
  .nav.linear-nav a:not(.brand-home):hover { background: rgba(255,255,255,.07); color: var(--rail-ink); }
  .nav.linear-nav a:not(.brand-home).on { background: rgba(117,115,225,.22); color: var(--rail-ink); box-shadow: inset 2px 0 0 #9a96ff; }
  .nav.linear-nav a:not(.brand-home).on svg { stroke: #b6b3ff; }
  .nav.linear-nav .nav-foot { border-top-color: var(--rail-line); }
  .nav.linear-nav::after { display: none; }
  .dashboard-grid { gap: 22px; }
  .dashboard-grid > .map-panel, .dashboard-grid > .chapter-panel, .dashboard-grid > .insight-grid, .dashboard-grid > .keyword-panel { grid-column: 1 / -1; }
  .chapter-panel .ch-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

@media (max-width: 639px) {
  body { background: linear-gradient(180deg, #f8f9fb 0, var(--page) 44%, #f7f8fa 100%); }
  .stat-primary { min-height: 116px; background: linear-gradient(135deg, #252831 0%, #343844 100%); }
  .stat-primary .stat-caption { color: rgba(247,248,252,.62); }
  .map-panel { border-color: color-mix(in srgb, var(--ink) 9%, var(--hair)); }
}

#toc { border-top: 1px solid var(--hair); }
.toc-ch { margin: 0; border-bottom: 1px solid var(--hair); }
.toc-ch > .hd, .toc-ch.open > .hd { min-height: 58px; padding: 0 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.toc-body { padding: 4px 0 10px 30px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* ============ Final cascade for the crafted workspace ============ */
body { background: var(--page); }
.page-head { align-items: center; }
.page-title-block { min-width: 0; }
.page-kicker, .panel-kicker { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.page-kicker { margin-bottom: 7px; }
.page-kicker span { color: color-mix(in srgb, var(--muted) 55%, transparent); padding: 0 3px; }
.panel-kicker { margin-bottom: 4px; letter-spacing: .1em; }
.page-head-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.subject-label { flex: none; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.subject-tabs { display: flex; align-items: center; gap: 3px; min-width: 0; }
.subject-tabs button { min-width: 0; }
.stat-primary { position: relative; background: #252831; }
:root[data-theme="dark"] .stat-primary { background: #111318; }
:root[data-theme="sepia"] .stat-primary { background: #433c37; }
.stat-primary-action { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.action-label { color: rgba(247,248,252,.54); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow-dot { width: 6px; height: 6px; display: inline-block; margin: 0 6px 1px 0; border-radius: 50%; background: #aaa7ff; box-shadow: 0 0 0 3px rgba(170,167,255,.14); }
.stat-item .stat-value { color: var(--ink); }
.stat-item-review .eyebrow::before { content: ''; width: 6px; height: 6px; display: inline-block; margin: 0 6px 1px 0; border-radius: 50%; background: var(--signal); }
.stat-item-review .stat-caption { color: color-mix(in srgb, var(--signal) 68%, var(--muted)); }
.sync-dot.offline { background: var(--muted); }

@media (min-width: 900px) {
  .subj-bar { height: calc(var(--safe-t) + 52px); padding: var(--safe-t) 36px 0; gap: 14px; background: var(--surface); border-bottom-color: var(--hair); }
  .subject-tabs { flex: 1; }
  .subject-tabs button { flex: 0 0 auto; min-width: 128px; height: 34px; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 52px + 24px); }
  .page-head { margin-bottom: 22px; }
  .page-head h1 { font-size: 28px; letter-spacing: -.035em; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.58fr) minmax(320px, .92fr); column-gap: 24px; row-gap: 22px; align-items: start; }
  .dashboard-grid > .map-panel { grid-column: 1; grid-row: 1; }
  .dashboard-grid > .chapter-panel { grid-column: 2; grid-row: 1; }
  .dashboard-grid > .insight-grid { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; grid-row: 3; }
  .chapter-panel .ch-rows { grid-template-columns: 1fr; max-height: 520px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
  .chapter-panel .ch-rows::-webkit-scrollbar { width: 4px; }
  .chapter-panel .ch-rows::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 99px; }
  .chapter-panel .panel-head { align-items: flex-end; }
  .dashboard-stats { margin-bottom: 22px; }
}

@media (max-width: 899px) { .page-head-actions { width: auto; } .subject-label { font-size: 9px; } }

@media (max-width: 639px) {
  body { background: var(--page); }
  .subj-bar { height: calc(var(--safe-t) + 44px); padding: var(--safe-t) 13px 0; gap: 11px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 1px 0 var(--hair); }
  .subject-tabs { flex: 1; gap: 0; }
  .subject-tabs button { flex: 1; height: 33px; padding: 0 8px; border-radius: 0; font-size: 12.5px; }
  .page-head { display: block; margin: 0 1px 14px; }
  .page-kicker { margin-bottom: 6px; font-size: 9.5px; }
  .page-head h1 { font-size: 24px; letter-spacing: -.045em; line-height: 1.15; }
  .page-head .sub { max-width: 100%; margin-top: 5px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-head-actions { width: 100%; margin-top: 11px; }
  .page-head-actions .seg { width: 100%; }
  .page-head-actions .seg button { flex: 1; min-width: 0; padding: 0 7px; font-size: 11.5px; }
  .browse-head .page-head-actions { justify-content: flex-end; }
  .browse-head .page-head-actions .btn { min-width: 94px; }
  .dashboard-stats { margin-bottom: 14px; border-radius: 14px; box-shadow: 0 1px 2px rgba(31,35,41,.06), 0 9px 22px rgba(31,35,41,.05); }
  .stat-primary { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; min-height: 116px; padding: 16px 14px; }
  .stat-primary-action { gap: 4px; }
  .stat-primary .stat-value { font-size: 32px; }
  .stat-primary .stat-caption { max-width: 155px; font-size: 10.5px; }
  .stat-cta { min-height: 35px; padding: 0 9px; border-radius: 8px; font-size: 11px; }
  .stat-grid { border-top-color: color-mix(in srgb, var(--hair) 80%, transparent); }
  .stat-item { min-height: 74px; padding: 11px 9px; }
  .stat-item .stat-value { font-size: 22px; }
  .stat-item .stat-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .map-panel { padding: 16px 0 11px; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: transparent; box-shadow: none; }
  .map-panel .panel-head { padding: 0 2px; margin-bottom: 9px; }
  .map-panel .hint { padding: 0 2px; }
  .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { padding-left: 2px; padding-right: 2px; }
  .chapter-panel .panel-head, .trend-panel .panel-head, .weak-panel .panel-head, .keyword-panel .panel-head { align-items: flex-end; }
  .chapter-panel .panel-kicker, .trend-panel .panel-kicker, .weak-panel .panel-kicker, .keyword-panel .panel-kicker { font-size: 9px; }
  .ch-row { min-height: 62px; padding: 10px 3px; border-top-color: color-mix(in srgb, var(--hair) 75%, transparent); }
  .ch-row .name .no { display: inline-grid; place-items: center; width: 27px; height: 22px; margin-right: 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: 10px; }
  .nav { background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 -6px 22px rgba(31,35,41,.08); }
  .nav a.on { color: var(--accent-ink); }
  .nav a.on svg { background: transparent; }
  .nav a.on::before { display: block; top: 0; width: 28px; height: 2px; border-radius: 0 0 4px 4px; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) { .stat-cta, .nav a, .ch-row, .toc-card { transition: none !important; } } /* final cascade */

/* ============ 2026 workspace direction: final layer ============ */
:root {
  --page: #f2f2ef; --surface: #fcfcfa; --surface-2: #e9e9e5;
  --ink: #202127; --ink-2: #686a75; --muted: #9597a0; --hair: #deded9;
  --ring: rgba(32,33,39,.08); --accent: #6965d8; --accent-ink: #514db4;
  --accent-soft: rgba(105,101,216,.11); --good: #2f9f82; --signal: #2f9f82;
  --rail: #1c1d24; --rail-ink: #f7f7f4; --rail-muted: #a2a3ae; --rail-line: rgba(255,255,255,.12);
}
:root[data-theme="dark"] {
  --page: #15161b; --surface: #1d1e25; --surface-2: #272831; --ink: #f2f2ee;
  --ink-2: #c0c0c8; --muted: #8c8e99; --hair: #34353e; --accent: #9a96ff;
  --accent-ink: #b6b3ff; --accent-soft: rgba(154,150,255,.15); --rail: #101116;
  --rail-ink: #f7f7f4; --rail-muted: #9b9ca7; --rail-line: rgba(255,255,255,.12);
}
:root[data-theme="sepia"] {
  --page: #efe8dc; --surface: #fbf4e8; --surface-2: #e9dece; --ink: #3c342d;
  --ink-2: #716357; --muted: #9b8976; --hair: #ded0bd; --accent: #765fc1;
  --accent-ink: #604aa9; --accent-soft: rgba(118,95,193,.12); --rail: #3a3535;
  --rail-ink: #fffaf2; --rail-muted: #d0c4b8; --rail-line: rgba(255,250,242,.16);
}
body { background: var(--page); color: var(--ink); }
.main { max-width: 1440px; }
.page-head { margin-top: 8px; }
.page-head h1 { font-weight: 680; letter-spacing: -.04em; }
.page-head .sub { color: var(--ink-2); }
.page-kicker, .panel-kicker { color: var(--muted); letter-spacing: .16em; }
.panel { border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(32,33,39,.035), 0 12px 30px rgba(32,33,39,.045); }
.panel .panel-head { margin-bottom: 16px; }
.panel h2 { font-weight: 650; letter-spacing: -.02em; }
.seg { border: 1px solid var(--hair); background: var(--surface-2); }
.seg button { min-height: 34px; }
.seg button.on { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(32,33,39,.1); }
.btn { border-radius: 9px; font-weight: 620; }
.btn.accent { background: var(--accent); box-shadow: 0 5px 14px rgba(105,101,216,.22); }
.btn.accent:hover { background: var(--accent-ink); }
.subj-bar { background: var(--surface); border-bottom: 1px solid var(--hair); }
.subject-label { display: inline-flex; align-items: center; gap: 7px; }
.subject-mini-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.subject-status { margin-left: auto; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.subject-tabs button { color: var(--muted); }
.subject-tabs button.on { color: var(--ink); }

/* One dark summary surface with a clear action hierarchy. */
.dashboard-stats { background: #24252e; border: 0; border-radius: 18px; box-shadow: 0 18px 42px rgba(31,31,40,.15); }
.stat-primary { background: #24252e; border-right: 1px solid rgba(255,255,255,.1); }
.stat-grid { background: #2a2b34; }
.stat-item { border-left-color: rgba(255,255,255,.1); }
.stat-item .eyebrow, .stat-item .stat-caption { color: rgba(247,247,244,.58); }
.stat-item .stat-value { color: #f7f7f4; }
.stat-item:nth-child(2) .stat-value { color: #b7b4ff; }
.stat-item:nth-child(3) .stat-value { color: #64c6a9; }
.stat-item:nth-child(3) .stat-caption { color: rgba(100,198,169,.8); }
.stat-primary .stat-cta { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 5px 16px rgba(105,101,216,.28); }
.stat-primary .stat-cta:hover { background: #7c78ea; }
.stat-primary .stat-ring .ring-meter circle:first-child { stroke: rgba(255,255,255,.15) !important; }
.stat-primary .stat-ring .ring-meter circle:last-child { stroke: #aaa7ff !important; }

@media (min-width: 900px) {
  :root { --nav-w: 252px; }
  .nav.linear-nav { width: var(--nav-w); background: var(--rail); box-shadow: 16px 0 44px rgba(20,20,26,.1); }
  .nav.linear-nav .linear-brand { margin: 0 6px 26px; }
  .nav.linear-nav a:not(.brand-home) { height: 40px; border-radius: 9px; }
  .nav.linear-nav a:not(.brand-home).on { background: rgba(154,150,255,.18); box-shadow: inset 3px 0 0 #aaa7ff; }
  .subj-bar { left: var(--nav-w); height: calc(var(--safe-t) + 60px); padding: var(--safe-t) 42px 0; }
  .subject-tabs button { height: 38px; min-width: 138px; border-radius: 9px; }
  .main { padding-left: calc(var(--nav-w) + 56px); padding-right: 56px; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 60px + 30px); }
  .page-head { margin-bottom: 26px; }
  .page-head h1 { font-size: 32px; }
  .dashboard-stats { grid-template-columns: minmax(400px,1.08fr) minmax(0,1.42fr); min-height: 148px; }
  .stat-primary { grid-template-columns: 74px minmax(0,1fr) auto; padding: 24px 28px; }
  .stat-ring, .stat-ring .ring-meter { width: 74px; height: 74px; }
  .stat-item { min-height: 148px; padding: 22px 20px; }
  .stat-item .stat-value { font-size: 29px; }
  .dashboard-grid { grid-template-columns: minmax(0,1.3fr) minmax(340px,.86fr); gap: 20px; }
  .dashboard-grid > .map-panel { grid-column: 1; grid-row: 1; }
  .dashboard-grid > .chapter-panel { grid-column: 2; grid-row: 1; }
  .dashboard-grid > .insight-grid { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; grid-row: 3; }
  .map-panel, .chapter-panel { min-height: 100%; border-radius: 18px; }
  .map-panel { padding: 22px 24px 20px; }
  .chapter-panel { padding: 22px 22px 18px; }
  .chapter-panel .ch-rows { max-height: 568px; }
  .insight-grid { gap: 20px; }
  .keyword-panel { border-radius: 18px; }
}

@media (max-width: 899px) {
  body { background: var(--page); }
  .main { padding: calc(var(--safe-t) + 16px) 14px calc(var(--tab-h) + var(--safe-b) + 24px); }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 43px + 18px); }
  .subject-status { display: none; }
  .subj-bar { height: calc(var(--safe-t) + 43px); padding: var(--safe-t) 14px 0; background: color-mix(in srgb, var(--surface) 96%, transparent); }
  .subject-label { font-size: 9.5px; letter-spacing: .12em; }
  .subject-tabs button { height: 34px; border-radius: 8px 8px 0 0; }
  .page-head { gap: 9px; margin: 0 0 16px; }
  .page-head h1 { font-size: 27px; line-height: 1.12; }
  .page-head .sub { font-size: 12px; margin-top: 5px; }
  .dashboard-head .page-head-actions { grid-column: 1 / -1; width: 100%; margin-top: 2px; }
  .dashboard-head .page-head-actions .seg { width: 100%; }
  .dashboard-head .page-head-actions .seg button { flex: 1; }
  .dashboard-stats { grid-template-columns: 1fr; margin-bottom: 18px; border-radius: 18px; }
  .stat-primary { grid-template-columns: 56px minmax(0,1fr) auto; min-height: 118px; padding: 18px 16px; gap: 11px; }
  .stat-ring, .stat-ring .ring-meter { width: 56px; height: 56px; }
  .stat-primary .stat-value { font-size: 34px; }
  .stat-primary .stat-caption { font-size: 10.5px; max-width: 160px; }
  .stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.1); }
  .stat-item { min-height: 74px; padding: 12px 11px; border-left-color: rgba(255,255,255,.1); }
  .stat-item:first-child { border-left: 0; }
  .stat-item .stat-value { font-size: 22px; }
  .stat-item .stat-caption { font-size: 10px; }
  .dashboard-grid { display: grid; gap: 14px; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border-radius: 18px; padding: 16px 15px 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(32,33,39,.035), 0 9px 22px rgba(32,33,39,.045); }
  .map-panel .panel-head { margin-bottom: 11px; }
  .map-panel .legend { gap: 4px 9px; font-size: 10.5px; }
  .tm-mobile-only { padding: 10px 8px; border-radius: 12px; background: var(--surface-2); }
  .hm-wrap { max-height: 222px; scrollbar-width: none; }
  .hm-wrap::-webkit-scrollbar { width: 0; height: 0; }
  .map-panel .hint { margin-top: 10px !important; font-size: 10.5px; line-height: 1.45; }
  .chapter-panel .panel-head { margin-bottom: 10px; }
  .chapter-panel .legend { display: flex; gap: 5px 9px; font-size: 10px; overflow: hidden; }
  .chapter-panel .ch-rows { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; }
  .ch-row { min-height: 66px; padding: 10px 0; border-top-color: var(--hair); border-radius: 0; }
  .ch-row .name { white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ch-row .name .no { display: inline-grid; place-items: center; width: 24px; height: 20px; margin-right: 5px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9px; }
  .ch-row .pct { font-size: 12px; }
  .mbar, .stack { height: 6px; }
  .insight-grid { gap: 14px; }
  .nav { background: #202127; border-top: 0; box-shadow: 0 -12px 28px rgba(20,20,26,.16); }
  .nav a, .nav a.on { color: rgba(247,247,244,.62); }
  .nav a.on { color: #fff; }
  .nav a.on svg { color: #aaa7ff; stroke: #aaa7ff; background: transparent; }
  .nav a.on::before { display: block; top: 0; width: 34px; height: 2px; background: #aaa7ff; box-shadow: none; }
  .startbar { bottom: calc(var(--tab-h) + var(--safe-b) + 10px); border-radius: 14px; }
}

#toc { counter-reset: toc-chapter; }
.toc-ch { counter-increment: toc-chapter; }
.toc-ch > .hd::before { content: counter(toc-chapter, decimal-leading-zero); color: var(--accent-ink); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.toc-ch > .hd { grid-template-columns: 22px 22px minmax(0,1fr) auto; border-color: var(--hair); }
.toc-ch > .hd .ttl { font-weight: 650; }
.toc-card { border-radius: 7px; }
@media (max-width: 639px) {
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 60px; grid-template-columns: 22px 20px minmax(0,1fr) auto; padding: 0 2px; }
  .toc-ch > .hd .ttl { font-size: 13.5px; }
  .toc-ch > .hd .meta { gap: 6px; }
  .toc-ch > .hd .meta .mbar { width: 38px; }
  .toc-body { padding-left: 28px; }
}

/* ============ FINAL UI OVERRIDE: LATEST ============ */
:root {
  --page: #f4f4f1; --surface: #fff; --surface-2: #ecece8;
  --ink: #1f2024; --ink-2: #64666f; --muted: #92949c; --hair: #dfdfda;
  --accent: #5d60d8; --accent-ink: #494cb9; --accent-soft: rgba(93,96,216,.12);
  --good: #2f9f82; --signal: #2f9f82; --warn: #ce8746; --bad: #c85b61;
  --shadow: 0 1px 2px rgba(31,32,36,.04), 0 14px 34px rgba(31,32,36,.055);
  --rail: #1b1c21; --rail-ink: #f7f7f4; --rail-muted: #a2a4ae;
}
:root[data-theme="dark"] {
  --page: #141518; --surface: #1c1d22; --surface-2: #27282e;
  --ink: #f2f2ed; --ink-2: #c0c1c7; --muted: #8d8f99; --hair: #33343b;
  --accent: #9b98ff; --accent-ink: #bdbaff; --accent-soft: rgba(155,152,255,.15);
  --shadow: 0 1px 2px rgba(0,0,0,.22), 0 18px 42px rgba(0,0,0,.17); --rail: #101115;
}
:root[data-theme="sepia"] {
  --page: #f0e9dd; --surface: #fbf6ed; --surface-2: #e9dfd0;
  --ink: #3b332b; --ink-2: #716458; --muted: #9b8977; --hair: #ded0bd;
  --accent: #715dcc; --accent-ink: #5b49a5; --accent-soft: rgba(113,93,204,.12); --rail: #3a3535;
}
body { background: var(--page); color: var(--ink); }
.main { max-width: 1540px; }
.page-head h1 { font-weight: 720; letter-spacing: -.045em; }
.page-head .sub { color: var(--ink-2); }
.page-kicker, .panel-kicker { letter-spacing: .14em; font-weight: 700; }
.panel { border-color: var(--hair); box-shadow: var(--shadow); }
.panel h2 { font-weight: 680; letter-spacing: -.025em; }
.panel-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.map-expand { display: none; height: 28px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 7px; color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.map-expand:hover { color: var(--ink); background: var(--surface-2); }

.dashboard-stats { overflow: hidden; border: 1px solid rgba(27,28,33,.12); border-radius: 16px; background: #24252d; box-shadow: 0 18px 44px rgba(30,31,39,.13); }
.stat-primary { display: flex; flex-direction: column; gap: 17px; min-width: 0; padding: 21px 24px 16px; background: #24252d; border-right: 1px solid rgba(255,255,255,.1); }
.stat-primary-top, .stat-primary-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.stat-primary-top .eyebrow { color: rgba(247,247,244,.78); }
.stat-context, .stat-next-hint { color: rgba(247,247,244,.46); font-size: 10.5px; white-space: nowrap; }
.stat-primary-main { display: grid; grid-template-columns: 68px minmax(0,1fr) auto; align-items: center; gap: 16px; min-width: 0; }
.stat-primary-copy { min-width: 0; }
.stat-primary .stat-value { color: #fafaf7; font-size: 40px; font-weight: 720; letter-spacing: -.055em; line-height: 1; }
.stat-primary .stat-value small { margin-left: 3px; color: rgba(247,247,244,.62); font-size: 17px; letter-spacing: 0; }
.stat-primary .stat-caption { margin-top: 7px; max-width: 270px; color: rgba(247,247,244,.58); font-size: 11px; line-height: 1.45; }
.stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 68px; height: 68px; }
.stat-primary .stat-ring .ring-meter circle:first-child { stroke: rgba(255,255,255,.16) !important; }
.stat-primary .stat-ring .ring-meter circle:last-child { stroke: #aaa7ff !important; }
.stat-primary-action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.stat-primary .stat-cta { min-height: 37px; padding: 0 12px; border: 0; border-radius: 8px; background: #6a67e2; color: #fff; box-shadow: 0 7px 18px rgba(71,69,171,.33); font-size: 12px; font-weight: 680; }
.stat-primary .stat-cta:hover { background: #7774ee; }
.stat-primary-bottom { padding-top: 2px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(247,247,244,.55); font-size: 11px; }
.status-pulse { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #62c8a9; box-shadow: 0 0 0 3px rgba(98,200,169,.13); vertical-align: 1px; }
.stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: #2b2c34; }
.stat-item { min-width: 0; padding: 23px 20px 18px; border-left: 1px solid rgba(255,255,255,.1); }
.stat-item:first-child { border-left: 0; }
.stat-item .eyebrow, .stat-item .stat-caption { color: rgba(247,247,244,.52); }
.stat-item .stat-value { color: #f7f7f4; font-size: 30px; font-weight: 680; letter-spacing: -.045em; }
.stat-item .stat-value small { color: rgba(247,247,244,.52); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.stat-item:nth-child(2) .stat-value { color: #bbb8ff; }
.stat-item:nth-child(3) .stat-value { color: #66c8ab; }
.stat-item:nth-child(3) .stat-caption { color: rgba(102,200,171,.78); }

@media (min-width: 900px) {
  :root { --nav-w: 244px; }
  .nav.linear-nav { width: var(--nav-w); background: var(--rail); box-shadow: 16px 0 44px rgba(20,20,26,.11); }
  .nav.linear-nav a:not(.brand-home).on { background: rgba(154,150,255,.17); box-shadow: inset 3px 0 0 #aaa7ff; }
  .subj-bar { left: var(--nav-w); height: calc(var(--safe-t) + 58px); padding: var(--safe-t) 46px 0; background: rgba(255,255,255,.72); }
  :root[data-theme="dark"] .subj-bar { background: rgba(28,29,34,.88); }
  .main { padding-left: calc(var(--nav-w) + 52px); padding-right: 52px; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 58px + 30px); }
  .page-head { margin-bottom: 24px; }
  .page-head h1 { font-size: 32px; }
  .dashboard-stats { grid-template-columns: minmax(420px,1.08fr) minmax(0,1.42fr); min-height: 170px; }
  .dashboard-grid { grid-template-columns: minmax(0,1.32fr) minmax(340px,.86fr); gap: 18px; }
  .dashboard-grid > .map-panel { grid-column: 1; grid-row: 1; }
  .dashboard-grid > .chapter-panel { grid-column: 2; grid-row: 1; }
  .dashboard-grid > .insight-grid { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; grid-row: 3; }
  .map-panel, .chapter-panel { min-height: 100%; border-radius: 14px; }
  .map-panel { padding: 21px 23px 18px; }
  .chapter-panel { padding: 21px 21px 17px; }
  .chapter-panel .ch-rows { max-height: 568px; }
  .insight-grid { gap: 18px; }
}

@media (max-width: 899px) {
  .main { padding: calc(var(--safe-t) + 14px) 14px calc(var(--tab-h) + var(--safe-b) + 24px); }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 44px + 14px); }
  .subj-bar { height: calc(var(--safe-t) + 44px); padding: var(--safe-t) 13px 0; background: color-mix(in srgb, var(--surface) 92%, transparent); }
  .dashboard-stats { margin-bottom: 16px; border-radius: 14px; }
  .dashboard-grid { display: flex; flex-direction: column; gap: 0; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: transparent; box-shadow: none; }
  .map-panel { padding: 17px 0 13px; order: 2; }
  .chapter-panel { padding: 17px 0 13px; order: 1; }
  .insight-grid { order: 3; gap: 10px; }
  .keyword-panel { order: 4; }
  .map-panel .panel-head { display: block; margin-bottom: 10px; }
  .map-panel .panel-head-actions { justify-content: flex-start; margin-top: 8px; gap: 8px; }
  .map-panel .legend { flex: 1; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .map-panel .legend::-webkit-scrollbar { display: none; }
  .map-expand { display: inline-flex; align-items: center; justify-content: center; }
  .tm-mobile-only { padding: 9px 8px 8px; border: 1px solid var(--hair); border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
  .hm-wrap { max-height: 182px; overflow: hidden; }
  .map-is-expanded .hm-wrap { max-height: 420px; overflow-y: auto; }
  .map-is-expanded .map-expand { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--hair)); }
  .chapter-panel .panel-head { margin-bottom: 8px; }
  .chapter-panel .legend { display: none; }
  .chapter-panel .ch-rows { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; }
  .ch-row { min-height: 58px; padding: 8px 0; border-top-color: var(--hair); border-radius: 0; }
  .ch-row .name { line-height: 1.25; }
  .ch-row .name .no { width: 23px; height: 20px; margin-right: 5px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9px; }
  .ch-row .pct { font-size: 12px; }
  .mbar, .stack { height: 5px; }
  .nav { background: var(--surface); border-top: 1px solid var(--hair); box-shadow: 0 -6px 20px rgba(31,32,36,.06); }
  .nav a, .nav a.on { color: var(--muted); }
  .nav a.on { color: var(--accent-ink); }
  .nav a.on svg { color: var(--accent); stroke: var(--accent); }
  .nav a.on::before { top: 0; width: 32px; height: 2px; background: var(--accent); box-shadow: none; }
}

@media (max-width: 639px) {
  .main { padding-left: 13px; padding-right: 13px; padding-bottom: calc(var(--tab-h) + var(--safe-b) + 20px); }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 44px + 11px); }
  .subj-bar { padding-left: 12px; padding-right: 12px; }
  .subject-label { font-size: 9px; }
  .subject-tabs button { height: 32px; font-size: 12.5px; }
  .page-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 0 10px; margin: 1px 1px 12px; }
  .page-kicker { display: none; }
  .page-head h1 { font-size: 25px; line-height: 1.1; }
  .page-head .sub { margin-top: 4px; font-size: 11.5px; }
  .dashboard-head .page-head-actions { grid-column: 2; grid-row: 1; width: auto; margin: 0 0 3px; }
  .dashboard-head .page-head-actions .seg { width: auto; }
  .dashboard-head .page-head-actions .seg button { flex: none; min-width: 50px; padding: 0 8px; font-size: 0; }
  .dashboard-head .page-head-actions .seg button::after { font-size: 11px; }
  .dashboard-head .page-head-actions .seg button:first-child::after { content: '全部'; }
  .dashboard-head .page-head-actions .seg button:last-child::after { content: '高频'; }
  .dashboard-stats { margin-bottom: 10px; border-radius: 14px; box-shadow: 0 12px 28px rgba(31,32,36,.12); }
  .stat-primary { gap: 12px; min-height: 151px; padding: 14px 14px 11px; }
  .stat-primary-top { gap: 8px; }
  .stat-context, .stat-next-hint { font-size: 10px; }
  .stat-primary-main { grid-template-columns: 51px minmax(0,1fr) auto; gap: 10px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 51px; height: 51px; }
  .stat-primary .stat-value { font-size: 34px; }
  .stat-primary .stat-caption { max-width: 175px; margin-top: 5px; font-size: 10px; }
  .stat-primary .stat-cta { min-height: 34px; padding: 0 10px; font-size: 11px; }
  .stat-primary-bottom { padding-top: 8px; font-size: 10.5px; }
  .stat-next-hint { display: none; }
  .stat-grid { min-height: 66px; }
  .stat-item { min-height: 66px; padding: 10px 9px 8px; }
  .stat-item .eyebrow { font-size: 10px; }
  .stat-item .stat-value { margin-top: 2px; font-size: 22px; }
  .stat-item .stat-caption { margin-top: 1px; font-size: 9.5px; }
  .panel .panel-head { gap: 6px; }
  .panel h2 { font-size: 15px; }
  .panel .panel-kicker { font-size: 9px; }
  .chapter-panel .ch-rows { grid-template-columns: 1fr; column-gap: 0; }
  .ch-row { min-height: 50px; grid-template-columns: minmax(0,1fr) 45px; gap: 2px 9px; padding: 7px 2px; }
  .ch-row .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  .ch-row .bars { grid-column: 1; gap: 3px; }
  .ch-row .pct { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; }
  .map-panel { padding-top: 15px; }
  .map-panel .hint { margin-top: 8px !important; font-size: 10.5px; line-height: 1.35; }
  .insight-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trend-panel, .weak-panel { min-width: 0; padding: 14px 0 12px; }
  .trend-panel .panel-head, .weak-panel .panel-head { display: block; }
  .trend-panel .panel-head .hint { display: block; margin-top: 3px; }
  .weak-panel .panel-head .btn { margin-top: 6px; }
  .weak-item { grid-template-columns: minmax(0,1fr) auto; gap: 2px 5px; padding: 9px 0; }
  .weak-item .t { font-size: 12px; }
  .weak-item .p { font-size: 10px; }
  .weak-item .r { font-size: 11px; }
  .keyword-panel { padding: 14px 0 12px; }
  .keyword-panel .panel-head { display: block; }
  .keyword-panel .panel-head .hint { margin-top: 3px; }
  .kw-cloud { gap: 5px; }
  .kw-cloud button { padding: 5px 8px; border-radius: 7px; font-size: 12px; }
  .nav a { min-height: 44px; font-size: 10px; }
  .nav a svg { width: 20px; height: 20px; }
  .startbar { left: 9px; right: 9px; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); padding: 10px; border-radius: 13px; }
}

@media (min-width: 480px) and (max-width: 899px) {
  .chapter-panel .ch-rows { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; }
  .ch-row { min-height: 58px; grid-template-columns: minmax(0,1fr) 45px; }
  .ch-row .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-cta, .map-expand, .nav a, .ch-row, .toc-card { transition: none !important; }
}

/* ============ PRODUCT FINISH / EOF ============ */
:root {
  --page: #f5f6f4;
  --surface: #ffffff;
  --surface-2: #eef0ee;
  --ink: #171922;
  --ink-2: #5c606c;
  --muted: #8c919c;
  --hair: #e0e4e1;
  --accent: #5d5fe3;
  --accent-ink: #4749b3;
  --accent-soft: rgba(93,95,227,.12);
  --good: #2eaa89;
  --signal: #2eaa89;
  --warn: #c8893b;
  --bad: #c25761;
  --rail: #17181e;
  --rail-ink: #f5f6f7;
  --rail-muted: #9da1ad;
  --rail-line: rgba(255,255,255,.12);
  --shadow: 0 1px 2px rgba(25,28,34,.04), 0 14px 34px rgba(25,28,34,.055);
  --ease-standard: cubic-bezier(.2,.75,.25,1);
}

/* ============ 2026.09 ART DIRECTION / RESPONSIVE REBUILD ============
   This layer is intentionally small and final. It gives the workbench one
   visual rhythm across light, sepia, and dark themes while keeping the map
   renderer's dimensions and interaction untouched. */
:root {
  --page: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --ink: #20232b;
  --ink-2: #626977;
  --muted: #939aa7;
  --hair: #dde2e9;
  --ring: rgba(32,35,43,.075);
  --accent: #5c58d6;
  --accent-ink: #4945ad;
  --accent-soft: rgba(92,88,214,.12);
  --good: #259b79;
  --signal: #259b79;
  --warn: #c5843b;
  --bad: #c65a67;
  --rail: #1c1e24;
  --rail-ink: #f6f7fa;
  --rail-muted: #a4a8b3;
  --rail-line: rgba(255,255,255,.12);
  --shadow: 0 1px 2px rgba(29,34,44,.045), 0 18px 42px rgba(29,34,44,.065);
  --ease-standard: cubic-bezier(.22,.72,.2,1);
}
:root[data-theme="sepia"] {
  --page: #f3f0eb;
  --surface: #fffdfa;
  --surface-2: #eeeae3;
  --ink: #292b31;
  --ink-2: #656a74;
  --muted: #92908c;
  --hair: #e0dcd5;
  --ring: rgba(39,40,45,.075);
  --accent: #5f5bd1;
  --accent-ink: #4d49ac;
  --accent-soft: rgba(95,91,209,.12);
  --rail: #24252b;
  --rail-ink: #fafaf8;
  --rail-muted: #aeb0b9;
  --rail-line: rgba(255,255,255,.13);
  --shadow: 0 1px 2px rgba(39,40,45,.045), 0 18px 42px rgba(39,40,45,.055);
}
:root[data-theme="dark"] {
  --page: #121419;
  --surface: #1b1e25;
  --surface-2: #252932;
  --ink: #f1f3f6;
  --ink-2: #c0c4ce;
  --muted: #8d94a1;
  --hair: #343944;
  --ring: rgba(255,255,255,.09);
  --accent: #9a96ff;
  --accent-ink: #bdb9ff;
  --accent-soft: rgba(154,150,255,.16);
  --rail: #0e1015;
  --rail-ink: #f7f8fb;
  --rail-muted: #a1a6b2;
  --rail-line: rgba(255,255,255,.13);
  --shadow: 0 1px 2px rgba(0,0,0,.24), 0 20px 46px rgba(0,0,0,.2);
}

html { background: var(--page); }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--ui-font);
  letter-spacing: 0;
}
.shell { min-height: 100%; }

/* Desktop geometry: the content column is deliberately capped so the map and
   chapter rail keep a readable measure on wide monitors. */
@media (min-width: 900px) {
  :root { --nav-w: 252px; }
  .nav.linear-nav {
    width: var(--nav-w);
    background: var(--rail);
    border-right: 0;
    box-shadow: 18px 0 46px rgba(21,24,31,.14);
  }
  .nav.linear-nav .linear-brand { margin: 0 8px 28px; }
  .nav.linear-nav .workspace-context { background: rgba(255,255,255,.065); border-color: var(--rail-line); }
  .nav.linear-nav .brand-copy strong,
  .nav.linear-nav .workspace-name b { color: var(--rail-ink); }
  .nav.linear-nav .brand-copy small,
  .nav.linear-nav .workspace-name small,
  .nav.linear-nav .nav-section-label,
  .nav.linear-nav .nav-hint,
  .nav.linear-nav .nav-sync { color: var(--rail-muted); }
  .nav.linear-nav a:not(.brand-home) {
    min-height: 42px;
    height: 42px;
    color: var(--rail-muted);
    border-radius: 10px;
  }
  .nav.linear-nav a:not(.brand-home):hover { color: var(--rail-ink); background: rgba(255,255,255,.07); }
  .nav.linear-nav a:not(.brand-home).on {
    color: var(--rail-ink);
    background: rgba(128,124,235,.2);
    box-shadow: inset 3px 0 0 #aaa7ff;
  }
  .nav.linear-nav a:not(.brand-home).on svg { stroke: #bdbaff; }
  .nav.linear-nav .nav-foot { border-top-color: var(--rail-line); }
  .subj-bar {
    left: var(--nav-w);
    height: calc(var(--safe-t) + 58px);
    padding: var(--safe-t) clamp(30px, 4vw, 56px) 0;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-bottom: 1px solid var(--hair);
    backdrop-filter: blur(18px);
  }
  .subj-bar button { min-width: 132px; height: 36px; border-radius: 9px; }
  .main {
    width: calc(100% - var(--nav-w));
    max-width: 1420px;
    margin: 0 0 0 var(--nav-w);
    padding: calc(var(--safe-t) + 26px) clamp(30px, 4vw, 62px) 72px;
  }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 58px + 30px); }
  .page-head { margin-bottom: 26px; }
  .page-head h1 { font-size: 32px; line-height: 1.08; letter-spacing: -.055em; }
  .page-head .sub { font-size: 13px; color: var(--ink-2); }
  .dashboard-stats { border-radius: 18px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); gap: 20px; }
  .dashboard-grid > .map-panel { grid-column: 1; grid-row: 1; }
  .dashboard-grid > .chapter-panel { grid-column: 2; grid-row: 1; }
  .dashboard-grid > .insight-grid { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-grid > .keyword-panel { grid-column: 1 / -1; grid-row: 3; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border-radius: 16px; }
  .chapter-panel .ch-rows { max-height: 562px; }
  #toc { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .toc-ch { border-radius: 14px; border-color: var(--hair); box-shadow: 0 5px 18px rgba(29,34,44,.04); }
  .toc-ch.open { grid-column: 1 / -1; }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 72px; padding: 0 16px; background: var(--surface); }
  .toc-body { padding: 8px 14px 14px 42px; background: color-mix(in srgb, var(--surface-2) 38%, var(--surface)); border-top: 1px solid var(--hair); }
}

/* Shared surface hierarchy. */
.panel, .tile {
  border-color: var(--hair);
  box-shadow: var(--shadow);
}
.panel { border-radius: 15px; }
.panel h2 { letter-spacing: -.025em; }
.page-kicker, .panel-kicker { color: var(--muted); letter-spacing: .13em; }
.seg { border: 1px solid var(--hair); background: var(--surface-2); }
.seg button { color: var(--ink-2); transition: background .18s var(--ease-standard), color .18s var(--ease-standard), box-shadow .18s var(--ease-standard); }
.seg button.on { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgba(29,34,44,.1); }
.btn { border-radius: 9px; font-weight: 650; transition: transform .16s var(--ease-standard), background .18s var(--ease-standard), box-shadow .18s var(--ease-standard); }
.btn.accent { background: var(--accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent); }
.btn.ghost { background: var(--surface); }
.btn:hover { box-shadow: 0 5px 14px color-mix(in srgb, var(--ink) 9%, transparent); }

/* Summary command surface. */
.dashboard-stats {
  overflow: hidden;
  border: 1px solid rgba(26,29,37,.14);
  border-radius: 18px;
  background: #232630;
  box-shadow: 0 18px 44px rgba(30,32,42,.16);
}
.stat-primary { background: #232630; }
.stat-grid { background: #2a2d37; }
.stat-item { border-left-color: rgba(255,255,255,.1); }
.stat-item .eyebrow, .stat-item .stat-caption { color: rgba(247,248,251,.56); }
.stat-item .stat-value { color: #fafaf7; }
.stat-item:nth-child(2) .stat-value { color: #c0bdff; }
.stat-item:nth-child(3) .stat-value { color: #6bd0ae; }
.stat-primary .stat-cta { background: #6c67e8; }

/* Directory scan rhythm. */
.toc-ch > .hd { transition: background .18s var(--ease-standard), box-shadow .18s var(--ease-standard); }
.toc-ch > .hd:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.toc-ch > .hd .ttl { font-weight: 680; }
.toc-card { transition: background .16s var(--ease-standard), box-shadow .16s var(--ease-standard); }
.toc-card:hover { background: var(--surface); box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent); }
.toc-card .ct { line-height: 1.4; }

/* The session dock reads like a single action, with no accidental overlap. */
.startbar {
  border: 1px solid color-mix(in srgb, var(--ink) 16%, var(--hair));
  border-radius: 15px;
  box-shadow: 0 20px 48px rgba(24,26,33,.2);
}

/* Immersive reading layer: fully isolate it from the route underneath. */
.study {
  isolation: isolate;
  opacity: 1;
  background: var(--page);
  animation: none;
}
.study-top { border-bottom: 1px solid var(--hair); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(16px); }
.study-scroll { background: var(--page); }
.sheet { padding-top: 26px; padding-bottom: 82px; }
.sheet.enter { animation: none; }
.study-bar { background: linear-gradient(to top, var(--page) 82%, color-mix(in srgb, var(--page) 0%, transparent)); }
.bigbtn { border-radius: 12px; background: var(--ink); }
.grade { border-radius: 12px; }

/* The map is data dense; keep it calm and stop repaint animations entirely. */
.hm-wrap .hm-cell, .hm-wrap .hm-ch-block { animation: none !important; }

@media (max-width: 899px) {
  html, body { overflow-x: hidden; }
  .main { max-width: none; padding: calc(var(--safe-t) + 16px) 14px calc(var(--tab-h) + var(--safe-b) + 28px) !important; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 44px + 16px) !important; }
  .subj-bar { height: calc(var(--safe-t) + 44px); padding: var(--safe-t) 13px 0; gap: 8px; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--hair); backdrop-filter: blur(18px); }
  .subject-label { font-size: 9px; letter-spacing: .14em; }
  .subject-tabs { flex: 1; min-width: 0; }
  .subject-tabs button { height: 33px; border-radius: 8px 8px 0 0; font-size: 12.5px; }
  .subject-tabs button.on { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 -2px 0 var(--accent); }
  .page-head { margin: 1px 1px 15px; gap: 8px; }
  .page-head h1 { font-size: 27px; line-height: 1.1; }
  .page-head .sub { font-size: 11.5px; margin-top: 4px; }
  .dashboard-head .page-head-actions { width: auto; margin-top: 0; }
  .dashboard-head .page-head-actions .seg { width: auto; }
  .dashboard-head .page-head-actions .seg button { min-width: 49px; padding: 0 9px; font-size: 0; }
  .dashboard-head .page-head-actions .seg button::after { font-size: 11px; }
  .dashboard-head .page-head-actions .seg button:first-child::after { content: '全部'; }
  .dashboard-head .page-head-actions .seg button:last-child::after { content: '高频'; }
  .dashboard-stats { margin-bottom: 16px; border-radius: 17px; box-shadow: 0 15px 32px rgba(29,32,41,.15); }
  .stat-primary { min-height: 140px; padding: 15px 15px 11px; gap: 12px; }
  .stat-primary-main { grid-template-columns: 52px minmax(0,1fr) auto; gap: 10px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 52px; height: 52px; }
  .stat-primary .stat-value { font-size: 35px; }
  .stat-primary .stat-caption { max-width: 160px; font-size: 10px; }
  .stat-primary .stat-cta { min-height: 36px; padding: 0 10px; border-radius: 9px; font-size: 11px; }
  .stat-primary-bottom { font-size: 10.5px; }
  .stat-next-hint { display: none; }
  .stat-grid { min-height: 68px; }
  .stat-item { min-height: 68px; padding: 10px 9px 8px; }
  .stat-item .stat-value { font-size: 23px; }
  .stat-item .stat-caption { font-size: 9.5px; }
  .dashboard-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .dashboard-grid > .map-panel { order: 1 !important; }
  .dashboard-grid > .chapter-panel { order: 2 !important; }
  .dashboard-grid > .insight-grid { order: 3 !important; }
  .dashboard-grid > .keyword-panel { order: 4 !important; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border: 0 !important; border-top: 1px solid var(--hair) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 16px 1px 13px !important; }
  .map-panel .panel-head { margin-bottom: 9px; }
  .map-panel .legend { gap: 4px 9px; font-size: 10px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .map-panel .legend::-webkit-scrollbar { display: none; }
  .tm-mobile-only { padding: 9px 8px 8px; border: 1px solid var(--hair); border-radius: 13px; background: var(--surface-2); }
  .hm-wrap { max-height: 184px !important; gap: 7px; }
  .map-is-expanded .hm-wrap { max-height: 390px !important; }
  .map-panel .hint { margin-top: 8px !important; font-size: 10.5px; line-height: 1.4; }
  .chapter-panel .panel-head { margin-bottom: 8px; }
  .chapter-panel .legend { display: none; }
  .chapter-panel .ch-rows { grid-template-columns: 1fr !important; }
  .ch-row { min-height: 53px; grid-template-columns: minmax(0,1fr) 44px; gap: 2px 9px; padding: 7px 1px; }
  .ch-row .name { font-size: 13px; line-height: 1.25; }
  .ch-row .name .no { width: 23px; height: 20px; border-radius: 6px; }
  .ch-row .pct { font-size: 12px; }
  .nav { z-index: 30; height: calc(var(--tab-h) + var(--safe-b)); background: rgba(28,30,36,.97); border-top: 0; box-shadow: 0 -12px 30px rgba(18,20,26,.2); }
  .nav a, .nav a.on { color: rgba(247,248,251,.56); }
  .nav a.on { color: #fff; }
  .nav a.on svg { color: #bdbaff; stroke: #bdbaff; }
  .nav a.on::before { top: 0; width: 34px; height: 2px; background: #aaa7ff; box-shadow: none; }
  .startbar { left: 10px !important; right: 10px !important; bottom: calc(var(--tab-h) + var(--safe-b) + 9px) !important; padding: 10px !important; border-radius: 15px; background: rgba(28,30,36,.98); }
  .startbar .opts { gap: 6px 8px; font-size: 10px; }
  .startbar .seg { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
  .startbar .seg button { min-height: 30px; padding: 0 9px; font-size: 10.5px; color: rgba(247,248,251,.7); }
  .startbar .seg button.on { background: #6864e3; color: #fff; }
  .startbar .row { padding-top: 8px; margin-top: 2px; }
  .startbar .row .btn { min-height: 40px; height: 40px; border-radius: 10px; }
  #toc { display: flex !important; flex-direction: column; gap: 8px; margin-top: 2px; }
  .toc-ch { border-radius: 13px; border-color: var(--hair); box-shadow: 0 4px 14px rgba(29,34,44,.04); }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 57px; padding: 0 11px; }
  .toc-ch > .hd .ttl { font-size: 13px; line-height: 1.3; }
  .toc-ch > .hd .meta { gap: 5px; font-size: 10px; }
  .toc-ch > .hd .meta .mbar { width: 34px; }
  .toc-body { padding: 5px 7px 9px 28px; border-top: 1px solid var(--hair); }
  .toc-sec > .sh { padding: 8px 4px 5px; font-size: 11.5px; }
  .toc-card { min-height: 42px; padding: 7px 5px; border-radius: 8px; }
  .toc-card .ct { font-size: 12px; }
  .toc-card .cm { gap: 4px; }
  .toc-card .chip { height: 19px; padding: 0 5px; font-size: 10px; }
  .toc-card .lvpill { font-size: 10px; }
  .set-group { padding: 16px 15px 10px; }
  .set-row { min-height: 58px; gap: 10px; }
  .set-row .lbl { font-size: 13px; }
  .set-row .lbl small { font-size: 10px; line-height: 1.3; }
  .settings-head { margin-bottom: 14px; }
  .settings-head .sub { max-width: 300px; line-height: 1.35; }
  .study-top { padding: calc(9px + var(--safe-t)) 12px 9px; gap: 9px; }
  .study-top .x { width: 40px; height: 40px; }
  .study-top .tools button { width: 36px; height: 36px; }
  .sheet { padding: 20px 24px 72px; line-height: 1.9; }
  .sheet h1 { font-size: 1.34em; margin-bottom: 19px; }
  .study-bar { padding: 10px 12px calc(11px + var(--safe-b)); }
  .bigbtn { height: 52px; border-radius: 11px; font-size: 15px; }
  .grades { gap: 7px; }
  .grade { height: 58px; border-radius: 11px; font-size: 14px; }
}

@media (max-width: 380px) {
  .stat-primary-main { grid-template-columns: 46px minmax(0,1fr) auto; gap: 8px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 46px; height: 46px; }
  .stat-primary .stat-value { font-size: 31px; }
  .stat-primary .stat-caption { max-width: 132px; }
  .stat-primary .stat-cta { padding: 0 8px; }
}

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

/* Methods books: keep original tables and formulas readable on narrow screens. */
.study-table-scroll { max-width: 100%; overflow-x: auto; margin: .65em 0 1em; -webkit-overflow-scrolling: touch; }
.study-source-table { min-width: 520px; border-collapse: collapse; font-size: .9em; line-height: 1.55; }
.study-source-table td { min-width: 7em; padding: .42em .58em; border: 1px solid var(--hair); vertical-align: top; }
.study-source-table tr:first-child td { background: var(--surface-2); font-weight: 650; }
.study-table-blank, .study-table-mark { display: block; width: 100%; }
.study-table-blank .study-source-table { min-width: 520px; }
.katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: .25em 0; }
.katex { font-size: 1em; }
.source-image-missing { margin: .75em 0; padding: 12px 14px; border: 1px dashed var(--hair); border-radius: 10px; color: var(--muted); font-size: .86em; background: var(--surface-2); }

@media (max-width: 639px) {
  .subj-bar { overflow: hidden; }
  .subj-bar .subject-label { flex: 0 0 auto; }
  .subj-bar .subject-tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .subj-bar .subject-tabs::-webkit-scrollbar { display: none; }
  .subj-bar .subject-tabs button { flex: 0 0 auto; min-width: 92px; padding-inline: 10px; white-space: nowrap; }
  .subj-bar .subject-status { display: none; }
}
:root[data-theme="dark"] {
  --page:#111216; --surface:#1a1b21; --surface-2:#25262e; --ink:#f5f5f1; --ink-2:#c2c4cc; --muted:#8e919c; --hair:#33353d;
  --accent:#9b98ff; --accent-ink:#c0bdff; --accent-soft:rgba(155,152,255,.16); --good:#5dc8a5; --signal:#5dc8a5; --warn:#e1ad60; --bad:#eb7c86;
  --rail:#0b0c10; --rail-ink:#f5f5f1; --rail-muted:#a4a7b2; --rail-line:rgba(255,255,255,.13);
  --shadow:0 1px 2px rgba(0,0,0,.25),0 18px 42px rgba(0,0,0,.18);
}
:root[data-theme="sepia"] {
  --page:#f1eadf; --surface:#fffaf1; --surface-2:#ece1d1; --ink:#3c342e; --ink-2:#74665b; --muted:#9c8978; --hair:#ded1c1;
  --accent:#6e5ac2; --accent-ink:#5948a0; --accent-soft:rgba(110,90,194,.13); --rail:#3b3534; --rail-ink:#fffaf1; --rail-muted:#d0c3b7; --rail-line:rgba(255,250,241,.16);
}
html, body { background: var(--page); color: var(--ink); }
body { font-family: var(--ui-font); -webkit-font-smoothing: antialiased; }
.panel, .tile { border-color: var(--hair); box-shadow: var(--shadow); }
.page-head h1 { letter-spacing: -.055em; }
.page-head .sub { color: var(--ink-2); }
.seg { border-color: var(--hair); background: var(--surface-2); }
.seg button { color: var(--ink-2); transition: background .18s var(--ease-standard), color .18s var(--ease-standard), transform .18s var(--ease-standard); }
.seg button.on { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgba(25,28,34,.1); }
.btn { border-radius: 9px; font-weight: 650; transition: transform .18s var(--ease-standard), background .18s var(--ease-standard), box-shadow .18s var(--ease-standard); }
.btn:active, .stat-cta:active { transform: translateY(1px) scale(.985); }
.btn.accent { background: var(--accent); box-shadow: 0 7px 18px rgba(93,95,227,.22); }

@media (min-width: 900px) {
  :root { --nav-w: 248px; }
  .nav.linear-nav { width: var(--nav-w); background: var(--rail); border-right: 0; box-shadow: 15px 0 42px rgba(22,23,29,.12); }
  .nav.linear-nav .linear-brand { margin: 0 4px 24px; }
  .nav.linear-nav .workspace-context { border-color: var(--rail-line); background: rgba(255,255,255,.055); }
  .nav.linear-nav .brand-copy strong, .nav.linear-nav .workspace-name b { color: var(--rail-ink); }
  .nav.linear-nav .brand-copy small, .nav.linear-nav .workspace-name small, .nav.linear-nav .nav-section-label, .nav.linear-nav .nav-hint, .nav.linear-nav .nav-sync { color: var(--rail-muted); }
  .nav.linear-nav a:not(.brand-home) { height: 42px; color: var(--rail-muted); border-radius: 9px; }
  .nav.linear-nav a:not(.brand-home):hover { color: var(--rail-ink); background: rgba(255,255,255,.07); }
  .nav.linear-nav a:not(.brand-home).on { color: var(--rail-ink); background: rgba(132,128,242,.2); box-shadow: inset 3px 0 0 #aaa7ff; }
  .nav.linear-nav a:not(.brand-home).on svg { stroke: #bdbaff; }
  .nav.linear-nav .nav-foot { border-top-color: var(--rail-line); }
  .subj-bar { left: var(--nav-w); height: calc(var(--safe-t) + 58px); padding: var(--safe-t) 48px 0; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom-color: var(--hair); }
  .subj-bar button { min-width: 142px; height: 36px; border-radius: 9px; }
  .main { max-width: 1500px; padding-left: calc(var(--nav-w) + 50px); padding-right: 50px; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 58px + 30px); }
  .page-head { margin-bottom: 24px; }
  .page-head h1 { font-size: 32px; }
  .dashboard-stats { border-radius: 18px; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border-radius: 16px; }
  #toc { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; border: 0; }
  .toc-ch { margin: 0; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 4px 16px rgba(26,29,34,.035); }
  .toc-ch.open { grid-column: 1 / -1; }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 76px; padding: 0 16px; border: 0; background: var(--surface); }
  .toc-ch > .hd:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
  .toc-body { background: color-mix(in srgb, var(--surface-2) 38%, var(--surface)); border-top: 1px solid var(--hair); padding: 8px 14px 14px 42px; }
  .toc-sec > .sh { padding: 11px 4px 7px; }
  .toc-card { min-height: 44px; padding: 8px; border-radius: 8px; }
  .toc-card:hover { background: var(--surface); box-shadow: 0 2px 7px rgba(25,28,34,.05); }
}

.dashboard-stats { border: 1px solid rgba(22,24,31,.14); background: #20222b; box-shadow: 0 18px 42px rgba(22,24,31,.14); }
.stat-primary { background: linear-gradient(135deg, #242632, #17181e); }
.stat-grid { background: #292b35; }
.stat-item { border-left-color: rgba(255,255,255,.11); }
.stat-item .eyebrow, .stat-item .stat-caption { color: rgba(247,248,250,.56); }
.stat-item .stat-value { color: #fafaf7; }
.stat-item:nth-child(2) .stat-value { color: #bbb8ff; }
.stat-item:nth-child(3) .stat-value { color: #67c9aa; }
.stat-primary .stat-cta { background: #6e6aee; box-shadow: 0 7px 18px rgba(76,73,187,.35); }
.stat-primary .stat-ring .ring-meter circle:first-child { stroke: rgba(255,255,255,.16) !important; }
.stat-primary .stat-ring .ring-meter circle:last-child { stroke: #aaa7ff !important; }

@media (max-width: 899px) {
  html, body { overflow-x: hidden; }
  .main { max-width: none; padding: calc(var(--safe-t) + 15px) 14px calc(var(--tab-h) + var(--safe-b) + 26px) !important; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 44px + 15px) !important; }
  .subj-bar { height: calc(var(--safe-t) + 44px); padding: var(--safe-t) 13px 0; gap: 7px; background: color-mix(in srgb, var(--surface) 93%, transparent); backdrop-filter: blur(18px); }
  .subject-label { font-size: 9px; letter-spacing: .14em; }
  .subject-tabs { flex: 1; }
  .subject-tabs button { height: 33px; padding: 0 10px; border-radius: 8px 8px 0 0; font-size: 12.5px; }
  .subject-tabs button.on { box-shadow: inset 0 -2px 0 var(--accent); background: transparent; color: var(--ink); }
  .page-head { margin: 2px 1px 14px; gap: 8px; }
  .page-head h1 { font-size: 25px; line-height: 1.1; }
  .page-head .sub { margin-top: 4px; font-size: 11.5px; }
  .dashboard-head .page-head-actions { width: auto; }
  .dashboard-head .page-head-actions .seg button { min-width: 49px; padding: 0 8px; font-size: 0; }
  .dashboard-head .page-head-actions .seg button::after { font-size: 11px; }
  .dashboard-head .page-head-actions .seg button:first-child::after { content: '全部'; }
  .dashboard-head .page-head-actions .seg button:last-child::after { content: '高频'; }
  .dashboard-stats { margin-bottom: 13px; border-radius: 18px; box-shadow: 0 14px 30px rgba(22,24,31,.13); }
  .stat-primary { min-height: 142px; padding: 15px 14px 11px; gap: 13px; }
  .stat-primary-main { grid-template-columns: 52px minmax(0,1fr) auto; gap: 11px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 52px; height: 52px; }
  .stat-primary .stat-value { font-size: 35px; }
  .stat-primary .stat-caption { max-width: 162px; font-size: 10px; }
  .stat-primary .stat-cta { min-height: 36px; padding: 0 10px; font-size: 11px; }
  .stat-primary-bottom { padding-top: 8px; font-size: 10.5px; }
  .stat-next-hint { display: none; }
  .stat-grid { min-height: 70px; }
  .stat-item { min-height: 70px; padding: 10px 9px 8px; }
  .stat-item .stat-value { margin-top: 2px; font-size: 23px; }
  .stat-item .stat-caption { margin-top: 2px; font-size: 9.5px; }
  .dashboard-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .dashboard-grid > .map-panel { order: 1 !important; }
  .dashboard-grid > .chapter-panel { order: 2 !important; }
  .dashboard-grid > .insight-grid { order: 3 !important; grid-template-columns: 1fr !important; }
  .dashboard-grid > .keyword-panel { order: 4 !important; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border: 0 !important; border-top: 1px solid var(--hair) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  .map-panel { padding: 16px 0 13px !important; }
  .chapter-panel { padding: 16px 0 10px !important; }
  .map-panel .panel-head { margin-bottom: 9px; }
  .map-panel .panel-head-actions { justify-content: flex-start; margin-top: 8px; }
  .map-panel .legend { gap: 4px 9px; font-size: 10.5px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .map-panel .legend::-webkit-scrollbar { display: none; }
  .map-expand { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; border-radius: 8px; }
  .tm-mobile-only { padding: 9px 8px 8px; border: 1px solid var(--hair); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 56%, var(--surface)); }
  .hm-wrap { max-height: 176px !important; gap: 7px; }
  .map-is-expanded .hm-wrap { max-height: 390px !important; overflow-y: auto; }
  .chapter-panel .panel-head { margin-bottom: 8px; }
  .chapter-panel .legend { display: none; }
  .chapter-panel .ch-rows { display: grid; grid-template-columns: 1fr !important; }
  .ch-row { min-height: 58px; padding: 8px 2px; }
  .ch-row .name { font-size: 13px; }
  .ch-row .name .no { width: 24px; height: 21px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9px; }
  .nav { z-index: 30; height: calc(var(--tab-h) + var(--safe-b)); background: rgba(23,24,30,.96); border-top: 0; box-shadow: 0 -10px 28px rgba(22,23,29,.16); }
  .nav a, .nav a.on { color: rgba(245,246,247,.55); }
  .nav a.on { color: #fff; }
  .nav a.on svg { stroke: #bdbaff; color: #bdbaff; }
  .nav a.on::before { top: 0; width: 32px; height: 2px; background: #aaa7ff; box-shadow: none; }
  .startbar { left: 10px !important; right: 10px !important; bottom: calc(var(--tab-h) + var(--safe-b) + 9px) !important; padding: 10px !important; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(23,24,30,.97); color: #f7f7f4; box-shadow: 0 16px 34px rgba(22,23,29,.24); max-height: none !important; display: block !important; overflow: visible !important; }
  .startbar .opts { display: grid !important; grid-template-columns: auto minmax(0,1fr); gap: 6px 8px; align-items: center; font-size: 10px; color: rgba(247,247,244,.58); }
  .startbar .opts > span { display: block !important; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
  .startbar .seg { min-width: 0; overflow-x: auto; display: flex; flex-wrap: nowrap; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); scrollbar-width: none; }
  .startbar .seg::-webkit-scrollbar { display: none; }
  .startbar .seg button { flex: none; min-height: 30px; padding: 0 9px; border-color: transparent; color: rgba(247,247,244,.7); background: transparent; font-size: 10.5px; }
  .startbar .seg button.on { color: #fff; background: #625fe2; box-shadow: none; }
  .startbar .row { gap: 8px; padding-top: 8px; margin-top: 2px; border-top: 1px solid rgba(255,255,255,.12); }
  .startbar .count { font-size: 11px; color: rgba(247,247,244,.72); }
  .startbar .count b { color: #fff; font-size: 17px; }
  .startbar .row .btn { height: 40px; min-height: 40px; flex: 1; border-radius: 10px; font-size: 11px; }
  #toc { display: flex !important; flex-direction: column; gap: 9px; border: 0; margin-top: 3px; }
  .toc-ch { margin: 0; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 4px 15px rgba(26,29,34,.035); }
  .toc-ch > .hd, .toc-ch.open > .hd { min-height: 68px; padding: 0 12px; border: 0; background: var(--surface); }
  .toc-ch > .hd:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
  .toc-ch > .hd .ttl { font-size: 13.5px; line-height: 1.35; }
  .toc-ch > .hd .meta { gap: 6px; font-size: 11px; }
  .toc-body { padding: 5px 8px 10px 30px; border-top: 1px solid var(--hair); background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); }
  .toc-sec > .sh { padding: 9px 4px 5px; font-size: 12px; }
  .toc-card { min-height: 45px; padding: 8px 6px; border-radius: 8px; }
  .toc-card .ct { font-size: 12.5px; }
  .toc-card:hover { background: var(--surface); box-shadow: 0 2px 8px rgba(25,28,34,.05); }
  .settings-head { margin-bottom: 16px; }
  .set-group, .settings-head + .grid > .panel, #view[data-page="settings"] > .panel { border-radius: 15px; background: var(--surface); box-shadow: 0 5px 18px rgba(25,28,34,.045); }
  .set-row { min-height: 62px; padding: 12px 1px; align-items: center; }
  .set-row .lbl { min-width: 110px; font-size: 14px; }
  .set-row .lbl small { max-width: 185px; font-size: 11.5px; line-height: 1.35; }
}
@media (max-width: 380px) {
  .main { padding-left: 11px !important; padding-right: 11px !important; }
  .stat-primary-main { grid-template-columns: 48px minmax(0,1fr) auto; gap: 8px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 48px; height: 48px; }
  .stat-primary .stat-value { font-size: 32px; }
  .stat-primary .stat-caption { max-width: 135px; }
  .toc-ch > .hd, .toc-ch.open > .hd { padding-left: 9px; padding-right: 9px; }
  .toc-ch > .hd .ttl { font-size: 12.8px; }
  .toc-body { padding-left: 26px; }
}