/* ============================================================
   Atmos — Weather Dashboard
   Self-contained styling: system fonts, CSS variables, no assets
   ============================================================ */

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "New York", ui-serif, Georgia, "Times New Roman", serif;

  --bg: #f2eee4;
  --bg-glow-1: rgba(255, 236, 200, 0.55);
  --bg-glow-2: rgba(196, 214, 232, 0.35);
  --ink: #23201b;
  --ink-soft: #6f695e;
  --ink-faint: #9a9387;
  --card: rgba(252, 250, 244, 0.82);
  --card-solid: #fcfaf4;
  --line: rgba(35, 32, 27, 0.13);
  --line-strong: rgba(35, 32, 27, 0.22);
  --shadow: 0 1px 2px rgba(35, 32, 27, 0.05), 0 8px 28px rgba(35, 32, 27, 0.07);
  --accent: #b4641e;
  --track: rgba(35, 32, 27, 0.10);
  --range-cool: #64aef0;
  --range-warm: #f2a24b;
  --hero-ink: #1d2733;
  --hero-ink-soft: rgba(29, 39, 51, 0.72);
  --chip: rgba(255, 255, 255, 0.42);
  --chip-line: rgba(255, 255, 255, 0.55);
  --good: #3e9c58;
  --focus: #2f6fd0;
}

[data-theme="dark"] {
  --bg: #0f1216;
  --bg-glow-1: rgba(38, 54, 76, 0.5);
  --bg-glow-2: rgba(24, 30, 44, 0.6);
  --ink: #ece7db;
  --ink-soft: #a39c8f;
  --ink-faint: #7a746a;
  --card: rgba(24, 27, 33, 0.78);
  --card-solid: #1a1d24;
  --line: rgba(236, 231, 219, 0.13);
  --line-strong: rgba(236, 231, 219, 0.24);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 32px rgba(0, 0, 0, 0.45);
  --accent: #e0a05c;
  --track: rgba(236, 231, 219, 0.14);
  --hero-ink: #eef3f8;
  --hero-ink-soft: rgba(238, 243, 248, 0.74);
  --chip: rgba(10, 16, 24, 0.28);
  --chip-line: rgba(255, 255, 255, 0.22);
  --good: #58c078;
  --focus: #7aa8ee;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  transition: background-color 0.45s ease, color 0.45s ease;
}

.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 700px at 12% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(1000px 800px at 105% 15%, var(--bg-glow-2), transparent 55%),
    var(--bg);
  transition: background 0.45s ease;
}

.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 28px 34px;
}

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 0 20px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }

.brand-mark {
  width: 22px; height: 22px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #f6b73c 0 38%, transparent 40%),
    linear-gradient(180deg, #9fc3e0 55%, #7fa8cc 56%);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.city-tabs {
  display: flex;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow);
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.city-tabs::-webkit-scrollbar { display: none; }

.city-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.city-tabs button:hover { color: var(--ink); }
.city-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
}
[data-theme="dark"] .city-tabs button[aria-selected="true"] {
  background: #ece7db;
  color: #14171c;
}

.topbar-controls { display: flex; align-items: center; gap: 10px; }

.unit-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 3px;
  gap: 2px;
}
.unit-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.unit-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff8ef;
}

