/* ============================================================
   ch03「时序逻辑电路：记忆的诞生」章节专属样式
   境界：炼气三层·记忆觉醒 · 翠绿 var(--accent)（--realm-5）
   Boss：亚稳态之影 · 紫灰 #8B7AB8（neither-0-nor-1 悬停）
   顿悟：金 var(--ch-epiphany)（记忆诞生、认知点亮）
   全部色值走 tokens 变量；类名体系与 ch01/ch02 对齐
   （.scene/.narr-box/.stage/.glass/.btn/.data-row/.bet-item 等）。
   本文件自包含：base.css 未覆盖的通用组件类在此补齐，
   并新增 ch03 专属组件（SR双环/D触发器边沿/寄存器列/
   计数器齿轮/移位寄存器/时钟树/约束方程/亚稳态示波器/
   MTBF曲线/两级同步器/复位策略/刻痕收网/状态图）。
   禁止纯黑背景；发光仅限边框/背景，不出现在文字区。
   ============================================================ */

/* ---------- 章节境界色覆写：翠绿炼气 ---------- */
:root, :root[data-theme="light"] {
  --accent: #10B981;
  --accent-ink: #059669;
  --accent-soft: rgba(16, 185, 129, 0.10);
  --glass-line: rgba(16, 185, 129, 0.20);
  --glow: 0 0 18px rgba(16, 185, 129, 0.26);
  --on-accent: #FFFFFF;
}
/* ---------- 章节专用叙事色（亚稳态之影/时钟/顿悟） ---------- */
:root {
  --ch-boss: var(--ch-boss);          /* 违例/非法态赤红 */
  --ch-boss-ink: #DC2626;
  --ch-boss-soft: rgba(239, 68, 68, 0.14);
  --ch-boss-line: rgba(239, 68, 68, 0.30);
  --ch-amber: var(--ch-amber);         /* 时钟金 / 关键路径琥珀 */
  --ch-amber-soft: rgba(245, 158, 11, 0.14);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟金（记忆诞生/认知点亮） */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-noise: #6B7280;         /* 噪声/高阻态灰 */
  --ch-noise-soft: rgba(107, 114, 128, 0.16);
  --ch-metastable: #8B7AB8;   /* 亚稳态之影紫灰 */
  --ch-metastable-soft: rgba(139, 122, 184, 0.20);
  --ch-metastable-glow: rgba(139, 122, 184, 0.40);
  --ch-clock: var(--ch-amber);         /* 时钟树金 */
  --ch-signal: #34D399;        /* 干净信号翠 */
  --ch-signal-soft: rgba(52, 211, 153, 0.16);
  --ch-bus: #6366F1;           /* 总线靛蓝 */
  --ch-bus-soft: rgba(99, 102, 241, 0.14);
}
/* ---------- 导师 / 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.shadow { border-left-color: var(--ch-metastable); box-shadow: var(--shadow), 0 0 18px var(--ch-metastable-soft); }
.dlg.shadow .who { background: var(--ch-metastable); color: #F3F0FA; }
.dlg.shadow .avatar { border-color: var(--ch-metastable); }
.dlg.shadow p { font-style: italic; color: var(--text-3); }

/* ---------- 物品栏（本命符 / 亚稳态账 / 排除刻痕） ---------- */
#inventory {
  position: fixed; left: var(--sp-3); bottom: var(--sp-3); z-index: 110;
  display: flex; gap: var(--sp-2); align-items: flex-end;
}
/* ---------- 场景通用 ---------- */
.narr { max-width: var(--content-w); }
.slider-row { display: flex; align-items: center; gap: var(--sp-4); width: 100%; flex-wrap: wrap; }
.slider-row input[type="range"] { flex: 1; min-width: 140px; }
/* 通用画布 */
.chain-cv, .curve-cv, .kmap-cv, .vtc-cv, .boss-cv, .osc-cv, .timing-cv, .mtbf-cv, .graph-cv, .sreg-cv, .counter-cv {
  width: 100%; max-width: 640px; border-radius: var(--r-md);
  background: var(--bg-sunk); border: 1px solid var(--line);
  touch-action: none;
}

/* ============================================================
   S0 序章 · 记忆之门（反直觉下注热区，复用 ch01 .bet-row）
   ============================================================ */
