/* ==================================================================
   Nutshell Weather — Foglio di stile principale
   Estratto da public/index.html + CSS modale notifiche push.
   ================================================================== */

/* ==================================================================
   BASE  =  tema "aurora" (default). Ogni altro tema sovrascrive solo
   le variabili che gli servono in :root[data-theme="..."] più sotto.
   ================================================================== */
:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  --bg:
    radial-gradient(80% 60% at 72% 8%, rgba(45,212,191,0.28), transparent 60%),
    radial-gradient(70% 55% at 18% 28%, rgba(129,140,248,0.26), transparent 62%),
    linear-gradient(160deg, #081834 0%, #061026 55%, #04091c 100%);

  --text: #e7eefc;
  --text-soft: #aab8d8;
  --text-faint: #7e8cb0;
  --accent: #22d3ee;

  --phrase: #ffffff;
  --phrase-weight: 800;
  --phrase-tracking: -0.02em;
  --phrase-style: normal;
  --phrase-shadow: 0 2px 30px rgba(34,211,238,0.30);
  --emoji-shadow: drop-shadow(0 12px 32px rgba(34,211,238,0.40));
  --date-color: rgba(231,238,252,0.72);

  --city-color: #ffffff;
  --city-region-color: rgba(231,238,252,0.70);
  --chip-bg: rgba(255,255,255,0.10);
  --chip-border: rgba(255,255,255,0.22);
  --chip-text: #ffffff;
  --chip-hover: rgba(255,255,255,0.20);

  --card-bg: rgba(17,28,52,0.55);
  --card-border: rgba(255,255,255,0.12);
  --card-border-width: 1px;
  --card-blur: 16px;
  /* Box "Come abbiamo calcolato" — velo neutro molto leggero, ok su ogni tema */
  --deepdive-bg: rgba(127,127,127,0.08);
  --deepdive-border: rgba(127,127,127,0.16);
  /* Quanti px del box deepdive sbucano dal fondo schermo (oltre ai 14px del padding body) */
  --deepdive-peek: 32px;
  --input-bg: rgba(255,255,255,0.08);
  --input-text: #eaf1ff;
  --input-placeholder: #8ea0c8;
  --results-bg: #0e1c38;
  --results-text: #e7eefc;
  --results-hover: rgba(34,211,238,0.16);
  --results-border: rgba(255,255,255,0.07);

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 50px rgba(2,8,23,0.55);

  --temp: #fbbf24;
  --rain: #22d3ee;
  --grid: rgba(148,163,184,0.30);
  --axis: #9aa8c8;
  --now: #f87171;

  --footer-color: rgba(231,238,252,0.6);
  --footer-link: #ffffff;
}

