/* 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 ================= */
.glay{display:flex;min-height:100vh}
.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:100vh;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 */
.ritual{min-height:calc(100dvh - 220px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:30px 20px}
.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;justify-content:center;
  gap:0;text-align:center;padding:24px}
/* 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 ============ */
.authwrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:28px 22px}
.authcard{width:100%;max-width:400px}
.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:15px;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}
.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}
}
.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){
  [data-schermata="reader"]{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". */