:root{--primary:#3B82F6;--primaryDark:#2563EB;--urgent:#EF4444;--high:#F59E0B;--success:#10B981;--surface:#F9FAFB;--white:#fff;--bg:#F3F4F6;--on:#111827;--muted:#6B7280;--mutedL:#9CA3AF;--border:#E5E7EB;--jeeves:#475569;--rick:#14B8A6;--watson:#8B5CF6;--pepper:#F97316;--cray:#2563EB}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;color:var(--on);background:var(--bg)}
a{color:var(--primaryDark);text-decoration:none}
.top{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.top .logo{font-weight:700}
.top .cap{color:var(--muted);font-size:12.5px}
.top .sp{flex:1}
.statebar{display:flex;gap:6px;flex-wrap:wrap;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.statebar button{border:1px solid var(--border);background:var(--white);border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer}
.statebar button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn{border:1px solid var(--border);background:var(--white);border-radius:8px;padding:7px 12px;font-size:13.5px;cursor:pointer;color:var(--on);min-height:36px}
.btn.pri{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.red{color:var(--urgent);border-color:#FCA5A5}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn:hover{filter:brightness(.97)}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill.ok{background:#D1FAE5;color:#047857}.pill.bad{background:#FEE2E2;color:#B91C1C}.pill.warn{background:#FEF3C7;color:#92400E}.pill.mute{background:var(--bg);color:var(--muted)}.pill.blue{background:#DBEAFE;color:#1D4ED8}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;flex:none}
.card{background:var(--white);border:1px solid var(--border);border-radius:12px}
.muted{color:var(--muted)}.small{font-size:12.5px}
.spin{width:12px;height:12px;border:2px solid #BFDBFE;border-top-color:var(--primary);border-radius:50%;animation:sp 0.9s linear infinite;display:inline-block;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.reset{font-size:12px;color:var(--muted);cursor:pointer;background:none;border:none}
@media(max-width:700px){.top{flex-wrap:wrap}.top .cap{order:9;flex-basis:100%;font-size:12px}.desk{display:none!important}}
@media(min-width:701px){.mob{display:none!important}}