/* SocialBot — dashboard.
   Design chiaro, preciso e arioso ispirato alle interfacce top (godly.design):
   palette neutra raffinata, un accento viola usato con parsimonia, tipografia
   curata, navigazione a sidebar con icone a tratto. Zero risorse esterne. */

:root {
  color-scheme: light;

  /* neutri (scala "zinc": pulita, professionale) */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #e9e9ec;
  --border: #ececee;
  --border-2: #dedee2;

  /* testo */
  --testo: #18181b;
  --testo-2: #55555f;
  --testo-3: #9a9aa4;

  /* accento (viola, discreto) */
  --acc: #6d3bef;
  --acc-600: #5b2fd6;
  --acc-soft: #f2eefe;
  --acc-tint: rgba(109, 59, 239, .10);
  --acc-bordo: #ddd2fb;

  /* semantici */
  --verde: #16794b;   --verde-soft: #e8f6ee;  --verde-bordo: #bfe3cd;
  --rosso: #cf3742;   --rosso-soft: #fdecec;  --rosso-bordo: #f4c9cb;
  --ambra: #8a6510;   --ambra-soft: #fdf5e2;  --ambra-bordo: #eed9a4;

  /* raggi */
  --r-xs: 6px; --r-s: 8px; --r-m: 11px; --r-l: 14px;

  /* ombre (leggerissime, molto "flat") */
  --om-s: 0 1px 2px rgba(24, 24, 27, .05);
  --om-m: 0 4px 14px rgba(24, 24, 27, .07);
  --om-l: 0 16px 44px rgba(24, 24, 27, .13);

  --molla: .18s cubic-bezier(.2, .8, .25, 1);
  --ease: cubic-bezier(.22, .9, .3, 1);        /* fluida, decelerata */
  --rev-ease: cubic-bezier(.16, 1, .3, 1);     /* "expo out": decelerazione elegante */
  --spring: cubic-bezier(.34, 1.35, .5, 1);    /* leggero rimbalzo */

  /* barra in alto */
  --top-h: 60px;
  /* colori-firma dei gruppi di navigazione (tenui, mai sgargianti) */
  --g-panoramica: #9146ff; --g-personaggio: #5b8def; --g-chat: #2fb98a;
  --g-diretta: #f2635a; --g-interazione: #e0913a; --g-overlay: #d364b8;
  --g-notifiche: #3aa6c9; --g-admin: var(--acc);
}

html { scroll-behavior: smooth; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
h1, h2, h3, p, li, span, strong { overflow-wrap: break-word; }

::selection { background: var(--acc-tint); }

a { color: var(--acc); text-decoration: none; transition: color var(--molla); }
a:hover { color: var(--acc-600); text-decoration: underline; text-underline-offset: 2px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: .07em .38em; font-size: .85em;
}

/* ============================================================ guscio */
.guscio { display: flex; flex-direction: column; min-height: 100vh; }
.area-principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.contenuto {
  width: 100%; max-width: 1080px; margin: 0 auto; flex: 1;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.1rem, 4vw, 2.4rem) 3rem;
}
body:not(.con-nav) .contenuto { max-width: 640px; }
body:not(.con-nav) .barra-top { display: none; }

.caricamento { color: var(--testo-2); text-align: center; padding: 4rem 0; }
.caricamento::after {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .5em; vertical-align: -.15em;
  border: 2px solid var(--border-2); border-top-color: var(--acc); border-radius: 50%;
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ============================================================ barra in alto */
.barra-top {
  position: sticky; top: 0; z-index: 50; height: var(--top-h);
  display: flex; align-items: center; gap: .8rem;
  padding: 0 clamp(.9rem, 2.4vw, 1.6rem);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}

/* marchio */
.marchio { display: flex; align-items: center; gap: .5rem; flex: none; color: var(--testo); }
.marchio:hover { text-decoration: none; }
.marchio-segno { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; object-fit: contain; display: block; }
.marchio-testo { display: flex; flex-direction: column; line-height: 1.12; font-weight: 750; font-size: .98rem; letter-spacing: -.01em; }
.marchio-testo small { font-weight: 500; font-size: .68rem; color: var(--testo-3); letter-spacing: 0; }

/* navigazione a gruppi (menu a tendina) */
.nav-top { display: flex; align-items: center; gap: .05rem; flex: 1 1 auto; min-width: 0; justify-content: center; }
.grp { position: relative; flex: none; }
.grp-btn {
  display: inline-flex; align-items: center; gap: .36rem; border: 0; background: none;
  color: var(--testo-2); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer;
  padding: .42rem .5rem; border-radius: var(--r-s); white-space: nowrap;
  transition: color var(--molla), background var(--molla);
}
.grp-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gc); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 18%, transparent); transition: box-shadow var(--molla);
}
.grp-btn .lat-chevron { width: 13px; height: 13px; opacity: .55; }
.grp-btn:hover { color: var(--testo); background: var(--surface-2); }
.grp.aperto > .grp-btn { color: var(--testo); background: var(--surface-2); }
.grp.aperto > .grp-btn .lat-chevron { transform: rotate(180deg); }
.grp.attivo > .grp-btn { color: var(--gc); }
.grp.attivo > .grp-btn .grp-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc) 24%, transparent); }

.grp-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 232px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  box-shadow: var(--om-l); padding: .35rem; display: none;
}
.grp-menu.a-destra { left: auto; right: 0; }
.grp.aperto .grp-menu { display: block; animation: menu-giu .16s var(--ease); }
@keyframes menu-giu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.menu-voce {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; border: 0;
  background: none; color: var(--testo); font: inherit; font-size: .88rem; cursor: pointer;
  padding: .5rem .55rem; border-radius: var(--r-s); transition: background var(--molla), color var(--molla);
}
.menu-voce .lat-svg { color: var(--gc); flex: none; opacity: .9; }
.menu-voce:hover { background: var(--surface-2); }
.menu-voce.on { background: color-mix(in srgb, var(--gc) 12%, transparent); color: var(--gc); font-weight: 600; }
.menu-voce.on .lat-svg { opacity: 1; }

/* icone della navigazione (SVG a tratto, riusate anche nel cassetto) */
.lat-svg { flex-shrink: 0; color: var(--testo-3); }
.lat-chevron { transition: transform .25s var(--ease); }

/* strumenti a destra: canale + esci */
.top-strumenti { display: flex; align-items: center; gap: .5rem; flex: none; margin-left: auto; }
.chip-utente {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: .36rem .72rem; font-size: .84rem; color: var(--testo-2); white-space: nowrap;
}
.chip-utente strong { color: var(--testo); }
.top-strumenti select.chip-utente { cursor: pointer; max-width: 168px; }
.top-strumenti .btn { flex: none; }

/* hamburger (compare quando la barra collassa) */
.apri-menu {
  display: none; width: 40px; height: 40px; flex-shrink: 0; margin-left: auto;
  flex-direction: column; justify-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; padding: 10px;
}
.apri-menu span { display: block; height: 2px; background: var(--testo); border-radius: 2px; transition: transform .25s, opacity .2s; }
body.menu-aperto .apri-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-aperto .apri-menu span:nth-child(2) { opacity: 0; }
body.menu-aperto .apri-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================ cassetto mobile */
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 320px); z-index: 61;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--om-l);
  transform: translateX(100%); transition: transform .3s var(--spring);
  overflow-y: auto; padding: .6rem; display: none;
}
body.con-nav .drawer { display: block; }
body.menu-aperto .drawer { transform: none; }
.drawer-testa { display: flex; align-items: center; justify-content: space-between; padding: .5rem .5rem .7rem; font-weight: 700; }
.chiudi-drawer { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--testo-2); cursor: pointer; }
.chiudi-drawer:hover { color: var(--testo); }
.drawer-grp { padding: .3rem 0; }
.drawer-grp-tit {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--gc);
  padding: .5rem .5rem .25rem; display: flex; align-items: center; gap: .4rem;
}
.drawer-grp-tit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gc); }
.drawer-voce {
  display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left; border: 0; background: none;
  color: var(--testo); font: inherit; font-size: .95rem; padding: .58rem .55rem; border-radius: var(--r-s); cursor: pointer;
}
.drawer-voce .lat-svg { color: var(--gc); opacity: .85; }
.drawer-voce:hover { background: var(--surface-2); }
.drawer-voce.on { background: color-mix(in srgb, var(--gc) 13%, transparent); color: var(--gc); font-weight: 600; }
.drawer-voce.on .lat-svg { opacity: 1; }
.drawer-utente { border-top: 1px solid var(--border); margin-top: .5rem; padding: .8rem .3rem .3rem; display: flex; flex-direction: column; gap: .5rem; }
.drawer-utente .chip-utente { white-space: normal; }
.drawer-utente .btn { width: 100%; text-align: center; }

