/* Recite Workbench final visual layer.  Loaded after the legacy stylesheet. */
: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); }

/* Unified dark score band. */
.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); }

/* Prevent the study sheet from revealing the route beneath during transitions. */
.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; }
  .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; }
}

/* ============ FINAL ART DIRECTION / RESPONSIVE PASS ============
   One last cascade for the shipped workspace. This layer deliberately owns
   the mobile composition so older responsive rules cannot reintroduce the
   cramped, single-column dashboard. The map renderer itself is untouched. */
:root {
  --page: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #edf0f4;
  --ink: #1f222a;
  --ink-2: #646b78;
  --muted: #8f96a3;
  --hair: #dfe3e9;
  --accent: #5b57d6;
  --accent-ink: #4743ad;
  --accent-soft: rgba(91,87,214,.12);
  --good: #279b79;
  --signal: #279b79;
  --warn: #c5873e;
  --bad: #c65d69;
  --rail: #1b1d24;
  --rail-ink: #f6f7fa;
  --rail-muted: #a5a9b5;
}
:root[data-theme="sepia"] {
  --page: #f4f3ef;
  --surface: #fffefa;
  --surface-2: #eeefeb;
  --ink: #292b32;
  --ink-2: #686c76;
  --muted: #92959c;
  --hair: #dfe1dc;
  --accent: #5b57d6;
  --accent-ink: #4743ad;
  --accent-soft: rgba(91,87,214,.11);
  --rail: #24252d;
  --rail-ink: #fafaf8;
  --rail-muted: #acafb9;
}
:root[data-theme="dark"] {
  --page: #121419;
  --surface: #1b1e25;
  --surface-2: #252932;
  --ink: #f1f3f6;
  --ink-2: #c0c4ce;
  --muted: #8d94a1;
  --hair: #343944;
  --accent: #9a96ff;
  --accent-ink: #bdb9ff;
  --accent-soft: rgba(154,150,255,.16);
  --rail: #0e1015;
  --rail-ink: #f7f8fb;
  --rail-muted: #a1a6b2;
}

html, body { background: var(--page); color: var(--ink); }
body { letter-spacing: 0; }
.page-head h1 { letter-spacing: -.045em; }
.panel h2 { letter-spacing: -.025em; }
.btn, .seg button, .toc-card, .toc-ch > .hd, .ch-row, .nav a { -webkit-tap-highlight-color: transparent; }

@media (min-width: 900px) {
  .main { max-width: 1460px; }
  .nav.linear-nav { background: var(--rail); box-shadow: 16px 0 46px rgba(24,26,34,.12); }
  .subj-bar { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(18px); }
  .dashboard-stats { border-radius: 20px; box-shadow: 0 20px 48px rgba(25,29,38,.12); }
  .dashboard-grid { gap: 22px; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border-radius: 18px; }
  .chapter-panel .ch-rows { max-height: 586px; }
  .panel .panel-head { margin-bottom: 16px; }
}

