:root{
  --bg:#0b0d12; --sup:#141720; --sup2:#1b1f2b; --sup3:#222736;
  --bordo:#252a38; --bordo2:#323847;
  --txt:#eef0f5; --txt2:#a7adbe; --muted:#6d7385;
  --acc:#7c5cff; --acc2:#22d3ee; --ok:#2ecc71; --ko:#ff5d6c; --warn:#ffb020;
  --r:12px; --r2:16px; --r3:22px;
  --grad:linear-gradient(135deg,#7c5cff,#22d3ee);
  --ombra:0 8px 30px rgba(0,0,0,.35);
  --safe-b:calc(env(safe-area-inset-bottom) + 8px);
  /* altezza della bottomnav fissa SENZA la parte safe-area (che è --safe-b):
     serve a chi deve lasciarle spazio sotto per non finirci nascosto sotto */
  --h-nav:60px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* NIENTE SELEZIONE DEL TESTO: deve comportarsi come un'app, non come una pagina
   web. Un tocco lungo su un pulsante o su una foto non deve evidenziare scritte
   né far comparire il menù "copia/condividi" di iOS. Restano selezionabili i
   campi in cui si SCRIVE (prompt compreso) e, nel pannello admin, i pezzi che
   servono davvero da copiare: codici, endpoint e log. */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* .gd-testo sta nel dettaglio di una generazione: e' un pannello appeso al body
   (fuori da #vista-admin), ed e' testo nato per essere letto e copiato. */
#vista-admin code,#vista-admin pre,#vista-admin .log-pre,#vista-admin .dep-log,.gd-testo{
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* l'attributo [hidden] deve sempre vincere sulle regole di display (es. .navbtn) */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
/* NIENTE "tira giù per aggiornare".
   Sul telefono, trascinando verso il basso quando si è già in cima, il browser
   ricarica la pagina: qui vuol dire buttare via tutto (l'app riparte dallo
   splash e dal primo passo) per un gesto fatto senza volerlo mentre si scorre.
   overscroll-behavior-y:contain lo spegne e blocca anche l'"effetto elastico"
   che si propaga alla pagina quando si arriva in fondo a un elenco interno. */
html{overscroll-behavior-y:contain}
body{
  background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  min-height:100dvh;overflow-x:hidden;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
h2{font-size:21px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
h3{font-size:14px;font-weight:600;color:var(--txt2);margin:24px 0 10px;text-transform:uppercase;letter-spacing:.06em}
.sub{color:var(--txt2);font-size:14px;margin:0 0 18px}

/* ---------- ICONE ---------- */
.ic{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.18em;flex:none}
.ic-brand{width:1.15em;height:1.15em;vertical-align:-.2em;color:var(--acc2)}
.ic-xl{width:40px;height:40px}

/* ---------- SPLASH AVVIO ---------- */
/* lo splash NON si dissolve piu' a tempo fisso: resta finche' boot() non ha deciso
   login/app, poi JS aggiunge .esci per la dissolvenza (niente blank-flash su Ctrl+F5) */
.splash{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .5s ease}
.splash.esci{opacity:0;visibility:hidden}
.splash-logo{width:auto;height:140px;filter:drop-shadow(0 0 26px rgba(34,211,238,.55));
  animation:sp-in .45s ease forwards;transform-origin:center}
.splash.esci .splash-logo{animation:sp-out .5s ease forwards}
@keyframes sp-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes sp-out{0%{opacity:1;filter:drop-shadow(0 0 26px rgba(34,211,238,.55)) blur(0)}
  100%{opacity:0;transform:scale(1.22) translateY(-26px);filter:drop-shadow(0 0 30px rgba(124,92,255,.4)) blur(6px)}}
@media(prefers-reduced-motion:reduce){.splash{transition:opacity .2s ease}.splash-logo,.splash.esci .splash-logo{animation:sp-in .3s ease forwards}}

/* ---------- schermate ---------- */
.schermata{display:none;min-height:100dvh}
.schermata.attiva{display:block}

/* ---------- AUTH ---------- */
.auth-wrap{max-width:440px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 44px) 22px 44px;
  display:flex;flex-direction:column;min-height:100dvh;justify-content:center}
.brand{display:flex;align-items:center;justify-content:center}
.brand-logo{width:212px;max-width:74%;height:auto;display:block}
.brand-sub{text-align:center;color:var(--txt2);margin:14px 0 30px;font-size:14px}

/* segmented control */
.segmento{display:flex;background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);padding:4px;gap:4px;margin-bottom:18px}
.seg{flex:1;background:none;border:0;color:var(--txt2);padding:11px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;transition:.18s;white-space:nowrap}
.seg.attivo{background:var(--sup3);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.admin-seg{flex-wrap:wrap}
.admin-seg .seg{padding:10px 8px;font-size:13px}

.form-auth{display:none;flex-direction:column;gap:15px}
.form-auth.attivo{display:flex}
label{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--txt2);font-weight:600}
input,textarea,select{
  background:var(--sup);border:1px solid var(--bordo);color:var(--txt);
  padding:13px 14px;border-radius:11px;font-size:16px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s
}
input:focus,textarea:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(124,92,255,.15)}
/* autofill del browser: forza fondo scuro e testo chiaro (altrimenti Chrome/WebKit
   ridipinge il campo con fondo bianco e testo nero, illeggibile sul tema scuro) */
input:-webkit-autofill,input:-webkit-autofill:hover,
input:-webkit-autofill:focus,input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--txt);caret-color:var(--txt);
  -webkit-box-shadow:0 0 0 1000px var(--sup) inset;box-shadow:0 0 0 1000px var(--sup) inset;
  transition:background-color 9999s ease 0s}
input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--sup) inset,0 0 0 3px rgba(124,92,255,.15);
  box-shadow:0 0 0 1000px var(--sup) inset,0 0 0 3px rgba(124,92,255,.15)}
.form-auth .check{flex-direction:row;align-items:center;gap:9px;cursor:pointer;user-select:none}
.form-auth .check input{width:auto;flex:0 0 auto;padding:0;accent-color:var(--acc)}
.nota{color:var(--muted);font-size:12.5px;line-height:1.5;margin:2px 0}
/* riga sotto la lista modelli: dice quale dimensione verra' usata quando il
   modello ne produce una sola e il passo della scelta viene saltato */
.nota-dim{text-align:center;margin:6px 0 2px}
.link-testo{background:none;border:0;color:var(--acc2);font-size:13px;padding:8px;cursor:pointer}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:12px;padding:14px 18px;font-size:15px;font-weight:700;
  cursor:pointer;text-decoration:none;transition:transform .08s,filter .2s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn-primario{background:var(--grad);color:#0b0d12;box-shadow:0 6px 18px rgba(124,92,255,.3)}
.btn-primario .ic{color:#0b0d12}
.btn-ghost{background:var(--sup3);color:var(--txt2);border:1px solid var(--bordo)}
.barra-azioni{display:flex;gap:10px;margin-top:20px}
.barra-azioni .btn-primario{flex:1}
.barra-azioni .btn-ghost{flex:0 0 auto;min-width:52px}
.msg{font-size:14px;text-align:center;margin-top:14px;min-height:20px;line-height:1.5}
.msg.ok{color:var(--ok)} .msg.ko{color:var(--ko)}

/* ---------- TOPBAR / NAV ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;background:rgba(11,13,18,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bordo)}
.brand-mini{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.brand-mini-logo{height:24px;width:auto;display:block}
.topbar-dx{display:flex;align-items:center;gap:10px}
/* scorciatoia "Installa": visibile solo quando c'e' davvero da installare */
.btn-installa{display:inline-flex;align-items:center;gap:5px;background:var(--sup3);border:1px solid var(--bordo2);
  color:var(--txt);font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;cursor:pointer}
.btn-installa .ic{width:14px;height:14px;color:var(--acc2)}
.btn-installa:active{transform:scale(.97)}
@media(max-width:380px){.btn-installa span{display:none}.btn-installa{padding:6px 8px}}
.saldo{display:flex;align-items:center;gap:7px;background:var(--sup2);border:1px solid var(--bordo);color:var(--acc2);
  font-weight:700;padding:8px 14px;border-radius:999px;font-size:14px;white-space:nowrap;flex:0 0 auto}
/* pillola "foto gratis rimaste": verde, accanto al saldo, sempre sott'occhio */
.saldo-gratis{background:rgba(46,204,113,.14);border-color:rgba(46,204,113,.35);color:var(--ok);padding:8px 12px}
/* col saldo affiancato dalla pillola il nome dell'app può doversi stringere */
.brand-mini{min-width:0;overflow:hidden}
.brand-mini-logo{flex:0 0 auto}
/* --- selettore lingua: sigla azzurrina + menu a tendina in stile sito --- */
.lingua-scelta{display:flex;justify-content:center;margin:0 0 20px}
.lingua-dd{position:relative;display:inline-flex}
.lingua-dd-trigger{background:none;border:0;cursor:pointer;font-family:inherit;
  color:var(--acc2);font-weight:700;font-size:14px;letter-spacing:.6px;
  padding:6px 8px;display:inline-flex;align-items:center;gap:4px;line-height:1}
.lingua-dd-trigger::after{content:'▾';font-size:10px;opacity:.85;transition:transform .15s}
.lingua-dd.aperto .lingua-dd-trigger::after{transform:rotate(180deg)}
.lingua-dd-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  background:var(--sup);border:1px solid var(--bordo);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);padding:6px;min-width:168px;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .14s,transform .14s}
.lingua-dd.aperto .lingua-dd-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.lingua-dd-opt{width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--txt)}
.lingua-dd-opt:hover{background:var(--sup2)}
.lingua-dd-opt.sel{background:var(--sup2)}
.lingua-dd-opt .ldd-cod{color:var(--acc2);font-weight:700;font-size:12px;letter-spacing:.5px;min-width:24px}
.lingua-dd-opt .ldd-nome{color:var(--txt2)}
.lingua-dd-opt:hover .ldd-nome,.lingua-dd-opt.sel .ldd-nome{color:var(--txt)}
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;
  background:rgba(16,19,27,.94);backdrop-filter:blur(14px);border-top:1px solid var(--bordo);
  padding:8px 4px var(--safe-b)}
.navbtn{flex:1;background:none;border:0;color:var(--muted);font-size:11px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;cursor:pointer;transition:color .15s}
.navbtn .ic{width:22px;height:22px}
.navbtn.attivo{color:var(--acc2)}

/* ---------- VISTE ---------- */
.vista{display:none;padding:20px 18px 120px;max-width:680px;margin:0 auto}
.vista.attiva{display:block}
.titolo-vista{margin:6px 0 20px}

