:root{
  color-scheme:dark;font-family:Tahoma,"Segoe UI",sans-serif;color:#e7edf8;
  --bg:#070d18;--surface:#101a2a;--surface2:#0b1422;--line:#223249;
  --text:#e7edf8;--muted:#8fa0b8;--blue:#67a9ff;--mint:#48dfbd;
  --violet:#aa94ff;--amber:#f4bf68;--danger:#ff7b89;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:22px}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 82% 0%,rgba(42,88,139,.17),transparent 37%),var(--bg);color:var(--text)}
button,input{font:inherit}button{cursor:pointer}[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.login-view{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 30%,rgba(64,153,205,.14),transparent 55%)}
.login-card{width:min(100%,440px);padding:clamp(24px,5vw,40px);border:1px solid #2b405a;border-radius:26px;background:linear-gradient(145deg,#122239,#0d1727);box-shadow:0 28px 100px #0006}
.brand-mark{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:29px;font-weight:900;color:#061822;background:linear-gradient(135deg,#65f0c9,#49bde8);box-shadow:0 10px 30px #35d7bb22}
.brand-mark.small{width:41px;height:41px;font-size:21px;border-radius:13px;flex:none}
.eyebrow{color:#70dfc8;font-size:10px;letter-spacing:2px;font-weight:800;margin:16px 0 8px}
h1,h2,p{margin-top:0}h1{font-size:clamp(23px,3vw,29px);letter-spacing:-.5px;margin-bottom:8px}h2{font-size:16px;margin:0 0 7px}
.muted{color:var(--muted);font-size:12px;line-height:1.9;margin-bottom:0}
.login-card form{display:grid;gap:11px;margin:28px 0 17px}.login-card label{font-size:12px;color:#cbd8e9}
input{width:100%;min-width:0;padding:13px 14px;color:#f4f7fc;background:#07111f;border:1px solid #2c405c;border-radius:12px;outline:none}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #67a9ff1c}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:10px 15px;border-radius:11px;border:1px solid #2b405a;color:#c7d6ea;background:#142238;font-size:12px;transition:transform .16s,border-color .16s,background .16s}
.button:hover{border-color:#5c7da8;background:#1b304a;transform:translateY(-1px)}
.button:disabled{opacity:.55;cursor:wait;transform:none}
.button.primary{border:0;color:#071523;font-weight:900;background:linear-gradient(115deg,#5de7c0,#67c5f4);padding:13px}
.button.primary:hover{filter:brightness(1.05)}
.button.ghost{background:#101c2d}
.error{min-height:16px;color:#ff9c9c;font-size:12px;margin:0}.tiny{font-size:10px}
.app-shell{min-height:100vh}
.sidebar{position:fixed;z-index:20;top:0;right:0;bottom:0;width:248px;padding:24px 16px 16px;background:rgba(9,18,31,.96);border-left:1px solid var(--line);display:flex;flex-direction:column;transition:width .22s,transform .22s;backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#eef5ff;padding:0 7px 25px;border-bottom:1px solid var(--line);min-width:0}
.brand strong{font-size:18px;display:block;direction:ltr}.brand small{display:block;font-size:8px;color:var(--muted);letter-spacing:1.3px;margin-top:5px;direction:ltr;white-space:nowrap}
.sidebar-collapse{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-top:18px;padding:10px 12px;color:#8fa2bd;background:transparent;border:1px solid transparent;border-radius:11px;font-size:11px}
.sidebar-collapse:hover{background:#152740;border-color:#273c57;color:#f4f8ff}
.sidebar-collapse>span:first-child{font-size:22px;line-height:15px}
.sidebar nav{display:grid;gap:7px;padding-top:8px}
.nav-link{display:flex;align-items:center;gap:13px;color:#96a8c1;text-decoration:none;border:1px solid transparent;border-radius:12px;padding:13px 12px;font-size:12px;transition:background .16s,color .16s,border-color .16s;white-space:nowrap}
.nav-link>span:first-child{font-size:19px;color:#6d8bad;width:25px;text-align:center;flex:none}.nav-link .nav-label{font-size:12px;color:inherit;min-width:0} 
.nav-link.active,.nav-link:hover{color:#f3f8ff;background:linear-gradient(100deg,#173452,#122840);border-color:#284867}
.nav-link.active>span:first-child{color:#73c3ff}
.side-foot{margin-top:auto;display:flex;gap:9px;align-items:center;padding:14px 8px;color:#8fa4bf;font-size:11px;border-top:1px solid var(--line)}
.pulse-dot{display:inline-block;width:7px;height:7px;background:#3de0a1;border-radius:50%;box-shadow:0 0 12px #3de0a155;flex:none}
.main-content{width:auto;max-width:1740px;min-width:0;margin-right:248px;padding:clamp(20px,3vw,42px) clamp(16px,3vw,48px) 24px;transition:margin-right .22s}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}
.page-title-wrap{display:flex;align-items:center;gap:13px;min-width:0}
.topbar .eyebrow{margin:0 0 7px;font-size:9px}.topbar h1{margin-bottom:6px}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.refresh-label{display:inline-flex;align-items:center;gap:8px;font-size:10px;color:#9bacbf;padding:10px}
.icon-button{width:42px;height:42px;display:grid;place-items:center;border:1px solid #2a3e58;border-radius:12px;background:#122037;color:#e0eaf7;font-size:19px}
.mobile-menu-button{display:none;flex:none}.menu-glyph{line-height:1}
.health-banner{display:flex;align-items:center;gap:13px;padding:14px 17px;margin-bottom:18px;border:1px solid #29435c;border-radius:15px;background:linear-gradient(100deg,#12253a,#0f1b2c)}
.health-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:12px;color:var(--blue);background:#1a3551;font-size:20px}
.health-banner>div{min-width:0;flex:1}.health-banner strong{font-size:12px}.health-banner p{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.7}
.health-time{font-size:9px;letter-spacing:1.2px;color:#65dfbc;border:1px solid #275846;background:#123329;padding:6px 9px;border-radius:8px}
.health-banner[data-level=warning]{border-color:#66502d;background:linear-gradient(100deg,#2d2519,#131d2b)}
.health-banner[data-level=warning] .health-icon{color:var(--amber);background:#40321e}
.health-banner[data-level=warning] .health-time{color:var(--amber);border-color:#66502d;background:#332a1b}
.health-banner[data-level=critical]{border-color:#643643;background:linear-gradient(100deg,#301b28,#131b2a)}
.health-banner[data-level=critical] .health-icon{color:var(--danger);background:#472532}
.health-banner[data-level=critical] .health-time{color:var(--danger);border-color:#643643;background:#381e29}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:18px}
.metric-card,.panel{background:linear-gradient(145deg,rgba(18,30,48,.98),rgba(12,22,36,.98));border:1px solid #20344d;border-radius:17px;box-shadow:0 12px 32px #0000000d}
.metric-card{position:relative;padding:20px;min-width:0;overflow:hidden}
.metric-card:before{content:"";position:absolute;top:0;right:20px;left:20px;height:2px;background:linear-gradient(90deg,transparent,#5fafff,transparent);opacity:.5}
.metric-card:nth-child(2):before{background:linear-gradient(90deg,transparent,#aa94ff,transparent)}
.metric-card:nth-child(3):before{background:linear-gradient(90deg,transparent,#48dfbd,transparent)}
.metric-card:nth-child(4):before{background:linear-gradient(90deg,transparent,#f4bf68,transparent)}
.metric-head{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#a2b1c6;font-size:12px}
.metric-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:12px;font-size:21px}
.metric-icon.blue{color:var(--blue);background:#17304a}.metric-icon.violet{color:var(--violet);background:#282445}
.metric-icon.green{color:var(--mint);background:#15352e}.metric-icon.amber{color:var(--amber);background:#3a3020}
.metric-value{font-size:clamp(25px,2.4vw,34px);font-weight:850;margin:16px 0 5px;direction:ltr;text-align:right;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.metric-sub{font-size:10px;color:#8193ab;min-height:20px;line-height:1.7;overflow-wrap:anywhere}
.meter{height:6px;background:#233249;border-radius:99px;overflow:hidden;margin-top:15px}
.meter span{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#337eda,#78c4ff);transition:width .45s ease}
.violet-meter span{background:linear-gradient(90deg,#7660d4,#b9a8ff)}.green-meter span{background:linear-gradient(90deg,#20aa89,#59eac5)}.amber-meter span{background:linear-gradient(90deg,#c48a31,#f5c96f)}
.content-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(310px,.9fr);gap:18px;margin-bottom:18px;align-items:stretch}
.panel{padding:clamp(16px,2vw,24px);min-width:0}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.live-tag,.count-chip{padding:6px 9px;border:1px solid #225844;border-radius:8px;color:#58dcb0;background:#123128;font-size:9px;white-space:nowrap}
.count-chip{color:#a8c9f9;border-color:#2d4d72;background:#142942}
.chart-wrap{height:clamp(170px,19vw,240px);position:relative;border-bottom:1px solid #1d2c40}
canvas{width:100%;height:100%;display:block}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap;margin:13px 0 20px;color:#94a6bd;font-size:10px}
.chart-legend span{display:flex;align-items:center;gap:7px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.cpu-dot{background:#4e9cff}.ram-dot{background:#31d8a3}.disk-dot{background:#b296ff}
.info-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.info-strip div{background:#0b1523;border:1px solid #1e3046;border-radius:11px;padding:12px;min-width:0}
.info-strip span{display:block;color:#8498b3;font-size:9px;margin-bottom:8px}
.info-strip strong{font-size:12px;color:#e1eafa;overflow-wrap:anywhere;line-height:1.8}
.service-search{display:flex;align-items:center;gap:9px;margin:0 0 8px;padding:0 12px;background:#091423;border:1px solid #22354d;border-radius:11px;color:#7891b1}
.service-search>span{font-size:23px}
.service-search input{padding:11px 0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:11px;outline:none}
.service-search kbd{font-size:9px;color:#70849e;white-space:nowrap}
.service-list{display:grid}
.service-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #1c2a3c}
.service-row:last-child{border-bottom:0}
.service-name{display:flex;align-items:center;gap:10px;font-size:12px;color:#c7d5e7;direction:ltr;min-width:0}
.service-name>span:last-child{overflow-wrap:anywhere}
.service-icon{width:30px;height:30px;flex:none;border:1px solid #263d56;border-radius:10px;display:grid;place-items:center;background:#10263a;color:#6eb8ff}
.status{font-size:9px;white-space:nowrap;border-radius:7px;padding:6px 9px;color:#94a4bb;background:#202c3e;flex:none}
.status.active{color:#57dcb0;background:#15352e}.status.failed{color:#ff9191;background:#3a2029}.status.inactive{color:#e9bd70;background:#3a3020}
.panel-note{font-size:10px;line-height:1.9;color:#8092aa;background:#0a1421;padding:12px;border-radius:10px;margin:14px 0 0}
.disk-panel{margin-bottom:20px}.disk-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.disk-item{padding:17px;background:#0b1523;border:1px solid #1c2d42;border-radius:12px;min-width:0}
.disk-top{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:10px}
.disk-top strong{direction:ltr;overflow-wrap:anywhere}.disk-top span{color:#9bacc1;font-size:10px;white-space:nowrap}
.disk-details{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#879bb4;font-size:10px;margin-top:9px}
footer{display:flex;justify-content:space-between;gap:10px;color:#687d99;font-size:10px;padding:12px 2px 0;border-top:1px solid #18273a;margin-top:10px}
.sidebar-backdrop{display:none}
.app-shell.sidebar-collapsed .sidebar{width:82px;padding-right:12px;padding-left:12px}
.app-shell.sidebar-collapsed .main-content{margin-right:82px}
.app-shell.sidebar-collapsed .brand{justify-content:center;padding-right:0;padding-left:0}
.app-shell.sidebar-collapsed .brand>span:last-child,.app-shell.sidebar-collapsed .collapse-label,.app-shell.sidebar-collapsed .nav-link .nav-label,.app-shell.sidebar-collapsed .side-foot>span:last-child{display:none}
.app-shell.sidebar-collapsed .sidebar-collapse{justify-content:center;padding:10px 4px}
.app-shell.sidebar-collapsed .sidebar-collapse>span:first-child{transform:rotate(180deg)}
.app-shell.sidebar-collapsed .nav-link{justify-content:center;padding:13px 5px}
.app-shell.sidebar-collapsed .nav-link span{width:auto}
@media(min-width:761px) and (max-width:1100px){
 .sidebar{width:218px}.main-content{margin-right:218px;padding:22px}
 .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .content-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
 .sidebar,.app-shell.sidebar-collapsed .sidebar{width:min(300px,86vw);right:0;left:auto;transform:translateX(105%);box-shadow:-20px 0 60px #0005;padding:19px 16px 16px}
 .app-shell.sidebar-open .sidebar{transform:translateX(0)}
 .app-shell.sidebar-collapsed .brand{justify-content:flex-start;padding-right:7px;padding-left:7px}
 .app-shell.sidebar-collapsed .brand>span:last-child,.app-shell.sidebar-collapsed .collapse-label,.app-shell.sidebar-collapsed .nav-link .nav-label,.app-shell.sidebar-collapsed .side-foot>span:last-child{display:initial}
 .app-shell.sidebar-collapsed .sidebar-collapse{display:none}
 .app-shell.sidebar-collapsed .nav-link{justify-content:flex-start;padding:13px 12px}
 .app-shell.sidebar-collapsed .nav-link>span:first-child{width:25px}
 .app-shell.sidebar-collapsed .nav-link .nav-label{display:block}
 .app-shell.sidebar-collapsed .side-foot{display:flex}
 .sidebar-backdrop{position:fixed;inset:0;z-index:19;display:block;background:#020711b8;border:0;backdrop-filter:blur(3px)}
 .sidebar-backdrop[hidden]{display:none}
 .sidebar-collapse{display:none}
 .main-content,.app-shell.sidebar-collapsed .main-content{margin:0;padding:20px 15px 22px;width:100%}
 .mobile-menu-button{display:grid}
 .topbar{align-items:flex-start;flex-direction:column;gap:17px;margin-bottom:20px}
 .page-title-wrap{width:100%;align-items:flex-start}
 .page-title-wrap>div{min-width:0}
 .top-actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px}
 .refresh-label{padding:8px 2px;justify-content:flex-start}
 .health-banner{padding:12px;gap:10px}
 .health-banner p{font-size:10px}
 .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .metric-card{padding:15px}
 .metric-value{font-size:26px}
 .content-grid{grid-template-columns:minmax(0,1fr);gap:13px}
 .panel{padding:16px}
 .disk-list{grid-template-columns:1fr}
 .chart-wrap{height:190px}
 .info-strip{gap:6px}
 .info-strip div{padding:10px 8px}
 .info-strip strong{font-size:10px}
 footer{flex-direction:column}
}
@media(max-width:410px){
 .main-content{padding:16px 11px}
 .metric-card{padding:12px}
 .metric-head{font-size:11px}
 .metric-icon{width:30px;height:30px}
 .metric-value{font-size:24px}
 .metric-sub{font-size:9px}
 .top-actions{grid-template-columns:minmax(0,1fr) auto auto}
 .top-actions .button{padding:9px 10px}
 .health-time{display:none}
 .info-strip{grid-template-columns:1fr}
 .info-strip div{display:flex;justify-content:space-between;align-items:center;gap:7px}
 .info-strip span{margin:0}
 .disk-top{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}