:root{--b:#0b3d91;--b2:#1d5fd1;--bg:#eef2f8;--ok:#1e8449;--warn:#d68910;--bad:#c0392b;--mut:#6b7385;--card:#fff}
*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:#1d2433}
header{background:linear-gradient(90deg,#0b3d91,#1d5fd1);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:16px}
header h1{font-size:20px;margin:0}header .sp{flex:1}header a{color:#dbe7ff;text-decoration:none;margin-inline-start:12px;font-size:14px}
header .clock{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
main{padding:14px 18px}.row{display:flex;gap:12px;flex-wrap:wrap}.card{background:var(--card);border-radius:12px;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:12px}
.tile{background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}.tile b{display:block;font-size:28px;color:var(--b);font-variant-numeric:tabular-nums}
.tile span{font-size:12.5px;color:var(--mut)}.tile.bad b{color:var(--bad)}.tile.ok b{color:var(--ok)}.tile.warn b{color:var(--warn)}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.q h3{margin:0 0 6px;font-size:15px;color:var(--b)}.q .big{font-size:40px;font-weight:700;line-height:1}.q .big.hot{color:var(--bad)}
.q .meta{font-size:12.5px;color:var(--mut);margin-top:4px}.pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;margin:2px 0 2px 4px;color:#fff}
.av{background:var(--ok)}.bz{background:#2e86c1}.rg{background:#8e44ad}.pa{background:var(--warn)}.un{background:#95a5a6}
.slbar{height:8px;background:#e6ebf3;border-radius:4px;overflow:hidden;margin-top:6px;position:relative}.slbar i{display:block;height:100%;background:var(--ok)}
.slbar u{position:absolute;top:-2px;bottom:-2px;width:2px;background:#333}
table{border-collapse:collapse;width:100%}th,td{padding:6px 8px;border-bottom:1px solid #edf0f5;text-align:right;font-size:13.5px}
th{background:#f3f6fb;color:#33415c;font-weight:600}tr.sel{background:#eaf2ff}tr:hover{background:#f7faff}
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px}
.ag{border-radius:10px;padding:8px 10px;color:#fff;font-size:13px;min-height:62px}.ag b{font-size:15px}.ag small{opacity:.9;display:block}
.ag.available{background:var(--ok)}.ag.busy{background:#2e86c1}.ag.ringing{background:#8e44ad}.ag.paused{background:var(--warn)}.ag.unavailable{background:#95a5a6}
.alerts li{margin:4px 0;font-size:13.5px}.ev{font-size:12.5px;color:#34495e;max-height:230px;overflow:auto}.ev div{border-bottom:1px dashed #e3e8f0;padding:2px 0}
button,.btn{background:var(--b2);color:#fff;border:0;border-radius:8px;padding:7px 12px;font-size:13.5px;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block}
button.alt{background:#5d6d7e}button.warn{background:var(--warn)}button.bad{background:var(--bad)}button.ok{background:var(--ok)}
input,select,textarea{font-family:inherit;font-size:13.5px;padding:6px 8px;border:1px solid #cdd5e3;border-radius:7px;background:#fff}
.grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:4px 10px;font-size:14px}.kv div:nth-child(odd){color:var(--mut)}
.steps li{font-size:13.5px;margin:3px 0}.badge{display:inline-block;background:#eaf2ff;color:var(--b);border-radius:6px;padding:1px 7px;font-size:12px;margin:1px}
.badge.red{background:#fdecea;color:var(--bad)}.badge.green{background:#e8f6ee;color:var(--ok)}.badge.amber{background:#fff4e0;color:#9a6400}
.pop{border:2px solid var(--b2)}.pop.ringing{animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(29,95,209,.25)}}
.rec{display:inline-flex;align-items:center;gap:6px;font-weight:600}.rec i{width:11px;height:11px;border-radius:50%;background:var(--bad);display:inline-block;animation:blink 1.2s infinite}
.rec.muted i{background:#999;animation:none}@keyframes blink{50%{opacity:.3}}
.note{background:#fff7e0;border:1px solid #f1d48a;padding:7px 10px;border-radius:8px;font-size:13px}
.empty{color:var(--mut);text-align:center;padding:30px}