:root {
  --realm-color: #D6ECF0;
  --realm-glow: #D6ECF033;
}

.op-title span,
.op-sub {
  color: var(--realm-color);
}
/* 元婴期·月白光晕：开场与场景头点缀 */
.op-kicker,
.scene-kicker {
  color: var(--realm-color);
}
/* focus-breath 呼吸光晕（下一场景按钮引导） */
.focus-breath {
  box-shadow: 0 0 0 0 #D6ECF066;
  animation: ch24Breath 2s ease-in-out infinite;
}

@keyframes ch24Breath {
  0%, 100% { box-shadow: 0 0 0 0 #D6ECF066; }
  50% { box-shadow: 0 0 16px 4px #D6ECF044; }
}

/* 壳纹（S10 本命石第二十四痕）—— 封装截面图案
   从下到上：PCB绿 → BGA锡球灰 → 有机基板米黄 → 硅interposer褐+TSV铜柱
            → μbump银 → Si die月白金 → TIM银 → 散热器冷液蓝 */
.s10-scar-kewen {
  display: inline-block;
  width: 44px;
  height: 60px;
  position: relative;
  vertical-align: middle;
  margin: 0 0.4rem;
  background:
    linear-gradient(180deg,
      #177CB0 0%, #177CB0 12%,
      var(--ch24-bump) 12%, var(--ch24-bump) 20%,
      var(--realm-color) 20%, var(--realm-color) 36%,
      var(--ch24-bump) 36%, var(--ch24-bump) 44%,
      #8D6E63 44%, #8D6E63 60%,
      var(--ch24-sub) 60%, var(--ch24-sub) 76%,
      #888888 76%, #888888 86%,
      var(--ch24-pcb) 86%, var(--ch24-pcb) 100%
    );
  border: 1px solid var(--realm-color);
  border-radius: 3px;
  box-shadow: 0 0 8px #D6ECF055;
}
/* TSV 铜柱（垂直穿孔，两根） */
.s10-scar-kewen::before {
  content: '';
  position: absolute;
  left: 28%;
  top: 20%;
  width: 3px;
  height: 40%;
  background: linear-gradient(180deg, var(--ch24-copper), #8B4513);
  box-shadow: 14px 0 0 0 var(--ch24-copper);
}
/* die 中心亮点（封装之眼） */
.s10-scar-kewen::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 28%;
  width: 6px;
  height: 6px;
  background: var(--realm-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px 2px var(--realm-color);
  animation: ch24Glow 1.8s ease-in-out infinite;
}
@keyframes ch24Glow {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.45); }
}

/* S8/S9 Boss 战触发按钮的月白描边 */
#s9-start {
  border-color: var(--realm-color);
  color: var(--realm-color);
}
#s9-start:hover {
  background: var(--realm-color);
  color: #1a1a1a;
}

/* 化神玄青一线（S10 远景） */
.s10-xuanqing-line {
  display: block;
  width: 100%;
  height: 2px;
  margin: 1.2rem 0;
  background: linear-gradient(90deg,
    transparent 0%,
    #3D3B4F22 40%,
    #3D3B4F 50%,
    #3D3B4F22 60%,
    transparent 100%);
  box-shadow: 0 0 12px #3D3B4F66;
}

/* ============================================================
   通用交互组件样式 · 元婴期月白主题
   ============================================================ */

/* Insight 显示覆盖（hidden 属性 + show 类同时存在时强制显示） */
.insight.show {
  display: block;
  opacity: 1;
  transform: none;
}

/* 境界突破铭文（S10） */
.inscription {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--realm-color);
  border-radius: 8px;
  background: rgba(214, 236, 240, 0.10);
  color: var(--realm-color);
  text-align: center;
  font-family: var(--font-serif, serif);
  letter-spacing: 0.1em;
  font-size: 1.1rem;
  font-weight: bold;
  animation: ch24Inscribe 1.4s ease-out;
}
@keyframes ch24Inscribe {
  0% { opacity: 0; transform: scale(0.9); }
  60% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* 组件头 */
.cmp-head { margin-bottom: 0.6rem; }
/* 导师提示框 */
.ch24-mentor {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--realm-color);
  background: rgba(214, 236, 240, 0.08);
  color: #F1F5F9;
  font-size: 0.9rem;
  line-height: 1.6;
  border-radius: 0 8px 8px 0;
}

/* ============================================================
   S10 碎片归位网格
   ============================================================ */
