*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#0e1116;color:#e8ecf1;font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
header{display:flex;align-items:baseline;gap:12px;padding:10px 14px;border-bottom:1px solid #1d232c;position:sticky;top:0;background:#0e1116;z-index:5}
.hdr-note{font-size:22px;font-weight:700;color:#4fd1a5;min-width:64px}
.hdr-cents{font-size:13px;color:#9aa7b5}
.hdr-range{margin-left:auto;font-size:12px;color:#66788a}
main{flex:1;overflow-y:auto}
.tab{display:none;padding:14px}
.tab.active{display:block}
#tab-sing{padding:0}
#trace{width:100%;height:46vh;display:block;background:#0b0e12}
.bigread{text-align:center;padding:16px}
#noteBig{font-size:64px;font-weight:800;letter-spacing:1px}
#freqSmall{color:#66788a;font-size:13px;margin-top:6px}
#centsBar{position:relative;height:10px;background:#1a2029;border-radius:5px;margin:14px 8% 0;overflow:hidden}
#centsBar::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:#3a4656}
#centsNeedle{position:absolute;top:0;bottom:0;width:14px;border-radius:5px;background:#4fd1a5;left:calc(50% - 7px);transition:left .08s linear,background .1s}
h2{font-size:18px;margin-bottom:8px}
p.sub,.sub{color:#8a97a6;font-size:13px}
.card{background:#151b23;border:1px solid #222b36;border-radius:12px;padding:14px;margin:12px 0}
button{font:inherit;color:#e8ecf1;background:#1d2733;border:1px solid #2c3947;border-radius:10px;padding:12px 16px;cursor:pointer}
button:active{transform:scale(.98)}
button.primary{background:#136a4f;border-color:#1b8b68}
button.rec{background:#7a1f1f;border-color:#a33}
button:disabled{opacity:.5}
.holdrow{display:flex;gap:10px;margin:12px 0}
.holdrow button{flex:1;padding:20px 8px;font-weight:600}
#drillNote{font-size:72px;font-weight:800;text-align:center;color:#f0b429;margin:8px 0}
#drillLive{text-align:center;font-size:26px;font-weight:700;height:34px}
#drillLive.ok{color:#4fd1a5}#drillLive.warn{color:#f0b429}#drillLive.bad{color:#ef5350}
#drillStatus{text-align:center;color:#9aa7b5;margin-bottom:8px}
.drillbtns{display:flex;gap:10px;justify-content:center;margin-top:8px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chips button{padding:7px 12px;border-radius:999px;font-size:13px}
.chips button.sel{background:#136a4f;border-color:#1b8b68}
input[type=search],textarea{width:100%;font:inherit;color:#e8ecf1;background:#12171e;border:1px solid #2c3947;border-radius:10px;padding:10px 12px}
textarea{resize:vertical;min-height:64px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 4px;border-bottom:1px solid #1a212b}
.row .sub{font-size:12px;margin-top:2px}
.b{font-size:11px;padding:4px 8px;border-radius:999px;background:#1d2733;white-space:nowrap}
.b.ok{background:#10382c;color:#5fe0b2}.b.warn{background:#3a3010;color:#f0c14b}.b.bad{background:#3a1512;color:#f08a80}
#tabs{display:flex;border-top:1px solid #1d232c;background:#0b0e12}
#tabs button{flex:1;background:none;border:none;border-radius:0;padding:11px 2px 13px;color:#66788a;font-size:12px}
#tabs button.sel{color:#4fd1a5}
.gate{position:fixed;inset:0;background:#0e1116;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:50;text-align:center;padding:24px}
.gate h1{font-size:44px}
.err{color:#ef5350;font-size:13px}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:40;transition:opacity .5s}
table.stats{width:100%;border-collapse:collapse;font-size:13px}
table.stats td,table.stats th{padding:6px 4px;border-bottom:1px solid #1a212b;text-align:left;color:#c9d3de}
table.stats th{color:#66788a;font-weight:600;font-size:11px;text-transform:uppercase}
#advice{white-space:pre-wrap;line-height:1.55}
.toast{position:fixed;bottom:76px;left:50%;transform:translateX(-50%);background:#26313f;padding:10px 16px;border-radius:10px;font-size:14px;z-index:60;opacity:0;transition:opacity .25s}
.toast.show{opacity:1}