:root { --bg:#f4f6fa; --surface:#fff; --text:#17212b; --muted:#5b6876; --line:#d9e0e8; --brand:#1565c0; --on-brand:#fff; --error:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#10151b; --surface:#19212a; --text:#e6ebf0; --muted:#9dabb8; --line:#2d3945; --brand:#7db5f5; --on-brand:#0b2340; --error:#ffb4ab; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui,"Segoe UI",Roboto,sans-serif; }
input,select,button { font:inherit; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
button { cursor:pointer; }
button.primary { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
button.danger { color:var(--error); }
button:disabled { opacity:.5; cursor:default; }
.login { min-height:100vh; display:grid; place-items:center; padding:16px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; }
.login .card { width:100%; max-width:340px; display:grid; gap:12px; }
.login h1 { margin:0; color:var(--brand); font-size:24px; }
.login label { display:grid; gap:4px; }
header { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--line); }
header strong { color:var(--brand); font-size:18px; }
nav { display:flex; gap:4px; }
nav button { border-color:transparent; background:none; }
nav button.active { background:var(--bg); color:var(--brand); font-weight:600; }
.spacer { flex:1; }
#who { color:var(--muted); }
main { padding:16px; max-width:1200px; margin:auto; }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.inline { display:inline-flex; gap:6px; align-items:center; color:var(--muted); }
.table { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { color:var(--muted); font-weight:600; font-size:13px; }
tbody tr:last-child td { border-bottom:0; }
td small { display:block; color:var(--muted); }
td.actions { text-align:right; }
td.actions button { margin-left:6px; }
#player { width:100%; margin-bottom:12px; }
.pager { display:flex; gap:12px; justify-content:center; align-items:center; margin-top:12px; color:var(--muted); }
.error { color:var(--error); min-height:1em; margin:0; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.badge.good { background:#1f8f4e22; color:#1f8f4e; }
.badge.ok { background:#c9820022; color:#b5730a; }
.badge.poor { background:#b3261e22; color:#b3261e; }
.badge.muted { background:#8884; color:var(--muted); }
#callDetail { margin-top:16px; display:grid; gap:10px; }
#callDetail h2 { margin:0; font-size:16px; }
#callDetail .chips { display:flex; flex-wrap:wrap; gap:6px; }
#callDetail .transcript { white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; max-height:280px; overflow:auto; }
#callDetail .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#deviceAccess { margin-top:16px; }
#deviceAccess h2 { margin:0 0 8px; font-size:16px; }
#grantList { margin:0 0 12px; padding-left:18px; }