/* ============================================================
   ch09「存储器层次结构」章节专属样式
   境界：筑基三层·存储天梯 · 深蓝 #3B82F6（--realm-2 系，与 ch07/ch08 同筑基色系）
   Boss：未命中之罚 · 深紫 #7C3AED（延迟账本 / 排除刻痕）
   顿悟：金 var(--ch-epiphany)（天梯点亮、AMAT 曲线、认知贯通）
   全部色值走 tokens 变量；类名体系与 ch01-ch08 对齐。
   禁止纯黑背景；发光仅限边框/背景，不出现在文字区。
   ============================================================ */

/* ---------- 章节境界色覆写：深蓝筑基（同 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;
  /* 存储层次层色（与 S0 排梯铭牌对应） */
  --ch-tier-reg: var(--ch-amber);      /* 寄存器 · 琥珀 */
  --ch-tier-l1: #0EA5E9;       /* L1 · 天蓝 */
  --ch-tier-l2: #06B6D4;       /* L2 · 青 */
  --ch-tier-l3: #0891B2;       /* L3 · 深青 */
  --ch-tier-dram: #8B5CF6;     /* 主存 · 紫 */
  --ch-tier-ssd: #6366F1;      /* SSD · 靛 */
  --ch-tier-hdd: #4F46E5;      /* HDD · 深靛 */
  /* 3C 缺失分类色 */
  --ch-miss-c: var(--ch-amber);        /* 强制缺失 · 金 */
  --ch-miss-a: #8B5CF6;        /* 容量缺失 · 紫 */
  --ch-miss-k: var(--ch-boss);        /* 冲突缺失 · 红 */
  --ch-hit: #22C55E;           /* 命中 · 绿 */
  /* 排除刻痕 ①-④ 色 */
  --ch-scar-1: var(--ch-amber);        /* ① AMAT非线性 */
  --ch-scar-2: #8B5CF6;        /* ② 增容无用 */
  --ch-scar-3: var(--ch-boss);        /* ③ 延迟的账 */
  --ch-scar-4: #06B6D4;        /* ④ 缺页需OS */
  /* 状态色 */
  --ch-ok: #22C55E;            /* 成功 */
  --ch-warn: var(--ch-boss);          /* 警示 / 违例 */
  --ch-dontcare: var(--ch-amber);      /* don't care */
  --ch-code: #0EA5E9;          /* 代码文本色 */
  /* 地址字段色（S8） */
  --ch-va: #0EA5E9;            /* 虚拟地址 · 天蓝 */
  --ch-pa: #10B981;            /* 物理地址 · 翠绿 */
  --ch-pt: #8B5CF6;            /* 页表 · 紫 */
  --ch-tlb: var(--ch-amber);           /* TLB · 琥珀 */
}
/* ---------- 导师 / 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); }
/* ---------- 排除刻痕标记（崩塌场显示） ---------- */
.scar-mark {
  width: 100%; margin-top: var(--sp-3); padding: var(--sp-3);
  border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm);
  background: var(--ch-boss-soft); display: flex; align-items: center; gap: var(--sp-2);
  animation: scarIn 600ms cubic-bezier(0.22,1,0.36,1);
}
.scar-mark .scar-num {
  font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700;
  color: var(--ch-epiphany); text-shadow: 0 0 12px var(--ch-epiphany-soft);
}
.scar-mark .scar-text {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--ch-boss);
}
@keyframes scarIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   S0 存储层次倍率预测挑战器
   ============================================================ */
