/* ============================================================
   ch20「数据库系统基础」章节专属样式
   境界：元婴四层·数据筑基 · 数据青 var(--answer-correct)
   Boss：不一致之雾 · 雾灰白 #C9D4E3
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   并发冲突：赤红 var(--ch-boss)
   事务之伤：数据青碎片 var(--answer-correct)
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：数据青 ---------- */
:root, :root[data-theme="light"] {
  --accent: #0891B2;
  --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: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #22D3EE;
  --accent-ink: #06B6D4;
  --accent-soft: rgba(6, 182, 212, 0.16);
  --glass-line: rgba(34, 211, 238, 0.22);
  --glow: 0 0 22px rgba(6, 182, 212, 0.34);
  --on-accent: #031016;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #94A3B8;          /* 不一致之雾 · 雾灰 */
  --ch-boss-ink: #C9D4E3;      /* 雾白 */
  --ch-boss-soft: rgba(148, 163, 184, 0.22);
  --ch-boss-line: rgba(148, 163, 184, 0.42);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟突破金（理解发生之处） */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  --ch-conflict: var(--ch-boss);      /* 并发冲突赤红 */
  --ch-conflict-soft: rgba(239, 68, 68, 0.14);
  --ch-conflict-ink: #DC2626;
  --ch-cyan: #06B6D4;          /* 数据青 */
  --ch-cyan-soft: rgba(6, 182, 212, 0.14);
  --ch-cyan-ink: #0E7490;
  /* 三条贯穿机制色 */
  --fog-debt: var(--ch-boss);         /* 雾账赤红光页 */
  --fog-debt-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: #06B6D4;       /* 排除刻痕数据青微光 */
  --carve-soft: rgba(6, 182, 212, 0.14);
  --wound-shard: #06B6D4;      /* 事务之伤碎片青 */
  --wound-crack: #F87171;      /* 事务之伤裂缝红 */
  /* 数据库分层功能色 */
  --layer-rel: #06B6D4;        /* 关系层青 */
  --layer-sql: #10B981;        /* SQL层翠 */
  --layer-design: var(--ch-epiphany);     /* 设计层金 */
  --layer-index: #38BDF8;      /* 索引层天蓝 */
  --layer-plan: #A78BFA;       /* 执行计划层紫 */
  --layer-tx: var(--ch-amber);         /* 事务层琥珀 */
  --layer-lock: var(--ch-boss);       /* 锁阵层红 */
  --layer-recover: #22C55E;    /* 恢复层绿 */
  /* S0 五场景色 */
  --case-bank: var(--ch-epiphany);        /* 银行金 */
  --case-ecom: #06B6D4;        /* 电商青 */
  --case-flight: #38BDF8;      /* 航班蓝 */
  --case-social: #A78BFA;      /* 社交紫 */
  --case-logistics: #22C55E;   /* 物流绿 */
  /* S3 范式 */
  --nf-1: #94A3B8;             /* 1NF灰 */
  --nf-2: #06B6D4;             /* 2NF青 */
  --nf-3: #10B981;             /* 3NF翠 */
  --nf-bcnf: #8B5CF6;          /* BCNF紫 */
  --anomaly-crack: var(--ch-boss);   /* 异常裂纹红 */
  --normalization-heal: #06B6D4; /* 范式青光愈合 */
  --entity-block: var(--ch-epiphany);    /* ER实体金 */
  /* S4 索引 */
  --bplus-node: #06B6D4;       /* B+树节点青 */
  --bplus-leaf: #22D3EE;       /* B+树叶子 */
  --hash-bucket: var(--ch-epiphany);      /* 哈希桶金 */
  /* S7 锁 */
  --lock-shared: rgba(251,191,36,0.5); /* S锁半透金 */
  --lock-exclusive: var(--ch-epiphany);   /* X锁实心金 */
  --wait-edge: var(--ch-boss);        /* 等待光链红 */
  --deadlock-cycle: #DC2626;   /* 死锁环暗红 */
  --victim-rollback: #F87171;  /* 牺牲者回滚红 */
  /* S8 ARIES */
  --log-record: var(--ch-epiphany);       /* 日志卷轴金 */
  --redo-flow: #06B6D4;        /* Redo正向青流 */
  --undo-flow: #A78BFA;        /* Undo逆向紫流 */
  --clr-record: var(--ch-epiphany);       /* CLR补偿记录金 */
  --winner-tx: #22C55E;        /* winner事务绿 */
  --loser-tx: var(--ch-boss);         /* loser事务红 */
  --checkpoint: #10B981;       /* 检查点翠 */
  /* S9 Boss */
  --fog-face: #94A3B8;         /* 雾脸灰 */
  --answer-correct: #06B6D4;   /* 正解数据青光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #475569;/* 被刻痕划去选项灰 */
  --net-gold: var(--ch-epiphany);         /* 收网金光 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  /* 选项/状态色 */
  --opt-correct: #22C55E;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #475569;
  --ch-ok: #22C55E;
  --ch-warn: var(--ch-boss);
  --ch-bg-warm: var(--ch-bg-warm);       /* 暖深蓝灰背景 */
}

