/* ============================================================
   ch17「操作系统：资源管理的艺术」章节专属样式
   境界：元婴一层·系统御灵 · 御灵青 var(--opt-correct)
   Boss：死锁之环 · 暗紫 #7C3AED
   顿悟：御灵金辉 var(--ch-epiphany)（理解发生之处/青光裂纹/顿悟脉冲）
   点缀：御灵青 var(--opt-correct)（ch17专属点缀色）
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：御灵青 ---------- */
:root, :root[data-theme="light"] {
  --accent: #06B6D4;
  --accent-ink: #0E7490;
  --accent-soft: rgba(6, 182, 212, 0.12);
  --glass-line: rgba(6, 182, 212, 0.22);
  --glow: 0 0 18px rgba(6, 182, 212, 0.28);
  --on-accent: #04212B;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #22D3EE;
  --accent-ink: #06B6D4;
  --accent-soft: rgba(6, 182, 212, 0.16);
  --glass-line: rgba(6, 182, 212, 0.22);
  --glow: 0 0 22px rgba(6, 182, 212, 0.34);
  --on-accent: #04212B;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #7C3AED;          /* 死锁之环 · 暗紫 */
  --ch-boss-ink: #5B21B6;
  --ch-boss-soft: rgba(124, 58, 237, 0.14);
  --ch-boss-line: rgba(124, 58, 237, 0.40);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟金辉（理解发生之处） */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #B45309;
  --ch-spirit: #06B6D4;        /* 御灵青 */
  --ch-spirit-soft: rgba(6, 182, 212, 0.14);
  --ch-spirit-ink: #0E7490;
  --ch-measure: #06B6D4;       /* 御灵主色（ch17点缀色） */
  --ch-measure-soft: rgba(6, 182, 212, 0.14);
  --ch-measure-ink: #0E7490;
  /* 资源/调度/置换/同步 各功能色 */
  --res-cpu: #06B6D4;          /* CPU资源青 */
  --res-mem: #10B981;          /* 内存资源翠 */
  --res-disk: var(--ch-amber);         /* 磁盘资源琥珀 */
  --res-net: #A78BFA;          /* 带宽资源紫 */
  --algo-fcfs: #94A3B8;        /* FCFS灰 */
  --algo-sjf: #10B981;         /* SJF翠 */
  --algo-rr: var(--ch-amber);          /* RR琥珀 */
  --algo-priority: #A78BFA;    /* 优先级紫 */
  --algo-mlfq: #06B6D4;        /* MLFQ青 */
  --algo-fifo: #94A3B8;        /* FIFO灰 */
  --algo-lru: #10B981;         /* LRU翠 */
  --algo-optimal: #06B6D4;     /* Optimal青 */
  --algo-clock: var(--ch-amber);       /* Clock琥珀 */
  --starvation: #EF4444;       /* 饥饿红 */
  --convoy: #F59E0B;           /* 护航效应琥珀 */
  --priority-inv: #DC2626;     /* 优先级反转暗红 */
  --belady-anomaly: var(--ch-boss);   /* Belady异常红 */
  --thrashing: #DC2626;        /* 抖动暗红 */
  --page-fault: #F87171;       /* 缺页火星红 */
  --page-hit: #22C55E;         /* 命中绿 */
  --rt-deadline: var(--ch-boss);      /* 实时截止红 */
  --rt-ok: #22C55E;            /* 实时准时绿 */
  --mutex-lock: var(--ch-epiphany);       /* 互斥锁金 */
  --semaphore: #10B981;        /* 信号量翠 */
  --monitor: #A78BFA;          /* 管程紫 */
  --condition-met: #7C3AED;    /* 死锁条件凑齐暗紫 */
  --race-error: var(--ch-boss);       /* 竞态错误红 */
  --buffer-overflow: #DC2626;  /* 缓冲区溢出暗红 */
  --canary-shield: #10B981;    /* Canary绿盾 */
  --nx-shield: #06B6D4;        /* NX青盾 */
  --aslr-shield: #A78BFA;      /* ASLR紫盾 */
  --ring-vortex: #7C3AED;      /* 环涡流粒子暗紫 */
  --ring-tighten: rgba(124, 58, 237, 0.15); /* 答错环浓度 */
  --scar-mark: #06B6D4;        /* 刻痕投影青光 */
  --crack-light: #06B6D4;      /* 青光裂纹 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  --timeline-node: #06B6D4;    /* 时间轴节点青 */
  /* 选项/状态色 */
  --opt-correct: #06B6D4;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #374151;
  --ch-ok: #22C55E;
  --ch-warn: var(--ch-boss);
  --ch-dontcare: var(--ch-epiphany);
  --ch-bg-warm: var(--ch-bg-warm);       /* 暖深蓝灰背景 */
  --freeze-ice: #E0F2FE;       /* 冻结冰白 */
}
/* ---------- 开场（opening） ---------- */
#opening {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); text-align: center;
  padding: calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-7);
  background: radial-gradient(ellipse at center, var(--ch-bg-warm, #0E1633) 0%, var(--ch-bg-warm) 70%);
}
.op-title span {
  display: inline-block; opacity: 0;
  text-shadow: 0 0 60px var(--accent-soft), 0 0 24px var(--ch-boss-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--ch-boss);
  background: rgba(124,58,237,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #resource-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #resource-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-epiphany-ink); }
#resource-scar-list p { font-size: 0.8rem; color: var(--ch-boss); margin: var(--sp-1) 0; }
.option.excluded { opacity: 0.3; cursor: default; transform: none; text-decoration: line-through; border-color: var(--opt-excluded); background: rgba(55,65,81,0.20); }
.sim-range, input[type="range"], .knob-range { accent-color: var(--accent); }
.btn-warn { border-color: var(--ch-warn); color: var(--ch-warn); }
.btn-warn:hover { background: rgba(239,68,68,0.12); }

/* ---------- 通用 knob 旋钮 ---------- */
.knob-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.knob-unit {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); min-width: 120px; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.knob-unit:hover { border-color: var(--accent); }
.knob-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); letter-spacing: 0.1em; }
.knob-range { width: 140px; }
.knob-val { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); }
.knob-val b { color: var(--accent); font-size: 1rem; }

