:root{
  --bg:#070b12;
  --panel:#0b1220cc;
  --panel2:#0a111fcc;
  --text:#e6eefc;
  --muted:#9fb2cf;
  --neon:#6ef3ff;
  --neon2:#b06eff;
  --warn:#ffcc66;
  --good:#57ff8a;
  --bad:#ff4d6d;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial;
  background: radial-gradient(1200px 700px at 20% 10%, #0e1630 0%, transparent 55%),
              radial-gradient(900px 600px at 80% 25%, #1a1033 0%, transparent 55%),
              var(--bg);
  color:var(--text);
  overflow:hidden;
}
#bg{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0}
.overlay{position:fixed; inset:0; pointer-events:none; z-index:2}
.scanlines{
  opacity:.20;
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.04) 0px,
    rgba(255,255,255,.04) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px);
  mix-blend-mode: overlay;
}
.vignette{
  background: radial-gradient(1000px 700px at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.85) 100%);
  opacity:.85;
}
.grain{
  opacity:.20;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.wrap{
  position:relative; z-index:3;
  height:100%;
  padding: clamp(16px, 3vw, 36px);
  display:flex; flex-direction:column;
  gap: 18px;
}
.top{display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:18px}
.logo{position:relative; font-weight:700; letter-spacing:.28em; font-size: clamp(18px, 2.2vw, 30px); line-height:1; text-transform:uppercase}
.logo__layer{position:absolute; left:0; top:0; filter: drop-shadow(0 0 18px rgba(110,243,255,.35))}
.logo__layer.a{position:relative; color:var(--text)}
.logo__layer.b{color:var(--neon); transform: translate(2px,1px); opacity:.65; animation:glitch1 3.2s infinite}
.logo__layer.c{color:var(--neon2); transform: translate(-2px,-1px); opacity:.55; animation:glitch2 2.4s infinite}
@keyframes glitch1{0%,92%,100%{clip-path: inset(0 0 0 0)}93%{clip-path: inset(0 0 60% 0)}95%{clip-path: inset(25% 0 25% 0)}97%{clip-path: inset(60% 0 0 0)}}
@keyframes glitch2{0%,88%,100%{clip-path: inset(0 0 0 0)}89%{clip-path: inset(10% 0 45% 0)}91%{clip-path: inset(55% 0 10% 0)}93%{clip-path: inset(30% 0 30% 0)}}
.meta .tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border:1px solid rgba(110,243,255,.35);
  border-radius:999px;
  background: linear-gradient(90deg, rgba(110,243,255,.10), rgba(176,110,255,.08));
  box-shadow: 0 0 0 1px rgba(176,110,255,.12) inset;
  font-weight:700; font-size:12px;
}
.meta .sub{color:var(--muted); margin-top:6px; font-size:13px}
.status{display:flex; align-items:center; gap:12px}
.pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(10,15,25,.55);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.dot{width:10px; height:10px; border-radius:50%; background: var(--warn); box-shadow: 0 0 16px rgba(255,204,102,.45); animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.time{padding:10px 14px; border-radius:999px; background: rgba(10,15,25,.35); border:1px solid rgba(255,255,255,.07); display:flex; gap:10px; align-items:center}
.label{color:var(--muted); font-size:12px}
#clock{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";}
.console{flex:1; display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; min-height:0}
.panel{
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(14px);
  min-height:0;
}
.left{padding:22px 22px 18px}
.left h2{margin:0 0 10px; letter-spacing:.12em; font-size: clamp(20px, 2.1vw, 34px)}
.lead{color:var(--muted); margin:0 0 18px; font-size:15px; line-height:1.6}
.lead strong{color:var(--text)}
.divider{height:1px; background: linear-gradient(90deg, rgba(110,243,255,.0), rgba(110,243,255,.45), rgba(176,110,255,.35), rgba(176,110,255,0)); margin: 18px 0}
.stats{display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-bottom:18px}
.stat{border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); border-radius: 14px; padding:12px}
.stat .k{color:var(--muted); font-size:12px}
.stat .v{margin-top:6px; font-weight:700; letter-spacing:.05em; font-size:13px}
#signal{color:var(--bad)}
#drop{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";}
.ctaRow{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  text-decoration:none;
  background: rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(110,243,255,.35); box-shadow: 0 10px 28px rgba(0,0,0,.35)}
