:root{
  --bg:#0B0E13; --panel:#10141C; --panel2:#171D28; --line:#222A36; --line2:#2E3744;
  --txt:#E8ECF1; --dim:#7C8696; --faint:#525C6B;
  --acc:#FFB000;
  --accText:color-mix(in oklab, var(--acc), white 30%);
  --accDark:color-mix(in oklab, var(--acc), black 78%);
  --go:#69DB7C; --warn:#FFC078; --bad:#FF6B6B;
  --display:"Barlow Condensed",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font-family:var(--mono);font-size:12px;
  -webkit-font-smoothing:antialiased;overflow:hidden}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

#app{display:flex;flex-direction:column;height:100vh;width:100vw}

/* ============ TOP BAR ============ */
#topbar{display:flex;align-items:center;gap:18px;height:54px;padding:0 18px;
  background:var(--panel);border-bottom:1px solid var(--line);flex:none;position:relative}
#topbar::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;z-index:5;
  background:repeating-linear-gradient(-45deg,var(--acc) 0 8px,transparent 8px 16px);opacity:.85}
/* while generating/exporting, the full-width top-bar stripe marches */
body.busy #topbar::after{opacity:1;animation:topbarMarch .55s linear infinite}
@keyframes topbarMarch{to{background-position:22.627px 0}}
@media (prefers-reduced-motion:reduce){body.busy #topbar::after{animation:none}}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{display:block}
.brand .wordmark{font-family:var(--display);font-weight:700;font-size:21px;
  letter-spacing:2.5px;text-transform:uppercase;line-height:1}
.brand .wordmark em{font-style:normal;color:var(--accText)}
.brand .tagline{font-size:9.5px;color:var(--faint);letter-spacing:2px;text-transform:uppercase;margin-top:3px}
#topbar .spacer{flex:1}
.chip{display:flex;align-items:center;gap:7px;border:1px solid var(--line2);
  border-radius:3px;padding:5px 11px;font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;font-weight:600;color:var(--dim)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--dim)}
.chip.go{color:var(--go);border-color:color-mix(in oklab,var(--go),transparent 60%)}
.chip.go .dot{background:var(--go);box-shadow:0 0 8px var(--go)}
.chip.warn{color:var(--warn);border-color:color-mix(in oklab,var(--warn),transparent 60%)}
.chip.warn .dot{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.chip.bad{color:var(--bad);border-color:color-mix(in oklab,var(--bad),transparent 60%)}
.chip.bad .dot{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.readout{font-size:10.5px;color:var(--faint);letter-spacing:1.5px;text-transform:uppercase}
.readout b{color:var(--txt);font-weight:600;font-size:12px;letter-spacing:0}

/* gear + display-settings popover */
.iconbtn{appearance:none;width:34px;height:30px;border:1px solid var(--line2);border-radius:3px;
  background:var(--panel2);color:var(--dim);cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s}
.iconbtn:hover{color:var(--accText);border-color:var(--acc)}
.iconbtn.authon{color:var(--accDark);background:var(--acc);border-color:var(--acc);font-weight:700}
.iconbtn.authoff{opacity:.55}
#tweakPop{position:absolute;top:52px;right:14px;z-index:40;width:230px;background:var(--panel);
  border:1px solid var(--line2);border-top:2px solid var(--acc);border-radius:4px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);padding:13px 14px}
#tweakPop[hidden]{display:none}
#tweakPop .ts{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--faint);margin:2px 0 8px}
#tweakPop .ts+.ts{margin-top:14px}
.swatches{display:flex;gap:7px}
.swatch{flex:1;height:30px;border-radius:3px;border:1px solid var(--line2);cursor:pointer;
  position:relative;transition:transform .1s}
.swatch:hover{transform:translateY(-1px)}
.swatch[data-on="1"]{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px #fff}
.twrow{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--dim);
  letter-spacing:.5px;margin:9px 0 0}
.tgl{position:relative;width:34px;height:19px;border:0;border-radius:999px;background:var(--line2);
  cursor:pointer;padding:0;transition:background .15s;flex:none}
.tgl[data-on="1"]{background:var(--acc)}
.tgl i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;
  transition:transform .15s}
.tgl[data-on="1"] i{transform:translateX(15px)}

#main{display:flex;flex:1;min-height:0}

/* ============ CONTROL PANEL ============ */
#panel{width:330px;min-width:330px;height:100%;background:var(--panel);
  border-right:1px solid var(--line);overflow-y:auto;padding:18px 18px 56px}
.group{margin-bottom:20px}

