:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#08121e;color:#e6f1fc}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 20% 0,#102b43 0,transparent 42%),#08121e}main{max-width:1180px;padding:30px 22px 60px;margin:auto}.top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:46px}.brand{display:flex;align-items:center;gap:14px}.brandmark{display:grid;place-items:center;background:linear-gradient(140deg,#06cdac,#2578e9);width:46px;height:46px;border-radius:14px;color:#fff;font-size:28px;font-weight:800;box-shadow:0 6px 36px #04bd9c44}.brand h1{font-size:22px;margin:0;font-weight:650;letter-spacing:-.8px}.brand h1 b{color:#35e5b5}.brand p{margin:3px 0 0;color:#8295ad;font-size:12px;letter-spacing:.4px}.status{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #294153;background:#102331;border-radius:28px;color:#aabbd1;font-size:12px;white-space:nowrap}.dot{width:8px;height:8px;background:#f9a63c;border-radius:50%;box-shadow:0 0 8px #f9a63c55}.status.online .dot{background:#38eabb;box-shadow:0 0 10px #38eabb}.status.offline .dot{background:#ff6578;box-shadow:0 0 10px #ff6578}.section-title{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px}.eyebrow{color:#2dd5b4;letter-spacing:2.2px;font-size:11px;font-weight:700}.section-title h2{font-size:29px;letter-spacing:-.9px;margin:7px 0 0;font-weight:650}.logout{background:transparent;border:1px solid #3a4f68;color:#aebfd1;padding:10px 15px;border-radius:10px;cursor:pointer}.server-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card,.server{border:1px solid #284052;background:linear-gradient(150deg,#142a3a,#101f30 60%);border-radius:20px;box-shadow:0 16px 40px #0002}.server{padding:22px;min-width:0}.server-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.server-head h3{margin:0;font-size:17px}.server-head small{display:block;margin-top:6px;color:#7b91a6;font-size:12px;font-variant-numeric:tabular-nums}.live-label{font-size:10px;font-weight:800;letter-spacing:1.2px;color:#8d9caf;border:1px solid #415264;padding:6px 9px;border-radius:8px}.live-label.up{color:#3fe2ad;border-color:#207b68;background:#0c4b3b55}.gauges{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.gauge{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.gauge svg{width:100%;max-width:195px;display:block}.gauge .number{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);text-align:center;font-size:26px;font-weight:750;font-variant-numeric:tabular-nums}.gauge .caption{text-align:center;margin-top:-7px;font-size:13px;color:#9eb2c6}.gauge .sub{text-align:center;color:#667e95;font-size:11px;min-height:16px;margin-top:5px;font-variant-numeric:tabular-nums}.trace{margin-top:18px;border-top:1px solid #294055;padding-top:19px}.trace-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.trace-head span{color:#9aaec0;font-size:12px}.trace-head b{color:#40dfb1;font-size:10px;letter-spacing:1.3px}.trace canvas{width:100%;height:112px;display:block}.trace-ram canvas{height:78px}.trace-bottom{display:flex;justify-content:space-between;color:#627d92;font-size:10px;margin-top:4px}.footstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.footstat{padding:11px 13px;background:#081a29;border:1px solid #1f3b50;border-radius:10px}.footstat span{display:block;color:#8aa3b6;font-size:11px}.footstat b{display:block;margin-top:6px;font-size:18px;font-variant-numeric:tabular-nums}.offline-overlay{color:#f6b166!important}.auth{margin:12vh auto 0;max-width:410px;padding:30px}.auth-icon{display:grid;place-items:center;background:#143e4b;border-radius:14px;width:48px;height:48px;color:#35ddbf;font-size:25px}.auth h2{font-size:26px;margin:20px 0 8px}.auth p{color:#9db2c6;line-height:1.6;font-size:13px}.auth label{display:block;font-size:12px;color:#a8bdd1;margin:16px 0}.auth input{display:block;background:#081726;border:1px solid #2b4c62;color:#fff;width:100%;border-radius:10px;padding:14px;margin-top:8px;font:inherit;outline:none}.auth input:focus{border-color:#35d8b7}.auth button{background:#1fd3ab;border:0;color:#07201f;font-size:15px;font-weight:800;width:100%;padding:14px;border-radius:11px;cursor:pointer;margin-top:10px}.error{color:#ff8999!important;min-height:18px}footer{margin-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:#74899f}[hidden]{display:none!important}@media(max-width:760px){main{padding:19px 12px 45px}.top{margin-bottom:30px}.brand h1{font-size:18px}.brandmark{width:41px;height:41px}.brand p{font-size:10px}.status{font-size:0;padding:10px}.status .dot{width:10px;height:10px}.section-title h2{font-size:25px}.server-grid{grid-template-columns:1fr;gap:14px}.server{padding:18px}.auth{margin-top:10vh}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.local-intro{padding:18px 23px;margin-bottom:20px;border-color:#ba7331;background:linear-gradient(145deg,#3e2c26,#121e2d)}.local-intro h2{margin:0 0 8px;color:#ffd398;font-size:18px}.local-intro p{margin:7px 0;font-size:13px;line-height:1.5;color:#e6c29b}