@media (max-width: 899px) {
  html, body { overflow-x: hidden; }
  .main { width: 100%; max-width: none; padding: calc(var(--safe-t) + 15px) 14px calc(var(--tab-h) + var(--safe-b) + 30px) !important; }
  .main.has-subj-bar { padding-top: calc(var(--safe-t) + 44px + 15px) !important; }
  .subj-bar { background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--hair); box-shadow: 0 1px 0 rgba(31,34,42,.03); backdrop-filter: blur(18px); }
  .subject-label { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .14em; }
  .subject-tabs { min-width: 0; }
  .subject-tabs button { height: 33px; padding: 0 12px; border-radius: 9px 9px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 620; }
  .subject-tabs button.on { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
  .page-head { margin: 1px 1px 14px; gap: 8px; }
  .page-head h1 { font-size: 26px; line-height: 1.08; }
  .page-head .sub { margin-top: 4px; color: var(--ink-2); font-size: 11.5px; }
  .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; min-height: 34px; 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: '高频'; }

  /* The summary is one command surface: dark hero, quiet metric rail. */
  .dashboard-stats { overflow: hidden; margin-bottom: 15px; border: 1px solid rgba(24,27,35,.13); border-radius: 18px; background: #232630 !important; box-shadow: 0 18px 42px rgba(25,28,38,.14); }
  .stat-primary { min-height: 132px; padding: 15px 14px 11px; gap: 12px; background: linear-gradient(135deg, #20232d 0%, #303449 100%); }
  .stat-primary-top, .stat-primary-bottom { min-width: 0; }
  .stat-primary-top .eyebrow { color: rgba(247,248,251,.78); }
  .stat-context { max-width: 145px; overflow: hidden; color: rgba(247,248,251,.48); text-overflow: ellipsis; white-space: nowrap; }
  .stat-primary-main { grid-template-columns: 54px minmax(0,1fr) auto; gap: 11px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width: 54px; height: 54px; }
  .stat-primary .stat-value { font-size: 34px; }
  .stat-primary .stat-caption { max-width: 168px; color: rgba(247,248,251,.62); font-size: 10.5px; }
  .stat-primary .stat-cta { min-height: 36px; padding: 0 10px; border-radius: 10px; background: #6c68e6; box-shadow: 0 8px 18px rgba(68,64,184,.3); font-size: 11px; }
  .stat-primary-bottom { color: rgba(247,248,251,.58); font-size: 10.5px; }
  .stat-next-hint { display: none; }
  .stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); min-height: 70px; background: var(--surface) !important; border-top: 1px solid rgba(26,29,37,.09); }
  .stat-item { min-height: 70px; padding: 10px 9px 8px; border-left-color: var(--hair); }
  .stat-item .eyebrow, .stat-item .stat-caption { color: var(--muted); }
  .stat-item .stat-value { color: var(--ink); font-size: 23px; }
  .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) 70%, var(--muted)); }
  .stat-item .stat-caption { font-size: 10px; }

  /* Dashboard sections use a repeatable card rhythm rather than a flat wall. */
  .dashboard-grid { display: flex !important; flex-direction: column !important; gap: 13px !important; }
  .map-panel { order: 1 !important; }
  .chapter-panel { order: 2 !important; }
  .dashboard-grid > .insight-grid { order: 3 !important; }
  .keyword-panel { order: 4 !important; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel {
    border: 1px solid var(--hair) !important; border-radius: 16px !important; background: var(--surface) !important;
    box-shadow: 0 1px 2px rgba(31,34,42,.035), 0 9px 24px rgba(31,34,42,.045) !important;
    padding: 15px 14px 13px !important;
  }
  .panel .panel-head { gap: 8px; margin-bottom: 11px; }
  .panel .panel-head > div:first-child { min-width: 0; }
  .panel h2 { font-size: 15px; }
  .panel-kicker { font-size: 9px; letter-spacing: .14em; }
  .map-panel .legend { max-width: 100%; gap: 4px 8px; overflow-x: auto; flex-wrap: nowrap; font-size: 10px; scrollbar-width: none; }
  .map-panel .legend::-webkit-scrollbar { display: none; }
  .map-expand { display: inline-flex; min-height: 30px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 8px; color: var(--ink-2); background: var(--surface); font-size: 11px; }
  .tm-mobile-only { padding: 9px 8px 8px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface-2); }
  .hm-wrap { max-height: 158px !important; gap: 6px; }
  .map-is-expanded .hm-wrap { max-height: 390px !important; overflow-y: auto; }
  .map-panel .hint { margin-top: 9px !important; color: var(--muted); font-size: 10.5px; line-height: 1.4; }

  .chapter-panel .legend { display: none; }
  .chapter-panel .ch-rows { display: grid; grid-template-columns: 1fr !important; column-gap: 14px; }
  .ch-row { min-height: 55px; padding: 8px 1px; border-top-color: var(--hair); border-radius: 8px; }
  .ch-row:hover { background: var(--surface-2); }
  .ch-row .name { min-width: 0; overflow: hidden; font-size: 12.5px; line-height: 1.28; }
  .ch-row .name .no { width: 24px; height: 21px; margin-right: 6px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9px; }
  .ch-row .bars { gap: 3px; }
  .mbar, .stack { height: 5px; }
  .ch-row .pct { font-size: 11.5px; }

  .insight-grid { gap: 13px; }
  .trend-panel, .weak-panel { min-width: 0; }
  .trend-panel .panel-head, .weak-panel .panel-head { align-items: flex-start; }
  .trend-panel .hint { font-size: 10.5px; }
  #trend.empty, #weak.empty, #kw.empty { min-height: 104px; padding: 22px 10px; color: var(--muted); font-size: 11.5px; line-height: 1.7; text-align: center; }
  .weak-list .empty { min-height: 104px; }
  .keyword-panel .panel-head { align-items: flex-start; }
  .keyword-panel .hint { max-width: 180px; font-size: 10.5px; line-height: 1.35; }
  .kw-cloud { gap: 5px; }
  .kw-cloud button { min-height: 30px; padding: 0 9px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface-2); font-size: 11.5px; }

  /* Light bottom navigation removes the heavy dark band on light themes. */
  .nav { z-index: 30; height: calc(var(--tab-h) + var(--safe-b)); background: color-mix(in srgb, var(--surface) 94%, transparent); border-top: 1px solid var(--hair); box-shadow: 0 -10px 26px rgba(30,33,40,.08); backdrop-filter: blur(18px); }
  .nav a, .nav a.on { color: var(--muted); }
  .nav a { min-height: 44px; gap: 3px; font-size: 10px; }
  .nav a svg { width: 21px; height: 21px; }
  .nav a.on { color: var(--accent-ink); }
  .nav a.on svg { width: 23px; height: 23px; padding: 4px; border-radius: 8px; background: var(--accent-soft); stroke: var(--accent); }
  .nav a.on::before { display: none; }
  :root[data-theme="dark"] .nav { background: rgba(18,20,25,.95); border-top-color: var(--hair); box-shadow: 0 -12px 30px rgba(0,0,0,.24); }
  :root[data-theme="dark"] .nav a, :root[data-theme="dark"] .nav a.on { color: rgba(247,248,251,.62); }
  :root[data-theme="dark"] .nav a.on { color: #fff; }

  /* Directory: stable four-column header and predictable card rhythm. */
  #toc { display: flex !important; flex-direction: column; gap: 8px; margin-top: 3px; }
  #toc .toc-ch { margin: 0; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 4px 16px rgba(31,34,42,.04); }
  #toc .toc-ch > .hd, #toc .toc-ch.open > .hd { min-height: 64px; grid-template-columns: 24px 20px minmax(0,1fr) auto; gap: 8px; padding: 0 11px; border: 0; background: var(--surface); }
  #toc .toc-ch > .hd::before { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink); }
  #toc .toc-ch > .hd .ttl { min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 680; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  #toc .toc-ch > .hd .meta { min-width: 0; gap: 6px; font-size: 10px; }
  #toc .toc-ch > .hd .meta .mbar { width: 38px; }
  #toc .toc-body { margin: 0; padding: 5px 7px 10px 30px; border-top: 1px solid var(--hair); background: color-mix(in srgb, var(--surface-2) 42%, var(--surface)); }
  #toc .toc-card { min-height: 43px; padding: 7px 5px; border-radius: 8px; }
  #toc .toc-card .ct { font-size: 12px; line-height: 1.4; }

  /* Settings rows never squeeze their controls into the label. */
  #view[data-page="settings"] > .grid { gap: 13px; }
  #view[data-page="settings"] .set-group { padding: 15px 14px 9px; }
  #view[data-page="settings"] .set-row { display: grid; grid-template-columns: minmax(108px,1fr) minmax(0,1.45fr); min-height: 62px; gap: 10px; padding: 11px 1px; }
  #view[data-page="settings"] .set-row .lbl { min-width: 0; font-size: 13.5px; }
  #view[data-page="settings"] .set-row .lbl small { max-width: 190px; font-size: 10.5px; line-height: 1.35; }
  #view[data-page="settings"] .set-row > .seg { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #view[data-page="settings"] .set-row > .seg::-webkit-scrollbar { display: none; }
}

