/* ================================================================
   Dashboard Serie — foglio di stile
   ================================================================ */

:root {
  /* I fondi non sono grigi neutri ma virano al blu, e salgono di un gradino
     per volta: nero piatto + testo chiaro fa una lastra, e su una lastra
     nessuna scatola si stacca da quella accanto. */
  --bg: #0f131b;
  --bg-2: #161c27;
  --bg-3: #1e2533;
  --line: #2a3446;
  --line-forte: #3a4760;

  --txt: #e8edf5;
  --txt-2: #93a1b5;

  --accent: #4c8dff;
  --accent-alto: #6ba3ff;     /* la cima della sfumatura sui pulsanti */
  --accent-scuro: #06152e;    /* il testo SOPRA all'accento: 5,68:1 */
  --hot: #ff5c7a;
  --warm: #ffb020;
  --ok: #35d07f;

  --radius: 12px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-alto: 0 10px 30px rgba(0, 0, 0, .5);

  /* Il filo di luce in cima a una scatola: e' quello che le da' uno spessore
     invece di lasciarla stampata sul fondo. */
  --luce: inset 0 1px 0 rgba(255, 255, 255, .045);
}

* { box-sizing: border-box; }

/* Due aloni larghissimi e quasi invisibili, uno freddo in alto al centro e uno
   appena viola verso destra. Presi uno per uno non si vedono; insieme tolgono
   alla pagina quella faccia da fondale nero e basta. `fixed` perche' devono
   stare fermi mentre il contenuto scorre: se scorressero anche loro
   diventerebbero una macchia che si muove, e si noterebbero. */
html {
  min-height: 100%;
  background:
    radial-gradient(1200px 640px at 50% -12%, rgba(76, 141, 255, .11), transparent 62%),
    radial-gradient(900px 520px at 88% 4%, rgba(140, 106, 255, .07), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--txt);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--txt-2); }
.small { font-size: 13px; }
.spacer { flex: 1; }
.err { color: var(--hot); }

/* ---------------- pagine di testo: home, impostazioni, guida ---------------- */

.pagina-centro {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px clamp(16px, 4vw, 32px) 90px;
}
.pagina-centro.stretta { max-width: 720px; }

.hero { margin-bottom: 54px; }
.hero h1, .hero-t { margin: 0 0 14px; font-size: clamp(28px, 5vw, 40px); letter-spacing: -.025em; }
.hero-sotto { margin: 0 0 26px; font-size: 16.5px; line-height: 1.6; color: var(--txt-2); max-width: 60ch; }
.hero-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-azioni .btn { width: auto; margin: 0; }
.hero-avviso {
  flex: 1 1 100%;
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--warm);
}

.sezione { margin-bottom: 48px; }
.sezione-t { margin: 0 0 8px; font-size: 19px; letter-spacing: -.01em; }
.sezione-d { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--txt-2); max-width: 65ch; }
.sezione-d a { color: var(--accent); }

/* le tre carte degli spazi, nella home */
.spazi-carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.spazio-carta {
  display: block;
  padding: 20px;
  box-shadow: var(--luce);
  color: inherit;
  text-decoration: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s, transform .15s, background .15s;
}
.spazio-carta:hover { border-color: var(--accent); background: var(--bg-3); transform: translateY(-2px); }
.spazio-carta h3 { margin: 0 0 10px; font-size: 16px; }
.spazio-carta p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--txt-2); }
.spazio-n {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.spazio-n span { font-size: 13.5px; font-weight: 600; color: var(--txt-2); }
.spazio-n.vuoto { font-size: 15px; font-weight: 600; color: var(--txt-2); }

/* ---------------- la presentazione, per chi arriva adesso ----------------

   Questa pagina la legge chi non sa cosa sta guardando, quindi la misura che
   conta e' la lunghezza della riga: oltre i 68 caratteri l'occhio perde il
   capo quando va a capo. Il resto della pagina e' piu' largo perche' li'
   dentro ci sono griglie di poster, che vogliono spazio.                    */

.hero-primo { padding: 30px 0 8px; max-width: 34rem; }
.hero-primo h1 { font-size: clamp(34px, 7vw, 52px); line-height: 1.05; margin: 0 0 10px; letter-spacing: -.02em; }

.hero-claim {
  font-size: clamp(19px, 3.4vw, 25px);
  line-height: 1.25;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 16px;
}
.hero-primo .hero-sotto { font-size: 15.5px; line-height: 1.6; max-width: 32rem; }
.hero-nota { margin: 12px 0 0; font-size: 13px; color: var(--txt-2); }

/* Le quattro cose che un elenco non distingue. Sono il cuore della
   spiegazione: stanno in riquadri separati perche' il punto e' proprio che
   sono separate. */
/* Quattro voci: o una colonna, o due per due, o tutte e quattro in fila. Mai
   tre piu' una, che lascia l ultima spaiata e fa sembrare che manchi qualcosa.
   Per questo le colonne sono dichiarate, e non lasciate decidere ad auto-fit. */
.quattro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 620px) { .quattro { grid-template-columns: 1fr; } }
@media (min-width: 1120px) { .quattro { grid-template-columns: repeat(4, 1fr); } }
.quattro-voce {
  padding: 15px 16px;
  box-shadow: var(--luce);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quattro-voce b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.quattro-voce span { font-size: 13.5px; line-height: 1.5; color: var(--txt-2); }
.sezione-chiusa { margin-top: 16px; }

/* Le due strade da cui si puo' arrivare. Affiancate e uguali di peso: se una
   delle due sembrasse quella buona, l altra sembrerebbe un ripiego. */
.due-strade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.strada { padding: 16px 17px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--luce); }
.strada b { display: block; font-size: 15px; margin-bottom: 6px; color: var(--accent); }
.strada span { font-size: 13.5px; line-height: 1.55; color: var(--txt-2); }

