:root {
  --ink: #1E3730;
  --ink-2: #40594F;
  --muted: #5D7167;
  --line: #DBE5DE;
  --bg: #F2F6F2;
  --card: #ffffff;
  --brand: #246650;
  --brand-deep: #194D3C;
  --brand-soft: #E6F0E9;
  --brand-2: #8B5C2B;
  --good: #24744E;
  --warn: #A75D13;
  --bad: #B7333E;
  --shadow-sm: 0 1px 2px rgba(23, 35, 61, 0.05), 0 2px 6px -1px rgba(23, 35, 61, 0.05);
  --shadow-md: 0 2px 4px rgba(23, 35, 61, 0.05), 0 8px 20px -4px rgba(23, 35, 61, 0.10);
  --shadow-lg: 0 4px 8px rgba(23, 35, 61, 0.06), 0 16px 36px -8px rgba(37, 99, 235, 0.16);
  --grad-brand: linear-gradient(120deg, #205B48, #317860);
  --grad-progress: linear-gradient(90deg, #246650, #7DAA85);
}

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(37, 99, 235, 0.16); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C9D3E3; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #AEBBD0; }
::-webkit-scrollbar-track { background: transparent; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==================== 顶栏 ==================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.7);
  backdrop-filter: blur(14px) saturate(1.7);
  border-bottom: 1px solid rgba(228, 233, 242, 0.9);
  box-shadow: 0 1px 12px rgba(23, 35, 61, 0.04);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--ink);
  text-decoration: none;
}
.brand::before {
  content: "学";
  width: 30px; height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 3px 8px -1px rgba(37, 99, 235, 0.45);
}
.brand:hover { opacity: 0.88; }
.brand { flex-shrink: 0; white-space: nowrap; }
[hidden] { display: none !important; }

.tabbar { display: none; }

