:root{color-scheme:dark;--bg:#0b1016;--panel:#121b25;--line:#283746;--muted:#9bafc0;--text:#edf5fc;--accent:#78d4ee;--good:#82d9b2;--bad:#f19b8e;font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.55}a{color:var(--accent);text-decoration:none}button,input,select{font:inherit}button,.button{cursor:pointer;border:1px solid var(--line);background:#203445;color:var(--text);padding:10px 16px;border-radius:9px}button:hover,.button:hover{background:#304e64}button:disabled{opacity:.5;cursor:wait}input,select{width:100%;padding:11px 12px;background:#0c141c;color:var(--text);border:1px solid #385064;border-radius:8px}input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}label{display:block;color:var(--muted);font-size:14px;margin:14px 0 5px}form button{margin-top:20px}.layout{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}aside{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);padding:30px 18px;background:#101820;display:flex;flex-direction:column}.brand{font-weight:750;font-size:19px;letter-spacing:-.5px;display:flex;gap:12px;align-items:center}.brand img{width:38px;height:38px;border-radius:12px}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}nav{margin-top:30px;display:grid;gap:4px}nav a{padding:10px 13px;border-radius:8px;color:var(--muted);font-size:14px}nav a:hover,nav a.active{color:var(--text);background:#203445}nav small{padding:18px 13px 3px;color:#6f889c;font-size:10px;letter-spacing:1.7px}aside footer{margin-top:auto;padding:24px 12px 0;color:var(--muted);font-size:12px}main{padding:32px clamp(20px,3vw,52px);min-width:0;max-width:1600px;width:100%;margin:auto}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:30px;gap:14px}h1{font-size:30px;letter-spacing:-1px;line-height:1.2;margin:8px 0}h2{font-size:18px;margin:0 0 16px}h3{font-size:15px}.muted{color:var(--muted)}.small{font-size:12px}.pill{border:1px solid var(--line);border-radius:20px;padding:5px 12px;white-space:nowrap;font-size:12px}.good{color:var(--good)}.bad{color:var(--bad)}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}.card .value{font-size:30px;letter-spacing:-1px;margin:10px 0 4px;line-height:1.15}.card .label{color:var(--muted);font-size:12px}.card small{color:var(--muted)}.panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}.panel{margin-bottom:20px}.panels .panel{margin:0}.chart{display:block;width:100%;height:180px}.chart polyline{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}.chart .secondary{stroke:var(--good)}.chart line{stroke:var(--line)}.chart text{fill:var(--muted);font:11px sans-serif}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0}.toolbar input{max-width:420px}.toolbar select{max-width:210px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.5px;white-space:nowrap}td,th{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}td:first-child,th:first-child{padding-left:0}tr:last-child td{border-bottom:0}td.key{max-width:220px;overflow-wrap:anywhere}.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.login{max-width:470px;margin:8vh auto}.login .brand{margin-bottom:35px}.login h1{margin-top:20px}.login button{width:100%;background:#77d3ec;color:#10212c;font-weight:650}.login .panel{padding:32px}.login p{color:var(--muted);font-size:14px}.error{color:var(--bad);min-height:24px}.banner{border:1px solid #435b58;background:#142a26;color:#b4e2d0;border-radius:10px;padding:14px 18px;font-size:13px;margin:18px 0}.warning{border-color:#755e38;background:#30271b;color:#e9ce9b}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#09131b;border:1px solid var(--line);padding:18px;border-radius:10px;font-size:12px}.info{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:12px;font-size:13px}.info dt{color:var(--muted)}.info dd{margin:0;overflow-wrap:anywhere}#notice{position:fixed;bottom:25px;right:25px;max-width:450px;background:#264455;border:1px solid #6395a8;padding:14px 20px;border-radius:10px;display:none;z-index:30}.qr{background:white;padding:12px;width:230px;max-width:100%;border-radius:8px}.mobile-toggle{display:none}.danger{color:var(--bad)}.codes{user-select:all}.right{text-align:right}.empty{padding:35px;color:var(--muted);text-align:center}@media(min-width:901px){body.collapsed .layout{grid-template-columns:90px minmax(0,1fr)}body.collapsed aside{padding:25px 9px}body.collapsed aside .brand span,body.collapsed aside nav small,body.collapsed aside footer{display:none}body.collapsed nav a{font-size:10px;padding:9px 4px;overflow-wrap:anywhere}}@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:900px){.layout{display:block}aside{display:none;position:fixed;width:238px;z-index:20;box-shadow:20px 0 60px #0008}body.menu-open aside{display:flex}.mobile-toggle{display:block}main{padding:22px 18px}.panels,.grid-form{grid-template-columns:1fr}header{align-items:flex-start}h1{font-size:25px}.card{padding:18px}.card .value{font-size:25px}.login{margin:4vh auto;padding:18px}.login .panel{padding:25px}.info{grid-template-columns:1fr}.info dd{margin-bottom:8px}#notice{left:18px;right:18px;bottom:18px}}

/* Same visual language and summaries as the existing status.html graphs. */
.gauge-card{background:#191f30;border-color:#333b55;border-radius:17px;padding:20px;min-width:0}
.gauge{display:flex;align-items:center;gap:14px}.gauge svg{flex:none;transform:rotate(-90deg)}
.gauge-copy{min-width:0}.gauge .ring-bg{stroke:#ffffff16}.gauge .ring-fg{stroke-linecap:round;transition:stroke-dashoffset .55s cubic-bezier(.4,0,.2,1),stroke .4s ease}
.ring-cpu{stroke:#aa91ff}.ring-mem{stroke:#60d8ec}.ring-swap{stroke:#edbe65}.ring-disk{stroke:#5bddae}.ring-warning{stroke:#edbe65}.ring-critical{stroke:#f19b8e}.ring-unknown{stroke:#718098}
.gauge .num{font-size:27px;font-weight:650;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.6px}
.gauge .lbl{font-size:12px;color:#acbad2;margin-top:5px}.gauge-card .hint{font-size:12px;color:#9eafc9;margin-top:13px;line-height:1.6;font-variant-numeric:tabular-nums}
.monitor-uptime{font-size:12px;color:#9eafc9;margin:16px 0 0}
@media(min-width:1101px) and (max-width:1450px){.gauge-card{padding:16px}.gauge{gap:10px}.gauge svg{width:58px;height:58px}.gauge .num{font-size:24px}}
@media(max-width:540px){.gauge-card{padding:16px 12px}.gauge{flex-direction:column;gap:10px;text-align:center}.gauge .num{font-size:25px}.gauge-card .hint{text-align:center;font-size:11px}.gauge svg{width:68px;height:68px}}
@media(prefers-reduced-motion:reduce){.gauge .ring-fg{transition:none}}
.monitoring-chart{min-width:0;background:#191f30;border:1px solid #333b55;border-radius:19px;padding:21px;position:relative}
.chart-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;margin-bottom:16px}
.chart-heading h2{font-size:18px;margin:0;color:#e6ecfa;letter-spacing:-.2px}
.chart-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:#b6c3dc;align-items:center}
.chart-legend span{display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.chart-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:2px}
.series-cpu,.series-online{background:#aa91ff}.series-mem,.series-rx{background:#60d8ec}.series-swap{background:#edbe65}.series-tx{background:#5bddae}
.chart-body{position:relative;min-width:0}
.monitoring-chart canvas.chart{display:block;width:100%;height:228px;touch-action:pan-y;outline:none;border-radius:6px}
.monitoring-chart canvas.chart:focus-visible{outline:2px solid #aa91ff;outline-offset:4px}
.chart-summary{display:grid;gap:6px;margin-top:15px;color:#b6c3dc;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
.chart-summary>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.chart-summary>div>span:last-child{text-align:right}
.chart-summary>div:last-child{display:block;color:#98a9c7;font-size:11px;margin-top:4px}
.chart-tooltip{position:absolute;z-index:4;background:#0c1222f5;color:#e3ebff;border:1px solid #566488;border-radius:10px;padding:11px 14px;box-shadow:0 8px 24px #0005;font-size:12px;display:grid;gap:5px;pointer-events:none;max-width:calc(100% - 16px)}
.chart-tooltip strong{font-size:11px;font-weight:500;color:#b7c5df;border-bottom:1px solid #ffffff18;padding-bottom:5px}
.chart-tooltip[hidden],.chart-empty[hidden]{display:none}
.chart-empty{position:absolute;left:70px;right:20px;top:65px;text-align:center;color:#a4b0c7;background:#191f30d9;padding:10px;border-radius:8px;font-size:13px}
.chart-help{font-size:10px;color:#8495b4;margin:12px 0 0;line-height:1.5}
#charts.panels{align-items:start;margin-bottom:22px}
#client-detail .monitoring-chart{margin-top:20px}
@media(min-width:901px) and (max-width:1250px){#charts.panels{grid-template-columns:1fr}}
@media(max-width:540px){.monitoring-chart{padding:16px 12px}.chart-heading{padding:0 4px;gap:12px}.chart-heading h2{font-size:17px}.chart-legend{font-size:11px;gap:9px}.monitoring-chart canvas.chart{height:215px}.chart-summary{font-size:11px;gap:8px;padding:0 4px}.chart-summary>div{display:block}.chart-summary>div>span{display:block}.chart-summary>div>span:last-child{text-align:left;margin-top:2px}.chart-help{padding:0 4px}}

.legacy-overview{display:block;width:100%;height:900px;border:0;background:transparent;color-scheme:dark}