:root{
  --bg:#0b1020;
  --bg2:#141b35;
  --panel:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.12);
  --txt:#eaf0ff;
  --muted:#9aa6c8;
  --ok:#38e0a0;
  --bad:#ff5d73;
  --accent:#7aa2ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 700px at 50% -10%,#1d2850,var(--bg));
  color:var(--txt);
  font:15px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;
  display:flex;justify-content:center;
}
.app{width:min(1100px,100%);padding:18px 18px 28px;display:flex;flex-direction:column;gap:14px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
h1{margin:0;font-size:24px;letter-spacing:.5px;font-weight:700}
h1 span{color:var(--accent)}
.scores{display:flex;gap:10px}
.score{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 14px;text-align:center;min-width:84px}
.score .label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.score strong{font-size:20px}

.stage{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#121a35,#0a0f22);box-shadow:0 20px 60px rgba(0,0,0,.45)}
canvas{display:block;width:100%;height:clamp(320px,52vh,520px)}

.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,10,22,.78);backdrop-filter:blur(4px)}
.overlay.hidden{display:none}
.card{max-width:520px;text-align:center;padding:26px}
.card h2{margin:0 0 10px;font-size:26px}
.card p{margin:0 0 16px;color:var(--muted)}
.hint{font-size:12px;margin-top:14px !important}
.results{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.results li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 4px;font-size:13px}
.results li.ok{border-color:rgba(56,224,160,.6);color:var(--ok)}
.results li.bad{border-color:rgba(255,93,115,.6);color:var(--bad)}
.results.hidden{display:none}

button{font:inherit;cursor:pointer;border-radius:10px;transition:.15s}
button.primary{background:linear-gradient(180deg,#7aa2ff,#4a74e8);border:0;color:#081026;font-weight:700;padding:12px 22px;font-size:16px}
button.primary:hover{filter:brightness(1.08)}
button.ghost{background:var(--panel);border:1px solid var(--line);color:var(--txt);padding:8px 14px}
button.ghost:hover{border-color:var(--accent)}

.tuner{display:grid;grid-template-columns:1fr 2fr 1fr;gap:16px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.target{display:flex;flex-direction:column;gap:2px}
.target.right{align-items:flex-end}
.target .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.target strong{font-size:24px;line-height:1.1}
.freq{font-size:12px;color:var(--muted)}
.meter-track{position:relative;height:16px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid var(--line);overflow:hidden}
.meter-zone{position:absolute;top:0;bottom:0;left:50%;width:20%;transform:translateX(-50%);background:rgba(56,224,160,.22)}
.meter-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.5)}
.meter-needle{position:absolute;top:1px;bottom:1px;width:4px;border-radius:2px;background:var(--accent);left:50%;transform:translateX(-50%);transition:left .05s linear,background .1s}
.meter-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}

.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.controls label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.controls label.check{flex-direction:row;align-items:center;gap:6px;font-size:13px;color:var(--txt)}
select{font:inherit;background:#121a35;color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.status{min-height:18px;margin:0;font-size:13px;color:var(--muted)}
.status.error{color:var(--bad)}

input[type=range]{width:120px;accent-color:var(--accent)}