.app-loading-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: var(--bg);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 16px;
    transition: opacity 0.3s ease;
}
.app-loading-overlay.fade-out {
    opacity: 0; pointer-events: none;
}
.app-loading-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.app-loading-label {
    font-size: 14px; color: var(--text-sub);
}

.top-loader {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: 9999; pointer-events: none;
    background: transparent;
    opacity: 0; transition: opacity 0.2s;
}
.top-loader.active {
    opacity: 1;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: topLoaderSlide 1.2s ease-in-out infinite;
}
@keyframes topLoaderSlide {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

:root {
    --bg: #202124;
    --surface: #303134;
    --surface-hover: #3c4043;
    --primary: #8ab4f8;
    --on-primary: #202124;
    --text-main: #e8eaed;
    --text-sub: #9aa0a6;
    --border: #5f6368;
    --success: #81c995;
    /* Colori di stato — sovrascritti a runtime da applyStatusColors() (app.js)
       con un fallback quando coincidono col colore tema scelto dall'utente
       (es. tema rosso vs badge "Abbandonato"), così le etichette restano
       sempre distinguibili dal colore del tema attivo. */
    --danger: #ff453a;
    --warning: #ff9f0a;
    --accent2: #bf5af2;
    --toast-bg: #e8eaed;
    --toast-text: #202124;
    --header-h: 56px;
    --tabs-h: 60px; /* altezza approssimativa di .tabs-container (padding+bottoni+margin-bottom) */
    --container-px: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Indicatore di focus da tastiera: mancava ovunque tranne sugli input
   testo, affidandosi al default (spesso invisibile su sfondo scuro).
   Regola di fallback globale, non tocca alcun layout (outline non occupa
   spazio) e copre bottoni/chip/link senza dover toccare ogni classe. */
button:focus-visible, .icon-btn:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Sistema icone SVG inline */
.ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic svg { display: block; }
/* Taglie */
.ic svg { width: 18px; height: 18px; }
.ic.ic-sm svg { width: 15px; height: 15px; }
.ic.ic-xs svg { width: 12px; height: 12px; }
/* Icona stellina (fill) allineata al testo */
.modal-meta svg, .ep-rating svg, .ep-sticky-header svg { width: 12px; height: 12px; vertical-align: middle; color: #f4b942; }
/* Empty state icons grandi */
.empty-icon svg, .home-empty-icon svg { width: 40px; height: 40px; opacity: 0.4; }
/* Next-air icon */
.mna-icon svg { width: 16px; height: 16px; vertical-align: middle; }
/* Quick check button icon */
.mqc-icon svg { width: 14px; height: 14px; }
/* Watch all button */
.watch-all-btn .ic svg { width: 14px; height: 14px; }
/* Status chip icons */
.status-chip .ic svg { width: 14px; height: 14px; }
body { 
    font-family: 'Roboto', sans-serif; background: var(--bg); color: var(--text-main); 
    font-size: 16px; overflow-x: hidden; 
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.modal-open { overflow: hidden; height: 100%; }

/* HEADER STICKY CON BLUR */
header {
    background: rgba(32, 33, 36, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.header-content {
    max-width: 1000px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;
}

h1 { font-size: 20px; font-weight: 500; color: var(--text-main); display: flex; align-items: center; gap: 10px; }

/* TABS FLUTTUANTI */
.tabs-container {
    position: sticky; top: var(--header-h); z-index: 90;
    background: var(--bg);
    padding: 8px 0;
    margin-bottom: 10px;
}

.tabs {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 20px;
    scrollbar-width: none; max-width: 1000px; margin: 0 auto;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
    padding: 8px 20px; background: transparent; border: 1px solid var(--border);
    color: var(--text-sub); border-radius: 100px; font-size: 14px; font-weight: 500;
    white-space: nowrap; transition: 0.2s; cursor: pointer;
}
.tab-btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.container { max-width: 1000px; margin: 0 auto; padding: 0 var(--container-px) calc(env(safe-area-inset-bottom) + 40px); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fade 0.3s; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    *:not(.spinner) { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

.h3-like {
    margin-bottom: 16px;
    font-weight: 400;
}

/* SEARCH BAR GOOGLE STYLE */
/* Resta agganciata sotto header+tab mentre si scorrono i risultati, così si
   può digitare/cancellare senza dover risalire in cima. */
.search-wrapper {
    position: sticky; top: calc(var(--header-h) + var(--tabs-h)); z-index: 80;
    background: var(--bg);
    padding-top: 6px; padding-bottom: 6px; margin-bottom: 14px;
}
.search-box {
    width: 100%; background: var(--surface); border: none; padding: 14px 50px 14px 20px;
    border-radius: 28px; color: var(--text-main); font-size: 16px; outline: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: 0.2s;
}
.search-box:focus { background: var(--surface-hover); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.search-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--text-sub); pointer-events: none; }

/* HOME ROWS — scroll orizzontale stile Netflix */
/* Esce dal padding del .container così le righe vanno edge-to-edge */
#homeRows,
#searchDiscover {
    display: flex; flex-direction: column; gap: 32px;
    margin: 0 calc(-1 * var(--container-px));
    padding-top: 4px;
}

.home-row-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    padding: 0 var(--container-px);
}
.home-row-title {
    font-size: 16px; font-weight: 600; color: var(--text-main);
}
.home-row-count {
    font-size: 12px; color: var(--text-sub);
    background: var(--surface); border-radius: 99px;
    padding: 1px 8px;
}

/* Scroll edge-to-edge: esce dal padding del container */
.home-row-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    /* padding laterale: prima card a 20px dal bordo */
    padding: 4px 0 12px var(--container-px);
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--container-px);
    -webkit-overflow-scrolling: touch;
}
.home-row-scroll::-webkit-scrollbar { display: none; }

/* Spacer finale: garantisce padding-right dopo l'ultima card (alcuni browser ignorano padding-right su overflow) */
.home-row-scroll::after {
    content: '';
    flex-shrink: 0;
    width: var(--container-px);
}

.home-row-scroll .show-card {
    flex: 0 0 115px;
    scroll-snap-align: start;
    min-width: 0;
}
@media (min-width: 480px) {
    .home-row-scroll .show-card { flex: 0 0 140px; }
}
@media (min-width: 768px) {
    .home-row-scroll .show-card { flex: 0 0 160px; }
}

/* Il titolo è nell'overlay sul poster, nessun testo esterno nelle home row */

.home-empty {
    text-align: center; padding: 60px 20px; color: var(--text-sub);
}
.home-empty-icon { font-size: 48px; margin-bottom: 12px; }
.home-empty p { font-size: 15px; }

/* Freccetta "vedi tutti" nell'header di una riga scorrevole */
.home-row-arrow {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: none; background: var(--surface); color: var(--text-sub);
    cursor: pointer; transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.home-row-arrow:hover { background: var(--surface-hover); color: var(--primary); }
.home-row-arrow svg { width: 16px; height: 16px; }

/* Schermata "vedi tutti" — griglia completa di una riga scorrevole, con
   paginazione infinita per le fonti popolate via API (popolari, trending,
   in uscita, consigliati). */
.browse-view-content { padding: 0; }
.browse-view-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px var(--container-px) 12px;
    position: sticky; top: 0; background: var(--bg); z-index: 20;
    border-bottom: 1px solid var(--border);
    /* più alto dello z-index delle etichette/pulsanti sulle card (es. quick-check-btn
       a 11), altrimenti su mobile, scorrendo la griglia, quelle etichette restano
       visibili sopra il titolo sticky invece di scorrere sotto di esso. */
}
.browse-back-btn {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    border: none; background: var(--surface); color: var(--text-main);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.15s;
}
.browse-back-btn svg { width: 18px; height: 18px; }
.browse-back-btn:hover { background: var(--surface-hover); }
.browse-back-btn:active { transform: scale(0.94); }
.browse-view-title { font-size: 17px; font-weight: 700; color: var(--text-main); }
.browse-view-grid { padding: 4px var(--container-px) 24px; }
.browse-view-spinner { margin: 16px auto 24px; }

/* GRID RESPONSIVE OTTIMIZZATA (libreria, ricerca) — larghezza colonna
   allineata a quella delle card della home (.home-row-scroll .show-card),
   così le copertine hanno sempre la stessa dimensione in ogni tab/macrotab. */
.shows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 12px;
}
@media (min-width: 480px) {
    .shows-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
}
@media (min-width: 768px) {
    .shows-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
}

.show-card { cursor: pointer; transition: transform 0.2s; width: 100%; }
.show-card:active { transform: scale(0.96); }

.card-img-wrap {
    position: relative; border-radius: 12px; overflow: hidden;
    aspect-ratio: 2/3; background: var(--surface);
    border: 3px solid transparent;
}
/* Cornice esterna sulla copertina, dello stesso colore dell'etichetta di stato,
   per riconoscere a colpo d'occhio completati/abbandonati/in pausa nelle griglie. */
.card-border-completed { border-color: var(--success); }
.card-border-dropped   { border-color: var(--danger); }
.card-border-onhold    { border-color: var(--warning); }
.show-image { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; display: block; }

/* Overlay titolo sul poster */
.card-title-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 48px 8px 8px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.75) 40%,
        rgba(0,0,0,0.2) 70%,
        transparent 100%
    );
    pointer-events: none;
}
.card-overlay-title {
    font-size: 11px; font-weight: 700; color: #fff;
    line-height: 1.3; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.card-overlay-meta {
    font-size: 10px; color: rgba(255,255,255,0.65); margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* PROGRESS BAR SULLE CARD */
.progress-bar {
    position: absolute; bottom: 0; left: 0; height: 4px; background: rgba(0,0,0,0.5); width: 100%;
}
.progress-fill { height: 100%; background: var(--primary); width: 0%; transition: width 0.3s; }
.progress-fill.dropped { background: var(--danger); }
.progress-fill.onhold { background: var(--warning); }

/* Pulsante spunta rapida "prossimo episodio" sulle card di Continua a
   guardare — pill più grande e con più contrasto (era 10px/4-8px di padding,
   poco visibile sulla copertina), icona in un badge tondo per distinguerla
   subito dal testo "S01E02" invece di stare semplicemente in fila con esso. */
.quick-check-btn {
    position: absolute; top: 32px; left: 6px; right: auto; z-index: 11;
    background: rgba(0, 0, 0, 0.82); color: #fff; border: 1px solid rgba(255,255,255,0.14);
    border-radius: 100px;
    padding: 4px 10px 4px 4px; font-size: 11.5px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.quick-check-btn-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary); color: var(--on-primary);
}
.quick-check-btn-icon svg { width: 12px; height: 12px; }
.quick-check-btn:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.5); }
.quick-check-btn:active { transform: scale(0.94); }
.quick-check-btn.armed { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.quick-check-btn.armed .quick-check-btn-icon { background: rgba(255,255,255,0.25); color: var(--on-primary); }

/* .show-title e .show-meta ora nel overlay sul poster (card-title-overlay) */

/* BADGE SULLE COPERTINE — impilate in un'unica pila in alto a sinistra
   (etichetta di stato sopra, etichetta data sotto) invece che agli angoli
   opposti, per leggerle come una coppia (es. "Watchlist" / "Domani"). */
.card-badge-stack {
    position: absolute; top: 6px; left: 6px; z-index: 10;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.show-badge {
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.badge-library { background: var(--primary); color: var(--on-primary); }
.badge-completed { background: var(--success); color: var(--on-primary); }
.badge-dropped { background: var(--danger); color: #fff; }
.badge-onhold { background: var(--warning); color: #202124; }
/* Etichetta Film/Serie TV nel tab "Da iniziare": carattere leggermente più
   grande delle altre etichette di stato, per notarla subito. */
.badge-type { background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 700; }

/* Etichette di stato pubblicazione manga (AniList), seconda voce nello
   stack in alto a sinistra sotto quella di lettura — colori distinti per
   non confondersi coi badge di stato lettura (In pausa/Completato/...). */
.badge-pub-finished { background: var(--success); color: var(--on-primary); }
.badge-pub-releasing { background: var(--primary); color: var(--on-primary); }
.badge-pub-hiatus { background: var(--warning); color: #202124; }
.badge-pub-cancelled { background: var(--danger); color: #fff; }
.badge-pub-notyet { background: var(--accent2); color: #fff; }


/* MODALE A SCHERMO INTERO SU MOBILE */
.modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 200; backdrop-filter: blur(5px);
    align-items: center; justify-content: center;
}
.modal.active { display: flex; }

.modal-content {
    animation: fade 0.25s;
    background: var(--bg); width: 100%; max-width: 800px; height: 100%;
    overflow-y: auto; position: relative; display: flex; flex-direction: column;
}
@media (min-width: 768px) {
    .modal-content { height: 85vh; border-radius: 24px; width: 90%; }

    /* Hero più bassa, ma poster ("miniatura") più grande: prima si
       rimpiccioliva a 72px, sotto il valore mobile (90px, breakpoint
       480px) — su schermi larghi va vista bene, non rimpicciolita. */
    .hero-image { height: 260px; }
    .modal-poster { width: 140px; }
    .modal-hero-overlay { padding: 18px 22px; gap: 18px; }
    /* Su schermi larghi la card del modal arriva a 800px: 24/14px risultava
       piccolo e poco leggibile rispetto allo spazio disponibile ("si fa
       fatica a leggere" su desktop), quindi qui si ingrandisce oltre i
       valori mobile invece di restringerli. */
    .modal-title { font-size: 32px; margin-bottom: 6px; }
    .modal-meta { font-size: 16px; }

    /* Body compatto */
    .modal-body { padding: 10px 18px 14px; }
    .settings-modal-body { padding-top: 70px; }
    .modal-top-actions { margin-bottom: 12px; }
    /* Restavano più piccoli che su mobile (48->36, 56->40): su schermi
       grandi devono risaltare di più, non di meno. */
    .action-fab { height: 52px; font-size: 16px; padding: 0 26px; border-radius: 26px; }
    .modal-quick-check-btn { height: 60px; max-width: 260px; }
    .mqc-code { font-size: 15px; }
    .mqc-name { font-size: 12.5px; max-width: 140px; }
    .movie-watched-btn { height: 52px; font-size: 16px; }

    /* Tab bar */
    .modal-tabs { margin: 0 -18px 10px; padding: 0 18px; }
    .modal-tab { padding: 8px 16px; font-size: 14px; }

    /* Sezione info — questo blocco rimpiccioliva testo/elementi rispetto al
       mobile invece di ingrandirli (es. cast-avatar 64px->54px, genre-pill
       padding ridotto, status-chip icona 20px->17px): su schermi grandi va
       ingrandito, non compattato, altrimenti si fatica a leggere. */
    .modal-genres { margin-bottom: 10px; gap: 8px; }
    .genre-pill { font-size: 14px; padding: 6px 14px; }
    .status-controls { margin: 4px 0 14px; gap: 12px; }
    .status-chip { padding: 16px 14px; font-size: 15px; gap: 6px; }
    .status-chip .ic svg { width: 22px; height: 22px; }
    .modal-desc { font-size: 16px; line-height: 1.6; }
    .modal-desc-wrap { margin-bottom: 16px; }
    .modal-watch-providers { margin-bottom: 16px; }
    .modal-wp-title { font-size: 13px; margin-bottom: 8px; }
    /* Loghi servizi streaming: restavano fermi a 40px anche su schermi
       grandi, nessun ingrandimento a differenza del resto della sezione Info. */
    .modal-wp-item { font-size: 13px; max-width: 84px; gap: 6px; }
    .modal-wp-item img { width: 72px; height: 72px; border-radius: 14px; }
    .modal-wp-item span { max-width: 84px; }
    .modal-progress-block { margin-bottom: 12px; padding: 12px 14px; }
    .modal-next-air { margin-bottom: 12px; padding: 10px 14px; font-size: 13px; }

    /* Sezioni Cast e Simili */
    .modal-section-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
    .modal-cast-wrap { margin-bottom: 20px; }
    .modal-similar-wrap { margin-bottom: 20px; }
    /* "Ti potrebbe piacere": restava fermo a 120px (breakpoint 480px) anche
       su schermi grandi, mai ingrandito oltre — stesse taglie di .shows-grid
       usate altrove per coerenza. */
    .modal-similar-scroll .show-card { flex: 0 0 180px; }
    .cast-item { flex: 0 0 100px; }
    .cast-avatar { width: 92px; height: 92px; }
    .cast-name { font-size: 14px; }
    .cast-character { font-size: 13px; }

    /* Sezione episodi su desktop: ancora troppo piccola nonostante il giro
       precedente di ingrandimento — valori spinti molto oltre, non più
       incrementali, per essere inequivocabile a qualunque larghezza. */
    .episodes-toolbar { margin: 14px 0 12px; }
    .watch-all-btn { padding: 12px 28px; font-size: 16px; }
    .season-tabs { margin: 14px 0 18px; gap: 12px; justify-content: flex-start; }
    .season-chip { padding: 11px 22px; font-size: 16px; border-radius: 12px; }
    .season-list { max-width: 100%; margin: 0; }
    .season-progress { margin-bottom: 20px; }
    .season-progress-top { font-size: 16px; margin-bottom: 10px; }
    .season-progress-track { height: 8px; }
    .episode-row { padding: 20px 0; gap: 26px; }
    .episode-row.resume { padding: 20px 16px; }
    .ep-thumb-wrap { width: 340px; height: 191px; border-radius: 14px; }
    .ep-check-icon { width: 54px; height: 54px; }
    .episode-info { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
    .episode-name { font-size: 26px; font-weight: 700; white-space: normal; line-height: 1.3; }
    .episode-num { font-size: 18px; margin-bottom: 0; gap: 8px; }
    .episode-abs { font-size: 19px; }
    .episode-meta-row { margin-top: 10px; gap: 20px; }
    .ep-airdate { font-size: 18px; }
    .ep-rating { font-size: 18px; }
    .ep-rating svg, .ep-sticky-header svg { width: 17px; height: 17px; }
    .resume-tag { font-size: 14px; padding: 3px 11px; }
    .upcoming-tag { font-size: 11px; padding: 2px 8px; }
    .ep-sticky-header { padding: 10px 18px; margin: 0 -18px 10px; font-size: 15px; }
}

.close-btn {
    position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.3); color: white;
    border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 10;
}

/* Freccia "torna indietro" del modal titolo: stessa posizione (in alto, a
   sinistra) del pulsante indietro della schermata "vedi tutti", ma con vetro
   smerigliato + ombra proprie, per restare leggibile sia sopra l'hero image
   sia sopra contenuto testuale/card quando si scorre.
   Il wrapper è sticky con altezza 0: resta ancorato in cima allo scroll del
   modal (senza occupare spazio in flusso), così il pulsante non scompare
   scorrendo la scheda e non serve più risalire per chiuderla. Quando si supera
   l'hero (classe .pinned, aggiunta via JS) il wrapper acquisisce una barra
   piena e opaca a tutta larghezza: il contenuto scorre *sotto* di essa invece
   di restarci dietro/sovrapposto, eliminando l'effetto di sovrapposizione. */
.modal-back-wrap {
    position: sticky; top: 0; height: 0; z-index: 15;
    left: 0; right: 0;
}
.modal-back-wrap::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 60px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
}
.modal-back-wrap.pinned::before { opacity: 1; }
.modal-back-btn {
    top: 12px; right: auto; left: 15px;
    background: rgba(20, 20, 22, 0.55);
    color: #fff;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
.modal-back-btn svg { width: 18px; height: 18px; }
.modal-back-btn:hover { background: rgba(20, 20, 22, 0.75); }
.modal-back-btn:active { transform: scale(0.92); }
/* Sopra la barra piena il pulsante torna a tinta unita del tema, più leggibile
   e coerente col resto della UI del modal. */
.modal-back-wrap.pinned .modal-back-btn {
    background: var(--surface); color: var(--text-main);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.modal-back-wrap.pinned .modal-back-btn:hover { background: var(--surface-hover); }

/* Titolo centrato nella barra piena, stesso fade della barra: la riempie
   invece di lasciarla vuota, come una vera nav bar collassata. */
.modal-back-title {
    position: absolute; top: 0; left: 56px; right: 56px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
}
.modal-back-wrap.pinned .modal-back-title { opacity: 1; }

/* HERO wrap con gradient overlay */
.modal-hero-wrap {
    position: relative;
    flex-shrink: 0;
    background: var(--surface);
}
/* Passaggio da un titolo all'altro nello stesso modal (es. click su una card
   "Ti potrebbe piacere"): un overlay pieno con spinner copre del tutto il
   contenuto precedente finché non sono pronti SIA i dati principali SIA
   cast/simili/trailer/watch-providers (non solo l'hero) — niente più
   contenuto vecchio che si vede sovrascritto a pezzi, un solo cambio pulito
   quando è tutto pronto. Aggiunta in openItem/openManga, rimossa in
   renderModalHeader/renderMangaModalHeader dopo che tutto è caricato. */
.modal-switch-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.modal-content.is-switching .modal-switch-overlay {
    opacity: 1; pointer-events: auto;
}
.hero-image {
    width: 100%; height: clamp(220px, 45vw, 360px);
    object-fit: cover; object-position: center top;
    display: block;
}
.modal-hero-wrap::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        rgba(32,33,36,0) 0%,
        rgba(32,33,36,0.35) 40%,
        rgba(32,33,36,0.75) 68%,
        rgba(32,33,36,0.98) 100%);
    pointer-events: none;
}
.modal-hero-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 16px 20px;
    display: flex; align-items: flex-end; gap: 14px;
    z-index: 1;
}
.modal-poster {
    width: 72px;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
    flex-shrink: 0;
    background: var(--surface);
}
@media (min-width: 480px) {
    .modal-poster { width: 90px; }
}
.modal-hero-info { flex: 1; min-width: 0; }

.modal-title {
    font-size: clamp(22px, 5.5vw, 32px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.9);
}
.modal-meta {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
/* Titolo inglese sotto il romaji (modal manga), solo info aggiuntiva */
.manga-modal-subtitle {
    font-size: 13px; color: rgba(255,255,255,0.7); font-style: italic;
    margin: -4px 0 6px; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
/* Autore/i (modal manga) */
.manga-modal-authors { font-size: 13px; color: var(--text-sub); margin: -8px 0 16px; }

.modal-body { padding: 16px 20px 20px; }

/* Impostazioni non ha un hero image sotto cui far scorrere il testo (a
   differenza di show/manga modal): la barra "torna indietro" resta sempre
   nello stato "pinned" (niente scroll listener, vedi index.html), quindi lo
   spazio per non finirci sotto va riservato subito col padding-top invece
   che con l'hero stesso. */
.settings-modal-body { padding-top: 76px; }

/* Modal internal tabs */
.modal-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border);
    margin: 0 -20px 16px;
    padding: 0 20px;
    overflow-x: auto; scrollbar-width: none;
}
.modal-tabs::-webkit-scrollbar { display: none; }
.modal-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-sub); font-size: 14px; font-weight: 600;
    padding: 8px 16px; cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}
.modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.modal-tab-panel { display: none; }
.modal-tab-panel.active { display: block; animation: fade 0.3s; }

/* Tab Trailer: miniatura YouTube 16:9 con play overlay, sostituita da un
   iframe incorporato al click (resta nel modal invece di aprire YouTube in
   un'altra scheda). */
.modal-trailer-panel { margin-bottom: 4px; }
.modal-trailer-thumb-wrap {
    position: relative; aspect-ratio: 16 / 9; width: 100%;
    border-radius: 14px; overflow: hidden; cursor: pointer; background: #000;
}
.modal-trailer-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-trailer-thumb-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.modal-trailer-play-btn {
    position: absolute; inset: 0; margin: auto; width: 60px; height: 60px;
    border: none; background: none; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.modal-trailer-play-btn svg { width: 60px; height: 60px; }
.modal-trailer-thumb-wrap:hover .modal-trailer-play-btn { transform: scale(1.08); }

/* Watch providers */
.modal-watch-providers { margin-bottom: 20px; }
.modal-wp-title {
    font-size: 13px; font-weight: 600; color: var(--text-sub);
    margin-bottom: 10px;
}
.modal-wp-list {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.modal-wp-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 10px; color: var(--text-sub);
    max-width: 52px; text-align: center;
}
.modal-wp-item img {
    width: 40px; height: 40px; border-radius: 10px;
    object-fit: cover;
}
.modal-wp-item span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 52px;
}

.modal-top-actions {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
}
/* Riprogettato come vera CTA (era una pill scarica, contorno + sfondo
   var(--surface), poco visibile): sfondo pieno var(--primary) come
   .action-fab, ombra per dargli peso — è l'azione più frequente nel modal
   di una serie in corso, deve leggersi come tale a colpo d'occhio. */
.modal-quick-check-btn {
    margin-left: auto;
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px 0 12px;
    height: 56px; border-radius: 28px;
    border: none;
    background: var(--primary);
    color: var(--on-primary);
    cursor: pointer;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 45%, transparent);
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
    max-width: 220px;
    overflow: hidden;
}
.modal-quick-check-btn:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 55%, transparent); }
.modal-quick-check-btn:active { transform: scale(0.95); }
.modal-quick-check-btn.mqc-done {
    background: #28a750;
    box-shadow: 0 4px 14px rgba(40,167,80,0.4);
    pointer-events: none;
}

