/* ══════════════════════════════════════════════════════
   WEATHER DETECTED  ·  style.css
   All existing styles preserved + map section upgraded
   to Leaflet real-world map
   ══════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-display: "Syne", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --radius-card: 26px;
  --radius-tile: 18px;
  --radius-btn: 14px;
  --radius-pill: 999px;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.42s;
  --weather-gradient: linear-gradient(140deg, #08101f 0%, #173258 52%, #29153c 100%);
  --weather-photo: none;
  --photo-opacity: 0.14;
  --photo-filter: saturate(1) contrast(1.02) blur(0px);
  --weather-overlay: linear-gradient(180deg, rgba(6, 12, 26, 0.24), rgba(6, 12, 26, 0.74));
}

/* ── Dark Theme ─────────────────────────────────────── */
[data-theme="dark"] {
  --glass-bg: rgba(15, 22, 40, 0.46);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: rgba(0, 0, 0, 0.5);
  --glass-inset: rgba(255, 255, 255, 0.08);
  --text-1: #eef4ff;
  --text-2: rgba(205, 218, 255, 0.78);
  --text-3: rgba(171, 188, 228, 0.6);
  --accent: #7dc2ff;
  --accent-2: #ffad66;
  --accent-glow: rgba(125, 194, 255, 0.34);
  --search-bg: rgba(255, 255, 255, 0.08);
  --search-focus: rgba(125, 194, 255, 0.16);
  --btn-bg: rgba(125, 194, 255, 0.14);
  --btn-hover: rgba(125, 194, 255, 0.24);
  --tile-bg: rgba(255, 255, 255, 0.06);
  --prog-bg: rgba(255, 255, 255, 0.08);
  --shimmer-a: rgba(255, 255, 255, 0.03);
  --shimmer-b: rgba(255, 255, 255, 0.1);
  --orb-a: rgba(92, 150, 255, 0.18);
  --orb-b: rgba(244, 158, 108, 0.12);
  --orb-c: rgba(74, 219, 255, 0.12);
  --rain-color: rgba(125, 194, 255, 0.72);
  --snow-color: rgba(233, 243, 255, 0.84);
  --error-bg: rgba(255, 84, 84, 0.12);
  --error-border: rgba(255, 84, 84, 0.3);
  --error-text: #ff9090;
  --map-tile-filter: brightness(0.72) saturate(0.8) hue-rotate(200deg);
  --map-overlay: rgba(8, 16, 32, 0.28);
  color-scheme: dark;
}

/* ── Light Theme ─────────────────────────────────────── */
[data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.78);
  --glass-shadow: rgba(90, 116, 170, 0.18);
  --glass-inset: rgba(255, 255, 255, 0.76);
  --text-1: #0f244f;
  --text-2: rgba(20, 52, 122, 0.82);
  --text-3: rgba(53, 84, 145, 0.6);
  --accent: #1f66dc;
  --accent-2: #ff8f5b;
  --accent-glow: rgba(31, 102, 220, 0.22);
  --search-bg: rgba(255, 255, 255, 0.68);
  --search-focus: rgba(31, 102, 220, 0.12);
  --btn-bg: rgba(31, 102, 220, 0.1);
  --btn-hover: rgba(31, 102, 220, 0.18);
  --tile-bg: rgba(255, 255, 255, 0.52);
  --prog-bg: rgba(31, 102, 220, 0.1);
  --shimmer-a: rgba(255, 255, 255, 0.32);
  --shimmer-b: rgba(255, 255, 255, 0.8);
  --orb-a: rgba(75, 140, 255, 0.14);
  --orb-b: rgba(255, 170, 125, 0.12);
  --orb-c: rgba(82, 201, 255, 0.12);
  --rain-color: rgba(31, 102, 220, 0.78);
  --snow-color: rgba(255, 255, 255, 0.98);
  --error-bg: rgba(200, 30, 30, 0.08);
  --error-border: rgba(200, 30, 30, 0.22);
  --error-text: #b91c1c;
  --map-tile-filter: brightness(1) saturate(1.05);
  --map-overlay: rgba(255, 255, 255, 0.06);
  color-scheme: light;
}

/* ── Weather gradients (same as original) ────────────── */
html { scroll-behavior: smooth; }

body {
  position: relative;
  font-family: var(--font-display);
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--weather-gradient);
  color: var(--text-1);
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease-out), filter var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
}
body::before {
  z-index: -3;
  background-image: var(--weather-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--photo-opacity);
  filter: var(--photo-filter);
  transform: scale(1.04);
}
body::after {
  z-index: -2;
  background: var(--weather-overlay);
}

html[data-theme="dark"] body  { --photo-opacity: 0.13; --weather-overlay: linear-gradient(180deg, rgba(4,10,24,0.28), rgba(4,10,24,0.78)); }
html[data-theme="light"] body { --photo-opacity: 0.2; --photo-filter: saturate(1.06) brightness(1.04); --weather-overlay: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.42)); }

