/* Sbusta: grafica in stile iPhone. Chiaro o scuro come il telefono, un solo colore d'accento, caratteri di
   sistema, riquadri arrotondati, barra delle sezioni fluttuante e finestre che salgono dal basso.
   I colori dei testi sono scelti per un contrasto almeno AA (verificato con axe). */
:root {
  --fondo: #f2f2f7;
  --superficie: #ffffff;
  --superficie-2: #f2f2f7;
  --riempimento: rgba(118, 118, 128, .12);
  --riempimento-forte: rgba(118, 118, 128, .2);
  --testo: #000000;
  --secondario: #6c6c70; /* un po' più scuro del grigio di sistema: contrasto almeno 4,5:1 */
  --terziario: rgba(60, 60, 67, .3);
  --separatore: rgba(60, 60, 67, .16);
  --accento: #0062cc; /* testi blu leggibili anche su fondo chiaro */
  --accento-tenue: rgba(0, 122, 255, .1);
  --accento-pieno: #0066d6; /* fondo dei pulsanti pieni: testo bianco leggibile */
  --verde: #34c759;
  --arancio: #ff9500;
  --rosso: #ff3b30;
  --rosso-testo: #c4271d;
  --verde-testo: #1d7a34;
  --arancio-testo: #a35200;
  --verde-pieno: #1f7a35; /* fondo del prezzo dello scanner: testo bianco leggibile */
  --vetro: rgba(255, 255, 255, .78);
  --vetro-bordo: rgba(255, 255, 255, .6);
  --ombra: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .06);
  --ombra-forte: 0 10px 40px rgba(0, 0, 0, .18);
  --raggio: 18px;
  --colonne: 3;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000;
    --superficie: #1c1c1e;
    --superficie-2: #2c2c2e;
    --riempimento: rgba(118, 118, 128, .24);
    --riempimento-forte: rgba(118, 118, 128, .34);
    --testo: #ffffff;
    --secondario: rgba(235, 235, 245, .62);
    --terziario: rgba(235, 235, 245, .3);
    --separatore: rgba(84, 84, 88, .55);
    --accento: #4ca2ff;
    --accento-tenue: rgba(10, 132, 255, .18);
    --accento-pieno: #0a6bd1;
    --verde: #30d158;
    --arancio: #ff9f0a;
    --rosso: #ff453a;
    --rosso-testo: #ff6961;
    --verde-testo: #30d158;
    --arancio-testo: #ff9f0a;
    --vetro: rgba(36, 36, 38, .78);
    --vetro-bordo: rgba(255, 255, 255, .08);
    --ombra: none;
    --ombra-forte: 0 10px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fondo); color: var(--testo); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, sans-serif;
  font-size: 17px; line-height: 1.35; letter-spacing: -0.2px; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}
body.con-foglio { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.tenue { color: var(--secondario); }
.piccolo { font-size: 13px; letter-spacing: 0; }
.accento { color: var(--accento); }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- pagina e testata ---------- */
.vista { max-width: 760px; margin: 0 auto; padding: 0 16px 24px; }
.testata {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 0 12px;
}
.testata h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.4px; margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.testata-lato { display: flex; gap: 8px; align-items: center; }
.testata-lato.destra { justify-content: flex-end; }
.tondo {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--superficie); color: var(--testo); box-shadow: var(--ombra); flex: none;
}
.tondo svg { width: 20px; height: 20px; }
.tondo svg.bandiera { width: 24px; height: 24px; }
.tondo:active { transform: scale(.94); }
.tondo.pieno { background: var(--accento-pieno); color: #fff; }
.tondo.iniziale { font-weight: 700; font-size: 17px; color: var(--accento); }
h2 { font-size: 22px; font-weight: 700; letter-spacing: 0.1px; margin: 26px 0 10px; }
.sezione-titolo { display: flex; justify-content: space-between; align-items: baseline; margin: 24px 4px 10px; }
.sezione-titolo h2 { margin: 0; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.sezione-titolo .conta { font-size: 13px; color: var(--secondario); }

/* ---------- barra delle sezioni (fluttuante) ---------- */
.barra {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
  width: min(calc(100% - 24px), 520px); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px;
  border-radius: 34px; background: var(--vetro); border: .5px solid var(--vetro-bordo); box-shadow: var(--ombra-forte);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
}
.barra a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 26px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--secondario);
}
.barra a svg { width: 24px; height: 24px; }
.barra a.attivo { color: var(--accento); background: var(--riempimento); }
@media (prefers-color-scheme: dark) { .barra a.attivo { color: #6bb2ff; } }
body.immersivo .barra { --vetro: rgba(28, 28, 30, .72); --vetro-bordo: rgba(255, 255, 255, .1); --secondario: rgba(235, 235, 245, .75); --riempimento: rgba(255, 255, 255, .14); --accento: #6bb2ff; color-scheme: dark; }

/* ---------- riquadri, liste, griglie ---------- */
.pannello { background: var(--superficie); border-radius: var(--raggio); padding: 16px; margin-bottom: 14px; box-shadow: var(--ombra); }
.lista { background: var(--superficie); border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); }
.lista > * { position: relative; }
.lista > * + *::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--separatore); }
.riga { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 52px; width: 100%; text-align: left; background: none; border: 0; }
button.riga:active, a.riga:active, label.riga:active { background: var(--riempimento); }
label.riga { cursor: pointer; }
.riga .riga-testo { flex: 1; min-width: 0; }
.riga .riga-titolo { font-weight: 600; }
.riga .riga-sotto { font-size: 13px; color: var(--secondario); margin-top: 1px; }
.riga .riga-icona { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--accento-pieno); flex: none; }
.riga .riga-icona svg { width: 18px; height: 18px; }
.riga .freccia-dx { width: 16px; height: 16px; color: var(--terziario); flex: none; }
.riga .valore-dx { color: var(--secondario); font-size: 15px; }
.etichetta-gruppo { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--secondario); margin: 22px 16px 7px; letter-spacing: .2px; }
.nota { font-size: 13px; color: var(--secondario); margin: 8px 16px; }