/* Cerchio icona: sul nuovo sfondo pieno var(--primary), un cerchio dello
   stesso colore sarebbe invisibile — bianco traslucido per contrasto. */
.mqc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,0.28); color: var(--on-primary);
    font-size: 13px; font-weight: 700; flex-shrink: 0;
    transition: background 0.2s;
}
.mqc-icon-done { background: rgba(255,255,255,0.32); }

/* Colonna testo centrale */
.mqc-body {
    display: flex; flex-direction: column; align-items: flex-start;
    min-width: 0; flex: 1;
    gap: 1px;
}
.mqc-code {
    font-size: 14px; font-weight: 800;
    color: var(--on-primary);
    white-space: nowrap;
}
.mqc-abs {
    font-size: 12px; font-weight: 700;
    color: var(--on-primary);
    opacity: 0.8;
}
.mqc-name {
    font-size: 11.5px; font-weight: 500;
    color: var(--on-primary);
    opacity: 0.72;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 120px;
}

/* Contatore episodi rimanenti */
.mqc-counter {
    flex-shrink: 0;
    font-size: 11px; font-weight: 700;
    background: rgba(255,255,255,0.22);
    color: var(--on-primary);
    border-radius: 99px;
    padding: 2px 8px;
    white-space: nowrap;
}
.action-fab {
    background: var(--primary); color: var(--on-primary); border: none;
    padding: 0 24px; height: 48px; border-radius: 24px; font-weight: 600; font-size: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); cursor: pointer; display: flex; align-items: center; gap: 8px;
    transition: transform 0.15s, opacity 0.2s;
}
.action-fab:active { transform: scale(0.95); }
.action-fab.added { background: var(--surface-hover); color: var(--text-main); }

