/* ============================================================================
   知境 Zhijing — Core Stylesheet
   ----------------------------------------------------------------------------
   单一共享样式层，替代 198 个页面中重复的 chrome CSS 与 Tailwind CDN。

   分层顺序（后者可覆盖前者）：
     1. 设计令牌      --zj-* 命名空间，绝不与存量页变量名冲突
     2. 学段主题      [data-stage="primary"] 小学 / [data-stage="secondary"] 中学
     3. 明暗主题      [data-theme="light"] / [data-theme="dark"] / 跟随系统
     4. 学科强调色    [data-subject="physics"] …
     5. 基础可达性层  focus / reduced-motion / 触控目标
     6. Tailwind 静态替代（全站实际在用的 ~90 个工具类）
     7. .zj-* 组件层  仅新页与深度改造页使用

   与存量页的关系：本文件在页面内联 <style> 之前加载，因此同特异度下页面样式
   永远胜出。所有组件类一律 .zj- 前缀，令牌一律 --zj- 前缀，零碰撞。
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌 — 基础色板（stage/theme 无关的原始色）
   ========================================================================== */

:root {
  /* 中性色阶 —— slate */
  --zj-n-50:  #F8FAFC;
  --zj-n-100: #F1F5F9;
  --zj-n-200: #E2E8F0;
  --zj-n-300: #CBD5E1;
  --zj-n-400: #94A3B8;
  --zj-n-500: #64748B;
  --zj-n-600: #475569;
  --zj-n-700: #334155;
  --zj-n-800: #1E293B;
  --zj-n-900: #0F172A;
  --zj-n-950: #020617;

  /* 学科色 —— 与存量页 --theme-* 保持一致，避免视觉断裂 */
  --zj-subject-physics:   #3B82F6;
  --zj-subject-math:      #F59E0B;
  --zj-subject-chemistry: #EF4444;
  --zj-subject-biology:   #10B981;
  --zj-subject-history:   #B45309;
  --zj-subject-geography: #059669;
  --zj-subject-politics:  #7C3AED;
  --zj-subject-chinese:   #DB2777;
  --zj-subject-english:   #0284C7;
  --zj-subject-science:   #06B6D4;
  --zj-brand:             #14B8A6;

  /* 语义反馈色 */
  --zj-success: #22C55E;
  --zj-warning: #F59E0B;
  --zj-danger:  #EF4444;
  --zj-info:    #38BDF8;

  /* ---- 动效令牌 ----
     时长按「感知层级」而非任意数值划分：
       dur-1 状态反馈（按钮/开关），用户不应察觉
       dur-2 元素进出场
       dur-3 布局与视图转换
       dur-4 教学性动画（需要被看清的因果过程） */
  --zj-dur-1: 120ms;
  --zj-dur-2: 240ms;
  --zj-dur-3: 420ms;
  --zj-dur-4: 700ms;

  --zj-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);    /* 减速，进场 */
  --zj-ease-in:       cubic-bezier(0.64, 0, 0.78, 0);    /* 加速，退场 */
  --zj-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);    /* 对称，位移 */
  --zj-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* 回弹，正反馈 */
  --zj-ease-linear:   linear;                            /* 物理仿真必须线性 */

  /* 动效开关：JS 与 CSS 共同读取。reduced-motion 下置 0 */
  --zj-motion: 1;

  /* ---- 排版 ---- */
  --zj-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                  "Noto Sans SC", sans-serif;
  --zj-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* ---- 层级 ---- */
  --zj-z-canvas:    1;
  --zj-z-panel:     10;
  --zj-z-nav:       100;
  --zj-z-transport: 200;
  --zj-z-modal:     1000;
  --zj-z-toast:     1100;
}

/* ==========================================================================
   2. 学段主题
   --------------------------------------------------------------------------
   两个学段不是「同一套设计换个颜色」，而是两种不同的信息密度契约：

   secondary（高中）：接近专业工具。信息密度高、圆角克制、动效收敛，
                      默认深色以突出发光的仿真画布。
   primary（小学）：接近玩具。字号大、圆角大、触控目标大、反馈强，
                    默认浅色以适应白天教室与低龄阅读。
   ========================================================================== */

