/* =============================================
   DESIGN SYSTEM — VENTURA & LODO
   Stile: Botanical Editorial · verde bottiglia, salvia, rosa antico
   Font: Nunito (singolo, tutto il sito)
   Mobile-first: base a 375 px
   ============================================= */

/* --- Variabili --- */
:root {
  --carta:        #FFFFFF;
  --carta-2:      #F2F2F7;
  --inchiostro:   #1E3A2E;
  --corpo:        #3B4A40;
  --tenue:        #6B7164;   /* scurito da #82897A per raggiungere contrasto AA (4.85:1) */
  --oro:          #A6854A;
  --oro-rgb:      166, 133, 74;
  --oro-chiaro:   #C2A368;
  --salvia:       #7E9582;
  --salvia-tenue: #DCE2D5;
  --rosa:         #C98777;
  --rosa-tenue:   #ECD8D1;
  --azzurro:       #4A7FA6;
  --errore:        #8b3a3a;
  --errore-chiaro: #b04040;
  --riga:         rgba(30,58,46,.14);
  --riga-forte:   rgba(30,58,46,.30);

  /* Varianti più scure SOLO per testo/icone, per rispettare il contrasto WCAG AA */
  --oro-testo:    #856A3B;   /* oro leggibile come testo (4.86:1 su bianco) */
  --salvia-testo: #607463;   /* salvia leggibile come testo (4.81:1 su bianco) */
  --rosa-testo:   #A95743;   /* rosa leggibile come testo (4.85:1 su bianco) */

  --font-titoli: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-testo:  'Nunito', system-ui, -apple-system, sans-serif;

  --spazio-xxs: 0.25rem;
  --spazio-xs:  0.625rem;
  --spazio-s:   1rem;
  --spazio-m:   2rem;
  --spazio-l:   3rem;
  --spazio-xl:  4.5rem;

  --raggio:        6px;
  --transizione:   0.18s ease;
  --larghezza-max: 480px;
}

/* --- Modalità serale --- */
[data-tema="sera"] {
  --carta:        #000000;
  --carta-2:      #111C14;
  --inchiostro:   #F0EADB;
  --corpo:        #C8C9B8;
  --tenue:        #828978;   /* migliorato da #7A8070 per contrasto leggermente superiore */
  --oro:          #C2A368;
  --oro-rgb:      194, 163, 104;
  --oro-chiaro:   #D4B880;
  --salvia:       #8EAA94;
  --salvia-tenue: rgba(142,170,148,.18);
  --rosa:         #C98777;
  --rosa-tenue:   rgba(201,135,119,.18);
  --azzurro:       #6898BC;
  --errore:        #cf7070;
  --errore-chiaro: #d46060;
  --riga:         rgba(240,234,219,.12);
  --riga-forte:   rgba(240,234,219,.28);

  /* Nel tema scuro le varianti testo coincidono con i colori base (già abbastanza chiari) */
  --oro-testo:    var(--oro);
  --salvia-testo: var(--salvia);
  --rosa-testo:   var(--rosa);
}

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

/* L'attributo hidden prevale su qualsiasi display CSS */
[hidden] { display: none !important; }

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--carta);
  color: var(--corpo);
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  overscroll-behavior-y: none;
}


/* --- Interruttore tema giorno/sera --- */
.interruttore-tema {
  background: var(--carta);
  border: 1px solid var(--riga-forte);
  border-radius: 99px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tenue);
  font-size: 0.9rem;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: background-color var(--transizione), color var(--transizione);
}

.interruttore-tema:hover {
  color: var(--inchiostro);
}

/* In modalità giorno: mostra luna, nascondi sole */
.interruttore-tema .icona-sole { display: none; }

/* In modalità serale: nascondi luna, mostra sole */
[data-tema="sera"] .interruttore-tema .icona-luna { display: none; }
[data-tema="sera"] .interruttore-tema .icona-sole { display: block; }

/* --- Tipografia base --- */
h1, h2, h3 {
  font-family: var(--font-titoli);
  color: var(--inchiostro);
  font-weight: 700;
  line-height: 1.2;
}

p, li, a {
  font-family: var(--font-testo);
}

/* Etichetta: maiuscoletto spaziato */
.etichetta {
  font-family: var(--font-testo);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
  font-style: normal;
}

/* --- Ornamento: filo dorato --- */
.ornamento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0.5rem auto;
  width: 100%;
  max-width: 300px;
}

.filo-oro {
  flex: 1;
  height: 1px;
  background-color: var(--oro);
}

.diamante-oro {
  font-size: 0.45rem;
  color: var(--oro-testo);
  padding: 0 0.6rem;
  line-height: 1;
}

/* Riga divisoria orizzontale semplice */
.riga-divisoria {
  width: 100%;
  height: 1px;
  background-color: var(--riga);
  border: none;
  margin: var(--spazio-m) 0;
}

/* --- Pagina home --- */
.pagina-home {
  width: 100%;
  max-width: var(--larghezza-max);
  padding: var(--spazio-s) var(--spazio-m) var(--spazio-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex: 1;
}

/* --- Intestazione --- */
.intestazione {
  text-align: center;
  padding-top: 0;
  width: 100%;
}

.intestazione > .etichetta {
  display: block;
  margin-bottom: var(--spazio-xs);
  font-size: 1rem;
  letter-spacing: 0.22em;
}

.nomi {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(2rem, 8.5vw, 3.2rem);
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--inchiostro);
  margin: var(--spazio-xs) 0;
  font-weight: 500;
  max-width: 100%;
}

.data-matrimonio {
  font-family: var(--font-testo);
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-top: var(--spazio-xs);
}

/* --- Foto coppia (segnaposto) --- */
.hero-foto {
  width: min(280px, 72vw);
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  background: color-mix(in srgb, var(--inchiostro) 6%, var(--carta));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-xs);
  margin: var(--spazio-m) auto 0.5rem;
  position: relative;
  overflow: hidden;
}

.hero-foto-ico {
  display: flex;
  color: color-mix(in srgb, var(--inchiostro) 22%, var(--carta));
}

.hero-foto-testo {
  font-size: 0.8rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--inchiostro) 32%, var(--carta));
  text-align: center;
  padding: 0 var(--spazio-s);
}

.hero-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-foto--con-foto .hero-foto-ico,
.hero-foto--con-foto .hero-foto-testo { display: none; }
.hero-foto--con-foto { background: transparent; }

.hero-foto-edit-btn {
  position: absolute;
  bottom: var(--spazio-xs);
  right: var(--spazio-xs);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.hero-foto-edit-btn::after { content: ''; position: absolute; inset: -8px; }

/* --- Card video cerimonia (home) --- */
#home-video-cerimonia { width: 100%; }
.home-cer-card {
  border-radius: 20px;
  background: #1E3A2E;
  border: 1px solid rgba(201,168,76,.2);
  box-shadow: 0 6px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05);
  padding: var(--spazio-m) 62px var(--spazio-m) var(--spazio-m);
  display: flex;
  align-items: center;
  gap: var(--spazio-m);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, opacity 0.12s;
}
.home-cer-card:active { transform: scale(0.982); opacity: 0.88; }
.home-cer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(201,168,76,.22) 0%, transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, transparent 45%);
  pointer-events: none;
}
.home-cer-card--vuota { opacity: 0.65; }

.home-cer-play-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,168,76,.7);
  background: rgba(201,168,76,.15);
  box-shadow: 0 0 14px rgba(201,168,76,.22);
  color: rgba(240,234,219,.96);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding-left: 3px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Angolo top-right */
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
}
.home-cer-testi {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; flex: 1;
}
.home-cer-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(201,168,76,.82);
}
.home-cer-titolo {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  font-weight: 400;
  color: rgba(240,234,219,.96);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.home-cer-sub {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(240,234,219,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pulsanti staff under-card */
.home-cer-staff-azioni {
  display: flex; gap: 8px; padding: 10px 0 0; justify-content: center;
  flex-wrap: wrap; align-items: center;
}
.home-cer-staff-label {
  width: 100%; text-align: center;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tenue);
  margin-bottom: 2px;
}
.home-cer-staff-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  flex: 1; max-width: 170px;
  background: color-mix(in srgb, var(--inchiostro) 6%, var(--carta));
  border: 1px solid var(--riga);
  border-radius: 100px; padding: 6px 14px;
  font-size: 0.74rem; font-weight: 600; color: var(--tenue);
  cursor: pointer; min-height: 34px; white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.home-cer-staff-btn:hover {
  color: var(--inchiostro); border-color: var(--riga-forte);
  background: color-mix(in srgb, var(--inchiostro) 11%, var(--carta));
}
[data-tema="sera"] .home-cer-staff-btn {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
}
[data-tema="sera"] .home-cer-staff-btn:hover {
  background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22);
  color: var(--inchiostro);
}

/* ── Card cerimonia con video-preview ──────────────────────── */
/* Aspect-ratio cinematografico, play centrato, testo in basso */
.home-cer-card--con-preview {
  padding: 0;
  aspect-ratio: 3/2;
  min-height: unset;
}
@media (min-width: 640px) {
  .home-cer-card--con-preview { aspect-ratio: 16/7; }
}
@media (min-width: 1024px) {
  .home-cer-card--con-preview { aspect-ratio: 16/6; }
}

/* Doppio gradient: vignette top + gradient bottom per testo */
.home-cer-card--con-preview::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, transparent 38%),
    linear-gradient(0deg,   rgba(0,0,0,.78) 0%, transparent 60%);
  z-index: 1;
}

/* Video cover */
.home-cer-preview-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* Play button — angolo top-right, frosted glass */
.home-cer-card--con-preview .home-cer-play-btn {
  top: 14px; right: 16px; left: unset;
  transform: none;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1.5px solid rgba(255,255,255,.45);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
  color: #fff;
  padding-left: 3px;
  transition: transform 0.12s, background 0.12s, opacity 0.12s;
}
.home-cer-card--con-preview:active .home-cer-play-btn {
  transform: scale(0.88);
  opacity: 0.85;
}
@media (min-width: 640px) {
  .home-cer-card--con-preview .home-cer-play-btn { width: 52px; height: 52px; }
}

/* CTA top-left — "Anteprima" + "Vedi intero" (o "Vedi il video") */
.home-cer-cta-top {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
.home-cer-cta-ant {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 15px 7px 11px;
  background: rgba(255,255,255,.93);
  border: none;
  border-radius: 100px;
  color: #111;
  font-family: var(--font-testo);
  font-size: 0.78rem;
  font-weight: 700;
  min-height: 34px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.12s, transform 0.10s;
}
.home-cer-cta-ant:active { transform: scale(0.93); background: rgba(255,255,255,.70); }
.home-cer-cta-full {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 100px;
  color: rgba(255,255,255,.92);
  font-family: var(--font-testo);
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 34px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.12s, transform 0.10s, opacity 0.55s ease;
}
.home-cer-cta-full:active { transform: scale(0.93); background: rgba(0,0,0,.50); }
/* nascosto finché l'anteprima non è quasi finita */
.home-cer-cta-full--nascosto { opacity: 0 !important; pointer-events: none !important; }
@media (min-width: 640px) {
  .home-cer-cta-top { top: 16px; left: 16px; }
  .home-cer-cta-ant { font-size: 0.82rem; padding: 8px 17px 8px 13px; }
  .home-cer-cta-full { font-size: 0.82rem; padding: 8px 16px; }
}

/* Testi — bottom-left sovrapposti */
.home-cer-card--con-preview .home-cer-testi {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 52px var(--spazio-m) 16px;
  background: none;
  gap: 2px;
}
.home-cer-card--con-preview .home-cer-label { color: rgba(201,168,76,.92); }
.home-cer-card--con-preview .home-cer-titolo {
  color: #fff; font-size: 1.15rem;
}
.home-cer-card--con-preview .home-cer-sub { color: rgba(255,255,255,.6); }
@media (min-width: 640px) {
  .home-cer-card--con-preview .home-cer-testi { padding: 68px var(--spazio-l) var(--spazio-m); }
  .home-cer-card--con-preview .home-cer-titolo { font-size: 1.45rem; }
}


/* Barra avanzamento card cerimonia */
.home-cer-scrubber {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 22px;
  z-index: 3;
  cursor: pointer;
  touch-action: none;
}
.home-cer-scrubber::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  background: rgba(255,255,255,.15);
}
.home-cer-scrubber-fill {
  position: absolute;
  bottom: 0; left: 0;
  height: 5px;
  width: 0%;
  background: rgba(201,168,76,.80);
  pointer-events: none;
}

/* ── Picker copertina ──────────────────────────────────────── */
.cer-poster-picker {
  background: var(--carta-2);
  border-radius: 20px;
  padding: var(--spazio-m);
  display: flex; flex-direction: column; gap: var(--spazio-s);
  align-items: stretch;
  box-shadow: 0 2px 18px rgba(0,0,0,.07);
}
.cer-poster-guida {
  font-size: 0.82rem; color: var(--tenue);
  text-align: center; margin: 0; line-height: 1.55;
}
.cer-video-wrap {
  position: relative; border-radius: 12px; overflow: hidden; background: #000;
}
.cer-picker-video {
  width: 100%; aspect-ratio: 16/9; object-fit: contain; display: block;
}
/* Badge timestamp sovrapposto al video */
.cer-frame-badge {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 0.72rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 3px 10px; border-radius: 100px;
  pointer-events: none; letter-spacing: 0.02em;
}
.cer-poster-salta { align-self: center; font-size: 0.78rem; }
[data-tema="sera"] .cer-poster-picker {
  background: var(--carta-2);
  box-shadow: 0 2px 18px rgba(0,0,0,.22);
}

/* ── Editor copertina (poster) ───────────────────────────────── */
.cer-poster-editor {
  display: flex; flex-direction: column; gap: 10px;
}
.cer-poster-ts-row {
  display: flex; align-items: baseline; gap: 4px;
  background: color-mix(in srgb, var(--inchiostro) 5%, var(--carta));
  border: 1px solid var(--riga); border-radius: 12px;
  padding: 8px 16px;
}
.cer-poster-ts-main {
  font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--inchiostro); letter-spacing: 0.01em; line-height: 1;
}
.cer-poster-ts-dec {
  font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--oro); letter-spacing: 0.01em;
}
.cer-poster-ts-sep { color: var(--riga-forte); font-size: 1rem; margin: 0 4px; }
.cer-poster-state {
  margin-left: auto; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--tenue); align-self: center;
  text-transform: uppercase;
}
.cer-poster-state[data-playing="1"] { color: var(--salvia-testo); }

.cer-poster-scrub-wrap { padding: 2px 0; }
.cer-poster-scrub {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; border-radius: 100px;
  background: var(--riga-forte); outline: none; cursor: pointer;
}
.cer-poster-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--inchiostro); border: 2px solid var(--carta);
  box-shadow: 0 1px 5px rgba(0,0,0,.25); cursor: pointer;
}
.cer-poster-scrub::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--inchiostro); border: 2px solid var(--carta);
  box-shadow: 0 1px 5px rgba(0,0,0,.25); cursor: pointer;
}

.cer-poster-controls {
  display: flex; justify-content: center;
}
.cer-poster-ctrl-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--inchiostro); color: var(--carta);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.cer-poster-ctrl-btn:active { opacity: .75; }

.cer-poster-nudge-group {
  display: flex; flex-direction: column; gap: 4px;
}
.cer-poster-nudge-label {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--tenue); padding: 0 2px;
}
.cer-poster-nudge-row {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 4px;
}
.cer-poster-nudge-btn {
  border: 1px solid var(--riga); border-radius: 10px;
  font-weight: 700; color: var(--corpo);
  padding: 7px 2px; cursor: pointer; white-space: nowrap;
  transition: background .1s, border-color .1s;
}
.cer-poster-nudge-coarse {
  font-size: 0.65rem;
  background: color-mix(in srgb, var(--inchiostro) 5%, var(--carta));
  min-height: 34px;
}
.cer-poster-nudge-fine {
  font-size: 0.7rem;
  background: color-mix(in srgb, var(--oro) 7%, var(--carta));
  border-color: color-mix(in srgb, var(--oro) 25%, var(--carta));
  min-height: 36px;
}
.cer-poster-nudge-btn:active {
  background: color-mix(in srgb, var(--oro) 20%, var(--carta));
  border-color: var(--oro);
}
[data-tema="sera"] .cer-poster-ts-row { background: rgba(255,255,255,.05); }
[data-tema="sera"] .cer-poster-nudge-coarse { background: rgba(255,255,255,.06); }
[data-tema="sera"] .cer-poster-nudge-fine { background: rgba(201,168,76,.10); border-color: rgba(201,168,76,.3); }
[data-tema="sera"] .cer-poster-scrub { background: rgba(255,255,255,.15); }

/* ── Picker anteprima (hook) ─────────────────────────────────── */
.cer-hook-picker {
  display: flex; flex-direction: column; gap: 12px;
}
.cer-hook-titolo {
  font-size: 0.8rem; color: var(--tenue); text-align: center;
  margin: 0; line-height: 1.4;
}
.cer-hook-video-wrap {
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.cer-hook-video {
  width: 100%; display: block; max-height: 52vw; object-fit: contain;
}
.cer-hook-ts-row {
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--inchiostro) 5%, var(--carta));
  border: 1px solid var(--riga);
  border-radius: 12px; padding: 8px 16px;
}
.cer-hook-ts-label {
  font-size: 0.72rem; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.cer-hook-ts {
  font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--inchiostro); letter-spacing: 0.02em;
}
.cer-hook-nudge {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 5px;
}
.cer-hook-nudge-btn {
  background: color-mix(in srgb, var(--inchiostro) 6%, var(--carta));
  border: 1px solid var(--riga); border-radius: 10px;
  font-size: 0.72rem; font-weight: 700; color: var(--corpo);
  padding: 8px 2px; cursor: pointer; min-height: 38px;
  transition: background .12s, border-color .12s;
}
.cer-hook-nudge-btn:active {
  background: color-mix(in srgb, var(--oro) 14%, var(--carta));
  border-color: var(--oro);
}
.cer-hook-salva { width: 100%; }
[data-tema="sera"] .cer-hook-ts-row { background: rgba(255,255,255,.05); }
[data-tema="sera"] .cer-hook-nudge-btn { background: rgba(255,255,255,.06); }

/* --- Player video cerimonia --- */
#cerimonia-player {
  position: fixed; inset: 0; z-index: 300;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.cer-chiudi-btn {
  position: absolute;
  top: calc(var(--spazio-s) + env(safe-area-inset-top, 0px));
  right: var(--spazio-s);
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.15); backdrop-filter: blur(10px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 1;
}
.cer-chiudi-btn::after { content: ''; position: absolute; inset: -6px; }
.cer-video {
  width: 100%; max-width: 900px; max-height: 100dvh; outline: none;
}

/* --- Picker foto di coppia --- */
#hero-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-picker-sfondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.hero-picker-card {
  position: relative;
  background: var(--carta);
  border-radius: 24px 24px 0 0;
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: social-card-entra .42s cubic-bezier(.34,1.36,.64,1) both;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.hero-picker-toolbar {
  display: flex;
  align-items: center;
  padding: var(--spazio-s) var(--spazio-m);
  border-bottom: 1px solid var(--riga);
  flex-shrink: 0;
}

.hero-picker-titolo {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--inchiostro);
}

.hero-picker-chiudi {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tenue);
  flex-shrink: 0;
}

.hero-picker-lista {
  flex-shrink: 0;
  border-bottom: 1px solid var(--riga);
}

.hero-picker-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  padding: 0.85rem var(--spazio-m);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 1rem;
  color: var(--inchiostro);
  border-bottom: 1px solid var(--riga);
}
.hero-picker-lista > :last-child { border-bottom: none; }

.hero-picker-riga-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--inchiostro) 8%, var(--carta));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--inchiostro);
  flex-shrink: 0;
}

.hero-picker-riga--danger .hero-picker-riga-ico {
  background: color-mix(in srgb, var(--errore) 10%, var(--carta));
  color: var(--errore-chiaro);
}
.hero-picker-riga--danger .hero-picker-riga-txt { color: var(--errore-chiaro); }

.hero-picker-riga-txt {
  flex: 1;
  font-weight: 500;
}

.hero-picker-chevron { color: var(--tenue); flex-shrink: 0; }

.hero-picker-sep {
  display: flex;
  align-items: center;
  gap: var(--spazio-xs);
  padding: 0.6rem var(--spazio-m) 0.4rem;
  flex-shrink: 0;
}
.hero-picker-sep::before,
.hero-picker-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--riga);
}
.hero-picker-sep-txt {
  font-size: 0.75rem;
  color: var(--tenue);
  white-space: nowrap;
}

.hero-picker-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.hero-picker-thumb {
  aspect-ratio: 1;
  border: none;
  background: var(--carta-2);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: block;
}

.hero-picker-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}

.hero-picker-thumb:hover img,
.hero-picker-thumb:focus-visible img { opacity: 0.75; }

[data-tema="sera"] .hero-picker-card { background: var(--carta); }

/* --- Conto alla rovescia --- */
.conto-alla-rovescia {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 1.5rem);
  text-align: center;
  width: 100%;
}

.unita {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.numero {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.4rem, 8.8vw, 1.84rem);
  font-weight: 400;
  font-style: italic;
  color: var(--inchiostro);
  line-height: 1;
  min-width: 2ch;
  display: block;
  font-variant-numeric: tabular-nums;
}

.separatore-conto {
  font-family: var(--font-titoli);
  font-size: 1.4rem;
  color: var(--oro-testo);
  line-height: 1;
  padding-top: 0.15rem;
  align-self: flex-start;
  margin-top: 0.35rem;
}

/* Messaggio quando il giorno è arrivato */
.oggi-sposi {
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--oro-testo);
  text-align: center;
  padding: var(--spazio-s) 0;
}

/* --- Navigazione sezioni --- */
.navigazione {
  width: 100%;
}

.nav-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Card navigazione — stile Apple/Google: elevazione neutra, raggio 14px */
.nav-voce {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  justify-content: space-between;
  padding: 0 var(--spazio-s) 0 14px;
  background: var(--carta);
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.06);
  text-decoration: none;
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 500;
  min-height: 52px;
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.nav-icona {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--tenue);
  transition: color var(--transizione);
}

.nav-voce:hover .nav-icona {
  color: var(--oro-testo);
}

.nav-voce span:not(.nav-freccia):not(.badge-avvisi) {
  flex: 1;
}

[data-tema="sera"] .nav-voce {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}

.nav-voce:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.09);
  background: color-mix(in srgb, var(--salvia-tenue) 30%, var(--carta));
}

.nav-voce:active {
  transform: scale(0.97);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  background: color-mix(in srgb, var(--salvia-tenue) 50%, var(--carta));
}

.nav-voce.bloccata {
  color: var(--tenue);
  pointer-events: none;
  opacity: 0.6;
}

/* Chevron CSS destra — stile Apple (font-size:0 nasconde il carattere → nell'HTML) */
.nav-voce .nav-freccia {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--corpo);
  border-top: 2px solid var(--corpo);
  transform: rotate(45deg);
  flex-shrink: 0;
  font-size: 0;
  overflow: hidden;
  opacity: .55;
  transition: transform var(--transizione), border-color var(--transizione), opacity var(--transizione);
}

.nav-voce:hover .nav-freccia {
  transform: rotate(45deg) translate(2px, -2px);
  border-color: var(--oro);
  opacity: 1;
}

.nav-voce.bloccata .nav-freccia {
  display: none;
}

.nav-voce.bloccata .nav-stato {
  display: inline;
}

.nav-stato {
  display: none;
}

/* --- Piede di pagina --- */
.piede {
  width: 100%;
  max-width: var(--larghezza-max);
  padding: var(--spazio-s) var(--spazio-m) calc(var(--spazio-m) + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.piede p {
  font-family: var(--font-testo);
  font-size: 0.875rem;
  color: var(--corpo);
}

/* --- Utilità --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --- Banner "In questo momento" --- */
.banner-live {
  width: 100%;
  background-color: var(--inchiostro);
  color: var(--carta);
  padding: var(--spazio-xs) var(--spazio-m);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

[data-tema="sera"] .banner-live {
  background-color: var(--carta-2);
}

.banner-etichetta {
  display: block;
  color: var(--oro-chiaro);
  margin-bottom: 0.2rem;
}

.banner-testo {
  font-family: var(--font-titoli);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--carta);
}

[data-tema="sera"] .banner-testo {
  color: var(--inchiostro);
}

/* --- Banner offline + installa --- */
.banner-offline {
  position: fixed;
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + var(--spazio-xs));
  left: var(--spazio-m);
  right: var(--spazio-m);
  background-color: var(--inchiostro);
  color: var(--oro-chiaro);
  border: 1px solid var(--oro);
  border-radius: var(--raggio);
  padding: var(--spazio-xs) var(--spazio-m);
  text-align: center;
  font-size: 0.875rem;
  z-index: 150;
}

.banner-aggiorna {
  position: fixed;
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + var(--spazio-xs));
  left: var(--spazio-m);
  right: var(--spazio-m);
  background-color: var(--inchiostro);
  color: var(--oro-chiaro);
  border: 1px solid rgba(180, 150, 90, 0.45);
  border-radius: 16px;
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-s);
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  z-index: 200;
}

.banner-aggiorna-testo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--oro-chiaro);
}

.banner-aggiorna-testo svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.btn-aggiorna {
  background: var(--oro);
  color: var(--inchiostro);
  border: none;
  border-radius: 100px;
  padding: 0 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  height: 34px;
  white-space: nowrap;
  font-family: var(--font-testo);
  position: relative;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.btn-aggiorna::after {
  content: '';
  position: absolute;
  inset: -8px;
}


/* --- Widget feedback ospiti --- */
.banner-feedback {
  position: fixed;
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + var(--spazio-s));
  left: var(--spazio-m);
  right: var(--spazio-m);
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  padding: var(--spazio-s) var(--spazio-m);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xs);
}
[data-tema="sera"] .banner-feedback {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.feedback-chiudi {
  position: absolute;
  top: var(--spazio-xs);
  right: var(--spazio-xs);
  background: none;
  border: none;
  color: var(--tenue);
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feedback-domanda {
  font-weight: 600;
  color: var(--inchiostro);
  font-size: 0.9rem;
  padding-right: var(--spazio-l);
}
.feedback-voti {
  display: flex;
  gap: var(--spazio-xs);
}
.feedback-btn {
  flex: 1;
  min-height: 44px;
  border: 1.5px solid var(--riga-forte);
  border-radius: 100px;
  background: none;
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.feedback-btn:hover {
  border-color: var(--oro);
  background: var(--salvia-tenue);
}
.banner-feedback-ok {
  position: fixed;
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + var(--spazio-s));
  left: var(--spazio-m);
  right: var(--spazio-m);
  background: var(--inchiostro);
  color: var(--oro-chiaro);
  border-radius: var(--raggio);
  padding: var(--spazio-s) var(--spazio-m);
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 150;
}

/* Barre risultati feedback in dashboard */
.feedback-risultati {
  padding: var(--spazio-xs) var(--spazio-m);
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xs);
}
.feedback-bar-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-xs);
}
.feedback-bar-label {
  width: 3.2rem;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--corpo);
}
.feedback-bar-track {
  flex: 1;
  height: 10px;
  background: var(--riga);
  border-radius: 100px;
  overflow: hidden;
}
@keyframes bar-entra {
  from { width: 0 }
  to   { width: var(--bar-width) }
}
.feedback-bar-fill {
  height: 100%;
  border-radius: 100px;
  width: var(--bar-width);
  animation: bar-entra 0.45s ease both;
}
.feedback-bar-ottimo { background: var(--salvia); }
.feedback-bar-bene   { background: var(--oro); }
.feedback-bar-male   { background: var(--errore); }
.feedback-bar-pct {
  width: 4rem;
  text-align: right;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
}

/* --- Sezioni interne --- */
.sezione {
  width: 100%;
}

.pagina-interna {
  max-width: var(--larghezza-max);
  margin: 0 auto;
  padding: var(--spazio-m) var(--spazio-m) calc(var(--spazio-xl) + 4.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--spazio-l);
}

/* --- Nav bar stile iOS: sticky, frosted glass ---
   Grid 3 colonne (1fr | auto | 1fr) = titolo matematicamente centrato.
   #intestazione-app è l'unica intestazione reale: persistente, fuori dalle sezioni.
   Le sezioni non contengono più header propri. */
.intestazione-interna {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding-left: var(--spazio-m);
  padding-right: var(--spazio-m);
  padding-bottom: 0;
  background: rgba(250, 250, 250, 0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  display: flex;
  align-items: center;
}

/* Il header persistente si estende full-width nel body flex */
#intestazione-app {
  width: 100%;
  margin: 0;
}

/* In home e accesso: sfondo trasparente, Torna e titolo nascosti */
#intestazione-app.intestazione-home {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#intestazione-app.intestazione-home .nav-storico {
  display: none;
}

.nav-storico {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

#intestazione-app.intestazione-home .titolo-pagina {
  visibility: hidden;
  pointer-events: none;
}

[data-tema="sera"] .intestazione-interna {
  background: rgba(20, 31, 25, 0.92);
}

/* Flex item destra — pulsante utente + tema */
.intestazione-azioni {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Titolo centrato sull'intera larghezza — position absolute per vera simmetria iOS */
.intestazione-interna .titolo-pagina {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 30px);
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  max-width: calc(100% - 250px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Bottone Torna — chevron CSS + testo, stile Apple nav bar */
.btn-torna {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--inchiostro);
  padding: 0;
  font-size: 0;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 44px;
  min-width: 44px;
  opacity: 1;
  transition: opacity var(--transizione);
}

/* Chevron CSS — geometrico, identico a iOS */
.btn-torna::before {
  content: '';
  display: block;
  width: 17px;
  height: 17px;
  border-left: 2.5px solid currentColor;
  border-top: 2.5px solid currentColor;
  transform: rotate(-45deg) translateX(2px);
  flex-shrink: 0;
}

.btn-torna:disabled { opacity: 0.25; cursor: default; }
.btn-torna:active:not(:disabled) { opacity: 0.5; }

.btn-avanti {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--inchiostro);
  padding: 0;
  font-size: 0;
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  opacity: 1;
  transition: opacity var(--transizione);
}

.btn-avanti::before {
  content: '';
  display: block;
  width: 17px;
  height: 17px;
  border-right: 2.5px solid currentColor;
  border-top: 2.5px solid currentColor;
  transform: rotate(45deg) translateX(-2px);
  flex-shrink: 0;
}

.btn-avanti:disabled {
  opacity: 0.25;
  cursor: default;
}

.btn-avanti:active:not(:disabled) { opacity: 0.5; }


.titolo-pagina {
  font-family: var(--font-titoli);
  font-size: 1.6rem;
  color: var(--inchiostro);
  font-weight: 700;
}

.sottotitolo {
  font-family: var(--font-titoli);
  font-size: 1.15rem;
  color: var(--inchiostro);
  font-weight: 600;
  margin-bottom: var(--spazio-s);
}

/* --- Form --- */
.form-verticale {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-m);
}

.form-sezione {
  padding-top: var(--spazio-m);
  border-top: 1px solid var(--riga);
}