.btn.primary{background: linear-gradient(90deg, rgba(110,243,255,.20), rgba(176,110,255,.18)); border-color: rgba(110,243,255,.28)}
.foot{display:block; margin-top:16px; color:rgba(230,238,252,.65); font-size:12px}
.right{display:flex; flex-direction:column}
.meterHeader{padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.meterTitle{font-weight:800; letter-spacing:.12em}
.meterSub{color:var(--muted); font-size:12px; margin-top:6px}
.meterBadge{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); font-size:12px}
.miniDot{width:8px; height:8px; border-radius:50%; background: var(--warn); box-shadow: 0 0 12px rgba(255,204,102,.45)}
.meters{padding:18px; display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.channel{border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); border-radius: 14px; padding:12px; display:flex; gap:12px; align-items:center}
.chLabel{width:24px; height:24px; border-radius: 8px; display:flex; align-items:center; justify-content:center; font-weight:800; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08)}
.led{flex:1; display:grid; grid-template-columns: repeat(16, 1fr); gap:6px}
.led span{height:12px; border-radius:4px; background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.07); transition: transform .08s ease, filter .08s ease}
.led span.on{background: linear-gradient(180deg, rgba(87,255,138,.95), rgba(0,0,0,.15)); border-color: rgba(87,255,138,.22); filter: drop-shadow(0 0 10px rgba(87,255,138,.35))}
.led span.warn.on{background: linear-gradient(180deg, rgba(255,204,102,.98), rgba(0,0,0,.15)); border-color: rgba(255,204,102,.25); filter: drop-shadow(0 0 12px rgba(255,204,102,.35))}
.led span.clip.on{background: linear-gradient(180deg, rgba(255,77,109,.98), rgba(0,0,0,.15)); border-color: rgba(255,77,109,.28); filter: drop-shadow(0 0 14px rgba(255,77,109,.38)); transform: translateY(-1px)}
.led span.peak{outline: 2px solid rgba(230,238,252,.75); outline-offset: -2px}
.spectrumWrap{margin: 0 18px 18px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); border-radius: 14px; overflow:hidden; display:flex; flex-direction:column; min-height:0}
.specHead{padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between}
.specTitle{font-weight:800; letter-spacing:.12em}
.specNote{color:var(--muted); font-size:12px}
#spec{width:100%; height:210px; display:block; background: radial-gradient(700px 240px at 50% 10%, rgba(110,243,255,.12), transparent 55%)}
.consoleFooter{margin-top:auto; padding: 0 18px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px}
.knobs{display:flex; gap:12px}
.knob{width:64px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); border-radius: 14px; padding:10px 10px 8px; display:flex; flex-direction:column; align-items:center; gap:8px}
.knobTop{width:34px; height:34px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(230,238,252,.28), rgba(0,0,0,.35)); border:1px solid rgba(255,255,255,.10); position:relative}
.knobTop:after{content:""; position:absolute; left:50%; top:7px; width:3px; height:11px; transform: translateX(-50%); border-radius:2px; background: rgba(110,243,255,.9); box-shadow: 0 0 10px rgba(110,243,255,.35); animation: knob 4.6s infinite ease-in-out}
@keyframes knob{0%,100%{transform:translateX(-50%) rotate(-10deg)}50%{transform:translateX(-50%) rotate(40deg)}}
.knobLabel{font-size:11px; color:rgba(230,238,252,.75); letter-spacing:.12em; font-weight:800}
.ticker{flex:1; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); border-radius: 14px; padding: 12px; display:flex; gap:10px; align-items:center; min-width:0}
.tickLabel{font-weight:800; letter-spacing:.12em; color: rgba(230,238,252,.85)}
.tickText{color: rgba(230,238,252,.70); font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 0 4px}
.fine{color:rgba(230,238,252,.60); font-size:12px}
.mono{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";}
@media (max-width: 980px){
  body{overflow:auto}
  .wrap{height:auto}
  #bg{position:fixed}
  .console{grid-template-columns: 1fr}
}