/* La scocca Vetrina: barra alta in vetro, sidebar su computer, rotaia a
   pillole su telefono, menu account in alto a destra.

   Le variabili colore (--ink, --muted, --cyan, ...) NON sono definite qui:
   le dichiara tema.css, cosi' la scocca vive nel tema della piattaforma. */

/* ==========================================================================
   La barra alta: sticky, in vetro. C'e' su ogni pagina dell'area di lavoro.
   ========================================================================== */

.scocca-alta {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  /* Va a capo: su telefono la rotaia si prende una riga tutta sua. */
  flex-wrap: wrap;
  min-height: 52px;
  padding: 6px 14px;
  background: var(--vetro);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.scocca-respiro { flex: 1; }

/* Il marchio nella barra: solo dove la sidebar non c'e'. Su computer
   sarebbe il nome scritto due volte a un dito di distanza; su telefono,
   senza, non ci sarebbe niente che dica dove si e' ne' come tornare a
   casa. */
.marchio-alto {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
.marchio-alto .quadro {
  width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0;
  background: var(--cyan);
}
@media (min-width: 900px) { .marchio-alto { display: none; } }
/* E su un telefono stretto resta il solo quadrato, come sul marchio delle
   pagine pubbliche. La barra alta adesso porta anche la freccia indietro e il
   monogramma -- due cose che prima non c'erano -- e con il nome per esteso la
   fila andava a capo: i comandi di destra finivano su una seconda riga, sopra
   la rotaia, dove nessuno li cerca. */
@media (max-width: 520px) {
  .marchio-alto { font-size: 0; gap: 0; }
}

/* Il pulsante che chiude e riapre la sidebar: solo da computer, dove una
   sidebar c'e'. Chiusa, le voci tornano nella barra come pillole — la
   navigazione cambia posto, non sparisce — e la pagina si prende tutta
   la larghezza. */
.fianco-toggle {
  display: none;
  width: 36px; height: 36px; flex-shrink: 0;
  align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; color: var(--ink-tenue);
  background: none; border: 0; border-radius: 9px;
}
.fianco-toggle:hover { background: rgba(var(--ombra-rgb), .06); }
@media (min-width: 900px) {
  .fianco-toggle { display: inline-flex; }
  .fianco-chiuso .scocca-fianco { display: none; }
  .fianco-chiuso.con-scocca body { padding-left: 0; }
  /* Chiusa la sidebar, le voci tornano nella barra: qui in linea, non a
     capo -- su uno schermo largo lo spazio per sei pillole c'e'.

     La rotaia e' l'ULTIMO figlio della barra (a capo, su telefono, deve
     prendersi una riga sua), quindi in linea finiva DOPO le preferenze e
     l'account: i tre comandi che su ogni altra schermata stanno all'estrema
     destra si ritrovavano in mezzo alla barra, spostati di una quantita' che
     dipende da quante pillole ci sono. Con `order` la rotaia passa avanti e
     loro tornano in fondo, dove chi li cerca li cerca sempre. */
  .fianco-chiuso .scocca-rotaia { display: flex; flex: 1 1 auto; order: 2; }
  .fianco-chiuso .aiuto-btn,
  .fianco-chiuso #preferenze,
  .fianco-chiuso .nav-account { order: 3; }
  /* E il respiro non serve piu': a spingere i comandi a destra ci pensa la
     rotaia, che cresce. Lasciandolo, si prenderebbe lui lo spazio e le
     pillole resterebbero schiacciate contro il marchio. */
  .fianco-chiuso .scocca-respiro { display: none; }
}

/* Su computer la barra parte gia' dopo la sidebar: la sposta il padding
   del body, e spostarla anche qui la manderebbe due volte a destra. */

/* ==========================================================================
   La sidebar: computer. Voce attiva su pastiglia zafferanata.
   ========================================================================== */

.scocca-fianco {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 61;
  width: 232px;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
@media (max-width: 899px) { .scocca-fianco { display: none; } }

.scocca-marchio {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
  padding: 4px 10px 18px;
}
.scocca-marchio .quadro {
  width: 13px; height: 13px; border-radius: 4px;
  background: var(--cyan);
}

.scocca-voci { display: flex; flex-direction: column; gap: 3px; }
.fianco-voce {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
  padding: 9px 12px; border-radius: 10px;
  transition: background .15s;
}
.fianco-voce:hover { background: rgba(var(--ombra-rgb), .05); }
.fianco-voce[aria-current="page"] {
  background: var(--velo-cyan); color: var(--cyan-chiaro); font-weight: 700;
}

/* Il segno accanto all'etichetta. Non e' decorazione: quattro righe di solo
   testo in cima a una colonna alta quanto lo schermo lasciavano sotto un
   vuoto lungo il doppio di loro, e la sidebar sembrava incompleta. Con un
   peso a sinistra le voci si scandagliano con l'occhio invece che leggendole,
   e sono gli stessi segni dell'hub: l'orbita e la barra parlano la stessa
   lingua. */
.fianco-segno {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  color: var(--muted); background: rgba(var(--ombra-rgb), .05);
  transition: background .15s, color .15s;
}
.fianco-voce:hover .fianco-segno { color: var(--ink-tenue); }
.fianco-voce[aria-current="page"] .fianco-segno {
  background: var(--cyan); color: var(--su-accento);
}

/* Il fondo della colonna: chi sei, e la via per la scheda account.
   `margin-top: auto` lo spinge in basso qualunque cosa ci sia sopra -- e
   quando le voci sono tante e traboccano, il margine automatico si azzera da
   solo e la colonna torna a scorrere. */
.fianco-conto { margin-top: auto; padding-top: 14px; }
.fianco-conto:empty { display: none; }
.fianco-conto-chi {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 12px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-bright);
  transition: border-color .15s, box-shadow .15s;
}
.fianco-conto-chi:hover { border-color: var(--cyan); box-shadow: var(--alone-cyan); }
.fianco-conto-testo { min-width: 0; }
.fianco-conto-email {
  display: block; font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fianco-conto-piano {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--cyan-chiaro);
}

/* ==========================================================================
   La rotaia: telefono. Le pillole si sfogliano ad aggancio, come la barra
   delle categorie del menu' al tavolo; la sezione si cambia toccando.
   ========================================================================== */

.scocca-rotaia {
  display: flex; gap: 8px;
  /* Una riga tutta sua: schiacciata fra le preferenze e l'account ci
     stava una pillola e mezza, e i servizi non si vedevano. */
  flex: 0 0 100%; min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px 0 4px;
  /* Arrivati in fondo, il dito NON deve sfondare: senza questo il gesto
     prosegue nel browser e diventa «indietro/avanti» nella cronologia --
     si sfogliava la barra e ci si ritrovava su un'altra pagina. */
  overscroll-behavior-x: contain;
}
.scocca-rotaia::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .scocca-rotaia { display: none; } }

/* E la pagina intera non risponde al gesto laterale: la navigazione a
   scorrimento del browser qui non deve esistere, ne' dalla rotaia ne' dal
   corpo della pagina. */
.con-scocca { overscroll-behavior-x: none; }

.rotaia-voce {
  scroll-snap-align: center;
  flex: 0 0 auto;
  text-decoration: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink);
  background: rgba(var(--ombra-rgb), .05);
  border-radius: 999px;
  padding: 9px 15px;
  min-height: 38px;
  display: inline-flex; align-items: center;
  transition: background .2s, color .2s;
}
.rotaia-voce[aria-current="page"] { background: var(--ink); color: var(--bg); }