.form-sezione .btn-primario {
  align-self: stretch;
  min-height: 48px;
}

.form-orizzontale {
  display: flex;
  gap: var(--spazio-s);
  align-items: flex-end;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Label di form: più leggibile del generico .etichetta */
.campo > .etichetta {
  color: var(--corpo);
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.input-sottolineato {
  background: var(--carta-2);
  border: 1px solid var(--riga-forte);
  border-radius: 12px;
  padding: 0.6rem 0.875rem;
  font-family: var(--font-testo);
  font-size: 1rem; /* ≥16px obbligatorio: iOS Safari auto-zooma sotto questa soglia */
  font-weight: 400;
  color: var(--inchiostro);
  width: 100%;
  outline: none;
  caret-color: var(--oro);
  transition: border-color var(--transizione), box-shadow var(--transizione), background var(--transizione);
  box-sizing: border-box;
}

.input-sottolineato:focus {
  border-color: var(--oro);
  background: var(--carta);
  box-shadow: 0 0 0 3px rgba(180, 150, 90, 0.15);
}

/* Sopprimi il focus-visible globale: il ring dorato già segnala il focus */
.input-sottolineato:focus-visible {
  outline: none;
}

.input-sottolineato::placeholder {
  color: var(--tenue);
  font-weight: 400;
  font-style: italic;
}

[data-tema="sera"] .input-sottolineato {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--riga-forte);
}

[data-tema="sera"] .input-sottolineato:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(180, 150, 90, 0.2);
}

.textarea {
  resize: none;
  min-height: 72px;
  max-height: 220px;
  overflow-y: auto;
  line-height: 1.6;
  transition: height 0.12s ease;
}

/* --- Pulsanti --- */
.btn-primario {
  background: var(--inchiostro);
  color: var(--carta);
  border: none;
  padding: 0.75rem var(--spazio-m);
  min-height: 44px;
  font-family: var(--font-testo);
  font-size: 0.875rem; /* 14px: Material 3 Label Large */
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--raggio);
  align-self: flex-start;
  transition: background var(--transizione), transform var(--transizione);
}

.btn-primario:hover        { background: var(--corpo); }
.btn-primario:active       { background: var(--inchiostro); transform: scale(0.98); }
.btn-primario:disabled     { opacity: 0.45; cursor: not-allowed; }
.btn-primario:focus        { outline: none; }
.btn-primario:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

.btn-testo {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--oro-testo);
  font-family: var(--font-testo);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0;
  min-height: 44px;
  transition: opacity var(--transizione);
}

.btn-testo:hover  { opacity: 0.75; }
.btn-testo:active { opacity: 0.5; }

.btn-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-testo);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
  padding: var(--spazio-xs);
  min-height: 44px;
  transition: color var(--transizione);
}

.btn-link:hover { color: var(--corpo); }

.btn-pericolo {
  color: var(--errore);
}

/* --- Messaggi bacheca --- */
.lista-messaggi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.messaggio {
  padding: var(--spazio-s) 0;
  border-bottom: 1px solid var(--riga);
}

.messaggio-header {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  margin-bottom: 0.4rem;
}

.messaggio-nome {
  flex: 1;
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 500;
  color: var(--inchiostro);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messaggio-header time {
  margin-left: auto;
  flex-shrink: 0;
}

.messaggio-testo {
  font-family: var(--font-testo);
  font-size: 1rem;
  color: var(--corpo);
  line-height: 1.55;
}

.risposta {
  margin-top: var(--spazio-xs);
  padding: var(--spazio-xs) 0 var(--spazio-xs) var(--spazio-s);
  border-left: 2px solid var(--oro);
}

.risposta-autore {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--oro-testo);
}

.form-risposta {
  display: flex;
  gap: var(--spazio-xs);
  margin-top: var(--spazio-xs);
  align-items: center;
  padding-right: var(--spazio-m);
}

.input-risposta {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 1px solid var(--riga);
  padding: 0.65rem 0;
  font-family: var(--font-testo);
  font-size: 1rem; /* ≥16px: iOS Safari auto-zoom + touch target 44px */
  color: var(--inchiostro);
  outline: none;
}

.input-risposta:focus {
  border-bottom-color: var(--oro);
}

/* Pulsanti bacheca: icona su mobile, testo su tablet+ */
.btn-nascondi,
.btn-risposta-invia {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0 0.25rem;
  flex-shrink: 0;
}
.btn-nascondi .btn-label-testo,
.btn-risposta-invia .btn-label-testo {
  display: none;
}
@media (min-width: 640px) {
  .btn-nascondi .btn-label-testo,
  .btn-risposta-invia .btn-label-testo {
    display: inline;
  }
}

.btn-icona-nascondi {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tenue);
  flex-shrink: 0;
}
.btn-icona-nascondi svg {
  width: 18px;
  height: 18px;
}
.btn-icona-nascondi:hover { color: var(--corpo); }

.vuoto, .caricamento {
  padding: var(--spazio-m) 0;
  text-align: center;
}

.caricamento {
  color: transparent;
  font-size: 0;
  user-select: none;
  position: relative;
}

/* Cuore che si riempie di sangue rosso dal basso */
.caricamento::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background:
    /* Riflesso vetro fisso (upper-left highlight) */
    linear-gradient(138deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.07) 36%, transparent 60%),
    /* Liquido con menisco: rosso profondo → brillante → onda superficie → vuoto */
    linear-gradient(to top,
      #7A1616 0%,
      #C02B2B 22%,
      #D63232 41%,
      #ED4444 47%,
      rgba(255,192,172,0.82) 48.8%,
      rgba(255,252,248,0.64) 49.8%,
      transparent 50.6%,
      rgba(195,46,46,0.04) 51%
    );
  background-size: 100% 100%, 100% 200%;
  background-position: 0% 0%, 0% 0%;
  clip-path: path('M22 38 C22 38 4 26 4 15 C4 9 9 5 14 5 C17.5 5 20.5 7 22 10.5 C23.5 7 26.5 5 30 5 C35 5 40 9 40 15 C40 26 22 38 22 38 Z');
  animation: cuore-caricamento 2.5s ease-in-out infinite;
}

/* Alone rosso pulsante (dietro il cuore tramite z-index) */
.caricamento::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 56%, rgba(205,34,34,0.55) 0%, rgba(205,34,34,0.18) 44%, transparent 70%);
  filter: blur(11px);
  animation: cuore-aura 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes cuore-caricamento {
  /* Vuoto, a riposo */
  0% {
    background-position: 0% 0%, 0% 0%;
    transform: scale(0.86);
    filter: drop-shadow(0 1px 2px rgba(180,26,26,0));
  }
  /* Primo battito — sistole leggera (lub) */
  7%  { transform: scale(1.15); filter: drop-shadow(0 2px 7px rgba(186,30,30,0.22)); }
  13% { transform: scale(0.90); filter: drop-shadow(0 1px 3px rgba(186,30,30,0.08)); }
  /* Secondo battito — più forte (dub) */
  20% { transform: scale(1.24); filter: drop-shadow(0 3px 10px rgba(192,32,32,0.34)); }
  /* Pausa diastolica: inizia il riempimento */
  27% {
    background-position: 0% 0%, 0% 16%;
    transform: scale(0.91);
    filter: drop-shadow(0 2px 5px rgba(180,26,26,0.12));
  }
  /* Liquido che sale piano */
  55% {
    background-position: 0% 0%, 0% 75%;
    transform: scale(0.97);
    filter: drop-shadow(0 4px 14px rgba(202,34,34,0.52));
  }
  /* Quasi pieno — picco, terzo battito forte */
  67% {
    background-position: 0% 0%, 0% 100%;
    transform: scale(1.22);
    filter: drop-shadow(0 6px 22px rgba(210,34,34,0.84));
  }
  /* Pieno, si stabilizza */
  75% {
    background-position: 0% 0%, 0% 100%;
    transform: scale(1.0);
    filter: drop-shadow(0 5px 19px rgba(210,34,34,0.72));
  }
  /* Secondo colpo a pieno (sistole finale) */
  83% { transform: scale(1.16); filter: drop-shadow(0 7px 25px rgba(210,34,34,0.90)); }
  90% {
    background-position: 0% 0%, 0% 100%;
    transform: scale(0.97);
    filter: drop-shadow(0 4px 14px rgba(200,34,34,0.52));
  }
  /* Svuotamento rapido */
  100% {
    background-position: 0% 0%, 0% 0%;
    transform: scale(0.86);
    filter: drop-shadow(0 1px 2px rgba(180,26,26,0));
  }
}

@keyframes cuore-aura {
  0%, 22%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  57%  { opacity: 0.42; transform: translate(-50%, -50%) scale(1.02); }
  70%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.32); }
  83%  { opacity: 0;    transform: translate(-50%, -50%) scale(1.58); }
}

[data-tema="sera"] .caricamento::before {
  background:
    linear-gradient(138deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.04) 36%, transparent 60%),
    linear-gradient(to top,
      #681212 0%,
      #A62424 22%,
      #BE2C2C 41%,
      #D43E3E 47%,
      rgba(255,166,146,0.74) 48.8%,
      rgba(255,242,234,0.52) 49.8%,
      transparent 50.6%,
      rgba(175,38,38,0.06) 51%
    );
  background-size: 100% 100%, 100% 200%;
}

[data-tema="sera"] .caricamento::after {
  background: radial-gradient(circle at 50% 56%, rgba(220,40,40,0.50) 0%, rgba(215,38,38,0.16) 44%, transparent 70%);
}

.errore {
  color: var(--errore);
  font-size: 0.9rem;
  padding: var(--spazio-s) 0;
}

/* --- Timeline programma --- */
.lista-timeline {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding: 0 var(--spazio-m) 0 0;
}

.timeline-voce {
  display: grid;
  grid-template-columns: 3rem 18px 1fr;
  gap: 0 0.75rem;
  padding: 0.5rem 0;
  position: relative;
  align-items: start;
}

.timeline-voce + .timeline-voce {
  border-top: none;
}

.timeline-ora {
  white-space: nowrap;
  padding-top: 0.1rem;
  color: var(--corpo);
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
  letter-spacing: 0.01em;
}

.timeline-linea {
  position: relative;
  align-self: stretch;
}

.timeline-linea::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: 3px;
  border-radius: 2px;
  background: var(--corpo);
  opacity: 0.25;
  z-index: 0;
}

.timeline-voce:first-child .timeline-linea::after {
  top: 0.7rem;
}

.timeline-voce:last-child .timeline-linea::after {
  top: 0;
  bottom: calc(100% - 0.7rem);
}

.timeline-linea::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0.1rem;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--carta);
  border: 2px solid var(--corpo);
  z-index: 2;
}

@keyframes timeline-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--salvia) 40%, transparent); }
  50%       { box-shadow: 0 0 0 8px color-mix(in srgb, var(--salvia) 0%, transparent); }
}

.timeline-voce.attivo .timeline-linea::before {
  background: var(--salvia);
  border-color: var(--salvia);
}

.timeline-voce.attivo .timeline-titolo {
  color: var(--salvia-testo);
}

.timeline-contenuto {
  padding-bottom: 0.1rem;
}

.timeline-titolo {
  font-family: var(--font-titoli);
  font-size: 1.1rem;
  color: var(--inchiostro);
  font-weight: 400;
  line-height: 1.3;
}

.timeline-nota {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tenue);
  font-family: var(--font-testo);
  line-height: 1.4;
}

[data-tema="sera"] .timeline-linea::before {
  background: var(--carta-2);
}

/* Termometro: evento passato — dot pieno (stessa dimensione degli altri) */
.timeline-voce.passato .timeline-linea::before {
  background: var(--salvia);
  border-color: var(--salvia);
}

/* Fill verde termometro: scaleY evita problemi con % su flex items */
.tl-fill {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%) scaleY(var(--segment-fill, 0));
  transform-origin: top center;
  background: var(--salvia);
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}
/* Primo figlio: la linea grigia parte da 0.7rem, allinea il fill */
.timeline-voce:first-child .tl-fill {
  top: 0.7rem;
}

/* Cursore ora attuale: si sposta lungo la linea in proporzione al tempo trascorso */
.tl-cursor {
  display: none;
  position: absolute;
  left: 50%;
  top: calc(0.5rem + var(--segment-fill, 0) * (100% - 0.5rem));
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--salvia);
  border: 3px solid var(--carta);
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
  pointer-events: none;
  animation: timeline-pulse 2s ease-in-out infinite;
}
.timeline-voce.attivo .tl-cursor {
  display: block;
}
[data-tema="sera"] .timeline-voce.attivo .tl-cursor {
  border-color: var(--carta-2);
}

.timeline-voce.passato .timeline-titolo {
  color: var(--tenue);
}

.timeline-voce.passato .timeline-ora {
  opacity: 0.5;
}

[data-tema="sera"] .timeline-voce.passato .timeline-linea::before {
  background: var(--salvia);
  border-color: var(--salvia);
}

/* === Timeline compatta: colonna ora ridotta su mobile === */
@media (max-width: 639px) {
  .timeline-voce {
    grid-template-columns: 2.4rem 14px 1fr;
    gap: 0 0.55rem;
  }
  .timeline-ora {
    font-size: 0.78rem;
  }
}

/* === Evento passato: collassato di default, tap/click per espandere === */
.timeline-voce.passato {
  cursor: pointer;
}
.timeline-voce.passato:not(.espanso) {
  padding: 0.18rem 0;
}
.timeline-voce.passato:not(.espanso) .timeline-nota,
.timeline-voce.passato:not(.espanso) .tl-modificato-da,
.timeline-voce.passato:not(.espanso) .timeline-tipo-badge {
  display: none;
}
.timeline-voce.passato:not(.espanso) .timeline-titolo {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
}
.timeline-voce.passato:not(.espanso) .timeline-ora {
  font-size: 0.72rem;
  padding-top: 0.15rem;
}
/* Chevron discreta che segnala "espandibile" — solo quando collassato */
.timeline-voce.passato:not(.espanso) .timeline-titolo::after {
  content: ' ›';
  font-style: normal;
  font-size: 0.8em;
  opacity: 0.4;
  margin-left: 2px;
}
/* Step espanso: cursore default sugli elementi interattivi */
.timeline-voce.passato.espanso {
  cursor: default;
}

/* --- Badge tipo timeline (cucina / bar) --- */
.timeline-tipo-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 7px;
  border-radius: 20px;
  margin-bottom: 0.25rem;
}

.timeline-cucina .timeline-tipo-badge {
  background: var(--salvia-tenue);
  color: var(--salvia-testo);
}

.timeline-bar .timeline-tipo-badge {
  background: rgba(var(--oro-rgb), .12);
  color: var(--oro-testo);
}

.timeline-cucina .timeline-linea::before {
  background: var(--salvia-tenue);
  border: 2px solid var(--salvia);
}

.timeline-bar .timeline-linea::before {
  background: rgba(var(--oro-rgb), .12);
  border: 2px solid var(--oro);
}

[data-tema="sera"] .timeline-cucina .timeline-tipo-badge {
  background: color-mix(in srgb, var(--salvia) 15%, transparent);
  color: var(--salvia-testo);
}

[data-tema="sera"] .timeline-bar .timeline-tipo-badge {
  background: rgba(var(--oro-rgb), .10);
  color: var(--oro-testo);
}

/* --- Info box menu cucina visibile agli ospiti --- */
.tl-menu-sep {
  position: relative;
  align-self: stretch;
}
.tl-menu-sep::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: 3px;
  border-radius: 2px;
  background: var(--corpo);
  opacity: 0.15;
}
.tl-menu-sep::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0.5rem;
  transform: translateX(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background: color-mix(in srgb, var(--salvia) 35%, var(--carta));
  border: 1.5px solid var(--salvia);
  border-radius: 1px;
  z-index: 2;
}
.tl-menu-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--salvia) 7%, var(--carta));
  border: 1px solid color-mix(in srgb, var(--salvia) 28%, transparent);
  border-radius: 10px;
  padding: 0.42rem 0.7rem;
  margin: 0.05rem 0;
}
.tl-menu-icona {
  color: var(--salvia-testo);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.tl-menu-testi {
  flex: 1;
  min-width: 0;
}
.tl-menu-nome {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--inchiostro);
  line-height: 1.3;
}
.tl-menu-nota-txt {
  display: block;
  font-size: 0.72rem;
  color: var(--tenue);
  margin-top: 1px;
}
.tl-menu-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--salvia-testo);
  background: color-mix(in srgb, var(--salvia) 15%, var(--carta));
  border: 1px solid var(--salvia);
  border-radius: 100px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.tl-menu-voce.passato .tl-menu-card {
  opacity: 0.55;
}
[data-tema="sera"] .tl-menu-card {
  background: color-mix(in srgb, var(--salvia) 12%, var(--carta));
  border-color: color-mix(in srgb, var(--salvia) 35%, transparent);
}
[data-tema="sera"] .tl-menu-sep::before {
  background: color-mix(in srgb, var(--salvia) 22%, var(--carta));
}
[data-tema="sera"] .tl-menu-badge {
  background: color-mix(in srgb, var(--salvia) 22%, var(--carta));
}

/* --- Badge "ultima modifica" nella timeline (solo staff/catering) --- */
.tl-modificato-da {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.tl-avatar-mini {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--salvia-tenue) center/cover no-repeat;
  color: var(--inchiostro);
  font-size: 0.55rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

.tl-modificato-info {
  font-size: 0.72rem;
  color: var(--tenue);
}

[data-tema="sera"] .tl-avatar-mini {
  background-color: rgba(255,255,255,.12);
  color: var(--corpo);
}

/* --- Widget check-in arrivi (sezione programma, staff/catering) --- */
#programma-checkin-widget {
  padding: 0;
}

#sezione-programma {
  gap: var(--spazio-m);
}

.checkin-widget {
  padding: 0.65rem 1rem 0.55rem;
  position: relative;
}

.checkin-demo-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--salvia-tenue);
  color: var(--salvia-testo);
}

.checkin-widget-titolo {
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--tenue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ci-sfere {
  display: flex;
  gap: 0.25rem;
  justify-content: space-around;
  align-items: flex-start;
}

.ci-cerchio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
}

.ci-ring-wrap {
  position: relative;
  width: 68px;
  height: 68px;
}

.ci-ring {
  transform: rotate(-90deg);
}

.ci-ring-track {
  fill: none;
  stroke: var(--riga-forte);
  stroke-width: 4;
}

.ci-ring-fill {
  fill: none;
  stroke: var(--salvia);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 175.9;
  stroke-dashoffset: 175.9;
  transition: stroke-dashoffset 0.35s ease;
}

.ci-ring-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}

.ci-n {
  font-size: 1rem;
  font-weight: 700;
  color: var(--inchiostro);
  line-height: 1;
}

.ci-di {
  font-size: 0.6rem;
  color: var(--tenue);
  line-height: 1;
  font-weight: 400;
}

.ci-cerchio > .etichetta {
  font-size: 0.65rem;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--corpo);
}

.ci-raw-count {
  font-size: 0.88rem;
  color: var(--corpo);
  margin: 0;
  line-height: 1.5;
}
.ci-raw-count strong {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--inchiostro);
  margin-right: 0.25rem;
}

.input-campo {
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 400;
  color: var(--inchiostro);
  background: none;
  border: none;
  border-bottom: 1px solid var(--riga);
  padding: 0.5rem 0;
  width: 100%;
  outline: none;
  caret-color: var(--oro);
  transition: border-color var(--transizione);
}
.input-campo:focus { border-bottom-color: var(--oro); border-bottom-width: 2px; }
[data-tema="sera"] .input-campo { color: var(--inchiostro); border-bottom-color: var(--riga); }

.modifica-step {
  margin-top: var(--spazio-xs);
}

.modifica-step summary {
  cursor: pointer;
  list-style: none;
  color: var(--tenue);
}

.modifica-step .form-verticale {
  margin-top: var(--spazio-xs);
  gap: var(--spazio-s);
}

.ai-step-risposta {
  margin-top: var(--spazio-xs);
  color: var(--salvia-testo);
}

.conferma-elimina-step {
  margin-top: var(--spazio-xs);
  border-top: 1px solid var(--riga);
  padding-top: var(--spazio-s);
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xs);
}

.conferma-elimina-testo {
  margin: 0;
  color: var(--corpo);
  font-size: 0.85rem;
}

.azioni-riga {
  display: flex;
  gap: var(--spazio-s);
  margin-top: var(--spazio-s);
}

/* Indirizzo luogo sotto il nome — staccato visivamente */
#info-indirizzo { margin-top: .3rem; }

/* Hint testo sotto il form banner sposi */
.banner-hint { margin-top: .5rem; }

/* --- Accesso sposi --- */
.form-accesso-contenuto {
  max-width: 360px;
}

.testo-intro {
  font-size: 1rem;
  color: var(--corpo);
  margin-bottom: var(--spazio-m);
  line-height: 1.6;
}

.msg-ok    { color: var(--salvia-testo); }
.msg-errore { color: var(--errore); }

/* --- Sezione form rapido homepage --- */
/* Form rapido home — card compatta stile Apple "compose" */
.sezione-form-rapido {
  width: 100%;
  background: var(--carta);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, .05);
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.07);
  padding: var(--spazio-s) var(--spazio-m);
  overflow: hidden;
}

[data-tema="sera"] .sezione-form-rapido {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  box-shadow: 0 1px 4px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3);
}

/* Pulsante "Scrivi agli sposi..." — campo sottolineato collassato */
.form-rapido-trigger {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--riga);
  border-radius: 0;
  padding: var(--spazio-xs) 0;
  text-align: left;
  cursor: text;
  color: var(--tenue);
  font-size: 1rem;
  font-family: var(--font-testo);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-xs);
  transition: border-color var(--transizione);
}
.form-rapido-trigger svg {
  opacity: 0.52;
  flex-shrink: 0;
  transition: opacity var(--transizione);
}
.form-rapido-trigger:hover {
  border-bottom-color: var(--oro);
}
.form-rapido-trigger:hover svg {
  opacity: 0.65;
}
[data-tema="sera"] .form-rapido-trigger {
  border-bottom-color: var(--riga-forte);
}
/* Animazioni apertura/chiusura form rapido */
@keyframes form-rapido-entra {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes trigger-rapido-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#form-messaggio.form-entra {
  animation: form-rapido-entra 0.22s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
#trigger-form-messaggio.trigger-entra {
  animation: trigger-rapido-entra 0.18s ease-out both;
}

/* Feedback successo invio */
.form-rapido-ok {
  color: var(--salvia-testo);
  text-align: center;
  padding: var(--spazio-xs) 0;
}

/* Form espanso: gap ridotto tra campi */
.sezione-form-rapido .form-verticale {
  gap: var(--spazio-s);
  padding-top: var(--spazio-xs);
}

/* Textarea più compatta nella home */
.sezione-form-rapido .textarea {
  min-height: 52px;
  max-height: 160px;
}

/* Piede form: annulla a sinistra, invia a destra */
.form-rapido-piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-s);
  margin-top: var(--spazio-xs);
}
.form-rapido-piede .btn-primario {
  border-radius: 12px;
  min-height: 44px;
  flex-shrink: 0;
}
.form-rapido-piede .btn-link {
  font-size: 0.875rem;
  color: var(--tenue);
  flex-shrink: 0;
}

.titolo-sezione {
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--inchiostro);
  font-weight: 400;
  margin-bottom: var(--spazio-s);
}

.accesso-nascosto {
  margin-top: var(--spazio-xs);
  text-align: center;
}

/* Nessun flex-slot quando il pulsante Esci è nascosto */
.accesso-nascosto:has(> [hidden]) {
  display: none;
}

/* --- Galleria foto & video --- */
.barra-filtri-wrap:has(> #barra-filtri-tutte:empty) { display: none; }

.barra-filtri-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#barra-filtri-tutte .filtro-btn { width: 100%; }

.momenti-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  position: relative;
  width: 100%;
  background: color-mix(in srgb, var(--inchiostro) 5%, var(--carta));
  border: 1.5px solid color-mix(in srgb, var(--inchiostro) 12%, transparent);
  border-radius: 100px;
  padding: 0.35rem 2.5rem;
  cursor: pointer;
  color: var(--corpo);
  font-family: var(--font-testo);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  min-height: 38px;
  transition: all var(--transizione);
}

.momenti-toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.momenti-testo {
  white-space: nowrap;
  flex-shrink: 0;
}

.momenti-filtro-attivo:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.55rem;
  background: color-mix(in srgb, var(--inchiostro) 12%, var(--carta));
  color: var(--inchiostro);
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1.5px solid color-mix(in srgb, var(--inchiostro) 25%, transparent);
}

[data-tema="sera"] .momenti-filtro-attivo:not(:empty) {
  background: color-mix(in srgb, var(--oro) 15%, var(--carta));
  color: var(--oro-testo);
  border-color: color-mix(in srgb, var(--oro) 35%, transparent);
}

.momenti-chevron {
  position: absolute;
  right: 0.9rem;
  flex-shrink: 0;
  color: var(--tenue);
  transform: rotate(-90deg);
  transition: transform 0.22s ease;
}

.momenti-toggle.aperto .momenti-chevron { transform: rotate(0deg); }

#bacheca-ctrl {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding-bottom: var(--spazio-xs);
}
#bacheca-ctrl:empty { display: none; }

#sezione-foto.pagina-interna { gap: var(--spazio-s); }
#sezione-info.pagina-interna { gap: 0; }
#sezione-info [data-staff] { padding-top: 0.75rem; }

.barra-filtri {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

/* "Tutte" occupa tutta la larghezza */
.barra-filtri .filtro-btn:first-child { grid-column: 1 / -1; }

/* Timeline button — full-width, pill compatta */
.filtro-btn--timeline {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  font-size: 0.78rem;
}
.filtro-btn--timeline svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.filtro-btn--timeline.attivo svg {
  opacity: 1;
}

/* Ultimo bottone solo nella riga → full-width */
.barra-filtri .filtro-btn:last-child:not(:first-child):nth-child(even) { grid-column: 1 / -1; }

.filtro-btn {
  background: none;
  border: 1.5px solid var(--riga-forte);
  padding: 0.35rem 0.75rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-testo);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--corpo);
  cursor: pointer;
  border-radius: 100px;
  transition: all var(--transizione);
}

.filtro-btn-testo { }

.filtro-btn.attivo {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--carta);
  font-weight: 600;
}

[data-tema="sera"] .filtro-btn {
  border-color: var(--riga-forte);
  background: rgba(240,234,219,.06);
  color: var(--corpo);
}

[data-tema="sera"] .filtro-btn.attivo {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--carta);
}

/* Gallery chips — big-tech (Apple/Google Photos) */
.barra-filtri-wrap .filtro-btn {
  text-transform: none;
  letter-spacing: 0;
  min-height: 34px;
  font-size: 0.8rem;
  background: color-mix(in srgb, var(--inchiostro) 7%, var(--carta));
  border-color: transparent;
}
.barra-filtri-wrap .filtro-btn.attivo {
  background: var(--inchiostro);
  border-color: transparent;
  color: var(--carta);
}
#barra-filtri-tutte .filtro-btn {
  min-height: 40px;
  font-size: 0.88rem;
  font-weight: 600;
}
[data-tema="sera"] .barra-filtri-wrap .filtro-btn {
  background: rgba(255,255,255,.09);
  border-color: transparent;
  color: var(--corpo);
}
[data-tema="sera"] .barra-filtri-wrap .filtro-btn.attivo {
  background: var(--oro);
  border-color: transparent;
  color: var(--carta);
}
[data-tema="sera"] .momenti-toggle {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.griglia-media {
  columns: 2;
  column-gap: 2px;
}

.griglia-media .vuoto,
.griglia-media .caricamento {
  column-span: all;
  padding: var(--spazio-m) 0;
}

/* Separatore momento Timeline — stile big-tech (Apple/Google Photos) */
.griglia-momento-sep {
  column-span: all;
  width: 100%;
  padding: 22px 2px 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.griglia-momento-sep:first-child {
  padding-top: 8px;
}
.momento-sep-linea { display: none; }
.momento-sep-label {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--inchiostro);
  line-height: 1.2;
}
.momento-sep-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--inchiostro) 9%, var(--carta));
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--corpo);
  letter-spacing: 0;
  line-height: 1;
  flex-shrink: 0;
}
[data-tema="sera"] .momento-sep-label { color: var(--inchiostro); }
[data-tema="sera"] .momento-sep-count {
  background: rgba(255,255,255,0.1);
  color: var(--tenue);
}

.scheda-media {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--riga);
  display: block;
  break-inside: avoid;
  margin-bottom: 2px;
  min-height: 150px; /* fallback per foto senza dimensioni note */
}
/* Quando width/height sono salvati in DB: aspect-ratio pre-alloca lo spazio esatto → zero layout shift */
.scheda-media--dims {
  min-height: 0;
}
.scheda-media--dims .miniatura {
  height: 100%;
  max-height: none;
}

.miniatura {
  width: 100%;
  height: auto;
  max-height: min(320px, 70vw);
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform var(--transizione);
}

.scheda-media:hover .miniatura {
  transform: scale(1.04);
}

.miniatura-video {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  background: #1a1a16;
}

.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255,255,255,.85);
  pointer-events: none;
}

/* Card video in galleria: larghezza intera */
.griglia-media .scheda-media:has(.miniatura-video) {
  column-span: all;
}
.griglia-media .scheda-media:has(.miniatura-video) .miniatura-video {
  border-radius: 14px;
  overflow: hidden;
}

/* Chip profilo — componente base riutilizzabile */
.profilo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  border-radius: 20px;
  padding: 3px 10px 3px 3px;
  cursor: pointer;
  color: rgba(255,255,255,.92);
  font-size: .74rem;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.profilo-chip--no-link { cursor: default; }
.profilo-chip:not(.profilo-chip--no-link):active { background: rgba(0,0,0,.68); }
.profilo-chip-avt {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .66rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.profilo-chip-avt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profilo-chip-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Variante card foto: chip posizionato in basso a sinistra */
.scheda-nome-chip {
  position: absolute;
  bottom: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  z-index: 2;
}


/* --- Album caccia al tesoro --- */
.caccia-album-griglia {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--spazio-m);
  column-span: all;
}

.caccia-album-card {
  display: flex;
  align-items: center;
  gap: var(--spazio-m);
  cursor: pointer;
  background: var(--carta);
  border-bottom: 1px solid var(--riga);
  padding: var(--spazio-s) 0;
  transition: opacity var(--transizione);
}
.caccia-album-card:first-child { padding-top: 0; }
.caccia-album-card:last-child { border-bottom: none; }
.caccia-album-card:active { opacity: 0.6; }

.caccia-album-cover {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--carta-2);
}
.caccia-album-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.caccia-album-cover-vuoto {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tenue);
}

.caccia-album-info {
  flex: 1;
  min-width: 0;
}

.caccia-album-nome {
  font-size: 1rem;
  font-weight: 600;
  color: var(--inchiostro);
  line-height: 1.3;
}
.caccia-album-count {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--tenue);
}

[data-tema="sera"] .caccia-album-card {
  background: var(--carta);
  border-color: var(--riga-forte);
}