/* ---------- WIZARD ---------- */
.passi{display:flex;gap:6px;margin-bottom:22px}
.passo-p{flex:1;height:4px;border-radius:2px;background:var(--sup3);transition:background .3s,box-shadow .3s}
/* step completati: viola pieno (colore app) con glow marcato */
.passo-p.on{background:var(--acc);
  box-shadow:0 0 4px var(--acc),0 0 11px rgba(124,92,255,.95),0 0 22px rgba(124,92,255,.55)}
/* step corrente: ciano (secondo colore app) con glow pulsante */
.passo-p.attuale{background:var(--acc2);
  box-shadow:0 0 5px var(--acc2),0 0 12px rgba(34,211,238,.95),0 0 24px rgba(34,211,238,.6);
  animation:passoPulse 1.6s ease-in-out infinite}
@keyframes passoPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
/* banner del regalo di benvenuto in cima al wizard: dice a chiare lettere che
   finché ci sono foto gratis si crea senza spendere crediti */
.banner-gratis{display:flex;align-items:flex-start;gap:9px;margin:-8px 0 18px;padding:11px 14px;
  border-radius:var(--r2);font-size:13.5px;line-height:1.45;
  background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.32);color:var(--txt2)}
/* icona allineata alla PRIMA riga (il testo va a capo su 2-3 righe) */
.banner-gratis .ic{flex:0 0 auto;color:var(--ok);margin-top:1px}
.banner-gratis span{flex:1;min-width:0}
.banner-gratis b{color:var(--ok)}
.step{display:none;animation:entra .32s cubic-bezier(.2,.7,.3,1)}
.step.attivo{display:block}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.scelta-foto{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.tile-foto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--sup);border:1.5px solid var(--bordo);border-radius:var(--r3);padding:38px 12px;
  color:var(--txt2);font-weight:600;font-size:14px;cursor:pointer;transition:.2s}
.tile-foto:active{border-color:var(--acc);background:var(--sup2);color:var(--txt)}
.tile-foto .ic{color:var(--acc2)}

.anteprima-box{position:relative;border-radius:var(--r3);overflow:hidden;background:var(--sup);
  border:1px solid var(--bordo);min-height:160px;display:flex;align-items:center;justify-content:center}
#anteprima-input{width:100%;display:block;max-height:34dvh;object-fit:contain}
.anteprima-box.piccola #anteprima-input{max-height:26dvh}
.loader-analisi{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;
  background:rgba(11,13,18,.72);backdrop-filter:blur(3px);color:var(--txt2);font-size:14px}
/* lente d'ingrandimento che scandaglia la foto durante l'analisi:
   dove passa mostra l'immagine ingrandita e nitida sopra il velo scuro */
.lente-analisi{position:absolute;z-index:3;border-radius:50%;pointer-events:none;
  background-repeat:no-repeat;border:2.5px solid #9fb4c8;
  box-shadow:0 0 0 1.5px rgba(20,26,36,.9),0 0 16px rgba(34,211,238,.4),inset 0 0 14px rgba(0,0,0,.35)}
/* manico della lente (in basso a destra, a 45°) */
.lente-analisi::before{content:"";position:absolute;left:79%;top:79%;width:56%;height:15%;
  transform:rotate(45deg);transform-origin:8% 50%;border-radius:10px;
  background:linear-gradient(180deg,#2a3648,#0d1219);border:1.5px solid #9fb4c8;
  box-shadow:0 0 10px rgba(34,211,238,.3)}
.lente-analisi::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.18),transparent 42%)}
.spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--bordo2);border-top-color:var(--acc);animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.nota-analisi{margin:12px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted);
  background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.25);border-radius:10px;padding:10px 12px}
.nota-analisi b{color:var(--warn)}
/* analisi come scheda SOTTO l'immagine, ben leggibile */
.analisi-esito{display:none;margin-top:14px;background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r2);
  padding:14px 16px;font-size:14.5px;line-height:1.55;color:var(--txt2)}
.analisi-esito.mostra{display:block;animation:entra .3s}
.analisi-esito b{color:var(--acc2)}
.analisi-esito .ae-tit{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}

