:root{--brand-blue: #3d97f2;--brand-blue-soft: #a9d3fb;--brand-orange: #f39221;--brand-orange-soft: #f8c48f;--sidebar-bg: #2a78d6;--data-blue: #2a78d6;--data-orange: #eb6834;--data-teal: #0e8a6a;--brand-teal-soft: #9fd9c6;--bg: #f3f6fa;--card: #ffffff;--text: #1c2430;--muted: #6b7684;--border: #e3e7ed;--chart-grid: #eceff3;--accent: var(--data-blue);--ok: #2f9e44;--bad: #e03131;--radius: 16px;--shadow: 0 1px 2px rgb(16 24 40 / .04);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}@media(prefers-color-scheme:dark){:root{--sidebar-bg: #1f5fae;--data-blue: #3987e5;--data-orange: #d95926;--data-teal: #199e70;--bg: #12161c;--card: #1b2129;--text: #e6eaef;--muted: #8b95a3;--border: #2c343e;--chart-grid: #252c35}}*{box-sizing:border-box}body{margin:0;background:var(--bg)}code{font-size:.9em}.layout{display:flex;min-height:100vh}.content{flex:1;min-width:0;padding:28px 32px 40px}.sidebar{position:sticky;top:0;height:100vh;flex:0 0 120px;background:var(--sidebar-bg);color:#fff;display:flex;flex-direction:column;align-items:center;padding:18px 0;transition:flex-basis .2s ease;overflow-y:auto}.sidebar.collapsed{flex-basis:72px}.sidebar-toggle{color:#fff;border:0;padding:6px;margin-bottom:28px;border-radius:8px}.sidebar-toggle:hover:not(:disabled){background:#ffffff1f}.sidebar ul{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:6px}.sidebar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;color:#ffffffd1;text-decoration:none}.sidebar a:hover{color:#fff;background:#ffffff14}.sidebar a.active{color:#fff;background:#ffffff24}.sidebar a.active:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);border:9px solid transparent;border-right-color:var(--bg)}.sidebar a:focus-visible,.sidebar-toggle:focus-visible{outline:2px solid #fff;outline-offset:-2px}.sidebar-label{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.3}.sidebar.collapsed .sidebar-label,.sidebar-short{display:none}.header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px}.header h1{font-size:1.9rem;font-weight:700;margin:0;line-height:1.15}.subtitle{margin:2px 0 0;color:var(--muted);font-size:1rem}.status{display:flex;gap:8px}.status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--card);border:1px solid var(--border);border-radius:999px;font-size:.8rem;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%}.status-pill.ok .dot{background:var(--ok)}.status-pill.bad .dot{background:var(--bad)}.empty{color:var(--muted)}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}.card-title{font-size:.95rem;font-weight:600;margin:0 0 12px}.value-temp{color:var(--data-blue)}.value-humidity{color:var(--data-orange)}.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px}.toolbar-label{color:var(--muted);font-size:.9rem}.segmented{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:3px}.segmented button{border:0;border-radius:999px;padding:5px 14px;font-size:.85rem}.segmented button.active{background:var(--accent);color:#fff}.sensor-list{display:flex;flex-direction:column;gap:20px}.sensor-card{display:flex;flex-direction:column;gap:10px;--series: var(--data-blue);--series-soft: var(--brand-blue-soft)}.sensor-card.cat-gas{--series: var(--data-orange);--series-soft: var(--brand-orange-soft)}.cat-humidity,.cat-pressure,.cat-aqi{--series: var(--data-teal);--series-soft: var(--brand-teal-soft)}.card.stale{opacity:.55}.card-head{display:flex;align-items:center;gap:8px}.card-head h2{font-size:1.05rem;font-weight:600;margin:0}.sensor-source{margin-left:auto;font-size:.75rem;color:var(--muted)}.sensor-row{display:flex;align-items:center;gap:28px}.sensor-chart{flex:1;min-width:0}.sensor-gauge{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto}.download-btn{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;padding:5px 12px;border-radius:999px;color:var(--series, var(--data-blue))}.badge{font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;color:#fff}.badge.offline{background:var(--muted)}.gauge{width:150px;flex:0 0 auto}.gauge svg{display:block;width:100%;height:auto}.gauge-track{fill:none;stroke:var(--series-soft, var(--brand-blue-soft));stroke-width:6;stroke-linecap:round}.gauge-fill{fill:none;stroke:var(--series, var(--data-blue));stroke-width:6;stroke-linecap:round}.gauge-knob{fill:var(--series, var(--data-blue));stroke:var(--card);stroke-width:2}.gauge-tick{stroke:var(--border);stroke-width:1}.gauge-center{fill:var(--series, var(--data-blue))}.gauge-value{fill:#fff;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}.gauge-unit{color:var(--text);font-weight:600}.gauge-scale{display:flex;justify-content:space-between;padding:0 18px;margin-top:-6px;font-size:.7rem;color:var(--muted)}button{font:inherit;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:10px;padding:6px 12px;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.4;cursor:not-allowed}.env-widgets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.env-widget{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;border-radius:20px;padding:20px 22px}.env-widget-head{display:flex;align-items:center;gap:8px;position:relative;z-index:1}.env-widget-head h2{font-size:1rem;font-weight:600;margin:0;flex:1}.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;color:var(--muted)}.icon-btn:hover:not(:disabled){color:var(--text)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.env-split{display:flex;align-items:center;gap:24px}.env-stat{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.env-stat.center{align-items:center}.env-value{font-size:2.6rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}.env-value small{font-size:.45em;font-weight:500;color:var(--muted);margin-left:4px}.env-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--border);font-size:.8rem;font-weight:500}.env-hero{background:linear-gradient(135deg,var(--brand-blue),var(--sidebar-bg));border:0;color:#fff}.env-hero .icon-btn{color:#ffffffd9;border-color:#ffffff59}.env-hero .icon-btn:hover:not(:disabled){color:#fff;border-color:#fff}.env-hero-body{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:1;flex:1}.env-hero-text{display:flex;flex-direction:column;gap:8px}.env-hero-value{font-size:3.4rem;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}.env-hero-sub{font-size:.9rem;font-weight:500;opacity:.95}.thermo{width:70px;height:auto;flex:0 0 auto;margin-right:24px}.thermo-tube{fill:#ffffff2e;stroke:#ffffffb3;stroke-width:2}.thermo-fill,.thermo-bulb{fill:#fff;transition:y .6s ease,height .6s ease}.thermo-tick{stroke:#ffffffb3;stroke-width:2;stroke-linecap:round}.env-hero .cloud{position:absolute;background:#ffffff38;border-radius:999px;pointer-events:none}.env-hero .cloud:before{content:"";position:absolute;background:inherit;border-radius:50%}.env-hero .c1{width:130px;height:38px;right:120px;bottom:-8px}.env-hero .c1:before{width:60px;height:60px;left:24px;top:-30px}.env-hero .c2{width:80px;height:24px;right:190px;top:26px;opacity:.7}.env-hero .c2:before{width:36px;height:36px;left:18px;top:-18px}.drop{width:110px;height:auto;flex:0 0 auto}.drop-bg{fill:var(--bg)}.drop-outline{fill:none;stroke:var(--series);stroke-width:3}.drop-wave{fill:var(--series);opacity:.9;animation:drop-wave 3.5s linear infinite}@keyframes drop-wave{0%{transform:translate(0)}to{transform:translate(40px)}}@media(prefers-reduced-motion:reduce){.drop-wave{animation:none}}.comfort-bar{position:relative;height:8px;border-radius:999px;background:var(--chart-grid)}.comfort-zone{position:absolute;left:30%;width:30%;top:0;bottom:0;border-radius:999px;background:var(--series-soft)}.comfort-marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:var(--series);border:3px solid var(--card);box-shadow:0 1px 3px #0003;transition:left .6s ease}.comfort-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:-6px}.dial{width:100%;max-width:300px;height:auto;align-self:center;overflow:visible}.dial-track{fill:none;stroke:var(--chart-grid);stroke-width:10;stroke-linecap:round}.dial-fill{fill:none;stroke:var(--series-soft);stroke-width:10;stroke-linecap:round}.dial-tick{stroke:var(--muted);stroke-width:1;opacity:.5}.dial-tick.major{stroke-width:2;opacity:.9}.dial-label{fill:var(--muted);font-size:9px;font-variant-numeric:tabular-nums}.dial-needle{fill:var(--series);transform-box:view-box;transform-origin:100px 100px;transition:transform .8s cubic-bezier(.3,1.4,.5,1)}.dial-hub{fill:var(--card);stroke:var(--series);stroke-width:4}.trend-up,.trend-down{font-weight:600}.aqi-seg{fill:none;stroke-width:14}.aqi-good{stroke:#3bb143;background:#3bb143}.aqi-moderate{stroke:#f2c94c;background:#f2c94c}.aqi-usg{stroke:#f2994a;background:#f2994a}.aqi-unhealthy{stroke:#eb5757;background:#eb5757}.aqi-very{stroke:#9b51e0;background:#9b51e0}.aqi-hazardous{stroke:#7e1f3d;background:#7e1f3d}.aqi-pointer{fill:var(--card);stroke:var(--text);stroke-width:4;transition:cx .6s ease,cy .6s ease}.aqi-value{fill:var(--text);font-size:34px;font-weight:600;font-variant-numeric:tabular-nums}.aqi-dot{width:10px;height:10px;border-radius:50%}.chart{position:relative}.chart svg{display:block;overflow:visible;touch-action:none}.chart .gridline{stroke:var(--chart-grid);stroke-width:1}.chart .axis{fill:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.chart .end-label{fill:var(--text);font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}.chart .temp-line{fill:none;stroke:var(--series, var(--data-blue));stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.chart .crosshair{stroke:var(--muted);stroke-width:1}.chart .temp-dot{fill:var(--series, var(--data-blue));stroke:var(--card);stroke-width:2}.chart-empty{height:170px;display:grid;place-items:center;color:var(--muted);font-size:.85rem}.chart-tooltip{position:absolute;top:0;transform:translate(8px);pointer-events:none;z-index:1;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px 8px;font-size:.78rem;white-space:nowrap;box-shadow:0 4px 12px #0000001f}.chart-tooltip.left{transform:translate(calc(-100% - 8px))}.chart-tooltip .tt-time{color:var(--muted);margin-bottom:2px}.chart-tooltip strong{font-variant-numeric:tabular-nums}.swatch{display:inline-block;width:10px;height:2px;vertical-align:middle;margin-right:4px;background:var(--series, var(--data-blue))}@media(max-width:720px){.layout{flex-direction:column-reverse}.content{padding:20px 16px 24px}.sidebar,.sidebar.collapsed{position:sticky;bottom:0;top:auto;height:auto;flex-basis:auto;flex-direction:row;padding:0;z-index:2}.sidebar-toggle{display:none}.sidebar ul{flex-direction:row;gap:0}.sidebar li{flex:1}.sidebar a{padding:10px 4px}.sidebar a.active:after{display:none}.sidebar-label,.sidebar.collapsed .sidebar-label{display:none}.sidebar-short{display:block;font-size:.62rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.sidebar a{gap:4px}.env-widgets{grid-template-columns:1fr}.env-hero-value{font-size:2.8rem}.env-hero .c2{display:none}.env-hero .c1{right:90px;width:100px}.sensor-row{flex-direction:column;align-items:stretch;gap:8px}.sensor-gauge{align-self:center}}.modal{width:min(520px,calc(100vw - 32px));padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--text);box-shadow:0 20px 50px #10182840}.modal::backdrop{background:#10182873}.modal form{display:flex;flex-direction:column;gap:16px;padding:22px 24px}.modal-head h2{margin:0;font-size:1.2rem;font-weight:700}.modal-head p{margin:2px 0 0;color:var(--muted);font-size:.85rem}.presets{display:flex;flex-wrap:wrap;gap:6px}.presets button{border-radius:999px;font-size:.8rem;padding:4px 12px}.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.field{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}.field input{font:inherit;font-size:.9rem;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:8px 10px;color-scheme:light dark;width:100%;min-width:0}.field input:focus{outline:2px solid var(--accent);outline-offset:-1px}.modal-note{margin:0;font-size:.75rem;color:var(--muted);line-height:1.5}.modal-error{margin:0;font-size:.85rem;color:var(--bad)}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.modal-actions .primary{display:inline-flex;align-items:center;gap:6px;background:var(--accent);border-color:var(--accent);color:#fff}.modal-actions .primary:disabled{opacity:.6}@media(max-width:480px){.field-row{grid-template-columns:1fr}}