/* ---- mode selector + parameter tabs ---- */
#modeBar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#modeBar .mbLab{font-size:9.5px;color:var(--faint);letter-spacing:1.5px;text-transform:uppercase}
#modeSel{display:flex;flex:1;border:1px solid var(--line2);border-radius:3px;overflow:hidden}
#modeSel button{flex:1;appearance:none;border:0;background:var(--panel2);color:var(--dim);cursor:pointer;
  font-family:var(--mono);font-size:10.5px;padding:6px 4px;letter-spacing:.5px}
#modeSel button+button{border-left:1px solid var(--line2)}
#modeSel button.on{background:var(--acc);color:var(--accDark);font-weight:600}
#modeSel button:disabled{cursor:not-allowed;opacity:.85}
#modeBar.mbForced::after{content:"🔒";font-size:10px}
#paramTabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px}
#paramTabs button{appearance:none;border:1px solid var(--line2);border-radius:3px;background:var(--panel2);
  color:var(--dim);cursor:pointer;font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;padding:5px 9px}
#paramTabs button:hover{color:var(--accText);border-color:var(--acc)}
#paramTabs button.on{background:var(--acc);color:var(--accDark);border-color:var(--acc)}
#paramPanes .group{display:none}
#paramPanes .group.active{display:block}
.ctl[data-tier="expert"]{display:none}
#panel.mode-expert .ctl[data-tier="expert"]{display:block}
.gh{display:flex;align-items:baseline;gap:9px;font-family:var(--display);
  font-size:14px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--txt);margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.gh .idx{font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--accText);
  letter-spacing:0}
.ctl{margin-bottom:13px}
.ctl .lab{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;margin-bottom:6px;color:var(--dim)}
.ctl .lab .v{color:var(--accText);font-variant-numeric:tabular-nums;font-weight:600;font-size:12px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:0;
  background:var(--line);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:7px;height:18px;
  border-radius:1px;background:var(--acc);cursor:ew-resize;border:none;
  box-shadow:0 0 0 1px var(--accDark)}
input[type=range]::-moz-range-thumb{width:7px;height:18px;border-radius:1px;
  background:var(--acc);cursor:ew-resize;border:none}
input[type=range]:disabled{opacity:.45;cursor:not-allowed}
input[type=range]:disabled::-webkit-slider-thumb{background:var(--faint);cursor:not-allowed}
.ctl.locked .lab span:first-child::after{content:' 🔒';font-size:10px}
.ctl.locked .lab .v{color:var(--dim);cursor:default}
.ctl.limited .lab span:first-child::after{content:' ⟨' attr(data-lim) '⟩';
  font-size:9.5px;color:var(--warn);letter-spacing:0}
.fieldlab{font-size:10px;color:var(--faint);display:block;margin:10px 0 6px;
  letter-spacing:1.5px;text-transform:uppercase}
select{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line2);
  border-radius:3px;padding:8px 9px;font-size:11.5px;font-family:var(--mono);cursor:pointer}
select:focus{outline:1px solid var(--acc)}
#matColors{flex-wrap:wrap;margin-bottom:4px}
#matColors .swatch{flex:0 0 28px;height:22px}
.toggles{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 16px;font-size:11px;color:var(--dim)}
.toggles label{display:flex;align-items:center;gap:6px;cursor:pointer;letter-spacing:.5px}
.toggles input{accent-color:var(--acc);width:13px;height:13px}
.btns{display:flex;gap:8px;margin-top:6px}
.btns button{flex:1;padding:11px 8px;border-radius:3px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--txt);cursor:pointer;
  font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;transition:filter .12s,border-color .12s}
.btns button:hover{filter:brightness(1.18)}
.btns button:disabled{opacity:.35;cursor:default;filter:none}
.btns button.go{background:var(--acc);color:var(--accDark);border-color:var(--acc);font-weight:700}
.btns button.go:hover{filter:brightness(1.1)}
.btns button.primary{background:transparent;color:var(--accText);border-color:var(--acc)}
.btns button.primary:disabled{border-color:var(--line2);color:var(--dim)}

/* editable value labels */
.ctl .lab .v{cursor:text}
.vedit{width:78px;background:var(--panel2);border:1px solid var(--acc);color:var(--accText);
  font-family:var(--mono);font-size:12px;font-weight:600;text-align:right;
  padding:0 4px;border-radius:2px;outline:none}

