:root,
[data-weather-theme="day"] {
  --blue: #087bbd;
  --blue-dark: #064b78;
  --orange: #f36c2d;
  --ink: #153448;
  --muted: #597080;
  --line: rgba(8, 75, 120, .15);
  --surface: rgba(255, 255, 255, .96);
  --surface-raised: #fff;
  --surface-muted: #f1f9fe;
  --page-bg: #edf8fc;
  --page-glow: #fff;
  --page-mid: #edf9fd;
  --page-edge: #dceff7;
  --shadow: 0 10px 28px rgba(9, 53, 83, .1);
  --focus-ring: rgba(243,108,45,.42);
  --subtle-line: rgba(8,75,120,.08);
  --compass-line: rgba(8,75,120,.26);
  --compass-center: #eef8fb;
  --status-border: rgba(8,123,189,.24);
  --status-success-bg: #f1fbf6;
  --status-success-ink: #155f43;
  --status-warning-bg: #fff7f2;
  --status-warning-ink: #783719;
  --status-error-bg: #fff0f0;
  --status-error-ink: #801f1f;
  --stale-bg: #fff0e8;
  --stale-ink: #88401f;
  --logo-bg: transparent;
  --camera-surface: rgba(255,255,255,.9);
  --hover-line: rgba(10,77,162,.48);
  --hover-shadow: 0 12px 30px rgba(10,77,162,.14);
  --theme-menu-shadow: 0 14px 34px rgba(9,53,83,.2);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-weather-theme="night"] {
  --blue: #55bced;
  --blue-dark: #b9e4f8;
  --orange: #ff8b55;
  --ink: #dce8ef;
  --muted: #9fb6c6;
  --line: rgba(190, 224, 241, .18);
  --surface: rgba(15, 38, 55, .96);
  --surface-raised: #17384f;
  --surface-muted: #102d42;
  --page-bg: #071523;
  --page-glow: #12354c;
  --page-mid: #0a2538;
  --page-edge: #06131f;
  --shadow: 0 12px 30px rgba(1, 8, 15, .34);
  --focus-ring: rgba(255,139,85,.66);
  --subtle-line: rgba(190,224,241,.12);
  --compass-line: rgba(150,211,239,.38);
  --compass-center: #102d42;
  --status-border: rgba(85,188,237,.38);
  --status-success-bg: #123b32;
  --status-success-ink: #aee7d2;
  --status-warning-bg: #442b20;
  --status-warning-ink: #ffd0b7;
  --status-error-bg: #472329;
  --status-error-ink: #ffc4cc;
  --stale-bg: #432a20;
  --stale-ink: #ffd0b7;
  --logo-bg: rgba(245,249,251,.9);
  --camera-surface: rgba(15,38,55,.9);
  --hover-line: rgba(85,188,237,.62);
  --hover-shadow: 0 12px 30px rgba(0,8,16,.42);
  --theme-menu-shadow: 0 16px 38px rgba(0,5,10,.48);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--page-bg); }
