/* ============================================================
   ch01「线性代数与概率统计基础」章节专属样式
   境界：炼气一层·数理筑基 · 翠绿 var(--accent)
   Boss：维度之噬 · 紫黑 #7C3AED
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   基石之伤：翠绿碎片 var(--accent)
   维度债：赤红 var(--ch-boss)
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：翠绿 ---------- */
:root, :root[data-theme="light"] {
  --accent: #059669;
  --accent-ink: #047857;
  --accent-soft: rgba(16, 185, 129, 0.12);
  --glass-line: rgba(16, 185, 129, 0.22);
  --glow: 0 0 18px rgba(16, 185, 129, 0.28);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #10B981;
  --accent-ink: #34D399;
  --accent-soft: rgba(16, 185, 129, 0.16);
  --glass-line: rgba(16, 185, 129, 0.22);
  --glow: 0 0 22px rgba(16, 185, 129, 0.34);
  --on-accent: #04120F;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #7C3AED;          /* 维度之噬 · 紫黑 */
  --ch-boss-ink: #A78BFA;      /* 裂隙紫 */
  --ch-boss-soft: rgba(124, 58, 237, 0.18);
  --ch-boss-line: rgba(124, 58, 237, 0.42);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟突破金（理解发生之处） */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  --ch-conflict: var(--ch-boss);      /* 直觉冲突赤红 */
  --ch-conflict-soft: rgba(239, 68, 68, 0.14);
  --ch-conflict-ink: #DC2626;
  --ch-jade: var(--accent);          /* 数理翠绿 */
  --ch-jade-soft: rgba(16, 185, 129, 0.14);
  --ch-jade-ink: #059669;
  /* 三条贯穿机制色 */
  --debt-red: var(--ch-boss);         /* 维度债赤红光页 */
  --debt-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: var(--accent);       /* 排除刻痕翠绿微光 */
  --carve-soft: rgba(16, 185, 129, 0.14);
  --wound-shard: var(--accent);      /* 基石之伤碎片翠 */
  --wound-crack: #F87171;      /* 基石之伤裂缝红 */
  /* 线性代数篇色 */
  --linalg-vec: #34D399;       /* 向量翠 */
  --linalg-mat: #60A5FA;       /* 矩阵蓝 */
  --linalg-svd: #D4A853;       /* SVD金 */
  --linalg-eigen: #A78BFA;     /* 特征值紫 */
  /* 概率统计篇色 */
  --prob-amber: var(--ch-amber);       /* 概率琥珀 */
  --prob-bayes: var(--accent);       /* 贝叶斯翠 */
  --prob-gauss: #D4A853;       /* 高斯金 */
  /* 信息论色 */
  --info-entropy: var(--ch-boss);     /* 熵红 */
  --info-kl: #F87171;          /* KL红流 */
  --info-mi: var(--accent);          /* 互信息翠 */
  /* 高维色 */
  --highdim-purple: #7C3AED;   /* 高维紫 */
  --highdim-sparse: #94A3B8;   /* 稀疏灰 */
  /* S2 石碑色 */
  --stele-identity: #94A3B8;   /* 单位阵银灰 */
  --stele-diag: #60A5FA;       /* 对角阵蓝 */
  --stele-sym: #A78BFA;        /* 对称阵紫 */
  --stele-orth: #34D399;       /* 正交阵翠 */
  --stele-inv: var(--ch-epiphany);        /* 逆矩阵金 */
  --stele-pd: var(--accent);         /* 正定矩阵翠绿 */
  /* S5 分布色 */
  --dist-bern: var(--ch-epiphany);        /* 伯努利金 */
  --dist-binom: #60A5FA;       /* 二项蓝 */
  --dist-gauss: var(--accent);       /* 高斯翠 */
  --dist-multi: #A78BFA;       /* 多项式紫 */
  --dist-dir: #F87171;         /* Dirichlet红 */
  /* S9 Boss */
  --boss-rift: #7C3AED;        /* 裂隙紫黑 */
  --boss-rift-ink: #A78BFA;    /* 裂隙紫 */
  --answer-correct: var(--accent);   /* 正解翠绿光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #475569;/* 被刻痕划去选项灰 */
  --net-gold: var(--ch-epiphany);         /* 收网金光 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  /* 选项/状态色 */
  --opt-correct: var(--accent);
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #475569;
  --ch-ok: var(--accent);
  --ch-warn: var(--ch-boss);
  --ch-bg-warm: var(--ch-bg-warm);       /* 暖深蓝灰背景 */
}

