/* AIKnows · Friendly 主题 v3.0（2026-11-12）
 * 自 Wayfind 工具风软化而来：暖纸底、白卡片圆角 12px、柔和阴影、无衬线正文、
 * 等宽字体只留给代码。骨架与全部 wiring 选择器原样保留（JS 只认类名/属性）。
 * 语义色：钴蓝=学习中/live，琥珀=待验收，绿=已验收；三线色 G 蓝 / S 琥珀 / M 绿。 */
@import url("./tokens.css");
@import url("./base.css");

:root { --topbar-h: 58px; }

body { line-height: 1.7; font-variant-numeric: tabular-nums; }
.main h1 { margin: 0 0 var(--space-sm); }
.main h2 { margin: var(--space-xl) 0 var(--space-sm); }
.doc strong, .doc b { font-weight: 700; }

/* ---------- 跳到正文 ---------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink);
  border-radius: var(--radius-ctrl); text-decoration: none; }
.skip:focus-visible { top: var(--space-md); }

/* ---------- 顶栏 ---------- */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky-nav); display: flex; align-items: center;
  gap: var(--space-sm); background: color-mix(in oklch, var(--color-paper-3) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-rule);
  padding: var(--space-2xs) var(--space-md); min-height: var(--topbar-h); }
.logo { font-weight: 700; font-size: var(--text-md); color: var(--color-ink); white-space: nowrap;
  text-decoration: none; letter-spacing: var(--tracking-display); }
.logo::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: var(--space-2xs);
  border-radius: 4px; background: linear-gradient(135deg, var(--line-G) 0 50%, var(--line-S) 50% 100%); }
.logo-sub { font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); margin-left: var(--space-2xs); }
.searchbox { flex: 1; position: relative; max-width: 520px; min-width: 0; }
.searchbox input { width: 100%; min-height: 36px; padding: 0 var(--space-sm);
  border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink);
  font-size: var(--text-sm); outline: 2px solid transparent; outline-offset: -2px;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.searchbox input:focus-visible { outline-color: var(--color-focus); background: var(--color-paper-3); border-color: var(--color-rule); }
.searchbox input::placeholder { color: var(--color-muted); }
.tools { display: flex; gap: var(--space-2xs); align-items: center; flex: none; }

/* 控件公共配方：圆角、细边、600 字重（app 档 34px，粗指针升 44） */
.tools button, .btn-import, .menu-btn, .chip-btn, .btn, .pg { display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-ctrl);
  background: var(--color-paper-3); color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap;
  cursor: pointer; text-decoration: none; box-shadow: 0 1px 1px oklch(26% 0.02 255 / 0.04);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.tools button:hover, .btn-import:hover, .menu-btn:hover, .chip-btn:hover, .btn:hover, .pg:hover {
  background: var(--color-paper-2); border-color: var(--color-ink-rule); }
.tools button:active, .btn-import:active, .menu-btn:active, .chip-btn:active, .btn:active, .pg:active { transform: translateY(1px); }
.tools button:focus-visible, .btn-import:focus-visible, .menu-btn:focus-visible, .chip-btn:focus-visible,
.btn:focus-visible, .pg:focus-visible, .dt-status:focus-visible, .q-o:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn-import { position: relative; overflow: hidden; }
.btn-import input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.menu-btn { display: none; }

/* ---------- 布局与课程树（侧栏） ---------- */
.layout { display: flex; min-height: calc(100vh - var(--topbar-h)); align-items: stretch; }
.sidebar { width: 276px; flex: none; background: var(--color-paper); border-right: 1px solid var(--color-rule);
  padding: var(--space-sm); overflow-y: auto; max-height: calc(100vh - var(--topbar-h)); position: sticky; top: var(--topbar-h); }
.sb-home { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-sm);
  background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-ctrl); overflow: hidden; }
.sb-home a { padding: var(--space-2xs) var(--space-2xs); font-size: var(--text-sm); font-weight: 600; text-align: center;
  color: var(--color-ink); border-right: 1px solid var(--color-rule); text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out); }
