:root {
  --teal-50: #ecfeff;
  --teal-100: #cffafe;
  --teal-500: #0ea5a5;
  --teal-700: #0f766e;
  --bg: #f6fbfc;
  --ink: #0f172a;
  --muted: #475569;   /* scurito (era #64748b): verificato WCAG AA nel brand kit */
  --card: #ffffff;
  --border: rgba(15, 23, 42, 0.08);
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.16);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Radii stile iOS */
  --r-card: 16px;
  --r-tile: 12px;
  --r-chip: 10px;
  --r-pill: 999px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  /* Scrollbar nascosta, scroll funzionante */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; }  /* Chrome/Safari/Edge */
html {
  /* clip non crea uno scroll container; previene overflow X senza bloccare Y */
  overflow-x: clip;
}
body {
  background:
    radial-gradient(1200px 600px at 100% -100px, #cffafe 0%, transparent 60%),
    radial-gradient(800px 500px at -100px 100%, #fef3c7 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
               system-ui, 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  min-height: 100vh;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Tutte le card cliccabili: feedback tap stile iOS */
.card, .seg-btn, .btn-ghost, .toggle, [role="button"] {
  -webkit-touch-callout: none;
  user-select: none;
}
.card:active { transform: scale(0.98); transition: transform 0.05s ease; }
.seg-btn:active, .btn-ghost:active { transform: scale(0.96); }

.muted { color: var(--muted); }

/* ---------- Topbar ----------
   FIXED (non sticky): non riserva layout space → niente buco grigio quando si nasconde.
   La mappa è anch'essa fissa al top del viewport (sticky): la topbar la copre solo
   parzialmente quando visibile; quando la topbar si nasconde, la mappa appare intera. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: calc(14px + var(--safe-top)) 16px 10px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 0.5px solid var(--border);
  transition: padding 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.topbar.is-hidden { transform: translateY(-105%); }

.topbar-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; }
.brand h1 {
  font-size: 1.15rem; font-weight: 700; margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: font-size 0.2s ease;
}
.brand h1 .muted { font-weight: 500; }
/* Wordmark: "Calmo" in teal per dare accento, coerente col brand kit. */
.brand h1 b { font-weight: 800; color: var(--teal-700); }
/* Marchio nella topbar: squircle col vero logo (sostituisce .wave-dot). */
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  overflow: hidden; flex-shrink: 0; display: block;
  box-shadow: var(--shadow-sm);
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.wave-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: conic-gradient(from 0deg, #0ea5a5, #22c55e, #eab308, #f97316, #ef4444, #0ea5a5);
  box-shadow: 0 0 0 4px rgba(14, 165, 165, 0.12);
  animation: spin 12s linear infinite;
  flex-shrink: 0;
  transition: width 0.2s ease, height 0.2s ease;
}
@keyframes spin { to { transform: rotate(360deg); } }
.updated {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; flex-shrink: 0;
  font-size: 0.72rem; color: var(--muted);
  background: rgba(15, 23, 42, 0.04);
  padding: 4px 9px; border-radius: 999px;
}
.updated svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Lato destro della topbar: bottone riassunto + timestamp. */
.topbar-right {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.summary-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); background: white;
  border-radius: 50%; cursor: pointer;
  color: var(--teal-700);
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
}
.summary-trigger:hover { box-shadow: var(--shadow); }
.summary-trigger:active { transform: scale(0.94); }

/* Modale Riassunto giornata. */
.summary-content { padding: 0 18px 18px; }
.summary-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 2px;
}
.summary-meta {
  font-size: 0.85rem; color: var(--muted); margin: 6px 0 14px;
  line-height: 1.4;
  display: flex; flex-direction: column;
}
.summary-meta-line { display: block; }
.summary-coast {
  background: white; border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.summary-coast-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.summary-coast-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
}
.summary-coast-name {
  font-weight: 700; font-size: 1.02rem; text-transform: capitalize;
}
.summary-coast-count {
  margin-left: auto; font-size: 0.75rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.summary-coast-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 4px 0;
  font-size: 0.88rem;
}
.summary-coast-stat-label { color: var(--muted); }
.summary-coast-stat-value { font-weight: 600; }
.summary-coast-state {
  color: var(--c, var(--ink));
}

.summary {
  display: flex; gap: 8px; margin: 10px 0 8px; flex-wrap: wrap;
}
.summary .chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: white; border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px; font-size: 0.85rem;
  box-shadow: var(--shadow);
}
.summary .chip .dot {
  width: 10px; height: 10px; border-radius: 50%;
}

/* ---------- Trigger filtri (in topbar) ---------- */
.filters-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: 8px;
  padding: 9px 12px; border: 1px solid var(--border);
  background: white; border-radius: 18px;     /* non pillola: gestisce meglio wrap su 2 righe */
  box-shadow: var(--shadow-sm);
  font-family: inherit; font-size: 0.85rem; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s ease, transform 0.05s ease;
  text-align: left;
}
.filters-trigger:hover { box-shadow: var(--shadow); }
.filters-trigger:active { transform: scale(0.99); }

/* Chip dei filtri attivi: vanno a capo se eccedono la larghezza. */
.filters-chips {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;        /* su mobile piccoli vanno a capo invece di troncare */
  flex: 1 1 auto;         /* prende lo spazio rimanente dopo "Filtri" */
  min-width: 0;
  row-gap: 4px;
}
.filters-chips:empty::before {
  content: 'Nessun filtro attivo';
  color: var(--muted); font-style: italic; font-size: 0.82rem;
}
.filters-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--teal-50); color: var(--teal-700);
  font-size: 0.78rem; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.filters-chip-emoji { font-size: 0.95rem; line-height: 1; }

/* Bottone "Filtri" a destra: resta centrato verticalmente anche quando le chip
   vanno a capo (align-self center sul flex item, parent ha align-items center). */
.filters-trigger-edit {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--teal-700); font-weight: 700; font-size: 0.82rem;
  flex-shrink: 0; align-self: center;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