@media (max-width: 760px) {
  .topbar {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top));
    position: sticky;
  }
  .topbar nav { display: none; gap: 4px; align-items: center; }
  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    justify-content: space-around;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(23, 35, 61, 0.06);
  }
  .tabbar a {
    flex: 1;
    min-width: 0;
    text-align: center;
    text-decoration: none;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 650;
    padding: 6px 0 4px;
    border-radius: 10px;
  }
  .tabbar a.active { color: var(--brand); background: var(--brand-soft); }
  .app { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .foot { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  body.embedded .tabbar { display: none; }
  body.embedded .app, body.embedded .foot { padding-bottom: 24px; }
  body.embedded .topbar { padding: 8px 4px; }
  body.embedded .topbar .brand, body.embedded .topbar nav > a, body.embedded #reset-progress { display: none; }
}

@media (min-width: 761px) {
  .topbar nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
}
.topbar nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 9px;
  transition: background 0.15s, color 0.15s;
}
.topbar nav a:hover { background: var(--brand-soft); color: var(--brand); }
.topbar nav a[href*="workbench"] {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 700;
}
.topbar nav a[href*="workbench"]:hover { background: #DBE7FD; }
.link-btn { border: none; background: none; color: var(--ink-2); font-size: 14px; cursor: pointer; padding: 6px 12px; border-radius: 9px; transition: background 0.15s, color 0.15s; }
.link-btn:hover { color: var(--bad); background: #FDECEA; }

/* 嵌入备考台时只保留账号操作，避免重复出现两套全站导航。 */
body.embedded .topbar { position: static; padding: 4px 8px; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
body.embedded .topbar .brand, body.embedded .topbar nav > a, body.embedded #reset-progress { display: none; }
body.embedded .topbar nav { display: flex; justify-content: flex-end; width: 100%; min-width: 0; }
body.embedded #auth-bar { display: flex !important; flex-wrap: wrap; justify-content: flex-end; min-width: 0; margin-right: 0 !important; }

.app { max-width: 900px; margin: 0 auto; padding: 26px 18px 60px; animation: pageIn 0.28s ease both; }
.foot { max-width: 860px; margin: 0 auto; padding: 0 18px 32px; font-size: 12px; }
.foot a { color: var(--brand-deep); text-underline-offset: 3px; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.muted { color: var(--muted); }
.center { text-align: center; }
.page-title { font-size: 23px; font-weight: 800; margin: 6px 0 2px; letter-spacing: 0.3px; }
.page-sub { color: var(--ink-2); font-size: 14px; margin-bottom: 18px; }
.section-title { font-size: 15px; font-weight: 700; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.section-title::before {
  content: "";
  width: 4px; height: 15px;
  border-radius: 3px;
  background: var(--grad-brand);
  flex-shrink: 0;
}

/* ==================== 卡片 ==================== */
.card {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1px solid rgba(228, 233, 242, 0.8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-md); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.chip {
  padding: 6px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(23, 35, 61, 0.04);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 10px -2px rgba(37, 99, 235, 0.4);
}

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }

/* ==================== 学科 / 专项卡片 ==================== */
.subject-card {
  display: block;
  background: var(--card);
  border: 1px solid rgba(228, 233, 242, 0.9);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.subject-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37, 99, 235, 0.35);
}
.subject-icon {
  width: 42px; height: 42px;
  border-radius: 13px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 8px -2px rgba(23, 35, 61, 0.25);
}
.subject-name { font-weight: 700; font-size: 16px; }
.subject-meta { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.55; }

/* ==================== 章节列表 ==================== */
.chapter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid rgba(228, 233, 242, 0.9);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.chapter-row:hover { transform: translateX(3px); box-shadow: var(--shadow-md); border-color: rgba(37, 99, 235, 0.28); }
.chapter-main { flex: 1; min-width: 0; }
.chapter-name { font-weight: 600; font-size: 15px; }
.chapter-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

.steps { display: flex; gap: 6px; flex-shrink: 0; }
.step {
  width: 26px; height: 26px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  background: #EEF2F7;
  color: var(--muted);
}
.step.done { background: var(--good); color: #fff; }
.step.now { background: var(--warn); color: #fff; }

/* 学练固结四步均可直接点开（完成可复习，未完成进入该步） */
.step-link {
  width: 28px; height: 28px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  background: #EEF2F7;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.step-link:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 3px 8px -2px rgba(23, 35, 61, 0.25); }
.step-link.done { background: var(--good); color: #fff; }
.step-link.done:hover { background: #15803D; }
.step-link.now { background: var(--warn); color: #fff; }

/* ==================== 按钮 ==================== */
.btn {
  display: inline-block;
  border: none;
  border-radius: 11px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: var(--grad-brand);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px -1px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px -3px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }
.btn.ghost {
  background: #fff;
  color: var(--brand-deep);
  border: 1.5px solid rgba(37, 99, 235, 0.4);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--brand-soft); border-color: var(--brand); box-shadow: none; }
.btn.small { padding: 6px 14px; font-size: 13px; border-radius: 9px; }
.btn.good { background: linear-gradient(135deg, #0D9488, #14B8A6); box-shadow: 0 2px 6px -1px rgba(13, 148, 136, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }

/* ==================== 讲义 ==================== */
.lesson-intro { color: var(--ink-2); border-left: 4px solid var(--brand); padding: 4px 14px; margin: 14px 0; }
.lesson-section { margin: 20px 0; }
.lesson-section h3 { margin: 0 0 8px; font-size: 16px; color: var(--brand-deep); }
.lesson-points { margin: 0; padding-left: 20px; }
.lesson-points li { margin: 6px 0; font-size: 14px; }
.lesson-points li::marker { color: var(--brand); }
.lesson-example {
  background: var(--brand-soft);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 10px;
  font-size: 14px;
}
.lesson-example .q { font-weight: 700; }
.key-points { display: flex; flex-wrap: wrap; gap: 8px; }
.key-point {
  background: #FFF6E5;
  color: #B45309;
  border: 1px solid rgba(217, 119, 6, 0.15);
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}

/* ==================== 做题 ==================== */
.quiz-meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.quiz-filter { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.quiz-filter summary { cursor: pointer; width: fit-content; }
.quiz-filter .diff-chip:disabled { opacity: .45; cursor: not-allowed; }
.progress-bar { height: 8px; background: #E8EDF5; border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.progress-fill { height: 100%; background: var(--grad-progress); border-radius: 99px; transition: width 0.25s ease; }

.stem { font-size: 18px; font-weight: 650; line-height: 1.75; margin-bottom: 18px; white-space: pre-wrap; }
.option {
  display: flex;
  gap: 10px;
  align-items: baseline;
  background: #F7FAF7;
  border: 1px solid #E2EAE4;
  border-radius: 12px;
  padding: 13px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.option:hover { border-color: #8DB7A2; background: #EFF7F1; transform: translateX(2px); }
.option.right { background: #EAF9F0; border-color: rgba(22, 163, 74, 0.5); }
.option.wrong { background: #FDEEEC; border-color: rgba(220, 38, 38, 0.5); }
.option .label {
  font-weight: 800;
  color: var(--brand-deep);
  flex-shrink: 0;
  width: 18px;
}

.fill-input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  margin-bottom: 10px;
  background: #FBFCFE;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fill-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); background: #fff; }

.judge { border-radius: 12px; padding: 12px 16px; margin: 12px 0; font-size: 14px; border: 1px solid transparent; }
.judge.right { background: #EAF9F0; border-color: rgba(22, 163, 74, 0.25); }
.judge.wrong { background: #FDEEEC; border-color: rgba(220, 38, 38, 0.25); }
.judge .title { font-weight: 800; }
.judge.right .title { color: var(--good); }
.judge.wrong .title { color: var(--bad); }

.score-card { text-align: center; padding: 30px 20px; }
.score-big { font-size: 46px; font-weight: 800; color: var(--brand); letter-spacing: 1px; }
.score-line { color: var(--ink-2); margin: 6px 0; }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
@media (max-width: 640px) { .summary-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-box { background: #F6F8FC; border: 1px solid rgba(228, 233, 242, 0.7); border-radius: 12px; padding: 12px; text-align: center; }
.stat-num { font-size: 20px; font-weight: 800; color: var(--brand-deep); }
.stat-label { font-size: 12px; color: var(--muted); }

.route-map { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.route-node {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  background: #EEF2F7;
  color: var(--muted);
  border: 1px solid transparent;
}
.route-node.done { background: #EAF9F0; color: var(--good); border-color: rgba(22, 163, 74, 0.3); font-weight: 600; }
.route-node.now { background: #FFF6E5; color: var(--warn); border-color: rgba(217, 119, 6, 0.3); font-weight: 600; }
.route-arrow { color: var(--muted); }

.notice {
  background: var(--brand-soft);
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-2);
  margin: 10px 0;
}
.warn-note { background: #FFF9EE; border-color: rgba(217, 119, 6, 0.2); }

/* ---- 教学深化：易错辨析 / 变式 / 考情 / 错因 / 诊断 ---- */
/* ---- 有声讲义：播放器与跟读高亮 ---- */
.reader-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--brand-soft);
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 13px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.reader-status { font-size: 13px; margin-left: auto; }
.reading {
  background: #FFF3D6 !important;
  box-shadow: 0 0 0 2px #E8B84B;
  border-radius: 6px;
  transition: background 0.2s;
}
.mistake-box {
  background: #FDF3F1;
  border: 1px solid rgba(220, 38, 38, 0.15);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 13px;
}
.mistake-box .mb-title { color: var(--bad); font-weight: 700; margin-bottom: 6px; }
.mistake-box li { margin: 4px 0; }

.variant-box {
  background: #F0FAF7;
  border: 1px solid rgba(13, 148, 136, 0.16);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 8px;
  font-size: 13px;
}
.variant-box .vb-title { color: var(--brand-2); font-weight: 700; margin-bottom: 6px; }
.variant-toggle {
  border: none;
  background: none;
  color: var(--brand-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.variant-toggle:hover { text-decoration: underline; }

.exam-focus {
  background: var(--brand-soft);
  border-left: 4px solid var(--brand);
  border-radius: 0 12px 12px 0;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13px;
}
.exam-focus .ef-title { font-weight: 700; color: var(--brand-deep); margin-bottom: 4px; }

.reason-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.reason-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s;
}
.reason-btn:hover { border-color: var(--bad); color: var(--bad); }
.reason-btn.chosen { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
.reason-label { font-size: 12px; color: var(--muted); margin-top: 10px; }

.diff-filter { display: flex; gap: 8px; margin: 8px 0 14px; flex-wrap: wrap; }
.diff-chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-2);
  transition: all 0.15s;
}
.diff-chip:hover { border-color: var(--brand); color: var(--brand); }
.diff-chip.active { background: var(--grad-brand); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 3px 10px -2px rgba(37, 99, 235, 0.4); }
.diff-tag { font-size: 11px; border-radius: 6px; padding: 1px 8px; margin-left: 8px; font-weight: 600; }
.diff-1 { background: #EAF9F0; color: var(--good); }
.diff-2 { background: #FFF6E5; color: #B45309; }
.diff-3 { background: #FDEEEC; color: var(--bad); }

.diagnosis {
  background: #F7F9FC;
  border: 1px solid rgba(228, 233, 242, 0.9);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 14px 0;
  box-shadow: var(--shadow-sm);
}
.diagnosis .dg-title { font-weight: 800; color: var(--brand-deep); margin-bottom: 8px; }
.diagnosis p { font-size: 14px; margin: 6px 0; }
.reason-dist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.reason-count { background: #FDF3F1; color: var(--bad); border-radius: 8px; padding: 4px 12px; font-size: 12px; font-weight: 600; }

/* ---- 讲义可视化图（参数化 canvas，与小程序共享渲染） ---- */
.lesson-figure {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(228, 233, 242, 0.9);
  border-radius: 13px;
  background: #FDFEFF;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.lesson-figure figcaption {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #2c3e50);
  text-align: left;
  margin-bottom: 6px;
}
.lesson-figure .fig-canvas {
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}
.lesson-figure .fig-caption {
  font-size: 12px;
  line-height: 1.6;
  color: #5a6474;
  text-align: left;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #e3e8ef;
}

/* ---- 可视化交互滑块（Web 专属增强） ---- */
.fig-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px auto 0;
  max-width: 440px;
  padding: 0 8px;
}
.fig-slider {
  flex: 1;
  accent-color: var(--brand, #2563EB);
}
.fig-slider-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #2c3e50);
  white-space: nowrap;
  min-width: 180px;
}

/* ==================== 首页 Hero ==================== */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 26px 30px 22px;
  margin: 4px 0 18px;
  background: #E7F0E9;
  border: 1px solid #D3E4D7;
  border-left: 5px solid var(--brand);
  color: var(--ink);
  box-shadow: none;
}
.hero-glow {
  display: none;
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.hero-glow.g1 { width: 220px; height: 220px; right: -60px; top: -80px; background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%); }
.hero-glow.g2 { width: 140px; height: 140px; right: 120px; bottom: -70px; background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%); }
.hero-glow.g3 { width: 90px; height: 90px; left: 40%; top: -30px; background: radial-gradient(circle, rgba(167, 243, 208, 0.25), transparent 70%); }
.hero-body { position: relative; z-index: 1; }
.hero-title { font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif; font-size: 27px; font-weight: 700; letter-spacing: 0.04em; }
.hero-sub { color: var(--ink-2); font-size: 13px; margin: 6px 0 18px; }
.hero-stats { display: flex; gap: 0; border-top: 1px solid #C6DACC; padding-top: 15px; }
.hero-stat {
  flex: 1;
  min-width: 0;
  border-right: 1px solid #C6DACC;
  padding: 0 12px;
  text-align: left;
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child { border-right: 0; }
.hero-stat b { display: block; color: var(--brand-deep); font-size: 22px; font-weight: 750; line-height: 1.2; }
.hero-stat span { color: var(--ink-2); font-size: 12px; }

/* ==================== 学科/专项卡片：每科专属彩条 ==================== */
.subject-card { position: relative; overflow: hidden; }
.subject-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--sc, var(--brand)), color-mix(in srgb, var(--sc, var(--brand)) 45%, transparent));
  opacity: 0.9;
}
.subject-card::after {
  content: "";
  position: absolute;
  right: -34px; top: -34px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sc, var(--brand)) 16%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.subject-card:hover::after { opacity: 1; }
.subject-card .subject-icon { transition: transform 0.2s; }
.subject-card:hover .subject-icon { transform: scale(1.1) rotate(-4deg); }

/* 像教材目录一样先辨认学科，再看章节进度。 */
.subject-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-content: center; column-gap: 12px; min-height: 94px; }
.subject-card::before { top: 0; bottom: 0; left: 0; right: auto; width: 3px; height: auto; background: var(--sc, var(--brand)); opacity: .7; }
.subject-card::after { display: none; }
.subject-card .subject-icon { grid-row: span 2; align-self: center; margin: 0; box-shadow: none; background: color-mix(in srgb, var(--sc, var(--brand)) 13%, var(--card)) !important; color: color-mix(in srgb, var(--sc, var(--brand)) 70%, var(--ink)); border-radius: 11px; }
.subject-card .subject-name, .subject-card .subject-meta { grid-column: 2; }
.subject-card:hover .subject-icon { transform: none; }
.subject-card:hover { transform: translateY(-2px); border-color: #A5C4AF; box-shadow: var(--shadow-md); }

@media (max-width: 640px) {
  .app { padding: 18px 14px 38px; }
  .foot { padding: 0 14px calc(82px + env(safe-area-inset-bottom)); }
  .hero { padding: 22px 18px 18px; }
  .hero-title { font-size: 23px; }
  .hero-sub { line-height: 1.7; }
  .hero-stat { padding: 0 7px; }
  .hero-stat b { font-size: 19px; }
  .hero-stat span { font-size: 11px; }
  .grid { gap: 10px; }
  .subject-card { grid-template-columns: 34px minmax(0, 1fr); column-gap: 9px; min-height: 78px; padding: 12px; }
  .subject-card .subject-icon { width: 34px; height: 34px; font-size: 15px; }
  .subject-name { font-size: 15px; }
  .subject-meta { font-size: 12px; }
  .tabbar a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .chapter-list-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: 'number detail detail' 'steps steps action'; gap: 10px 12px; padding: 14px; }
  .chapter-list-row .chapter-num { grid-area: number; width: 38px; height: 38px; }
  .chapter-list-row .chapter-main { grid-area: detail; }
  .chapter-list-row .steps { grid-area: steps; }
  .chapter-list-row > .btn { grid-area: action; }
  .chapter-list-row .step-link { width: 36px; height: 36px; flex: 0 0 36px; }
  .chapter-list-row > .btn { min-height: 36px; display: inline-flex; align-items: center; }
}

@media (prefers-color-scheme: light) {
  .topbar { background: rgba(250, 252, 249, .94); border-color: var(--line); box-shadow: none; }
  .topbar nav a[href*="workbench"]:hover, .btn.ghost:hover { background: var(--brand-soft); }
  .brand::before { box-shadow: none; }
  .card, .subject-card, .chapter-row { border-color: var(--line); box-shadow: 0 2px 8px rgba(30, 58, 42, .04); }
  .card:hover { box-shadow: 0 2px 8px rgba(30, 58, 42, .04); }
  .btn { box-shadow: 0 2px 6px rgba(36, 102, 80, .16); }
  .btn:hover { box-shadow: 0 4px 12px rgba(36, 102, 80, .22); }
  .btn.ghost { color: var(--brand-deep); border-color: #A9C5B2; box-shadow: none; }
  .btn.good { background: var(--grad-brand); box-shadow: 0 2px 6px rgba(36, 102, 80, .16); }
  .chip.active, .diff-chip.active { box-shadow: none; }
  .chapter-num { color: var(--brand-deep); background: var(--brand-soft); border-color: #C9DED0; }
  .chapter-row:hover { border-color: #ABC8B4; }
  .chapter-row:hover .chapter-num { box-shadow: none; }
  .progress-bar { background: #DFEAE1; }
  .option .label { color: var(--brand-deep); }
}

/* ==================== 章节序号徽章 ==================== */
.chapter-num {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  border: 1px solid #C9DED0;
  font-variant-numeric: tabular-nums;
}
.chapter-row:hover .chapter-num {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px -2px rgba(37, 99, 235, 0.45);
}

/* ==================== 数字渐变字 ==================== */
.score-big {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==================== 深色模式（L1）====================
 * 变量整体覆盖 + 对浅色硬编码处补深色规则；
 * 正文 --ink #E5EAF2 / --bg #0F1520 对比约 13:1，--muted #8794A8 对深底约 5:1，
 * 无纯白刺眼块（原 #fff/#F6F8FA 等实底全部替换为深色底）。 */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E2EEE8; --ink-2: #B9D0C3; --muted: #9AADA3; --line: #344740;
    --bg: #101D19; --card: #192A24; --brand: #8ACDA9; --brand-deep: #B0E1C2; --brand-soft: #263F34;
    --brand-2: #2DD4BF; --good: #34D399; --warn: #FBBF24; --bad: #F87171;
    --grad-brand: linear-gradient(120deg, #286750, #347B62);
    --grad-progress: linear-gradient(90deg, #4D9B77, #8BC9A0);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px -1px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px -4px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.40), 0 16px 36px -8px rgba(0, 0, 0, 0.55);
  }

  body { background: var(--bg); }

  ::selection { background: rgba(91, 141, 239, 0.32); }
  ::-webkit-scrollbar-thumb { background: #33415A; border-color: var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: #435471; }

  /* 顶栏毛玻璃深色化 */
  .topbar { background: rgba(16, 29, 25, 0.96); border-bottom-color: var(--line); box-shadow: none; }
  .tabbar { background: rgba(16, 29, 25, 0.96); border-top-color: var(--line); }
  .topbar nav a[href*="workbench"]:hover { background: #304A3E; }
  .link-btn:hover { background: rgba(248, 113, 113, 0.14); }

  /* 卡片/列表/图容器的浅色硬编码边框统一换深色 */
  .card, .subject-card, .chapter-row, .diagnosis, .lesson-figure { border-color: var(--line); }
  .stat-box { background: #20332B; border-color: var(--line); }
  .progress-bar { background: #2B4035; }

  /* 白底 / 浅灰底控件 → 深色底 */
  .chip, .reason-btn, .diff-chip { background: #20332B; color: var(--ink-2); }
  .step, .step-link, .route-node { background: #2B4035; }
  .option { background: #20332B; border-color: #3B5347; }
  .option:hover { background: #294337; }
  .fill-input { background: #15241D; color: var(--ink); }
  .fill-input:focus { background: #20332B; }
  .btn.ghost { background: #20332B; color: var(--brand-deep); border-color: #527563; }
  .btn.ghost:hover { background: #294337; }
  .chapter-num { background: #263F34; border-color: #527563; }

  /* 亮色状态徽章配深字（亮底白字对比不足） */
  .step.done, .step.now, .step-link.done, .step-link.now, .reason-btn.chosen { color: #0F1520; }
  .step-link.done:hover { background: #2FA876; }

  /* 状态底色：浅色实底 → 半透明色底 + 亮字 */
  .option.right, .judge.right { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.45); }
  .option.wrong, .judge.wrong { background: rgba(248, 113, 113, 0.13); border-color: rgba(248, 113, 113, 0.45); }
  .route-node.done { background: rgba(52, 211, 153, 0.14); color: var(--good); border-color: rgba(52, 211, 153, 0.4); }
  .route-node.now { background: rgba(251, 191, 36, 0.14); color: var(--warn); border-color: rgba(251, 191, 36, 0.4); }
  .key-point { background: rgba(251, 191, 36, 0.13); color: #FCD34D; border-color: rgba(251, 191, 36, 0.3); }
  .warn-note { background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.25); }
  .reading { background: rgba(251, 191, 36, 0.20) !important; box-shadow: 0 0 0 2px #B98A1E; color: var(--ink); }
  .diff-1 { background: rgba(52, 211, 153, 0.15); color: var(--good); }
  .diff-2 { background: rgba(251, 191, 36, 0.15); color: #FCD34D; }
  .diff-3 { background: rgba(248, 113, 113, 0.15); color: var(--bad); }
  .mistake-box { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.28); }
  .reason-count { background: rgba(248, 113, 113, 0.14); color: var(--bad); }
  .variant-box { background: rgba(45, 212, 191, 0.10); border-color: rgba(45, 212, 191, 0.3); }

  /* 讲义图容器与说明文字 */
  .lesson-figure { background: #141C29; }
  .lesson-figure figcaption { color: var(--ink); }
  .lesson-figure .fig-caption { color: var(--ink-2); border-top-color: #2A3446; }

  .hero { background: #1D302B; border-color: #38564B; border-left-color: #66AE89; box-shadow: none; }
  .hero-stats, .hero-stat { border-color: #38564B; }
}

/* ==================== 讲义打印（M5）==================== */
@page { margin: 14mm; }

@media print {
  /* 隐藏顶栏、页脚、按钮、筛选、朗读条与浮动播报条等交互元素 */
  .topbar, .foot, .btn, .btn-row, .chip-row, .diff-filter, .reader-bar,
  .steps, .route-map, .fb-root, .variant-toggle { display: none !important; }

  body { background: #fff !important; color: #000; }
  .app { max-width: none; padding: 0; animation: none; }

  /* 讲义卡片：去阴影、全宽、黑白友好，避免跨页截断 */
  .card, .subject-card, .chapter-row, .diagnosis, .lesson-example, .key-point,
  .mistake-box, .variant-box, .exam-focus, .notice, .lesson-figure {
    box-shadow: none !important;
    border: 1px solid #999;
    background: #fff !important;
    color: #000;
    break-inside: avoid;
  }
  .lesson-section h3, .exam-focus .ef-title, .diagnosis .dg-title { color: #000; }
  .lesson-figure figcaption, .lesson-figure .fig-caption { color: #000; border-top-color: #999; }
  a { text-decoration: none; color: #000; }
}

/* ===== 账号体系（auth.js）：顶栏登录状态 ===== */
.auth-user{font-size:13px;color:var(--muted);white-space:nowrap}
@media (max-width:720px){.auth-user{max-width:120px;overflow:hidden;text-overflow:ellipsis}}