.sb-home a:last-child { border-right: 0; }
.sb-home a:hover { background: var(--color-paper-2); text-decoration: none; }
.sb-home a:active { transform: translateY(1px); }
.sb-track { border: 1px solid var(--color-rule); border-radius: var(--radius-ctrl); background: var(--color-paper-3);
  margin-bottom: var(--space-sm); overflow: hidden; }
.sb-track summary { padding: var(--space-xs) var(--space-sm); cursor: pointer; font-weight: 600; font-size: var(--text-sm);
  list-style: none; display: flex; align-items: center; gap: var(--space-2xs); min-height: 36px;
  transition: background-color var(--dur-micro) var(--ease-out); }
.sb-track summary::-webkit-details-marker { display: none; }
.sb-track summary::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--color-rule); }
.sb-track.tc-G summary::before { background: var(--line-G); }
.sb-track.tc-S summary::before { background: var(--line-S); }
.sb-track.tc-M summary::before { background: var(--line-M); }
.sb-track summary::after { content: "▸"; margin-left: auto; color: var(--color-muted); transition: transform var(--dur-micro) var(--ease-out); }
.sb-track[open] summary::after { transform: rotate(90deg); }
.sb-track[open] summary, .sb-track summary:hover { background: var(--color-paper-2); }
.sb-count { font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; margin-left: auto; margin-right: var(--space-xs); white-space: nowrap; flex: none; }
.sb-track summary:hover .sb-count { color: var(--color-ink-2); }
.sb-stage { padding: var(--space-xs) var(--space-sm) var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); font-weight: 600; }
.sb-ls, .sb-planned { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-lg);
  font-size: var(--text-md); color: var(--color-ink); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transition: background-color var(--dur-micro) var(--ease-out); min-height: 30px; border-radius: var(--space-2xs); }
.sb-ls:hover { background: var(--color-paper-2); text-decoration: none; }
.sb-ls.active { background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper-3)); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--color-accent); }
.sb-ls .ls-dot { margin-right: var(--space-3xs); }
.sb-planned { color: var(--color-muted); }

/* 状态圆点（空心=未开始，蓝=学习中，琥珀=待验收，绿=已验收；app.js 只写 data-status） */
.ls-dot { display: inline-block; width: 9px; height: 9px; flex: none; background: transparent;
  border: 1.5px solid var(--color-ink-rule); border-radius: 50%; }
.ls-dot[data-status="doing"] { background: var(--color-accent); border-color: var(--color-accent); }
.ls-dot[data-status="review"] { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.ls-dot[data-status="done"] { background: var(--color-success); border-color: var(--color-success); }

.main { flex: 1; min-width: 0; padding: var(--space-xl) var(--space-lg) var(--space-2xl); max-width: 1060px; margin: 0 auto; }

/* ---------- 课程页 ---------- */
.crumbs { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-sm); }
.crumbs a { color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 0.16em; }
.crumbs a:hover { color: var(--color-accent); }
.lesson-head h1 { margin: var(--space-3xs) 0 var(--space-sm); font-size: var(--text-2xl); }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; font-size: var(--text-sm);
  color: var(--color-ink-2); padding: var(--space-xs) 0 var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.badge { display: inline-flex; align-items: center; padding: 1px var(--space-2xs); border: 1px solid var(--color-rule);
  border-radius: var(--space-3xs); background: var(--color-paper-2); font-size: var(--text-xs); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.badge.b-cap { background: var(--color-paper-2); border-color: var(--color-ink-rule); color: var(--color-ink-2); }
.badge.b-now { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }

.dt-status { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 34px; padding: 0 var(--space-sm);
  border: 1px solid var(--color-rule); border-radius: var(--radius-ctrl); background: var(--color-paper-3); color: var(--color-ink);
  font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; box-shadow: 0 1px 1px oklch(26% 0.02 255 / 0.04);
  transition: background-color var(--dur-micro) var(--ease-out); }
.dt-status::before { content: ""; width: 10px; height: 10px; flex: none; background: transparent;
  border: 1.5px solid var(--color-ink-rule); border-radius: 50%; }
.dt-status:hover { background: var(--color-paper-2); }
.dt-status:active { transform: translateY(1px); }
.dt-status.st-doing::before { background: var(--color-accent); border-color: var(--color-accent); }
.dt-status.st-review::before { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.dt-status.st-done::before { background: var(--color-success); border-color: var(--color-success); }
.dt-status:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.dt-status:disabled:hover { background: var(--color-paper-3); }

.hint { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-ctrl);
  padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; font-size: var(--text-sm); }
.hint.accept { border-color: var(--color-ink-rule); background: var(--color-paper-2); }

/* ---------- 正文渲染 ---------- */
.doc { max-width: 72ch; }
.doc h2 { font-size: var(--text-xl); border-top: 1px solid var(--color-rule);
  padding-top: var(--space-lg); margin: var(--space-xl) 0 var(--space-sm); }
.doc h3 { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-xs); }
.doc p { margin: var(--space-xs) 0; line-height: 1.8; font-size: var(--text-md); }
.doc li { margin: var(--space-3xs) 0; line-height: 1.75; }
.doc ul, .doc ol, ul.dt-list { padding-left: var(--space-lg); }
code { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--space-3xs);
  padding: 0 var(--space-3xs); font-family: var(--font-mono); font-size: 0.92em; color: var(--color-ink); }

