:root{
  --brand:#8B3BFF;
  --brand-accent:#67EDD1;
  --ink:#14171A;
  --ink-soft:#3C4248;
  --muted:#6B7280;
  --line:#E4E7EA;
  --rule:#C7CDD2;
  --paper-alt:#F5F7F4;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-serif:Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
@page{size:A4;margin:0}
html,body{margin:0;padding:0}
body{font-family:var(--font-serif)}

.sheet{
  width:210mm; height:296mm;
  padding:16mm 20mm 22mm;
  overflow:hidden;
  page-break-after:always;
  display:flex; flex-direction:column;
  position:relative;
  background:#fff;
  margin:0 auto;
}
.sheet:last-of-type{page-break-after:auto}
.sheet > *{ flex:0 0 auto; }

.mini-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-sans); font-size:8pt; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--line);
  padding-bottom:6px; margin-bottom:9mm;
}
.mini-head .dot{color:var(--brand-accent)}

.foot{
  position:absolute; left:20mm; right:20mm; bottom:10mm;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-sans); font-size:7.5pt; color:var(--muted);
  border-top:1px solid var(--line); padding-top:4px;
}

/* ===== Testata pagina 1 ===== */
.testata{
  margin:-16mm -20mm 8mm -20mm;
  padding:14mm 20mm 12mm;
  background:linear-gradient(157deg,#2a1245 0%,#1b0b30 30%,#120722 58%,#0b0512 100%);
  color:#fff;
}
.testata .logo-row{display:flex;align-items:center;gap:10px;margin-bottom:8mm}
.testata .logo-row img{height:30px;width:auto;display:block}
.testata .eyebrow{
  font-family:var(--font-sans); font-size:8.5pt; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-accent); font-weight:600;
}
h1.doc-title{
  font-family:var(--font-sans); font-size:19pt; font-weight:800;
  line-height:1.22; margin:3mm 0 0; color:#fff;
  text-wrap:balance;
}
.testata .subtitle{
  font-family:var(--font-serif); font-style:italic; font-size:9.3pt;
  color:rgba(255,255,255,.78); margin-top:5mm;
}

/* ===== Parti contraenti ===== */
.parti{display:flex; gap:8mm; margin-bottom:6mm}
.parte-box{
  flex:1; background:var(--paper-alt); border:1px solid var(--line);
  border-radius:6px; padding:5mm 6mm;
}
.parte-box .lbl{
  font-family:var(--font-sans); font-size:8pt; font-weight:700;
  color:var(--brand); letter-spacing:.06em; margin-bottom:2mm; display:block;
}
.parte-box p{margin:0; font-size:9.3pt; line-height:1.5}

h2.sec{
  font-family:var(--font-sans); font-weight:700; font-size:10.5pt;
  color:var(--brand); text-transform:uppercase; letter-spacing:.04em;
  margin:0 0 3mm; text-wrap:balance;
}

/* ===== Articoli ===== */
h2.art{
  font-family:var(--font-sans); color:var(--brand); font-weight:700;
  font-size:12.3pt; margin:0 0 4mm; padding-bottom:2mm;
  border-bottom:1.5px solid var(--brand); text-wrap:balance;
}
h2.art:not(:first-child){margin-top:6mm}
p{margin:0 0 6px; font-size:9.5pt; line-height:1.46; color:var(--ink)}
p strong.num{color:var(--ink-soft); font-weight:700}
ul.legal{margin:0 0 6px; padding:0; list-style:none}
ul.legal li{
  position:relative; padding-left:12px; margin-bottom:2.5px;
  font-size:9.5pt; line-height:1.44; color:var(--ink);
}
ul.legal li::before{content:"–"; position:absolute; left:0; color:var(--brand)}