/* ---- 默认 = 高中（存量页多数为高中，且未标注 stage 时不应改变观感）---- */
:root,
:root[data-stage="secondary"] {
  --zj-stage: "secondary";

  --zj-font-size-base: 15px;
  --zj-line-height:    1.6;
  --zj-title-weight:   700;
  --zj-measure:        68ch;         /* 正文最佳阅读行长 */

  --zj-radius-sm: 6px;
  --zj-radius:    10px;
  --zj-radius-lg: 16px;
  --zj-radius-pill: 999px;

  --zj-space-1: 4px;
  --zj-space-2: 8px;
  --zj-space-3: 12px;
  --zj-space-4: 16px;
  --zj-space-5: 24px;
  --zj-space-6: 32px;

  --zj-control-h:   34px;            /* 控件高度 */
  --zj-tap-min:     40px;            /* 最小可点区域 */
  --zj-slider-thumb: 18px;
  --zj-border-w:    1px;

  --zj-motion-scale: 1;              /* 动效幅度倍率 */
  --zj-feedback: var(--zj-ease-out); /* 正反馈缓动：克制 */
}

/* ---- 小学 ---- */
:root[data-stage="primary"] {
  --zj-stage: "primary";

  --zj-font-size-base: 17px;
  --zj-line-height:    1.75;
  --zj-title-weight:   800;
  --zj-measure:        54ch;         /* 低龄读者行长更短 */

  --zj-radius-sm: 10px;
  --zj-radius:    18px;
  --zj-radius-lg: 28px;
  --zj-radius-pill: 999px;

  --zj-space-1: 6px;
  --zj-space-2: 10px;
  --zj-space-3: 16px;
  --zj-space-4: 22px;
  --zj-space-5: 30px;
  --zj-space-6: 40px;

  --zj-control-h:   46px;
  --zj-tap-min:     48px;            /* WCAG 2.5.8 AAA 触控目标 */
  --zj-slider-thumb: 28px;
  --zj-border-w:    2px;             /* 更粗的描边，边界更清晰 */

  --zj-motion-scale: 1.35;           /* 动效幅度更大更显眼 */
  --zj-feedback: var(--zj-ease-spring); /* 正反馈缓动：回弹 */
}

/* ==========================================================================
   3. 明暗主题 × 学段 —— 表面与文字色
   --------------------------------------------------------------------------
   四种组合都必须显式定义，绝不让任何颜色只存在于 media query 里。
   ========================================================================== */

