/* Corso Metodo Hudolin — foglio LMS che ESTENDE il DNA visivo DEPENDEX
   (rainbow-neon.css + thinkyfic-base.css). Stesse variabili, nessun stacco dal sito. */
:root, [data-theme="dark"]{
  --bg:#070709;
  --card:#101116;
  --card-subtle:#16171f;
  --ink:#ffffff;
  --ink-soft:#e2e8f0;
  --muted:#cbd5e1;
  --paper:#070709;
  --paper-2:#0c0f18;
  --line:rgba(0,212,255,.22);
  --line-2:rgba(255,255,255,.16);
  --gold:#ffd700;
  --gold-2:#fff2b2;
  --gold-soft:rgba(212,175,55,.18);
  --teal:#33eeff;
  --teal-2:#00d4ff;
  --teal-soft:rgba(0,212,255,.14);
  --ok:#44ff99;
  --ok-bg:rgba(0,255,119,.14);
  --warn:#ffc14a;
  --warn-bg:rgba(255,119,0,.16);
  --danger:#ff8a90;
  --danger-bg:rgba(255,51,68,.16);
  --locked:#94a3b8;
  --input-bg:#121624;
  --shadow:0 16px 40px rgba(0,0,0,.85), 0 0 25px rgba(0,212,255,.18);
  --shadow-sm:0 2px 10px rgba(0,0,0,.45);
  --radius:20px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-sans:var(--font);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --max:1120px;
  --nav-h:64px;
  --color-text:var(--ink);
  --color-muted:var(--muted);
  color-scheme:dark;
}

/* Tema chiaro accessibile (WCAG 2.2 AA): stessi accenti arcobaleno su superficie chiara.
   Il toggle esiste già sul sito; qui il tema chiaro è realmente chiaro e contrastato. */
[data-theme="light"]{
  --bg:#f4f1ea;
  --card:#ffffff;
  --card-subtle:#f7f4ee;
  --ink:#16192a;
  --ink-soft:#2a3148;
  --muted:#3d4660;
  --paper:#f4f1ea;
  --paper-2:#efebe3;
  --line:rgba(0,70,110,.22);
  --line-2:rgba(22,25,42,.18);
  --gold:#8a6408;
  --gold-2:#b8860b;
  --gold-soft:rgba(184,134,11,.16);
  --teal:#005a8c;
  --teal-2:#0077aa;
  --teal-soft:rgba(0,90,140,.10);
  --ok:#0b6b3c;
  --ok-bg:#e3f6ec;
  --warn:#7a4a00;
  --warn-bg:#fff1d4;
  --danger:#9b1c28;
  --danger-bg:#fde8ea;
  --locked:#5b6478;
  --input-bg:#ffffff;
  --shadow:0 10px 30px rgba(22,25,42,.08);
  --shadow-sm:0 2px 8px rgba(22,25,42,.06);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--neon-cyan, var(--teal));outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
