/* 3C Studio 深色主题。沿用旧 3c.html 的配色, 保持视觉连续性。 */
:root{
  --bg:#0c1220; --surface:rgba(255,255,255,.03); --border:rgba(255,255,255,.08);
  --text:#e2e8f0; --muted:#64748b; --green:#6ee7b7; --amber:#fbbf24; --red:#f87171;
  --blue:#60a5fa; --accent:#818cf8;
  --nav-h:46px; --status-h:30px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"PingFang SC","Microsoft YaHei",sans-serif}
button{font:inherit;color:var(--text);background:rgba(255,255,255,.06);
  border:1px solid var(--border);border-radius:8px;padding:5px 12px;cursor:pointer}
button:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:rgba(110,231,183,.14);border-color:rgba(110,231,183,.35);color:var(--green)}
input[type=text],input:not([type]){font:inherit;color:var(--text);background:rgba(255,255,255,.05);
  border:1px solid var(--border);border-radius:8px;padding:6px 10px;outline:none}
input:focus{border-color:rgba(110,231,183,.4)}

/* ---------- 顶栏 ---------- */
.nav{height:var(--nav-h);display:flex;align-items:center;gap:14px;padding:0 14px;
  background:rgba(12,18,32,.97);border-bottom:1px solid var(--border)}
.logo{font-weight:800;letter-spacing:.02em;display:flex;align-items:center;gap:7px;white-space:nowrap}
.logo b{color:var(--green)}
.logo .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.prompt{flex:1;max-width:560px;display:flex;gap:6px}
.prompt input{flex:1}
.navstat{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:12px}

.st-text{color:var(--muted);white-space:nowrap}
.st-text.ok{color:var(--green)}
.st-text.warn{color:var(--amber)}
.st-text.err{color:var(--red)}

/* ---------- 三栏 ---------- */
.main{display:grid;grid-template-columns:250px 1fr 400px;
  height:calc(100vh - var(--nav-h) - var(--status-h))}
