/* CSS domain: climate */
    .climate-page {
      width: 100%;
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-rows: auto;
      grid-auto-rows: min-content;
      align-content: start;
      gap: var(--dashboard-climate-page-gap);
      background: var(--bg);
      color: var(--text);
      padding: var(--dashboard-page-padding);
      overflow: hidden;
    }

    .climate-room-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--dashboard-climate-room-grid-gap);
    }

    .climate-room-card {
      min-height: var(--dashboard-climate-room-card-min-height);
      border-radius: var(--dashboard-climate-card-radius);
      background: #2a2a2d;
      padding: var(--dashboard-climate-room-card-padding);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    .climate-room-label {
      font-size: var(--dashboard-climate-label-size);
      font-weight: var(--dashboard-climate-label-weight);
      color: var(--muted);
      line-height: 1.2;
    }

    .climate-room-value {
      font-size: var(--dashboard-climate-room-value-size);
      font-weight: var(--dashboard-climate-value-weight);
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    .climate-detail-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: var(--dashboard-climate-detail-gap);
      align-items: stretch;
    }

    .climate-floor-shell,
    .climate-co2-shell {
      gap: var(--dashboard-climate-card-gap);
    }

    .climate-rooms-shell {
      gap: var(--dashboard-climate-small-gap);
      padding: var(--dashboard-climate-rooms-shell-padding);
    }

    .climate-section .climate-controls-grid {
      gap: var(--dashboard-climate-page-gap);
    }

    .climate-section {
      align-self: start;
    }

    .climate-section .control-tile {
      min-height: var(--dashboard-climate-control-tile-min-height);
      padding: var(--dashboard-climate-control-tile-padding);
      gap: var(--dashboard-climate-control-tile-gap);
    }

    .climate-section .control-icon {
      font-size: var(--dashboard-climate-control-icon-size);
    }

    .climate-section .control-label {
      font-size: var(--dashboard-climate-control-label-size);
    }

    .climate-section .control-state {
      font-size: var(--dashboard-climate-control-state-size);
    }

    .climate-lock-message {
      grid-column: 1 / -1;
      border-radius: 20px;
      background: rgba(255,255,255,0.06);
      padding: 16px;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 18px;
      align-items: center;
      text-align: left;
    }

    .climate-lock-copy {
      min-width: 0;
    }

    .climate-lock-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .climate-lock-subtitle {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.3;
    }

    .climate-lock-mode {
      margin-top: 10px;
      font-size: 15px;
      color: rgba(255,255,255,0.92);
      line-height: 1.3;
    }

    .climate-lock-note {
      font-size: 14px;
      color: rgba(255,255,255,0.78);
      line-height: 1.45;
      text-align: right;
    }

    .climate-lock-message.is-hidden {
      opacity: 0.45;
    }

    .climate-section .climate-lock-message {
      padding: var(--dashboard-climate-lock-padding);
    }

    .climate-section .climate-lock-title {
      font-size: var(--dashboard-climate-lock-title-size);
      margin-bottom: var(--dashboard-climate-lock-title-margin);
    }

    .climate-section .climate-lock-subtitle,
    .climate-section .climate-lock-mode {
      font-size: var(--dashboard-climate-lock-text-size);
    }

    .climate-section .climate-lock-mode {
      margin-top: var(--dashboard-climate-lock-mode-top);
    }

    .climate-floor-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--dashboard-climate-card-gap);
    }

    .climate-floor-zone {
      font-size: var(--dashboard-climate-floor-zone-size);
      font-weight: var(--dashboard-climate-title-weight);
      color: rgba(255,255,255,0.86);
      line-height: 1.2;
      text-align: left;
    }

    .climate-floor-hint {
      font-size: var(--dashboard-climate-small-label-size);
      color: var(--muted);
      line-height: 1.25;
      text-align: right;
    }

    .climate-floor-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--dashboard-climate-page-gap);
    }

    .climate-floor-stat {
      border-radius: var(--dashboard-climate-inner-radius);
      background: #2a2a2d;
      padding: var(--dashboard-climate-floor-stat-padding);
      display: flex;
      flex-direction: column;
      gap: var(--dashboard-climate-floor-stat-gap);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    .climate-floor-stat-label,
    .climate-co2-label {
      font-size: var(--dashboard-climate-label-size);
      font-weight: var(--dashboard-climate-label-weight);
      color: var(--muted);
      line-height: 1.2;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .climate-floor-stat-value,
    .climate-co2-value {
      font-size: var(--dashboard-climate-stat-value-size);
      font-weight: var(--dashboard-climate-value-weight);
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    .climate-floor-stepper {
      display: grid;
      grid-template-columns: var(--dashboard-climate-stepper-side-width) 1fr var(--dashboard-climate-stepper-side-width);
      gap: var(--dashboard-climate-page-gap);
      align-items: center;
    }

    .climate-step-button {
      min-height: var(--dashboard-climate-step-button-min-height);
      border: 0;
      border-radius: var(--dashboard-climate-card-radius);
      background: #2a2a2d;
      color: var(--text);
      font-size: var(--dashboard-climate-stepper-button-size);
      font-weight: var(--dashboard-climate-value-weight);
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
      transition: transform 0.08s ease, background 0.15s ease, opacity 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .climate-step-button:active {
      transform: scale(0.98);
    }

    .climate-step-button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .climate-floor-target-card {
      border-radius: var(--dashboard-climate-card-radius);
      background: #2a2a2d;
      padding: var(--dashboard-climate-target-card-padding);
      text-align: center;
      display: grid;
      gap: var(--dashboard-climate-target-card-gap);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    .climate-floor-target-value {
      font-size: var(--dashboard-climate-target-value-size);
      font-weight: var(--dashboard-climate-value-weight);
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    .climate-floor-note,
    .climate-co2-note {
      font-size: var(--dashboard-climate-small-label-size);
      color: var(--muted);
      line-height: 1.35;
    }

    .climate-floor-dots {
      display: flex;
      justify-content: center;
      gap: var(--dashboard-climate-small-gap);
      margin-top: -2px;
    }

    .climate-floor-dot {
      width: var(--dashboard-climate-floor-dot-size);
      height: var(--dashboard-climate-floor-dot-size);
      border-radius: 50%;
      background: rgba(255,255,255,0.18);
      transition: background 0.15s ease, transform 0.15s ease;
    }

    .climate-floor-dot.is-active {
      background: rgba(255,255,255,0.72);
      transform: scale(1.15);
    }

    .climate-co2-card {
      border-radius: var(--dashboard-climate-card-radius);
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      padding: var(--dashboard-climate-co2-card-padding);
      display: grid;
      gap: var(--dashboard-climate-co2-card-gap);
      align-content: start;
      align-self: stretch;
      min-height: var(--dashboard-climate-co2-card-min-height);
      height: 100%;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
      transition: background 0.18s ease, box-shadow 0.18s ease;
    }

    .climate-co2-card.is-good {
      background:
        radial-gradient(circle at top left, rgba(88, 168, 92, 0.18), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      box-shadow: inset 0 0 0 1px rgba(98, 180, 104, 0.12);
    }

    .climate-co2-card.is-elevated {
      background:
        radial-gradient(circle at top left, rgba(215, 179, 69, 0.18), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      box-shadow: inset 0 0 0 1px rgba(214, 181, 76, 0.12);
    }

    .climate-co2-card.is-high {
      background:
        radial-gradient(circle at top left, rgba(198, 84, 84, 0.18), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      box-shadow: inset 0 0 0 1px rgba(198, 84, 84, 0.12);
    }

    .climate-co2-shell {
      align-self: stretch;
    }

    .climate-co2-label {
      min-height: 1px;
    }

    .climate-trend-shell {
      gap: var(--dashboard-climate-page-gap);
    }

    .climate-trend-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--dashboard-climate-card-gap);
    }

    .climate-trend-title {
      font-size: var(--dashboard-climate-trend-title-size);
      font-weight: var(--dashboard-climate-title-weight);
      line-height: 1.2;
    }

    .climate-trend-subtitle {
      font-size: var(--dashboard-climate-small-label-size);
      color: var(--muted);
      line-height: 1.35;
      text-align: right;
    }

    .climate-trend-legend {
      display: flex;
      gap: var(--dashboard-climate-trend-legend-gap);
      flex-wrap: wrap;
    }

    .climate-trend-legend-item {
      display: inline-flex;
      align-items: center;
      gap: var(--dashboard-control-tile-gap);
      font-size: var(--dashboard-climate-small-label-size);
      color: rgba(255,255,255,0.88);
    }

    .climate-trend-legend-dot {
      width: var(--dashboard-climate-trend-legend-dot-size);
      height: var(--dashboard-climate-trend-legend-dot-size);
      border-radius: 50%;
      display: inline-block;
    }

    .climate-trend-legend-dot.is-indoor {
      background: #f6c55f;
      box-shadow: 0 0 12px rgba(246,197,95,0.35);
    }

    .climate-trend-legend-dot.is-outdoor {
      background: #69c7ff;
      box-shadow: 0 0 12px rgba(105,199,255,0.35);
    }

    .climate-trend-chart {
      width: 100%;
      height: var(--dashboard-climate-trend-chart-height);
      display: block;
    }

    .climate-trend-grid-line {
      stroke: rgba(255,255,255,0.08);
      stroke-width: 1;
    }

    .climate-trend-axis-label {
      fill: rgba(255,255,255,0.38);
      font-size: var(--dashboard-climate-trend-axis-label-size);
      text-anchor: middle;
    }

    .climate-trend-line {
      fill: none;
      stroke-width: var(--dashboard-climate-trend-line-width);
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .climate-trend-line.is-indoor {
      stroke: #f6c55f;
      filter: drop-shadow(0 0 10px rgba(246,197,95,0.18));
    }

    .climate-trend-line.is-outdoor {
      stroke: #69c7ff;
      filter: drop-shadow(0 0 10px rgba(105,199,255,0.15));
    }

    .climate-trend-point {
      stroke-width: var(--dashboard-climate-trend-point-stroke-width);
      fill: var(--card);
    }

    .climate-trend-point.is-indoor {
      stroke: #f6c55f;
    }

    .climate-trend-point.is-outdoor {
      stroke: #69c7ff;
    }