/* ============================================================
   存算协同 · 3D 工作台
   ============================================================ */
:root{
  --bg:#06080D; --panel:rgba(11,16,24,.86); --line:#1A2230;
  --ink:#EAF0F8; --ink2:#9BA8BA; --ink3:#5E6C80;
  --teal:#2ED9C3; --amber:#F5A94F; --blue:#5B8CFF;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ff:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
#app{display:flex;flex-direction:column;height:100%}

/* ---------- 顶栏 ---------- */
.bar{
  flex:none;display:flex;align-items:center;gap:22px;
  padding:10px 20px;border-bottom:1px solid var(--line);
  background:rgba(6,8,13,.9);backdrop-filter:blur(12px);z-index:20;
}
.back{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  color:var(--ink2);text-decoration:none;transition:.15s}
.back:hover{color:var(--ink)}
.back .ar{color:var(--teal)}
.ttl{display:flex;flex-direction:column;gap:1px;min-width:0}
.ttl b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ttl span{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.btns{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btns button{
  font-family:var(--ff);font-size:12px;color:var(--ink2);
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btns button:hover{color:var(--ink);border-color:#2A3648;background:#0B1018}
.btns button.on{border-color:var(--teal);color:var(--teal)}

/* ---------- 舞台 ---------- */
#stage{position:relative;flex:1;min-height:0;overflow:hidden}
#cv{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#cv.dragging{cursor:grabbing}

/* 编号标签 */
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{
  position:absolute;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--ink3);white-space:nowrap;
  padding:2px 6px;border:1px solid var(--line);border-radius:4px;
  background:rgba(6,8,13,.72);transition:opacity .3s;
  opacity:0;
}
.lbl.show{opacity:1}
.lbl.hot{color:var(--amber);border-color:#4A3418}

/* 阶段提示 */
.phase{position:absolute;left:20px;top:18px;max-width:min(300px,46vw);
  pointer-events:none}
.ph-dots{display:flex;gap:6px;margin-bottom:10px}
.ph-dots i{width:18px;height:2px;background:#22303F;border-radius:2px;
  transition:.25s}
.ph-dots i.on{background:var(--teal)}
.ph-name{font-size:15px;font-weight:600;letter-spacing:-.2px}
.ph-desc{margin-top:4px;font-size:12.5px;color:var(--ink3);line-height:1.7}

/* 参数面板 */
.panel{
  position:absolute;right:20px;top:18px;width:min(272px,60vw);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px 14px;backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.22s cubic-bezier(.4,0,.2,1);
}
.panel.show{opacity:1;visibility:visible;transform:none}
.p-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px}
.p-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--teal)}
.p-close{font-size:17px;line-height:1;color:var(--ink3);cursor:pointer;
  padding:2px 4px;border-radius:4px}
.p-close:hover{color:var(--ink);background:#151C27}
.panel h3{margin:0 0 3px;font-size:15px;letter-spacing:-.2px}
.p-kind{margin:0 0 12px;font-size:12px;color:var(--ink3)}
.panel dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 12px;
  font-size:12.5px}
.panel dt{color:var(--ink3);white-space:nowrap}
.panel dd{margin:0;color:var(--ink2);text-align:right;
  font-variant-numeric:tabular-nums}
.panel dd.teal{color:var(--teal)}
.panel dd.amber{color:var(--amber)}
.p-hint{margin:13px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:11px;color:var(--ink3);line-height:1.6}

/* 底部 */
.foot{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 20px 16px;display:flex;align-items:center;gap:18px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(6,8,13,0),rgba(6,8,13,.92) 42%);
  flex-wrap:wrap;
}
.gauges{display:flex;gap:22px;flex-wrap:wrap}
.g{display:flex;align-items:center;gap:9px}
.gk{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink3)}
.gbar{width:84px;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.gbar i{display:block;height:100%;width:0;background:var(--teal);
  transition:width .5s cubic-bezier(.4,0,.2,1)}
.gbar.b i{background:var(--blue)}
.gv{font-family:var(--mono);font-size:11.5px;color:var(--ink);
  min-width:38px;font-variant-numeric:tabular-nums}
.foot .line{margin:0;margin-left:auto;font-size:12.5px;color:var(--ink2);
  line-height:1.6;text-align:right}

/* ---------- 窄屏 ---------- */
@media(max-width:820px){
  .bar{padding:9px 14px;gap:12px}
  .ttl span{display:none}
  .panel{right:12px;left:12px;width:auto;top:auto;bottom:64px;
    border-radius:12px}
  .phase{left:14px;top:14px;max-width:52vw}
  .foot{padding:11px 14px 13px;gap:10px}
  .foot .line{margin-left:0;text-align:left;flex-basis:100%;
    font-size:11.5px}
  .gauges{gap:14px}
  .gbar{width:60px}
}
@media(max-width:480px){
  .ttl b{font-size:12px}
  .btns button{padding:6px 12px;font-size:12px}
}