/* Vista singola missione */
.caccia-torna-album {
  display: block;
  column-span: all;
  margin-bottom: var(--spazio-s);
  font-size: 0.85rem;
}
.caccia-titolo-aperto {
  column-span: all;
  font-size: 1rem;
  font-weight: 700;
  color: var(--inchiostro);
  margin-bottom: var(--spazio-m);
}
.griglia-foto-task {
  display: grid;
  column-span: all;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
/* Le foto dentro la griglia caccia restano quadrate */
.griglia-foto-task .scheda-media {
  aspect-ratio: 1;
}
.griglia-foto-task .miniatura {
  height: 100%;
  object-fit: cover;
}

.btn-nascondi-media {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.85);
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.btn-nascondi-media::after {
  content: '';
  position: absolute;
  inset: -7px;
}

/* Zona upload */
.zona-upload {
  border: 1px dashed var(--salvia);
  border-radius: var(--raggio);
  padding: var(--spazio-m);
  text-align: center;
  cursor: pointer;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transizione), background var(--transizione);
}

.zona-upload:hover {
  border-color: var(--inchiostro);
  background: color-mix(in srgb, var(--salvia) 6%, transparent);
}

.label-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.upload-icona {
  font-size: 2rem;
  color: var(--salvia-testo);
}

.anteprima-file {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--inchiostro);
  aspect-ratio: 4 / 3;
}

.anteprima-file .anteprima-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wp3-cambia {
  align-self: center;
  font-size: 0.8125rem;
  min-height: 44px;
  color: var(--tenue);
}

.griglia-momenti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

.bolla-momento {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.75rem 0.875rem;
  border-radius: 14px;
  border: 1.5px solid var(--riga);
  background: var(--carta);
  cursor: pointer;
  text-align: left;
  min-height: 54px;
  width: 100%;
  transition: background var(--transizione), border-color var(--transizione);
}

.bolla-momento-ora {
  font-family: var(--font-testo);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tenue);
  letter-spacing: 0.04em;
  line-height: 1;
}

.bolla-momento-titolo {
  font-family: var(--font-testo);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--inchiostro);
  line-height: 1.2;
}

.bolla-momento.selezionata {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
}

.bolla-momento.selezionata .bolla-momento-ora {
  color: rgba(255,255,255,0.55);
}

.bolla-momento.selezionata .bolla-momento-titolo {
  color: var(--carta);
}

[data-tema="sera"] .bolla-momento {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}

[data-tema="sera"] .bolla-momento.selezionata {
  background: var(--oro);
  border-color: var(--oro);
}

[data-tema="sera"] .bolla-momento.selezionata .bolla-momento-ora {
  color: rgba(255,255,255,0.6);
}

[data-tema="sera"] .bolla-momento.selezionata .bolla-momento-titolo {
  color: var(--carta);
}

/* --- Tipo picker (programma / cucina / bar) --- */
.tipo-picker {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.375rem;
}

.tipo-pill {
  padding: 0.45rem 1rem;
  border-radius: 20px;
  border: 1.5px solid var(--riga);
  background: var(--carta);
  color: var(--corpo);
  font-family: var(--font-testo);
  font-size: 0.9rem;
  font-weight: 500;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--transizione), border-color var(--transizione), color var(--transizione);
}

.tipo-pill.attiva {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--carta);
}

[data-tema="sera"] .tipo-pill {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  color: var(--corpo);
}

[data-tema="sera"] .tipo-pill.attiva {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--carta);
}

/* --- Wizard upload foto --- */
.wizard-upload {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: var(--spazio-m);
  padding-bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
  background: var(--carta);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.06);
}

[data-tema="sera"] .wizard-upload {
  border-color: var(--riga-forte);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}

@media (min-width: 640px) {
  .wizard-upload {
    padding-bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
    padding-left: var(--spazio-m);
    padding-right: var(--spazio-m);
  }
}

.wizard-barra-passi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.wizard-dot {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--riga);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tenue);
  flex-shrink: 0;
  transition: background var(--transizione), border-color var(--transizione), color var(--transizione);
}

.wizard-dot.attivo {
  border-color: var(--inchiostro);
  background: var(--inchiostro);
  color: var(--carta);
}

.wizard-dot.completato {
  border-color: var(--salvia);
  background: var(--salvia);
  color: var(--carta);
}

.wizard-linea-conn {
  flex: 1;
  max-width: 4rem;
  height: 1px;
  background: var(--riga);
}

.wizard-schermata {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wizard-titolo {
  font-family: var(--font-testo);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--inchiostro);
  margin: 0;
  line-height: 1.3;
}
#wizard-playlist .wizard-titolo {
  text-align: center;
}

.wizard-guida {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--corpo);
  margin: 0;
}

.wizard-facoltativo {
  color: var(--tenue);
}

.wizard-upload .campo .etichetta {
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--corpo);
}


.wizard-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.25rem;
  padding: 0.75rem var(--spazio-m) 0.875rem;
  background: rgba(250, 250, 250, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--riga);
}

@media (min-width: 640px) {
  .wizard-nav {
    padding-left: calc((100% - var(--larghezza-max)) / 2 + var(--spazio-m));
    padding-right: calc((100% - var(--larghezza-max)) / 2 + var(--spazio-m));
  }
}

[data-tema="sera"] .wizard-nav {
  background: rgba(20, 31, 25, 0.92);
}

.wizard-nav .btn-primario {
  width: 100%;
  text-align: center;
}

.wizard-nav .btn-testo {
  align-self: center;
  font-size: 0.8125rem;
  min-height: 44px;
}
/* Wizard corti (playlist, asta): nav inline, non fixed */
#wizard-playlist .wizard-nav,
#wizard-asta .wizard-nav {
  position: static;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
  padding: var(--spazio-s) 0 0;
}
#wizard-playlist,
#wizard-asta {
  padding-bottom: var(--spazio-m);
}
/* Wizard foto: nav inline (come playlist/asta) — padding ridotto */
#wizard-upload {
  padding-bottom: var(--spazio-l);
}
#wizard-upload .wizard-nav {
  position: static;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
  padding: var(--spazio-s) 0 0;
}

.zona-upload-grande {
  min-height: 160px;
}

.zona-upload-grande .label-upload {
  gap: 0.875rem;
}

.wp3-scelta-pulsanti {
  display: flex;
  gap: var(--spazio-s);
  justify-content: center;
  padding: var(--spazio-m) var(--spazio-s);
}

.wp3-scelta-pulsanti .btn-primario {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* input file nascosto: outline rimosso perché il focus visivo è gestito dalla label */
#input-file,
#input-file-camera {
  outline: none;
}

.upload-testo-grande {
  font-family: var(--font-testo);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--inchiostro);
}

.wizard-successo-schermata {
  align-items: center;
  text-align: center;
  padding-top: var(--spazio-m);
  gap: var(--spazio-m);
}

.wizard-successo-schermata #btn-wizard-galleria,
.wizard-successo-schermata .wizard-btn-altra,
.wizard-successo-schermata #btn-plw-altra {
  width: 100%;
}

/* Pulsante dedica nel wizard playlist: azzurro per sposo, rosa per sposa */
#btn-plw-altra[data-dedica="sposo"] {
  background: var(--carta);
  color: #4A7FA6;
  border: 2px solid #4A7FA6;
}
#btn-plw-altra[data-dedica="sposa"] {
  background: var(--carta);
  color: #A95743;
  border: 2px solid #C45C78;
}
[data-tema="sera"] #btn-plw-altra[data-dedica="sposo"] {
  background: transparent;
  color: #6AAAE8;
  border-color: #6AAAE8;
}
[data-tema="sera"] #btn-plw-altra[data-dedica="sposa"] {
  background: transparent;
  color: #D97A90;
  border-color: #D97A90;
}

.wizard-ok-icona {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--salvia-testo);
  color: var(--salvia-testo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wizard-btn-altra {
  border: 1.5px solid var(--oro);
  border-radius: 100px;
  padding: 0 var(--spazio-m);
  min-height: 44px;
  white-space: nowrap;
}

[data-tema="sera"] .wizard-btn-altra {
  border-color: var(--oro);
}

[data-tema="sera"] .wizard-dot.attivo {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--carta);
}

[data-tema="sera"] .wizard-ok-icona {
  border-color: var(--salvia);
  color: var(--salvia);
}

/* --- Guestbook audio/video --- */
.blocco-registrazione {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-m);
}

.azioni-reg {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xs);
}

.btn-registra {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  background: var(--inchiostro);
  color: var(--carta);
  border: 1.5px solid var(--inchiostro);
  padding: 1rem var(--spazio-s);
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--raggio);
  min-height: 52px;
  transition: background var(--transizione), border-color var(--transizione);
}

.btn-registra:hover { background: var(--corpo); border-color: var(--corpo); }

.btn-reg-video {
  background: transparent;
  color: var(--inchiostro);
}

.btn-reg-video:hover { background: var(--riga); border-color: var(--inchiostro); }

[data-tema="sera"] .btn-reg-video { color: var(--inchiostro); border-color: var(--riga-forte); }
[data-tema="sera"] .btn-reg-video:hover { background: rgba(255,255,255,.06); }

.reg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--errore);
  flex-shrink: 0;
}

.controlli-reg {
  display: flex;
  align-items: center;
  gap: var(--spazio-m);
}

.timer-reg {
  font-family: var(--font-titoli);
  font-size: 1.8rem;
  font-style: italic;
  color: var(--oro-testo);
}

.btn-ferma {
  background: var(--errore);
}
.btn-ferma:hover { background: var(--errore-chiaro); }

.anteprima-reg {
  width: 100%;
}

.player-video {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
  border-radius: var(--raggio);
}

/* --- Player audio custom --- */
.player-custom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--carta-2);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-top: var(--spazio-xs);
}

[data-tema="sera"] .player-custom {
  background: rgba(255,255,255,.06);
}

.player-btn-play {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--inchiostro);
  color: var(--carta);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transizione);
}

.player-btn-play:hover { background: var(--corpo); }

.player-btn-play svg {
  width: 16px;
  height: 16px;
  display: block;
}

.ico-play { margin-left: 2px; }

.player-linea {
  flex: 1;
  height: 3px;
  background: var(--riga-forte);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.player-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--oro);
  border-radius: 2px;
  width: 0%;
  pointer-events: none;
}

.player-tempo {
  font-size: 0.78rem;
  color: var(--tenue);
  white-space: nowrap;
  min-width: 2.4rem;
  text-align: right;
  letter-spacing: 0.04em;
}

/* --- Card messaggi vocali --- */
.messaggio-vocale {
  background: var(--carta);
  border-radius: 14px;
  padding: var(--spazio-s) var(--spazio-m);
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.04);
}

[data-tema="sera"] .messaggio-vocale {
  background: var(--carta-2);
  border-color: var(--riga);
  box-shadow: none;
}

.vocale-didascalia {
  font-style: italic;
  margin: 0.3rem 0 0.6rem;
}

.rsvp-nota {
  font-style: italic;
  margin-top: 0.3rem;
  font-size: 1rem;
  color: var(--corpo);
}

.separatore-o {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
}

.separatore-o .riga-divisoria {
  flex: 1;
  margin: 0;
}

.o-testo {
  white-space: nowrap;
  color: var(--tenue);
}

.btn-carica-pill {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.45rem;
  padding: 0 1.1rem;
  min-height: 44px;
  border: 1.5px solid var(--riga-forte);
  border-radius: 22px;
  font-family: var(--font-testo);
  font-size: 0.9rem;
  color: var(--corpo);
  cursor: pointer;
  transition: border-color var(--transizione), color var(--transizione);
}
.btn-carica-pill svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-carica-pill:hover { border-color: var(--inchiostro); color: var(--inchiostro); }
[data-tema="sera"] .btn-carica-pill { border-color: var(--riga-forte); }
[data-tema="sera"] .btn-carica-pill:hover { border-color: var(--inchiostro); color: var(--inchiostro); }

/* --- Lightbox --- */
/* Desktop: griglia 3 colonne — [‹] [foto] [›], piede allineato alla colonna foto */
.lightbox {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 300;
  display: grid;
  grid-template-columns: 1fr;  /* arena piena larghezza, poi piede */
  grid-template-rows: 1fr auto;
  padding: var(--spazio-s) var(--spazio-s) calc(var(--spazio-s) + env(safe-area-inset-bottom, 0px));
  row-gap: var(--spazio-s);
  overflow: hidden; /* contiene il ::before blur (inset: -10%) entro i bordi del lightbox */
}

/* Nasconde barra-tab e header quando il lightbox è aperto */
body:has(#lightbox:not([hidden])) .barra-tab { display: none !important; }

.lb-top-azioni {
  position: absolute;
  top: var(--spazio-s);
  right: var(--spazio-s);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lightbox-chiudi {
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--spazio-xs);
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Arena: display:contents su desktop — prev/contenuto/next diventano figli diretti
   del grid lightbox (tramite subgrid) — ma usiamo un grid interno più semplice */
.lightbox-arena {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  column-gap: var(--spazio-xs);
  min-height: 0;
}
/* Sfondo sfocato per foto portrait (come iOS Photos / Google Photos)
   Sul #lightbox (stacking context z-300): ::before con z-index -1 va sotto
   tutta la UI senza toccare il grid layout dell'arena */
#lightbox.lb-portrait::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: var(--lb-blur-url);
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.45) saturate(1.3);
  z-index: -1;
  pointer-events: none;
}

/* Frecce stile Apple/Google: cerchio frosted-glass */
.lightbox-prev,
.lightbox-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.9);
  padding: 0;
  min-height: 0;
  min-width: 0;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255,255,255,.24);
  color: #fff;
}
.lightbox-prev:disabled,
.lightbox-next:disabled {
  opacity: 0;
  pointer-events: none;
}

.lightbox-contenuto {
  min-width: 0;
  max-height: 78dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 78dvh;
  object-fit: contain;
  border-radius: var(--raggio);
}
/* Placeholder durante il caricamento: evita collasso a 0×0 e flash "stretta→larga" */
.lightbox-img--carica {
  min-width: min(200px, 50vw);
  min-height: 30dvh;
  background: rgba(255,255,255,.04);
  border-radius: var(--raggio);
}
@media (max-width: 639px) {
  .lightbox-img--carica { min-width: 60vw; min-height: 40dvh; border-radius: 0; }
}

/* Piede: allineato al contenuto grazie al grid dell'arena */
.lightbox-piede {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* su desktop: margine sinistro = larghezza freccia + gap per allinearsi al bordo foto */
  padding-left: calc(44px + var(--spazio-xs));
  padding-right: calc(44px + var(--spazio-xs));
  padding-top: 0;
}

/* Mobile: flex column, frecce in overlay centrate sulla foto */
@media (max-width: 639px) {
  .lightbox {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
    padding-top: calc(var(--spazio-s) + env(safe-area-inset-top, 0px));
    gap: 0;
  }
  .lightbox-arena {
    display: block;
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
  }
  .lightbox-prev,
  .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
  }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-contenuto {
    width: 100%;
    height: 100%;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
  }
  .lightbox-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
  }
  .lightbox-piede {
    padding: var(--spazio-s) var(--spazio-s) calc(var(--spazio-s) + env(safe-area-inset-bottom, 0px));
    width: 100%;
    overflow-y: auto;
    flex: 0 0 auto;
    max-height: 26dvh;
    min-height: 0;
  }
  /* Foto con rapporto estremo (screenshot lunghi, panorami verticali):
     occupa tutta la larghezza, si scrolla verticalmente come iOS Photos */
  .lightbox-contenuto--scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .lightbox-img--extreme {
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0;
  }
  .lb-caption {
    font-size: 1rem;
    font-weight: 700;
  }
  .lb-autore {
    font-size: 0.72rem;
  }
}

.lightbox-video {
  max-width: 100%;
  max-height: 78dvh;
}

/* Piede info lightbox — ordine: caption (titolo) → autore+reazioni → voters */
.lightbox-piede {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-top: var(--spazio-s);
}
.lb-caption {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  white-space: normal;
  line-height: 1.35;
  order: 0;
}
.lb-caption:empty {
  display: none;
}
.lb-azioni-riga {
  display: flex;
  align-items: center;
  gap: 8px;
  order: 1;
}
.lb-autore {
  color: rgba(255,255,255,.6);
  font-size: .78rem;
  text-transform: none;
  letter-spacing: 0;
  flex-shrink: 0;
}
.lb-autore .profilo-chip-txt {
  font-size: .78rem;
}
/* Chip autore nel lightbox — testo leggermente attenuato rispetto alla caption */
.lb-autore .profilo-chip {
  opacity: 0.85;
}

/* --- Pill slideshow — affiancato alla X nel wrapper .lb-top-azioni --- */
.lb-btn-slideshow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 100px;
  color: rgba(255, 255, 255, .65);
  font-size: .78rem;
  font-weight: 500;
  font-family: var(--font-testo);
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  min-height: 44px;
}
.lb-btn-slideshow::after {
  content: '';
  position: absolute;
  inset: -6px;
}
.lb-btn-slideshow:hover,
.lb-btn-slideshow:active {
  background: rgba(201, 168, 76, .22);
  color: #C9A84C;
  border-color: rgba(201, 168, 76, .45);
}

/* --- Reazioni foto nel lightbox --- */
.lb-reazioni {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reazione-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.reactor-toggle-btn {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: .8;
  transition: opacity .15s;
  margin-top: 2px;
}
.reactor-toggle-btn:hover {
  opacity: 1;
}
.reactor-prev {
  display: flex;
  align-items: center;
}
.reactor-prev-avt {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .44rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,.22);
  margin-left: -8px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.reactor-prev-avt:first-child {
  margin-left: 0;
}
.reactor-prev-avt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reactor-prev-piu {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  font-family: var(--font-testo);
  margin-left: 4px;
}
.reactor-chevron {
  color: rgba(255,255,255,.75);
  margin-left: 2px;
  flex-shrink: 0;
  transition: transform .2s;
}
.reactor-toggle-btn[aria-expanded="true"] .reactor-chevron {
  transform: rotate(90deg);
  color: #fff;
}
@keyframes reazione-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.55); }
  60%  { transform: scale(.85); }
  80%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.reazione-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  border-radius: 22px;
  color: rgba(255,255,255,.88);
  padding: 4px 10px 4px 8px;
  min-height: 44px;
  cursor: pointer;
  font-size: .82rem;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.reazione-btn::after {
  content: attr(data-label);
  font-size: .68rem;
  font-weight: 500;
  opacity: .6;
  white-space: nowrap;
  letter-spacing: .01em;
}
@media (max-width: 639px) {
  .reazione-btn::after {
    display: none;
  }
}
.reazione-btn:hover {
  color: #fff;
}
.reazione-btn.attiva {
  background: none;
}
/* eccezione documentata: colore semantico reazione cuore — rosso invariante per riconoscibilità */
.reazione-btn[data-tipo="cuore"].attiva {
  color: #E8394D;
}
.reazione-btn[data-tipo="like"].attiva {
  color: var(--oro);
}
/* Icona si riempie quando la reazione è attiva */
.reazione-btn.attiva svg path,
.reazione-btn.attiva svg polygon,
.reazione-btn.attiva svg circle {
  fill: currentColor;
}
/* Animazione pop al click */
.reazione-btn.pop svg,
.scheda-reaz-btn.pop svg {
  animation: reazione-pop .42s cubic-bezier(.36,.07,.19,.97) both;
}
.reazione-count {
  font-size: .88rem;
  font-weight: 800;
  min-width: 12px;
  text-align: left;
  order: 10;
  letter-spacing: -.02em;
}
/* 0 reazioni: numero più tenue per non distrarre */
.reazione-btn:not(.attiva) .reazione-count {
  opacity: .45;
}
.reactor-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  align-items: flex-start;
}
.reactor-gruppo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.reactor-tipo-icona {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.reactor-gruppo[data-tipo="cuore"] .reactor-tipo-icona svg path {
  fill: #E8394D;
  stroke: none;
}
.reactor-gruppo[data-tipo="like"] .reactor-tipo-icona svg path {
  fill: var(--oro);
  stroke: none;
}
.reactor-tipo-icona svg {
  width: 16px;
  height: 16px;
}
.reactor-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  padding: 2px 8px 2px 2px;
  transition: background .12s;
}
.reactor-chip.clicca {
  cursor: pointer;
}
.reactor-chip.clicca:hover {
  background: rgba(255,255,255,.2);
}
.reactor-avatar-mini {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.reactor-avatar-mini img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reactor-chip-nome {
  font-size: .73rem;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  white-space: nowrap;
}

/* Badge reazioni sulle card della griglia */
.scheda-reaz-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 2px 4px;
  z-index: 2;
}
.scheda-reaz-btn {
  background: none;
  border: none;
  padding: 2px 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  min-height: 0;
  border-radius: 6px;
  transition: color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.scheda-reaz-btn:active {
  transform: scale(.82);
}
/* eccezione: colori semantici invarianti tra i temi (rosso = cuore, oro = like) */
.scheda-reaz-btn[data-tipo="cuore"] {
  color: #E8394D;
}
.scheda-reaz-btn[data-tipo="cuore"].attivo {
  color: #E8394D;
  background: rgba(232,57,77,.22);
}
.scheda-reaz-btn[data-tipo="like"] {
  color: var(--oro-chiaro);
}
.scheda-reaz-btn[data-tipo="like"].attivo {
  color: var(--oro-chiaro);
  background: rgba(194,163,104,.22);
}
.scheda-reaz-count {
  line-height: 1;
}
.reaz-sep {
  width: 1px;
  height: 10px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
  margin: 0 1px;
}

/* --- Mini-player musicale (Spotify / YouTube / Apple Music preview) --- */
.mini-player {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 250;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mp-card {
  background: var(--carta);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  padding: var(--spazio-s) var(--spazio-m) calc(var(--spazio-m) + env(safe-area-inset-bottom, 0px));
  position: relative;
  animation: social-card-entra .42s cubic-bezier(.34,1.36,.64,1) both;
}
.mp-handle {
  width: 36px;
  height: 4px;
  background: var(--riga-forte);
  border-radius: 2px;
  margin: 0 auto var(--spazio-s);
}
.mp-chiudi {
  position: absolute;
  top: var(--spazio-s);
  right: var(--spazio-m);
  background: var(--carta-2);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tenue);
}
.mp-chiudi::after {
  content: '';
  position: absolute;
  inset: -8px;
}
.mp-embed iframe {
  width: 100%;
  border: none;
  border-radius: 12px;
  display: block;
}
.mp-yt-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}
.mp-yt-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.mp-audio {
  display: none;
}
.mp-song-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 10px;
}
.mp-song-cover {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.mp-song-texts { flex: 1; min-width: 0; }
.mp-song-titolo {
  font-weight: 700;
  font-size: 1rem;
  color: var(--inchiostro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.mp-song-artista {
  font-size: 0.82rem;
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 0;
}
/* Card Apple Music — artwork + testo, senza sfondo grigio */
.mp-apple-card {
  display: flex;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  min-height: 112px;
  margin-bottom: 2px;
}
.mp-apple-artwork {
  width: 112px;
  height: 112px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.mp-apple-artwork-ph {
  background: var(--riga-forte);
}
.mp-apple-details {
  flex: 1;
  min-width: 0;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.mp-apple-titolo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--inchiostro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.mp-apple-artista {
  font-size: 0.88rem;
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 0;
}
.mp-apple-badge {
  display: inline-block;
  margin-top: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tenue);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.mp-apple-open {
  display: block;
  text-align: center;
  margin-top: var(--spazio-xs);
}
.mp-apple-btn-am {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 6px 13px;
  background: #FC3C44;
  color: #fff;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
  transition: opacity 0.15s;
}
.mp-apple-btn-am:hover { opacity: 0.85; }
[data-tema="sera"] .mp-apple-btn-am { background: #e0323e; }
.mp-controlli {
  display: flex;
  justify-content: center;
  padding-top: var(--spazio-s);
}
.mp-toggle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--inchiostro);
  color: var(--carta);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--transizione);
}
.mp-toggle-btn:active { opacity: 0.75; }
[data-tema="sera"] .mp-card {
  background: var(--carta);
}
[data-tema="sera"] .mp-chiudi {
  background: var(--carta-2);
}

/* --- Social overlay (profilo ospite / like / match) --- */
.social-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 250;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@keyframes social-card-entra {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.social-card {
  background: var(--carta);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--spazio-s) var(--spazio-m) calc(var(--spazio-m) + env(safe-area-inset-bottom, 0px));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: social-card-entra .42s cubic-bezier(.34,1.36,.64,1) both;
}
.social-handle {
  width: 36px;
  height: 4px;
  background: var(--riga);
  border-radius: 2px;
  margin: 0 auto calc(var(--spazio-s) * -1);
  flex-shrink: 0;
}
.btn-chiudi-social {
  position: absolute;
  top: var(--spazio-s);
  right: var(--spazio-s);
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: var(--carta-2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tenue);
}
.social-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 44px;
}
.social-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.social-avatar {
  width: 70px;
  height: 70px;
  min-width: 70px;
  border-radius: 50%;
  background: var(--salvia-tenue);
  color: var(--inchiostro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  transition: box-shadow .3s;
}
.social-avatar--match {
  box-shadow: 0 0 0 2.5px var(--carta), 0 0 0 4.5px var(--oro);
}
.social-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.social-nome {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--inchiostro);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.social-gradimento {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--rosa-testo);
  background: color-mix(in srgb, var(--rosa) 10%, var(--carta));
  border-radius: 20px;
  padding: 3px 10px 3px 8px;
  width: fit-content;
}
.social-gradimento--reciproco {
  color: var(--oro-testo);
  background: color-mix(in srgb, var(--oro) 12%, var(--carta));
}
.social-likers {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--riga);
  padding-top: 12px;
}
.social-likers-etichetta {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
  font-weight: 700;
  color: var(--tenue);
  white-space: nowrap;
}
.social-likers-avatars {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.social-liker-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.social-liker-item[data-userid] {
  cursor: pointer;
}
.social-liker-item[data-userid]:hover .social-liker-avatar {
  opacity: .75;
  transform: scale(1.06);
}
.social-liker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--salvia-tenue);
  color: var(--inchiostro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  transition: opacity .15s, transform .15s;
  flex-shrink: 0;
}
.social-liker-avatar--me {
  background: color-mix(in srgb, var(--oro) 22%, var(--carta));
}
.social-liker-nome {
  font-size: .72rem;
  font-weight: 600;
  color: var(--corpo);
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-liker-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.social-corpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.social-sezione {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-sezione-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tenue);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.social-sezione-count {
  font-size: .7rem;
  font-weight: 600;
  color: var(--tenue);
  background: var(--carta-2);
  border-radius: 10px;
  padding: 1px 7px;
  letter-spacing: 0;
  text-transform: none;
}
.social-foto-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border-radius: 12px;
  overflow: hidden;
}
.social-foto-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
}
.social-foto-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-foto-reaz {
  position: absolute;
  bottom: 5px;
  left: 5px;
  background: rgba(0, 0, 0, .50);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  line-height: 1;
}
.social-foto-reaz svg {
  color: var(--rosa-testo);
  flex-shrink: 0;
}
.social-canzoni-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
}
.social-canzone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--riga);
  cursor: pointer;
  transition: background .12s;
}
.social-canzone:hover {
  background: color-mix(in srgb, var(--inchiostro) 4%, var(--carta));
}
.social-canzone:last-child {
  border-bottom: none;
}
.social-canzone.social-comune {
  background: color-mix(in srgb, var(--oro) 10%, var(--carta));
}
.social-canzone-cover {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: var(--carta);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tenue);
  overflow: hidden;
  flex-shrink: 0;
}
.social-canzone-cover--img {
  background-size: cover;
  background-position: center;
}
.social-canzone-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.social-canzone-titolo {
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--inchiostro);
}
.social-canzone-artista {
  font-size: .78rem;
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-canzone-destra {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.social-canzone-voti {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--rosa-testo);
  white-space: nowrap;
}
.social-voti-panel {
  flex-basis: 100%;
  display: none;
  border-top: 1px solid var(--riga);
  padding-top: 10px;
  margin-top: 2px;
}
.social-canzone.aperto {
  background: color-mix(in srgb, var(--carta-2) 55%, var(--carta));
}
.social-canzone.aperto .social-voti-panel {
  display: block;
}
.social-voti-header {
  font-size: .72rem;
  font-weight: 600;
  color: var(--rosa-testo);
  margin: 0 0 8px;
  letter-spacing: .02em;
}
[data-tema="sera"] .social-voti-header {
  color: var(--rosa);
}
.social-voter-lista {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.social-voter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.social-voter-item[data-userid] {
  cursor: pointer;
}
.social-voter-item[data-userid]:hover .social-voter-avatar {
  opacity: .75;
  transform: scale(1.06);
}
.social-voter-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--salvia-tenue);
  color: var(--inchiostro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  transition: opacity .15s, transform .15s;
  flex-shrink: 0;
}
.social-voter-nome {
  font-size: .65rem;
  font-weight: 600;
  color: var(--tenue);
  max-width: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.social-voti-vuoto {
  font-size: .8rem;
  color: var(--tenue);
}
.social-badge-comune {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--oro-testo);
  background: color-mix(in srgb, var(--oro) 15%, var(--carta));
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.social-azioni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.btn-social-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 180px;
  padding: 0 32px;
  min-height: 50px;
  border-radius: 50px;
  border: none;
  background: var(--rosa);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn-social-like:active { transform: scale(.97); }
.btn-social-like:hover { opacity: .88; }
.btn-social-like--attivo {
  background: transparent;
  color: var(--rosa-testo);
  border: 1.5px solid color-mix(in srgb, var(--rosa) 35%, transparent);
}
.btn-social-like--attivo:hover { opacity: .75; }
.social-match-banner {
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--oro) 9%, var(--carta)) 0%,
    color-mix(in srgb, var(--rosa) 6%, var(--carta)) 100%);
  border: 1px solid color-mix(in srgb, var(--oro) 28%, transparent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-match-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  color: var(--oro-testo);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.social-match-chip svg {
  flex-shrink: 0;
}
.social-btn-scrivi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  height: 38px;
  border-radius: 50px;
  background: var(--inchiostro);
  color: var(--carta);
  border: none;
  font-family: var(--font-testo);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s, transform .1s;
}
.social-btn-scrivi:hover { opacity: .85; }
.social-btn-scrivi:active { transform: scale(.97); }
.social-vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--spazio-m) 0;
  color: var(--tenue);
}
.social-vuoto svg {
  width: 32px;
  height: 32px;
  opacity: .35;
}
.social-vuoto p {
  font-size: .9rem;
  margin: 0;
}
.lb-autore[data-user-id]:not([data-user-id=""]) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Badge DM non letti su #btn-utente */
.dm-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #e03e3e;
  color: var(--carta);
  font-size: .62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2.5px solid var(--carta);
  pointer-events: none;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Pulsazione cerchio utente quando ci sono DM non letti */
