@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

  :root{
    --near-black:#05070A;
    --navy:#0B1C2C;
    --graphite:#2A2F36;
    --cyan:#00C2FF;
    --soft-white:#E6EDF3;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html,body{
    height:100%;
    width:100%;
    position:fixed;
    background:var(--near-black);
    color:var(--soft-white);
    font-family:'Space Grotesk', sans-serif;
    overflow:hidden;
    overscroll-behavior:none;
  }

  .mono{ font-family:'JetBrains Mono', monospace; }

  #app{ position:relative; width:100%; height:calc(var(--vh, 1vh) * 100); overflow:hidden; }

  #viewport{ position:absolute; inset:0; touch-action:none; }
  #viewport canvas{ display:block; width:100%; height:100%; touch-action:none; }

  /* ---------- Top bar ---------- */
  #topbar{
    position:absolute; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px;
    z-index:10;
    pointer-events:none;
  }
  #brand{
    display:flex; align-items:baseline; gap:10px;
    pointer-events:auto;
  }
  #brand .system{
    font-size:15px; font-weight:700; letter-spacing:0.08em;
  }
  #brand .system span{ color:var(--cyan); }
  #brand .module{
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:0.12em;
    color:rgba(230,237,243,0.45);
    text-transform:uppercase;
  }
  #topbar-right{
    display:flex; align-items:center; gap:16px;
    pointer-events:auto;
  }
  #bridge-link,#hub-link{
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:0.08em;
    color:rgba(230,237,243,0.55);
    text-transform:uppercase;
    text-decoration:none;
    border:1px solid rgba(0,194,255,0.2);
    border-radius:2px;
    padding:4px 10px;
    transition:all 0.12s;
  }
  #bridge-link:hover,#hub-link:hover{ color:var(--cyan); border-color:var(--cyan); }
  #status{
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:0.08em;
    color:rgba(230,237,243,0.4);
    text-transform:uppercase;
    pointer-events:auto;
  }
  #status .dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--cyan); margin-right:7px;
    box-shadow:0 0 8px var(--cyan);
  }

  /* ---------- Corner brackets (signature element) ---------- */
  .bracket{
    position:absolute; width:26px; height:26px;
    border-color:rgba(0,194,255,0.55);
    z-index:9; pointer-events:none;
    transition:opacity .4s ease;
  }
  .bracket.tl{ top:64px; left:24px; border-top:2px solid; border-left:2px solid; }
  .bracket.tr{ top:64px; right:24px; border-top:2px solid; border-right:2px solid; }
  .bracket.bl{ bottom:24px; left:24px; border-bottom:2px solid; border-left:2px solid; }
  .bracket.br{ bottom:24px; right:24px; border-bottom:2px solid; border-right:2px solid; }

  /* ---------- Drop zone (empty state) ---------- */
  #dropzone{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    z-index:15;
    transition:opacity .35s ease, visibility .35s ease;
  }
  #dropzone.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

  #dropzone-inner{
    width:min(480px, 86vw);
    padding:48px 36px;
    text-align:center;
    border:1px dashed rgba(0,194,255,0.35);
    border-radius:2px;
    background:rgba(11,28,44,0.4);
    backdrop-filter:blur(6px);
    transition:border-color .2s ease, background .2s ease;
  }
  #dropzone-inner.dragover{
    border-color:var(--cyan);
    background:rgba(0,194,255,0.06);
  }
  #dropzone-inner .glyph{
    width:44px; height:44px; margin:0 auto 20px;
    border:1.5px solid var(--cyan);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  #dropzone-inner .glyph svg{ width:18px; height:18px; }
  #dropzone-inner h1{
    font-size:19px; font-weight:600; margin-bottom:8px; letter-spacing:0.01em;
  }
  #dropzone-inner p{
    font-size:13px; color:rgba(230,237,243,0.55); line-height:1.6; margin-bottom:22px;
  }
  #dropzone-inner .filetypes{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px; letter-spacing:0.1em;
    color:rgba(230,237,243,0.35);
    text-transform:uppercase;
    margin-bottom:24px;
  }
  #browse-btn{
    font-family:'Space Grotesk', sans-serif;
    font-size:13px; font-weight:600;
    padding:11px 26px;
    background:var(--cyan);
    color:var(--near-black);
    border:none; border-radius:2px;
    cursor:pointer;
    letter-spacing:0.02em;
    transition:opacity .15s ease;
  }
  #browse-btn:hover{ opacity:0.85; }
  #file-input{ display:none; }

  /* ---------- Object panel (multi-file) ---------- */
  #object-panel{
    position:absolute; top:64px; left:24px; z-index:11;
    width:210px; max-height:38vh; overflow-y:auto;
    display:flex; flex-direction:column; gap:5px;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  #object-panel.visible{ opacity:1; visibility:visible; }
  #object-panel::-webkit-scrollbar{ width:4px; }
  #object-panel::-webkit-scrollbar-thumb{ background:rgba(0,194,255,0.3); }

  .obj-row{
    display:flex; align-items:center; gap:9px;
    background:rgba(11,28,44,0.72);
    backdrop-filter:blur(6px);
    border:1px solid rgba(230,237,243,0.12);
    border-radius:2px;
    padding:8px 10px;
    font-family:'JetBrains Mono', monospace; font-size:10.5px;
    cursor:pointer;
    transition:border-color .15s ease;
  }
  .obj-row:hover{ border-color:rgba(0,194,255,0.4); }
  .obj-row.active{ border-color:var(--cyan); background:rgba(0,194,255,0.08); }
  .obj-row .vis-toggle{ color:var(--cyan); font-size:12px; width:12px; text-align:center; flex:0 0 auto; }
  .obj-row.hidden-obj .vis-toggle{ color:rgba(230,237,243,0.3); }
  .obj-row.hidden-obj .name{ color:rgba(230,237,243,0.3); }
  .obj-row .name{
    flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    color:rgba(230,237,243,0.75); letter-spacing:0.02em;
  }
  .obj-row.active .name{ color:var(--cyan); }
  .obj-row .obj-remove{
    background:none; border:none; color:rgba(230,237,243,0.4);
    cursor:pointer; font-size:12px; padding:0 2px; flex:0 0 auto;
    font-family:'JetBrains Mono', monospace;
  }
  .obj-row .obj-remove:hover{ color:#ff9a9a; }

  /* ---------- Measurement readout ---------- */
  #measure-readout{
    position:absolute; top:64px; left:50%; transform:translateX(-50%);
    z-index:16;
    background:rgba(11,28,44,0.88);
    border:1px solid rgba(0,194,255,0.45);
    border-radius:2px;
    padding:9px 10px 9px 16px;
    display:flex; align-items:center; gap:12px;
    font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.04em;
    color:var(--cyan);
    opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
    white-space:nowrap;
  }
  #measure-readout.visible{ opacity:1; visibility:visible; }
  #measure-readout .lbl{ color:rgba(230,237,243,0.45); text-transform:uppercase; font-size:10px; }
  #measure-clear{
    background:none; border:none; color:rgba(230,237,243,0.5);
    cursor:pointer; font-size:13px; padding:0 2px;
  }
  #measure-clear:hover{ color:#ff9a9a; }

  /* ---------- Clip panel ---------- */
  #clip-panel{
    position:absolute; right:24px; bottom:104px; z-index:17;
    width:170px;
    background:rgba(11,28,44,0.88);
    border:1px solid rgba(0,194,255,0.3);
    border-radius:2px;
    padding:12px 14px;
    opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
  }
  #clip-panel.visible{ opacity:1; visibility:visible; }
  #clip-panel .clip-row{ display:flex; gap:6px; margin-bottom:10px; }
  #clip-panel .clip-axis{
    flex:1; padding:6px 0; text-align:center;
    background:rgba(230,237,243,0.06);
    border:1px solid rgba(230,237,243,0.15);
    color:rgba(230,237,243,0.6);
    border-radius:2px; cursor:pointer;
    font-family:'JetBrains Mono', monospace; font-size:11px;
  }
  #clip-panel .clip-axis.active{ border-color:var(--cyan); color:var(--cyan); background:rgba(0,194,255,0.1); }
  #clip-panel input[type=range]{ width:100%; accent-color:var(--cyan); }
  #clip-panel .clip-cap-toggle{
    display:flex; align-items:center; gap:6px; margin-top:10px;
    font-size:10.5px; color:rgba(230,237,243,0.6); cursor:pointer;
  }
  #clip-panel .clip-cap-toggle input{ accent-color:var(--cyan); }

  /* ---------- Explode / Print panels (share clip-panel look) ---------- */
  #explode-panel, #print-panel{
    position:absolute; right:24px; z-index:17;
    width:170px;
    background:rgba(11,28,44,0.88);
    border:1px solid rgba(0,194,255,0.3);
    border-radius:2px;
    padding:12px 14px;
    opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
    font-family:'JetBrains Mono', monospace;
  }
  #explode-panel{ bottom:104px; }
  #print-panel{ bottom:104px; }
  #explode-panel.visible, #print-panel.visible{ opacity:1; visibility:visible; }
  .panel-label{
    font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(230,237,243,0.45); margin-bottom:10px;
  }
  #explode-panel input[type=range]{ width:100%; accent-color:var(--cyan); }
  #print-panel select{
    width:100%; background:rgba(230,237,243,0.06); color:var(--soft-white);
    border:1px solid rgba(230,237,243,0.2); border-radius:2px;
    padding:6px 8px; font-family:'JetBrains Mono', monospace; font-size:11px;
    margin-bottom:10px;
  }
  #print-result{ font-size:11px; color:var(--cyan); line-height:1.6; }

  /* ---------- Result toast (analysis outputs) ---------- */
  #result-toast{
    position:absolute; bottom:96px; left:50%; transform:translateX(-50%) translateY(6px);
    z-index:22;
    background:rgba(11,28,44,0.92);
    border:1px solid rgba(0,194,255,0.4);
    border-radius:2px;
    padding:10px 18px;
    font-size:11.5px; letter-spacing:0.02em;
    color:var(--cyan);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    text-align:center; max-width:70vw;
  }
  #result-toast.visible{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

  /* ---------- Recent files list (dropzone empty state) ---------- */
  #recent-list{ margin-top:22px; text-align:left; }
  .recent-title{
    font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(230,237,243,0.32); margin-bottom:8px;
  }
  .recent-row{
    font-size:11px; color:rgba(230,237,243,0.55);
    display:flex; justify-content:space-between; gap:10px;
    padding:5px 0; border-top:1px solid rgba(230,237,243,0.08);
    overflow:hidden;
  }
  .recent-row span{ color:rgba(230,237,243,0.32); white-space:nowrap; }
  #recent-clear-btn{
    margin-top:10px;
    background:none; border:none;
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(230,237,243,0.35);
    cursor:pointer; padding:0;
  }
  #recent-clear-btn:hover{ color:#ff9a9a; }

  /* ---------- HUD panel ---------- */
  /* ---------- Bottom bar (wraps HUD + controls, prevents overlap) ---------- */
  #bottom-bar{
    position:absolute; left:0; right:0; bottom:0;
    z-index:20;
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
    padding:20px 24px calc(20px + env(safe-area-inset-bottom, 0px));
    pointer-events:none;
  }

  #hud{
    background:rgba(11,28,44,0.7);
    backdrop-filter:blur(8px);
    border:1px solid rgba(0,194,255,0.18);
    border-radius:2px;
    padding:16px 20px;
    width:230px;
    flex:0 0 auto;
    opacity:0; transform:translateY(8px);
    transition:opacity .35s ease, transform .35s ease;
    pointer-events:none;
  }
  #hud.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }

  #hud .filename{
    font-size:13px; font-weight:600;
    margin-bottom:12px;
    word-break:break-all;
    padding-bottom:12px;
    border-bottom:1px solid rgba(230,237,243,0.1);
  }
  #hud .row{
    display:flex; justify-content:space-between; gap:20px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    margin-bottom:6px;
  }
  #hud .row:last-child{ margin-bottom:0; }
  #hud .row .label{ color:rgba(230,237,243,0.4); letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; }
  #hud .row .value{ color:var(--cyan); text-align:right; overflow:hidden; text-overflow:ellipsis; }

  /* ---------- Controls ---------- */
  #controls{
    display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end;
    gap:8px;
    max-width:100%;
    opacity:0; transform:translateY(8px);
    transition:opacity .35s ease, transform .35s ease;
    pointer-events:none;
  }
  #controls.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }

  .ctrl-btn{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    padding:9px 14px;
    background:rgba(11,28,44,0.7);
    backdrop-filter:blur(8px);
    color:var(--soft-white);
    border:1px solid rgba(230,237,243,0.15);
    border-radius:2px;
    cursor:pointer;
    white-space:nowrap;
    transition:border-color .15s ease, color .15s ease;
  }
  .ctrl-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
  .ctrl-btn.active{ border-color:var(--cyan); color:var(--cyan); background:rgba(0,194,255,0.08); }

  /* ---------- Control groups (dropdowns) ---------- */
  .ctrl-group{ position:relative; }
  .ctrl-group-toggle{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    padding:9px 14px;
    background:rgba(11,28,44,0.7);
    backdrop-filter:blur(8px);
    color:var(--soft-white);
    border:1px solid rgba(230,237,243,0.15);
    border-radius:2px;
    cursor:pointer;
    white-space:nowrap;
    display:flex; align-items:center; gap:6px;
    transition:border-color .15s ease, color .15s ease;
  }
  .ctrl-group-toggle:hover{ border-color:var(--cyan); color:var(--cyan); }
  .ctrl-group-toggle .caret{ font-size:8px; opacity:0.6; transition:transform .15s ease; }
  .ctrl-group-toggle .dot{
    width:5px; height:5px; border-radius:50%; background:var(--cyan);
    box-shadow:0 0 6px var(--cyan);
    opacity:0; transition:opacity .15s ease;
  }
  .ctrl-group-toggle.has-active .dot{ opacity:1; }
  .ctrl-group.open .ctrl-group-toggle{ border-color:var(--cyan); color:var(--cyan); }
  .ctrl-group.open .ctrl-group-toggle .caret{ transform:rotate(180deg); }

  .ctrl-menu{
    position:absolute; bottom:calc(100% + 8px); right:0;
    display:flex; flex-direction:column; gap:6px;
    min-width:172px;
    background:rgba(11,28,44,0.92);
    backdrop-filter:blur(10px);
    border:1px solid rgba(230,237,243,0.15);
    border-radius:2px;
    padding:8px;
    z-index:20;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  }
  .ctrl-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .ctrl-menu .ctrl-btn{ width:100%; text-align:left; }

  /* ---------- Footer note ---------- */
  #footnote{
    position:absolute; top:64px; right:24px;
    z-index:10;
    font-family:'JetBrains Mono', monospace;
    font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
    color:rgba(230,237,243,0.32);
    text-align:right;
    max-width:200px;
    line-height:1.6;
  }

  #loading{
    position:absolute; inset:0; z-index:25;
    display:flex; align-items:center; justify-content:center;
    background:rgba(5,7,10,0.7);
    opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
  }
  #loading.visible{ opacity:1; visibility:visible; }
  #loading .mono{ font-size:11px; letter-spacing:0.1em; color:var(--cyan); text-transform:uppercase; }

  #error-toast{
    position:absolute; top:64px; left:50%; transform:translateX(-50%) translateY(-10px);
    z-index:30;
    background:rgba(11,28,44,0.9);
    border:1px solid #ff4d4d;
    border-radius:2px;
    padding:12px 20px;
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px;
    color:#ff9a9a;
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    max-width:80vw;
    text-align:center;
  }
  #error-toast.visible{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

  #hint-toast{
    position:absolute; bottom:96px; left:50%; transform:translateX(-50%) translateY(6px);
    z-index:22;
    background:rgba(11,28,44,0.9);
    border:1px solid rgba(0,194,255,0.35);
    border-radius:2px;
    padding:9px 18px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:0.03em;
    color:rgba(230,237,243,0.75);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    text-align:center; white-space:nowrap;
  }
  #hint-toast.visible{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* ── AUTH GATE ── */