@media (min-width: 400px) and (max-width: 899px) {
  /* Two-column scan blocks halve the chapter and insight scroll on phones. */
  .chapter-panel .ch-rows { grid-template-columns: repeat(2,minmax(0,1fr)) !important; column-gap: 16px; }
  .ch-row { min-height: 68px; }
  .ch-row .name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
  .insight-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trend-panel, .weak-panel { padding-left: 13px !important; padding-right: 13px !important; }
}

@media (max-width: 399px) {
  .insight-grid { grid-template-columns: 1fr; }
}

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

@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; }
}

@media (max-width:899px) {
  /* On a phone the directory is a reading list, not a stack of cards. */
  #toc { gap:0; margin-top:4px; }
  #toc .toc-ch {
    border:0;
    border-top:1px solid var(--hair);
    border-radius:0;
    box-shadow:none;
    background:transparent;
  }
  #toc .toc-ch:last-child { border-bottom:1px solid var(--hair); }
  #toc .toc-ch > .hd, #toc .toc-ch.open > .hd {
    min-height:62px;
    padding:0 4px;
    background:transparent;
  }
  #toc .toc-ch > .hd:hover { background:var(--surface-2); }
  #toc .toc-ch > .hd::before { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:var(--accent-soft); color:var(--accent-ink); }
  #toc .toc-ch > .hd .ttl { font-size:13px; font-weight:670; }
  #toc .toc-ch > .hd .meta .mbar { height:5px; background:var(--surface-2); }
  #toc .toc-ch > .hd .meta .mbar i { background:var(--accent); }
  #toc .toc-body { margin:0 0 7px 28px; padding:5px 5px 8px 14px; border:1px solid var(--hair); border-radius:10px; background:var(--surface); }
  #toc .toc-card { min-height:41px; padding:6px 4px; }
  #toc .toc-card .ct { font-size:11.8px; }
}