/* ---------- Modale Filtri (sezioni etichettate) ---------- */
.filters-content { padding: 0 18px 18px; }
.filters-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 2px;
}
.filters-title { margin: 0; font-size: 1.2rem; font-weight: 700; }
.filters-close {
  width: 32px; height: 32px; padding: 0;
  border: 0; background: rgba(15, 23, 42, 0.06); color: var(--ink);
  border-radius: 50%; font-size: 0.95rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.filters-close:hover { background: rgba(15, 23, 42, 0.1); }
.filter-section { margin: 14px 0 6px; }
.filter-label-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin: 0 0 8px;
}
.filter-label {
  display: block; margin: 0 0 8px;
  font-size: 0.7rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em;
}
.filter-label-row .filter-label { margin: 0; }
.modes-info-link {
  background: transparent; border: 0; cursor: pointer;
  color: var(--teal-700); font-size: 0.78rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; padding: 0;
}
.filters-reset {
  display: block; width: 100%; margin-top: 16px;
  padding: 11px 14px; border-radius: var(--r-pill);
  background: white; border: 1px solid var(--border);
  color: var(--ink); font-weight: 600; font-size: 0.88rem; cursor: pointer;
  font-family: inherit;
}
.filters-reset:hover { background: rgba(15, 23, 42, 0.03); }

/* Dentro la modale, i segmenti "Costa" e "Ordina" sono full-width e i loro
   bottoni si distribuiscono equamente. Il segmento Modalità invece deve mantenere
   la dimensione naturale delle chip (emoji+label) e andare a capo, non stringersi. */
#filters-modal .seg:not(.seg-modes) { width: 100%; }
#filters-modal .seg:not(.seg-modes) .seg-btn { flex: 1; padding: 8px 10px; }

/* Modalità nella modale: chip naturali, wrap su più righe quando serve. */
#filters-modal .seg-modes { width: 100%; }
#filters-modal .seg-modes .seg-btn { flex: 0 0 auto; }
/* Su desktop le chip in colonna sarebbero un default mobile -- forziamo riga. */
@media (min-width: 561px) {
  #filters-modal .seg-modes .seg-btn {
    flex-direction: row;
    min-width: 0;
    padding: 8px 14px;
  }
}

/* La select distanza occupa l'intera larghezza nella modale. */
.distance-select-block { width: 100%; padding: 11px 14px !important; }

.controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px;
}
.seg {
  display: inline-flex; background: white; border-radius: 999px;
  border: 1px solid var(--border); padding: 3px; box-shadow: var(--shadow);
}
.seg-btn {
  border: 0; background: transparent; padding: 6px 14px;
  border-radius: 999px; font-size: 0.85rem; color: var(--muted); cursor: pointer;
  transition: all 0.15s ease;
}
.seg-btn.active {
  background: var(--ink); color: white;
}
/* F07 — Segmento modalità: chip emoji+label, su mobile solo emoji.
   border-radius più contenuto (24px) per gestire bene il wrap su 2 righe:
   con border-radius:999 le chip in seconda riga escono dalla pillola. */
.seg-modes {
  display: flex; flex-wrap: wrap; margin-top: 8px; padding: 6px;
  background: white; border-radius: 24px;
  border: 1px solid var(--border); box-shadow: var(--shadow); gap: 4px;
  row-gap: 6px;
}
.seg-modes .seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  min-height: 38px;       /* touch target Apple HIG ~44px, comodo dito anche con padding */
  min-width: 44px;
  position: relative;     /* sopra il fratello "active" per evitare overlay invisibili */
}
.seg-modes .mode-emoji { font-size: 1.05rem; line-height: 1; }
.seg-modes .mode-label { font-weight: 600; }
.seg-modes .seg-btn.active { background: var(--teal-500); color: white; }
@media (max-width: 560px) {
  /* Chip in colonna: emoji sopra, label piccola sotto. Resta riconoscibile
     anche se non c'è spazio per "emoji + label" sulla stessa riga. */
  .seg-modes .seg-btn {
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    min-width: 56px;
  }
  .seg-modes .mode-emoji { font-size: 1.25rem; }
  .seg-modes .mode-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.01em; }
  /* "Tutte" e "ℹ" sono solo testo: tolgo il min-width verticale per non sprecare spazio */
  .seg-modes .seg-btn[data-mode=""],
  .seg-modes .modes-info {
    flex-direction: row;
    padding: 6px 10px;
    min-width: 44px;
  }
}

/* Bottone "ℹ" in coda al segmento modalità.
   NO margin-left:auto — con flex-wrap rompe il layout e su mobile diventa
   un blocco intero, spingendo le altre chip in modo imprevedibile.
   Sta semplicemente alla fine come ultima chip. */
.modes-info {
  min-width: 38px;
  font-weight: 700; font-size: 1rem;
  color: var(--teal-700); background: var(--teal-50);
}
.modes-info:hover { background: var(--teal-100); }

/* Modal info attività: SEMPRE centrato in viewport (non bottom-sheet).
   Usa posizionamento assoluto puro per evitare conflitti col pattern flex bottom-sheet. */
#modes-info-modal { display: block; }
#modes-info-modal .modal-sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 32px);
  max-width: 520px;
  max-height: min(80vh, 640px);
  border-radius: 20px;
  padding-bottom: 0;
  transform: translate(-50%, calc(-50% + 8px)) scale(0.97);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
}
#modes-info-modal.open .modal-sheet {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
#modes-info-modal .modal-handle-area { cursor: default; }
#modes-info-modal .modal-content { padding: 0 18px 18px; }
.modes-info-title { margin: 4px 0 4px; font-size: 1.15rem; font-weight: 700; }
.modes-info-sub { margin: 0 0 14px; line-height: 1.4; }
.modes-info-list { display: grid; gap: 10px; }
.modes-info-card {
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.modes-info-card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.modes-info-card-emoji { font-size: 1.4rem; line-height: 1; }
.modes-info-card-name { font-weight: 700; font-size: 1rem; }
.modes-info-card-summary { color: var(--muted); font-size: 0.88rem; line-height: 1.4; margin: 0 0 8px; }
.modes-info-card-list {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: grid; gap: 4px; font-size: 0.85rem;
}
.modes-info-card-list li {
  position: relative; padding-left: 16px;
}
.modes-info-card-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--teal-500); font-weight: 700;
}
.modes-info-card-ranking {
  font-size: 0.78rem; color: var(--muted); font-style: italic;
  padding-top: 6px; border-top: 1px dashed var(--border);
}

