/* ============================================================
   化学仿真引擎 · 样式（chem-lab.css）· 像素 RPG 改版
   ------------------------------------------------------------
   覆盖范围（与旧版逐一对齐，选择器名一个不丢）：
     - 讲解页头部（sim-head / crumb / sim-meta / sim-body）
     - 讲解卡片（deck 系列 + deck-rich 富文本表）
     - 迷你演示画布（mini-canvas / .tall / .grid4）
     - 实验室外壳（lab / lab-bar / lab-readout / lab-body / lab-stage…）
     - 参数面板（cp-* 控件族）
     - 侧栏分组与说明（lab-group / lg-title / lab-note —— 旧站未样式化，本版补齐）
     - 读数条（ro / c-warn / c-ok / c-danger）
     - 模块专属 SVG（atom-svg 族 / mm-cmp 族 / nh-* / rt-* / as-3dbox / mm-3dbox）
   色板与字体：全部引用 theme.css 的变量（--panel/--line/--ink/--accent/--px/--dark
     /--shadow-sm…），不自建色值；字体用 Noto Sans SC（正文）/ IBM Plex Mono
     （标签与数值）/ Bebas Neue（大读数），字体由 theme.css @import，本文件不引外链。
   ★ 结构性规则（布局尺寸链）原样保留：.lab-body 双栏 grid、.lab-canvas-wrap 的
     min/max-height 高度承重类（grid4/capfeet/flat/figfit）、ro 弹性、
     cp-btns 分段逻辑、deck 分页器 —— 只改视觉，不改布局。
   ============================================================ */

/* ================= 讲解页头部 ================= */
.sim-head{padding:30px 0 6px}
.crumb{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-3);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.crumb a{color:var(--ink-3);text-decoration:none;transition:color .12s steps(2)}
.crumb a:hover{color:var(--accent-ink)}
.sim-head h1{font-size:29px;font-weight:900;letter-spacing:0;margin-bottom:8px;
  text-shadow:2px 2px 0 rgba(13,13,24,.55)}
.sim-head .lead{font-size:13.5px;color:var(--ink-2);max-width:660px;line-height:1.75}
.sim-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.sim-meta .tag{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px}
.sim-body{padding:26px 0 10px}

/* ================= 讲解卡片 ================= */
.deck{max-width:920px;margin:0 auto}
.deck-rail{display:flex;gap:6px;margin-bottom:14px;align-items:center}
.deck-dot{width:26px;height:6px;border:2px solid var(--px);padding:0;cursor:pointer;
  background:var(--line-strong);opacity:.55;transition:opacity .16s steps(2),width .16s steps(2)}
.deck-dot:hover{opacity:.9}
.deck-dot.on{background:var(--accent);opacity:1;width:44px;box-shadow:2px 2px 0 0 var(--px)}

.deck-card{background:var(--panel);border:4px solid var(--px);border-radius:0;
  padding:26px 28px 24px;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;min-height:300px}
/* 顶部像素条纹（旧版渐变条的像素化替换） */
.deck-card::before{content:'';position:absolute;inset:0 0 auto 0;height:6px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 9px,var(--px) 9px 13px)}
.deck-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.deck-q-mark{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10.5px;letter-spacing:.16em;
  color:var(--accent-ink);font-weight:700}
.deck-tag{font-family:'IBM Plex Mono',Consolas,monospace;font-size:9.5px;letter-spacing:.1em;
  padding:3px 9px;border-radius:0;border:3px solid var(--accent);
  color:var(--accent-ink);background:var(--accent-soft);box-shadow:2px 2px 0 0 var(--px)}
.deck-pager{margin-left:auto;font-family:'IBM Plex Mono',Consolas,monospace;
  font-size:10.5px;color:var(--ink-3)}
.deck-q{font-size:21px;font-weight:900;line-height:1.45;letter-spacing:0;
  margin-bottom:18px;color:var(--ink)}
.deck-points{list-style:none;display:flex;flex-direction:column;gap:10px}
.deck-points li{font-size:13.5px;line-height:1.78;color:var(--ink-2);
  padding-left:20px;position:relative}
.deck-points li::before{content:'';position:absolute;left:4px;top:.72em;
  width:6px;height:6px;background:var(--accent);opacity:.9;
  box-shadow:2px 2px 0 0 var(--px)}
.deck-points strong{color:var(--ink);font-weight:700}
.deck-points code{font-family:'IBM Plex Mono',Consolas,monospace;font-size:12.5px;
  background:var(--accent-soft);color:var(--accent-ink);padding:1px 6px;
  border:2px solid var(--accent-dim);border-radius:0}