@media (min-width:400px) and (max-width:899px) {
  /* Keep the evidence cards side by side on larger phones. */
  .dashboard-grid > .insight-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }
  .dashboard-grid > .insight-grid .panel { min-width:0; padding:14px 0 12px !important; }
  .dashboard-grid > .insight-grid .panel-head { display:block; }
  .dashboard-grid > .insight-grid .panel-head .hint { display:block; margin-top:4px; }
  .dashboard-grid > .insight-grid .weak-panel .btn { margin-top:6px; }
}

@media (max-width:899px) and (orientation:landscape) {
  .main { padding-bottom:calc(var(--tab-h) + var(--safe-b) + 18px) !important; }
  .startbar { bottom:calc(var(--tab-h) + var(--safe-b) + 5px) !important; padding:7px !important; }
  .startbar .opts { grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) !important; gap:4px 5px !important; }
  .startbar .opts > span { font-size:8px !important; letter-spacing:.04em; }
  .startbar .seg button { min-height:27px !important; padding:0 6px !important; font-size:9.5px !important; }
  .startbar .row { padding-top:6px !important; margin-top:1px !important; }
  .startbar .row .btn { height:34px !important; min-height:34px !important; font-size:10px !important; }
}

/* ============ FINAL ART DIRECTION / LAST CASCADE ============
   This is intentionally the final rule block in the file. The legacy sheet
   contains several historical responsive layers, so the shipped composition
   is asserted here with the same specificity and explicit importance where
   those layers used it. */
:root {
  --page:#f5f6f8; --surface:#fff; --surface-2:#edf0f4; --ink:#1f222a; --ink-2:#646b78;
  --muted:#8f96a3; --hair:#dfe3e9; --accent:#5b57d6; --accent-ink:#4743ad;
  --accent-soft:rgba(91,87,214,.12); --good:#279b79; --signal:#279b79;
}
:root[data-theme="sepia"] {
  --page:#f4f3ef; --surface:#fffefa; --surface-2:#eeefeb; --ink:#292b32; --ink-2:#686c76;
  --muted:#92959c; --hair:#dfe1dc; --accent:#5b57d6; --accent-ink:#4743ad;
  --accent-soft:rgba(91,87,214,.11);
}
:root[data-theme="dark"] {
  --page:#121419; --surface:#1b1e25; --surface-2:#252932; --ink:#f1f3f6; --ink-2:#c0c4ce;
  --muted:#8d94a1; --hair:#343944; --accent:#9a96ff; --accent-ink:#bdb9ff;
  --accent-soft:rgba(154,150,255,.16);
}
html, body { background:var(--page); color:var(--ink); }

