/* ===================================================================
   PORTALE SCUOLA — Design system condiviso (un solo sito, due sezioni)
   Stesso stile, font e animazioni ovunque. Cambia solo l'accento --sec.
   =================================================================== */

/* ---------- FONT ---------- */
/* Inter (corpo) + Lora (display) caricati via <link> nelle pagine */

/* ============ v5 LIQUID GLASS — variabili tema (chiaro/scuro) ============ */
:root,
html[data-theme="light"]{
  /* superfici e sfondi */
  --bg-primary:#E7ECF4; --bg-secondary:#F1F4FA;
  --surface-glass:rgba(255,255,255,.55); --surface-glass-strong:rgba(255,255,255,.78);
  --border-glass:rgba(255,255,255,.7); --hairline:rgba(38,52,84,.12);
  /* testi */
  --text-primary:#19223A; --text-secondary:#46506A; --text-muted:#69728C;
  /* ombre soft diffuse */
  --shadow-soft:0 10px 34px rgba(28,40,75,.10), 0 2px 8px rgba(28,40,75,.06);
  --shadow-strong:0 26px 64px rgba(28,40,75,.16), 0 4px 14px rgba(28,40,75,.08);
  /* componenti */
  --dropdown-bg:rgba(255,255,255,.9); --button-bg:rgba(255,255,255,.5); --input-bg:rgba(255,255,255,.55);
  --head-bg:rgba(243,246,251,.62); --head-bg-scrolled:rgba(243,246,251,.84);
  --on-accent:#ffffff; --glow:.16;
  --radius:18px;
  /* blob liquidi di sfondo (azzurro ghiaccio · blu petrolio · verde salvia · niente viola/oro) */
  --blob-1:rgba(35,120,150,.42); --blob-2:rgba(96,176,224,.44); --blob-3:rgba(150,196,200,.36); --blob-4:rgba(70,160,200,.42);
}
html[data-theme="dark"]{
  --bg-primary:#0C1018; --bg-secondary:#11161F;
  --surface-glass:rgba(32,40,60,.55); --surface-glass-strong:rgba(32,40,60,.78);
  --border-glass:rgba(255,255,255,.13); --hairline:rgba(255,255,255,.08);
  --text-primary:#F6F8FC; --text-secondary:#CBD5E1; --text-muted:#97A2B6;
  --shadow-soft:0 12px 36px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --shadow-strong:0 30px 70px rgba(0,0,0,.62), 0 4px 14px rgba(0,0,0,.5);
  --dropdown-bg:rgba(16,22,36,.93); --button-bg:rgba(255,255,255,.09); --input-bg:rgba(255,255,255,.07);
  --head-bg:rgba(10,14,22,.6); --head-bg-scrolled:rgba(10,14,22,.86);
  --on-accent:#ffffff; --glow:.4;
  --blob-1:rgba(40,130,165,.46); --blob-2:rgba(86,166,224,.46); --blob-3:rgba(120,180,190,.34); --blob-4:rgba(60,150,205,.46);
}

/* accento di sezione: BLU PETROLIO (Docenti) · AZZURRO GHIACCIO (Personale) — niente viola/oro */
html[data-section="gps"]{  --accent:#176E82; --accent-2:#3A98AE; --accent-d:#0F5364; --sec-rgb:23,110,130; }
html[data-section="ata"]{  --accent:#3E9BD0; --accent-2:#7FC0E6; --accent-d:#2A78A8; --sec-rgb:62,155,208; }
html[data-section="home"]{ --accent:#1C7C8C; --accent-2:#46A6B6; --accent-d:#125E6B; --sec-rgb:28,124,140; }
:root{ --accent:#1C7C8C; --accent-2:#46A6B6; --accent-d:#125E6B; --sec-rgb:28,124,140;
  --gps:#176E82; --gps-2:#3A98AE; --gps-d:#0F5364; --ata:#3E9BD0; --ata-2:#7FC0E6; --ata-d:#2A78A8; --metal:#6E93AD; }

/* ---- MAPPING alle variabili legacy usate da tutto il codice esistente (sezioni incluse) ---- */
:root{
  --bg:var(--bg-primary); --bg-soft:var(--bg-secondary); --bg-2:var(--surface-glass-strong);
  --card:var(--surface-glass); --card-2:var(--surface-glass-strong); --panel:var(--surface-glass); --panel2:var(--surface-glass-strong);
  --line:var(--border-glass); --line-2:var(--hairline);
  --txt:var(--text-primary); --muted:var(--text-muted); --soft:var(--text-secondary);
  --good:#2FA36B; --green:#2FA36B; --warn:#C08A1E; --bad:#D0564E; --gold:var(--metal);
  --shadow:var(--shadow-soft); --shadow-h:var(--shadow-strong);
  --sec:var(--accent); --sec-2:var(--accent-2); --sec-d:var(--accent-d);
  --brand:var(--accent); --brand-2:var(--accent-2); --brand-d:var(--accent-d); --accent2:var(--accent-2);
}
html[data-section="gps"]{ --sec:var(--accent); --sec-2:var(--accent-2); --sec-d:var(--accent-d); --brand:var(--accent); --brand-2:var(--accent-2); --brand-d:var(--accent-d); }
html[data-section="ata"]{ --sec:var(--accent); --sec-2:var(--accent-2); --sec-d:var(--accent-d); }

/* ---------- BASE + SFONDO LIQUIDO ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif !important;
  color:var(--text-primary);
  line-height:1.65;
  min-height:100vh;
  background:var(--bg-primary) !important;
  letter-spacing:.005em;
  transition:background-color .45s ease, color .45s ease;
}
/* forme liquide sfocate e in lento movimento, fisse dietro al contenuto */
body::before{
  content:""; position:fixed; inset:-25vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(34vmax 34vmax at 10% 6%, var(--blob-1), transparent 58%),
    radial-gradient(40vmax 40vmax at 90% 12%, var(--blob-2), transparent 60%),
    radial-gradient(32vmax 32vmax at 80% 86%, var(--blob-3), transparent 58%),
    radial-gradient(38vmax 38vmax at 16% 84%, var(--blob-4), transparent 60%),
    radial-gradient(30vmax 30vmax at 52% 48%, var(--blob-1), transparent 62%);
  filter:blur(34px) saturate(1.12);
  animation:liquidShift 30s ease-in-out infinite alternate;
}
/* secondo strato di blob, controrotante, per profondità e movimento continuo */
html::before{ content:""; position:fixed; inset:-25vmax; z-index:-3; pointer-events:none;
  background:
    radial-gradient(30vmax 30vmax at 70% 22%, var(--blob-4), transparent 60%),
    radial-gradient(26vmax 26vmax at 24% 60%, var(--blob-3), transparent 60%),
    radial-gradient(34vmax 34vmax at 86% 70%, var(--blob-2), transparent 62%);
  filter:blur(40px) saturate(1.1); opacity:.85;
  animation:liquidShift2 38s ease-in-out infinite alternate;
}
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb,var(--bg-primary) 22%,transparent), color-mix(in srgb,var(--bg-primary) 48%,transparent)); }
@keyframes liquidShift{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(3%,-3%,0) scale(1.08) rotate(2deg)}
  100%{transform:translate3d(-3%,3%,0) scale(1.03) rotate(-2deg)}
}
@keyframes liquidShift2{
  0%{transform:translate3d(0,0,0) scale(1.05) rotate(0deg)}
  50%{transform:translate3d(-4%,2%,0) scale(1) rotate(-3deg)}
  100%{transform:translate3d(4%,-2%,0) scale(1.07) rotate(3deg)}
}
@media (prefers-reduced-motion:reduce){ body::before,html::before{animation:none} }
h1,h2,h3,h4,.serif,.scorebox,.logo,.sec-intro h1{font-family:'Fraunces','Lora',Georgia,serif;letter-spacing:-.015em;color:var(--text-primary)}
a{color:inherit;text-decoration:none}
::selection{background:rgba(var(--sec-rgb),.28)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-muted) 35%,transparent);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sec)}