/* 代码 = 浅灰台面（夜档落回深板），pygments 逐 token 上色 */
.doc pre { background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--color-rule); border-radius: var(--radius-ctrl);
  padding: var(--space-sm) var(--space-md); overflow-x: auto; font-size: var(--text-sm); line-height: 1.6;
  font-family: var(--font-mono); margin: var(--space-sm) 0; }
.doc pre code, .doc .codehilite code { background: transparent; border: 0; border-radius: 0; padding: 0;
  color: inherit; font-size: inherit; }
.doc .codehilite { border: 1px solid var(--color-rule); border-radius: var(--radius-ctrl); background: var(--code-bg); margin: var(--space-md) 0; }
.doc .codehilite pre { border: 0; border-radius: 0; margin: 0; background: transparent; color: inherit; }
.doc img { max-width: 100%; border-radius: var(--radius-ctrl); }

.doc blockquote { border-left: 3px solid var(--color-accent-2); margin: var(--space-md) 0;
  padding: var(--space-3xs) var(--space-md); color: var(--color-ink-2); background: var(--color-paper-2); border-radius: 0 var(--radius-ctrl) var(--radius-ctrl) 0; }
.doc table { border-collapse: collapse; width: 100%; margin: var(--space-md) 0; font-size: var(--text-sm); }
.doc th, .doc td { border-bottom: 1px solid var(--color-rule); padding: var(--space-xs) var(--space-sm); text-align: left; vertical-align: top; }
.doc th { font-weight: 600; color: var(--color-ink-2); border-bottom: 2px solid var(--color-ink-rule); }

/* ---------- 交互清单 ---------- */
li.dt-task { list-style: none; margin: var(--space-2xs) 0; }
li.dt-task label { display: flex; gap: var(--space-2xs); align-items: flex-start; cursor: pointer; }
li.dt-task span { font-size: var(--text-md); }
li.dt-task input { margin-top: 0.5em; accent-color: var(--color-accent); width: 15px; height: 15px; flex: none; }
li.dt-task:has(input:checked) span { color: var(--color-muted); text-decoration: line-through; }
li.dt-task:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- 测验 ---------- */
.quiz-sec { margin-top: var(--space-xl); border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); }
.quiz-sec h2 { font-size: var(--text-lg); border-top: 0; padding-top: 0; margin: 0 0 var(--space-2xs); }
.quiz-tip { font-size: var(--text-sm); color: var(--color-muted); }
.q { border: 1px solid var(--color-rule); border-radius: var(--radius-ctrl); background: var(--color-paper-3);
  padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; }
.q-t { font-weight: 700; margin-bottom: var(--space-xs); }
.q-o { padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--space-2xs);
  margin: var(--space-2xs) 0; cursor: pointer; font-size: var(--text-sm);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.q-o:hover { background: var(--color-paper-2); border-color: var(--color-ink-rule); }
.q-o.locked { cursor: default; }
.q-o.locked:hover { background: transparent; border-color: var(--color-rule); }
.q-o.right { border-color: var(--color-success); background: color-mix(in oklch, var(--color-success) 12%, var(--color-paper-3));
  color: var(--color-ink); font-weight: 600; }