.bet-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.bet-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  width: 104px; min-height: 104px; padding: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.bet-item .ico { font-size: 1.8rem; filter: grayscale(1) brightness(0.7); transition: filter var(--dur-mid); }
.bet-item.lit .ico { filter: none; }
.bet-item:hover { border-color: var(--accent); }
.bet-item:active { transform: scale(0.95); }
.bet-item.lit { border-color: var(--accent); background: var(--accent-soft); }
.bet-item.faded { opacity: 0.78; }
.bet-item small { color: var(--text-2); font-size: 0.65rem; }
.bet-item .pulse-strip { font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent); letter-spacing: 0.1em; }
.bet-item.lit .pulse-strip { color: var(--ch-metastable); }

/* 四要素关系图（S0 补边） */
.relation-map {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--glass-line); border-radius: var(--r-md);
  background: var(--bg-sunk);
}
.relation-map svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }

/* ============================================================
   S1 双环之锁 · SR 锁存器非法态探索器
   ============================================================ */
.sr-stage { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.sr-board {
  position: relative; padding: var(--sp-5);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--bg-sunk); min-height: 200px;
}
.sr-board.illegal { border-color: var(--ch-boss); box-shadow: 0 0 24px var(--ch-boss-soft); animation: srShake 0.4s var(--ease-out); }
@keyframes srShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
.nor-gate {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-3) var(--sp-4); border: 2px solid var(--ch-noise); border-radius: var(--r-md);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: var(--fs-small);
  transition: all var(--dur-mid) var(--ease-out); position: relative;
}
.nor-gate.active { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.nor-gate.illegal { border-color: var(--ch-boss); color: var(--ch-boss); background: var(--ch-boss-soft); }
.nor-gate .gate-label { font-size: 0.65rem; color: var(--text-3); letter-spacing: 0.1em; }
.nor-gate .gate-out { font-size: 1.4rem; font-weight: 700; }
.cross-wire { height: 2px; background: var(--ch-signal); margin: var(--sp-2) 0; border-radius: 1px; transition: background var(--dur-mid); }
.cross-wire.illegal { background: var(--ch-boss); }
.sr-knobs { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }
.knob {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 80px; min-height: 80px; padding: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer;
  font-family: var(--font-mono); transition: all var(--dur-fast) var(--ease-out);
}
.knob:hover { border-color: var(--accent); transform: translateY(-2px); }
.knob.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: var(--glow); }
.knob .knob-val { font-size: 1.6rem; font-weight: 700; }
.knob .knob-label { font-size: 0.65rem; color: var(--text-3); letter-spacing: 0.1em; }
.sr-indicators { display: flex; gap: var(--sp-5); justify-content: center; }
.q-lamp {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); border-radius: 999px;
}
.q-lamp .lamp-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--ch-noise-soft); border: 2px solid var(--ch-noise); transition: all var(--dur-mid); }
.q-lamp.on .lamp-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 16px var(--accent-soft); }
.q-lamp.illegal .lamp-dot { background: var(--ch-boss); border-color: var(--ch-boss); box-shadow: 0 0 16px var(--ch-boss-soft); animation: lampBlink 0.5s var(--ease-out) 3; }
@keyframes lampBlink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.metastable-trail {
  position: absolute; inset: 0; pointer-events: none; border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 50%, var(--ch-metastable-soft), transparent 60%);
  opacity: 0; transition: opacity 0.2s var(--ease-out);
}
.metastable-trail.flash { opacity: 1; }
.sr-warning {
  margin-top: var(--sp-3); padding: var(--sp-3); border-left: 3px solid var(--ch-boss);
  background: var(--ch-boss-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-small); color: var(--ch-boss); display: none;
}
.sr-warning.show { display: block; animation: simIn 0.3s var(--ease-out); }

/* ============================================================
   S2 边沿之刃 · D 触发器（主从 + 边沿示波器 + Tsu/Th）
   ============================================================ */