.bet-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-boss-line);
  border-radius: var(--r-sm); background: var(--ch-boss-soft);
}
.bet-panel .abyss-dialogue {
  font-style: italic; margin-bottom: var(--sp-2); color: var(--ch-boss);
}
.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 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; }
.ladder-assembly {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.ladder-slots { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.ladder-slot {
  display: flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  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.8rem; color: var(--text-3);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.ladder-slot.filled { border-style: solid; border-color: var(--accent); color: var(--text-1); }
.ladder-slot .slot-rank { min-width: 40px; color: var(--accent-ink); }
.ladder-slot .slot-ratio { margin-left: auto; font-size: 0.7rem; color: var(--ch-epiphany-ink); }
.tier-cards { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.tier-card {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev); cursor: grab;
  font-family: var(--font-mono); font-size: 0.8rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.tier-card:hover { border-color: var(--accent); box-shadow: var(--glow); transform: translateY(-2px); }
.tier-card.placed { opacity: 0.3; cursor: default; }
.tier-card[data-tier="reg"] { border-color: var(--ch-tier-reg); color: var(--ch-tier-reg); }
.tier-card[data-tier="l1"] { border-color: var(--ch-tier-l1); color: var(--ch-tier-l1); }
.tier-card[data-tier="l2"] { border-color: var(--ch-tier-l2); color: var(--ch-tier-l2); }
.tier-card[data-tier="l3"] { border-color: var(--ch-tier-l3); color: var(--ch-tier-l3); }
.tier-card[data-tier="dram"] { border-color: var(--ch-tier-dram); color: var(--ch-tier-dram); }
.tier-card[data-tier="ssd"] { border-color: var(--ch-tier-ssd); color: var(--ch-tier-ssd); }
.tier-card[data-tier="hdd"] { border-color: var(--ch-tier-hdd); color: var(--ch-tier-hdd); }
.locality-lever {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.lever-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.lever-row label { min-width: 140px; font-family: var(--font-mono); font-size: 0.8rem; }
.lever-row input[type="range"] { flex: 1; }
.hit-rate-meter {
  padding: var(--sp-2); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
  text-align: center; font-family: var(--font-mono);
}
.hit-rate-meter b { font-size: 1.2rem; color: var(--ch-epiphany-ink); }
.speed-ratio-display {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--accent);
  border-radius: var(--r-sm); background: var(--accent-soft);
  text-align: center; font-family: var(--font-mono); font-size: 0.9rem;
}

/* ============================================================
   S1 SRAM / DRAM 拆解 + 天平
   ============================================================ */
.cell-decompose-row {
  width: 100%; display: flex; gap: var(--sp-3); flex-wrap: wrap;
}
.sram-decomposer, .dram-decomposer {
  flex: 1; min-width: 260px;
  padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.sram-decomposer { border-color: var(--ch-tier-l1); }
.dram-decomposer { border-color: var(--ch-tier-dram); }
.sram-decomposer svg, .dram-decomposer svg { width: 100%; height: auto; }
.sram-info, .dram-info {
  margin-top: var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-2); min-height: 60px;
}
.balance-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
}
.balance-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.balance-bar { display: flex; align-items: center; gap: var(--sp-2); }
.balance-bar .bb-label { min-width: 80px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); }
.balance-bar .bb-track {
  flex: 1; height: 24px; background: var(--bg-elev); border-radius: var(--r-xs);
  border: 1px solid var(--glass-line); overflow: hidden; position: relative;
}
.balance-bar .bb-fill { height: 100%; border-radius: var(--r-xs); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.balance-bar[data-dim="area"] .bb-fill { background: var(--ch-tier-l1); }
.balance-bar[data-dim="density"] .bb-fill { background: var(--ch-tier-dram); }
.balance-bar[data-dim="speed"] .bb-fill { background: var(--ch-tier-reg); }
.balance-bar .bb-val { min-width: 60px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-ink); }
.balance-bar .bb-group { display: flex; gap: 2px; flex: 1; }

/* ============================================================
   S2 AMAT 公式拼装器
   ============================================================ */
.amat-formula-area {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.formula-slots {
  display: flex; align-items: center; gap: var(--sp-2); justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.formula-slot {
  min-width: 100px; min-height: 56px; padding: var(--sp-2);
  border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-3);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.formula-slot.filled {
  border-style: solid; border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft);
}
.formula-slot .op {
  min-width: 20px; text-align: center; font-weight: 700; color: var(--text-2);
  border: none; background: none; padding: 0;
}
.operator-pool, .value-pool {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2);
}
.op-chip, .val-chip {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.85rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.op-chip:hover, .val-chip:hover { border-color: var(--accent); box-shadow: var(--glow); }
.op-chip.placed, .val-chip.placed { opacity: 0.3; cursor: default; }
.amat-result-box {
  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);
}
.stone-flip-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.flip-row { display: flex; gap: var(--sp-3); }
.flip-cell {
  flex: 1; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev); text-align: center;
}
.flip-cell.ideal { border-color: var(--ch-ok); }
.flip-cell.actual { border-color: var(--ch-warn); }
.flip-cell b { display: block; font-size: 1.4rem; font-family: var(--font-mono); margin-top: var(--sp-1); }
.flip-cell.ideal b { color: var(--ch-ok); }
.flip-cell.actual b { color: var(--ch-warn); }

/* ============================================================
   S3 AMAT 悬崖曲线追踪器
   ============================================================ */
.amat-chart-area {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.amat-chart-area svg { width: 100%; height: auto; }
.hit-rate-slider-row {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2);
}
.hit-rate-slider-row input[type="range"] { flex: 1; min-width: 200px; }
.amat-calc-row {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--accent);
  border-radius: var(--r-sm); background: var(--accent-soft);
  font-family: var(--font-mono); font-size: 0.9rem; text-align: center;
}
.amat-calc-row b { font-size: 1.2rem; color: var(--ch-epiphany-ink); }
.metrics-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.metric-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.metric-bar { display: flex; align-items: center; gap: var(--sp-2); }
.metric-bar .m-label { min-width: 80px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); }
.metric-bar .m-track {
  flex: 1; height: 20px; background: var(--bg-elev); border-radius: var(--r-xs);
  border: 1px solid var(--glass-line); overflow: hidden;
}
.metric-bar .m-fill { height: 100%; border-radius: var(--r-xs); transition: width 400ms cubic-bezier(0.22,1,0.36,1); }
.metric-bar[data-metric="latency"] .m-fill { background: var(--ch-tier-l1); }
.metric-bar[data-metric="bandwidth"] .m-fill { background: var(--ch-ok); }
.metric-bar[data-metric="throughput"] .m-fill { background: var(--ch-epiphany); }
.metric-bar .m-val { min-width: 60px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-ink); }
.multi-level-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
}
.multi-amat-result {
  margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 1rem;
  color: var(--ch-epiphany-ink); text-align: center;
}