@media (min-width:900px) {
  .main { max-width:1460px; }
  .dashboard-stats { border-radius:20px; box-shadow:0 20px 48px rgba(25,29,38,.12); }
  .dashboard-grid { gap:22px; }
  .map-panel, .chapter-panel, .trend-panel, .weak-panel, .keyword-panel { border-radius:18px; }
}

@media (max-width:899px) {
  html, body { overflow-x:hidden; }
  .main { width:100%; max-width:none; padding:calc(var(--safe-t) + 15px) 14px calc(var(--tab-h) + var(--safe-b) + 30px) !important; }
  .main.has-subj-bar { padding-top:calc(var(--safe-t) + 44px + 15px) !important; }
  .subj-bar { background:color-mix(in srgb, var(--surface) 94%, transparent); border-bottom:1px solid var(--hair); box-shadow:0 1px 0 rgba(31,34,42,.03); backdrop-filter:blur(18px); }
  .subject-label { color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.14em; }
  .subject-tabs button { height:33px; padding:0 12px; border-radius:9px 9px 0 0; color:var(--muted); font-size:12.5px; font-weight:620; }
  .subject-tabs button.on { color:var(--accent-ink); background:var(--accent-soft); box-shadow:inset 0 -2px 0 var(--accent); }
  .page-head { margin:1px 1px 14px; gap:8px; }
  .page-head h1 { font-size:26px; line-height:1.08; letter-spacing:-.045em; }
  .page-head .sub { margin-top:4px; color:var(--ink-2); font-size:11.5px; }
  .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; min-height:34px; 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 { overflow:hidden; margin-bottom:15px; border:1px solid rgba(24,27,35,.13); border-radius:18px; background:#232630 !important; box-shadow:0 18px 42px rgba(25,28,38,.14); }
  .stat-primary { min-height:132px; padding:15px 14px 11px; gap:12px; background:linear-gradient(135deg,#20232d 0%,#303449 100%); }
  .stat-primary-main { grid-template-columns:54px minmax(0,1fr) auto; gap:11px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width:54px; height:54px; }
  .stat-primary .stat-value { font-size:34px; }
  .stat-primary .stat-caption { max-width:168px; color:rgba(247,248,251,.62); font-size:10.5px; }
  .stat-primary .stat-cta { min-height:36px; padding:0 10px; border-radius:10px; background:#6c68e6; box-shadow:0 8px 18px rgba(68,64,184,.3); font-size:11px; }
  .stat-primary-bottom { color:rgba(247,248,251,.58); font-size:10.5px; }
  .stat-next-hint { display:none; }
  .stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); min-height:70px; background:var(--surface) !important; border-top:1px solid rgba(26,29,37,.09); }
  .stat-item { min-height:70px; padding:10px 9px 8px; border-left-color:var(--hair); }
  .stat-item .eyebrow, .stat-item .stat-caption { color:var(--muted); }
  .stat-item .stat-value { color:var(--ink); font-size:23px; }
  .stat-item:nth-child(2) .stat-value { color:var(--accent-ink); }
  .stat-item:nth-child(3) .stat-value { color:var(--good); }
  .stat-item .stat-caption { font-size:10px; }

  .dashboard-grid { display:flex !important; flex-direction:column !important; gap:13px !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:1px solid var(--hair) !important; border-radius:16px !important; background:var(--surface) !important;
    box-shadow:0 1px 2px rgba(31,34,42,.035),0 9px 24px rgba(31,34,42,.045) !important; padding:15px 14px 13px !important;
  }
  .panel .panel-head { gap:8px; margin-bottom:11px; }
  .panel h2 { font-size:15px; letter-spacing:-.025em; }
  .panel-kicker { font-size:9px; letter-spacing:.14em; }
  .map-panel .legend { max-width:100%; gap:4px 8px; overflow-x:auto; flex-wrap:nowrap; font-size:10px; scrollbar-width:none; }
  .map-panel .legend::-webkit-scrollbar { display:none; }
  .map-expand { display:inline-flex; min-height:30px; padding:0 10px; border:1px solid var(--hair); border-radius:8px; color:var(--ink-2); background:var(--surface); font-size:11px; }
  .tm-mobile-only { padding:9px 8px 8px; border:1px solid var(--hair); border-radius:12px; background:var(--surface-2); }
  .hm-wrap { max-height:158px !important; gap:6px; }
  .map-is-expanded .hm-wrap { max-height:390px !important; overflow-y:auto; }
  .map-panel .hint { margin-top:9px !important; color:var(--muted); font-size:10.5px; line-height:1.4; }
  .chapter-panel .legend { display:none; }
  .chapter-panel .ch-rows { display:grid; grid-template-columns:1fr !important; column-gap:16px; }
  .ch-row { min-height:55px; padding:8px 1px; border-top-color:var(--hair); border-radius:8px; }
  .ch-row:hover { background:var(--surface-2); }
  .ch-row .name { min-width:0; overflow:hidden; font-size:12.5px; line-height:1.28; }
  .ch-row .name .no { width:24px; height:21px; margin-right:6px; border-radius:7px; background:var(--accent-soft); color:var(--accent-ink); font-size:9px; }
  .ch-row .bars { gap:3px; }
  .mbar, .stack { height:5px; }
  .ch-row .pct { font-size:11.5px; }
  .insight-grid { gap:13px; }
  #trend.empty, #weak.empty, #kw.empty { min-height:104px; padding:22px 10px; color:var(--muted); font-size:11.5px; line-height:1.7; text-align:center; }
  .keyword-panel .hint { max-width:180px; font-size:10.5px; line-height:1.35; }
  .kw-cloud { gap:5px; }
  .kw-cloud button { min-height:30px; padding:0 9px; border:1px solid var(--hair); border-radius:8px; background:var(--surface-2); font-size:11.5px; }

  .nav { z-index:30; height:calc(var(--tab-h) + var(--safe-b)); background:color-mix(in srgb, var(--surface) 94%, transparent); border-top:1px solid var(--hair); box-shadow:0 -10px 26px rgba(30,33,40,.08); backdrop-filter:blur(18px); }
  .nav a, .nav a.on { color:var(--muted); }
  .nav a { min-height:44px; gap:3px; font-size:10px; }
  .nav a svg { width:21px; height:21px; }
  .nav a.on { color:var(--accent-ink); }
  .nav a.on svg { width:23px; height:23px; padding:4px; border-radius:8px; background:var(--accent-soft); stroke:var(--accent); }
  .nav a.on::before { display:none; }
  :root[data-theme="dark"] .nav { background:rgba(18,20,25,.95); border-top-color:var(--hair); box-shadow:0 -12px 30px rgba(0,0,0,.24); }
  :root[data-theme="dark"] .nav a, :root[data-theme="dark"] .nav a.on { color:rgba(247,248,251,.62); }
  :root[data-theme="dark"] .nav a.on { color:#fff; }

  #toc { display:flex !important; flex-direction:column; gap:8px; margin-top:3px; }
  #toc .toc-ch { margin:0; border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:0 4px 16px rgba(31,34,42,.04); }
  #toc .toc-ch > .hd, #toc .toc-ch.open > .hd { min-height:64px; grid-template-columns:24px 20px minmax(0,1fr) auto; gap:8px; padding:0 11px; border:0; background:var(--surface); }
  #toc .toc-ch > .hd::before { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:var(--accent-soft); color:var(--accent-ink); }
  #toc .toc-ch > .hd .ttl { min-width:0; overflow:hidden; font-size:13.5px; font-weight:680; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
  #toc .toc-ch > .hd .meta { min-width:0; gap:6px; font-size:10px; }
  #toc .toc-ch > .hd .meta .mbar { width:38px; }
  #toc .toc-body { margin:0; padding:5px 7px 10px 30px; border-top:1px solid var(--hair); background:color-mix(in srgb, var(--surface-2) 42%, var(--surface)); }
  #toc .toc-card { min-height:43px; padding:7px 5px; border-radius:8px; }
  #toc .toc-card .ct { font-size:12px; line-height:1.4; }

  #view[data-page="settings"] > .grid { gap:13px; }
  #view[data-page="settings"] .set-group { padding:15px 14px 9px; }
  #view[data-page="settings"] .set-row { display:grid; grid-template-columns:minmax(108px,1fr) minmax(0,1.45fr); min-height:62px; gap:10px; padding:11px 1px; }
  #view[data-page="settings"] .set-row .lbl { min-width:0; font-size:13.5px; }
  #view[data-page="settings"] .set-row .lbl small { max-width:190px; font-size:10.5px; line-height:1.35; }
  #view[data-page="settings"] .set-row > .seg { min-width:0; overflow-x:auto; scrollbar-width:none; }
  #view[data-page="settings"] .set-row > .seg::-webkit-scrollbar { display:none; }
}
@media (min-width:400px) and (max-width:899px) {
  .chapter-panel .ch-rows { grid-template-columns:repeat(2,minmax(0,1fr)) !important; column-gap:16px; }
  .ch-row { min-height:68px; }
  .ch-row .name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; }
  .dashboard-grid > .insight-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; }
  .dashboard-grid > .insight-grid .panel { min-width:0; padding-left:13px !important; padding-right:13px !important; }
}
@media (max-width:399px) { .insight-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }
/* v11 experience pass: calmer hierarchy, stronger focus, less mobile scroll */
:root {
  --page: #eef2f6;
  --surface: #fbfcfe;
  --surface-2: #f2f5f8;
  --ink: #162238;
  --ink-2: #52617a;
  --muted: #8290a5;
  --hair: #d9e1eb;
  --accent: #5367e8;
  --accent-ink: #394bb8;
  --accent-soft: rgba(83,103,232,.12);
  --signal: #2d9f87;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(22,34,56,.04), 0 16px 42px rgba(22,34,56,.08);
}
:root[data-theme="dark"] {
  --page: #0e1117;
  --surface: #151922;
  --surface-2: #1c222e;
  --ink: #f2f5fa;
  --ink-2: #c3cad7;
  --muted: #8993a5;
  --hair: rgba(255,255,255,.11);
  --accent: #8e97ff;
  --accent-ink: #b4b9ff;
  --accent-soft: rgba(142,151,255,.16);
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 18px 42px rgba(0,0,0,.26);
}
body { background: radial-gradient(circle at 92% -8%, rgba(83,103,232,.09), transparent 28rem), var(--page); }
.panel, .dashboard-stats, .toc-ch, .set-group { border-radius: 20px; box-shadow: var(--shadow); }
.panel { border-color: color-mix(in srgb, var(--ink) 8%, var(--hair)); }
.page-head h1 { letter-spacing: -.045em; }
.btn, .seg button, .stat-cta, .map-expand { transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.btn:hover, .seg button:hover, .stat-cta:hover, .map-expand:hover { transform: translateY(-1px); }
.btn:focus-visible, .seg button:focus-visible, .stat-cta:focus-visible, .map-expand:focus-visible, .nav a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.stat-primary { overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #1b2232 0%, #343c62 62%, #4b5ccc 140%); }
.stat-primary::after { content: ''; position: absolute; width: 260px; height: 260px; right: -92px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(161,170,255,.28), transparent 68%); pointer-events: none; z-index: -1; }
.stat-primary .stat-cta { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.stat-grid { border-top: 1px solid var(--hair); }
.tm-mobile-only { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.chapter-panel .ch-row { transition: background .18s ease, transform .18s ease; }
.chapter-panel .ch-row:hover { transform: translateX(2px); }

@media (min-width:900px) {
  .main { max-width: 1500px; }
  .dashboard-stats { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr); overflow:hidden; }
  .stat-grid { display:grid; align-content:stretch; }
  .stat-item { min-height: 92px; }
  .dashboard-grid > .map-panel { min-height: 520px; }
  .dashboard-grid > .chapter-panel { min-height: 520px; }
}

@media (max-width:899px) {
  body { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 8px); }
  .main { padding-top: calc(var(--safe-t) + 16px); padding-bottom: 24px; }
  .page-head { margin-bottom: 12px; }
  .page-head h1 { font-size: 26px; }
  .dashboard-stats { overflow: hidden; margin-bottom: 12px; border-radius: 22px; }
  .stat-primary { min-height: 148px; padding: 16px 15px 12px; border-radius: 22px 22px 0 0; }
  .stat-primary-main { grid-template-columns: 52px minmax(0,1fr) auto; gap: 10px; }
  .stat-primary .stat-cta { min-height: 40px; border-radius: 11px; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-top: 0; }
  .stat-item { min-height: 74px; padding: 11px 8px 9px; }
  .stat-item + .stat-item { border-left: 1px solid var(--hair); }
  .stat-item .stat-value { font-size: 24px; }
  .dashboard-grid { gap: 12px !important; }
  .dashboard-grid > .map-panel, .dashboard-grid > .chapter-panel, .dashboard-grid > .keyword-panel, .dashboard-grid > .insight-grid { order: initial !important; border: 1px solid var(--hair) !important; border-radius: 20px !important; background: var(--surface) !important; box-shadow: var(--shadow) !important; }
  .map-panel, .chapter-panel, .keyword-panel { padding: 15px 14px 13px !important; }
  .map-panel .panel-head, .chapter-panel .panel-head, .keyword-panel .panel-head { margin-bottom: 10px; }
  .map-panel .panel-head h2, .chapter-panel .panel-head h2, .keyword-panel .panel-head h2 { font-size: 16px; }
  .tm-mobile-only { border: 1px solid var(--hair); border-radius: 14px; }
  .hm-wrap { max-height: 145px !important; }
  .map-is-expanded .hm-wrap { max-height: 310px !important; }
  .chapter-panel .ch-rows { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
  .ch-row { min-height: 54px; }
  .dashboard-grid > .insight-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap: 0 !important; overflow:hidden; }
  .dashboard-grid > .insight-grid .panel { border:0 !important; border-radius:0 !important; box-shadow:none !important; min-width:0; padding: 14px 12px !important; }
  .dashboard-grid > .insight-grid .panel + .panel { border-left:1px solid var(--hair) !important; }
  .trend-panel .chart, .weak-panel .weak-list { min-height: 108px; }
  #trend.empty, #weak.empty { min-height:108px; padding:16px 6px; }
  .keyword-panel { margin-bottom: 4px; }
  .nav { height: calc(var(--tab-h) + var(--safe-b)); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 -12px 35px rgba(20,26,38,.14); }
  .nav a { min-height: 50px; }
  .nav a.on svg { box-shadow: 0 5px 12px color-mix(in srgb, var(--accent) 20%, transparent); }
  #toc .toc-ch { box-shadow: 0 8px 24px rgba(22,34,56,.06); }
  #toc .toc-ch > .hd, #toc .toc-ch.open > .hd { min-height: 60px; }
  #view[data-page="settings"] .set-group { border-radius: 18px; }
  #view[data-page="settings"] .set-row { min-height: 58px; }
}
@media (max-width:380px) {
  .stat-primary-main { grid-template-columns:46px minmax(0,1fr); }
  .stat-primary-action { grid-column: 2; align-items: flex-start; margin-top: 3px; }
  .stat-primary .stat-ring, .stat-primary .stat-ring .ring-meter { width:46px; height:46px; }
  .stat-primary .stat-cta { min-height: 36px; }
}
@media (prefers-reduced-motion:reduce) {
  .btn, .seg button, .stat-cta, .map-expand, .chapter-panel .ch-row { transition:none; }
}