html[data-theme="dark"]  body[data-weather-theme="default"]            { --weather-gradient: linear-gradient(140deg,#08101f 0%,#173258 52%,#29153c 100%); }
html[data-theme="light"] body[data-weather-theme="default"]            { --weather-gradient: linear-gradient(140deg,#dceaf9 0%,#c4d9f3 52%,#f1e0d9 100%); }

html[data-theme="dark"]  body[data-weather-theme="clear-day"]          { --weather-gradient: linear-gradient(140deg,#10264c 0%,#2f74c0 48%,#f4a261 100%); --weather-photo: url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.18; --orb-a: rgba(112, 177, 255, 0.26); --orb-b: rgba(255, 187, 110, 0.18); --orb-c: rgba(104, 222, 255, 0.14); }
html[data-theme="light"] body[data-weather-theme="clear-day"]          { --weather-gradient: linear-gradient(140deg,#d1efff 0%,#8ad0ff 46%,#ffe0a8 100%); --weather-photo: url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.26; --orb-a: rgba(77, 166, 255, 0.16); --orb-b: rgba(255, 184, 109, 0.16); --orb-c: rgba(120, 222, 255, 0.14); }

html[data-theme="dark"]  body[data-weather-theme="clear-night"]        { --weather-gradient: linear-gradient(140deg,#050b20 0%,#102c63 44%,#53357f 100%); --weather-photo: url("https://images.unsplash.com/photo-1534088568595-a066f410bcda?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.16; --orb-a: rgba(98, 136, 255, 0.22); --orb-b: rgba(153, 116, 255, 0.14); --orb-c: rgba(82, 201, 255, 0.12); }
html[data-theme="light"] body[data-weather-theme="clear-night"]        { --weather-gradient: linear-gradient(140deg,#dbe6fb 0%,#b5c9f3 48%,#e4dbff 100%); --weather-photo: url("https://images.unsplash.com/photo-1534088568595-a066f410bcda?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.2; --orb-a: rgba(101, 134, 230, 0.14); --orb-b: rgba(161, 134, 242, 0.12); --orb-c: rgba(111, 208, 255, 0.1); }

html[data-theme="dark"]  body[data-weather-theme="partly-cloudy-day"]  { --weather-gradient: linear-gradient(140deg,#0f1c37 0%,#5379a7 48%,#95a7bc 100%); --weather-photo: url("https://images.unsplash.com/photo-1499346030926-9a72daac6c63?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.15; --orb-a: rgba(104, 170, 255, 0.2); --orb-b: rgba(238, 180, 121, 0.1); --orb-c: rgba(222, 236, 255, 0.1); }
html[data-theme="light"] body[data-weather-theme="partly-cloudy-day"]  { --weather-gradient: linear-gradient(140deg,#edf5ff 0%,#ccddf1 48%,#f8ead7 100%); --weather-photo: url("https://images.unsplash.com/photo-1499346030926-9a72daac6c63?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.2; --orb-a: rgba(104, 169, 240, 0.14); --orb-b: rgba(246, 183, 126, 0.12); --orb-c: rgba(190, 219, 255, 0.12); }

html[data-theme="dark"]  body[data-weather-theme="partly-cloudy-night"]{ --weather-gradient: linear-gradient(140deg,#0a1327 0%,#30486d 50%,#6b748e 100%); --weather-photo: url("https://images.unsplash.com/photo-1504386106331-3e4e71712b38?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.14; --orb-a: rgba(94, 126, 198, 0.18); --orb-b: rgba(141, 157, 198, 0.12); --orb-c: rgba(86, 169, 216, 0.12); }
html[data-theme="light"] body[data-weather-theme="partly-cloudy-night"]{ --weather-gradient: linear-gradient(140deg,#e8eefb 0%,#cfd8ec 50%,#e8e2f7 100%); --weather-photo: url("https://images.unsplash.com/photo-1504386106331-3e4e71712b38?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.18; --orb-a: rgba(94, 126, 198, 0.14); --orb-b: rgba(143, 159, 204, 0.1); --orb-c: rgba(86, 169, 216, 0.1); }

html[data-theme="dark"]  body[data-weather-theme="cloudy-day"]         { --weather-gradient: linear-gradient(140deg,#111c2c 0%,#51657d 48%,#7d8ea0 100%); --weather-photo: url("https://images.unsplash.com/photo-1499346030926-9a72daac6c63?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.14; --orb-a: rgba(143, 166, 198, 0.14); --orb-b: rgba(196, 212, 233, 0.1); --orb-c: rgba(121, 158, 189, 0.1); }
html[data-theme="light"] body[data-weather-theme="cloudy-day"]         { --weather-gradient: linear-gradient(140deg,#edf1f5 0%,#d1dae4 50%,#f8fbff 100%); --weather-photo: url("https://images.unsplash.com/photo-1499346030926-9a72daac6c63?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.18; --orb-a: rgba(142, 168, 203, 0.12); --orb-b: rgba(220, 227, 240, 0.14); --orb-c: rgba(150, 181, 205, 0.12); }

html[data-theme="dark"]  body[data-weather-theme="cloudy-night"]       { --weather-gradient: linear-gradient(140deg,#0c1522 0%,#36475e 48%,#5f677d 100%); --weather-photo: url("https://images.unsplash.com/photo-1504386106331-3e4e71712b38?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.13; --orb-a: rgba(98, 119, 149, 0.16); --orb-b: rgba(133, 145, 177, 0.1); --orb-c: rgba(104, 136, 175, 0.1); }
html[data-theme="light"] body[data-weather-theme="cloudy-night"]       { --weather-gradient: linear-gradient(140deg,#e8edf5 0%,#d4dbe7 52%,#edf0f6 100%); --weather-photo: url("https://images.unsplash.com/photo-1504386106331-3e4e71712b38?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.17; --orb-a: rgba(106, 126, 160, 0.12); --orb-b: rgba(153, 165, 192, 0.1); --orb-c: rgba(119, 151, 184, 0.1); }

html[data-theme="dark"]  body[data-weather-theme="overcast-day"]       { --weather-gradient: linear-gradient(140deg,#161d27 0%,#576675 48%,#8f99a3 100%); --weather-photo: url("https://images.unsplash.com/photo-1499346030926-9a72daac6c63?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.12; --orb-a: rgba(124, 142, 164, 0.12); --orb-b: rgba(165, 177, 187, 0.08); --orb-c: rgba(136, 149, 165, 0.08); }
html[data-theme="light"] body[data-weather-theme="overcast-day"]       { --weather-gradient: linear-gradient(140deg,#eef1f3 0%,#d8dee5 52%,#f4f5f7 100%); --weather-photo: url("https://images.unsplash.com/photo-1499346030926-9a72daac6c63?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.16; --orb-a: rgba(147, 160, 177, 0.1); --orb-b: rgba(188, 195, 205, 0.12); --orb-c: rgba(160, 175, 190, 0.1); }

html[data-theme="dark"]  body[data-weather-theme="overcast-night"]     { --weather-gradient: linear-gradient(140deg,#11151b 0%,#394450 46%,#5a616b 100%); --weather-photo: url("https://images.unsplash.com/photo-1504386106331-3e4e71712b38?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.11; --orb-a: rgba(105, 116, 131, 0.12); --orb-b: rgba(137, 149, 165, 0.08); --orb-c: rgba(116, 126, 143, 0.08); }
html[data-theme="light"] body[data-weather-theme="overcast-night"]     { --weather-gradient: linear-gradient(140deg,#e9ecf0 0%,#d9dee4 52%,#e9ecf0 100%); --weather-photo: url("https://images.unsplash.com/photo-1504386106331-3e4e71712b38?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.15; --orb-a: rgba(126, 138, 157, 0.1); --orb-b: rgba(159, 171, 185, 0.08); --orb-c: rgba(132, 144, 164, 0.08); }

html[data-theme="dark"]  body[data-weather-theme="drizzle-day"]        { --weather-gradient: linear-gradient(140deg,#0d1726 0%,#315578 48%,#6f8da8 100%); --weather-photo: url("https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.14; --orb-a: rgba(86, 154, 220, 0.18); --orb-b: rgba(151, 183, 214, 0.1); --orb-c: rgba(102, 192, 222, 0.12); }
html[data-theme="light"] body[data-weather-theme="drizzle-day"]        { --weather-gradient: linear-gradient(140deg,#dce7ef 0%,#b8cada 48%,#ecf3f8 100%); --weather-photo: url("https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.18; --orb-a: rgba(91, 152, 214, 0.12); --orb-b: rgba(161, 187, 214, 0.12); --orb-c: rgba(113, 194, 220, 0.12); }

html[data-theme="dark"]  body[data-weather-theme="drizzle-night"]      { --weather-gradient: linear-gradient(140deg,#09111d 0%,#213954 50%,#44596d 100%); --weather-photo: url("https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.13; --orb-a: rgba(79, 120, 173, 0.16); --orb-b: rgba(106, 137, 170, 0.1); --orb-c: rgba(72, 165, 193, 0.1); }
html[data-theme="light"] body[data-weather-theme="drizzle-night"]      { --weather-gradient: linear-gradient(140deg,#dbe3ef 0%,#c0cde0 48%,#dee4ec 100%); --weather-photo: url("https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.16; --orb-a: rgba(85, 124, 179, 0.12); --orb-b: rgba(117, 143, 179, 0.1); --orb-c: rgba(89, 171, 201, 0.1); }

html[data-theme="dark"]  body[data-weather-theme="rain-day"]           { --weather-gradient: linear-gradient(140deg,#08111d 0%,#1c4468 46%,#6089ab 100%); --weather-photo: url("https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.16; --orb-a: rgba(74, 151, 219, 0.18); --orb-b: rgba(82, 126, 171, 0.12); --orb-c: rgba(88, 205, 228, 0.12); }
html[data-theme="light"] body[data-weather-theme="rain-day"]           { --weather-gradient: linear-gradient(140deg,#d7e2eb 0%,#a8bfd5 48%,#e9f0f6 100%); --weather-photo: url("https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.2; --orb-a: rgba(65, 143, 214, 0.12); --orb-b: rgba(92, 136, 181, 0.12); --orb-c: rgba(90, 198, 220, 0.12); }

html[data-theme="dark"]  body[data-weather-theme="rain-night"]         { --weather-gradient: linear-gradient(140deg,#060d16 0%,#18304c 46%,#3f5970 100%); --weather-photo: url("https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.15; --orb-a: rgba(58, 109, 163, 0.16); --orb-b: rgba(72, 97, 139, 0.1); --orb-c: rgba(70, 154, 191, 0.1); }
html[data-theme="light"] body[data-weather-theme="rain-night"]         { --weather-gradient: linear-gradient(140deg,#dce4ee 0%,#b8c6d8 48%,#dde5ee 100%); --weather-photo: url("https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.18; --orb-a: rgba(76, 117, 169, 0.12); --orb-b: rgba(93, 118, 161, 0.1); --orb-c: rgba(86, 169, 197, 0.1); }

html[data-theme="dark"]  body[data-weather-theme="rain-heavy-day"]     { --weather-gradient: linear-gradient(140deg,#060d16 0%,#123450 42%,#406d8d 100%); --weather-photo: url("https://images.unsplash.com/photo-1527766833261-b09c3163a791?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.16; --orb-a: rgba(58, 129, 210, 0.18); --orb-b: rgba(62, 104, 154, 0.12); --orb-c: rgba(70, 176, 215, 0.12); }
html[data-theme="light"] body[data-weather-theme="rain-heavy-day"]     { --weather-gradient: linear-gradient(140deg,#d3dee7 0%,#9db4ca 46%,#e0e9f1 100%); --weather-photo: url("https://images.unsplash.com/photo-1527766833261-b09c3163a791?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.18; --orb-a: rgba(68, 135, 209, 0.12); --orb-b: rgba(88, 120, 161, 0.12); --orb-c: rgba(81, 182, 215, 0.12); }

html[data-theme="dark"]  body[data-weather-theme="rain-heavy-night"]   { --weather-gradient: linear-gradient(140deg,#050913 0%,#10253d 42%,#294b66 100%); --weather-photo: url("https://images.unsplash.com/photo-1527766833261-b09c3163a791?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.14; --orb-a: rgba(52, 93, 151, 0.16); --orb-b: rgba(60, 82, 128, 0.1); --orb-c: rgba(54, 135, 176, 0.1); }
html[data-theme="light"] body[data-weather-theme="rain-heavy-night"]   { --weather-gradient: linear-gradient(140deg,#d8e0ea 0%,#afbdd0 48%,#d8e0ea 100%); --weather-photo: url("https://images.unsplash.com/photo-1527766833261-b09c3163a791?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.16; --orb-a: rgba(71, 110, 160, 0.12); --orb-b: rgba(84, 110, 150, 0.1); --orb-c: rgba(78, 152, 190, 0.1); }

html[data-theme="dark"]  body[data-weather-theme="storm"]              { --weather-gradient: linear-gradient(140deg,#040711 0%,#1e2151 42%,#3b5e99 100%); --weather-photo: url("https://images.unsplash.com/photo-1500674425229-f692875b0ab7?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.13; --orb-a: rgba(110, 129, 255, 0.18); --orb-b: rgba(95, 104, 197, 0.12); --orb-c: rgba(81, 151, 255, 0.14); }
html[data-theme="light"] body[data-weather-theme="storm"]              { --weather-gradient: linear-gradient(140deg,#d7ddef 0%,#b4bfe1 48%,#e6ebfa 100%); --weather-photo: url("https://images.unsplash.com/photo-1500674425229-f692875b0ab7?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.18; --orb-a: rgba(111, 132, 236, 0.14); --orb-b: rgba(113, 128, 211, 0.1); --orb-c: rgba(100, 164, 232, 0.12); }

html[data-theme="dark"]  body[data-weather-theme="snow-day"]           { --weather-gradient: linear-gradient(140deg,#64798f 0%,#aab8c7 52%,#edf4fa 100%); --weather-photo: url("https://images.unsplash.com/photo-1483664852095-d6cc6870702d?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.15; --orb-a: rgba(235, 245, 255, 0.2); --orb-b: rgba(172, 206, 242, 0.14); --orb-c: rgba(255, 255, 255, 0.18); }
html[data-theme="light"] body[data-weather-theme="snow-day"]           { --weather-gradient: linear-gradient(140deg,#f6fbff 0%,#e6f1fb 52%,#ffffff 100%); --weather-photo: url("https://images.unsplash.com/photo-1483664852095-d6cc6870702d?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.26; --orb-a: rgba(255, 255, 255, 0.2); --orb-b: rgba(198, 226, 255, 0.16); --orb-c: rgba(232, 242, 255, 0.14); }

html[data-theme="dark"]  body[data-weather-theme="snow-night"]         { --weather-gradient: linear-gradient(140deg,#314255 0%,#657b95 52%,#bccbd9 100%); --weather-photo: url("https://images.unsplash.com/photo-1483664852095-d6cc6870702d?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.14; --orb-a: rgba(210, 228, 244, 0.18); --orb-b: rgba(154, 191, 226, 0.12); --orb-c: rgba(235, 243, 255, 0.16); }
html[data-theme="light"] body[data-weather-theme="snow-night"]         { --weather-gradient: linear-gradient(140deg,#edf5fc 0%,#dbe9f6 52%,#f7fbff 100%); --weather-photo: url("https://images.unsplash.com/photo-1483664852095-d6cc6870702d?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.22; --orb-a: rgba(232, 241, 252, 0.16); --orb-b: rgba(190, 219, 246, 0.14); --orb-c: rgba(244, 248, 255, 0.14); }

html[data-theme="dark"]  body[data-weather-theme="fog-day"]            { --weather-gradient: linear-gradient(140deg,#29323c 0%,#6a7b88 50%,#9ca9b1 100%); --weather-photo: url("https://images.unsplash.com/photo-1485236715568-ddc5ee6ca227?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.16; --photo-filter: saturate(0.72) blur(1px); --orb-a: rgba(192, 203, 214, 0.14); --orb-b: rgba(170, 180, 193, 0.1); --orb-c: rgba(210, 224, 234, 0.1); }
html[data-theme="light"] body[data-weather-theme="fog-day"]            { --weather-gradient: linear-gradient(140deg,#edf1f3 0%,#d7dde1 52%,#f7f9fa 100%); --weather-photo: url("https://images.unsplash.com/photo-1485236715568-ddc5ee6ca227?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.22; --photo-filter: saturate(0.8) blur(1px); --orb-a: rgba(205, 214, 221, 0.12); --orb-b: rgba(182, 192, 201, 0.1); --orb-c: rgba(220, 228, 235, 0.12); }

html[data-theme="dark"]  body[data-weather-theme="fog-night"]          { --weather-gradient: linear-gradient(140deg,#171d23 0%,#44515d 48%,#78848e 100%); --weather-photo: url("https://images.unsplash.com/photo-1485236715568-ddc5ee6ca227?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.14; --photo-filter: saturate(0.7) blur(1px); --orb-a: rgba(142, 155, 168, 0.12); --orb-b: rgba(122, 135, 146, 0.08); --orb-c: rgba(164, 179, 189, 0.08); }
html[data-theme="light"] body[data-weather-theme="fog-night"]          { --weather-gradient: linear-gradient(140deg,#e8ecef 0%,#d4dbe0 52%,#eef2f5 100%); --weather-photo: url("https://images.unsplash.com/photo-1485236715568-ddc5ee6ca227?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.18; --photo-filter: saturate(0.78) blur(1px); --orb-a: rgba(159, 172, 184, 0.1); --orb-b: rgba(142, 152, 164, 0.08); --orb-c: rgba(183, 194, 203, 0.08); }

html[data-theme="dark"]  body[data-weather-theme="haze-day"]           { --weather-gradient: linear-gradient(140deg,#302822 0%,#8f7a5d 50%,#d6b08b 100%); --weather-photo: url("https://images.unsplash.com/photo-1503437313881-503a91226419?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.15; --photo-filter: saturate(0.82) blur(0.5px); --orb-a: rgba(218, 172, 110, 0.16); --orb-b: rgba(197, 154, 116, 0.12); --orb-c: rgba(239, 198, 138, 0.12); }
html[data-theme="light"] body[data-weather-theme="haze-day"]           { --weather-gradient: linear-gradient(140deg,#f5ebdc 0%,#ead8ba 52%,#fff1df 100%); --weather-photo: url("https://images.unsplash.com/photo-1503437313881-503a91226419?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.22; --photo-filter: saturate(0.88) blur(0.5px); --orb-a: rgba(233, 184, 114, 0.14); --orb-b: rgba(208, 162, 121, 0.12); --orb-c: rgba(244, 208, 151, 0.12); }

html[data-theme="dark"]  body[data-weather-theme="haze-night"]         { --weather-gradient: linear-gradient(140deg,#221b17 0%,#5c4f43 50%,#907561 100%); --weather-photo: url("https://images.unsplash.com/photo-1503437313881-503a91226419?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.13; --photo-filter: saturate(0.78) blur(0.5px); --orb-a: rgba(176, 132, 89, 0.14); --orb-b: rgba(146, 114, 83, 0.1); --orb-c: rgba(201, 158, 103, 0.1); }
html[data-theme="light"] body[data-weather-theme="haze-night"]         { --weather-gradient: linear-gradient(140deg,#efe5da 0%,#e0cfbe 52%,#f2e6db 100%); --weather-photo: url("https://images.unsplash.com/photo-1503437313881-503a91226419?auto=format&fit=crop&w=1600&q=80"); --photo-opacity:0.18; --photo-filter: saturate(0.84) blur(0.5px); --orb-a: rgba(193, 148, 104, 0.12); --orb-b: rgba(167, 132, 98, 0.1); --orb-c: rgba(213, 171, 120, 0.1); }

/* ── Background orbs + particles ──────────────────────── */
.bg-scene, .particle-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  transition: background var(--duration) var(--ease-out);
}
.orb-1 { width:560px; height:560px; top:-170px; left:-120px; background:var(--orb-a); animation: float-orb 16s ease-in-out infinite; }
.orb-2 { width:440px; height:440px; top:35%; right:-120px; background:var(--orb-b); animation: float-orb 18s ease-in-out infinite -6s; }
.orb-3 { width:380px; height:380px; bottom:-100px; left:40%; background:var(--orb-c); animation: float-orb 14s ease-in-out infinite -11s; }

@keyframes float-orb {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(34px,-46px) scale(1.06); }
  66%      { transform:translate(-24px,24px) scale(0.94); }
}

.raindrop {
  position: absolute; top: -24px; width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--rain-color));
  box-shadow: 0 0 10px var(--rain-color);
  opacity: 0; animation: rain-fall linear infinite;
}
@keyframes rain-fall {
  0%   { transform:translateY(-24px); opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:0.9; }
  100% { transform:translateY(110vh); opacity:0; }
}

.snowflake {
  position: absolute; top: -12px; border-radius: 50%;
  background: var(--snow-color);
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
  opacity: 0; animation: snow-fall linear infinite;
}
@keyframes snow-fall {
  0%   { transform:translateY(-12px) translateX(0) rotate(0deg); opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:0.75; }
  100% { transform:translateY(110vh) translateX(60px) rotate(360deg); opacity:0; }
}

.storm-streak {
  width: 3px;
  box-shadow: 0 0 16px rgba(208, 225, 255, 0.95);
}

.fog-band {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
  filter: blur(16px);
  animation: fog-drift linear infinite;
}

@keyframes fog-drift {
  0%   { transform: translateX(-12vw); }
  50%  { transform: translateX(24vw); }
  100% { transform: translateX(58vw); }
}

/* ── Layout ────────────────────────────────────────────── */
.app-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 16px 72px;
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px var(--glass-shadow), inset 0 1px 0 var(--glass-inset);
  transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
html[data-theme="light"] .glass {
  box-shadow: 0 20px 48px rgba(84,117,170,0.18), inset 0 1px 0 rgba(255,255,255,0.72);
}

.app-header, .search-section, .map-section,
.skeleton-wrap, .weather-section, .empty-section {
  width: 100%;
  max-width: 720px;
}

/* ── Header ────────────────────────────────────────────── */
.app-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
  animation: slide-down 0.65s var(--ease-spring) both;
}
@keyframes slide-down {
  from { opacity:0; transform:translateY(-28px); }
  to   { opacity:1; transform:translateY(0); }
}

.brand { display:flex; align-items:center; gap:11px; }
.brand-icon {
  width:46px; height:46px; border-radius:15px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:800; letter-spacing:0.08em;
  box-shadow: 0 4px 22px var(--accent-glow);
}
.brand-name {
  font-size:1.65rem; font-weight:800; letter-spacing:-0.6px;
  background: linear-gradient(135deg, var(--text-1) 30%, var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.theme-toggle {
  display:flex; align-items:center; gap:9px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--radius-pill); padding:8px 16px;
  cursor:pointer; color:var(--text-1);
  font-family:var(--font-display); font-size:0.86rem; font-weight:600;
  backdrop-filter:blur(20px);
  transition: all var(--duration) var(--ease-out);
}
.theme-toggle:hover { background:var(--btn-hover); transform:scale(1.05); }
.toggle-track {
  width:40px; height:22px; border-radius:11px;
  background:var(--btn-bg); border:1px solid var(--glass-border);
  position:relative; flex-shrink:0;
}
[data-theme="dark"] .toggle-track { background:var(--accent-glow); }
.toggle-thumb {
  position:absolute; top:3px; left:3px;
  width:14px; height:14px; border-radius:50%;
  background:var(--accent);
  transition: transform var(--duration) var(--ease-spring);
}
[data-theme="dark"] .toggle-thumb { transform:translateX(18px); }

/* ── Search ────────────────────────────────────────────── */
.search-section { animation: slide-up 0.7s var(--ease-spring) 0.1s both; }
@keyframes slide-up {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}

.search-card { padding:20px; display:flex; gap:12px; align-items:center; }
.search-input-wrap { flex:1; position:relative; }
.search-icon { position:absolute; left:17px; top:50%; transform:translateY(-50%); font-size:16px; color:var(--text-3); }
.search-input {
  width:100%; background:var(--search-bg); border:1.5px solid var(--glass-border);
  border-radius:var(--radius-btn); padding:14px 16px 14px 50px;
  font-family:var(--font-display); font-size:1rem; font-weight:500;
  color:var(--text-1); outline:none;
  transition: all var(--duration) var(--ease-out);
}
.search-input::placeholder { color:var(--text-3); }
.search-input:focus { background:var(--search-focus); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow); }

.search-btn {
  border:none; border-radius:var(--radius-btn); padding:14px 20px;
  font-family:var(--font-display); font-size:0.92rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition: all 0.28s var(--ease-spring);
}
.search-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; box-shadow:0 4px 22px var(--accent-glow);
}
.search-btn:hover { transform:scale(1.04) translateY(-2px); }
.search-btn:disabled { opacity:0.52; cursor:not-allowed; transform:none; box-shadow:none; }

.error-pill {
  margin-top:12px; display:flex; align-items:center; gap:9px;
  background:var(--error-bg); border:1px solid var(--error-border);
  border-radius:12px; padding:11px 16px; font-size:0.9rem; color:var(--error-text);
  animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%      { transform:translateX(-9px); }
  40%      { transform:translateX(9px); }
  60%      { transform:translateX(-5px); }
  80%      { transform:translateX(5px); }
}

/* ═══════════════════════════════════════════════════════
   MAP SECTION  —  Leaflet real map
   ═══════════════════════════════════════════════════════ */
.map-section {
  margin-top: 24px;
  animation: slide-up 0.78s var(--ease-spring) 0.16s both;
}
.map-card { padding: 24px; }

.map-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}
.map-eyebrow {
  font-size:0.76rem; font-weight:800; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--accent); margin-bottom:6px;
}
.map-title { font-size:1.2rem; font-weight:800; line-height:1.3; }
.map-sub {
  max-width:280px; font-size:0.82rem; color:var(--text-3);
  text-align:right; line-height:1.6;
}

/* The Leaflet container shell */
.map-shell {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 16px 36px rgba(0,0,0,0.28);
}

/* Leaflet map div — fixed height */
#leafletMap {
  width: 100%;
  height: 340px;
  display: block;
  border-radius: 20px;
}

/* Tint map tiles to match dark/light theme */
.leaflet-tile {
  filter: var(--map-tile-filter) !important;
  transition: filter var(--duration) var(--ease-out);
}

/* Glass-style popup */
.leaflet-popup-content-wrapper {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  color: var(--text-1) !important;
  box-shadow: 0 8px 32px var(--glass-shadow) !important;
  font-family: var(--font-display) !important;
  font-size: 0.9rem;
}
.leaflet-popup-tip { background: var(--glass-bg) !important; }
.leaflet-popup-close-button { color: var(--text-2) !important; }

/* Custom city pin marker */
.city-pin-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50% 50% 50% 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 18px var(--accent-glow), 0 2px 6px rgba(0,0,0,0.4);
  font-size: 18px; transform: rotate(-45deg);
  border: 2px solid rgba(255,255,255,0.5);
  animation: pin-drop 0.5s var(--ease-spring) both;
}
.city-pin-icon span { transform: rotate(45deg); display:block; }

@keyframes pin-drop {
  from { transform: rotate(-45deg) scale(0) translateY(-30px); opacity:0; }
  to   { transform: rotate(-45deg) scale(1) translateY(0);     opacity:1; }
}

/* Coordinate toolbar under map */
.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.map-coords {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-2);
}
.map-coord-badges {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.coord-badge {
  background: var(--btn-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
}

/* ── Skeleton ───────────────────────────────────────────── */
.skeleton-wrap, .weather-section, .empty-section { margin-top: 24px; }
.skeleton-inner { padding: 36px; }
.skel-block {
  border-radius: 12px;
  background: linear-gradient(90deg, var(--shimmer-a) 0%, var(--shimmer-b) 50%, var(--shimmer-a) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
.skel-big   { height:88px; margin-bottom:16px; }
.skel-med   { height:48px; width:60%; margin-bottom:12px; }
.skel-small { height:32px; width:42%; }

/* ── Weather card ───────────────────────────────────────── */
.weather-section { animation: pop-in 0.65s var(--ease-spring) both; }
@keyframes pop-in {
  from { opacity:0; transform:scale(0.87) translateY(34px); }
  to   { opacity:1; transform:scale(1)    translateY(0); }
}

.weather-card {
  padding: 36px 32px 28px;
  position: relative; overflow: hidden;
  animation: weather-card-enter 0.7s var(--ease-spring) both;
}
.weather-card::before {
  content:""; position:absolute; top:0; left:-120%;
  width:220%; height:100%;
  background: linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.045) 50%,transparent 100%);
  animation: card-sheen 8s ease-in-out infinite; pointer-events:none;
}
.weather-card::after {
  content:""; position:absolute; right:-60px; bottom:-90px;
  width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle,rgba(255,255,255,0.13),transparent 72%);
  pointer-events:none;
}
@keyframes card-sheen { 0%,100%{left:-120%;} 50%{left:100%;} }
@keyframes weather-card-enter {
  from { opacity:0; transform:translateY(28px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* Weather card themed backgrounds */
body[data-weather-theme^="clear-"] .weather-card,
body[data-weather-theme^="partly-cloudy-"] .weather-card {
  background: radial-gradient(circle at top right,rgba(255,213,102,0.2),transparent 34%), var(--glass-bg);
}
body[data-weather-theme="clear-night"] .weather-card,
body[data-weather-theme="partly-cloudy-night"] .weather-card {
  background: radial-gradient(circle at top right,rgba(164,149,255,0.14),transparent 34%), var(--glass-bg);
}
body[data-weather-theme^="cloudy-"] .weather-card,
body[data-weather-theme^="overcast-"] .weather-card {
  background: linear-gradient(180deg,rgba(215,225,235,0.12),rgba(120,140,160,0.06)), var(--glass-bg);
}
body[data-weather-theme^="drizzle-"] .weather-card,
body[data-weather-theme^="rain-"] .weather-card,
body[data-weather-theme="storm"] .weather-card {
  background: linear-gradient(160deg,rgba(13,33,58,0.42),rgba(18,73,92,0.26)), var(--glass-bg);
}
html[data-theme="light"] body[data-weather-theme^="drizzle-"] .weather-card,
html[data-theme="light"] body[data-weather-theme^="rain-"] .weather-card,
html[data-theme="light"] body[data-weather-theme="storm"] .weather-card {
  background: linear-gradient(160deg,rgba(84,146,225,0.14),rgba(31,102,220,0.08)), var(--glass-bg);
}
body[data-weather-theme^="snow-"] .weather-card {
  background: radial-gradient(circle at top,rgba(255,255,255,0.22),transparent 36%), var(--glass-bg);
}
body[data-weather-theme^="fog-"] .weather-card,
body[data-weather-theme^="haze-"] .weather-card {
  background: linear-gradient(180deg,rgba(220,230,240,0.14),rgba(120,140,160,0.08)), var(--glass-bg);
}

.weather-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:18px; margin-bottom:22px;
}
.city-name { font-size:clamp(2rem,5.5vw,3rem); font-weight:800; letter-spacing:-1.2px; line-height:1; }
.country-badge {
  display:inline-block; background:var(--btn-bg); border:1px solid var(--glass-border);
  border-radius:8px; padding:3px 11px; font-size:0.7rem; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); margin-top:7px;
}
.date-time { font-family:var(--font-mono); font-size:0.73rem; color:var(--text-3); margin-top:8px; }

.icon-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.weather-emoji {
  width:92px; height:92px; display:grid; place-items:center;
  filter: drop-shadow(0 8px 24px var(--accent-glow));
  animation: icon-float 4.5s ease-in-out infinite;
}
.weather-emoji svg { width:100%; height:100%; }
@keyframes icon-float {
  0%,100% { transform:translateY(0)     rotate(-2deg); }
  50%      { transform:translateY(-13px) rotate(2deg); }
}
.weather-desc { font-size:0.72rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--text-2); text-align:center; }

.temp-section { margin-bottom:28px; }
.temp-value {
  font-size:clamp(4.2rem,14vw,8rem); font-weight:800; letter-spacing:-5px; line-height:0.88;
  background: linear-gradient(135deg, var(--text-1) 40%, var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.temp-unit { font-size:0.4em; vertical-align:super; }
.feels-like { font-size:0.9rem; color:var(--text-3); margin-top:10px; font-weight:500; }

/* ── Stat grid ─────────────────────────────────────────── */
.stat-grid, .forecast-grid { display:grid; gap:13px; }
.stat-grid { grid-template-columns:repeat(auto-fit, minmax(132px,1fr)); }

.stat-tile, .forecast-tile {
  position:relative; background:var(--tile-bg);
  border:1px solid var(--glass-border); border-radius:var(--radius-tile);
  transition: all 0.28s var(--ease-out);
}
.stat-tile {
  padding:16px; display:flex; flex-direction:column; gap:5px;
  animation: tile-appear 0.5s var(--ease-spring) both;
  animation-delay: var(--tile-delay, 0s);
}
@keyframes tile-appear {
  from { opacity:0; transform:scale(0.82) translateY(14px); }
  to   { opacity:1; transform:scale(1)    translateY(0); }
}
.stat-tile:hover, .forecast-tile:hover {
  transform:translateY(-4px) scale(1.02);
  background:var(--btn-bg); box-shadow:0 10px 28px var(--glass-shadow);
}
.stat-icon {
  font-size:0.75rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-3);
}
.stat-value { font-size:1.22rem; font-weight:700; }
.stat-sub   { font-size:0.72rem; color:var(--text-3); font-weight:500; }
.wind-dir   { font-size:1rem; font-weight:700; color:var(--accent); }

.prog-track {
  width:100%; height:5px; border-radius:10px;
  background:var(--prog-bg); overflow:hidden; margin-top:5px;
}
.prog-fill {
  height:100%; border-radius:10px;
  background:linear-gradient(90deg, var(--accent), #f97316);
  transition: width 1.1s var(--ease-spring);
}

/* ── Forecast ──────────────────────────────────────────── */
.forecast-section { margin-top:26px; }
.forecast-head {
  display:flex; justify-content:space-between; gap:16px; align-items:end; margin-bottom:14px;
}
.forecast-title { font-size:1.2rem; font-weight:800; }
.forecast-sub   { font-size:0.82rem; color:var(--text-3); text-align:right; max-width:280px; }
.forecast-grid  { grid-template-columns:repeat(5, minmax(0,1fr)); }
.forecast-tile  { padding:16px 12px; text-align:center; }
.forecast-icon  { width:56px; height:56px; margin:10px auto 8px; }
.forecast-icon svg { width:100%; height:100%; }
.forecast-day   { font-size:0.8rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-3); }
.forecast-temp  { font-size:1.05rem; font-weight:800; }
.forecast-range { font-size:0.76rem; color:var(--text-3); margin-top:4px; }
.forecast-desc  { font-size:0.72rem; text-transform:capitalize; color:var(--text-2); margin-top:8px; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-inner {
  padding:58px 32px; display:flex; flex-direction:column;
  align-items:center; gap:14px; text-align:center;
}
.empty-emoji { font-size:4rem; animation: icon-float 4s ease-in-out infinite; }
.empty-title { font-size:1.65rem; font-weight:800; }
.empty-sub   { font-size:0.93rem; color:var(--text-3); max-width:420px; line-height:1.7; }

.hidden { display:none !important; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .forecast-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  #leafletMap { height: 260px; }
  .map-head { flex-direction:column; align-items:flex-start; }
  .map-sub   { text-align:left; max-width:none; }
}
@media (max-width: 560px) {
  .app-wrapper     { padding:22px 12px 44px; }
  .weather-card    { padding:24px 18px 20px; }
  .map-card        { padding:18px; }
  .search-card     { flex-wrap:wrap; }
  .search-btn { width:100%; text-align:center; }
  .weather-top     { flex-direction:column; }
  .weather-emoji   { width:72px; height:72px; }
  .stat-grid       { grid-template-columns:repeat(2,1fr); }
  .brand-name      { font-size:1.2rem; }
  .forecast-head   { flex-direction:column; align-items:flex-start; }
  .forecast-sub    { text-align:left; }
  #leafletMap      { height: 220px; }
}

::-webkit-scrollbar       { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:10px; }