@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#08090b;--panel:#111318;--panel2:#171920;--text:#f3f4f6;--muted:#9ba1ad;--line:#252a34;--accent:#e4b84b}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 80% -10%,#222733 0,#08090b 38%);color:var(--text);font-family:Inter,system-ui,sans-serif}
.top{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 4vw;position:sticky;top:0;background:rgba(8,9,11,.88);backdrop-filter:blur(16px);z-index:5}
.brand{font-family:"Space Grotesk";font-weight:800;letter-spacing:.08em}.brand span{color:var(--accent)}.count{font-size:12px;color:var(--muted)}
main{max-width:1500px;margin:auto;padding:0 4vw 70px}.hero{min-height:0;display:flex;align-items:end;justify-content:space-between;padding:38px 0 24px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--accent);font-weight:700}.hero h1{font:700 clamp(42px,6vw,82px)/.95 "Space Grotesk";margin:10px 0}.hero h1 em{font-style:normal;color:#aeb4c0}.hero p{max-width:600px;color:var(--muted);line-height:1.6}.hero-stat{text-align:right}.hero-stat strong{display:block;font:700 clamp(52px,7vw,100px)/1 "Space Grotesk"}.hero-stat span{font-size:11px;letter-spacing:.25em;color:var(--muted)}
.toolbar{display:flex;gap:12px;padding:25px 0}.search{flex:1;display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 16px}.search span{font-size:25px;color:var(--muted)}input,select{background:transparent;color:var(--text);border:0;outline:0;font:inherit}input{width:100%;padding:15px}select{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.18s}.card:hover{transform:translateY(-3px);border-color:#414856}.poster{aspect-ratio:2/3;background:#1a1d24;overflow:hidden}.poster img{width:100%;height:100%;object-fit:cover;display:block}.noposter{height:100%;display:grid;place-items:center;color:#686f7b;font-size:12px;text-align:center;padding:15px}.card-body{padding:12px}.title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta{color:var(--muted);font-size:12px;margin-top:5px}.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.chip{font-size:9px;font-weight:800;letter-spacing:.05em;border:1px solid #383e49;border-radius:5px;padding:3px 5px;color:#cbd0d8}.chip.accent{color:var(--accent);border-color:#675526}
.loading{text-align:center;padding:45px;color:var(--muted)}.pager{display:flex;justify-content:center;gap:7px;padding:30px}.pager button{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 13px;cursor:pointer}.pager button.active{border-color:var(--accent);color:var(--accent)}
.modal{position:fixed;inset:0;z-index:20}.hidden{display:none}.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}.detail{position:relative;max-width:950px;max-height:90vh;overflow:auto;margin:5vh auto;background:#101218;border:1px solid var(--line);border-radius:16px;padding:28px}.close{position:absolute;right:15px;top:12px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}.detail-head{display:grid;grid-template-columns:220px 1fr;gap:28px}.detail-head img{width:100%;border-radius:10px}.detail h2{font:700 40px/1.05 "Space Grotesk";margin:5px 0 8px}.muted{color:var(--muted)}.tech{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:25px}.tech div{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:11px}.tech b{display:block;font-size:10px;color:var(--muted);letter-spacing:.08em;margin-bottom:5px}.tech span{font-weight:600}.summary{line-height:1.65;color:#c3c7ce;margin-top:18px}
@media(max-width:650px){.top{padding:0 18px}.hero{min-height:0;padding:28px 0 18px}.hero-stat{display:none}main{padding:0 18px 50px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-body{padding:9px}.detail{margin:0;height:100%;max-height:100%;border-radius:0;padding:22px 16px}.detail-head{grid-template-columns:110px 1fr;gap:16px}.detail h2{font-size:25px}.tech{grid-template-columns:1fr}}

/* Controlli di visualizzazione: coerenti con la palette originale */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:0}
.brand img,.brand-mark{display:block;width:46px;height:46px;max-width:46px;object-fit:contain;flex:0 0 auto}
.brand-fallback{display:none;font-family:"Space Grotesk";font-weight:800;letter-spacing:.08em;white-space:nowrap}
.brand-fallback b{color:var(--accent)}
.toolbar{flex-wrap:wrap;align-items:center}
.toolbar .search{flex:1 1 280px;min-width:220px}
.view-controls{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--panel);min-height:42px}
.control-label{font-size:11px;color:var(--muted);padding:0 6px 0 8px}
.view-btn{font:inherit;font-size:12px;white-space:nowrap;min-height:32px;padding:0 10px;border:1px solid transparent;border-radius:7px;color:var(--muted);background:transparent;cursor:pointer}
.view-btn:hover{color:var(--text);border-color:#414856}
.view-btn.active{color:var(--accent);border-color:#675526;background:#211d13}
.grid[data-size="small"]{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px}
.grid[data-size="medium"]{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.grid[data-size="large"]{grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px}
.grid[data-size="small"] .card-body{padding:9px}
.grid[data-size="small"] .title{font-size:13px}
.grid[data-size="small"] .chip{font-size:8px}
.grid[data-size="large"] .card-body{padding:14px}
.grid[data-size="large"] .title{font-size:16px}
/* La vista elenco riutilizza le stesse schede e gli stessi metadati */
.grid.list-mode{display:flex;flex-direction:column;gap:9px}
.grid.list-mode .card{display:grid;grid-template-columns:var(--list-poster-width,100px) minmax(0,1fr);min-height:0;align-items:stretch}
.grid.list-mode[data-size="small"] .card{--list-poster-width:66px}
.grid.list-mode[data-size="medium"] .card{--list-poster-width:100px}
.grid.list-mode[data-size="large"] .card{--list-poster-width:140px}
.grid.list-mode .poster{aspect-ratio:2/3;height:auto;min-height:0}
.grid.list-mode .poster img{object-fit:contain;object-position:top center}
.grid.list-mode .card-body{align-self:center;padding:14px 18px}
.grid.list-mode .title{white-space:normal;overflow:visible;text-overflow:clip;font-size:16px}
.grid.list-mode .meta{font-size:12px}
.grid.list-mode .chips{margin-top:8px}
#exportPdf{color:var(--accent);border-color:#675526}
@media(max-width:760px){.toolbar .search{flex-basis:100%}.toolbar select{flex:1 1 145px;min-height:42px}.toolbar .filter-reset{flex:1 1 auto;min-height:42px}.view-controls{flex:1 1 auto;justify-content:center}.grid[data-size="large"]{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.grid.list-mode .card-body{padding:10px}.grid.list-mode .title{font-size:14px}}
@media(max-width:650px){.brand-mark{width:38px;height:38px;max-width:38px}.grid[data-size="small"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.grid[data-size="medium"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid[data-size="large"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid.list-mode[data-size="large"] .card{--list-poster-width:100px}.brand img,.brand-mark{height:31px;width:31px;max-width:45vw}}
@media print{.top,.hero,.toolbar,.pager,.modal,.loading{display:none!important}body{background:#fff!important;color:#111!important}main{max-width:none;padding:0;margin:0}.grid{display:block!important}.grid .card{break-inside:avoid;page-break-inside:avoid;background:#fff!important;color:#111!important;border:1px solid #ccc!important;margin:0 0 10px;transform:none!important}.grid .card-body{padding:8px!important}.grid .title{color:#111!important;white-space:normal!important}.grid .meta,.grid .chip{color:#444!important}.grid .poster{display:none!important}.grid .chips{display:none!important}}

/* Navigazione alfabetica verticale, fissa sul lato destro */
.alphabet{position:fixed;right:max(1vw, (100vw - 1500px)/2 + 1vw);top:50%;transform:translateY(-50%);z-index:8;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:3px;max-height:none;overflow:visible;padding:6px 4px;background:rgba(17,19,24,.94);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.35);backdrop-filter:blur(12px)}
.alpha-btn{flex:0 0 21px;min-width:25px;height:21px;padding:0 3px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--muted);font:700 10px Inter,system-ui,sans-serif;cursor:pointer;line-height:19px;text-align:center}
.alpha-btn:hover{color:var(--text);border-color:#414856;background:var(--panel2)}
.alpha-btn.active{color:var(--accent);border-color:#675526;background:#211d13}
.alpha-btn:first-child{padding:0 3px;font-size:8px;letter-spacing:-.03em}
@media(max-width:650px){.alphabet{right:3px;gap:2px;padding:4px 2px;border-radius:9px}.alpha-btn{flex-basis:19px;height:19px;min-width:22px;font-size:9px;line-height:17px}main{padding-right:34px}}


/* Il posizionamento desktop viene calcolato rispetto alla griglia copertine via JavaScript. */
@media(min-width:651px){.alphabet{transform:none;max-height:none;overflow:visible}}

/* Intestazione: titolo fisso a destra al posto del contatore */
.header-title{font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:14px;font-weight:800;letter-spacing:.16em;color:#f3f4f6;white-space:nowrap}.header-title b{color:#e4b84b;font-weight:800}.header-title span{color:#f3f4f6}
@media(max-width:420px){.header-title{font-size:11px;letter-spacing:.1em}}


/* Intestazione corretta: misure già concordate */
.top{height:100px;min-height:100px;padding-top:0;padding-bottom:0}
.brand{display:flex;align-items:center;min-width:0}
.brand img{display:block;width:80px;height:80px;max-width:80px;object-fit:contain;flex:0 0 80px}
@media(max-width:650px){.top{height:76px;min-height:76px;padding-left:18px;padding-right:18px}.brand img{width:58px;height:58px;max-width:58px;flex-basis:58px}}


/* V24: comandi rapidi alla destra della barra alfabetica, senza spostare la barra */
.page-jump-controls{position:fixed;left:0;right:auto;top:0;z-index:9;display:flex;flex-direction:column;gap:8px;transform:none}
.page-jump-controls button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #675526;border-radius:12px;background:rgba(17,19,24,.94);color:var(--accent);font:700 24px/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);backdrop-filter:blur(12px);transition:background .15s,border-color .15s,transform .15s}
.page-jump-controls button:hover{background:#211d13;border-color:var(--accent);transform:scale(1.05)}
.page-jump-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:650px){.page-jump-controls{gap:6px}.page-jump-controls button{width:36px;height:36px;border-radius:10px;font-size:21px}}


/* Link di ricerca incrociata per registi e cast: mantiene la palette del sito. */
.person-search-link{color:inherit;text-decoration:underline;text-decoration-color:var(--accent, #c9a227);text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;transition:color .15s ease}
.person-search-link:hover,.person-search-link:focus-visible{color:var(--accent, #c9a227);outline:none}