:root{
  --bg:#08080f;
  --panel:#0e0e1a;
  --neon-cyan:#00f0ff;
  --neon-mag:#ff2bd0;
  --neon-lime:#b6ff2b;
  --ink:#c9d0ff;
  --dim:#5a5f88;
  --border:#232342;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:
    radial-gradient(circle at 30% 10%, #14142a 0%, transparent 55%),
    radial-gradient(circle at 80% 90%, #1a0a20 0%, transparent 50%),
    var(--bg);
  color:var(--ink);
  font-family:'VT323', monospace;
  min-height:100vh;
  overflow-x:hidden;
}

/* global scanline overlay */
#scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.14) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:multiply;
}

/* ---------- HEADER ---------- */
#topbar{
  text-align:center;
  padding:18px 12px 10px;
  border-bottom:2px solid var(--border);
}
#title{
  font-family:'Major Mono Display', monospace;
  font-size:clamp(2.4rem, 8vw, 5rem);
  margin:0; letter-spacing:0.15em;
  color:#fff; position:relative; display:inline-block;
  text-shadow:
    -3px 0 var(--neon-mag),
    3px 0 var(--neon-cyan);
  animation:jitter 3.5s infinite steps(1);
}
@keyframes jitter{
  0%,92%{ transform:translate(0,0); }
  93%{ transform:translate(-3px,1px); text-shadow:-5px 0 var(--neon-mag),5px 0 var(--neon-cyan); }
  95%{ transform:translate(3px,-1px); }
  97%{ transform:translate(-2px,0); }
  100%{ transform:translate(0,0); }
}
#subtitle{
  color:var(--neon-lime);
  font-size:clamp(1rem,3vw,1.4rem);
  letter-spacing:0.2em; margin-top:4px;
  min-height:1.4rem;
}
#readout{
  margin-top:6px; font-size:1rem; color:var(--dim);
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  letter-spacing:0.08em;
}
#readout .rec{ color:var(--neon-mag); animation:blink 1s steps(1) infinite; }
#readout .safe{ color:var(--neon-cyan); }
@keyframes blink{ 50%{ opacity:0.15; } }

/* ---------- WORKSPACE ---------- */
#workspace{
  display:flex; gap:20px; padding:20px;
  max-width:1400px; margin:0 auto; align-items:flex-start;
}
@media (max-width:900px){
  #workspace{ flex-direction:column; padding:12px; }
}

#stage-wrap{ flex:1; min-width:0; }

#bezel{
  position:relative;
  background:linear-gradient(145deg,#1a1a2e,#050508);
  border:6px solid #17172c;
  border-radius:24px;
  padding:14px;
  box-shadow:0 0 0 2px #000, 0 20px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(0,0,0,0.7);
}
#bezel::after{ /* screen curvature vignette */
  content:''; position:absolute; inset:14px; border-radius:12px; pointer-events:none;
  box-shadow:inset 0 0 80px rgba(0,0,0,0.65);
}
#canvas{
  display:block; width:100%; height:auto;
  background:#000; border-radius:10px;
  image-rendering:pixelated;
  aspect-ratio:16/9;
}

#dropzone{
  position:absolute; inset:14px;
  display:flex; align-items:center; justify-content:center;
  border:3px dashed var(--neon-cyan);
  border-radius:10px; cursor:pointer;
  background:rgba(0,240,255,0.03);
  transition:background .2s, border-color .2s;
}
#dropzone.hidden{ display:none; }
#dropzone.drag{ background:rgba(255,43,208,0.12); border-color:var(--neon-mag); }
.dz-big{ font-size:clamp(1.1rem,3vw,1.8rem); color:var(--neon-cyan); letter-spacing:0.1em; }
.dz-small{ color:var(--dim); margin-top:8px; font-size:1.1rem; }
.dz-inner{ text-align:center; }

