/* ============================================================
   ch03「破量子障」章节专属样式
   境界色：黛蓝 #2E5A88（脱离绿系——主题从「结构」跃入「能量与波」）
   对立色：拉普拉斯妖黄铜金 #B5A642 ｜ 理性/计算专用金 #D4A853（沿用）
   一切基础色值仍走 tokens 变量；以下仅做本章变量映射与组件样式。
   ============================================================ */

/* ---------- 本章变量映射（仅影响本页，不改 tokens.css） ---------- */
:root, :root[data-theme="light"] {
  --accent: #2E5A88;                     /* 黛蓝 · 点亮色 */
  --accent-ink: #2E5A88;                 /* 亮底文字级 */
  --accent-soft: rgba(46, 90, 136, 0.13);
  --glow: 0 0 18px rgba(46, 90, 136, 0.25);
  --lap: #B5A642;                        /* 拉普拉斯妖黄铜金 */
  --lap-ink: #7A6A1F;                    /* 黄铜·亮底文字级 */
  --lap-soft: rgba(181, 166, 66, 0.16);
  --calc: #D4A853;                       /* 理性/计算专用金 */
  --calc-ink: #8A6100;
  --calc-soft: rgba(212, 168, 83, 0.16);
  --color-correct: #1FA866;
  --color-insight: #8A6100;
}
:root[data-theme="dark"] {
  --accent: #2E5A88;
  --accent-ink: #7FA8E0;                 /* 黛蓝·暗底提亮（文字级） */
  --accent-soft: rgba(46, 90, 136, 0.28);
  --glow: 0 0 22px rgba(127, 168, 224, 0.35);
  --lap: #B5A642;
  --lap-ink: #D8C86A;                    /* 黄铜·暗底提亮 */
  --lap-soft: rgba(181, 166, 66, 0.18);
  --calc: #D4A853;
  --calc-ink: #D4A853;
  --calc-soft: rgba(212, 168, 83, 0.16);
  --color-correct: #2BC47E;
  --color-insight: #D4A853;
}
.op-title span {
  display: inline-block; opacity: 0;
  text-shadow: 0 0 60px var(--lap-soft), 0 0 24px var(--accent-soft);
}
/* ---------- 拉普拉斯妖对话框（黄铜对立色） ---------- */
.dlg.lap { border-left-color: var(--lap); box-shadow: var(--shadow), 0 0 18px var(--lap-soft); }
.dlg.lap .who { background: var(--lap-ink); color: #FDFAEC; }
.dlg.lap .avatar { border-color: var(--lap); }
:root[data-theme="dark"] .dlg.lap .who { color: #14110A; background: var(--lap-ink); }
/* ---------- 物品栏：本命石 / 命簿 / 观测之眼 ---------- */
#inventory {
  position: fixed; left: var(--sp-3); bottom: var(--sp-3); z-index: 110;
  display: flex; gap: var(--sp-2); align-items: flex-end;
}
.inv-scar {
  font-size: 0.6rem; color: var(--danger);
  border: 1px dashed var(--danger); border-radius: 999px; padding: 0 6px;
}
#inv-book b { color: var(--lap-ink); }
#inv-eye.inv-eye-off { opacity: 0.35; filter: grayscale(1); }
#book-panel {
  position: absolute; left: 0; bottom: 70px; width: min(78vw, 320px);
  padding: var(--sp-4); max-height: 50vh; overflow-y: auto;
}
#book-panel h3 { font-size: var(--fs-sub); margin-bottom: var(--sp-2); }
.ash-item {
  font-family: var(--font-serif);
  color: var(--lap-ink);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-2) 0;
  font-size: var(--fs-small);
  animation: carve-in 0.8s var(--ease-out);
}
.lattice-cv, .curve-cv {
  width: 100%; max-width: 680px; border-radius: var(--r-md);
  background: var(--bg-sunk); border: 1px solid var(--line);
  touch-action: none;
}
.concept-card {
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--accent-soft);
  display: flex; flex-direction: column; gap: 2px;
}
.concept-card b { color: var(--accent-ink); font-family: var(--font-serif); }
.concept-card span { font-size: var(--fs-small); color: var(--text-2); }
/* ---------- S0 算天阁 · 测量台 ---------- */
.measure-box {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; width: 100%;
}
.knob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .knob-grid { grid-template-columns: 1fr; } }
.knob {
  padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  background: transparent; color: var(--text-1); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.knob:hover { border-color: var(--accent); transform: translateY(-3px); }
.knob.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.measure-num {
  font-family: var(--font-mono); font-size: var(--fs-title); color: var(--accent-ink);
  text-shadow: 0 0 18px var(--accent-soft);
}
.ammeter {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  font-family: var(--font-mono);
}
.ammeter b { color: var(--calc-ink); }

/* ---------- S1 炼星炉 ---------- */
.s1-read { font-family: var(--font-mono); color: var(--calc-ink); }

/* ---------- S2 双缝影壁 · 波币 ---------- */
.wave-bills {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; width: 100%;
}
.wave-bills .bill {
  min-height: 44px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--lap); border-radius: 999px;
  background: var(--lap-soft); color: var(--lap-ink); cursor: pointer;
  font-family: var(--font-serif); transition: all var(--dur-fast);
}
.wave-bills .bill:hover { box-shadow: 0 0 16px var(--lap-soft); transform: translateY(-2px); }
.wave-bills .bill.on { background: var(--lap); color: #14110A; }

/* ---------- S4 断墙关 · 应用 ---------- */
.s4-apps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .s4-apps { grid-template-columns: 1fr; } }