.frag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
  margin: 1rem 0;
}
.frag-node {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--glass-border, #475569);
  border-radius: 8px;
  background: var(--glass-bg, rgba(30,25,35,0.4));
  color: var(--text-3, #94A3B8);
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  transition: all 0.3s ease-out;
  opacity: 0.5;
}
.frag-node:hover {
  border-color: var(--realm-color);
  transform: translateY(-2px);
}
.frag-node.lit {
  border-color: var(--realm-color);
  background: rgba(214, 236, 240, 0.12);
  color: var(--realm-color);
  opacity: 1;
  box-shadow: 0 0 10px rgba(214, 236, 240, 0.3);
}

/* ============================================================
   S0 封装演进预测挑战器 · 松香工坊
   ============================================================ */
.ch24-workshop {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.ch24-tool-info {
  margin: 0.4rem 0;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.12);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.3);
  font-size: 0.85rem;
  color: var(--text-3, #94A3B8);
  min-height: 2.5rem;
}
.ch24-tool-btn {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 6px;
  background: rgba(30, 25, 35, 0.5);
  color: var(--text-3, #94A3B8);
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 200ms ease-out;
}
.ch24-tool-btn:hover {
  border-color: var(--realm-color);
  color: var(--realm-color);
}

.ch24-die-area {
  margin: 0.8rem 0;
  text-align: center;
}
.ch24-die-surface {
  display: inline-block;
  padding: 1rem 2rem;
  border: 2px solid #8B5CF655;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(30, 25, 35, 0.5));
  color: var(--text-2, #CBD5E1);
  cursor: pointer;
  font-size: 0.88rem;
  transition: all 200ms ease-out;
}
.ch24-die-surface:hover {
  border-color: #8B5CF6;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}
.ch24-die-surface.esd-flash {
  animation: ch24ESD 0.4s ease-out 3;
  border-color: var(--ch24-crit);
  background: rgba(239, 68, 68, 0.15);
}
@keyframes ch24ESD {
  0%, 100% { background: rgba(239, 68, 68, 0.05); }
  50% { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); }
}

.ch24-skip-panel {
  margin: 0.8rem 0;
  text-align: center;
}
.ch24-skip-btn {
  padding: 0.5rem 1.2rem;
  border: 2px dashed #EF444466;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.06);
  color: #FCA5A5;
  cursor: pointer;
  font-size: 0.88rem;
  transition: all 200ms ease-out;
}
.ch24-skip-btn:hover {
  border-color: var(--ch24-crit);
  background: rgba(239, 68, 68, 0.12);
}

.ch24-fanout-fail {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid #EF444444;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.06);
}
.ch24-fanout-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.ch24-pitch-box {
  text-align: center;
}
.ch24-pitch-label {
  font-size: 0.78rem;
  color: var(--text-3, #94A3B8);
  margin-bottom: 0.3rem;
}
.ch24-pitch-bar {
  height: 12px;
  border-radius: 4px;
  background: #8B5CF6;
  margin: 0 auto;
}
.ch24-pitch-vs {
  font-size: 0.82rem;
  color: var(--ch24-crit);
  font-weight: bold;
}
.ch24-fanout-msg {
  text-align: center;
  font-size: 0.85rem;
  color: #FCA5A5;
  margin-top: 0.3rem;
}

.ch24-func-panel {
  margin-top: 0.8rem;
}
.ch24-func-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--realm-color);
  margin-bottom: 0.5rem;
}
.ch24-func-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.6rem;
}
.ch24-func-card {
  padding: 0.8rem 0.6rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.5);
  cursor: pointer;
  text-align: center;
  transition: all 200ms ease-out;
}
.ch24-func-card:hover {
  border-color: var(--realm-color);
  transform: translateY(-2px);
}
.ch24-func-card.lit {
  border-color: var(--realm-color);
  background: rgba(214, 236, 240, 0.12);
  box-shadow: 0 0 12px rgba(214, 236, 240, 0.2);
}
.ch24-func-icon {
  font-size: 1.4rem;
  color: #8B5CF6;
  margin-bottom: 0.3rem;
}
.ch24-func-card.lit .ch24-func-icon {
  color: var(--realm-color);
}
.ch24-func-name {
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-1, #F1F5F9);
  margin-bottom: 0.2rem;
}
.ch24-func-desc {
  font-size: 0.75rem;
  color: var(--text-3, #94A3B8);
  line-height: 1.4;
}

/* ============================================================
   S3 热阻链三旋钮实验台
   ============================================================ */
.ch24-knob-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.ch24-knob {
  text-align: center;
  padding: 0.5rem;
  border: 1px solid rgba(214, 236, 240, 0.15);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.5);
}
.ch24-knob-label {
  font-size: 0.82rem;
  color: var(--text-3, #94A3B8);
  margin-bottom: 0.3rem;
}
.ch24-slider {
  width: 100%;
  margin: 0.3rem 0;
  accent-color: var(--realm-color);
  cursor: pointer;
}
.ch24-knob-val {
  font-size: 1rem;
  font-weight: bold;
  color: var(--realm-color);
}

.ch24-thermal-viz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0.8rem 0;
  padding: 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.12);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.4);
}
.ch24-chain-canvas {
  display: block;
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  height: 80px;
}
.ch24-gauge-canvas {
  display: block;
  width: 200px;
  height: 120px;
}
.ch24-tj-readout {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  min-width: 140px;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.5);
}

