:root{font-family:IBM Plex Sans,sans-serif;--page-base: #f6f3ef;--page-bg: radial-gradient(circle at 10% 20%, rgba(236, 126, 70, .15), transparent 40%), radial-gradient(circle at 90% 10%, rgba(43, 103, 119, .18), transparent 45%), linear-gradient(135deg, #f8f4ef 0%, #f1efe9 55%, #eef2f4 100%);--ink: #101820;--muted: #5b6270;--subtle: #475569;--accent: #ec7e46;--accent-2: #2b6777;--panel: #ffffff;--panel-border: #e4ded7;--panel-highlight: rgba(43, 103, 119, .3);--panel-highlight-soft: rgba(43, 103, 119, .25);--panel-highlight-strong: rgba(43, 103, 119, .35);--shadow: 0 24px 50px rgba(15, 23, 42, .12);--shadow-soft: 0 10px 18px rgba(15, 23, 42, .12);--shadow-hover: 0 12px 20px rgba(15, 23, 42, .12);--shadow-hover-strong: 0 12px 20px rgba(15, 23, 42, .18);--shadow-tooltip: 0 16px 32px rgba(15, 23, 42, .2);--border-subtle: #d7cfc6;--border-strong: #ded6cd;--border-muted: rgba(148, 163, 184, .4);--surface-card: #f7f3ed;--surface-card-hover: #fffaf4;--surface-card-selected: #fff4ee;--surface-card-active: #fff3ea;--surface-control: #f3ede6;--surface-control-active: #fffaf4;--surface-table-row: #f8f5f0;--history-expand-bg: radial-gradient(circle at top left, rgba(255, 255, 255, .9), rgba(248, 245, 240, .9));--history-expand-border: rgba(226, 218, 209, .9);--history-expand-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 12px 24px rgba(15, 23, 42, .08);--grid-line: #e1d9d1;--axis-line: #cfc6bd;--axis-text: #6c7280;--cursor-line: rgba(16, 24, 32, .25);--empty-fill: rgba(248, 245, 240, .7);--empty-border: #e2dad1;--tooltip-bg: #111827;--tooltip-text: #f9fafb;--tooltip-active: rgba(248, 250, 252, .18);--legend-active-border: #f1c1a8;--legend-hover-border: rgba(248, 250, 252, .8);--history-caret: #9ca3af;--status-text: #1f2937;--error-bg: #fff0ee;--error-border: #f3c5bc;--error-text: #b3472e;--focus-ring: rgba(236, 126, 70, .6);color:var(--ink);background:var(--page-base);color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme]){--page-base: #0b1120;--page-bg: radial-gradient(circle at 10% 20%, rgba(236, 126, 70, .12), transparent 45%), radial-gradient(circle at 90% 10%, rgba(43, 103, 119, .2), transparent 50%), linear-gradient(135deg, #0b1120 0%, #0f172a 55%, #0b1a24 100%);--ink: #e2e8f0;--muted: #94a3b8;--subtle: #a1acbd;--accent: #f08c5b;--accent-2: #3a8aa0;--panel: #111827;--panel-border: #1f2a37;--panel-highlight: rgba(148, 163, 184, .3);--panel-highlight-soft: rgba(148, 163, 184, .2);--panel-highlight-strong: rgba(148, 163, 184, .45);--shadow: 0 24px 50px rgba(0, 0, 0, .45);--shadow-soft: 0 10px 18px rgba(0, 0, 0, .35);--shadow-hover: 0 12px 20px rgba(0, 0, 0, .4);--shadow-hover-strong: 0 12px 20px rgba(0, 0, 0, .6);--shadow-tooltip: 0 16px 32px rgba(0, 0, 0, .5);--border-subtle: #27364a;--border-strong: #2f3b4c;--border-muted: rgba(148, 163, 184, .3);--surface-card: #151f2b;--surface-card-hover: #1c2837;--surface-card-selected: rgba(236, 126, 70, .18);--surface-card-active: rgba(236, 126, 70, .24);--surface-control: #1b2533;--surface-control-active: #223042;--surface-table-row: #111a26;--history-expand-bg: radial-gradient(circle at top left, rgba(30, 41, 59, .9), rgba(15, 23, 42, .95));--history-expand-border: rgba(51, 65, 85, .9);--history-expand-shadow: inset 0 0 0 1px rgba(148, 163, 184, .15), 0 12px 24px rgba(0, 0, 0, .35);--grid-line: #283548;--axis-line: #334155;--axis-text: #94a3b8;--cursor-line: rgba(148, 163, 184, .4);--empty-fill: rgba(15, 23, 42, .7);--empty-border: #26364a;--tooltip-bg: #0f172a;--tooltip-text: #e2e8f0;--tooltip-active: rgba(148, 163, 184, .2);--legend-active-border: rgba(236, 126, 70, .4);--legend-hover-border: rgba(148, 163, 184, .7);--history-caret: #94a3b8;--status-text: #e2e8f0;--error-bg: #2b1a1a;--error-border: #5f2c2c;--error-text: #f2b8a2;--focus-ring: rgba(236, 126, 70, .7);color-scheme:dark}}:root[data-theme=dark]{--page-base: #0b1120;--page-bg: radial-gradient(circle at 10% 20%, rgba(236, 126, 70, .12), transparent 45%), radial-gradient(circle at 90% 10%, rgba(43, 103, 119, .2), transparent 50%), linear-gradient(135deg, #0b1120 0%, #0f172a 55%, #0b1a24 100%);--ink: #e2e8f0;--muted: #94a3b8;--subtle: #a1acbd;--accent: #f08c5b;--accent-2: #3a8aa0;--panel: #111827;--panel-border: #1f2a37;--panel-highlight: rgba(148, 163, 184, .3);--panel-highlight-soft: rgba(148, 163, 184, .2);--panel-highlight-strong: rgba(148, 163, 184, .45);--shadow: 0 24px 50px rgba(0, 0, 0, .45);--shadow-soft: 0 10px 18px rgba(0, 0, 0, .35);--shadow-hover: 0 12px 20px rgba(0, 0, 0, .4);--shadow-hover-strong: 0 12px 20px rgba(0, 0, 0, .6);--shadow-tooltip: 0 16px 32px rgba(0, 0, 0, .5);--border-subtle: #27364a;--border-strong: #2f3b4c;--border-muted: rgba(148, 163, 184, .3);--surface-card: #151f2b;--surface-card-hover: #1c2837;--surface-card-selected: rgba(236, 126, 70, .18);--surface-card-active: rgba(236, 126, 70, .24);--surface-control: #1b2533;--surface-control-active: #223042;--surface-table-row: #111a26;--history-expand-bg: radial-gradient(circle at top left, rgba(30, 41, 59, .9), rgba(15, 23, 42, .95));--history-expand-border: rgba(51, 65, 85, .9);--history-expand-shadow: inset 0 0 0 1px rgba(148, 163, 184, .15), 0 12px 24px rgba(0, 0, 0, .35);--grid-line: #283548;--axis-line: #334155;--axis-text: #94a3b8;--cursor-line: rgba(148, 163, 184, .4);--empty-fill: rgba(15, 23, 42, .7);--empty-border: #26364a;--tooltip-bg: #0f172a;--tooltip-text: #e2e8f0;--tooltip-active: rgba(148, 163, 184, .2);--legend-active-border: rgba(236, 126, 70, .4);--legend-hover-border: rgba(148, 163, 184, .7);--history-caret: #94a3b8;--status-text: #e2e8f0;--error-bg: #2b1a1a;--error-border: #5f2c2c;--error-text: #f2b8a2;--focus-ring: rgba(236, 126, 70, .7);color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--page-bg);color:var(--ink)}#root{padding:32px}.app{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:28px}.hero{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.app-topbar{display:flex;justify-content:flex-end;align-items:center}.theme-toggle{border:1px solid var(--border-subtle);background:var(--surface-control-active);color:var(--ink);border-radius:999px;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}.theme-toggle svg{width:18px;height:18px}.theme-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}.theme-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.eyebrow{font-family:Space Grotesk,sans-serif;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--muted);margin:0 0 8px}h1{font-family:Space Grotesk,sans-serif;font-size:clamp(2rem,3vw,3rem);margin:0 0 12px}h2{font-family:Space Grotesk,sans-serif;font-size:1.4rem;margin:0 0 16px}.subhead{max-width:440px;color:var(--muted);margin:0}.hero-card{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(120px,1fr));background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;padding:18px;box-shadow:var(--shadow)}.label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}.value{font-size:18px;font-weight:600;margin:0}.meta{margin:6px 0 0;font-size:.8rem;color:var(--muted)}.status-dot{width:8px;height:8px;border-radius:999px;display:inline-block;margin-right:8px;vertical-align:middle}.status-dot--live{background:#22c55e;box-shadow:0 0 0 4px #22c55e33;animation:pulse 2s ease-out infinite}.status-dot--stale{background:#f59e0b;box-shadow:0 0 0 4px #f59e0b33}.error{background:var(--error-bg);border:1px solid var(--error-border);color:var(--error-text);padding:12px 16px;border-radius:12px}.grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.4fr);gap:24px}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;padding:20px;box-shadow:var(--shadow)}.panel.highlight{border:1px solid var(--panel-highlight)}.device-list{display:flex;flex-direction:column;gap:12px}.device-card{border:1px solid transparent;border-radius:16px;padding:14px 16px;text-align:left;background:var(--surface-card);cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,border .2s ease,box-shadow .2s ease}.device-card:hover{transform:translateY(-2px);border-color:var(--panel-highlight-strong);box-shadow:var(--shadow-hover)}.device-card.selected{border-color:var(--accent);background:var(--surface-card-selected)}.device-card h3{margin:0;font-size:1.1rem}.device-meta{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:.9rem}.snapshot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}.muted{color:var(--muted);margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.history-actions{display:flex;align-items:center;gap:12px}.lookback-control{display:inline-flex;align-items:center;gap:6px;padding:4px;border-radius:999px;background:var(--surface-control);border:1px solid var(--border-subtle)}.lookback-toggle{border:none;background:transparent;padding:6px 12px;font-size:.82rem;font-weight:600;color:var(--subtle);border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}.lookback-toggle:hover{color:var(--ink)}.lookback-toggle.active{background:var(--surface-control-active);color:var(--ink);box-shadow:var(--shadow-soft)}.lookback-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.export-button{border:1px solid var(--border-subtle);background:var(--surface-control-active);color:var(--ink);border-radius:999px;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.export-button svg{width:16px;height:16px}.export-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}.export-button:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}.chart{background:var(--surface-card);border-radius:16px;padding:16px;margin-bottom:16px;position:relative}.chart svg{display:block;width:100%;height:auto}.grid-lines line{stroke:var(--grid-line);stroke-dasharray:4 6}.status-bands rect{pointer-events:none}.empty-state rect{fill:var(--empty-fill);stroke:var(--empty-border);stroke-dasharray:6 6}.empty-state text{fill:var(--axis-text);font-size:.85rem;text-anchor:middle}.axis line{stroke:var(--axis-line)}.axis text{fill:var(--axis-text);font-size:.7rem;text-anchor:end}.axis-x text{text-anchor:middle}.axis-humidity text{text-anchor:start}.cursor line{stroke:var(--cursor-line);stroke-dasharray:4 4}.live-indicator{pointer-events:none}.live-indicator .pulse{fill:#ec7e4640;animation:pulse 2s ease-out infinite;transform-origin:center;transform-box:fill-box}.live-indicator .core{fill:var(--accent)}.chart-tooltip{position:absolute;top:12px;transform:translate(-50%);background:var(--tooltip-bg);color:var(--tooltip-text);padding:10px 12px;border-radius:10px;font-size:.8rem;box-shadow:var(--shadow-tooltip);min-width:160px;pointer-events:none}.chart-tooltip--left{transform:translate(0)}.chart-tooltip--right{transform:translate(-100%)}.chart-tooltip--below{transform:translate(-50%)}.chart-tooltip--below.chart-tooltip--left{transform:translate(0)}.chart-tooltip--below.chart-tooltip--right{transform:translate(-100%)}.chart-tooltip--above{transform:translate(-50%,-100%)}.chart-tooltip--above.chart-tooltip--left{transform:translateY(-100%)}.chart-tooltip--above.chart-tooltip--right{transform:translate(-100%,-100%)}.tooltip-title{font-weight:600;margin-bottom:6px}.tooltip-row{display:flex;align-items:center;gap:6px;margin-top:4px;border-radius:8px;padding:2px 6px;transition:background .2s ease,color .2s ease}.tooltip-row.is-active{background:var(--tooltip-active);color:var(--tooltip-text)}@keyframes pulse{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.6);opacity:0}to{transform:scale(1.6);opacity:0}}.line{fill:none;stroke-width:2.5;transition:opacity .2s ease,stroke-width .2s ease}.line.indoor{stroke:var(--accent)}.line.outdoor{stroke:var(--accent-2)}.line.setpoint{stroke-width:2;stroke-dasharray:6 6;opacity:.85}.line.setpoint.cool{stroke:#4a90e2}.line.setpoint.heat{stroke:#e04f5f}.line.humidity{stroke-width:2;stroke-dasharray:3 4;opacity:.8}.line.humidity.indoor{stroke:#16a34a}.line.humidity.outdoor{stroke:#0ea5a4}.chart[data-hovered-series] .line{opacity:.2}.chart[data-hovered-series=indoorTemp] .line.indoor,.chart[data-hovered-series=outdoorTemp] .line.outdoor,.chart[data-hovered-series=coolSetpoint] .line.setpoint.cool,.chart[data-hovered-series=heatSetpoint] .line.setpoint.heat,.chart[data-hovered-series=indoorHumidity] .line.humidity.indoor,.chart[data-hovered-series=outdoorHumidity] .line.humidity.outdoor{opacity:1;stroke-width:3.2}.chart[data-hovered-series] .cursor .dot{opacity:.25}.chart[data-hovered-series=indoorTemp] .cursor .dot.indoor,.chart[data-hovered-series=outdoorTemp] .cursor .dot.outdoor,.chart[data-hovered-series=coolSetpoint] .cursor .dot.setpoint.cool,.chart[data-hovered-series=heatSetpoint] .cursor .dot.setpoint.heat,.chart[data-hovered-series=indoorHumidity] .cursor .dot.humidity.indoor,.chart[data-hovered-series=outdoorHumidity] .cursor .dot.humidity.outdoor{opacity:1;stroke:#f8fafc;stroke-width:1.5}.chart-legend{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;font-size:.85rem;color:var(--muted);margin-top:8px}.legend-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-strong);border-radius:999px;padding:6px 10px;background:transparent;color:inherit;cursor:pointer;font:inherit;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.legend-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}.legend-toggle.active{background:var(--surface-card-selected);color:var(--ink);border-color:var(--legend-active-border)}.legend-toggle.hovered{border-color:var(--legend-hover-border);box-shadow:var(--shadow-hover-strong);color:var(--ink)}.legend-band{width:22px;height:8px;border-radius:999px;background:linear-gradient(90deg,#60a5fa99,#f9731699,#e2e8f0cc)}.dot{width:10px;height:10px;border-radius:999px;display:inline-block}.dot.indoor{background:var(--accent)}.dot.outdoor{background:var(--accent-2)}.dot.setpoint{border-radius:6px;width:9px;height:9px}.dot.setpoint.cool{background:#4a90e2}.dot.setpoint.heat{background:#e04f5f}.dot.humidity{border-radius:999px;width:9px;height:9px}.dot.humidity.indoor{background:#16a34a}.dot.humidity.outdoor{background:#0ea5a4}.history-table{display:grid;gap:6px}.history-scroll{display:grid;gap:6px;max-height:320px;overflow-y:auto;padding-right:4px}.history-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:6px}.history-range{margin:0;color:var(--muted);font-size:.85rem}.history-pagination-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.history-page-button{border-radius:999px;border:1px solid var(--border-muted);background:var(--surface-control-active);padding:6px 16px;font-size:.85rem;font-weight:600;color:var(--ink);cursor:pointer;transition:border .2s ease,background .2s ease,box-shadow .2s ease}.history-page-button:disabled{cursor:not-allowed;opacity:.6;box-shadow:none}.history-page-button:not(:disabled):hover{border-color:var(--legend-active-border);background:var(--surface-card-active);box-shadow:var(--shadow-soft)}.history-page-indicator{font-size:.85rem;font-weight:600;color:var(--subtle)}.history-item{display:grid;gap:6px}.history-row{display:grid;grid-template-columns:2fr repeat(4,1fr);padding:8px 10px;border-radius:10px;background:var(--surface-table-row);font-size:.9rem}.history-row--interactive{border:1px solid transparent;cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;position:relative;transition:transform .2s ease,box-shadow .2s ease,border .2s ease,background .2s ease}.history-row--interactive:hover{transform:translateY(-1px);border-color:var(--panel-highlight-soft);box-shadow:var(--shadow-hover);background:var(--surface-card-hover)}.history-row--interactive:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.history-row--interactive.is-expanded{border-color:var(--panel-highlight-strong);background:var(--surface-card-active)}.history-status{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--status-text);flex-wrap:wrap}.history-status-dot{width:10px;height:10px;border-radius:999px;background:var(--status-color, #cbd5f5);box-shadow:0 0 0 3px color-mix(in srgb,var(--status-color, #cbd5f5) 25%,transparent)}.history-caret{margin-left:auto;width:10px;height:10px;border-right:2px solid var(--history-caret);border-bottom:2px solid var(--history-caret);transform:rotate(45deg);transition:transform .2s ease}.history-caret.expanded{transform:rotate(-135deg)}.history-expand{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;padding:14px 16px;border-radius:14px;background:var(--history-expand-bg);border:1px solid var(--history-expand-border);box-shadow:var(--history-expand-shadow)}.history-row.header{background:transparent;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:var(--muted)}@media (max-width: 900px){#root{padding:20px}.history-header{flex-direction:column;align-items:flex-start;gap:12px}.history-actions{flex-wrap:wrap;width:100%}.history-actions .muted{flex:1 1 100%}.lookback-control{flex-wrap:wrap}.export-button{width:32px;height:32px;align-self:center}.hero{flex-direction:column}.hero-card{grid-template-columns:1fr;width:100%}.grid{grid-template-columns:1fr}.history-row{grid-template-columns:1.4fr repeat(2,1fr);grid-auto-flow:row}.history-row span:nth-child(4),.history-row span:nth-child(5){display:none}.history-expand{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.history-pagination{justify-content:center}}