/* ============================================================
   ch07「反向传播与训练技术」章节专属样式
   境界：筑基二层·反向传功 · 琥珀 var(--ch-amber)
   Boss：发散之焰 · 焰红 var(--ch-boss) / 焰橙 #F97316
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   训练崩溃：赤红 var(--ch-boss)
   梯度裂痕：暗红 #DC2626
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：琥珀 ---------- */
:root, :root[data-theme="light"] {
  --accent: #D97706;
  --accent-ink: #B45309;
  --accent-soft: rgba(245, 158, 11, 0.12);
  --glass-line: rgba(245, 158, 11, 0.22);
  --glow: 0 0 18px rgba(245, 158, 11, 0.28);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #F59E0B;
  --accent-ink: var(--ch-epiphany);
  --accent-soft: rgba(245, 158, 11, 0.16);
  --glass-line: rgba(245, 158, 11, 0.22);
  --glow: 0 0 22px rgba(245, 158, 11, 0.34);
  --on-accent: #1A0F00;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #F97316;          /* 发散之焰 · 焰橙 */
  --ch-boss-ink: #FB923C;      /* 焰亮橙 */
  --ch-boss-soft: rgba(249, 115, 22, 0.20);
  --ch-boss-line: rgba(249, 115, 22, 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-amber: var(--ch-amber);         /* 反向传功琥珀 */
  --ch-amber-soft: rgba(245, 158, 11, 0.14);
  --ch-amber-ink: #D97706;
  /* 三条贯穿机制色 */
  --flame-debt: var(--ch-boss);       /* 焰账赤红光页 */
  --flame-debt-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: var(--ch-amber);       /* 排除刻痕琥珀微光 */
  --carve-soft: rgba(245, 158, 11, 0.14);
  --grad-rift: #DC2626;        /* 梯度裂痕暗红 */
  --grad-rift-soft: rgba(220, 38, 38, 0.14);
  --wound-crack: #F87171;      /* 晶核裂痕红 */
  /* 训练阶段功能色 */
  --stage-forward: var(--ch-epiphany);    /* 前向流金 */
  --stage-reverse: #6366F1;    /* 反向流靛蓝 */
  --stage-loss: #10B981;       /* loss 正常绿 */
  --stage-nan: var(--ch-boss);        /* NaN 红 */
  --stage-warmup: #38BDF8;     /* warmup 天蓝 */
  /* 优化器六器色 */
  --opt-sgd: #94A3B8;          /* SGD 灰 */
  --opt-momentum: #3B82F6;     /* Momentum 蓝 */
  --opt-adagrad: #A78BFA;      /* AdaGrad 紫 */
  --opt-rmsprop: #10B981;      /* RMSProp 绿 */
  --opt-adam: var(--ch-amber);         /* Adam 琥珀 */
  --opt-adamw: var(--ch-epiphany);        /* AdamW 亮金 */
  /* 调度策略色 */
  --sched-step: #38BDF8;       /* StepLR 天蓝 */
  --sched-cosine: #10B981;     /* Cosine 翠 */
  --sched-warmcos: var(--ch-amber);    /* Warmup+Cosine 琥珀 */
  /* 正则化四防线色 */
  --reg-l2: var(--ch-amber);           /* L2 琥珀锁链 */
  --reg-dropout: #A78BFA;      /* Dropout 紫 */
  --reg-augment: #10B981;      /* 数据增强翠 */
  --reg-earlystop: var(--ch-boss);    /* 早停红 */
  /* 精度色 */
  --prec-fp32: #10B981;        /* FP32 绿 */
  --prec-fp16: var(--ch-epiphany);        /* FP16 金 */
  --prec-bf16: #818CF8;        /* BF16 靛紫 */
  /* 曲线诊断色 */
  --curve-train: #10B981;      /* train 绿 */
  --curve-val: var(--ch-boss);        /* val 红 */
  --curve-nan: #DC2626;        /* NaN 暗红 */
  /* S9 Boss */
  --flame-face: #F97316;       /* 焰脸橙 */
  --flame-core: var(--ch-epiphany);       /* 焰心金 */
  --answer-correct: var(--ch-amber);   /* 正解琥珀光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #475569;/* 被刻痕划去选项灰 */
  --net-gold: var(--ch-epiphany);         /* 收网金光 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  /* 选项/状态色 */
  --opt-correct: #10B981;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #475569;
  --ch-ok: #10B981;
  --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);
}
/* 发散之焰对话框变体 */
.dlg.boss {
  border-left-color: var(--ch-boss);
  box-shadow: var(--shadow), 0 0 18px var(--ch-boss-soft);
}
.dlg.boss .who {
  background: var(--ch-boss); color: #1A0500;
}
.dlg.boss .avatar {
  border-color: var(--ch-boss);
}