/* ---------- HEADER UNIFICATO ---------- */
.site-head{position:sticky;top:0;z-index:60;background:var(--head-bg);backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line);transition:background-color .35s ease,box-shadow .25s ease}
.site-head.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.site-head .shw{max-width:1180px;margin:0 auto;padding:0 22px}
.head-row{display:flex;align-items:center;gap:14px;height:64px}
.site-brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;color:var(--txt);white-space:nowrap;font-family:'Inter',sans-serif}
.site-brand .mk{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex:none;
  background:linear-gradient(135deg,#2f9bd8,#e8843a);box-shadow:0 8px 20px rgba(47,155,216,.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.site-brand:hover .mk{transform:rotate(-8deg) scale(1.07)}
.site-brand .bt{display:flex;flex-direction:column;line-height:1.08}
.site-brand .bt small{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.3px}
.sec-tabs{display:flex;gap:8px;margin-left:8px}
.sec-tabs a{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;font-weight:700;font-size:13.5px;
  color:var(--muted);border:1px solid var(--line);background:var(--card);transition:.16s;white-space:nowrap;cursor:pointer}
.sec-tabs a:hover{color:var(--txt);transform:translateY(-1px);box-shadow:var(--shadow)}
.sec-tabs a.gps.on{background:linear-gradient(135deg,#2f9bd8,#1f74ad);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(47,155,216,.35)}
.sec-tabs a.ata.on{background:linear-gradient(135deg,#e8843a,#c4641e);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(232,132,58,.32)}
.head-cta{margin-left:auto;display:flex;align-items:center;gap:9px}
.subnav-row{border-top:1px solid var(--line)}
.subnav{display:flex;gap:5px;padding:8px 0;overflow-x:auto;scrollbar-width:none;margin:0}
.subnav::-webkit-scrollbar{display:none}
.subnav a,.subnav .tab{padding:8px 14px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--muted);
  white-space:nowrap;cursor:pointer;transition:.15s;border:0;background:transparent;box-shadow:none;text-transform:none}
.subnav a:hover,.subnav .tab:hover{color:var(--txt);background:var(--card);transform:none}
.subnav a.active,.subnav a.on,.subnav .tab.active{background:var(--sec);color:#fff}

/* ---------- THEME BUTTON + ACCOUNT (condivisi) ---------- */
.ps-iconbtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--txt);
  font-size:17px;cursor:pointer;display:grid;place-items:center;transition:.16s}
.ps-iconbtn:hover{border-color:var(--sec);transform:translateY(-2px) rotate(8deg);box-shadow:var(--shadow)}
.ps-acc{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ps-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;
  background:var(--card-2);color:var(--muted);border:1px solid var(--line)}
.ps-pill.pro{background:rgba(255,206,77,.16);color:var(--gold);border-color:rgba(255,206,77,.4)}
.ps-pill.admin{background:rgba(var(--sec-rgb),.16);color:var(--sec-2);border-color:rgba(var(--sec-rgb),.4)}
.ps-email{font-size:13px;color:var(--muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:880px){.ps-email{display:none}}

/* ---------- BOTTONI condivisi (account/modali) ---------- */
.ps-btn{border:0;cursor:pointer;font-weight:700;border-radius:11px;padding:10px 17px;font-size:14px;font-family:inherit;
  background:linear-gradient(135deg,var(--sec),var(--sec-d));color:#fff;transition:.15s;display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;position:relative;overflow:hidden}
.ps-btn:hover{transform:translateY(-2px);filter:brightness(1.09);box-shadow:0 8px 20px rgba(var(--sec-rgb),.4)}
.ps-btn-ghost{background:var(--card);color:var(--txt);border:1px solid var(--line);box-shadow:none}
.ps-btn-ghost:hover{border-color:var(--sec);filter:none;box-shadow:var(--shadow)}

/* normalizzazione bottoni di sezione (forma identica, colore = sezione) */
.btn{border-radius:11px;font-family:inherit;transition:transform .15s ease,filter .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px)}

/* ---------- MODALE condivisa ---------- */
.ps-overlay{position:fixed;inset:0;background:rgba(8,10,16,.62);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  z-index:200;animation:psFade .2s ease;padding:18px}
.ps-overlay.hide{display:none}
.ps-modal{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;width:420px;max-width:96vw;max-height:92vh;overflow:auto;
  box-shadow:var(--shadow-h);animation:psPop .26s cubic-bezier(.34,1.56,.64,1)}
.ps-modal h2{margin:0 0 4px;font-size:23px}
.ps-modal .sub{color:var(--muted);font-size:14px;margin:0 0 18px}
.ps-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ps-field label{font-size:12.5px;font-weight:700;color:var(--muted)}
.ps-field input{background:var(--bg-soft);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:11px 12px;font-size:15px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.ps-field input:focus{border-color:var(--sec);box-shadow:0 0 0 3px rgba(var(--sec-rgb),.18)}
.ps-err{color:var(--bad);font-size:13px;margin-bottom:8px;min-height:1px}
.ps-switch{text-align:center;margin-top:12px;font-size:13.5px}
.ps-switch a{color:var(--sec-2);cursor:pointer;font-weight:700}
.ps-plan{border:1px solid var(--line);border-radius:14px;padding:18px;margin:6px 0 14px;background:var(--bg-soft)}
.ps-plan .price{font-size:34px;font-weight:900;font-family:'Lora',serif}
.ps-plan .price small{font-size:14px;color:var(--muted);font-weight:600}
.ps-plan ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.ps-plan li{position:relative;padding-left:22px;line-height:1.5}
.ps-plan li::before{content:"✓";position:absolute;left:0;top:0;color:var(--good);font-weight:900}
.ps-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0}
.ps-divider::before,.ps-divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- FOOTER UNIFICATO ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:64px;padding:36px 0 64px;color:var(--muted);font-size:13.5px}
.site-foot .shw{max-width:1180px;margin:0 auto;padding:0 22px}
.site-foot .cols{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.site-foot a{color:var(--soft);font-weight:600;cursor:pointer}
.site-foot a:hover{color:var(--sec-2)}
.site-foot b{color:var(--txt)}
.site-foot .dis{margin-top:22px;font-size:12px;line-height:1.6;max-width:800px}

/* ---------- COMPONENTI di sezione armonizzati ---------- */
/* riquadri-icona (sezione GPS): tinta dell'accento, validi in entrambi i temi */
.ic,.ic.c1,.ic.c2,.ic.c3,.ic.c4,.emo{
  background:linear-gradient(145deg,rgba(var(--sec-rgb),.20),rgba(var(--sec-rgb),.08)) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--sec-rgb),.28),0 8px 16px rgba(0,0,0,.12) !important}
/* chip fasce (GPS) leggibili in dark e light */
.chip.f1{color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 40%,transparent);background:color-mix(in srgb,var(--accent2) 14%,transparent)}
.chip.f2{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.aggb{color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
/* intro di sezione (ATA) */
.sec-intro{background:linear-gradient(135deg,rgba(var(--sec-rgb),.14),var(--panel));border:1px solid rgba(var(--sec-rgb),.30);
  border-radius:var(--radius);padding:24px;margin-bottom:16px;box-shadow:var(--shadow);animation:fadeUp .45s cubic-bezier(.22,.9,.31,1) both}
.sec-intro h1{margin:0 0 6px;font-size:27px;color:var(--txt)}
.sec-intro p{margin:0;color:var(--muted);font-size:15.5px}
.sec-intro .gold{color:var(--gold);font-weight:700}
/* opzioni select leggibili in dark */
html[data-theme="dark"] select option{background:#1a1f30;color:var(--txt)}

/* ---------- ANIMAZIONI condivise ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes psFade{from{opacity:0}to{opacity:1}}
@keyframes psPop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}}
@keyframes psrip{to{transform:scale(2.6);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
.ps-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:psrip .6s ease-out;pointer-events:none}
.card{animation:fadeUp .45s cubic-bezier(.22,.9,.31,1) both}

/* ---------- RESPONSIVE ---------- */
.head-row{flex-wrap:wrap;row-gap:8px;min-height:64px;height:auto}
@media(max-width:1040px){
  .sec-tabs a .lbl{display:none}
  .ps-view .psv-lbl{display:none}
}
@media(max-width:760px){
  .site-brand .bt small{display:none}
  .head-row{min-height:56px;gap:10px}
  .sec-tabs{margin-left:2px}
  .head-cta{gap:7px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===================================================================
   PORTALE SCUOLA v2 — estensioni
   =================================================================== */

/* ---------- ANTEPRIMA Free/Pro (demo, nell'header) ---------- */
.ps-view{display:inline-flex;align-items:center;gap:6px;border:1px dashed color-mix(in srgb,var(--sec) 55%,var(--line));
  background:color-mix(in srgb,var(--sec) 8%,var(--card));border-radius:999px;padding:4px 6px 4px 11px}
.ps-view .psv-lbl{font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--muted);white-space:nowrap}
.psv-seg{border:0;background:transparent;color:var(--muted);font-weight:800;font-size:12px;padding:5px 10px;border-radius:999px;cursor:pointer;transition:.15s;font-family:inherit;position:relative;overflow:hidden}
.psv-seg:hover{color:var(--txt)}
.psv-seg.on{background:linear-gradient(135deg,var(--sec),var(--sec-d));color:#fff;box-shadow:0 4px 12px rgba(var(--sec-rgb),.4)}
@media(max-width:980px){.ps-view .psv-lbl{display:none}}
@media(max-width:600px){.ps-view{padding:3px 4px}.psv-seg{padding:5px 8px}}

/* ---------- GPS: nomi offuscati per privacy ---------- */
.gp-name{transition:filter .3s ease, background-color .4s ease, color .3s ease;border-radius:5px}
.gp-name.blur{filter:blur(5px);-webkit-user-select:none;user-select:none;cursor:default}
.gp-name.hit{background:color-mix(in srgb,var(--good) 22%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent);
  animation:gpHit .9s ease}
@keyframes gpHit{0%{background:color-mix(in srgb,var(--good) 55%,transparent)}100%{background:color-mix(in srgb,var(--good) 22%,transparent)}}
.gp-privacy{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--sec) 8%,var(--card));
  border:1px solid color-mix(in srgb,var(--sec) 30%,var(--line));border-radius:12px;padding:11px 14px;margin:0 0 12px;font-size:13.5px;color:var(--soft)}
.gp-privacy .pi{font-size:18px}

/* ---------- LOCK Pro (pagine riservate in Free) ---------- */
.gated-locked .wrap > *:not(.pro-lock){display:none!important}
.pro-lock{display:flex;justify-content:center;padding:30px 0}
.pl-card{position:relative;max-width:560px;width:100%;text-align:center;background:
    radial-gradient(120% 120% at 50% -10%, color-mix(in srgb,var(--sec) 18%,var(--card)), var(--card));
  border:1px solid color-mix(in srgb,var(--sec) 35%,var(--line));border-radius:22px;padding:40px 30px;box-shadow:var(--shadow-h);overflow:hidden}
.pl-card::before{content:"";position:absolute;inset:-40% -10% auto;height:240px;background:radial-gradient(circle,rgba(var(--sec-rgb),.25),transparent 65%);filter:blur(20px);pointer-events:none;animation:float 9s ease-in-out infinite}
.pl-ic{font-size:48px;line-height:1;filter:drop-shadow(0 8px 16px rgba(var(--sec-rgb),.5));animation:plPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes plPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.pl-badge{display:inline-block;margin:12px 0 4px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--sec),var(--sec-d));padding:5px 13px;border-radius:999px}
.pl-card h2{margin:8px 0 6px;font-size:26px}
.pl-card p{color:var(--muted);max-width:420px;margin:0 auto 20px;font-size:15px}
.pl-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pl-hint{margin-top:16px;font-size:12.5px;color:var(--muted)}

/* ---------- subnav: lucchetto sulle voci riservate (Free) ---------- */
.subnav a.locked{opacity:.78}
.subnav a.locked::after{content:"🔒";font-size:11px;margin-left:5px;opacity:.85}

/* ---------- COMPONENTE PREZZI condiviso (corretto e uniforme) ---------- */
.ps-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.ps-plan-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:26px 24px;box-shadow:var(--shadow)}
.ps-plan-card.pop{border-color:var(--sec);box-shadow:0 0 0 3px rgba(var(--sec-rgb),.18),var(--shadow)}
.pp-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--sec),var(--sec-d));
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px rgba(var(--sec-rgb),.4)}
.pp-name{font-family:'Lora',serif;font-size:20px;font-weight:700}
.pp-price{font-family:'Lora',serif;font-size:40px;font-weight:700;letter-spacing:-1px;margin:6px 0 2px;line-height:1;white-space:nowrap}
@media(max-width:1000px) and (min-width:861px){.pp-price{font-size:34px}}
.pp-price small{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0}
.pp-tag{color:var(--muted);font-size:13.5px;margin:2px 0 14px;min-height:20px}
.pp-list{list-style:none;padding:16px 0 0;margin:0 0 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;font-size:13.6px;color:var(--soft);flex:1}
/* niente flex sui <li>: il testo (con <b> inline) scorre normalmente e si legge bene */
.pp-list li{position:relative;padding-left:24px;line-height:1.5}
.pp-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--good);font-weight:900}
.pp-list li.pp-h{padding-left:0;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--sec-2);margin-top:6px}
.pp-list li.pp-h::before{content:""}
.pp-list li.pp-all{font-weight:700;color:var(--txt);margin-top:4px}
.pp-list li.pp-all::before{content:"★";color:var(--gold)}
.ps-plan-cta{margin-top:auto;border:0;cursor:pointer;font-weight:800;border-radius:12px;padding:13px;font-size:14.5px;font-family:inherit;
  transition:transform .15s ease,filter .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}