/* ===== Campi compilabili ===== */
.fill{
  display:inline-block; border-bottom:1px solid var(--rule);
  min-width:70px; padding:0 3px 1px; font-family:var(--font-serif);
  color:var(--ink-soft);
}
.fill.w-s{min-width:40px}
.fill.w-m{min-width:110px}
.fill.w-l{min-width:190px}
.fill.w-xl{min-width:320px}
.fill.ln{display:block; width:100%; min-height:13px; margin:2px 0 6mm}

.field{margin-bottom:4mm}
.field .label{
  font-family:var(--font-sans); font-size:7.7pt; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:1mm;
}

/* ===== Firma boxes ===== */
.firme-pair{
  display:flex; gap:8mm; margin-top:auto; padding-top:6mm;
  border-top:1px solid var(--line);
}
.firma-box{flex:1}
.firma-box .chi{
  font-family:var(--font-sans); font-weight:700; font-size:8.3pt;
  color:var(--brand); letter-spacing:.05em; margin-bottom:3mm;
}
.firma-box .nome-fisso{font-size:9.3pt; margin-bottom:5mm; color:var(--ink)}
.firma-row{display:flex; gap:6mm}
.firma-row .cell{flex:1}
.firma-row .cell .label{
  font-family:var(--font-sans); font-size:7.5pt; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:1mm; display:block;
}
.firma-line{border-bottom:1px solid var(--rule); height:11mm; position:relative}
.firma-line img{max-height:11mm; max-width:100%; position:absolute; bottom:0; left:0}
.data-line{border-bottom:1px solid var(--rule); height:6mm}

.firma-solo{margin-top:auto; padding-top:6mm; border-top:1px solid var(--line)}
.firma-solo .chi{
  font-family:var(--font-sans); font-weight:700; font-size:8.3pt;
  color:var(--brand); letter-spacing:.05em; margin-bottom:3mm;
}

/* ===== Checkbox ===== */
.chk{font-family:var(--font-sans); color:var(--ink-soft)}
.chk .box{color:var(--brand)}

/* ===== Tabella rate ===== */
table.rate{width:100%; border-collapse:collapse; margin-top:2mm}
table.rate th{
  font-family:var(--font-sans); font-size:7.7pt; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); text-align:left;
  border-bottom:1px solid var(--line); padding:2mm 2mm 1.5mm 0;
}
table.rate td{
  font-size:9pt; padding:2mm 2mm 2mm 0; border-bottom:1px solid var(--line);
  color:var(--ink);
}

.riepilogo{border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:5mm}
.riepilogo .r{display:flex; border-bottom:1px solid var(--line)}
.riepilogo .r:last-child{border-bottom:none}
.riepilogo .r .k{
  width:52mm; background:var(--paper-alt); font-family:var(--font-sans);
  font-size:8pt; color:var(--muted); padding:3mm 4mm; text-transform:uppercase;
  letter-spacing:.03em;
}
.riepilogo .r .v{flex:1; padding:3mm 4mm; font-size:9.3pt; color:var(--ink)}

.colophon{
  font-family:var(--font-serif); font-style:italic; font-size:7.6pt;
  color:var(--muted); text-align:center; margin-top:5mm;
}

.slot-clausola{min-height:0}


/* ================================================================ */
/* GUSCIO FIRMA LEAD LIFT — sopra il CSS del documento (verbatim)    */
/* ================================================================ */

@font-face{
  font-family:'Great Vibes';
  src:url('fonts/GreatVibes-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --ll-viola:#8B3BFF;
  --ll-ciano:#67EDD1;
  --ll-bg:#050508;
  --ll-bg2:#0a0a14;
  --ll-rosso:#E5484D;
  --ll-verde:#22C55E;          /* CTA "Inizia": verde come Google, non e' brand LL */
  --ll-verde-hover:#16A34A;
  --ll-testo:#EDEBF2;
  --ll-testo-soft:#B9B4C4;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --altezza-barra-1:44px;
  --altezza-barra-2:38px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--ll-bg); color:var(--ll-testo);
  font-family:var(--font-ui);
  padding-top:calc(var(--altezza-barra-1) + var(--altezza-barra-2));
  overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:22px 22px;
}
.ambiente{position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(120px); opacity:.16}
.ambiente.a1{width:640px; height:640px; top:-180px; left:-160px; background:var(--ll-viola)}
.ambiente.a2{width:680px; height:680px; bottom:-220px; right:-180px; background:var(--ll-ciano)}
.ambiente.a3{width:420px; height:420px; top:38%; left:46%; background:var(--ll-viola); opacity:.08}