/* ---------- 开场（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, #1A0F00 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-amber-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-amber-ink); }
#carve-list p { font-size: 0.8rem; color: var(--ch-amber); 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); }

/* ---------- 通用 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; }
.knob-select {
  padding: 4px 8px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--text-1); font-family: var(--font-mono); font-size: 0.82rem;
  cursor: pointer;
}
.knob-select:focus { border-color: var(--accent); outline: none; }
.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);
}

/* ============================================================
   S0 计算图搭建器
   ============================================================ */
.cmp-compute-graph { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.cg-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.cg-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); }
.cg-node-tray {
  display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.cg-node-chip {
  padding: 6px 12px; border: 1px solid var(--accent); border-radius: var(--r-xs);
  background: var(--accent-soft); font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); font-weight: 600;
}
.cg-node-chip:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.cg-node-chip.placed { opacity: 0.4; cursor: default; transform: none; }
.cg-node-chip .nc-desc { font-size: 0.65rem; color: var(--text-3); font-weight: 400; display: block; }
.cg-controls {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: center;
}
.cg-lr {
  display: flex; align-items: center; gap: var(--sp-1); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2);
}
.cg-lr b { color: var(--accent-ink); min-width: 60px; display: inline-block; }
.cg-readout {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--stage-forward); border-radius: var(--r-sm);
  background: rgba(251,191,36,0.06); font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.cg-readout .step { margin: var(--sp-1) 0; }
.cg-readout .step b { color: var(--stage-forward); }
.flame-account {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-boss-line);
  border-radius: var(--r-sm); background: var(--ch-boss-soft);
  font-size: 0.82rem; color: var(--text-2); font-style: italic;
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.flame-account .acct-line { margin: var(--sp-1) 0; }
.flame-account .acct-line b { color: var(--ch-boss-ink); font-style: normal; }

/* ============================================================
   S1 自动微分模式对比器
   ============================================================ */
.cmp-autodiff { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.ad-mode-toggle, .sb-strategy-toggle, .hs-strategy-toggle, .hp-toggle, .dt-strategy-toggle, .de-pattern-toggle {
  display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap;
}
.ad-mode-toggle .btn, .sb-strategy-toggle .btn, .hs-strategy-toggle .btn, .hp-toggle .btn, .dt-strategy-toggle .btn, .de-pattern-toggle .btn {
  padding: 4px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.82rem; cursor: pointer; color: var(--text-2);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.ad-mode-toggle .btn:hover, .sb-strategy-toggle .btn:hover, .hs-strategy-toggle .btn:hover, .hp-toggle .btn:hover, .dt-strategy-toggle .btn:hover, .de-pattern-toggle .btn:hover { border-color: var(--accent); }
.ad-mode-toggle .btn.active, .sb-strategy-toggle .btn.active, .hs-strategy-toggle .btn.active, .hp-toggle .btn.active, .dt-strategy-toggle .btn.active, .de-pattern-toggle .btn.active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow);
}
.ad-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.ad-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); }
.ad-stats { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.ad-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); min-width: 100px;
}
.ad-stat .as-label { font-size: 0.68rem; color: var(--text-3); font-family: var(--font-mono); }
.ad-stat .as-val { font-size: 1rem; color: var(--accent-ink); font-family: var(--font-mono); font-weight: 600; }
.ad-stat.warn .as-val { color: var(--ch-warn); }
.ad-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.ad-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.ad-compare h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.ad-compare .cmp-line { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); margin: var(--sp-1) 0; }
.ad-compare .cmp-line b { color: var(--accent-ink); }

/* ============================================================
   S2 链式法则推导天梯
   ============================================================ */
