:root {
  color-scheme: dark;
  --bg: #101915;
  --panel: rgba(31, 48, 41, 0.78);
  --panel-border: rgba(205, 226, 216, 0.11);
  --text: #f4f7f5;
  --muted: #9eafa7;
  --sage: #b6d0c3;
  --green: #9ed9b9;
  --orange: #ffae66;
  --blue: #8cc9dc;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(73, 120, 98, 0.2), transparent 34rem),
    linear-gradient(145deg, #0d1512 0%, #15231d 55%, #101813 100%);
  overflow-x: hidden;
}

button { font: inherit; }

.ambient {
  position: fixed;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
}
.ambient-one { top: -12rem; right: -8rem; background: #b2dfbd; }
.ambient-two { bottom: -18rem; left: -12rem; background: #dd9250; }

.shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 54px 0 30px;
}

.topbar, .panel-title, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--sage);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.04; letter-spacing: -0.045em; }
h2 { margin-bottom: 0; font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -0.035em; }

.connection {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  padding: 10px 14px;
  color: var(--sage);
  background: rgba(180, 217, 197, 0.07);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(158, 217, 185, 0.1);
}
.connection.is-offline .connection-dot { background: #f18478; box-shadow: 0 0 0 5px rgba(241, 132, 120, 0.1); }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.temperature-card, .heating-panel {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.temperature-card {
  min-height: 300px;
  padding: 28px;
  border-radius: 28px;
}

.temperature-card::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -100px;
  bottom: -120px;
  border-radius: 50%;
  background: var(--orange);
  filter: blur(14px);
  opacity: 0.09;
}
.temperature-card--outdoor::after { background: var(--blue); }

.card-heading { display: flex; align-items: center; gap: 14px; }
.card-heading p { margin-bottom: 2px; font-size: 1.02rem; font-weight: 720; }
.card-heading div > span { color: var(--muted); font-size: 0.8rem; }

.icon-shell {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--orange);
  background: rgba(255, 174, 102, 0.09);
  border-radius: 15px;
}
.icon-shell--cool { color: var(--blue); background: rgba(140, 201, 220, 0.09); }
.icon-shell svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.temperature {
  display: flex;
  align-items: flex-start;
  margin: 38px 0 30px;
  font-variant-numeric: tabular-nums;
}
.temperature strong { font-size: clamp(4.4rem, 10vw, 7.3rem); line-height: 0.82; letter-spacing: -0.085em; font-weight: 650; }
.temperature > span { margin: 6px 0 0 12px; color: var(--muted); font-size: 1.3rem; }

.metric-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--panel-border);
  color: var(--muted);
  font-size: 0.82rem;
}
.metric-foot b { color: var(--text); font-weight: 650; }

.heating-panel { margin-top: 20px; padding: 30px; border-radius: 30px; }
.heating-state { display: flex; align-items: center; gap: 11px; }
.heating-state small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 0.7rem; }
.heating-state b { font-size: 0.88rem; }
.flame { display: grid; place-items: center; width: 40px; height: 40px; color: #728078; background: rgba(255,255,255,.04); border-radius: 13px; }
.flame.is-active { color: var(--orange); background: rgba(255, 174, 102, 0.09); }
.flame svg { width: 22px; fill: currentColor; }

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.mode-button {
  min-height: 106px;
  padding: 16px 12px;
  color: var(--muted);
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.mode-button:hover { transform: translateY(-2px); color: var(--text); background: rgba(255, 255, 255, 0.045); }
.mode-button:focus-visible { outline: 3px solid rgba(158, 217, 185, 0.36); outline-offset: 2px; }
.mode-button[aria-pressed="true"] { color: #0e1a15; background: var(--green); border-color: var(--green); }
.mode-button:disabled { cursor: progress; opacity: .62; }
.mode-button b { display: block; margin-bottom: 8px; font-size: 0.9rem; }
.mode-button span { display: block; font-size: 0.7rem; line-height: 1.4; opacity: 0.78; }

.feedback { min-height: 20px; margin-top: 15px; color: var(--sage); font-size: 0.78rem; }
.feedback.is-error { color: #f5a49b; }

footer { padding: 20px 4px 0; color: var(--muted); font-size: 0.76rem; }
.refresh { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: var(--sage); background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.refresh:hover { background: rgba(255,255,255,.04); }
.refresh svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

noscript { display: block; padding: 20px; color: white; background: #811; text-align: center; }

@media (max-width: 760px) {
  .shell { width: min(100% - 22px, 620px); padding-top: 30px; }
  .topbar { align-items: flex-start; }
  .connection { padding: 9px 11px; }
  .hero-grid { grid-template-columns: 1fr; margin-top: 30px; }
  .temperature-card { min-height: 270px; }
  .mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .topbar { display: block; }
  .connection { width: fit-content; margin-top: 18px; }
  .temperature-card, .heating-panel { padding: 22px; border-radius: 23px; }
  .panel-title { align-items: flex-end; }
  .heating-state small { display: none; }
  .heating-state .flame { width: 36px; height: 36px; }
  .heating-state b { font-size: .76rem; }
  .mode-grid { grid-template-columns: 1fr; }
  footer { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}