/* 知根 · 视觉系统
   作业本方格纸 + 蓝黑墨水 + 老师的红笔。红色只用于“批改”：根因圈注、卷面分、对错记号。 */

:root {
  --desk: #EDF1EA;
  --paper: #FCFDF9;
  --grid: #DCE5D8;
  --rule: #CCD6C9;
  --ink: #1D2A3A;
  --ink-2: #4E5B6E;
  --ink-3: #7B8697;
  --root: #2D6A4F;
  --root-ink: #23553F;
  --root-2: #E1EDE4;
  --red: #C8372D;
  --red-2: #F8E4E0;
  --amber: #A9740F;
  --amber-2: #F5EBD2;
  --focus: #2F6FB5;

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Noto Serif SC", serif;

  --t-xs: 13px; --t-sm: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 24px; --t-2xl: 30px; --t-3xl: 40px; --t-4xl: 52px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --r-sheet: 4px; --r-touch: 12px;
  --shadow-sheet: 0 1px 0 rgba(29, 42, 58, .06), 0 8px 24px -16px rgba(29, 42, 58, .35);
  --measure: 34em;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--desk); color: var(--ink);
  font: 400 var(--t-md)/1.65 var(--font-sans); letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--root-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--root); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 900; line-height: 1.25; margin: 0 0 var(--s3); letter-spacing: .02em; }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s3); }
.boot { padding: var(--s7); text-align: center; color: var(--ink-3); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); font-size: var(--t-sm); }
.small { font-size: var(--t-sm); }
.kai { font-family: var(--font-kai); }
.serif { font-family: var(--font-serif); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }

/* ── 顶栏与导航 ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20; background: rgba(237, 241, 234, .92);
  backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-in { max-width: 1120px; margin: 0 auto; padding: 10px var(--s4); display: flex; align-items: center; gap: var(--s4); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; }
.brand-name { font-family: var(--font-serif); font-weight: 900; font-size: 22px; letter-spacing: .12em; }
.nav { display: flex; gap: var(--s1); margin-left: auto; align-items: center; }
.nav a { text-decoration: none; color: var(--ink-2); padding: 8px 12px; border-radius: 8px; font-size: var(--t-sm); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.nav a:hover { color: var(--ink); }
.org-switch { font-size: var(--t-sm); padding: 6px 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); max-width: 11em; }
.tabbar { display: none; }
@media (max-width: 760px) {
  .nav .wide { display: none; }
  .has-tabbar .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
    background: var(--paper); border-top: 1px solid var(--rule); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a { text-decoration: none; color: var(--ink-3); font-size: 12px; text-align: center; padding: 4px 0; line-height: 1.3; }
  .tabbar a svg { display: block; margin: 0 auto 2px; width: 24px; height: 24px; }
  .tabbar a[aria-current="page"] { color: var(--root-ink); font-weight: 600; }
  .has-tabbar main { padding-bottom: 96px; }
}

main { max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }
main.narrow { max-width: 760px; }
main.form { max-width: 440px; }

/* ── 按钮与表单 ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-touch); border: 1px solid var(--ink-2); background: var(--paper); color: var(--ink);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn.primary { background: var(--root); border-color: var(--root); color: #fff; }
.btn.primary:hover { background: var(--root-ink); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); padding: 0 10px; }
.btn.quiet:hover { color: var(--ink); background: rgba(29, 42, 58, .05); }
.btn.big { min-height: 54px; font-size: var(--t-md); padding: 0 26px; }
.btn.block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: default; }
label.field { display: block; margin-bottom: var(--s4); }
label.field > span { display: block; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: 6px; }
input.text, select.text, textarea.text {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: #fff;
}
input.text:focus, select.text:focus, textarea.text:focus { border-color: var(--root); outline: 2px solid rgba(45, 106, 79, .2); }
textarea.text { min-height: 120px; line-height: 1.6; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--root); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 12px; padding: 3px; background: var(--paper); gap: 3px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; cursor: pointer; color: var(--ink-2); font-size: var(--t-sm); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.err { color: var(--red); font-size: var(--t-sm); min-height: 1.4em; }

/* ── 纸面 ──────────────────────────────────────────────────────────────── */
.sheet { background: var(--paper); border-radius: var(--r-sheet); box-shadow: var(--shadow-sheet); padding: var(--s5); }
.sheet + .sheet { margin-top: var(--s5); }
.sheet.flat { box-shadow: none; border: 1px solid var(--rule); }
.grid-paper {
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
}
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: var(--s3); margin-bottom: var(--s4); }
.sheet-head h1, .sheet-head h2 { margin: 0; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); margin: var(--s6) 0 var(--s3); flex-wrap: wrap; }
.section-title h2 { margin: 0; white-space: nowrap; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.list > li:last-child { border-bottom: 0; }
.list.sheet, .today.sheet { padding: var(--s1) var(--s5); }
.empty { padding: var(--s6) var(--s4); text-align: center; color: var(--ink-2); }
.empty .btn { margin-top: var(--s3); }
.banner { padding: var(--s3) var(--s4); border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); font-size: var(--t-sm); }
.banner.warn { border-color: #E6CF9B; background: var(--amber-2); }
.banner.note { border-left: 4px solid var(--root); }

/* 状态记号：已掌握=绿点，不稳=铅笔黄，薄弱=红笔，未测=空心 */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; flex: none; }
.st-mastered, .st-inferred { --c: var(--root); }
.st-shaky { --c: var(--amber); }
.st-weak, .st-suspect { --c: var(--red); }
.st-untested { --c: var(--ink-3); }
.dot.st-mastered, .dot.st-inferred, .dot.st-shaky, .dot.st-weak, .dot.st-suspect { background: var(--c); }
.dot.st-inferred, .dot.st-suspect { background: transparent; box-shadow: inset 0 0 0 2.5px var(--c); }
.dot.st-untested { box-shadow: inset 0 0 0 1.5px var(--c); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--t-xs); background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2); }
.chip.st-weak, .chip.st-suspect { border-color: rgba(200, 55, 45, .35); color: var(--red); background: var(--red-2); }
.chip.st-shaky { border-color: rgba(169, 116, 15, .35); color: var(--amber); background: var(--amber-2); }
.chip.st-mastered, .chip.st-inferred { border-color: rgba(45, 106, 79, .3); color: var(--root-ink); background: var(--root-2); }

/* ── 首页 ──────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s7); align-items: center; padding: var(--s6) 0 var(--s7); }
.hero h1 { font-size: clamp(36px, 6vw, var(--t-4xl)); line-height: 1.18; margin-bottom: var(--s4); }
.hero h1 .line { display: block; }
.hero .lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 26em; margin-bottom: var(--s5); }
.hero-diagram { padding: var(--s4) var(--s4) var(--s2); }
.hero-diagram .cap { font-size: var(--t-xs); color: var(--ink-3); margin: var(--s2) 0 0; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: var(--s5); padding-top: var(--s4); } }
/* homepage: one diagnosis written out like a marked test sheet */
.hero-trace { padding: var(--s4) var(--s5); }
.trace-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.trace { list-style: none; padding: 0; margin: 0; }
.trace li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); align-items: start; padding: 7px 0; border-bottom: 1px dashed var(--rule); }
.trace .nm { font-weight: 600; }
.trace-verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s2); margin-top: var(--s3); }
.trace-verdict .teacher-note { margin: 0; flex-basis: 100%; }
.howto { margin: var(--s4) 0 var(--s5); padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 1.2em); }
.howto li { margin: 4px 0; }
.verdict-line { font-family: var(--font-kai); color: var(--red); font-size: var(--t-lg); line-height: 1.6; margin: var(--s4) 0 var(--s2); }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-2); }
.site-foot .linkish { margin: 0 8px; font-size: inherit; }
.feedback-form { min-width: min(480px, 84vw); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); counter-reset: step; }
.steps li { counter-increment: step; padding-top: var(--s3); border-top: 2px solid var(--ink); }
.steps li::before { content: counter(step); font-family: var(--font-serif); font-weight: 900; font-size: var(--t-2xl); color: var(--root); display: block; line-height: 1.2; }
.steps h3 { margin: var(--s2) 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { padding: var(--s3) 0 var(--s3) 28px; border-bottom: 1px solid var(--rule); position: relative; }
.feature-list li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--root); }
.feature-list b { display: block; }
.site-foot { border-top: 1px solid var(--rule); margin-top: var(--s8); padding: var(--s5) var(--s4); text-align: center; font-size: var(--t-xs); color: var(--ink-3); }
.site-foot a { color: var(--ink-2); margin: 0 8px; }

