/*
 * FilmFrei24 — Dulo glass cinema skin
 * Visual-only override. The existing PHP, player, queues and data contracts stay intact.
 */

:root{
  --ff-dulo-bg:#080606;
  --ff-dulo-surface:rgba(255,255,255,.045);
  --ff-dulo-surface-strong:rgba(18,16,17,.88);
  --ff-dulo-line:rgba(255,255,255,.075);
  --ff-dulo-line-strong:rgba(255,255,255,.14);
  --ff-dulo-text:#fafafa;
  --ff-dulo-muted:rgba(255,255,255,.58);
  --ff-dulo-soft:rgba(255,255,255,.38);
  --ff-dulo-accent:#a78bfa;
  --ff-dulo-good:#69dda2;
  --ff-dulo-radius:24px;
  --ff-dulo-page:clamp(20px,5vw,80px);
  --ff-dulo-nav-w:min(1120px,calc(100vw - 40px));
  --ff-dulo-shadow:0 24px 72px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045);
  --bg:var(--ff-dulo-bg)!important;
  --text:var(--ff-dulo-text)!important;
  --text-sec:var(--ff-dulo-muted)!important;
  --border:var(--ff-dulo-line)!important;
}

/* ========================================================================== */
/* FilmFrei24 iOS/PWA layout contract — 2026-08-01                         */
/* One final mobile geometry layer for every public page.                    */
/* ========================================================================== */
@media (max-width: 640px) {
  :root {
    --ff-ios-safe-top: env(safe-area-inset-top, 0px);
    --ff-ios-safe-right: env(safe-area-inset-right, 0px);
    --ff-ios-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ff-ios-safe-left: env(safe-area-inset-left, 0px);
    --ff-ios-edge: 10px;
    --ff-ios-header-height: 54px;
    --ff-ios-header-clearance: 74px;
    --ff-ios-nav-height: 66px;
    --ff-ios-nav-bottom-gap: 8px;
    --ff-ios-content-bottom: 94px;
  }

  html {
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html body,
  html body.ff-home-page {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding-bottom: calc(var(--ff-ios-content-bottom) + var(--ff-ios-safe-bottom)) !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }

  html body.ff-auth-page {
    padding: 12px calc(12px + var(--ff-ios-safe-right))
      calc(var(--ff-ios-content-bottom) + var(--ff-ios-safe-bottom))
      calc(12px + var(--ff-ios-safe-left)) !important;
  }

  /* Every public header uses the same frame in Safari and standalone mode. */
  html body .navbar,
  html body .topbar,
  html body .tv-nav,
  html body.ff-detail-page .navbar,
  html body.ff-player-page .nav {
    box-sizing: border-box !important;
    top: calc(8px + var(--ff-ios-safe-top)) !important;
    left: calc(var(--ff-ios-edge) + var(--ff-ios-safe-left)) !important;
    right: calc(var(--ff-ios-edge) + var(--ff-ios-safe-right)) !important;
    width: auto !important;
    max-width: none !important;
    height: var(--ff-ios-header-height) !important;
    min-height: var(--ff-ios-header-height) !important;
    transform: none !important;
  }

  html body:not(.ff-home-page):not(.ff-auth-page):not(.ff-player-page):not(.ff-detail-page) > .content,
  html body:not(.ff-home-page):not(.ff-auth-page):not(.ff-player-page):not(.ff-detail-page) > .page,
  html body:not(.ff-home-page):not(.ff-auth-page):not(.ff-player-page):not(.ff-detail-page) > .wrap,
  html body:not(.ff-home-page):not(.ff-auth-page):not(.ff-player-page):not(.ff-detail-page) > .shell {
    box-sizing: border-box !important;
    padding-top: calc(var(--ff-ios-header-clearance) + var(--ff-ios-safe-top)) !important;
  }

  /* Canonical six-item navigation: identical size, position and hit area. */
  html body .ff24-bottom-nav {
    box-sizing: border-box !important;
    position: fixed !important;
    z-index: 10060 !important;
    left: calc(var(--ff-ios-edge) + var(--ff-ios-safe-left)) !important;
    right: calc(var(--ff-ios-edge) + var(--ff-ios-safe-right)) !important;
    bottom: calc(var(--ff-ios-nav-bottom-gap) + var(--ff-ios-safe-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    height: var(--ff-ios-nav-height) !important;
    min-height: var(--ff-ios-nav-height) !important;
    padding: 5px 6px !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: 56px !important;
    transform: none !important;
  }

  html body .ff24-bottom-nav .ff24-bnav-btn,
  html body .ff24-bottom-nav .ff24-bnav-btn:visited {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 4px 1px !important;
    gap: 2px !important;
    overflow: hidden !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  html body .ff24-bottom-nav .ff24-bnav-btn i {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;
  }

  html body .ff24-bottom-nav .ff24-bnav-btn span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(8px, 2.25vw, 9.5px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
  }

  html body .ff24-bottom-nav .ff24-bnav-btn .ff24-beta-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: auto !important;
    overflow: visible !important;
    font-size: 6px !important;
    letter-spacing: 0 !important;
  }

  /* iOS zooms form fields below 16 px and makes entire layouts appear shifted. */
  html body input,
  html body select,
  html body textarea {
    max-width: 100%;
    font-size: 16px !important;
  }

  html body button,
  html body a,
  html body input,
  html body select,
  html body textarea {
    touch-action: manipulation;
  }

  /* The player deliberately has no public bottom navigation. */
  html body.ff-player-page {
    padding-bottom: calc(14px + var(--ff-ios-safe-bottom)) !important;
  }

  html body.ff-player-page .ff24-bottom-nav {
    display: none !important;
  }

  html body.ff-player-page .vwrap {
    margin-top: calc(70px + var(--ff-ios-safe-top)) !important;
  }

  /* The wishlist cart floats above, never underneath, the shared navigation. */
  html body.ff24-cart-present {
    padding-bottom: calc(158px + var(--ff-ios-safe-bottom)) !important;
  }

  html body .ff24-cart-bar {
    bottom: calc(84px + var(--ff-ios-safe-bottom)) !important;
  }
}

@media (max-width: 350px) {
  :root {
    --ff-ios-edge: 8px;
  }

  html body .ff24-bottom-nav {
    padding-inline: 4px !important;
  }

  html body .ff24-bottom-nav .ff24-bnav-btn span {
    font-size: clamp(7.75px, 2.45vw, 8.5px) !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) and (max-width: 940px) {
  :root {
    --ff-ios-header-height: 48px;
    --ff-ios-header-clearance: 64px;
    --ff-ios-nav-height: 54px;
    --ff-ios-nav-bottom-gap: 6px;
    --ff-ios-content-bottom: 70px;
  }

  html body .ff24-bottom-nav {
    height: 54px !important;
    min-height: 54px !important;
    padding-block: 4px !important;
    grid-template-rows: 46px !important;
  }

  html body .ff24-bottom-nav .ff24-bnav-btn,
  html body .ff24-bottom-nav .ff24-bnav-btn:visited {
    height: 46px !important;
    min-height: 46px !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  html body .ff24-bottom-nav .ff24-bnav-btn i {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-basis: 18px !important;
  }

  html body .ff24-bottom-nav .ff24-bnav-btn span {
    width: auto !important;
    max-width: calc(100% - 22px) !important;
    font-size: 8px !important;
  }

  html body.ff24-cart-present {
    padding-bottom: calc(130px + var(--ff-ios-safe-bottom)) !important;
  }

  html body .ff24-cart-bar {
    bottom: calc(66px + var(--ff-ios-safe-bottom)) !important;
  }
}

@media (display-mode: standalone) and (max-width: 640px) {
  html,
  body {
    min-height: 100dvh !important;
  }
}

html{
  zoom:1!important;
  background:var(--ff-dulo-bg)!important;
  color-scheme:dark;
  scrollbar-color:rgba(255,255,255,.18) transparent!important;
}
html body{
  padding-left:0!important;
  background:var(--ff-dulo-bg)!important;
  background-image:none!important;
  color:var(--ff-dulo-text)!important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif!important;
  font-size:15px!important;
  letter-spacing:-.012em!important;
}
html body::before{display:none!important}
::selection{background:rgba(255,255,255,.22)!important;color:#fff!important}
:focus-visible{outline:2px solid rgba(255,255,255,.86)!important;outline-offset:3px!important}

/* One floating glass navigation, composed from the shared destination bar and
   each page's existing brand/actions bar. No navigation functionality changes. */
html body .ff24-bottom-nav{
  position:fixed!important;
  z-index:9000!important;
  top:20px!important;
  bottom:auto!important;
  left:50%!important;
  right:auto!important;
  width:var(--ff-dulo-nav-w)!important;
  height:56px!important;
  min-height:56px!important;
  padding:8px 276px 8px 180px!important;
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  grid-template-rows:40px!important;
  align-content:center!important;
  border:1px solid rgba(255,255,255,.05)!important;
  border-radius:24px!important;
  background:rgba(0,0,0,.32)!important;
  box-shadow:var(--ff-dulo-shadow)!important;
  backdrop-filter:blur(42px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(42px) saturate(150%)!important;
  transform:translateX(-50%)!important;
  animation:none!important;
  overflow:visible!important;
}
html body .ff24-bottom-nav::before{display:none!important}
html body.ff-together-page .ff24-bottom-nav{padding-left:286px!important}
html body .ff24-bnav-btn{
  position:relative!important;
  min-width:0!important;
  height:40px!important;
  padding:0 10px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  border:0!important;
  border-radius:16px!important;
  background:transparent!important;
  color:rgba(255,255,255,.58)!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1!important;
  letter-spacing:-.015em!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
html body .ff24-bnav-btn svg{display:none!important}
html body .ff24-bnav-btn::before{display:none!important}
html body .ff24-bnav-btn:hover{
  color:#fff!important;
  background:rgba(255,255,255,.075)!important;
}
html body .ff24-bnav-btn.active{
  color:#fff!important;
  background:rgba(255,255,255,.21)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html body .ff24-bnav-beta{
  position:absolute!important;
  top:-6px!important;
  right:0!important;
  padding:2px 5px!important;
  border:0!important;
  background:#fff!important;
  color:#080606!important;
  font-size:7px!important;
  line-height:1.2!important;
  border-radius:100px!important;
  z-index:1!important;
}
html body .ff24-bnav-badge{
  top:-5px!important;
  right:2px!important;
  border:2px solid #171516!important;
  background:#fff!important;
  color:#090707!important;
}

html body .navbar,
html body .topbar,
html body .tv-nav{
  position:fixed!important;
  z-index:9001!important;
  top:20px!important;
  left:50%!important;
  right:auto!important;
  width:var(--ff-dulo-nav-w)!important;
  height:56px!important;
  min-height:56px!important;
  padding:8px 18px!important;
  border:0!important;
  border-radius:24px!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important;
}
html body .navbar.scrolled{background:transparent!important;box-shadow:none!important}
html body .navbar>a,
html body .navbar>button,
html body .navbar>div,
html body .topbar>a,
html body .topbar>button,
html body .topbar>div,
html body .tv-nav>a,
html body .tv-nav>button,
html body .tv-nav>div{pointer-events:auto!important}
html body .nav-logo{
  color:#fff!important;
  font-size:17px!important;
  font-weight:760!important;
  letter-spacing:-.045em!important;
  -webkit-text-fill-color:#fff!important;
}
html body .nav-logo .logo-icon{width:24px!important;height:24px!important;filter:grayscale(1) brightness(1.8)!important}
html body .nav-logo .logo-text{
  background:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html body .navbar>div[style*="margin-left:auto"]{gap:6px!important}
html body .navbar #statusBtn,
html body .navbar #spendBtn,
html body .navbar #bellBtn,
html body .navbar #searchToggle{
  min-height:36px!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  color:rgba(255,255,255,.62)!important;
  box-shadow:none!important;
}
html body .navbar #statusBtn:hover,
html body .navbar #spendBtn:hover,
html body .navbar #bellBtn:hover,
html body .navbar #searchToggle:hover{background:rgba(255,255,255,.075)!important;color:#fff!important}
html body .navbar #statusDot{background:var(--ff-dulo-good)!important}
html body .navbar #searchInput{
  top:44px!important;
  right:0!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:16px!important;
  background:rgba(15,13,14,.92)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.45)!important;
  backdrop-filter:blur(28px)!important;
}
html body #searchDrop{
  top:50px!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:20px!important;
  background:rgba(14,12,13,.94)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.56)!important;
  backdrop-filter:blur(32px)!important;
}

/* Full-bleed Dulo hero. */
html body.ff-home-page{padding-bottom:48px!important}
html body.ff-home-page .hero{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  max-width:none!important;
  height:min(72svh,680px)!important;
  min-height:520px!important;
  max-height:680px!important;
  margin:0!important;
  aspect-ratio:auto!important;
  border:0!important;
  border-radius:0!important;
  background:#0d0b0c!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
html body.ff-home-page .hero::after{display:none!important}
html body.ff-home-page .hero-slide,
html body.ff-home-page .hero-img{inset:0!important;width:100%!important;height:100%!important;border-radius:0!important}
html body.ff-home-page .hero-img{object-fit:cover!important;object-position:center 28%!important;filter:saturate(.92) contrast(1.03)!important}
html body.ff-home-page .hero-overlay{
  background:
    linear-gradient(90deg,rgba(4,3,3,.78) 0%,rgba(4,3,3,.43) 37%,rgba(4,3,3,.08) 67%,rgba(4,3,3,.2) 100%),
    linear-gradient(0deg,var(--ff-dulo-bg) 0%,rgba(8,6,6,.56) 14%,transparent 48%),
    linear-gradient(180deg,rgba(8,6,6,.28),transparent 32%)!important;
}
html body.ff-home-page .hero-content{
  left:var(--ff-dulo-page)!important;
  bottom:clamp(46px,8vh,88px)!important;
  width:min(560px,46vw)!important;
  max-width:560px!important;
}
html body.ff-home-page .hero-brand-slot{width:min(390px,38vw)!important;max-width:390px!important;height:clamp(62px,10vh,112px)!important;margin:0 0 12px!important}
html body.ff-home-page .hero-logo{max-width:100%!important;max-height:100%!important;object-position:left bottom!important}
html body.ff-home-page .hero-title{
  font-size:clamp(2rem,4.1vw,4.25rem)!important;
  font-weight:760!important;
  letter-spacing:-.065em!important;
  line-height:.94!important;
}
html body.ff-home-page .hero-meta{
  margin:0 0 10px!important;
  color:rgba(255,255,255,.76)!important;
  font-size:13px!important;
  font-weight:620!important;
}
html body.ff-home-page .hero-desc{
  max-width:540px!important;
  margin:0 0 18px!important;
  color:rgba(255,255,255,.76)!important;
  font-size:15px!important;
  line-height:1.52!important;
  text-shadow:0 2px 16px rgba(0,0,0,.5)!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
}
html body.ff-home-page .btn-play,
html body.ff-home-page .hero-btn{
  min-height:40px!important;
  padding:0 18px!important;
  border:0!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#0a0808!important;
  font-size:14px!important;
  font-weight:720!important;
  box-shadow:0 10px 28px rgba(0,0,0,.25)!important;
}
html body.ff-home-page .btn-play:hover,
html body.ff-home-page .hero-btn:hover{background:rgba(255,255,255,.88)!important;transform:translateY(-1px)!important}

/* Dulo rails, adapted to FilmFrei24's existing landscape artwork. */
html body.ff-home-page .content{
  position:relative!important;
  z-index:4!important;
  width:100%!important;
  max-width:none!important;
  margin:-30px 0 0!important;
  padding:0 0 50px!important;
  background:transparent!important;
}
html body.ff-home-page .section,
html body.ff-home-page #sec-continue,
html body.ff-home-page #sec-watched,
html body.ff-home-page #sec-new,
html body.ff-home-page #sec-reco,
html body.ff-home-page #sec-all,
html body.ff-home-page #sec-maintenance,
html body.ff-home-page #sec-m3u{
  width:100%!important;
  max-width:none!important;
  margin:0 0 38px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body.ff-home-page .section-header{
  min-height:26px!important;
  margin:0 0 8px!important;
  padding:0 var(--ff-dulo-page)!important;
}
html body.ff-home-page .section-title{
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#f8f8f8!important;
  font-size:17px!important;
  font-weight:680!important;
  line-height:1.35!important;
  letter-spacing:-.035em!important;
}
html body.ff-home-page .section-title::before{display:none!important}
html body.ff-home-page .section-count{color:rgba(255,255,255,.38)!important;font-size:12px!important;font-weight:560!important}
html body.ff-home-page .row-scroll{
  display:flex!important;
  gap:16px!important;
  margin:0!important;
  padding:10px var(--ff-dulo-page) 18px!important;
  scroll-padding-inline:var(--ff-dulo-page)!important;
}
html body.ff-home-page .row-scroll .card{
  flex:0 0 clamp(240px,23vw,332px)!important;
  width:clamp(240px,23vw,332px)!important;
  padding:0!important;
  border:0!important;
  border-radius:20px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform-origin:center!important;
}
html body.ff-home-page .card-img-wrap,
html body.ff-home-page .row-scroll .card-img-wrap{
  width:100%!important;
  aspect-ratio:16/9!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:20px!important;
  clip-path:inset(0 round 20px)!important;
  background:#161314!important;
  box-shadow:0 14px 34px rgba(0,0,0,.28)!important;
  overflow:hidden!important;
}
html body.ff-home-page .card-img{width:100%!important;height:100%!important;object-fit:cover!important}
html body.ff-home-page .card-overlay{background:linear-gradient(0deg,rgba(0,0,0,.74),transparent 52%)!important}
html body.ff-home-page .card-logo-wrap{
  min-height:42px!important;
  padding:8px 12px!important;
  background:linear-gradient(0deg,rgba(0,0,0,.7),transparent)!important;
}
html body.ff-home-page .card-logo{max-height:36px!important;max-width:82%!important}
html body.ff-home-page .card-title-fallback{font-size:14px!important;font-weight:700!important;letter-spacing:-.025em!important}
html body.ff-home-page .row-scroll .card:hover,
html body.ff-home-page .grid-all .card:hover{
  transform:translateY(-6px) scale(1.018)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html body.ff-home-page .row-scroll .card:hover .card-img-wrap,
html body.ff-home-page .grid-all .card:hover .card-img-wrap{
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 24px 54px rgba(0,0,0,.5)!important;
}
html body.ff-home-page .genre-pills-wrap{padding:0 var(--ff-dulo-page)!important}
html body.ff-home-page .genre-pills{gap:8px!important;padding:4px 0 16px!important}
html body.ff-home-page .genre-pill,
html body.ff-home-page .year-drop-btn,
html body.ff-home-page .year-drop-item{
  min-height:36px!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.04)!important;
  color:rgba(255,255,255,.62)!important;
  box-shadow:none!important;
}
html body.ff-home-page .genre-pill.active,
html body.ff-home-page .year-drop-item.active{background:rgba(255,255,255,.18)!important;color:#fff!important;border-color:rgba(255,255,255,.08)!important}
html body.ff-home-page .year-drop-menu{
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:18px!important;
  background:rgba(14,12,13,.96)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.55)!important;
  backdrop-filter:blur(28px)!important;
}
html body.ff-home-page .grid-all{
  padding:10px var(--ff-dulo-page) 18px!important;
  gap:18px 16px!important;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))!important;
}
html body.ff-home-page .grid-all .card{
  width:100%!important;
  max-width:none!important;
  padding:0!important;
  border:0!important;
  border-radius:20px!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Only true callouts remain panels; shelves never become boxes. */
html body.ff-home-page #sec-maintenance .maintenance-box,
html body.ff-home-page #sec-m3u .m3u-box,
html body.ff-home-page .empty-state{
  width:calc(100% - (2 * var(--ff-dulo-page)))!important;
  margin:20px var(--ff-dulo-page) 42px!important;
  padding:clamp(22px,4vw,42px)!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:24px!important;
  background:var(--ff-dulo-surface)!important;
  box-shadow:var(--ff-dulo-shadow)!important;
  backdrop-filter:blur(26px)!important;
}
html body.ff-home-page .ff-signup-callout{
  width:100%!important;
  margin:0 0 38px!important;
  padding:0 var(--ff-dulo-page)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body.ff-home-page .ff-signup-callout>div{
  width:100%!important;
  padding:clamp(22px,3vw,32px)!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:24px!important;
  background:var(--ff-dulo-surface)!important;
  box-shadow:var(--ff-dulo-shadow)!important;
  backdrop-filter:blur(26px)!important;
}

/* Shared subpage surfaces. */
html body:not(.ff-home-page):not(.ff-player-page){padding-top:96px!important}
html body .wrap,
html body .page,
html body .shell,
html body .content-wrap{max-width:min(1180px,calc(100% - 40px))!important}
html body:not(.ff-home-page) .card,
html body:not(.ff-home-page) .panel,
html body:not(.ff-home-page) .box,
html body .msg-card,
html body .ticket-card,
html body .price-box,
html body .setup-card,
html body .catalog-panel,
html body .form-panel,
html body .dl-box,
html body .xc-card,
html body .hint-box{
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:22px!important;
  background:var(--ff-dulo-surface)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(22px)!important;
}
html body input,
html body textarea,
html body select,
html body .search-box,
html body .search-wrap{
  border-color:var(--ff-dulo-line)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.045)!important;
  color:#fff!important;
  box-shadow:none!important;
}
html body input:focus,
html body textarea:focus,
html body select:focus{
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:0 0 0 4px rgba(255,255,255,.055)!important;
}
html body .btn-primary,
html body .primary-btn,
html body .submit-btn,
html body .play-btn,
html body .watch-btn,
html body .search-btn{
  border:0!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#090707!important;
  font-weight:720!important;
  box-shadow:0 12px 30px rgba(0,0,0,.24)!important;
}
html body .modal,
html body .modal-content,
html body .dialog,
html body .popover,
html body .search-panel,
html body .search-overlay-content,
html body .rmodal{
  border:1px solid var(--ff-dulo-line-strong)!important;
  border-radius:24px!important;
  background:rgba(15,13,14,.95)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.7)!important;
  backdrop-filter:blur(36px) saturate(135%)!important;
}
html body .overlay,
html body .modal-overlay,
html body .search-overlay{background:rgba(4,3,3,.72)!important;backdrop-filter:blur(14px)!important}

/* Film and series detail pages keep their cinematic artwork but share the new surface language. */
html body.ff-detail-page{padding-top:0!important;background:var(--ff-dulo-bg)!important}
html body.ff-detail-page .hero{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html body.ff-detail-page .hero-grad{
  background:linear-gradient(90deg,rgba(6,4,4,.72),transparent 62%),linear-gradient(0deg,var(--ff-dulo-bg),transparent 54%)!important;
}
html body.ff-detail-page .info{
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:24px!important;
  background:rgba(14,12,13,.84)!important;
  box-shadow:var(--ff-dulo-shadow)!important;
  backdrop-filter:blur(30px)!important;
}
html body.ff-detail-page .info-poster img,
html body.ff-detail-page .episode,
html body.ff-detail-page .cast-card{border-radius:18px!important;border-color:var(--ff-dulo-line)!important}
html body.ff-detail-page .meta span,
html body.ff-detail-page .genre{border:1px solid var(--ff-dulo-line)!important;border-radius:999px!important;background:rgba(255,255,255,.055)!important;color:rgba(255,255,255,.72)!important}
html body.ff-detail-page .btn-play{border-radius:14px!important;background:#fff!important;color:#090707!important}

/* Player chrome: neutral Dulo glass, with a restrained progress accent. */
html body.ff-player-page{padding:0!important;background:#050404!important;--acc:#fff!important;--acc2:#a78bfa!important}
html body.ff-player-page .ff24-bottom-nav{display:none!important}
html body.ff-player-page .nav{
  border-bottom:1px solid var(--ff-dulo-line)!important;
  background:rgba(5,4,4,.72)!important;
  box-shadow:none!important;
  backdrop-filter:blur(28px)!important;
}
html body.ff-player-page .nav-back,
html body.ff-player-page .report-nav-btn,
html body.ff-player-page .party-nav-btn{
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
}
html body.ff-player-page .vwrap{
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:22px!important;
  background:#000!important;
  box-shadow:0 28px 80px rgba(0,0,0,.54)!important;
}
html body.ff-player-page .info,
html body.ff-player-page #cast-section,
html body.ff-player-page .prm-inner{
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:22px!important;
  background:var(--ff-dulo-surface)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.3)!important;
}
html body.ff-player-page #prog-fill{background:linear-gradient(90deg,#fff,#a78bfa)!important}
html body.ff-player-page #prog-thumb{background:#fff!important}
html body.ff-player-page .ctrl-btn{background:rgba(255,255,255,.045)!important}
html body.ff-player-page .ctrl-btn:hover{background:rgba(255,255,255,.14)!important}

@media(max-width:1099px){
  :root{--ff-dulo-page:clamp(16px,4vw,38px)}
  html body{padding-left:0!important;padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important}
  html body .ff24-bottom-nav{
    top:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    height:64px!important;
    min-height:64px!important;
    padding:5px 6px!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-template-rows:54px!important;
    border-radius:22px!important;
    transform:none!important;
  }
  html body.ff-together-page .ff24-bottom-nav{padding-left:6px!important}
  html body .ff24-bnav-btn{
    height:54px!important;
    padding:5px 2px!important;
    flex-direction:column!important;
    gap:3px!important;
    border-radius:17px!important;
    font-size:9px!important;
  }
  html body .ff24-bnav-btn svg{display:block!important;width:20px!important;height:20px!important}
  html body .ff24-bnav-btn.active svg{filter:none!important}
  html body .ff24-bnav-beta{top:1px!important;right:1px!important;font-size:6px!important}
  html body .navbar,
  html body .topbar,
  html body .tv-nav{
    top:10px!important;
    width:calc(100vw - 24px)!important;
    height:52px!important;
    min-height:52px!important;
    padding:6px 12px!important;
    border:1px solid rgba(255,255,255,.05)!important;
    border-radius:20px!important;
    background:rgba(0,0,0,.34)!important;
    box-shadow:0 18px 52px rgba(0,0,0,.32)!important;
    backdrop-filter:blur(32px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(32px) saturate(145%)!important;
  }
  html body.ff-home-page .navbar{
    background:rgba(0,0,0,.34)!important;
    border-color:rgba(255,255,255,.05)!important;
    box-shadow:0 18px 52px rgba(0,0,0,.32)!important;
    backdrop-filter:blur(32px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(32px) saturate(145%)!important;
  }
  html body:not(.ff-home-page):not(.ff-player-page){padding-top:78px!important}
  html body.ff-home-page .hero{height:min(68svh,600px)!important;min-height:460px!important}
  html body.ff-home-page .hero-content{width:min(560px,64vw)!important}
  html body.ff-home-page .row-scroll .card{flex-basis:clamp(225px,38vw,310px)!important;width:clamp(225px,38vw,310px)!important}
}

@media(max-width:640px){
  :root{--ff-dulo-page:16px}
  html body .navbar{justify-content:space-between!important}
  html body .navbar .logo-text{font-size:15px!important}
  html body .navbar #statusBtn,
  html body .navbar #spendBtn{display:none!important}
  html body .navbar #bellBtn,
  html body .navbar #searchToggle{min-width:34px!important;min-height:34px!important;padding:7px!important}
  html body.ff-home-page .hero{
    height:62svh!important;
    min-height:390px!important;
    max-height:540px!important;
  }
  html body.ff-home-page .hero-img{object-position:62% center!important}
  html body.ff-home-page .hero-overlay{
    background:linear-gradient(90deg,rgba(5,4,4,.66),rgba(5,4,4,.12)),linear-gradient(0deg,var(--ff-dulo-bg),rgba(8,6,6,.48) 30%,transparent 68%)!important;
  }
  html body.ff-home-page .hero-content{
    left:16px!important;
    right:16px!important;
    bottom:34px!important;
    width:auto!important;
    max-width:460px!important;
  }
  html body.ff-home-page .hero-brand-slot{width:min(70vw,300px)!important;height:74px!important;margin-bottom:8px!important}
  html body.ff-home-page .hero-title{font-size:clamp(2rem,11vw,3.3rem)!important}
  html body.ff-home-page .hero-desc{-webkit-line-clamp:2!important;font-size:13px!important;margin-bottom:12px!important}
  html body.ff-home-page .hero-meta{font-size:11px!important;margin-bottom:7px!important}
  html body.ff-home-page .content{margin:-18px 0 0!important}
  html body.ff-home-page .section,
  html body.ff-home-page #sec-continue,
  html body.ff-home-page #sec-watched,
  html body.ff-home-page #sec-new,
  html body.ff-home-page #sec-reco,
  html body.ff-home-page #sec-all,
  html body.ff-home-page #sec-maintenance,
  html body.ff-home-page #sec-m3u{margin-bottom:26px!important}
  html body.ff-home-page .section-title{font-size:16px!important}
  html body.ff-home-page .section-count{display:none!important}
  html body.ff-home-page .row-scroll{gap:12px!important;padding-top:8px!important;padding-bottom:14px!important}
  html body.ff-home-page .row-scroll .card{flex-basis:76vw!important;width:76vw!important;max-width:300px!important}
  html body.ff-home-page .card-img-wrap,
  html body.ff-home-page .row-scroll .card-img-wrap{border-radius:17px!important;clip-path:inset(0 round 17px)!important}
  html body.ff-home-page .grid-all{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 10px!important}
  html body.ff-home-page .grid-all .card{border-radius:17px!important}
  html body.ff-home-page .grid-all .card-img-wrap{border-radius:17px!important;clip-path:inset(0 round 17px)!important}
  html body .wrap,
  html body .page,
  html body .shell,
  html body .content-wrap{max-width:calc(100% - 24px)!important}
  html body.ff-detail-page .info{width:calc(100% - 24px)!important;border-radius:20px!important}
  html body.ff-player-page .vwrap{border-radius:14px!important}
}

@media(max-width:390px){
  html body .ff24-bnav-btn{font-size:0!important}
  html body .ff24-bnav-btn svg{width:22px!important;height:22px!important}
  html body .ff24-bnav-beta{font-size:6px!important}
}

/* Wishlist/cart: the purchase bar must never overlap the destination bar.
   It uses the same floating glass geometry on desktop and a compact single
   row above the mobile safe-area navigation. */
html body.ff-wishlist-page .cart-bar{
  border:1px solid var(--ff-dulo-line)!important;
  background:rgba(8,6,6,.9)!important;
  box-shadow:var(--ff-dulo-shadow)!important;
  backdrop-filter:blur(34px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(34px) saturate(145%)!important;
}
html body.ff-wishlist-page.cart-present{padding-bottom:150px!important}
html body.ff-wishlist-page.cart-modal-open{overflow:hidden!important}
@media(min-width:1100px){
  html body.ff-wishlist-page .cart-bar{
    left:50%!important;
    right:auto!important;
    bottom:20px!important;
    width:min(760px,calc(100vw - 40px))!important;
    min-height:58px!important;
    padding:8px 10px 8px 18px!important;
    border-radius:22px!important;
    transform:translateX(-50%)!important;
    flex-wrap:nowrap!important;
  }
}

/* -------------------------------------------------------------------------- */
/* 2026-08-01: real FilmFrei24 Top 10 + motion parity with the offline skin.  */
/* This file is loaded after the page-local CSS, so these dimensions are the   */
/* final responsive contract for the ranked landscape cards.                  */
/* -------------------------------------------------------------------------- */
@keyframes ffDuloGlassIn{
  from{opacity:0;filter:blur(7px) brightness(.82)}
  to{opacity:1;filter:blur(0) brightness(1)}
}
html body .ff24-bottom-nav,
html body .navbar,
html body .topbar,
html body .tv-nav{
  animation:ffDuloGlassIn .42s cubic-bezier(.22,.68,0,1) both!important;
}

html body.ff-home-page .ff-top10-section{overflow:visible!important}
html body.ff-home-page .ff-top10-rail{
  gap:clamp(14px,1.55vw,22px)!important;
  padding-top:12px!important;
  padding-bottom:20px!important;
  overflow-y:visible!important;
}
html body.ff-home-page .ff-top10-item{
  position:relative!important;
  flex:0 0 calc(clamp(240px,23vw,332px) + clamp(46px,5.1vw,72px))!important;
  width:calc(clamp(240px,23vw,332px) + clamp(46px,5.1vw,72px))!important;
  min-height:clamp(142px,15vw,208px)!important;
  padding-left:clamp(46px,5.1vw,72px)!important;
  display:flex!important;
  align-items:flex-end!important;
  box-sizing:border-box!important;
  isolation:isolate;
}
html body.ff-home-page .ff-top10-card{
  width:clamp(240px,23vw,332px)!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
html body.ff-home-page .ff-top10-card>.card{
  flex:0 0 100%!important;
  width:100%!important;
  max-width:none!important;
}

@media(max-width:1099px){
  html body.ff-home-page .ff-top10-item{
    flex-basis:calc(clamp(225px,38vw,310px) + 46px)!important;
    width:calc(clamp(225px,38vw,310px) + 46px)!important;
    padding-left:46px!important;
  }
  html body.ff-home-page .ff-top10-card{width:clamp(225px,38vw,310px)!important}
}
@media(max-width:640px){
  html body.ff-home-page .ff-top10-rail{gap:12px!important}
  html body.ff-home-page .ff-top10-item{
    flex-basis:calc(min(76vw,300px) + 38px)!important;
    width:calc(min(76vw,300px) + 38px)!important;
    min-height:110px!important;
    padding-left:38px!important;
  }
  html body.ff-home-page .ff-top10-card{width:min(76vw,300px)!important}
  html body.ff-home-page .ff-top10-number{font-size:68px!important;bottom:8px!important}
}
@media(prefers-reduced-motion:reduce){
  html body .ff24-bottom-nav,
  html body .navbar,
  html body .topbar,
  html body .tv-nav{animation:none!important}
}
@media(max-width:1099px){
  html body.ff-wishlist-page .cart-bar{
    left:12px!important;
    right:12px!important;
    bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;
    min-height:58px!important;
    padding:8px 9px 8px 13px!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
    border-radius:18px!important;
  }
  html body.ff-wishlist-page .cart-bar-info{
    min-width:0!important;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  html body.ff-wishlist-page .cart-bar-info b{font-size:13px!important}
  html body.ff-wishlist-page .cart-bar-actions{flex:none!important;flex-wrap:nowrap!important}
  html body.ff-wishlist-page .cart-view-btn{
    min-height:40px!important;
    padding:0 12px!important;
    border-radius:13px!important;
    white-space:nowrap!important;
    font-size:12px!important;
  }
  html body.ff-wishlist-page.cart-present{
    padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))!important;
  }
}
@media(max-width:350px){
  html body.ff-wishlist-page .cart-bar-info{font-size:0!important}
  html body.ff-wishlist-page .cart-bar-info b{font-size:12px!important}
  html body.ff-wishlist-page .cart-bar-info b:first-child::after{content:' Film(e) · ';font-weight:500;color:var(--ff-dulo-muted)}
}

@media(max-width:760px) and (max-height:430px) and (orientation:landscape){
  html body.ff-home-page .hero{height:100svh!important;min-height:0!important;max-height:none!important}
  html body.ff-home-page .hero-content{bottom:18px!important;width:52vw!important}
  html body.ff-home-page .hero-brand-slot{height:48px!important}
  html body.ff-home-page .hero-desc{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  html body *,html body *::before,html body *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --------------------------------------------------------------------------
   Responsive coherence pass — shared spacing, controls, safe areas and search
   -------------------------------------------------------------------------- */
:root{
  --ff-control-h:42px;
  --ff-control-radius:14px;
  --ff-layout-gutter:clamp(16px,3vw,40px);
  --ff-header-clearance:96px;
}

html,html body{overflow-x:clip!important}

/* The page itself must not add a second header offset. Each primary content
   container owns exactly one clearance value below the floating header. */
html body:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page){padding-top:0!important}
html body:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page) > .content,
html body:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page) > .page,
html body:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page) > .wrap,
html body:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page) > .shell{
  padding-top:var(--ff-header-clearance)!important;
}

/* Restore every destination's intentional reading width instead of stretching
   account, inbox and support screens to one universal maximum. */
html body.ff-wishlist-page > .content{max-width:1100px!important}
html body.ff-support-page > .page{max-width:860px!important}
html body.ff-m3u-page > .wrap{max-width:860px!important}
html body.ff-account-page > .wrap{max-width:480px!important}
html body.ff-messages-page > .page{max-width:760px!important}
html body.ff-together-page > .shell{max-width:1580px!important}
html body.ff-support-page > .page,
html body.ff-m3u-page > .wrap,
html body.ff-account-page > .wrap,
html body.ff-messages-page > .page,
html body.ff-together-page > .shell{
  width:calc(100% - (2 * var(--ff-layout-gutter)))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Floating detail header: same glass, radius and placement as every other
   page, while the cinematic image remains full bleed beneath it. */
html body.ff-detail-page .navbar{
  position:fixed!important;
  top:20px!important;
  left:50%!important;
  width:var(--ff-dulo-nav-w)!important;
  height:56px!important;
  min-height:56px!important;
  padding:8px 18px!important;
  border:1px solid rgba(255,255,255,.05)!important;
  border-radius:24px!important;
  background:rgba(0,0,0,.34)!important;
  box-shadow:var(--ff-dulo-shadow)!important;
  backdrop-filter:blur(42px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(42px) saturate(150%)!important;
  transform:translateX(-50%)!important;
}
html body.ff-detail-page .nav-back{
  min-height:40px!important;
  padding:0 14px!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
}
html body.ff-detail-page .nav-logo{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}

/* One control language for every destination. */
html body :is(button,.btn,.btn-primary,.btn-secondary,.primary-btn,.submit-btn,.search-btn,.send-btn,.btn-new,.btn-dl,.btn-copy,.cancel-btn,.primary,.secondary,.party-primary,.party-secondary,.rmodal-send,.rmodal-cancel,.mark-all-btn,.membership-offer-pill,.wallet-pill,.result-add-btn,.result-play-btn){
  font-family:inherit!important;
  letter-spacing:-.015em!important;
}
html body :is(.btn-primary,.primary-btn,.submit-btn,.search-btn,.send-btn,.btn-new,.btn-dl,.primary,.party-primary,.rmodal-send,.result-add-btn){
  min-height:var(--ff-control-h)!important;
  padding:0 18px!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:var(--ff-control-radius)!important;
  background:#fff!important;
  color:#090707!important;
  font-size:13px!important;
  font-weight:740!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24)!important;
}
html body :is(.btn-secondary,.btn-copy,.cancel-btn,.secondary,.party-secondary,.rmodal-cancel,.mark-all-btn,.membership-offer-pill,.wallet-pill,.result-play-btn){
  min-height:var(--ff-control-h)!important;
  padding:0 16px!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:var(--ff-control-radius)!important;
  background:rgba(255,255,255,.05)!important;
  color:rgba(255,255,255,.82)!important;
  font-size:13px!important;
  font-weight:680!important;
  box-shadow:none!important;
}
html body :is(.filter-tab,.pill,.cat-btn,.tab-btn,.setup-tab,.together-genre-pill,.tab,.year-drop-btn,.genre-pill,.tv-genre,.tv-nav-btn){
  min-height:36px!important;
  padding:0 14px!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.04)!important;
  color:rgba(255,255,255,.58)!important;
  font-size:12px!important;
  font-weight:650!important;
  box-shadow:none!important;
}
html body :is(.filter-tab,.pill,.cat-btn,.tab-btn,.setup-tab,.together-genre-pill,.tab,.year-drop-btn,.genre-pill,.tv-genre,.tv-nav-btn).active,
html body :is(.filter-tab,.pill,.cat-btn,.tab-btn,.setup-tab,.together-genre-pill,.tab,.year-drop-btn,.genre-pill,.tv-genre,.tv-nav-btn)[aria-selected="true"]{
  border-color:rgba(255,255,255,.11)!important;
  background:rgba(255,255,255,.19)!important;
  color:#fff!important;
}
html body button:disabled,
html body [aria-disabled="true"]{opacity:.46!important;filter:saturate(.35)!important;cursor:not-allowed!important;box-shadow:none!important}

/* Wrappers are layout containers, not input fields. */
html body .search-wrap{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html body input,
html body textarea,
html body select{
  min-height:var(--ff-control-h)!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:var(--ff-control-radius)!important;
  background:rgba(255,255,255,.05)!important;
}

/* Search behaves like a real responsive header mode, never like a giant
   absolutely-positioned input squeezed by max-width. */
html body.ff-home-page .navbar.searching #searchInput{
  top:50%!important;
  right:40px!important;
  transform:translateY(-50%)!important;
  opacity:1!important;
  border-color:rgba(255,255,255,.2)!important;
}
html body.ff-forgot-page .btn{
  min-height:var(--ff-control-h)!important;
  padding:0 18px!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:var(--ff-control-radius)!important;
  background:#fff!important;
  color:#090707!important;
  font-weight:740!important;
}
html body.ff-auth-page{
  min-height:100vh!important;
  min-height:100dvh!important;
  padding:20px 20px calc(94px + env(safe-area-inset-bottom,0px))!important;
}
html body.ff-auth-page.ff-forgot-page:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page),
html body.ff-auth-page.ff-admin-login-page:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page){padding:20px!important}

/* The player is the single canonical film detail view. Its header therefore
   uses the same floating glass bar as the catalogue and subpages. */
html body.ff-player-page .nav{
  position:fixed!important;
  top:20px!important;
  left:50%!important;
  right:auto!important;
  width:var(--ff-dulo-nav-w)!important;
  height:56px!important;
  min-height:56px!important;
  padding:8px 18px!important;
  border:1px solid rgba(255,255,255,.05)!important;
  border-radius:24px!important;
  background:rgba(0,0,0,.38)!important;
  box-shadow:var(--ff-dulo-shadow)!important;
  backdrop-filter:blur(42px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(42px) saturate(150%)!important;
  transform:translateX(-50%)!important;
}
html body.ff-player-page .vwrap{margin-top:84px!important}

@media(max-width:1099px){
  :root{--ff-header-clearance:78px}
  html body .navbar,
  html body .topbar,
  html body .tv-nav,
  html body.ff-detail-page .navbar,
  html body.ff-player-page .nav{
    top:calc(10px + env(safe-area-inset-top,0px))!important;
    left:50%!important;
    right:auto!important;
    width:calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))!important;
    height:52px!important;
    min-height:52px!important;
    padding:6px 12px!important;
    border-radius:20px!important;
    background:rgba(0,0,0,.38)!important;
    box-shadow:0 18px 52px rgba(0,0,0,.34)!important;
    transform:translateX(-50%)!important;
  }
  html body.ff-player-page .vwrap{margin-top:calc(70px + env(safe-area-inset-top,0px))!important}
  html body:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page) > .content,
  html body:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page) > .page,
  html body:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page) > .wrap,
  html body:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page) > .shell{
    padding-top:calc(var(--ff-header-clearance) + env(safe-area-inset-top,0px))!important;
  }
  html body .ff24-bottom-nav{
    left:calc(12px + env(safe-area-inset-left,0px))!important;
    right:calc(12px + env(safe-area-inset-right,0px))!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  }
}