/* ============================================================
   S4 映射阵 · 地址拆解
   ============================================================ */
.addr-decompose {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.addr-slots { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }
.addr-slot {
  min-width: 100px; min-height: 60px; padding: var(--sp-2);
  border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-3);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.addr-slot.filled { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.addr-slot .slot-name { font-size: 0.7rem; color: var(--text-2); }
.addr-slot .slot-bits { font-size: 1rem; font-weight: 600; }
.mapping-selector {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2);
}
.map-option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.85rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.map-option:hover { border-color: var(--accent); }
.map-option.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: var(--glow);
}
.map-canvas {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.map-canvas svg { width: 100%; height: auto; }
.ways-control {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2);
}
.ways-control input[type="range"] { flex: 1; min-width: 180px; }
.conflict-demo { width: 100%; text-align: center; }

/* ============================================================
   S5 3C 缺失分类相图
   ============================================================ */
.cache-vis-area {
  width: 100%; display: flex; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.cache-grid {
  flex: 1; min-width: 240px; display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
}
.cache-set {
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); padding: 2px; min-height: 50px;
  display: flex; flex-direction: column; gap: 2px;
}
.cache-set-label { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-3); text-align: center; }
.cache-way {
  min-height: 18px; padding: 1px 2px; border: 1px solid var(--glass-line);
  border-radius: 2px; background: var(--bg-sunk); font-family: var(--font-mono);
  font-size: 0.6rem; text-align: center; color: var(--text-3);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.cache-way.hit { background: rgba(34,197,94,0.2); border-color: var(--ch-hit); color: var(--ch-hit); }
.cache-way.miss-c { background: rgba(245,158,11,0.2); border-color: var(--ch-miss-c); color: var(--ch-miss-c); }
.cache-way.miss-a { background: rgba(139,92,246,0.2); border-color: var(--ch-miss-a); color: var(--ch-miss-a); }
.cache-way.miss-k { background: rgba(239,68,68,0.2); border-color: var(--ch-miss-k); color: var(--ch-miss-k); }
.cache-way.dirty { box-shadow: 0 0 6px var(--ch-miss-c); }
.hit-miss-panel {
  flex: 1; min-width: 180px; padding: var(--sp-2);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.75rem;
}
.run-row { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-2); }
.map-switch {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2);
}
.slider-row-3c { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.slider-cell { flex: 1; min-width: 200px; padding: var(--sp-2); }
.slider-cell label { display: block; margin-bottom: var(--sp-1); }
.slider-cell input[type="range"] { width: 100%; }
.phase-diagram-area {
  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);
}
.phase-diagram-area svg { width: 100%; height: auto; }
.miss-breakdown {
  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);
}
.breakdown-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.bd-bar { display: flex; align-items: center; gap: var(--sp-2); }
.bd-bar .bd-label { min-width: 80px; font-family: var(--font-mono); font-size: 0.8rem; }
.bd-bar[data-type="C"] .bd-label { color: var(--ch-miss-c); }
.bd-bar[data-type="A"] .bd-label { color: var(--ch-miss-a); }
.bd-bar[data-type="K"] .bd-label { color: var(--ch-miss-k); }
.bd-bar .bd-track {
  flex: 1; height: 18px; background: var(--bg-elev); border-radius: var(--r-xs);
  border: 1px solid var(--glass-line); overflow: hidden;
}
.bd-bar .bd-fill { height: 100%; transition: width 400ms cubic-bezier(0.22,1,0.36,1); }
.bd-bar[data-type="C"] .bd-fill { background: var(--ch-miss-c); }
.bd-bar[data-type="A"] .bd-fill { background: var(--ch-miss-a); }
.bd-bar[data-type="K"] .bd-fill { background: var(--ch-miss-k); }
.bd-bar .bd-val { min-width: 40px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-ink); }