/* ---- 高中 · 深色（站点历史默认）---- */
:root,
:root[data-stage="secondary"],
:root[data-stage="secondary"][data-theme="dark"] {
  --zj-bg-gradient:    linear-gradient(180deg, #0F172A 0%, #0C1929 60%, #0F172A 100%);
  --zj-bg-solid:       #0F172A;
  --zj-surface:        rgba(255, 255, 255, 0.06);
  --zj-surface-strong: rgba(255, 255, 255, 0.10);
  --zj-surface-border: rgba(255, 255, 255, 0.12);
  --zj-surface-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --zj-nav-bg:         rgba(15, 23, 42, 0.92);
  --zj-nav-border:     rgba(20, 184, 166, 0.25);
  --zj-sidebar-bg:     rgba(10, 18, 35, 0.96);
  --zj-panel-bg:       rgba(15, 23, 42, 0.78);
  --zj-panel-border:   rgba(20, 184, 166, 0.22);
  --zj-text-1:         #F8FAFC;
  --zj-text-2:         #CBD5E1;
  --zj-text-3:         #94A3B8;
  --zj-grid-line:      rgba(148, 163, 184, 0.16);
  --zj-focus-ring:     #5EEAD4;
}

/* ---- 高中 · 浅色 ---- */
:root[data-stage="secondary"][data-theme="light"],
:root[data-theme="light"]:not([data-stage="primary"]) {
  --zj-bg-gradient:    linear-gradient(180deg, #F0F4FF 0%, #E8F4FD 50%, #F0F4FF 100%);
  --zj-bg-solid:       #F4F7FC;
  --zj-surface:        rgba(255, 255, 255, 0.78);
  --zj-surface-strong: rgba(255, 255, 255, 0.95);
  --zj-surface-border: rgba(15, 23, 42, 0.10);
  --zj-surface-shadow: 0 8px 28px rgba(15, 23, 42, 0.10);
  --zj-nav-bg:         rgba(255, 255, 255, 0.92);
  --zj-nav-border:     rgba(13, 148, 136, 0.30);
  --zj-sidebar-bg:     rgba(248, 250, 252, 0.97);
  --zj-panel-bg:       rgba(255, 255, 255, 0.86);
  --zj-panel-border:   rgba(13, 148, 136, 0.24);
  --zj-text-1:         #0F172A;
  --zj-text-2:         #334155;
  --zj-text-3:         #64748B;
  --zj-grid-line:      rgba(71, 85, 105, 0.18);
  --zj-focus-ring:     #0D9488;
}

/* ---- 小学 · 浅色（小学默认）----
   低龄默认浅色：教室投影与白天阅读场景占绝大多数，深色底在投影仪上
   会因环境光冲刷而丧失对比度。 */
:root[data-stage="primary"],
:root[data-stage="primary"][data-theme="light"] {
  --zj-bg-gradient:    linear-gradient(170deg, #FFF7ED 0%, #F0F9FF 55%, #ECFEFF 100%);
  --zj-bg-solid:       #FFFBF5;
  --zj-surface:        #FFFFFF;
  --zj-surface-strong: #FFFFFF;
  --zj-surface-border: rgba(15, 23, 42, 0.12);
  --zj-surface-shadow: 0 6px 0 rgba(15, 23, 42, 0.06), 0 12px 30px rgba(15, 23, 42, 0.08);
  --zj-nav-bg:         rgba(255, 255, 255, 0.95);
  --zj-nav-border:     rgba(249, 115, 22, 0.30);
  --zj-sidebar-bg:     #FFFFFF;
  --zj-panel-bg:       #FFFFFF;
  --zj-panel-border:   rgba(15, 23, 42, 0.12);
  --zj-text-1:         #17233A;
  --zj-text-2:         #3D4C66;
  --zj-text-3:         #64748B;
  --zj-grid-line:      rgba(71, 85, 105, 0.20);
  --zj-focus-ring:     #F97316;
}

/* ---- 小学 · 深色（夜间/低光教室）---- */
:root[data-stage="primary"][data-theme="dark"] {
  --zj-bg-gradient:    linear-gradient(170deg, #1B2338 0%, #16263A 55%, #14303A 100%);
  --zj-bg-solid:       #1B2338;
  --zj-surface:        rgba(255, 255, 255, 0.09);
  --zj-surface-strong: rgba(255, 255, 255, 0.14);
  --zj-surface-border: rgba(255, 255, 255, 0.18);
  --zj-surface-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 12px 30px rgba(0, 0, 0, 0.35);
  --zj-nav-bg:         rgba(27, 35, 56, 0.94);
  --zj-nav-border:     rgba(251, 146, 60, 0.35);
  --zj-sidebar-bg:     rgba(23, 30, 49, 0.97);
  --zj-panel-bg:       rgba(27, 35, 56, 0.85);
  --zj-panel-border:   rgba(251, 146, 60, 0.28);
  --zj-text-1:         #FFF7ED;
  --zj-text-2:         #E2E8F0;
  --zj-text-3:         #A8B6CC;
  --zj-grid-line:      rgba(203, 213, 225, 0.20);
  --zj-focus-ring:     #FDBA74;
}

/* ---- 跟随系统（未显式设置 data-theme 时）---- */
@media (prefers-color-scheme: light) {
  :root[data-stage="secondary"]:not([data-theme="dark"]) {
    --zj-bg-gradient:    linear-gradient(180deg, #F0F4FF 0%, #E8F4FD 50%, #F0F4FF 100%);
    --zj-bg-solid:       #F4F7FC;
    --zj-surface:        rgba(255, 255, 255, 0.78);
    --zj-surface-strong: rgba(255, 255, 255, 0.95);
    --zj-surface-border: rgba(15, 23, 42, 0.10);
    --zj-surface-shadow: 0 8px 28px rgba(15, 23, 42, 0.10);
    --zj-nav-bg:         rgba(255, 255, 255, 0.92);
    --zj-nav-border:     rgba(13, 148, 136, 0.30);
    --zj-sidebar-bg:     rgba(248, 250, 252, 0.97);
    --zj-panel-bg:       rgba(255, 255, 255, 0.86);
    --zj-panel-border:   rgba(13, 148, 136, 0.24);
    --zj-text-1:         #0F172A;
    --zj-text-2:         #334155;
    --zj-text-3:         #64748B;
    --zj-grid-line:      rgba(71, 85, 105, 0.18);
    --zj-focus-ring:     #0D9488;
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-stage="primary"]:not([data-theme="light"]) {
    --zj-bg-gradient:    linear-gradient(170deg, #1B2338 0%, #16263A 55%, #14303A 100%);
    --zj-bg-solid:       #1B2338;
    --zj-surface:        rgba(255, 255, 255, 0.09);
    --zj-surface-strong: rgba(255, 255, 255, 0.14);
    --zj-surface-border: rgba(255, 255, 255, 0.18);
    --zj-surface-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 12px 30px rgba(0, 0, 0, 0.35);
    --zj-nav-bg:         rgba(27, 35, 56, 0.94);
    --zj-nav-border:     rgba(251, 146, 60, 0.35);
    --zj-sidebar-bg:     rgba(23, 30, 49, 0.97);
    --zj-panel-bg:       rgba(27, 35, 56, 0.85);
    --zj-panel-border:   rgba(251, 146, 60, 0.28);
    --zj-text-1:         #FFF7ED;
    --zj-text-2:         #E2E8F0;
    --zj-text-3:         #A8B6CC;
    --zj-grid-line:      rgba(203, 213, 225, 0.20);
    --zj-focus-ring:     #FDBA74;
  }
}

/* ==========================================================================
   4. 学科强调色 —— data-subject 驱动
   ========================================================================== */

:root                          { --zj-accent: var(--zj-brand); }
:root[data-subject="physics"]         { --zj-accent: var(--zj-subject-physics); }
:root[data-subject="math"]            { --zj-accent: var(--zj-subject-math); }
:root[data-subject="chemistry"]       { --zj-accent: var(--zj-subject-chemistry); }
:root[data-subject="biology"]         { --zj-accent: var(--zj-subject-biology); }
:root[data-subject="history"]         { --zj-accent: var(--zj-subject-history); }
:root[data-subject="geography"]       { --zj-accent: var(--zj-subject-geography); }
:root[data-subject="politics"]        { --zj-accent: var(--zj-subject-politics); }
:root[data-subject="chinese"]         { --zj-accent: var(--zj-subject-chinese); }
:root[data-subject="english"]         { --zj-accent: var(--zj-subject-english); }
:root[data-subject="primary-math"]    { --zj-accent: #F97316; }
:root[data-subject="primary-science"] { --zj-accent: var(--zj-subject-science); }
:root[data-subject="primary-chinese"] { --zj-accent: #E11D48; }
:root[data-subject="primary-english"] { --zj-accent: #8B5CF6; }

/* ==========================================================================
   5. 基础可达性层
   --------------------------------------------------------------------------
   这一层是唯一会作用于存量页的规则集，因此全部保持极低特异度，
   或限定在 media query 内 —— 页面自身样式仍可覆盖。
   ========================================================================== */

/* ---- 键盘焦点：站点此前完全没有可见焦点样式 ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--zj-focus-ring, #5EEAD4);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 跳转到主内容 —— 屏幕阅读器与键盘用户绕过导航 */
.zj-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--zj-z-modal);
  padding: 10px 18px;
  background: var(--zj-accent);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--zj-radius) 0;
  text-decoration: none;
}
.zj-skip-link:focus {
  left: 0;
}

/* 屏幕阅读器专用文本 */
.zj-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- 减少动态效果 ----
   WCAG 2.3.3。站点此前 0 处支持。
   物理仿真不应被完全冻结（那会丧失教学内容），而是交给 lab.js 切换到
   「单步模式」：动画不自动播放，由学习者手动推进。此处只压制装饰性动效。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --zj-motion: 0;
    --zj-dur-1: 1ms;
    --zj-dur-2: 1ms;
    --zj-dur-3: 1ms;
    --zj-dur-4: 1ms;
    --zj-motion-scale: 0;
  }

  /* 存量页的装饰性 CSS 动画一律压制。
     标注 data-zj-essential 的元素豁免（教学必需的动画）。 */
  *:not([data-zj-essential]):not([data-zj-essential] *) {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 高对比度模式 ---- */
@media (prefers-contrast: more) {
  :root {
    --zj-surface-border: currentColor;
    --zj-border-w: 2px;
  }
}

/* ---- 小学学段的控件人体工学 ----
   低龄用户手指精度低，滑块与按钮必须更大。这里只调尺寸不调配色，
   因此对存量页是纯增益、不会破坏其视觉。 */
:root[data-stage="primary"] input[type="range"] {
  height: var(--zj-tap-min);
  cursor: pointer;
}
:root[data-stage="primary"] input[type="range"]::-webkit-slider-thumb {
  width: var(--zj-slider-thumb);
  height: var(--zj-slider-thumb);
}
:root[data-stage="primary"] input[type="range"]::-moz-range-thumb {
  width: var(--zj-slider-thumb);
  height: var(--zj-slider-thumb);
}
:root[data-stage="primary"] input[type="checkbox"],
:root[data-stage="primary"] input[type="radio"] {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   6. Tailwind 静态替代
   --------------------------------------------------------------------------
   全站 198 页实际只用到下列工具类（共 ~90 个，经全量扫描确认）。
   以此替代 cdn.tailwindcss.com —— 那是浏览器端 JIT 编译器，约 400KB
   阻塞脚本，官方明确标注不可用于生产环境。
   若将来新增工具类，请扩充本节而非重新引入 CDN。
   ========================================================================== */

/* 布局 */
.zj-tw, .block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.cursor-pointer { cursor: pointer; }

/* Flex/Grid 对齐 */
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }

/* 间距 —— Tailwind 4px 基准 */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem;    padding-bottom: 1rem; }

.m-4  { margin: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* 排版 */
.text-xs  { font-size: 0.75rem;  line-height: 1rem; }
.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem;   line-height: 2rem; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* 边框与圆角 */
.border { border-width: 1px; border-style: solid; }
.rounded      { border-radius: 0.25rem; }
.rounded-md   { border-radius: 0.375rem; }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.shadow    { box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05); }

/* 颜色 —— 仅站内实际用到的色值 */
.text-slate-200 { color: #E2E8F0; }
.text-slate-300 { color: #CBD5E1; }
.text-slate-400 { color: #94A3B8; }
.text-slate-500 { color: #64748B; }
.text-gray-400  { color: #9CA3AF; }
.text-emerald-200 { color: #A7F3D0; }
.text-emerald-300 { color: #6EE7B7; }
.text-emerald-400 { color: #34D399; }
.text-emerald-500 { color: #10B981; }
.text-emerald-600 { color: #059669; }
.text-cyan-400   { color: #22D3EE; }
.text-amber-300  { color: #FCD34D; }
.text-amber-400  { color: #FBBF24; }
.text-rose-400   { color: #FB7185; }
.text-pink-400   { color: #F472B6; }
.text-purple-300 { color: #D8B4FE; }
.text-purple-400 { color: #C084FC; }
.text-purple-600 { color: #9333EA; }

.bg-slate-600 { background-color: #475569; }
.bg-slate-700 { background-color: #334155; }
.bg-slate-800 { background-color: #1E293B; }
.bg-slate-900 { background-color: #0F172A; }
.bg-emerald-100 { background-color: #D1FAE5; }
.bg-emerald-200 { background-color: #A7F3D0; }
.bg-emerald-500 { background-color: #10B981; }
.bg-emerald-600 { background-color: #059669; }
.bg-purple-100 { background-color: #F3E8FF; }
.bg-purple-200 { background-color: #E9D5FF; }
.bg-pink-500   { background-color: #EC4899; }

/* ==========================================================================
   7. .zj-* 组件层
   --------------------------------------------------------------------------
   仅新页与深度改造页使用。全部消费上面的令牌，因此自动适配学段与主题。
   ========================================================================== */

.zj-page {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--zj-font-sans);
  font-size: var(--zj-font-size-base);
  line-height: var(--zj-line-height);
  color: var(--zj-text-1);
  background: var(--zj-bg-solid);
  background-image: var(--zj-bg-gradient);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- 卡片 ---- */
.zj-card {
  background: var(--zj-surface);
  border: var(--zj-border-w) solid var(--zj-surface-border);
  border-radius: var(--zj-radius-lg);
  box-shadow: var(--zj-surface-shadow);
  padding: var(--zj-space-4);
  backdrop-filter: blur(12px);
}
:root[data-stage="primary"] .zj-card {
  backdrop-filter: none;   /* 小学用实色卡片，毛玻璃降低文字锐度 */
}

.zj-card__title {
  display: flex;
  align-items: center;
  gap: var(--zj-space-2);
  margin: 0 0 var(--zj-space-3);
  font-size: 1em;
  font-weight: var(--zj-title-weight);
  color: var(--zj-text-1);
}
.zj-card__title::before {
  content: "";
  width: 4px;
  height: 1.1em;
  border-radius: var(--zj-radius-pill);
  background: var(--zj-accent);
}

.zj-prose {
  max-width: var(--zj-measure);
  color: var(--zj-text-2);
}

/* ---- 按钮 ---- */
.zj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zj-space-2);
  min-height: var(--zj-tap-min);
  min-width: var(--zj-tap-min);
  padding: 0 var(--zj-space-3);
  font: inherit;
  font-weight: 600;
  color: var(--zj-text-1);
  background: var(--zj-surface-strong);
  border: var(--zj-border-w) solid var(--zj-surface-border);
  border-radius: var(--zj-radius);
  cursor: pointer;
  transition: transform var(--zj-dur-1) var(--zj-feedback),
              background-color var(--zj-dur-1) var(--zj-ease-out),
              border-color var(--zj-dur-1) var(--zj-ease-out);
}
.zj-btn:hover  { background: var(--zj-surface-strong); border-color: var(--zj-accent); }
.zj-btn:active { transform: scale(calc(1 - 0.04 * var(--zj-motion-scale))); }
.zj-btn[aria-pressed="true"],
.zj-btn.is-active {
  background: color-mix(in oklab, var(--zj-accent) 22%, transparent);
  border-color: var(--zj-accent);
  color: var(--zj-text-1);
}
.zj-btn--primary {
  background: var(--zj-accent);
  border-color: var(--zj-accent);
  color: #fff;
}
.zj-btn--ghost {
  background: transparent;
  border-color: transparent;
}

/* ---- Transport 播放控制条 ----
   教学动画的核心契约：学习者控制节奏，而非被动观看。
   （Mayer 多媒体学习理论的 segmenting principle） */
.zj-transport {
  display: flex;
  align-items: center;
  gap: var(--zj-space-3);
  padding: var(--zj-space-2) var(--zj-space-3);
  background: var(--zj-panel-bg);
  border: var(--zj-border-w) solid var(--zj-panel-border);
  border-radius: var(--zj-radius-pill);
  box-shadow: var(--zj-surface-shadow);
  z-index: var(--zj-z-transport);
}
.zj-transport__time {
  min-width: 7ch;
  font-family: var(--zj-font-mono);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  color: var(--zj-text-2);
}
.zj-transport__scrub {
  flex: 1;
  min-width: 120px;
  accent-color: var(--zj-accent);
}

/* ---- 参数滑块 ---- */
.zj-control {
  display: flex;
  align-items: center;
  gap: var(--zj-space-3);
  min-height: var(--zj-tap-min);
}
.zj-control__label {
  flex: 0 0 auto;
  min-width: 6em;
  font-size: 0.9em;
  color: var(--zj-text-2);
}
.zj-control__input {
  flex: 1;
  accent-color: var(--zj-accent);
}
.zj-control__value {
  flex: 0 0 auto;
  min-width: 5.5ch;
  text-align: right;
  font-family: var(--zj-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--zj-accent);
}

/* ---- 联动高亮 ----
   公式中的某一项与画布中的某个量之间建立双向指向关系。
   这是整个站点教学价值最高的交互：把符号锚定到现象。 */
.zj-link {
  cursor: help;
  border-bottom: 2px dotted currentColor;
  border-radius: 2px;
  transition: background-color var(--zj-dur-1) var(--zj-ease-out),
              color var(--zj-dur-1) var(--zj-ease-out);
}
.zj-link.is-lit,
.zj-link:hover {
  background: color-mix(in oklab, var(--zj-accent) 25%, transparent);
  color: var(--zj-text-1);
}

/* ---- 预测面板：先预测，后揭示 ---- */
.zj-predict__reveal[hidden] { display: none; }
.zj-predict__option {
  display: block;
  width: 100%;
  margin-bottom: var(--zj-space-2);
  text-align: left;
}
.zj-predict__option.is-correct {
  border-color: var(--zj-success);
  background: color-mix(in oklab, var(--zj-success) 18%, transparent);
}
.zj-predict__option.is-wrong {
  border-color: var(--zj-danger);
  background: color-mix(in oklab, var(--zj-danger) 18%, transparent);
}

/* ---- 小测验 ---- */
.zj-quiz__option {
  display: block;
  width: 100%;
  margin-bottom: var(--zj-space-2);
  text-align: left;
  font-weight: 500;
}
.zj-quiz__option.is-correct {
  border-color: var(--zj-success);
  background: color-mix(in oklab, var(--zj-success) 18%, transparent);
}
.zj-quiz__option.is-wrong {
  border-color: var(--zj-danger);
  background: color-mix(in oklab, var(--zj-danger) 18%, transparent);
}
.zj-quiz__explain {
  padding: var(--zj-space-3);
  border-left: 3px solid var(--zj-accent);
  border-radius: var(--zj-radius-sm);
  background: var(--zj-surface);
  color: var(--zj-text-2);
  font-size: 0.92em;
}

/* ---- 画布舞台 ---- */
.zj-stage {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--zj-radius-lg);
  overflow: hidden;
  background: var(--zj-bg-solid);
  contain: layout paint;      /* 隔离重绘，仿真不触发全页 layout */
}
.zj-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* 画布未就绪时的占位（避免 CLS） */
.zj-stage[data-zj-state="loading"]::after {
  content: attr(data-zj-loading-text);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--zj-text-3);
  font-size: 0.9em;
}

/* ---- 入场揭示：滚动驱动，原生实现，不占主线程 ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .zj-reveal {
      animation: zj-reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 32%;
    }
  }
}
@keyframes zj-reveal-in {
  from { opacity: 0; transform: translateY(calc(18px * var(--zj-motion-scale))); }
  to   { opacity: 1; transform: none; }
}

/* ---- 数值变化的注意力信号 ---- */
@keyframes zj-pulse {
  0%, 100% { background-color: transparent; }
  30%      { background-color: color-mix(in oklab, var(--zj-accent) 35%, transparent); }
}
.zj-pulse {
  animation: zj-pulse var(--zj-dur-3) var(--zj-ease-out);
}

/* ---- 视图转换（页面间导航）---- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---- 打印：仿真页导出为讲义 ---- */
@media print {
  .zj-transport, .zj-stage, nav, #topNav, #controlPanel { display: none !important; }
  .zj-page { background: #fff; color: #000; }
  .zj-card { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
}