/* ===== Barra 1 (chiara): pennino + stato · azioni ===== */
#barra-1{
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--altezza-barra-1);
  background:#F4F2F8; border-bottom:1px solid #E1DCEC;
  display:flex; align-items:center; gap:10px; padding:0 14px;
  font-family:var(--font-ui); color:#241C33;
}
#barra-1 .stato-doc{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#barra-1 .stato-doc .icona-penna{font-size:15px; flex:0 0 auto}
#barra-1 .spacer{flex:1}
#barra-1 button{
  font-family:inherit; font-size:12.5px; font-weight:600; border-radius:8px;
  padding:7px 12px; cursor:pointer; white-space:nowrap; border:1px solid transparent;
}
#barra-1 .btn-dettagli{background:transparent; color:#5B4C78; border-color:#D8D0E8}
#barra-1 .btn-dettagli:hover{background:#EAE4F5}
#barra-1 .btn-completa{background:var(--ll-viola); color:#fff}
#barra-1 .btn-completa:hover:not(:disabled){background:#7a2ce6}
#barra-1 .btn-completa:disabled{background:#D8D0E8; color:#9C8FB5; cursor:not-allowed}

#pannello-dettagli{
  position:fixed; top:var(--altezza-barra-1); right:12px; z-index:250;
  background:rgba(20,20,28,.98); border:1px solid rgba(139,59,255,.35); border-radius:12px;
  padding:16px 18px; width:250px; box-shadow:0 14px 34px rgba(0,0,0,.5);
  font-size:12.5px; color:var(--ll-testo); display:none;
}
#pannello-dettagli.visibile{display:block}
#pannello-dettagli h4{margin:0 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ll-ciano)}
#pannello-dettagli .riga{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid rgba(255,255,255,.06)}
#pannello-dettagli .riga:first-of-type{border-top:none}
#pannello-dettagli .k{color:var(--ll-testo-soft)}
#pannello-dettagli .v{font-weight:600; text-align:right}

/* ===== Barra 2 (scura): nome documento + lucchetto ===== */
#barra-2{
  position:fixed; top:var(--altezza-barra-1); left:0; right:0; z-index:199; height:var(--altezza-barra-2);
  background:var(--ll-bg); border-bottom:1px solid rgba(139,59,255,.3);
  display:flex; align-items:center; gap:8px; padding:0 14px;
  font-family:var(--font-ui); font-size:12.5px; color:var(--ll-testo-soft);
}
#barra-2 .lucchetto{color:var(--ll-ciano); font-size:12px}
#barra-2 .nome-doc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ===== Contenitore che scala i fogli A4 (794px) — DOPO le barre ===== */
#scala-wrap{
  position:relative; z-index:1; width:100%; overflow:hidden;
  padding:22px 0 140px;
  display:flex; justify-content:center; align-items:flex-start;
}
/* NB: display:flex + justify-content:center (non margin:0 auto) e' voluto:
   quando il figlio (794px) e' piu' largo del contenitore, margin:auto
   risolve a 0 e il box trabocca SOLO a destra — poi transform-origin:center
   scala attorno al centro del box originale (non del box mai centrato) e
   il risultato appare tagliato/spostato sulla destra invece che centrato.
   Flexbox con justify-content:center distribuisce lo spazio negativo in
   modo simmetrico anche in overflow, quindi lo scale risulta centrato. */
#scala-inner{width:794px; flex:0 0 auto; transform-origin:top center; transition:transform .12s ease}
#scala-inner .sheet{opacity:0; transition:opacity .25s ease}
#scala-inner.pronto .sheet{opacity:1}