/* 价目表 */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--r-sheet); background: var(--paper); }
.plan { padding: var(--s5); border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.plan:last-child { border-right: 0; }
.plan.featured { box-shadow: inset 0 4px 0 var(--root); }
.plan h3 { margin-bottom: var(--s2); }
.price { font-family: var(--font-serif); font-weight: 900; font-size: var(--t-3xl); line-height: 1.1; }
.price small { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 400; color: var(--ink-2); margin-left: 4px; }
.plan ul { list-style: none; padding: 0; margin: var(--s4) 0; flex: 1; font-size: var(--t-sm); }
.plan li { padding: 6px 0 6px 22px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--root); font-weight: 700; }
.plan li.no { color: var(--ink-3); }
.plan li.no::before { content: "–"; color: var(--ink-3); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } .plan { border-right: 0; border-bottom: 1px solid var(--rule); } .plan:last-child { border-bottom: 0; } }

/* ── 工作台 ─────────────────────────────────────────────────────────────── */
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.kid { background: var(--paper); border-radius: var(--r-sheet); box-shadow: var(--shadow-sheet); padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.kid-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.kid-name { font-family: var(--font-serif); font-weight: 900; font-size: var(--t-xl); }
.kid .score-mini { font-family: var(--font-kai); color: var(--red); font-size: var(--t-2xl); line-height: 1; }
.kid .actions { margin-top: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }
.kid.add { align-items: center; justify-content: center; text-align: center; background: transparent; box-shadow: none; border: 2px dashed var(--rule); min-height: 180px; color: var(--ink-2); text-decoration: none; }
.kid.add:hover { border-color: var(--root); color: var(--root-ink); }
.today { list-style: none; margin: 0; padding: 0; }
.today li { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.today li:last-child { border-bottom: 0; }
.tag { font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--root-2); color: var(--root-ink); white-space: nowrap; }
.tag.review { background: var(--amber-2); color: var(--amber); }
.stat-row { display: flex; gap: var(--s5); flex-wrap: wrap; }
.stat b { display: block; font-family: var(--font-serif); font-size: var(--t-2xl); font-weight: 900; line-height: 1.2; }
.stat span { font-size: var(--t-xs); color: var(--ink-2); }

/* ── 答题 ──────────────────────────────────────────────────────────────── */
.quiz { max-width: 720px; margin: 0 auto; }
.quiz-top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.progress { flex: 1; height: 6px; border-radius: 6px; background: rgba(29, 42, 58, .1); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--root); border-radius: 6px; transition: width .3s ease; }
.why { font-family: var(--font-kai); color: var(--ink-2); font-size: var(--t-md); margin-bottom: var(--s2); }
.qcard { padding: var(--s5); border-radius: var(--r-sheet); box-shadow: var(--shadow-sheet); position: relative; }
.qmeta { display: flex; gap: var(--s2); align-items: center; font-size: var(--t-xs); color: var(--ink-2); margin-bottom: var(--s3); }
.stem { font-size: var(--t-lg); line-height: 1.85; margin-bottom: var(--s4); word-break: break-word; }
.stem math, .choice math, .reveal math, .ws-item math { font-size: 1.12em; }
math[displaystyle="true"] { math-style: normal; }
.ws-key math { font-size: 1.05em; }
.figure { display: flex; justify-content: center; margin: var(--s2) 0 var(--s4); color: var(--ink); overflow-x: auto; }
.figure svg { height: auto; max-height: 300px; }
.choices { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.choice {
  display: flex; gap: var(--s3); align-items: center; min-height: 56px; padding: 10px 16px; border-radius: var(--r-touch);
  border: 1.5px solid var(--rule); background: #fff; text-align: left; cursor: pointer; font-size: var(--t-lg); line-height: 1.5;
}
.choice .letter { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-sm); flex: none; font-weight: 600; color: var(--ink-2); }
.choice:hover { border-color: var(--ink-2); }
.choice[aria-pressed="true"] { border-color: var(--root); background: var(--root-2); }
.choice[aria-pressed="true"] .letter { background: var(--root); border-color: var(--root); color: #fff; }
.choice.is-right { border-color: var(--root); background: var(--root-2); }
.choice.is-wrong { border-color: var(--red); background: var(--red-2); }
.answer-row { display: flex; gap: var(--s2); align-items: stretch; }
.answer-row input { flex: 1; font-size: var(--t-xl); min-height: 56px; text-align: center; border-radius: var(--r-touch); border: 1.5px solid var(--rule); background: #fff; padding: 0 12px; }
.answer-row .unit { align-self: center; color: var(--ink-2); }
.keys { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s2) 0 var(--s4); }
.keys button { min-width: 44px; min-height: 40px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); cursor: pointer; font-size: var(--t-md); }
.hint { font-size: var(--t-xs); color: var(--ink-3); margin-top: 6px; }
.quiz-actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.quiz-foot { display: flex; justify-content: space-between; margin-top: var(--s4); font-size: var(--t-sm); }
.reveal { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px dashed var(--rule); }
.reveal .verdict { display: flex; align-items: center; gap: var(--s3); font-family: var(--font-kai); font-size: var(--t-xl); }
.reveal .verdict.right { color: var(--root-ink); }
.reveal .verdict.wrong { color: var(--red); }
.reveal ol { margin: var(--s2) 0 0; padding-left: 1.4em; color: var(--ink-2); }
.mis-note { font-family: var(--font-kai); color: var(--red); margin-top: var(--s2); }
.pen-mark { width: 54px; height: 54px; flex: none; }
.pen-mark path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: pen 0.45s ease-out forwards; }
.pen-mark path + path { animation-delay: .18s; }
@keyframes pen { to { stroke-dashoffset: 0; } }
.level-pips { display: inline-flex; gap: 3px; }
.level-pips i { width: 8px; height: 8px; border-radius: 2px; background: rgba(29, 42, 58, .15); }
.level-pips i.on { background: var(--ink-2); }
.streak { display: flex; gap: 6px; }
.streak i { width: 22px; height: 22px; border-radius: 50%; border: 2px dashed var(--rule); }
.streak i.on { border: 0; background: var(--root); }

