/* ============================================================
   ch10「输入输出系统」章节专属样式
   境界：筑基四层·IO通联 · 深蓝 #3B82F6（与 ch07/ch08 同筑基色系）
   Boss：中断之乱 · 深紫 #7C3AED（中断风暴/优先级反转）
   顿悟：金 var(--ch-epiphany)（通联点亮、断痕收网）
   全部色值走 tokens 变量；类名体系与 ch01-ch09 对齐。
   禁止纯黑背景；发光仅限边框/背景，不出现在文字区。
   ============================================================ */

/* ---------- 章节境界色覆写：深蓝筑基（同 ch07/ch08） ---------- */
: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;
  /* IO 设备色（与 S0 速度谱对齐） */
  --ch-dev-cpu: var(--ch-amber);       /* CPU · 琥珀 */
  --ch-dev-gpu: var(--ch-boss);       /* GPU · 红 */
  --ch-dev-ssd: #0EA5E9;       /* SSD · 天蓝 */
  --ch-dev-usb: #06B6D4;       /* USB · 青蓝 */
  --ch-dev-hdd: #8B5CF6;       /* HDD · 紫 */
  --ch-dev-net: #10B981;       /* 网络 · 翠绿 */
  --ch-dev-kbd: #64748B;       /* 键盘 · 灰 */
  /* 总线色 */
  --ch-bus-data: #06B6D4;      /* 数据总线 · 青蓝 */
  --ch-bus-addr: #A78BFA;      /* 地址总线 · 紫 */
  --ch-bus-ctrl: var(--ch-amber);      /* 控制总线 · 琥珀 */
  /* 状态色 */
  --ch-ok: #22C55E;            /* 成功 */
  --ch-warn: var(--ch-boss);          /* 警示 / 违例 */
  --ch-storm: var(--ch-boss);         /* 风暴红 */
  --ch-dontcare: var(--ch-amber);      /* don't care */
}
/* ---------- 导师 / 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 IO 速度天堑预测挑战器
   ============================================================ */
.bet-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.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; }
.speed-spectrum {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.spectrum-controls { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.spectrum-controls .btn { min-width: 80px; }
.spectrum-controls .btn.active { background: var(--accent); color: var(--on-accent); }
.spectrum-track {
  width: 100%; min-height: 200px; border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev); padding: var(--sp-2);
}
.spectrum-track svg { width: 100%; height: auto; }
.device-palette {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
  margin-top: var(--sp-2);
}
.dev-card {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-sunk); cursor: grab;
  font-family: var(--font-mono); font-size: 0.75rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.dev-card:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.dev-card[data-name="CPU"] { border-color: var(--ch-dev-cpu); color: var(--ch-dev-cpu); }
.dev-card[data-name="GPU"] { border-color: var(--ch-dev-gpu); color: var(--ch-dev-gpu); }
.dev-card[data-name="SSD"] { border-color: var(--ch-dev-ssd); color: var(--ch-dev-ssd); }
.dev-card[data-name="USB"] { border-color: var(--ch-dev-usb); color: var(--ch-dev-usb); }
.dev-card[data-name="HDD"] { border-color: var(--ch-dev-hdd); color: var(--ch-dev-hdd); }
.dev-card[data-name="Network"] { border-color: var(--ch-dev-net); color: var(--ch-dev-net); }
.dev-card[data-name="Keyboard"] { border-color: var(--ch-dev-kbd); color: var(--ch-dev-kbd); }
.dev-card.placed { opacity: 0.3; cursor: default; }
.dev-card.dragging { opacity: 0.6; }
.ratio-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); font-size: 1rem; color: var(--ch-epiphany-ink);
}

/* ============================================================
   S1 编址殿 · 双域门牌
   ============================================================ */