/* ---------- 开场（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, #0A1822) 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-cyan-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--wound-crack);
  background: rgba(248,113,113,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #wound-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #wound-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-cyan-ink); }
#carve-list p { font-size: 0.8rem; color: var(--ch-cyan); margin: var(--sp-1) 0; }
#wound-list p { font-size: 0.8rem; color: var(--wound-crack); 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(71,85,105,0.16); }
.sim-range, input[type="range"], .knob-range, select { 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-select {
  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.82rem;
  cursor: pointer;
}
.knob-select:focus { border-color: var(--accent); outline: none; }

/* ============================================================
   S0 数据库依赖预测挑战器
   ============================================================ */
.cmp-database-bet { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-question {
  text-align: center; font-size: 1rem; color: var(--ch-boss-ink);
  padding: var(--sp-2); letter-spacing: 0.06em; font-style: italic;
}
.case-silhouettes {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.case-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); min-height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.case-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.case-card.guessed { opacity: 1; border-color: var(--fog-debt); background: var(--fog-debt-soft); }
.case-card .cc-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.case-card .cc-icon { font-size: 1.2rem; }
.case-card[data-case="bank"] { border-left: 3px solid var(--case-bank); }
.case-card[data-case="ecommerce"] { border-left: 3px solid var(--case-ecom); }
.case-card[data-case="flight"] { border-left: 3px solid var(--case-flight); }
.case-card[data-case="social"] { border-left: 3px solid var(--case-social); }
.case-card[data-case="logistics"] { border-left: 3px solid var(--case-logistics); }
.conflict-popup {
  grid-column: 1 / -1; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--fog-debt);
  border-radius: var(--r-sm); background: var(--fog-debt-soft);
  font-size: 0.8rem; color: var(--text-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.conflict-popup .cp-title { font-weight: 600; color: var(--fog-debt); margin-bottom: 4px; }
.fog-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);
}
.fog-account .acct-line { margin: var(--sp-1) 0; }
.fog-account .acct-line b { color: var(--ch-boss-ink); font-style: normal; }
.consistency-map {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-cyan);
  border-radius: var(--r-sm); background: var(--ch-cyan-soft);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.consistency-map h4 { font-size: 0.85rem; color: var(--ch-cyan-ink); margin-bottom: var(--sp-2); text-align: center; }
.map-nodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
.map-node {
  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.7rem; text-align: center; color: var(--text-3);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4;
}
.map-node.lit { opacity: 1; border-color: var(--ch-cyan); color: var(--ch-cyan-ink); background: var(--ch-cyan-soft); }

/* ============================================================
   S1 关系代数运算台
   ============================================================ */
