/* Font self-hosted (Syne + DM Mono, subset latin/latin-ext) — niente più fetch
   da fonts.googleapis/gstatic: privacy (GDPR) + zero dipendenze esterne. */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dmmono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dmmono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dmmono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dmmono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/syne-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/syne-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/syne-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/syne-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/syne-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/syne-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/syne-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/syne-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font self-hosted (Outfit + Space Grotesk, subset latin/latin-ext) — mobile redesign, scoped a #view-user ≤700px. Stesso principio dei font esistenti: niente fetch da fonts.googleapis/gstatic. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/outfit-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/outfit-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/outfit-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/outfit-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/outfit-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/outfit-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/outfit-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/outfit-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/outfit-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/outfit-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/spacegrotesk-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/spacegrotesk-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/spacegrotesk-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/spacegrotesk-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/spacegrotesk-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/spacegrotesk-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ Ingain — foglio di stile estratto da index.html (build: viene hashato) ═══ */

*{box-sizing:border-box;margin:0;padding:0}
*:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}
/* ─── Print stylesheet ── nasconde UI navigazionale e overlay, mostra solo
   il contenuto principale come documento stampabile. Utile per pagina About,
   sezione tasse, report fiscale, refund/IP policy. */
@media print {
  body{background:#fff !important;color:#000 !important}
  .topbar,.nav-tabs,.bottom-nav,.plat-strip-wrap,.streak-pill,.notif-btn,.logout-btn,.wallet-pill,
  .ai-box,.cooldown-bar,.demo-overlay,.cmod-overlay,.modal-overlay,.checkout-overlay,
  .hist-overlay,.onboard-overlay,#settingsPanel,#miniNotifPanel,#gdprBanner,
  #sptourOverlay,#sptourCut,#sptourTooltip,#skipToContent,.toast-stack,.legal-banner,
  #pwaInstallRow,.cta,.btn{display:none !important}
  .view{display:block !important}
  .card{box-shadow:none !important;border:1px solid #ddd !important;break-inside:avoid;page-break-inside:avoid}
  a{color:#000 !important;text-decoration:underline}
  a[href]:after{content:" (" attr(href) ")";font-size:90%;color:#666}
  .about-overlay{position:static !important;display:block !important;background:#fff !important;color:#000 !important}
  .about-overlay .about-close{display:none !important}
}
:root{
  --bg:#07070d;--s1:#0f0f17;--s2:#161620;--s3:#1e1e2a;--s4:#262633;
  --green:#2ec27e;--green2:#3de898;--green3:rgba(61,232,152,0.08);
  --gold:#e9c44e;--gold2:rgba(233,196,78,0.1);
  --blue:#4a9fff;--blue2:rgba(74,159,255,0.1);
  --purple:#a78bfa;--purple2:rgba(167,139,250,0.1);
  --pink:#e8458c;--pink2:rgba(232,69,140,0.1);
  /* AUDIT-FIX A11Y (2026-07-27) · --red serviva due scopi incompatibili: come
     COLORE DI TESTO su fondo scuro deve essere chiaro (era 4.39 su --s3, sotto
     la soglia 4.5) e come SFONDO di bottoni "danger" con scritta bianca deve
     essere scuro (schiarirlo avrebbe peggiorato il testo sopra, da 3.75 a 3.13).
     Separati: --red resta per sfondi e bordi, --red-text è il rosso leggibile
     dei messaggi di errore. --red è stato anche scurito da #e05555 a #c73c3c:
     come sfondo del bottone "Elimina/Rifiuta" il testo bianco sopra stava a
     3.75, ora è a 5.07. Resta un rosso di pericolo riconoscibile. */
  --red:#c73c3c;--red-text:#e86a6a;--cyan:#00d4ff;--orange:#ff8c42;
  /* AUDIT-FIX A11Y (2026-07-26) · NON riabbassare questi due senza rifare i conti.
     Valori precedenti: --text2:#9090a8 e --muted:#54546a. `--muted` dava 2.24:1
     sul fondo più chiaro (--s3) contro il 4.5:1 richiesto da WCAG AA, ed è usato
     ~204 volte quasi sempre su testi di 9-10px: era il testo più piccolo dell'app
     e insieme il meno leggibile. Perché alzati ENTRAMBI: portando a norma il solo
     --muted, finiva appiccicato a --text2 (distanza 1,15×) e la gerarchia a tre
     livelli spariva. Alzando anche --text2 i salti restano regolari (su --s3:
     text 13,8 → text2 8,1 → muted 4,9; rapporti 1,70× e 1,65×) e tutti e tre
     superano la soglia. L'interfaccia risulta meno "sussurrata": è l'effetto
     voluto, non una svista. */
  --text:#eaeaf2;--text2:#b4b4c8;--muted:#8a8aa2;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.13);
  --r:14px;--rs:9px;
  --ff:'Syne',sans-serif;--fm:'DM Mono',monospace;
  --shadow:0 4px 24px rgba(0,0,0,0.4);
  --shadow-green:0 0 20px rgba(46,194,126,0.12);
}
html[data-theme="light"]{
  --bg:#f7f7fb;--s1:#ffffff;--s2:#f0f0f5;--s3:#e6e6ee;--s4:#dcdce6;
  --text:#0c0c14;--text2:#4a4a60;--muted:#5f5f75;--red-text:#b93535;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.16);
  --shadow:0 4px 24px rgba(0,0,0,0.08);
  --green3:rgba(46,194,126,0.12);
}
html[data-theme="light"] body{background:var(--bg);color:var(--text)}
html[data-theme="light"] .topbar,
html[data-theme="light"] .bottom-nav{background:rgba(247,247,251,0.92)}
html[data-theme="light"] .about-overlay{background:var(--bg)}
html[data-theme="light"] .about-title,
html[data-theme="light"] .about-section-title,
html[data-theme="light"] .brand-name{color:var(--text)}
html[data-theme="light"] .about-tagline,
html[data-theme="light"] .about-section-body,
html[data-theme="light"] .astat-lbl{color:var(--text2)}
html[data-theme="light"] .card,
html[data-theme="light"] .modal,
html[data-theme="light"] .astat,
html[data-theme="light"] .mf-block,
html[data-theme="light"] .about-plat,
html[data-theme="light"] .faq-item,
html[data-theme="light"] #miniNotifPanel,
html[data-theme="light"] #settingsPanel,
html[data-theme="light"] .wallet-pill,
html[data-theme="light"] .notif-btn,
html[data-theme="light"] .mode-toggle,
html[data-theme="light"] .inp,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{background:var(--s1);color:var(--text);border-color:var(--border)}
/* Neon "finestre": attivabile in ENTRAMBI i temi tramite la classe .neon-on su
   <html> (gestita da applyNeon() in wallet.js). Default: light acceso, dark spento.
   Colore via --neon-frame e glow via --neon-glow, impostati da JS dal color picker
   in Impostazioni. */
html{--neon-frame:#2ee86b;--neon-glow:rgba(46,232,107,0.40)}
html.neon-on .card,
html.neon-on .camp-card,
html.neon-on .astat,
html.neon-on .about-plat,
html.neon-on .hero-stat,
html.neon-on .modal{
  border-color:var(--neon-frame);
  border-width:1px;
  box-shadow:0 0 13px var(--neon-glow);
}
html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .auth-overlay{background:rgba(12,12,20,0.45)}
html[data-theme="light"] [style*="background:var(--s1)"],
html[data-theme="light"] [style*="background:var(--s2)"],
html[data-theme="light"] [style*="background:var(--s3)"]{color:var(--text) !important}
html[data-theme="light"] .mode-btn.active{background:var(--s3);color:var(--text)}
html[data-theme="light"] .ntab{color:var(--text2)}
html[data-theme="light"] .ntab.active{color:var(--text)}
html[data-theme="light"] .logout-btn{background:var(--s2);color:var(--text);border-color:var(--border2)}
html[data-theme="light"] .auth-overlay{background:var(--bg)}
html[data-theme="light"] .auth-card{background:var(--s1);border-color:var(--border2)}
html[data-theme="light"] .tt{background:rgba(0,0,0,0.06);color:var(--text);border-color:var(--border2)}
html[data-theme="light"] [style*="rgba(0,0,0,0.25)"],
html[data-theme="light"] [style*="rgba(0,0,0,0.3)"],
html[data-theme="light"] [style*="rgba(0,0,0,0.4)"]{background:var(--s2) !important}
html[data-theme="light"] .checkout-modal,
html[data-theme="light"] .checkout-overlay > *{background:var(--s1);color:var(--text)}
/* ── A11y light-mode: il verde neon (#3de898/#2ec27e) come TESTO su bianco è
   sotto soglia WCAG. Lo scuriamo a #0c7a44 (~5,4:1, AA) SOLO dove è usato come
   colore-testo: selettore d'attributo per gli inline + classi su sfondo chiaro.
   NON tocchiamo sfondi/gradienti/bordi (i bottoni verdi con testo scuro restano
   leggibili). Esclusi toast e bottoni primari (hanno bg colorato proprio). */
html[data-theme="light"] [style*="color:var(--green2)"],
html[data-theme="light"] [style*="color:var(--green)"],
html[data-theme="light"] .astat-val,
html[data-theme="light"] .about-section-label,
html[data-theme="light"] .about-pill,
html[data-theme="light"] .ct-legal,
html[data-theme="light"] .btn.green,
html[data-theme="light"] .conv-amount,
html[data-theme="light"] .auth-alert-ok,
html[data-theme="light"] .auth-switch span,
html[data-theme="light"] .auth-role-opt.sel-earner,
html[data-theme="light"] .earn-tier-amt,
html[data-theme="light"] .eur-badge,
html[data-theme="light"] .ref-earn-badge,
html[data-theme="light"] .cur-pill,
html[data-theme="light"] .plat-pill.active,
html[data-theme="light"] .ap-chip.is-on,
html[data-theme="light"] .preset-btn.active,
html[data-theme="light"] .brand-name em,
html[data-theme="light"] .about-title em,
html[data-theme="light"] .faq-item.open .faq-arrow,
html[data-theme="light"] .legal-banner-text strong,
html[data-theme="light"] .modal-legal strong,
html[data-theme="light"] .mf-block.highlight .mf-amt,
html[data-theme="light"] .tx-pos,
html[data-theme="light"] .d-easy,
html[data-theme="light"] .at-referral,
html[data-theme="light"] .pill-green{color:#0c7a44 !important}
html[data-theme="light"] .about-footer,
html[data-theme="light"] .muted,
html[data-theme="light"] [style*="color:var(--muted)"]{color:var(--text2) !important}
html[data-theme="light"] .faq-q,html[data-theme="light"] .faq-a{color:var(--text)}
html[data-theme="light"] .money-flow,html[data-theme="light"] .mf-block{background:var(--s1);border-color:var(--border)}
/* Referral Hub light mode */
html[data-theme="light"] .ref-hero{background:linear-gradient(135deg,rgba(232,69,140,0.06),rgba(167,139,250,0.05));border-color:rgba(232,69,140,0.2)}
html[data-theme="light"] .ref-stat{background:var(--s1);border:1px solid var(--border)}
html[data-theme="light"] .ref-form,
html[data-theme="light"] .ref-card{background:var(--s1);border-color:var(--border)}
html[data-theme="light"] .ref-card-link{background:rgba(74,159,255,0.08);color:var(--blue)}
html[data-theme="light"] .ref-cs{color:var(--text2)}
html[data-theme="light"] .ref-cs span{color:var(--text)}
/* Home widgets scuri */
html[data-theme="light"] .legal-banner,
html[data-theme="light"] .earn-hero,
html[data-theme="light"] .earn-calc-box,
html[data-theme="light"] .ai-box,
html[data-theme="light"] .disc-card{background:var(--s1);color:var(--text);border-color:var(--border)}
/* AUDIT-FIX (2026-07-26): la striscia TikTok è `background:#fff` (il bianco del
   brand, giusto sul fondo scuro). In tema chiaro però la card ha
   `background:var(--s1)` = #ffffff → striscia bianca su bianco, cioè invisibile:
   le card TikTok erano le uniche senza indicatore di piattaforma. Che fosse una
   svista e non una scelta lo conferma l'analogo `.tt` testuale, che un override
   chiaro ce l'ha già. Qui si usa il nero del logo TikTok, leggibile sul chiaro. */
html[data-theme="light"] .disc-card.tt-c::before{background:#111}
html[data-theme="light"] .disc-desc,html[data-theme="light"] .hero-lbl{color:var(--text2)}
html[data-theme="light"] .empty{color:var(--text2)}
/* Guadagni tab — righe possibili guadagni */
html[data-theme="light"] .earn-tier-row{background:var(--s1);border-color:var(--border)}
html[data-theme="light"] .earn-hero{background:linear-gradient(135deg,rgba(61,232,152,0.08),rgba(0,212,255,0.04));border-color:rgba(61,232,152,0.22)}
html[data-theme="light"] .earn-tier-name{color:var(--text)}
html[data-theme="light"] .earn-tier-sub{color:var(--text2)}
html,body{background:var(--bg);color:var(--text);font-family:var(--ff);min-height:100vh;overflow-x:hidden}
body{-webkit-font-smoothing:antialiased}
.sr-only{position:absolute;left:-9999px}

/* ── TOPBAR ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:13px 18px 11px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;background:rgba(7,7,13,0.9);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:9px;cursor:pointer;transition:opacity 0.2s}
.brand:hover{opacity:0.8}
.brand-logo{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand-name{font-size:20px;font-weight:800;letter-spacing:-0.5px}
/* Desktop (>700px, stessa soglia mobile/desktop della bottom-nav): logo-testo
   in topbar leggermente più grande. Mobile resta 20px (16px sotto i 430px). */
@media(min-width:701px){.brand-name{font-size:26px}}
.brand-name em{color:var(--green);font-style:normal}
.mode-toggle{display:flex;gap:3px;background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:3px}
.mode-btn{padding:6px 15px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;border:none;background:transparent;font-family:var(--ff);color:var(--muted);transition:all 0.25s;white-space:nowrap}
.mode-btn.active{background:var(--s3);color:var(--text);border:1px solid var(--border2);box-shadow:0 1px 6px rgba(0,0,0,0.3)}
.topbar-right{display:flex;align-items:center;gap:7px}
.wallet-pill{display:flex;align-items:center;gap:5px;background:var(--s2);border:1px solid rgba(233,196,78,0.2);border-radius:20px;padding:5px 12px;cursor:pointer;transition:all 0.25s}
.wallet-pill:hover{border-color:rgba(233,196,78,0.5);background:var(--s3)}
.notif-btn{width:33px;height:33px;background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;position:relative;transition:all 0.2s;color:var(--text)}
.notif-btn:hover{background:var(--s3);border-color:var(--border2)}
/* AUDIT-FIX (2026-07-26): rimosse .ndot/.ndot.on (+ il rispettivo override tema
   chiaro): il pallino notifiche non esiste più nel markup, sostituito dal badge
   numerico #nCount. Verificato: zero occorrenze di 'ndot' in index.html e in
   tutti i js/ (l'unico hit residuo era la parola dentro un commento). */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
/* Social-proof: ticker a scorrimento orizzontale continuo (stile news) */
.sp-marquee{overflow:hidden;white-space:nowrap;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sp-marquee .sp-track{display:inline-block;white-space:nowrap;will-change:transform;animation:spScroll 36s linear infinite}
.sp-marquee:hover .sp-track{animation-play-state:paused}
@keyframes spScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.sp-marquee .sp-track{animation:none}}
/* ── POLISH grafico v1 ──────────────────────────────────────────────── */
/* Profondità: glow radiale tenue come layer del background body (dietro a tutto,
   nessun problema di stacking). background-attachment:fixed → resta ancorato. */
body{background:
  radial-gradient(70% 50% at 50% -8%, rgba(46,194,126,0.10), transparent 70%),
  radial-gradient(45% 35% at 88% 6%, rgba(0,212,255,0.06), transparent 70%),
  var(--bg);
  background-attachment:fixed}
html[data-theme="light"] body{background:
  radial-gradient(70% 50% at 50% -8%, rgba(46,194,126,0.06), transparent 70%),
  var(--bg);
  background-attachment:fixed}
/* Grana (2026-07-12): i due glow radiali sopra sono lisci al 100% — tratto
   tipico dei mockup generati da IA. Un velo di rumore fisso rompe la
   piattezza senza intaccare leggibilità (mix-blend-mode:overlay preserva
   il contrasto del testo sotto). Solo dark: il chiaro resta "carta" pulita
   com'era in origine. pointer-events:none = non ruba i click al contenuto. */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="light"] body::after{display:none}
/* Entrata a cascata delle card (delay inline per indice nei render) */
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Sheen periodico sul logo */
.brand-logo,.about-logo{position:relative;overflow:hidden}
.brand-logo::after,.about-logo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,0.28) 50%,transparent 60%);
  transform:translateX(-130%);animation:logoSheen 7s ease-in-out infinite}
@keyframes logoSheen{0%,74%{transform:translateX(-130%)}90%,100%{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){
  .brand-logo::after,.about-logo::after{display:none}
  .disc-card,.camp-card{animation:none!important}
  .tab-pane{animation:none!important}
  .val-pulse{animation:none!important}
}

/* ── ABOUT OVERLAY ── */
.about-overlay{position:fixed;inset:0;background:#07070d;z-index:200;display:none;overflow-y:auto}
.about-overlay.show{display:block;animation:fadeIn 0.3s ease}
.about-close{position:fixed;top:14px;right:16px;width:36px;height:36px;background:var(--s2);border:1px solid var(--border2);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--text2);transition:all 0.2s;z-index:201}
.about-close:hover{background:var(--s3);color:var(--text)}
.about-wrap{max-width:700px;margin:0 auto;padding:54px 20px 48px}

/* Hero */
.about-hero{text-align:center;padding:36px 0 32px;position:relative}
.about-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.about-hero-bg::before{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(46,194,126,0.06) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%)}
.about-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(61,232,152,0.08);border:1px solid rgba(61,232,152,0.2);border-radius:20px;padding:5px 13px;font-size:10px;font-weight:700;color:var(--green2);margin-bottom:18px;letter-spacing:0.3px}
.about-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green2);animation:pulse 1.5s infinite}
.about-logo{width:84px;height:84px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;filter:drop-shadow(0 0 36px rgba(245,195,59,0.28));border-radius:0;background:transparent;box-shadow:none}
.about-logo img{width:100%;height:100%;object-fit:contain;display:block}
.about-title{font-size:38px;font-weight:800;letter-spacing:-1.5px;margin-bottom:12px;line-height:1.1}
.about-title em{color:var(--green);font-style:normal}
.about-tagline{font-size:14px;color:var(--text2);max-width:420px;margin:0 auto 22px;line-height:1.75}
/* AUDIT-FIX (2026-07-24): rimosse .about-live-counter (+ variante strong), il
   contatore "live" animato della pagina Chi siamo — anch'esso numeri finti,
   markup già rimosso il 2026-07-18, CSS rimasto orfano. */

/* Stats strip */
.about-stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:36px}
.astat{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:14px;text-align:center}
.astat-val{font-size:22px;font-weight:800;font-family:var(--fm);color:var(--green2);line-height:1;margin-bottom:4px}
.astat-lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}