@keyframes btn-utente-notifica {
  0%   { box-shadow: 0 0 0 0 rgba(224,62,62,.55); }
  60%  { box-shadow: 0 0 0 7px rgba(224,62,62,.0); }
  100% { box-shadow: 0 0 0 0 rgba(224,62,62,.0); }
}
.interruttore-utente:has(.dm-badge:not([hidden])) {
  animation: btn-utente-notifica 1.6s ease-out infinite;
}

/* Sezione messaggi privati nel pannello social */
.social-dm {
  padding-top: var(--spazio-s);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.social-dm:empty { display: none; }
.social-dm-label {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  font-weight: 700;
  color: var(--tenue);
  white-space: nowrap;
}
.social-dm-label::before,
.social-dm-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--riga);
}
.dm-thread {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
  scroll-behavior: smooth;
}
.dm-msg {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 18px;

  line-height: 1.45;
  word-break: break-word;
}
.dm-msg--in {
  align-self: flex-start;
  background: var(--carta);
  border: 1px solid var(--riga-forte);
  color: var(--inchiostro);
  border-bottom-left-radius: 5px;
}
.dm-msg--out {
  align-self: flex-end;
  background: var(--inchiostro);
  color: var(--carta);
  border-bottom-right-radius: 5px;
}
.dm-msg-ora {
  font-size: .65rem;
  opacity: .5;
  margin-top: 2px;
  display: block;
  text-align: right;
}
.dm-msg--in .dm-msg-ora { text-align: left; }
.dm-vuoto {
  text-align: center;
  font-size: .82rem;
  font-style: italic;
  color: var(--tenue);
  padding: 12px 0 4px;
}
.dm-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.dm-input {
  flex: 1;
  min-height: 44px;
  max-height: 100px;
  border: 1.5px solid var(--riga-forte);
  border-radius: 20px;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: 1rem; /* ≥1rem: iOS Safari non fa auto-zoom */
  padding: 9px 14px;
  resize: none;
  outline: none;
  line-height: 1.4;
  overflow-y: auto;
}
.dm-input:focus,
.dm-input:focus-visible {
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(180,150,90,.12);
  background: var(--carta);
  outline: none;
}
.dm-input::placeholder { color: var(--tenue); }
.dm-invia {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--inchiostro);
  color: var(--carta);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity .15s, transform .1s;
  position: relative;
}
.dm-invia::after {
  content: '';
  position: absolute;
  inset: -2px;
}
.svg-send { transform: rotate(-15deg) translate(1px, -1px); }
.dm-invia:hover { opacity: .85; }
.dm-invia:active { transform: scale(.94); }
.dm-invia:disabled { opacity: .35; cursor: default; }

/* Dark mode social */
[data-tema="sera"] .social-likers {
  border-top-color: var(--riga-forte);
}
[data-tema="sera"] .social-canzone-cover {
  background: color-mix(in srgb, var(--inchiostro) 12%, var(--carta));
}
[data-tema="sera"] .social-canzone {
  border-bottom-color: var(--riga-forte);
}
[data-tema="sera"] .social-canzone:hover {
  background: color-mix(in srgb, var(--inchiostro) 6%, var(--carta));
}
[data-tema="sera"] .social-voti-panel {
  border-top-color: var(--riga-forte);
}
[data-tema="sera"] .social-liker-avatar--me {
  background: color-mix(in srgb, var(--oro) 25%, var(--carta-2));
}
[data-tema="sera"] .social-canzone.social-comune {
  background: color-mix(in srgb, var(--oro) 12%, var(--carta));
}
[data-tema="sera"] .social-badge-comune {
  background: color-mix(in srgb, var(--oro) 20%, var(--carta-2));
}
[data-tema="sera"] .social-match-banner {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--oro) 12%, var(--carta-2)) 0%,
    color-mix(in srgb, var(--rosa) 8%, var(--carta-2)) 100%);
}
[data-tema="sera"] .social-match-icona {
  background: color-mix(in srgb, var(--oro) 22%, var(--carta-2));
}
[data-tema="sera"] .social-avatar--match {
  box-shadow: 0 0 0 2.5px var(--carta-2), 0 0 0 4.5px var(--oro);
}
[data-tema="sera"] .btn-chiudi-social {
  background: var(--carta-2);
}
[data-tema="sera"] .social-gradimento--reciproco {
  color: var(--oro-testo);
}
[data-tema="sera"] .social-dm {
  border-top-color: var(--riga-forte);
}
[data-tema="sera"] .dm-msg--in {
  background: color-mix(in srgb, var(--inchiostro) 18%, var(--carta-2));
}
[data-tema="sera"] .dm-input {
  background: var(--carta);
  border-color: var(--riga-forte);
}
[data-tema="sera"] .dm-badge {
  border-color: #141F19;
  background: #cf7070;
}
[data-tema="sera"] .social-match-banner {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--oro) 12%, var(--carta-2)) 0%,
    color-mix(in srgb, var(--rosa) 8%, var(--carta-2)) 100%);
}

/* --- Messaggi overlay (inbox + thread) — z-index 260 sopra social overlay (250) --- */
.messaggi-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 260;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.messaggi-card {
  background: var(--carta);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  height: 88dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: social-card-entra .42s cubic-bezier(.34,1.36,.64,1) both;
}
.messaggi-handle {
  width: 36px;
  height: 4px;
  background: var(--riga);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.messaggi-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--riga);
}
.messaggi-titolo {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--inchiostro);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-btn-nav {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--carta-2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tenue);
  flex-shrink: 0;
  transition: background .15s;
  position: relative;
}
.msg-btn-nav::after {
  content: '';
  position: absolute;
  inset: -4px;
}
.msg-btn-nav:hover { background: color-mix(in srgb, var(--riga-forte) 50%, var(--carta-2)); }
.msg-btn-nav:active { opacity: .75; }

/* Inbox */
.msg-inbox {
  flex: 1;
  overflow-y: auto;
  padding: 4px var(--spazio-s) calc(var(--spazio-s) + env(safe-area-inset-bottom, 0px));
}
.msg-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.msg-conv-item:hover, .msg-conv-item:active {
  background: var(--carta-2);
}
.msg-conv-item + .msg-conv-item {
  border-top: 1px solid var(--riga);
}
.msg-conv-avt {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.msg-conv-avt-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.msg-conv-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.msg-conv-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.msg-conv-nome {
  flex: 1;
  font-weight: 600;
  font-size: .94rem;
  color: var(--inchiostro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-conv-nome--unread { font-weight: 700; }
.msg-conv-ora {
  font-size: .72rem;
  color: var(--tenue);
  flex-shrink: 0;
}
.msg-conv-preview {
  font-size: .82rem;
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-conv-preview--unread {
  color: var(--corpo);
  font-weight: 500;
}
.msg-conv-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: var(--rosa);
  flex-shrink: 0;
}
.msg-vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spazio-xl) var(--spazio-m);
  gap: 10px;
}
.msg-vuoto-icona {
  color: var(--tenue);
  opacity: .45;
}
.msg-vuoto-testo {
  font-size: .94rem;
  font-weight: 600;
  color: var(--inchiostro);
  text-align: center;
}
.msg-vuoto-sub {
  font-size: .82rem;
  color: var(--tenue);
  text-align: center;
  max-width: 240px;
  line-height: 1.45;
}

/* Thread */
.msg-thread-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.msg-thread-full {
  flex: 1;
  overflow-y: auto;
  padding: var(--spazio-s) var(--spazio-s) 8px;
  max-height: none;
}
.msg-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 8px var(--spazio-s) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--riga);
  flex-shrink: 0;
  background: var(--carta);
}

/* Bottone "Scrivi messaggio" nel pannello social */
.social-btn-dm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  background: var(--carta-2);
  border: 1.5px solid var(--riga-forte);
  border-radius: 14px;
  font-size: .9rem;
  font-family: var(--font-testo);
  font-weight: 600;
  color: var(--inchiostro);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.social-btn-dm:hover {
  background: color-mix(in srgb, var(--oro) 8%, var(--carta-2));
  border-color: var(--oro);
}
.social-btn-dm:active { opacity: .82; }
.social-dm-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--tenue);
  text-align: center;
  padding: var(--spazio-xs) var(--spazio-s);
  margin: 0;
}

/* Voce "Messaggi privati" nel profilo */
.profilo-msg-entry {
  cursor: pointer;
  transition: background .12s;
  border-radius: 14px;
}
.profilo-msg-entry:hover, .profilo-msg-entry:active {
  background: var(--carta-2);
}

/* Dark mode messaggi */
[data-tema="sera"] .messaggi-card {
  background: var(--carta);
}
[data-tema="sera"] .messaggi-toolbar {
  border-bottom-color: var(--riga-forte);
}
[data-tema="sera"] .msg-btn-nav {
  background: color-mix(in srgb, var(--inchiostro) 14%, var(--carta-2));
}
[data-tema="sera"] .msg-conv-item:hover,
[data-tema="sera"] .msg-conv-item:active {
  background: color-mix(in srgb, var(--inchiostro) 10%, var(--carta));
}
[data-tema="sera"] .msg-conv-item + .msg-conv-item {
  border-top-color: var(--riga-forte);
}
[data-tema="sera"] .msg-form {
  border-top-color: var(--riga-forte);
  background: var(--carta);
}
[data-tema="sera"] .social-btn-dm {
  background: color-mix(in srgb, var(--inchiostro) 20%, var(--carta-2));
  border-color: var(--riga-forte);
}
[data-tema="sera"] .profilo-msg-entry:hover,
[data-tema="sera"] .profilo-msg-entry:active {
  background: color-mix(in srgb, var(--inchiostro) 10%, var(--carta));
}

/* Rimuove pointer-events:none dal badge DM per renderlo cliccabile */
.dm-badge {
  pointer-events: auto;
  cursor: pointer;
}

/* --- QR overlay --- */
.qr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spazio-m);
}

.qr-box {
  background: var(--carta);
  padding: var(--spazio-l);
  border-radius: var(--raggio);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

.qr-chiudi {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* --- Playlist --- */
.lista-playlist {
  display: flex;
  flex-direction: column;
}

.canzone {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--riga);
  flex-wrap: wrap;
  position: relative;
}

.canzone-evitare {
  opacity: 0.45;
}

.canzone-cover {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 11px;
  overflow: hidden;
  background: color-mix(in srgb, var(--salvia) 10%, var(--carta));
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--inchiostro);
  position: relative;
  align-self: center;
}

.canzone-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover-nota {
  width: 22px;
  height: 22px;
  opacity: 0.28;
  flex-shrink: 0;
}

.canzone-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.canzone-titolo {
  font-family: var(--font-testo);
  font-size: 0.97rem;
  color: var(--inchiostro);
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.canzone-artista {
  font-style: italic;
  flex-shrink: 0;
}

/* → nome: inline nella riga meta, piccolo e discreto */
.canzone-da {
  font-size: 0.72rem;
  color: var(--tenue);
  letter-spacing: 0;
  text-transform: none;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
button.canzone-da {
  cursor: pointer;
}
button.canzone-da:hover {
  color: var(--inchiostro);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.canzone-da span[aria-hidden] {
  opacity: .5;
}
/* cover-play: overlay full-cover con triangolo play centrato */
.cover-play {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: rgba(0,0,0,0.34);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  transition: background var(--transizione);
  z-index: 2;
}
.cover-play svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.cover-play:hover {
  background: rgba(0,0,0,0.52);
}
[data-tema="sera"] .cover-play {
  background: rgba(0,0,0,0.42);
}
[data-tema="sera"] .cover-play:hover {
  background: rgba(0,0,0,0.6);
}

/* canzone-da: solo avatar circolare (nessun testo) */
button.canzone-da {
  display: inline-flex;
  align-items: center;
  padding: 2px 3px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--salvia) 10%, var(--carta));
  border: 1px solid var(--riga);
  cursor: pointer;
}
button.canzone-da:hover {
  background: color-mix(in srgb, var(--salvia) 20%, var(--carta));
  border-color: var(--salvia);
}
[data-tema="sera"] button.canzone-da {
  background: color-mix(in srgb, var(--salvia) 8%, var(--carta-2));
  border-color: var(--riga-forte);
}
[data-tema="sera"] button.canzone-da:hover {
  background: color-mix(in srgb, var(--salvia) 16%, var(--carta-2));
}

span.canzone-da {
  display: inline-flex;
  align-items: center;
}

.canzone-da-avt {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: var(--salvia-tenue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--inchiostro);
  flex-shrink: 0;
}

.canzone-da-riga {
  margin-top: 0.2rem;
  line-height: 1.3;
}
.canzone-da-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-family: var(--font-testo);
  color: var(--corpo);
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  text-align: left;
}
.canzone-da-riga {
  margin: 2px 0 3px;
}
button.canzone-da-label {
  cursor: pointer;
  border-radius: 100px;
  padding: 0.15rem 0.5rem 0.15rem 0.2rem;
  background: var(--carta-2);
  transition: background var(--transizione);
}
button.canzone-da-label:hover {
  background: var(--riga-forte);
}
button.canzone-da-label:focus-visible { outline: none; }
.cda-avt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.52rem;
  font-weight: 700;
  flex-shrink: 0;
}
[data-tema="sera"] button.canzone-da-label {
  background: rgba(255,255,255,.06);
}
[data-tema="sera"] button.canzone-da-label:hover {
  background: rgba(255,255,255,.12);
}

.badge-stato {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--raggio);
  font-size: 0.72rem;
}

.badge-verde {
  background: var(--salvia);
  color: var(--carta);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.badge-rosso {
  background: rgba(139,58,58,.12);
  color: var(--errore);
}
[data-tema="sera"] .badge-rosso {
  background: rgba(207,112,112,.10);
}

.btn-voto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: none;
  border: none;
  padding: 0.3rem 0.4rem;
  min-height: 44px;
  min-width: 2.4rem;
  cursor: pointer;
  color: var(--tenue);
  transition: color var(--transizione);
  flex-shrink: 0;
}

.btn-voto:hover:not(:disabled) {
  color: var(--rosa-testo);
}

.btn-voto.votato {
  color: var(--rosa-testo);
}

.voto-cuore { font-size: 1.2rem; }
.voto-numero { font-size: 0.82rem; font-family: var(--font-testo); font-weight: 600; }

/* Bubble votanti */
.voters-list {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 0.35rem;
  flex-wrap: nowrap;
}
.voter-bubble {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--riga-forte);
  background: var(--carta);
  color: var(--inchiostro);
  font-size: 0.55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: pointer;
  padding: 0;
  margin-right: -5px;
  flex-shrink: 0;
  transition: transform 0.15s, z-index 0s;
  position: relative;
  z-index: 1;
}
.voter-bubble::after {
  content: '';
  position: absolute;
  inset: -10px;
}
.voter-bubble:hover {
  transform: scale(1.2) translateY(-2px);
  z-index: 10;
}
.voter-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: circle(50%);
}
.voter-piu {
  margin-left: 10px;
  font-size: 0.65rem;
  color: var(--tenue);
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.voter-piu:hover {
  color: var(--oro-testo);
}
[data-tema="sera"] .voter-bubble {
  border-color: var(--riga-forte);
  background: var(--carta);
}

/* Pannello apprezzamenti (espandibile al tap della card) */
/* Chevron rotante sul voters-list quando panel è aperto */
.voters-list-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 16px;
  color: var(--tenue);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .15s;
  align-self: center;
}
.voters-list.panel-aperto .voters-list-chevron {
  transform: rotate(90deg);
  color: var(--inchiostro);
}
[data-tema="sera"] .voters-list.panel-aperto .voters-list-chevron { color: var(--oro); }

/* --- Voters panel (chip list) --- */
.canzone-voters-panel {
  flex-basis: 100%;
  border-top: 1px solid var(--riga);
  padding: 8px 0.85rem 10px;
}
.voters-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.voter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 3px;
  border-radius: 100px;
  background: var(--carta-2);
  border: 1px solid var(--riga-forte);
  font-family: var(--font-testo);
  max-width: 110px;
}
.voter-chip--link {
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.voter-chip--link:hover {
  background: color-mix(in srgb, var(--inchiostro) 7%, var(--carta));
  border-color: var(--inchiostro);
}
.voter-chip-avt {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .5rem;
  font-weight: 700;
  color: #fff;
}
.voter-chip-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voter-chip-nome {
  font-size: .72rem;
  font-weight: 500;
  color: var(--corpo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
[data-tema="sera"] .voter-chip {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
[data-tema="sera"] .voter-chip--link:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--oro);
}

/* Legacy - mantieni per backward compat nel codice non ancora migrato */
.canzone-panel-label { margin: 0; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.canzone-voters-lista { display: inline; }
.canzone-voter-nome { display: inline; background: none; border: none; color: var(--inchiostro); font-size: inherit; font-weight: 600; font-family: var(--font-testo); cursor: pointer; padding: 0; min-height: 0; }
.canzone-voter-nome[data-userid]:hover { color: var(--oro-testo); text-decoration: underline; }
.canzone-voters-lista .canzone-voter-nome::after { content: ', '; font-weight: 400; color: var(--tenue); }
.canzone-voters-lista .canzone-voter-nome:last-child::after { content: ''; }
.canzone-voter-num { color: var(--tenue); font-weight: 400; font-size: 0.75rem; margin-right: 2px; }

/* Cuori volanti al voto */
@keyframes cuore-vola {
  0%   { opacity: 1; transform: translate(0, 0) scale(var(--scala, 1)); }
  80%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -80px)) scale(calc(var(--scala, 1) * 0.4)); }
}
.cuore-volo {
  position: fixed;
  pointer-events: none;
  font-size: 1.4rem;
  color: var(--rosa-testo);
  z-index: 9999;
  transform-origin: center;
  animation: cuore-vola 0.8s ease-out forwards;
  user-select: none;
  line-height: 1;
}

.azioni-staff-canzone {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: var(--spazio-xs);
  width: 100%;
}

/* --- RSVP --- */
.campo-presenza {
  border: none;
  padding: 0;
}

.campo-presenza legend {
  margin-bottom: 0.4rem;
}

.radio-gruppo {
  display: flex;
  gap: var(--spazio-m);
  flex-wrap: wrap;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  min-height: 44px;
  font-family: var(--font-testo);
  font-size: 1rem;
  cursor: pointer;
  color: var(--corpo);
}

.radio-label input[type="radio"] {
  accent-color: var(--salvia);
  width: 1.1rem;
  height: 1.1rem;
}

.contenitore-rsvp {
  width: 100%;
}

.conferma-rsvp {
  text-align: center;
  padding: var(--spazio-l) 0;
}

.conferma-rsvp .ornamento {
  margin: var(--spazio-s) auto;
}

.conferma-testo {
  font-style: italic;
  color: var(--inchiostro);
}

/* Staff RSVP panel */
.rsvp-riepilogo {
  margin-bottom: var(--spazio-m);
  padding: var(--spazio-m);
}

.rsvp-gruppo-label {
  color: var(--tenue);
  margin-bottom: var(--spazio-xs);
}

.rsvp-gruppo-label:not(:first-child) {
  margin-top: var(--spazio-m);
  padding-top: var(--spazio-m);
  border-top: 1px solid var(--riga);
}

.rsvp-stats {
  display: flex;
  justify-content: space-around;
  gap: var(--spazio-s);
}

.rsvp-stats-secondarie .numero-stat {
  font-size: 1.5rem;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex: 1;
}

.stat-centrale {
  border-left: 1px solid var(--riga);
  border-right: 1px solid var(--riga);
}

.numero-stat {
  font-family: var(--font-titoli);
  font-size: 2rem;
  font-style: italic;
  color: var(--inchiostro);
  line-height: 1;
}

[data-tema="sera"] .rsvp-riepilogo {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}

.rsvp-riga {
  padding: var(--spazio-xs) 0;
  border-bottom: 1px solid var(--riga);
}

.rsvp-header {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  margin-bottom: 0.2rem;
}

/* --- Info & Avvisi --- */
.blocco-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--riga);
}

.blocco-etichetta {
  display: block;
  color: var(--salvia-testo);
}

.info-luogo-nome {
  font-family: var(--font-titoli);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--inchiostro);
}

/* --- Mappa embedded Google Maps --- */
.info-mappa-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--carta-2);
  margin: var(--spazio-s) 0;
}
@media (min-width: 640px) {
  .info-mappa-wrap { aspect-ratio: 16 / 9; }
}
.info-mappa-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Carousel foto del posto */
.info-foto-carousel {
  display: flex;
  gap: var(--spazio-s);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: var(--spazio-xs) 0 var(--spazio-s);
}
.info-foto-carousel::-webkit-scrollbar { display: none; }

.info-foto-skeleton {
  flex: 0 0 75%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--carta-2) 25%, var(--riga) 50%, var(--carta-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-slide 1.4s ease-in-out infinite;
}
@keyframes skeleton-slide {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
[data-tema="sera"] .info-foto-skeleton {
  background: linear-gradient(90deg, var(--carta-2) 25%, rgba(255,255,255,.06) 50%, var(--carta-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-slide 1.4s ease-in-out infinite;
}

.info-foto-item {
  flex: 0 0 75%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--carta-2);
}
/* Slot in attesa del download della singola foto */
.info-foto-item.info-foto-loading {
  background: linear-gradient(90deg, var(--carta-2) 25%, var(--riga) 50%, var(--carta-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-slide 1.4s ease-in-out infinite;
}
[data-tema="sera"] .info-foto-item.info-foto-loading {
  background: linear-gradient(90deg, var(--carta-2) 25%, rgba(255,255,255,.06) 50%, var(--carta-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-slide 1.4s ease-in-out infinite;
}
/* Fade-in su ogni foto quando appare */
@keyframes info-foto-entra {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}
.info-foto-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: opacity .15s;
  animation: info-foto-entra .3s ease both;
}
.info-foto-item img:hover { opacity: .88; }

/* Lightbox foto luogo */
.info-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-lb[hidden] { display: none; }
.info-lb-img {
  max-width: 95vw;
  max-height: 90dvh;
  object-fit: contain;
  border-radius: 10px;
}
.info-lb-chiudi {
  position: absolute;
  top: var(--spazio-s);
  right: var(--spazio-s);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.info-lb-chiudi:hover { background: rgba(255,255,255,.28); }
@media (min-width: 640px) {
  .info-foto-item { flex-basis: 45%; max-width: 300px; }
}

/* Azioni mappa (bottone Indicazioni) */
.info-mappa-azioni {
  display: flex;
  gap: var(--spazio-s);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--spazio-xs) 0;
}

/* Dropdown autocomplete Google Maps Places */
.pac-container {
  z-index: 1100 !important;
  border-radius: 12px !important;
  border: 1px solid var(--riga-forte) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
  margin-top: 4px;
}
[data-tema="sera"] .pac-container {
  background: var(--carta) !important;
  border-color: var(--riga-forte) !important;
}
[data-tema="sera"] .pac-item {
  background: var(--carta) !important;
  color: var(--corpo) !important;
  border-color: var(--riga) !important;
}
[data-tema="sera"] .pac-item:hover,
[data-tema="sera"] .pac-item-selected {
  background: var(--carta-2) !important;
}
[data-tema="sera"] .pac-item-query { color: var(--inchiostro) !important; }

/* FAQ pubblica */
.faq-voce {
  border-bottom: 1px solid var(--riga);
  padding: var(--spazio-xs) 0;
}

.faq-voce:last-child {
  border-bottom: none;
}

.faq-domanda {
  font-family: var(--font-testo);
  font-size: 1rem;
  color: var(--inchiostro);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
}

.faq-domanda::after {
  content: '+';
  color: var(--salvia-testo);
  font-size: 1.1rem;
  flex-shrink: 0;
}

details[open] .faq-domanda::after {
  content: '−';
}

.faq-risposta {
  font-size: 1rem;
  color: var(--corpo);
  padding: 0.4rem 0 0.6rem;
  line-height: 1.6;
}

/* FAQ editor (staff) */
.editor-faq {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-s);
}

.faq-riga-editor {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--spazio-xs);
  align-items: end;
}

/* Avvisi */
.avviso {
  background: var(--carta-2);
  border: 1px solid var(--riga);
  border-radius: 12px;
  padding: 0.75rem;
  margin-bottom: 0.4rem;
}

.avviso-nuovo {
  background: color-mix(in srgb, var(--salvia-tenue) 60%, var(--carta));
  border-color: var(--salvia);
  border-left: 3px solid var(--salvia);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

[data-tema="sera"] .avviso {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}

[data-tema="sera"] .avviso-nuovo {
  background: color-mix(in srgb, var(--salvia-tenue) 40%, var(--carta));
  border-color: var(--salvia);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.avviso-data {
  display: block;
  margin-bottom: 0.3rem;
}

.avviso-testo {
  font-size: 1rem;
  color: var(--inchiostro);
  line-height: 1.55;
}

.avviso-azioni {
  display: flex;
  gap: var(--spazio-s);
  margin-top: 0.5rem;
}

.avviso-letto-label {
  color: var(--tenue);
}

/* Badge avvisi nella nav */
.badge-avvisi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rosa);
  color: var(--carta);
  font-size: 0.7rem;
  font-family: var(--font-testo);
  min-width: 1.2rem;
  height: 1.2rem;
  border-radius: 99px;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
  vertical-align: middle;
  line-height: 1;
}

/* --- Piede --- */
.piede-azioni {
  display: flex;
  justify-content: center;
  gap: var(--spazio-s);
  margin-top: var(--spazio-s);
}

/* Mobile: colonna impilata, full-width, testo su una riga */
.piede-azioni {
  flex-direction: column;
}

.piede-azioni .btn-link {
  flex: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 var(--spazio-s);
  border: 1.5px solid var(--riga-forte);
  border-radius: 10px;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--corpo);
}

[data-tema="sera"] .piede-azioni .btn-link {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  color: var(--corpo);
}

.piede-azioni .btn-link:hover {
  border-color: var(--inchiostro);
  color: var(--inchiostro);
}

/* --- Schermi più grandi --- */
/* =============================================
   TABLET (640px+)
   - Colonna più larga (640px)
   - Nav cards in griglia 2 colonne
   - Tab bar nascosta (pattern da mobile)
   - Padding pagine interne senza compensazione tab bar
   ============================================= */
@media (min-width: 640px) {
  :root {
    --larghezza-max: 640px;
  }

  .nomi { font-size: 4rem; }
  .numero { font-size: 2.14rem; }
  .conto-alla-rovescia { gap: 2rem; }

  /* Nav cards: 2 colonne su tablet */
  .nav-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pagine interne e home: padding-bottom coerente con barra-tab visibile */
  .pagina-interna {
    padding-bottom: calc(var(--spazio-xl) + 4.5rem);
  }

  .pagina-home {
    padding-bottom: var(--spazio-l);
  }

  /* Footer: bottoni affiancati, natural-width */
  .piede-azioni {
    flex-direction: row;
  }

  .piede-azioni .btn-link {
    width: auto;
    padding: 0 var(--spazio-m);
  }

  /* Hero layout: 2 colonne (foto sinistra, testi destra) */
  .intestazione {
    display: grid;
    grid-template-columns: min(220px, 34vw) 1fr;
    grid-template-rows: repeat(4, auto);
    column-gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: center;
  }
  .intestazione > :nth-child(1) { grid-column: 2; grid-row: 1; }
  .intestazione > :nth-child(2) { grid-column: 2; grid-row: 2; }
  .intestazione > :nth-child(3) { grid-column: 2; grid-row: 3; }
  .intestazione > :nth-child(4) { grid-column: 2; grid-row: 4; }
  .intestazione > .hero-foto { grid-column: 1; grid-row: 1 / 5; margin: 0; width: 100%; }
  /* Fallback: foto nascosta (ospite senza cover) → layout centrato */
  .intestazione:has(> .hero-foto[hidden]) { display: block; }

  /* Intestazione interna: dentro la colonna */
  .intestazione-interna {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  /* Griglia media: 3 colonne su tablet */
  .griglia-media {
    columns: 3;
  }
}

/* =============================================
   DESKTOP (1024px+)
   - Colonna 760px
   - Tipografia leggermente più generosa
   ============================================= */
@media (min-width: 1024px) {
  :root {
    --larghezza-max: 760px;
  }

  .nomi { font-size: 4.5rem; }
  .numero { font-size: 2.45rem; }

  /* Nav cards: 3 colonne su desktop largo */
  .nav-lista {
    grid-template-columns: repeat(3, 1fr);
  }

  .nav-voce {
    min-height: 52px;
    font-size: 1rem;
  }

  /* Intestazione intestazione: più alta su desktop */
  .intestazione-interna {
    height: calc(56px + env(safe-area-inset-top, 0px));
  }
}

/* =============================================
   FASE 5 — Asta e contributi
   ============================================= */

.asta-chiusa {
  opacity: 0.72;
}

.asta-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spazio-s);
  margin-bottom: 0.4rem;
}

.asta-titolo {
  font-family: var(--font-titoli);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--inchiostro);
}

.asta-desc {
  color: var(--corpo);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.asta-prezzo-corrente {
  margin-bottom: var(--spazio-xs);
}

.asta-cifra {
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--inchiostro);
  line-height: 1.1;
}

.asta-vincitore {
  background: color-mix(in srgb, var(--salvia) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--salvia) 35%, transparent);
  border-radius: var(--raggio);
  padding: var(--spazio-s);
  margin: var(--spazio-xs) 0 var(--spazio-s);
}

.asta-vincitore-nome {
  font-family: var(--font-testo);
  color: var(--inchiostro);
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.pay-qr-mini {
  display: flex;
  justify-content: center;
  margin-top: var(--spazio-xs);
}

.asta-storico-wrap {
  border-top: 1px solid var(--riga);
  padding-top: var(--spazio-xs);
}

.asta-offerta-wrap > summary,
.asta-storico-wrap > summary,
.asta-modifica-wrap > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.4rem;
  user-select: none;
}
.asta-offerta-wrap > summary::-webkit-details-marker,
.asta-storico-wrap > summary::-webkit-details-marker,
.asta-modifica-wrap > summary::-webkit-details-marker {
  display: none;
}
.asta-offerta-wrap > summary:focus-visible,
.asta-storico-wrap > summary:focus-visible,
.asta-modifica-wrap > summary:focus-visible {
  outline: none;
}

/* Stato "aperto": il btn-primario diventa outlined per segnalare chiusura */
.asta-offerta-wrap[open] > summary {
  background: var(--carta-2);
  color: var(--corpo);
  box-shadow: inset 0 0 0 1.5px var(--riga-forte);
}
[data-tema="sera"] .asta-offerta-wrap[open] > summary {
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.15);
}

/* Chevron sul toggler Modifica (allineato con storico) */
.asta-modifica-wrap > summary::after {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  margin-left: auto;
  opacity: 0.5;
}
.asta-modifica-wrap[open] > summary::after {
  transform: rotate(45deg);
}

/* Classi per le etichette del blocco vincitore */
.asta-vincitore-label {
  margin-bottom: 0.3rem;
}
.asta-vincitore-qr-label {
  margin: 0.6rem 0 0.4rem;
}

/* Etichetta link pagamento staff */
.asta-payment-label {
  margin-bottom: var(--spazio-xs);
  color: var(--tenue);
}

.asta-storico-wrap > summary::after {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--corpo);
  border-bottom: 2px solid var(--corpo);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.7;
}
.asta-storico-wrap[open] > summary::after {
  transform: rotate(45deg);
}