/* ---------- 2. ALBA — caldo, chiaro, raggiante ---------- */
:root[data-theme="sunrise"] {
  --font-display: 'Fraunces', Georgia, serif;
  --bg:
    radial-gradient(95% 70% at 82% 6%, rgba(255,224,150,0.95), transparent 55%),
    linear-gradient(165deg, #ffe7d2 0%, #ffc59c 45%, #ff9a78 100%);
  --text: #4a2410; --text-soft: #8a5236; --text-faint: #b07a59; --accent: #ea580c;
  --phrase: #3a1c0c; --phrase-weight: 600; --phrase-tracking: -0.01em;
  --phrase-shadow: 0 2px 18px rgba(255,255,255,0.35);
  --emoji-shadow: drop-shadow(0 10px 26px rgba(180,80,30,0.35));
  --date-color: rgba(74,36,16,0.70);
  --city-color: #3a1c0c; --city-region-color: rgba(74,36,16,0.65);
  --chip-bg: rgba(255,255,255,0.55); --chip-border: rgba(120,60,30,0.18); --chip-text: #5a2c12; --chip-hover: rgba(255,255,255,0.8);
  --card-bg: rgba(255,250,244,0.82); --card-border: rgba(180,110,70,0.20); --card-blur: 8px;
  --deepdive-bg: rgba(0,0,0,0.05); --deepdive-border: rgba(0,0,0,0.08);
  --input-bg: rgba(255,255,255,0.85); --input-text: #4a2410; --input-placeholder: #b07a59;
  --results-bg: #fffaf4; --results-text: #4a2410; --results-hover: rgba(234,88,12,0.10); --results-border: rgba(180,110,70,0.16);
  --shadow: 0 16px 40px rgba(180,90,40,0.22);
  --temp: #ea580c; --rain: #4f46e5; --grid: rgba(120,70,40,0.22); --axis: #9c6f53; --now: #dc2626;
  --footer-color: rgba(74,36,16,0.6); --footer-link: #b3370a;
}

/* ---------- 3. MEZZANOTTE — minimal, quasi nero ---------- */
:root[data-theme="midnight"] {
  --font-display: 'Inter', system-ui, sans-serif;
  --bg: radial-gradient(120% 120% at 50% 0%, #15161a 0%, #0a0a0c 55%, #060608 100%);
  --text: #f4f4f6; --text-soft: #a1a1aa; --text-faint: #6b6b74; --accent: #3b82f6;
  --phrase: #fafafa; --phrase-weight: 800; --phrase-tracking: -0.035em;
  --phrase-shadow: none;
  --emoji-shadow: drop-shadow(0 14px 30px rgba(0,0,0,0.6));
  --date-color: rgba(244,244,246,0.55);
  --city-color: #fafafa; --city-region-color: rgba(244,244,246,0.5);
  --chip-bg: rgba(255,255,255,0.06); --chip-border: rgba(255,255,255,0.14); --chip-text: #f4f4f6; --chip-hover: rgba(255,255,255,0.14);
  --card-bg: rgba(20,20,24,0.7); --card-border: rgba(255,255,255,0.08); --card-blur: 10px;
  --input-bg: rgba(255,255,255,0.05); --input-text: #f4f4f6; --input-placeholder: #6b6b74;
  --results-bg: #121216; --results-text: #f4f4f6; --results-hover: rgba(59,130,246,0.16); --results-border: rgba(255,255,255,0.06);
  --radius: 16px; --radius-sm: 11px;
  --shadow: 0 20px 50px rgba(0,0,0,0.6);
  --temp: #f97316; --rain: #3b82f6; --grid: rgba(160,160,170,0.20); --axis: #71717a; --now: #f43f5e;
  --footer-color: rgba(244,244,246,0.45); --footer-link: #e4e4e7;
}

/* ---------- 4. EDITORIALE — carta, serif, inchiostro ---------- */
:root[data-theme="paper"] {
  --font: 'Inter', Georgia, serif;
  --font-display: 'Fraunces', Georgia, serif;
  --bg:
    radial-gradient(90% 80% at 50% -10%, #faf6ec 0%, #f3ede0 60%, #ece4d3 100%);
  --text: #211c16; --text-soft: #5c5347; --text-faint: #968b79; --accent: #9a2c2c;
  --phrase: #1a1612; --phrase-weight: 500; --phrase-tracking: 0; --phrase-style: italic;
  --phrase-shadow: none;
  --emoji-shadow: drop-shadow(0 8px 18px rgba(50,40,30,0.22));
  --date-color: rgba(33,28,22,0.6);
  --city-color: #1a1612; --city-region-color: rgba(33,28,22,0.55);
  --chip-bg: transparent; --chip-border: rgba(26,22,18,0.45); --chip-text: #1a1612; --chip-hover: rgba(26,22,18,0.06);
  --card-bg: #fffdf8; --card-border: rgba(26,22,18,0.16); --card-blur: 0px;
  --input-bg: #fffdf8; --input-text: #211c16; --input-placeholder: #968b79;
  --results-bg: #fffdf8; --results-text: #211c16; --results-hover: rgba(154,44,44,0.08); --results-border: rgba(26,22,18,0.12);
  --radius: 8px; --radius-sm: 6px;
  --shadow: 0 14px 34px rgba(60,45,30,0.14);
  --temp: #9a2c2c; --rain: #1f3a5f; --grid: rgba(26,22,18,0.16); --axis: #6b5d4f; --now: #b45309;
  --footer-color: rgba(33,28,22,0.55); --footer-link: #9a2c2c;
}

/* ---------- 5. BRUTALIST — flat, bordi neri, ombre dure ---------- */
:root[data-theme="brutalist"] {
  --font: 'Space Grotesk', 'Inter', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --bg: #ffd400;
  --text: #111111; --text-soft: #333333; --text-faint: #555555; --accent: #111111;
  --phrase: #111111; --phrase-weight: 700; --phrase-tracking: -0.015em;
  --phrase-shadow: none;
  --emoji-shadow: none;
  --date-color: #111111;
  --city-color: #111111; --city-region-color: #333333;
  --chip-bg: #111111; --chip-border: #111111; --chip-text: #ffd400; --chip-hover: #000000;
  --card-bg: #ffffff; --card-border: #111111; --card-border-width: 3px; --card-blur: 0px;
  --input-bg: #ffffff; --input-text: #111111; --input-placeholder: #888888;
  --results-bg: #ffffff; --results-text: #111111; --results-hover: #ffe44d; --results-border: rgba(17,17,17,0.18);
  --radius: 4px; --radius-sm: 3px;
  --shadow: 6px 6px 0 #111111;
  --temp: #e11d48; --rain: #2563eb; --grid: rgba(17,17,17,0.28); --axis: #111111; --now: #111111;
  --footer-color: #111111; --footer-link: #111111;
}

/* ---------- 6. SALVIA — verde calmo, organico ---------- */
:root[data-theme="sage"] {
  --font-display: 'Fraunces', Georgia, serif;
  --bg: linear-gradient(165deg, #e6ecdf 0%, #cdd9c0 50%, #b3c4a3 100%);
  --text: #243024; --text-soft: #4f5e49; --text-faint: #7e8c76; --accent: #5e7a4f;
  --phrase: #1f2c1f; --phrase-weight: 600; --phrase-tracking: -0.01em;
  --phrase-shadow: 0 2px 14px rgba(255,255,255,0.3);
  --emoji-shadow: drop-shadow(0 10px 22px rgba(60,80,50,0.28));
  --date-color: rgba(36,48,36,0.65);
  --city-color: #1f2c1f; --city-region-color: rgba(36,48,36,0.6);
  --chip-bg: rgba(255,255,255,0.5); --chip-border: rgba(60,80,50,0.22); --chip-text: #2c3c2a; --chip-hover: rgba(255,255,255,0.78);
  --card-bg: rgba(250,251,246,0.85); --card-border: rgba(94,122,79,0.22); --card-blur: 8px;
  --input-bg: rgba(255,255,255,0.85); --input-text: #243024; --input-placeholder: #7e8c76;
  --results-bg: #f7faf2; --results-text: #243024; --results-hover: rgba(94,122,79,0.12); --results-border: rgba(94,122,79,0.16);
  --shadow: 0 16px 38px rgba(60,80,50,0.20);
  --temp: #c2683f; --rain: #2f6b6b; --grid: rgba(36,48,36,0.20); --axis: #5b6b54; --now: #b4532e;
  --footer-color: rgba(36,48,36,0.6); --footer-link: #41603a;
}

/* ---------- 7. TRAMONTO — mesh vivido viola/rosa/arancio ---------- */
:root[data-theme="dusk"] {
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --bg:
    radial-gradient(70% 60% at 12% 14%, rgba(167,72,255,0.60), transparent 60%),
    radial-gradient(72% 60% at 88% 22%, rgba(255,94,158,0.55), transparent 60%),
    radial-gradient(85% 75% at 60% 105%, rgba(255,160,64,0.55), transparent 60%),
    linear-gradient(160deg, #2a0f4a 0%, #140a2e 100%);
  --text: #f6ecff; --text-soft: #cbb5e6; --text-faint: #9d86c0; --accent: #ff5e9e;
  --phrase: #ffffff; --phrase-weight: 700; --phrase-tracking: -0.02em;
  --phrase-shadow: 0 2px 28px rgba(255,94,158,0.40);
  --emoji-shadow: drop-shadow(0 12px 30px rgba(167,72,255,0.45));
  --date-color: rgba(246,236,255,0.75);
  --city-color: #ffffff; --city-region-color: rgba(246,236,255,0.72);
  --chip-bg: rgba(255,255,255,0.14); --chip-border: rgba(255,255,255,0.28); --chip-text: #ffffff; --chip-hover: rgba(255,255,255,0.24);
  --card-bg: rgba(40,18,68,0.55); --card-border: rgba(255,255,255,0.14); --card-blur: 18px;
  --input-bg: rgba(255,255,255,0.10); --input-text: #f6ecff; --input-placeholder: #b79fd6;
  --results-bg: #20103a; --results-text: #f6ecff; --results-hover: rgba(255,94,158,0.20); --results-border: rgba(255,255,255,0.10);
  --shadow: 0 20px 55px rgba(30,8,60,0.55);
  --temp: #fde047; --rain: #22d3ee; --grid: rgba(255,255,255,0.20); --axis: #d7c4f0; --now: #ff5e9e;
  --footer-color: rgba(246,236,255,0.62); --footer-link: #ffffff;
}

/* ---------- 8. GHIACCIO — vetro freddo, ariosa ---------- */
:root[data-theme="frost"] {
  --bg:
    radial-gradient(90% 70% at 78% 6%, rgba(255,255,255,0.85), transparent 55%),
    linear-gradient(165deg, #eaf4fb 0%, #d3e8f6 50%, #bbdcf0 100%);
  --text: #102f47; --text-soft: #41637c; --text-faint: #7795ac; --accent: #2b8cc0;
  --phrase: #0c2438; --phrase-weight: 700; --phrase-tracking: -0.02em;
  --phrase-shadow: 0 2px 20px rgba(255,255,255,0.55);
  --emoji-shadow: drop-shadow(0 12px 26px rgba(40,110,160,0.30));
  --date-color: rgba(16,47,71,0.65);
  --city-color: #0c2438; --city-region-color: rgba(16,47,71,0.6);
  --chip-bg: rgba(255,255,255,0.55); --chip-border: rgba(40,110,160,0.20); --chip-text: #103a55; --chip-hover: rgba(255,255,255,0.85);
  --card-bg: rgba(255,255,255,0.55); --card-border: rgba(255,255,255,0.7); --card-blur: 20px;
  --input-bg: rgba(255,255,255,0.7); --input-text: #102f47; --input-placeholder: #7795ac;
  --results-bg: rgba(255,255,255,0.92); --results-text: #102f47; --results-hover: rgba(43,140,192,0.12); --results-border: rgba(40,110,160,0.14);
  --radius: 24px; --radius-sm: 16px;
  --shadow: 0 18px 44px rgba(40,110,160,0.22);
  --temp: #ef6b4d; --rain: #2563eb; --grid: rgba(16,45,68,0.16); --axis: #4a7494; --now: #ef4444;
  --footer-color: rgba(16,47,71,0.58); --footer-link: #1d6fa0;
}

/* ---------- 9. TERMINALE — CRT verde fosforo, mono ---------- */
:root[data-theme="terminal"] {
  --font: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'JetBrains Mono', ui-monospace, monospace;
  --bg:
    repeating-linear-gradient(rgba(0,0,0,0) 0 3px, rgba(0,25,10,0.45) 3px 4px),
    radial-gradient(130% 120% at 50% -10%, #082615 0%, #03110a 55%, #020806 100%);
  --text: #5ff293; --text-soft: #36b765; --text-faint: #2a824b; --accent: #39ff7a;
  --phrase: #5fff96; --phrase-weight: 500; --phrase-tracking: -0.01em;
  --phrase-shadow: 0 0 18px rgba(57,255,122,0.55);
  --emoji-shadow: drop-shadow(0 0 16px rgba(57,255,122,0.4));
  --date-color: rgba(95,242,147,0.65);
  --city-color: #5fff96; --city-region-color: rgba(95,242,147,0.6);
  --chip-bg: rgba(57,255,122,0.10); --chip-border: rgba(57,255,122,0.45); --chip-text: #5fff96; --chip-hover: rgba(57,255,122,0.22);
  --card-bg: rgba(4,20,12,0.78); --card-border: rgba(57,255,122,0.30); --card-blur: 2px;
  --input-bg: rgba(57,255,122,0.06); --input-text: #5fff96; --input-placeholder: #2a824b;
  --results-bg: #05140c; --results-text: #5fff96; --results-hover: rgba(57,255,122,0.16); --results-border: rgba(57,255,122,0.22);
  --radius: 4px; --radius-sm: 3px;
  --shadow: 0 0 30px rgba(57,255,122,0.18);
  --temp: #ffb000; --rain: #33d6ff; --grid: rgba(57,255,122,0.22); --axis: #4fae73; --now: #ff5252;
  --footer-color: rgba(95,242,147,0.55); --footer-link: #5fff96;
}

/* ---------- 10. CARAMELLA — pastello giocoso, morbido ---------- */
:root[data-theme="candy"] {
  --font: 'Quicksand', 'Inter', sans-serif;
  --font-display: 'Quicksand', 'Inter', sans-serif;
  --bg:
    radial-gradient(80% 65% at 18% 12%, rgba(196,181,253,0.7), transparent 60%),
    radial-gradient(80% 65% at 85% 90%, rgba(251,207,232,0.8), transparent 60%),
    linear-gradient(160deg, #efe7ff 0%, #ffe7f3 100%);
  --text: #4a2b54; --text-soft: #7a5a84; --text-faint: #a98bb3; --accent: #ec4899;
  --phrase: #3d2147; --phrase-weight: 700; --phrase-tracking: -0.015em;
  --phrase-shadow: 0 2px 18px rgba(255,255,255,0.5);
  --emoji-shadow: drop-shadow(0 12px 26px rgba(180,100,170,0.32));
  --date-color: rgba(74,43,84,0.65);
  --city-color: #3d2147; --city-region-color: rgba(74,43,84,0.6);
  --chip-bg: rgba(255,255,255,0.6); --chip-border: rgba(180,100,170,0.22); --chip-text: #6b2f6e; --chip-hover: rgba(255,255,255,0.9);
  --card-bg: rgba(255,255,255,0.72); --card-border: rgba(180,120,180,0.22); --card-blur: 14px;
  --input-bg: rgba(255,255,255,0.85); --input-text: #4a2b54; --input-placeholder: #a98bb3;
  --results-bg: #fffafe; --results-text: #4a2b54; --results-hover: rgba(236,72,153,0.10); --results-border: rgba(180,120,180,0.16);
  --radius: 28px; --radius-sm: 18px;
  --shadow: 0 16px 42px rgba(180,110,180,0.26);
  --temp: #fb7185; --rain: #8b5cf6; --grid: rgba(74,43,84,0.16); --axis: #9b7aa8; --now: #ec4899;
  --footer-color: rgba(74,43,84,0.58); --footer-link: #d6298a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  padding: 14px;
  line-height: 1.45;
  transition: color 0.4s ease;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 28px - var(--deepdive-peek));
  min-height: calc(100dvh - 28px - var(--deepdive-peek));
}

/* Tre fasce: topbar discreta in alto · frase protagonista al centro · resto in fondo */
.topbar { position: relative; z-index: 20; flex: none; min-height: 30px; display: flex; align-items: center; gap: 12px; }
.topdate {
  margin: 0 auto;
  font-family: var(--font-display);
  color: var(--date-color);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
  white-space: nowrap;
}
.hero-slot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Il box "Come abbiamo calcolato" vive SOTTO la prima schermata: la sua cima
   è tirata su dal margin negativo così da sbucare di pochi px dal fondo,
   invitando allo scroll mentre la frase resta ben centrata nel fold. */
.extra-slot {
  max-width: 760px;
  margin: 0 auto;
}

/* ====== Selettore tema (fisso, sempre visibile) ====== */
.theme-switch {
  position: relative;
  flex: none;
  z-index: 60;
  font-family: var(--font);
}
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 15px 8px 9px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.15s ease;
}
.theme-btn:hover { transform: translateY(-1px); }
.theme-btn:active { transform: translateY(0); }
.theme-btn-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(127,127,127,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  flex: none;
}
.theme-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 256px;
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  padding: 14px;
  transform-origin: top right;
  transform: translateY(-8px) scale(0.96);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.theme-panel.show { transform: translateY(0) scale(1); opacity: 1; }
.theme-panel[hidden] { display: none; }
.theme-panel-title {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint); margin: 2px 4px 11px;
}
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-swatch {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px; border-radius: var(--radius-sm);
  background: transparent; border: 1.5px solid transparent;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.theme-swatch:hover { background: var(--results-hover); }
.theme-swatch.active { border-color: var(--accent); background: var(--results-hover); }
.theme-swatch .sw {
  height: 38px; border-radius: calc(var(--radius-sm) - 3px);
  border: 1px solid rgba(127,127,127,0.22);
}
.theme-swatch .nm {
  font-size: 0.74rem; font-weight: 600; color: var(--text-soft); padding-left: 2px;
}
.theme-swatch.active .nm { color: var(--text); }

/* ---- Selettore città (discreto) ---- */
.city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 2px;
  margin: 0;
  cursor: pointer;
  color: var(--city-color);
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.4s ease;
}
.city:hover { opacity: 1; }
.city .pin { font-size: 0.9rem; }
.city .name { font-family: var(--font-display); letter-spacing: -0.01em; }
.city .caret { font-size: 0.68rem; opacity: 0.7; }

/* ---- Modale selezione città (backdrop blur, sempre centrata) ---- */
.city-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: city-modal-in 0.18s ease;
}
.city-modal[hidden] { display: none; }
@keyframes city-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.city-modal-inner {
  position: relative;
  width: 100%;
  max-width: 460px;
}
.city-modal-close {
  position: absolute;
  top: -6px;
  right: -2px;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 1.1rem;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
  z-index: 2;
}
.city-modal-close:hover { opacity: 1; }
.city-modal-close[hidden] { display: none; }

.city-results {
  margin-top: 6px;
  background: var(--results-bg);
  color: var(--results-text);
  border: var(--card-border-width) solid var(--card-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.city-results .item {
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--results-border);
  font-size: 0.95rem;
}
.city-results .item:last-child { border-bottom: none; }
.city-results .item:hover { background: var(--results-hover); }
.city-results .item .r { color: var(--text-faint); font-size: 0.82rem; }
.city-results .item .cc { color: var(--text-faint); font-size: 0.8rem; float: right; }
.city-results .empty { padding: 12px 16px; color: var(--text-faint); font-size: 0.9rem; }
.city-results .section-label {
  padding: 8px 16px 5px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--results-border);
  pointer-events: none;
}

/* ---- City picker (primo avvio: scelta esplicita della città) ---- */
.city-picker {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.city-picker-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-soft);
  text-align: center;
  margin-bottom: 2px;
}
.city-picker-input {
  width: 100%;
  box-sizing: border-box;
  border: var(--card-border-width) solid var(--card-border);
  background: var(--input-bg);
  color: var(--input-text);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 1rem;
  font-family: var(--font);
  box-shadow: var(--shadow);
  outline: none;
}
.city-picker-input::placeholder { color: var(--input-placeholder); }
.city-picker-nearby { margin-top: 2px; }
.city-picker-recent { margin-top: 2px; }

/* ---- Hero: la frase è la protagonista assoluta ---- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-top: 40px;
  padding: 32px 2px 6px;
  gap: clamp(8px, 2.4vh, 20px);
}
/* Livello 0 — badge località + data, in cima alla hero (al posto dell'icona meteo) */
.hero .loc {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.hero .city-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--chip-text);
  border-radius: 999px;
  padding: 5px 13px 5px 11px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  transition: background 0.2s ease, border-color 0.4s ease, color 0.4s ease, transform 0.15s ease;
}
.hero .city-badge:hover { background: var(--chip-hover); transform: translateY(-1px); }
.hero .city-badge:active { transform: translateY(0); }
.hero .city-badge .pin { font-size: 0.85rem; line-height: 1; }
.hero .city-badge .country { font-weight: 500; opacity: 0.65; font-size: 0.88em; }
.hero .phrase,
.hero .date { position: relative; z-index: 1; }
.hero .phrase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28em;
  font-family: var(--font-display);
  color: var(--phrase);
  font-size: clamp(1.7rem, 6vw, 2.9rem);
  font-weight: var(--phrase-weight);
  font-style: var(--phrase-style);
  letter-spacing: var(--phrase-tracking);
  line-height: 1.12;
  text-shadow: var(--phrase-shadow);
  max-width: 15em;
  overflow-wrap: break-word;
  transition: color 0.4s ease;
}
/* Livello 1 — la frase del cielo, protagonista (guida il resize via .phrase) */
.hero .phrase-sky {
  font-size: 1em;
  max-width: 100%;
  overflow-wrap: break-word;
  white-space: pre-line;
  text-wrap: balance;
}
/* Livello 2 — linea divisoria sfumata (0 → pieno → 0) sotto la frase del cielo */
.hero .phrase-divider {
  align-self: center;
  width: 80%;
  height: 2px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--phrase) 50%, transparent),
    transparent);
}
/* Livello 2b — widget temperature di oggi: massima piena, minima attenuata */
.hero .phrase-temps {
  align-self: center;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55em 0.7em;
  font-size: 0.32em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--phrase);
  opacity: 0.55;
  text-shadow: none;
}
.hero .phrase-temps .t-min { font-weight: 500; }
/* Data compatta (es. "ven 12 giugno") a sinistra di minima/massima */
.hero .phrase-date {
  font-weight: 500;
  white-space: nowrap;
  padding-right: 0.7em;
}
/* Livello 3 — la nota di domani, più piccola e attenuata */
.hero .phrase-tomorrow {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  opacity: 0.7;
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-shadow: none;
}
.hero .date {
  font-family: var(--font-display);
  color: var(--date-color);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

/* ---- Stato loading/errore ---- */
.status { color: var(--text-soft); text-align: center; padding: 40px 20px; font-weight: 500; }
.status .spinner {
  width: 36px; height: 36px;
  border: 4px solid var(--card-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.status.error .err-detail { margin-top: 8px; font-size: 0.85rem; opacity: 0.9; }
.retry-btn {
  margin-top: 16px; background: var(--accent); color: #fff;
  border: none; border-radius: 999px; padding: 9px 20px;
  font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: var(--font);
}

/* ---- Approfondimento (debug algoritmo) ---- */
.deepdive {
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  padding: 0;
  overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.deepdive > .deepdive-title {
  padding: 12px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.deepdive-body { padding: 4px 18px 20px; }

.chart-day-label {
  font-size: 0.82rem; font-weight: 700; color: var(--text-soft); margin-bottom: 8px;
  text-align: center;
}
.chart-day svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-day + .chart-day { margin-top: 18px; }
.chart-legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; justify-content: center;
  font-size: 0.78rem; font-weight: 600; color: var(--text-soft);
}
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .lg .swatch-line { width: 18px; height: 0; border-top: 3px solid var(--temp); border-radius: 999px; }
.chart-legend .lg .swatch-bar { width: 11px; height: 12px; background: var(--rain); opacity: 0.85; border-radius: 2px; }

.debug-box {
  margin-top: 18px;
  border-top: 1px dashed var(--card-border);
  padding-top: 14px;
}
.debug-box .debug-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px;
}
.debug-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}
.debug-grid .k { color: var(--text-faint); }
.debug-grid .v { color: var(--text); font-weight: 600; }

/* Footer Open-Meteo: riga separata in fondo al box deepdive */
.deepdive-footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--deepdive-border);
  text-align: center; color: var(--text);
  font-size: 0.68rem;
  opacity: 0.9;
}
.deepdive-footer a { color: var(--footer-link); }