.dff-stage { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.dff-master-slave {
  display: flex; align-items: center; gap: var(--sp-3); justify-content: center; flex-wrap: wrap;
  padding: var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-sunk);
}
.dff-latch-box {
  padding: var(--sp-3); border: 2px solid var(--ch-noise); border-radius: var(--r-md);
  text-align: center; font-family: var(--font-mono); font-size: var(--fs-small); min-width: 90px;
  transition: all var(--dur-mid); position: relative;
}
.dff-latch-box.master-active { border-color: var(--ch-amber); color: var(--ch-amber); box-shadow: 0 0 14px var(--ch-amber-soft); }
.dff-latch-box.slave-active { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.dff-latch-box .lb-name { font-size: 0.65rem; color: var(--text-3); letter-spacing: 0.1em; }
.dff-latch-box .lb-val { font-size: 1.6rem; font-weight: 700; }
.dff-arrow { font-size: 1.4rem; color: var(--text-3); }
.edge-flash {
  position: absolute; top: -8px; right: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ch-epiphany); box-shadow: 0 0 12px var(--ch-epiphany-soft);
  opacity: 0; transition: opacity 0.15s;
}
.edge-flash.fire { opacity: 1; }
.osc-cv { height: 240px; }
.tsu-th-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.tsu-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
}
.tsu-cell.violation { border-color: var(--ch-boss); background: var(--ch-boss-soft); }
.metastable-fog {
  margin-top: var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--ch-metastable); border-radius: var(--r-md);
  background: var(--ch-metastable-soft); color: var(--ch-metastable); font-size: var(--fs-small); display: none;
}
.metastable-fog.show { display: block; animation: simIn 0.4s var(--ease-out); }

/* ============================================================
   S3 记忆之墙 · 寄存器
   ============================================================ */
.register-wall {
  display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap;
  padding: var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-sunk);
}
.reg-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 56px; padding: var(--sp-2); border: 2px solid var(--ch-noise); border-radius: var(--r-sm);
  background: var(--bg-elev); transition: all var(--dur-mid) var(--ease-out);
}
.reg-cell.on { border-color: var(--accent); box-shadow: var(--glow); }
.reg-cell .rc-label { font-size: 0.6rem; color: var(--text-3); font-family: var(--font-mono); }
.reg-cell .rc-val { font-size: 1.4rem; font-weight: 700; color: var(--text-3); font-family: var(--font-mono); }
.reg-cell.on .rc-val { color: var(--accent); }
.reg-input-row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.bit-toggle {
  min-width: 44px; min-height: 44px; padding: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: transparent; color: var(--text-1); cursor: pointer; font-family: var(--font-mono); font-size: 1.1rem;
  transition: all var(--dur-fast);
}
.bit-toggle:hover { border-color: var(--accent); }
.bit-toggle.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   S4 自走之轮 · 计数器（异步/同步）
   ============================================================ */
.counter-types { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .counter-types { grid-template-columns: 1fr; } }
.counter-card {
  padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.counter-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.counter-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.counter-card.glitch { border-color: var(--ch-boss); background: var(--ch-boss-soft); }
.counter-card .cc-name { font-family: var(--font-serif); font-size: var(--fs-sub); }
.counter-card .cc-note { font-size: 0.7rem; color: var(--text-3); margin-top: 4px; }
.counter-cv { height: 180px; }
.gear-row { display: flex; gap: var(--sp-2); justify-content: center; align-items: center; }
.gear-node {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ch-noise);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700;
  transition: all var(--dur-mid);
}
.gear-node.on { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.gear-node.glitch { border-color: var(--ch-boss); color: var(--ch-boss); }

/* ============================================================
   S5 流水之渠 · 移位寄存器
   ============================================================ */
.shift-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); width: 100%; }
@media (max-width: 560px) { .shift-modes { grid-template-columns: 1fr; } }
.mode-btn {
  min-height: 44px; padding: var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-small);
  transition: all var(--dur-fast);
}
.mode-btn:hover { border-color: var(--accent); }
.mode-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sreg-cv { height: 200px; }
.shift-track { display: flex; gap: 4px; justify-content: center; padding: var(--sp-3); }
.shift-cell {
  width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700;
  background: var(--bg-elev); color: var(--text-3); transition: all var(--dur-mid);
}
.shift-cell.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.shift-cell.flow { animation: flowPulse 0.6s var(--ease-out); }
@keyframes flowPulse { 0%{transform:scale(1);} 50%{transform:scale(1.15);box-shadow:var(--glow);} 100%{transform:scale(1);} }

/* ============================================================
   S6/S7 时钟偏移 · 约束方程求解器
   ============================================================ */
