*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  background:#12151a;color:#e6edf5;font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.app{display:grid;grid-template-columns:250px 1fr 316px;height:100vh}

/* ============ 左栏 ============ */
.left{
  background:#181c23;border-right:1px solid #262d38;
  display:flex;flex-direction:column;padding:14px 0 0;min-height:0;
}
.brand{display:flex;gap:9px;align-items:center;padding:0 14px 12px}
.logo{
  font-weight:800;font-size:14px;letter-spacing:.5px;color:#fff;
  background:linear-gradient(180deg,#e23b32,#b3241c);
  padding:5px 8px;border-radius:6px;flex:none;
}
.ttl{font-size:11.5px;line-height:1.35;color:#8e9bab}
.ttl span{color:#5d6b7d;font-size:10.5px}
.progress{height:3px;background:#242b35;margin:0 14px 12px;border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2f9cf4,#5ce1a0);transition:width .35s}

.stephead{display:flex;justify-content:space-between;align-items:center;padding:0 14px 7px}
.stephead .lbl{font-size:10.5px;color:#68768a;letter-spacing:1px}
.badge{
  font-size:10.5px;color:#6b7686;background:#20262f;border:1px solid #2b323d;
  padding:2px 7px;border-radius:9px;opacity:.35;transition:.3s;
}
.badge.show{opacity:1;color:#ffb0a8;border-color:#5a2b26;background:#2a1a18}

.steplist{flex:1;overflow:auto;padding:0 9px 14px;min-height:0}
.steplist::-webkit-scrollbar{width:6px}
.steplist::-webkit-scrollbar-thumb{background:#2c3440;border-radius:3px}
.step{
  display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:7px;
  color:#77839a;font-size:12.5px;transition:.2s;
}
.step .dot{width:6px;height:6px;border-radius:50%;background:#333c49;flex:none;transition:.25s}
.step.done{color:#5d8f74}
.step.done .dot{background:#3fbf72}
.step.now{background:#1f2f42;color:#cfe6ff}
.step.now .dot{background:#3aa0ff;box-shadow:0 0 0 4px rgba(58,160,255,.18)}
.step.now .txt{font-weight:700}

.donebadge{
  display:none;margin:0 14px 12px;padding:8px;text-align:center;font-size:12.5px;
  background:#153a26;color:#6ee6a0;border:1px solid #22593a;border-radius:8px;
}

/* ============ 中：3D ============ */
#viewport{position:relative;background:#1a1d22;overflow:hidden}
#viewport canvas{display:block;width:100%;height:100%}

.hoverline{
  position:absolute;top:13px;left:50%;transform:translateX(-50%);
  background:rgba(10,16,24,.86);border:1px solid #2f4a68;color:#8fd4ff;
  padding:5px 13px;border-radius:16px;font-size:12px;letter-spacing:.5px;
  opacity:0;transition:.15s;pointer-events:none;white-space:nowrap;
}
.hoverline.show{opacity:1}

.live{
  position:absolute;top:13px;left:13px;font-size:12px;color:#8b98a8;
  background:rgba(10,16,24,.8);border:1px solid #262f3b;padding:5px 11px;border-radius:7px;
}
.live b{color:#ff8f7f;font-size:13px}

.topbtns{position:absolute;top:13px;right:13px;display:flex;gap:7px}
.topbtns button{
  background:rgba(22,28,36,.9);border:1px solid #2c3745;color:#93a2b5;
  padding:6px 12px;border-radius:7px;font-size:12px;cursor:pointer;transition:.18s;
}
.topbtns button:hover{border-color:#3f5c80;color:#cfe4fb;background:#1c2733}

.standby{
  position:absolute;bottom:96px;left:50%;transform:translateX(-50%);
  font-size:12px;color:#5f6d7f;background:rgba(10,16,24,.6);
  padding:5px 14px;border-radius:14px;pointer-events:none;
}

.footerbar{
  position:absolute;left:0;right:0;bottom:0;padding:13px 20px 15px;
  background:linear-gradient(0deg,rgba(10,14,19,.96) 58%,rgba(10,14,19,0));
}
.now{display:flex;align-items:baseline;gap:9px;margin-bottom:4px}
.now .k{font-size:10.5px;color:#66748a;letter-spacing:1px}
.now b{font-size:15.5px;color:#5fb8ff}
.hint{font-size:13px;color:#a9b7c9;line-height:1.5}
.danger{
  display:none;margin-top:7px;font-size:12px;color:#ffc07a;line-height:1.5;
  background:rgba(70,45,10,.55);border-left:3px solid #d99a2b;padding:6px 11px;border-radius:0 6px 6px 0;
}

/* ============ 右栏 ============ */
.right{background:#181c23;border-left:1px solid #262d38;padding:15px;overflow:auto;min-height:0}
.right::-webkit-scrollbar{width:6px}
.right::-webkit-scrollbar-thumb{background:#2c3440;border-radius:3px}
.sect{display:block;margin-bottom:18px}
.stitle{
  font-size:11px;color:#68768a;letter-spacing:1px;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:center;
}
.mini{
  background:#1f4d78;border:1px solid #2c6ba6;color:#bfe0ff;font-size:10.5px;
  padding:4px 9px;border-radius:6px;cursor:pointer;white-space:nowrap;
}
.mini:hover{background:#26618f}
/* 通用禁用态：变灰且不可点（顶栏按钮、面板按键都适用） */
.mini.dim,.btn.dim{opacity:.42;filter:grayscale(.55);pointer-events:none;cursor:default}

.params{display:flex;flex-direction:column;gap:1px;background:#1d232c;border:1px solid #262e39;border-radius:8px;overflow:hidden}
.prow{display:flex;justify-content:space-between;padding:7px 11px;font-size:12.5px;background:#1b212a;gap:10px}
.prow span{color:#75828f;flex:none}
.prow b{color:#c8d5e2;font-weight:600;text-align:right}

.speclist{display:flex;flex-direction:column;gap:6px;transition:.25s;margin-bottom:16px}
.speclist.locked,.sizeblock.locked{opacity:.4;filter:saturate(.35);pointer-events:none}
.sizeblock{transition:.25s}
.spec{
  text-align:left;background:#1d232c;border:1px solid #2a323d;border-radius:8px;
  padding:8px 11px;cursor:pointer;color:#cbd6e3;transition:.18s;
  display:flex;flex-direction:column;gap:2px;font-family:inherit;
}
.spec:hover{border-color:#3b6ea3;background:#1f2b38}
.spec.sel{border-color:#3aa0ff;background:#1b3147;box-shadow:inset 0 0 0 1px #3aa0ff}
.spec .nm{font-size:13px;font-weight:700}
.spec .pv{font-size:10.5px;color:#7c8998}
.spec.size .nm{font-size:12.5px}

#curveCanvas{display:block;border-radius:8px;border:1px solid #262e39}

.report{display:none;margin-top:11px;font-size:12.5px}
.report .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #252d38;gap:8px}
.report .row span{color:#7d8b9c;flex:none}
.report .row b{color:#dfe8f2;text-align:right}
.report .row.hl b{color:#5fe08a;font-size:14px}
.report .note{margin-top:9px;font-size:10.5px;color:#5f6b7a}
.report .note.warn{margin-top:6px;padding:5px 7px;border-radius:4px;background:rgba(214,140,40,.12);color:#c07a1e;line-height:1.5}

/* ============ 手控器二级界面（P1-2：右栏内嵌，不再遮挡 3D） ============
 * 旧写法：position:fixed; inset:0; 居中 + 全屏压暗 + backdrop-filter:blur(3px)
 *   -> 面板永远在屏幕正中，整屏变暗变糊，机器完全被遮住。
 * 新写法：作为右栏（316px 列）里的一个普通块，只是"显示/隐藏"。
 *   面板宽度自适应右栏（不再写死 372px），按键相应瘦身。
 *   z-index 不再需要（同层流式排布），删除全屏遮罩与模糊。
 * ========================================================================== */
.hswrap{display:none;margin-bottom:18px}
.hswrap.show{display:block}
.handset{
  width:100%;background:#242a32;border:1px solid #39424f;border-radius:12px;
  padding:12px 12px 13px;box-shadow:0 10px 28px rgba(0,0,0,.45);
  animation:hspop .22s ease;
}
@keyframes hspop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hs-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:#8b98a8;letter-spacing:1px;margin-bottom:10px;
}
.hs-head button{
  background:none;border:none;color:#5b6675;font-size:15px;cursor:pointer;
  padding:0 4px;line-height:1;
}
.hs-head button:hover{color:#cfe4fb}

.hs-body{
  background:#e9e6de;border-radius:10px;padding:10px 10px 9px;
  display:flex;flex-direction:column;gap:7px;
  box-shadow:inset 0 0 0 1px #cfcbc1;
}
.hs-row{display:flex;gap:7px;justify-content:center}
.hs-row.led-row{
  background:#c0392b;border-radius:5px;padding:5px 6px;gap:8px;
}
.hs-led{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1}
.hs-led i{
  display:block;width:9px;height:9px;border-radius:50%;
  background:#7d2a20;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);transition:.2s;
}
.hs-led.on i{background:#6cff8f;box-shadow:0 0 8px #4dff7a,inset 0 0 2px #fff}
.hs-led span{font-size:9.5px;color:#fff;letter-spacing:.5px}

.hs-key{
  flex:1;font-family:inherit;font-size:12px;font-weight:700;color:#f2f2f2;
  background:linear-gradient(180deg,#4b4b4b,#2e2e2e);
  border:1px solid #1d1d1d;border-radius:7px;padding:8px 0;cursor:pointer;
  box-shadow:0 2px 0 #1a1a1a, inset 0 1px 0 rgba(255,255,255,.16);
  transition:.1s;letter-spacing:.5px;
}
.hs-key:hover{filter:brightness(1.22)}
.hs-key:active{transform:translateY(2px);box-shadow:0 0 0 #1a1a1a, inset 0 1px 0 rgba(255,255,255,.1)}
.hs-key.dim{opacity:.42;filter:grayscale(.5);pointer-events:none;cursor:default}
.hs-row.stop-row{padding:1px 0}
.hs-key.stop{
  background:#c0392b;border-color:#8e2b1f;color:#ffecec;
  box-shadow:0 2px 0 #8e2b1f, inset 0 1px 0 rgba(255,255,255,.2);
  font-size:13px;padding:8px 0;
}
.hs-logo{
  text-align:center;font-size:16px;font-weight:800;letter-spacing:2px;
  color:#c0392b;font-style:italic;padding-top:1px;
}
.hs-hint{margin-top:8px;font-size:10.5px;color:#6d7889;text-align:center}
.hs-read{
  margin-top:8px;padding:7px 9px;border-radius:7px;background:#141a21;
  border:1px solid #29323d;display:flex;justify-content:space-between;
  font-size:11px;color:#8b98a8;gap:6px;flex-wrap:wrap;
}
.hs-read b{color:#ff9a8a;font-size:12px}

/* ============ 提示条 ============ */
/* 【反馈修正】提示卡不再挂右上角（曾挡住场景右侧的显示器点击）；
 * 移到画面底部中央、底栏之上；容器点击穿透，只有卡片本体可点。 */
.toastwrap{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);width:360px;display:flex;flex-direction:column-reverse;gap:8px;z-index:90;pointer-events:none}
.toastwrap .toast{pointer-events:auto}
.toast{
  background:#1c232d;border:1px solid #2d3744;border-left:3px solid #3aa0ff;
  border-radius:8px;padding:10px 12px;box-shadow:0 8px 26px rgba(0,0,0,.5);
  animation:slide .22s ease;position:relative;
}
@keyframes slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.toast.fade{opacity:0;transform:translateX(18px);transition:.5s}
.toast.warn{border-left-color:#ffa23a}
.toast.ok{border-left-color:#3fbf72}
.toast .tt{font-size:12.5px;font-weight:700;color:#e8f0f8;margin-bottom:4px;padding-right:16px}
.toast .tm{font-size:12px;color:#94a2b3;line-height:1.55}
.toast .x{position:absolute;top:7px;right:8px;background:none;border:none;color:#5b6675;cursor:pointer;font-size:12px}
.tbtns{display:flex;gap:8px;margin-top:9px}
.tbtns button{
  background:#242c37;border:1px solid #323c4a;color:#b6c4d4;font-size:12px;
  padding:5px 12px;border-radius:6px;cursor:pointer;font-family:inherit;
}
.tbtns button.primary{background:#1f5c94;border-color:#2a78bd;color:#d9ecff}
/* 次要出口（如急停弹窗的「知道了」）：只关闭弹窗、不改变锁定态 */
.tbtns button.ghost{background:transparent;border-color:#3a4553;color:#8d9bab}
.tbtns button:hover{filter:brightness(1.18)}

/* ============ 弹窗 ============ */
.modalwrap{
  position:fixed;inset:0;background:rgba(6,9,13,.72);display:none;
  align-items:center;justify-content:center;z-index:95;backdrop-filter:blur(2px);
}
.modalwrap.show{display:flex}
.modal{
  width:420px;background:#1b2129;border:1px solid #313b48;border-radius:12px;
  padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:hspop .2s ease;
}
.modal .mt{font-size:16px;font-weight:700;color:#ff8f7f;margin-bottom:10px}
.modal .mm{font-size:12.5px;color:#93a2b3;line-height:1.85}

/* ============ 加载 ============ */
.boot{
  position:fixed;inset:0;background:#12151a;display:flex;align-items:center;justify-content:center;
  color:#6b7889;font-size:14px;z-index:100;transition:opacity .5s;
}
.boot .err{color:#ff8f7f;line-height:1.9;text-align:center;font-size:13px}

.errbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:#5a1a15;border-top:2px solid #ff6b5a;color:#ffd9d4;
  padding:9px 16px;font-size:12.5px;font-family:Consolas,monospace;
}


/* ==================== 【P2】纸箱实验室右栏样式（自纸箱项目移植） ==================== */
/* 通用禁用态：变灰且不可点（顶栏按钮、面板按键都适用） */
.mini.dim,.btn.dim{opacity:.42;filter:grayscale(.55);pointer-events:none;cursor:default}

/* 控制屏复刻件：机壳自带样式，这里只留出下边距 */
.panelhost{margin-bottom:16px}

/* 纸箱规格卡 */
.cartlist{display:flex;flex-direction:column;gap:6px}
.cart{
  text-align:left;background:#1d232c;border:1px solid #2a323d;border-radius:7px;
  padding:8px 10px;cursor:pointer;color:#cbd6e3;transition:.18s;
  display:flex;flex-direction:column;gap:2px;font-family:inherit;
}
.cart:hover{border-color:#3b6ea3;background:#1f2b38}
.cart.sel{border-color:#3aa0ff;background:#1b3147;box-shadow:inset 0 0 0 1px #3aa0ff}
.cart .nm{font-size:12.5px;font-weight:700;color:#dfe8f2}
.cart .pv{font-size:10.5px;color:#7c8998;line-height:1.45}

/* 试验报告卡 */
.reportcard .report{font-size:12.5px}
.reportcard .report .row{
  display:flex;justify-content:space-between;gap:8px;padding:6px 0;
  border-bottom:1px dashed #252d38;
}
.reportcard .report .row span{color:#7d8b9c;flex:none}
.reportcard .report .row b{color:#dfe8f2;text-align:right;word-break:break-all}
.reportcard .report .row.hl b{color:#5fe08a;font-size:14px}
.reportcard .report .note{
  margin-top:9px;font-size:10.5px;color:#5f6b7a;line-height:1.55;
}