/* header */
.site-header{background:var(--ink);color:#f6f1e8;position:sticky;top:0;z-index:40;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.site-header .wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem;min-height:var(--nav-h);display:flex;align-items:center;gap:1.25rem}
.brand{display:flex;align-items:center;gap:.7rem;color:#f6f1e8;text-decoration:none;font-weight:600;letter-spacing:.02em}
.brand-mark{width:36px;height:36px;border-radius:50%;border:2px solid var(--gold-2);display:grid;place-items:center;font-family:var(--serif);font-size:1.05rem;color:var(--gold-2);flex:none}
.brand small{display:block;font-weight:400;font-size:.68rem;color:#c9c3b8;letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;gap:.2rem;align-items:center;margin-left:auto;flex-wrap:wrap}
.nav a,.nav .btn-link{color:#e8e2d6;text-decoration:none;padding:.45rem .75rem;border-radius:8px;font-size:.92rem}
.nav a:hover,.nav a[aria-current="page"]{background:rgba(255,255,255,.08);color:#fff}
.nav .btn{padding:.45rem .9rem;font-size:.88rem}
.nav-toggle{display:none;background:transparent;border:1px solid #5a6174;color:#f6f1e8;border-radius:8px;padding:.4rem .7rem;margin-left:auto}
/* layout */
main{flex:1}
.wrap{max-width:var(--max);margin:0 auto;padding:1.5rem 1.25rem 3rem}
.site-footer{background:var(--ink);color:#c9c3b8;padding:2rem 1.25rem;font-size:.88rem}
.site-footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:0;max-width:var(--max);margin:0 auto}
.site-footer a{color:#e8e2d6}
/* flash */
.flash-stack{max-width:var(--max);margin:0 auto;padding:.75rem 1.25rem 0}
.flash{padding:.7rem 1rem;border-radius:10px;margin:0 0 .5rem;border:1px solid transparent}
.flash-ok{background:var(--ok-bg);border-color:#bfe5cd;color:var(--ok)}
.flash-err,.flash-error{background:var(--danger-bg);border-color:#f3c1c1;color:var(--danger)}
.flash-info{background:#e8eef8;border-color:#c5d3ea;color:#24365c}
.flash-warn{background:var(--warn-bg);border-color:#efd7a4;color:var(--warn)}
/* typography */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.25;margin:0 0 .6em}
h1{font-size:clamp(1.7rem,3vw,2.4rem)}
h2{font-size:clamp(1.3rem,2.2vw,1.75rem)}
h3{font-size:1.15rem}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:42rem}
.muted{color:var(--muted)}
.kicker{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.15rem;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;line-height:1.2;min-height:44px;white-space:normal !important}
.btn:hover{background:var(--teal-2);color:#fff}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#1c2233}
.btn-gold:hover{background:var(--gold-2);color:#1c2233}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-danger{background:var(--danger);border-color:var(--danger)}
.btn-sm{padding:.4rem .7rem;font-size:.85rem;font-weight:600}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
/* cards / grid */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.25rem 1.35rem}
.card + .card{margin-top:1rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* hero */
.hero{background:linear-gradient(180deg, rgba(14,20,36,.95) 0%, rgba(9,13,26,.98) 100%);color:var(--ink);padding:2.4rem 1.25rem 2.8rem;position:relative;overflow:hidden;border-radius:var(--radius);margin:1.2rem auto 0;max-width:calc(var(--max) + 2.5rem)}
.hero:after{content:"";position:absolute;inset:auto -10% -40% 40%;height:80%;background:radial-gradient(circle,rgba(196,163,90,.25),transparent 60%);pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding:0;max-width:var(--max)}
.hero h1{color:#fff;max-width:18ch}
.hero .lede{color:#ddd6c8;max-width:38rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 1.8rem}
.pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#f3e6c4;padding:.35rem .7rem;border-radius:999px;font-size:.82rem}
.section{padding:3rem 0}
.section-head{margin-bottom:1.5rem}
/* curriculum */
.unit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.unit-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.unit-item header,.unit-item .unit-h{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.15rem;text-decoration:none;color:inherit}
.unit-item.locked{opacity:.78}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:2.6rem;padding:0 .45rem;border-radius:10px;background:var(--teal-soft);color:var(--teal);font-weight:700;font-size:.85rem;flex:none}
.badge.toolkit{background:var(--gold-soft);color:#6a5220}
.badge.lock{background:#eee;color:var(--locked)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.unit-item h3{margin:0 0 .2rem;font-size:1.05rem}
.unit-item p{margin:0;color:var(--muted);font-size:.92rem}
.hours{margin-left:auto;font-size:.85rem;color:var(--ink-soft);white-space:nowrap;padding-top:.3rem}
.status{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.status-ok{color:var(--ok)}
.status-wait{color:var(--warn)}
.status-lock{color:var(--locked)}
/* progress */
.progress{background:rgba(255,255,255,.12);border-radius:999px;height:10px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--rainbow-gradient-h, linear-gradient(90deg,#00d4ff,#0077ff 60%,#d4af37));border-radius:inherit;transition:width .4s}
.progress-lg{height:14px}
.pct{font-variant-numeric:tabular-nums;font-weight:700}
/* forms */
label{display:block;font-weight:600;margin:0 0 .3rem;font-size:.92rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],textarea,select{
  width:100%;padding:.65rem .75rem;border:1px solid var(--line-2);border-radius:10px;font:inherit;background:var(--input-bg);color:var(--ink)
}
textarea{min-height:8rem;resize:vertical}
.field{margin:0 0 1rem}
.help{font-size:.82rem;color:var(--muted);margin:.3rem 0 0}
.auth{max-width:26rem;margin:2rem auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.6rem;box-shadow:var(--shadow)}
.form-error{background:var(--danger-bg);color:var(--danger);padding:.6rem .8rem;border-radius:8px;margin:0 0 1rem}
/* dashboard */
.dash-top{display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin-bottom:1.5rem}
.stat{display:flex;flex-direction:column;gap:.15rem}
.stat b{font-size:1.6rem;font-family:var(--serif)}
/* player */
.player{display:grid;grid-template-columns:260px 1fr;gap:1.25rem;align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + 1rem);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem;max-height:calc(100vh - var(--nav-h) - 2rem);overflow:auto}
.toc a,.toc .toc-l{display:block;padding:.5rem .65rem;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.9rem}
.toc a:hover,.toc a.is-on{background:var(--teal-soft);color:var(--teal)}
.toc .done:before{content:"✓ ";color:var(--ok);font-weight:700}
.lesson + .lesson{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.lesson .body :where(p,ul,ol,blockquote){max-width:62ch}
.lesson .body blockquote{margin:1rem 0;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--gold);color:var(--ink-soft)}
/* slides */
.slides{margin:1.2rem 0}
.slide-main{background:#111;border-radius:12px;overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center;position:relative}
.slide-main img{max-height:100%;width:auto;margin:0 auto}
.slide-nav{display:flex;justify-content:space-between;align-items:center;margin:.6rem 0}
.thumbs{display:flex;gap:.4rem;overflow:auto;padding:.2rem 0}
.thumbs button{border:2px solid transparent;padding:0;background:#ddd;border-radius:6px;cursor:pointer;flex:none;width:88px;height:56px;overflow:hidden}
.thumbs button.is-on{border-color:var(--teal)}
.thumbs img{width:100%;height:100%;object-fit:cover}
/* media */
.media-box audio,.media-box video{width:100%;border-radius:10px;background:#111;margin:.4rem 0 1rem}
.res-list{list-style:none;margin:0;padding:0}
.res-list li{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
/* quiz */
.quiz-q{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;margin:0 0 1rem}
.quiz-q fieldset{border:0;margin:0;padding:0}
.opt{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .7rem;border:1px solid var(--line);border-radius:10px;margin:.4rem 0;cursor:pointer;background:var(--card-subtle);white-space:normal !important;overflow:visible !important}
.opt:hover,.opt:has(input:focus-visible){border-color:var(--teal)}
.opt:has(input:checked){border-color:var(--teal);background:var(--teal-soft)}
.opt input{margin-top:.25rem}
.result-ok{border-left:4px solid var(--ok)}
.result-ko{border-left:4px solid var(--danger)}
/* tables */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
table.data{width:100%;border-collapse:collapse;font-size:.92rem}
table.data th,table.data td{padding:.65rem .8rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{background:var(--card-subtle);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
table.data tr:hover td{background:var(--teal-soft)}
/* admin */
.admin-shell{display:grid;grid-template-columns:220px 1fr;gap:1.25rem;align-items:start}
.admin-nav{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem;position:sticky;top:calc(var(--nav-h) + 1rem)}
.admin-nav a{display:block;padding:.5rem .7rem;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.92rem}
.admin-nav a:hover,.admin-nav a.is-on{background:var(--teal-soft);color:var(--teal-2)}
/* notes */
.note{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem;margin:0 0 .8rem}
.note time{font-size:.8rem;color:var(--muted)}
/* verify */
.verify{max-width:36rem;margin:2rem auto;text-align:center}
.verify.valid{border-color:#bfe5cd}
/* utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.center{text-align:center}
.flex{display:flex;gap:.7rem;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
hr.sep{border:0;border-top:1px solid var(--line);margin:2rem 0}
.empty{padding:2rem;text-align:center;color:var(--muted)}
code,kbd{font-family:var(--mono);font-size:.85em;background:var(--card-subtle);padding:.1em .35em;border-radius:4px;color:var(--ink)}
/* how-it-works */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.step{padding:1.2rem}
.step .n{font-family:var(--serif);font-size:1.6rem;color:var(--gold);display:block;margin-bottom:.3rem}
/* mobile */
@media (max-width:860px){
  .dash-top,.player,.admin-shell{grid-template-columns:1fr}
  .toc,.admin-nav{position:static;max-height:none}
  .nav-toggle{display:inline-flex}
  .nav{display:none}
  .nav.is-open{display:flex}
  .hours{margin-left:0}
  .unit-item header,.unit-item .unit-h{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .progress>span{transition:none}
}
@media print{
  .topbar,.site-footer,.dx-mobile-bottom-bar,.nav-toggle,.burger-btn,.theme-toggle,.btn,.flash-stack{display:none !important}
  body{background:#fff;color:#111;padding:0}
}
/* viewer slide/infografiche */
.viewer{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem;margin:1rem 0;box-shadow:var(--shadow-sm)}
.viewer-bar{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-bottom:.6rem}
.viewer-tools{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap}
.viewer-stage{position:relative;background:#111;border-radius:10px;overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center;outline-offset:3px}
.viewer-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in;transition:transform .2s}
.viewer-stage.zoomed{overflow:auto;place-items:start}
.viewer-stage.zoomed img{max-width:none;max-height:none;width:200%;cursor:zoom-out}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;border-radius:8px;background:rgba(0,0,0,.45);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.viewer-nav:hover{background:rgba(0,0,0,.7)}
.viewer-nav.prev{left:.5rem}.viewer-nav.next{right:.5rem}
.viewer-cap{margin:.5rem 0;color:var(--ink-soft);min-height:1.4em}
.viewer-thumbs{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 0 .4rem}
.viewer-thumbs button{flex:none;width:96px;height:54px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:#ddd;cursor:pointer;position:relative}
.viewer-thumbs button img{width:100%;height:100%;object-fit:cover}
.viewer-thumbs button.is-on{border-color:var(--teal)}
.viewer-thumbs button.seen::after{content:"✓";position:absolute;right:2px;bottom:0;font-size:.75rem;font-weight:700;color:#fff;background:var(--ok);border-radius:4px;padding:0 3px}
.viewer:fullscreen{background:#000;padding:1rem;display:flex;flex-direction:column}
.viewer:fullscreen .viewer-stage{flex:1;aspect-ratio:auto}
.viewer:fullscreen .viewer-bar,.viewer:fullscreen .viewer-cap{color:#eee}
@media (max-width:600px){.viewer-nav{width:36px;height:52px}.viewer-thumbs button{width:72px;height:40px}}
.viewer-stage picture{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.viewer-stage img{max-width:100%;max-height:100%}
.viewer-stage.zoomed picture{display:block;width:auto;height:auto}
.viewer,.player>div{min-width:0}

.viewer-explain{border-top:1px solid var(--line);margin-top:.4rem;padding-top:.8rem}
.viewer-anchor{font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--teal);background:var(--teal-soft);padding:.6rem .8rem;border-radius:8px}
.viewer-q{background:var(--gold-soft);padding:.8rem;border-radius:10px;margin:.8rem 0}
.viewer-q label{font-weight:700}
.viewer-q textarea{min-height:5rem;margin:.4rem 0}
.viewer-next{font-style:italic}

/* —— Estensioni LMS sul DNA rainbow (contrasto, chrome, componenti) —— */
.btn, .btn-rainbow-neon { color:#061018; background:var(--rainbow-gradient, linear-gradient(135deg,#00d4ff 0%,#0077ff 60%,#d4af37 100%)); border:0; text-shadow:none; box-shadow:var(--rainbow-glow, 0 4px 20px rgba(0,212,255,.35)); }
.btn:hover, .btn-rainbow-neon:hover { color:#061018; filter:brightness(1.08); }
.btn-gold { background:linear-gradient(135deg,#d4af37,#ffd700); color:#16120a; border:0; }
.btn-gold:hover { color:#16120a; }
.btn-ghost, .btn-rainbow-outline { background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.btn-ghost:hover, .btn-rainbow-outline:hover { background:var(--teal-soft); color:var(--ink); }
.btn-danger { background:var(--danger); border-color:var(--danger); color:#160408; }
[data-theme="light"] .btn-danger { color:#fff; }
.wrap{max-width:var(--max);margin:0 auto;padding:1.5rem 1.25rem 3rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.25rem 1.35rem;color:var(--ink)}
.kicker, .badge-neon-rainbow { color:var(--gold-2); }
[data-theme="light"] .kicker { color:var(--gold); }
.hero h1{color:var(--ink);max-width:22ch;font-weight:800}
.hero .lede{color:var(--muted);max-width:40rem}
.hero-meta .pill{background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--ink);padding:.35rem .7rem;border-radius:999px;font-size:.85rem}
[data-theme="light"] .hero{background:linear-gradient(180deg,#fff,#f4f1ea);border:1px solid var(--line)}
[data-theme="light"] .hero-meta .pill{background:#fff}
.flash-ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.flash-err,.flash-error,.form-error{background:var(--danger-bg);border-color:transparent;color:var(--danger)}
.flash-info{background:var(--teal-soft);color:var(--ink)}
.flash-warn{background:var(--warn-bg);color:var(--warn)}
.drawer-auth-card{padding:14px;border-radius:16px;background:rgba(12,16,26,.92);border:1px solid rgba(255,215,0,.35);margin-bottom:12px;color:var(--muted)}
[data-theme="light"] .drawer-auth-card{background:#fff;color:var(--muted)}
.drawer-auth-card p{font-size:.82rem;line-height:1.4;margin:0}
.a11y-row{display:flex;flex-wrap:wrap;gap:.4rem;padding:.2rem 0 .8rem}
.header-actions{display:flex;align-items:center;gap:10px}
.header-actions .btn{white-space:nowrap !important}
/* contrasto testo su gradienti: il testo delle CTA è sempre scuro sul gradient cyan/oro */
.btn-row .btn{max-width:100%}
/* path / unità */
.unit-item{background:var(--card);border:1px solid var(--line)}
.unit-item .unit-h:hover{background:var(--teal-soft)}
.status-in{color:var(--neon-cyan, var(--teal))}
/* celebration */
.celebrate{border:1px solid rgba(255,215,0,.45);background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(212,175,55,.14));padding:1rem 1.2rem;border-radius:var(--radius);margin:0 0 1.2rem}
.celebrate h2{margin:0 0 .3rem}
.streak{font-size:.95rem;color:var(--muted)}
.missing-bar{margin:.8rem 0 0}
/* focus mode */
body.focus-mode .site-footer, body.focus-mode .dx-mobile-bottom-bar, body.focus-mode .workbook-box, body.focus-mode .hero-meta{display:none}
body.focus-mode .toc{display:none}
body.focus-mode .player{grid-template-columns:1fr}
/* a11y */
html[data-a11y="text-lg"]{font-size:20px}
html[data-a11y="contrast"], html[data-a11y="contrast"] body{--ink:#fff;--muted:#f1f5f9;--bg:#000;--card:#111;--card-subtle:#161616}
html[data-a11y="contrast"][data-theme="light"], html[data-a11y="contrast"][data-theme="light"] body{--ink:#000;--muted:#1e1e1e;--bg:#fff;--card:#fff;--card-subtle:#f4f4f4}
/* override nowrap aggressivo del CSS sito su testi lunghi LMS */
.unit-h, .drawer-link, .quiz-q, label, .opt, .res-list li, .flash, .celebrate, .viewer-cap, .viewer-explain{white-space:normal !important;overflow:visible !important;text-overflow:unset !important}
.dx-mobile-bottom-bar a{display:flex;align-items:center;justify-content:center;min-height:48px;font-size:.78rem;font-weight:700;color:var(--ink);text-decoration:none}
.dx-mobile-bottom-bar a.active{color:var(--neon-cyan, var(--teal))}
@media (prefers-reduced-motion:reduce){
  .brand-mark-rainbow, .rainbow-border::before, .badge-neon-rainbow .dot{animation:none !important}
}
@media print{ .drawer, .drawer-backdrop{display:none !important} }

/* Fase 2: badge, trascrizione, ricerca, player */
.badge-list{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));margin:1rem 0}
.badge-card{padding:1rem 1.1rem;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:14px;background:rgba(255,255,255,.03)}
.badge-card h3{margin:.2rem 0 .4rem;font-size:1.05rem}
.media-figure{margin:0 0 1rem}
.media-figure video,.media-figure audio{width:100%;max-height:70vh;background:#000;border-radius:12px}
.transcript{margin-top:.8rem;max-height:16rem;overflow:auto;padding:.6rem .8rem;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:12px}
.transcript-lines{list-style:none;margin:0;padding:0}
.transcript-cue{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;padding:.25rem 0;cursor:pointer;font:inherit}
.transcript-cue:hover,.transcript-cue:focus{text-decoration:underline}
body.audio-only .media-figure video{height:0;min-height:0;max-height:0;overflow:hidden}
.qa-box{margin-top:1.2rem}
.qa-item{margin:.6rem 0;padding:.6rem 0;border-top:1px solid var(--line,rgba(255,255,255,.1))}
.search-hits p mark, .search-hits « {font-weight:600}
.mastery{display:inline-block;font-size:.8rem;margin-left:.4rem;opacity:.85}
#wb-coupon{max-width:12rem}
/* Libri del percorso */
.books-page .lead{font-size:1.08rem;max-width:62ch}
.books-note{font-size:.92rem;max-width:70ch}
.books-group{margin-top:2.2rem}
.books-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.book-card{display:grid;grid-template-columns:150px 1fr;gap:1.1rem;align-items:start}
.books-grid > .book-card{margin:0}
.book-card-wb{margin:1.4rem 0;grid-template-columns:180px 1fr}
.book-cover{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.35);background:#111}
.book-body h3{font-size:1.2rem;margin-bottom:.25rem}
.book-sub{font-size:.88rem;color:var(--ink-soft,var(--muted));margin:.1rem 0 .6rem}
.book-body .btn-row{margin-top:.8rem}
.pp-wrap{margin-top:.8rem;max-width:380px}
.pp-wrap label{display:block;margin-bottom:.5rem}
.small{font-size:.85rem}
@media (max-width:560px){.book-card,.book-card-wb{grid-template-columns:96px 1fr;gap:.8rem}.book-body .btn{width:100%}}