/* ============================================================
   ch21「分布式系统原理」章节专属样式
   境界：元婴五层·分布式道 · 分布式蓝 #3B82F6
   Boss：分区之壁 · 壁灰 #64748B
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   点缀：分布式蓝 #3B82F6（ch21专属点缀色）
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：分布式蓝 ---------- */
:root, :root[data-theme="light"] {
  --accent: #3B82F6;
  --accent-ink: #1D4ED8;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --glass-line: rgba(59, 130, 246, 0.22);
  --glow: 0 0 18px rgba(59, 130, 246, 0.28);
  --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(96, 165, 250, 0.22);
  --glow: 0 0 22px rgba(59, 130, 246, 0.34);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #64748B;          /* 分区之壁 · 壁灰 */
  --ch-boss-ink: #94A3B8;
  --ch-boss-soft: rgba(100, 116, 139, 0.22);
  --ch-boss-line: rgba(100, 116, 139, 0.42);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟突破金（理解发生之处） */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  --ch-blue: #3B82F6;          /* 分布式蓝 */
  --ch-blue-soft: rgba(59, 130, 246, 0.14);
  --ch-blue-ink: #1D4ED8;
  /* 复制策略三色 */
  --rep-primary: #3B82F6;      /* 主从蓝 */
  --rep-multi: var(--ch-amber);        /* 多主琥珀 */
  --rep-leaderless: #10B981;   /* 无主翠 */
  /* CAP 三角三色 */
  --cap-c: #3B82F6;            /* 一致性蓝 */
  --cap-a: #10B981;            /* 可用性翠 */
  --cap-p: var(--ch-boss);            /* 分区容错红 */
  /* 共识协议色 */
  --paxos-propose: var(--ch-epiphany);    /* Proposer金 */
  --paxos-promise: #3B82F6;    /* Acceptor蓝 */
  --paxos-learn: #10B981;      /* Learner翠 */
  /* Raft 色板 */
  --raft-leader: var(--ch-epiphany);      /* Leader金 */
  --raft-follower: #475569;    /* Follower灰 */
  --raft-candidate: var(--ch-amber);   /* Candidate琥珀 */
  --raft-log: #3B82F6;         /* 日志蓝 */
  --raft-vote: var(--ch-epiphany);        /* 投票金 */
  --raft-split: var(--ch-boss);       /* 脑裂红 */
  --raft-rollback: #7F1D1D;    /* 回滚暗红 */
  /* 事务色 */
  --txn-prepare: var(--ch-amber);      /* Prepare琥珀 */
  --txn-commit: #10B981;       /* Commit翠 */
  --txn-block: var(--ch-boss);        /* 阻塞红 */
  --txn-3pc: #3B82F6;          /* 3PC蓝 */
  /* 时钟色 */
  --clock-physical: #94A3B8;   /* 物理灰 */
  --clock-lamport: #3B82F6;    /* Lamport蓝 */
  --clock-vector: var(--ch-epiphany);     /* 向量金 */
  --clock-concurrent: var(--ch-boss); /* 并发红 */
  /* 分片哈希色 */
  --shard-range: #94A3B8;      /* 范围灰 */
  --shard-hash: #3B82F6;       /* 哈希蓝 */
  --shard-dir: #A78BFA;        /* 目录紫 */
  --ring-node: var(--ch-epiphany);        /* 环节点金 */
  --ring-key: #3B82F6;         /* key蓝 */
  --map-stage: #3B82F6;        /* Map蓝 */
  --shuffle-stage: var(--ch-epiphany);    /* Shuffle金 */
  --reduce-stage: #10B981;     /* Reduce翠 */
  --fail-node: #475569;        /* 故障灰 */
  /* S9 Boss */
  --wall-face: #64748B;        /* 壁脸灰 */
  --wall-red: var(--ch-boss);         /* 壁赤裂纹 */
  --crack-blue: #3B82F6;       /* 蓝光裂纹 */
  --answer-correct: var(--ch-epiphany);   /* 正解金光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #374151;/* 被刻痕划去的选项灰 */
  --scar-mark: #3B82F6;        /* 刻痕投影蓝光 */
  --crack-light: #3B82F6;      /* 蓝光裂纹 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  --brain-split: var(--ch-boss);      /* 脑裂残影赤 */
  /* 选项/状态色 */
  --opt-correct: #22C55E;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #374151;
  --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, #0E1626) 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-blue-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--ch-epiphany);
  background: rgba(251,191,36,0.14); padding: 0 4px; border-radius: 3px;
}
.inv-crack.broken {
  color: var(--ch-warn); background: rgba(239,68,68,0.14);
}
#carve-panel, #chain-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #chain-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-epiphany-ink); }
#carve-list p { font-size: 0.8rem; color: var(--ch-blue); margin: var(--sp-1) 0; }
#chain-list p { font-size: 0.8rem; color: var(--ch-warn); margin: var(--sp-1) 0; }
.option.excluded, .q-option.eliminated { opacity: 0.3; cursor: default; transform: none; text-decoration: line-through; border-color: var(--opt-excluded); background: rgba(55,65,81,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); }