/* Empty state curato per modalità senza match. */
.modes-empty {
  background: white; border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 18px 16px;
  text-align: center; box-shadow: var(--shadow-sm);
}
.modes-empty-emoji { font-size: 2rem; line-height: 1; margin-bottom: 8px; }
.modes-empty-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.modes-empty-hint { color: var(--muted); font-size: 0.88rem; line-height: 1.4; margin-bottom: 12px; }
.modes-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.modes-empty-actions button {
  background: var(--teal-500); color: white; border: 0;
  border-radius: var(--r-pill); padding: 8px 14px; font-weight: 600; cursor: pointer;
}
.modes-empty-actions button.secondary {
  background: white; color: var(--teal-700);
  border: 1px solid rgba(15, 118, 110, 0.25);
}

.toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; cursor: pointer; user-select: none;
}
.toggle input { accent-color: var(--teal-500); }

/* Filtro distanza */
.distance-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; user-select: none;
  background: white; border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px 4px 4px 12px;
  box-shadow: var(--shadow-sm);
}
.distance-filter-label { color: var(--muted); font-weight: 500; }
.distance-select {
  background: transparent; border: 0;
  padding: 6px 8px;
  font-size: 0.85rem; color: var(--ink); cursor: pointer;
  font-family: inherit; font-weight: 600;
  appearance: none; -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2364748b' d='M5 6L0 0h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.distance-select:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 1px; border-radius: var(--r-pill); }
/* Su mobile il filtro distanza prende una riga intera per leggibilità */
@media (max-width: 560px) {
  .distance-filter {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 4px;
  }
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: white; border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px; font-size: 0.85rem;
  cursor: pointer; box-shadow: var(--shadow);
  transition: transform 0.1s ease;
}
.btn-ghost:hover { transform: translateY(-1px); }
.btn-ghost.active { background: var(--teal-500); color: white; border-color: var(--teal-500); }

/* ---------- Map ----------
   Sticky al top del viewport. La topbar fixed la copre solo parzialmente; quando
   si nasconde la mappa appare per intera senza muoversi. Il sheet sale sopra. */
.map {
  position: sticky;
  top: 0;
  height: 70vh;
  width: 100%;
  z-index: 1;
}
@media (min-width: 900px) {
  .map { height: 75vh; }
}

/* ---------- Sheet ---------- */
.sheet {
  background: var(--card);
  margin-top: -14px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -20px 40px rgba(15, 23, 42, 0.08);
  position: relative; z-index: 2;
  padding: 10px 14px calc(20px + var(--safe-bottom));
}
.sheet-handle {
  width: 44px; height: 5px; background: #cbd5e1;
  border-radius: 999px; margin: 6px auto 10px;
}
.sheet-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.sheet-header h2 { margin: 0; font-size: 1rem; font-weight: 600; }

/* Riga azioni "ultima spiaggia selezionata": due bottoni equi-larghi (50/50)
   subito sotto il sheet-header. */
