:root {
    --theme-color: #f3f4f6;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    color-scheme: light dark;
    --text: #111827;
    --muted: #6b7280;
    --background: #f3f4f6;
    --card: #ffffff;
    --surface: #f9fafb;
    --border: #e5e7eb;
    --accent: #111827;
    color: var(--text);
    background: var(--background);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --text: #f3f4f6;
        --muted: #9ca3af;
        --background: #0b1120;
        --card: #111827;
        --surface: #1f2937;
        --border: #374151;
        --accent: #2563eb;
        --theme-color: #0b1120;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; background: var(--background); color: var(--text); }

.shell {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: max(24px, env(safe-area-inset-top)) 18px 40px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

h1 { margin: 0; font-size: 32px; }
.muted { color: var(--muted); }

.card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 16px;
    box-shadow: 0 8px 30px rgba(17,24,39,.06);
}

.hero { text-align: center; padding: 34px 22px; }
.label { color: #6b7280; margin: 0 0 8px; }
.pressure { font-size: clamp(54px, 15vw, 88px); font-weight: 800; letter-spacing: -.05em; }
.pressure span { font-size: 20px; letter-spacing: normal; font-weight: 600; }
.rise { color: #047857; }
.fall { color: #b91c1c; }
.steady { color: #6b7280; }

.row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
}

button {
    border: 0;
    border-radius: 12px;
    padding: 11px 15px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.secondary { background: var(--accent); color: white; }
button:disabled { opacity: .55; cursor: default; }
.status { text-align: center; color: #6b7280; font-size: 14px; }

.test-button {
    display: inline-flex;
    width: auto;
    margin: 0;
}

@media (max-width: 560px) {
    header { align-items: flex-start; }
    header .secondary { white-space: nowrap; }
    h1 { font-size: 28px; }
}

.measurement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.metric-card{margin-bottom:0;min-width:0}
.pressure-card{margin-bottom:16px}
.pressure-card-heading{display:block}
.pressure-readout-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0}
.pressure-range-gauge{flex:0 0 108px;width:108px;text-align:center;margin:0}
@media(max-width:560px){.pressure-range-gauge{transform:translateY(-15px)}}
.pressure-range-gauge svg{display:block;width:108px;height:54px;margin:0}
.pressure-range-track{fill:none;stroke:var(--surface);stroke-linecap:round;stroke-width:6}
.pressure-range-ticks{stroke:var(--muted);stroke-width:.8;stroke-linecap:round}
.pressure-range-ticks line.major{stroke:var(--text);stroke-width:1.35}
.pressure-range-needle{stroke:#ef4444;stroke-width:2.2;stroke-linecap:round}
.pressure-range-hub{fill:#ef4444;stroke:var(--card);stroke-width:1}
.pressure-range-gauge text{font-size:10px;font-weight:900;fill:var(--text)}
.metric-value{font-size:clamp(34px,8vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:10px 0}
.metric-value span{font-size:15px;letter-spacing:normal;font-weight:600}
.metric-trend{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.metric-caption{margin:0;color:var(--muted);font-size:14px}
.metric-unavailable{font-weight:700;margin-top:18px}
.history-card{padding-bottom:18px}
.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.section-heading h2{margin:0;font-size:22px}
.section-heading p{margin:4px 0 0;font-size:14px}
.chart-block{border-top:1px solid var(--border);padding-top:16px;margin-top:16px}
.chart-block h3{font-size:15px;margin:0 0 4px}
.chart-block canvas{display:block;width:100%;height:220px}
.card{background:var(--card);border:1px solid var(--border);box-shadow:0 8px 30px rgba(17,24,39,.06)}
.label{color:var(--muted)}
@media(max-width:700px){.measurement-grid{grid-template-columns:1fr}.metric-card{padding:18px}.metric-value{font-size:42px}}
@media(max-width:560px){.pressure-readout-row{gap:10px}.pressure-range-gauge{flex-basis:96px;width:96px}.pressure-range-gauge svg{width:96px;height:48px}}

:root[data-theme="dark"]{color-scheme:dark;--text:#f3f4f6;--muted:#9ca3af;--background:#0b1120;--card:#111827;--surface:#1f2937;--border:#374151;--accent:#2563eb;--theme-color:#0b1120}
:root[data-theme="light"]{color-scheme:light;--text:#111827;--muted:#6b7280;--background:#f3f4f6;--card:#fff;--surface:#f9fafb;--border:#e5e7eb;--accent:#111827;--theme-color:#f3f4f6}
.header-actions{display:flex;gap:8px;align-items:center}
.button-link{text-decoration:none}
.header-actions .secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:0;border-radius:12px;padding:11px 15px;font:inherit;font-weight:700;line-height:normal;text-decoration:none;white-space:nowrap}
.appearance-card{margin-top:16px}
.theme-select{min-width:150px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-weight:700}
@media(max-width:560px){.header-actions{align-items:stretch;flex-direction:column}.header-actions .secondary{white-space:nowrap}.section-heading{align-items:flex-start;gap:14px;flex-direction:column}.theme-select{width:100%}}

.monitoring-card{margin-top:16px}.status-pill{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}.status-good{background:#dcfce7;color:#166534}.status-warn{background:#fef3c7;color:#92400e}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:16px}.status-grid>div{background:var(--card);padding:13px}.status-grid span{display:block;color:var(--muted);font-size:13px;margin-bottom:4px}.status-grid strong{font-size:15px}.monitor-warning{margin:14px 0 0;padding:11px 13px;border-radius:12px;background:#fef2f2;color:#991b1b;font-size:14px}@media(max-width:560px){.status-grid{grid-template-columns:1fr}.status-pill{align-self:flex-start}}:root[data-theme="dark"] .status-good{background:#14532d;color:#bbf7d0}:root[data-theme="dark"] .status-warn{background:#713f12;color:#fde68a}:root[data-theme="dark"] .monitor-warning{background:#450a0a;color:#fecaca}

.alert-history-card{margin-top:16px}.history-link{font-size:14px;font-weight:800;color:var(--text);text-decoration:none}.alert-history-list{border-top:1px solid var(--border);margin-top:14px}.alert-history-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}.alert-history-item:last-child{border-bottom:0;padding-bottom:2px}.alert-history-icon{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);font-weight:900}.alert-history-content{min-width:0}.alert-history-content strong{display:block;font-size:15px}.alert-history-content p{margin:4px 0;color:var(--text);font-size:14px}.alert-history-content time{display:block;color:var(--muted);font-size:12px}.empty-history{margin-bottom:0}

.history-range{display:flex;gap:6px;margin-top:14px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;width:max-content;max-width:100%}.history-range-button{padding:8px 12px;border-radius:9px;background:transparent;color:var(--muted);font-size:13px}.history-range-button.active{background:var(--accent);color:#fff}.history-range-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:560px){.history-range{width:100%}.history-range-button{flex:1}}

.update-notice{margin-bottom:16px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--card);display:grid;gap:4px}.update-notice span{color:var(--muted);font-size:14px}.update-notice a{color:var(--text);font-weight:800;text-decoration:none;margin-top:4px}.update-notice a:hover{text-decoration:underline}.update-notice[hidden]{display:none}

.cron-setup-card{margin-top:16px;border-color:#f59e0b}.cron-command-wrap{display:flex;gap:10px;align-items:stretch;margin-top:16px}.cron-command-wrap code{flex:1;min-width:0;display:block;overflow:auto;padding:12px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}.cron-copy-button{flex:0 0 auto}.cron-help{margin:12px 0 0;font-size:14px;color:var(--muted)}.cron-copy-status{min-height:1.2em;margin:8px 0 0;font-size:13px;font-weight:700}@media(max-width:560px){.cron-command-wrap{flex-direction:column}.cron-copy-button{width:100%}}:root[data-theme="dark"] .cron-setup-card{border-color:#d97706}

.alerts-on{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--text);border:1px solid var(--border);cursor:default}.alerts-led{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.14)}


.device-view-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);padding:13px;margin-top:1px}.device-view-row>div{min-width:0}.device-view-row span{display:block;color:var(--muted);font-size:13px;margin-bottom:4px}.device-view-row strong{font-size:15px}.device-view-button{padding:7px 12px;flex:0 0 auto}.device-list{border-top:1px solid var(--border);background:var(--surface);padding:12px}.device-list[hidden]{display:none}.device-item{padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--card)}.device-item+.device-item{margin-top:9px}.device-item-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.device-delete{padding:6px 9px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:12px}.device-details{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin-top:9px;font-size:13px}.device-details span{color:var(--muted)}.device-details strong{font-weight:600;overflow-wrap:anywhere}.device-delete:hover{background:var(--surface)}@media(max-width:560px){.device-view-row{align-items:flex-start}.device-details{grid-template-columns:1fr}.device-details strong{margin-bottom:4px}}

.satellite-card{margin-top:16px}.satellite-player{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#000;margin-top:14px}.satellite-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.satellite-caption{margin:10px 0 0;color:var(--muted);font-size:12px}


.wind-gauge-card{padding:18px;overflow:hidden}
.wind-gauge-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wind-gauge-heading .label{margin:0 0 3px}
.wind-compass-controls{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-wrap:nowrap;justify-content:flex-start}
.wind-compass-status{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--muted);white-space:nowrap;text-align:right}
.wind-compass-status[hidden]{display:none!important}
.wind-compass-button{padding:7px 10px;font-size:11px;white-space:nowrap}
.wind-compass-button:disabled{opacity:.72;cursor:default}
.wind-compass-button[aria-pressed="true"]{background:var(--surface);color:var(--text);border:1px solid var(--border)}

.wind-gauge-live{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:5px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.wind-gauge{position:relative;width:min(100%,330px);margin:10px auto 0;aspect-ratio:1;filter:drop-shadow(0 10px 18px rgba(17,24,39,.08))}
.wind-gauge svg{display:block;width:100%;height:100%;overflow:visible}
.wind-speed-track{fill:none;stroke:rgba(116, 127, 143, 0.51);stroke-width:5.2;stroke-linecap:round;opacity:.72}
:root[data-theme="dark"] .wind-speed-track{stroke:#747f8f;opacity:.72}
.wind-speed-fill{fill:none;stroke:#2563eb;stroke-width:3.2;stroke-linecap:round;transition:d .7s ease,stroke-dasharray .7s ease}
.wind-speed-fill[data-active="true"]{filter:drop-shadow(0 0 3px rgba(37,99,235,.22))}
.wind-speed-segments{stroke:var(--border);stroke-width:2.6;stroke-linecap:butt;opacity:.98}
.wind-speed-segments line.active{stroke:#22c55e;filter:drop-shadow(0 0 1px rgba(34,197,94,.25))}
.wind-speed-scale-labels{fill:var(--text);font-size:3.1px;font-weight:900;text-anchor:middle;dominant-baseline:middle;paint-order:stroke fill;stroke:var(--card);stroke-width:.65px;stroke-linejoin:round}
.wind-speed-ticks{stroke:var(--muted);stroke-width:.9}
.wind-speed-ticks line.major{stroke:var(--text);stroke-width:1.45}
.wind-speed-ticks text{fill:#111827;font-size:4.1px;font-weight:450;text-anchor:middle;dominant-baseline:middle;paint-order:stroke fill;stroke:var(--card);stroke-width:.55px}
.wind-speed-ticks line.major+text{fill:#111827;font-weight:500}
:root[data-theme="dark"] .wind-speed-ticks text{fill:#e5e7eb;stroke:#111827;stroke-width:.55px}
:root[data-theme="dark"] .wind-speed-ticks line.major+text{fill:#f3f4f6;stroke:#111827;stroke-width:.55px}
.wind-compass-ring{fill:rgba(255,255,255,.025);stroke:color-mix(in srgb,var(--text) 15%,transparent);stroke-width:.7}
.wind-gauge-glass-overlay{fill:url(#windCompassGlass);stroke:rgba(255,255,255,.18);stroke-width:.7;opacity:.72;pointer-events:none}
:root[data-theme="dark"] .wind-compass-ring{fill:rgba(255,255,255,.018);stroke:rgba(255,255,255,.15)}
.wind-compass-ticks{stroke:color-mix(in srgb,var(--text) 66%,transparent);stroke-width:.22}
.wind-compass-ticks line.medium{stroke-width:.3}
.wind-compass-ticks line.major{stroke:var(--text);stroke-width:.48}
.wind-compass-labels{fill:var(--text);font-size:4.2px;font-weight:850;text-anchor:middle;dominant-baseline:middle}
.wind-compass-labels .north-label{fill:#ef4444;font-size:5px;font-weight:950}
.wind-compass-ticks line.north-marker{stroke:#ef4444;stroke-width:.8}
.wind-degree-labels{fill:var(--text);font-size:2.8px;font-weight:650;text-anchor:middle;dominant-baseline:middle}
.wind-degree-labels .north-degree{fill:#ef4444;font-weight:900}
.wind-direction-line{fill:none;stroke-width:1.15;stroke-linecap:round}
.wind-direction-line-from{stroke:#facc15}
.wind-direction-line-to{stroke:#facc15}
.wind-direction-from-arrow{fill:#facc15;stroke:#facc15;stroke-width:.5;stroke-linejoin:round;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}
.wind-direction-marker{fill:#facc15;stroke:var(--card);stroke-width:.7px}
.wind-direction-to-marker{fill:#facc15;stroke:#facc15;stroke-width:.4px}
.wind-compass-labels .minor{font-size:3.2px}
.wind-center{fill:var(--card);stroke:var(--border);stroke-width:1}
.wind-direction-arrows{transform-box:view-box;transform-origin:50px 50px}
.wind-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;padding:1px 0 0}
.wind-gauge-center .wind-heading-readout{font-size:clamp(17px,4.6vw,25px);line-height:1;letter-spacing:-.045em;color:var(--text);font-weight:850;white-space:nowrap;font-variant-numeric:tabular-nums}
.wind-gauge-center .wind-speed-readout{font-size:9px;line-height:1.2;font-weight:750;color:var(--muted);margin-top:7px;letter-spacing:.01em;white-space:nowrap}
@media(max-width:700px){.wind-gauge-card{padding:18px}.wind-gauge{width:min(100%,350px)}}


.climate-gauge-card{margin-top:16px;overflow:hidden;padding-top:14px}
.climate-gauge-card .section-heading{margin-bottom:0}
.climate-gauge-wrap{display:flex;flex-direction:column;align-items:center;margin-top:4px}
.climate-triple-gauge{position:relative;width:min(100%,430px);aspect-ratio:25/11;margin:auto}
.climate-triple-gauge svg{display:block;width:100%;height:100%;overflow:visible}
.aircraft-unified-track,.aircraft-unified-temp,.aircraft-unified-dew,.aircraft-unified-humidity{fill:none;stroke-linecap:round}
.aircraft-unified-track{stroke:var(--surface);stroke-width:2.1}
.aircraft-unified-track.temp{stroke-width:3.1}
.aircraft-unified-temp{stroke:var(--climate-warm);stroke-width:3.1;transition:stroke-dasharray .7s ease}
.aircraft-unified-dew{stroke:#2563eb;stroke-width:1.1;transition:stroke-dasharray .7s ease}
.aircraft-unified-humidity{stroke:#2563eb;stroke-width:1.1;transition:stroke-dasharray .7s ease}
.aircraft-ticks{fill:var(--text);text-anchor:middle;dominant-baseline:middle;font-weight:800}
.aircraft-ticks line{stroke:var(--muted);stroke-width:.35}
.aircraft-ticks line.major{stroke:var(--text);stroke-width:.8}
.aircraft-ticks text{font-size:3.7px}
.aircraft-ticks.small text{font-size:3px}
.aircraft-ticks.small line{stroke-width:.3}
.aircraft-needle{fill:currentColor;stroke:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.aircraft-needle.dew-needle{color:#ef4444}
.aircraft-needle.humidity-needle{color:#ef4444}
.aircraft-hub{fill:var(--text);stroke:var(--card);stroke-width:.8}
.aircraft-hub.small{stroke-width:.65}
.climate-four-gauges{display:grid;grid-template-columns:minmax(0,215px);justify-content:center;gap:14px;width:100%;margin-top:8px}
.climate-instrument{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.climate-instrument svg{display:block;width:min(100%,215px);height:auto;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:50%;background:radial-gradient(circle at 38% 24%,color-mix(in srgb,white 24%,transparent),transparent 30%),radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--card) 82%,white 18%),color-mix(in srgb,var(--surface) 82%,black 18%));box-shadow:inset 0 1px 2px rgba(255,255,255,.42),inset 0 -7px 12px rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.14);position:relative}
.climate-instrument::after{content:"";position:absolute;top:0;left:50%;width:min(100%,215px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.08) 18%,transparent 38%,transparent 72%,rgba(255,255,255,.06) 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.35);mix-blend-mode:screen}
.climate-instrument>span{margin-top:1px;font-size:11px;font-weight:800;color:var(--muted);text-align:center}
.climate-instrument>strong{margin-top:2px;font-size:20px;line-height:1;font-weight:900;color:var(--text);text-align:center}
.aircraft-unified-track{stroke:color-mix(in srgb,var(--muted) 50%,black 50%);stroke-width:2.1}
.aircraft-unified-dew,.aircraft-unified-humidity,.aircraft-unified-rain,.aircraft-unified-cloud{stroke:#aeb7c2;stroke-width:1.1;fill:none;stroke-linecap:round}
.aircraft-unified-dew,.aircraft-unified-humidity{filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
:root[data-theme="dark"] .climate-instrument svg{background:radial-gradient(circle at 38% 24%,rgba(255,255,255,.14),transparent 30%),radial-gradient(circle at 50% 42%,#263242,#111827);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 2px rgba(255,255,255,.18),inset 0 -7px 12px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.35)}
:root[data-theme="dark"] .climate-instrument::after{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 20%,transparent 40%,transparent 72%,rgba(255,255,255,.04));box-shadow:inset 0 1px 1px rgba(255,255,255,.18)}
:root[data-theme="dark"] .aircraft-unified-dew,:root[data-theme="dark"] .aircraft-unified-humidity,:root[data-theme="dark"] .aircraft-unified-rain,:root[data-theme="dark"] .aircraft-unified-cloud{stroke:#c4cbd3}
@media(max-width:560px){.climate-four-gauges{gap:10px 2px}.climate-instrument svg{width:min(100%,195px)}.climate-instrument::after{width:min(100%,195px)}.climate-instrument>span{font-size:10px}.climate-instrument>strong{font-size:18px}}
.humidity-zone-row{display:flex;justify-content:center;min-height:20px;margin-top:4px;margin-bottom:4px}
.humidity-zone{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:999px;font-size:10px;line-height:1;font-weight:800;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.humidity-zone.dry{border-color:#f59e0b;color:#b45309}
.humidity-zone.comfortable{border-color:#22c55e;color:#15803d}
.humidity-zone.humid{border-color:#f97316;color:#ea580c}
.humidity-zone.condensation{border-color:#eab308;color:#ca8a04}
:root{--climate-dew:#2563eb;--climate-cool:#60a5fa;--climate-neutral:#94a3b8;--climate-warm:#ef4444}
:root[data-theme="dark"]{--climate-dew:#60a5fa;--climate-cool:#38bdf8;--climate-neutral:#94a3b8;--climate-warm:#fb7185}
@media(max-width:560px){.climate-triple-gauge{width:min(100%,390px)}}


.alert-history-delete{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:#dc2626;
  cursor:pointer;
}
.alert-history-delete:hover{background:#f8fafc;color:#b91c1c}
.alert-history-delete svg{width:17px;height:17px;fill:currentColor}

/* Temperature dial refinements: larger upper arc, 5-degree majors with intermediate markers, longer red needle. */
.aircraft-needle.temp-needle{stroke:var(--climate-warm);stroke-width:1.15}


.temperature-summary-card{margin-top:16px;margin-bottom:16px}
.temperature-card-heading{margin-bottom:8px}
.temperature-summary-main{display:flex;align-items:center;justify-content:space-between;gap:20px}
.temperature-summary-current{display:flex;flex-direction:column;gap:5px}
.temperature-summary-current strong{font-size:42px;line-height:1;font-weight:900;letter-spacing:-.045em;color:var(--text)}
.temperature-feels-like-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex-wrap:nowrap}.temperature-summary-current span{font-size:12px;font-weight:700;color:var(--muted)}
.temperature-summary-forecast{display:flex;align-items:center;gap:12px}.temperature-summary-forecast .temperature-conditions-inline{margin-left:4px;text-align:right}
.temperature-forecast-icon{display:grid;place-items:center;width:48px;height:48px;font-size:36px;line-height:1}
.temperature-summary-range{display:flex;gap:14px}
.temperature-summary-range div{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:40px}
.temperature-summary-range span{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.temperature-summary-range strong{font-size:20px;line-height:1;font-weight:900;color:var(--text)}
.temperature-stability-row{display:flex;align-items:center;min-width:0;margin-top:15px;padding-top:12px;border-top:1px solid var(--border);gap:10px}
.temperature-comfort-inline{margin-left:auto}
.temperature-stability-label{flex:0 0 auto;font-size:11px;font-weight:900;color:var(--text);white-space:nowrap}
.temperature-stability-track{flex:0 0 100px;width:100px;height:22px;min-width:100px;border-radius:999px;background:var(--surface);border:1px solid var(--border);overflow:hidden}
.temperature-stability-fill{height:100%;border-radius:999px;background:#22c55e;transition:width .6s ease,background-color .3s ease}
.temperature-stability-fill.changing{background:#eab308}
.temperature-stability-fill.unstable{background:#ef4444}
.temperature-stability-fill.warning{animation:temperature-stability-warning .8s ease-in-out infinite}
.temperature-stability-track.warning{border-color:#eab308}
@keyframes temperature-stability-warning{0%,100%{opacity:1}50%{opacity:.35}}
.temperature-comfort-inline{flex:0 0 auto;font-size:10px;font-weight:800;color:var(--muted);white-space:nowrap;margin-left:28px}
.temperature-conditions-inline{margin-left:0;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}.temperature-conditions-inline b{color:var(--text);font-weight:900}
.temperature-comfort-inline .humidity-zone{font-size:10px}
@media(max-width:560px){
  .temperature-summary-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:10px}
  .temperature-summary-current{min-width:0;width:100%}
  .temperature-summary-current strong{font-size:36px}
  .temperature-feels-like-row{justify-content:space-between;gap:4px;min-width:0}
  .temperature-feels-like-row>span{flex:0 0 auto;white-space:nowrap;font-size:11px}
  .temperature-conditions-inline{flex:1 1 auto;min-width:0;text-align:right;font-size:10px}
  .temperature-conditions-inline b{white-space:nowrap}
  .temperature-summary-forecast{justify-self:end;min-width:0;display:grid;grid-template-columns:auto auto;column-gap:10px;row-gap:5px;justify-items:end}
  .temperature-summary-forecast .temperature-conditions-inline{grid-column:1 / -1;justify-self:end;margin-left:0;text-align:right;font-size:10px}
  .temperature-forecast-icon{flex:0 0 48px;width:48px;height:48px;font-size:36px}
  .temperature-summary-range{gap:14px}
  .temperature-summary-range div{min-width:40px}
  .temperature-summary-range strong{font-size:20px}
  .temperature-stability-row{gap:6px}
  .temperature-stability-label,.temperature-comfort-inline{font-size:9px}
  .temperature-stability-track{flex-basis:100px;width:100px;min-width:100px;height:18px}
  .temperature-comfort-inline{margin-left:12px}
  .temperature-comfort-inline .humidity-zone{font-size:9px;padding:4px 7px}
}
.temperature-comfort-inline{margin-left:auto}

.location-form{display:flex;flex-direction:column;gap:14px}
.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.location-grid .full{grid-column:1 / -1}
.location-form label{display:block;margin-bottom:6px;font-size:12px;font-weight:800;color:var(--text)}
.location-form input{width:100%}
.location-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.location-actions button{margin:0}
@media(max-width:560px){
  .location-grid{grid-template-columns:1fr}
  .location-grid .full{grid-column:auto}
  .location-actions{flex-direction:column;align-items:stretch}
  .location-actions button{width:100%}
}


.forecast-card{margin-top:16px}
.forecast-days{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;align-items:stretch}
.forecast-day{min-width:0;display:grid;grid-template-rows:18px 42px 20px 16px;align-items:center;justify-items:center;gap:8px;padding:12px 6px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-align:center}
.forecast-day-name{font-size:12px;font-weight:900;color:var(--text);line-height:18px}
.forecast-icon{display:grid;place-items:center;width:42px;height:42px;font-size:29px;line-height:1}
.forecast-temperature{font-size:17px;line-height:20px;font-weight:900;color:var(--text);white-space:nowrap}
.forecast-low{font-size:13px;font-weight:700;color:var(--muted)}
.forecast-rain{font-size:11px;line-height:16px;font-weight:800;color:#2563eb;white-space:nowrap}
.forecast-rain-empty{visibility:hidden}
@media(max-width:560px){
  .forecast-days{gap:5px}
  .forecast-day{grid-template-rows:18px 38px 20px 16px;padding:10px 3px;gap:6px}
  .forecast-icon{width:38px;height:38px;font-size:26px}
  .forecast-temperature{font-size:16px}
  .forecast-low{font-size:12px}
  .forecast-rain{font-size:10px}
}

.weather-change-card{margin-top:16px}
.weather-change-card .section-heading{align-items:center}
.weather-change-score{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:78px;height:78px;box-sizing:border-box;border-radius:50%;background:var(--surface);border:2px solid var(--border);font-size:30px;font-weight:900;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.weather-change-summary{margin-top:14px;font-size:15px;font-weight:800;color:var(--text)}
.weather-change-reasons{display:grid;gap:8px;margin-top:12px}
.weather-change-reasons[hidden]{display:none!important}
.weather-change-reason{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border);font-size:13px;line-height:1.45;color:var(--text)}
.weather-change-reason::before{content:none}
.weather-change-direction-arrow{display:inline-block;margin:0 2px;font-size:18px;line-height:1;font-weight:900;color:var(--accent)}
.weather-change-reasons-toggle{width:100%;margin-top:12px;min-height:42px}
.weather-change-reasons-toggle[aria-expanded="true"]{margin-bottom:0}
.weather-change-note{margin:12px 0 0;font-size:11px;color:var(--muted)}
@media(max-width:560px){
  .weather-change-card .section-heading{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "score" "summary";align-items:center;justify-items:center;row-gap:9px}
  .weather-change-card .section-heading>div:first-child{grid-area:title;width:100%;text-align:center}
  .weather-change-score{grid-area:score;justify-self:center;width:64px;height:64px;font-size:26px}
  .weather-change-summary{grid-area:summary;width:100%;margin-top:0;align-self:center;text-align:center}
}

.weather-change-score[data-level="low"]{border-color:#22c55e;color:#15803d}
.weather-change-score[data-level="moderate"]{border-color:#f59e0b;color:#b45309}
.weather-change-score[data-level="high"]{border-color:#ef4444;color:#dc2626}

.wind-summary-line{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:2px;font-size:12px;font-weight:700;color:var(--muted)}
.wind-summary-line strong{color:var(--text);font-weight:900}
@media(max-width:560px){.wind-summary-line{gap:20px;font-size:11px}}


/* Horizontal segmented environmental readings */
.climate-gauge-card{overflow:hidden}
.climate-bars{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.climate-bar-row{display:grid;grid-template-columns:112px minmax(0,1fr) 54px;align-items:center;gap:12px;min-width:0}
.climate-bar-label{font-size:13px;font-weight:750;color:var(--text);line-height:1.2}
.climate-segment-track{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));gap:3px;min-width:0;align-items:center}
.climate-segment{display:block;height:13px;min-width:0;border-radius:2px;background:color-mix(in srgb,var(--muted) 20%,transparent);transition:background-color .2s ease}
.climate-segment.active{background:#22c55e}
.climate-segment.danger.active{background:#ef4444}
.climate-bar-value{font-size:14px;font-weight:850;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
@media(max-width:560px){
  .climate-bars{gap:15px;margin-top:14px}
  .climate-bar-row{grid-template-columns:94px minmax(0,1fr) 45px;gap:7px}
  .climate-bar-label{font-size:11px}
  .climate-segment-track{gap:2px}
  .climate-segment{height:11px}
  .climate-bar-value{font-size:12px}
}

.climate-bar-predicted-rain .climate-segment.active{background:#2698f3}
.climate-bar-predicted-rain .climate-segment.danger.active{background:#1674c5}


/* Transparent weather insight meters */
.rain-probability-card,.conditions-trend-card{margin-top:16px}
.rain-probability-card .section-heading,.conditions-trend-card .section-heading{align-items:center}
.rain-probability-score{display:flex;align-items:center;justify-content:center;min-width:82px;min-height:62px;padding:8px;border:2px solid #3987d7;border-radius:16px;color:#3987d7;background:var(--surface);font-size:27px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.conditions-trend-score{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border:2px solid var(--border);border-radius:50%;background:var(--surface);font-size:30px;font-weight:900;color:var(--text)}
.conditions-trend-score[data-trend="worsening"]{border-color:#c87838;color:#c87838}
.conditions-trend-score[data-trend="improving"]{border-color:#25865a;color:#25865a}
.conditions-trend-summary{margin-top:14px;font-size:15px;font-weight:800;color:var(--text)}
.insight-meter-track{width:100%;height:12px;margin-top:14px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--muted) 18%,transparent)}
.insight-meter-fill{height:100%;width:0;border-radius:999px;transition:width .25s ease}
.rain-meter-fill{background:#3987d7}
.change-meter-fill{background:#22a06b}
.change-meter-fill[data-level="moderate"]{background:#d49a36}
.change-meter-fill[data-level="high"]{background:#d94b4b}
.rain-probability-meta{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px;color:var(--muted)}
.rain-probability-meta strong{color:var(--text);font-variant-numeric:tabular-nums}
.conditions-trend-reasons{display:grid;gap:8px;margin-top:12px}
.algorithm-details{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);color:var(--text);font-size:12px;line-height:1.55}
.algorithm-details summary{cursor:pointer;font-size:13px;font-weight:800;color:var(--text);padding:5px 0}
.algorithm-details p{margin:10px 0;color:var(--muted)}
.algorithm-details ul{margin:8px 0;padding-left:20px;color:var(--muted)}
.algorithm-details li{margin:6px 0}
@media(max-width:560px){
  .rain-probability-card .section-heading,.conditions-trend-card .section-heading{align-items:center;gap:10px}
  .rain-probability-score{min-width:68px;min-height:54px;font-size:23px;border-radius:13px}
  .conditions-trend-score{width:56px;height:56px;font-size:27px}
  .rain-probability-meta{font-size:12px}
  .algorithm-details{font-size:12px}
}

.weather-baseline-status{margin-top:9px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted);font-size:12px;line-height:1.45}


.local-weather-tools{display:grid;gap:9px;padding:14px 0 8px;border-top:1px solid var(--border);margin-top:12px}
.local-weather-tools>label{font-size:14px;font-weight:800}
.local-weather-tools .theme-select{width:100%;min-width:0}
.local-weather-actions{display:flex;flex-wrap:wrap;gap:8px}
.local-weather-actions button{font-size:13px;padding:10px 12px}
#localWeatherStatus{margin:0;font-size:13px;overflow-wrap:anywhere}
#localWeatherStatus[data-state="error"]{color:#b91c1c}
.local-weather-help{font-size:12px;line-height:1.5;margin:0}
.history-range-button[hidden]{display:none!important}
@media(max-width:560px){.local-weather-actions{display:grid;grid-template-columns:1fr}.local-weather-actions button{width:100%}}

.local-weather-api-options{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:12px}.local-weather-api-options label{align-self:end;color:var(--muted);font-size:13px;font-weight:700}.local-weather-api-options select{min-width:0;width:100%}.local-weather-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.local-weather-actions button{flex:1 1 auto}@media(max-width:560px){.local-weather-api-options{grid-template-columns:1fr}.local-weather-actions button{width:100%}}


/* Focused sign-in layout: keep the admin entry point balanced on desktop and mobile. */
.auth-page {
    min-height: 100vh;
    min-height: 100svh;
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 58%),
        var(--background);
}
.auth-shell {
    width: min(100% - 32px, 440px);
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom));
}
.admin-auth {
    width: 100%;
    margin: 0;
    padding: clamp(22px, 5vw, 34px);
    border-radius: 22px;
}
.admin-auth .eyebrow {
    color: var(--accent);
    overflow-wrap: anywhere;
}
.admin-auth h1 {
    font-size: clamp(25px, 6vw, 32px);
    line-height: 1.15;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}
.admin-auth > .muted {
    margin: 10px 0 24px;
    line-height: 1.55;
}
.admin-auth form {
    display: grid;
    gap: 16px;
}
.admin-auth form label {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-size: 14px;
    font-weight: 750;
}
.admin-auth input:not([type="hidden"]) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 500;
    box-shadow: none;
}
.admin-auth input:not([type="hidden"]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.admin-auth .auth-submit,
.admin-auth .admin-auth-back {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.admin-auth .auth-submit:hover,
.admin-auth .admin-auth-back:hover {
    filter: brightness(1.08);
}
.admin-auth .auth-submit:focus-visible,
.admin-auth .admin-auth-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.admin-auth .admin-auth-back {
    margin-top: 10px;
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}
.admin-auth .monitor-warning {
    line-height: 1.5;
    overflow-wrap: anywhere;
}
@media (max-width: 560px) {
    .auth-shell {
        width: 100%;
        padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
        align-items: center;
    }
    .admin-auth {
        padding: 24px 20px;
        border-radius: 18px;
    }
    .admin-auth > .muted {
        margin-bottom: 22px;
    }
}
@media (max-width: 360px) {
    .auth-shell { padding-left: 10px; padding-right: 10px; }
    .admin-auth { padding: 21px 16px; }
}