:root{--ink:#1b2530;--mute:#5f6e7b;--paper:#eef1f3;--card:#fff;--line:#cfd6dc;--head:#1d3557;--accent:#1f6f8b;--ok:#1b7f4b;--warn:#b86e00;--bad:#b3261e}
*{box-sizing:border-box}
body{margin:0;font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--paper)}
header{background:var(--head);color:#fff;padding:8px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
header b{font-size:16px}
header a{color:#cfe3f1}
main{max-width:1200px;margin:14px auto;padding:0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:12px;margin-bottom:12px}
h3{margin:0 0 8px;font-size:15px}
button{padding:7px 12px;border:1px solid transparent;border-radius:4px;background:var(--accent);color:#fff;font:inherit;cursor:pointer}
button:hover{filter:brightness(1.12)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #5aa7c2;outline-offset:1px}
button.alt{background:#5b6b78}button.bad{background:var(--bad)}button.ok{background:var(--ok)}button.warn{background:var(--warn)}
button.sm{padding:3px 8px;font-size:12px}
input,select,textarea{padding:6px 8px;border:1px solid var(--line);border-radius:4px;font:inherit;background:#fff;color:var(--ink);min-width:0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:12px;font-weight:600;background:#e1e6ea;color:#33414c}
.pill.ready,.pill.connected{background:#d5eedf;color:#14633f}
.pill.on_call{background:#d3e4f6;color:#1b4f93}
.pill.wrap,.pill.dialing{background:#fbe6c4;color:#8a4b08}
.pill.off{background:#f6d6d3;color:#8f1d16}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:6px 7px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mute);font-weight:600;white-space:nowrap}
.scroll{overflow-x:auto}
.mute{color:var(--mute)}.err{color:var(--bad)}
.tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.tabs button{background:#dde3e8;color:var(--ink)}.tabs button.on{background:var(--head);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 10px}
.grid label{display:flex;flex-direction:column;font-size:12px;color:var(--mute);gap:2px}
.grid input,.grid select,.grid textarea{width:100%;color:var(--ink)}
.span{grid-column:1/-1}
.big{font-size:18px;font-weight:600}
.num{font-variant-numeric:tabular-nums}