/* ============================================================
   ch08「CPU数据通路与控制」章节专属样式
   境界：筑基二层·通路驭令 · 深蓝 #3B82F6（--realm-2 系，与 ch07 同筑基色系）
   Boss：冒险之影 · 深紫 #7C3AED（数据/控制/结构冒险）
   顿悟：金 var(--ch-epiphany)（通路点亮、认知贯通）
   全部色值走 tokens 变量；类名体系与 ch01-ch07 对齐。
   禁止纯黑背景；发光仅限边框/背景，不出现在文字区。
   ============================================================ */

/* ---------- 章节境界色覆写：深蓝筑基（同 ch07） ---------- */
:root, :root[data-theme="light"] {
  --accent: #3B82F6;
  --accent-ink: #2563EB;
  --accent-soft: rgba(59, 130, 246, 0.10);
  --glass-line: rgba(59, 130, 246, 0.20);
  --glow: 0 0 18px rgba(59, 130, 246, 0.26);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #60A5FA;
  --accent-ink: #3B82F6;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --glass-line: rgba(59, 130, 246, 0.18);
  --glow: 0 0 22px rgba(59, 130, 246, 0.34);
  --on-accent: #04120F;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #7C3AED;          /* 冒险之影 · 深紫 */
  --ch-boss-ink: #6D28D9;
  --ch-boss-soft: rgba(124, 58, 237, 0.14);
  --ch-boss-line: rgba(124, 58, 237, 0.30);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟金 */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  /* 数据通路模块色（与 ch07 模块色对齐） */
  --ch-mod-pc: var(--ch-amber);        /* PC · 琥珀 */
  --ch-mod-imem: #0EA5E9;      /* 指令存储器 · 天蓝 */
  --ch-mod-reg: #10B981;       /* 寄存器堆 · 翠绿 */
  --ch-mod-alu: var(--ch-boss);       /* ALU · 红 */
  --ch-mod-dmem: #8B5CF6;      /* 数据存储器 · 紫 */
  /* 状态色 */
  --ch-ok: #22C55E;            /* 成功 */
  --ch-warn: var(--ch-boss);          /* 警示 / 违例 */
  --ch-dontcare: var(--ch-amber);      /* don't care */
  --ch-rtl: #0EA5E9;           /* RTL 文本色 */
}
/* ---------- 导师 / Boss 对话框变体 ---------- */
/* 诺依曼老祖：筑基深蓝条 + 蓝名字牌 */
.dlg.neumann {
  border-left-color: var(--accent);
  box-shadow: var(--shadow), 0 0 18px var(--accent-soft);
}
/* 冒险之影：深紫条 + 紫名字牌 + 斜体 */
.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: #FFFFFF; }
.inv-scar {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--ch-boss);
  background: var(--ch-boss-soft); padding: 0 4px; border-radius: 3px;
}
#carve-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 260px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-boss); }
/* ============================================================
   S0 数据通路搭建器
   ============================================================ */
.datapath-builder {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-3);
}
.module-palette {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
  padding: var(--sp-2);
  border: 1px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.module-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 72px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.75rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
  user-select: none;
}
.module-card:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.module-card[data-mod="pc"] { border-color: var(--ch-mod-pc); color: var(--ch-mod-pc); }
.module-card[data-mod="imem"] { border-color: var(--ch-mod-imem); color: var(--ch-mod-imem); }
.module-card[data-mod="reg"] { border-color: var(--ch-mod-reg); color: var(--ch-mod-reg); }
.module-card[data-mod="alu"] { border-color: var(--ch-mod-alu); color: var(--ch-mod-alu); }
.module-card[data-mod="dmem"] { border-color: var(--ch-mod-dmem); color: var(--ch-mod-dmem); }
.module-card.placed { opacity: 0.4; cursor: default; }
.module-card.active { box-shadow: var(--glow); transform: scale(1.05); }
.datapath-canvas {
  width: 100%; min-height: 240px;
  border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); padding: var(--sp-2);
}
.datapath-canvas svg { width: 100%; height: auto; }
.rtl-area {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.rtl-hint { color: var(--ch-rtl); font-size: 0.8rem; }
.rtl-input-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.rtl-input {
  flex: 1; min-width: 200px; min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); color: var(--text-1);
  font-family: var(--font-mono); font-size: 0.9rem;
  transition: border-color 200ms cubic-bezier(0.22,1,0.36,1);
}
.rtl-input:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); }
.rtl-input:disabled { opacity: 0.5; }

