:root { --bg: #f7f7f8; --fg: #1b1c1f; --muted: #6b6f78; --card: #fff; --line: #e3e4e8; --ok: #1f8a4c; --busy: #c0392b; --ring: #d68910; --pause: #7d5fff; }
@media (prefers-color-scheme: dark) { :root { --bg: #15161a; --fg: #e8e9ec; --muted: #9a9ea8; --card: #1e2026; --line: #2c2f36; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 14px/1.4 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
header { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
main { padding: 16px; max-width: 1200px; margin: 0 auto; }
form { max-width: 320px; display: grid; gap: 10px; }
input, button { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); }
.pill { padding: 2px 8px; border-radius: 999px; background: var(--line); font-size: 12px; }
.pill.on { background: var(--ok); color: #fff; }
.muted { color: var(--muted); }
.err { color: var(--busy); }
.pbx { margin-bottom: 24px; }
.queues { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.q { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.q h3 { margin: 0 0 6px; font-size: 15px; }
.nums { display: flex; gap: 12px; font-variant-numeric: tabular-nums; }
.agents { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.a { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--line); }
.a.free { background: var(--ok); color: #fff; }
.a.busy { background: var(--busy); color: #fff; }
.a.ring { background: var(--ring); color: #fff; }
.a.paused { background: var(--pause); color: #fff; }