.cmp-chain-ladder { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.cl-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.cl-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); }
.cl-steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.cl-step {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.cl-step.active { border-color: var(--accent); box-shadow: var(--glow); }
.cl-step.done { border-color: var(--ch-ok); background: rgba(16,185,129,0.06); }
.cl-step.cracked { border-color: var(--ch-warn); background: rgba(239,68,68,0.08); }
.cl-step .cs-title { font-size: 0.82rem; color: var(--text-1); font-weight: 600; margin-bottom: var(--sp-1); }
.cl-step .cs-slot {
  display: inline-block; min-width: 120px; padding: var(--sp-1) var(--sp-2); margin: 2px;
  border: 1px dashed var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev);
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-ink); min-height: 28px;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.cl-step .cs-slot.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.cl-step .cs-slot.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.cl-fragments { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.cl-frag {
  padding: 4px 10px; 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-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.cl-frag:hover { border-color: var(--accent); transform: translateY(-2px); }
.cl-frag.placed { opacity: 0.4; cursor: default; transform: none; }
.grad-ledger {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--stage-reverse); border-radius: var(--r-sm);
  background: rgba(99,102,241,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.grad-ledger h4 { font-size: 0.85rem; color: var(--stage-reverse); margin-bottom: var(--sp-2); }
.ledger-bars { display: flex; gap: var(--sp-1); align-items: flex-end; height: 80px; padding: var(--sp-1); }
.ledger-bar {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ledger-bar .lb-fill {
  width: 100%; background: linear-gradient(180deg, var(--stage-reverse), rgba(99,102,241,0.4));
  border-radius: 3px 3px 0 0; transition: height 500ms cubic-bezier(0.22,1,0.36,1); min-height: 4px;
}
.ledger-bar .lb-label { font-size: 0.62rem; color: var(--text-3); font-family: var(--font-mono); }

/* ============================================================
   S3 六器争锋
   ============================================================ */
.cmp-optimizer-arena { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.oa-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.oa-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); }
.oa-opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.oa-opt-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); opacity: 0.7;
}
.oa-opt-card:hover { opacity: 1; transform: translateY(-2px); }
.oa-opt-card.released { opacity: 1; box-shadow: var(--glow); }
.oa-opt-card[data-opt="sgd"] { border-left: 3px solid var(--opt-sgd); }
.oa-opt-card[data-opt="momentum"] { border-left: 3px solid var(--opt-momentum); }
.oa-opt-card[data-opt="adagrad"] { border-left: 3px solid var(--opt-adagrad); }
.oa-opt-card[data-opt="rmsprop"] { border-left: 3px solid var(--opt-rmsprop); }
.oa-opt-card[data-opt="adam"] { border-left: 3px solid var(--opt-adam); }
.oa-opt-card[data-opt="adamw"] { border-left: 3px solid var(--opt-adamw); }
.oa-opt-card .oc-name { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--text-1); }
.oa-opt-card .oc-desc { font-size: 0.65rem; color: var(--text-3); margin-top: 2px; }
.oa-bias-toggle { text-align: center; font-size: 0.82rem; color: var(--text-2); }
.oa-bias-toggle input { accent-color: var(--accent); margin-right: 4px; }
.oa-trace-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.oa-trace-compare h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.oa-trace-compare .trace-line { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); margin: var(--sp-1) 0; padding-left: var(--sp-2); border-left: 2px solid var(--glass-line); }

/* ============================================================
   S4 训练崩溃模拟器
   ============================================================ */
.cmp-training-crash { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.tc-controls {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: center;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.tc-controls label { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); display: flex; align-items: center; gap: var(--sp-1); }
.tc-controls label b { color: var(--accent-ink); min-width: 50px; display: inline-block; }
.tc-canvas-zone, .tc-core-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.tc-canvas-zone canvas, .tc-core-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.tc-core-zone canvas { max-width: 160px; }
.tc-core-zone { max-width: 200px; margin: 0 auto; }
.tc-scan {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.tc-scan h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.scan-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); }
.scan-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.72rem; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.scan-cell.stable { border-color: var(--ch-ok); background: rgba(16,185,129,0.10); color: var(--ch-ok); }
.scan-cell.slow { border-color: var(--sched-warmup); background: rgba(56,189,248,0.10); color: var(--sched-warmup); }
.scan-cell.crash { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.scan-cell .sc-lr { font-weight: 600; display: block; }
.scan-cell .sc-result { font-size: 0.65rem; margin-top: 2px; }

/* ============================================================
   S5 调度钟楼
   ============================================================ */
.cmp-scheduler-bell { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.sb-canvas-zone {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-2);
}
.sb-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); }
.sb-clip {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: center;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.sb-clip label { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); display: flex; align-items: center; gap: var(--sp-1); }
.sb-clip label b { color: var(--accent-ink); min-width: 40px; display: inline-block; }
.sb-combo {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-ok); border-radius: var(--r-sm);
  background: rgba(16,185,129,0.08); text-align: center; animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.sb-combo .combo-text { font-size: 0.85rem; color: var(--ch-ok); }

/* ============================================================
   S6 调参擂台
   ============================================================ */
.cmp-hypersearch { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.hs-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.hs-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); }
.hs-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.hs-compare h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); }
.compare-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.compare-cell.best { border-color: var(--ch-ok); background: rgba(16,185,129,0.10); }
.compare-cell .cc-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.compare-cell .cc-trials { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.compare-cell .cc-score { font-size: 0.82rem; color: var(--accent-ink); font-family: var(--font-mono); margin-top: 4px; }
.compare-cell.best .cc-score { color: var(--ch-ok); }
.hs-precision {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.hs-precision h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.hs-precision label { font-size: 0.82rem; color: var(--text-2); display: flex; align-items: center; gap: var(--sp-1); margin: var(--sp-1) 0; }
.hp-canvas-zone { margin-top: var(--sp-2); }
.hp-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); }
.hp-underflow {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.10); font-size: 0.8rem; color: var(--ch-warn); margin-top: var(--sp-2);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S7 正则化防线
   ============================================================ */
