/* FAMPREP — the FP Institute learning platform.
   IL CONTRATTO E' IL MOCK: mock/famprep-mock.html, approvato da Max il
   5 ago 2026. Design di Progetto Happiness (app di casa) coi colori FP:
   scena ossidiana navy-nera, pannelli con la venatura d'oro sul bordo,
   griglia di fondo, sidebar verticale fissa e collassabile, rail interno
   per funzione, Inter + Mona Sans per i numeri display, CTA oro piena.
   Una sola eccezione, voluta e dichiarata: la DOMANDA vive su un foglio
   chiaro stile Bluebook, perche' l'esame vero e' fatto cosi'. */
:root{
  --bg:#0A0F1E; --panel-a:#101527; --panel-b:#0A0E1B;
  --ink:#EDEDED; --muted:#9CA3AF; --faint:#6B7280;
  --navy:#0B1D3A;
  --gold:#C8972D; --gold-hi:#E3BC63; --gold-pale:#F2DCA8;
  --line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.05);
  --good:#34D399; --good-deep:#1F7E52; --bad:#F87171; --bad-deep:#B23A2C;
  --warn:#E3BC63;
  /* il foglio dell'esame */
  --paper:#FBFBF7; --paper-line:#E4E2D8; --paper-ink:#1B2437; --paper-muted:#5C6478; --paper-faint:#8B92A6;
  --good-tintp:#EAF5EF; --good-line:#BFE0CD; --bad-tintp:#FAEDEA; --bad-line:#E7C9C2;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:'Mona Sans',Inter,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --tabh:62px; --sidew:16rem;
  --t-fast:150ms; --t-med:240ms;
}
@font-face{font-family:'Mona Sans';src:url('fonts/MonaSans.woff2') format('woff2');
  font-weight:200 900;font-stretch:75% 125%;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
/* overflow-x SOLO con clip: hidden qui creava un contenitore di scroll
   (overflow-y diventa auto) e a scrollare era il BODY, non la finestra —
   window.scrollTo non muoveva niente e ogni pagina si apriva "sull'ultimo
   punto" (Max, 12 ago). clip taglia l'asse X senza catturare lo scroll:
   la finestra torna padrona. hidden resta prima, ripiego per motori vecchi
   (li' copre la cintura in route()). */
html{overflow-x:hidden;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none}
.cta .row>div,.opt .txt,.aline>div,.prow .nm,.bbhead .mark{min-width:0;overflow-wrap:anywhere}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:6px}

/* la griglia di fondo e il respiro d'oro, come nel mock */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:
  linear-gradient(rgba(200,151,45,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(200,151,45,.04) 1px,transparent 1px);
  background-size:48px 48px}