/* Evidenzia il campo del cliente attivo/da compilare */
.campo-cliente{cursor:pointer; border-radius:2px; transition:background .15s, box-shadow .15s}
.campo-cliente:empty::after{content:'tocca per compilare'; color:#B9AFD1; font-style:normal; font-family:var(--font-ui); font-size:8.2pt}
.campo-cliente.compilato{background:rgba(103,237,209,.08)}
.campo-cliente.campo-attivo{
  outline:2px solid #3B82F6; outline-offset:2px; background:rgba(59,130,246,.08);
  box-shadow:0 0 0 5px rgba(59,130,246,.14); animation:pulsa-campo 1.6s ease-in-out infinite;
}
@keyframes pulsa-campo{0%,100%{box-shadow:0 0 0 5px rgba(59,130,246,.14)}50%{box-shadow:0 0 0 8px rgba(59,130,246,.06)}}

.chip-campo{
  position:absolute; z-index:60; background:#3B82F6; color:#fff; font-family:var(--font-ui);
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.35); pointer-events:none;
}

.firma-cliente.campo-attivo, .data-cliente.campo-attivo{
  outline:2px solid #3B82F6; outline-offset:2px; box-shadow:0 0 0 5px rgba(59,130,246,.14);
  animation:pulsa-campo 1.6s ease-in-out infinite;
}
.firma-cliente{cursor:pointer}

/* ===== Overlay input tap-to-edit (mobile friendly) ===== */
#overlay-editor{
  position:fixed; z-index:900; display:none; background:#fff;
  border:2px solid #3B82F6; border-radius:4px; box-shadow:0 10px 28px rgba(0,0,0,.35);
}
#overlay-editor input{
  width:100%; height:100%; border:none; outline:none; padding:0 4px;
  font-family:var(--font-serif); color:var(--ink-soft); background:transparent;
}

/* ===== Bottone flottante "Inizia" ===== */
#btn-inizia{
  position:fixed; left:18px; bottom:26px; z-index:300;
  background:var(--ll-verde); color:#fff; border:none; border-radius:999px;
  padding:14px 22px; font-family:var(--font-ui); font-weight:700; font-size:14.5px;
  display:flex; align-items:center; gap:8px; cursor:pointer;
  box-shadow:0 10px 26px rgba(34,197,94,.4); transition:transform .12s, background .15s;
}
#btn-inizia:hover{background:var(--ll-verde-hover); transform:translateY(-1px)}
#btn-inizia.nascosto{display:none}

/* ===== Linguetta guida (freccia + contatore) ===== */
#linguetta-guida{
  position:fixed; z-index:280; background:#374151; color:#fff; font-family:var(--font-ui);
  font-size:12px; font-weight:600; padding:8px 12px; border-radius:8px;
  display:none; align-items:center; gap:8px; box-shadow:0 8px 20px rgba(0,0,0,.35);
  cursor:pointer; max-width:220px;
}
#linguetta-guida.visibile{display:flex}
#linguetta-guida .contatore{opacity:.75; font-weight:400; font-size:11px}
#linguetta-guida::after{
  content:''; position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  border-width:6px 7px 6px 0; border-style:solid; border-color:transparent #374151 transparent transparent;
}

/* ===== Barra consenso (checkbox) — appare a compilazione ultimata ===== */
#barra-consenso{
  position:fixed; left:0; right:0; bottom:0; z-index:290;
  background:rgba(10,10,20,.97); backdrop-filter:blur(10px);
  border-top:1px solid rgba(139,59,255,.35); padding:12px 16px;
  display:none; align-items:center; gap:10px; box-shadow:0 -8px 24px rgba(0,0,0,.4);
}
#barra-consenso.visibile{display:flex}
#barra-consenso.shake{animation:shake-consenso .4s}
@keyframes shake-consenso{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#barra-consenso label{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--ll-testo); cursor:pointer; line-height:1.4}
#barra-consenso input[type=checkbox]{width:18px; height:18px; margin-top:1px; accent-color:var(--ll-viola); flex:0 0 auto}

/* ===== Toast ===== */
.ll-toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(8px); z-index:1200;
  background:#151018; color:#fff; border:1px solid rgba(139,59,255,.4);
  border-radius:9px; padding:10px 16px; font-family:var(--font-ui); font-size:12.5px;
  box-shadow:0 8px 26px rgba(0,0,0,.5); opacity:0; transition:opacity .2s, transform .2s;
  max-width:86vw; text-align:center;
}
.ll-toast.errore{border-color:var(--ll-rosso)}
.ll-toast.visibile{opacity:1; transform:translateX(-50%) translateY(0)}

