:root{
  --bg:#07090d;
  --panel:#11151d;
  --cyan:#22d3ee;
  --green:#39ff14;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'IBM Plex Mono', monospace;
  background:
    radial-gradient(circle at 20% 0%, #10202a 0%, transparent 45%),
    radial-gradient(circle at 90% 100%, #1a0e26 0%, transparent 50%),
    #07090d;
  background-attachment:fixed;
  min-height:100vh;
}
.font-display{ font-family:'VT323', monospace; }

.glow-cyan{ text-shadow:0 0 8px rgba(34,211,238,0.6), 0 0 20px rgba(34,211,238,0.3); }

/* header */
.deck-header{
  background:linear-gradient(180deg,#1a212c,#0c1017);
  border:1px solid #26313f;
  box-shadow:0 4px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* LED */
.led{ width:10px;height:10px;border-radius:50%;display:inline-block; }
.led-on{ background:#39ff14; box-shadow:0 0 8px #39ff14, 0 0 3px #fff inset; }
.led-off{ background:#182014; box-shadow:inset 0 0 4px #000; }

/* CRT phosphor display */
.crt{
  background:
    radial-gradient(ellipse at center, #071a0e 0%, #030a05 100%);
  border:2px solid #1c2a20;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.9), 0 0 20px rgba(57,255,20,0.05);
  animation:flicker 6s infinite;
}
@keyframes flicker{
  0%,100%{filter:brightness(1);}
  48%{filter:brightness(1.02);}
  49%{filter:brightness(0.94);}
  50%{filter:brightness(1.03);}
}
.scanlines{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 1px, transparent 2px, transparent 3px);
  z-index:20;
}
.marquee-wrap{ overflow:hidden; white-space:nowrap; }
.marquee{ display:inline-block; animation:scroll 14s linear infinite; padding-left:100%; }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-100%);} }

/* scope */
.scope-canvas{
  background:#030805;
  border:2px solid #1c2a20;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.8);
  display:block;
}

/* panels */
.panel{
  background:linear-gradient(180deg,#141a24,#0b0f16);
  border:1px solid #232e3c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}

/* buttons */
.btn{
  min-width:44px; height:44px; padding:0 12px;
  background:linear-gradient(180deg,#2a3340,#151b24);
  border:1px solid #37455a; border-radius:8px;
  color:#cbd5e1; font-size:1rem; cursor:pointer;
  box-shadow:0 3px 0 #0a0e14, inset 0 1px 0 rgba(255,255,255,0.06);
  transition:transform .05s, box-shadow .05s;
}
.btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #0a0e14; }
.btn:disabled{ opacity:0.35; cursor:not-allowed; }
.btn-primary{
  background:linear-gradient(180deg,#0e7490,#083344);
  border-color:#22d3ee; color:#a5f3fc;
  box-shadow:0 3px 0 #041e26, 0 0 12px rgba(34,211,238,0.35);
}
.btn-active{
  background:linear-gradient(180deg,#166534,#052e16);
  border-color:#39ff14; color:#bbf7d0;
  box-shadow:0 3px 0 #021b0c, 0 0 12px rgba(57,255,20,0.4);
}

/* sliders */
.seek{ -webkit-appearance:none; appearance:none; height:6px; border-radius:4px;
  background:linear-gradient(90deg,#22d3ee 0%,#0e7490 100%); outline:none; }
.seek::-webkit-slider-thumb{ -webkit-appearance:none; width:16px;height:16px;border-radius:50%;
  background:#e0fbff; box-shadow:0 0 8px #22d3ee; cursor:pointer; }
.seek::-moz-range-thumb{ width:16px;height:16px;border-radius:50%;border:none;
  background:#e0fbff; box-shadow:0 0 8px #22d3ee; cursor:pointer; }

/* channel strips */
.chan-strip{
  flex:0 0 auto; width:52px;
  display:flex; flex-direction:column; align-items:center;
  background:#0b0f16; border:1px solid #1e2733; border-radius:6px; padding:6px 4px;
}
.vu-track{
  width:14px; height:80px; background:#03060a; border-radius:3px;
  display:flex; align-items:flex-end; overflow:hidden;
  box-shadow:inset 0 0 6px rgba(0,0,0,0.9);
}
.vu-fill{
  width:100%;
  background:linear-gradient(0deg,#166534 0%, #39ff14 55%, #fef08a 85%, #f87171 100%);
  transition:height .04s linear;
  box-shadow:0 0 6px rgba(57,255,20,0.5);
}

/* dropzone */
.dropzone{
  border:2px dashed #2a3a4a; background:#0a0f15;
  transition:all .15s;
}
.dropzone:hover{ border-color:#22d3ee; background:#0c1620; }
.dropzone.drag-over{ border-color:#39ff14; background:#0c1a10; box-shadow:0 0 20px rgba(57,255,20,0.2); }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#0a0e14; }
::-webkit-scrollbar-thumb{ background:#2a3644; border-radius:4px; }