/* ====== Selettore lingua (gemello del selettore tema) ====== */
.lang-switch { position: relative; flex: none; z-index: 60; font-family: var(--font); }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card-bg); border: var(--card-border-width) solid var(--card-border);
  color: var(--text); border-radius: 999px; padding: 8px 14px;
  font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(var(--card-blur)); backdrop-filter: blur(var(--card-blur));
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.15s ease;
}
.lang-btn:hover { transform: translateY(-1px); }
.lang-btn:active { transform: translateY(0); }
.lang-flag { font-size: 1rem; line-height: 1; }
.lang-code { letter-spacing: 0.04em; }
.lang-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 188px;
  background: var(--card-bg); border: var(--card-border-width) solid var(--card-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(var(--card-blur)); backdrop-filter: blur(var(--card-blur));
  padding: 8px; transform-origin: top right;
  transform: translateY(-8px) scale(0.96); opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-panel.show { transform: translateY(0) scale(1); opacity: 1; }
.lang-panel[hidden] { display: none; }
.lang-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: transparent; border: 1.5px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-soft);
  text-align: left; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lang-item:hover { background: var(--results-hover); color: var(--text); }
.lang-item.active { border-color: var(--accent); background: var(--results-hover); color: var(--text); }
.lang-item .li-flag { font-size: 1.1rem; line-height: 1; }