.q-o.wrong { border-color: var(--color-error); background: color-mix(in oklch, var(--color-error) 10%, var(--color-paper-3)); }
.q-ex { margin-top: var(--space-xs); padding: var(--space-2xs) var(--space-sm); background: var(--color-paper-2);
  border-left: 3px solid var(--color-accent-2); border-radius: 0 var(--space-2xs) var(--space-2xs) 0; font-size: var(--text-sm); }
.quiz-score { margin-top: var(--space-xs); font-weight: 700; min-height: 1.2em; }

/* ---------- 上一篇 / 下一篇 ---------- */
.pager { display: flex; justify-content: space-between; gap: var(--space-sm); margin: var(--space-xl) 0 var(--space-sm);
  border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.pager .pg { max-width: 48%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 仪表盘：位置卡 ---------- */
.pos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.pos-card { background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); color: var(--color-ink);
  padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.pos-track { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.pos-track::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 3px; }
.pos-card.tc-G .pos-track::before { background: var(--line-G); }
.pos-card.tc-S .pos-track::before { background: var(--line-S); }
.pos-lesson { margin: 0; font-size: var(--text-md); font-weight: 700; line-height: 1.4; overflow-wrap: break-word; min-width: 0; }
.pos-lesson a { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.pos-lesson a:hover { color: var(--color-accent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-3xs) 0; }
.chip { display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--text-xs); padding: 1px var(--space-2xs);
  border: 1px solid var(--color-rule); border-radius: var(--space-3xs); background: var(--color-paper-2);
  color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.chip::before { content: ""; width: 8px; height: 8px; flex: none; background: transparent;
  border: 1px solid var(--color-ink-rule); border-radius: 50%; }
.chip[data-sst="doing"]::before { background: var(--color-accent); border-color: var(--color-accent); }
.chip[data-sst="review"]::before { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.chip[data-sst="done"]::before { background: var(--color-success); border-color: var(--color-success); }
.btn.primary.tc-G { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink);
  box-shadow: 0 2px 6px -2px oklch(54% 0.18 255 / 0.5); }
.btn.primary.tc-G:hover { background: color-mix(in oklch, var(--color-accent) 88%, var(--color-ink)); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn.primary.tc-S { background: transparent; border-color: var(--color-rule); color: var(--color-ink); }

.next-hint { background: color-mix(in oklch, var(--color-accent) 7%, var(--color-paper-3));
  border: 1px solid color-mix(in oklch, var(--color-accent) 25%, var(--color-rule)); border-radius: var(--radius-ctrl);
  padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; font-size: var(--text-sm); }
.next-hint .nh-label { font-weight: 700; margin-right: var(--space-2xs); color: var(--color-accent); }

/* ---------- 仪表盘：三线进度板（原墨板软化：白卡 + 线色胶囊条） ---------- */
.board { background: var(--color-paper-3); color: var(--color-ink); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-md) var(--space-lg); display: grid; gap: var(--space-sm); margin: var(--space-sm) 0; }
.board .bar-row { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-sm); padding: var(--space-3xs) 0; border-bottom: 1px solid var(--color-rule); }
.board .bar-row:last-child { border-bottom: 0; }
.bar-name { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 600; color: var(--color-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-name::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 3px; }
.bar-name.tc-G::before { background: var(--line-G); }
.bar-name.tc-S::before { background: var(--line-S); }
.bar-name.tc-M::before { background: var(--line-M); }
.bar { height: 10px; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; transition: width var(--dur-long) var(--ease-out); }
.bar-fill.tc-G { background: var(--line-G); }
.bar-fill.tc-S { background: var(--line-S); }
.bar-fill.tc-M { background: var(--line-M); }
.bar-text { color: var(--color-ink-2); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-text[data-track="G"] { color: var(--line-G); }
.bar-text[data-track="S"] { color: color-mix(in oklch, var(--line-S) 78%, var(--color-ink)); }
.bar-text[data-track="M"] { color: var(--line-M); }
.bar-note { font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- 仪表盘：时刻表与快捷入口 ---------- */
.timeline .tl-week { white-space: nowrap; font-weight: 700; }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-sm); }
.qcard { display: block; background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: var(--space-sm) var(--space-md);
  color: var(--color-ink); font-weight: 700; font-size: var(--text-sm); line-height: 1.5; text-decoration: none;
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.qcard span { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-3xs); }
.qcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: var(--color-ink-rule); text-decoration: none; }
.qcard:active { transform: translateY(0); }

/* ---------- 路径图 ---------- */
.stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg); }
.stage-card { background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); color: var(--color-ink); }
.sc-link { display: block; padding: var(--space-sm) var(--space-md); color: inherit; text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out); border-radius: inherit; }
.sc-link:hover { background: var(--color-paper-2); text-decoration: none; }
.sc-link:active { transform: translateY(1px); }
.sc-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.stage-card.planned { display: block; padding: var(--space-sm) var(--space-md); border-style: dashed;
  color: var(--color-ink-2); background: var(--color-paper-2); text-decoration: none; box-shadow: none; }
