@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0c0f;--surf:#13151a;--panel:#1a1d25;--bord:#252830;
  --acc:#f97316;--txt:#e8eaf0;--sub:#8890a0;--muted:#4b5060;
  --good:#22c55e;--warn:#eab308;--bad:#ef4444;
  --c1:#38bdf8;--c2:#a78bfa;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:'Space Grotesk',sans-serif;-webkit-text-size-adjust:100%}

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT — one grid drives both shells. Named areas let phone and desktop place
   the same DOM differently, so there is only ever one copy of the markup.
     phone   : header, 3D view, scrolling panel, footer, bottom tab bar
     desktop : left sidebar column (header/tabs/panel/footer) + 3D view alongside
   ══════════════════════════════════════════════════════════════════════════════ */
#app{
  display:grid;width:100%;height:100vh;height:100dvh;overflow:hidden;
  grid-template-columns:1fr;
  grid-template-areas:"head" "canvas" "content" "foot" "tabs";
  grid-template-rows:auto 34vh 1fr auto auto;
}
#shead     {grid-area:head}
#stabbar   {grid-area:tabs}
#scontent  {grid-area:content}
#sfoot     {grid-area:foot}
#canvasWrap{grid-area:canvas;position:relative;overflow:hidden;background:var(--bg);min-width:0;min-height:0}

@media (min-width:900px){
  #app{
    grid-template-columns:350px 1fr;
    grid-template-areas:"head canvas" "tabs canvas" "content canvas" "foot canvas";
    grid-template-rows:auto auto 1fr auto;
  }
  #shead,#stabbar,#scontent,#sfoot{border-right:1px solid var(--bord);background:var(--surf)}
  #scontent{background:var(--panel)}
}

#c3d{display:block;width:100%;height:100%;background:var(--bg);cursor:grab;touch-action:none}
#c3d:active{cursor:grabbing}

/* HUD overlays sit inside the 3D view, not the page */
#hud{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:5px;pointer-events:none;z-index:6}
#vcam{position:absolute;bottom:12px;right:12px;display:flex;gap:5px;z-index:6;flex-wrap:wrap;justify-content:flex-end}
#hint{position:absolute;bottom:12px;left:12px;font-size:9px;color:var(--muted);font-family:'JetBrains Mono',monospace;background:rgba(11,12,15,.75);padding:3px 8px;border-radius:5px;pointer-events:none;z-index:6}
@media (max-width:899px){ #hint{display:none} }

.hpill{background:rgba(11,12,15,.9);border:1px solid var(--bord);border-radius:20px;padding:3px 10px;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--sub);display:flex;align-items:center;gap:6px}
.hpill b{color:var(--txt);font-weight:500}
.hdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.vbtn{background:rgba(19,21,26,.92);border:1px solid var(--bord);border-radius:5px;padding:5px 10px;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--sub);cursor:pointer;transition:all .15s}
.vbtn:hover,.vbtn.on{border-color:var(--acc);color:var(--acc)}

/* PANEL INTERNALS */
#shead{padding:11px 13px 9px;border-bottom:1px solid var(--bord);background:var(--surf)}
.logo{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.logo-name{font-size:16px;font-weight:700;letter-spacing:-0.3px}
.srow{display:flex;gap:0}
/* Phone: header collapses to one compact row so the 3D view keeps its space */
@media (max-width:899px){
  #shead{display:flex;align-items:center;gap:10px;padding:9px 12px}
  .logo{margin-bottom:0;flex-shrink:0}
  .logo-name{font-size:14px}
  .srow{flex:1;min-width:0}
}
.sstat{flex:1;padding:4px 7px;background:var(--panel);border:1px solid var(--bord)}
.sstat:first-child{border-radius:5px 0 0 5px}.sstat:last-child{border-radius:0 5px 5px 0}
.sstat+.sstat{border-left:none}
.ssl{font-size:9px;color:var(--sub);text-transform:uppercase;letter-spacing:.6px}
.ssv{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--acc);line-height:1.3}

#stabbar{display:flex;gap:2px;padding:7px 10px 0;background:var(--surf)}
.stab{flex:1;padding:5px 0;font-size:11px;font-weight:600;text-align:center;border-radius:5px 5px 0 0;cursor:pointer;border:1px solid transparent;border-bottom:none;color:var(--muted);background:none;transition:all .15s;font-family:inherit}
.stab.on{background:var(--panel);color:var(--txt);border-color:var(--bord)}
.stab svg{display:none}
/* Phone: tab bar moves to the bottom and shows icons above the labels */
@media (max-width:899px){
  #stabbar{border-top:1px solid var(--bord);padding:6px 8px;
    padding-bottom:max(8px, env(safe-area-inset-bottom))}
  .stab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:50px;padding:5px 0 3px;border:none;border-radius:11px;font-size:10px}
  .stab svg{display:block;width:22px;height:22px}
  .stab.on{background:none;color:var(--acc)}
}