.ps-plan-cta.solid{background:linear-gradient(135deg,var(--sec),var(--sec-d));color:#fff;box-shadow:0 10px 24px rgba(var(--sec-rgb),.4)}
.ps-plan-cta.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.ps-plan-cta:hover:not([disabled]){transform:translateY(-2px);filter:brightness(1.06)}
.ps-pricing-note{text-align:center;color:var(--muted);font-size:12.5px;margin-top:18px}
@media(max-width:860px){.ps-pricing{grid-template-columns:1fr;gap:24px}.pp-flag{left:24px;transform:none}}

/* ---------- REVEAL ON SCROLL ---------- */
/* gate dietro html.js: senza JS i contenuti restano visibili (no contenuto nascosto) */
html.js .reveal{opacity:0;transform:translateY(18px)}
html.js .reveal.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,.9,.31,1),transform .6s cubic-bezier(.22,.9,.31,1)}
html.js .reveal.d1.in{transition-delay:.06s}html.js .reveal.d2.in{transition-delay:.12s}html.js .reveal.d3.in{transition-delay:.18s}html.js .reveal.d4.in{transition-delay:.24s}

/* ---------- CONFETTI (attivazione Pro) ---------- */
.ps-confetti{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.ps-confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.95;animation:psFall 2.4s linear forwards}
@keyframes psFall{0%{transform:translateY(-10px) rotate(0)}100%{transform:translateY(102vh) rotate(720deg);opacity:.2}}

/* ---------- micro-interazioni extra ---------- */
.sec-tabs a,.card,.feat,.ps-plan-card,.world,.gcard{will-change:transform}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}

/* ===================================================================
   PORTALE SCUOLA v3 — rifiniture eleganti & moderne
   =================================================================== */
:root{
  --ease:cubic-bezier(.22,.9,.31,1);
  --shadow:0 18px 50px rgba(8,12,24,.40), 0 3px 10px rgba(8,12,24,.26);
  --shadow-h:0 30px 70px rgba(8,12,24,.50);
}
html[data-theme="light"]{
  --shadow:0 16px 40px rgba(24,34,60,.10), 0 2px 8px rgba(24,34,60,.06);
  --shadow-h:0 26px 60px rgba(24,34,60,.16);
}
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* header glass + bordo sottile sfumato */
.site-head{ -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); }
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--sec-rgb),.5),transparent);opacity:.6}
.site-head{position:sticky}

/* card più morbide e con sollevamento elegante */
.card,.feat,.ps-plan-card,.gcard,.stat,.world{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.feat:hover,.gcard:hover,.ps-plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:color-mix(in srgb,var(--sec) 35%,var(--line))}
.stat:hover{transform:translateY(-3px)}

/* bottoni: lucentezza diagonale al passaggio */
.ps-btn,.ps-plan-cta.solid,.btn-primary{position:relative;overflow:hidden}
.ps-btn::after,.ps-plan-cta.solid::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s var(--ease)}
.ps-btn:hover::after,.ps-plan-cta.solid:hover::after{left:130%}

/* EMOJI STILIZZATE — badge morbido con tinta dell'accento */
.emj{display:inline-grid;place-items:center;width:1.85em;height:1.85em;border-radius:32%;font-size:1em;line-height:1;
  vertical-align:-.45em;background:
    radial-gradient(120% 120% at 30% 20%, rgba(var(--sec-rgb),.30), rgba(var(--sec-rgb),.12));
  box-shadow:inset 0 0 0 1px rgba(var(--sec-rgb),.30), 0 4px 10px rgba(8,12,24,.18);
  filter:saturate(1.05)}
.emj.lg{width:2.5em;height:2.5em;font-size:1.15em;border-radius:30%}
.sec-tabs a .ico,.subnav .ico{font-style:normal}

/* pill anteprima e account più raffinate */
.ps-pill{backdrop-filter:blur(4px)}
.ps-view{box-shadow:inset 0 0 0 1px rgba(var(--sec-rgb),.12)}

/* link sottolineatura animata nel footer */
.site-foot a{background-image:linear-gradient(var(--sec-2),var(--sec-2));background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s var(--ease)}
.site-foot a:hover{background-size:100% 1.5px}

/* divisori e bordi più raffinati */
.subnav-row{background:linear-gradient(180deg,transparent,rgba(var(--sec-rgb),.03))}

/* focus ring accessibile e coerente */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.psv-seg:focus-visible{
  outline:2px solid var(--sec);outline-offset:2px;border-radius:8px}

/* lock Pro: alone più cinematografico */
.pl-card{backdrop-filter:blur(2px)}
.pl-ic{animation:plPop .6s var(--ease), floatY 4s ease-in-out .6s infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ingresso scaglionato delle card nelle griglie (oltre al reveal) */
@media (prefers-reduced-motion:no-preference){
  html.js .ps-pricing .ps-plan-card{animation:fadeUp .5s var(--ease) both}
  html.js .ps-pricing .ps-plan-card:nth-child(2){animation-delay:.08s}
  html.js .ps-pricing .ps-plan-card:nth-child(3){animation-delay:.16s}
}

/* ===================================================================
   PORTALE SCUOLA v4 — REDESIGN PREMIUM (lusso discreto, minimal, arioso)
   Sovrascrive le rifiniture v3 dove necessario.
   =================================================================== */
:root{ --ease:cubic-bezier(.22,.61,.36,1); }
/* ombre soffuse (annullano quelle pesanti) */
:root,html[data-theme="light"]{ --shadow:0 8px 28px rgba(45,38,24,.06),0 1px 3px rgba(45,38,24,.05); --shadow-h:0 18px 46px rgba(45,38,24,.10),0 2px 6px rgba(45,38,24,.05); }
html[data-theme="dark"]{ --shadow:0 14px 38px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.35); --shadow-h:0 24px 56px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4); }

/* HEADER: hairline pulita, blur leggero, niente linea colorata */
.site-head{ -webkit-backdrop-filter:saturate(1.15) blur(12px); backdrop-filter:saturate(1.15) blur(12px); border-bottom:1px solid var(--line); }
.site-head::after{ display:none!important; }
.site-head.scrolled{ box-shadow:0 1px 0 var(--line),0 10px 30px rgba(45,38,24,.05); }

/* LOGO: tassello pieno petrolio, sobrio (no gradiente giocattolo) */
.site-brand .mk{ background:var(--accent)!important; color:#fff; box-shadow:none!important; border-radius:11px; font-size:16px; }
.site-brand:hover .mk{ transform:none; }
.site-brand{ letter-spacing:-.01em; font-weight:700; }

/* TAB DI SEZIONE: pillole, accento solido pieno */
.sec-tabs a{ border-radius:999px; font-weight:600; }
.sec-tabs a.gps.on,.sec-tabs a.ata.on{ background:var(--sec)!important; box-shadow:none!important; }
.subnav a.active,.subnav a.on,.subnav .tab.active{ background:var(--accent); }

/* BOTTONI: niente sheen, fill solido, hover discreto, angoli morbidi */
.ps-btn::after,.ps-plan-cta.solid::after,.btn-primary::after{ display:none!important; }
.ps-btn{ background:var(--accent); border-radius:999px; padding:11px 21px; font-weight:600; box-shadow:none; letter-spacing:.005em; }
.ps-btn:hover{ background:var(--accent-d); transform:translateY(-1px); filter:none; box-shadow:var(--shadow); }
.ps-btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--txt); border-radius:999px; }
.ps-btn-ghost:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); box-shadow:none; }
.ps-iconbtn{ border-radius:999px; }
.ps-iconbtn:hover{ transform:none; border-color:var(--accent); box-shadow:var(--shadow); }