#transport{
  display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap;
}
.tbtn{
  font-family:'VT323',monospace; font-size:1.1rem;
  background:#12122a; color:var(--ink);
  border:2px solid var(--border); border-radius:6px;
  padding:8px 14px; cursor:pointer; letter-spacing:0.08em;
  transition:all .15s;
}
.tbtn:hover:not(:disabled){ border-color:var(--neon-cyan); color:var(--neon-cyan); box-shadow:0 0 10px rgba(0,240,255,0.4); }
.tbtn:disabled{ opacity:0.35; cursor:not-allowed; }
.tbtn.accent{ border-color:var(--neon-mag); color:var(--neon-mag); }
.tbtn.accent:hover{ box-shadow:0 0 10px rgba(255,43,208,0.5); }
.tbtn.recording{ background:var(--neon-mag); color:#000; border-color:var(--neon-mag); animation:blink 0.8s steps(1) infinite; }
#scrub{ flex:1; min-width:120px; accent-color:var(--neon-cyan); }

/* ---------- PANEL ---------- */
#panel{
  width:320px; flex-shrink:0;
  background:var(--panel);
  border:2px solid var(--border);
  border-radius:12px; padding:14px;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
}
@media (max-width:900px){ #panel{ width:100%; } }

.panel-head{
  font-size:1.3rem; color:var(--neon-lime);
  letter-spacing:0.12em; text-align:center;
  border-bottom:2px solid var(--border); padding-bottom:8px; margin-bottom:12px;
}
.presets{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.preset{
  font-family:'VT323',monospace; font-size:0.95rem;
  background:#161630; color:var(--neon-cyan);
  border:1px solid var(--border); border-radius:6px;
  padding:8px 4px; cursor:pointer; letter-spacing:0.04em;
  transition:all .15s;
}
.preset:hover{ background:var(--neon-cyan); color:#000; }

.module{
  border:1px solid var(--border); border-radius:8px;
  padding:10px; margin-bottom:10px; background:#0b0b18;
  transition:border-color .2s, box-shadow .2s;
}
.module.active{ border-color:var(--neon-mag); box-shadow:0 0 14px rgba(255,43,208,0.15); }
.mod-head{ display:flex; justify-content:space-between; align-items:center; }
.mod-head span{ font-size:1.1rem; letter-spacing:0.06em; color:var(--ink); }

.switch{
  width:44px; height:22px; border-radius:12px;
  background:#20203c; border:1px solid var(--border);
  position:relative; cursor:pointer; padding:0;
  transition:background .2s;
}
.switch::after{
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:var(--dim); transition:all .2s;
}
.switch.on{ background:var(--neon-lime); }
.switch.on::after{ left:24px; background:#000; }

.slider-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.slider-row label{ font-size:0.95rem; color:var(--dim); width:78px; text-transform:uppercase; letter-spacing:0.05em; }
.slider-row input[type=range]{ flex:1; accent-color:var(--neon-mag); }
.slider-row select{
  flex:1; background:#161630; color:var(--neon-cyan);
  border:1px solid var(--border); border-radius:4px; padding:3px;
  font-family:'VT323',monospace; font-size:1rem;
}

.master{ display:flex; gap:8px; margin-top:6px; }
.master-btn{
  flex:1; font-family:'Major Mono Display',monospace; font-size:1.1rem;
  background:linear-gradient(90deg,var(--neon-mag),var(--neon-cyan));
  color:#000; border:none; border-radius:8px; padding:12px;
  cursor:pointer; letter-spacing:0.06em; font-weight:bold;
  transition:transform .1s, box-shadow .2s;
}
.master-btn:hover{ transform:scale(1.02); box-shadow:0 0 20px rgba(255,43,208,0.5); }
.master-btn:active{ transform:scale(0.97); }
.reset-btn{
  font-family:'VT323',monospace; font-size:1.05rem;
  background:#161630; color:var(--dim);
  border:1px solid var(--border); border-radius:8px; padding:12px 16px;
  cursor:pointer;
}
.reset-btn:hover{ color:var(--neon-mag); border-color:var(--neon-mag); }

.hint{ text-align:center; margin-top:10px; color:var(--dim); font-size:0.95rem; letter-spacing:0.05em; }
.hint b{ color:var(--neon-lime); }

/* ---------- FOOTER ---------- */
#footer{
  border-top:2px solid var(--border);
  padding:16px; text-align:center;
  display:flex; justify-content:center; gap:20px; flex-wrap:wrap;
  color:var(--dim); font-size:1.05rem; letter-spacing:0.06em;
}
#footer a{
  color:var(--neon-cyan); text-decoration:none;
  text-shadow:0 0 8px rgba(0,240,255,0.5);
}
#footer a:hover{ color:var(--neon-mag); text-shadow:0 0 8px rgba(255,43,208,0.6); }