.asta-storico-lista {
  list-style: none;
  padding: 0;
  margin-top: var(--spazio-xs);
}

.asta-storico-riga {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--riga);
  font-size: 0.95rem;
  color: var(--corpo);
}

.asta-storico-riga:first-child {
  color: var(--inchiostro);
  font-weight: 500;
}

.asta-storico-prezzo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.asta-ritira-btn {
  background: none;
  border: none;
  color: var(--errore-chiaro);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  min-height: 0;
  opacity: 0.65;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.asta-ritira-btn:hover { opacity: 1; }

.asta-staff-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-xs);
  margin-top: var(--spazio-xs);
  padding-top: var(--spazio-xs);
  border-top: 1px solid var(--riga);
}


/* Contributo libero */
.blocco-contributo {
  padding: var(--spazio-s) 0;
}

.contributo-qr {
  display: flex;
  justify-content: center;
  margin: var(--spazio-s) auto;
}

/* Link pagamento contributo — sempre full-width centrato */
#contributo-link {
  display: block;
  text-align: center;
  margin-top: var(--spazio-s);
}

/* =============================================
   FASE 4 — Proiezione · Trivia · Caccia al tesoro
   ============================================= */

/* --- Proiezione slideshow --- */
.proiezione-overlay {
  position: fixed;
  inset: 0;
  background: #111; /* eccezione documentata: overlay fullscreen sempre scuro in entrambi i temi */
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.proiezione-contenuto {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.proiezione-foto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.proiezione-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  animation: proiezione-fadein 0.4s ease;
}

@keyframes proiezione-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Particelle reazioni slideshow (cuori e like volanti) */
@keyframes slide-particella-vola {
  0% {
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translate(0, 0) scale(0) rotate(var(--rot, -18deg));
  }
  18% {
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
    transform: translate(calc(var(--dx, 0px) * 0.08), -10px) scale(1.3);
  }
  72% {
    animation-timing-function: ease-in;
    opacity: 0.78;
    transform: translate(calc(var(--dx, 0px) * 0.82), -54vh) scale(0.88) rotate(var(--rot2, 12deg));
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0px), -84vh) scale(0.1) rotate(var(--rot2, 12deg));
  }
}
.slide-particella {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation-name: slide-particella-vola;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
.slide-particella svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Testo sovrapposto in basso sull'immagine, leggibile su TV */
.proiezione-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.72) 40%);
  padding: 3rem var(--spazio-l) var(--spazio-m);
  text-align: center;
  pointer-events: none;
}

.proiezione-autore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
}

.proiezione-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  text-shadow: none;
}

.proiezione-nome {
  color: #fff;
  font-family: var(--font-titoli);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.proiezione-caption {
  color: rgba(255,255,255,.85);
  margin-top: 0.3rem;
  font-size: 1.15rem;
  text-shadow: 0 1px 5px rgba(0,0,0,.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.campo-counter {
  display: block;
  text-align: right;
  font-size: 0.72rem;
  color: var(--tenue);
  margin-top: 2px;
}

.proiezione-reaz {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
.proiezione-reaz-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255,255,255,.88);
  font-size: 1.05rem;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.proiezione-conto {
  color: rgba(255,255,255,.45);
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

.proiezione-vuota {
  color: rgba(241,237,226,.55);
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  padding: 0 var(--spazio-m);
  max-width: 480px;
}

.proiezione-controlli {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-s);
  padding: var(--spazio-s) var(--spazio-m) calc(var(--spazio-s) + env(safe-area-inset-bottom));
}

.btn-proiezione {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .8);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}

.btn-proiezione:hover {
  background: rgba(255, 255, 255, .12);
}

.btn-proiezione:active {
  background: rgba(255, 255, 255, .22);
}

.btn-proiezione-esci {
  width: auto;
  padding: 0 16px;
  border-radius: 100px;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-color: rgba(255, 255, 255, .4);
  margin-left: var(--spazio-m);
}

/* Auto-hide controlli proiezione */
.proiezione-controlli {
  transition: opacity 0.5s ease;
}
.proiezione-controlli.nascoste {
  opacity: 0;
  pointer-events: none;
}

/* Watermark brand nella slide */
.proiezione-brand {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 400;
  color: #C9A84C;
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
  user-select: none;
}
.proiezione-brand::after {
  content: ' \2665';
  font-size: 0.65em;
  vertical-align: middle;
  opacity: 0.7;
}

/* --- DIAPOSITIVE: pill nav-voce stile anni 70/80 --- */
button.nav-voce-slideshow {
  -webkit-appearance: none;
  width: 100%;
  cursor: pointer;
  font-family: var(--font-testo);
  text-align: left;
}
button.nav-voce-slideshow > span:not(.nav-freccia) {
  letter-spacing: 0.07em;
  font-weight: 700;
}
/* Lightbox pill — lettering retro */
.lb-btn-slideshow {
  letter-spacing: 0.06em;
}

/* --- Notifica nuova foto nel overlay proiezione --- */
.proiezione-notifica {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.22);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}
.proiezione-notifica.visibile {
  opacity: 1;
}

/* --- Giochi: lista carte --- */
.giochi-lista {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-m);
}

/* --- Blocco gioco: carta Apple/Google --- */
.blocco-gioco {
  background: var(--carta);
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.06);
  padding: var(--spazio-m);
  width: 100%;
}

[data-tema="sera"] .blocco-gioco {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}

.blocco-gioco .sottotitolo {
  font-size: 1.35rem;
  margin-bottom: var(--spazio-xs);
}

/* --- Trivia --- */
.trivia-intro {
  padding: var(--spazio-xs) 0;
}

/* Classifica dentro la carta: separatore sopra, non sotto */
#trivia-leaderboard.blocco-info {
  border-bottom: none;
  border-top: 1px solid var(--riga);
  padding-top: var(--spazio-m);
  margin-top: var(--spazio-s);
}

.trivia-progresso {
  text-align: center;
  margin-bottom: var(--spazio-xs);
}

.trivia-barra-prog {
  width: 100%;
  height: 2px;
  background: var(--riga);
  margin-bottom: var(--spazio-m);
  border-radius: 1px;
}

.trivia-barra-fill {
  height: 100%;
  background: var(--salvia);
  transition: width .4s ease;
}

.trivia-domanda {
  font-family: var(--font-titoli);
  font-size: 1.3rem;
  color: var(--inchiostro);
  line-height: 1.3;
  margin-bottom: var(--spazio-m);
  text-align: center;
}

.trivia-opzioni {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-xs);
}

.trivia-opz {
  background: transparent;
  border: 1.5px solid var(--riga-forte);
  border-radius: 10px;
  padding: 0.875rem var(--spazio-s);
  font-family: var(--font-testo);
  font-size: 1rem;
  color: var(--corpo);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
}

.trivia-lettera {
  color: var(--salvia-testo);
  flex-shrink: 0;
  line-height: 1.5;
}

.trivia-opz:active:not(:disabled) {
  background: color-mix(in srgb, var(--salvia) 7%, transparent);
  border-color: var(--salvia);
}

/* eccezione: colori quiz trivia — verde/rosso saturi per feedback immediato,
   non mappabili su --salvia/--errore che sono pastello */
.trivia-corretta {
  background: rgba(63, 153, 97, .10) !important;
  border-color: #3f9961 !important;
}
.trivia-corretta .trivia-lettera { color: #2a6840; }

.trivia-sbagliata {
  background: rgba(195, 50, 50, .07) !important;
  border-color: #c33232 !important;
}
.trivia-sbagliata .trivia-lettera { color: #8b2020; }

[data-tema="sera"] .trivia-corretta {
  background: rgba(63, 153, 97, .18) !important;
  border-color: rgba(63, 153, 97, .45) !important;
}
[data-tema="sera"] .trivia-corretta .trivia-lettera { color: #6abf7a; }

[data-tema="sera"] .trivia-sbagliata {
  background: rgba(195, 50, 50, .15) !important;
  border-color: rgba(195, 50, 50, .35) !important;
}
[data-tema="sera"] .trivia-sbagliata .trivia-lettera { color: #e07070; }

.trivia-risultato {
  text-align: center;
  padding: var(--spazio-m) 0;
}

.trivia-punteggio {
  font-family: var(--font-testo);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--inchiostro);
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--spazio-s);
}

.trivia-punteggio .etichetta {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--tenue);
}

.trivia-commento {
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--corpo);
  margin-bottom: var(--spazio-m);
}

#btn-trivia-rigioca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem var(--spazio-m);
  border: 1.5px solid var(--riga-forte);
  border-radius: 10px;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--corpo);
}

/* Classifica trivia */
.classifica-lista {
  list-style: none;
  padding: 0;
}

.classifica-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--riga);
}

.classifica-pos {
  width: 1.5rem;
  text-align: center;
  color: var(--salvia-testo);
  flex-shrink: 0;
}

.classifica-nome {
  flex: 1;
  font-family: var(--font-testo);
  color: var(--corpo);
}

.classifica-punti {
  color: var(--inchiostro);
  flex-shrink: 0;
}

/* --- Caccia al tesoro --- */
#caccia-contenuto {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-s);
  margin-top: var(--spazio-xs);
}

.caccia-compito {
  background: var(--carta);
  border-radius: 12px;
  border: 1.5px solid var(--riga);
  padding: var(--spazio-s) var(--spazio-m);
}

[data-tema="sera"] .caccia-compito {
  background: var(--carta);
  border-color: var(--riga-forte);
}

.caccia-compito:has(.badge-verde) {
  border-color: var(--salvia);
}

.caccia-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-s);
}

.caccia-titolo {
  font-family: var(--font-testo);
  color: var(--corpo);
  font-size: 1rem;
  flex: 1;
}

.caccia-desc {
  margin-top: 0.25rem;
}

.caccia-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: var(--spazio-s);
  padding: 0.75rem var(--spazio-s);
  background: var(--carta-2);
  border: 1.5px solid var(--oro);
  border-radius: 10px;
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 500;
  color: var(--oro-testo);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

[data-tema="sera"] .caccia-summary {
  background: var(--carta-2);
  border-color: var(--oro);
  color: var(--oro-testo);
}

.caccia-dettagli > summary { list-style: none; }
.caccia-dettagli > summary::-webkit-details-marker { display: none; }

.caccia-form {
  padding-top: var(--spazio-s);
}

.caccia-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: var(--spazio-s);
  border-radius: var(--raggio);
  overflow: hidden;
}

/* 1 foto: panoramica full-width */
.caccia-griglia:has(> :nth-child(1):last-child) {
  grid-template-columns: 1fr;
}
.caccia-griglia:has(> :nth-child(1):last-child) .caccia-miniatura {
  aspect-ratio: 4 / 3;
}

/* 2 foto: due colonne */
.caccia-griglia:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

.caccia-miniatura {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* =============================================
   FASE 6 — PANNELLI STAFF
   ============================================= */

/* --- Invitati --- */
.inv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spazio-s);
  margin-bottom: var(--spazio-m);
  text-align: center;
}
.inv-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-s);
  align-items: center;
  margin-bottom: var(--spazio-m);
}
.inv-select { min-width: 0; flex: 1 1 120px; }
.inv-lista  { display: flex; flex-direction: column; gap: var(--spazio-s); }
.inv-riga {
  border-bottom: 1px solid var(--riga);
  padding-bottom: var(--spazio-s);
}
.inv-info  { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-xs); }
.inv-nome  { font-family: var(--font-testo); font-size: 1rem; }
.inv-gruppo { color: var(--tenue); }
.inv-dettagli { margin: .25rem 0; color: var(--tenue); font-size: .8rem; }
.inv-azioni { display: flex; align-items: center; gap: var(--spazio-s); margin-top: .35rem; }
.inv-select-stato { flex: 1; max-width: 140px; }

.inv-profili-sezione {
  margin-top: var(--spazio-l);
  border-top: 1px solid var(--riga);
  padding-top: var(--spazio-m);
}
.inv-profili-titolo { margin-bottom: var(--spazio-s); }
.inv-profilo-riga {
  display: grid;
  grid-template-columns: 36px 200px 1fr auto;
  align-items: center;
  gap: var(--spazio-s);
  padding: 10px 0;
  border-bottom: 1px solid var(--riga);
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
}
.inv-profilo-riga:last-child { border-bottom: none; }
.inv-profilo-riga:hover { background: var(--carta-2); }
.inv-profilo-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .9rem;
}
.inv-profilo-email {
  color: var(--tenue);
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 639px) {
  .inv-profilo-riga { grid-template-columns: 36px 1fr auto; }
  .inv-profilo-email { display: none; }
}
/* Overlay scheda ospite */
#scheda-ospite-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 250;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#scheda-ospite-overlay[hidden] { display: none; }
.scheda-ospite-card {
  background: var(--carta);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--spazio-m) var(--spazio-m) calc(var(--spazio-xl) + env(safe-area-inset-bottom, 0px));
  animation: social-card-entra .42s cubic-bezier(.34,1.36,.64,1) both;
}
[data-tema="sera"] .scheda-ospite-card { background: var(--carta-2); }
.scheda-ospite-header {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  margin-bottom: var(--spazio-m);
  position: relative;
  padding-right: 44px;
}
.scheda-ospite-avt {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .95rem;
  flex-shrink: 0;
}
.scheda-ospite-info { flex: 1; min-width: 0; }
.scheda-ospite-nome { font-weight: 700; font-size: 1.05rem; margin-bottom: 2px; }
.scheda-ospite-email { color: var(--tenue); font-size: .8rem; margin-bottom: 4px; }
.scheda-ospite-chiudi {
  position: absolute; top: 0; right: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--riga-forte);
  background: var(--carta-2);
  color: var(--tenue);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.scheda-ospite-chiudi:hover { color: var(--inchiostro); border-color: var(--inchiostro); }
.scheda-sezione {
  margin-bottom: var(--spazio-m);
  padding-bottom: var(--spazio-m);
  border-bottom: 1px solid var(--riga);
}
.scheda-sezione:last-child { border-bottom: none; margin-bottom: 0; }
.scheda-sezione-titolo { margin-bottom: var(--spazio-s); display: block; }
.scheda-campo-label { display: block; margin-bottom: var(--spazio-xs); }
.scheda-nota-riga {
  display: flex; gap: var(--spazio-s); align-items: baseline; padding: 3px 0;
}
.scheda-nota-label { min-width: 110px; flex-shrink: 0; }
.scheda-nota-val { font-size: .9rem; color: var(--corpo); }
.scheda-rel-pills {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--spazio-s);
}
.scheda-rel-pill {
  padding: 5px 13px;
  border-radius: 100px;
  border: 1.5px solid var(--riga-forte);
  background: none;
  font-size: .8rem;
  cursor: pointer;
  min-height: 34px;
  position: relative;
  transition: border-color .15s, background .15s, color .15s;
  color: var(--corpo);
}
.scheda-rel-pill::after {
  content: '';
  position: absolute;
  inset: -5px;
}
.scheda-rel-pill:hover { border-color: var(--inchiostro); }
.scheda-rel-pill.attiva {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--carta);
}
[data-tema="sera"] .scheda-rel-pill.attiva {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--carta);
}
.inv-profilo-stats {
  padding: var(--spazio-s) var(--spazio-s) var(--spazio-m);
}
.inv-stats-chip-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-xs);
}
.inv-stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--riga);
  gap: 2px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.inv-stat-chip:hover { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 5%, var(--carta)); }
.inv-stat-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--inchiostro);
  line-height: 1.2;
}
.inv-stat-label { font-size: .62rem; color: var(--tenue); }
.inv-stats-note {
  margin-top: var(--spazio-s);
  border-top: 1px solid var(--riga);
  padding-top: var(--spazio-s);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inv-stats-nota-riga {
  display: flex;
  gap: var(--spazio-s);
  align-items: baseline;
}
.inv-stats-nota-label { min-width: 120px; flex-shrink: 0; }
.inv-stats-nota-val { font-size: .88rem; color: var(--corpo); }
.inv-avt {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff; flex-shrink: 0;
}

/* Scheda ospite — tag dieta */
.dieta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--salvia) 10%, var(--carta));
  border: 1.5px solid var(--salvia);
  color: var(--salvia-testo);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
[data-tema="sera"] .dieta-tag {
  background: color-mix(in srgb, var(--salvia) 18%, var(--carta-2));
  border-color: color-mix(in srgb, var(--salvia) 60%, var(--carta-2));
  color: var(--salvia);
}

.dieta-tag--mini { font-size: .62rem; padding: 1px 7px; }
/* Scheda ospite — RSVP summary */
.scheda-rsvp-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-xs);
  margin-bottom: var(--spazio-xs);
}
.scheda-rsvp-msg {
  font-size: .85rem;
  color: var(--corpo);
  font-style: italic;
  margin-top: 4px;
  padding-left: 2px;
}

/* Scheda ospite — Accompagnatori */
.acc-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--spazio-s);
}
.acc-item {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--carta-2);
  border: 1px solid var(--riga);
}
[data-tema="sera"] .acc-item { background: rgba(255,255,255,.04); }
.acc-avt {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.acc-nome {
  flex: 1;

  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-rimuovi {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--riga-forte);
  background: none;
  color: var(--tenue);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.acc-rimuovi:hover { color: var(--errore-chiaro); border-color: var(--errore-chiaro); }
.acc-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-xs);
  align-items: flex-end;
  margin-top: var(--spazio-xs);
}
.acc-add-form .input-sottolineato {
  flex: 1 1 120px;
  min-width: 0;

}
.acc-vuoto {
  font-size: .82rem;
  color: var(--tenue);
  font-style: italic;
  padding: 4px 2px;
}

/* Scheda ospite — Attività chips responsive */
.inv-stats-chip-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-xs);
}
.inv-stat-chip[data-presente="1"] .inv-stat-val { color: var(--salvia-testo); }

/* Check-in — blocco famiglia sotto la riga genitore */
.checkin-famiglia {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 0 6px 32px;
}
.checkin-famiglia-item {
  display: flex;
  align-items: center;
  gap: var(--spazio-xs);
  font-size: .78rem;
  color: var(--corpo);
}
.checkin-famiglia-dot {
  font-size: .6rem;
  color: var(--tenue);
  flex-shrink: 0;
}
.checkin-famiglia-nome { flex: 1; }
.checkin-famiglia-ora { color: var(--tenue); font-size: .72rem; }
.btn-acc-checkin {
  padding: 2px 8px;
  border-radius: 100px;
  border: 1.5px solid var(--salvia);
  background: none;
  color: var(--salvia-testo);
  font-size: .65rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: background .15s, color .15s;
}
.btn-acc-checkin:hover {
  background: var(--salvia);
  color: var(--carta);
}
[data-tema="sera"] .btn-acc-checkin { border-color: var(--salvia); color: var(--salvia); }
[data-tema="sera"] .btn-acc-checkin:hover { background: var(--salvia); color: var(--carta-2); }
.checkin-famiglia-dot--verde { color: var(--salvia-testo); }
.checkin-riga-gruppo {
  border-bottom: 1px solid var(--riga);
  padding-bottom: 3px;
}
.checkin-riga-gruppo:last-child { border-bottom: none; }

/* --- Tavoli --- */
.tavoli-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-m);
  margin-bottom: var(--spazio-m);
}
@media (min-width: 600px) {
  .tavoli-griglia { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tavoli-griglia { grid-template-columns: repeat(3, 1fr); }
}
.tavolo-card {
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  padding: var(--spazio-s) var(--spazio-m);
}
.tavolo-header {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  margin-bottom: var(--spazio-xs);
}
.tavolo-nome { font-family: var(--font-testo); flex: 1; }
.tavolo-lista {
  list-style: none;
  margin: var(--spazio-xs) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.tavolo-ospite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
}
.tavolo-aggiungi { margin-top: var(--spazio-xs); }
.non-assegnati {
  border-top: 1px solid var(--riga);
  padding-top: var(--spazio-s);
  margin-top: var(--spazio-m);
}
.non-assegnati-lista {
  font-size: .85rem;
  color: var(--tenue);
  margin-top: .35rem;
  line-height: 1.7;
}

/* --- Budget --- */
.budget-sommario {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spazio-s);
  margin-bottom: var(--spazio-m);
  padding: var(--spazio-s);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
}
@media (min-width: 500px) {
  .budget-sommario { grid-template-columns: repeat(4, 1fr); }
}
.budget-stat { display: flex; flex-direction: column; gap: .2rem; }
.budget-cifra { font-family: var(--font-titoli); font-size: 1.2rem; }
.budget-pagato { color: var(--salvia-testo); }
.over-budget   { color: var(--errore-chiaro); }
.budget-categoria { margin-bottom: var(--spazio-m); }
.budget-cat-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--riga);
  padding-bottom: .35rem;
  margin-bottom: var(--spazio-xs);
}
.budget-voci { display: flex; flex-direction: column; gap: var(--spazio-xs); }
.budget-voce {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem var(--spazio-s);
  align-items: start;
  padding: .35rem 0;
  border-bottom: 1px solid var(--riga);
}
.voce-pagata { opacity: .55; }
.budget-voce-check { display: flex; align-items: center; gap: var(--spazio-xs); cursor: pointer; }
.budget-desc   { font-size: .95rem; }
.budget-importi { display: flex; gap: var(--spazio-s); justify-content: flex-end; }
.budget-note   { grid-column: 1; font-size: .8rem; color: var(--tenue); margin: 0; }
.budget-elimina { grid-column: 2; grid-row: 1; align-self: start; }

/* --- Assistente AI --- */
.ai-chat-contenitore {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-s);
  height: 65vh;
}
.ai-chat-lista {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  padding: var(--spazio-s);
  display: flex;
  flex-direction: column;
  gap: var(--spazio-s);
}
.ai-chat-form {
  display: flex;
  gap: var(--spazio-s);
  align-items: center;
}
.ai-chat-input { flex: 1; }
.ai-msg {
  max-width: 80%;
  padding: .5rem .75rem;
  border-radius: var(--raggio);
  font-size: .9rem;
  line-height: 1.5;
}
.ai-msg p { margin: 0; }
.ai-msg-utente {
  background: var(--inchiostro);
  color: var(--carta);
  align-self: flex-end;
}
.ai-msg-assistente {
  background: var(--salvia-tenue);
  color: var(--inchiostro);
  align-self: flex-start;
}
.ai-loading { font-style: italic; }

/* Badge condivisi */
.badge-grigio { background: var(--tenue); color: var(--carta); }
.badge-giallo { background: var(--oro); color: var(--carta); }

/* --- Esporta --- */
.esporta-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-m);
}
@media (min-width: 500px) {
  .esporta-griglia { grid-template-columns: repeat(2, 1fr); }
}
.esporta-voce {
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  padding: var(--spazio-m);
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xs);
}
.esporta-titolo {
  font-family: var(--font-titoli);
  font-size: 1.15rem;
  margin: 0;
}
.esporta-desc { margin: 0; }

/* =============================================
   UPGRADE GRAFICO — Card, Animazioni, Barra Tab
   ============================================= */

/* --- Keyframes --- */

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* --- Entrata sezione: figli con stagger --- */
.sezione-entra > * {
  animation: fadeSlideUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sezione-entra > *:nth-child(1) { animation-delay: 0ms; }
.sezione-entra > *:nth-child(2) { animation-delay: 55ms; }
.sezione-entra > *:nth-child(3) { animation-delay: 110ms; }
.sezione-entra > *:nth-child(4) { animation-delay: 165ms; }
.sezione-entra > *:nth-child(5) { animation-delay: 220ms; }
.sezione-entra > *:nth-child(6) { animation-delay: 260ms; }

/* --- Stagger elementi lista (si ri-triggera a ogni ricaricamento realtime) --- */
.lista-messaggi .messaggio,
.lista-playlist .canzone {
  animation: fadeSlideUp 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lista-messaggi .messaggio:nth-child(1), .lista-playlist .canzone:nth-child(1) { animation-delay: 0ms; }
.lista-messaggi .messaggio:nth-child(2), .lista-playlist .canzone:nth-child(2) { animation-delay: 50ms; }
.lista-messaggi .messaggio:nth-child(3), .lista-playlist .canzone:nth-child(3) { animation-delay: 100ms; }
.lista-messaggi .messaggio:nth-child(4), .lista-playlist .canzone:nth-child(4) { animation-delay: 150ms; }
.lista-messaggi .messaggio:nth-child(5), .lista-playlist .canzone:nth-child(5) { animation-delay: 190ms; }
.lista-messaggi .messaggio:nth-child(6), .lista-playlist .canzone:nth-child(6) { animation-delay: 220ms; }
.lista-messaggi .messaggio:nth-child(n+7), .lista-playlist .canzone:nth-child(n+7) { animation-delay: 240ms; }

/* --- Card: messaggi bacheca --- */
.lista-messaggi {
  gap: 10px;
}

.messaggio {
  background: var(--carta);
  border-radius: 16px;
  overflow: hidden;
  padding: var(--spazio-s) var(--spazio-m);
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 6px 20px rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: box-shadow var(--transizione), transform var(--transizione);
}

.messaggio:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.09), 0 10px 28px rgba(0,0,0,.09);
  transform: translateY(-1px);
}

.messaggio-header {
  align-items: center;
  padding-right: var(--spazio-xs);
}

/* Card bianche in dark mode usano carta-2 */
[data-tema="sera"] .messaggio {
  background: var(--carta-2);
  border-color: var(--riga);
}

/* --- Avatar iniziali --- */
.avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: var(--salvia-tenue);
  color: var(--inchiostro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titoli);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.avatar-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Card: canzoni playlist --- */
.lista-playlist {
  gap: 10px;
}

.canzone {
  background: var(--carta);
  border-radius: 14px;
  padding: var(--spazio-s) var(--spazio-m);
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: box-shadow var(--transizione);
}

.canzone:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.09), 0 8px 24px rgba(0,0,0,.09);
}

[data-tema="sera"] .canzone {
  background: var(--carta-2);
  border-color: var(--riga);
}

[data-tema="sera"] .canzone-cover {
  background: color-mix(in srgb, var(--salvia) 8%, var(--carta-2));
}

.playlist-embed {
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

#playlist-embed-wrap {
  margin-bottom: calc(-1 * var(--spazio-s));
}

.playlist-embed iframe {
  width: 100%;
  height: 152px;
  border: none;
  display: block;
}

@media (min-width: 640px) {
  .playlist-embed iframe {
    height: 352px;
  }
}

/* --- Playlist: fix mobile card (badge su riga meta) --- */
.canzone-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

/* --- Playlist: card ospiti layout musica (cover quadrata, titolo + artista) --- */
.canzone-ospite {
  align-items: flex-start;
  padding: 0.85rem 0.85rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.canzone-ospite > .pl-dj-picker {
  flex-basis: 100%;
  margin-top: 0;
}
.canzone-ospite .canzone-cover {
  width: 64px;
  height: 64px;
  align-self: flex-start;
  flex-shrink: 0;
}
.canzone-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  overflow: hidden;
}
.canzone-artista-riga {
  font-size: 0.78rem;
  color: var(--tenue);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canzone-ospite .canzone-meta {
  margin-top: 0.15rem;
  gap: 0.3rem;
}
.canzone-ospite .voters-list {
  margin-top: 0;
}
/* pill voto: badge assoluto angolo top-right della card */
.canzone-ospite .btn-voto {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  flex-direction: row;
  gap: 0.18rem;
  align-items: center;
  border: 1px solid var(--riga-forte);
  border-radius: 100px;
  padding: 0.18rem 0.5rem;
  min-height: 0;
  min-width: 0;
  align-self: unset;
  margin-top: 0;
  flex-shrink: 0;
}
.canzone-ospite .btn-voto .voto-cuore { font-size: 1rem; }
.canzone-ospite .btn-voto .voto-numero { font-size: 0.82rem; font-weight: 700; }
/* touch target esteso: la pill è ~24px, ::after porta a ~44px senza modificare la grafica */
.canzone-ospite .btn-voto::after {
  content: '';
  position: absolute;
  inset: -10px;
}
.canzone-ospite .btn-voto.votato {
  border-color: var(--rosa);
  background: color-mix(in srgb, var(--rosa) 8%, transparent);
}
[data-tema="sera"] .canzone-ospite .btn-voto {
  border-color: var(--riga-forte);
}
/* spazio a destra del testo per non finire sotto la pill */
.canzone-corpo { padding-right: 2.6rem; }
@media (max-width: 639px) {
  .canzone-ospite .voter-bubble:nth-child(n+4) { display: none; }
}

/* --- Playlist: blocchi ospiti --- */
.pl-blocco {
  margin-bottom: var(--spazio-l);
}
.pl-vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spazio-s);
  padding: var(--spazio-xl) var(--spazio-m);
  text-align: center;
}
.pl-vuoto-icona {
  width: 64px;
  height: 64px;
  color: var(--oro);
  opacity: .7;
}
.pl-vuoto-titolo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--inchiostro);
}
.pl-vuoto-sub {
  font-size: 0.88rem;
  color: var(--tenue);
  max-width: 26ch;
  line-height: 1.55;
}
.pl-blocco-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spazio-s);
}
.pl-blocco-titolo {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0;
}
.pl-scaletta-azioni {
  display: flex;
  gap: var(--spazio-xs);
}
.pl-add-form {
  background: var(--carta-2);
  border-radius: 12px;
  padding: var(--spazio-s);
  margin-bottom: var(--spazio-s);
}
.pl-add-form-campi {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xs);
  margin-bottom: var(--spazio-s);
}
.pl-add-form-azioni {
  display: flex;
  gap: var(--spazio-s);
  align-items: center;
}
/* Controlli inline staff/DJ sulle card scaletta e proposte */
.pl-dj-ctrl {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}
.pl-dj-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  cursor: pointer;
  color: var(--tenue);
  min-height: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pl-dj-btn:disabled { opacity: 0.25; cursor: default; text-decoration: none; }