/* ===== Banner errore (mai alert nativo) ===== */
#banner-errore{
  position:fixed; top:calc(var(--altezza-barra-1) + var(--altezza-barra-2)); left:0; right:0; z-index:210;
  background:#3a0d10; color:#ffd7d8; border-bottom:1px solid var(--ll-rosso);
  font-family:var(--font-ui); font-size:12.5px; padding:10px 16px;
  display:none; align-items:center; justify-content:space-between; gap:10px;
}
#banner-errore.visibile{display:flex}
#banner-errore button{background:rgba(255,255,255,.12); color:#fff; border:none; border-radius:6px; padding:6px 11px; font-size:11.5px; cursor:pointer; white-space:nowrap}

/* ===== Skeleton di caricamento ===== */
#caricamento{
  position:fixed; inset:0; z-index:400; background:var(--ll-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
#caricamento.nascosto{display:none}
#caricamento .spinner{
  width:34px; height:34px; border-radius:50%; border:3px solid rgba(139,59,255,.25);
  border-top-color:var(--ll-viola); animation:ruota 0.8s linear infinite;
}
@keyframes ruota{to{transform:rotate(360deg)}}
#caricamento p{font-family:var(--font-ui); color:var(--ll-testo-soft); font-size:13px}

/* ===== Overlay modali (comuni) ===== */
.ll-modal-overlay{
  position:fixed; inset:0; z-index:1500; background:rgba(5,5,8,.75);
  backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:16px;
}
.ll-modal-overlay.visibile{display:flex}
.ll-modal{
  background:rgba(20,20,28,.98); border:1px solid rgba(139,59,255,.4);
  border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.6);
  padding:26px 26px 22px; width:100%; max-width:420px; font-family:var(--font-ui); color:var(--ll-testo);
  max-height:88vh; overflow-y:auto;
}
.ll-modal h3{margin:0 0 6px; font-size:18px; font-weight:800}
.ll-modal .sottotitolo{margin:0 0 20px; font-size:12.8px; color:var(--ll-testo-soft)}
.ll-modal .azioni{display:flex; justify-content:flex-end; gap:10px; margin-top:18px}
.ll-modal button{font-family:inherit; font-size:13px; border:none; border-radius:8px; padding:9px 16px; cursor:pointer}
.ll-modal button.annulla{background:rgba(255,255,255,.08); color:var(--ll-testo)}
.ll-modal button.annulla:hover{background:rgba(255,255,255,.14)}
.ll-modal button.primario{background:var(--ll-viola); color:#fff; font-weight:700}
.ll-modal button.primario:hover:not(:disabled){background:#7a2ce6}
.ll-modal button.primario:disabled{background:rgba(139,59,255,.3); cursor:not-allowed}

/* ===== Modale verifica identita' (OTP) ===== */
#modal-otp .icona-mail{font-size:26px; margin-bottom:8px}
#modal-otp .caselle-otp{display:flex; gap:8px; justify-content:center; margin:18px 0}
#modal-otp .caselle-otp input{
  width:42px; height:52px; text-align:center; font-size:20px; font-weight:700;
  border-radius:9px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  color:#fff; font-family:var(--font-ui);
}
#modal-otp .caselle-otp input:focus{outline:none; border-color:var(--ll-viola); background:rgba(139,59,255,.1)}
#modal-otp .link-reinvia{
  background:none; border:none; color:var(--ll-ciano); font-size:12.5px; cursor:pointer;
  text-decoration:underline; padding:0; text-align:center; display:block; margin:0 auto;
}
#modal-otp .link-reinvia:disabled{color:var(--ll-testo-soft); cursor:not-allowed; text-decoration:none}

