/* ============================================================
   初中物理 · 全站设计系统
   Design tokens + 基础组件 + 响应式布局
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* 中性色阶 —— 冷灰偏蓝，长时间阅读不刺眼 */
  --n-0:   #ffffff;
  --n-25:  #fbfcfd;
  --n-50:  #f5f7fa;
  --n-100: #eef1f6;
  --n-200: #e2e7ef;
  --n-300: #cdd5e0;
  --n-400: #a3aebf;
  --n-500: #77839a;
  --n-600: #5a6579;
  --n-700: #414a5c;
  --n-800: #262d3b;
  --n-900: #141922;

  /* 主品牌色 —— 沉稳墨蓝，用于主要动作与导航 */
  --brand:        #1d4ed8;
  --brand-hover:  #1e40af;
  --brand-soft:   #e8eefc;
  --brand-ink:    #1e3a8a;

  /* 语义色 */
  --ok:        #047857;
  --ok-soft:   #dcfce7;
  --ok-line:   #86efac;
  --err:       #b91c1c;
  --err-soft:  #fee2e2;
  --err-line:  #fca5a5;
  --warn:      #b45309;
  --warn-soft: #fef3c7;
  --warn-line: #fcd34d;
  --info:      #0e7490;
  --info-soft: #cffafe;

  /* 五大学科分支色 —— 知识地图的色彩编码，功能性而非装饰性 */
  --b-mech:      #2563eb;  /* 力学 */
  --b-mech-soft: #e6eefc;
  --b-therm:     #dd6b20;  /* 热学 */
  --b-therm-soft:#fdeee1;
  --b-elec:      #0d9488;  /* 电学 */
  --b-elec-soft: #dff3f1;
  --b-opt:       #7c3aed;  /* 光学·声学 */
  --b-opt-soft:  #f0e9fd;
  --b-em:        #be185d;  /* 电与磁·信息·能源 */
  --b-em-soft:   #fce7f0;

  /* 页面基调 */
  --bg:        var(--n-50);
  --surface:   var(--n-0);
  --surface-2: var(--n-25);
  --ink:       var(--n-900);
  --ink-2:     var(--n-600);
  --ink-3:     var(--n-500);
  --line:      var(--n-200);
  --line-soft: var(--n-100);

  /* 圆角 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* 阴影 —— 克制，只用于分层，不做浮夸投影 */
  --sh-1: 0 1px 2px rgba(20, 25, 34, .05);
  --sh-2: 0 2px 8px rgba(20, 25, 34, .07);
  --sh-3: 0 8px 28px rgba(20, 25, 34, .11);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .7);

  /* 间距刻度 (4px 基准) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* 字号 —— 通过 html font-size 整体缩放（A-/A+ 无障碍） */
  --fs-xs:  .75rem;   /* 12px */
  --fs-sm:  .8125rem; /* 13px */
  --fs-base:.9375rem; /* 15px */
  --fs-md:  1.0625rem;/* 17px */
  --fs-lg:  1.25rem;  /* 20px */
  --fs-xl:  1.5rem;   /* 24px */
  --fs-2xl: 1.875rem; /* 30px */

  /* 动效 */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 340ms;

  /* 布局 */
  --maxw: 1180px;
  --nav-h: 56px;
}

/* 夜间模式 —— 孩子晚上写作业护眼 */
[data-theme="dark"] {
  --bg:        #0f1319;
  --surface:   #171c25;
  --surface-2: #1c222c;
  --ink:       #e8ecf3;
  --ink-2:     #a4adbd;
  --ink-3:     #7d8798;
  --line:      #2a313d;
  --line-soft: #222834;

  --n-0: #171c25;
  --n-25:#1c222c;
  --n-50:#0f1319;
  --n-100:#222834;
  --n-200:#2a313d;

  --brand:      #6f9dff;
  --brand-hover:#8fb2ff;
  --brand-soft: #1c2740;
  --brand-ink:  #b9cdff;

  --ok:      #4ade80;  --ok-soft:  #14291d;  --ok-line:  #1f5136;
  --err:     #f87171;  --err-soft: #2d1a1a;  --err-line: #5c2626;
  --warn:    #fbbf24;  --warn-soft:#2b2314;  --warn-line:#5a4520;
  --info:    #22d3ee;  --info-soft:#122830;

  --b-mech:  #6f9dff;  --b-mech-soft:#1a2338;
  --b-therm: #fb923c;  --b-therm-soft:#2e2116;
  --b-elec:  #2dd4bf;  --b-elec-soft:#132b29;
  --b-opt:   #a78bfa;  --b-opt-soft:#221b36;
  --b-em:    #f472b6;  --b-em-soft:#2e1826;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 8px rgba(0,0,0,.45);
  --sh-3: 0 8px 28px rgba(0,0,0,.55);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.72;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0 0 var(--s-3); line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p  { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-3); padding-left: 1.4em; }