/* Sections */
.about-section{margin-bottom:36px}
.about-section-label{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--green2);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.about-section-label::after{content:'';flex:1;height:1px;background:rgba(61,232,152,0.15)}
.about-section-title{font-size:22px;font-weight:800;margin-bottom:10px;letter-spacing:-0.4px;line-height:1.2}
.about-section-body{font-size:13px;color:var(--text2);line-height:1.8}
.about-section-body strong{color:var(--text);font-weight:700}

/* Money flow visual */
.money-flow{display:flex;align-items:center;gap:0;margin:18px 0;background:var(--s1);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.mf-block{flex:1;padding:14px 10px;text-align:center}
.mf-icon{font-size:22px;margin-bottom:5px}
.mf-name{font-size:10px;font-weight:700;margin-bottom:2px}
.mf-amt{font-size:11px;font-family:var(--fm);color:var(--muted)}
.mf-arrow{font-size:18px;color:var(--border2);flex-shrink:0}
.mf-block.highlight{background:rgba(46,194,126,0.06);border-left:1px solid rgba(46,194,126,0.2);border-right:1px solid rgba(46,194,126,0.2)}
.mf-block.highlight .mf-amt{color:var(--green2)}

/* Split stat row */
.about-divider{height:1px;background:var(--border);margin:32px 0}

/* Values */
.about-value-row{display:flex;align-items:flex-start;gap:14px;padding:14px;background:var(--s1);border:1px solid var(--border);border-radius:var(--rs);margin-bottom:9px;transition:border-color 0.2s}
.about-value-row:hover{border-color:var(--border2)}
.about-value-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}

/* Platforms grid */
.about-platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.about-plat{background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:12px 8px;text-align:center;font-size:10px;font-weight:700;color:var(--text2)}
.about-plat-icon{font-size:18px;margin-bottom:5px}