.pl-dj-btn--ok { color: var(--salvia-testo); }
.pl-dj-btn--danger { color: var(--errore-chiaro); }
.pl-dj-btn--scaletta {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--salvia-testo);
}
.pl-dj-suonata-label {
  opacity: 0.55;
  font-size: 0.72rem;
}
.pl-dj-picker {
  margin-top: 6px;
  background: var(--carta);
  border: 1px solid var(--riga-forte);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.09);
  animation: picker-entra .2s cubic-bezier(.34,1.36,.64,1) both;
}
@keyframes picker-entra {
  from { opacity: 0; transform: scale(.93) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.pl-dj-picker-label {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: 7px;
}
.pl-dj-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.pl-dj-picker-voce {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px 10px;
  min-height: 72px;
  border-radius: 14px;
  border: 1.5px solid var(--riga-forte);
  background: var(--carta);
  cursor: pointer;
  transition: background .12s, border-color .15s, transform .1s;
  text-transform: none;
  letter-spacing: 0;
  font-size: .72rem;
  font-weight: 600;
}
.pl-dj-picker-voce--null {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
}
.pl-dj-picker-voce:hover { transform: scale(.97); }
.pl-dj-picker-voce:active { transform: scale(.93); }

/* Chip icona stile iOS app icon */
.picker-voce-chip {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--carta-2);
  color: var(--tenue);
  transition: background .15s;
}
.picker-voce-chip svg { width: 20px; height: 20px; display: block; }
.pl-dj-picker-voce--null .picker-voce-chip { width: 28px; height: 28px; border-radius: 7px; }
.pl-dj-picker-voce--null .picker-voce-chip svg { width: 16px; height: 16px; }

.picker-voce-nome {
  font-size: .65rem;
  font-weight: 600;
  color: var(--corpo);
  line-height: 1.2;
  text-align: center;
}
.pl-dj-picker-voce--null .picker-voce-nome { text-align: left; font-size: .7rem; }

/* Chip colorati per categoria */
.pl-dj-picker-voce--cerimonia { border-color: color-mix(in srgb, var(--rosa) 22%, var(--riga-forte)); }
.pl-dj-picker-voce--cerimonia .picker-voce-chip { background: color-mix(in srgb, var(--rosa) 13%, var(--carta)); color: var(--rosa-testo); }
.pl-dj-picker-voce--cerimonia:hover { border-color: var(--rosa); background: color-mix(in srgb, var(--rosa) 4%, var(--carta)); }
.pl-dj-picker-voce--cerimonia:hover .picker-voce-chip { background: color-mix(in srgb, var(--rosa) 22%, var(--carta)); }

.pl-dj-picker-voce--cocktail { border-color: color-mix(in srgb, var(--oro) 28%, var(--riga-forte)); }
.pl-dj-picker-voce--cocktail .picker-voce-chip { background: color-mix(in srgb, var(--oro) 13%, var(--carta)); color: var(--oro-testo); }
.pl-dj-picker-voce--cocktail:hover { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 4%, var(--carta)); }
.pl-dj-picker-voce--cocktail:hover .picker-voce-chip { background: color-mix(in srgb, var(--oro) 22%, var(--carta)); }

.pl-dj-picker-voce--cena { border-color: color-mix(in srgb, var(--salvia) 28%, var(--riga-forte)); }
.pl-dj-picker-voce--cena .picker-voce-chip { background: color-mix(in srgb, var(--salvia) 13%, var(--carta)); color: var(--salvia-testo); }
.pl-dj-picker-voce--cena:hover { border-color: var(--salvia); background: color-mix(in srgb, var(--salvia) 4%, var(--carta)); }
.pl-dj-picker-voce--cena:hover .picker-voce-chip { background: color-mix(in srgb, var(--salvia) 22%, var(--carta)); }

.pl-dj-picker-voce--ballo { border-color: color-mix(in srgb, var(--azzurro) 24%, var(--riga-forte)); }
.pl-dj-picker-voce--ballo .picker-voce-chip { background: color-mix(in srgb, var(--azzurro) 13%, var(--carta)); color: var(--azzurro); }
.pl-dj-picker-voce--ballo:hover { border-color: var(--azzurro); background: color-mix(in srgb, var(--azzurro) 4%, var(--carta)); }
.pl-dj-picker-voce--ballo:hover .picker-voce-chip { background: color-mix(in srgb, var(--azzurro) 22%, var(--carta)); }

[data-tema="sera"] .pl-dj-picker {
  background: var(--carta-2);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 4px 24px rgba(0,0,0,.28);
}
[data-tema="sera"] .pl-dj-picker-voce {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}
[data-tema="sera"] .pl-dj-picker-voce--cerimonia { border-color: color-mix(in srgb, var(--rosa) 38%, rgba(255,255,255,.07)); }
[data-tema="sera"] .pl-dj-picker-voce--cerimonia .picker-voce-chip { background: color-mix(in srgb, var(--rosa) 22%, rgba(255,255,255,.04)); }
[data-tema="sera"] .pl-dj-picker-voce--cocktail  { border-color: color-mix(in srgb, var(--oro) 38%, rgba(255,255,255,.07)); }
[data-tema="sera"] .pl-dj-picker-voce--cocktail  .picker-voce-chip { background: color-mix(in srgb, var(--oro) 22%, rgba(255,255,255,.04)); }
[data-tema="sera"] .pl-dj-picker-voce--cena      { border-color: color-mix(in srgb, var(--salvia) 38%, rgba(255,255,255,.07)); }
[data-tema="sera"] .pl-dj-picker-voce--cena      .picker-voce-chip { background: color-mix(in srgb, var(--salvia) 22%, rgba(255,255,255,.04)); }
[data-tema="sera"] .pl-dj-picker-voce--ballo     { border-color: color-mix(in srgb, var(--azzurro) 38%, rgba(255,255,255,.07)); }
[data-tema="sera"] .pl-dj-picker-voce--ballo     .picker-voce-chip { background: color-mix(in srgb, var(--azzurro) 22%, rgba(255,255,255,.04)); }
[data-tema="sera"] .pl-dj-picker-voce--null .picker-voce-chip { background: rgba(255,255,255,.06); }
[data-tema="sera"] .pl-dj-picker-voce:hover { background: rgba(255,255,255,.08); }
[data-tema="sera"] .pl-add-form { background: var(--carta-2); }

/* Entry card scaletta (apre l'overlay) */
.pl-scaletta-entry {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  padding: 14px var(--spazio-s);
  border-radius: 14px;
  border: 1.5px solid var(--riga-forte);
  cursor: pointer;
  background: var(--carta);
  margin-bottom: var(--spazio-m);
  transition: border-color .15s;
}
.pl-scaletta-entry:hover { border-color: var(--oro); }
.pl-scaletta-entry-left {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  flex: 1;
}
.pl-scaletta-entry-left svg { color: var(--tenue); flex-shrink: 0; }
.pl-scaletta-entry-titolo { font-weight: 700; font-size: .95rem; }
.pl-scaletta-entry-sub { display: block; font-size: .75rem; color: var(--tenue); }
[data-tema="sera"] .pl-scaletta-entry { background: var(--carta-2); }

/* Overlay scaletta */
#scaletta-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: flex-end;
}
#scaletta-overlay[hidden] { display: none; }
.scaletta-sfondo {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.scaletta-card {
  position: relative;
  z-index: 1;
  background: var(--carta);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  padding: var(--spazio-m);
  padding-bottom: calc(var(--spazio-m) + env(safe-area-inset-bottom, 0px));
  animation: social-card-entra .42s cubic-bezier(.34,1.36,.64,1) both;
}
.scaletta-intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--spazio-s);
  margin-bottom: var(--spazio-m);
}
.scaletta-intestazione .pl-blocco-titolo { flex: 1 0 100%; font-size: 1rem; font-weight: 700; }
.scaletta-intestazione-azioni { display: flex; gap: var(--spazio-xs); flex-shrink: 0; }
.scaletta-intestazione .scaletta-chiudi { margin-left: auto; }
.scaletta-intestazione-azioni .btn-testo { text-transform: none; letter-spacing: 0; font-size: .85rem; min-height: 0; padding: 4px 0; }
.scaletta-chiudi {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--tenue);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.scaletta-chiudi:hover { color: var(--corpo); }
.scaletta-cat-label {
  margin-top: var(--spazio-s);
  margin-bottom: var(--spazio-xs);
}
.scaletta-vuota {
  text-align: center;
  padding: var(--spazio-l) 0;
  color: var(--tenue);
  font-size: .88rem;
}
[data-tema="sera"] .scaletta-card { background: var(--carta); }

/* Scaletta overlay — sezioni per categoria */
.scaletta-sezione { margin-bottom: var(--spazio-m); }
.scaletta-sezione:last-child { margin-bottom: 0; }
.scaletta-sezione-header {
  font-size: .82rem;
  font-weight: 700;
  color: var(--corpo);
  padding: 2px 0 9px 0;
  border-bottom: 1px solid var(--riga);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}
.scaletta-sezione--suonate .scaletta-sezione-header { color: var(--salvia-testo); }
[data-tema="sera"] .scaletta-sezione-header { color: var(--inchiostro); }

/* Righe minimali scaletta */
.scaletta-lista { display: flex; flex-direction: column; }
.scaletta-riga {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--riga);
}
.scaletta-riga:last-child { border-bottom: none; }
.scaletta-riga--suonata { opacity: 0.42; }
.scaletta-riga .canzone-cover {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 9px;
  flex-shrink: 0;
}
.scaletta-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scaletta-titolo {
  font-size: .9rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  color: var(--inchiostro);
}
.scaletta-riga--suonata .scaletta-titolo { text-decoration: line-through; }
.scaletta-artista {
  font-size: .73rem;
  color: var(--tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scaletta-voti {
  font-size: .75rem;
  color: var(--rosa-testo);
  flex-shrink: 0;
  white-space: nowrap;
}
.scaletta-suonata-tag {
  color: var(--salvia-testo);
  font-size: .78rem;
  font-weight: 600;
  padding: 0 2px;
}
[data-tema="sera"] .scaletta-riga { border-color: var(--riga-forte); }
[data-tema="sera"] .scaletta-sezione-header { border-color: var(--riga-forte); }

/* Layout interno riga scaletta */
.scaletta-riga { align-items: flex-start; }
.scaletta-riga .canzone-cover { margin-top: 2px; }
.scaletta-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 1px;
}
.scaletta-top .scaletta-titolo { flex: 1; }
.scaletta-top .scaletta-voti { flex-shrink: 0; padding-top: 1px; }
/* Voter panel nel contesto scaletta: padding-left allineato col testo (44px cover + 10px gap) */
.scaletta-riga .canzone-voters-panel {
  padding-left: 54px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-top-color: var(--riga);
}
/* Voter bubbles nella riga scaletta */
.scaletta-riga .voters-list { margin-top: 3px; }

/* Controlli DJ nella scaletta */
.scaletta-ctrl {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  align-items: center;
}
.scaletta-ctrl-sep {
  width: 1px;
  height: 16px;
  background: var(--riga-forte);
  margin: 0 2px;
  flex-shrink: 0;
}
.scaletta-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--inchiostro) 5%, var(--carta));
  border: 1.5px solid var(--riga-forte);
  color: var(--corpo);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background .12s, border-color .12s;
}
.scaletta-btn:disabled { opacity: 0.18; cursor: default; }
.scaletta-btn:not(:disabled):active { background: color-mix(in srgb, var(--inchiostro) 12%, var(--carta)); }
.scaletta-btn--ok { color: var(--salvia-testo); border-color: var(--salvia); background: color-mix(in srgb, var(--salvia) 8%, var(--carta)); }
.scaletta-btn--danger { color: var(--errore); border-color: color-mix(in srgb, var(--errore) 35%, var(--riga)); background: color-mix(in srgb, var(--errore) 6%, var(--carta)); }
[data-tema="sera"] .scaletta-btn { background: rgba(255,255,255,.06); border-color: var(--riga-forte); color: var(--inchiostro); }
[data-tema="sera"] .scaletta-btn--ok { border-color: var(--salvia); color: var(--salvia-testo); background: rgba(96,116,99,.12); }
[data-tema="sera"] .scaletta-btn--danger { border-color: var(--errore-chiaro); color: var(--errore-chiaro); background: rgba(207,112,112,.1); }

.pl-filtri-scaletta {
  display: flex;
  gap: var(--spazio-xs);
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: var(--spazio-s);
  scrollbar-width: none;
}
.pl-filtri-scaletta::-webkit-scrollbar { display: none; }
.pl-cuori-rimasti {
  margin-bottom: var(--spazio-s);
  color: var(--tenue);
}
.pl-cuori-icone {
  letter-spacing: 0.1em;
  color: var(--rosa-testo);
}
.pl-tua-canzone {
  margin-top: var(--spazio-s);
  padding-top: var(--spazio-s);
  border-top: 1px dashed var(--riga);
}
.pl-tua-label {
  color: var(--oro-testo);
  font-weight: 600;
  margin-bottom: var(--spazio-xs);
  letter-spacing: 0.05em;
}
.pl-tua-posizione {
  margin-top: 0.25rem;
  color: var(--tenue);
}
.pl-vedi-tutte {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--salvia-testo);
  min-height: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  flex-shrink: 0;
}
[data-tema="sera"] .pl-vedi-tutte { color: var(--salvia); }
.pl-platform-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: var(--spazio-m);
}
/* dentro il wizard il gap flex-gap (1rem) basta — zero il margin extra */
#plw-1 .pl-platform-picker {
  margin-bottom: 0;
}
.pl-platform-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 6px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--riga);
  background: var(--carta);
  color: var(--tenue);
  font-family: var(--font-testo);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
  min-height: 80px;
  width: 100%;
}
.pl-platform-btn svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}
/* eccezione documentata: brand colors ufficiali Spotify/YouTube/Apple Music, invarianti per riconoscibilità */
.pl-platform-btn[data-platform="spotify"] svg { color: #1DB954; }
.pl-platform-btn[data-platform="youtube"] svg { color: #FF0000; }
.pl-platform-btn[data-platform="apple"] svg   { color: #FF2D55; }
.pl-platform-btn.attivo svg {
  transform: scale(1.1);
  color: rgba(255,255,255,0.9);
}
.pl-platform-btn.attivo {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: rgba(255,255,255,0.75);
  box-shadow: 0 2px 12px rgba(30,58,46,.18);
}
[data-tema="sera"] .pl-platform-btn {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}
[data-tema="sera"] .pl-platform-btn.attivo {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--carta);
  box-shadow: 0 2px 12px rgba(162,133,74,.25);
}
.pl-link-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--carta);
  border: 1.5px solid var(--riga-forte);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: var(--spazio-s);
  box-shadow: 0 2px 10px rgba(30,58,46,.07);
}
.pl-cover-preview {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.pl-preview-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pl-preview-titolo {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--inchiostro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.pl-preview-artista {
  font-size: 0.78rem;
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
[data-tema="sera"] .pl-link-preview {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* Ricerca canzone */
.pl-cerca-sub {
  font-size: 0.9rem;
  color: var(--tenue);
  margin: 0.1rem 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pl-pfm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
}
.pl-pfm-chip.pl-pfm-spotify { color: #1DB954; background: color-mix(in srgb, #1DB954 12%, transparent); }
.pl-pfm-chip.pl-pfm-youtube { color: #CC0000; background: color-mix(in srgb, #CC0000 10%, transparent); }
.pl-pfm-chip.pl-pfm-apple   { color: #FC3C44; background: color-mix(in srgb, #FC3C44 10%, transparent); }
[data-tema="sera"] .pl-pfm-chip.pl-pfm-spotify { color: #6db876; background: color-mix(in srgb, #6db876 18%, transparent); }
[data-tema="sera"] .pl-pfm-chip.pl-pfm-youtube { color: #e04040; background: color-mix(in srgb, #e04040 15%, transparent); }
[data-tema="sera"] .pl-pfm-chip.pl-pfm-apple   { color: #e04850; background: color-mix(in srgb, #e04850 15%, transparent); }

.pl-link-toggle-btn {
  background: none;
  border: none;
  color: var(--tenue);
  font-size: 0.85rem;
  font-family: var(--font-testo);
  cursor: pointer;
  padding: 0.75rem 0 0.25rem;
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#pl-link-sezione { margin-top: 0.5rem; }
#pl-risultati-cerca {
  border: 1.5px solid var(--riga-forte);
  border-radius: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(280px, 35vh);
  margin-top: 0.25rem;
}
.pl-risultato {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--riga);
  text-align: left;
  cursor: pointer;
  min-height: 60px;
  font-family: var(--font-testo);
}
.pl-risultato:last-child { border-bottom: none; }
.pl-risultato:hover,
.pl-risultato:focus-visible { background: color-mix(in srgb, var(--salvia) 8%, var(--carta)); outline: none; }
.pl-risultato-cover {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.pl-risultato-cover-vuota {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--riga-forte);
  flex-shrink: 0;
}
.pl-risultato-info { flex: 1; min-width: 0; }
.pl-risultato-titolo {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--inchiostro);
}
.pl-risultato-artista {
  font-size: 0.8rem;
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}
.pl-risultato-platform {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.pl-platform-spotify { color: #1DB954; background: color-mix(in srgb, #1DB954 12%, transparent); }
.pl-platform-youtube { color: #CC0000; background: color-mix(in srgb, #CC0000 10%, transparent); }
[data-tema="sera"] .pl-platform-spotify { color: #6db876; background: color-mix(in srgb, #6db876 12%, transparent); }
[data-tema="sera"] .pl-platform-youtube { color: #e04040; background: color-mix(in srgb, #e04040 12%, transparent); }
/* Badge piattaforma sulla copertina canzone */
.canzone-pfm-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #fff;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.canzone-pfm-spotify { background: #1DB954; }
.canzone-pfm-youtube { background: #FF0000; }
.canzone-pfm-apple   { background: #FC3C44; }
[data-tema="sera"] .canzone-pfm-spotify { background: #179443; }
[data-tema="sera"] .canzone-pfm-youtube { background: #cc1111; }
[data-tema="sera"] .canzone-pfm-apple   { background: #c92e36; }
/* Nei risultati di ricerca: badge inline (non assoluto), più grande */
.pl-risultato .canzone-pfm-badge {
  position: static;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  box-shadow: none;
}

[data-tema="sera"] #pl-risultati-cerca { background: var(--carta-2); }
[data-tema="sera"] .pl-risultato { border-bottom-color: var(--riga-forte); }
[data-tema="sera"] .pl-risultato:hover { background: color-mix(in srgb, var(--salvia) 12%, var(--carta-2)); }

.badge-categoria {
  background: color-mix(in srgb, var(--oro) 12%, transparent);
  color: var(--inchiostro);
  border: 1px solid color-mix(in srgb, var(--oro) 30%, transparent);
}
[data-tema="sera"] .badge-categoria {
  background: color-mix(in srgb, var(--oro) 10%, transparent);
  border-color: color-mix(in srgb, var(--oro) 20%, transparent);
}

/* Badge categoria: angolo top-right assoluto sulla card */
.canzone-cat-badge {
  position: absolute;
  top: 0.65rem;
  right: 0.5rem;
  font-size: 0.58rem;
  padding: 0.08rem 0.4rem;
  letter-spacing: 0.07em;
  pointer-events: none;
}
/* Titolo: padding-right per non sovrapporre il badge */
.dj-titolo-padded {
  padding-right: 5rem;
}

.badge-genere {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0.22rem 0.6rem 0.22rem 0.45rem;
  border-radius: 20px;
  border: 1.5px solid color-mix(in srgb, var(--oro) 30%, transparent);
  background: color-mix(in srgb, var(--oro) 9%, var(--carta));
  color: var(--inchiostro);
  font-size: 0.72rem;
  font-family: var(--font-testo);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 28px;
  max-width: 8rem;
  overflow: visible;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.badge-genere::after {
  content: '';
  position: absolute;
  inset: -8px;
}
.badge-genere-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.canzone-meta .badge-genere { margin-top: 0; }

/* Cognome: nascosto su mobile, visibile su desktop */
.cda-cognome { display: none; }
@media (min-width: 640px) {
  .cda-cognome { display: inline; }
}
.badge-genere::before {
  content: '#';
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.55;
  flex-shrink: 0;
}
.badge-genere:hover {
  background: color-mix(in srgb, var(--oro) 18%, var(--carta));
  border-color: color-mix(in srgb, var(--oro) 60%, transparent);
  transform: scale(1.04);
}
.badge-genere:active {
  transform: scale(0.96);
}
[data-tema="sera"] .badge-genere {
  background: color-mix(in srgb, var(--oro) 12%, var(--carta-2));
  border-color: color-mix(in srgb, var(--oro) 28%, transparent);
  color: var(--inchiostro);
}
[data-tema="sera"] .badge-genere:hover {
  background: color-mix(in srgb, var(--oro) 22%, var(--carta-2));
  border-color: color-mix(in srgb, var(--oro) 55%, transparent);
}

.pl-filtro-attivo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--spazio-s);
  padding: 0.28rem 0.65rem 0.28rem 0.75rem;
  border-radius: 100px;
  border: none;
  background: var(--inchiostro);
  color: var(--carta);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-testo);
  cursor: pointer;
  min-height: 30px;
  position: relative;
  transition: opacity var(--transizione);
}
.pl-filtro-attivo::after {
  content: '';
  position: absolute;
  inset: -7px;
}
.pl-filtro-attivo:hover { opacity: 0.82; }
.pl-filtro-x,
.pl-chip-x {
  font-size: 0.8rem;
  opacity: 0.65;
  flex-shrink: 0;
}
[data-tema="sera"] .pl-filtro-attivo {
  background: var(--oro);
}

/* --- Filtri lista playlist (search + sort + generi) --- */
#pl-filtri-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: calc(-1 * var(--spazio-l) + var(--spazio-s));
}
#pl-filtri-lista:empty { display: none; }

.pl-barra-cerca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--carta-2);
  border: 1.5px solid var(--riga-forte);
  border-radius: 12px;
  padding: 0 0.75rem;
  min-height: 50px;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.pl-barra-cerca:focus-within {
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(180,150,90,.12);
}
.pl-cerca-icona {
  color: var(--tenue);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.pl-cerca-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-testo);
  font-size: 1rem;
  color: var(--inchiostro);
  padding: 0;
}
.pl-cerca-input:focus-visible { outline: none; }
.pl-cerca-input::placeholder { color: var(--tenue); }
.pl-cerca-input::-webkit-search-cancel-button { display: none; }
.pl-cerca-clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--tenue);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 28px;
  flex-shrink: 0;
  transition: color var(--transizione);
}
.pl-cerca-clear:hover { color: var(--inchiostro); }

.pl-filtri-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pl-sort-cuore { color: var(--errore-chiaro); font-size: 1.2em; line-height: 1; margin-right: 0.3em; }
.pl-sort-freccia { font-size: 1.3em; line-height: 1; margin-right: 0.3em; font-weight: 700; color: var(--inchiostro); }
.filtro-btn.attivo .pl-sort-freccia { color: var(--carta); }
.momenti-toggle:focus-visible { outline: none; }
.pl-sort-wrap {
  display: flex;
  gap: 10px;
}
.pl-sort-wrap .filtro-btn { flex: 1; }

.pl-genere-label {
  text-align: center;
}
.pl-genere-count {
  margin-left: 0.35em;
  font-weight: 500;
  opacity: 0.55;
  font-size: 1em;
  letter-spacing: 0;
}
.filtro-btn.attivo .pl-genere-count { opacity: 0.75; }

.pl-chip-attivi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: var(--spazio-xs);
}
.pl-chip-dismissibile {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--inchiostro);
  color: var(--carta);
  border: none;
  border-radius: 100px;
  padding: 0.28rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 30px;
  font-family: var(--font-testo);
  position: relative;
  transition: opacity var(--transizione);
}
.pl-chip-dismissibile::after {
  content: '';
  position: absolute;
  inset: -7px;
}
.pl-chip-dismissibile:hover { opacity: 0.82; }
[data-tema="sera"] .pl-chip-dismissibile {
  background: var(--oro);
}
.pl-chip-reset {
  background: none;
  border: none;
  color: var(--tenue);
  font-size: 0.75rem;
  font-family: var(--font-testo);
  cursor: pointer;
  padding: 0.28rem 0;
  min-height: 30px;
  text-decoration: underline;
  text-underline-offset: 2px;
  position: relative;
  transition: color var(--transizione);
}
.pl-chip-reset::after {
  content: '';
  position: absolute;
  inset: -7px;
}
.pl-chip-reset:hover { color: var(--inchiostro); }

/* --- Pulsante torna-su pill frosted-glass --- */
.torna-su {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  z-index: 120;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 100px;
  border: 1px solid rgba(180, 150, 90, 0.35);
  background: rgba(30, 58, 46, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--carta);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.torna-su.visibile {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.torna-su:active {
  transform: scale(0.94);
  opacity: 0.78;
}
[data-tema="sera"] .torna-su {
  background: rgba(36, 53, 41, 0.88);
  border-color: rgba(180, 150, 90, 0.25);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.38);
}

/* --- FAB carica foto (sinistra, sempre accessibile) --- */
.foto-fab-carica {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  left: 18px;
  z-index: 120;
  min-height: 44px;
  padding: 0 1rem 0 0.75rem;
  border-radius: 100px;
  border: none;
  background: var(--inchiostro);
  color: var(--carta);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.foto-fab-carica.visibile {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.foto-fab-carica:active {
  transform: scale(0.94);
  opacity: 0.82;
}
[data-tema="sera"] .foto-fab-carica {
  background: var(--inchiostro);
  color: var(--carta);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.42);
}

.pl-vuoto-cerca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spazio-m);
  padding: var(--spazio-l) 0 var(--spazio-m);
  text-align: center;
}
.pl-cta-proponi {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-vedi-tutte-wrap {
  display: flex;
  justify-content: center;
  padding: var(--spazio-s) 0;
}

[data-tema="sera"] .pl-barra-cerca:focus-within {
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(180,150,90,.15);
}

/* --- Pannello DJ --- */
#pannello-dj {
  margin-bottom: var(--spazio-l);
}
.pl-tab-strip {
  display: flex;
  border-bottom: 1px solid var(--riga);
  margin: 0 calc(-1 * var(--spazio-m));
  padding: 0 var(--spazio-m);
}
.pl-tab {
  flex: 1;
  padding: var(--spazio-s) var(--spazio-m);
  background: none;
  border: none;
  font-family: var(--font-testo);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tenue);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transizione), border-color var(--transizione);
  min-height: 44px;
}
.pl-tab.pl-tab-attiva {
  color: var(--inchiostro);
  border-bottom-color: var(--oro);
}
#pl-tab-scaletta,
#pl-tab-richieste {
  padding-top: var(--spazio-m);
}
.dj-cat-titolo {
  color: var(--oro-testo);
  letter-spacing: 0.07em;
  font-weight: 600;
  margin: var(--spazio-m) 0 var(--spazio-xs);
  text-transform: uppercase;
}
.dj-cat-titolo:first-child {
  margin-top: 0;
}
.dj-form-wrap {
  margin-top: var(--spazio-m);
  padding-top: var(--spazio-m);
  border-top: 1px solid var(--riga);
}

/* Riga submit+annulla nel form DJ — flex con pulsante submit espanso */
.dj-form-submit-riga {
  display: flex;
  gap: var(--spazio-s);
}
.dj-submit-espandi { flex: 1; }

/* Riga azioni DJ (Aggiungi canzone + Copia scaletta) in linea */
.dj-azioni-top {
  display: flex;
  gap: var(--spazio-m);
  flex-wrap: wrap;
}
.dj-scaletta-lista {
  gap: 6px;
}

/* Card scaletta DJ */
.dj-canzone,
.dj-richiesta {
  align-items: flex-start;
  flex-wrap: wrap;
}
.dj-titolo {
  flex-basis: 100%;
  margin-bottom: 4px;
  white-space: normal;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
}
.dj-canzone .canzone-info,
.dj-richiesta .canzone-info {
  overflow: hidden;
}
.dj-canzone .canzone-meta,
.dj-richiesta .canzone-meta {
  flex-wrap: wrap;
  overflow: hidden;
}
.dj-canzone .canzone-artista,
.dj-richiesta .canzone-artista {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.canzone-suonata {
  opacity: 0.45;
}
.dj-voti-meta {
  color: var(--rosa-testo);
}
.dj-suonata-label {
  color: var(--salvia-testo);
  font-weight: 600;
}
.dj-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 68px;
  align-self: center;
}
.dj-btn-ord {
  background: none;
  border: 1px solid var(--riga);
  border-radius: 6px;
  width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--corpo);
  font-size: 0.85rem;
  transition: all var(--transizione);
  flex-shrink: 0;
}
.dj-btn-ord:disabled {
  opacity: 0.25;
  cursor: default;
}
.dj-btn-ord:not(:disabled):hover {
  border-color: var(--inchiostro);
  color: var(--inchiostro);
}
.dj-btn-azione {
  font-size: 1rem;
  padding: 0;
  width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Card richieste DJ */
.dj-richieste-lista {
  gap: 6px;
}
.dj-azioni-richiesta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spazio-xs);
  flex-shrink: 0;
}
.dj-voti-grande {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-titoli);
  font-size: 1.1rem;
  color: var(--rosa-testo);
  padding: 0.2rem 0;
}
.dj-btn-scaletta,
.dj-btn-evita {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  flex-shrink: 0;
}
.dj-btn-scaletta {
  color: var(--salvia-testo);
}
.dj-btn-scaletta:hover {
  color: var(--inchiostro);
}
.dj-btn-evita {
  color: var(--errore);
}
.dj-btn-evita:hover {
  color: var(--errore-chiaro);
}
[data-tema="sera"] .dj-btn-scaletta:hover {
  color: var(--carta);
}
[data-tema="sera"] .dj-btn-evita {
  color: var(--errore-chiaro);
}
.dj-picker-categoria {
  flex-basis: 100%;
  padding: var(--spazio-xs) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-xs);
}
.dj-picker-label {
  flex-basis: 100%;
  margin-bottom: var(--spazio-xs);
}
.dj-picker-voce {
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--riga-forte);
  border-radius: 20px;
  min-height: 44px;
}
.dj-picker-voce:hover {
  border-color: var(--oro);
  color: var(--oro-testo);
}
.voto-limite {
  opacity: 0.35;
  cursor: default;
}

/* --- Card: oggetti asta --- */
#lista-asta {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-s);
}

.asta-oggetto {
  background: var(--carta);
  border-radius: 16px;
  padding: var(--spazio-s);
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 6px 20px rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.05);
  transition: box-shadow var(--transizione);
}

.asta-oggetto:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.09), 0 10px 28px rgba(0,0,0,.09);
}

[data-tema="sera"] .asta-oggetto {
  background: var(--carta-2);
  border-color: var(--riga);
}

/* Blocco identità: [foto] + info affiancati */
.asta-identita {
  margin-bottom: 0;
}