/* formati */
.griglia-formati{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chip-formato{position:relative;overflow:hidden;background:var(--sup);border:1.5px solid var(--bordo);border-radius:var(--r2);
  padding:18px 8px 14px;text-align:center;cursor:pointer;transition:.15s;position:relative;overflow:visible}
.chip-formato .rett{margin:0 auto 10px;background:var(--sup3);border:1.5px solid var(--muted);border-radius:3px}
.chip-formato.sel{border-color:var(--acc);background:var(--sup2)}
.chip-formato.sel .rett{border-color:var(--acc2);background:var(--acc2)}
.chip-formato .cod{font-weight:700;font-size:14px}
.chip-formato small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
/* bollino verde con spunta = consigliato */
.chip-formato.sel .badge-sugg{display:none}
.chip-formato .badge-sugg{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;
  background:var(--ok);color:#0b0d12;display:flex;align-items:center;justify-content:center;
  border:2.5px solid var(--bg);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.chip-formato .badge-sugg .ic{width:15px;height:15px}
.chip-formato.sel{box-shadow:0 0 0 1px var(--acc)}

/* sezione "Altri modelli disponibili" richiudibile (chiusa di default) */
.sez-disp{margin-top:6px}
.sez-disp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none}
.sez-disp>summary::-webkit-details-marker{display:none}
.sez-disp>summary h3{margin:24px 0 10px}
.sez-disp>summary .ic{width:18px;height:18px;color:var(--muted);transition:transform .2s;margin-top:14px}
.sez-disp[open]>summary .ic{transform:rotate(90deg)}

/* step prompt facoltativo */
.pill-fac{display:inline-block;font-size:11px;font-weight:800;color:var(--acc2);background:rgba(34,211,238,.14);
  padding:3px 10px;border-radius:999px;vertical-align:middle;margin-left:8px;text-transform:uppercase;letter-spacing:.05em}

/* categorie */
.griglia-categorie{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chip-cat{position:relative;overflow:hidden;background:var(--sup);border:1.5px solid var(--bordo);border-radius:var(--r2);padding:18px 8px;
  text-align:center;cursor:pointer;font-size:13px;font-weight:600;transition:.15s;color:var(--txt2)}
.chip-cat .ic{width:28px;height:28px;color:var(--txt2);margin-bottom:8px;transition:.15s}
.chip-cat.sel{border-color:var(--acc);background:var(--sup2);color:var(--txt)}
.chip-cat.sel .ic{color:var(--acc2)}

/* chat prompt */
.chat{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;min-height:4px}
.bolla{max-width:85%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.45}
.bolla.utente{align-self:flex-end;background:var(--grad);color:#0b0d12;font-weight:500;border-bottom-right-radius:5px}
.input-voce{display:flex;gap:10px;align-items:flex-end}
.input-voce textarea{flex:1;resize:none;min-height:108px;max-height:32dvh;overflow-y:auto}
.btn-mic{flex:0 0 52px;height:52px;border-radius:50%;border:1px solid var(--bordo);background:var(--sup3);color:var(--txt);cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}
.btn-mic .ic{width:22px;height:22px}
.btn-mic.rec{background:var(--ko);border-color:var(--ko);color:#fff;animation:pulsa 1.2s infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(255,93,108,.5)}50%{box-shadow:0 0 0 12px rgba(255,93,108,0)}}
.stato-reg{font-size:12.5px;color:var(--warn);min-height:16px;margin-top:8px}

/* ---------- CATALOGO MODELLI ---------- */
.catalogo-toolbar{position:sticky;top:calc(env(safe-area-inset-top) + 58px);z-index:10;background:var(--bg);padding:2px 0 12px;margin-bottom:4px}
.campo-ricerca{display:flex;align-items:center;gap:10px;background:var(--sup);border:1px solid var(--bordo);border-radius:11px;padding:0 14px;margin-bottom:10px}
.campo-ricerca .ic{color:var(--muted)}
.campo-ricerca input{border:0;background:none;padding:12px 0;box-shadow:none!important}
.filtri-riga{display:flex;gap:8px;align-items:center;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.filtri-riga::-webkit-scrollbar{display:none}
.filtri{display:flex;gap:6px;flex:none}
.fchip{background:var(--sup);border:1px solid var(--bordo);color:var(--txt2);font-size:12.5px;font-weight:600;
  padding:8px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.15s}
.fchip.on{background:var(--sup3);border-color:var(--acc);color:var(--txt)}
.btn-ordina{display:flex;align-items:center;gap:6px;background:var(--sup);border:1px solid var(--bordo);color:var(--txt2);
  font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;flex:none}
.btn-ordina .ic{width:15px;height:15px}

.griglia-modelli{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:390px){.griglia-modelli{grid-template-columns:1fr}}
.card-modello{background:var(--sup);border:1.5px solid var(--bordo);border-radius:var(--r2);padding:14px;cursor:pointer;
  transition:.15s;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.card-modello:active{transform:scale(.99)}
.card-modello.sel{border-color:var(--acc);background:var(--sup2)}
/* selezione uniforme in TUTTO il wizard: angolo alto-destra pieno + spunta
   (stesso stile per modello, dimensione, formato e categoria) */
.card-modello.sel::after,.card-ris.sel::after,.chip-formato.sel::after,.chip-cat.sel::after{
  content:"";position:absolute;top:0;right:0;width:0;height:0;
  border:16px solid transparent;border-top-color:var(--acc);border-right-color:var(--acc)}
.card-modello.sel .spunta,.card-ris.sel .spunta,.chip-formato.sel .spunta,.chip-cat.sel .spunta{opacity:1}
.spunta{position:absolute;top:2px;right:2px;z-index:2;color:#0b0d12;opacity:0}
.spunta .ic{width:13px;height:13px}
.m-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.m-nome{font-weight:700;font-size:15px;line-height:1.2}
.m-costo{color:var(--acc2);font-weight:800;font-size:17px;white-space:nowrap}
.m-desc{color:var(--muted);font-size:12px;line-height:1.4;flex:1}
.m-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
.badge .ic{width:12px;height:12px}
.badge-prov{background:var(--sup3);color:var(--txt2)}
.badge-locale{background:rgba(124,92,255,.16);color:var(--acc)}
.badge-stato{text-transform:none;letter-spacing:0}
.badge-stato .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.badge-stato.ok{background:rgba(46,204,113,.14);color:var(--ok)}
.badge-stato.ok .dot{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.badge-stato.ko{background:rgba(255,93,108,.14);color:var(--ko)}
.badge-stato.ko .dot{background:var(--ko)}
.card-modello.off{opacity:.5;filter:saturate(.6)}
.badge-eco{background:rgba(46,204,113,.14);color:var(--ok)}
.badge-std{background:rgba(34,211,238,.14);color:var(--acc2)}
.badge-prem{background:rgba(255,176,32,.16);color:var(--warn)}
.badge-tempo{background:var(--sup3);color:var(--muted);text-transform:none;letter-spacing:0}
.badge-tempo.reale{background:rgba(124,92,255,.14);color:var(--acc)}
.m-res{color:var(--muted);font-size:11px;margin-left:auto}
.card-modello.caro{opacity:.5}
.card-modello.caro .m-costo{color:var(--ko)}
/* la barra Genera resta appiccicata SOPRA la bottomnav: l'offset deve superarne
   l'altezza (--h-nav) o il pulsante finisce mezzo nascosto dietro la barra */
.sticky-genera{position:sticky;bottom:calc(var(--safe-b) + var(--h-nav) + 12px);background:linear-gradient(transparent,var(--bg) 30%);padding-top:14px;z-index:9}

/* ---------- PALCO ---------- */
/* quadrato dimensionato per stare SEMPRE in pagina con titolo e pulsanti (niente scroll) */
.palco{position:relative;width:min(46dvh,420px,calc(100vw - 48px));height:min(46dvh,420px,calc(100vw - 48px));
  margin:10px auto;border-radius:var(--r3);overflow:hidden;background:#000;border:1px solid var(--bordo)}
#img-risultato{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;animation:rivela .8s ease}
@keyframes rivela{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:none}}
/* RISULTATO: tutto DEVE stare in pagina, senza scroll. Il palco prende le
   PROPORZIONI REALI dell'immagine ma con altezza limitata (--foto-max) così sotto
   resta sempre spazio per i pulsanti Modifica/Nuova; la larghezza si adatta
   (niente ritaglio, niente bande nere).
   I 282px riservati comprendono topbar, passi, titolo, riga Modifica/Nuova E la
   bottomnav fissa in basso (vedi il padding-bottom di .modo-risultato). */
#step-genera.risultato{--foto-max:calc(100dvh - 282px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
/* riga vuota del messaggio d'errore: nel risultato non serve, si riprende lo spazio */
#step-genera.risultato #genera-msg:empty{display:none}
.palco.finito{width:fit-content;max-width:100%;height:auto;max-height:var(--foto-max,60dvh);
  aspect-ratio:auto;margin:4px auto 0;background:transparent;border:none;overflow:visible}
.palco.finito #img-risultato{position:static;inset:auto;display:block;width:auto;height:auto;
  max-width:100%;max-height:var(--foto-max,60dvh);object-fit:contain;border-radius:var(--r3)}
/* ---------- CONFRONTO PRIMA/DOPO ----------
   La foto di PARTENZA sta sopra il risultato e viene ritagliata (clip-path) dal
   cursore verticale: a sinistra il prima, a destra il dopo. object-fit:cover
   perche' l'AI spesso cambia le proporzioni: cosi' le due immagini restano
   allineate al centro invece di comparire una rimpicciolita dentro l'altra. */
.cmp-orig{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;
  user-select:none;-webkit-user-drag:none;pointer-events:none;border-radius:inherit}
/* briciole: la striscia di "prima" che si sgretola in pixel mentre la barra
   scorre — sia da sola sia trascinata a mano. Vive il tempo del movimento e
   poi svanisce. Nel viewer sta DENTRO la pila, quindi segue zoom e spostamento. */
.cmp-briciole{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;
  transition:opacity .3s}
.cmp-maniglia{position:absolute;top:0;bottom:0;width:0;z-index:4;
  border-left:2px solid rgba(255,255,255,.92);box-shadow:0 0 12px rgba(0,0,0,.55);
  cursor:ew-resize;touch-action:none}
/* area di presa invisibile: la linea è di 2px, col dito sarebbe inafferrabile */
.cmp-maniglia::before{content:'';position:absolute;top:0;bottom:0;left:-15px;width:32px}
/* presa centrale: l'area toccabile e' molto piu' larga della linea */
.cmp-presa{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:0;
  background:rgba(10,12,18,.72);border:1px solid rgba(255,255,255,.35);color:#fff;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.cmp-presa .ic{width:15px;height:15px;margin:0 -2px}
/* etichette al centro verticale, ai due lati del pallino (fuori dai 44px della
   presa): così non toccano né i tasti in alto (risultato) né "tieni premuto"
   in basso (viewer) */
.cmp-et{position:absolute;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 10px;line-height:1;border-radius:999px;white-space:nowrap;pointer-events:none;
  background:rgba(10,12,18,.66);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cmp-et.sx{right:30px} .cmp-et.dx{left:30px}
/* mentre si tiene premuto "originale" il cursore sparisce: si vede la foto intera */
.cmp-tenuto .cmp-maniglia{opacity:0;pointer-events:none}
.btn-flo.premuto{background:rgba(34,211,238,.9);border-color:transparent;color:#0b0d12}
/* pulsante "tieni premuto" del viewer: in basso al centro, a portata di pollice */
.btn-tieni{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 18px);z-index:261;
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;
  background:rgba(10,12,18,.72);border:1px solid rgba(255,255,255,.28);color:#fff;
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;touch-action:none;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.btn-tieni.premuto{background:rgba(34,211,238,.92);border-color:transparent;color:#0b0d12}

/* Scarica/Condividi: pillole flottanti in alto a destra, sopra la foto */
.azioni-flottanti{position:absolute;top:8px;right:8px;z-index:5;display:flex;gap:8px}
.btn-flo{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;
  background:rgba(10,12,18,.6);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;text-decoration:none;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);transition:background .15s}
.btn-flo:hover{background:rgba(20,23,32,.82)}
.btn-flo .ic{width:19px;height:19px;flex:0 0 auto}
.btn-flo span:empty{display:none}
#btn-scarica{background:rgba(124,92,255,.86);border-color:transparent}
#btn-scarica:hover{background:rgba(124,92,255,1)}
.btn-flo.ok,#btn-scarica.ok{background:rgba(31,157,85,.92);border-color:transparent}
/* pulsanti finali sotto la foto: Modifica (primario) + Nuova (ghost) */
.azioni-risultato{display:flex;gap:10px;max-width:420px;width:100%;margin:12px auto 0}
.azioni-risultato .btn{flex:1}
.azioni-risultato .btn span:empty{display:none}
/* modo risultato: recupera spazio verticale per non aprire lo scroll, ma SEMPRE
   lasciando sotto lo spazio della bottomnav fissa — altrimenti Modifica/Nuova (e
   il box Rigenera) finiscono sotto la barra e diventano invisibili/non cliccabili.
   Se il contenuto eccede, la pagina scorre e i pulsanti restano raggiungibili. */
#vista-crea.modo-risultato{padding-bottom:calc(var(--h-nav) + var(--safe-b))}
#vista-crea.modo-risultato .passi{margin-bottom:10px}
/* nel risultato ogni pixel serve alla foto: il banner "foto gratis" si toglie
   (il toast a fine generazione dice già quante ne restano) */
#vista-crea.modo-risultato .banner-gratis{display:none}
#step-genera.risultato h2{margin:2px 0 6px}
/* box "Rigenera": integrazione del prompt */
.rigenera-box{max-width:420px;width:100%;margin:12px auto 0}
.rigenera-box textarea{width:100%;resize:none;min-height:66px}
.rigenera-azioni{display:flex;gap:10px;margin-top:8px}
.rigenera-azioni .btn{flex:1}
.btn .mini-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:gira 1s linear infinite}

/* ---------- animazione generazione: ologramma (stile Prompt Studio) ---------- */
.holo-gen{position:absolute;inset:0;z-index:1;overflow:hidden;transform-origin:50% 50%;
  background:radial-gradient(circle at 50% 42%,#191433,#07060f 72%)}
.holo-gen .hg-bg{position:absolute;inset:-14%;background-size:cover;background-position:center;
  filter:blur(15px) saturate(1.4) brightness(.82);opacity:.95;
  animation:hgDrift 10s ease-in-out infinite;will-change:transform}
@keyframes hgDrift{0%,100%{transform:scale(1.1) translate(0,0)}50%{transform:scale(1.22) translate(2%,-3%)}}
.holo-gen .hg-grid{position:absolute;inset:0;opacity:.3;
  background:linear-gradient(rgba(124,92,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,92,255,.12) 1px,transparent 1px);
  background-size:15px 15px;animation:hgGridpan 5s linear infinite}
@keyframes hgGridpan{to{background-position:0 15px,15px 0}}
/* copia più nitida "rivelata a flusso punteggiato": una banda di puntini scorre
   dall'alto in basso e mostra a colpi pezzi dell'immagine che si materializza */
.holo-gen .hg-reveal{position:absolute;inset:-14%;background-size:cover;background-position:center;
  filter:blur(2px) saturate(1.9) brightness(1.42) contrast(1.12);transform:scale(1.1);pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 50%,transparent 60%),
    linear-gradient(180deg,transparent,#000 36%,#000 64%,transparent);
  mask-image:radial-gradient(circle,#000 50%,transparent 60%),
    linear-gradient(180deg,transparent,#000 36%,#000 64%,transparent);
  -webkit-mask-size:4px 4px,100% 50%;mask-size:4px 4px,100% 50%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mix-blend-mode:screen;animation:hgSweep 1.7s linear infinite}
@keyframes hgSweep{0%{-webkit-mask-position:0 0,0 -55%;mask-position:0 0,0 -55%}
  100%{-webkit-mask-position:0 0,0 130%;mask-position:0 0,0 130%}}
/* secondo flusso in controfase: raddoppia la "materia che scorre" */
.holo-gen .hg-reveal2{position:absolute;inset:-14%;background-size:cover;background-position:center;
  filter:blur(3px) saturate(1.7) brightness(1.3);transform:scale(1.1);pointer-events:none;opacity:.7;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,transparent 70%);
  mask-image:linear-gradient(180deg,transparent,#000 45%,transparent 70%);
  -webkit-mask-size:100% 60%;mask-size:100% 60%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  mix-blend-mode:screen;animation:hgSweep2 2.3s linear infinite}
@keyframes hgSweep2{0%{-webkit-mask-position:0 130%;mask-position:0 130%}
  100%{-webkit-mask-position:0 -60%;mask-position:0 -60%}}
/* velo blu leggero: dà la tinta senza nascondere l'immagine */
.holo-gen .hg-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(12,9,28,.20),rgba(10,8,24,.55) 98%),
    linear-gradient(rgba(124,92,255,.14),rgba(34,211,238,.10))}
/* puntini luminosi che salgono */
.holo-gen .hg-parts{position:absolute;inset:0}
.holo-gen .hg-parts i{position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,#f4feff,#a5ecf7 70%);
  box-shadow:0 0 10px 3px rgba(165,236,247,.95),0 0 22px 7px rgba(124,92,255,.55);
  animation:hgFloat linear infinite}
@keyframes hgFloat{0%{transform:translateY(18px) scale(.35);opacity:0}
  14%{opacity:1}78%{opacity:.75}100%{transform:translateY(-52px) scale(1.35);opacity:0}}
/* percentuale olografica al centro */
.holo-gen .hg-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-shadow:0 0 14px rgba(124,92,255,.85);pointer-events:none}
.holo-gen .hg-pc{font-size:36px;font-weight:800;letter-spacing:1px;color:var(--txt);
  font-variant-numeric:tabular-nums;animation:hgFlick 3.4s ease-in-out infinite;
  text-shadow:0 0 14px rgba(124,92,255,.9),0 2px 12px rgba(0,0,0,.85)}
.holo-gen .hg-lbl{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#8fe8f5;margin-top:4px;
  text-shadow:0 1px 8px rgba(0,0,0,.85)}
@keyframes hgFlick{0%,100%{opacity:1}47%{opacity:.9}50%{opacity:.55}53%{opacity:.92}}
/* spegnimento "televisore catodico": collassa in una riga luminosa, poi un punto, poi buio */
.holo-gen.crt-off{animation:crtOff .5s cubic-bezier(.65,0,.85,1) forwards}
@keyframes crtOff{
  0%{transform:scale(1,1);filter:brightness(1)}
  55%{transform:scale(1,.012);filter:brightness(5)}
  80%{transform:scale(.45,.008);filter:brightness(8)}
  96%{transform:scale(.02,.006);filter:brightness(12);opacity:1}
  100%{transform:scale(.004,.004);filter:brightness(12);opacity:0}}

/* ---------- VIEWER A TUTTO SCHERMO (zoom/pan) ---------- */
.viewer{position:fixed;inset:0;z-index:260;background:rgba(5,6,10,.97);overflow:hidden;touch-action:none;
  display:flex;align-items:center;justify-content:center;
  /* lo spazio della tacca, letto dal JS per non infilare il tasto chiudi sotto */
  --sat:env(safe-area-inset-top, 0px)}
.viewer[hidden]{display:none} /* display:flex sovrascriverebbe l'attributo hidden: lo riaffermo */
/* zoom e trascinamento agiscono sulla PILA (risultato + originale sovrapposti),
   così le due immagini restano incollate tra loro a qualsiasi ingrandimento.
   La pila è centrata dal flex del contenitore: la transform JS è un OFFSET dal centro,
   così l'immagine resta sempre centrata alla pagina all'apertura (0,0 = centrata). */
/* La foto è incorniciata: un margine attorno (vedi VIEWER_MARGINE in app.js) e
   gli angoli arrotondati. Raggio e filo del bordo li scrive il JS DIVISI per lo
   zoom: dentro un elemento ingrandito col transform anche loro si ingrandirebbero,
   e a foto zoomata l'arrotondamento sarebbe diventato enorme. */
.viewer-pila{position:relative;flex:none;transform-origin:center center;will-change:transform;
  overflow:hidden}
.viewer-pila img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;
  user-select:none;-webkit-user-drag:none}
/* nel viewer l'altezza della barra la calcola il JS (si ferma ai bordi della foto):
   serve bottom:auto, se no top+bottom la stirerebbero per tutto lo schermo */
#viewer-cmp{bottom:auto}
/* Il tasto chiudi sta DENTRO la cornice della foto, in alto a destra: la sua
   posizione la calcola il JS sui bordi veri dell'immagine, se no su uno schermo
   largo finiva lontanissimo dalla foto, in un angolo di nero. Stesso vetro
   smerigliato del tasto "tieni premuto" qui sotto. */
.viewer-chiudi{position:fixed;z-index:261;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(10,12,18,.72);border:1px solid rgba(255,255,255,.28);color:#fff;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.viewer-chiudi:hover{background:rgba(20,23,32,.9)}
.viewer-chiudi .ic{width:20px;height:20px}
#img-risultato{cursor:zoom-in}

/* ---------- GALLERIA ---------- */
.galleria{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
/* SCHEDA DI GALLERIA.
   Prima i comandi stavano tutti e cinque in fila sopra la foto: sul telefono,
   dove ogni scheda e' larga poco piu' di 160px, diventavano illeggibili. Ora
   sono divisi come in una scheda vera: i due "porta via la foto" (scarica e
   condividi) restano SULLA foto, discreti nell'angolo; il resto sta SOTTO, su
   una riga sua, dove c'e' spazio per scriverci anche l'etichetta. */
.g-card{display:flex;flex-direction:column;margin:0;background:var(--sup);
  border:1px solid var(--bordo);border-radius:var(--r2);overflow:hidden;transition:.15s}
.g-card:hover{border-color:var(--bordo2)}
.g-foto{position:relative;line-height:0}
.galleria img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;cursor:pointer}
.galleria img:active{transform:scale(.99)}
/* i due comandi sopra la foto: in alto a destra, su vetro smerigliato */
.g-sopra{position:absolute;top:8px;right:8px;display:flex;gap:6px}
.g-az{width:34px;height:34px;flex:0 0 auto;border-radius:10px;cursor:pointer;line-height:0;
  background:rgba(10,12,18,.62);border:1px solid rgba(255,255,255,.22);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.15s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.g-az .ic{width:16px;height:16px}
.g-az:hover{background:rgba(20,23,32,.92);border-color:rgba(255,255,255,.38)}
.g-az:active{transform:scale(.94)}
.g-az:disabled{opacity:.45;cursor:default}
/* la riga di comandi sotto la foto */
/* I due tasti con la scritta vanno a capo se la scheda e' stretta, invece di
   schiacciare le etichette fino a farle sparire: su una griglia a due colonne
   "Rigenera" e "Prompt" affiancati non ci stanno, e prima la scritta veniva
   tagliata via del tutto lasciando solo l'icona. */
.g-piede{display:flex;align-items:center;gap:6px;padding:8px;flex-wrap:wrap}
.g-piede .g-az{background:var(--sup3);border-color:var(--bordo);color:var(--txt2);backdrop-filter:none}
.g-piede .g-az:hover{background:var(--sup2);border-color:var(--bordo2);color:var(--txt)}
.g-az-ko{color:var(--ko)}
.g-piede .g-az-ko{color:var(--ko)}
/* "Rigenera" e' l'azione principale della scheda: prende tutto lo spazio che
   avanza e porta l'etichetta, cosi' non e' un geroglifico da interpretare */
/* "Rigenera" e' l'azione principale della scheda, quindi ha il colore del marchio
   come tutti i pulsanti che fanno qualcosa di importante. Non prende piu' tutto lo
   spazio che avanza: ne lascia al tasto dei prompt, che da solo era un quadratino
   anonimo. */
.g-piede .g-principale{flex:1 1 auto;min-width:0;width:auto;gap:6px;padding:0 12px;
  font-family:inherit;font-size:12.5px;font-weight:700;
  background:var(--grad);color:#0b0d12;
  /* NIENTE bordo, nemmeno trasparente: il bordo fa comunque parte dell'area su
     cui viene dipinta la sfumatura, e sull'angolo arrotondato quel filo di un
     pixel usciva sfalsato, come una velatura di un altro colore sul bordo
     sinistro. Senza bordo il colore parte pulito. Le misure non cambiano: il
     box-sizing e' border-box. */
  border:0;
  box-shadow:0 4px 14px rgba(124,92,255,.28)}
.g-piede .g-principale .ic{color:#0b0d12}
.g-piede .g-principale:hover{background:var(--grad);filter:brightness(1.06);border-color:transparent}
/* il tasto dei prompt e' piu' largo degli altri: ci sta un'icona leggibile e si
   capisce che non e' un semplice quadratino */
/* il tasto dei prompt porta la sua scritta e ha lo stesso comportamento del
   principale, ma resta grigio: e' una scorciatoia da amministratore, non
   l'azione della scheda */
.g-piede .g-az-prompt{width:auto;flex:1 1 auto;padding:0 12px;
  background:var(--sup3);border:1px solid var(--bordo);color:var(--txt2);box-shadow:none}
.g-piede .g-az-prompt .ic{color:inherit}
.g-piede .g-az-prompt:hover{background:var(--sup2);border-color:var(--bordo2);color:var(--txt);filter:none}
.g-piede .g-principale span{white-space:nowrap}
.g-piede .g-principale{min-width:max-content}
.galleria img:active{transform:scale(.98)}
.vuoto{color:var(--muted);text-align:center;padding:50px 16px}

/* ---------- CREDITI ---------- */
.card-saldo{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r3);padding:26px;text-align:center;box-shadow:var(--ombra)}
.saldo-label{color:var(--txt2);font-size:13px;font-weight:600}
.saldo-grande{font-size:46px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:6px 0}
/* banner foto gratis di benvenuto ancora disponibili */
.foto-bonus{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:7px 14px;border-radius:999px;
  background:rgba(124,92,255,.15);color:var(--acc);font-size:13px;font-weight:700}
.foto-bonus .ic{width:1.05em;height:1.05em}
.movimenti{display:flex;flex-direction:column;gap:8px}
.mov{display:flex;justify-content:space-between;gap:12px;background:var(--sup);border:1px solid var(--bordo);border-radius:12px;padding:13px 15px;font-size:13px;align-items:center}
.mov .m-desc2{color:var(--txt);font-weight:500} .mov .m-data{color:var(--muted);font-size:11px;margin-top:2px}
.mov .m-imp{font-weight:800;white-space:nowrap;font-size:15px}
.mov .m-imp.pos{color:var(--ok)} .mov .m-imp.neg{color:var(--ko)}

/* ---------- ADMIN ---------- */
.apannello{display:none} .apannello.attivo{display:block;animation:entra .25s}
.admin-grid{display:grid;grid-template-columns:1fr;gap:10px}
.admin-2col{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}

/* Desktop: pannello admin largo, due colonne, liste multi-colonna */
@media(min-width:760px){
  #vista-admin{max-width:1180px;padding-bottom:60px}
  #vista-galleria,#vista-crediti{max-width:900px}
  .admin-seg{max-width:760px}
  .admin-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .admin-2col{grid-template-columns:380px 1fr}
  .admin-form-col{position:sticky;top:80px}
  .form-admin{margin-bottom:0}
}
@media(hover:hover){
  .riga-admin{transition:border-color .15s}
  .riga-admin:hover{border-color:var(--bordo2)}
  .card-modello:hover{border-color:var(--bordo2)}
  .or-card:hover{border-color:var(--bordo2)}
  .btn-mini:hover{background:var(--bordo)}
  .fchip:hover{border-color:var(--bordo2)}
}

/* catalogo OpenRouter (griglia selezionabile) */
.catalogo-or{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r2);padding:14px;margin-bottom:18px}
.cat-or-testa{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.cat-or-testa h4{margin:0;font-size:15px;font-weight:700}
.cat-or-sub{color:var(--muted);font-size:12px}
.or-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;gap:10px}
.or-card{position:relative;background:var(--sup2);border:1.5px solid var(--bordo);border-radius:12px;padding:12px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:8px}
.or-card:active{transform:scale(.98)}
.or-card.sel{border-color:var(--acc);background:var(--sup3)}
.or-card.sel .spunta{opacity:1}
.or-card .spunta{position:absolute;top:8px;right:8px;color:var(--acc2);opacity:0}
.or-card .spunta .ic{width:16px;height:16px}
.or-nome{font-weight:700;font-size:14px;line-height:1.2;padding-right:20px}
.or-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.or-prezzo{color:var(--acc2);font-size:11px;font-weight:700}
.or-codice{display:block;background:var(--sup);border:1px solid var(--bordo);color:var(--txt2);font-size:10.5px;padding:4px 7px;border-radius:6px;word-break:break-all}

/* tabella modelli / prezzi */
.tabella-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bordo);border-radius:var(--r2);background:var(--sup)}
table.tab-modelli,table.tab-prezzi{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.tab-modelli th,.tab-prezzi th{text-align:left;padding:11px 12px;color:var(--txt2);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--bordo);white-space:nowrap;background:var(--sup2);position:sticky;top:0}
.tab-modelli td,.tab-prezzi td{padding:10px 12px;border-bottom:1px solid var(--bordo);vertical-align:middle}
.tab-modelli tbody tr:last-child td,.tab-prezzi tbody tr:last-child td{border-bottom:0}
.tab-modelli th.sortable{cursor:pointer;user-select:none}
.tab-modelli th.sortable.on{color:var(--acc2)}
.tab-modelli th.sortable:hover{color:var(--txt)}
.tab-modelli tr.r-attivo{background:rgba(124,92,255,.06)}
.c-nome b{display:block;font-size:13.5px}
.c-nome code{font-size:10.5px;color:var(--muted)}
.c-prezzo b{color:var(--acc2);font-size:14px;display:block}
.c-prezzo small{color:var(--muted);font-size:10.5px}
.tab-prezzi .sug{color:var(--txt2)}
.tab-prezzi input[type=number]{padding:8px 10px;font-size:14px;max-width:120px}

/* switch toggle */
.switch{position:relative;display:inline-block;width:40px;height:23px;cursor:pointer}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:var(--sup3);border:1px solid var(--bordo2);border-radius:999px;transition:.2s}
.switch span::before{content:"";position:absolute;width:17px;height:17px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:.2s}
.switch input:checked + span{background:var(--acc);border-color:var(--acc)}
.switch input:checked + span::before{transform:translateX(17px);background:#fff}

/* ---------- DASHBOARD ---------- */
.dash-loader{display:flex;justify-content:center;padding:50px}
.dash-card{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r2);padding:18px;margin-bottom:14px}
.or-card-big{background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(34,211,238,.08));border-color:var(--bordo2)}
.or-card-big.allarme{background:linear-gradient(135deg,rgba(255,93,108,.15),transparent);border-color:var(--ko)}
.oc-testa{display:flex;justify-content:space-between;align-items:center}
.oc-res{font-size:30px;font-weight:800;color:var(--acc2)}
.or-card-big.allarme .oc-res{color:var(--ko)}
.oc-lab{color:var(--txt2);font-size:13px;margin-top:2px}
.barra{height:8px;background:var(--sup3);border-radius:999px;overflow:hidden;margin:12px 0}
.barra-in{height:100%;background:var(--grad);border-radius:999px;transition:width .5s}
.oc-righe{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--txt2)}
.oc-righe b{color:var(--txt)}
.oc-uso{margin-top:8px;font-size:11.5px;color:var(--muted)}

.stat-riga{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
@media(max-width:520px){.stat-riga{grid-template-columns:1fr 1fr}}
.stat{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);padding:14px}
.stat-lab{color:var(--txt2);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.stat-val{font-size:23px;font-weight:800;margin-top:4px}
.stat-sub{color:var(--muted);font-size:11.5px;margin-top:2px}
.stat.pos .stat-val{color:var(--ok)} .stat.neg .stat-val{color:var(--ko)}

.grafico{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px}
.barra-g{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:6px;min-width:0}
.bg-fill{width:70%;max-width:26px;background:var(--grad);border-radius:5px 5px 0 0;min-height:3px;transition:height .4s}
.bg-lab{font-size:9px;color:var(--muted);white-space:nowrap;transform:rotate(-45deg);transform-origin:center;height:14px}
.val-pos{color:var(--ok);font-weight:700} .val-neg{color:var(--ko);font-weight:700}

/* ---------- GRAFICI SERIE (zoomabili) ---------- */
.g2-testa{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0 10px}
.g2-testa h3{margin:0}
.g2-gran{display:inline-flex;background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);padding:3px;gap:2px}
.g2-gran button{background:none;border:0;color:var(--txt2);padding:7px 11px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.g2-gran button:hover{color:var(--txt)}
.g2-gran button.on{background:var(--sup3);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.g2-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.g2-cards{grid-template-columns:1fr}}
.g2-card{margin-bottom:0}
.g2-lab{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--txt2);margin-bottom:6px}
.g2-lab small{color:var(--muted);font-weight:600}
.g2-dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.g2-dot.ric{background:var(--ok)} .g2-dot.uso{background:var(--acc2)}
.g2host{position:relative}
.g2svg{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.g2r{fill:var(--gc);opacity:.85;transition:opacity .12s}
.g2bars:hover .g2r{opacity:.45}
.g2bars .g2r:hover{opacity:1}
.g2g{stroke:var(--bordo);stroke-width:1;stroke-dasharray:2 4}
.g2y{fill:var(--muted);font-size:10px}
.g2x{fill:var(--muted);font-size:10px}
.g2hl{fill:var(--sup3);opacity:.35;pointer-events:none}
.g2tip{position:absolute;z-index:5;pointer-events:none;background:var(--bg);border:1px solid var(--bordo2);
  border-radius:8px;padding:6px 9px;font-size:11.5px;line-height:1.4;box-shadow:0 6px 18px rgba(0,0,0,.4);white-space:nowrap;transform:translateY(-100%)}
.g2tip b{display:block;color:var(--txt);font-size:11px}
.g2tip span{color:var(--txt2)}
.g2-nota{color:var(--muted);font-size:12px;text-align:center;margin-top:6px}

/* ---------- ADMIN PAGAMENTI (Stripe) ---------- */
.stripe-cfg .scfg-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stripe-cfg .scfg-url{margin-top:10px;font-size:12px;color:var(--txt2);word-break:break-all}
.stripe-cfg .scfg-url code{background:var(--sup3);padding:2px 6px;border-radius:5px;color:var(--acc2)}
.stripe-cfg .nota{margin-top:8px}

/* ---------- ADMIN DEPLOY ---------- */
.dep-riga{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--bordo);font-size:13.5px}
.dep-riga:last-child{border-bottom:0}
.dep-riga span{color:var(--txt2)}
.dep-log{background:var(--bg);border:1px solid var(--bordo);border-radius:var(--r);padding:12px;
  font-size:12px;color:var(--txt2);white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;margin:0}

/* ricarico bar */
.ricarico-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r2);padding:14px 16px;margin-bottom:18px}
.ricarico-bar b{font-size:15px}
.ricarico-input{display:flex;align-items:center;gap:8px;color:var(--txt2);font-weight:700}
.ricarico-input input{width:80px;text-align:center}
.sez-testa{display:flex;justify-content:space-between;align-items:center;gap:10px}
.conta{display:inline-block;min-width:22px;text-align:center;background:var(--sup3);color:var(--acc2);border-radius:999px;font-size:12px;padding:2px 8px;margin-left:6px}

/* griglia card modelli */
/* larghezza minima delle schede alzata da 260 a 300px (+15%): con i campi di
   testo dentro, a 260 la descrizione veniva tagliata a meta' parola */
.mod-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:8px 0 6px}
.mod-card{background:var(--sup);border:1.5px solid var(--bordo);border-radius:var(--r2);padding:14px;display:flex;flex-direction:column;gap:10px}
.mod-card.attivo{border-color:rgba(124,92,255,.5);background:linear-gradient(180deg,rgba(124,92,255,.05),transparent)}
.mod-card.dragging{opacity:.4}
/* La scheda NON è più trascinabile tutta (impediva di selezionare il testo nei
   campi): si riordina solo dalla barretta laterale, che si fa spazio col padding. */
.mod-card.attivo{position:relative;padding-left:32px}
/* IN PAUSA: identica in tutto — stessa forma, stessa dimensione, stessi colori —
   solo più trasparente. Cambiare anche il resto la faceva "saltare" e sembrare
   un'altra scheda. I comandi restano usabili: l'opacità è solo un segnale. */
.mod-card.sospeso{opacity:.4}
.badge-pausa{background:rgba(255,176,32,.16);color:var(--warn);border:1px solid rgba(255,176,32,.35)}
.mc-head{display:flex;align-items:flex-start;gap:8px}
.mc-ord{display:flex;flex-direction:column;gap:3px}
.ord-btn{width:26px;height:20px;display:flex;align-items:center;justify-content:center;background:var(--sup3);border:1px solid var(--bordo);border-radius:6px;color:var(--txt2);cursor:pointer;padding:0}
.ord-btn .ic{width:13px;height:13px}
.ord-btn.giu .ic{transform:rotate(90deg)}
.ord-btn.su .ic{transform:rotate(-90deg)}
.ord-btn:disabled{opacity:.3;cursor:default}
.mc-title{flex:1;min-width:0}
.mc-title b{display:block;font-size:14.5px;line-height:1.2}
.mc-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.mc-desc{color:var(--txt2);font-size:12.5px;line-height:1.45;flex:1}
/* codice del modello sulla scheda: piu' modelli hanno lo stesso nome, il codice no */
.mc-cod{display:block;font-size:10.5px;color:var(--muted);background:var(--sup2);border-radius:5px;
  padding:3px 7px;word-break:break-all;margin-top:-4px}
.mc-desc-input{font-size:12.5px;padding:9px 11px}
/* Nome e fornitore MOSTRATI AL CLIENTE: si scrivono qui, cosi' i modelli meno
   noti (e quelli dei nostri nodi) si presentano con un nome nostro. Sotto, in
   grigio, resta il modello vero: serve all'admin e non esce mai dal pannello. */
/* Maniglia: BARRETTA VERTICALE su tutto il lato sinistro della scheda. Deve
   saltare all'occhio, perché è l'unico punto da cui si riordina: il resto della
   scheda è fatto di campi da scrivere e selezionare. */
.mc-drag{position:absolute;left:0;top:0;bottom:0;width:22px;
  display:flex;align-items:center;justify-content:center;
  background:var(--sup2);border-right:1px solid var(--bordo);
  border-radius:calc(var(--r2) - 2px) 0 0 calc(var(--r2) - 2px);
  color:var(--muted);cursor:grab;touch-action:none;user-select:none;
  transition:background .15s,color .15s}
.mc-drag:hover{background:var(--sup3);color:var(--acc2)}
.mc-drag:active,.mod-card.dragging .mc-drag{cursor:grabbing;background:var(--sup3);color:var(--acc2)}
.mc-drag .ic{width:13px;height:13px}
/* pulsante distruttivo (cestino): si deve distinguere dagli altri a colpo d'occhio */
.btn-mini.btn-pericolo{color:var(--ko);border-color:rgba(255,93,108,.35)}
.btn-mini.btn-pericolo:hover{background:rgba(255,93,108,.12);border-color:rgba(255,93,108,.65)}
/* pieno = tinta piena e testo scuro, come gli altri pulsanti d'accento dell'app */
.btn.btn-pericolo{background:var(--ko);border-color:transparent;color:#0b0d12}
.btn.btn-pericolo:disabled{opacity:.4;cursor:not-allowed}
.conferma-ck{display:flex;align-items:flex-start;gap:9px;margin:12px 0 4px;font-size:13.5px;line-height:1.45;cursor:pointer}
.conferma-ck input{margin-top:2px;flex:none}
.modal-elimina{max-width:480px}
.mc-identita{display:flex;flex-direction:column;gap:5px;min-width:0}
.mc-nome-input{font-size:14.5px;font-weight:800;padding:7px 9px}
.mc-prov-input{font-size:11.5px;padding:5px 9px;color:var(--txt2)}
.mc-reale{font-size:10.5px;color:var(--muted);line-height:1.3;word-break:break-all}
.mc-prezzi{display:flex;gap:8px;flex-wrap:wrap}
.mc-prezzi .pz{display:inline-flex;flex-direction:column;background:var(--sup2);border:1px solid var(--bordo);border-radius:9px;padding:6px 10px;font-weight:800;color:var(--acc2);font-size:14px}
.mc-prezzi .pz i{font-style:normal;color:var(--muted);font-weight:600;font-size:10px;margin-bottom:1px}
.mc-actions{display:flex;gap:8px;align-items:center}
/* "Scollega" spinto all'estremo destro: accanto a "Prezzi" sembrava una seconda
   azione dei prezzi, mentre e' l'unica cosa in questa scheda che porta il
   modello fuori dal catalogo. La distanza fa da separatore. */
.mc-actions .btn-pericolo{margin-left:auto}
.btn-attiva{padding:11px}

/* ---------- MODELLI AI IN USO (in cima alle impostazioni) ---------- */
.modelli-uso{background:linear-gradient(135deg,rgba(124,92,255,.1),transparent);border:1px solid var(--bordo2);
  border-radius:var(--r2);padding:14px 15px;margin-bottom:14px}
.mu-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mu-head h3{margin:0;font-size:13px}
.mu-head .ic{color:var(--acc)}
.mu-riga{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;
  background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);padding:11px 13px;margin-bottom:9px}
.mu-tit{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.mu-tit .ic{width:14px;height:14px;color:var(--acc2)}
/* "Passo 1 / Passo 2": si deve capire che sono due passaggi diversi, non due scelte per lo stesso */
.mu-tit i{font-style:normal;background:var(--sup3);color:var(--acc2);border-radius:5px;padding:2px 6px;letter-spacing:.02em}
/* allarme "il modello non sta scrivendo i prompt": un LLM che non risponde non
   rompe niente a schermo, consegna solo immagini peggiori — qui si vede */
.mu-allarme{grid-column:1/-1;display:flex;gap:9px;align-items:flex-start;margin:2px 0 6px;
  padding:9px 11px;border-radius:var(--r);font-size:12px;line-height:1.45;
  background:rgba(255,176,32,.10);border:1px solid rgba(255,176,32,.38)}
.mu-allarme.grave{background:rgba(255,93,108,.10);border-color:rgba(255,93,108,.45)}
.mu-allarme .ic{width:18px;height:18px;flex:0 0 auto;color:var(--warn);margin-top:1px}
.mu-allarme.grave .ic{color:var(--ko)}
.mu-allarme b{display:block;color:var(--txt);font-size:12.5px;margin-bottom:2px}
.mu-allarme span{color:var(--txt2)}
.mu-riga.spenta{border-style:dashed;opacity:.85}
.mu-riga.spenta .mu-nome b{color:var(--muted)}
.mu-mille{color:var(--txt2);font-size:12px;font-weight:700;margin-left:6px}
.mu-nome{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.mu-nome b{font-size:15.5px}
.mu-cod{grid-column:1/-1;font-size:11px;color:var(--muted);background:var(--sup3);border-radius:5px;
  padding:2px 7px;justify-self:start;word-break:break-all}
.mu-costo{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.mu-costo b{font-size:17px;color:var(--acc2);font-variant-numeric:tabular-nums}
.mu-costo .mu-op{font-size:12px;color:var(--muted);margin-left:-4px}
.mu-costo small{color:var(--muted);font-size:11px}
.mu-riga .btn-mini{grid-row:2;grid-column:2;justify-self:end}
.mu-tot{font-size:13px;color:var(--txt2);padding:2px 2px 0}
.mu-tot b{color:var(--acc2);font-size:16px;font-variant-numeric:tabular-nums}
.mu-tot small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}

/* ---------- "?" con spiegazione ---------- */
.sugg{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;flex:0 0 auto;
  background:var(--sup3);border:1px solid var(--bordo);border-radius:50%;color:var(--muted);cursor:pointer}
.sugg .ic{width:12px;height:12px}
.sugg:active{transform:scale(.92)}
.sugg-pop{position:fixed;z-index:300;background:var(--sup3);border:1px solid var(--bordo2);border-radius:10px;
  padding:11px 13px;font-size:12.5px;line-height:1.5;color:var(--txt);box-shadow:var(--ombra);animation:fade .12s}

/* ---------- CATALOGO MODELLI: sezione richiudibile + gruppi ---------- */
.llm-sez{margin-bottom:12px;border:1px solid var(--bordo);border-radius:var(--r2);background:var(--sup);overflow:hidden}
.sez-toggle{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;color:var(--txt);
  padding:13px 14px;cursor:pointer;text-align:left;font-size:14px;font-weight:700}
.sez-toggle > .ic{width:16px;height:16px;color:var(--acc);flex:0 0 auto}
.sez-toggle .st-tit{flex:0 1 auto;min-width:0}
.sez-toggle .st-sel{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:8px;min-width:0;
  font-weight:600;font-size:12.5px;color:var(--muted)}
.st-sel .ts-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-sel .ts-costo{color:var(--acc2);font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
.sez-toggle > .ic:last-child{transition:transform .18s;color:var(--muted);transform:rotate(90deg)}
.llm-sez.aperta .sez-toggle > .ic:last-child{transform:rotate(-90deg)}
.sez-corpo{padding:0 14px 14px;border-top:1px solid var(--bordo)}
.sez-corpo .catalogo-toolbar{position:static;background:none;padding-top:12px}
.raggr-lab{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;align-self:center}
/* riga fissa del catalogo: un solo modello per passaggio, oppure nessuno */
.llm-scelta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--sup2);border:1px solid var(--bordo);border-radius:var(--r);padding:9px 12px;margin:2px 0 10px}
.ls-info{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--txt2);min-width:0;flex:1}
.ls-info .ic{width:14px;height:14px;color:var(--ok);flex:0 0 auto}
.btn-mini.spento-on{background:rgba(255,176,32,.15);color:var(--warn);border-color:rgba(255,176,32,.4);opacity:1}
.st-sel .ts-spento{color:var(--warn);font-weight:700}
.llm-gruppo{border:1px solid var(--bordo);border-radius:var(--r);margin-bottom:8px;background:var(--sup2)}
.gr-testa{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;color:var(--txt);
  padding:10px 12px;cursor:pointer;font-size:13.5px;font-weight:700;text-align:left}
.gr-testa .ic{width:14px;height:14px;color:var(--muted);transition:transform .18s;flex:0 0 auto}
.llm-gruppo.aperto .gr-testa > .ic:first-child{transform:rotate(90deg)}
.gr-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-min{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.gr-min b{color:var(--acc2);font-variant-numeric:tabular-nums}
.gr-min i{font-style:normal;font-size:10px;opacity:.8;margin-left:1px}
.gr-corpo{padding:0 10px 10px}
.gr-corpo .mod-griglia{margin-top:0}

/* griglia LLM confronto */
.llm-card{position:relative}
.mod-card.sel{border-color:var(--acc);background:var(--sup3)}
.mod-card.sel .spunta{position:absolute;top:10px;right:10px;color:var(--acc2)}
.mod-card.sel .spunta .ic{width:16px;height:16px}
.llm-stima{font-size:13px;color:var(--txt2);background:var(--sup2);border:1px solid var(--bordo);border-radius:8px;padding:7px 10px}
.llm-stima b{color:var(--acc2);font-size:14px;font-variant-numeric:tabular-nums}
.llm-stima .ic{color:var(--acc);width:14px;height:14px;vertical-align:-.2em}
/* costo MISURATO (media degli ultimi usi reali): si distingue dalla stima */
.llm-stima i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:3px}
.llm-stima.reale{border-color:rgba(46,204,113,.45);background:rgba(46,204,113,.08)}
.llm-stima.reale i{color:var(--ok)}
.llm-costi{display:flex;gap:14px;font-size:11px;color:var(--muted);border-top:1px solid var(--bordo);padding-top:8px}

/* LLM card centrata e badge Consigliato curato */
.llm-card{text-align:center;align-items:center}
.llm-card .mc-title{width:100%}
.llm-card .mc-title b{font-size:15px}
.llm-card .mc-badges{justify-content:center;gap:6px;margin-top:8px}
.llm-card .mc-desc{text-align:center}
.llm-card .llm-stima{text-align:center}
.llm-card .llm-costi{justify-content:center}
.badge{line-height:1;justify-content:center}
.badge-consigliato{background:var(--grad);color:#0b0d12}
.badge-consigliato .ic{color:#0b0d12}

/* barra avanzamento generazione */
.gen-progress{max-width:420px;margin:14px auto 0}
.gp-bar{height:10px;border-radius:999px;background:var(--sup3);overflow:hidden;border:1px solid var(--bordo)}
.gp-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#7c5cff,#22d3ee);
  background-size:200% 100%;animation:scorri 1.4s linear infinite;transition:width .25s;box-shadow:0 0 14px rgba(34,211,238,.5)}
@keyframes scorri{to{background-position:200% 0}}
.gp-info{display:flex;justify-content:space-between;margin-top:8px;font-size:13px}
#gp-pct{font-weight:800;color:var(--acc2)}
#gp-time{color:var(--txt2)}

/* download con avanzamento */
#btn-scarica.scaricando{opacity:.85}
#btn-scarica.scaricando .ic{animation:gira 1s linear infinite}
#btn-scarica.ok{background:linear-gradient(135deg,#2ecc71,#22d3ee)}

/* selezione risoluzione (client) — card grandi comprensibili */
.griglia-risoluzioni{display:grid;grid-template-columns:1fr;gap:12px;margin-top:6px}
@media(min-width:520px){.griglia-risoluzioni{grid-template-columns:1fr 1fr}}
.card-ris{position:relative;background:var(--sup);border:1.5px solid var(--bordo);border-radius:var(--r2);padding:18px;cursor:pointer;transition:.15s}
.card-ris:active{transform:scale(.99)}
.card-ris.sel{border-color:var(--acc);background:var(--sup2)}
.card-ris{overflow:hidden}
.card-ris.caro{opacity:.5}
.cr-nome{font-size:19px;font-weight:800}
.cr-esempio{color:var(--txt2);font-size:13px;line-height:1.45;margin-top:4px}
.cr-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px;color:var(--muted)}
.cr-prezzo{color:var(--acc2);font-weight:800;font-size:16px}
.cerca-wrap{display:flex;align-items:center;gap:10px;background:var(--sup);border:1px solid var(--bordo);border-radius:11px;padding:0 14px;margin-bottom:14px}
.cerca-wrap .ic{color:var(--muted)} .cerca-wrap input{border:0;background:none;box-shadow:none!important;padding:12px 0}
.riga-admin{background:var(--sup);border:1px solid var(--bordo);border-radius:14px;padding:14px 15px;margin-bottom:10px}
.ra-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.ra-nome{font-weight:700;font-size:14.5px;word-break:break-word;display:flex;align-items:center;gap:8px}
.ra-meta{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.5}
.ra-meta code{background:var(--sup3);padding:1px 6px;border-radius:5px;color:var(--txt2);font-size:11px}
/* Telemetria nodo: tre tessere (GPU / memoria GPU / RAM) con sparkline */
.tele{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:9px;margin-top:12px}
.tele-tile{position:relative;padding:9px 11px 8px;border-radius:12px;border:1px solid var(--bordo);
  background:linear-gradient(180deg,var(--sup2,var(--sup)),transparent);overflow:hidden;min-width:0}
.tele-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:currentColor;opacity:.85}
.tele-tile.sp-gpu{color:#5aa2ff}.tele-tile.sp-vram{color:#54d1a0}.tele-tile.sp-ram{color:#f0ac5b}
.tele-h{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tele-h b{color:var(--txt2);font-weight:800}
.tele-b{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;margin-top:3px}
.tele-v{font-size:22px;font-weight:800;line-height:1;color:var(--txt);font-variant-numeric:tabular-nums}
.tele-v i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--muted);margin-left:1px}
.tele-s{font-size:10.5px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums;min-height:13px}
.spark{width:84px;height:34px;flex:0 0 auto;display:block}
.spark-area{fill:currentColor;opacity:.15}
.spark-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.tele-vuoto,.tele-attesa{grid-template-columns:1fr;margin-top:12px;padding:10px 12px;border:1px dashed var(--bordo);
  border-radius:12px;color:var(--muted);font-size:11.5px}
.tele-attesa .tele-load{display:inline-block;opacity:.7;animation:pulse 1.2s ease-in-out infinite}
.pill-attesa{background:var(--sup3);color:var(--muted);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.95}}
.riga-admin{transition:border-color .15s,transform .15s,box-shadow .15s}
.riga-admin:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.azioni-riga{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn-mini{display:inline-flex;align-items:center;gap:5px;background:var(--sup3);border:1px solid var(--bordo);color:var(--txt);
  font-size:12px;font-weight:600;padding:8px 12px;border-radius:9px;cursor:pointer;transition:.15s}
.btn-mini .ic{width:14px;height:14px}
.btn-mini:active{transform:scale(.97)}
.btn-mini.danger{color:var(--ko)} .btn-mini.good{color:var(--ok)}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.pill.ok{background:rgba(46,204,113,.15);color:var(--ok)}
.pill.ko{background:rgba(255,93,108,.15);color:var(--ko)}
.pill.warn{background:rgba(255,176,32,.15);color:var(--warn)}
/* conteggio immagini generate per nodo: stat evidente (numero grande) */
.ra-conta{margin-top:7px}
.pill.conta-img{background:rgba(124,92,255,.15);color:var(--acc);text-transform:none;letter-spacing:0;font-size:11.5px}
.pill.conta-img b{font-size:14px;font-weight:800}
.pill.info{background:rgba(34,211,238,.14);color:var(--acc2)}
.pill.caldo{background:rgba(240,172,91,.16);color:#f0ac5b}
.pill.freddo{background:rgba(120,140,170,.16);color:#8ea0bd}

/* ---------- IMPOSTAZIONI GLOBALI: form compatto a griglia ----------
   Prima era una colonna di campi a tutta larghezza: dieci voci occupavano dieci
   schermate. Ora ogni voce sta su una riga sola, in gruppi tematici. */
.form-imp{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r2);
  padding:16px;margin-bottom:18px;box-shadow:var(--ombra)}
.form-imp h4{display:flex;align-items:center;gap:7px;margin:0 0 12px;font-size:15px;font-weight:700}
.form-imp h4 .ic{width:16px;height:16px;color:var(--acc)}
.imp-gruppo{border:0;border-top:1px solid var(--bordo);margin:0;padding:12px 0 4px}
.imp-gruppo:first-of-type{border-top:0;padding-top:0}
.imp-gruppo legend{display:flex;align-items:center;gap:6px;padding:0;margin-bottom:8px;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.imp-gruppo legend .ic{width:13px;height:13px;color:var(--acc2)}
.imp-griglia{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:640px){.imp-griglia{grid-template-columns:1fr 1fr;gap:8px 14px}}
.imp-campo{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;
  background:var(--sup2);border:1px solid var(--bordo);border-radius:10px;padding:7px 11px}
.imp-lab{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt2);min-width:0;flex:1}
.imp-input{display:flex;align-items:center;gap:5px;flex:0 0 auto;max-width:52%}
.imp-input i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.imp-input input{width:100%;min-width:78px;padding:7px 9px;font-size:13px;text-align:right}
.imp-campo input[type=number]{max-width:96px}
.imp-azioni{margin-top:14px}
.imp-azioni .btn{width:100%}
@media(min-width:640px){.imp-azioni .btn{width:auto;min-width:220px}}

.form-admin{display:flex;flex-direction:column;gap:12px;background:var(--sup);border:1px solid var(--bordo);
  border-radius:var(--r2);padding:16px;margin-bottom:18px;box-shadow:var(--ombra)}
.form-admin h4{margin:0 0 2px;font-size:15px;font-weight:700}
.form-admin .riga2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-admin .btn{margin-top:4px}

/* ---------- TOAST ---------- */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(30px);z-index:100;
  background:var(--sup3);border:1px solid var(--bordo2);color:var(--txt);padding:13px 18px;border-radius:12px;
  font-size:14px;opacity:0;pointer-events:none;transition:.3s;max-width:90vw;text-align:center;box-shadow:var(--ombra)}
.toast.mostra{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ko{border-color:var(--ko)} .toast.ok{border-color:var(--ok)}

/* ---------- MODALE RICARICA ---------- */
.modal-ov{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r3) var(--r3) 0 0;
  width:100%;max-width:560px;padding:22px 20px calc(env(safe-area-inset-bottom) + 22px);
  animation:su .28s cubic-bezier(.2,.7,.3,1);max-height:90dvh;overflow-y:auto;
  /* arrivati in fondo al pannello non si trascina la pagina sotto (né il suo
     "tira giù per aggiornare"): lo scorrimento resta dentro al pannello */
  overscroll-behavior:contain}
@keyframes su{from{transform:translateY(100%)}to{transform:none}}
@media(min-width:600px){.modal-ov{align-items:center}.modal{border-radius:var(--r3);margin:20px}}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.modal-head h3{margin:0;text-transform:none;letter-spacing:0;color:var(--txt);font-size:19px}
.modal-x{background:var(--sup3);border:1px solid var(--bordo);color:var(--txt2);width:34px;height:34px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* editor prezzi: la tabella ha 6 colonne, nei 560px del pannello base starebbe
   troppo stretta e si scorrerebbe in orizzontale per nulla */
.modal-prezzi{max-width:720px}
/* intestazione galleria: titolo + "Elimina tutte" */
.galleria-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Titolo e numero come blocco unico: il margine inferiore del titolo, che serve
   a distanziarlo dal resto, spostava piu' in basso il centro della riga e faceva
   sembrare il numero fuori asse. Qui il margine passa al blocco e i due elementi
   si allineano fra loro. Il blocco spinge "Elimina tutte" all'altro capo. */
.gt-titolo{display:flex;align-items:center;gap:10px;margin:6px 0 20px;margin-right:auto}
.gt-titolo .titolo-vista{margin:0}
.conta-galleria{font-size:13px;padding:3px 10px}
.conta-galleria[hidden]{display:none}
#btn-elimina-tutte{flex:0 0 auto;padding:8px 14px}

/* ---- Admin › Categorie: i tre pesi del prompt (0-100).
   Sotto ogni slider si legge la FASCIA in cui e' caduto: e' quella che finisce
   davvero nelle istruzioni, il numero da solo non direbbe niente a nessuno. ---- */
.pesi-box{background:var(--sup2);border:1px solid var(--bordo);border-radius:var(--r2);padding:12px 13px;margin:2px 0 4px}
.pesi-tit{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--txt2);margin-bottom:10px}
.pesi-tit .ic{width:15px;height:15px;color:var(--acc2)}
.peso-riga{margin-bottom:13px}
.peso-riga:last-child{margin-bottom:0}
.peso-testa{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px}
.peso-val{font-variant-numeric:tabular-nums;font-weight:800;color:var(--acc2);font-size:15px}
.peso-riga input[type=range]{width:100%;margin:5px 0 3px;accent-color:var(--acc);background:transparent}
.peso-fascia{font-size:11.5px;font-weight:700}
.peso-fascia.spento{color:var(--ko)}
.peso-fascia.minimo{color:var(--warn)}
.peso-fascia.medio{color:var(--txt2)}
.peso-fascia.pieno{color:var(--ok)}
.peso-nota{font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:2px}
/* nota esplicativa sotto l'etichetta di un campo del form admin */
.lbl-nota{display:block;font-size:11.5px;font-weight:400;color:var(--muted);line-height:1.4;margin:2px 0 5px;text-transform:none;letter-spacing:0}

/* ---- Admin: dettaglio di una generazione (foto + tutta la catena dei prompt).
   Si apre toccando una riga del "Log generazioni": e' la schermata da cui si
   capisce PERCHE' un'immagine e' venuta male. ---- */
.riga-gen{cursor:pointer}
.riga-gen:hover td{background:var(--sup2)}
.modal-gen-dett{max-width:680px}
.modal-gen-dett h4{margin:18px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt2)}
.gd-foto{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 12px}
.gd-foto figure{margin:0;text-align:center}
.gd-foto figcaption{font-size:11.5px;color:var(--muted);margin-bottom:5px}
.gd-foto img{width:100%;max-height:34dvh;object-fit:contain;border-radius:var(--r2);background:var(--sup2);border:1px solid var(--bordo)}
.gd-foto .vuoto{padding:26px 8px;font-size:12px;color:var(--muted);background:var(--sup2);border:1px dashed var(--bordo);border-radius:var(--r2)}
.gd-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:11px 12px;
  background:var(--sup2);border:1px solid var(--bordo);border-radius:var(--r2);font-size:12.5px}