/* ---------- 导师高斯老祖对话框变体 ---------- */
.dlg.gauss {
  border-left-color: var(--accent);
  box-shadow: var(--shadow), 0 0 18px var(--accent-soft);
}
.dlg.gauss .who {
  background: var(--accent); color: var(--on-accent);
}
.dlg.gauss .avatar {
  border-color: var(--accent);
}
.dlg.gauss p {
  color: var(--text-1);
}

/* ---------- 开场（opening） ---------- */
#opening {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); text-align: center;
  padding: calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-7);
  background: radial-gradient(ellipse at center, var(--ch-bg-warm, #0A1419) 0%, var(--ch-bg-warm) 70%);
}
.op-title span {
  display: inline-block; opacity: 0;
  text-shadow: 0 0 60px var(--accent-soft), 0 0 24px var(--ch-jade-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--wound-crack);
  background: rgba(248,113,113,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #wound-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #wound-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-jade-ink); }
#carve-list p { font-size: 0.8rem; color: var(--ch-jade); margin: var(--sp-1) 0; }
#wound-list p { font-size: 0.8rem; color: var(--wound-crack); margin: var(--sp-1) 0; }
.option.excluded { opacity: 0.3; cursor: default; transform: none; text-decoration: line-through; border-color: var(--opt-excluded); background: rgba(71,85,105,0.16); }
.sim-range, input[type="range"], .knob-range, select { accent-color: var(--accent); }
.btn-warn { border-color: var(--ch-warn); color: var(--ch-warn); }
.btn-warn:hover { background: rgba(239,68,68,0.12); }
.btn.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }

/* ---------- 通用 knob 旋钮 ---------- */
.knob-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.knob-unit {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); min-width: 120px; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.knob-unit:hover { border-color: var(--accent); }
.knob-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); letter-spacing: 0.1em; }

/* ============================================================
   S0 直觉之赌 · 基石拾取
   ============================================================ */
.cmp-intuition-bet { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-question {
  text-align: center; font-size: 1rem; color: var(--ch-boss-ink);
  padding: var(--sp-2); letter-spacing: 0.06em; font-style: italic;
}
.bet-options { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.bet-option {
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-width: 140px; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 0.88rem; color: var(--text-1);
}
.bet-option:hover { border-color: var(--accent); transform: translateY(-2px); }
.bet-option.chosen { border-color: var(--ch-boss); background: var(--ch-boss-soft); box-shadow: 0 0 14px var(--ch-boss-soft); }
.bet-option .bo-key { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); }
.debt-account {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--debt-red);
  border-radius: var(--r-sm); background: var(--debt-soft);
  font-size: 0.82rem; color: var(--text-2); font-style: italic;
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.debt-account .acct-line { margin: var(--sp-1) 0; }
.debt-account .acct-line b { color: var(--debt-red); font-style: normal; }
.cornerstone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--accent-soft); animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.cornerstone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.stone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: var(--sp-1); }
.stone-node {
  padding: var(--sp-1) 4px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.62rem; text-align: center; color: var(--text-3);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.35; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.stone-node.lit { opacity: 1; border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }

/* ============================================================
   S1 矩阵变换实验台
   ============================================================ */
.cmp-vector-matrix { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.vm-mode-toggle { display: flex; gap: var(--sp-2); justify-content: center; }
.vm-mode-toggle .btn { min-width: 140px; }
.vm-mode-toggle .btn.on { border-style: solid; }
.vm-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.vm-canvas-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.vm-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.vm-controls .btn { font-size: 0.78rem; }
.vm-compare {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.vm-compare .vm-cmp-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-1); }
.vm-compare .vm-cmp-cell {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2);
}
.vm-compare .vm-cmp-cell.diff { border-color: var(--ch-conflict); color: var(--ch-conflict); }

/* ============================================================
   S2 矩阵万相画廊
   ============================================================ */