.asta-con-foto {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.asta-foto {
  width: 84px;
  min-width: 84px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.asta-info {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

/* Blocco azioni: full width sotto l'identità */
.asta-azioni {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xs);
  border-top: 1px solid var(--riga);
  padding-top: var(--spazio-xs);
  margin-top: var(--spazio-xs);
}

/* Bottone offerta a larghezza piena */
.asta-btn-full {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* Bottoni staff con icona inline */
.asta-btn-ico {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.asta-anteprima-foto {
  display: block;
  width: 70px;
  border-radius: 8px;
  margin: 0.3rem 0 0.5rem;
}

/* Riepilogo step 3 wizard asta */
.asta-wizard-riepilogo {
  background: color-mix(in srgb, var(--salvia) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--salvia) 25%, transparent);
  border-radius: var(--raggio);
  padding: var(--spazio-s);
}

/* (freccia nav gestita nel blocco .nav-voce sopra) */

/* --- Pulsante elastico: premi e rimbalza --- */
.btn-primario {
  transition: background var(--transizione), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-primario:active {
  transform: scale(0.91) !important;
  transition: transform 0.06s ease !important;
}

/* --- Skeleton loading --- */
.scheletro {
  background: linear-gradient(
    90deg,
    var(--riga) 25%,
    color-mix(in srgb, var(--carta-2) 80%, transparent) 50%,
    var(--riga) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 8px;
  color: transparent;
  user-select: none;
}

.scheletro-testo  { height: 1rem; margin-bottom: 0.4rem; width: 80%; }
.scheletro-titolo { height: 1.4rem; width: 55%; }
.scheletro-avatar { width: 38px; height: 38px; border-radius: 50%; }

/* --- Barra navigazione inferiore — stile iOS/Apple --- */
.barra-tab {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(250, 250, 250, 0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--riga);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 90;
  transform: translateY(0);
  transition: background 0.3s ease, transform 0.3s ease;
}

.barra-tab.barra-nascosta {
  transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
}

[data-tema="sera"] .barra-tab {
  background: rgba(20, 31, 25, 0.85);
}

.tab-voce {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  border-radius: 12px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  color: var(--corpo);
  font-family: var(--font-testo);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  min-height: 52px;
  padding: 7px 4px 8px;
  transition: color var(--transizione), background var(--transizione);
  position: relative;
}

.barra-tab:has(.tab-voce:nth-child(6)) .tab-voce {
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  padding-left: 2px;
  padding-right: 2px;
}

.tab-icona {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tab-voce:hover {
  color: var(--inchiostro);
}

.tab-voce.attiva {
  color: var(--oro-testo);
  font-weight: 700;
  background: none;
}

.tab-voce.attiva::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 3px;
  background: var(--oro);
  border-radius: 0 0 3px 3px;
}

.tab-voce.attiva .tab-icona {
  transform: scale(1.12);
  color: var(--oro-testo);
}

[data-tema="sera"] .tab-voce.attiva {
  background: none;
  color: var(--oro);
}

[data-tema="sera"] .tab-voce.attiva::before {
  background: var(--oro);
}

[data-tema="sera"] .tab-voce.attiva .tab-icona {
  color: var(--oro);
}

[data-tema="sera"] .btn-ferma {
  background: var(--errore-chiaro);
  color: var(--inchiostro);
}
[data-tema="sera"] .btn-ferma:hover { background: var(--errore-chiaro); }


/* Padding extra nelle sezioni interne per non coprire l'ultimo elemento */
.pagina-interna {
  padding-bottom: calc(var(--spazio-xl) + 4.5rem);
}

/* ============================================================
   AUTENTICAZIONE OSPITI — icona utente, menu, OTP, profilo
   ============================================================ */

/* --- Icona utente (cerchio con iniziali) --- */
.interruttore-utente {
  background: var(--inchiostro);
  color: var(--carta);
  border: none;
  border-radius: 99px;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  font-family: var(--font-testo);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  overflow: visible;
  position: relative;
}

.interruttore-utente:active { opacity: 0.75; }

[data-tema="sera"] .interruttore-utente {
  background: var(--salvia);
}

/* Nel header sticky il badge ruolo non ha spazio sotto il pulsante */
#intestazione-app .utente-ruolo-badge { display: none !important; }

.utente-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
  clip-path: circle(50%);
}

/* Pill ruolo — sotto il cerchio iniziali */
.utente-ruolo-badge {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.75rem;
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  display: none;
  border: 2px solid var(--carta);
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.15);
}
.utente-ruolo-badge[data-ruolo="sposo"]   { display: block; background: var(--azzurro); color: var(--carta); }
.utente-ruolo-badge[data-ruolo="sposa"]   { display: block; background: var(--rosa);    color: var(--carta); }
.utente-ruolo-badge[data-ruolo="planner"] { display: block; background: var(--salvia);  color: var(--carta); }
.utente-ruolo-badge[data-ruolo="dj"]      { display: block; background: var(--oro);     color: var(--carta); }
.utente-ruolo-badge[data-ruolo="catering"]{ display: block; background: var(--errore);  color: var(--carta); }

[data-tema="sera"] .utente-ruolo-badge { border-color: var(--inchiostro); }

/* Badge ruolo nella sezione Profilo */
.badge-ruolo {
  display: inline-block;
  align-self: flex-start;
  padding: 0.15rem 0.55rem;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: none;
  border: 1.5px solid currentColor;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-ruolo-sposo   { color: var(--azzurro); }
.badge-ruolo-sposa   { color: var(--rosa-testo); }
.badge-ruolo-planner { color: var(--salvia-testo); }
.badge-ruolo-dj      { color: var(--oro-testo); }
.badge-ruolo-catering{ color: var(--errore); }
.badge-ruolo-ospite  { color: var(--tenue); }

/* --- Dropdown menu utente --- */
.utente-menu {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px + 44px + 6px);
  right: 14px;
  z-index: 49;
  background: var(--carta);
  border: 1px solid var(--riga-forte);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  padding: var(--spazio-s);
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xs);
}

[data-tema="sera"] .utente-menu {
  background: var(--carta-2);
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
}

.utente-menu-nome {
  font-family: var(--font-testo);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--inchiostro);
  padding-bottom: var(--spazio-xs);
  border-bottom: 1px solid var(--riga);
  margin-bottom: 0;
}

[data-tema="sera"] .utente-menu-nome {
  color: var(--inchiostro);
}

/* --- Accesso multistep OTP --- */
.form-accesso-contenuto {
  padding: var(--spazio-m) 0;
}

.input-otp {
  font-size: 1.6rem;
  letter-spacing: 0.4em;
  text-align: center;
  font-family: var(--font-testo);
  font-weight: 300;
  padding-left: 0.4em;
}

/* --- Sezione profilo --- */
.profilo-intestazione {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spazio-s);
  margin-bottom: var(--spazio-s);
  padding-bottom: var(--spazio-s);
  border-bottom: 1px solid var(--riga);
}

.profilo-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.profilo-ruolo-badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.5rem;
  background: var(--carta);
  box-shadow: 0 1px 5px rgba(0,0,0,.13);
  white-space: nowrap;
}

[data-tema="sera"] .profilo-ruolo-badge {
  background: var(--carta-2);
}

.profilo-avatar {
  width: 68px;
  height: 68px;
  min-width: 68px;
  border-radius: 99px;
  background: var(--inchiostro);
  color: var(--carta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-testo);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  overflow: hidden;
  position: relative;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.profilo-avatar:active { opacity: 0.7; }

.profilo-avatar-dm {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: rgba(180, 60, 60, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

[data-tema="sera"] .profilo-avatar {
  background: var(--salvia);
}

.profilo-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.profilo-avatar:has(.profilo-avatar-img:not([hidden])) {
  background: transparent;
}

/* Overlay fotocamera sull'avatar profilo */
.profilo-avatar-fotocam {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: rgba(0, 0, 0, .52);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.75;
  transition: opacity 0.18s;
  pointer-events: none;
  z-index: 2;
}
.profilo-avatar:hover .profilo-avatar-fotocam,
.profilo-avatar:focus-visible .profilo-avatar-fotocam {
  opacity: 1;
}
/* Foto sito caricata: nasconde overlay a riposo, lo mostra al hover per "sostituisci" */
.profilo-avatar.ha-foto-sito .profilo-avatar-fotocam {
  opacity: 0;
}
.profilo-avatar.ha-foto-sito:hover .profilo-avatar-fotocam,
.profilo-avatar.ha-foto-sito:focus-visible .profilo-avatar-fotocam {
  opacity: 1;
}
/* Foto Google (no foto sito): camera a 0.4 come hint costante "carica la tua" */
.profilo-avatar:not(.ha-foto-sito):has(.profilo-avatar-img) .profilo-avatar-fotocam {
  opacity: 0.4;
}
.profilo-avatar.caricando .profilo-avatar-fotocam {
  opacity: 1;
  animation: none;
}
.profilo-avatar.caricando .profilo-avatar-fotocam svg {
  animation: spin-lento 1s linear infinite;
}
@keyframes spin-lento {
  to { transform: rotate(360deg); }
}

/* Pulsante rimuovi foto (× in alto a destra del cerchio) */
.profilo-avatar-rimuovi {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--errore);
  color: #fff;
  border: 2px solid var(--carta);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.profilo-avatar-rimuovi:hover { opacity: 0.85; transform: scale(1.1); }
.profilo-avatar-rimuovi::after {
  content: '';
  position: absolute;
  inset: -10px;
}
[data-tema="sera"] .profilo-avatar-rimuovi {
  border-color: var(--carta-2);
}

/* Hint testuale sotto nome quando la foto sito non è ancora caricata */
.profilo-foto-hint {
  font-size: 0.72rem;
  color: var(--tenue);
  margin-top: 0.1rem;
}

.profilo-dati {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 10px;
}

.profilo-nome {
  font-family: var(--font-testo);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--inchiostro);
  word-break: break-word;
  line-height: 1.2;
}

.profilo-edit-btn {
  position: absolute;
  top: 18px;
  right: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--riga-forte);
  border-radius: 50%;
  background: var(--carta);
  color: var(--corpo);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 5px rgba(0,0,0,.10);
  transition: background .15s, color .15s, box-shadow .15s;
}
.profilo-edit-btn::after {
  content: '';
  position: absolute;
  inset: -7px;
}
.profilo-edit-btn:hover {
  background: color-mix(in srgb, var(--oro) 10%, var(--carta));
  color: var(--oro-testo);
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}

[data-tema="sera"] .profilo-edit-btn {
  background: var(--carta-2);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 1px 5px rgba(0,0,0,.3);
}
[data-tema="sera"] .profilo-edit-btn:hover {
  background: color-mix(in srgb, var(--oro) 14%, var(--carta-2));
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.profilo-email {
  color: var(--tenue);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profilo-dati-footer {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  flex-wrap: wrap;
}

.profilo-form-nome {
  margin-bottom: var(--spazio-m);
  padding: var(--spazio-s);
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: 10px;
}

[data-tema="sera"] .profilo-form-nome {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}

.profilo-sezione {
  margin-bottom: var(--spazio-s);
  border: 1px solid var(--riga);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  background: var(--carta);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}

[data-tema="sera"] .profilo-sezione {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}

.profilo-sezione[data-sezione] {
  cursor: pointer;
}

.profilo-sezione[data-sezione]:hover {
  border-color: var(--salvia);
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
}

.profilo-sezione[data-sezione]:active {
  transform: scale(.985);
  box-shadow: none;
}

.profilo-sezione-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.profilo-sezione-titolo {
  font-family: var(--font-testo);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--inchiostro);
  letter-spacing: 0;
}

[data-tema="sera"] .profilo-sezione-titolo {
  color: var(--inchiostro);
}

.profilo-sezione-destra {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.profilo-sezione-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tenue);
  background: var(--salvia-tenue);
  border-radius: 99px;
  padding: 0.1em 0.55em;
  min-width: 1.4em;
  text-align: center;
  line-height: 1.6;
}

[data-tema="sera"] .profilo-sezione-count {
  background: rgba(255,255,255,.1);
}

.profilo-dm-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: #e03e3e;
  border-radius: 99px;
  padding: 0.1em 0.55em;
  min-width: 1.4em;
  text-align: center;
  line-height: 1.6;
}
[data-tema="sera"] .profilo-dm-count {
  background: #cf7070;
}

.profilo-sezione-freccia {
  width: 16px;
  height: 16px;
  color: var(--tenue);
  flex-shrink: 0;
  transition: color .15s, transform .15s;
}

.profilo-sezione[data-sezione]:hover .profilo-sezione-freccia {
  color: var(--salvia-testo);
  transform: translateX(2px);
}

.profilo-lista {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.profilo-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.1rem 0;
}

.profilo-item .profilo-item-testo {
  flex: 1;
  min-width: 0;
}

.profilo-item .etichetta {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}

.profilo-item-testo {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--corpo);
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-tema="sera"] .profilo-item-testo {
  color: var(--inchiostro);
}

.profilo-item-altro {
  font-size: 0.78rem;
  color: var(--tenue);
  margin-top: 0.25rem;
}

/* DM inbox nel profilo */
.profilo-dm-sezione {
  cursor: default;
}
.profilo-dm-lista {
  display: flex;
  flex-direction: column;
}
.profilo-dm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--riga);
  cursor: pointer;
  position: relative;
}
.profilo-dm-item:last-child { border-bottom: none; }
.profilo-dm-item:hover .profilo-dm-avt { opacity: .8; }
.profilo-dm-avt {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.profilo-dm-avt-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.profilo-dm-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profilo-dm-nome {
  font-size: .9rem;
  font-weight: 600;
  color: var(--inchiostro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profilo-dm-nome--unread { font-weight: 800; }
.profilo-dm-preview {
  font-size: .78rem;
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profilo-dm-preview--unread {
  color: var(--corpo);
  font-weight: 600;
}
.profilo-dm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rosa);
  flex-shrink: 0;
}
[data-tema="sera"] .profilo-dm-item {
  border-bottom-color: var(--riga-forte);
}

.profilo-piede {
  margin-top: var(--spazio-l);
  padding-top: var(--spazio-m);
  border-top: 1px solid var(--riga);
  display: flex;
  flex-direction: column;
  gap: var(--spazio-s);
}

[data-tema="sera"] .profilo-piede {
  border-color: var(--riga-forte);
}

.profilo-piede-azioni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spazio-s);
}

.profilo-genere-pills {
  display: flex;
  gap: 6px;
  margin-top: var(--spazio-xs);
}
.profilo-genere-btn {
  background: var(--carta-2);
  border: 1.5px solid var(--riga-forte);
  border-radius: 100px;
  color: var(--corpo);
  font-family: var(--font-testo);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 6px 20px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.profilo-genere-btn:hover { border-color: var(--oro); }
.profilo-genere-btn.attivo {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--carta);
}
[data-tema="sera"] .profilo-genere-btn { background: rgba(255,255,255,.06); }
[data-tema="sera"] .profilo-genere-btn.attivo {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--inchiostro);
}

.profilo-tema-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 280px;
  margin: 0 auto var(--spazio-s);
}

.profilo-tema-label {
  color: var(--inchiostro);
}

.btn-esci {
  font-family: var(--font-testo);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--errore);
  background: none;
  border: 2px solid var(--errore);
  border-radius: 99px;
  padding: 0.6em 2.4em;
  min-height: 48px;
  width: 100%;
  max-width: 280px;
  cursor: pointer;
  transition: background .18s, color .18s, transform .12s, opacity .15s;
}

.btn-esci:hover {
  background: var(--errore);
  color: var(--carta);
  transform: translateY(-1px);
}

.btn-esci:active {
  opacity: 0.8;
  transform: translateY(0);
}

[data-tema="sera"] .btn-esci {
  color: var(--errore-chiaro);
  border-color: var(--errore-chiaro);
}

[data-tema="sera"] .btn-esci:hover {
  background: var(--errore-chiaro);
  color: var(--inchiostro);
}

.btn-staff {
  display: block;
  font-family: var(--font-testo);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  color: var(--inchiostro);
  background: none;
  border: 2px solid var(--inchiostro);
  border-radius: 99px;
  padding: 0.6em 2.4em;
  min-height: 48px;
  width: 100%;
  max-width: 280px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s, transform .12s, opacity .15s;
}

.btn-staff:hover {
  background: var(--inchiostro);
  color: var(--carta);
  transform: translateY(-1px);
}

.btn-staff:active {
  opacity: 0.8;
  transform: translateY(0);
}

[data-tema="sera"] .btn-staff {
  color: var(--inchiostro);
  border-color: var(--inchiostro);
}

[data-tema="sera"] .btn-staff:hover {
  background: var(--inchiostro);
  color: var(--carta);
}

.versione-app {
  margin-top: var(--spazio-s);
  font-size: 0.78rem;
  opacity: 0.35;
  letter-spacing: 0.05em;
}

.banner-accesso {
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: 14px;
  padding: var(--spazio-m);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-s);
  align-items: center;
  text-align: center;
}

.banner-accesso-testo {
  font-size: 0.95rem;
  color: var(--corpo);
  line-height: 1.45;
}

.banner-accesso-btn {
  align-self: stretch;
}

[data-tema="sera"] .banner-accesso {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}

/* === Dashboard CEO === */
.dashboard-contenuto {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-m);
}

.dash-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-s);
}

.dash-stat {
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: 14px;
  padding: var(--spazio-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.dash-stat .etichetta {
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.3;
}

.dash-stat-num {
  font-family: var(--font-titoli);
  font-size: 2.2rem;
  color: var(--inchiostro);
  line-height: 1;
}

.dash-stats-secondarie .dash-stat {
  padding: 10px 6px;
}
.dash-stats-secondarie .dash-stat-num {
  font-size: 1.8rem;
}

.dash-stat--warn {
  border-color: var(--oro);
}
.dash-stat--warn .dash-stat-num {
  color: var(--oro-testo);
}

.dash-sezione {
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: 14px;
  overflow: hidden;
}

.dash-sezione-titolo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tenue);
  padding: var(--spazio-s) var(--spazio-m);
  border-bottom: 1px solid var(--riga);
}

.dash-lista {
  display: flex;
  flex-direction: column;
}

.dash-riga {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--spazio-s);
  padding: 10px var(--spazio-m);
  border-bottom: 1px solid var(--riga);
  min-height: 44px;
}

.dash-riga[data-sezione] {
  cursor: pointer;
  transition: background .12s;
}

.dash-riga[data-sezione]:hover {
  background: var(--salvia-tenue);
}

[data-tema="sera"] .dash-riga[data-sezione]:hover {
  background: rgba(255,255,255,.04);
}

.dash-riga:last-child {
  border-bottom: none;
}

.dash-feed-chi {
  font-size: 1rem;
  font-weight: 600;
  color: var(--inchiostro);
  white-space: nowrap;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-feed-cosa {
  font-size: 1rem;
  color: var(--corpo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-feed-quando {
  font-size: 0.78rem;
  white-space: nowrap;
}

.dash-stato-proposta { color: var(--oro-testo); }
.dash-stato-da_suonare { color: var(--salvia-testo); }
.dash-stato-da_evitare { color: var(--rosa-testo); }

.nav-voce-dashboard {
  color: var(--oro-testo);
  font-weight: 600;
}

[data-tema="sera"] .dash-stat,
[data-tema="sera"] .dash-sezione {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}

/* === Pagina accesso redesign === */
.accesso-pagina {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spazio-l) var(--spazio-m);
  position: relative;
}

.accesso-torna {
  display: none;
}

.accesso-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-m);
}

.accesso-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--spazio-s);
}

.accesso-brand-nome {
  font-family: var(--font-titoli);
  font-size: 2rem;
  color: var(--inchiostro);
  letter-spacing: 0.04em;
}

.accesso-brand-data {
  color: var(--tenue);
}

.accesso-titolo {
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  color: var(--inchiostro);
  margin-bottom: var(--spazio-xs, .25rem);
}

.accesso-desc {
  font-size: 0.9rem;
  color: var(--tenue);
  line-height: 1.5;
  margin-bottom: var(--spazio-m);
}

.accesso-msg {
  margin-top: var(--spazio-s);
  color: var(--rosa-testo);
  min-height: 1.2em;
}

.accesso-riinvia {
  margin-top: var(--spazio-s);
  display: block;
  text-align: center;
}

/* 6 box OTP */
.otp-boxes {
  display: flex;
  gap: var(--spazio-s);
  justify-content: center;
  margin-bottom: var(--spazio-m);
}

.otp-box {
  width: 48px;
  height: 56px;
  border: 1.5px solid var(--riga-forte);
  border-radius: 10px;
  background: var(--carta);
  font-size: 1.5rem;
  font-family: var(--font-testo);
  color: var(--inchiostro);
  text-align: center;
  outline: none;
  transition: border-color .15s;
  caret-color: transparent;
}

.otp-box:focus {
  border-color: var(--oro);
}

[data-tema="sera"] .otp-box {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}

[data-tema="sera"] .accesso-brand-nome {
  color: var(--inchiostro);
}

.accesso-card {
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: 20px;
  padding: var(--spazio-l);
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
}

[data-tema="sera"] .accesso-card {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}

/* === Accesso redesign v2 — big tech style === */
.accesso-pagina {
  background: #f0eeeb; /* eccezione documentata: crema calda intenzionalmente diversa da --carta (#FAFAFA) */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spazio-m) + env(safe-area-inset-top, 0px)) var(--spazio-s) var(--spazio-m);
  gap: var(--spazio-s);
  position: relative;
}

[data-tema="sera"] .accesso-pagina {
  background: var(--carta-2);
}

.accesso-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: var(--spazio-m);
  margin-bottom: var(--spazio-m);
  border-bottom: 1px solid var(--riga);
}

.accesso-brand-nome {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 500;
  color: var(--inchiostro);
  letter-spacing: 0.02em;
}

.accesso-ornamento {
  margin: 0;
}

.accesso-ornamento .filo-oro {
  width: 32px;
}

.accesso-ornamento .diamante-oro {
  font-size: 0.45rem;
}

[data-tema="sera"] .accesso-brand {
  border-color: var(--riga-forte);
}

.accesso-card {
  width: 100%;
  max-width: 380px;
  background: var(--carta);
  border-radius: 20px;
  padding: var(--spazio-m) var(--spazio-m) var(--spazio-m);
  box-shadow: 0 2px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 0;
}

[data-tema="sera"] .accesso-card {
  background: var(--carta-2);
  box-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.accesso-titolo {
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  color: var(--inchiostro);
  margin: 0 0 0.4rem;
}

.accesso-desc {
  font-size: 0.88rem;
  color: var(--tenue);
  line-height: 1.5;
  margin: 0 0 var(--spazio-s);
}

/* ===== Floating label — accesso card ===== */
.accesso-card .campo {
  position: relative;
}

.accesso-card .campo .etichetta {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 400;
  color: var(--tenue);
  letter-spacing: 0.01em;
  text-transform: none;
  pointer-events: none;
  transition: top .17s ease, transform .17s ease, font-size .17s ease, color .17s ease, letter-spacing .17s ease;
  z-index: 1;
}

.accesso-card .campo:has(.input-sottolineato:focus) .etichetta,
.accesso-card .campo:has(.input-sottolineato:not(:placeholder-shown)) .etichetta {
  top: 11px;
  transform: translateY(0);
  font-size: 0.72rem;
  color: var(--oro-testo);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.accesso-card .input-sottolineato {
  border: 1.5px solid var(--riga-forte);
  border-radius: 12px;
  padding: 28px 14px 10px;
  height: 60px;
  font-size: 1rem;
  width: 100%;
  background: var(--carta);
  color: var(--inchiostro);
  outline: none;
  transition: border-color .17s, box-shadow .17s;
}

.accesso-card .input-sottolineato::placeholder {
  color: transparent;
  transition: color .15s;
}

.accesso-card .input-sottolineato:focus::placeholder {
  color: var(--tenue);
}

.accesso-card .input-sottolineato:focus {
  border-color: var(--inchiostro);
  box-shadow: 0 0 0 3.5px rgba(30,40,35,.08);
}

/* Azzera il tint blu del browser sull'autofill */
.accesso-card .input-sottolineato:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px var(--carta) inset;
  -webkit-text-fill-color: var(--inchiostro);
  transition: background-color 9999s;
}

[data-tema="sera"] .accesso-card .input-sottolineato:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px var(--carta-2) inset;
}

[data-tema="sera"] .accesso-card .input-sottolineato {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  color: var(--inchiostro);
}

[data-tema="sera"] .accesso-card .input-sottolineato:focus {
  border-color: var(--oro);
  box-shadow: 0 0 0 3.5px rgba(var(--oro-rgb, 180,150,90),.12);
}

[data-tema="sera"] .accesso-card .campo:has(.input-sottolineato:focus) .etichetta {
  color: var(--oro-testo);
}

.accesso-msg {
  margin-top: 0.25rem;
  color: var(--rosa-testo);
  min-height: 0;
  font-size: 0.85rem;
}

.accesso-riinvia {
  margin-top: var(--spazio-s);
  display: block;
  text-align: center;
  font-size: 0.85rem;
}

/* Separatore "oppure" nella card accesso */
.accesso-separatore {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  margin: var(--spazio-xs) 0;
  color: var(--tenue);
  font-size: 0.82rem;
}

.accesso-separatore::before,
.accesso-separatore::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--riga);
}

/* Bottone Google OAuth */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--spazio-m);
  white-space: nowrap;
  background: var(--carta);
  border: 1.5px solid var(--riga-forte);
  border-radius: 12px;
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 500;
  color: var(--inchiostro);
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione), transform var(--transizione);
}

.btn-google svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.btn-google:hover {
  border-color: var(--corpo);
}

.btn-google:active {
  transform: scale(0.98);
}

.btn-google:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

[data-tema="sera"] .btn-google {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  color: var(--inchiostro);
}

[data-tema="sera"] .btn-google:hover {
  border-color: var(--tenue);
}

/* Bottone primario full-width nella card di accesso */
.accesso-card .form-verticale .btn-primario {
  align-self: stretch;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Nessuna animazione stagger sulla pagina accesso — evita il flash di sfondo vuoto */
.accesso-pagina.sezione-entra > * {
  animation: none;
}

/* OTP box responsive — flex invece di larghezza fissa */
.otp-boxes {
  gap: var(--spazio-xs, 6px);
}

.otp-box {
  width: auto;
  flex: 1;
  min-width: 0;
  height: 52px;
  font-size: 1.3rem;
}

.versione-app {
  font-size: 0.6rem;
  opacity: 0.18;
}

.banner-accesso-testo {
  color: var(--inchiostro);
  font-size: 1rem;
}

.banner-accesso {
  margin: 0;
  padding: var(--spazio-m);
  gap: var(--spazio-s);
}

.banner-accesso-btn {
  font-size: 1rem;
  padding: 16px;
  min-height: 56px;
}

.banner-accesso-testo {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--inchiostro);
}

/* === Banner installazione PWA === */
.banner-installa {
  position: fixed;
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  left: var(--spazio-m);
  right: var(--spazio-m);
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 150;
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
  animation: slideUpIn .3s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.installa-brand-nome {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--inchiostro);
  letter-spacing: 0.01em;
  margin: 0;
}

.installa-ornamento {
  max-width: 140px;
  margin: 2px auto 4px;
}

.installa-desc {
  font-size: 0.82rem;
  color: var(--tenue);
  margin: 4px 0 10px;
  line-height: 1.4;
  max-width: 220px;
}

.installa-btn {
  font-size: 0.9rem;
  padding: 10px 32px;
  min-height: 44px;
  border-radius: 22px;
  width: 100%;
  max-width: 200px;
  align-self: center;
}

.installa-chiudi {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--tenue);
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-tema="sera"] .banner-installa {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

/* Menu utente — testo leggibile in entrambi i temi */
.utente-menu .btn-link {
  color: var(--inchiostro);
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

[data-tema="sera"] .utente-menu .btn-link {
  color: var(--inchiostro);
}

.utente-menu #btn-esci {
  color: var(--rosa-testo) !important;
}

/* Rimuove anello focus nativo su toggle tema */
.interruttore-tema:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

.interruttore-tema:focus:not(:focus-visible) {
  outline: none;
}

/* --- Dropdown utente: link Pannello staff --- */
.utente-menu-staff {
  color: var(--oro-testo) !important;
  font-weight: 500;
}

/* --- Dashboard: griglia quick-nav staff --- */
.dash-nav-staff {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spazio-xs);
  margin-bottom: var(--spazio-l);
}

.dash-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--inchiostro);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dash-nav-chip {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: 16px;
  transition: background .15s, border-color .15s;
}

.dash-nav-label {
  font-size: .68rem;
  font-weight: 500;
  color: var(--tenue);
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.2;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.dash-nav-icona {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--tenue);
  transition: color .15s;
}

.dash-nav-item:hover .dash-nav-chip,
.dash-nav-item:focus-visible .dash-nav-chip {
  background: var(--salvia-tenue);
  border-color: var(--salvia);
}

.dash-nav-item:hover .dash-nav-icona,
.dash-nav-item:focus-visible .dash-nav-icona {
  color: var(--inchiostro);
}

.dash-nav-item:hover .dash-nav-label,
.dash-nav-item:focus-visible .dash-nav-label {
  color: var(--inchiostro);
}

[data-tema="sera"] .dash-nav-chip {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}

[data-tema="sera"] .dash-nav-icona {
  color: var(--tenue);
}

[data-tema="sera"] .dash-nav-item:hover .dash-nav-chip,
[data-tema="sera"] .dash-nav-item:focus-visible .dash-nav-chip {
  background: color-mix(in srgb, var(--salvia) 15%, transparent);
  border-color: var(--salvia);
}

[data-tema="sera"] .dash-nav-item:hover .dash-nav-icona,
[data-tema="sera"] .dash-nav-item:focus-visible .dash-nav-icona {
  color: var(--inchiostro);
}

/* --- Dashboard stats secondarie (3 colonne) --- */
.dash-stats-secondarie {
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--riga);
  padding-top: var(--spazio-m);
}

/* --- Dashboard compatta: riduce spaziature generali --- */
#sezione-dashboard.pagina-interna {
  gap: var(--spazio-s);
}
#sezione-dashboard .dash-stats {
  gap: var(--spazio-xs);
}
#sezione-dashboard .dash-stats-secondarie {
  padding-top: var(--spazio-xs);
}
#sezione-dashboard .dash-stat {
  padding: 8px var(--spazio-xs);
  gap: 2px;
}
#sezione-dashboard .dash-stat-num {
  font-size: 1.55rem;
}
#sezione-dashboard .dash-stats-secondarie .dash-stat {
  padding: 6px 4px;
}
#sezione-dashboard .dash-stats-secondarie .dash-stat-num {
  font-size: 1.25rem;
}
#sezione-dashboard .dash-stat .etichetta {
  font-size: 0.62rem;
}
#sezione-dashboard .dash-nav-staff {
  gap: 6px;
  margin-bottom: var(--spazio-s);
}
#sezione-dashboard .dash-nav-chip {
  border-radius: 12px;
}
#sezione-dashboard .dash-nav-icona {
  width: 20px;
  height: 20px;
}
#sezione-dashboard .dash-nav-label {
  font-size: .6rem;
}
#sezione-dashboard .dash-sezione-titolo {
  padding: 7px var(--spazio-s);
  font-size: 0.7rem;
}
#sezione-dashboard .dash-riga {
  padding: 7px var(--spazio-s);
  min-height: 38px;
  gap: var(--spazio-xs);
  font-size: 0.88rem;
}
#sezione-dashboard .dash-feed-chi {
  font-size: 0.82rem;
}
#sezione-dashboard .dash-feed-quando {
  font-size: 0.7rem;
}

/* =====================================================
   BAR DELLA SERATA
   ===================================================== */

.bar-azioni-staff {
  margin-bottom: var(--spazio-m);
}

.bar-categoria-titolo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tenue);
  margin: var(--spazio-l) 0 var(--spazio-s);
}

.bar-lista {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-s);
}

.bar-drink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-s);
  padding: var(--spazio-s) var(--spazio-m);
}

.bar-drink-nome {
  font-size: 1rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.bar-drink-azioni {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  flex-shrink: 0;
}

.bar-cuore {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--tenue);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s, transform 0.15s;
}

.bar-cuore:hover {
  color: var(--rosa-testo);
  transform: scale(1.15);
}

.bar-cuore.votato {
  color: var(--rosa-testo);
}
.bar-cuore.pop {
  animation: reazione-pop .42s cubic-bezier(.36,.07,.19,.97) both;
}

.bar-voti {
  font-size: 0.85rem;
  min-width: 1.5rem;
  text-align: right;
}