.clock-tree-viz {
  padding: var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-sunk);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.clk-source-node {
  padding: var(--sp-2) var(--sp-4); border: 2px solid var(--ch-clock); border-radius: var(--r-md);
  color: var(--ch-clock); font-family: var(--font-mono); font-size: var(--fs-small);
}
.clk-branches { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }
.clk-branch {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 70px;
  transition: all var(--dur-mid);
}
.clk-branch.skewed { border-color: var(--ch-boss); box-shadow: 0 0 12px var(--ch-boss-soft); }
.clk-branch .cb-ff { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); }
.clk-branch .cb-delay { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ch-clock); }
.clk-branch.skewed .cb-delay { color: var(--ch-boss); }
.param-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .param-panel { grid-template-columns: 1fr; } }
.param-group { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.param-group .pg-label { font-size: 0.7rem; color: var(--text-3); font-family: var(--font-mono); }
.param-group .pg-value { font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-sub); }
.param-group input[type="range"] { width: 100%; }
.constraint-formula {
  padding: var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: var(--fs-small); text-align: center;
  transition: all var(--dur-mid);
}
.constraint-formula.met { border-color: var(--accent); box-shadow: var(--glow); }
.constraint-formula.violated { border-color: var(--ch-boss); background: var(--ch-boss-soft); }
.cf-expr { color: var(--text-1); margin-bottom: var(--sp-2); }
.cf-result { font-weight: 700; }
.constraint-formula.met .cf-result { color: var(--accent); }
.constraint-formula.violated .cf-result { color: var(--ch-boss); }
.timing-cv { height: 220px; }
.violation-warning {
  margin-top: var(--sp-3); padding: var(--sp-3); border-left: 3px solid var(--ch-boss);
  background: var(--ch-boss-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-small); color: var(--ch-boss); display: none;
}
.violation-warning.show { display: block; animation: simIn 0.3s var(--ease-out); }

/* ============================================================
   S8 亚稳态 MTBF 公式组装器
   ============================================================ */
.mas-workshop { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.formula-target {
  padding: var(--sp-4); border: 2px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-sunk); display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  flex-wrap: wrap; min-height: 60px; font-family: var(--font-mono); font-size: var(--fs-sub);
}
.formula-slot {
  min-width: 60px; min-height: 44px; padding: var(--sp-2); border: 1px dashed var(--text-3); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; color: var(--text-3); transition: all var(--dur-fast);
}
.formula-slot.filled { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.formula-pieces { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.formula-piece {
  min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: transparent; color: var(--text-1); cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-small);
  transition: all var(--dur-fast);
}
.formula-piece:hover { border-color: var(--accent); transform: translateY(-2px); }
.formula-piece.placed { opacity: 0.4; pointer-events: none; }
.formula-piece.wrong { border-color: var(--ch-boss); color: var(--ch-boss); animation: shake 0.3s var(--ease-out); }
.formula-feedback { font-size: var(--fs-small); text-align: center; min-height: 1.5em; }
.mtbf-cv { height: 220px; }
.shadow-foreshadow {
  margin-top: var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--ch-metastable); border-radius: var(--r-md);
  background: var(--ch-metastable-soft); color: var(--ch-metastable); font-size: var(--fs-small); font-style: italic;
  display: none;
}
.shadow-foreshadow.show { display: block; animation: simIn 0.5s var(--ease-out); }

/* ============================================================
   S9 Boss 战 · 亚稳态之影排除法收网器
   ============================================================ */
