/* CGFA Academy — stile Windows 11 / Fluent (base: AI in Azienda). Accento blu inchiostro; ogni corso ha il colore del suo linguaggio nella tessera della sigla. */
:root {
  color-scheme: light dark;
  --acc: #2b46c8; --acc-2: #2238a6; --acc-t: #ffffff; --acc-tenue: rgba(43, 70, 200, .085);
  --mica: #eff0f4; --mica-2: #e4e6ee; --sup: rgba(255, 255, 255, .82); --sup-piena: #ffffff; --sup-2: #f6f7fa;
  --tx: #15171f; --tx-2: #4b5063; --tx-3: #646a7d;
  --br: rgba(20, 26, 60, .1); --br-forte: rgba(20, 26, 60, .19);
  --ok: #0e7a37; --ko: #b4261a; --att: #9a5200;
  --l-base: #0d7a5c; --l-intermedio: #2b46c8; --l-avanzato: #7a32b8;
  --ombra-1: 0 1px 2px rgba(16, 20, 50, .06), 0 2px 6px rgba(16, 20, 50, .05);
  --ombra-2: 0 8px 24px rgba(16, 20, 50, .12), 0 2px 6px rgba(16, 20, 50, .07);
  --ombra-3: 0 24px 60px rgba(16, 20, 50, .22), 0 4px 14px rgba(16, 20, 50, .1);
  --r: 8px; --r-grande: 12px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-titolo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-cod: "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", ui-monospace, Menlo, monospace;
  --nav-w: 256px; --ease: cubic-bezier(.16, 1, .3, 1);
  /* editor del codice: scuro in entrambi i temi */
  --ed-bg: #1b1d26; --ed-testa: #232633; --ed-br: #31354a; --ed-tx: #e6e8f0; --ed-num: #6b7189; --ed-out: #12141b;
  --tk-kw: #d39bff; --tk-str: #9fd88f; --tk-num: #f7bb6e; --tk-com: #8d94ab; --tk-fn: #7fc7ff; --tk-tipo: #5fdcc8;
  --tk-var: #ffaf9a; --tk-op: #c3c8da; --tk-meta: #ff8fbf; --tk-tag: #ff8f8f; --tk-attr: #f5c46b; --tk-val: #9fd88f;
  --tk-sel: #f5c46b; --tk-prop: #7fc7ff; --tk-lit: #ff9f7a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --acc: #97a8ff; --acc-2: #b5c1ff; --acc-t: #0d1440; --acc-tenue: rgba(151, 168, 255, .12);
    --mica: #17181d; --mica-2: #1d1f26; --sup: rgba(38, 40, 49, .84); --sup-piena: #272a33; --sup-2: #20222a;
    --tx: #eef0f6; --tx-2: #bfc3d2; --tx-3: #9ca1b3; --br: rgba(255, 255, 255, .08); --br-forte: rgba(255, 255, 255, .16);
    --ok: #57d38c; --ko: #ff8f84; --att: #f2b062;
    --l-base: #5fd6ae; --l-intermedio: #97a8ff; --l-avanzato: #cf9fff;
    --ombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2);
    --ombra-2: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
    --ombra-3: 0 24px 60px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35);
    --ed-bg: #14151c; --ed-testa: #1b1d26; --ed-br: #2c2f40; --ed-out: #0e0f14;
  }
}
:root[data-tema="scuro"] {
  --acc: #97a8ff; --acc-2: #b5c1ff; --acc-t: #0d1440; --acc-tenue: rgba(151, 168, 255, .12);
  --mica: #17181d; --mica-2: #1d1f26; --sup: rgba(38, 40, 49, .84); --sup-piena: #272a33; --sup-2: #20222a;
  --tx: #eef0f6; --tx-2: #bfc3d2; --tx-3: #9ca1b3; --br: rgba(255, 255, 255, .08); --br-forte: rgba(255, 255, 255, .16);
  --ok: #57d38c; --ko: #ff8f84; --att: #f2b062;
  --l-base: #5fd6ae; --l-intermedio: #97a8ff; --l-avanzato: #cf9fff;
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2);
  --ombra-2: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
  --ombra-3: 0 24px 60px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35);
  --ed-bg: #14151c; --ed-testa: #1b1d26; --ed-br: #2c2f40; --ed-out: #0e0f14;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--br-forte) transparent; scroll-padding-top: 16px; }
