/* ============================================================
   FULGIONE+  —  stile Netflix
   ============================================================ */
:root{
    --bg:#141414;
    --bg-2:#181818;
    --bg-3:#222;
    --text:#fff;
    --text-dim:#b3b3b3;
    --red:#e50914;
    --red-hover:#f6121d;
    --header-h:68px;
    --radius:6px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
    background:var(--bg);
    color:var(--text);
    font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
    line-height:1.4;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- Bottoni ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    border:none;cursor:pointer;border-radius:var(--radius);
    padding:.7rem 1.4rem;font-size:1rem;font-weight:600;
    transition:.15s ease;white-space:nowrap;line-height:1;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hover)}
.btn-white{background:#fff;color:#111}
.btn-white:hover{background:rgba(255,255,255,.78)}
.btn-green{background:#21c25e;color:#fff}
.btn-green:hover{background:#1aa64f}
.btn-grey{background:rgba(109,109,110,.7);color:#fff}
.btn-grey:hover{background:rgba(109,109,110,.5)}
.btn-block{width:100%}
.btn-sm{padding:.4rem .8rem;font-size:.82rem}
.btn-danger{background:#5c1a1d;color:#ffb4b4}
.btn-danger:hover{background:#7a2227}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:var(--header-h);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 4%;
    /* vetro LEGGERO: poca sfocatura + leggera sfumatura in alto per leggibilità,
       così l'immagine di sfondo resta ben visibile sotto */
    background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.08) 100%);
    -webkit-backdrop-filter:blur(6px) saturate(125%);
    backdrop-filter:blur(6px) saturate(125%);
    transition:background .3s ease, backdrop-filter .3s ease;
    padding-top:env(safe-area-inset-top);
}
.site-header.scrolled{
    background:rgba(16,16,16,.55);
    -webkit-backdrop-filter:blur(12px) saturate(130%);
    backdrop-filter:blur(12px) saturate(130%);
    border-bottom:1px solid rgba(255,255,255,.05);
}
.header-left{display:flex;align-items:center;gap:1.6rem}
.logo{
    display:inline-flex;align-items:center;gap:.55rem;line-height:1;
    color:var(--red);font-weight:800;font-size:1.3rem;letter-spacing:.5px;
    text-transform:uppercase;
}
.logo span{
    font-weight:900;letter-spacing:2px;
    background:linear-gradient(180deg,#ff5a5f 0%,#e50914 55%,#b00710 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 3px 14px rgba(229,9,20,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.logo-img{height:40px;width:40px;object-fit:contain;border-radius:7px;display:block;flex:0 0 auto}
.logo-short{display:none}
.header-right{display:flex;align-items:center;gap:1rem}
.nav-link{color:var(--text-dim);font-size:.92rem}
.nav-link:hover{color:#fff}
.nav-fav{display:inline-flex;align-items:center;gap:.35rem}
.nav-fav svg{display:block}
.nav-fav:hover svg{color:var(--red)}

.admin-nav{display:flex;gap:1.1rem}
.admin-nav a{color:var(--text-dim);font-size:.95rem}
.admin-nav a.active,.admin-nav a:hover{color:#fff}

/* ricerca */
.search{display:flex;align-items:center}
.search-icon{background:none;border:none;color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center}
#searchInput{
    width:0;padding:0;border:none;background:transparent;
    color:#fff;border-radius:4px;
    transition:width .3s ease,padding .3s ease,opacity .2s ease;
    height:34px;font-size:16px;outline:none;
    opacity:0;pointer-events:none;
}
.search.open #searchInput{
    width:200px;padding:0 .7rem;opacity:1;pointer-events:auto;
    background:rgba(0,0,0,.55);border:1px solid #fff;
}

/* barra di ricerca della pagina Indice */
.indice-search{display:flex;align-items:center;gap:.6rem;max-width:620px;margin:0 0 1.4rem}
.indice-search .is-field{
    display:flex;align-items:center;gap:.6rem;flex:1 1 auto;min-width:0;
    padding:.7rem 1rem;border-radius:12px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.indice-search .is-field:focus-within{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09)}
.indice-search .is-field svg{color:var(--text-dim);flex:0 0 auto}
.indice-search input{flex:1 1 auto;min-width:0;background:transparent;border:none;outline:none;
    color:#fff;font-size:1rem}
.indice-search input::placeholder{color:var(--text-dim)}
/* nasconde la "x" nativa del browser nei campi search: usiamo solo la nostra */
.indice-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.indice-search input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.indice-search input[type=search]::-ms-clear{display:none;width:0;height:0}
.indice-search .is-clear{background:none;border:none;color:var(--text-dim);font-size:1.4rem;
    line-height:1;cursor:pointer;padding:0 .15rem;flex:0 0 auto}
.indice-search .is-clear:hover{color:#fff}
.indice-search .is-go{flex:0 0 auto;white-space:nowrap}
.indice-status{color:var(--text-dim);font-size:.9rem;min-height:1.2em;margin:.2rem 0 1rem}
.loadmore-wrap{text-align:center;margin:2rem 0 1rem}
@media (max-width:640px){
    .indice-search .is-go{padding:.7rem 1rem}
}

/* profilo */
.profile{position:relative}
.avatar{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:4px;background:var(--red);
    font-weight:700;cursor:pointer;
}
.profile-menu{
    position:absolute;right:0;top:120%;min-width:230px;
    background:rgba(0,0,0,.92);border:1px solid #333;border-radius:8px;
    padding:.5rem 0;display:none;flex-direction:column;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.profile.open .profile-menu{display:flex}
.profile-menu a,.profile-name{padding:.55rem 1rem;font-size:.9rem;color:var(--text-dim)}
.profile-name{color:#fff;border-bottom:1px solid #333;font-weight:600;display:flex;align-items:center;gap:.5rem}
.profile-role{font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;background:var(--red);color:#fff;padding:.1rem .4rem;border-radius:10px;font-weight:700}
.profile-menu a:hover{color:#fff;background:rgba(255,255,255,.06)}
.profile-plan{padding:.5rem 1rem;border-bottom:1px solid #333;display:flex;flex-direction:column;gap:.3rem}
.pp-row{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem}
.pp-row span{color:var(--text-dim)}
.pp-row strong{color:#fff;font-weight:600}

/* ============================================================
   HERO SLIDESHOW
   ============================================================ */
.hero-slideshow{position:relative;height:62vh;min-height:380px;overflow:hidden}
.hero-slide{
    position:absolute;inset:0;
    background-size:cover;background-position:center center;
    display:flex;align-items:flex-end;
    padding:0 4% 4.5vh;color:#fff;
    opacity:0;pointer-events:none;transition:opacity 1.2s ease;
    filter:saturate(1.18) contrast(1.04);
}
.hero-slide.active{opacity:1;pointer-events:auto}
.hero-fade{
    position:absolute;inset:0;
    background:
      linear-gradient(0deg, var(--bg) 1%, rgba(20,20,20,.55) 26%, rgba(20,20,20,0) 60%),
      linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.4) 42%, rgba(0,0,0,0) 72%);
}
.hero-content{position:relative;max-width:640px;z-index:2}
.hero-title{font-size:3rem;font-weight:800;line-height:1.05;margin-bottom:1rem;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero-meta{display:flex;gap:1rem;color:#ddd;font-size:.95rem;margin-bottom:1rem;flex-wrap:wrap}
.hero-meta span{position:relative}
.hero-desc{font-size:1.05rem;color:#e5e5e5;margin-bottom:1.4rem;text-shadow:0 1px 4px rgba(0,0,0,.5);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.btn svg{display:block;flex:0 0 auto}
.ico-plus{font-size:1.4rem;font-weight:700;line-height:1}

/* ============================================================
   RIGHE / CAROSELLI
   ============================================================ */
main{min-height:60vh}
/* footer sempre in fondo: il body riempie l'altezza e main si espande */
body.home, body.sub{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.home > main, body.sub > main{flex:1 0 auto}
body.home > .site-footer, body.sub > .site-footer{flex-shrink:0}
.rows{padding:.4rem 0 3rem;margin-top:0;position:relative;z-index:5}
/* sfondo sfumato verticale: dal nero a un viola acceso ma elegante (solo home) */
.home .rows{
    background:linear-gradient(180deg,
        var(--bg) 0%,
        var(--bg) 50%,
        #160809 78%,
        #240b0d 100%);
}
.row{margin:0 0 .3rem;position:relative}

/* frecce di scorrimento (solo desktop, iniettate via JS) */
.row-arrow{
    position:absolute;z-index:26;top:62px;bottom:54px;
    width:46px;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:#fff;opacity:0;transition:opacity .2s ease;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.row-arrow svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.row-arrow-left{left:0;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,0))}
.row-arrow-right{right:0;background:linear-gradient(270deg,rgba(0,0,0,.75),rgba(0,0,0,0))}
.row:hover .row-arrow{opacity:1}
.row-arrow:hover{color:#21c25e}
.row-arrow.hidden{opacity:0 !important;pointer-events:none}
@media (hover:none){ .row-arrow{display:none} }
.row-title{font-size:1.3rem;font-weight:700;margin:0 4% .2rem}
.row-scroller{
    display:flex;gap:.7rem;overflow-x:auto;overflow-y:hidden;
    /* spazio ampio sopra/sotto: lo zoom e l'ombra viola della card non vengono tagliati */
    padding:32px 4% 50px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.row-scroller::-webkit-scrollbar{display:none}

.card{
    position:relative;flex:0 0 auto;width:230px;
    background:rgba(43,43,43,.45);
    -webkit-backdrop-filter:blur(12px) saturate(150%);
    backdrop-filter:blur(12px) saturate(150%);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);overflow:hidden;
    /* leggera ombreggiatura viola chiaro a riposo */
    box-shadow:0 5px 14px rgba(168,120,255,.10);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{border-color:rgba(255,255,255,.20)}
.card-thumb{display:block;position:relative;background:var(--bg-3)}
.card-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:saturate(1.12) contrast(1.03)}
.card-noimg{
    width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#2a2a2a,#1a1a1a);padding:.6rem;text-align:center;
}
.card-noimg span{font-weight:700;font-size:.95rem;color:#ddd}

/* play che compare sulla miniatura al passaggio del mouse */
.thumb-play{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .18s ease;
}
.thumb-play svg{
    color:#fff;background:rgba(0,0,0,.55);border:2px solid #fff;border-radius:50%;
    padding:12px;width:24px;height:24px;box-sizing:content-box;
}

/* card del titolo SEMPRE visibile sotto la miniatura */
.card-cap{padding:.55rem .65rem .7rem}
.card-cap-title{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-cap-meta{font-size:.78rem;color:var(--text-dim);margin:.12rem 0 .55rem;min-height:1em}
.card-cap-actions{display:flex;gap:.5rem;align-items:center}
.circle{
    width:36px;height:36px;border-radius:50%;border:2px solid #aaa;
    background:rgba(60,60,60,.5);color:#fff;display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:1.25rem;font-weight:700;line-height:1;transition:.15s ease;padding:0;
    text-decoration:none;
}
.circle.play{background:#21c25e;color:#fff;border-color:#21c25e}
.circle.play:hover{background:#1aa64f;border-color:#1aa64f}
.circle:not(.play):hover{border-color:#fff;background:rgba(90,90,90,.7)}

/* cuore preferiti sulle card */
.circle.fav svg{width:16px;height:16px}
.circle.fav .heart-f{display:none}
.circle.fav:hover{border-color:#b388ff}
.circle.fav.is-fav{border-color:#b388ff;background:rgba(150,90,240,.28)}
.circle.fav.is-fav .heart-o{display:none}
.circle.fav.is-fav .heart-f{display:block;color:#cbacff}

/* cuore preferiti nei pulsanti grandi (hero / modale) */
.fav-btn .heart-f{display:none}
.fav-btn.is-fav .heart-o{display:none}
.fav-btn.is-fav .heart-f{display:block;color:#cbacff}
.fav-btn.is-fav{background:rgba(150,90,240,.32)}
.modal-actions{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}

@media (hover:hover){
    .card:hover{transform:scale(1.06);z-index:20;box-shadow:0 12px 28px rgba(150,85,240,.28)}
    .card:hover .thumb-play{opacity:1}
}

/* ---------- Riga "I piu' visti": card piu' grandi ---------- */
.row-top .row-title{font-size:1.45rem}
.row-top .card{width:330px}
.row-top .card-cap-title{font-size:1rem}
.row-top .card-cap-meta{font-size:.82rem}

/* ---------- Card "Vedi tutto" a fine carosello ---------- */
.card-seeall{
    width:230px;align-self:stretch;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
    min-height:100%;color:var(--text-dim);text-align:center;
    background:rgba(255,255,255,.04);
}
.row-top .card-seeall{width:330px}
.seeall-icon{
    width:54px;height:54px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:2px solid rgba(255,255,255,.4);color:#fff;
    transition:.18s ease;
}
.card-seeall:hover .seeall-icon{border-color:#fff;background:rgba(255,255,255,.12);transform:translateX(3px)}
.seeall-text{font-weight:700;font-size:1rem;color:#fff}
.seeall-sub{font-size:.8rem;color:var(--text-dim)}

/* ---------- Barra categorie (link alle sezioni) ---------- */
.genre-filter{
    position:sticky;top:var(--header-h);z-index:40;
    display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;
    padding:.8rem 4%;
    background:rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.category-page .genre-filter,
.page-body .genre-filter{
    position:static;margin:0 0 1.4rem;padding:.2rem 0;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;border:none;
}
.chip{
    display:inline-flex;align-items:center;line-height:1;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);color:#ddd;
    padding:.45rem .95rem;border-radius:20px;font-size:.86rem;font-weight:600;
    cursor:pointer;white-space:nowrap;transition:.15s ease;text-decoration:none;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.chip:hover{background:rgba(255,255,255,.14);color:#fff}
.chip.active{background:#fff;color:#111;border-color:#fff}

/* ---------- Pagina categoria / preferiti ---------- */
.back-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--text-dim);font-size:.92rem;margin-bottom:.8rem}
.back-link:hover{color:#fff}
.category-title{font-size:1.9rem;font-weight:800}
.category-title .count{font-size:.95rem;color:var(--text-dim);font-weight:400;margin-left:.5rem}

/* hero a tutta larghezza (come la home) col film più visto della sezione */
.page-hero{
    position:relative;min-height:48vh;
    display:flex;align-items:flex-end;
    padding:0 4% 4vh;color:#fff;
    background-size:cover;background-position:center 28%;
    filter:saturate(1.18) contrast(1.04);
}
.page-hero .ph-content{position:relative;z-index:2;max-width:700px}
.page-hero .category-title{font-size:2.8rem;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.ch-sub{color:#e5e5e5;font-size:1.05rem;margin-top:.4rem;text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* contenitore sotto l'hero */
.page-body{padding:1.4rem 4% 3rem;max-width:1500px;margin:0 auto}
.page-body.no-hero{padding-top:calc(var(--header-h) + 1.4rem)}

.grid{
    display:grid;gap:1rem;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.grid .card{width:100%}

.empty{text-align:center;padding:6rem 1rem;color:var(--text-dim)}
.empty .btn{margin-top:1rem}

/* ---------- Loader di transizione tra le pagine ---------- */
.page-loader{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    background:rgba(12,8,18,.55);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.page-loader.show{opacity:1;visibility:visible}
.loader-ring{
    width:54px;height:54px;border-radius:50%;
    border:4px solid rgba(255,255,255,.14);
    border-top-color:#b388ff;border-right-color:#8b5cf6;
    animation:loader-spin .8s linear infinite;
    box-shadow:0 0 24px rgba(150,90,240,.45);
}
@keyframes loader-spin{to{transform:rotate(360deg)}}

/* ============================================================
   MODALE INFO
   ============================================================ */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow-y:auto}
.modal[hidden]{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7)}
.modal-box{position:relative;width:min(820px,100%);background:var(--bg-2);border-radius:8px;overflow:hidden;z-index:2;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-hero{height:340px;background-size:cover;background-position:center;position:relative}
.modal-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,24,24,0) 40%,var(--bg-2) 100%)}
.modal-close{position:absolute;top:14px;right:14px;z-index:5;width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.7);color:#fff;font-size:1.4rem;cursor:pointer}
.modal-body{padding:1.4rem 2rem 2rem;margin-top:-60px;position:relative;z-index:3}
.modal-body h2{font-size:1.8rem;margin-bottom:.6rem}
.modal-meta{display:flex;gap:1rem;color:var(--text-dim);font-size:.9rem;margin-bottom:1rem;flex-wrap:wrap}
.modal-body p{color:#d2d2d2;margin-bottom:1.4rem}

/* ============================================================
   PLAYER (watch.php)
   ============================================================ */
.watch-body{background:#000;min-height:100vh}
.watch-back{
    position:fixed;top:calc(var(--header-h) + env(safe-area-inset-top) + 8px);left:14px;z-index:101;
    color:#fff;font-size:.95rem;background:rgba(0,0,0,.55);
    padding:.45rem .85rem;border-radius:6px;line-height:1;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.watch-back:hover{background:rgba(0,0,0,.8)}

/* barra trasmissione TV (AirPlay / Chromecast) in alto a destra */
.cast-bar{
    position:fixed;top:calc(var(--header-h) + env(safe-area-inset-top) + 8px);right:14px;z-index:101;
    display:flex;align-items:center;gap:.55rem;
}
.cast-btn{
    display:inline-flex;align-items:center;gap:.4rem;
    color:#fff;background:rgba(0,0,0,.55);border:none;border-radius:6px;
    padding:.45rem .7rem;font-size:.9rem;cursor:pointer;line-height:1;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.cast-btn:hover{background:rgba(0,0,0,.8)}
.cast-launcher{
    --connected-color:#21c25e;--disconnected-color:#fff;
    width:28px;height:28px;cursor:pointer;
}
.cast-status{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom) + 18px);z-index:42;
    max-width:90%;text-align:center;
    background:rgba(0,0,0,.82);color:#fff;font-size:.9rem;line-height:1.35;
    padding:.6rem .9rem;border-radius:8px;border:1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* il player è centrato nella parte VISIBILE dello schermo (svh = viewport reale
   su iPhone, senza l'area dietro le barre di Safari) e non viene tagliato. */
.player-wrap{
    width:100%;background:#000;display:flex;align-items:center;justify-content:center;
    min-height:100vh;min-height:100svh;box-sizing:border-box;
    padding:calc(var(--header-h) + env(safe-area-inset-top) + 56px) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#player{
    width:100%;display:block;background:#000;
    max-height:100vh;
    max-height:calc(100svh - var(--header-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 56px);
}
.watch-info{max-width:900px;margin:0 auto;padding:1.5rem 1.2rem 3rem}
.watch-info h1{font-size:1.8rem;margin-bottom:.6rem}
.watch-meta{display:flex;gap:1rem;color:var(--text-dim);margin-bottom:1rem;flex-wrap:wrap}
.watch-info p{color:#d2d2d2}

/* suggeriti: 4 miniature dello stesso genere sotto la descrizione */
.watch-related{margin-top:2rem}
.watch-related h2{font-size:1.15rem;margin-bottom:.8rem;color:#fff}
.watch-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.wr-card{display:block;border-radius:6px;overflow:hidden;background:var(--bg-3);aspect-ratio:2/3}
.wr-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.wr-card:hover img{transform:scale(1.05)}
.wr-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:.4rem;text-align:center;font-size:.75rem;color:var(--text-dim)}

/* ============================================================
   AUTENTICAZIONE (login / install)
   ============================================================ */
.auth-body{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.72)),
        url('../../sfondo.avif') center center / cover no-repeat,
        radial-gradient(circle at 30% 20%,#3a0a0c,#0b0b0b 70%);
    background-color:#0b0b0b;
    padding:1.2rem;position:relative;
}
.auth-header{position:absolute;top:0;left:0;padding:1.2rem 4%}
.auth-card{
    width:min(420px,100%);background:rgba(0,0,0,.78);
    border-radius:10px;padding:2.4rem 2.2rem;backdrop-filter:blur(2px);
}
.auth-card h1,.auth-card h2{margin-bottom:1.2rem}
.auth-logo{color:var(--red);font-weight:800;text-transform:uppercase}
.auth-card form{display:flex;flex-direction:column;gap:1rem;margin:1rem 0}
.auth-card label{display:flex;flex-direction:column;gap:.4rem;font-size:.9rem;color:var(--text-dim)}
.auth-card input,.admin-form input,.admin-form textarea,.admin-form select{
    background:var(--bg-3);border:1px solid #404040;border-radius:4px;
    color:#fff;padding:.85rem .9rem;font-size:1rem;width:100%;outline:none;
}
.auth-card input:focus,.admin-form input:focus,.admin-form textarea:focus,.admin-form select:focus{border-color:#888;background:#2a2a2a}

/* L'autofill del browser non deve schiarire il campo né rompere il layout */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus{
    -webkit-text-fill-color:#fff;
    -webkit-box-shadow:0 0 0 1000px var(--bg-3) inset;
    caret-color:#fff;
    transition:background-color 9999s ease-in-out 0s;
}

/* label flottante login */
.float{position:relative}
.float input{padding-top:1.45rem}
.float span{position:absolute;left:.9rem;top:1.05rem;color:#8c8c8c;pointer-events:none;transition:.15s ease;font-size:1rem}
/* la label sale quando il campo è attivo, pieno O compilato dall'autofill */
.float input:focus + span,
.float input:not(:placeholder-shown) + span,
.float input:-webkit-autofill + span{top:.4rem;font-size:.7rem}

.err{background:#e87c03;color:#fff;border-radius:4px;padding:.7rem .9rem;font-size:.9rem;margin-bottom:.5rem}
.ok{background:#1b5e20;color:#d7f5d9;border-radius:4px;padding:.7rem .9rem;font-size:.9rem;margin-bottom:.5rem}
.warn{color:#ffcf66;font-size:.92rem;margin:.6rem 0}
.muted{color:var(--text-dim)}
.small{font-size:.82rem}

/* ============================================================
   AREA ADMIN
   ============================================================ */
.admin-body{background:var(--bg)}
.admin-main{padding:calc(var(--header-h) + 1.5rem) 4% 4rem;max-width:1300px;margin:0 auto}
.admin-main.narrow{max-width:760px}
.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
.admin-head h1,.admin-main h1{font-size:1.7rem}
.count{font-size:.9rem;color:var(--text-dim);font-weight:400;margin-left:.4rem}

.admin-form{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.2rem}
.admin-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.92rem;color:#ddd;font-weight:600}
.admin-form .hint{color:var(--text-dim);font-weight:400;font-size:.8rem}
.admin-form code{background:#000;padding:.1rem .35rem;border-radius:3px;color:#9ad}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-actions{display:flex;gap:.8rem;margin-top:.5rem}

/* selezione fasce di pubblico nel form film */
.aud-field{border:1px solid #3a3a3a;border-radius:8px;padding:.8rem 1rem 1rem}
.aud-field legend{font-weight:700;color:#ddd;padding:0 .4rem;font-size:.92rem}
.aud-options{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.5rem}
.admin-form .aud-check{flex-direction:row;display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;font-weight:600;color:#ddd}
.admin-form .aud-check input{width:auto;margin:0}

.table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:.9rem}
.admin-table th{text-align:left;color:var(--text-dim);font-weight:600;padding:.6rem .7rem;border-bottom:1px solid #333}
.admin-table td{padding:.6rem .7rem;border-bottom:1px solid #262626;vertical-align:middle}
.admin-table tr:hover td{background:rgba(255,255,255,.03)}
.thumb img{width:80px;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.thumb-none{display:block;width:80px;aspect-ratio:16/9;background:#2a2a2a;border-radius:4px}
.mono{font-family:monospace;font-size:.82rem;color:#9ad;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actions{white-space:nowrap;display:flex;gap:.4rem;align-items:center}
.badge{padding:.15rem .5rem;border-radius:20px;font-size:.72rem;text-transform:uppercase;font-weight:700}
.badge.admin{background:var(--red);color:#fff}
.badge.user{background:#333;color:#bbb}
.status-pill{padding:.15rem .6rem;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap}
.status-pill.st-ok{background:#143d1c;color:#7ee29a}
.status-pill.st-pending{background:#4a3a0c;color:#ffcf66}
.status-pill.st-expired{background:#4a1416;color:#ff9a9a}

.cols{display:grid;grid-template-columns:340px 1fr;gap:2.2rem;align-items:start}
.col-form h2,.col-list h2{font-size:1.2rem;margin-bottom:1rem}

/* ============================================================
   RESPONSIVE  —  TABLET
   ============================================================ */
@media (max-width:980px){
    .cols{grid-template-columns:1fr}
    .card{width:200px}
    .row-top .card{width:290px}
    .card-seeall{width:200px}
    .row-top .card-seeall{width:290px}
    .hero-title{font-size:2.4rem}
}

/* ============================================================
   RESPONSIVE  —  MOBILE / iPhone
   ============================================================ */
@media (max-width:640px){
    :root{--header-h:56px}
    .site-header{padding:0 4%}
    .logo{font-size:1.15rem}
    .header-left{gap:.8rem}
    .header-right{gap:.6rem}
    .nav-link{font-size:.82rem}
    .search.open #searchInput{width:130px}
    .logo-full{display:none}
    .logo-short{display:inline}

    .hero-slideshow{height:50vh;min-height:300px}
    .hero-slide{padding:0 5% 5vh}
    .hero-title{font-size:1.9rem}
    .hero-desc{font-size:.92rem;-webkit-line-clamp:3}
    .hero-actions{width:100%}
    .hero-actions .btn{flex:1;justify-content:center}

    .rows{margin-top:0}
    .row{margin:0 0 1rem}
    .row-title{font-size:1.05rem;margin:0 5% .5rem}
    .row-scroller{padding:4px 5% 14px;gap:.55rem}
    .card{width:46vw;max-width:210px}
    .row-top .card{width:72vw;max-width:300px}
    .card-seeall{width:46vw;max-width:210px}
    .row-top .card-seeall{width:72vw;max-width:300px}
    .row-top .row-title{font-size:1.15rem}
    .genre-filter{padding:.6rem 5%;gap:.45rem;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
    .genre-filter::-webkit-scrollbar{display:none}
    .chip{font-size:.8rem;padding:.35rem .8rem}
    .page-body{padding:1.2rem 5% 3rem}
    .page-body.no-hero{padding-top:calc(var(--header-h) + 1.2rem)}
    .category-title{font-size:1.4rem}
    .page-hero{min-height:38vh;padding:0 5% 4vh}
    .page-hero .category-title{font-size:1.8rem}
    .ch-sub{font-size:.9rem}
    .nav-fav-text{display:none}
    .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem}
    .card-cap-title{font-size:.85rem}
    /* su mobile la miniatura non si ingrandisce; play e + restano nella card sotto */
    .thumb-play{display:none}

    .modal{padding:0}
    .modal-box{border-radius:0;min-height:100vh}
    .modal-hero{height:230px}
    .modal-body{padding:1rem 1.2rem 2rem;margin-top:-50px}
    .modal-body h2{font-size:1.4rem}

    .auth-card{padding:1.8rem 1.4rem}
    .grid-2{grid-template-columns:1fr}
    .admin-head h1{font-size:1.3rem}

    .watch-info h1{font-size:1.4rem}

    /* Player proporzionato su mobile: niente piu' altezza a tutto schermo che
       lascia bande nere e spinge la descrizione molto in basso. Il video sta in
       cima a 16:9, la scheda info subito sotto. */
    .player-wrap{min-height:0;display:block;padding:calc(var(--header-h) + env(safe-area-inset-top) + 56px) 0 0}
    #player{aspect-ratio:16/9;height:auto;max-height:none}
    .watch-info{padding-top:1.1rem}

    /* niente barra di scorrimento verticale visibile su mobile */
    html,body{scrollbar-width:none;-ms-overflow-style:none}
    ::-webkit-scrollbar{width:0;height:0;display:none}

    /* tabella admin -> a "schede" su mobile */
    .admin-table thead{display:none}
    .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
    .admin-table tr{border:1px solid #2c2c2c;border-radius:8px;margin-bottom:1rem;padding:.6rem;background:var(--bg-2)}
    .admin-table td{border:none;padding:.35rem .2rem;display:flex;justify-content:space-between;gap:1rem}
    .admin-table td[data-label]::before{content:attr(data-label);color:var(--text-dim);font-weight:600}
    .admin-table td.thumb{justify-content:flex-start}
    .admin-table td.mono{max-width:none;white-space:normal;word-break:break-all;text-align:right}
    .admin-table td.actions{justify-content:flex-end}
}

/* schermi molto piccoli (iPhone SE ecc.) */
@media (max-width:380px){
    .hero-title{font-size:1.6rem}
    .card{width:44vw}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
    margin-top:0;padding:.9rem 4%;
    background:rgba(255,255,255,.05);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    backdrop-filter:blur(12px) saturate(140%);
    border-top:1px solid rgba(255,255,255,.10);
    color:#cfcfe0;font-size:.82rem;text-align:center;letter-spacing:.3px;
}
/* footer sempre in fondo: se il contenuto è poco, resta attaccato al bordo basso */
body.home, body.sub{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body.home > main, body.sub > main{flex:1 0 auto}
body.home > .site-footer, body.sub > .site-footer{flex-shrink:0}
.site-footer a{color:#e3d4ff}
.site-footer a:hover{color:#fff}
@media (max-width:640px){
    .site-footer{padding:.8rem 5%;font-size:.78rem}
}

/* ============================================================
   PWA — banner di installazione
   ============================================================ */
.pwa-banner{
    position:fixed;left:50%;transform:translateX(-50%) translateY(140%);
    bottom:calc(env(safe-area-inset-bottom) + 16px);z-index:9998;
    width:min(560px,calc(100% - 28px));
    display:flex;align-items:center;gap:.8rem;
    padding:.7rem .8rem;border-radius:14px;
    background:rgba(22,22,26,.92);border:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 40px rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.pwa-banner.show{transform:translateX(-50%) translateY(0)}
.pwa-ico{width:46px;height:46px;border-radius:11px;flex:0 0 auto}
.pwa-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pwa-txt strong{color:#fff;font-size:.98rem}
.pwa-txt span{color:var(--text-dim);font-size:.82rem}
.pwa-txt b{color:#fff;font-weight:600}
.pwa-install{
    flex:0 0 auto;border:none;cursor:pointer;
    background:var(--red);color:#fff;font-weight:700;
    padding:.55rem 1rem;border-radius:8px;font-size:.9rem;
}
.pwa-install:hover{background:#c40812}
.pwa-close{
    flex:0 0 auto;border:none;background:transparent;color:var(--text-dim);
    font-size:1.5rem;line-height:1;cursor:pointer;padding:.1rem .4rem;
}
.pwa-close:hover{color:#fff}
@media (max-width:480px){
    .pwa-txt span{font-size:.78rem}
    .pwa-install{padding:.5rem .8rem}
}