body::after{content:"";position:fixed;width:420px;height:420px;top:-160px;right:-120px;z-index:-1;
  border-radius:50%;filter:blur(90px);opacity:.2;pointer-events:none;background:#C8972D}

#app{min-height:100%;padding-bottom:calc(var(--tabh) + var(--sab))}
@media(min-width:1024px){
  #app{padding-left:var(--sidew);padding-bottom:0;transition:padding-left .2s}
  body.side-collapsed #app{padding-left:4rem}
  /* quando la sidebar non c'e' (accesso, esame, riti) il suo spazio
     non deve restare: senno' tutto vive centrato nell'area sbagliata */
  body:has(.sidebar[hidden]) #app{padding-left:0}
  body.no-side #app{padding-left:0}
}

/* ================= sidebar (l'ossatura di Happy) ================= */
.sidebar{display:none}
@media(min-width:1024px){
  .tabbar{display:none!important}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidew);z-index:30;display:flex;flex-direction:column;
    border-right:1px solid var(--line);background:rgba(10,15,30,.6);backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);transition:width .2s}
  .sidebar[hidden]{display:none}
  body.side-collapsed .sidebar{width:4rem}
  .handle{position:absolute;right:0;top:50%;transform:translate(50%,-50%);z-index:40;height:56px;width:20px;
    display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line);
    background:#111624;color:#9CA3AF;box-shadow:0 2px 12px rgba(0,0,0,.55);transition:color .15s,border-color .15s}
  .handle:hover{border-color:rgba(227,188,99,.4);color:var(--gold-hi)}
  .sb-brand{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--line-soft)}
  .sb-brand .logo{position:relative;flex:0 0 auto}
  .sb-brand .logo::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold);opacity:.4;filter:blur(10px)}
  .sb-brand .logo svg{position:relative;width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1px rgba(227,188,99,.4);display:block}
  .sb-brand .bt p{margin:0}
  .sb-brand .bt p:first-child{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(227,188,99,.9)}
  .sb-brand .bt p:last-child{font-size:14px;font-weight:700;line-height:1.2}
  body.side-collapsed .sb-brand{flex-direction:column;padding:16px 8px;gap:10px}
  body.side-collapsed .sb-brand .bt{display:none}
  .sb-back{margin-left:auto;flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;border:1px solid rgba(255,255,255,.1);background:none;color:var(--muted);cursor:pointer;
    transition:color .15s,border-color .15s,background .15s}
  .sb-back:hover{border-color:rgba(227,188,99,.4);background:rgba(227,188,99,.1);color:var(--gold-hi)}
  .sb-back:focus-visible{outline:2px solid rgba(227,188,99,.5);outline-offset:1px}
  .sb-back[disabled]{opacity:.32;cursor:default;pointer-events:none}
  body.side-collapsed .sb-back{margin-left:0;width:40px;height:40px;border-radius:12px;
    background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.05)}
  .sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 12px;display:flex;flex-direction:column;gap:2px}
  /* .tab della tab bar e' a colonna: qui si torna in riga esplicitamente */
  .sb-fondo{padding:8px 12px 4px;border-top:1px solid var(--line-soft)}
  .sb-nav .tab,.sb-fondo .tab{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;
    border-radius:8px;padding:8px 12px;font-size:14px;color:#9CA3AF;width:100%;text-align:left;
    transition:background .15s,color .15s}
  .sb-nav .tab .ti,.sb-fondo .tab .ti{width:19px;height:19px;flex:0 0 auto}
  .sb-nav .tab:hover,.sb-fondo .tab:hover{background:rgba(227,188,99,.1);color:var(--gold-hi)}
  .sb-nav .tab.active,.sb-fondo .tab.active{background:rgba(227,188,99,.1);color:var(--gold-pale)}
  .sb-nav .tab .soon{margin-left:auto;border:1px solid var(--line-soft);border-radius:4px;padding:2px 6px;
    font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#4B5563}
  .sb-nav .tab.disabled{color:#4B5563;cursor:not-allowed}
  body.side-collapsed .sb-nav .tab{justify-content:center;padding:10px 0}
  body.side-collapsed .sb-nav .tab span:not(.ti){display:none}
  .sb-user{border-top:1px solid var(--line-soft);padding:14px 16px;display:flex;align-items:center;gap:10px;
    width:100%;text-align:left;transition:background .15s}
  .sb-user:hover{background:rgba(227,188,99,.06)}
  .sb-user .av{width:32px;height:32px;flex:0 0 auto;border-radius:50%;background:rgba(227,188,99,.15);
    border:1px solid rgba(227,188,99,.4);display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:800;color:var(--gold-hi)}
  .sb-user .un{font-size:12.5px;font-weight:600;line-height:1.2}
  .sb-user .ut{font-size:10.5px;color:var(--faint)}
  body.side-collapsed .sb-user{justify-content:center;padding:14px 8px}
  body.side-collapsed .sb-user .ubx{display:none}
}

/* ================= rail interno per funzione ================= */
/* dvh, non vh: su iOS 100vh e' l'altezza a barre nascoste, quindi piu'
   alta del visibile, e il fondo della pagina finisce sotto la barra */
.glay{display:flex;min-height:100dvh}
.grail{position:sticky;top:0;z-index:20;display:none;flex-direction:column;align-items:center;gap:8px;
  width:4rem;flex:0 0 auto;align-self:flex-start;height:100dvh;padding:14px 0;
  border-right:1px solid var(--line);background:#060710}
@media(min-width:1024px){ .grail{display:flex} }
.gbtn{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#D1D5DB;
  transition:border-color .15s,background .15s,color .15s}
.gbtn svg{width:19px;height:19px}
.gbtn:hover,.gbtn.on{border-color:rgba(227,188,99,.4);background:rgba(227,188,99,.15);color:var(--gold-hi)}
.gbtn .tip{pointer-events:none;position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  display:none;white-space:nowrap;border:1px solid rgba(227,188,99,.3);background:#11131A;border-radius:8px;
  padding:6px 12px;font-size:13px;font-weight:500;color:#F3F4F6;box-shadow:0 6px 24px rgba(0,0,0,.55);z-index:40}
.gbtn:hover .tip{display:block}
.gbody{flex:1;min-width:0;padding:34px 40px 60px;max-width:1160px}
@media(max-width:1023px){ .gbody{padding:18px 18px 26px} }
.gsub{display:none}.gsub.on{display:block;animation:up .4s cubic-bezier(.22,1,.36,1)}

/* barrette per navigare il rail anche da telefono (tab orizzontali) */
.gtabs{display:flex;gap:8px;margin:0 0 14px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.gtabs::-webkit-scrollbar{display:none}
@media(min-width:1024px){ .gtabs{display:none} }
.gtabs button{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;
  font-weight:700;color:var(--muted)}
.gtabs button.on{border-color:rgba(227,188,99,.4);background:rgba(227,188,99,.12);color:var(--gold-hi)}

/* ================= testate e superfici ================= */
.screen{padding:18px 18px 26px;max-width:1160px;margin:0 auto;animation:up var(--t-med) cubic-bezier(.22,1,.36,1)}
@media(min-width:1024px){ .screen{padding:34px 40px 60px;margin:0} }
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#app *,.screen,.gsub.on{animation:none!important;transition:none!important}}

.topbar{position:sticky;top:0;z-index:20;background:rgba(10,15,30,.85);backdrop-filter:blur(10px);
  color:var(--ink);border-bottom:1px solid var(--line);
  padding:calc(var(--sat) + 12px) 18px 12px;display:flex;align-items:center;gap:12px}
.topbar h1{font-size:17px;font-weight:700;margin:0;flex:1}
.tb-marchio b{color:var(--gold-hi)}
/* la dashboard ads non ha testata: il respiro sotto il notch lo da' qui */
.glay[data-schermata="dashboard-ads"] .gbody{padding-top:calc(var(--sat) + 18px)}
/* i PILLAR VISIVI della dashboard ads post-recensione (12 ago):
   immagine vera + poche parole, righe compatte */
.pille{display:flex;flex-direction:column;gap:10px;margin-top:14px}
@media(min-width:900px){ .pille{max-width:640px} }
.pilla{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;padding:10px;
  background:linear-gradient(160deg,var(--panel-a) 0%,var(--panel-b) 70%);color:var(--ink);
  transition:border-color var(--t-fast),transform var(--t-fast)}
.pilla:hover{border-color:rgba(227,188,99,.4);transform:translateY(-1px)}
.pilla img{width:92px;height:60px;object-fit:cover;object-position:top left;border-radius:9px;
  border:1px solid var(--line-soft);flex:0 0 auto;background:#070B16}
.pilla img.libro{width:46px;height:66px;object-fit:contain;background:none;border:none}
.pilla .pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pilla .pk{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}
.pilla .pt b{font-family:var(--display);font-stretch:108%;font-size:15.5px;font-weight:800;line-height:1.2}
.pilla .pt small{font-size:12px;color:var(--muted);line-height:1.35}
.pilla .pf{color:var(--gold-hi);font-size:20px;flex:0 0 auto}
.pilla.spenta img{filter:saturate(.6) brightness(.75)}
.pilla.senza-tap{cursor:default}
/* il pillar dello SBLOCCO: acceso, non timido (12 ago: "marketing
   visivo piu' aggressivo", il confronto VOC con Bluebook) */
.sblocca-tutto{display:block;width:100%;text-align:left;cursor:pointer;margin-top:14px;
  border:1px solid rgba(227,188,99,.55);border-radius:16px;padding:16px 16px 14px;color:var(--ink);
  background:linear-gradient(160deg,rgba(227,188,99,.14),rgba(200,151,45,.05) 55%,var(--panel-b));
  box-shadow:0 0 0 1px rgba(227,188,99,.12),0 14px 40px -14px rgba(200,151,45,.5)}
@media(min-width:900px){ .sblocca-tutto{max-width:640px} }
.sblocca-tutto .k{color:var(--gold-hi)}
.st-grido{font-family:var(--display);font-stretch:110%;font-size:19px;font-weight:800;line-height:1.25;margin:8px 0 6px}
.st-grido b{color:var(--gold-hi)}
.sblocca-tutto .d{line-height:1.55;font-size:13.5px}
/* lo stack del confronto: righe secche, ✗ rossa contro ✓ d'oro */
.vs{margin-top:10px;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.vs-r{display:grid;grid-template-columns:1fr 64px 64px;align-items:center;gap:6px;
  padding:9px 12px;border-top:1px solid var(--line-soft);font-size:13px}
.vs-r:first-child{border-top:0}
.vs-r>span:nth-child(2),.vs-r>span:nth-child(3){text-align:center;font-weight:800}
.vs-testa{background:rgba(255,255,255,.04);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vs-testa .oro{color:var(--gold-hi)}
.vs-r:nth-child(even){background:rgba(255,255,255,.02)}
.vs-x{color:#F87171;font-size:15px}
.vs-si{color:var(--gold-hi);font-size:15px}
.vs-n{color:var(--muted)}
.st-cta{display:flex;justify-content:center;margin-top:12px;width:100%}
.st-sotto{text-align:center;font-size:12px;color:var(--muted);margin:8px 0 0}
/* il PANINO degli ads post-recensione (solo telefono): tabbar via,
   bottone flottante nel raggio del pollice, foglio dal basso stile
   Apple (scrim + sheet, chiusura sul fondale) */
.panino{display:none}
@media(max-width:1023px){
  body.con-panino .tabbar{display:none!important}
  body.con-panino .panino{display:flex}
  /* in ALTO a destra e FUSO con lo schermo (Max, 12 ago): stesso chip
     leggero degli altri controlli flottanti, non un disco pieno */
  .panino{position:fixed;right:14px;top:calc(var(--sat) + 10px);z-index:9000;width:44px;height:44px;
    border-radius:999px;align-items:center;justify-content:center;cursor:pointer;color:var(--gold-hi);
    background:linear-gradient(160deg,var(--panel-a),var(--panel-b));border:1px solid rgba(227,188,99,.4);
    transition:transform var(--t-fast),border-color var(--t-fast)}
  .panino:hover{border-color:var(--gold-hi)}
  .panino:active{transform:scale(.94)}
  .panino svg{width:22px;height:22px}
  body.in-exam .panino{display:none}
  /* e in QUALUNQUE prova (diagnostica, practice, mock): il runner ha il
     suo telaio, il menu aspetta fuori */
  body.in-run .panino{display:none}
  /* nel libro la riga della ricerca gli lascia il posto */
  body.con-panino .topbar.con-strum{padding-right:64px}
}
/* la TENDINA del panino: nasce DALL'ANGOLO che la apre (Apple: il menu
   origina dal suo bottone, mai dal lato opposto dello schermo; Max,
   12 ago: "lo aprirebbe dal basso?" — no). Scala+dissolvenza con
   origine in alto a destra, scrim leggero dietro. */
.menu-foglio-ov{position:fixed;inset:0;background:rgba(4,10,22,.45);backdrop-filter:blur(2px);z-index:10004;
  display:flex;align-items:flex-start;justify-content:flex-end;
  padding:calc(var(--sat) + 62px) 14px 0 0}
.menu-foglio{max-height:min(76vh,560px);overflow:auto;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid rgba(227,188,99,.4);
  border-radius:16px;width:min(240px,80vw);padding:6px;box-shadow:0 18px 50px -12px rgba(0,0,0,.7);
  transform-origin:top right}
.menu-voce{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:none;border:0;
  border-radius:10px;padding:13px 12px;cursor:pointer;color:var(--ink);
  font-size:15.5px;font-weight:600}
.menu-voce:hover{background:rgba(227,188,99,.08)}
.menu-voce .ti{width:21px;height:21px;color:var(--muted)}
.menu-voce.viva{color:var(--gold-hi)}
.menu-voce.viva .ti{color:var(--gold-hi)}
@media (prefers-reduced-motion:no-preference){
  .menu-foglio{animation:sboccia .18s ease-out}
  @keyframes sboccia{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .menu-foglio{animation:svela .15s ease-out}
  @keyframes svela{from{opacity:0}to{opacity:1}}
}
.topbar .right{font-size:12.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.brandmark{width:26px;height:26px;flex:0 0 auto}
.brandmark svg{width:100%;height:100%;display:block}
/* il bottone in alto a sinistra del binario ads (libro ⇄ profilo):
   tondo, 44px di bersaglio, icona persona o freccia */
.tb-conto{width:40px;height:40px;margin:-4px 0;flex:0 0 auto;border-radius:999px;cursor:pointer;
  border:1px solid rgba(227,188,99,.4);background:linear-gradient(160deg,var(--panel-a),var(--panel-b));
  color:var(--gold-hi);display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
  transition:border-color var(--t-fast),transform var(--t-fast)}
.tb-conto .ti{width:20px;height:20px}
.tb-conto:hover{border-color:var(--gold-hi)}
.tb-conto:active{transform:scale(.94)}
@media(min-width:1024px){
  /* la testata e' roba da TELEFONO (Max, 13 ago): sul desktop il telaio
     e' la barra verticale, sempre. La lista con body davanti serve a
     battere `.topbar.con-conto{display:flex}` (la regola del binario,
     piu' sotto), che altrimenti riaccendeva reader e delete-account.
     La testata sopravvive solo dove la barra non esiste — il binario
     ads pre-recensione (body.no-side): li' e' l'unica navigazione
     (profilo e traguardo), e la regola sotto vince perche' scritta dopo
     a pari specificita'. */
  .topbar,body .topbar.con-conto,body .topbar.con-strum{display:none}
  body.no-side .topbar.deep{display:flex;background:transparent;border-bottom:none;backdrop-filter:none;padding-top:20px}
  body.no-side .topbar.deep h1{font-size:20px}
}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(227,188,99,.9);margin:0}
.hero{padding:0 0 6px}
.hero h2,h1.pagetitle{font-family:var(--display);font-stretch:110%;font-size:30px;font-weight:800;
  letter-spacing:-.01em;margin:6px 0 4px}
@media(min-width:1024px){ .hero h2,h1.pagetitle{font-size:34px} }
.hero .tag,.pagesub{font-size:14px;color:var(--muted);margin:0}

/* pannello ossidiana con la venatura, la firma del mock */
.obs{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;
  background:radial-gradient(90% 60% at 80% -20%,rgba(200,151,45,.06),transparent 55%),
             linear-gradient(160deg,var(--panel-a) 0%,var(--panel-b) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.obs::before{content:"";position:absolute;top:0;left:8%;right:55%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(227,188,99,.5),transparent)}
.glowc{position:relative;isolation:isolate}
.glowc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(242,220,168,0) 0%,rgba(227,188,99,.6) 50%,rgba(165,123,34,0) 100%);
  background-size:200% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.glowc:hover::after{opacity:1;animation:shimmer 3s linear infinite}
@keyframes shimmer{to{background-position:200% 50%}}
.grad{background:linear-gradient(135deg,#F2DCA8 0%,#E3BC63 30%,#C8972D 65%,#A57B22 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.rowg{display:grid;gap:16px;margin-top:22px}
.rowg.r3{grid-template-columns:repeat(3,1fr)}
.rowg.r23{grid-template-columns:1.35fr 1fr}
@media(max-width:1023px){.rowg.r3,.rowg.r23{grid-template-columns:1fr}}
.cardp{padding:22px}
.cardp .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.big{font-family:var(--display);font-stretch:112%;font-size:44px;font-weight:800;line-height:1.1;
  margin-top:8px;font-variant-numeric:tabular-nums}
.cardp .d{font-size:12.5px;color:var(--faint);margin:6px 0 0}

/* streak, settimana, abitudini */
.flamewrap{display:inline-flex;align-items:center;gap:10px}
.flamewrap svg{width:30px;height:30px}
.week{display:flex;gap:9px;margin-top:14px}
.wd{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--faint)}
.wd i{width:28px;height:28px;border-radius:50%;border:1.4px solid var(--line);display:flex;align-items:center;justify-content:center;font-style:normal}
.wd i svg{width:12px;height:12px;opacity:.35}
.wd.hit i{border-color:rgba(227,188,99,.6);background:rgba(200,151,45,.15)}
.wd.hit i svg{opacity:1}
.wd.today{color:var(--gold-pale)}
.todo{display:flex;gap:22px;align-items:center;margin-top:14px}
.ring{width:92px;height:92px;flex:0 0 auto}
.tasks{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.task{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#D1D5DB}
.task i{width:17px;height:17px;border-radius:50%;border:1.4px solid #52525B;flex:0 0 auto;font-style:normal;
  display:flex;align-items:center;justify-content:center;font-size:10px}
.task.done{color:var(--faint);text-decoration:line-through}
.task.done i{background:var(--good);border-color:var(--good);color:#052e1e}
.medals{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.medal{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 8px;
  font-size:12px;font-weight:700;color:#D1D5DB;background:rgba(255,255,255,.02)}
.medal i{width:26px;height:26px;border-radius:50%;font-style:normal;display:flex;align-items:center;justify-content:center;
  background:rgba(200,151,45,.18);border:1px solid rgba(227,188,99,.45);font-size:12px}
.medal.off{opacity:.38}
.badgegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media(max-width:640px){.badgegrid{grid-template-columns:1fr 1fr}}
.bcell{border:1px solid var(--line);border-radius:14px;padding:18px 14px;text-align:center;background:rgba(255,255,255,.02)}
.bcell .bi{width:44px;height:44px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(200,151,45,.16);border:1px solid rgba(227,188,99,.45);font-size:18px}
.bcell b{display:block;font-size:13px}
.bcell span{font-size:11px;color:var(--faint)}
.bcell.off{opacity:.35}

/* skill meters e righe attivita' */
.sk{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.sk:last-child{border-bottom:none}
.sk .nm{flex:1;color:#D1D5DB;min-width:0;overflow-wrap:anywhere}
.sk .mt{width:110px;height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;flex:0 0 auto}
.sk .mt i{display:block;height:100%;border-radius:99px}
.sk .pc{width:44px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;color:var(--muted)}
.act{display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.act:last-child{border-bottom:none}
.act .n{width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:1.6px solid rgba(227,188,99,.55);
  background:#0A0E1B;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;color:var(--gold-hi)}
.act .t{font-size:13.5px;color:#D1D5DB;min-width:0}
.act .t small{display:block;color:var(--faint);font-size:11.5px;margin-top:2px}
.act .when{margin-left:auto;font-size:11px;color:var(--faint);white-space:nowrap;padding-top:4px}

/* CTA e bottoni */
.ctarow{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cta-solid{display:inline-flex;align-items:center;gap:9px;border-radius:12px;padding:12px 22px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#241A05;font-weight:800;font-size:14px;
  box-shadow:0 8px 24px -10px rgba(200,151,45,.55);transition:transform .12s,filter .15s}
.cta-solid:hover{transform:translateY(-1px);filter:brightness(1.05)}
.cta-solid[disabled]{background:rgba(255,255,255,.08);color:var(--faint);box-shadow:none;cursor:not-allowed;transform:none}
.cta-ghost{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:11px 18px;border:1px solid var(--line);
  color:#D1D5DB;font-weight:700;font-size:13.5px;transition:border-color .15s,color .15s}
.cta-ghost:hover{border-color:rgba(227,188,99,.4);color:var(--gold-hi)}
.btn{display:block;width:100%;border-radius:12px;padding:15px;font-size:15px;font-weight:800;text-align:center;
  transition:transform var(--t-fast),filter var(--t-fast);min-height:48px}
.btn:active{transform:scale(.985)}
.btn.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#241A05;
  box-shadow:0 8px 24px -10px rgba(200,151,45,.5)}
.btn.primary[disabled]{background:rgba(255,255,255,.08);color:var(--faint);box-shadow:none;cursor:not-allowed}
.btn.navy{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--ink)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:#D1D5DB}

.cta{display:block;width:100%;border-radius:14px;padding:16px 18px;margin-top:14px;text-align:left;
  font-size:15.5px;font-weight:700;background:rgba(255,255,255,.02);border:1px solid var(--line);color:var(--ink);
  transition:border-color var(--t-fast),transform var(--t-fast)}
.cta:hover{border-color:rgba(227,188,99,.45);transform:translateY(-1px)}
.cta.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:transparent;color:#241A05}
.cta.primary .sub{color:#4A3A12}
.cta.navy{background:rgba(255,255,255,.05)}
.cta .sub{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:3px}
.cta .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cta .chev{font-size:20px;color:var(--gold-hi);opacity:.9}
.lockpill{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:999px;background:rgba(200,151,45,.14);color:var(--gold-hi);
  border:1px solid rgba(227,188,99,.35);vertical-align:middle}
.chip{display:inline-block;border-radius:6px;padding:2px 9px;font-size:11px;font-weight:800}
.chip.up{background:rgba(52,211,153,.12);color:var(--good);border:1px solid rgba(52,211,153,.3)}
.chip.mid{background:rgba(227,188,99,.12);color:var(--gold-hi);border:1px solid rgba(227,188,99,.35)}

.statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:18px}
.stat{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:13px 10px;text-align:center}
.stat b{display:block;font-family:var(--display);font-stretch:112%;font-size:22px;font-weight:800;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.stat span{font-size:11px;color:var(--muted)}
.note{font-size:12.5px;color:var(--muted);background:rgba(200,151,45,.05);border-left:2px solid var(--gold);
  border-radius:0 10px 10px 0;padding:11px 14px;margin-top:16px;line-height:1.55}
.note b{color:var(--ink)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.tbl th{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line-soft);color:#D1D5DB;font-variant-numeric:tabular-nums}

/* ================= lesson player (barra segmenti su scena scura) ===== */
.lessonbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:16px;background:rgba(10,15,30,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  padding:calc(var(--sat) + 12px) 16px 12px;margin:-18px -18px 16px}
@media(min-width:1024px){ .lessonbar{margin:-34px -40px 22px;padding:14px 22px} }
.lessonbar .lx{width:34px;height:34px;border-radius:9px;font-size:20px;display:flex;align-items:center;
  justify-content:center;color:var(--muted);transition:background var(--t-fast)}
.lessonbar .lx:hover{background:rgba(255,255,255,.06)}
.segbar{flex:1;display:flex;gap:5px}
.segbar i{height:7px;border-radius:99px;flex:1;background:rgba(255,255,255,.1);transition:background .3s}
.segbar i.done{background:var(--good)}
.segbar i.cur{background:linear-gradient(90deg,var(--good) 50%,rgba(255,255,255,.1) 50%)}
.lesson-xp{display:flex;align-items:center;gap:5px;font-weight:800;font-size:14.5px;font-variant-numeric:tabular-nums}
.lesson-xp svg{width:13px;height:13px}

.qwrap{max-width:680px;margin:0 auto}
.progress{display:none}
.metarow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.tier{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-radius:5px;padding:3px 8px}
.tier.easy{background:#4f7d8f}.tier.medium{background:#3f6f8f}.tier.hard{background:#9a5a2a}.tier.s1500{background:#6b3f7a}
.mchip{font-size:11px;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:5px;padding:2px 8px}

/* ============ il foglio dell'esame: chiaro, com'e' Bluebook ========== */
.bb{background:var(--paper);color:var(--paper-ink);border:1px solid rgba(0,0,0,.35);border-radius:12px;
  padding:16px 16px 18px;box-shadow:0 18px 44px -22px rgba(0,0,0,.8)}
.bbhead{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--paper-ink);font-weight:600}
.bbhead .mark{color:var(--paper-muted)}
.qnum{background:var(--paper-ink);color:#fff;font-weight:700;min-width:24px;height:24px;padding:0 5px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.mark{display:flex;align-items:center;gap:4px;font-weight:500}
.abc{margin-left:auto;font-weight:700;font-size:10.5px;color:#fff;background:#3a3733;border-radius:4px;padding:3px 7px}
.abc s{text-decoration-thickness:1.4px}
.bbrule{height:1px;background:var(--paper-line);margin:10px -16px 13px}
.stim{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:16.5px;line-height:1.58;margin:0 0 13px;color:var(--paper-ink)}
.stim p{margin:0 0 10px}.stim p:last-child{margin-bottom:0}
.stim .src{color:var(--paper-muted);font-style:italic;font-size:14px}
.tlabel{font-family:var(--sans);font-weight:700;font-size:12px;margin:6px 0 3px}
.blank{display:inline-block;min-width:52px;border-bottom:2px solid var(--paper-ink);height:.9em;vertical-align:baseline}
.stem{font-size:16.5px;font-weight:600;line-height:1.48;margin:0 0 14px;color:var(--paper-ink)}
.math{font-family:Georgia,serif;font-style:italic;white-space:nowrap}.math sup{font-style:normal}
/* frazione in riga: quasi a taglia piena e CENTRATA sulla riga di testo
   (a .82em ancorata in basso usciva minuscola e sotto l'asse: segnalato
   da Max in esame, 6 ago) */
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.92em;line-height:1.12;margin:0 .15em;font-style:normal;transform:translateY(-.08em)}
.frac .de{border-top:1px solid currentColor;padding:0 .28em}.frac .nu{padding:0 .28em}
.rad{border-top:1px solid currentColor;padding:0 1px}
/* l'indice della radice (\sqrt[3]{...}): piccolo, alto, attaccato al segno */
.radi{font-size:.62em;vertical-align:.55em;margin-right:1px}
.figw{margin:0 0 13px;overflow-x:auto}
.figw svg{max-width:100%;height:auto;display:block;margin:0 auto}
.figtable{border-collapse:collapse;margin:0 auto;font-size:14px;background:#fff}
.figtable th,.figtable td{border:1px solid #cfd4e0;padding:6px 11px;text-align:center;font-variant-numeric:tabular-nums;color:var(--paper-ink)}
.figtable th{background:#eef1f7;font-weight:700;font-size:13px}
.figcap{font-size:12px;color:var(--paper-muted);font-style:italic;text-align:center;margin-top:6px}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.opt{display:flex;align-items:flex-start;gap:12px;border:1.5px solid #CBD0DC;border-radius:11px;
  padding:13px 14px;font-size:16px;background:#fff;color:var(--paper-ink);text-align:left;
  transition:border-color var(--t-fast),background var(--t-fast)}
.opt:hover{border-color:#9BA5BC}
.opt .let{font-weight:700;width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:1.6px solid #B0B6C6;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#4a4f60;transition:all var(--t-fast)}
.opt .txt{flex:1;padding-top:2px;line-height:1.42}
.opt.sel{border-color:var(--navy);background:#EEF1FB}
.opt.sel .let{border-color:var(--navy);color:#fff;background:var(--navy)}
.opt[disabled]{opacity:1;cursor:default}
.opt.correct{border-color:var(--good-line);background:var(--good-tintp)}
.opt.correct .let{border-color:var(--good-deep);color:#fff;background:var(--good-deep)}
.opt.wrong{border-color:var(--bad-line);background:var(--bad-tintp)}
.opt.wrong .let{border-color:var(--bad-deep);color:#fff;background:var(--bad-deep)}
.opt .tick{margin-left:auto;font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;align-self:center}
.opt.correct .tick{color:var(--good-deep)}.opt.wrong .tick{color:var(--bad-deep)}
.opt.cut{opacity:.42}
.opt.cut .txt{text-decoration:line-through}
.spr{margin-top:4px}
.spr input{font-family:var(--sans);font-size:20px;font-weight:700;color:var(--navy);text-align:center;
  width:100%;max-width:260px;padding:13px;border:1.5px solid #CBD0DC;border-radius:11px;background:#fff}
.spr input:focus{outline:none;border-color:var(--navy)}
.spr .hint{font-size:12px;color:var(--paper-faint);margin-top:6px}

.qbar{position:sticky;bottom:calc(var(--tabh) + var(--sab));margin:16px -18px -10px;padding:12px 18px;
  background:linear-gradient(rgba(10,15,30,0),rgba(10,15,30,.92) 40%);pointer-events:none}
@media(min-width:1024px){ .qbar{bottom:0} }
.qbar .btn{pointer-events:auto;max-width:420px;margin:0 auto}
.feedback{max-width:680px;margin:0 auto;border-radius:14px;padding:13px 16px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;pointer-events:auto;animation:up var(--t-med) cubic-bezier(.22,1,.36,1)}
.feedback.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3)}
.feedback.no{background:rgba(227,188,99,.1);border:1px solid rgba(227,188,99,.35)}
.feedback .f-verdict{font-weight:800;font-size:15.5px;display:flex;align-items:center;gap:8px}
.feedback.ok .f-verdict{color:var(--good)}
.feedback.no .f-verdict{color:var(--gold-hi)}
.feedback .f-xp{font-weight:800;font-size:13px;color:var(--good);display:flex;align-items:center;gap:4px}
.feedback .f-xp svg{width:12px;height:12px}
.feedback .f-actions{margin-left:auto;display:flex;gap:8px}
.feedback .f-why{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;
  font-weight:700;font-size:13.5px;color:#D1D5DB}
.feedback .f-why:hover{border-color:rgba(227,188,99,.4);color:var(--gold-hi)}

/* spiegazione: sul foglio, chiara */
.explain{margin-top:14px;border-radius:12px;padding:15px;border:1px solid var(--paper-line);background:#fff;color:var(--paper-ink)}
.explain.ok{background:var(--good-tintp);border-color:var(--good-line)}
.explain.no{background:var(--bad-tintp);border-color:var(--bad-line)}
.explain .verdict{font-size:16px;font-weight:800;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.explain.ok .verdict{color:var(--good-deep)}.explain.no .verdict{color:var(--bad-deep)}
.explain h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--paper-muted);margin:14px 0 5px;font-weight:800}
.explain p{margin:0 0 6px;font-size:15px;line-height:1.52}
.rat{font-family:"Iowan Old Style",Palatino,Georgia,serif;font-size:15.5px;line-height:1.58}
.autopsy{margin-top:4px}
.aline{display:flex;gap:10px;margin:8px 0;font-size:14px;align-items:flex-start}
.aline .al{font-weight:700;width:22px;height:22px;flex:0 0 auto;border-radius:50%;font-size:12px;
  display:flex;align-items:center;justify-content:center;border:1.4px solid #cbb2aa;color:var(--bad-deep);background:#f6ece9;position:relative}
.aline .al::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1.4px;background:var(--bad-deep);transform:rotate(-8deg)}
.aline.you .al{border-color:var(--bad-deep);background:var(--bad-deep);color:#fff}
.aline.you .al::after{background:#fff}
.etype{font-size:10.5px;font-weight:700;color:var(--bad-deep);background:#f6ece9;border:1px solid #e7c9c2;
  border-radius:4px;padding:1px 6px;margin-right:6px;white-space:nowrap}
.trip{display:grid;grid-template-columns:1fr;gap:9px;margin-top:14px}
.tri{border:1px solid var(--paper-line);border-radius:9px;padding:10px 12px;background:#fff;font-size:13.5px;line-height:1.45;color:var(--paper-ink)}
.tri .h{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.tri.move .h{color:var(--good-deep)}.tri.trap .h{color:var(--bad-deep)}.tri.keep .h{color:#A57B22}
.lesson{font-size:12.5px;color:var(--paper-muted);margin-top:12px}
.lesson b{color:var(--paper-ink)}

/* riti: Nice work / streak */
/* stessa regola della .authwrap: si centra col margine automatico, cosi'
   su uno schermo corto il rito scorre invece di perdere la testa */
.ritual{min-height:calc(100dvh - 220px);display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:8px;padding:30px 20px}
.ritual>*{flex:0 0 auto}
.ritual::before,.ritual::after{content:"";margin:auto}
.ritual .r-art{width:84px;height:84px;margin-bottom:10px}
.ritual .r-art svg{width:100%;height:100%}
.ritual h2{font-family:var(--display);font-stretch:110%;font-size:28px;font-weight:800;margin:0}
.ritual .r-lab{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.ritual .r-big{font-family:var(--display);font-stretch:112%;font-size:46px;font-weight:800;display:flex;
  align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.ritual .r-big svg{width:26px;height:26px}
.ritual p{font-size:14.5px;color:var(--muted);max-width:38ch;line-height:1.55;margin:6px 0 0}
.ritual .btn{max-width:340px;margin-top:30px}
.streakpick{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px;margin-top:18px}
.streakpick button{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:12px;
  border:1.5px solid var(--line);background:rgba(255,255,255,.02);font-size:15px;font-weight:700}
.streakpick button:hover{border-color:rgba(227,188,99,.45)}
.streakpick button.on{border-color:var(--gold-hi);background:rgba(200,151,45,.12)}
.streakpick button span{font-size:12.5px;font-weight:600;color:var(--muted)}

/* profilo */
.pdomain{margin-top:22px}
.pdomain > .dh{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:15px;
  padding-bottom:8px;border-bottom:1px solid rgba(227,188,99,.4);color:var(--ink)}
.pdomain > .dh .w{font-size:12px;color:var(--muted);font-weight:600}
.prow{display:flex;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid var(--line-soft);border-radius:8px;
  transition:background var(--t-fast)}
.prow:hover{background:rgba(255,255,255,.03)}
.prow .nm{flex:1;font-size:14.5px}
.prow .nm small{display:block;color:var(--faint);font-size:11.5px;margin-top:2px}
.meter{width:92px;height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;flex:0 0 auto}
.meter > i{display:block;height:100%;border-radius:99px}
.lvl{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;width:66px;text-align:right;flex:0 0 auto}
.lvl.none{color:var(--good)}.lvl.low{color:#B9C25A}.lvl.med{color:var(--gold-hi)}.lvl.high{color:var(--bad)}
.prow .go{font-size:20px;color:var(--gold-hi);flex:0 0 auto}

/* risultati */
.result{text-align:center;padding:22px 0 6px}
.bigband{font-family:var(--display);font-stretch:112%;font-size:48px;font-weight:800;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.result .lab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.result .approx{font-size:12.5px;color:var(--muted);margin-top:8px;max-width:36ch;margin-left:auto;margin-right:auto}
.empty{text-align:center;color:var(--muted);padding:40px 20px;font-size:15px}

/* tab bar (telefono) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--tabh) + var(--sab));
  padding-bottom:var(--sab);background:rgba(8,12,24,.92);backdrop-filter:blur(14px);
  /* flex e non griglia fissa: le voci nascoste da aggiornaNav non devono
     lasciare buchi, e le superstiti si dividono lo spazio da sole (la
     coorte ads pre-recensione ne ha due, gli altri quattro) */
  border-top:1px solid var(--line);display:flex}
.tabbar .tab{flex:1}
.tabbar[hidden]{display:none}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;
  color:var(--faint);font-weight:600;transition:color var(--t-fast)}
/* la SOLITA lezione, pagata di nuovo l'11 ago con la tabbar a sei voci:
   un display esplicito BATTE l'attributo hidden. Ogni voce di nav che
   aggiornaNav nasconde deve avere questa regola, o il binario e' finto. */
.tab[hidden],.sb-nav .tab[hidden],.sb-fondo .tab[hidden]{display:none}
.tab.active{color:var(--gold-hi)}
.tab .ti{width:22px;height:22px;display:block}

/* ============ il rito di avvio: ossidiana e orbita di oro ============
   Al posto di "Loading...": il glifo respira, un arco di oro gli orbita
   attorno, la barra scorre. Solo transform/opacity (niente jank), loop
   lenti; con reduced-motion resta il quadro fermo. */
.bootscreen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  gap:0;text-align:center;padding:calc(var(--sat) + 24px) 24px calc(var(--sab) + 24px)}
.bootscreen>*{flex:0 0 auto}
.bootscreen::before,.bootscreen::after{content:"";margin:auto}
/* durante il caricamento la scena e' del marchio: il panino aspetta fuori */
body:has(.bootscreen) #panino{display:none}
.boot-orbita{position:relative;width:120px;height:120px;margin-bottom:26px}
.boot-orbita .anello{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.08)}
.boot-orbita .arco{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;
  border-top-color:var(--gold-hi);border-right-color:rgba(227,188,99,.25);
  animation:boot-spin 1.4s cubic-bezier(.45,.1,.55,.9) infinite}
.boot-orbita .glifo{position:absolute;inset:22px}
.boot-orbita .glifo::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold);
  opacity:.35;filter:blur(16px);animation:boot-respiro 2.4s ease-in-out infinite}
.boot-orbita .glifo svg,.boot-orbita .glifo img{position:relative;width:100%;height:100%;border-radius:50%;
  box-shadow:0 0 0 1px rgba(227,188,99,.4);animation:boot-respiro-g 2.4s ease-in-out infinite;display:block}
@keyframes boot-spin{to{transform:rotate(360deg)}}
@keyframes boot-respiro{0%,100%{opacity:.25;transform:scale(.96)}50%{opacity:.5;transform:scale(1.05)}}
@keyframes boot-respiro-g{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.boot-eyebrow{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(227,188,99,.9);margin:0}
.boot-nome{font-family:var(--display);font-stretch:112%;font-size:26px;font-weight:800;letter-spacing:.01em;margin:8px 0 0}
.boot-nome b,.boot-nome .g{color:var(--gold-hi);font-weight:800}
.boot-barra{width:180px;height:3px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:22px}
.boot-barra i{display:block;height:100%;width:40%;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);
  animation:boot-scorri 1.3s ease-in-out infinite}
@keyframes boot-scorri{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.boot-stelle i{position:fixed;width:3px;height:3px;border-radius:50%;background:var(--gold-hi);
  opacity:0;animation:boot-brilla 3.2s ease-in-out infinite}
.boot-stelle i:nth-child(1){top:26%;left:30%;animation-delay:.2s}
.boot-stelle i:nth-child(2){top:34%;left:68%;animation-delay:1.1s}
.boot-stelle i:nth-child(3){top:66%;left:38%;animation-delay:1.9s}
.boot-stelle i:nth-child(4){top:58%;left:63%;animation-delay:2.6s}
@keyframes boot-brilla{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.8;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){
  .boot-orbita .arco,.boot-orbita .glifo::before,.boot-orbita .glifo svg,.boot-orbita .glifo img,.boot-barra i,.boot-stelle i{animation:none}
  .boot-barra{display:none}.boot-stelle{display:none}
}

/* ============ il tour guidato: buco di luce + nuvoletta ============
   Lo scrim NON intercetta i tocchi (pointer-events:none): la pagina resta
   viva, si puo' provare cio' che il tour indica, e i collaudi non trovano
   mai un muro invisibile. Interattiva e' solo la nuvoletta. */
/* SOPRA il robot d'aiuto (10000/10001): al telefono la sua nuvoletta
   copriva il Next del tour e mangiava i tap (13 ago, scovato dalla
   sonda del tour). Il rito comanda; il robot resta visibile sotto il
   velo, e il suo passo lo illumina col buco come tutti gli altri. */
.tourwrap{position:fixed;inset:0;z-index:10500;pointer-events:none}
.tourhole{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(4,8,18,.74);
  outline:1.5px solid rgba(227,188,99,.65);transition:all .35s cubic-bezier(.22,1,.36,1)}
.tourbubble{position:absolute;pointer-events:auto;width:min(340px,calc(100vw - 32px));
  border:1px solid rgba(227,188,99,.35);border-radius:14px;padding:16px 16px 14px;
  background:radial-gradient(90% 60% at 80% -20%,rgba(200,151,45,.08),transparent 55%),
             linear-gradient(160deg,#131832 0%,#0A0E1B 70%);
  box-shadow:0 18px 50px rgba(0,0,0,.6);transition:all .35s cubic-bezier(.22,1,.36,1)}
.tourbubble .tb-k{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(227,188,99,.9);margin:0}
.tourbubble h3{font-family:var(--display);font-stretch:110%;font-size:17px;font-weight:800;margin:4px 0 6px;color:#fff}
.tourbubble p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
.tourbubble .tb-riga{display:flex;align-items:center;gap:10px;margin-top:14px}
.tourbubble .tb-punti{display:flex;gap:5px;margin-right:auto}
.tourbubble .tb-punti i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.15)}
.tourbubble .tb-punti i.on{background:var(--gold-hi)}
.tourbubble .tb-salta{font-size:12.5px;font-weight:600;color:var(--faint);padding:8px 10px}
.tourbubble .tb-salta:hover{color:var(--muted)}
.tourbubble .tb-avanti{border-radius:999px;padding:9px 18px;font-size:13px;font-weight:800;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#241A05}
@media (prefers-reduced-motion:reduce){.tourhole,.tourbubble{transition:none}}

/* ============ accesso: il guscio della login di Happy ============ */
/* CENTRATO SE CI STA, MAI TAGLIATO SE NON CI STA (17 ago 2026, Max dal
   suo iPhone 13). align-items:center su un contenitore piu' basso del
   contenuto lo fa traboccare da TUTTE E DUE le parti, e sopra l'inizio
   di un contenitore non si puo' scorrere: la cima diventa irraggiungibile.
   margin:auto sul figlio fa la stessa cosa quando c'e' spazio, e quando
   non ce n'e' si comporta come un margine zero invece di tagliare.
   E' la differenza fra una schermata che si adatta e una che si rompe
   sugli schermi corti, sui telefoni girati e quando l'utente ingrandisce
   il testo dalle impostazioni. */
.authwrap{min-height:100dvh;display:flex;justify-content:center;
  padding:calc(var(--sat) + 28px) 22px calc(var(--sab) + 28px)}
.authcard{width:100%;max-width:400px;margin:auto}
.auth-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:30px}
.auth-logo{position:relative;margin-bottom:14px}
.auth-logo::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold);opacity:.4;filter:blur(14px)}
/* niente anello aggiunto dal CSS: il marchio tondo ha gia' la SUA
   cornice d'oro, e sovrapporgliene un'altra faceva due bordi concentrici */
.auth-logo svg{position:relative;width:56px;height:56px;border-radius:50%;display:block}
.auth-eyebrow{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(227,188,99,.9);margin:0}
.auth-wordmark{font-family:var(--display);font-stretch:112%;font-size:30px;font-weight:800;letter-spacing:.01em;margin:6px 0 0;color:#fff}
.auth-wordmark b{color:var(--gold-hi);font-weight:800}
.auth-title{font-family:var(--display);font-stretch:110%;font-size:28px;font-weight:800;letter-spacing:-.01em;margin:8px 0 0}
.auth-sub{font-size:13.5px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.auth-form{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.auth-label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.auth-input{width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  padding:12px 13px;font-size:16px;color:#fff;outline:none;transition:border-color .15s;font-family:var(--sans)}
.auth-input::placeholder{color:#4B5563}
.auth-input:focus{border-color:rgba(227,188,99,.5)}
.auth-input.grande{font-size:22px;letter-spacing:.28em;text-align:center}
/* IL CAMPO DATA SU iOS (17 ago 2026, Max dal suo iPhone 13 Pro: "la barra
   inserimento della data dell'esame era storta"). Safari su iPhone non
   disegna un campo data come gli altri campi: e' un controllo di sistema,
   e text-align NON tocca il valore che ci sta dentro. Risultato: titolo
   centrato, bottoni centrati, e la data schiacciata a sinistra, che e'
   esattamente l'effetto "storto".
   Servono due cose, e insieme:
     appearance:none   toglie il vestito di sistema, cosi' il campo prende
                       bordo, sfondo e altezza degli altri campi;
     ::-webkit-date-and-time-value  e' l'UNICO modo di centrare il valore
                       dentro un campo data su WebKit.
   min-height tiene la stessa altezza degli altri campi: su iOS il campo
   data e' piu' basso e nella colonna si vedeva il gradino. */
input[type="date"].auth-input{-webkit-appearance:none;appearance:none;
  min-height:calc(1em * 1.2 + 26px);line-height:1.2}
input[type="date"].auth-input::-webkit-date-and-time-value{text-align:center;margin:0}
input[type="date"].auth-input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
input[type="date"].auth-input::-webkit-datetime-edit{text-align:center;width:100%}
.auth-btn{width:100%;border-radius:12px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#241A05;
  padding:12px;font-size:14.5px;font-weight:800;transition:filter .15s,transform .12s;min-height:46px}
.auth-btn:hover{filter:brightness(1.05)}
.auth-btn:active{transform:scale(.99)}
.auth-btn[disabled]{background:rgba(255,255,255,.08);color:var(--faint);cursor:not-allowed}
.auth-btn.ghost{background:transparent;border:1px solid var(--line);color:#D1D5DB}
.auth-btn.ghost:hover{border-color:rgba(227,188,99,.4);color:var(--gold-hi)}
.auth-btn.danger{background:transparent;border:1px solid rgba(248,113,113,.4);color:var(--bad)}
.auth-err{font-size:13px;color:var(--bad);margin:0}
.auth-good{font-size:13px;color:var(--good);margin:0}
.auth-help{font-size:12px;color:var(--faint);margin:8px 0 0;line-height:1.55}
.auth-note{font-size:11px;color:#4B5563;text-align:center;margin:24px 0 0;line-height:1.6}
.auth-reqs{margin:12px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.7;color:var(--muted)}
.auth-pick{display:flex;flex-direction:column;gap:10px}
.auth-pick button{display:block;width:100%;text-align:left;border:1.5px solid var(--line);border-radius:14px;
  padding:15px 16px;background:rgba(255,255,255,.02);font-size:15px;font-weight:700;color:var(--ink);
  transition:border-color .15s}
.auth-pick button:hover{border-color:rgba(227,188,99,.45)}
.auth-pick .sub{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:3px;line-height:1.45}

/* porte chiuse */
.lockcard{text-align:center;padding:34px 20px;background:rgba(255,255,255,.02);border-radius:16px;border:1px solid var(--line)}
.lockcard .lockicon{font-size:30px;opacity:.55}
.lockcard h3{font-size:18px;margin:10px 0 6px;color:var(--ink)}
.lockcard p{font-size:14.5px;color:var(--muted);line-height:1.5;max-width:34ch;margin:0 auto}
.cta.locked{opacity:.62}
.budgetnote{text-align:center;font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* in esame il riquadro d'aiuto tace (vedi route()) */
.in-exam #sw-bot-wrap,.in-exam #sw-panel{display:none!important}
/* Il robot d'aiuto e' un servizio del portale COMPLETO (Max, 11 ago
   sera): si accende solo col tier full, cioe' libro via QR o acquisto
   Stripe. Nascosto di DEFAULT: al boot il tier arriva dopo il widget,
   e il lampo di un robot che appare e sparisce e' peggio dell'attesa.
   E' aggiornaNav() a marcare il corpo quando il diritto c'e'. */
body:not(.aiuto-vivo) #sw-bot-wrap,body:not(.aiuto-vivo) #sw-panel,body:not(.aiuto-vivo) .sw-panel{display:none!important}
/* sull'accesso il widget e' spento per CHIUNQUE, anche col tier full in
   cache (12 ago: robot sull'OTP dopo il cambio account sullo stesso
   dispositivo) */
.in-accesso #sw-bot-wrap,.in-accesso #sw-panel,.in-accesso .sw-panel,.in-accesso .sw-bot-wrap{display:none!important}
.opt,.simbar,.qbar,.bbhead,.spr{scroll-margin:96px}

/* ============ simulatore sulla scena ossidiana ============ */
.simhead{background:var(--panel-a)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.simhead .sh-mod{color:var(--muted)!important;opacity:1!important}
.simtimer{background:rgba(255,255,255,.08)!important;color:var(--ink)!important}
.simtimer.low{background:var(--bad-deep)!important;color:#fff!important}
.simtool{background:rgba(255,255,255,.06)!important;border:1px solid var(--line)!important;color:#D1D5DB!important}
.simtool:hover{background:rgba(227,188,99,.12)!important}
.simtool.on{background:var(--gold)!important;border-color:var(--gold)!important;color:#241A05!important}
.simintro .lead{color:var(--muted)}
.navpanel{background:#101527!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.navcell{background:rgba(255,255,255,.04)!important;color:var(--ink)!important;border-color:var(--line)!important}
.navcell.ans{background:var(--gold)!important;border-color:var(--gold)!important;color:#241A05!important}
.navcell.cur{outline-color:var(--gold-hi)!important}
.pausecard{background:#101527!important;border:1px solid var(--line)!important;color:var(--ink)!important}
.pausecard p{color:var(--muted)!important}
.simresult .pcard{background:rgba(255,255,255,.03)!important;border-color:var(--line)!important}
.simresult .pcard .s{color:var(--gold-hi)!important}
.simreview .rvq{background:rgba(255,255,255,.03)!important;border-color:var(--line)!important}
.brkclock{color:var(--gold-hi)!important;font-family:var(--display)!important}
.dirlist li{color:var(--muted)!important}
.dirlist li b{color:var(--ink)!important}
@media(min-width:1024px){ .navov{align-items:center} .navpanel{border-radius:16px;max-width:560px} }

/* le card della dashboard che sono porte (Streak → attivita', XP →
   badge, Score → Simulator) lo dicono al passaggio del mouse */
.obs[data-gsub],.obs[data-nav]{cursor:pointer;transition:border-color .15s,transform .15s}
.obs[data-gsub]:hover,.obs[data-nav]:hover{border-color:rgba(227,188,99,.45)}

/* su telefono, durante un player (diagnostica, mock, esame, drill) la
   tab bar lascia il posto ai comandi di risposta; su desktop il guscio
   resta tutto: e' l'ambiente di lavoro */
@media(max-width:1023px){
  body.in-run .tabbar{display:none!important}
  body.in-run #app{padding-bottom:0}
}
/* durante un player la testata del guscio tace: il titolo sta nella
   simhead del player, e due barre sticky si accavallavano scrollando */
body.in-run .topbar{display:none}
/* ECCETTO la topbar che porta il bottone del conto (binario ads): nel
   binario non esistono barre, e quel bottone e' l'unica navigazione.
   Deve vivere anche dentro il lettore (in-run) e a ogni larghezza. */
body.in-run .topbar.con-conto,.topbar.con-conto{display:flex}
/* l'uscita SOLO MOBILE di esame e diagnostica (Max, 12 ago: "bloccato
   qua dentro... sto parlando di mobile, non toccare desktop"): sotto i
   1024px la testata col bottone ‹ vive anche dentro in-run; dal 1024 in
   su non esiste, e il desktop resta esattamente com'era. */
.topbar.esci-mobile{display:none}
@media(max-width:1023px){ .topbar.esci-mobile, body.in-run .topbar.esci-mobile{display:flex} }
@media(min-width:1024px){ .topbar.esci-mobile{display:none!important} }
/* Al TELEFONO le testate si FONDONO con la schermata (Max, 12 ago:
   "togli The Book e il logo... vale per tutte le schermate mobile"):
   niente titolo, niente marchio, niente sfondo ne' bordo. Restano solo
   i controlli flottanti, che portano ognuno il proprio chip. Desktop
   com'era. */
@media(max-width:1023px){
  /* TUTTE le testate, non solo quelle coi bottoni (Max, 12 ago, vista
     su Plans: "ti sei dimenticato di togliere il titolo"): il titolo lo
     porta il contenuto, la testata porta solo i controlli. */
  body .topbar,body .topbar.con-strum,body .topbar.con-conto,body .topbar.esci-mobile{background:transparent;border-bottom:0;backdrop-filter:none}
  .topbar .brandmark,.topbar h1{display:none}
  .topbar.con-strum .rd-strum{margin:0}
  /* l'Indietro di default vive solo qui sotto: a desktop c'e' sb-back.
     La regola-base display:none sta PRIMA (il none scritto dopo il
     media vinceva ovunque: il bottone non esisteva, visto da Max su
     Plans il 12 ago). */
  .tb-conto.solo-m{display:flex!important}
  body.in-run .topbar.con-indietro{display:flex}
  /* ...MA NON DURANTE L'ESAME (17 ago 2026, foto di Max dall'iPhone 13
     Pro). Li' la barra dell'esame e' gia' appiccicata in cima con il
     suo titolo, l'orologio e gli strumenti: aggiungerne una seconda,
     anch'essa in cima, faceva sovrapporre il tondo dell'Indietro al
     titolo "Math" appena si scorreva. L'uscita adesso vive DENTRO la
     barra dell'esame (exam-ui.mjs, .simx), che e' anche il posto giusto:
     una barra sola, e 103px di schermo restituiti alla domanda. */
  body.in-exam .topbar.con-indietro,body.in-exam .topbar.esci-mobile{display:none}
}
.tb-conto.solo-m{display:none}

/* il Continue del benvenuto nasce spento finche' il nome non c'e' */
.auth-btn[disabled]{opacity:.4;cursor:default;pointer-events:none}

/* le righe dei past exams con dettaglio archiviato sono porte */
.tbl tr.aperibile{cursor:pointer}
.tbl tr.aperibile:hover td{color:var(--gold-pale)}
.tbl tr.aperibile .go{color:var(--gold-hi)}

/* errori raggruppati per skill (vista Mistakes del Simulator) */
.mistrow{padding:14px 4px;border-bottom:1px solid var(--line-soft)}
.mistrow:last-child{border-bottom:none}
.mist-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mist-nm{font-family:var(--display);font-stretch:110%;font-size:15.5px;font-weight:800}
.chip.no{border:1px solid rgba(192,83,62,.5);color:#E58E7B;background:rgba(192,83,62,.12);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:800}
.mist-sub{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;color:var(--muted)}

/* ── Paths: il percorso a stazioni ── */
.staz{position:relative;padding-left:52px;margin-top:8px;max-width:760px}
.staz::before{content:"";position:absolute;left:19px;top:8px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--gold) 0%,rgba(227,188,99,.15) 70%)}
.st{position:relative;margin-bottom:16px}
.st .pall{position:absolute;left:-52px;top:12px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:16px;border:1.5px solid var(--line);color:var(--muted)}
.st.on .pall{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#241A05;border:none;box-shadow:0 0 18px rgba(200,151,45,.4)}
.st.chiusa .pall{color:var(--faint);background:#0E1526}
.stcard{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:
  radial-gradient(90% 60% at 80% -20%,rgba(200,151,45,.07),transparent 55%),linear-gradient(160deg,#121831 0%,#0B101F 70%)}
.st.on .stcard{border-color:rgba(227,188,99,.45)}
.st.chiusa .stcard{opacity:.62}
.stcard .snm{font-family:var(--display);font-stretch:110%;font-size:17px;font-weight:800}
.stcard .sds{color:var(--muted);font-size:13px;margin-top:3px}
.stcard .sfoot{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.bott{border-radius:999px;padding:9px 18px;font-size:13px;font-weight:800;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#241A05;border:none;cursor:pointer}
.lucch{font-size:12px;color:var(--faint)}
.tappe{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 2px}
.tappa{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:700;color:var(--faint)}
.tappa.ok{border-color:rgba(31,158,99,.5);color:#5fc99a;background:rgba(31,158,99,.08)}
/* la lezione su carta */
.lezfoglio{padding:24px 26px}
.lezk{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8a6a1f}
.lezt{font-family:var(--display);font-stretch:110%;font-size:22px;font-weight:800;margin:4px 0 10px;color:var(--paper-ink)}
.lezidea{border-left:3px solid var(--gold);background:#f6f1e2;border-radius:0 10px 10px 0;padding:12px 16px;margin:12px 0}
.lezidea p{font-size:15.5px;line-height:1.65;color:var(--paper-ink)}
.lezprova{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8a6a1f;margin:16px 0 6px}
.lezfb{border-radius:11px;padding:13px 16px;margin-top:12px;font-size:14.5px;line-height:1.55}
.lezfb.verde{background:#e8f6ee;border:1px solid #bfe5cf;color:#14532d}
.lezfb.ambra{background:#fbf3dc;border:1px solid #ecd9a6;color:#6b4e0e}
.trapchips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.trapchips span{border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}
.trapchips span.ora{border-color:rgba(227,188,99,.5);color:var(--gold-pale);background:rgba(227,188,99,.08)}
.trapchips span.fatta{border-color:rgba(31,158,99,.5);color:#5fc99a}
.lezauto{border:1.5px solid #e5c8bd;background:#fdf2ee;border-radius:11px;padding:14px 16px;margin-top:12px}
.lezauto .chi{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--bad);text-transform:uppercase}
.lezauto p{font-size:14.5px;margin-top:6px;color:var(--paper-ink)}
.lezregola{border-left:3px solid var(--good);background:#eaf6f0;border-radius:0 10px 10px 0;padding:12px 16px;margin-top:14px;font-size:14.5px;color:var(--paper-ink)}
/* la mappa che si muove (esito della prova) */
.mappa{display:flex;flex-direction:column;gap:10px}
.riga-skill{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:13px 16px;background:rgba(255,255,255,.02)}
.riga-skill .nm{flex:1;font-size:14.5px}

/* ── ILLU: le illustrazioni interattive delle lezioni (su carta) ── */
.illu-host{margin:14px 0 4px}
.illu-k{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8a6a1f;margin:0 0 8px}
.illu{background:#fff;border:1px solid var(--paper-line);border-radius:14px;padding:16px 18px;color:var(--paper-ink);max-width:640px}
.illu-frase{font-size:15px;line-height:1.6;margin:0 0 12px}
.illu-slot{display:inline-block;min-width:86px;text-align:center;border-bottom:2px solid var(--gold);color:var(--paper-faint);font-weight:600}
.illu-slot.piena{color:#8a6a1f;font-weight:800}
.illu-freccerow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.illu-freccia{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--paper-line);background:#FBFBF7;border-radius:999px;padding:9px 14px;font:inherit;font-size:13.5px;font-weight:700;color:var(--paper-ink);cursor:pointer;min-height:40px}
.illu-freccia .illu-fsegno{color:#8a6a1f;font-weight:800}
.illu-freccia.viva{border-color:var(--gold);background:#faf3df;box-shadow:0 0 0 3px rgba(200,151,45,.14)}
.illu-menu{border-radius:11px;padding:11px 14px;font-size:14px;line-height:1.55;margin-bottom:6px}
.illu-menu.ok{background:#e8f6ee;border:1px solid #bfe5cf;color:#14532d}
.illu-menu.boh{background:#f4f2ea;border:1px solid var(--paper-line);color:var(--paper-muted)}
.illu-invito{font-size:13px;color:var(--paper-faint);margin:4px 0 0}
.illu-riga{display:flex;align-items:center;gap:12px;margin:10px 0}
.illu-riga span{flex:0 0 auto;min-width:120px;font-size:13px;font-weight:600;color:var(--paper-muted)}
.illu-riga input[type=range]{flex:1;accent-color:var(--gold);height:26px;min-width:60px}
.illu-chip{flex:0 0 auto;min-width:58px;text-align:center;background:#faf3df;border:1px solid #ecd9a6;border-radius:8px;padding:4px 9px;font-size:13.5px;color:#8a6a1f}
.illu-chip.orochip{background:var(--gold);border-color:var(--gold);color:#fff}
.illu-barrow{display:flex;align-items:center;gap:10px;margin:8px 0}
.illu-baret{flex:0 0 auto;min-width:120px;font-size:12.5px;color:var(--paper-muted)}
.illu-barpista{flex:1;height:18px;background:#f1efe6;border-radius:999px;overflow:hidden}
.illu-bar{height:100%;border-radius:999px;transition:width var(--t-fast)}
.illu-bar.oro{background:var(--gold)}
.illu-bar.verde{background:var(--good-deep)}
.illu-bar.tratteggio{background:repeating-linear-gradient(45deg,#e9e2cd 0 6px,#f6f1e2 6px 12px);border:1px dashed #d3c79f}
.illu-barnum{flex:0 0 auto;min-width:52px;text-align:right;font-weight:800;font-size:14px}
.illu-nota{border-radius:11px;padding:11px 14px;font-size:14px;line-height:1.55;margin-top:10px;background:#f4f2ea;border:1px solid var(--paper-line);color:var(--paper-muted)}
.illu-nota.oro{background:#fbf3dc;border:1px solid #ecd9a6;color:#6b4e0e}
.illu-nota.rossa{background:var(--bad-tintp);border:1px solid var(--bad-line);color:#7a2e20}
.illu-svg{display:block;width:100%;height:auto;margin-bottom:6px}
.illu-ass{font-size:12px;fill:var(--paper-faint)}
.illu-tag{font-size:12px;font-weight:700;fill:var(--paper-muted)}
.illu-angolo{font-size:20px;font-weight:800;fill:var(--paper-ink)}
.illu-legenda{display:flex;gap:8px;margin-bottom:8px}
.illu-cerchiorow{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.illu-svg.tonda{flex:0 0 auto;cursor:grab}
.illu-colonna{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}
.illu-rigaris{border-left:3px solid var(--gold);background:#faf7ec;border-radius:0 9px 9px 0;padding:9px 12px;font-size:14px}
.illu-picc{font-size:12px;color:var(--paper-faint)}
/* tabella a doppia entrata (illu 'tabella') */
.illu-tab{border-collapse:collapse;width:100%;margin-bottom:4px;font-size:14.5px}
.illu-tab th,.illu-tab td{border:1px solid var(--paper-line);padding:8px 10px;text-align:center;transition:opacity var(--t-fast)}
.illu-tab thead th{background:#f6f1e2;font-weight:800}
.illu-tab tbody th{background:#f6f1e2;text-align:left}
.illu-tabbtn{font:inherit;font-weight:800;background:none;border:none;cursor:pointer;color:#8a6a1f;padding:2px 4px;border-radius:6px;min-height:34px}
.illu-tabbtn.viva{background:var(--gold);color:#fff}
.illu-tab td.viva{background:#faf3df;font-weight:800}
.illu-tab .spenta{opacity:.25}
.illu-tabtot{color:var(--paper-faint);font-weight:600}
.illu-tabtotr th,.illu-tabtotr td{color:var(--paper-faint);background:#fbfaf4}

/* ── il funnel a tre livelli: lettore, porte, vetrine ── */
/* A desktop .screen perde l'auto-centratura (margin:0, scelta del mock:
   le altre sezioni riempiono la larghezza e non si vede). Il foglio del
   libro invece e' piu' stretto e su una finestra larga pendeva a sinistra
   (Max, 9 ago): il Book si centra nel pannello di lavoro. */
@media(min-width:1024px){ .screen[data-schermata="reader"]{margin:0 auto} }

/* ── gli strumenti di lettura (stile Preview: miniature, 1/2 pagine,
      ricerca) ─────────────────────────────────────────────────────── */
.rd-strum{display:flex;align-items:center;gap:10px;max-width:900px;margin:0 auto 14px}
.rd-tb{display:inline-flex;align-items:center;justify-content:center;width:38px;height:34px;border-radius:9px;
  border:1px solid rgba(227,188,99,.4);background:linear-gradient(160deg,var(--panel-a),var(--panel-b));color:var(--gold-pale);cursor:pointer;
  transition:border-color var(--t-fast)}
.rd-tb svg{width:18px;height:18px}
.rd-tb:hover{color:#E5E7EB;border-color:rgba(227,188,99,.4)}
.rd-tb[aria-pressed="true"]{color:var(--gold-hi);border-color:rgba(227,188,99,.55);background:rgba(227,188,99,.08)}
.rd-cerca-box{flex:1;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:9px;
  border:1px solid rgba(227,188,99,.4);background:linear-gradient(160deg,var(--panel-a),var(--panel-b))}
.rd-cerca-box svg{width:16px;height:16px;flex:0 0 auto}
.rd-cerca-box input{flex:1;min-width:0;background:none;border:0;outline:0;color:#E5E7EB;font:inherit;font-size:.92rem}
.rd-cerca-box:focus-within{border-color:rgba(227,188,99,.5)}
#rd-trova{max-width:900px;margin:-4px auto 12px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
/* il display:flex qui sopra BATTEVA l'attributo hidden (regola UA):
   l'attributo deve comandare, sempre (13 ago, pillole appese sul libro) */
#rd-trova[hidden]{display:none}

/* ── la BARRA del libro, solo desktop (13 ago): stessa lingua del
      pannello — colonna fissa accanto alla sidebar, materiali identici
      (fondo, bordo, blur), voci come le voci. Dentro: ricerca (gli
      stessi nodi della testata) e capitoli in vista. ── */
.rd-barra{display:none}
@media(min-width:1024px){
  /* lo spazio si riserva SE LA BARRA C'E', e la condizione la scrive il
     DOM, non una regola parallela: la barra nasce solo dopo la
     recensione (app.js, `if(rec)`), mentre questo margine valeva per
     tutti. Nell'anteprima il posto restava vuoto e il libro pendeva a
     destra di 117px su schermo largo — nessuno lo vedeva perche' il
     collaudo lo misurava e basta. Legandolo a :has(.rd-barra) le due
     cose non possono piu' separarsi. (14 ago sera) */
  [data-schermata="reader"]:has(.rd-barra){padding-left:274px}
  .rd-barra{position:fixed;z-index:25;left:var(--sidew);top:0;bottom:0;width:258px;
    display:flex;flex-direction:column;
    border-right:1px solid var(--line);background:rgba(10,15,30,.6);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    padding:22px 14px 14px;transition:left .2s}
  body.side-collapsed .rd-barra{left:4rem}
  .rd-b-eti{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(227,188,99,.85);margin:0 4px 10px}
  .rd-b-eti2{margin-top:18px}
  .rd-barra .rd-cerca-box{width:100%}
  .rd-barra #rd-trova{max-width:none;margin:10px 0 0}
  .rd-b-lista{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-bottom:6px}
  .rd-b-voce{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:10px;
    color:var(--muted);font-size:13px;font-weight:600;text-align:left;
    transition:background .15s,color .15s}
  .rd-b-voce:hover{background:rgba(255,255,255,.05);color:#E5E7EB}
  .rd-b-voce span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rd-b-voce small{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11.5px}
}
.rd-colpo{padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:#D1D5DB;font-size:.85rem;cursor:pointer;transition:all .15s}
.rd-colpo:hover{color:var(--gold-hi);border-color:rgba(227,188,99,.5)}
.rd-ntrovate{color:#6B7280;font-size:.85rem}
/* display esplicito batte l'attributo hidden in cascata: senza questa
   riga il binario restava SEMPRE visibile (scovato dalla batteria, 61px
   di scarto dal centro). Stessa difesa della sidebar. */
.rd-riga{display:flex;gap:14px}
/* lo sfogliatore: doppia pagina centrale, frecce ai lati, volta pagina */
@keyframes rdGiraAv{from{transform:rotateY(-70deg);opacity:.35}to{transform:none;opacity:1}}
@keyframes rdGiraIn{from{transform:rotateY(70deg);opacity:.35}to{transform:none;opacity:1}}

/* ── Plans: card affiancate (riferimento n8n) + oltre-Bluebook ── */
.pw-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0 0 18px;align-items:stretch}
@media(max-width:1420px){ .pw-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:980px){ .pw-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .pw-grid{grid-template-columns:1fr} }
.pw-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;
  padding:18px 16px;background:rgba(255,255,255,.02)}
.pw-card.oro{border-color:rgba(227,188,99,.6);background:rgba(227,188,99,.07);box-shadow:0 0 34px rgba(227,188,99,.08)}
.pw-badge{position:absolute;top:-11px;left:14px;background:var(--gold);color:#0B1D3A;font-size:.72rem;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 10px}
.pw-nome{font-weight:800;font-size:1.15rem;margin:0}
.pw-per{color:#9CA3AF;font-size:.88rem;line-height:1.45;margin:4px 0 10px;min-height:2.5em}
.pw-prezzo{font-weight:800;font-size:1.7rem;margin:0 0 10px}
.pw-prezzo .pw-uni{font-size:.85rem;font-weight:600;color:#9CA3AF;margin-left:5px}
.pw-prezzo-libro{font-size:1.05rem;line-height:1.4;color:var(--gold-hi);min-height:2.2em;display:flex;align-items:center}
.pw-cta{width:100%}
.pw-attuale{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:8px 12px;
  color:#9CA3AF;font-size:.85rem;text-align:center;width:100%}
.pw-sotto{color:#6B7280;font-size:.8rem;text-align:center;margin:7px 0 0}
.pw-inc{font-weight:700;font-size:.85rem;margin:14px 0 4px;padding-top:12px;border-top:1px solid var(--line-soft,rgba(255,255,255,.07))}
.pw-risp{display:inline-block;align-self:flex-start;border-radius:999px;padding:3px 10px;margin:0 0 8px;
  font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.35)}
.pw-risp.oro{background:rgba(227,188,99,.12);color:var(--gold-hi);border-color:rgba(227,188,99,.4)}
.pw-qr{border:1px dashed rgba(227,188,99,.45);border-radius:12px;padding:10px 12px;font-size:.88rem;line-height:1.5;color:#D1D5DB;margin-top:10px}
.pw-qr p{margin:0}
/* IL BENVENUTO POST-PAGAMENTO (12 ago: il momento piu' caldo del funnel
   merita una scena): tutto centrato, il marchio che respira, il patto in
   tre righe, UN bottone col testo AL CENTRO. Entrata morbida in sequenza. */
.grz{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:440px;margin:0 auto;padding-top:34px}
.grz-logo{position:relative;width:72px;height:72px;margin-bottom:14px}
.grz-logo::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:var(--gold);opacity:.28;filter:blur(18px);animation:boot-respiro 2.4s ease-in-out infinite}
.grz-logo img{position:relative;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 1px rgba(227,188,99,.45);display:block}
.grz-eyebrow{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(227,188,99,.9);margin:0 0 6px}
.grz-titolo{font-family:var(--display);font-stretch:112%;font-size:34px;font-weight:800;letter-spacing:.01em;margin:0 0 6px}
.grz-sotto{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 18px}
.grz-patto{width:100%;border:1px solid rgba(227,188,99,.35);border-radius:14px;padding:13px 16px;margin-bottom:18px;
  background:linear-gradient(180deg,rgba(227,188,99,.08),rgba(227,188,99,.02));display:flex;flex-direction:column;gap:9px}
.grz-riga{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:13.5px;line-height:1.45;color:var(--ink)}
.grz-riga span:first-child{color:var(--gold-hi);font-weight:800;flex:0 0 auto}
.grz-cta{width:100%;justify-content:center;text-align:center;font-size:14.5px;letter-spacing:.04em}
.grz-nota{color:var(--faint);font-size:12.5px;line-height:1.55;margin:14px 0 0}
.grz-nota a{color:var(--ink)}
.grz-filo{width:200px;height:3px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.grz-filo i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);animation:boot-scorri 1.3s ease-in-out infinite}
.grz>*{animation:rw-entra .26s ease-out both}
.grz>*:nth-child(2){animation-delay:.04s}.grz>*:nth-child(3){animation-delay:.08s}
.grz>*:nth-child(4){animation-delay:.12s}.grz>*:nth-child(5){animation-delay:.16s}.grz>*:nth-child(6){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){ .grz>*{animation:none} .grz-filo i{animation:none} .grz-logo::before{animation:none} }
/* la card del libro: il mock sporge dall'angolo (l'oggetto e' vero), il
   bottone e' un link vestito da cta-solid, il testo gli lascia spazio */
.pw-card.libro{border-color:rgba(227,188,99,.35)}
.pw-card .pw-mock{position:absolute;top:-16px;right:12px;width:56px;transform:rotate(6deg);
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.pw-card.libro .pw-nome,.pw-card.libro .pw-per{padding-right:64px}
a.pw-cta{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center}
/* il marchio sulla dashboard ads, SOLO mobile: il desktop ha la sidebar */
.marchio-riga{display:none}
@media (max-width:1023px){
  .marchio-riga{display:flex;align-items:center;gap:9px;margin:2px 0 18px}
  .marchio-riga img{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 1px rgba(227,188,99,.35)}
  .marchio-riga .mr-nome{font-family:var(--display);font-stretch:112%;font-size:16px;font-weight:800;letter-spacing:.01em;color:var(--ink)}
  .marchio-riga .mr-nome b{color:var(--gold-hi)}
}
.pw-bb{border:1px solid var(--line);border-radius:16px;padding:18px;background:rgba(255,255,255,.02);margin-top:4px}
/* in testa alla pagina il confronto respira sotto e non sopra */
.pw-bb-testa{margin:0 0 16px}
.pw-bb-tit{font-weight:800;font-size:1.05rem;margin:0}
.pw-bb-sotto{color:#9CA3AF;font-size:.9rem;line-height:1.55;margin:6px 0 10px}
.pw-bb-griglia{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
@media(max-width:640px){ .pw-bb-griglia{grid-template-columns:1fr} }
.pw-riga{display:flex;gap:9px;align-items:flex-start;margin:7px 0;font-size:.92rem;line-height:1.45}
.pw-riga span:first-child{flex:0 0 auto;font-weight:700}
.pw-riga.pw-si span:first-child{color:#4ade80}
.pw-riga.pw-no{color:#6B7280}
.pw-riga.pw-no span:first-child{color:#6B7280}
.rd-flash{outline:3px solid var(--gold-hi);outline-offset:3px;transition:outline-color .3s}

/* ── il muro a due tempi ── */
.rw-perdita{line-height:1.55;margin:12px 0 0;color:#FCA5A5;font-size:.92rem;
  border:1px solid rgba(248,113,113,.35);background:rgba(248,113,113,.07);border-radius:12px;padding:11px 14px}
/* la ricerca in stile FE: sorriso di Amazon + barra che avanza */
.rw-cerca{text-align:center;padding:16px 4px 8px}
.rw-amz{display:inline-flex;flex-direction:column;align-items:center;font-family:var(--sans);
  font-size:26px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.rw-amz svg{width:58px;height:15px;margin-top:1px}
.rw-barra{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:16px 8px 6px}
.rw-barra i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  animation:rwcerca 2.2s ease-out forwards}
@keyframes rwcerca{0%{width:0}70%{width:78%}100%{width:94%}}
/* il riquadro BEN ILLUMINATO della corsia veloce (11 ago sera) */
.rw-riquadro{margin-top:12px;border:1px solid rgba(227,188,99,.45);border-radius:14px;padding:14px;
  background:linear-gradient(160deg,rgba(227,188,99,.1),rgba(227,188,99,.03));
  box-shadow:0 0 0 1px rgba(227,188,99,.06),0 10px 30px rgba(0,0,0,.35)}
.rw-rq-tit{font-weight:800;font-size:15px;margin:0}
.rw-stelle{color:var(--gold-hi);letter-spacing:2.5px;font-size:12.5px;vertical-align:1px}
.rw-nf{border:1px solid rgba(248,113,113,.35);background:rgba(248,113,113,.07);border-radius:12px;padding:12px 14px;margin-top:10px}
.rw-nf-tit{color:#FCA5A5;font-weight:700}
.rw-nf-rosso{color:#F87171;font-size:21px;margin:0 0 8px}
.rw-barra.rossa i{background:linear-gradient(90deg,#B23A2C,#F87171);animation:none;width:55%}
.rw-tri{font-size:26px;margin:6px 0 0;line-height:1}
.rw-link{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
/* "already left" in ORO acceso (12 ago, via il rosso): e' la soluzione,
   non l'allarme. La dropzone invita, la nota del controllo scoraggia. */
.rw-gia{text-align:center;font-weight:800;font-size:16.5px;margin:0 0 2px;color:var(--gold-hi)}
.rw-gia-sotto{text-align:center;font-size:12.5px;color:var(--muted);margin:0 0 12px}
.rw-riquadro.rw-oro{border-color:rgba(227,188,99,.6);background:linear-gradient(180deg,rgba(227,188,99,.10),rgba(227,188,99,.03));
  box-shadow:0 0 22px rgba(227,188,99,.16)}
.rw-riquadro.rw-oro .dropzona{border-color:rgba(227,188,99,.65);background:rgba(227,188,99,.05)}
.rw-riquadro.rw-oro .dropzona:hover{border-color:var(--gold-hi);background:rgba(227,188,99,.1)}
.rw-riquadro.rw-oro .dropzona:active{transform:scale(.985)}
.dz-cerchio{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 9px;background:rgba(227,188,99,.16);border:1px solid rgba(227,188,99,.55);color:var(--gold-hi)}
.rw-controllo{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin:10px 0 0}
.rw-controllo svg{flex:0 0 auto;color:var(--gold-hi);margin-top:1px}
/* il verdetto ARRIVA, non scatta (HIG: i cambi di stato si muovono):
   i tre blocchi del not-found salgono in sequenza breve */
.rw-nf,.rw-riquadro,.rwall-card .rw-voce{animation:rw-entra .24s ease-out both}
.rw-riquadro{animation-delay:.06s}
.rwall-card .rw-voce{animation-delay:.12s}
@keyframes rw-entra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rw-nf,.rw-riquadro,.rwall-card .rw-voce{animation:none}}
.rw-urgenza{text-align:center;color:#F87171;font-weight:700;font-size:12.5px;margin:10px 0 0}
.rw-indietro{display:block;margin:12px auto 0;background:none;border:0;color:#9CA3AF;font-size:.88rem;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rw-indietro:hover{color:#E5E7EB}
.rw-festa{text-align:left}
.rw-festa-segno{width:52px;height:52px;margin:2px auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;font-weight:800;color:#0B1D3A;background:var(--gold);box-shadow:0 0 34px rgba(227,188,99,.45)}
.rw-festa h3{text-align:center}
.rd-carta{background:#d4d8da;border-radius:8px;padding:26px 28px 0;max-width:900px;margin:0 auto}
/* aspect-ratio del foglio (8.25x11): ogni pagina occupa la SUA altezza
   prima ancora che l'immagine arrivi. Senza, al primo istante le pagine
   sono alte zero, il velo di pagina 15 risulta "in vista" e il muro si
   apre in faccia a chi e' appena entrato (visto l'8 ago su rete vera). */
.rd-pg{display:block;width:100%;height:auto;aspect-ratio:8.25/11;background:#fff;border-radius:2px;box-shadow:0 8px 28px rgba(0,0,0,.18);margin-bottom:22px}
/* l'avanzamento MUTO dell'anteprima: un filo d'oro fisso in cima che si
   riempie con lo scorrimento. Niente parole (Max, 11 ago): vederlo
   caricarsi E' l'incentivo. Il riempimento e' un transform, mai width. */
/* IL TRAGUARDO (12 ago, via il filo fisso a tutta pagina): binario navy
   nello slot destro della testata, il filo d'oro si riempie con la
   lettura e il chip "Unlock" col mini libro VIAGGIA fino alla destra.
   Zero cifre: il disegno dice da solo "scrolla e sblocchi tutto".
   Movimenti SOLO transform, regola del compositor. */
.topbar .right:has(.rd-traguardo){flex:1;display:flex;justify-content:flex-end;min-width:0;margin-left:10px}
.rd-traguardo{position:relative;display:flex;align-items:center;flex:1;min-width:140px;max-width:280px;height:38px;
  border-radius:999px;border:1px solid rgba(227,188,99,.4);cursor:pointer;padding:0 6px;overflow:hidden;
  background:linear-gradient(160deg,var(--panel-a),var(--panel-b))}
.rd-corsa{position:absolute;left:12px;right:12px;top:50%;height:3px;margin-top:-1.5px;border-radius:99px;
  background:rgba(255,255,255,.09);overflow:hidden;pointer-events:none}
.rd-corsa i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  box-shadow:0 0 10px rgba(227,188,99,.55)}
.rd-fermo{position:relative;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;
  background:linear-gradient(160deg,var(--panel-a),var(--panel-b));border:1px solid rgba(227,188,99,.55);
  box-shadow:0 4px 12px rgba(0,0,0,.45);will-change:transform;pointer-events:none}
.rd-fermo img{display:block;width:16px;height:24px;object-fit:contain;border-radius:3px}
.rd-fermo b{font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--gold-hi);line-height:1}
@media (prefers-reduced-motion:reduce){ .rd-fermo{transition:none} }
.rd-fade{position:relative}
.rd-fade .rd-pg{margin-bottom:0}
.rd-velo{position:absolute;inset:auto 0 0 0;height:72%;background:linear-gradient(180deg,rgba(212,216,218,0) 0%,rgba(212,216,218,.72) 35%,rgba(10,15,30,.96) 92%,#0A0F1E 100%);pointer-events:none}
.rd-gate{text-align:center;padding:26px 0 8px}
.rd-gatetitle{font-family:var(--display);font-stretch:110%;font-size:30px;font-weight:800;line-height:1.25;margin:0 0 18px}
.stackrighe{margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stkr{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:14px;border-bottom:1px solid var(--line-soft)}
.stkr:last-child{border-bottom:none}
.stkr b{color:var(--gold-hi)}
.stkr.tot{background:rgba(200,151,45,.08);font-weight:800}
.stkr.tot s{color:var(--bad);margin-right:6px}
.lockchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lockchips span{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted)}
.lockchips span::before{content:'🔒 ';font-size:10px}
.demoribbon{position:absolute;top:14px;right:-34px;transform:rotate(35deg);background:var(--gold);color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;padding:5px 38px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.lezfoglio{position:relative;overflow:hidden}
.lockpill{display:inline-flex;align-items:center;border:1px solid var(--gold);color:var(--gold-hi);border-radius:999px;padding:5px 12px;font-size:11px;font-weight:800;letter-spacing:.14em}

/* Qui vivevano il binario delle miniature e lo sfogliatore a doppia
   pagina: tolti il 12 ago ("lascia semplice, a pagina a scorrimento").
   Il lettore ha DUE strumenti: Contents e la ricerca. */
/* la testata del lettore con la barra strumenti come seconda riga:
   sticky, sfondo pieno anche nella variante deep (sotto ci scorrono le
   pagine bianche del libro) */
.topbar.con-strum{background:rgba(10,15,30,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar.con-strum h1{flex:0 0 auto;white-space:nowrap}
.topbar.con-strum .rd-strum{flex:1 1 auto;min-width:0;max-width:none;margin:0}
.topbar.con-strum .rd-cerca-box{min-width:0;padding:0 10px;gap:6px}
.topbar.con-strum .rd-cerca-box input{font-size:.88rem}
.rd-tb-toc{display:inline-flex;align-items:center;gap:7px;padding:0 14px;white-space:nowrap;width:auto}
.rd-tb-toc span{font-size:13px;font-weight:700}
.rd-toc{position:fixed;inset:0;background:rgba(4,10,22,.62);z-index:10003;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:700px){ .rd-toc{align-items:center} }
.rd-toc-foglio{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid rgba(227,188,99,.35);
  border-radius:16px 16px 0 0;width:100%;max-width:520px;max-height:78vh;overflow:auto;padding:8px 10px 14px;position:relative}
@media(min-width:700px){ .rd-toc-foglio{border-radius:16px} }
.rd-toc-testa{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 8px;font-size:16px}
.rd-toc-testa .rwall-x{position:static}
.rd-toc-voce{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-top:1px solid var(--line-soft);padding:12px 10px;cursor:pointer;color:var(--ink);font-size:14.5px}
.rd-toc-voce:hover{background:rgba(227,188,99,.08)}
.rd-toc-voce small{color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── il muro-popup della lettura e l'upload della recensione ── */
.rwall{position:fixed;inset:0;background:rgba(4,10,22,.7);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:10002;padding:18px}
.rwall-card{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid rgba(200,151,45,.35);border-radius:16px;max-width:520px;width:100%;max-height:92vh;overflow:auto;padding:26px 24px;position:relative}
.rwall-x{position:absolute;top:12px;right:12px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);width:32px;height:32px;cursor:pointer;font-size:15px}
.rwall h3{font-family:var(--display);font-stretch:110%;font-size:23px;font-weight:800;margin:0 0 6px}
/* l'immagine del bundle: rinforza cio' che il muro sblocca (11 ago sera) */
.rw-bundle{display:block;width:100%;height:auto;border-radius:12px;margin:4px 0 12px}
/* il riquadro emotivo corto (stile FE): le recensioni tengono gratuito il materiale */
.rw-voce{border:1px solid rgba(227,188,99,.35);border-left:3px solid var(--gold-hi);border-radius:10px;
  background:rgba(227,188,99,.07);padding:11px 14px;margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--gold-pale)}
/* il verde della recensione, a scritta BIANCA (Max, 11 ago sera) */
/* i due bottoni del patto CENTRATI e ACCESI (Max, 12 ago: "brillanti"):
   testo al centro, luce propria — verde vivo con l'alone, oro pieno che
   brilla. Scope sul muro: i cta-solid del resto dell'app non si toccano. */
.rwall-card .cta-solid{display:flex;align-items:center;justify-content:center;text-align:center;width:100%}
/* :not([disabled]) OBBLIGATORIO: questa regola viene DOPO .cta-solid[disabled]
   nella cascata e a pari specificita' vincerebbe — un SEND spento che brilla
   come attivo inganna il tap (visto in foto, 12 ago) */
.rwall-card .cta-solid:not(.rw-verde):not([disabled]){background:linear-gradient(180deg,#F5D98E,var(--gold-hi) 45%,#D9A93F);
  box-shadow:0 0 20px rgba(227,188,99,.55),0 6px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55)}
.rw-verde{background:linear-gradient(180deg,#2BA457,#1E8F49 55%,#177A3D);border-color:rgba(255,255,255,.28);color:#fff;font-size:13px;letter-spacing:.01em;white-space:nowrap;padding-left:10px;padding-right:10px;
  box-shadow:0 0 20px rgba(43,164,87,.5),0 6px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.rw-verde .rw-stelle{color:#fff;font-size:13px;letter-spacing:1.5px;vertical-align:0}
.rw-verde:hover{filter:brightness(1.08)}
/* (il vecchio gancio-pillola "$127 bundle" e' morto il 12 ago:
   il richiamo ora e' il traguardo qui sopra, senza cifre) */
.rwall .oppure{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--faint);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.rwall .oppure::before,.rwall .oppure::after{content:'';flex:1;height:1px;background:var(--line)}
.dropzona{border:2px dashed var(--line);border-radius:12px;padding:22px 16px;text-align:center;cursor:pointer;transition:border-color var(--t-fast)}
.dropzona:hover{border-color:var(--gold)}
.dropzona.piena{border-style:solid;border-color:var(--good-deep)}
.dropzona img{max-width:100%;max-height:180px;border-radius:8px;margin-top:10px}
.dz-tit{font-weight:700;font-size:14.5px}
.dz-sub{font-size:12px;color:var(--faint);margin-top:4px}
.avviso-verifica{border-radius:11px;padding:12px 15px;font-size:13.5px;line-height:1.55;margin-top:12px;background:rgba(227,188,99,.1);border:1px solid rgba(227,188,99,.35);color:var(--gold-pale)}
.avviso-rosso{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.35);color:#fca5a5}

/* Qui e' vissuta poche ore la dashboard a tre carte della coorte ads
   (dash-ante/carta-ante): tolta l'11 ago sera, "solo il libro". */

/* ── il check d'ingresso (14 ago, tre battute): benvenuto in carta,
      schermata-spiegazione, e il POPUP del check di sempre sopra ── */
.linkino{font-size:13.5px;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.linkino:hover{color:var(--ink)}

/* la schermata Password dal profilo: il guscio dell'accesso dentro una
   pagina con testata, quindi niente centratura a tutta altezza */
[data-schermata="password"] .authwrap{min-height:auto;padding:8px 22px 40px}

/* ── QUALE SCHERMATA FOTOGRAFARE (16 ago): tre miniature sotto la zona
      di caricamento del muro. Due giuste col bordo verde, una sbagliata
      col bordo rosso e sbiadita. Le immagini sono screenshot veri presi
      da telefono, allineati in alto a sinistra perche' la barra
      "amazon.com" e' cio' che li rende riconoscibili in un colpo
      d'occhio. ── */
/* LA RIGA CHE SI LEGGE PRIMA DI ANDARE VIA (18 ago 2026). La guida
   sotto la dropzone arriva DOPO l'errore; questa arriva prima, ed e'
   l'ultimo momento in cui abbiamo la persona davanti. Sta attaccata al
   bottone che la porta su Amazon, in piccolo, perche' e' un'istruzione
   da ricordare, non una promessa da vendere. */
/* IL POPUP DEL VERDETTO (18 ago 2026, Max: "troppo lungo... un altro
   pop up con la spiegazione e due opzioni"). Sta sopra il muro (10002)
   e sotto il pannello d'aiuto (10400): l'ordine racconta il percorso,
   muro → verdetto → aiuto. */
.rw-verdetto{position:fixed;inset:0;background:rgba(4,10,22,.55);backdrop-filter:blur(2px);
  z-index:10300;display:flex;align-items:center;justify-content:center;padding:22px}
.rwv-card{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  border:1px solid rgba(248,113,113,.4);border-radius:16px;max-width:400px;width:100%;
  padding:20px 18px;animation:rwvIn .18s ease-out}
@keyframes rwvIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rwv-k{margin:0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FCA5A5}
.rwv-msg{margin:9px 0 16px;font-size:14.5px;line-height:1.55;color:var(--ink)}
/* la centratura del testo nel bottone oro vive su .rwall-card .cta-solid:
   il popup e' una scatola nuova e non la eredita, quindi TRY AGAIN
   usciva appoggiato a sinistra (Max, 18 ago sera, dalla prova vera) */
.rwv-card .cta-solid{width:100%;display:flex;align-items:center;justify-content:center;text-align:center}
.rwv-card .rw-aiuto{margin-top:10px}
.rwv-leggi{text-align:center;margin:13px 0 0}
@media (prefers-reduced-motion:reduce){.rwv-card{animation:none}}

/* LA GUIDA SI ACCENDE SUL PEZZO GIUSTO dopo "Try again": la correzione
   arriva guardando, senza rileggere. Si spegne al prossimo tentativo. */
.dz-guida figure.acceso img{border-width:2.5px;box-shadow:0 0 0 3px rgba(227,188,99,.28)}
.dz-guida figure.no.acceso img{opacity:1;box-shadow:0 0 0 3px rgba(248,113,113,.35)}
.dz-sub.acceso{color:var(--gold-hi);font-weight:700}

/* IL BOTTONE D'AIUTO NEL MURO (18 ago 2026). Livrea del robot, non
   dell'app: blu contro un fondo dove tutto il resto e' oro. Non e' un
   vezzo, e' gerarchia — accanto al bottone d'invio deve leggersi come
   un'ALTRA cosa, non come un secondo modo di fare la stessa. Alto 52px
   perche' e' il paracadute di chi ha appena sbagliato, e un paracadute
   non si sbaglia a premere. */
.rw-aiuto{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:11px;min-height:52px;padding:13px 14px;border-radius:12px;
  border:1.5px solid #357df9;background:rgba(53,125,249,.16);color:#9dc2ff;
  font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:.01em;
  cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast)}
.rw-aiuto:hover{background:rgba(53,125,249,.24);border-color:#5a9cff}
.rw-aiuto:active{transform:scale(.98)}
.rw-aiuto svg{width:26px;height:26px;flex:0 0 auto}
/* IL PANNELLO D'AIUTO STA SOPRA AL MURO. Il muro della recensione vive
   a 10002 e il pannello nasceva a 10001: aperto da li' sarebbe finito
   dietro alla finestra, cioe' invisibile proprio nel momento in cui
   serve. Sale sopra tutto tranne il tour (10500), che resta l'unica
   cosa che puo' coprirlo. */
#sw-panel,.sw-panel{z-index:10400!important}
.rw-ritorno{font-size:12px;line-height:1.4;color:var(--faint);text-align:center;margin:-2px 0 2px}
.rw-ritorno b{color:var(--muted);font-weight:700}
.dz-guida{margin-top:12px;border-top:1px solid var(--line);padding-top:11px}
.dz-guida-tit{font-size:12.5px;font-weight:800;color:var(--gold-hi);margin:0 0 9px;text-align:center}
/* QUATTRO ESEMPI, NON PIU' TRE (18 ago 2026). Su un telefono quattro
   colonne fanno miniature da 70px, in cui non si distingue una
   schermata dall'altra: sotto i 460px vanno a due per riga. */
.dz-guida-righe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:460px){ .dz-guida-righe{grid-template-columns:repeat(2,1fr);gap:9px 8px} }
.dz-guida figure{margin:0;text-align:center}
.dz-guida img{width:100%;height:auto;aspect-ratio:390/560;object-fit:cover;object-position:top left;
  border-radius:8px;display:block;border:1.5px solid var(--line);background:#fff}
.dz-guida .si img{border-color:rgba(52,211,153,.65)}
.dz-guida .no img{border-color:rgba(248,113,113,.6);opacity:.62}
.dz-guida figcaption{font-size:11px;line-height:1.35;margin-top:6px;color:var(--ink);font-weight:600}
.dz-guida figcaption span{display:block;font-weight:400;font-size:10px;color:var(--faint);margin-top:2px}
.dz-guida .si figcaption{color:#34D399}
.dz-guida .no figcaption{color:#F87171}
.dz-guida .si figcaption span,.dz-guida .no figcaption span{color:var(--faint)}