/* ===== Modale "Adotta la tua firma" ===== */
#modal-firma{max-width:460px}
#modal-firma label.etichetta{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ll-testo-soft); margin-bottom:6px}
#modal-firma input[type=text]{
  width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  border-radius:9px; padding:11px 12px; color:#fff; font-family:var(--font-ui); font-size:14px;
  margin-bottom:18px;
}
#modal-firma input[type=text]:focus{outline:none; border-color:var(--ll-viola)}
.tab-firma{display:flex; gap:4px; background:rgba(255,255,255,.05); border-radius:9px; padding:3px; margin-bottom:14px}
.tab-firma button{
  flex:1; background:transparent; color:var(--ll-testo-soft); font-weight:600; font-size:12.3px;
  padding:8px 6px; border-radius:7px;
}
.tab-firma button.attivo{background:var(--ll-viola); color:#fff}
.pannello-firma{display:none}
.pannello-firma.attivo{display:block}
#anteprima-auto{
  height:110px; background:#fff; border-radius:9px; display:flex; align-items:center; justify-content:center;
  padding:0 14px; overflow:hidden; margin-bottom:6px;
}
#anteprima-auto span{font-family:'Great Vibes',cursive; font-size:44px; color:#14171A; white-space:nowrap}
.wrap-canvas-firma{position:relative; background:#161320; border-radius:9px; border:1px solid rgba(255,255,255,.14); margin-bottom:6px}
#canvas-firma{display:block; width:100%; height:150px; touch-action:none; cursor:crosshair}
.link-cancella{background:none; border:none; color:var(--ll-ciano); font-size:12px; cursor:pointer; text-decoration:underline; padding:0 0 14px}
#modal-firma .consenso{font-size:11px; line-height:1.5; color:var(--ll-testo-soft); margin:6px 0 4px}

/* ===== Schermata di conferma ===== */
#schermata-successo{
  position:fixed; inset:0; z-index:1600; background:var(--ll-bg); display:none;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;
}
#schermata-successo.visibile{display:flex}
#schermata-successo .cerchio-ok{
  width:76px; height:76px; border-radius:50%; background:rgba(103,237,209,.12);
  border:2px solid var(--ll-ciano); display:flex; align-items:center; justify-content:center;
  font-size:34px; color:var(--ll-ciano); margin-bottom:22px;
}
#schermata-successo h2{margin:0 0 10px; font-size:22px}
#schermata-successo p{margin:0; color:var(--ll-testo-soft); font-size:14px; max-width:320px; text-wrap:balance}
#schermata-successo img{height:26px; margin-top:34px; opacity:.7}

/* ===== Errore di caricamento (link non valido / rete) ===== */
#errore-caricamento{
  position:fixed; inset:0; z-index:400; background:var(--ll-bg); display:none;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;
}
#errore-caricamento.visibile{display:flex}
#errore-caricamento .emoji{font-size:36px; margin-bottom:14px}
#errore-caricamento h2{margin:0 0 8px; font-size:18px}
#errore-caricamento p{margin:0 0 20px; color:var(--ll-testo-soft); font-size:13.5px; max-width:300px}
#errore-caricamento button{background:var(--ll-viola); color:#fff; border:none; border-radius:8px; padding:10px 18px; font-family:var(--font-ui); font-weight:600; cursor:pointer}

@media (max-width:480px){
  #barra-1{padding:0 10px}
  #barra-1 .btn-dettagli{display:none}
  #barra-2{padding:0 10px}
  #scala-wrap{padding-bottom:170px}
  .ll-modal{padding:20px}
}