:root{--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;--bg-primary:#09090b;--bg-secondary:#0f0f12;--bg-card:#121316;--bg-card-hover:#17181d;--bg-popover:#141519;--bg-inset:#0a0b0e;--bg-glass:#ffffff05;--border-subtle:#ffffff12;--border-strong:#ffffff21;--text-primary:#f4f4f5;--text-secondary:#a1a1aa;--text-muted:#71717a;--chart-axis-color:#71717a;--chart-axis-line:#ffffff14;--chart-grid-color:#ffffff0a;--chart-crosshair:#ffffff59;--accent-cyan:#06b6d4;--accent-blue:#38bdf8;--accent-emerald:#10b981;--accent-amber:#f59e0b;--accent-rose:#f43f5e;--accent-indigo:#818cf8;--badge-online-bg:#10b98114;--badge-online-text:#34d399;--badge-online-dot:#10b981;--badge-offline-bg:#f43f5e14;--badge-offline-text:#fb7185;--badge-offline-dot:#f43f5e;--gauge-track:#ffffff0f;--card-shadow:0 0 0 1px #ffffff0d, 0 2px 4px #00000059, 0 12px 24px -4px #00000073;--popover-shadow:0 0 0 1px #ffffff14, 0 16px 36px -4px #000000b3;--tooltip-shadow:0 0 0 1px #ffffff14, 0 8px 24px -4px #0009;--radius-sm:6px;--radius-md:9px;--radius-lg:12px}body.light-theme{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-card:#fff;--bg-card-hover:#f8fafc;--bg-popover:#fff;--bg-inset:#f1f5f9;--bg-glass:#00000005;--border-subtle:#0f172a14;--border-strong:#0f172a24;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--chart-axis-color:#64748b;--chart-axis-line:#64748b38;--chart-grid-color:#64748b14;--chart-crosshair:#64748b6b;--badge-online-bg:#10b9811a;--badge-online-text:#059669;--badge-online-dot:#10b981;--gauge-track:#0f172a14;--card-shadow:0 1px 3px #0f172a0d, 0 6px 16px -2px #0f172a0a;--popover-shadow:0 16px 36px -4px #0000001f, 0 0 1px 1px var(--border-strong);--tooltip-shadow:0 8px 18px -8px #0f172a29}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;min-height:100vh}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.45;transition:background-color .2s,color .2s;overflow-x:hidden}body.dark-theme,body:not(.light-theme){background-color:var(--bg-primary);background-image:radial-gradient(circle at 50% -10%,#ffffff09 0%,#0000 60%)}.bg-ambient{display:none}.main-viewport{z-index:1;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px 20px 32px;display:flex;position:relative}.main-viewport.is-tall{justify-content:flex-start}.dashboard-container{flex-direction:column;gap:16px;width:100%;min-width:0;max-width:1080px;margin:auto;display:flex}.dashboard-container.is-wide{max-width:1280px}.dashboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:0;display:flex}.header-brand{align-items:center;gap:12px;display:flex}.brand-icon-box{border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;transition:transform .18s,box-shadow .18s,border-color .18s,background .2s,color .2s;animation:.46s both brand-in;display:flex}body.dark-theme .brand-icon-box,body:not(.light-theme) .brand-icon-box{color:#38bdf8;background:linear-gradient(145deg,#18191f 0%,#0e0f13 100%);border:1px solid #ffffff1f;box-shadow:inset 0 1px #ffffff1f,0 2px 8px #00000073}body.dark-theme .brand-icon-box svg,body:not(.light-theme) .brand-icon-box svg{color:#38bdf8;filter:drop-shadow(0 0 5px #38bdf873)}body.dark-theme .brand-icon-box:hover,body:not(.light-theme) .brand-icon-box:hover{border-color:#38bdf866;transform:scale(1.03);box-shadow:inset 0 1px #ffffff2e,0 4px 14px #0009}body.light-theme .brand-icon-box{color:#0284c7;background:linear-gradient(145deg,#fff 0%,#f1f5f9 100%);border:1px solid #0f172a1a;box-shadow:0 2px 6px #0f172a14,inset 0 1px #fff}body.light-theme .brand-icon-box svg{color:#0284c7;filter:drop-shadow(0 1px 2px #0284c733)}body.light-theme .brand-icon-box:hover{border-color:#0284c759;transform:scale(1.03);box-shadow:0 4px 12px #0f172a1f,inset 0 1px #fff}.brand-icon-box.is-syncing svg{animation:.4s brand-sync}.brand-titles h1,.brand-wordmark{letter-spacing:-.035em;color:var(--text-primary);font-size:1.45rem;font-weight:700;line-height:1}.brand-wordmark{background:linear-gradient(120deg,#0f172a 12%,#0369a1 58%,#4f46e5 100%);color:#0000;-webkit-background-clip:text;background-clip:text;animation:.42s .1s both title-in}body.dark-theme .brand-wordmark,body:not(.light-theme) .brand-wordmark{background:linear-gradient(120deg,#f8fafc 12%,#38bdf8 58%,#818cf8 100%);color:#0000;-webkit-background-clip:text;background-clip:text}body.light-theme .brand-wordmark{background:linear-gradient(120deg,#0f172a 12%,#0369a1 58%,#4f46e5 100%);color:#0000;-webkit-background-clip:text;background-clip:text}@keyframes brand-in{0%{opacity:0;transform:scale(.94)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes title-in{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}@keyframes brand-sync{0%,to{opacity:1}50%{opacity:.42}}.brand-titles p{color:var(--text-secondary);font-size:.78rem}.header-controls{align-items:center;gap:8px;display:flex}.btn{border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);align-items:center;gap:6px;padding:6px 12px;font-size:.8rem;font-weight:500;transition:all .15s;display:inline-flex;box-shadow:0 1px 2px #0003,inset 0 1px #ffffff0a}.btn:hover{background:var(--bg-card-hover);border-color:var(--border-strong)}.btn-primary{color:#fff;background:#0284c7;border:1px solid #ffffff29;box-shadow:inset 0 1px #ffffff38,0 2px 8px #0284c759}.btn-primary:hover{background:#0369a1;border-color:#ffffff40;box-shadow:inset 0 1px #ffffff40,0 4px 12px #0284c773}.select-input{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);cursor:pointer;outline:none;padding:6px 10px;font-size:.8rem;transition:all .15s;box-shadow:0 1px 2px #0003,inset 0 1px #ffffff0a}.select-input:hover{border-color:var(--border-strong)}.theme-dropdown-wrapper{position:relative}.btn-theme-toggle{white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.theme-popover-menu{background:var(--bg-popover);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--popover-shadow);z-index:60;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);flex-direction:column;gap:2px;width:max-content;min-width:145px;padding:5px;animation:.14s cubic-bezier(.16,1,.3,1) fadeInDown;display:flex;position:absolute;top:calc(100% + 6px);right:0}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.theme-option{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;gap:10px;padding:7px 11px;font-size:.82rem;font-weight:500;transition:all .12s;display:flex}.theme-option:hover{background:var(--bg-inset);color:var(--text-primary)}.theme-option.selected{color:#38bdf8;background:#38bdf81a;font-weight:600}.theme-option .check-icon{color:#38bdf8;flex-shrink:0;margin-left:auto}.summary-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.summary-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:inset 0 1px 0 0 #ffffff0d, var(--card-shadow);align-items:center;gap:14px;min-height:84px;padding:15px 18px;transition:transform .18s,border-color .18s,box-shadow .18s;display:flex}.summary-card:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:inset 0 1px #ffffff17,0 4px 16px -2px #00000080}.summary-icon{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex}body.dark-theme .icon-blue{color:#38bdf8;background:#38bdf814;border-color:#38bdf826}body.dark-theme .icon-emerald{color:#34d399;background:#10b98114;border-color:#10b98126}body.dark-theme .icon-amber{color:#fbbf24;background:#f59e0b14;border-color:#f59e0b26}body.dark-theme .icon-cyan{color:#22d3ee;background:#06b6d414;border-color:#06b6d426}body.light-theme .icon-blue{color:#2563eb;background:#3b82f614;border-color:#3b82f629}body.light-theme .icon-emerald{color:#059669;background:#10b98114;border-color:#10b98129}body.light-theme .icon-amber{color:#d97706;background:#f59e0b14;border-color:#f59e0b29}body.light-theme .icon-cyan{color:#0891b2;background:#06b6d414;border-color:#06b6d429}.summary-meta{flex:1;min-width:0}.summary-meta .label{color:var(--text-secondary);letter-spacing:.01em;white-space:nowrap;font-size:.75rem;font-weight:500;line-height:1.2}.summary-meta .value{color:var(--text-primary);font-size:1.28rem;font-weight:700;font-family:var(--font-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;align-items:baseline;gap:4px;margin-top:4px;line-height:1.1;display:flex}.summary-meta .value small{color:var(--text-muted);letter-spacing:0;font-size:.78rem;font-weight:500}.summary-meta .value.is-remain{color:#10b981}.summary-meta .value.is-time{letter-spacing:-.02em;font-size:1.18rem}.summary-meta .value-sep{color:var(--text-muted);margin:0 3px;font-weight:500}.summary-hint{color:var(--text-muted);margin-top:4px;font-size:.72rem}.donut-gauge{flex-shrink:0;position:relative}.donut-gauge svg{transform-origin:50%;width:100%;height:100%;display:block;transform:rotate(-90deg)}.donut-track{stroke:var(--gauge-track)}.donut-progress{transition:stroke-dashoffset .7s}.donut-center{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.donut-pct{font-family:var(--font-mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:.95rem;font-weight:700}.summary-card .donut-pct{font-size:.62rem}.server-card.is-hero .donut-pct{font-size:1.35rem}.servers-grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.servers-grid.is-single{grid-template-columns:1fr}.servers-grid.is-two,.servers-grid.is-four{grid-template-columns:repeat(2,1fr)}.servers-grid.is-three,.servers-grid.is-many{grid-template-columns:repeat(3,1fr)}.servers-grid>.server-card{min-width:0}@media (width>=1181px){.servers-grid.is-three .server-card:last-child:nth-child(3n+1),.servers-grid.is-many .server-card:last-child:nth-child(3n+1){grid-column:1/-1;justify-self:center;width:100%;max-width:calc(33.333% - 11px)}.servers-grid.is-many[data-count="5"]{grid-template-columns:repeat(6,1fr)}.servers-grid.is-many[data-count="5"] .server-card{grid-column:span 2}.servers-grid.is-many[data-count="5"] .server-card:nth-child(4){grid-column:2/4}.servers-grid.is-many[data-count="5"] .server-card:nth-child(5){grid-column:4/6}}.empty-config-card{justify-content:center;min-height:140px}.empty-config-text{color:var(--text-secondary);font-size:.88rem;line-height:1.6}.empty-config-text code{font-family:var(--font-mono);background:var(--bg-inset);border-radius:4px;padding:1px 5px;font-size:.8em}.server-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:inset 0 1px 0 0 #ffffff0d, var(--card-shadow);flex-direction:column;gap:16px;min-width:0;padding:20px 22px 18px;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.server-card:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:inset 0 1px #ffffff14,0 8px 24px -4px #00000080}.server-card.is-hero{gap:18px;padding:22px 28px 20px}.card-top-header{justify-content:space-between;align-items:flex-start;gap:16px;min-width:0;display:flex}.node-id{flex:auto;min-width:0;overflow:hidden}.node-name{color:var(--text-primary);letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap;font-size:1.15rem;font-weight:600;line-height:1.2;overflow:hidden}.node-ip{font-family:var(--font-mono);color:var(--text-muted);font-variant-numeric:tabular-nums;margin-top:3px;font-size:.75rem}.node-flags{white-space:nowrap;flex-wrap:nowrap;flex:none;justify-content:flex-end;align-items:center;gap:8px;display:flex}.status-text,.health-chip{letter-spacing:.01em;align-items:center;gap:5px;font-size:.72rem;font-weight:500;display:inline-flex}.status-text.is-on{color:var(--badge-online-text)}.status-text.is-off{color:var(--badge-offline-text)}.status-text .dot{background:currentColor;border-radius:50%;width:6px;height:6px}.health-chip{border-radius:var(--radius-sm);color:var(--badge-online-text);background:#10b98114;border:1px solid #10b98129;padding:2px 7px}.health-chip.is-elevated{color:#fbbf24;background:#f59e0b14;border:1px solid #f59e0b2e}.health-chip.is-warn,.health-chip.is-critical{color:#fb7185;background:#f43f5e14;border:1px solid #f43f5e2e}.card-metrics{grid-template-columns:1fr auto 1.15fr auto 1fr;place-items:center;width:100%;padding-top:4px;display:grid}.metric-col{text-align:center;flex-direction:column;align-items:center;width:100%;min-width:0;display:flex}.metric-col.is-gauge{justify-content:center}.metric-divider{background:var(--border-subtle);flex-shrink:0;width:1px;height:36px}.used-value{font-family:var(--font-mono);letter-spacing:-.05em;color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap;justify-content:center;align-items:baseline;gap:5px;font-size:1.65rem;font-weight:700;line-height:1;display:flex}.server-card.is-hero .used-value{font-size:2rem}.used-value small{color:var(--text-muted);letter-spacing:0;font-size:.78rem;font-weight:600}.used-value.is-remain{color:#10b981}body.light-theme .used-value.is-remain{color:#059669}.used-caption{color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center;margin-top:6px;font-size:.76rem}.sparkline{min-width:0}.sparkline-caption{color:var(--text-muted);margin-bottom:2px;font-size:.68rem}.sparkline-aux{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-bottom:4px;font-size:.68rem}.sparkline-svg{width:100%;height:46px;display:block}.sparkline.is-empty{height:46px;color:var(--text-muted);align-items:center;font-size:.75rem;display:flex}.server-card.is-hero .sparkline-svg{height:50px}.progress-bar-wrap{background:var(--gauge-track);border-radius:99px;width:100%;height:4px;overflow:hidden}.progress-bar-wrap.is-hero{height:5px}.progress-bar-fill{border-radius:99px;height:100%;transition:width .6s}.card-footer{border-top:1px solid var(--border-subtle);color:var(--text-muted);justify-content:space-between;align-items:center;padding-top:10px;font-size:.72rem;display:flex}.card-footer .spec-item{align-items:center;gap:4px;display:flex}.analytics-section{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:inset 0 1px 0 0 #ffffff0d, var(--card-shadow);min-width:0;padding:18px 22px}.section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.section-title{color:var(--text-primary);align-items:center;gap:8px;font-size:.95rem;font-weight:600;display:flex}.chart-legend-subrow{color:var(--text-secondary);flex-wrap:wrap;align-items:center;gap:6px 16px;min-width:0;margin-bottom:12px;font-size:.78rem;display:flex}.legend-item{white-space:nowrap;flex:0 auto;align-items:center;gap:6px;min-width:0;display:inline-flex}.legend-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.legend-dot.s1{background:#38bdf8}.legend-dot.s2{background:#818cf8}.tab-group{background:var(--bg-inset);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);padding:2px;display:flex}.tab-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 12px;font-size:.74rem;font-weight:500;transition:all .15s}.tab-btn.active{background:var(--bg-card);color:var(--text-primary);font-weight:600;box-shadow:0 1px 3px #00000040,inset 0 1px #ffffff0f}body.light-theme .tab-btn.active{color:var(--text-primary);background:#fff;box-shadow:0 1px 3px #00000014}.chart-container{width:100%;min-width:0;height:190px;position:relative}.chart-hit{z-index:3;cursor:crosshair;position:absolute;inset:0}.chart-hover-line{stroke:var(--chart-crosshair);stroke-width:1px;stroke-dasharray:4 3;opacity:.95;pointer-events:none}.chart-tooltip{border-radius:var(--radius-sm);background:var(--bg-popover);border:1px solid var(--border-strong);min-width:176px;box-shadow:var(--tooltip-shadow);pointer-events:none;z-index:4;padding:10px 12px;position:absolute;top:10px;transform:translate(10px)}.chart-tooltip.is-left{transform:translate(calc(-100% - 10px))}.chart-tooltip-time{color:var(--text-secondary);font-variant-numeric:tabular-nums;margin-bottom:6px;font-size:.72rem}.chart-tooltip-row{align-items:center;gap:8px;font-size:.76rem;line-height:1.55;display:flex}.chart-tooltip-name{color:var(--text-secondary);flex:1;min-width:0}.chart-tooltip-val{font-family:var(--font-mono);color:var(--text-primary);font-variant-numeric:tabular-nums;text-align:right;min-width:4.8em;font-weight:600}.analytics-section.is-dense .chart-container{height:220px}.chart-svg{width:100%;height:100%;overflow:visible}.chart-axis-line{stroke:var(--chart-axis-line);stroke-width:1px;stroke-linecap:round}.chart-tick-line{stroke:var(--chart-axis-line);stroke-width:1px}.chart-grid-line{stroke:var(--chart-grid-color);stroke-dasharray:3 4}.chart-axis-text{fill:var(--chart-axis-color);font-size:12px;font-weight:500;font-family:var(--font-sans);letter-spacing:0;font-variant-numeric:tabular-nums}.chart-y-unit{fill:var(--text-muted);font-size:10px;font-weight:400;font-family:var(--font-sans)}.chart-end-label{font-size:11px;font-weight:500;font-family:var(--font-sans);font-variant-numeric:tabular-nums;pointer-events:none}.chart-line-s1{fill:none;stroke:#0ea5e9;stroke-width:2.8px;stroke-linecap:round;stroke-linejoin:round}.chart-line-s2{fill:none;stroke:#6366f1;stroke-width:2.8px;stroke-linecap:round;stroke-linejoin:round}.chart-area-s1{fill:url(#grad-s1)}.chart-area-s2{fill:url(#grad-s2)}.dashboard-footer{color:var(--text-muted);justify-content:center;align-items:center;padding:10px 2px 2px;font-size:12.5px;font-weight:400;display:flex}.footer-inner{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:inline-flex}.footer-sep{opacity:.7}.footer-github{color:inherit;align-items:center;gap:5px;text-decoration:none;transition:color .15s,transform .15s;display:inline-flex}.footer-github:hover{color:var(--text-secondary);transform:translateY(-1px)}.spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=1180px) and (width>=769px){.dashboard-container.is-wide{max-width:1080px}.servers-grid.is-three,.servers-grid.is-many{grid-template-columns:repeat(2,1fr)}.servers-grid.is-three .server-card:last-child,.servers-grid.is-many .server-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:100%;max-width:calc(50% - 8px)}}@media (width<=768px){.main-viewport{justify-content:flex-start;padding:16px 12px 28px}.dashboard-header{flex-direction:column;align-items:flex-start;gap:12px}.header-controls{justify-content:space-between;width:100%}.summary-grid{grid-template-columns:repeat(2,1fr);gap:8px}.summary-card{gap:10px;padding:10px 12px}.summary-icon{width:32px;height:32px}.summary-meta .value{font-size:1.05rem}.servers-grid,.servers-grid.is-single,.servers-grid.is-two,.servers-grid.is-three,.servers-grid.is-four,.servers-grid.is-many{grid-template-columns:1fr;gap:12px}.servers-grid.is-three .server-card:last-child,.servers-grid.is-three .server-card:last-child:nth-child(3n+1),.servers-grid.is-many .server-card:last-child,.servers-grid.is-many .server-card:last-child:nth-child(odd),.servers-grid.is-many .server-card:last-child:nth-child(3n+1){grid-column:auto;justify-self:stretch;max-width:none}.server-card{gap:14px;padding:16px 14px 14px}.metric-divider{height:30px}.node-flags{flex-wrap:wrap;justify-content:flex-end}.node-name{font-size:1.05rem}.used-value{font-size:1.38rem}.used-caption{font-size:.7rem}.analytics-section{padding:14px 12px}.chart-container{height:180px}.chart-axis-text{font-size:11px}.chart-end-label{font-size:10px}.dashboard-footer{padding-top:8px}}