.backdrop { display: none; }

/* ============================================================ intestazione pagina */
.pagina-testata { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.pagina-testata:empty { display: none; }
.pt-occhiello { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gc, var(--acc)); margin-bottom: .5rem; }
.pagina-testata h1 { font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.05rem); font-weight: 800; letter-spacing: -.032em; line-height: 1.1; }
.pagina-testata p { color: var(--testo-2); font-size: 1rem; margin-top: .5rem; max-width: 62ch; }
/* l'intestazione entra a cascata ad ogni cambio sezione (innerHTML rifatto):
   occhiello e descrizione scivolano su, il TITOLO si rivela parola per parola. */
.pagina-testata > .pt-occhiello, .pagina-testata > p { animation: pt-in .6s var(--rev-ease) backwards; }
.pagina-testata .pt-occhiello { animation-delay: .02s; }
.pagina-testata p { animation-delay: .34s; }
@keyframes pt-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* rivelazione parola-per-parola del titolo: ogni parola è mascherata e scivola
   dal basso, con un piccolo ritardo progressivo (--wd) → effetto "stampa". */
.pt-parola { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.pt-parola > i {
  display: inline-block; font-style: inherit;
  animation: parola-su .72s var(--rev-ease) both;
  animation-delay: var(--wd, 0ms);
}
@keyframes parola-su { from { transform: translateY(110%); } to { transform: translateY(0); } }

/* ============================================================ carte */
.carta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); padding: clamp(1.15rem, 2.6vw, 1.6rem); margin-bottom: 1.1rem; box-shadow: var(--om-s); }
.carta h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.012em; margin-bottom: .45rem; }
.carta h3 { font-size: .95rem; font-weight: 700; margin: .95rem 0 .4rem; }
.carta p { color: var(--testo-2); }
.carta .primo-piano { color: var(--testo); font-weight: 600; }
.carta.evidenziata { border-color: var(--acc-bordo); box-shadow: 0 0 0 1px var(--acc-tint), var(--om-m); }
.carta.avviso { border-color: var(--ambra-bordo); background: var(--ambra-soft); }
.carta.avviso h2, .carta.avviso p { color: var(--ambra); }

.pannello-scheda { display: none; }
.pannello-scheda.visibile { display: block; }

/* SCROLL-REVEAL (stile Awwwards): le carte entrano morbide quando compaiono,
   sia al cambio scheda sia scorrendo. Lo stato lo gestisce l'IntersectionObserver
   in app.js (classe .dentro). Easing "expo" per una decelerazione elegante. */
.carta.rivela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .8s var(--rev-ease);
  transition-delay: var(--rev-delay, 0ms);
}
.carta.rivela.dentro { opacity: 1; transform: none; }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================ view transitions
   Al cambio sezione il corpo pagina (#app) fa un morph morbido (dissolvenza +
   scivolamento) mentre la pillola del menu scorre sulla nuova voce. La radice
   non si anima, così sidebar e titolo cambiano netti senza sfarfallii. */
#app { view-transition-name: contenuto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(contenuto) { animation: vt-esce .22s var(--ease) both; }
::view-transition-new(contenuto) { animation: vt-entra .34s var(--rev-ease) both; }
@keyframes vt-esce { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }

/* ============================================================ vetrina (landing pubblica)
   Ciò che vede chi NON è loggato: una vetrina del bot, zero dati privati, con
   richiamo al sito principale. Riusa i token e le animazioni della dashboard. */
body.vetrina .contenuto { max-width: 1040px; }

.vetrina-hero {
  position: relative; text-align: center;
  padding: clamp(1.6rem, 5vw, 3.4rem) clamp(.6rem, 4vw, 1.4rem) clamp(1.8rem, 4vw, 2.6rem);
}
/* alone viola che "respira" dietro al titolo */
.vetrina-hero::before {
  content: ""; position: absolute; z-index: -1; top: 8%; left: 50%; transform: translateX(-50%);
  width: min(560px, 82%); aspect-ratio: 1.4 / 1;
  background: radial-gradient(closest-side, var(--acc-tint), transparent 72%);
  filter: blur(8px); animation: respiro 7s var(--ease) infinite;
}
@keyframes respiro { 0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.12); } }

.vetrina-occhiello {
  display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc); background: var(--acc-soft); border: 1px solid var(--acc-bordo);
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1.1rem;
  animation: pt-in .6s var(--rev-ease) backwards;
}
.vetrina-titolo { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.3rem); font-weight: 800; letter-spacing: -.038em; line-height: 1.05; margin-bottom: .9rem; }
.vetrina-titolo .acc { color: var(--acc); }
.vetrina-sub { font-size: clamp(1rem, .95rem + .4vw, 1.18rem); color: var(--testo-2); max-width: 60ch; margin: 0 auto; }
.vetrina-sub strong { color: var(--testo); }
.vetrina-azioni { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: 1.6rem 0 .8rem; animation: pt-in .6s var(--rev-ease) .5s backwards; }
.vetrina-hero .nota { font-size: .85rem; color: var(--testo-2); margin-top: .4rem; }
/* scorciatoie d'accesso per chi è già dentro (passkey / moderatore) */
.vetrina-accessi { margin-top: 1rem; font-size: .88rem; color: var(--testo-3); }
.vetrina-accessi a { color: var(--acc); font-weight: 600; text-decoration: none; margin: 0 .15rem; white-space: nowrap; }
.vetrina-accessi a:hover { text-decoration: underline; }
.vetrina-accessi span { color: var(--testo-3); margin: 0 .2rem; }