.deck-note{margin-top:20px;padding:13px 16px;
  border:3px solid var(--px);border-left-width:8px;border-left-color:var(--accent-ink);
  background:var(--hover-bg-2,var(--hover-bg));border-radius:0;
  box-shadow:3px 3px 0 0 var(--px);
  font-size:12.5px;line-height:1.75;color:var(--ink-2)}
.deck-note strong{color:var(--ink)}
.deck-demo{margin:20px 0}
/* buildDeck 的 demoCaption 会插这个节点 */
.deck-demo .demo-cap{margin-top:8px;font-size:11.5px;line-height:1.6;
  color:var(--ink-3);font-family:'IBM Plex Mono',Consolas,monospace;letter-spacing:.01em}

/* ================= 讲解卡里的富文本表（deck-rich） =================
   ★ 作用域钉死在 .deck-rich 后代，不碰页面自带的 table 样式（旧版语义约束保留）。 */
.deck-rich table{width:100%;border-collapse:collapse;margin:2px 0 4px;
  font-size:12.5px;line-height:1.6}
.deck-rich th,.deck-rich td{padding:7px 10px;text-align:left;vertical-align:top;
  border-bottom:2px solid var(--line-strong)}
.deck-rich thead th{color:var(--ink-3);font-weight:700;font-size:11px;
  letter-spacing:.04em;background:var(--bg-2);border-bottom:3px solid var(--px)}
.deck-rich tbody tr:last-child td{border-bottom:none}
.deck-rich table b,.deck-rich table strong{color:var(--ink);font-weight:700}
.deck-rich table code{font-family:'IBM Plex Mono',Consolas,monospace;font-size:11.5px}

.deck-cta{display:flex;align-items:center;justify-content:space-between;
  margin-top:22px;padding:13px 20px;border:4px solid var(--px);
  border-radius:0;background:var(--accent-soft);color:var(--accent-ink);
  box-shadow:4px 4px 0 0 var(--px);
  text-decoration:none;font-size:14px;font-weight:700;
  transition:transform .1s steps(2),box-shadow .1s steps(2),
             background .1s steps(2),color .1s steps(2)}
.deck-cta:hover{background:var(--accent);color:var(--on-accent);
  transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--px)}
.deck-cta .arw{font-size:17px;transition:transform .12s steps(2)}
.deck-cta:hover .arw{transform:translateX(4px)}

.deck-nav{display:flex;align-items:center;gap:14px;margin-top:16px}
.deck-prog{flex:1;height:8px;background:var(--bg-2);border:2px solid var(--px);
  border-radius:0;overflow:hidden}
.deck-prog i{display:block;height:100%;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8px,var(--px) 8px 10px);
  transition:width .6s steps(8)}
.btn-sm{padding:9px 15px;font-size:12px;min-height:44px}
.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

/* ================= 迷你演示画布 ================= */
.mini-canvas{width:100%;height:210px;border:3px solid var(--px);border-radius:0;
  overflow:hidden;background:var(--bg-2);position:relative;
  box-shadow:var(--shadow-sm)}
.mini-canvas canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.mini-canvas.tall{height:280px}
/* grid4：四方格总览图专用高度（布局尺寸，原样保留） */
.mini-canvas.grid4{height:420px}

/* ================= 实验室外壳 ================= */
.lab{display:flex;flex-direction:column;min-height:100vh}
.lab-bar{display:flex;align-items:center;gap:18px;padding:12px 20px;
  border-bottom:5px solid var(--px);background:var(--nav-bg);
  box-shadow:0 4px 0 rgba(13,13,24,.35);
  position:sticky;top:0;z-index:30;flex-wrap:wrap}
.lab-back{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  font-family:'IBM Plex Mono',Consolas,monospace;font-size:11px;letter-spacing:.06em;
  color:var(--accent-ink);border:3px solid var(--px);border-radius:0;
  background:var(--panel);box-shadow:3px 3px 0 0 var(--px);
  text-decoration:none;min-height:44px;flex:none;
  transition:transform .08s steps(2),box-shadow .08s steps(2),
             background .08s steps(2),color .08s steps(2)}
.lab-back:hover{background:var(--accent);color:var(--on-accent);
  transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--px)}
.lab-back .arw{transition:transform .12s steps(2)}
.lab-back:hover .arw{transform:translateX(-3px)}
.lab-title{display:flex;align-items:center;gap:12px;min-width:0}
.lab-badge{font-family:'IBM Plex Mono',Consolas,monospace;font-size:9.5px;letter-spacing:.14em;
  padding:4px 10px;border:3px solid var(--px);border-radius:0;
  background:var(--accent);color:var(--on-accent);
  box-shadow:2px 2px 0 0 var(--px);
  flex:none;font-weight:700}