@media(max-width:640px){
  :root{--ff-layout-gutter:12px;--ff-control-h:42px;--ff-header-clearance:74px}
  html body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))!important}
  html body.ff-auth-page{padding:12px 12px calc(94px + env(safe-area-inset-bottom,0px))!important}
  html body.ff-auth-page.ff-forgot-page:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page),
  html body.ff-auth-page.ff-admin-login-page:not(.ff-home-page):not(.ff-player-page):not(.ff-detail-page){padding:12px!important}
  html body input,html body textarea,html body select{font-size:16px!important}
  html body.ff-home-page .navbar.searching .nav-logo,
  html body.ff-home-page .navbar.searching #bellBtn{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  html body.ff-home-page .navbar.searching > div[style*="margin-left:auto"]{
    width:100%!important;
    margin-left:0!important;
    justify-content:flex-end!important;
  }
  html body.ff-home-page .navbar.searching #searchWrap{
    position:absolute!important;
    inset:6px 8px!important;
    width:auto!important;
    height:40px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 38px!important;
    gap:4px!important;
    align-items:center!important;
  }
  html body.ff-home-page .navbar.searching #searchInput{
    position:static!important;
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 13px!important;
    transform:none!important;
  }
  html body.ff-home-page .navbar.searching #searchToggle{
    position:static!important;
    grid-column:2!important;
    grid-row:1!important;
    width:38px!important;
    height:38px!important;
  }
  html body.ff-home-page .navbar.searching #searchDrop{
    top:calc(100% + 8px)!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  html body.ff-detail-page .nav-back{min-height:38px!important;padding:0 12px!important}
  html body :is(.btn-primary,.primary-btn,.submit-btn,.search-btn,.send-btn,.btn-new,.btn-dl,.primary,.party-primary,.rmodal-send,.result-add-btn){padding-left:15px!important;padding-right:15px!important}
}