li { margin-bottom: var(--s-1); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

::selection { background: var(--brand-soft); color: var(--brand-ink); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 尊重系统的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. 布局容器 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-4); }
.wrap-narrow { max-width: 820px; }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- 4. 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in { height: var(--nav-h); display: flex; align-items: center; gap: var(--s-3); }
.nav-logo {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 800; font-size: var(--fs-md); color: var(--ink);
  letter-spacing: -.02em; white-space: nowrap;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo .mark {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--b-elec), var(--brand));
  color: #fff; font-size: 15px; font-weight: 900;
}
.nav-links { display: flex; gap: var(--s-1); align-items: center; }
.nav-links a {
  padding: 6px 12px; border-radius: var(--r-pill);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.nav-links a:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); }
.nav-tools { display: flex; gap: var(--s-1); align-items: center; }

/* ---------- 5. 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--sh-1);
}
.card-flat { box-shadow: none; }
.card-pad-lg { padding: var(--s-6); }
.card-hover {
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
  border-color: var(--n-300);
}
.card-hd { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.card-hd h2, .card-hd h3 { margin: 0; }

/* ---------- 6. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 9px 18px; min-height: 40px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--brand); color: #fff;
  font-size: var(--fs-base); font-weight: 650; letter-spacing: .01em;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--brand-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-ghost {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.btn-ghost:hover { background: var(--line-soft); border-color: var(--n-300); }
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); }
.btn-soft:hover { background: color-mix(in srgb, var(--brand-soft) 70%, var(--brand) 30%); }
.btn-ok  { background: var(--ok); }   .btn-ok:hover  { background: color-mix(in srgb, var(--ok) 85%, #000); }
.btn-err { background: var(--err); }  .btn-err:hover { background: color-mix(in srgb, var(--err) 85%, #000); }
.btn-sm  { padding: 5px 12px; min-height: 32px; font-size: var(--fs-sm); border-radius: var(--r-xs); }
.btn-lg  { padding: 13px 26px; min-height: 48px; font-size: var(--fs-md); }
.btn-icon { padding: 0; width: 40px; min-width: 40px; }
.btn-icon.btn-sm { width: 32px; min-width: 32px; }
.btn-block { width: 100%; }

.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.btn-group .btn:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ---------- 7. 徽章 / 标签 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--line-soft); color: var(--ink-2);
  border: 1px solid transparent; white-space: nowrap;
}
.tag-mech  { background: var(--b-mech-soft);  color: var(--b-mech); }
.tag-therm { background: var(--b-therm-soft); color: var(--b-therm); }
.tag-elec  { background: var(--b-elec-soft);  color: var(--b-elec); }
.tag-opt   { background: var(--b-opt-soft);   color: var(--b-opt); }
.tag-em    { background: var(--b-em-soft);    color: var(--b-em); }
.tag-ok    { background: var(--ok-soft);   color: var(--ok); }
.tag-err   { background: var(--err-soft);  color: var(--err); }
.tag-warn  { background: var(--warn-soft); color: var(--warn); }
.tag-brand { background: var(--brand-soft); color: var(--brand-ink); }
.tag-outline { background: transparent; border-color: var(--line); color: var(--ink-3); }

/* 分支色条 —— 章节卡左侧的学科识别条 */
.branch-bar { width: 4px; border-radius: 2px; align-self: stretch; flex-shrink: 0; }
.branch-mech  { background: var(--b-mech); }
.branch-therm { background: var(--b-therm); }
.branch-elec  { background: var(--b-elec); }
.branch-opt   { background: var(--b-opt); }
.branch-em    { background: var(--b-em); }