/* uploaded hardware (fixed STL parts) */
.fp{border:1px solid var(--line);border-radius:3px;padding:8px 9px;margin-bottom:8px;background:var(--panel2)}
.fp .fphead{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:7px}
.fp .fpname{font-size:11px;color:var(--txt);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp .fpdel{background:none;border:0;color:var(--bad);cursor:pointer;font-size:13px;padding:0 2px;flex:none}
.fp .fpgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.fp .fpgrid label{display:flex;flex-direction:column;gap:2px;font-size:9px;color:var(--faint);
  text-transform:uppercase;letter-spacing:1px}
.fp input[type=number]{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--txt);
  font-family:var(--mono);font-size:11px;padding:3px 4px;border-radius:2px}
.fp .fpmir{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--dim);margin-top:7px;cursor:pointer}
.fp .fpmir input{accent-color:var(--acc)}
.fp .fpname{cursor:pointer}
.fp .fpname:hover{color:var(--accText)}
.fp.fplocked{border-color:var(--line2);opacity:.85}
.fp.fplocked .fpname{cursor:default}
.fp.fplocked .fpname:hover{color:var(--txt)}
.fp .fpcls{flex:none;font-size:9px;color:var(--accText);border:1px solid var(--acc);
  border-radius:2px;padding:1px 6px;letter-spacing:1px;text-transform:uppercase}
.fp input:disabled{opacity:.5}

/* class hardware list in the teacher panel */
.amHw{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.amHwRow{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt);
  border-bottom:1px solid var(--line);padding:4px 0}
.amHwRow span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amHwRow i{color:var(--dim);font-style:normal;font-size:10px}
.amHwRow button{background:none;border:0;color:var(--bad);cursor:pointer;font-size:12px;padding:0 2px}

/* gizmo mode bar (shown while a mount is selected) */
#gizmoBar{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;gap:6px;align-items:center;padding:6px 8px;border-radius:3px;
  background:rgba(11,14,19,.72);backdrop-filter:blur(3px);
  border:1px solid var(--line2);border-top:2px solid var(--acc)}
#gizmoBar[hidden]{display:none}
#gizmoBar .gname{font-size:10px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gizmoBar button{appearance:none;border:1px solid var(--line2);border-radius:2px;background:var(--panel2);
  color:var(--txt);cursor:pointer;font-family:var(--mono);font-size:10.5px;padding:4px 9px;
  letter-spacing:1px;text-transform:uppercase}
#gizmoBar button:hover{border-color:var(--acc)}
#gizmoBar button.on{background:var(--acc);color:var(--accDark);border-color:var(--acc);font-weight:600}

/* ============ VIEWPORT ============ */
#view{flex:1;position:relative;min-width:0}
#c{display:block;width:100%;height:100%}
#vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 55%,rgba(4,6,10,.5) 100%)}
#hud{position:absolute;top:14px;left:14px;font-size:10px;color:var(--dim);
  letter-spacing:1px;text-transform:uppercase;line-height:1.7;
  padding:8px 11px;pointer-events:none;
  background:rgba(11,14,19,.55);backdrop-filter:blur(3px);
  border:1px solid var(--line);border-left:2px solid var(--acc)}
#hud b{color:var(--txt);font-weight:600}
#placard{position:absolute;right:14px;bottom:12px;font-size:9px;color:var(--faint);
  letter-spacing:1.5px;text-transform:uppercase;pointer-events:none;text-align:right}
#busy{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  overflow:hidden;background:rgba(11,14,19,.6);backdrop-filter:blur(2px)}
.busyInner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
#busyTitle{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:3px;
  text-transform:uppercase;color:var(--accText)}
.busySub{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--dim);min-height:13px}
/* marching machining stripes (the hazard motif from the top bar, animated) */
.busyBar{position:absolute;left:0;right:0;top:0;height:6px;opacity:.9;
  background:repeating-linear-gradient(-45deg,var(--acc) 0 9px,transparent 9px 18px);
  background-size:25.46px 100%;animation:busyMarch .6s linear infinite}
.busyBarB{top:auto;bottom:0;animation-direction:reverse}
@keyframes busyMarch{to{background-position:25.46px 0}}
@media (prefers-reduced-motion:reduce){.busyBar{animation:none}}

/* ============ STATS PANEL ============ */
#stats{width:304px;min-width:304px;height:100%;background:var(--panel);
  border-left:1px solid var(--line);overflow-y:auto;padding:18px}