/* ==================================================================
   BARRA CONTROLLI — sopra il box deepdive, stessa larghezza, trasparente.
   Sinistra: lingua + tema (bordino leggero). Destra: "Avvisami" (sfondo bianco).
   ================================================================== */
.controls-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 2px 12px;
}
.controls-bar .controls-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Stile comune dei tre pulsanti della barra (no "pillola", solo bordino) */
.controls-bar .lang-btn,
.controls-bar .theme-btn,
.controls-bar .push-fab {
  position: static;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 6px 11px;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 1;
  transition: border-color 0.4s ease, background 0.2s ease, transform 0.15s ease;
}
.controls-bar .lang-btn,
.controls-bar .theme-btn { background: transparent; color: var(--text); }
.controls-bar .lang-btn:hover,
.controls-bar .theme-btn:hover,
.controls-bar .push-fab:hover { transform: translateY(-1px); }
.controls-bar .lang-flag { font-size: 0.86rem; }
.controls-bar .theme-btn-dot { width: 15px; height: 15px; }
/* "Avvisami" — stesso stile, ma sfondo pieno bianco e testo scuro */
.controls-bar .push-fab {
  background: #ffffff;
  color: #14213d;
  border-color: rgba(0, 0, 0, 0.12);
}
.controls-bar .push-fab:hover { background: #ffffff; }
.controls-bar .push-fab--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* I pannelli si aprono verso l'alto (la barra è in fondo alla prima schermata) */
.controls-bar .lang-panel,
.controls-bar .theme-panel {
  top: auto;
  right: auto;
  bottom: calc(100% + 10px);
  left: 0;
  transform-origin: bottom left;
}

/* ==================================================================
   NOTIFICHE PUSH — FAB + modale
   ================================================================== */

/* ---- FAB "☔ Avvisami" ---- */
.push-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  background: var(--chip-bg);
  border: var(--card-border-width) solid var(--chip-border);
  color: var(--chip-text);
  border-radius: 999px;
  padding: 11px 18px;
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  user-select: none;
}
.push-fab:hover { background: var(--chip-hover); transform: translateY(-2px); }
.push-fab:active { transform: translateY(0); }
.push-fab--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.push-fab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.push-fab { display: inline-flex; align-items: center; gap: 6px; }
.push-fab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}
.push-fab-soon {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0.01em;
}