.last-beach {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.last-beach[hidden] { display: none; }
.last-beach-btn {
  flex: 1 1 0; min-width: 0;     /* divisione equa dello spazio */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: white;
  color: var(--ink);
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.last-beach-btn:hover { background: rgba(15, 23, 42, 0.04); box-shadow: var(--shadow); }
.last-beach-btn:active { transform: scale(0.98); }

/* Bottone "Apri ...": accento teal, nome troncato con prefisso "Apri". */
.last-beach-open {
  background: var(--teal-50); color: var(--teal-700);
  border-color: rgba(15, 118, 110, 0.2);
}
.last-beach-open:hover { background: var(--teal-100); }
.last-beach-text {
  display: inline-flex; align-items: baseline; gap: 4px;
  min-width: 0; overflow: hidden;
}
.last-beach-prefix { flex-shrink: 0; opacity: 0.85; }
.last-beach-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Bottone "Rimuovi marker": tono neutro per distinguerlo come azione secondaria. */
.last-beach-clear {
  color: var(--muted);
}
.last-beach-clear:hover { color: var(--ink); }

.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* grid-auto-rows: 1fr → ogni riga è alta quanto la card più alta:
     tutte le card risultano della stessa altezza, su qualsiasi schermo. */
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 10px;
}
.card {
  height: 100%;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 15px 13px 19px; background: white;
  border: 0.5px solid var(--border); border-radius: var(--r-card);
  cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--c, var(--teal-500));
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
/* Nome SEMPRE per intero: nessun ellipsis, va a capo se serve.
   min-height = 2 righe → la riga di stato e le metriche partono alla stessa
   altezza in tutte le card, anche se il titolo è di 1 o 2 righe e ci sono
   badge "Lido" in più o in meno. */
.card-head .name {
  margin: 0; flex: 1; min-width: 0;
  font-weight: 600; font-size: 0.98rem; line-height: 1.25;
  min-height: calc(2 * 1.25em);
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
/* Badge in alto a destra (Lido + score): fuori dal flusso del titolo, così
   non spostano le righe sottostanti. */
.card-head-badges {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.card-head-badges:empty { display: none; }

.card-trend {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: 0.02em;
}
.card-trend.trend-aumento { background: #fef3c7; color: #b45309; }
.card-trend.trend-calo    { background: #dcfce7; color: #15803d; }

/* F05 — pallino score giornaliero sulla card. */
.card-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: var(--r-pill);
  color: #fff; font-weight: 700; font-size: 0.78rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* F05 — dettaglio: barra dei 5 sotto-punteggi del giorno. */
.score-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.score-pill {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-pill);
  font-size: 0.7rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(15, 23, 42, 0.04);
  color: var(--ink);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.score-pill-label { color: var(--muted); font-weight: 500; }
.score-pill-value {
  display: inline-block; min-width: 22px; text-align: right;
  letter-spacing: -0.02em;
}
.score-pill[data-state="hi"]  { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.25); }
.score-pill[data-state="mid"] { background: rgba(234, 179,   8, 0.12); border-color: rgba(234, 179,   8, 0.25); }
.score-pill[data-state="lo"]  { background: rgba(239,  68,  68, 0.12); border-color: rgba(239,  68,  68, 0.25); }

.card-state { display: flex; align-items: center; gap: 8px; }
.card-state-label {
  font-size: 1.02rem; font-weight: 700;
}
.card-state-wave {
  font-variant-numeric: tabular-nums; color: var(--muted);
  font-size: 0.85rem; font-weight: 500;
}
.card-state .card-trend { margin-left: auto; }

/* Riga onda: "al largo" (grezza) + "a riva" (efficace, coerente con la dicitura). */
.card-wave {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
  margin-top: -2px;
  font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.card-wave:empty { display: none; }
.card-wave-open { font-weight: 600; }
.card-wave-shore { font-weight: 700; color: var(--ink); }
.card-wave-sep { color: var(--border); }

/* Badge esposizione: stessa resa su card e modale. Tinte sobrie e informative:
   riparata = protetta (teal), esposta = battuta dall'onda (ambra), parziale = neutra. */
.exp-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap; flex-shrink: 0;
}
.exp-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.exp-riparata { background: rgba(14, 165, 165, 0.12); color: var(--teal-700); }
.exp-parziale { background: rgba(15, 23, 42, 0.06);  color: var(--muted); }
.exp-esposta  { background: rgba(245, 158, 11, 0.16); color: #b45309; }

/* Riga onda nella modale: stessa resa della card, in un riquadro più arioso. */
.detail-wave {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 14px 10px; padding: 10px 12px;
  background: rgba(15, 23, 42, 0.03); border-radius: var(--r-tile);
}
.detail-wave .card-wave { margin-top: 0; font-size: 0.85rem; }

/* Metriche: 3 tile uniformi (Acqua / Aria / Vento). */
.card-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
}
.metric {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 9px; min-width: 0;
  background: rgba(15, 23, 42, 0.035);
  border-radius: var(--r-tile);
}
.metric-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--muted);
  white-space: nowrap;
}
.metric-value {
  display: flex; align-items: center; gap: 4px;
  font-size: 1rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  color: var(--ink);
}
.metric-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; color: #475569; }
.metric-icon svg { width: 100%; height: 100%; }
.metric-sub {
  font-size: 0.66rem; color: var(--muted); line-height: 1.2;
  overflow-wrap: anywhere;
}
.metric-empty .metric-value { color: var(--muted); font-weight: 600; }
.metric-uv {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.58rem; font-weight: 700; color: #fff;
  padding: 1px 5px; border-radius: 999px;
  letter-spacing: 0.02em;
}

.card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 0.72rem; color: var(--muted);
  /* margin-top:auto → ancora il footer in basso, allineato fra tutte le card. */
  margin-top: auto;
  padding-top: 8px; border-top: 1px dashed #eef2f7;
}
.card-meta:empty { display: none; }
/* Distanza "da me": il dato più importante del footer → scuro + bold + pin. */
.card-dist {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums;
}
.card-dist svg { width: 13px; height: 13px; color: var(--teal-700); flex-shrink: 0; }
.card-costa { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.card-meta-sep { color: var(--border); }

/* Unità accanto al valore numerico nelle metriche (es. km/h del vento). */
.metric-unit {
  font-size: 0.62rem; font-weight: 600; color: var(--muted);
  margin-left: 2px; letter-spacing: 0;
}

/* Avviso comfort vento: confluisce nel sub della tile Vento (unico punto
   colore per l'avviso, niente badge che sfasa le card). */
.metric-sub-scomodo { color: #b45309; font-weight: 600; }
.metric-sub-impraticabile { color: #b91c1c; font-weight: 600; }

/* Box meteo nel modal */
.meteo-box {
  margin: 0 14px 8px; padding: 14px;
  background: white; border: 1px solid var(--border); border-radius: 12px;
}
.meteo-head {
  display: flex; align-items: center; gap: 14px;
}
.meteo-icon-big {
  width: 48px; height: 48px; color: #0c4a6e;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e0f2fe; border-radius: 12px; padding: 6px;
}
.meteo-icon-big svg { width: 100%; height: 100%; }
.meteo-summary { flex: 1; }
.meteo-label {
  font-weight: 600; font-size: 0.95rem;  color: #0c4a6e;
}
.meteo-facts {
  display: flex; gap: 12px; margin-top: 4px;
  font-size: 0.8rem; color: var(--muted);
}
.meteo-fact { font-variant-numeric: tabular-nums; }
.meteo-uv {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0;
  font-size: 0.78rem;
}
.meteo-uv-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); min-width: 88px;
}
.meteo-uv-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 22px; padding: 0 8px;
  border-radius: 999px; color: white; font-weight: 700; font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.meteo-uv-class { color: #334155; line-height: 1.3; }
.meteo-uv-picco .meteo-uv-class { font-weight: 500; }

/* Box vento nel modal */
.vento-box {
  margin: 0 14px 8px; padding: 14px;
  background: white; border: 1px solid var(--border); border-radius: 12px;
}
.vento-head {
  display: flex; align-items: center; gap: 14px;
}
.vento-arrow-wrap {
  width: 48px; height: 48px; flex-shrink: 0;
  background: #f1f5f9; border-radius: 12px; padding: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.vento-arrow {
  width: 100%; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease;
}
.vento-arrow svg { width: 100%; height: 100%; }
.vento-summary { flex: 1; }
.vento-value {
  font-size: 1.4rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  line-height: 1.1;
}
.vento-label {
  font-size: 0.82rem; color: var(--muted);  margin-top: 2px;
}
.vento-detail {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0;
  font-size: 0.82rem;
}
.vento-detail-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.vento-detail-value {
  font-weight: 600; font-variant-numeric: tabular-nums; color: #334155;
}
.vento-comfort {
  margin-top: 10px; padding: 8px 12px; border-radius: 10px;
  font-size: 0.85rem; font-weight: 600; text-align: center;
}
.vento-comfort.comfort-scomodo { background: #fef3c7; color: #92400e; }
.vento-comfort.comfort-impraticabile { background: #fee2e2; color: #991b1b; }


/* ========================================================================
   MOBILE POLISH — ottimizzazioni per schermi piccoli (≤ 380px tipo iPhone SE)
   ======================================================================== */

/* Topbar compatta su mobile */
@media (max-width: 480px) {
  .brand h1 { font-size: 1.05rem; }
  .updated { font-size: 0.7rem; }
  .topbar { padding-left: 14px; padding-right: 14px; }
  /* Summary: chip a colonna, 100% width, uguali su mobile */
  .summary {
    flex-direction: column; align-items: stretch;
    gap: 6px; margin: 8px 0 6px;
  }
  .summary .chip {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px; font-size: 0.85rem;
    justify-content: flex-start;
  }
  .summary .chip strong { flex-shrink: 0; min-width: 70px; }
  .summary .chip > span:nth-child(3) { flex: 1; }
  .summary .chip .muted { flex-shrink: 0; }
  .controls { gap: 8px; }
  .seg-btn { padding: 7px 12px; font-size: 0.8rem; min-height: 36px; }
  .btn-ghost { padding: 7px 12px; font-size: 0.8rem; min-height: 36px; }
  .toggle { font-size: 0.8rem; min-height: 36px; }

  /* Map più corta in altezza relativa per dare spazio alle card */
  .map { height: 85vh; }
  .sheet { padding: 8px 12px calc(20px + var(--safe-bottom)); }

  /* Card grid single column su mobile per max leggibilità.
     grid-auto-rows:1fr (regola base) mantiene tutte le card alla stessa altezza. */
  .cards { grid-template-columns: 1fr; gap: 8px; }
  .card { padding: 12px 14px 12px 16px; gap: 8px; }
  .card-head .name { font-size: 0.98rem; }
  .card-state-label { font-size: 0.98rem; }
  .card-state-wave { font-size: 0.82rem; }
  .card-metrics { gap: 6px; }
  .metric { padding: 7px 8px; }
  .card-meta { font-size: 0.7rem; padding-top: 7px; }

  /* Stat tile più compatte */
  .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; }
  .stat-tile { padding: 8px 6px; min-height: 84px; }
  .stat-label { font-size: 0.6rem; }
  .stat-value { font-size: 1.2rem; }
  .stat-unit { font-size: 0.75rem; }
  .stat-caption { font-size: 0.65rem; line-height: 1.2; }

  /* Meteo & vento box: padding leggero */
  .meteo-box, .vento-box { margin: 0 12px 8px; padding: 12px; }
  .meteo-icon-big, .vento-arrow-wrap { width: 44px; height: 44px; }
  .meteo-label { font-size: 0.9rem; }
  .meteo-facts { gap: 10px; font-size: 0.78rem; }
  .vento-value { font-size: 1.25rem; }
  .vento-label { font-size: 0.78rem; }

  /* UV rows: wrap quando schermo molto stretto */
  .meteo-uv { flex-wrap: wrap; gap: 6px; }
  .meteo-uv-label { min-width: 0; flex-basis: 100%; }
  .meteo-uv-class { flex: 1; }

  .kind-box { margin: 0 12px 4px; padding: 10px 12px; }
  .kind-title { font-size: 0.88rem; }
  .kind-desc { font-size: 0.76rem; }

  .forecast-section { padding: 12px 12px 6px; }
}

/* Schermi extra-piccoli (≤ 360px tipo iPhone SE 1ª gen, vecchi Android) */
@media (max-width: 360px) {
  .stat-value { font-size: 1.05rem; }
  .stat-tile { min-height: 78px; padding: 7px 4px; }
  .card-trend { font-size: 0.68rem; padding: 2px 6px; }
  /* Metriche più compatte su schermi molto stretti */
  .card-metrics { gap: 5px; }
  .metric { padding: 6px; }
  .metric-value { font-size: 0.92rem; }
  .metric-label { font-size: 0.58rem; letter-spacing: 0.02em; }
  .controls { flex-direction: column; align-items: stretch; }
  .seg, .btn-ghost { width: 100%; justify-content: center; }
  .toggle { justify-content: center; }
}

/* Touch target più grandi su mobile (HIG Apple ≥ 44pt) */
@media (max-width: 480px) {
  .detail-close { width: 36px; height: 36px; right: 19px; /* top:50% e translateY rimangono dalla regola base */ }
  .detail-hero { padding-right: 68px; }
}

/* ========================================================================
   INSTALL BANNER PWA — bottom sheet stile iOS con backdrop blur
   ======================================================================== */
.install-banner {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
  animation: installFade 0.3s ease;
}
.install-banner[hidden] { display: none; }
@keyframes installFade { from { opacity: 0; } to { opacity: 1; } }

.install-card {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdff 100%);
  border-radius: 24px;
  padding: 24px 22px calc(20px + var(--safe-bottom));
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
  animation: installSlide 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes installSlide {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.install-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0ea5a5, #22c55e, #eab308, #f97316, #0ea5a5);
}

.install-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(15, 23, 42, 0.06); border: 0;
  color: var(--ink); font-size: 0.9rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.install-close:active { background: rgba(15, 23, 42, 0.12); }

.install-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0ea5a5, #0891b2);
  color: white; border-radius: 18px;
  box-shadow: 0 8px 20px rgba(14, 165, 165, 0.35);
}
.install-icon svg { width: 28px; height: 28px; }

.install-title {
  margin: 0 0 6px; text-align: center;
  font-size: 1.25rem; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}
.install-sub {
  margin: 0 0 16px; text-align: center;
  font-size: 0.88rem; color: var(--muted); line-height: 1.45;
}

.install-benefits {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.install-benefits li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.85rem; color: #334155;
  background: rgba(255, 255, 255, 0.7);
  padding: 9px 12px; border-radius: 12px;
  border: 0.5px solid var(--border);
}
.ib-bullet {
  font-size: 1.1rem; flex-shrink: 0;
  width: 28px; text-align: center;
}

.install-cta {
  width: 100%; min-height: 50px;
  background: linear-gradient(135deg, #0ea5a5, #0891b2);
  color: white; border: 0; border-radius: 14px;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 18px rgba(14, 165, 165, 0.32);
}
.install-cta[hidden] { display: none; }
.install-cta:active { transform: scale(0.97); }

/* Step contestuali: 2 righe numerate (compaiono al click se prompt API non disponibile) */
.install-hint {
  margin: 0 0 14px;
  padding: 14px;
  background: rgba(14, 165, 165, 0.07);
  border: 1px solid rgba(14, 165, 165, 0.18);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
  animation: hintFade 0.25s ease;
}
.install-hint[hidden] { display: none; }
@keyframes hintFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ios-step {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.88rem; color: #0f172a; line-height: 1.4;
}
.ios-step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0ea5a5; color: white;
  border-radius: 50%; font-weight: 700; font-size: 0.85rem;
}
.ios-step strong { color: #0c4a6e; }

@media (max-width: 380px) {
  .install-card { padding: 20px 18px calc(16px + var(--safe-bottom)); border-radius: 22px; }
  .install-title { font-size: 1.15rem; }
  .install-sub { font-size: 0.82rem; }
  .install-benefits li { font-size: 0.8rem; padding: 8px 10px; }
}

.state-loading, .state-empty, .state-error {
  padding: 30px 12px; text-align: center; color: var(--muted);
}

/* ---------- Map markers ---------- */
.mc-pin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Pin "lido": stesso colore del mare ma forma quadrata (border-radius ridotto)
   e contorno più marcato, così a colpo d'occhio si distingue dalla spiaggia
   naturale rotonda. */
.mc-pin.mc-pin-lido {
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0,0,0,0.15);
}

/* POI non balneari (lidi, scuole, noleggi, charter): pallino piccolo e GRIGIO,
   mai colorato per stato del mare. Informazione contestuale, non invadente. */
.mc-poi {
  width: 12px; height: 12px; border-radius: 50%;
  background: #94a3b8;            /* slate-400: neutro, fuori dalla palette mare */
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  opacity: 0.92;
}

.card-lido-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  /* Tag neutro: è una categoria, non un dato → niente colore che compete con
     l'accento di stato. */
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}

.hero-lido-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  color: white;
  font-size: 12px; font-weight: 600;
  vertical-align: middle;
}

#count {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.count-line { display: block; }

.filter-toggle {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink, #0f172a);
}
.filter-toggle input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--teal-500, #14b8a6);
  cursor: pointer;
}

