/* FilmFrei24 2026 — shared cinematic UI layer */
:root{
  --ff-bg:#07090d;--ff-bg-2:#0b0e14;--ff-panel:#10141c;--ff-panel-2:#151a24;
  --ff-text:#f7f8fb;--ff-muted:#949baa;--ff-line:rgba(255,255,255,.09);
  --ff-brand:#ff4d67;--ff-brand-2:#ff8a5c;--ff-good:#42d392;
  --ff-shadow:0 22px 70px rgba(0,0,0,.48);--ff-radius:18px;
  --bg:var(--ff-bg)!important;--accent:var(--ff-brand)!important;
  --accent-mid:#ff6678!important;--accent-bright:var(--ff-brand-2)!important;
  --text:var(--ff-text)!important;--text-sec:var(--ff-muted)!important;
  --border:var(--ff-line)!important;--border-mid:rgba(255,255,255,.15)!important;
  --ff-safe-top:env(safe-area-inset-top,0px);
  --ff-safe-bottom:env(safe-area-inset-bottom,0px);
}
html{background:var(--ff-bg);color-scheme:dark;scrollbar-color:#3b414d transparent}
body{background:var(--ff-bg)!important;color:var(--ff-text)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;letter-spacing:-.012em}
body::before{background:radial-gradient(900px 520px at 82% -5%,rgba(255,77,103,.10),transparent 68%),radial-gradient(800px 600px at 0 38%,rgba(76,99,255,.06),transparent 70%)!important}
::selection{background:rgba(255,77,103,.32);color:#fff}
:focus-visible{outline:2px solid var(--ff-brand)!important;outline-offset:3px}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button,a{transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
input,textarea,select{background:#0b0e14!important;color:#fff!important;border:1px solid var(--ff-line)!important;border-radius:12px!important}
input:focus,textarea:focus,select:focus{border-color:rgba(255,77,103,.65)!important;box-shadow:0 0 0 4px rgba(255,77,103,.10)!important;outline:none}

/* Primary top navigation */
.navbar{height:72px!important;padding:0 clamp(16px,3vw,44px)!important;background:linear-gradient(180deg,rgba(7,9,13,.98),rgba(7,9,13,.76))!important;border-bottom:1px solid rgba(255,255,255,.055)!important;backdrop-filter:blur(24px) saturate(140%)!important}
.navbar.scrolled{background:rgba(7,9,13,.95)!important;box-shadow:0 10px 35px rgba(0,0,0,.3)!important}
.nav-logo{font-size:1.34rem!important;letter-spacing:-.055em!important}
.nav-logo .logo-icon{filter:hue-rotate(295deg) saturate(1.35)}
.nav-logo .logo-text{background:linear-gradient(110deg,#fff 18%,#c9ced8 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
.nav-logo .badge{background:var(--ff-brand)!important;border:0!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-radius:999px!important;padding:4px 7px!important}

/* Hero */
.hero{margin-top:72px!important;background:#0b0d12!important;box-shadow:var(--ff-shadow)!important}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,6,9,.9) 0%,rgba(4,6,9,.46) 39%,transparent 70%),linear-gradient(0deg,rgba(7,9,13,.88),transparent 42%);z-index:1}
.hero-content,.hero-dots,.hero-controls{z-index:3!important}
.hero-title{letter-spacing:-.055em!important;line-height:.96!important;text-wrap:balance}
.hero-description{color:#c8cbd2!important;line-height:1.58!important;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero-btn,.btn-primary,.primary-btn,.submit-btn,.play-btn,.watch-btn,.search-btn{background:linear-gradient(135deg,var(--ff-brand),#f33f58)!important;color:#fff!important;border:0!important;box-shadow:0 10px 30px rgba(255,77,103,.22)!important;font-weight:750!important}
.hero-btn:hover,.btn-primary:hover,.primary-btn:hover,.submit-btn:hover,.play-btn:hover,.watch-btn:hover,.search-btn:hover{transform:translateY(-2px)!important;box-shadow:0 15px 38px rgba(255,77,103,.33)!important}

/* Film cards and content areas */
.content,.main,.main-content,.page,.page-wrap,.container{position:relative}
.section-title,h1,h2{letter-spacing:-.04em;text-wrap:balance}
.section-title::before{content:"";display:inline-block;width:4px;height:.82em;margin-right:10px;border-radius:8px;background:linear-gradient(var(--ff-brand),var(--ff-brand-2));vertical-align:-.02em}
.movie-card,.film-card,.card,.series-card,.wish-card,.ticket-card,.account-card,.setting-card,.panel,.box{background:linear-gradient(145deg,rgba(21,26,36,.94),rgba(12,15,21,.96))!important;border:1px solid var(--ff-line)!important;box-shadow:0 12px 32px rgba(0,0,0,.22)!important}
.movie-card:hover,.film-card:hover,.card:hover,.series-card:hover,.wish-card:hover{border-color:rgba(255,255,255,.21)!important;transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.42)!important}
.card-img,.movie-card img,.film-card img,.series-card img{background:#11151d;object-fit:cover}
.card-img-wrap>.bald-badge{z-index:20!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:20px;line-height:1!important;pointer-events:none!important;box-shadow:0 4px 12px rgba(0,0,0,.4)!important}
.card-img-wrap>.ff-status-badge{color:#fbbf24!important;border:1px solid rgba(251,191,36,.34)!important;background:rgba(9,9,11,.88)!important}
.card-img-wrap>.ff-language-badge{color:#93c5fd!important;border:1px solid rgba(96,165,250,.34)!important;background:rgba(9,9,11,.88)!important}
.card-title,.movie-title,.film-title{color:#f7f8fb!important;font-weight:750!important;letter-spacing:-.025em}
.card-meta,.meta,.subtitle,.muted{color:var(--ff-muted)!important}
.badge,.tag,.chip,.pill{border-color:rgba(255,255,255,.1)!important}
.available,.status-ready,.live{color:var(--ff-good)!important}

/* Dialogs and overlays */
.modal,.modal-content,.dialog,.popover,.search-panel,.search-overlay-content{background:rgba(15,19,27,.96)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 30px 100px rgba(0,0,0,.7)!important;backdrop-filter:blur(28px) saturate(135%)}
.overlay,.modal-overlay,.search-overlay{backdrop-filter:blur(10px);background:rgba(2,3,5,.76)!important}

/* Shared adaptive navigation */
.ff24-bottom-nav{background:rgba(8,10,14,.91)!important;border-color:rgba(255,255,255,.09)!important;backdrop-filter:blur(28px) saturate(145%)!important;-webkit-backdrop-filter:blur(28px) saturate(145%)!important}
.ff24-bnav-btn{color:#777f8e!important;font-weight:650!important;letter-spacing:-.01em}
.ff24-bnav-btn:hover{color:#fff!important;background:rgba(255,255,255,.045)}
.ff24-bnav-btn.active{color:#fff!important}
.ff24-bnav-btn.active::before{content:"";position:absolute;background:linear-gradient(90deg,var(--ff-brand),var(--ff-brand-2));box-shadow:0 0 18px rgba(255,77,103,.45)}
.ff24-bnav-badge{background:var(--ff-brand)!important;border-color:#080a0e!important}

@media(min-width:1100px){
  body{padding-bottom:0!important;padding-left:88px!important}
  .navbar{left:88px!important}
  .ff24-bottom-nav{top:0!important;bottom:0!important;right:auto!important;width:88px!important;height:100vh!important;grid-template-columns:1fr!important;grid-template-rows:repeat(6,minmax(70px,92px)) 1fr!important;align-content:center!important;border-top:0!important;border-right:1px solid rgba(255,255,255,.08)!important;padding:72px 8px 18px!important;animation:none!important}
  .ff24-bottom-nav::before{content:"F";position:absolute;top:18px;left:22px;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,var(--ff-brand),var(--ff-brand-2));color:#fff;font-size:1.35rem;font-weight:900;box-shadow:0 12px 30px rgba(255,77,103,.25)}
  .ff24-bnav-btn{gap:7px!important;border-radius:14px!important;padding:10px 4px!important;font-size:.65rem!important}
  .ff24-bnav-btn svg{width:23px!important;height:23px!important}
  .ff24-bnav-btn.active{background:rgba(255,77,103,.11)!important;color:#fff!important}
  .ff24-bnav-btn.active::before{left:-8px;top:24%;width:3px;height:52%;border-radius:0 4px 4px 0}
  .ff24-bnav-badge{top:12px!important;right:14px!important}
}
@media(max-width:1099px){
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}
  .ff24-bottom-nav{height:calc(70px + env(safe-area-inset-bottom,0px))!important;padding:0 6px!important}
  .ff24-bnav-btn{border-radius:12px 12px 0 0!important;font-size:.58rem!important;gap:4px!important}
  .ff24-bnav-btn svg{width:21px!important;height:21px!important}
  .ff24-bnav-btn.active::before{top:0;left:25%;width:50%;height:3px;border-radius:0 0 4px 4px}
}
@media(max-width:640px){
  .navbar{height:60px!important;padding:0 14px!important;gap:12px!important}.hero{margin-top:60px!important}
  .ff24-bottom-nav{grid-template-columns:repeat(7,minmax(0,1fr))!important}
  .ff24-bnav-btn{font-size:0!important}.ff24-bnav-btn svg{width:23px!important;height:23px!important}
  .ff24-bnav-btn.active svg{filter:drop-shadow(0 0 8px rgba(255,77,103,.5))}
  .section-title::before{width:3px;margin-right:8px}
  .movie-card:hover,.film-card:hover,.card:hover,.series-card:hover,.wish-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@media(prefers-contrast:more){:root{--ff-muted:#c4c8d0;--ff-line:rgba(255,255,255,.24)}.ff24-bnav-btn{color:#b5bbc7!important}}

/* ──────────────────────────────────────────────────────────────────────────
   FilmFrei24 CINEMA MODE — familiar premium streaming layout
   ────────────────────────────────────────────────────────────────────────── */
:root{
  --ff-bg:#141414;--ff-bg-2:#181818;--ff-panel:#181818;--ff-panel-2:#242424;
  --ff-brand:#7c3aed;--ff-brand-2:#a855f7;--ff-text:#fff;--ff-muted:#b3b3b3;
  --ff-line:rgba(255,255,255,.14);--ff-radius:6px;
  --bg:#141414!important;--accent:#7c3aed!important;--accent-mid:#8b5cf6!important;
  --accent-bright:#a855f7!important;--text:#fff!important;--text-sec:#b3b3b3!important;
}

@view-transition{navigation:auto}
::view-transition-old(root){animation:ff-page-out .16s ease both}
::view-transition-new(root){animation:ff-page-in .28s ease both}
@keyframes ff-page-out{to{opacity:.82;filter:brightness(.82)}}
@keyframes ff-page-in{from{opacity:.01;filter:brightness(.72)}to{opacity:1;filter:brightness(1)}}
body.ff-page-leaving{pointer-events:none!important}
body.ff-page-leaving>*{animation:ff-legacy-page-out .14s ease both!important}
body.ff-page-entering>*{animation:ff-legacy-page-in .22s ease both!important}
@keyframes ff-legacy-page-out{to{opacity:.18;transform:translateY(-3px)}}
@keyframes ff-legacy-page-in{from{opacity:.08;transform:translateY(5px)}to{opacity:1;transform:none}}
html,body{background:#141414!important}
html,body,*{scrollbar-width:none!important;-ms-overflow-style:none!important}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
body{opacity:1!important;background-image:none!important;animation:none!important}
body::before{display:none!important}

/* Native cursors are intentionally retained for maximum device compatibility. */
html,body{cursor:auto!important}
a,button,[role="button"],.card,.movie-card,.film-card,.series-card,label,select,input[type="range"]{cursor:pointer!important}
input,textarea{cursor:text!important}
.vwrap.cursor-hidden,.vwrap.cursor-hidden *{cursor:none!important}

/* Public actions update in place; redundant floating success messages stay hidden. */
#ff24-toast,#toast,#share-toast{display:none!important}

/* Netflix-style top bar: brand left, pages in the center, utilities right. */
.navbar{height:68px!important;left:0!important;padding:0 clamp(20px,4vw,64px)!important;background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.5),transparent)!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;animation:none!important}
.navbar.scrolled{background:#141414!important;box-shadow:0 2px 12px rgba(0,0,0,.35)!important}
.nav-logo{font-size:1.55rem!important;font-weight:900!important;letter-spacing:-.065em!important}
.nav-logo .logo-icon{display:none!important}
.nav-logo .logo-text{background:none!important;color:var(--ff-brand-2)!important;-webkit-text-fill-color:var(--ff-brand-2)!important;text-transform:uppercase;text-shadow:0 0 24px rgba(124,58,237,.25)}
.nav-logo .badge{display:none!important}

@media(min-width:1100px){
  body{padding-left:0!important;padding-bottom:0!important}
  .ff24-bottom-nav{top:0!important;left:235px!important;right:auto!important;bottom:auto!important;width:min(570px,48vw)!important;height:68px!important;display:flex!important;align-items:center!important;gap:1px!important;padding:0!important;border:0!important;background:transparent!important;backdrop-filter:none!important;animation:none!important;z-index:1200!important}
  .ff24-bottom-nav::before{display:none!important}
  .ff24-bnav-btn{height:68px!important;min-width:auto!important;flex:0 1 auto!important;flex-direction:row!important;padding:0 clamp(8px,1vw,14px)!important;border-radius:0!important;background:transparent!important;color:#d5d5d5!important;font-size:.84rem!important;font-weight:500!important;white-space:nowrap}
  .ff24-bnav-btn svg{display:none!important}
  .ff24-bnav-btn:hover{color:#aaa!important;background:transparent!important}
  .ff24-bnav-btn.active{color:#fff!important;background:transparent!important;font-weight:700!important}
  .ff24-bnav-btn.active::before{display:none!important}
  .ff24-bnav-badge{top:14px!important;right:4px!important}
}

/* Start page: full-bleed 16:9 billboard and overlapping content rows. */
.ff-home-page .hero{width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;aspect-ratio:16/9!important;margin:0!important;border-radius:0!important;box-shadow:none!important;background:#000!important}
.ff-home-page .hero::after{background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.46) 39%,transparent 67%),linear-gradient(0deg,#141414 0%,transparent 28%,rgba(0,0,0,.06) 72%)!important}
.ff-home-page .hero-img{animation:none!important;filter:saturate(.94) contrast(1.03)}
.ff-home-page .hero-content{left:clamp(24px,5vw,74px)!important;bottom:12%!important;max-width:min(42vw,620px)!important;min-width:0}
.ff-home-page .hero-brand-slot{position:relative;display:flex;align-items:flex-end;width:34vw;max-width:100%;height:clamp(74px,9vw,136px);margin-bottom:18px;padding:clamp(4px,.45vw,8px) clamp(5px,.55vw,10px);box-sizing:border-box;overflow:visible}
.ff-home-page .hero-logo{position:static;display:block;flex:0 1 auto;min-width:0;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;margin:0!important;object-fit:contain!important;object-position:left bottom;filter:drop-shadow(0 2px 20px rgba(0,0,0,.9))}
.ff-home-page .hero-logo:not(.ff-logo-ready){visibility:hidden!important}
.ff-home-page .hero-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0!important;font-size:clamp(2.4rem,5vw,5.6rem)!important;font-weight:900!important;line-height:.92!important;text-shadow:0 3px 18px #000}
.ff-home-page .ff-logo-fallback{display:none!important}
.ff-home-page .ff-logo-fallback.is-visible{position:static;display:-webkit-box!important;max-width:100%}
.ff-home-page .hero-slide.active .hero-logo,
.ff-home-page .hero-slide.active .hero-title,
.ff-home-page .hero-slide.active .hero-meta,
.ff-home-page .hero-slide.active .hero-desc,
.ff-home-page .hero-slide.active .hero-btns,
.ff-home-page .hero-slide.active [style*="BALD"]{animation:none!important}
.ff-home-page .hero-meta{font-size:clamp(.74rem,1vw,.98rem)!important;color:#fff!important;font-weight:650!important}
.ff-home-page .hero-desc{max-width:570px!important;font-size:clamp(.86rem,1.2vw,1.15rem)!important;color:#fff!important;line-height:1.45!important;text-shadow:0 2px 6px #000!important}
.ff-home-page .btn-play{padding:11px 28px!important;border-radius:4px!important;background:#fff!important;color:#000!important;box-shadow:none!important;font-weight:750!important}
.ff-home-page .btn-play:hover{background:rgba(255,255,255,.76)!important;transform:none!important}
.ff-home-page .hero-dots{display:none!important}
.ff-home-page .hero-dot{height:3px!important;border-radius:0!important;background:rgba(255,255,255,.38)!important}
.ff-home-page .hero-dot.active{background:#fff!important}
@media(min-width:701px){
  .ff-home-page .hero{width:min(100%,calc((100svh - 56px)*16/9))!important;max-width:100%!important;margin:0 auto!important;border-left:1px solid rgba(255,255,255,.08)!important;border-right:1px solid rgba(255,255,255,.08)!important;box-shadow:0 0 70px rgba(0,0,0,.5)!important}
}
/* Normal laptop/desktop displays: the billboard ends exactly at the lower
   viewport edge. Ultra-wide screens keep the centered 16:9 presentation. */
@media(min-width:701px) and (min-aspect-ratio:4/3) and (max-aspect-ratio:2/1){
  .ff-home-page .hero{
    width:100%!important;max-width:none!important;
    height:calc(100svh / .85)!important;max-height:none!important;
    aspect-ratio:auto!important;margin:0!important;
    border-left:0!important;border-right:0!important;
  }
}
.ff-home-page .content{z-index:4;max-width:none!important;margin:clamp(-110px,-7vw,-36px) 0 0!important;padding:0 0 70px!important;overflow:hidden}
.ff-home-page .section{margin:0 0 clamp(22px,3vw,46px)!important;padding-left:clamp(14px,4vw,60px)!important}
.ff-home-page .ff-signup-callout{padding-right:clamp(14px,4vw,60px)!important}
.ff-home-page .section-header{margin:0 0 10px!important;padding-right:clamp(14px,4vw,60px)!important}
.ff-home-page .section-title{border:0!important;padding:0!important;font-size:clamp(1.05rem,1.55vw,1.45rem)!important;font-weight:700!important;letter-spacing:-.025em!important}
.ff-home-page .section-title::before{display:none!important}
.ff-home-page .section-count{color:#808080!important;font-size:.75rem!important}
.ff-home-page .row-scroll{gap:6px!important;padding:12px clamp(14px,4vw,60px) 24px 0!important;scroll-padding-left:0!important;overflow-y:visible!important}
.ff-home-page .row-scroll .card{width:clamp(220px,22vw,330px)!important;background:#181818!important;border:0!important;border-radius:4px!important;box-shadow:none!important;overflow:visible!important;will-change:transform}
.ff-home-page .card-img-wrap{border-radius:4px!important;overflow:hidden!important;background:#222!important}
.ff-home-page .card-overlay{background:linear-gradient(0deg,rgba(0,0,0,.82),transparent 48%)!important}
.ff-home-page .card-logo-wrap{z-index:4!important;min-height:46px!important;padding:9px 11px!important;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.38) 62%,transparent)!important}
.ff-home-page .card-logo{position:relative;z-index:5;max-width:88%!important;max-height:40px!important;filter:drop-shadow(0 2px 6px #000) drop-shadow(0 0 1px rgba(255,255,255,.2))!important}
.ff-home-page .card-title-fallback{z-index:5!important;text-shadow:0 2px 5px #000}
.ff-home-page .card-progress-fill{background:var(--ff-brand)!important}
.ff-home-page .row-nav-btn{height:calc(100% - 36px)!important;top:calc(50% - 6px)!important;width:48px!important;border:0!important;border-radius:0!important;background:rgba(0,0,0,.66)!important;box-shadow:none!important}
.ff-home-page .row-nav-btn.btn-prev{left:0!important}.ff-home-page .row-nav-btn.btn-next{right:0!important}
@media(hover:hover){
  .ff-home-page .row-scroll .card:hover{z-index:60!important;transform:scale(1.1)!important;box-shadow:0 18px 42px rgba(0,0,0,.62)!important;border:0!important;transition-delay:.22s!important}
  .ff-home-page .row-scroll .card:hover .card-img{filter:brightness(1.05)!important}
}
.ff-home-page .nf-row-arrow{z-index:120!important;filter:drop-shadow(0 8px 18px rgba(0,0,0,.7))!important}
.ff-home-page .nf-row-arrow:not(.nf-hidden){opacity:1!important;pointer-events:auto!important}
.ff-home-page .nf-row-arrow.nf-hidden{opacity:0!important;pointer-events:none!important}
.ff-home-page .nf-row-arrow .nfa-circle{background:rgba(24,24,24,.96)!important;border:1.5px solid rgba(255,255,255,.72)!important;box-shadow:0 4px 18px rgba(0,0,0,.72)!important}
.ff-home-page .nf-row-arrow:hover .nfa-circle{background:var(--ff-brand)!important;border-color:#fff!important}
.ff-home-page .nf-row-wrap{width:100%!important;margin:0!important;padding:0!important}
.ff-home-page .nf-row-wrap .row-scroll{padding-left:16px!important;padding-right:16px!important;scroll-padding-left:16px!important;scroll-padding-right:16px!important}
.ff-home-page .nf-row-arrow--l{left:10px!important}
.ff-home-page .nf-row-arrow--r{right:10px!important}
.ff-home-page .row-nav-btn{display:none!important}
.ff-home-page .row-scroll .card,.ff-home-page .grid-all .card{transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s ease,filter .3s ease!important;transform-origin:center center}
.ff-home-page .row-scroll .card:hover,.ff-home-page .grid-all .card:hover{transform:scale(1.055) translateZ(0)!important;z-index:40!important;box-shadow:0 16px 38px rgba(0,0,0,.58),0 0 0 1px rgba(168,85,247,.38)!important}
@media(hover:hover) and (pointer:fine){
  .ff-home-page .nf-row-arrow:not(.nf-hidden){opacity:0!important;pointer-events:none!important}
  .ff-home-page .section:hover .nf-row-arrow:not(.nf-hidden),
  .ff-home-page .nf-row-wrap:hover .nf-row-arrow:not(.nf-hidden){opacity:1!important;pointer-events:auto!important}
}
@media(max-width:1099px),(hover:none),(pointer:coarse){
  .ff-home-page .nf-row-arrow,
  .ff-home-page .row-nav-btn{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}
}

/* Remove the old promotional-card look from content pages. */
.movie-card,.film-card,.card,.series-card,.wish-card,.ticket-card,.account-card,.setting-card,.panel,.box{background:#181818!important;border-color:rgba(255,255,255,.1)!important;box-shadow:none!important}
.section-title::before{display:none!important}
.section-title{border-left:0!important;padding-left:0!important}
.genre,.chip,.pill,.tag{background:#2a2a2a!important;border:1px solid #454545!important;color:#e5e5e5!important}
.modal,.modal-content,.dialog,.popover,.search-panel,.search-overlay-content{background:#181818!important;border-color:#333!important;border-radius:6px!important;box-shadow:0 22px 70px rgba(0,0,0,.78)!important}
.hero-btn,.btn-primary,.primary-btn,.submit-btn,.search-btn{border-radius:4px!important;background:var(--ff-brand)!important;box-shadow:none!important}
.hero-btn:hover,.btn-primary:hover,.primary-btn:hover,.submit-btn:hover,.search-btn:hover{background:#6d28d9!important;transform:none!important;box-shadow:none!important}

/* Movie and series details: artwork as the stage, metadata as clean overlay. */
.ff-detail-page{background:#141414!important}
.ff-detail-page .navbar{background:#141414!important;border-bottom:1px solid #303030!important}
.ff-detail-page .nav-logo{background:none!important;color:var(--ff-brand-2)!important;-webkit-text-fill-color:var(--ff-brand-2)!important}
.ff-detail-page .hero{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:16/7!important;margin:0!important;background:#000!important}
.ff-detail-page .hero-grad{background:linear-gradient(90deg,rgba(0,0,0,.72),transparent 62%),linear-gradient(0deg,#141414 0%,transparent 48%)!important}
.ff-detail-page .info{width:min(92%,1440px)!important;margin:-15vw auto 0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
.ff-detail-page .info::before,.ff-detail-page .info::after{display:none!important}
.ff-detail-page .info-grid{grid-template-columns:minmax(0,1fr) clamp(130px,16vw,220px)!important;gap:clamp(24px,5vw,80px)!important;padding:0!important;align-items:end!important}
.ff-detail-page .info-grid>div:first-child{order:1!important;padding:0!important;max-width:760px}
.ff-detail-page .info-poster{order:2!important}
.ff-detail-page .info-poster img{width:100%!important;border-radius:5px!important;box-shadow:0 16px 44px rgba(0,0,0,.62)!important}
.ff-detail-page .film-logo{max-width:min(38vw,430px)!important;max-height:125px!important}
.ff-detail-page .film-desc{font-size:clamp(.9rem,1.2vw,1.08rem)!important;color:#dedede!important;line-height:1.55!important}
.ff-detail-page .meta span{background:#2a2a2a!important;border:1px solid #424242!important;color:#ddd!important}
.ff-detail-page .genre{background:rgba(124,58,237,.18)!important;border-color:rgba(168,85,247,.45)!important;color:#ddd!important}
.ff-detail-page .btn-play{border-radius:4px!important;background:#fff!important;color:#000!important;box-shadow:none!important}
.ff-detail-page .btn-play:hover{background:#dcdcdc!important;transform:none!important}
.ff-detail-page .cast-section{width:min(92%,1440px)!important;margin:42px auto 70px!important}

/* Player: uninterrupted black cinema, controls on the image, clean details below. */
.ff-player-page{--bg:#141414!important;--acc:#a855f7!important;--acc2:#7c3aed!important;--text:#fff!important;--sec:#b3b3b3!important;--border:rgba(255,255,255,.12)!important;padding:0!important;background:#141414!important;background-image:none!important}
.ff-player-page .ff24-bottom-nav{display:none!important}
.ff-player-page .nav{height:64px!important;background:linear-gradient(180deg,rgba(0,0,0,.98),rgba(10,10,10,.9))!important;border-bottom:1px solid rgba(255,255,255,.08)!important;backdrop-filter:blur(18px) saturate(130%)!important;padding:0 clamp(16px,3vw,46px)!important;display:grid!important;grid-template-columns:minmax(96px,1fr) minmax(0,auto) minmax(96px,1fr)!important;align-items:center!important;gap:12px!important}
.ff-player-page .nav-back{justify-self:start!important}.ff-player-page .nav>div{justify-self:center!important;min-width:0!important}.ff-player-page .report-nav-btn{justify-self:end!important}
.ff-player-page .nav-back,.ff-player-page .report-nav-btn{color:#fff!important;background:rgba(20,20,20,.62)!important;border:0!important;border-radius:4px!important;padding:8px 12px!important}
.ff-player-page .vwrap{width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;aspect-ratio:16/9!important;margin:0!important;border-radius:0!important;box-shadow:none!important;background:#000!important}
.ff-player-page #vid{opacity:1;transition:opacity .16s ease}
.ff-player-page .vwrap:not(.has-started) #vid{opacity:0}
.ff-player-page .pui-bot{padding:clamp(10px,1.8vw,18px) clamp(14px,3vw,44px) clamp(14px,2.4vw,30px)!important;background:linear-gradient(transparent,rgba(0,0,0,.9))!important}
.ff-player-page .pui{justify-content:space-between!important}
.ff-player-page .pui-top{height:auto!important;min-height:60px!important;display:flex!important;align-items:flex-start!important;justify-content:flex-end!important;padding:clamp(10px,1.6vw,18px)!important;pointer-events:none!important;background:linear-gradient(180deg,rgba(0,0,0,.58),transparent)!important}
.ff-player-page .pui-device-controls{display:flex;align-items:center;gap:8px;pointer-events:auto}
.ff-player-page .device-playback-btn{width:42px;height:42px;padding:9px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:rgba(20,20,20,.72);border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 8px 22px rgba(0,0,0,.45);backdrop-filter:blur(12px);cursor:pointer;transition:background .18s ease,transform .18s ease,border-color .18s ease}
.ff-player-page .device-playback-btn[hidden]{display:none!important}
.ff-player-page .device-playback-btn:hover,.ff-player-page .device-playback-btn.is-active{background:var(--ff-brand)!important;border-color:#fff!important;transform:scale(1.08)}
.ff-player-page .device-playback-btn svg{width:100%;height:100%;display:block}
.ff-player-page google-cast-launcher{--connected-color:#a855f7;--disconnected-color:#fff}
.ff-player-page .prog-track{height:5px!important;border-radius:999px!important;background:rgba(255,255,255,.32)!important}
.ff-player-page #prog-fill{background:linear-gradient(90deg,var(--ff-brand),var(--ff-brand-2))!important;border-radius:999px!important}
.ff-player-page #prog-thumb{width:15px!important;height:15px!important;background:var(--ff-brand-2)!important;border:2px solid #fff!important}
.ff-player-page .ctrl-btn{width:42px!important;height:42px!important;border-radius:50%!important;background:rgba(20,20,20,.34)!important;transition:transform .18s ease,background .18s ease!important}
.ff-player-page .ctrl-btn:hover{background:rgba(255,255,255,.16)!important;transform:scale(1.08)!important}
.ff-player-page .ctrl-btn svg{width:25px!important;height:25px!important}
.ff-player-page #qs-btn{background:rgba(20,20,20,.54)!important;border:1px solid rgba(255,255,255,.72)!important;color:#fff!important;border-radius:6px!important}
.ff-player-page #spin .s{border-color:rgba(255,255,255,.28)!important;border-top-color:var(--ff-brand)!important;width:54px!important;height:54px!important}
.ff-player-page #unmute-banner{border:0!important;border-radius:4px!important;background:rgba(20,20,20,.88)!important}
.ff-player-page .prm-bar{border-radius:12px!important;box-shadow:none!important;margin:14px auto 0!important;background:#181818!important}
.ff-player-page .prm-inner{background:linear-gradient(100deg,#181818,#202020)!important;border-color:#303030!important}
.ff-player-page .info{background:linear-gradient(145deg,#1d1d1d,#171717)!important;border-color:#303030!important;border-radius:16px!important;box-shadow:0 20px 55px rgba(0,0,0,.3)!important}
.ff-player-page .info::before{filter:blur(45px) brightness(.12) grayscale(.25)!important}
.ff-player-page .genre{color:#f1f1f1!important;background:#2b2b2b!important;border-color:#444!important}
.ff-player-page .meta span{color:#d5d5d5!important;background:#262626!important;border-color:#3a3a3a!important}
.ff-player-page .film-desc{color:#c7c7c7!important}
.ff-player-page .film-tagline{color:#a9a9a9!important;border-left-color:var(--ff-brand)!important}
.ff-player-page .share-btn{color:#fff!important;background:#292929!important;border-color:#444!important;border-radius:8px!important}
.ff-player-page .share-btn:hover{background:#383838!important;border-color:#666!important}
.ff-player-page .tmdb-rating-row{background:#222!important;border-color:#3b3b3b!important}
.ff-player-page #cast-section{width:min(calc(100% - 24px),1440px)!important;max-width:1440px!important;padding:18px!important;background:#181818!important;border:1px solid #2e2e2e!important;border-radius:16px!important}
.ff-player-page #cast-fab{display:none!important}
.ff-player-page .cast-img,.ff-player-page .cast-no-img{border-color:#3b3b3b!important;background:#242424!important}
.ff-player-page .cast-nav-btn{display:flex!important;left:auto!important;background:rgba(20,20,20,.86)!important;border-color:rgba(255,255,255,.2)!important}
.ff-player-page .cast-nav-btn.btn-prev{left:8px!important}
.ff-player-page .cast-nav-btn.btn-next{right:8px!important}
.ff-player-page .rmodal{background:#181818!important;border-color:#3a3a3a!important;border-radius:6px!important}

/* Mobile app treatment */
@media(max-width:1099px){
  .ff24-bottom-nav{left:0!important;right:0!important;width:100%!important;max-width:none!important;margin:0 auto!important;height:calc(64px + var(--ff-safe-bottom))!important;box-sizing:border-box!important;background:rgba(20,20,20,.96)!important;border-top:1px solid #333!important;padding:0 4px var(--ff-safe-bottom)!important;grid-template-rows:64px!important;align-content:start!important;align-items:stretch!important;animation:none!important}
  .ff24-bnav-btn{height:64px!important;min-width:0!important;padding:0!important;align-items:center!important;justify-content:center!important;text-align:center!important;font-size:.56rem!important;line-height:1!important;color:#9b9b9b!important;gap:4px!important}
  .ff24-bnav-btn.active{color:#fff!important;background:transparent!important}
  .ff24-bnav-btn.active::before{background:var(--ff-brand)!important}
  .ff24-bnav-btn svg{width:21px!important;height:21px!important;margin:0 auto!important;transform:none!important}
}
@media(max-width:700px){
  .navbar{height:calc(56px + var(--ff-safe-top))!important;padding:var(--ff-safe-top) 14px 0!important;box-sizing:border-box!important;align-items:center!important;background:linear-gradient(#050505,transparent)!important}
  .nav-logo{font-size:1.12rem!important}.navbar #statusBtn,.navbar #spendBtn{display:none!important}
  .ff-home-page .hero{margin:0!important;aspect-ratio:16/9!important;border-radius:0!important}
  .ff-home-page .hero::after{background:linear-gradient(90deg,rgba(0,0,0,.74),transparent 78%),linear-gradient(0deg,#141414,transparent 48%)!important}
  .ff-home-page .hero-content{left:14px!important;bottom:12%!important;max-width:68%!important;min-width:0}
  .ff-home-page .hero-brand-slot{width:55vw;max-width:100%;height:clamp(40px,13vw,58px);margin-bottom:7px;padding:3px 4px}
  .ff-home-page .hero-logo{max-width:100%!important;max-height:100%!important;margin:0!important}
  .ff-home-page .hero-title{font-size:clamp(1.25rem,7vw,2rem)!important}
  .ff-home-page .hero-meta{font-size:.62rem!important;gap:4px!important;margin-bottom:7px!important}
  .ff-home-page .hero-desc{display:none!important}
  .ff-home-page .btn-play{padding:7px 14px!important;font-size:.72rem!important;gap:5px!important}
  .ff-home-page .btn-play svg{width:14px!important;height:14px!important}
  .ff-home-page .hero-dots{display:none!important}
  .ff-home-page .content{margin:-3px 0 0!important;padding-bottom:35px!important}
  .ff-home-page .section{padding-left:12px!important;margin-bottom:21px!important}
  .ff-home-page .section-header{padding-right:12px!important;margin-bottom:3px!important}
  .ff-home-page .section-title{font-size:1rem!important}
  .ff-home-page .section-count{display:none!important}
  .ff-home-page .row-scroll{gap:5px!important;padding:8px 12px 10px 0!important}
  .ff-home-page .row-scroll .card{width:46vw!important;min-width:148px!important;max-width:205px!important}
  .ff-home-page .card-logo-wrap{min-height:42px!important;padding:7px 9px!important}
  .ff-home-page .card-logo{max-width:88%!important;max-height:34px!important}.ff-home-page .card-title-fallback{font-size:.7rem!important}
  .ff-detail-page .hero{aspect-ratio:16/9!important;min-height:0!important}
  .ff-detail-page .info{width:calc(100% - 28px)!important;margin:-35px auto 0!important}
  .ff-detail-page .info-grid{grid-template-columns:1fr!important;gap:16px!important;align-items:start!important}
  .ff-detail-page .info-poster{display:none!important}
  .ff-detail-page .film-logo{max-width:62vw!important;max-height:70px!important}
  .ff-detail-page .navbar{background:#141414!important}
  .ff-player-page .nav{height:calc(54px + var(--ff-safe-top))!important;padding:var(--ff-safe-top) 12px 0!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(64px,1fr) minmax(0,auto) minmax(64px,1fr)!important;align-items:center!important;gap:8px!important}
  .ff-player-page .nav-back{justify-self:start!important}.ff-player-page .nav>div{justify-self:center!important;min-width:0!important}.ff-player-page .report-nav-btn{justify-self:end!important}
  .ff-player-page .vwrap{margin:calc(54px + var(--ff-safe-top)) 0 0!important;aspect-ratio:16/9!important;border-radius:0!important}
  .ff-player-page .pui-bot{padding:7px 8px 9px!important}
  .ff-player-page .pui-top{min-height:48px!important;padding:8px!important}
  .ff-player-page .pui-device-controls{gap:6px}
  .ff-player-page .device-playback-btn{width:34px;height:34px;padding:7px}
  .ff-player-page .ctrl-btn{width:34px!important;height:34px!important;padding:6px!important}
  .ff-player-page .ctrl-btn svg{width:21px!important;height:21px!important}
  .ff-player-page #vol-slider,.ff-player-page .ctrl-title{display:none!important}
  .ff-player-page .time-txt{font-size:.66rem!important;padding:0 2px!important}
}

/* Stable media rendering: no dark-to-bright pulse, shimmer or delayed glow. */
.ff-home-page .hero{opacity:1!important;animation:none!important}
.ff-home-page .hero-img{opacity:1!important;transition:none!important;filter:none!important}
.ff-home-page .hero-img.ff-media-ready{opacity:1!important}
.ff-home-page .card-img-wrap,.ff-home-page .card-skeleton .card-img-wrap{background:#262626!important;animation:none!important}
.ff-home-page .card-img-wrap::before{
  content:'F';position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  color:#505050;font-size:clamp(1.3rem,3vw,2.2rem);font-weight:900;letter-spacing:-.08em;
  background:linear-gradient(135deg,#242424,#1c1c1c);
}
.ff-home-page .card-img-wrap.ff-loaded::before{display:none!important}
.ff-home-page .card-img-wrap::after{display:none!important;animation:none!important}
.ff-home-page .card-img{position:relative;z-index:1;opacity:1!important;filter:none!important;transition:none!important}
.ff-home-page .card:hover .card-img{filter:none!important;transition:none!important}
.ff-home-page .card-logo{opacity:1!important;transition:none!important;filter:drop-shadow(0 2px 5px rgba(0,0,0,.85))!important}
.ff-home-page .card-title-fallback{opacity:1!important;transition:none!important}
.ff-home-page .ff-card-logo-fallback{display:none!important}
.ff-home-page .ff-card-logo-fallback.is-visible{display:-webkit-box!important}
.ff-home-page .card.card-animate{opacity:1!important;animation:none!important}
.ff-home-page .conv-overlay{background:#181818!important}
.ff-home-page .conv-bar{background:var(--ff-brand)!important;transition:width .2s linear!important}
.ff-home-page .conv-label{color:#c4b5fd!important}
.ff-home-page .hero{background:linear-gradient(135deg,#211534,#101010 58%,#171717)!important}
@media(prefers-reduced-data:reduce){.ff-home-page .hero-img{transition:none!important}}

.ff-home-page .ff-signup-callout>div{
  background:rgba(24,24,24,.94)!important;border:1px solid #333!important;
  border-radius:8px!important;padding:16px 18px!important;gap:16px!important;box-shadow:0 12px 34px rgba(0,0,0,.42)!important;
}
.ff-home-page .ff-signup-callout p+div{display:none!important}
.ff-home-page .ff-signup-callout p{margin-bottom:10px!important;max-width:70rem!important}
.ff-home-page .ff-signup-callout>div>div:last-child svg{width:48px!important;height:48px!important}
.ff-home-page .ff-signup-callout a[style*="linear-gradient"]{
  background:var(--ff-brand)!important;border-radius:4px!important;box-shadow:none!important;
}
.ff-home-page .ff-signup-callout a[style*="rgba(255,255,255"]{border-radius:4px!important;background:#333!important;color:#fff!important}
.ff-home-page .ff-signup-callout svg[stroke*="168,85,247"]{stroke:#a855f7!important}
@media(max-width:700px){
  .ff-home-page .ff-signup-callout>div{padding:16px!important;gap:10px!important}
  .ff-home-page .ff-signup-callout>div>div:last-child{display:none!important}
  .ff-home-page .ff-signup-callout p{font-size:.78rem!important;line-height:1.45!important;margin-bottom:10px!important}
  .ff-home-page .ff-signup-callout p+div{display:none!important}
  .ff-home-page .ff-signup-callout p+div+div{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  .ff-home-page .ff-signup-callout a{min-width:0!important;justify-content:center!important;padding:9px 6px!important;font-size:.68rem!important;white-space:nowrap}
  #sec-all .section-header{display:flex!important;align-items:flex-start!important;gap:8px!important;flex-wrap:wrap!important}
  #sec-all .section-header>div{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:8px!important}
  #sec-all .year-drop,#sec-all .year-drop-btn{width:100%!important}
  #sec-all .year-drop-btn{justify-content:space-between!important;padding-left:10px!important;padding-right:10px!important}
}

/* The slide itself stays fully opaque. Only the artwork crossfades, so logos,
   metadata and controls never pulse from dark to bright. */
.ff-home-page .hero-slide{opacity:1!important;transition:none!important;pointer-events:none!important}
.ff-home-page .hero-slide.active{pointer-events:auto!important}
.ff-home-page .hero-slide .hero-img{opacity:0!important;transition:opacity .62s ease!important}
.ff-home-page .hero-slide.active .hero-img{opacity:1!important}
.ff-home-page .hero-slide .hero-overlay{opacity:0!important;transition:opacity .62s ease!important}
.ff-home-page .hero-slide.active .hero-overlay{opacity:1!important}
.ff-home-page .hero-slide:not(.active) .hero-content{visibility:hidden!important}
.ff-home-page .hero-slide.active .hero-content{visibility:visible!important;opacity:1!important;filter:none!important}

/* Media-only loading states: fixed geometry, no title/logo/button brightness jump. */
@keyframes ffMediaSweep{from{transform:translateX(-115%)}to{transform:translateX(215%)}}
@keyframes ffLoaderTurn{to{transform:rotate(360deg)}}
.ff-home-page .hero-slide{overflow:hidden}
.ff-home-page .hero-slide .hero-media-loader{
  position:absolute;inset:0;z-index:0;display:grid;place-content:center;justify-items:center;gap:9px;
  color:rgba(255,255,255,.56);background:linear-gradient(135deg,#211534,#141414 58%,#19131f);
  opacity:1;transition:opacity .22s ease;pointer-events:none;
}
.ff-home-page .hero-slide .hero-media-loader::after{
  content:'';position:absolute;inset:0 auto 0 0;width:36%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  animation:ffMediaSweep 1.35s cubic-bezier(.4,0,.2,1) infinite;
}
.ff-home-page .hero-loader-mark{font-size:clamp(1.7rem,4vw,3.25rem);font-weight:900;line-height:1;color:rgba(255,255,255,.16);letter-spacing:-.09em}
.ff-home-page .hero-loader-ring{width:24px;height:24px;border:2px solid rgba(255,255,255,.12);border-top-color:var(--ff-brand);border-radius:50%;animation:ffLoaderTurn .8s linear infinite}
.ff-home-page .hero-loader-label{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.ff-home-page .hero-slide .hero-img{position:absolute!important;inset:0;z-index:1}
.ff-home-page .hero-slide .hero-overlay{z-index:2}
.ff-home-page .hero-slide .hero-content{z-index:3}
.ff-home-page .hero-slide.ff-media-loaded .hero-media-loader{opacity:0;visibility:hidden}
.ff-home-page .hero-slide.ff-media-error .hero-media-loader::after,
.ff-home-page .hero-slide.ff-media-error .hero-loader-ring{display:none}

.ff-home-page .card-img-wrap:not(.ff-loaded)::after{
  display:block!important;content:'';position:absolute!important;inset:0 auto 0 0!important;z-index:0!important;
  width:42%!important;opacity:1!important;pointer-events:none!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent)!important;
  animation:ffMediaSweep 1.35s cubic-bezier(.4,0,.2,1) infinite!important;
}
.ff-home-page .card-img-wrap.ff-loaded::after{display:none!important}
@media(prefers-reduced-motion:reduce){
  .ff-home-page .hero-slide .hero-media-loader::after,.ff-home-page .hero-loader-ring,
  .ff-home-page .card-img-wrap:not(.ff-loaded)::after{animation:none!important}
}

/* One predictable 85% density on every page and every device. */
html{zoom:.85}
@media(max-width:359px){html{zoom:.85}}
@media(min-width:600px) and (max-width:1099px){html{zoom:.85}}
@media(min-width:1100px) and (max-width:1919px){html{zoom:.85}}
@media(min-width:1920px){html{zoom:.85}}
@supports not (zoom:1){
  html{font-size:13.6px}
  @media(max-width:359px){html{font-size:13.6px}}
  @media(min-width:600px) and (max-width:1099px){html{font-size:13.6px}}
  @media(min-width:1100px) and (max-width:1919px){html{font-size:13.6px}}
  @media(min-width:1920px){html{font-size:13.6px}}
}

@media(max-width:700px){
  .ff-home-page .navbar{height:calc(56px + var(--ff-safe-top))!important;padding:var(--ff-safe-top) 14px 0!important;background:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.48) 62%,transparent)!important;border-bottom:0!important;backdrop-filter:none!important;z-index:1000!important}
  .ff-home-page .navbar .nav-logo{position:relative;z-index:2;filter:drop-shadow(0 2px 7px #000)}
  .ff-home-page .navbar #bellBtn,.ff-home-page .navbar #searchToggle{position:relative;z-index:2!important;width:36px;height:36px;padding:8px!important;display:inline-flex!important;align-items:center;justify-content:center;color:#fff!important;background:rgba(0,0,0,.38)!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:999px!important;box-shadow:0 3px 12px rgba(0,0,0,.28)!important}
  .ff-home-page .navbar #searchWrap{position:relative;z-index:3;margin-left:0!important}
  .ff-home-page .hero{margin-top:0!important}
  .ff-home-page .ff-signup-callout{padding-right:12px!important}
  .ff-home-page #searchInput{font-size:20px!important;line-height:1.2!important}
}

/* iPhone/iPad use the native AirPlay picker. Cast/Remote controls stay out of
   the compact player header so there is exactly one device action on iOS. */
.ff-ios-device #cast-launcher,.ff-ios-device #remote-playback-btn{display:none!important}
.ff-ios-device .pui-device-controls{justify-content:flex-end!important}

/* Rounded modern detail surface and a framed cinema player. */
.ff-detail-page .hero{overflow:hidden!important;border-radius:0 0 18px 18px!important}
.ff-detail-page .info{padding:clamp(18px,3vw,36px)!important;background:rgba(24,24,24,.94)!important;border:1px solid #303030!important;border-radius:18px!important;backdrop-filter:blur(18px)!important;box-shadow:0 24px 60px rgba(0,0,0,.42)!important}
.ff-detail-page .info-poster img,.ff-detail-page .episode,.ff-detail-page .cast-card{border-radius:12px!important;overflow:hidden}
.ff-player-page .vwrap{
  --ff-player-top:calc(64px + clamp(8px,1.4vw,18px));
  width:calc(100% - clamp(16px,3vw,48px))!important;
  width:min(calc(100% - clamp(16px,3vw,48px)),var(--ff-player-height-width,calc((100dvh - var(--ff-player-top) - clamp(10px,2vh,22px))*16/9)))!important;
  margin:var(--ff-player-top) auto 0!important;
  border-radius:14px!important;
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)!important
}
.ff-home-page.ff-authenticated .content{margin-top:0!important;padding-top:clamp(18px,2.4vw,34px)!important}
@media(max-width:700px){
  .ff-detail-page .hero{border-radius:0 0 12px 12px!important}
  .ff-detail-page .info{width:calc(100% - 24px)!important;margin:-28px auto 0!important;padding:15px!important;border-radius:14px!important}
  .ff-detail-page .info-grid>div:first-child{text-align:center!important;max-width:none!important}
  .ff-detail-page .film-logo{margin-left:auto!important;margin-right:auto!important;object-position:center!important}
  .ff-detail-page .meta,.ff-detail-page .genres,.ff-detail-page .play-wrap,.ff-detail-page .tmdb-rating-row{justify-content:center!important}
  .ff-detail-page .film-desc{margin-left:auto!important;margin-right:auto!important;text-align:center!important;max-width:38rem!important}
  .ff-detail-page .film-tagline{text-align:center!important}
  .ff-detail-page .cast-section{text-align:center!important}
  .ff-player-page .vwrap{
    --ff-player-top:60px;
    width:calc(100% - 12px)!important;
    width:min(calc(100% - 12px),var(--ff-player-height-width,calc((100dvh - var(--ff-player-top) - 8px)*16/9)))!important;
    margin:var(--ff-player-top) auto 0!important;border-radius:10px!important
  }
  .ff-home-page.ff-authenticated .content{margin-top:0!important;padding-top:16px!important}
}

/* ========================================================================== */
/* FilmFrei24 unified 2026 theme — mirrors the new editor across every page.  */
/* ========================================================================== */
:root{
  --ff-bg:#09080c!important;
  --ff-bg-2:#0e0c12!important;
  --ff-panel:#141218!important;
  --ff-panel-2:#1a1720!important;
  --ff-text:#faf9ff!important;
  --ff-muted:#aaa5b4!important;
  --ff-line:rgba(255,255,255,.09)!important;
  --ff-brand:#8257ff!important;
  --ff-brand-2:#a78bfa!important;
  --ff-good:#55d98b!important;
  --ff-shadow:0 24px 64px rgba(0,0,0,.36)!important;
  --ff-radius:20px!important;
  --bg:var(--ff-bg)!important;
  --surface:var(--ff-panel)!important;
  --card:var(--ff-panel)!important;
  --card2:var(--ff-panel-2)!important;
  --accent:var(--ff-brand)!important;
  --acc:var(--ff-brand)!important;
  --acc2:var(--ff-brand-2)!important;
  --accent-mid:#9068ff!important;
  --accent-bright:var(--ff-brand-2)!important;
  --text:var(--ff-text)!important;
  --text-sec:var(--ff-muted)!important;
  --border:var(--ff-line)!important;
  --border-mid:rgba(255,255,255,.14)!important;
}
html{background:#09080c!important;scrollbar-color:#47414f transparent!important}
body{
  background:#09080c!important;
  background-image:radial-gradient(70% 72% at 8% -12%,rgba(130,87,255,.16),transparent 68%),radial-gradient(60% 55% at 100% 35%,rgba(167,139,250,.055),transparent 72%)!important;
  background-attachment:fixed!important;
  color:#faf9ff!important;
}
body::before{
  background:radial-gradient(70% 72% at 8% -12%,rgba(130,87,255,.14),transparent 68%),radial-gradient(60% 55% at 100% 35%,rgba(167,139,250,.05),transparent 72%)!important;
}
::selection{background:rgba(130,87,255,.38)!important;color:#fff!important}
::-webkit-scrollbar{width:0!important;height:0!important}
:focus-visible{outline-color:#a78bfa!important}

input,textarea,select,.inp,.search-inp,.msg-input,.chat-ta{
  min-height:43px;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:12px!important;
  color:#faf9ff!important;
  box-shadow:none!important;
}
input:focus,textarea:focus,select:focus,.inp:focus,.search-inp:focus,.msg-input:focus,.chat-ta:focus{
  border-color:#8b5cf6!important;
  box-shadow:0 0 0 3px rgba(139,92,246,.14)!important;
}

/* App bars */
.navbar,.topbar,.tv-nav{
  min-height:68px!important;
  height:68px!important;
  background:rgba(9,8,12,.88)!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(24px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(135%)!important;
}
.navbar.scrolled{background:rgba(9,8,12,.96)!important}
.nav-logo .logo-text,.topbar-logo,.tv-logo,.logo{
  background:none!important;
  -webkit-text-fill-color:initial!important;
  color:#fff!important;
  letter-spacing:-.045em!important;
  text-transform:none!important;
}
.nav-logo .logo-icon{filter:hue-rotate(325deg) saturate(1.25) brightness(1.08)!important}
.nav-logo .badge{background:#8257ff!important;color:#fff!important;border:0!important;border-radius:999px!important}

/* The persistent navigation uses the same compact rail as the editor list. */
.ff24-bottom-nav{
  background:rgba(13,12,16,.93)!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:12px 0 42px rgba(0,0,0,.24)!important;
}
.ff24-bnav-btn{color:#817b89!important}
.ff24-bnav-btn:hover{background:rgba(255,255,255,.045)!important;color:#d8d4df!important}
.ff24-bnav-btn.active{background:rgba(124,58,237,.13)!important;color:#fff!important}
.ff24-bnav-btn.active::before{background:linear-gradient(180deg,#a855f7,#7c3aed)!important;box-shadow:0 0 18px rgba(124,58,237,.5)!important}
.ff24-bottom-nav::before{background:linear-gradient(135deg,#7c3aed,#a855f7)!important;box-shadow:0 12px 30px rgba(124,58,237,.28)!important}
.ff24-bnav-badge{background:#7c3aed!important}

/* Homepage: framed cinematic header plus editor-like grouped shelves. */
.ff-home-page .hero{
  background:#15121a!important;
  border:1px solid rgba(255,255,255,.095)!important;
  border-radius:22px!important;
  box-shadow:0 28px 74px rgba(0,0,0,.38)!important;
}
.ff-home-page .hero::after{
  background:linear-gradient(90deg,rgba(9,8,12,.94) 0%,rgba(9,8,12,.57) 46%,rgba(9,8,12,.12) 77%),linear-gradient(0deg,rgba(9,8,12,.78),transparent 55%)!important;
}
.ff-home-page .hero-overlay{
  background:linear-gradient(100deg,rgba(9,8,12,.9),rgba(9,8,12,.34) 58%,transparent),linear-gradient(0deg,rgba(9,8,12,.76),transparent 52%)!important;
}
.ff-home-page .btn-play{
  min-height:42px!important;
  padding:10px 19px!important;
  border-radius:999px!important;
  background:#f9f8fc!important;
  color:#0b0a0d!important;
  box-shadow:0 10px 28px rgba(0,0,0,.25)!important;
}
.ff-home-page .content{max-width:none!important;padding-top:clamp(22px,3vw,42px)!important}
.ff-home-page .section{
  padding:clamp(14px,1.8vw,22px)!important;
  margin-bottom:18px!important;
  background:linear-gradient(145deg,rgba(20,18,24,.88),rgba(13,12,16,.9))!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:20px!important;
  box-shadow:0 16px 42px rgba(0,0,0,.18)!important;
  overflow:visible!important;
}
.ff-home-page .section-header{margin-bottom:9px!important}
.ff-home-page .section-title{padding-left:0!important;border:0!important;font-size:1.05rem!important}
.ff-home-page .section-title::before{display:inline-block!important;width:6px!important;height:6px!important;border-radius:50%!important;margin-right:1px!important;background:#9b7bff!important;box-shadow:0 0 0 5px rgba(155,123,255,.1)!important}
.ff-home-page .row-scroll{gap:10px!important;padding-top:14px!important;padding-bottom:16px!important}
.ff-home-page .card{
  padding:4px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.2)!important;
}
.ff-home-page .card-img-wrap{border-radius:10px!important;overflow:hidden!important}
.ff-home-page .card:hover{transform:translateY(-5px) scale(1.015)!important;border-color:rgba(167,139,250,.32)!important;box-shadow:0 22px 52px rgba(0,0,0,.4),0 0 0 1px rgba(130,87,255,.1)!important}
.ff-home-page .nf-row-arrow .nfa-circle,.ff-home-page .row-nav-btn{
  background:rgba(18,16,22,.92)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.38)!important;
}
.ff-home-page .nf-row-arrow:hover .nfa-circle,.ff-home-page .row-nav-btn:hover{background:#8257ff!important;border-color:#9b7bff!important}
.ff-home-page .genre-pill,.ff-home-page .year-drop-btn,.filter-tab,.cat-btn,.tv-genre,.tab-btn{
  min-height:36px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.085)!important;
  color:#aaa5b4!important;
}
.ff-home-page .genre-pill.active,.ff-home-page .year-drop-btn.open,.filter-tab.active,.cat-btn.on,.tv-genre.active,.tab-btn.active{
  background:rgba(130,87,255,.18)!important;
  border-color:rgba(167,139,250,.38)!important;
  color:#fff!important;
  box-shadow:none!important;
}
#searchDrop,.year-drop-menu,#card-panel{
  background:rgba(20,18,24,.97)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:16px!important;
  box-shadow:0 26px 70px rgba(0,0,0,.48)!important;
}

/* Shared page surfaces: wishlist, support, account, messages, playlist, TV. */
.page,.wrap,.content,.tv-content,.main{color:#faf9ff}
.page-title,h1{letter-spacing:-.045em!important}
.page-sub,.subtitle,.sub{color:#aaa5b4!important}
.card,.panel,.stat,.kpi,.price-notice,.price-box,.search-box,.result-card,.wish-card,
.ticket-card,.form-box,.chat-box,.msg-card,.step,.app,.dl-box,.xc-card,.hint-box,
.settings-section,.glass,.tv-card,.rmodal,.info,.prm-bar,.prm-inner{
  background:linear-gradient(145deg,rgba(20,18,24,.94),rgba(13,12,16,.96))!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:18px!important;
  box-shadow:0 14px 38px rgba(0,0,0,.19)!important;
}
.card:hover,.result-card:hover,.wish-card:hover,.ticket-card:hover,.step:hover,.app:hover,.tv-card:hover{
  border-color:rgba(167,139,250,.28)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.3)!important;
}
.popover,.cart-modal,.modal,.modal-content,.form-overlay>div{
  background:rgba(20,18,24,.98)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:20px!important;
  box-shadow:0 30px 90px rgba(0,0,0,.52)!important;
}
.wallet-pill,.pill,.badge,.tag,.chip,.feat,.wish-status,.hero-badge{
  border-radius:999px!important;
}
.btn-primary,.submit-btn,.send-btn,.btn-new,.btn-dl,.btn-create,.btn-p,.search-btn,.apply-btn{
  background:linear-gradient(135deg,#8257ff,#956eff)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#fff!important;
  border-radius:999px!important;
  box-shadow:0 10px 28px rgba(130,87,255,.24)!important;
}
.btn-primary:hover,.submit-btn:hover,.send-btn:hover,.btn-new:hover,.btn-dl:hover,.btn-create:hover,.btn-p:hover,.search-btn:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 15px 36px rgba(130,87,255,.32)!important;
}
.btn-secondary,.cancel-btn,.mark-all-btn,.btn-copy,.cart-view-btn,.back,.back-btn,.close-btn{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:#d8d4df!important;
  border-radius:999px!important;
}
.tabs,.tab-bar{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.08)!important;border-radius:16px!important}
.tabs .tab.active,.tab-bar .tab-btn.active{background:rgba(130,87,255,.18)!important;color:#fff!important;border-color:rgba(167,139,250,.32)!important;box-shadow:none!important}

/* Player/detail pages use the same framed media and matte information cards. */
.ff-player-page{background:#09080c!important}
.ff-player-page .nav{background:rgba(9,8,12,.9)!important;border-color:rgba(255,255,255,.075)!important;backdrop-filter:blur(24px)!important}
.ff-player-page .nav-back,.ff-player-page .report-nav-btn{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:999px!important;color:#fff!important}
.ff-player-page .vwrap{border-radius:18px!important;box-shadow:0 28px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.09)!important}
.ff-player-page .prog-track{background:rgba(255,255,255,.22)!important}
.ff-player-page #prog-fill{background:linear-gradient(90deg,#8257ff,#a78bfa)!important}
.ff-player-page #prog-thumb{background:#a78bfa!important}
.ff-player-page .info,.ff-player-page #cast-section,.ff-player-page .prm-inner{
  background:linear-gradient(145deg,#17141c,#111014)!important;
  border-color:rgba(255,255,255,.09)!important;
  border-radius:18px!important;
}
.ff-player-page .genre,.ff-player-page .meta span,.ff-player-page .share-btn{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.09)!important;
  border-radius:999px!important;
}
.ff-detail-page .hero{border-radius:0 0 22px 22px!important}
.ff-detail-page .info{background:rgba(20,18,24,.94)!important;border-color:rgba(255,255,255,.09)!important;border-radius:20px!important}

/* Chat and messaging get editor-style list rows and calm bubbles. */
.chat-item,.msg-card,.ticket-card{border-radius:14px!important}
.chat-item:hover,.chat-item.active,.ticket-card.active{background:rgba(130,87,255,.12)!important;border-color:rgba(167,139,250,.28)!important}
.msg-bubble,.msg.from-admin,.msg.from-user{border-radius:16px!important}
.msg.is-mine .msg-bubble{background:linear-gradient(135deg,#8257ff,#956eff)!important;color:#fff!important}

@media(min-width:1100px){
  .ff-home-page .hero{width:calc(100% - 44px)!important;max-width:none!important;margin:80px auto 0!important}
  .ff-home-page .content{width:calc(100% - 44px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  .page,.wrap,.content,.tv-content{scroll-margin-top:88px}
  .ff24-bottom-nav{gap:5px!important}
  .ff24-bnav-btn{height:38px!important;border-radius:999px!important;padding:0 14px!important}
  .ff24-bnav-btn:hover{background:rgba(255,255,255,.05)!important}
  .ff24-bnav-btn.active{background:rgba(130,87,255,.16)!important;color:#fff!important}
}
@media(max-width:1099px){
  .ff24-bottom-nav{background:rgba(13,12,16,.96)!important;border-top-color:rgba(255,255,255,.09)!important;box-shadow:0 -12px 38px rgba(0,0,0,.3)!important}
  .ff24-bnav-btn.active{background:transparent!important}
}
@media(max-width:760px){
  input,textarea,select,.inp,.search-inp,.msg-input,.chat-ta{font-size:16px!important}
  .navbar,.topbar,.tv-nav{min-height:58px!important;height:calc(58px + var(--ff-safe-top))!important;padding-top:var(--ff-safe-top)!important}
  .ff-home-page .hero{width:calc(100% - 16px)!important;margin:calc(58px + var(--ff-safe-top)) auto 0!important;border-radius:16px!important}
  .ff-home-page .section{margin:0 8px 12px!important;padding:13px!important;border-radius:16px!important}
  .ff-home-page .content{padding-left:0!important;padding-right:0!important}
  .ff-home-page .row-scroll{padding-top:9px!important;padding-bottom:9px!important}
  .page,.wrap,.content,.tv-content{padding-left:14px!important;padding-right:14px!important}
  .card,.panel,.stat,.kpi,.price-notice,.price-box,.search-box,.result-card,.wish-card,.ticket-card,.form-box,.chat-box,.msg-card,.step,.app,.dl-box,.xc-card,.hint-box,.settings-section,.glass,.tv-card{border-radius:15px!important}
  .ff-detail-page .hero{border-radius:0 0 16px 16px!important}
  .ff-player-page .vwrap{border-radius:12px!important}
}

/* -------------------------------------------------------------------------- */
/* Precision alignment pass: player controls, adaptive header gap and shelves. */
/* -------------------------------------------------------------------------- */

/* Range controls must never inherit the large text-input treatment. */
input[type="range"],input[type="checkbox"],input[type="radio"]{
  min-height:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
}
input[type="range"]:focus{box-shadow:none!important;outline:none!important}

/* Balanced player controls on desktop and compact screens. */
.ff-player-page .ctrl-row{
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  align-items:center!important;
  gap:clamp(4px,.7vw,9px)!important;
}
.ff-player-page .ctrl-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:8px!important;
  flex:0 0 42px!important;
}
.ff-player-page #vol-slider{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:block!important;
  flex:0 0 clamp(58px,6vw,82px)!important;
  width:clamp(58px,6vw,82px)!important;
  height:4px!important;
  min-height:4px!important;
  margin:0 2px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#a78bfa 0 100%,rgba(255,255,255,.28) 100%)!important;
  box-shadow:none!important;
  vertical-align:middle!important;
}
.ff-player-page #vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:13px!important;
  height:13px!important;
  border:2px solid #fff!important;
  border-radius:50%!important;
  background:#a78bfa!important;
  box-shadow:0 2px 8px rgba(0,0,0,.5)!important;
}
.ff-player-page #vol-slider::-moz-range-thumb{
  width:11px!important;height:11px!important;border:2px solid #fff!important;
  border-radius:50%!important;background:#a78bfa!important;
}
.ff-player-page #qs-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:38px!important;
  min-height:25px!important;
  padding:3px 8px!important;
  margin:0!important;
  color:#f4f0ff!important;
  border-color:rgba(167,139,250,.42)!important;
  background:rgba(130,87,255,.16)!important;
}
.ff-player-page .prog-wrap{width:100%!important;margin:0 0 5px!important}
.ff-player-page .prog-track{left:0!important;right:0!important}
.ff-player-page .pui-device-controls{align-items:center!important;justify-content:flex-end!important}

/* The header must never cover the cinematic artwork on bottom-nav devices. */
@media(min-width:761px) and (max-width:1099px){
  .ff-home-page .hero{
    margin:calc(68px + var(--ff-safe-top) + 8px) auto 0!important;
  }
}
@media(max-width:760px){
  .ff-home-page .hero{
    margin:calc(58px + var(--ff-safe-top) + 6px) auto 0!important;
  }
  .ff-home-page .section,
  .ff-home-page #sec-continue,
  .ff-home-page #sec-watched,
  .ff-home-page #sec-new,
  .ff-home-page #sec-reco,
  .ff-home-page #sec-all,
  .ff-home-page #sec-maintenance,
  .ff-home-page #sec-m3u{
    border-radius:18px!important;
    border-color:rgba(255,255,255,.09)!important;
    background:linear-gradient(145deg,rgba(20,18,24,.94),rgba(13,12,16,.96))!important;
  }
  .ff-player-page #vol-slider{display:none!important}
}

/* Very short phones in landscape keep the complete hero action in view. */
@media(max-width:760px) and (max-height:420px) and (orientation:landscape){
  .ff-home-page .hero{
    height:calc(100svh - 58px - var(--ff-safe-top) - 6px)!important;
    max-height:calc(100svh - 58px - var(--ff-safe-top) - 6px)!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }
  .ff-home-page .hero-content{bottom:7%!important}
  .ff-home-page .hero-brand-slot{height:38px!important;margin-bottom:5px!important;padding:2px 4px!important}
  .ff-home-page .hero-meta{margin-bottom:5px!important}
}

/* Keep the wishlist status and the now-visible subscription offer on one axis. */
.ff-wishlist-page .wishlist-header-actions{align-items:center!important}
.ff-wishlist-page .membership-offer-pill{
  border-color:rgba(167,139,250,.42)!important;
  background:linear-gradient(135deg,rgba(130,87,255,.25),rgba(130,87,255,.11))!important;
  color:#fff!important;
}

/* Every horizontal shelf uses the exact card shell from “Alle Filme”. */
.ff-home-page .row-scroll .card{
  padding:4px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.2)!important;
}
.ff-home-page .row-scroll .card-img-wrap{
  border-radius:10px!important;
  clip-path:inset(0 round 10px)!important;
}

/* ========================================================================== */
/* Dulo-inspired finish: calm motion, glass navigation and numbered Top 10.   */
/* ========================================================================== */
@keyframes ffDuloSurfaceIn{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes ffDuloNavIn{
  from{opacity:0;transform:translate3d(0,-10px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* One shared motion language on every page that loads bottom_nav_css.php. */
.navbar,.topbar,.tv-nav,.ff24-bottom-nav{
  animation:ffDuloNavIn .42s cubic-bezier(.22,.68,0,1) both!important;
  background-color:rgba(10,9,13,.76)!important;
  border-color:rgba(255,255,255,.11)!important;
  backdrop-filter:blur(28px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(135%)!important;
}
.section,.panel,.box,.wish-card,.ticket-card,.account-card,.setting-card,
.result-card,.form-box,.chat-box,.msg-card,.step,.app,.dl-box,.xc-card,
.settings-section,.glass,.tv-card,.info,.prm-bar,.prm-inner{
  animation:ffDuloSurfaceIn .46s cubic-bezier(.22,.68,0,1) both;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,
             box-shadow .3s ease,background-color .3s ease!important;
}
.section:nth-of-type(2),.panel:nth-of-type(2),.box:nth-of-type(2){animation-delay:.035s}
.section:nth-of-type(3),.panel:nth-of-type(3),.box:nth-of-type(3){animation-delay:.07s}
.row-scroll{
  scroll-snap-type:x mandatory!important;
  scroll-behavior:smooth!important;
  overscroll-behavior-inline:contain;
}
.row-scroll>.card,.row-scroll .ff-top10-item{scroll-snap-align:start}
button:active,a[role="button"]:active,.btn:active{transform:scale(.985)}

/* Dulo's Top-10 structure adapted to FilmFrei24's landscape film artwork. */
.ff-home-page .ff-top10-section{overflow:visible!important}
.ff-top10-header{align-items:flex-end!important}
.ff-top10-subtitle{margin:5px 0 0;color:#817b89;font-size:.76rem;line-height:1.35}
.ff-home-page .ff-top10-rail{
  gap:clamp(12px,1.5vw,20px)!important;
  padding-top:12px!important;
  padding-bottom:18px!important;
  overflow-y:visible!important;
}
.ff-top10-item{
  position:relative;
  flex:0 0 auto;
  width:calc(clamp(220px,22vw,330px) + clamp(40px,5.3vw,70px));
  min-height:clamp(138px,15vw,205px);
  padding-left:clamp(40px,5.3vw,70px);
  display:flex;
  align-items:flex-end;
  isolation:isolate;
}
.ff-top10-number{
  position:absolute;
  left:0;
  bottom:clamp(8px,1.1vw,14px);
  z-index:0;
  pointer-events:none;
  color:rgba(3,3,3,.84);
  -webkit-text-stroke:1.5px rgba(255,255,255,.72);
  paint-order:stroke fill;
  text-shadow:0 8px 20px rgba(0,0,0,.62);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  font-size:clamp(72px,8.1vw,116px);
  font-weight:850;
  line-height:.82;
  letter-spacing:0;
}
.ff-top10-card{position:relative;z-index:1;width:clamp(220px,22vw,330px)}
.ff-home-page .ff-top10-card>.card{
  width:100%!important;
  transform-origin:center bottom!important;
}
.ff-top10-score{
  position:absolute;
  right:9px;
  bottom:9px;
  z-index:30;
  display:inline-flex;
  align-items:baseline;
  gap:3px;
  min-height:24px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(7,6,10,.78);
  color:#f7c95b;
  box-shadow:0 8px 22px rgba(0,0,0,.38);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:.72rem;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}
.ff-top10-score small{color:#d6d1dd;font-size:.62rem;font-weight:700}
@media(hover:hover) and (pointer:fine){
  .ff-top10-item:hover .ff-top10-number{
    color:rgba(18,13,26,.94);
    -webkit-text-stroke-color:rgba(196,181,253,.88);
  }
  .ff-home-page .ff-top10-item:hover .card{
    transform:scale(1.025)!important;
    border-color:rgba(196,181,253,.5)!important;
  }
}
@media(max-width:700px){
  .ff-top10-subtitle{font-size:.68rem}
  .ff-home-page .ff-top10-rail{gap:10px!important;padding-right:12px!important}
  .ff-top10-item{
    width:calc(clamp(156px,46vw,205px) + 38px);
    min-height:112px;
    padding-left:38px;
  }
  .ff-top10-number{font-size:68px;bottom:8px;-webkit-text-stroke-width:1.2px}
  .ff-top10-card{width:clamp(156px,46vw,205px)}
  .ff-top10-score{right:7px;bottom:7px;padding:4px 7px;font-size:.66rem}
  .ff-top10-score small{font-size:.57rem}
}
@media(prefers-reduced-motion:reduce){
  .navbar,.topbar,.tv-nav,.ff24-bottom-nav,.section,.panel,.box,.wish-card,
  .ticket-card,.account-card,.setting-card,.result-card,.form-box,.chat-box,
  .msg-card,.step,.app,.dl-box,.xc-card,.settings-section,.glass,.tv-card,
  .info,.prm-bar,.prm-inner{animation:none!important}
  .row-scroll{scroll-behavior:auto!important}
}