body {
  margin: 0; font: 15px/1.55 var(--font); color: var(--tx); background: var(--mica);
  background-image: radial-gradient(1100px 680px at 100% -10%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 60%),
                    radial-gradient(900px 600px at -10% 110%, color-mix(in srgb, var(--l-base) 7%, transparent), transparent 60%);
  background-attachment: fixed; min-height: 100vh;
}
::selection { background: color-mix(in srgb, var(--acc) 28%, transparent); color: var(--tx); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
a { color: var(--acc); text-underline-offset: 3px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { font-family: var(--font-titolo); line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.4rem); font-weight: 650; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 .7em; }
code { font-family: var(--font-cod); font-size: .9em; padding: .08em .35em; border-radius: 4px; background: var(--acc-tenue); color: var(--tx); }
.tab { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.sez { font-size: 1.05rem; margin: 0 0 10px; }
.salta { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 16px; border-radius: 8px; background: var(--acc); color: var(--acc-t); font-weight: 600; text-decoration: none; transition: top .2s; }
.salta:focus { top: 12px; }

/* ===== guscio: NavigationView ===== */
.guscio { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; }
.nav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px;
  background: color-mix(in srgb, var(--mica-2) 72%, transparent); backdrop-filter: blur(30px) saturate(1.4); border-right: 1px solid var(--br);
}
.marchio { display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; text-decoration: none; color: var(--tx); }
.marchio img { width: 34px; height: 34px; border-radius: 9px; }
.marchio b { display: block; font: 650 15px/1.15 var(--font-titolo); }
.marchio small { color: var(--tx-3); font-size: 12px; }
.nav a.voce, .nav button.voce {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 8px 12px; border-radius: 6px; border: 0; background: none; width: 100%;
  color: var(--tx); text-decoration: none; font: 14px var(--font); text-align: left; cursor: pointer; transition: background .15s;
}
.nav .voce:hover { background: var(--acc-tenue); }
.nav .voce[aria-current="page"] { background: var(--sup-piena); box-shadow: var(--ombra-1); font-weight: 600; }
.nav .voce[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 2px; background: var(--acc); animation: indic .3s var(--ease); }
@keyframes indic { from { transform: scaleY(.2); } }
.nav .sep { height: 1px; background: var(--br); margin: 8px 10px; }
.nav .gruppo { padding: 10px 12px 4px; font-size: 12px; color: var(--tx-3); display: flex; align-items: center; gap: 8px; }
.nav .gruppo .sigla { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
.nav .giu { margin-top: auto; }
.nav .credit { padding: 10px 12px 2px; font-size: 12px; color: var(--tx-3); margin: 0; }

main { min-width: 0; padding: 28px clamp(16px, 3.2vw, 48px) 40px; outline: none; }
.vista, #statico { max-width: 1140px; margin: 0 auto; }
.vista { animation: entra .45s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.testata { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.testata p { color: var(--tx-2); margin: 6px 0 0; max-width: 64ch; }

.barra { display: none; }
@media (max-width: 860px) {
  .guscio { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
  main { padding: 18px 16px 100px; }
  .barra {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--sup-piena) 84%, transparent);
    backdrop-filter: blur(24px) saturate(1.4); border-top: 1px solid var(--br);
  }
  .barra a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 4px 2px; border-radius: 8px; font-size: 11px; color: var(--tx-2); text-decoration: none; }
  .barra a[aria-current="page"] { color: var(--acc); font-weight: 600; }
  .barra a[aria-current="page"] svg { stroke-width: 2.1; }
}

/* ===== superfici e controlli ===== */
.pannello { background: var(--sup); backdrop-filter: blur(20px); border: 1px solid var(--br); border-radius: var(--r-grande); box-shadow: var(--ombra-1); padding: 20px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 6px 16px; border-radius: 6px;
  border: 1px solid var(--br-forte); background: var(--sup-piena); color: var(--tx); font: 500 14px var(--font); cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 0 var(--br); transition: background .15s, transform .1s;
}
.btn:hover { background: var(--sup-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.accento { background: var(--acc); border-color: transparent; color: var(--acc-t); }
.btn.accento:hover { background: var(--acc-2); }
.btn.sottile { background: transparent; border-color: transparent; box-shadow: none; }
.btn.sottile:hover { background: var(--acc-tenue); }
.btn.grande { min-height: 46px; padding: 10px 22px; font-size: 15px; }
.fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--lv, var(--acc)) 13%, transparent); color: var(--lv, var(--acc)); }
.chip svg { width: 14px; height: 14px; }
.chip.gratis { --lv: var(--ok); }
.chip.fatta-chip { --lv: var(--ok); }
.lv-base { --lv: var(--l-base); } .lv-intermedio { --lv: var(--l-intermedio); } .lv-avanzato { --lv: var(--l-avanzato); }
.nota { font-size: 13px; color: var(--tx-3); }
.nota svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.campo { display: grid; gap: 4px; font-size: 13px; color: var(--tx-2); }
.campo input, .campo textarea, .cerca input {
  font: 15px/1.4 var(--font); color: var(--tx); background: var(--sup-piena); border: 1px solid var(--br-forte); border-bottom-color: var(--tx-3);
  border-radius: 6px; padding: 9px 11px; width: 100%; min-height: 42px;
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .cerca input:focus { outline: none; border-bottom: 2px solid var(--acc); padding-bottom: 8px; }
.campo input::placeholder, .campo textarea::placeholder, .cerca input::placeholder { color: var(--tx-3); }
.campo-riga { display: flex; gap: 8px; }
.campo-riga input { flex: 1; min-width: 0; }
.errore { color: var(--ko); font-size: 13px; min-height: 1em; margin: 0; }
.errore:empty { min-height: 0; }
.barra-av { display: block; height: 6px; border-radius: 3px; background: var(--br); overflow: hidden; }
.barra-av i { display: block; height: 100%; background: var(--acc); border-radius: 3px; transition: width .5s var(--ease); }

/* tessera con la sigla del linguaggio */
.sigla {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--cc, var(--acc)); color: var(--ct, #fff);
  font: 700 18px/1 var(--font-titolo); letter-spacing: -.02em; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .12);
}

/* avviso licenza in scadenza */
.banner-lic { max-width: 1140px; margin: 0 auto 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r); background: color-mix(in srgb, var(--att) 10%, var(--sup-piena)); border: 1px solid color-mix(in srgb, var(--att) 30%, transparent); font-size: 14px; }
.banner-lic > svg { color: var(--att); }
.banner-lic span { flex: 1 1 260px; }