.sc-head { font-weight: 700; display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; overflow-wrap: break-word; min-width: 0; }
.sc-dot, [data-stagechip] { display: inline-block; width: 9px; height: 9px; flex: none; margin-left: auto;
  background: transparent; border: 1.5px solid var(--color-ink-rule); border-radius: 50%; }
[data-stagechip][data-sst="doing"] { background: var(--color-accent); border-color: var(--color-accent); }
[data-stagechip][data-sst="review"] { background: var(--color-accent-2); border-color: var(--color-accent-2); }
[data-stagechip][data-sst="done"] { background: var(--color-success); border-color: var(--color-success); }
.sc-meta { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-3xs); }
.sc-lessons { font-size: var(--text-sm); margin-top: var(--space-2xs); padding: 0 var(--space-md) var(--space-sm); }
.sc-lessons a { color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 0.16em; }
.sc-lessons a:hover { color: var(--color-accent); }
.sc-why { font-size: var(--text-md); color: var(--color-muted); margin-top: var(--space-2xs); line-height: 1.6; }

/* ---------- 复习中心 ---------- */
.rv-lesson { border: 1px solid var(--color-rule); border-radius: var(--radius-ctrl); background: var(--color-paper-3);
  margin: var(--space-2xs) 0; }
.rv-lesson summary { padding: var(--space-2xs) var(--space-sm); cursor: pointer; font-size: var(--text-md); font-weight: 500;
  display: flex; align-items: center; gap: var(--space-2xs); list-style: none; min-height: 36px;
  transition: background-color var(--dur-micro) var(--ease-out); }
.rv-lesson summary::-webkit-details-marker { display: none; }
.rv-lesson summary:hover { background: var(--color-paper-2); }
.rv-lesson ul { margin: 0; padding: var(--space-2xs) var(--space-md) var(--space-sm); }

/* ---------- 术语表 ---------- */
.glo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.glo-card { background: var(--color-paper-3); border: 1px solid var(--color-rule); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); color: var(--color-ink); padding: var(--space-sm) var(--space-md); }
.glo-term { font-weight: 700; font-size: var(--text-md); display: flex; align-items: center; gap: var(--space-2xs); overflow-wrap: break-word; min-width: 0; }
.glo-term::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--color-rule); }
.glo-card.tc-G .glo-term::before { background: var(--line-G); }
.glo-card.tc-S .glo-term::before { background: var(--line-S); }
.glo-card.tc-M .glo-term::before { background: var(--line-M); }
.glo-tag { font-size: var(--text-xs); color: var(--color-ink-2); border: 1px solid var(--color-rule); border-radius: var(--space-3xs);
  padding: 0 var(--space-2xs); margin-left: auto; }
.glo-def { font-size: var(--text-md); color: var(--color-ink-2); margin-top: var(--space-2xs); line-height: 1.6; }
.chip-btn[data-f]:hover { background: var(--color-paper-2); }
.chip-btn.tc-G { border-color: color-mix(in oklch, var(--line-G) 45%, var(--color-rule)); }
.chip-btn.tc-S { border-color: color-mix(in oklch, var(--line-S) 45%, var(--color-rule)); }
.chip-btn.tc-M { border-color: color-mix(in oklch, var(--line-M) 45%, var(--color-rule)); }

