/* ═══════════════════════════════════════
   AITHRIA — Weather Forecast Styles
   Dark glassmorphism, i18n ready
   ═══════════════════════════════════════ */

:root {
  --bg: #0a0a14;
  --card: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --accent: #00ffc8;
  --accent-dim: rgba(0,255,200,0.15);
  --text: #fff;
  --text-dim: rgba(255,255,255,0.6);
  --text-mid: rgba(255,255,255,0.85);
  --nvidia: #76b900;
  --red: #ff6b6b;
  --blue: #74b9ff;
  --purple: #a29bfe;
  --green: #55efc4;
  --cyan: #81ecec;
  --radius: 16px;
  --radius-sm: 10px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  background: linear-gradient(160deg, #0a0a14 0%, #0d1117 30%, #0a1628 60%, #0f0a20 100%);
  color: var(--text);
  font-family: 'Outfit', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background: rgba(0,255,200,0.2); border-radius:4px; }
* { scrollbar-width:thin; scrollbar-color: rgba(0,255,200,0.2) transparent; }

/* ── Ambient orbs ── */
.orb { position:fixed; border-radius:50%; pointer-events:none; z-index:0; }
.orb-1 {
  top:-10%; right:-5%; width:500px; height:500px;
  background: radial-gradient(circle, rgba(0,255,200,0.06) 0%, transparent 70%);
  animation: orbMove 20s ease-in-out infinite;
}
.orb-2 {
  bottom:-15%; left:-10%; width:600px; height:600px;
  background: radial-gradient(circle, rgba(100,100,255,0.05) 0%, transparent 70%);
  animation: orbMove 25s ease-in-out infinite reverse;
}
.orb-3 {
  top:40%; left:60%; width:300px; height:300px;
  background: radial-gradient(circle, rgba(255,100,100,0.03) 0%, transparent 70%);
  animation: orbMove 18s ease-in-out infinite 5s;
}

@keyframes orbMove {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(30px,-20px) scale(1.05); }
  66%  { transform: translate(-20px,15px) scale(0.95); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulse { 0%,100% { opacity:0.4; } 50% { opacity:1; } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Container ── */
.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 20px;
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:20px; animation:fadeUp 0.5s ease-out;
  flex-wrap:wrap; gap:12px; position:relative;
}
.header-left { display:flex; flex-direction:column; gap:4px; }
.header-right {
  /* 4 controls (models, 48h, lang, theme) on row 1, clock spans row 2 aligned right. */
  display:grid; grid-template-columns:repeat(4, auto); align-items:center; justify-items:end; gap:8px;
}
.live-badge {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:rgba(0,255,200,0.8);
  letter-spacing:2px; text-transform:uppercase; font-weight:700;
}
.live-dot {
  width:8px; height:8px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(0,255,200,0.6);
  animation: pulse 2s ease-in-out infinite;
}
.title { line-height:1; margin:0; position:relative; overflow:hidden; }
.logo {
  height: 44px; width:auto;
  transition: filter 0.3s;
}
body.light .logo {
  filter: contrast(1.6) saturate(1.2) brightness(0.85);
}
.subtitle {
  font-size:15px; color:rgba(255,255,255,0.85);
  font-style:italic; font-weight:400; margin-top:4px;
}

/* Desktop: clock sits in normal flow under the header controls, so it can never
   overlap the search box below (it used to be absolute at top:96px and got clipped). */
.header-clock {
  position:relative; grid-row:2; grid-column:1 / -1; justify-self:end; margin-top:4px;
  width:max-content; max-width:min(360px,46vw); min-width:0; padding:13px 16px;
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  background:linear-gradient(135deg, rgba(0,255,200,0.09), rgba(116,185,255,0.05));
  border:1px solid rgba(0,255,200,0.2); border-radius:18px;
  box-shadow:0 14px 40px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter:blur(16px); pointer-events:none;
}
.header-clock-copy { min-width:0; text-align:center; }
.header-clock-label {
  max-width:255px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--text-dim); font-size:10px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; margin-bottom:3px;
}
.header-clock-time {
  color:var(--accent); font-size:42px; font-weight:800; line-height:0.95;
  letter-spacing:2px; font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(0,255,200,0.18);
}

/* ── Engine selector ── */
.engine-control { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.engine-selector { display:flex; gap:6px; }
.engine-btn {
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:8px 14px;
  color: var(--text-dim); font-size:12px; cursor:pointer;
  font-family:'Outfit',sans-serif; font-weight:500;
  transition: all 0.3s; backdrop-filter:blur(10px);
}
.engine-btn.active { background:var(--accent-dim); border-color:rgba(0,255,200,0.3); color:var(--accent); }
.engine-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.engine-meta { font-size:10px; color:var(--text-dim); letter-spacing:0.2px; min-height:12px; }
.nowcast-launch {
  /* Inactive: identical look to the Classic / AI buttons. */
  align-self:flex-start; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 14px; color:var(--text-dim);
  font:500 12px 'Outfit',sans-serif; cursor:pointer; transition:all 0.3s;
  white-space:nowrap; backdrop-filter:blur(10px);
}
.nowcast-launch:hover { border-color:rgba(255,209,102,0.35); color:#ffd166; }
/* Active: keeps its own amber identity so the 48h source is clearly distinct. */
.nowcast-launch.active {
  background:linear-gradient(135deg, rgba(255,193,7,0.12), rgba(0,255,200,0.08));
  border-color:rgba(255,209,102,0.45); color:#ffd166; font-weight:600;
}
.nowcast-launch:focus-visible { outline:2px solid #ffd166; outline-offset:2px; }

/* ── Language / Theme buttons ── */
.lang-btn, .theme-btn {
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:8px 12px;
  color: var(--text-mid); font-size:12px; cursor:pointer;
  font-family:'Outfit',sans-serif; font-weight:600;
  transition: all 0.3s; backdrop-filter:blur(10px);
}
.lang-btn:hover, .theme-btn:hover { border-color:rgba(255,255,255,0.15); }
.theme-btn { font-size:16px; padding:6px 10px; }

/* ═══ LIGHT THEME ═══ */
body.light {
  background: linear-gradient(160deg, #f0f4f8 0%, #e8edf2 30%, #dde5ee 60%, #f5f0fa 100%);
  color: #1a1a2e;
}
body.light .orb-1 { background: radial-gradient(circle, rgba(0,200,150,0.08) 0%, transparent 70%); }
body.light .orb-2 { background: radial-gradient(circle, rgba(100,100,255,0.06) 0%, transparent 70%); }
body.light .orb-3 { background: radial-gradient(circle, rgba(255,100,100,0.05) 0%, transparent 70%); }

body.light .subtitle { color:rgba(0,0,0,0.55); }
body.light .live-badge { color:rgba(0,150,100,0.7); }
body.light .live-dot { background:#00b894; box-shadow:0 0 12px rgba(0,184,148,0.6); }

body.light .engine-btn,
body.light .mode-btn,
body.light .lang-btn,
body.light .theme-btn,
body.light .nowcast-launch {
  background:rgba(255,255,255,0.6); border-color:rgba(0,0,0,0.08);
  color:rgba(0,0,0,0.4);
}
body.light .nowcast-launch.active {
  background:rgba(255,193,7,0.16); border-color:rgba(214,158,0,0.45); color:#a77700;
}
body.light .engine-btn.active,
body.light .mode-btn.active {
  background:rgba(0,184,148,0.15); border-color:rgba(0,184,148,0.3); color:#00b894;
}
body.light .engine-meta { color:rgba(0,0,0,0.42); }
body.light .lang-btn:hover,
body.light .theme-btn:hover { border-color:rgba(0,0,0,0.15); }

body.light .search-box {
  background:rgba(255,255,255,0.7); border-color:rgba(0,0,0,0.08);
}
body.light .search-box:focus-within { border-color:rgba(0,184,148,0.4); }
body.light .search-input { color:#1a1a2e; }
body.light .search-input::placeholder { color:rgba(0,0,0,0.3); }
body.light .locate-btn { background:rgba(0,184,148,0.12); border-color:rgba(0,184,148,0.2); }
body.light .search-results {
  background:#fff; border-color:rgba(0,0,0,0.08);
  box-shadow:0 20px 60px rgba(0,0,0,0.1);
}
body.light .sr-region { color:rgba(0,150,100,0.6); }
body.light .sr-item { color:rgba(0,0,0,0.5); }
body.light .sr-item:hover { background:rgba(0,0,0,0.03); color:#1a1a2e; }

body.light .hero,
body.light .stat-card,
body.light .day-card,
body.light .hourly-scroll,
body.light .chart-wrap {
  background:rgba(255,255,255,0.5); border-color:rgba(0,0,0,0.06);
}
body.light .hero-bg { opacity:0.05; }
body.light .hero-label { color:rgba(0,0,0,0.5); }
body.light .hero-temp .big { color:#1a1a2e; }
body.light .hero-temp .low { color:rgba(0,0,0,0.45); }
body.light .hero-cond { color:rgba(0,0,0,0.65); }
body.light .hero-advice { color:#007d64; background:rgba(0,184,148,0.1); border-color:rgba(0,184,148,0.2); }
body.light .hero-stats span { color:rgba(0,0,0,0.45); }
body.light .hero-stats b { color:rgba(0,0,0,0.7); }
body.light .hero-coords { color:rgba(0,0,0,0.3); }
body.light .nowcast-section,
body.light .nowcast-point,
body.light .nowcast-stat { background:rgba(255,255,255,0.7); border-color:rgba(0,0,0,0.08); }
body.light .nowcast-title,
body.light .nowcast-point strong { color:#1a1a2e; }
body.light .nowcast-meta,
body.light .nowcast-status,
body.light .nowcast-point span,
body.light .nowcast-point time { color:rgba(0,0,0,0.52); }
body.light .nowcast-day-label { color:#008f70; }
body.light .nowcast-close { color:rgba(0,0,0,0.5); }
body.light .header-clock {
  background:linear-gradient(135deg, rgba(255,255,255,0.78), rgba(0,184,148,0.06));
  border-color:rgba(0,184,148,0.18); box-shadow:0 12px 34px rgba(30,60,80,0.1);
}
body.light .header-clock-time { color:#00a982; }
body.light .header-clock-label { color:rgba(0,0,0,0.45); }

body.light .day-card .d-label { color:rgba(0,0,0,0.5); }
body.light .day-card .d-date { color:rgba(0,0,0,0.3); }
body.light .day-card .d-high { color:#1a1a2e; }
body.light .day-card .d-low { color:rgba(0,0,0,0.45); }
body.light .day-card:hover { border-color:rgba(0,0,0,0.12); }
body.light .day-card.sel { background:rgba(0,184,148,0.12); border-color:rgba(0,184,148,0.3); }
body.light .day-card.today .d-label { color:#00b894; }

body.light .label { color:rgba(0,0,0,0.5); }
body.light .stat-card .s-label { color:rgba(0,0,0,0.45); }

body.light .h-time { color:rgba(0,0,0,0.45); }
body.light .h-item.now { background:rgba(0,184,148,0.1); border-color:rgba(0,184,148,0.3); }
body.light .h-item.now .h-time { color:#00b894; }
body.light .h-temp { color:#1a1a2e; }
body.light .h-wind { color:rgba(0,0,0,0.35); }
body.light .h-prec { color:rgba(0,0,0,0.3); }
body.light .h-prec.rain { color:rgba(52,120,200,0.7); }

body.light .map-info { color:rgba(0,0,0,0.35); }
body.light #map { border-color:rgba(0,0,0,0.08); }
body.light .map-coords { color:rgba(0,150,100,0.6); }
body.light .leaflet-tile-pane { filter:none; }
body.light .leaflet-control-zoom a { background:rgba(255,255,255,0.9)!important; color:#333!important; border-color:rgba(0,0,0,0.1)!important; }
body.light .leaflet-popup-content-wrapper { background:#fff!important; color:#333!important; border-color:rgba(0,0,0,0.08)!important; box-shadow:0 8px 30px rgba(0,0,0,0.1)!important; }
body.light .leaflet-popup-tip { background:#fff!important; }

body.light .footer { border-top-color:rgba(0,0,0,0.06); }
body.light #footerEngine { color:rgba(0,0,0,0.2); }
body.light .footer .brand { color:#00b894; }
body.light .footer-sub { color:rgba(0,0,0,0.15); }

body.light .loading { color:rgba(0,0,0,0.35); }
body.light .spinner { border-color:rgba(0,0,0,0.08); border-top-color:#00b894; }

/* ── Search ── */
.search-wrap {
  position:relative; margin-bottom:24px;
  animation:fadeUp 0.5s ease-out 0.05s both;
  z-index:50;
}
.mode-toggle { display:flex; gap:4px; margin-bottom:10px; }
.mode-btn {
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:7px 14px;
  color: var(--text-dim); font-size:12px; cursor:pointer;
  font-family:'Outfit',sans-serif; font-weight:500;
  transition: all 0.3s; backdrop-filter:blur(10px);
}
.mode-btn.active { background:var(--accent-dim); border-color:rgba(0,255,200,0.3); color:var(--accent); }

.search-box {
  display:flex; align-items:center; gap:10px;
  background: rgba(15,15,25,0.8); border:1px solid var(--border);
  border-radius: 14px; padding:4px 6px 4px 16px;
  backdrop-filter:blur(20px); transition:all 0.3s;
}
.search-box:focus-within { border-color:rgba(0,255,200,0.3); }
.search-icon { font-size:16px; opacity:0.4; }
.search-input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-size:16px; font-family:'Outfit',sans-serif;
  padding:10px 0; font-weight:500;
}
.search-input::placeholder { color:rgba(255,255,255,0.4); }
.locate-btn {
  background:var(--accent-dim); border:1px solid rgba(0,255,200,0.2);
  border-radius:10px; padding:8px 12px; cursor:pointer;
  font-size:16px; transition:all 0.3s;
}
.locate-btn:hover { background:rgba(0,255,200,0.25); }

.search-results {
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0;
  background: #0d0d1a; border:1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding:6px; z-index:100;
  max-height:350px; overflow-y:auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.search-results.show { display:block; }
.sr-region {
  font-size:10px; color:rgba(0,255,200,0.5);
  letter-spacing:1.5px; text-transform:uppercase;
  padding:10px 12px 4px; font-weight:700;
}
.sr-item {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; background:transparent; border:none;
  border-radius: var(--radius-sm); padding:10px 12px;
  color: var(--text-mid); font-size:14px; cursor:pointer;
  font-family:'Outfit',sans-serif; text-align:left;
  transition: all 0.2s;
}
.sr-item:hover { background:rgba(255,255,255,0.05); color:#fff; }
.sr-item .sr-coords { font-size:11px; color:rgba(255,255,255,0.4); }
.sr-item .sr-country { font-size:11px; color:rgba(255,255,255,0.35); margin-left:8px; }
.sr-item .sr-admin { font-size:12px; color:rgba(255,255,255,0.5); margin-left:4px; }
.sr-item .sr-pop { font-size:10px; color:rgba(255,255,255,0.35); margin-right:8px; }
.sr-empty { padding:16px; text-align:center; color:var(--text-dim); font-size:13px; }

/* ── Map ── */
.map-info { font-size:13px; color:rgba(255,255,255,0.6); margin-bottom:8px; }
#map {
  width:100%; height:360px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  overflow:hidden;
}
.map-coords { font-size:11px; color:rgba(0,255,200,0.5); margin-top:8px; font-weight:500; min-height:16px; }
.leaflet-tile-pane { filter: brightness(0.7) contrast(1.1) saturate(0.3) hue-rotate(180deg) invert(1); }
.leaflet-control-zoom a { background:rgba(15,15,25,0.9)!important; color:#fff!important; border-color:rgba(255,255,255,0.1)!important; }
.leaflet-popup-content-wrapper {
  background:rgba(15,15,25,0.95)!important; color:#fff!important;
  border-radius:12px!important; border:1px solid rgba(0,255,200,0.2)!important;
  box-shadow:0 8px 30px rgba(0,0,0,0.5)!important;
}
.leaflet-popup-tip { background:rgba(15,15,25,0.95)!important; }
.leaflet-popup-content { font-family:'Outfit',sans-serif!important; font-size:13px!important; }

/* ── Loading & Error ── */
.loading {
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding:60px 0; color:var(--text-dim); font-size:14px;
}
.spinner {
  width:20px; height:20px; border:2px solid var(--border);
  border-top-color: var(--accent); border-radius:50%;
  animation: spin 0.8s linear infinite;
}
.error { text-align:center; padding:40px; color:var(--red); font-size:14px; }
.error button {
  background:var(--card); border:1px solid var(--border);
  color:var(--text); padding:8px 16px; border-radius:8px;
  cursor:pointer; margin-left:10px; font-family:'Outfit',sans-serif;
}

/* ── OpenWeather 48-hour forecast ── */
.nowcast-section {
  scroll-margin-top:16px; margin-bottom:24px; padding:20px;
  background:linear-gradient(145deg, rgba(255,193,7,0.06), rgba(0,255,200,0.04)), var(--card);
  border:1px solid rgba(255,209,102,0.2); border-radius:22px;
  box-shadow:0 18px 60px rgba(0,0,0,0.18); animation:fadeUp 0.35s ease-out both;
}
.nowcast-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:10px; }
.nowcast-title { color:var(--text); font-size:18px; font-weight:750; }
.nowcast-meta { color:var(--text-dim); font-size:11px; margin-top:3px; }
.nowcast-close {
  width:32px; height:32px; border:1px solid var(--border); border-radius:10px;
  background:rgba(255,255,255,0.03); color:var(--text-mid); font-size:22px;
  line-height:1; cursor:pointer;
}
.nowcast-status { min-height:20px; color:var(--text-dim); font-size:11px; margin-bottom:12px; }
.loading-inline { display:flex; align-items:center; gap:8px; padding:12px 0; }
.mini-spinner {
  width:14px; height:14px; border:2px solid var(--border); border-top-color:#ffd166;
  border-radius:50%; animation:spin 0.8s linear infinite;
}
.error-inline { color:var(--red); }
.error-inline button {
  margin-left:8px; padding:5px 9px; border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font:600 11px 'Outfit',sans-serif; cursor:pointer;
}
.nowcast-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }
.nowcast-stat {
  display:flex; flex-direction:column; gap:5px; min-width:0; padding:11px 12px;
  background:rgba(255,255,255,0.025); border:1px solid var(--border); border-radius:12px;
}
.nowcast-stat span { color:var(--text-dim); font-size:10px; line-height:1.2; }
.nowcast-stat b { color:var(--text); font-size:15px; font-variant-numeric:tabular-nums; }
.nowcast-days { display:flex; flex-direction:column; gap:16px; }
.nowcast-day-label {
  margin:0 0 7px 3px; color:var(--accent); font-size:12px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
}
.nowcast-timeline {
  display:flex; gap:5px; overflow-x:auto; padding:2px 2px 10px;
  scrollbar-color:rgba(255,255,255,0.16) transparent;
}
.nowcast-point {
  flex:0 0 68px; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 5px; background:rgba(255,255,255,0.025); border:1px solid var(--border);
  border-radius:12px; font-variant-numeric:tabular-nums;
}
.nowcast-point.soon { border-color:rgba(0,255,200,0.32); background:rgba(0,255,200,0.06); }
.nowcast-point time { color:var(--text-dim); font-size:10px; }
.nowcast-point strong { color:var(--text); font-size:17px; }
.nowcast-point span { color:var(--text-dim); font-size:9px; }
.nowcast-point .nowcast-icon { font-size:21px; line-height:1.3; }
.nowcast-point .nowcast-pop.rain { color:#74b9ff; }

/* ── Hero card ── */
.hero {
  background: var(--card); border:1px solid var(--border);
  border-radius:24px; padding:32px;
  margin-bottom:24px; position:relative; overflow:hidden;
  animation:fadeUp 0.5s ease-out 0.1s both;
}
.hero-bg {
  position:absolute; top:-40px; right:-20px;
  font-size:140px; opacity:0.07;
  animation:float 6s ease-in-out infinite; pointer-events:none;
}
.hero-body {
  display:flex; align-items:flex-start;
  justify-content:space-between; position:relative; z-index:1;
}
.hero-label { font-size:13px; color:rgba(255,255,255,0.7); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; font-weight:600; }
.hero-time-line { display:block; margin-top:4px; }
.hero-temp { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.hero-temp .big { font-size:72px; font-weight:900; line-height:1; letter-spacing:-3px; }
.hero-temp .low { font-size:26px; color:rgba(255,255,255,0.5); font-weight:500; }
.hero-cond { font-size:18px; color:rgba(255,255,255,0.9); font-weight:500; margin-bottom:16px; }
.hero-advice {
  display:table; max-width:100%; margin:-6px 0 16px; padding:8px 12px;
  color:var(--accent); background:rgba(0,255,200,0.08);
  border:1px solid rgba(0,255,200,0.16); border-radius:10px;
  font-size:13px; font-weight:600; line-height:1.35;
}
.hero-stats { display:flex; gap:24px; }
.hero-stats span { font-size:15px; color:rgba(255,255,255,0.7); }
.hero-stats b { color:rgba(255,255,255,0.95); }
.hero-side { text-align:right; }
.hero-icon { font-size:60px; animation:float 4s ease-in-out infinite; filter:drop-shadow(0 4px 20px rgba(0,0,0,0.3)); }
.hero-coords { font-size:12px; color:rgba(255,255,255,0.4); margin-top:8px; }

/* ── 15 day cards ── */
.cards-wrap { margin-bottom:20px; animation:fadeUp 0.5s ease-out 0.2s both; }
.cards { display:flex; gap:8px; overflow-x:auto; padding:4px 0 12px; }
.day-card {
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); padding:14px 10px;
  cursor:pointer; min-width:80px; text-align:center;
  backdrop-filter:blur(20px); transition:all 0.3s; flex:0 0 auto;
}
.day-card:hover { border-color:rgba(255,255,255,0.12); }
.day-card.sel { background:rgba(0,255,200,0.12); border-color:rgba(0,255,200,0.4); }
.day-card .d-label { font-size:12px; color:rgba(255,255,255,0.7); font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.day-card .d-date { font-size:11px; color:rgba(255,255,255,0.4); margin-bottom:10px; }
.day-card .d-icon { font-size:32px; margin-bottom:8px; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.day-card .d-high { font-size:22px; font-weight:700; margin-bottom:2px; }
.day-card .d-low { font-size:14px; color:rgba(255,255,255,0.55); font-weight:500; }
.day-card.today .d-label { color:var(--accent); }

/* ── Detail grid ── */
.detail { margin-bottom:20px; animation:fadeUp 0.5s ease-out 0.3s both; }
.label { font-size:13px; color:rgba(255,255,255,0.7); letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; font-weight:600; padding-left:4px; }
.detail-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.stat-card {
  background: var(--card); border:1px solid var(--border);
  border-radius:14px; padding:16px 10px; text-align:center;
  backdrop-filter:blur(10px);
}
.stat-card .s-icon { font-size:24px; margin-bottom:8px; }
.stat-card .s-val { font-size:20px; font-weight:700; }
.stat-card .s-label { font-size:12px; color:rgba(255,255,255,0.6); margin-top:4px; }

/* ── Hourly ── */
.hourly { margin-bottom:20px; animation:fadeUp 0.5s ease-out 0.35s both; }
.hourly-scroll {
  display:flex; gap:2px; overflow-x:auto;
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); padding:16px 8px 8px;
}
.h-item {
  display:flex; flex-direction:column; align-items:center;
  min-width:46px; flex:0 0 auto; padding:4px 2px 8px;
  border-radius: var(--radius-sm); border:1px solid transparent;
  transition:all 0.2s;
}
.h-item.now { background:rgba(0,255,200,0.1); border-color:rgba(0,255,200,0.3); }
.h-time { font-size:11px; color:rgba(255,255,255,0.6); margin-bottom:6px; font-weight:500; letter-spacing:0.5px; }
.h-item.now .h-time { color:var(--accent); font-weight:700; }
.h-icon { font-size:20px; margin-bottom:6px; }
.h-temp { font-size:15px; font-weight:700; margin-bottom:6px; }
.h-wind { font-size:10px; color:rgba(255,255,255,0.45); }
.h-prec { font-size:10px; color:rgba(255,255,255,0.35); margin-top:2px; }
.h-prec.rain { color:rgba(116,185,255,0.8); }

/* ── Chart ── */
.chart-wrap {
  animation:fadeUp 0.5s ease-out 0.4s both; margin-bottom:32px;
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); padding:16px 8px 8px;
}
.chart-wrap svg { width:100%; height:150px; }

/* ── Footer ── */
.footer {
  text-align:center; padding:20px 0;
  border-top:1px solid rgba(255,255,255,0.04);
  animation:fadeUp 0.5s ease-out 0.5s both;
}
.footer .brand { color:var(--accent); font-weight:700; text-decoration:none; }
.footer .brand:hover { text-decoration:underline; }
#footerEngine { font-size:12px; color:rgba(255,255,255,0.35); margin-bottom:6px; }
.footer-sub { font-size:11px; color:rgba(255,255,255,0.25); }
.footer-geo { font-size:10px; color:rgba(255,255,255,0.25); margin-bottom:5px; }
.footer-geo a { color:inherit; }
.footer-links {
  display:flex; justify-content:center; gap:20px;
  margin-top:10px; font-size:11px;
}
.footer-links a {
  color:rgba(255,255,255,0.4); text-decoration:none;
  transition: color 0.2s;
}
.footer-links a:hover { color:rgba(255,255,255,0.7); }
.footer-copy {
  font-size:11px; color:rgba(255,255,255,0.2); margin-top:8px;
}
body.light .footer-links a { color:rgba(0,0,0,0.2); }
body.light .footer-links a:hover { color:rgba(0,0,0,0.5); }
body.light .footer-copy { color:rgba(0,0,0,0.1); }
body.light .footer-geo { color:rgba(0,0,0,0.2); }

/* ── Ad Slots ── */
.ad-slot {
  min-height:10px; margin:16px 0;
  border-radius: var(--radius);
  overflow:hidden;
  text-align:center;
}
.ad-slot:empty { margin:0; min-height:0; }
.ad-top { margin-bottom:16px; }
.ad-mid { margin:16px 0; }
.ad-bottom { margin-top:16px; }

/* ── Screen reader only (SEO) ── */
.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;
}

/* ── Responsive ── */
@media (max-width:640px) {
  .container { padding:16px 12px; }
  .header { flex-direction:column; align-items:flex-start; gap:10px; }
  .header-right { display:flex; flex-wrap:wrap; width:100%; justify-content:flex-start; }
  .header-clock { position:absolute; margin:0; top:18px; right:0; max-width:145px; min-width:0; padding:8px 10px; border-radius:13px; gap:7px; }
  .header-clock-label { max-width:118px; font-size:7px; letter-spacing:0.8px; }
  .header-clock-time { font-size:25px; letter-spacing:1px; }
  .logo { height:36px; }
  .subtitle { font-size:12px; }
  .hero-temp .big { font-size:48px; }
  .hero-temp .low { font-size:18px; }
  .hero-body { flex-direction:column; gap:12px; }
  .hero-side { text-align:left; display:flex; align-items:center; gap:12px; }
  .hero-icon { font-size:44px; }
  .hero { padding:18px; border-radius:18px; }
  .hero-label { font-size:11px; }
  .hero-cond { font-size:15px; }
  .hero-advice { font-size:12px; margin-top:-4px; }
  .hero-stats { flex-wrap:wrap; gap:12px; }
  .hero-stats span { font-size:13px; }
  .detail-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
  .stat-card { padding:12px 8px; }
  .stat-card .s-val { font-size:16px; }
  .stat-card .s-icon { font-size:20px; }
  .day-card { min-width:70px; padding:12px 8px; }
  .day-card .d-icon { font-size:28px; }
  .day-card .d-high { font-size:18px; }
  #map { height:260px; }
  .search-results { left:-8px; right:-8px; }
  .engine-btn { padding:6px 10px; font-size:11px; }
  .engine-control { align-items:flex-start; }
  .engine-meta { font-size:9px; }
  .nowcast-launch { padding:6px 9px; font-size:11px; }
  .nowcast-section { padding:15px 12px; border-radius:18px; }
  .nowcast-summary { grid-template-columns:repeat(2,1fr); }
  .nowcast-title { font-size:16px; }
  .nowcast-point { flex-basis:62px; }
  .footer-links { gap:14px; font-size:10px; }
  .ad-slot { margin:10px 0; }
}
@media (max-width:400px) {
  .container { padding:12px 8px; }
  .detail-grid { grid-template-columns:repeat(2,1fr); }
  .hero-temp .big { font-size:42px; }
  .hero-stats { gap:10px; }
  .hero-stats span { font-size:12px; }
  .logo { height:30px; }
  .header-clock { top:12px; max-width:95px; min-width:0; padding:7px 8px; }
  .header-clock-label { display:none; }
  .header-clock-time { font-size:22px; }
  .engine-selector { flex-wrap:wrap; }
  .day-card { min-width:62px; }
}