/* riga controlli (lingua + tema) in cima alla vetrina */
.vetrina-controlli { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.vetrina-controlli .lingua-sel { margin-bottom: 0; }

/* selettore lingua (IT/EN/ES) in cima alla vetrina */
.lingua-sel { display: inline-flex; gap: 2px; margin-bottom: 1.1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
/* variante compatta per la barra in alto */
.lingua-sel.mini { margin-bottom: 0; padding: 2px; }
.lingua-sel.mini .lingua-btn { font-size: .72rem; padding: .2rem .44rem; }
/* riga controlli (lingua + tema) nel cassetto mobile */
.drawer-controlli { display: inline-flex; align-items: center; gap: .5rem; }
.lingua-btn { border: 0; background: none; color: var(--testo-3); font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .02em; padding: .26rem .6rem; border-radius: 999px; cursor: pointer; transition: color var(--molla), background var(--molla); }
.lingua-btn:hover { color: var(--testo); }
.lingua-btn.on { background: var(--surface); color: var(--acc); box-shadow: var(--om-s); }

/* interruttore tema chiaro/scuro (sole/luna). Icona a tratto, niente emoji. */
.tema-toggle {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--testo-2);
  cursor: pointer; padding: 0;
  transition: color var(--molla), background var(--molla), border-color var(--molla);
}
.tema-toggle:hover { color: var(--testo); border-color: var(--border-2); }
.tema-toggle svg { width: 17px; height: 17px; display: block; }
/* mostra sole in scuro (per tornare al chiaro), luna in chiaro */
.tema-toggle .ico-sole { display: none; }
.tema-toggle .ico-luna { display: block; }
:root[data-theme="dark"] .tema-toggle .ico-sole { display: block; }
:root[data-theme="dark"] .tema-toggle .ico-luna { display: none; }

/* chip di beneficio sotto la CTA */
.vetrina-chip { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.1rem; margin: .2rem 0 0; padding: 0; }
.vetrina-chip li { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; font-weight: 600; color: var(--testo-2); }
.vetrina-chip .b-ico { margin: 0; color: var(--verde); }

/* anteprima "overlay in azione" (fotogramma di diretta stilizzato) */
.vetrina-preview { max-width: 560px; margin: 1.9rem auto 0; animation: pt-in .7s var(--rev-ease) .6s backwards; }
.vp-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--border-2); box-shadow: var(--om-l); background: linear-gradient(150deg, #2a2350, #14121f 72%); color: #fff; }
.vp-scene { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; letter-spacing: .06em; font-size: 1.3rem; color: #ffffff26; }
.vp-live { position: absolute; top: 12px; left: 12px; font-size: .68rem; font-weight: 800; color: #fff; background: #e0245e; padding: .16rem .5rem; border-radius: 999px; letter-spacing: .03em; }
.vp-cam { position: absolute; right: 12px; bottom: 12px; width: 28%; aspect-ratio: 16 / 9; border-radius: 8px; background: #0d0b16; border: 1px solid #ffffff22; display: grid; place-items: center; font-size: .7rem; color: #ffffff66; }
.vp-alert { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem; background: rgba(20, 16, 34, .92); border: 1px solid #ffffff26; border-radius: 12px; padding: .48rem .8rem; white-space: nowrap; box-shadow: 0 8px 24px #0007; }
.vp-alert-ic { color: #ffb020; display: inline-flex; }
.vp-alert-tx { font-size: .8rem; } .vp-alert-tx b { color: #ffce5a; }
.vp-chat { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: .28rem; max-width: 62%; align-items: flex-start; }
.vp-msg { font-size: .78rem; background: rgba(12, 12, 18, .58); border-radius: 8px; padding: .16rem .5rem; }
.vp-msg b { font-weight: 700; }
.vp-emote { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.2em; border-radius: 4px; background: linear-gradient(135deg, #7a34e6, #38d39f); }
.vp-cap { text-align: center; font-size: .82rem; color: var(--testo-3); margin-top: .7rem; }

/* griglia funzioni */
.vetrina-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.1rem; }
.vetrina-feat { margin-bottom: 0; }
/* hover: evidenzia bordo + ombra (istantaneo, per non entrare in conflitto con
   la transizione di scroll-reveal della carta) */
.carta.vetrina-feat:hover { border-color: var(--acc-bordo); box-shadow: var(--om-m); }
.vetrina-feat-ico { display: inline-flex; padding: .55rem; border-radius: var(--r-m); background: var(--acc-soft); color: var(--acc); margin-bottom: .8rem; }
.vetrina-feat h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .35rem; }
.vetrina-feat p { color: var(--testo-2); font-size: .92rem; line-height: 1.55; }

/* passi */
.vetrina-come h2, .vetrina-cta h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 1.1rem; }
.vetrina-passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
.vetrina-passo { display: flex; gap: .8rem; align-items: flex-start; }
.vetrina-passo-n { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--acc); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: 0 2px 8px rgba(109, 59, 239, .28); }
.vetrina-passo strong { display: block; margin-bottom: .15rem; }
.vetrina-passo p { color: var(--testo-2); font-size: .9rem; line-height: 1.5; }

/* banda di richiamo al sito principale */
.vetrina-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; background: linear-gradient(120deg, var(--acc-soft), var(--surface)); border-color: var(--acc-bordo); }
.vetrina-cta h2 { margin-bottom: .3rem; }
.vetrina-cta p { color: var(--testo-2); max-width: 52ch; }
.vetrina-cta .btn { flex-shrink: 0; }

/* FAQ (vetrina) — accordion accessibile */
.vetrina-faq { margin-bottom: 1.1rem; }
.vetrina-faq h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: .4rem; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary { cursor: pointer; list-style: none; padding: .9rem .1rem; font-weight: 600; color: var(--testo); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.35em; line-height: 1; color: var(--acc); transition: transform var(--molla); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 .1rem .95rem; color: var(--testo-2); line-height: 1.6; }
.faq-item a { color: var(--acc); }

/* piani / prezzi (vetrina) */
.vetrina-piani { margin-bottom: 1.1rem; }
.vetrina-piani-testa { text-align: center; margin-bottom: 1.2rem; }
.vetrina-piani-testa h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.vetrina-piani-testa p { color: var(--testo-2); margin-top: .35rem; }
/* ── Piani MODULARI "componi il tuo bot": Base + add-on à la carte ── */
.piani-componi { display: flex; flex-direction: column; gap: 1.1rem; }
.piano h3 { font-size: 1.15rem; font-weight: 700; }
.piano-somm { color: var(--testo-2); font-size: .9rem; }
.piano-funzioni { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem .9rem; }
.piano-funzioni li { font-size: .9rem; color: var(--testo-2); display: flex; align-items: center; gap: .5rem; }
.pf-val { flex-shrink: 0; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%; font-size: .78rem; font-weight: 700; }
.pf-val.si { background: var(--verde-soft); color: var(--verde); }
.pf-val.no { background: var(--surface-2); color: var(--testo-3); }

/* Base: la carta-fondamenta */
.piano-base { border-color: var(--acc-bordo); box-shadow: 0 10px 30px rgba(109, 59, 239, .1); }
.piano-base-testa { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.piano-icona { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-m); background: var(--acc-soft, rgba(109, 59, 239, .12)); color: var(--acc); }
.piano-icona svg { width: 1.7rem; height: 1.7rem; }
.piano-base-testa .piano-somm { margin-top: .15rem; }
.piano-prezzo { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: var(--acc); white-space: nowrap; text-align: right; }
.piano-prezzo span { font-size: .8rem; font-weight: 600; color: var(--testo-3); letter-spacing: 0; }

/* Add-on: pacchetti componibili selezionabili */
.addon-titolo { font-size: 1.05rem; font-weight: 700; margin-bottom: .7rem; }
.addon-titolo span { color: var(--testo-3); font-weight: 500; font-size: .9rem; }
.addon-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .8rem; }
.addon-carta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; text-align: left; width: 100%; padding: .9rem 1rem; border: 1.5px solid var(--border); border-radius: var(--r-m); background: var(--surface); color: inherit; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.addon-carta:hover { border-color: var(--acc-bordo); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(109, 59, 239, .12); }
.addon-carta:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* selezionato: bordi "evidenziati" di viola (anello accent), niente pallini */
.addon-carta.on { border-color: var(--acc); background: var(--acc-soft, rgba(109, 59, 239, .08)); box-shadow: 0 0 0 1.5px var(--acc), 0 10px 24px rgba(109, 59, 239, .2); }
.addon-icona { width: 2.5rem; height: 2.5rem; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-s, 10px); background: var(--acc-soft, rgba(109, 59, 239, .1)); color: var(--acc); transition: background .18s ease, color .18s ease; }
.addon-icona svg { width: 1.35rem; height: 1.35rem; }
.addon-carta.on .addon-icona { background: var(--acc); color: #fff; }
.addon-testo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.addon-nome { font-weight: 700; font-size: .95rem; }
.addon-somm { color: var(--testo-2); font-size: .82rem; line-height: 1.35; }
.addon-prezzo { align-self: center; font-weight: 800; color: var(--acc); white-space: nowrap; font-size: .95rem; }

/* Bundle: set curati scontati (griglia come gli add-on, look "in evidenza") */
.bundle-blocco { margin-bottom: 1.2rem; }
.bundle-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .8rem; }
/* card verticale: icona + prezzo in alto, testo (nome + sommario) sotto a tutta
   larghezza → i nomi non si spezzano nelle colonne strette */
.bundle-carta { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .55rem .7rem; text-align: left; width: 100%; padding: .9rem 1rem; border: 1.5px solid var(--acc-bordo); border-radius: var(--r-m); background: linear-gradient(180deg, var(--acc-soft, rgba(109, 59, 239, .08)), var(--surface)); color: inherit; cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.bundle-carta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(109, 59, 239, .14); }
.bundle-carta:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.bundle-carta.on { border-color: var(--acc); box-shadow: 0 0 0 1.5px var(--acc), 0 10px 24px rgba(109, 59, 239, .2); }
.bundle-icona { grid-row: 1; grid-column: 1; width: 2.5rem; height: 2.5rem; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-s, 10px); background: var(--acc); color: #fff; }
.bundle-icona svg { width: 1.35rem; height: 1.35rem; }
.bundle-prezzo { grid-row: 1; grid-column: 2; justify-self: end; text-align: right; white-space: nowrap; color: var(--acc); font-size: .95rem; }
.bundle-testo { grid-row: 2; grid-column: 1 / -1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.bundle-nome { font-weight: 800; font-size: 1rem; }
.bundle-somm { color: var(--testo-2); font-size: .82rem; line-height: 1.35; }
.bundle-prezzo s { color: var(--testo-3); font-weight: 600; margin-right: .15rem; }
.bundle-prezzo strong { font-weight: 800; }
.bundle-prezzo small { color: var(--testo-3); font-weight: 600; font-size: .78rem; }
.bundle-sconto { display: inline-block; background: var(--verde, #16794b); color: #fff; font-weight: 800; font-size: .72rem; padding: .06rem .4rem; border-radius: 999px; vertical-align: 1px; }

/* Riepilogo: totale live + CTA unica */
.piani-riepilogo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--acc-bordo); border-radius: var(--r-m); background: var(--acc-soft, rgba(109, 59, 239, .07)); }
.riepilogo-conto { display: flex; flex-direction: column; gap: .1rem; }
.riepilogo-voce { color: var(--testo-2); font-size: .85rem; font-weight: 600; }
.riepilogo-tot { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--acc); }
.riepilogo-tot span { font-size: .85rem; font-weight: 600; color: var(--testo-3); letter-spacing: 0; }
.piani-riepilogo .btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .piano-base-testa { grid-template-columns: auto 1fr; }
  .piano-base-testa .piano-prezzo { grid-column: 1 / -1; text-align: left; }
  .piani-riepilogo { justify-content: stretch; }
  .piani-riepilogo .btn { width: 100%; }
}
/* i membri abilitati della community hanno il bot gratis e completo */
.piani-community { margin-top: 1.1rem; text-align: center; padding: .85rem 1rem; background: var(--verde-soft); border: 1px solid var(--verde-bordo); border-radius: var(--r-m); color: var(--testo-2); font-size: .92rem; line-height: 1.5; }
.piani-community strong { color: var(--testo); }
.piani-community a { color: var(--acc); font-weight: 600; }

/* Connettore Spotify (scheda Musica) */
.spotify-guida { margin-top: .4rem; }
.spotify-guida summary, details > summary { cursor: pointer; font-weight: 600; color: var(--acc); }
.spotify-guida ol { margin: .7rem 0 .2rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .45rem; color: var(--testo-2); font-size: .9rem; line-height: 1.5; }
.spotify-redirect { display: inline-block; margin-top: .25rem; padding: .3rem .5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s); word-break: break-all; font-size: .82rem; }
.riquadro-info { padding: .7rem .9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); font-size: .9rem; color: var(--testo-2); line-height: 1.5; }
.riquadro-info .ok-riga { color: var(--verde); font-weight: 600; margin-top: .35rem; }
.riquadro-info .warn-riga { color: var(--ambra, #b45309); font-weight: 600; margin-top: .35rem; }

/* Mini-guida "Come funziona" in cima a ogni scheda: evidenzia a cosa serve e come si fa */
.guida-scheda { margin-top: 1.1rem; max-width: 720px; background: var(--acc-soft); border: 1px solid var(--acc-bordo); border-radius: var(--r-m); padding: .7rem 1rem; }
.guida-scheda > summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; font-weight: 700; color: var(--acc); font-size: .95rem; }
.guida-scheda > summary::-webkit-details-marker { display: none; }
.guida-scheda > summary::after { content: ''; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; opacity: .8; }
.guida-scheda[open] > summary::after { transform: rotate(-135deg); }
.guida-ico { display: inline-flex; }
.guida-corpo { margin-top: .6rem; }
.guida-serve { color: var(--testo); font-size: .92rem; line-height: 1.5; }
.guida-serve strong { color: var(--acc); }
.guida-titolo { margin-top: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-3); }
.guida-come { margin: .3rem 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .3rem; color: var(--testo-2); font-size: .9rem; line-height: 1.45; }
.guida-come li::marker { color: var(--acc); font-weight: 700; }