/* Contatore capitoli letti nel modal Manga: AniList non espone i capitoli
   singoli come TVMaze fa con gli episodi, quindi qui è un semplice +/-
   invece di una checklist. */
.manga-chapter-block {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--surface); border-radius: 14px;
    padding: 12px 16px; margin-bottom: 20px;
}
.manga-chapter-label { font-size: 13px; font-weight: 600; color: var(--text-sub); }
.manga-chapter-stepper { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.manga-step-btn {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: var(--surface-hover); color: var(--text-main);
    font-size: 18px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.manga-step-btn:hover { background: var(--primary); color: var(--on-primary); }
.manga-step-btn:active { transform: scale(0.92); }
.manga-chapter-input {
    width: 56px; text-align: center; padding: 6px 4px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text-main);
    font-size: 14px; font-weight: 600; outline: none;
    -moz-appearance: textfield;
}
.manga-chapter-input:focus { border-color: var(--primary); }
.manga-chapter-input::-webkit-outer-spin-button,
.manga-chapter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.manga-chapter-total { font-size: 13px; color: var(--text-sub); }
/* Conferma visiva quando il numero di capitoli cambia (stepper, input
   diretto, o l'allineamento automatico al segnare "Completato"). */
@keyframes chapterFlash {
    0% { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
    100% { background: var(--bg); color: var(--text-main); border-color: var(--border); }
}
.manga-chapter-input.flash { animation: chapterFlash 0.5s ease; }

/* Coriandoli quando si segna un manga come "Completato" (vedi
   _celebrateMangaCompletion in app.js) — pochi elementi generati al volo,
   nessuna libreria, si autodistruggono dopo l'animazione. */
.manga-confetti-burst {
    position: fixed;
    top: 28%;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 4000;
    pointer-events: none;
}
.manga-confetti-piece {
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: mangaConfettiFall 1.1s ease-out forwards;
}
@keyframes mangaConfettiFall {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--mc-x, 0px), 260px) rotate(var(--mc-rot, 360deg)); }
}

