:root {
      --bg: #111111;
      --card: #1c1c1e;
      --text: #ffffff;
      --muted: #b3b3b3;
      --radius: 24px;
      --gap: 16px;
      --blue: #2f7cf6;
      --red: #d14b4b;
      --dashboard-font: Arial, sans-serif;
      --dashboard-page-padding: 20px 20px 152px;
      --dashboard-card-padding: 20px;
      --dashboard-panel-padding: 22px;
      --dashboard-panel-gap: 12px;
      --dashboard-card-shadow: 0 4px 20px rgba(0,0,0,0.2);
      --dashboard-card-inset: inset 0 0 0 1px rgba(255,255,255,0.04);
      --dashboard-pill-radius: 999px;
      --dashboard-label-color: rgba(255,255,255,0.64);
      --dashboard-note-color: rgba(255,255,255,0.62);
      --dashboard-label-size: 15px;
      --dashboard-note-size: 13px;
      --dashboard-title-size: 22px;
      --dashboard-meta-size: 14px;
      --dashboard-value-weight: 700;
      --dashboard-title-weight: 700;
      --dashboard-metric-value-weight: var(--dashboard-value-weight);
      --dashboard-card-title-weight: var(--dashboard-title-weight);
      --dashboard-label-weight: 400;
      --dashboard-status-weight: 400;
      --dashboard-badge-weight: var(--dashboard-value-weight);
      --dashboard-main-value-size: clamp(36px, 5.4vw, 58px);
      --dashboard-price-value-size: clamp(30px, 4.5vw, 44px);
      --dashboard-stat-value-size: clamp(28px, 3.8vw, 40px);
      --dashboard-source-value-size: clamp(28px, 3.8vw, 42px);
      --dashboard-energy-grid-gap: 14px;
      --dashboard-energy-layout-gap: 12px;
      --dashboard-energy-hero-panel-padding: 18px 20px;
      --dashboard-energy-hero-panel-gap: 10px;
      --dashboard-energy-row-gap: 12px;
      --dashboard-energy-meta-gap: 6px;
      --dashboard-energy-price-meta-top: 10px;
      --dashboard-energy-price-meta-width: 88px;
      --dashboard-energy-price-meta-size: 13px;
      --dashboard-energy-price-symbol-size: 12px;
      --dashboard-energy-status-size: clamp(17px, 2.4vw, 24px);
      --dashboard-energy-pill-min-height: 34px;
      --dashboard-energy-pill-padding: 0 14px;
      --dashboard-energy-pill-size: 14px;
      --dashboard-energy-quarter-padding-bottom: 26px;
      --dashboard-energy-quarter-header-gap: 14px;
      --dashboard-energy-quarter-header-margin: 12px;
      --dashboard-energy-quarter-subtitle-top: 6px;
      --dashboard-energy-quarter-strip-height: 116px;
      --dashboard-energy-quarter-strip-gap: 2px;
      --dashboard-energy-quarter-strip-margin: 18px;
      --dashboard-energy-quarter-bar-min-height: 16px;
      --dashboard-energy-quarter-bar-opacity: 0.96;
      --dashboard-energy-quarter-bar-transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
      --dashboard-energy-quarter-current-offset: -6px;
      --dashboard-energy-quarter-current-shadow: 0 0 0 3px rgba(255,255,255,0.88), 0 0 18px rgba(255,255,255,0.35);
      --dashboard-energy-quarter-current-brightness: 1.14;
      --dashboard-energy-quarter-footer-gap: 6px;
      --dashboard-energy-quarter-footer-size: 14px;
      --dashboard-energy-quarter-footer-top: 2px;
      --dashboard-energy-quarter-axis-gap: 2px;
      --dashboard-energy-quarter-axis-size: 14px;
      --dashboard-energy-quarter-hints-gap: 12px;
      --dashboard-energy-quarter-hints-size: 13px;
      --dashboard-energy-stat-card-min-height: 138px;
      --dashboard-energy-stat-value-top: 6px;
      --dashboard-energy-stat-note-size: 14px;
      --dashboard-energy-phase-card-min-height: 174px;
      --dashboard-energy-context-card-min-height: 142px;
      --dashboard-energy-section-header-gap: 12px;
      --dashboard-energy-section-header-margin: 8px;
      --dashboard-energy-item-radius: 20px;
      --dashboard-energy-phase-item-padding: 12px 15px;
      --dashboard-energy-phase-item-gap: 4px;
      --dashboard-energy-phase-name-size: 15px;
      --dashboard-energy-phase-meta-size: 14px;
      --dashboard-energy-source-item-padding: 16px 18px;
      --dashboard-energy-source-item-gap: 6px;
      --dashboard-energy-source-value-top: 4px;
      --dashboard-energy-source-state-min-height: 20px;
      --dashboard-energy-context-item-radius: 18px;
      --dashboard-energy-context-item-padding: 10px 13px;
      --dashboard-energy-context-item-gap: 4px;
      --dashboard-energy-context-label-size: 14px;
      --dashboard-energy-context-value-size: clamp(20px, 3vw, 30px);
      --dashboard-energy-context-note-size: 13px;
      --dashboard-energy-tight-line-height: 1;
      --dashboard-energy-value-line-height: 1.05;
      --dashboard-energy-main-letter-spacing: -0.04em;
      --dashboard-energy-value-letter-spacing: -0.03em;
      --dashboard-energy-context-letter-spacing: -0.02em;
      --dashboard-energy-meta-value-letter-spacing: -0.01em;
      --dashboard-energy-pill-letter-spacing: 0.02em;
      --dashboard-energy-axis-letter-spacing: 0.02em;
      --dashboard-energy-portrait-gap: 12px;
      --dashboard-energy-hero-portrait-columns: 1.35fr 0.95fr;
      --dashboard-energy-panel-portrait-padding: 18px;
      --dashboard-energy-quarter-portrait-padding-bottom: 34px;
      --dashboard-energy-phase-item-portrait-padding: 12px 14px;
      --dashboard-energy-quarter-strip-portrait-height: 126px;
      --dashboard-energy-quarter-strip-portrait-margin: 14px;
      --dashboard-tile-radius: 24px;
      --dashboard-large-tile-radius: 28px;
      --dashboard-control-tile-radius: 20px;
      --dashboard-control-label-size: 18px;
      --dashboard-control-state-size: 15px;
      --dashboard-control-title-size: 22px;
      --dashboard-control-section-gap: var(--dashboard-energy-layout-gap);
      --dashboard-control-grid-gap: var(--dashboard-energy-grid-gap);
      --dashboard-control-tile-min-height: 116px;
      --dashboard-control-tile-padding: 14px 12px;
      --dashboard-control-tile-gap: 8px;
      --dashboard-control-icon-size: 26px;
      --dashboard-controls-section-title-weight: var(--dashboard-label-weight);
      --dashboard-controls-tile-label-size: var(--dashboard-laundry-status-size);
      --dashboard-controls-tile-label-weight: var(--dashboard-title-weight);
      --dashboard-controls-title-weight: var(--dashboard-title-weight);
      --dashboard-controls-value-weight: var(--dashboard-value-weight);
      --dashboard-controls-zone-overlay-radius: 30px;
      --dashboard-controls-zone-overlay-title-size: 28px;
      --dashboard-controls-zone-all-off-width: 280px;
      --dashboard-controls-zone-all-off-height: 64px;
      --dashboard-controls-zone-grid-gap: var(--dashboard-energy-grid-gap);
      --dashboard-controls-zone-card-gap: 12px;
      --dashboard-controls-zone-header-gap: 14px;
      --dashboard-controls-zone-copy-gap: 4px;
      --dashboard-controls-zone-tile-min-height: 122px;
      --dashboard-controls-zone-tile-padding: var(--dashboard-energy-source-item-padding);
      --dashboard-controls-zone-status-inset: 16px;
      --dashboard-controls-zone-status-gap: 6px;
      --dashboard-controls-zone-meta-gap: 4px;
      --dashboard-controls-zone-overlay-gap: 18px;
      --dashboard-controls-zone-overlay-header-gap: 17px;
      --dashboard-controls-zone-overlay-close-size: 44px;
      --dashboard-controls-zone-overlay-padding: 24px 24px 22px;
      --dashboard-controls-zone-overlay-title-gap: 6px;
      --dashboard-controls-zone-overlay-close-font-size: 24px;
      --dashboard-controls-zone-overlay-grid-tile-min-height: 108px;
      --dashboard-controls-zone-empty-radius: 24px;
      --dashboard-controls-zone-empty-padding: 20px 22px;
      --dashboard-controls-zone-empty-gap: 6px;
      --dashboard-controls-zone-empty-title-size: 18px;
      --dashboard-controls-zone-dot-size: 10px;
      --dashboard-controls-zone-all-off-padding: 0 24px;
      --dashboard-tabbar-inset: 20px;
      --dashboard-tabbar-radius: 28px;
      --dashboard-tabbar-padding: 12px;
      --dashboard-tabbar-gap: 10px;
      --dashboard-tabbar-button-radius: 22px;
      --dashboard-tabbar-button-height: 84px;
      --dashboard-tabbar-home-button-height: 92px;
      --dashboard-tabbar-label-size: 17px;
      --dashboard-tabbar-content-gap: 7px;
      --dashboard-tabbar-glyph-size: 16px;
      --dashboard-tabbar-portrait-inset: 16px;
      --dashboard-tabbar-portrait-padding: 10px;
      --dashboard-tabbar-button-portrait-height: 76px;
      --dashboard-tabbar-home-button-portrait-height: 84px;
      --dashboard-laundry-title-size: 24px;
      --dashboard-laundry-value-size: clamp(56px, 6.8vw, 88px);
      --dashboard-laundry-program-size: 20px;
      --dashboard-laundry-status-size: 16px;
      --dashboard-laundry-grid-gap: var(--dashboard-energy-grid-gap);
      --dashboard-laundry-card-min-height: 208px;
      --dashboard-laundry-card-padding: var(--dashboard-energy-hero-panel-padding);
      --dashboard-laundry-card-icon-column: 108px;
      --dashboard-laundry-card-gap: 12px;
      --dashboard-laundry-icon-top: 4px;
      --dashboard-laundry-icon-size: 86px;
      --dashboard-laundry-content-gap: 8px;
      --dashboard-laundry-top-gap: 12px;
      --dashboard-laundry-status-gap: 8px;
      --dashboard-laundry-status-dot-size: 14px;
      --dashboard-laundry-program-min-height: 22px;
      --dashboard-laundry-progress-height: 10px;
      --dashboard-laundry-phase-min-height: 19px;
      --dashboard-clock-size: clamp(56px, 11vw, 96px);
      --dashboard-home-tight-line-height: 1.05;
      --dashboard-home-tight-letter-spacing: -0.03em;
      --dashboard-home-title-size: 18px;
      --dashboard-home-meta-size: clamp(18px, 3vw, 28px);
      --dashboard-home-small-gap: 10px;
      --dashboard-home-card-offset: 14px;
      --dashboard-home-temp-label-padding-top: 4px;
      --dashboard-home-temp-icon-size: 70px;
      --dashboard-home-temp-icon-opacity: 0.95;
      --dashboard-home-temp-value-offset: 20px;
      --dashboard-home-agenda-time-width: 150px;
      --dashboard-home-agenda-commute-opacity: 0.92;
      --dashboard-home-agenda-commute-stroke-width: 1.8;
      --dashboard-home-dot-size: 9px;
      --dashboard-home-dot-active-scale: 1.15;
      --dashboard-home-trash-side-width: 76px;
      --dashboard-home-toggle-margin: 14px;
      --dashboard-home-toggle-track-width: 108px;
      --dashboard-home-toggle-track-height: 60px;
      --dashboard-home-toggle-track-padding: 6px;
      --dashboard-home-toggle-thumb-size: 48px;
      --dashboard-home-toggle-thumb-offset: 48px;
      --dashboard-home-toggle-track-bg: #2a2a2d;
      --dashboard-home-toggle-thumb-bg: #f5f5f7;
      --dashboard-home-toggle-thumb-shadow: 0 3px 10px rgba(0,0,0,0.25);
      --dashboard-home-toggle-transition: background 0.2s ease;
      --dashboard-home-toggle-thumb-transition: transform 0.2s ease;
      --dashboard-home-off-opacity: 0.45;
      --dashboard-home-mode-size: clamp(20px, 3.6vw, 30px);
      --dashboard-home-momentary-min-width: 150px;
      --dashboard-home-momentary-padding: 18px 24px;
      --dashboard-home-momentary-size: clamp(18px, 3vw, 28px);
      --dashboard-home-momentary-transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
      --dashboard-action-active-scale: 0.98;
      --dashboard-home-agenda-day-min-height: 28px;
      --dashboard-home-agenda-list-top: 4px;
      --dashboard-home-agenda-list-gap: 12px;
      --dashboard-home-agenda-item-gap: 10px;
      --dashboard-home-trash-row-gap-offset: 4px;
      --dashboard-temp-value-size: clamp(38px, 6.8vw, 58px);
      --dashboard-agenda-day-size: clamp(18px, 3vw, 24px);
      --dashboard-trash-value-size: clamp(22px, 4vw, 36px);
      --dashboard-weather-panel-title-size: 17px;
      --dashboard-weather-panel-subtitle-size: 14px;
      --dashboard-weather-local-value-size: clamp(58px, 8.4vw, 82px);
      --dashboard-weather-local-condition-size: 21px;
      --dashboard-weather-metric-value-size: 22px;
      --dashboard-weather-forecast-value-size: 29px;
      --dashboard-weather-pollen-value-size: clamp(36px, 4.9vw, 48px);
      --dashboard-weather-symbol-large-size: 86px;
      --dashboard-weather-symbol-medium-size: 62px;
      --dashboard-weather-symbol-pollen-size: 54px;
      --dashboard-weather-layout-gap: 14px;
      --dashboard-weather-content-gap: 14px;
      --dashboard-weather-card-gap: 12px;
      --dashboard-weather-small-gap: 10px;
      --dashboard-weather-metric-radius: 22px;
      --dashboard-weather-inner-radius: 18px;
      --dashboard-weather-local-card-padding-y: 20px;
      --dashboard-weather-heading-gap: 4px;
      --dashboard-weather-pollen-symbol-padding: 10px;
      --dashboard-weather-local-stack-gap: 6px;
      --dashboard-weather-local-feel-size: 14px;
      --dashboard-weather-local-metric-padding: 16px 18px;
      --dashboard-weather-local-metric-gap: 6px;
      --dashboard-weather-local-metric-min-height: 86px;
      --dashboard-weather-label-size: 13px;
      --dashboard-weather-forecast-icon-column: 78px;
      --dashboard-weather-forecast-main-padding: 2px 0 0;
      --dashboard-weather-forecast-extremes-gap: 18px;
      --dashboard-weather-forecast-extreme-gap: 3px;
      --dashboard-weather-summary-note-size: 15px;
      --dashboard-weather-forecast-list-top: 2px;
      --dashboard-weather-forecast-list-radius: 18px;
      --dashboard-weather-forecast-row-gap: 16px;
      --dashboard-weather-forecast-row-padding: 12px 18px;
      --dashboard-weather-forecast-row-size: 14px;
      --dashboard-weather-summary-stat-padding: 12px 14px;
      --dashboard-weather-summary-stat-gap: 4px;
      --dashboard-weather-summary-stat-min-height: 84px;
      --dashboard-weather-chart-title-size: 22px;
      --dashboard-weather-chart-subtitle-size: 16px;
      --dashboard-weather-chart-base-min-height: 332px;
      --dashboard-weather-chart-page-min-height: 344px;
      --dashboard-weather-chart-compact-min-height: 280px;
      --dashboard-weather-chart-wide-min-height: 324px;
      --dashboard-weather-chart-label-size: 12px;
      --dashboard-weather-chart-value-size: 10px;
      --dashboard-weather-chart-grid-line-width: 1;
      --dashboard-weather-chart-axis-line-width: 1.2;
      --dashboard-weather-chart-tick-line-width: 1;
      --dashboard-weather-chart-line-width: 4;
      --dashboard-weather-chart-timeline-padding: 4px 42px 0;
      --dashboard-weather-chart-timeline-size: 12px;
      --dashboard-weather-chart-dots-gap: 10px;
      --dashboard-weather-chart-dots-margin: 10px;
      --dashboard-weather-chart-dot-size: 9px;
      --dashboard-weather-chart-dot-active-scale: 1.15;
      --dashboard-weather-portrait-top-gap: 14px;
      --dashboard-weather-condition-portrait-size: clamp(16px, 3vw, 24px);
      --dashboard-weather-stats-portrait-gap: 12px 16px;
      --dashboard-weather-page-portrait-gap: 12px;
      --dashboard-weather-page-portrait-rows: minmax(292px, 1.1fr) minmax(316px, 1.18fr) minmax(0, 1.86fr);
      --dashboard-weather-local-card-portrait-gap: 16px;
      --dashboard-weather-local-content-portrait-columns: minmax(0, 1fr) auto minmax(300px, 0.95fr);
      --dashboard-weather-local-content-portrait-gap: 16px;
      --dashboard-weather-local-value-portrait-size: clamp(54px, 8vw, 76px);
      --dashboard-weather-summary-grid-portrait-gap: 12px;
      --dashboard-weather-forecast-extreme-portrait-size: 30px;
      --dashboard-weather-chart-card-portrait-padding: 18px 16px 16px;
      --dashboard-climate-card-radius: 20px;
      --dashboard-climate-label-size: 14px;
      --dashboard-climate-small-label-size: 13px;
      --dashboard-climate-room-value-size: clamp(22px, 3.7vw, 32px);
      --dashboard-climate-stat-value-size: clamp(26px, 4.2vw, 36px);
      --dashboard-climate-target-value-size: clamp(26px, 4.3vw, 38px);
      --dashboard-climate-stepper-button-size: 30px;
      --dashboard-climate-trend-title-size: 17px;
      --dashboard-climate-inner-radius: 18px;
      --dashboard-climate-page-gap: 12px;
      --dashboard-climate-room-grid-gap: 10px;
      --dashboard-climate-detail-gap: 12px;
      --dashboard-climate-card-gap: 12px;
      --dashboard-climate-small-gap: 8px;
      --dashboard-climate-room-card-padding: 10px 14px;
      --dashboard-climate-rooms-shell-padding: 16px 20px 8px;
      --dashboard-climate-room-card-min-height: 76px;
      --dashboard-climate-control-tile-min-height: 104px;
      --dashboard-climate-control-tile-padding: 12px 10px;
      --dashboard-climate-control-tile-gap: 6px;
      --dashboard-climate-control-icon-size: 24px;
      --dashboard-climate-control-label-size: 15px;
      --dashboard-climate-control-state-size: 13px;
      --dashboard-climate-lock-padding: 14px 16px;
      --dashboard-climate-lock-title-size: 16px;
      --dashboard-climate-lock-title-margin: 4px;
      --dashboard-climate-lock-text-size: 14px;
      --dashboard-climate-lock-mode-top: 8px;
      --dashboard-climate-floor-zone-size: 18px;
      --dashboard-climate-floor-stat-padding: 14px;
      --dashboard-climate-floor-stat-gap: 4px;
      --dashboard-climate-stepper-side-width: 78px;
      --dashboard-climate-target-card-padding: 12px 14px;
      --dashboard-climate-target-card-gap: 2px;
      --dashboard-climate-co2-card-padding: 18px 18px 16px;
      --dashboard-climate-co2-card-gap: 10px;
      --dashboard-climate-co2-card-min-height: 160px;
      --dashboard-climate-step-button-min-height: 60px;
      --dashboard-climate-floor-dot-size: 8px;
      --dashboard-climate-trend-legend-gap: 18px;
      --dashboard-climate-trend-legend-dot-size: 10px;
      --dashboard-climate-trend-chart-height: 262px;
      --dashboard-climate-trend-axis-label-size: 12px;
      --dashboard-climate-trend-line-width: 4;
      --dashboard-climate-trend-point-stroke-width: 3;
      --dashboard-climate-controls-portrait-columns: repeat(3, 1fr);
      --dashboard-climate-room-portrait-columns: repeat(3, 1fr);
      --dashboard-climate-detail-portrait-columns: 1.2fr 0.8fr;
      --dashboard-climate-label-weight: var(--dashboard-label-weight);
      --dashboard-climate-title-weight: var(--dashboard-card-title-weight);
      --dashboard-climate-value-weight: var(--dashboard-value-weight);
      --dashboard-insight-row-gap: 12px;
      --dashboard-insight-card-gap: 10px;
      --dashboard-insight-card-min-height: 150px;
      --dashboard-insight-card-compact-min-height: 112px;
      --dashboard-insight-card-compact-padding: 16px;
      --dashboard-insight-label-size: 16px;
      --dashboard-insight-label-compact-size: 14px;
      --dashboard-insight-value-size: clamp(28px, 4vw, 42px);
      --dashboard-insight-value-compact-size: clamp(24px, 5vw, 38px);
      --dashboard-insight-subvalue-size: 15px;
      --dashboard-insight-subvalue-compact-size: 14px;
      --dashboard-insight-phase-value-size: 18px;
      --dashboard-insight-phase-list-gap: 12px;
      --dashboard-insight-phase-item-gap: 4px;
      --dashboard-insight-label-letter-spacing: 0.08em;
      --dashboard-insight-value-line-height: 1.05;
      --dashboard-insight-value-letter-spacing: -0.03em;
      --dashboard-insight-weather-top-gap: 16px;
      --dashboard-insight-weather-now-gap: 8px;
      --dashboard-insight-report-top-margin: 6px;
      --dashboard-insight-report-radius: 22px;
      --dashboard-insight-report-padding: 16px;
      --dashboard-insight-report-compact-padding: 14px;
      --dashboard-insight-report-title-size: 16px;
      --dashboard-insight-report-text-size: clamp(15px, 2vw, 18px);
      --dashboard-insight-report-text-line-height: 1.45;
      --dashboard-insight-report-text-gap: 4px;
      --dashboard-insight-chart-top-margin: 10px;
      --dashboard-insight-chart-header-gap: 12px;
      --dashboard-insight-chart-header-margin: 10px;
      --dashboard-weather-condition-size: clamp(18px, 2.8vw, 28px);
      --dashboard-weather-forecast-value-line-height: 0.96;
      --dashboard-weather-forecast-value-letter-spacing: var(--dashboard-home-tight-letter-spacing);
      --dashboard-weather-label-letter-spacing: 0.06em;
      --dashboard-weather-primary-value-weight: var(--dashboard-value-weight);
      --dashboard-weather-condition-weight: 600;
      --dashboard-weather-forecast-value-weight: var(--dashboard-value-weight);
      --dashboard-weather-row-value-weight: var(--dashboard-value-weight);
      --dashboard-weather-pollen-value-weight: 600;
      --dashboard-weather-pollen-value-line-height: 0.95;
      --dashboard-weather-pollen-value-letter-spacing: -0.04em;
      --dashboard-overlay-control-offset: 18px;
      --dashboard-overlay-control-min-width: 72px;
      --dashboard-overlay-control-padding: 12px 16px;
      --dashboard-overlay-control-size: 18px;
      --dashboard-overlay-control-bg: rgba(255,255,255,0.16);
      --dashboard-overlay-badge-padding: 10px 16px;
      --dashboard-overlay-badge-bg: rgba(0,0,0,0.55);
      --dashboard-overlay-blur: blur(8px);
      --dashboard-overlay-embed-portrait-width: 124vw;
      --dashboard-overlay-embed-portrait-height: 124vh;
      --dashboard-overlay-embed-portrait-scale: 0.805;
      --dashboard-overlay-secondary-portrait-offset: -18vh;
      --dashboard-screen-clean-content-gap: 18px;
      --dashboard-screen-clean-content-padding: 32px;
      --dashboard-screen-clean-label-size: clamp(24px, 4vw, 42px);
      --dashboard-screen-clean-countdown-size: clamp(96px, 20vw, 190px);
      --dashboard-screen-clean-countdown-line-height: 0.9;
      --dashboard-screen-clean-countdown-letter-spacing: -0.08em;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: var(--dashboard-font);
      touch-action: manipulation;
    }

    body {
      min-height: 100vh;
      overflow: hidden;
    }