: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}
.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}
/* 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}
.cmp-et{position:absolute;top:10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 8px;border-radius:999px;white-space:nowrap;
  background:rgba(10,12,18,.66);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cmp-et.sx{right:8px} .cmp-et.dx{left:8px}
/* 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}
/* zoom e trascinamento agiscono sulla PILA (risultato + originale sovrapposti),
   così le due immagini restano incollate tra loro a qualsiasi ingrandimento */
.viewer-pila{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.viewer-pila img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;
  user-select:none;-webkit-user-drag:none}
.viewer-chiudi{position:fixed;top:calc(env(safe-area-inset-top) + 14px);right:14px;z-index:261;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--bordo2);cursor:pointer;
  background:rgba(20,23,32,.88);color:var(--txt);display:flex;align-items:center;justify-content:center}
.viewer-chiudi .ic{width:20px;height:20px}
#img-risultato{cursor:zoom-in}

/* ---------- GALLERIA ---------- */
.galleria{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.galleria img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r2);border:1px solid var(--bordo);cursor:pointer;transition:.15s}
.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 */
.mod-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,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}
.mod-card.attivo{cursor:grab}
.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}
.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}
.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}
/* modale immagine di galleria: foto piena + Rigenera/Elimina */
.modal-galleria{max-width:520px}
.gm-foto{position:relative;margin:2px 0 14px;text-align:center}
.gm-foto img{max-width:100%;max-height:56dvh;border-radius:var(--r2);cursor:zoom-in;display:inline-block}
/* la pila avvolge ESATTAMENTE l'immagine (non tutto il riquadro), così la foto
   di partenza sovrapposta e il cursore del confronto ci cadono sopra precisi */
.gm-pila{position:relative;display:inline-block;max-width:100%;line-height:0;border-radius:var(--r2);overflow:hidden}
.gm-pila .cmp-orig{border-radius:0}
/* pulsante "quattro frecce" per aprire la foto a tutto schermo (risoluzione nativa) */
.gm-zoom{position:absolute;top:10px;right:10px;z-index:5;width:42px;height:42px;border-radius:999px;cursor:pointer;
  background:rgba(10,12,18,.6);border:1px solid rgba(255,255,255,.2);color:#fff;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.gm-zoom:hover{background:rgba(20,23,32,.82)}
.gm-zoom .ic{width:21px;height:21px}
/* intestazione galleria: titolo + "Elimina tutte" */
.galleria-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#btn-elimina-tutte{flex:0 0 auto;padding:8px 14px}
.gm-azioni{display:flex;gap:10px}
.gm-azioni .btn{flex:1}
.gm-azioni .gm-elimina{color:var(--ko)}
.modal-galleria .nota{margin-top:10px}
/* anteprima della foto ORIGINALE da cui riparte "Rigenera" */
.gm-orig{display:flex;align-items:center;gap:11px;margin-top:12px;padding:10px;
  background:var(--sup2);border:1px solid var(--bordo);border-radius:var(--r2)}
.gm-orig-img{width:52px;height:52px;object-fit:cover;border-radius:10px;flex:0 0 auto;border:1px solid var(--bordo)}
.gm-orig span{font-size:12.5px;color:var(--muted);line-height:1.45}

/* ---- 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}