/* Stepper capitoli compatto sotto la copertina, solo per i manga "in corso"
   (vedi buildMangaCardHTML) — stessa idea del blocco nel modal ma in miniatura,
   per avanzare di un capitolo senza dover aprire il dettaglio. */
.manga-card-stepper {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    width: 100%;
    margin-top: 6px;
    /* Larga quanto la card: così l'intera fascia sotto la copertina (bottoni
       + spazio vuoto ai lati) appartiene allo stepper e non alla card, e un
       tap leggermente fuori dai bottoni non apre più il modal per errore
       (vedi il branch .manga-card-stepper nel click handler, app.js). */
}
.manga-card-step-btn {
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: var(--surface); color: var(--text-main);
    font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.manga-card-step-btn:hover { background: var(--primary); color: var(--on-primary); }
.manga-card-step-btn:active { transform: scale(0.9); }
.manga-card-step-count { font-size: 12px; font-weight: 700; color: var(--text-main); }
.manga-card-step-total { font-weight: 500; color: var(--text-sub); }

/* Stesso conteggio ma in sola lettura, per i manga non "in corso" (da
   iniziare/in pausa/completato/abbandonato): niente pulsanti +/-, si
   modifica solo dal modal. */
.manga-card-chapters-static {
    display: flex; align-items: center; justify-content: center;
    margin-top: 6px;
}

/* Genre pills */
.modal-genres {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 14px;
}
.genre-pill {
    font-size: 12px; font-weight: 600;
    padding: 4px 12px; border-radius: 100px;
    border: 1px solid;
    white-space: nowrap;
}
/* Generi cliccabili nel modal manga (browse per genere) */
.genre-pill-clickable { cursor: pointer; transition: transform 0.12s, opacity 0.15s; }
.genre-pill-clickable:hover { opacity: 0.85; }
.genre-pill-clickable:active { transform: scale(0.95); }

/* Barra progresso stagione */
.modal-progress-block {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--surface);
    border-radius: 12px;
}
.mpb-header {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; margin-bottom: 8px;
}
.mpb-label { font-weight: 600; color: var(--text-main); }
.mpb-counts { color: var(--text-sub); font-size: 12px; }
.mpb-counts strong { color: var(--primary); }
.mpb-track {
    height: 5px; background: rgba(255,255,255,0.08);
    border-radius: 99px; overflow: hidden;
}
.mpb-fill {
    height: 100%; background: var(--primary);
    border-radius: 99px; transition: width 0.4s ease;
}

