:root{--bg:#0a0e1a;--surface:#141b2d;--surface-2:#1a2236;--sidebar:#0c111f;--sidebar-2:#121a2e;--sidebar-line:#232c44;--sidebar-text:#b3bcd6;--sidebar-name:#fff;--sidebar-hover:#ffffff0d;--line:#232c44;--text:#e7ebf5;--muted:#8893ad;--muted-2:#5f6b88;--primary:#6366f1;--primary-soft:rgba(99,102,241,.16);--in:#34d399;--out:#fb7185;--occ:#818cf8;--amber:#fbbf24;--shadow:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);--shadow-lg:0 12px 32px rgba(0,0,0,.45)}[data-theme=light]{--bg:#f4f6fb;--surface:#fff;--surface-2:#f6f8fc;--line:#e7eaf1;--text:#1e2433;--muted:#64748b;--muted-2:#94a0b5;--primary-soft:rgba(99,102,241,.12);--shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);--sidebar:#fff;--sidebar-2:#fff;--sidebar-line:#e7eaf1;--sidebar-text:#475569;--sidebar-name:#1e2433;--sidebar-hover:rgba(99,102,241,.08)}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,system-ui,-apple-system,Roboto,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}.app{display:grid;grid-template-columns:244px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));color:var(--sidebar-text);display:flex;flex-direction:column;padding:20px 14px;position:-webkit-sticky;position:sticky;top:0;height:100vh;border-right:1px solid var(--sidebar-line)}.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 18px}.logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#8b86f7);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;box-shadow:0 4px 14px rgba(99,102,241,.5)}.brand .name{font-size:15px;font-weight:700;color:var(--sidebar-name);line-height:1.15}.brand .tag{font-size:11px;color:var(--muted-2)}.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);padding:12px 10px 6px}.cam-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:0;color:var(--sidebar-text);text-align:left;cursor:pointer;padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:600;margin-bottom:2px}.cam-btn:hover{background:var(--sidebar-hover);color:var(--sidebar-name)}.cam-btn.active{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.45)}.cam-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--in);margin-right:9px}.cam-btn .net{font-size:11px;font-weight:700;opacity:.9}.cam-btn .label{display:flex;align-items:center}.side-foot{margin-top:auto;font-size:11px;color:var(--muted-2);padding:14px 10px 2px;border-top:1px solid var(--sidebar-line);line-height:1.7}.main{padding:24px 30px 36px;min-width:0}.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}.topbar h1{font-size:21px;margin:0;font-weight:700;letter-spacing:-.01em;color:var(--text)}.topbar .sub{color:var(--muted);font-size:13px;margin-top:3px}.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:3px;box-shadow:var(--shadow)}.seg button{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:6px 14px;border-radius:7px;font-size:13px;font-weight:600}.seg button.active{background:var(--primary);color:#fff}.kpis{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:16px;gap:16px;margin-bottom:18px}.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}.kpi .top{display:flex;align-items:center;justify-content:space-between}.kpi .label{color:var(--muted);font-size:12px;font-weight:600}.kpi .icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px}.kpi .value{font-size:30px;font-weight:800;margin-top:10px;letter-spacing:-.02em}.kpi .hint{color:var(--muted);font-size:12px;margin-top:3px}.kpi.in .icon{background:rgba(52,211,153,.18)}.kpi.in .icon,.kpi.in .value{color:var(--in)}.kpi.out .icon{background:rgba(251,113,133,.18)}.kpi.out .icon,.kpi.out .value{color:var(--out)}.kpi.net .icon{background:var(--primary-soft)}.kpi.net .icon,.kpi.net .value{color:var(--occ)}.kpi.peak .icon{background:rgba(251,191,36,.18);color:var(--amber)}.kpi.peak .value{color:var(--amber);font-size:24px}.theme-toggle{background:var(--surface);border:1px solid var(--line);color:var(--text);width:38px;height:36px;border-radius:9px;cursor:pointer;font-size:16px;box-shadow:var(--shadow);display:grid;place-items:center}.theme-toggle:hover{border-color:var(--primary);color:var(--primary)}.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 18px 10px;margin-bottom:18px;box-shadow:var(--shadow)}.card h3{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--text)}.card .csub{color:var(--muted);font-size:12px;margin-bottom:12px}.grid2{display:grid;grid-template-columns:1fr 1fr;grid-gap:18px;gap:18px}.empty{color:var(--muted);padding:60px 20px;text-align:center;line-height:1.7;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.empty code{background:var(--primary-soft);color:#aab0ff;padding:2px 7px;border-radius:5px}.badge-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--in);font-weight:600}.badge-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--in);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 1.8s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}to{box-shadow:0 0 0 0 rgba(52,211,153,0)}}@media (max-width:1000px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--sidebar-line)}.side-foot{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}