body {
  min-height: 100vh; margin: 0; color: var(--ink);
  font-weight: var(--font-weight-regular);
  font-synthesis: none;
  background: radial-gradient(circle at 14% 12%, var(--page-glow) 0, var(--page-mid) 35%, var(--page-edge) 100%);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
button, a { font: inherit; }
h1 { font-weight: var(--font-weight-bold); }
h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); }
strong, b { font-weight: var(--font-weight-semibold); }
.shell { width: min(1500px, calc(100% - 28px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.skip-link { position: fixed !important; left: 12px; top: -100px; z-index: 20; width: auto; padding: 8px 12px; background: var(--surface-raised); color: var(--blue-dark); }
.skip-link:focus { top: 10px; }

.camera-backdrop {
  position: fixed; inset: 0; z-index: 0; opacity: 0;
  background: center / cover no-repeat;
  transition: opacity .7s ease;
}
.camera-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(3, 28, 47, .32), rgba(3, 28, 47, .5)); }
.camera-backdrop.is-visible { opacity: 1; }
body > :not(.camera-backdrop) { position: relative; z-index: 1; }
body[data-camera-background="active"] { background: #07182f; color: #fff; }
body[data-camera-background="active"] .dashboard-card,
body[data-camera-background="active"] .dashboard-band,
body[data-camera-background="active"] .commercial-card { background: var(--camera-surface); backdrop-filter: blur(6px); }
body[data-camera-background="active"] .weather-header h1 { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.65); }

body > .weather-header { z-index: 5; padding: 7px 0 5px; }
.header-layout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.brand { border-radius: 8px; background: var(--logo-bg); box-shadow: 0 0 0 3px var(--logo-bg); }
.brand img { display: block; width: auto; height: 42px; object-fit: contain; }
.header-copy h1 { margin: 0; color: var(--blue-dark); font-size: clamp(1.05rem, 2vw, 1.55rem); line-height: 1; }
.eyebrow { margin: 0 0 2px; color: var(--orange); font-size: .64rem; font-weight: var(--font-weight-semibold); letter-spacing: .1em; text-transform: uppercase; }
.actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 11px;
  border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-weight: 600; text-decoration: none;
}
.button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.button:disabled { opacity: .58; cursor: wait; }
.button-primary { background: var(--blue); color: #fff; }
.button-secondary { border-color: var(--line); background: var(--surface-raised); color: var(--blue-dark); }
.button-link { padding-inline: 7px; border: 0; background: transparent; color: var(--blue-dark); }
.button-whatsapp { background: #167c4d; color: #fff; white-space: nowrap; }
.theme-control { position: relative; }
.theme-button { width: 38px; min-width: 38px; padding: 5px; border-color: var(--line); background: var(--surface-raised); color: var(--blue-dark); }
.theme-button-icon { font-size: 1.08rem; line-height: 1; }
.theme-menu {
  position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; width: min(220px, calc(100vw - 24px));
  padding: 6px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface-raised); color: var(--ink); box-shadow: var(--theme-menu-shadow);
}
.theme-option {
  display: grid; grid-template-columns: 24px 1fr 20px; align-items: center; gap: 7px;
  width: 100%; min-height: 42px; padding: 7px 9px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; text-align: left; cursor: pointer; font-weight: 600;
}
.theme-option:hover, .theme-option:focus-visible { background: var(--surface-muted); }
.theme-option:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -1px; }
.theme-option .theme-check { visibility: hidden; color: var(--blue); font-weight: 700; }
.theme-option[aria-checked="true"] { color: var(--blue-dark); background: var(--surface-muted); }
.theme-option[aria-checked="true"] .theme-check { visibility: visible; }

.weather-main {
  min-height: 0; display: grid;
  grid-template-rows: 30px minmax(300px, 2.15fr) minmax(132px, .9fr) auto;
  gap: 7px; padding-bottom: 7px;
}
.status-slot { position: relative; min-height: 30px; }
.status-message {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 4px 11px; border: 1px solid var(--status-border); border-radius: 9px;
  background: var(--surface-muted); color: var(--blue-dark); font-size: .72rem; font-weight: 600;
  opacity: 0; transform: translateY(-3px); transition: opacity .25s ease, transform .25s ease;
}
.status-message.is-visible { opacity: 1; transform: translateY(0); }
.status-message.is-hiding { pointer-events: none; opacity: 0; transform: translateY(-3px); }
.status-message[data-tone="success"] { border-color: rgba(22,124,77,.3); background: var(--status-success-bg); color: var(--status-success-ink); }
.status-message[data-tone="warning"] { border-color: rgba(255,107,45,.38); background: var(--status-warning-bg); color: var(--status-warning-ink); }
.status-message[data-tone="error"] { border-color: rgba(174,37,37,.45); background: var(--status-error-bg); color: var(--status-error-ink); }

.dashboard-card {
  min-width: 0; min-height: 0; padding: clamp(10px, 1.35vh, 16px);
  border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow);
  overflow: hidden;
}
.dashboard-weather-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 7px; min-height: 0;
}
.dashboard-weather-grid .dashboard-clock { grid-column: 1 / span 2; grid-row: 1 / span 2; }

.dashboard-clock { display: flex; flex-direction: column; justify-content: center; }
.clock-time {
  display: block; margin-top: 2px; color: var(--blue-dark);
  font-size: clamp(5.5rem, 17vh, 11rem); font-weight: 700; line-height: .8;
  letter-spacing: -.065em; white-space: nowrap;
}
.clock-context { display: grid; align-content: center; gap: 2px; margin-top: clamp(10px, 1.7vh, 18px); }
.clock-date { color: var(--ink); font-size: clamp(.76rem, 1vw, .96rem); font-weight: var(--font-weight-medium); }
.location-name { color: var(--muted); font-size: clamp(.82rem, 1.15vw, 1rem); line-height: 1.05; }
.clock-zone { color: var(--muted); font-size: .63rem; }