#auth-gate{position:fixed;inset:0;z-index:99999;background:
  radial-gradient(1200px 700px at 15% -10%, rgba(0,194,255,0.08), transparent 60%),
  var(--near-black);display:flex;align-items:center;justify-content:center;}
.gate-card{width:min(360px,86vw);text-align:center;padding:32px 24px;border:1px solid rgba(0,194,255,0.2);
  border-radius:4px;background:rgba(11,28,44,0.5);}
.gate-mark{width:44px;height:44px;margin:0 auto 16px;border-radius:8px;
  background:linear-gradient(135deg,var(--cyan),rgba(0,194,255,0.15));
  display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;
  font-weight:700;font-size:16px;color:#05070A;}
.gate-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--soft-white);margin-bottom:8px;}
.gate-sub{font-size:12px;line-height:1.6;color:rgba(230,237,243,0.55);margin-bottom:20px;}
.gate-btn{display:inline-block;padding:10px 22px;border-radius:2px;
  background:linear-gradient(135deg,rgba(0,194,255,0.18),rgba(0,194,255,0.05));
  border:1px solid var(--cyan);color:var(--cyan);font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:1.5px;text-decoration:none;}
.gate-spinner{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,194,255,0.2);
  border-top-color:var(--cyan);margin:0 auto;animation:gatespin .8s linear infinite;}
@keyframes gatespin{to{transform:rotate(360deg);}}
#app-root{display:none;}
.brand-logo{height:24px;width:auto;max-width:180px;object-fit:contain;}