@media(max-width:480px){.gd-meta{grid-template-columns:1fr}}
.gd-meta>div{display:flex;justify-content:space-between;gap:10px;min-width:0}
.gd-meta span{color:var(--muted);white-space:nowrap}
.gd-meta b{color:var(--txt);text-align:right;overflow-wrap:anywhere}
.gd-avviso{margin-top:10px;padding:10px 12px;border-radius:var(--r2);font-size:12.5px;line-height:1.45;
  background:rgba(255,176,32,.10);border:1px solid rgba(255,176,32,.35);color:var(--txt)}
.gd-blocco{margin-bottom:10px;background:var(--sup2);border:1px solid var(--bordo);border-radius:var(--r2);padding:10px 12px}
.gd-blocco.gd-finale{border-color:var(--acc);background:rgba(124,92,255,.07)}
.gd-tit{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--txt)}
.gd-copia{background:var(--sup3);border:1px solid var(--bordo);color:var(--txt2);border-radius:999px;
  font-size:11px;padding:3px 10px;cursor:pointer;flex:0 0 auto}
.gd-spiega{font-size:11.5px;color:var(--muted);line-height:1.4;margin:3px 0 6px}
.gd-testo{margin:0;font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;
  font-family:inherit;color:var(--txt);max-height:38dvh;overflow:auto}
