:root{--bg:#071019;--sidebar:#09141e;--panel:#0d1a25;--panel-2:#101f2b;--line:#1e3443;--text:#edf7fb;--muted:#8096a4;--cyan:#38d7ff;--green:#37dfa0;--amber:#ffbf4b;--red:#ff6074;--violet:#9d83ff;--shadow:0 18px 50px rgba(0,0,0,.26);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 74% 0%,rgba(28,124,163,.1),transparent 28%),var(--bg);color:var(--text);font-size:16px;min-width:320px}.app-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:24px 16px 16px;border-right:1px solid var(--line);background:rgba(7,17,26,.94);display:flex;flex-direction:column;z-index:10}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;padding:0 8px 30px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#0d6484,#38d7ff);box-shadow:0 0 24px rgba(56,215,255,.25);font-weight:900;font-size:1.3rem;color:#061019}.brand strong,.brand small,.user-card strong,.user-card small,.collector-health strong,.collector-health small{display:block}.brand small,.user-card small,.collector-health small{font-size:.72rem;color:var(--muted);margin-top:2px}.nav-list{display:grid;gap:7px}.nav-item{width:100%;border:0;background:transparent;color:#8ca1ae;border-radius:10px;padding:12px 13px;font:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:22px 1fr auto;align-items:center;transition:.2s}.nav-item:hover{background:#10212d;color:var(--text)}.nav-item.active{background:linear-gradient(90deg,rgba(56,215,255,.17),rgba(56,215,255,.04));color:var(--cyan);box-shadow:inset 3px 0 var(--cyan)}.nav-item b{font-size:.7rem;padding:3px 6px;border-radius:20px;background:#173040;color:#9fb3bf}.nav-item b.danger{background:rgba(255,96,116,.15);color:var(--red)}.nav-item b.warning{background:rgba(255,191,75,.15);color:var(--amber)}.sidebar-footer{margin-top:auto;border-top:1px solid var(--line);padding-top:14px}.collector-health{display:flex;gap:10px;align-items:center;padding:12px 9px}.pulse-dot{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 5px rgba(55,223,160,.1),0 0 15px rgba(55,223,160,.6);flex:0 0 auto}.user-card{border:0;background:#0d1c27;width:100%;padding:10px;border-radius:11px;color:inherit;display:grid;grid-template-columns:34px 1fr auto;align-items:center;text-align:left;cursor:pointer}.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#214052;color:var(--cyan);font-weight:800;font-size:.75rem}.topbar{height:88px;border-bottom:1px solid var(--line);padding:0 32px;display:flex;justify-content:space-between;align-items:center;background:rgba(7,16,25,.78);backdrop-filter:blur(18px);position:sticky;top:0;z-index:8}.topbar h1,.section-heading h2{font-size:1.45rem;margin:4px 0 0;letter-spacing:-.03em}.eyebrow{font-size:.67rem;font-weight:800;letter-spacing:.14em;color:#688494;margin:0}.topbar-actions{display:flex;gap:14px;align-items:center}.client-picker{display:flex;align-items:center;gap:10px;background:#0c1a25;border:1px solid var(--line);border-radius:9px;padding:8px 11px;color:var(--muted);font-size:.75rem}.client-picker select,.toolbar select,.time-select{border:0;background:transparent;color:var(--text);font:inherit;outline:0}.live-state{display:flex;align-items:center;gap:10px;min-width:112px}.live-state strong,.live-state small{display:block}.live-state strong{font-size:.76rem}.live-state small{font-size:.66rem;color:var(--muted)}.icon-button,.mobile-menu{border:1px solid var(--line);background:#0c1a25;color:var(--cyan);width:38px;height:38px;border-radius:10px}.mobile-menu{display:none}.content{padding:28px 32px 42px;max-width:1720px;margin:0 auto}.view{display:none}.view.active{display:block;animation:fade .25s ease}@keyframes fade{from{opacity:0;transform:translateY(4px)}}.status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.metric-card,.panel,.client-card,.access-card,.table-panel{background:linear-gradient(145deg,rgba(16,32,43,.94),rgba(10,24,34,.96));border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.metric-card{min-height:116px;padding:18px;display:flex;gap:13px;align-items:center;position:relative;overflow:hidden}.metric-card>div:nth-child(2){min-width:92px}.metric-card span,.metric-card small{color:var(--muted);display:block;font-size:.75rem}.metric-card strong{display:block;font-size:1.7rem;line-height:1.1;margin:5px 0}.metric-card small em{font-style:normal;color:var(--green)}.metric-card mark{background:transparent;color:var(--red)}.metric-icon{width:39px;height:39px;border-radius:10px;display:grid;place-items:center;font-weight:900}.metric-icon.cyan{background:rgba(56,215,255,.12);color:var(--cyan)}.metric-icon.green{background:rgba(55,223,160,.12);color:var(--green)}.metric-icon.amber{background:rgba(255,191,75,.12);color:var(--amber)}.metric-icon.violet{background:rgba(157,131,255,.12);color:var(--violet)}.mini-ring{margin-left:auto;width:50px;height:50px;border-radius:50%;background:conic-gradient(var(--cyan) calc(var(--value)*1%),#18303d 0);display:grid;place-items:center;font-size:.67rem!important;color:var(--text)!important;position:relative}.mini-ring:before{content:"";position:absolute;inset:5px;background:#0e1e29;border-radius:50%}.mini-ring{isolation:isolate}.mini-ring:after{content:""}.mini-ring{font-weight:800}.mini-ring::first-line{z-index:2}.spark{height:44px;margin-left:auto;display:flex;gap:3px;align-items:end}.spark i{width:4px;border-radius:3px;background:var(--green)}.spark i:nth-child(1){height:35%}.spark i:nth-child(2){height:58%}.spark i:nth-child(3){height:40%}.spark i:nth-child(4){height:75%}.spark i:nth-child(5){height:63%}.spark i:nth-child(6){height:90%}.spark i:nth-child(7){height:78%}.amber-spark i{background:var(--amber)}.text-button{border:0;background:transparent;color:var(--cyan);font-weight:700;font-size:.74rem;cursor:pointer;margin-left:auto}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr);gap:16px}.panel{padding:20px}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.panel h2{font-size:1rem;margin:5px 0}.legend{display:flex;gap:14px;color:var(--muted);font-size:.66rem}.legend span{display:flex;gap:5px;align-items:center}.legend i{width:6px;height:6px;border-radius:50%}.legend .ok{background:var(--green)}.legend .warn{background:var(--amber)}.legend .down{background:var(--red)}.topology{width:100%;height:280px;margin-top:3px}.links path{fill:none;stroke:url(#lineFade);stroke-width:2;stroke-dasharray:5 5;animation:dash 12s linear infinite}@keyframes dash{to{stroke-dashoffset:-100}}.node rect,.small-node rect{fill:#102330;stroke:#244150;stroke-width:1}.node.central rect{fill:#0e2a38;stroke:var(--cyan)}.node.central circle{fill:var(--cyan)}.node text,.small-node text{fill:#d9e9ef;font-size:10px;font-weight:700}.node .sub,.small-node .sub{fill:#6f8997;font-size:8px;font-weight:500}.green-fill{fill:var(--green)}.amber-fill{fill:var(--amber)}.small-node text{text-anchor:middle}.warning-node rect{stroke:var(--amber)}.critical-panel{min-height:350px}.alert-feed{display:grid;margin-top:10px}.alert-row{display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:center;padding:13px 0;border:0;border-bottom:1px solid rgba(40,66,81,.62);background:transparent;color:inherit;text-align:left;cursor:pointer}.alert-row:hover{transform:translateX(3px)}.alert-row strong,.alert-row small{display:block}.alert-row strong{font-size:.78rem}.alert-row small,.alert-row time{font-size:.66rem;color:var(--muted)}.severity{font-size:.55rem;font-weight:900;letter-spacing:.06em;padding:5px;border-radius:5px;text-align:center}.severity.critical{color:var(--red);background:rgba(255,96,116,.11)}.severity.warning{color:var(--amber);background:rgba(255,191,75,.11)}.dependency-note{display:flex;gap:10px;align-items:center;background:rgba(56,215,255,.05);border:1px solid rgba(56,215,255,.13);border-radius:9px;padding:10px;margin-top:13px;color:var(--cyan)}.dependency-note p{font-size:.66rem;color:var(--muted);margin:0;line-height:1.45}.dependency-note strong{color:#b5d7e2}.bottom-grid{display:grid;grid-template-columns:1.55fr .75fr;gap:16px;margin-top:16px}.traffic-total{text-align:right}.traffic-total strong,.traffic-total small{display:block}.traffic-total small{color:var(--muted);font-size:.65rem}.chart-wrap{display:grid;grid-template-columns:36px 1fr;margin-top:8px}.chart-wrap svg{width:100%;height:180px}.axis{display:flex;flex-direction:column;justify-content:space-between;font-size:.6rem;color:var(--muted);padding-bottom:8px}.grid{stroke:#203642;stroke-width:1}.area{fill:url(#area)}.line{fill:none;stroke:var(--cyan);stroke-width:2}.x-labels{grid-column:2;display:flex;justify-content:space-between;color:var(--muted);font-size:.58rem}.period,.mode-badge{border:1px solid var(--line);padding:6px 9px;border-radius:7px;color:var(--muted);font-size:.65rem}.site-list>div{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;border-bottom:1px solid rgba(40,66,81,.55);padding:14px 0}.site-list>div:last-child{border-bottom:0}.status-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font-size:.7rem}.status-icon.ok{background:rgba(55,223,160,.1);color:var(--green)}.status-icon.warn{background:rgba(255,191,75,.1);color:var(--amber)}.site-list p,.site-list strong,.site-list small{margin:0;display:block}.site-list strong{font-size:.75rem}.site-list small{font-size:.65rem;color:var(--muted);margin-top:3px}.site-list b{font-size:.75rem}.amber-text{color:var(--amber)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:6px 0 24px;gap:20px}.section-heading p:last-child{color:var(--muted);font-size:.82rem;margin:7px 0 0}.primary-button,.secondary-button{border:0;border-radius:9px;padding:11px 15px;font-weight:800;cursor:pointer}.primary-button{background:var(--cyan);color:#06131b}.secondary-button{background:#142937;color:#bed0d8;border:1px solid #294354}.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.client-card{padding:22px;display:grid;grid-template-columns:48px 1fr;gap:16px}.client-logo{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-weight:900}.client-logo.cyan{background:rgba(56,215,255,.13);color:var(--cyan)}.client-logo.violet{background:rgba(157,131,255,.13);color:var(--violet)}.client-logo.amber{background:rgba(255,191,75,.13);color:var(--amber)}.health-label{color:var(--green);font-size:.56rem;font-weight:900;letter-spacing:.09em}.health-label i{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:4px}.critical-label{color:var(--red)}.warning-label{color:var(--amber)}.client-card h3{font-size:1rem;margin:5px 0}.client-card p{margin:0;color:var(--muted);font-size:.72rem}.client-card dl{grid-column:1/-1;margin:8px 0 0;display:grid;grid-template-columns:repeat(3,1fr);padding-top:16px;border-top:1px solid var(--line)}.client-card dl div+div{border-left:1px solid var(--line);padding-left:15px}.client-card dt,.access-card dt{font-size:.62rem;color:var(--muted)}.client-card dd,.access-card dd{font-size:.75rem;font-weight:800;margin:5px 0 0}.red-text{color:var(--red)}.toolbar{display:flex;gap:10px;margin-bottom:12px}.search{flex:1;display:flex;align-items:center;gap:10px}.search,.toolbar select,.time-select{background:#0d1a25;border:1px solid var(--line);border-radius:9px;padding:10px 12px}.search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.78rem}.table-panel{overflow:auto}.table-panel table{width:100%;border-collapse:collapse;min-width:850px}.table-panel th,.table-panel td{text-align:left;padding:14px 18px;border-bottom:1px solid rgba(40,66,81,.55);font-size:.76rem}.table-panel th{font-size:.63rem;color:var(--muted);letter-spacing:.05em}.table-panel td strong,.table-panel td small{display:block}.table-panel td small{color:var(--muted);font-size:.63rem;margin-top:4px}.table-status{display:inline-flex!important;padding:5px 8px;border-radius:20px;font-weight:800}.table-status.online{background:rgba(55,223,160,.1);color:var(--green)}.table-status.warning{background:rgba(255,191,75,.1);color:var(--amber)}.table-status.offline{background:rgba(255,96,116,.1);color:var(--red)}.monitor-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.monitor-grid h3{font-size:1rem;margin:5px 0 24px}.gauge-row{display:flex;justify-content:space-around}.gauge{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) calc(var(--gauge)*1%),#1b3442 0);position:relative}.gauge:before{content:"";position:absolute;inset:9px;border-radius:50%;background:#0e1d28}.gauge strong,.gauge span{z-index:1;position:absolute}.gauge strong{font-size:1.1rem;transform:translateY(-6px)}.gauge span{color:var(--muted);font-size:.64rem;transform:translateY(12px)}.amber-gauge{background:conic-gradient(var(--amber) calc(var(--gauge)*1%),#1b3442 0)}.red-gauge{background:conic-gradient(var(--red) calc(var(--gauge)*1%),#1b3442 0)}.link-stat{display:grid;grid-template-columns:1fr auto;gap:5px;margin:18px 0}.link-stat span,.link-stat b{font-size:.74rem}.link-stat progress{grid-column:1/-1;width:100%;height:5px;accent-color:var(--green)}.link-stat.degraded progress{accent-color:var(--amber)}.big-ratio strong{font-size:3rem;color:var(--cyan)}.big-ratio span{color:var(--muted)}.camera-bars{display:flex;gap:4px;margin:18px 0}.camera-bars span{height:8px;background:linear-gradient(90deg,var(--green) var(--bar),#213744 var(--bar));border-radius:5px;flex:1}.camera-card small{color:var(--amber)}.channel-chips{display:flex;gap:8px}.channel-chips span{border:1px solid rgba(55,223,160,.3);background:rgba(55,223,160,.08);color:var(--green);padding:8px 11px;border-radius:8px;font-size:.7rem}.alert-board{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}.board-title{display:flex;justify-content:space-between;align-items:center}.board-title h3{font-size:1rem}.board-title b{background:#183140;padding:4px 8px;border-radius:20px;font-size:.66rem}.board-alert{display:grid;gap:6px;margin-top:12px;padding:14px;background:#0a1721;border-radius:9px;border-left:3px solid var(--line)}.board-alert span{font-size:.58rem;font-weight:900;color:var(--muted)}.board-alert strong{font-size:.78rem}.board-alert small{font-size:.66rem;color:var(--muted)}.critical-border{border-color:var(--red)}.critical-border span{color:var(--red)}.warning-border{border-color:var(--amber)}.warning-border span{color:var(--amber)}.recovered{border-color:var(--green)}.recovered span{color:var(--green)}.ack-button{justify-self:start;margin-top:4px;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--cyan);padding:6px 9px;font-size:.66rem;cursor:pointer}.mode-badge{color:var(--amber);border-color:rgba(255,191,75,.3);background:rgba(255,191,75,.06);font-weight:900;letter-spacing:.06em}.access-list{display:grid;gap:12px}.access-card{padding:18px;display:grid;grid-template-columns:48px minmax(180px,1fr) minmax(420px,2fr) auto;gap:18px;align-items:center}.unknown-icon{width:44px;height:44px;border-radius:12px;background:rgba(157,131,255,.1);color:var(--violet);display:grid;place-items:center;font-weight:900;font-size:1.2rem}.device-summary span{font-size:.57rem;color:var(--amber);font-weight:900}.device-summary h3{font-size:.92rem;margin:5px 0}.device-summary p{font-size:.68rem;color:var(--muted);margin:0}.access-card dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0}.access-actions{display:flex;gap:8px}.deny:hover{color:var(--red);border-color:var(--red)}.toast{position:fixed;right:24px;bottom:24px;background:#142936;border:1px solid #315264;border-radius:10px;padding:13px 17px;color:var(--text);box-shadow:var(--shadow);font-size:.78rem;transform:translateY(25px);opacity:0;pointer-events:none;transition:.25s;z-index:30}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1150px){.status-strip{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}.client-grid,.monitor-grid{grid-template-columns:1fr 1fr}.alert-board{grid-template-columns:1fr}.access-card{grid-template-columns:48px 1fr auto}.access-card dl{grid-column:2/-1}.access-actions{grid-column:3;grid-row:1}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;left:-250px;width:240px;transition:.25s}.sidebar.open{left:0;box-shadow:20px 0 60px #000}.topbar{height:auto;min-height:80px;padding:14px 18px}.mobile-menu{display:block;margin-right:10px}.topbar>div:nth-child(2){margin-right:auto}.topbar-actions .client-picker,.topbar-actions .icon-button{display:none}.content{padding:20px 16px}.status-strip,.client-grid,.monitor-grid{grid-template-columns:1fr}.metric-card{min-height:100px}.legend{display:none}.topology{height:230px}.section-heading{align-items:flex-start;flex-direction:column}.toolbar{flex-wrap:wrap}.search{flex-basis:100%}.access-card{grid-template-columns:44px 1fr}.access-card dl{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:14px}.access-actions{grid-column:1/-1;grid-row:auto}.access-actions button{flex:1}.client-picker{display:none}.live-state{min-width:auto}.live-state span:last-child{display:none}}