:root{--bg:#07090a;--panel:#1a1d1f;--metal:#2a2e31;--green:#39ff88;--cyan:#3ef0ff;--amber:#ffb238;--red:#ff3b4e;--dim:#6b7378}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#122019 0%,var(--bg) 60%);color:#cfd8d4;font-family:'Share Tech Mono',monospace;min-height:100vh}
.hdr{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-bottom:1px solid #1f2a25;background:#050706}
h1{margin:0;font-size:22px;color:var(--green);text-shadow:0 0 10px var(--green);letter-spacing:2px}
.tag{font-size:12px;color:var(--dim)}
.blink{animation:bl 4s infinite}@keyframes bl{0%,90%{opacity:1}93%{opacity:.1}96%{opacity:1}}
.lock{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.led{width:12px;height:12px;border-radius:50%;background:#132;box-shadow:inset 0 0 3px #000}
.led.on{background:var(--green);box-shadow:0 0 12px var(--green)}
.rig{max-width:1200px;margin:0 auto;padding:12px}
.display{text-align:center;padding:8px;background:linear-gradient(#0b0d0c,#000);border:2px solid #222;border-radius:8px;margin-bottom:10px}
.freq{font-family:'Major Mono Display',monospace;font-size:clamp(28px,6vw,54px);color:var(--amber);text-shadow:0 0 14px rgba(255,178,56,.7);user-select:none}
.freq span.d{cursor:ns-resize;padding:0 1px;border-radius:3px}
.freq span.d:hover{background:#2a1c05}
.freq small{font-size:.4em;margin-left:8px}
.bandline{font-size:13px;color:var(--dim)}
#sigName{color:var(--cyan)}
.screenwrap{position:relative;border:2px solid #222;border-radius:8px;overflow:hidden;background:#000;height:min(56vh,520px)}
#canvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.scan{pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.decoder{position:absolute;right:8px;top:8px;width:260px;max-width:45%;background:rgba(4,12,8,.85);border:1px solid #1d4a32;border-radius:6px;font-size:12px}
.decoder.min pre{display:none}
.dechead{display:flex;gap:6px;align-items:center;padding:4px 6px;border-bottom:1px solid #1d4a32;color:var(--green)}
.dechead b{flex:1}
.dechead button{background:none;border:1px solid #1d4a32;color:var(--green);font-family:inherit;cursor:pointer;border-radius:3px}
#decText{margin:0;padding:6px;height:120px;overflow:auto;white-space:pre-wrap;color:var(--green)}
.power{position:absolute;inset:0;margin:auto;width:220px;height:90px;background:#0b140f;border:2px solid var(--green);color:var(--green);font-family:inherit;font-size:20px;border-radius:10px;cursor:pointer;box-shadow:0 0 30px rgba(57,255,136,.35)}
.rack{display:grid;grid-template-columns:auto auto auto 1fr;gap:12px;margin-top:10px;padding:12px;border-radius:8px;background:repeating-linear-gradient(90deg,#232729 0 2px,#26292c 2px 4px);border:1px solid #333;box-shadow:inset 0 1px 0 #444}
.group{background:rgba(0,0,0,.25);padding:8px;border-radius:6px}
.group label{display:block;font-size:11px;color:var(--dim);margin-bottom:6px;letter-spacing:2px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
button{font-family:inherit}
.modes button,.big,.chips button{background:linear-gradient(#3a3f43,#222528);border:1px solid #111;color:#ccc;padding:7px 9px;border-radius:4px;cursor:pointer;box-shadow:0 2px 0 #000}
.modes button.on{color:#000;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.big{margin-top:6px;margin-right:6px}
.big.on{background:var(--green);color:#000}
.knobs{display:flex;gap:10px}
.knob{text-align:center;font-size:11px;color:var(--dim);width:62px}
.kn{width:52px;height:52px;margin:0 auto 4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#666,#1a1a1a 70%);border:2px solid #111;position:relative;cursor:ns-resize;touch-action:none}
.kn::after{content:'';position:absolute;left:50%;top:4px;width:3px;height:14px;background:var(--amber);transform:translateX(-50%);border-radius:2px}
.kv{color:var(--amber)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button{font-size:12px;padding:5px 8px}
.chips button.on{border-color:var(--cyan);color:var(--cyan)}
.bm{margin-top:8px}
.bm button{border-color:#5a4a1a;color:var(--amber)}
.bm button i{font-style:normal;color:var(--red);margin-left:6px}
.keys{font-size:11px;color:var(--dim);text-align:center;margin-top:8px}
.toast{position:fixed;left:50%;top:70px;transform:translate(-50%,-30px);opacity:0;background:#0c1a12;border:1px solid var(--green);color:var(--green);padding:10px 18px;border-radius:6px;transition:.4s;z-index:9;box-shadow:0 0 20px rgba(57,255,136,.4)}
.toast.show{opacity:1;transform:translate(-50%,0)}
footer{text-align:center;padding:16px;font-size:12px;color:var(--dim)}
footer a{color:var(--green)}
@media(max-width:820px){.rack{grid-template-columns:1fr 1fr}.wide{grid-column:1/-1}.decoder{width:180px;max-width:55%}#decText{height:70px}.knobs{flex-wrap:wrap}}