.theme-toggle {
  appearance: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: color 0.2s ease, transform 0.2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

button:focus-visible, .hourly-scroll:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.45s ease, border-color 0.45s ease;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 8px;
}
.card-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.card-sub { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 34px 28px;
  color: var(--hero-ink);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-bg, linear-gradient(115deg, #9ec7e8, #e8d8b0));
  z-index: -2;
  transition: opacity 0.4s ease;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 85% -30%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(700px 500px at -10% 120%, rgba(255, 255, 255, 0.18), transparent 55%);
  z-index: -1;
  pointer-events: none;
}

/* condition palettes (light) */
.cond-clear-day    { --hero-bg: linear-gradient(115deg, #7db6e8 0%, #a9cfe9 48%, #f0d9a4 100%); }
.cond-clear-night  { --hero-bg: linear-gradient(115deg, #1c2b4d 0%, #33456e 55%, #6d6a8f 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.72); --chip: rgba(8,14,28,.3); --chip-line: rgba(255,255,255,.22); }
.cond-partly-cloudy-day   { --hero-bg: linear-gradient(115deg, #8cb9dd 0%, #b9cfe2 52%, #e9d9b6 100%); }
.cond-partly-cloudy-night { --hero-bg: linear-gradient(115deg, #26344f 0%, #41537a 55%, #7c7595 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.72); --chip: rgba(8,14,28,.3); --chip-line: rgba(255,255,255,.22); }
.cond-cloudy       { --hero-bg: linear-gradient(115deg, #8fa3b5 0%, #aebdca 55%, #cfd6d3 100%); }
.cond-drizzle      { --hero-bg: linear-gradient(115deg, #7f97ac 0%, #a2b6c4 55%, #c3cfd0 100%); }
.cond-rain         { --hero-bg: linear-gradient(115deg, #5e7a95 0%, #849fb2 55%, #a9bcc5 100%); }
.cond-thunderstorm { --hero-bg: linear-gradient(115deg, #3c4a6b 0%, #5a6890 55%, #8a86a5 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.74); --chip: rgba(8,14,28,.3); --chip-line: rgba(255,255,255,.22); }
.cond-snow         { --hero-bg: linear-gradient(115deg, #a9c3d9 0%, #c9d9e6 55%, #eef0ea 100%); }
.cond-fog          { --hero-bg: linear-gradient(115deg, #9aa7ad 0%, #bcc6c8 55%, #d8dcd4 100%); }
.cond-wind         { --hero-bg: linear-gradient(115deg, #7ba3a8 0%, #a4c2bd 55%, #d3d9c3 100%); }

[data-theme="dark"] .cond-clear-day    { --hero-bg: linear-gradient(115deg, #274a72 0%, #38628c 55%, #6d5f3e 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.74); --chip: rgba(8,14,28,.3); --chip-line: rgba(255,255,255,.2); }
[data-theme="dark"] .cond-partly-cloudy-day   { --hero-bg: linear-gradient(115deg, #2c4a68 0%, #416084 55%, #6f6046 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.74); --chip: rgba(8,14,28,.3); --chip-line: rgba(255,255,255,.2); }
[data-theme="dark"] .cond-cloudy       { --hero-bg: linear-gradient(115deg, #3a4552 0%, #525f6c 55%, #6c7472 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.74); --chip: rgba(8,14,28,.28); --chip-line: rgba(255,255,255,.2); }
[data-theme="dark"] .cond-drizzle      { --hero-bg: linear-gradient(115deg, #33424f 0%, #4a5c6a 55%, #626f6e 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.74); --chip: rgba(8,14,28,.28); --chip-line: rgba(255,255,255,.2); }
[data-theme="dark"] .cond-rain         { --hero-bg: linear-gradient(115deg, #27374a 0%, #3c5266 55%, #566873 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.74); --chip: rgba(8,14,28,.28); --chip-line: rgba(255,255,255,.2); }
[data-theme="dark"] .cond-snow         { --hero-bg: linear-gradient(115deg, #3d4f63 0%, #5a7186 55%, #8b969b 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.74); --chip: rgba(8,14,28,.28); --chip-line: rgba(255,255,255,.2); }
[data-theme="dark"] .cond-fog          { --hero-bg: linear-gradient(115deg, #3c4448 0%, #596366 55%, #767c74 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.74); --chip: rgba(8,14,28,.28); --chip-line: rgba(255,255,255,.2); }
[data-theme="dark"] .cond-wind         { --hero-bg: linear-gradient(115deg, #2c4a4c 0%, #446a68 55%, #6c7460 100%); --hero-ink: #eef2f9; --hero-ink-soft: rgba(238,242,249,.74); --chip: rgba(8,14,28,.28); --chip-line: rgba(255,255,255,.2); }

.hero-main { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-width: 0; }

.hero-city {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.hero-meta {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--hero-ink-soft);
  font-variant-numeric: tabular-nums;
}

.hero-now { display: flex; align-items: center; gap: 26px; }
.hero-icon { width: 148px; height: 148px; flex: none; }
.hero-icon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 5px rgba(20, 30, 45, 0.28)); }

.hero-temp {
  font-family: var(--font-display);
  font-size: 104px;
  line-height: 0.95;
  font-weight: 550;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: flex-start;
}
.hero-temp .deg {
  font-size: 40px;
  font-weight: 500;
  margin-top: 12px;
  margin-left: 4px;
  color: var(--hero-ink-soft);
}
.hero-cond { margin: 8px 0 0; font-size: 19px; font-weight: 600; }
.hero-feels { margin: 3px 0 0; font-size: 14px; color: var(--hero-ink-soft); }

.hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  text-align: right;
}

.hero-hilo { font-size: 16px; font-weight: 600; display: flex; gap: 14px; font-variant-numeric: tabular-nums; }
.hero-hilo .lo { color: var(--hero-ink-soft); font-weight: 550; }

.hero-chips {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: 340px;
}
.hero-chips li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 550;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--chip-line);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
}
.hero-chips svg { width: 15px; height: 15px; opacity: 0.85; }

.hero-updated { margin: 0; font-size: 12px; color: var(--hero-ink-soft); }

/* ---------- Content grid ---------- */

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}

.col-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ---------- Hourly ---------- */

.hourly-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  padding-bottom: 6px;
  border-radius: 0 0 22px 22px;
}
.hourly-scroll::-webkit-scrollbar { height: 6px; }
.hourly-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.hourly-track { position: relative; width: max-content; padding: 12px 8px 10px; }

.hourly-curve { position: absolute; left: 0; top: 0; pointer-events: none; }
.hourly-curve .cline { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.85; }
.hourly-curve .carea { fill: url(#hourlyFill); }
.hourly-curve .dot { fill: var(--card-solid); stroke: var(--accent); stroke-width: 1.6; }

.hour-cols { display: flex; position: relative; }

.h-col {
  position: relative;
  width: 68px;
  height: 196px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.h-time {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  height: 16px;
}
.h-time.now { color: var(--accent); font-weight: 700; }
.h-icon { width: 26px; height: 26px; margin-top: 7px; }
.h-icon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(30, 42, 58, 0.25)); }
.h-temp {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 14.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin: 0 10px;
  padding: 1px 0;
  z-index: 2;
  transition: background-color 0.45s ease;
}
.h-precip {
  position: absolute;
  bottom: 0;
  font-size: 11px;
  font-weight: 600;
  color: #4d8ecb;
  height: 14px;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .h-precip { color: #79b3e8; }
.h-precip.zero { visibility: hidden; }

/* ---------- Daily ---------- */

.daily-list { list-style: none; margin: 0; padding: 6px 22px 16px; }

.d-row {
  display: grid;
  grid-template-columns: 58px 34px 46px 44px minmax(90px, 1fr) 44px;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.d-row:first-child { border-top: 0; }

.d-day { font-size: 14px; font-weight: 600; }
.d-day .d-date { display: block; font-size: 11px; color: var(--ink-faint); font-weight: 500; }
.d-icon { width: 26px; height: 26px; }
.d-icon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(30, 42, 58, 0.25)); }
.d-precip {
  font-size: 12px; font-weight: 600; color: #4d8ecb;
  display: flex; align-items: center; gap: 3px;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .d-precip { color: #79b3e8; }
.d-precip svg { width: 11px; height: 11px; }
.d-precip.zero { color: var(--ink-faint); }
.d-precip.zero svg { opacity: 0.35; }

.d-temp { font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.d-temp.lo { color: var(--ink-faint); font-weight: 550; }

.d-range { position: relative; height: 5px; border-radius: 3px; background: var(--track); }
.d-range-fill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--range-cool), var(--range-warm));
}
.d-range-dot {
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--card-solid);
  border: 2px solid var(--ink);
  transform: translate(-50%, -50%);
}

/* ---------- Details tiles ---------- */

.col-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 15px 16px 14px;
  min-height: 158px;
  display: flex;
  flex-direction: column;
  transition: background-color 0.45s ease, border-color 0.45s ease;
}

.tile-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tile-label svg { width: 13px; height: 13px; }

.tile-value {
  margin-top: 7px;
  font-size: 26px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.tile-value .unit { font-size: 14px; font-weight: 550; color: var(--ink-soft); margin-left: 3px; }
.tile-sub { margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.tile-viz { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: center; }

/* wind compass */
.compass { width: 76px; height: 76px; }
.compass .dial { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.compass .tick { stroke: var(--ink-faint); stroke-width: 1; }
.compass .card-letter { font-size: 8px; fill: var(--ink-faint); font-weight: 700; }
.compass .needle { fill: var(--accent); }
.compass .hub { fill: var(--card-solid); stroke: var(--line-strong); }

/* gauges (UV / pressure) */
.gauge { width: 108px; height: 62px; }
.gauge .arc-bg { fill: none; stroke: var(--track); stroke-width: 7; stroke-linecap: round; }
.gauge .arc-val { fill: none; stroke-width: 7; stroke-linecap: round; }
.gauge .needle { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.gauge .needle-hub { fill: var(--ink); }

/* small bar (humidity / visibility) */
.bar-track { height: 5px; border-radius: 3px; background: var(--track); position: relative; margin-top: 10px; }
.bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; }

/* sun arc */
.sun-arc { width: 100%; max-width: 300px; height: auto; display: block; }
.sun-arc .horizon { stroke: var(--line-strong); stroke-width: 1; }
.sun-arc .path { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 3 4; }
.sun-arc .path-done { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.sun-arc .sun-dot { fill: #f2b53c; stroke: #fff6df; stroke-width: 2; }
.sun-arc .ground { fill: var(--ink-faint); }

.sun-times { display: flex; justify-content: space-between; width: 100%; margin-top: 2px; }
.sun-times .st { display: flex; flex-direction: column; gap: 1px; }
.sun-times .st span { font-size: 11px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.sun-times .st strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.sun-times .st:last-child { text-align: right; }

/* AQI scale */
.aqi-scale { display: flex; gap: 3px; margin-top: 10px; }
.aqi-scale span { height: 5px; flex: 1; border-radius: 3px; background: var(--track); }
.aqi-scale span.on-0 { background: #4db56a; }
.aqi-scale span.on-1 { background: #a9c94f; }
.aqi-scale span.on-2 { background: #f0c93f; }
.aqi-scale span.on-3 { background: #ef9638; }
.aqi-scale span.on-4 { background: #e05b4b; }

.aqi-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: 4px;
}
.aqi-0 { background: rgba(77,181,106,.16); color: #3e9c58; }
.aqi-1 { background: rgba(169,201,79,.18); color: #7f9c33; }
.aqi-2 { background: rgba(240,201,63,.2); color: #a8861a; }
.aqi-3 { background: rgba(239,150,56,.2); color: #c26a1b; }
.aqi-4 { background: rgba(224,91,75,.18); color: #c04535; }
[data-theme="dark"] .aqi-0 { color: #6ccf8a; }
[data-theme="dark"] .aqi-1 { color: #b9d76b; }
[data-theme="dark"] .aqi-2 { color: #efd469; }
[data-theme="dark"] .aqi-3 { color: #f0a95e; }
[data-theme="dark"] .aqi-4 { color: #ef8371; }

/* precip bars */
.precip-bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: auto; padding-top: 10px; }
.precip-bars span {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #7fb5e8, #4d8ecb);
  min-height: 3px;
  opacity: 0.85;
}

/* ---------- Weather icon animations ---------- */

.wx .rays { transform-origin: 50px 50px; animation: spin 26s linear infinite; }
.wx .sun-core { animation: pulse 5s ease-in-out infinite; transform-origin: 50px 50px; }
.wx .cloud-drift { animation: drift 7s ease-in-out infinite; }
.wx .cloud-drift-slow { animation: drift 10s ease-in-out infinite reverse; }
.wx .drop { animation: fall 1.5s linear infinite; }
.wx .drop.d2 { animation-delay: 0.5s; }
.wx .drop.d3 { animation-delay: 1s; }
.wx .flake { animation: fall 2.6s linear infinite; }
.wx .flake.f2 { animation-delay: 0.8s; }
.wx .flake.f3 { animation-delay: 1.7s; }
.wx .bolt { animation: flash 3.4s ease-in-out infinite; transform-origin: 50px 60px; }
.wx .fog-line { animation: fogslide 5s ease-in-out infinite; }
.wx .fog-line.l2 { animation-delay: 1.2s; }
.wx .fog-line.l3 { animation-delay: 2.4s; }
.wx .gust { animation: gust 3.2s ease-in-out infinite; }
.wx .gust.g2 { animation-delay: 1.1s; }
.wx .moon-star { animation: twinkle 3s ease-in-out infinite; }
.wx .moon-star.s2 { animation-delay: 1.4s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes fall {
  0% { transform: translateY(0); opacity: 0; }
  18% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(11px); opacity: 0; }
}
@keyframes flash {
  0%, 58%, 100% { opacity: 0.85; transform: scale(1); }
  62% { opacity: 1; transform: scale(1.08); }
  66% { opacity: 0.35; }
  70% { opacity: 1; }
}
@keyframes fogslide { 0%, 100% { transform: translateX(0); opacity: .75; } 50% { transform: translateX(7px); opacity: 1; } }
@keyframes gust { 0%, 100% { transform: translateX(0); opacity: .7; } 50% { transform: translateX(8px); opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .wx * { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Footer ---------- */

.footer {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer p { margin: 0; font-size: 12px; color: var(--ink-faint); }

.noscript { padding: 40px; text-align: center; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .col-side { grid-template-columns: repeat(2, 1fr); }
  .hero { flex-direction: column; padding: 26px 24px; }
  .hero-side { align-items: flex-start; text-align: left; }
  .hero-chips { justify-content: flex-start; }
  .topbar { gap: 12px; }
  .brand { margin-right: 0; }
  .city-tabs { order: 3; width: 100%; }
  .topbar-controls { margin-left: auto; }
}

@media (max-width: 560px) {
  .shell { padding: 14px 14px 26px; }
  .hero-temp { font-size: 82px; }
  .hero-icon { width: 104px; height: 104px; }
  .hero-now { gap: 16px; }
  .hero-city { font-size: 27px; }
  .card-head { padding: 16px 16px 6px; }
  .daily-list { padding: 4px 16px 12px; }
  .d-row { grid-template-columns: 46px 30px 40px 38px minmax(70px, 1fr) 38px; gap: 8px; }
  .col-side { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile { min-height: 148px; }
}