:root{color-scheme:dark;--bg:#091311;--panel:#10211d;--line:#244139;--text:#effbf7;--muted:#91aaa1;--mint:#62e6b5;--cyan:#62cbe6;--danger:#ff806f}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#153128 0,var(--bg) 42%);color:var(--text);font:16px/1.5 system-ui,sans-serif;min-height:100vh}
.site-header{height:64px;padding:0 max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#091311cc;backdrop-filter:blur(12px)}
.site-header a{color:var(--text);font-weight:750;text-decoration:none}
.site-header form{margin:0}
main{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:46px 0 72px}
h1,h2,p{margin-top:0}h1{font-size:clamp(2rem,5vw,4.2rem);letter-spacing:-.05em;margin-bottom:0}h2{font-size:1.35rem;margin-bottom:0}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--mint);font-weight:800;margin-bottom:6px}.muted{color:var(--muted)}
.hero,.panel-heading,.form-actions{display:flex;justify-content:space-between;align-items:center;gap:20px}.hero{margin-bottom:30px}
.badge{border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-weight:750}.badge.online{color:var(--mint);border-color:#348a6a}.badge.offline{color:var(--danger);border-color:#834b44}
.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
.metrics article,.panel,.login-card{background:linear-gradient(145deg,#132923,#0e1d19);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px #0004}
.metrics article{padding:18px}.metrics span{display:block;color:var(--muted);font-size:.8rem}.metrics strong{font-size:1.18rem}.panel{padding:24px;margin-bottom:20px}
#history-chart{width:100%;min-height:260px;margin-top:20px;background:#091713;border-radius:12px}.grid-line{stroke:#244139;stroke-width:1}.temp-line{fill:none;stroke:var(--mint);stroke-width:3}.fan-line{fill:none;stroke:var(--cyan);stroke-width:2}.chart-label{fill:var(--muted);font-size:18px}
.legend{display:flex;gap:20px;color:var(--muted);font-size:.85rem;margin-top:10px}.legend span:before{content:"";display:inline-block;width:20px;height:3px;margin:0 7px 3px 0}.temperature-key:before{background:var(--mint)}.fan-key:before{background:var(--cyan)}
.control-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.control-grid label,.login-card label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-weight:650}
input,select{width:100%;border:1px solid var(--line);border-radius:10px;background:#091713;color:var(--text);padding:10px;font:inherit}input[type=radio]{width:auto}input[type=range]{padding:0;accent-color:var(--mint)}
.mode-picker{display:flex;gap:20px;border:0;padding:0}.mode-picker legend{color:var(--muted);font-size:.85rem;margin-bottom:8px}.mode-picker label{display:flex;gap:7px;align-items:center}
button,.primary{border:0;border-radius:10px;padding:10px 16px;font:inherit;font-weight:800;cursor:pointer}.primary{background:var(--mint);color:#062018}.link-button{color:var(--muted);background:transparent;padding:6px}
.error,#save-message.error{color:var(--danger)}#save-message.success{color:var(--mint)}
.login-card{width:min(420px,100%);padding:30px;margin:8vh auto}.login-card form{display:grid;gap:18px}.login-card .primary{width:100%}.form-actions{justify-content:flex-end}
@media(max-width:900px){.metrics{grid-template-columns:repeat(3,1fr)}.control-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){main{padding-top:26px}.hero,.panel-heading,.form-actions{align-items:flex-start;flex-direction:column}.metrics{grid-template-columns:repeat(2,1fr)}.control-grid{grid-template-columns:1fr}.panel{padding:18px}}