/* ============================================================
   S6 替换殿 · LRU 代价
   ============================================================ */
.strategy-selector {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
}
.strategy-option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.85rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.strategy-option:hover { border-color: var(--accent); }
.strategy-option.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: var(--glow);
}
.access-seq-area {
  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);
}
.way-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); margin-top: var(--sp-2);
}
.way-cell {
  min-height: 50px; padding: var(--sp-1); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev);
  font-family: var(--font-mono); font-size: 0.75rem; text-align: center;
  color: var(--text-3); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.way-cell.filled { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.way-cell.evicted { color: var(--ch-warn); border-color: var(--ch-warn); background: rgba(239,68,68,0.08); }
.seq-trace {
  margin-top: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); min-height: 40px;
}
.cost-curve-area {
  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);
}
.cost-curve-area svg { width: 100%; height: auto; }
.hitrate-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);
}
.hr-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.hr-bar { display: flex; align-items: center; gap: var(--sp-2); }
.hr-bar .hr-label { min-width: 80px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); }
.hr-bar .hr-track {
  flex: 1; height: 20px; background: var(--bg-elev); border-radius: var(--r-xs);
  border: 1px solid var(--glass-line); overflow: hidden;
}
.hr-bar .hr-fill { height: 100%; border-radius: var(--r-xs); transition: width 500ms cubic-bezier(0.22,1,0.36,1); }
.hr-bar[data-strat="LRU"] .hr-fill { background: var(--ch-ok); }
.hr-bar[data-strat="PLRU"] .hr-fill { background: var(--accent); }
.hr-bar[data-strat="FIFO"] .hr-fill { background: var(--ch-tier-dram); }
.hr-bar[data-strat="RAND"] .hr-fill { background: var(--text-3); }
.hr-bar .hr-val { min-width: 50px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-ink); }

/* ============================================================
   S7 写策略 + 多级塔
   ============================================================ */
.write-policy-area {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.policy-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; font-family: var(--font-mono);
  font-size: 0.8rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.policy-cell:hover { border-color: var(--accent); }
.policy-cell.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.write-throughput {
  margin-top: var(--sp-2); 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: 0.85rem; text-align: center;
}
.multi-tower-area {
  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);
}
.multi-tower-area svg { width: 100%; height: auto; }
.multi-amat-box {
  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);
}
.multi-amat-result { font-family: var(--font-mono); font-size: 1rem; color: var(--ch-epiphany-ink); text-align: center; margin-top: var(--sp-1); }
.multi-amat-result b { font-size: 1.3rem; }

