@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0d1720;--panel:#172632;--panel2:#1c3040;--text:#e9f2f5;--muted:#8da3b0;--line:#2a414f;--accent:#58d9b2;--cyan:#5bcbe1;--grid:#23404a;--shadow:0 12px 32px #0003}
[data-theme=light]{--bg:#edf2f4;--panel:#fff;--panel2:#f5f8f9;--text:#172b36;--muted:#6c818d;--line:#dce5e9;--accent:#138e76;--cyan:#168da5;--grid:#dce8eb;--shadow:0 10px 28px #20374312}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -20%,#244453 0,transparent 48%),var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif}.app{max-width:1500px;margin:auto;padding:0 25px}.topbar{height:65px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}.logo{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--cyan));color:#09221e;font-weight:900;font-size:20px}.brand b,.brand small{display:block}.brand b{font-size:12px;letter-spacing:1.7px}.brand small{font:8px 'DM Mono';color:var(--muted);letter-spacing:1px;margin-top:3px}.head-actions{display:flex;align-items:center;gap:10px}.live,.live-mini{font:9px 'DM Mono';letter-spacing:1px;color:var(--muted)}.live i,.live-mini i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#84939b;margin-right:5px}.live.active i,.live-mini i{background:#55dda3;box-shadow:0 0 9px #55dda3}.square{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font-size:18px;cursor:pointer}.modebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0}.mode-switch{display:flex;gap:4px;background:var(--panel);padding:4px;border:1px solid var(--line);border-radius:10px}.mode{background:transparent;border:0;color:var(--muted);padding:8px 13px;border-radius:7px;font:600 10px Manrope;cursor:pointer}.mode.active{background:var(--accent);color:#09251e}.mode-tools{display:flex;align-items:center;gap:16px}.compact-toggle{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted);cursor:pointer}.compact-toggle input{accent-color:var(--accent)}.text-btn{border:0;background:none;color:var(--accent);font:10px Manrope;cursor:pointer}.hero{display:flex;align-items:center;justify-content:space-between;padding:15px 0 17px}.eyebrow{font:9px 'DM Mono';letter-spacing:1.5px;color:var(--accent)}h1{font-size:clamp(25px,3vw,36px);letter-spacing:-1.5px;margin:5px 0}h1 em{font-style:normal;color:var(--accent)}.hero p{font-size:11px;color:var(--muted);margin:0}.hero-tag{border:1px solid var(--line);border-radius:9px;padding:7px 14px;text-align:center;transform:rotate(2deg);color:var(--muted)}.hero-tag b,.hero-tag small{display:block;font:8px 'DM Mono';letter-spacing:1px}.hero-tag strong{display:block;color:var(--accent);font:23px 'DM Mono'}.panel{background:linear-gradient(145deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);min-width:0}.control{padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.mic-state{display:flex;align-items:center;gap:10px}.mic-dot{width:9px;height:9px;border-radius:50%;background:#85959e}.mic-dot.on{background:#55dda3;box-shadow:0 0 10px #55dda3}.mic-state b,.mic-state small{display:block}.mic-state b{font-size:11px}.mic-state small{font-size:9px;color:var(--muted);margin-top:2px}.control-actions{display:flex;gap:7px}.btn{border:0;border-radius:8px;padding:9px 13px;font:700 10px Manrope;cursor:pointer}.btn:disabled{opacity:.4;cursor:not-allowed}.primary{background:var(--accent);color:#09251e}.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}.instrument-layout{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:13px}.meter-card{padding:14px 17px 12px}.card-head{display:flex;justify-content:space-between;align-items:flex-start}.card-head h2{font-size:14px;margin:3px 0 0;letter-spacing:-.3px}.unit{font:9px 'DM Mono';color:var(--accent);border:1px solid var(--line);border-radius:5px;padding:4px 7px}.dial{position:relative;max-width:360px;margin:0 auto}.dial svg{width:100%;display:block;overflow:visible}.track{fill:none;stroke:var(--line);stroke-width:14;stroke-linecap:round}.arc{fill:none;stroke-width:7;stroke-linecap:round}.dial text{fill:var(--muted);font:10px 'DM Mono'}.dial text:first-of-type{font-size:9px}.needle{transform-origin:160px 175px;transform:rotate(-90deg);transition:transform .055s linear}.needle line{stroke:#f6fbfa;stroke-width:3.2;stroke-linecap:round;filter:drop-shadow(0 0 3px #0009)}.needle circle{fill:var(--accent);stroke:var(--panel);stroke-width:3}.freq-needle line{stroke:var(--cyan)}.freq-needle circle{fill:var(--cyan)}.readout{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:6px;white-space:nowrap}.readout b{font:500 clamp(27px,3vw,38px) 'DM Mono';letter-spacing:-2px;font-variant-numeric:tabular-nums}.readout small{font:10px 'DM Mono';color:var(--accent)}.freq-card .readout small{color:var(--cyan)}.meter-status{text-align:center;color:var(--muted);font:8px 'DM Mono';letter-spacing:1.4px;margin-top:4px}.range-labels{display:flex;justify-content:space-between;margin:8px 3px 10px;color:var(--muted);font:7px 'DM Mono';letter-spacing:.7px}.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:8px}.quick-stats div{min-width:0}.quick-stats small,.quick-stats b{display:block}.quick-stats small{font:7px 'DM Mono';letter-spacing:.8px;color:var(--muted);margin-bottom:3px}.quick-stats b{font:11px 'DM Mono';font-variant-numeric:tabular-nums}.scope-card,.spectrum-card{padding:14px 16px}.scope{height:clamp(130px,18vh,205px);background:#07151c;border:1px solid #29444c;border-radius:8px;overflow:hidden;position:relative;margin-top:10px}.scope canvas{width:100%;height:100%;display:block}.scope-label{position:absolute;left:10px;right:10px;top:8px;display:flex;justify-content:space-between;color:#65818a;font:7px 'DM Mono';pointer-events:none}.scope-foot{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font:8px 'DM Mono'}.spectrum-card canvas{width:100%;height:clamp(105px,15vh,165px);display:block;margin-top:10px}.spectrum-axis{display:flex;justify-content:space-between;color:var(--muted);font:7px 'DM Mono';margin-top:3px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}.detail-card{padding:15px}.data-list{margin-top:10px}.data-list div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}.data-list b{font:10px 'DM Mono';color:var(--text)}.setting{margin-top:12px}.setting label{display:flex;justify-content:space-between;font-size:10px}.setting label b{font:10px 'DM Mono';color:var(--accent)}.setting input[type=range]{width:100%;accent-color:var(--accent);margin:9px 0 3px}.setting small{display:block;font-size:8px;color:var(--muted)}.checks{display:flex;gap:13px;flex-wrap:wrap}.checks label{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--muted)}.checks input{accent-color:var(--accent)}.notice{font-size:9px;line-height:1.5;color:var(--muted);margin:12px 2px 16px}footer{display:flex;justify-content:space-between;padding:13px 0 18px;border-top:1px solid var(--line);font:8px 'DM Mono';letter-spacing:.8px;color:var(--muted)}footer a{color:var(--accent);text-decoration:none}.toast{position:fixed;z-index:9;bottom:18px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:11px 15px;box-shadow:var(--shadow);font-size:11px;transition:.2s;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
/* Instrument mode fits the usable viewport; detailed mode restores the full page flow. */
body.instrument-mode{overflow:hidden}.instrument-mode .app{height:100svh;max-width:1600px;display:flex;flex-direction:column}.instrument-mode main{flex:1;min-height:0;display:flex;flex-direction:column}.instrument-mode .hero{padding:8px 0 10px}.instrument-mode .hero-tag{padding:4px 12px}.instrument-mode .control{margin-bottom:9px;padding:8px 13px}.instrument-mode .instrument-layout{flex:1;min-height:0;grid-template-rows:minmax(0,1.08fr) minmax(0,.92fr)}.instrument-mode .meter-card{display:flex;flex-direction:column;justify-content:space-between;min-height:0}.instrument-mode .dial{width:min(100%,340px);flex:1;min-height:0;display:flex;align-items:center}.instrument-mode .dial svg{max-height:100%}.instrument-mode .scope-card,.instrument-mode .spectrum-card{min-height:0}.instrument-mode .scope{height:calc(100% - 43px);min-height:90px}.instrument-mode .spectrum-card canvas{height:calc(100% - 48px);min-height:80px}.instrument-mode .dashboard-only,.instrument-mode .notice{display:none}.instrument-mode footer{padding:7px 0 9px}.instrument-mode .quick-stats{padding-top:6px}.instrument-mode .range-labels{margin:5px 3px}
@media(max-width:800px){.app{padding:0 13px}.instrument-mode body{overflow:auto}.instrument-mode .app{height:auto;min-height:100svh}.instrument-mode main{display:block}.instrument-mode .instrument-layout{grid-template-rows:auto;flex:none}.instrument-mode .meter-card{min-height:285px}.instrument-mode .scope-card,.instrument-mode .spectrum-card{min-height:190px}.instrument-mode .scope{height:135px}.instrument-mode .spectrum-card canvas{height:115px}.instrument-mode footer{margin-top:12px}.hero-tag{display:none}.modebar{align-items:flex-start;flex-direction:column}.mode-tools{width:100%;justify-content:space-between}.instrument-layout{gap:10px}.meter-card{padding:13px}.dial{max-width:350px}.scope-card,.spectrum-card{padding:13px}.detail-grid{grid-template-columns:1fr}.control{align-items:flex-start;flex-direction:column}.control-actions{width:100%}.control-actions button{flex:1}}
@media(max-width:420px){.app{padding:0 9px}.brand b{font-size:10px}.brand small{font-size:7px}.mode{padding:7px 9px;font-size:9px}.mode-tools{gap:8px}.compact-toggle{font-size:9px}.instrument-mode .meter-card{min-height:260px}.readout b{font-size:29px}.quick-stats b{font-size:10px}footer span:last-child{display:none}}
@media(max-height:700px) and (min-width:801px){.instrument-mode .hero{padding:3px 0 6px}.instrument-mode h1{font-size:25px}.instrument-mode .hero p{font-size:9px}.instrument-mode .control{padding:6px 12px}.instrument-mode .meter-card{padding:9px 14px}.instrument-mode .scope{margin-top:5px}.instrument-mode .scope-foot{margin-top:4px}.instrument-mode footer{padding:4px 0 6px}}