/* ── 报告 ──────────────────────────────────────────────────────────────── */
.report { max-width: 900px; margin: 0 auto; }
.paper-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: start; border-bottom: 2px solid var(--ink); padding-bottom: var(--s4); margin-bottom: var(--s5); }
.paper-head h1 { font-size: clamp(24px, 6.4vw, var(--t-2xl)); margin-bottom: var(--s2); white-space: nowrap; }
@media (max-width: 520px) { .red-score { font-size: 48px; min-width: 88px; } .paper-head { gap: var(--s2); } }
.paper-fields { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-sm); color: var(--ink-2); }
.paper-fields b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.red-score { font-family: var(--font-kai); color: var(--red); font-size: 64px; line-height: 1; padding: 0 6px; text-align: center; min-width: 120px; }
.red-score small { display: block; font-size: var(--t-sm); margin-top: 4px; }
.red-score svg { display: block; width: 100%; height: 18px; color: var(--red); margin-top: 2px; }
.red-score svg path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: pen .5s .3s ease-out forwards; }
.red-score svg path + path { animation-delay: .55s; }
.tally { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(29, 42, 58, .08); margin: var(--s2) 0; }
.tally i { display: block; height: 100%; }
.tally .m { background: var(--root); } .tally .s { background: var(--amber); } .tally .w { background: var(--red); } .tally .u { background: rgba(29, 42, 58, .15); }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-2); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.roots { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.root-item { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); align-items: start; }
.circled { position: relative; display: inline-block; padding: 8px 20px; margin: 4px 6px; font-family: var(--font-serif); font-weight: 900; font-size: var(--t-xl); white-space: nowrap; }
.circled svg { position: absolute; inset: -6px -10px; width: calc(100% + 20px); height: calc(100% + 12px); color: var(--red); overflow: visible; pointer-events: none; }
.circled svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: pen .8s .2s ease-out forwards; }
.teacher-note { font-family: var(--font-kai); color: var(--red); font-size: var(--t-md); line-height: 1.6; }
.root-item .where { font-size: var(--t-xs); color: var(--ink-3); }
.path { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.path li { counter-increment: p; display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.path li::before { content: counter(p); font-family: var(--font-serif); font-weight: 900; font-size: var(--t-lg); color: var(--ink-3); text-align: center; }
.path .nm { font-weight: 600; }
.path .meta { font-size: var(--t-xs); color: var(--ink-3); }
.margin-notes { list-style: none; padding: 0; margin: 0; }
.margin-notes li { border-left: 3px solid var(--red); padding: 4px 0 4px var(--s4); margin-bottom: var(--s4); }
.margin-notes .kai { color: var(--red); font-size: var(--t-lg); }
.units { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.units th, .units td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.units th { font-weight: 600; color: var(--ink-2); font-size: var(--t-xs); }
.units td.n { text-align: right; width: 3.5em; }
.units.trend th.n, .units.trend td.n { width: 5.5em; white-space: nowrap; }
.locked { position: relative; border: 1px dashed var(--rule); border-radius: 10px; padding: var(--s5); text-align: center; color: var(--ink-2); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(29, 42, 58, .025) 10px 20px); }
.rootmap-wrap { overflow-x: auto; padding: var(--s2) 0; }
.rootmap { display: block; margin: 0 auto; color: var(--ink); }
.rootmap .lbl { font-size: 13px; fill: var(--ink); }
.rootmap .edge { fill: none; stroke: #8C9A8E; stroke-width: 1.6; }
.rootmap .edge.soft { stroke-dasharray: 4 4; }
.rootmap .ring path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: pen .9s .4s ease-out forwards; }
.answers-log li { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s3); align-items: start; }
.mark { font-family: var(--font-kai); font-size: var(--t-xl); line-height: 1; }
.mark.right { color: var(--root); } .mark.wrong { color: var(--red); }

/* ── 热力图 ─────────────────────────────────────────────────────────────── */
.heat-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--rule); border-radius: var(--r-sheet); background: var(--paper); }
table.heat { border-collapse: separate; border-spacing: 0; font-size: 12px; }
table.heat th, table.heat td { border-bottom: 1px solid var(--grid); border-right: 1px solid var(--grid); padding: 0; }
table.heat thead th { position: sticky; top: 0; background: var(--paper); z-index: 2; height: 150px; vertical-align: bottom; }
table.heat thead th > div { writing-mode: vertical-rl; padding: 6px 4px; font-weight: 500; color: var(--ink-2); max-height: 140px; overflow: hidden; }
table.heat tbody th { position: sticky; left: 0; background: var(--paper); z-index: 1; text-align: left; padding: 6px 10px; white-space: nowrap; font-weight: 600; }
table.heat td { width: 28px; height: 28px; text-align: center; }
table.heat td i { display: block; width: 100%; height: 28px; }