.boss-stage { width: 100%; display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; }
.boss-entity {
  width: 100%; padding: var(--sp-4); border: 1px solid var(--ch-metastable); border-radius: var(--r-md);
  background: var(--ch-metastable-soft); text-align: center; position: relative; overflow: hidden;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.boss-entity .boss-wave { font-family: var(--font-mono); color: var(--ch-metastable); letter-spacing: 0.3em; font-size: 1.4rem; }
.boss-entity.cracked .boss-wave { color: var(--accent); }
.boss-entity.disintegrated { opacity: 0.2; }
.q-refute { margin-top: var(--sp-3); padding: var(--sp-3); border-left: 3px solid var(--ch-metastable); background: var(--ch-metastable-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-small); color: var(--text-2); }

/* 两级同步器搭建 */
.sync-builder { display: flex; align-items: center; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; padding: var(--sp-3); }
.ff-stage {
  min-width: 80px; min-height: 60px; padding: var(--sp-2); border: 2px dashed var(--text-3); border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); transition: all var(--dur-mid);
}
.ff-stage.placed { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.ff-stage .fs-name { font-size: 0.6rem; }

/* 复位策略卡 */
.strategy-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .strategy-row { grid-template-columns: 1fr; } }
.strategy-card {
  min-height: 80px; padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; cursor: pointer; text-align: center; transition: all var(--dur-fast);
}
.strategy-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.strategy-card.chosen { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.strategy-card .sc-name { font-family: var(--font-serif); font-size: var(--fs-small); }
.strategy-card .sc-pro { font-size: 0.65rem; color: var(--accent); margin-top: 4px; }
.strategy-card .sc-con { font-size: 0.65rem; color: var(--ch-boss); }

/* MTBF 对比柱 */
.mtbf-compare { display: flex; gap: var(--sp-5); justify-content: center; align-items: flex-end; height: 140px; padding: var(--sp-3); }
.mtbf-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mtbf-bar { width: 48px; border-radius: 4px 4px 0 0; transition: height var(--dur-slow) var(--ease-out); }
.mtbf-bar.single { background: var(--ch-boss); }
.mtbf-bar.double { background: var(--accent); box-shadow: var(--glow); }
.mtbf-bar-col .mb-label { font-size: 0.65rem; color: var(--text-3); font-family: var(--font-mono); }

/* 刻痕画廊 */
.crack-gallery { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.crack-item {
  min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-noise-soft); border-radius: var(--r-md);
  background: transparent; color: var(--text-3); font-size: var(--fs-small); text-align: center; cursor: pointer;
  opacity: 0.5; transition: all var(--dur-mid) var(--ease-out);
}
.crack-item.lit { opacity: 1; border-color: var(--ch-boss); color: var(--ch-boss); background: var(--ch-boss-soft); box-shadow: 0 0 12px var(--ch-boss-soft); }
.crack-item.matched { opacity: 1; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.scar-grid { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.scar-card {
  min-height: 44px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--ch-noise-soft); border-radius: var(--r-md);
  background: transparent; color: var(--text-3); font-size: var(--fs-small); text-align: center;
  opacity: 0.5; transition: all var(--dur-mid) var(--ease-out);
}
/* ============================================================
   S10 知识图谱点亮 + 序列检测器
   ============================================================ */
.frag-pool { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.chain-slot {
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); color: var(--text-3);
  transition: all var(--dur-fast) var(--ease-out);
}
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }

/* 序列检测器 */
.seq-detector { padding: var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-sunk); }
.seq-input-row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.seq-bit {
  min-width: 44px; min-height: 44px; padding: var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: transparent; color: var(--text-1); cursor: pointer; font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700;
  transition: all var(--dur-fast);
}
.seq-bit:hover { border-color: var(--accent); }
.seq-bit.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.detection-light {
  margin: var(--sp-3) auto 0; width: 60%; height: 8px; border-radius: 4px;
  background: var(--bg-sunk); border: 1px solid var(--line); transition: all var(--dur-slow);
}
.detection-light.lit { background: linear-gradient(180deg, var(--ch-amber), var(--ch-epiphany)); box-shadow: 0 0 24px var(--ch-epiphany-soft); height: 24px; }
.encoding-switch { display: flex; gap: var(--sp-2); justify-content: center; }
.enc-btn {
  min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--text-1); cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-small);
  transition: all var(--dur-fast);
}
.enc-btn:hover { border-color: var(--accent); }
.enc-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.gate-text {
  font-family: var(--font-serif); font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: 0.3em; text-align: center; margin: var(--sp-5) 0;
}
.gate-text span { color: var(--text-3); transition: color var(--dur-slow) var(--ease-out), text-shadow var(--dur-slow); }
@media (prefers-reduced-motion: reduce) {
  .stage.collapse, .boss-entity, .q-refute, .sr-warning, .violation-warning, .shadow-foreshadow, .metastable-fog { animation: none; }
}

/* 移动端触摸目标兜底 */
button, .q-option, .bet-item, .knob, .mode-btn, .bit-toggle, .strategy-card, .crack-item, .scar-card,
.frag-node, .chain-slot, .formula-piece, .formula-slot, .enc-btn, .seq-bit, .counter-card, .param-group {
  min-height: 44px;
}