.domain-area {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
}
.domain-col {
  padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.domain-col[data-domain="memory"] { border-color: var(--ch-dev-ssd); }
.domain-col[data-domain="io"] { border-color: var(--ch-dev-usb); }
.domain-col h4 { font-size: 0.85rem; margin-bottom: var(--sp-2); }
.domain-slots { display: flex; flex-direction: column; gap: var(--sp-1); min-height: 120px; }
.domain-slot {
  padding: var(--sp-1) var(--sp-2); border: 1px dashed var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.domain-slot.filled { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.domain-slot.conflict { border-color: var(--ch-warn); color: var(--ch-warn); background: rgba(239,68,68,0.08); animation: shake 300ms; }
.device-pool {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
  padding: var(--sp-2); margin-top: var(--sp-2);
}
.device-chip {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: 999px; background: var(--bg-elev); cursor: grab;
  font-size: 0.8rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.device-chip:hover { border-color: var(--accent); }
.device-chip.placed { opacity: 0.3; cursor: default; }
.oscilloscope {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); margin-top: var(--sp-2);
}
.oscilloscope svg { width: 100%; height: auto; }
.scope-readout {
  margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--accent-ink); text-align: center;
}

/* ============================================================
   S2 轮询谷 · 空转代价
   ============================================================ */
.poll-code-area {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.code-line-pool { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0; }
.code-line {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev); cursor: grab;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-1);
  transition: all 150ms cubic-bezier(0.22,1,0.36,1);
}
.code-line:hover { border-color: var(--accent); }
.code-line.placed { opacity: 0.3; cursor: default; }
.code-line-order { display: flex; flex-direction: column; gap: 2px; min-height: 40px; }
.code-line-order .code-line { cursor: pointer; }
.cpu-meter-area {
  width: 100%; display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
}
.cpu-crystal {
  flex: 0 0 120px; padding: var(--sp-2);
}
.cpu-crystal svg { width: 100%; height: auto; }
.meter-panel {
  flex: 1; min-width: 200px; padding: var(--sp-3);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.meter-bar {
  width: 100%; height: 28px; background: var(--bg-elev); border-radius: var(--r-xs);
  border: 1px solid var(--glass-line); overflow: hidden; position: relative; margin: var(--sp-1) 0;
}
.meter-fill {
  height: 100%; width: 0%; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--ch-ok), var(--ch-epiphany), var(--ch-warn));
  transition: width 400ms cubic-bezier(0.22,1,0.36,1);
}
.meter-val {
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--ch-warn); font-weight: 600;
}
.efficiency-formula {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
  font-family: var(--font-mono); font-size: 0.9rem; text-align: center;
}

/* ============================================================
   S3 中断碑 · 五步流水线
   ============================================================ */