#scontent{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:11px;display:flex;flex-direction:column;gap:9px;background:var(--panel);border-top:1px solid var(--bord);min-height:0}
#scontent::-webkit-scrollbar{width:3px}
#scontent::-webkit-scrollbar-thumb{background:var(--bord);border-radius:2px}

.pane{display:none;flex-direction:column;gap:9px}
.pane.on{display:flex}

.sec{font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);padding-bottom:5px;border-bottom:1px solid var(--bord);margin-top:2px}

/* Sliders */
.sl{display:flex;flex-direction:column;gap:3px}
.slr{display:flex;justify-content:space-between;align-items:center}
.sln{font-size:11px;color:var(--sub)}
.slv{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--txt);background:var(--bg);border:1px solid var(--bord);border-radius:4px;padding:1px 5px;min-width:55px;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--bord);border-radius:2px;outline:none;cursor:pointer;margin-top:1px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--acc);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--acc);cursor:pointer}
.r1::-webkit-slider-thumb{background:var(--c1);box-shadow:0 0 0 1px var(--c1)}
.r2::-webkit-slider-thumb{background:var(--c2);box-shadow:0 0 0 1px var(--c2)}

/* Toggle rows */
.trow{display:flex;gap:3px;background:var(--bg);border-radius:6px;padding:3px}
.tbtn{flex:1;font-size:10px;font-weight:600;padding:5px 2px;border-radius:4px;border:none;background:none;color:var(--muted);cursor:pointer;transition:all .15s;text-align:center;white-space:nowrap}
.tbtn.on{background:var(--acc);color:#000}
.tbtn.locked{opacity:.55;cursor:not-allowed}
.tbtn.locked::before{content:"🔒 ";font-size:9px}
.tbtn.locked.on{background:none;color:var(--muted)}

/* Metrics */
.mg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mc{background:var(--bg);border:1px solid var(--bord);border-radius:6px;padding:7px 9px}
.mc.full{grid-column:1/-1}
.ml{font-size:9px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.mv{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:500;line-height:1.1}
.mu{font-size:9px;color:var(--sub);margin-left:2px}
.mn{font-size:8px;color:var(--muted);margin-top:3px;line-height:1.3;letter-spacing:.2px}
.scap{font-size:9px;color:var(--muted);line-height:1.4;padding:1px 2px 5px}
.dcard{background:var(--bg);border:1px solid var(--bord);border-radius:8px;padding:11px 12px;margin-top:10px}
.dtitle{font-size:12px;font-weight:700;color:var(--txt);margin-bottom:3px}
.dtext{font-size:9px;color:var(--muted);line-height:1.45;margin-bottom:9px}
.dbtns{display:flex;flex-direction:column;gap:6px}
.dbtn{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;border-radius:6px;
  font-size:12px;font-weight:700;text-decoration:none;color:#fff;transition:filter .15s,transform .1s;
  font-family:'Space Grotesk',sans-serif}
.dbtn:hover{filter:brightness(1.12)}
.dbtn:active{transform:translateY(1px)}
.dbtn .dmark{font-size:13px;font-weight:800;opacity:.95}
.d-cashapp{background:#00d54b;color:#00320f}
.d-venmo{background:#008cff}
.d-paypal{background:#0070ba}
@media print{.noprint{display:none!important}}

/* ── LEGAL ── */
#sfoot{flex-shrink:0;padding:6px 12px;border-top:1px solid var(--bord);display:flex;
  justify-content:space-between;align-items:center;gap:8px;background:var(--surf)}
.copyline{font-size:9px;color:var(--muted);font-family:'JetBrains Mono',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legalbtn{background:none;border:1px solid var(--bord);border-radius:4px;color:var(--sub);
  font-size:9px;padding:3px 9px;cursor:pointer;font-family:'Space Grotesk',sans-serif;
  font-weight:600;flex-shrink:0;transition:all .15s}
.legalbtn:hover{border-color:var(--acc);color:var(--acc)}
#legalOverlay{position:fixed;inset:0;background:rgba(6,7,10,.84);z-index:50;display:none;
  align-items:center;justify-content:center;padding:24px}
#legalOverlay.on{display:flex}
#legalBox{background:var(--panel);border:1px solid var(--bord);border-radius:10px;
  max-width:660px;width:100%;max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
#legalHead{flex-shrink:0;padding:13px 18px;border-bottom:1px solid var(--bord);
  display:flex;justify-content:space-between;align-items:center}
#legalHead .lt{font-size:13px;font-weight:700;color:var(--txt)}
#legalBody{overflow-y:auto;padding:14px 18px 18px;font-size:11px;line-height:1.62;color:var(--sub)}
#legalBody h4{font-size:10px;color:var(--acc);text-transform:uppercase;letter-spacing:.9px;margin:15px 0 5px}
#legalBody h4:first-child{margin-top:0}
#legalBody p{margin-bottom:7px}
#legalBody ul{margin:0 0 7px 15px}
#legalBody li{margin-bottom:3px}
#legalBody b{color:var(--txt);font-weight:600}
.lclose{background:none;border:1px solid var(--bord);border-radius:5px;color:var(--sub);
  font-size:11px;padding:4px 11px;cursor:pointer;font-weight:600;font-family:'Space Grotesk',sans-serif}
.lclose:hover{border-color:var(--acc);color:var(--acc)}
#printMark{display:none}
@media print{
  #printMark{display:block;position:fixed;bottom:0;left:0;right:0;text-align:center;
    font-size:9px;color:#444;padding:4px 0}
}

/* ── PROJECTS ── */
#projOverlay{position:fixed;inset:0;background:rgba(6,7,10,.84);z-index:60;display:none;
  align-items:center;justify-content:center;padding:24px}
#projOverlay.on{display:flex}
#projBox{background:var(--panel);border:1px solid var(--bord);border-radius:10px;
  max-width:560px;width:100%;max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
#projHead{flex-shrink:0;padding:13px 18px;border-bottom:1px solid var(--bord);
  display:flex;justify-content:space-between;align-items:center}
#projHead .lt{font-size:13px;font-weight:700;color:var(--txt)}
#projBody{overflow-y:auto;padding:14px 18px 18px}
.pin{width:100%;background:var(--bg);border:1px solid var(--bord);border-radius:5px;color:var(--txt);
  font-family:'JetBrains Mono',monospace;font-size:12px;padding:7px 9px;outline:none}
.pbtn{background:var(--acc);border:none;border-radius:5px;color:#000;font-size:11px;
  font-weight:700;padding:7px 13px;cursor:pointer;font-family:'Space Grotesk',sans-serif;white-space:nowrap}
.pbtn.alt{background:var(--bg);border:1px solid var(--bord);color:var(--sub);font-weight:600}
.pbtn.alt:hover{border-color:var(--acc);color:var(--acc)}
.prow{display:flex;justify-content:space-between;align-items:center;gap:9px;
  background:var(--bg);border:1px solid var(--bord);border-radius:6px;padding:8px 10px;margin-bottom:6px}
.pname{font-size:12px;font-weight:600;color:var(--txt)}
.pmeta{font-size:9px;color:var(--muted);margin-top:2px;font-family:'JetBrains Mono',monospace}
.pmini{background:none;border:1px solid var(--bord);border-radius:4px;color:var(--sub);
  font-size:10px;padding:4px 9px;cursor:pointer;font-weight:600;white-space:nowrap}
.pmini:hover{border-color:var(--acc);color:var(--acc)}
.pmini.del:hover{border-color:var(--bad);color:var(--bad)}
.psec{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
  padding-bottom:5px;border-bottom:1px solid var(--bord);margin:16px 0 9px}
.psec:first-child{margin-top:0}

/* ── ACCOUNT ── (shares the Projects sheet styling) */
#acctOverlay{position:fixed;inset:0;background:rgba(6,7,10,.84);z-index:70;display:none;
  align-items:center;justify-content:center;padding:24px}