/* ---------- S7 赛道司 · 材料行 ---------- */
.mat-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; width: 100%; }

/* ---------- S8 判官台 ---------- */
.s8-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
.s8-ctl { display: flex; align-items: center; gap: var(--sp-3); width: 100%; max-width: 560px; }
.s8-ctl input[type="range"] { flex: 1; }
.s8-lb { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-2); min-width: 4.5em; }
.s8-eq { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--calc-ink); }
.s8-eq b { color: var(--accent-ink); }
.s8-msg { font-size: var(--fs-small); color: var(--text-2); line-height: 1.8; max-width: 40rem; text-align: center; }
.s8-msg.ok { color: var(--color-correct); font-family: var(--font-serif); }
.s8-verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .s8-verdicts { grid-template-columns: 1fr; } }
.s8-v {
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 2px; text-align: center;
  opacity: 0.35; transition: all var(--dur-mid) var(--ease-out);
}
.s8-v.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.s8-v b { color: var(--accent-ink); font-family: var(--font-serif); }
.s8-v span { font-size: var(--fs-small); color: var(--text-2); font-family: var(--font-mono); }

/* ---------- S10 回旋听音 ---------- */
.s10-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
.s10-ctl { display: flex; align-items: center; gap: var(--sp-3); width: 100%; max-width: 620px; flex-wrap: wrap; justify-content: center; }
.s10-ctl input[type="range"] { flex: 1; min-width: 140px; }
.s10-lb { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-2); }
.s10-read { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--calc-ink); text-align: center; }
.s10-msg { font-size: var(--fs-small); color: var(--text-2); line-height: 1.8; max-width: 40rem; text-align: center; }
.s10-progress { font-family: var(--font-mono); color: var(--accent-ink); font-size: var(--fs-sub); }

/* ---------- 知识图谱（沿用 ch02 S10 模式） ---------- */
.graph-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; max-width: 40rem; }
/* ---------- 烧页演出 ---------- */
.stage.collapse { animation: collapseDim 1.2s var(--ease-out); }
.page-burn { animation: pageBurn 1s var(--ease-out); }
@keyframes pageBurn {
  0% { filter: brightness(1) sepia(0); }
  45% { filter: brightness(1.6) sepia(0.8) hue-rotate(-18deg); }
  100% { filter: brightness(1) sepia(0); }
}

/* ============================================================
   规格书对齐组件样式（ch03-S0/S1/S4/S6）
   曲线色按规格书：经典红 / 量子翠绿 / 实验金 / 概率金 / 能级青蓝
   ============================================================ */