/* CARD: bordo sottile + ombra soft, sollevamento lieve */
.card,.feat,.ps-plan-card,.gcard,.world{ border:1px solid var(--line); box-shadow:var(--shadow); border-radius:18px; }
.feat:hover,.gcard:hover,.ps-plan-card:hover,.world:hover{ transform:translateY(-3px); box-shadow:var(--shadow-h); border-color:color-mix(in srgb,var(--accent) 24%,var(--line)); }
.stat:hover{ transform:translateY(-2px); }

/* PRICING premium */
.ps-plan-card{ border-radius:20px; padding:30px 26px; background:var(--bg-2); }
.ps-plan-card.pop{ box-shadow:0 0 0 1px var(--accent),var(--shadow-h); border-color:transparent; }
.pp-flag{ background:var(--accent); box-shadow:none; letter-spacing:.08em; font-weight:600; }
.pp-name{ letter-spacing:-.01em; }
.pp-list li.pp-h{ color:var(--accent); }
.pp-list li.pp-all{ color:var(--txt); }
.pp-list li.pp-all::before{ content:"✦"; color:var(--metal); }
.ps-plan-cta{ border-radius:999px; font-weight:600; }
.ps-plan-cta.solid{ background:var(--accent); box-shadow:none; }
.ps-plan-cta.solid:hover{ background:var(--accent-d); }

/* EMOJI: badge sottile a contorno, senza ombra pesante */
.emj{ background:color-mix(in srgb,var(--accent) 9%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent); border-radius:30%; filter:none; }

/* PILL / ANTEPRIMA / MODALE raffinate */
.ps-pill{ border-radius:999px; }
.ps-pill.pro{ background:color-mix(in srgb,var(--metal) 15%,transparent); color:var(--metal); border-color:color-mix(in srgb,var(--metal) 42%,transparent); }
.ps-view{ background:var(--card); border-style:solid; border-color:var(--line); box-shadow:none; }
.psv-seg.on{ background:var(--accent)!important; box-shadow:none!important; }
.ps-modal{ border-radius:22px; }
.ps-divider::before,.ps-divider::after{ background:var(--line); }

/* INPUT premium */
input,select,textarea{ border-radius:12px!important; }
.ps-field input:focus{ box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }

/* FOOTER: sottolineatura oro discreta */
.site-foot a{ background-image:linear-gradient(var(--metal),var(--metal)); }

/* LOCK PRO: statico ed elegante */
.pl-ic{ animation:plPop .5s var(--ease); filter:none; }
.pl-card{ border-radius:24px; border-color:var(--line); background:var(--card); }
.pl-card::before{ display:none; }
.pl-badge{ background:var(--accent); }

/* SUBNAV: niente velo colorato */
.subnav-row{ background:none; }

/* HEADER responsive: meno affollamento su schermi medi/piccoli */
.head-row{ gap:12px; }
@media(max-width:1040px){ .ps-view{ display:none; } }
@media(max-width:760px){ .site-brand .bt small{ display:none; } }
@media(max-width:420px){ .ps-email{ display:none; } }

/* ===================================================================
   PORTALE SCUOLA v5 — LIQUID GLASS (vetro opaco, profondità, leggibilità)
   Blocco finale: vince sulle regole precedenti.
   =================================================================== */
:root,html[data-theme="light"]{ --edge:rgba(255,255,255,.6); --edge-soft:rgba(255,255,255,.28); --ease:cubic-bezier(.22,.61,.36,1); }
html[data-theme="dark"]{ --edge:rgba(255,255,255,.12); --edge-soft:rgba(255,255,255,.05); }

/* superficie vetro riutilizzabile */
.glass,.card,.feat,.feature,.ps-plan-card,.world,.gcard,.sec-intro,.controls,.stat,
.lockcard,.ps-modal,.combo-list{
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--border-glass);
  box-shadow:var(--shadow-soft), inset 0 1px 0 var(--edge);
  border-radius:18px;
}
/* superfici con molto testo → vetro più opaco per leggibilità */
.ps-plan-card,.ps-modal,.sec-intro,.controls,.lockcard,.combo-list,.card:has(table){ background:var(--surface-glass-strong); }

/* HEADER vetro */
.site-head{
  background:var(--head-bg);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border-glass);
  box-shadow:inset 0 -1px 0 var(--edge-soft);
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-head.scrolled{ background:var(--head-bg-scrolled); box-shadow:var(--shadow-soft), inset 0 -1px 0 rgba(var(--sec-rgb),.35); }
.site-head::after{ display:none!important; }

/* LOGO vetro/accento */
.site-brand .mk{ background:linear-gradient(140deg,var(--accent),var(--accent-d))!important; color:#fff; box-shadow:0 6px 18px rgba(var(--sec-rgb),.4)!important; border-radius:12px; }

/* TAB di sezione (header) — pillole vetro */
.sec-tabs a{ background:var(--button-bg); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--border-glass); border-radius:999px; color:var(--text-secondary); font-weight:600; }
.sec-tabs a:hover{ color:var(--text-primary); border-color:color-mix(in srgb,var(--accent) 45%,var(--border-glass)); box-shadow:var(--shadow-soft); }
.sec-tabs a.gps.on,.sec-tabs a.ata.on{ background:linear-gradient(140deg,var(--accent),var(--accent-d))!important; color:#fff; border-color:transparent; box-shadow:0 8px 22px rgba(var(--sec-rgb),.4)!important; }

/* SUBNAV (sezioni) */
.subnav-row{ background:none; border-top:1px solid var(--hairline); }
.subnav a,.subnav .tab{ color:var(--text-secondary); }
.subnav a:hover,.subnav .tab:hover{ background:var(--button-bg); color:var(--text-primary); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.subnav a.active,.subnav a.on,.subnav .tab.active{ background:linear-gradient(140deg,var(--accent),var(--accent-d)); color:#fff; box-shadow:0 6px 16px rgba(var(--sec-rgb),.35); }

/* BOTTONI vetro/liquid */
.ps-btn,.ps-plan-cta.solid,.btn-primary{
  background:linear-gradient(140deg,var(--accent),var(--accent-d)); color:#fff; border:1px solid color-mix(in srgb,#fff 22%,transparent);
  border-radius:999px; box-shadow:0 8px 22px rgba(var(--sec-rgb),.32), inset 0 1px 0 rgba(255,255,255,.3); font-weight:600;
}
.ps-btn::after,.ps-plan-cta.solid::after,.btn-primary::after{ display:none!important; }
.ps-btn:hover,.ps-plan-cta.solid:hover,.btn-primary:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 14px 30px rgba(var(--sec-rgb),.42), inset 0 1px 0 rgba(255,255,255,.35); }
.ps-btn-ghost,.btn-ghost{
  background:var(--button-bg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--border-glass); color:var(--text-primary); border-radius:999px; box-shadow:inset 0 1px 0 var(--edge);
}
.ps-btn-ghost:hover,.btn-ghost:hover{ border-color:color-mix(in srgb,var(--accent) 50%,var(--border-glass)); background:color-mix(in srgb,var(--accent) 10%,var(--button-bg)); box-shadow:var(--shadow-soft); }
.ps-iconbtn{ background:var(--button-bg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--border-glass); border-radius:999px; color:var(--text-primary); box-shadow:inset 0 1px 0 var(--edge); }
.ps-iconbtn:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 50%,var(--border-glass)); box-shadow:var(--shadow-soft); }

