/* ============================================================
   views.css — 各视图专属样式
   ============================================================ */

/* ---------- 首页 Hero ---------- */
.hero {
  position: relative; overflow: hidden; padding: var(--s7) var(--s6);
  border-radius: var(--r-xl); color: #eafff7;
  background: linear-gradient(135deg, #0c5f4e 0%, #0f7a64 52%, #14937a 100%);
  box-shadow: var(--shadow-lg);
}
.hero::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(560px 320px at 88% -20%, rgba(255,255,255,.18), transparent 60%),
  radial-gradient(420px 300px at -8% 120%, rgba(0,0,0,.22), transparent 55%); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero .kicker { color: #9ff0d8; }
.hero h2 { font-size: var(--fs-3xl); font-weight: 780; letter-spacing: -.02em; margin: var(--s2) 0; color: #fff; }
.hero p { color: #c8f0e4; max-width: 60ch; font-size: var(--fs-md); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero .btn--primary { background: #fff; color: var(--brand-strong); }
.hero .btn--primary:hover { background: #eafff7; color: var(--brand-strong); }
.hero .btn--ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.32); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s6); }
.hero-meta div { line-height: 1.2; }
.hero-meta b { font-size: var(--fs-2xl); font-family: var(--font-code); font-weight: 700; color: #fff; }
.hero-meta span { font-size: var(--fs-xs); color: #a7e4d3; display: block; }

/* ---------- 区块标题行 ---------- */
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin: var(--s6) 0 var(--s4); }
.block-head .section-sub { margin-top: 2px; }

/* ---------- 模块卡片 ---------- */
.module-card { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.module-card .mc-top { display: flex; align-items: center; gap: var(--s3); }
.module-no {
  width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center;
  font-family: var(--font-code); font-weight: 700; font-size: 18px; color: var(--on-brand);
  background: linear-gradient(140deg, var(--brand), var(--brand-strong));
}
.module-card h3 { font-size: var(--fs-md); }
.module-card .mc-target { font-size: var(--fs-xs); color: var(--brand); font-weight: 600; }
.module-card .mc-sum { color: var(--ink-soft); font-size: var(--fs-sm); flex: 1; }
.module-card .mc-foot { display: flex; align-items: center; gap: var(--s3); }
.module-card .mc-foot .progress { flex: 1; }
.module-card .mc-units { font-family: var(--font-code); font-size: var(--fs-xs); color: var(--ink-mute); }

/* ---------- 快捷动作 / 路线 ---------- */
.next-card { display: flex; align-items: center; gap: var(--s4); padding: var(--s5); background: linear-gradient(120deg, var(--surface), var(--surface-2)); }
.next-card .nc-icon { width: 56px; height: 56px; flex: none; border-radius: 16px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 26px; }
.roadmap { display: grid; gap: var(--s2); }
.road-step { display: flex; align-items: center; gap: var(--s3); padding: 11px var(--s4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.road-step .rs-no { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--surface-3); color: var(--ink-soft); display: grid; place-items: center; font-family: var(--font-code); font-size: 12px; font-weight: 700; }
.road-step .progress { width: 120px; }
.road-step.is-done .rs-no { background: var(--ok); color: #fff; }

/* ---------- 课程页 (Learn) ---------- */
.lesson-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lesson-rail-w);
  gap: 18px; align-items: start;
}
.lesson { max-width: 100%; min-width: 0; }
.lesson > p, .lesson-section > p { max-width: 88ch; }
.lesson-rail {
  position: sticky; top: 116px; align-self: start;
  max-height: calc(100vh - 132px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable; padding-right: 2px;
}
.lesson-rail-card { display: grid; gap: 5px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-sm); }
.lesson-rail-head { padding: 3px 5px 10px; border-bottom: 1px solid var(--line); margin-bottom: 3px; }
.lesson-rail-head small, .lesson-rail-head strong { display: block; }
.lesson-rail-head small { color: var(--brand); font: 700 10px/1.4 var(--font-code); }
.lesson-rail-head strong { margin: 3px 0 7px; font-size: var(--fs-sm); line-height: 1.45; }
.lesson-rail-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.lesson-rail-card .lesson-rail-meta span { width: auto; height: auto; padding: 3px 7px; border-radius: var(--r-full); font-size: 9px; white-space: nowrap; }
.lesson-rail-card > b { padding: 6px 8px 2px; font-size: var(--fs-xs); color: var(--ink-mute); }
.lesson-rail-card a { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: var(--r-sm); color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.4; }
.lesson-rail-card a:hover { background: var(--surface-2); color: var(--brand); }
.lesson-rail-card span { flex: none; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-family: var(--font-code); font-weight: 700; font-size: 10px; }
.lesson-rail-foot { margin-top: 5px; padding: 9px 8px 2px; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: 10px; line-height: 1.5; }
@media (max-width: 1240px) {
  .lesson-shell { grid-template-columns: 1fr; }
  .lesson-rail { display: none; }
}
.unit-header { margin-bottom: var(--s5); }
.route-hero { color: var(--ink); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 72%, var(--surface)), var(--surface)); border: 1px solid var(--line); }
.route-hero .kicker { color: var(--brand); }
.route-hero h2 { color: var(--ink); }
.route-hero p { color: var(--ink-soft); }
.route-hero .hero-meta b { color: var(--ink); }
.route-hero .hero-meta span { color: var(--ink-mute); }
.route-hero .btn--primary { background: var(--brand); color: var(--on-brand); }
.route-hero .btn--ghost { background: var(--surface); color: var(--brand-ink); border-color: var(--brand); }
.learning-contract { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin: var(--s5) 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--line); }
.learning-contract>div { padding: var(--s4); background: var(--surface); }
.learning-contract span { color: var(--brand); font: 700 11px/1 var(--font-code); }
.learning-contract b { display: block; margin-top: var(--s3); font-size: var(--fs-md); }
.learning-contract p { margin: var(--s2) 0 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.65; }
.path-stage-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
.path-stage { padding: var(--s4); }
.path-stage-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.path-stage-top span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); font: 700 13px var(--font-code); }
.path-stage-top small { color: var(--brand); font-weight: 700; }
.path-stage h3 { margin: var(--s3) 0 var(--s2); font-size: var(--fs-xl); }
.path-stage>p { min-height: 48px; margin: 0; color: var(--ink-soft); line-height: 1.65; }
.path-stage-outcome { display: grid; grid-template-columns: auto 1fr; gap: 9px; margin-top: var(--s3); padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-xs); }
.path-stage-outcome b { color: var(--brand); }
.path-stage-foot { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: end; margin-top: var(--s4); }
.path-stage-foot small { display: block; margin-top: 5px; color: var(--ink-soft); }
.training-entry { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.4fr) auto; align-items: center; gap: var(--s5); margin: var(--s6) 0; padding: var(--s5); border: 1px solid var(--brand); border-radius: var(--r-lg); background: var(--brand-soft); }
.training-entry h3 { margin: var(--s2) 0; font-size: var(--fs-xl); }
.training-entry p { color: var(--ink-soft); }
.training-entry-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.training-entry-tracks span { padding: var(--s3); border-radius: var(--r); background: var(--surface); }
.training-entry-tracks b, .training-entry-tracks small { display: block; }
.training-entry-tracks small { margin-top: 4px; color: var(--ink-soft); line-height: 1.45; }
.coverage-band { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1.25fr); gap: var(--s5); margin: var(--s6) 0; padding: var(--s5); border-radius: var(--r-lg); background: var(--ink); color: var(--paper); }
.coverage-band h3 { margin: var(--s3) 0 0; font-size: var(--fs-2xl); line-height: 1.35; }
.coverage-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: color-mix(in srgb, var(--paper) 16%, transparent); }
.coverage-list>div { padding: var(--s3); background: var(--ink); }
.coverage-list span, .coverage-list b, .coverage-list small { display: block; }
.coverage-list span { color: var(--brand); font: 700 11px var(--font-code); }
.coverage-list b { margin: 5px 0; }
.coverage-list small { color: color-mix(in srgb, var(--paper) 62%, transparent); line-height: 1.5; }