.vector-table-area {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.vt-grid {
  display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; margin-top: var(--sp-2);
}
.vt-entry {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.55rem;
  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);
  cursor: pointer;
}
.vt-entry.filled { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.vt-entry.wrong { background: var(--ch-warn); color: #FFFFFF; border-color: var(--ch-warn); animation: shake 300ms; }
.vt-entry.active { box-shadow: var(--glow); transform: scale(1.15); }
.flow-canvas {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.flow-canvas svg { width: 100%; height: auto; }
.step-timeline {
  width: 100%; display: flex; gap: var(--sp-1); flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.step-cell {
  flex: 1; min-width: 80px; 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);
}
.step-cell.done { border-color: var(--ch-ok); color: var(--ch-ok); background: rgba(34,197,94,0.08); }
.step-cell.current { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.efficiency-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
}
.eff-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.eff-bar { display: flex; align-items: center; gap: var(--sp-2); }
.eff-bar .bar-label { min-width: 80px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); }
.eff-bar .bar-track {
  flex: 1; height: 24px; background: var(--bg-elev); border-radius: var(--r-xs);
  border: 1px solid var(--glass-line); overflow: hidden;
}
.eff-bar .bar-fill { height: 100%; border-radius: var(--r-xs); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.eff-bar[data-type="poll"] .bar-fill { background: var(--ch-warn); }
.eff-bar[data-type="int"] .bar-fill { background: var(--ch-ok); }
.eff-bar .bar-val { min-width: 80px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-ink); }

/* ============================================================
   S4 优先级塔
   ============================================================ */
.priority-tower-area {
  width: 100%; display: flex; gap: var(--sp-3); flex-wrap: wrap;
}
.priority-tower {
  flex: 0 0 180px; display: flex; flex-direction: column-reverse; gap: 2px;
  padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.tower-level {
  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; color: var(--text-3);
  text-align: center; min-height: 36px; display: flex; align-items: center; justify-content: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.tower-level[data-level="7"] { border-color: var(--ch-dev-cpu); }
.tower-level[data-level="6"] { border-color: var(--ch-warn); }
.tower-level[data-level="5"] { border-color: var(--ch-dev-ssd); }
.tower-level.filled { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.tower-level.wrong { border-color: var(--ch-warn); color: var(--ch-warn); animation: shake 300ms; }
.device-stack {
  flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: var(--sp-1);
}
.device-stack .dev-card { cursor: grab; }
.nesting-tracker {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.isr-stack { display: flex; flex-direction: column-reverse; gap: 2px; min-height: 60px; }
.isr-frame {
  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.75rem; color: var(--text-2);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.isr-frame.current { border-color: var(--ch-boss); color: var(--ch-boss); background: var(--ch-boss-soft); }
.mask-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.mask-grid { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.mask-bit {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  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.7rem; color: var(--text-3);
  transition: all 150ms cubic-bezier(0.22,1,0.36,1);
}
.mask-bit.on { background: var(--ch-warn); color: #FFFFFF; border-color: var(--ch-warn); }
.mask-bit:hover { border-color: var(--accent); }

/* ============================================================
   S5 总线三脉归一
   ============================================================ */
.bus-diagram {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.bus-diagram svg { width: 100%; height: auto; }
.knob-panel {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.knob-unit {
  display: flex; flex-direction: column; gap: var(--sp-1); align-items: center;
}
.knob-dial { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; }
.knob-pos {
  padding: var(--sp-1) var(--sp-2); 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; color: var(--text-3);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.knob-pos:hover { border-color: var(--accent); }
.knob-pos.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--glow);
}
.knob-pos[data-color="data"].active { background: var(--ch-bus-data); border-color: var(--ch-bus-data); }
.knob-pos[data-color="addr"].active { background: var(--ch-bus-addr); border-color: var(--ch-bus-addr); }
.knob-pos[data-color="ctrl"].active { background: var(--ch-bus-ctrl); border-color: var(--ch-bus-ctrl); }
.knob-unit input[type="range"] { width: 100%; }
.knob-unit .readout { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); }

/* ============================================================
   S6 风暴眼 · 优先级反转
   ============================================================ */
.storm-panel {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--ch-boss-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); position: relative;
}
.storm-panel canvas { width: 100%; height: 160px; display: block; }
.storm-stats {
  display: flex; gap: var(--sp-3); justify-content: center; padding: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.8rem;
}
.storm-stats .stat-val { color: var(--ch-warn); font-weight: 600; }
.inversion-timeline {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); margin-top: var(--sp-2);
}
.inversion-timeline svg { width: 100%; height: auto; }
.timeline-events { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
.tl-event {
  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.75rem; color: var(--text-2);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.tl-event.deadlock { border-color: var(--ch-warn); color: var(--ch-warn); background: rgba(239,68,68,0.08); }
.pathfinder-case {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft); margin-top: var(--sp-2);
}
.pathfinder-case p { font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--sp-2); }

/* ============================================================
   S7 DMA渊
   ============================================================ */
.dma-config {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.dma-param-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.dma-param-row .dim { min-width: 80px; }
.dma-input {
  flex: 1; min-height: 36px; 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;
}
.dma-input:focus { border-color: var(--accent); outline: none; }
.dma-flow {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); margin-top: var(--sp-2);
}
.dma-flow svg { width: 100%; height: auto; }
.mode-selector {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2);
}
.mode-card {
  flex: 1; min-width: 120px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.mode-card:hover { border-color: var(--accent); }
.mode-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.mode-card .mode-name { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); }
.mode-card .mode-desc { font-size: 0.7rem; color: var(--text-3); margin-top: 2px; }
.arbitration-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); margin-top: var(--sp-2);
}
.arb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.arb-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.arb-card h5 { font-size: 0.85rem; margin-bottom: var(--sp-1); color: var(--accent-ink); }
.arb-card .arb-metrics { display: flex; gap: var(--sp-2); font-family: var(--font-mono); font-size: 0.7rem; }
.arb-card .arb-metric { color: var(--text-3); }
.arb-card.selected { border-color: var(--accent); background: var(--accent-soft); }

/* ============================================================
   S8 通道阁
   ============================================================ */
.channel-program {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.chan-line-pool { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0; }
.chan-line {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev); cursor: grab;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-1);
  transition: all 150ms cubic-bezier(0.22,1,0.36,1);
}
.chan-line:hover { border-color: var(--accent); }
.chan-line.placed { opacity: 0.3; cursor: default; }
.chan-line.executed { border-color: var(--ch-ok); background: rgba(34,197,94,0.08); color: var(--ch-ok); }
.chan-line-order { display: flex; flex-direction: column; gap: 2px; min-height: 40px; }
.method-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); margin-top: var(--sp-2);
}
.method-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.method-bar { display: flex; align-items: center; gap: var(--sp-2); }
.method-bar .bar-label { min-width: 60px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); }
.method-bar .bar-track {
  flex: 1; height: 24px; background: var(--bg-elev); border-radius: var(--r-xs);
  border: 1px solid var(--glass-line); overflow: hidden;
}
.method-bar .bar-fill { height: 100%; border-radius: var(--r-xs); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.method-bar[data-m="poll"] .bar-fill { background: var(--ch-warn); }
.method-bar[data-m="int"] .bar-fill { background: var(--ch-dev-ssd); }
.method-bar[data-m="dma"] .bar-fill { background: var(--ch-dev-usb); }
.method-bar[data-m="chan"] .bar-fill { background: var(--ch-ok); }
.method-bar .bar-val { min-width: 60px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-ink); }
.usb-explorer {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); margin-top: var(--sp-2);
}
.usb-versions { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-2); }
.usb-ver {
  padding: var(--sp-1) var(--sp-2); 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; color: var(--text-3);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.usb-ver.active { background: var(--ch-dev-usb); color: #FFFFFF; border-color: var(--ch-dev-usb); }
.usb-topology { padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); min-height: 60px; }

/* ============================================================
   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); }
.boss-vortex-mini {
  width: 100%; height: 120px; border: 1px solid var(--ch-boss-line);
  border-radius: var(--r-sm); background: rgba(124,58,237,0.06); overflow: hidden;
}
.boss-vortex-mini canvas { width: 100%; height: 100%; display: block; }
.ledger-panel {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft); margin-bottom: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--ch-epiphany-ink);
}
.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;
}
.scar-arc {
  width: 100%; display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-2);
}
.scar {
  flex: 1; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); text-align: center;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4;
}
.scar.lit {
  opacity: 1; border-color: var(--ch-epiphany); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 12px var(--ch-epiphany-soft);
}
.q-feedback {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-warn);
  border-radius: var(--r-sm); background: rgba(239,68,68,0.08);
  font-size: 0.85rem; color: var(--ch-warn); margin-top: var(--sp-2);
}

/* ============================================================
   S10 知识图谱
   ============================================================ */
.graph-canvas {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.graph-canvas svg { width: 100%; height: auto; }
.expansion-panel {
  width: 100%; margin-top: var(--sp-2);
}
.raid-explorer, .pcie-calculator, .nvme-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.raid-selector { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.raid-btn {
  padding: var(--sp-1) var(--sp-2); 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; color: var(--text-3);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.raid-btn:hover { border-color: var(--accent); }
.raid-btn.active { background: var(--ch-dev-usb); color: #FFFFFF; border-color: var(--ch-dev-usb); }
.raid-model {
  display: flex; gap: var(--sp-1); justify-content: center; padding: var(--sp-2);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev);
  min-height: 60px;
}
.raid-disk {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--ch-dev-usb); background: var(--bg-sunk);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--ch-dev-usb);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.raid-disk.faulty { border-color: var(--ch-warn); background: rgba(239,68,68,0.2); color: var(--ch-warn); }
.raid-disk.parity { border-color: var(--ch-epiphany); color: var(--ch-epiphany-ink); }
.raid-info { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-ink); }
.pcie-controls { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.pcie-ctrl-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.pcie-readout {
  padding: var(--sp-2); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
  font-family: var(--font-mono); font-size: 1rem; color: var(--ch-epiphany-ink); text-align: center;
}
.nvme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.nvme-side { padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.nvme-side h5 { font-size: 0.85rem; margin-bottom: var(--sp-1); }
.nvme-side[data-side="nvme"] h5 { color: var(--ch-ok); }
.nvme-side[data-side="ahci"] h5 { color: var(--ch-dev-kbd); }
.nvme-queue-grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 1px; }
.nvme-queue-cell {
  aspect-ratio: 1; background: var(--bg-sunk); border-radius: 1px;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.nvme-queue-cell.lit { background: var(--ch-ok); }
.ahci-queue-vis { display: flex; gap: 1px; flex-wrap: wrap; }
.ahci-queue-cell {
  width: 12px; height: 12px; background: var(--bg-sunk); border-radius: 1px;
}
.ahci-queue-cell.lit { background: var(--ch-dev-kbd); }
.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;
}

/* ---------- 通用 shake ---------- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@media (max-width: 640px) {
  .op-title { font-size: clamp(2rem, 12vw, 3.5rem); }
  .op-sub { letter-spacing: 0.3em; }
  .option-grid { grid-template-columns: 1fr; }
  .domain-area { grid-template-columns: 1fr; }
  .cpu-meter-area { flex-direction: column; }
  .knob-panel { grid-template-columns: 1fr; }
  .arb-grid { grid-template-columns: 1fr; }
  .nvme-grid { grid-template-columns: 1fr; }
  .priority-tower-area { flex-direction: column; }
  .priority-tower { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; }
  .vt-grid { grid-template-columns: repeat(8, 1fr); }
  .pcie-controls { flex-direction: column; }
  .scar-arc { flex-direction: column; }
}

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