/* ---------- 通用 readout/insight/exclude-mark ---------- */
.readout {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); min-height: 32px;
  border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-size: 0.85rem; color: var(--text-2);
}
.insight {
  margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
  font-size: 0.92rem; color: var(--ch-epiphany-ink); line-height: 1.7;
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.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);
}
@keyframes riftOpen {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   S0 分布式无例外预测挑战器
   ============================================================ */
.cmp-distributed-bet { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-prompt {
  text-align: center; font-size: 1rem; color: var(--accent-ink);
  padding: var(--sp-2); letter-spacing: 0.05em;
}
.silhouette-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
}
.silhouette-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.55;
}
.silhouette-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.silhouette-card.revealed { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.silhouette-card.wrong { border-color: var(--opt-wrong); background: rgba(239,68,68,0.10); opacity: 1; }
.silhouette-card .sc-icon { font-size: 1.4rem; color: var(--accent); }
.silhouette-card .sc-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-1); }
.silhouette-card .sc-reveal { font-size: 0.66rem; color: var(--text-3); margin-top: 2px; }
.debt-counter {
  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);
}
.debt-counter .debt-line { margin: var(--sp-1) 0; }
.debt-counter .debt-line b { color: var(--ch-boss-ink); font-style: normal; }
.reveal-panel {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--opt-wrong);
  border-radius: var(--r-sm); background: rgba(239,68,68,0.08);
  font-size: 0.82rem; color: var(--opt-wrong);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.hotzone-explorer {
  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);
}
.hotzone-explorer h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.hotzone-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
.hotzone-cell {
  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.62rem; text-align: center;
  min-height: 36px; display: flex; align-items: center; justify-content: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4;
}
.hotzone-cell.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.civilization-map {
  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.78rem; color: var(--ch-epiphany-ink);
  text-align: center; animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S1 灵阵台 · 部分失败实验
   ============================================================ */
.cmp-failure-arena { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.arena-canvas, .rep-canvas, .tri-canvas, .paxos-canvas, .raft-canvas, .txn-canvas,
.clock-canvas, .modn-canvas, .ring-canvas, .mr-canvas, .depth-curve {
  width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev);
}
.ring-canvas { max-width: 320px; }
.arena-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.timeout-panel {
  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);
}
.to-label { font-size: 0.85rem; color: var(--accent-ink); display: block; margin-bottom: var(--sp-1); }
.to-label b { color: var(--accent); font-family: var(--font-mono); }
.to-feedback {
  margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-2); font-size: 0.78rem; min-height: 24px;
  border-radius: var(--r-xs); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.to-feedback.warn { color: var(--ch-warn); background: rgba(239,68,68,0.10); }
.to-feedback.ok { color: var(--ch-ok); background: rgba(34,197,94,0.10); }

/* ============================================================
   S2 复制殿 · 复制策略三选一
   ============================================================ */