/* ==========================================================================
   Lo spazio della pagina sotto la scocca.
   ========================================================================== */

/* La sidebar sposta il contenuto, non lo copre. La classe sta sull'<html>
   perche' la mette nav.js durante il parse: sul <body> arriverebbe dopo il
   primo disegno e la pagina salterebbe di lato. */
@media (min-width: 900px) {
  .con-scocca body { padding-left: 232px; }
}

/* ==========================================================================
   Il menu account: avatar in alto a destra, tendina sotto.
   ========================================================================== */

.nav-account { position: relative; }

/* Placeholder finche' non sappiamo se c'e' una sessione: occupa lo spazio
   dell'avatar, cosi' la barra non salta quando il menu compare. */
.nav-account:empty { width: 38px; height: 38px; }

.nav-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 999px;
  padding: 3px;
  cursor: pointer;
  transition: background .15s;
}
.nav-trigger:hover { background: rgba(var(--ombra-rgb), .06); }
.nav-account.open .nav-trigger { background: rgba(var(--ombra-rgb), .08); }

.nav-avatar {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  font-size: 14px; font-weight: 700; text-transform: uppercase;
}
/* Senza sessione: la sagoma di una persona su fondo tenue. Disegnata a
   tratto (nessun riempimento sul corpo) cosi' resta leggera accanto
   all'avatar pieno di chi e' entrato. */
.nav-avatar.anon {
  background: var(--surface-2); color: var(--ink-tenue);
  border: 1px solid var(--line-bright);
}
.nav-avatar.anon svg { width: 19px; height: 19px; display: block; }
.nav-avatar.anon circle { fill: currentColor; }
.nav-avatar.anon path {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.nav-trigger:hover .nav-avatar.anon { border-color: var(--cyan); color: var(--cyan-chiaro); }

.nav-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 250px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--ombra);
  padding: 6px;
  display: none;
  z-index: 70;
  /* Il tetto all'altezza lo mette nav.js misurando lo spazio vero sotto il
     pulsante: qui c'e' solo cosa succede quando quel tetto si raggiunge --
     si scorre il menu, non la pagina dietro. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Quando sotto non ci sta, si apre verso l'alto: stesso menu, altro verso. */
.nav-account.apre-su .nav-menu { top: auto; bottom: calc(100% + 8px); }
.nav-account.open .nav-menu { display: block; }