@media(max-width:390px){
  html body .ff24-bnav-btn{
    gap:2px!important;
    font-size:clamp(6.4px,1.8vw,7.2px)!important;
    letter-spacing:-.04em!important;
    overflow:hidden!important;
  }
  html body .ff24-bnav-btn svg{width:20px!important;height:20px!important}
}

@media(max-height:560px) and (orientation:landscape) and (max-width:1099px){
  html body .ff24-bottom-nav{height:54px!important;min-height:54px!important;grid-template-rows:44px!important}
  html body .ff24-bnav-btn{height:44px!important;flex-direction:row!important;font-size:8px!important}
  html body .ff24-bnav-btn svg{width:18px!important;height:18px!important}
}

/* Full-height communication and TV surfaces need explicit clearance because
   their native layouts use flex children instead of a page/wrap container. */
html body.ff-chat-page .chat-list,
html body.ff-community-page .messages,
html body.ff-dm-page .messages{
  padding-top:96px!important;
}
html body.ff-community-page .bottom-nav{
  position:fixed!important;
  z-index:50!important;
  left:50%!important;
  right:auto!important;
  bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  width:min(820px,calc(100vw - 24px))!important;
  height:64px!important;
  padding:5px 6px!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:22px!important;
  background:rgba(0,0,0,.38)!important;
  box-shadow:var(--ff-dulo-shadow)!important;
  backdrop-filter:blur(28px)!important;
  -webkit-backdrop-filter:blur(28px)!important;
  transform:translateX(-50%)!important;
}
html body.ff-community-page .bottom-nav .bnav-btn{height:54px!important;border-radius:17px!important;color:rgba(255,255,255,.52)!important}
html body.ff-community-page .bottom-nav .bnav-btn.active{background:rgba(255,255,255,.19)!important;color:#fff!important}
html body.ff-community-page .input-area{margin-bottom:74px!important}

/* tv-nav is the row *inside* the TV header, not the header itself. Reset the
   old generic assumption and style the actual tv-header as the glass bar. */
html body.ff-tv-page .tv-nav{
  position:static!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:none!important;
  pointer-events:auto!important;
}
html body.ff-tv-page .tv-header{
  position:relative!important;
  z-index:20!important;
  margin:12px!important;
  border:1px solid var(--ff-dulo-line)!important;
  border-radius:22px!important;
  background:rgba(0,0,0,.38)!important;
  box-shadow:var(--ff-dulo-shadow)!important;
  backdrop-filter:blur(32px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(32px) saturate(145%)!important;
}

@media(max-width:1099px){
  html body.ff-chat-page .chat-list,
  html body.ff-community-page .messages,
  html body.ff-dm-page .messages{padding-top:calc(74px + env(safe-area-inset-top,0px))!important}
}

@media(max-width:640px){
  html body.ff-tv-page .tv-header{margin:10px 12px!important;border-radius:20px!important}
  html body.ff-community-page .bottom-nav{width:calc(100vw - 24px)!important}
}

/* 2026-08-01: TMDB Top 10 — Dulo portrait rhythm, FilmFrei24 interaction.
   Kept last: older generic row/card rules must never resize these posters. */
html body.ff-home-page .ff-top10-section{position:relative!important;overflow:visible!important}
html body.ff-home-page .ff-top10-header{align-items:flex-end!important}
html body.ff-home-page .ff-top10-subtitle{margin:5px 0 0!important;color:rgba(255,255,255,.48)!important;font-size:clamp(.68rem,.75vw,.78rem)!important}
html body.ff-home-page .ff-top10-shell{position:relative!important;min-width:0!important}
html body.ff-home-page #row-top10.ff-top10-rail{
  display:flex!important;align-items:flex-end!important;gap:clamp(16px,1.7vw,25px)!important;
  padding:12px 4px 24px!important;overflow-x:auto!important;overflow-y:visible!important;
  scroll-snap-type:x mandatory!important;scrollbar-width:none!important;overscroll-behavior-inline:contain!important;
}
html body.ff-home-page #row-top10.ff-top10-rail::-webkit-scrollbar{display:none!important}
html body.ff-home-page #row-top10 .ff-top10-item{
  --ff-top10-poster:clamp(132px,10.7vw,176px);--ff-top10-rank-space:clamp(58px,4.8vw,76px);
  position:relative!important;flex:0 0 calc(var(--ff-top10-poster) + var(--ff-top10-rank-space))!important;
  width:calc(var(--ff-top10-poster) + var(--ff-top10-rank-space))!important;min-width:0!important;
  min-height:calc(var(--ff-top10-poster) * 1.5)!important;padding:0 0 0 var(--ff-top10-rank-space)!important;
  display:flex!important;align-items:flex-end!important;box-sizing:border-box!important;scroll-snap-align:start!important;
  isolation:isolate!important;overflow:visible!important;
}
html body.ff-home-page #row-top10 .ff-top10-item[data-rank="10"]{--ff-top10-rank-space:clamp(108px,8.5vw,132px)}
html body.ff-home-page #row-top10 .ff-top10-number{
  position:absolute!important;z-index:0!important;left:0!important;bottom:8px!important;
  width:var(--ff-top10-rank-space)!important;padding-right:8px!important;box-sizing:border-box!important;
  color:rgba(3,3,3,.84)!important;-webkit-text-stroke:1.5px rgba(255,255,255,.72)!important;
  paint-order:stroke fill!important;text-align:right!important;font-size:clamp(82px,7.8vw,116px)!important;
  font-weight:900!important;font-variant-numeric:tabular-nums!important;line-height:.79!important;
  letter-spacing:-.075em!important;text-shadow:0 10px 25px rgba(0,0,0,.88)!important;pointer-events:none!important;
}
html body.ff-home-page #row-top10 .ff-top10-item[data-rank="10"] .ff-top10-number{font-size:clamp(78px,7.3vw,108px)!important;letter-spacing:-.11em!important}
html body.ff-home-page #row-top10 .card.ff-top10-card{
  position:relative!important;z-index:1!important;flex:0 0 var(--ff-top10-poster)!important;
  width:var(--ff-top10-poster)!important;min-width:var(--ff-top10-poster)!important;max-width:var(--ff-top10-poster)!important;
  aspect-ratio:2/3!important;min-height:0!important;padding:0!important;overflow:hidden!important;
  border:1px solid rgba(255,255,255,.075)!important;border-radius:clamp(14px,1.3vw,21px)!important;
  background:#110e14!important;box-shadow:0 16px 38px rgba(0,0,0,.38)!important;transform:none!important;
  transition:transform .28s cubic-bezier(.22,.68,0,1),box-shadow .28s,border-color .28s!important;
}
html body.ff-home-page #row-top10 .ff-top10-poster{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;
  display:block!important;transform:scale(1.002)!important;transition:transform .5s cubic-bezier(.22,.68,0,1)!important;
}
html body.ff-home-page #row-top10 .ff-top10-shade{
  position:absolute!important;z-index:1!important;inset:38% 0 0!important;
  background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.08) 18%,rgba(0,0,0,.88) 100%)!important;pointer-events:none!important;
}
html body.ff-home-page #row-top10 .ff-top10-title{
  position:absolute!important;z-index:2!important;left:10px!important;right:10px!important;bottom:10px!important;
  color:#fff!important;font-size:clamp(.66rem,.72vw,.78rem)!important;font-weight:800!important;line-height:1.15!important;
  display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;
  text-shadow:0 2px 8px #000!important;
}
html body.ff-home-page #row-top10 .ff-top10-score{
  position:absolute!important;z-index:3!important;top:8px!important;right:8px!important;bottom:auto!important;left:auto!important;
  display:flex!important;align-items:center!important;gap:5px!important;padding:5px 7px!important;
  border:1px solid rgba(255,255,255,.15)!important;border-radius:999px!important;background:rgba(4,3,6,.68)!important;
  color:#fff!important;font-size:.67rem!important;line-height:1!important;box-shadow:0 7px 20px rgba(0,0,0,.35)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
}
html body.ff-home-page #row-top10 .ff-top10-score b{color:#ffd66b!important;font-weight:900!important}
html body.ff-home-page #row-top10 .ff-top10-score small{color:rgba(255,255,255,.65)!important;font-size:.52rem!important;font-weight:800!important}
html body.ff-home-page .ff-top10-arrow{
  position:absolute!important;z-index:8!important;top:50%!important;width:46px!important;height:62px!important;padding:0!important;
  display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:17px!important;
  background:rgba(7,5,9,.68)!important;color:#fff!important;box-shadow:0 16px 38px rgba(0,0,0,.48)!important;
  backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;transform:translateY(-50%)!important;
  transition:opacity .2s,background .2s,transform .2s!important;cursor:pointer!important;
}
html body.ff-home-page .ff-top10-arrow--left{left:-12px!important}
html body.ff-home-page .ff-top10-arrow--right{right:-12px!important}
html body.ff-home-page .ff-top10-arrow svg{width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html body.ff-home-page .ff-top10-arrow:disabled{opacity:0!important;pointer-events:none!important}
html body.ff-home-page .ff-top10-arrow:not(:disabled):hover{background:rgba(34,24,43,.9)!important;transform:translateY(-50%) scale(1.04)!important}

@media(hover:hover) and (pointer:fine){
  html body.ff-home-page #row-top10 .ff-top10-item:hover .card.ff-top10-card{border-color:rgba(255,255,255,.2)!important;box-shadow:0 23px 56px rgba(0,0,0,.52)!important;transform:translateY(-5px) scale(1.025)!important}
  html body.ff-home-page #row-top10 .ff-top10-item:hover .ff-top10-poster{transform:scale(1.045)!important}
}
@media(max-width:1099px){
  html body.ff-home-page .ff-top10-arrow{display:none!important}
  html body.ff-home-page #row-top10.ff-top10-rail{gap:16px!important;margin-left:calc(-1 * var(--ff-page-pad,16px))!important;margin-right:calc(-1 * var(--ff-page-pad,16px))!important;padding-left:var(--ff-page-pad,16px)!important;padding-right:var(--ff-page-pad,16px)!important}
  html body.ff-home-page #row-top10 .ff-top10-item{--ff-top10-poster:clamp(122px,18vw,154px);--ff-top10-rank-space:56px}
  html body.ff-home-page #row-top10 .ff-top10-item[data-rank="10"]{--ff-top10-rank-space:100px}
  html body.ff-home-page #row-top10 .ff-top10-number{font-size:82px!important}
  html body.ff-home-page #row-top10 .ff-top10-item[data-rank="10"] .ff-top10-number{font-size:78px!important}
}
@media(max-width:640px){
  html body.ff-home-page #row-top10.ff-top10-rail{gap:12px!important;padding-top:8px!important;padding-bottom:18px!important}
  html body.ff-home-page #row-top10 .ff-top10-item{--ff-top10-poster:clamp(108px,31vw,132px);--ff-top10-rank-space:46px}
  html body.ff-home-page #row-top10 .ff-top10-item[data-rank="10"]{--ff-top10-rank-space:88px}
  html body.ff-home-page #row-top10 .ff-top10-number{font-size:70px!important;bottom:7px!important;padding-right:6px!important}
  html body.ff-home-page #row-top10 .ff-top10-item[data-rank="10"] .ff-top10-number{font-size:66px!important}
  html body.ff-home-page #row-top10 .ff-top10-title{left:8px!important;right:8px!important;bottom:8px!important;font-size:.64rem!important}
  html body.ff-home-page #row-top10 .ff-top10-score{top:6px!important;right:6px!important;padding:4px 6px!important}
  html body.ff-home-page #row-top10 .ff-top10-score small{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  html body.ff-home-page #row-top10 *,html body.ff-home-page .ff-top10-arrow{scroll-behavior:auto!important;transition:none!important}
}

/* 2026-08-01: every desktop film rail uses the exact Top-10 glass control. */
@media(min-width:1100px) and (hover:hover) and (pointer:fine){
  html body.ff-home-page .nf-row-wrap{
    position:relative!important;width:100%!important;margin:0!important;padding:0!important;overflow:visible!important;
  }
  html body.ff-home-page .nf-row-arrow:not(.nf-genre-arrow){
    position:absolute!important;z-index:120!important;top:50%!important;
    width:46px!important;height:62px!important;min-height:62px!important;max-height:62px!important;padding:0!important;
    display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.12)!important;
    border-radius:17px!important;background:rgba(7,5,9,.68)!important;color:#fff!important;
    box-shadow:0 16px 38px rgba(0,0,0,.48)!important;filter:none!important;
    backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;
    transform:translateY(-50%)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transition:opacity .2s,background .2s,transform .2s!important;cursor:pointer!important;
  }
  html body.ff-home-page .nf-row-arrow:not(.nf-genre-arrow).nf-row-arrow--l{left:-12px!important}
  html body.ff-home-page .nf-row-arrow:not(.nf-genre-arrow).nf-row-arrow--r{right:-12px!important}
  html body.ff-home-page .nf-row-arrow:not(.nf-genre-arrow)>svg{
    width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;
    stroke-linecap:round!important;stroke-linejoin:round!important;transition:none!important;
  }
  html body.ff-home-page .nf-row-arrow:not(.nf-genre-arrow):is(.nf-hidden,:disabled){
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  }
  html body.ff-home-page .nf-row-arrow:not(.nf-genre-arrow):not(:disabled):hover{
    background:rgba(34,24,43,.9)!important;transform:translateY(-50%) scale(1.04)!important;
  }
  html body.ff-home-page .nf-genre-arrow{
    position:absolute!important;z-index:120!important;top:50%!important;
    width:36px!important;height:36px!important;min-height:36px!important;max-height:36px!important;padding:0!important;
    display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.12)!important;
    border-radius:12px!important;background:rgba(7,5,9,.68)!important;color:#fff!important;
    box-shadow:0 12px 28px rgba(0,0,0,.46)!important;filter:none!important;
    backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;
    transform:translateY(-50%)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transition:opacity .2s,background .2s,transform .2s!important;cursor:pointer!important;
  }
  html body.ff-home-page .nf-genre-arrow.nf-row-arrow--l{left:-8px!important}
  html body.ff-home-page .nf-genre-arrow.nf-row-arrow--r{right:-8px!important}
  html body.ff-home-page .nf-genre-arrow>svg{
    width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.2!important;
    stroke-linecap:round!important;stroke-linejoin:round!important;transition:none!important;
  }
  html body.ff-home-page .nf-genre-arrow:is(.nf-hidden,:disabled){
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  }
  html body.ff-home-page .genre-pills-wrap .nf-row-arrow.nf-genre-arrow:not(.nf-hidden):not(:disabled){
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  }
  html body.ff-home-page .genre-pills-wrap .nf-row-arrow.nf-genre-arrow:is(.nf-hidden,:disabled){
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  }
  html body.ff-home-page .nf-genre-arrow:not(:disabled):hover{
    background:rgba(34,24,43,.9)!important;transform:translateY(-50%) scale(1.04)!important;
  }
}

/* Final iOS/PWA geometry enforcement. Kept last to supersede legacy page rules. */
@media (max-width:640px){
  :root{--ff-ios-header-height:56px}
  html{
    width:100%!important;min-height:100dvh!important;overflow-x:hidden!important;
    -webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;
  }
  html body,
  html body.ff-home-page{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    min-height:100svh!important;min-height:100dvh!important;
    padding-bottom:calc(var(--ff-ios-content-bottom) + var(--ff-ios-safe-bottom))!important;
    overflow-x:clip!important;overscroll-behavior-x:none!important;
  }
  html body.ff-auth-page{
    padding:12px calc(12px + var(--ff-ios-safe-right))
      calc(var(--ff-ios-content-bottom) + var(--ff-ios-safe-bottom))
      calc(12px + var(--ff-ios-safe-left))!important;
  }
  html body .navbar,
  html body .topbar,
  html body .tv-nav,
  html body.ff-detail-page .navbar,
  html body.ff-player-page .nav{
    box-sizing:border-box!important;
    top:calc(8px + var(--ff-ios-safe-top))!important;
    left:calc(var(--ff-ios-edge) + var(--ff-ios-safe-left))!important;
    right:calc(var(--ff-ios-edge) + var(--ff-ios-safe-right))!important;
    width:auto!important;max-width:none!important;
    height:var(--ff-ios-header-height)!important;min-height:var(--ff-ios-header-height)!important;
    transform:none!important;
  }
  html body:not(.ff-home-page):not(.ff-auth-page):not(.ff-player-page):not(.ff-detail-page)>.content,
  html body:not(.ff-home-page):not(.ff-auth-page):not(.ff-player-page):not(.ff-detail-page)>.page,
  html body:not(.ff-home-page):not(.ff-auth-page):not(.ff-player-page):not(.ff-detail-page)>.wrap,
  html body:not(.ff-home-page):not(.ff-auth-page):not(.ff-player-page):not(.ff-detail-page)>.shell{
    box-sizing:border-box!important;
    padding-top:calc(var(--ff-ios-header-clearance) + var(--ff-ios-safe-top))!important;
  }
  html body .ff24-bottom-nav{
    box-sizing:border-box!important;position:fixed!important;z-index:10060!important;
    top:auto!important;
    left:calc(var(--ff-ios-edge) + var(--ff-ios-safe-left))!important;
    right:calc(var(--ff-ios-edge) + var(--ff-ios-safe-right))!important;
    bottom:calc(var(--ff-ios-nav-bottom-gap) + var(--ff-ios-safe-bottom))!important;
    width:auto!important;max-width:none!important;
    height:var(--ff-ios-nav-height)!important;min-height:var(--ff-ios-nav-height)!important;
    padding:5px 6px!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-template-rows:56px!important;
    transform:none!important;
  }
  html body .ff24-bottom-nav .ff24-bnav-btn,
  html body .ff24-bottom-nav .ff24-bnav-btn:visited{
    box-sizing:border-box!important;min-width:0!important;width:100%!important;
    height:56px!important;min-height:56px!important;padding:4px 1px!important;gap:2px!important;
    flex-direction:column!important;overflow:hidden!important;touch-action:manipulation!important;
    font-size:clamp(8px,2.25vw,9.5px)!important;line-height:1.05!important;letter-spacing:-.035em!important;
  }
  html body .ff24-bottom-nav .ff24-bnav-btn i,
  html body .ff24-bottom-nav .ff24-bnav-btn svg{
    width:22px!important;height:22px!important;min-width:22px!important;flex:0 0 22px!important;
  }
  html body .ff24-bottom-nav .ff24-bnav-btn span{
    display:block!important;width:100%!important;min-width:0!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    font-size:clamp(8px,2.25vw,9.5px)!important;line-height:1.05!important;letter-spacing:-.035em!important;
  }
  html body input,
  html body select,
  html body textarea{max-width:100%!important;font-size:16px!important}
  html body.ff-player-page{padding-bottom:calc(14px + var(--ff-ios-safe-bottom))!important}
  html body.ff-player-page .ff24-bottom-nav{display:none!important}
  html body.ff-player-page .vwrap{margin-top:calc(70px + var(--ff-ios-safe-top))!important}
  html body.ff24-cart-present,
  html body.ff-wishlist-page.cart-present{padding-bottom:calc(158px + var(--ff-ios-safe-bottom))!important}
  html body .ff24-cart-bar,
  html body.ff-wishlist-page .cart-bar{bottom:calc(84px + var(--ff-ios-safe-bottom))!important}
}

@media (max-width:350px){
  html body .ff24-bottom-nav{padding-inline:4px!important}
  html body .ff24-bottom-nav .ff24-bnav-btn,
  html body .ff24-bottom-nav .ff24-bnav-btn span{font-size:clamp(7.75px,2.45vw,8.5px)!important}
}

@media (max-height:500px) and (orientation:landscape) and (max-width:940px){
  :root{
    --ff-ios-safe-top:env(safe-area-inset-top,0px);
    --ff-ios-safe-right:env(safe-area-inset-right,0px);
    --ff-ios-safe-bottom:env(safe-area-inset-bottom,0px);
    --ff-ios-safe-left:env(safe-area-inset-left,0px);
  }
  html{width:100%!important;min-height:100dvh!important;overflow-x:hidden!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  html body,
  html body.ff-home-page{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    min-height:100dvh!important;padding-bottom:calc(78px + var(--ff-ios-safe-bottom))!important;
    overflow-x:clip!important;overscroll-behavior-x:none!important;
  }
  html body .navbar,
  html body .topbar,
  html body .tv-nav,
  html body.ff-detail-page .navbar,
  html body.ff-player-page .nav{
    box-sizing:border-box!important;top:calc(6px + var(--ff-ios-safe-top))!important;
    left:calc(10px + var(--ff-ios-safe-left))!important;right:calc(10px + var(--ff-ios-safe-right))!important;
    width:auto!important;max-width:none!important;height:48px!important;min-height:48px!important;transform:none!important;
  }
  html body .ff24-bottom-nav{
    top:auto!important;left:calc(10px + var(--ff-ios-safe-left))!important;right:calc(10px + var(--ff-ios-safe-right))!important;
    bottom:calc(6px + var(--ff-ios-safe-bottom))!important;width:auto!important;max-width:none!important;
    height:54px!important;min-height:54px!important;padding-block:4px!important;
    grid-template-rows:46px!important;
  }
  html body .ff24-bottom-nav .ff24-bnav-btn,
  html body .ff24-bottom-nav .ff24-bnav-btn:visited{
    height:46px!important;min-height:46px!important;flex-direction:row!important;
    justify-content:center!important;gap:4px!important;font-size:8px!important;
  }
  html body .ff24-bottom-nav .ff24-bnav-btn i,
  html body .ff24-bottom-nav .ff24-bnav-btn svg{
    width:18px!important;height:18px!important;min-width:18px!important;flex-basis:18px!important;
  }
  html body .ff24-bottom-nav .ff24-bnav-btn span{
    width:auto!important;max-width:calc(100% - 22px)!important;font-size:8px!important;
  }
  html body.ff-player-page{padding-bottom:calc(14px + var(--ff-ios-safe-bottom))!important}
  html body.ff-player-page .ff24-bottom-nav{display:none!important}
  html body.ff24-cart-present,
  html body.ff-wishlist-page.cart-present{padding-bottom:calc(142px + var(--ff-ios-safe-bottom))!important}
  html body .ff24-cart-bar,
  html body.ff-wishlist-page .cart-bar{bottom:calc(66px + var(--ff-ios-safe-bottom))!important}
}

/* 2026-08-11: the shared destination bar has seven regular destinations and
   optionally Together as an eighth. Keep every destination in one row on
   desktop and inside the single bottom bar on phones. */
html body .ff24-bottom-nav{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
}
html body .ff24-bottom-nav.ff24-nav-has-together{
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
}

/* /tv/ owns a horizontal section nav named .tv-nav; it is not a page header. */
@media (max-width:940px){
  html body.ff-tv-page{
    width:100%!important;max-width:100%!important;min-height:100svh!important;min-height:100dvh!important;
    padding:0!important;overflow:hidden!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;
  }
  html body.ff-tv-page .tv-wrap{
    box-sizing:border-box!important;width:100%!important;height:100svh!important;height:100dvh!important;
    padding-bottom:env(safe-area-inset-bottom,0px)!important;overflow:hidden!important;
  }
  html body.ff-tv-page .tv-header{
    box-sizing:border-box!important;position:relative!important;top:auto!important;left:auto!important;right:auto!important;
    width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;
    padding:calc(12px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 10px calc(14px + env(safe-area-inset-left,0px))!important;
    display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;
    border:0!important;border-radius:0!important;
    background:linear-gradient(to bottom,rgba(9,8,12,1),rgba(9,8,12,.86),transparent)!important;
    box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;
  }
  html body.ff-tv-page .tv-logo{flex:0 0 auto!important;min-width:0!important}
  html body.ff-tv-page .tv-search-wrap{
    order:2!important;flex:1 1 120px!important;min-width:120px!important;max-width:220px!important;margin-left:auto!important;
  }
  html body.ff-tv-page .tv-search{box-sizing:border-box!important;width:100%!important;max-width:100%!important;font-size:16px!important}
  html body.ff-tv-page .tv-nav{
    box-sizing:border-box!important;position:static!important;order:3!important;flex:1 1 100%!important;
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;
    padding:0!important;display:flex!important;align-items:center!important;gap:8px!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;
    overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;
  }
  html body.ff-tv-page .tv-nav::-webkit-scrollbar{display:none!important}
  html body.ff-tv-page .tv-nav-btn{flex:0 0 auto!important;min-height:40px!important;padding:8px 14px!important;white-space:nowrap!important}
  html body.ff-tv-page .tv-genres{
    padding-left:calc(14px + env(safe-area-inset-left,0px))!important;
    padding-right:calc(14px + env(safe-area-inset-right,0px))!important;
  }
  html body.ff-tv-page .tv-content{
    padding-left:calc(14px + env(safe-area-inset-left,0px))!important;
    padding-right:calc(14px + env(safe-area-inset-right,0px))!important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important;
  }
}

@media (max-height:500px) and (orientation:landscape) and (max-width:940px){
  html body.ff-tv-page .tv-header{
    padding:calc(8px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 8px calc(12px + env(safe-area-inset-left,0px))!important;
    flex-wrap:nowrap!important;gap:10px!important;
  }
  html body.ff-tv-page .tv-logo{font-size:1.05rem!important;white-space:nowrap!important}
  html body.ff-tv-page .tv-logo::before{width:28px!important;height:28px!important;margin-right:7px!important}
  html body.ff-tv-page .tv-nav{
    order:2!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;gap:6px!important;
  }
  html body.ff-tv-page .tv-nav-btn{min-height:36px!important;padding:6px 10px!important;font-size:.82rem!important}
  html body.ff-tv-page .tv-search-wrap{
    order:3!important;flex:0 1 180px!important;min-width:120px!important;max-width:180px!important;margin-left:0!important;
  }
  html body.ff-tv-page .tv-search{padding:8px 12px!important}
  html body.ff-tv-page .tv-genres{padding-bottom:8px!important}
}