@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--navy:#0b1628;--navy2:#111f35;--ink:#162237;--muted:#718096;--line:#e4e9f1;--bg:#f5f7fb;--card:#fff;--blue:#2864dc;--blue2:#3b82f6;--green:#19a974;--red:#e35160;--amber:#efa72c;--radius:16px;--shadow:0 6px 24px rgba(21,38,68,.07)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;background:var(--navy);color:#b6c1d3;padding:27px 18px 20px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:#fff;padding:0 8px 27px}.brand>span:last-child{display:flex;flex-direction:column}.brand strong{font:800 19px/1 'Manrope',sans-serif;letter-spacing:-.4px}.brand small{font-size:9px;color:#7890b0;text-transform:uppercase;letter-spacing:1.3px;margin-top:6px}.brand-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(145deg,#4385f5,#215bcc);display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:8px;box-shadow:0 8px 20px rgba(29,91,220,.35)}.brand-mark span{width:4px;border-radius:4px;background:white}.brand-mark span:nth-child(1){height:9px;opacity:.7}.brand-mark span:nth-child(2){height:17px}.brand-mark span:nth-child(3){height:13px;opacity:.85}.brand-mark.large{width:42px;height:42px}.sidebar nav{flex:1}.nav-label{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#576b88;margin:21px 12px 8px;font-weight:700}.sidebar nav a{height:43px;border-radius:10px;padding:0 12px;margin:3px 0;display:flex;align-items:center;gap:11px;font-size:13px;font-weight:600;transition:.2s}.sidebar nav a:hover{color:#fff;background:rgba(255,255,255,.045)}.sidebar nav a.active{background:linear-gradient(90deg,#245cc5,#2f6fe8);color:#fff;box-shadow:0 7px 18px rgba(30,83,188,.28)}.nav-icon{width:20px;text-align:center;font-size:18px}.sidebar-foot{border-top:1px solid rgba(255,255,255,.08);padding-top:16px}.system-chip{display:flex;gap:9px;align-items:center;padding:8px}.system-chip>div{display:flex;flex-direction:column}.system-chip strong{font-size:11px;color:#dbe4ef}.system-chip small{font-size:9px;color:#68809f;margin-top:3px}.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#27c88b;box-shadow:0 0 0 5px rgba(39,200,139,.1);animation:pulse 2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(39,200,139,0)}}.logout{border:0;background:transparent;color:#7f91a9;padding:10px;width:100%;text-align:left;cursor:pointer;font-size:12px}.logout:hover{color:#fff}.main{margin-left:244px;min-height:100vh}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);padding:0 34px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}.topbar h1{font:700 20px/1.1 'Manrope';margin:3px 0 0;letter-spacing:-.3px}.eyebrow{margin:0;font-size:9px;color:#8290a5;text-transform:uppercase;letter-spacing:1.4px;font-weight:700}.top-actions{display:flex;align-items:center;gap:18px}.live-time{display:flex;align-items:center;gap:10px;border-right:1px solid var(--line);padding-right:18px}.live-time>div{display:flex;flex-direction:column}.live-time strong{font:700 12px 'Manrope'}.live-time small{font-size:9px;color:#93a0b2}.avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#eaf1ff;color:#285dc2;font-weight:800}.menu-button{display:none;background:none;border:0;font-size:24px}.content{padding:28px 34px 50px;max-width:1660px;margin:auto}.alert{min-height:46px;border-radius:12px;padding:10px 14px;margin-bottom:18px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}.alert>span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center}.alert button{margin-left:auto;border:0;background:transparent;font-size:20px;cursor:pointer}.alert.success{background:#eaf9f3;color:#127451}.alert.success>span{background:#c9f0df}.alert.error{background:#fff0f1;color:#ad3341}.alert.error>span{background:#fbd7db}.page-intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.page-intro h2{font:750 22px/1.2 'Manrope';letter-spacing:-.5px;margin:0}.page-intro p{font-size:12px;color:var(--muted);margin:6px 0 0}.btn{border:0;border-radius:10px;min-height:40px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,#3476eb,#245cc8);color:#fff;box-shadow:0 7px 16px rgba(41,101,215,.2)}.btn.dark{background:var(--navy2);color:#fff}.btn.ghost{background:#fff;border:1px solid var(--line);color:#354258}.btn.wide{width:100%;height:48px}.rotate{font-size:18px}.hero-status{background:linear-gradient(120deg,#13243b,#0e1b2d);border-radius:18px;color:#fff;padding:25px 28px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 12px 28px rgba(8,23,45,.16);overflow:hidden;position:relative}.hero-status:after{content:'';position:absolute;width:340px;height:340px;border:1px solid rgba(91,142,219,.12);border-radius:50%;right:20%;top:-160px;box-shadow:0 0 0 60px rgba(91,142,219,.025),0 0 0 120px rgba(91,142,219,.02)}.hero-device{display:flex;align-items:center;gap:16px;position:relative;z-index:1}.device-orb{width:54px;height:54px;border-radius:15px;background:rgba(61,119,217,.18);border:1px solid rgba(107,158,244,.22);display:grid;place-items:center;color:#70a3f7;font-size:25px;position:relative}.device-orb i{position:absolute;width:8px;height:8px;right:-2px;bottom:5px;border-radius:50%;background:#64748b;border:2px solid #13243b}.is-online .device-orb i,.device-card .device-orb i{background:#22c68a}.status-label{font-size:8px;letter-spacing:1.1px;color:#7f94af;font-weight:700;display:flex;align-items:center;gap:6px}.status-label b{width:6px;height:6px;border-radius:50%;background:#22c68a}.hero-device h3{font:700 17px 'Manrope';margin:5px 0}.hero-device p{font-size:11px;color:#8ea0b8;margin:0}.hero-device p span{padding:0 4px;color:#4f6683}.hero-metrics{display:flex;position:relative;z-index:1}.hero-metrics>div{padding:3px 28px;border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}.hero-metrics span{color:#7187a4;text-transform:uppercase;letter-spacing:.8px;font-size:8px}.hero-metrics strong{font:700 16px 'Manrope';margin-top:7px}.hero-metrics small{font-size:10px;color:#6f83a0}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:0 3px 14px rgba(30,48,77,.035);transition:.2s}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.stat-top{display:flex;justify-content:space-between;align-items:flex-start}.stat-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800}.stat-icon.blue{background:#eaf1ff;color:#2864dc}.stat-icon.green{background:#e7f8f2;color:#159a6b}.stat-icon.red{background:#fff0f1;color:#de4858}.stat-icon.amber{background:#fff6e6;color:#d68f16}.trend{background:#f1f4f8;border-radius:20px;padding:4px 7px;color:#8693a5;font-size:8px;font-weight:700}.trend.good{background:#e8f8f1;color:#168a63}.trend.bad{background:#fff0f1;color:#c94351}.trend.warn{background:#fff5df;color:#c78310}.stat-card>strong{display:block;font:800 27px 'Manrope';letter-spacing:-1px;margin-top:15px}.stat-card>p{font-size:12px;font-weight:700;margin:3px 0}.stat-card>small{font-size:9px;color:#8b98aa}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr .82fr;gap:16px}.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 3px 14px rgba(30,48,77,.035);overflow:hidden}.panel.span-2{grid-column:span 2}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding:19px 20px 15px;border-bottom:1px solid #edf0f4}.panel-head h3,.section-title h3{font:700 14px 'Manrope';margin:0}.panel-head p,.section-title p{font-size:9px;color:#8c99ab;margin:5px 0 0}.panel-head>a{font-size:10px;color:#2a64d3;font-weight:700;margin-top:3px}.port-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:17px}.port-grid.wide{grid-template-columns:repeat(6,1fr);padding:0}.port-tile{border:1px solid var(--line);border-radius:11px;padding:11px;background:#fafbfd}.port-tile>div{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center}.port-tile .dot{width:6px;height:6px;border-radius:50%;background:#b7c0ce}.port-tile.online .dot{background:#22b980}.port-tile b{font:700 11px 'Manrope'}.port-tile small{font-size:8px;color:#8d99a8;grid-column:2}.port-tile>strong{float:right;margin-top:-24px;font:700 11px 'Manrope';color:#536178}.port-tile>.meter{display:block;height:3px;background:#e8edf3;border-radius:4px;margin-top:10px;overflow:hidden}.port-tile>.meter i{display:block;height:100%;background:#2cb383;border-radius:4px}.port-tile.offline{opacity:.62}.donut-wrap{padding:25px 18px;display:flex;align-items:center;justify-content:space-around}.donut{width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--green) 0 var(--good),var(--amber) var(--good) calc(var(--good) + var(--weak)),#e6ebf1 0);display:grid;place-items:center;position:relative}.donut:after{content:'';position:absolute;width:88px;height:88px;background:#fff;border-radius:50%}.donut>div{z-index:1;text-align:center;display:flex;flex-direction:column}.donut strong{font:800 22px 'Manrope'}.donut small{font-size:9px;color:#8c98a8}.legend{min-width:100px}.legend p{font-size:9px;color:#78869a;margin:10px 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px}.legend i{width:7px;height:7px;border-radius:50%}.legend i.green{background:var(--green)}.legend i.amber{background:var(--amber)}.legend i.gray{background:#dfe5ec}.legend b{color:#344157}.mini-table{padding:3px 18px 10px}.mini-table>a{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid #edf0f4}.mini-table>a:last-child{border:0}.ont-badge{width:28px;height:28px;background:#edf3ff;color:#2a63ce;border-radius:8px;display:grid;place-items:center;font-size:9px;font-weight:800}.mini-table div{display:flex;flex-direction:column;flex:1}.mini-table b{font-size:9px}.mini-table small{font-size:8px;color:#8b98aa;margin-top:3px}.signal{font-size:9px;font-weight:700;color:#526178}.signal.weak{color:#ce8511}.signal.critical{color:#d94352}.timeline{padding:8px 18px 14px}.timeline>div{display:flex;gap:11px;position:relative;padding:9px 0}.timeline>div:not(:last-child):after{content:'';position:absolute;width:1px;height:18px;background:#e0e6ed;left:4px;bottom:-9px}.timeline i,.event i{width:9px;height:9px;border:2px solid white;box-shadow:0 0 0 1px #d4dce6;background:#5581d6;border-radius:50%;margin-top:3px;flex:none}.timeline i.success,.event.success i{background:#20af7c}.timeline i.danger,.event.danger i{background:#e35160}.timeline p{margin:0;display:flex;flex-direction:column}.timeline b{font-size:9px}.timeline small{font-size:8px;color:#8c98aa;margin-top:4px}.empty{padding:45px 20px;text-align:center;color:#8794a6}.empty span{display:block;font-size:28px;color:#b5c0ce}.empty h4{font:700 13px 'Manrope';margin:9px 0 4px;color:#46536a}.empty p{font-size:10px;margin:0}.empty.small{padding:20px}.device-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.device-banner{background:linear-gradient(120deg,#12233a,#172b46);color:#fff;padding:24px 28px;display:flex;justify-content:space-between;align-items:center}.device-actions{display:flex;gap:10px}.device-actions .ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#e3eaf4}.device-facts{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.device-facts>div{padding:17px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column}.device-facts span{font-size:8px;color:#8b98aa;text-transform:uppercase;letter-spacing:.8px}.device-facts strong{font:700 12px 'Manrope';margin-top:6px}.settings-form,.hardware-section{padding:24px 28px;border-bottom:1px solid var(--line)}.section-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:19px}.section-title>span{background:#eef3fb;color:#3e608e;font-size:8px;font-weight:800;padding:5px 8px;border-radius:6px}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.form-grid label,.login-form>label{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:#536177;font-weight:700}.form-grid label small{float:right;color:#9aa5b4;text-transform:none;letter-spacing:0;font-weight:500}.form-grid input,.login-form input,.filters input,.filters select{display:block;width:100%;height:42px;border:1px solid #dce2eb;border-radius:9px;background:#fafbfd;padding:0 12px;margin-top:7px;color:#1f2c40;outline:none;transition:.2s}.form-grid input:focus,.login-form input:focus,.filters input:focus,.filters select:focus{border-color:#6f9aeb;box-shadow:0 0 0 3px rgba(50,111,224,.09);background:#fff}.span-2{grid-column:span 2}.form-actions{text-align:right;margin-top:19px}.field-error,.inline-error{font-size:10px;color:#c6404e;background:#fff1f2;padding:9px 12px;border-radius:8px}.inline-error{margin:16px 28px 0}.hardware-section{border:0}.record-count{background:#eaf1ff;color:#2d63c9;font-size:10px;font-weight:700;border-radius:20px;padding:7px 11px}.table-panel{overflow:visible}.filters{padding:16px;display:flex;gap:10px;border-bottom:1px solid var(--line)}.filters .search{position:relative;min-width:330px;flex:1}.filters .search span{position:absolute;left:13px;top:10px;color:#8d99aa}.filters input,.filters select{height:38px;margin:0;background:#fff;font-size:10px}.filters .search input{padding-left:34px}.filters select{width:145px}.clear-filter{align-self:center;color:#738298;font-size:10px;text-decoration:underline}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}th{padding:11px 15px;text-align:left;background:#fafbfd;color:#7e8b9d;font-size:8px;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:13px 15px;border-bottom:1px solid #edf0f4;font-size:10px;color:#526075;white-space:nowrap}tbody tr:hover{background:#fbfcfe}td strong{display:block;color:#29364a;font-size:10px}td small{display:block;color:#9aa5b3;font-size:8px;margin-top:4px}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.3px}.interface{font:700 9px ui-monospace;background:#eef3fb;color:#3e608e;padding:5px 7px;border-radius:6px}.status-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:20px;font-size:8px;font-weight:700;background:#f0f2f5;color:#7b8798}.status-pill i{width:5px;height:5px;border-radius:50%;background:#9aa4b2}.status-pill.online{background:#e8f8f2;color:#12815b}.status-pill.online i{background:#18aa76}.status-pill.offline{background:#fff0f1;color:#bf3c4a}.status-pill.offline i{background:#dd4c5a}.pagination{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;color:#8995a6;font-size:9px}.pagination div{display:flex;align-items:center;gap:12px}.pagination a,.pagination .disabled{border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:#3d4b61}.pagination .disabled{opacity:.45}.pagination b{font-weight:600;color:#6d7a8d}.event{display:flex;align-items:center;gap:7px;color:#36445a;font-weight:600}.event i{margin:0}.details{max-width:340px;white-space:normal}.login-page{background:#fff}.login-grid{min-height:100vh;display:grid;grid-template-columns:48% 52%}.login-visual{margin:14px;border-radius:20px;background:radial-gradient(circle at 25% 80%,rgba(31,106,219,.34),transparent 28%),linear-gradient(145deg,#0c192b,#132947);position:relative;overflow:hidden;padding:38px 48px;color:#fff;display:flex;flex-direction:column}.login-visual:after{content:'';position:absolute;inset:-20%;background-image:linear-gradient(rgba(105,146,202,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(105,146,202,.05) 1px,transparent 1px);background-size:36px 36px;transform:perspective(500px) rotateX(58deg) translateY(20%)}.visual-brand{display:flex;align-items:center;gap:11px;z-index:2}.visual-brand strong{font:750 18px 'Manrope'}.visual-copy{z-index:2;margin-top:15vh;max-width:500px}.eyebrow.light{color:#65a0f4}.visual-copy h1{font:750 42px/1.13 'Manrope';letter-spacing:-1.7px;margin:14px 0}.visual-copy h1 em{font-style:normal;color:#5d9bfb}.visual-copy>p:last-child{color:#8fa4be;font-size:13px;line-height:1.7;max-width:410px}.network-art{position:absolute;width:340px;height:230px;right:-10px;bottom:28px;z-index:2;opacity:.78}.network-art svg{position:absolute;inset:0;width:100%;height:100%}.network-art path{stroke:#3a75cf;stroke-width:.35;stroke-dasharray:2 2;fill:none}.network-art .core{position:absolute;left:43%;top:38%;width:72px;height:72px;border-radius:50%;background:#173b70;border:1px solid #4f89dc;box-shadow:0 0 0 10px rgba(48,113,213,.09),0 0 35px rgba(41,110,216,.35);display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:2}.network-art .core span{width:5px;height:5px;background:#24c28a;border-radius:50%;position:absolute;top:12px}.network-art .core b{font-size:13px}.network-art .core small{font-size:7px;color:#8fb0df}.network-art>i{position:absolute;width:10px;height:10px;border:2px solid #5488d4;background:#102845;border-radius:50%;z-index:2;box-shadow:0 0 12px rgba(77,141,237,.5)}.visual-foot{position:absolute;bottom:28px;left:48px;z-index:3;color:#607b9e;font-size:8px;text-transform:uppercase;letter-spacing:1.4px}.login-form-wrap{display:grid;place-items:center;padding:50px}.login-form{width:100%;max-width:360px}.login-form h2{font:800 31px 'Manrope';letter-spacing:-1px;margin:9px 0 5px}.muted{font-size:12px;color:#8895a7;margin:0 0 27px}.login-form>label{display:block;margin-bottom:17px}.login-form input{height:46px;font-size:12px}.remember{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#7e8b9d;margin:3px 0 22px}.remember label{display:flex;align-items:center;gap:7px}.remember input{width:14px;height:14px;margin:0}.remember span{color:#29966e}.secure-note{text-align:center;color:#9ba6b5;font-size:8px;margin-top:16px}.mobile-brand{display:none}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.dashboard-grid .panel:last-child{grid-column:span 2}.port-grid{grid-template-columns:repeat(3,1fr)}.port-grid.wide{grid-template-columns:repeat(4,1fr)}.hero-metrics>div{padding:3px 15px}.form-grid{grid-template-columns:repeat(2,1fr)}.login-visual{padding:35px}.visual-copy h1{font-size:34px}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s;box-shadow:15px 0 40px rgba(0,0,0,.2)}.sidebar.open{transform:translateX(0)}.main{margin:0}.menu-button{display:block}.topbar{padding:0 18px;height:70px}.topbar>div:first-of-type{flex:1;margin-left:12px}.top-actions .live-time{display:none}.content{padding:20px 16px}.page-intro{align-items:flex-start;gap:12px}.hero-status{display:block;padding:20px}.hero-metrics{margin-top:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:17px}.hero-metrics>div:first-child{border-left:0;padding-left:0}.stat-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:15px}.dashboard-grid{display:block}.dashboard-grid .panel{margin-bottom:12px}.port-grid,.port-grid.wide{grid-template-columns:repeat(2,1fr)}.donut-wrap{justify-content:center;gap:25px}.device-banner{display:block}.device-actions{margin-top:20px}.device-facts{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.filters{flex-wrap:wrap}.filters .search{min-width:100%;flex-basis:100%}.filters select{flex:1}.pagination{display:block;text-align:center}.pagination div{justify-content:center;margin-top:10px}.login-grid{display:block}.login-visual{display:none}.login-form-wrap{min-height:100vh;padding:35px 24px}.mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:45px}.mobile-brand strong{font:800 18px 'Manrope'}}
@media(max-width:430px){.stat-grid{grid-template-columns:1fr}.hero-metrics{display:grid;grid-template-columns:1fr 1fr;gap:15px}.hero-metrics>div{border:0;padding:0}.hero-metrics>div:last-child{grid-column:span 2}.port-grid{grid-template-columns:1fr}.device-facts{grid-template-columns:1fr}.device-facts>div{border-right:0}.device-actions{display:grid}.filters select{min-width:100%}}