.panel{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.panel>header{display:flex;align-items:baseline;gap:8px;padding:9px 12px;
  border-bottom:1px solid var(--border);background:rgba(0,0,0,.25)}
.panel>header h3{font-size:13px;font-weight:700}
.panel>header .hint{font-size:11px;color:var(--muted)}
.shelf{border-right:1px solid var(--border);background:rgba(0,0,0,.15)}
#cubeList{flex:1;overflow-y:auto}
.code{border-left:1px solid var(--border)}
#blocklyDiv{flex:1;min-height:0}
.codebar{padding:8px;border-top:1px solid var(--border);display:flex;gap:8px}

/* ---------- 中间 3D ---------- */
.cad{position:relative;background:#0a0f1a}
#cadCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cad-hud{position:absolute;top:10px;left:12px;display:flex;gap:8px;pointer-events:none}
.badge{font-size:11px;padding:3px 9px;border-radius:20px;background:rgba(0,0,0,.5);
  border:1px solid var(--border);color:var(--muted)}
.warnbox{position:absolute;top:10px;right:12px;max-width:330px;max-height:38%;overflow:auto;
  font-size:11px;background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.3);
  color:#fcd34d;border-radius:9px;padding:8px 11px}
.warnbox ul{margin:4px 0 0 15px}
.warnbox li{margin:2px 0}
.simbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:rgba(10,15,26,.92);border-top:1px solid var(--border)}
.spd{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}
.spd input{width:90px}

/* ---------- 底栏 ---------- */
.status{height:var(--status-h);display:flex;align-items:center;gap:14px;padding:0 14px;
  font-size:11px;background:rgba(0,0,0,.35);border-top:1px solid var(--border)}
.grow{flex:1}
.muted{color:#334155}

/* ---------- toast ---------- */
#toasts{position:fixed;right:16px;bottom:44px;display:flex;flex-direction:column;gap:7px;z-index:99}
.toast{font-size:12px;padding:8px 13px;border-radius:9px;background:rgba(20,28,46,.97);
  border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:340px;
  transition:opacity .5s,transform .5s}
.toast.warn{border-color:rgba(251,191,36,.4);color:#fcd34d}
.toast.err{border-color:rgba(248,113,113,.4);color:#fca5a5}
.toast.out{opacity:0;transform:translateX(12px)}

/* ---------- 代码弹窗 ---------- */
dialog{background:#111827;color:var(--text);border:1px solid var(--border);border-radius:12px;
  padding:18px;max-width:min(860px,92vw);max-height:84vh}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h3{margin-bottom:10px}
dialog pre{background:#0a0f1a;border:1px solid var(--border);border-radius:8px;padding:12px;
  overflow:auto;max-height:56vh;font:12px/1.55 "JetBrains Mono",Consolas,monospace;white-space:pre}
dialog ul{margin:6px 0 10px 18px;color:#fcd34d;font-size:12px}
dialog form{margin-top:12px;text-align:right}

/* 手机竖屏兜底: 三栏堆叠 */
@media (max-width:900px){
  .main{grid-template-columns:1fr;grid-template-rows:auto 46vh auto;height:auto;overflow:auto}
  html,body{overflow:auto}
  .shelf{border-right:none;border-bottom:1px solid var(--border)}
  .code{border-left:none;border-top:1px solid var(--border);min-height:50vh}
}

/* ---------- 试跑对照 ---------- */
.trialbox{position:absolute;left:12px;bottom:52px;max-width:430px;font-size:12px;
  background:rgba(12,18,32,.96);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.trialbox h4{font-size:12px;margin-bottom:6px;color:var(--green)}
.trialbox table{width:100%;border-collapse:collapse}
.trialbox td{padding:2px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.trialbox td.n{text-align:right;font-family:"JetBrains Mono",Consolas,monospace}
.trialbox .up{color:var(--green)}
.trialbox .down{color:var(--red)}
.trialbox .flat{color:var(--muted)}
.trialbox .cfg{color:var(--muted);font-size:11px;margin-top:6px;line-height:1.4}
.trialbox .warn{color:var(--amber);margin-top:6px}
.trialbox .close{float:right;cursor:pointer;color:var(--muted)}

/* 减法: 次要按钮 / 可折叠提醒 */
button.ghost{background:transparent;border-color:rgba(255,255,255,.12);color:var(--muted);font-size:12px}
button.ghost:hover:not(:disabled){color:var(--text)}
.warnbox .wsum{cursor:default;font-weight:600}
.warnbox .wtog{cursor:pointer;text-decoration:underline;margin-left:6px;font-weight:400}

/* 模型选择器 */
#pickDlg{max-width:min(900px,94vw)}
#pickSearch{width:100%;margin:8px 0 12px}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;
  max-height:56vh;overflow:auto}
.pickcell{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;
  padding:6px;cursor:pointer;text-align:center;transition:border-color .12s}
.pickcell:hover{border-color:var(--green)}
.pickcell img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:6px}
.pickcell .nm{font-size:11.5px;margin-top:4px;word-break:break-all;line-height:1.3}
.pickcell .meta{font-size:10.5px;color:var(--muted)}

/* 安装可行性 */
.fitbox{position:absolute;right:12px;top:56px;max-width:340px;font-size:11.5px;
  background:rgba(12,18,32,.95);border:1px solid var(--border);border-radius:10px;padding:8px 11px}
.fitbox.bad{border-color:rgba(248,113,113,.45)}
.fitbox b{color:var(--green)}
.fitbox.bad b{color:var(--red)}
.fitbox ul{margin:6px 0 0 14px;max-height:30vh;overflow:auto}
.fitbox li{margin:3px 0;line-height:1.35}

/* 互动环境编辑器 */
.envbox{position:absolute;left:12px;bottom:56px;width:290px;font-size:11.5px;z-index:5;
  background:rgba(12,18,32,.96);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.envbox h4{margin:0 0 7px;font-size:12px;color:var(--fg)}
.envbox .row{display:flex;align-items:center;gap:7px;margin:5px 0}
.envbox .row>span:first-child{width:52px;color:var(--mut);flex:none}
.envbox input[type=range]{flex:1;min-width:0}
.envbox .val{width:56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--fg);flex:none}
.envbox .pre{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0 4px}
.envbox .pre button{font-size:11px;padding:3px 8px}
.envbox .chk{margin-top:8px;padding:6px 8px;border-radius:6px;line-height:1.45;
  background:rgba(74,222,128,.10);border:1px solid rgba(74,222,128,.30);color:#9ae6b4}
.envbox .chk.bad{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.35);color:#fca5a5}
.envbox .cls{position:absolute;right:8px;top:7px;cursor:pointer;color:var(--mut)}
.envbox .cls:hover{color:var(--fg)}

/* 右侧头部: 这段程序写给哪颗 cube */
.panel.code header .hint b{color:var(--fg)}
.panel.code header .kd{color:var(--accent);opacity:.9}
.panel.code header .xb{color:#fca5a5;margin-left:6px;cursor:help}

/* 仿真状态: 拦停和重置要看得见 */
.st-text.bad{color:#fca5a5}
.st-text.warn{color:#fbbf24}