/* INPUT / SELECT / TEXTAREA vetro */
input,select,textarea,.combo-sel,.combo-inp{
  background:var(--input-bg)!important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--border-glass)!important; color:var(--text-primary)!important; border-radius:12px!important;
  box-shadow:inset 0 1px 0 var(--edge-soft);
}
input::placeholder,textarea::placeholder{ color:var(--text-muted); opacity:1; }
input:focus,select:focus,textarea:focus,.combo-sel:focus{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border-glass))!important;
  box-shadow:0 0 0 3px rgba(var(--sec-rgb),.22), 0 0 14px rgba(var(--sec-rgb),var(--glow))!important; outline:none;
}
html[data-theme="dark"] select option{ background:#161C26; color:var(--text-primary); }
html[data-theme="light"] select option{ background:#fff; color:var(--text-primary); }

/* CARD: hover con sollevamento + bordo luminoso */
.card,.feat,.feature,.ps-plan-card,.world,.gcard,.stat{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.feat:hover,.feature:hover,.gcard:hover,.ps-plan-card:hover,.world:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-strong), inset 0 1px 0 var(--edge), 0 0 0 1px rgba(var(--sec-rgb),.18);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border-glass));
}
.stat:hover{ transform:translateY(-3px); }

/* PRICING vetro premium */
.ps-plan-card.pop{ box-shadow:var(--shadow-strong), 0 0 0 1px var(--accent), inset 0 1px 0 var(--edge); border-color:transparent; }
.pp-flag{ background:linear-gradient(140deg,var(--accent),var(--accent-d)); box-shadow:0 6px 16px rgba(var(--sec-rgb),.4); }
.pp-list li.pp-all::before{ content:"✦"; color:var(--metal); }

/* MODALE vetro */
.ps-overlay{ background:color-mix(in srgb,var(--bg-primary) 50%,transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ps-modal{ border-radius:24px; box-shadow:var(--shadow-strong), inset 0 1px 0 var(--edge); }

/* PILL anteprima / account */
.ps-pill{ border-radius:999px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ps-pill.pro{ background:color-mix(in srgb,var(--metal) 16%,transparent); color:var(--metal); border-color:color-mix(in srgb,var(--metal) 42%,transparent); }
.ps-view{ background:var(--button-bg); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--border-glass); box-shadow:inset 0 1px 0 var(--edge); }
.psv-seg.on{ background:linear-gradient(140deg,var(--accent),var(--accent-d))!important; box-shadow:0 4px 12px rgba(var(--sec-rgb),.4)!important; }
.ps-email{ color:var(--text-secondary); }

/* LOCK PRO vetro */
.pl-card{ background:var(--surface-glass-strong)!important; -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); border:1px solid var(--border-glass)!important; border-radius:26px; box-shadow:var(--shadow-strong), inset 0 1px 0 var(--edge); }
.pl-card::before{ display:none; }
.pl-badge{ background:linear-gradient(140deg,var(--accent),var(--accent-d)); }
.pl-ic{ filter:none; animation:plPop .5s var(--ease); }

/* sezione ATA: intro vetro con tinta accento */
.sec-intro{ background:linear-gradient(140deg, color-mix(in srgb,var(--accent) 14%,var(--surface-glass-strong)), var(--surface-glass-strong)); }
.sec-intro .gold{ color:var(--metal); }

/* chip / badge sezioni leggibili su vetro */
.chip,.pill,.aggb,.role{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* ============ DROPDOWN MENU (liquid glass) ============ */
.nav-links{ display:flex; align-items:center; gap:4px; }
.dd{ position:relative; }
.dd-toggle{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:12px; font-weight:600; font-size:14.5px;
  color:var(--text-secondary); background:transparent; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:.2s var(--ease); }
.dd-toggle:hover,.dd.open .dd-toggle{ color:var(--text-primary); background:var(--button-bg); border-color:var(--border-glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.dd-toggle .chev{ width:14px; height:14px; transition:transform .3s var(--ease); }
.dd.open .dd-toggle .chev{ transform:rotate(180deg); }
.dd-panel{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px) scale(.98); transform-origin:top center;
  min-width:300px; padding:10px; border-radius:20px; z-index:80;
  background:var(--dropdown-bg); -webkit-backdrop-filter:blur(26px) saturate(1.6); backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid var(--border-glass); box-shadow:var(--shadow-strong), inset 0 1px 0 var(--edge);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; }
.dd-panel::before{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:14px; height:14px;
  background:var(--dropdown-bg); border-left:1px solid var(--border-glass); border-top:1px solid var(--border-glass); border-top-left-radius:4px; }
.dd.open .dd-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }
.dd-item{ display:flex; align-items:flex-start; gap:12px; padding:11px 12px; border-radius:13px; color:var(--text-primary); transition:.18s var(--ease); }
.dd-item:hover{ background:color-mix(in srgb,var(--accent) 12%,transparent); transform:translateX(2px); }
.dd-item .di-ic{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border-glass)); }
.dd-item .di-ic svg{ width:18px; height:18px; }
.dd-item b{ display:block; font-size:14px; font-weight:600; }
.dd-item span{ display:block; font-size:12.5px; color:var(--text-muted); margin-top:1px; line-height:1.4; }
.dd-sep{ height:1px; background:var(--hairline); margin:6px 8px; }

/* ============ HAMBURGER + DRAWER MOBILE ============ */
.nav-burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--border-glass); background:var(--button-bg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); cursor:pointer; align-items:center; justify-content:center; color:var(--text-primary); }
.nav-burger span{ position:relative; width:18px; height:2px; background:currentColor; border-radius:2px; transition:.3s var(--ease); }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px; transition:.3s var(--ease); }
.nav-burger span::before{ top:-6px; } .nav-burger span::after{ top:6px; }
.nav-burger.open span{ background:transparent; }
.nav-burger.open span::before{ top:0; transform:rotate(45deg); }
.nav-burger.open span::after{ top:0; transform:rotate(-45deg); }

@media(max-width:920px){
  .nav-burger{ display:flex; }
  /* il menu stesso diventa un drawer a vetro */
  .nav-links{ display:none; position:fixed; left:12px; right:12px; top:72px; z-index:90; flex-direction:column; gap:2px; padding:12px;
    border-radius:22px; background:var(--dropdown-bg); -webkit-backdrop-filter:blur(26px) saturate(1.6); backdrop-filter:blur(26px) saturate(1.6);
    border:1px solid var(--border-glass); box-shadow:var(--shadow-strong), inset 0 1px 0 var(--edge);
    max-height:calc(100vh - 96px); overflow:auto;
    opacity:0; transform:translateY(-10px) scale(.98); transform-origin:top center;
    transition:opacity .28s var(--ease), transform .28s var(--ease); }
  .nav-links.open{ display:flex; opacity:1; transform:none; }
  /* i dropdown diventano accordion */
  .nav-links .dd{ border-bottom:1px solid var(--hairline); }
  .nav-links .dd:last-of-type{ border-bottom:0; }
  .nav-links > .dd-toggle{ width:100%; justify-content:flex-start; padding:14px 12px; font-size:16px; }
  .nav-links .dd-toggle{ width:100%; justify-content:space-between; padding:14px 12px; font-size:16px; border-radius:12px; }
  .nav-links .dd-panel{ position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto; min-width:0; box-shadow:none; border:0; background:transparent; padding:0 6px 4px;
    -webkit-backdrop-filter:none; backdrop-filter:none; max-height:0; overflow:hidden; transition:max-height .32s var(--ease), padding .32s var(--ease); }
  .nav-links .dd-panel::before{ display:none; }
  .nav-links .dd.open .dd-panel{ max-height:560px; }
}