/* ── 练习卷（屏幕预览 + A4 打印） ───────────────────────────────────────── */
.ws-toolbar { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-bottom: var(--s4); }
.ws-page { width: 210mm; min-height: 297mm; margin: 0 auto var(--s5); padding: 14mm 14mm 12mm; background: #fff; box-shadow: var(--shadow-sheet); color: #111; font-size: 15px; }
.ws-page h1 { font-size: 22px; text-align: center; margin: 0 0 4mm; }
.ws-fields { display: flex; justify-content: space-between; gap: 6mm; font-size: 13px; border-bottom: 1.5px solid #111; padding-bottom: 3mm; margin-bottom: 4mm; }
.ws-fields span { white-space: nowrap; }
.ws-fields u { display: inline-block; min-width: 22mm; text-decoration: none; border-bottom: 1px solid #111; }
.ws-items { list-style: none; padding: 0; margin: 0; }
.ws-item { break-inside: avoid; page-break-inside: avoid; padding: 2.5mm 0 3mm; border-bottom: 1px dotted #bbb; }
.ws-item .q { display: flex; gap: 2mm; line-height: 1.8; }
.ws-item .no { font-weight: 700; min-width: 7mm; }
.ws-item .figure { justify-content: flex-start; margin: 1mm 0 1mm 9mm; }
.ws-item .figure svg { max-height: 46mm; width: auto; }
.ws-item .opts { display: flex; flex-wrap: wrap; gap: 1mm 8mm; margin: 1mm 0 0 9mm; }
.ws-item .space { height: 14mm; }
.ws-item .space.tall { height: 24mm; }
.ws-foot { margin-top: 5mm; font-size: 11px; color: #666; display: flex; justify-content: space-between; }
.ws-key h2 { font-size: 18px; }
.ws-key ol { padding-left: 1.4em; font-size: 13px; line-height: 1.7; columns: 2; column-gap: 10mm; }
.ws-key li { break-inside: avoid; margin-bottom: 1.5mm; }
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--s2); }
.grade-grid button { min-height: 52px; border-radius: 10px; border: 1.5px solid var(--rule); background: #fff; cursor: pointer; font-size: var(--t-md); }
.grade-grid button[data-v="1"] { border-color: var(--root); background: var(--root-2); color: var(--root-ink); }
.grade-grid button[data-v="0"] { border-color: var(--red); background: var(--red-2); color: var(--red); }

/* ── 浮层 ──────────────────────────────────────────────────────────────── */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: var(--t-sm); z-index: 50; max-width: 90vw; }
dialog.modal { border: 0; border-radius: 8px; padding: var(--s5); max-width: min(520px, 92vw); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); background: var(--paper); color: var(--ink); }
dialog.modal::backdrop { background: rgba(29, 42, 58, .4); }
.links-sheet li { display: grid; grid-template-columns: 6em 1fr; gap: var(--s3); padding: 6px 0; border-bottom: 1px dashed var(--rule); font-size: var(--t-sm); word-break: break-all; }
.code-list { font-variant-numeric: tabular-nums; letter-spacing: .06em; columns: 2; font-size: var(--t-sm); }

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

@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .topbar, .tabbar, .no-print, .site-foot, .toast { display: none !important; }
  main { padding: 0; max-width: none; }
  .ws-page { box-shadow: none; margin: 0; page-break-after: always; break-after: page; }
  .ws-page:last-child { page-break-after: auto; break-after: auto; }
  .report { padding: 12mm 14mm; max-width: none; }
  .report .sheet { box-shadow: none; padding: 0; }
  .circled svg path, .rootmap .ring path, .red-score svg path { animation: none; stroke-dashoffset: 0; }
  a { color: inherit; text-decoration: none; }
}