#stats .gh{margin-top:4px}
.stat{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;margin-bottom:8px;gap:8px}
.stat .k{color:var(--dim);flex:none}
.stat .lead{flex:1;border-bottom:1px dotted var(--line2);transform:translateY(-3px)}
.stat .v{font-variant-numeric:tabular-nums;font-weight:600;flex:none}
.verdict{border-radius:3px;padding:12px 13px;margin:2px 0 20px;font-size:11.5px;line-height:1.6;color:var(--dim)}
.verdict b{display:block;margin-bottom:4px;font-family:var(--display);font-size:15px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase}
.verdict.good{background:color-mix(in oklab,var(--go),transparent 92%);border:1px solid color-mix(in oklab,var(--go),transparent 65%)}
.verdict.good b{color:var(--go)}
.verdict.warn{background:color-mix(in oklab,var(--warn),transparent 92%);border:1px solid color-mix(in oklab,var(--warn),transparent 65%)}
.verdict.warn b{color:var(--warn)}
.verdict.bad{background:color-mix(in oklab,var(--bad),transparent 92%);border:1px solid color-mix(in oklab,var(--bad),transparent 65%)}
.verdict.bad b{color:var(--bad)}
.note{font-size:11px;color:var(--dim);line-height:1.75;margin-bottom:10px}
.note b{color:var(--txt);font-weight:600}
.partsList{font-size:11px;line-height:1.7}
.partsList .pr{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:4px 0;gap:6px}
.partsList .pr span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.partsList .pmat{width:72px;flex:none;background:var(--bg);border:1px solid var(--line2);color:var(--dim);
  font-family:var(--mono);font-size:9.5px;padding:2px 2px;border-radius:2px;cursor:pointer}
.partsList .pmat:hover{color:var(--txt);border-color:var(--acc)}
.partsList .pr span:last-child{color:var(--dim);font-variant-numeric:tabular-nums}
.partsList .pr.over,.partsList .pr.over span:last-child{color:var(--bad)}
.cgpill{display:inline-block;background:var(--panel2);border:1px solid var(--acc);
  border-radius:2px;padding:1px 7px;font-size:11px;color:var(--accText);font-weight:600}

/* ---- collapsible side panels (toggle buttons in the top bar) ----
   display:none so the viewport reclaims the full width; the 3D canvas
   re-fits itself on the next animation frame. */
body.panel-collapsed #panel{display:none}
body.stats-collapsed #stats{display:none}
/* a toggle button is highlighted while its panel is open */
.iconbtn.toggled{color:var(--accDark);background:var(--acc);border-color:var(--acc)}

/* ============ LOGIN GATE ============
   While not authenticated (and a server is reachable) the whole app is
   hidden and inert — nothing renders, no controls, no canvas. */
body.gated #main{visibility:hidden}
body.gated #topbar .readout,
body.gated #topbar .chip,
body.gated #topbar #tweakBtn{visibility:hidden}
body.gated #authModal{background:var(--bg)}

/* ============ ACCOUNT MODAL ============ */
#authModal{position:fixed;inset:0;z-index:60;background:rgba(4,6,10,.62);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center}
#authModal[hidden]{display:none}
.amBox{position:relative;width:380px;max-width:92vw;max-height:84vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line2);border-top:2px solid var(--acc);
  border-radius:4px;box-shadow:0 18px 60px rgba(0,0,0,.6);padding:18px 20px}
#amClose{position:absolute;top:10px;right:10px;background:none;border:0;color:var(--dim);
  font-size:14px;cursor:pointer}
#amClose:hover{color:var(--bad)}
.amBox h3{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;margin:0 0 12px}
.amRole{font-family:var(--mono);font-size:9.5px;color:var(--accText);border:1px solid var(--acc);
  border-radius:2px;padding:1px 6px;vertical-align:middle;letter-spacing:1px;margin-left:6px}
