:root{--bg:#08101c;--bg2:#0d1726;--panel:#111d2e;--panel2:#0d1828;--line:#223047;--text:#e9f0f7;--muted:#8796aa;--accent:#5dd6b5;--accent2:#78a9ff;--warn:#ffbd6b;--bad:#ff6f7d;--shadow:0 20px 60px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}body{margin:0;background:radial-gradient(circle at 80% -10%,rgba(82,126,204,.14),transparent 35%),var(--bg);min-height:100vh}button,input{font:inherit}.app-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:26px 18px;border-right:1px solid var(--line);background:rgba(8,16,28,.92);backdrop-filter:blur(18px);display:flex;flex-direction:column}.brand-row{display:flex;gap:12px;align-items:center;padding:0 8px 30px}.brand-row strong,.brand-row span{display:block}.brand-row strong{font-size:18px}.brand-row span{font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.brand-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06111a;font-weight:900;font-size:24px;box-shadow:0 10px 30px rgba(93,214,181,.18)}.brand-mark.small{width:38px;height:38px;border-radius:12px;font-size:18px}.nav-list{display:flex;flex-direction:column;gap:7px}.nav-item{appearance:none;border:0;background:transparent;color:var(--muted);text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer;display:flex;gap:12px;align-items:center}.nav-item:hover,.nav-item.active{background:#142238;color:var(--text)}.nav-item.active{box-shadow:inset 3px 0 var(--accent)}.sidebar-footer{margin-top:auto;padding:18px 9px 4px;border-top:1px solid var(--line)}.system-dot{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--muted)}.system-dot i{width:8px;height:8px;border-radius:50%;background:#65748a;box-shadow:0 0 0 4px rgba(101,116,138,.12)}.system-dot i.ok{background:var(--accent);box-shadow:0 0 0 4px rgba(93,214,181,.12)}.system-dot i.bad{background:var(--bad)}.version{font-size:11px;color:#536176;margin-top:8px}.main{padding:28px 34px 50px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:20px}.topbar h1{margin:3px 0 0;font-size:28px}.eyebrow{font-size:10px;letter-spacing:.17em;color:#6f819b;font-weight:800}.top-actions{display:flex;align-items:center;gap:9px}.last-refresh{font-size:12px;color:var(--muted);margin-right:5px}.user-chip{padding:8px 11px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:#b8c4d4}.btn{border:1px solid transparent;border-radius:9px;padding:9px 13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btn:disabled{opacity:.5;cursor:wait}.btn-primary{background:linear-gradient(135deg,var(--accent),#51c4e5);color:#07131c;font-weight:800}.btn-secondary{background:#16243a;border-color:#263b58;color:var(--text)}.btn-ghost{background:transparent;border-color:var(--line);color:var(--muted)}.btn-link{background:transparent;color:var(--accent);padding:6px}.full{width:100%;margin-top:18px}.view{display:none}.view.active{display:block}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:15px}.metric-card,.panel,.capability,.hero-panel{background:linear-gradient(180deg,rgba(18,31,49,.96),rgba(13,24,40,.96));border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.metric-card{padding:19px}.metric-label{font-size:12px;color:var(--muted)}.metric-value{font-size:32px;font-weight:800;margin:7px 0 2px;letter-spacing:-.03em}.metric-sub,.subline{font-size:11px;color:#687990}.layout-2{display:grid;grid-template-columns:2fr 1fr;gap:15px;margin-bottom:15px}.telemetry-layout{grid-template-columns:1.25fr 1fr}.panel{padding:20px;min-width:0}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}.panel-head h2,.hero-panel h2{font-size:17px;margin:4px 0 0}.panel-head p{margin:8px 0 0;max-width:760px}.pill{font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:6px 9px;border:1px solid #275d56;background:#102f2a;color:#7ee4c8;border-radius:999px;white-space:nowrap}.pill.warning{border-color:#6e542f;background:#352819;color:#ffd293}.health-stack{display:flex;flex-direction:column}.health-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(34,48,71,.7);font-size:13px}.health-row:last-child{border-bottom:0}.status-good{color:var(--accent)}.status-warn{color:var(--warn)}.status-bad{color:var(--bad)}.status-badge{font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:5px 8px;border-radius:999px}.status-badge.on{background:#12352f;color:#73e0c2}.status-badge.stale{background:#392e1d;color:#ffc978}.status-badge.off{background:#2b2f38;color:#8f9aaa}.table-wrap{overflow:auto;margin:0 -4px;padding:0 4px}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#667890;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:12px 10px;border-bottom:1px solid rgba(34,48,71,.56);vertical-align:top;white-space:nowrap}tbody tr:hover{background:rgba(255,255,255,.018)}.muted{color:var(--muted)}.center{text-align:center}.bar-chart{height:205px;display:flex;gap:7px;align-items:flex-end;padding:12px 3px 2px;overflow-x:auto}.bar-col{height:100%;min-width:34px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}.bar{width:18px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--accent),#3e7cd5);box-shadow:0 8px 20px rgba(93,214,181,.12)}.bar-value{font-size:9px;color:#aec0d1}.bar-label{font-size:9px;color:#64758b;transform:rotate(-45deg);transform-origin:center;white-space:nowrap;margin-top:8px}.empty-state{width:100%;display:grid;place-items:center;color:var(--muted);font-size:12px;min-height:150px}.hero-panel{padding:26px;display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.hero-panel p{color:var(--muted);max-width:770px;line-height:1.6}.capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.capability{padding:20px}.capability h3{font-size:15px;margin:12px 0 7px}.capability p{color:var(--muted);font-size:12px;line-height:1.55;min-height:56px}.cap-icon{font-size:20px;color:var(--accent2)}.login-body{display:grid;place-items:center;background:radial-gradient(circle at 50% 0,rgba(93,214,181,.10),transparent 34%),var(--bg)}.login-shell{width:min(430px,calc(100% - 32px));display:grid;justify-items:center;gap:18px}.login-card{width:100%;padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.login-card h1{margin:5px 0;font-size:26px}.login-card form{display:grid;gap:8px;margin-top:20px}.login-card label{font-size:11px;color:#8fa0b5;margin-top:8px}.login-card input{width:100%;border:1px solid #2c3c55;border-radius:9px;background:#0b1523;color:var(--text);padding:11px 12px;outline:none}.login-card input:focus{border-color:#4d8ea2;box-shadow:0 0 0 3px rgba(93,214,181,.08)}.alert{padding:10px 12px;border-radius:9px;margin-top:15px;font-size:12px}.alert-danger{background:#3b1f28;color:#ff9cab;border:1px solid #66303d}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.layout-2,.telemetry-layout{grid-template-columns:1fr}.capability-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:14px}.brand-row{padding:0 4px 12px}.nav-list{display:grid;grid-template-columns:repeat(4,1fr)}.nav-item{font-size:11px;padding:9px;justify-content:center}.nav-item span{display:none}.sidebar-footer{display:none}.main{padding:20px 14px 40px}.topbar{align-items:flex-start}.top-actions{flex-wrap:wrap;justify-content:flex-end}.last-refresh,.user-chip{display:none}.metric-grid{grid-template-columns:1fr 1fr}.capability-grid{grid-template-columns:1fr}.hero-panel{align-items:flex-start;gap:12px}.bar-col{min-width:30px}}