@media (max-width: 900px) {
  .learning-contract { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .coverage-band { grid-template-columns: 1fr; }
  .training-entry { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .learning-contract, .path-stage-grid, .knowledge-coverage-grid, .training-entry-tracks { grid-template-columns: 1fr; }
  .coverage-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .path-stage>p { min-height: 0; }
}
.unit-header .uh-id { font-family: var(--font-code); color: var(--brand); font-weight: 700; font-size: var(--fs-sm); }
.unit-header h2 { font-size: var(--fs-2xl); font-weight: 770; letter-spacing: -.02em; margin: 4px 0 8px; }
.unit-header .uh-sub { color: var(--ink-soft); font-size: var(--fs-md); }
.unit-header .uh-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

.unit-tabs { position: sticky; top: 62px; z-index: 10; display: flex; gap: var(--s2); padding: var(--s3) 0; margin-bottom: var(--s4);
  background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(8px); }

.lesson-targets { display: grid; gap: var(--s2); }
.lesson-target { display: flex; gap: var(--s3); align-items: flex-start; }
.lesson-target .lt-no { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--font-code); }

.bridge-card {
  margin: 0 0 var(--s5);
  padding: var(--s5);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--brand-soft) 54%, var(--surface)));
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 120px;
}
.bridge-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); }
.bridge-head h3 { margin: 2px 0 6px; font-size: var(--fs-xl); font-weight: 760; letter-spacing: 0; }
.bridge-head p { margin: 0; color: var(--ink-soft); line-height: 1.7; }
.bridge-pill {
  flex: none; display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line);
  color: var(--brand); font-size: var(--fs-xs); font-weight: 750;
}
.bridge-pill.is-warn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); background: var(--danger-soft); }
.bridge-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); gap: var(--s3); margin-top: var(--s4); }
.bridge-panel {
  min-width: 0; padding: var(--s4); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.bridge-panel b, .bridge-bottom b { display: block; margin-bottom: 8px; color: var(--ink); }
.bridge-panel p { margin: 0; color: var(--ink-soft); line-height: 1.7; }
.bridge-mini {
  margin-top: var(--s3); padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink);
}
.bridge-links { display: grid; gap: 7px; }
.bridge-link {
  display: grid; gap: 3px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  transition: var(--transition);
}
.bridge-link:hover { border-color: var(--brand); background: var(--brand-soft); }
.bridge-link span { color: var(--brand-ink); font-weight: 750; font-size: var(--fs-sm); }
.bridge-link span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bridge-link span em { font-style: normal; font-size: 10px; color: var(--ink-soft); }
.bridge-link.is-missing { border-color: color-mix(in srgb, var(--danger) 36%, var(--line)); background: var(--danger-soft); }
.bridge-link.is-missing span em { color: var(--danger); }
.bridge-link small { color: var(--ink-soft); line-height: 1.45; }
.bridge-link.is-static { cursor: default; }
.knowledge-coverage { margin-top: var(--s3); padding: var(--s4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.knowledge-coverage-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.knowledge-coverage-head b, .knowledge-coverage-head span { display: block; }
.knowledge-coverage-head span { margin-top: 3px; color: var(--ink-soft); font-size: var(--fs-xs); }
.knowledge-coverage-head>small { padding: 4px 9px; border-radius: var(--r-full); background: var(--ok-soft); color: var(--ok); font-weight: 750; }
.knowledge-coverage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--s3); }
.knowledge-coverage-grid article { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.knowledge-coverage-grid article>span { color: var(--brand); font: 700 11px/1.5 var(--font-code); }
.knowledge-coverage-grid b { font-size: var(--fs-sm); }
.knowledge-coverage-grid p { margin: 3px 0; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.55; }
.knowledge-coverage-grid small { color: var(--ink); font-size: 11px; }
.bridge-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.bridge-word {
  min-width: 0; display: grid; gap: 5px;
  padding: var(--s3); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.bridge-word strong { color: var(--brand-ink); font-size: var(--fs-md); }
.bridge-word p { margin: 0; color: var(--ink); line-height: 1.55; font-size: var(--fs-sm); }
.bridge-word small { color: var(--ink-soft); line-height: 1.45; }
.bridge-word em {
  font-style: normal; color: var(--ink-mute); font-size: var(--fs-xs);
  padding-top: 4px; border-top: 1px dashed var(--line);
}
.bridge-bottom {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s3);
}
.bridge-bottom > div {
  padding: var(--s4); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.bridge-bottom ol, .bridge-bottom ul { margin: 0 0 0 var(--s5); display: grid; gap: 5px; color: var(--ink-soft); }
@media (max-width: 900px) {
  .bridge-grid, .bridge-bottom { grid-template-columns: 1fr; }
  .bridge-head { display: grid; }
}

.lesson-knowledge { scroll-margin-top: 96px; margin-bottom: var(--s5); }
.lesson-prereq { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: var(--s3); padding: 10px 12px; border-radius: var(--r); background: var(--info-soft); color: var(--ink-soft); font-size: var(--fs-sm); }
.lesson-prereq button { padding: 4px 9px; border-radius: var(--r-full); background: var(--surface); color: var(--brand-ink); font-size: var(--fs-xs); font-weight: 700; }
.knowledge-table { min-width: 720px; }
.knowledge-table th:first-child, .knowledge-table td:first-child { width: 46px; color: var(--brand); font-family: var(--font-code); }
.knowledge-table th:nth-child(2) { width: 21%; }
.knowledge-table td { vertical-align: top; line-height: 1.65; }

.lesson-section { margin: var(--s6) 0; scroll-margin-top: 120px; }
.lesson-section > h3 { font-size: var(--fs-xl); font-weight: 720; display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.lesson-section > h3 .ls-no { font-family: var(--font-code); font-size: var(--fs-sm); color: var(--on-brand); background: var(--brand); padding: 2px 10px; border-radius: var(--r-full); }
.lesson-section p { margin: var(--s2) 0; color: var(--ink); }
.lesson-section h4 { font-size: var(--fs-md); margin: var(--s4) 0 var(--s2); color: var(--brand-ink); }
[data-theme="dark"] .lesson-section h4 { color: var(--brand-strong); }
.lesson-section ul, .lesson-section ol { margin: var(--s2) 0 var(--s2) var(--s5); display: grid; gap: 5px; }
.lesson-section li { padding-left: 3px; }

.legacy-figure { margin: var(--s4) 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.legacy-figure img { width: 100%; }
.legacy-figure figcaption { padding: 7px 12px; font-size: var(--fs-xs); color: var(--ink-mute); text-align: center; }
.figure-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.figure-row .legacy-figure { flex: 1; min-width: 180px; margin: var(--s2) 0; }

/* 例题 */
.example { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin: var(--s4) 0; }
.example-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--accent-soft); }
.example-head .ex-tag { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); background: var(--surface); padding: 2px 10px; border-radius: var(--r-full); }
.example-body { padding: var(--s4); }
.example-body .ex-q { font-weight: 600; margin-bottom: var(--s3); }
.think-list { display: grid; gap: var(--s2); margin: var(--s3) 0; }
.think-step { display: flex; gap: var(--s3); }
.think-step .ts-no { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--info-soft); color: var(--info); display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--font-code); }