/* Live oscilloscope: CSS motion is decorative, waveform vertices come only from real metrics. */
.gauge .arc {transition:stroke-dasharray .75s ease-out;filter:drop-shadow(0 0 5px currentColor)}
.server {position:relative;overflow:hidden;transition:border-color .4s,box-shadow .4s}
.server.is-live{border-color:#2b665d;box-shadow:0 16px 40px #0002,0 0 42px #13a48616}
.heartbeat{margin-top:22px;padding:12px 15px;border:1px solid #244355;background:linear-gradient(90deg,#081c2a,#102d3a);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.heartbeat-symbol{display:flex;align-items:center;gap:12px;min-width:0}
.heart-disc{display:grid;place-items:center;flex:none;font-size:20px;width:36px;height:36px;border:1px solid #355769;border-radius:50%;color:#628a91;transform:scale(1)}
.heartbeat-text{font-size:10px;font-weight:750;letter-spacing:1.05px;color:#8ba7b7}
.heartbeat-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;flex:none}
.heartbeat-clock{font-size:18px;font-weight:650;letter-spacing:.4px;font-variant-numeric:tabular-nums;color:#b9d5dd}
.heartbeat-age{font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#8aa5b6}
.server.is-live .heart-disc{color:#23e8b7;background:#073a37;border-color:#188b7b;box-shadow:0 0 20px #00ffbb22}
.server.is-live .heart-disc.beating{animation:heartbeat-real .63s ease-out 1}
@keyframes heartbeat-real{0%{transform:scale(1);box-shadow:0 0 0 0 #1ceabe77}30%{transform:scale(1.2);box-shadow:0 0 0 7px #1ceabe24}60%{transform:scale(.96);box-shadow:0 0 0 12px #1ceabe0a}100%{transform:scale(1);box-shadow:0 0 0 14px #1ceabe00}}
.trace{margin-top:20px;padding-top:16px}
.trace-head{margin-bottom:12px}
.trace-head span{font-weight:700;letter-spacing:.6px;font-size:10px;color:#b1cbd3}
.trace-head b{display:flex;align-items:center;gap:6px;color:#3be8bb}
.signal-light{display:inline-block;width:7px;height:7px;border-radius:50%;background:#526a75}
.server.is-live .signal-light{background:#25e5b3;box-shadow:0 0 12px #2bffb7a8}
.trace-stage{position:relative;overflow:hidden;border:1px solid #254257;border-radius:10px;background:linear-gradient(180deg,#0b2533,#0a1b2b)}
.trace canvas{width:100%;height:180px;display:block}
.trace-ram canvas{height:86px}
.scope-marker{pointer-events:none;position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;border-right:2px solid transparent}
.scope-marker span{font-size:9px;letter-spacing:.9px;color:#518379;padding:7px 8px;opacity:.6}
.server.is-live .scope-marker{border-right-color:#30e2b0;box-shadow:inset -12px 0 22px -20px #3afad2}
.trace-bottom{margin-top:7px;align-items:center;font-variant-numeric:tabular-nums}
.cpu-scale{color:#52b8a3}
.trace-ram{margin-top:17px}
@media(max-width:760px){.heartbeat{padding:10px}.heartbeat-text{font-size:9px;letter-spacing:.5px}.trace canvas{height:154px}.trace-ram canvas{height:77px}}
@media(prefers-reduced-motion:reduce){.server.is-live .heart-disc.beating{animation:none}}

/* Authenticated password recovery (session-protected, no SSH). */
.account-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.password-panel{padding:19px 22px;margin:0 0 22px;max-width:520px}
.password-panel h3{margin:0 0 8px;font-size:19px;color:#e8f6fd}
.password-panel p{font-size:12px;color:#a4b8cc;line-height:1.6}
.password-panel label{display:block;margin-top:14px;color:#b4cce0;font-size:12px}
.password-panel input{display:block;width:100%;background:#071827;color:#f4fdff;border:1px solid #36566c;border-radius:9px;padding:12px;margin-top:7px;font-size:15px}
.password-panel input:focus{outline:2px solid #35dfb5}
.password-panel .account-actions{margin-top:17px}
.password-panel .save-password{background:#1fd3ab;border:0;padding:11px 16px;border-radius:10px;color:#062b27;font-weight:700;cursor:pointer}
.password-panel button:disabled{opacity:.55;cursor:wait}
#password-message{min-height:18px;margin-bottom:0;color:#37e5b7}
@media(max-width:570px){.section-title{align-items:flex-start;flex-wrap:wrap}.account-actions{gap:7px}.logout{padding:8px 10px}}