.temperature-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; }
.temperature { margin: 0; color: var(--blue); font-size: clamp(2.8rem, 7vh, 5rem); font-weight: 700; line-height: .82; letter-spacing: -.07em; white-space: nowrap; }
.temperature span:nth-child(2) { font-size: .38em; font-weight: var(--font-weight-medium); vertical-align: top; letter-spacing: 0; }
.condition-icon { width: clamp(48px, 6vh, 70px); height: auto; }
.temperature-card { display: flex; flex-direction: column; justify-content: center; }
.temperature-history-link { position: relative; color: inherit; text-decoration: none; cursor: pointer; }
.temperature-history-link:hover { border-color: var(--hover-line); box-shadow: var(--hover-shadow); }
.temperature-history-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.temperature-history-hint { position: absolute; right: 12px; bottom: 9px; color: var(--blue-dark); font-size: .64rem; font-weight: var(--font-weight-medium); }
.temperature-card h2, .astronomy-card h2 { margin: 5px 0 3px; color: var(--blue-dark); font-size: clamp(.9rem, 1.6vw, 1.18rem); line-height: 1.08; }
.detail-line, .updated-line { margin: 3px 0 0; color: var(--muted); font-size: .7rem; }
.stale-indicator { display: inline-flex; margin-left: 3px; padding: 1px 5px; border-radius: 999px; background: var(--stale-bg); color: var(--stale-ink); font-weight: 600; }