/* 板书 / 老师脚本 / 常见错误 */
.board { background: linear-gradient(160deg, #0e2a23, #103a30); color: #cdeee2; border-radius: var(--r-lg); padding: var(--s5); font-family: var(--font-code); box-shadow: var(--shadow); }
.board h4 { color: #7fe6cb; margin-bottom: var(--s3); font-family: var(--font-ui); }
.board ul { list-style: none; display: grid; gap: var(--s2); }
.board li { padding-left: var(--s4); position: relative; font-size: var(--fs-sm); }
.board li::before { content: "▸"; position: absolute; left: 0; color: #5fcfae; }

.teacher-script { background: var(--info-soft); border-radius: var(--r-lg); padding: var(--s5); border: 1px solid transparent; }
.teacher-script h4 { color: var(--info); margin-bottom: var(--s3); display: flex; align-items: center; gap: 8px; }
.script-step { display: flex; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px dashed color-mix(in srgb, var(--info) 24%, transparent); }
.script-step:last-child { border-bottom: none; }
.script-step .ss-time { flex: none; font-family: var(--font-code); font-size: var(--fs-xs); color: var(--info); font-weight: 700; width: 52px; }

.mistake-list { display: grid; gap: var(--s2); }
.mistake { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--danger-soft); border-radius: var(--r); }
.mistake .mk-x { color: var(--danger); font-weight: 700; flex: none; }

/* ---------- 统计卡 / 看板 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
@media (max-width: 860px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { padding: var(--s4) var(--s5); }
.stat-card .sc-label { font-size: var(--fs-xs); color: var(--ink-mute); font-weight: 600; }
.stat-card .sc-value { font-size: var(--fs-3xl); font-family: var(--font-code); font-weight: 700; color: var(--brand); line-height: 1.1; margin-top: 4px; }
.stat-card .sc-foot { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 4px; }

/* 掌握度地图 */
.mastery { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 6px; }
.mastery-cell { aspect-ratio: 1; border-radius: 7px; background: var(--surface-3); display: grid; place-items: center; font-family: var(--font-code); font-size: 10px; color: var(--ink-mute); cursor: pointer; transition: var(--transition); position: relative; }
.mastery-cell:hover { transform: scale(1.12); z-index: 2; box-shadow: var(--shadow); }
.mastery-cell.m1 { background: #d6efe2; color: #2c8a57; } .mastery-cell.m2 { background: #8fd9b4; color: #0a4e40; }
.mastery-cell.m3 { background: var(--brand); color: #fff; } .mastery-cell.m4 { background: var(--brand-strong); color: #fff; }
[data-theme="dark"] .mastery-cell.m1 { background: #173a2c; color: #56c489; }
.mastery-legend { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); font-size: var(--fs-xs); color: var(--ink-mute); }
.mastery-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mastery-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* 薄弱点 / 复习队列 */
.list-row { display: flex; align-items: center; gap: var(--s3); padding: 11px var(--s4); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); transition: var(--transition); }
.list-row:hover { border-color: var(--brand); }
.list-row + .list-row { margin-top: var(--s2); }
.list-row .lr-id { font-family: var(--font-code); font-size: var(--fs-xs); color: var(--brand); flex: none; width: 46px; }
.list-row .lr-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 考试中心 ---------- */
.exam-set-card { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.exam-set-card .es-track { align-self: flex-start; }
.exam-set-card h3 { font-size: var(--fs-md); }
.exam-set-card .es-meta { display: flex; gap: var(--s4); font-size: var(--fs-xs); color: var(--ink-mute); font-family: var(--font-code); }
.exam-archive-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.exam-archive-stats > div { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: center; }
.exam-archive-stats b, .exam-archive-stats span { display: block; }
.exam-archive-stats b { color: var(--brand); font: 750 var(--fs-2xl)/1 var(--font-code); }
.exam-archive-stats span { margin-top: 8px; color: var(--ink-soft); font-size: var(--fs-sm); }
.official-paper-card { display: flex; flex-direction: column; }
.official-paper-card .btn { margin-top: auto; }
.official-exam-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s4); }
.official-save-state { align-self: center; padding: 6px 10px; border-radius: var(--r-full); background: var(--ok-soft); color: var(--ok); font: 700 var(--fs-xs) var(--font-code); }
.official-timer { align-self: center; min-width: 72px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface); color: var(--brand); text-align: center; font: 750 var(--fs-sm) var(--font-code); }
.official-exam-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s5); align-items: start; }
.official-question-list { display: grid; gap: var(--s4); min-width: 0; }
.official-question-card { scroll-margin-top: 82px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.official-question-head { display: flex; align-items: center; gap: var(--s3); padding: 12px var(--s4); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.official-question-head span { padding: 4px 8px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand); font: 700 var(--fs-xs) var(--font-code); }
.official-question-head b { font-size: var(--fs-md); }
.official-question-art { padding: var(--s3) var(--s4) 0; background: #fff; }
.official-question-fragment { position: relative; width: 100%; overflow: hidden; background: #fff; }
.official-question-fragment + .official-question-fragment { border-top: 1px dashed #d9dde4; }
.official-question-fragment img { display: block; width: 100%; max-width: none; height: auto; }
.official-question-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); padding: var(--s4); border-top: 1px solid var(--line); }
.official-question-option { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface-2); color: var(--ink); font: 750 var(--fs-md) var(--font-code); transition: var(--transition); }
.official-question-option:hover, .official-question-option.is-picked { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); transform: translateY(-1px); }
.official-answer-sheet { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.official-card-group { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.official-card-group h4 { margin-bottom: 9px; color: var(--ink-soft); font-size: var(--fs-sm); }
.official-card-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.official-card-button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink-soft); font: 700 var(--fs-xs) var(--font-code); }
.official-card-button:hover { border-color: var(--brand); color: var(--brand); }
.official-card-button.is-done { border-color: var(--brand); background: var(--brand); color: #fff; }
.official-card-legend { display: flex; gap: var(--s4); margin-top: var(--s3); color: var(--ink-mute); font-size: var(--fs-xs); }
.official-card-legend span { display: inline-flex; align-items: center; gap: 6px; }
.official-card-legend i { width: 12px; height: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); }
.official-card-legend i.is-done { border-color: var(--brand); background: var(--brand); }
.official-code-answer { display: grid; gap: 8px; padding: var(--s4); border-top: 1px solid var(--line); color: var(--ink-soft); }
.official-code-answer textarea { min-height: 300px; resize: vertical; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--code-bg); color: var(--code-text); font: 14px/1.65 var(--font-code); tab-size: 4; }
.official-code-answer small { color: var(--ink-mute); line-height: 1.6; }
.exam-score { font: 750 48px/1 var(--font-code); color: var(--danger); }
.exam-score small { font-size: var(--fs-lg); color: var(--ink-mute); }
.gesp-session-card { display: grid; align-content: start; }
.gesp-session-card .spread > b { color: var(--brand); font: 750 var(--fs-xl) var(--font-code); }
.gesp-level-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.exam-score.is-pass { color: var(--ok); }
@media (max-width: 1080px) { .official-exam-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s3); } }
@media (max-width: 900px) {
  .official-exam-grid { grid-template-columns: 1fr; }
  .official-answer-sheet { position: static; max-height: none; order: -1; padding: var(--s3); }
  .official-card-group { margin-top: 8px; padding-top: 8px; }
  .official-card-group h4 { margin-bottom: 5px; }
  .official-card-buttons { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; }
  .official-card-button { min-height: 36px; aspect-ratio: auto; }
  .official-card-legend { margin-top: 8px; }
}
@media (max-width: 620px) {
  .exam-archive-stats { grid-template-columns: 1fr; }
  .official-exam-head { display: grid; }
  .official-exam-head .row { flex-wrap: wrap; }
  .official-card-buttons { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .official-card-button { min-height: 36px; }
}
.problem-link { display: flex; align-items: center; gap: var(--s3); padding: 11px var(--s4); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); transition: var(--transition); }
.problem-link:hover { border-color: var(--brand); background: var(--surface-2); transform: translateX(3px); }
.problem-link .pl-src { font-family: var(--font-code); font-size: var(--fs-xs); padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); flex: none; }
.problem-link .pl-go { margin-left: auto; color: var(--ink-mute); }
.lesson-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); }
.lesson-model-grid > div { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.lesson-model-grid small { display: block; margin-bottom: 7px; color: var(--brand); font: 700 var(--fs-xs) var(--font-code); }
.lesson-model-grid p { color: var(--ink-soft); line-height: 1.75; }
.concept-explain-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); margin-top: var(--s4); }
.concept-explain-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.concept-explain-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.concept-explain-head > span { color: var(--brand); font: 750 var(--fs-xs) var(--font-code); }
.concept-explain-head h4 { margin: 0; color: var(--ink); font-size: var(--fs-md); }
.concept-explain-card dl { display: grid; gap: var(--s3); padding: var(--s4); }
.concept-explain-card dl > div { display: grid; gap: 4px; }
.concept-explain-card dt { color: var(--ink-mute); font: 700 var(--fs-xs) var(--font-code); }
.concept-explain-card dd { color: var(--ink-soft); line-height: 1.7; }
.concept-master { margin: 0 var(--s4) var(--s4); padding: 9px 11px; border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.6; }
.solution-path { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); }
.solution-step { display: grid; grid-template-columns: 36px 1fr; align-items: start; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.solution-step > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: white; font: 750 var(--fs-sm) var(--font-code); }
.solution-step small, .solution-step b { display: block; }
.solution-step small { margin-bottom: 3px; color: var(--ink-mute); font-size: var(--fs-xs); }
.solution-step b { color: var(--ink); line-height: 1.55; }
.lesson-checklist { padding: var(--s4); border-left: 4px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; background: var(--accent-soft); }
.lesson-checklist ul { display: grid; gap: 5px; margin: var(--s2) 0 0 var(--s4); color: var(--ink-soft); }
.lesson-oj-guide { display: grid; gap: 8px; margin-top: var(--s4); }
.lesson-oj-row { display: grid; grid-template-columns: 30px 48px minmax(0,1fr) auto; align-items: center; gap: var(--s3); width: 100%; padding: 11px var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: left; transition: var(--transition); }
.lesson-oj-row:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateX(3px); }
.lesson-oj-row .oj-order { color: var(--ink-mute); font: 700 var(--fs-xs) var(--font-code); }
.lesson-oj-row .oj-level { padding: 3px 7px; border-radius: var(--r-full); background: var(--surface-2); color: var(--brand); font-size: var(--fs-xs); text-align: center; }
.lesson-oj-row > span:last-child { color: var(--brand); font-size: var(--fs-xs); }
@media (max-width: 760px) {
  .lesson-model-grid, .concept-explain-grid, .solution-path { grid-template-columns: 1fr; }
  .lesson-oj-row { grid-template-columns: 26px 46px minmax(0,1fr); }
  .lesson-oj-row > span:last-child { display: none; }
}
.oj-counts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.oj-counts button { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: var(--transition); }
.oj-counts button:hover { border-color: var(--brand); transform: translateY(-2px); }
.oj-counts b, .oj-counts span { display: block; }
.oj-counts b { color: var(--brand); font: 750 var(--fs-2xl)/1 var(--font-code); }
.oj-counts span { margin-top: 7px; color: var(--ink-soft); font-size: var(--fs-sm); }
.oj-filters { display: grid; grid-template-columns: minmax(210px, 1.5fr) repeat(3, minmax(145px, .8fr)) auto; align-items: end; gap: var(--s3); margin-bottom: var(--s4); }
.oj-filters label { display: grid; gap: 5px; color: var(--ink-mute); font-size: var(--fs-xs); }
.oj-filters select { height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); }
.oj-filters > strong { padding-bottom: 10px; color: var(--brand); font-size: var(--fs-xs); white-space: nowrap; }
@media (max-width: 960px) { .oj-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .oj-counts, .oj-filters { grid-template-columns: 1fr 1fr; } }