/* ============ LEGGIBILITÀ DARK + dettagli ============ */
html[data-theme="dark"] .hero h1,html[data-theme="dark"] .site-head{ text-shadow:0 1px 24px rgba(0,0,0,.25); }
html[data-theme="dark"] .closing{ box-shadow:var(--shadow-strong); }
/* focus ring chiaro e visibile ovunque */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.dd-toggle:focus-visible,.psv-seg:focus-visible,.dd-item:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:10px; }
/* footer link */
.site-foot a,.foot a{ color:var(--text-secondary); }
.site-foot a:hover,.foot a:hover{ color:var(--accent-2); }

/* ============ FALLBACK: niente backdrop-filter → vetro più opaco ============ */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root,html[data-theme="light"]{ --surface-glass:rgba(255,255,255,.92); --surface-glass-strong:rgba(255,255,255,.97); --head-bg:rgba(243,246,251,.96); --head-bg-scrolled:rgba(243,246,251,.99); --dropdown-bg:rgba(255,255,255,.98); --button-bg:rgba(255,255,255,.85); --input-bg:rgba(255,255,255,.9); }
  html[data-theme="dark"]{ --surface-glass:rgba(24,30,44,.94); --surface-glass-strong:rgba(24,30,44,.98); --head-bg:rgba(12,16,24,.96); --head-bg-scrolled:rgba(12,16,24,.99); --dropdown-bg:rgba(18,24,38,.98); --button-bg:rgba(40,48,66,.9); --input-bg:rgba(40,48,66,.85); }
}

/* ===================================================================
   PORTALE SCUOLA v6 — GLASS BOOST + ANIMAZIONI
   Vetro più evidente e su OGNI componente; sfondo dinamico più presente;
   sheen, blur-in, glow, micro-interazioni. Vince sulle regole precedenti.
   =================================================================== */

/* vetro leggermente più trasparente sulle superfici decorative (lascia
   intravedere lo sfondo animato), forte dove c'è molto testo. Transizioni tema fluide. */
:root,html[data-theme="light"]{ --surface-glass:rgba(255,255,255,.46); --surface-glass-strong:rgba(255,255,255,.74); }
html[data-theme="dark"]{ --surface-glass:rgba(30,38,58,.5); --surface-glass-strong:rgba(26,33,52,.8); }
.card,.feat,.feature,.ps-plan-card,.world,.gcard,.gcard2,.scard,.stat,.sec-intro,.controls,.lockcard,.ps-modal,.combo-list,
.dd-panel,.nav-links,.site-head,.ps-btn-ghost,.btn-ghost,.ps-iconbtn,input,select,textarea,.ps-view,.figures .fig,.faq,.foot,.site-foot{
  transition:background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease), transform .35s var(--ease);
}

/* BLUR più deciso e bordo luminoso più evidente su tutte le superfici vetro principali */
.card,.feat,.feature,.ps-plan-card,.world,.gcard,.gcard2,.scard,.sec-intro,.controls,.lockcard,.ps-modal,.combo-list,.faq,.figures .fig,.gl{
  -webkit-backdrop-filter:blur(26px) saturate(1.5)!important; backdrop-filter:blur(26px) saturate(1.5)!important;
  border:1px solid var(--border-glass);
  box-shadow:var(--shadow-soft), inset 0 1px 0 var(--edge), inset 0 0 0 1px color-mix(in srgb,var(--edge) 30%,transparent);
}

/* RIFLESSO luminoso statico in alto + SHEEN animato al passaggio del mouse */
.feature,.scard,.gcard2,.feat,.gcard,.world{ position:relative; overflow:hidden; }
.feature::after,.scard::after,.gcard2::after,.feat::after,.gcard::after,.world::after{
  content:""; position:absolute; top:0; left:-160%; width:80%; height:100%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent); transform:skewX(-16deg);
  transition:left .85s var(--ease); }
.feature:hover::after,.scard:hover::after,.gcard2:hover::after,.feat:hover::after,.gcard:hover::after,.world:hover::after{ left:160%; }

/* INFO BOX / pannelli interni → vetro (prima piatti) */
.knownBox,.gp-privacy,.cdc-redirect,.alert,.note,.bandseg,.meter,.bar,.pref,.row-line,.seg,.scorebox,.combo,
#modeToggle,.sim>.card,.calcgrid,details,.bands{ }
.gp-privacy,.cdc-redirect,.alert,.knownBox,.bands{
  background:var(--surface-glass-strong)!important; -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--border-glass)!important; box-shadow:var(--shadow-soft), inset 0 1px 0 var(--edge); border-radius:14px;
}
details{ background:var(--surface-glass)!important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--border-glass)!important; box-shadow:inset 0 1px 0 var(--edge); }
.seg{ background:var(--button-bg)!important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--border-glass)!important; border-radius:999px; box-shadow:inset 0 1px 0 var(--edge); }
.seg button{ color:var(--text-secondary); border-radius:999px; }
.seg button.active{ background:linear-gradient(140deg,var(--accent),var(--accent-d)); color:#fff; box-shadow:0 6px 14px rgba(var(--sec-rgb),.35); }
.bandseg{ background:var(--surface-glass)!important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--border-glass); }
.bandseg.on{ background:linear-gradient(140deg,var(--accent),var(--accent-d))!important; color:#fff; }
.meter,.bar{ background:color-mix(in srgb,var(--text-muted) 14%,transparent)!important; }
.pref{ background:var(--surface-glass)!important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--border-glass)!important; }

/* BADGE / CHIP / PILL → micro-vetro con bordo luminoso */
.badge,.chip,.aggb,.role,.pill,.ps-pill,.score-pill{
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--border-glass); box-shadow:inset 0 1px 0 var(--edge);
}

/* TABELLE (sezioni) — intestazioni e righe su vetro */
table{ background:transparent; }
thead th{ background:color-mix(in srgb,var(--surface-glass-strong) 70%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); position:sticky; }
tbody tr:hover{ background:color-mix(in srgb,var(--accent) 8%,transparent)!important; }
th,td{ border-bottom:1px solid var(--hairline); }

/* FOOTER → pannello vetro sottile sopra lo sfondo */
.foot,.site-foot{ border-top:1px solid var(--border-glass); background:linear-gradient(180deg, transparent, var(--surface-glass)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }

/* BOTTONI — glow controllato + lieve sheen */
.ps-btn,.ps-plan-cta.solid,.btn-primary,.cta-primary,.scard .go,.gcard2 .go2{ position:relative; }
.ps-btn:hover,.ps-plan-cta.solid:hover,.btn-primary:hover{ box-shadow:0 14px 30px rgba(var(--sec-rgb),.42), 0 0 26px rgba(var(--sec-rgb),var(--glow)), inset 0 1px 0 rgba(255,255,255,.35); }

/* DROPDOWN — voci con hover luce più evidente + chevron/voci animate */
.dd-panel{ -webkit-backdrop-filter:blur(30px) saturate(1.7); backdrop-filter:blur(30px) saturate(1.7); }
.dd-item{ position:relative; overflow:hidden; }
.dd-item::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at var(--mx,50%) 50%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%); opacity:0; transition:opacity .25s var(--ease); pointer-events:none; }
.dd-item:hover::after{ opacity:1; }
.dd-item:hover{ background:color-mix(in srgb,var(--accent) 10%,transparent); }
.dd.open .dd-panel{ animation:ddIn .3s var(--ease) both; }
@keyframes ddIn{ from{opacity:0; transform:translateX(-50%) translateY(6px) scale(.97)} to{opacity:1; transform:translateX(-50%) translateY(0) scale(1)} }