/* ---- Modale ---- */
.push-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.push-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.push-box {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  animation: push-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes push-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.push-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 2;
}
.push-modal-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.push-close {
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.push-close:hover { background: var(--results-hover); color: var(--text); }

.push-status {
  padding: 9px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--card-border);
}
.push-status--active  { color: var(--accent); }
.push-status--inactive { color: var(--text-faint); }

.push-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.push-field { display: flex; flex-direction: column; gap: 6px; }
.push-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Ricerca città nel modale */
.push-city-wrap { position: relative; }
.push-city-input {
  width: 100%;
  border: var(--card-border-width) solid var(--card-border);
  background: var(--input-bg);
  color: var(--input-text);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.92rem;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s ease;
}
.push-city-input:focus { border-color: var(--accent); }
.push-city-input::placeholder { color: var(--input-placeholder); }
.push-city-results {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  margin-top: 4px;
  background: var(--results-bg);
  color: var(--results-text);
  border: var(--card-border-width) solid var(--card-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}
.push-city-item {
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--results-border);
  font-size: 0.88rem;
  transition: background 0.12s ease;
}
.push-city-item:last-child { border-bottom: none; }
.push-city-item:hover { background: var(--results-hover); }
.push-city-sub { color: var(--text-faint); font-size: 0.78rem; }
.push-city-cc  { color: var(--text-faint); font-size: 0.76rem; float: right; }
.push-city-empty { padding: 10px 14px; color: var(--text-faint); font-size: 0.85rem; }