/* ===== CATALOGO ===== */
.eroe { display: grid; gap: 14px; margin: 6px 0 26px; max-width: 860px; }
.eroe h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); letter-spacing: -.03em; line-height: 1.08; }
.eroe p { font-size: 17px; color: var(--tx-2); max-width: 62ch; margin: 0; }
.eroe .numeri-riga { font-size: 14px; color: var(--tx-3); }
.eroe .numeri-riga b { color: var(--tx); font-weight: 650; }
.filtri { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; position: sticky; top: 0; z-index: 5; padding: 10px 0; background: linear-gradient(var(--mica) 75%, transparent); }
.cerca { position: relative; flex: 1 1 280px; max-width: 420px; }
.cerca svg { position: absolute; left: 12px; top: 50%; margin-top: -10px; color: var(--tx-3); }
.cerca input { padding-left: 40px; min-height: 44px; }
.pillole { display: flex; gap: 6px; flex-wrap: wrap; }
.pillole button { min-height: 36px; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--br-forte); background: var(--sup-piena); color: var(--tx-2); font: 500 13.5px var(--font); cursor: pointer; transition: background .15s, color .15s; }
.pillole button:hover { color: var(--tx); border-color: var(--acc); }
.pillole button[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-t); }
.conta-corsi { margin-left: auto; font-size: 13px; color: var(--tx-3); }
.griglia-corsi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 14px; }
.card-corso {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-grande); text-decoration: none; color: var(--tx);
  background: var(--sup); border: 1px solid var(--br); box-shadow: var(--ombra-1); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; overflow: hidden;
}
.card-corso::after { content: ""; position: absolute; right: -50px; top: -50px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cc) 20%, transparent), transparent 70%); pointer-events: none; opacity: .8; }
.card-corso:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); border-color: color-mix(in srgb, var(--cc) 45%, var(--br)); }
.card-testa { display: flex; gap: 14px; align-items: center; }
.card-testa h3 { font-size: 17px; letter-spacing: -.01em; }
.card-testa .partenza { font-size: 12.5px; color: var(--tx-3); }
.card-corso p { margin: 0; color: var(--tx-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { margin-top: auto; display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--tx-3); }
.card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.card-meta svg { width: 15px; height: 15px; }
.card-meta .gratis { color: var(--ok); font-weight: 600; }
.vuoto-stato { text-align: center; padding: 34px 20px; color: var(--tx-2); }
.vuoto-stato svg { width: 40px; height: 40px; color: var(--tx-3); margin-bottom: 8px; }
.in-arrivo { margin-top: 26px; font-size: 14px; color: var(--tx-2); }
.in-arrivo b { color: var(--tx); }
#riprendi { margin-bottom: 26px; }
.riprendi-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.riprendi-voce { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-grande); background: var(--sup-piena); border: 1px solid var(--br); color: var(--tx); text-decoration: none; box-shadow: var(--ombra-1); }
.riprendi-voce:hover { border-color: var(--acc); }
.riprendi-voce .sigla { width: 40px; height: 40px; font-size: 14px; border-radius: 10px; }
.riprendi-voce small { display: block; color: var(--tx-3); font-size: 12.5px; margin: 1px 0 6px; }
.passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: passo; border-top: 1px solid var(--br); }
.passi li { counter-increment: passo; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--br); }
.passi li::before { content: counter(passo); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acc-tenue); color: var(--acc); font: 700 14px var(--font-titolo); margin-bottom: 8px; }
.passi b { display: block; font-family: var(--font-titolo); }
.passi span { color: var(--tx-2); font-size: 14px; }
.blocco-sez { margin-top: 40px; }
.blocco-sez > h2 { font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); letter-spacing: -.015em; margin-bottom: 6px; }
.blocco-sez > p { color: var(--tx-2); max-width: 68ch; }

