@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";
:root{--ink:#ecf3f3;--muted:#91a1a8;--line:#213139;--panel:#101d23;--green:#53dfad;--aqua:#57d4db;--orange:#ffb45b;--bg:#071117}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:Manrope,Arial,sans-serif;font-size:13px}.shell{background:radial-gradient(circle at 55% -20%,#123039 0,transparent 34%),var(--bg);min-height:100vh;display:flex}button,select,input{font:inherit;color:inherit}.sidebar{border-right:1px solid var(--line);background:#09151b;flex-direction:column;flex:none;width:244px;min-height:100vh;padding:25px 15px 18px;display:flex}.brand{letter-spacing:2px;align-items:center;gap:8px;padding:0 11px;font-size:22px;font-weight:800;display:flex}.brand-mark{border:2px solid var(--green);width:26px;height:26px;color:var(--green);clip-path:polygon(50% 0,100% 20%,100% 80%,50% 100%,0 80%,0 20%);place-items:center;font-size:16px;display:inline-grid}.brand-dot{color:var(--green)}.workspace,.eyebrow{letter-spacing:1.25px;color:#7e949a;font:500 10px DM Mono,monospace}.workspace{align-items:center;gap:7px;margin:38px 12px 15px;display:flex}.live-dot{background:var(--green);border-radius:50%;width:7px;height:7px;display:inline-block;box-shadow:0 0 0 4px #143e3b}.nav{color:#9fb1b5;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:center;gap:12px;width:100%;margin:2px 0;padding:11px 12px;font-weight:600;display:flex}.nav:hover,.nav.active{color:#f2fbfa;background:#163037}.nav.active{box-shadow:inset 2px 0 var(--green)}.nav-icon{text-align:center;width:16px;font-size:15px}.sidebar-bottom{margin-top:auto}.support{color:#a7b8bb;text-align:left;background:0 0;border:0;width:100%;padding:11px;font-weight:600}.operator{border-top:1px solid var(--line);align-items:center;gap:9px;padding:18px 5px 0;display:flex}.operator strong{font-size:11px;display:block}.operator small{color:var(--muted);font-size:10px}.operator>span{color:#829398;margin-left:auto}.avatar{background:linear-gradient(135deg,#2d8379,#285980);border-radius:50%;place-items:center;width:30px;height:30px;font-size:10px;font-weight:800;display:grid}.content{width:min(1430px,100vw - 244px);padding-bottom:28px}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:70px;padding:0 38px;display:flex}.crumb{color:#84989d;gap:9px;display:flex}.crumb strong{color:#dfe9e8}.top-actions{align-items:center;gap:11px;display:flex}.icon-button,.new-alert,.ghost{cursor:pointer;background:0 0;border:0}.icon-button{color:#a9bbbd;width:32px;height:32px;font-size:17px;position:relative}.bell i{background:#ff726f;border-radius:50%;width:5px;height:5px;position:absolute;top:4px;right:4px}.new-alert{background:var(--green);color:#072018;border-radius:6px;padding:9px 13px;font-size:11px;font-weight:800}.page-head{justify-content:space-between;align-items:flex-end;padding:34px 38px 23px;display:flex}.page-head h1{letter-spacing:-.6px;margin:8px 0 5px;font-size:25px}.sub{color:var(--muted);margin:0}.filters{gap:8px;display:flex}.filters select{color:#c6d3d3;background:#0e1c22;border:1px solid #31434a;border-radius:6px;padding:9px 28px 9px 11px;font-size:11px}.notice{background:linear-gradient(90deg,#0e292c,#0c2026);border:1px solid #1d5b59;border-radius:7px;align-items:center;gap:12px;margin:0 38px 20px;padding:12px 16px;display:flex}.notice>span{color:var(--aqua);font-size:18px}.notice strong{font-size:12px}.notice p{color:#9bb2b3;margin:3px 0 0;font-size:11px}.notice button{color:var(--green);white-space:nowrap;cursor:pointer;background:0 0;border:0;margin-left:auto;font-weight:700}.metrics{grid-template-columns:repeat(4,1fr);gap:13px;padding:0 38px 20px;display:grid}.metric,.panel{border:1px solid var(--line);background:linear-gradient(135deg,#112027,#0d191f);border-radius:8px}.metric{min-height:133px;padding:16px;position:relative}.metric-icon{float:right;border-radius:6px;place-items:center;width:28px;height:28px;font-size:15px;display:grid}.metric-icon.green{color:var(--green);background:#153f36}.metric-icon.blue{color:var(--aqua);background:#163847}.metric-icon.orange{color:var(--orange);background:#49341e}.metric-icon.purple{color:#b99cf7;background:#342c58}.metric p{clear:both;color:var(--muted);margin:18px 0 2px;font-size:11px}.metric>strong{letter-spacing:-1px;font-size:27px}.metric strong small{color:#98a7aa;margin-left:2px;font-size:12px}.metric>span{color:#77caaa;margin-top:3px;font-size:10px;display:block}.grid{grid-template-columns:1.13fr .87fr;gap:13px;padding:0 38px 20px;display:grid}.panel{padding:19px}.panel-title{justify-content:space-between;align-items:flex-start;display:flex}.panel-title h2{letter-spacing:-.3px;margin:5px 0 0;font-size:15px}.ghost{color:var(--green);padding:4px 0;font-size:10px;font-weight:700}.posture{min-height:255px}.posture-content{align-items:center;gap:38px;margin:18px 9px 12px;display:flex}.score{place-items:center;width:132px;height:132px;display:grid;position:relative}.score svg{width:132px;height:132px;transform:rotate(-90deg)}.score circle{fill:none;stroke-width:8px}.score-track{stroke:#20343a}.score-value{stroke:var(--green);stroke-linecap:round;stroke-dasharray:302;stroke-dashoffset:28px}.score>div{text-align:center;display:grid;position:absolute}.score strong{letter-spacing:-1px;font-size:31px}.score small{color:#94a8ac;font:8px DM Mono}.posture-list{flex:1}.line{margin:12px 0}.line>div{color:#b5c5c5;justify-content:space-between;font-size:10px;display:flex}.line b{color:#eef4f2}.line i,.health i{background:#203239;border-radius:8px;height:5px;margin-top:6px;display:block;overflow:hidden}.line em,.health em{border-radius:inherit;background:linear-gradient(90deg,#44cfa8,#65d7d9);height:100%;display:block}.quiet{color:#70858a;margin:13px 0 0;font-size:9px}.count{color:#b4c3c5;vertical-align:2px;background:#304047;border-radius:10px;padding:2px 5px;font:10px DM Mono}.alert{border-bottom:1px solid #213139;align-items:center;gap:10px;padding:15px 0;display:flex}.alert:last-child{border:0}.severity{border-radius:50%;align-self:flex-start;width:7px;height:7px;margin-top:6px}.severity.critical{background:#ff6f6b;box-shadow:0 0 0 4px #3e2629}.severity.warning{background:var(--orange);box-shadow:0 0 0 4px #3c301f}.severity.info{background:var(--aqua);box-shadow:0 0 0 4px #19383e}.alert div{flex:1}.alert strong{font-size:11px}.alert p{color:#81969a;margin:3px 0 0;font-size:9px}.alert button{color:#bbcbcb;cursor:pointer;background:0 0;border:1px solid #3b5056;border-radius:4px;padding:5px 8px;font-size:9px}.activity,.fleet{margin:0 38px 20px}.live{color:#94aaa9;align-items:center;gap:10px;font:10px DM Mono;display:flex}.live .ghost{margin-left:12px}.timeline{margin-top:14px}.event{grid-template-columns:52px 20px 1fr 24px;align-items:start;min-height:38px;display:grid;position:relative}.event:after{content:"";background:#2a3a40;width:1px;height:29px;position:absolute;top:13px;left:61px}.event:last-child:after{display:none}.event time{color:#81969b;padding-top:2px;font:10px DM Mono}.event-dot{z-index:1;background:#68dadb;border:2px solid #0f1c22;border-radius:50%;width:8px;height:8px;margin-top:3px}.event-dot.warning{background:var(--orange)}.event-dot.critical{background:#ff6f6b}.event b{letter-spacing:.7px;color:#aebebe;font:9px DM Mono}.event p{color:#d5dfdd;margin:2px 0;font-size:10px}.more{color:#809498;cursor:pointer;background:0 0;border:0}.fleet input{background:#0b171d;border:1px solid #30434a;border-radius:5px;outline:none;width:186px;padding:8px 10px;font-size:10px}.table{margin-top:16px}.tr{color:#a9babd;border-top:1px solid #203138;grid-template-columns:1.3fr 1.2fr .8fr .8fr .7fr;align-items:center;padding:12px 5px;font-size:10px;display:grid}.tr strong{color:#e1eae8;font-size:11px}.th{color:#74898e;border-top:0;padding-top:0;font:9px DM Mono}.status{border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block}.status.online{background:var(--green)}.status.degraded{background:var(--orange)}.status.offline{background:#7a8d91}.health{align-items:center;gap:6px;display:flex}.health i{width:38px;height:4px;margin:0}.health em{background:var(--green)}footer{color:#637a80;margin:6px 38px;font-size:9px}footer span{color:#35515a;margin:0 7px}@media (max-width:900px){.sidebar{width:60px;padding:20px 8px}.brand span:last-child,.workspace,.nav:not(.active){font-size:0}.brand{justify-content:center;padding:0}.nav{justify-content:center;padding:12px}.nav-icon{font-size:16px}.operator>div:not(.avatar),.operator>span,.support{display:none}.content{width:calc(100vw - 60px)}.metrics{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.page-head{flex-direction:column;align-items:flex-start;gap:16px}}@media (max-width:600px){.topbar,.page-head,.metrics,.grid,.activity,.fleet{margin-left:16px;margin-right:16px;padding-left:0;padding-right:0}.topbar{margin:0;padding:0}.filters{width:100%}.filters select{flex:1}.metrics{grid-template-columns:1fr 1fr}.notice{margin:0 16px 18px}.notice p{display:none}.notice button{font-size:9px}.posture-content{gap:8px}.posture-list{min-width:0}.tr{grid-template-columns:1.2fr 1fr .8fr}.tr span:nth-child(2),.tr span:nth-child(5),.th span:nth-child(2),.th span:nth-child(5){display:none}.page-head h1{font-size:21px}}
.network .sync{color:#9eb1b1;align-items:center;gap:8px;font:10px DM Mono;display:flex}.network .sync .live-dot{width:6px;height:6px}.network-notice{background:linear-gradient(90deg,#102c37,#0d2027);border-color:#285e75}.network-grid{grid-template-columns:1fr 1fr;gap:13px;margin:0 38px 20px;display:grid}.wan{border-bottom:1px solid #203139;grid-template-columns:12px 1fr .7fr .7fr;align-items:center;gap:10px;padding:16px 5px;display:grid}.wan:last-of-type{border-bottom:0}.wan-status{background:var(--green);border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #173e39}.wan strong{font-size:11px}.wan strong em{color:#0e291f;background:var(--green);border-radius:3px;margin-left:6px;padding:2px 4px;font:8px DM Mono}.wan p,.network-device p{color:#82969a;margin:3px 0;font-size:9px}.wan-stat small{color:#789095;font:8px DM Mono;display:block}.wan-stat b{font-size:11px}.topology{min-height:251px}.topology-map{flex-direction:column;align-items:center;height:176px;padding-top:9px;display:flex;position:relative}.top-node{z-index:2;text-align:center;color:#67dbce;background:#102027;border:1px solid #345158;border-radius:5px;min-width:92px;padding:6px;font-size:14px;position:relative}.top-node b{color:#e3eeee;margin-top:2px;font-size:9px;display:block}.top-node small{color:#91a7a8;font-size:8px;display:block}.internet{color:#84c4fc;border-color:#3e5871}.gateway{color:var(--green);border-color:#3d897a;margin-top:16px}.link{background:#36535b;width:1px;position:absolute}.link.v.one{height:18px;top:42px}.link.v.two{height:22px;top:102px}.top-branches{gap:12px;display:flex;position:absolute;top:124px}.switch{color:#86baff;border-color:#4c7090}.ap{color:#b9a5ff;border-color:#655d9c}.fleet-health,.incidents{min-height:250px}.network-device{border-bottom:1px solid #203139;grid-template-columns:30px 1fr auto 27px;align-items:center;gap:10px;padding:12px 0;display:grid}.network-device:last-child{border:0}.network-device strong{font-size:11px}.network-device>span:last-child{color:#dbe7e5;text-align:right;font:11px DM Mono}.device-square{border-radius:5px;place-items:center;width:27px;height:27px;display:grid}.gateway-bg{color:var(--green);background:#174038}.switch-bg{color:#8ebfff;background:#1c3449}.ap-bg{color:#c2a6ff;background:#352e57}.online-text,.warn-text{font-size:9px}.online-text{color:var(--green)}.warn-text{color:var(--orange)}.traffic{margin:0 38px 20px}.traffic-legend{color:#9baeb0;align-items:center;gap:12px;font-size:9px;display:flex}.traffic-legend span i{background:var(--green);border-radius:50%;width:6px;height:6px;margin-right:4px;display:inline-block}.traffic-legend span:nth-child(2) i{background:#79b9e6}.traffic-legend .ghost{margin-left:10px}.chart{height:180px;padding:15px 6px 0 44px;position:relative}.chart svg{background:repeating-linear-gradient(#0000 0 42px,#1e343b 43px);border-bottom:1px solid #264048;width:100%;height:130px}.chart-labels{color:#70888d;flex-direction:column;justify-content:space-between;height:130px;font:8px DM Mono;display:flex;position:absolute;top:15px;left:0}.chart-time{color:#70888d;justify-content:space-between;margin-top:5px;font:8px DM Mono;display:flex}@media (max-width:900px){.network-grid{grid-template-columns:1fr}.network .page-head,.network .network-metrics,.network .network-notice,.network-grid,.traffic{margin-left:16px;margin-right:16px}}@media (max-width:600px){.wan{grid-template-columns:10px 1fr .65fr}.wan-stat:last-child{display:none}.top-branches{gap:3px}.top-node{min-width:78px}.traffic-legend span{display:none}}