.training-head { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--brand-soft), var(--surface)); }
.training-route { display: grid; gap: var(--s5); }
.training-track { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.training-track > header { display: flex; gap: var(--s3); margin-bottom: var(--s4); }
.training-track > header > span { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font: 750 var(--fs-sm) var(--font-code); }
.training-track header p { margin-top: 3px; color: var(--ink-soft); }
.training-track > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
.training-unit { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); padding: var(--s4); text-align: left; }
.training-unit > span { color: var(--brand); font: 700 var(--fs-sm) var(--font-code); }
.training-unit p { margin: 4px 0; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.5; }
.training-unit small { color: var(--ink-mute); }
.training-unit em { align-self: center; color: var(--brand); font-style: normal; font-size: var(--fs-xs); }
.training-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); margin-top: var(--s5); }
.training-actions p { max-width: 70ch; color: var(--ink-soft); }
.training-actions > div:last-child { display: flex; gap: var(--s2); flex-wrap: wrap; }
@media (max-width: 760px) { .training-track > div { grid-template-columns: 1fr; } .training-actions { display: grid; } }

/* ---------- 训练规划 ---------- */
.plan-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s4);
  padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--surface), var(--surface-2));
}
.plan-hero h2 { font-size: var(--fs-2xl); margin: var(--s2) 0; }
.plan-hero p { color: var(--ink-soft); }
.plan-hero-stats { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.plan-hero-stats span, .plan-meta span {
  display: inline-flex; padding: 3px 9px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
  font-size: var(--fs-xs); font-family: var(--font-code);
}
.plan-check { padding: var(--s4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); }
.plan-card { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); }
.plan-card.is-target { border-color: var(--brand); box-shadow: var(--shadow); }
.plan-card h3 { margin-top: var(--s2); font-size: var(--fs-md); }
.plan-card strong { font-family: var(--font-code); color: var(--brand); font-size: var(--fs-xl); }
.plan-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.mini-unit-list { display: grid; gap: 6px; margin-top: var(--s3); }
.mini-unit {
  text-align: left; padding: 7px 9px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-soft); font-size: var(--fs-xs);
}
.mini-unit:hover { color: var(--brand); background: var(--brand-soft); }
.train-list { margin-left: var(--s5); display: grid; gap: 6px; color: var(--ink-soft); }
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.source-chip { display: grid; gap: 4px; padding: var(--s4); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.source-chip:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.source-chip span { color: var(--accent); font-size: var(--fs-xs); font-weight: 700; }
.source-chip b { color: var(--ink); }
.source-chip em { font-style: normal; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.45; }
@media (max-width: 860px) { .plan-hero { grid-template-columns: 1fr; } }

/* 投屏模式精简装饰 */

/* ---------- 本地融合资料库 ---------- */
.legacy-toolbar { display: flex; align-items: center; gap: var(--s3); }
.legacy-toolbar .input { flex: 1; min-width: 220px; }
.legacy-phase-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.legacy-phase-strip button { padding: var(--s3); text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); }
.legacy-phase-strip b, .legacy-phase-strip span { display: block; }
.legacy-phase-strip span { color: var(--ink-mute); font-size: var(--fs-xs); margin-top: 2px; }
.legacy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.legacy-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s4); box-shadow: var(--shadow); }
.legacy-card-top { display: flex; justify-content: space-between; gap: var(--s2); color: var(--ink-mute); font-size: var(--fs-xs); }
.legacy-card-top span { color: var(--brand); font-weight: 700; }
.legacy-card-top em { font-style: normal; }
.legacy-card h3 { margin: var(--s2) 0; font-size: var(--fs-md); line-height: 1.35; }
.legacy-card p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0 0 var(--s2); }
.legacy-card ul { margin-left: var(--s4); color: var(--ink-soft); font-size: var(--fs-xs); display: grid; gap: 3px; }
.legacy-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.legacy-frame { width: 100%; height: calc(100vh - 210px); min-height: 660px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow); }
@media (max-width: 760px) {
  .legacy-toolbar { display: grid; }
  .legacy-frame { height: 72vh; min-height: 520px; }
}