#acctOverlay.on{display:flex}
#acctBox{background:var(--panel);border:1px solid var(--bord);border-radius:10px;
  max-width:520px;width:100%;max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
#acctHead{flex-shrink:0;padding:13px 18px;border-bottom:1px solid var(--bord);
  display:flex;justify-content:space-between;align-items:center}
#acctHead .lt{font-size:13px;font-weight:700;color:var(--txt)}
#acctBody{overflow-y:auto;padding:14px 18px 18px}
#acctBody code{font-family:'JetBrains Mono',monospace;font-size:9px;background:var(--bg);
  border:1px solid var(--bord);border-radius:3px;padding:1px 4px;color:var(--sub)}
.good{color:var(--good)}.warn{color:var(--warn)}.bad{color:var(--bad)}

/* Port card */
.pc{background:var(--bg);border:1px solid var(--bord);border-radius:7px;padding:9px;display:flex;flex-direction:column;gap:7px}
.pch{display:flex;align-items:center;justify-content:space-between}
.pct{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600}
.pdot{width:8px;height:8px;border-radius:50%}
.pdot.d1{background:var(--c1);box-shadow:0 0 5px var(--c1)}
.pdot.d2{background:var(--c2);box-shadow:0 0 5px var(--c2)}
.etog{font-size:10px;padding:3px 7px;border-radius:4px;cursor:pointer;border:1px solid var(--bord);background:var(--surf);color:var(--muted);font-family:'JetBrains Mono',monospace;transition:all .15s}
.etog.on{border-color:var(--good);color:var(--good)}
.pbody{display:flex;flex-direction:column;gap:7px}
.pbody.off{opacity:.3;pointer-events:none}