.hero-risposta { margin-top: 12px; color: var(--txt); }

/* I tre passi per cominciare. Numerati davvero con una lista ordinata: chi
   legge con la voce sente "1 di 3" invece di un pallino qualunque. */
.passi { list-style: none; margin: 18px 0 0; padding: 0; }
.passi .passo { display: flex; gap: 16px; padding: 0 0 22px; }
.passi .passo:last-child { padding-bottom: 6px; }
.passi .passo-n {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--accent);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.passi .passo-corpo { flex: 1; min-width: 0; }
.passi .passo-corpo h3 { margin: 5px 0 6px; font-size: 15.5px; }
.passi .passo-corpo p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--txt-2); max-width: 34rem; }
.passi .passo-corpo a { color: var(--accent); }

.sezione-partenza {
  background: var(--bg-2);
  box-shadow: var(--luce);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

/* ---------------- la pagina del progetto ---------------- */

.elenco { margin: 0; padding-left: 20px; color: var(--txt-2); font-size: 14.5px; line-height: 1.65; }
.elenco li { margin-bottom: 8px; }
.elenco b { color: var(--txt); }

/* Il tasto delle donazioni. Piccolo, spento, in fondo, staccato dal resto:
   deve essere trovabile da chi lo cerca e invisibile a chi non lo cerca. */
.offri-riga { margin: 34px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.offri-riga .btn { color: var(--txt-2); }
.offri-riga .btn:hover { color: var(--txt); }

.cripto { margin-bottom: 12px; }
.cripto-nome { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.cripto-riga {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--luce);
}
/* L indirizzo va scritto per intero: chi sta per mandare dei soldi ha il
   diritto di guardarlo prima. Se non ci sta va a capo invece di essere
   tagliato, perche un indirizzo mozzato e un indirizzo sbagliato. */
.cripto-ind {
  flex: 1 1 240px;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--txt);
  word-break: break-all;
  user-select: all;
}

/* i tre punti del "come funziona" */
.punti { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.punto h3 { margin: 0 0 7px; font-size: 15px; }
.punto p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--txt-2); }

/* ---------------- il codice da scrivere sull'altro sito ---------------- */

.login-passo { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 8px; font-size: 14.5px; }
.login-n {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--accent); border-radius: 50%;
}

.pin-code {
  font: 700 40px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .18em;
  text-align: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 8px 0 16px;
  user-select: all;
}

/* L indirizzo e il codice, ognuno col suo pulsante per copiarlo accanto.
   In colonna sotto i 380px: affiancati, su uno schermo stretto, il codice
   verrebbe schiacciato proprio dove deve essere leggibile. */
.pin-riga {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 14px;
}
.pin-riga .pin-code { margin: 0; flex: 1 1 auto; }
.pin-riga .btn { flex: none; }
@media (max-width: 380px) {
  .pin-riga { flex-direction: column; align-items: stretch; }
}

.pin-url {
  font-size: 19px;
  font-weight: 600;
  color: var(--accent);
  /* selezionabile tutto in un colpo: dove il pulsante non puo copiare, resta
     questo, ed e la ragione per cui l indirizzo e scritto per intero */
  user-select: all;
}

/* ---------------- bottoni ---------------- */