/* ---------- 8. 提示框 ---------- */
.callout {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-sm);
  border: 1px solid var(--line); border-left-width: 4px;
  background: var(--surface-2); margin-bottom: var(--s-4);
}
.callout-ico { flex-shrink: 0; font-size: 17px; line-height: 1.5; }
.callout-body { flex: 1; min-width: 0; }
.callout-title { font-weight: 750; margin-bottom: 2px; font-size: var(--fs-base); }
.callout-info { border-left-color: var(--info); background: var(--info-soft); }
.callout-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout-err  { border-left-color: var(--err);  background: var(--err-soft); }
.callout-ok   { border-left-color: var(--ok);   background: var(--ok-soft); }
.callout-key  { border-left-color: var(--brand); background: var(--brand-soft); }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

/* ---------- 9. 公式块 ---------- */
.formula {
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", Georgia,
               "Times New Roman", serif;
  font-size: 1.18em; letter-spacing: .01em;
}
.formula-box {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center;
  padding: var(--s-4) var(--s-5); margin: var(--s-3) 0;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.formula-box .formula { font-size: 1.35em; font-weight: 600; color: var(--ink); }
.formula-note { font-size: var(--fs-sm); color: var(--ink-2); }
sub, sup { font-size: .72em; line-height: 0; }

/* ---------- 10. 表格 ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--s-3) 0; border-radius: var(--r-sm); border: 1px solid var(--line); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); }
table.tbl th, table.tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.tbl th { background: var(--surface-2); font-weight: 700; color: var(--ink-2); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: none; white-space: nowrap; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl caption { caption-side: top; text-align: left; padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }

/* ---------- 11. 表单控件 ---------- */
.field { margin-bottom: var(--s-4); }
.label { display: block; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%; padding: 9px 12px; min-height: 40px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--n-300); border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.textarea { min-height: 88px; resize: vertical; line-height: 1.6; }
.input[aria-invalid="true"] { border-color: var(--err); }

/* 滑块 */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--n-200);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand);
  box-shadow: var(--sh-2); transition: transform var(--t-fast) var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--n-200); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand); box-shadow: var(--sh-2);
}
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--brand-soft); }

/* ---------- 12. 进度 ---------- */
.bar { height: 8px; border-radius: var(--r-pill); background: var(--n-200); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--brand); transition: width var(--t-slow) var(--ease-out); }
.bar-fill.ok { background: var(--ok); }
.bar-fill.warn { background: var(--warn); }
.bar-fill.err { background: var(--err); }
.bar-sm { height: 5px; }

.ring { display: block; }
.ring-track { stroke: var(--n-200); }
.ring-fill { stroke: var(--brand); transition: stroke-dashoffset var(--t-slow) var(--ease-out); }