/* ---------- 通用表格 ---------- */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius-ctrl); }
.tbl { border-collapse: collapse; width: 100%; margin: var(--space-sm) 0; font-size: var(--text-sm); }
.tbl th, .tbl td { border-bottom: 1px solid var(--color-rule); padding: var(--space-2xs) var(--space-sm); text-align: left; vertical-align: top; }
.tbl th { font-weight: 600; color: var(--color-ink-2); border-bottom: 2px solid var(--color-ink-rule); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.dl-item, .dl-stage { font-weight: 500; white-space: nowrap; }
.dl-pit { min-width: 16em; }

/* ---------- 搜索下拉 ---------- */
.dt-results { position: absolute; top: calc(100% + var(--space-3xs)); left: 0; right: 0; background: var(--color-paper-3);
  border: 1px solid var(--color-rule); border-radius: var(--radius-ctrl); box-shadow: var(--shadow-pop);
  max-height: 380px; overflow: auto; display: none; z-index: var(--z-dropdown); }
.dt-results.open { display: block; }
.dt-results .res { display: block; padding: var(--space-2xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-ink); }
.dt-results .res:last-child { border-bottom: 0; }
.dt-results .res.sel, .dt-results .res:hover { background: var(--color-paper-2); text-decoration: none; }
.dt-results .res b { font-size: var(--text-sm); font-weight: 700; }
.dt-results .res p { margin: var(--space-3xs) 0 0; font-size: var(--text-xs); color: var(--color-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-tag { display: inline-block; margin-left: var(--space-2xs); font-size: var(--text-xs); padding: 0 var(--space-2xs);
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--space-3xs); color: var(--color-muted); }

/* ---------- 页脚 ---------- */
.foot { padding: var(--space-md); text-align: center; font-size: var(--text-sm); color: var(--color-muted);
  border-top: 1px solid var(--color-rule); }
.foot code { border: 0; background: transparent; padding: 0; }

/* ---------- 学习汇总 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-md) 0 var(--space-lg); }
.stats > * { padding-inline: var(--space-md); border-left: 1px solid var(--color-rule); }
.stats > :first-child { padding-left: 0; border-left: 0; }
.stats b { display: block; font: 700 var(--text-xl)/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.stats span { font-size: var(--text-sm); color: var(--color-muted); }

.muted { color: var(--color-muted); }

/* ---------- 手机（≤60rem 抽屉） ---------- */
@media (max-width: 60rem) {
  .menu-btn { display: inline-flex; }
  .sidebar { position: fixed; inset-block: 0; left: 0; transform: translateX(-105%);
    transition: transform var(--dur-short) var(--ease-out); z-index: var(--z-modal); width: min(320px, 84vw);
    max-height: 100vh; border-right: 1px solid var(--color-rule); box-shadow: var(--shadow-pop); }
  body.sb-open .sidebar { transform: none; }
  body.sb-open::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1);
    background: color-mix(in oklch, var(--color-ink) 45%, transparent); }
  .pos-grid { grid-template-columns: minmax(0, 1fr); }
  .board .bar-row { grid-template-columns: minmax(0, 1fr) auto; }
  .board .bar { grid-column: 1 / -1; }
  .main { padding: var(--space-md) var(--space-md) var(--space-xl); }
  .logo-sub { display: none; }
  .pos-lesson { font-size: var(--text-sm); }
  .meta code, .doc code { overflow-wrap: break-word; }
  .tools button, .btn-import { padding: 0 var(--space-2xs); }
  .searchbox input { min-height: 34px; }
  .topbar { flex-wrap: wrap; }
  .searchbox { flex-basis: 100%; order: 3; }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > :nth-child(3) { border-left: 0; padding-left: 0; }
  .stats > * { padding-block: var(--space-2xs); }
}
@media (max-width: 60rem) {
  .tbl-wrap .tbl, .doc table { min-width: 560px; }
  .tbl th:first-child, .tbl td:first-child { position: sticky; left: 0; background: var(--color-paper); }
}
@media (pointer: coarse) {
  .tools button, .btn-import, .menu-btn, .chip-btn, .btn, .pg, .dt-status { min-height: 44px; }
  .sb-ls, .rv-lesson summary { min-height: 44px; }
}