:root{
  --navy:#183D63; --navy-2:#234F78; --teal:#25B8B5; --teal-dark:#149997;
  --coral:#FF635C; --coral-dark:#E74F49; --purple:#8858D5; --yellow:#F5A623;
  --mint:#43C8AD; --ink:#183D63; --ink-soft:#64748B; --paper:#F7FAFC;
  --card-bg:#FFFFFF; --border:#DFE7EF; --border-strong:#CAD7E3;
  --red:var(--coral); --red-soft:#FFB1AD; --green:var(--teal-dark); --gold:var(--yellow);
  --grid-line:#EAF0F5; --radius:18px; --radius-sm:11px;
  --shadow:0 10px 30px rgba(24,61,99,.08); --shadow-hover:0 14px 38px rgba(24,61,99,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;padding-bottom:60px;color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.55;
  background:
    radial-gradient(circle at 8% 8%,rgba(37,184,181,.10),transparent 24rem),
    radial-gradient(circle at 92% 22%,rgba(136,88,213,.08),transparent 23rem),
    linear-gradient(180deg,#fff 0,#F7FAFC 28rem,#F7FAFC 100%);
}
a{color:var(--navy-2);text-decoration-color:rgba(35,79,120,.28);text-underline-offset:3px}
a:hover{color:var(--teal-dark)}
h1,h2,h3{font-family:'Quicksand','Poppins',sans-serif;font-style:normal;font-weight:700;letter-spacing:-.02em;color:var(--navy);margin:0 0 8px}
h1{font-size:30px} h2{font-size:21px} h3{font-size:17px}

#topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(223,231,239,.9);box-shadow:0 5px 18px rgba(24,61,99,.04);margin-bottom:26px}
.banner-impersona{display:flex;align-items:center;gap:10px;justify-content:center;background:var(--yellow);color:var(--navy);font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;padding:8px 16px}
.banner-impersona img{width:26px;height:26px;object-fit:contain}
.banner-impersona button{margin-left:6px}

header.topbar{max-width:1220px;min-height:76px;margin:0 auto;padding:9px 30px;display:flex;align-items:center;justify-content:space-between;gap:28px}
header.topbar .brand{display:flex;align-items:center;width:184px;height:62px;text-decoration:none}
header.topbar .brand img{width:178px;max-height:56px;object-fit:contain;object-position:left center}
header.topbar nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;font-size:13px}
header.topbar nav a{color:var(--navy);text-decoration:none;font-weight:600;padding:9px 11px;border-radius:10px;border:1px solid transparent}
header.topbar nav a:hover{background:#EFF9F8;color:var(--teal-dark)}
header.topbar nav a.evidenziato{background:#FFF2F1}
.menu-toggle{display:none;appearance:none;border:1px solid var(--border-strong);background:#fff;color:var(--navy);font-size:19px;line-height:1;padding:8px 13px;border-radius:10px;cursor:pointer;box-shadow:none;align-items:center;justify-content:center}
.menu-backdrop{display:none}

/* Scheda selezionabile (radio nascosto, tutta la scheda è cliccabile) —
   pensata inizialmente per la scelta del tipo di account in
   registrazione, ma abbastanza generica da riusare ovunque serva
   scegliere tra un piccolo numero di opzioni con una breve descrizione
   ciascuna. */
.scelta-scheda{
  position:relative;flex:1;display:flex;flex-direction:column;gap:8px;
  border:2px solid var(--border);border-radius:var(--radius-sm);
  padding:16px 16px 14px;cursor:pointer;background:#fff;
  text-transform:none;font-weight:400;letter-spacing:normal;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.scelta-scheda:hover{border-color:var(--border-strong);background:#FAFCFD}
.scelta-scheda input[type="radio"]{
  position:absolute;top:14px;right:14px;width:19px;height:19px;margin:0;
  accent-color:var(--teal-dark);cursor:pointer;
}
.scelta-scheda .scelta-icona{font-size:26px;line-height:1}
.scelta-scheda .scelta-titolo{font-family:'Poppins',sans-serif;font-weight:700;color:var(--navy);font-size:15px}
.scelta-scheda .scelta-descrizione{margin:0;color:var(--ink-soft);font-size:12.5px;line-height:1.4}
/* Evidenziata quando selezionata — bordo e sfondo colorati, non solo il
   pallino del radio (facile da non notare, soprattutto su schermi
   piccoli): a colpo d'occhio si deve capire subito quale delle due è
   scelta in questo momento. */
.scelta-scheda.selezionata{border-color:var(--teal-dark);background:#F2FBFA;box-shadow:0 3px 10px rgba(37,184,181,.14)}
.scelta-scheda.selezionata .scelta-titolo{color:var(--teal-dark)}
@media(max-width:480px){
  .scelta-schede-riga{flex-direction:column}
}
.user-pill{padding:8px 10px;color:var(--ink-soft);font-size:12px;font-weight:600}
.credit-pill{display:inline-flex;align-items:center;gap:7px;background:#FFF8E8;color:#A86800;border:1px solid #F4DCA6;border-radius:999px;padding:8px 12px;font-weight:700;white-space:nowrap}
.credit-pill::before{content:'✦';color:var(--yellow);font-size:15px}

.container{max-width:1180px;margin:0 auto;padding:0 30px}
.panel{position:relative;background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;margin-bottom:22px;box-shadow:var(--shadow)}
.panel::before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 5px 5px 0;background:linear-gradient(180deg,var(--teal),var(--purple));opacity:.75}
.panel h2{margin-bottom:5px}
.panel .meta,.meta{font-size:12.5px;color:var(--ink-soft);margin-bottom:16px}
.page-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:6px 0 22px;padding:22px 25px;border:1px solid #DDE9F0;border-radius:22px;background:linear-gradient(120deg,#fff 0%,#EFFBFA 55%,#FBF7FF 100%);box-shadow:var(--shadow)}
.page-hero h1{font-size:27px;margin-bottom:4px}.page-hero p{margin:0;color:var(--ink-soft)}.page-hero img{width:90px;height:72px;object-fit:contain}
.form-narrow{max-width:520px}
/* Avvolge un campo password esistente senza toccarne la larghezza — il
   padding a destra lascia spazio all'icona senza sovrapporsi al testo
   digitato. Applicato via JS (attivaMostraPassword), non staticamente nel
   markup di ogni pagina, per non ripetere la stessa struttura in più file. */
.campo-password{position:relative;margin-bottom:14px}
.campo-password input{padding-right:44px!important;margin-bottom:0!important}
.occhio-password{position:absolute;right:0;top:0;height:100%;width:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:0;box-shadow:none;cursor:pointer;padding:0}
.occhio-password:hover{background:none;transform:none;box-shadow:none}
.occhio-password:focus-visible{outline:none}

label{display:block;margin-bottom:6px;color:var(--navy);font-size:11.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],select,textarea{width:100%;margin-bottom:14px;padding:11px 13px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font:inherit;font-size:13.5px;transition:border-color .15s,box-shadow .15s,transform .15s}
/* Segnale visivo condiviso per un campo non modificabile — sfondo
   leggermente grigio, cursore non di modifica — perché l'utente capisca
   subito perché non riesce a scriverci, senza doverlo scoprire provando. */
input[readonly]{background:#F7FAFC;cursor:default}
textarea{min-height:78px;resize:vertical} input::placeholder,textarea::placeholder{color:#9AA8B6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(37,184,181,.13)}
input:disabled,select:disabled,textarea:disabled{background:#F3F5F7;color:#9AA8B6;cursor:not-allowed;border-color:var(--border)}

button{appearance:none;border:0;border-radius:12px;padding:10px 17px;cursor:pointer;background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:700;box-shadow:0 5px 14px rgba(24,61,99,.14);transition:transform .15s,box-shadow .15s,background .15s}
button:hover{background:var(--navy-2);transform:translateY(-1px);box-shadow:0 8px 18px rgba(24,61,99,.17)}
button:active{transform:translateY(0)} button:disabled{background:#BAC5D0;box-shadow:none;cursor:not-allowed;transform:none}
button:focus-visible{outline:3px solid rgba(37,184,181,.30);outline-offset:2px}
button.ghost{background:#fff;color:var(--navy);border:1px solid var(--border-strong);box-shadow:none}
button.ghost:hover{background:#F3FAFA;border-color:#B7E2E0;color:var(--teal-dark)}
/* Senza queste due regole, un bottone .ghost o .danger disabilitato
   restava colorato come se fosse ancora attivo — "button:disabled" da
   solo (sopra) non basta a vincere sulla specificità di ".ghost"/".danger"
   dato che sono definite dopo nel foglio di stile. Stesso grigio e stesso
   testo bianco del disabilitato "di base", per un linguaggio visivo
   coerente in tutta l'app: un bottone disabilitato si riconosce sempre
   allo stesso modo, qualunque fosse la sua variante da attivo. */
button.ghost:disabled{background:#BAC5D0;color:#fff;border-color:transparent;box-shadow:none;cursor:not-allowed}
button.danger:disabled{background:#BAC5D0;box-shadow:none;cursor:not-allowed}

/* Il bottone "Scegli file" di un input nativo non eredita lo stile dei
   bottoni dell'app in nessun modo — va sagomato a parte con questa
   pseudo-classe dedicata. Ripreso 1:1 dallo stile .ghost già esistente
   (bordo, sfondo bianco, testo navy) invece di inventarne uno nuovo. Il
   prefisso -webkit- è una rete di sicurezza per browser meno recenti,
   che potrebbero non riconoscere ancora la versione standard. */
input[type="file"]{font-family:'Poppins',sans-serif;font-size:13.5px;color:var(--ink-soft)}
input[type="file"]::file-selector-button,input[type="file"]::-webkit-file-upload-button{
  appearance:none;border:1px solid var(--border-strong);border-radius:12px;padding:10px 17px;
  margin-right:10px;cursor:pointer;background:#fff;color:var(--navy);font-family:'Poppins',sans-serif;
  font-size:13.5px;font-weight:700;transition:background .15s,border-color .15s,color .15s;
}
input[type="file"]::file-selector-button:hover,input[type="file"]::-webkit-file-upload-button:hover{
  background:#F3FAFA;border-color:#B7E2E0;color:var(--teal-dark);
}
/* Sostituisce l'aspetto nativo del browser (che stona accanto ai bottoni
   icona già in stile app, es. info/matita/elimina) con uno coerente:
   stessa taglia approssimativa di .icon-btn, stesso raggio d'angolo,
   spunta in teal-dark — il colore già usato altrove per gli stati
   "positivi" (es. "Attivo" in tabella), non un colore nuovo introdotto
   apposta solo per questo. */
input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin:0;
  border:1.5px solid var(--border-strong);border-radius:6px;background:#fff;cursor:pointer;
  display:inline-grid;place-content:center;vertical-align:middle;
  transition:background .15s,border-color .15s;
}
input[type="checkbox"]:hover{border-color:var(--teal-dark)}
input[type="checkbox"]:checked{background:var(--teal-dark);border-color:var(--teal-dark)}
input[type="checkbox"]:checked::after{
  content:'';width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
input[type="checkbox"]:disabled{opacity:.5;cursor:not-allowed}
button.danger{background:var(--coral)} button.danger:hover{background:var(--coral-dark)}
button.small{font-size:12px;padding:7px 11px;border-radius:9px}

@keyframes pulsa-evidenzia{0%,100%{box-shadow:0 0 0 0 rgba(255,99,92,.35)}50%{box-shadow:0 0 0 6px rgba(255,99,92,0)}}
.evidenziato{border-color:var(--coral) !important;color:var(--coral-dark) !important;animation:pulsa-evidenzia 1.6s ease-in-out infinite}
.evidenziato-contenitore{border-radius:var(--radius);animation:pulsa-evidenzia 1.6s ease-in-out infinite}

.back-link{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--navy);border:1px solid var(--border-strong);border-radius:9px;padding:7px 13px;font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:700;text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .15s}
.back-link:hover{background:#F3FAFA;border-color:#B7E2E0;color:var(--teal-dark);transform:translateY(-1px)}

.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#3C4043;border:1px solid var(--border-strong);border-radius:12px;padding:11px 17px;font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:600;text-decoration:none;box-shadow:none;transition:background .15s,box-shadow .15s}
.google-btn:hover{background:#F7F8F9;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.divisore-oppure{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-soft);font-size:12px;font-family:'Poppins',sans-serif}

.consenso-label{display:flex;align-items:flex-start;gap:8px;text-transform:none;letter-spacing:normal;font-weight:400;font-size:13px;color:var(--ink-soft);margin:16px 0 0}
.consenso-label input{margin:3px 0 0}
.consenso-label a{color:var(--navy);font-weight:600}
.divisore-oppure::before,.divisore-oppure::after{content:'';flex:1;height:1px;background:var(--border)}

/* Ogni bottone che attiva una funzionalità AI (consuma crediti) usa lo
   stesso stile e la stessa stellina — segnale coerente in tutta l'app,
   invece di un colore diverso per ogni singolo bottone. */
.ai-btn{background:#F5F0FF;color:var(--purple);border-color:#DCCDF6}
.ai-btn:hover{background:#EEE6FF;border-color:#C8B4EF}

#confermaBtn{background:var(--teal-dark)} #confermaBtn:hover{background:#0E8583}

table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;font-size:13.5px}
th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);color:#788897;background:#F8FAFC;font-size:10.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase}
td{padding:12px;vertical-align:top;border-bottom:1px solid #EDF1F5}
tbody tr:last-child td{border-bottom:none} tbody tr{transition:background .12s} tbody tr:hover{background:#FAFCFD}
td a{font-weight:700;text-decoration:none}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tag{display:inline-flex;align-items:center;font-size:10.5px;padding:3px 8px;margin:0 4px 4px 0;border:1px solid #DCCDF6;border-radius:999px;background:#F6F1FF;color:#7242BD;font-weight:600}
.livello-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--paper);border:1px solid var(--border-strong);color:var(--navy);font-size:10px;font-weight:700;margin-left:6px;vertical-align:middle}
.riga-contenuto{display:flex;gap:8px;margin-bottom:8px}.riga-contenuto input{margin-bottom:0}
.msg{padding:11px 13px;border-radius:12px;margin-bottom:16px;font-size:13px;font-weight:500;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.msg-testo{flex:1}
.msg-chiudi{appearance:none;border:0;background:none;box-shadow:none;padding:3px 6px;margin:-3px 0 -3px 3px;cursor:pointer;font-size:13px;line-height:1.4;color:inherit;opacity:.55;flex-shrink:0;border-radius:8px}
.msg-chiudi:hover{opacity:1;background:rgba(0,0,0,.07);transform:none}
.msg.errore{background:#FFF1F0;color:#C9423C;border:1px solid #FFC9C5}.msg.errore a{color:#C9423C;font-weight:700;text-decoration:underline}.msg.successo{background:#EDF9F6;color:#177D6E;border:1px solid #BCE6DB}
/* Un avviso non è un errore: stessa forma dei .msg esistenti, ma con la
   tonalità giallo/ambra usata altrove nell'app per le note da tenere
   presenti (vedi .banner-impersona), non il rosso già associato a un
   fallimento o un dato mancante. */
.msg.avviso{background:#FFF8E8;color:#8A6414;border:1px solid #F5D889;display:flex;gap:8px;align-items:flex-start}
.hidden{display:none!important}.empty-state{font-size:13px;color:var(--ink-soft);font-style:normal}
.row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.icon-btn{background:#fff;color:var(--ink-soft);border:1px solid transparent;box-shadow:none;cursor:pointer;font-size:14px;padding:5px 8px;border-radius:9px;line-height:1}
.icon-btn:hover{background:#F3FAFA;color:var(--teal-dark);border-color:#D8EEEC}.icon-btn.icon-danger:hover{background:#FFF1F0;color:var(--coral-dark);border-color:#FFD1CE}

.centered-card{width:min(900px,calc(100% - 32px));margin:7vh auto 0}
.centered-card .panel{width:min(450px,100%);margin:0 auto;padding:32px}
.auth-logo{display:block;width:min(320px,85%);max-height:210px;object-fit:contain;margin:0 auto 8px}
.auth-kicker{text-align:center;color:var(--ink-soft);margin:0 0 24px}
.auth-features{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.auth-feature{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.auth-feature.interroga{background:#FFF1F0;color:var(--coral-dark)}.auth-feature.annota{background:#F5F0FF;color:var(--purple)}.auth-feature.valuta{background:#EAF9F7;color:var(--teal-dark)}.auth-feature.verifica{background:#FFF8E8;color:#9A6A00}

.conferma-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(24,61,99,.28);backdrop-filter:blur(4px)}
.conferma-box{max-width:390px;padding:24px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 70px rgba(24,61,99,.2)}
.conferma-box p{margin:0 0 20px;color:var(--navy);font-size:15px;font-weight:600}.conferma-box p a{color:var(--teal-dark);text-decoration:underline}.conferma-azioni{display:flex;justify-content:flex-end;gap:10px}
/* Nasconde la leggera differenza tra lo sfondo della gif e quello del
   popup (bianchi non perfettamente identici) dietro una cornice
   colorata, invece di provare a far coincidere due bianchi che non
   coincidono mai perfettamente — stessa sfumatura già usata come
   striscia laterale su .panel e .edit-form. */
.cornice-gif-caricamento{display:inline-block;padding:4px;border-radius:18px;background:linear-gradient(180deg,var(--teal),var(--purple))}
.cornice-gif-caricamento img{display:block;border-radius:14px}
.conferma-mascotte{display:block;width:64px;height:auto;margin:0 auto 14px}

#avvioPanel::before,#turnoPanel::before{background:var(--coral)} #valutazionePanel::before{background:var(--teal)}
#turnoPanel .prompt-box{border-left-color:var(--coral)!important}
#valutazionePanel .proposal-box{border-left-color:var(--teal)!important;background:#F0FBF9!important}
.record-block{border-top-color:#DCCDF6!important}.transcript-mini{background:#FBF9FF!important;border-color:#E1D8F2!important}
.ai-badge{background:var(--coral)!important}.confermato-badge{color:var(--teal-dark)!important}

.edit-form{display:flex;flex-direction:column;gap:8px;background:#FAFCFD;border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-top:8px}
/* Stessa striscia laterale già usata su .panel e .top-row — qui per i
   pannelli "info" (non quelli di modifica), applicata esplicitamente con
   questa classe invece di dedurla dal contesto, per essere sicuri che si
   comporti allo stesso modo ovunque venga usata. */
.edit-form.info-panel-colorato{position:relative;padding-left:22px}
.edit-form.info-panel-colorato::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 5px 5px 0;background:linear-gradient(180deg,var(--teal),var(--purple));opacity:.75}
.edit-form input,.edit-form textarea{margin-bottom:0}
.edit-form .actions{display:flex;gap:8px}
.disclaimer{margin:16px 0 0;padding:13px 16px!important;border:1px solid #E6ECF1!important;border-radius:12px;background:#FAFCFD;color:#718092!important;font-size:11.5px!important;font-style:normal!important}

.app-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;max-width:1220px;margin:40px auto 0;padding:20px 30px 28px;border-top:1px solid var(--border);color:#9AA7B5;font-size:12px;font-family:'Poppins',sans-serif}
.app-footer span{margin:5px 0}
.app-footer nav{display:flex;flex-wrap:wrap;margin:5px 0}
.app-footer nav a{color:#9AA7B5;text-decoration:none;margin-left:18px}
.app-footer nav a:first-child{margin-left:0}
.app-footer nav a:hover{color:var(--teal-dark);text-decoration:underline}

@media(max-width:860px){
  header.topbar{padding:8px 18px;align-items:flex-start} header.topbar .brand{width:145px;height:52px} header.topbar .brand img{width:140px}
  header.topbar nav{gap:3px} header.topbar nav a{padding:7px 8px;font-size:12px}.user-pill{display:none}.credit-pill{padding:6px 9px;font-size:11px}
  .container{padding:0 18px}.panel{padding:20px 18px}.page-hero{padding:18px}.page-hero img{display:none}
  .app-footer{padding:16px 18px 22px;justify-content:flex-start}
}
@media(max-width:620px){
  /* "backdrop-filter" (l'effetto vetro sfocato, pensato per l'estetica su
     desktop) ha un effetto collaterale poco conosciuto: rende l'elemento
     che lo usa un "contenitore" anche per i figli con position:fixed,
     ancorandoli a sé invece che allo schermo — esattamente il motivo per
     cui il menu, nonostante fosse impostato su position:fixed, continuava
     a comportarsi come se fosse ancorato alla pagina. Tolto qui, dove
     serve solo il menu a comparsa, non l'effetto estetico. */
  #topbar{position:static;backdrop-filter:none}
  /* Non più "display:block" (impilava il logo sopra al menu, che poi
     andava comunque a capo su più righe con 6 voci) — resta una riga
     sola, logo a sinistra e hamburger a destra, con "position:relative"
     perché il menu a comparsa qui sotto si posiziona rispetto a questo
     elemento, non alla pagina intera. */
  /* Sotto gli 860px, header.topbar passa ad align-items:flex-start (per
     un menu che poteva andare su più righe) — qui, sotto i 620px, logo e
     hamburger stanno invece su un'unica riga: senza riportare il
     centraggio verticale, il bottone (più basso del logo) resta ancorato
     in alto invece di allinearsi al centro rispetto ad esso. */
  header.topbar{display:flex;position:relative;flex-wrap:nowrap;align-items:center}
  .menu-toggle{display:flex}
  /* Copre l'intero schermo dietro al menu quando è aperto — oltre a
     essere un pattern più curato (si tocca fuori dal menu per chiuderlo),
     elimina alla radice qualunque residuo di contenuto della pagina che
     potesse intravedersi ai bordi del menu, indipendentemente dalla causa
     esatta di quel problema. Il suo "top" viene impostato da JS al bordo
     reale del topbar (stesso calcolo già usato per il menu a tendina
     subito sotto), non da cima schermo: evita così la sovrapposizione con
     logo e hamburger alla radice, invece di far competere z-index diversi
     per decidere chi vince sopra chi. */
  .menu-backdrop.visibile{
    display:block;position:fixed;left:0;right:0;bottom:0;
    background:rgba(15,30,50,.45);z-index:55;
  }
  /* Nascosto di default, non "va a capo" come prima: un vero menu a
     tendina, sotto la barra, aperto solo quando il docente tocca
     l'hamburger — vedi il gestore in renderTopbar (api.js) che aggiunge
     o toglie la classe "aperto". */
  header.topbar nav{
    display:none;position:fixed;left:0;right:0;z-index:60;
    max-height:calc(100vh - 60px);overflow-y:auto;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--border);
    padding:10px 16px 16px;box-shadow:0 10px 20px rgba(24,61,99,.10);
  }
  header.topbar nav.aperto{display:flex}
  /* Ogni voce occupa tutta la larghezza e ha un tocco più comodo (più
     alto) di quanto serva su desktop, dove il mouse è più preciso di un
     dito su schermo. */
  header.topbar nav a,header.topbar nav .credit-pill,header.topbar nav .user-pill{
    width:100%;box-sizing:border-box;text-align:left;padding:13px 10px;font-size:14.5px;display:block;
  }
  .centered-card{margin-top:24px}
  .panel{border-radius:16px}
  table{display:block;overflow-x:auto}
  /* Da aggiungere esplicitamente alle tabelle già adattate (classe
     "tabella-mobile" + un data-label su ogni <td> con il nome della
     colonna) — non applicata a tutte le tabelle automaticamente, per non
     mostrare righe senza etichetta su quelle non ancora convertite (in
     quel caso restano scorrevoli lateralmente, la regola qui sopra). */
  table.tabella-mobile{display:block;overflow-x:visible}
  table.tabella-mobile thead{display:none}
  table.tabella-mobile,table.tabella-mobile tbody,table.tabella-mobile tr,table.tabella-mobile td{display:block;width:100%}
  table.tabella-mobile tr{margin-bottom:14px;border:1px solid var(--border);border-radius:14px;padding:6px 14px;background:#fff;box-shadow:var(--shadow)}
  table.tabella-mobile td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--grid-line);text-align:right;white-space:normal}
  table.tabella-mobile td:last-child{border-bottom:none}
  /* L'etichetta di colonna, ricostruita dal data-label invece che dalla
     riga di intestazione (nascosta sopra) — se una cella non ha
     data-label (es. quella con i soli bottoni azione) resta senza
     etichetta, non stampa "undefined" o simili. */
  table.tabella-mobile td[data-label]::before{content:attr(data-label);font-weight:700;color:var(--ink-soft);text-align:left;flex-shrink:0;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
  /* Una cella completamente vuota (es. l'ultima colonna azioni, quando
     non c'è nulla da mostrare per quella riga) non deve lasciare una riga
     vuota con solo l'etichetta e nulla accanto. */
  table.tabella-mobile td:empty{display:none}
}


/* ===== Landing page pubblica / SEO ===== */
.landing-page{padding-bottom:0;background:linear-gradient(180deg,#fff 0,#F7FAFC 52%,#fff 100%)}
.landing-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-bottom:1px solid rgba(223,231,239,.92)}
.landing-nav{max-width:1180px;min-height:74px;margin:0 auto;padding:9px 30px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.landing-brand{display:flex;align-items:center;text-decoration:none}.landing-brand img{width:184px;max-height:54px;object-fit:contain}
.landing-nav nav{display:flex;align-items:center;gap:8px}.landing-nav nav a{padding:9px 11px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--navy)}
.landing-nav nav a:hover{background:#EFF9F8;color:var(--teal-dark)}
.landing-nav nav .landing-login{border:1px solid var(--border-strong);padding:9px 16px;background:#fff}.landing-nav nav .landing-login:hover{border-color:#B7E2E0}
.landing-hero{max-width:1180px;margin:0 auto;padding:76px 30px 58px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:58px;align-items:center}
.landing-eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--teal-dark);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}.landing-eyebrow::before{content:'✦';color:var(--yellow)}
.landing-hero h1{font-size:clamp(42px,5vw,66px);line-height:1.04;letter-spacing:-.045em;margin:0 0 22px;max-width:760px}
.landing-lead{font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:690px;margin:0 0 28px}
.landing-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.landing-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border-radius:13px;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s}
.landing-cta:hover{transform:translateY(-1px);text-decoration:none}.landing-cta.primary{background:var(--navy);color:#fff;box-shadow:0 9px 22px rgba(24,61,99,.18)}.landing-cta.primary:hover{background:var(--navy-2);color:#fff;box-shadow:0 12px 28px rgba(24,61,99,.22)}
.landing-cta.secondary{background:#fff;color:var(--navy);border:1px solid var(--border-strong)}.landing-cta.secondary:hover{background:#F3FAFA;color:var(--teal-dark);border-color:#B7E2E0}
.landing-note{font-size:11.5px;color:#8392A2;margin:18px 0 0;max-width:610px}
.landing-hero-visual{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}.landing-hero-visual>img{position:relative;z-index:2;width:min(320px,72%);max-height:330px;object-fit:contain;filter:drop-shadow(0 22px 38px rgba(24,61,99,.14))}
.landing-mascot-glow{position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(37,184,181,.17) 0,rgba(136,88,213,.08) 48%,transparent 72%)}
.landing-mini-card{position:absolute;z-index:3;width:174px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.96);border:1px solid var(--border);box-shadow:var(--shadow);font-size:11px}.landing-mini-card span{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}.landing-mini-card strong{display:block;color:var(--navy);font-size:12.5px}
.card-question{left:0;top:55px;border-left:4px solid var(--coral)}.card-question span{color:var(--coral-dark)}.card-notes{right:0;top:155px;border-left:4px solid var(--purple)}.card-notes span{color:var(--purple)}.card-score{left:24px;bottom:30px;border-left:4px solid var(--teal)}.card-score span{color:var(--teal-dark)}
.landing-section{max-width:1180px;margin:0 auto;padding:72px 30px}.landing-section-heading{max-width:720px;margin:0 auto 34px;text-align:center}.landing-section-heading.compact{margin-bottom:28px}.landing-section-heading h2{font-size:34px;margin-bottom:12px}.landing-section-heading p{font-size:16px;color:var(--ink-soft);margin:0;line-height:1.7}
.landing-three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.landing-feature-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:22px;padding:28px 25px 26px;box-shadow:var(--shadow);overflow:hidden}.landing-feature-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px}.feature-interroga::before{background:var(--coral)}.feature-annota::before{background:var(--purple)}.feature-valuta::before{background:var(--teal)}.feature-verifiche::before{background:var(--yellow)}.feature-differenziati::before{background:var(--navy)}
.landing-step{font-family:'Quicksand',sans-serif;font-size:12px;font-weight:700;color:#9AA8B6;margin-bottom:18px}.landing-feature-card h3{font-size:23px;margin-bottom:8px}.landing-feature-card p{margin:0;color:var(--ink-soft);line-height:1.7}.feature-interroga h3{color:var(--coral-dark)}.feature-annota h3{color:var(--purple)}.feature-valuta h3{color:var(--teal-dark)}.feature-verifiche h3{color:#9A6A00}.feature-differenziati h3{color:var(--navy)}
.landing-section-soft{max-width:none;background:linear-gradient(115deg,#F4FBFA 0%,#FBF8FF 100%);border-top:1px solid #E5EDF2;border-bottom:1px solid #E5EDF2}.landing-section-soft>.landing-section-heading,.landing-section-soft>.landing-benefits{max-width:1120px;margin-left:auto;margin-right:auto}
.landing-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.landing-benefit{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.82);border:1px solid rgba(223,231,239,.95);border-radius:17px;padding:20px}.landing-benefit>span{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#EFF9F8;color:var(--teal-dark);font-size:16px;font-weight:800}.landing-benefit strong{display:block;color:var(--navy);margin-bottom:4px}.landing-benefit p{margin:0;color:var(--ink-soft);font-size:13px}
.landing-final-cta{max-width:1120px;margin:72px auto;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-radius:24px;background:linear-gradient(120deg,#fff 0%,#EFFBFA 55%,#FBF7FF 100%);border:1px solid #DDE9F0;box-shadow:var(--shadow)}.landing-final-cta>div{min-width:0}.landing-final-cta img{width:90px;height:72px;object-fit:contain;flex:0 0 auto}.landing-final-cta h2{font-size:25px;margin-bottom:5px}.landing-final-cta p{margin:0;color:var(--ink-soft)}
.landing-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;max-width:1180px;margin:0 auto;padding:22px 30px 30px;border-top:1px solid var(--border);color:#9AA7B5;font-size:12px}.landing-footer nav{display:flex;gap:18px;flex-wrap:wrap}.landing-footer a{color:#8795A4;text-decoration:none}.landing-footer a:hover{color:var(--teal-dark);text-decoration:underline}
@media(max-width:900px){.landing-hero{grid-template-columns:1fr;padding-top:52px}.landing-hero-copy{text-align:center}.landing-lead,.landing-note{margin-left:auto;margin-right:auto}.landing-actions{justify-content:center}.landing-hero-visual{min-height:360px;max-width:600px;width:100%;margin:0 auto}.landing-three-cards{grid-template-columns:1fr}.landing-final-cta{margin:52px 20px}.landing-final-cta img{width:82px;height:66px}}
@media(max-width:680px){.landing-header{position:static}.landing-nav{padding:10px 18px;min-height:66px}.landing-brand img{width:150px}.landing-nav nav a:not(.landing-login){display:none}.landing-hero{padding:44px 20px 38px;gap:30px}.landing-hero h1{font-size:40px}.landing-lead{font-size:16px}.landing-actions{flex-direction:column;align-items:stretch}.landing-cta{width:100%}.landing-hero-visual{min-height:320px}.landing-hero-visual>img{width:58%}.landing-mini-card{width:145px;padding:9px 10px}.card-question{top:32px}.card-notes{top:140px}.card-score{left:4px;bottom:20px}.landing-section{padding:54px 20px}.landing-section-heading h2{font-size:29px}.landing-benefits{grid-template-columns:1fr}.landing-final-cta{padding:25px 20px;text-align:left}.landing-final-cta img{margin-left:auto}.landing-footer{padding:20px;justify-content:center;text-align:center}.landing-footer nav{justify-content:center}}

.card-test{right:18px;bottom:20px;border-left:4px solid var(--yellow)}.card-test span{color:#9A6A00}
@media(max-width:680px){.card-test{right:2px;bottom:8px}}