/* ---------- pulsanti, campi, segmenti ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px;
  border-radius: 14px; border: 0; background: var(--accento-tenue); color: var(--accento); font-size: 17px; font-weight: 600;
}
.bottone svg { width: 20px; height: 20px; }
.bottone.primario { background: var(--accento-pieno); color: #fff; }
.bottone.rosso { background: rgba(255, 59, 48, .1); color: var(--rosso-testo); }
.bottone.rosso-pieno { background: #c4271d; color: #fff; }
.bottone.neutro { background: var(--riempimento); color: var(--testo); }
.bottone.pieno { width: 100%; min-height: 52px; }
.bottone:active { opacity: .75; }
.bottone:disabled { opacity: .4; cursor: default; }
.riga-bottoni { display: flex; gap: 10px; flex-wrap: wrap; }
.riga-bottoni .bottone { flex: 1 1 auto; }
.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: 13px; color: var(--secondario); margin: 0 4px 6px; }
.campo input, .campo select, .campo textarea, .cerca-input {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 0; background: var(--riempimento); outline: none; -webkit-appearance: none; appearance: none;
}
.campo select { background-image: linear-gradient(45deg, transparent 50%, var(--secondario) 50%), linear-gradient(135deg, var(--secondario) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.campo input:focus, .campo textarea:focus, .cerca-input:focus { box-shadow: 0 0 0 2px var(--accento); }
.cerca { position: relative; display: block; margin-bottom: 14px; }
.cerca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--secondario); }
.cerca .cerca-input { padding-left: 38px; background: var(--superficie); box-shadow: var(--ombra); }
@media (prefers-color-scheme: dark) { .cerca .cerca-input { background: var(--riempimento); } }
.cerca-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.schede { display: flex; padding: 2px; border-radius: 10px; background: var(--riempimento); margin-bottom: 14px; }
.schede button { flex: 1; min-height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; }
.schede button.attivo { background: var(--superficie); font-weight: 650; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
@media (prefers-color-scheme: dark) { .schede button.attivo { background: #636366; } }
.interruttore { width: 51px; height: 31px; border-radius: 16px; border: 0; padding: 2px; background: var(--riempimento-forte); position: relative; flex: none; transition: background .2s; }
.interruttore span { display: block; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .2s; }
.interruttore[aria-checked="true"] { background: #1f8a3c; }
.interruttore[aria-checked="true"] span { transform: translateX(20px); }
.grafico-valore { width: 100%; height: 90px; display: block; margin-bottom: 4px; }
.variazione { font-weight: 700; font-variant-numeric: tabular-nums; }
.variazione.su, .testo-su { color: var(--verde-testo); }
.variazione.giu, .testo-giu { color: var(--rosso-testo); }
.gradata { position: absolute; left: 5px; top: 5px; padding: 2px 6px; border-radius: 6px; background: #1c1c1e; color: #ffd60a; font-size: 10px; font-weight: 800; letter-spacing: .3px; }
.qr-box { text-align: center; padding: 28px 18px; }
.qr-box h2 { margin: 18px 0 4px; }
.qr { width: min(280px, 70vw); margin: 0 auto; background: #fff; padding: 12px; border-radius: 16px; }
.qr svg { display: block; width: 100%; height: auto; }
.foto-prodotto { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; display: block; }
.foto-prodotto.segnaposto { border: .5px solid var(--separatore); background: var(--superficie-2); }
.prodotto { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--superficie); border: 0; border-radius: 16px; padding: 8px; box-shadow: var(--ombra); min-width: 0; }
.nome-prodotto { font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prodotto .copie { top: 12px; right: 12px; bottom: auto; }
.griglia-prodotti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 620px) { .griglia-prodotti { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fila-prodotti { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; }
.fila-prodotti .prodotto { flex: 0 0 42%; scroll-snap-align: start; }
@media (min-width: 620px) { .fila-prodotti .prodotto { flex-basis: 26%; } }
.filtri { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; margin-bottom: 4px; }
.chip-filtro { flex: none; border: 0; border-radius: 18px; padding: 8px 14px; min-height: 36px; font-size: 14px; font-weight: 600; background: var(--riempimento); color: var(--testo); }
.chip-filtro[aria-pressed="true"] { background: var(--accento-pieno); color: #fff; }
.togli-voce { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--riempimento); color: var(--secondario); display: grid; place-items: center; flex: none; }
.togli-voce svg { width: 16px; height: 16px; }
.togli-voce.su-carta { position: absolute; top: 18px; left: -6px; width: 32px; height: 32px; background: rgba(28, 28, 30, .78); color: #fff; z-index: 2; }
.togli-voce.su-carta::before { content: ""; position: absolute; inset: -6px; }
.bottone.pillola { min-height: 44px; padding: 8px 16px; border-radius: 22px; font-size: 16px; white-space: nowrap; }
.bottone.piccola { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: 18px; }
.logo-gruppo { height: 26px; max-width: 64px; object-fit: contain; margin-right: 8px; vertical-align: middle; }
.gruppo-testa { align-items: center; }
.gruppo-testa b { flex: 1; }
.carta-g.aggiunta .figura { opacity: .55; }
.in-racc { font-size: 12px; font-weight: 700; color: var(--verde-testo); padding: 4px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spunta-sel { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 2px #fff; display: grid; place-items: center; }
.spunta-sel svg { width: 15px; height: 15px; color: #fff; opacity: 0; }
.carta-g.selezionata .spunta-sel { background: var(--accento-pieno); }
.carta-g.selezionata .spunta-sel svg { opacity: 1; }
.fila-carte { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; }
.fila-carte .mini { position: relative; flex: 0 0 64px; }
.fila-carte .mini img, .fila-carte .mini .segnaposto { width: 64px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.fila-carte .mini .copie { right: 3px; bottom: 3px; font-size: 10px; min-width: 20px; padding: 1px 5px; }
button.raccoglitore { border: 0; text-align: left; font: inherit; color: inherit; }
.scelta-piccola { min-height: 36px; padding: 6px 28px 6px 12px; border: 0; border-radius: 18px; background: var(--riempimento) linear-gradient(45deg, transparent 50%, var(--secondario) 50%) calc(100% - 14px) 50% / 5px 5px no-repeat; -webkit-appearance: none; appearance: none; font-size: 14px; font-weight: 600; }
.anteprima-condividi { width: min(280px, 70%); margin: 0 auto 16px; border-radius: 16px; box-shadow: var(--ombra-forte); }
.benvenuto-primo { text-align: center; padding: 24px 18px; }
.benvenuto-primo h2 { margin: 12px 0 16px; }
.icona-primo { width: 72px; height: 72px; margin: 0 auto; border-radius: 22px; background: var(--accento-pieno); color: #fff; display: grid; place-items: center; }
.icona-primo svg { width: 38px; height: 38px; }
/* Sbusta Pro: colori del marchio (viola → magenta), abbastanza scuri da reggere il testo bianco (contrasto oltre 5:1) */
:root { --pro-1: #6a2fd6; --pro-2: #b8338c; }
.bottone.pro { background: linear-gradient(135deg, var(--pro-1), var(--pro-2)); color: #fff; }
.bottone.pro svg { width: 18px; height: 18px; }
/* Valori di Sbusta Pro per chi è gratis: "??? €" */
.importo-pro { color: var(--secondario); letter-spacing: 1px; }
/* Grafico bloccato: disegno finto sfocato, sopra la scheda "Passa a Pro" */
.grafico-bloccato { position: relative; margin-top: 12px; min-height: 130px; display: grid; place-items: center; }
.grafico-finto { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(2.5px); pointer-events: none; }
.scheda-pro { position: relative; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 16px; padding: 10px 16px 10px 10px;
  background: var(--superficie); color: var(--testo); box-shadow: var(--ombra); font: inherit; text-align: left; cursor: pointer; }
.scheda-pro .lucchetto-tondo { background: linear-gradient(135deg, var(--pro-1), var(--pro-2)); color: #fff; box-shadow: none; flex: none; }
.scheda-pro-testo { display: flex; flex-direction: column; line-height: 1.25; }
.scheda-pro-testo b { font-size: 15px; }
.scheda-pro-testo span { font-size: 13px; color: var(--secondario); }
.chip-pro { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 14px; padding: 5px 10px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--pro-1), var(--pro-2)); cursor: pointer; }
.chip-pro svg { width: 14px; height: 14px; }
.lucchetto-tondo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); box-shadow: var(--ombra); color: var(--testo); }
.lucchetto-tondo svg { width: 20px; height: 20px; }
.pro-eroe { text-align: center; padding: 4px 0 12px; }
.pro-ventaglio { position: relative; height: 176px; max-width: 360px; margin: 0 auto 6px; }
.pro-ventaglio img { position: absolute; left: 50%; bottom: 8px; width: 100px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 7px; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); transform-origin: 50% 100%; background: var(--riempimento); }
.pro-ventaglio img:nth-child(1) { transform: translateX(-50%) scale(1.08); z-index: 5; }
.pro-ventaglio img:nth-child(2) { transform: translateX(calc(-50% + 56px)) rotate(9deg); z-index: 4; }
.pro-ventaglio img:nth-child(3) { transform: translateX(calc(-50% - 56px)) rotate(-9deg); z-index: 4; }
.pro-ventaglio img:nth-child(4) { transform: translateX(calc(-50% + 104px)) rotate(18deg); z-index: 3; }
.pro-ventaglio img:nth-child(5) { transform: translateX(calc(-50% - 104px)) rotate(-18deg); z-index: 3; }
.pro-fatti { display: flex; justify-content: center; gap: 24px; margin-top: 12px; }
.pro-fatti div { display: flex; flex-direction: column; }
.pro-fatti b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pro-fatti span { font-size: 12px; color: var(--secondario); }
.pro-tabella { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden; margin-bottom: 6px; }
.pro-tabella th, .pro-tabella td { padding: 9px 6px; border-bottom: .5px solid var(--separatore); text-align: center; font-size: 15px; }
.pro-tabella tbody tr:last-child th, .pro-tabella tbody tr:last-child td { border-bottom: 0; }
.pro-tabella thead th { font-size: 12px; font-weight: 700; color: var(--secondario); text-transform: uppercase; letter-spacing: .3px; }
.pro-tabella th[scope="row"] { text-align: left; font-weight: 600; padding-left: 12px; }
.nome-funzione { display: flex; align-items: center; gap: 10px; }
.pro-tabella td:nth-child(2) { width: 82px; }
.pro-tabella .col-pro { width: 92px; background: rgba(184, 51, 140, .09); }
.pro-tabella thead .col-pro span { color: #fff; background: linear-gradient(135deg, var(--pro-1), var(--pro-2)); border-radius: 8px; padding: 3px 10px; }
.ico-pro { width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--pro-1), var(--pro-2)); flex: none; }
.ico-pro svg { width: 16px; height: 16px; }
.spunta-pro { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--riempimento-forte); color: var(--testo); }
.spunta-pro.piena { background: linear-gradient(135deg, var(--pro-1), var(--pro-2)); color: #fff; }
.spunta-pro svg { width: 13px; height: 13px; }
.pro-disdici { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 10px 0 14px; font-size: 14px; color: var(--secondario); }
.pro-disdici svg { width: 14px; height: 14px; color: var(--verde-testo); }
.recensioni { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; margin: 0 -2px 4px; }
.recensione { flex: 0 0 82%; scroll-snap-align: start; margin: 0; background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 14px 16px; }
.recensione .stelle { color: #c77c00; letter-spacing: 2px; }
.recensione .stelle span { color: var(--terziario); }
.recensione blockquote { margin: 8px 0; font-size: 15px; line-height: 1.4; }
.recensione figcaption { font-size: 13px; color: var(--secondario); }
.pro-cassa { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); margin: 14px -4px 0; padding: 12px; border-radius: var(--raggio); background: var(--vetro); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--ombra-forte); z-index: 5; }
.pro-cassa .piani { margin: 0 0 10px; }
.pro-piccolo { font-size: 12px; color: var(--secondario); text-align: center; margin: 8px 4px 0; line-height: 1.35; }
.pill-pro { background: linear-gradient(135deg, var(--pro-1), var(--pro-2)); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 14px; white-space: nowrap; }
.pill-pro.piccola { font-size: 11px; padding: 3px 8px; }
.riga-icona.pro-icona { background: linear-gradient(135deg, var(--pro-1), var(--pro-2)); }
.pro-testa { text-align: center; padding: 18px 0 22px; }
.pro-marchio { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; }
.pro-marchio b { background: linear-gradient(135deg, var(--pro-1), var(--pro-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pro-stato { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 14px; border-radius: 18px; background: var(--superficie); box-shadow: var(--ombra); font-weight: 600; font-size: 15px; }
.pro-stato svg { width: 18px; height: 18px; color: #1f8a3b; }
.piani { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 12px; }
.piano { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px; border-radius: var(--raggio); background: var(--superficie); box-shadow: var(--ombra); border: 2px solid transparent; color: var(--testo); font: inherit; cursor: pointer; }
.piano[aria-pressed="true"] { border-color: var(--accento); }
.piano-nome { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.piano-sconto { background: #17692c; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 8px; }
.piano-prezzo { font-size: 24px; font-weight: 800; }
.piano-prezzo small { font-size: 14px; font-weight: 600; color: var(--secondario); }
.piano-sotto { font-size: 13px; color: var(--secondario); }
.campanella { position: relative; color: var(--testo); }
.pallino { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #c4271d; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.avviso-riga.nuovo .riga-titolo::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accento); margin-left: 8px; vertical-align: 2px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--riempimento); color: var(--secondario); letter-spacing: .2px; white-space: nowrap; }
.chip.blu { background: var(--accento-tenue); color: var(--accento); }

/* ---------- valore (collezione, raccoglitore, riepilogo) ---------- */
.valore-box { background: var(--superficie); border-radius: var(--raggio); padding: 18px; box-shadow: var(--ombra); margin-bottom: 14px; }
.valore-box .etichetta-valore { font-size: 15px; font-weight: 600; color: var(--secondario); }
.valore { font-size: 40px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 4px 0; }
.valore.verde { color: var(--verde-testo); }
.tre-numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tre-numeri div { background: var(--riempimento); border-radius: 12px; padding: 10px; }
.tre-numeri b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.tre-numeri span { font-size: 12px; color: var(--secondario); }

/* ---------- raccoglitori ---------- */
.raccoglitori { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .raccoglitori { grid-template-columns: repeat(3, 1fr); } }
.raccoglitore { background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 12px; display: flex; flex-direction: column; min-height: 210px; }
.ventaglio { position: relative; height: 128px; margin-bottom: 10px; }
.ventaglio > * { position: absolute; left: 50%; top: 6px; width: 74px; aspect-ratio: 63 / 88; height: auto; border-radius: 6px; object-fit: cover; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); transform-origin: 50% 100%; }
.ventaglio > :nth-child(1) { transform: translateX(-50%) rotate(-12deg) translateX(-14px); }
.ventaglio > :nth-child(2) { transform: translateX(-50%) rotate(10deg) translateX(14px); }
.ventaglio > :nth-child(3) { transform: translateX(-50%); z-index: 1; }
.ventaglio .segnaposto { padding: 4px; font-size: 9px; }
.ventaglio.vuoto-v > * { background: var(--riempimento); box-shadow: none; }
.raccoglitore .nome-r { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raccoglitore .dati-r { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; font-size: 13px; color: var(--secondario); }
.raccoglitore .dati-r b { color: var(--accento); font-size: 15px; font-variant-numeric: tabular-nums; }
.raccoglitore.nuovo { align-items: center; justify-content: center; gap: 12px; color: var(--accento); font-weight: 600; background: transparent; box-shadow: none; border: 2px dashed var(--riempimento-forte); }
.raccoglitore.nuovo .cerchio { width: 64px; height: 64px; border-radius: 50%; background: var(--accento-tenue); display: grid; place-items: center; }
.raccoglitore.nuovo svg { width: 28px; height: 28px; }
/* Raccoglitori a pagine (11/10): copertina colorata con gli anelli sul dorso */
.copertina-r { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 210px; padding: 14px 12px 14px 30px;
  border: 0; border-radius: var(--raggio); background: var(--colore-r); color: #fff; text-align: left; text-decoration: none; font: inherit; cursor: pointer;
  box-shadow: inset 12px 0 0 rgba(0, 0, 0, .18), var(--ombra); overflow: hidden; }
.copertina-r::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%); pointer-events: none; }
.copertina-r .anelli { position: absolute; left: 4px; top: 22px; bottom: 22px; width: 4px; background: radial-gradient(circle, rgba(255, 255, 255, .85) 0 2px, transparent 2.5px) center / 4px 18px repeat-y; }
.copertina-r .nome-r { font-weight: 800; font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.copertina-r .dati-r { font-size: 13px; margin-top: 4px; opacity: .92; }
.valore-box.testa-r { border-left: 6px solid var(--colore-r); }
.testa-pagine { align-items: center; }
.testa-pagine .conta { margin-left: auto; }
.frecce-pagina { display: flex; gap: 6px; margin-left: 10px; }
.frecce-pagina .tondo { width: 34px; height: 34px; box-shadow: none; background: var(--riempimento); }
.frecce-pagina .tondo svg { width: 16px; height: 16px; }
.frecce-pagina .tondo:disabled { opacity: .35; }
.sfoglia { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--raggio); }
.sfoglia::-webkit-scrollbar { display: none; }
.pagina-r { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-columns: repeat(var(--colonne-r), minmax(0, 1fr)); gap: 8px; align-content: start;
  padding: 10px; background: var(--superficie); border-radius: var(--raggio); border: 1px solid var(--separatore); }
.posto { position: relative; aspect-ratio: 63 / 88; border: 0; padding: 0; border-radius: 7px; background: none; overflow: hidden; cursor: pointer; font: inherit; color: inherit; }
.posto.pieno { box-shadow: 0 2px 8px rgba(0, 0, 0, .16); background: var(--superficie-2); }
.posto.pieno img, .posto.pieno .segnaposto { width: 100%; height: 100%; object-fit: cover; display: block; }
.posto.pieno .segnaposto { padding: 4px; font-size: 10px; }
.posto.vuoto { display: grid; place-items: center; border: 2px dashed var(--riempimento-forte); color: var(--terziario); }
.posto.vuoto svg { width: 22px; height: 22px; }
.in-spostamento .posto.vuoto { border-color: var(--accento); color: var(--accento); background: var(--accento-tenue); }
.posto.in-movimento { outline: 3px solid var(--accento); outline-offset: -3px; opacity: .55; }
.pallini { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.pallini span { width: 7px; height: 7px; border-radius: 4px; background: var(--riempimento-forte); transition: width .2s; }
.pallini span.attivo { width: 18px; background: var(--testo); }
.barra-sposta { position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 6; max-width: 728px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 18px; font-weight: 600;
  background: var(--vetro); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--ombra-forte); }
.con-foglio .barra-sposta { display: none; }
button.carta-g { border: 0; padding: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
/* Foglio del raccoglitore nuovo: colori e pagine */
.colori-r { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.colori-r button { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.colori-r button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--testo); }
.riga-pagine { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-weight: 600; }
.contatore { display: flex; align-items: center; gap: 14px; }
.contatore b { min-width: 2.4ch; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.contatore .tondo { width: 38px; height: 38px; background: var(--accento-tenue); color: var(--accento); box-shadow: none; }
.riga-pagine .capienza { font-weight: 500; }

/* ---------- carte in griglia ---------- */
.griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: 14px 10px; }
.griglia.fissa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.carta-g { position: relative; cursor: pointer; min-width: 0; }
.carta-g .figura { position: relative; border-radius: 7px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); background: var(--superficie-2); }
.carta-g img, .carta-g .segnaposto { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; }
.carta-g .didascalia { font-size: 12px; padding: 5px 2px 0; color: var(--secondario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta-g .didascalia b { color: var(--testo); font-weight: 600; }
.carta-g .prezzo-g { font-size: 14px; font-weight: 700; color: var(--accento); padding: 4px 2px 0; font-variant-numeric: tabular-nums; }
.carta-g .totale-g { font-size: 11px; color: var(--secondario); padding: 0 2px; }
.carta-g .stato-g { font-size: 11px; font-weight: 700; text-align: center; color: var(--secondario); padding: 2px 0 4px; text-transform: uppercase; letter-spacing: .3px; }
.copie { position: absolute; right: 5px; bottom: 5px; min-width: 26px; padding: 2px 7px; border-radius: 9px; background: var(--accento-pieno); color: #fff; font-size: 12px; font-weight: 700; text-align: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.carta-g.mancante .figura img { opacity: .35; filter: grayscale(1); }
.spunta-carta { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; z-index: 2; }
.spunta-carta span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 2px #fff; }
.spunta-carta[aria-pressed="true"] span { background: var(--accento-pieno); }
.spunta-carta svg { width: 15px; height: 15px; color: #fff; opacity: 0; }
.spunta-carta[aria-pressed="true"] svg { opacity: 1; }
.carta-g.selezionata .figura { box-shadow: 0 0 0 3px var(--accento); }
.segnaposto {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 8px;
  font-size: 11px; line-height: 1.25; color: var(--secondario); background: var(--superficie-2); border: .5px solid var(--separatore);
}
.segnaposto::before { content: ""; width: 22px; height: 30px; border-radius: 3px; border: 1.5px solid var(--terziario); }

/* ---------- espansioni ---------- */
.set-grande { display: block; background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 14px; margin-bottom: 12px; overflow: hidden; }
.set-testa { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
.set-testa .logo-set { width: 84px; height: 44px; object-fit: contain; }
.set-nome { font-weight: 800; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.set-nome span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-sotto { display: flex; justify-content: space-between; font-size: 12px; color: var(--secondario); margin-top: 3px; font-variant-numeric: tabular-nums; }
.progresso { height: 6px; border-radius: 3px; background: var(--riempimento); overflow: hidden; margin-top: 6px; }
.progresso > * { height: 100%; background: #1f8a3c; border-radius: 3px; min-width: 0; }
.fila-preziose { display: flex; gap: 8px; margin-top: 12px; overflow: hidden; }
.fila-preziose .pz { flex: 0 0 calc((100% - 32px) / 5); min-width: 0; }
.fila-preziose img, .fila-preziose .segnaposto { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.fila-preziose .segnaposto { padding: 2px; font-size: 8px; }
.fila-preziose .pz-prezzo { font-size: 11px; font-weight: 700; color: var(--secondario); text-align: center; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fila-preziose .pz-pro { text-align: center; margin-top: 3px; }
.fila-preziose .pz-pro .pill-pro { display: inline-block; line-height: 1.2; }
.set-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.set-griglia .set-grande { margin: 0; padding: 12px; display: flex; flex-direction: column; }
.set-griglia .logo-set { width: 100%; height: 58px; object-fit: contain; margin-bottom: 8px; }
.set-griglia .set-nome { font-size: 13px; }
.set-griglia .fila-preziose .pz { flex-basis: calc((100% - 16px) / 3); }
.set-griglia .fila-preziose .pz:nth-child(n+4) { display: none; }
.set-griglia .pz-prezzo, .set-griglia .pz-pro { display: none; }
.set-riga { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 12px 16px; }
.set-riga .logo-set { width: 72px; height: 36px; object-fit: contain; }
.logo-vuoto { display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--secondario); background: var(--riempimento); border-radius: 8px; }
.testa-set { text-align: center; padding: 4px 8px 6px; }
.testa-set .logo-set { max-width: 220px; height: 80px; object-fit: contain; margin: 0 auto 8px; }
.testa-set .tenue { font-size: 14px; }

/* ---------- foglio (finestra che sale dal basso) ---------- */
.foglio-sfondo { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .38); opacity: 0; transition: opacity .25s; }
.foglio-sfondo.aperto { opacity: 1; }
.foglio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; margin: 0 auto; max-width: 760px; max-height: calc(100% - 28px - env(safe-area-inset-top));
  display: flex; flex-direction: column; background: var(--fondo); border-radius: 22px 22px 0 0; box-shadow: var(--ombra-forte);
  transform: translateY(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.foglio.aperto { transform: translateY(0); }
.foglio.basso { background: var(--superficie); }
/* Fogli di ricerca: sempre alti, anche con pochi risultati (non saltano mentre si scrive) */
.foglio.alto { height: calc(100% - 28px - env(safe-area-inset-top)); }
.foglio-maniglia { width: 38px; height: 5px; border-radius: 3px; background: var(--terziario); margin: 7px auto 0; flex: none; }
.foglio-testa { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 6px 14px 8px; flex: none; touch-action: none; }
.foglio-testa h2 { margin: 0; font-size: 19px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.foglio-testa .tondo { width: 38px; height: 38px; }
.foglio-corpo { overflow-y: auto; padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.foglio-testo { font-size: 16px; color: var(--secondario); margin: 4px 4px 18px; }

/* ---------- scheda della carta (nel foglio) ---------- */
.scheda-figura { max-width: 270px; margin: 4px auto 16px; }
.scheda-figura .grande, .scheda-figura .segnaposto { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); }
.contatore { display: flex; align-items: center; gap: 10px; }
.contatore .tondo { width: 38px; height: 38px; box-shadow: none; background: var(--accento-tenue); color: var(--accento); }
.contatore b { min-width: 28px; text-align: center; font-size: 19px; font-variant-numeric: tabular-nums; }
.prezzi-stampa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.prezzo-stampa { text-align: left; border: 0; border-radius: 14px; padding: 12px; background: var(--superficie); box-shadow: var(--ombra); }
.prezzo-stampa .tipo { font-size: 13px; font-weight: 700; color: var(--secondario); }
.prezzo-stampa .cifra { font-size: 22px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.prezzo-stampa .fonte { font-size: 11px; color: var(--secondario); }
.prezzo-stampa.non-usato[aria-pressed="true"] { background: var(--accento-tenue); box-shadow: 0 0 0 2px var(--accento); }
.prezzo-stampa.non-usato[aria-pressed="true"] .cifra { color: var(--accento); }
.prezzo-stampa.non-usato[aria-pressed="true"] .tipo, .prezzo-stampa.non-usato[aria-pressed="true"] .fonte { color: var(--testo); }
.grafico { width: 100%; height: 64px; margin-top: 10px; }
/* Prezzi che stanno arrivando (riepilogo): puntini sulla carta, rotella e valore che "respira" */
.in-arrivo { display: inline-flex; gap: 3px; vertical-align: middle; }
.in-arrivo i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; animation: puntini 1.2s infinite; }
.in-arrivo i:nth-child(2) { animation-delay: .2s; }
.in-arrivo i:nth-child(3) { animation-delay: .4s; }
@keyframes puntini { 30% { opacity: 1; } }
.valore.in-calcolo { animation: respiro 1.6s ease-in-out infinite; }
@keyframes respiro { 50% { opacity: .55; } }
.calcolo-prezzi { margin-top: 6px; font-weight: 600; color: var(--secondario); }
.rotella { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
/* Prezzo appena riletto nel raccoglitore: un lampo leggero */
.prezzo-g.appena { animation: lampo 1.6s ease-out; border-radius: 6px; }
@keyframes lampo { from { background: var(--accento-tenue); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .in-arrivo i, .valore.in-calcolo, .rotella { animation: none; } .in-arrivo i { opacity: .7; } }
.griglia.selezionabile:not(.in-selezione) .spunta-sel { display: none; }
.numero-tel { display: flex; gap: 8px; }
.numero-tel input:first-child { width: 78px; flex: none; }
.errore-campo { margin: -8px 4px 12px; font-size: 13px; font-weight: 600; color: var(--rosso-testo); }
.storico { margin-top: 12px; }
/* "i" accanto a Reverse e foglio con le tre carte disegnate */
.info-tondo { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -4px 0 -4px 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accento); vertical-align: middle; cursor: pointer; }
.info-tondo svg { width: 19px; height: 19px; }
.con-info { display: flex; align-items: flex-start; gap: 6px; }
.con-info .schede { flex: 1; }
.con-info .info-tondo { margin: 7px 0 0; width: 32px; height: 32px; flex: none; }
.disegno-versioni { display: block; width: 100%; max-width: 340px; margin: 4px auto 14px; }
.disegno-versioni .olo-carta { fill: var(--riempimento); stroke: var(--secondario); stroke-opacity: .35; }
/* le regole CSS vincono sull'attributo fill: il grigio solo dove non c'è il riflesso */
.disegno-versioni .olo-arte:not([fill]), .disegno-versioni .olo-riga { fill: var(--secondario); fill-opacity: .25; }
.disegno-versioni text { fill: var(--testo); font-size: 13px; font-weight: 600; text-anchor: middle; }
.storico-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; min-height: 22px; }
.storico .schede { margin-bottom: 10px; }
.storico-area { position: relative; touch-action: pan-y; cursor: crosshair; }
.grafico-storico { width: 100%; height: 110px; display: block; }
.storico-linea { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--secondario); opacity: .5; pointer-events: none; }
.storico-punto { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 2px solid var(--superficie); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); pointer-events: none; }
.storico-piede { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
.dettagli { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 15px; }
.dettagli dt { color: var(--secondario); }
.dettagli dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- scanner ---------- */
body.immersivo { padding-bottom: 0; background: #000; overflow: hidden; }
body.immersivo .vista { max-width: none; padding: 0; }
.scanner { position: fixed; inset: 0; background: #000; color: #fff; overflow: hidden; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-guida { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sc-guida.carta { top: 52%; height: min(56vh, calc(80vw * 88 / 63)); aspect-ratio: 63 / 88; border: 2px solid rgba(255, 255, 255, .9); border-radius: 22px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
/* La scritta nel riquadro è l'unico posto dello stato dello scanner (11/10): piccola, al centro del riquadro.
   Blu con la rotella mentre legge (i tocchi non scattano), scura per l'esito, poi torna "Tocca ovunque per scattare" */
.sc-tocca { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 24px); width: max-content; border: 0; padding: 7px 13px; border-radius: 16px; background: rgba(28, 28, 30, .6); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.sc-tocca:active { transform: translate(-50%, -50%) scale(.96); }
.sc-tocca.lavoro { background: rgba(0, 102, 214, .88); }
.sc-tocca.esito { background: rgba(28, 28, 30, .88); }
.sc-tocca .rotella { flex: none; }
.sc-stato.quieto { display: none; }
.sc-guida.album { height: min(52vh, calc(90vw / var(--rapporto))); aspect-ratio: var(--rapporto); border: 2px solid rgba(255, 255, 255, .85); border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3); }
.sc-angolo { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .5)); }
.sc-angolo:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.sc-angolo:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.sc-angolo:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.sc-angolo:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.sc-guida.letta .sc-angolo, .sc-guida.carta.letta { border-color: #30d158; }
.sc-linea { position: absolute; background: rgba(255, 255, 255, .75); }
.hud { background: rgba(28, 28, 30, .72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 16px; color: #fff; }
.sc-alto { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; z-index: 2; }
.sc-sinistra { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-sinistra .tondo { width: 42px; height: 42px; flex: none; background: rgba(28, 28, 30, .72); color: #fff; box-shadow: none; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sc-valore { padding: 9px 12px; justify-self: start; min-width: 0; max-width: 100%; }
.sc-valore .et { white-space: nowrap; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: rgba(235, 235, 245, .75); }
.sc-valore b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.sc-valore .n { font-size: 11px; color: rgba(235, 235, 245, .75); }
.sc-centro { position: absolute; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 146px); z-index: 2; display: flex; justify-content: center; pointer-events: none; }
.sc-stato { padding: 7px 11px; border-radius: 16px; font-size: 12px; font-weight: 600; background: rgba(0, 0, 0, .78); max-width: 100%; display: flex; align-items: center; gap: 6px; text-align: center; line-height: 1.2; }
.sc-stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #30d158; flex: none; }
.sc-stato.pausa::before { background: #ff9f0a; }
.sc-stato.lavoro::before { animation: lampeggia 1s infinite; }
@keyframes lampeggia { 50% { opacity: .2; } }
.sc-seconda { position: absolute; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 92px); z-index: 2; display: flex; justify-content: center; align-items: center; gap: 10px; }
.sc-destra { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sc-conta { border: 0; padding: 8px 12px; border-radius: 16px; background: var(--accento-pieno); color: #fff; text-align: left; }
.sc-conta .et { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; opacity: .85; }
.sc-conta b { display: flex; align-items: center; gap: 6px; font-size: 22px; line-height: 1.15; }
.sc-conta b svg { width: 16px; height: 16px; }
.sc-gratis { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 12px; background: #1f7a35; color: #fff; }
.sc-gratis.finite { background: #c4271d; }
.sc-modo { display: flex; gap: 4px; padding: 4px; border-radius: 21px; }
.sc-modo button { border: 0; background: none; color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 16px; min-height: 34px; }
.sc-modo button[aria-pressed="true"] { background: #fff; color: #000; }
.sc-basso { position: absolute; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; z-index: 2; }
.sc-pila { position: relative; width: 64px; height: 90px; border: 0; padding: 0; background: none; }
.sc-pila img, .sc-pila .segnaposto { position: absolute; inset: 0; width: 64px; height: 90px; border-radius: 6px; object-fit: cover; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.sc-pila :nth-child(1) { transform: rotate(-8deg) translate(-4px, 2px); }
.sc-pila :nth-child(2) { transform: rotate(5deg) translate(3px, 0); }
.sc-pila .segnaposto { padding: 2px; font-size: 8px; }
.sc-scatto { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 74px; height: 74px; border-radius: 50%; border: 4px solid #fff; background: rgba(255, 255, 255, .25); padding: 5px; }
.sc-scatto span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.sc-scatto:active span { transform: scale(.9); }
.sc-stato[data-prova]::after { content: attr(data-prova); display: block; font-size: 10px; opacity: .8; }
.sc-stato[data-prova] { flex-direction: column; }
.sc-comandi { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
.sc-comandi button { border: 0; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 22px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; min-height: 44px; color: #fff; }
.sc-comandi button svg { width: 14px; height: 14px; }
.sc-pop { position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
.sc-prezzo { font-size: 50px; font-weight: 800; letter-spacing: -1px; padding: 6px 22px; border-radius: 20px; background: var(--verde-pieno); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); font-variant-numeric: tabular-nums; animation: entra .35s cubic-bezier(.2, 1.4, .4, 1); }
.sc-prezzo small { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; text-align: center; opacity: .92; margin-top: -2px; }
.sc-prezzo.nessuno { font-size: 26px; background: rgba(28, 28, 30, .86); }
@keyframes entra { from { transform: scale(.6); opacity: 0; } }
.sc-scheda { width: 100%; max-width: 420px; display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 12px; pointer-events: auto; animation: sale .3s ease-out; }
@keyframes sale { from { transform: translateY(16px); opacity: 0; } }
.sc-scheda img, .sc-scheda .segnaposto { width: 54px; aspect-ratio: 63 / 88; border-radius: 5px; object-fit: cover; }
.sc-scheda .segnaposto { padding: 2px; font-size: 8px; }
.sc-scheda .riga-1 { font-size: 11px; color: rgba(235, 235, 245, .75); }
.sc-scheda .riga-2 { font-weight: 700; font-size: 16px; }
.sc-scheda .riga-3 { font-size: 12px; color: rgba(235, 235, 245, .8); margin-top: 2px; }
/* "Quale di queste?": le carte proposte da toccare, "Scegli dopo" */
.sc-scheda.sc-scelta { display: block; padding: 14px; }
.sc-scelta-titolo { font-weight: 700; color: #fff; }
.sc-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
/* (più specifiche di ".sc-scheda button", che fa i pulsanti larghi quanto la scheda) */
.sc-scheda .sc-tre button { grid-column: auto; min-height: 0; border: 0; border-radius: 6px; padding: 0; background: none; color: #fff; font-size: 11px; font-weight: 500; text-align: center; cursor: pointer; }
.sc-scheda .sc-tre button img, .sc-scheda .sc-tre button .segnaposto { width: 100%; height: auto; aspect-ratio: 63 / 88; border-radius: 6px; display: block; margin-bottom: 4px; object-fit: cover; }
.sc-scheda .sc-tre button span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-dopo { min-height: 40px; font-size: 15px; }
.sc-scheda .per { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 9px; background: #1f7a35; align-self: start; }
.sc-scheda.dubbio .per { background: #a35200; }
.sc-scheda.no .per { background: #c4271d; }
.sc-scheda button { grid-column: 1 / -1; border: 0; border-radius: 12px; min-height: 40px; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; font-size: 14px; }
.sc-aiuto { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); z-index: 4; padding: 20px; max-width: 420px; margin: 0 auto; }
.sc-aiuto h2 { margin: 0 0 10px; font-size: 21px; }
.sc-aiuto ul { margin: 0 0 16px; padding-left: 18px; font-size: 14px; color: rgba(235, 235, 245, .85); }
.sc-aiuto li { margin-bottom: 6px; }
.sc-senza { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); z-index: 2; padding: 20px; text-align: center; max-width: 420px; margin: 0 auto; }
.sc-senza p { color: rgba(235, 235, 245, .85); font-size: 15px; }
.sc-senza .bottone { margin-top: 8px; }
.sc-aiuto .bottone, .sc-senza .bottone { --accento-tenue: rgba(255, 255, 255, .16); --accento: #fff; }

/* ---------- riepilogo della scansione ---------- */
.gruppo-set { margin-top: 18px; }
.gruppo-testa { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; }
.gruppo-testa b { font-size: 16px; }
.gruppo-testa span { font-size: 13px; color: var(--secondario); }
.da-risolvere { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; }
.da-risolvere img { width: 48px; height: 67px; object-fit: cover; border-radius: 5px; }
.barra-azione { position: sticky; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 5; margin-top: 18px; padding: 12px; border-radius: 20px; background: var(--vetro); border: .5px solid var(--vetro-bordo); box-shadow: var(--ombra-forte); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* ---------- avvisi, grafici, stati vuoti ---------- */
.avviso {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; max-width: 90vw;
  background: rgba(30, 30, 30, .94); color: #fff; padding: 11px 18px; border-radius: 22px; font-size: 15px; font-weight: 500;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.vuoto { text-align: center; padding: 40px 24px; color: var(--secondario); }
.vuoto svg { width: 54px; height: 54px; color: var(--terziario); margin: 0 auto 10px; display: block; }
.vuoto .titolo-vuoto { font-size: 20px; font-weight: 700; color: var(--testo); margin-bottom: 6px; }
.vuoto-azioni { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.vuoto .bottone svg { width: 18px; height: 18px; margin: 0; display: inline-block; color: inherit; }
/* Copie nella scheda (11/10): la riga si apre toccandola (un pulsante trasparente la copre tutta), la lingua si
   cambia col piccolo IT | EN, che sta sopra */
.riga-copia { position: relative; }
.copia-apri { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: none; border-radius: inherit; cursor: pointer; }
.copia-apri:active { background: var(--riempimento); }
.riga-copia .riga-sotto { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mini-lingua { position: relative; z-index: 1; display: inline-flex; border-radius: 8px; background: var(--riempimento); padding: 2px; flex: none; }
.mini-lingua button { border: 0; background: none; color: var(--testo); font-size: 12px; font-weight: 700; padding: 4px 9px; min-height: 28px; border-radius: 6px; cursor: pointer; }
.mini-lingua button[aria-pressed="true"] { background: var(--superficie); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
@media (prefers-color-scheme: dark) { .mini-lingua button[aria-pressed="true"] { background: #636366; } }
/* Desideri (11/10): "Aggiungi una carta" fisso sopra la barra in basso, "+" sulle carte della ricerca, scelte rapide */
.barra-fissa { position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 6; display: flex; justify-content: center; pointer-events: none; }
.barra-fissa .bottone { pointer-events: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 0 22px; min-height: 52px; border-radius: 26px; font-size: 17px; }
.spazio-barra { height: 84px; }
.con-foglio .barra-fissa, .barra-fissa[hidden] { display: none; }
.piu-carta { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--accento-pieno); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); cursor: pointer; }
.piu-carta svg { width: 18px; height: 18px; }
.piu-carta.fatto { background: #1f7a35; }
.badge-des { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 8px; }
.badge-des.sotto { background: rgba(31, 138, 59, .12); color: #155d27; } /* verde più scuro: sul fondo verdino serve più contrasto */
@media (prefers-color-scheme: dark) { .badge-des.sotto { color: var(--verde-testo); } }
.badge-des.sopra { background: var(--riempimento); color: var(--testo); }
.carta-g .didascalia.sotto { padding-top: 0; }
.riga-ris { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; cursor: pointer; }
.riga-ris .mini-img img, .riga-ris .mini-img .segnaposto { width: 52px; border-radius: 4px; display: block; }
.riga-ris .piu-carta { position: static; }
.vista-sw { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--riempimento); }
.vista-sw button { width: 40px; height: 32px; border: 0; border-radius: 8px; background: transparent; display: grid; place-items: center; color: var(--testo); }
.vista-sw button[aria-pressed="true"] { background: var(--superficie); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.vista-sw svg { width: 18px; height: 18px; }
.des-testa { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; margin-bottom: 12px; }
.des-testa > img, .des-testa > .segnaposto { width: 72px; display: block; border-radius: 5px; }
.des-nome { font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.chip-scelta { border: 0; border-radius: 16px; padding: 8px 13px; font-size: 14px; font-weight: 600; background: var(--riempimento); color: var(--testo); cursor: pointer; }
.chip-scelta[aria-pressed="true"] { background: var(--accento-pieno); color: #fff; }
.chip-scelta:disabled { opacity: .4; cursor: default; }
/* Vendi a noi a passi (11/10): barra dei passi, filtri, "Avanti" fisso in basso, riepilogo, richiesta inviata */
.passi { display: flex; align-items: center; gap: 10px; margin: -4px 4px 14px; }
.avanzamento { flex: 1; height: 4px; border-radius: 2px; background: var(--riempimento); overflow: hidden; }
.avanzamento span { display: block; height: 100%; background: var(--accento-pieno); border-radius: 2px; }
.passi b { font-size: 13px; color: var(--secondario); font-weight: 600; white-space: nowrap; }
.filtri-v { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0 4px; scrollbar-width: none; }
.filtri-v::-webkit-scrollbar { display: none; }
.filtri-v button { flex: none; border: 0; border-radius: 16px; padding: 7px 13px; font-size: 14px; font-weight: 600; background: var(--riempimento); color: var(--testo); cursor: pointer; }
.filtri-v button[aria-pressed="true"] { background: var(--accento-pieno); color: #fff; }
.conta-sel { display: flex; justify-content: space-between; align-items: center; min-height: 34px; margin: 10px 4px; font-size: 14px; color: var(--secondario); }
.conta-sel button { border: 0; background: none; color: var(--accento); font-weight: 600; font-size: 15px; padding: 6px 0; cursor: pointer; }
.barra-avanti { position: fixed; left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); max-width: 736px; margin: 0 auto; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 20px; font-weight: 600;
  background: var(--vetro); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--ombra-forte); }
.barra-avanti .bottone { min-height: 46px; padding: 0 26px; }
.con-foglio .barra-avanti { display: none; }
.prodotto .spunta-sel { top: 12px; left: 12px; right: auto; }
.prodotto.selezionata { box-shadow: 0 0 0 3px var(--accento); }
.prodotto.selezionata .spunta-sel { background: var(--accento-pieno); }
.prodotto.selezionata .spunta-sel svg { opacity: 1; }
.riga-v { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 12px; align-items: center; }
.riga-v > img, .riga-v > .segnaposto, .riga-v > .foto-prodotto { width: 48px; height: auto; border-radius: 4px; display: block; }
.passo-q { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; background: var(--riempimento); padding: 2px; }
.passo-q button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--superficie); font-size: 18px; font-weight: 700; color: var(--testo); cursor: pointer; }
.passo-q button:disabled { opacity: .35; cursor: default; }
.passo-q b { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.togli-v { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--riempimento); color: var(--secondario); font-size: 16px; cursor: pointer; }
.togli-v.su-tessera { position: absolute; top: 5px; left: 5px; width: 26px; height: 26px; font-size: 13px; background: rgba(0, 0, 0, .55); color: #fff; }
.sezione-v { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 4px 8px; }
.sezione-v h2 { margin: 0; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--secondario); }
.sezione-v a { color: var(--accento); font-weight: 600; font-size: 15px; text-decoration: none; }
.riassunto-v { padding: 14px 16px; border-radius: var(--raggio); background: var(--superficie); box-shadow: var(--ombra); display: flex; align-items: center; gap: 14px; margin-bottom: 16px; text-align: left; }
.mini-ventaglio { display: flex; flex: none; }
.mini-ventaglio img { width: 34px; border-radius: 3px; margin-left: -12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.mini-ventaglio img:first-child { margin-left: 0; }
.esito-v { text-align: center; padding: 30px 4px 10px; }
.spunta-grande { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: var(--verde-pieno); color: #fff; box-shadow: 0 10px 30px rgba(31, 122, 53, .35); }
.spunta-grande svg { width: 40px; height: 40px; stroke-width: 3; }
.esito-v h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; }
.esito-v > p { margin: 0 auto; max-width: 320px; color: var(--secondario); font-size: 16px; line-height: 1.4; }
.esito-v > p b { color: var(--testo); }
.esito-v .riassunto-v { margin: 22px 0 10px; }
.esito-v > p.nota-richieste { margin: 0 auto 16px; font-size: 14px; }
.carica { text-align: center; padding: 40px; color: var(--secondario); }

/* benvenuto */
.benvenuto { text-align: center; padding: calc(40px + env(safe-area-inset-top)) 12px 8px; }
.benvenuto .icona-app { width: 92px; height: 92px; border-radius: 22px; margin: 0 auto 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.benvenuto h1 { font-size: 32px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.5px; }
.benvenuto p { color: var(--secondario); margin: 0 auto 24px; max-width: 420px; }
.punti-forza { text-align: left; max-width: 420px; margin: 0 auto 24px; }
.punti-forza .riga-icona { background: var(--accento-pieno); }

/* ---------- profilo ---------- */
.profilo-testa { display: flex; align-items: center; gap: 14px; padding: 16px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accento-pieno); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 700; flex: none; }
.riga .schede { margin: 0; min-width: 150px; }
.riga .campo { margin: 0; }

/* ---------- accessibilità ---------- */
:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; border-radius: 8px; }
.scanner :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }