/* NEURODECK — unified sci-fi design system */
:root{
  --bg:#04070c; --panel:#080f16; --panel-2:#0b141d;
  --line:#1b2b38; --line-2:#25404f;
  --cyan:#5ff2ff; --cyan-dim:#2b7f8c;
  --text:#e8fbff; --muted:#8fa9b4;
  --accent:#5ff2ff; --danger:#ff5d73;
  --radius:14px; --radius-sm:10px;
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --glow:0 0 24px rgba(95,242,255,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  font:14px/1.45 "Inter",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1200px 700px at 15% -10%,rgba(95,242,255,.07),transparent 60%),
    radial-gradient(900px 600px at 100% 110%,rgba(95,242,255,.05),transparent 60%),
    var(--bg);
}
h1,h2,h3{font-family:"Orbitron","Rajdhani",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 12px}
h2{font-size:13px;font-weight:700}
a{color:var(--cyan)}

/* Layout */
header{
  margin:14px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:linear-gradient(180deg,#0a121a,#050a10);
  box-shadow:var(--shadow);position:relative;
}
.brand img{width:100%;height:180px;object-fit:cover;display:block;filter:saturate(.9) contrast(1.05)}
.cockpit-nav{position:absolute;right:18px;bottom:18px;display:flex;gap:10px}

/* Buttons: one consistent shape */
button,.tile-btn,.button{
  appearance:none;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#0e1a24,#080f16);
  color:var(--text);font:600 11px/1 "Orbitron",system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  padding:12px 16px;cursor:pointer;transition:.18s ease;
}
button:hover,.tile-btn:hover,.button:hover{
  border-color:var(--cyan);color:#fff;
  box-shadow:var(--glow),inset 0 0 18px rgba(95,242,255,.08);
  transform:translateY(-1px);
}
button:active{transform:translateY(0);box-shadow:none}
button:focus-visible,.tile-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.nav-device-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 18px}
.nav-device-btn .btn-led{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.nav-device-btn.mpc-btn .btn-led{background:#9ecbff;box-shadow:0 0 10px #9ecbff}

main{padding:0 14px 20px}
.panel{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),#060b11);
  padding:16px;margin:0 0 14px;box-shadow:var(--shadow);
}

/* Toolbar: uniform grid */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.toolbar .tile-btn,.toolbar button,.toolbar label.button{
  min-width:76px;height:58px;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;padding:8px 10px
}
.toolbar .tile-ctrl{
  display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
  min-width:96px;height:58px;padding:8px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:#070d13;color:var(--muted);
  font:600 9px/1 "Orbitron",system-ui,sans-serif;letter-spacing:.12em
}
.toolbar input,.toolbar select{
  height:26px;border-radius:8px;border:1px solid var(--line-2);
  background:#050a0f;color:var(--text);padding:0 8px;font-size:12px
}

/* REC */
.rec-btn{border-color:#5b2230}
.rec-btn .rec-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 10px var(--danger)}
.toolbar button.rec-btn:hover,.toolbar button.rec-btn:active{
  border-color:var(--danger);color:#ffe9ec;
  box-shadow:0 0 22px rgba(255,93,115,.25),inset 0 0 14px rgba(255,93,115,.12)
}
.toolbar button.rec-btn.recording{
  border-color:var(--danger);color:#ffe9ec;
  box-shadow:0 0 28px rgba(255,93,115,.35),inset 0 0 16px rgba(255,93,115,.15);
  animation:recPulse 1.2s ease-in-out infinite
}
@keyframes recPulse{50%{box-shadow:0 0 40px rgba(255,93,115,.5),inset 0 0 20px rgba(255,93,115,.22)}}

/* Status + timeline */
#status{
  margin:0 0 14px;padding:12px 16px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#070d13;color:var(--muted);
  font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace
}
.scroll{
  border:1px solid var(--line);border-radius:var(--radius);background:#050a0f;
  overflow:auto;max-height:62vh;margin-bottom:14px;box-shadow:var(--shadow)
}
.ruler{height:32px;background:linear-gradient(180deg,#0a121a,#060b10);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.tick{position:absolute;top:9px;font:10px ui-monospace,monospace;color:var(--muted)}
.track{display:flex;height:132px;border-top:1px solid var(--line)}
.track.selected{background:rgba(95,242,255,.04)}
.trackhead{
  width:180px;flex:0 0 auto;padding:10px;border-right:1px solid var(--line);
  background:linear-gradient(180deg,#0a121a,#070d13)
}
.trackhead input.name{
  width:100%;padding:7px 9px;border-radius:8px;border:1px solid var(--line-2);
  background:#050a0f;color:var(--text);font-size:12px
}
.trackhead button{padding:6px 9px;margin:4px 3px 0 0;font-size:10px}
.trackhead input[type=range]{width:100%;accent-color:var(--cyan)}
.lane{
  position:relative;flex:1;overflow:hidden;touch-action:none;
  background:
    repeating-linear-gradient(90deg,rgba(95,242,255,.05) 0 1px,transparent 1px 64px),
    linear-gradient(180deg,#060b10,#04080c)
}
.clip{
  position:absolute;top:8px;height:112px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(95,242,255,.45);
  background:linear-gradient(180deg,rgba(95,242,255,.10),rgba(95,242,255,.03));
  box-shadow:inset 0 0 24px rgba(95,242,255,.06)
}
.clipbar{
  height:24px;padding:5px 8px;font:10px ui-monospace,monospace;color:#cfeff5;
  background:rgba(95,242,255,.08);border-bottom:1px solid rgba(95,242,255,.18);white-space:nowrap
}
.clip canvas{display:block;width:100%;height:86px}
.selection{position:absolute;top:0;bottom:0;border:1px solid rgba(95,242,255,.75);background:rgba(95,242,255,.10);pointer-events:none}
.cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--cyan);box-shadow:0 0 12px var(--cyan);pointer-events:none;z-index:10}

/* Popups */
.popup,dialog{
  color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius);
  background:linear-gradient(180deg,#0b141d,#060b11);box-shadow:var(--shadow);
  padding:16px
}
dialog::backdrop{background:rgba(2,5,8,.72);backdrop-filter:blur(3px)}

/* Floating windows */
.device{
  position:fixed;display:flex;flex-direction:column;resize:both;overflow:hidden;
  min-width:340px;min-height:300px;width:min(1320px,94vw);height:min(820px,86vh);
  top:7vh;left:max(16px,calc(50vw - min(660px,47vw)));
  border:1px solid var(--line-2);border-radius:var(--radius);
  background:#050a0f;box-shadow:var(--shadow);z-index:1000
}
.device.drag iframe{pointer-events:none}
.devicebar{
  height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 10px 0 14px;cursor:grab;user-select:none;touch-action:none;
  background:linear-gradient(180deg,#0d1a24,#070d13);border-bottom:1px solid var(--line);
  font:700 11px/1 "Orbitron",system-ui,sans-serif;letter-spacing:.14em;color:var(--cyan)
}
.device.drag .devicebar{cursor:grabbing}
.device-actions{display:flex;gap:6px}
.win-btn{
  width:28px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:13px
}
.win-btn.win-close:hover{border-color:var(--danger);color:#fff;box-shadow:0 0 16px rgba(255,93,115,.25)}
.device iframe{flex:1;width:100%;border:0;display:block;background:#050a0f}

@media(max-width:820px){
  .device{width:calc(100vw - 16px);height:calc(100dvh - 24px);top:8px;left:8px;resize:none}
  .toolbar{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .toolbar .tile-btn,.toolbar button,.toolbar label.button,.toolbar .tile-ctrl{width:100%;min-width:0}
}

/* Sci-fi strategic buttons */
button,.tile-btn,.button{
  min-width:0;height:34px;padding:0 12px;
  font:700 10px/1 "Orbitron",system-ui,sans-serif;letter-spacing:.14em;
  border:1px solid #2c4a58;border-radius:4px;
  background:linear-gradient(180deg,#0d1a22,#070d12);
  color:#cfeff5;position:relative;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:.15s ease;
}
button:hover,.tile-btn:hover,.button:hover{
  border-color:var(--cyan);color:#fff;
  background:linear-gradient(180deg,#12242e,#081218);
  box-shadow:0 0 14px rgba(95,242,255,.22),inset 0 0 10px rgba(95,242,255,.08);
}
button:active{transform:translateY(1px)}

.toolbar .tile-btn,.toolbar button,.toolbar label.button{
  width:58px;height:38px;padding:0 6px;gap:2px;font-size:9px
}
.toolbar .tile-ctrl{height:38px;min-width:78px;padding:4px 8px;font-size:8px}
.toolbar input,.toolbar select{height:20px;font-size:10px}

.nav-device-btn{height:32px;padding:0 14px;font-size:9px}
.rec-btn{height:38px;width:58px}
.win-btn{width:24px;height:22px;font-size:11px;border-radius:3px}

/* Sci-fi strategy: generation console */
.panel:has(#generate){
  position:relative;
  background:linear-gradient(180deg,#0a141c,#060b10);
  border:1px solid #274757;
  box-shadow:0 0 0 1px rgba(95,242,255,.06),0 18px 50px rgba(0,0,0,.5);
}
.panel:has(#generate)::before{
  content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px solid rgba(95,242,255,.10);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.panel:has(#generate) h2::before{
  content:"◢ ";color:var(--cyan);
}
.panel:has(#generate) select,
.panel:has(#generate) input{
  height:30px;min-width:96px;padding:0 10px;
  border:1px solid #2c4a58;border-radius:3px;
  background:#050a0f;color:#dff8ff;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:inset 0 0 12px rgba(0,0,0,.6);
}
.panel:has(#generate) select:focus,
.panel:has(#generate) input:focus{
  outline:none;border-color:var(--cyan);
  box-shadow:0 0 12px rgba(95,242,255,.20),inset 0 0 10px rgba(95,242,255,.06);
}
.panel:has(#generate) label{
  display:inline-flex;align-items:center;gap:8px;
  font:700 9px/1 "Orbitron",system-ui,sans-serif;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;
}
.panel:has(#generate) #generate{
  height:30px;padding:0 16px;
  border:1px solid var(--cyan);color:#031015;
  background:linear-gradient(180deg,#8ff8ff,#37c9d8);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:0 0 18px rgba(95,242,255,.30);
}
.panel:has(#generate) #generate:hover{
  background:linear-gradient(180deg,#a9fbff,#4fdbea);
  box-shadow:0 0 26px rgba(95,242,255,.45);
}
.panel:has(#generate) #generate:disabled{opacity:.55;cursor:wait}
#genProgressWrapper{
  margin-top:12px;padding:10px;border:1px solid #22404e;border-radius:4px;
  background:#050a0f;
}
#genProgressWrapper div:first-child{font:700 9px/1 "Orbitron",system-ui,sans-serif;letter-spacing:.14em;color:var(--cyan)}
#genProgressWrapper div:last-child{
  height:8px;border:1px solid #274757;border-radius:2px;background:#03070b;overflow:hidden
}
#genProgressBarFill{
  height:100%;background:linear-gradient(90deg,#2b7f8c,#5ff2ff);
  box-shadow:0 0 14px rgba(95,242,255,.45)
}

/* Space-marine / strategic UI typography */
#status,.device-title-text,.clipbar,.tick,#genPhaseLabel,#genPercentLabel,.trackhead input.name{
  font-family:"Orbitron","Rajdhani","Eurostile",system-ui,sans-serif !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;
  color:#bfeff7 !important;text-shadow:0 0 8px rgba(95,242,255,.25) !important;
}
#status{
  font-size:11px !important;font-weight:700 !important;
  border-left:3px solid var(--cyan) !important;
  background:linear-gradient(90deg,rgba(95,242,255,.07),transparent 65%) !important;
}
#status::before{content:"◤ SYSTEM: ";color:var(--cyan)}
.clipbar{font-size:9px !important;font-weight:700 !important}
.tick{font-size:9px !important;letter-spacing:.10em !important}
#genPhaseLabel,#genPercentLabel{font-size:9px !important;font-weight:700 !important}
.device-title-text{font-size:10px !important}
h2,#status,.device-title-text{font-family:"Orbitron","Rajdhani",system-ui,sans-serif !important}

/* Unified strategic headers & user mesh */
h2{
  display:flex;align-items:center;gap:10px;
  font-size:11px !important;font-weight:800 !important;
  color:#dff8ff !important;letter-spacing:.18em !important;
  padding-bottom:10px;margin-bottom:14px !important;
  border-bottom:1px solid #22404e !important;
}
h2::before{
  content:"";width:8px;height:8px;flex:0 0 auto;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.panel:has(#activeUsersTbody){
  background:linear-gradient(180deg,#0a141c,#060b10);
  border:1px solid #274757;
}
.panel:has(#activeUsersTbody) h2{color:var(--cyan) !important}
#activeUsersCount{
  font:700 9px/1 "Orbitron",system-ui,sans-serif !important;
  letter-spacing:.16em !important;color:#9ecbff !important;
  padding:4px 8px;border:1px solid #2c4a58;border-radius:3px;background:#050a0f;
}
#activeUsersTbody tr{border-bottom:1px solid rgba(34,64,78,.55)}
#activeUsersTbody td{
  padding:9px 10px !important;font:600 10px/1.3 "Orbitron","Rajdhani",system-ui,sans-serif !important;
  letter-spacing:.10em !important;text-transform:uppercase !important;color:#cfeff5 !important;
}
#activeUsersTbody th{
  font:800 9px/1 "Orbitron",system-ui,sans-serif !important;
  letter-spacing:.16em !important;color:#7fd7e4 !important;
  padding:8px 10px !important;background:rgba(95,242,255,.05)
}
#activeUsersTbody td span[style*="color:#44e8f2"]{color:var(--cyan) !important}
#activeUsersTbody td span[style*="color:#789ba8"]{color:#8fa9b4 !important}
#activeUsersTbody td span[style*="padding:2px 6px"]{
  border:1px solid #2c4a58 !important;border-radius:3px !important;
  background:#050a0f !important;color:#bfeff7 !important;
  font:700 8px/1 "Orbitron",system-ui,sans-serif !important;letter-spacing:.12em !important
}
.panel:has(#generate),.panel:has(#activeUsersTbody){
  box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(95,242,255,.05)
}

/* Dark Space Wolves UI */
h2{
  font-family:"Orbitron","Rajdhani",system-ui,sans-serif !important;
  font-size:9px !important;font-weight:800 !important;
  letter-spacing:.24em !important;text-transform:uppercase !important;
  color:#a8d8e2 !important;text-shadow:0 0 6px rgba(95,242,255,.22) !important;
  border-bottom:1px solid #1d3340 !important;padding-bottom:8px !important;
}
h2::before{
  content:"◆";font-size:7px;color:#5ff2ff;
  text-shadow:0 0 8px #5ff2ff;margin-right:8px
}
.panel:has(#generate) h2,
.panel:has(#activeUsersTbody) h2{color:#a8d8e2 !important}

#activeUsersCount{
  font:700 8px/1 "Orbitron",system-ui,sans-serif !important;
  letter-spacing:.20em !important;color:#7fd7e4 !important;
  padding:3px 7px;border:1px solid #22404e;border-radius:2px;background:#04080c;
}
#activeUsersTbody th{
  font:800 8px/1 "Orbitron",system-ui,sans-serif !important;
  letter-spacing:.22em !important;color:#6fb7c4 !important;
  padding:7px 9px !important;background:#060b10;border-bottom:1px solid #1d3340 !important
}
#activeUsersTbody td{
  font:600 9px/1.35 "Orbitron","Rajdhani",system-ui,sans-serif !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  color:#9fb9c2 !important;padding:8px 9px !important;
  border-bottom:1px solid rgba(29,51,64,.55) !important
}
#activeUsersTbody td span[style*="color:#44e8f2"]{color:#7fd7e4 !important;text-shadow:0 0 6px rgba(95,242,255,.25) !important}
#activeUsersTbody td span[style*="color:#789ba8"]{color:#7d939d !important}
#activeUsersTbody td span[style*="padding:2px 6px"]{
  font:700 7px/1 "Orbitron",system-ui,sans-serif !important;
  letter-spacing:.16em !important;color:#a8d8e2 !important;
  border:1px solid #22404e !important;border-radius:2px !important;background:#04080c !important
}
#activeUsersTbody tr:hover td{background:rgba(95,242,255,.035)}
.panel:has(#generate),.panel:has(#activeUsersTbody){
  border:1px solid #1d3340 !important;
  background:linear-gradient(180deg,#070d13,#04080c) !important;
  box-shadow:0 16px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(95,242,255,.04) !important
}

/* Mobile: spectacular & readable */
@media(max-width:820px){
  body{font-size:15px}
  header{margin:8px;border-radius:12px}
  .brand img{height:132px}
  .cockpit-nav{
    position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:10px;background:#050a0f;border-top:1px solid #1d3340
  }
  .nav-device-btn{
    width:100%;height:52px;justify-content:center;
    font-size:11px !important;letter-spacing:.16em !important;
    border-radius:6px;box-shadow:0 0 18px rgba(95,242,255,.14)
  }
  .nav-device-btn .btn-led{width:9px;height:9px}
  main{padding:8px}
  .panel{padding:12px;border-radius:12px}
  .toolbar{
    display:grid !important;grid-template-columns:repeat(3,1fr);gap:8px
  }
  .toolbar .tile-btn,.toolbar button,.toolbar label.button,.toolbar .tile-ctrl{
    width:100%;min-width:0;height:56px;font-size:10px !important;
    border-radius:6px;box-shadow:0 0 14px rgba(95,242,255,.10)
  }
  .toolbar .tile-ctrl{grid-column:span 3;height:auto;padding:10px}
  .rec-btn{grid-column:span 3;height:52px;font-size:12px !important}
  .rec-btn .rec-dot{width:10px;height:10px}
  #status{font-size:11px !important;margin-bottom:10px}
  .scroll{max-height:58vh;border-radius:10px}
  .trackhead{width:132px;padding:8px}
  .trackhead input.name{font-size:11px}
  .trackhead button{font-size:9px;padding:5px 7px}
  .track{height:118px}
  .clip{top:6px;height:104px}
  .clip canvas{height:78px}
  .device{width:calc(100vw - 12px) !important;height:calc(100dvh - 18px) !important;top:6px !important;left:6px !important}
}

/* Restore main menu buttons */
@media(max-width:820px){
  .cockpit-nav{display:flex;gap:10px}
  .nav-device-btn{
    height:44px;padding:0 18px;font-size:10px !important;
    border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.6),0 0 15px rgba(95,242,255,.16)
  }
  .toolbar{grid-template-columns:repeat(auto-fill,minmax(72px,1fr)) !important}
  .toolbar .tile-btn,.toolbar button,.toolbar label.button{height:48px;font-size:9px !important}
  .rec-btn{grid-column:auto;height:48px}
  .toolbar .tile-ctrl{grid-column:auto;height:48px}
}

/* Allow vertical touch scrolling in timeline */
.scroll{touch-action:pan-y !important;overscroll-behavior-y:contain}
.lane{touch-action:pan-y !important}

/* Audio clip hover + selected glow */
.clip{transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}
.clip:hover{
  border-color:var(--cyan) !important;
  box-shadow:0 0 18px rgba(95,242,255,.35),inset 0 0 16px rgba(95,242,255,.10) !important;
}
.clip.clip-selected{
  border-color:var(--cyan) !important;border-width:2px !important;
  box-shadow:0 0 26px rgba(95,242,255,.50),inset 0 0 20px rgba(95,242,255,.14) !important;
}

/* Context menu */
#ctxMenu{position:fixed;z-index:3000;min-width:190px;padding:6px;border:1px solid #2c4a58;border-radius:6px;background:#070d13;box-shadow:0 18px 45px rgba(0,0,0,.65);display:none}
#ctxMenu button{display:block;width:100%;text-align:left;height:32px;padding:0 10px;margin:2px 0;font:700 9px/1 "Orbitron",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;border-radius:4px}
#ctxMenu .has-sub::after{content:"▸";float:right;color:var(--cyan)}
#ctxSub{position:fixed;z-index:3001;min-width:170px;padding:6px;border:1px solid #2c4a58;border-radius:6px;background:#070d13;box-shadow:0 18px 45px rgba(0,0,0,.65);display:none}

/* Banner: clean readable frame */
header{padding-bottom:0 !important}
.brand{position:relative}
.brand img{height:210px !important;object-fit:cover;object-position:center 30%;filter:contrast(1.06) saturate(.92)}
.brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,8,12,.10) 0%,rgba(4,8,12,.55) 78%,#050a0f 100%);
}
.brand::before{
  content:"NEURODECK // HOLOGRAM SHELL";
  position:absolute;left:22px;bottom:16px;z-index:2;
  font:800 13px/1 "Orbitron",system-ui,sans-serif;letter-spacing:.30em;
  color:#dff8ff;text-shadow:0 0 14px rgba(95,242,255,.45);
}

/* DJ / MPC: tall chamfered console modules */
.cockpit-nav{
  right:0 !important;bottom:0 !important;
  display:flex !important;gap:14px !important;
  padding:0 22px !important;align-items:flex-end !important;
}
.nav-device-btn{
  height:74px !important;min-width:150px;padding:0 22px !important;
  display:flex !important;flex-direction:column !important;
  align-items:flex-start !important;justify-content:center !important;gap:7px;
  border:1px solid #2c4a58 !important;border-bottom:none !important;
  border-radius:12px 12px 0 0 !important;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  background:linear-gradient(180deg,#10222c 0%,#081218 65%,#050a0f 100%) !important;
  box-shadow:inset 0 1px 0 rgba(95,242,255,.12),0 -8px 24px rgba(0,0,0,.35) !important;
  font:800 11px/1 "Orbitron",system-ui,sans-serif !important;
  letter-spacing:.20em !important;color:#cfeff5 !important;
  transition:.18s ease !important;
}
.nav-device-btn.dj-btn{border-color:rgba(95,242,255,.55) !important}
.nav-device-btn.mpc-btn{border-color:rgba(158,203,255,.55) !important}
.nav-device-btn:hover{
  transform:translateY(-3px) !important;color:#fff !important;
  box-shadow:0 0 26px rgba(95,242,255,.28),inset 0 0 20px rgba(95,242,255,.10) !important;
}
.nav-device-btn .btn-led{width:8px !important;height:8px !important}
.nav-device-btn .btn-label{font-size:11px !important}

/* Zoom: Imperial console slider */
.toolbar .tile-ctrl:has(#zoom){
  min-width:190px !important;height:38px !important;
  flex-direction:row !important;align-items:center !important;gap:10px;
  padding:0 12px !important;border:1px solid #2c4a58 !important;border-radius:4px;
  background:linear-gradient(180deg,#0b141d,#060b10) !important;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.toolbar .tile-ctrl:has(#zoom) span{
  font:800 8px/1 "Orbitron",system-ui,sans-serif !important;
  letter-spacing:.22em !important;color:#7fd7e4 !important;
}
.toolbar .tile-ctrl:has(#zoom) input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border:0;border-radius:2px;
  background:linear-gradient(90deg,#1d3340,#2c4a58);outline:none
}
.toolbar .tile-ctrl:has(#zoom) input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:18px;border-radius:3px;
  background:linear-gradient(180deg,#8ff8ff,#37c9d8);
  border:1px solid #5ff2ff;box-shadow:0 0 12px rgba(95,242,255,.55);cursor:pointer;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}
.toolbar .tile-ctrl:has(#zoom) input[type=range]::-moz-range-thumb{
  width:14px;height:18px;border-radius:3px;border:1px solid #5ff2ff;
  background:linear-gradient(180deg,#8ff8ff,#37c9d8);box-shadow:0 0 12px rgba(95,242,255,.55)
}

/* NEURODECK HOLOGRAM — anaglyph lettering */
.brand::before{
  content:"NEURODECK HOLOGRAM" !important;
  position:absolute;
  left:22px;bottom:20px;z-index:2;
  font-family:"Eurostile","Microgramma","Orbitron",sans-serif !important;
  font-size:clamp(12px,1.7vw,25px) !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:.16em !important;
  color:#ecfcff !important;
  transform:scaleX(1.08);
  transform-origin:left center;
  text-shadow:
    -2px 0 rgba(255,45,85,.85),
     2px 0 rgba(0,235,255,.95),
     0 2px 0 #304653,
     0 4px 0 #101d29,
     0 7px 12px rgba(0,0,0,.9),
     0 0 18px rgba(0,220,255,.3) !important;
  pointer-events:none;
}
@media(max-width:820px){
  .brand::before{
    left:12px;bottom:12px;
    font-size:12px !important;
    letter-spacing:.12em !important;
    transform:none;
  }
}

/* Full logo + discreet SHELL label */
.brand{
  position:relative;
  background:#000;
}
.brand img{
  display:block;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:none !important;
}
.brand::after{
  content:none !important;
}
.brand::before{
  content:"SHELL" !important;
  left:14px !important;
  bottom:10px !important;
  font:700 9px/1.2 "Orbitron",sans-serif !important;
  letter-spacing:.24em !important;
  color:#9cbcc6 !important;
  transform:none !important;
  text-shadow:0 0 6px rgba(95,242,255,.25) !important;
}
header .cockpit-nav{
  position:relative !important;
  inset:auto !important;
  display:flex !important;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px !important;
  padding:10px 14px 0 !important;
  background:#050a0f;
  border-top:1px solid #1d3340;
}

/* Full logo + discreet SHELL label */
.brand{
  position:relative;
  background:#000;
}
.brand img{
  display:block;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:none !important;
}
.brand::after{
  content:none !important;
}
.brand::before{
  content:"SHELL" !important;
  left:14px !important;
  bottom:10px !important;
  font:700 9px/1.2 "Orbitron",sans-serif !important;
  letter-spacing:.24em !important;
  color:#9cbcc6 !important;
  transform:none !important;
  text-shadow:0 0 6px rgba(95,242,255,.25) !important;
}
header .cockpit-nav{
  position:relative !important;
  inset:auto !important;
  display:flex !important;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px !important;
  padding:10px 14px 0 !important;
  background:#050a0f;
  border-top:1px solid #1d3340;
}

/* Compact panoramic banner */
header{
  margin:0 0 12px !important;
  width:100% !important;
  border-radius:0 !important;
}
.brand{
  width:100%;
  height:clamp(110px,13vw,180px);
  background:#000;
}
.brand img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}
.brand::before{
  left:14px !important;
  bottom:10px !important;
  font-size:9px !important;
}

/* Full-width panoramic artwork */
header .brand{
  width:100% !important;
  height:auto !important;
  aspect-ratio:4.36 / 1;
  overflow:hidden;
  padding:0 !important;
}
header .brand img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center !important;
  filter:none !important;
}
header .brand::after{content:none !important}

/* Navigation directly over banner — no bottom strip */
header{
  position:relative !important;
  padding:0 !important;
}
header .cockpit-nav{
  position:absolute !important;
  inset:auto 0 0 auto !important;
  z-index:5;
  width:auto !important;
  margin:0 !important;
  padding:0 14px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:flex-end !important;
  gap:10px !important;
}
header .nav-device-btn:hover{
  transform:none !important;
}
@media(max-width:820px){
  header .cockpit-nav{
    padding:0 6px !important;
    gap:6px !important;
  }
  header .nav-device-btn{
    min-width:0 !important;
    width:auto !important;
    height:38px !important;
    padding:0 10px !important;
    gap:3px !important;
  }
  header .nav-device-btn .btn-label{
    font-size:8px !important;
    letter-spacing:.08em !important;
  }
}

/* Sci-fi scrollbars — steel / ice cyan */
*{
  scrollbar-width:thin;
  scrollbar-color:#548795 #050a10;
}
::-webkit-scrollbar{
  width:11px;
  height:11px;
}
::-webkit-scrollbar-track{
  background:linear-gradient(90deg,#03070b,#101c26,#03070b);
  border:1px solid #203540;
  border-radius:3px;
}
::-webkit-scrollbar-thumb{
  min-height:32px;
  min-width:32px;
  border:2px solid #070d13;
  border-radius:4px;
  background:linear-gradient(135deg,#8bc6d3,#385b70 48%,#172d40);
  box-shadow:inset 0 1px 0 #b1e5ed,inset 0 -1px 0 #10202c;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(135deg,#c1f6ff,#548fa4 48%,#24465d);
}
::-webkit-scrollbar-thumb:active{
  background:#7fe0ee;
}
::-webkit-scrollbar-corner{
  background:#050a10;
}
::-webkit-scrollbar-button{
  display:none;
}
@supports selector(::-webkit-scrollbar){
  *{scrollbar-width:auto;scrollbar-color:auto}
}

/* Audio SPEED potentiometer */
#speedControl{
  display:flex;align-items:center;gap:9px;padding:5px 12px;
  border:1px solid #355363;border-radius:6px;
  background:linear-gradient(145deg,#152330,#060b12);
  color:#b9dce7;font:700 9px/1.4 monospace;letter-spacing:.12em;
}
#speedKnob{
  position:relative;width:34px!important;height:34px!important;
  min-width:34px!important;padding:0!important;border-radius:50%!important;
  clip-path:none!important;touch-action:none;
  border:2px solid #688999!important;
  background:repeating-conic-gradient(#263845 0deg 10deg,#14222d 10deg 20deg)!important;
  box-shadow:inset 0 0 0 5px #101a24,0 0 12px #5ff2ff22;
  transform:none!important;cursor:ns-resize;
}
#speedKnob::after{
  content:"";position:absolute;left:13px;top:3px;
  width:3px;height:9px;border-radius:2px;background:#a7f6ff;
  box-shadow:0 0 6px #5ff2ff;
  transform-origin:1.5px 12px;transform:rotate(var(--angle,0deg));
}
#speedControl output{display:block;color:#86e8f5}

/* Visible SPEED knob rotation */
#speedControl #speedKnob{
  cursor:grab !important;
  touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  transform:rotate(var(--angle,0deg)) !important;
  transition:transform .04s linear !important;
  background:
    radial-gradient(circle at center,#152632 0 55%,transparent 57%),
    repeating-conic-gradient(#75939f 0deg 6deg,#172733 6deg 18deg) !important;
  border:2px solid #638493 !important;
  box-shadow:0 0 12px #5ff2ff33,inset 0 0 8px #000 !important;
}
#speedControl #speedKnob:active{
  cursor:grabbing !important;
  border-color:#9af5ff !important;
}
#speedControl #speedKnob::after{
  content:"" !important;
  position:absolute !important;
  left:calc(50% - 2px) !important;
  top:2px !important;
  width:4px !important;
  height:11px !important;
  border-radius:2px !important;
  background:#d5fdff !important;
  box-shadow:0 0 7px #5ff2ff !important;
  transform:none !important;
  pointer-events:none !important;
}

/* Full artwork, no cropping or additional visual filters */
header .brand{
  background:#02070b!important;
  overflow:hidden!important;
}
header .brand img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
  transform:none!important;
  image-rendering:auto!important;
  opacity:1!important;
}
header .brand::after{content:none!important}

/* Sharpened animated banner, full container */
header .brand video.banner-motion{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  margin:0!important;padding:0!important;
  filter:none!important;transform:none!important;
  pointer-events:none;
}
header .brand::after{content:none!important}

/* Natural proportions — fill banner and crop overflow */
header .brand{
  overflow:hidden!important;
}
header .brand video.banner-motion,
header .brand img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 60%!important;
  transform:none!important;
}

/* Banner freeze control */
header .brand{position:relative!important}
header .brand #bannerFreeze{
  position:absolute!important;
  left:12px!important;bottom:10px!important;z-index:10;
  display:inline-flex!important;align-items:center;justify-content:center;
  width:auto!important;min-width:94px;height:30px!important;
  padding:0 12px!important;border:1px solid #54858d!important;
  border-radius:5px!important;clip-path:none!important;
  background:linear-gradient(180deg,#17313beF,#07121aef)!important;
  color:#c5f7ff!important;font:700 9px/1 monospace!important;
  letter-spacing:.12em;text-shadow:none!important;
  box-shadow:0 3px 10px #0008,inset 0 1px 0 #b5f5ff22!important;
  cursor:pointer;touch-action:manipulation;transform:none!important;
}
header .brand #bannerFreeze:hover{
  border-color:#8de7f1!important;
  box-shadow:0 0 12px #5ff2ff44!important;
}
header .brand #bannerFreeze:focus-visible{
  outline:2px solid #b5f5ff;outline-offset:3px;
}
header .brand::before{content:none!important}
@media(pointer:coarse){
  header .brand #bannerFreeze{min-height:44px!important;min-width:104px}
}

/* Compact sci-fi freeze dial */
header .brand #bannerFreeze{
  left:10px!important;bottom:10px!important;
  width:30px!important;min-width:30px!important;
  height:30px!important;min-height:30px!important;
  padding:0!important;border-radius:50%!important;
  border:1px solid #65838b!important;
  background:
    radial-gradient(circle at 35% 25%,#344c56,#101d27 65%,#050b12)!important;
  box-shadow:inset 0 1px 2px #b4dce744,
    inset 0 -2px 3px #000b,0 2px 5px #0008!important;
  font-size:0!important;letter-spacing:0!important;
  opacity:.78;transition:opacity .18s,box-shadow .18s;
}
header .brand #bannerFreeze::before{
  content:"";position:absolute;inset:4px;
  border:1px solid #5c9ba366;border-radius:50%;
  pointer-events:none;
}
header .brand #bannerFreeze::after{
  content:"";position:absolute;
  width:7px;height:9px;
  border-left:2px solid #9edbe2;
  border-right:2px solid #9edbe2;
  box-sizing:border-box;
  filter:drop-shadow(0 0 3px #61cdda55);
  pointer-events:none;
}
header .brand #bannerFreeze[aria-pressed="true"]::after{
  width:0;height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid #b6e6e9;
  border-right:0;
  margin-left:2px;
}
header .brand #bannerFreeze:hover,
header .brand #bannerFreeze:focus-visible{
  opacity:1;
  box-shadow:inset 0 1px 2px #b4dce744,0 0 9px #58cddd44!important;
}
@media(pointer:coarse){
  header .brand #bannerFreeze::before{
    inset:-7px;border:0;
    pointer-events:auto;
  }
}


EOFcd /home/stojakes/neurodeck-shell-workspace && cat >> static/shell.css <<'EOF'

/* Mobile landscape: separate theme-switch row */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  .toolbar{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    align-items:center!important;
  }
  .toolbar > *{
    flex-shrink:0!important;
    max-width:100%;
    box-sizing:border-box;
  }
  .toolbar #skinSwitch{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    float:none!important;
    order:100!important;
    display:flex!important;
    flex:0 0 100%!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:44px!important;
    margin:0!important;
    padding:8px 12px!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:10px!important;
    overflow:visible!important;
  }
  .toolbar #skinSwitch input{
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    height:22px!important;
    margin:0!important;
  }
  .toolbar #skinSwitch span{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
}

/* Mobile landscape: consistent console grid */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  .toolbar{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(72px,1fr))!important;
    grid-auto-flow:row;
    gap:8px!important;
    align-items:stretch!important;
  }
  .toolbar > *{
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box;
    order:0!important;
    grid-column:auto!important;
  }
  .toolbar > :is(button,.tile-btn,label.button,.tile-ctrl){
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
  }
  .toolbar .tile-ctrl:has(#zoom){
    grid-column:span 2!important;
    min-width:0!important;
    gap:8px!important;
  }
  .toolbar #zoom{
    width:100%!important;
    min-width:0!important;
    flex:1 1 0!important;
  }
  .toolbar #skinSwitch{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    grid-column:span 2!important;
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    padding:6px 8px!important;
    white-space:nowrap!important;
  }
  .toolbar #skinSwitch input{
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    height:22px!important;
    margin:0!important;
  }
  .toolbar #skinSwitch span{
    flex:0 0 auto!important;
    font-size:8px!important;
  }
}


#forgeBtn.forge-active{border-color:var(--accent,#4be3c0)!important}
#forgePanel{position:fixed;z-index:5000;right:14px;bottom:76px;width:min(360px,calc(100vw - 24px));max-height:min(74vh,560px);overflow:auto;padding:12px;border-radius:12px;display:none;background:linear-gradient(160deg,rgba(8,16,22,.97),rgba(3,8,12,.98));border:1px solid rgba(75,227,192,.28);box-shadow:0 24px 70px rgba(0,0,0,.65)}
#forgePanel.open{display:block}
.forge-head{display:flex;justify-content:space-between;align-items:center;font:700 11px/1 Orbitron,system-ui;letter-spacing:.18em;color:#bff8e9;margin-bottom:8px}
#forgeClose{width:26px;height:26px;border-radius:6px;background:#0d1a20;color:#cffef1;border:1px solid #29524a}
.forge-sub{font:600 8px/1.4 Orbitron,system-ui;letter-spacing:.16em;color:#7fa79d;margin:0 0 10px}
#forgePresets{display:grid;gap:7px}
.forge-preset{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer;background:linear-gradient(160deg,#0b161c,#081015);border:1px solid #22443e;color:#d9fff4}
.forge-preset strong{display:block;font:700 9px/1.2 Orbitron,system-ui;letter-spacing:.14em}
.forge-preset small{display:block;margin-top:3px;font:500 8px/1.3 system-ui;color:#8fb3aa}
.forge-preset.active{border-color:#4be3c0;box-shadow:0 0 16px rgba(75,227,192,.18);background:#0d2027}
.forge-actions{display:flex;gap:8px;align-items:center;margin-top:10px}
#forgeAudition{height:34px;padding:0 10px;border-radius:7px;cursor:pointer;background:#0d1a20;color:#cffef1;border:1px solid #2c544b;font:700 8px/1 Orbitron,system-ui;letter-spacing:.14em}
#forgeInfo{font:600 8px/1.2 system-ui;color:#8fb3aa}
@media (orientation:landscape) and (max-height:600px){#forgePanel{right:8px;bottom:64px;width:min(330px,calc(100vw - 16px));max-height:calc(100vh - 78px)}}