.ch24-sink-panel {
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.12);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.3);
}
.ch24-sink-title {
  font-size: 0.88rem;
  font-weight: bold;
  color: var(--realm-color);
  margin-bottom: 0.5rem;
}
.ch24-sink-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}
.ch24-sink-btn {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 6px;
  background: rgba(30, 25, 35, 0.5);
  color: var(--text-3, #94A3B8);
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 200ms ease-out;
}
.ch24-sink-btn:hover { border-color: var(--realm-color); }
.ch24-sink-btn.active {
  border-color: var(--realm-color);
  background: rgba(214, 236, 240, 0.15);
  color: var(--realm-color);
}

.ch24-cte-panel {
  margin: 0.6rem 0;
  padding: 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.12);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.3);
}
.ch24-cte-title {
  font-size: 0.88rem;
  font-weight: bold;
  color: var(--realm-color);
  margin-bottom: 0.5rem;
}
.ch24-cte-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem 0;
}
.ch24-cte-mat {
  text-align: center;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-1, #F1F5F9);
}
.ch24-cte-vs {
  font-size: 0.82rem;
  color: var(--ch24-crit);
  font-weight: bold;
}
.ch24-cte-desc {
  font-size: 0.82rem;
  color: var(--text-3, #94A3B8);
  line-height: 1.5;
  margin: 0.5rem 0;
}
.ch24-cte-btn {
  margin-top: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--realm-color);
  border-radius: 6px;
  background: rgba(214, 236, 240, 0.08);
  color: var(--realm-color);
  cursor: pointer;
  font-size: 0.82rem;
}
.ch24-cte-btn:hover { background: rgba(214, 236, 240, 0.15); }

.ch24-tab-btn {
  margin: 0.4rem 0;
  padding: 0.4rem 0.8rem;
  border: 1px solid #8B5CF655;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.06);
  color: #8B5CF6;
  cursor: pointer;
  font-size: 0.82rem;
}
.ch24-tab-btn:hover { background: rgba(139, 92, 246, 0.12); }

/* ============================================================
   S8 热阻链公式组装器
   ============================================================ */
