:root {
  --widget-ink: #08265d;
  --widget-muted: #315d91;
  --widget-glass: rgba(200, 228, 244, 0.21);
  --widget-edge: rgba(255, 255, 255, 0.9);
  --tile: rgba(104, 126, 139, 0.16);
  --tile-strong: rgba(214, 226, 232, 0.2);
  --tile-edge: rgba(255, 255, 255, 0.82);
  --tile-edge-soft: rgba(189, 211, 221, 0.38);
  --tile-shadow: 0 10px 25px rgba(24, 72, 105, 0.12), inset 0 1px 0 rgba(255,255,255,.78), inset 1px 0 0 rgba(255,255,255,.24);
  --blue-halo: rgba(23, 137, 248, 0.16);
  --green-halo: rgba(28, 196, 113, 0.16);
  --orange-halo: rgba(246, 126, 50, 0.14);
}

:root[data-theme="dark"] {
  --widget-ink: #edf8ff;
  --widget-muted: #9fc5df;
  --widget-glass: rgba(7, 22, 33, 0.49);
  --widget-edge: rgba(187, 225, 244, 0.3);
  --tile: rgba(16, 37, 51, 0.3);
  --tile-strong: rgba(52, 78, 96, 0.33);
  --tile-edge: rgba(203, 234, 248, 0.25);
  --tile-edge-soft: rgba(114, 176, 207, 0.16);
  --tile-shadow: 0 13px 29px rgba(0,0,0,.26), inset 0 1px 0 rgba(226,246,255,.11), inset 1px 0 0 rgba(186,226,245,.055);
  --blue-halo: rgba(29, 153, 245, 0.22);
  --green-halo: rgba(27, 210, 121, 0.19);
  --orange-halo: rgba(246, 125, 46, 0.18);
}

html { min-width: 280px; }

