/* Color and glass from the original MeteoAI, over the Atmosphere layout. */
html:has(body.atmosphere) { background: #062d59; }
body.atmosphere {
  --scene-deep: #062d59;
  --scene-mid: #176fb3;
  --scene-light: #79b8ee;
  --scene-accent: rgba(157, 123, 255, .46);
  --scene-sun: rgba(255, 244, 190, .75);
  --hero-a: #104574;
  --hero-b: #5d88d0;
  --glass: rgba(241, 248, 255, .82);
  --glass-strong: rgba(247, 251, 255, .88);
  --glass-soft: rgba(255, 255, 255, .4);
  --shadow: 0 14px 40px #001d4526;
  --inner: inset 0 1px 0 #ffffffa6;
  background:
    radial-gradient(circle at 78% 8%, var(--scene-sun), transparent 210px),
    radial-gradient(ellipse at 74% 35%, var(--scene-accent), transparent 38%),
    radial-gradient(ellipse at 12% 22%, rgba(53, 185, 255, .5), transparent 35%),
    linear-gradient(145deg, var(--scene-deep) 0%, var(--scene-mid) 46%, var(--scene-light) 100%);
  background-attachment: fixed;
}
body.atmosphere[data-weather-scene*="night"] {
  --scene-deep: #050b22; --scene-mid: #172d66; --scene-light: #4f5796;
  --scene-accent: rgba(98, 91, 214, .42); --scene-sun: transparent;
  --hero-a: #162344; --hero-b: #535992;
}
body.atmosphere[data-weather-scene="rain"], body.atmosphere[data-weather-scene="drizzle"] {
  --scene-deep: #092943; --scene-mid: #315f83; --scene-light: #7891ac;
  --scene-accent: rgba(102, 135, 190, .42); --scene-sun: transparent;
  --hero-a: #264b68; --hero-b: #698aa6;
}
body.atmosphere[data-weather-scene="cloudy"] {
  --scene-deep: #173852; --scene-mid: #547997; --scene-light: #a6bbca;
  --scene-accent: rgba(184, 202, 220, .4); --scene-sun: transparent;
  --hero-a: #2f526f; --hero-b: #8ca8c2;
}
body.atmosphere[data-weather-scene="hot"] {
  --scene-deep: #0a5591; --scene-mid: #dc7e68; --scene-light: #ffc493;
  --scene-accent: rgba(255, 154, 105, .48);
  --hero-a: #625c90; --hero-b: #bc938f;
}
body.atmosphere::before, body.atmosphere::after {
  display: block; content: ''; position: fixed; inset: 0; pointer-events: none;
}
body.atmosphere::before {
  background: radial-gradient(ellipse at 15% 75%, #ffffff12, transparent 42%),
    radial-gradient(ellipse at 78% 68%, #ffffff29, transparent 32%),
    linear-gradient(180deg, transparent 35%, #04173238);
}
body.atmosphere::after {
  background: linear-gradient(112deg, transparent 16%, #ffffff0a 16.3%, transparent 17%, transparent 70%, #ffffff0e 70.2%, transparent 71%),
    radial-gradient(circle at 23% 9%, #ffffffa6 0 1px, transparent 2px),
    radial-gradient(circle at 91% 37%, #ffffff66 0 1px, transparent 2px);
}
.atmosphere .brand, .atmosphere h1, .atmosphere .workspace-heading h2 { color: #fff; }
.atmosphere .panel > .section-heading h2, .atmosphere .settings-form > label,
.atmosphere .settings-form > .two-column > label { color: #e7f3ff; }
.atmosphere .app-info-grid > span { color: #5e778b; }
.atmosphere .brand-ai { color: #b3dfff; }
.atmosphere .brand small, .atmosphere .eyebrow, .atmosphere .nav-caption { color: #daeaff; }
.atmosphere .brand-symbol { color: #fff; background: #ffffff20; border: 1px solid #ffffff4d; box-shadow: inset 0 1px 0 #ffffff66, 0 5px 18px #06234a24; }
.atmosphere .header-date { border-color: #ffffff40; }
.atmosphere .workspace-heading, .atmosphere .nav-note { border-color: #ffffff29; }
.atmosphere .city-search-toggle, .atmosphere .icon-button {
  color: #fff; border-color: #ffffff45; background: #ffffff16;
  box-shadow: inset 0 1px 0 #ffffff3b, 0 4px 15px #001c4521;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.atmosphere .city-search-toggle:hover, .atmosphere .icon-button:hover { background: #ffffff2e; border-color: #ffffff70; }
.atmosphere .design-switch { background: #072c512e; border-color: #ffffff35; backdrop-filter: blur(16px); }
.atmosphere .design-switch span, .atmosphere .design-switch a { color: #e0efff; }
.atmosphere .design-switch .selected { background: #ffffffeb; color: #245b86; }
.atmosphere .tab { color: #d3e7fa; }
.atmosphere .tab.active { color: #fff; background: linear-gradient(120deg, #ffffff3b, #ffffff16); border-color: #ffffff52; box-shadow: inset 0 1px 0 #ffffff66, 0 8px 24px #032b5421; backdrop-filter: blur(18px); }
.atmosphere .tab:hover:not(.active) { background: #ffffff18; color: #fff; }
.atmosphere .nav-note, .atmosphere .nav-note strong, .atmosphere .local-tag { color: #d8ebff; }
.atmosphere .note-orbit { color: #b7d7ff; text-shadow: 0 0 24px #b5b4ff99; }
.atmosphere .data-status { color: #e5f1ff; background: #123b624d; border-color: #ffffff40; backdrop-filter: blur(12px); }
.atmosphere .data-status[data-tone="demo"] { color: #ffe2af; background: #61452d59; border-color: #ffd79b73; }
.atmosphere .today-metric, .atmosphere .home-hourly-card,
.atmosphere .analysis-box, .atmosphere .station-card, .atmosphere .chart-card,
.atmosphere .sources-drawer, .atmosphere .app-info-card, .atmosphere .quick-search, .atmosphere .keys-panel,
.atmosphere .api-status-strip, .atmosphere .pws-update-settings, .atmosphere .api-update-settings {
  background: linear-gradient(125deg, #ffffff36, #ffffff08), var(--glass);
  border-color: #ffffff94; box-shadow: var(--inner), var(--shadow);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.atmosphere .source-card, .atmosphere .around-card, .atmosphere .metric,
.atmosphere .mini-chart-card, .atmosphere .future-day, .atmosphere .future-hour,
.atmosphere .key-card, .atmosphere .hurricane-item, .atmosphere .hurricane-basin-card, .atmosphere .hurricane-source-card {
  background: #f6faffc9; border-color: #ffffffa6; box-shadow: inset 0 1px 0 #fff9;
}
.atmosphere .analysis-box.ai-card { background: linear-gradient(135deg, #f2efffe8, #e8f3ffd1); border-color: #efedffc9; }
.atmosphere .ai-mark { background: #d7def5; color: #525e9e; border-color: #c3cfeb; }
body.atmosphere .hero-forecast {
  grid-template-columns: minmax(0, 1fr) 270px;
  grid-template-rows: auto 1fr auto auto;
  column-gap: 28px; row-gap: 18px;
  min-height: 398px; padding: 30px 32px 25px;
  border: 1px solid #ffffff66;
  background: radial-gradient(ellipse at 86% 12%, #c6b7ff2e, transparent 50%),
    linear-gradient(115deg, #ffffff0c, #ffffff16),
    linear-gradient(115deg, var(--hero-a), var(--hero-b));
  box-shadow: inset 0 1px 0 #ffffff70, 0 18px 48px #051d4b40;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.atmosphere .hero-forecast::before {
  border: 0; background: linear-gradient(125deg, #ffffff12, transparent 42%, #ffffff08),
    radial-gradient(ellipse at 80% 100%, #bfcfff2e, transparent 65%);
}
.atmosphere .hero-forecast .sky-art {
  top: 7px; right: 16px; width: 306px; height: 190px; opacity: 1;
}
.atmosphere .hero-mainline { grid-column: 1; grid-row: 1; display: block; padding: 0; }
.atmosphere #mainTemp { margin-top: 16px; font-size: clamp(84px, 9vw, 112px); text-shadow: 0 4px 22px #b6e0ff26; }
.atmosphere #mainSummary { grid-column: 1; grid-row: 2; max-width: none; align-self: start; font-size: 16px; }
.atmosphere .forecast-details { grid-column: 1; grid-row: 3; max-width: none; }
.atmosphere .confidence { grid-column: 1; grid-row: 4; margin: 0; }
.atmosphere .prediction-card {
  grid-column: 2; grid-row: 2 / 5; align-self: end; position: relative;
  padding: 14px; margin-top: 28px; overflow: hidden; border: 1px solid #cec9ffcc; border-radius: 20px;
  background: radial-gradient(ellipse at 100% 0%, #bab8ff4d, transparent 65%), linear-gradient(135deg, #353b78c9, #3a639cce);
  color: #fff; box-shadow: inset 0 1px 0 #ffffff70, 0 10px 30px #15234f4d, 0 0 25px #b3a2ff26;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.atmosphere .prediction-card::before { content: ''; position: absolute; width: 170px; height: 1px; top: 0; left: 12px; background: linear-gradient(90deg, transparent, #fff, transparent); pointer-events: none; }
.atmosphere .prediction-heading { display: flex; align-items: center; gap: 7px; padding: 0 0 10px; border-bottom: 1px solid #ffffff24; color: #f4f2ff; font-size: 11px; font-weight: 600; }
.atmosphere .prediction-mark { color: #e8dfff; font-size: 17px; line-height: 1; }
.atmosphere .prediction-tag { margin-left: auto; padding: 2px 6px; color: #fff; background: #a5a4ed33; border: 1px solid #d2c9ff66; border-radius: 6px; font-size: 9px; letter-spacing: .07em; }
.atmosphere .prediction-card .weather-shift { grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr); min-height: 112px; gap: 6px; padding: 9px 0 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.atmosphere .prediction-card .weather-badge span { width: 48px; height: 48px; font-size: 34px; }
.atmosphere .prediction-card .weather-badge small { color: #fff; font-size: 11px; font-weight: 600; }
.atmosphere .prediction-card .weather-badge em { max-width: 105px; color: #dce7ff; font-size: 10px; }
.atmosphere .prediction-card .weather-arrow b { color: #e1d9ff; font-size: 25px; }
.atmosphere .prediction-card .weather-arrow small { color: #e0e8ff; font-size: 10px; }
@media (max-width: 1100px) and (min-width: 601px) {
  body.atmosphere .hero-forecast { grid-template-columns: minmax(0, 1fr) 232px; column-gap: 20px; padding: 26px; }
  .atmosphere .hero-forecast .sky-art { width: 266px; right: 8px; }
  .atmosphere .prediction-card { margin-top: 44px; }
  .atmosphere #mainSummary { font-size: 14px; }
}
@media (max-width: 820px) {
  .atmosphere .tabs { background: #173f6be8; border: 1px solid #ffffff4d; box-shadow: inset 0 1px 0 #ffffff40, 0 -8px 35px #00244c33; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
  .atmosphere .tab.active { background: #ffffff29; border-color: #ffffff38; }
}
@media (max-width: 600px) {
  body.atmosphere .hero-forecast {
    grid-template-columns: minmax(0, 1fr) 116px; grid-template-rows: auto auto auto auto auto;
    min-height: 0; padding: 24px 21px 23px; gap: 20px 8px;
  }
  .atmosphere .hero-mainline { grid-column: 1; grid-row: 1; min-height: 133px; }
  .atmosphere .hero-forecast .sky-art { top: 15px; right: 3px; width: 153px; height: 133px; }
  .atmosphere .hero-forecast .label { max-width: 155px; font-size: 11px; }
  .atmosphere #mainTemp { margin-top: 20px; font-size: 82px; }
  .atmosphere #mainSummary { grid-column: 1 / -1; grid-row: 2; font-size: 13px; line-height: 1.65; }
  .atmosphere .prediction-card { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 13px 16px; border-radius: 17px; }
  .atmosphere .prediction-card .weather-shift { min-height: 97px; }
  .atmosphere .forecast-details { grid-column: 1 / -1; grid-row: 4; }
  .atmosphere .confidence { grid-column: 1 / -1; grid-row: 5; }
}
@media (max-width: 360px) {
  body.atmosphere .hero-forecast { padding: 21px 17px; grid-template-columns: minmax(0, 1fr) 96px; }
  .atmosphere .hero-forecast .sky-art { width: 132px; height: 120px; right: 0; }
  .atmosphere .hero-forecast .label { max-width: 125px; }
  .atmosphere #mainTemp { font-size: 76px; }
}