/* Prossimo episodio (o film) in uscita */
.modal-next-air {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-radius: 10px;
    font-size: 13px; color: var(--text-sub);
}
.mna-icon { font-size: 16px; flex-shrink: 0; }
.mna-text { flex: 1; min-width: 0; }
.mna-text strong { color: var(--primary); }
/* Bottone "Aggiungi promemoria" (.ics): stesso pattern .icon-btn-sm delle
   altre icone azione dell'app, ma su sfondo pieno per risaltare nel blocco. */
.mna-remind-btn {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface); color: var(--primary); border: none; cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.mna-remind-btn svg { width: 16px; height: 16px; }
.mna-remind-btn:hover { background: var(--surface-hover); }
.mna-remind-btn:active { transform: scale(0.92); }

/* Titolo sezioni (cast, simili) */
.modal-section-title {
    font-size: 16px; font-weight: 700;
    color: var(--text-main);
    margin-bottom: 14px;
}
.modal-similar-title-row { display: flex; align-items: center; gap: 8px; }

/* Cast */
.modal-cast-wrap { margin-bottom: 28px; }
.cast-scroll {
    display: flex; gap: 14px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px;
}
.cast-scroll::-webkit-scrollbar { display: none; }
.cast-item {
    flex: 0 0 70px; text-align: center;
}
.cast-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    overflow: hidden; margin: 0 auto 6px;
    background: var(--surface);
}
.cast-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cast-avatar-placeholder {
    width: 100%; height: 100%; display: flex;
    align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: var(--text-sub);
}
.cast-name {
    font-size: 11px; font-weight: 600; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cast-character {
    font-size: 10px; color: var(--text-sub);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}

/* Simili */
.modal-similar-wrap {
    margin: 0 calc(-1 * var(--container-px));
    margin-bottom: 28px;
    padding: 0 var(--container-px);
}
.modal-similar-scroll {
    display: flex; gap: 12px;
    overflow-x: auto; scrollbar-width: none;
    padding: 4px 0 12px;
    margin: 0 calc(-1 * var(--container-px));
    padding-left: var(--container-px);
}
.modal-similar-scroll::-webkit-scrollbar { display: none; }
.modal-similar-scroll::after {
    content: ''; flex-shrink: 0; width: var(--container-px);
}
.modal-similar-scroll .show-card {
    flex: 0 0 100px;
}
@media (min-width: 480px) {
    .modal-similar-scroll .show-card { flex: 0 0 120px; }
}

.modal-desc-wrap { margin-bottom: 24px; }
.modal-desc {
    color: var(--text-sub);
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 6px;
}
.modal-desc-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.read-more-btn {
    background: none; border: none; padding: 0;
    color: var(--primary); font-size: 13px; font-weight: 600;
    cursor: pointer; display: block;
    transition: opacity 0.15s;
}
.read-more-btn:hover { opacity: 0.8; }

/* Chip per segnare lo stato (In pausa / Abbandonata) nella modale */
.status-controls { display: flex; gap: 10px; margin: 4px 0 20px; }
.status-chip {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 12px; border-radius: 14px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-sub);
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.12s;
    line-height: 1;
}
.status-chip .ic { display: flex; align-items: center; justify-content: center; }
.status-chip .ic svg { width: 20px; height: 20px; }
.status-chip:hover { border-color: var(--text-sub); color: var(--text-main); }
.status-chip:active { transform: scale(0.96); }
.status-chip.onhold:hover, .status-chip.onhold.active {
    background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 50%, transparent);
}
.status-chip.dropped:hover, .status-chip.dropped.active {
    background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 50%, transparent);
}
/* "Completato" (manga): mancava una variante colorata come onhold/dropped,
   quindi selezionarlo non dava alcun riscontro visivo (sembrava non fare
   nulla, oltre a non muovere il contatore capitoli — vedi setMangaStatus). */
.status-chip.completed:hover, .status-chip.completed.active {
    background: rgba(129,201,149,0.12); color: var(--success); border-color: rgba(129,201,149,0.5);
}
/* Piccolo "pop" quando una chip di stato diventa attiva, per farlo notare
   subito invece di un cambio di colore silenzioso. Riparte automaticamente
   ogni volta che il chip viene ridisegnato attivo (nuovo nodo nel DOM). */
@keyframes chipPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.status-chip.active { animation: chipPop 0.3s ease; }

/* Chip "Liste" nella modale: aggiungi/togli il titolo da una lista personalizzata */
.modal-lists-wrap { margin-bottom: 20px; }
.list-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.list-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 100px; border: 1px solid var(--border);
    background: transparent; color: var(--text-sub); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: 0.2s;
}
.list-chip:hover { border-color: var(--text-sub); color: var(--text-main); }
.list-chip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.list-chip-new { border-style: dashed; }
.list-chip-new:hover { border-color: var(--primary); color: var(--primary); }

/* Bottone "Visto" per i film */
.movie-watched-btn {
    margin-left: auto;
    padding: 0 24px; height: 48px; border-radius: 24px;
    border: 2px solid var(--border);
    background: transparent; color: var(--text-sub);
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.movie-watched-btn:hover { border-color: var(--primary); color: var(--primary); }
.movie-watched-btn:active { transform: scale(0.96); }
.movie-watched-btn.watched {
    background: rgba(40,167,80,0.15);
    border-color: rgba(40,167,80,0.6);
    color: #28a750;
}

/* LISTA EPISODI OTTIMIZZATA */
/* Il blocco episodi è tenuto centrale e più stretto per leggibilità */
.episodes-toolbar { display: flex; justify-content: center; margin: 20px 0 4px; }
.watch-all-btn {
    padding: 10px 24px; border-radius: 100px; border: none; cursor: pointer;
    background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 600;
    transition: transform 0.15s, background 0.2s;
}
.watch-all-btn:active { transform: scale(0.96); }
.watch-all-btn.undo { background: var(--surface-hover); color: var(--text-main); }

.season-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px auto 20px; }
.season-chip {
    padding: 6px 16px; background: var(--surface); border-radius: 8px; border: 1px solid transparent;
    color: var(--text-sub); font-size: 13px; cursor: pointer; white-space: nowrap;
}
.season-chip.active { background: rgba(138, 180, 248, 0.15); color: var(--primary); border-color: var(--primary); }

.season-list { max-width: 520px; margin: 0 auto; }

/* Barra di avanzamento della stagione (es. 12/24 visti · 50%) */
.season-progress { margin: 0 0 16px; }
.season-progress-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-sub); margin-bottom: 6px; }
.season-progress-track { height: 6px; background: var(--surface); border-radius: 100px; overflow: hidden; }
.season-progress-fill { height: 100%; background: var(--primary); border-radius: 100px; transition: width 0.3s; }

/* Episode rows con thumbnail */
.episode-row {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.25s;
}
.episode-row.watched { background: transparent; }
.episode-row.watched .episode-info { opacity: 0.5; }
.episode-row.resume { background: color-mix(in srgb, var(--primary) 7%, transparent); border-radius: 10px; padding: 12px 10px; }
.episode-row.ep-flash {
    animation: epFlash 0.4s ease forwards;
}
@keyframes epFlash {
    0%   { background: rgba(40, 167, 80, 0.0); }
    30%  { background: rgba(40, 167, 80, 0.18); }
    100% { background: rgba(40, 167, 80, 0.0); }
}