/* ---------- 13. 章节卡片 ---------- */
.ch-card {
  display: flex; gap: var(--s-3); align-items: stretch;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease);
  cursor: pointer; text-align: left; width: 100%; padding: 0;
}
.ch-card:hover { transform: translateY(-2px); box-shadow: var(--sh-3); border-color: var(--n-300); }
.ch-card:active { transform: translateY(0); }
.ch-body { flex: 1; min-width: 0; padding: var(--s-4); }
.ch-no {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.ch-title { font-size: var(--fs-md); font-weight: 750; margin: 2px 0 6px; color: var(--ink); line-height: 1.35; }
.ch-sub { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.55; }
.ch-foot { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.ch-prog { flex: 1; }

/* ---------- 14. 题目 ---------- */
.q {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-5); margin-bottom: var(--s-4);
}
.q-hd { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); flex-wrap: wrap; }
.q-no { font-weight: 800; color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.q-stem { margin-bottom: var(--s-4); }
.q-fig { margin: var(--s-3) 0; display: flex; justify-content: center; }
.q-fig svg { max-width: 100%; height: auto; }
.q-opts { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.opt {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; text-align: left; width: 100%;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.opt:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); }
.opt:active:not(:disabled) { transform: scale(.995); }
.opt:disabled { cursor: default; }
.opt-key {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--line-soft); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: 800;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.opt-txt { flex: 1; min-width: 0; line-height: 1.6; }
.opt.correct { border-color: var(--ok); background: var(--ok-soft); }
.opt.correct .opt-key { background: var(--ok); color: #fff; }
.opt.wrong { border-color: var(--err); background: var(--err-soft); }
.opt.wrong .opt-key { background: var(--err); color: #fff; }
.opt.dim { opacity: .55; }
.opt.chosen { border-color: var(--brand); background: var(--brand-soft); }
.opt.chosen .opt-key { background: var(--brand); color: #fff; }

/* 计时器告警（剩余不足 2 分钟） */
.err-tick { color: var(--err) !important; animation: pulse 1s ease-in-out infinite; }

.explain {
  margin-top: var(--s-3); padding: var(--s-4);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); border-left: 4px solid var(--brand);
  animation: slideIn var(--t-base) var(--ease-out);
}
.explain-hd { font-weight: 750; font-size: var(--fs-sm); color: var(--brand-ink); margin-bottom: var(--s-2); letter-spacing: .02em; }
.explain.ok { border-left-color: var(--ok); }  .explain.ok .explain-hd { color: var(--ok); }
.explain.err { border-left-color: var(--err); } .explain.err .explain-hd { color: var(--err); }

@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.anim-pop { animation: pop var(--t-slow) var(--ease-out) both; }
.anim-shake { animation: shake 380ms var(--ease); }
.anim-pulse { animation: pulse 1.4s ease-in-out infinite; }

/* ---------- 15. 空态 / 加载 / 错误 ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); padding: var(--s-12) var(--s-6); text-align: center;
  color: var(--ink-3);
}
.empty-ico { font-size: 40px; opacity: .5; line-height: 1; }
.empty-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink-2); }
.empty-desc { font-size: var(--fs-sm); max-width: 380px; line-height: 1.65; }

.skeleton {
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--n-200) 50%, var(--line-soft) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-xs);
}
@keyframes shimmer { to { background-position: -200% 0; } }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--n-300); border-top-color: var(--brand);
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 16. 页脚 ---------- */
.foot {
  margin-top: var(--s-16); padding: var(--s-8) 0 var(--s-10);
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-sm);
}

/* ---------- 17. 工具类 ---------- */
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.strong { font-weight: 700; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
.tabnum { font-variant-numeric: tabular-nums; }
.hide { display: none !important; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); }
.fs-md { font-size: var(--fs-md); } .fs-lg { font-size: var(--fs-lg); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 18px; background: var(--brand); color: #fff; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 18. 响应式 ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: var(--s-3); gap: var(--s-1); box-shadow: var(--sh-3);
  }
  .nav-links.open a { padding: 11px 14px; border-radius: var(--r-sm); }
  .nav-burger { display: inline-flex !important; }
}
@media (max-width: 640px) {
  :root { --s-16: 40px; --s-12: 32px; }
  html { font-size: 15.5px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .card, .q { padding: var(--s-4); }
  .wrap { padding: 0 var(--s-3); }
  h1 { font-size: var(--fs-xl); }
  h2 { font-size: var(--fs-lg); }
  .row-between { gap: var(--s-2); }
  .btn { padding: 9px 14px; }
  .btn-lg { padding: 12px 18px; }
}
.nav-burger { display: none; }

/* ---------- 20. 首页 Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-10);
  align-items: center;
  padding: var(--s-8) 0 var(--s-6);
}
.hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.03em; margin-bottom: var(--s-4); line-height: 1.18; }
.hero-accent {
  display: inline-block; margin-left: var(--s-3);
  color: var(--brand);
  position: relative;
}
.hero-accent::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .16em;
  background: var(--brand-soft); border-radius: 2px; z-index: -1;
}
.hero-sub { font-size: var(--fs-md); color: var(--ink-2); max-width: 62ch; line-height: 1.78; margin-bottom: var(--s-6); }
.hero-sub strong { color: var(--ink); font-weight: 700; }
.hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.ring-wrap { position: relative; }
.ring-txt {
  font-size: 24px; font-weight: 800; fill: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  font-family: system-ui, -apple-system, "PingFang SC", sans-serif;
}
.ring-cap { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; letter-spacing: .04em; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.stat-cell {
  min-width: 96px; padding: var(--s-2) var(--s-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); text-align: center;
}
.stat-v { font-size: var(--fs-md); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat-k { font-size: 11px; color: var(--ink-3); font-weight: 600; }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-top: var(--s-6); }
  .hero-stat { flex-direction: row; align-items: center; gap: var(--s-5); flex-wrap: wrap; justify-content: flex-start; }
  .stat-grid { margin-top: 0; flex: 1; min-width: 210px; }
}

/* ---------- 21. 章节标题 / 分组 ---------- */
.sec-h {
  font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em;
  margin-bottom: var(--s-4); position: relative; padding-left: var(--s-3);
}
.sec-h::before {
  content: ''; position: absolute; left: 0; top: .22em; bottom: .22em;
  width: 4px; border-radius: 2px; background: var(--brand);
}
.mt-10 { margin-top: var(--s-10); }
.grade-block { margin-bottom: var(--s-10); }
.grade-hd { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: 2px; }
.grade-title { font-size: var(--fs-md); font-weight: 800; margin: 0; letter-spacing: -.01em; }
.grade-note { margin: 0 0 var(--s-4); }

/* ---------- 22. 训练场卡片 ---------- */
.tool-card { display: block; text-decoration: none; color: inherit; }
.tool-card:hover { text-decoration: none; }
.tool-ico {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: 21px; margin-bottom: var(--s-3);
}
.tool-title { font-size: var(--fs-md); font-weight: 750; margin-bottom: var(--s-2); }
.tool-desc { line-height: 1.7; margin: 0; }

/* ---------- 23. 页头（内页） ---------- */
.page-hd { padding: var(--s-6) 0 var(--s-4); }
.page-hd h1 { font-size: var(--fs-xl); margin-bottom: var(--s-2); letter-spacing: -.02em; }
.page-hd .sub { color: var(--ink-2); font-size: var(--fs-base); max-width: 70ch; line-height: 1.7; }
.crumbs { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s-3); flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--brand); }