/* Chip filtro categoria (Spiagge, Scogliere, Lidi, Scuole/noleggi, Marina/charter).
   Toggle indipendenti: attivo = pieno teal, spento = contorno neutro. */
.cat-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cat-chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0);
  background: white;
  color: var(--muted, #64748b);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cat-chip.active {
  background: var(--teal-500, #14b8a6);
  border-color: var(--teal-500, #14b8a6);
  color: white;
}

/* Pin "spotlight": visibile sopra il cluster quando il dettaglio e' aperto.
   Pulsa per attirare l'attenzione, e ha un anello esterno che lo distingue
   dai pin normali. Il colore "vero" del mare e' nel centro. */
.mc-pin-spotlight {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c, var(--teal-500));
  border: 4px solid white;
  box-shadow: 0 0 0 3px var(--c, var(--teal-500)),
              0 6px 18px rgba(0, 0, 0, 0.35);
  animation: spotlightPulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.mc-pin-spotlight::after {
  /* Alone esterno che si espande per richiamo visivo. */
  content: '';
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: var(--c, var(--teal-500));
  opacity: 0.35;
  animation: spotlightRipple 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  z-index: -1;
}
@keyframes spotlightPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes spotlightRipple {
  0%   { transform: scale(1);   opacity: 0.45; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ---------- Modal bottom-sheet ---------- */
.modal {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal[hidden] { display: none !important; }
body.modal-open { overflow: hidden; }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.25s ease;
}
.modal.open .modal-backdrop { opacity: 1; }

.modal-sheet {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column;
  overflow: hidden;
  padding-bottom: var(--safe-bottom);
}
.modal.open .modal-sheet { transform: translateY(0); }
.modal-sheet.dragging { transition: none; }

.modal-handle-area {
  flex-shrink: 0;
  padding: 10px 0 6px;
  display: flex; justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.modal-handle-area:active { cursor: grabbing; }
.modal-handle {
  width: 40px; height: 5px;
  background: #cbd5e1;
  border-radius: 999px;
}

/* X di chiusura: centrata sull'asse verticale dell'hero, +5px di margine a destra */
.detail-close {
  position: absolute;
  top: 50%; right: 21px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9); border: 0;
  width: 32px; height: 32px;
  border-radius: 50%; font-size: 0.95rem;
  cursor: pointer; z-index: 10;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}
.detail-close:active { background: white; }

.modal-content {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Scrollbar nascosta, scroll funzionante */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
.modal-content::-webkit-scrollbar { display: none; }  /* Chrome/Safari/Edge */

/* Desktop: modal centrato, slide-in da poco più sotto */
@media (min-width: 600px) {
  .modal { align-items: center; padding: 24px; }
  .modal-sheet {
    border-radius: 20px;
    max-width: 540px;
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  }
  .modal.open .modal-sheet { transform: translateY(0) scale(1); opacity: 1; }
}
.detail-hero {
  position: relative;
  padding: 18px 64px 14px 20px; /* spazio a destra per la X (32px + 5px + 16px gap) */
  color: white;
}
.detail-hero h3 { margin: 0; font-size: 1.35rem; font-weight: 700; }
.detail-hero .hero-coast {
  margin-top: 2px; font-size: 0.82rem; opacity: 0.9;
}
.detail-hero-text { min-width: 0; }

/* CTA "Naviga con Maps" — pillola prominente subito sotto l'hero. */
/* Due CTA affiancate (Google / Apple), sempre su una riga, anche su mobile. */
.detail-nav {
  display: flex; gap: 8px;
  margin: 12px 14px 0;
}
.detail-navigate {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px;
  background: var(--teal-500); color: white;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 0.95rem;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(14, 165, 165, 0.28);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.detail-navigate:hover {
  background: var(--teal-700);
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.32);
}
.detail-navigate:active { transform: scale(0.98); }
.detail-navigate svg { flex-shrink: 0; }
/* Apple Mappe: bottone scuro per distinguere il servizio mantenendo coerenza. */
.detail-navigate-apple {
  background: #1d1d1f;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.24);
}
.detail-navigate-apple:hover {
  background: #000;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3);
}
/* Su mobile solo "Naviga" + icona; da ≥480px appendiamo il nome del servizio. */
.nav-service { display: none; }
@media (min-width: 480px) {
  .nav-service { display: inline; }
}

/* Stat grid: tre tile compatte */
.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 14px;
}
.stat-tile {
  background: #f8fafc; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 8px; text-align: center; min-height: 92px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.stat-tile-empty { opacity: 0.7; }
.stat-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.stat-value {
  font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  line-height: 1.1; margin: 2px 0;
}
.stat-unit { font-size: 0.85rem; font-weight: 500; opacity: 0.7; }
.stat-caption {
  font-size: 0.7rem; line-height: 1.25; color: #475569;
  
}
.stat-value.trend-aumento { color: #b45309; }
.stat-value.trend-calo    { color: #15803d; }
.stat-value.trend-stabile { color: #64748b; }

/* Box tipo onda */
.kind-box {
  margin: 0 14px 4px; padding: 12px 14px;
  background: linear-gradient(135deg, #f0f9ff, #ecfeff);
  border: 1px solid #bae6fd; border-radius: 12px;
  display: flex; align-items: flex-start; gap: 12px;
}
.kind-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.kind-text { flex: 1; }
.kind-title { font-weight: 700; font-size: 0.92rem; color: #0c4a6e; }
.kind-desc { font-size: 0.8rem; color: #475569; margin-top: 2px; line-height: 1.35; }

/* Forecast section: card-per-giorno mobile-first */
.forecast-section { padding: 14px 14px 6px; }
.forecast-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); padding: 0 2px 8px;
}
.forecast { padding: 0; display: grid; gap: 10px; }

.day-card {
  background: white;
  border: 0.5px solid var(--border);
  border-radius: var(--r-tile);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-sm);
}
.day-card-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; min-width: 0;
}
.day-card-name {
  font-weight: 700; font-size: 0.95rem; 
  color: var(--ink); flex-shrink: 0;
}
.day-card-wave-num {
  font-size: 0.75rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.day-card-bar {
  height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden;
  position: relative;
}
.day-card-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, white));
}

.day-card-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}
.day-tile {
  background: #f8fafc;
  border-radius: 10px;
  padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0;
}
.day-tile-icon { display: inline-flex; width: 22px; height: 22px; }
.day-tile-icon svg { width: 100%; height: 100%; }
.day-tile-pill {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 1px;
  min-width: 38px; padding: 3px 8px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  line-height: 1.1;
}
.day-tile-unit { font-size: 0.6rem; font-weight: 500; opacity: 0.8; margin-left: 1px; }
.day-tile-label {
  font-size: 0.65rem; color: var(--muted); text-align: center;
   line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; font-variant-numeric: tabular-nums;
}

.detail-disclaimer {
  padding: 10px 18px 14px; font-size: 0.7rem; color: var(--muted); line-height: 1.4;
}
.forecast-bar {
  height: 12px; border-radius: 999px; background: #eef2f7; overflow: hidden;
  position: relative;
}
.forecast-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, white));
}
.forecast-meta { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Toast transitorio (sostituisce gli alert nativi) ---------- */
.mc-toast {
  position: fixed;
  left: 50%; bottom: calc(20px + 56px + 14px + var(--safe-bottom)); /* sopra il FAB */
  transform: translate(-50%, 16px);
  z-index: 950;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff; font-size: 0.88rem; font-weight: 600; line-height: 1.35;
  text-align: center;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.mc-toast.is-error { background: rgba(153, 27, 27, 0.94); }

/* ---------- Banner "Aggiornamento disponibile" ----------
   Compare quando il SW ha installato una nuova versione e attende il consenso.
   Toccando il corpo si applica l'update; toccando la X si rimanda. */
.update-banner {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(20px + 52px + 16px + var(--safe-bottom)); /* sopra il FAB */
  max-width: 460px; margin: 0 auto;
  z-index: 850;  /* sopra FAB (800), sotto modali (1500) */
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 12px 16px;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  color: white; font-size: 0.9rem; font-weight: 600;
  border-radius: var(--r-pill);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: updateBannerSlideIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.update-banner.is-dismissed { opacity: 0; transform: translateY(20px); }
.update-banner.is-loading { opacity: 0.7; pointer-events: none; }
.update-banner.is-loading .update-banner-cta::after { content: '…'; }
@keyframes updateBannerSlideIn {
  from { transform: translateY(140%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.update-banner-icon { display: inline-flex; flex-shrink: 0; }
.update-banner-text {
  flex: 1; min-width: 0; line-height: 1.25;
  display: flex; flex-direction: column;
}
.update-banner-cta {
  font-size: 0.78rem; font-weight: 700;
  opacity: 0.92;
  text-decoration: underline; text-underline-offset: 2px;
}
.update-banner-dismiss {
  background: rgba(255, 255, 255, 0.18); border: 0;
  color: white;
  width: 26px; height: 26px; padding: 0;
  border-radius: 50%; cursor: pointer;
  font-size: 0.85rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.update-banner-dismiss:hover { background: rgba(255, 255, 255, 0.28); }
@media (max-width: 480px) {
  .update-banner { bottom: calc(20px + 48px + 14px + var(--safe-bottom)); }
}

/* ---------- F06 — FAB "Dove vado oggi?" ---------- */
.fab-recommend-wrap {
  position: fixed;
  right: 16px;
  bottom: calc(20px + var(--safe-bottom));
  z-index: 800;
  display: flex; flex-direction: column; align-items: flex-end;
}
.fab-recommend {
  display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px;
  padding: 9px 18px;
  border: none; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  color: #fff; font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.fab-recommend:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.28); }
.fab-recommend:active { transform: translateY(0); }
.fab-recommend:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal-500) 60%, white);
  outline-offset: 2px;
}
.fab-recommend-main {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.fab-recommend-note {
  color: #fff;
  font-size: 0.68rem; font-weight: 600; line-height: 1.1;
  opacity: 0.9; text-align: right;
}
.fab-emoji { font-size: 1.15rem; line-height: 1; }
.fab-recommend.is-loading { opacity: 0.7; pointer-events: none; }
.fab-recommend.is-loading .fab-label::after {
  content: '…';
}
@media (max-width: 480px) {
  .fab-recommend-wrap { right: 12px; }
  .fab-recommend { padding: 7px 14px; font-size: 0.9rem; }
}

/* Banner "Per te oggi" sopra l'hero del modal dettaglio. */
.recommend-banner {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #78350f;
  padding: 10px 14px;
  font-size: 0.9rem; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid rgba(120, 53, 15, 0.12);
}
.recommend-banner-text { line-height: 1.35; }
.recommend-banner-meta { font-weight: 500; opacity: 0.85; display: block; font-size: 0.78rem; margin-top: 2px; }
.recommend-banner-more {
  background: #fff; color: var(--teal-700);
  border: 1px solid rgba(15, 118, 110, 0.25);
  border-radius: var(--r-pill);
  padding: 6px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.recommend-banner-more:hover { background: var(--teal-50); }

/* F06 — Vista "Altre migliori" dentro lo stesso bottom-sheet del dettaglio.
   Layout coerente col detail-modal: header con "Indietro" + X, titolo, lista. */
.recommend-list-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 16px 8px;
  background: white;
}
.recommend-list-header .detail-close {
  position: static;
  transform: none;
}
.recommend-list-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0;
  color: var(--teal-700); font-weight: 600; font-size: 0.9rem;
  cursor: pointer; padding: 6px 10px; margin-left: -10px;
  border-radius: var(--r-pill);
  font-family: inherit;
}
.recommend-list-back:hover { background: var(--teal-50); }
.recommend-list-back:active { transform: scale(0.96); }

.recommend-list-title { padding: 0 16px 12px; }
.recommend-list-title h3 {
  margin: 0 0 4px; font-size: 1.15rem; font-weight: 700;
}
.recommend-list-title p {
  margin: 0; font-size: 0.85rem; line-height: 1.4;
}

.recommend-list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 16px 14px;
}
.recommend-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: white;
  box-shadow: var(--shadow-sm);
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
}
.recommend-list-item:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.recommend-list-item:active { transform: scale(0.99); }
.recommend-list-item.is-current {
  border: 2px solid var(--teal-500);
  background: var(--teal-50);
}
.recommend-list-score {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: white; font-weight: 700; font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.recommend-list-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.recommend-list-name {
  font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recommend-list-meta { font-size: 0.78rem; }
.recommend-list-arrow {
  color: var(--muted); font-size: 1.5rem; line-height: 1; flex-shrink: 0;
  font-weight: 300;
}
.recommend-list-badge {
  background: var(--teal-500); color: white;
  font-size: 0.68rem; font-weight: 700;
  padding: 4px 8px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap; flex-shrink: 0;
}

/* F06 — Secondo trigger di "Dove vado oggi?" dentro la modale filtri. */
.filters-recommend {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; margin-top: 4px;
  border: none; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  color: #fff; font-weight: 700; font-size: 0.95rem; cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
}
.filters-recommend:hover { transform: translateY(-1px); }
.filters-recommend:active { transform: translateY(0); }
.filters-recommend-note {
  margin: 6px 0 2px; text-align: center; line-height: 1.35;
}

/* ---------- Pagine di contenuto (privacy, guida, faq, …) ---------- */
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(20px + var(--safe-top)) 18px calc(40px + var(--safe-bottom));
}
.page-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 18px; padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--border);
  color: var(--teal-700); font-weight: 600; font-size: 0.9rem;
  text-decoration: none; box-shadow: var(--shadow-sm);
}
.page-back:active { transform: scale(0.97); }
.page h1 {
  font-size: 1.7rem; line-height: 1.2; margin: 0 0 6px;
}
.page .page-lead {
  color: var(--muted); font-size: 1rem; line-height: 1.5; margin: 0 0 22px;
}
.page h2 {
  font-size: 1.2rem; margin: 28px 0 10px; line-height: 1.3;
}
.page h3 { font-size: 1.02rem; margin: 18px 0 6px; }
.page p, .page li {
  line-height: 1.6; color: var(--ink); font-size: 0.97rem;
}
.page ul, .page ol { padding-left: 22px; margin: 8px 0; }
.page li { margin: 4px 0; }
.page a { color: var(--teal-700); }
.page .page-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 16px 18px; margin: 14px 0;
  box-shadow: var(--shadow-sm);
}
.page .page-note {
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  border-radius: 12px; padding: 10px 14px; font-size: 0.9rem; line-height: 1.45;
  margin: 16px 0;
}
.page .updated { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }
.page table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.92rem; }
.page th, .page td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.page th { color: var(--muted); font-weight: 600; }

/* ---------- Sezione SEO/intro (home) ---------- */
.seo-intro {
  max-width: 850px;
  margin: 24px auto 0;
  padding: 0 16px;
}
.seo-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdff 100%);
  border: 0.5px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 22px 20px 18px;
}
.seo-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0ea5a5, #22c55e, #eab308, #f97316, #0ea5a5);
}
.seo-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.seo-icon {
  flex-shrink: 0; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0ea5a5, #0891b2);
  color: #fff; border-radius: 14px;
  box-shadow: 0 8px 18px rgba(14, 165, 165, 0.32);
}
.seo-icon svg { width: 24px; height: 24px; }
.seo-head h2 {
  margin: 0; font-size: 1.12rem; line-height: 1.25; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink);
}
.seo-card p {
  font-size: 0.92rem; line-height: 1.6; color: var(--muted); margin: 0 0 12px;
}
.seo-card strong { color: var(--ink); font-weight: 600; }