.btn {
  font: inherit;
  font-weight: 600;
  color: var(--txt);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: var(--luce);
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
/* Un pulsante puo' essere un <button> o un <a>, e prima i due non si
   somigliavano: il link si portava dietro la sottolineatura e, non essendo un
   box allineato, restava piu' basso di qualche pixel del pulsante accanto.
   Due cose che sembrano lo stesso oggetto devono esserlo davvero. */
a.btn { text-decoration: none; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}
.btn:hover { background: var(--bg-2); border-color: var(--line-forte); }

/* Premuto: scende di un pelo. E' l'unico modo che ha un pulsante di rispondere
   al dito su uno schermo che non ha il passaggio del mouse. */
.btn:active { transform: translateY(1px); }

/* L'anello di fuoco mancava del tutto: chi gira con il tasto Tab non aveva
   modo di sapere dove si trovava. `focus-visible` e non `focus`, sennO'
   l'anello comparirebbe anche a ogni clic del mouse, dove non serve. */
.btn:focus-visible,
.chip:focus-visible,
.icon-btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-alto);
  outline-offset: 2px;
  border-radius: 10px;
}
.btn:hover { background: #26313f; }

/* Il pulsante principale ha il testo SCURO, non bianco. Il bianco su questo blu
   dava 3,20:1, sotto il 4,5:1 che serve a un testo: il pulsante piu' importante
   del sito era il meno leggibile che ci fosse. Adesso sta a 5,68:1, e segue la
   stessa regola dei bollini accesi. La sfumatura schiarisce verso l'alto, quindi
   il punto peggiore e' quello misurato. */
.btn-big {
  width: 100%;
  padding: 14px;
  background: linear-gradient(180deg, var(--accent-alto), var(--accent));
  border-color: var(--accent);
  color: var(--accent-scuro);
  margin-top: 8px;
  box-shadow: 0 4px 16px rgba(76, 141, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-big:hover {
  background: linear-gradient(180deg, #7db0ff, #5d99ff);
  border-color: #7db0ff;
  transform: translateY(-1px);
  box-shadow: 0 7px 22px rgba(76, 141, 255, .36), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-big:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(76, 141, 255, .3); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-3); }
.btn-danger { color: var(--hot); border-color: #4a2733; background: transparent; }
.btn-danger:hover { background: rgba(255, 92, 122, .1); border-color: var(--hot); }
.btn-alt { width: 100%; margin-top: 8px; background: transparent; border-color: var(--line-forte); }
.btn-alt:hover { background: var(--bg-3); border-color: var(--accent); color: var(--txt); }
.btn-largo { display: block; width: 100%; margin-top: 8px; text-align: center; text-decoration: none; }
.btn-piccolo { font-size: 13px; padding: 6px 12px; flex: none; }

.servizi { display: flex; flex-direction: column; gap: 10px; }
.servizio {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  background: var(--bg-3);
  border-radius: 10px;
  padding: 12px 14px;
}
.servizio b { display: block; font-size: 14.5px; }
.servizio-nota { display: block; margin-top: 3px; font-size: 12.5px; color: var(--txt-2); line-height: 1.45; }
.servizio.on { border: 1px solid rgba(53, 208, 127, .4); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  font-size: 19px;
  line-height: 1;
  color: var(--txt-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  flex: none;
}
.icon-btn:hover { color: var(--txt); background: var(--bg-3); }
/* Gira l icona, non il pulsante: il pulsante ha un bordo e uno sfondo, e
   vederli ruotare fa sembrare che si sia staccato qualcosa. */
.icon-btn.spin .ico { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- barra in alto ---------------- */

/* Rete di sicurezza per i collegamenti interni scritti a mano (#qualcosa), che
   il browser risolve da solo senza passare dal codice. Il salto alle fasce non
   usa questo: la testata cambia altezza da pagina a pagina - 61 pixel sulla
   home, 222 dentro a uno spazio, dove contiene anche ricerca e categorie -
   quindi un numero fisso qui sarebbe sbagliato proprio dove serve. Vedi
   portaInVista() in spazio.js, che la misura invece di indovinarla. */
[id] { scroll-margin-top: 78px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(15, 19, 27, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 12px 0 10px;
}

.topbar-inner {
  max-width: 2400px;
  margin: 0 auto;
  padding: 0 clamp(12px, 2.4vw, 30px);
}

/* la riga che riassume tutto, sotto al titolo */
.brand-box { display: flex; flex-direction: column; gap: 1px; }
.brand-sub { margin: 0; font-size: 13.5px; color: var(--txt-2); }
.brand-sub b { color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; }
.brand-sub .oggi { color: var(--accent); font-weight: 600; }

/* etichette dei controlli, per dire a cosa servono */
.campo { display: inline-flex; align-items: center; gap: 7px; }
.campo-eti { font-size: 12px; color: var(--txt-2); white-space: nowrap; }

.modal-intro { margin: -8px 0 20px; font-size: 13.5px; color: var(--txt-2); }

.topbar-row { display: flex; align-items: center; gap: 10px; }

/* Il marchio riporta sempre alla home: era proprio quello che mancava, una
   porta per tornare al benvenuto dopo la prima volta. */
.marchio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--txt);
  text-decoration: none;
  flex: none;
}
.marchio img { display: block; border-radius: 7px; }
.marchio:hover { color: var(--accent); }

/* I tre spazi, sempre a portata di clic da qualunque pagina */
.spazi { display: flex; gap: 4px; flex: none; }
.spazi a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--txt-2);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .13s, color .13s;
}
.spazi a:hover { color: var(--txt); background: var(--bg-2); }
.spazi a.on { color: #fff; background: var(--accent); }

/* Cambio lingua: due lettere, sempre visibili. Nascosto dentro alle
   impostazioni non lo avrebbe trovato nessuno. */
.lingua-switch {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.lingua-switch button {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--txt-2);
  background: transparent;
  border: 0;
  padding: 9px 9px;
  cursor: pointer;
}
.lingua-switch button:hover { color: var(--txt); background: var(--bg-3); }
.lingua-switch button.on { color: #fff; background: var(--accent); }

.icon-btn.on { color: var(--txt); background: var(--bg-3); border-color: var(--accent); }
.topbar-row + .topbar-row { margin-top: 10px; }
.brand { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.sync-info { font-size: 12.5px; color: var(--txt-2); white-space: nowrap; }

#ordina { min-width: 210px; }

.search, .select {
  font: inherit;
  color: var(--txt);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 12px;
}
.search { flex: 0 1 280px; min-width: 140px; }
.search:focus, .select:focus { outline: none; border-color: var(--accent); }

.chips { display: flex; gap: 6px; }
.chip {
  font: inherit;
  font-size: 13.5px;
  color: var(--txt-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.chip.on { color: var(--accent-scuro); background: var(--accent); border-color: var(--accent); font-weight: 700; }

/* ---------------- blocchi ---------------- */

/* ---------------- impianto della pagina ---------------- */

/* Due zone: il menù a sinistra, il contenuto a destra.
   Il contenuto si prende tutto lo spazio che resta. */
.layout {
  display: grid;
  align-items: start;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 30px;
  max-width: 2400px;
  margin: 0 auto;
  padding: 20px clamp(12px, 2.4vw, 30px) 90px;
}

main { min-width: 0; }

/* la navigazione resta ferma mentre scorri */
.nav {
  position: sticky;
  top: 118px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--txt-2);
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 8px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s, color .13s;
}
.nav-item:hover { color: var(--txt); background: var(--bg-2); }
.nav-item.on { color: var(--txt); background: var(--bg-3); font-weight: 600; }

.nav-n {
  margin-left: auto;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--txt-2);
  background: var(--bg-2);
  border-radius: 999px;
  padding: 1px 7px;
}
.nav-item.on .nav-n { background: #2b3646; color: var(--txt); }

/* le fasce della sezione principale, rientrate sotto alla sua voce */
.nav-fasce { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 6px; }
.nav-fascia {
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--txt-2);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  margin-left: 17px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .13s, border-color .13s;
}
.nav-fascia:hover { color: var(--txt); border-left-color: var(--accent); }



.block { margin-bottom: 34px; }

.block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--txt-2);
}
.block-title.toggle { cursor: pointer; user-select: none; }
.block-title.toggle:hover { color: var(--txt); }

.count {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--txt);
  background: var(--bg-3);
  border-radius: 999px;
  padding: 1px 9px;
}
.caret { transition: transform .18s; }
.collapsible.closed .caret { transform: rotate(-90deg); }
/* Chiusa vuol dire chiusa: sparisce tutto tranne il titolo su cui si clicca.
   Elencare a mano le classi da nascondere lasciava fuori i titoli delle fasce:
   Archivio chiuso mostrava "Finite" e "Abbandonate" con sotto il vuoto. */
.collapsible.closed > *:not(.block-title) { display: none; }

/* La fascia dell'esempio. Deve saltare all'occhio senza sembrare un errore:
   non e' un guasto, e' una vetrina. */
.avviso-esempio {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--txt);
  background: rgba(255, 176, 32, .1);
  border: 1px solid rgba(255, 176, 32, .38);
  border-radius: 10px;
}
.avviso-esempio span { flex: 1 1 260px; }
.avviso-esempio b { color: var(--warm); }
.avviso-esempio .btn { flex: none; border-color: var(--warm); color: var(--warm); }
.avviso-esempio .btn:hover { background: rgba(255, 176, 32, .14); }

/* La prima sincronizzazione dura minuti: dirlo evita che sembri rotto. */
.avviso-carico {
  margin: 0 0 22px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--txt-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.avviso-carico b { color: var(--txt); }

/* Quando un filtro è acceso deve vedersi: altrimenti i numeri nel menù
   cambiano e sembra che si sia rotto qualcosa. */
.filtro-attivo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--txt);
  background: rgba(76, 141, 255, .1);
  border: 1px solid rgba(76, 141, 255, .35);
  border-radius: 10px;
}
.filtro-attivo b { color: var(--accent); }

.btn-lino {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
}
.btn-lino:hover { color: var(--txt); }

.hint { margin: -6px 0 14px; font-size: 13px; color: var(--txt-2); }

.empty { color: var(--txt-2); padding: 8px 2px; }

/* ---------------- griglia ---------------- */

/* Allargando lo schermo devono crescere le CARD, non il numero di colonne:
   su un monitor da 2500px tredici miniature da 176px non le legge nessuno. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 22px 16px;
}
.grid-sm { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 18px 12px; }

.card { position: relative; display: block; color: inherit; }

/* Il collegamento alla scheda e' un velo trasparente steso sopra al poster, non
   un <a> che avvolge tutta la card: un <button> dentro un <a> non e' HTML valido
   e da tastiera il pulsante restava impigliato dentro al collegamento.
   Pastiglie e pulsanti stanno un piano piu' in alto del velo, quindi si cliccano.
   Stanno tutti dentro .poster, cosi' l'ordine regge anche quando .poster si
   solleva al passaggio del mouse e diventa un contesto a se'. */
.poster-link { position: absolute; inset: 0; z-index: 1; }
.title a { color: inherit; text-decoration: none; }

.poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover .poster { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
/* L'immagine sta SOPRA al ripiego, non al posto suo: `relative` serve solo a
   darle un piano, perche' il ripiego e' assoluto e senza questo gli finirebbe
   sotto anche quando la copertina c'e'. */
.poster img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Il poster che manca. Erano rettangoli grandi, piatti e vuoti, e in una
   griglia dove qualche copertina non arriva sono loro a dare al sito quella
   faccia da fondale nero. Adesso hanno una sfumatura obliqua e un filo di luce
   in cima: restano evidentemente dei buchi - devono, sennO sembrerebbero
   poster veri - ma sono buchi con una superficie.

   Sta sempre dietro a ogni copertina, non solo dove la copertina manca: e' il
   fondo su cui l'immagine si appoggia, e quando l'immagine non arriva resta
   lui. Vedi montaPoster() in carte.js. */
.poster-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--txt-2);
  background:
    linear-gradient(145deg, #232c3c 0%, #1a212c 55%, #161d27 100%);
  box-shadow: var(--luce);
}

/* pastiglie sopra al poster */
.badge {
  position: absolute;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
/* Testo scuro sui due bollini accesi, non bianco. Il bianco su questo rosso
   dava 2,97:1 e su questo blu 3,20:1, sotto il 4,5:1 che serve a un testo
   piccolo: i due bollini che portano il segnale piu' importante del sito erano
   i meno leggibili che ci fossero. Adesso stanno a 6,2 e 5,7, e seguono la
   stessa regola che badge-back e badge-done avevano gia'. */
.badge-count { top: 8px; right: 8px; background: var(--hot); color: #2b0511; }
.badge-new   { top: 8px; right: 8px; background: var(--accent); color: #04162b; letter-spacing: .04em; }
.badge-back  { top: 8px; left: 8px; background: var(--ok); color: #06251a; letter-spacing: .04em; }
.badge-soon  { top: 8px; left: 8px; background: rgba(10, 14, 20, .82); color: var(--warm); font-weight: 600; }
.badge-done  { top: 8px; left: 8px; background: var(--ok); color: #06251a; font-size: 13px; padding: 4px 8px; }
/* Neutro apposta: il rosso qui sopra vuol dire "hai roba arretrata", e un
   consiglio non e' una cosa arretrata. */
.badge-info  { top: 8px; right: 8px; background: rgba(10, 14, 20, .82); color: var(--txt); font-weight: 600; }

.meta { padding: 9px 2px 0; }
.title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  /* Una o due righe occupano lo stesso spazio: cosi' la riga informativa
     parte sempre dalla stessa altezza in tutta la fascia. */
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  overflow: hidden;
}
.sub { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--txt-2); }
.sub b { color: var(--accent); font-weight: 600; }
.sub b.fatto { color: var(--ok); }
.sub b.lasciato { color: var(--txt-2); }
/* Rimandato non e' ne' fatto ne' lasciato: e' una scelta tua, ancora aperta.
   Il colore caldo e' lo stesso delle date in arrivo, che sono l'altra cosa
   che sta li' ad aspettarti. */
.sub b.rimandato { color: var(--warm); }

.ep {
  margin-top: 2px;
  font-size: 12px;
  /* era #6d7a8d: 4,34:1 sul fondo pagina e 4,01:1 dentro una card, cioe' sotto
     soglia in tutti e due i posti dove compare. */
  color: #7b8899;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* fasce della schermata principale */
.band-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--txt);
}
.band-title:not(:first-child) { margin-top: 26px; }
#archivioBande .band-title { font-size: 13px; }
.band-n {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--txt-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}

/* azione rapida sulla card */
.card-act {
  position: absolute;
  z-index: 2;
  right: 6px;
  bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--txt);
  background: rgba(10, 14, 20, .85);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 7px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.card:hover .card-act, .card-act:focus { opacity: 1; }

/* ---------------- impostazioni ---------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(3px);
}
.modal-box {
  width: min(520px, 100%);
  max-height: 90dvh;
  overflow: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  box-shadow: var(--shadow);
}
.modal-box h2 { margin: 0 0 18px; font-size: 20px; }

.field { display: block; margin-bottom: 20px; }
.field span { display: block; margin-bottom: 8px; font-size: 14px; }
.field b { color: var(--accent); }
.field input[type=range] { width: 100%; accent-color: var(--accent); }
.fieldnote { display: block; margin-top: 6px; font-size: 12.5px; color: var(--txt-2); }

.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; font-size: 14px; }
.check input { margin-top: 3px; accent-color: var(--accent); flex: none; }

hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* ---------------- messaggio a comparsa ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 80;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 24px);
}

/* Il "Annulla" dentro al messaggio. Sta dentro alla stessa scatola perche' e'
   la stessa frase: "ho nascosto questo" e "no, rimettilo" sono una cosa sola,
   e separarli avrebbe voluto dire due oggetti che compaiono insieme e non si
   capisce se parlino della stessa cosa. */
.toast-azione {
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 7px;
  padding: 3px 6px;
  margin: -3px -6px -3px 0;
  cursor: pointer;
  flex: none;
}
.toast-azione:hover { color: var(--accent-alto); background: rgba(76, 141, 255, .12); }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; gap: 14px; }

  .nav {
    position: sticky;
    top: 110px;
    z-index: 15;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px 0;
    margin: 0 calc(-1 * clamp(12px, 2.4vw, 30px));
    padding-inline: clamp(12px, 2.4vw, 30px);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    max-height: none;
  }
  .nav::-webkit-scrollbar { display: none; }

  .nav-item {
    width: auto;
    flex: none;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 13px;
  }
  .nav-item.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .nav-item.on .nav-n { background: rgba(255, 255, 255, .22); color: #fff; }

  /* le fasce non stanno in una barra orizzontale: si raggiungono scorrendo */
  .nav-fasce { display: none; }

}

@media (max-width: 900px) {
  /* Sullo stretto la testata deve stare in due righe senza schiacciare niente:
     il nome del sito lo dice gia' l'icona, e la riga dei controlli va a capo. */
  .marchio-nome { display: none; }
  .topbar-row { flex-wrap: wrap; }
  .search { flex: 1 1 100%; order: 3; }
  #ordina { min-width: 0; flex: 1; }
  .campo { flex: 1 1 auto; }
  .brand-box { flex: 1 1 100%; }
  .sync-info { display: none; }   /* la cosa meno importante della testata */

  /* Lo spaziatore serve a spingere i comandi a destra quando la riga sta tutta
     su una linea. Quando la riga va a capo diventa il contrario: si prende lo
     spazio avanzato e costringe il pezzo dopo a scendere di riga da solo. */
  .topbar-row .spacer { display: none; }
}

@media (max-width: 560px) {
  /* Sul telefono la testata si mangiava il 41% dello schermo prima di far
     vedere una card: 83px di prima riga, 146px di seconda, 53px di menu'.
     Misurato dentro a un iframe da 375px, non a occhio. */

  /* Il nome dello spazio e' gia' acceso nella navigazione qui sopra: qui si
     prendeva una riga intera per ripeterlo. Lo tolgo dagli occhi ma non dagli
     screen reader, perche' resta l'unico titolo della pagina. */
  .brand {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* ricerca e ordinamento stanno su una riga sola invece che su due */
  .search { flex: 2 1 150px; order: 0; }
  /* min-width:0 e' la parte che conta. Un elemento flex, di suo, non scende mai
     sotto la larghezza del suo contenuto piu' largo: qui dentro c'e' un menu' a
     tendina con scritto "Episodio uscito da meno tempo", quindi .campo chiedeva
     250px e mandava la ricerca a capo da sola. */
  .campo { flex: 1 1 120px; min-width: 0; }
  .campo-eti { display: none; }

  /* bersagli grandi abbastanza per un pollice */
  .topbar-row { gap: 8px; }
  .spazi a { padding: 9px 9px; font-size: 12.5px; }
  .spazi { gap: 3px; }
  .lingua-switch button { padding: 11px 12px; }
  .icon-btn { width: 42px; height: 42px; }
  .marchio img { width: 30px; height: 30px; }
}

@media (max-width: 560px) {
  /* Questo blocco riguarda solo la griglia e le card. Le regole della testata
     stanno tutte nel blocco 560 qui sopra: prima erano sparse fra i due, e
     quello piu' in basso rimetteva la ricerca a tutta larghezza annullando
     l'altra. Due blocchi alla stessa misura che si contraddicevano. */
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 12px; }
  .grid-sm { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }

  /* Sul telefono il pulsante resta sempre visibile: non c'e' il passaggio del mouse. */
  .card-act { opacity: 1; font-size: 10.5px; padding: 3px 6px; }
}


/* ================================================================
   Pagina della guida
   ================================================================ */

.guida { line-height: 1.6; }
.guida-occhiello { margin: 0 0 14px; font-size: 16px; color: var(--txt-2); }
.guida-occhiello b { color: var(--txt); }

.guida-h2 { margin: 44px 0 16px; font-size: 21px; }
.guida-riga { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }

.guida a { color: var(--accent); }
.guida a:hover { color: var(--txt); }

/* i tre passaggi */
.passo { display: flex; gap: 18px; margin: 34px 0; }
.passo-n {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
}
.passo-corpo { min-width: 0; }
.passo-corpo h2 { margin: 6px 0 10px; font-size: 20px; }
.passo-corpo h3 { margin: 22px 0 6px; font-size: 15px; color: var(--txt); }
.passo-corpo p { margin: 0 0 12px; }

.nota {
  font-size: 14px;
  color: var(--txt-2);
  border-left: 2px solid var(--line);
  padding-left: 14px;
}

.lista { margin: 0 0 12px; padding-left: 22px; }
.lista li { margin-bottom: 5px; }

/* tabelle a due colonne, senza <table> per stare comode sul telefono */
.tabella { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.riga { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0; }
.riga + .riga { border-top: 1px solid var(--line); }
.cella-t { padding: 13px 16px; font-weight: 600; background: var(--bg-2); display: flex; align-items: center; }
.cella-d { padding: 13px 16px; color: var(--txt-2); }
.cella-d b { color: var(--txt); }

/* le pastiglie mostrate come esempio, non sopra a un poster */
.badge.pos { position: static; box-shadow: none; }

/* I blocchi che si aprono con un clic. Servono a togliere il muro di testo
   dalla guida senza buttare via le informazioni: chi ha fretta legge i titoli,
   chi vuole i dettagli apre. E' il tag <details>, quindi funziona anche senza
   JavaScript e lo capiscono gli screen reader. */
.pieghevole {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 10px 0;
  background: var(--bg-2);
  overflow: hidden;
}
.pieghevole > summary {
  cursor: pointer;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color .13s;
}
.pieghevole > summary::-webkit-details-marker { display: none; }
.pieghevole > summary::before {
  content: 'ƒa';
  font-size: 18px;
  line-height: 1;
  transition: transform .18s;
}
.pieghevole[open] > summary::before { transform: rotate(90deg); }
.pieghevole > summary:hover { color: var(--txt); }
.pieghevole[open] > summary { color: var(--txt); border-bottom: 1px solid var(--line); }
.pieghevole > *:not(summary) { margin: 14px 16px; }
.pieghevole .tabella { margin: 14px 16px; }
.pieghevole h3 { margin: 16px 16px 4px; font-size: 14.5px; }
.pieghevole.grande > summary { font-size: 15.5px; color: var(--txt); }

.passo-corpo .pieghevole { margin-top: 14px; }

.hero-sotto2 { margin-top: -14px; font-size: 15px; }

.faq h3 { margin: 26px 0 6px; font-size: 16px; }
.faq p { margin: 0; color: var(--txt-2); }

.guida-fine { margin-top: 46px; }
.btn-largo { display: block; text-align: center; text-decoration: none; }

@media (max-width: 560px) {
  .riga { grid-template-columns: 1fr; }
  .cella-t { border-bottom: 1px solid var(--line); }
}

/* ---------------- gli attrezzi di "Da scoprire" ----------------

   Una riga sola, in fondo alla sezione, staccata da un filo. Non e' una barra
   di comandi in cima: quello che sta qui dentro si usa DOPO aver guardato i
   suggerimenti, non prima, e metterlo in alto avrebbe voluto dire mettere due
   pulsanti fra te e le copertine. */
.scoprire-attrezzi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.scoprire-attrezzi:empty { display: none; }

/* ---------------- il rimando a SENSEI ---------------- */
.sensei {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  margin: 4px 0 28px;
  padding: 20px;
  color: inherit;
  text-decoration: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s, background .15s;
}
.sensei:empty { display: none; }
.sensei:hover { border-color: var(--accent); background: var(--bg-3); }
.sensei:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sensei-logo { display: block; width: 64px; height: 64px; border-radius: 7px; }
.sensei-corpo { min-width: 0; }
.sensei-claim {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  max-width: 52ch;
}
.sensei-testo { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--txt-2); max-width: 68ch; }
.sensei-fondo { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; }
.sensei-eti { display: block; font-size: 12px; font-weight: 600; color: var(--txt-2); }
.sensei-vai {
  display: block;
  flex: none;
  padding-bottom: 2px;
  border-bottom: 2px solid currentColor;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.sensei-home-slot { margin: -18px 0 42px; }
.sensei-home-slot:empty { display: none; }
.sensei-home-slot .sensei { margin: 0; }

@media (max-width: 620px) {
  .sensei {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }
  .sensei-logo { width: 48px; height: 48px; }
  .sensei-claim { font-size: 19px; }
  .sensei-fondo { align-items: flex-start; flex-direction: column; gap: 9px; }
}

/* ---------------- il piede ----------------

   Basso di tono apposta: e' l'ultima riga della pagina, non un secondo menu'.
   Chi lo cerca lo trova; chi non lo cerca non ci inciampa. */
.piede {
  max-width: 2400px;
  margin: 0 auto;
  padding: 26px clamp(12px, 2.4vw, 30px) 40px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  font-size: 13.5px;
  color: var(--txt-2);
}
.piede-link { display: flex; flex-wrap: wrap; gap: 18px; }
.piede-link a { color: var(--txt-2); text-decoration: none; }
.piede-link a:hover { color: var(--txt); text-decoration: underline; }
.piede-nota { margin: 0 0 0 auto; }
.piede-casa { color: var(--accent); text-decoration: none; font-weight: 600; }
.piede-casa:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .piede-nota { margin-left: 0; }
}

/* ---------------- la pagina "Sostieni" ---------------- */

.sos-voce { margin-top: 22px; }
.sos-voce h3 { margin: 0 0 6px; font-size: 15.5px; }
.sos-voce .sezione-d { margin-bottom: 12px; }

/* ---------------- chi ha chiesto meno movimento ----------------

   Nelle impostazioni del sistema si puo' chiedere di ridurre le animazioni.
   Non e' un gusto: per chi soffre di disturbi vestibolari le cose che si
   muovono danno nausea e capogiro davvero. Il sito ne aveva undici fra
   transizioni e animazioni e non guardava quella richiesta.

   Qui non si spegne tutto: i cambi di colore restano, perche' non muovono
   niente e servono a capire che un pulsante ha risposto. Spariscono gli
   spostamenti, gli ingrandimenti e la rotella che gira. Lo scorrimento morbido
   diventa immediato: portare qualcosa in vista continua a funzionare, ci
   arriva e basta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: .12s !important;
    scroll-behavior: auto !important;
  }
  .btn:active,
  .btn-big:hover,
  .card:hover .poster,
  .spazio-carta:hover { transform: none; }
}