/* ===== PAGINA CORSO ===== */
.corso-eroe { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 30px; }
@media (max-width: 1000px) { .corso-eroe { grid-template-columns: minmax(0, 1fr); } }
.corso-eroe .sigla { width: 64px; height: 64px; font-size: 22px; border-radius: 16px; margin-bottom: 14px; }
.corso-eroe h1 { margin-bottom: 10px; }
.corso-eroe .sotto { font-size: 17px; color: var(--tx-2); margin: 0 0 14px; max-width: 54ch; }
.dati-corso { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 14px; color: var(--tx-2); }
.dati-corso li { display: inline-flex; align-items: center; gap: 6px; }
.dati-corso svg { width: 17px; height: 17px; color: var(--tx-3); }
.dati-corso b { color: var(--tx); }
.corso-av { margin-top: 14px; max-width: 360px; }
.corso-av .nota { margin: 6px 0 0; }
.briciole { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--tx-3); margin-bottom: 14px; flex-wrap: wrap; }
.briciole a { color: var(--tx-2); text-decoration: none; }
.briciole a:hover { color: var(--acc); }
.tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .tre { grid-template-columns: minmax(0, 1fr); } }
.tre h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 1.05rem; }
.tre h2 svg { color: var(--acc); }
.elenco { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; }
.elenco li { position: relative; padding-left: 18px; }
.elenco li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--acc); transform: rotate(45deg); }
.strumenti { display: grid; gap: 10px; }
.strumenti div { font-size: 14px; }
.strumenti b { display: block; }
.strumenti span { color: var(--tx-2); }
.livello { margin-bottom: 26px; }
.livello-testa { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.livello-testa .num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--lv); color: #fff; font: 700 17px var(--font-titolo); }
:root[data-tema="scuro"] .livello-testa .num { color: #10131c; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) .livello-testa .num { color: #10131c; } }
.livello-testa h3 { font-size: 1.12rem; }
.livello-testa p { margin: 2px 0 0; color: var(--tx-2); font-size: 14px; }
.lista-lezioni { border: 1px solid var(--br); border-radius: var(--r-grande); background: var(--sup); overflow: hidden; }
.lista-lezioni a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 18px; min-height: 56px; color: var(--tx); text-decoration: none; border-top: 1px solid var(--br); transition: background .15s; }
.lista-lezioni a:first-child { border-top: 0; }
.lista-lezioni a:hover { background: var(--acc-tenue); }
.lista-lezioni .st { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--br-forte); font-size: 12px; font-weight: 600; color: var(--tx-3); }
.lista-lezioni .st svg { width: 15px; height: 15px; }
.lista-lezioni a.fatta .st { background: var(--lv, var(--acc)); border-color: var(--lv, var(--acc)); color: #fff; }
.lista-lezioni a.fatta .st svg { stroke-width: 2.4; }
.lista-lezioni a.chiusa .st { border-style: dashed; }
.lista-lezioni b { display: block; font-weight: 600; }
.lista-lezioni small { display: block; color: var(--tx-3); font-size: 13px; }
.lista-lezioni .min { font-size: 13px; color: var(--tx-3); display: flex; gap: 8px; align-items: center; }
.lista-lezioni > a > svg { color: var(--tx-3); }
.progetto { display: grid; gap: 14px; }
.progetto ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.glossario { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 28px; margin: 0; }
.glossario div { padding: 12px 0; border-bottom: 1px solid var(--br); }
.glossario dt { font-weight: 650; }
.glossario dd { margin: 2px 0 0; color: var(--tx-2); font-size: 14px; }
.esame-box { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.esame-box > div { flex: 1 1 320px; }
#esame-stato svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--ok); }
.cta-fine { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }

/* ===== VIDEO ===== */
.video { margin: 0 0 22px; position: relative; border-radius: var(--r-grande); overflow: hidden; background: #0d0f16; box-shadow: var(--ombra-2); aspect-ratio: 16 / 9; }
.video video { display: block; width: 100%; height: 100%; background: #0d0f16; }
.video.assente { box-shadow: none; background: var(--sup); border: 1.5px dashed var(--br-forte); }
.video-assente { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: left; color: var(--tx-2); }
.video-assente svg { width: 40px; height: 40px; color: var(--acc); stroke-width: 1.4; }
.video-assente b { display: block; color: var(--tx); font: 600 17px var(--font-titolo); }
.video-assente span { font-size: 14px; max-width: 40ch; display: block; }
.corso-eroe .video { margin: 0; }
.video-condividi { display: flex; flex-wrap: wrap; gap: 10px; margin: -10px 0 22px; }
.video-condividi[hidden] { display: none; }
.video-condividi svg { width: 18px; height: 18px; }
.corso-eroe .video-condividi { margin: 12px 0 0; }
.video-condividi + .trascrizione { margin-top: 0; }
.condividi-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.condividi-griglia .btn { justify-content: flex-start; min-height: 46px; }
.condividi-griglia svg { width: 18px; height: 18px; }
.cond-link { font-size: 13px; word-break: break-all; }
.trascrizione { margin: -8px 0 24px; border: 1px solid var(--br); border-radius: var(--r); background: var(--sup); }
.trascrizione summary { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 14px; cursor: pointer; font-size: 14px; color: var(--tx-2); }
.trascrizione summary svg { width: 18px; height: 18px; }
.trascrizione > div { padding: 2px 16px 12px; font-size: 14.5px; color: var(--tx-2); }

/* ===== LEZIONE ===== */
.lezione { max-width: 860px; margin: 0 auto; }
.lezione-testa { margin-bottom: 22px; }
.lezione-testa h1 { margin: 10px 0; }
.obiettivo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: color-mix(in srgb, var(--lv) 8%, var(--sup-piena)); border: 1px solid color-mix(in srgb, var(--lv) 22%, transparent); }
.obiettivo svg { color: var(--lv); margin-top: 2px; }
.corpo { font-size: 16px; line-height: 1.7; }
.corpo > * + * { margin-top: 16px; }
.corpo h2 { margin-top: 34px; font-size: 1.28rem; }
.corpo p { margin: 0; max-width: 72ch; }
.corpo ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; max-width: 72ch; }
.corpo ul li { position: relative; padding-left: 22px; }
.corpo ul li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 7px; height: 7px; border-radius: 2px; background: var(--lv, var(--acc)); transform: rotate(45deg); }
.riquadro { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--br); background: var(--sup-piena); font-size: 15px; line-height: 1.6; }
.riquadro svg { margin-top: 3px; }
.riquadro.tip svg { color: var(--acc); }
.riquadro.att { background: color-mix(in srgb, var(--att) 8%, var(--sup-piena)); border-color: color-mix(in srgb, var(--att) 28%, transparent); }
.riquadro.att svg { color: var(--att); }
.confronto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--br); border-radius: var(--r-grande); overflow: hidden; background: var(--sup-piena); }
@media (max-width: 640px) { .confronto { grid-template-columns: minmax(0, 1fr); } }
.confronto > div { padding: 14px 16px; font-size: 15px; line-height: 1.6; min-width: 0; }
.confronto .mono { font: 13.5px/1.6 var(--font-cod); white-space: pre-wrap; overflow-wrap: anywhere; }
.confronto > div + div { border-left: 1px solid var(--br); }
@media (max-width: 640px) { .confronto > div + div { border-left: 0; border-top: 1px solid var(--br); } }
.confronto .et { display: flex; align-items: center; gap: 6px; font: 600 12.5px var(--font); margin-bottom: 6px; }
.confronto .et svg { width: 16px; height: 16px; }
.confronto .no .et { color: var(--ko); } .confronto .si .et { color: var(--ok); }
.confronto .si { background: color-mix(in srgb, var(--ok) 5%, transparent); }
.esercizio { display: grid; gap: 10px; padding: 18px; border-radius: var(--r-grande); border: 1.5px dashed color-mix(in srgb, var(--lv, var(--acc)) 45%, transparent); background: color-mix(in srgb, var(--lv, var(--acc)) 4%, transparent); }
.esercizio h3 { display: flex; align-items: center; gap: 8px; color: var(--lv, var(--acc)); }
.esercizio > p { margin: 0; }
.esercizio > .btn { justify-self: start; }
.soluzione { animation: entra .35s var(--ease); }
.sol-testo { padding: 12px 14px; border-radius: var(--r); background: var(--sup-piena); border: 1px solid var(--br); white-space: pre-wrap; }
.spunta { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: 14px; }
.spunta input { width: 20px; height: 20px; accent-color: var(--acc); }
.fatta-riga { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--br); }
.navlez { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.navlez .btn { max-width: min(100%, 380px); }
.navlez .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== CODICE: riquadro editor ===== */
.codice { margin: 0; border-radius: var(--r-grande); overflow: hidden; background: var(--ed-bg); border: 1px solid var(--ed-br); box-shadow: var(--ombra-2); color: var(--ed-tx); }
.codice-testa { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px 6px 14px; background: var(--ed-testa); border-bottom: 1px solid var(--ed-br); font: 13px var(--font); }
.codice-testa > svg { width: 17px; height: 17px; color: var(--tk-fn); }
.codice-testa .nome-file { font-family: var(--font-cod); font-size: 12.5px; color: var(--ed-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.codice-testa .lang { font-size: 11px; color: var(--ed-num); text-transform: uppercase; letter-spacing: .06em; }
.codice-testa .azioni { margin-left: auto; display: flex; gap: 4px; flex: none; }
.btn-cod { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: #d4d8e6; font: 500 13px var(--font); cursor: pointer; }
.btn-cod svg { width: 16px; height: 16px; }
.btn-cod:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .1); }
.btn-cod[data-az="prova"] { color: #b9f5c8; }
.codice-corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.codice pre { margin: 0; font: 13.5px/1.65 var(--font-cod); tab-size: 4; }
.codice .numeri { padding: 14px 10px 14px 14px; text-align: right; color: var(--ed-num); user-select: none; border-right: 1px solid var(--ed-br); }
.codice .sorgente { padding: 14px 16px; overflow-x: auto; white-space: pre; scrollbar-color: var(--ed-br) transparent; }
.codice .sorgente:focus-visible { outline: 2px solid var(--tk-fn); outline-offset: -2px; border-radius: 0; }
.codice code { all: unset; font: inherit; }
.codice-out { border-top: 1px solid var(--ed-br); background: var(--ed-out); }
.codice-out > span { display: flex; align-items: center; gap: 6px; padding: 8px 14px 0; font: 600 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ed-num); }
.codice-out svg { width: 15px; height: 15px; }
.codice-out pre { padding: 6px 16px 14px; white-space: pre-wrap; overflow-wrap: anywhere; color: #d6dae6; }
.tk-kw { color: var(--tk-kw); } .tk-str { color: var(--tk-str); } .tk-num { color: var(--tk-num); } .tk-com { color: var(--tk-com); font-style: italic; }
.tk-fn { color: var(--tk-fn); } .tk-tipo { color: var(--tk-tipo); } .tk-var { color: var(--tk-var); } .tk-op { color: var(--tk-op); } .tk-meta { color: var(--tk-meta); }
.tk-tag { color: var(--tk-tag); } .tk-attr { color: var(--tk-attr); } .tk-val { color: var(--tk-val); } .tk-sel { color: var(--tk-sel); } .tk-prop { color: var(--tk-prop); } .tk-lit { color: var(--tk-lit); }
.codice ::selection { background: rgba(127, 199, 255, .3); color: inherit; }
/* Prova qui */
.prova { display: grid; gap: 10px; margin-top: 10px; padding: 14px; border-radius: var(--r-grande); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--br)); background: color-mix(in srgb, var(--ok) 4%, var(--sup-piena)); animation: entra .35s var(--ease); }
.prova-testa { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.prova-testa b { display: inline-flex; gap: 6px; align-items: center; color: var(--ok); }
.prova-testa b svg { width: 17px; height: 17px; }
.prova-editor textarea { width: 100%; font: 13.5px/1.6 var(--font-cod); color: var(--ed-tx); background: var(--ed-bg); border: 1px solid var(--ed-br); border-radius: var(--r); padding: 12px 14px; resize: vertical; tab-size: 2; caret-color: #fff; }
.prova-editor textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
.prova-risultato { width: 100%; height: 240px; border: 1px solid var(--br-forte); border-radius: var(--r); background: #fff; resize: vertical; }

/* quiz */
.quiz { margin-top: 38px; }
.quiz-dom { padding: 18px; margin-top: 12px; }
.quiz-dom h3 { font-size: 15.5px; margin-bottom: 10px; }
.risposte { display: grid; gap: 8px; }
.risposte button {
  text-align: left; display: flex; gap: 10px; align-items: center; min-height: 46px; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--br-forte);
  background: var(--sup-piena); color: var(--tx); font: 14.5px/1.4 var(--font); cursor: pointer; transition: background .15s, border-color .15s;
}
.risposte button:hover:not(:disabled) { background: var(--acc-tenue); border-color: var(--acc); }
.risposte button:disabled { cursor: default; }
.risposte button .let { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--br-forte); font-size: 12px; font-weight: 700; }
.risposte button.scelta { border-color: var(--acc); background: var(--acc-tenue); }
.risposte button.scelta .let { background: var(--acc); border-color: var(--acc); color: var(--acc-t); }
.risposte button.giusta { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--sup-piena)); }
.risposte button.giusta .let { background: var(--ok); border-color: var(--ok); color: #fff; }
.risposte button.sbagliata { border-color: var(--ko); background: color-mix(in srgb, var(--ko) 9%, var(--sup-piena)); }
.risposte button.sbagliata .let { background: var(--ko); border-color: var(--ko); color: #fff; }
.perche { margin: 10px 0 0; font-size: 14px; color: var(--tx-2); animation: entra .35s var(--ease); }
.esito { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 18px; padding: 18px 20px; }
.esito.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

/* ===== SBLOCCA ===== */
.sblocca { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 24px; border-radius: var(--r-grande); background: var(--sup-piena); border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--br)); box-shadow: var(--ombra-2); }
@media (max-width: 560px) { .sblocca { grid-template-columns: minmax(0, 1fr); padding: 18px; } }
.sblocca-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--acc-tenue); color: var(--acc); }
.sblocca-ic svg { width: 28px; height: 28px; }
.sblocca-testo { display: grid; gap: 12px; }
.sblocca-testo h2 { font-size: 1.35rem; }
.sblocca-testo p { margin: 0; color: var(--tx-2); max-width: 64ch; }
.sblocca-form { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--br); max-width: 560px; }
.scaduta { display: flex; gap: 8px; align-items: flex-start; color: var(--tx) !important; padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--att) 10%, transparent); }
.scaduta svg { color: var(--att); }
.stato-lic { display: flex; gap: 16px; align-items: flex-start; }
.stato-lic > svg { width: 30px; height: 30px; color: var(--tx-3); margin-top: 2px; }
.stato-lic.ok > svg { color: var(--ok); }
.stato-lic p { margin: 4px 0 0; }
.mancano { margin: 10px 0 0; padding-left: 20px; }