/* FAQ */
.about-faq{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.faq-item{background:var(--s1);border:1px solid var(--border);border-radius:var(--rs);overflow:hidden;transition:border-color 0.2s}
.faq-item.open{border-color:rgba(61,232,152,0.25)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;cursor:pointer;font-size:12px;font-weight:700;user-select:none}
.faq-arrow{font-size:12px;color:var(--muted);transition:transform 0.2s;flex-shrink:0}
.faq-item.open .faq-arrow{transform:rotate(180deg);color:var(--green2)}
.faq-a{display:none;padding:0 14px 13px;font-size:11px;color:var(--text2);line-height:1.7;border-top:1px solid var(--border)}
.faq-item.open .faq-a{display:block}

/* CTA final */
.about-cta{background:linear-gradient(135deg,var(--green),#1a9e5c);color:#07070d;border:none;padding:15px 28px;border-radius:12px;font-family:var(--ff);font-size:15px;font-weight:800;cursor:pointer;display:block;width:100%;margin-top:14px;transition:all 0.2s;box-shadow:0 4px 24px rgba(46,194,126,0.35);letter-spacing:-0.2px}
.about-cta:hover{opacity:0.88;box-shadow:0 6px 30px rgba(46,194,126,0.45)}
.about-footer{text-align:center;font-size:10px;color:var(--muted);margin-top:16px;line-height:1.6}
@media(max-width:600px){.about-stats-strip{grid-template-columns:1fr 1fr}.about-platforms{grid-template-columns:repeat(4,1fr)}}

/* ── LEGAL BADGE ── */
.legal-banner{background:rgba(61,232,152,0.04);border:1px solid rgba(61,232,152,0.12);border-radius:var(--rs);padding:10px 13px;margin-bottom:13px;display:flex;align-items:center;gap:9px}
.legal-banner-x{margin-left:auto;flex-shrink:0;width:22px;height:22px;border-radius:50%;border:none;background:transparent;color:var(--muted);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.legal-banner-x:hover{background:var(--s3);color:var(--text)}
.legal-banner-icon{font-size:14px;flex-shrink:0}
.legal-banner-text{font-size:10px;color:var(--text2);line-height:1.55}
.legal-banner-text strong{color:var(--green2)}

/* ── VIEWS / TABS ── */
.view{display:none}.view.active{display:block}
.wrap{padding:15px 16px;max-width:820px;margin:0 auto}
.nav-tabs{display:flex;gap:2px;background:var(--s1);border:1px solid var(--border);border-radius:var(--rs);padding:3px;margin-bottom:15px;overflow-x:auto;scrollbar-width:none}
.nav-tabs::-webkit-scrollbar{display:none}
/* Bottom tab bar earner (mobile ≤700px, vedi media query più sotto): nascosta
   di default, sostituisce .nav-tabs in cima quando lo schermo è stretto —
   raggiungibile col pollice invece che in alto. */
.bottom-nav{display:none}
.bnav-btn{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;border:none;background:transparent;color:var(--muted);font-family:var(--ff);cursor:pointer;border-radius:10px;transition:color 0.2s,background-color 0.2s;min-width:0}
.bnav-btn .bnav-lb{font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bnav-ic{font-size:19px;line-height:1;transition:transform 0.25s cubic-bezier(.4,0,.2,1)}
/* ── ICON SET (2026-07-12): sostituite le 10 emoji strutturali (bottom-nav +
   topbar) con SVG custom in stile "diamond-cut" — stroke coerente con la
   geometria del logo, giunzioni arrotondate (il logo ha già gli spigoli
   smussati). currentColor: eredita il colore già gestito da CSS/inline
   esistente (nessuna nuova regola di colore necessaria). display:block
   sugli span evita il gap da baseline tipico delle emoji inline. */
.bnav-ic svg,.streak-flame svg,.notif-btn svg{display:block}
.notif-btn{gap:0}
/* Indicatore attivo: barretta in alto che "cresce" dal centro quando la tab
   diventa attiva (transizione scaleX), + micro-lift dell'icona. Reduced-motion
   neutralizzato dalla regola globale a inizio file. */
.bnav-btn::before{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%) scaleX(0);width:22px;height:3px;border-radius:3px;background:var(--green2);transition:transform 0.25s cubic-bezier(.4,0,.2,1)}
.bnav-btn.active::before{transform:translateX(-50%) scaleX(1)}
.bnav-btn.active .bnav-ic{transform:translateY(-1px)}
.bnav-btn.active{color:var(--green2);background:rgba(61,232,152,0.1)}
.ntab{flex:1;padding:7px 6px;border-radius:6px;font-size:10.5px;font-weight:700;text-align:center;cursor:pointer;color:var(--muted);transition:all 0.2s;border:none;background:transparent;font-family:var(--ff);white-space:nowrap;min-width:0}
.ntab.active{background:var(--s2);color:var(--text);border:1px solid var(--border2);box-shadow:0 1px 4px rgba(0,0,0,0.25)}
.tab-pane{display:none;animation:paneIn 0.30s cubic-bezier(.2,.8,.25,1)}.tab-pane.active{display:block}
@keyframes paneIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes valPulse{0%{transform:scale(1)}28%{transform:scale(1.16)}100%{transform:scale(1)}}
.val-pulse{animation:valPulse .46s cubic-bezier(.2,.8,.25,1)}
/* AUDIT-FIX (2026-07-26): qui c'era una PRIMA definizione di @keyframes fadeIn
   (translateY 4px). Più in basso, nella sezione FLUIDITÀ, ce n'è una seconda con
   lo stesso nome (6px + translateZ): in CSS l'ultima definizione omonima sostituisce
   interamente la precedente, quindi questa non ha MAI avuto effetto. Rimossa perché
   il vero rischio non era l'animazione sbagliata ma il prossimo che, per cambiarla,
   avrebbe modificato la copia morta senza vedere nulla cambiare. */

/* ── CARDS ── */
.card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;transition:border-color 0.2s}
/* Card CTA (verde/oro): stesso .card ma con più presenza — usate per le azioni
   primarie (Home "Da scoprire oggi"/"Potenziale giornaliero", Guadagni "Bonus e
   premi", Brand "CPA medio") che devono distinguersi dalle card puramente
   informative. Bordo più marcato + wash di colore leggero in alto. */
.card-green{border-color:rgba(46,194,126,0.32);background:linear-gradient(160deg,rgba(46,194,126,0.06),var(--s1) 65%)}
.card-gold{border-color:rgba(233,196,78,0.32);background:linear-gradient(160deg,rgba(233,196,78,0.07),var(--s1) 65%)}
.card-blue{border-color:rgba(74,159,255,0.18)}
.card-purple{border-color:rgba(167,139,250,0.18)}
/* Card subordinata: stesso .card ma "piatta" — per contenitori che raggruppano
   righe già bordate di loro (.inline-row, righe pendingVerifs) dove il doppio
   bordo (card + riga) era ridondante e appesantiva la gerarchia della Home. */
.card-sub{background:transparent;border-color:transparent}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.mb12{margin-bottom:12px}
.slbl{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
/* AUDIT-FIX (2026-07-26): rimossa .divider, orfana. Nel markup esistono solo
   .about-divider e .auth-divider, che sono classi distinte con regole proprie:
   `class="divider"` non compare da nessuna parte. */

/* ── HERO STATS ── */
/* Platform filter strip — pill moderne con icon gradient */
.plat-strip-wrap{position:relative;margin:0 -2px 10px}
.plat-strip{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.plat-strip-wrap::after{content:"";position:absolute;top:0;right:0;bottom:10px;width:36px;background:linear-gradient(90deg,rgba(7,7,13,0) 0%,rgba(7,7,13,0.85) 70%,rgba(7,7,13,1) 100%);pointer-events:none;border-radius:0 var(--rs) var(--rs) 0;opacity:1;transition:opacity 0.2s}
html[data-theme="light"] .plat-strip-wrap::after{background:linear-gradient(90deg,rgba(247,247,251,0) 0%,rgba(247,247,251,0.9) 70%,rgba(247,247,251,1) 100%)}
.plat-strip-wrap.at-end::after{opacity:0}
.plat-strip-arrow{position:absolute;top:50%;right:2px;transform:translateY(-60%);width:26px;height:26px;border-radius:50%;border:1px solid var(--border2);background:var(--s2);color:var(--text);font-size:18px;font-weight:800;font-family:var(--fm);line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,0.25);z-index:2;animation:platArrowNudge 1.6s ease-in-out infinite;transition:opacity 0.2s,transform 0.15s}
.plat-strip-arrow:hover{transform:translateY(-60%) scale(1.08)}
.plat-strip-arrow:active{transform:translateY(-60%) scale(0.92)}
.plat-strip-wrap.at-end .plat-strip-arrow{opacity:0;pointer-events:none}
@keyframes platArrowNudge{0%,100%{margin-right:0}50%{margin-right:4px}}
.plat-strip::-webkit-scrollbar{display:none}
.plat-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 7px;background:var(--s2);border:1px solid var(--border);border-radius:999px;cursor:pointer;font:700 12px/1 var(--ff,inherit);color:var(--text2);transition:all 0.22s cubic-bezier(.2,.8,.25,1);scroll-snap-align:start;white-space:nowrap;position:relative}
.plat-pill:hover{border-color:var(--border2);color:var(--text);transform:translateY(-1px)}
.plat-pill.active{background:linear-gradient(135deg,var(--s3),var(--s2));border-color:var(--green2);color:var(--text);box-shadow:0 4px 14px rgba(46,194,126,0.22),inset 0 0 0 1px rgba(61,232,152,0.25)}
.plat-pill .plat-ic{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.25);letter-spacing:-0.5px}
.plat-pill.active .plat-ic{box-shadow:0 0 0 2px rgba(61,232,152,0.5),0 4px 12px rgba(0,0,0,0.4)}
.plat-pill .plat-lb{letter-spacing:-0.2px}
html[data-theme="light"] .plat-pill{background:#fff;color:#1a1a2e}
html[data-theme="light"] .plat-pill.active{background:linear-gradient(135deg,#fff,#f0fff6);box-shadow:0 4px 14px rgba(46,194,126,0.2)}

/* Piatta di default: sono numeri di consultazione (Incoin/Euro/Task/Livello),
   non azioni — devono restare "ambiente" e non competere con le card CTA
   (.card-green/.card-gold) sopra. border:transparent (non "none") per lasciare
   funzionare l'override .neon-on che imposta solo border-color/width. */
.hero-stat{background:var(--s2);border-radius:var(--rs);padding:12px;text-align:center;border:1px solid var(--border);transition:all 0.2s;color:var(--text);font:inherit;cursor:pointer}
.hero-stat:hover{background:var(--s3);border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
button.hero-stat{appearance:none;-webkit-appearance:none}
.hero-val{font-size:19px;font-weight:800;font-family:var(--fm);line-height:1;margin:4px 0}
.streak-pill{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#ff8c42,#ff5a36);color:#fff;border:none;border-radius:999px;padding:6px 11px 6px 9px;font-family:var(--fm);box-shadow:0 3px 8px rgba(255,90,54,0.32);cursor:pointer;line-height:1;outline:none;transition:transform 0.15s,box-shadow 0.15s}
.streak-pill:hover{transform:scale(1.05);box-shadow:0 5px 12px rgba(255,90,54,0.45)}
.streak-pill:active{transform:scale(0.95)}
.streak-pill .streak-flame{font-size:14px;filter:drop-shadow(0 0 4px rgba(255,180,80,0.6));animation:streakFlick 1.6s ease-in-out infinite;line-height:1}
.streak-pill.streak-off{background:linear-gradient(135deg,#5a5a6a,#3e3e4a);box-shadow:none;color:var(--text2)}
.streak-pill.streak-off .streak-flame{animation:none;filter:grayscale(0.8) opacity(0.6)}
@keyframes streakFlick{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.08)}}
.streak-modal-row{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);font-size:12px;margin-bottom:6px;gap:8px}
.streak-modal-row.curr{background:linear-gradient(135deg,rgba(255,140,66,0.16),rgba(255,90,54,0.10));border-color:rgba(255,140,66,0.45)}
.streak-modal-row.done{opacity:0.55}
/* Barra "obiettivo" (streak giornaliero) — stesso trattamento glow di .xp-fill. */
.streak-bar{height:8px;background:var(--s1);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.streak-bar-fill{height:100%;background:linear-gradient(90deg,#ff8c42,#ff5a36);transition:width 0.4s ease;box-shadow:0 0 6px rgba(255,140,66,0.4)}
.hero-lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}

/* ── DISCOVER CARDS ── */
.disc-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.disc-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:14px;transition:all 0.22s;position:relative;overflow:hidden;cursor:pointer;margin-bottom:9px}
.disc-card:hover:not(.done){border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
.disc-card.done{opacity:0.45}
.disc-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;border-radius:3px 0 0 3px}
.disc-card.ig-c::before{background:linear-gradient(180deg,#e56aa5,#f77737)}
.disc-card.tt-c::before{background:#fff}
.disc-card.yt-c::before{background:#ff5555}
.disc-card.done::before{background:var(--muted)}
/* Chip di ordinamento feed Discover (consigliati/compenso/nuovi) */
.sort-chip{flex:1;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--s2);color:var(--text2);font-size:10.5px;font-weight:700;font-family:var(--ff);cursor:pointer;white-space:nowrap;transition:all 0.2s}
.sort-chip:hover{border-color:var(--border2)}
.sort-chip.active{background:var(--green3);border-color:rgba(46,194,126,0.4);color:var(--green2)}
.sort-chip:active{transform:scale(0.97)}

/* tipo azione */
.action-type{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:3px 8px;border-radius:10px;letter-spacing:0.3px;text-transform:uppercase;margin-bottom:6px;flex-shrink:0}
/* Righe orizzontali scrollabili (legenda tipi Discover, ecc.): fade sul bordo
   destro invece di un taglio netto, per segnalare "scorri" senza una freccia. */
.scroll-fade-r{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 92%,transparent 100%)}
.at-watch{background:rgba(74,159,255,0.12);color:var(--blue);border:1px solid rgba(74,159,255,0.2)}
.at-comment{background:rgba(167,139,250,0.12);color:var(--purple);border:1px solid rgba(167,139,250,0.2)}
.at-ugc{background:rgba(232,69,140,0.12);color:var(--pink);border:1px solid rgba(232,69,140,0.2)}
.at-referral{background:rgba(46,194,126,0.12);color:var(--green2);border:1px solid rgba(46,194,126,0.2)}

.disc-title{font-size:13px;font-weight:700;margin:4px 0;line-height:1.3;overflow-wrap:anywhere}
.xp-mini{font-size:9px;color:var(--muted);font-family:var(--fm);margin-left:7px;font-weight:700;white-space:nowrap}
.disc-desc{font-size:11px;color:var(--text2);margin-bottom:10px;line-height:1.55}
.disc-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.disc-footer .btn{white-space:nowrap;flex-shrink:0}
.reward-pill{display:flex;align-items:center;gap:4px;min-width:0;flex-wrap:nowrap}
.coin-badge{background:rgba(233,196,78,0.1);color:var(--gold);border:1px solid rgba(233,196,78,0.22);font-size:10px;padding:3px 8px;border-radius:10px;font-family:var(--fm);font-weight:700}
.eur-badge{background:rgba(46,194,126,0.1);color:var(--green2);border:1px solid rgba(46,194,126,0.22);font-size:10px;padding:3px 8px;border-radius:10px;font-family:var(--fm);font-weight:700}
.diff{font-size:9px;padding:2px 7px;border-radius:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.d-easy{background:rgba(46,194,126,0.1);color:var(--green2)}
.d-med{background:rgba(233,196,78,0.1);color:var(--gold)}
.d-hard{background:rgba(224,85,85,0.1);color:var(--red-text)}

/* ── PLATFORM TAGS ── */
.platform-tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:3px 9px;border-radius:10px;font-weight:700;margin-right:3px}
.ig{background:rgba(214,56,128,0.12);color:#e56aa5;border:1px solid rgba(214,56,128,0.22)}
.tt{background:rgba(255,255,255,0.07);color:#fff;border:1px solid rgba(255,255,255,0.14)}
.yt{background:rgba(255,0,0,0.1);color:#ff5555;border:1px solid rgba(255,0,0,0.2)}
.sp{background:rgba(29,185,84,0.12);color:#1db954;border:1px solid rgba(29,185,84,0.25)}
.tw{background:rgba(145,71,255,0.12);color:#9147ff;border:1px solid rgba(145,71,255,0.25)}
.pi{background:rgba(230,0,35,0.1);color:#e60023;border:1px solid rgba(230,0,35,0.22)}
.li{background:rgba(10,102,194,0.12);color:#0a66c2;border:1px solid rgba(10,102,194,0.25)}
.nl{background:rgba(255,103,0,0.1);color:#ff6700;border:1px solid rgba(255,103,0,0.22)}
.disc-card.sp-c::before{background:#1db954}
.disc-card.tw-c::before{background:#9147ff}
.disc-card.pi-c::before{background:#e60023}
.disc-card.li-c::before{background:#0a66c2}
.disc-card.nl-c::before{background:linear-gradient(180deg,#ff6700,#e9c44e)}

/* ── BUTTONS ── */
.btn{background:var(--s2);border:1px solid var(--border);color:var(--text);padding:9px 14px;border-radius:var(--rs);font-family:var(--ff);font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:all 0.2s;min-width:0;max-width:100%;white-space:normal;word-break:break-word;line-height:1.2;text-align:center}
.btn > span{flex-shrink:0}
.btn.full{width:100%}
button,.btn{box-sizing:border-box}
.btn:hover{background:var(--s3);border-color:var(--border2)}
.btn:active{transform:scale(0.97)}
.btn.full{width:100%;justify-content:center}
.btn.green{border-color:rgba(46,194,126,0.3);color:var(--green2)}.btn.green:hover{background:var(--green3)}
.btn.gold{border-color:rgba(233,196,78,0.3);color:var(--gold)}.btn.gold:hover{background:var(--gold2)}
.btn.blue{border-color:rgba(74,159,255,0.3);color:var(--blue)}.btn.blue:hover{background:var(--blue2)}
.btn.purple{border-color:rgba(167,139,250,0.3);color:var(--purple)}.btn.purple:hover{background:var(--purple2)}
.btn.pink{border-color:rgba(232,69,140,0.3);color:var(--pink)}.btn.pink:hover{background:var(--pink2)}
.btn.red{border-color:rgba(224,85,85,0.3);color:var(--red-text)}.btn.red:hover{background:rgba(224,85,85,0.07)}
.btn.cta{background:linear-gradient(135deg,var(--green),#1a9e5c);color:#07070d;border:none;font-size:14px;padding:13px 20px;border-radius:11px;box-shadow:0 4px 14px rgba(46,194,126,0.25)}
.btn.cta:hover{opacity:0.88;box-shadow:0 6px 20px rgba(46,194,126,0.35)}
.btn.cta-blue{background:linear-gradient(135deg,var(--blue),#1a5fa3);color:#fff;border:none;font-size:14px;padding:13px 20px;border-radius:11px;box-shadow:0 4px 14px rgba(74,159,255,0.22)}
.btn.cta-blue:hover{opacity:0.88}
.mb7{margin-bottom:7px}

/* ── LEVEL / XP ── */
.lvl-wrap{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.lvl-ring{width:56px;height:56px;border-radius:50%;border:2px solid var(--green);display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--s2);flex-shrink:0;animation:glow 3s ease-in-out infinite alternate}
@keyframes glow{from{box-shadow:0 0 0 0 rgba(46,194,126,0)}to{box-shadow:0 0 0 8px rgba(46,194,126,0.08)}}
/* Barra "obiettivo" (livello/XP: un traguardo verso cui l'utente avanza
   attivamente) — gradiente + glow, per distinguerla dalle barre "statistica"
   puramente descrittive (es. .camp-prog-fill) che restano piatte e senza glow. */
.xp-bar{height:5px;background:var(--s2);border-radius:3px;overflow:hidden;margin:5px 0}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--cyan));border-radius:3px;transition:width 0.9s ease;box-shadow:0 0 6px rgba(61,232,152,0.45)}
.xp-meta{display:flex;justify-content:space-between;font-size:9px;font-family:var(--fm);color:var(--muted)}
.lv-row{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--s2);border-radius:var(--rs);border:1px solid var(--border);margin-bottom:5px;transition:all 0.2s}
.lv-row.cur{border-color:rgba(46,194,126,0.35);background:rgba(46,194,126,0.04)}
.lv-row.locked{opacity:0.3}
.cur-pill{font-size:9px;padding:2px 7px;border-radius:10px;font-weight:700;background:rgba(46,194,126,0.12);color:var(--green2);border:1px solid rgba(46,194,126,0.22)}

/* ── BADGES ── */
.badges-g{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}
/* Tooltip generico per badge e altri elementi con data-tip */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:#07070d;color:#eaeaf2;font-size:11px;font-weight:500;padding:7px 10px;border-radius:8px;white-space:normal;max-width:220px;width:max-content;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.12);pointer-events:none;opacity:0;transition:opacity 0.18s ease,transform 0.18s ease;z-index:500;text-align:center}
[data-tip]::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%) translateY(4px);border:5px solid transparent;border-top-color:#07070d;opacity:0;transition:opacity 0.18s ease,transform 0.18s ease;pointer-events:none;z-index:500}
[data-tip]:hover::after,[data-tip]:focus-visible::after,
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;transform:translateX(-50%) translateY(0)}
html[data-theme="light"] [data-tip]::after{background:#0c0c14;color:#f7f7fb;border-color:rgba(0,0,0,0.3)}
html[data-theme="light"] [data-tip]::before{border-top-color:#0c0c14}
.badge-item{background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:10px 6px;text-align:center;transition:all 0.2s}
.badge-item.earned{border-color:rgba(233,196,78,0.3);background:rgba(233,196,78,0.04)}
/* Rottura simmetria (2026-07-12): griglia perfetta = altro tratto da mockup IA.
   Leggerissima rotazione solo sui badge SBLOCCATI (mai sui locked, che devono
   restare "in fila" come obiettivo neutro) — si raddrizza in hover per non
   sembrare un bug. nth-child(3n) tiene l'effetto sporadico, non su ogni tile. */
.badge-item.earned:nth-child(3n){transform:rotate(-1.4deg)}
.badge-item.earned:nth-child(5n){transform:rotate(1.1deg)}
.badge-item.earned:hover{transform:none}
.badge-item.locked{opacity:0.25;filter:grayscale(1)}
.bi-icon{font-size:18px;margin-bottom:3px}
.bi-name{font-size:9px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:0.3px}

/* ── WALLET ── */
.inp{background:var(--s3);border:1px solid var(--border2);color:var(--text);padding:9px 12px;border-radius:var(--rs);font-size:13px;font-family:var(--fm);font-weight:500;outline:none;transition:all 0.2s;width:100%}
.inp:focus{border-color:rgba(46,194,126,0.4);box-shadow:0 0 0 3px rgba(46,194,126,0.07)}
.inp::placeholder{color:var(--muted)}
.tx-item{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--s2);border-radius:var(--rs);border:1px solid var(--border);margin-bottom:6px;transition:border-color 0.2s}
.tx-item:hover{border-color:var(--border2)}
.tx-lbl{font-size:12px;font-weight:700}
.tx-time{font-size:9px;color:var(--muted);font-family:var(--fm);margin-top:1px}
.tx-pos{font-size:13px;font-weight:800;font-family:var(--fm);color:var(--green2)}
.tx-neg{font-size:13px;font-weight:800;font-family:var(--fm);color:var(--red-text)}

/* ── NOTIF ── */
.notif-item{display:flex;gap:10px;padding:10px 12px;background:var(--s2);border-radius:var(--rs);border:1px solid var(--border);margin-bottom:6px;transition:all 0.2s}
.notif-item.unread{border-left:2px solid var(--green)}
.notif-item.nf-gold{border-left-color:var(--gold)}
.notif-item.nf-purple{border-left-color:var(--purple)}
.notif-item.nf-pink{border-left-color:var(--pink)}
.ni-icon{font-size:14px;width:20px;flex-shrink:0;margin-top:1px}
.ni-del{background:transparent;border:1px solid transparent;color:var(--muted);width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:700;flex-shrink:0;align-self:flex-start;transition:all 0.2s;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--ff)}
.ni-del:hover{background:rgba(255,107,107,0.12);border-color:rgba(255,107,107,0.35);color:var(--red-text)}

/* Empty states illustrati */
.empty-illu{padding:28px 16px;text-align:center;background:var(--s2);border:1px dashed var(--border2);border-radius:var(--rs)}
.empty-illu-icon{font-size:38px;margin-bottom:8px;opacity:0.55;filter:grayscale(0.2)}
.empty-illu-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:3px}
.empty-illu-sub{font-size:11px;color:var(--muted);line-height:1.5;max-width:260px;margin:0 auto}
.empty-illu-cta{margin-top:10px;display:inline-flex}

/* Custom modal (rimpiazza prompt/alert/confirm nativi) */
.cmod-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.cmod-overlay.show{display:flex;animation:fadeIn 0.2s ease}
.cmod{background:var(--s1);border:1px solid var(--border2);border-radius:16px;padding:20px;max-width:440px;width:100%;box-shadow:var(--shadow);animation:slideUp 0.25s ease}
.cmod-title{font-size:16px;font-weight:800;margin-bottom:6px;color:var(--text)}
.cmod-sub{font-size:12px;color:var(--text2);line-height:1.55;margin-bottom:14px}
.cmod-input{width:100%;background:var(--s2);border:1px solid var(--border2);color:var(--text);padding:10px 12px;border-radius:9px;font-family:var(--ff);font-size:13px;box-sizing:border-box;resize:vertical}
.cmod-input:focus{outline:none;border-color:var(--green)}
.cmod-counter{font-size:10px;color:var(--muted);text-align:right;margin-top:4px}
.cmod-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
.cmod-btn{padding:9px 16px;border-radius:9px;font-family:var(--ff);font-weight:700;font-size:12px;cursor:pointer;border:1px solid var(--border2);background:var(--s2);color:var(--text)}
.cmod-btn.primary{background:var(--green);color:#07070d;border-color:var(--green)}
.cmod-btn.danger{background:var(--red);color:#fff;border-color:var(--red)}
.cmod-btn:disabled{opacity:0.4;cursor:not-allowed}
/* AUDIT-FIX (2026-07-26): idem per @keyframes slideUp — la definizione viva è
   quella nella sezione FLUIDITÀ (18px + scale 0.97 + translateZ), che sostituisce
   questa. I valori differivano, quindi l'animazione reale dei modali non è mai
   stata quella scritta qui. Rimossa. */

/* Offline banner */
.offline-bar{position:fixed;top:0;left:0;right:0;background:var(--orange,#ff9f4a);color:#07070d;font-size:12px;font-weight:800;text-align:center;padding:6px 12px;z-index:400;transform:translateY(-100%);transition:transform 0.3s;font-family:var(--ff)}
.offline-bar.show{transform:translateY(0)}
.ni-title{font-size:12px;font-weight:700}
.ni-body{font-size:10px;color:var(--text2);margin-top:2px}
.ni-time{font-size:9px;color:var(--muted);font-family:var(--fm);margin-top:2px}

/* ── BRAND / CAMPAGNE ── */
.fin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px}
.fstat{background:var(--s2);border-radius:var(--rs);padding:11px;text-align:center;border:1px solid var(--border)}
.fstat-val{font-size:17px;font-weight:800;font-family:var(--fm)}
.fstat-lbl{font-size:9px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:0.3px}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:13px}
.pkg{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:14px;text-align:center;cursor:pointer;transition:all 0.22s;position:relative}
.pkg:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
.pkg.selected{border-color:var(--blue);background:rgba(74,159,255,0.05)}
.pkg.popular{border-color:var(--green)}
.pop-label{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--green);color:#07070d;font-size:9px;padding:2px 10px;border-radius:10px;font-weight:800;white-space:nowrap;text-transform:uppercase;letter-spacing:0.5px}
.pkg-name{font-size:13px;font-weight:700;margin:5px 0 3px}
.pkg-price{font-size:22px;font-weight:800;font-family:var(--fm);color:var(--blue)}
.pkg-price span{font-size:11px;color:var(--muted);font-weight:400}
.pkg-features{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.pkg-features li{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:5px;justify-content:center}
.pkg-features li::before{content:'✓';color:var(--green2);font-size:9px;font-weight:700}
.camp-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:13px;margin-bottom:9px;transition:all 0.2s}
.camp-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.camp-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px}
.camp-name{font-size:13px;font-weight:700}
.camp-platform{font-size:10px;color:var(--text2);margin-top:2px}
.camp-status{font-size:9px;padding:3px 8px;border-radius:10px;font-weight:700;text-transform:uppercase}
/* AUDIT-FIX (2026-07-24): rimosse .st-active/.st-ended/.st-scheduled — badge di
   stato campagna mai applicati da nessun markup (verificato in html/js/blog). */
.skel{display:inline-block;background:linear-gradient(90deg,var(--s2) 0%,var(--s3) 50%,var(--s2) 100%);background-size:200% 100%;animation:skel-shimmer 1.2s ease-in-out infinite;border-radius:6px;color:transparent !important;min-width:36px}
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ap-chip{font-size:11px;font-weight:700;padding:6px 12px;border-radius:14px;background:var(--s2);color:var(--text2);border:1px solid var(--border);cursor:pointer;font-family:inherit;transition:background 0.15s,color 0.15s,border-color 0.15s}
.ap-chip:hover{background:var(--s3)}
.ap-chip.is-on{background:rgba(46,194,126,0.14);color:var(--green2);border-color:rgba(46,194,126,0.35)}
.camp-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}
.cm{background:var(--s3);border-radius:6px;padding:7px;text-align:center}
.cm-val{font-size:13px;font-weight:800;font-family:var(--fm)}
.cm-lbl{font-size:9px;color:var(--muted);margin-top:1px;text-transform:uppercase;letter-spacing:0.3px}
/* Barra "statistica" (avanzamento delivery campagna: un dato che descrive lo
   stato attuale, non un traguardo dell'utente) — colore piatto, niente
   gradiente/glow, per leggersi come readout invece che come progresso verso
   un obiettivo (vedi .xp-fill/.streak-bar-fill sopra). */
.camp-progress{height:4px;background:var(--s3);border-radius:3px;margin-top:9px}
.camp-prog-fill{height:100%;background:var(--blue);border-radius:3px;transition:width 0.5s}
.budget-box{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:15px;margin-bottom:11px}
.range-inp{width:100%;margin:9px 0;accent-color:var(--blue)}
.sel{background:var(--s3);border:1px solid var(--border2);color:var(--text);padding:8px 12px;border-radius:var(--rs);font-size:12px;font-family:var(--ff);font-weight:600;outline:none;width:100%;margin-bottom:11px;transition:border-color 0.2s}
.sel:focus{border-color:rgba(46,194,126,0.4)}

/* ── TIPO CAMPAGNA SELECTOR ── */
.camp-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:13px}
.plat-btn{padding:8px 10px;font-size:11px;min-width:0}
.plat-btn .plat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;text-align:left}
.plat-btn .platform-tag{pointer-events:none;flex-shrink:0}
.camp-type-btn{min-width:0;overflow:hidden}
.ct-name,.ct-desc,.ct-legal{overflow:hidden;text-overflow:ellipsis}
.ct-desc{white-space:normal;word-break:break-word}
.nav-tabs{min-width:0}
.ntab{overflow:hidden;text-overflow:ellipsis}
.wrap,.card{min-width:0}
@media(max-width:480px){
  .plat-grid{grid-template-columns:repeat(auto-fill,minmax(106px,1fr))!important}
  .plat-btn{font-size:10px;padding:7px 8px}
  .btn{font-size:11px;padding:8px 11px}
  /* UI-FIX (2026-07): sulle card Discover a 2 colonne (~180px) la riga compenso dei
     task alti (◈4000 · €40,00) toccava il bottone Inizia: lasciala andare a capo. */
  .disc-footer{flex-wrap:wrap}
  .reward-pill{flex-wrap:wrap;row-gap:3px}
}
.camp-type-btn{background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:11px;cursor:pointer;transition:all 0.2s;text-align:left}
.camp-type-btn:hover{border-color:var(--border2)}
.camp-type-btn.selected{border-color:rgba(74,159,255,0.5);background:rgba(74,159,255,0.05)}
.ct-icon{font-size:16px;margin-bottom:4px}
.ct-name{font-size:11px;font-weight:700;margin-bottom:2px}
.ct-desc{font-size:9px;color:var(--muted);line-height:1.4}
.ct-legal{font-size:9px;color:var(--green2);margin-top:4px;font-weight:600}

/* ── AI SECTION ── */
.ai-box{background:linear-gradient(135deg,rgba(167,139,250,0.06),rgba(232,69,140,0.04));border:1px solid rgba(167,139,250,0.18);border-radius:var(--r);padding:15px;margin-bottom:12px}
.ai-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ai-icon{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--purple),var(--pink));display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.ai-lbl{font-size:12px;font-weight:700;color:var(--purple)}
.ai-out{font-size:12px;color:var(--text2);line-height:1.7;min-height:36px}
.ai-out.loading{color:rgba(167,139,250,0.6);font-style:italic}

/* ── TOAST ── */
.toast-stack{position:fixed;top:62px;right:14px;width:270px;display:flex;flex-direction:column;gap:6px;z-index:200;pointer-events:none}
.toast{background:var(--s2);border:1px solid var(--border2);padding:10px 13px;border-radius:var(--r);font-size:12px;opacity:0;transform:translateX(24px);transition:all 0.32s cubic-bezier(.23,1,.32,1);pointer-events:auto;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(0)}
.toast-t{font-weight:700;margin-bottom:2px}
.toast-b{font-size:10px;color:var(--text2);font-family:var(--fm)}
.toast.tg .toast-t{color:var(--green2)}
.toast.to .toast-t{color:var(--gold)}
.toast.tb .toast-t{color:var(--blue)}
.toast.tp .toast-t{color:var(--purple)}
.toast.tpk .toast-t{color:var(--pink)}
.toast.tr .toast-t{color:var(--red-text)}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity 0.25s}
.modal-overlay.show{opacity:1;pointer-events:all}
.modal{background:var(--s1);border:1px solid rgba(46,194,126,0.22);border-radius:18px;padding:24px;max-width:380px;width:92%;transform:scale(0.9) translateY(10px) translateZ(0);transition:transform 0.25s cubic-bezier(.34,1.56,.64,1)}
.modal-overlay.show .modal{transform:scale(1) translateY(0) translateZ(0)}
.modal-title{font-size:18px;font-weight:800;margin-bottom:6px}
.modal-sub{font-size:12px;color:var(--text2);margin-bottom:12px;line-height:1.55}
.modal-legal{background:rgba(61,232,152,0.06);border:1px solid rgba(61,232,152,0.15);border-radius:8px;padding:9px 12px;margin-bottom:13px;font-size:10px;color:var(--text2);line-height:1.5}
.modal-legal strong{color:var(--green2)}
.modal-reward{font-family:var(--fm);font-size:34px;font-weight:800;text-align:center;margin:10px 0 4px}
.modal-btns{display:flex;gap:9px;margin-top:12px}
.modal-cancel{flex:1;padding:11px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:var(--ff);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s}
.modal-cancel:hover{background:var(--s2)}
.modal-confirm{flex:1;padding:11px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--green),#1a9e5c);color:#07070d;font-family:var(--ff);font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 3px 10px rgba(46,194,126,0.25)}
.modal-confirm:hover{opacity:0.88}

/* ── MISC ── */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-title{font-size:14px;font-weight:800;letter-spacing:-0.2px}
.pill{font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;border:1px solid}
.pill-green{background:rgba(46,194,126,0.1);color:var(--green2);border-color:rgba(46,194,126,0.22)}
/* Empty-state illustrati: mark brand sfumato sopra il testo (coerente ovunque) */
.empty{font-size:12.5px;color:var(--muted);text-align:center;padding:30px 16px;display:flex;flex-direction:column;align-items:center;gap:11px;line-height:1.55}
.empty::before{content:"";width:50px;height:50px;flex-shrink:0;background:url("ingain-logo.svg") center/contain no-repeat;opacity:0.33}
@media(prefers-reduced-motion:no-preference){.empty::before{animation:emptyFloat 3.6s ease-in-out infinite}}
@keyframes emptyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.inline-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--s2);border-radius:var(--rs);margin-bottom:6px;border:1px solid var(--border);transition:border-color 0.2s}
.inline-row:hover{border-color:var(--border2)}

/* ── SPOTIFY GENRE FILTER ── */
.genre-strip{display:none;flex-wrap:wrap;gap:5px;margin-bottom:11px;padding:10px 12px;background:rgba(29,185,84,0.05);border:1px solid rgba(29,185,84,0.18);border-radius:var(--rs);animation:fadeIn 0.2s ease}
.genre-strip.show{display:flex}
.genre-btn{padding:4px 12px;border-radius:20px;font-size:10px;font-weight:700;font-family:var(--ff);cursor:pointer;border:1px solid rgba(29,185,84,0.25);background:transparent;color:rgba(29,185,84,0.7);transition:all 0.2s}
.genre-btn:hover{border-color:rgba(29,185,84,0.55);color:#1db954}
.genre-btn.sel{background:rgba(29,185,84,0.12);border-color:#1db954;color:#1db954}
/* AUDIT-FIX (2026-07-26): qui c'era `.sp-c::before{background:#1db954!important}`.
   Era (a) ridondante — `.disc-card.sp-c::before` poco sopra imposta già lo stesso
   colore per il desktop — e (b) dannosa: non essendo scoped a `.disc-card`, con
   `!important` batteva `html.ui-earner .disc-card.sp-c::before`, che nel redesign
   mobile trasforma quello pseudo-elemento nel riquadro icona col gradiente. Le
   card Spotify a ≤700px mostravano quindi un box verde piatto invece del
   gradiente — ed è il gruppo più numeroso del catalogo (8 task su 25). Rimossa:
   il desktop resta identico grazie alla regola scoped già esistente. */
/* ── COIN SHOP ── */
.shop-hero{background:linear-gradient(135deg,rgba(233,196,78,0.08),rgba(255,140,66,0.05));border:1px solid rgba(233,196,78,0.2);border-radius:var(--r);padding:16px;margin-bottom:13px;position:relative;overflow:hidden}
.shop-hero::after{content:'◈';position:absolute;right:-8px;top:-8px;font-size:80px;opacity:0.05;font-family:var(--fm)}
.shop-coin-balance{font-size:36px;font-weight:800;font-family:var(--fm);color:var(--gold);line-height:1;margin:8px 0 3px}
.shop-coin-sub{font-size:11px;color:var(--muted)}
.cooldown-bar{background:var(--s2);border:1px solid rgba(255,140,66,0.2);border-radius:var(--r);padding:14px;margin-bottom:12px}
.cd-title{font-size:13px;font-weight:800;margin-bottom:3px;display:flex;align-items:center;gap:7px}
.cd-sub{font-size:11px;color:var(--text2);margin-bottom:11px;line-height:1.5}
.cd-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--s3);border-radius:var(--rs);margin-bottom:7px;border:1px solid var(--border)}
.cd-info{display:flex;align-items:center;gap:9px}
.cd-skip{font-size:11px;font-weight:700;padding:5px 13px;border-radius:8px;border:1px solid rgba(255,140,66,0.35);background:rgba(255,140,66,0.07);color:var(--orange);cursor:pointer;font-family:var(--fm);transition:all 0.2s;white-space:nowrap}
.cd-skip:hover{background:rgba(255,140,66,0.15)}
.cd-skip:disabled{opacity:0.4;cursor:not-allowed}
.voucher-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.voucher-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all 0.22s;cursor:pointer;position:relative}
.voucher-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
.voucher-card.affordable{border-color:rgba(233,196,78,0.3)}
.voucher-card.affordable:hover{border-color:var(--gold)}
.voucher-icon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 7px}
.voucher-name{font-size:12px;font-weight:800;margin-bottom:2px}
.voucher-desc{font-size:10px;color:var(--muted);margin-bottom:9px;line-height:1.4}
.voucher-cost{font-size:13px;font-weight:800;font-family:var(--fm);color:var(--gold)}
.voucher-badge{position:absolute;top:-7px;right:10px;background:var(--gold);color:#07070d;font-size:8px;font-weight:800;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.4px}
/* ── POLISH · micro-interazioni coerenti sui bottoni bespoke (non-.btn) e link.
   Usa transform/filter/box-shadow (non sovrascritti dagli stili inline) così
   l'hover funziona anche dove background/border sono inline. ── */
.cmini{transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.cmini:hover{filter:brightness(1.12)}
.cmini:active{transform:scale(.96)}
.voucher-wish{transition:transform .15s ease,color .15s ease;border-radius:50%}
.voucher-wish:hover{transform:scale(1.28)}
.voucher-wish:active{transform:scale(1.05)}
.fiscal-link{transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.fiscal-link:hover{filter:brightness(1.08);transform:translateX(2px);box-shadow:0 3px 14px rgba(0,0,0,.16)}
@media (prefers-reduced-motion:reduce){.cmini,.voucher-wish,.fiscal-link{transition:none}.cmini:hover,.voucher-wish:hover,.fiscal-link:hover{transform:none}}
/* ── SKELETON LOADERS · placeholder shimmer durante le query Supabase (js/sync.js) ── */
.skel-wrap{display:flex;flex-direction:column;gap:8px}
.skel-row{border-radius:8px;background:linear-gradient(100deg,var(--s2) 30%,var(--s3) 50%,var(--s2) 70%);background-size:200% 100%;animation:skelShimmer 1.2s ease-in-out infinite}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel-row{animation:none;opacity:.55}}
/* ── EARNINGS INFO (GUADAGNI) ── */
.earn-hero{background:linear-gradient(135deg,rgba(61,232,152,0.08),rgba(0,212,255,0.06));border:1px solid rgba(61,232,152,0.18);border-radius:var(--r);padding:18px;margin-bottom:13px;position:relative;overflow:hidden}
.earn-hero::after{content:'◈';position:absolute;right:-10px;top:-10px;font-size:90px;opacity:0.04;font-family:var(--fm)}
.earn-hero-title{font-size:15px;font-weight:800;margin-bottom:3px}
.earn-hero-sub{font-size:11px;color:var(--text2);line-height:1.55;margin-bottom:13px}
.earn-tier-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:rgba(0,0,0,0.25);border-radius:var(--rs);margin-bottom:5px;border:1px solid var(--border)}
.earn-tier-left{display:flex;align-items:center;gap:9px}
.earn-tier-icon{font-size:17px;width:28px;text-align:center}
.earn-tier-name{font-size:12px;font-weight:700}
.earn-tier-sub{font-size:9px;color:var(--muted);margin-top:1px}
.earn-tier-amt{font-size:13px;font-weight:800;font-family:var(--fm);color:var(--green2)}
.earn-tier-coin{font-size:9px;color:var(--gold);font-family:var(--fm);margin-top:1px;text-align:right}

.earn-calc-box{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:15px;margin-bottom:12px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.calc-item{background:var(--s3);border-radius:var(--rs);padding:10px;text-align:center;border:1px solid var(--border)}
.calc-val{font-size:16px;font-weight:800;font-family:var(--fm);color:var(--gold)}
.calc-lbl{font-size:9px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:0.3px}

.multiplier-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:13px}
.mult-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:11px;text-align:center;cursor:pointer;transition:all 0.2s}
.mult-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.mult-card.active{border-color:rgba(233,196,78,0.45);background:rgba(233,196,78,0.05)}
.mult-num{font-size:18px;font-weight:800;font-family:var(--fm);color:var(--gold)}
.mult-lbl{font-size:10px;color:var(--text2);margin-top:2px}

/* ── REFERRAL HUB ── */
.ref-hero{background:linear-gradient(135deg,rgba(232,69,140,0.07),rgba(167,139,250,0.06));border:1px solid rgba(232,69,140,0.18);border-radius:var(--r);padding:18px;margin-bottom:13px;position:relative;overflow:hidden}
.ref-hero::before{content:'🔗';position:absolute;right:-6px;top:-4px;font-size:34px;opacity:0.10;pointer-events:none}
.ref-hero-title{font-size:15px;font-weight:800;margin-bottom:4px}
.ref-hero-sub{font-size:11px;color:var(--text2);line-height:1.6;margin-bottom:10px}
.ref-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.ref-stat{background:rgba(0,0,0,0.3);border-radius:var(--rs);padding:10px;text-align:center}
.ref-stat-val{font-size:16px;font-weight:800;font-family:var(--fm);color:var(--pink)}
.ref-stat-lbl{font-size:9px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:0.3px}

.ref-form{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:13px}
.ref-form-title{font-size:13px;font-weight:800;margin-bottom:12px}
.inp-label{font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:5px;margin-top:10px;display:block}
.inp-label:first-child{margin-top:0}
.inp.textarea{height:80px;resize:none;font-size:12px;line-height:1.5}
.cat-grid{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 11px}
.cat-btn{padding:4px 11px;background:var(--s3);border:1px solid var(--border);border-radius:20px;font-size:10px;font-weight:700;font-family:var(--ff);color:var(--muted);cursor:pointer;transition:all 0.2s}
.cat-btn:hover{border-color:var(--border2);color:var(--text2)}
.cat-btn.selected{background:rgba(232,69,140,0.1);border-color:rgba(232,69,140,0.35);color:var(--pink)}

.ref-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:13px;margin-bottom:9px;transition:all 0.2s;position:relative;overflow:hidden}
.ref-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow)}
.ref-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;border-radius:3px 0 0 3px;background:linear-gradient(180deg,var(--pink),var(--purple))}
.ref-card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:7px}
.ref-card-title{font-size:13px;font-weight:700}
.ref-card-cat{font-size:9px;padding:2px 8px;border-radius:10px;font-weight:700;background:rgba(232,69,140,0.1);color:var(--pink);border:1px solid rgba(232,69,140,0.22)}
.ref-card-desc{font-size:11px;color:var(--text2);line-height:1.55;margin-bottom:9px}
.ref-card-link{font-size:11px;font-family:var(--fm);color:var(--blue);background:rgba(74,159,255,0.07);padding:5px 10px;border-radius:7px;display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;border:1px solid rgba(74,159,255,0.15);cursor:pointer;transition:all 0.2s;word-break:break-all}
.ref-card-link:hover{background:rgba(74,159,255,0.12);border-color:rgba(74,159,255,0.3)}
.ref-card-footer{display:flex;align-items:center;justify-content:space-between}
.ref-card-stats{display:flex;gap:10px}
.ref-cs{font-size:10px;color:var(--muted);font-family:var(--fm)}
.ref-cs span{color:var(--text2);font-weight:600}
.ref-earn-badge{background:rgba(46,194,126,0.1);color:var(--green2);border:1px solid rgba(46,194,126,0.22);font-size:10px;padding:3px 9px;border-radius:10px;font-family:var(--fm);font-weight:700}

.how-ref-grid{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.how-step{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;background:var(--s2);border-radius:var(--rs);border:1px solid var(--border)}
.how-step-num{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--purple));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0;margin-top:1px}
.how-step-title{font-size:11px;font-weight:700;margin-bottom:1px}
.how-step-desc{font-size:10px;color:var(--muted);line-height:1.45}

/* ── EARNINGS CALC ── */
.calc-slider-wrap{margin:12px 0}
.calc-slider-val{font-size:28px;font-weight:800;font-family:var(--fm);color:var(--gold);line-height:1;margin-bottom:3px}
.calc-slider-lbl{font-size:10px;color:var(--muted)}

@media(max-width:700px){.g3{grid-template-columns:1fr 1fr}.g4{grid-template-columns:1fr 1fr}.pkg-grid{grid-template-columns:1fr}.fin-stats{grid-template-columns:1fr 1fr}.badges-g{grid-template-columns:repeat(3,1fr)}.camp-type-grid{grid-template-columns:1fr}.multiplier-grid{grid-template-columns:1fr 1fr}.ref-stat-row{grid-template-columns:1fr 1fr}}
/* Earner mobile: la nav in cima lascia il posto alla bottom tab bar fissa,
   raggiungibile col pollice. Scope solo a #userNavTabs (earner) — il brand
   (desktop-first) tiene la sua .nav-tabs in cima invariata. */
@media(max-width:700px){
  #userNavTabs{display:none}
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:2px;padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:rgba(7,7,13,0.92);backdrop-filter:blur(16px);border-top:1px solid var(--border)}
  #view-user .wrap{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* ═══ REDESIGN MOBILE EARNER (2026-07) ═══
   Token dedicati (prefisso --mr-, "mobile redesign") scoped a #view-user sotto
   700px — mai al brand/desktop, mai al tema chiaro (il mock hi-fi è dark-only:
   nota nota nel report finale, non un toggle dimenticato).
   Fonte: Downloads/design_handoff_ingain_mobile/README.md. Classi nuove sempre
   prefissate .mr- per non collidere con l'esistente (vedi bug .brand demo). */
@media(max-width:700px){
  /* Scope su html.ui-earner (non solo #view-user): riflette la modalità
     corrente (impostata da setMode() in ui-core.js, default earner nel
     markup) — così i token raggiungono anche i pannelli che vivono FUORI
     da #view-user nel DOM (Storico #histOverlay, Streak
     #streakModalOverlay creato via JS, Impostazioni #settingsPanel),
     condivisi col lato brand, che li consumano già via var(--s1)/var(--text)/
     ecc. Se il brand è attivo (mode 'fin') la classe non c'è: nessun rischio
     di applicare la palette earner a un brand. */
  html.ui-earner{
    --mr-bg-base:#04060B;
    --mr-bg-screen:radial-gradient(140% 90% at 50% -8%,#131A29 0%,#080B13 52%,#04060B 100%);
    --mr-card:linear-gradient(168deg,#1B2233 0%,#121724 100%);
    --mr-surface-2:#151C2B;
    --mr-surface-3:#1F2738;
    --mr-surface-locked:#0E1220;
    --mr-sheet:linear-gradient(180deg,#1B2233 0%,#10141F 100%);
    --mr-nav-bg:rgba(13,17,27,0.94);
    --mr-text:#F2F5FA;
    --mr-text-2:#A9B4C9;
    --mr-muted:#8492AD;
    --mr-green:#3DE898;
    --mr-green-cta:linear-gradient(135deg,#4BF0A4,#2EC27E);
    --mr-gold:#F5C84C;
    --mr-cyan:#00D4FF;
    --mr-orange:#FF9D5C;
    --mr-flash:#FF5C5C;
    --mr-pink:#FF5CA8;
    --mr-purple:#9B7BFF;
    --mr-red:#FF6B6B;
    --mr-border-soft:rgba(255,255,255,0.10);
    --mr-border-strong:rgba(255,255,255,0.12);
    --mr-divider:rgba(255,255,255,0.06);
    --mr-r-card:18px;
    --mr-r-chip:12px;
    --mr-r-pill:20px;
    --mr-r-sheet:26px;
    --mr-r-nav:22px;
    --mr-r-stat:12px;
    --mr-shadow-card:0 8px 24px rgba(0,0,0,0.35);
    --mr-shadow-hero:0 10px 30px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.06);
    --mr-shadow-cta:0 6px 18px rgba(61,232,152,0.28);
    --mr-shadow-cta-sm:0 4px 12px rgba(61,232,152,0.3);
    --mr-shadow-nav:0 -6px 22px rgba(0,0,0,0.4);
    --mr-shadow-sheet:0 -14px 44px rgba(0,0,0,0.55);
    --mr-ff:'Outfit',sans-serif;
    --mr-fm:'Space Grotesk',monospace;
    background:var(--mr-bg-base);
    color:var(--mr-text);

    /* ── Leva principale: questo blocco RIDEFINISCE i token core (--bg, la serie
       --s1..--s4, la serie --green, --gold, --cyan, --pink, --purple, --red,
       --orange, --text e --text2, --muted, --border e --border2, --r, --rs,
       --ff, --fm e la serie --shadow) SOLO dentro #view-user sotto i 700px —
       esattamente lo stesso meccanismo già usato da html[data-theme="light"]
       più sopra. Ogni componente esistente (.card, .btn, .hero-stat,
       .cooldown-bar, .voucher-grid, .payout-method-grid, .chip, gli input…) li
       consuma già via var(--x): ridefinendoli qui il redesign si propaga a
       TUTTE le tab-pane earner (Home/Discover/Wallet/Referral/Profilo/Guadagni/
       Chat/Notifiche) senza toccare id/onclick/markup — quindi senza rischio per
       tour.js o i test. NON copre i pannelli che vivono fuori da #view-user nel
       DOM (Impostazioni, Storico, Streak, Quest: sono fratelli di #view-user e
       condivisi col lato brand), gestiti nelle fasi dedicate 3a/3b/3d.
       Verificato prima di riassegnare: --bg e --s1 non sono mai usati come
       border-color o box-shadow-color nel CSS esistente (solo background),
       quindi sostituirli con un gradiente è sicuro.

       AUDIT-FIX (2026-07-26) — l'elenco dei token qui sopra era scritto con
       abbreviazioni che accostavano un asterisco a una barra. Quella coppia di
       caratteri CHIUDE un commento CSS: il commento terminava già alla prima
       riga e tutto il testo rimanente finiva nel parser come regole, salvato
       solo dall'error-recovery del browser — nessun errore in console, nessun
       sintomo visibile. È la trappola 6 di HANDOFF, che aveva già colpito
       proprio questo blocco. Per questo i token sono ora scritti per esteso. */
    --bg:var(--mr-bg-base);
    --s1:var(--mr-card);
    --s2:var(--mr-surface-2);
    --s3:var(--mr-surface-3);
    --s4:#26314A;
    --green:#2ec27e;
    --green2:var(--mr-green);
    --green3:rgba(61,232,152,0.08);
    --gold:var(--mr-gold);
    --gold2:rgba(245,200,76,0.1);
    --cyan:var(--mr-cyan);
    --pink:var(--mr-pink);
    --pink2:rgba(255,92,168,0.1);
    --purple:var(--mr-purple);
    --purple2:rgba(155,123,255,0.1);
    --red:var(--mr-red);
    --orange:var(--mr-orange);
    --text:var(--mr-text);
    --text2:var(--mr-text-2);
    --muted:var(--mr-muted);
    --border:var(--mr-divider);
    --border2:var(--mr-border-soft);
    --r:var(--mr-r-card);
    --rs:var(--mr-r-stat);
    --ff:var(--mr-ff);
    --fm:var(--mr-fm);
    --shadow:var(--mr-shadow-card);
    --shadow-green:var(--mr-shadow-cta);
  }
  #view-user .wrap{background:var(--mr-bg-screen)}
}
/* Variante CHIARA del redesign mobile (2026-07-21).
   Il mock hi-fi era dark-only: qui si deriva una variante per
   html data-theme light, riusando gli STESSI valori del tema chiaro
   gia esistente nell'app (bg, s1-4, text, border sopra, non inventati
   da zero) per restare coerenti col resto del prodotto, applicati con la
   stessa struttura (hero card, accenti per sezione) del redesign dark.
   Il testo verde su sfondo chiaro resta protetto dalla regola A11y
   esistente piu sopra, non serve toccarla, si applica automaticamente
   anche a hEur.
   ATTENZIONE bug reale trovato qui il 2026-07-21: un commento CSS che
   contiene la sequenza letterale asterisco-slash si chiude a META anche
   se non era quella l'intenzione (i due caratteri non sanno che sono
   dentro un commento piu ampio) - tutto il testo dopo diventa CSS vero
   e viene scartato dal parser insieme alla regola successiva. Qui sotto
   niente parentesi con nomi-variabile-seguiti-da-asterisco-slash. */
@media(max-width:700px){
  html[data-theme="light"].ui-earner{
    --mr-bg-base:#f7f7fb;
    --mr-bg-screen:radial-gradient(140% 90% at 50% -8%,#eef1f8 0%,#f7f7fb 55%,#f7f7fb 100%);
    --mr-card:#ffffff;
    --mr-surface-2:#f0f0f5;
    --mr-surface-3:#e6e6ee;
    --mr-surface-locked:#dcdce6;
    --mr-sheet:#ffffff;
    --mr-nav-bg:rgba(247,247,251,0.92);
    --mr-text:#0c0c14;
    --mr-text-2:#4a4a60;
    --mr-muted:#5f5f75;
    --mr-green:#0c7a44;
    --mr-green-cta:linear-gradient(135deg,#4BF0A4,#2EC27E);
    --mr-gold:#a9791a;
    --mr-cyan:#0087a3;
    --mr-orange:#c9601c;
    --mr-flash:#c94040;
    --mr-pink:#c22a72;
    --mr-purple:#6a4fd1;
    --mr-red:#c93b3b;
    --mr-border-soft:rgba(0,0,0,0.08);
    --mr-border-strong:rgba(0,0,0,0.16);
    --mr-divider:rgba(0,0,0,0.08);
    --mr-shadow-card:0 8px 24px rgba(0,0,0,0.10);
    --mr-shadow-hero:0 10px 30px rgba(0,0,0,0.10),inset 0 1px 0 rgba(255,255,255,0.6);
    --mr-shadow-cta:0 6px 18px rgba(46,194,126,0.22);
    --mr-shadow-cta-sm:0 4px 12px rgba(46,194,126,0.22);
    --mr-shadow-nav:0 -6px 22px rgba(0,0,0,0.08);
    --mr-shadow-sheet:0 -14px 44px rgba(0,0,0,0.18);
  }
  html[data-theme="light"] #view-user #homeHeroGrid .hero-stat:nth-child(2){
    background:linear-gradient(160deg,#E3FBF0 0%,#DCF3F5 100%);
    border-color:rgba(12,122,68,0.20);
  }
  html[data-theme="light"] #view-user .card-green{background:linear-gradient(160deg,rgba(12,122,68,0.06),var(--mr-card) 65%)}
  html[data-theme="light"] #view-user .card-gold{background:linear-gradient(160deg,rgba(169,121,26,0.06),var(--mr-card) 65%)}
  html[data-theme="light"] #view-user .mr-home-payout-cta{color:#062017}
}
/* Bottom sheet mobile: Streak (3a, id streakModalOverlay creato via JS in
   quests.js) e Storico (3b, hist-overlay/hist-modal, apre da hEur/hCoins/
   hDone/hLevel dentro view-user) restano overlay che slide-up dal basso.
   Impostazioni (3d, settingsPanel) e' invece una VISTA A SCHERMO INTERO
   (era un dropdown ancorato in alto a destra, poi un bottom sheet, poi
   promossa a pagina piena il 2026-07-21 su richiesta esplicita — il mock
   la chiama "pagina", non overlay). Scope html.ui-earner (vedi sopra):
   niente di questo tocca il lato brand. Il modale Streak generico (classe
   cmod, condivisa con la finestra Quest) resta INVARIATO ovunque tranne
   dentro lo specifico streakModalOverlay, per non toccare cose non chieste.
   La classe settings-open su body (da wallet.js/auth.js) ora serve solo a
   bloccare lo scroll dello sfondo mentre la vista e' aperta. */
@media(max-width:700px){
  html.ui-earner .hist-overlay,
  html.ui-earner #streakModalOverlay{
    align-items:flex-end;
    padding:0;
    background:rgba(2,4,8,0.72);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
  html.ui-earner .hist-modal,
  html.ui-earner #streakModalOverlay .cmod{
    max-width:none;
    width:100%;
    border-radius:var(--mr-r-sheet) var(--mr-r-sheet) 0 0;
    box-shadow:var(--mr-shadow-sheet);
    padding:10px 18px calc(18px + env(safe-area-inset-bottom));
    max-height:85vh;
    animation:mrSheetUp 0.28s cubic-bezier(.32,.72,0,1);
  }
  html.ui-earner .hist-modal::before,
  html.ui-earner #streakModalOverlay .cmod::before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    border-radius:3px;
    background:var(--mr-border-strong);
    margin:2px auto 14px;
  }
  html.ui-earner .hist-close{top:10px;right:14px}
  /* Impostazioni (3d): VISTA DEDICATA a schermo intero, non più bottom sheet
     (cambiato il 2026-07-21 su richiesta esplicita — il mock la descrive
     come "pagina", non come overlay). Copre tutto il viewport quindi non
     serve backdrop separato (a differenza di Streak/Storico, che restano
     overlay sopra il contenuto). Stessa funzione toggleSettingsPanel() di
     sempre — nessuna delle ~15 chiamate esistenti "azione();toggleSettingsPanel()"
     nei bottoni interni e' stata toccata. */
  body.settings-open{overflow:hidden}
  /* Il pannello ha uno style="" inline nel markup (top/right/width/border-radius/
     box-shadow/padding/max-height) — lo style inline vince SEMPRE su una regola
     esterna a prescindere dalla specificita' (tranne !important): ogni proprieta'
     che deve davvero cambiare qui va marcata !important, non solo "top" come nel
     primo tentativo (bug reale trovato il 2026-07-21: il pannello copriva solo
     ~70% della larghezza, contenuto e bottom-nav restavano visibili di lato/sotto). */
  html.ui-earner #settingsPanel{
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)) !important;
    z-index:400 !important;
    animation:mrSheetUp 0.26s cubic-bezier(.32,.72,0,1);
  }
  html.ui-earner .mr-settings-close{display:flex !important}
}
/* Prelievo (3c, #walletPayoutSection in Wallet): bottom sheet mobile, stesso
   pattern di Streak/Storico (slide-up + backdrop), non una vista a schermo
   intero come Impostazioni — coerente col mock, che lo mostra come sheet.
   #walletPayoutSection e' lo stesso blocco di sempre (id/onclick/validazioni
   di payout.js MAI toccati): qui si aggiunge solo apri/chiudi via
   openPayoutSheet()/closePayoutSheet() (wallet.js) + un trigger compatto
   (.mr-payout-trigger) al posto del blocco disteso in pagina. Backdrop come
   vero elemento creato in JS (non pseudo-elemento), per poterci agganciare
   il click di chiusura. Stessa lezione di Impostazioni: il blocco ha uno
   style="" inline nel markup, quindi ogni proprieta' da cambiare va marcata
   !important o lo stile inline vince comunque. */
.mr-payout-trigger{display:none}
.mr-payout-backdrop{position:fixed;inset:0;background:rgba(2,4,8,0.72);z-index:499;display:none}
.mr-payout-backdrop.show{display:block;animation:mrFadeIn 0.2s ease}
@media(max-width:700px){
  html.ui-earner .mr-payout-trigger{display:flex}
  html.ui-earner #walletPayoutSection{display:none}
  html.ui-earner #walletPayoutSection.mr-payout-open{
    display:block !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    margin:0 !important;
    width:auto !important;
    max-width:none !important;
    max-height:85vh !important;
    overflow-y:auto !important;
    border-radius:var(--mr-r-sheet) var(--mr-r-sheet) 0 0 !important;
    box-shadow:var(--mr-shadow-sheet) !important;
    background:var(--mr-card) !important;
    padding:10px 18px calc(18px + env(safe-area-inset-bottom)) !important;
    z-index:500 !important;
    animation:mrSheetUp 0.28s cubic-bezier(.32,.72,0,1);
  }
  html.ui-earner #walletPayoutSection.mr-payout-open::before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    border-radius:3px;
    background:var(--mr-border-strong);
    margin:2px auto 10px;
  }
  body.payout-open{overflow:hidden}
}
@keyframes mrSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes mrFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mrShimmer{0%{transform:translateX(-120%)}100%{transform:translateX(240%)}}
/* AUDIT-FIX (2026-07-24): rimossi i keyframes mrPulse/mrFlame/mrFloaty/mrBarfill
   insieme alle 4 classi che li usavano (.mr-pulse/.mr-flame/.mr-floaty/
   .mr-barfill): utility di animazione previste nel redesign mobile ma mai
   applicate ad alcun elemento. Nessun altro selettore le referenziava. */
@media (prefers-reduced-motion:no-preference){
  /* .mr-shimmer RESTA: è applicata all'hero-stat Euro della Home (index.html). */
  .mr-shimmer::after{content:"";position:absolute;top:0;left:0;width:60px;height:100%;background:rgba(255,255,255,0.06);transform:translateX(-120%);animation:mrShimmer 3.2s linear infinite}
}

/* ── Tab bar: accento per sezione (Home verde / Discover cyan / Referral pink /
   Profilo purple / Wallet gold), come da handoff. Ristilizza .bottom-nav/.bnav-btn
   esistenti (stessi id/onclick/data-tab: tour.js e i test non vengono toccati). */
@media(max-width:700px){
  #view-user .bottom-nav{background:var(--mr-nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--mr-border-strong);border-radius:var(--mr-r-nav) var(--mr-r-nav) 0 0;box-shadow:var(--mr-shadow-nav);padding-top:8px}
  #view-user .bnav-btn{color:var(--mr-muted);font-family:var(--mr-ff)}
  #view-user .bnav-btn.active{background:transparent}
  #view-user .bnav-btn[data-tab="home"].active{color:var(--mr-green)}
  #view-user .bnav-btn[data-tab="home"]::before{background:var(--mr-green)}
  #view-user .bnav-btn[data-tab="discover"].active{color:var(--mr-cyan)}
  #view-user .bnav-btn[data-tab="discover"]::before{background:var(--mr-cyan)}
  #view-user .bnav-btn[data-tab="referral"].active{color:var(--mr-pink)}
  #view-user .bnav-btn[data-tab="referral"]::before{background:var(--mr-pink)}
  #view-user .bnav-btn[data-tab="profilo"].active{color:var(--mr-purple)}
  #view-user .bnav-btn[data-tab="profilo"]::before{background:var(--mr-purple)}
  #view-user .bnav-btn[data-tab="wallet"].active{color:var(--mr-gold)}
  #view-user .bnav-btn[data-tab="wallet"]::before{background:var(--mr-gold)}
}

/* ── Home (1a): promuove la card Euro (2° hero-stat, id hEur — invariato) a
   "saldo hero" con shimmer, le altre 3 restano chip compatte sotto. Nessun
   nuovo elemento duplica hEur/hCoins/hDone/hLevel: solo riflusso via CSS Grid
   (order + grid-column), i valori restano quelli reali aggiornati da
   polish.js/notifications.js/payout.js. */
.mr-home-payout-cta{display:none}
@media(max-width:700px){
  #view-user #homeHeroGrid{grid-template-columns:1fr 1fr;gap:10px}
  #view-user #homeHeroGrid .hero-stat{background:var(--mr-surface-3);border-color:var(--mr-border-soft);border-radius:var(--mr-r-stat)}
  #view-user #homeHeroGrid .hero-stat:nth-child(2){
    order:-1;grid-column:1/-1;position:relative;overflow:hidden;
    background:linear-gradient(160deg,#0F2A20 0%,#0C1F2E 100%);
    border-color:rgba(61,232,152,0.25);
    border-radius:var(--mr-r-card);
    padding:18px;
    box-shadow:var(--mr-shadow-hero);
  }
  #view-user #homeHeroGrid .hero-stat:nth-child(2) .hero-val{font-size:36px;letter-spacing:-1px;margin:6px 0}
  #view-user #homeHeroGrid .hero-stat:nth-child(2) .hero-lbl{font-size:10px;letter-spacing:1px}
  .mr-home-payout-cta{
    display:flex;margin:-3px 0 12px;padding:11px 16px;
    background:var(--mr-green-cta);color:#062017;font-weight:800;
    border:none;border-radius:var(--mr-r-pill);box-shadow:var(--mr-shadow-cta-sm);
  }
  #view-user .card-green{background:linear-gradient(160deg,rgba(61,232,152,0.08),var(--mr-card) 65%);border-color:rgba(61,232,152,0.28)}
  #view-user .card-gold{background:linear-gradient(160deg,rgba(245,200,76,0.08),var(--mr-card) 65%);border-color:rgba(245,200,76,0.3)}
}
/* AUDIT-FIX (2026-07-21): le 4 regole sopra impostano border-color con selettori
   con ID (#view-user/#homeHeroGrid) → specificità più alta della regola globale
   `html.neon-on .card/.hero-stat` (2 classi), quindi la sovrascrivevano in silenzio:
   con neon attivo, la Home a mobile perdeva la cornice/glow su hero-stat e su
   card-green/card-gold. Fix: stesse regole ripetute sotto `html.neon-on`, che
   così vince la cascata e riapplica bordo+glow come ovunque nell'app. */
@media(max-width:700px){
  html.neon-on #view-user #homeHeroGrid .hero-stat,
  html.neon-on #view-user .card-green,
  html.neon-on #view-user .card-gold{
    border-color:var(--neon-frame);border-width:1px;box-shadow:0 0 13px var(--neon-glow);
  }
  html.neon-on #view-user #homeHeroGrid .hero-stat:nth-child(2){
    border-color:var(--neon-frame);border-width:1px;
    box-shadow:0 0 13px var(--neon-glow),inset 0 1px 0 rgba(255,255,255,0.06);
  }
}
/* Discover (1b) mobile: nel mock le card sono a colonna singola con
   un'icona quadrata a sinistra (per piattaforma/tipo) e gli importi
   impilati in alto a destra, invece della griglia compatta a 2 colonne
   con badge. Il markup (tasks.js) resta condiviso con desktop — qui si
   riusa .disc-card::before (striscia colorata a sinistra su desktop)
   come box icona SOLO in questo scope, e data-coins/data-eur (attributi
   già presenti nel markup) alimentano l'importo via ::after, senza
   duplicare template né inventare contatori finti. */
@media(max-width:700px){
  html.ui-earner .disc-grid{grid-template-columns:1fr}
  html.ui-earner .disc-card{padding:14px 14px 14px 74px;min-height:74px}
  /* ── Icona della missione (mobile) ──────────────────────────────────────
     RIFINITA (2026-07-27). Prima era un quadrato con gradiente piatto a due
     stop: leggibile ma anonimo. Ora ha tre elementi che danno profondità senza
     appesantire il rendering (nessuna immagine, nessun nodo in più — resta uno
     pseudo-elemento):
       · gradiente a 3 stop con angolo 145°, che simula una luce dall'alto
         invece di una diagonale uniforme;
       · box-shadow su tre livelli: una lumeggiatura interna in alto, una
         penombra interna in basso (dà spessore al bordo) e un'ombra esterna
         COLORATA, presa dalla tinta della piattaforma — è il dettaglio che fa
         sembrare l'icona appoggiata sulla card invece che incollata;
       · raggio 16px su 48px ≈ proporzione "squircle" iOS, più morbida del 15/46
         precedente e coerente con le altre superfici arrotondate dell'app.
     `--ic` porta la tinta dominante della piattaforma: si imposta una volta per
     variante e viene riusata dall'ombra, così aggiungere una piattaforma nuova
     richiede una riga sola invece di ripetere il colore in due punti. */
  html.ui-earner .disc-card::before{
    content:'📷';width:48px;height:48px;top:13px;left:13px;border-radius:16px;
    display:flex;align-items:center;justify-content:center;font-size:22px;
    --ic:#e56aa5;
    background:linear-gradient(145deg,#f79ac4 0%,#e56aa5 45%,#f77737 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 -2px 3px rgba(0,0,0,0.16),
      0 4px 12px -3px color-mix(in srgb, var(--ic) 55%, transparent);
    /* il testo emoji non deve ereditare ombre dal contenitore */
    text-shadow:0 1px 1px rgba(0,0,0,0.18);
  }
  html.ui-earner .disc-card.tt-c::before{content:'🎬';--ic:#25f4ee;background:linear-gradient(145deg,#5ff9f4 0%,#25f4ee 40%,#111 100%)}
  html.ui-earner .disc-card.yt-c::before{content:'▶️';--ic:#ff5555;background:linear-gradient(145deg,#ff8a8a 0%,#ff5555 45%,#a00 100%)}
  html.ui-earner .disc-card.sp-c::before{content:'🎧';--ic:#1db954;background:linear-gradient(145deg,#4ee08a 0%,#1db954 45%,#0d7a34 100%)}
  html.ui-earner .disc-card.tw-c::before{content:'🐦';--ic:#9147ff;background:linear-gradient(145deg,#b98cff 0%,#9147ff 45%,#5c1fc9 100%)}
  html.ui-earner .disc-card.pi-c::before{content:'📌';--ic:#e60023;background:linear-gradient(145deg,#ff5a72 0%,#e60023 45%,#8f0016 100%)}
  html.ui-earner .disc-card.li-c::before{content:'💼';--ic:#0a66c2;background:linear-gradient(145deg,#4a9de0 0%,#0a66c2 45%,#063f7a 100%)}
  html.ui-earner .disc-card.nl-c::before{content:'✉️';--ic:#ff8c42;background:linear-gradient(145deg,#ffb072 0%,#ff6700 45%,#e9c44e 100%)}
  html.ui-earner .disc-card.at-survey::before{content:'📋';--ic:#7c6cff;background:linear-gradient(145deg,#b3a8ff 0%,#7c6cff 45%,#5b48e0 100%)}
  html.ui-earner .disc-card.at-music::before{content:'🎵';--ic:#1ed760;background:linear-gradient(145deg,#6ff2a0 0%,#1ed760 45%,#12994a 100%)}
  html.ui-earner .disc-card.at-creator::before{content:'✨';--ic:#ff6bcb;background:linear-gradient(145deg,#ffa6e0 0%,#ff6bcb 40%,#e8458c 100%)}
  /* Le card completate perdono il rilievo: l'icona resta ma smette di
     "chiamare" l'attenzione, coerente con l'opacità già applicata alla card. */
  html.ui-earner .disc-card.done::before{box-shadow:none;filter:saturate(0.5)}
  html.ui-earner .disc-card::after{
    content:'◈' attr(data-coins) '\A' attr(data-eur);
    position:absolute;top:14px;right:14px;text-align:right;white-space:pre;
    font-family:var(--fm);font-weight:800;font-size:12px;line-height:1.5;
    color:var(--gold);
  }
  html.ui-earner .disc-card .platform-tag,
  html.ui-earner .disc-card .reward-pill{display:none}
  html.ui-earner .disc-footer{justify-content:flex-end}
  html.ui-earner .disc-card.at-survey{border-color:rgba(124,108,255,0.3)}
  html.ui-earner .disc-card.at-creator{border-color:rgba(232,69,140,0.3)}
}
@media(max-width:480px){.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}.earn-hero::after{display:none}.xp-mini{display:none}}

/* ── SMARTPHONE (≤430px) ── */
@media(max-width:430px){
  .topbar{padding:9px 10px 8px;gap:4px}
  .topbar-right{gap:3px;flex-shrink:0}
  /* Nascondi elementi meno urgenti — accessibili dai tab */
  #questsChip{display:none}
  #refChatBtn{display:none}
  #authProviderBadge{display:none!important}
  #logoutBtn{display:none}
  /* Riduci wallet pill */
  .wallet-pill{padding:4px 8px;gap:3px}
  .wallet-pill span{font-size:11px}
  /* Icone topbar compatte */
  .notif-btn{font-size:17px;padding:5px 4px;min-width:30px}
  .streak-pill{padding:5px 8px;font-size:11px}
  /* Brand più compatto */
  .brand-name{font-size:16px}
  .brand-logo{width:28px;height:28px;font-size:14px;border-radius:7px}
  /* Tab nav */
  .nav-tabs{gap:1px;padding:2px}
  .ntab{font-size:9.5px;padding:6px 3px}
  /* Contenuto */
  .wrap{padding:11px 11px}
  .card{padding:11px 12px}
  .g2,.g3{grid-template-columns:1fr}
  /* Stat card home: 2×2 anche sui telefoni stretti — 4 card impilate a piena
     larghezza erano ~600px di scroll per 4 numeri. A 2-up i valori restano leggibili. */
  .g4{grid-template-columns:1fr 1fr}
  .g4 .hero-val{font-size:22px}
  .fin-stats{grid-template-columns:1fr 1fr}
  .payout-method-grid{grid-template-columns:1fr 1fr}
  .amount-presets{flex-wrap:wrap}
  .preset-btn{min-width:calc(50% - 4px)}
}

/* ── FLUIDITÀ: GPU compositing su elementi animati ── */
/* AUDIT-FIX (2026-07-26): `.modal` era in questa lista, e il `transform:
   translateZ(0)` qui sotto sovrascriveva il suo stato CHIUSO
   (`.modal{transform:scale(0.9) translateY(10px)}`, stessa specificità 0,1,0 ma
   definito prima). Risultato: la transizione verso lo stato aperto
   (`scale(1) translateY(0)`) partiva dall'identità e arrivava all'identità —
   l'entrata "a molla" cubic-bezier(.34,1.56,.64,1) non produceva alcun
   movimento su nessuno dei modali. `.modal` è quindi uscita dalla lista e ha il
   compositing dichiarato nei propri stati (translateZ(0) incluso lì, così la
   promozione a layer resta). `.cmod` invece resta qui senza problemi: usa
   `animation:slideUp`, e i keyframes prevalgono sul transform statico mentre
   girano. */
.disc-card,.card,.tab-pane,.cmod{
  will-change:transform;
  transform:translateZ(0);
}
.modal{will-change:transform}
.disc-card,.card{contain:layout style;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px) translateZ(0)}to{opacity:1;transform:translateY(0) translateZ(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(18px) translateZ(0) scale(0.97)}to{opacity:1;transform:translateY(0) translateZ(0) scale(1)}}
/* Scroll più fluido */
.wrap,.nav-tabs{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
/* Riduce repaint su hover card */
/* AUDIT-FIX (2026-07-26): era `.disc-card:hover` (0,2,0), che matcha ANCHE le card
   completate: rimetteva il sollevamento proprio su quelle che la regola originale
   `.disc-card:hover:not(.done)` (0,3,0) escludeva di proposito, facendo tornare
   "cliccabile" una card già fatta. Aggiunto :not(.done) per allinearle. */
.disc-card:hover:not(.done){transform:translateY(-2px) translateZ(0)}
.camp-card:hover{transform:translateY(-1px) translateZ(0)}

/* ── TASK DONE FLASH ── */
/* ── EMPTY CELEBRATE ── */
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-10px)}}
/* ── AUTH OVERLAY ── */
.auth-overlay{position:fixed;inset:0;background:#07070d;z-index:400;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.auth-lang-picker{position:fixed;top:16px;right:16px;z-index:401}
.auth-lang-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border2);background:var(--s2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.auth-lang-btn:hover{border-color:var(--green2)}
.auth-lang-menu{display:none;position:absolute;top:46px;right:0;background:var(--s1);border:1px solid var(--border2);border-radius:12px;padding:6px;min-width:150px;box-shadow:var(--shadow);flex-direction:column;gap:2px}
.auth-lang-menu.open{display:flex}
.auth-lang-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;background:transparent;color:var(--text);font-family:var(--ff);font-size:13px;font-weight:600;border-radius:8px;cursor:pointer;text-align:left}
.auth-lang-menu button:hover{background:var(--s2)}
.demo-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.82);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
.demo-overlay.show{display:flex;animation:fadeIn 0.22s ease}
.demo-window{background:var(--s1);border:1px solid var(--border2);border-radius:22px;padding:28px 24px;width:100%;max-width:480px;position:relative}
.demo-window-title{font-size:20px;font-weight:800;text-align:center;margin-bottom:4px}
.demo-window-sub{font-size:12px;color:var(--muted);text-align:center;margin-bottom:22px;line-height:1.5}
.demo-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.demo-mode-card{border-radius:16px;padding:20px 14px;text-align:center;cursor:pointer;border:1.5px solid var(--border);background:var(--s2);transition:all 0.2s;user-select:none}
.demo-mode-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.35)}
.demo-mode-card.earner{border-color:rgba(46,194,126,0.4);background:rgba(46,194,126,0.06)}
.demo-mode-card.earner:hover{border-color:var(--green2);background:rgba(46,194,126,0.12)}
.demo-mode-card.demo-brand{border-color:rgba(74,159,255,0.4);background:rgba(74,159,255,0.06)}
.demo-mode-card.demo-brand:hover{border-color:var(--blue);background:rgba(74,159,255,0.12)}
.demo-mode-icon{font-size:36px;margin-bottom:10px}
.demo-mode-label{font-size:14px;font-weight:800;margin-bottom:4px}
.demo-mode-desc{font-size:11px;color:var(--muted);line-height:1.5}
.demo-close{position:absolute;top:14px;right:16px;background:var(--s3);border:1px solid var(--border);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--muted);transition:all 0.15s}
.demo-close:hover{color:var(--text);background:var(--s2)}
.demo-notice{font-size:10px;color:var(--muted);text-align:center;line-height:1.5}
.auth-overlay::before{content:'';position:fixed;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(46,194,126,0.06) 0%,transparent 70%);pointer-events:none}
.auth-overlay::after{content:'';position:fixed;bottom:-200px;left:-200px;width:500px;height:500px;background:radial-gradient(circle,rgba(74,159,255,0.05) 0%,transparent 70%);pointer-events:none}
.auth-card{background:var(--s1);border:1px solid var(--border);border-radius:20px;padding:28px;width:100%;max-width:420px;position:relative;z-index:1}
.auth-tab-sw{display:flex;gap:3px;background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:3px;margin-bottom:22px}
.auth-tsb{flex:1;padding:9px 10px;border-radius:7px;font-size:13px;font-weight:700;text-align:center;cursor:pointer;border:none;background:transparent;font-family:var(--ff);color:var(--muted);transition:all 0.2s}
.auth-tsb.active{background:var(--s3);color:var(--text);border:1px solid var(--border2)}
.auth-role-row{display:flex;gap:8px;margin-bottom:18px}
.auth-role-opt{flex:1;background:var(--s2);border:2px solid var(--border);border-radius:var(--rs);padding:12px 8px;text-align:center;cursor:pointer;transition:all 0.2s}
.auth-role-opt:hover{border-color:var(--border2)}
.auth-role-opt.sel-earner{border-color:var(--green);background:rgba(46,194,126,0.05)}
.auth-role-opt.sel-brand{border-color:var(--blue);background:rgba(74,159,255,0.05)}
.auth-form-grp{margin-bottom:14px}
.auth-lbl{font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block}
.auth-inp-wrap{position:relative}
.auth-inp-wrap .inp{padding-right:42px}
.auth-toggle{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:0;line-height:1}
.auth-field-err{font-size:10px;color:var(--red-text);margin-top:4px;display:none}
.auth-field-err.show{display:block}
/* AUDIT-FIX (2026-07-26): `authFieldErr()` (js/auth.js) fa
   `inp.classList.toggle('err',!!msg)` sul campo non valido, ma NESSUNA regola
   `.err` esisteva: il campo in errore restava graficamente identico a uno
   corretto e l'utente aveva solo il messaggio testuale sotto. Aggiunta qui,
   accanto alla regola del messaggio, così le due metà dello stesso stato di
   errore restano vicine. Riquadro rosso tenue, coerente con --red già in uso
   per gli errori; niente cambi di layout (nessuno spostamento del campo). */
input.err,select.err,textarea.err{border-color:var(--red)!important;background:rgba(255,90,90,0.06)}
input.err:focus,select.err:focus,textarea.err:focus{box-shadow:0 0 0 2px rgba(255,90,90,0.18)}
.auth-alert{padding:10px 13px;border-radius:var(--rs);font-size:12px;margin-bottom:14px;display:none;border:1px solid}
.auth-alert.show{display:block}
.auth-alert-err{background:rgba(224,85,85,0.08);border-color:rgba(224,85,85,0.25);color:#f08080}
.auth-alert-ok{background:rgba(46,194,126,0.08);border-color:rgba(46,194,126,0.25);color:var(--green2)}
.pw-strength{height:3px;border-radius:2px;margin-top:6px;background:var(--s3);outline:1px solid var(--border);overflow:hidden}
.pw-fill{height:100%;border-radius:2px;transition:all 0.3s;width:0}
.pw-weak{background:var(--red)}.pw-medium{background:var(--gold)}.pw-strong{background:var(--green)}
.pw-label{font-size:9px;color:var(--muted);font-family:var(--fm);margin-top:3px}
.auth-forgot{font-size:11px;color:var(--muted);text-align:right;display:block;margin-top:4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.auth-forgot:hover{color:var(--text2)}
.auth-switch{font-size:12px;color:var(--muted);text-align:center;margin-top:16px}
.auth-switch span{color:var(--green2);cursor:pointer;font-weight:700}
.auth-btn{width:100%;padding:13px;border-radius:11px;border:none;font-family:var(--ff);font-size:15px;font-weight:700;cursor:pointer;transition:all 0.2s;margin-top:4px}
.auth-btn-green{background:linear-gradient(135deg,var(--green),#1a9e5c);color:#07070d}
.auth-btn-green:hover{opacity:0.88;transform:translateY(-1px)}
.auth-btn-blue{background:linear-gradient(135deg,var(--blue),#1a5fa3);color:#fff}
.auth-btn-blue:hover{opacity:0.88;transform:translateY(-1px)}
/* AUDIT-FIX (2026-07-24): rimossa .auth-btn-disabled, mai applicata (i bottoni
   auth usano l'attributo disabled + :disabled). */
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:11px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-oauth-row{display:flex;gap:8px;margin-bottom:4px}
.auth-btn-oauth{flex:1;background:var(--s2);border:1px solid var(--border2);color:var(--text);padding:10px;border-radius:var(--rs);font-family:var(--ff);font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s}
.auth-btn-oauth:hover{background:var(--s3)}
.auth-success{text-align:center;display:none}
.auth-success.show{display:block}
/* AUDIT-FIX (2026-07-26): `.spin` non era usata da nessuna parte, mentre i bottoni
   di accesso/registrazione emettono `<span class="auth-spin">` (js/auth.js) che
   NON aveva alcuna regola: lo spinner di "Accesso…"/"Creazione…" era uno <span>
   vuoto, quindi invisibile a ogni login. Classico rename lasciato a metà: la
   regola era orfana da un lato e mancante dall'altro. Uniti i due selettori
   invece di duplicare la dichiarazione. */
.spin,.auth-spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
/* PAYOUT + CHECKOUT styles · vedi sotto il blocco unificato "PAYOUT STYLES" */
.checkout-modal{background:var(--s1);border:1px solid rgba(74,159,255,0.22);border-radius:18px;padding:24px;max-width:480px;width:100%;margin:auto;position:relative}
.checkout-close{position:absolute;top:14px;right:14px;background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--text2);transition:all 0.2s}
.checkout-close:hover{background:var(--s3);color:var(--text)}
.logout-btn{background:transparent;border:1px solid var(--border);color:var(--muted);font-size:10px;font-weight:700;font-family:var(--ff);padding:5px 11px;border-radius:var(--rs);cursor:pointer;transition:all 0.2s}
.logout-btn:hover{border-color:rgba(224,85,85,0.4);color:var(--red-text)}
/* ── ONBOARDING ── */
.onboard-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.onboard-modal{background:var(--s1);border:1px solid var(--border2);border-radius:20px;padding:28px 24px;max-width:360px;width:100%}
.onboard-step{display:none}.onboard-step.active{display:block;animation:fadeIn 0.3s ease}
.onboard-dots{display:flex;justify-content:center;gap:6px;margin:18px 0 0}
.onboard-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);transition:all 0.25s}
.onboard-dot.active{background:var(--green2);width:18px;border-radius:3px}

/* ── SPOTLIGHT TOUR ── */
.sptour-overlay{position:fixed;inset:0;z-index:9000;pointer-events:none;transition:opacity 0.3s}
.sptour-overlay.active{pointer-events:auto}
.sptour-cut{position:fixed;box-shadow:0 0 0 9999px rgba(0,0,0,0.72);border-radius:10px;transition:all 0.35s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:9001}
.sptour-tooltip{position:fixed;z-index:9002;background:var(--s1);border:1.5px solid var(--green2);border-radius:14px;padding:14px 16px;max-width:280px;width:max-content;box-shadow:0 8px 32px rgba(0,0,0,0.45);animation:fadeIn 0.25s ease;pointer-events:auto}
.sptour-tooltip::before{content:'';position:absolute;width:10px;height:10px;background:var(--s1);border-left:1.5px solid var(--green2);border-top:1.5px solid var(--green2);border-radius:2px}
.sptour-tooltip.tip-below::before{top:-6px;left:50%;transform:translateX(-50%) rotate(45deg)}
.sptour-tooltip.tip-above::before{bottom:-6px;left:50%;transform:translateX(-50%) rotate(225deg)}
/* AUDIT-FIX (2026-07-24): rimossa .tip-left::before — tour.js posiziona il
   tooltip solo con tip-above/tip-below, mai tip-left (verificato in tour.js). */
.sptour-step{font-size:11px;color:var(--muted);font-family:var(--fm);font-weight:700;letter-spacing:0.5px;margin-bottom:4px}
.sptour-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:6px}
.sptour-body{font-size:12px;color:var(--text2);line-height:1.6}
.sptour-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}
.sptour-skip{font-size:11px;color:var(--muted);cursor:pointer;background:none;border:none;padding:0;font-family:inherit}
.sptour-skip:hover{color:var(--text2)}
.sptour-next{font-size:12px;font-weight:700;padding:7px 16px;background:var(--green2);color:#07070d;border:none;border-radius:8px;cursor:pointer;font-family:inherit}
.sptour-next:hover{filter:brightness(1.1)}
.sptour-dots{display:flex;gap:5px;align-items:center}
.sptour-dot{width:5px;height:5px;border-radius:50%;background:var(--border2);transition:all 0.2s}
.sptour-dot.on{background:var(--green2);width:14px;border-radius:3px}

/* ── AUTH OVERLAY (selettori specifici auth) ── */
/* AUDIT-FIX (2026-07-24): qui vivevano .auth-stats-bar/.auth-stat-val/
   .auth-stat-lbl, che stilavano la striscia di numeri finti del pannello di
   accesso ("12.847 earner", "+2.6k% lift"). Il markup è stato rimosso il
   2026-07-18 con la regola "numeri finti = vietati ovunque", ma il CSS era
   rimasto orfano. Verificato morto in index.html, js/, blog/, contatto/ e sw.js,
   incluse le costruzioni dinamiche di classi. */
/* AUDIT-FIX (2026-07-26): qui c'era una SECONDA copia di .auth-divider/.auth-alert/
   .pw-* , quasi identica a quella definita più in alto in questo stesso file. Non
   essendo identiche (questa aggiungeva `outline` a .pw-strength) vinceva questa,
   perché più in basso: chi avesse modificato la copia di sopra non avrebbe visto
   alcun effetto. L'outline è stato portato sulla copia superstite e il blocco
   duplicato rimosso, così resta una sola definizione per selettore. */

/* ── PAYOUT STYLES ── */
.payout-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.pout-btn{background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:13px;cursor:pointer;transition:all 0.2s;text-align:center}
.pout-btn:hover{border-color:var(--border2)}
.pout-btn.selected{border-color:rgba(61,232,152,0.45);background:rgba(61,232,152,0.05)}
.pout-icon{font-size:22px;margin-bottom:5px}
.pout-name{font-size:12px;font-weight:700}
.pout-time{font-size:9px;color:var(--muted);margin-top:2px}
.pout-time.fast{color:var(--green2)}
.amount-presets{display:flex;gap:6px;margin:9px 0}
.preset-btn{flex:1;padding:7px 6px;background:var(--s3);border:1px solid var(--border);border-radius:var(--rs);font-size:11px;font-weight:700;font-family:var(--fm);color:var(--text2);cursor:pointer;transition:all 0.2s;text-align:center}
.preset-btn:hover{border-color:var(--border2);color:var(--text)}
.preset-btn.active{border-color:rgba(61,232,152,0.4);background:rgba(61,232,152,0.06);color:var(--green2)}
.conversion-preview{background:var(--s2);border:1px solid rgba(61,232,152,0.18);border-radius:var(--rs);padding:13px;margin:10px 0;text-align:center}
.conv-amount{font-size:32px;font-weight:800;font-family:var(--fm);color:var(--green2);line-height:1}
.conv-sub{font-size:11px;color:var(--text2);margin-top:4px}
/* ── CHECKOUT OVERLAY ── */
.checkout-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:150;display:none;overflow-y:auto;padding:20px}
.checkout-overlay.show{display:block;animation:fadeIn 0.25s ease}

/* ── blocco 2 (payout tier visibility) ── */

/* ── Visibilità payout per tier ── */
/* minor14: payout sempre nascosto, contatori euro nascosti */
body[data-tier="minor14"] #walletPayoutSection{display:none!important}
body[data-tier="minor14"] #hEur,body[data-tier="minor14"] #psEur{display:none!important}
/* AUDIT-FIX (2026-07-26): la regola qui sopra copre solo #walletPayoutSection.
   I due bottoni che APRONO il bottom sheet su mobile non sono suoi discendenti
   — `.mr-payout-trigger` gli è FRATELLO (index.html) e `.mr-home-payout-cta`
   sta addirittura in Home — quindi restavano visibili a un account 14-15 anni.
   Inoltre `html.ui-earner #walletPayoutSection.mr-payout-open` (specificità
   1,2,1) batte questa regola (1,1,1): a sheet aperto il blocco riemergeva
   nonostante il display:none. Qui si chiudono gli ingressi; il controllo
   sostanziale sta comunque in openPayoutSheet() (wallet.js), che non dipende
   dalla cascata. Selettore con la stessa specificità del vincitore + !important
   per non ricreare lo stesso tipo di conflitto. */
body[data-tier="minor14"] .mr-payout-trigger,
body[data-tier="minor14"] .mr-home-payout-cta{display:none!important}
html.ui-earner body[data-tier="minor14"] #walletPayoutSection.mr-payout-open,
body[data-tier="minor14"] #walletPayoutSection.mr-payout-open{display:none!important}
/* minor16 non verificato: payout nascosto via JS (il CSS non può leggere emailVerified) */

/* Scrollbar sottile del pannello impostazioni */
#settingsPanel{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
#settingsPanel::-webkit-scrollbar{width:7px}
#settingsPanel::-webkit-scrollbar-thumb{background:var(--border2);border-radius:7px}
#settingsPanel::-webkit-scrollbar-track{background:transparent}
#settingsScrollBtn:hover{background:var(--s3)}
#setNotifSl::before,#setThemeSl::before,#setNeonSl::before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:0.2s}
#setNotif:checked + #setNotifSl,#setTheme:checked + #setThemeSl,#setNeon:checked + #setNeonSl{background:var(--green)}
#setNotif:checked + #setNotifSl::before,#setTheme:checked + #setThemeSl::before,#setNeon:checked + #setNeonSl::before{transform:translateX(18px)}

/* History modal */
.hist-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:300;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.hist-overlay.show{display:flex;animation:fadeIn 0.25s ease}
.hist-modal{background:var(--s1);border:1px solid var(--border2);border-radius:16px;padding:20px;max-width:520px;width:100%;position:relative;box-shadow:var(--shadow);max-height:calc(100vh - 80px);overflow-y:auto}
.hist-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:8px;background:var(--s2);border:1px solid var(--border);color:var(--text2);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hist-close:hover{background:var(--s3);color:var(--text)}
.hist-title{font-size:16px;font-weight:800;margin-bottom:4px;letter-spacing:-0.3px}
.hist-sub{font-size:11px;color:var(--text2);margin-bottom:14px;line-height:1.6}
.hist-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.hist-sumbox{background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:10px}
.hist-sumlbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:3px}
.hist-sumval{font-size:17px;font-weight:800;font-family:var(--fm)}
.hist-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.hist-row{background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.hist-row-main{flex:1;min-width:0}
.hist-row-lbl{font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-row-time{font-size:10px;color:var(--muted);font-family:var(--fm)}
.hist-row-val{font-family:var(--fm);font-weight:800;font-size:13px;white-space:nowrap}
.hist-empty{text-align:center;padding:30px 10px;color:var(--muted);font-size:12px}
html[data-theme="light"] .hist-overlay{background:rgba(12,12,20,0.45)}
html[data-theme="light"] .hist-modal{background:var(--s1);color:var(--text)}
html[data-theme="light"] .hist-sumbox,html[data-theme="light"] .hist-row{background:var(--s2);color:var(--text)}


/* ── Avvisi rischio (ToS / shadowban / volume): stile unico consolidato.
   Arancio (--orange), non ambra/oro: l'oro in questa app è già il colore
   degli ◈ Incoin/ricompense (card-gold, badge valuta) — un warning con lo
   stesso hue rischiava di leggersi come "bonus" invece che "attenzione". ── */
.risk-warn{display:none;background:rgba(255,140,66,0.1);border:1px solid rgba(255,140,66,0.4);border-radius:var(--rs);padding:11px 13px}
.risk-warn-title{font-size:12px;font-weight:800;color:var(--orange);margin-bottom:3px}
.risk-warn-body{font-size:11px;color:var(--text2);line-height:1.45}

/* ── Fase 6: press-state sui selettori tipo/azione (parità con .btn:active) ── */
.auth-tsb:active,.camp-type-btn:active,.plat-btn:active,.ntab:active{transform:scale(0.97)}
/* Light mode: l'arancio dei warning su fondo chiaro è poco leggibile → scurito */
html[data-theme="light"] .risk-warn-title{color:#a34e10}
html[data-theme="light"] .risk-warn{background:rgba(178,90,20,0.08);border-color:rgba(178,90,20,0.45)}
/* Idem per la riga "Tasse · ritenuta 20%" evidenziata nella scomposizione payout */
html[data-theme="light"] #payoutBreakdown [style*="color:var(--orange)"]{color:#a34e10 !important}

/* ── Skip-link: nascosto finché non riceve focus da tastiera ── */
.skip-link{position:fixed;top:-48px;left:12px;z-index:9999;background:var(--green);color:#07070d;font-weight:800;font-size:13px;padding:10px 16px;border-radius:0 0 10px 10px;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}

/* Marquee social-proof: in pausa quando fuori viewport o tab nascosta (perf) */
.sp-paused .sp-track{animation-play-state:paused}

/* ── REPORT CAMPAGNA STAMPABILE ── in stampa mostra SOLO #printReport
   (specificità superiore alle regole @media print esistenti che forzano
   .view{display:block}). Fuori stampa il div resta display:none inline. */
@media print{
  body.print-report>*:not(#printReport){display:none!important}
  body.print-report .view{display:none!important}
  body.print-report #printReport{display:block!important}
}

/* ── DESIGN PASS (2026-07-06) ─────────────────────────────────────────── */

/* Select native tematizzate: senza appearance:none macOS/iOS dipingono il
   controllo argento di sistema in mezzo agli input dark (era l'unico
   controllo non a tema). !important sulle prop immagine: gli shorthand
   background di .sel/#setLang azzererebbero la freccia. */
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8aa0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 11px center!important;
  padding-right:30px!important}
select:focus{border-color:var(--green)}

/* Scala tipografica desktop: i micro-testi tarati per mobile (9-11px)
   risultavano minuscoli su schermi grandi. Attribute-selector sugli stili
   inline (stesso pattern degli override light-mode) + classi principali.
   Solo ≥1024px: il mobile resta com'è. */
@media(min-width:1024px){
  [style*="font-size:9px"]{font-size:10px!important}
  [style*="font-size:10px"]{font-size:11px!important}
  [style*="font-size:11px"]{font-size:12px!important}
  .slbl{font-size:10px}
  .disc-title{font-size:14px}
  .disc-desc{font-size:12px}
  .xp-mini,.diff{font-size:10px}
  .coin-badge,.eur-badge{font-size:11px}
}

/* Lato brand su desktop largo: dashboard a 2 colonne invece della colonna
   mobile centrata (il B2B si usa su desktop — metà schermo vuoto comunicava
   "porting da app"). Earner resta a colonna singola: è mobile-first di
   proposito. Nuova/Piano restano centrate: i form larghi 1120px leggono male. */
@media(min-width:1140px){
  #view-fin .wrap{max-width:1120px}
  #f-nuova.active,#f-piano.active{max-width:832px;margin:0 auto}
  #f-home.active{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
  #f-home>.legal-banner,#f-home>.fin-stats,#f-home>.g2,#f-home>.ai-box{grid-column:1/-1}
}

/* ── Immagine di anteprima sulla card Discover (2026-07-28) ────────────────
   Presente solo se il brand ne ha caricata una: le card senza restano
   identiche a prima, quindi nessuna campagna già creata cambia aspetto.
   aspect-ratio invece di un'altezza fissa così la fascia resta proporzionata
   su qualsiasi larghezza di card, e object-fit:cover evita che un'immagine
   verticale deformi il layout. */
.disc-card .disc-thumb{
  margin:7px 0 2px;
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--s2);
}
.disc-card .disc-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* Le missioni completate perdono rilievo anche nell'immagine, coerentemente
   con l'opacità già applicata alla card. */
.disc-card.done .disc-thumb img{ filter:grayscale(0.7); opacity:0.75; }