/* Icona SVG nei titoli delle sezioni (in tinta accento), al posto delle emoji */
.h-ico { color: var(--acc); vertical-align: -.22em; margin-right: .45rem; }

/* griglia di campi numerici (personalizzazione punti/classifica) */
.griglia-punti { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-top: .6rem; }
.campo-num { display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; font-weight: 600; color: var(--testo-2); }
.campo-num input { font-family: inherit; font-size: .95rem; padding: .5rem .6rem; border: 1px solid var(--border-2); border-radius: var(--r-s); background: var(--surface); color: var(--testo); }
.campo-num input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-tint); }

/* ============================================================ demo
   Barra fissa in alto + striscia di spiegazione per la dashboard in modalità demo. */
#demo-barra {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-bottom: 1.1rem; padding: .7rem .9rem;
  background: linear-gradient(120deg, var(--acc-soft), var(--surface));
  border: 1px solid var(--acc-bordo); border-radius: var(--r-m);
  animation: pt-in .5s var(--rev-ease) backwards;
}
#demo-barra .demo-punto { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 var(--acc-tint); animation: demo-pulsa 1.8s var(--ease) infinite; }
@keyframes demo-pulsa { 0% { box-shadow: 0 0 0 0 rgba(109,59,239,.35); } 70% { box-shadow: 0 0 0 8px rgba(109,59,239,0); } 100% { box-shadow: 0 0 0 0 rgba(109,59,239,0); } }
#demo-barra .demo-testo { flex: 1 1 260px; font-size: .9rem; color: var(--testo-2); line-height: 1.45; }
#demo-barra .demo-testo strong { color: var(--acc); }
#demo-barra .demo-azioni { display: flex; gap: .5rem; flex-shrink: 0; }

.demo-spiega { display: flex; gap: .7rem; align-items: flex-start; background: var(--acc-soft); border-color: var(--acc-bordo); margin-bottom: 1.1rem; }
.demo-spiega .demo-spiega-ico { flex-shrink: 0; font-size: 1.15rem; line-height: 1.3; }
.demo-spiega p { color: var(--testo-2); font-size: .92rem; line-height: 1.55; margin: 0; }
.demo-spiega p strong { color: var(--testo); }

/* ============================================================ bottoni */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acc); color: #fff; border: none; border-radius: var(--r-s);
  padding: .55rem 1.1rem; min-height: 38px;
  font-size: .9rem; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none;
  /* --mx/--my: spostamento "magnetico" verso il cursore (impostato da app.js) */
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: background var(--molla), transform .18s var(--ease), box-shadow var(--molla);
}
.btn:hover { background: var(--acc-600); color: #fff; box-shadow: 0 8px 20px rgba(109, 59, 239, .3); text-decoration: none; transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 1px)); }
.btn:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97); transition-duration: .07s; }
.btn:disabled { opacity: .5; cursor: wait; box-shadow: none; }
.btn.grande { padding: .7rem 1.5rem; min-height: 44px; font-size: .98rem; }
.btn.secondario { background: var(--surface); border: 1px solid var(--border-2); color: var(--testo); }
.btn.secondario:hover { background: var(--surface-2); color: var(--testo); border-color: var(--testo-3); box-shadow: none; }
.btn.pericolo { background: var(--rosso); }
.btn.pericolo:hover { background: #bb2f39; box-shadow: 0 4px 14px rgba(207, 55, 66, .22); }
.btn.mini { padding: .3rem .7rem; min-height: 0; font-size: .8rem; border-radius: var(--r-xs); }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }

/* ============================================================ form */
label.campo { display: block; margin: .85rem 0 .3rem; font-weight: 600; font-size: .88rem; }
.suggerimento { font-size: .82rem; color: var(--testo-2); margin-top: .28rem; }
/* testo secondario in linea (es. sottotitolo accanto a un h4) */
.tenue { color: var(--testo-2); font-weight: 400; font-size: .9em; }
.carta h4 { margin: 1rem 0 .1rem; font-size: .96rem; font-weight: 700; }
/* notina neutra per un dettaglio discorsivo (es. esito del pre-addestramento):
   una frase, non un'etichetta → niente pillola colorata che va a capo storta */
.nota-lettura { margin-top: .5rem; padding: .55rem .75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s); color: var(--testo-2); font-size: .86rem; line-height: 1.5; }

input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], textarea, select {
  width: 100%; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-s);
  color: var(--testo); padding: .56rem .75rem; font-size: .92rem; font-family: inherit;
  transition: border-color var(--molla), box-shadow var(--molla);
}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="search"]:hover, input[type="tel"]:hover, textarea:hover, select:hover { border-color: var(--testo-3); }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-tint); }
textarea { min-height: 110px; resize: vertical; }
input[type="range"] { width: 100%; accent-color: var(--acc); }
input[type="number"] { width: 92px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-s); color: var(--testo); padding: .5rem .6rem; font-size: .92rem; transition: border-color var(--molla), box-shadow var(--molla); }
input[type="number"]:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-tint); }
input[type="checkbox"] { accent-color: var(--acc); width: 1.05rem; height: 1.05rem; }
.riga-check { display: flex; align-items: center; gap: .55rem; margin: .7rem 0; }
.riga-check label { cursor: pointer; }

input[type="file"] { width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-s); color: var(--testo-2); padding: .5rem .7rem; font-size: .9rem; }
input[type="file"]::file-selector-button { background: var(--acc); color: #fff; border: none; border-radius: var(--r-xs); padding: .4rem .9rem; margin-right: .8rem; cursor: pointer; font-weight: 600; font-family: inherit; transition: background var(--molla); }
input[type="file"]::file-selector-button:hover { background: var(--acc-600); }

/* interruttore */
.interruttore { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; }
.interruttore input { opacity: 0; width: 0; height: 0; }
.levetta { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 999px; cursor: pointer; transition: background var(--molla), border-color var(--molla); }
.levetta::before { content: ""; position: absolute; height: 19px; width: 19px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: var(--om-s); transition: transform .28s var(--spring); }
.interruttore input:checked + .levetta { background: var(--acc); border-color: var(--acc); }
.interruttore input:checked + .levetta::before { transform: translateX(19px); }
.interruttore input:focus-visible + .levetta { outline: 2px solid var(--acc); outline-offset: 2px; }
.riga-interruttore { display: flex; align-items: center; gap: .85rem; }
.riga-interruttore .etichetta-stato { font-weight: 700; font-size: 1.02rem; }

/* ============================================================ badge */
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .14rem .6rem; font-size: .76rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); color: var(--testo-2); }
.badge.verde  { color: var(--verde); border-color: var(--verde-bordo); background: var(--verde-soft); }
.badge.rosso  { color: var(--rosso); border-color: var(--rosso-bordo); background: var(--rosso-soft); }
.badge.viola  { color: var(--acc);   border-color: var(--acc-bordo); background: var(--acc-soft); }
.badge.giallo { color: var(--ambra); border-color: var(--ambra-bordo); background: var(--ambra-soft); }

/* ============================================================ liste */
.lista-voci { list-style: none; margin-top: .6rem; }
.lista-voci li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: .65rem .85rem; margin-bottom: .5rem; display: flex; gap: .7rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; transition: border-color var(--molla), background var(--molla); }
.lista-voci li:hover { border-color: var(--border-2); background: var(--surface-2); }
.lista-voci .testo-voce { flex: 1; min-width: 200px; }
.lista-voci .domanda { font-weight: 600; }
.lista-voci .risposta { color: var(--testo-2); font-size: .9rem; }
.lista-voci .meta { font-size: .78rem; color: var(--testo-3); }
.vuoto { color: var(--testo-2); font-style: italic; padding: .6rem 0; }

/* penitenze: elenchino dentro il riquadro-info + pillolina "+1" */
.riquadro-info .lista-punti { margin: .4rem 0 0; padding-left: 1.1rem; }
.riquadro-info .lista-punti li { margin: .25rem 0; }
.pen-inline-num { display: inline-block; background: #ff2d2d; color: #fff; font-weight: 800; font-size: .78rem; padding: .05rem .4rem; border-radius: 6px; vertical-align: baseline; }

/* alert eventi: una griglia di blocchi (follow/sub/cheer/raid) */
.alert-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem; }
.alert-blocco { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: .8rem .9rem; }
.alert-blocco:hover { border-color: var(--border-2); }
/* Media dell'alert: due slot affiancati (Suono | Immagine-video), ognuno con
   scelta dalla libreria + caricamento diretto. Responsive: in colonna se stretto. */
