@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}}
.auth-shell{background:radial-gradient(circle at 20% 20%,#163941 0,#0000 35%),#071117;grid-template-columns:1.1fr .9fr;min-height:100vh;display:grid}.auth-panel{border-right:1px solid var(--line);padding:clamp(40px,9vw,140px)}.auth-panel h1{max-width:610px;margin:25px 0 16px;font-size:clamp(34px,4vw,58px);line-height:1.04}.auth-panel .sub{max-width:540px;font-size:15px;line-height:1.7}.auth-panel ul{margin:40px 0;padding:0;list-style:none}.auth-panel li{border-bottom:1px solid var(--line);color:#c7d5d4;padding:12px 0}.auth-panel li:before{content:"✓";color:var(--green);margin-right:10px}.auth-card{border:1px solid var(--line);background:#0d1b21;border-radius:12px;align-self:center;width:min(440px,100% - 48px);margin:auto;padding:32px}.auth-card h2{margin:8px 0;font-size:28px}.auth-card form{gap:18px;margin-top:28px;display:grid}.auth-card label{color:#b6c5c5;gap:7px;font-size:11px;font-weight:700;display:grid}.auth-card input,.directory-tools input{color:var(--ink);background:#09151b;border:1px solid #31434a;border-radius:6px;outline:none;padding:12px}.auth-card .new-alert{width:100%;padding:12px}.form-error{color:#ff918c;margin:0;font-size:11px}.auth-note{color:#82999d;margin:22px 0 0;font-size:10px;line-height:1.55}.toast{color:#b4d7d2;background:#0c2429;border:1px solid #214a4c;border-radius:6px;margin:16px 38px -6px;padding:9px 12px;font-size:10px}.sync{color:#9eb1b1;font:10px DM Mono}.card-copy{color:#9bb0b2;line-height:1.7}.action-row{gap:9px;margin-top:20px;display:flex}.outline{color:#c7d7d5;cursor:pointer;background:0 0;border:1px solid #3c565b;border-radius:6px;padding:9px 12px;font-size:10px;font-weight:700}.directory{margin:0 38px}.directory-tools{justify-content:space-between;gap:12px;margin-bottom:16px;display:flex}.directory-tools input{width:260px}.company-row{border-top:1px solid var(--line);color:#b5c5c6;grid-template-columns:1.5fr 1fr .5fr .8fr auto;align-items:center;gap:13px;padding:14px 6px;font-size:11px;display:grid}.company-row strong,.company-row small{display:block}.company-row strong{color:#e9f3f0}.company-row small{color:#799095;margin-top:4px;font-size:9px}.company-row.selected{background:#10282d;border-radius:6px;margin:0 -8px;padding-left:14px;padding-right:14px}.tag{color:#a8d3ce;background:#13272c;border:1px solid #35565a;border-radius:20px;padding:4px 8px;font:9px DM Mono;display:inline-block}.subnav{gap:7px;padding:15px 38px 0;display:flex;overflow:auto}.subnav button{white-space:nowrap;color:#9bb1b2;cursor:pointer;background:#0d1b21;border:1px solid #2a4146;border-radius:20px;padding:7px 10px;font-size:10px}.subnav button.active{color:var(--green);background:#17363a;border-color:#39716b}.network-row{border-top:1px solid var(--line);grid-template-columns:12px 1fr auto auto;align-items:center;gap:12px;padding:16px 3px;display:grid}.network-row:first-of-type{margin-top:12px}.network-row small{color:#809699;margin-top:4px;font-size:9px;display:block}.network-row>span{color:var(--green);font-size:10px}.network-row>b{color:#d4e2df;font:11px DM Mono}.topology-list{text-align:center;justify-items:center;gap:9px;padding:18px;display:grid}.topology-list>b{background:#12262c;border:1px solid #3c6967;border-radius:6px;padding:8px 14px;font-size:10px}.topology-list>div{gap:8px;display:flex}.topology-list>div b{border:1px solid #405063;border-radius:5px;padding:7px;font-size:9px}.access-grid{grid-template-columns:.8fr 1.2fr}.role-list{gap:7px;margin-top:17px;display:grid}.role{color:#a8bbbd;text-align:left;cursor:pointer;background:#0c191f;border:1px solid #30454a;border-radius:6px;padding:10px}.role.active{color:var(--green);background:#123138;border-color:#397a70}.permissions{margin:5px 0;padding:10px 0;list-style:none}.permissions li{border-bottom:1px solid var(--line);color:#c7d6d4;padding:10px 0}.sync-panel{margin:0 38px}.sync-step{border-bottom:1px solid var(--line);grid-template-columns:34px 1fr auto;align-items:center;gap:14px;padding:19px 0;display:grid}.sync-step>b{width:26px;height:26px;color:var(--green);background:#15393a;border-radius:50%;place-items:center;display:grid}.sync-step strong{font-size:12px}.sync-step p{color:#829a9e;margin:4px 0 0;font-size:10px}.empty-state{text-align:center;margin:0 38px;padding:60px}.empty-state>span{color:var(--green);font-size:30px}.empty-state h2{margin:12px 0 7px}.empty-state p{color:#91a8aa;margin-bottom:22px}@media (max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-panel{padding:45px}.auth-card{margin-bottom:45px}.directory,.sync-panel,.empty-state{margin-left:16px;margin-right:16px}.subnav{padding-left:16px;padding-right:16px}.access-grid{grid-template-columns:1fr}.company-row{grid-template-columns:1.4fr 1fr .6fr auto}.company-row>span:nth-child(4){display:none}}@media (max-width:600px){.auth-panel{padding:35px 25px}.auth-card{width:calc(100% - 32px);padding:24px}.toast{margin-left:16px;margin-right:16px}.directory-tools{flex-direction:column}.directory-tools input{width:100%}.company-row{grid-template-columns:1fr auto}.company-row>span{display:none}.network-row{grid-template-columns:10px 1fr auto}.network-row>b{display:none}.sync-step{grid-template-columns:30px 1fr}.sync-step .tag{display:none}}