/* ============================================================
   S8 虚拟地址翻译
   ============================================================ */
.vaddr-decompose {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.addr-fields { display: flex; gap: 2px; margin-top: var(--sp-2); flex-wrap: wrap; }
.addr-field {
  flex: 1; min-width: 60px; padding: var(--sp-1); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev); text-align: center;
  font-family: var(--font-mono); font-size: 0.7rem; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.addr-field .field-name { display: block; font-size: 0.65rem; color: var(--text-3); }
.addr-field .field-val { display: block; font-weight: 600; color: var(--text-2); }
.addr-field[data-field="vpn4"], .addr-field[data-field="vpn3"],
.addr-field[data-field="vpn2"], .addr-field[data-field="vpn1"] { border-color: var(--ch-pt); }
.addr-field[data-field="offset"] { border-color: var(--ch-va); }
.addr-field.active { background: var(--accent-soft); border-color: var(--accent); box-shadow: var(--glow); }
.translation-canvas {
  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);
}
.translation-canvas svg { width: 100%; height: auto; }
.trans-control-row {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2);
}
.paddr-output {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-pa);
  border-radius: var(--r-sm); background: rgba(16,185,129,0.10);
  text-align: center; font-family: var(--font-mono); font-size: 0.95rem; color: var(--ch-pa);
  margin-top: var(--sp-2);
}
.mirror-panel {
  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);
}
.mirror-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mirror-col {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev);
}
.mirror-col h5 { font-size: 0.85rem; margin-bottom: var(--sp-1); color: var(--accent-ink); }
.mirror-row {
  display: flex; justify-content: space-between; padding: 2px 0;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2);
  border-bottom: 1px dashed var(--glass-line);
}
.mirror-row:last-child { border-bottom: none; }

/* ============================================================
   S9 缺页深渊
   ============================================================ */
.pagefault-flow {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.flow-steps { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
.flow-step {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--text-3); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
  display: flex; align-items: center; gap: var(--sp-2);
}
.flow-step .step-num {
  min-width: 24px; height: 24px; border-radius: 50%; background: var(--bg-sunk);
  border: 1px solid var(--glass-line); display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--text-3);
}
.flow-step.done { color: var(--text-1); border-color: var(--accent); }
.flow-step.done .step-num { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.flow-step.current { border-color: var(--ch-warn); background: rgba(239,68,68,0.08); color: var(--ch-warn); }
.flow-step.current .step-num { background: var(--ch-warn); color: #FFFFFF; border-color: var(--ch-warn); }
.flow-step .step-delay { margin-left: auto; font-size: 0.7rem; color: var(--ch-epiphany-ink); }
.latency-ladder-area {
  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);
}
.latency-ladder-area svg { width: 100%; height: auto; }
.tech-medals-area {
  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);
}
.medal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.medal-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.medal-card:hover { border-color: var(--accent); box-shadow: var(--glow); }
.medal-card.lit { transform: translateY(-2px); }
.medal-card[data-tech="hbm"] { border-color: var(--ch-tier-ssd); }
.medal-card[data-tech="nand"] { border-color: var(--ch-hit); }
.medal-card[data-tech="nvm"] { border-color: var(--ch-tier-reg); }
.medal-card h5 { font-size: 0.9rem; margin-bottom: var(--sp-1); }
.medal-card .medal-info { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-2); }

/* ============================================================
   S10 Boss 战 · 未命中之罚
   ============================================================ */