.cmp-regularization-wall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.rw-defense-panel {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.defense-card {
  padding: var(--sp-2); 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); opacity: 0.6;
}
.defense-card:hover { opacity: 1; transform: translateY(-2px); }
.defense-card.active { opacity: 1; box-shadow: var(--glow); }
.defense-card[data-def="l2"] { border-top: 3px solid var(--reg-l2); }
.defense-card[data-def="dropout"] { border-top: 3px solid var(--reg-dropout); }
.defense-card[data-def="augment"] { border-top: 3px solid var(--reg-augment); }
.defense-card[data-def="earlystop"] { border-top: 3px solid var(--reg-earlystop); }
.defense-card.active[data-def="l2"] { background: rgba(245,158,11,0.12); border-color: var(--reg-l2); }
.defense-card.active[data-def="dropout"] { background: rgba(167,139,250,0.12); border-color: var(--reg-dropout); }
.defense-card.active[data-def="augment"] { background: rgba(16,185,129,0.12); border-color: var(--reg-augment); }
.defense-card.active[data-def="earlystop"] { background: rgba(239,68,68,0.12); border-color: var(--reg-earlystop); }
.defense-card .dc-name { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--text-1); }
.defense-card .dc-desc { font-size: 0.65rem; color: var(--text-3); margin-top: 2px; }
.rw-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.rw-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); }
.rw-equiv {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.rw-equiv h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.equiv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.equiv-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center;
}
.equiv-cell.eq { border-color: var(--ch-ok); background: rgba(16,185,129,0.08); }
.equiv-cell.neq { border-color: var(--ch-warn); background: rgba(239,68,68,0.08); }
.equiv-cell .ec-opt { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.equiv-cell .ec-result { font-size: 0.72rem; color: var(--text-3); margin-top: 4px; }
.equiv-cell.eq .ec-result { color: var(--ch-ok); }
.equiv-cell.neq .ec-result { color: var(--ch-warn); }

/* ============================================================
   S8 诊断之眼
   ============================================================ */
.cmp-diagnosis-eye { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.de-pattern-toggle { flex-wrap: wrap; }
.de-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.de-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); }
.de-diagnose {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--accent-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.de-diagnose h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.diag-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.diag-option {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; font-size: 0.8rem; text-align: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.diag-option:hover { border-color: var(--accent); }
.diag-option.correct { border-color: var(--ch-ok); background: rgba(16,185,129,0.10); color: var(--ch-ok); }
.diag-option.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.diag-result { font-size: 0.82rem; color: var(--text-2); }
.de-transfer {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.de-transfer h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.de-transfer canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   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(--flame-debt);
  border-radius: var(--r-sm); background: var(--flame-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(--flame-debt); 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-amber-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-amber-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);
}
.flame-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-knowledge-map { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.cmp-knowledge-map canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.km-puzzle { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.km-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: 2px;
  opacity: 0.3;
}
.km-piece.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.km-piece .kp-name { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; color: var(--text-1); }
.km-piece .kp-tag { font-size: 0.6rem; color: var(--text-3); }
.km-depth { 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(245,158,11,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; }
  .cg-controls { flex-direction: column; align-items: stretch; }
  .oa-opt-grid { grid-template-columns: repeat(2, 1fr); }
  .tc-controls { flex-direction: column; align-items: stretch; }
  .scan-row { grid-template-columns: 1fr; }
  .compare-row { grid-template-columns: 1fr; }
  .rw-defense-panel { grid-template-columns: repeat(2, 1fr); }
  .equiv-grid { grid-template-columns: 1fr; }
  .diag-options { grid-template-columns: 1fr; }
  .km-puzzle { grid-template-columns: repeat(3, 1fr); }
  .knob-row { flex-direction: column; align-items: stretch; }
  .knob-unit { min-width: auto; }
  .sb-clip { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .exclude-mark, .flame-account, .cg-readout, .ad-compare, .grad-ledger, .oa-trace-compare,
  .tc-scan, .sb-combo, .hs-compare, .hp-underflow, .rw-equiv, .de-diagnose,
  .carve-emergence, .flame-collapse, .cl-step, .q-feedback, .scan-cell, .compare-cell { animation: none; }
  .cg-node-chip:hover, .cl-frag:hover, .oa-opt-card:hover, .defense-card:hover { transform: none; }
}