:root{
  --bg:#141417;
  --panel:#1d1e22;
  --panel-hi:#26272c;
  --amber:#ffb347;
  --phos:#33ff88;
  --ink:#c9ccd1;
  --dim:#71757c;
  --line:#33353b;
}
*{box-sizing:border-box}
html,body{margin:0;background:
  radial-gradient(circle at 20% 0%, #202127 0%, var(--bg) 55%);
  color:var(--ink);font-family:'JetBrains Mono',monospace;min-height:100vh}

/* ---- Header ---- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;border-bottom:2px solid var(--line);
  background:linear-gradient(180deg,#212228,#191a1e);
}
.title-wrap h1{
  margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.5rem;letter-spacing:-.5px;color:#fff;
}
.subtitle{margin:2px 0 0;font-size:.72rem;color:var(--amber);letter-spacing:.5px}
.status-wrap{display:flex;align-items:center;gap:8px;font-size:.75rem;letter-spacing:1px}
.led{width:12px;height:12px;border-radius:50%;box-shadow:0 0 8px currentColor}
.led.idle{background:#8a2a2a;color:#8a2a2a}
.led.amber{background:var(--amber);color:var(--amber);animation:blink 1s infinite}
.led.green{background:var(--phos);color:var(--phos);animation:blink .6s infinite}
@keyframes blink{50%{opacity:.35}}

/* ---- Layout ---- */
main{
  display:grid;grid-template-columns:300px 1fr 320px;gap:16px;
  padding:16px;max-width:1400px;margin:0 auto;align-items:start;
}
@media(max-width:980px){main{grid-template-columns:1fr}}

.panel{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);border-radius:10px;padding:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 14px rgba(0,0,0,.4);
}
.panel-label{
  font-size:.66rem;font-weight:700;letter-spacing:2px;color:var(--phos);
  margin:16px 0 8px;opacity:.85;
}
.panel-label:first-child{margin-top:0}

/* ---- Dropzone ---- */
.dropzone{
  border:2px dashed var(--line);border-radius:8px;padding:18px 10px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;transition:.15s;text-align:center;
}
.dropzone:hover,.dropzone.over{border-color:var(--phos);background:rgba(51,255,136,.05)}
.drop-icon{font-size:1.4rem;color:var(--amber)}
.drop-main{font-weight:700;font-size:.82rem}
.drop-sub{font-size:.66rem;color:var(--dim)}
.filemeta{font-size:.68rem;color:var(--amber);margin-top:8px;text-align:center}

/* ---- Buttons ---- */
.btn-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.btn{
  flex:1;min-width:38px;background:linear-gradient(180deg,#2c2e34,#212228);
  color:var(--ink);border:1px solid var(--line);border-radius:6px;
  padding:8px 6px;font-family:inherit;font-size:.72rem;font-weight:700;
  letter-spacing:.5px;cursor:pointer;transition:.12s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.4);
}
.btn:hover{border-color:var(--amber);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.wide{flex-basis:100%}
.transport .btn{font-size:1rem}
.btn.toggle.active{background:linear-gradient(180deg,#0e3b24,#0a2c1a);border-color:var(--phos);color:var(--phos);box-shadow:0 0 8px rgba(51,255,136,.4) inset}
.togglegrid{margin-top:4px}

/* ---- Controls ---- */
.ctl{display:flex;flex-direction:column;gap:4px;font-size:.7rem;color:var(--dim);margin-bottom:10px}
.ctl output{color:var(--amber);font-weight:700}
.ctl input[type=range]{width:100%;accent-color:var(--phos);height:4px}
.ctl select{
  background:#101114;color:var(--ink);border:1px solid var(--line);border-radius:5px;
  padding:6px;font-family:inherit;font-size:.72rem;
}

/* ---- CRT ---- */
.stage{display:flex;flex-direction:column;align-items:center;gap:12px}
.crt-bezel{
  position:relative;width:100%;max-width:520px;padding:22px;border-radius:26px;
  background:linear-gradient(160deg,#2a2b30,#141519);
  box-shadow:0 10px 40px rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.05);
  display:flex;justify-content:center;
}
#crt{
  border-radius:14px;background:#000;
  box-shadow:0 0 30px rgba(51,255,136,.15),inset 0 0 40px rgba(0,0,0,.9);
}
.glass{
  position:absolute;inset:22px;border-radius:14px;pointer-events:none;
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.10), transparent 45%),
    radial-gradient(circle at 60% 100%, rgba(0,0,0,.4), transparent 60%);
}
.stage-msg{font-size:.72rem;color:var(--amber);text-align:center;min-height:1em}
.export{width:100%;max-width:520px}

/* ---- Analysis ---- */
#scope{width:100%;border:1px solid var(--line);border-radius:6px;background:#0c0d10}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.thumb{width:100%;border-radius:4px;border:1px solid var(--line);cursor:pointer;transition:.12s}
.thumb:hover{border-color:var(--phos);transform:scale(1.05)}

/* ---- Footer ---- */
footer{
  max-width:1400px;margin:10px auto 30px;padding:0 16px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
  font-size:.72rem;color:var(--dim);
}
.howto{max-width:70ch}
.howto summary{cursor:pointer;color:var(--phos);font-weight:700;letter-spacing:.5px}
.howto p{line-height:1.5;margin-top:8px}
.howto em{color:var(--amber);font-style:normal}
footer a{color:var(--amber);text-decoration:none;border-bottom:1px dotted var(--amber);white-space:nowrap}
footer a:hover{color:#fff}