:root{--navy: #0c1222;--navy-2: #121a2f;--navy-3: #1a2540;--ink: #152033;--paper: #f3f5f8;--card: #ffffff;--line: #e4e9f0;--muted: #667085;--accent: #2f6fed;--accent-2: #1d4ed8;--good: #0f9d73;--warn: #d97706;--bad: #dc4c4c;--human: #7c5cbf;--shadow: 0 10px 30px rgba(15, 23, 42, .06);--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;color:var(--ink);background:var(--paper);font-family:IBM Plex Sans,system-ui,sans-serif;font-size:14px}h1,h2,h3,.brand,.display{font-family:Instrument Sans,IBM Plex Sans,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.app{display:grid;grid-template-columns:260px 1fr;min-height:100%}.sidebar{background:radial-gradient(1200px 400px at -10% -10%,rgba(47,111,237,.28),transparent 50%),linear-gradient(180deg,var(--navy) 0%,#0a1020 100%);color:#d7deea;padding:22px 14px;display:flex;flex-direction:column;gap:18px}.brand{display:flex;align-items:center;gap:12px;padding:4px 10px 12px}.mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(180deg,#4d8bff,#1d4ed8);display:grid;place-items:center;color:#fff;font-weight:700;letter-spacing:.02em;box-shadow:0 8px 20px #2f6fed59;position:relative}.mark:after{content:"";position:absolute;right:5px;bottom:6px;width:7px;height:7px;background:#3ee0a5;border-radius:50%;box-shadow:0 0 0 2px #1d4ed8}.brand small{display:block;color:#8b97ad;font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.brand strong{display:block;color:#fff;font-size:16px}.nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow:auto}.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:#b7c2d4}.nav a:hover{background:#ffffff0d;color:#fff}.nav a.active{background:#2f6fed38;color:#fff}.nav svg{width:16px;height:16px;opacity:.9}.nav-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6f7c93;padding:14px 12px 6px}.side-foot{padding:12px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06)}.side-foot .ok{color:#3ee0a5;font-size:12px}.workspace{display:flex;flex-direction:column;min-width:0}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:#f3f5f8e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}.page{padding:22px 24px 40px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.page-head h1{margin:0;font-size:26px;letter-spacing:-.03em}.page-head p{margin:6px 0 0;color:var(--muted)}.grid{display:grid;gap:14px}.g-4{grid-template-columns:repeat(4,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-2{grid-template-columns:1.4fr 1fr}.g-inbox{grid-template-columns:320px 1fr 280px;min-height:calc(100vh - 120px)}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card-h{padding:14px 16px 0;display:flex;justify-content:space-between;align-items:center}.card-h h3{margin:0;font-size:14px}.card-b{padding:14px 16px 16px}.stat{padding:16px 18px}.stat .k{color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.stat .v{font-size:28px;font-weight:650;letter-spacing:-.03em;margin-top:6px;font-family:Instrument Sans,sans-serif}.stat .s{color:var(--muted);margin-top:4px;font-size:12px}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:600;background:#eef2f8;color:#334155}.badge.good{background:#e8f8f2;color:#0b7a59}.badge.warn{background:#fff4e5;color:#b45309}.badge.bad{background:#fdecec;color:#b42318}.badge.blue{background:#e8effc;color:#1d4ed8}.badge.human{background:#f1eafc;color:#6d28d9}.btn{border:0;background:var(--accent);color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:550}.btn:hover{background:var(--accent-2)}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn.ghost:hover{background:#eef2f7}.btn.danger{background:var(--bad)}.btn.small{padding:6px 9px;font-size:12px}.btn:disabled{opacity:.5;cursor:not-allowed}.input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff}textarea{min-height:88px;resize:vertical}label.field{display:grid;gap:6px;font-size:12px;color:var(--muted);font-weight:550}.table{width:100%;border-collapse:collapse}.table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}.table td{padding:11px 12px;border-bottom:1px solid #eef1f6;vertical-align:top}.table tr:hover td{background:#f8fafc}.empty{padding:28px 16px;text-align:center;color:var(--muted)}.loading{color:var(--muted);padding:18px}.list{display:flex;flex-direction:column}.item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid #eef1f6;cursor:pointer}.item:hover,.item.active{background:#f4f7fb}.item .meta{color:var(--muted);font-size:12px}.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px;flex:none}.dot.off{background:#cbd5e1}.thread{display:flex;flex-direction:column;height:calc(100vh - 132px)}.msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(#f7f9fc,#fff)}.bubble{max-width:72%;padding:10px 12px;border-radius:14px;line-height:1.45}.bubble.in{background:#fff;border:1px solid var(--line);align-self:flex-start}.bubble.out{background:#1e3a8a;color:#fff;align-self:flex-end}.bubble .t{display:block;font-size:11px;opacity:.65;margin-top:6px}.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.login{min-height:100%;display:grid;place-items:center;background:radial-gradient(800px 400px at 10% 0%,rgba(47,111,237,.35),transparent 55%),var(--navy);color:#fff}.login-card{width:420px;background:#10192c;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px;box-shadow:0 30px 80px #00000059}.login-card h1{margin:8px 0 6px}.login-card p{color:#9aa8c0;margin:0 0 22px}.login-card .input{background:#0c1322;color:#fff;border-color:#243049}.err{color:#fca5a5;font-size:13px;margin:8px 0}.bars{display:flex;align-items:flex-end;gap:8px;height:140px}.bar{flex:1;background:#dbe7fb;border-radius:8px 8px 2px 2px;position:relative}.bar span{position:absolute;bottom:0;left:0;right:0;background:var(--accent);border-radius:inherit}.bar em{display:block;text-align:center;font-size:10px;color:var(--muted);margin-top:6px;font-style:normal}.toggle{display:flex;background:#eef2f7;border-radius:10px;padding:3px}.toggle button{flex:1;border:0;background:transparent;padding:7px;border-radius:8px;cursor:pointer}.toggle button.on{background:#fff;box-shadow:var(--shadow);font-weight:600}.notice{background:#fff8e8;border:1px solid #f3e2b8;color:#8a5b12;padding:10px 12px;border-radius:10px;font-size:13px}@media(max-width:1100px){.app{grid-template-columns:84px 1fr}.brand strong,.brand small,.nav span,.side-foot,.nav-label{display:none}.g-4,.g-3,.g-2,.g-inbox{grid-template-columns:1fr}}