/* =====================================================================
 * styles.css —— 倒立摆教学平台样式（深色、信息密度优先）
 * ===================================================================== */
:root{
  --bg:#0b0f18; --bg2:#111826; --bg3:#151d2c; --line:#232e44; --line2:#2e3b56;
  --fg:#d7e2f0; --fg2:#96a7c2; --fg3:#6c7d99;
  --acc:#4ea8ff; --acc2:#5fd08a; --warn:#e8b44c; --bad:#ff6b6b; --mag:#c86fd8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:13px/1.55 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  overflow:hidden;
}
button{
  background:var(--bg3); color:var(--fg2); border:1px solid var(--line2);
  border-radius:6px; padding:5px 10px; cursor:pointer; font-size:12px; font-family:inherit;
  transition:all .12s;
}
button:hover{background:#1c2740; color:var(--fg); border-color:#3d4f72}
button.on{background:#1d3a5c; color:#bfe0ff; border-color:var(--acc)}
button.primary{background:#1d3a5c; color:#cfe6ff; border-color:#39628f}
button.mini{padding:3px 8px; font-size:11px}
select{background:var(--bg3); color:var(--fg2); border:1px solid var(--line2); border-radius:5px; padding:3px 5px; font-size:12px}
code{background:#0d1524; border:1px solid var(--line); border-radius:3px; padding:0 4px; font-size:11.5px; color:#a9c4e6}

/* ---------- 顶栏 ---------- */
#topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:8px 14px; background:linear-gradient(180deg,#131b2b,#0e1522);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:8px}
.brand .logo{color:var(--warn); font-size:19px; font-weight:700; transform:rotate(12deg); display:inline-block}
.brand .title{font-size:15px; font-weight:650; letter-spacing:.3px}
.brand .subtitle{font-size:11px; color:var(--fg3)}
.modes{display:flex; gap:4px; flex-wrap:wrap; flex:1}
.runctl{display:flex; gap:6px; align-items:center}
.runctl .sel{font-size:11px; color:var(--fg3); display:flex; gap:4px; align-items:center}

#modeDescBar{
  padding:5px 14px; background:#0d1421; border-bottom:1px solid var(--line);
  font-size:11.5px; color:var(--fg2); display:flex; justify-content:space-between; gap:12px;
}
#modeDescBar .kbd-hint{color:var(--fg3)}
#modeDescBar b{color:var(--fg2); font-weight:600}

/* ---------- 布局 ---------- */
main{display:flex; height:calc(100vh - 74px); overflow:hidden}
.left{flex:1; min-width:0; display:flex; flex-direction:column; padding:8px; gap:8px; overflow:hidden}
.right{
  width:400px; min-width:340px; border-left:1px solid var(--line);
  background:#0d1320; display:flex; flex-direction:column; overflow:hidden;
}

.stage-wrap{flex:0 0 44%; min-height:190px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#0f1420}
#stage{width:100%; height:100%; display:block}

.readout{
  display:flex; flex-wrap:wrap; gap:3px 6px; padding:5px 7px;
  background:var(--bg2); border:1px solid var(--line); border-radius:6px;
  font-family:ui-monospace,Consolas,monospace; font-size:11px; flex:0 0 auto; max-height:64px; overflow:auto;
}
.readout .ro{display:flex; gap:4px; padding:1px 5px; background:#0d1524; border-radius:4px; border:1px solid #1b2438}
.readout .k{color:var(--fg3)}
.readout .v{color:var(--acc); font-weight:600}

.plots{flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:8px}
.plot{position:relative; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#111826; min-height:110px}
.plot canvas{width:100%; height:100%; display:block}
.plot-tabs{position:absolute; top:3px; right:4px; z-index:2; display:flex; gap:3px}
.plot-tabs button{padding:1px 6px; font-size:10px; background:rgba(20,28,44,.85)}

/* ---------- 右侧面板 ---------- */
.tabs{display:flex; gap:3px; padding:7px 8px; border-bottom:1px solid var(--line); background:#0f1626; flex-wrap:wrap}
.panel-host{flex:1; overflow:hidden; position:relative}
.panel{display:none; position:absolute; inset:0; overflow-y:auto; padding:10px 12px 40px}
.panel.on{display:block}
.panel::-webkit-scrollbar{width:9px}
.panel::-webkit-scrollbar-thumb{background:#26314a; border-radius:5px}
.panel::-webkit-scrollbar-track{background:#0d1320}

.sect{margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.sect:last-child{border-bottom:none}
.sect-h{font-size:12.5px; font-weight:650; color:#bfd4ee; margin-bottom:5px; letter-spacing:.2px}
.sect-hint,.hint{font-size:11px; color:var(--fg3); line-height:1.5; margin:3px 0 6px}
.sect.warn{background:#241a1a; border:1px solid #4a2b2b; border-radius:6px; padding:8px 10px}
.sect.warn .sect-h{color:#ffb0b0}

/* 滑块 */
.ctl{margin-bottom:9px}
.ctl label{display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; margin-bottom:2px}
.ctl .lab{color:var(--fg2)}
.ctl .val{color:var(--acc); font-family:ui-monospace,monospace; font-size:11px; font-weight:600}
.ctl input[type=range]{width:100%; height:16px; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer}
.ctl input[type=range]::-webkit-slider-runnable-track{height:4px; background:#22304a; border-radius:3px}
.ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:13px; height:13px; margin-top:-4.5px;
  background:var(--acc); border-radius:50%; border:2px solid #0b111c;
}
.ctl input[type=range]::-moz-range-track{height:4px; background:#22304a; border-radius:3px}
.ctl input[type=range]::-moz-range-thumb{width:12px; height:12px; background:var(--acc); border:2px solid #0b111c; border-radius:50%}
.ctl.row{display:flex; flex-direction:column}
.ctl .chk{display:flex; align-items:center; gap:6px; justify-content:flex-start}
.btnrow{display:flex; gap:4px; flex-wrap:wrap; margin:6px 0 10px}

/* 表格 */
table.kv{width:100%; border-collapse:collapse; font-size:11px}
table.kv td{padding:3px 4px; border-bottom:1px solid #1a2334; vertical-align:top}
table.kv td:first-child{color:var(--fg3); width:52%}
table.kv td:last-child{color:var(--fg); font-family:ui-monospace,monospace}
table.kv b{color:var(--acc2)}
.ok{color:var(--acc2)} .bad{color:var(--bad)}

table.mat{border-collapse:collapse; font-family:ui-monospace,monospace; font-size:10.5px; margin:4px 0}
table.mat th{color:var(--fg3); font-weight:500; padding:1px 5px; font-size:10px}
table.mat td{padding:1px 6px; text-align:right; color:#b9cbe4; border-left:1px solid #1a2334}
table.mat tr:first-child th{border-bottom:1px solid #1a2334}
.mat-cap{font-size:10.5px; color:var(--fg3); font-family:ui-monospace,monospace; margin-top:4px}

table.cmp{width:100%; border-collapse:collapse; font-size:11px; margin:6px 0}
table.cmp th{background:#141d2e; color:#bfd4ee; padding:4px 6px; text-align:left; border:1px solid var(--line)}
table.cmp td{padding:4px 6px; border:1px solid var(--line); color:var(--fg2); vertical-align:top}
table.cmp td:first-child{color:var(--fg3); width:26%}

/* 实验卡片 */
.lab{background:#0f1726; border:1px solid var(--line); border-radius:7px; padding:9px 10px; margin-bottom:9px}
.lab-t{font-size:12px; font-weight:650; color:#cfe0f5; margin-bottom:4px}
.lab-g,.lab-s{font-size:11px; color:var(--fg2); margin-bottom:4px; line-height:1.5}
.lab-g b,.lab-s b{color:var(--warn); font-weight:600}

/* 理论面板 */
.theory p{font-size:11.5px; color:var(--fg2); margin:6px 0; line-height:1.65}
.theory ul,.theory ol{font-size:11.5px; color:var(--fg2); margin:6px 0 6px 4px; padding-left:16px; line-height:1.6}
.theory li{margin-bottom:4px}
.theory b{color:#dbe7f6}
.theory i{color:#a9c4e6; font-style:italic}
.eq{
  font-family:"Cambria Math","Latin Modern Math",Georgia,serif; font-size:13px; color:#e4ecf7;
  background:#0c1420; border-left:2px solid var(--acc); border-radius:0 4px 4px 0;
  padding:6px 10px; margin:7px 0; overflow-x:auto; white-space:nowrap;
}
.eq.big{font-size:15px; text-align:center; border-left-color:var(--acc2)}
.eq.matrix{white-space:normal; line-height:1.75; font-size:12px}
.eq-inline{font-family:"Cambria Math",Georgia,serif; color:#e4ecf7; background:#0c1420; padding:0 4px; border-radius:3px}
.note{
  font-size:11px; color:#d6c48a; background:#1e1a10; border-left:2px solid var(--warn);
  padding:6px 9px; margin:7px 0; border-radius:0 4px 4px 0; line-height:1.6;
}
.note b{color:#f0d99a}

@media (max-width:1180px){
  .right{width:340px}
  .plots{grid-template-columns:1fr}
  .plots .plot:nth-child(n+3){display:none}
}