:root{--bg:#f1f5f9;--card:#fff;--fg:#0f172a;--muted:#64748b;--line:#e2e8f0;--pri:#2563eb;--ok:#16a34a;--bad:#dc2626;--warn:#d97706}
@media (prefers-color-scheme:dark){:root{--bg:#0b1220;--card:#131c2e;--fg:#e5e7eb;--muted:#94a3b8;--line:#243049;--pri:#3b82f6}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[hidden]{display:none!important}
h1{font-size:22px;margin:0 0 16px}h2{font-size:16px;margin:0 0 12px}
.muted{color:var(--muted)}.small{font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.narrow{max-width:360px;margin:12vh auto 0}
label{display:block;margin:0 0 12px;font-size:13px;color:var(--muted)}
input,select{display:block;width:100%;margin-top:4px;padding:10px 12px;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px}
.error{color:var(--bad);min-height:1.4em;margin:8px 0 0}
.btn{font:inherit;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.btn:hover:not(:disabled){border-color:var(--pri)}.btn:disabled{opacity:.45;cursor:default}
.btn.small{padding:6px 10px;font-size:13px}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.call{background:var(--ok);border-color:var(--ok);color:#fff;flex:1}
.btn.hang{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.on{background:var(--warn);border-color:var(--warn);color:#fff}
header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:13px;background:var(--bg);border:1px solid var(--line)}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.s-online i{background:var(--ok)}.s-connecting i{background:var(--warn);animation:blink 1s infinite}
.s-offline i,.s-authfail i,.s-replaced i{background:var(--bad)}
@keyframes blink{50%{opacity:.3}}
.banner{margin:12px 16px 0;padding:10px 14px;border-radius:10px;background:#fef3c7;color:#78350f;border:1px solid #fcd34d}
.banner.bad{background:#fee2e2;color:#7f1d1d;border-color:#fca5a5}
.layout{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:16px;padding:16px;max-width:900px;margin:0 auto}
@media(max-width:720px){.layout{grid-template-columns:1fr}}
.screen{min-height:120px;text-align:center;padding:8px 0 12px}
.big{font-size:28px;font-weight:600;letter-spacing:.5px;word-break:break-all;min-height:36px}
.timer{font-variant-numeric:tabular-nums;font-size:20px;margin-top:4px}
.quality{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-top:6px}
.quality i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.quality.mid i{background:var(--warn)}.quality.low i{background:var(--bad)}
.meter{height:6px;margin:10px auto 0;max-width:200px;background:var(--line);border-radius:3px;overflow:hidden}
.meter b{display:block;height:100%;width:0;background:var(--ok);transition:width .08s}
.number{text-align:center;font-size:20px;margin-bottom:12px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.keypad button{font:inherit;font-size:20px;padding:14px 0;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.keypad button:active{background:var(--line)}
.row{display:flex;gap:8px;align-items:center}.row.wrap{flex-wrap:wrap}
.row.wrap .btn{flex:1 1 40%}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--fg);padding:20px;min-width:300px}
dialog::backdrop{background:#0006}
.history{list-style:none;margin:0;padding:0;max-height:50vh;overflow:auto}
.history li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.history .miss{color:var(--bad)}