/* Thumbnail con overlay check */
.ep-thumb-wrap {
    position: relative; flex-shrink: 0;
    width: 130px; height: 74px; border-radius: 9px;
    overflow: hidden; cursor: pointer;
    background: var(--surface);
}
.ep-thumb-wrap input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 2; }
.ep-thumb {
    width: 100%; height: 100%; object-fit: cover;
    display: block; transition: filter 0.25s;
}
.ep-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: var(--text-sub);
}
.ep-thumb-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0); border-radius: 9px;
    transition: background 0.25s;
    pointer-events: none;
}
.ep-check-icon {
    width: 32px; height: 32px; color: #fff;
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.2s, transform 0.2s;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
/* Stato visto */
.episode-row.watched .ep-thumb { filter: brightness(0.45); }
.episode-row.watched .ep-thumb-overlay { background: rgba(40,167,80,0.35); }
.episode-row.watched .ep-check-icon { opacity: 1; transform: scale(1); }
/* Hover su episodio non visto */
.ep-thumb-wrap:hover .ep-thumb-overlay { background: rgba(0,0,0,0.35); }
.ep-thumb-wrap:hover .ep-check-icon { opacity: 0.7; transform: scale(1); }
.ep-thumb-wrap.not-aired { cursor: default; }

.resume-tag { background: var(--primary); color: var(--on-primary); font-size: 11px; padding: 2px 7px; border-radius: 4px; margin-left: 4px; font-weight: 600; }
.episode-info { flex: 1; min-width: 0; }
.episode-num { font-size: 13px; color: var(--text-sub); margin-bottom: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.episode-abs { color: var(--primary); font-size: 14px; font-weight: 700; opacity: 0.85; }
.episode-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.episode-meta-row { display: flex; gap: 10px; margin-top: 4px; }
.ep-airdate { font-size: 13px; color: var(--text-sub); }
.ep-rating { font-size: 13px; color: var(--text-sub); }

.upcoming-tag {
    font-size: 10px; font-weight: 600;
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--warning);
    padding: 1px 6px; border-radius: 4px;
}

/* Sticky season header */
.ep-sticky-header {
    position: sticky; top: 0; z-index: 10;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 8px 20px; margin: 0 -20px 4px;
    font-size: 12px; font-weight: 700; color: var(--text-sub);
    letter-spacing: 0.03em;
}

/* TOAST NOTIFICATION */
.toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px);
    background: var(--toast-bg); color: var(--toast-text); padding: 14px 24px;
    border-radius: 4px; font-weight: 500; opacity: 0; transition: 0.3s; z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); width: max-content; max-width: 90%; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* LOADING & EMPTY STATES */
.spinner { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,0.1); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-msg { text-align: center; color: var(--text-sub); margin-top: 60px; }
.empty-icon { font-size: 40px; margin-bottom: 16px; opacity: 0.5; }

/* CONFIRMATION DIALOG */
.confirmation-dialog {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}
/* Con un input di testo (crea/rinomina lista) la tastiera mobile occupa la
   metà inferiore dello schermo, ma "height:100%" non si aggiorna con lei:
   un dialog centrato ci finisce quindi per metà sotto. Lo ancoriamo invece
   vicino alla cima, ben sopra la zona che la tastiera coprirà. */
.confirmation-dialog.has-input { align-items: flex-start; padding-top: 12vh; }
.confirmation-dialog.show {
    opacity: 1;
    pointer-events: auto;
}
.confirmation-content {
    background: var(--surface);
    padding: 24px;
    border-radius: 16px;
    width: 100%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transform: scale(0.95);
    transition: transform 0.2s ease-in-out;
}
.confirmation-dialog.show .confirmation-content {
    transform: scale(1);
}
.confirmation-message { margin-bottom: 20px; color: var(--text-main); }
/* Input testuale opzionale (showConfirmation con opts.input): usato per
   creare/rinominare una lista, riusando il dialog invece di un modal nuovo. */
.confirmation-input {
    width: 100%; margin: -8px 0 20px; padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-main);
    font-size: 14px; outline: none;
}
.confirmation-input:focus { border-color: var(--primary); }
.confirmation-actions { display: flex; justify-content: center; gap: 16px; }
.confirmation-actions button { padding: 10px 24px; border-radius: 100px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; }
.confirm-btn { background: var(--primary); color: var(--on-primary); }
.cancel-btn { background: var(--surface-hover); color: var(--text-main); }