.gd-testo.vuoto{color:var(--muted);font-style:italic}
.pacchetti{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media(max-width:420px){.pacchetti{grid-template-columns:repeat(2,1fr)}}
.pacchetto{position:relative;background:var(--sup2);border:1.5px solid var(--bordo);border-radius:var(--r2);
  padding:18px 10px;cursor:pointer;text-align:center;transition:.15s;color:var(--txt)}
.pacchetto:active{transform:scale(.97)}
.pacchetto:disabled{opacity:.5;pointer-events:none}
.pacchetto.scontato{border-color:rgba(46,204,113,.5)}
.pacchetto:hover{border-color:var(--acc)}
.pac-cred{font-size:26px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pac-lab{color:var(--muted);font-size:11px;margin-top:-2px}
.pac-prezzo{margin-top:10px;font-size:15px;color:var(--txt2)}
.pac-prezzo b{color:var(--txt);font-size:17px}
.pac-prezzo s{color:var(--muted);font-size:12px}
.pac-badge{position:absolute;top:-8px;right:-6px;background:var(--ok);color:#0b0d12;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px}
#btn-ricarica{margin-top:16px}

/* prompt installazione */
.inst-logo{display:flex;justify-content:center;margin:8px 0 2px}
.inst-logo .ic{width:58px;height:58px;color:var(--acc2)}
.inst-ios{background:var(--sup2);border:1px solid var(--bordo);border-radius:12px;padding:13px 15px;font-size:14px;color:var(--txt2);margin:8px 0 4px;line-height:1.5}
.inst-ios b{color:var(--txt)}
.inst-check{display:flex;flex-direction:row;align-items:center;gap:9px;font-size:13px;color:var(--txt2);font-weight:500;margin:14px 0 10px;cursor:pointer}
.inst-check input{width:18px;height:18px;flex:none}
#install-ov .btn-primario{margin-top:6px}

/* ---------- conferma ---------- */
.pagina-centrata{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:22px}
.card-conferma{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r3);padding:32px 26px;max-width:400px;width:100%;text-align:center;box-shadow:var(--ombra)}
.logo-app{font-size:22px;font-weight:800;margin-bottom:22px}
.esito{margin:10px 0 24px}
.esito-icona{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 16px;font-weight:800}
.esito-ok .esito-icona{background:rgba(46,204,113,.15);color:var(--ok)}
.esito-ko .esito-icona{background:rgba(255,93,108,.15);color:var(--ko)}
.esito p{color:var(--txt2);line-height:1.55}

/* log inviati dai nodi (pannello Nodi) */
.log-pre{white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto;overscroll-behavior:contain;
  background:var(--sup2);border:1px solid var(--bordo);border-radius:10px;padding:10px;
  font-size:11.5px;color:var(--txt2);margin:8px 0 0}


/* ============================================================ SICUREZZA (2 passaggi)
   La chiave e i codici di recupero si copiano a mano dallo schermo: vanno
   scritti grandi, spaziati e a larghezza fissa, se no si sbaglia una cifra. */
/* Niente larghezza propria: la scheda si allinea a quelle sopra (saldo, consumo,
   movimenti) e ai pannelli dell'admin, che prendono tutta la colonna. Prima si
   fermava a 560px e in mezzo alle altre sembrava sbagliata. */
.sicur{max-width:none}
/* Collegare l'app di autenticazione: dal telefono si preme il pulsante (apre
   direttamente l'app col conto gia' compilato, niente QR da inquadrare su se
   stessi), dal computer si copia la chiave a mano. */
/* Il pulsante che apre l'app di autenticazione sta subito sotto la chiave: sono
   due modi di fare la stessa cosa, non due passaggi diversi. I 20px della barra
   azioni normale li allontanavano troppo. */
.sic-collega{flex-wrap:wrap;margin-top:10px}
/* QR a sinistra, chiave a destra: da computer si inquadra col telefono, da
   telefono si usa il pulsante che apre l'app (il QR non si puo' inquadrare da
   soli) oppure si copia la chiave. */
.sic-doppia{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin:10px 0}
.sic-qr{margin:0;flex:0 0 auto;text-align:center}
.sic-qr svg{display:block;border-radius:10px;border:1px solid var(--bordo)}
.sic-qr figcaption{margin-top:7px;font-size:11.5px;color:var(--muted);max-width:190px;line-height:1.35}
.sic-manuale{flex:1 1 260px;min-width:0}
/* Sul TELEFONO il QR sparisce: non si puo' inquadrare il proprio schermo con la
   fotocamera dello stesso telefono, quindi occuperebbe mezza pagina per niente.
   Li' si usa il pulsante che apre l'app di autenticazione, o la chiave a mano.
   Soglia a 700px: fuori i telefoni (un iPhone Pro Max sta a 428), dentro i
   tablet (un iPad parte da 744) e i computer, dove inquadrare ha senso. */
@media(max-width:700px){.sic-qr{display:none}}
@media(max-width:560px){.sic-doppia{flex-direction:column}.sic-qr{align-self:center}}
.sic-collega .btn{flex:1 1 200px;text-decoration:none;justify-content:center}
.sic-segreto{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:19px;letter-spacing:.14em;
  text-align:center;word-break:break-all;background:var(--sup2);border:1px solid var(--bordo);
  border-radius:var(--r2);padding:14px 12px;margin:10px 0;color:var(--acc2);user-select:all}
.sic-codici{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0}
.sic-codici span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.06em;
  text-align:center;background:var(--sup2);border:1px solid var(--bordo);border-radius:9px;padding:9px 6px;user-select:all}
/* il campo del codice nella schermata di accesso: cifre grandi e centrate */
#form-totp input[name=codice]{font-size:22px;letter-spacing:.28em;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}


/* Avviso in cima alla dashboard: piu' account nati dallo stesso indirizzo.
   Colore d'attenzione, non d'allarme: quasi sempre e' un ufficio o una rete
   mobile, non qualcuno che bara. */
.dash-avviso{border-color:rgba(255,176,32,.42);background:linear-gradient(180deg,rgba(255,176,32,.09),transparent)}
.da-testa{display:flex;align-items:center;gap:8px;color:var(--warn);font-size:14.5px;margin-bottom:4px}
.da-testa .ic{width:18px;height:18px;flex:0 0 auto}
.da-mail{font-size:11.5px;color:var(--muted);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ============================================================ ACCESSO CON GOOGLE
   Google chiede che il suo pulsante resti riconoscibile: fondo chiaro, logo a
   colori, testo scuro. Non lo si veste col tema dell'app apposta. */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  height:46px;border-radius:var(--r2);text-decoration:none;
  background:#fff;color:#1f1f1f;border:1px solid #dadce0;
  font-family:inherit;font-size:14.5px;font-weight:600;transition:.15s}
.btn-google:hover{background:#f6f7f9;border-color:#c6cbd1}
.btn-google:active{transform:scale(.99)}
.btn-google[hidden]{display:none}
.ic-google{width:19px;height:19px;flex:0 0 auto}
/* "oppure" fra il pulsante Google e il modulo con la password */
.oppure{display:flex;align-items:center;gap:12px;margin:14px 0 12px;color:var(--muted);font-size:12px}
.oppure::before,.oppure::after{content:'';flex:1;height:1px;background:var(--bordo)}
.oppure[hidden]{display:none}