:root{color-scheme:dark;--page-bg: linear-gradient(180deg, #0f1715 0, #121b18 42%, #0b1110 100%);--panel: #151c19;--panel-alpha: rgba(21, 28, 25, .92);--panel-2: #1b2521;--control: #101815;--ink: #ecefed;--muted: #a7b1ac;--line: #34453f;--accent: #007c70;--accent-contrast: #ffffff;--accent-2: #b84a2a;--accent-2-contrast: #ffffff;--danger: #ff6369;--ok: #30a46c;--wait: #ffc53d;--ok-line: rgba(48, 164, 108, .34);--ok-soft: rgba(48, 164, 108, .14);--wait-line: rgba(255, 197, 61, .32);--wait-soft: rgba(255, 197, 61, .13);--danger-line: rgba(255, 99, 105, .34);--danger-soft: rgba(255, 99, 105, .13);--pill-bg: rgba(21, 28, 25, .82);--focus: rgba(18, 165, 148, .36);--tooltip-bg: rgba(236, 239, 237, .95);--tooltip-ink: #101815;--overlay-bg: rgba(4, 7, 6, .62);--toast-bg: rgba(229, 72, 77, .95);--shadow: 0 18px 44px rgba(0, 0, 0, .34);--modal-shadow: 0 26px 80px rgba(0, 0, 0, .5);--canvas-bg: #080d0c;--canvas-border: var(--line);--canvas-shadow: inset 0 1px 2px rgba(0, 0, 0, .52);--canvas-text: rgba(236, 239, 237, .68);--threshold-rail: rgba(8, 13, 12, .86);--threshold-current: #ffc53d;--threshold-trigger: rgba(156, 166, 161, .56);--humidity-band: rgba(18, 165, 148, .52);--temperature-band: rgba(229, 77, 46, .5);--dehumidifier-color: #12a594;--heater-color: #e54d2e}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--page-bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body.modal-open{overflow:hidden}main{width:min(980px,100%);margin:0 auto;padding:0 16px 32px}header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-bottom:18px;margin-bottom:14px;border-bottom:1px solid var(--line)}h1{margin:0;font-size:42px;font-weight:850;line-height:1;letter-spacing:0}.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:var(--pill-bg);padding:10px;min-height:40px;color:var(--muted);white-space:nowrap;font-size:14px;font-weight:700;cursor:pointer}.pill svg{display:block;flex:0 0 auto;width:18px;height:18px}.pills{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.header-title-group{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;flex:1 1 auto}.pill.ok{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok)}.pill.wait{border-color:var(--wait-line);background:var(--wait-soft);color:var(--wait)}.pill.err{border-color:var(--danger-line);background:var(--danger-soft);color:var(--danger)}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}section{grid-column:span 12;background:var(--panel-alpha);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:14px}section.climate{background:transparent;border:0;box-shadow:none;padding:0 0 10px}.metric-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.metric{--metric-value-size: 64px;min-height:128px;display:flex;flex-direction:column;justify-content:space-between}label,.label{color:var(--muted);font-size:13px;font-weight:650}.metric-label{color:var(--muted);font-size:13px;font-weight:750;letter-spacing:0;margin-bottom:8px}.metric-value{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;width:100%}.metric strong{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:var(--metric-value-size);font-weight:820;letter-spacing:0;line-height:.9}.metric strong small{color:var(--muted);font-size:30px;font-weight:750;line-height:1}.metric-trend{display:inline-flex;align-items:center;justify-content:center;justify-self:end;flex:0 0 auto;width:calc(var(--metric-value-size) * .6);height:calc(var(--metric-value-size) * .6);margin-bottom:calc(var(--metric-value-size) * .075);color:var(--muted)}.metric-trend svg{display:block;width:100%;height:100%;opacity:1;transition:opacity .5s ease}.metric-trend.is-changing svg{opacity:0}@media(prefers-reduced-motion:reduce){.metric-trend svg{transition:none}}.threshold-row{display:block;margin-top:10px}button{min-height:42px;border:1px solid var(--line);border-radius:8px;background:var(--control);color:var(--ink);font-weight:750;font-size:15px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}button:active{transform:translateY(1px)}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}button.warn{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-2-contrast)}.duty-cycle{display:grid;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.duty-cycle-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.duty-cycle-title{color:var(--ink);font-size:15px;font-weight:800}.duty-window{color:var(--muted);font-size:13px;font-weight:650}.duty-window{text-align:right}.duty-row{display:grid;gap:6px;min-width:0}.duty-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.duty-row-head strong{color:var(--ink);font-size:14px;font-weight:850;font-variant-numeric:tabular-nums}.duty-canvas,.threshold-canvas{display:block;width:100%;height:32px;border:1px solid var(--canvas-border);border-radius:7px;background:var(--canvas-bg);box-shadow:var(--canvas-shadow)}.duty-canvas{cursor:help}.duty-tooltip,.ui-tooltip{position:fixed;z-index:80;max-width:calc(100vw - 16px);border-radius:5px;background:var(--tooltip-bg);color:var(--tooltip-ink);padding:5px 8px;box-shadow:0 8px 22px #16272d33;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2;pointer-events:none;white-space:nowrap}.duty-tooltip[hidden],.ui-tooltip[hidden]{display:none}button:disabled{opacity:.48;cursor:not-allowed;transform:none}form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:grid;gap:6px}.wide{grid-column:span 2}.settings-panel{min-width:0;margin:0;border:0;border-radius:0;background:transparent;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.environment-settings-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;grid-column:1 / -1}.settings-panel-section{display:none}.settings-panel-section.active{display:grid}input,select{width:100%;min-height:42px;border:1px solid var(--line);border-radius:8px;background:var(--control);color:var(--ink);padding:9px 10px;font:inherit}select{appearance:none;background:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%),var(--control);background-position:calc(100% - 17px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px),0 0;background-size:5px 5px,5px 5px,100% 100%;background-repeat:no-repeat;padding-right:32px}.plug-assignment-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}.plug-assignment-row button{min-width:92px;padding:0 14px}.status-value{min-height:42px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--ink);padding:9px 10px;font-weight:750;overflow-wrap:anywhere}.learned-panel{border:1px solid var(--line);border-radius:8px;background:var(--panel-2);padding:8px;display:grid}.learned-panel-head{display:flex;align-items:top;justify-content:space-between;gap:8px}.learned-panel-title{color:var(--ink);font-size:13px;font-weight:850}.learned-reset{min-height:30px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 9px;border-radius:6px;font-size:13px;font-weight:800}.learned-reset svg{width:14px;height:14px;flex:0 0 auto}.learned-grid{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px}.learned-grid div{min-width:0}.learned-grid dt{color:var(--muted);font-size:11px;font-weight:750;line-height:1.2}.learned-grid dd{margin:1px 0 0;color:var(--ink);font-size:12px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1.2;overflow-wrap:anywhere}.settings-actions,.modal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}input:focus,select:focus,button:focus{outline:3px solid var(--focus);outline-offset:1px}h2{margin:0 0 12px;font-size:19px;letter-spacing:0}.toast{position:fixed;left:50%;bottom:18px;z-index:90;min-width:min(320px,calc(100vw - 32px));padding:12px 14px;border-radius:8px;background:var(--toast-bg);color:var(--accent-contrast);box-shadow:0 18px 42px #4b181e38;font-size:14px;font-weight:800;text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .16s ease,transform .16s ease}.toast.visible{opacity:1;pointer-events:auto;transform:translate(-50%)}.action-toast{bottom:72px;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);text-align:left}.toast-message{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.toast-close,.modal-close{padding:0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.toast-close svg,.modal-close svg{display:block}.toast-close{width:32px;min-height:32px;border-color:#ffffff47;background:#ffffff1f;color:var(--accent-contrast)}.toast-close:hover{background:#fff3}.toast-close svg{width:17px;height:17px}.modal-backdrop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;overflow:hidden;background:var(--overlay-bg);opacity:0;pointer-events:none;transition:opacity .18s ease}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal-backdrop[hidden]{display:none}.modal{width:min(460px,100%);max-height:min(720px,calc(100dvh - 32px));border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--modal-shadow);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .18s ease,transform .18s ease}.modal-backdrop.open .modal{opacity:1;transform:translateY(0) scale(1)}.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0}.modal-close{width:36px;min-height:36px;border-color:transparent;background:transparent;color:var(--muted)}.modal-close:hover{border-color:var(--line);background:var(--panel-2);color:var(--ink)}.modal-close svg{width:18px;height:18px}.modal-body{min-height:0;display:grid;gap:12px;padding:14px;overflow-y:auto;overscroll-behavior:contain}.modal-footer{display:grid;gap:8px;padding:12px 14px 14px;border-top:1px solid var(--line);background:var(--panel)}.settings-modal{width:min(760px,100%);max-height:min(780px,calc(100dvh - 32px));display:flex;flex-direction:column}.settings-form{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:0;overflow:hidden}.settings-modal-body{flex:1 1 auto;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);align-content:stretch;overflow:hidden}.settings-panel-scroll{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px;overflow-y:auto;overscroll-behavior:contain}.settings-modal-footer{grid-template-columns:auto auto;justify-content:end;align-items:center}.settings-modal-footer button{min-width:160px}@media(prefers-reduced-motion:reduce){.modal-backdrop,.modal{transition-duration:.01ms}}@media(min-width:820px){section.primary{grid-column:span 12}.metric{--metric-value-size: 72px}.metric strong small{font-size:32px}.learned-grid{grid-template-columns:repeat(4,minmax(0,1fr))}main{padding-top:28px}}@media(max-width:819px){main{padding-top:14px}header{align-items:flex-start}h1{font-size:34px}.header-title-group{align-items:flex-start;flex-direction:column;justify-content:flex-start;gap:10px}.pills{justify-content:flex-start}.metric-row,form{grid-template-columns:1fr}.metric-row{gap:12px}.metric{min-height:118px;padding:0}.metric+.metric{padding-left:0}.metric{--metric-value-size: 54px}.metric strong small{font-size:26px}.settings-panel,.settings-modal-body,.settings-panel-scroll,.settings-modal-footer{grid-template-columns:1fr}.settings-modal-footer button{width:100%}.wide{grid-column:span 1}.settings-actions,.modal-actions,.plug-assignment-row{grid-template-columns:1fr}#settingsPanelDehumidifier,#settingsPanelHeater{grid-template-columns:repeat(2,minmax(0,1fr))}#settingsPanelDehumidifier>.field:first-child,#settingsPanelHeater>.field:first-child,#settingsPanelDehumidifier>.environment-settings-row,#settingsPanelHeater>.environment-settings-row,#settingsPanelDehumidifier>.learned-panel,#settingsPanelHeater>.learned-panel{grid-column:1 / -1}#settingsPanelDehumidifier .plug-assignment-row,#settingsPanelHeater .plug-assignment-row{grid-template-columns:minmax(0,1fr) auto}}