.ch24-s8-wrap {
  margin-top: 0.8rem;
}
.ch24-s8-q {
  margin: 0.8rem 0;
  padding: 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.12);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.3);
}
.ch24-s8-q-title {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--realm-color);
  margin-bottom: 0.5rem;
}
.ch24-parts-bin {
  margin: 0.5rem 0;
}
.ch24-parts-title {
  font-size: 0.82rem;
  color: var(--text-3, #94A3B8);
  margin-bottom: 0.4rem;
}
.ch24-part-btn {
  display: inline-block;
  margin: 0.2rem;
  padding: 0.4rem 0.7rem;
  border: 2px solid var(--line-strong, #475569);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.5);
  color: var(--text-1, #F1F5F9);
  cursor: pointer;
  font-size: 0.88rem;
  font-family: var(--font-mono, monospace);
  transition: all 200ms ease-out;
}
.ch24-part-btn:hover { border-color: var(--realm-color); }
.ch24-part-btn.used {
  opacity: 0.3;
  pointer-events: none;
  border-color: var(--ch24-ok);
}
.ch24-assembly {
  min-height: 2.5rem;
  padding: 0.6rem 0.8rem;
  border: 2px dashed rgba(214, 236, 240, 0.2);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.3);
  margin: 0.5rem 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  color: var(--text-3, #94A3B8);
}
.ch24-assembly.complete {
  border-color: var(--realm-color);
  border-style: solid;
  background: rgba(214, 236, 240, 0.08);
  color: var(--realm-color);
  box-shadow: 0 0 16px rgba(214, 236, 240, 0.15);
}
.ch24-placed-part {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  color: var(--realm-color);
  font-weight: bold;
}
.ch24-calc-area {
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.15);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.4);
}
.ch24-calc-line {
  font-family: var(--font-mono, monospace);
  font-size: 0.88rem;
  color: var(--text-1, #F1F5F9);
  margin: 0.3rem 0;
  line-height: 1.5;
}
.ch24-q-opts {
  margin: 0.5rem 0;
}
.ch24-opts-title {
  font-size: 0.85rem;
  color: var(--text-3, #94A3B8);
  margin-bottom: 0.4rem;
}
.ch24-opt-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.8rem;
  margin: 0.3rem 0;
  border: 2px solid var(--line-strong, #475569);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.5);
  color: var(--text-1, #F1F5F9);
  cursor: pointer;
  font-size: 0.88rem;
  transition: all 200ms ease-out;
}
.ch24-opt-btn:hover { border-color: var(--realm-color); }
.ch24-opt-btn.correct {
  border-color: var(--ch24-ok);
  background: rgba(34, 197, 94, 0.12);
  color: #4ADE80;
}
.ch24-opt-btn.wrong {
  border-color: var(--ch24-crit);
  background: rgba(239, 68, 68, 0.12);
  color: #FCA5A5;
}

/* ============================================================
   S1/S2/S4/S5/S6/S7 新增交互场景样式
   ============================================================ */
:root {
  --ch24-ok: #22C55E;
  --ch24-warn: #F97316;
  --ch24-crit: #EF4444;
  --ch24-bump: #B0BEC5;
  --ch24-copper: #B87333;
  --ch24-sub: #D7CCA5;
  --ch24-pcb: #2E7D32;
  --ch24-si: #90A4AE;
  --ch24-cpo: #FF5252;
}

/* 两列旋钮面板 */
.ch24-knob-panel-2 { grid-template-columns: repeat(2, 1fr); }

/* SVG 分层截面配色（全部走 CSS 变量） */
.ch24-svg { display: block; width: 100%; height: auto; }
.svg-pcb { fill: var(--ch24-pcb); }
.svg-sub { fill: var(--ch24-sub); }
.svg-si { fill: var(--ch24-si); }
.svg-bump { fill: var(--ch24-bump); }
.svg-copper { fill: var(--ch24-copper); }
.svg-logic { fill: var(--gold, #E0A845); }
.svg-dram { fill: var(--info, #818CF8); }
.svg-line { stroke: var(--ch24-copper); stroke-width: 1.5; }
.svg-hl { stroke: var(--realm-color); stroke-width: 2; fill: none; }
.svg-lbl { fill: var(--text-3, #94A3B8); font-size: 9.5px; }
.svg-lbl-d { fill: var(--stage-bg, #030509); font-size: 10px; font-weight: bold; }

/* ---------- S1 封装演进廊 ---------- */
.ch24-gen-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.ch24-gen-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.4rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 8px;
  background: var(--glass-bg, rgba(30, 25, 35, 0.5));
  cursor: pointer;
  transition: all 200ms ease-out;
}
.ch24-gen-btn:hover { border-color: var(--realm-color); transform: translateY(-2px); }
.ch24-gen-btn.active {
  border-color: var(--realm-color);
  background: rgba(214, 236, 240, 0.12);
  box-shadow: 0 0 10px rgba(214, 236, 240, 0.2);
}
.ch24-gen-era { font-size: 0.72rem; color: var(--text-3, #94A3B8); }
.ch24-gen-name { font-size: 0.88rem; font-weight: bold; color: var(--text-1, #F1F5F9); }
.ch24-gen-info {
  margin: 0.4rem 0 0.8rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.12);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.3);
  font-size: 0.85rem;
  color: var(--text-2, #CBD5E1);
  min-height: 2.5rem;
  line-height: 1.5;
}
.ch24-bga-calc {
  margin-top: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.12);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.3);
}
.ch24-bga-title {
  font-size: 0.88rem;
  font-weight: bold;
  color: var(--realm-color);
  margin-bottom: 0.5rem;
}
.ch24-bga-viz {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: stretch;
  margin-top: 0.5rem;
}
.ch24-bga-canvas {
  flex: 1;
  min-width: 260px;
  height: 230px;
  display: block;
}
.ch24-bga-ro {
  min-width: 180px;
  flex: 0 0 200px;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(214, 236, 240, 0.15);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.5);
  font-size: 0.85rem;
  color: var(--text-2, #CBD5E1);
  line-height: 1.7;
}
.ch24-bga-ro b { color: var(--realm-color); }
.ch24-bga-ro.bad { border-color: var(--danger, #E05848); }
.ch24-bga-ro.bad b { color: var(--danger, #E05848); }
.ch24-bga-warn {
  margin-top: 0.5rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--danger, #E05848);
  border-radius: 8px;
  background: rgba(224, 88, 72, 0.08);
  color: var(--danger, #E05848);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* ---------- S2 WB/FC ---------- */
.ch24-wb-viz {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: stretch;
  margin: 0.6rem 0;
}
.ch24-wb-canvas {
  flex: 1;
  min-width: 300px;
  height: 240px;
  display: block;
}
.ch24-wb-ro {
  flex: 0 0 190px;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(214, 236, 240, 0.15);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.5);
  font-size: 0.85rem;
  color: var(--text-2, #CBD5E1);
  line-height: 1.7;
}
.ch24-wb-ro b { color: var(--realm-color); }
.ch24-wb-ro.bad { border-color: var(--danger, #E05848); }
.ch24-wb-ro.bad b { color: var(--danger, #E05848); }
.ch24-wb-verdict {
  margin: 0.4rem 0;
  font-size: 0.88rem;
  font-weight: bold;
  color: var(--ch24-ok);
}
.ch24-wb-verdict.bad { color: var(--danger, #E05848); }
.ch24-fc-panel {
  margin-top: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.15);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.35);
}
.ch24-fc-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--realm-color);
  margin-bottom: 0.5rem;
}
.ch24-fc-grid { display: grid; gap: 0.35rem; margin-bottom: 0.6rem; }
.ch24-fc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.84rem;
  color: var(--text-2, #CBD5E1);
}
.ch24-fc-row b { color: var(--gold, #E0A845); }
.ch24-fc-q {
  font-size: 0.88rem;
  color: var(--text-1, #F1F5F9);
  margin: 0.5rem 0 0.3rem;
}

/* ---------- S4 2.5D ---------- */
.ch24-tab2-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.ch24-tab2-btn {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 8px;
  background: var(--glass-bg, rgba(30, 25, 35, 0.5));
  color: var(--text-3, #94A3B8);
  cursor: pointer;
  font-size: 0.84rem;
  transition: all 200ms ease-out;
}
.ch24-tab2-btn:hover { border-color: var(--realm-color); color: var(--realm-color); }
.ch24-tab2-btn.active {
  border-color: var(--realm-color);
  background: rgba(214, 236, 240, 0.12);
  color: var(--realm-color);
}
.ch24-view-panel {
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.12);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.3);
}
.ch24-view-cap {
  font-size: 0.83rem;
  color: var(--text-3, #94A3B8);
  line-height: 1.6;
  margin-top: 0.4rem;
}
.ch24-bw-canvas {
  display: block;
  width: 100%;
  height: 190px;
}
.ch24-yield-ro {
  margin-top: 0.5rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.15);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.5);
  font-size: 0.85rem;
  color: var(--text-2, #CBD5E1);
  line-height: 1.7;
}
.ch24-yield-ro b { color: var(--realm-color); }

/* ---------- S5 3D堆叠 ---------- */
.ch24-3d-viz {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: stretch;
  margin: 0.6rem 0;
}
.ch24-3d-canvas {
  flex: 1;
  min-width: 280px;
  height: 250px;
  display: block;
}
.ch24-stat-col {
  flex: 0 0 180px;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.ch24-stat {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.5);
  font-size: 0.8rem;
  color: var(--text-3, #94A3B8);
}
.ch24-stat b {
  display: block;
  font-size: 1.05rem;
  margin-top: 0.15rem;
  color: var(--ch24-ok);
}
.ch24-stat.warn b { color: var(--ch24-warn); }
.ch24-stat.bad b { color: var(--ch24-crit); }
.ch24-3d-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.5rem 0;
}
.ch24-danger-btn {
  padding: 0.5rem 1rem;
  border: 2px dashed var(--danger, #E05848);
  border-radius: 8px;
  background: rgba(224, 88, 72, 0.06);
  color: var(--danger, #E05848);
  cursor: pointer;
  font-size: 0.86rem;
  transition: all 200ms ease-out;
}
.ch24-danger-btn:hover { background: rgba(224, 88, 72, 0.14); }
.ch24-ok-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--ch24-ok);
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.08);
  color: var(--ch24-ok);
  cursor: pointer;
  font-size: 0.86rem;
  transition: all 200ms ease-out;
}
.ch24-ok-btn:hover { background: rgba(34, 197, 94, 0.16); }

/* ---------- S6 Chiplet ---------- */
.ch24-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin: 0.6rem 0;
}
.ch24-chip-card {
  padding: 0.7rem 0.6rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 8px;
  background: var(--glass-bg, rgba(30, 25, 35, 0.5));
  cursor: pointer;
  text-align: center;
  transition: all 200ms ease-out;
  color: var(--text-2, #CBD5E1);
}
.ch24-chip-card:hover { border-color: var(--realm-color); transform: translateY(-2px); }
.ch24-chip-card.lit {
  border-color: var(--realm-color);
  background: rgba(214, 236, 240, 0.12);
  box-shadow: 0 0 10px rgba(214, 236, 240, 0.18);
}
.ch24-chip-card b {
  display: block;
  font-size: 0.9rem;
  color: var(--text-1, #F1F5F9);
  margin-bottom: 0.2rem;
}
.ch24-chip-card span { font-size: 0.76rem; color: var(--text-3, #94A3B8); }
.ch24-chip-detail {
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.12);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.3);
  font-size: 0.85rem;
  color: var(--text-2, #CBD5E1);
  line-height: 1.7;
  min-height: 3rem;
}
.ch24-chip-detail b { color: var(--realm-color); }
.ch24-ucie-stack { display: grid; gap: 0.35rem; margin: 0.5rem 0; }
.ch24-ucie-layer {
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(214, 236, 240, 0.18);
  border-radius: 6px;
  background: rgba(214, 236, 240, 0.06);
  font-size: 0.82rem;
}
.ch24-ucie-layer b { color: var(--gold, #E0A845); }
.ch24-flow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.5rem 0;
}
.ch24-flow-step {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text-2, #CBD5E1);
}
.ch24-flow-arrow { color: var(--realm-color); font-size: 0.8rem; }
.ch24-cpo-note { color: var(--ch24-cpo); }

/* ---------- S7 测试 ---------- */
.ch24-test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.ch24-test-card {
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 8px;
  background: var(--glass-bg, rgba(30, 25, 35, 0.5));
  color: var(--text-3, #94A3B8);
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 200ms ease-out;
}
.ch24-test-card:hover { border-color: var(--realm-color); color: var(--realm-color); }
.ch24-test-card.lit {
  border-color: var(--realm-color);
  background: rgba(214, 236, 240, 0.12);
  color: var(--realm-color);
}
.ch24-test-detail {
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(214, 236, 240, 0.12);
  border-radius: 8px;
  background: rgba(30, 25, 35, 0.3);
  font-size: 0.85rem;
  color: var(--text-2, #CBD5E1);
  line-height: 1.7;
  min-height: 3rem;
}
.ch24-test-detail b { color: var(--realm-color); }
.ch24-wafer-canvas {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 280px;
  margin: 0.5rem auto;
}
.ch24-wf-canvas {
  display: block;
  width: 100%;
  height: 180px;
  margin-top: 0.4rem;
}
.ch24-cp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.5rem 0;
}
.ch24-cp-stats {
  font-size: 0.85rem;
  color: var(--text-2, #CBD5E1);
  margin-top: 0.3rem;
}
.ch24-cp-stats b { color: var(--realm-color); }

/* ============================================================
   响应式适配
   ============================================================ */
@media (max-width: 600px) {
  .ch24-knob-panel { grid-template-columns: 1fr; }
  .ch24-knob-panel-2 { grid-template-columns: 1fr; }
  .ch24-func-grid { grid-template-columns: 1fr 1fr; }
  .ch24-thermal-viz { flex-direction: column; }
  .ch24-chain-canvas { min-width: 100%; }
  .ch24-cte-compare { flex-direction: column; }
  .ch24-bga-ro, .ch24-wb-ro, .ch24-stat-col { flex: 1 1 100%; }
}