/* ---------- 24. 底部标签栏（移动端快捷跳转） ---------- */
.pager {
  display: flex; gap: var(--s-3); justify-content: space-between;
  margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line);
}
.pager a {
  flex: 1; padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pager a:hover { border-color: var(--brand); transform: translateY(-1px); text-decoration: none; }
.pager a[aria-disabled="true"] { opacity: .38; pointer-events: none; }
.pager .dir { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; display: block; }
.pager .nm { font-size: var(--fs-sm); font-weight: 700; display: block; margin-top: 1px; }
.pager .next { text-align: right; }

/* ---------- 19. 打印 ---------- */
@media print {
  .nav, .foot, .btn, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card, .q { box-shadow: none; border-color: #bbb; break-inside: avoid; page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .explain { break-inside: avoid; }
}

/* ════ 手机端覆盖（放文件最后，否则会被前面的同特异性规则覆盖）════ */
@media (max-width: 900px) {
  /* 拇指友好：顶栏图标按钮 32px → 40px，面包屑和小节导航加高，避免点错 */
  .btn-icon.btn-sm { width: 40px; min-width: 40px; min-height: 40px; }
  .crumbs a { padding: 8px 2px; display: inline-block; }
  .sec-nav button { min-height: 44px; }
}

/* ════ 回到顶部（全局浮动按钮，滚过约六成屏高才出现）════ */
.back-top {
  position: fixed; right: 18px; bottom: 22px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); box-shadow: var(--sh-2);
  font-size: 19px; line-height: 1; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.back-top.show { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { color: var(--brand); border-color: var(--brand); }
.back-top:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ════ 首页"我在读几年级"切换 ════ */
.grade-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.grade-switch {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--line-soft); border: 1px solid var(--line); border-radius: 999px;
}
.grade-switch button {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 16px; min-height: 34px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.grade-switch button.is-on { background: var(--surface); color: var(--brand-ink); box-shadow: var(--sh-1); }
.grade-switch button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (max-width: 640px) {
  .grade-switch button { padding: 8px 18px; min-height: 40px; }
  .back-top { right: 14px; bottom: 16px; width: 44px; height: 44px; }
}
@media print { .back-top { display: none !important; } }