.amTabs{display:flex;gap:6px;margin-bottom:14px}
.amTabs button{flex:1;padding:8px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:3px;color:var(--dim);cursor:pointer;font-family:var(--display);
  font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.amTabs button.on{background:var(--acc);color:var(--accDark);border-color:var(--acc)}
.amForm label{display:block;font-size:10px;color:var(--faint);letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:10px}
.amForm input,.amForm select{display:block;width:100%;margin-top:4px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:3px;color:var(--txt);font-family:var(--mono);
  font-size:12px;padding:8px 9px}
.amForm input:focus{outline:1px solid var(--acc)}
.amGo{width:100%;padding:10px;margin-top:4px;background:var(--acc);color:var(--accDark);
  border:1px solid var(--acc);border-radius:3px;cursor:pointer;font-family:var(--display);
  font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.amGo:hover{filter:brightness(1.1)}
.amOut{width:100%;padding:9px;margin-top:14px;background:transparent;border:1px solid var(--line2);
  border-radius:3px;color:var(--dim);cursor:pointer;font-family:var(--display);
  font-size:12.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.amOut:hover{border-color:var(--bad);color:var(--bad)}
.amErr{color:var(--bad);font-size:11px;line-height:1.5;margin:6px 0}
.amNote{font-size:11px;color:var(--dim);line-height:1.75}
.amNote code{background:var(--panel2);padding:1px 5px;border-radius:2px;font-size:10.5px}
.amRow{display:flex;gap:8px;margin-bottom:12px}
.amRow input{flex:1;margin-top:0}
.amRow .amGo,.amRow button{width:auto;margin-top:0;padding:8px 14px}
.amClass{border:1px solid var(--line);border-radius:3px;background:var(--panel2);
  padding:10px 12px;margin-bottom:10px}
.amClassHead{display:flex;align-items:center;gap:10px}
.amClassHead b{flex:1;font-size:12px}
.amCode{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--accText);
  border:1px dashed var(--acc);border-radius:3px;padding:2px 8px}
.amLockBtn{background:none;border:1px solid var(--line2);border-radius:2px;color:var(--dim);
  cursor:pointer;font-family:var(--mono);font-size:10px;padding:4px 8px}
.amLockBtn:hover{border-color:var(--acc);color:var(--accText)}
.amLocks{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.amLockGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin:10px 0}
.amLockGrid label{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--dim);cursor:pointer}
.amLockGrid input{accent-color:var(--acc)}
.amLockGrid i{color:var(--accText);font-style:normal}

/* teacher: force complexity mode */
.amModeRow{display:flex;align-items:center;gap:8px;margin:6px 0 12px;font-size:11px;color:var(--dim)}
.amModeRow span{flex:1}
.amModeRow select{background:var(--bg);border:1px solid var(--line2);color:var(--txt);
  font-family:var(--mono);font-size:10.5px;padding:4px 6px;border-radius:2px}

/* lock/limit editor table */
.amLockTbl{margin:10px 0 6px}
.amLockRow{display:grid;grid-template-columns:1fr 76px 56px 56px;gap:5px;align-items:center;
  padding:2px 0;font-size:10.5px;color:var(--dim)}
.amLockRow.amLockHead{font-size:9px;color:var(--faint);text-transform:uppercase;letter-spacing:1px}
.amLockRow.amLockHead i{font-style:normal}
.amLockRow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amLockRow select,.amLockRow input{width:100%;background:var(--bg);border:1px solid var(--line2);
  color:var(--txt);font-family:var(--mono);font-size:10.5px;padding:3px 4px;border-radius:2px}
.amLockRow input:disabled{opacity:.35}
.amStud{margin-bottom:6px}
.amStudCfg{border-left:2px solid var(--line2);padding-left:10px;margin:6px 0 10px}

/* teacher: editing a student design */
#editBanner{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:7;
  display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:3px;
  background:rgba(11,14,19,.8);backdrop-filter:blur(4px);
  border:1px solid var(--acc);box-shadow:0 6px 24px rgba(0,0,0,.45)}
#editBanner[hidden]{display:none}
#editBanner .ebTag{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--accText)}
#editBanner #ebName{font-size:11px;color:var(--txt);max-width:220px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#editBanner button{appearance:none;border:1px solid var(--line2);border-radius:2px;background:var(--panel2);
  color:var(--txt);cursor:pointer;font-family:var(--mono);font-size:10.5px;padding:5px 10px;
  letter-spacing:1px;text-transform:uppercase}
#editBanner #ebSave{background:var(--acc);color:var(--accDark);border-color:var(--acc);font-weight:600}
#editBanner button:hover{filter:brightness(1.12)}
#view:has(#editBanner:not([hidden])) #gizmoBar{top:58px}

/* admin dashboard */
.amAdminBar{display:flex;gap:6px;margin-bottom:12px}
.amAdminTab.on{background:var(--acc);color:var(--accDark);border-color:var(--acc);font-weight:600}
.amAdminRow{margin-bottom:4px}
.amAdminUser{flex:1;font-weight:600;font-size:11px}
.amAdminStatus{font-size:10px;letter-spacing:.5px}
.amPending{color:var(--warn)}
.amApproved{color:var(--go)}
.amApproveBtn{background:var(--go) !important;color:#000 !important;border-color:var(--go) !important;font-weight:700}
.amDeleteBtn{margin-left:auto}