:root{color-scheme:dark;--bg:#06131a;--panel:#0c2028;--panel2:#102a34;--line:#1e4651;--text:#edf9f7;--muted:#8eabb1;--green:#4ce1a0;--cyan:#46c8e8;--yellow:#f5c35d;--red:#ff6b6b;--purple:#a788ff;--shadow:0 24px 70px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{min-height:100vh;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 8% 2%,rgba(76,225,160,.12),transparent 30%),radial-gradient(circle at 90% 8%,rgba(70,200,232,.1),transparent 26%),linear-gradient(145deg,#051118,#071c24 65%,#06131a)}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.eyebrow{margin:0 0 6px;color:var(--green);font-size:.69rem;font-weight:800;letter-spacing:.16em}.muted{color:var(--muted)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(430px,100%);padding:42px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(160deg,rgba(16,42,52,.96),rgba(8,26,34,.96));box-shadow:var(--shadow)}.login-card h1{margin:4px 0;font-size:3rem;letter-spacing:-.05em}.brand-mark{width:56px;height:56px;position:relative;margin-bottom:30px;border-radius:18px;background:rgba(76,225,160,.1);border:1px solid rgba(76,225,160,.25)}.brand-mark span{position:absolute;left:15px;width:26px;height:8px;border:2px solid var(--green);border-radius:50%;transform:rotate(-28deg)}.brand-mark span:nth-child(1){top:11px}.brand-mark span:nth-child(2){top:22px}.brand-mark span:nth-child(3){top:33px}.brand-mark.small{width:42px;height:42px;margin:0;border-radius:13px}.brand-mark.small span{left:10px;width:21px;height:6px}.brand-mark.small span:nth-child(1){top:8px}.brand-mark.small span:nth-child(2){top:17px}.brand-mark.small span:nth-child(3){top:26px}.login-card form{display:grid;gap:18px;margin-top:30px}.login-card label{display:grid;gap:7px;color:var(--muted);font-size:.86rem;font-weight:700}.login-card input,.range-label select{width:100%;border:1px solid var(--line);border-radius:12px;background:#071820;color:var(--text);padding:13px 14px;outline:none}.login-card input:focus,.range-label select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(76,225,160,.12)}.primary{border:0;border-radius:12px;background:var(--green);color:#042017;padding:13px;font-weight:900}.form-error{min-height:1.2em;margin:0;color:var(--red);font-size:.84rem}
.dashboard{width:min(1500px,100%);margin:auto;padding:24px 28px 56px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.brand-inline{display:flex;align-items:center;gap:14px}.brand-inline h1{margin:0;font-size:1.55rem}.top-actions{display:flex;align-items:center;gap:12px}.pill{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(255,107,107,.08);color:#ff9b9b;font-size:.78rem}.pill span{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red)}.pill.online{background:rgba(76,225,160,.1);color:var(--green)}.pill.online span{background:var(--green);box-shadow:0 0 10px var(--green)}.quiet{border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);padding:9px 13px}.quiet:hover{color:var(--text);border-color:#3a6671}
.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}.metric,.panel{border:1px solid var(--line);background:linear-gradient(155deg,rgba(15,40,50,.96),rgba(8,27,35,.96));box-shadow:0 14px 38px rgba(0,0,0,.18)}.metric{padding:22px;border-radius:18px;overflow:hidden;position:relative}.metric p{margin:0 0 13px;color:var(--muted);font-size:.8rem;font-weight:700}.metric strong{display:block;font-size:2.15rem;letter-spacing:-.04em}.metric strong small{font-size:.9rem;color:var(--muted);margin-left:4px}.metric>small{color:var(--muted)}.metric-line{height:3px;margin-top:18px;background:#142f38;border-radius:4px;overflow:hidden}.metric-line span{display:block;height:100%;width:0;transition:width .35s}.temperature .metric-line span{background:var(--red)}.humidity .metric-line span{background:var(--cyan)}.light .metric-line span{background:var(--yellow)}.device strong{font-size:1.5rem;margin:17px 0 6px}
.content-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr);gap:14px}.panel{border-radius:20px;padding:24px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.panel h2{margin:0;font-size:1.25rem}.mode-switch{display:flex;padding:4px;border:1px solid var(--line);border-radius:12px;background:#06171e}.mode-switch button{border:0;border-radius:8px;background:transparent;color:var(--muted);padding:9px 12px;font-size:.8rem;font-weight:800}.mode-switch button.active{background:var(--green);color:#032018}.notice{padding:10px 13px;border-left:3px solid var(--yellow);background:rgba(245,195,93,.07);color:#c7b987;font-size:.8rem}.actuators{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actuator{padding:16px;border:1px solid #173c46;border-radius:15px;background:rgba(4,18,24,.42)}.actuator>div{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:6px}.actuator small{color:var(--muted)}.device-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:rgba(76,225,160,.1);color:var(--green);font-weight:900}.actuator input[type=range]{width:100%;margin-top:17px;accent-color:var(--green)}.toggle-row{display:flex;align-items:center;justify-content:space-between}.toggle-row>div{flex:1}.toggle{width:48px;height:26px;padding:3px;border:1px solid #31535c;border-radius:99px;background:#132d35}.toggle span{display:block;width:18px;height:18px;border-radius:50%;background:#81989d;transition:transform .2s,background .2s}.toggle[aria-checked=true]{background:rgba(76,225,160,.2);border-color:var(--green)}.toggle[aria-checked=true] span{transform:translateX(20px);background:var(--green)}.toggle.danger[aria-checked=true]{background:rgba(255,107,107,.18);border-color:var(--red)}.toggle.danger[aria-checked=true] span{background:var(--red)}.command-status{margin-top:14px;min-height:38px;padding:10px 13px;border-radius:10px;background:#071820;color:var(--muted);font-size:.8rem}.command-status.pending{color:var(--yellow)}.command-status.applied{color:var(--green)}.command-status.rejected{color:var(--red)}
.electrical-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.electrical-grid>div{padding:14px;border-radius:13px;background:#071820;border:1px solid #163640}.electrical-grid small,.electrical-grid span{display:block;color:var(--muted);font-size:.7rem}.electrical-grid strong{font-size:1.35rem}.thresholds{margin-top:19px;border-top:1px solid var(--line);padding-top:14px}.thresholds h3{font-size:.85rem;margin:0 0 10px}.thresholds p{display:flex;justify-content:space-between;gap:12px;margin:8px 0;color:var(--muted);font-size:.73rem}.thresholds b{color:#bed0d4;text-align:right}
.history-panel{margin-top:14px}.range-label{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.75rem}.range-label select{width:auto;padding:8px 30px 8px 10px}.chart-legend{display:flex;gap:18px;margin:18px 0 8px;color:var(--muted);font-size:.75rem}.chart-legend span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.temp-dot:before{background:var(--red)}.hum-dot:before{background:var(--cyan)}.light-dot:before{background:var(--yellow)}.chart{height:300px;min-width:0}.chart svg{width:100%;height:100%;overflow:visible}.grid-line{stroke:#173943;stroke-width:1}.axis-text{fill:#78959c;font-size:10px}.series-temp,.series-humidity,.series-light{fill:none;stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round}.series-temp{stroke:var(--red)}.series-humidity{stroke:var(--cyan)}.series-light{stroke:var(--yellow)}.empty{text-align:center;color:var(--muted);padding:50px}.actuator.disabled{opacity:.55}.actuator.disabled input,.actuator.disabled button{pointer-events:none}
@media(max-width:950px){.hero-grid{grid-template-columns:1fr 1fr}.content-grid{grid-template-columns:1fr}.electrical-panel{order:-1}}@media(max-width:620px){.dashboard{padding:16px 14px 36px}.topbar{align-items:flex-start}.top-actions{align-items:flex-end;flex-direction:column}.hero-grid{grid-template-columns:1fr 1fr;gap:9px}.metric{padding:17px}.metric strong{font-size:1.7rem}.metric.device strong{font-size:1rem}.panel{padding:18px}.panel-heading{align-items:flex-start;flex-direction:column}.actuators{grid-template-columns:1fr}.history-panel .panel-heading{flex-direction:row}.chart{height:240px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}