/* ============================================================
   S0 资源够用预测挑战器
   ============================================================ */
.cmp-resource-bet { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-question {
  text-align: center; font-size: 1rem; color: var(--accent-ink);
  padding: var(--sp-2); letter-spacing: 0.1em;
}
.program-silhouettes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); width: 100%; }
.prog-silhouette {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; font-size: 0.78rem; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  position: relative;
}
.prog-silhouette:hover { border-color: var(--accent); transform: translateY(-2px); }
.prog-silhouette.guessed { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); }
.prog-silhouette.guessed .sil-name { color: var(--ch-warn); }
.prog-silhouette .sil-icon { font-size: 1.2rem; color: var(--accent); }
.prog-silhouette .sil-name { font-family: var(--font-mono); font-weight: 600; }
.prog-silhouette .resource-popup {
  font-size: 0.66rem; color: var(--text-3); margin-top: 2px; line-height: 1.4;
}
.bet-prompt { text-align: center; font-size: 0.82rem; color: var(--text-3); }
.ring-account {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-boss-line);
  border-radius: var(--r-sm); background: var(--ch-boss-soft);
  font-size: 0.82rem; color: var(--text-2); font-style: italic;
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.ring-account .acct-line { margin: var(--sp-1) 0; }
.ring-account .acct-line b { color: var(--ch-boss); font-style: normal; }
.resource-panorama {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.08); animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.resource-panorama h4 { font-size: 0.85rem; color: var(--ch-warn); margin-bottom: var(--sp-2); }
.pano-bars { display: flex; flex-direction: column; gap: var(--sp-1); }
.pano-bar-row { display: flex; align-items: center; gap: var(--sp-2); }
.pano-bar-row .pano-label { min-width: 70px; font-size: 0.75rem; color: var(--text-2); font-family: var(--font-mono); }
.pano-bar { flex: 1; height: 16px; border: 1px solid var(--glass-line); border-radius: 8px; background: var(--bg-elev); overflow: hidden; }
.pano-fill { height: 100%; transition: width 800ms cubic-bezier(0.22,1,0.36,1); }
.pano-fill.over { background: var(--ch-warn); }
.pano-bar-row .pano-val { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ch-warn); min-width: 50px; text-align: right; }
.timeline-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.timeline-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.timeline-track { position: relative; width: 100%; height: 44px; margin-bottom: var(--sp-2); }
.tl-node {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--timeline-node);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
  border: 2px solid var(--bg-sunk);
}
.tl-node::after {
  content: attr(data-label); position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-size: 0.66rem; color: var(--text-3); white-space: nowrap; font-family: var(--font-mono);
}
.tl-node.active { background: var(--accent); box-shadow: var(--glow); transform: translate(-50%, -50%) scale(1.4); }
.tl-line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--glass-line); }
.timeline-info {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem; color: var(--text-2); min-height: 48px;
}
.timeline-info b { color: var(--accent-ink); }