/* ===== ESAME / ATTESTATO / REGISTRO ===== */
.due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 820px) { .due { grid-template-columns: minmax(0, 1fr); } }
.dlg-form { display: grid; gap: 10px; }
.esame-card { display: flex; flex-direction: column; gap: 10px; }
.esame-prog { position: sticky; top: 0; z-index: 5; padding: 10px 0; background: linear-gradient(var(--mica) 70%, transparent); }
.attestato { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 1.414; padding: 6% 7%; background: #fff; color: #161a2a; border-radius: 4px; box-shadow: var(--ombra-3); display: flex; flex-direction: column; overflow: hidden; }
.attestato::before { content: ""; position: absolute; inset: 14px; border: 1.5px solid #2b46c8; border-radius: 2px; pointer-events: none; }
.attestato::after { content: ""; position: absolute; inset: 20px; border: .5px solid rgba(43, 70, 200, .4); pointer-events: none; }
.att-alto { display: flex; justify-content: space-between; align-items: center; font: 600 13px var(--font); color: #2b46c8; letter-spacing: .02em; }
.att-alto img { width: 44px; height: 44px; border-radius: 10px; }
.att-centro { margin: auto 0; text-align: center; }
.att-centro .tipo { font: 600 clamp(10px, 1.5vw, 14px) var(--font); letter-spacing: .14em; text-transform: uppercase; color: #4c536a; }
.att-centro .nome { font: 650 clamp(24px, 5vw, 50px)/1.1 var(--font-titolo); letter-spacing: -.02em; margin: .35em 0 .25em; color: #0f1222; }
.att-centro .desc { font-size: clamp(11px, 1.7vw, 16px); color: #353b52; max-width: 60ch; margin: 0 auto; }
.att-centro .corso { font: 650 clamp(15px, 2.6vw, 26px)/1.2 var(--font-titolo); color: #2b46c8; margin: .5em 0; }
.att-basso { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; font-size: clamp(9px, 1.25vw, 12.5px); color: #434a60; }
.att-basso b { display: block; color: #161a2a; font-size: 1.15em; }
.att-basso .firma { text-align: right; }
.att-basso .firma b { font: italic 600 1.6em var(--font-titolo); color: #2b46c8; }
.att-codice { font-family: var(--font-cod); letter-spacing: .05em; }
.verificato { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: var(--r); background: color-mix(in srgb, var(--ok) 10%, var(--sup-piena)); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.verificato svg { color: var(--ok); }
.verificato b, .verificato span { display: block; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.tabella th, .tabella td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--br); }
.tabella th { font-size: 12px; color: var(--tx-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tabella td.tab, .tabella td .att-codice { white-space: nowrap; }
.scorri-x { overflow-x: auto; }

/* ===== FUNZIONI / ALTRO ===== */
.funzioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 28px; }
.funzioni a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--br); color: var(--tx); text-decoration: none; }
.funzioni a:hover b { color: var(--acc); }
.funzioni a > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--acc-tenue); color: var(--acc); }
.funzioni small { display: block; color: var(--tx-2); font-size: 13.5px; margin-top: 2px; }
.faq details { border-bottom: 1px solid var(--br); }
.faq summary { min-height: 48px; padding: 12px 0; cursor: pointer; font-weight: 600; }
.faq details p { color: var(--tx-2); max-width: 72ch; }

/* ===== piede ===== */
.piede { max-width: 1140px; margin: 56px auto 0; padding: 18px 0 0; border-top: 1px solid var(--br); display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--tx-3); }
.piede a { color: var(--tx-2); }
.piede .credit { margin-right: auto; }
.piede button { border: 0; background: none; color: var(--tx-2); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 0; min-height: 32px; }

/* ===== finestre e avvisi ===== */
dialog { border: 1px solid var(--br); border-radius: var(--r-grande); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--sup-piena); color: var(--tx); box-shadow: var(--ombra-3); }
dialog::backdrop { background: rgba(5, 8, 25, .34); backdrop-filter: blur(2px); }
dialog[open] { animation: dlg .3s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dlg-corpo { padding: 24px; display: grid; gap: 12px; max-height: 72vh; overflow: auto; }
.dlg-corpo p { margin: 0; color: var(--tx-2); }
.dlg-piede { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 24px; background: var(--sup-2); border-top: 1px solid var(--br); }
.tondo-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--acc); color: var(--acc-t); }
.tondo-ic svg { width: 28px; height: 28px; }
.lista-nov { margin: 0; padding-left: 18px; color: var(--tx-2); }
.avviso { position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 18px; border-radius: 8px; background: var(--tx); color: var(--mica); box-shadow: var(--ombra-2); font-size: 14px; animation: dlg .3s var(--ease); max-width: calc(100vw - 32px); }
@media (max-width: 860px) { .avviso { bottom: 92px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

@media print {
  @page { size: A4 landscape; margin: 0; }
  body { background: #fff; }
  .nav, .barra, .testata, .no-stampa, .piede, .banner-lic, #centrale-cgfa { display: none !important; }
  main { padding: 0; }
  .vista { max-width: none; animation: none; }
  .attestato { box-shadow: none; max-width: none; width: 297mm; height: 210mm; aspect-ratio: auto; border-radius: 0; }
  body.stampa-registro { padding: 14mm; }
  body.stampa-registro .pannello { box-shadow: none; border: 0; background: #fff; backdrop-filter: none; }
  body.stampa-registro .due { display: none; }
}
@media (max-width: 640px) {
  .pillole { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; }
  .pillole button { flex: none; }
  .filtri .cerca { max-width: none; }
  .conta-corsi { margin-left: 0; }
  .lista-lezioni a { padding: 12px 14px; gap: 12px; }
  .codice-testa .lang { display: none; }
  .btn-cod span { display: none; }
  .campo-riga { flex-direction: column; }
}