#s10-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.q-progress-bar .q-dot.current { background: var(--accent); box-shadow: var(--glow); }
.q-panel .q-tag {
  display: inline-block; font-size: 0.7rem; font-family: var(--font-mono);
  color: var(--ch-boss); background: var(--ch-boss-soft); padding: 1px 8px;
  border-radius: 3px; margin-bottom: var(--sp-2); letter-spacing: 0.1em;
}
.exclude-trace-panel {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.exclude-trace-panel h4 { font-size: 0.85rem; color: var(--ch-boss); margin-bottom: var(--sp-2); }
.trace-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); }
.trace-item {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev);
  font-size: 0.75rem; color: var(--text-3); text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); display: flex; align-items: center; gap: var(--sp-1);
}
.trace-item .trace-num {
  font-family: var(--font-serif); font-size: 1rem; font-weight: 700;
  color: var(--text-3);
}
.trace-item.lit { color: var(--text-1); border-color: var(--ch-epiphany); }
.trace-item.lit .trace-num { color: var(--ch-epiphany); }
.trace-item[data-trace="1"].lit { border-color: var(--ch-scar-1); }
.trace-item[data-trace="1"].lit .trace-num { color: var(--ch-scar-1); }
.trace-item[data-trace="2"].lit { border-color: var(--ch-scar-2); }
.trace-item[data-trace="2"].lit .trace-num { color: var(--ch-scar-2); }
.trace-item[data-trace="3"].lit { border-color: var(--ch-scar-3); }
.trace-item[data-trace="3"].lit .trace-num { color: var(--ch-scar-3); }
.trace-item[data-trace="4"].lit { border-color: var(--ch-scar-4); }
.trace-item[data-trace="4"].lit .trace-num { color: var(--ch-scar-4); }
.trace-item.struck { text-decoration: line-through; opacity: 0.5; }
.flush-reload-demo {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-3);
  border: 1px solid var(--ch-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.08);
}
.fr-steps { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.fr-step {
  flex: 1; min-width: 120px; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev); text-align: center;
  font-family: var(--font-mono); font-size: 0.75rem; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.fr-step.active { border-color: var(--ch-warn); background: rgba(239,68,68,0.12); }
.fr-timing { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.fr-timing-bar {
  flex: 1; min-width: 120px; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev);
}
.fr-timing-bar .ft-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
.fr-timing-bar .ft-bar {
  height: 20px; margin-top: var(--sp-1); border-radius: var(--r-xs);
  transition: width 600ms cubic-bezier(0.22,1,0.36,1);
}
.fr-timing-bar[data-line="secret"] .ft-bar { background: var(--ch-tier-l1); }
.fr-timing-bar[data-line="normal"] .ft-bar { background: var(--ch-miss-k); }
.defense-panel {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-3);
  border: 1px solid var(--ch-ok); border-radius: var(--r-sm);
  background: rgba(34,197,94,0.08);
}
.defense-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.defense-item {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.8rem;
}
.defense-item h5 { color: var(--ch-ok); font-size: 0.85rem; margin-bottom: var(--sp-1); }

/* ---------- 境界达成 ---------- */
.realm-achieved {
  width: 100%; margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-md);
  background: var(--ch-epiphany-soft); text-align: center;
  animation: realmGlow 2s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--ch-epiphany-soft); }
  50% { box-shadow: 0 0 32px rgba(251,191,36,0.4); }
}
.realm-glow {
  font-family: var(--font-serif); font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--ch-epiphany-ink); letter-spacing: 0.3em; font-weight: 700;
}

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@media (max-width: 640px) {
  .op-title { font-size: clamp(2rem, 12vw, 3.5rem); }
  .op-sub { letter-spacing: 0.3em; }
  .option-grid { grid-template-columns: 1fr; }
  .cell-decompose-row { flex-direction: column; }
  .ladder-slots { gap: 2px; }
  .ladder-slot { min-height: 36px; font-size: 0.7rem; }
  .flip-row { flex-direction: column; }
  .cache-vis-area { flex-direction: column; }
  .cache-grid { grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); }
  .slider-row-3c { flex-direction: column; }
  .way-grid { grid-template-columns: repeat(2, 1fr); }
  .policy-grid { grid-template-columns: 1fr; }
  .addr-fields { flex-direction: column; }
  .mirror-grid { grid-template-columns: 1fr; }
  .medal-grid { grid-template-columns: 1fr; }
  .trace-list { grid-template-columns: 1fr; }
  .fr-steps { flex-direction: column; }
  .fr-timing { flex-direction: column; }
  .map-chain { flex-direction: column; align-items: flex-start; }
  .lever-row { flex-direction: column; align-items: flex-start; }
  .lever-row label { min-width: 0; }
  .balance-bar .bb-label { min-width: 60px; font-size: 0.7rem; }
  .hit-rate-slider-row { flex-direction: column; align-items: stretch; }
  .amat-calc-row { font-size: 0.8rem; }
}

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