/* ============================================================
   S1 进程状态轮转模拟 · 上下文切换实验台
   ============================================================ */
.cmp-process-wheel { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.wheel-area { width: 100%; display: flex; justify-content: center; }
.wheel-canvas { width: 100%; max-width: 360px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.process-cores { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
.proc-core {
  padding: var(--sp-1); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); text-align: center; font-family: var(--font-mono); font-size: 0.72rem;
  cursor: pointer; transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.proc-core:hover { border-color: var(--accent); }
.proc-core.ready { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.proc-core.running { border-color: var(--ch-ok); color: var(--ch-ok); background: rgba(34,197,94,0.12); box-shadow: 0 0 12px rgba(34,197,94,0.3); }
.proc-core.blocked { border-color: var(--ch-warn); color: var(--ch-warn); background: rgba(239,68,68,0.08); opacity: 0.7; }
.proc-core .pc-state { font-size: 0.62rem; color: var(--text-3); }
.freq-knob { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.util-curve { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.util-readout { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 28px; text-align: center; }
.util-readout.warn { color: var(--ch-warn); }
.pcb-card { width: 100%; padding: var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--accent-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.pcb-card h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.pcb-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); }
.pcb-field {
  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.72rem; display: flex; justify-content: space-between;
}
.pcb-field .pf-key { color: var(--text-3); }
.pcb-field .pf-val { color: var(--accent-ink); }

.exclude-mark {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); font-size: 0.82rem; color: var(--ch-epiphany-ink);
  font-style: italic; animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S2 调度五算法推演器
   ============================================================ */
.cmp-scheduler-arena { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.thread-split { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); display: flex; flex-direction: column; gap: var(--sp-1); align-items: center; }
.thread-shards { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; }
.thread-shard {
  padding: 4px 10px; border: 1px solid var(--accent); border-radius: var(--r-xs);
  background: var(--accent-soft); font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-ink);
}
.algo-runes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
.algo-rune {
  padding: var(--sp-2) var(--sp-1); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center; font-family: var(--font-mono); font-size: 0.72rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.algo-rune:hover { transform: translateY(-2px); }
.algo-rune .rune-name { font-weight: 600; }
.algo-rune .rune-desc { font-size: 0.62rem; color: var(--text-3); }
.algo-rune.active { box-shadow: var(--glow); }
.algo-rune[data-algo="fcfs"] { border-left: 3px solid var(--algo-fcfs); }
.algo-rune[data-algo="fcfs"].active { border-color: var(--algo-fcfs); background: rgba(148,163,184,0.14); color: var(--algo-fcfs); }
.algo-rune[data-algo="sjf"] { border-left: 3px solid var(--algo-sjf); }
.algo-rune[data-algo="sjf"].active { border-color: var(--algo-sjf); background: rgba(16,185,129,0.14); color: var(--algo-sjf); }
.algo-rune[data-algo="rr"] { border-left: 3px solid var(--algo-rr); }
.algo-rune[data-algo="rr"].active { border-color: var(--algo-rr); background: rgba(245,158,11,0.14); color: var(--algo-rr); }
.algo-rune[data-algo="priority"] { border-left: 3px solid var(--algo-priority); }
.algo-rune[data-algo="priority"].active { border-color: var(--algo-priority); background: rgba(167,139,250,0.14); color: var(--algo-priority); }
.algo-rune[data-algo="mlfq"] { border-left: 3px solid var(--algo-mlfq); }
.algo-rune[data-algo="mlfq"].active { border-color: var(--algo-mlfq); background: var(--accent-soft); color: var(--accent-ink); }
.rr-timeslice { padding: var(--sp-2); border: 1px solid var(--algo-rr); border-radius: var(--r-sm); background: rgba(245,158,11,0.08); display: flex; align-items: center; gap: var(--sp-2); justify-content: center; }
.gantt-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.metrics-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.metric-cell {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); text-align: center; font-family: var(--font-mono); font-size: 0.72rem;
}
.metric-cell .mc-key { color: var(--text-3); font-size: 0.66rem; }
.metric-cell .mc-val { color: var(--accent-ink); font-size: 0.92rem; font-weight: 600; }
.collapse-zone { width: 100%; display: flex; flex-direction: column; gap: var(--sp-1); }
.collapse-item {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--starvation); border-radius: var(--r-xs);
  background: rgba(239,68,68,0.10); font-size: 0.76rem; color: var(--starvation);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.collapse-item.convoy { border-color: var(--convoy); background: rgba(245,158,11,0.10); color: var(--convoy); }
.collapse-item.inversion { border-color: var(--priority-inv); background: rgba(220,38,38,0.10); color: var(--priority-inv); }

/* ============================================================
   S3 实时调度模拟器
   ============================================================ */
.cmp-realtime-scheduler { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.rt-mode-toggle { display: flex; gap: var(--sp-2); justify-content: center; }
.rt-mode-toggle .btn { min-width: 130px; }
.rt-mode-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.rt-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.rt-task {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.72rem; text-align: center;
}
.rt-task.missed { border-color: var(--rt-deadline); background: rgba(239,68,68,0.10); color: var(--rt-deadline); }
.rt-task.ok { border-color: var(--rt-ok); background: rgba(34,197,94,0.10); color: var(--rt-ok); }
.rt-util { text-align: center; font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); padding: var(--sp-1); }
.rt-util.over { color: var(--ch-warn); }
.rt-timeline { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.rt-formula {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); text-align: center;
}
.rt-alert {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--rt-deadline); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.12); font-size: 0.85rem; color: var(--rt-deadline);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.rt-overload { display: flex; justify-content: center; }

/* ============================================================
   S4 内存分配三法器 · 虚拟内存
   ============================================================ */
.cmp-memory-domain { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.alloc-toggle { display: flex; gap: var(--sp-2); justify-content: center; }
.alloc-toggle .btn { min-width: 90px; }
.alloc-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.mem-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.mem-controls { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.mem-stats { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); text-align: center; min-height: 24px; }
.mem-stats.warn { color: var(--ch-warn); }
.vm-zone { width: 100%; padding: var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--accent-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.vm-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.tlb-toggle { margin-bottom: var(--sp-2); font-size: 0.78rem; color: var(--text-2); }
.vm-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.pagefault-readout {
  margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--ch-warn); border-radius: var(--r-xs);
  background: rgba(239,68,68,0.10); font-size: 0.78rem; color: var(--ch-warn); min-height: 24px;
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S5 置换曲线追踪器
   ============================================================ */
.cmp-replacement-tracker { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.algo-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
.algo-btn {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center; font-family: var(--font-mono); font-size: 0.72rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.algo-btn:hover { transform: translateY(-1px); }
.algo-btn.active { box-shadow: var(--glow); }
.algo-btn[data-algo="fifo"] { border-left: 3px solid var(--algo-fifo); }
.algo-btn[data-algo="fifo"].active { border-color: var(--algo-fifo); background: rgba(148,163,184,0.14); color: var(--algo-fifo); }
.algo-btn[data-algo="lru"] { border-left: 3px solid var(--algo-lru); }
.algo-btn[data-algo="lru"].active { border-color: var(--algo-lru); background: rgba(16,185,129,0.14); color: var(--algo-lru); }
.algo-btn[data-algo="optimal"] { border-left: 3px solid var(--algo-optimal); }
.algo-btn[data-algo="optimal"].active { border-color: var(--algo-optimal); background: var(--accent-soft); color: var(--accent-ink); }
.algo-btn[data-algo="clock"] { border-left: 3px solid var(--algo-clock); }
.algo-btn[data-algo="clock"].active { border-color: var(--algo-clock); background: rgba(245,158,11,0.14); color: var(--algo-clock); }
.frame-control { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; }
.access-sequence {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); text-align: center;
}
.well-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.curve-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.fault-counter { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); }
.fault-cell {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); text-align: center; font-family: var(--font-mono); font-size: 0.78rem;
}
.fault-cell .fc-key { color: var(--text-3); font-size: 0.66rem; }
.fault-cell .fc-val { color: var(--accent-ink); font-size: 1rem; font-weight: 600; }
.fault-cell .fc-val.bad { color: var(--belady-anomaly); }
.belady-alert {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--belady-anomaly); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.14); font-size: 0.85rem; color: var(--belady-anomaly); text-align: center;
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.thrashing-experiment { width: 100%; padding: var(--sp-3); border: 1px solid var(--thrashing); border-radius: var(--r-sm); background: rgba(220,38,38,0.08); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.thrashing-experiment h4 { font-size: 0.85rem; color: var(--thrashing); margin-bottom: var(--sp-2); }
.thrashing-experiment label { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; font-family: var(--font-mono); font-size: 0.78rem; }
.thrash-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.thrash-readout { font-family: var(--font-mono); font-size: 0.78rem; color: var(--thrashing); text-align: center; min-height: 24px; }

/* ============================================================
   S6 文件塔
   ============================================================ */
.cmp-file-tower { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.disk-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.file-ops { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.inode-card { width: 100%; padding: var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--accent-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.inode-card h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.inode-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); }
.inode-field {
  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.72rem; display: flex; justify-content: space-between;
}
.inode-field .if-key { color: var(--text-3); }
.inode-field .if-val { color: var(--accent-ink); }
.disk-sched { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.disk-sched h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.sched-algos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); margin-bottom: var(--sp-2); }
.sched-algo {
  padding: var(--sp-1); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; text-align: center; font-family: var(--font-mono); font-size: 0.7rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.sched-algo:hover { transform: translateY(-1px); }
.sched-algo.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--glow); }
.sched-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.sched-readout { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); text-align: center; min-height: 24px; }

/* ============================================================
   S7 设备阵 · 内核之门
   ============================================================ */
.cmp-device-kernel { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.io-toggle { display: flex; gap: var(--sp-2); justify-content: center; }
.io-toggle .btn { min-width: 80px; }
.io-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.io-cpu { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); text-align: center; padding: var(--sp-1); min-height: 28px; }
.io-cpu.high { color: var(--ch-warn); }
.io-cpu.low { color: var(--ch-ok); }
.trap-demo { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.trap-demo h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.trap-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.trap-readout { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); min-height: 24px; }
.kernel-arch { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.kernel-arch h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.kernel-arch label { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; font-family: var(--font-mono); font-size: 0.78rem; margin-bottom: var(--sp-2); }
.arch-detail {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem; color: var(--text-2); min-height: 48px;
}

/* ============================================================
   S8 死锁四条件公式组装器
   ============================================================ */
.cmp-deadlock-assembler { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.race-demo { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); display: flex; flex-direction: column; gap: var(--sp-1); align-items: center; }
.race-result {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--race-error); border-radius: var(--r-xs);
  background: rgba(239,68,68,0.10); font-size: 0.78rem; color: var(--race-error); min-height: 24px;
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.race-result.ok { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.sync-methods { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; align-items: center; }
.sync-result { width: 100%; 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.78rem; color: var(--text-2); min-height: 24px; }
.deadlock-constructor { width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm); background: var(--ch-boss-soft); }
.deadlock-constructor h4 { font-size: 0.85rem; color: var(--ch-boss); margin-bottom: var(--sp-2); }
.condition-fragments { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.cond-frag {
  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.72rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.cond-frag:hover { border-color: var(--ch-boss); box-shadow: 0 0 12px var(--ch-boss-soft); }
.cond-frag.dragging { opacity: 0.5; cursor: grabbing; }
.cond-frag.placed { opacity: 0.3; cursor: default; }
.cond-frag.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.condition-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); margin-bottom: var(--sp-2); }
.cond-slot {
  padding: var(--sp-2); border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.cond-slot .cs-key { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); }
.cond-slot .cs-drop { font-size: 0.72rem; color: var(--text-3); font-style: italic; }
.cond-slot.over { border-color: var(--ch-boss); background: var(--ch-boss-soft); }
.cond-slot.filled { border-style: solid; border-color: var(--condition-met); background: rgba(124,58,237,0.12); }
.cond-slot.filled .cs-drop { color: var(--ch-boss); font-style: normal; }
.deadlock-ring {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm);
  background: var(--ch-boss-soft); text-align: center; font-size: 0.82rem; color: var(--ch-boss); min-height: 36px;
  display: flex; align-items: center; justify-content: center; transition: all 500ms cubic-bezier(0.22,1,0.36,1);
}
.deadlock-ring.complete { box-shadow: 0 0 24px var(--ch-boss-soft); font-weight: 600; }
.buffer-overflow-demo { width: 100%; padding: var(--sp-3); border: 1px solid var(--buffer-overflow); border-radius: var(--r-sm); background: rgba(220,38,38,0.06); }
.buffer-overflow-demo h4 { font-size: 0.85rem; color: var(--buffer-overflow); margin-bottom: var(--sp-2); }
.stack-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.stack-protections { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.stack-protections .btn { min-width: 110px; }
.stack-protections .btn.active.canary { background: rgba(16,185,129,0.14); border-color: var(--canary-shield); color: var(--canary-shield); }
.stack-protections .btn.active.nx { background: var(--accent-soft); border-color: var(--nx-shield); color: var(--nx-shield); }
.stack-protections .btn.active.aslr { background: rgba(167,139,250,0.14); border-color: var(--aslr-shield); color: var(--aslr-shield); }
.overflow-readout { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); min-height: 24px; }

/* ============================================================
   S9 Boss 战 · 死锁之环
   ============================================================ */
#s9-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.ring-ledger {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-boss-line);
  border-radius: var(--r-sm); background: var(--ch-boss-soft);
  font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--sp-2);
}
.ring-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.ring-ledger .ledger-line b { color: var(--ch-boss); font-style: normal; }
.ring-tighten-meter {
  width: 100%; height: 8px; border: 1px solid var(--ch-boss-line); border-radius: 4px;
  background: var(--bg-elev); margin-bottom: var(--sp-2); overflow: hidden;
}
.ring-tighten-fill { height: 100%; width: 0; background: var(--ring-vortex); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.elimination-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--scar-mark); border-radius: var(--r-sm);
  background: rgba(6,182,212,0.06); margin-top: var(--sp-2);
}
.elimination-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.elim-item {
  padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.76rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.elim-item.lit { border-color: var(--scar-mark); color: var(--accent-ink); background: rgba(6,182,212,0.10); }
.elim-item.striked { text-decoration: line-through; opacity: 0.4; }
.ring-collapse {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--crack-light); border-radius: var(--r-sm);
  background: rgba(6,182,212,0.10); text-align: center; color: var(--accent-ink); font-style: italic;
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes shatterIn {
  0% { opacity: 0; transform: scale(0.8) rotate(-2deg); }
  50% { opacity: 1; transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============================================================
   S10 知识图谱点亮 + 资源环剪影
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.depth-readout { padding: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-ink); text-align: center; min-height: 28px; }
.depth-curve { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.system-map h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.map-node.lit.center { border-color: var(--ch-epiphany); background: var(--ch-epiphany-soft); color: var(--ch-epiphany-ink); box-shadow: 0 0 12px var(--ch-epiphany-soft); }
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--accent-soft); }
  50% { box-shadow: 0 0 32px rgba(6,182,212,0.4); }
}
/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@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; }
  .program-silhouettes { grid-template-columns: repeat(2, 1fr); }
  .process-cores { grid-template-columns: repeat(3, 1fr); }
  .algo-runes { grid-template-columns: repeat(2, 1fr); }
  .algo-selector { grid-template-columns: repeat(2, 1fr); }
  .rt-tasks { grid-template-columns: 1fr; }
  .pcb-fields { grid-template-columns: 1fr; }
  .inode-fields { grid-template-columns: 1fr; }
  .sched-algos { grid-template-columns: repeat(2, 1fr); }
  .metrics-panel { grid-template-columns: 1fr; }
  .fault-counter { grid-template-columns: 1fr; }
  .condition-slots { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: repeat(2, 1fr); }
  .knob-row { flex-direction: column; align-items: stretch; }
  .knob-unit { min-width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .ring-account, .resource-panorama, .timeline-zone, .pcb-card, .exclude-mark, .rt-alert, .vm-zone, .pagefault-readout, .belady-alert, .thrashing-experiment, .inode-card, .deadlock-constructor, .buffer-overflow-demo, .ring-collapse, .race-result, .collapse-item { animation: none; }
}