:root {
    --bg: #14161c;
    --panel: #1e2129;
    --panel-2: #262a34;
    --text: #e7e9ee;
    --muted: #99a0af;
    --accent: #e23636;      /* rosso Marvel */
    --accent-2: #f0c419;
    --read: #2ecc71;
    --border: #333844;
}
* { box-sizing: border-box; }
/* L'attributo hidden deve vincere sempre: una qualsiasi regola con `display`
   (anche solo `display: block` su un'immagine) lo annullerebbe, lasciando
   l'elemento a occupare spazio. */
[hidden] { display: none !important; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    line-height: 1.45;
    /* Sfondo stile fumetto: retino tipografico (puntini Ben-Day) + linee
       cinetiche diagonali, tutto su grigio scuro. Fisso e molto tenue per
       non disturbare la leggibilità. */
    background-color: var(--bg);
    background-image:
        radial-gradient(rgba(226, 54, 54, 0.10) 1px, transparent 1.6px),
        radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.6px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 22px);
    background-size: 22px 22px, 22px 22px, auto;
    background-position: 0 0, 11px 11px, 0 0;
    background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
/* Su mobile, toccare due volte di fretta un controllo (es. le frecce del
   carosello) viene letto come "doppio tap" e il browser fa zoom sulla
   pagina. touch-action: manipulation dice di gestire subito il tap come
   click, senza aspettare per capire se e' l'inizio di un doppio tap/zoom.
   Il resto della pagina (immagini, testo) resta zoomabile normalmente. */
a, button { touch-action: manipulation; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 14px; }

/* Topbar stile Marvel: barra scura, bordo rosso, linee cinetiche */
/* z-index alto: la topbar crea uno stacking context e il drawer del menu vive
   al suo interno; se la topbar stesse sotto lo sfondo scuro (.nav-backdrop),
   l'overlay coprirebbe le voci e i tap non passerebbero (bug su iOS). Tenendo
   la topbar sopra il backdrop, il menu resta cliccabile e il backdrop oscura
   solo il contenuto della pagina. */
.topbar { position: sticky; top: 0; z-index: 60;
    background-color: #0d0f14;
    background-image: repeating-linear-gradient(-45deg,
        rgba(255,255,255,0.022) 0 2px, transparent 2px 10px);
    border-bottom: 4px solid var(--accent);
    box-shadow: 0 3px 12px rgba(0,0,0,.5); }
/* Selettore vista (menu a tendina compatto): sta su una riga sola a qualsiasi
   larghezza, quindi l'header resta nowrap e non c'e' nulla che sfora. */
.skin-select { display: inline-flex; align-items: center; gap: 6px; flex: none;
    margin-left: 10px; border: 1px solid var(--border); border-radius: 8px;
    padding: 1px 6px 1px 9px; background: rgba(255,255,255,.03); }
.skin-select-ic { color: var(--muted); font-size: .85rem; line-height: 1; }
.skin-select select { background: transparent; border: none; color: var(--text);
    font-size: .78rem; font-weight: 700; padding: 5px 2px; cursor: pointer; outline: none; }