/* Senza sessione: «Crea account» e' un pulsante vero, non un'icona da
   indovinare. «Accedi» gli sta accanto e sparisce quando lo schermo e'
   stretto -- chi ha gia' un account sa dove trovarlo. */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px; border-radius: 999px;
  background: var(--cyan); color: var(--su-cyan, #04121a);
  font-size: 14px; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover { filter: brightness(1.08); }
.nav-login {
  display: inline-flex; align-items: center;
  padding: 8px 10px; margin-right: 4px;
  color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.nav-login:hover { color: var(--ink); }
@media (max-width: 430px) { .nav-login { display: none; } }

.nav-head { padding: 10px 12px 12px; }
.nav-head-email {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-head-plan {
  display: inline-block; margin-top: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px;
}
.nav-head-plan.premium { color: var(--violet); background: var(--velo-violet); }
.nav-head-plan.free { color: var(--muted); background: var(--surface-2); }

.nav-item {
  display: block; width: 100%; text-align: left;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .15s;
}
.nav-item:hover { background: rgba(var(--ombra-rgb), .05); }
.nav-item[aria-current="page"] { background: var(--velo-cyan); color: var(--cyan-chiaro); font-weight: 700; }
.nav-item.accent { color: var(--cyan-chiaro); font-weight: 700; }
.nav-item.danger { color: var(--danger); }
.nav-item.danger:hover { background: var(--velo-danger); }
/* «Esci da tutti i dispositivi»: e' un'azione di sicurezza, non una voce di
   navigazione. Sottotono apposta -- si trova quando serve, senza chiamare
   l'attenzione ogni volta che si apre il menu. */
.nav-item.quieto { color: var(--muted); }
.nav-item.quieto:hover { color: inherit; }

.nav-sep { border-top: 1px solid var(--line); margin: 6px 10px; }

/* ==========================================================================
   L'AREA DI LAVORO E' CENTRATA.
   ========================================================================== */

/* Tutte le pagine di lavoro condividono lo stesso impianto — testata,
   schede, riquadri, pulsanti — e stanno dentro una colonna stretta: al
   centro le scritte sono simmetriche e l'occhio non deve rincorrere il
   bordo sinistro. Le regole stanno QUI e non in otto pagine: una decisione
   che vale ovunque si scrive una volta, o alla nona pagina qualcuna resta
   indietro.

   `.con-scocca` e' la classe che nav.js mette sull'<html> delle sole pagine
   di lavoro: le pagine pubbliche (home, accedi, privacy) non la ricevono e
   restano com'erano.

   Fanno eccezione i campi in cui si SCRIVE: il testo resta a filo sinistro,
   perche' scrivere dentro un campo centrato fa saltare il cursore a ogni
   lettera. Centrata e' l'etichetta sopra. */
.con-scocca h1,
.con-scocca h2,
.con-scocca .sub,
.con-scocca .dove,
.con-scocca .aiuto,
.con-scocca .hint,
.con-scocca .nota,
.con-scocca label,
.con-scocca .vuoto,
.con-scocca .empty,
.con-scocca .msg,
.con-scocca .card,
.con-scocca .panel,
.con-scocca .gruppo-aspetto,
.con-scocca .stato,
.con-scocca .striscia,
.con-scocca .sintesi,
.con-scocca .spiega-gruppo,
.con-scocca .scorciatoia,
.con-scocca .group-title,
.con-scocca .sezione,
.con-scocca .spiega,
.con-scocca .esito,
.con-scocca .avviso,
.con-scocca .qr-testo,
.con-scocca .kpi { text-align: center; }

/* Le file di pulsanti e di schede: al centro anche loro, non solo il
   testo che ci sta dentro. Un pulsante centrato in una riga a filo
   sinistro sarebbe centrato per finta. */
.con-scocca .azioni,
.con-scocca .actions,
.con-scocca .scelte,
.con-scocca .tabs,
.con-scocca .downloads,
.con-scocca .foto-azioni,
.con-scocca .marchio-riga,
.con-scocca .qr-blocco,
.con-scocca .foto-blocco,
.con-scocca .riga-campi,
.con-scocca .periodo,
.con-scocca .qr-azioni,
.con-scocca .gruppo,
.con-scocca .sintesi,
.con-scocca .premium-riga,
.con-scocca .file-campo,
.con-scocca .link-row { justify-content: center; }

/* La testata di una schermata: il tasto indietro resta ancorato a
   sinistra (e' un gesto, ha un posto fisso) e il titolo sta in mezzo alla
   colonna. Senza il compenso a destra il titolo sarebbe centrato rispetto
   allo spazio che avanza, cioe' spostato di mezzo pulsante. */
.con-scocca .testa { justify-content: center; }
.con-scocca .testa > div:not(.indietro) { flex: 1; }
/* Sempre, non solo quando l'indietro c'e': quello nascosto resta al suo
   posto (visibility, non display), quindi lo spazio da compensare a destra
   c'e' comunque -- ed e' per questo che il titolo non balla fra un
   livello e l'altro. */
.con-scocca .testa::after { content: ""; flex-shrink: 0; width: 42px; }

/* Gli elenchi: il titolo della riga in mezzo, con frecce e prezzo che
   restano ai lati -- sono ancore, non testo da leggere. */
.con-scocca .riga .apri,
.con-scocca .qr-item .qr-meta,
.con-scocca .link-item .link-name { text-align: center; }

/* CENTRATO VUOL DIRE IN MEZZO ALLA RIGA, non in mezzo allo spazio che
   avanza. Le frecce per spostare stanno a sinistra: senza un contrappeso
   il nome della categoria finisce spostato a destra della loro larghezza,
   e in un elenco di titoli quello spostamento si legge tutto insieme.

   I due lati hanno percio' la STESSA larghezza minima: a sinistra le
   frecce, a destra il prezzo -- e dove il prezzo non c'e' (categorie,
   voci di una pagina) il posto lo tiene un contrappeso vuoto. */
.con-scocca .riga { --lato: 58px; }
.con-scocca .riga > .frecce { flex: 0 0 auto; min-width: var(--lato); }
.con-scocca .riga > .prezzo { min-width: var(--lato); text-align: right; }
.con-scocca .riga:has(> .frecce):not(:has(> .prezzo))::after {
  content: ""; flex: 0 0 var(--lato);
}

/* Stessa cosa nelle intestazioni che si aprono: il triangolino sta a
   sinistra e prima spingeva il titolo di mezzo glifo. Fuori dal flusso,
   il titolo e' centrato nel riquadro e il triangolino resta al suo posto.

   I due rientri sono UGUALI e larghi quanto basta al triangolino: senza,
   un titolo lungo («Personalizza partendo dal tuo PDF») si allargherebbe
   fin sotto la freccia e le si stamperebbe sopra. */
.con-scocca .gruppo-tendina > summary.group-title {
  position: relative; padding-inline: 36px;
}
.con-scocca .gruppo-tendina > summary.group-title::before {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
}
.con-scocca .gruppo-tendina[open] > summary.group-title::before {
  transform: translateY(-50%) rotate(90deg);
}

/* E nelle strisce di stato, dove il pallino fa da spia a sinistra. Solo
   quando la striscia e' fatta di sole parole: se porta anche un pulsante,
   i due lati hanno pesi diversi e un contrappeso fisso mentirebbe. */
.con-scocca .stato:not(:has(button)) .testo,
.con-scocca .striscia:not(:has(button)) .testo { text-align: center; }
.con-scocca .stato:not(:has(button))::after,
.con-scocca .striscia:not(:has(button))::after {
  content: ""; flex: 0 0 8px;
}

/* Le miniature dei temi e le caselle della copertina: al centro della
   colonna invece che appoggiate al bordo. */
.con-scocca .temi,
.con-scocca .griglia-pos { justify-content: center; margin-inline: auto; }

/* Quello in cui si scrive resta a sinistra: il cursore deve stare fermo. */
.con-scocca input[type="text"],
.con-scocca input[type="url"],
.con-scocca input[type="email"],
.con-scocca input[type="password"],
.con-scocca input[type="search"],
.con-scocca textarea,
.con-scocca select { text-align: left; }

/* ==========================================================================
   LE LINGUE DI UN MENU': una riga, non una sezione.
   ========================================================================== */

.lingue-riga {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: wrap; margin: 14px 0 0;
}
.lingue-eti {
  font-size: 12.5px; color: var(--muted); margin-right: 2px;
}
.lingua-pill {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; cursor: pointer;
  padding: 6px 11px; border-radius: 999px;
  color: var(--ink-tenue); background: var(--surface-2);
  border: 1px solid var(--line-bright);
  display: inline-flex; align-items: center; gap: 5px;
  transition: border-color .18s, color .18s;
}
.lingua-pill:hover { border-color: var(--cyan); color: var(--cyan-chiaro); }
/* L'originale non e' un pulsante: e' il punto di partenza, e da li' non si
   va da nessuna parte. */
.lingua-pill.originale {
  cursor: default; background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.lingua-pill.aggiungi { font-family: inherit; letter-spacing: 0; font-weight: 600; }
/* Il pallino dice che l'originale e' cambiato dopo la traduzione: non e' un
   errore, e' una cosa da rifare quando si ha un minuto. */
.lingua-pill.indietro { border-color: var(--bordo-violet); color: var(--violet); }
.lingua-pill .segnale { font-size: 15px; line-height: 0; }

.lingue-elenco { list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 12px; }
.lingue-elenco li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  text-align: left;
}
.lingue-elenco b { font-size: 14.5px; }
.lingue-elenco span { font-size: 12.5px; color: var(--muted); }
.lingue-elenco .lingua-azioni { margin-left: auto; display: flex; gap: 6px; }
.lingue-aggiungi-eti {
  font-size: 13px; font-weight: 600; color: var(--ink-tenue);
  margin: 0 0 10px; text-align: center;
}
.lingue-scelte { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* La revisione riga per riga: l'italiano a sinistra, la traduzione a
   destra. Due colonne perche' si legge confrontando -- una sotto l'altra
   costringerebbe a ricordare la riga di sopra mentre si scrive quella di
   sotto. */
.guida.largo { width: min(880px, 100%); }
.rev-elenco {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.rev-riga {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
}
@media (max-width: 620px) { .rev-riga { grid-template-columns: 1fr; } }
.rev-tipo {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 3px;
}
.rev-da { min-width: 0; }
.rev-testo { font-size: 14px; color: var(--ink-tenue); line-height: 1.45; }
.rev-a input, .rev-a textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--line-bright); background: var(--surface);
  resize: vertical;
}
.rev-a input:focus, .rev-a textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: var(--glow-cyan);
}
/* Una riga toccata da una persona si vede: e' quella che vale di piu'. */
.rev-riga.corretta { border-color: var(--bordo-success); background: var(--velo-success); }

/* ==========================================================================
   LA CODA DI LETTURA: i piatti letti da una foto, prima del menù.
   Stessa forma della revisione delle traduzioni (.rev-*), qui sopra.
   ========================================================================== */
.let-bottoni { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.let-restanti { font-size: 12px; color: var(--muted); font-weight: 400; }

/* L'avviso nella vista del menù: c'è qualcosa da rivedere. */
.let-avviso {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin: 12px 0; padding: 12px 14px; border-radius: 12px;
  background: var(--velo-cyan); border: 1px solid var(--bordo-cyan);
  font-size: 14px; color: var(--ink);
}

/* La foto: il file del telefono, non una copia sul server. */
.let-foto { display: block; max-width: 100%; max-height: 50vh; margin: 8px auto;
            border-radius: 10px; object-fit: contain; }
.let-foto-box { margin: 0 0 16px; text-align: left; }
.let-foto-box summary { cursor: pointer; font-size: 14px; color: var(--ink-tenue); }

/* L'intestazione di sezione dentro l'elenco. */
.let-cat {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding: 8px 2px 0;
}

/* A sinistra: cosa c'era scritto, e cosa va guardato. */
.let-letto { display: block; margin-top: 6px; font-family: var(--mono);
             font-size: 12.5px; color: var(--ink-tenue); }
.let-dubbio {
  display: block; margin-top: 6px; padding: 5px 9px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.4;
  color: var(--testo-pericolo); background: var(--velo-danger);
  border: 1px solid var(--bordo-danger);
}

/* A destra: i campi. */
.let-campo { display: block; margin-bottom: 8px; }
.let-campo > span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.let-var { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; margin-bottom: 6px; }
.let-var input { width: 100%; font-family: inherit; font-size: 14px; color: var(--ink);
                 padding: 9px 11px; border-radius: 9px;
                 border: 1px solid var(--line-bright); background: var(--surface); }
.let-azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.let-esito { font-size: 13.5px; font-weight: 600; color: var(--ink-tenue); }

/* Le decise si distinguono a colpo d'occhio: la coda si scorre per trovare
   quelle che restano. */
.let-riga.accettata { border-color: var(--bordo-success); background: var(--velo-success); }
.let-riga.accettata .let-esito { color: var(--testo-successo); }
.let-riga.scartata { opacity: .5; }
.let-finito { font-weight: 600; color: var(--testo-successo); }

/* La dettatura: un esempio da leggere, e l'orologio che corre. */
.let-esempio {
  margin: 12px 0; padding: 10px 14px; border-radius: 10px;
  background: var(--velo-cyan); border: 1px solid var(--bordo-cyan);
  font-size: 14px; font-style: italic; color: var(--ink); text-align: left;
}
.let-orologio {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 8px 0; font-family: var(--mono); font-size: 28px; color: var(--ink);
}
.let-rec {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--testo-pericolo); animation: let-pulsa 1.2s ease-in-out infinite;
}
@keyframes let-pulsa { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .let-rec { animation: none; } }


/* ==========================================================================
   I RIMANDI FRA SEZIONI: dove si fa una cosa che si cerca qui.
   ========================================================================== */

/* Una riga, non una scheda: indica una strada, non offre un'azione. */
.rimando {
  display: flex; align-items: flex-start; gap: 11px; text-align: left;
  margin: 0 auto 16px; max-width: 66ch;
  padding: 13px 16px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-tenue);
  background: var(--velo-cyan); border: 1px solid var(--bordo-cyan);
}
.rimando .ico { color: var(--cyan-chiaro); font-size: 15px; line-height: 1.4; }
.rimando b { color: var(--ink); }

/* «Come si fa»: i passi di una cosa che NON si fa in questa pagina. Non e'
   un pulsante «crea» perche' non si crea da qui, ed e' proprio quello che
   deve risultare chiaro. */
.come-si-fa {
  margin: 22px auto 0; max-width: 62ch;
  padding: 24px 26px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
}
.come-si-fa h2 {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  margin: 0 0 18px; text-align: center;
}
.come-passi {
  list-style: none; counter-reset: p; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.come-passi li {
  counter-increment: p; display: grid; grid-template-columns: 26px 1fr;
  gap: 12px; text-align: left;
}
.come-passi li::before {
  content: counter(p);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--su-accento); background: var(--cyan);
}
.come-passi b, .come-passi span { grid-column: 2; display: block; }
.come-passi b { font-size: 14.5px; color: var(--ink); }
.come-passi span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.come-porte { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ==========================================================================
   LA GUIDA: il punto interrogativo nella barra, e la finestra che apre.
   ========================================================================== */

.aiuto-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line-bright); border-radius: 999px;
  transition: color .18s, border-color .18s;
}
.aiuto-btn:hover { color: var(--cyan-chiaro); border-color: var(--cyan); }