/* ============================================================
   S1 ALU 控制与寄存器
   ============================================================ */
.alu-control-row {
  width: 100%; display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-start;
}
.alu-dip-switch {
  flex: 1; min-width: 240px;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.dip-row { display: flex; gap: var(--sp-2); justify-content: center; }
.dip-switch {
  width: 48px; height: 64px; position: relative;
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 4px;
}
.dip-switch::before {
  content: ''; width: 28px; height: 28px; border-radius: 3px;
  background: var(--text-3);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.dip-switch .dip-val { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); }
.dip-switch.on { border-color: var(--ch-mod-alu); }
.dip-switch.on::before { background: var(--ch-mod-alu); transform: translateY(-10px); box-shadow: 0 0 12px rgba(239,68,68,0.5); }
.dip-switch.on .dip-val { color: var(--ch-mod-alu); }
.dip-switch:hover { border-color: var(--accent); }
.reg-display {
  flex: 1; min-width: 200px;
  padding: var(--sp-3); border: 1px solid var(--ch-mod-reg);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.reg-display .reg-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.reg-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.6rem;
  border: 1px solid var(--glass-line); border-radius: 2px;
  background: var(--bg-elev); color: var(--text-2);
  transition: all 150ms cubic-bezier(0.22,1,0.36,1);
}
.reg-cell.read { border-color: var(--ch-mod-reg); color: var(--ch-mod-reg); box-shadow: 0 0 8px rgba(16,185,129,0.3); }
.reg-cell.written { border-color: var(--ch-mod-alu); color: var(--ch-mod-alu); background: rgba(239,68,68,0.08); }
.data-flow-row {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.data-inputs { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex: 1; }
.data-input {
  width: 80px; min-height: 40px; 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.8rem; text-align: center;
  transition: border-color 200ms cubic-bezier(0.22,1,0.36,1);
}
.data-input:focus { border-color: var(--accent); outline: none; }
.data-input.lit { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.clock-row {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3); 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);
}
.clock-row .btn { min-width: 140px; }
.clock-row .btn.pulse { animation: clkPulse 400ms cubic-bezier(0.22,1,0.36,1); }
@keyframes clkPulse {
  0% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50% { box-shadow: var(--glow); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
   S2 单周期关键路径
   ============================================================ */
.datapath-stage {
  width: 100%; padding: var(--sp-3);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.dp-modules {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.dp-module {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  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.7rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.dp-module[data-mod="pc"] { border-color: var(--ch-mod-pc); color: var(--ch-mod-pc); }
.dp-module[data-mod="imem"] { border-color: var(--ch-mod-imem); color: var(--ch-mod-imem); }
.dp-module[data-mod="reg"] { border-color: var(--ch-mod-reg); color: var(--ch-mod-reg); }
.dp-module[data-mod="alu"] { border-color: var(--ch-mod-alu); color: var(--ch-mod-alu); }
.dp-module[data-mod="dmem"] { border-color: var(--ch-mod-dmem); color: var(--ch-mod-dmem); }
.dp-module.lit { box-shadow: var(--glow); transform: scale(1.05); }
.dp-module .mod-delay { font-size: 0.6rem; color: var(--text-3); }
.datapath-stage svg { width: 100%; height: auto; }
.delay-chart-area {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.delay-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.delay-bar { display: flex; align-items: center; gap: var(--sp-2); }
.delay-bar .bar-label {
  min-width: 60px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2);
}
.delay-bar .bar-track {
  flex: 1; height: 24px; background: var(--bg-elev); border-radius: var(--r-xs);
  border: 1px solid var(--glass-line); overflow: hidden; position: relative;
}
.delay-bar .bar-fill {
  height: 100%; border-radius: var(--r-xs);
  transition: width 600ms cubic-bezier(0.22,1,0.36,1);
}
.delay-bar[data-instr="lw"] .bar-fill { background: var(--ch-warn); }
.delay-bar[data-instr="sw"] .bar-fill { background: var(--ch-mod-alu); }
.delay-bar[data-instr="add"] .bar-fill { background: var(--accent); }
.delay-bar[data-instr="beq"] .bar-fill { background: var(--ch-mod-reg); }
.delay-bar .bar-val {
  min-width: 56px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-ink);
}
.delay-bar.violation .bar-fill { box-shadow: 0 0 8px rgba(239,68,68,0.5); }
.clock-slider-row {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2);
}
.clock-slider-row input[type="range"] { flex: 1; min-width: 200px; }
.violation-panel {
  width: 100%; padding: var(--sp-3);
  border: 1px solid var(--ch-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.10); color: var(--ch-warn);
  font-family: var(--font-mono); font-size: 0.85rem;
  animation: shake 300ms cubic-bezier(0.22,1,0.36,1);
}
.violation-panel.ok { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.perf-formula-box {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--accent);
  border-radius: var(--r-sm); background: var(--accent-soft);
  font-family: var(--font-mono); font-size: 0.9rem; text-align: center;
}

/* ============================================================
   S3 指令追踪
   ============================================================ */
.instr-selector {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
}
.instr-option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.85rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.instr-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.instr-option.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: var(--glow);
}
.dp-trace-area {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.dp-trace-area svg { width: 100%; height: auto; }
.ctrl-signal-table {
  width: 100%; overflow-x: auto;
  border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.ctrl-signal-table table {
  width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.75rem;
}
.ctrl-signal-table th, .ctrl-signal-table td {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); text-align: center;
}
.ctrl-signal-table th { background: var(--bg-elev); color: var(--accent-ink); }
.ctrl-signal-table td.sig-on { color: var(--ch-ok); font-weight: 600; }
.ctrl-signal-table td.sig-off { color: var(--text-3); }
.ctrl-signal-table td.sig-x { color: var(--ch-dontcare); }

/* ============================================================
   S4 控制真值表
   ============================================================ */
.truth-table-area {
  width: 100%; overflow-x: auto;
  border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.ctrl-tt {
  width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.75rem;
}
.ctrl-tt th, .ctrl-tt td {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); text-align: center;
  min-width: 40px;
}
.ctrl-tt th { background: var(--bg-elev); color: var(--accent-ink); font-weight: 600; }
.ctrl-tt th.instr-col { background: var(--accent-soft); color: var(--accent); }
.ctrl-tt td.instr-name { text-align: left; font-weight: 600; color: var(--accent-ink); }
.ctrl-tt td.v1 { color: var(--ch-ok); font-weight: 600; }
.ctrl-tt td.v0 { color: var(--text-3); }
.ctrl-tt td.vx { color: var(--ch-dontcare); }
.ctrl-tt tr:hover td { background: var(--accent-soft); }
.expr-derive-area {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
}
.expr-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.expr-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev);
  font-family: var(--font-mono); font-size: 0.85rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.expr-card .expr-name { color: var(--accent-ink); font-weight: 600; margin-right: var(--sp-2); }
.expr-card .expr-body { color: var(--text-1); }
.expr-card.correct { border-color: var(--ch-ok); background: rgba(34,197,94,0.08); }
.expr-card.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.08); }

/* ============================================================
   S5 微码迷宫
   ============================================================ */
.micro-editor {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.micro-row {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.8rem;
}
.micro-row .micro-label { min-width: 80px; color: var(--text-2); }
.micro-row .micro-bits { display: flex; gap: 2px; }
.micro-bit {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-line); border-radius: 2px; background: var(--bg-elev);
  cursor: pointer; font-size: 0.7rem; color: var(--text-3);
  transition: all 150ms cubic-bezier(0.22,1,0.36,1);
}
.micro-bit.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.micro-bit:hover { border-color: var(--accent); }
.rom-display {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-mod-dmem);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.rom-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.rom-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.6rem;
  border: 1px solid var(--glass-line); border-radius: 2px; background: var(--bg-elev);
  color: var(--text-3); transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.rom-cell.filled { background: var(--ch-mod-dmem); color: #FFFFFF; border-color: var(--ch-mod-dmem); }
.rom-cell.current { box-shadow: var(--glow); transform: scale(1.1); }
.delay-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.delay-bars-compare { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.delay-bars-compare .delay-bar .bar-fill { transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.delay-bars-compare .delay-bar[data-type="hard"] .bar-fill { background: var(--accent); }
.delay-bars-compare .delay-bar[data-type="micro"] .bar-fill { background: var(--ch-mod-dmem); }

/* ============================================================
   S6 权衡天平
   ============================================================ */
.balance-scale {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.balance-scale svg { width: 100%; height: auto; max-height: 240px; }
.scenario-match {
  width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2);
}
.scenario-card {
  padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev);
  font-size: 0.85rem; min-height: 60px;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.scenario-card h5 { font-size: 0.85rem; margin-bottom: var(--sp-1); }
.scenario-card[data-arch="risc"] h5 { color: var(--accent); }
.scenario-card[data-arch="cisc"] h5 { color: var(--ch-mod-dmem); }
.scenario-card.matched { border-style: solid; border-color: var(--ch-ok); background: rgba(34,197,94,0.08); }
.scenario-card.wrong { border-color: var(--ch-warn); animation: shake 300ms; }
.scheme-pool { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }
.scheme-chip {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: 999px; background: var(--bg-sunk); cursor: pointer;
  font-size: 0.8rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.scheme-chip:hover { border-color: var(--accent); }
.scheme-chip.placed { opacity: 0.3; cursor: default; }

/* ============================================================
   S7 多周期动画器
   ============================================================ */
.multicycle-dp {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.multicycle-dp svg { width: 100%; height: auto; }
.fsm-area {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.fsm-area svg { width: 100%; height: auto; max-height: 180px; }
.cycle-timeline {
  width: 100%; display: flex; gap: 2px; flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.cycle-slot {
  flex: 1; min-width: 60px; 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.7rem;
  text-align: center; color: var(--text-3);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.cycle-slot.lit {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: var(--glow);
}
.cycle-slot[data-stage="IF"] { border-color: var(--ch-mod-imem); }
.cycle-slot[data-stage="ID"] { border-color: var(--ch-mod-reg); }
.cycle-slot[data-stage="EX"] { border-color: var(--ch-mod-alu); }
.cycle-slot[data-stage="MEM"] { border-color: var(--ch-mod-dmem); }
.cycle-slot[data-stage="WB"] { border-color: var(--ch-mod-pc); }
.cpi-display {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
  text-align: center; font-family: var(--font-mono);
}
.cpi-display .cpi-val { font-size: 1.4rem; color: var(--ch-epiphany-ink); font-weight: 700; }

/* ============================================================
   S8 CPU 性能公式
   ============================================================ */
.formula-assembly {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.formula-slots {
  display: flex; align-items: center; gap: var(--sp-2); justify-content: center; flex-wrap: wrap;
}
.formula-slot {
  min-width: 100px; min-height: 56px; padding: var(--sp-2);
  border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-3);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.formula-slot.filled {
  border-style: solid; border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft);
}
.formula-slot .op {
  min-width: 20px; text-align: center; font-weight: 700; color: var(--text-2);
  border: none; background: none; padding: 0;
}
.factor-boxes { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.factor-box {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev); cursor: grab;
  font-family: var(--font-mono); font-size: 0.8rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.factor-box:hover { border-color: var(--accent); box-shadow: var(--glow); }
.factor-box.placed { opacity: 0.3; cursor: default; }
.cpi-calc {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.mix-sliders { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.mix-row { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 0.8rem; }
.mix-row .mix-label { min-width: 60px; color: var(--text-2); }
.mix-row input[type="range"] { flex: 1; }
.mix-row .mix-val { min-width: 50px; text-align: right; color: var(--accent); }
.cpi-table {
  width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.8rem;
  margin-bottom: var(--sp-2);
}
.cpi-table th, .cpi-table td { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); text-align: center; }
.cpi-table th { background: var(--bg-elev); color: var(--accent-ink); }
.cpi-result {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
  text-align: center; font-family: var(--font-mono); font-size: 1rem; color: var(--ch-epiphany-ink);
}
.pipeline-diagram {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); overflow-x: auto;
}
.pipeline-grid {
  display: grid; gap: 2px; min-width: 480px;
  font-family: var(--font-mono); font-size: 0.7rem;
}
.pipeline-cell {
  padding: var(--sp-1); border: 1px solid var(--glass-line); border-radius: 2px;
  background: var(--bg-elev); text-align: center; color: var(--text-3);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.pipeline-cell.header { background: var(--bg-sunk); font-weight: 600; color: var(--accent-ink); }
.pipeline-cell[data-stage="IF"] { color: var(--ch-mod-imem); }
.pipeline-cell[data-stage="ID"] { color: var(--ch-mod-reg); }
.pipeline-cell[data-stage="EX"] { color: var(--ch-mod-alu); }
.pipeline-cell[data-stage="MEM"] { color: var(--ch-mod-dmem); }
.pipeline-cell[data-stage="WB"] { color: var(--ch-mod-pc); }
.pipeline-cell.active { background: var(--accent-soft); border-color: var(--accent); }
.perf-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.perf-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.perf-bar { display: flex; align-items: center; gap: var(--sp-2); }
.perf-bar .bar-label { min-width: 100px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); }
.perf-bar .bar-track {
  flex: 1; height: 28px; background: var(--bg-elev); border-radius: var(--r-xs);
  border: 1px solid var(--glass-line); overflow: hidden;
}
.perf-bar .bar-fill { height: 100%; border-radius: var(--r-xs); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.perf-bar[data-scheme="single"] .bar-fill { background: var(--ch-warn); }
.perf-bar[data-scheme="multi"] .bar-fill { background: var(--ch-mod-dmem); }
.perf-bar[data-scheme="pipe"] .bar-fill { background: var(--ch-ok); }
.perf-bar .bar-val { min-width: 70px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-ink); }

/* ============================================================
   S9 Boss 战 · 冒险之影
   ============================================================ */
#s9-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.q-progress-bar .q-dot.current { background: var(--accent); box-shadow: var(--glow); }
.q-panel .q-tag {
  display: inline-block; font-size: 0.7rem; font-family: var(--font-mono);
  color: var(--ch-boss); background: var(--ch-boss-soft); padding: 1px 8px;
  border-radius: 3px; margin-bottom: var(--sp-2); letter-spacing: 0.1em;
}
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); width: 100%; }
.option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--accent-soft); cursor: pointer; font-size: 0.85rem; text-align: left;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.option.wrong { border-color: var(--ch-boss); background: var(--ch-boss-soft); color: var(--ch-boss); }
.option.excluded { opacity: 0.3; cursor: default; transform: none; }
.break-marks-panel {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.break-marks-panel h4 { font-size: 0.85rem; color: var(--ch-boss); margin-bottom: var(--sp-2); }
.break-marks-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.break-item {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev);
  font-size: 0.75rem; color: var(--text-3); text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.break-item.lit {
  border-color: var(--ch-warn); color: var(--ch-warn);
  background: rgba(239,68,68,0.08);
  box-shadow: 0 0 8px rgba(239,68,68,0.2);
}

/* ============================================================
   S10 知识拼图
   ============================================================ */
.puzzle-area {
  width: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center;
  padding: var(--sp-3); border: 1px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); min-height: 80px;
}
.puzzle-piece {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev); cursor: grab;
  font-size: 0.8rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
  user-select: none;
}
.map-chain { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.map-node {
  padding: 2px 8px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  font-size: 0.75rem; background: var(--bg-elev); color: var(--text-3);
  opacity: 0.4; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.map-node .map-link { color: var(--text-3); margin: 0 2px; }
.realm-achieved {
  width: 100%; margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-md);
  background: var(--ch-epiphany-soft); text-align: center;
  animation: realmGlow 2s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--ch-epiphany-soft); }
  50% { box-shadow: 0 0 32px rgba(251,191,36,0.4); }
}
.realm-glow {
  font-family: var(--font-serif); font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--ch-epiphany-ink); letter-spacing: 0.3em; font-weight: 700;
}

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@media (max-width: 640px) {
  .op-title { font-size: clamp(2rem, 12vw, 3.5rem); }
  .op-sub { letter-spacing: 0.3em; }
  .dp-modules { grid-template-columns: repeat(2, 1fr); }
  .alu-control-row { flex-direction: column; }
  .alu-dip-switch, .reg-display { width: 100%; }
  .option-grid { grid-template-columns: 1fr; }
  .break-marks-list { grid-template-columns: repeat(2, 1fr); }
  .scenario-match { grid-template-columns: 1fr; }
  .formula-slots { flex-direction: column; gap: var(--sp-1); }
  .formula-slot { width: 100%; }
  .pipeline-grid { min-width: 320px; font-size: 0.6rem; }
  .clock-row { flex-direction: column; align-items: stretch; }
  .data-flow-row { flex-direction: column; align-items: flex-start; }
  .delay-bar .bar-label { min-width: 48px; font-size: 0.75rem; }
  .map-chain { flex-direction: column; align-items: flex-start; }
  .cycle-slot { min-width: 48px; font-size: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .clock-row .btn.pulse { animation: none; }
}