/* Tuning bar */
.tbw{background:var(--bg);border:1px solid var(--bord);border-radius:6px;padding:8px 10px}
.tbh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tbar{height:5px;background:var(--bord);border-radius:3px;position:relative}
.tbfill{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,var(--bad) 0%,var(--warn) 22%,var(--good) 40%,var(--good) 60%,var(--warn) 80%,var(--bad) 100%)}
.tbn{position:absolute;top:-6px;width:3px;height:17px;background:#fff;border-radius:2px;transform:translateX(-50%);transition:left .2s;box-shadow:0 0 5px rgba(255,255,255,.5)}
.tblabels{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:4px}

/* Freq canvas */
.fw{background:var(--bg);border:1px solid var(--bord);border-radius:6px;overflow:hidden}

/* Cut sheet */
.cut-piece{background:var(--bg);border:1px solid var(--bord);border-radius:6px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center}
.cut-name{font-size:11px;font-weight:600;color:var(--txt)}
.cut-sub{font-size:9px;color:var(--muted);margin-top:1px}
.cut-right{text-align:right}
.cut-dim{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--acc)}
.cut-qty{font-size:9px;color:var(--sub);margin-top:1px}

/* ══════════════════════════════════════════════════════════════════════════════
   TOUCH SIZING — phone layout gets larger hit targets, stepper buttons beside
   every slider, and modals presented as bottom sheets.
   ══════════════════════════════════════════════════════════════════════════════ */
.slwrap{display:flex;align-items:center;gap:11px}
.stepb{display:none;flex-shrink:0;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--bord);background:var(--bg);color:var(--sub);font-size:19px;line-height:1;
  align-items:center;justify-content:center;transition:all .1s;-webkit-tap-highlight-color:transparent}
.stepb:active{border-color:var(--acc);color:var(--acc);transform:scale(.92)}

@media (max-width:899px){
  /* header stats must stay on one line or they steal height from the 3D view */
  .sstat{min-width:0;padding:4px 6px}
  .ssl{white-space:nowrap;font-size:8px}
  .ssv{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stepb{display:flex}
  .sln{font-size:13px}
  .slv{font-size:13px;border-radius:7px;padding:4px 9px;min-width:66px}
  input[type=range]{height:6px}
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px;border:3px solid var(--bg);
    box-shadow:0 0 0 1.5px var(--acc),0 2px 6px rgba(0,0,0,.5)}
  .r1::-webkit-slider-thumb{box-shadow:0 0 0 1.5px var(--c1),0 2px 6px rgba(0,0,0,.5)}
  .r2::-webkit-slider-thumb{box-shadow:0 0 0 1.5px var(--c2),0 2px 6px rgba(0,0,0,.5)}
  .trow{gap:4px;border-radius:10px;padding:4px}
  .tbtn{font-size:12px;min-height:42px;border-radius:7px}
  .mc{border-radius:9px;padding:9px 11px}
  .mv{font-size:16px}
  .etog{font-size:12px;padding:8px 14px;border-radius:7px}
  .legalbtn{font-size:10px;padding:5px 12px}
  .sec{font-size:10px}
  /* Modals become bottom sheets */
  #legalOverlay,#projOverlay,#acctOverlay{align-items:flex-end;padding:0}
  #legalBox,#projBox,#acctBox{border-radius:14px 14px 0 0;max-width:none;max-height:92vh}
  #legalBody{font-size:12px;padding:14px 16px 28px}
  #projBody,#acctBody{padding:14px 16px 28px}
  .pin{font-size:14px;padding:10px 11px}
  .pbtn{font-size:13px;padding:10px 16px}
  .pmini{font-size:11px;padding:8px 11px}
  .pname{font-size:13px}
  .lclose{font-size:12px;padding:6px 14px}
}