.lab-title h1{font-size:17px;font-weight:900;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.lab-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
/* injectResetBtn 默认注入的恢复按钮（旧站无样式，本版补像素按钮） */
.lab-actions .lab-btn{font-family:'IBM Plex Mono',Consolas,monospace;font-size:11.5px;
  letter-spacing:.04em;padding:9px 14px;min-height:44px;
  background:var(--panel-solid);color:var(--ink);
  border:3px solid var(--px);border-radius:0;box-shadow:3px 3px 0 0 var(--px);
  transition:transform .08s steps(2),box-shadow .08s steps(2),
             background .08s steps(2),color .08s steps(2)}
.lab-actions .lab-btn:hover{background:var(--accent);color:var(--on-accent);
  transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--px)}

.lab-scope{font-size:12.5px;color:var(--ink-2);line-height:1.7;
  padding:14px 20px 0;max-width:1100px}

.lab-readout{display:flex;flex-wrap:wrap;gap:3px;margin:14px 20px 0;
  background:var(--px);border:3px solid var(--px);border-radius:0;
  box-shadow:var(--shadow-sm);overflow:hidden}
.ro{flex:1;min-width:104px;padding:11px 14px;background:var(--panel);text-align:center}
.ro b{display:block;font-family:'Bebas Neue','IBM Plex Mono',monospace;font-size:26px;
  font-weight:400;color:var(--accent-ink);line-height:1.2;letter-spacing:.03em}
.ro span{font-family:'IBM Plex Mono',Consolas,monospace;
  font-size:10.5px;color:var(--ink-3);letter-spacing:.08em}
.ro.c-warn b{color:var(--warn)}
.ro.c-ok b{color:var(--ok)}
.ro.c-danger b{color:var(--danger)}

/* ★ 双栏 grid 结构原样保留：296px 侧栏 + 1fr 画布 */
.lab-body{display:grid;grid-template-columns:296px 1fr;gap:3px;
  background:var(--px);border-top:3px solid var(--px);
  border-bottom:3px solid var(--px);margin-top:14px;flex:1;min-height:0}
.lab-side{background:var(--panel);padding:20px;overflow-y:auto;max-height:calc(100vh - 220px)}
.lab-stage{background:var(--bg-2);display:flex;flex-direction:column;
  min-width:0;position:relative}
.lab-canvas-wrap{flex:1;min-height:440px;position:relative}
.lab-canvas-wrap canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
/* 高度承重类（grid4/capfeet/flat/figfit）——布局尺寸链原样保留，禁止改动数值 */
.lab-canvas-wrap.grid4{min-height:520px;max-height:560px}
.lab-canvas-wrap.capfeet{min-height:420px;max-height:520px}
.lab-canvas-wrap.flat{flex:none;height:196px;min-height:0;max-height:none}
.lab-canvas-wrap.figfit{flex:none;height:320px;min-height:0;max-height:none}
.lab-stage-foot{padding:12px 18px;border-top:3px solid var(--px);
  font-size:11.5px;color:var(--ink-3);line-height:1.65;background:var(--panel)}

/* ================= 参数面板（cp-*） ================= */
.cp-row{display:flex;flex-direction:column;gap:7px;padding:12px 0;
  border-bottom:2px solid var(--line)}
.cp-row:last-child{border-bottom:0}
.cp-row-block{gap:10px}
.cp-lab{font-size:12px;font-weight:700;color:var(--ink);display:flex;
  align-items:baseline;gap:7px;flex-wrap:wrap}
.cp-hint{font-size:10.5px;font-weight:400;color:var(--ink-3)}
.cp-ctl{display:flex;align-items:center;gap:11px}
.cp-ctl input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;
  background:var(--bg);border:2px solid var(--px);border-radius:0;
  outline:none;cursor:pointer}
.cp-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:16px;height:16px;border-radius:0;background:var(--accent);
  cursor:pointer;border:2px solid var(--px);box-shadow:2px 2px 0 0 var(--px)}
.cp-ctl input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:0;
  background:var(--accent);cursor:pointer;border:2px solid var(--px);
  box-shadow:2px 2px 0 0 var(--px)}
.cp-val{font-family:'IBM Plex Mono',Consolas,monospace;font-size:13px;font-weight:700;
  color:var(--accent-ink);min-width:58px;text-align:right;flex:none}