.metric-card, .trend-card { display: flex; flex-direction: column; justify-content: center; }
.card-icon { color: var(--orange); font-size: clamp(1.2rem, 3.2vh, 1.8rem); line-height: 1; }
.card-label { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: .05em; }
.metric-value { display: block; margin: 4px 0; color: var(--blue-dark); font-size: clamp(1.65rem, 4.7vh, 3rem); line-height: 1; }
.trend-line { margin: 3px 0 0; color: var(--muted); font-size: .7rem; }
.trend-line[data-state="increasing"] { color: #aa4b20; }
.trend-line[data-state="decreasing"] { color: #126d9e; }
.trend-line[data-state="stable"] { color: #24704e; }
.trend-icon { display: inline-block; min-width: 1em; font-weight: var(--font-weight-medium); }

.wind-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; }
.wind-copy p { margin: 2px 0; color: var(--muted); font-size: .66rem; }
.compass { position: relative; width: clamp(82px, 10.5vh, 116px); aspect-ratio: 1; border: 2px solid var(--compass-line); border-radius: 50%; background: radial-gradient(circle, var(--surface-raised) 0 47%, var(--compass-center) 48%); }
.compass > span:not(.wind-arrow):not(.compass-center) { position: absolute; color: var(--blue-dark); font-size: .48rem; font-weight: 700; transform: translate(-50%,-50%); }
.compass-n { left: 50%; top: 8%; } .compass-ne { left: 79%; top: 20%; }
.compass-e { left: 92%; top: 50%; } .compass-se { left: 79%; top: 80%; }
.compass-s { left: 50%; top: 92%; } .compass-sw { left: 20%; top: 80%; }
.compass-w { left: 8%; top: 50%; } .compass-nw { left: 20%; top: 20%; }
.wind-arrow { position: absolute; left: calc(50% - 2px); bottom: 50%; width: 4px; height: 32%; border-radius: 4px; background: var(--orange); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.wind-arrow::before { content: ""; position: absolute; left: 50%; top: -5px; border: 5px solid transparent; border-bottom: 9px solid var(--orange); transform: translate(-50%,-50%); }
.compass-center { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-dark); transform: translate(-50%,-50%); }

.card-title-row { display: flex; align-items: center; gap: 7px; }
.card-title-row h2 { margin: 0; }
.astro-symbol { color: var(--blue-dark); font-size: clamp(1.4rem, 3.6vh, 2.1rem); line-height: 1; }
.sun-symbol { color: #e99012; }
.uv-symbol { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border-radius: 50%; background: #f5a01f; color: #fff; font-size: .68rem; font-weight: 700; }
.uv-card h2, .aqi-card h2, .rain-card h2 { color: var(--blue-dark); font-size: clamp(.9rem, 1.5vw, 1.12rem); }
.uv-value, .aqi-value { display: block; margin-top: 5px; color: var(--blue-dark); font-size: clamp(2.2rem, 5.7vh, 3.8rem); line-height: .9; }
.uv-category, .aqi-category { margin: 4px 0 0; color: var(--ink) !important; font-size: .8rem !important; font-weight: 700; }
.uv-card > p:last-child, .aqi-card > p:last-child { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }
.uv-card[data-level="high"] .uv-category, .uv-card[data-level="very-high"] .uv-category, .uv-card[data-level="extreme"] .uv-category { color: #a13f20 !important; }
.aqi-symbol {
  display: grid; place-items: center; width: 38px; min-width: 38px; aspect-ratio: 1;
  border-radius: 11px; background: #dff4ec; color: #176849; font-size: .64rem; font-weight: 700;
}
.aqi-card[data-level="moderate"] .aqi-symbol { background: #fff4ce; color: #735700; }
.aqi-card[data-level="sensitive"] .aqi-symbol,
.aqi-card[data-level="unhealthy"] .aqi-symbol { background: #ffead9; color: #8c3d13; }
.aqi-card[data-level="very-unhealthy"] .aqi-symbol,
.aqi-card[data-level="hazardous"] .aqi-symbol { background: #f8dce5; color: #852342; }

.dashboard-band {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; min-height: 0;
  border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow);
  overflow: hidden;
}
.band-block { min-width: 0; min-height: 0; padding: clamp(9px, 1.25vh, 14px); }
.band-block + .band-block { border-left: 1px solid var(--line); }
.astronomy-card { display: flex; flex-direction: column; justify-content: center; }
.astro-list { margin: 6px 0 3px; }
.astro-list div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px solid var(--subtle-line); }
.astro-list dt { color: var(--muted); font-size: .68rem; }
.astro-list dd { margin: 0; color: var(--blue-dark); font-size: .75rem; font-weight: var(--font-weight-semibold); }
.horizon-state, .astronomy-card p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }
.phase-card { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; }
.moon-phase-visual { width: clamp(58px, 8vh, 88px); aspect-ratio: 1; filter: drop-shadow(0 4px 7px rgba(14,40,58,.18)); }
.moon-disc { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: #1a3042; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.moon-disc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #f4f1d0; }
.moon-phase-visual[data-hemisphere="south"] .moon-disc { transform: scaleX(-1); }
.moon-phase-visual[data-phase="new-moon"] .moon-disc::after { opacity: 0; }
.moon-phase-visual[data-phase="full-moon"] .moon-disc::after { opacity: 1; }
.moon-phase-visual[data-phase="first-quarter"] .moon-disc::after { clip-path: inset(0 0 0 50%); }
.moon-phase-visual[data-phase="last-quarter"] .moon-disc::after { clip-path: inset(0 50% 0 0); }
.moon-phase-visual[data-phase="waxing-crescent"] .moon-disc::after { transform: translateX(58%); }
.moon-phase-visual[data-phase="waning-crescent"] .moon-disc::after { transform: translateX(-58%); }
.moon-phase-visual[data-phase="waxing-gibbous"] .moon-disc { background: #f4f1d0; }
.moon-phase-visual[data-phase="waxing-gibbous"] .moon-disc::after { background: #1a3042; transform: translateX(-58%); }
.moon-phase-visual[data-phase="waning-gibbous"] .moon-disc { background: #f4f1d0; }
.moon-phase-visual[data-phase="waning-gibbous"] .moon-disc::after { background: #1a3042; transform: translateX(58%); }
.rain-symbol { color: var(--blue); font-size: clamp(1.45rem, 3.5vh, 2rem); line-height: 1; }
.rain-list { margin: 7px 0 0; }
.rain-list div { display: grid; gap: 1px; padding: 3px 0; border-bottom: 1px solid var(--subtle-line); }
.rain-list dt { color: var(--muted); font-size: .62rem; }
.rain-list dd { margin: 0; color: var(--blue-dark); font-size: clamp(.82rem, 1.3vw, 1rem); font-weight: 700; }
.rain-card > p { margin: 4px 0 0; color: var(--muted); font-size: .56rem; line-height: 1.25; }

.commercial-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 9px 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--blue-dark); font-size: .7rem; box-shadow: var(--shadow);
}
.camera-meta { margin: 2px 0 0 !important; color: var(--muted); font-size: .59rem !important; }
.weather-footer { padding: 4px 0 6px; color: var(--muted); font-size: .62rem; }
.footer-layout { display: flex; justify-content: space-between; gap: 12px; }
.weather-footer a { color: var(--blue-dark); }

@media (min-width: 821px) and (max-height: 650px) {
  .weather-header { padding-block: 3px; }
  .brand img { height: 31px; }
  .header-copy .eyebrow { display: none; }
  .button { min-height: 27px; padding: 3px 8px; font-size: .7rem; }
  .weather-main { grid-template-rows: 25px minmax(225px,2fr) minmax(98px,.9fr) auto; gap: 5px; padding-bottom: 4px; }
  .status-slot { min-height: 25px; }
  .status-message { padding-block: 2px; font-size: .62rem; }
  .dashboard-card { padding: 7px 9px; border-radius: 11px; }
  .dashboard-weather-grid { gap: 5px; }
  .clock-time { font-size: clamp(4.6rem, 19vh, 7.4rem); }
  .clock-context { margin-top: 5px; }
  .temperature { font-size: clamp(2.3rem, 8vh, 3.55rem); }
  .temperature-card h2 { margin-top: 2px; font-size: .82rem; }
  .detail-line, .updated-line, .trend-line, .wind-copy p, .astronomy-card p, .astro-list dt { font-size: .57rem; }
  .metric-value { font-size: clamp(1.45rem, 5.5vh, 2.25rem); }
  .compass { width: clamp(68px, 14vh, 86px); }
  .dashboard-band { border-radius: 11px; }
  .band-block { padding: 6px 8px; }
  .astro-list { margin-block: 3px 1px; }
  .astro-list div { padding-block: 1px; }
  .moon-phase-visual { width: clamp(48px, 11vh, 64px); }
  .commercial-card { padding-block: 3px; }
  .weather-footer { padding-block: 2px; }
}

@media (max-width: 1100px) and (min-width: 821px) {
  .wind-card { grid-template-columns: 1fr; }
  .compass { justify-self: center; width: clamp(68px, 9vh, 88px); }
}

@media (max-width: 820px) {
  body { display: block; min-height: 100vh; }
  .shell { width: min(100% - 20px, 760px); }
  .header-layout { grid-template-columns: auto 1fr; }
  .actions { grid-column: 1 / -1; justify-content: stretch; }
  .actions .button { flex: 1 1 auto; }
  .theme-control { flex: 0 0 auto; }
  .theme-button { width: 44px; min-width: 44px; min-height: 44px; }
  .theme-option { min-height: 44px; }
  .weather-main { display: grid; grid-template-rows: auto; gap: 9px; padding-bottom: 10px; }
  .status-slot { min-height: 36px; }
  .dashboard-weather-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; gap: 9px; }
  .dashboard-weather-grid .dashboard-clock { grid-column: 1 / -1; grid-row: auto; min-height: 240px; }
  .dashboard-card { overflow: visible; padding: 14px; }
  .dashboard-band { grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; }
  .band-block { min-height: 170px; padding: 14px; }
  .band-block:nth-child(n+3) { border-top: 1px solid var(--line); }
  .band-block:nth-child(3) { border-left: 0; }
  .temperature { font-size: clamp(3.2rem, 12vw, 5rem); }
  .metric-value { font-size: clamp(2rem, 7vw, 3rem); }
  .compass { width: clamp(96px, 18vw, 122px); }
  .weather-footer { padding-bottom: 12px; }
}

@media (max-width: 540px) {
  .header-copy h1 { font-size: 1rem; }
  .dashboard-clock { gap: 4px; text-align: center; }
  .clock-context { text-align: center; }
  .clock-time { font-size: clamp(3.5rem, 19vw, 5rem); }
  .dashboard-weather-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .dashboard-card { min-height: 172px; }
  .dashboard-weather-grid .dashboard-clock { grid-column: auto; grid-row: auto; min-height: 240px; }
  .dashboard-band { display: grid; grid-template-columns: 1fr; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 9px; overflow: visible; }
  .band-block {
    min-height: 172px; padding: 14px; border: 1px solid var(--line) !important;
    border-radius: 15px; background: var(--surface); box-shadow: var(--shadow);
  }
  body[data-camera-background="active"] .band-block { background: var(--camera-surface); backdrop-filter: blur(6px); }
  .phase-card { grid-template-columns: auto 1fr; }
  .commercial-card, .footer-layout { align-items: stretch; flex-direction: column; text-align: center; }
  .commercial-card .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

body, .dashboard-card, .dashboard-band, .commercial-card, .band-block, .button,
.theme-menu, .theme-option, .status-message, .compass, .weather-footer {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}