:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e5e7eb;background:#070b12;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-width:320px;background:radial-gradient(circle at 80% -10%,rgba(59,130,246,.12),transparent 30rem),#070b12}button,select{font:inherit}button{cursor:pointer}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;display:flex;flex-direction:column;border-right:1px solid #18202c;background:#080c13f5}.brand{display:flex;align-items:center;gap:12px;padding:26px 22px;border-bottom:1px solid #18202c}.brand-mark{display:grid;width:38px;height:38px;place-items:center;border-radius:10px;background:#2563eb;color:#fff;font-weight:800}.brand-title{font-weight:700;color:#f8fafc}.brand-subtitle{margin-top:2px;color:#64748b;font-size:12px}.navigation{padding:24px 14px}.nav-section{margin:14px 10px 8px;color:#475569;font-size:10px;font-weight:700;letter-spacing:.12em}.nav-item{display:flex;width:100%;align-items:center;gap:12px;margin:3px 0;padding:11px 12px;border:0;border-radius:8px;background:transparent;color:#94a3b8;text-align:left}.nav-item:hover,.nav-item.active{background:#111827;color:#f8fafc}.nav-item.active{box-shadow:inset 2px 0 #3b82f6}.sidebar-footer{margin-top:auto;padding:18px;border-top:1px solid #18202c}.connection{display:flex;align-items:center;gap:9px;color:#94a3b8;font-size:12px}.status-dot{display:inline-block;width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#64748b}.status-dot.online{background:#22c55e;box-shadow:0 0 10px #22c55e8c}.status-dot.offline{background:#ef4444}.status-dot.checking{background:#f59e0b}.main-content{width:calc(100% - 248px);min-height:100vh;margin-left:248px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:28px 38px;border-bottom:1px solid #18202c;background:#070b12b8}.page-label,.card-eyebrow,.stat-label,.detail-label{color:#64748b;font-size:10px;font-weight:700;letter-spacing:.12em}.topbar h1{margin:5px 0 0;color:#f8fafc;font-size:26px}.topbar-right{display:flex;align-items:center;gap:20px}.system-status{display:flex;align-items:center;gap:8px;color:#94a3b8;font-size:12px}.avatar{display:grid;width:36px;height:36px;place-items:center;border:1px solid #263244;border-radius:50%;background:#111827;color:#cbd5e1;font-weight:700}.dashboard,.server-details-page{max-width:1500px;margin:0 auto;padding:32px 38px 60px}.welcome-card,.server-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px;border:1px solid #1e293b;border-radius:14px;background:linear-gradient(135deg,#1e40af29,#0f172ab8),#0b111b}.welcome-card h2,.server-hero h2{margin:8px 0;color:#f8fafc;font-size:21px}.welcome-card p,.server-hero p{margin:0;color:#64748b}.health-badge{display:flex;align-items:center;gap:8px;white-space:nowrap;color:#a7f3d0;font-size:12px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}.stat-card{min-height:130px;padding:22px;border:1px solid #1e293b;border-radius:12px;background:#0b111b}.stat-card strong{display:block;margin:12px 0 5px;color:#f8fafc;font-size:30px}.stat-meta{color:#64748b;font-size:12px}.content-card,.metrics-control-card,.chart-panel{border:1px solid #1e293b;border-radius:14px;background:#0b111b;overflow:hidden}.section-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid #18202c}.section-header h3,.chart-panel h3{margin:6px 0 0;color:#f8fafc;font-size:16px}.section-description,.chart-panel p{margin:6px 0 0;color:#64748b;font-size:12px}.outline-button,.primary-button{border-radius:8px;padding:9px 14px}.outline-button{border:1px solid #334155;background:transparent;color:#cbd5e1}.outline-button:hover{border-color:#475569;background:#111827}.primary-button{border:1px solid #2563eb;background:#2563eb;color:#fff}.empty-state{padding:60px 24px;text-align:center}.empty-icon{display:grid;width:48px;height:48px;margin:0 auto 14px;place-items:center;border:1px solid #263244;border-radius:12px;color:#64748b;font-size:22px}.empty-state h4{margin:0 0 8px;color:#e2e8f0}.empty-state p{max-width:480px;margin:0 auto 20px;color:#64748b;font-size:13px}.server-list{display:flex;flex-direction:column}.server-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:30px;padding:20px 24px;border:0;border-bottom:1px solid #18202c;background:transparent;text-align:left}.server-row:last-child{border-bottom:0}.server-row-button:hover{background:#0f1722}.server-main{display:flex;min-width:260px;align-items:center;gap:14px}.server-status{display:grid;width:38px;height:38px;place-items:center;border:1px solid #334155;border-radius:10px;background:#111827}.server-status.online{border-color:#22c55e4d}.server-status.online .status-dot{background:#22c55e;box-shadow:0 0 10px #22c55e80}.server-status.degraded .status-dot{background:#f59e0b}.server-status.offline .status-dot{background:#ef4444}.server-main h4{margin:0 0 5px;color:#f8fafc;font-size:14px}.server-main p{margin:0;color:#64748b;font-size:12px}.server-details{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:32px}.server-details>div{display:flex;min-width:100px;flex-direction:column;gap:6px}.server-details strong{color:#cbd5e1;font-size:12px;font-weight:600}.row-arrow{color:#475569;font-size:20px}.text-online{color:#4ade80!important}.text-muted{color:#64748b!important}.error-banner{display:flex;flex-direction:column;gap:5px;margin:18px 0;padding:14px 16px;border:1px solid rgba(239,68,68,.35);border-radius:10px;background:#7f1d1d26;color:#fca5a5;font-size:12px}.details-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.details-refresh{color:#64748b;font-size:12px}.server-title-row{display:flex;align-items:center;gap:14px}.server-status-large{display:grid;width:46px;height:46px;place-items:center;border:1px solid #334155;border-radius:12px;background:#111827}.server-status-large.online{border-color:#22c55e59}.server-status-large.online .status-dot{width:10px;height:10px;background:#22c55e;box-shadow:0 0 12px #22c55e99}.server-status-large.offline .status-dot{background:#ef4444}.server-status-large.degraded .status-dot{background:#f59e0b}.server-hero-meta{display:flex;align-items:center;gap:28px}.server-hero-meta>div{display:flex;flex-direction:column;gap:7px}.server-hero-meta strong{color:#cbd5e1;font-size:12px}.metric-stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0}.metric-stat-card{padding:18px;border:1px solid #1e293b;border-radius:12px;background:#0b111b}.metric-stat-label{color:#64748b;font-size:10px;font-weight:700;letter-spacing:.12em}.metric-stat-card strong{display:block;margin-top:10px;color:#f8fafc;font-size:24px}.metrics-control-card{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:22px 24px;margin-bottom:18px}.metrics-control-card h3{margin:5px 0 0;color:#f8fafc;font-size:16px}.metrics-control-card p{margin:6px 0 0;color:#64748b;font-size:12px}.metric-controls{display:flex;align-items:flex-end;gap:18px}.control-group{display:flex;flex-direction:column;gap:7px}.segmented-control{display:flex;overflow-x:auto;padding:3px;border:1px solid #253043;border-radius:9px;background:#0a1018}.segmented-control button{border:0;border-radius:6px;padding:7px 10px;background:transparent;color:#64748b;font-size:11px;white-space:nowrap}.segmented-control button:hover,.segmented-control button.selected{background:#172033;color:#f8fafc}.resolution-select{min-width:110px;padding:8px 10px;border:1px solid #334155;border-radius:8px;background:#0f1722;color:#cbd5e1;outline:none}.charts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.chart-panel{min-height:350px}.chart-panel-header{padding:18px 20px;border-bottom:1px solid #18202c}.chart-wrap{height:280px;padding:12px 12px 18px}.chart-empty{display:grid;height:100%;place-items:center;color:#64748b;font-size:12px}.network-card{margin-top:18px}.network-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:20px 24px}.network-summary>div{display:flex;flex-direction:column;gap:6px}.network-summary span{color:#64748b;font-size:11px}.network-summary strong{color:#cbd5e1;font-size:12px}.details-state{display:flex;min-height:50vh;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:40px;color:#64748b}@media(max-width:1200px){.metric-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.charts-grid{grid-template-columns:1fr}.metrics-control-card{align-items:flex-start;flex-direction:column}}@media(max-width:1000px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.server-row{align-items:flex-start;flex-direction:column}.server-details{width:100%}.server-hero{align-items:flex-start;flex-direction:column}.server-hero-meta{width:100%}}@media(max-width:720px){.sidebar{position:static;width:100%;min-height:auto}.app-shell{display:block}.navigation{display:none}.main-content{width:100%;margin-left:0}.topbar{padding:22px}.system-status{display:none}.dashboard,.server-details-page{padding:20px}.welcome-card{align-items:flex-start;flex-direction:column}.stats-grid,.metric-stats-grid,.network-summary{grid-template-columns:1fr}.server-hero-meta{display:grid;grid-template-columns:1fr 1fr}.metric-controls{width:100%;align-items:stretch;flex-direction:column}.segmented-control{max-width:100%}.resolution-select{width:100%}.details-toolbar{align-items:flex-start;flex-direction:column;gap:10px}}.details-live-indicator{display:flex;align-items:center;gap:8px;color:#86efac;font-size:11px}.server-description{max-width:720px;margin-top:14px!important;color:#94a3b8!important;font-size:12px}.metric-stat-secondary{display:block;margin-top:5px;color:#64748b;font-size:10px}.metrics-extra-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.mini-info-card{display:flex;min-height:78px;justify-content:center;flex-direction:column;gap:7px;padding:16px 18px;border:1px solid #1e293b;border-radius:12px;background:#0b111b}.mini-info-card span{color:#64748b;font-size:10px;font-weight:700;letter-spacing:.1em}.mini-info-card strong{color:#cbd5e1;font-size:12px}.chart-legend{display:flex;align-items:center;gap:14px;margin-top:10px;color:#64748b;font-size:10px}.chart-legend>span{display:inline-flex;align-items:center;gap:5px}.legend-dot{width:7px;height:7px;border-radius:50%;background:#60a5fa}.legend-rxBytesPerSec{background:#60a5fa}.legend-txBytesPerSec{background:#34d399}.legend-cpu,.legend-memory,.legend-disk,.legend-threeXUIAvailability,.legend-load1{background:#60a5fa}.text-danger{color:#f87171!important}@media(max-width:1200px){.metrics-extra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.metrics-extra-grid{grid-template-columns:1fr}.server-description{line-height:1.6}.chart-legend{flex-wrap:wrap}}