/* Le option nei menu nativi si aprono su sfondo chiaro: testo scuro leggibile. */
.skin-select select option { color: #14161c; }

/* Episodi GIA' LETTI (precedenti al punto di partenza) dentro la lista dei
   prossimi: attenuati, con spunta sulla copertina e chip, e non numerati. */
.episode-row.read { opacity: .62; }
.episode-row.read:hover { opacity: 1; }
.episode-row .thumb { position: relative; }
.thumb-read { position: absolute; top: 4px; left: 4px; z-index: 2; width: 18px; height: 18px;
    border-radius: 50%; background: var(--read); color: #06210f; font-size: .7rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.ep-read { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: var(--read); border: 1px solid var(--read); border-radius: 20px;
    padding: 1px 7px; margin-bottom: 3px; }
/* Numerazione: i prossimi contano 1..N (counter); i gia' letti mostrano il
   numero RELATIVO al punto di partenza (-1 = subito prima, ..., -20). */
.episode-list.numbered .episode-row.read { counter-increment: none; }
.episode-list.numbered .episode-row.read::before { content: attr(data-num); color: var(--muted); font-weight: 700; }
/* Divisore "Sei arrivato qui" tra gia' letti e prossimi. */
.start-here { list-style: none; margin: 8px 0; padding: 8px 12px; border-radius: 10px;
    background: var(--panel-2); border: 1px dashed var(--accent); color: var(--muted); font-size: .86rem; }
.start-here b { color: var(--accent); }
.head-hint { font-size: .8rem; font-weight: 400; color: var(--muted); }
/* Carosello: copertine gia' lette attenuate + chip nel pannello info. */
.carousel-slide.read img { opacity: .5; filter: grayscale(.35); }
.carousel-read { display: none; }
.carousel.current-read .carousel-read { display: inline-block; font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; color: var(--read); border: 1px solid var(--read);
    border-radius: 20px; padding: 2px 9px; margin-bottom: 6px; }
/* L'albo "letto fino a qui" (il punto di partenza): NON attenuato, con barra
   d'accento e chip rosso; nel carosello desaturato ma col chip d'accento. */
.episode-row.read.current { opacity: 1; }
.episode-row.current { box-shadow: inset 3px 0 0 var(--accent); border-radius: 8px; }
.episode-row.current .thumb-read { background: var(--accent); color: #fff; }
.ep-read.current { color: var(--accent); border-color: var(--accent); }
.episode-list.numbered .episode-row.current::before { color: var(--accent); font-weight: 800; }
.carousel.current-start .carousel-read { color: var(--accent); border-color: var(--accent); }
/* Marchio e menu sempre sulla STESSA riga: niente a capo (che spingeva il
   logo sopra i pulsanti). Il marchio resta fisso a sinistra, il menu prende lo
   spazio restante e, se non basta, scorre orizzontalmente invece di andare a
   capo. */
/* La barra dell'header puo' essere piu' larga del contenuto (900px): serve
   spazio per il marchio + 7 voci con icona. Sotto la soglia dell'hamburger il
   menu collassa comunque, quindi non trabocca mai. */
.topbar .wrap { display: flex; align-items: center; max-width: 1120px;
    gap: 12px; flex-wrap: nowrap; padding-top: 10px; padding-bottom: 10px; }

/* Wordmark in stile Marvel (omaggio, non il logo ufficiale) */
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.brand-logo { height: 36px; width: auto; display: block; flex: none; }
.brand-name { font-weight: 800; letter-spacing: -.3px; }

/* TELEFONO: la barra deve stare nello schermo. A 375px i suoi pezzi (hamburger
   41 + marchio 190 + fotocamera 40 + avatar 64, piu' tre spazi da 12) facevano
   371 dove ce n'erano 347, e l'avatar usciva a destra di 15px; a 360 di piu'.
   Si stringe quel che si puo' e si lascia cedere SOLO il nome del sito, che si
   accorcia coi puntini: gli altri sono bersagli da toccare col dito e devono
   restare grandi. */
@media (max-width: 480px) {
    .topbar .wrap { gap: 8px; }
    .brand { flex: 0 1 auto; min-width: 0; gap: 6px; }
    .brand-logo { height: 30px; }
    .brand-name { font-size: .94rem; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .brand-cam { margin-left: 0; }
    .nav-toggle { padding: 4px 8px; }
}
/* Uno scalino piu' stretto: moltissimi Android sono larghi 360, e li' col solo
   scalino sopra il nome del sito si accorciava gia' coi puntini. Qui ci sta
   intero; i puntini restano per i telefoni piu' piccoli (320). */
@media (max-width: 380px) {
    .topbar .wrap { gap: 6px; }
    .brand { gap: 4px; }
    .brand-logo { height: 28px; }
    .brand-name { font-size: .88rem; }
    .nav-toggle { padding: 4px 6px; }
}
.marvel-mark { background: var(--accent); color: #fff;
    font-family: "Arial Black", "Haettenschweiler", Impact, sans-serif;
    font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
    font-size: 1.2rem; line-height: 1; padding: 6px 10px 5px; border-radius: 3px;
    box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.brand-sub { color: #fff; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; font-size: .82rem; opacity: .9; }
.marvel-logo-img { height: 34px; width: auto; display: block; }

/* Su schermi larghi il menu e' una barra inline allineata a destra. */
.topbar nav { display: flex; gap: 6px; margin-left: auto; }
.topbar nav a { color: #fff; padding: 7px 11px; border-radius: 8px; font-size: .9rem;
    font-weight: 600; border: 1px solid transparent; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px; }
.nav-ico { width: 1.05em; height: 1.05em; flex: none; }

/* Hamburger: nascosto sopra la soglia (li' c'e' la barra inline). */
.nav-toggle { display: none; flex: none; background: transparent; color: #fff;
    border: 1px solid transparent; border-radius: 8px; font-size: 1.4rem;
    line-height: 1; padding: 4px 10px; cursor: pointer; }
.nav-toggle:hover { border-color: var(--accent); }

/* Scorciatoia alla foto accanto al logo: esiste solo sugli schermi stretti.
   Sopra i 760px non serve, perche' la voce di menu e' gia' raggiungibile e la
   barra ha altre cose da dire. */
.brand-cam { display: none; flex: none; align-items: center; justify-content: center;
    color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
    width: 40px; height: 40px; margin-left: 4px; text-decoration: none; }
.brand-cam-ic { width: 21px; height: 21px; display: block; }
.brand-cam:hover, .brand-cam:focus-visible { border-color: var(--accent); color: var(--accent); }
.brand-cam.active { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 760px) { .brand-cam { display: inline-flex; } }
.topbar nav a:hover { border-color: var(--accent); }
.topbar nav a.active { background: var(--accent); }

/* Azioni in evidenza: Aggiungi / Importa (leggermente accentate). */
.topbar nav a.nav-cta { background: rgba(226,54,54,.14); border-color: rgba(226,54,54,.45); }
.topbar nav a.nav-cta:hover, .topbar nav a.nav-cta.active { background: var(--accent); border-color: var(--accent); }
.nav-cta-ic { font-weight: 800; font-size: 1.05em; line-height: 1; }

/* Menu "Altro": tendina senza JavaScript, con <details>. */
.nav-more { position: relative; display: inline-flex; }
.topbar nav summary.nav-more-sum { list-style: none; cursor: pointer; color: #fff;
    padding: 7px 11px; border-radius: 8px; font-size: .9rem; font-weight: 600;
    border: 1px solid transparent; white-space: nowrap; display: inline-flex;
    align-items: center; gap: 6px; }
.topbar nav summary.nav-more-sum::-webkit-details-marker { display: none; }
.topbar nav summary.nav-more-sum:hover { border-color: var(--accent); }
.nav-more-menu { display: flex; flex-direction: column; gap: 2px; }
/* Su schermi larghi la tendina e' un pannello che scende; nel drawer mobile
   (sotto) resta inline nella colonna, comportamento naturale di <details>. */
@media (min-width: 1041px) {
    .nav-more[open] .nav-more-menu { position: absolute; right: 0; top: calc(100% + 8px);
        background: #0d0f14; border: 1px solid var(--border); border-radius: 10px;
        padding: 6px; min-width: 190px; box-shadow: 0 14px 34px rgba(0,0,0,.55); z-index: 70; }
    .nav-more[open] .nav-more-menu .nav-ico { display: inline-block; }
}
/* Nel drawer mobile c'e' spazio: "Altro" sparisce e le sue voci si mostrano tutte,
   in linea con le altre (niente tendina). Il <details> viene tenuto APERTO via JS
   su mobile, cosi' il contenuto si dipinge (un details chiuso non renderizza). */
@media (max-width: 1040px) {
    .nav-more { display: block; position: static; }
    .topbar nav summary.nav-more-sum { display: none; }
    .nav-more-menu { position: static; background: none; border: none;
        box-shadow: none; padding: 0; min-width: 0; }
}

/* Menu utente in alto a destra: badge (icona + username) + tendina senza JS. */
.user-menu { position: relative; display: inline-flex; flex: none; }
.user-badge { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
    gap: 8px; color: #fff; padding: 5px 12px 5px 5px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--panel-2); font-weight: 700;
    font-size: .88rem; white-space: nowrap; }
.user-badge::-webkit-details-marker { display: none; }
.user-badge:hover { border-color: var(--accent); }
.user-avatar { display: inline-flex; width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); align-items: center; justify-content: center; flex: none;
    color: #fff; font-weight: 800; font-size: 13px; line-height: 1; }
.user-caret { opacity: .8; font-size: .8em; }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); display: flex;
    flex-direction: column; min-width: 210px; background: #0d0f14; border: 1px solid var(--border);
    border-radius: 12px; padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.55); z-index: 70; }
.user-menu-head { color: var(--muted); font-size: .74rem; text-transform: uppercase;
    letter-spacing: .06em; padding: 8px 10px 6px; }
.user-menu-panel a { color: #fff; display: inline-flex; align-items: center; gap: 9px;
    padding: 10px; border-radius: 8px; font-size: .9rem; font-weight: 600; text-decoration: none; }
.user-menu-panel a .nav-ico { display: inline-block; width: 1.1em; height: 1.1em; flex: none; }
.user-menu-panel a:hover { background: var(--panel-2); }
.user-menu-panel a.active { background: var(--accent); }
@media (max-width: 1040px) { .user-menu { margin-left: auto; } }
@media (max-width: 420px) { .user-name { display: none; } }

/* Progress */
.progress-bar-wrap { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.progress-bar { flex: 1; height: 10px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--read), var(--accent-2)); }
.progress-label { font-size: .8rem; color: var(--muted); white-space: nowrap; }

main.wrap { padding-top: 16px; padding-bottom: 40px; }
.page-title { font-size: 1.4rem; margin: 6px 0 4px; padding-left: 12px;
    border-left: 5px solid var(--accent); }
/* Titolo dell'edizione italiana, secondario rispetto a quello originale:
   sotto al titolo nel dettaglio, fra parentesi in linea negli elenchi. */
.page-subtitle { color: var(--muted); font-size: 1rem; font-style: italic;
    margin: 0 0 6px; padding-left: 12px; }
/* Sottotitolo di sezione: una riga che spiega cosa contiene la pagina. */
.page-sub { color: var(--muted); font-size: .95rem; margin: 0 0 16px; padding-left: 12px; }
.ep-title-ita { color: var(--muted); font-weight: 400; font-style: italic; }
.count { color: var(--muted); font-size: .85rem; margin: 4px 0 14px; }
.back { display: inline-block; color: var(--muted); margin: 4px 0 12px; }
.back:hover { color: var(--text); }

/* Filtri */
/* Barre di ricerca sempre a portata di mano nelle pagine lunghe: restano
   agganciate sotto la barra di navigazione (alta 58px) mentre si scorre.
   Servono sfondo pieno e un margine negativo che compensi il padding, altrimenti
   le card scorrerebbero visibili sotto e ai lati della barra. */
.sticky-bar, .filters.sticky-bar {
    position: sticky; top: 58px; z-index: 20;
    background: var(--bg); padding: 10px 14px; margin: 0 -14px 12px;
    border-bottom: 1px solid var(--border); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px;
    background: var(--panel); padding: 10px; border-radius: 12px; }
.filters .search { flex: 1 1 220px; }
/* Il numero esatto e' di poche cifre: non deve rubare spazio al campo libero.
   min-width:0 e' necessario: senza, la larghezza intrinseca di un input
   (circa 20 caratteri) fa da minimo e il flex-basis viene ignorato. */
.filters .search-num { flex: 0 0 130px; min-width: 0; }
.filters input, .filters select, .filters button {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 9px 11px; font-size: .9rem; }
.filters button { background: var(--accent); border-color: var(--accent); color: #fff;
    font-weight: 700; cursor: pointer; }
/* Pulsante "azzera": era solo testo grigio, poco riconoscibile come comando.
   Ora e' un pulsante in negativo che diventa rosso al passaggio del mouse,
   per segnalare che e' un'azione distruttiva (svuota ricerca e filtri). */
.clear { display: inline-flex; align-items: center; gap: 6px; align-self: center;
    background: transparent; color: var(--muted);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 11px; font-size: .82rem; font-weight: 600;
    text-decoration: none; white-space: nowrap; line-height: 1;
    transition: background .15s, border-color .15s, color .15s; }
.clear:hover, .clear:focus-visible {
    background: var(--accent); border-color: var(--accent); color: #fff; }

/* Filtro per etichetta copertina in libreria (Originale / Variant / future).
   Le voci sono generate dal DB, quindi il numero di checkbox e variabile. */
/* Filtro per collana. Il comando sta nella prima riga accanto al numero e i
   badge nella riga delle etichette, che c'e' gia': su un telefono la barra dei
   filtri e' appiccicata in cima e ogni riga in piu' si mangia lo schermo. */
.coll-wrap { position: relative; }
.coll-btn { background: var(--panel-2) !important; color: var(--text) !important;
    border: 1px solid var(--border) !important; border-radius: 8px;
    padding: 9px 12px; font-size: .9rem; font-weight: 600 !important; cursor: pointer;
    white-space: nowrap; }
.coll-btn:hover { border-color: var(--accent) !important; }
.coll-btn.attivo { border-color: var(--accent) !important; color: var(--accent) !important; }
.coll-freccia { font-size: .8em; opacity: .7; }
.coll-pannello { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
    width: min(320px, calc(100vw - 40px)); background: var(--panel);
    border: 1px solid var(--border); border-radius: 12px; padding: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45); display: grid; gap: 8px; }
.coll-cerca { width: 100%; background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: .88rem; }
.coll-elenco { max-height: min(46vh, 320px); overflow-y: auto; display: grid; gap: 2px; }
.coll-voce { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    border-radius: 7px; cursor: pointer; font-size: .88rem; }
.coll-voce:hover { background: var(--panel-2); }
.coll-voce input { width: auto; margin: 0; flex: none; }
.coll-voce .coll-nome { flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.coll-voce .coll-n { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.coll-vuoto { color: var(--muted); font-size: .85rem; padding: 6px 8px; }

/* Sul telefono due cose andavano storte. Il pulsante finiva a capo, perche' i
   due campi da soli riempiono gia' la riga; e il pannello, ancorato al bordo
   destro del pulsante, si apriva verso sinistra fuori dallo schermo.
   Si stringono i campi per tenere tutto su una riga, e il pannello si ancora
   alla BARRA invece che al pulsante, cosi' occupa la larghezza che ha lei. */
@media (max-width: 560px) {
    /* min-width:0 anche qui: senza, la larghezza intrinseca di un input (una
       ventina di caratteri) fa da minimo, il campo non si stringe e il pulsante
       viene sbattuto a capo lo stesso. Stessa trappola gia' annotata sopra per
       il campo del numero. */
    /* 16px NON e' una scelta di gusto: sotto quella misura iOS ingrandisce da
       solo la pagina quando un campo riceve il fuoco, e lo zoom scompagina la
       larghezza che fino a un attimo prima stava dentro lo schermo. Vale per
       tutti i campi della barra, non solo per quello del pannello, che il fuoco
       lo prende da solo all'apertura. La larghezza non cambia: la decide il
       flex-basis, non il testo dentro. */
    .filters input, .coll-cerca { font-size: 16px; }
    .filters .search { flex: 1 1 110px; min-width: 0; }
    .filters .search-num { flex: 0 0 88px; }
    .coll-btn { padding: 9px 10px; }
    .coll-wrap { position: static; }       /* l'ancora diventa .filters */
    .coll-pannello { left: 10px; right: 10px; width: auto; }
}
/* Schermi davvero stretti (320px, i vecchi SE): con le misure di sopra i tre
   comandi non ci stanno per una quindicina di pixel. Si stringe ancora il campo
   del numero, che ospita al massimo quattro cifre. */
@media (max-width: 380px) {
    .filters .search { flex: 1 1 90px; }
    .filters .search-num { flex: 0 0 70px; }
    .coll-btn { padding: 9px 8px; }
}
/* Riga tutta loro, sotto ai comandi: dentro la riga delle etichette i badge
   finivano di fianco ai campi sugli schermi larghi, dove la barra sta su una
   riga sola. Vuota la zona sparisce del tutto, quindi a riposo non costa
   niente ne' in altezza ne' in spaziatura. */
.coll-badge-zona { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center; }
.coll-badge-zona:empty { display: none; }
/* Scorrendo, la barra resta agganciata in cima e i badge si mangerebbero
   schermo per tutta la pagina. Si nascondono: quali collane sono attive lo dice
   comunque il pulsante, che diventa "Collane (2)" e si colora, quindi
   l'informazione non si perde, si condensa. Tornando in cima ricompaiono. */
.filters.scorsa .coll-badge-zona { display: none; }
.coll-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem;
    background: var(--panel-2); border: 1px solid var(--accent); color: var(--text);
    border-radius: 999px; padding: 3px 6px 3px 10px; max-width: 220px; }
.coll-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-badge button { background: none; border: 0; color: var(--muted); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0 3px; }
.coll-badge button:hover { color: var(--accent); }

.label-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    align-self: center; padding: 0 4px; }
.label-check { display: inline-flex; align-items: center; gap: 6px;
    color: var(--muted); font-size: .85rem; cursor: pointer; user-select: none; }
.label-check:hover { color: var(--text); }
.filters .label-check input { width: auto; padding: 0; margin: 0; border: 0;
    background: none; accent-color: var(--accent); cursor: pointer; }

/* Lista episodi */
.episode-list { list-style: none; margin: 0; padding: 0; }
.episode-row { display: flex; align-items: center; gap: 12px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 8px 10px; margin-bottom: 8px; transition: border-color .15s; }
.episode-row:hover { border-color: var(--accent); }
.episode-row.is-read { opacity: .62; }
.read-toggle { flex: none; width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid var(--border); background: transparent; color: var(--muted);
    font-size: 1rem; cursor: pointer; line-height: 1; }
.episode-row.is-read .read-toggle { border-color: var(--read); color: var(--read); }
.thumb { flex: none; width: 46px; height: 68px; border-radius: 6px; overflow: hidden;
    background: var(--panel-2); display: flex; align-items: center; justify-content: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.ep-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ep-date { font-size: .72rem; color: var(--accent-2); font-weight: 700; letter-spacing: .03em; }
.ep-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-src { font-size: .78rem; color: var(--muted); }
.ep-src em { color: var(--text); font-style: normal; }
/* nome del volume: porta alla sua scheda. Colore invariato, si scopre
   passandoci sopra, per non trasformare la riga in un arcobaleno di link. */
.vol-ref { color: inherit; }
.vol-ref:hover, .vol-ref:focus-visible { color: var(--accent-2);
    text-decoration: underline; }
.ep-char { color: var(--accent-2); }
/* "anche in": gli altri volumi che coprono l'episodio (scheda volume) */
.ep-alsoin { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.ep-only { font-style: italic; opacity: .75; }
.vol-coverage { font-size: .9rem; }
/* Sezione "Nei tuoi volumi" in fondo alla scheda episodio */
.ep-volumes { margin-top: 26px; }

/* --- Analizza volume ----------------------------------------------------- */
.an-form { display: flex; gap: 10px; margin: 6px 0 20px; flex-wrap: wrap; align-items: stretch; }
.an-input-wrap { flex: 1 1 340px; min-width: 0; position: relative; display: flex; align-items: center; }
.an-input-icon { position: absolute; left: 14px; font-size: 1.05rem; opacity: .65; pointer-events: none; }
.an-input { width: 100%; background: var(--bg); border: 2px solid var(--border); border-radius: 12px;
    padding: 14px 42px 14px 44px; color: var(--text); font-size: 1rem;
    transition: border-color .15s, box-shadow .15s; }
.an-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: var(--muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; padding: 5px;
    border-radius: 6px; }
.an-clear:hover { color: var(--text); background: var(--panel-2); }
.an-input::placeholder { color: var(--muted); }
.an-input:focus { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(226, 54, 54, .28); }
.an-btn { background: var(--accent); color: #fff; border: none; border-radius: 12px;
    padding: 0 26px; min-height: 52px; font-weight: 800; font-size: .95rem;
    text-transform: uppercase; letter-spacing: .5px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); transition: filter .15s, transform .08s, box-shadow .08s; }
.an-btn::before { content: "🔎"; font-size: 1.05rem; }
.an-btn:hover { filter: brightness(1.12); }
.an-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
@media (max-width: 520px) { .an-btn { flex: 1 1 100%; justify-content: center; min-height: 46px; } }
.an-card { display: flex; gap: 16px; background: var(--panel); border: 2px solid var(--border);
    border-radius: 12px; padding: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.an-card-cover { flex: none; width: 120px; }
.an-card-cover img { width: 100%; border-radius: 6px; display: block; }
.an-card-body { flex: 1 1 260px; min-width: 0; }
.an-card-title { font-size: 1.15rem; margin: 0 0 4px; }
.an-card-sub { color: var(--muted); font-size: .9rem; margin: 2px 0; }
.an-num-owned { color: var(--accent-2); }
.an-num-new { color: var(--accent); }
.an-verdict { margin: 8px 0 4px; font-weight: 600; }
.an-verdict.full { color: var(--accent-2); }
.an-verdict.none { color: var(--accent); }
.an-cb-link { display: inline-block; margin-top: 6px; color: var(--muted); font-size: .85rem; }
.an-cb-link:hover { color: var(--accent); }

.an-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.an-ep { display: flex; gap: 12px; background: var(--panel); border: 2px solid var(--border);
    border-left-width: 5px; border-radius: 10px; padding: 10px; }
.an-ep.an-owned { border-left-color: var(--accent-2); }
.an-ep.an-inedito { border-left-color: var(--accent); }
.an-ep-cover { flex: none; width: 52px; }
.an-ep-cover img { width: 100%; border-radius: 4px; display: block; }
.an-ep-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.an-ep-title { font-weight: 600; }
.an-ep-src { font-size: .78rem; color: var(--muted); }
.an-tag { font-size: .8rem; font-weight: 600; }
.an-tag.new { color: var(--accent); }
.an-tag.owned { color: var(--accent-2); }
.an-owned-vols { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.an-volchip { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2);
    border-radius: 6px; padding: 3px 8px 3px 3px; font-size: .78rem; color: var(--text); }
.an-volchip:hover { background: var(--accent); color: #fff; }
.an-volchip img { width: 22px; height: 30px; object-fit: cover; border-radius: 3px; }
.an-admin-note { color: var(--muted); font-size: .85rem; margin-top: 18px; }
.noimg { color: var(--muted); font-size: .7rem; text-align: center; }
/* Copertina non ancora pubblicata: un riquadro che dice come stanno le cose, al
   posto dell'icona di immagine rotta. Ha la forma di una copertina (2/3) cosi'
   la griglia del catalogo non si scompone quando ne mancano diverse. */
.noimg-box { display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; aspect-ratio: 2/3; box-sizing: border-box; padding: 12px;
    border: 1px dashed var(--border); border-radius: 12px; background: var(--panel-2);
    color: var(--muted); font-size: .78rem; line-height: 1.4; }
/* Nella griglia la cella ha gia' sfondo e proporzioni sue: qui basta il testo. */
.char-cover .noimg-box { border: 0; border-radius: 0; padding: 8px; font-size: .7rem; }
.empty { color: var(--muted); padding: 30px; text-align: center; }

/* Barra dei decenni: salto rapido nella cronologia */
.decades { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 9px 12px; margin: 0 0 16px; }
.decades-lbl { color: var(--muted); font-size: .78rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; margin-right: 4px; }
.decades a { color: var(--muted); background: var(--panel-2);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 5px 12px; font-size: .82rem; font-weight: 700;
    transition: background .15s, border-color .15s, color .15s; }
.decades a:hover, .decades a:focus-visible {
    background: var(--accent); border-color: var(--accent); color: #fff; }
.decades a.active { background: var(--accent-2); border-color: var(--accent-2);
    color: #1a1a1a; }

/* Separatore d'anno: resta agganciato sotto la topbar mentre si scorre,
   cosi si sa sempre in che punto della cronologia ci si trova. */
.year-sep { position: sticky; top: 66px; z-index: 5;   /* topbar alta ~60px */
    scroll-margin-top: 72px;   /* il salto per decennio non finisce sotto la topbar */
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0 8px; pointer-events: none; }
.year-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.year-sep span { background: var(--accent); color: #fff;
    font-weight: 800; font-size: .9rem; letter-spacing: .06em;
    padding: 4px 14px; border-radius: 999px; }
.episode-list .year-sep:first-child { margin-top: 0; }

/* Scelta lista / carosello */
.view-switch { display: inline-flex; gap: 4px; margin: 0 0 16px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 999px; padding: 4px; }
/* titolo sezione e selettore vista sulla stessa riga (pagina "Da dove riparto") */
.section-head { display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 10px; }
.section-head .section-title { margin: 6px 0; }
.section-head .view-switch { margin: 0; }
.view-switch a { color: var(--muted); border-radius: 999px;
    padding: 6px 15px; font-size: .85rem; font-weight: 600;
    transition: background .15s, color .15s; }
.view-switch a:hover { color: var(--text); }
.view-switch a.active { background: var(--accent); color: #fff; }

/* Carosello: la copertina e' il contenuto, le vicine restano appena
   visibili ai lati per dare il senso della cronologia che scorre. */
.carousel { background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 20px 16px; margin-bottom: 18px; }
/* La scena ha altezza fissa (impostata dal JS insieme alla dimensione delle
   copertine): le immagini hanno proporzioni diverse e a misura libera la
   scena si allargherebbe a ogni episodio, spostando le frecce. */
.carousel-stage { position: relative; overflow: hidden; }
.carousel-wheel { position: relative; height: 100%; perspective: 1400px; }

/* Ogni copertina e' un elemento a se', posizionato al centro e spostato dal
   JS con una transform: e' quello che permette alla ruota di girare. */
.carousel-slide { position: absolute; top: 0; left: 50%; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
    background: var(--panel-2); border-radius: 10px;
    border: 2px solid var(--border);
    /* la transizione e' l'animazione della ruota: parte decisa e frena dolce */
    transition: transform 1s cubic-bezier(.22, .61, .36, 1),
                opacity 1s, filter 1s;
    will-change: transform; }
.carousel-slide img { display: block; width: 100%; height: 100%;
    object-fit: contain; }
.carousel-slide .noimg { padding: 8px; text-align: center; }
/* le copertine laterali arretrano: piu' spente e in bianco e nero */
.carousel-slide:not(.is-current) { filter: grayscale(.55) brightness(.75); }
.carousel-slide:not(.is-current):hover { filter: none; }
.carousel-slide.is-current { box-shadow: 6px 7px 0 rgba(0, 0, 0, .45); }
/* fuori dalla ruota: non deve essere raggiungibile con il tab */
.carousel-slide[aria-hidden="true"] { pointer-events: none; }

/* Chi chiede movimento ridotto ha comunque lo scorrimento, ma piu' breve e
   lineare: l'animazione della ruota e' una funzione voluta, non un fronzolo,
   e senza di essa la copertina sembrerebbe sovrascritta di colpo. */
@media (prefers-reduced-motion: reduce) {
    .carousel-slide { transition: transform .56s ease-out, opacity .56s, filter .56s; }
}

/* Frecce in linea col titolo: sopra le copertine coprivano le piu' esterne. */
/* Spazio riservato per due righe di titolo: senza, sugli episodi dal titolo
   lungo la riga cresceva e le frecce scendevano di qualche pixel. */
.carousel-titlerow { display: flex; align-items: center; gap: 12px; margin: 0 0 8px;
    min-height: calc(1.25rem * 1.45 * 2); }
.carousel-arrow { flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); font-size: 1.5rem; line-height: 1;
    cursor: pointer; transition: background .15s, border-color .15s; }
.carousel-arrow:hover:not(:disabled) {
    background: var(--accent); border-color: var(--accent); color: #fff; }
.carousel-arrow:disabled { opacity: .25; cursor: default; }
/* L'altezza non si riserva qui ma sulle singole righe che possono andare a
   capo (titolo e autori): riservarla in blocco non bastava piu' da quando il
   pannello contiene anche le copertine dei volumi. */
.carousel-info { text-align: center; margin-top: 18px; }
.carousel-date { color: var(--accent-2); font-weight: 700; font-size: .8rem;
    letter-spacing: .06em; margin: 0 0 4px; }
/* il titolo occupa lo spazio fra le due frecce e resta centrato */
.carousel-title { flex: 1; min-width: 0; font-size: 1.25rem; margin: 0; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; }
.carousel-title a { color: var(--text); }
.carousel-title a:hover { color: var(--accent); }
/* due righe riservate anche qui: su schermi stretti serie e personaggio
   vanno a capo e il pannello cresceva di 21px su alcuni episodi */
.carousel-src { color: var(--muted); font-size: .88rem; margin: 0 0 6px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; min-height: calc(.88rem * 1.45 * 2); }
/* al massimo due righe: oltre, il pannello cresceva oltre lo spazio riservato.
   I crediti completi restano nella scheda dell'episodio. */
.carousel-authors { color: var(--muted); font-size: .82rem; margin: 0 0 6px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
    /* due righe sempre riservate: gli elenchi di autori lunghi ne occupano
       due e senza questo il pannello cresceva a scatti */
    min-height: calc(.82rem * 1.45 * 2); }

/* Volumi che contengono l'episodio: titolo sopra, copertina sotto. Sono
   piccole perche' un episodio puo' stare in 5 volumi e devono starci tutte. */
.carousel-in { color: var(--muted); font-size: .82rem; margin: 0 0 8px; }
/* Su una riga sola, che scorre se non ci sta: andando a capo, su schermi
   stretti un episodio in 5 volumi faceva passare la striscia da 203 a 637px.
   `safe center` centra quando ci sta ma non rende irraggiungibile il primo
   elemento quando si scorre. */
.carousel-volumes { display: flex; flex-wrap: nowrap; overflow-x: auto;
    justify-content: center; justify-content: safe center;
    align-items: stretch; gap: 14px; padding-bottom: 4px; }
.carousel-vol { flex: none; }
.carousel-vol { display: flex; flex-direction: column; align-items: center;
    gap: 5px; width: 118px; color: var(--text); }
.carousel-vol-name { font-size: .72rem; line-height: 1.3; text-align: center;
    /* due righe riservate: senza, i nomi lunghi allungavano il pannello */
    height: calc(.72rem * 1.3 * 2); overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* Titolo proprio del volume, sotto il nome ("Daredevil 9" sotto "Marvel
   Masterworks 122"). C'e' solo in alcuni volumi: per questo le copertine si
   allineano in basso (margin-top: auto, con la fila che si stira alla stessa
   altezza), altrimenti due volumi affiancati le avrebbero sfalsate. */
/* Con il titolo, il nome non riserva la seconda riga: se sta in una sola
   ("Marvel Omnibus 209"), il titolo gli va subito sotto invece di finire
   dopo una riga vuota. Nome su una riga piu' titolo su una riga occupano le
   stesse due righe di prima, quindi il pannello non cambia misura. Il margine
   negativo annulla lo spazio fra gli elementi della colonna (gap). */
.carousel-vol.has-sub .carousel-vol-name { height: auto; max-height: calc(.72rem * 1.3 * 2); }
.carousel-vol.has-sub .carousel-vol-sub { margin-top: -5px; margin-bottom: 5px; }  /* un filo d'aria prima della copertina */
.carousel-vol-sub { font-size: .68rem; line-height: 1.3; text-align: center;
    color: var(--muted); max-height: calc(.68rem * 1.3 * 2); overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.carousel-vol img, .carousel-vol-noimg { width: 100%; height: 168px; margin-top: auto;
    object-fit: contain; border-radius: 6px; background: var(--panel-2);
    border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.carousel-vol-noimg { display: flex; align-items: center; justify-content: center;
    color: var(--muted); }
.carousel-vol:hover img { border-color: var(--accent); transform: translateY(-2px); }
.carousel-vol:hover .carousel-vol-name { color: var(--accent-2); }
.carousel-pos { color: var(--muted); font-size: .78rem; margin: 12px 0 0;
    letter-spacing: .05em; }

/* su schermi stretti il JS riduce da solo copertine e numero di vicine */

/* Pager */
/* flex-wrap: su schermi stretti i tre elementi (prec / info / succ) vanno a
   capo tra loro invece di stringersi; nowrap sui link tiene la freccia
   attaccata alla parola. */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px 16px;
    margin: 18px 0; flex-wrap: wrap; }
.pager a { background: var(--panel-2); padding: 8px 14px; border-radius: 8px;
    white-space: nowrap; }
.pager a:hover { background: var(--accent); }
.pageinfo { color: var(--muted); font-size: .85rem; }
/* Libreria impaginata: mentre il server prepara i risultati della ricerca, la
   griglia vecchia resta visibile ma sbiadita, cosi' si capisce che sta per
   cambiare invece di sembrare ferma. */
.vol-grid.lib-attesa { opacity: .5; transition: opacity .15s; }
.lib-cerco { color: var(--accent); font-weight: 700; }

/* Sfoglia la collana dalla pagina del volume: precedente a sinistra,
   successivo a destra (uno span vuoto tiene la posizione se manca un lato). */
.serie-nav { display: flex; justify-content: space-between; gap: 10px;
    margin: 0 0 16px; }
.serie-nav-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 48%;
    background: var(--panel); border: 2px solid var(--border); border-radius: 10px;
    padding: 8px 12px; color: var(--text); }
.serie-nav-btn:hover { border-color: var(--accent); background: var(--panel-2); }
.serie-nav-btn.next { text-align: right; }
.serie-nav-arrow { font-size: 1.4rem; line-height: 1; color: var(--muted); flex: none; }
.serie-nav-txt { display: flex; flex-direction: column; min-width: 0; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serie-nav-txt small { font-weight: 400; font-size: .72rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em; }

/* Comics USA: la lista introduttiva e le storie contenute in un albo */
.section-intro { color: var(--muted); margin: 0 0 14px; }
.us-flag { color: var(--muted); font-size: .9rem; }
.story-list { list-style: none; display: flex; flex-direction: column; gap: 10px;
    margin: 18px 0; padding: 0; }
.story-row { background: var(--panel); border: 2px solid var(--border);
    border-radius: 10px; padding: 10px 14px; }
.story-open { display: flex; align-items: baseline; gap: 10px; }
.story-open:hover .story-title { color: var(--accent); }
.story-num { flex: none; width: 1.6em; height: 1.6em; border-radius: 50%;
    background: var(--panel-2); color: var(--muted); font-size: .8rem;
    display: inline-flex; align-items: center; justify-content: center; }
.story-title { font-weight: 600; color: var(--text); }
.story-meta { margin-top: 4px; padding-left: calc(1.6em + 10px);
    font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* Libreria */
.vol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.vol-card { background: var(--panel); border: 2px solid var(--border); border-radius: 12px;
    overflow: hidden; transition: transform .12s, border-color .12s, box-shadow .12s;
    box-shadow: 4px 4px 0 rgba(0,0,0,.45);
    /* Con migliaia di card (Comics USA ne ha ~8800) il browser impaginava e
       decodificava tutto: pesante su mobile. Con content-visibility rende solo
       le card vicine al viewport; contain-intrinsic-size da' l'ingombro di una
       card non ancora resa, cosi' la barra di scorrimento resta corretta. La
       prima riga (misura fissa) e' il fallback per Safari che non capisce la
       parola-chiave `auto` (che invece memorizza l'ingombro reale). */
    content-visibility: auto;
    contain-intrinsic-size: 165px 320px;
    contain-intrinsic-size: auto 165px auto 320px; }
.vol-card:hover { transform: translateY(-3px); border-color: var(--accent);
    box-shadow: 5px 6px 0 var(--accent); }
.vol-cover { aspect-ratio: 2/3; background: var(--panel-2); display: flex;
    align-items: center; justify-content: center; }
.vol-cover img { width: 100%; height: 100%; object-fit: cover; }
.vol-info { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.vol-name { font-weight: 700; font-size: .9rem; }
.vol-title { font-size: .82rem; color: var(--accent-2); font-style: italic; }
.vol-sub { font-size: .75rem; color: var(--muted); }

/* Testo di benvenuto esteso in home */
.intro { margin: 22px 0; }
.intro-text { background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px; }
.intro-text p { margin: 0 0 12px; color: var(--muted); line-height: 1.65; font-size: .95rem; }
.intro-text p:last-child { margin-bottom: 0; }
.intro-text strong { color: var(--text); }
.intro-example { border-left: 3px solid var(--accent); background: var(--panel-2);
    border-radius: 0 8px 8px 0; padding: 12px 14px; }
.intro-list { margin: 0 0 12px; padding-left: 28px; color: var(--muted); line-height: 1.65;
    font-size: .95rem; }
.intro-list li { margin-bottom: 6px; }
.intro-list li:last-child { margin-bottom: 0; }
.intro-list strong { color: var(--text); }

/* Bottone di export PDF (piano di lettura e scheda volume) */
.pdf-btn { display: inline-flex; align-items: center; gap: 6px; align-self: center;
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 7px 12px; font-size: .85rem; font-weight: 600;
    text-decoration: none; white-space: nowrap; }
.pdf-btn:hover { border-color: var(--accent); color: #fff; }
.vol-header-info .pdf-btn { margin-top: 8px; }
.lib-pdf { margin-left: 10px; padding: 4px 10px; font-size: .8rem; vertical-align: middle; }

/* Decorazione della home: colonne di copertine casuali ai bordi della pagina e
   fascia orizzontale in fondo. E' solo estetica, quindi sta SOTTO al contenuto
   (z-index 0 contro l'1 del main) e non intercetta il mouse. */
main.wrap { position: relative; z-index: 1; }
.deco { position: fixed; top: 60px; bottom: 0; z-index: 0;
    display: flex; gap: 8px; padding: 10px;
    overflow: hidden; pointer-events: none; opacity: .3;
    /* Dissolvenza solo in alto, per entrare morbide sotto la topbar: in basso
       le colonne proseguono fino al fondo della finestra. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%); }
.deco-left { left: 0; }
.deco-right { right: 0; }
/* Ogni lato e' fatto di piu' colonne affiancate, sfalsate in verticale cosi'
   le copertine non si allineano in righe rigide. */
.deco-col { flex: 0 0 108px; width: 108px; display: flex; flex-direction: column; gap: 10px; }
.deco-col:nth-child(2) { margin-top: 46px; }
.deco-col:nth-child(3) { margin-top: 20px; }
.deco img { width: 100%; display: block; border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0,0,0,.55); }

.deco-band { display: flex; gap: 10px; align-items: flex-end; margin: 34px 0 12px;
    overflow: hidden; pointer-events: none; opacity: .42;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); }
.deco-band img { height: 140px; width: auto; display: block; border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0,0,0,.55); }

/* Le colonne laterali richiedono spazio libero oltre ai 900px del contenuto.
   Man mano che la finestra si stringe se ne tolgono, invece di farle finire
   sotto al testo: 3 per lato -> 2 -> 1 -> nessuna. */
@media (max-width: 1680px) { .deco-col:nth-child(3) { display: none; } }
@media (max-width: 1440px) { .deco-col:nth-child(2) { display: none; } }
@media (max-width: 1260px) { .deco { display: none; } }
@media (max-width: 620px) { .deco-band img { height: 104px; } }

/* Etichetta variant sulla card libreria */
.vol-cover { position: relative; }
.variant-tag { position: absolute; top: 6px; left: 6px; background: var(--accent-2);
    color: #14161c; font-size: .66rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; padding: 2px 7px; border-radius: 6px; box-shadow: 1px 1px 0 rgba(0,0,0,.4); }

/* Galleria copertine nella pagina volume */
.cover-gallery { margin: 4px 0 20px; }
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.cover-item { margin: 0; background: var(--panel); border: 2px solid var(--border);
    border-radius: 10px; overflow: hidden; box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
.cover-item img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.cover-item figcaption { padding: 6px 8px; font-size: .78rem; color: var(--muted); text-align: center; }

/* Header volume: copertina grande come nella scheda episodio. Il tetto e' 320px
   perche' oltre la meta' delle copertine di volume e' larga 200px in origine e
   piu' in grande si sgranerebbe. La lista episodi scorre semplicemente sotto. */
.vol-header { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.vol-header-cover { flex: 1 1 240px; max-width: 320px; }
.vol-header-cover img { width: 100%; border-radius: 12px;
    border: 1px solid var(--border); }
.vol-header-info { flex: 2 1 320px; }
.vol-header-info p { color: var(--muted); margin: 4px 0; }
.vol-header-title { color: var(--accent-2) !important; font-style: italic; font-size: 1.05rem; }

/* Dettaglio episodio */
.episode-detail { display: flex; gap: 20px; flex-wrap: wrap; }
.ep-cover { flex: 1 1 260px; max-width: 340px; }
.ep-cover img { width: 100%; border-radius: 12px; border: 1px solid var(--border); }
.ep-body { flex: 2 1 320px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.badge { background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px;
    padding: 4px 12px; font-size: .8rem; }
.badge-char { color: var(--accent-2); border-color: var(--accent-2); font-weight: 600; }
.badge-read { color: var(--read); border-color: var(--read); }
.badge-unread { color: var(--accent-2); border-color: var(--accent-2); }

/* Badge lingua edizione (accanto ai volumi nei risultati). Compatto, inline. */
.lang-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 10px;
    font-size: .72em; font-weight: 700; line-height: 1.5; border: 1px solid var(--border);
    background: var(--panel-2); vertical-align: baseline; white-space: nowrap; font-style: normal; }
.lang-badge.lang-usa { color: var(--accent); border-color: var(--accent); }
.lang-badge.lang-it  { color: var(--read); border-color: var(--read); }
/* Altre edizioni estere: tinta distinta (fallback neutro dalla regola base). */
.lang-badge.lang-ru  { color: #c0504d; border-color: #c0504d; }
.lang-badge.lang-de  { color: #b8860b; border-color: #b8860b; }
.lang-badge.lang-fr  { color: #4f7cc0; border-color: #4f7cc0; }
/* inline-block + testo centrato: su mobile il testo lungo va a capo DENTRO il
   pulsante (un rettangolo pulito) invece di spezzarne lo sfondo su due righe. */
.big-toggle { display: inline-block; text-align: center;
    background: var(--accent); color: #fff; border: none; border-radius: 10px;
    padding: 11px 18px; font-weight: 700; cursor: pointer; margin: 18px 0 16px; font-size: .95rem; }
.big-toggle:hover { filter: brightness(1.1); }
.meta { margin: 0; }
.meta dt { color: var(--accent-2); font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .04em; margin-top: 14px; }
.meta dd { margin: 4px 0 0; }
.synopsis { line-height: 1.6; }

/* Box "Riprendi da dove eri" */
.resume-box { display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    background: linear-gradient(90deg, rgba(226,54,54,.18), var(--panel));
    border: 2px solid var(--accent); border-radius: 12px; padding: 10px 12px;
    box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.resume-box[hidden] { display: none; }  /* l'attributo hidden deve prevalere */
.resume-cover { width: 40px; height: 60px; object-fit: cover; border-radius: 5px; flex: none; }
.resume-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.resume-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px;
    font-weight: 800; color: var(--accent-2); }
.resume-label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-btn { background: var(--accent); color: #fff; border-radius: 8px; padding: 9px 15px;
    font-weight: 800; white-space: nowrap; flex: none; }
.resume-btn:hover { filter: brightness(1.1); }
.resume-forget { background: transparent; border: none; color: var(--muted); cursor: pointer;
    font-size: 1rem; flex: none; }
.resume-forget:hover { color: var(--text); }
/* il form attorno al pulsante ✕ (versione admin lato server) non deve
   alterare il layout flex del box */
.resume-forget-form { display: contents; }

/* Griglia personaggi */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.char-card { background: var(--panel); border: 2px solid var(--border); border-radius: 12px;
    overflow: hidden; box-shadow: 4px 4px 0 rgba(0,0,0,.45);
    transition: transform .12s, border-color .12s, box-shadow .12s; }
.char-card:hover { transform: translateY(-3px); border-color: var(--accent);
    box-shadow: 5px 6px 0 var(--accent); }
.char-cover { aspect-ratio: 2/3; background: var(--panel-2); display: flex;
    align-items: center; justify-content: center; overflow: hidden; }
.char-cover img { width: 100%; height: 100%; object-fit: cover; }
.char-info { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.char-name { font-weight: 800; }
.char-sub { font-size: .75rem; color: var(--muted); }
.char-header { margin-bottom: 16px; }
.char-header .stats-row { margin: 10px 0 12px; }
.ep-date-title { display: flex; flex-direction: column; gap: 2px; color: inherit; }
.ep-char:hover { text-decoration: underline; }

/* ---- Catalogo ---- */
.cat-note { color: var(--muted); font-size: .85rem; line-height: 1.4;
    background: var(--panel); border: 1px solid var(--border);
    border-left: 3px solid var(--accent-2); border-radius: 8px;
    padding: 10px 14px; margin: 6px 0 2px; }
.cat-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px; margin: 20px 0; }
.cat-tile { display: flex; flex-direction: column; gap: 8px; justify-content: center;
    min-height: 130px; padding: 26px 24px; background: var(--panel);
    border: 2px solid var(--border); border-radius: 14px; box-shadow: 4px 4px 0 rgba(0,0,0,.45);
    transition: transform .12s, border-color .12s, box-shadow .12s; }
.cat-tile:hover { transform: translateY(-3px); border-color: var(--accent);
    box-shadow: 5px 6px 0 var(--accent); }
.cat-tile-label { font-size: 1.5rem; font-weight: 800; }
.cat-tile-sub { color: var(--muted); font-size: .9rem; }
.cat-tile.cat-mdcusa .cat-tile-label, .cat-tile.cat-mdcit .cat-tile-label { color: var(--accent-2); }

/* elenco serie: una card stretta per riga (riusa .char-card + il filtro app.js) */
.char-grid.cat-list { grid-template-columns: 1fr; gap: 8px; }
.cat-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px; }
.cat-row .char-name { font-weight: 800; }
.cat-row .char-sub { color: var(--muted); font-size: .82rem; white-space: nowrap; }

/* catalogo: navigazione serie precedente/successiva */
.cat-nav { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0 16px; }
.cat-nav-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px; background: var(--panel); border: 2px solid var(--border);
    border-radius: 12px; text-decoration: none; color: var(--text); }
.cat-nav-btn.next { text-align: right; align-items: flex-end; }
.cat-nav-btn.disabled { visibility: hidden; }
.cat-nav-btn:hover { border-color: var(--accent); }
.cat-nav-dir { font-size: .78rem; color: var(--muted); }
.cat-nav-name { font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }

/* catalogo: paginazione dell'elenco serie (Comics USA ne ha ~8.960, una
   pagina sola era troppo pesante da disegnare su mobile) */
.cat-pager { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 16px 0; }
.cat-pager-btn { padding: 8px 16px; background: var(--panel); border: 2px solid var(--border);
    border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 700;
    white-space: nowrap; }
.cat-pager-btn.disabled { visibility: hidden; }
.cat-pager-btn:hover { border-color: var(--accent); }
.cat-pager-pos { color: var(--muted); font-size: .85rem; }
/* Su schermo stretto "‹ Precedenti" e "Successive ›" non ci stanno su una
   riga sola alla dimensione normale e vanno a capo, spingendo "Pagina X di
   Y" fuori squadra: piu' piccoli qui, restano su una riga. */
@media (max-width: 480px) {
    .cat-pager-btn { padding: 7px 10px; font-size: .82rem; }
    .cat-pager-pos { font-size: .75rem; }
}

/* Pulsante-collegamento secondario (outline accent, riempimento all'hover) */
.link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    border: 2px solid var(--accent); border-radius: 8px; color: var(--accent);
    background: transparent; text-decoration: none; font-weight: 700; font-size: .9rem; }
.link-btn:hover { background: var(--accent); color: #fff; }

/* Esiti delle operazioni (banner in cima alla pagina, vedi base.html).
   Gli stessi nomi erano gia' usati dentro profilo.html: qui diventano globali. */
.ok-msg { background: rgba(46,204,113,.14); border: 1px solid rgba(46,204,113,.5); color: #a8ecc2;
    border-radius: 10px; padding: 10px 13px; font-size: 14px; margin-bottom: 14px; }
.err-msg { background: rgba(226,54,54,.12); border: 1px solid rgba(226,54,54,.5); color: #ffb3b3;
    border-radius: 10px; padding: 10px 13px; font-size: 14px; margin-bottom: 14px; }

.an-alt { color: var(--muted); font-size: .9rem; margin: 14px 0 8px; }
.cat-notfound { color: var(--muted); font-size: .9rem; margin: 22px 0 10px; text-align: center; }
.cat-notfound-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* dettaglio albo: storie contenute */
.cat-story-own { margin: 8px 0 2px; }
.cat-story { background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 16px; margin: 8px 0; display: flex; gap: 14px; align-items: flex-start; }
/* Miniatura dell'albo USA della storia: misura fissa per tutte, anche quando
   manca e al suo posto c'e' il riquadro di coverMancante(). */
.cat-story-thumb { flex: none; width: 60px; aspect-ratio: 2/3; border-radius: 6px;
    overflow: hidden; background: var(--panel-2); }
.cat-story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-story-thumb .noimg-box { border: 0; border-radius: 0; padding: 4px; height: 100%;
    font-size: .58rem; line-height: 1.2; }
.cat-story-body { flex: 1; min-width: 0; }

/* Ricerca globale nel catalogo: una riga per albo, divise per sezione. */
.cat-search-form { margin: 10px 0 14px; }
.cat-search-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
/* Dentro la barra agganciata della ricerca i margini li da' la barra. */
.cat-search-bar .cat-search-form { margin: 0; }
.cat-search-bar .cat-search-nav { margin: 8px 0 0; }
.cat-search-nav a { background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 4px 12px; font-size: .85rem; color: var(--text);
    text-decoration: none; }
.cat-search-nav a:hover { border-color: var(--accent); }
.cat-search-nav a span, .cat-search-n { color: var(--muted); font-weight: 400; margin-left: 4px; }
/* Le ancore (#sez-..., #r-CODE) finiscono sotto la topbar (58px) E sotto la
   barra della ricerca, alta --cerca-h (la misura la pagina; 130px di riserva). */
.cat-search-sez { margin: 18px 0; scroll-margin-top: calc(66px + var(--cerca-h, 130px)); }
.cat-hit { display: flex; gap: 12px; align-items: flex-start; background: var(--panel);
    border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 6px 0;
    color: var(--text); text-decoration: none;
    scroll-margin-top: calc(70px + var(--cerca-h, 130px)); }
.cat-hit:target { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cat-hit:hover { border-color: var(--accent); }
.cat-hit .cat-story-thumb { width: 46px; }
.cat-hit-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-hit-title { font-weight: 700; }
.cat-hit-sub { color: var(--muted); font-size: .82rem; }
.cat-hit-story { font-size: .85rem; font-style: italic; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.cat-story-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: .85rem; }
.cat-story-serie { font-weight: 800; color: var(--accent-2); }
.cat-story-date, .cat-story-char { color: var(--muted); }
.cat-story-title { font-weight: 700; margin: 4px 0 2px; }
.cat-story-cre { color: var(--muted); font-size: .85rem; margin-bottom: 2px; }
.cat-story-syn { margin: 6px 0 2px; }
.cat-story-notes { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.cat-add-btn { display: inline-block; background: var(--accent); color: #fff;
    border: 2px solid var(--accent); border-radius: 10px; padding: 11px 18px;
    font-weight: 800; font-size: 1rem; cursor: pointer; margin-top: 2px; }
.cat-add-btn:hover { filter: brightness(1.08); }
.cat-add-btn:disabled { opacity: .6; cursor: default; }

/* selezione albi nella griglia */
/* Card albo: click = selezione, pulsante "Dettagli" per il dettaglio */
.cat-albo { position: relative; cursor: pointer; display: flex; flex-direction: column; }
.cat-albo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat-albo.selected { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.cat-albo .char-info { flex: 1; }
.cat-check { position: absolute; top: 6px; left: 6px; z-index: 2; width: 24px; height: 24px;
    border-radius: 50%; background: var(--accent); color: #fff; display: none;
    align-items: center; justify-content: center; font-weight: 800; font-size: .9rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.cat-albo.selected .cat-check { display: flex; }
.cat-det-btn { display: block; text-align: center; margin: 6px 8px 8px; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 8px; color: var(--muted);
    text-decoration: none; font-size: .82rem; }
.cat-det-btn:hover { border-color: var(--accent); color: var(--text); }
.cat-hint { color: var(--muted); font-size: .82rem; margin: 0 0 10px; }
/* Etichetta Variant nelle card del catalogo: base e variant hanno lo stesso numero */
.cat-variant { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
    background: var(--accent); color: #fff; font-size: .62rem; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.cat-variant-nome { color: var(--accent-2, var(--muted)); font-style: italic; }

/* Azioni del dettaglio albo: collezione e desideri affiancati */
.cat-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cat-actions form { margin: 0; }
.cat-wish-btn { background: transparent; color: var(--text); border: 2px solid var(--border);
    border-radius: 8px; padding: 8px 14px; font-weight: 700; font-size: .9rem; cursor: pointer; }
.cat-wish-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cat-wish-btn:disabled { cursor: default; color: var(--muted); border-color: var(--border); }
.cat-wish-gia { color: var(--read); font-size: .88rem; font-weight: 700; }
.cat-selbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 12px; }
/* Ricerca + azioni in una sola barra appiccicata in cima (catalogo albi) */
.cat-toolbar { display: flex; flex-direction: column; gap: 8px; }
.cat-toolbar .filters { margin: 0; }
.cat-toolbar .cat-selbar { margin: 0; }
.cat-selall { display: inline-flex; align-items: center; gap: 6px; color: var(--muted);
    font-size: .9rem; cursor: pointer; }
#cat-add-sel { background: var(--accent); color: #fff; border: 2px solid var(--accent);
    border-radius: 8px; padding: 8px 16px; font-weight: 800; cursor: pointer; }
#cat-add-sel:disabled { cursor: default; background: var(--panel-2);
    border-color: var(--border); color: var(--muted); }

/* ---- Home / landing ---- */
.home-hero { position: relative; text-align: center;
    background: linear-gradient(180deg, #20232c, var(--panel));
    border: 2px solid var(--border); border-radius: 16px;
    padding: 34px 22px 26px; margin-bottom: 20px;
    box-shadow: 5px 6px 0 rgba(0,0,0,.45); }
/* Lo sfondo decorativo si arrotonda da solo (niente overflow:hidden sulla hero,
   così il menu dei suggerimenti non viene ritagliato). */
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
    pointer-events: none; border-radius: 14px;
    background:
        radial-gradient(circle at 82% 8%, rgba(226,54,54,.28), transparent 42%),
        repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 16px); }
.home-hero > * { position: relative; z-index: 1; }
/* La ricerca (e il suo menu a tendina) sopra i pulsanti CTA */
.home-search { position: relative; z-index: 20; }
.hero-kicker { display: inline-block; background: var(--accent); color: #fff;
    font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: .72rem;
    padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; }
.hero-title { font-family: "Arial Black", Impact, sans-serif; font-weight: 900;
    font-size: clamp(1.7rem, 5vw, 2.7rem); line-height: 1.05; margin: 0 0 12px;
    text-transform: uppercase; letter-spacing: .5px; }
.hero-title .hl { color: var(--accent); }
.hero-desc { max-width: 640px; margin: 0 auto 20px; color: var(--muted); font-size: 1rem; }
.hero-desc strong { color: var(--accent-2); }

/* Due ricerche affiancate (episodio USA + volume libreria); si impilano su
   schermi stretti. Nessun pulsante: guida l'autocomplete. */
.home-searches { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; }
.home-search { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column;
    gap: 6px; text-align: left; }
.search-label { font-size: .82rem; font-weight: 700; color: var(--muted); }
.home-search .combo { width: 100%; flex: none; }
.home-search .search { width: 100%; background: var(--bg); border: 2px solid var(--border);
    border-radius: 10px; padding: 13px 14px; color: var(--text); font-size: 1rem; }
.home-search .search:focus { outline: none; border-color: var(--accent); }
.home-search .suggest-box { text-align: left; }

.home-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
/* Home privata: testo a sinistra + logo grande a destra (come la home pubblica). */
.phero { display: flex; align-items: center; gap: 34px; text-align: left; margin-bottom: 22px; }
.phero-copy { flex: 1; min-width: 0; }
.phero-copy .hero-desc { margin-left: 0; margin-right: 0; }
.phero-copy .home-cta { justify-content: flex-start; margin-bottom: 0; }
.cta-oppure { color: var(--muted); font-size: .95rem; font-weight: 600; }
.phero-logo { flex: none; }
.phero-logo img { width: 200px; max-width: 32vw; height: auto; display: block;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)); }
@media (max-width: 760px) {
    .phero { flex-direction: column-reverse; align-items: center; text-align: center; gap: 16px; }
    .phero-copy .hero-desc { margin-left: auto; margin-right: auto; }
    .phero-copy .home-cta { justify-content: center; }
    .phero-logo img { width: 140px; }
}
.cta { background: var(--panel-2); border: 2px solid var(--border); color: var(--text);
    padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: .9rem; }
.cta:hover { border-color: var(--accent); }
.cta-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cta-primary:hover { filter: brightness(1.1); }
/* Link testuale agli albi mancanti nella scheda episodio. */
.ep-missing { margin: 12px 0 0; }
.ep-missing a { color: var(--accent-2); font-weight: 700; font-size: .95rem; text-decoration: none; }
.ep-missing a:hover { text-decoration: underline; }

/* Empty-state: collezione ancora vuota (Libreria, Cronologia, Completamento). */
.empty-collection { text-align: center; max-width: 560px; margin: 48px auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 40px 28px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.empty-collection .ec-ic { font-size: 44px; line-height: 1; }
.empty-collection h2 { margin: 12px 0 8px; font-size: 24px; }
.empty-collection p { color: var(--muted); margin: 0 auto 22px; max-width: 42ch; }
.empty-collection .ec-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Percorsi "aggiungi/importa": nell'onboarding (home vuota) e in fondo alla home
   quando la collezione e' gia' popolata. */
/* Due colonne, sempre: con tre card la terza va a capo, e la fila da due con
   una sotto si legge meglio di tre strette in fila. */
.onb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 8px; }
@media (max-width: 640px) { .onb-cards { grid-template-columns: 1fr; } }
.onb-card { position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text);
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.onb-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(0,0,0,.42); }
.onb-card .onb-ic { font-size: 30px; line-height: 1; }
.onb-card h3 { margin: 8px 0 0; font-size: 19px; }
.onb-card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.onb-card .onb-go { margin-top: 8px; font-weight: 800; color: var(--accent-2); font-size: 14px; }
.onb-card.primary { border-color: var(--accent); }
/* Il bollino non e' piu' legato alla card in evidenza: card diverse portano
   bollini diversi (Consigliato, Novita'), quindi la posizione sta qui e il
   colore nelle varianti sotto. */
.onb-card .onb-badge { position: absolute; top: 13px; right: 14px; font-size: 11px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent);
    border-radius: 20px; padding: 3px 10px; }
/* La card consigliata si segna col verde del "posseduto", non col rosso: qui il
   rosso e' il colore del sito, non un giudizio, e su tre card in fila darebbe
   allarme invece che indicazione. Testo scuro perche' su verde e giallo il
   bianco non tiene il contrasto. */
.onb-card.consigliata { border-color: var(--read); }
.onb-badge.verde  { background: var(--read); color: #08301c; }
.onb-badge.giallo { background: var(--accent-2); color: #3a2e00; }
.onb-info { margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.onb-info a { color: var(--accent-2); font-weight: 700; }
.onb-steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.onb-step { flex: 1; min-width: 180px; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 14px; color: var(--muted); font-size: 13.5px; }
.onb-step b { color: var(--text); display: block; font-size: 14px; margin-bottom: 2px; }
.onb-step .n { color: var(--accent); font-weight: 900; margin-right: 6px; }
/* Sezione "aggiungi altro" in fondo alla home popolata. */
.add-more { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.add-more h2 { font-size: 18px; margin: 0; }
.add-more .onb-cards { margin-top: 14px; }

/* Statistiche collezione */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px; margin: 0 0 26px; }
.stat { background: var(--panel); border: 2px solid var(--border); border-radius: 12px;
    padding: 14px 10px; text-align: center; box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
.stat-num { display: block; font-family: "Arial Black", Impact, sans-serif; font-weight: 900;
    font-size: 1.7rem; color: var(--accent-2); line-height: 1; }
.stat-lbl { display: block; margin-top: 4px; font-size: .72rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: 1px; }

/* Home: quanti albi mancano al tetto per libreria. Stessa veste dei riquadri dei
   numeri; la barra e' verde, gialla dal 90% e rossa al tetto. Attaccato alla riga
   dei numeri con lo stesso passo della sua griglia (12px), non con i suoi 26. */
.limite-albi { background: var(--panel); border: 2px solid var(--border); border-radius: 12px;
    padding: 14px 16px; box-shadow: 3px 3px 0 rgba(0,0,0,.4); margin: 0 0 14px; }
.stats-row + .limite-albi, .stats-row + .stats-legenda { margin-top: -14px; }
.limite-testo { display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; }
.limite-testo strong { color: var(--accent-2); font-family: "Arial Black", Impact, sans-serif;
    font-variant-numeric: tabular-nums; }
.limite-pct { font-family: "Arial Black", Impact, sans-serif; font-weight: 900; font-size: 1.15rem;
    color: var(--read); font-variant-numeric: tabular-nums; white-space: nowrap; }
.limite-barra { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.limite-barra span { display: block; height: 100%; min-width: 3px; background: var(--read);
    border-radius: inherit; }
.limite-albi.vicino .limite-pct { color: var(--accent-2); }
.limite-albi.vicino .limite-barra span { background: var(--accent-2); }
.limite-albi.pieno { border-color: var(--accent); }
.limite-albi.pieno .limite-pct { color: var(--accent); }
.limite-albi.pieno .limite-barra span { background: var(--accent); }
.limite-nota { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }

/* "Cosa contano questi numeri": chiusa di partenza, perche' serve a chi se lo
   chiede e non deve spingere giu' il resto della home per tutti gli altri. */
.stats-legenda { margin: 0 0 26px; font-size: .9rem; }
.stats-legenda summary { cursor: pointer; color: var(--muted); width: max-content; }
.stats-legenda summary:hover, .stats-legenda[open] summary { color: var(--text); }
.stats-legenda dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px;
    margin: 10px 0 0; background: var(--panel); border: 2px solid var(--border);
    border-radius: 12px; padding: 12px 16px; }
.stats-legenda dt { font-weight: 700; color: var(--accent-2); }
.stats-legenda dd { margin: 0; line-height: 1.45; }
@media (max-width: 480px) {
    .stats-legenda dl { grid-template-columns: 1fr; gap: 2px; }
    .stats-legenda dd { margin-bottom: 8px; }
}

/* Card funzioni */
.features { margin-top: 6px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px; }
.feature-card { background: var(--panel); border: 2px solid var(--border); border-radius: 12px;
    padding: 16px; box-shadow: 4px 4px 0 rgba(0,0,0,.4); transition: border-color .12s, box-shadow .12s; }
.feature-card:hover { border-color: var(--accent); box-shadow: 5px 5px 0 var(--accent); }
.fc-icon { font-size: 1.7rem; }
.feature-card h3 { margin: 6px 0 5px; font-size: 1.02rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.feature-card p strong { color: var(--text); }

/* Pianificatore (ricerca risultati) */
.hero { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
    padding: 18px; margin-bottom: 18px; }
.lead { color: var(--text); margin: 6px 0 14px; }
.lead strong { color: var(--accent-2); }
.hint { color: var(--muted); }
.hint a, .lead a { color: var(--accent-2); }
.pick-list .episode-row { flex-wrap: wrap; }
.pick-btn { background: var(--accent); color: #fff; border: none; border-radius: 8px;
    padding: 9px 14px; font-weight: 700; cursor: pointer; white-space: nowrap; font-size: .88rem; }
.pick-btn:hover { filter: brightness(1.1); }
.pick-list .pick-btn { margin-left: auto; }

/* Combobox autocompletamento */
.combo { position: relative; flex: 1 1 240px; }
.combo .search { width: 100%; }
.combo-hint { color: var(--muted); font-size: .8rem; margin: 8px 2px 0; }
.suggest-box { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
    max-height: 60vh; overflow-y: auto; z-index: 50;
    box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.suggest-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-bottom: 1px solid var(--border); }
.suggest-item:last-child { border-bottom: none; }
.suggest-item.active, .suggest-item:hover { background: var(--panel-2); }
.s-thumb { flex: none; width: 34px; height: 50px; object-fit: cover; border-radius: 4px;
    background: var(--panel-2); }
.s-noimg { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .7rem; }
.s-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.s-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-sub { font-size: .76rem; color: var(--muted); }

/* Box "hai letto fino a" */
.start-box { background: var(--panel); border: 1px solid var(--accent); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 14px; }
.start-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--accent-2); font-weight: 700; }
.start-ep { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.start-thumb { width: 44px; height: 66px; object-fit: cover; border-radius: 6px; flex: none; }
.start-title { font-weight: 700; }
.start-src { font-size: .82rem; color: var(--muted); }
.start-src em { color: var(--text); font-style: normal; }

/* Parti dall'inizio (planner) */
.start-scratch { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.start-scratch .or { color: var(--muted); font-size: .85rem; }
.scratch-form { display: flex; gap: 8px; flex-wrap: wrap; }
.scratch-form select { background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: .9rem; }

/* Controlli pagina "prossimi" */
.controls { display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.active-filter { font-size: .82rem; color: var(--muted); background: var(--panel);
    border: 1px solid var(--border); border-radius: 12px; padding: 6px 12px;
    display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.active-filter strong { color: var(--accent-2); font-weight: 600; }
/* (lo stile del pulsante "azzera" e' unico, definito piu' in alto in .clear) */
.filter-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.filter-section:first-of-type { border-top: none; padding-top: 0; }
.fs-title { font-size: .95rem; margin: 0 0 8px; color: var(--accent-2); }
.section-sub { color: var(--muted); font-weight: 400; font-size: .85rem; }
.scratch-note { color: var(--muted); font-size: .78rem; }

/* Pannello filtro serie */
.filter-panel { background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; margin-bottom: 18px; overflow: hidden; }
.filter-panel > summary { cursor: pointer; padding: 11px 14px; font-weight: 600;
    list-style: none; user-select: none; }
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-panel > summary::before { content: "▸ "; color: var(--accent-2); }
.filter-panel[open] > summary::before { content: "▾ "; }
.filter-panel form { padding: 0 14px 14px; }
.mode-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.mode-row label { display: flex; align-items: center; gap: 6px; font-size: .88rem; cursor: pointer; }
.series-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.series-actions button { background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px;
    font-size: .8rem; cursor: pointer; }
.series-actions button:hover { border-color: var(--accent); }
.series-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 4px 12px; margin-bottom: 12px; max-height: 260px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.series-checks label { display: flex; align-items: center; gap: 8px; font-size: .85rem;
    cursor: pointer; padding: 3px 0; }
.series-checks label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count { color: var(--muted); font-style: normal; font-size: .78rem; }
.cat-count::before { content: "· "; }
.filter-apply { display: flex; align-items: center; gap: 12px; }

/* Selettore 10 / 20 / 30 */
.count-switch { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.count-switch span { color: var(--muted); font-size: .88rem; }
.count-switch a { background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
    padding: 7px 15px; border-radius: 20px; font-weight: 700; }
.count-switch a.active, .count-switch a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Volumi che ti servono */
.need-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 16px; margin-bottom: 18px; }
.need-box h2 { font-size: 1rem; margin: 0 0 8px; }
.need-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.need-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.need-list li:last-child { border-bottom: none; padding-bottom: 0; }
.need-list a { color: var(--accent-2); }
.need-count { color: var(--muted); font-size: .82rem; white-space: nowrap; }
/* Nome e sottotitolo incolonnati: il conteggio resta appeso a destra. min-width:0
   perche' un flex non si restringe sotto il contenuto e un titolo lungo
   spingerebbe fuori il conteggio. */
.need-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.need-sub { color: var(--muted); font-size: .82rem; line-height: 1.25; }

.section-title { font-size: 1.05rem; margin: 6px 0 10px; }
.episode-list.numbered { counter-reset: ep; }
.episode-list.numbered .episode-row { counter-increment: ep; position: relative; }
.episode-list.numbered .episode-row::before { content: counter(ep); flex: none;
    min-width: 26px; text-align: center; color: var(--accent-2); font-weight: 800; font-size: .9rem; }

.continue { text-align: center; margin: 16px 0; }
.end-note { text-align: center; color: var(--accent-2); font-weight: 700; margin: 18px 0; }

.footer { color: var(--muted); font-size: .75rem; text-align: center; padding: 24px 0; }
.errbox { background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px; overflow: auto; color: #ff9b9b; font-size: .8rem; }

/* Barra inline: le voci sono diventate 9 (Completamento e Cestino in piu') e
   con le icone sforavano il tetto della topbar (1120px, che non cresce con lo
   schermo), facendo scorrere la pagina di lato. In riga le icone spariscono e
   le voci si stringono; nel menu a scomparsa (sotto) restano. */
@media (min-width: 1041px) {
    .topbar nav { gap: 2px; }
    .topbar nav a { padding: 6px 8px; font-size: .82rem; }
    .topbar nav .nav-ico { display: none; }
}

/* Header stretto (fino a 1040px): con 7 voci munite di icona la barra inline non
   ci sta, quindi lascia il posto all'hamburger e il menu diventa un pannello che
   scorre da sinistra. */
@media (max-width: 1040px) {
    .nav-toggle { display: inline-flex; align-items: center; }
    /* Drawer fuori schermo a sinistra, entra con .open. Sta sopra tutto e ha il
       suo sfondo pieno, cosi' resta leggibile sopra la pagina. */
    .topbar nav { position: fixed; top: 0; left: 0; height: 100dvh;
        width: min(80vw, 290px); margin-left: 0; z-index: 60;
        flex-direction: column; align-items: stretch; gap: 4px;
        padding: 62px 12px 16px; background: #0d0f14;
        border-right: 3px solid var(--accent); box-shadow: 3px 0 22px rgba(0,0,0,.55);
        overflow-y: auto; transform: translateX(-100%);
        transition: transform .22s ease; }
    .topbar nav.open { transform: translateX(0); }
    /* voci piu' grandi e comode da toccare dentro il drawer */
    .topbar nav a { font-size: 1rem; padding: 12px 14px; }
    .nav-backdrop { position: fixed; inset: 0; z-index: 55;
        background: rgba(0, 0, 0, .55); }
}

@media (max-width: 520px) {
    .ep-title { white-space: normal; }
}


/* --- Pagina di login (accesso riservato) -------------------------------- */
/* Standalone: niente barra di navigazione ne' copertine, cosi' chi non e'
   autenticato non vede nulla della collezione. */
.login-body { min-height: 100vh; display: flex; align-items: center;
    justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 340px; text-align: center;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 16px; padding: 32px 26px;
    box-shadow: 6px 8px 0 rgba(0, 0, 0, .45); }
.login-logo { display: block; width: 130px; height: auto; margin: 0 auto; }
.login-wordmark { display: block; width: 220px; height: auto; margin: 12px auto 2px; }
.login-collection { color: var(--muted); font-weight: 700; letter-spacing: .28em;
    font-size: .72rem; margin: 10px 0 0; }
.login-sub { color: var(--text); font-size: 1rem; margin: 18px 0 20px; }
.login-error { background: rgba(226, 54, 54, .12); color: #ff8a8a;
    border: 1px solid var(--accent); border-radius: 8px;
    padding: 9px 12px; font-size: .86rem; margin: 0 0 16px; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form input { background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 11px 13px; font-size: .95rem; width: 100%; }
.login-form input:focus { outline: none; border-color: var(--accent); }
.login-form button { background: var(--accent); border: 1px solid var(--accent);
    color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer;
    border-radius: 8px; padding: 11px; margin-top: 4px;
    transition: background .15s; }
.login-form button:hover { background: #c92f2f; }

/* Link "Esci" nella barra: distinto dalle voci di navigazione */
.topbar nav a.nav-logout { color: #fff; }
.topbar nav a.nav-logout:hover { border-color: var(--accent); background: var(--accent); }

/* ======================================================================== */
/*  Completamento serie (trova-buchi)                                        */
/* ======================================================================== */
.series-tools {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    margin: 18px 0 20px; }
.series-filter {
    flex: 1 1 260px; min-width: 200px; padding: 10px 14px;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px; font-size: 15px; }
.series-filter:focus { outline: none; border-color: var(--accent); }
.series-onlygap {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--muted); font-size: 14px; cursor: pointer; white-space: nowrap; }
.series-onlygap input { accent-color: var(--accent); }
.series-refresh-all { margin: 0; }
.series-refresh-all button {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 10px 16px; font-size: 14px; font-weight: 600;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s; }
.series-refresh-all button:hover {
    background: var(--accent); border-color: var(--accent); color: #fff; }

/* Due card per riga: la pagina resta larga come il resto del sito. Nascondendo
   una serie il riflusso e' diagonale, ma il FLIP anima l'intero spostamento
   (x e y) cosi' le card scivolano lisce al loro nuovo posto. */
.series-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { .series-grid { grid-template-columns: 1fr; } }
/* Il contenitore ospita la card e il pulsante "non seguire", che compare al
   passaggio del mouse per non affollare l'elenco (su touch resta sempre visibile). */
.series-item { position: relative; }
.series-hide { position: absolute; top: 6px; right: 6px; z-index: 2; margin: 0;
    opacity: 0; transition: opacity .15s; }
.series-item:hover .series-hide, .series-hide:focus-within { opacity: 1; }
@media (hover: none) { .series-hide { opacity: .75; } }
.series-hide button {
    background: var(--panel-2); color: var(--muted);
    border: 1px solid var(--border); border-radius: 7px;
    width: 26px; height: 26px; line-height: 1; cursor: pointer; font-size: 13px; }
.series-hide button:hover { border-color: var(--accent); color: var(--accent); }

/* Serie messe da parte: elenco richiudibile in fondo alla pagina */
.serie-via { margin: 26px 0 10px; border-top: 1px solid var(--border); padding-top: 16px; }
.serie-via summary { cursor: pointer; font-weight: 700; }
.serie-via-nota { color: var(--muted); font-size: 13.5px; margin: 8px 0 12px; max-width: 640px; }
.serie-via-lista { list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px; }
.serie-via-lista li {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 9px; }
.serie-via-lista a { color: var(--text); text-decoration: none; font-weight: 600; }
.serie-via-lista a:hover { color: var(--accent); }
.serie-via-lista form { margin: 0 0 0 auto; }
.serie-via-dati { color: var(--muted); font-size: 13px; }
.serie-via-btn {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.serie-via-btn:hover { border-color: var(--read); color: var(--read); }

/* Copertina, anello di avanzamento e dati: lo stato si legge come un quadrante. */
.series-card {
    display: flex; gap: 12px; align-items: center;
    padding: 11px 13px; text-decoration: none; color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border); border-radius: 12px;
    transition: border-color .15s, transform .15s; }
.series-thumb {
    flex: none; width: 52px; aspect-ratio: 2 / 3; border-radius: 6px;
    overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); }
.series-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.series-ring { flex: none; width: 62px; height: 62px; }
.series-ring .ring-bg { fill: none; stroke: var(--panel-2); stroke-width: 7; }
.series-ring .ring-fg {
    fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%; }
.series-ring text { fill: var(--text); font-size: 15px; font-weight: 800; }
.series-card.complete .ring-fg { stroke: var(--read); }
.series-body { flex: 1 1 auto; min-width: 0; display: flex;
    flex-direction: column; gap: 4px; }
.series-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.series-card.complete { opacity: .72; }
.series-card.complete:hover { opacity: 1; }
.series-name { font-weight: 700; line-height: 1.3; font-size: 15px; }
.series-live {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    color: #0c0e12; background: var(--accent-2); white-space: nowrap;
    padding: 2px 7px; border-radius: 999px; font-weight: 700; }

.series-meta { color: var(--muted); font-size: 13px; }
.series-missing { font-weight: 700; color: var(--accent); }
.series-ok { color: var(--read); font-weight: 600; }

/* La barra resta al dettaglio della serie, dove c'e' una sola intestazione */
.series-bar {
    height: 9px; border-radius: 999px; overflow: hidden;
    background: var(--panel-2); }
.series-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.series-bar.big { height: 13px; margin: 14px 0; }
.series-empty { color: var(--muted); padding: 24px 0; text-align: center; }

/* Dettaglio serie */
.series-detail-head { margin: 4px 0 26px; max-width: 640px; }
.series-detail-meta { color: var(--muted); font-size: 15px; }
.series-detail-meta strong { color: var(--text); }
.series-sync { display: inline-block; margin-left: 4px; }
.series-refresh { margin-top: 14px; }
.series-refresh button {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px;
    padding: 8px 14px; font-size: 14px; cursor: pointer;
    transition: border-color .15s, background .15s; }
.series-refresh button:hover { border-color: var(--accent); background: var(--panel); }
.section-title.mt { margin-top: 26px; }
.series-done { color: var(--read); }

/* Griglia dei numeri mancanti (copertine live da comicsbox) */
.miss-grid {
    display: grid; gap: 14px; margin-top: 16px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.miss-card {
    text-decoration: none; color: var(--text); text-align: center;
    display: flex; flex-direction: column; gap: 4px; }
.miss-cover {
    position: relative; aspect-ratio: 2 / 3; border-radius: 8px;
    overflow: hidden; background: var(--panel-2);
    border: 1px solid var(--border);
    transition: border-color .15s, transform .15s; }
.miss-card:hover .miss-cover { border-color: var(--accent); transform: translateY(-2px); }
.miss-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miss-card.nocover .miss-cover::after {
    content: "?"; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; color: var(--muted); }
.miss-card.nocover .miss-cover img { visibility: hidden; }
.miss-num { font-weight: 700; font-size: 15px; }
.miss-date { color: var(--muted); font-size: 12px; }

/* ======================================================================== */
/*  Lista desideri                                                           */
/* ======================================================================== */
/* Barra di ricerca della lista desideri (filtro lato client). */
.wish-cerca-box { margin: 16px 0 2px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wish-cerca {
    flex: 1 1 300px; max-width: 480px; padding: 9px 13px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--panel); color: var(--text);
    font-size: 14px; }
.wish-cerca::placeholder { color: var(--muted); }
.wish-cerca-n { color: var(--muted); font-size: 13px; }
.wish-vuoto-cerca { color: var(--muted); margin: 14px 0; }
.wish-lista { list-style: none; padding: 0; margin: 18px 0;
    display: flex; flex-direction: column; gap: 12px; }
/* La card va a capo: copertina + testo in alto, azioni su una riga propria che
   scende sotto quando lo spazio manca (mobile). */
.wish-item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    padding: 12px 14px; background: var(--panel); border: 1px solid var(--border);
    border-left: 4px solid var(--border); border-radius: 12px; }
/* La priorita' si legge dal bordo: rosso urgente, giallo medio, spento basso */
.wish-item.prio-alta { border-left-color: var(--accent); }
.wish-item.prio-media { border-left-color: var(--accent-2); }
.wish-item.prio-bassa { border-left-color: var(--border); }
.wish-cover { flex: none; width: 72px; aspect-ratio: 2 / 3; border-radius: 6px;
    overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); }
.wish-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wish-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wish-nome { font-weight: 700; line-height: 1.3; }
.wish-sub { color: var(--muted); font-size: 12.5px; }
.wish-sub code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.wish-conto { font-size: 13.5px; margin-top: 2px; }
.wish-nuovi { color: var(--read); font-weight: 700; }
.wish-zero { color: var(--muted); }
.wish-gia { color: var(--muted); }
.wish-azioni { flex: 0 0 auto; margin-left: auto;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wish-azioni form { margin: 0; }

/* Mobile: copertina grande (per confrontarla in negozio) e azioni su tutta la
   larghezza, allineate sotto il testo. */
@media (max-width: 560px) {
    .wish-cover { width: 108px; }
    .wish-main { flex: 1 1 130px; }
    .wish-nome { font-size: 15px; }
    .wish-azioni { flex: 1 1 100%; margin-left: 0; margin-top: 4px;
        padding-top: 10px; border-top: 1px solid var(--border); }
    .wish-compra { flex: 1 1 auto; text-align: center; }
    .wish-prio, .wish-prio select { flex: 0 0 auto; }
}
.wish-prio select {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 9px; font-size: 13px; cursor: pointer; }
.wish-compra {
    background: var(--panel-2); color: var(--text); text-decoration: none;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 13px; font-size: 13px; white-space: nowrap;
    transition: border-color .15s, color .15s; }
.wish-compra:hover { border-color: var(--read); color: var(--read); }
.wish-togli {
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 11px; cursor: pointer; font-size: 14px; }
.wish-togli:hover { border-color: var(--accent); color: var(--accent); }

/* Edizioni italiane di un albo USA (dal Completamento) */
.ed-cb { color: var(--accent-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ed-cb:hover { text-decoration: underline; }
.ed-lista { list-style: none; padding: 0; margin: 18px 0;
    display: flex; flex-direction: column; gap: 10px; }
.ed-item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 13px;
    padding: 11px 13px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 12px; }
/* L'edizione gia' nei desideri: si arriva qui dal Completamento cliccando un
   albo che un volume desiderato copre, e la domanda e' "quale volume?". Il solo
   bordo cambiato non bastava a farla trovare in un elenco di otto: ci vuole il
   fondo, e la riga di sinistra che la fa individuare scorrendo. */
.ed-item.desiderato {
    border-color: var(--accent-2);
    background: linear-gradient(90deg, rgba(240,196,25,.13), rgba(240,196,25,.05));
    box-shadow: inset 4px 0 0 var(--accent-2); }
.ed-item.desiderato .ed-nome { color: var(--accent-2); }
.ed-cover { flex: none; width: 58px; aspect-ratio: 2 / 3; border-radius: 6px;
    overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); }
.ed-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ed-nome { font-weight: 700; line-height: 1.3; }
.ed-sub { color: var(--muted); font-size: 12.5px; }
.ed-sub code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.ed-azioni { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ed-azioni form { margin: 0; }
.ed-desidera {
    background: transparent; color: var(--accent-2); border: 1px solid var(--accent-2);
    border-radius: 9px; padding: 8px 15px; font-size: 14px; cursor: pointer;
    white-space: nowrap; transition: background .15s; }
.ed-desidera:hover { background: rgba(240, 196, 25, .14); }
.ed-gia { color: var(--accent-2); font-weight: 700; font-size: 13.5px; }
.ed-togli {
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 11px; cursor: pointer; font-size: 14px; }
.ed-togli:hover { border-color: var(--accent); color: var(--accent); }
/* Accordion "Albi contenuti": elenco degli albi USA nell'edizione (parse_albo,
   caricato a richiesta). Va a capo sotto la riga principale della card. */
.ed-contenuto { flex: 1 1 100%; margin-top: 2px; }
.ed-contenuto > summary {
    cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600;
    list-style: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 0; user-select: none; }
.ed-contenuto > summary::-webkit-details-marker { display: none; }
.ed-contenuto > summary::before { content: "\25B8"; font-size: 11px; transition: transform .15s; }
.ed-contenuto[open] > summary::before { transform: rotate(90deg); }
.ed-contenuto > summary:hover { color: var(--text); }
.ed-eps-load, .ed-eps-vuoto { color: var(--muted); font-size: 13px; margin: 6px 0 2px; }
.ed-eps-lista { list-style: none; padding: 0; margin: 8px 0 4px;
    display: flex; flex-direction: column; gap: 6px; }
.ed-ep { display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; background: var(--panel-2); border-radius: 8px;
    border: 1px solid transparent; }
.ed-ep.is-target { border-color: var(--accent-2); background: rgba(240, 196, 25, .10); }
.ed-ep-cov { flex: none; width: 30px; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: 4px; background: var(--panel); }
.ed-ep-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ed-ep-num { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.ed-ep-sub { color: var(--muted); font-size: 12px; }
.ed-ep-tag { flex: none; color: var(--accent-2); font-weight: 700; font-size: 11.5px;
    white-space: nowrap; }
/* Albi gia' posseduti: verde come i posseduti altrove (--read) */
.ed-ep.is-owned { border-color: var(--read); background: rgba(46, 204, 113, .10); }
.ed-ep-hai { color: var(--read); }
@media (max-width: 560px) {
    .ed-cover { width: 92px; }
    .ed-azioni { flex: 1 1 100%; margin-left: 0; margin-top: 4px;
        padding-top: 10px; border-top: 1px solid var(--border); }
    .ed-desidera { flex: 1 1 auto; text-align: center; }
}

/* Import libreria comicsbox */
.imp-form { display: flex; gap: 10px; margin: 16px 0 8px; flex-wrap: wrap; }
.imp-form input {
    flex: 1 1 320px; padding: 10px 13px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--panel); color: var(--text);
    font-size: 14px; }
.imp-form button {
    background: var(--accent-2); color: #0c0e12; border: none; border-radius: 10px;
    padding: 10px 20px; font-weight: 700; font-size: 14px; cursor: pointer; }
.imp-form button:hover:not(:disabled) { filter: brightness(1.06); }
/* Disabilitati durante un'operazione: chiaramente spenti (grigio, non cliccabili). */
.imp-form button:disabled {
    background: var(--panel-2); color: var(--muted); cursor: not-allowed; filter: none; }
.imp-form input:disabled { opacity: .55; cursor: not-allowed; }
/* Con una libreria caricata, al posto di "Carica" c'e' "Reset" (rosso = pulisci);
   l'input mostra il link corrente in sola lettura, spento. */
.imp-form input[readonly] { opacity: .65; }
.imp-reset-carica {
    display: inline-block; padding: 10px 20px; border-radius: 10px; font-weight: 700;
    font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.imp-reset-carica:hover { background: rgba(229, 57, 53, .12); }
.imp-lista { list-style: none; padding: 0; margin: 18px 0;
    display: flex; flex-direction: column; gap: 10px; }
.imp-item {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 13px;
    padding: 11px 13px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 12px; }
.imp-item.is-owned { border-color: var(--read); }
.imp-item.is-nonmarvel { opacity: .6; }   /* originale italiano senza albi USA */
/* Evidenziazione post-import: colore del bordo + tinta leggera per stato. */
.imp-item.is-added { border-color: var(--read); background: rgba(46, 204, 113, .10); }
.imp-item.is-rivedi { border-color: var(--accent-2); background: rgba(240, 196, 25, .08); }
.imp-item.is-failed { border-color: var(--accent); background: rgba(229, 57, 53, .08); }
.imp-item { scroll-margin-top: 16px; }    /* i link #v-CODE non finiscono sotto il bordo */
.imp-item:target { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* Pill di stato mostrata su ogni volume dopo l'import. */
.imp-stato { font-weight: 700; font-size: 11.5px; padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--border); white-space: nowrap; }
.imp-stato.is-added { color: var(--read); border-color: var(--read); }
.imp-stato.is-owned, .imp-stato.is-nonmarvel { color: var(--muted); }
.imp-stato.is-rivedi { color: var(--accent-2); border-color: var(--accent-2); }
.imp-stato.is-failed { color: var(--accent); border-color: var(--accent); }
/* Rimasto fuori per il tetto di albi: avvertimento, come "da rivedere". */
.imp-item.is-oltre { border-color: var(--accent-2); background: rgba(240, 196, 25, .08); }
.imp-stato.is-oltre { color: var(--accent-2); border-color: var(--accent-2); }
.imp-ries .avviso { color: var(--accent-2); }
.imp-fatto { color: var(--read); font-weight: 700; font-size: 13px; }
.imp-cover { flex: none; width: 58px; aspect-ratio: 2 / 3; border-radius: 6px;
    overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); }
.imp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imp-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.imp-nome { font-weight: 700; line-height: 1.3; }
.imp-sub { color: var(--muted); font-size: 12.5px; display: flex; gap: 8px;
    align-items: center; flex-wrap: wrap; }
.imp-sub code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.imp-badge { color: var(--read); font-weight: 700; font-size: 12px; }
.imp-coperto { color: var(--muted); font-size: 12px; font-style: italic; }
.imp-azioni { flex: 0 0 auto; margin-left: auto; }
.imp-analizza { margin-top: 4px; }
.imp-add { text-decoration: none; }
/* Durante "Aggiungi tutti" l'aggiunta del singolo albo e' spenta (vedi blocca()
   in importa.html): resta visibile, ma sbiadita e senza reazione al passaggio. */
.imp-in-corso .imp-add { opacity: .4; pointer-events: none; cursor: not-allowed; }
/* Avviso sul tetto di albi, prima di "Aggiungi tutti". */
.imp-limite { background: rgba(240, 196, 25, .08); border: 1px solid var(--accent-2);
    border-radius: 10px; padding: 10px 14px; margin: 10px 0 14px; line-height: 1.45; }
.imp-limite strong { color: var(--accent-2); }
/* Toolbar bulk + barra di progresso + riepilogo */
.imp-bulk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin: 8px 0 12px; }
.imp-bulk button {
    border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 14px;
    cursor: pointer; border: 1px solid var(--accent-2); background: transparent;
    color: var(--accent-2); }
.imp-bulk button:hover:not(:disabled) { background: rgba(240, 196, 25, .14); }
.imp-bulk button#imp-aggiungi-tutti { background: var(--accent-2); color: #0c0e12; border-color: var(--accent-2); }
/* Disabilitati durante un'operazione: grigio spento e cursore "non cliccabile",
   cosi' si vede che non sono attivi (anche l'Aggiungi, che e' pieno di giallo). */
.imp-bulk button:disabled,
.imp-bulk button#imp-aggiungi-tutti:disabled {
    background: var(--panel-2); color: var(--muted); border-color: var(--border);
    opacity: .7; cursor: not-allowed; }
.imp-bulk button.imp-stop { border-color: var(--accent); color: var(--accent); }
.imp-bulk button.imp-stop:hover:not(:disabled) { background: rgba(229, 57, 53, .12); }
.imp-bulk-nota { color: var(--muted); font-size: 12.5px; flex: 1 1 200px; }
.imp-prog { margin: 6px 0 14px; }
.imp-prog-bar { height: 10px; border-radius: 6px; background: var(--panel-2);
    border: 1px solid var(--border); overflow: hidden; }
.imp-prog-bar span { display: block; height: 100%; width: 0;
    background: var(--accent-2); transition: width .3s ease; }
.imp-prog-txt { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.imp-riepilogo { margin: 8px 0 18px; padding: 13px 15px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 12px; }
.imp-ries { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; margin: 4px 0 6px; }
.imp-ries .ok { color: var(--read); }
.imp-ries-sez { font-weight: 800; font-size: 12px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted); margin: 14px 0 2px;
    border-top: 1px solid var(--border); padding-top: 12px; }
.imp-ries-tit { font-weight: 700; margin: 10px 0 4px; font-size: 13.5px; }
.imp-ries-det em { color: var(--muted); font-style: italic; }
.imp-ries-nota { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.imp-ries-det { list-style: none; padding: 0; margin: 0; font-size: 13px;
    display: flex; flex-direction: column; gap: 3px; }
.imp-ries-det a { color: var(--accent-2); }
@media (max-width: 560px) {
    .imp-cover { width: 84px; }
    .imp-azioni { flex: 1 1 100%; margin-left: 0; }
    .imp-add { display: block; text-align: center; }
}

/* Pulsante desideri nella pagina Analizza */
.an-wish-btn {
    background: transparent; color: var(--accent-2); border: 1px solid var(--accent-2);
    border-radius: 9px; padding: 10px 16px; font-size: 14px; cursor: pointer;
    white-space: nowrap; transition: background .15s; }
.an-wish-btn:hover { background: rgba(240, 196, 25, .14); }
.an-wish-gia { color: var(--accent-2); font-weight: 700; font-size: 14px; }

/* Albi coperti da un volume desiderato: sempre spenti come gli altri che non
   hai (non li possiedi), ma con bordo e numero gialli a dire "gia' previsto". */
.miss-card.is-wish .miss-cover { border-color: var(--accent-2); }
.miss-card.is-wish .miss-num { color: var(--accent-2); }
.miss-wish {
    position: absolute; top: 5px; right: 5px; width: 21px; height: 21px;
    border-radius: 50%; background: var(--accent-2); color: #0c0e12;
    font-size: 12px; line-height: 21px; text-align: center; font-weight: 800; }
.series-gia-agg { color: var(--muted); font-size: 13px; white-space: nowrap; cursor: default; }
.det-wish { color: var(--accent-2); }
.series-wish { color: var(--accent-2); font-weight: 700; }
/* Serie che compare solo perche' coperta dalla lista desideri (0 posseduti) */
.series-solo-wish {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    color: #0c0e12; background: var(--accent-2); white-space: nowrap;
    padding: 2px 7px; border-radius: 999px; font-weight: 700; }
.series-card.solo-wish .ring-fg { stroke: var(--accent-2); }

/* Posseduti vs mancanti nella griglia degli albi */
.issues-head { display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; }
.issues-filter { display: flex; gap: 6px; }
.if-btn {
    background: var(--panel); color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 6px 14px; font-size: 13px; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s; }
.if-btn:hover { border-color: var(--accent); color: var(--text); }
.if-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.miss-card.is-owned .miss-cover { border-color: var(--read); }
.miss-card.is-owned:hover .miss-cover { border-color: var(--read); transform: translateY(-2px); }
.miss-tick {
    position: absolute; top: 5px; right: 5px; width: 21px; height: 21px;
    border-radius: 50%; background: var(--read); color: #0c0e12;
    font-size: 13px; font-weight: 800; line-height: 21px; text-align: center; }
/* Posseduto ma in nessuna edizione italiana: un "ce l'ho" piu' tenue. Verde come
   gli altri posseduti, perche' l'albo ce l'hai, ma tratteggiato e con la
   bandierina al posto della spunta: e' l'unico stato in cui il link non porta
   alla scheda dell'albo ma alle Edizioni, e la differenza si deve vedere. */
.miss-card.is-solo-orig .miss-cover { border-style: dashed; border-color: var(--read); }
.miss-card.is-solo-orig .miss-cover img { opacity: .75; }
.miss-card.is-solo-orig:hover .miss-cover img { opacity: 1; }
.miss-orig {
    position: absolute; top: 5px; right: 5px; min-width: 21px; height: 21px;
    padding: 0 3px; border-radius: 999px; background: var(--panel);
    border: 1px solid var(--read); font-size: 11px; line-height: 19px;
    text-align: center; }

/* I mancanti restano in secondo piano finche' non ci passi sopra */
.miss-card.is-missing .miss-cover img,
.miss-card.is-wish .miss-cover img { opacity: .45; filter: grayscale(.55); }
.miss-card.is-missing:hover .miss-cover img,
.miss-card.is-wish:hover .miss-cover img { opacity: 1; filter: none; }
.miss-card.is-missing .miss-num { color: var(--accent); }

/* ======================================================================== */
/*  Aggiungi alla collezione                                                 */
/* ======================================================================== */
.an-add-bar {
    margin-top: 22px; padding: 16px; border: 1px dashed var(--border);
    border-radius: 12px; background: var(--panel);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.an-add-btn {
    background: var(--accent); color: #fff; text-decoration: none;
    padding: 10px 18px; border-radius: 9px; font-weight: 700; white-space: nowrap;
    transition: background .15s; }
.an-add-btn:hover { background: #c92f2f; }
.an-add-hint { color: var(--muted); font-size: 14px; }

/* Il titolo della pagina Aggiungi stava incollato alla scheda dell'albo (6px):
   qui prende respiro sotto. */
.add-page-title { padding-bottom: 16px; }

.add-head { display: flex; gap: 16px; align-items: flex-start; margin: 6px 0 20px; }
.add-head-cover { flex: none; width: 74px; }
.add-head-cover img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.add-intest { font-size: 20px; margin: 0 0 4px; }
.add-sub { color: var(--muted); font-size: 14px; }
.add-sub code { background: var(--panel-2); padding: 1px 6px; border-radius: 5px; }

.add-owned-warn {
    background: rgba(240, 196, 25, .12); border: 1px solid var(--accent-2);
    border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; line-height: 1.5; }
.add-owned-warn a { color: var(--accent-2); font-weight: 600; }
.add-owned-variant { margin: 10px 0 0; padding-top: 9px;
    border-top: 1px solid rgba(240, 196, 25, .35); font-size: 14px; }

/* Riquadro "questo codice e' una variant" sul form Aggiungi */
.add-variant-box {
    max-width: 640px; margin: 0 0 20px; padding: 14px 16px; line-height: 1.5;
    background: rgba(240, 196, 25, .10);
    border: 1px solid var(--accent-2); border-radius: 10px; }
.add-variant-head { font-weight: 700; color: var(--accent-2); margin-bottom: 6px; }
.add-variant-box p { margin: 0 0 10px; }
.add-variant-box code { background: var(--panel-2); padding: 1px 6px; border-radius: 5px; }
.add-variant-alt { color: var(--muted); font-size: 13.5px; margin: 10px 0 0; }
/* Stacca nettamente il modulo di inserimento dai riquadri informativi sopra:
   sono due azioni diverse (aggiungere una copertina vs creare un volume). */
.add-section-title {
    font-size: 17px; margin: 26px 0 4px; padding-top: 18px;
    border-top: 1px solid var(--border); max-width: 640px; }
.add-section-sub { color: var(--muted); font-size: 13.5px; max-width: 640px;
    margin: 0 0 18px; line-height: 1.5; }
.add-variant-flag {
    display: flex; gap: 9px; align-items: flex-start; max-width: 640px;
    margin: 0 0 18px; padding: 11px 14px; font-size: 14px; line-height: 1.45;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.add-variant-flag input { accent-color: var(--accent); margin-top: 2px; }

/* Avviso di sostituzione: il posto (nome + numero) e' gia' occupato */
.add-clash {
    max-width: 640px; margin: 0 0 20px; padding: 14px 16px;
    background: rgba(226, 54, 54, .10);
    border: 1px solid var(--accent); border-radius: 10px; }
.add-clash-head { font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.add-clash-body { margin: 0 0 10px; line-height: 1.5; }
.add-clash-ok { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.add-clash-ok input { accent-color: var(--accent); width: 17px; height: 17px; }
.add-clash-hint { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

.add-form { max-width: 640px; }
.add-field { display: block; margin-bottom: 16px; }
/* Spunta "applica a tutta la collana" nella modifica volume */
.add-check { display: flex; align-items: flex-start; gap: 9px; margin: -6px 0 6px;
    cursor: pointer; font-size: .92rem; }
.add-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); }
.add-hint { color: var(--muted); font-size: .82rem; margin: 0 0 16px 27px; }
.add-label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.add-form input[type="text"], .add-select {
    width: 100%; padding: 10px 13px; font-size: 15px;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; }
.add-form input[type="text"]:focus, .add-select:focus {
    outline: none; border-color: var(--accent); }
.add-select { cursor: pointer; }
.add-flag { font-style: normal; font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
.add-flag.new { background: var(--accent); color: #fff; }
.add-flag.ok, .add-flag.owned { background: var(--panel-2); color: var(--muted); }

.add-cands { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 16px; }
.add-cands-lbl { color: var(--muted); font-size: 13px; }
.add-cand {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 5px 12px; font-size: 13px; cursor: pointer; transition: border-color .15s; }
.add-cand:hover { border-color: var(--accent); }
.add-cand-nums { color: var(--muted); }

.add-row { display: flex; gap: 14px; flex-wrap: wrap; }
.add-field.small { width: 130px; }
.add-field.grow { flex: 1 1 240px; }

.add-adv { margin: 4px 0 18px; }
.add-adv summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.add-adv[open] summary { margin-bottom: 12px; }

.add-actions { display: flex; gap: 14px; align-items: center; }
.add-submit {
    background: var(--accent); color: #fff; text-decoration: none; border: none;
    padding: 11px 22px; border-radius: 9px; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: background .15s; }
.add-submit:hover { background: #c92f2f; }
.add-cancel { color: var(--muted); text-decoration: none; }
.add-cancel:hover { color: var(--text); }

.add-ok { max-width: 520px; margin: 30px auto; text-align: center; }
.add-ok-badge {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
    background: var(--read); color: #0c0e12; font-size: 34px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; }
/* Quando NON e' entrato niente in collezione il segno verde e' una bugia:
   stessa forma, colore d'avviso. Il riepilogo sotto dice gia' il perche'. */
.add-ok-badge.nulla { background: var(--accent-2); }
/* Avvertimento su una sola riga dell'esito (albi rimasti fuori per il tetto). */
.add-ok-stats .add-ok-avviso { color: var(--text); }
.add-ok-segno { display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-right: 7px; border-radius: 50%; vertical-align: 1px;
    background: var(--accent-2); color: #0c0e12; font-size: 12px; font-weight: 800; }
.add-ok-name { font-size: 18px; font-weight: 700; margin: 4px 0 16px; }
.add-ok-stats { list-style: none; padding: 0; margin: 0 0 24px;
    display: inline-flex; flex-direction: column; gap: 6px; color: var(--muted); }
.add-ok-actions { display: flex; gap: 14px; justify-content: center; align-items: center; }
.add-ok-replaced {
    max-width: 460px; margin: 0 auto 20px; padding: 10px 14px; font-size: 14px;
    background: rgba(240, 196, 25, .12); border: 1px solid var(--accent-2);
    border-radius: 9px; line-height: 1.5; }

/* Collegamento al Completamento della serie (scheda episodio e scheda albo USA) */
.badge-serie { text-decoration: none; transition: border-color .15s, background .15s; }
.badge-serie:hover { border-color: var(--accent); background: rgba(226, 54, 54, .12); }
.badge-go { color: var(--accent); font-weight: 800; }
.serie-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    padding: 8px 14px; border: 1px solid var(--border); border-radius: 9px;
    color: var(--text); text-decoration: none; font-size: 14px;
    transition: border-color .15s, background .15s; }
.serie-link:hover { border-color: var(--accent); background: var(--panel); }

/* Pagina "inserimento in corso": barra di avanzamento del lavoro in background */
.lav-box { max-width: 560px; margin: 30px auto; text-align: center; }
.lav-testo { color: var(--text); font-size: 15px; margin: 0 0 16px; min-height: 22px; }
.lav-barra {
    height: 14px; border-radius: 999px; overflow: hidden;
    background: var(--panel-2); border: 1px solid var(--border); }
.lav-barra > span {
    display: block; height: 100%; border-radius: 999px; width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .5s ease; }
.lav-barra.ko > span { background: var(--accent); }
.lav-riga { display: flex; justify-content: space-between; margin-top: 8px;
    font-size: 14px; color: var(--muted); }
.lav-pct { font-weight: 800; color: var(--text); }
.lav-nota { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-top: 22px; }
.lav-errore {
    margin-top: 18px; padding: 12px 15px; text-align: left; line-height: 1.5;
    background: rgba(226, 54, 54, .10);
    border: 1px solid var(--accent); border-radius: 10px; }
.lav-azioni { margin-top: 22px; }
.btn-secondario {
    padding: 9px 20px; font-size: 14px; font-weight: 600;
    background: var(--panel-2); color: var(--muted);
    border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
    transition: border-color .15s, color .15s; }
.btn-secondario:hover { border-color: var(--accent); color: var(--accent); }
.btn-secondario:disabled { opacity: .5; cursor: default; border-color: var(--border); color: var(--muted); }

.an-manual-link { color: var(--muted); font-size: 14px; margin: -6px 0 18px; }
.an-manual-link a { color: var(--accent); font-weight: 600; text-decoration: none; }
.an-manual-link a:hover { text-decoration: underline; }

/* Inserimento a mano: ricerca episodi nel catalogo e lista di quelli scelti */
.ins-search { position: relative; max-width: 640px; margin-bottom: 12px; }
.ins-search input {
    width: 100%; padding: 10px 13px; font-size: 15px;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; }
.ins-search input:focus { outline: none; border-color: var(--accent); }
.ins-list { list-style: none; padding: 0; margin: 0 0 10px; max-width: 640px;
    display: flex; flex-direction: column; gap: 8px; counter-reset: ins; }
.ins-item {
    display: flex; align-items: center; gap: 11px; padding: 8px 12px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.ins-item img { width: 34px; border-radius: 4px; flex: none; }
.ins-txt { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ins-sub { color: var(--muted); font-size: 13px; }
.ins-del { flex: none; background: transparent; color: var(--muted); cursor: pointer;
    border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; }
.ins-del:hover { border-color: var(--accent); color: var(--accent); }
.ins-vuoto { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.ins-n { color: var(--accent-2); font-size: 12px; }
.ins-errore { color: var(--accent); font-size: 13.5px; margin: 6px 0 0; }
/* Righe degli episodi digitati a mano: separate, cosi' si distinguono a colpo d'occhio */
.manual-riga { border-left: 2px solid var(--border); padding-left: 12px; margin-bottom: 10px; }
.manual-riga .add-row:last-child { align-items: flex-end; }
.manual-del { align-self: flex-end; margin-bottom: 16px; }
.manual-cover { margin-bottom: 4px; }
.manual-cover input { color: var(--muted); font-size: 13px; }
/* I suggerimenti sono bottoni: vanno riportati all'aspetto delle righe elenco */
.suggest-box button.suggest-item {
    width: 100%; text-align: left; background: transparent; color: var(--text);
    border: none; border-bottom: 1px solid var(--border); cursor: pointer;
    font: inherit; }
.suggest-box button.suggest-item:last-child { border-bottom: none; }

/* Modifica volume (solo admin): accanto al PDF nella testata della scheda */
.vol-edit {
    display: inline-block; margin-left: 8px; text-decoration: none;
    background: transparent; color: var(--muted);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 13px; font-size: 14px;
    transition: border-color .15s, color .15s; }
.vol-edit:hover { border-color: var(--accent); color: var(--accent); }
.mod-nota { color: var(--muted); font-size: 13.5px; line-height: 1.5;
    max-width: 640px; margin: 4px 0 18px; }

/* Pannello "aggiungi copertine variant" (scheda volume, solo admin) */
.cover-add { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.cover-add-title { font-size: 17px; margin: 0 0 6px; }
.cover-add-hint { color: var(--muted); font-size: 14px; margin: 0 0 14px; max-width: 640px; }
.cover-way {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 11px; padding: 14px 16px; margin-bottom: 12px; }
.cover-way-title { margin: 0 0 4px; font-size: 15px; color: var(--accent-2); }
.cover-way-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; max-width: 620px; }
.cover-way-sub code { background: var(--panel-2); padding: 1px 6px; border-radius: 5px; }
.cover-find, .cover-manual { display: flex; gap: 10px; flex-wrap: wrap;
    align-items: flex-end; margin: 12px 0; }
.cover-find input[type="text"] {
    flex: 1 1 280px; padding: 9px 12px; background: var(--panel);
    color: var(--text); border: 1px solid var(--border); border-radius: 9px; }
.cover-find button, .cover-add-btn {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 16px; font-size: 14px; cursor: pointer;
    transition: border-color .15s; }
/* Il pulsante che conferma le copertine scelte sta sotto la griglia: piu'
   generoso e staccato, cosi' non sembra incollato alle miniature. Sotto ha
   spazio suo, e la sezione chiude con un margine: l'ultimo pulsante non resta
   appiccicato al fondo della pagina. */
.cover-add-btn { padding: 12px 26px; margin-top: 14px; margin-bottom: 18px; }
.cover-add { padding-bottom: 28px; }
.cover-find button:hover, .cover-add-btn:hover { border-color: var(--accent); }
.cover-manual-row { display: flex; gap: 16px; flex-wrap: wrap; flex: 1 1 auto; }
.cover-manual-row label { display: flex; flex-direction: column; gap: 5px;
    color: var(--muted); font-size: 13px; }
.cover-manual-row input[type="url"] {
    padding: 9px 12px; background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; min-width: 260px; }
.cover-pick { cursor: pointer; }
.cover-pick img { border: 1px solid var(--border); border-radius: 6px; }
.cover-pick.is-owned img { opacity: .5; }
.cover-owned { color: var(--muted); font-size: 12px; }
.cover-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.cover-check input { accent-color: var(--accent); }
.cover-esito { padding: 9px 13px; border-radius: 9px; font-size: 14px;
    background: rgba(46, 204, 113, .12); border: 1px solid var(--read); }
.cover-esito.ko { background: rgba(226, 54, 54, .12); border-color: var(--accent); }

/* Gestione edizioni (copertine) sulla scheda volume + pagina Cestino */
.cover-hint { color: var(--muted); font-size: 14px; margin: -6px 0 14px; max-width: 620px; }
.cover-item form { margin: 6px 0 0; }
.cover-hide-btn, .cover-restore-btn {
    width: 100%; background: transparent; color: var(--muted);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 10px; font-size: 13px; cursor: pointer;
    transition: border-color .15s, color .15s; }
.cover-hide-btn:hover { border-color: var(--accent); color: var(--accent); }
.cover-restore-btn:hover { border-color: var(--read); color: var(--read); }
.cover-item.hidden-ed img { opacity: .42; filter: grayscale(.6); }
.cover-item.hidden-ed figcaption em { color: var(--accent); font-style: normal; }

.trash-list { list-style: none; padding: 0; margin: 20px 0; display: flex;
    flex-direction: column; gap: 10px; }
.trash-item {
    display: flex; align-items: center; gap: 14px; padding: 10px 14px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.trash-cover { flex: none; width: 46px; }
.trash-cover img { width: 100%; border-radius: 5px; display: block; }
.trash-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trash-name { font-weight: 700; }
.trash-title { color: var(--text); font-size: 14px; }
.trash-sub { color: var(--muted); font-size: 13px; }
.trash-actions { flex: none; display: flex; gap: 8px; align-items: center; }
.trash-actions form { margin: 0; }
.trash-restore {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 14px; font-size: 14px; cursor: pointer; white-space: nowrap;
    transition: border-color .15s; }
.trash-restore:hover { border-color: var(--read); color: var(--read); }
/* Eliminare non si annulla: il pulsante sta in disparte, spento, e si accende
   di rosso solo quando ci passi sopra. Un gesto irreversibile non va reso
   comodo quanto uno reversibile. */
.trash-delete {
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 14px;
    cursor: pointer; }
.trash-delete:hover { border-color: var(--accent); color: var(--accent); }
.trash-full { color: var(--accent); font-style: normal; }
.trash-name a { color: inherit; text-decoration: none; }
.trash-name a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Riconoscimento di una copertina dalla foto (/riconosci)
   Il pulsante e' volutamente grande: su questa pagina si arriva col telefono in
   mano, e l'azione e' una sola.
   --------------------------------------------------------------------------- */
.ric-form { margin: 4px 0 14px; }
.ric-scatta {
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    padding: 16px 18px; border-radius: 14px; border: 2px solid var(--accent);
    background: var(--panel); color: var(--text);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
    transition: filter .12s, transform .06s, box-shadow .06s;
}
.ric-scatta:hover { filter: brightness(1.1); }
.ric-scatta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
/* Fuori dalla vista ma ancora raggiungibile da tastiera: `display:none` o
   `hidden` toglierebbero il campo dall'ordine di tabulazione. */
.ric-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ric-file:focus-visible + .ric-scatta { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.ric-scatta-off { opacity: .5; pointer-events: none; }
.ric-scatta-ic { font-size: 1.9rem; line-height: 1; }
.ric-scatta-txt { display: flex; flex-direction: column; gap: 2px; }
.ric-scatta-txt strong { font-size: 1.05rem; }
.ric-scatta-txt small { color: var(--muted); font-size: .85rem; }

.ric-attesa { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.ric-aiuto { margin: 0 0 18px; }
.ric-aiuto > summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.ric-aiuto ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.ric-aiuto li { margin-bottom: 6px; }
.ric-aiuto strong { color: var(--text); }

.ric-esito { margin: 18px 0 6px; padding: 14px 16px; border-radius: 12px;
             background: var(--panel); border-left: 4px solid var(--border); }
.ric-esito.ric-ok { border-left-color: var(--read); }
.ric-esito-vuoto { border-left-color: var(--accent-2); }
.ric-esito h2 { margin: 0 0 4px; font-size: 1.1rem; }
.ric-esito p { margin: 0; color: var(--muted); font-size: .92rem; }
.ric-esito-sub .ric-tec { display: block; margin-top: 4px; }
.ric-tec { color: var(--muted); font-size: .8rem; opacity: .8; }
.ric-nota { max-width: 46rem; color: var(--muted); font-size: .9rem; margin: 10px 0 14px; }

.ric-esiti { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
             gap: 14px; margin-top: 14px; }
.ric-uno { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.ric-uno-cover { position: relative; display: block; }
.ric-uno img { width: 100%; display: block; border-radius: 8px; border: 1px solid var(--border); }
.ric-uno:hover img { border-color: var(--accent); }
.ric-primo img { border: 2px solid var(--read); }
.ric-badge { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 999px;
             background: var(--read); color: #10321c; font-size: .72rem; font-weight: 700; }
.ric-nome { font-size: .86rem; line-height: 1.3; }

/* Secondo blocco: le edizioni in lingua originale. Chiuso per scelta, perche'
   risponde a una domanda diversa da quella che si fa la maggior parte delle
   volte. Chi cerca un albo italiano non deve inciamparci. */
.ric-estero { margin: 22px 0 0; padding: 12px 14px; border-radius: 12px;
              background: var(--panel); border: 1px dashed var(--border); }
.ric-estero > summary { cursor: pointer; font-weight: 700; }
.ric-estero > summary .ric-tec { display: block; font-weight: 400; margin-top: 2px; }
.ric-estero[open] > summary { margin-bottom: 12px; }

/* Attesa del riconoscimento: la barra non misura niente (non c'e' niente da
   misurare, il conto avviene tutto in una volta sul server) ma dice che il
   lavoro sta procedendo, che e' l'unica cosa da comunicare. */
.ric-attesa { display: flex; align-items: center; gap: 10px; }
.ric-barra { display: block; width: 120px; height: 6px; border-radius: 999px;
             background: var(--panel-2); overflow: hidden; flex: none; }
.ric-barra i { display: block; width: 40%; height: 100%; border-radius: 999px;
               background: var(--accent); animation: ric-scorre 1.1s ease-in-out infinite; }
@keyframes ric-scorre {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
    .ric-barra i { animation: none; width: 100%; opacity: .55; }
}

/* ---- Guide pubbliche ----------------------------------------------------
   Le uniche pagine del sito pensate per essere LETTE da capo a fondo, e le
   uniche che vede chi non ha un account: la misura della riga e' quella di un
   testo, non di un'interfaccia. */
.guida { max-width: 720px; margin: 0 auto 40px; }
.guida h2 { margin: 30px 0 10px; font-size: 1.25rem; }
.guida p { line-height: 1.65; margin: 0 0 14px; }
.guida-risposta { font-size: 1.08rem; background: var(--panel);
    border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
    padding: 14px 18px; margin-bottom: 24px; }
.guida-nota { color: var(--muted); font-size: .9rem; }

.guida-lista { list-style: none; padding: 0; margin: 18px 0 0;
    display: flex; flex-direction: column; gap: 12px; counter-reset: albo; }
.guida-albo { background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px; }
.guida-albo-testa { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.guida-albo-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: #0c0e12; font-weight: 800; font-size: .85rem;
    display: flex; align-items: center; justify-content: center; }
.guida-albo-nome { font-weight: 800; }
.guida-albo-data { color: var(--muted); font-size: .82rem; margin-left: auto;
    font-variant-numeric: tabular-nums; }
.guida-albo-titolo { font-style: italic; color: var(--accent-2);
    margin: 6px 0 4px; padding-left: 36px; }
.guida-albo-trama { margin: 0; padding-left: 36px; font-size: .95rem; }

.guida-strumento { margin-top: 34px; padding: 18px 20px; background: var(--panel);
    border: 2px solid var(--accent-2); border-radius: 12px; text-align: center; }
.guida-strumento p { margin-bottom: 14px; }

@media (max-width: 560px) {
    .guida-albo-titolo, .guida-albo-trama { padding-left: 0; }
    .guida-albo-data { margin-left: 0; width: 100%; }
}
.guida-raccolte { list-style: none; padding: 0; margin: 0 0 16px;
    display: flex; flex-direction: column; gap: 8px; }
.guida-raccolte li { background: var(--panel); border: 2px solid var(--accent);
    border-radius: 10px; padding: 10px 14px; }
/* Coperture parziali: quanto di una storia sta dentro ogni edizione italiana.
   Il numero e' la prima cosa che si legge, perche' e' il dato che decide. */
/* L'invito finale apre con una DOMANDA, non con una spiegazione: chi e' arrivato
   in fondo alla guida ha gia' capito cosa fa il sito, e quello che gli manca e'
   il motivo per provarlo. */
.guida-strumento-domanda { font-size: 1.12rem; font-weight: 700;
    margin: 0 0 8px; text-wrap: balance; }

.guida-coperture { list-style: none; padding: 0; margin: 0 0 16px;
    display: flex; flex-direction: column; gap: 8px; }
.guida-copertura { display: flex; align-items: center; gap: 12px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 14px; }
.guida-copertura-n { flex: 0 0 auto; font-size: .8rem; color: var(--muted);
    font-variant-numeric: tabular-nums; min-width: 5.6em; }
.guida-copertura-n strong { color: var(--accent); font-size: 1rem; }
.guida-copertura-cover { flex: 0 0 auto; width: 30px; height: auto;
    border-radius: 2px; display: block; }
.guida-copertura-nome { flex: 1 1 auto; }
.guida-copertura-sotto { display: block; font-size: .82rem; color: var(--muted);
    margin-top: 1px; }
@media (max-width: 560px) {
    .guida-copertura-n { min-width: 5em; }
    .guida-copertura-cover { display: none; }
}

.guida-albo-ita { margin: 8px 0 0; padding-left: 36px; font-size: .85rem;
    color: var(--muted); }
.guida-chip { display: inline-block; margin: 3px 4px 0 0; padding: 2px 9px;
    font-size: .82rem;
    background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 999px; color: var(--text); }
@media (max-width: 560px) { .guida-albo-ita { padding-left: 0; } }

/* Barra per chi NON e' registrato (guide pubbliche). Sono gli STESSI stili e lo
   stesso markup della home, copiati da li' e non reinventati: chi arriva da
   Google su una guida e poi apre la home non deve accorgersi di un cambio di
   vestito. La home non carica questo foglio (ha il suo <style> dentro), quindi
   duplicare non crea conflitti; se un giorno cambia la home, vanno allineati.
   Le regole per schermi stretti sono le sue: sotto i 560px "Accedi" smette di
   essere un pulsante e diventa un collegamento, e sono i 26 pixel che fanno
   stare il nome del sito accanto al logo sui telefoni comuni. */
.nav-ospite { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.nav-ospite .btn { display: inline-block; font: inherit; font-weight: 700; cursor: pointer;
    border: 1px solid var(--border); text-decoration: none;
    background: var(--panel-2); color: var(--text); padding: 10px 18px; border-radius: 9px; }
.nav-ospite .btn:hover { border-color: var(--muted); }
.nav-ospite .btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.nav-ospite .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav-ospite .btn-primary:hover { background: #f04444; border-color: #f04444; }
.nav-ospite .btn-ghost { background: transparent; border-color: transparent; }
.nav-ospite .btn-ghost:hover { border-color: var(--border); }
@media (max-width: 560px) {
    .nav-ospite { gap: 10px; }
    .nav-ospite .btn { padding: 8px 12px; font-size: 14px; }
    .nav-ospite .btn-ghost { padding: 8px 2px; border-color: transparent; background: transparent; }
}
@media (max-width: 390px) {
    .nav-ospite .btn { padding: 8px 10px; font-size: 13.5px; }
    .nav-ospite .btn-ghost { padding: 8px 2px; }
}

/* Elenco lungo di un crossover: sessanta albi, quindi righe e non schede. La
   serie principale e' marcata perche' e' la spina della storia: i tie-in si
   possono saltare, quella no. */
.guida-lista-lunga { list-style: none; padding: 0; margin: 18px 0 0;
    display: flex; flex-direction: column; gap: 6px; }
.guida-riga { display: flex; gap: 12px; padding: 10px 12px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 9px; }
.guida-riga-spina { border-color: var(--accent); background: rgba(226,54,54,.07); }
.guida-riga-data { flex: 0 0 62px; color: var(--muted); font-size: .8rem;
    font-variant-numeric: tabular-nums; padding-top: 2px; }
.guida-riga-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guida-riga-nome { font-weight: 700; font-size: .95rem; }
.guida-riga-titolo { color: var(--accent-2); font-style: italic; font-size: .88rem; }
.guida-riga-trama { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.guida-riga-ita { margin-top: 2px; }
.guida-chip-altro { color: var(--muted); }
@media (max-width: 560px) {
    .guida-riga { flex-direction: column; gap: 4px; }
    .guida-riga-data { flex: none; }
}
.guida-legenda-spina { padding: 1px 7px; border-radius: 5px;
    border: 1px solid var(--accent); background: rgba(226,54,54,.07); }
/* Le chip avevano margine solo a destra: fra una riga e l'altra si toccavano,
   e senza spazio fra loro si leggevano come un unico nome lunghissimo. */
.guida-chip { margin: 3px 6px 3px 0; }
/* Copertina dentro l'etichetta: minuscola, serve a riconoscere il volume a
   colpo d'occhio, non a guardarlo. */
.guida-chip { display: inline-flex; align-items: center; gap: 6px; }
.guida-chip-cover { width: 14px; height: 21px; object-fit: cover; border-radius: 2px;
    flex: none; display: block; }


/* ---------------------------------------------------------------------------
   I due grafici della home privata. Barre in CSS, niente librerie: per due
   istogrammi una libreria peserebbe piu' di tutto il resto della pagina.
   --------------------------------------------------------------------------- */
.grafici { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
    margin: 26px 0 34px; }
@media (max-width: 820px) { .grafici { grid-template-columns: 1fr; } }
.grafico { background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px 14px; }
.grafico h3, .linea h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800;
    letter-spacing: -.2px; }
.grafico-nota { margin: 0 0 16px; font-size: .85rem; color: var(--muted); }

/* Decenni: colonne che partono dal basso, con il conteggio sopra. */
.decenni { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.dec { flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; height: 100%; min-width: 0; }
.dec-n { font-size: .68rem; color: var(--muted); margin-bottom: 3px;
    font-variant-numeric: tabular-nums; }
.dec-bar { display: block; width: 100%; border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--accent), #7d1f1f); }
.dec-lbl { font-size: .72rem; color: var(--muted); margin-top: 5px;
    font-variant-numeric: tabular-nums; }

/* A un passo: una riga per serie, con la barra del completamento. */
.vicine { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: 9px; }
.vicine a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
    text-decoration: none; color: var(--text); }
.vicine a:hover .vic-nome { color: var(--accent-2); }
.vic-nome { font-weight: 600; font-size: .92rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.vic-manca { font-size: .78rem; font-weight: 700; color: var(--accent);
    white-space: nowrap; }
.vic-barra { grid-column: 1 / 2; height: 6px; border-radius: 999px;
    background: var(--panel-2); overflow: hidden; }
.vic-barra span { display: block; height: 100%; background: var(--accent-2); }
.vic-conto { grid-column: 2 / 3; font-size: .74rem; color: var(--muted);
    white-space: nowrap; font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------------------------
   Dove sei arrivato: un asse del tempo raggruppato per mese.

   Ogni mese e' un gruppo di copertine con sotto un tratto largo quanto il
   gruppo e la data scritta UNA volta. Cosi' la larghezza dice il ritmo: sette
   copertine sotto febbraio e una sotto aprile si leggono a colpo d'occhio,
   mentre con le copertine equidistanti e la data ripetuta sotto ognuna il
   tempo non si vedeva affatto.

   Le copertine sono tutte della stessa misura: la loro larghezza serve gia' a
   misurare il mese, e cambiarla direbbe una seconda cosa che non c'e'. A
   distinguere il punto corrente sono la nitidezza, il contorno e il pallino
   sul tratto.
   --------------------------------------------------------------------------- */
.linea { background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px 14px; margin: 0 0 34px; }
/* Scorre ma la barra non si vede: e' un elemento decorativo dentro una
   scheda, e una barra di scorrimento grigia sotto le copertine sporca il
   riquadro. Lo scorrimento resta (dito, rotella con shift), e comunque al
   caricamento il punto corrente si porta al centro da solo, quindi non c'e'
   niente di importante che resti nascosto. */
.linea-pista { display: flex; align-items: flex-end; justify-content: center;
    gap: 22px; overflow-x: auto; padding-top: 6px;
    scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain; }
.linea-pista::-webkit-scrollbar { display: none; }
.mese { flex: 0 0 auto; }
/* Il fondo lascia 4px al pallino del punto corrente, che scende sotto la
   tacca. Senza, sporgeva dal riquadro e .linea-pista (che scorre in
   orizzontale, quindi ha overflow anche in verticale) tirava su una barra di
   scorrimento verticale dentro la scheda. */
.mese-albi { display: flex; align-items: flex-end; gap: 10px; padding-bottom: 4px; }
.tappa { display: flex; flex-direction: column; align-items: center; }
.tappa-cover { display: block; width: 58px; height: 88px; object-fit: cover;
    border-radius: 3px; background: var(--panel); }
/* Spazio fra copertina e tratto. Vuoto per tutti tranne il punto corrente,
   che ci fa scendere la sua tacca fino a toccare l'asse. */
.tappa-tacca { width: 1px; height: 5px; }

/* Il tratto del mese: linea sopra e due piedini agli estremi, cioe' una
   parentesi che dice "questi albi stanno qui dentro". */
.mese-tratto { height: 6px; border: 1px solid var(--border); border-bottom: 0;
    border-radius: 2px 2px 0 0; }
/* Niente altezza fissa: adesso ogni gruppo ha la sua etichetta, quindi si
   allineano da soli. Con height 1.15rem e interlinea 1.4rem la riga di testo
   sporgeva di 4px, e .linea-pista (che scorre in orizzontale, quindi ha
   overflow anche in verticale) tirava su una barra di scorrimento verticale. */
.mese-data { line-height: 1.4rem; text-align: center;
    font-size: .72rem; color: var(--muted); white-space: nowrap; }

/* Contorno fatto con due ombre invece che con outline+offset: l'outline entra
   nell'area scorrevole del contenitore, il box-shadow no. Stesso disegno,
   niente barra di scorrimento. */
.tappa.adesso .tappa-cover { box-shadow: 0 0 0 2px var(--panel),
    0 0 0 4px var(--accent), 0 6px 18px rgba(0,0,0,.55); }
.tappa.adesso .tappa-tacca { position: relative; background: var(--accent); }
.tappa.adesso .tappa-tacca::after { content: ""; position: absolute; left: 50%;
    bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px;
    border-radius: 50%; background: var(--accent); }
.mese-qui .mese-tratto { border-color: var(--accent); }
.mese-qui .mese-data { color: var(--accent-2); font-weight: 700; }

/* Chi e' l'albo su cui sei fermo. Sta qui e non sotto le copertine: nove nomi
   larghi 62 pixel sarebbero un muro di testo troncato, e quello che si vuole
   sapere e' uno solo. */
.linea-qui { margin: 14px 0 0; text-align: center; font-size: .85rem;
    color: var(--muted); }
.linea-qui strong { color: var(--accent-2); }

/* Su schermi stretti non si nasconde niente: l'asse scorre. */
@media (max-width: 560px) {
    .linea-pista { justify-content: flex-start; gap: 14px; }
    .mese-albi { gap: 7px; }
    .tappa-cover { width: 46px; height: 70px; }
    .mese-data { font-size: .62rem; }
}

/* ---------------------------------------------------------------------------
   Domande frequenti. Larghezza limitata come un testo da leggere, non come una
   pagina di dati: la riga corta e' quello che rende scorribile un elenco di
   domande. Le risposte sono in grigio e le domande in bianco, cosi' scorrendo
   l'occhio incontra solo le domande e si ferma dove serve.
   --------------------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto 44px; }
/* Titolo di gruppo trattato come un'etichetta, non come un titolo: piccolo,
   maiuscolo e in accento. Con lo stile normale pesava MENO della domanda che
   raggruppa, e la gerarchia risultava rovesciata. Cosi' invece si vede che e'
   di un altro ordine, e le domande restano la cosa piu' evidente della
   pagina. */
.faq .section-title { margin: 38px 0 4px; font-size: .78rem; font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-2); }
.faq .section-title:first-child { margin-top: 8px; }
.faq-q { padding: 18px 0; border-bottom: 1px solid var(--border); }
.faq-q:last-child { border-bottom: 0; }
.faq-q h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800;
    letter-spacing: -.2px; color: var(--text); }
.faq-q p { margin: 0 0 10px; color: var(--muted); line-height: 1.65; }
.faq-q p:last-child { margin-bottom: 0; }
/* Nelle risposte il grassetto e' il nome di un pulsante o di una voce di menu:
   deve staccare dal grigio del testo, o non si distingue da un'enfasi. */
.faq-q strong { color: var(--text); }
.faq-q a { color: var(--accent-2); font-weight: 700; }

/* Visibile solo finche' non c'e' nessuna risposta: manda ai contatti invece di
   lasciare la pagina muta. */
.faq-vuota { margin: 24px 0; padding: 18px 20px; border-radius: 14px;
    background: var(--panel); border: 1px solid var(--border);
    color: var(--muted); line-height: 1.65; }
.faq-vuota a { color: var(--accent-2); font-weight: 700; }

/* Esito di un inserimento: quando la collocazione automatica non ha potuto
   decidere, la riga che invita a sceglierla a mano e i collegamenti al modulo. */
.add-ok-mano { color: var(--muted); margin: 14px 0 8px; }
.add-ok-mano-lista { list-style: none; padding: 0; margin: 0 0 14px; display: flex;
    flex-wrap: wrap; gap: 8px; justify-content: center; }
.add-ok-mano-lista a { background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 12px; }
.add-ok-mano-lista a:hover { border-color: var(--accent); }