.guida-velo {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--velo-modale);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: guida-entra .2s ease;
}
.guida {
  position: relative;
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  padding: 30px 30px 26px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--ombra);
}
.guida h2 {
  font-family: var(--display); font-size: 24px; font-weight: 600;
  margin: 0 0 6px; letter-spacing: -.02em; text-align: center;
}
.guida-sotto {
  color: var(--muted); font-size: 14.5px; margin: 0 0 22px; text-align: center;
}
.guida-chiudi {
  position: absolute; right: 14px; top: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line-bright);
}
.guida-chiudi:hover { color: var(--ink); border-color: var(--cyan); }

/* I passi sono NUMERATI perche' sono davvero una sequenza: si fanno in
   quest'ordine, e saltarne uno lascia a meta'. */
.guida-passi {
  list-style: none; counter-reset: passo; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.guida-passi li {
  counter-increment: passo;
  display: grid; grid-template-columns: 30px 1fr; gap: 14px;
  text-align: left;
}
.guida-passi li::before {
  content: counter(passo);
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--su-accento); background: var(--cyan);
}
.guida-passi b, .guida-passi span { grid-column: 2; display: block; }
.guida-passi b { font-size: 15.5px; color: var(--ink); }
.guida-passi span { font-size: 14px; color: var(--ink-tenue); line-height: 1.55; }
.guida-coda {
  margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); text-align: center;
}

