/* =====================================================================
   码上物理 · 实验控制台（Dark Arcade Lab Console）
   定位：深色科研台 + 保留品牌游乐场的活力
   参考基线：PhET 的参数即时反馈 / Desmos 的图形精度 /
             Observable 的排版层级 / Linear 的深色组件工艺
   ===================================================================== */
:root{
  --bg:#0B0E13;
  --surface:#141920;
  --surface-2:#1B212A;
  --surface-3:#232A35;
  --line:#242A33;
  --line-2:#2E353E;
  --line-strong:#454C57;
  --text:#E8EEF5;
  --text-2:#A9B4C0;
  --text-3:#7A8593;
  --gold:#EBB500;
  --gold-l:#F5C518;
  --gold-d:#8A6A00;
  --gold-dim:#2A2412;
  --blue:#58A6FF;
  --cyan:#39D0D8;
  --green:#3FB950;
  --red:#FF7B72;
  --purple:#D2A8FF;
  --amber:#E3B341;
  --r:14px;
  --r-s:10px;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
html{color-scheme:dark}
body{
  background:var(--bg);color:var(--text);
  font-family:"Inter","PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,system-ui,sans-serif;
  font-size:14px;line-height:1.6;font-weight:450;-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
.hide{display:none !important}
::selection{background:var(--gold);color:#141414}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong)}

/* ---------------- 顶栏 ---------------- */
.top{
  position:sticky;top:0;z-index:60;height:56px;display:flex;align-items:center;gap:12px;
  padding:0 16px;background:rgba(11,14,19,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;letter-spacing:.3px}
.logo{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--gold);color:#141414;font-weight:800;font-size:14px}
.brand small{font-weight:400;color:var(--text-3);font-size:11.5px;letter-spacing:0}
.spacer{flex:1}
.top .nav{display:flex;gap:6px}
.top .nav button{padding:6px 11px;border-radius:8px;font-size:12.5px;color:var(--text-2);border:1px solid transparent}
.top .nav button:hover{background:var(--surface-2);color:var(--text)}
.top .nav button.on{background:var(--gold-dim);color:var(--gold-l);border-color:var(--gold-d)}
.hamb{display:none}

/* ---------------- 布局 ---------------- */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:calc(100% - 56px)}
.tree{
  border-right:1px solid var(--line);background:var(--surface);
  padding:14px 10px 40px;overflow:auto;max-height:calc(100vh - 56px);position:sticky;top:56px;
}
.tree h4{margin:14px 8px 6px;font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--text-3);text-transform:uppercase}
.tree h4:first-child{margin-top:0}
.node{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:9px;
  font-size:13px;color:var(--text-2);text-align:left;transition:background .14s,color .14s;
}
.node:hover{background:var(--surface-2);color:var(--text)}
.node.on{background:var(--gold);color:#141414;font-weight:700}
.node .st{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:20px;background:var(--surface-3);color:var(--text-3)}
.node.on .st{background:rgba(0,0,0,.25);color:#141414}
.node.done .st{background:rgba(63,185,80,.16);color:var(--green)}

.stage{padding:16px 18px 40px;min-width:0}

/* 实验头 */
.ehead{margin-bottom:14px}
.crumb{font-size:11.5px;color:var(--text-3);margin-bottom:5px}
.ehead h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--gold-dim);color:var(--gold-l)}
.tag.live{background:rgba(63,185,80,.14);color:var(--green)}
.goal{margin-top:8px;font-size:13px;color:var(--text-2);max-width:78ch;line-height:1.7}

/* 工作台网格：左=舞台+图表，右=参数+读数 */
.bench{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr);gap:14px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel + .panel{margin-top:12px}
.ph{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:700;letter-spacing:.1px}
.ph .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.ph .hint{margin-left:auto;font-size:11px;font-weight:400;color:var(--text-3)}
.pb{padding:13px 14px}

/* Canvas 舞台 */
.canvas-wrap{position:relative;background:var(--surface-2);border-bottom:1px solid var(--line)}
.canvas-wrap canvas{display:block;width:100%;height:auto}
.runbar{display:flex;align-items:center;gap:8px;padding:10px 14px;flex-wrap:wrap;border-top:1px solid var(--line)}
.btn{padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:600;
  background:var(--surface-3);color:var(--text);border:1px solid var(--line-2);transition:.14s}
.btn:hover{background:var(--line-2);border-color:var(--line-strong)}
.btn.prim{background:var(--gold);color:#141414;border-color:var(--gold-d);box-shadow:0 2px 0 var(--gold-d)}
.btn.prim:hover{background:var(--gold-l)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.preset{padding:6px 10px;border-radius:8px;font-size:11.5px;font-weight:600;
  background:var(--surface-3);color:var(--text-2);border:1px solid var(--line-2);transition:.14s}
.preset:hover{border-color:var(--gold-d);color:var(--gold-l)}
.preset.on{background:var(--gold);border-color:var(--gold);color:#141414}

/* 参数区 */
.prow{margin-bottom:13px}
.prow:last-child{margin-bottom:0}
.plab{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.plab .nm{font-size:12.5px;font-weight:600;color:var(--text)}
.plab .vv{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gold-l);
  font-variant-numeric:tabular-nums}
.plab .un{font-size:11px;color:var(--text-3)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:var(--line-2)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold);
  border:2px solid #141414;margin-top:-6px;transition:transform .12s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:var(--line-2)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid #141414}
.segs{display:flex;gap:6px;flex-wrap:wrap}
.seg{padding:6px 11px;border-radius:8px;font-size:12px;font-weight:600;background:var(--surface-3);
  color:var(--text-2);border:1px solid var(--line-2);transition:.14s}
.seg:hover{border-color:var(--line-strong)}
.seg.on{background:var(--blue);border-color:var(--blue);color:#0B0E13}

/* 读数区（关键指标） */
.reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.rd{padding:9px 8px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);text-align:center}
.rd b{display:block;font-family:var(--mono);font-size:16px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.rd span{display:block;font-size:10.5px;color:var(--text-3);margin-top:2px}
.rd.hi b{color:var(--gold-l)}
.rd.blue b{color:var(--blue)}
.rd.green b{color:var(--green)}
.rd.red b{color:var(--red)}

/* 结论 / 解读 */
.concl{padding:12px 14px;border-radius:var(--r-s);background:var(--surface-2);
  border-left:3px solid var(--gold);font-size:12.8px;color:var(--text-2);line-height:1.75}
.concl b{color:var(--gold-l);font-weight:700}
.concl code{font-family:var(--mono);background:var(--surface-3);padding:1px 5px;border-radius:4px;
  font-size:12px;color:var(--cyan)}

/* 状态提示（边界与异常）：色彩 + 图标，不使用惊叹号 */
.notices{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.notice{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border-radius:9px;font-size:12.3px;line-height:1.6}
.notice .ic{width:16px;height:16px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:800;margin-top:2px}
.notice.info{background:rgba(88,166,255,.10);border:1px solid rgba(88,166,255,.28);color:#BBD7FF}
.notice.info .ic{background:var(--blue);color:#0B0E13}
.notice.warn{background:rgba(227,179,65,.10);border:1px solid rgba(227,179,65,.30);color:#F0D9A0}
.notice.warn .ic{background:var(--amber);color:#141414}
.notice.err{background:rgba(255,123,114,.10);border:1px solid rgba(255,123,114,.30);color:#FFC4BE}
.notice.err .ic{background:var(--red);color:#141414}
.notice.ok{background:rgba(63,185,80,.10);border:1px solid rgba(63,185,80,.28);color:#A8E7B4}
.notice.ok .ic{background:var(--green);color:#0B0E13}

/* 步骤 / 产出 */
.steps{margin:0;padding-left:18px;font-size:12.6px;color:var(--text-2);line-height:1.85}
.steps li{margin-bottom:2px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12.4px}
.kv dt{color:var(--text-3)}
.kv dd{margin:0;color:var(--text-2)}

/* 图表 */
.chart-box{position:relative}
.chart-box canvas{display:block;width:100%;height:auto}
.legend{display:flex;gap:12px;flex-wrap:wrap;padding:0 14px 11px;font-size:11.5px;color:var(--text-3)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* ---------------- 历年高考真题 ---------------- */
.exam{padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surface-2);margin-bottom:11px}
.exam:last-child{margin-bottom:0}
.exam-h{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap}
.exam-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--gold-dim);color:var(--gold-l)}
.exam-type{font-size:10.5px;padding:2px 8px;border-radius:20px;
  background:var(--surface-3);color:var(--text-3)}
.exam-stem{font-size:12.8px;line-height:1.8;color:var(--text);margin-bottom:9px}
.exam-opts{display:flex;flex-direction:column;gap:6px}
.exam-opt{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;
  padding:8px 11px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--surface);font-size:12.4px;color:var(--text-2);
  transition:border-color .14s,background .14s}
.exam-opt b{color:var(--gold-l);flex:none}
.exam-opt:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-3)}
.exam-opt.right{background:rgba(63,185,80,.14);border-color:#2EA043;color:#A8E7B4}
.exam-opt.right b{color:var(--green)}
.exam-opt.wrong{background:rgba(255,123,114,.12);border-color:#DA3633;color:#FFC4BE}
.exam-opt.wrong b{color:var(--red)}
.exam-opt:disabled{cursor:default}
.exam-fb{padding:8px 11px;border-radius:8px;font-size:12.2px;margin-top:8px}
.exam-fb.ok{background:rgba(63,185,80,.10);border-left:3px solid var(--green);color:#A8E7B4}
.exam-fb.no{background:rgba(255,123,114,.10);border-left:3px solid var(--red);color:#FFC4BE}
.exam-sol{margin-top:9px;padding:10px 12px;border-radius:9px;font-size:12.4px;line-height:1.8;
  background:var(--surface);border:1px solid var(--line)}
.exam-sol.live{border-color:var(--gold-d);background:var(--gold-dim)}
.exam-sol .sol-t{font-size:11px;font-weight:700;color:var(--gold-l);margin:8px 0 5px;letter-spacing:.3px}
.exam-sol .sol-t:first-child{margin-top:0}
.exam-sol code{font-family:var(--mono);background:var(--surface-3);padding:1px 5px;
  border-radius:4px;font-size:11.5px;color:var(--cyan)}
.exam-sol b{color:var(--gold-l)}
.exam-result{margin-top:9px;padding:8px 11px;border-radius:8px;
  background:rgba(88,166,255,.10);border-left:3px solid var(--blue);color:#BBD7FF;font-size:12.4px}
.exam-result b{display:block;color:var(--blue);margin-bottom:3px;font-size:11px}
.exam-load{margin-top:9px;width:100%}
.exam-source{display:block;margin-top:5px;color:var(--msp-accent-text);font-size:11.5px;font-weight:650;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.exam-source:hover{color:var(--msp-accent)}

/* 共享仪器主题与移动工作台：图形科学色由 Canvas 接口保留。 */
body[data-msp-page="lab"]{padding-bottom:0}
html[data-mode] .node{min-height:48px;white-space:normal}
html[data-mode] .node .st{color:var(--msp-muted);background:var(--msp-raised);flex-shrink:0}
html[data-mode] .node.on .st{color:var(--msp-on-accent);background:transparent}
html[data-mode] .node.on{background:var(--msp-accent);color:var(--msp-on-accent)}
html[data-mode] .tag.live{background:var(--msp-raised);color:var(--msp-muted)}
html[data-mode] :is(.notice.info,.notice.warn,.notice.ok,.exam-result){color:var(--msp-text);background:var(--msp-raised);border-color:var(--msp-line)}
html[data-mode] .notice.err{color:var(--msp-science-red);background:var(--msp-surface)}
html[data-mode] .exam-opt.right b{color:var(--msp-accent-text)}
html[data-mode] .exam-opt.wrong b{color:var(--msp-muted)}
html[data-mode] .goal{font-size:16px}
html[data-mode] .legend{color:var(--msp-muted);font-size:13px}
html[data-mode] .chart-series{padding:8px 14px;display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--msp-text)}
html[data-mode] .chart-series span{display:inline-flex;align-items:center;gap:5px}
html[data-mode] .chart-series i{display:inline-block;width:24px;border-top:3px solid}
html[data-mode] .rd b{overflow-wrap:anywhere}
html[data-mode] .kv{grid-template-columns:minmax(60px,auto) minmax(0,1fr)}
html[data-mode] .ph{flex-wrap:wrap}
@media(max-width:1000px){
  html[data-mode] .bench{display:flex;flex-direction:column}
  html[data-mode] .bench-left,html[data-mode] .bench-right{display:contents}
  html[data-mode] .bench .panel{width:100%;margin-top:12px;min-width:0}
  html[data-mode] .bench .panel-stage{order:-4}
  html[data-mode] .bench .panel-params{order:-3}
  html[data-mode] .bench .panel-reads{order:-2}
  html[data-mode] .tree{bottom:calc(64px + env(safe-area-inset-bottom));top:var(--lab-top-height,64px)}
  html[data-mode] .top{padding:8px 12px;gap:8px}
  html[data-mode] .brand small{display:none}
  html[data-mode] .top .nav{width:100%;justify-content:flex-end}
  html[data-mode] .hamb{width:44px;height:44px}
}
/* 移动端 */
@media (max-width:1000px){
  .bench{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr}
  .tree{
    position:fixed;inset:56px 0 0 0;z-index:55;max-height:none;width:100%;
    transform:translateX(-100%);transition:transform .2s ease;background:var(--bg);
  }
  .tree.open{transform:translateX(0)}
  .hamb{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
    background:var(--surface-2);border:1px solid var(--line)}
  .stage{padding:14px 12px 40px}
  .ehead h1{font-size:18px}
  .presets{margin-left:0;width:100%}
}

/* UX-B2-LAB-CSS：实验库首页、筛选工具条、折叠目录与空状态。 */
.lab-library-head{display:flex;align-items:center;gap:8px;margin:0 4px 10px}
.lab-library-head b{font-size:13px;color:var(--msp-text,var(--text))}
.lab-library-head .lab-home-link{margin-left:auto;padding:5px 8px;border-radius:7px;color:var(--msp-accent-text,var(--gold-l));font-size:11px}
.lab-filters{display:grid;gap:7px;padding:10px 8px;margin:0 0 8px;border:1px solid var(--msp-line,var(--line));border-radius:10px;background:var(--msp-surface,var(--surface-2))}
.lab-filters label{display:grid;gap:4px;color:var(--msp-muted,var(--text-3));font-size:11px}
.lab-filters input,.lab-filters select{width:100%;min-height:40px;padding:7px 8px;border:1px solid var(--msp-line,var(--line-2));border-radius:8px;background:var(--msp-raised,var(--surface-3));color:var(--msp-text,var(--text));font:inherit;font-size:12px}
.lab-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.lab-tree-status{padding:4px 8px 8px;color:var(--msp-muted,var(--text-3));font-size:11px}
.lab-tree-empty{padding:12px 8px;color:var(--msp-muted,var(--text-2));font-size:12px;line-height:1.6}
.lab-book-group,.lab-chapter-group{margin:0 0 4px;border:0}
.lab-book-group>summary,.lab-chapter-group>summary{cursor:pointer;list-style:none;user-select:none}
.lab-book-group>summary::-webkit-details-marker,.lab-chapter-group>summary::-webkit-details-marker{display:none}
.lab-book-group>summary{padding:8px;border-radius:8px;color:var(--msp-text,var(--text));font-size:12px;font-weight:750;background:var(--msp-raised,var(--surface-2))}
.lab-book-group>summary:before,.lab-chapter-group>summary:before{content:"▸";display:inline-block;width:18px;color:var(--msp-accent-text,var(--gold-l));transition:transform .14s}
.lab-book-group[open]>summary:before,.lab-chapter-group[open]>summary:before{transform:rotate(90deg)}
.lab-chapter-group{margin:4px 0 0 7px}
.lab-chapter-group>summary{padding:6px 8px;color:var(--msp-muted,var(--text-2));font-size:11.5px}
.lab-chapter-group>.node{margin-left:4px;width:calc(100% - 4px)}
.lab-home,.lab-empty{max-width:760px;margin:clamp(24px,8vh,88px) auto;padding:clamp(22px,5vw,46px);border:1px solid var(--msp-line,var(--line));border-radius:20px;background:var(--msp-surface,var(--surface));box-shadow:var(--msp-shadow,none)}
.lab-home-kicker,.lab-empty-code{color:var(--msp-accent-text,var(--gold-l));font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.lab-home :is(h1,h2),.lab-empty :is(h1,h2){margin:10px 0 12px;color:var(--msp-text,var(--text));font-size:clamp(28px,5vw,46px);line-height:1.15;letter-spacing:-.03em}
.lab-home-lead,.lab-empty p{max-width:60ch;margin:0;color:var(--msp-muted,var(--text-2));font-size:16px;line-height:1.8}
.lab-home-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0}
.lab-home-stats div{padding:14px;border:1px solid var(--msp-line,var(--line));border-radius:12px;background:var(--msp-raised,var(--surface-2))}
.lab-home-stats b,.lab-home-stats span{display:block}.lab-home-stats b{font:700 26px var(--gewu-font-mono,var(--mono));color:var(--msp-accent-text,var(--gold-l))}.lab-home-stats span{margin-top:3px;color:var(--msp-muted,var(--text-3));font-size:12px}
.lab-home-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 26px}.lab-home-actions .btn{min-height:46px}
.lab-home-note{display:grid;gap:5px;padding:14px 16px;border-left:3px solid var(--msp-accent,var(--gold));background:var(--msp-raised,var(--surface-2));color:var(--msp-muted,var(--text-2));font-size:13px;line-height:1.7}.lab-home-note b{color:var(--msp-text,var(--text))}
.lab-empty{max-width:620px}.lab-empty p{margin-bottom:8px}
@media(max-width:1000px){.msp-primary-nav{display:none}.lab-home,.lab-empty{margin:18px 0;padding:22px 16px}.lab-home-stats{gap:7px}.lab-home-stats div{padding:11px 8px}.lab-home-stats b{font-size:22px}}
@media(max-width:420px){.lab-filter-row{grid-template-columns:1fr}.lab-home-stats{grid-template-columns:1fr 1fr}.lab-home-stats div:last-child{grid-column:1/-1}}
