:root{--bg:#090d13;--panel:#101720;--panel2:#0d141c;--line:#202b37;--text:#edf4f7;--muted:#7f8d99;--cyan:#52d5ca;--green:#6ee7a8;--amber:#f4b869;--gold:#9a783d;--gold-light:#b99755;--red:#f47777;--side:72px;--side-open:232px}.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .24s ease}.app.sidebar-expanded{grid-template-columns:var(--side-open) minmax(0,1fr)}.sidebar{position:relative;align-self:stretch;min-height:100vh;height:auto;z-index:20;background:#0b1118;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px;overflow:hidden}.side-brand{height:38px;display:flex;align-items:center;gap:12px;padding:0 8px;font-size:15px;font-weight:700;white-space:nowrap}.side-brand .brand-mark{flex:0 0 auto}.side-nav{display:grid;gap:7px;margin-top:32px}.nav-item{appearance:none;border:0;background:transparent;color:#81909c;width:47px;height:43px;border-radius:10px;display:flex;align-items:center;gap:13px;padding:0 14px;font:500 12px/1 inherit;cursor:pointer;white-space:nowrap;text-align:left;transition:.18s ease}.sidebar-expanded .nav-item{width:100%}.nav-item:hover{background:#121c26;color:#d6e3e7}.nav-item.active{background:#122522;color:var(--cyan);box-shadow:inset 3px 0 0 var(--cyan)}.nav-icon{width:20px;min-width:20px;text-align:center;font-weight:700;font-size:15px}.nav-label{opacity:0;transform:translateX(-5px);transition:.16s ease;pointer-events:none}.sidebar-expanded .nav-label{opacity:1;transform:none}.side-foot{margin-top:auto;height:36px;display:flex;align-items:center;gap:12px;padding:0 15px;color:var(--muted);font-size:10px;white-space:nowrap}.status-orb{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex:0 0 auto}.collapse-btn{position:absolute;right:-1px;top:50%;width:22px;height:44px;border:1px solid var(--line);border-right:0;border-radius:9px 0 0 9px;background:#131c25;color:#91a0aa;cursor:pointer;font-size:20px}.sidebar-expanded .collapse-btn{transform:rotate(180deg)}.shell{width:100%;max-width:1800px;margin:auto;padding:0 24px 24px;min-width:0}.topbar>.brand{display:none}.mobile-menu{display:none}.view{display:none}.view.active{display:block}.placeholder-view{min-height:calc(100vh - 120px);padding-top:18px}.coming-panel{min-height:520px;border:1px solid var(--line);border-radius:16px;background:radial-gradient(circle at 50% 30%,#15242c 0,transparent 40%),linear-gradient(145deg,#111923,#0d141c);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.coming-icon{display:grid;place-items:center;width:58px;height:58px;border:1px solid #315b58;border-radius:16px;color:var(--cyan);font-size:22px;background:#10211f;margin-bottom:22px}.coming-panel h1{margin:0;font-size:28px}.coming-panel>p:not(.eyebrow){max-width:560px;color:var(--muted);font-size:13px;line-height:1.7}.coming-tag{margin-top:10px;border:1px solid #2d3d48;border-radius:999px;padding:7px 12px;color:#9baab4;font-size:10px}.mobile-scrim{display:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -30%,#14202b 0,transparent 42%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}.shell{width:min(1800px,100%);margin:auto;padding:0 24px 24px}.topbar{height:72px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:30px}.brand{font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #3b746f;border-radius:9px;color:var(--cyan);background:#10211f}.brand-logo{display:block;width:40px;height:40px;object-fit:contain;flex:0 0 auto}.host{display:flex;gap:10px;align-items:baseline;color:var(--muted);font-size:13px}.host strong{color:var(--text)}.top-meta{margin-left:auto;display:flex;gap:22px;align-items:center;color:var(--muted);font-size:12px}.top-meta b{color:#cbd5db}.live{color:var(--green)!important}.live i,.legend i,.service-list i,.quality-title i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #6ee7a817;margin-right:7px}.topbar time{color:#cbd5db}main{padding-top:18px}.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.kpi,.panel{background:linear-gradient(145deg,#111923,#0d141c);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px #0003}.kpi{padding:15px 16px;height:112px;position:relative;overflow:hidden}.kpi>span,.kpi small{display:block;color:var(--muted);font-size:11px}.kpi strong{display:block;font-size:24px;margin-top:7px;letter-spacing:-.04em}.kpi small{margin-top:3px}.spark{position:absolute;width:76px;height:30px;right:12px;bottom:13px}.spark svg,.mini-line svg{width:100%;height:100%;overflow:visible}.spark polyline,.mini-line polyline{fill:none;stroke:var(--gold-light);stroke-width:2;vector-effect:non-scaling-stroke}.spark.amber polyline,.mini-line.amber polyline{stroke:var(--gold)}.progress{height:3px;background:#25303b;border-radius:5px;margin-top:14px;overflow:hidden}.progress i{display:block;height:100%;background:var(--cyan)}.grid{display:grid;gap:12px;margin-top:12px}.main-grid{grid-template-columns:1.04fr 1.4fr}.detail-grid{grid-template-columns:1.3fr 1fr 1fr}.panel{padding:18px;min-width:0}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.eyebrow{font-size:9px;letter-spacing:.16em;color:var(--cyan);margin:0 0 5px}.panel h2{font-size:15px;margin:0;font-weight:600}.legend,.range,.muted,.healthy{font-size:10px;color:var(--muted)}.healthy{color:var(--green)}.cpu-panel{overflow:hidden}.cpu-content{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:center}.gauge{--p:38;width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--cyan) calc(var(--p)*1%),#22303c 0);padding:7px;flex:0 0 auto}.gauge:before{content:"";display:block;width:100%;height:100%;border-radius:50%;background:var(--panel2)}.gauge>div{position:absolute;width:98px;height:98px;margin-top:-98px;display:grid;place-content:center;text-align:center}.gauge strong{font-size:27px}.gauge span{font-size:10px;color:var(--muted)}.cores{display:grid;grid-template-columns:repeat(8,minmax(34px,1fr));gap:8px;flex:1;min-width:0}.core{text-align:center;color:#93a2ad;font-size:8px}.core-ring{--v:40;width:34px;height:34px;margin:0 auto 4px;border-radius:50%;background:conic-gradient(var(--cyan) calc(var(--v)*1%),#26313b 0);padding:3px;position:relative}.core-ring:before{content:"";display:block;width:100%;height:100%;border-radius:50%;background:#101820}.core-ring span{position:absolute;inset:0;display:grid;place-content:center;color:#dce7eb;font-size:9px}.core.active .core-ring:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold-light);right:-1px;top:2px;box-shadow:0 0 9px var(--gold-light);animation:pulse 1.2s infinite}.legend i{background:var(--gold-light);box-shadow:0 0 0 4px #b9975519}.net-values{display:flex;gap:28px;align-items:flex-end}.net-values>div:not(.totals){display:grid;grid-template-columns:auto auto;column-gap:6px;align-items:baseline}.net-values strong{font-size:23px}.net-values small{grid-column:1/3;color:var(--muted);font-size:9px}.down{color:var(--cyan)}.up{color:var(--green)}.totals{display:flex;margin-left:auto;gap:20px;font-size:10px;color:var(--muted)}.totals span{display:flex;flex-direction:column}.totals b{color:#d6e0e5;margin-top:3px}#trafficChart{width:100%;height:118px;margin-top:10px;display:block}.ip-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ip-row>div{display:flex;justify-content:space-between;background:#0a1118;border:1px solid #1b2732;padding:9px 11px;border-radius:8px;font-size:10px;color:var(--muted)}code{color:#bac8cf}.processes{grid-column:span 2}table{width:100%;border-collapse:collapse;font-size:10px}th{text-align:left;color:var(--muted);font-weight:500;padding:0 8px 9px}td{border-top:1px solid #1b2732;padding:9px 8px;color:#cbd6db}.proc{display:flex;align-items:center;gap:8px}.proc i{width:6px;height:6px;border-radius:50%;background:#43505b}.proc.active i{background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pulse 1.3s infinite}.status{color:var(--green)}.storage-list{display:grid;gap:12px}.storage-item header{display:flex;justify-content:space-between;font-size:10px}.storage-item header span{color:#cbd6db}.storage-item header b{color:var(--muted);font-weight:500}.bar{height:5px;background:#222d37;border-radius:4px;margin:7px 0 4px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green))}.storage-item small{font-size:9px;color:var(--muted)}.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quality-grid section{background:#0a1118;border:1px solid #1b2732;padding:12px;border-radius:10px}.quality-title{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#bcc9cf}.quality-title i{margin:0}.quality-title .warn{background:var(--amber);box-shadow:0 0 0 4px #f4b86917}.quality-grid strong{font-size:20px;display:block;margin:10px 0}.metrics{display:flex;gap:12px;font-size:9px;color:var(--muted)}.metrics b{color:#c5d1d6}.mini-line{height:25px;margin-top:10px}.services{grid-column:span 1}.service-list{display:grid}.service-list div{display:grid;grid-template-columns:15px 1fr auto;align-items:center;border-top:1px solid #1b2732;padding:9px 0;font-size:10px}.service-list div:first-child{border-top:0}.service-list i{width:6px;height:6px;margin:0}.service-list span{color:#cbd6db}.service-list b{font-weight:500;color:var(--muted)}footer{display:flex;justify-content:space-between;color:#53616c;font-size:9px;padding:15px 2px 0}@keyframes pulse{0%,100%{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,1fr)}.main-grid,.detail-grid{grid-template-columns:1fr 1fr}.cpu-panel,.network-panel,.processes{grid-column:span 2}.cores{grid-template-columns:repeat(4,minmax(46px,1fr))}}@media(max-width:720px){.app,.app.sidebar-expanded{display:block}.sidebar{position:fixed;left:0;top:0;width:232px;transform:translateX(-102%);transition:transform .22s ease;box-shadow:20px 0 60px #0008}.app.mobile-nav-open .sidebar{transform:none}.sidebar .nav-label{opacity:1;transform:none}.collapse-btn{display:none}.mobile-menu{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#101820;color:#cbd6db}.topbar>.brand{display:flex}.mobile-scrim{position:fixed;inset:0;z-index:15;background:#0008}.app.mobile-nav-open .mobile-scrim{display:block}.shell{padding:0 12px 18px}.topbar{height:auto;min-height:68px;flex-wrap:wrap;padding:12px 0}.host{display:none}.top-meta{width:100%;margin:0;justify-content:space-between;gap:6px}.kpis{grid-template-columns:1fr 1fr}.main-grid,.detail-grid{grid-template-columns:1fr}.cpu-panel,.network-panel,.processes{grid-column:auto}.cpu-content{grid-template-columns:1fr}.gauge{margin:auto}.cores{grid-template-columns:repeat(4,1fr);width:100%}.quality-grid{grid-template-columns:1fr}.ip-row{grid-template-columns:1fr}.totals{display:none}.kpi{height:105px}}

/* Typography baseline: teal card labels + white detail titles share one size. */
:root{--card-title-size:9px;--detail-font:"Aptos","Aptos Display","Segoe UI",Arial,sans-serif}
.eyebrow{font-size:var(--card-title-size);text-transform:uppercase}
.panel-head h2,.coming-panel h1{font-family:var(--detail-font);font-size:var(--card-title-size);line-height:1.35;font-weight:600;letter-spacing:.02em}