@keyframes guida-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .guida-velo { animation: none; } }

/* ==========================================================================
   GLI AVVISI: una bolla sola, sempre nello stesso posto.

   Sta in BASSO al centro: il pollice ci arriva, l'occhio ci torna, e non
   copre la testata mentre si lavora. Il comportamento (quanto dura, cosa
   succede se l'errore si ripete) sta in avvisi.js.
   ========================================================================== */

/* Sopra tutto, e non per vezzo: la disposizione dei tavoli si apre a schermo
   pieno con un velo a 9999, e le finestre di chiedi.js stanno ancora piu' su.
   Una bolla che dice perche' un salvataggio non e' andato, nascosta sotto la
   cosa su cui si stava lavorando, e' una bolla che non esiste. */
.avvisi {
  position: fixed; z-index: 2147483100;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  width: min(94vw, 460px);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.avviso-bolla {
  pointer-events: auto; cursor: pointer;
  max-width: 100%;
  padding: 13px 18px; border-radius: 14px;
  font-size: 14.5px; font-weight: 500; line-height: 1.45;
  text-align: center;
  background: var(--ink); color: var(--bg);
  box-shadow: 0 12px 34px -10px rgba(var(--ombra-rgb), .5);
  animation: avviso-entra .26s cubic-bezier(.2, .8, .2, 1);
}
.avviso-bolla.ok { background: var(--success); color: var(--su-successo); }
.avviso-bolla.err { background: var(--danger); color: #fff; }
.avviso-bolla.via { animation: avviso-esce .24s ease forwards; }
/* La seconda volta di fila: un guizzo, perché l'occhio se n'era già andato. */
.avviso-bolla.ancora { animation: avviso-entra .26s cubic-bezier(.2,.8,.2,1), avviso-ancora .5s .26s ease; }

@keyframes avviso-entra {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes avviso-esce {
  to { opacity: 0; transform: translateY(8px) scale(.98); }
}
@keyframes avviso-ancora {
  0%, 100% { transform: none; }
  30% { transform: scale(1.035); }
  60% { transform: scale(.995); }
}
@media (prefers-reduced-motion: reduce) {
  .avviso-bolla, .avviso-bolla.ancora, .avviso-bolla.via { animation: none; }
}

/* ==========================================================================
   LA RIFINITURA: quello che rende le schermate di lavoro una cosa sola.

   Ogni pagina si porta il suo foglio, nato quando il sito era scuro: titoli
   con la sfumatura sul testo, pastiglie al neon, spigoli stretti. Qui sopra
   ci passa una mano sola -- carattere dei titoli, forma delle schede, dei
   campi e dei pulsanti -- e le quattro schermate tornano parenti senza
   riscriverne quattro fogli.
   ========================================================================== */

/* I titoli nel graziato caldo della piattaforma. La sfumatura sul testo era
   il trucco del tema scuro: sulla carta chiara si legge peggio del semplice
   inchiostro, e il titolo di una schermata di lavoro non deve brillare, deve
   dire dove sei. */
.con-scocca h1 {
  font-family: var(--display); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.14;
  background: none; color: var(--ink);
  -webkit-text-fill-color: currentColor;
}
.con-scocca h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }
/* Il sottotitolo: centrato anche come BLOCCO. Diverse pagine gli danno una
   larghezza massima (`max-width: 66ch`) senza centrarlo, e allora il testo
   si centra dentro un blocco che sta a sinistra -- il titolo in mezzo alla
   colonna e la riga sotto spostata di un pollice. Si vedeva, ed e' il genere
   di difetto che si nota senza saper dire cosa sia. */
.con-scocca .sub {
  font-size: 15.5px; color: var(--muted); margin-inline: auto;
}

/* Le schede: stessa curva, stesso filo, stessa ombra. E si sollevano di un
   pelo al passaggio, come le carte della home. */
.con-scocca .card,
.con-scocca .qr-item,
.con-scocca .scheda,
.con-scocca .gruppo-aspetto,
.con-scocca .riga {
  border-radius: 16px;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s, border-color .26s;
}
.con-scocca .card:hover,
.con-scocca .qr-item:hover,
.con-scocca .riga:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombra);
  border-color: var(--line-bright);
}