/* IMPORT PROGRESS */
.import-progress-bar-wrap {
    width: 100%;
    height: 8px;
    background: var(--surface-hover);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 12px;
}
.import-progress-bar-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.3s ease;
}
.import-progress-label {
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 4px;
}
.import-progress-current {
    font-size: 14px;
    color: var(--text-main);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unmatched-list {
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    margin: 12px 0;
    background: var(--surface);
    border-radius: 8px;
    padding: 12px 16px;
}
.unmatched-list li {
    font-size: 13px;
    color: var(--text-sub);
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.unmatched-list li:last-child { border-bottom: none; }

/* Stats Dashboard */
#statsContainer { display: flex; flex-direction: column; gap: 16px; }

/* Card in cima: anello di completamento + numeri chiave della libreria,
   un solo colpo d'occhio invece di dover sommare tante card piccole. */
.dash-hero {
    background: linear-gradient(135deg, #1a3a5c 0%, #1e4a78 100%);
    border: 1px solid rgba(138,180,248,0.2);
    border-radius: 20px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
}
@media (max-width: 500px) {
    .dash-hero { flex-direction: column; gap: 16px; padding: 20px 16px; }
}

/* Reset per gli elementi della dashboard diventati <button> (anello,
   statistiche hero, card di riepilogo): stesso aspetto di prima, solo ora
   cliccabili verso il tab/filtro corrispondente. */
.dash-ring-wrap, .dash-hero-stat, .dash-stat-card {
    font: inherit;
    color: inherit;
    text-align: inherit;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.dash-ring-wrap:active, .dash-hero-stat:active, .dash-stat-card:active { transform: scale(0.97); }
.dash-hero-stat:hover .dash-hero-val, .dash-ring-wrap:hover .dash-ring-pct { color: var(--primary); }

.dash-ring-wrap { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.dash-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-ring-track, .dash-ring-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}
.dash-ring-track { stroke: rgba(255,255,255,0.12); }
.dash-ring-fill { stroke: var(--primary); transition: stroke-dashoffset 0.6s ease; }
.dash-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dash-ring-pct { font-size: 26px; font-weight: 600; color: #fff; line-height: 1.1; }
.dash-ring-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255,255,255,0.65); }

.dash-hero-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
@media (max-width: 500px) {
    .dash-hero-stats { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 18px; width: 100%; }
}
.dash-hero-stat { display: flex; align-items: baseline; gap: 8px; }
@media (max-width: 500px) { .dash-hero-stat { flex-direction: column; align-items: center; gap: 2px; } }
.dash-hero-val { font-size: 24px; font-weight: 600; color: #fff; line-height: 1; }
.dash-hero-lbl { font-size: 12px; color: rgba(255,255,255,0.7); }

.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.dash-stat-card {
    background: var(--surface);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s, transform 0.15s;
}
.dash-stat-card:hover { background: var(--surface-hover); transform: translateY(-1px); }
.dash-stat-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-stat-icon svg { width: 17px; height: 17px; }
.dash-stat-icon-success { background: rgba(129,201,149,0.14); color: var(--success); }
.dash-stat-icon-primary { background: rgba(138,180,248,0.14); color: var(--primary); }
.dash-stat-icon-neutral { background: rgba(255,255,255,0.08); color: var(--text-sub); }
.dash-stat-icon-onhold { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.dash-stat-icon-dropped { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.dash-stat-val { font-size: 20px; font-weight: 600; color: var(--text-main); line-height: 1.1; }
.dash-stat-lbl { font-size: 11px; color: var(--text-sub); }

/* Separatore tra il blocco show/film e quello manga, stessa dashboard
   ripetuta due volte (vedi _buildDashHeroBlock/renderStats). */
.dash-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin: 6px 2px 0;
}
.dash-block-title .ic svg { width: 18px; height: 18px; color: var(--text-sub); }

/* UPCOMING LIST */
.upcoming-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
@media (min-width: 768px) {
    .upcoming-columns {
        grid-template-columns: 1fr 1fr;
    }
}

.upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Stili per il messaggio di vuoto generale della tab */
.empty-tab-message {
    margin-top: 40px;
    padding: 20px;
    background-color: var(--surface);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-sub);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Stili per la fisarmonica delle serie in uscita */
.upcoming-show-header {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: var(--surface);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative; /* Per posizionare la freccia */
}
.upcoming-show-header:hover {
    background-color: var(--surface-hover);
}
.upcoming-show-header strong {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Indicatore freccia per accordion */
.upcoming-show-header::after {
    content: '▼'; /* Freccia giù */
    font-size: 14px;
    color: var(--text-sub);
    transition: transform 0.2s ease-in-out;
    padding: 8px;
}
.upcoming-show-header.active::after {
    transform: rotate(180deg); /* Freccia su quando attivo */
}
.upcoming-show-header .episode-count-badge {
    background-color: var(--primary);
    color: var(--on-primary);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 12px;
    flex-shrink: 0;
}
.upcoming-show-group { margin-bottom: 10px; }
.upcoming-episodes-panel {
    padding: 4px 0 2px 16px;
    margin-top: 8px;
    margin-left: 4px;
    border-left: 2px solid var(--border);
    display: none; /* Nascosto di default, JS lo passa a 'flex' */
    flex-direction: column;
    gap: 10px;
}

.upcoming-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: var(--surface);
    border-radius: 10px;
    padding: 10px 12px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
}
.upcoming-item:hover { background-color: var(--surface-hover); }
.upcoming-item:active { transform: scale(0.98); }

.upcoming-item-poster {
    width: 50px;
    height: 75px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0; /* Impedisce all'immagine di restringersi */
    background: var(--surface);
}

.upcoming-item-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-grow: 1;
    min-width: 0; /* Permette al testo lungo di andare in ellissi invece di traboccare */
}

.upcoming-item-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.25;
    text-align: center;
    min-width: 52px; /* Larghezza minima per date più lunghe */
    flex-shrink: 0;
}

.upcoming-item-details {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.upcoming-item-details strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upcoming-item-details span {
    font-size: 13px;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Raggruppamento mensile dei film in uscita */
.upcoming-group { margin-bottom: 22px; }
.upcoming-group:last-child { margin-bottom: 0; }
.upcoming-month-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-sub);
    margin-bottom: 10px;
    padding-left: 4px;
}
.upcoming-group-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Nuovo layout In Uscita — riga settimanale + sezioni mensili a griglia */
.upcoming-week-row {
    margin: 0 calc(-1 * var(--container-px));
    margin-bottom: 32px;
}
.upcoming-month-section {
    margin-bottom: 32px;
}
.upcoming-month-section:last-child { margin-bottom: 0; }

/* Badge data: impilato sotto l'etichetta di stato (vedi .card-badge-stack) */
.upcoming-date-badge {
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
}
.date-badge-green  { background: rgba(40, 167, 80, 0.90); }
.date-badge-amber  { background: rgba(210, 140, 20, 0.90); }
.date-badge-purple { background: rgba(120, 80, 210, 0.90); }

/* Titoli sezioni colorati */
.upcoming-title-week  { color: #f5a623; }
.upcoming-count-week  { background: rgba(245,166,35,0.15); color: #f5a623; }
.upcoming-title-saved { color: #a78bfa; }

/* Microtab Calendario (In Uscita) */
.upcoming-calendar-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.upcoming-calendar-month {
    font-size: 16px; font-weight: 700; color: var(--text-main);
    text-transform: capitalize;
}
/* Stessa forma/dimensione di .home-row-arrow, per coerenza con le altre
   frecce di navigazione dell'app. */
.calendar-nav-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: var(--surface); color: var(--text-sub);
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.calendar-nav-btn svg { width: 16px; height: 16px; }
.calendar-nav-btn:hover { background: var(--surface-hover); color: var(--primary); }

.upcoming-calendar-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.upcoming-calendar-weekday {
    text-align: center; font-size: 11px; font-weight: 600; color: var(--text-sub);
    padding-bottom: 6px; text-transform: uppercase;
}
.upcoming-calendar-day {
    position: relative; min-height: 56px; border-radius: 10px;
    background: var(--surface); padding: 5px;
    display: flex; flex-direction: column; gap: 3px;
}
.upcoming-calendar-day.is-outside { opacity: 0.35; }
.upcoming-calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--primary); }
.upcoming-calendar-day.has-items { cursor: pointer; }
.upcoming-calendar-day.has-items:active { transform: scale(0.95); }
.upcoming-calendar-day-num { font-size: 11px; font-weight: 700; color: var(--text-main); }
.upcoming-calendar-day-thumbs {
    display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto;
}
.upcoming-calendar-day-thumbs img {
    width: 13px; height: 18px; object-fit: cover; border-radius: 2px; flex-shrink: 0;
}
.upcoming-calendar-day-more {
    font-size: 9px; font-weight: 700; color: var(--text-sub);
    align-self: center;
}


/* --- LIBRERIA: sezioni (In corso / Da iniziare / Completati) --- */
/* Barra di filtri per stato nel tab Libreria (e "In Uscita", che riusa la
   stessa classe): resta agganciata subito sotto header+tab mentre si scorre,
   così i filtri restano sempre a portata di tap. */
.library-filters {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding-top: 6px; padding-bottom: 10px; margin-bottom: 24px;
    position: sticky; top: calc(var(--header-h) + var(--tabs-h)); z-index: 80;
    background: var(--bg);
}
.library-filters::-webkit-scrollbar { display: none; }
.library-filter-chip {
    display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
    padding: 7px 14px; border-radius: 100px; border: 1px solid var(--border);
    background: transparent; color: var(--text-sub); font-size: 13px; font-weight: 500; transition: 0.2s;
}
.library-filter-chip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.library-filter-chip .filter-count { font-size: 11px; opacity: 0.75; }
/* Sempre visibile in coda alla riga filtri, per creare la prima lista anche
   a libreria vuota. Bordo tratteggiato per distinguerla come azione "crea". */
.library-filter-add-btn {
    display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
    padding: 7px 14px; border-radius: 100px; border: 1px dashed var(--border);
    background: transparent; color: var(--text-sub); font-size: 13px; font-weight: 500; flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.library-filter-add-btn:hover { border-color: var(--primary); color: var(--primary); }
.library-filter-add-btn:active { transform: scale(0.96); }

.library-subheader { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-sub); margin-top: 8px; }

.library-container { display: flex; flex-direction: column; gap: 36px; }

/* Hero delle liste personalizzate: collage degli ultimi titoli aggiunti,
   stesso linguaggio visivo della hero del modal (gradiente + testo
   sovraimpresso in basso a sinistra), ma orizzontale e non interattiva —
   l'header sotto (rinomina/elimina/espandi) resta l'unica area cliccabile. */
.list-hero {
    position: relative;
    height: 100px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--surface);
}
.list-hero-empty { background: linear-gradient(135deg, var(--surface), var(--surface-hover)); }
.list-hero-mosaic {
    position: absolute; inset: 0;
    display: grid; grid-auto-flow: column; gap: 2px;
}
.list-hero-mosaic.count-1 { grid-template-columns: 1fr; }
.list-hero-mosaic.count-2 { grid-template-columns: repeat(2, 1fr); }
.list-hero-mosaic.count-3 { grid-template-columns: repeat(3, 1fr); }
.list-hero-mosaic.count-4 { grid-template-columns: repeat(4, 1fr); }
.list-hero-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 55%, transparent 100%);
}
.list-hero-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 10px 14px;
    display: flex; align-items: baseline; gap: 8px;
}
.list-hero-name {
    font-size: 15px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-hero-count {
    font-size: 12px; color: rgba(255,255,255,0.75); flex-shrink: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.library-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.library-section-header .h3-like { margin-bottom: 0; }
.section-count-badge {
    background-color: var(--surface-hover);
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Sezioni collassabili (es. Completati): chiuse di default per prestazioni.
   Icona SVG (IC.chevronRight) invece del vecchio carattere Unicode "▸", per
   essere coerente con le altre frecce dell'app (es. .home-row-arrow) — niente
   cerchio di sfondo però: qui non è un bottone a sé, l'intera intestazione
   (role="button") è già l'area cliccabile per espandere/collassare. */
.library-section-header.lazy { cursor: pointer; user-select: none; }
.collapse-caret {
    display: inline-flex; color: var(--text-sub);
    transition: transform 0.2s, color 0.15s;
    margin-left: auto; flex-shrink: 0;
}
.collapse-caret svg { width: 16px; height: 16px; }
.library-section.collapsible:not(.collapsed) .collapse-caret { transform: rotate(90deg); }
.library-section-header.lazy:hover .collapse-caret { color: var(--primary); }
.library-section.collapsed .shows-grid { display: none; }
/* Sentinella invisibile per il caricamento a batch delle sezioni molto
   grandi (vedi _renderSectionWindowed) — non deve occupare spazio visibile,
   né restare nel layout quando la sezione è chiusa. */
.grid-load-sentinel { height: 1px; }
.library-section.collapsed .grid-load-sentinel { display: none; }


/* --- IMPOSTAZIONI --- */
.icon-btn { position: relative; background: none; border: none; color: var(--text-main); cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s, transform 0.15s; }
.icon-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
.icon-btn:active { transform: scale(0.94); }
/* Pallino "modifiche non sincronizzate" sull'icona impostazioni (vedi
   _setSyncPending in app.js) — appare/scompare, nessuna animazione continua
   per non essere fastidioso mentre resta visibile durante un retry lungo. */
.sync-pending-dot {
    position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--warning); border: 2px solid var(--bg);
}
/* Variante ridotta: matita/cestino nell'header di una sezione-lista */
.icon-btn-sm { padding: 5px; color: var(--text-sub); transition: color 0.15s, transform 0.15s; }
.icon-btn-sm svg { width: 15px; height: 15px; }
.icon-btn-sm:hover { color: var(--text-main); }
.icon-btn-sm:active { transform: scale(0.94); }

/* Impostazioni: raggruppate in sezioni con titolo, ogni voce è una card
   (stesso linguaggio visivo di dash-stat-card/dash-hero — sfondo --surface,
   bordi arrotondati, ombra leggera) invece di semplice testo impilato. */
.settings-section { margin-bottom: 26px; }
.settings-section:last-child { margin-bottom: 4px; }
.settings-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-sub);
    margin: 0 2px 10px;
}