.cmp-relalg-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.rel-table {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); overflow-x: auto;
}
.rel-table table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.78rem; }
.rel-table th, .rel-table td { padding: 4px 8px; border: 1px solid var(--glass-line); text-align: center; }
.rel-table th { background: var(--bg-elev); color: var(--ch-cyan-ink); font-weight: 600; }
.rel-table td.sel-row { background: var(--ch-cyan-soft); }
.rel-table td.sel-col { background: rgba(251,191,36,0.12); }
.rel-table td.joined { background: rgba(34,197,94,0.12); }
.op-tray {
  display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.op-chip {
  padding: 6px 12px; border: 1px solid var(--accent); border-radius: var(--r-xs);
  background: var(--accent-soft); font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); font-weight: 600;
}
.op-chip:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.op-chip.placed { opacity: 0.4; cursor: default; transform: none; }
.op-chip .op-desc { font-size: 0.65rem; color: var(--text-3); font-weight: 400; display: block; }
.pipeline-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); min-height: 60px;
}
.pipeline-steps { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.pipe-step {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--ch-cyan); border-radius: var(--r-xs);
  background: var(--ch-cyan-soft); font-family: var(--font-mono); font-size: 0.78rem; color: var(--ch-cyan-ink);
  animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1);
}
.pipe-arrow { color: var(--text-3); font-size: 0.9rem; }
.closure-badge {
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-xs); font-size: 0.75rem;
  font-family: var(--font-mono); display: inline-block;
}
.closure-badge.ok { border: 1px solid var(--ch-ok); background: rgba(34,197,94,0.12); color: var(--ch-ok); }
.closure-badge.err { border: 1px solid var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.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 SQL 炼炉
   ============================================================ */
.cmp-sql-forge { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.forge-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.forge-mouth {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; min-height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.forge-mouth[data-cat="ddl"] { border-top: 3px solid var(--layer-design); }
.forge-mouth[data-cat="dml"] { border-top: 3px solid var(--layer-sql); }
.forge-mouth[data-cat="dcl"] { border-top: 3px solid var(--layer-plan); }
.forge-mouth.lit { background: var(--accent-soft); border-color: var(--accent); box-shadow: var(--glow); }
.forge-mouth .fm-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.forge-mouth .fm-items { font-size: 0.7rem; color: var(--text-3); min-height: 20px; }
.spell-cards { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.spell-card {
  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.78rem; color: var(--text-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.spell-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.spell-card.placed { opacity: 0.4; cursor: default; transform: none; }
.spell-card.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.query-layered {
  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);
}
.query-layered h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.layer-line {
  padding: var(--sp-1) var(--sp-2); margin-bottom: 2px; border-left: 2px solid var(--layer-sql);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-1);
  background: var(--bg-elev); animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1);
}
.layer-line .ll-tag { color: var(--text-3); font-size: 0.68rem; margin-right: 6px; }
.view-seal {
  width: 100%; padding: var(--sp-2) 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.8rem; color: var(--ch-epiphany-ink);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S3 范式升降机推演器
   ============================================================ */
.cmp-normalization-elevator { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.anomaly-sandbox {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--anomaly-crack); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.06);
}
.anomaly-sandbox h4 { font-size: 0.85rem; color: var(--ch-warn); margin-bottom: var(--sp-2); }
.anomaly-buttons { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.anomaly-btn {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--anomaly-crack); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--ch-warn); font-size: 0.78rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.anomaly-btn:hover { background: rgba(239,68,68,0.12); }
.anomaly-btn.triggered { background: var(--fog-debt-soft); }
.anomaly-display {
  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; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.anomaly-display.crack { border-color: var(--anomaly-crack); color: var(--ch-warn); }
.er-canvas {
  width: 100%; padding: var(--sp-2); 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);
}
.er-canvas canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.nf-elevator {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.nf-track { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.nf-level {
  flex: 1; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; cursor: pointer;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.5;
}
.nf-level:hover { opacity: 1; border-color: var(--accent); }
.nf-level.active { opacity: 1; background: var(--accent-soft); border-color: var(--accent); box-shadow: var(--glow); }
.nf-level[data-nf="1"] { border-top: 3px solid var(--nf-1); }
.nf-level[data-nf="2"] { border-top: 3px solid var(--nf-2); }
.nf-level[data-nf="3"] { border-top: 3px solid var(--nf-3); }
.nf-level[data-nf="bcnf"] { border-top: 3px solid var(--nf-bcnf); }
.nf-level .nl-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.nf-level .nl-desc { font-size: 0.65rem; color: var(--text-3); margin-top: 2px; }
.nf-schema {
  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: 50px; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.anomaly-counter {
  margin-top: var(--sp-2); font-size: 0.8rem; color: var(--text-3); text-align: center;
}
.anomaly-counter b { color: var(--ch-warn); }

/* ============================================================
   S4 索引塔 · B+树与哈希
   ============================================================ */
.cmp-index-tower { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.index-canvas-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.index-canvas-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.index-canvas-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.index-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.query-shape-matcher {
  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);
}
.query-shape-matcher h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.qsm-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.qsm-cell {
  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; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.qsm-cell.header { font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); }
.qsm-cell.ok { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.qsm-cell.bad { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); text-decoration: line-through; }
.qsm-cell.query-cell { cursor: pointer; }
.qsm-cell.query-cell:hover { border-color: var(--accent); }

/* ============================================================
   S5 执行计划镜
   ============================================================ */
.cmp-plan-mirror { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.plan-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.plan-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column; gap: 4px; opacity: 0.7;
}
.plan-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.plan-card.selected { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.plan-card .pc-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.plan-card .pc-cost { font-size: 0.72rem; color: var(--ch-warn); }
.plan-card .pc-cost.cheap { color: var(--ch-ok); }
.plan-detail {
  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);
}
.cost-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cost-cell {
  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.78rem;
}
.cost-cell .cl-label { font-size: 0.68rem; color: var(--text-3); margin-bottom: 4px; }
.cost-cell .cl-value { color: var(--text-1); }
.cost-cell.stale .cl-value { color: var(--ch-warn); }
.stat-bar-zone {
  width: 100%; padding: var(--sp-2) 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);
}
.stat-bar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.stat-bar .sb-label { font-size: 0.72rem; color: var(--text-3); min-width: 70px; font-family: var(--font-mono); }
.stat-bar .sb-track { flex: 1; height: 8px; border: 1px solid var(--glass-line); border-radius: 4px; background: var(--bg-elev); overflow: hidden; }
.stat-bar .sb-fill { height: 100%; background: var(--accent); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.stat-bar .sb-fill.stale { background: var(--ch-warn); opacity: 0.6; }
.stat-bar .sb-value { font-size: 0.72rem; color: var(--text-2); font-family: var(--font-mono); min-width: 50px; text-align: right; }

/* ============================================================
   S6 事务之环 · ACID誓言
   ============================================================ */
.cmp-acid-ring { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.acid-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.acid-ring {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; cursor: pointer;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.6;
}
.acid-ring:hover { opacity: 1; border-color: var(--accent); }
.acid-ring.tested { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.acid-ring[data-ring="a"] { border-top: 3px solid var(--ch-epiphany); }
.acid-ring[data-ring="c"] { border-top: 3px solid var(--layer-rel); }
.acid-ring[data-ring="i"] { border-top: 3px solid var(--layer-plan); }
.acid-ring[data-ring="d"] { border-top: 3px solid var(--layer-tx); }
.acid-ring .ar-letter { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--text-1); }
.acid-ring .ar-name { font-size: 0.72rem; color: var(--text-3); }
.acid-ring.cracked { border-color: var(--wound-crack); box-shadow: 0 0 12px rgba(248,113,113,0.3); }
.acid-test-result {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-size: 0.82rem; color: var(--text-2); min-height: 40px;
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.acid-test-result.warn { border-color: var(--ch-warn); color: var(--ch-warn); }
.tx-sandbox {
  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);
}
.tx-sandbox h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.tx-timelines { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.tx-line {
  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.72rem;
}
.tx-line.t1 { border-left: 3px solid var(--layer-sql); }
.tx-line.t2 { border-left: 3px solid var(--layer-lock); }
.tx-step {
  padding: 2px 6px; margin-bottom: 2px; border-radius: 3px; background: var(--bg-sunk);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.tx-step.active { background: var(--accent-soft); color: var(--accent-ink); }
.tx-step.conflict { background: var(--fog-debt-soft); color: var(--ch-warn); }
.iso-selector { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-2); justify-content: center; }
.iso-btn {
  padding: 4px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.72rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.iso-btn:hover { border-color: var(--accent); }
.iso-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* ============================================================
   S7 死锁等待图相图探索器
   ============================================================ */
.cmp-deadlock-explorer { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.lock-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.lock-panel h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.lock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.lock-tx {
  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.78rem;
}
.lock-tx.t1 { border-left: 3px solid var(--layer-sql); }
.lock-tx.t2 { border-left: 3px solid var(--layer-lock); }
.lock-tx.deadlocked { border-color: var(--deadlock-cycle); background: rgba(220,38,38,0.06); }
.lock-tx.rolled-back { opacity: 0.4; text-decoration: line-through; }
.lock-action {
  padding: 2px 6px; margin-bottom: 2px; border-radius: 3px; background: var(--bg-sunk); font-size: 0.7rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.lock-action.locked { background: rgba(251,191,36,0.12); color: var(--lock-exclusive); }
.lock-action.waiting { background: var(--fog-debt-soft); color: var(--wait-edge); }
.lock-controls { display: flex; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-2); flex-wrap: wrap; }
.wait-graph-zone {
  width: 100%; padding: var(--sp-2); 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);
}
.wait-graph-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.wait-graph-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.phase-diagram-zone {
  width: 100%; padding: var(--sp-2); 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);
}
.phase-diagram-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.deadlock-handler {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--deadlock-cycle); border-radius: var(--r-sm);
  background: rgba(220,38,38,0.06); animation: shatterIn 600ms cubic-bezier(0.22,1,0.36,1);
}
.deadlock-handler h4 { font-size: 0.85rem; color: var(--ch-warn); margin-bottom: var(--sp-2); text-align: center; }
.strategy-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.strategy-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); font-size: 0.78rem;
}
.strategy-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.strategy-card.chosen { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.strategy-card .sc-name { font-weight: 600; color: var(--text-1); }
.strategy-card .sc-desc { font-size: 0.68rem; color: var(--text-3); margin-top: 2px; }
.wound-shards {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--wound-crack); border-radius: var(--r-sm);
  background: rgba(248,113,113,0.08); text-align: center; font-style: italic; color: var(--wound-crack);
  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); }
}

/* ============================================================
   S8 ARIES三阶段公式组装器
   ============================================================ */
.cmp-aries-assembler { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.wal-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.wal-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.wal-slots { display: flex; gap: var(--sp-2); align-items: center; justify-content: center; margin-bottom: var(--sp-2); }
.wal-slot {
  flex: 1; max-width: 160px; padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.wal-slot.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.wal-slot.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); }
.wal-slot .ws-num { font-size: 0.65rem; color: var(--text-3); }
.wal-slot .ws-content { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-ink); }
.wal-fragments { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.wal-frag {
  padding: 4px 10px; 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-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.wal-frag:hover { border-color: var(--accent); transform: translateY(-2px); }
.wal-frag.placed { opacity: 0.4; cursor: default; transform: none; }
.log-scroll {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--log-record); border-radius: var(--r-sm);
  background: rgba(251,191,36,0.04); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.log-scroll h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.log-entry {
  padding: var(--sp-1) var(--sp-2); margin-bottom: 2px; border-left: 2px solid var(--log-record);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2);
  background: var(--bg-elev); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.log-entry.scanned { background: var(--accent-soft); color: var(--accent-ink); }
.log-entry.winner { border-left-color: var(--winner-tx); color: var(--winner-tx); }
.log-entry.loser { border-left-color: var(--loser-tx); color: var(--loser-tx); }
.log-entry.checkpoint { border-left-color: var(--checkpoint); color: var(--checkpoint); font-weight: 600; }
.log-entry.crash { border-left-color: var(--ch-warn); color: var(--ch-warn); font-weight: 600; text-align: center; }
.log-entry .le-lsn { font-size: 0.65rem; color: var(--text-3); margin-right: 6px; }
.aries-phases {
  width: 100%; display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
}
.phase-card {
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); opacity: 0.5; transition: all 500ms cubic-bezier(0.22,1,0.36,1);
}
.phase-card.active { opacity: 1; border-color: var(--accent); box-shadow: var(--glow); }
.phase-card.done { opacity: 1; border-color: var(--ch-ok); }
.phase-card[data-phase="analysis"] { border-left: 3px solid var(--checkpoint); }
.phase-card[data-phase="redo"] { border-left: 3px solid var(--redo-flow); }
.phase-card[data-phase="undo"] { border-left: 3px solid var(--undo-flow); }
.phase-card h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.phase-card .pc-status { font-size: 0.72rem; color: var(--text-3); margin-bottom: var(--sp-1); }
.phase-output {
  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: 30px;
}
.phase-output .clr-line { color: var(--clr-record); font-weight: 600; }
.phase-output .redo-line { color: var(--redo-flow); }
.phase-output .undo-line { color: var(--undo-flow); }
.heal-zone {
  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;
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S9 Boss 战 · 不一致之雾
   ============================================================ */
#s9-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.boss-figure { width: 100%; display: flex; justify-content: center; margin-bottom: var(--sp-2); }
#s9-boss-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm); background: var(--bg-elev); }
.q-progress-bar { width: 100%; height: 6px; border: 1px solid var(--glass-line); border-radius: 3px; background: var(--bg-sunk); margin-bottom: var(--sp-2); overflow: hidden; }
.q-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.debt-ledger {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--fog-debt);
  border-radius: var(--r-sm); background: var(--fog-debt-soft);
  font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--sp-2);
}
.debt-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.debt-ledger .ledger-line b { color: var(--fog-debt); font-style: normal; }
.q-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); margin-bottom: var(--sp-2); }
.q-text { font-size: 0.95rem; color: var(--text-1); margin-bottom: var(--sp-2); }
.q-account { font-size: 0.78rem; color: var(--ch-boss-ink); font-style: italic; padding: var(--sp-1) var(--sp-2); border-left: 2px solid var(--ch-boss-line); }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.q-option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; font-size: 0.85rem; text-align: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 50px;
  display: flex; align-items: center; justify-content: center;
}
.q-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.q-option.correct { border-color: var(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); box-shadow: var(--glow); }
.q-option.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); }
.q-option.eliminated { opacity: 0.3; cursor: default; text-decoration: line-through; border-color: var(--answer-eliminated); background: rgba(71,85,105,0.16); transform: none; }
.q-feedback {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: 0.85rem; min-height: 32px;
  margin-bottom: var(--sp-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.q-feedback.right { border-color: var(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); }
.q-feedback.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); font-style: italic; }
.carve-emergence {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--carve-mark); border-radius: var(--r-sm);
  background: var(--carve-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.carve-emergence h4 { font-size: 0.85rem; color: var(--ch-cyan-ink); margin-bottom: var(--sp-2); }
.carve-emergence .carve-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.78rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.carve-emergence .carve-item.lit {
  border-color: var(--carve-mark); color: var(--ch-cyan-ink);
  background: var(--carve-soft); box-shadow: 0 0 8px var(--carve-soft);
}
.carve-emergence .carve-item.net {
  border-color: var(--net-gold); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 12px var(--ch-epiphany-soft);
}
.fog-deepen-meter { width: 100%; margin-top: var(--sp-2); }
.fog-collapse {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--breakthrough); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); text-align: center; font-style: italic; color: var(--ch-epiphany-ink);
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S10 异界远眺 · NoSQL与向量
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.nosql-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.nosql-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column; gap: 4px; opacity: 0.6;
}
.nosql-card:hover { opacity: 1; border-color: var(--accent); transform: translateY(-2px); }
.nosql-card.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.nosql-card .nc-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.nosql-card .nc-trade { font-size: 0.72rem; color: var(--text-3); }
.nosql-card .nc-trade .give { color: var(--ch-warn); }
.nosql-card .nc-trade .get { color: var(--ch-ok); }
.lsm-zone, .columnar-zone, .vector-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);
}
.lsm-zone h4, .columnar-zone h4, .vector-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.lsm-zone canvas, .columnar-zone canvas, .vector-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.trade-table {
  width: 100%; margin-top: var(--sp-2); border-collapse: collapse; font-family: var(--font-mono); font-size: 0.72rem;
}
.trade-table th, .trade-table td { padding: 4px 8px; border: 1px solid var(--glass-line); text-align: center; }
.trade-table th { background: var(--bg-elev); color: var(--accent-ink); }
.trade-table td.give { color: var(--ch-warn); }
.trade-table td.get { color: var(--ch-ok); }
.puzzle-area { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.puzzle-piece {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; cursor: default;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.3;
}
.puzzle-piece.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.puzzle-piece .pp-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-1); }
.puzzle-piece .pp-tag { font-size: 0.62rem; color: var(--text-3); }
.chain-silhouette { width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.chain-silhouette canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.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; }
.system-map h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.realm-achieved {
  margin-top: var(--sp-3); text-align: center; padding: var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft);
}
.realm-glow {
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--ch-epiphany-ink); letter-spacing: 0.2em;
}
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--accent-soft); }
  50% { box-shadow: 0 0 32px rgba(6,182,212,0.4); }
}
.realm-achieved { animation: realmGlow 3s ease-in-out infinite; }

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@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; }
  .case-silhouettes { grid-template-columns: repeat(2, 1fr); }
  .map-nodes { grid-template-columns: repeat(2, 1fr); }
  .forge-row { grid-template-columns: 1fr; }
  .qsm-row { grid-template-columns: 1fr; }
  .plan-row { grid-template-columns: 1fr; }
  .cost-breakdown { grid-template-columns: 1fr; }
  .acid-rings { grid-template-columns: repeat(2, 1fr); }
  .tx-timelines { grid-template-columns: 1fr; }
  .lock-grid { grid-template-columns: 1fr; }
  .strategy-row { grid-template-columns: 1fr; }
  .wal-slots { flex-direction: column; }
  .nosql-grid { grid-template-columns: 1fr; }
  .puzzle-area { 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; }
  .conflict-popup, .fog-account, .consistency-map, .exclude-mark, .query-layered, .view-seal,
  .anomaly-display, .er-canvas, .nf-schema, .index-canvas-zone, .query-shape-matcher, .plan-detail,
  .stat-bar-zone, .tx-sandbox, .wait-graph-zone, .phase-diagram-zone, .deadlock-handler, .wound-shards,
  .log-scroll, .heal-zone, .carve-emergence, .fog-collapse, .lsm-zone, .columnar-zone, .vector-zone,
  .pipe-step, .layer-line, .log-entry, .token-chip { animation: none; }
  .case-card:hover { transform: none; }
}