.seo-activities {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
}
.seo-activities li {
  font-size: 0.82rem; font-weight: 600; color: var(--teal-700);
  background: var(--teal-50); border: 0.5px solid var(--teal-100);
  padding: 5px 11px; border-radius: var(--r-pill);
}

.seo-links {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.seo-link {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--r-tile);
  background: rgba(255, 255, 255, 0.75); border: 0.5px solid var(--border);
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.seo-link:active { transform: scale(0.97); }
.seo-link:hover { box-shadow: var(--shadow); }
.seo-link-emoji { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.seo-link-title {
  display: block; font-size: 0.9rem; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}
.seo-link-sub { display: block; font-size: 0.74rem; color: var(--muted); line-height: 1.2; }

.seo-foot {
  margin: 0 !important; font-size: 0.8rem !important; color: var(--muted) !important;
}
.seo-foot a { color: var(--teal-700); }

@media (max-width: 560px) {
  .seo-links { grid-template-columns: 1fr; }
  .seo-link-sub { display: block; }
}

/* ---------- Footer ---------- */
.footer-nav {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  margin: 4px 0 12px;
}
.footer-nav a {
  color: var(--teal-700); font-size: 0.85rem; text-decoration: none; font-weight: 600;
}
.footer-nav a:hover { text-decoration: underline; }
.footer {
  padding: 16px 16px calc(20px + var(--safe-bottom));
  text-align: center; max-width: 720px; margin: 0 auto;
}
.disclaimer {
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  border-radius: 12px; padding: 10px 14px; font-size: 0.85rem; margin: 12px 0 8px;
  line-height: 1.4;
}