body {
  min-height: 100vh;
  margin: 0;
  padding: clamp(.5rem, 2.2vw, 1rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--widget-ink);
  background-color: #b7d5e3;
  background-image:
    linear-gradient(118deg, rgba(180,220,239,.15), rgba(238,247,251,.025) 45%, rgba(247,226,204,.09)),
    url("../assets/mountain-lake-light.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden;
  isolation: isolate;
}

:root[data-theme="dark"] body {
  background-color: #091722;
  background-image:
    linear-gradient(118deg, rgba(2,15,25,.66), rgba(8,27,40,.57) 48%, rgba(20,25,29,.64)),
    url("../assets/mountain-lake-dark.jpg");
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

body::before {
  background: linear-gradient(110deg, rgba(214,242,253,.16), transparent 35%, rgba(255,240,218,.1) 76%, transparent);
  opacity: .74;
}

body::after {
  background:
    radial-gradient(circle at 11% 18%, rgba(255,255,255,.32) 0 .5%, transparent 5%),
    radial-gradient(circle at 64% 23%, rgba(255,244,218,.27) 0 .6%, transparent 6%),
    radial-gradient(circle at 91% 79%, rgba(225,250,237,.21) 0 .8%, transparent 7%);
  filter: blur(11px);
  opacity: .5;
}

:root[data-theme="dark"] body::before { background: linear-gradient(115deg, rgba(29,104,142,.1), transparent 40%, rgba(110,76,42,.08)); opacity: .7; }
:root[data-theme="dark"] body::after { opacity: .25; }

.ambient::before { width: 32rem; height: 32rem; left: -13rem; top: -14rem; background: #c9f2ff; opacity: .14; filter: blur(76px); }
.ambient::after { width: 34rem; height: 34rem; right: -14rem; bottom: -16rem; background: #ebd5a7; opacity: .11; filter: blur(82px); }
:root[data-theme="dark"] .ambient::before { background: #147db5; opacity: .12; }
:root[data-theme="dark"] .ambient::after { background: #846630; opacity: .08; }

.widget {
  position: relative;
  isolation: isolate;
  width: min(100%, 31.5rem);
  display: grid;
  gap: .65rem;
  padding: clamp(.65rem, 2.2vw, .9rem);
  overflow: hidden;
  border: 1px solid var(--widget-edge);
  outline: 1px solid rgba(255,255,255,.48);
  outline-offset: -5px;
  border-radius: 1.55rem;
  background:
    linear-gradient(125deg, rgba(255,255,255,.22), transparent 31%, rgba(255,255,255,.055) 69%, rgba(196,224,240,.1)),
    var(--widget-glass);
  box-shadow: 0 27px 68px rgba(22,66,95,.24), 0 2px 8px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(113,163,192,.17);
  backdrop-filter: blur(13px) saturate(124%);
  -webkit-backdrop-filter: blur(13px) saturate(124%);
}

.widget::before,
.widget::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}

.widget::before {
  background:
    linear-gradient(112deg, rgba(255,255,255,.25), rgba(255,255,255,.035) 18%, transparent 39%),
    radial-gradient(ellipse at 50% -20%, rgba(255,255,255,.25), transparent 47%);
}

.widget::after {
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.widget > * { position: relative; z-index: 1; }
:root[data-theme="dark"] .widget { outline-color: rgba(203,235,250,.11); box-shadow: 0 33px 78px rgba(0,0,0,.43), 0 0 28px rgba(19,112,158,.06), inset 0 1px 0 rgba(221,243,252,.17), inset 0 -1px 0 rgba(0,0,0,.28); }
:root[data-theme="dark"] .widget::before { background: linear-gradient(112deg, rgba(203,238,253,.1), transparent 24%, transparent 72%, rgba(71,163,202,.035)); }

.widget-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem .7rem;
  padding: .15rem .25rem .05rem;
}

.identity { min-width: 0; display: flex; align-items: center; gap: .7rem; }
.brand-icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 1rem;
  color: #147bd5;
  background:
    radial-gradient(circle at 25% 2%, rgba(255,255,255,.62), transparent 43%),
    linear-gradient(145deg, rgba(217,242,255,.58), rgba(73,159,222,.2));
  box-shadow: 0 8px 19px rgba(19,101,160,.13), inset 0 1px 0 rgba(255,255,255,.88);
}
.brand-icon svg { width: 1.75rem; height: 1.75rem; filter: drop-shadow(0 0 5px rgba(20,123,213,.18)); }
.identity-copy { min-width: 0; display: block; }
.title-row { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.identity h1 { margin: 0; font-size: 1.62rem; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.identity-copy > small { display: block; margin-top: .28rem; color: var(--widget-muted); font-size: .7rem; }
.widget .pill { min-height: 1.75rem; padding: .27rem .58rem; border-color: rgba(255,255,255,.56); font-size: .59rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 5px 14px rgba(26,75,108,.08); backdrop-filter: blur(12px); }
.widget .pill::before { width: .36rem; height: .36rem; box-shadow: 0 0 7px currentColor; }

.theme-button,
.open-section {
  display: grid;
  place-items: center;
  border: 1px solid var(--tile-edge);
  color: var(--widget-ink);
  background: linear-gradient(145deg, var(--tile-strong), var(--tile));
  box-shadow: var(--tile-shadow);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .15s ease, filter .15s ease;
}
.theme-button { width: 2.55rem; height: 2.55rem; border-radius: .9rem; }
.theme-button svg { width: 1.18rem; height: 1.18rem; }
.theme-button:hover, .open-section:hover { transform: translateY(-1px); filter: brightness(1.07); }
.theme-button:active, .open-section:active { transform: scale(.97); }
.status-row { grid-column: 1 / -1; display: flex; align-items: center; gap: .55rem; min-width: 0; }
.mode-detail { min-width: 0; color: var(--widget-muted); font-size: .66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.widget-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--tile-edge);
  outline: 1px solid var(--tile-edge-soft);
  outline-offset: -3px;
  border-radius: 1.15rem;
  background:
    linear-gradient(132deg, rgba(244,248,250,.22), rgba(159,178,188,.055) 38%, transparent 66%),
    linear-gradient(145deg, var(--tile-strong), var(--tile));
  box-shadow: var(--tile-shadow);
  backdrop-filter: blur(14px) saturate(116%);
  -webkit-backdrop-filter: blur(14px) saturate(116%);
}

.widget-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .62;
  background: linear-gradient(115deg, rgba(255,255,255,.35), transparent 25%, transparent 72%, rgba(255,255,255,.08));
}
.widget-tile > * { position: relative; z-index: 1; }
:root[data-theme="dark"] .widget-tile { background: linear-gradient(132deg, rgba(213,240,252,.075), rgba(255,255,255,.012) 38%, transparent 65%), linear-gradient(145deg, var(--tile-strong), var(--tile)); backdrop-filter: blur(16px) saturate(127%); -webkit-backdrop-filter: blur(16px) saturate(127%); }

.control-card { min-height: 11.4rem; padding: .9rem 1rem .85rem; display: flex; flex-direction: column; }
.control-card::after,
.switch-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 12rem;
  height: 12rem;
  right: -5rem;
  bottom: -7rem;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(42px);
  opacity: .18;
}
.speed-card::after { background: var(--blue-halo); }
.temperature-card::after { width: 17rem; background: linear-gradient(90deg, var(--blue-halo), var(--orange-halo)); }
.power-card::after, .heater-card::after { background: var(--green-halo); opacity: .16; }

.card-title { display: flex; align-items: flex-start; gap: .65rem; }
.card-title h2, .switch-title h2, .section-title h2 { margin: 0; font-size: .96rem; line-height: 1.2; letter-spacing: -.015em; }
.card-title p { margin: .16rem 0 0; color: var(--widget-muted); font-size: .66rem; }
.ui-icon { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-icon { width: 1.95rem; height: 1.95rem; flex: 0 0 auto; padding: .06rem; color: #1389f4; filter: drop-shadow(0 0 5px rgba(20,139,244,.2)); }

.hero-control { display: grid; grid-template-columns: 3.45rem 1fr 3.45rem; align-items: center; gap: .8rem; margin: 1rem 0 .72rem; }
.hero-value { text-align: center; font-size: 3rem; line-height: 1; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.hero-step {
  display: grid;
  place-items: center;
  width: 3.45rem;
  height: 3.45rem;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,.84);
  border-radius: .95rem;
  color: #176dbb;
  background:
    radial-gradient(circle at 24% 5%, rgba(255,255,255,.48), transparent 40%),
    linear-gradient(145deg, rgba(245,252,255,.4), rgba(191,224,244,.18));
  box-shadow: 0 8px 19px rgba(35,92,132,.13), inset 0 1px 0 rgba(255,255,255,.88), 0 0 0 1px rgba(185,226,248,.2);
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.hero-step.primary {
  color: white;
  background:
    radial-gradient(circle at 24% 5%, rgba(255,255,255,.55), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 42%, rgba(0,73,170,.1)),
    linear-gradient(145deg, #55b4ff, #1479e8 72%);
  box-shadow: 0 8px 18px rgba(15,92,183,.18), 0 0 7px rgba(48,151,239,.1), inset 0 1px 0 rgba(255,255,255,.86), inset 0 -3px 7px rgba(0,67,156,.16);
}
.hero-step:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 10px 21px rgba(20,101,190,.2), 0 0 9px rgba(48,151,239,.12), inset 0 1px 0 rgba(255,255,255,.88); }
.hero-step:active { transform: scale(.97); }

.speed-segments { display: grid; grid-template-columns: repeat(6, 1fr); gap: .18rem; }
.speed-segments button {
  height: .9rem;
  padding: 0;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: .5rem;
  background: linear-gradient(180deg, rgba(173,207,229,.3), rgba(98,151,190,.18));
  box-shadow: inset 0 1px 2px rgba(27,70,105,.07), 0 2px 5px rgba(32,86,126,.07);
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.speed-segments button:hover { transform: translateY(-1px); }
.speed-segments button.active {
  background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 48%), linear-gradient(90deg, #1685ec, #35afff);
  box-shadow: 0 0 5px rgba(25,143,247,.19), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 4px rgba(0,84,182,.13);
}
.scale-labels, .temperature-labels { display: flex; justify-content: space-between; margin-top: .34rem; padding: 0 .3rem; color: var(--widget-muted); font-size: .62rem; }

.temperature-range { width: 100%; height: 1.45rem; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.temperature-range::-webkit-slider-runnable-track { height: .68rem; border: 1px solid rgba(255,255,255,.88); border-radius: 999px; background: linear-gradient(90deg, #0878ed, #53c7f5 38%, #f3c26e 72%, #ff6b31); box-shadow: 0 0 8px rgba(37,153,239,.15), 0 0 7px rgba(255,114,41,.09), inset 0 1px 2px rgba(255,255,255,.46); }
.temperature-range::-moz-range-track { height: .68rem; border: 1px solid rgba(255,255,255,.88); border-radius: 999px; background: linear-gradient(90deg, #0878ed, #53c7f5 38%, #f3c26e 72%, #ff6b31); }
.temperature-range::-moz-range-progress { background: transparent; }
.temperature-range::-webkit-slider-thumb { width: 1.6rem; height: 1.6rem; margin-top: -.49rem; appearance: none; border: .25rem solid rgba(244,252,255,.9); border-radius: 50%; background: #238feb; box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 0 11px rgba(29,139,241,.31), 0 4px 9px rgba(17,79,143,.22); }
.temperature-range::-moz-range-thumb { width: 1.08rem; height: 1.08rem; border: .25rem solid rgba(244,252,255,.9); border-radius: 50%; background: #238feb; box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 0 11px rgba(29,139,241,.31), 0 4px 9px rgba(17,79,143,.22); }

.switch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.switch-card { min-width: 0; min-height: 8.15rem; padding: .82rem; display: flex; flex-direction: column; gap: .72rem; }
.switch-title { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.switch-title > span { min-width: 0; }
.switch-title small { display: block; margin-top: .12rem; color: var(--widget-muted); font-size: .58rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-icon { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; }
.switch-icon.green { color: #08a95a; filter: drop-shadow(0 0 5px rgba(20,190,104,.23)); }
.switch-icon.orange { color: #f06419; filter: drop-shadow(0 0 5px rgba(244,105,31,.2)); }
.glass-switch {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 3.35rem;
  margin-top: auto;
  border: 1.5px solid rgba(255,255,255,.86);
  border-radius: .95rem;
  color: var(--widget-ink);
  background: rgba(199,222,235,.24);
  box-shadow: var(--tile-shadow);
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 850;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, filter .2s ease;
}
.glass-switch:hover { transform: translateY(-1px); filter: brightness(1.06); }
.glass-switch:active { transform: scale(.98); }
.glass-switch[aria-pressed="true"].green,
.glass-switch[aria-pressed="true"].orange {
  background:
    radial-gradient(circle at 25% -8%, rgba(255,255,255,.67), transparent 42%),
    linear-gradient(132deg, rgba(255,255,255,.15), transparent 40%, rgba(0,125,62,.06)),
    linear-gradient(145deg, rgba(139,244,190,.67), rgba(55,194,122,.43));
  border-color: rgba(218,255,235,.84);
  box-shadow: 0 8px 19px rgba(18,143,80,.14), 0 0 8px rgba(38,199,116,.09), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -4px 9px rgba(0,114,57,.08);
}

.info-card { padding: .82rem; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.section-title > span { display: flex; align-items: center; gap: .5rem; }
.section-icon { width: 1.75rem; height: 1.75rem; color: #207bcc; filter: drop-shadow(0 0 5px rgba(26,124,210,.17)); }
.section-icon.leaf { color: #069c51; transform: rotate(-18deg); filter: drop-shadow(0 0 5px rgba(8,160,81,.2)); }
.open-section { width: 2rem; height: 2rem; padding: 0; border-radius: .7rem; color: #147bd5; font-size: .96rem; }

.co2-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; margin: .8rem .1rem .52rem; }
.co2-label { color: var(--widget-muted); font-size: .74rem; font-weight: 750; }
.co2-summary strong { text-align: center; font-size: 2rem; line-height: 1; letter-spacing: -.045em; }
.co2-summary strong small { color: var(--widget-muted); font-size: .62rem; font-weight: 650; letter-spacing: 0; }
.quality-chip { display: inline-flex; justify-content: center; padding: .32rem .62rem; border: 1px solid var(--tile-edge-soft); border-radius: 999px; background: rgba(199,222,235,.2); color: var(--widget-muted); font-size: .6rem; font-weight: 750; white-space: nowrap; }
.quality-chip.good { color: #076d3d; border-color: rgba(109,237,167,.65); background: linear-gradient(145deg, rgba(179,255,214,.58), rgba(92,218,151,.39)); box-shadow: 0 0 9px rgba(33,203,116,.12), inset 0 1px 0 rgba(255,255,255,.82); }
.quality-chip.warn { color: #9c5513; border-color: rgba(244,183,106,.67); background: linear-gradient(145deg, rgba(255,232,188,.56), rgba(239,168,80,.34)); }
.quality-chip.bad { color: #a62f3d; border-color: rgba(242,135,147,.62); background: linear-gradient(145deg, rgba(255,209,216,.53), rgba(225,105,120,.3)); }
:root[data-theme="dark"] .quality-chip.good { color: #b9ffda; }
:root[data-theme="dark"] .quality-chip.warn { color: #ffd59e; }
:root[data-theme="dark"] .quality-chip.bad { color: #ffc0c8; }

.co2-meter { height: .68rem; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; background: rgba(91,145,181,.17); box-shadow: inset 0 1px 3px rgba(25,68,98,.09); overflow: hidden; }
.co2-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #08a350, #36dc83); box-shadow: 0 0 10px rgba(18,199,104,.34), inset 0 1px 0 rgba(255,255,255,.55); transition: width .3s ease; }
.meter-labels { display: flex; justify-content: space-between; margin-top: .26rem; padding: 0 .2rem; color: var(--widget-muted); font-size: .54rem; }
.mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .52rem; margin-top: .68rem; }
.mini-metric { min-width: 0; min-height: 4.35rem; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .62rem .5rem; border: 1px solid var(--tile-edge-soft); border-radius: .9rem; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(107,151,177,.055)); box-shadow: inset 0 1px 0 rgba(255,255,255,.33); text-align: center; }
.metric-icon { width: 1.55rem; height: 1.55rem; flex: 0 0 auto; color: #137edc; filter: drop-shadow(0 0 4px rgba(20,124,221,.15)); }
.mini-metric span { min-width: 0; }
.mini-metric small { display: block; color: var(--widget-muted); font-size: .58rem; }
.mini-metric strong { display: block; margin-top: .2rem; font-size: 1.35rem; line-height: 1; letter-spacing: -.035em; }

.schedule-times { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: .7rem; margin-top: .75rem; padding: .15rem .25rem .25rem; }
.schedule-times > span { display: grid; justify-items: center; gap: .18rem; text-align: center; }
.schedule-times small { color: var(--widget-muted); font-size: .6rem; }
.schedule-times strong { font-size: 1.35rem; letter-spacing: -.035em; }
.schedule-times > i { width: 1px; height: 2.75rem; background: var(--tile-edge-soft); }

.open-panel {
  min-height: 3.25rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: .65rem .9rem;
  border: 1px solid rgba(194,232,255,.84);
  border-radius: 1rem;
  color: white;
  background:
    radial-gradient(circle at 18% -35%, rgba(255,255,255,.52), transparent 47%),
    linear-gradient(135deg, rgba(255,255,255,.13), transparent 43%),
    linear-gradient(145deg, rgba(60,174,239,.92), rgba(17,113,194,.88));
  box-shadow: 0 9px 20px rgba(15,92,183,.2), 0 0 9px rgba(48,151,239,.11), inset 0 1px 0 rgba(255,255,255,.84), inset 0 -3px 7px rgba(0,67,156,.15);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 760;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.open-panel svg { width: 1.45rem; height: 1.45rem; }
.open-panel b { font-size: 1rem; }
.open-panel:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 11px 23px rgba(20,101,190,.23), 0 0 11px rgba(48,151,239,.13), inset 0 1px 0 rgba(255,255,255,.86); }
.open-panel:active { transform: scale(.99); }
.demo-note { color: var(--widget-muted); text-align: center; font-size: .58rem; }

:root[data-theme="dark"] .brand-icon { border-color: rgba(193,228,245,.25); background: radial-gradient(circle at 25% 2%, rgba(208,243,255,.16), transparent 43%), linear-gradient(145deg, rgba(38,125,187,.27), rgba(15,61,91,.26)); }
:root[data-theme="dark"] .hero-step { color: #76c7fa; border-color: rgba(192,226,244,.25); background: radial-gradient(circle at 24% 5%, rgba(213,240,252,.11), transparent 40%), linear-gradient(145deg, rgba(77,112,133,.23), rgba(20,44,59,.28)); box-shadow: 0 9px 21px rgba(0,0,0,.23), inset 0 1px 0 rgba(226,246,255,.12); }
:root[data-theme="dark"] .hero-step.primary { color: white; background: radial-gradient(circle at 24% 5%, rgba(214,246,255,.32), transparent 38%), linear-gradient(135deg, rgba(255,255,255,.08), transparent 42%, rgba(0,32,95,.17)), linear-gradient(145deg, #33aaf4, #0869d0 74%); box-shadow: 0 10px 24px rgba(0,53,119,.38), 0 0 11px rgba(41,162,244,.19), inset 0 1px 0 rgba(220,248,255,.4), inset 0 -3px 7px rgba(0,27,91,.27); }
:root[data-theme="dark"] .speed-segments button { border-color: rgba(192,226,244,.25); background: linear-gradient(180deg, rgba(91,136,162,.23), rgba(24,55,74,.28)); }
:root[data-theme="dark"] .speed-segments button.active { border-color: rgba(117,207,255,.48); background: linear-gradient(180deg, rgba(216,246,255,.19), transparent 48%), linear-gradient(90deg, #0877df, #20b7ff); box-shadow: 0 0 7px rgba(24,156,255,.27), inset 0 1px 0 rgba(223,248,255,.34); }
:root[data-theme="dark"] .glass-switch { color: #ddecf4; border-color: rgba(193,228,245,.25); background: linear-gradient(145deg, rgba(77,112,133,.23), rgba(20,44,59,.28)); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
:root[data-theme="dark"] .glass-switch[aria-pressed="true"].green,
:root[data-theme="dark"] .glass-switch[aria-pressed="true"].orange { color: #effff6; border-color: rgba(127,242,182,.4); background: radial-gradient(circle at 25% -8%, rgba(218,255,236,.3), transparent 42%), linear-gradient(132deg, rgba(255,255,255,.07), transparent 40%, rgba(0,45,23,.12)), linear-gradient(145deg, rgba(51,190,119,.52), rgba(9,102,59,.49)); box-shadow: 0 9px 21px rgba(0,0,0,.22), 0 0 9px rgba(37,207,121,.1), inset 0 1px 0 rgba(218,255,236,.32), inset 0 -3px 8px rgba(0,31,16,.16); }
:root[data-theme="dark"] .co2-meter { border-color: rgba(200,232,247,.24); background: rgba(3,22,34,.34); box-shadow: inset 0 2px 5px rgba(0,0,0,.2); }
:root[data-theme="dark"] .mini-metric { background: linear-gradient(145deg, rgba(196,231,247,.055), rgba(3,24,37,.08)); box-shadow: inset 0 1px 0 rgba(224,246,255,.07); }

/* Wide monitor layout. The same markup stays vertical on narrow screens, so
   controls and API behaviour cannot drift between two widget versions. */
:root[data-widget-layout="horizontal"] .widget {
  width: min(100%, 76rem);
  max-width: none;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr);
  grid-template-areas:
    "header header header header"
    "speed temperature power heater"
    "air air schedule schedule"
    "open open open open"
    "demo demo demo demo";
  align-items: stretch;
}
:root[data-widget-layout="horizontal"] .widget-header { grid-area: header; grid-template-columns: minmax(0, 1fr) auto auto; }
:root[data-widget-layout="horizontal"] .widget-header .identity { grid-column: 1; grid-row: 1; }
:root[data-widget-layout="horizontal"] .widget-header .status-row { grid-column: 2; grid-row: 1; }
:root[data-widget-layout="horizontal"] .widget-header .theme-button { grid-column: 3; grid-row: 1; }
:root[data-widget-layout="horizontal"] .speed-card { grid-area: speed; }
:root[data-widget-layout="horizontal"] .temperature-card { grid-area: temperature; }
:root[data-widget-layout="horizontal"] .switch-grid { display: contents; }
:root[data-widget-layout="horizontal"] .switch-grid > * { z-index: 1; }
:root[data-widget-layout="horizontal"] .power-card { grid-area: power; }
:root[data-widget-layout="horizontal"] .heater-card { grid-area: heater; }
:root[data-widget-layout="horizontal"] .switch-card { min-height: 11.4rem; }
:root[data-widget-layout="horizontal"] .air-card { grid-area: air; }
:root[data-widget-layout="horizontal"] .schedule-card { grid-area: schedule; }
:root[data-widget-layout="horizontal"] .air-card,
:root[data-widget-layout="horizontal"] .schedule-card { min-height: 9.6rem; }
:root[data-widget-layout="horizontal"] .open-panel { grid-area: open; }
:root[data-widget-layout="horizontal"] .demo-note { grid-area: demo; }

button:disabled { opacity: .58; cursor: wait; transform: none !important; }

@media (min-width: 560px) and (min-height: 900px) {
  html { font-size: 17px; }
  :root[data-widget-layout="vertical"] .widget { width: min(100%, 33rem); }
}

@media (max-width: 380px) {
  body { padding: .36rem; }
  .widget { padding: .55rem; gap: .52rem; border-radius: 1.2rem; }
  .brand-icon { width: 2.55rem; height: 2.55rem; }
  .identity h1 { font-size: 1.38rem; }
  .title-row { gap: .38rem; }
  .widget .pill { padding-inline: .46rem; font-size: .54rem; }
  .hero-control { grid-template-columns: 3.15rem 1fr 3.15rem; gap: .55rem; }
  .hero-step { width: 3.15rem; height: 3.15rem; }
  .hero-value { font-size: 2.65rem; }
  .switch-grid { gap: .5rem; }
  .switch-card { padding: .7rem; }
  .switch-title { align-items: flex-start; }
  .switch-title small { display: none; }
  .co2-summary { grid-template-columns: auto 1fr; }
  .co2-summary .quality-chip { grid-column: 1 / -1; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-step:hover, .theme-button:hover, .open-section:hover, .glass-switch:hover, .open-panel:hover { transform: none; }
}