/* Slider ora */
.push-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--card-border);
  outline: none;
  cursor: pointer;
}
.push-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.push-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.push-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-faint);
  margin-top: 3px;
}

/* Stile messaggio */
.push-styles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.push-style-opt {
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.push-style-opt input[type="radio"] { display: none; }
.push-style-opt:hover { background: var(--results-hover); }
.push-style-opt--active { border-color: var(--accent); background: var(--results-hover); }
.push-style-title { font-size: 0.84rem; font-weight: 700; color: var(--text); }
.push-style-ex { font-size: 0.71rem; color: var(--text-faint); line-height: 1.45; }

/* Messaggio di errore */
.push-error {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Bottone azione principale */
.push-btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.push-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.push-btn:active:not(:disabled) { transform: translateY(0); }
.push-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.push-btn--primary   { background: var(--accent); color: #fff; }
.push-btn--secondary { background: var(--card-border); color: var(--text); }

/* Istruzioni iOS ("Aggiungi a Home") */
.push-ios-box {
  background: var(--input-bg);
  border: var(--card-border-width) solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.push-ios-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.push-ios-steps {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--text-soft);
  line-height: 1.45;
}
.push-ios-share { font-size: 1rem; }
.push-ios-note {
  margin-top: 12px;
  font-size: 0.76rem;
  color: var(--text-faint);
  font-style: italic;
  line-height: 1.5;
}

/* Browser non supportato */
.push-unsupported {
  text-align: center;
  padding: 12px;
  color: var(--text-faint);
  font-size: 0.88rem;
  line-height: 1.5;
}