.setting-item {
    background: var(--surface);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.setting-item + .setting-item { margin-top: 12px; }

/* Card di import: un bordo sinistro colorato le distingue a colpo d'occhio
   dalle altre voci (backup/account), più "definite" come richiesto, senza
   introdurre un linguaggio visivo nuovo (stesso colore --primary già usato
   per gli accenti interattivi nel resto dell'app). */
.setting-item-import {
    border-left: 3px solid var(--primary);
    padding-left: 16px;
}

.setting-label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--text-main); }

.setting-desc {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.5;
    margin-bottom: 16px;
}

.color-options { display: flex; gap: 14px; flex-wrap: wrap; }
.color-option {
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: border-color .2s, transform .15s;
}
.color-option:hover { transform: scale(1.08); }
.color-option.selected { border-color: var(--text-main); }

/* Tab Manga: bottone "Carica altri" sotto i risultati di ricerca/genere */
.manga-load-more-btn { display: block; margin: 16px auto 8px; }

/* Etichetta "Genere: X" quando si sfoglia per genere invece di cercare per testo */
.manga-search-mode-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--text-main);
    background: var(--surface); border-radius: 100px;
    padding: 6px 8px 6px 14px; margin: 4px 0 16px; width: fit-content;
}
.manga-search-mode-clear {
    width: 20px; height: 20px; border-radius: 50%; border: none;
    background: var(--surface-hover); color: var(--text-main);
    font-size: 14px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.manga-search-mode-clear:hover { background: var(--primary); color: var(--on-primary); }
.manga-search-mode-clear:active { transform: scale(0.9); }

/* Picker generi/stato nella schermata di scoperta del macrotab Cerca */
.manga-picker-row { margin-bottom: 16px; }
.manga-picker-label {
    display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-sub); margin-bottom: 8px;
}
.manga-picker-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.manga-picker-chip {
    padding: 7px 14px; border-radius: 100px; border: 1px solid var(--border);
    background: transparent; color: var(--text-sub); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: 0.2s; white-space: nowrap;
}
.manga-picker-chip:hover { border-color: var(--primary); color: var(--primary); }
.manga-picker-chip:active { transform: scale(0.96); }

#mangaDiscoverRows { margin-top: 8px; }

/* Select "Ordina per" sopra i risultati di ricerca/genere/stato manga */
.manga-sort-wrap {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-sub); margin: 0 0 16px;
}
.manga-sort-wrap select {
    padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-main); font-size: 13px; cursor: pointer;
}
.manga-sort-wrap select:focus { border-color: var(--primary); }

.backup-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.setting-btn {
    padding: 10px 18px; background: var(--surface-hover); color: var(--text-main);
    border: none; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: background-color .2s, transform .15s;
}
.setting-btn:hover { background-color: var(--border); }
.setting-btn:active { transform: scale(0.97); }
/* Azione principale delle card di import (Seleziona file...): stesso colore
   dell'accento a sinistra della card, per farla risaltare come CTA. */
.setting-btn-primary { background: var(--primary); color: var(--on-primary); }
.setting-btn-primary:hover { background: var(--primary); opacity: 0.88; }
.setting-btn.danger { background-color: var(--danger); color: white; }
.setting-btn.danger:hover { background-color: color-mix(in srgb, var(--danger) 85%, white); }

/* --- AUTH STYLES --- */
/* Fissato al viewport (non min-height:100vh in flusso normale): su mobile
   la barra degli indirizzi che appare/scompare fa cambiare 100vh mentre si
   scrolla, lasciando il form scrollabile e non centrato sullo schermo
   davvero visibile in quel momento. position:fixed + inset:0 lo ancora
   sempre allo schermo reale, indipendentemente dalla UI del browser. */
#authContainer {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--bg);
    overflow-y: hidden;
    z-index: 50;
}

/* Stessa card "elevata" (sfondo --surface, raggio 20px, ombra) del resto
   dell'app (dash-hero, setting-item), invece del box generico di prima. */
.auth-form {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    padding: 32px 28px;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    animation: fade 0.3s;
}
/* Su viewport molto bassi (schermi piccoli, tastiera aperta) il container
   non scrolla più (#authContainer overflow-y: hidden), quindi qui riduciamo
   il form perché resti sempre interamente visibile senza tagliare contenuto. */
@media (max-height: 700px) {
    .auth-form { padding: 18px 24px; }
    .auth-brand { margin-bottom: 12px; }
    .auth-form h2 { margin-bottom: 12px; }
    .auth-input-wrap { margin-bottom: 10px; }
}

/* Stesso lockup icona+testo dell'header dell'app (index.html, <h1> con svg
   inline prima del testo), non impilato: un blocco impilato (icona sopra,
   titolo sotto) risultava leggermente sbilanciato a sinistra invece che
   centrato, perché icona e testo hanno larghezze diverse e i loro centri
   ottici non coincidono se non sono sulla stessa riga. */
.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}
.auth-app-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text-main);
}
.auth-logo { width: 32px; height: 32px; flex-shrink: 0; }
.auth-tagline { font-size: 13px; color: var(--text-sub); margin: 6px 0 0; }

.auth-form h2 {
    text-align: center;
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-sub);
}

.auth-input-wrap { position: relative; margin-bottom: 14px; }
.auth-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-sub); display: flex; pointer-events: none;
}
.auth-input-icon svg { width: 18px; height: 18px; }
.auth-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(138,180,248,0.15); outline: none; }
.auth-input-password { padding-right: 42px; }
.auth-password-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: none; background: none; color: var(--text-sub);
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.auth-password-toggle svg { width: 17px; height: 17px; }
.auth-password-toggle:hover { background: var(--surface-hover); color: var(--text-main); }

.auth-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: opacity 0.2s, transform 0.15s;
}
.auth-btn:hover { opacity: 0.9; }
.auth-btn:active { transform: scale(0.98); }
.auth-btn:disabled { opacity: 0.6; cursor: default; }

.auth-toggle {
    text-align: center;
    font-size: 14px;
    color: var(--text-sub);
    margin-top: 18px;
}
.auth-toggle span {
    color: var(--primary);
    font-weight: 500;
    cursor: pointer;
}
.auth-toggle span:hover { text-decoration: underline; }