.cp-unit{font-size:10px;color:var(--ink-3);margin-left:2px}
.cp-select{width:100%;padding:9px 10px;font-size:12.5px;font-family:inherit;
  background:var(--bg-2);border:3px solid var(--px);border-radius:0;
  color:var(--ink);outline:none;cursor:pointer;
  transition:border-color .12s steps(2),box-shadow .12s steps(2)}
.cp-select:focus{border-color:var(--accent-ink);box-shadow:0 0 0 2px var(--accent-soft)}
.cp-btns{display:flex;gap:0;border:3px solid var(--px);border-radius:0;overflow:hidden}
.cp-btns button{flex:1;padding:8px;font-size:11.5px;min-height:44px;background:var(--panel);
  color:var(--ink-2);border:0;border-right:2px solid var(--px);cursor:pointer;
  font-family:'IBM Plex Mono','Noto Sans SC',monospace;white-space:nowrap;
  transition:background .1s steps(2),color .1s steps(2)}
.cp-btns button:last-child{border-right:0}
.cp-btns button:hover{background:var(--hover-bg);color:var(--ink)}
.cp-btns button.on{background:var(--accent);color:var(--on-accent);font-weight:700}
/* 多按钮换行版（物系清单等 5~6 按钮组）——换行逻辑原样保留 */
.cp-btns.wrap{flex-wrap:wrap;gap:2px;overflow:visible;background:var(--px)}
.cp-btns.wrap button{flex:0 0 auto;border-right:2px solid var(--px);border-bottom:2px solid var(--px)}
.cp-btns.wrap button:last-child{border-right:2px solid var(--px)}
.cp-switch{position:relative;display:inline-block;width:46px;height:26px;flex:none;cursor:pointer}
.cp-switch input{opacity:0;width:0;height:0;position:absolute}
.cp-switch span{position:absolute;inset:0;background:var(--bg);
  border:3px solid var(--px);border-radius:0;transition:background .12s steps(2)}
.cp-switch span::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;
  background:var(--ink-3);border-radius:0;transition:transform .12s steps(2),background .12s steps(2)}
.cp-switch input:checked + span{background:var(--accent)}
.cp-switch input:checked + span::before{transform:translateX(19px);background:var(--on-accent)}
.cp-switch input:focus-visible + span{box-shadow:0 0 0 2px var(--accent-soft)}

.cp-group+.cp-group{margin-top:18px;padding-top:16px;border-top:3px dashed var(--line-strong)}
.cp-group-title{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px;
  letter-spacing:.16em;color:var(--accent-ink);margin-bottom:4px;font-weight:700}

/* ================= 侧栏分组与说明（旧站未样式化，本版补齐） =================
   ★ lab 页 buildShell 的 sidebar 由页面手写：h4.lg-title + .lab-group 分组，
     foot 内 .lab-note 说明块。旧 theme.css / chem-lab.css 均无定义（裸奔状态），
     本版按像素规范补齐，类名不变。 */
.lab-group{margin-top:16px;padding-top:14px;border-top:3px dashed var(--line-strong)}
.lg-title{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10.5px;
  letter-spacing:.16em;color:var(--accent-ink);font-weight:700;margin:0 0 10px;
  text-transform:uppercase}
.lg-title::before{content:'';display:inline-block;width:8px;height:8px;
  background:var(--accent);box-shadow:2px 2px 0 0 var(--px);
  margin-right:8px;vertical-align:1px}
.lab-note{margin-top:14px;padding:11px 13px;
  background:var(--hover-bg-2,var(--hover-bg));border:3px solid var(--px);
  border-radius:0;box-shadow:3px 3px 0 0 var(--px);
  font-size:11.5px;line-height:1.7;color:var(--ink-2)}
.lab-note strong{color:var(--ink)}
.lab-note .lab-note-p{margin:0}
.lab-note .lab-note-p+.lab-note-p{margin-top:8px}

/* ================= 图例块（实验室侧栏底部常用） ================= */
.lab-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;
  border-top:3px dashed var(--line-strong)}
.lab-legend i{width:10px;height:10px;border-radius:0;flex:none;
  border:2px solid var(--px);box-shadow:2px 2px 0 0 var(--px)}
.lab-legend span{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  color:var(--ink-2)}

/* ================= 响应式（断点 900 / 720，与旧版一致） ================= */
@media(max-width:900px){
  .lab-body{grid-template-columns:1fr}
  .lab-side{max-height:none;border-bottom:3px solid var(--px)}
  .lab-canvas-wrap{min-height:340px}
  .deck-card{padding:20px 18px}
  .deck-q{font-size:17.5px}
  .deck-points li{font-size:13px}
  .ro{min-width:88px;padding:9px 10px}
  .ro b{font-size:22px}
  .deck-rich table{font-size:11.5px}
  .deck-rich th,.deck-rich td{padding:5px 7px}
  .deck-rich thead th{font-size:10px}
}