.cmp-replication-hall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.rep-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.rep-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.rep-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.rep-card[data-strat="primary"] { border-left: 4px solid var(--rep-primary); }
.rep-card[data-strat="multi"] { border-left: 4px solid var(--rep-multi); }
.rep-card[data-strat="leaderless"] { border-left: 4px solid var(--rep-leaderless); }
.rep-card.chosen { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.rep-card .rc-name { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.rep-card .rc-desc { font-size: 0.7rem; color: var(--text-3); }
.rep-stage { 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); }
.quorum-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--rep-leaderless); border-radius: var(--r-sm);
  background: rgba(16,185,129,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.quorum-panel h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.qr-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.qr-row label { font-size: 0.8rem; color: var(--text-2); }
.qr-row label b { color: var(--accent); font-family: var(--font-mono); }
.qr-result { padding: var(--sp-1) var(--sp-2); font-size: 0.82rem; min-height: 24px; border-radius: var(--r-xs); }
.qr-result.ok { color: var(--ch-ok); background: rgba(34,197,94,0.10); }
.qr-result.warn { color: var(--ch-warn); background: rgba(239,68,68,0.10); }

/* ============================================================
   S3 CAP 不可能相图探索器
   ============================================================ */
.cmp-cap-explorer { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.cap-triangle { width: 100%; display: flex; justify-content: center; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.choice-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.cap-choice {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.cap-choice:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.cap-choice[data-cap="cp"] { border-left: 4px solid var(--cap-c); }
.cap-choice[data-cap="ap"] { border-left: 4px solid var(--cap-a); }
.cap-choice[data-cap="ca"] { border-left: 4px solid var(--cap-p); }
.cap-choice.chosen { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.cap-choice.impossible { opacity: 1; border-color: var(--opt-wrong); background: rgba(239,68,68,0.10); }
.cap-choice .cc-tag { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.cap-choice .cc-desc { font-size: 0.7rem; color: var(--text-3); }
.deduction-animation {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--cap-p); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.impossible-proof {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm);
  background: var(--ch-boss-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.impossible-proof h4 { font-size: 0.85rem; color: var(--ch-boss-ink); margin-bottom: var(--sp-2); }
.impossible-proof ol { padding-left: var(--sp-4); }
.impossible-proof ol li { font-size: 0.78rem; color: var(--text-2); margin-bottom: var(--sp-1); line-height: 1.6; }
.base-emergence {
  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.82rem; color: var(--ch-epiphany-ink);
  text-align: center; animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S4 共识祭坛 · Paxos 协议
   ============================================================ */
.cmp-paxos-altar { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.paxos-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.paxos-status {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 32px;
}

/* ============================================================
   S5 Raft 共识流水线动画器
   ============================================================ */
.cmp-raft-pipeline { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.raft-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.quorum-counter {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--raft-leader); border-radius: var(--r-sm);
  background: rgba(251,191,36,0.08); font-family: var(--font-mono); font-size: 0.88rem; color: var(--raft-leader);
  text-align: center; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.quorum-counter b { font-size: 1.1rem; }
.comparison-panel {
  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);
}
.comparison-panel h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cmp-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem;
}
.cmp-cell .cmp-label { font-size: 0.72rem; color: var(--text-3); margin-bottom: 4px; }
.cmp-cell.paxos { border-left: 3px solid var(--paxos-propose); }
.cmp-cell.raft { border-left: 3px solid var(--raft-leader); }
.cmp-common {
  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); text-align: center;
}

/* ============================================================
   S6 事务天平 · 2PC/3PC
   ============================================================ */
.cmp-txn-balance { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.txn-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.txn-status {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 32px;
}
.txn-status.blocked { border-color: var(--txn-block); background: rgba(239,68,68,0.10); color: var(--txn-block); }
.txn-status.healed { border-color: var(--txn-3pc); background: rgba(59,130,246,0.10); color: var(--txn-3pc); }
.consistency-panel {
  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);
}
.consistency-panel h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.cons-levels { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.cons-level {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.cons-level.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--glow); }
.cons-readout {
  padding: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2);
  min-height: 28px; border-radius: var(--r-xs); background: var(--bg-elev);
}

/* ============================================================
   S7 时钟殿 · Lamport/向量时钟
   ============================================================ */
.cmp-clock-hall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.clock-mode-toggle { display: flex; gap: var(--sp-1); justify-content: center; }
.clock-mode-toggle .btn { padding: 4px 10px; font-size: 0.78rem; min-height: 32px; }
.clock-mode-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.clock-result {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 32px;
}
.clock-result.concurrent { border-color: var(--clock-concurrent); background: rgba(239,68,68,0.10); color: var(--clock-concurrent); }
.trutime-card {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.trutime-card .tt-title { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-1); font-weight: 600; }
.trutime-card .tt-body { font-size: 0.8rem; color: var(--text-2); line-height: 1.6; }

/* ============================================================
   S8 一致性哈希 K/N 迁移公式组装器
   ============================================================ */
.cmp-consistent-hash { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.shard-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.shard-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 300ms 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.6;
}
.shard-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.shard-card[data-shard="range"] { border-left: 4px solid var(--shard-range); }
.shard-card[data-shard="hash"] { border-left: 4px solid var(--shard-hash); }
.shard-card[data-shard="directory"] { border-left: 4px solid var(--shard-dir); }
.shard-card.chosen { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.shard-card .sc-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.modn-zone { width: 100%; padding: var(--sp-2); border: 1px solid var(--opt-wrong); border-radius: var(--r-sm); background: rgba(239,68,68,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.modn-count { margin-top: var(--sp-1); font-family: var(--font-mono); font-size: 0.85rem; color: var(--opt-wrong); text-align: center; }
.formula-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);
}
.formula-prompt { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.formula-slots { display: flex; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.slot {
  padding: var(--sp-2) var(--sp-3); border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-1);
  min-height: 50px; min-width: 160px; display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.slot.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.slot.correct { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.slot.wrong { border-color: var(--opt-wrong); background: rgba(239,68,68,0.10); color: var(--opt-wrong); }
.slot-hole { color: var(--text-3); font-style: italic; }
.formula-fragments { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.frag {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.frag:hover { border-color: var(--accent); transform: translateY(-2px); }
.frag.used { opacity: 0.3; cursor: default; }
.formula-check { margin-top: var(--sp-2); font-size: 0.85rem; min-height: 24px; text-align: center; }
.formula-check.ok { color: var(--ch-ok); }
.formula-check.wrong { color: var(--opt-wrong); }
.hash-ring { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); 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); }
.ring-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.migration-counter { padding: var(--sp-1) var(--sp-2); font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); text-align: center; min-height: 24px; }
.migration-counter.warn { color: var(--opt-wrong); }
.migration-counter.ok { color: var(--ch-ok); }
.mapreduce-pipeline {
  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);
}
.mapreduce-pipeline h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.mr-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.mr-result { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 28px; }
.mr-result.ok { color: var(--ch-ok); }
.mr-result.warn { color: var(--ch-warn); }

/* ============================================================
   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(--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);
}
.debt-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.debt-ledger .ledger-line b { color: var(--ch-boss-ink); 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); line-height: 1.6; }
.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(--ch-epiphany-soft); color: var(--answer-correct); box-shadow: 0 0 16px var(--ch-epiphany-soft); }
.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(55,65,81,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); line-height: 1.6;
}
.q-feedback.right { border-color: var(--answer-correct); background: var(--ch-epiphany-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; }
.crack-emergence {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--scar-mark); border-radius: var(--r-sm);
  background: var(--ch-blue-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.crack-emergence h4 { font-size: 0.85rem; color: var(--ch-blue-ink); margin-bottom: var(--sp-2); }
.crack-emergence .crack-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);
}
.crack-emergence .crack-item.lit {
  border-color: var(--scar-mark); color: var(--ch-blue-ink);
  background: var(--ch-blue-soft); box-shadow: 0 0 8px var(--ch-blue-soft);
}
.abyss-deepen-meter { width: 100%; margin-top: var(--sp-2); }
.deepen-label { font-size: 0.75rem; color: var(--text-3); margin-bottom: 4px; }
.deepen-bar { width: 100%; height: 10px; border: 1px solid var(--ch-boss-line); border-radius: 5px; background: var(--bg-sunk); overflow: hidden; }
.deepen-fill { height: 100%; width: 0; background: var(--wall-face); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.abyss-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); line-height: 1.7;
}
@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); }
.vista-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.vista-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.vista-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.vista-card.opened { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.vista-card .vc-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.vista-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); }
.vista-detail h4 { font-size: 0.9rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.vista-detail .vd-body { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); line-height: 1.7; }
.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); }
.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(59,130,246,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; }
  .silhouette-row { grid-template-columns: repeat(2, 1fr); }
  .hotzone-grid { grid-template-columns: repeat(3, 1fr); }
  .rep-choice { grid-template-columns: 1fr; }
  .choice-panel { grid-template-columns: 1fr; }
  .shard-choice { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 1fr; }
  .puzzle-area { grid-template-columns: repeat(2, 1fr); }
  .vista-row { grid-template-columns: 1fr; }
  .arena-controls, .paxos-controls, .raft-controls, .txn-controls, .ring-controls, .mr-controls { flex-direction: column; align-items: stretch; }
  .qr-row { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .insight, .exclude-mark, .debt-counter, .reveal-panel, .hotzone-explorer, .civilization-map,
  .timeout-panel, .rep-stage, .quorum-panel, .deduction-animation, .impossible-proof, .base-emergence,
  .quorum-counter, .comparison-panel, .consistency-panel, .trutime-card, .modn-zone, .formula-zone,
  .hash-ring, .mapreduce-pipeline, .abyss-collapse, .crack-emergence, .debt-ledger, .vista-detail,
  .abyss-deepen-meter { animation: none; }
  .silhouette-card:hover, .rep-card:hover, .cap-choice:hover, .shard-card:hover, .vista-card:hover,
  .frag:hover, .q-option:hover { transform: none; }
}