/* Le linguette in cima alle pagine: pastiglia chiara su fondo panna, come
   le due viste di un menu'. Erano una velatura accesa su fondo scuro. */
.con-scocca .tabs { border-radius: 999px; padding: 4px; gap: 4px; }
.con-scocca .tab {
  border-radius: 999px; font-weight: 600; padding: 10px 8px;
  transition: background .18s, color .18s, box-shadow .18s;
}
.con-scocca .tab.active {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--ombra); font-weight: 700;
}

/* I campi in cui si scrive: stessa curva delle schede, e un anello morbido
   quando prendono il fuoco. */
.con-scocca input[type="text"],
.con-scocca input[type="url"],
.con-scocca input[type="email"],
.con-scocca input[type="password"],
.con-scocca input[type="time"],
.con-scocca textarea,
.con-scocca select {
  border-radius: 12px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.con-scocca input:focus, .con-scocca textarea:focus, .con-scocca select:focus {
  background: var(--campo-fuoco);
}

/* I pulsanti: la stessa curva e lo stesso scatto elastico dappertutto. */
.con-scocca .btn {
  border-radius: 12px;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .22s,
              border-color .18s, color .18s, background .18s;
}
.con-scocca .btn:hover:not(:disabled):not(.btn-disabled) { transform: translateY(-1px); }
.con-scocca .btn:active { transform: translateY(1px); }

/* Il vuoto di una sezione senza niente dentro: un invito, non un errore. */
.con-scocca .vuoto, .con-scocca .empty {
  border-radius: 16px; padding: 38px 24px;
  background: var(--surface); border: 1px dashed var(--line-bright);
}

/* ==========================================================================
   LO STUDIO: editor a sinistra, telefono con l'anteprima a fianco.
   Lo usano l'editor dei menu' e quello delle pagine, allo stesso modo.
   ========================================================================== */

.lato-anteprima { display: none; }

/* Largo, non lungo: la colonna comanda la larghezza e l'altezza si tiene
   dentro lo schermo -- un'anteprima piu' ALTA dello schermo si scorrerebbe
   invece di guardarsi. */
.telefono {
  width: min(100%, 440px); aspect-ratio: 3 / 5; max-height: 80vh;
  margin: 0 auto; border: 9px solid var(--ink); border-radius: 38px;
  background: #fff; overflow: hidden; box-shadow: var(--ombra);
}
.telefono iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* Solo da computer: su un telefono vero l'anteprima e' la pagina stessa,
   non un telefono disegnato dentro il telefono. */
@media (min-width: 1100px) {
  body.studio-aperto .wrap { max-width: 1240px; }
  body.studio-aperto .studio {
    display: grid; grid-template-columns: minmax(0, 1fr) 470px;
    gap: 36px; align-items: start;
  }
  /* 76px: la barra alta della scocca piu' un respiro. */
  body.studio-aperto .lato-anteprima { display: block; position: sticky; top: 76px; }
  /* Nello studio la colonna dell'editor resta una colonna da leggere:
     centrata dentro se stessa, non spalmata sulla larghezza intera. */
  body.studio-aperto .studio > #app { max-width: 660px; margin: 0 auto; width: 100%; }
}

/* Le due viste di un menu' o di una pagina aperti (Piatti|Aspetto,
   Voci|Aspetto): una pastiglia con due schede, in mezzo alla colonna. */
.viste-menu {
  display: flex; gap: 4px; width: fit-content; margin: 16px auto 0;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px;
}
.vista-scheda {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: none; border: 0; border-radius: 999px;
  padding: 8px 20px; transition: background .15s, color .15s;
}
.vista-scheda.attiva { background: var(--surface); color: var(--ink); box-shadow: var(--ombra); }

/* Le due strade dell'aspetto di un menu': carte sullo stesso piano, una
   sola accesa. Cliccarne una accende quella e mette in ombra l'altra --
   e' una scelta di percorso, non due cassetti aperti insieme.

   Griglia a due colonne uguali e `min-width: 0`: senza, una carta col
   titolo lungo si allarga oltre la sua colonna e scavalca l'altra. */
.percorsi {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 18px;
}
.carta-percorso {
  min-width: 0;
  font-family: inherit; text-align: center; cursor: pointer;
  padding: 14px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line-bright);
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color .18s, box-shadow .18s, opacity .18s;
}
.carta-percorso .carta-titolo {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  /* Una parola lunga non deve sfondare la colonna: va a capo. */
  overflow-wrap: anywhere;
}
.carta-percorso .carta-sotto { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.carta-percorso.scelta {
  border-color: var(--cyan); box-shadow: var(--glow-cyan);
  background: var(--velo-cyan);
}
.carta-percorso:not(.scelta) { opacity: .62; }
.carta-percorso:not(.scelta):hover { opacity: 1; border-color: var(--cyan); }
/* Su schermo stretto due carte affiancate sono due francobolli: in colonna. */
@media (max-width: 560px) { .percorsi { grid-template-columns: 1fr; } }

/* Un gruppo di scritte nell'aspetto: le scelte che parlano della stessa
   scritta stanno in un riquadro sotto la sua intestazione -- cosi'
   «Allineamento» non e' mai un'etichetta orfana. */
.gruppo-aspetto {
  margin-top: 20px; padding: 2px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
}
.gruppo-testa {
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin: 14px 0 0; letter-spacing: -.01em;
}

/* ==========================================================================
   La testata delle pagine pubbliche (home, accedi...): tengono la loro
   .topbar, qui c'e' solo il minimo per farla stare in piedi col menu nuovo.
   ========================================================================== */

.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 0;
}
.testa-destra { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   I TRE LIVELLI: freccia indietro, menu account, monogramma.

   La navigazione ha tre piani -- hub, sezione, pagina -- e ogni pagina porta
   in alto i due estremi: a sinistra da dove si torna, a destra dove si torna
   sempre. Il monogramma e' l'ancora: stesso angolo, stessa azione, ovunque.
   ========================================================================== */

/* Stessa sagoma del «?», dall'altra parte della barra: sono i due comandi
   che non appartengono alla pagina ma alla piattaforma. */
.indietro {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; text-decoration: none;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line-bright); border-radius: 999px;
  transition: color .18s, border-color .18s;
}
.indietro:hover { color: var(--cyan-chiaro); border-color: var(--cyan); }