.bar-rimuovi {
  color: var(--tenue);
  font-size: 0.8rem;
}

[data-tema="sera"] .bar-drink {
  background: var(--carta-2);
  border-color: var(--riga-forte);
}

/* badge RSVP fase oro */
.badge-oro {
  background: rgba(var(--oro-rgb, 180, 145, 60), .12);
  color: var(--oro-testo);
}


/* =====================================================
   CHECK-IN ARRIVI
   ===================================================== */

.checkin-conferma {
  text-align: center;
  padding: var(--spazio-xl) var(--spazio-m);
}

.checkin-icona {
  font-size: 3rem;
  color: var(--salvia-testo);
  margin-bottom: var(--spazio-m);
}

.checkin-titolo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--inchiostro);
  margin-bottom: var(--spazio-s);
  line-height: 1.4;
}

.checkin-redirect-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  font-size: .82em;
  font-weight: 700;
  margin-left: .4em;
  vertical-align: middle;
}
[data-tema="sera"] .checkin-redirect-counter {
  background: rgba(0,0,0,.18);
}

.checkin-barra-wrap {
  height: 6px;
  background: var(--riga);
  border-radius: 3px;
  margin: var(--spazio-m) 0;
  overflow: hidden;
}

.checkin-barra {
  height: 100%;
  background: var(--salvia);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.checkin-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--spazio-m);
}

.checkin-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  padding: var(--spazio-s) 0;
  border-bottom: 1px solid var(--riga);
  font-size: 0.95rem;
}

.checkin-dot {
  flex-shrink: 0;
  font-size: 0.6rem;
}

.checkin-arrivato .checkin-dot { color: var(--salvia-testo); }
.checkin-mancante .checkin-dot { color: var(--tenue); }
.checkin-mancante { color: var(--tenue); }

.checkin-riga .etichetta {
  margin-left: auto;
}

[data-tema="sera"] .checkin-barra-wrap {
  background: var(--riga-forte);
}

.checkin-reset-btn {
  display: block;
  position: relative;
  margin-top: var(--spazio-s);
  font-size: .75rem;
  color: var(--tenue);
  text-transform: none;
  letter-spacing: 0;
  min-height: 0;
  padding: 0;
}
.checkin-reset-btn::after {
  content: '';
  position: absolute;
  inset: -15px;
}
.checkin-reset-btn:hover { color: var(--errore-chiaro); }

/* =============================================
   ACCESSIBILITÀ — aggiunto in vl-v318
   ============================================= */

/* A2 — Rispetta l'impostazione "Riduci movimento" del dispositivo (es. iOS: Accessibilità → Movimento) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Playlist: step dedica ---- */

.dedica-scelta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-m);
  margin: var(--spazio-m) 0;
}

.dedica-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: var(--spazio-m) var(--spazio-s);
  background: var(--carta);
  border: 1.5px solid var(--riga-forte);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  min-height: 130px;
  text-align: center;
}
.dedica-card[data-dedica="sposo"] { border-color: #4A90D9; }
.dedica-card[data-dedica="sposa"] { border-color: #C45C78; }
[data-tema="sera"] .dedica-card[data-dedica="sposo"] { border-color: #6AAAE8; }
[data-tema="sera"] .dedica-card[data-dedica="sposa"] { border-color: #D97A90; }
.dedica-card:not([disabled]):hover,
.dedica-card:not([disabled]):focus-visible {
  transform: translateY(-2px);
}
.dedica-card[data-dedica="sposo"]:not([disabled]):hover,
.dedica-card[data-dedica="sposo"]:not([disabled]):focus-visible { border-color: #2E72C2; }
.dedica-card[data-dedica="sposa"]:not([disabled]):hover,
.dedica-card[data-dedica="sposa"]:not([disabled]):focus-visible { border-color: #A83D5E; }
[data-tema="sera"] .dedica-card[data-dedica="sposo"]:not([disabled]):hover,
[data-tema="sera"] .dedica-card[data-dedica="sposo"]:not([disabled]):focus-visible { border-color: #8ABDE8; }
[data-tema="sera"] .dedica-card[data-dedica="sposa"]:not([disabled]):hover,
[data-tema="sera"] .dedica-card[data-dedica="sposa"]:not([disabled]):focus-visible { border-color: #E89AAD; }
.dedica-card--occupata {
  opacity: 0.72;
  cursor: default;
}
.dedica-card-ruolo {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tenue);
  font-weight: 600;
}
.dedica-card-heart {
  font-size: 1.6rem;
  color: var(--rosa);
  line-height: 1;
  margin: 0.1rem 0;
}
.dedica-card-nome {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--inchiostro);
}
.dedica-card-canzone {
  font-size: 0.82rem;
  color: var(--corpo);
  font-style: italic;
  margin-top: 0.1rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dedica-card-stato {
  color: var(--tenue);
  font-size: 0.75rem;
}
.dedica-card--occupata .dedica-card-stato {
  background: var(--salvia-tenue);
  color: var(--salvia-testo);
  padding: 0.15rem 0.65rem;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
[data-tema="sera"] .dedica-card--occupata .dedica-card-stato {
  background: rgba(107,142,107,0.18);
  color: var(--salvia);
}

.pl-dedica-info {
  background: none;
  border: 1.5px solid var(--riga-forte);
  border-radius: 100px;
  padding: 0.3rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--inchiostro);
  text-align: center;
  margin-bottom: var(--spazio-s);
}
.pl-dedica-info[data-dedica="sposo"] { border-color: #4A90D9; }
.pl-dedica-info[data-dedica="sposa"] { border-color: #C45C78; }
[data-tema="sera"] .pl-dedica-info[data-dedica="sposo"] { border-color: #6AAAE8; }
[data-tema="sera"] .pl-dedica-info[data-dedica="sposa"] { border-color: #D97A90; }

/* ---- Playlist: slot proposte ---- */

.pl-mie-proposte {
  margin-bottom: var(--spazio-m);
}

.pl-mie-titolo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--inchiostro);
  margin-bottom: var(--spazio-s);
}

.pl-slot-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.pl-slot {
  min-width: 0; /* impedisce all'item grid di allargarsi oltre 1fr per contenuto lungo */
  background: var(--carta);
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 80px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
  transition: box-shadow var(--transizione);
  border: 1.5px solid transparent;
}
.pl-slot:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1), 0 6px 20px rgba(0,0,0,.08); }
.pl-slot--sposo { border-color: #4A90D9; }
.pl-slot--sposa { border-color: #C45C78; }
[data-tema="sera"] .pl-slot { background: var(--carta-2); box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2); }
[data-tema="sera"] .pl-slot--sposo { border-color: #6AAAE8; }
[data-tema="sera"] .pl-slot--sposa { border-color: #D97A90; }
.pl-slot--occupata { cursor: default; position: relative; }
.pl-slot--occupata:hover { box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06); }
.pl-slot-play {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--carta);
  border: 1.5px solid var(--riga-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione);
  color: var(--inchiostro);
  padding: 0;
}
.pl-slot-play::after { content: ''; position: absolute; inset: -8px; }
.pl-slot-play:hover { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 6%, var(--carta)); }
[data-tema="sera"] .pl-slot-play { background: var(--carta-2); border-color: var(--riga-forte); }
[data-tema="sera"] .pl-slot-play:hover { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 10%, var(--carta-2)); }

.pl-slot-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tenue);
  font-weight: 600;
  display: block;
  margin-bottom: 0.05rem;
}
.pl-slot-titolo {
  font-size: 0.82rem;
  color: var(--corpo);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  margin-top: 2px;
  min-height: calc(0.82rem * 1.6 * 2); /* 2 righe garantite → titoli allineati tra i due slot */
}
.pl-slot-voti {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--rosa-testo);
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: auto; /* spinge voti+annulla in fondo → allineamento identico tra i due slot */
}
.pl-slot-voti-count { white-space: nowrap; flex-shrink: 0; }
[data-tema="sera"] .pl-slot-voti { color: var(--rosa); }
.pl-slot-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--salvia-testo);
  letter-spacing: 0.01em;
}
[data-tema="sera"] .pl-slot-cta { color: var(--salvia); }
.pl-slot-annulla {
  display: inline-block;
  margin-top: 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--tenue);
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  min-height: 0;
}
.pl-slot-annulla:hover { color: var(--errore-chiaro); }
[data-tema="sera"] .pl-slot-annulla:hover { color: var(--errore); }
.pl-slot .voters-list { gap: 3px; margin-top: 0; }
.pl-slot .voter-bubble { width: 18px; height: 18px; font-size: 0.48rem; margin-right: 0; border-width: 1.5px; }
.pl-slot .voter-bubble:nth-child(n+4) { display: none; } /* max 3 bubble visibili, il resto si vede aprendo il panel */
.pl-slot .voter-piu { display: none; } /* il chevron > è già il segnale "ci sono altri" */
.pl-slot .voters-list-chevron { margin-left: 4px; }
.pl-slot .canzone-voters-panel { flex-basis: auto; border-top: 1px solid var(--riga); padding: 6px 0 2px; margin-top: 4px; max-height: 180px; overflow-y: auto; }

/* ---- Playlist: badge dedica nel pannello DJ ---- */

.dedica-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.5rem;
  border-radius: 100px;
  vertical-align: middle;
}
.dedica-badge--sposo {
  background: color-mix(in srgb, var(--azzurro) 15%, transparent);
  color: var(--azzurro);
}
.dedica-badge--sposa {
  background: color-mix(in srgb, var(--rosa) 15%, transparent);
  color: var(--rosa-testo);
}
[data-tema="sera"] .dedica-badge--sposa {
  color: var(--rosa);
}

/* ---- Dashboard: toggle impostazioni ---- */

.dash-toggle-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-m);
  padding: 12px var(--spazio-m);
  border-bottom: 1px solid var(--riga);
  cursor: default;
}

.dash-toggle-riga:last-child {
  border-bottom: none;
}

.dash-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.dash-toggle-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--inchiostro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-toggle-desc {
  font-size: 0.75rem;
  color: var(--tenue);
  font-weight: 400;
  line-height: 1.3;
}

.dash-nomi-slot-form {
  padding: 14px var(--spazio-m) var(--spazio-m);
  border-top: 1px solid var(--riga);
  display: flex;
  flex-direction: column;
  gap: var(--spazio-s);
}

.dash-nomi-slot-form > .etichetta {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--tenue);
  margin-bottom: 2px;
}

.dash-nomi-slot-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-s);
}

.dash-nomi-slot-form .campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-nomi-slot-form .campo .etichetta {
  font-size: 0.7rem;
}

.dash-nomi-slot-form .input-sottolineato {
  font-size: 1rem;
  padding: 0.45rem 0.7rem;
  min-height: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-nomi-slot-form .btn-testo {
  align-self: flex-end;
  font-size: 0.82rem;
  min-height: 0;
  padding: 0;
}

.dash-empty-inline {
  padding: 14px var(--spazio-m);
  border-top: 1px solid var(--riga);
}

.dash-empty-inline-testo {
  font-size: 0.82rem;
  color: var(--tenue);
  line-height: 1.4;
}

.toggle-switch {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 100px;
  border: none;
  background: var(--riga-forte);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
  padding: 0;
}
.toggle-switch.toggle-on {
  background: var(--salvia);
}
[data-tema="sera"] .toggle-switch.toggle-on {
  background: var(--salvia-testo);
}
.toggle-track {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--carta);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform 0.2s;
}
.toggle-switch.toggle-on .toggle-track {
  transform: translateX(20px);
}

.dash-toggle-nota {
  color: var(--tenue);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  padding: var(--spazio-xs) var(--spazio-m) var(--spazio-s);
}

/* ---- Backup widget — redesign big-tech ---- */

.dash-bk-card {
  border-radius: 16px;
  border: 1px solid var(--riga-forte);
  overflow: hidden;
  background: var(--carta);
}
[data-tema="sera"] .dash-bk-card {
  background: var(--carta-2);
}

/* Riga hero: icona + body (label+chips | timestamp) */
.dash-bk-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--spazio-s);
}
.dash-bk-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-bk-ico svg { width: 20px; height: 20px; }
.dash-bk-ico--ok  { background: color-mix(in srgb, var(--salvia) 18%, var(--carta)); color: var(--salvia-testo); }
.dash-bk-ico--err { background: color-mix(in srgb, var(--errore) 15%, var(--carta)); color: var(--errore); }
[data-tema="sera"] .dash-bk-ico--ok  { background: rgba(100,130,100,.22); color: #7fbf7f; }
[data-tema="sera"] .dash-bk-ico--err { background: rgba(180,60,60,.22); color: var(--errore-chiaro); }

.dash-bk-hero-body { flex: 1; min-width: 0; }
.dash-bk-hero-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-bk-hero-label {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--inchiostro);
  line-height: 1.2;
}
.dash-bk-hero-when {
  display: block;
  font-size: 0.78rem;
  color: var(--tenue);
  margin-top: 3px;
}

.dash-bk-hero-chips { display: flex; gap: 5px; flex-shrink: 0; }
.dash-bk-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid var(--riga-forte);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--corpo);
  white-space: nowrap;
  text-decoration: none;
}
.dash-bk-chip svg { width: 10px; height: 10px; }
.dash-bk-chip--drive {
  color: var(--oro-testo);
  border-color: color-mix(in srgb, var(--oro) 40%, var(--riga-forte));
}
.dash-bk-chip--drive:hover { background: color-mix(in srgb, var(--oro) 8%, var(--carta)); }

/* Storico */
.dash-bk-history {
  border-top: 1px solid var(--riga);
  padding: 10px var(--spazio-s);
}
.dash-bk-history-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tenue);
  font-weight: 700;
  margin-bottom: 8px;
}
.dash-bk-hrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--corpo);
  padding: 3px 0;
}
.dash-bk-hdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-bk-hdot.ok  { background: var(--salvia-testo); }
.dash-bk-hdot.err { background: var(--errore); }
.dash-bk-hwhen { flex: 1; color: var(--tenue); }
.dash-bk-hfiles { font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--tenue); }

/* Empty state */
.dash-bk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px var(--spazio-m);
  color: var(--tenue);
  font-size: 0.82rem;
}
.dash-bk-empty svg { width: 28px; height: 28px; opacity: .45; }

/* Barra progresso */
.dash-bk-progress {
  border-top: 1px solid var(--riga);
  padding: 10px var(--spazio-s) 8px;
}
.dash-bk-progress-track {
  position: relative;
  height: 3px;
  background: var(--riga);
  border-radius: 99px;
  overflow: hidden;
}
.dash-bk-progress-bar {
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: var(--salvia-testo);
  border-radius: 99px;
  animation: dash-bk-indeterminate 1.7s ease-in-out infinite;
}
@keyframes dash-bk-indeterminate {
  0%   { left: -40%; }
  100% { left: 110%; }
}
.dash-bk-step {
  font-size: 0.72rem;
  color: var(--tenue);
  margin: 6px 0 0;
  text-align: center;
}

/* Footer con bottone pill */
.dash-bk-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px var(--spazio-s);
  border-top: 1px solid var(--riga);
}
.dash-bk-auto {
  font-size: 0.72rem;
  color: var(--tenue);
  line-height: 1.3;
}
.dash-bk-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--riga-forte);
  background: none;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--inchiostro);
  cursor: pointer;
  white-space: nowrap;
  min-height: 34px;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.dash-bk-sync-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.dash-bk-sync-btn:hover:not(:disabled) {
  border-color: var(--oro);
  background: color-mix(in srgb, var(--oro) 6%, var(--carta));
  color: var(--oro-testo);
}
.dash-bk-sync-btn:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
[data-tema="sera"] .dash-bk-sync-btn {
  color: var(--inchiostro);
  border-color: rgba(255,255,255,.15);
}
[data-tema="sera"] .dash-bk-sync-btn:hover:not(:disabled) {
  border-color: var(--oro);
  background: rgba(180,150,90,.1);
}

/* ---- Card check-in home ---- */

#home-checkin-card { width: 100%; transition: opacity 0.5s ease; }
#home-checkin-card.checkin-fuori { opacity: 0; pointer-events: none; }
.home-checkin-chiudi {
  margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--tenue);
}
.home-checkin-chiudi:hover { background: var(--carta-2); }

.home-checkin-conferma,
.home-checkin-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
}
.home-checkin-cta {
  cursor: pointer;
  transition: box-shadow .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.home-checkin-cta:active {
  transform: scale(.975);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.home-checkin-conferma {
  border-color: color-mix(in srgb, var(--salvia) 40%, var(--riga));
  background: color-mix(in srgb, var(--salvia) 5%, var(--carta));
}

.home-checkin-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--oro) 12%, var(--carta));
  color: var(--oro-testo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-checkin-conferma .home-checkin-ico {
  background: color-mix(in srgb, var(--salvia) 15%, var(--carta));
  color: var(--salvia-testo);
}
.home-checkin-testi { flex: 1; min-width: 0; }
.home-checkin-label {
  font-weight: 700;
  font-size: .95rem;
  color: var(--inchiostro);
  margin-bottom: 2px;
}
.home-checkin-sub {
  font-size: .8rem;
  color: var(--tenue);
}
.home-checkin-chevron {
  color: var(--tenue);
  flex-shrink: 0;
}

[data-tema="sera"] .home-checkin-conferma,
[data-tema="sera"] .home-checkin-cta {
  background: var(--carta-2);
  border-color: var(--riga-forte);
  box-shadow: none;
}
[data-tema="sera"] .home-checkin-conferma {
  border-color: color-mix(in srgb, var(--salvia) 35%, var(--riga-forte));
  background: color-mix(in srgb, var(--salvia) 8%, var(--carta-2));
}
[data-tema="sera"] .home-checkin-ico {
  background: color-mix(in srgb, var(--oro) 14%, var(--carta-2));
}
[data-tema="sera"] .home-checkin-conferma .home-checkin-ico {
  background: color-mix(in srgb, var(--salvia) 14%, var(--carta-2));
}

/* Card check-in responsive */
@media (min-width: 640px) {
  .home-checkin-ico { width: 48px; height: 48px; border-radius: 14px; }
  .home-checkin-label { font-size: 1rem; }
}

/* ---- Genere picker (passo 4 accesso) ---- */
.genere-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: var(--spazio-m) 0;
}
.genere-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--carta-2);
  border: 1.5px solid var(--riga-forte);
  border-radius: 12px;
  font-family: var(--font-testo);
  font-size: .95rem;
  font-weight: 500;
  color: var(--inchiostro);
  cursor: pointer;
  min-height: 52px;
  text-align: left;
  transition: border-color .12s, background .12s;
}
.genere-pill::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--riga-forte);
  flex-shrink: 0;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.genere-pill:hover { border-color: var(--oro); }
.genere-pill.attiva {
  border-color: var(--oro);
  font-weight: 600;
}
.genere-pill.attiva::before {
  background: var(--oro);
  border-color: var(--oro);
  box-shadow: inset 0 0 0 3px var(--carta-2);
}
#btn-salva-genere { width: 100%; }
#btn-salva-genere:disabled { opacity: .35; cursor: not-allowed; }
#btn-salta-genere { width: 100%; margin-top: var(--spazio-xs); display: block; text-align: center; }
[data-tema="sera"] .genere-pill {
  background: rgba(255,255,255,.04);
}
[data-tema="sera"] .genere-pill.attiva {
  background: color-mix(in srgb, var(--oro) 10%, var(--carta-2));
}
[data-tema="sera"] .genere-pill.attiva::before {
  box-shadow: inset 0 0 0 3px var(--carta-2);
}

/* A3 — Contorno visibile per la navigazione da tastiera (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-tab:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================
   SISTEMA NOTIFICHE — campanella, banner in-app, overlay
   ========================================================== */

/* --- Pulsante campanella nell'header --- */
.notif-btn-campana {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
  flex-shrink: 0;
}
.notif-btn-campana:hover,
.notif-btn-campana:focus-visible {
  background: color-mix(in srgb, var(--oro) 10%, var(--carta-2));
  color: var(--inchiostro);
  outline: none;
}
.notif-btn-campana:active { opacity: 0.7; }

/* Badge contatore non lette sulla campanella */
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  background: #e03e3e;
  color: #fff;
  border: 2px solid var(--carta);
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
}
[data-tema="sera"] .notif-badge {
  border-color: #141F19;
  background: #cf7070;
}

/* --- Banner notifica in-app (top, frosted glass) --- */
@keyframes notif-banner-entra {
  from { opacity: 0; transform: translateY(-14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
@keyframes notif-banner-esci {
  from { opacity: 1; transform: translateY(0)     scale(1);    }
  to   { opacity: 0; transform: translateY(-10px) scale(0.97); }
}

.banner-notifica {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 62px);
  left: var(--spazio-m);
  right: var(--spazio-m);
  z-index: 155;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 4px 24px rgba(0,0,0,.16), 0 1px 4px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.6);
  overflow: hidden;
  cursor: pointer;
}
.banner-notifica.notif-banner-entrata {
  animation: notif-banner-entra 0.40s cubic-bezier(0.34,1.36,0.64,1) forwards;
}
.banner-notifica.notif-banner-uscita {
  animation: notif-banner-esci 0.22s ease-in forwards;
}

[data-tema="sera"] .banner-notifica {
  background: rgba(30, 55, 38, 0.92);
  box-shadow: 0 4px 24px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.08);
}

.notif-banner-inner {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px 11px 12px;
  user-select: none;
  -webkit-user-select: none;
}

/* Avatar mittente */
.notif-banner-avt {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.notif-banner-iniz {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
}
.notif-banner-avt-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Testo */
.notif-banner-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.notif-banner-msg {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--inchiostro);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-banner-ora {
  font-size: 0.72rem;
  color: var(--tenue);
}

/* Destra: thumb foto o icona tipo + chevron */
.notif-banner-destra {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.notif-banner-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.notif-banner-icona,
.notif-banner-icona-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--oro) 12%, var(--carta-2));
  color: var(--oro-testo);
  flex-shrink: 0;
}
[data-tema="sera"] .notif-banner-icona,
[data-tema="sera"] .notif-banner-icona-fb {
  background: rgba(180,150,90,.18);
  color: var(--oro);
}
/* Colori per tipo — Big Tech style */
.notif-banner-icona[data-tipo="reazione_foto"],
.notif-banner-icona-fb[data-tipo="reazione_foto"] {
  background: color-mix(in srgb, #E8394D 10%, var(--carta-2));
  color: #E8394D;
}
.notif-banner-icona[data-tipo="dm"],
.notif-banner-icona-fb[data-tipo="dm"] {
  background: color-mix(in srgb, var(--azzurro) 12%, var(--carta-2));
  color: var(--azzurro);
}
.notif-banner-icona[data-tipo="voto_canzone"],
.notif-banner-icona-fb[data-tipo="voto_canzone"] {
  background: color-mix(in srgb, var(--salvia) 16%, var(--carta-2));
  color: var(--salvia-testo);
}
[data-tema="sera"] .notif-banner-icona[data-tipo="reazione_foto"],
[data-tema="sera"] .notif-banner-icona-fb[data-tipo="reazione_foto"] {
  background: rgba(232,57,77,.16);
  color: #ff6b7a;
}
[data-tema="sera"] .notif-banner-icona[data-tipo="dm"],
[data-tema="sera"] .notif-banner-icona-fb[data-tipo="dm"] {
  background: rgba(74,127,166,.18);
  color: var(--azzurro);
}
[data-tema="sera"] .notif-banner-icona[data-tipo="voto_canzone"],
[data-tema="sera"] .notif-banner-icona-fb[data-tipo="voto_canzone"] {
  background: rgba(107,142,107,.18);
  color: #8ab58a;
}
.notif-banner-chev {
  color: var(--tenue);
  opacity: 0.7;
}

/* --- Overlay storico notifiche (bottom sheet) --- */
.notifiche-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.notifiche-overlay[hidden] { display: none; }

.notifiche-sfondo {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.52);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.notifiche-aperto .notifiche-sfondo { opacity: 1; }

.notifiche-card {
  position: relative;
  z-index: 1;
  background: var(--carta);
  border-radius: 24px 24px 0 0;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform 0.36s cubic-bezier(0.34,1.20,0.64,1);
}
.notifiche-aperto .notifiche-card { transform: translateY(0); }

.notifiche-handle {
  width: 36px;
  height: 4px;
  background: var(--riga-forte);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.notifiche-toolbar {
  display: flex;
  align-items: center;
  padding: 14px var(--spazio-m) 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--riga);
}
.notifiche-titolo {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--inchiostro);
}
.notifiche-chiudi-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--carta-2);
  color: var(--tenue);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.notifiche-chiudi-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
}
.notifiche-chiudi-btn:hover { background: color-mix(in srgb, var(--oro) 10%, var(--carta-2)); color: var(--inchiostro); }

/* Lista notifiche scrollabile */
.notifiche-lista {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Label data gruppo */
.notif-gruppo-label {
  padding: 10px var(--spazio-m) 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tenue);
}

/* Riga singola notifica */
.notif-riga {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px var(--spazio-m);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--riga);
  position: relative;
  transition: background 0.14s;
  min-height: 60px;
}
.notif-riga:last-child { border-bottom: none; }
.notif-riga:hover,
.notif-riga:focus-visible { background: color-mix(in srgb, var(--oro) 6%, var(--carta)); outline: none; }
.notif-riga--nuova { background: color-mix(in srgb, var(--oro) 5%, var(--carta)); }
.notif-riga--nuova:hover { background: color-mix(in srgb, var(--oro) 10%, var(--carta)); }

/* Avatar riga */
.notif-riga-avt {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}

/* Testo riga */
.notif-riga-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.notif-riga-testo {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--inchiostro);
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-riga--nuova .notif-riga-testo { font-weight: 600; }
.notif-riga-ora {
  font-size: 0.72rem;
  color: var(--tenue);
}

/* Icona tipo a destra */
.notif-riga-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--oro) 10%, var(--carta-2));
  color: var(--oro-testo);
  flex-shrink: 0;
}
[data-tema="sera"] .notif-riga-icona {
  background: rgba(180,150,90,.16);
  color: var(--oro);
}
.notif-riga-icona[data-tipo="reazione_foto"] {
  background: color-mix(in srgb, #E8394D 10%, var(--carta-2));
  color: #E8394D;
}
.notif-riga-icona[data-tipo="dm"] {
  background: color-mix(in srgb, var(--azzurro) 12%, var(--carta-2));
  color: var(--azzurro);
}
.notif-riga-icona[data-tipo="voto_canzone"] {
  background: color-mix(in srgb, var(--salvia) 16%, var(--carta-2));
  color: var(--salvia-testo);
}
[data-tema="sera"] .notif-riga-icona[data-tipo="reazione_foto"] {
  background: rgba(232,57,77,.16);
  color: #ff6b7a;
}
[data-tema="sera"] .notif-riga-icona[data-tipo="dm"] {
  background: rgba(74,127,166,.18);
  color: var(--azzurro);
}
[data-tema="sera"] .notif-riga-icona[data-tipo="voto_canzone"] {
  background: rgba(107,142,107,.18);
  color: #8ab58a;
}

/* Pallino "non letta" */
.notif-dot {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oro);
  flex-shrink: 0;
}

/* Stato vuoto */
.notif-vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-s);
  padding: var(--spazio-l) var(--spazio-m);
  text-align: center;
  min-height: 240px;
}
.notif-vuoto-icona {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--oro) 10%, var(--carta-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tenue);
}
.notif-vuoto-testo {
  font-size: 1rem;
  font-weight: 600;
  color: var(--inchiostro);
}
.notif-vuoto-sub {
  font-size: 0.82rem;
  color: var(--tenue);
  max-width: 220px;
}

/* Dark mode generali */
[data-tema="sera"] .notif-riga--nuova {
  background: rgba(180,150,90,.07);
}
[data-tema="sera"] .notif-riga--nuova:hover {
  background: rgba(180,150,90,.13);
}
[data-tema="sera"] .notif-vuoto-icona {
  background: rgba(180,150,90,.12);
}

/* Nascondi barra-tab quando overlay notifiche è aperto */
body:has(#notifiche-overlay:not([hidden])) .barra-tab { display: none !important; }

/* ============================================================
   DIAPOSITIVE — pannello scelta stile proiezione
   ============================================================ */
#proiezione-modo {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#proiezione-modo[hidden] { display: none; }

.pmodo-sfondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pmodo-handle {
  width: 36px;
  height: 4px;
  background: var(--riga-forte);
  border-radius: 100px;
  margin: 0 auto 14px;
}

.pmodo-card {
  position: relative;
  z-index: 1;
  background: var(--carta);
  border-radius: 28px 28px 0 0;
  padding: 10px 20px calc(32px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  animation: social-card-entra .42s cubic-bezier(.34,1.36,.64,1) both;
}

.pmodo-titolo {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
  text-align: center;
  margin: 0 0 14px;
}

.pmodo-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.pmodo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  border-radius: 14px;
  padding: 0;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
  min-height: 44px;
}
.pmodo-btn:hover { background: none; }
.pmodo-btn:active { transform: scale(.91); }

.pmodo-anteprima {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.10);
}
.pmodo-anteprima svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pmodo-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--inchiostro);
  letter-spacing: 0.02em;
  text-align: center;
}

.pmodo-annulla {
  display: block;
  margin: 0 auto;
  font-size: .8rem;
}

/* Dark mode */
[data-tema="sera"] .pmodo-card {
  background: var(--carta-2);
}

/* ---- Filtri CSS proiezione — interpolati via --pmodo-int (0–1) ---- */
#proiezione-overlay[data-modo="kodachrome"] #proiezione-foto img {
  filter: sepia(calc(0.28 * var(--pmodo-int, 1)))
          saturate(calc(1 + 0.65 * var(--pmodo-int, 1)))
          contrast(calc(1 + 0.08 * var(--pmodo-int, 1)))
          brightness(calc(1 + 0.06 * var(--pmodo-int, 1)));
}
#proiezione-overlay[data-modo="cinema"] #proiezione-foto img {
  filter: saturate(calc(1 - 0.45 * var(--pmodo-int, 1)))
          contrast(calc(1 + 0.28 * var(--pmodo-int, 1)))
          brightness(calc(1 - 0.1 * var(--pmodo-int, 1)))
          hue-rotate(calc(5deg * var(--pmodo-int, 1)));
}

/* ---- Slider intensità filtro ---- */
#pmodo-intensita-wrap {
  position: absolute;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, .52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 100px;
  padding: 10px 18px;
  z-index: 3;
  transition: opacity .4s;
  white-space: nowrap;
}
#pmodo-intensita-wrap[hidden] { display: none; }

/* Si nasconde automaticamente con i controlli (nessun JS aggiuntivo) */
#proiezione-overlay:has(.proiezione-controlli.nascoste) #pmodo-intensita-wrap:not([hidden]) {
  opacity: 0;
  pointer-events: none;
}

#pmodo-intensita-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 3px;
  background: rgba(255, 255, 255, .25);
  border-radius: 100px;
  outline: none;
  cursor: pointer;
}
#pmodo-intensita-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
  cursor: pointer;
}
#pmodo-intensita-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
  cursor: pointer;
}

#pmodo-intensita-val {
  font-size: .7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
  min-width: 2.4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}