:root{
  --bg:#060906;
  --panel:#0d130d;
  --phos:#33ff66;
  --phos-dim:#1c8c39;
  --amber:#ffb300;
  --cyan:#39d7ff;
  --red:#ff4b4b;
  --line:#1e2a1e;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:
    radial-gradient(ellipse at 50% -10%, #12210f 0%, var(--bg) 60%),
    var(--bg);
  font-family:'Share Tech Mono','VT323',monospace;
  color:var(--phos);
  min-height:100%;
  padding:14px;
}
.crt-flicker{
  position:fixed;inset:0;pointer-events:none;z-index:50;
  background:linear-gradient(rgba(18,25,18,0) 50%, rgba(0,0,0,0.06) 50%);
  background-size:100% 3px;
  animation:flick 6s infinite;mix-blend-mode:overlay;
}
@keyframes flick{ 0%,97%{opacity:.4} 98%{opacity:.15} 100%{opacity:.4} }

.rack{
  max-width:1080px;margin:0 auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg,#0a0f0a,#070a07);
  box-shadow:0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.6);
  overflow:hidden;
}

/* header */
.faceplate{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;
  background:repeating-linear-gradient(90deg,#0e150e 0 2px,#0b110b 2px 4px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;}
.dish{font-size:26px;filter:drop-shadow(0 0 6px var(--phos));}
.title{
  font-size:clamp(15px,3.4vw,24px);letter-spacing:2px;
  color:var(--phos);text-shadow:0 0 8px rgba(51,255,102,.7);
}
.statusbox{display:flex;align-items:center;gap:10px;}
.modeText{font-size:12px;color:var(--amber);text-shadow:0 0 6px rgba(255,179,0,.6);}
.led{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:0 0 10px currentColor;}
.led.idle{background:var(--red);color:var(--red);}
.led.idle.dim{opacity:.35;}
.led.sync{background:var(--amber);color:var(--amber);animation:pulse .5s infinite alternate;}
.led.decoding{background:var(--phos);color:var(--phos);animation:pulse .35s infinite alternate;}
@keyframes pulse{from{opacity:.4}to{opacity:1}}

/* input panel */
.inputPanel{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);background:#080c08;
}
.inputBtns{display:flex;gap:10px;flex-wrap:wrap;}
.ctl{
  font-family:inherit;font-size:13px;letter-spacing:1px;
  background:linear-gradient(180deg,#152015,#0c120c);
  color:var(--phos);border:1px solid var(--phos-dim);
  padding:9px 14px;border-radius:6px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.5);
  transition:all .12s;
}
.ctl:hover{border-color:var(--phos);box-shadow:0 0 10px rgba(51,255,102,.4);}
.ctl.active{background:linear-gradient(180deg,#1e3a1e,#123012);border-color:var(--phos);}
.ctl.accent{color:var(--amber);border-color:#7a5600;}
.ctl.accent:hover{box-shadow:0 0 10px rgba(255,179,0,.4);}
.ctl.full{width:100%;margin-top:8px;}
.bigbtn{
  font-family:inherit;font-size:15px;letter-spacing:2px;font-weight:bold;
  background:linear-gradient(180deg,#2a1010,#160707);
  color:var(--phos);border:2px solid var(--phos-dim);
  padding:12px 26px;border-radius:8px;cursor:pointer;
  text-shadow:0 0 8px rgba(51,255,102,.6);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 4px 0 #050805,0 6px 10px rgba(0,0,0,.6);
  transition:transform .08s;
}
.bigbtn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 1px 0 #050805;}
.bigbtn.stopping{color:var(--red);border-color:#7a0000;text-shadow:0 0 8px rgba(255,75,75,.7);}

/* main grid */
.mainGrid{display:grid;grid-template-columns:1fr 300px;gap:18px;padding:18px;}
@media(max-width:760px){ .mainGrid{grid-template-columns:1fr;} }

.bezel{
  background:linear-gradient(145deg,#20261f,#0a0d09);
  padding:14px;border-radius:12px;
  box-shadow:inset 0 0 0 2px #000,0 6px 16px rgba(0,0,0,.6);
}
.bezel.small{padding:10px;}
.screen{position:relative;border-radius:8px;overflow:hidden;background:#000;}
#canvas{
  width:100%;display:block;image-rendering:pixelated;
  filter:saturate(1.1) contrast(1.05);
}
#waterfall{width:100%;display:block;image-rendering:pixelated;}
.scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px);
}
.vignette{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(0,0,0,.7);border-radius:8px;}

/* meters */
.meters{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;}
.meter{flex:1;min-width:90px;background:#080c08;border:1px solid var(--line);border-radius:6px;padding:8px 10px;}
.meter.wide{flex-basis:100%;}
.meter label{display:block;font-size:10px;letter-spacing:2px;color:var(--phos-dim);margin-bottom:5px;}
.read{font-size:15px;color:var(--cyan);text-shadow:0 0 6px rgba(57,215,255,.4);}
.read.small{font-size:12px;}
.read.lock{color:var(--red);}
.read.locked{color:var(--phos);text-shadow:0 0 8px rgba(51,255,102,.6);}
.vu{height:12px;background:#020402;border-radius:3px;overflow:hidden;border:1px solid #10180f;}
.vuBar{height:100%;width:0%;
  background:linear-gradient(90deg,var(--phos),var(--amber),var(--red));
  transition:width .05s;}
.progWrap{height:8px;background:#020402;border-radius:3px;overflow:hidden;margin-bottom:5px;border:1px solid #10180f;}
.progBar{height:100%;width:0%;background:var(--phos);box-shadow:0 0 8px var(--phos);transition:width .1s;}

/* side col */
.sideCol{display:flex;flex-direction:column;gap:12px;}
.wfLabel{font-size:10px;letter-spacing:3px;color:var(--phos-dim);}
.tuning{background:#080c08;border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;}
.tuning label{font-size:10px;letter-spacing:1.5px;color:var(--phos-dim);margin-top:4px;}
.tuning label span{color:var(--cyan);}
.tuning input[type=range]{
  -webkit-appearance:none;appearance:none;height:6px;border-radius:3px;
  background:#132013;outline:none;
}
.tuning input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:3px;
  background:var(--phos);box-shadow:0 0 8px var(--phos);cursor:pointer;border:1px solid #0a0;
}
.tuning input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:3px;background:var(--phos);
  box-shadow:0 0 8px var(--phos);cursor:pointer;border:1px solid #0a0;
}
.chk{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--phos);}
.chk input{accent-color:var(--phos);}

.gallery{background:#080c08;border:1px solid var(--line);border-radius:8px;padding:12px;}
.capStrip{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;min-height:40px;}
.cap{width:60px;height:45px;object-fit:cover;image-rendering:pixelated;
  border:1px solid var(--phos-dim);border-radius:3px;cursor:pointer;transition:.12s;}
.cap:hover{border-color:var(--phos);box-shadow:0 0 8px rgba(51,255,102,.5);transform:scale(1.05);}

/* footer */
.footer{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  padding:12px 18px;border-top:1px solid var(--line);background:#070a07;
  font-size:11px;color:var(--phos-dim);
}
.footer a{color:var(--amber);text-decoration:none;border-bottom:1px dotted var(--amber);}
.footer a:hover{color:#fff;text-shadow:0 0 6px var(--amber);}
#hint{color:var(--cyan);}