@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/*
 * YOU REMEMBER - il foglio di stile
 *
 * IL LINGUAGGIO VISIVO
 *
 * Blu notte per il testo e le cornici, azzurro per tutto cio' che si tocca,
 * corallo per i preferiti e i richiami. I grigi sono azzurrati, non neutri:
 * su uno schermo di fotografie un grigio neutro sembra sporco.
 *
 * I NOMI DELLE VARIABILI SONO RIMASTI QUELLI DI PRIMA.
 *
 * «--prugna» adesso contiene l'azzurro, «--miele» il corallo. Rinominarle
 * avrebbe voluto dire toccare ottantacinque file per un guadagno solo
 * estetico, e ogni file toccato e' un file che si puo' rompere. I nomi
 * raccontano la storia del prodotto; i valori raccontano com'e' adesso.
 */

:root{
  /* ---- azzurro: azioni, collegamenti, tutto cio' che si tocca ---- */
  --notte:#0D1B2A;
  --notte-morbido:#4A5C6E;
  --prugna:#1E88FF;
  --prugna-chiara:#6BB0FF;
  --prugna-tenue:#E6F1FF;
  --indaco-scuro:#0B3B66;
  --indaco-fondo:#0A2540;

  /* ---- corallo: i preferiti, i richiami, il fuoco dell'occhio ---- */
  --miele:#FF6B4A;
  --miele-forte:#F2542D;
  --miele-tenue:#FFE9E3;
  --miele-scuro:#7A2A16;

  /* ---- verdeazzurro: spazio, conferme, tutto cio' che va bene ---- */
  --menta:#0E9F8A;
  --menta-tenue:#E6F8F5;

  /* ---- rosso: gli avvisi, gli errori ---- */
  --corallo:#E02B20;
  --corallo-tenue:#FDEEEC;

  /* ---- superfici: azzurrate, mai grigie ---- */
  --carta:#F5F8FC;
  --carta-scura:#DDE8F3;
  --bianco:#FFFFFF;

  /* ---- ombre a due strati: una vicina che stacca, una lontana che pesa ---- */
  --ombra:0 1px 2px rgba(13,27,42,.04), 0 4px 16px -3px rgba(13,27,42,.08);
  --ombra-alta:0 2px 5px rgba(13,27,42,.05), 0 18px 38px -8px rgba(13,27,42,.14);
  --ombra-morbida:0 1px 3px rgba(13,27,42,.04);

  /* ---- vetro: le barre fisse, i pannelli sospesi ---- */
  --vetro:rgba(255,255,255,.75);
  --vetro-sfoca:blur(20px) saturate(180%);
  --vetro-bordo:rgba(255,255,255,.88);

  --raggio:18px;
  --raggio-p:14px;
  --raggio-s:10px;
}

::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(107,124,141,.28);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(107,124,141,.45)}

/* la barra di scorrimento sottile, come nel kit: si vede solo quando serve */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(30,136,255,.22);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(30,136,255,.38)}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--notte);
  background:var(--carta);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
/* Inter anche per i titoli: un carattere solo, tutto il peso lo fanno il grasso
   e la spaziatura. La serif di prima raccontava «archivio»; il marchio adesso
   racconta «fotocamera», e una grottesca gli sta dietro senza fare rumore. */
h1,h2,h3,h4{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;line-height:1.18;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:2.2rem;font-weight:600}
h2{font-size:1.6rem}
h3{font-size:1.2rem}
a{color:var(--prugna);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* ---------- cielo stellato per le pagine di ingresso ---------- */
.pagina-ingresso{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,107,74,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 34%, rgba(255,107,74,.3) 0 1.5px, transparent 3px),
    radial-gradient(circle at 24% 70%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 76%, rgba(255,107,74,.28) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 88%, rgba(255,255,255,.5) 0 1.5px, transparent 3px),
    linear-gradient(165deg,#0B3B66 0%,#155E9E 48%,#4C9CFF 100%);
  display:flex;align-items:center;justify-content:center;padding:28px 18px;
}
.ingresso-wrap{width:100%;max-width:460px}
.carta-magica{
  background:var(--bianco);
  border-radius:28px;
  padding:34px 30px 30px;
  box-shadow:var(--ombra-alta);
  border:3px solid var(--miele);
}
.marchio{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:900;color:var(--prugna);letter-spacing:-.02em}
.marchio--grande{font-size:2.3rem;text-align:center;margin-bottom:2px}
.marchio-baule{color:var(--miele)}
.sottotitolo{text-align:center;color:var(--notte-morbido);margin:0 0 22px;font-size:.98rem}

/* ---------- moduli ---------- */
.modulo{display:flex;flex-direction:column;gap:14px}
.modulo label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.9rem;color:var(--notte-morbido)}
input[type=text],input[type=email],input[type=password],input[type=date],textarea,select{
  font-family:inherit;font-size:1rem;color:var(--notte);
  background:var(--carta);
  border:2px solid var(--carta-scura);
  border-radius:var(--raggio-p);
  padding:12px 14px;
  width:100%;
  transition:border-color .15s,background .15s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--prugna-chiara);background:var(--bianco)}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--miele);outline-offset:2px}
textarea{min-height:90px;resize:vertical}