.al-media-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.al-slot { background: var(--bg-2, rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: var(--r-s); padding: .6rem .65rem; }
.al-slot > .campo { font-weight: 600; }
.al-slot select { width: 100%; }
.al-carica { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .5rem; }
.al-carica .btn { white-space: nowrap; }
.al-up-esito { font-size: .8rem; }

/* --- Libreria condivisa ------------------------------------------------ */
.lib-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0 .8rem; }
.lib-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.lib-tab.attivo { background: var(--viola, #9146ff); color: #fff; border-color: transparent; }
#lib-cerca { flex: 1 1 180px; min-width: 140px; }
.lib-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.lib-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: .55rem; display: flex; flex-direction: column; gap: .35rem; }
.lib-card:hover { border-color: var(--border-2); }
.lib-media-wrap { position: relative; aspect-ratio: 16/9; border-radius: var(--r-s); overflow: hidden; background: #0000002e; display: flex; align-items: center; justify-content: center; }
.lib-media { width: 100%; height: 100%; object-fit: contain; display: block; }
.lib-media.lib-audio { font-size: 2.2rem; }
.lib-combo { position: absolute; left: 4px; bottom: 4px; font-size: .68rem; background: #000000a6; color: #fff; padding: 1px 6px; border-radius: 999px; }
.lib-nome { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-azioni { display: flex; align-items: center; gap: .4rem; margin-top: auto; }
.lib-azioni .lib-importa { flex: 1; }

/* --- Regia (Vai live) -------------------------------------------------- */
.regia-badge { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; letter-spacing: .02em; padding: .28rem .7rem; border-radius: 999px; font-size: .95rem; }
.regia-badge.live { color: #fff; background: #e0245e; box-shadow: 0 0 0 3px #e0245e33; animation: regiaPulse 2s infinite; }
.regia-badge.off  { color: var(--testo-2); background: var(--surface-2); border: 1px solid var(--border); }
@keyframes regiaPulse { 0%,100% { box-shadow: 0 0 0 3px #e0245e33; } 50% { box-shadow: 0 0 0 6px #e0245e1a; } }
.regia-metriche { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .7rem; }
.regia-metrica { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s); padding: .5rem .8rem; min-width: 100px; }
.regia-metrica span { display: block; font-size: .74rem; color: var(--testo-2); }
.regia-metrica strong { font-size: 1.25rem; }
.regia-gioco-cur { font-size: .9rem; color: var(--testo-2); margin-bottom: .35rem; }
.regia-gioco { position: relative; }
.regia-gioco input { width: 100%; }
.regia-gioco-lista { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 4px; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-s); box-shadow: 0 12px 30px #0006; }
.rg-opt { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .4rem .6rem; background: none; border: 0; border-bottom: 1px solid var(--border); color: inherit; cursor: pointer; font-size: .9rem; }
.rg-opt:hover { background: var(--surface-2); }
.rg-opt img { width: 30px; height: 40px; object-fit: cover; border-radius: 3px; flex: none; }
.rg-vuoto { padding: .6rem; color: var(--testo-2); font-size: .85rem; }
.regia-azioni { display: flex; flex-direction: column; gap: .7rem; }
.regia-riga { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.regia-riga input[type="text"] { flex: 1 1 180px; min-width: 140px; }
.regia-riga .btn { white-space: nowrap; }

/* icona in linea nei bottoni/etichette */
.b-ico { vertical-align: -2px; margin-right: .35rem; flex: none; }
.lib-tab .b-ico, .studio-add .btn .b-ico { margin-right: .3rem; }

/* --- Studio Web: un vero studio nel browser (scene → fonti) ----------- */
/* barra delle scene */
.studio-scene { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.studio-scena { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border: 1px solid var(--border-2); background: var(--surface); color: var(--testo-2); border-radius: 999px; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; transition: background var(--molla), color var(--molla), border-color var(--molla); }
.studio-scena .b-ico { margin: 0; }
.studio-scena:hover { color: var(--testo); border-color: var(--testo-3); }
.studio-scena.attiva { background: var(--acc); color: #fff; border-color: transparent; }
.studio-scena-nuova, .studio-scena-rinomina, .studio-scena-elimina { padding: .4rem .55rem; color: var(--testo-3); }
.studio-preset { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .9rem; }
.studio-preset select { max-width: 200px; }

/* impaginazione: palco a sinistra, colonna strumenti a destra */
.studio-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.1rem; align-items: start; }
.studio-palco-wrap { min-width: 0; }
.studio-palco { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border: 1px solid var(--border-2); border-radius: var(--r-m); overflow: hidden; touch-action: none; }
#studio-canvas { width: 100%; height: 100%; display: block; }
/* livello UI sopra il canvas: riquadri di selezione/trascinamento (NON finiscono nello stream) */
.studio-ui { position: absolute; inset: 0; }
.studio-fonte-box { position: absolute; border: 1.5px dashed transparent; cursor: grab; }
.studio-fonte-box:hover { border-color: #ffffff66; }
.studio-fonte-box.sel { border: 1.5px solid var(--acc); box-shadow: 0 0 0 1px #fff6; cursor: grab; }
.studio-fonte-box.overlay { cursor: default; }
.studio-fonte-box .sfb-nome { position: absolute; top: 2px; left: 4px; font-size: .68rem; font-weight: 600; color: #fff; background: #000a; padding: 0 .35rem; border-radius: 4px; opacity: 0; transition: opacity .12s; pointer-events: none; }
.studio-fonte-box:hover .sfb-nome, .studio-fonte-box.sel .sfb-nome { opacity: 1; }
.studio-h { position: absolute; width: 13px; height: 13px; background: #fff; border: 2px solid var(--acc); border-radius: 50%; }
.studio-h-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.studio-h-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.studio-h-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.studio-h-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.studio-badge-live { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #fff; background: #e0245e; padding: .25rem .6rem; border-radius: 999px; font-size: .85rem; letter-spacing: .02em; box-shadow: 0 0 0 3px #e0245e33; animation: regiaPulse 2s infinite; }
.studio-layouts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; }
.studio-mini-tit { font-size: .78rem; font-weight: 600; color: var(--testo-3); margin-right: .2rem; }

/* colonna strumenti */
.studio-side { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.studio-box { border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface-2); padding: .7rem .75rem; }
.studio-box-tit { font-size: .8rem; font-weight: 700; color: var(--testo-2); display: flex; align-items: center; gap: .35rem; margin-bottom: .55rem; }
.studio-box-tit .b-ico { margin: 0; }
.studio-box-tit .tenue { font-weight: 500; }
.studio-add { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.studio-add .btn { justify-content: flex-start; }

.studio-fonti { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.studio-fonte { display: flex; align-items: center; gap: .5rem; padding: .38rem .45rem; border-radius: var(--r-s); border: 1px solid transparent; cursor: pointer; }
.studio-fonte:hover { background: var(--surface); }
.studio-fonte.sel { background: var(--surface); border-color: var(--acc-bordo); }
.studio-fonte.nascosta { opacity: .5; }
.studio-fonte .sf-ico { color: var(--testo-3); display: inline-flex; }
.studio-fonte .sf-ico .b-ico { margin: 0; }
.studio-fonte .sf-nome { flex: 1; min-width: 0; font-size: .88rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-azioni { display: inline-flex; gap: .1rem; flex: none; }
.sf-btn { width: 26px; height: 26px; display: grid; place-items: center; border: none; background: transparent; color: var(--testo-3); border-radius: var(--r-xs); cursor: pointer; transition: background var(--molla), color var(--molla); }
.sf-btn .b-ico { margin: 0; }
.sf-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--testo); }
.sf-btn:disabled { opacity: .3; cursor: default; }
.sf-btn.sf-giu .b-ico { transform: rotate(90deg); }
.sf-btn.sf-su .b-ico { transform: rotate(-90deg); }
.sf-btn[data-su] .b-ico { transform: rotate(-90deg); }
.sf-btn.sf-rim:hover:not(:disabled) { background: var(--rosso-soft); color: var(--rosso); }

.studio-prop-pos { display: flex; flex-wrap: wrap; gap: .4rem; }

/* mixer audio */
#studio-mixer { display: flex; flex-direction: column; gap: .7rem; }
.mix-canale.off { opacity: .65; }
.mix-testa { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
.mix-testa .tenue { font-weight: 500; font-size: .75rem; }
.mix-riga { display: flex; align-items: center; gap: .5rem; }
.mix-riga input[type="range"] { flex: 1; min-width: 0; }
.mix-mute { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--border-2); background: var(--surface); color: var(--testo-2); border-radius: var(--r-s); cursor: pointer; }
.mix-mute .b-ico { margin: 0; }
.mix-mute.on { background: var(--rosso-soft); color: var(--rosso); border-color: var(--rosso-bordo); }
.mix-val { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--testo-3); width: 2.2em; text-align: right; }

.studio-vai { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
@media (max-width: 820px) { .studio-griglia { grid-template-columns: 1fr; } }

/* --- Overlay Studio: elenco "elementi (fonti) dell'overlay" ----------- */
.ovl-elementi { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.ovl-elem { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); }
.ovl-elem .oe-ico { display: inline-flex; color: var(--acc); flex: none; }
.ovl-elem .oe-ico .b-ico { margin: 0; }
.ovl-elem .oe-nome { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovl-elem .oe-mod { flex: none; background: transparent; border: 1px solid var(--border-2); color: var(--testo-2); border-radius: 999px; padding: .22rem .7rem; font: inherit; font-size: .8rem; cursor: pointer; transition: color var(--molla), border-color var(--molla); }
.ovl-elem .oe-mod:hover { color: var(--acc); border-color: var(--acc-bordo); }
.ovl-elem .oe-sw { flex: none; }
/* checkbox in riga (bagliore/icona/ombra…) */
.riga-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; margin-right: 1.2rem; cursor: pointer; }
.riga-check input { width: 16px; height: 16px; }
/* textarea CSS avanzato: monospazio, comoda da scrivere */
#ovl-css { min-height: 130px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; white-space: pre; }
/* input colore: un po' più grandi e cliccabili */
input[type="color"] { width: 100%; min-height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); cursor: pointer; }

/* suoni sui punti canale: una riga per premio (nome + suono + anteprima) */
.lista-suoni-premi { list-style: none; margin-top: .4rem; }
.lista-suoni-premi > li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: .65rem .85rem; margin-bottom: .5rem; }
.lista-suoni-premi > li:hover { border-color: var(--border-2); }
.riga-premio-suono { display: flex; gap: .7rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.riga-premio-suono .nome-premio { flex: 1; min-width: 160px; }
.riga-premio-suono .controlli-suono { display: flex; gap: .4rem; align-items: center; }
.riga-premio-suono .sel-suono { min-width: 150px; }
.riga-premio-suono .prova-suono { display: inline-flex; align-items: center; justify-content: center; padding: .3rem .5rem; }

/* ============================================================ statistiche */
.griglia-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .85rem; margin: .8rem 0; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: 1.2rem 1rem; text-align: center; box-shadow: var(--om-s); transition: border-color var(--molla), transform var(--molla), box-shadow var(--molla); }
.stat:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--om-m); }
.stat .numero { font-size: 2rem; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--testo); font-variant-numeric: tabular-nums; }
.stat .etichetta { font-size: .82rem; color: var(--testo-2); margin-top: .3rem; }

/* ============================================================ tabella */
.scorrevole { overflow-x: auto; }
table.tabella { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .6rem; }
.tabella th, .tabella td { text-align: left; padding: .62rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabella tbody tr { transition: background var(--molla); }
.tabella tbody tr:hover { background: var(--surface-2); }
.tabella th { color: var(--testo-3); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.tabella td .btn { margin-right: .3rem; }

/* ============================================================ toast */
#toast-box { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast { background: var(--surface); border: 1px solid var(--border-2); border-left: 3px solid var(--acc); border-radius: var(--r-s); color: var(--testo); padding: .72rem 1.1rem; font-size: .9rem; box-shadow: var(--om-l); max-width: 320px; animation: toast-entra .3s cubic-bezier(.2, .8, .25, 1); }
.toast.errore { border-left-color: var(--rosso); }
@keyframes toast-entra { from { opacity: 0; transform: translateX(20px) scale(.97); } to { opacity: 1; transform: none; } }

/* ============================================================ effetti & moduli */
.campo-largo { flex: 1; min-width: 180px; }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.griglia-campi input[type="number"] { width: 100%; }

/* Sfoglia font Google: elenco con anteprima (ogni voce nel proprio font) */
.font-browser { margin-top: .55rem; border: 1px solid var(--border); border-radius: var(--r-m); padding: .7rem; background: var(--surface); }
.font-browser .fb-cerca { width: 100%; margin-bottom: .6rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); color: var(--testo); }
.fb-lista { max-height: 320px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; }
.fb-riga { text-align: left; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--testo); cursor: pointer; font-size: 1.15rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .12s ease, background .12s ease; }
.fb-riga:hover { border-color: var(--acc-bordo); background: var(--acc-tint); }
.fb-riga.sel { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }

/* Sezioni comprimibili (carta a fisarmonica): pannelli lunghi più scansionabili */
details.carta.sez { padding-top: 0; }
details.carta.sez > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .45rem; padding: 1.05rem 0 .2rem; font-weight: 700; color: var(--testo); }
details.carta.sez > summary::-webkit-details-marker { display: none; }
details.carta.sez > summary h3 { margin: 0; font-size: .98rem; display: inline-flex; align-items: center; gap: .4rem; }
details.carta.sez > summary::after { content: ''; margin-left: auto; flex: 0 0 auto; width: .5rem; height: .5rem; border-right: 2px solid var(--acc); border-bottom: 2px solid var(--acc); transform: rotate(45deg); transition: transform .18s ease; opacity: .85; }
details.carta.sez[open] > summary::after { transform: rotate(-135deg); }
details.carta.sez[open] > summary { margin-bottom: .5rem; border-bottom: 1px solid var(--border); }

/* Mini editor 16:9 di posizione per un effetto sul premio a punti canale */
.premio-posizione { margin-top: .5rem; }
.pp-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--border); margin-top: .4rem; background-color: #14171f; background-image: linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px); background-size: 8.33% 8.33%; }
.pp-el { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .4rem .7rem; border-radius: 8px; background: rgba(72, 176, 255, .92); color: #fff; font-weight: 700; white-space: nowrap; cursor: grab; user-select: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); touch-action: none; }
.pp-el:active { cursor: grabbing; }
.pp-chroma-box { margin-top: .5rem; }
.prefisso-cmd { font-size: 1.3rem; font-weight: 800; color: var(--acc); line-height: 1; }
.azioni-voce { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

.modelli-pronti { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.modello-pronto { background: var(--surface); border: 1px solid var(--border-2); color: var(--testo); border-radius: 999px; padding: .42rem .95rem; font-size: .85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color var(--molla), color var(--molla), background var(--molla), transform .06s; }
.modello-pronto:hover { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
.modello-pronto:active { transform: scale(.97); }

.lista-moduli { list-style: none; margin-top: .6rem; }
.modulo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: .72rem .9rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; transition: border-color var(--molla), background var(--molla); }
.modulo:hover { border-color: var(--border-2); background: var(--surface-2); }
.modulo .testo-voce { flex: 1; min-width: 200px; }
.modulo .nome-modulo { font-weight: 700; }
.modulo .riassunto-lista { font-size: .85rem; color: var(--testo-2); margin-top: .1rem; }

.blocco-quando, .blocco-se, .blocco-allora { border: 1px solid var(--border); border-left: 3px solid var(--acc); border-radius: var(--r-s); background: var(--surface-2); padding: .9rem 1rem; margin-top: 1rem; }
.etichetta-blocco { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin-bottom: .4rem; }
details.blocco-se > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
details.blocco-se > summary::-webkit-details-marker { display: none; }
details.blocco-se[open] > summary { margin-bottom: .3rem; }

.azione-riga { border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); padding: .72rem .8rem; margin-bottom: .6rem; transition: border-color var(--molla); }
.azione-riga:hover { border-color: var(--border-2); }
.azione-testata { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.azione-testata select { flex: 1; }
.azione-controlli { display: flex; gap: .25rem; flex-shrink: 0; }
.azione-controlli .btn.mini { padding: .25rem .55rem; }

.chip-vars { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.chip-var { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; background: var(--acc-soft); border: 1px solid var(--acc-bordo); color: var(--acc); border-radius: var(--r-xs); padding: .12rem .5rem; cursor: pointer; transition: background var(--molla), transform .06s; }
.chip-var:hover { background: #e8e0fc; }
.chip-var:active { transform: scale(.95); }

.riassunto-modulo { background: var(--acc-soft); border: 1px dashed var(--acc-bordo); border-radius: var(--r-s); padding: .65rem .9rem; color: var(--testo); font-size: .92rem; margin: .3rem 0 .9rem; }

pre.blocco-codice { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s); padding: .75rem .8rem; margin-top: .3rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; color: var(--testo-2); overflow-x: auto; white-space: pre; }

/* ============================================================ varie */
.riga-flessibile { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.spazio-sopra { margin-top: 1rem; }
.separatore { border: none; border-top: 1px solid var(--border); margin: 1.1rem 0; }
.lista-passi { margin: .4rem 0 .2rem 1.35rem; color: var(--testo-2); font-size: .9rem; }
.lista-passi li { margin: .25rem 0; }
.lista-passi code { color: var(--testo); }

.pie { border-top: 1px solid var(--border); color: var(--testo-3); text-align: center; font-size: .85rem; padding: 1.4rem 1rem; }
.pie-legale { margin-top: .4rem; }
.pie-legale a { color: var(--acc); font-size: .85rem; }

/* scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--testo-3); background-clip: content-box; }

/* ============================================================ responsive */
/* la barra a gruppi resta finché ci stanno tutti i 7 gruppi; sotto quella
   soglia collassa nell'hamburger + cassetto laterale. */
@media (max-width: 1280px) {
  .nav-top { display: none; }
  .top-strumenti { display: none; }
  .apri-menu { display: inline-flex; }
  /* all'apertura del cassetto le voci entrano a cascata */
  body.menu-aperto .nav-drawer > * { animation: voce-in .4s var(--ease) backwards; }
  body.menu-aperto .nav-drawer > *:nth-child(1) { animation-delay: .05s; }
  body.menu-aperto .nav-drawer > *:nth-child(2) { animation-delay: .09s; }
  body.menu-aperto .nav-drawer > *:nth-child(3) { animation-delay: .13s; }
  body.menu-aperto .nav-drawer > *:nth-child(4) { animation-delay: .17s; }
  body.menu-aperto .nav-drawer > *:nth-child(n+5) { animation-delay: .21s; }
  @keyframes voce-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
  .backdrop { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(15, 15, 25, .35); opacity: 0; pointer-events: none; transition: opacity .28s; }
  body.menu-aperto .backdrop { opacity: 1; pointer-events: auto; }
  /* in modalità cassetto niente view transition sull'app (cambio netto) */
  #app { view-transition-name: none; }
}

@media (max-width: 640px) {
  .carta { padding: 1.05rem; border-radius: var(--r-m); }
  .blocco-quando, .blocco-se, .blocco-allora { padding: .8rem .7rem; }
  .modulo .azioni-voce { width: 100%; }
  #toast-box { left: 1rem; right: 1rem; bottom: 1rem; }
  .toast { max-width: none; }
}

/* meno movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .carta.rivela { opacity: 1 !important; transform: none !important; }
  .pt-parola > i { transform: none !important; }
  .btn { transform: none !important; }
}

/* ============================================================ banner cookie */
.cookie-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(680px, calc(100% - 24px)); z-index: 90; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); color: var(--testo); border: 1px solid var(--border-2); border-radius: var(--r-m); padding: 12px 16px; box-shadow: var(--om-l); animation: toast-entra .35s ease-out; }
.cookie-banner p { margin: 0; flex: 1 1 260px; font-size: .9rem; line-height: 1.45; color: var(--testo-2); }
.cookie-banner .btn { flex: 0 0 auto; }
.cookie-banner[hidden] { display: none; }

/* ============================================================================
   CRAFT PASS — rifinitura additiva: profondità, materialità, micro-interazioni
   e TEMA SCURO automatico. Tutto rispetta prefers-reduced-motion (blocco sopra).
   ============================================================================ */
:root { --sheen: rgba(255, 255, 255, .6); }

/* profondità: due aloni d'accento tenui, fissi, dietro a tutto */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(52% 46% at 84% -8%, var(--acc-tint), transparent 60%),
    radial-gradient(46% 46% at -8% 106%, var(--acc-tint), transparent 62%);
  opacity: .85;
}

/* carte: hover elegante — solo bordo+ombra (niente transform: non litiga con lo
   scroll-reveal, che usa translate) */
.carta { transition: border-color var(--molla), box-shadow .32s var(--ease), background var(--molla); }
.carta:hover { border-color: var(--border-2); box-shadow: var(--om-m); }
.carta.evidenziata:hover { box-shadow: 0 0 0 1px var(--acc-tint), var(--om-l); }
.carta.avviso:hover, .demo-spiega:hover { box-shadow: var(--om-s); }

/* bottone primario: gradiente sottile per dare volume + ombra a colore */
.btn:not(.secondario):not(.pericolo) {
  background: linear-gradient(180deg, var(--acc), var(--acc-600));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 8px 18px -8px rgba(109, 59, 239, .5);
}
.btn:not(.secondario):not(.pericolo):hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, .12), 0 14px 30px -8px rgba(109, 59, 239, .62);
}

/* voci di lista / moduli / azioni: filo d'accento a sinistra allo hover */
.lista-voci li, .modulo, .azione-riga { position: relative; }
.lista-voci li::before, .modulo::before, .azione-riga::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--acc); border-radius: 0 3px 3px 0;
  transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform .28s var(--rev-ease);
}
.lista-voci li:hover::before, .modulo:hover::before, .azione-riga:hover::before { transform: scaleY(1); }

/* input: micro-lift alla messa a fuoco */
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], textarea, select, input[type="number"] {
  transition: border-color var(--molla), box-shadow var(--molla), transform var(--molla);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, textarea:focus, select:focus, input[type="number"]:focus { transform: translateY(-1px); }

/* link discorsivi: sottolineatura che cresce da sinistra (invece dell'underline secco) */
.carta p a:not(.btn), .suggerimento a:not(.btn), .nota-lettura a:not(.btn) {
  text-decoration: none; padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .28s var(--rev-ease), color var(--molla);
}
.carta p a:not(.btn):hover, .suggerimento a:not(.btn):hover, .nota-lettura a:not(.btn):hover { background-size: 100% 1.5px; text-decoration: none; }

/* chip-var: hover neutro rispetto al tema */
.chip-var:hover { background: var(--acc-tint); }

/* numeri "che contano su" (l'animazione la fa app.js: animaNumeri) */
[data-conta] { font-variant-numeric: tabular-nums; }

/* skeleton shimmer per gli stati di caricamento */
.scheletro { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-s); }
.scheletro::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--sheen), transparent);
  animation: shimmer 1.5s var(--ease) infinite;
}
.scheletro.riga { height: .95em; margin: .5rem 0; }
.scheletro.riga.corta { width: 62%; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------------------------------------------------------------- TEMA SCURO
   Automatico E scegliibile a mano. Tutto usa i token, quindi basta ridefinirli.
   Palette scura profonda con un filo di viola, superfici a strati, accento più
   luminoso per il contrasto; i colori-firma dei gruppi diventano più brillanti.

   Meccanica (come per la lingua): uno script inline in <head> mette
   data-theme="dark|light" su <html> in base alla scelta salvata ("auto" segue
   il sistema). Quindi comanda l'attributo. La media query resta come rete di
   sicurezza SENZA JS: si applica solo quando l'attributo non c'è. Se l'utente
   sceglie "chiaro" mentre il sistema è scuro, data-theme="light" e la media
   query non tocca nulla (niente attributo = niente match). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0c0c11;
    --surface: #151519;
    --surface-2: #1c1c23;
    --surface-3: #2a2a33;
    --border: #262630;
    --border-2: #363642;
    --testo: #f3f3f6;
    --testo-2: #b6b6c2;
    --testo-3: #7d7d8b;
    --acc: #9a7bff;
    --acc-600: #866bf5;
    --acc-soft: #201a35;
    --acc-tint: rgba(154, 123, 255, .16);
    --acc-bordo: #3a2f5c;
    --verde: #55d98a; --verde-soft: #14261c; --verde-bordo: #244b35;
    --rosso: #f9807d; --rosso-soft: #2a1719; --rosso-bordo: #4e2a2c;
    --ambra: #f6c24a; --ambra-soft: #2a2210; --ambra-bordo: #4a3b18;
    --om-s: 0 1px 2px rgba(0, 0, 0, .5);
    --om-m: 0 6px 20px rgba(0, 0, 0, .5);
    --om-l: 0 22px 54px rgba(0, 0, 0, .66);
    --sheen: rgba(255, 255, 255, .05);
    --g-panoramica: #b48bff; --g-personaggio: #78a9ff; --g-chat: #4fd8ab;
    --g-diretta: #ff8078; --g-interazione: #f4b062; --g-overlay: #ec8bd6;
    --g-notifiche: #57c6e6; --g-admin: var(--acc);
  }
  :root:not([data-theme]) body::before { opacity: 1; }
  :root:not([data-theme]) .btn.secondario { background: var(--surface-2); }
  :root:not([data-theme]) .btn.secondario:hover { background: var(--surface-3); }
}