/* NAVBAR link/toggle — sottolineatura luminosa animata */
.dd-toggle{ position:relative; }
.dd-toggle::after{ content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); opacity:.9; }
.dd-toggle:hover::after,.dd.open .dd-toggle::after{ transform:scaleX(1); }
@media(max-width:920px){ .dd-toggle::after{ display:none; } }

/* HAMBURGER — vetro coerente */
.nav-burger{ box-shadow:inset 0 1px 0 var(--edge); }

/* REVEAL — blur-in + slide + scale (più “animato” ma elegante) */
html.js .reveal{ opacity:0; transform:translateY(22px) scale(.985); filter:blur(8px); }
html.js .reveal.in{ opacity:1; transform:none; filter:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
html.js .reveal.d1.in{transition-delay:.07s} html.js .reveal.d2.in{transition-delay:.14s} html.js .reveal.d3.in{transition-delay:.21s} html.js .reveal.d4.in{transition-delay:.28s}

/* ICONE — micro-animazione su hover delle card */
.ic-tile,.ic-circle,.di-ic{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.scard:hover .ic-tile{ transform:translateY(-2px) rotate(-3deg); }
.feature:hover .ic-circle{ transform:scale(1.08); }
.dd-item:hover .di-ic{ transform:scale(1.06); }

/* LEGGIBILITÀ DARK: vetro un filo più opaco dove c'è testo fitto */
html[data-theme="dark"] .controls,html[data-theme="dark"] .ps-plan-card,html[data-theme="dark"] .ps-modal,
html[data-theme="dark"] .lockcard,html[data-theme="dark"] .faq,html[data-theme="dark"] .sec-intro,
html[data-theme="dark"] .card:has(table){ background:var(--surface-glass-strong)!important; }

/* contenitori con molto testo → vetro più opaco (leggibilità) anche in chiaro */
.faq,.controls,.ps-plan-card,.ps-modal,.lockcard,.sec-intro{ background:var(--surface-glass-strong)!important; }

/* movimento leggerissimo: card flottanti hero (parallax via JS, fallback statico) */
.floaty{ will-change:transform; }

/* ===================================================================
   PORTALE SCUOLA v7 — fix dropdown, vetro su TUTTI i select/filtri,
   sfondo più visibile, anti-overflow. Vince sulle regole precedenti.
   =================================================================== */

/* ---------- SFONDO ANIMATO più visibile (overlay più leggero) ---------- */
body::after{ background:linear-gradient(180deg, color-mix(in srgb,var(--bg-primary) 12%,transparent), color-mix(in srgb,var(--bg-primary) 34%,transparent))!important; }
body::before{ filter:blur(30px) saturate(1.2)!important; }
html::before{ opacity:.9!important; }

/* ---------- FIX DROPDOWN HEADER: niente chiusura mentre selezioni ---------- */
/* gap ridotto + ponte invisibile che tiene attivo l'hover tra voce e pannello */
.dd-panel{ top:calc(100% + 6px); }
.dd::after{ content:""; position:absolute; left:-6px; right:-6px; top:100%; height:14px; display:none; z-index:79; }
.dd:hover::after,.dd.open::after,.dd:focus-within::after{ display:block; }
/* apertura anche con focus da tastiera */
.dd:focus-within .dd-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }
@media(max-width:920px){ .dd::after{ display:none!important; } }

/* ---------- SELECT / INPUT / FILTRI delle sezioni: liquid glass coerente ---------- */
select,.combo-sel{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:var(--input-bg)!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23808a9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 13px center!important; background-size:18px!important;
  padding-right:40px!important; -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--border-glass)!important; box-shadow:inset 0 1px 0 var(--edge); border-radius:12px!important;
  text-overflow:ellipsis;
}
input[type=number],input[type=text],input[type=email],input[type=password],input[type=search],textarea{
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  background:var(--input-bg)!important; border:1px solid var(--border-glass)!important; box-shadow:inset 0 1px 0 var(--edge); border-radius:12px!important;
}
select:hover,.combo-sel:hover,input:hover{ border-color:color-mix(in srgb,var(--accent) 40%,var(--border-glass))!important; }
select:focus,.combo-sel:focus,input:focus,textarea:focus{
  border-color:color-mix(in srgb,var(--accent) 60%,var(--border-glass))!important;
  box-shadow:0 0 0 3px rgba(var(--sec-rgb),.22), 0 0 16px rgba(var(--sec-rgb),var(--glow))!important; outline:none!important;
}
/* opzioni native leggibili in entrambi i temi */
html[data-theme="dark"] select option{ background:#121826; color:var(--text-primary); }
html[data-theme="light"] select option{ background:#ffffff; color:var(--text-primary); }
/* contenitori dei filtri (GPS/ATA) in vetro pieno */
.controls,.combo,.combo-list,.seg,#modeToggle{ }
.combo-list{ background:var(--dropdown-bg)!important; -webkit-backdrop-filter:blur(24px) saturate(1.6); backdrop-filter:blur(24px) saturate(1.6); border:1px solid var(--border-glass)!important; box-shadow:var(--shadow-strong), inset 0 1px 0 var(--edge); border-radius:16px; }
.combo-opt{ border-bottom:1px solid var(--hairline); }
.combo-opt:hover,.combo-opt.sel{ background:color-mix(in srgb,var(--accent) 16%,transparent)!important; color:var(--text-primary)!important; }
.seg button{ font-weight:600; }
/* pulsanti collegati ai filtri / vista — vetro coerente (quelli non primari) */
.seg,.combo{ overflow:hidden; }

/* ---------- ANTI-OVERFLOW: nessun testo fuori dai riquadri ---------- */
/* min-width:0 SOLO ai contenitori flex/grid che avvolgono testo (NON globale,
   così le righe a scorrimento orizzontale — subnav — non si schiacciano) */
.field,.scard li,.scard .mini div,.feature,.gcard2,.head-block,.lead,.desc,
.dd-item span,.figures .fig,.foot .col,.pp-list li{ min-width:0; }
h1,h2,h3,h4,p,.lead,.desc,.pp-tag,.kick,li,td,th,.dd-item span{ overflow-wrap:anywhere; word-break:break-word; }
/* navigazione e bottoni: NON restringersi, NON spezzare le parole */
.subnav a,.subnav .tab,.sec-tabs a,.dd > a.dd-toggle,.dd .dd-toggle{ flex:0 0 auto; white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.btn,.cta,.ps-btn,.ps-plan-cta,.scard .go,.gcard2 .go2{ white-space:normal; overflow-wrap:normal; word-break:normal; }
.figures .fig b,.scard .mini div b,.pp-price,.stat .big{ overflow-wrap:normal; white-space:nowrap; }
/* select e campi non tagliano il testo e non sforano */
select,.combo-sel,input,textarea{ max-width:100%; }
.controls{ align-items:stretch; }
.card>table,table{ max-width:100%; }
td,th{ overflow-wrap:anywhere; }

/* ---------- micro-glow freddo coerente sugli accenti ---------- */
.eyebrow::before{ background:var(--accent)!important; }
.pp-list li.pp-all::before{ color:var(--accent)!important; }
.trust .dot{ background:var(--accent)!important; }