/* Il menu account dentro l'area di lavoro: tre puntini, non piu' l'avatar.
   L'avatar ha un lavoro solo adesso, ed e' il monogramma qui accanto. */
.nav-punti {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ink-tenue); background: var(--surface-2);
  border: 1px solid var(--line-bright);
  font-size: 15px; line-height: 1;
}
.nav-trigger:hover .nav-punti { border-color: var(--cyan); color: var(--cyan-chiaro); }

/* Il monogramma, sempre l'ULTIMO elemento della barra: torna all'hub.
   Nessun margine a sinistra sulle pagine pubbliche, dove e' figlio unico. */
.nav-mono {
  display: inline-flex; margin-left: 6px; border-radius: 50%;
  text-decoration: none;
  transition: box-shadow .18s;
}
.nav-mono:hover { box-shadow: var(--alone-cyan); }
.nav-mono:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ==========================================================================
   Il marchio delle pagine che tengono la propria .topbar (l'hub, la scheda
   account). Lo stesso segno della home -- il quadrato zafferano -- perche' un
   marchio scritto e basta non e' il marchio del sito: quello e' il quadrato,
   ed e' l'unica cosa che si riconosce da lontano.

   Le pagine che definiscono .brand per conto proprio (home, accedi, privacy,
   e tutte le altre) continuano a vincere: il loro <style> viene dopo questo
   foglio. Qui si veste solo chi non si e' vestito da solo.
   ========================================================================== */

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 13px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cyan);
  text-decoration: none; transition: color .18s;
}
.brand:hover { color: var(--cyan-chiaro); }
.brand::before {
  content: ""; width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--grad-marchio); box-shadow: var(--alone-cyan);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.brand:hover::before { transform: rotate(-8deg) scale(1.06); }

/* Su uno schermo stretto resta il QUADRATO e sparisce la scritta. Il nome e'
   tredici caratteri maiuscoli e spaziati -- centosessanta pixel -- e accanto
   ci stanno lingua, tema e account: su un telefono da 360 non ci sta tutto, e
   il primo a schiacciarsi sarebbe proprio il segno. `font-size: 0` e non
   `display: none` perche' il quadrato e' uno ::before del marchio: sparirebbe
   con lui. L'aria-label resta, quindi chi legge con la voce sente ancora il
   nome per esteso.

   Le pagine che definiscono `.brand` per conto loro non sono toccate: il loro
   <style> viene dopo questo foglio e a parita' di peso vince l'ultimo. */
@media (max-width: 520px) {
  .brand { font-size: 0; gap: 0; }
}