/* ================= 原子结构示意图（atom-structure-data.js 生成的 SVG） =================
   类名与 atom-structure-data.js 写死的 class 一一对应：
   .as-nucl 原子核 · .as-z 核电荷数 · .as-arc 电子层弧线
   .as-e 电子点 · .as-lab 层名 · .as-cap 底部说明 */
.atom-svg{width:100%;height:auto;max-height:100%;display:block}
.atom-svg .as-nucl{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
.atom-svg .as-z{fill:var(--accent);font-size:15px;font-weight:700;
  font-family:'IBM Plex Mono',Consolas,monospace}
.atom-svg .as-arc{stroke:var(--line-strong);stroke-width:2;fill:none}
.atom-svg .as-e{fill:var(--link)}
.atom-svg .as-lab{fill:var(--ink-3);font-size:10.5px;
  font-family:'IBM Plex Mono',Consolas,monospace}
.atom-svg .as-cap{fill:var(--ink-2);font-size:11px}
.as-pair{display:flex;gap:14px;align-items:flex-start;justify-content:center;
  flex-wrap:wrap}
.as-pair figure{margin:0;flex:1 1 200px;max-width:260px;text-align:center}
.as-pair figcaption{font-size:11.5px;color:var(--ink-3);margin-top:2px}
@media(max-width:720px){
  .atom-svg .as-cap{font-size:10px}
}

/* ================= 球棍模型搭建（molmodel-data.js 生成的 SVG 与页内版式） =================
   .mm-cmp 对照图 · .mm-bond 键线 · .mm-wedge 楔形 · .mm-dash 虚线
   .mm-c/mm-h 碳/氢球 · .mm-cap 面板标题 · .mm-sub 面板结论 · .mm-cmpnote 底部说明 */
.mm-cmp{width:100%;height:auto;max-height:200px;display:block}
.mm-cmp .mm-bond{stroke:var(--line-strong);stroke-width:2}
.mm-cmp .mm-wedge{fill:var(--ink);stroke:none}
.mm-cmp .mm-dash{stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:5 3}
.mm-cmp .mm-c{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
.mm-cmp .mm-h{fill:var(--bg-2);stroke:var(--line-strong);stroke-width:1.6}
.mm-cmp .mm-clab{fill:var(--accent);font-size:13px;font-weight:700;text-anchor:middle;
  font-family:'IBM Plex Mono',Consolas,monospace}
.mm-cmp .mm-hlab{fill:var(--ink-2);font-size:10px;text-anchor:middle;
  font-family:'IBM Plex Mono',Consolas,monospace}
.mm-cmp .mm-cap{fill:var(--ink);font-size:11.5px;font-weight:700;text-anchor:middle}
.mm-cmp .mm-sub{fill:var(--ink-3);font-size:10.5px;text-anchor:middle;
  font-family:'IBM Plex Mono',Consolas,monospace}
.mm-cmpnote{margin-top:6px;font-size:11px;line-height:1.7;color:var(--ink-3);text-align:center}
.mm-cmpnote u{text-decoration:none;color:var(--accent-ink)}

/* 球棍/填充模型的三维宿主（实验室页）——定高契约原样保留 */
.mm-3dbox{width:100%;height:100%;min-height:0;display:block}
@media(max-width:720px){
  .mm-cmpnote{font-size:10.5px}
}

/* ================= 中和热测定（neut-heat）图形样式 ================= */
.nh-curve,.nh-device{width:100%;height:auto;display:block}
.nh-curve text{font-family:'IBM Plex Mono',Consolas,monospace}
.nh-device text{font-family:'IBM Plex Mono',Consolas,monospace}
@media(max-width:720px){
  .nh-curve text,.nh-device text{font-size:9px}
}

/* ================= 反应速率调节器（rate-control）图形样式 ================= */
.rt-bars,.rt-ct{width:100%;height:auto;display:block}
.rt-bars text,.rt-ct text{font-family:'IBM Plex Mono',Consolas,monospace}
@media(max-width:720px){
  .rt-bars text,.rt-ct text{font-size:9px}
}

/* ================= 3D 壳层视图（atom-structure 3D 模式）定高容器 ================= */
.as-3dbox{width:100%;height:100%;min-height:0;display:block}

/* ================= 动效偏好（像素站铁律） ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .deck-prog i{transition:none}
}