.bottone{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:1rem;
  border:none;border-radius:999px;padding:13px 26px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;transition:transform .12s,box-shadow .12s,background .15s;
}
.bottone:hover{text-decoration:none;transform:translateY(-2px)}
.bottone:active{transform:translateY(1px)}
.bottone--pieno{background:var(--prugna);color:#fff;box-shadow:0 5px 0 #0F55A8}
.bottone--pieno:hover{background:#1E88FF}
.bottone--sole{background:var(--miele);color:#7A2A16;box-shadow:0 5px 0 #F2542D}
.bottone--corallo{background:var(--corallo);color:#5E2112;box-shadow:0 5px 0 #E02B20}
.bottone--tenue{background:var(--prugna-tenue);color:var(--prugna);box-shadow:0 4px 0 #D3E6F9}
.bottone--fantasma{background:transparent;color:var(--prugna);border:2px solid var(--carta-scura)}
.bottone--largo{width:100%}
.bottone--mini{padding:8px 16px;font-size:.85rem}

.avviso{border-radius:var(--raggio-p);padding:13px 16px;margin-bottom:16px;font-size:.95rem;font-weight:600}
.avviso--ok{background:var(--menta-tenue);color:#0A5B50;border-left:5px solid var(--menta);border-radius:0 var(--raggio-p) var(--raggio-p) 0}
.avviso--errore{background:var(--corallo-tenue);color:#8C1C12;border-left:5px solid var(--corallo);border-radius:0 var(--raggio-p) var(--raggio-p) 0}
.avviso--info{background:var(--miele-tenue);color:#8A3A20;border-left:5px solid var(--miele);border-radius:0 var(--raggio-p) var(--raggio-p) 0}
.lista-passi{margin:8px 0 0;padding-left:20px;font-weight:400}
.nota-forte{background:var(--corallo-tenue);color:#8C1C12;padding:12px 14px;border-radius:var(--raggio-p);font-weight:700;font-size:.9rem}
code{background:var(--prugna-tenue);padding:2px 7px;border-radius:6px;font-size:.9em}

/* ---------- struttura app ---------- */
.barra-alta{
  /* traslucida: il contenuto le scorre sotto e si intravede. Il ripiego per i
     browser senza backdrop-filter e' il bianco pieno di prima, quindi non si
     rompe niente. */
  background:var(--bianco);
  border-bottom:2px solid var(--carta-scura);
  position:sticky;top:0;z-index:40;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .barra-alta{
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    border-bottom:1px solid rgba(221,232,243,.85);
    box-shadow:0 1px 12px rgba(13,27,42,.04);
  }
}
.barra-interna{
  max-width:1180px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:18px;
}
.barra-interna .marchio{font-size:1.5rem;flex-shrink:0}
.menu{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.menu a{
  padding:9px 15px;border-radius:999px;font-weight:700;font-size:.94rem;
  color:var(--notte-morbido);
}
.menu a:hover{background:var(--prugna-tenue);color:var(--prugna);text-decoration:none}
.menu a.attivo{background:var(--prugna);color:#fff}
.pillola-utente{
  display:flex;align-items:center;gap:9px;background:var(--carta);
  padding:6px 14px 6px 6px;border-radius:999px;font-weight:700;font-size:.9rem;
}
.gettone{
  width:34px;height:34px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;flex-shrink:0;
}
.contenuto{max-width:1180px;margin:0 auto;padding:30px 20px 70px}
.intestazione-pagina{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.intestazione-pagina p{margin:0;color:var(--notte-morbido)}

/* ---------- il baule illustrato (elemento firma) ---------- */
.scena-baule{
  background:linear-gradient(160deg,#0B3B66,#1E88FF 70%,#4C9CFF);
  border-radius:var(--raggio);
  padding:30px;color:#fff;
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  box-shadow:var(--ombra-alta);position:relative;overflow:hidden;
}
.scena-baule::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.55) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 18%, rgba(255,107,74,.6) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 78%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 90% 60%, rgba(255,107,74,.45) 0 1.5px, transparent 2.5px);
}
.scena-baule h2{color:#fff;margin-bottom:6px}
.scena-testo{flex:1;min-width:230px;position:relative;z-index:1}
.scena-testo p{color:#DCEAFB;margin:0 0 16px}
.baule-svg{width:190px;flex-shrink:0;position:relative;z-index:1}
.baule-coperchio{transform-origin:50% 92%;animation:apri 3.4s ease-in-out infinite}
.stella-fluttuante{animation:sali 3.4s ease-in-out infinite}
.stella-fluttuante:nth-of-type(2){animation-delay:.5s}
.stella-fluttuante:nth-of-type(3){animation-delay:1s}
@keyframes apri{0%,60%,100%{transform:rotate(0)}25%,45%{transform:rotate(-17deg)}}
@keyframes sali{0%,55%{opacity:0;transform:translateY(6px)}70%{opacity:1;transform:translateY(-12px)}100%{opacity:0;transform:translateY(-26px)}}
@media (prefers-reduced-motion:reduce){
  .baule-coperchio,.stella-fluttuante{animation:none}
  .stella-fluttuante{opacity:1}
}

/* ---------- schede statistiche ---------- */
.fila-numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:26px 0}
.numero-scheda{
  background:var(--bianco);border-radius:var(--raggio);padding:20px;
  box-shadow:var(--ombra);border-bottom:5px solid var(--prugna-tenue);
}
.numero-scheda .cifra{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:2.3rem;font-weight:900;line-height:1;color:var(--prugna)}
.numero-scheda .didascalia{font-size:.85rem;font-weight:700;color:var(--notte-morbido);text-transform:lowercase}
.numero-scheda.tinta-miele{border-bottom-color:var(--miele)}
.numero-scheda.tinta-miele .cifra{color:#C24427}
.numero-scheda.tinta-corallo{border-bottom-color:var(--corallo)}
.numero-scheda.tinta-corallo .cifra{color:#E02B20}
.numero-scheda.tinta-menta{border-bottom-color:var(--menta)}
.numero-scheda.tinta-menta .cifra{color:#0B7F6E}

/* ---------- capitoli e griglia foto ---------- */
.capitolo{margin:38px 0 16px;display:flex;align-items:center;gap:14px}
.capitolo h2{margin:0;font-size:1.5rem}
.capitolo .filo{flex:1;height:3px;background:var(--carta-scura);border-radius:2px}
.capitolo .conteggio{
  background:var(--miele-tenue);color:#8A3A20;font-weight:800;font-size:.8rem;
  padding:4px 12px;border-radius:999px;
}
.griglia-foto{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.foto-cella{
  position:relative;border-radius:18px;overflow:hidden;background:var(--carta-scura);
  aspect-ratio:1/1;cursor:pointer;box-shadow:var(--ombra);
  border:3px solid var(--bianco);transition:transform .15s,box-shadow .15s,opacity .2s;
}
.foto-cella:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:var(--ombra-alta)}
.foto-cella img{width:100%;height:100%;object-fit:cover}
.foto-cella .cuore{
  position:absolute;top:9px;right:9px;font-size:1.1rem;
  background:rgba(255,255,255,.92);width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  box-shadow:0 2px 6px rgba(13,27,42,.2);
}
.foto-cella .etichetta-simile{
  position:absolute;bottom:8px;left:8px;
  background:var(--miele);color:#7A2A16;font-size:.7rem;font-weight:800;
  padding:3px 9px;border-radius:999px;
}
.foto-cella .chi{
  position:absolute;bottom:8px;right:8px;width:26px;height:26px;border-radius:50%;
  color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}

/* ---------- vuoto ---------- */
.vuoto{
  background:var(--bianco);border-radius:var(--raggio);padding:48px 30px;text-align:center;
  border:3px dashed var(--prugna-tenue);
}
.vuoto .disegno{font-size:3.2rem;line-height:1;margin-bottom:10px;color:var(--miele)}
.vuoto h3{margin-bottom:6px}
.vuoto p{color:var(--notte-morbido);max-width:420px;margin:0 auto 20px}

/* ---------- upload ---------- */
.zona-drop{
  background:var(--bianco);border:4px dashed var(--prugna-chiara);border-radius:28px;
  padding:52px 26px;text-align:center;cursor:pointer;transition:background .15s,border-color .15s;
}
.zona-drop:hover,.zona-drop.sopra{background:var(--prugna-tenue);border-color:var(--prugna)}
.zona-drop .disegno{font-size:3.4rem;color:var(--miele);line-height:1}
.zona-drop h3{margin:10px 0 4px}
.zona-drop p{color:var(--notte-morbido);margin:0}
.coda{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.riga-coda{
  background:var(--bianco);border-radius:var(--raggio-p);padding:12px 16px;
  display:flex;align-items:center;gap:14px;box-shadow:var(--ombra);font-size:.92rem;
}
.riga-coda .nome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.riga-coda .esito{font-weight:800;font-size:.85rem;flex-shrink:0}
.esito.ok{color:#0B7F6E}
.esito.doppia{color:#C24427}
.esito.ko{color:#E02B20}
.barretta{height:8px;background:var(--carta-scura);border-radius:99px;overflow:hidden;width:90px;flex-shrink:0}
.barretta span{display:block;height:100%;background:var(--prugna);width:0;transition:width .25s}

/* ---------- lightbox ---------- */
.lente{
  position:fixed;inset:0;background:rgba(13,27,42,.92);z-index:100;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.lente.aperta{display:flex}
.lente img{max-width:92vw;max-height:78vh;border-radius:16px;border:4px solid #fff}
.lente-chiudi{
  position:absolute;top:18px;right:22px;background:#fff;border:none;border-radius:50%;
  width:46px;height:46px;font-size:1.4rem;cursor:pointer;color:var(--notte);font-weight:700;
}
.lente-info{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#DCEAFB;font-weight:600}
.lente-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);
  border:none;width:52px;height:52px;border-radius:50%;font-size:1.5rem;cursor:pointer;color:var(--notte);
}
.lente-nav.prec{left:18px}
.lente-nav.succ{right:18px}

/* ---------- pannello / tabelle ---------- */
.pannello{background:var(--bianco);border-radius:var(--raggio);padding:26px;box-shadow:var(--ombra);margin-bottom:22px}
.tabella{width:100%;border-collapse:collapse;font-size:.94rem}
.tabella th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--notte-morbido);padding:0 12px 10px}
.tabella td{padding:12px;border-top:2px solid var(--carta)}
.targhetta{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.76rem;font-weight:800}
.targhetta--admin{background:var(--prugna-tenue);color:var(--prugna)}
.targhetta--membro{background:var(--menta-tenue);color:#0B7F6E}
.targhetta--ospite{background:var(--carta-scura);color:var(--notte-morbido)}
.codice-grande{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:2.6rem;font-weight:900;letter-spacing:.12em;
  color:var(--prugna);background:var(--miele-tenue);border-radius:var(--raggio-p);
  padding:14px 20px;display:inline-block;border:3px dashed var(--miele);
}

@media (max-width:720px){
  h1{font-size:1.9rem}
  .barra-interna{padding:10px 14px;gap:10px}
  .menu{order:3;flex:1 1 100%;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .menu a{white-space:nowrap}
  .pillola-utente span.nome-lungo{display:none}
  .contenuto{padding:20px 14px 60px}
  .scena-baule{padding:22px;gap:18px}
  .baule-svg{width:130px;margin:0 auto}
  .griglia-foto{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
}

/* azione secondaria sulla cella (cestino / recupera) */
.foto-cella .azione-sinistra{right:auto;left:9px}

/* ---------- controlli di installazione ---------- */
.pannello-controlli{background:var(--carta);border-radius:var(--raggio-p);padding:16px 18px;margin-bottom:20px}
.lista-controlli{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lista-controlli li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;font-weight:600;line-height:1.35}
.lista-controlli small{display:block;font-weight:400;color:var(--notte-morbido);font-size:.82rem}
.lista-controlli .segno{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#fff;
}
.lista-controlli li.ok .segno{background:var(--menta)}
.lista-controlli li.ko .segno{background:var(--corallo)}
.lista-controlli li.forse .segno{background:var(--miele);color:#7A2A16}
.lista-controlli li.ko{color:#8C1C12}

/* ---------- selettore lingua ---------- */
.scelta-lingua{display:flex;gap:4px;flex-shrink:0}
.scelta-lingua a{
  padding:6px 11px;border-radius:999px;font-weight:800;font-size:.78rem;
  color:var(--notte-morbido);background:var(--carta);letter-spacing:.04em;
}
.scelta-lingua a:hover{background:var(--prugna-tenue);color:var(--prugna);text-decoration:none}
.scelta-lingua a.attiva{background:var(--prugna);color:#fff}
.scelta-lingua--fuori{justify-content:center;margin-bottom:16px}
.scelta-lingua--fuori a{
  background:rgba(255,255,255,.16);color:#E1EFFC;font-size:.82rem;padding:7px 16px;
}
.scelta-lingua--fuori a:hover{background:rgba(255,255,255,.28);color:#fff}
.scelta-lingua--fuori a.attiva{background:var(--miele);color:#7A2A16}
@media (max-width:720px){
  .scelta-lingua a{padding:5px 9px;font-size:.72rem}
}

/* ---------- libri ---------- */
.griglia-libri{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.libro-scheda{
  background:var(--bianco);border-radius:var(--raggio);overflow:hidden;
  box-shadow:var(--ombra);display:flex;min-height:150px;
}
.libro-dorso{width:16px;background:var(--prugna);flex-shrink:0;border-right:3px solid var(--miele)}
.libro-corpo{padding:18px 20px;flex:1}
.libro-corpo h3{margin-bottom:4px;font-size:1.15rem}
.libro-meta{margin:0;font-size:.86rem;color:var(--notte-morbido);font-weight:600}

/* selezione foto nel libro */
.griglia-libro .foto-cella{cursor:default}
.griglia-libro .foto-cella.esclusa img{opacity:.22;filter:grayscale(1)}
.griglia-libro .foto-cella.esclusa{border-color:var(--carta-scura);box-shadow:none}
.etichetta-dida{
  position:absolute;left:0;right:0;bottom:0;padding:16px 10px 7px;
  background:linear-gradient(transparent,rgba(13,27,42,.88));
  color:#fff;font-size:.72rem;font-weight:600;line-height:1.25;
}
.foto-cella .cuore{text-decoration:none;color:var(--notte)}

/* ---------- scheda della singola foto ---------- */
.scheda-foto{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;align-items:start}
.scheda-foto__immagine{background:var(--bianco);border-radius:var(--raggio);padding:14px;box-shadow:var(--ombra)}
.scheda-foto__immagine img{width:100%;border-radius:14px}
.scheda-foto__azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.scheda-foto__lato .pannello{margin-bottom:18px}
.scheda-dati{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.92rem}
.scheda-dati dt{font-weight:800;color:var(--notte-morbido);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.scheda-dati dd{margin:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gettone--mini{width:24px;height:24px;font-size:.72rem}

@media (max-width:820px){
  .scheda-foto{grid-template-columns:1fr}
}

/* wordmark TRUNK: tutto maiuscolo, serve respiro fra le lettere */
.marchio{letter-spacing:.02em}
.marchio--grande{letter-spacing:.04em}

/* ---------- storie ---------- */
.fila-proposte{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.proposta{
  background:var(--bianco);border-radius:var(--raggio-p);padding:14px 16px;
  box-shadow:var(--ombra);display:flex;flex-direction:column;gap:4px;min-width:190px;
  border-left:5px solid var(--miele);
}
.proposta strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.02rem}
.proposta span{font-size:.82rem;color:var(--notte-morbido);font-weight:600}
.proposta .bottone{margin-top:8px;align-self:flex-start}

.griglia-storie{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.storia-scheda{
  display:flex;gap:14px;background:var(--bianco);border-radius:var(--raggio);
  box-shadow:var(--ombra);overflow:hidden;color:inherit;text-decoration:none;
  transition:transform .15s,box-shadow .15s;
}
.storia-scheda:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta);text-decoration:none}
.storia-cover{width:96px;flex-shrink:0;background:var(--carta-scura)}
.storia-cover img{width:100%;height:100%;object-fit:cover}
.storia-testo{padding:16px 16px 16px 0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.storia-testo strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.1rem;line-height:1.2}

.storia{max-width:760px;margin:0 auto}
.storia-apertura{
  border-radius:var(--raggio);padding:60px 34px 30px;margin-bottom:30px;
  background-color:var(--prugna);background-size:cover;background-position:center;
  color:#fff;text-align:center;box-shadow:var(--ombra-alta);
}
.storia-apertura h1{color:#fff;margin-bottom:6px;font-size:2.5rem}
.storia-periodo{margin:0;color:#E1EFFC;font-weight:600;font-size:.92rem}
.storia-intro{font-size:1.12rem;line-height:1.75;color:var(--notte);margin:0 0 34px;text-align:center}
.storia-capitolo{margin-bottom:44px}
.storia-capitolo h2{margin-bottom:4px;color:var(--prugna)}
.storia-luogo{margin:0 0 8px;font-size:.86rem;font-weight:700;color:var(--menta);letter-spacing:.03em}
.storia-testo-cap{margin:0 0 18px;line-height:1.7;color:var(--notte-morbido)}
.storia-chiusura{
  text-align:center;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.15rem;font-style:italic;
  color:var(--prugna);padding:26px 0;border-top:3px solid var(--carta-scura);
}
@media (max-width:720px){
  .storia-apertura{padding:40px 20px 24px}
  .storia-apertura h1{font-size:1.8rem}
  .fila-proposte .proposta{min-width:100%}
}

/* ---------- condivisione dell'invito ---------- */
.fila-condivisione{
  display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:20px;
}
.pillola-social{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:999px;border:none;cursor:pointer;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:.92rem;
  color:#fff;text-decoration:none;transition:transform .12s,filter .12s;
}
.pillola-social:hover{transform:translateY(-2px);text-decoration:none;color:#fff;filter:brightness(1.07)}
.pillola-social:active{transform:translateY(1px)}
.pillola-social svg{flex-shrink:0}
.pillola-social--whatsapp{background:#25D366;box-shadow:0 4px 0 #1DA851}
.pillola-social--telegram{background:#229ED9;box-shadow:0 4px 0 #1B7FAE}
.pillola-social--posta{background:var(--notte-morbido);box-shadow:0 4px 0 #16324B}
.pillola-social--altro{background:var(--prugna);box-shadow:0 4px 0 #0F55A8}
@media (max-width:520px){
  .fila-condivisione .pillola-social{flex:1 1 calc(50% - 5px);justify-content:center}
}

/* l'attributo hidden deve vincere sulle classi che impostano display */
[hidden]{display:none !important}

/* ---------- PWA: barra inferiore fissa ---------- */
.barra-bassa{display:none}

@media (max-width:820px){
  /* La barra bassa: grigio chiaro TRASLUCIDO.
     Non bianca — sparirebbe sotto un archivio di fotografie chiare — e non
     scura, che pesa troppo in fondo alla pagina. Una velatura appena grigia
     lascia intravedere il contenuto che le scorre sotto: si capisce che c'e'
     dell'altro, e la barra resta un piano d'appoggio invece di un muro. */
  .barra-bassa{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#EDF3FA;border-top:1px solid rgba(13,27,42,.06);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around;align-items:flex-end;
    box-shadow:0 -2px 16px rgba(13,27,42,.07);
  }
  /* Il vetro qui era troppo trasparente: sotto ci scorrono le fotografie, e
     con .75 di bianco la barra prendeva il colore di quello che le passava
     sotto — grigia sopra una foto scura, gialla sopra un tramonto. Su una
     barra di navigazione, che deve stare ferma, e' un difetto: adesso e'
     quasi opaca e la sfocatura fa il resto. */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    .barra-bassa{
      /* .82 e' il punto giusto: sotto si intravede il movimento, ma le voci
         restano leggibili anche quando passa una fotografia scura */
      background:rgba(221,232,243,.82);
      -webkit-backdrop-filter:blur(24px) saturate(180%);
      backdrop-filter:blur(24px) saturate(180%);
    }
  }

  /* le voci spente grigie, quella attiva indaco su una pastiglia chiara */
  .barra-bassa a{color:#6B7C8D;border-radius:14px}
  .barra-bassa a svg{color:#6B7C8D}
  .barra-bassa a:hover{color:var(--notte)}
  .barra-bassa a.attiva{color:var(--prugna);background:rgba(255,255,255,.85)}
  .barra-bassa a.attiva svg{color:var(--prugna);stroke:var(--prugna)}
  .barra-bassa a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:7px 2px;font-size:.68rem;font-weight:800;color:var(--notte-morbido);
    text-decoration:none;border-radius:14px;line-height:1.1;
  }
  .barra-bassa a:hover{text-decoration:none}
  .barra-bassa a .segno{font-size:1.15rem;line-height:1}
  .barra-bassa a.attiva{color:var(--prugna);background:var(--prugna-tenue)}

  .barra-bassa__piu{
    flex:0 0 auto !important;background:var(--prugna);color:#fff !important;
    width:54px;height:54px;border-radius:50%;font-size:1.9rem;font-weight:400;
    align-items:center;justify-content:center;padding:0 !important;
    margin:-20px 6px 2px;box-shadow:0 5px 0 #0F55A8;
  }
  .barra-bassa__piu span{line-height:1;margin-top:-4px}

  /* spazio perché la barra non copra il fondo delle pagine */
  .contenuto{padding-bottom:104px}

  /* su schermo stretto il menu in alto diventa ridondante: resta solo l'extra */
  .barra-interna .menu a[href$="dashboard.php"],
  .barra-interna .menu a[href$="galleria.php"],
  .barra-interna .menu a[href$="storie.php"],
  .barra-interna .menu a[href$="libri.php"],
  .barra-interna .menu a[href$="upload.php"]{display:none}
}

/* ---------- invito a installare ---------- */
.invito-installa{
  position:fixed;left:12px;right:12px;z-index:70;
  bottom:calc(94px + env(safe-area-inset-bottom));
  background:var(--notte);color:#fff;border-radius:var(--raggio-p);
  padding:12px 14px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--ombra-alta);border:2px solid var(--miele);
}
.invito-installa__testo{flex:1;font-size:.88rem;font-weight:700;line-height:1.3}
.invito-installa__no{
  background:none;border:none;color:#9FC6F0;font-size:1.4rem;
  cursor:pointer;padding:0 4px;line-height:1;
}
@media (min-width:821px){
  .invito-installa{bottom:20px;left:auto;right:20px;max-width:390px}
}

/* in modalità app a schermo intero, il pannello non deve finire sotto la tacca */
@media (display-mode:standalone){
  .barra-alta{padding-top:env(safe-area-inset-top)}
}

/* ---------- mappa dei ricordi ---------- */
.mappa-guscio{
  background:var(--bianco);border-radius:var(--raggio);padding:10px;
  box-shadow:var(--ombra);border:3px solid var(--miele);
}
.mappa{height:520px;border-radius:16px;overflow:hidden;background:var(--carta-scura)}
.mappa-nota{
  font-size:.82rem;color:var(--notte-morbido);text-align:center;
  margin:12px 0 0;max-width:560px;margin-left:auto;margin-right:auto;
}
.leaflet-container{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}

.marcatore-numero{
  color:#7A2A16;font-weight:800;font-size:.78rem;text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.6);pointer-events:none;
}

.fumetto-guscio .leaflet-popup-content-wrapper{
  border-radius:18px;box-shadow:0 10px 26px rgba(13,27,42,.24);
}
.fumetto-guscio .leaflet-popup-content{margin:14px 16px}
.fumetto{display:flex;flex-direction:column;gap:3px}
.fumetto strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.02rem;color:var(--notte);line-height:1.2}
.fumetto-meta{font-size:.8rem;color:var(--notte-morbido);font-weight:600}
.fumetto-foto{display:flex;gap:4px;margin-top:7px}
.fumetto-foto img{width:46px;height:46px;object-fit:cover;border-radius:9px;border:2px solid #fff}
.fumetto-link{
  margin-top:9px;display:inline-block;background:var(--prugna);color:#fff !important;
  font-weight:800;font-size:.8rem;padding:7px 15px;border-radius:999px;text-align:center;
}
.fumetto-link:hover{text-decoration:none;background:#1E88FF}

.griglia-posti{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.posto-riga{
  display:flex;align-items:center;gap:14px;background:var(--bianco);
  border-radius:var(--raggio-p);padding:13px 16px;box-shadow:var(--ombra);
  color:inherit;text-decoration:none;transition:transform .13s;
}
.posto-riga:hover{transform:translateX(3px);text-decoration:none}
.posto-numero{
  width:30px;height:30px;border-radius:50%;background:var(--miele-tenue);color:#8A3A20;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex-shrink:0;
}
.posto-nome{flex:1;min-width:0}
.posto-nome strong{display:block;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posto-nome small{color:var(--notte-morbido);font-size:.78rem}
.posto-quante{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:900;color:var(--prugna);font-size:1.1rem}

@media (max-width:720px){
  .mappa{height:400px}
}

/* pannello che richiede attenzione: bordo corallo */
.pannello--attenzione{border-left:6px solid var(--corallo)}
a.numero-scheda:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta);text-decoration:none}
a.numero-scheda{transition:transform .13s,box-shadow .13s}

/* ---------- hamburger e cassetto ---------- */
.hamburger{
  display:none;background:none;border:none;cursor:pointer;padding:8px 6px;
  flex-direction:column;gap:4px;flex-shrink:0;border-radius:10px;
}
.hamburger span{display:block;width:22px;height:3px;background:var(--prugna);border-radius:2px}
.hamburger:hover{background:var(--prugna-tenue)}

/* Il velo dietro il cassetto: scurisce la pagina e la sfoca appena, cosi'
   l'occhio va al menu e il contenuto dietro resta riconoscibile senza
   competere. */
.velo{
  position:fixed;inset:0;background:rgba(13,27,42,.42);z-index:90;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
/* Il cassetto ha la stessa velatura della barra bassa: si intravede la pagina
   dietro, e le due superfici fisse del programma parlano la stessa lingua.
   Il ripiego per i browser senza sfocatura e' il grigio chiaro pieno. */
.cassetto{
  position:fixed;top:0;left:0;bottom:0;width:min(310px,84vw);z-index:95;
  background:#EEF4FB;box-shadow:6px 0 34px rgba(13,27,42,.2);
  display:flex;flex-direction:column;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .cassetto{
    background:rgba(238,244,251,.86);
    -webkit-backdrop-filter:blur(26px) saturate(180%);
    backdrop-filter:blur(26px) saturate(180%);
    border-right:1px solid rgba(255,255,255,.6);
  }
}
.cassetto.aperto{transform:translateX(0)}
.cassetto-testa{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cassetto-testa .marchio{font-size:1.35rem}
.cassetto-chiudi{
  background:var(--carta);border:none;border-radius:50%;width:38px;height:38px;
  font-size:1.4rem;cursor:pointer;color:var(--notte);line-height:1;
}
.cassetto-utente{
  display:flex;align-items:center;gap:11px;background:var(--carta);
  border-radius:var(--raggio-p);padding:12px 14px;margin-bottom:16px;
  color:inherit;text-decoration:none;
}
.cassetto-utente:hover{text-decoration:none;background:var(--prugna-tenue)}
.cassetto-utente strong{display:block;font-size:.96rem;line-height:1.2}
.cassetto-utente small{color:var(--notte-morbido);font-size:.8rem}
.cassetto-voci{display:flex;flex-direction:column;gap:3px;flex:1}
.cassetto-voci a{
  padding:13px 15px;border-radius:14px;font-weight:800;font-size:1rem;
  color:var(--notte-morbido);text-decoration:none;
}
.cassetto-voci a:hover{background:var(--prugna-tenue);color:var(--prugna);text-decoration:none}
.cassetto-voci a.attiva{background:var(--prugna);color:#fff}
.cassetto-piede{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:16px;margin-top:16px;border-top:3px solid var(--carta);
}

@media (max-width:820px){
  .hamburger{display:flex}
  .barra-interna .menu:not(.menu--admin){display:none}
  .barra-interna .scelta-lingua{display:none}
  .barra-interna{gap:8px}
  .barra-interna .marchio{flex:1}
}

/* ---------- viaggi ---------- */
.griglia-viaggi{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.viaggio-scheda{
  display:flex;gap:14px;background:var(--bianco);border-radius:var(--raggio);
  box-shadow:var(--ombra);overflow:hidden;color:inherit;text-decoration:none;
  border-left:6px solid var(--prugna-tenue);position:relative;
  transition:transform .14s,box-shadow .14s;
}
.viaggio-scheda:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta);text-decoration:none}
.viaggio-scheda--deciso{border-left-color:var(--menta)}
.viaggio-scheda--fatto{border-left-color:var(--miele)}
.viaggio-cover{width:82px;flex-shrink:0;background:var(--carta-scura);display:flex;align-items:center;justify-content:center}
.viaggio-cover img{width:100%;height:100%;object-fit:cover}
.viaggio-cover--vuota{font-size:1.7rem;color:var(--prugna-chiara)}
.viaggio-corpo{padding:14px 14px 14px 0;display:flex;flex-direction:column;gap:3px;justify-content:center;min-width:0}
.viaggio-corpo strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.08rem;line-height:1.2}
.viaggio-dest{font-size:.82rem;color:var(--menta);font-weight:800}
.viaggio-quando{font-size:.84rem;color:var(--notte-morbido);font-weight:600}
.viaggio-fila{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.segnale{
  font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px;
  background:var(--carta);color:var(--notte-morbido);
}
.segnale--si{background:var(--menta-tenue);color:#0B7F6E}
.segnale--forse{background:var(--miele-tenue);color:#8A3A20}
.viaggio-nuovo{
  position:absolute;top:9px;right:9px;background:var(--corallo);color:#fff;
  font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:999px;
}

.fila-partecipanti{display:flex;flex-direction:column;gap:9px}
.partecipante{display:flex;align-items:center;gap:10px;font-size:.92rem}
.partecipante strong{display:block;line-height:1.2}
.partecipante small{color:var(--notte-morbido);font-size:.8rem}
.partecipante--si strong{color:#0B7F6E}
.partecipante--no strong{color:var(--notte-morbido);text-decoration:line-through}
.partecipante--muto strong{color:var(--notte-morbido);opacity:.65}

.fila-scelte{display:flex;gap:9px;flex-wrap:wrap}
.scelta{flex:1;min-width:92px;cursor:pointer}
.scelta input{position:absolute;opacity:0;width:0;height:0}
.scelta span{
  display:block;text-align:center;padding:12px 8px;border-radius:14px;
  border:3px solid var(--carta-scura);font-weight:800;font-size:.9rem;
  color:var(--notte-morbido);background:var(--carta);transition:all .13s;
}
.scelta input:checked + span{color:#fff}
.scelta--si input:checked + span{background:var(--menta);border-color:var(--menta)}
.scelta--forse input:checked + span{background:var(--miele);border-color:var(--miele);color:#7A2A16}
.scelta--no input:checked + span{background:var(--notte-morbido);border-color:var(--notte-morbido)}
.scelta input:focus-visible + span{outline:3px solid var(--miele);outline-offset:2px}

.filo-messaggi{display:flex;flex-direction:column;gap:14px;max-height:400px;overflow-y:auto}
.messaggio{display:flex;gap:10px}
.messaggio strong{font-size:.9rem}
.messaggio small{color:var(--notte-morbido);font-size:.76rem;margin-left:6px}
.messaggio p{margin:3px 0 0;font-size:.92rem;line-height:1.5}

/* ---------- albero ---------- */
.pannello--albero{text-align:center;border-top:5px solid var(--menta)}
.codice-grande--albero{
  font-size:2rem;letter-spacing:.16em;background:var(--menta-tenue);
  border-color:var(--menta);color:#0B7F6E;
}
.due-colonne{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.fila-interruttori{display:flex;flex-direction:column;gap:9px}
.interruttore{cursor:pointer;display:block}
.interruttore input{position:absolute;opacity:0;width:0;height:0}
.interruttore-corpo{
  display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;
  background:var(--carta);border:3px solid var(--carta-scura);
  font-weight:700;font-size:.95rem;transition:all .13s;
}
.interruttore-segno{
  width:22px;height:22px;border-radius:7px;border:3px solid var(--prugna-chiara);
  flex-shrink:0;background:#fff;position:relative;
}
.interruttore input:checked + .interruttore-corpo{
  border-color:var(--menta);background:var(--menta-tenue);color:#0A5B50;
}
.interruttore input:checked + .interruttore-corpo .interruttore-segno{
  background:var(--menta);border-color:var(--menta);
}
.interruttore input:checked + .interruttore-corpo .interruttore-segno::after{
  content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);
}
.interruttore input:focus-visible + .interruttore-corpo{outline:3px solid var(--miele);outline-offset:2px}

/* le schede numeriche sono collegamenti: devono sembrarlo */
a.numero-scheda{display:block;color:inherit;text-decoration:none}
a.numero-scheda:hover{text-decoration:none}
a.numero-scheda:active{transform:translateY(0)}

/* pallino dei messaggi non letti */
.pallino{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;margin-left:6px;
  background:var(--corallo);color:#fff;border-radius:999px;
  font-size:.68rem;font-weight:800;line-height:1;vertical-align:middle;
}
.menu a.attivo .pallino{background:var(--miele);color:#7A2A16}

/* ---------- chat ---------- */
.fila-membri{display:flex;gap:5px;flex-wrap:wrap}
.chat-guscio{
  background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);
  display:flex;flex-direction:column;overflow:hidden;max-width:760px;
}
.chat-filo{
  padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  height:min(56vh,520px);background:var(--carta);
}
.chat-attesa,.chat-vuoto{
  margin:auto;color:var(--notte-morbido);font-weight:700;font-size:.92rem;text-align:center;
}
.chat-giorno{text-align:center;margin:6px 0 2px}
.chat-giorno span{
  background:var(--carta-scura);color:var(--notte-morbido);
  font-size:.74rem;font-weight:800;padding:4px 13px;border-radius:999px;
}
.chat-bolla{display:flex;gap:9px;align-items:flex-end;max-width:82%}
.chat-bolla--mia{margin-left:auto;flex-direction:row-reverse}
.chat-corpo{
  background:var(--bianco);border-radius:18px 18px 18px 5px;padding:10px 14px;
  box-shadow:0 2px 5px rgba(13,27,42,.07);min-width:0;
}
.chat-bolla--mia .chat-corpo{
  background:var(--prugna);color:#fff;border-radius:18px 18px 5px 18px;
}
.chat-corpo strong{
  display:block;font-size:.8rem;color:var(--prugna);margin-bottom:2px;font-weight:800;
}
.chat-corpo p{margin:0;font-size:.95rem;line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere}
.chat-corpo small{
  display:block;text-align:right;font-size:.68rem;opacity:.6;margin-top:3px;font-weight:700;
}
.chat-foto{display:block;margin:0 0 7px;border-radius:12px;overflow:hidden;max-width:210px}
.chat-foto img{width:100%;display:block}

.chat-modulo{border-top:3px solid var(--carta);padding:14px 16px}
.chat-riga{display:flex;gap:10px;align-items:flex-end}
.chat-riga textarea{
  flex:1;resize:none;min-height:46px;max-height:140px;padding:12px 15px;
  border-radius:22px;overflow-y:auto;
}
.chat-riga .bottone{border-radius:50%;width:46px;height:46px;padding:0;flex-shrink:0;font-size:1.1rem}
.chat-nota{font-size:.76rem;color:var(--notte-morbido);margin:9px 0 0;text-align:center}
.chat-allegato{
  display:flex;align-items:center;gap:11px;background:var(--miele-tenue);
  border-radius:var(--raggio-p);padding:9px 12px;margin-bottom:11px;
  font-size:.86rem;font-weight:700;color:#8A3A20;
}
.chat-allegato img{width:44px;height:44px;object-fit:cover;border-radius:9px}
.chat-allegato span{flex:1}
.chat-allegato button{
  background:none;border:none;font-size:1.3rem;cursor:pointer;color:#8A3A20;line-height:1;
}
@media (max-width:720px){
  .chat-filo{height:min(60vh,440px);padding:14px}
  .chat-bolla{max-width:92%}
}

/* ---------- icone del menu ---------- */
.voce-icona{width:22px;height:22px;flex-shrink:0}
.cassetto-voci a{display:flex;align-items:center;gap:13px}
.cassetto-voci a span{flex:1;min-width:0}
.cassetto-voci a .pallino{flex:0 0 auto}
.cassetto-voci a .voce-icona{color:var(--prugna-chiara);transition:color .13s}
.cassetto-voci a:hover .voce-icona{color:var(--prugna)}
.cassetto-voci a.attiva .voce-icona{color:var(--miele)}

@media (max-width:820px){
  .barra-bassa a .voce-icona{width:23px;height:23px;color:var(--notte-morbido)}
  .barra-bassa a.attiva .voce-icona{color:var(--prugna)}
}

/* ---------- scelta manuale delle foto ---------- */
.due-vie{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-bottom:30px}
.via{
  background:var(--bianco);border-radius:var(--raggio);padding:20px 22px;
  box-shadow:var(--ombra);display:flex;flex-direction:column;gap:6px;
  color:inherit;text-decoration:none;border-top:5px solid var(--carta-scura);
}
.via strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.18rem}
.via span{font-size:.9rem;color:var(--notte-morbido);line-height:1.5}
.via--mano{border-top-color:var(--miele)}
.via--mano:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta);text-decoration:none}
.via--mano{transition:transform .14s,box-shadow .14s}
.via--auto{border-top-color:var(--prugna-tenue);background:var(--carta)}
.via-azione{color:var(--prugna) !important;font-weight:800;margin-top:6px}

.barra-scelta{
  position:sticky;top:74px;z-index:30;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--bianco);border-radius:999px;padding:9px 16px;margin-bottom:16px;
  box-shadow:var(--ombra-alta);border:2px solid var(--miele);
}
.barra-scelta__conto{font-weight:700;font-size:.9rem;color:var(--notte-morbido);flex:1;min-width:90px}
.barra-scelta__conto strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.3rem;color:var(--prugna)}

.griglia-scelta .cella-scelta{cursor:pointer;display:block}
.cella-scelta input{position:absolute;opacity:0;width:0;height:0}
.cella-scelta .spunta{
  position:absolute;top:9px;left:9px;width:26px;height:26px;border-radius:50%;
  border:3px solid #fff;background:rgba(13,27,42,.28);
  box-shadow:0 2px 5px rgba(13,27,42,.25);transition:background .13s;
}
.cella-scelta.presa{border-color:var(--miele)}
.cella-scelta.presa img{opacity:.82}
.cella-scelta.presa .spunta{background:var(--miele)}
.cella-scelta.presa .spunta::after{
  content:'';position:absolute;left:7px;top:3px;width:6px;height:12px;
  border:solid #7A2A16;border-width:0 3px 3px 0;transform:rotate(45deg);
}
.cella-scelta input:focus-visible + img{outline:3px solid var(--miele);outline-offset:-3px}

.cella-aggiungi{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--carta);border:3px dashed var(--prugna-chiara);
  color:var(--prugna);text-decoration:none;font-weight:800;font-size:.8rem;text-align:center;padding:8px;
}
.cella-aggiungi span:first-child{font-size:2rem;line-height:1}
.cella-aggiungi:hover{background:var(--prugna-tenue);text-decoration:none}

@media (max-width:820px){
  .barra-scelta{top:8px}
}

/* momento senza foto: si deve notare subito */
.etichetta-vuoto{
  position:absolute;top:10px;right:10px;background:var(--corallo);color:#fff;
  font-size:.68rem;font-weight:800;padding:4px 11px;border-radius:999px;
  text-transform:lowercase;letter-spacing:.03em;
}

/* ---------- bottega ---------- */
.griglia-prodotti{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:8px}
.prodotto{cursor:pointer;display:block}
.prodotto input{position:absolute;opacity:0;width:0;height:0}
.prodotto-corpo{
  display:flex;flex-direction:column;gap:4px;height:100%;
  background:var(--bianco);border:3px solid var(--carta-scura);border-radius:var(--raggio);
  padding:18px;transition:all .14s;box-shadow:var(--ombra);
}
.prodotto:hover .prodotto-corpo{transform:translateY(-3px)}
.prodotto input:checked + .prodotto-corpo{border-color:var(--prugna);background:var(--prugna-tenue)}
.prodotto input:focus-visible + .prodotto-corpo{outline:3px solid var(--miele);outline-offset:2px}
.prodotto strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.14rem;line-height:1.2}
.prodotto-desc{font-size:.85rem;color:var(--notte-morbido);line-height:1.4}
.prodotto-prezzo{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.6rem;font-weight:900;color:var(--prugna);margin-top:4px}
.prodotto-nota{font-size:.76rem;color:var(--notte-morbido);line-height:1.4}
.prodotto--no{opacity:.45;cursor:not-allowed}

.griglia-opzioni{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px}
.opzione{cursor:pointer;display:block}
.opzione input{position:absolute;opacity:0;width:0;height:0}
.opzione-corpo{
  display:flex;flex-direction:column;gap:3px;height:100%;
  background:var(--bianco);border:3px solid var(--carta-scura);border-radius:var(--raggio-p);
  padding:14px 16px;transition:all .14s;
}
.opzione input:checked + .opzione-corpo{border-color:var(--menta);background:var(--menta-tenue)}
.opzione input:focus-visible + .opzione-corpo{outline:3px solid var(--miele);outline-offset:2px}
.opzione strong{font-size:.98rem}
.opzione-corpo span{font-size:.82rem;color:var(--notte-morbido);line-height:1.4}
.opzione-prezzo{font-weight:800;color:var(--prugna) !important;margin-top:3px}

.modulo-indirizzo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:22px;align-items:start}
.riepilogo-prezzo{
  background:var(--bianco);border-radius:var(--raggio);padding:22px;
  box-shadow:var(--ombra-alta);border-top:5px solid var(--miele);position:sticky;top:90px;
}
.riga-conto{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:7px 0;font-size:.92rem;color:var(--notte-morbido);
}
.riga-conto--totale{
  border-top:3px solid var(--carta);margin-top:8px;padding-top:12px;
  font-size:1.05rem;color:var(--notte);
}
.riga-conto--totale strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.5rem;color:var(--prugna)}
.conto-nota{font-size:.78rem;color:var(--notte-morbido);margin:12px 0 0;line-height:1.5}

.targhetta--pagato{background:var(--menta-tenue);color:#0B7F6E}
.targhetta--in_stampa{background:var(--miele-tenue);color:#8A3A20}
.targhetta--spedito{background:var(--prugna-tenue);color:var(--prugna)}
.targhetta--attesa_pagamento{background:var(--corallo-tenue);color:#8C1C12}
.targhetta--annullato,.targhetta--rimborsato,.targhetta--bozza{background:var(--carta-scura);color:var(--notte-morbido)}

/* ---------- pannello di gestione ---------- */
.pagina-admin{background:var(--carta);overflow-x:hidden}
.pagina-admin .contenuto{max-width:100%;overflow-x:hidden}
/* ---------- la barra di gestione ----------
   Era nera con il bordo ambra: sembrava un pannello di controllo di un altro
   programma. Adesso e' la stessa velatura chiara delle altre superfici fisse,
   e la differenza la fa l'etichetta «gestione» — che basta, perche' chi ci
   arriva sa gia' dov'e'. */
.barra-admin{
  background:#EEF4FB;border-bottom:1px solid rgba(13,27,42,.07);
  position:sticky;top:0;z-index:40;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .barra-admin{
    background:rgba(238,244,251,.88);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    backdrop-filter:blur(24px) saturate(180%);
  }
}
.barra-admin .barra-interna{
  flex-wrap:wrap;gap:12px 18px;padding:12px 20px;
}
.barra-admin .marchio{color:var(--notte)}
.barra-admin .marchio-baule{color:var(--miele-forte)}
.etichetta-admin{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  background:var(--miele-tenue);color:#8A3A20;
  border:1px solid rgba(242,84,45,.35);
  padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:7px;
}

/* il menu: pillole come nel resto del programma, non voci nude */
.menu--admin{flex:1;min-width:0;gap:4px}
.menu--admin a{
  color:var(--notte-morbido);border-radius:999px;
  padding:7px 14px;font-size:.86rem;font-weight:600;
}
.menu--admin a:hover{background:rgba(255,255,255,.8);color:var(--notte)}
.menu--admin a.attivo{
  background:var(--prugna);color:#fff;
  box-shadow:0 3px 10px -2px rgba(30,136,255,.35);
}
.barra-admin .bottone--fantasma{
  background:rgba(255,255,255,.8);color:var(--notte-morbido);
  border-color:rgba(13,27,42,.08);flex-shrink:0;
}
.barra-admin .bottone--fantasma:hover{background:#fff;color:var(--notte)}

/* su schermo stretto il menu scorre invece di andare a capo in disordine */
@media (max-width:900px){
  .barra-admin .barra-interna{flex-wrap:nowrap;gap:10px}
  .menu--admin{
    overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .menu--admin::-webkit-scrollbar{display:none}
  .menu--admin a{white-space:nowrap;flex-shrink:0}
  .barra-admin .marchio{font-size:1.1rem}
  .etichetta-admin{display:none}
}
.voce-gestione{border-top:3px solid var(--carta);margin-top:6px;padding-top:14px !important}

.riga-catalogo{display:flex;flex-direction:column;gap:14px}
.riga-catalogo__nomi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.riga-catalogo__nomi small{grid-column:1/-1;color:var(--notte-morbido);font-weight:700;font-size:.76rem}
.riga-catalogo__numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px}
.riga-catalogo label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:.8rem;color:var(--notte-morbido)}
.riga-catalogo input{padding:9px 12px;font-size:.94rem}

.fila-stato{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:.92rem}
.stato-pallino{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.stato-pallino.acceso{background:var(--menta)}
.stato-pallino.spento{background:var(--corallo)}
.stato-pallino.attesa{background:var(--miele)}

@media (max-width:820px){
  .modulo-indirizzo{grid-template-columns:1fr}
  .riepilogo-prezzo{position:static}
}

.modulo--invito{max-width:430px;margin:22px auto 0;text-align:left}
.modulo--invito label{align-items:stretch}

/* ==========================================================================
   Colonna laterale fissa su schermo largo
   Sotto i 1100px il cassetto torna a scomparsa. La soglia e' ripetuta in
   app.js: se cambia qui, va cambiata anche li'.
   ========================================================================== */

/* --- stato di riposo: fuori campo, non raggiungibile da tastiera --- */
.cassetto{visibility:hidden}
.cassetto.aperto{visibility:visible}

@media (min-width:1100px){
  /* le pagine di accesso e il pannello di gestione non hanno la colonna */
  body:not(.pagina-ingresso):not(.pagina-admin){padding-left:262px}
  .pagina-ingresso .cassetto,.pagina-admin .cassetto{display:none}

  .cassetto{
    visibility:visible;
    transform:none;
    width:262px;
    box-shadow:none;
    border-right:3px solid var(--carta-scura);
    background:var(--bianco);
  }
  .cassetto-chiudi{display:none}
  .cassetto-testa{margin-bottom:22px}
  .cassetto-testa .marchio{font-size:1.5rem}

  /* il marchio e le voci stanno nella colonna: in alto resterebbero doppi.
     Il pannello di gestione e' escluso: li' la colonna non c'e'. */
  .pagina-admin .barra-alta .marchio{display:inline-block}
  .barra-alta .marchio{display:none}
  .barra-interna .menu:not(.menu--admin){display:none}
  .hamburger{display:none}

  .barra-interna{justify-content:flex-end;gap:14px}

  .velo{display:none !important}
  .barra-bassa{display:none}
}

/* pieghe intermedie: niente colonna fissa, ma il menu in alto e' gia' stretto */
@media (min-width:821px) and (max-width:1099px){
  .hamburger{display:flex}
  .barra-interna .menu:not(.menu--admin){display:none}
}

/* campo esca per i robot: invisibile ma non display:none, che alcuni saltano */
.campo-esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* separatore fra accesso e registrazione */
.separa-o{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:var(--notte-morbido)}
.separa-o::before,.separa-o::after{content:'';flex:1;height:3px;background:var(--carta-scura);border-radius:2px}
.separa-o span{font-size:.8rem;font-weight:800;text-transform:lowercase}

.nota-minuta{font-size:.76rem;color:var(--notte-morbido);text-align:center;line-height:1.5;margin:12px 0 0}

/* ---------- documenti legali ---------- */
.documento{max-width:720px}
.documento h1{margin-bottom:6px}
.documento-meta{color:var(--notte-morbido);font-weight:700;font-size:.86rem;margin:0 0 24px}
.documento h2{font-size:1.25rem;margin:32px 0 10px;color:var(--prugna)}
.documento p{line-height:1.7;margin:0 0 14px}
.documento ul{margin:0 0 14px;padding-left:22px;line-height:1.75}
.documento li{margin-bottom:8px}

/* stati delle richieste dati */
.targhetta--in_attesa,.targhetta--in_corso{background:var(--miele-tenue);color:#8A3A20}
.targhetta--pronta{background:var(--menta-tenue);color:#0B7F6E}
.targhetta--scaduta,.targhetta--annullata{background:var(--carta-scura);color:var(--notte-morbido)}
.targhetta--errore{background:var(--corallo-tenue);color:#8C1C12}

/* indice ed elenchi dei documenti legali */
.documento-indice{
  display:flex;flex-wrap:wrap;gap:8px;background:var(--bianco);
  border-radius:var(--raggio);padding:18px;box-shadow:var(--ombra);margin-bottom:32px;
}
.documento-indice a{
  font-size:.84rem;font-weight:700;padding:7px 13px;border-radius:999px;
  background:var(--carta);color:var(--notte-morbido);
}
.documento-indice a:hover{background:var(--prugna-tenue);color:var(--prugna);text-decoration:none}
.documento section{scroll-margin-top:90px}
.documento-elenco{margin:0 0 16px;padding:0}
.documento-elenco dt{font-weight:800;color:var(--notte);margin-top:14px}
.documento-elenco dd{margin:3px 0 0;line-height:1.7;color:var(--notte-morbido)}
.documento strong{color:var(--notte)}
.documento-piede{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;
                 border-top:3px solid var(--carta-scura);padding-top:26px}
@media print{
  .barra-alta,.documento-indice,.documento-piede,.cassetto,.barra-bassa{display:none !important}
  body{padding-left:0 !important}
  .documento{max-width:none}
}

.documento-minuto{text-align:center;margin-top:18px;font-size:.82rem}
.documento-minuto a{color:#BFDCFF;font-weight:700}
.documento-minuto a:hover{color:#fff}

/* ---------- barra del pannello su schermo stretto ----------
   Il menu ha flex:1, cioe' flex-basis:0. Una larghezza al 100% da sola non
   basta a mandarlo a capo: la base ha la precedenza. Serve flex-basis. */
@media (max-width:900px){
  .barra-admin .barra-interna{
    flex-wrap:wrap;gap:8px 10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .barra-admin .marchio{flex:0 1 auto;font-size:1.2rem}
  .barra-admin .bottone--fantasma{margin-left:auto;padding:8px 14px;font-size:.8rem}

  .menu--admin{
    order:3;
    flex:1 1 100%;          /* la base al 100% e' cio' che manda a capo */
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:6px;
    padding:2px 0 6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .menu--admin::-webkit-scrollbar{display:none}
  .menu--admin a{white-space:nowrap;flex:0 0 auto;padding:9px 14px;font-size:.88rem}
}

@media (max-width:720px){
  .barra-admin .marchio{font-size:1.05rem}
  .etichetta-admin{font-size:.55rem;padding:2px 7px}
  .barra-admin .bottone--fantasma{padding:7px 11px;font-size:.74rem}
  /* nel pannello le schede numeriche stanno a due per riga, non a una */
  .pagina-admin .fila-numeri{grid-template-columns:repeat(2,1fr);gap:10px}
  .pagina-admin .numero-scheda{padding:14px}
  .pagina-admin .numero-scheda .cifra{font-size:1.6rem}
  .pagina-admin .numero-scheda .didascalia{font-size:.74rem}
  /* le tabelle larghe scorrono invece di sfondare la pagina */
  .pagina-admin .pannello{padding:16px;overflow-x:auto}
  .pagina-admin .tabella{min-width:520px}
  .tabella--listino{min-width:680px}
}

/* tabella del listino */
.tabella--listino input[type=text]{padding:7px 9px;font-size:.9rem}
.tabella--listino td{vertical-align:middle;font-size:.9rem}
.riga-stimata{background:var(--miele-tenue)}
.riga-stimata td:first-child::after{content:' ⚠';color:#C24427}

/* in modalità app il pannello deve stare sotto la tacca */
@media (display-mode:standalone){
  .barra-admin{padding-top:env(safe-area-inset-top, 0px)}
  .pagina-admin .contenuto{padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px))}
}

/* ---------- vetrina del negozio ---------- */
.menu--negozio{margin-bottom:24px}
.menu-conto{
  display:inline-block;background:var(--prugna-tenue);color:var(--prugna);
  font-size:.68rem;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:5px;
}
.menu--negozio a.attivo .menu-conto{background:rgba(255,255,255,.28);color:#fff}

.griglia-vetrina{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.vetrina-scheda{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;
  background:var(--bianco);border-radius:var(--raggio);padding:18px;
  box-shadow:var(--ombra);border:3px solid transparent;transition:transform .14s,box-shadow .14s,border-color .14s;
}
.vetrina-scheda:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);
                      border-color:var(--miele);text-decoration:none}
.vetrina-forma{
  display:flex;align-items:center;justify-content:center;
  height:96px;background:var(--carta);border-radius:var(--raggio-p);margin-bottom:8px;
}
.vetrina-forma span{
  display:block;background:linear-gradient(135deg,var(--prugna-chiara),var(--prugna));
  border-radius:4px;box-shadow:0 3px 10px rgba(13,27,42,.25);min-width:12px;min-height:12px;
}
.vetrina-scheda strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.02rem;line-height:1.25}
.vetrina-mis{font-size:.8rem;font-weight:800;color:var(--prugna)}
.vetrina-desc{font-size:.8rem;color:var(--notte-morbido);line-height:1.4}
.vetrina-serve{font-size:.72rem;color:var(--notte-morbido);font-style:italic;margin-top:2px}
.vetrina-prezzo{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.35rem;font-weight:900;
  color:var(--prugna);margin-top:auto;padding-top:8px;
}
.vetrina-scheda--no{opacity:.5;cursor:not-allowed}
.vetrina-scheda--no:hover{transform:none;border-color:transparent;box-shadow:var(--ombra)}
.vetrina-blocco{
  font-size:.7rem;font-weight:800;color:#8C1C12;background:var(--corallo-tenue);
  padding:4px 9px;border-radius:999px;align-self:flex-start;
}

/* ---------- spazio e abbonamenti ---------- */
.barra-spazio{height:16px;background:var(--carta-scura);border-radius:999px;overflow:hidden}
.barra-spazio__piena{
  height:100%;background:linear-gradient(90deg,var(--menta),#14B8A6);
  border-radius:999px;transition:width .4s ease;
}
.barra-spazio__piena.attenzione{background:linear-gradient(90deg,var(--miele),#F2542D)}
.barra-spazio__piena.allarme{background:linear-gradient(90deg,var(--corallo),#C7241A)}

.griglia-piani{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.piano{
  position:relative;background:var(--bianco);border-radius:var(--raggio);padding:26px 22px;
  box-shadow:var(--ombra);border:3px solid var(--carta-scura);
  display:flex;flex-direction:column;gap:6px;text-align:center;
}
.piano--consigliato{border-color:var(--miele);box-shadow:var(--ombra-alta);transform:translateY(-6px)}
.piano-nastro{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--miele);color:#7A2A16;font-size:.68rem;font-weight:800;
  padding:5px 14px;border-radius:999px;text-transform:lowercase;white-space:nowrap;
}
.piano h3{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.3rem;margin:0}
.piano-spazio{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:2.4rem;font-weight:900;color:var(--prugna);line-height:1.1}
.piano-foto{font-size:.8rem;color:var(--notte-morbido);margin:0}
.piano-desc{font-size:.86rem;color:var(--notte-morbido);line-height:1.45;margin:8px 0;flex:1}
.piano-prezzo{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.6rem;font-weight:900;color:var(--notte);margin:6px 0 14px}
.piano-prezzo span{display:block;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:.78rem;
                   font-weight:700;color:var(--notte-morbido)}
.piano-nota{font-size:.78rem;color:var(--notte-morbido);margin:0;font-style:italic}

@media (max-width:820px){
  .piano--consigliato{transform:none}
}

/* fascia di avviso in cima alle pagine */
.fascia-avviso{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--miele-tenue);color:#8A3A20;padding:11px 18px;
  font-size:.88rem;font-weight:700;text-align:center;
}
.fascia-avviso a{color:#7A2A16;text-decoration:underline}
.fascia-avviso--stop{background:var(--corallo-tenue);color:#8C1C12}
.fascia-avviso--stop a{color:#7A1810}

/* il piano in corso, nella griglia */
.piano--mio{border-color:var(--menta);background:linear-gradient(180deg,var(--menta-tenue),var(--bianco) 70%)}
.piano-nastro--mio{background:var(--menta);color:#0A5B50}
.piano-attuale{font-size:.82rem;font-weight:800;color:#0B7F6E;margin:0 0 12px}
.piano-guadagno{
  font-size:.82rem;font-weight:800;color:var(--prugna);
  background:var(--prugna-tenue);border-radius:999px;padding:5px 12px;
  display:inline-block;margin:0 auto 4px;
}

/* ---------- itinerario a tappe ---------- */
.itinerario{position:relative;padding-left:6px}
.itinerario::before{
  content:'';position:absolute;left:26px;top:20px;bottom:20px;width:4px;
  background:var(--carta-scura);border-radius:2px;
}
.tappa{display:block;cursor:pointer;margin-bottom:12px;position:relative}
.tappa input{position:absolute;opacity:0;width:0;height:0}
.tappa-corpo{
  display:flex;align-items:center;gap:14px;position:relative;
  background:var(--bianco);border-radius:var(--raggio);padding:14px 16px;
  box-shadow:var(--ombra);border:3px solid transparent;transition:all .14s;
}
.tappa input:checked + .tappa-corpo{border-color:var(--menta);background:var(--menta-tenue)}
.tappa input:focus-visible + .tappa-corpo{outline:3px solid var(--miele);outline-offset:2px}
.tappa-punto{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:var(--carta-scura);color:var(--notte-morbido);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:900;font-size:1.05rem;
  border:4px solid var(--bianco);z-index:1;
}
.tappa input:checked + .tappa-corpo .tappa-punto{background:var(--menta);color:#fff}
.tappa-foto{width:58px;height:58px;border-radius:var(--raggio-p);object-fit:cover;flex-shrink:0}
.tappa-testo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tappa-testo strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.08rem}
.tappa-paese{font-size:.78rem;font-weight:700;color:var(--prugna)}
.tappa-testo small{color:var(--notte-morbido);font-size:.8rem}
.spunta-tappa{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  border:3px solid var(--carta-scura);background:var(--bianco);position:relative;
}
.tappa input:checked + .tappa-corpo .spunta-tappa{background:var(--menta);border-color:var(--menta)}
.tappa input:checked + .tappa-corpo .spunta-tappa::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:11px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);
}
@media (max-width:560px){
  .itinerario::before{left:22px}
  .tappa-foto{display:none}
  .tappa-punto{width:36px;height:36px;font-size:.9rem}
}

/* ---------- le persone ---------- */
.griglia-persone{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.persona-scheda{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  background:var(--bianco);border-radius:var(--raggio);padding:20px 14px;
  box-shadow:var(--ombra);text-decoration:none;color:inherit;transition:transform .14s,box-shadow .14s;
}
.persona-scheda:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);text-decoration:none}
.persona-ritratto{
  width:84px;height:84px;border-radius:50%;overflow:hidden;border:4px solid var(--carta-scura);
  display:flex;align-items:center;justify-content:center;margin-bottom:6px;
}
.persona-ritratto img{width:100%;height:100%;object-fit:cover}
.persona-iniziale{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:2rem;font-weight:900;
}
.persona-scheda strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.06rem}
.persona-rel{font-size:.78rem;color:var(--notte-morbido)}
.persona-quante{font-size:.76rem;font-weight:800;color:var(--prugna)}

.fila-persone{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pillola-persona{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bianco);border:3px solid var(--carta-scura);border-radius:999px;
  padding:6px 14px;font-size:.88rem;font-weight:800;color:var(--notte);
  text-decoration:none;cursor:pointer;transition:all .13s;
}
.pillola-persona img{width:24px;height:24px;border-radius:50%;object-fit:cover;margin-left:-6px}
.pillola-persona:hover{transform:translateY(-2px);text-decoration:none}
.pillola-persona.attiva{color:#fff}
.pillola-persona.attiva img{border:2px solid rgba(255,255,255,.6)}
.pillola-aggiungi{background:var(--carta)}
.pillola-conto{
  background:rgba(0,0,0,.12);border-radius:999px;padding:1px 7px;font-size:.72rem;
}
.pillola-persona.attiva .pillola-conto{background:rgba(255,255,255,.28)}
.pillola-togli{
  background:rgba(255,255,255,.3);border:0;color:#fff;border-radius:50%;
  width:20px;height:20px;line-height:1;cursor:pointer;font-size:1rem;padding:0;
}
.pillola-togli:hover{background:rgba(255,255,255,.55)}

.fascia-avviso--viaggio{background:var(--menta-tenue);color:#0A5B50}
.fascia-avviso--viaggio a{color:#084A41}
.pillola-persona input[type=checkbox]{accent-color:currentColor;cursor:pointer}

/* chi condivide cosa, nell'albero */
.riga-io{background:var(--prugna-tenue)}
.segno-si{color:#0B7F6E;font-weight:900;font-size:1.1rem}
.segno-no{color:var(--carta-scura);font-weight:900}

/* modifica delle storie */
.riga-capitolo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-6px 0 16px}
.storia-scheda{position:relative}
.storia-correggi{
  position:absolute;top:9px;right:9px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--prugna);
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;cursor:pointer;box-shadow:var(--ombra);
  opacity:0;transition:opacity .14s;
}
.storia-scheda:hover .storia-correggi{opacity:1}
.storia-correggi:hover{background:#fff;transform:scale(1.08)}
@media (hover:none){.storia-correggi{opacity:1}}

.pillola-posto{cursor:pointer}
.pillola-posto.attiva{background:var(--menta);border-color:var(--menta);color:#fff}

/* ---------- reazioni ---------- */
.fila-reazioni{display:flex;gap:8px;flex-wrap:wrap}
.bolla-reazione{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--carta);border:3px solid transparent;border-radius:999px;
  padding:7px 13px;cursor:pointer;transition:all .13s;font-size:1.15rem;line-height:1;
}
.bolla-reazione:hover:not(:disabled){transform:translateY(-3px) scale(1.06);background:var(--carta-scura)}
.bolla-reazione:disabled{opacity:.4;cursor:not-allowed}
.bolla-reazione.mia{background:var(--prugna-tenue);border-color:var(--prugna)}
.bolla-conto{font-size:.8rem;font-weight:800;color:var(--notte-morbido);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
.bolla-reazione.mia .bolla-conto{color:var(--prugna)}

/* ---------- commenti ---------- */
.commento{display:flex;gap:11px;align-items:flex-start;padding:11px 0;position:relative}
.commento + .commento{border-top:2px solid var(--carta)}
.commento-tondo{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.92rem;text-transform:uppercase;
}
.commento-corpo{flex:1;min-width:0}
.commento-chi{display:block;font-weight:800;font-size:.88rem;color:var(--notte);margin-bottom:2px}
.commento-chi small{font-weight:600;color:var(--notte-morbido);font-size:.76rem;margin-left:6px}
.commento-fam{
  display:inline-block;background:var(--menta-tenue);color:#0B7F6E;
  font-size:.68rem;font-weight:800;padding:1px 8px;border-radius:999px;margin-left:5px;
}
.commento-corpo p{margin:0;line-height:1.55;font-size:.94rem;word-wrap:break-word}
.commento-togli{
  background:none;border:0;color:var(--carta-scura);cursor:pointer;
  font-size:1.2rem;line-height:1;padding:2px 6px;flex-shrink:0;
}
.commento-togli:hover{color:var(--corallo)}

/* pallino dei commenti sulle miniature condivise */
.bollino-commenti{
  position:absolute;top:8px;right:8px;
  background:var(--prugna);color:#fff;font-size:.72rem;font-weight:800;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(13,27,42,.35);
}
.bollino-commenti::before{content:'\1F4AC';margin-right:3px;font-size:.7rem}

/* apri la scheda dalla lente */
.lente-apri{
  position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  background:var(--miele);color:#7A2A16;font-weight:800;font-size:.86rem;
  padding:10px 22px;border-radius:999px;text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.lente-apri:hover{background:#FF9C80;text-decoration:none}

/* ---------- un anno fa oggi ---------- */
.fascia-ricordi{
  background:linear-gradient(160deg,var(--prugna-tenue),var(--carta));
  border-radius:var(--raggio);padding:20px 22px 24px;margin-bottom:32px;
  border-left:6px solid var(--miele);
}
.capitolo--ricordi{margin-top:0;margin-bottom:16px}
.capitolo--ricordi h2{font-size:1.35rem}
.riga-ricordo{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.riga-ricordo:last-child{margin-bottom:0}
.ricordo-quando{
  flex-shrink:0;width:96px;display:flex;flex-direction:column;gap:2px;padding-top:6px;
}
.ricordo-quando strong{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.02rem;color:var(--prugna);line-height:1.15;
}
.ricordo-quando small{font-size:.78rem;color:var(--notte-morbido);font-weight:700}
.ricordo-foto{
  flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;
  padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.ricordo-foto::-webkit-scrollbar{display:none}
.ricordo-foto .foto-cella{flex:0 0 128px;width:128px;height:128px;margin:0}

@media (max-width:560px){
  .riga-ricordo{flex-direction:column;gap:8px}
  .ricordo-quando{width:auto;flex-direction:row;align-items:baseline;gap:8px;padding-top:0}
  .ricordo-foto .foto-cella{flex:0 0 108px;width:108px;height:108px}
}

/* ---------- la ricerca ---------- */
.barra-cerca{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.barra-cerca input{
  flex:1;min-width:200px;font-size:1.05rem;padding:14px 20px;
  border-radius:999px;border:3px solid var(--carta-scura);background:var(--bianco);
}
.barra-cerca input:focus{border-color:var(--prugna);outline:none}
.barra-cerca .bottone{border-radius:999px;padding:14px 28px}

.lente-scorciatoia{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:var(--carta);
  color:var(--prugna);flex-shrink:0;
}
.lente-scorciatoia:hover{background:var(--prugna-tenue)}
.lente-scorciatoia svg{width:21px;height:21px}

.griglia-trovati{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:8px}
.trovato{
  display:flex;flex-direction:column;gap:3px;padding:14px 16px;
  background:var(--bianco);border-radius:var(--raggio-p);box-shadow:var(--ombra);
  text-decoration:none;color:inherit;border-left:4px solid var(--prugna-chiara);
  transition:transform .13s,box-shadow .13s;
}
.trovato:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta);text-decoration:none}
.trovato-tipo{
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--prugna);
}
.trovato strong{font-size:.98rem;line-height:1.25}
.trovato small{font-size:.8rem;color:var(--notte-morbido)}

@media (max-width:820px){
  .lente-scorciatoia{width:36px;height:36px}
}

/* ---------- scelta della cornice ---------- */
.griglia-cornici{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.scelta-cornice{cursor:pointer;display:block}
.scelta-cornice input{position:absolute;opacity:0;width:0;height:0}
.cornice-corpo{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  background:var(--bianco);border:3px solid var(--carta-scura);border-radius:var(--raggio-p);
  padding:16px 12px;transition:all .14s;
}
.scelta-cornice input:checked + .cornice-corpo{border-color:var(--prugna);background:var(--prugna-tenue)}
.scelta-cornice input:focus-visible + .cornice-corpo{outline:3px solid var(--miele);outline-offset:2px}
.cornice-corpo strong{font-size:.86rem}

/* i saggi: mostrano com'è la cornice, non lo dicono a parole */
.cornice-saggio{
  width:66px;height:56px;display:flex;align-items:center;justify-content:center;
  background:var(--carta);
}
.cornice-saggio span{display:block;width:44px;height:34px;background:linear-gradient(135deg,#6BB0FF,#1E88FF)}

.cornice-saggio--polaroid{background:#fff;padding:4px 4px 13px;box-shadow:0 2px 6px rgba(13,27,42,.18)}
.cornice-saggio--polaroid span{width:100%;height:100%}
.cornice-saggio--bianca{background:#fff;padding:5px;box-shadow:0 2px 6px rgba(13,27,42,.18)}
.cornice-saggio--bianca span{width:100%;height:100%}
.cornice-saggio--sottile span{border:1.5px solid #9FB0C1}
.cornice-saggio--ombra{background:#fff;padding:4px;box-shadow:4px 4px 0 #DDE8F3}
.cornice-saggio--ombra span{width:100%;height:100%}
.cornice-saggio--nessuna{background:transparent}

/* ---------- i colori del libro ---------- */
.griglia-tinte{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:11px}
.scelta-tinta{cursor:pointer;display:block}
.scelta-tinta input{position:absolute;opacity:0;width:0;height:0}
.tinta-corpo{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--bianco);border:3px solid var(--carta-scura);border-radius:var(--raggio-p);
  padding:12px 8px;transition:all .14s;
}
.scelta-tinta input:checked + .tinta-corpo{border-color:var(--prugna);background:var(--prugna-tenue)}
.scelta-tinta input:focus-visible + .tinta-corpo{outline:3px solid var(--miele);outline-offset:2px}
.tinta-corpo strong{font-size:.8rem}
.tinta-saggio{
  width:56px;height:44px;border-radius:8px;position:relative;overflow:hidden;
  border:2px solid rgba(13,27,42,.12);display:block;
}
.tinta-inch{position:absolute;left:8px;top:9px;width:26px;height:5px;border-radius:3px}
.tinta-acc{position:absolute;left:8px;top:21px;width:15px;height:5px;border-radius:3px}

/* ---------- gli ornamenti ---------- */
.fila-ornamenti{display:flex;flex-wrap:wrap;gap:9px}
.scelta-ornamento{cursor:pointer;display:block}
.scelta-ornamento input{position:absolute;opacity:0;width:0;height:0}
.ornamento-corpo{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:76px;padding:11px 6px;border-radius:var(--raggio-p);
  background:var(--bianco);border:3px solid var(--carta-scura);transition:all .14s;
}
.scelta-ornamento input:checked + .ornamento-corpo{border-color:var(--miele);background:var(--miele-tenue)}
.scelta-ornamento input:focus-visible + .ornamento-corpo{outline:3px solid var(--prugna);outline-offset:2px}
.ornamento-corpo small{font-size:.7rem;color:var(--notte-morbido);font-weight:700}
.ornamento-segno{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;line-height:1;color:var(--miele);
}
/* i saggi a schermo usano le entità: quelli nel PDF sono disegnati a linee */
.ornamento-segno--nessuno::before{content:'\2014';color:var(--carta-scura)}
.ornamento-segno--cuore::before{content:'\2665'}
.ornamento-segno--stella::before{content:'\2605'}
.ornamento-segno--sole::before{content:'\2600'}
.ornamento-segno--foglia::before{content:'\2766'}
.ornamento-segno--onda::before{content:'\223F'}
.ornamento-segno--aereo::before{content:'\2708'}
.ornamento-segno--casa::before{content:'\2302'}
.ornamento-segno--torta::before{content:'\25AD'}

/* ---------- videoclip ---------- */
.griglia-clip{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.clip-scheda{background:var(--bianco);border-radius:var(--raggio);overflow:hidden;box-shadow:var(--ombra)}
.clip-scheda video{width:100%;display:block;background:var(--notte);aspect-ratio:16/9}
.clip-stato{
  aspect-ratio:16/9;background:var(--notte);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
}
.clip-stato strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1rem}
.clip-stato small{font-size:.78rem;opacity:.75;padding:0 14px}
.clip-stato--ko{background:#450E08}
.clip-piede{padding:13px 15px 15px}
.clip-piede strong{display:block;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1rem;margin-bottom:2px}
.clip-piede small{color:var(--notte-morbido);font-size:.8rem}

.filatore{
  width:26px;height:26px;border:3px solid rgba(255,255,255,.25);
  border-top-color:var(--miele);border-radius:50%;animation:gira 1s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* il misuratore */
.misuratore{
  background:linear-gradient(160deg,var(--prugna-tenue),var(--carta));
  border-radius:var(--raggio);padding:18px 20px;margin-top:18px;
  border-left:6px solid var(--prugna);
}
.misuratore-cifre{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.misuratore-cifre span{font-size:.82rem;color:var(--notte-morbido);font-weight:700}
.misuratore-cifre strong{
  display:block;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.5rem;color:var(--prugna);line-height:1.1;
}
.misuratore-barra{height:10px;background:var(--bianco);border-radius:999px;overflow:hidden}
.misuratore-piena{
  height:100%;width:0;background:linear-gradient(90deg,var(--menta),#14B8A6);
  border-radius:999px;transition:width .25s ease;
}
.misuratore-piena.attenzione{background:linear-gradient(90deg,var(--miele),#F2542D)}
.misuratore-piena.allarme{background:linear-gradient(90deg,var(--corallo),#C7241A)}
.misuratore-nota{margin:10px 0 12px;font-size:.88rem;color:var(--notte-morbido);min-height:1.2em}

/* le due strade per far entrare le foto */
.due-strade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;margin-bottom:28px;
}
.strada{
  display:flex;flex-direction:column;gap:8px;padding:20px 22px;
  background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);
  border:3px solid var(--carta-scura);text-decoration:none;color:inherit;
  transition:transform .14s,box-shadow .14s,border-color .14s;
}
.strada:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);
              border-color:var(--prugna-chiara);text-decoration:none}
.strada.scelta{
  border-color:var(--prugna);
  background:linear-gradient(160deg,var(--prugna-tenue),var(--bianco) 75%);
}
.strada-testa{display:flex;align-items:center;gap:11px}
.strada-segno{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:var(--carta);color:var(--prugna);
  display:flex;align-items:center;justify-content:center;
}
.strada.scelta .strada-segno{background:var(--prugna);color:#fff}
.strada-segno svg{width:22px;height:22px}
.strada-testa strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.14rem;line-height:1.2}
.strada-nota{font-size:.87rem;color:var(--notte-morbido);line-height:1.5}
.strada-vai{
  font-size:.78rem;font-weight:800;color:var(--prugna);
  text-transform:lowercase;margin-top:2px;
}
.strada.scelta .strada-vai{color:#0B7F6E}

@media (max-width:560px){
  .strada{padding:16px 18px;gap:6px}
  .strada-segno{width:36px;height:36px}
  .strada-testa strong{font-size:1.04rem}
}


/* ---------- il menu a gruppi ---------- */
.gruppo-voci{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.gruppo-titolo{
  font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--prugna-chiara);padding:0 16px 6px;
}
/* un filo sottile fra un gruppo e l'altro: separa senza fare rumore */
.gruppo-voci + .gruppo-voci{
  border-top:2px solid var(--carta);padding-top:12px;
}
.gruppo-voci + .gruppo-voci .gruppo-titolo{padding-top:2px}

@media (max-width:1100px){
  .gruppo-voci{margin-bottom:10px}
  .gruppo-titolo{font-size:.66rem;padding-bottom:4px}
}

/* ---------- il ritratto ---------- */
.gettone--foto,
.gettone-grande--foto,
.commento-tondo--foto{
  padding:0;overflow:hidden;background:var(--carta-scura);
  border-radius:50%;
}
.gettone--foto img,
.gettone-grande--foto img,
.commento-tondo--foto img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
.gettone-grande{
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:2rem;font-weight:900;
  flex-shrink:0;box-shadow:var(--ombra);
}

.ritratto-ora{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ritratto-ora strong{display:block;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.15rem}

.griglia-ritratti{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px;
  max-width:520px;
}
.scelta-ritratto{
  padding:0;border:3px solid transparent;border-radius:50%;overflow:hidden;
  background:none;cursor:pointer;aspect-ratio:1;transition:all .13s;
}
.scelta-ritratto img{width:100%;height:100%;object-fit:cover;display:block}
.scelta-ritratto:hover{border-color:var(--prugna);transform:scale(1.06)}
.scelta-ritratto:focus-visible{outline:3px solid var(--miele);outline-offset:2px}

/* ---------- foto dentro o fuori dal libro ---------- */
.cella-libro{cursor:pointer;position:relative}
.cella-libro:focus-visible{outline:3px solid var(--miele);outline-offset:3px}
.cella-libro.in-attesa{opacity:.55;pointer-events:none}

/* il segno in alto a sinistra: dice cosa succede toccando, non è un bottone */
.segno-escludi{
  position:absolute;top:8px;left:8px;z-index:2;
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--notte);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;font-weight:800;
  box-shadow:0 2px 5px rgba(13,27,42,.25);pointer-events:none;
}
.cella-libro.esclusa .segno-escludi{background:var(--menta);color:#fff}

/* la foto esclusa si vede che è fuori, senza sparire */
.cella-libro.esclusa img{opacity:.35;filter:grayscale(.7)}
.cella-libro.esclusa::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  border:3px dashed var(--carta-scura);pointer-events:none;
}

/* ---------- guida e domande ---------- */
.griglia-mosse{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:34px}
.mossa{
  display:flex;flex-direction:column;gap:7px;padding:22px;
  background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);
  text-decoration:none;color:inherit;border-top:5px solid var(--prugna-chiara);
  transition:transform .14s,box-shadow .14s;
}
.mossa:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);text-decoration:none}
.mossa-numero{
  width:34px;height:34px;border-radius:50%;background:var(--prugna);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:900;font-size:1.05rem;
}
.mossa strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.12rem;line-height:1.25}
.mossa span:last-child{font-size:.88rem;color:var(--notte-morbido);line-height:1.5}

.domande{display:flex;flex-direction:column;gap:10px;margin-bottom:34px}
.domande details{
  background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);
  border-left:5px solid var(--carta-scura);overflow:hidden;transition:border-color .14s;
}
.domande details[open]{border-left-color:var(--prugna)}
.domande summary{
  padding:16px 20px;cursor:pointer;font-weight:800;font-size:1rem;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{
  content:'+';font-size:1.4rem;color:var(--prugna);font-weight:800;
  flex-shrink:0;line-height:1;transition:transform .18s;
}
.domande details[open] summary::after{content:'\2212'}
.domande summary:hover{background:var(--prugna-tenue)}
.domande details > div{padding:0 20px 20px;line-height:1.65}
.domande details > div p{margin:0 0 10px}
.domande details > div ul{margin:0 0 10px;padding-left:20px;line-height:1.8;color:var(--notte-morbido)}

.pannello--aiuto{
  background:linear-gradient(160deg,var(--menta-tenue),var(--bianco) 70%);
  border-left:6px solid var(--menta);
}

@media (max-width:560px){
  .domande summary{padding:14px 16px;font-size:.95rem}
  .domande details > div{padding:0 16px 16px}
}

/* ---------- il tocco si sente ----------
   Presi dal kit: alla pressione l'elemento si abbassa appena. E' una cosa di
   due righe che cambia la sensazione di tutta l'applicazione, perche' dice
   «ho ricevuto il tocco» nell'istante in cui avviene, senza aspettare il
   caricamento della pagina. */
.bottone,
.pillola-persona,
.scelta-cornice .cornice-corpo,
.scelta-tinta .tinta-corpo,
.opzione .opzione-corpo,
.strada,
.mossa,
.foto-cella,
.scelta-ritratto,
.trovato,
.persona-scheda{
  transition:transform .16s cubic-bezier(.2,.8,.3,1),
             box-shadow .16s ease,
             background-color .14s ease,
             border-color .14s ease;
}
.bottone:active,
.pillola-persona:active,
.scelta-ritratto:active,
.trovato:active{transform:scale(.97)}
.strada:active,
.mossa:active,
.persona-scheda:active{transform:scale(.985)}
.foto-cella:active{transform:scale(.96)}

/* niente animazione per chi ha chiesto di non averne: e' una richiesta di
   accessibilita', non una preferenza estetica */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .bottone:active,.foto-cella:active,.strada:active,.mossa:active{transform:none}
}

/* ---------- superfici ----------
   I pannelli perdono il bordo netto e prendono un filo chiarissimo: si
   staccano dal fondo per luce, non per contorno. */
.pannello,
.numero-scheda,
.momento-scheda,
.storia-scheda,
.clip-scheda,
.trovato,
.persona-scheda{
  border:1px solid rgba(13,27,42,.05);
}

/* ---------- le voci ---------- */
.pannello--registra{
  background:linear-gradient(160deg,var(--prugna-tenue),var(--bianco) 68%);
  border-left:6px solid var(--prugna);
}
.registra-testa h3{margin-bottom:4px}
.registra-testa p{margin:0 0 18px;color:var(--notte-morbido);font-size:.94rem;line-height:1.55}

.domanda-guida{
  background:var(--bianco);border-radius:var(--raggio-p);padding:16px 18px;
  margin-bottom:20px;display:flex;flex-direction:column;gap:7px;
  border:1px solid rgba(13,27,42,.05);
}
.domanda-etichetta{
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--prugna-chiara);
}
.domanda-guida strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.14rem;line-height:1.35}
.domanda-guida .bottone{align-self:flex-start;margin-top:4px}

.registra-comandi{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

.tasto-registra{
  display:inline-flex;align-items:center;gap:13px;
  background:var(--bianco);border:3px solid var(--corallo);
  border-radius:999px;padding:11px 24px 11px 14px;cursor:pointer;
  font-weight:800;font-size:1rem;color:var(--notte);
  transition:transform .16s,box-shadow .16s,background-color .16s;
  box-shadow:var(--ombra);
}
.tasto-registra:hover{transform:translateY(-2px);box-shadow:var(--ombra-alta)}
.tasto-registra:active{transform:scale(.97)}
.tasto-cerchio{
  width:24px;height:24px;border-radius:50%;background:var(--corallo);flex-shrink:0;
  transition:border-radius .2s,transform .2s;
}
.tasto-registra.in-corso{border-color:var(--corallo);background:var(--corallo-tenue)}
.tasto-registra.in-corso .tasto-cerchio{
  border-radius:5px;transform:scale(.72);
  animation:pulsa 1.4s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.45}}

.registra-stato{display:flex;align-items:center;gap:14px}
.registra-tempo{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.5rem;font-weight:900;color:var(--corallo);
  font-variant-numeric:tabular-nums;
}
.onda{display:flex;align-items:center;gap:3px;height:26px}
.onda i{
  display:block;width:4px;background:var(--corallo);border-radius:2px;
  animation:onda 1s ease-in-out infinite;
}
.onda i:nth-child(1){height:10px;animation-delay:0s}
.onda i:nth-child(2){height:20px;animation-delay:.15s}
.onda i:nth-child(3){height:26px;animation-delay:.3s}
.onda i:nth-child(4){height:17px;animation-delay:.45s}
.onda i:nth-child(5){height:11px;animation-delay:.6s}
@keyframes onda{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.elenco-voci{display:flex;flex-direction:column;gap:14px}
.voce-scheda{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--bianco);border-radius:var(--raggio);padding:18px 20px;
  box-shadow:var(--ombra);border:1px solid rgba(13,27,42,.05);
}
.voce-foto{width:72px;height:72px;border-radius:var(--raggio-p);object-fit:cover;flex-shrink:0}
.voce-segno{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.5rem;font-weight:900;
}
.voce-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.voce-chi{font-size:.76rem;font-weight:800;color:var(--prugna);text-transform:uppercase;letter-spacing:.05em}
.voce-corpo strong{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.16rem;line-height:1.3}
.voce-domanda{font-style:italic;color:var(--notte-morbido);font-size:.9rem;line-height:1.5}
.voce-desc{font-size:.9rem;color:var(--notte-morbido);line-height:1.55}
.voce-corpo audio{width:100%;margin-top:8px;height:38px}
.voce-piede{font-size:.8rem;color:var(--notte-morbido);margin-top:4px}
.voce-togli{
  background:none;border:0;color:var(--notte-morbido);cursor:pointer;
  font:inherit;font-size:.8rem;text-decoration:underline;padding:0;
}
.voce-togli:hover{color:var(--corallo)}

.griglia-domande{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.lista-domande{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.lista-domande button{
  background:none;border:0;padding:8px 10px;margin:0;cursor:pointer;
  font:inherit;font-size:.9rem;color:var(--notte);text-align:left;width:100%;
  border-radius:var(--raggio-s);line-height:1.45;transition:background-color .13s;
}
.lista-domande button:hover{background:var(--prugna-tenue);color:var(--prugna)}

@media (max-width:560px){
  .voce-scheda{padding:15px 16px;gap:12px}
  .voce-foto{width:56px;height:56px}
  .voce-segno{width:46px;height:46px;font-size:1.2rem}
  .registra-comandi{gap:14px}
  .registra-tempo{font-size:1.3rem}
}

/* ==================================================================
   IL LINGUAGGIO NUOVO
   Queste regole stanno in fondo perché sovrascrivono quelle di sopra:
   il foglio è cresciuto per sedimentazione, e riscriverlo tutto avrebbe
   voluto dire rompere cose che funzionano da settimane.
   ================================================================== */

/* ---------- le schede ----------
   Meno ombra e più bordo: su uno schermo di fotografie le ombre pesanti
   fanno rumore, mentre un filo di contorno tiene le cose distinte senza
   togliere attenzione alle immagini. */
.pannello,
.numero-scheda,
.trovato,
.persona-scheda,
.clip-scheda,
.storia-scheda,
.mossa,
.strada,
.momento-scheda{
  border:1px solid rgba(13,27,42,.06);
  box-shadow:var(--ombra-morbida);
  border-radius:var(--raggio);
}
.pannello:hover,
.trovato:hover,
.persona-scheda:hover,
.mossa:hover,
.strada:hover{box-shadow:var(--ombra)}

/* i numeri grandi: serif, come nel kit — un numero in serif si legge come
   un dato, non come un'etichetta */
.numero-scheda .cifra{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;letter-spacing:-.02em;
}
.numero-scheda{background:var(--bianco);padding:20px 22px}
.numero-scheda .didascalia{
  font-size:.85rem;color:var(--notte-morbido);font-weight:500;
}

/* ---------- il riquadro di apertura ----------
   Il gradiente indaco profondo del kit: è la prima cosa che si vede
   entrando, e deve dire «questo posto è tuo e sta al sicuro». */
.eroe,
.riquadro-eroe,
.pannello--eroe{
  background:linear-gradient(135deg,#0A2540 0%,#0B3B66 55%,#0B3B66 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 36px -8px rgba(10,37,64,.4);
  color:#fff;
}

/* ---------- i bottoni ---------- */
.bottone{
  border-radius:var(--raggio-p);
  font-weight:600;
  letter-spacing:-.005em;
  border:1px solid transparent;
}
.bottone--pieno{
  background:var(--prugna);color:#fff;
  border-color:rgba(255,255,255,.18);
  box-shadow:0 4px 12px -2px rgba(30,136,255,.35);
}
.bottone--pieno:hover{background:#1668D6}

/* l'ambra è il gesto che si vuole far fare: uno per schermata, non di più */
.bottone--sole{
  background:var(--miele);color:var(--miele-scuro);font-weight:700;
  border-color:rgba(255,107,74,.5);
  box-shadow:0 4px 12px -2px rgba(242,84,45,.3);
}
.bottone--sole:hover{background:var(--miele-forte);color:#fff}

.bottone--tenue{
  background:var(--prugna-tenue);color:var(--prugna);
  border-color:rgba(30,136,255,.12);font-weight:600;
}
.bottone--tenue:hover{background:#D6E8FF}

.bottone--fantasma{
  background:var(--bianco);color:var(--notte-morbido);
  border-color:var(--carta-scura);
}
.bottone--fantasma:hover{background:var(--carta);color:var(--notte)}

.bottone--corallo{
  background:var(--corallo-tenue);color:#8C1C12;
  border-color:rgba(224,43,32,.2);
}

/* ---------- il tondo centrale della barra bassa ----------
   Nel kit è il gesto principale, sollevato sopra la barra. È il posto
   giusto: «aggiungi» è ciò che si fa più spesso, e stare al centro
   significa raggiungerlo col pollice senza spostare la mano. */
/* Il tondo centrale usa la classe che c'era gia': l'ombra piatta diventa
   un alone morbido, e il quadrato con gli angoli molto tondi al posto del
   cerchio — e' la forma del kit, e a 54 pixel si distingue meglio. */
@media (max-width:1100px){
  .barra-bassa__piu{
    border-radius:18px !important;
    background:var(--prugna) !important;
    box-shadow:0 8px 24px -4px rgba(30,136,255,.7) !important;
    /* l'anello chiaro stacca il tondo dalla barra velata sotto */
    border:3px solid rgba(255,255,255,.9);
    font-size:1.7rem !important;
    margin:-22px 6px 2px !important;
  }
  .barra-bassa a.attiva{color:var(--prugna)}
  .barra-bassa a.attiva svg{color:var(--prugna)}
}

/* ---------- i menu a pillola ---------- */
.menu a{
  border-radius:999px;font-weight:600;font-size:.9rem;
  padding:8px 16px;border:1px solid transparent;
}
.menu a.attivo{
  background:var(--prugna);color:#fff;
  box-shadow:0 3px 10px -2px rgba(30,136,255,.35);
}
.menu a:not(.attivo){color:var(--notte-morbido)}
.menu a:not(.attivo):hover{background:var(--prugna-tenue);color:var(--prugna)}

/* ---------- l'etichetta di sezione ----------
   La pillola chiara sopra il titolo, come negli screenshot: dice di cosa
   parla la pagina prima ancora che si legga il titolo. */
.targhetta-sezione{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--prugna-tenue);color:var(--prugna);
  border:1px solid rgba(30,136,255,.14);
  border-radius:999px;padding:5px 14px;
  font-size:.78rem;font-weight:600;margin-bottom:12px;
}
.targhetta-sezione svg{width:14px;height:14px}

/* ---------- campi ---------- */
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=date],input[type=number],textarea,select{
  border-radius:var(--raggio-p);
  border:1px solid var(--carta-scura);
  background:var(--bianco);
  font-family:inherit;font-size:.95rem;
  transition:border-color .14s,box-shadow .14s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--prugna);
  box-shadow:0 0 0 3px rgba(30,136,255,.12);
  outline:none;
}

/* ---------- la griglia delle fotografie ---------- */
.foto-cella{border-radius:var(--raggio-p);box-shadow:var(--ombra-morbida)}
.foto-cella:hover{box-shadow:var(--ombra)}

/* ==================================================================
   LE CAPSULE VOCALI
   ================================================================== */

/* il riquadro che invita a registrare: indaco profondo, come nel kit */
.eroe-voce{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(135deg,#0B3B66 0%,#0B3B66 60%,#12518C 100%);
  border-radius:var(--raggio);padding:26px 28px;margin-bottom:26px;
  color:#fff;cursor:pointer;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 32px -10px rgba(11,59,102,.5);
  transition:transform .16s,box-shadow .16s;
}
.eroe-voce:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(11,59,102,.6)}
.eroe-voce:active{transform:scale(.99)}
.eroe-voce__occhiello{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--miele);margin-bottom:7px;
}
.eroe-voce h2{color:#fff;margin:0 0 6px;font-size:1.45rem}
.eroe-voce p{margin:0;font-size:.9rem;color:rgba(255,255,255,.78);line-height:1.5}

.tondo-microfono{
  flex-shrink:0;width:58px;height:58px;border-radius:18px;border:0;
  background:var(--miele);color:var(--miele-scuro);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -4px rgba(242,84,45,.55);
  transition:transform .16s;
}
.tondo-microfono svg{width:26px;height:26px}
.eroe-voce:hover .tondo-microfono{transform:scale(1.06)}

/* le domande guida */
.fila-domande{display:flex;flex-wrap:wrap;gap:8px}
.pillola-domanda{
  background:var(--carta);border:1px solid var(--carta-scura);border-radius:999px;
  padding:9px 15px;font-size:.85rem;font-weight:500;color:var(--notte-morbido);
  cursor:pointer;text-align:left;line-height:1.35;transition:all .13s;
  font-family:inherit;
}
.pillola-domanda:hover{background:var(--prugna-tenue);border-color:var(--prugna-chiara);color:var(--prugna)}
.pillola-domanda.scelta{
  background:var(--prugna);border-color:var(--prugna);color:#fff;font-weight:600;
}
.pillola-domanda--altre{color:var(--prugna);font-weight:600}
.gruppo-domande{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--prugna-chiara);margin:0 0 7px;
}

/* il registratore */
.registratore-corpo{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--carta-scura);
}
.tasto-registra{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--corallo);color:#fff;border:0;border-radius:999px;
  padding:14px 26px;font-size:1rem;font-weight:700;cursor:pointer;
  font-family:inherit;box-shadow:0 6px 18px -4px rgba(224,43,32,.5);
  transition:all .16s;
}
.tasto-registra:hover{background:#C7241A}
.tasto-registra:active{transform:scale(.97)}
.tasto-registra__punto{
  width:12px;height:12px;border-radius:50%;background:#fff;flex-shrink:0;
}
.tasto-registra.in-corso{background:var(--notte)}
.tasto-registra.in-corso .tasto-registra__punto{
  background:var(--corallo);animation:pulsa 1.1s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.registratore-stato{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px}
.registratore-tempo{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.9rem;font-weight:600;
  color:var(--notte);line-height:1;font-variant-numeric:tabular-nums;
}

/* l'onda: l'unica prova visibile che il microfono sente davvero */
.registratore-onda{display:flex;align-items:center;gap:3px;height:30px}
.registratore-onda span{
  width:4px;height:100%;background:var(--prugna);border-radius:2px;
  transform:scaleY(.12);transform-origin:center;
  transition:transform .07s linear;
}

/* le capsule conservate */
.griglia-voci{display:flex;flex-direction:column;gap:12px}
.voce-scheda{
  display:flex;gap:15px;align-items:flex-start;
  background:var(--bianco);border-radius:var(--raggio);padding:15px;
  border:1px solid rgba(13,27,42,.06);box-shadow:var(--ombra-morbida);
  transition:box-shadow .14s;
}
.voce-scheda:hover{box-shadow:var(--ombra)}
.voce-foto{
  width:74px;height:74px;border-radius:var(--raggio-p);object-fit:cover;flex-shrink:0;
}
.voce-foto--vuota{
  background:var(--prugna-tenue);color:var(--prugna);
  display:flex;align-items:center;justify-content:center;
}
.voce-foto--vuota svg{width:26px;height:26px}
.voce-corpo{flex:1;min-width:0}
.voce-chi{
  display:block;font-size:.8rem;font-weight:600;color:var(--prugna);margin-bottom:2px;
}
.voce-corpo strong{
  display:block;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.08rem;
  font-weight:600;line-height:1.3;margin-bottom:4px;
}
.voce-testo{
  margin:0 0 8px;font-size:.87rem;color:var(--notte-morbido);line-height:1.5;
}
.voce-piede{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:.8rem;color:var(--notte-morbido);
}
.voce-ascolta{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--prugna-tenue);color:var(--prugna);border:0;border-radius:999px;
  padding:7px 15px;font-size:.83rem;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all .13s;
}
.voce-ascolta svg{width:15px;height:15px}
.voce-ascolta:hover{background:#D6E8FF}
.voce-ascolta.suona{background:var(--prugna);color:#fff}
.voce-ascolta.suona svg{animation:pulsa 1.1s ease-in-out infinite}

@media (max-width:560px){
  .eroe-voce{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .voce-foto{width:58px;height:58px}
  .registratore-corpo{flex-direction:column;align-items:stretch}
  .tasto-registra{justify-content:center}
}

/* ==================================================================
   LA SCHEDA DEL RICORDO
   L'immagine sopra, titolo e data sotto — come in una scheda di catalogo.
   Prima i pulsanti stavano sopra la fotografia: su una miniatura da 150
   pixel due cerchi bianchi ne mangiano un terzo, e l'immagine è proprio
   la cosa che si sta cercando di guardare.
   ================================================================== */
.scheda-ricordo{
  margin:0;background:var(--bianco);border-radius:var(--raggio-p);
  overflow:hidden;border:1px solid rgba(13,27,42,.06);
  box-shadow:var(--ombra-morbida);cursor:pointer;
  display:flex;flex-direction:column;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s;
}
.scheda-ricordo:hover{transform:translateY(-3px);box-shadow:var(--ombra)}
.scheda-ricordo:active{transform:scale(.98)}

.scheda-ricordo__immagine{
  position:relative;display:block;aspect-ratio:1;background:var(--carta-scura);
}
.scheda-ricordo__immagine img{width:100%;height:100%;object-fit:cover;display:block}

/* i segni negli angoli: piccoli, e solo quando servono */
.segno-angolo{
  position:absolute;top:8px;right:8px;z-index:2;
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--notte-morbido);
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;line-height:1;padding:0;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 6px rgba(13,27,42,.15);
  opacity:0;transition:opacity .14s,transform .14s,background .14s;
}
.scheda-ricordo:hover .segno-angolo,
.segno-angolo.pieno{opacity:1}
.segno-angolo:hover{transform:scale(1.1);background:#fff}
.segno-angolo--sinistra{right:auto;left:8px}
.segno-angolo--cuore.pieno{background:var(--corallo);color:#fff}

/* su telefono non c'è il passaggio del mouse: i segni restano visibili */
@media (hover:none){
  .segno-angolo{opacity:1}
}

.scheda-ricordo__chi{
  position:absolute;left:8px;bottom:8px;z-index:2;
  width:26px;height:26px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;
  border:2px solid rgba(255,255,255,.9);
}
.scheda-ricordo__targa{
  position:absolute;right:8px;bottom:8px;z-index:2;
  background:rgba(13,27,42,.72);color:#fff;
  font-size:.68rem;font-weight:600;padding:3px 9px;border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

.scheda-ricordo__testo{padding:11px 13px 13px}
.scheda-ricordo__testo strong{
  display:block;font-size:.9rem;font-weight:600;line-height:1.3;
  color:var(--notte);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.scheda-ricordo__testo small{font-size:.78rem;color:var(--notte-morbido)}
.scheda-ricordo__cuori{color:var(--corallo);font-weight:600}

/* ==================================================================
   LA LENTE COME SCHEDA
   ================================================================== */
.lente{
  background:rgba(13,27,42,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:24px 16px;
}
.lente-scheda{
  background:var(--bianco);border-radius:var(--raggio);overflow:hidden;
  max-width:640px;width:100%;max-height:88vh;
  display:flex;flex-direction:column;
  box-shadow:0 30px 70px -12px rgba(0,0,0,.5);
}
.lente-immagine{position:relative;background:#0D1B2A;flex:1;min-height:0}
.lente-immagine img{
  width:100%;height:100%;max-height:70vh;object-fit:contain;display:block;
}
.lente .lente-chiudi{
  position:absolute;top:12px;right:12px;z-index:3;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(13,27,42,.6);color:#fff;font-size:1.3rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lente .lente-chiudi:hover{background:rgba(13,27,42,.85)}

.lente-piede{
  padding:16px 20px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;background:var(--bianco);flex-shrink:0;
}
.lente .lente-info{
  margin:0;font-size:.9rem;color:var(--notte);font-weight:500;
  flex:1;min-width:0;line-height:1.45;
}
.lente .lente-apri{
  position:static;transform:none;flex-shrink:0;
  background:var(--prugna-tenue);color:var(--prugna);
  font-size:.85rem;font-weight:600;padding:9px 18px;border-radius:999px;
  box-shadow:none;
}
.lente .lente-apri:hover{background:#D6E8FF;text-decoration:none}

.lente-nav{
  background:rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lente-nav:hover{background:rgba(255,255,255,.28)}

@media (max-width:560px){
  .lente{padding:12px 10px}
  .lente-scheda{max-height:92vh}
  .lente-piede{padding:13px 16px}
  .lente .lente-info{font-size:.85rem;width:100%}
}

/* La griglia delle schede: colonne più larghe, perché sotto l'immagine c'è
   del testo che deve stare su una riga sola.
   Classe dedicata e non :has() — quello è fra i costrutti che questo
   progetto non usa, perché non regge sui browser più vecchi. */
.griglia-schede{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px;
}
@media (max-width:520px){
  .griglia-schede{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
  .scheda-ricordo__testo{padding:9px 10px 11px}
  .scheda-ricordo__testo strong{font-size:.83rem}
  .scheda-ricordo__testo small{font-size:.72rem}
}

/* ==================================================================
   LE SCHEDE DELLE STORIE
   La miniatura era alta quanto tutta la scheda: su una foto verticale
   il ritaglio prendeva un pezzo a caso — un muro, un pavimento — e la
   scheda sembrava rotta. Adesso è un quadrato piccolo, che di una
   fotografia mostra il centro e basta.
   ================================================================== */
.griglia-storie{
  display:flex;flex-direction:column;gap:12px;
}
.storia-scheda{
  display:flex;gap:15px;align-items:center;
  background:var(--bianco);border-radius:var(--raggio);padding:14px;
  border:1px solid rgba(13,27,42,.06);box-shadow:var(--ombra-morbida);
  text-decoration:none;color:inherit;
}
.storia-scheda:hover{box-shadow:var(--ombra);transform:translateY(-2px);text-decoration:none}
.storia-cover{
  width:76px;height:76px;flex-shrink:0;border-radius:var(--raggio-p);
  overflow:hidden;background:var(--carta-scura);
}
.storia-cover img{width:100%;height:100%;object-fit:cover;display:block}
.storia-testo{
  padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
}
.storia-testo strong{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.1rem;font-weight:600;
  line-height:1.25;color:var(--notte);
}
.storia-testo span,.storia-testo small{
  font-size:.85rem;color:var(--notte-morbido);
}
.storia-correggi{
  top:12px;right:12px;width:34px;height:34px;
  background:var(--prugna-tenue);color:var(--prugna);box-shadow:none;
}
.storia-scheda:hover .storia-correggi{opacity:1}
@media (hover:none){.storia-correggi{opacity:1}}

@media (max-width:520px){
  .storia-cover{width:62px;height:62px}
  .storia-testo strong{font-size:1rem}
}

/* le due schede in cima: scritto o parlato */
.menu--doppio{margin-bottom:24px;gap:10px}
.menu--doppio a{
  display:inline-flex;align-items:center;gap:8px;padding:11px 20px;
  font-size:.92rem;
}
.menu--doppio a svg{width:17px;height:17px}
.menu-conto{
  background:rgba(255,255,255,.25);border-radius:999px;
  padding:1px 8px;font-size:.72rem;font-weight:700;
}
.menu--doppio a:not(.attivo) .menu-conto{background:var(--carta-scura);color:var(--notte-morbido)}

/* ---------- il cassetto: le voci sulla velatura ----------
   Su fondo velato le voci hanno bisogno di più contrasto di quello che
   basta sul bianco: quella attiva prende l'indaco pieno, le altre restano
   scure ma la pastiglia al passaggio è bianca, non grigia. */
.cassetto-voci a{
  border-radius:14px;color:var(--notte);font-weight:500;
}
.cassetto-voci a:hover{background:rgba(255,255,255,.75);text-decoration:none}
.cassetto-voci a.attiva{
  background:var(--prugna);color:#fff;font-weight:600;
  box-shadow:0 4px 14px -3px rgba(30,136,255,.5);
}
.cassetto-voci a.attiva svg{color:#fff;stroke:#fff}

/* la scheda del profilo in cima, con la freccia che porta al profilo */
.cassetto-utente{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.7);border-radius:var(--raggio-p);
  padding:12px 14px;margin-bottom:18px;text-decoration:none;color:inherit;
  border:1px solid rgba(255,255,255,.8);
  transition:background .14s;
}
.cassetto-utente:hover{background:rgba(255,255,255,.92);text-decoration:none}
.cassetto-utente__testo{flex:1;min-width:0}
.cassetto-utente__testo strong{
  display:block;font-size:.95rem;font-weight:600;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cassetto-utente__testo span{
  font-size:.8rem;color:var(--prugna);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
}
.cassetto-utente__freccia{color:var(--notte-morbido);font-size:1.2rem;flex-shrink:0}

.cassetto-chiudi{
  background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.9);
}
.cassetto-chiudi:hover{background:#fff}

.gruppo-titolo{color:#9FB0C1}
.gruppo-voci + .gruppo-voci{border-top-color:rgba(13,27,42,.07)}

.cassetto-piede{
  border-top:1px solid rgba(13,27,42,.07);
  background:transparent;
}

/* le voci di gestione che riguardano il negozio dormiente */
.voce-dormiente{opacity:.5;position:relative}
.voce-dormiente:hover{opacity:.8}
.pallino-dormiente{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--miele);margin-left:5px;vertical-align:middle;
}
.avviso--attenzione{
  background:var(--miele-tenue);border-left:4px solid var(--miele-forte);
  color:#7A2A16;
}
.avviso--attenzione a{color:#8A3A20;font-weight:600;text-decoration:underline}

/* il segno che cancella per sempre: rosso, e solo nel cestino */
.segno-angolo--brucia{
  left:auto;right:8px;background:rgba(224,43,32,.92);color:#fff;
}
.segno-angolo--brucia:hover{background:var(--corallo)}

/* ==================================================================
   LA PAGINA DEI RICORDI
   ================================================================== */

/* i menu che scorrono invece di andare a capo: con nove persone e sei anni
   le pillole occuperebbero mezzo schermo prima ancora delle fotografie */
.menu--scorre{
  display:flex;gap:8px;margin-bottom:14px;
  overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.menu--scorre::-webkit-scrollbar{display:none}
.menu--scorre a{white-space:nowrap;flex-shrink:0}

.menu--scorre a .menu-conto{
  background:rgba(255,255,255,.28);margin-left:5px;
}
.menu--scorre a:not(.attivo) .menu-conto{
  background:var(--carta-scura);color:var(--notte-morbido);
}

/* il filtro per persona: la faccia accanto al nome, perché in famiglia
   si riconosce prima un viso di un nome scritto */
.filtro-persone{
  background:var(--bianco);border-radius:var(--raggio-p);
  padding:12px 14px 8px;margin-bottom:16px;
  border:1px solid rgba(13,27,42,.06);
}
.filtro-persone__etichetta{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--notte-morbido);margin-bottom:9px;
}
.filtro-persone .menu--scorre{margin-bottom:0}
.filtro-persone .menu--scorre a{
  display:inline-flex;align-items:center;gap:7px;padding:5px 14px 5px 6px;
}
.filtro-persone .menu--scorre a:first-child{padding-left:14px}
.filtro-faccia{
  width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.filtro-faccia--lettera{
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.72rem;font-weight:700;
}

/* l'interruttore fra riquadri ed elenco */
.scambia-vista{
  display:inline-flex;gap:3px;background:var(--carta-scura);
  border-radius:12px;padding:3px;flex-shrink:0;
}
.scambia-vista a{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:32px;border-radius:9px;color:var(--notte-morbido);
  transition:background .13s,color .13s;
}
.scambia-vista a:hover{color:var(--notte);text-decoration:none}
.scambia-vista a.scelta{
  background:var(--prugna);color:#fff;
  box-shadow:0 2px 6px -1px rgba(30,136,255,.4);
}
.scambia-vista svg{width:17px;height:17px}

/* TRE per riga, non due: una fotografia da 300 pixel sul telefono e' un
   poster, e per capire cosa c'e' nell'archivio serve vederne tante insieme */
.griglia-schede{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
@media (max-width:700px){
  .griglia-schede{grid-template-columns:repeat(3,1fr);gap:9px}
  .scheda-ricordo__testo{padding:8px 9px 10px}
  .scheda-ricordo__testo strong{font-size:.76rem}
  .scheda-ricordo__testo small{font-size:.68rem}
  .scheda-ricordo__chi{width:21px;height:21px;font-size:.62rem;left:6px;bottom:6px}
  .segno-angolo{width:25px;height:25px;font-size:.82rem;top:6px;right:6px}
  .segno-angolo--sinistra{left:6px;right:auto}
}
@media (max-width:380px){
  .griglia-schede{gap:7px}
  .scheda-ricordo__testo strong{font-size:.71rem}
}

/* ---------- la vista a elenco ----------
   Miniatura piccola a sinistra, il resto respira: serve a scorrere in fretta
   quando si cerca una data piuttosto che una faccia. */
.griglia-schede.come-elenco{
  display:flex;flex-direction:column;gap:8px;
}
.come-elenco .scheda-ricordo{
  flex-direction:row;align-items:center;gap:13px;padding:9px;
}
.come-elenco .scheda-ricordo__immagine{
  width:64px;height:64px;flex-shrink:0;border-radius:var(--raggio-s);
  overflow:hidden;aspect-ratio:auto;
}
.come-elenco .scheda-ricordo__testo{padding:0;flex:1;min-width:0}
.come-elenco .scheda-ricordo__testo strong{font-size:.93rem;white-space:normal}
.come-elenco .scheda-ricordo__chi{
  width:19px;height:19px;font-size:.58rem;left:3px;bottom:3px;border-width:1.5px;
}
.come-elenco .segno-angolo{
  width:26px;height:26px;top:auto;bottom:auto;
  position:static;opacity:1;margin-left:4px;box-shadow:none;
  background:var(--carta);
}
.come-elenco .scheda-ricordo__targa{display:none}

@media (max-width:560px){
  .come-elenco .scheda-ricordo__immagine{width:54px;height:54px}
  .come-elenco .scheda-ricordo__testo strong{font-size:.86rem}
}

/* i segni stanno in un contenitore proprio: sovrapposti all'immagine nella
   vista a riquadri, in coda alla riga nella vista a elenco */
.scheda-ricordo{position:relative}
.scheda-ricordo__segni{
  position:absolute;top:0;left:0;right:0;height:44px;
  pointer-events:none;z-index:3;
}
.scheda-ricordo__segni > *{pointer-events:auto}

.come-elenco .scheda-ricordo__segni{
  position:static;height:auto;display:flex;gap:5px;
  align-items:center;flex-shrink:0;
}

/* il cestino nell'angolo: rosso solo al tocco, per non urlare in una pagina
   di fotografie di famiglia */
.segno-angolo--butta{background:rgba(255,255,255,.9);color:var(--notte-morbido)}
.segno-angolo--butta:hover{background:var(--corallo);color:#fff}

/* la strisciolina per annullare */
.striscia-annulla{
  position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translate(-50%, 20px);
  display:flex;align-items:center;gap:14px;
  background:#16293D;color:#fff;
  padding:12px 14px 12px 20px;border-radius:999px;
  box-shadow:0 12px 30px -6px rgba(13,27,42,.5);
  z-index:120;opacity:0;transition:opacity .22s,transform .22s;
  font-size:.9rem;max-width:calc(100vw - 32px);
}
.striscia-annulla.vista{opacity:1;transform:translate(-50%, 0)}
.striscia-annulla button{
  background:rgba(255,255,255,.16);color:#fff;border:0;
  border-radius:999px;padding:7px 16px;
  font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;
  flex-shrink:0;transition:background .13s;
}
.striscia-annulla button:hover{background:rgba(255,255,255,.3)}
.striscia-annulla button:disabled{opacity:.5}

@media (min-width:1101px){
  .striscia-annulla{bottom:28px}
}

/* ==========================================================================
   VESTE «YOU REMEMBER»
   Aggiunte in coda: cosi' le regole di sopra restano leggibili e queste
   vincono per ordine, senza alzare la specificita' con selettori inventati.
   ========================================================================== */

/* ---------- il marchio ----------
   Lo <span class="marchio-baule"> non porta piu' solo il segno: porta il
   blocco intero, segno piu' scritta, come immagine di sfondo. E' l'unico
   modo di avere «YOU» in grassetto e «REMEMBER» in tondo senza toccare i
   tredici file dove il nome e' scritto con <?= e(APP_NAME) ?>, che e' testo
   e non puo' avere due pesi dentro.

   La scritta negli SVG e' fatta di CONTORNI, non di testo: un'immagine di
   sfondo non si scarica Inter da Google Fonts, e con i contorni il marchio
   e' identico ovunque — anche offline, anche dove il carattere non c'e'.

   Il nome vero resta nel codice dopo lo span: lo spegne il font-size:0 del
   genitore, quindi i lettori di schermo e i motori lo trovano lo stesso.
   Le misure dello span sono in px apposta: un em su font-size zero vale zero. */
.marchio{font-size:0;gap:0;display:inline-flex;align-items:center;color:var(--notte)}
.marchio-baule{
  display:inline-block;flex:0 0 auto;
  width:217px;height:26px;          /* rapporto 8.34:1 */
  text-indent:-999px;overflow:hidden;white-space:nowrap;
  vertical-align:middle;
  background:url("../img/logo-orizzontale.svg") no-repeat left center/contain;
}
/* Piu' su, in testata e nel cassetto, il corpo era alzato con un selettore
   a due classi: pesa piu' del mio .marchio e vincerebbe, rimettendo in pagina
   il nome scritto accanto al blocco. Lo azzero con lo stesso peso. */
.barra-interna .marchio,
.cassetto-testa .marchio{font-size:0}
.barra-interna .marchio-baule{width:200px;height:24px}
.cassetto-testa .marchio-baule{width:192px;height:23px}
.documento-testa .marchio-baule{width:184px;height:22px}

/* in gestione il blocco e' piu' piccolo, e accanto resta la pastiglia
   «gestione»: quella e' in rem, quindi il font-size:0 del genitore non la
   tocca. Le regole di sopra le rialzano il corpo: qui lo rimetto a zero. */
.barra-admin .marchio{font-size:0}
.barra-admin .marchio-baule{width:175px;height:21px}

/* pagine d'ingresso: il blocco verticale, segno sopra e scritta sotto,
   come nel file originale */
.marchio--grande{font-size:0;display:block;text-align:center}
.marchio--grande .marchio-baule{
  width:262px;height:168px;          /* rapporto 1.56:1 */
  background-image:url("../img/logo-verticale.svg");
  background-position:center;
}

/* ---------- titoli: Inter, non piu' una serif ---------- */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em}
h1{font-size:2rem}
h2{font-size:1.45rem}
h3{font-size:1.15rem}

/* ---------- pagine d'ingresso ----------
   Niente piu' cielo stellato viola: un azzurro che sale dal blu notte, con
   qualche riflesso chiaro. La scheda bianca sopra diventa la cosa piu'
   luminosa dello schermo, ed e' li' che si guarda. */
.pagina-ingresso{
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 14%, rgba(255,107,74,.30) 0 2.5px, transparent 4px),
    radial-gradient(circle at 66% 36%, rgba(255,255,255,.12) 0 1.5px, transparent 3px),
    radial-gradient(circle at 26% 72%, rgba(255,255,255,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 78%, rgba(255,107,74,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 120% 0%, rgba(30,136,255,.55), transparent 62%),
    linear-gradient(168deg,#0D1B2A 0%,#0B3B66 52%,#1668D6 100%);
}
.carta-magica{
  border:1px solid var(--carta-scura);
  border-radius:22px;
  box-shadow:0 24px 60px -18px rgba(10,37,64,.45);
}

/* ---------- bottoni: piatti, come nel kit ----------
   Lo zoccolo pieno («0 5px 0») era del vestito di prima. Qui l'ombra e'
   morbida e il rilievo lo fa il colore. */
.bottone{border-radius:14px;font-weight:700;letter-spacing:.01em;padding:13px 24px}
.bottone--sole{background:var(--prugna);color:#fff;box-shadow:0 6px 16px -4px rgba(30,136,255,.55)}
.bottone--sole:hover{background:#1668D6;color:#fff}
.bottone--pieno{background:var(--notte);color:#fff;box-shadow:0 6px 16px -6px rgba(13,27,42,.45)}
.bottone--pieno:hover{background:#16324B}
.bottone--tenue{background:var(--prugna-tenue);color:var(--prugna);box-shadow:none}
.bottone--tenue:hover{background:#D6E8FF}
.bottone--fantasma{border:1.5px solid var(--prugna);color:var(--prugna);background:transparent}
.bottone--fantasma:hover{background:var(--prugna-tenue);color:var(--prugna)}
.bottone--corallo{background:var(--miele);color:#fff;box-shadow:0 6px 16px -4px rgba(255,107,74,.5)}
.bottone--corallo:hover{background:var(--miele-forte);color:#fff}
.bottone:hover{transform:translateY(-1px)}
.bottone:active{transform:translateY(0)}

/* ---------- cornici: il telaio ambrato diventa un filo azzurrino ---------- */
.mappa-guscio,.barra-scelta{border:1px solid var(--carta-scura)}
.invito-installa{border:1px solid rgba(255,255,255,.16);background:var(--notte);border-radius:16px}
.invito-installa__no{color:#9FC6F0}

/* ---------- barra bassa: la forma del wireframe ----------
   Cinque posti: Baule, Ricordi, il tondo che aggiunge, Cerca, Profilo.
   Bianca e non piu' grigio-vetro: nel kit la barra e' una superficie
   bianca con un filo di bordo, e la voce attiva si riconosce dal colore,
   non da una pastiglia. */
@media (max-width:820px){
  .barra-bassa{
    background:#fff;
    border-top:1px solid var(--carta-scura);
    box-shadow:0 -1px 14px rgba(13,27,42,.06);
    padding:4px 6px calc(4px + env(safe-area-inset-bottom));
    align-items:center;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    .barra-bassa{
      background:rgba(255,255,255,.92);
      -webkit-backdrop-filter:blur(22px) saturate(180%);
      backdrop-filter:blur(22px) saturate(180%);
    }
  }
  .barra-bassa a{
    color:#6B7C8D;font-size:.66rem;font-weight:600;letter-spacing:.01em;
    background:transparent;border-radius:12px;padding:8px 2px 6px;gap:3px;
  }
  .barra-bassa a svg{color:var(--notte);stroke:currentColor}
  .barra-bassa a.attiva,
  .barra-bassa a.attiva svg{color:var(--prugna);stroke:currentColor}
  .barra-bassa a.attiva{background:transparent;font-weight:700}
  .barra-bassa a .voce-icona{width:24px;height:24px}

  /* il tondo che aggiunge: azzurro pieno, sollevato sopra la barra */
  .barra-bassa__piu{
    background:var(--prugna);color:#fff !important;
    width:56px;height:56px;border-radius:50%;
    font-size:2rem;font-weight:300;
    margin:-24px 4px 0;
    box-shadow:0 8px 20px -4px rgba(30,136,255,.55);
  }
  .barra-bassa__piu:hover{background:#1668D6}
  .barra-bassa__piu span{margin-top:-3px}
  .contenuto{padding-bottom:110px}

  /* in alto le stesse voci sarebbero doppie: restano solo le altre */
  .barra-interna .menu a[href$="cerca.php"],
  .barra-interna .menu a[href$="profilo.php"]{display:none}
}

/* ---------- barra alta ---------- */
.barra-alta{border-bottom:1px solid var(--carta-scura)}
.menu a.attivo{background:var(--prugna);color:#fff}
.menu a:hover{background:var(--prugna-tenue)}

/* ---------- campi: bordo azzurrino, fuoco azzurro ---------- */
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=number],input[type=date],input[type=tel],select,textarea{
  border-radius:12px;
}


/* ---------- icone a due colori ----------
   Il tratto portante e' currentColor, cosi' la voce spenta e quella accesa si
   colorano da sole. L'azzurro e il corallo arrivano da queste due classi:
   dove servono spente — la barra bassa, il bottone della lente — basta
   riportarle a currentColor invece di rifare venti icone. */
.voce-icona .ic-blu{stroke:var(--prugna)}
.voce-icona .ic-cor{stroke:var(--miele)}
.voce-icona .pieno{stroke:none}
.voce-icona .ic-blu.pieno{fill:var(--prugna)}
.voce-icona .ic-cor.pieno{fill:var(--miele)}

/* In fondo restano a colori, come i glifi del foglio: azzurro sull'angolo,
   dettaglio corallo. Cambia solo il tratto portante — blu notte quando la
   voce e' spenta, azzurro quando e' accesa — perche' e' currentColor.
   L'etichetta sotto fa il resto: grigia, oppure azzurra e piu' grassa. */

/* ==========================================================================
   RACCOLTE EVENTO
   Le classi che il foglio non aveva. Tutto il resto — pannello, modulo,
   bottone, avviso, codice-grande, tabella — e' roba che c'era gia': una
   pagina nuova non e' una buona ragione per inventarsi un vocabolario nuovo.
   ========================================================================== */

.occhiello{
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:700;
  color:var(--prugna);margin:0 0 6px;
}
.titolo-sezione{font-size:1.15rem;margin:30px 0 14px}
.allinea-destra{text-align:right}
.modulo-inline{display:inline-block;margin:0 0 6px}
.fila-bottoni{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ---------- l'elenco delle raccolte ---------- */
.griglia-raccolte{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;margin-bottom:26px;
}
.scheda-raccolta{
  display:block;text-decoration:none;color:inherit;
  background:var(--bianco);border:1px solid var(--carta-scura);
  border-radius:var(--raggio);padding:20px;box-shadow:var(--ombra-morbida);
  transition:transform .12s ease, box-shadow .12s ease;
}
.scheda-raccolta:hover{transform:translateY(-2px);box-shadow:var(--ombra)}
.scheda-raccolta h2{font-size:1.1rem;margin:0 0 10px;line-height:1.25}
.scheda-raccolta p{margin:0}
.scheda-raccolta--chiusa{opacity:.62}
.codice-scheda{
  font-weight:800;letter-spacing:.22em;font-size:1.05rem;
  color:var(--prugna);margin:0 0 6px !important;
}

/* ---------- il riquadro del codice, con il QR accanto ----------
   Su schermo stretto il QR va sopra: a 320 px affiancare un quadrato di
   190 px e una colonna di testo vuol dire due colonne illeggibili. */
.pannello--codice{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.qr-riquadro{
  flex:0 0 auto;background:#fff;padding:10px;border-radius:var(--raggio-p);
  border:1px solid var(--carta-scura);line-height:0;
}
.qr-riquadro svg{display:block}
.codice-blocco{flex:1 1 240px;min-width:0}
.codice-blocco .codice-grande{margin:4px 0 14px}
.link-raccolta{margin:0 0 4px}
.link-raccolta input{
  width:100%;font-size:.92rem;font-weight:600;color:var(--notte-morbido);
  background:var(--carta);border:1px solid var(--carta-scura);
  border-radius:var(--raggio-s);padding:10px 12px;
}

/* ---------- le fotografie della raccolta ---------- */
.griglia-ospite{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:6px;margin:14px 0 18px;
}
.griglia-ospite--larga{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.griglia-ospite img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border-radius:var(--raggio-s);background:var(--carta-scura);
}

/* ---------- la porta degli invitati ---------- */
.titolo-raccolta{font-size:1.6rem;margin:0 0 4px;line-height:1.2}
.messaggio-raccolta{
  color:var(--notte-morbido);line-height:1.6;margin:12px 0 20px;
  padding:14px 16px;background:var(--prugna-tenue);border-radius:var(--raggio-p);
}
.esito-carico{
  margin-top:16px;text-align:left;max-height:230px;overflow-y:auto;
  border-top:1px solid var(--carta-scura);padding-top:12px;
}
.riga-carico{
  font-size:.86rem;color:var(--notte-morbido);padding:6px 0;
  border-bottom:1px solid var(--carta-scura);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.riga-carico:last-child{border-bottom:0}
.riga-carico--ok{color:var(--menta);font-weight:600}
.riga-carico--no{color:var(--corallo);font-weight:600}
.riga-carico--avviso{color:var(--miele-scuro)}

/* il richiamo sotto la carta: chi arriva dal QR non sa che cosa sia YOU REMEMBER */
.carta-richiamo{
  max-width:440px;margin:18px auto 0;text-align:center;
  color:rgba(255,255,255,.92);font-size:.92rem;line-height:1.55;
}
.carta-richiamo p{margin:0 0 6px}
.carta-richiamo .nota-minuta{color:rgba(255,255,255,.72)}
.carta-richiamo a{color:#fff;font-weight:700;text-decoration:underline}

/* il richiamo alle raccolte nella schermata di accesso */
.richiamo-raccolta{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--carta-scura);
}