:root, :root[data-theme="light"] {
  --curve-classical: #EF4444;
  --curve-quantum: #10B981;
  --curve-experimental: #F59E0B;
  --curve-well-psi: #10B981;
  --curve-prob: #F59E0B;
  --curve-energy: #0891B2;
  --level-atomic: #6366F1;
  --level-bonding: #10B981;
  --level-antibonding: #EF4444;
  --band-valence: #0891B2;
  --band-conduction: #F59E0B;
  --band-gap: #1E293B;
}
:root[data-theme="dark"] {
  --curve-classical: #F87171;
  --curve-quantum: #34D399;
  --curve-experimental: #FBBF24;
  --curve-well-psi: #34D399;
  --curve-prob: #FBBF24;
  --curve-energy: #22D3EE;
  --level-atomic: #818CF8;
  --level-bonding: #34D399;
  --level-antibonding: #F87171;
  --band-valence: #22D3EE;
  --band-conduction: #FBBF24;
}

/* ---------- 通用公式面板 ---------- */
.formula-panel { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; width: 100%; }
.formula-panel .formula-block {
  padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--accent-soft); font-size: var(--fs-small); min-width: 160px; text-align: center;
}
.formula-panel .formula-block.hl-classical { border-color: var(--curve-classical); background: rgba(239,68,68,.08); }
.formula-panel .formula-block.hl-quantum { border-color: var(--curve-quantum); background: rgba(16,185,129,.08); }

/* ---------- S0 经典崩塌预测挑战器 ---------- */
.cmp-classical-collapse .predict-options {
  display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; max-width: 460px;
}
.cmp-classical-collapse .option {
  padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer; text-align: left;
  font-family: var(--font-serif); transition: all var(--dur-fast) var(--ease-out);
}
.cmp-classical-collapse .option:hover { border-color: var(--accent); transform: translateX(4px); }
.cmp-classical-collapse .option.on {
  border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow);
}
.cmp-classical-collapse .option.on::before { content: '▸ '; color: var(--accent); }

/* ---------- S1 黑体辐射曲线追踪器增强 ---------- */
.cmp-blackbody-tracker .model-toggle { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.cmp-blackbody-tracker .model-toggle .btn { font-size: var(--fs-small); }
.cmp-blackbody-tracker .model-toggle .btn.on {
  border-style: solid; opacity: 1; background: var(--accent-soft); border-color: var(--accent);
}
.cmp-blackbody-tracker .wl-brush { display: flex; align-items: center; gap: var(--sp-3); width: 100%; max-width: 460px; }
.cmp-blackbody-tracker .wl-brush input[type="range"] { flex: 1; }
.cmp-blackbody-tracker .wl-brush .readout { min-width: 7em; text-align: right; }

/* ---------- S4 势阱波形三旋钮实验台 ---------- */
.cmp-potential-well-bench .knob select {
  padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: transparent; color: var(--text-1); font-family: var(--font-mono);
}

/* ---------- S6 能带形成联动器 ---------- */
.cmp-band-formation-linker .band-stops {
  display: flex; justify-content: space-between; width: 100%; max-width: 460px;
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-3);
  padding: 0 4px; margin-top: calc(var(--sp-1) * -1);
}
.cmp-band-formation-linker .band-stops span {
  padding: 2px 10px; border-radius: var(--r-sm); transition: all var(--dur-fast) var(--ease-out);
}
.cmp-band-formation-linker .band-stops span.on {
  color: var(--accent-ink); background: var(--accent-soft); font-weight: 600;
}
.cmp-band-formation-linker .material-info { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; width: 100%; }
.cmp-band-formation-linker .mat-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: transparent; color: var(--text-2); cursor: pointer; font-size: var(--fs-small);
  font-family: var(--font-mono); transition: all var(--dur-fast) var(--ease-out);
}
.cmp-band-formation-linker .mat-card:hover { border-color: var(--accent); color: var(--text-1); }
.cmp-band-formation-linker .mat-card.on {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .stage.collapse, .page-burn { animation: none; }
}