.cmp-matrix-gallery { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.stele-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.stele-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 80px; opacity: 0.6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.stele-card:hover { opacity: 1; border-color: var(--accent); transform: translateY(-2px); }
.stele-card.touched { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.stele-card .sc-sym { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; color: var(--text-1); }
.stele-card .sc-name { font-size: 0.72rem; color: var(--text-3); }
.stele-card[data-stele="identity"] { border-top: 3px solid var(--stele-identity); }
.stele-card[data-stele="diag"] { border-top: 3px solid var(--stele-diag); }
.stele-card[data-stele="sym"] { border-top: 3px solid var(--stele-sym); }
.stele-card[data-stele="orth"] { border-top: 3px solid var(--stele-orth); }
.stele-card[data-stele="inv"] { border-top: 3px solid var(--stele-inv); }
.stele-card[data-stele="pd"] { border-top: 3px solid var(--stele-pd); }
.norm-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.norm-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.norm-zone canvas { width: 100%; max-width: 400px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.norm-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.norm-btn {
  padding: 4px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.norm-btn:hover { border-color: var(--accent); }
.norm-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.reg-preview {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); font-size: 0.8rem; color: var(--ch-epiphany-ink);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.exclude-mark {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); font-size: 0.82rem; color: var(--ch-epiphany-ink);
  font-style: italic; animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S3 分解之殿
   ============================================================ */
.cmp-decomposition { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.eigen-zone, .det-zone, .svd-zone, .quad-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.eigen-zone h4, .det-zone h4, .svd-zone h4, .quad-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.eigen-zone canvas, .det-zone canvas, .svd-zone canvas, .quad-zone canvas {
  width: 100%; max-width: 440px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto;
}
.eigen-readout {
  margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-2); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); text-align: center; min-height: 28px;
}
.svd-zone { animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.det-zone { animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.quad-zone { animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }

/* ============================================================
   S4 贝叶斯觉醒
   ============================================================ */
.cmp-bayes-awakening { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.monty-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.monty-zone canvas { width: 100%; max-width: 440px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.monty-stats { margin-top: var(--sp-2); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.monty-stat {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2);
}
.monty-stat b { color: var(--accent); }
.bayes-derive {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--prob-bayes); border-radius: var(--r-sm);
  background: var(--ch-jade-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.bayes-derive h4 { font-size: 0.85rem; color: var(--ch-jade-ink); margin-bottom: var(--sp-2); }
.derive-step {
  padding: var(--sp-1) var(--sp-2); margin-bottom: 2px; border-left: 2px solid var(--prob-bayes);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2);
  background: var(--bg-elev); animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1);
}
.derive-step .ds-tag { font-size: 0.68rem; color: var(--text-3); margin-right: 6px; }
.derive-step.highlight { border-left-color: var(--ch-epiphany); color: var(--ch-epiphany-ink); }
.prior-slider {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.prior-slider h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.prior-slider input[type="range"] { width: 100%; margin-bottom: var(--sp-2); }
.prior-readout {
  padding: var(--sp-1) var(--sp-2); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); text-align: center;
}

/* ============================================================
   S5 分布长廊
   ============================================================ */
.cmp-distribution-gallery { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.dist-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.dist-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 64px; opacity: 0.6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.dist-card:hover { opacity: 1; border-color: var(--accent); transform: translateY(-2px); }
.dist-card.active { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.dist-card .dc-sym { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.dist-card .dc-name { font-size: 0.65rem; color: var(--text-3); }
.dist-card[data-dist="bern"] { border-top: 3px solid var(--dist-bern); }
.dist-card[data-dist="binom"] { border-top: 3px solid var(--dist-binom); }
.dist-card[data-dist="gauss"] { border-top: 3px solid var(--dist-gauss); }
.dist-card[data-dist="multi"] { border-top: 3px solid var(--dist-multi); }
.dist-card[data-dist="dir"] { border-top: 3px solid var(--dist-dir); }
.dist-curve-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.dist-curve-zone canvas { width: 100%; max-width: 440px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.dist-stats { margin-top: var(--sp-2); display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.dist-stat {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2);
}
.dist-stat b { color: var(--accent); }
.cov-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.cov-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.cov-zone canvas { width: 100%; max-width: 440px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.cov-readout { margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-2); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); text-align: center; }

/* ============================================================
   S6 高斯之眼
   ============================================================ */
.cmp-gauss-eye { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.gauss-ellip-zone, .mle-zone, .map-zone, .overfit-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.gauss-ellip-zone h4, .mle-zone h4, .map-zone h4, .overfit-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.gauss-ellip-zone canvas, .mle-zone canvas, .overfit-zone canvas {
  width: 100%; max-width: 440px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto;
}
.mle-derive, .map-derive {
  margin-top: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); line-height: 1.8;
}
.mle-derive .ml-highlight, .map-derive .ml-highlight { color: var(--ch-jade); font-weight: 600; }
.mle-derive .ml-warn, .map-derive .ml-warn { color: var(--ch-warn); }
.mle-zone, .map-zone, .overfit-zone { animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }

/* ============================================================
   S7 信息之火
   ============================================================ */
.cmp-information-fire { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.entropy-zone, .kl-zone, .cross-entropy-zone, .mi-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.entropy-zone h4, .kl-zone h4, .cross-entropy-zone h4, .mi-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.entropy-zone canvas, .kl-zone canvas, .mi-zone canvas {
  width: 100%; max-width: 440px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto;
}
.entropy-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.ent-bar {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1);
}
.ent-bar .eb-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); min-width: 60px; }
.ent-bar .eb-track { flex: 1; height: 10px; border: 1px solid var(--glass-line); border-radius: 5px; background: var(--bg-elev); overflow: hidden; }
.ent-bar .eb-fill { height: 100%; background: var(--info-entropy); transition: width 400ms cubic-bezier(0.22,1,0.36,1); }
.ent-bar .eb-value { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-2); min-width: 50px; text-align: right; }
#s7-ce-breakdown {
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.ce-part {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2);
  display: flex; align-items: center; gap: var(--sp-2); animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1);
}
.ce-part .cp-tag { font-size: 0.68rem; color: var(--text-3); min-width: 80px; }
.ce-part.part-h { border-left: 3px solid var(--info-entropy); }
.ce-part.part-kl { border-left: 3px solid var(--info-kl); }
.ce-part.part-ce { border-left: 3px solid var(--accent); }
.kl-zone, .cross-entropy-zone, .mi-zone { animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }

/* ============================================================
   S8 高维裂隙
   ============================================================ */
.cmp-high-dim-rift { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.dim-slider-zone, .init-zone, .calc-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.dim-slider-zone h4, .init-zone h4, .calc-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.dim-slider-zone input[type="range"] { width: 100%; margin-bottom: var(--sp-2); }
.dim-slider-zone canvas { width: 100%; max-width: 440px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.dim-metrics { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
.dim-metric {
  display: flex; align-items: center; gap: var(--sp-2);
}
.dim-metric .dm-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); min-width: 100px; }
.dim-metric .dm-track { flex: 1; height: 8px; border: 1px solid var(--glass-line); border-radius: 4px; background: var(--bg-elev); overflow: hidden; }
.dim-metric .dm-fill { height: 100%; transition: width 400ms cubic-bezier(0.22,1,0.36,1); }
.dim-metric .dm-fill.dist { background: var(--highdim-purple); }
.dim-metric .dm-fill.sparse { background: var(--highdim-sparse); }
.dim-metric .dm-fill.vol { background: var(--accent); }
.dim-metric .dm-value { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-2); min-width: 80px; text-align: right; }
.init-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.init-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column; gap: 4px;
}
.init-card:hover { border-color: var(--accent); }
.init-card.chosen { border-color: var(--accent); background: var(--accent-soft); }
.init-card.bad { border-color: var(--ch-warn); }
.init-card .ic-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.init-card .ic-desc { font-size: 0.7rem; color: var(--text-3); }
.init-card .ic-result { font-size: 0.72rem; color: var(--text-2); }
.init-card.bad .ic-result { color: var(--ch-warn); }
#s8-calc-content {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); line-height: 1.8;
}
#s8-calc-content .cc-highlight { color: var(--ch-jade); font-weight: 600; }
.init-zone, .calc-zone { animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }

/* ============================================================
   S9 Boss 战 · 维度之噬
   ============================================================ */
#s9-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.boss-figure { width: 100%; display: flex; justify-content: center; margin-bottom: var(--sp-2); }
#s9-boss-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm); background: var(--bg-elev); }
.q-progress-bar { width: 100%; height: 6px; border: 1px solid var(--glass-line); border-radius: 3px; background: var(--bg-sunk); margin-bottom: var(--sp-2); overflow: hidden; }
.q-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.debt-ledger {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--debt-red);
  border-radius: var(--r-sm); background: var(--debt-soft);
  font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--sp-2);
}
.debt-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.debt-ledger .ledger-line b { color: var(--debt-red); font-style: normal; }
.q-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); margin-bottom: var(--sp-2); }
.q-text { font-size: 0.95rem; color: var(--text-1); margin-bottom: var(--sp-2); }
.q-account { font-size: 0.78rem; color: var(--ch-boss-ink); font-style: italic; padding: var(--sp-1) var(--sp-2); border-left: 2px solid var(--ch-boss-line); }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.q-option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; font-size: 0.85rem; text-align: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 50px;
  display: flex; align-items: center; justify-content: center;
}
.q-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.q-option.correct { border-color: var(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); box-shadow: var(--glow); }
.q-option.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); }
.q-option.eliminated { opacity: 0.3; cursor: default; text-decoration: line-through; border-color: var(--answer-eliminated); background: rgba(71,85,105,0.16); transform: none; }
.q-feedback {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: 0.85rem; min-height: 32px;
  margin-bottom: var(--sp-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.q-feedback.right { border-color: var(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); }
.q-feedback.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); font-style: italic; }
.carve-emergence {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--carve-mark); border-radius: var(--r-sm);
  background: var(--carve-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.carve-emergence h4 { font-size: 0.85rem; color: var(--ch-jade-ink); margin-bottom: var(--sp-2); }
.carve-emergence .carve-item {
  padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.carve-emergence .carve-item.lit {
  border-color: var(--carve-mark); color: var(--ch-jade-ink);
  background: var(--carve-soft); box-shadow: 0 0 8px var(--carve-soft);
}
.carve-emergence .carve-item.net {
  border-color: var(--net-gold); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 12px var(--ch-epiphany-soft);
}
.rift-collapse {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--breakthrough); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); text-align: center; font-style: italic; color: var(--ch-epiphany-ink);
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes shatterIn {
  0% { opacity: 0; transform: scale(0.8) rotate(-2deg); }
  50% { opacity: 1; transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============================================================
   S10 尾声 · 知识图谱
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.graph-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.graph-zone canvas { width: 100%; max-width: 460px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.puzzle-area { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--sp-2); }
.puzzle-piece {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; cursor: pointer;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.3;
}
.puzzle-piece:hover { border-color: var(--accent); transform: translateY(-2px); }
.puzzle-piece.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.puzzle-piece .pp-name { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; color: var(--text-1); }
.puzzle-piece .pp-tag { font-size: 0.58rem; color: var(--text-3); }
.puzzle-piece.lit .pp-tag { color: var(--accent-ink); }
.depth-readout { padding: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-ink); text-align: center; min-height: 28px; }
.realm-achieved {
  margin-top: var(--sp-3); text-align: center; padding: var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft);
}
.realm-glow {
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--ch-epiphany-ink); letter-spacing: 0.2em;
}
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--accent-soft); }
  50% { box-shadow: 0 0 32px rgba(16,185,129,0.4); }
}
.realm-achieved { animation: realmGlow 3s ease-in-out infinite; }

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@media (max-width: 640px) {
  .op-title { font-size: clamp(2rem, 12vw, 3.5rem); }
  .op-sub { letter-spacing: 0.3em; }
  .option-grid { grid-template-columns: 1fr; }
  .bet-options { flex-direction: column; }
  .stele-row { grid-template-columns: repeat(2, 1fr); }
  .dist-row { grid-template-columns: repeat(2, 1fr); }
  .init-grid { grid-template-columns: 1fr; }
  .puzzle-area { grid-template-columns: repeat(2, 1fr); }
  .knob-row { flex-direction: column; align-items: stretch; }
  .knob-unit { min-width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .debt-account, .cornerstone, .exclude-mark, .vm-compare, .reg-preview,
  .bayes-derive, .prior-slider, .cov-zone, .mle-zone, .map-zone, .overfit-zone,
  .kl-zone, .cross-entropy-zone, .mi-zone, .init-zone, .calc-zone,
  .det-zone, .svd-zone, .quad-zone, .carve-emergence, .rift-collapse,
  .derive-step, .ce-part { animation: none; }
  .bet-option:hover, .stele-card:hover, .dist-card:hover { transform: none; }
}