/* scelta esplicita "scuro" (vince sempre, anche se il sistema è chiaro) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c11;
  --surface: #151519;
  --surface-2: #1c1c23;
  --surface-3: #2a2a33;
  --border: #262630;
  --border-2: #363642;
  --testo: #f3f3f6;
  --testo-2: #b6b6c2;
  --testo-3: #7d7d8b;
  --acc: #9a7bff;
  --acc-600: #866bf5;
  --acc-soft: #201a35;
  --acc-tint: rgba(154, 123, 255, .16);
  --acc-bordo: #3a2f5c;
  --verde: #55d98a; --verde-soft: #14261c; --verde-bordo: #244b35;
  --rosso: #f9807d; --rosso-soft: #2a1719; --rosso-bordo: #4e2a2c;
  --ambra: #f6c24a; --ambra-soft: #2a2210; --ambra-bordo: #4a3b18;
  --om-s: 0 1px 2px rgba(0, 0, 0, .5);
  --om-m: 0 6px 20px rgba(0, 0, 0, .5);
  --om-l: 0 22px 54px rgba(0, 0, 0, .66);
  --sheen: rgba(255, 255, 255, .05);
  --g-panoramica: #b48bff; --g-personaggio: #78a9ff; --g-chat: #4fd8ab;
  --g-diretta: #ff8078; --g-interazione: #f4b062; --g-overlay: #ec8bd6;
  --g-notifiche: #57c6e6; --g-admin: var(--acc);
}
:root[data-theme="dark"] body::before { opacity: 1; }
:root[data-theme="dark"] .btn.secondario { background: var(--surface-2); }
:root[data-theme="dark"] .btn.secondario:hover { background: var(--surface-3); }