/* ============================================================================
   CloudTV — Netflix-style overlay  (loaded LAST, after styles.css + redesign)
   Goal: cinematic billboard hero, clean poster rows, minimal chrome,
   transparent->solid nav, 5-tab mobile bar. Overrides win via load order + !important.
   ============================================================================ */

:root{
  --nf-black:#0b0b0f;
  --nf-red:#e50914;
  --nf-red-2:#f6121d;
  --nf-card:#181820;
  --nf-text:#f5f5f7;
  --nf-muted:#a7adba;
  --nf-nav-h:64px;
}

/* ---- 1. Base: flatten the busy body gradient to cinematic near-black ------ */
body, #app{ background:var(--nf-black) !important; }
body::before, body::after{ display:none !important; }

/* Quiet, thin scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---- 2. Remove the home "fluff" that buries content ----------------------- */
#home > .tabHeader,
#readinessPanel,
#trendingSourceLabel,
#trendingProviderStatus,
.trendingProviderStatus,
#playbackDebug,
.guideQuickActions,
.guideModeCards,
#guideCacheSummary,
.guidePerformancePanel,
.trendingHeader .railControls,
.trendingRailWrap .railControls,
.quickSearchRailControls,
.discoveryApiNotice{
  display:none !important;
}

/* Quieter per-tab headers everywhere (keep just the big title) */
.tabKicker, .tabBadge, .tabDescription{ display:none !important; }
.tabHeader{ margin-bottom:10px !important; border:0 !important; padding-bottom:0 !important; }
.tabTitle{ font-size:clamp(22px,3vw,30px) !important; font-weight:900 !important; letter-spacing:-.02em !important; }

/* ---- 3. Desktop top nav: transparent over content, solid on scroll -------- */
/* ===== Desktop header — Direction B: segmented pill nav + icon action cluster */
#topnav{
  position:sticky; top:0; z-index:60 !important;
  flex-wrap:nowrap !important; align-items:center !important; gap:18px !important;
  background:linear-gradient(180deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,0) 100%) !important;
  backdrop-filter:none !important;
  border-bottom:0 !important;
  padding:12px clamp(16px,3.5vw,46px) !important;
  transition:background .25s ease, backdrop-filter .25s ease;
}
#topnav.nfScrolled{
  background:rgba(8,9,11,.96) !important;
  backdrop-filter:blur(10px) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.brand{ font-size:22px !important; font-weight:900 !important; letter-spacing:-.02em !important; color:#fff !important; flex:0 0 auto; }
.brand span{ color:var(--nf-red) !important; }

/* segmented pill that holds the six browse tabs */
#topnav .navSegment{
  display:flex !important; align-items:center; gap:2px; flex:0 1 auto;
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.08) !important;
  border-radius:999px !important; padding:4px !important;
}
#topnav .navSegment .navItem{
  background:transparent !important; border:0 !important; border-radius:999px !important;
  color:var(--nf-muted) !important; font-weight:600 !important; font-size:13.5px !important;
  padding:7px 15px !important; position:relative; cursor:pointer; white-space:nowrap;
  transition:color .15s ease, background .15s ease;
}
#topnav .navSegment .navItem::after{ display:none !important; }
#topnav .navSegment .navItem:hover{ color:#fff !important; background:rgba(255,255,255,.07) !important; }
#topnav .navSegment .navItem.active{ background:var(--nf-red) !important; color:#fff !important; font-weight:800 !important; }

/* right-side action cluster */
#topnav .navRight{ margin-left:auto !important; display:flex !important; align-items:center; gap:10px; flex:0 0 auto; }
#topnav .navSearchBtn{
  display:flex !important; align-items:center; gap:9px;
  height:38px; padding:0 16px 0 13px !important; border-radius:999px !important;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.1) !important;
  color:var(--nf-muted) !important; font-weight:600 !important; font-size:13px !important; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
#topnav .navSearchBtn:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; border-color:rgba(255,255,255,.2) !important; }
#topnav .navSearchBtn svg{ width:17px; height:17px; flex:0 0 auto; }
#topnav .navIconBtn{
  width:38px; height:38px; min-height:0 !important; flex:0 0 auto; padding:0 !important;
  display:flex !important; align-items:center; justify-content:center; border-radius:50% !important;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.1) !important;
  color:#dfe3ea !important; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
#topnav .navIconBtn:hover{ background:rgba(255,255,255,.12) !important; color:#fff !important; }
#topnav .navIconBtn svg{ width:19px; height:19px; }
#topnav .navRight .navItem.active{ background:rgba(229,9,20,.2) !important; border-color:rgba(229,9,20,.55) !important; color:#fff !important; }
#topnav .navLogoutBtn:hover{ background:rgba(229,9,20,.18) !important; border-color:rgba(229,9,20,.5) !important; color:#fff !important; }
#topnav .navAccount{ position:relative; display:flex; flex:0 0 auto; }
#topnav .navAvatar{
  width:38px; height:38px; min-height:0 !important; flex:0 0 auto; padding:0 !important; border:0 !important;
  display:flex !important; align-items:center; justify-content:center; border-radius:50% !important;
  background:linear-gradient(140deg, var(--nf-red), #7a1020) !important; color:#fff !important; cursor:pointer;
}
#topnav .navAvatar svg{ width:20px; height:20px; }
/* Connection status: no dot in the normal (online) state — it only appears as a
   small red marker on the avatar if the browser reports the device is offline. */
#topnav #connectionStatus{ display:none !important; }
#topnav #connectionStatus.offline{
  display:block !important; position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  font-size:0 !important; padding:0 !important; margin:0 !important;
  background:#ef4444 !important; border:2px solid #0a0a0d !important;
}

/* tighten for the narrow end of desktop: drop the search label to an icon */
@media (min-width:769px) and (max-width:1120px){
  #topnav{ gap:12px !important; }
  #topnav .navRight{ gap:8px; }
  #topnav .navSearchBtn{ width:38px; padding:0 !important; justify-content:center; }
  #topnav .navSearchBtn span{ display:none; }
  #topnav .navSegment .navItem{ padding:7px 12px !important; font-size:13px !important; }
}

/* ---- 4. Mobile bottom nav: 5 even columns, cleaner ------------------------ */
/* ---- 5. Login: Netflix sign-in card -------------------------------------- */
#login{
  max-width:420px !important; margin:8vh auto !important;
  background:rgba(8,8,11,.86) !important; backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.07) !important; border-radius:14px !important;
  padding:42px 40px 40px !important; box-shadow:0 30px 90px rgba(0,0,0,.6) !important;
}
#login h2{ font-size:30px !important; font-weight:900 !important; letter-spacing:-.02em; margin-bottom:20px !important; }
#login input, #login select, #login textarea{
  background:#1b1b22 !important; border:1px solid rgba(255,255,255,.1) !important;
  border-radius:8px !important; color:#fff !important; padding:14px 14px !important; font-size:15px !important;
}
#login input:focus, #login select:focus, #login textarea:focus{ border-color:var(--nf-red) !important; outline:none !important; }
.loginModeTab.active{ background:var(--nf-red) !important; border-color:transparent !important; color:#fff !important; }
#loginButton{
  background:var(--nf-red) !important; border:0 !important; border-radius:8px !important;
  font-weight:800 !important; font-size:16px !important; padding:15px !important; width:100% !important;
  margin-top:8px !important; transition:filter .15s ease;
}
#loginButton:hover{ filter:brightness(1.1) !important; }
#loginMessage:empty{ display:none !important; }

/* ---- 6. HOME billboard hero ---------------------------------------------- */
.spotlightHero.trendingHero{
  position:relative !important; background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 0 12px !important; border-radius:0 !important; overflow:visible !important;
}
/* the inner header block becomes the cinematic billboard */
.trendingHeader{
  position:relative !important; display:flex !important; flex-direction:column !important;
  justify-content:flex-end !important; align-items:flex-start !important;
  min-height:min(82vh,760px) !important;
  margin:calc(-1 * var(--nf-nav-h) - 18px) -2px 0 -2px !important;
  padding:0 clamp(20px,5vw,60px) clamp(32px,5vh,68px) !important;
  border-radius:0 0 16px 16px !important; overflow:hidden !important;
  background-size:cover !important; background-position:center 20% !important;
  background-repeat:no-repeat !important;
  background-image:linear-gradient(160deg,#241018,#0a0f1a 55%,#05060a) ; /* fallback; JS sets a real backdrop */
}
.trendingHeader::before{ /* left + bottom cinematic scrim */
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, var(--nf-black) 2%, rgba(11,11,15,.35) 38%, rgba(11,11,15,.05) 65%),
    linear-gradient(to right, rgba(11,11,15,.85) 0%, rgba(11,11,15,.35) 45%, rgba(11,11,15,0) 80%);
}
.trendingHeader > *{ position:relative; z-index:2; }
.spotlightEyebrow{ color:var(--nf-red) !important; font-weight:900 !important; letter-spacing:.16em !important; font-size:11px !important; margin-bottom:14px !important; }
.spotlightTitle{ font-size:clamp(34px,6vw,76px) !important; font-weight:900 !important; line-height:1.02 !important; letter-spacing:-.03em !important; max-width:18ch; text-shadow:0 3px 30px rgba(0,0,0,.65) !important; }
.spotlightCopy{ font-size:clamp(14px,1.5vw,18px) !important; color:#dfe4ee !important; max-width:54ch; margin-top:16px !important; text-shadow:0 1px 12px rgba(0,0,0,.6); }
/* source pills -> small segmented control, top-right of billboard. The panel
   is a SIBLING before .trendingHeader (so mobile can show it in flow above the
   card); the header pulls itself up by nav-h+18px, so top:0 here lands at the
   same spot the old in-header offset did. */
.trendingHero .trendingSourcePanel{
  position:static !important; margin:0 auto 24px !important; 
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:14px !important;
  z-index:3 !important; padding:32px 20px 24px !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  background:linear-gradient(180deg, rgba(225,29,72,0.02) 0%, rgba(225,29,72,0.005) 50%, transparent 100%) !important; 
  border:none !important; border-radius:0 !important;
}
.trendingSourceLabel{
  font-size:10px !important; font-weight:800 !important; color:#8b95a8 !important;
  text-transform:uppercase !important; letter-spacing:1.3px !important; margin-bottom:4px !important;
}
.trendingSourcePills{ display:flex !important; gap:12px !important; justify-content:center !important; flex-wrap:wrap !important; }
.trendingSourcePanel .sourcePill{
  background:rgba(255,255,255,0.02) !important; border:1px solid rgba(255,255,255,.06) !important; 
  color:#9ca4b5 !important; font-weight:500 !important; font-size:13px !important; 
  padding:11px 26px !important; border-radius:999px !important; transition:all .25s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow:none !important; cursor:pointer !important;
}
.trendingSourcePanel .sourcePill:hover{
  background:rgba(255,255,255,0.05) !important; border-color:rgba(255,255,255,.12) !important;
  color:#c5cdd8 !important; transform:translateY(-2px) !important;
  box-shadow:0 6px 16px rgba(0,0,0,0.4) !important;
}
.trendingSourcePanel .sourcePill.active{ 
  background:linear-gradient(135deg, #e11d48 0%, #c41c3b 100%) !important; 
  border-color:#e11d48 !important; color:#fff !important;
  box-shadow:0 14px 40px rgba(225, 29, 72, 0.5) !important;
  font-weight:700 !important; letter-spacing:0.3px !important;
}
/* injected Play / More info buttons */
.nfHeroBtns{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; align-items:center; max-width:min(560px,100%); }
.nfHeroBtn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; width:auto !important; min-width:160px; max-width:280px; flex:0 0 auto; font-weight:800; font-size:16px; border:0; border-radius:8px; padding:15px 32px; cursor:pointer; transition:all .2s cubic-bezier(0.4,0,0.2,1); }
.nfHeroBtn:active{ transform:scale(.95); }
.nfHeroBtn.play{ background:#fff; color:#0a0a0a; box-shadow:0 8px 24px rgba(255,255,255,0.2); }
.nfHeroBtn.play:hover{ background:#f0f0f0; box-shadow:0 12px 32px rgba(255,255,255,0.3); transform:translateY(-2px); }
.nfHeroBtn.info{ background:rgba(109,121,140,.6); color:#fff; border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(4px); }
.nfHeroBtn.info:hover{ background:rgba(109,121,140,.8); border-color:rgba(255,255,255,.3); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.nfHeroBtn svg{ width:20px; height:20px; }

/* ---- 7. Rows / rails (home) ---------------------------------------------- */
.paneHeader, .continueSection .paneHeader, #homeRecentSection .paneHeader{
  border:0 !important; padding:0 clamp(16px,4vw,52px) !important; margin:26px 0 10px !important; align-items:baseline !important;
}
.paneHeaderTitle{ font-size:20px !important; font-weight:800 !important; letter-spacing:-.01em !important; }
#homeContinueCount{ color:var(--nf-muted) !important; font-weight:600; font-size:13px; }
.trendingRail, .continueRow, .homeRecent, #recent{
  display:flex !important; gap:10px !important; overflow-x:auto !important; overflow-y:hidden !important;
  padding:6px clamp(16px,4vw,52px) 14px !important; scroll-snap-type:x proximity; scrollbar-width:none;
}
.trendingRail::-webkit-scrollbar, .continueRow::-webkit-scrollbar, .homeRecent::-webkit-scrollbar, #recent::-webkit-scrollbar{ display:none; }

/* hover-scale poster cards (desktop) */
.trendCard, .continueCard, .vodCard, .liveCard{
  transition:transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease, border-color .2s ease !important;
  will-change:transform;
}
@media (hover:hover){
  .trendCard:hover, .continueCard:hover, .vodCard:hover, .liveCard:hover{
    transform:scale(1.07) !important; z-index:5 !important;
    box-shadow:0 18px 44px rgba(0,0,0,.6) !important; border-color:rgba(255,255,255,.22) !important;
  }
}

/* ---- 8. Movies / Series: slimmer toolbar + cleaner posters --------------- */
.mediaControls.controlCard, #categoryControls.controlCard{
  background:rgba(255,255,255,.025) !important; border:1px solid rgba(255,255,255,.05) !important;
  border-radius:12px !important; padding:10px 12px !important; gap:10px !important;
  box-shadow:none !important; margin-bottom:14px !important;
}
.controlLabel{ font-size:10px !important; color:var(--nf-muted) !important; }
.mediaControls input, .mediaControls select, #categoryControls input, #categoryControls select{
  background:#14141a !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:8px !important;
}
/* category sidebar (desktop) */
.mediaCategoryList, #categoryList{ background:rgba(255,255,255,.02) !important; }
/* poster grid: bigger, tighter, Netflix-ish */
.mediaItemList .vodCard .vodPoster, .vodCard .vodPoster{ border-radius:8px !important; }
.vodTitle{ font-weight:700 !important; }

/* skeleton posters while a category loads (smooth-tap parity with Live TV) */
.vodSkeletonGrid{ pointer-events:none; }
.vodSkeletonPoster{
  aspect-ratio:2/3; border-radius:8px;
  background:linear-gradient(110deg,#15161d 32%,#1e2029 46%,#15161d 60%);
  background-size:220% 100%; animation:vodShimmer 1.2s linear infinite;
}
.vodSkeletonLine{
  height:10px; border-radius:5px; margin-top:8px; width:82%;
  background:linear-gradient(110deg,#15161d 32%,#1e2029 46%,#15161d 60%);
  background-size:220% 100%; animation:vodShimmer 1.2s linear infinite;
}
.vodSkeletonLine.short{ width:48%; }
@keyframes vodShimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

/* ---- 9. Live TV channel rows -------------------------------------------- */
.premiumChannelRow{ border-radius:8px !important; }
.channelInfoBar{ background:#0a0c12 !important; }

/* ---- 10. Player polish --------------------------------------------------- */
.playerShell{ border-radius:14px !important; border:1px solid rgba(255,255,255,.07) !important; box-shadow:0 24px 70px rgba(0,0,0,.5) !important; }
.miniPlayerKicker{ color:var(--nf-red) !important; }
/* the mobile action row is a phone-only surface (cloudtv-mobile.css shows it) */
.playerActionRow{ display:none; }
/* recovery card: one clear primary action */
.streamRecoveryActions button.primary{ background:#fff !important; color:#0a0a0e !important; border-color:#fff !important; font-weight:800 !important; }

/* Player settings → drill-in sheet (Option 1, 2026-06-15). Base styling for
   the new row markup; cloudtv-mobile.css turns the panel into a bottom sheet. */
.settingsSheetGrab{ display:none; }
.playerSettingsPanel .playerSettingsHeader{ display:flex !important; align-items:center; gap:10px; padding:2px 4px 12px !important; border:0 !important; margin:0 !important; }
.settingsSheetTitle{ font-size:16px; font-weight:800; letter-spacing:-.01em; color:#fff; }
.settingsBack{ flex:0 0 auto; width:32px; height:32px; border-radius:999px; border:0; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.settingsBack svg{ width:17px; height:17px; }
.settingsClose{ margin-left:auto; flex:0 0 auto; height:32px; padding:0 14px; border-radius:999px; border:0; background:rgba(255,255,255,.08); color:#cfd2dd; font-weight:700; font-size:13px; cursor:pointer; }
.settingsClose:hover{ background:rgba(255,255,255,.14); }
.settingsRowList{ display:flex; flex-direction:column; }
.settingsRowGroupLabel{ font-size:11.5px; font-weight:700; letter-spacing:.04em; color:#6b6b76; padding:14px 4px 5px; }
.settingsRowList > .settingsRowGroupLabel:first-child{ padding-top:4px; }

/* ===== Control Center redesign: account health hero + tool tiles ===== */
.accountSummaryPanel{ padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important; }
.accHero{ background:rgba(255,255,255,.04); border:1px solid rgba(29,110,60,.3); border-radius:14px; padding:14px; }
.accountSummaryPanel.warn .accHero{ border-color:rgba(133,79,11,.42); }
.accountSummaryPanel.error .accHero{ border-color:rgba(163,45,45,.5); }
.accHeroTop{ display:flex !important; align-items:center; gap:12px; flex-wrap:nowrap; }
.accHeroIcon{ flex:0 0 auto !important; width:40px; height:40px; border-radius:999px; background:rgba(29,110,60,.18); color:#7ed09b; display:flex; align-items:center; justify-content:center; }
.accHeroIcon svg{ width:22px !important; height:22px !important; }
.accountSummaryPanel.warn .accHeroIcon{ background:rgba(133,79,11,.2); color:#f0b95a; }
.accountSummaryPanel.error .accHeroIcon{ background:rgba(163,45,45,.2); color:#ec8a8a; }
.accHeroText{ flex:1 1 auto !important; min-width:0 !important; }
.accHeroText strong{ display:block; color:#fff; font-size:17px; font-weight:600; line-height:1.2; }
.accHeroText span{ display:block; color:var(--nf-muted); font-size:12px; margin-top:1px; line-height:1.35; }
.accHeroRefresh{ flex:0 0 auto !important; width:auto !important; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.1); color:#cfd2dd; border:0; border-radius:999px; padding:7px 13px; font-size:11.5px; font-weight:700; cursor:pointer; }
.accHeroRefresh svg{ width:13px !important; height:13px !important; flex:0 0 auto; }
.accHeroMeter{ margin-top:14px; }
.accHeroMeterHead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.accHeroMeterHead span{ color:var(--nf-muted); font-size:12px; }
.accHeroMeterHead strong{ color:#fff; font-size:13px; font-weight:600; }
.accSegs{ display:flex; gap:5px; }
.accSeg{ flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.12); }
.accSeg.used{ background:#1d9e75; }
.accHeroAlert{ margin-top:12px; padding:9px 11px; border-radius:10px; background:rgba(163,45,45,.14); color:#f0b3b3; font-size:12px; line-height:1.4; }
.accountSummaryPanel.warn .accHeroAlert{ background:rgba(133,79,11,.16); color:#f0c48a; }
.accHeroFoot{ margin-top:13px; padding-top:11px; border-top:1px solid rgba(255,255,255,.07); color:var(--nf-muted); font-size:11px; line-height:1.4; }

.controlCenterActions{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
.controlCenterAction{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:0 !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important; padding:13px !important; text-align:left !important; min-height:0 !important; box-shadow:none !important; cursor:pointer; }
.controlCenterActionIcon{ display:flex !important; align-items:center; justify-content:center; color:#7ddcff; margin-bottom:9px; }
.controlCenterActionIcon svg{ width:21px; height:21px; }
.controlCenterAction > span:not(.controlCenterActionIcon){ color:#fff !important; font-size:13.5px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; }
.controlCenterAction strong{ color:var(--nf-muted) !important; font-size:11px !important; font-weight:500 !important; margin-top:2px !important; }

/* Control Center → Profiles: cards with mode badge + in-use marker */
.profileItem{ display:flex !important; flex-direction:column !important; gap:0 !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important; padding:12px !important; box-shadow:none !important; }
.profileItem.active{ border-color:rgba(125,220,255,.32) !important; }
.profileItemTop{ display:flex; align-items:center; gap:9px; }
.profileBadge{ flex:0 0 auto; font-size:10px; font-weight:700; color:#0b0c10; background:#7ddcff; padding:2px 7px; border-radius:5px; }
.profileBadge.m3u{ background:#b4b2a9; }
.profileItemTop strong{ flex:1 1 auto; min-width:0; color:#fff; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 !important; }
.profileInUse{ flex:0 0 auto; color:#7ed09b; font-size:11px; font-weight:700; }
.profileMeta{ display:block; color:var(--nf-muted); font-size:11.5px; margin:6px 0 11px; overflow-wrap:anywhere; }
.profileItem .profileActions{ display:flex !important; gap:8px; margin:0 !important; }
.profileItem .profileActions .heroButton.primary{ flex:1 1 auto; width:auto !important; }
.profileItem .profileActions .ghostButton{ flex:0 0 auto; width:auto !important; }
.settingsRow{ display:flex; align-items:center; gap:13px; width:100%; padding:13px 4px; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.06); color:#fff; cursor:pointer; text-align:left; }
.settingsRow:last-child{ border-bottom:0; }
.settingsRow[disabled]{ opacity:.5; cursor:default; }
.settingsRowIcon{ flex:0 0 auto; width:22px; height:22px; color:#cfd2dd; display:flex; align-items:center; justify-content:center; }
.settingsRowIcon svg{ width:20px; height:20px; }
.settingsRowLabel{ font-size:15px; font-weight:600; }
.settingsRowValue{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:#9a9aa6; white-space:nowrap; }
.settingsRowChevron{ width:15px; height:15px; color:#6b6b77; }
.settingsLiveNote{ display:flex; align-items:center; gap:8px; padding:13px 4px 2px; font-size:11.5px; font-weight:600; color:#7b7b86; }
.settingsLiveDot{ width:6px; height:6px; border-radius:3px; background:var(--nf-red); flex:0 0 auto; }
.settingsMenuOptions.drill{ display:flex; flex-direction:column; gap:8px; }

/* ---- 11. Mobile refinements --------------------------------------------- */
/* ---- 12. Focus + selection accents -------------------------------------- */
:focus-visible{ outline:2px solid var(--nf-red) !important; outline-offset:2px; }
::selection{ background:rgba(229,9,20,.4); }

/* Crisp type everywhere */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
svg{ shape-rendering:geometricPrecision; }

/* ---- 13. Mobile streaming-service pass ----------------------------------- */

/* The skin turns these rows into flex rails (rule #7); give cards a fixed
   basis so a populated rail scrolls instead of crushing every card. */
.trendingRail .trendCard{ flex:0 0 clamp(120px,31vw,180px) !important; }
.continueRow .continueCard, .homeRecent .recentCard{ flex:0 0 auto !important; }

/* Home: Live TV channel rail */
.homeLiveSection .paneHeader{ display:flex !important; align-items:baseline !important; }
.paneHeaderLink{ margin-left:auto; width:auto !important; min-height:auto; flex:0 0 auto; background:none; border:0; color:var(--nf-muted); font-size:13px; font-weight:700; cursor:pointer; }
.paneHeaderLink:hover{ color:#fff; }
.homeLiveRail{ display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding:6px clamp(16px,4vw,52px) 14px; scrollbar-width:none; }
.homeLiveRail::-webkit-scrollbar{ display:none; }
.homeLiveCard{ position:relative; flex:0 0 150px; width:150px; max-width:150px; cursor:pointer; border-radius:10px; background:var(--nf-card); padding:10px; display:flex; flex-direction:column; gap:8px; transition:transform .15s ease; }
.homeLiveCard:hover{ transform:scale(1.04); }
.homeFavStar{ position:absolute; top:6px; right:8px; z-index:2; color:#ffb02e; font-size:12px; text-shadow:0 1px 6px rgba(0,0,0,.7); }

/* Home reminder banner: the NEXT saved program reminder, tap to tune in.
   !important — styles.css still targets #homeReminderSection by ID (r8 box). */
.homeReminderBanner{
  display:flex !important; align-items:center; gap:11px; margin:14px clamp(16px,4vw,52px) 0; padding:11px 13px !important;
  border-radius:12px !important; background:linear-gradient(135deg,rgba(229,9,20,.16),rgba(20,20,26,.9)) !important;
  border:1px solid rgba(229,9,20,.3) !important; cursor:pointer; overflow:visible !important;
}
.homeReminderBanner[style*="none"]{ display:none !important; }
.reminderBellIcon{
  width:32px; height:32px; border-radius:9px; background:rgba(229,9,20,.16); border:1px solid rgba(229,9,20,.4);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.reminderBellIcon svg{ width:15px; height:15px; stroke:#ff6b73; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.reminderBannerInfo{ min-width:0; }
.reminderBannerTitle{ font-size:13.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reminderBannerMeta{ font-size:11px; color:#c9c9d2; font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reminderBannerCountdown{ margin-left:auto; flex:0 0 auto; background:var(--nf-red); font-size:10px; font-weight:800; border-radius:5px; padding:4px 8px; }

/* Home watchlist: 2:3 poster cards with a MOVIE/SERIES tag */
.homeWatchCard{ flex:0 0 130px; width:130px; cursor:pointer; }
.homeWatchArt{
  position:relative; aspect-ratio:2/3; border-radius:8px; overflow:hidden;
  background:linear-gradient(160deg,#23242e,#0e0f15); display:flex; align-items:center; justify-content:center;
}
.homeWatchArt img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.homeWatchFallback{ font-weight:800; font-size:17px; color:#cfd2dd; letter-spacing:.04em; }
.homeWatchTag{
  position:absolute; top:6px; left:6px; z-index:2; background:rgba(8,8,12,.78);
  border:1px solid rgba(255,255,255,.18); font-size:8.5px; font-weight:800; letter-spacing:.05em;
  border-radius:4px; padding:2px 6px;
}
.homeWatchName{ margin-top:6px; font-size:12px; font-weight:600; color:#c9c9d2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.homeLiveLogoStage{ position:relative; height:74px; border-radius:8px; background:#101018; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.homeLiveLogoStage img{ max-width:80%; max-height:80%; object-fit:contain; }
.homeLiveLogoStage span{ font-weight:800; font-size:15px; letter-spacing:.04em; color:#cfd2dd; }
.homeLiveCardName{ font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Search overlay (markup + Phase 1D JS + redesign CSS): make the whole overlay
   scrollable and keep results clear of the bottom nav. */
.searchOverlay{ overflow-y:auto; }
.searchOverlayInner{ padding-bottom:calc(90px + env(safe-area-inset-bottom)) !important; }
body.searchOverlayOpen #appBody{ overflow:hidden; }

/* Search empty state: tappable Top Searches rows (Option A, 2026-06-11) */
.searchTopList{ display:flex; flex-direction:column; }
.searchTopRow{ display:flex; align-items:center; gap:12px; padding:7px 0; cursor:pointer; }
.searchTopThumb{
  width:118px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; flex:0 0 auto;
  background:linear-gradient(160deg,#23242e,#0e0f15); display:flex; align-items:center; justify-content:center;
}
.searchTopThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.searchTopThumb span{ font-weight:800; color:#cfd2dd; font-size:14px; letter-spacing:.04em; }
.searchTopName{ flex:1; min-width:0; font-size:14px; font-weight:700; }
.searchTopLive{ color:#ff6b73; font-size:10px; font-weight:800; letter-spacing:.04em; }
.searchTopPlay{
  flex:0 0 auto; width:34px; height:34px; border-radius:17px;
  border:1.5px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; color:#fff;
}
.searchTopPlay svg{ width:13px; height:13px; }

/* Search results: program-aware blocks (Option D) — On Now + Coming Up */
.searchOnNowCard{
  border-radius:12px; background:linear-gradient(135deg,rgba(229,9,20,.18),#15151c);
  border:1px solid rgba(229,9,20,.35); padding:12px; margin:4px 0 10px;
}
.searchOnNowTop{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:#c9c9d2; min-width:0; }
.searchOnNowLive{ flex:0 0 auto; background:var(--nf-red); color:#fff; font-size:9px; font-weight:800; border-radius:4px; padding:2px 6px; }
.searchOnNowChannel{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.searchOnNowTime{ margin-left:auto; flex:0 0 auto; color:#9a9aa6; }
.searchOnNowTitle{ font-size:15.5px; font-weight:800; margin-top:7px; }
.searchOnNowBar{ height:3px; border-radius:2px; background:rgba(255,255,255,.18); overflow:hidden; margin-top:9px; }
.searchOnNowBar i{ display:block; height:100%; background:var(--nf-red); }
.searchOnNowWatch{
  margin-top:10px; width:100%; min-height:38px; border:0; border-radius:9px;
  background:#fff; color:#0a0a0e; font-weight:800; font-size:13.5px; cursor:pointer;
}
.searchUpcomingList{ display:flex; flex-direction:column; gap:9px; margin:4px 0 8px; }
.searchUpcomingRow{ display:flex; align-items:center; gap:11px; }
.searchUpcomingTime{ flex:0 0 52px; text-align:right; font-size:11.5px; font-weight:800; color:#9a9aa6; }
.searchUpcomingInfo{ flex:1; min-width:0; }
.searchUpcomingTitle{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.searchUpcomingChannel{ font-size:10.5px; color:#9a9aa6; font-weight:600; margin-top:1px; }
.searchUpcomingRow .programReminderButton{
  flex:0 0 auto; font-size:11px !important; font-weight:800 !important;
  padding:7px 11px !important; border-radius:8px !important; min-height:0 !important; width:auto !important;
}

/* Live TV tab on mobile: category chips above a full-width channel list
   (same pattern Movies/Series already use), and no sticky header overlap. */
/* Movies/Series grids: the tab already says what these are */
#movies .vodResultType, #series .vodResultType{ display:none !important; }

/* VOD modal: one clear primary action */
.vodModalActions .compactButton.primary, .compactButton.vodPlayAction{ background:var(--nf-red) !important; border-color:var(--nf-red) !important; color:#fff !important; font-weight:800 !important; }
/* ---- 14. Login: cinematic poster wall (Option A) -------------------------- */
#login{
  position:relative; width:100% !important; max-width:none !important; min-height:100vh; min-height:100dvh;
  margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column;
  background:#08080c !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  overflow-x:hidden;
}
/* The app hides/shows #login with inline style.display — the flex !important
   above must never beat the inline "none" or the login screen sticks around
   after a successful sign-in. */
#login[style*="none"]{ display:none !important; }
#login::before{ content:none !important; }
/* Blurred poster grid + scrim sit fixed behind the form (decorative only) */
.loginWall{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:6px; align-content:start;
  filter:blur(2.5px) saturate(1.05); transform:scale(1.08);
}
.loginWall i{ display:block; aspect-ratio:2/3; border-radius:8px; }
.loginWall .w1{ background:linear-gradient(160deg,#c4541d,#1d0f1e); }
.loginWall .w2{ background:linear-gradient(160deg,#15445f,#090d1c); }
.loginWall .w3{ background:linear-gradient(160deg,#5b2a66,#0d0a18); }
.loginWall .w4{ background:linear-gradient(160deg,#1d5f48,#070f0c); }
.loginWall .w5{ background:linear-gradient(160deg,#8a1f2d,#120710); }
.loginWall .w6{ background:linear-gradient(160deg,#7a611d,#0f0c06); }
.loginWall .w7{ background:linear-gradient(160deg,#2d3a8a,#070918); }
.loginWall .w8{ background:linear-gradient(160deg,#0e5f5f,#06100f); }
.loginScrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,8,12,.78), rgba(8,8,12,.92) 55%, #08080c);
}
/* The form floats centered above the wall; auto margins center it when it is
   shorter than the viewport and let the page scroll normally when taller. */
.loginPanel{
  position:relative; z-index:2; width:100%; max-width:430px;
  margin:auto; padding:max(26px, env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom));
}
.loginBrandBlock{ text-align:center; margin-bottom:20px; }
.loginBrand{ font-size:34px; font-weight:900; letter-spacing:-.025em; color:var(--nf-red); text-shadow:0 2px 20px rgba(0,0,0,.55); }
.loginBrand span{ color:#fff; }
.loginTagline{ color:#c9c9d2; font-size:14px; font-weight:600; margin-top:7px; text-shadow:0 1px 10px rgba(0,0,0,.5); }
@media (min-width:700px){
  .loginWall{ grid-template-columns:repeat(6,1fr); }
}
.loginModeTabs{ display:flex; gap:4px; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important; padding:4px !important; margin-bottom:20px; }
.loginModeTab{ flex:1; border:0 !important; border-radius:9px !important; padding:11px 8px !important; font-weight:800 !important; font-size:14px !important; background:transparent !important; color:#b7b7c2 !important; }
.loginModeTab.active{ background:var(--nf-red) !important; color:#fff !important; }
#login .fieldLabel{ font-size:11px !important; font-weight:800 !important; letter-spacing:.08em !important; text-transform:uppercase; color:#9a9aa6 !important; margin-bottom:7px !important; }
#login input, #login select, #login textarea{
  width:100%; background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.14) !important;
  border-radius:11px !important; min-height:52px; font-size:16px !important; color:#fff !important; padding:12px 14px !important;
}
#login input:focus, #login select:focus, #login textarea:focus{ border-color:var(--nf-red) !important; box-shadow:0 0 0 3px rgba(229,9,20,.16) !important; outline:none !important; }
#login .fieldGroup{ margin-bottom:14px !important; }
.passwordField{ display:flex !important; gap:8px; align-items:stretch; }
.passwordField input{ flex:1; min-width:0; }
.passwordToggle{ background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:11px !important; color:#fff !important; font-weight:800 !important; padding:0 16px !important; min-height:52px; }
.loginRemember{ display:flex !important; align-items:center; gap:12px; margin:6px 2px 18px !important; color:#d6d6de !important; font-size:14px !important; font-weight:600 !important; cursor:pointer; }
.loginRemember input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:46px !important; height:27px !important; min-height:0 !important;
  border-radius:15px !important; background:rgba(255,255,255,.18) !important; border:0 !important;
  position:relative; cursor:pointer; transition:background .18s ease; flex:0 0 auto; padding:0 !important; margin:0 !important;
}
.loginRemember input[type="checkbox"]::after{
  content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
  background:#fff; transition:transform .18s ease;
}
.loginRemember input[type="checkbox"]:checked{ background:var(--nf-red) !important; }
.loginRemember input[type="checkbox"]:checked::after{ transform:translateX(19px); }
.connectionDetails{ background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:11px !important; padding:4px 14px !important; margin-bottom:16px; }
.connectionDetails summary{ color:#b7b7c2 !important; font-weight:700 !important; font-size:14px !important; padding:10px 0 !important; cursor:pointer; }
#loginButton{
  width:100%; min-height:54px; background:var(--nf-red) !important; color:#fff !important; border:0 !important;
  border-radius:12px !important; font-size:16.5px !important; font-weight:800 !important; letter-spacing:.01em;
  box-shadow:0 10px 30px rgba(229,9,20,.3) !important; cursor:pointer; margin-top:6px;
}
#loginButton:hover{ background:var(--nf-red-2) !important; }
#loginButton:disabled{ opacity:.7; }
#loginMessage{ border:0 !important; background:rgba(229,9,20,.12) !important; color:#ffb4b9 !important; border-radius:10px !important; padding:11px 14px !important; font-weight:600; }
/* Service chips replace the visible dropdown (the select stays, hidden, as the
   source of truth for applySelectedServerPreset / saved sessions). */
.serverPresetNative{ position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important; padding:0 !important; border:0 !important; clip:rect(0 0 0 0); overflow:hidden; }
.serverSegRow{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.serverSegOption{
  border:1.5px solid rgba(255,255,255,.16) !important; background:rgba(255,255,255,.05) !important;
  border-radius:11px !important; padding:12px 6px !important; color:#c9c9d2 !important;
  font-weight:800 !important; font-size:14px !important; cursor:pointer;
  display:flex; flex-direction:column; gap:2px; align-items:center;
}
.serverSegOption small{ font-size:10.5px; font-weight:600; color:#9a9aa6; }
.serverSegOption.active{ border-color:var(--nf-red) !important; background:rgba(229,9,20,.12) !important; color:#fff !important; }
.serverSegOption.active small{ color:#e3a7ab; }
.loginCustomLink, .loginHelpLink, .loginAltLink{
  background:none !important; border:0 !important; color:#9a9aa6 !important;
  font-weight:700 !important; font-size:13.5px !important; cursor:pointer; padding:0 !important;
}
.loginCustomLink{ display:block; margin-top:10px; }
.loginCustomLink:hover, .loginHelpLink:hover{ color:#fff !important; }
.loginAltLink{ color:#fff !important; }

/* M3U lives behind the footer link now, not a tab strip */
.loginModeTabs{ display:none !important; }
.loginAlt{ text-align:center; margin-top:18px; color:#9a9aa6; font-size:14px; font-weight:600; }

/* Password eye */
.passwordField{ position:relative; }
.passwordToggle{ width:54px; display:flex; align-items:center; justify-content:center; }
.passwordToggle svg{ width:22px; height:22px; }
.passwordToggle.revealed{ color:var(--nf-red) !important; border-color:rgba(229,9,20,.5) !important; }

/* Remember me + help on one line */
.loginRememberRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 2px 18px; }
.loginRememberRow .loginRemember{ margin:0 !important; white-space:nowrap; }

/* CTA play glyph — \FE0E forces the monochrome text glyph, never the emoji */
#loginButton::before{ content:"\25B6\FE0E"; font-size:12px; margin-right:9px; vertical-align:1px; }

/* ---- 16. Home: brand bar + featured-title billboard ----------------------- */
.mobileHomeBar{
  display:none; position:absolute; top:0; left:0; right:0; z-index:12;
  align-items:center; gap:12px; padding:14px 16px 10px;
  background:linear-gradient(180deg, rgba(8,8,12,.72), transparent);
}
.mobileHomeBrand{ display:block !important; font-size:21px; font-weight:900; letter-spacing:-.02em; color:var(--nf-red); }
.mobileHomeBrand span{ color:#fff; }
.mobileHomeBarButton{
  margin-left:auto; width:36px; height:36px; border:0; border-radius:10px;
  background:rgba(0,0,0,.35); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.mobileHomeBarButton svg{ width:21px; height:21px; }
.mobileHomeBarAvatar{
  width:32px; height:32px; border:0; border-radius:9px; cursor:pointer;
  background:linear-gradient(135deg,var(--nf-red),#7c0a12); color:#fff; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}

.homeTrendingSection{ margin-top:4px; }
.trendingRailWrap{ position:relative; }
/* base CSS truncates pane titles aggressively; section headers must read full */
.homeLiveSection .paneHeaderTitle, .homeTrendingSection .paneHeaderTitle{
  white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important;
  max-width:none !important; flex:0 0 auto !important;
}

/* trend cards: LIVE badge for sports events on now */
.trendCard{ position:relative; }
.trendLiveBadge{
  position:absolute; top:8px; left:8px; z-index:3; background:var(--nf-red); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.06em; padding:3px 7px; border-radius:5px;
}

/* Live Now cards: program line + progress */
.homeLiveCardNow{ font-size:11.5px; color:#a9a9b4; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:14px; }
.homeLiveCardNow:empty{ display:none; }
.homeLiveCardBar{ height:3px; border-radius:2px; background:rgba(255,255,255,.16); overflow:hidden; }
.homeLiveCardBar i{ display:block; height:100%; background:var(--nf-red); }

@media (min-width:769px){
  .mobileHomeBar{ display:none !important; }

  /* ===== 20. DESKTOP REDESIGN (>=769px) — port the mobile aesthetic ========= */

  /* G1 — one shared content container: nothing runs full-bleed; one gutter */
  #appBody > .tab{ max-width:1480px; margin-left:auto; margin-right:auto; width:100%; padding-left:clamp(16px,4vw,52px); padding-right:clamp(16px,4vw,52px); box-sizing:border-box; }
  /* exempt the cinematic home billboard so it stays edge-to-edge */
  #home .spotlightHero.trendingHero{ margin-left:calc(-1*clamp(16px,4vw,52px)) !important; margin-right:calc(-1*clamp(16px,4vw,52px)) !important; }

  /* G2 — hide customer-facing dev/diagnostic panels (match mobile) */
  #playerHealthCard, #playerSignalDisplay, #controlCenterQaPanel, #controlCenterHealthDashboard{ display:none !important; }
  button[data-action="focusControlCenterSection('controlCenterQaPanel')"]{ display:none !important; }

  /* G3 — standardized page headers */
  .tabHeader{ margin-top:6px; }
  .tabKicker{ font-size:11px !important; font-weight:800 !important; letter-spacing:.16em !important; text-transform:uppercase; color:var(--nf-red) !important; }
  .tabTitle{ font-size:clamp(26px,2.4vw,34px) !important; font-weight:900 !important; letter-spacing:-.02em !important; color:#fff !important; }
  .tabDescription{ color:var(--nf-muted) !important; font-size:14px !important; max-width:680px; }

  /* G4 — kill off-brand cyan hover/active -> red/white */
  .listItem:hover{ background:rgba(255,255,255,.06) !important; }
  .listItem.activeChannel, .listItem.showAction{ background:rgba(229,9,20,.16) !important; box-shadow:inset 3px 0 0 var(--nf-red) !important; color:#fff !important; transform:none !important; }
  .vodCard:hover{ border-color:rgba(255,255,255,.22) !important; box-shadow:0 14px 34px rgba(0,0,0,.4) !important; }

  /* G5 — filter toolbars -> clean wrapping flex row (was a broken 4-col grid) */
  .mediaControls.controlCard, #categoryControls.controlCard{ display:flex !important; flex-wrap:wrap; align-items:flex-end; gap:12px; }
  .mediaControls .controlGroup, #categoryControls .controlGroup{ flex:1 1 160px; }
  .mediaControls .controlWide, #categoryControls .controlWide{ flex:2 1 240px; }
  .mediaControls .controlCheck, #categoryControls .controlCheck{ flex:0 0 auto; align-self:flex-end; padding-bottom:10px; white-space:nowrap; }
  .mediaControls input, .mediaControls select, #categoryControls input, #categoryControls select{ height:40px !important; background:#14141a !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:10px !important; padding:0 12px !important; color:#fff !important; }

  /* ---- HOME billboard ---- */
  #home .quickSearchPanel{ display:none !important; }
  .spotlightHero.trendingHero{ position:relative !important; }
  .trendingHero .trendingSourcePanel{ position:absolute !important; top:calc(var(--nf-nav-h) + 16px) !important; right:clamp(20px,5vw,60px) !important; left:auto !important; margin:0 !important; padding:6px 10px !important; width:auto !important; background:rgba(8,8,12,.4) !important; border:1px solid rgba(255,255,255,.1) !important; border-bottom:1px solid rgba(255,255,255,.1) !important; border-radius:999px !important; flex-direction:row !important; align-items:center !important; gap:8px !important; z-index:4 !important; }
  .trendingSourcePanel .trendingSourceLabel{ display:none !important; }
  .trendingRail .trendCard{ flex:0 0 clamp(150px,12vw,210px) !important; }

  /* ---- PLAYER ---- */
  .playerVideoWrap{ max-height:min(72vh,680px); border-radius:14px; overflow:hidden; }
  .channelInfoBar{ display:flex !important; align-items:center; gap:16px; flex-wrap:wrap; }
  .channelInfoText, .channelInfoMeta{ flex:1 1 auto; min-width:0; }
  #channelInfoActions, #playerHeadActions{ display:flex !important; align-items:center; gap:8px; flex:0 0 auto; overflow:visible; min-width:0; flex-wrap:wrap; }
  #channelInfoActions button{ height:38px; padding:0 14px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; font-weight:700; }

  /* ---- MY STUFF hub ---- */
  .myStuffHub{ max-width:1100px; margin:0 auto; }
  .myStuffOnboarding{ max-width:760px; }
  .myStuffOnboardingActions{ display:flex; flex-direction:row; flex-wrap:wrap; gap:12px; }
  .myStuffOnbBtn{ flex:1 1 200px; width:auto !important; }
  .myStuffTeamsEmpty{ max-width:760px; }

  /* ---- CONTROL CENTER tiles (after dev panels hidden) ---- */
  #discoverySettingsModal .controlCenterAction{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; }

  /* ---- LIVE TV two-pane ---- */
  #categoryContainer{ display:grid !important; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:14px; }
  #categoryList, #channelList{ width:auto !important; }
  #channelList .paneHeaderTitle{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; }
  /* channel rows: the now-playing progress bar was a fixed 340px line that ended
     mid-row and read as a stray line. Make it a clean, subtle full-width progress
     line under the program so it fits the row; tidy the row rhythm. */
  #channelList .listItemRow{ padding:0 4px !important; }
  #channelList .channelTextBlock{ display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0; }
  #channelList .channelNowLine{ font-size:12px; color:var(--nf-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #channelList .channelNowBar{ max-width:none !important; width:100% !important; height:3px !important; margin-top:4px !important; background:rgba(255,255,255,.09) !important; border-radius:2px; overflow:hidden; }
  #channelList .channelCategoryLabel{ font-size:12px; color:var(--nf-muted); }
  #channelList .listItem{ border-bottom-color:rgba(255,255,255,.05) !important; }

  /* ---- MOVIES / SERIES two-pane ---- */
  .categoryContainer.mediaPane .mediaCategoryList{ flex:0 0 300px !important; }
  .categoryContainer.mediaPane .mediaItemList{ flex:1 1 auto !important; }
  .mediaCategoryList, .mediaItemList{ background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:14px !important; box-shadow:none !important; }
  .vodGrid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important; gap:16px !important; }

  /* ---- PLAYER head icons: clean icon buttons (these were only styled on mobile,
     so on desktop the fav heart fell back to an unstyled red square). Hide the
     redundant fav heart since "Favorite" is already a text action; keep catch-up. */
  .playerHeadActions{ display:flex !important; align-items:center; gap:10px; flex:0 0 auto; }
  .playerHeadAct{ background:none !important; border:0 !important; min-height:0 !important; padding:0 !important; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:#cfd2dd !important; cursor:pointer; }
  .playerHeadAct[hidden]{ display:none !important; }
  .playerHeadAct svg{ width:20px; height:20px; }
  .playerHeadAct.active{ color:#ff6b73 !important; }
  #playerFavIcon{ display:none !important; }

  /* ---- CONTROL CENTER: hide the discovery/dev block + its tab (matches mobile) */
  #controlCenterDiscoveryBlock{ display:none !important; }
  button[data-action="focusControlCenterSection('controlCenterDiscoveryBlock')"]{ display:none !important; }

  /* ===== 20b. DETAIL POLISH — components that were only styled in the mobile
     layer fell back to unstyled/base on desktop. Bring them on-theme. ======== */

  /* Switch Channels: the scannable list (.playerChListRow/.playerChListLogo)
     was styled ONLY in cloudtv-mobile.css, so on desktop it rendered as block
     rows with full-size 360px logo images. Re-style as a multi-column grid. */
  #playerChannelRail{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) !important; gap:2px 18px !important; padding:4px 0 0 !important; overflow:visible !important; }
  .playerChListRow{ display:flex !important; align-items:center; gap:12px; padding:9px 12px !important; border-radius:9px; border-bottom:0 !important; cursor:pointer; transition:background .12s ease; }
  .playerChListRow:hover{ background:rgba(255,255,255,.05); }
  .playerChListRow.active{ background:rgba(229,9,20,.12) !important; }
  .playerChListLogo{ width:50px !important; height:34px !important; min-width:50px; border-radius:7px !important; background:#15151c !important; display:flex !important; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; }
  .playerChListLogo img{ max-width:84% !important; max-height:84% !important; width:auto !important; height:auto !important; object-fit:contain; }
  .playerChListLogo span{ font-weight:800; font-size:11px; color:#cfd2dd; letter-spacing:.03em; }
  .playerChListInfo{ min-width:0; flex:1; }
  .playerChListName{ font-size:13.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .playerChListNow{ font-size:11px; color:var(--nf-muted); font-weight:600; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .playerChListBadge{ flex:0 0 auto; font-size:9px; font-weight:800; letter-spacing:.05em; border-radius:4px; padding:3px 7px; }
  .playerChListBadge.active{ background:rgba(255,255,255,.16); color:#fff; }
  .playerChListBadge.alt{ background:var(--nf-red); color:#fff; }
  .playerChListBadge.favorite{ background:none; color:#ffb02e; font-size:13px; padding:0; }

  /* section headers: drop the boxed gray bar (the netflix rule removed the
     border but left the rgba(255,255,255,.03) fill from styles.css) */
  .paneHeader{ background:none !important; border-bottom:0 !important; }

  /* Player menu sheet: off-brand navy gradient + crimson glow, forced full-width
     on desktop -> neutral dark popover constrained to the player's bottom-right */
  .playerSettingsPanel{ left:auto !important; right:18px !important; bottom:70px !important; width:min(420px,calc(100% - 36px)) !important; background:linear-gradient(180deg,#1b1b22,#101016) !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:16px !important; box-shadow:0 24px 60px rgba(0,0,0,.55) !important; }

  /* connection status pill: neutral text + WhatsApp-green dot reads off-brand */
  .connectionStatus{ color:#c9c9d2 !important; font-weight:700 !important; background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.1) !important; min-height:30px !important; }

  /* recently-watched already lives on Home + the Switch Channels rail; hide the
     redundant single-card under-player strip on desktop too (mobile already does) */
  #recentSection{ display:none !important; }

  /* ---- PLAYER live-TV transport parity with mobile -------------------------
     On mobile live TV the floating center cluster is HIDDEN while playing, the
     ±30s seek buttons are removed entirely (you can't seek a live edge), and the
     big center play appears only when paused. Those rules lived ONLY in
     cloudtv-mobile.css, so on desktop the rewind/play/forward stayed pinned on
     screen. Mirror the mobile behavior so desktop live TV matches. (VOD keeps its
     center transport — those streams are seekable — because it has no .liveMode.) */
  .playerVideoWrap.liveMode .ytCenterControls{ display:none !important; }
  .playerVideoWrap.liveMode.isPaused .ytCenterControls{ display:flex !important; }
  .playerVideoWrap.liveMode .ytCenterControls .ytSeek{ display:none !important; }
  .playerVideoWrap.liveMode.isPaused .ytCenterControls .ytPlay{ display:grid !important; }

  /* Fullscreen must truly fill the screen — the desktop .playerVideoWrap
     max-height cap above otherwise letterboxes the video inside a 100vh black
     frame. Also hide the cursor once the controls have idled out in fullscreen. */
  .playerVideoWrap:fullscreen, .playerVideoWrap:-webkit-full-screen{ max-height:none !important; border-radius:0 !important; }
  .playerVideoWrap:fullscreen:not(.controlsVisible){ cursor:none; }
  .playerVideoWrap:-webkit-full-screen:not(.controlsVisible){ cursor:none; }

  /* ===== Unified home card system — one shape language across the four home
     rails (trending / favorites / watchlist / continue). They had mismatched
     corner radii (18/10/8/8px), different frames (glass gradient vs solid vs
     bare), conflicting hovers and widths. Normalize to a single 12px dark tile
     with a hairline border, an image/logo on top, a text footer, and one hover.
     Mobile keeps its own treatment (cloudtv-mobile.css). =================== */
  .trendCard, .continueCard, .homeLiveCard, .homeWatchCard{
    border-radius:12px !important;
    background:var(--nf-card,#181820) !important;
    border:1px solid rgba(255,255,255,.07) !important;
    box-shadow:none !important;
    overflow:hidden;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }
  .trendCard:hover, .continueCard:hover, .homeLiveCard:hover, .homeWatchCard:hover{
    transform:translateY(-4px) !important;
    border-color:rgba(255,255,255,.2) !important;
    box-shadow:0 16px 40px rgba(0,0,0,.55) !important;
    z-index:2 !important;
  }
  /* consistent per-type widths: the two poster rails match; the two landscape
     rails (channel logos, resume thumbnails) match each other. */
  .trendingRail .trendCard{ flex:0 0 152px !important; }
  .homeWatchCard{ flex:0 0 152px !important; width:152px !important; }
  .homeLiveRail .homeLiveCard{ flex:0 0 172px !important; width:172px !important; max-width:172px !important; }
  .continueRow .continueCard{ flex:0 0 206px !important; width:206px !important; min-width:206px !important; }

  /* poster rails (trending + watchlist): full-bleed 2:3 poster + text footer */
  .trendThumb, .trendFallback, .homeWatchArt{ aspect-ratio:2/3 !important; border-radius:0 !important; }
  .homeWatchCard{ padding:0 !important; }
  .trendInfo{ padding:9px 11px 11px !important; }
  .homeWatchName{ margin:0 !important; padding:9px 11px 11px !important; }

  /* landscape rails (favorites logo tile + continue thumbnail): align inner radii */
  .homeLiveCard{ padding:10px !important; gap:8px !important; }
  .homeLiveLogoStage{ border-radius:9px !important; height:84px !important; }
  .continueThumb{ border-radius:0 !important; }
  .continueInfo{ padding:9px 11px 11px !important; }

  /* unified title + meta typography on every card */
  .trendTitle, .continueTitle, .homeLiveCardName, .homeWatchName{
    font-size:13px !important; font-weight:700 !important; color:#fff !important; line-height:1.25 !important;
  }
  .trendMeta, .continueMeta, .homeLiveCardNow{
    font-size:11.5px !important; font-weight:600 !important; color:var(--nf-muted) !important; margin-top:4px !important;
  }
  .trendLabel{ font-size:9.5px !important; font-weight:800 !important; letter-spacing:.1em !important; color:var(--nf-red) !important; margin-bottom:4px !important; }
  /* consistent corner tags (LIVE / type) across the poster cards */
  .trendLiveBadge, .homeWatchTag{ top:7px !important; left:7px !important; border-radius:5px !important; font-size:9px !important; font-weight:800 !important; letter-spacing:.05em !important; padding:3px 7px !important; }

  /* ===== Search overlay redesign — the field was a borderless 36px underline
     with a washed-out (20% white) placeholder and a × floating top-right. Make it
     a proper boxed search with a leading magnifier, a readable placeholder, a real
     close button, and a tighter centred column. ============================ */
  .searchOverlayInner{ max-width:720px !important; padding:64px 24px 60px !important; }
  .searchOverlayInput{
    -webkit-appearance:none !important; appearance:none !important;
    font-size:19px !important; font-weight:600 !important; letter-spacing:0 !important;
    background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23a7adba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 18px center !important;
    border:1px solid rgba(255,255,255,.12) !important; border-radius:14px !important;
    padding:16px 18px 16px 52px !important; color:#fff !important; caret-color:var(--nf-red);
  }
  .searchOverlayInput::placeholder{ color:rgba(255,255,255,.42) !important; font-weight:500 !important; }
  .searchOverlayInput::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
  .searchOverlayInput:focus{ border-color:var(--nf-red) !important; background-color:rgba(255,255,255,.07) !important; box-shadow:0 0 0 3px rgba(229,9,20,.14) !important; }
  .searchOverlayClose{
    top:18px !important; right:0 !important; width:40px !important; height:40px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.12) !important;
    border-radius:50% !important; color:#cfd2dd !important; font-size:15px !important; padding:0 !important;
  }
  .searchOverlayClose:hover{ background:rgba(255,255,255,.12) !important; color:#fff !important; }
  .searchOverlayScopes{ margin-top:16px !important; }
  .searchResultsWrap{ margin-top:26px !important; }

  /* ===== HOME layout polish — align everything to one gutter, give the trending
     pills a readable contained home, brighten row titles, equalize the hero
     buttons, trim the hero, and drop the repeated "NEW RELEASE" + dev status. */

  /* (1) ONE shared gutter. The section headers were getting the page gutter
     twice (the tab pads clamp(16,4vw,52) and .paneHeader pads it again ->
     ~104px), so titles floated 52px right of their own card rows. Align the
     hero content, the headers AND every rail to the single tab gutter. */
  #home .trendingHeader{ padding-left:clamp(16px,4vw,52px) !important; padding-right:clamp(16px,4vw,52px) !important; min-height:min(64vh,580px) !important; }
  #home .paneHeader{ padding-left:0 !important; padding-right:0 !important; }
  #home .trendingRail, #home .homeLiveRail, #home .continueRow{ padding-left:0 !important; }

  /* (2) trending source pills: a compact, solid, readable segmented control —
     not low-contrast chips floating over the artwork. */
  #home .trendingHero .trendingSourcePanel{ position:absolute !important; top:calc(var(--nf-nav-h) + 18px) !important; right:clamp(20px,5vw,52px) !important; left:auto !important; margin:0 !important; padding:5px !important; flex-direction:row !important; align-items:center !important; gap:4px !important; width:auto !important; background:rgba(8,8,12,.8) !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:999px !important; z-index:4 !important; }
  #home .trendingSourcePanel .sourcePill{ padding:8px 16px !important; font-size:12.5px !important; color:#c4c9d4 !important; background:transparent !important; border:0 !important; box-shadow:none !important; transform:none !important; }
  #home .trendingSourcePanel .sourcePill:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; transform:none !important; box-shadow:none !important; }
  #home .trendingSourcePanel .sourcePill.active{ background:var(--nf-red) !important; color:#fff !important; box-shadow:none !important; letter-spacing:0 !important; }
  #home .trendingSourceLabel, #home .trendingProviderStatus{ display:none !important; }

  /* (3) brighter, sentence-case row titles (were muted gray) */
  #home .paneHeaderTitle{ color:#f3f5f9 !important; font-size:18px !important; font-weight:700 !important; letter-spacing:-.01em !important; text-transform:none !important; }
  #home .paneHeaderLink{ color:#c4c9d4 !important; }

  /* (4) equal-height hero buttons. box-sizing alone won't do it (auto height +
     the info button's 1px border = +2px); pin an explicit height so both match. */
  #home .nfHeroBtn{ box-sizing:border-box !important; height:54px !important; padding-top:0 !important; padding-bottom:0 !important; }

  /* (5) drop the eight identical "NEW RELEASE" card labels — the row title
     already says it; keep the year · rating meta. */
  #home .homeTrendingSection .trendCard .trendLabel{ display:none !important; }
}

/* ---- 17. Live TV rows: now-playing line + progress ------------------------ */
.channelNowLine{ display:block; font-size:12px; color:#a9a9b4; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.channelNowBar{ display:block; height:3px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; margin-top:6px; max-width:340px; }
.channelNowBar i{ display:block; height:100%; background:var(--nf-red); }

/* ---- 17b. Player action pills: uniform shapes, no ragged wraps ------------ */
/* ---- 17c. Control Center: clean mobile sheet ------------------------------ */
/* ---- 19. Movies/Series browse: shelf rows + category picker sheet --------- */
.vodShelvesHost{ display:block !important; }
.vodShelfRow{ margin:4px 0 14px; }
.vodShelfHead{ display:flex; align-items:baseline; gap:8px; padding:0 2px 8px; }
.vodShelfTitle{ font-size:15.5px; font-weight:800; letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vodShelfPin{ color:#ffd25e; font-size:12px; margin-left:6px; }
.vodShelfCount{ font-size:11px; font-weight:700; color:var(--nf-muted); }
.vodShelfSeeAll{ margin-left:auto; flex:0 0 auto; background:none !important; border:0 !important; color:#9a9aa6 !important; font-size:12.5px !important; font-weight:700 !important; cursor:pointer; padding:4px 2px !important; width:auto !important; }
/* fixed-width cards so every poster in a rail is identical height; the rail
   scrolls and the next card "peeks" — uniform regardless of viewport */
.vodShelfRail{ display:flex; align-items:flex-start; gap:10px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 6px; scrollbar-width:none; scroll-snap-type:x proximity; }
.vodShelfRail::-webkit-scrollbar{ display:none; }
.vodShelfCard{ flex:0 0 30vw; max-width:128px; min-width:104px; background:none; border:0; padding:0; text-align:left; cursor:pointer; color:#e8e8ee; scroll-snap-align:start; }
.vodShelfPoster{ position:relative; display:block; width:100%; aspect-ratio:2/3; border-radius:8px; overflow:hidden; background:#15151d; box-shadow:0 6px 16px rgba(0,0,0,.4); } /* r8 = artwork tier */
.vodShelfPosterImg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.vodShelfInitials{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#8a8a96; }
.vodShelfName{ display:block; margin-top:6px; font-size:11.5px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vodShelfSeeAllCard{
  flex:0 0 30vw; max-width:128px; min-width:104px; aspect-ratio:2/3; border-radius:9px; cursor:pointer;
  border:1.5px dashed rgba(255,255,255,.22); background:rgba(255,255,255,.03); color:#c9c9d2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:12px; font-weight:700;
}
.vodShelfSeeAllCard b{ font-size:18px; color:#fff; }
.vodShelfSkeleton{ flex:0 0 30vw; max-width:128px; min-width:104px; aspect-ratio:2/3; border-radius:9px; background:linear-gradient(110deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 70%); background-size:200% 100%; animation:vodShimmer 1.4s ease infinite; }
@keyframes vodShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.vodShelfSentinel{ height:8px; }

/* search + cards share one 12px inset and one 12px radius so edges line up */
.vodCategorySheetSearch{
  display:block; box-sizing:border-box; width:calc(100% - 24px) !important; margin:0 12px 12px !important; height:48px;
  background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.1) !important;
  border-radius:12px !important; color:#fff !important; font-size:16px !important; padding:0 14px !important;
}
#vodCategorySheet .mobileSheetClose{ border-radius:12px !important; height:40px; }
.vodCategorySheetList{ overflow-y:auto; max-height:52vh; padding:0 12px 14px; }
.vodCategorySheetSection{ padding:16px 12px 8px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--nf-muted); }
/* grouped iOS-style cards — identical width + radius as the search box */
.vodSheetGroup{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; margin:0; }
.vodSheetGroupPinned{ margin-bottom:8px; } /* pinned "Favorites" card sits above All categories */
.vodSheetGroupSpaced{ margin-top:14px; }
.vodSheetGroup > .vodCategorySheetRow:not(:last-child),
.vodSheetGroup > .vodSheetHiddenHeader:not(:last-child){ border-bottom:1px solid rgba(255,255,255,.06); }
.vodCategorySheetEmpty{ padding:24px 12px; text-align:center; color:var(--nf-muted); font-size:14px; }
/* every row is exactly 54px tall so the cards read as a clean even list */
.vodCategorySheetRow{ display:flex; align-items:stretch; gap:0; width:100%; min-height:54px; }
.vodCategorySheetRow.active{ background:rgba(255,255,255,.06) !important; }
.vodCategorySheetRow.isHidden{ opacity:.6; }
.vodCategorySheetSelect{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:9px; padding:0 4px 0 14px; min-height:54px;
  background:none !important; border:0 !important; color:#e8e8ee !important; font-size:15px !important; font-weight:600 !important; text-align:left; cursor:pointer;
}
.vodCategorySheetRow.active .vodCategorySheetSelect{ color:#fff !important; }
.vodCategorySheetRow.active .vodCategorySheetSelect::after{ content:"✓"; color:var(--nf-red); font-weight:900; flex:0 0 auto; margin-left:10px; }
.vodSheetShelfTag{ margin-left:auto; flex:0 0 auto; font-size:12.5px; font-weight:700; color:#7ddcff; }
.vodCategorySheetRow.active .vodSheetShelfTag{ margin-left:auto; }
.vodCategorySheetHideBtn{
  flex:0 0 auto; width:48px; align-self:stretch; cursor:pointer;
  background:none !important; border:0 !important; color:#8a8a96; display:flex; align-items:center; justify-content:center;
}
.vodCategorySheetHideBtn:active{ transform:scale(.92); }
.vodCategorySheetHideBtn svg{ width:20px; height:20px; }
.vodCategorySheetRow.isHidden .vodCategorySheetHideBtn{ color:var(--nf-red); }
.vodSheetHiddenHeader{
  display:flex; align-items:center; gap:9px; width:100%; min-height:54px; padding:0 14px; cursor:pointer;
  background:none !important; border:0 !important; color:#c9c9d2 !important; font-size:15px !important; font-weight:600 !important; text-align:left;
}
.vodSheetChevron{ flex:0 0 auto; color:#8a8a96; display:flex; align-items:center; transition:transform .15s ease; }
.vodSheetChevron svg{ width:18px; height:18px; }
.vodSheetChevron.open{ transform:rotate(90deg); }
.vodCategorySheetStar{ color:#ffd25e; font-size:14px; flex:0 0 auto; }
.vodCategorySheetName{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vodCategorySheetCount{ margin-left:auto; flex:0 0 auto; font-size:12px; font-weight:600; color:var(--nf-muted); }
.vodSheetHiddenHeader .vodCategorySheetCount{ margin-left:auto; }

/* ---- 18. Search overlay: scopes, recent, browse --------------------------- */
.searchOverlayScopes{ display:flex; gap:8px; margin-top:14px; overflow-x:auto; scrollbar-width:none; }
.searchOverlayScopes::-webkit-scrollbar{ display:none; }
.searchScopeChip{ flex:0 0 auto; width:auto !important; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); color:#e8e8ee; border-radius:999px; padding:7px 15px !important; font-size:13.5px !important; font-weight:600; cursor:pointer; }
.searchScopeChip.active{ background:#fff; border-color:#fff; color:#0a0a0e; }
.searchRecentRow{ display:flex; flex-wrap:wrap; gap:8px; }
.searchRecentChip{ border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#d6d6de; border-radius:999px; padding:7px 14px !important; width:auto !important; font-size:13px !important; font-weight:600; cursor:pointer; }
.searchBrowseGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.searchBrowseTile{
  position:relative; aspect-ratio:16/9; border:0; border-radius:11px; cursor:pointer;
  display:flex; align-items:flex-end; padding:10px 12px; color:#fff;
  font-weight:800; font-size:14.5px; text-shadow:0 1px 8px rgba(0,0,0,.8); text-align:left;
}
.sbLive{ background:linear-gradient(160deg,#15445f 0%,#0c1620 100%); }
.sbMovies{ background:linear-gradient(160deg,#8a1f2d 0%,#120710 100%); }
.sbSeries{ background:linear-gradient(160deg,#5b2a66 0%,#0d0a18 100%); }
.sbStuff{ background:linear-gradient(160deg,#1d5f48 0%,#070f0c 100%); }
.searchResultName{ text-transform:none !important; }
.searchResultItem{ position:relative; padding-right:32px !important; }
.searchResultItem::after{ content:"\203A"; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#8a8a96; font-size:20px; font-weight:700; }

/* ---- 15. New components: live badges, channel switcher, more-like-this --- */
.homeLiveCard{ position:relative; }
.homeLiveBadge{ position:absolute; top:15px; left:15px; z-index:3; background:var(--nf-red); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:2px 6px; border-radius:5px; }

.playerChannelRailSection{ margin-top:18px; }
.playerChannelRail{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding:6px clamp(16px,4vw,52px) 14px; scrollbar-width:none; }
.playerChannelRail::-webkit-scrollbar{ display:none; }
.playerChannelDot{ flex:0 0 auto; width:72px; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; color:#c9c9d2; font-size:10.5px; font-weight:600; }
.playerChannelDotStage{ width:60px; height:60px; border-radius:32px; background:#15151d; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.playerChannelDotStage img{ max-width:74%; max-height:74%; object-fit:contain; }
.playerChannelDotStage span{ font-weight:800; font-size:11px; color:#cfd2dd; }
.playerChannelDot.active .playerChannelDotStage{ outline:2.5px solid var(--nf-red); outline-offset:2px; }
.playerChannelDotName{ max-width:72px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#vodMoreLikeThis{ margin-top:18px; }
.vodMoreLikeTitle{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9a9aa6; margin-bottom:10px; }
.vodMoreLikeGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.vodMoreLikeCard{ cursor:pointer; }
.vodMoreLikePoster{ position:relative; aspect-ratio:2/3; border-radius:9px; overflow:hidden; background:#15151d; display:flex; align-items:center; justify-content:center; }
.vodMoreLikePosterImg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.vodMoreLikeInitials{ font-weight:800; color:#8a8a96; font-size:16px; }
.vodMoreLikeName{ display:block; margin-top:6px; font-size:12px; font-weight:700; color:#d6d6de; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- My Stuff hub (shelf layout + Teams) --------------------------------- */
.myStuffHub{ padding:0 0 calc(96px + env(safe-area-inset-bottom)); }
.myStuffTop{ display:flex; align-items:flex-start; gap:12px; padding:18px clamp(16px,4vw,52px) 6px; }
.myStuffTopText{ flex:1; min-width:0; }
.myStuffKicker{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--nf-red); }
.myStuffGreeting{ font-size:24px; font-weight:800; margin:2px 0 9px; letter-spacing:-.01em; }
.myStuffStatStrip{ display:flex; flex-wrap:wrap; gap:8px; }
.myStuffStat{ font-size:12px; font-weight:600; color:#c9c9d2; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:4px 11px; }
.myStuffStat b{ color:#fff; font-weight:800; }
.myStuffManageGear{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#e6e6ee; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.myStuffManageGear svg{ width:20px; height:20px; }
.myStuffManageGear:hover{ background:rgba(255,255,255,.12); }

.myStuffOnboarding{ margin:10px clamp(16px,4vw,52px) 4px; padding:18px; border-radius:16px; background:linear-gradient(135deg,rgba(229,9,20,.16),rgba(20,20,26,.92)); border:1px solid rgba(229,9,20,.28); }
.myStuffOnboarding h3{ font-size:17px; font-weight:800; margin:0 0 6px; }
.myStuffOnboarding p{ font-size:13px; color:#c9c9d2; margin:0 0 14px; line-height:1.5; }
.myStuffOnboardingActions{ display:flex; flex-wrap:wrap; gap:8px; }
.myStuffOnbBtn{ font-size:13px; font-weight:700; border-radius:10px; padding:9px 14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; cursor:pointer; }
.myStuffOnbBtn.primary{ background:var(--nf-red); border-color:var(--nf-red); }

.myStuffShelf{ margin-top:18px; }
.myStuffShelfHead{ display:flex; align-items:baseline; gap:10px; padding:0 clamp(16px,4vw,52px) 10px; }
.myStuffShelfHead h3{ font-size:16px; font-weight:800; margin:0; }
.myStuffShelfMeta{ margin-left:auto; font-size:12px; font-weight:700; color:var(--nf-muted); }
.myStuffShelfAction{ margin-left:auto; width:auto; min-height:auto; flex:0 0 auto; background:none; border:0; color:#ff6b73; font-size:13px; font-weight:800; cursor:pointer; padding:0; }
.myStuffRail{ display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:2px clamp(16px,4vw,52px) 6px; scrollbar-width:none; }
.myStuffRail::-webkit-scrollbar{ display:none; }
.myStuffRail .continueCard{ flex:0 0 auto; }

.myStuffTeamsShelf{ margin-top:14px; }
.myStuffTeamsBody{ padding:0 clamp(16px,4vw,52px); display:flex; flex-direction:column; gap:12px; }
.myStuffTeamsEmpty{ width:100%; display:flex; align-items:center; gap:14px; text-align:left; padding:16px; border-radius:16px; background:linear-gradient(135deg,#1d1f2b,#101017); border:1px dashed rgba(255,255,255,.18); cursor:pointer; color:#fff; }
.myStuffTeamsEmptyIcon{ font-size:26px; flex:0 0 auto; }
.myStuffTeamsEmptyText{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.myStuffTeamsEmptyText b{ font-size:15px; font-weight:800; }
.myStuffTeamsEmptyText small{ font-size:12px; color:#c9c9d2; }
.myStuffTeamsEmptyAdd{ flex:0 0 auto; font-size:12.5px; font-weight:800; color:#fff; background:var(--nf-red); border-radius:9px; padding:8px 12px; }

.myStuffTeam{ border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.myStuffTeamHead{ display:flex; align-items:center; gap:10px; padding:12px; }
.myStuffTeamName{ flex:1; min-width:0; display:flex; align-items:center; gap:11px; background:none; border:0; color:#fff; cursor:pointer; text-align:left; padding:0; }
.myStuffTeamDot{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; background:linear-gradient(150deg,#2a2c3a,#15161e); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#dfe2ee; }
.myStuffTeamLabel{ min-width:0; display:flex; flex-direction:column; }
.myStuffTeamLabel b{ font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.myStuffTeamLabel small{ font-size:11.5px; color:var(--nf-muted); font-weight:600; }
.myStuffTeamRemove{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#c9c9d2; font-size:12px; cursor:pointer; }
.myStuffTeamRemove:hover{ background:rgba(229,9,20,.25); color:#fff; }
.myStuffTeamGames{ border-top:1px solid rgba(255,255,255,.06); }
.myStuffTeamHint{ padding:14px; font-size:12.5px; color:var(--nf-muted); }

.teamGame{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid rgba(255,255,255,.05); }
.teamGame:first-child{ border-top:0; }
.teamGameMeta{ flex:1; min-width:0; }
.teamGameTitle{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.teamGameSub{ font-size:11.5px; color:var(--nf-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.teamGameLive{ color:#ff6b73; font-weight:800; }
.teamGameTime{ font-weight:700; color:#c9c9d2; }
.teamGameActions{ flex:0 0 auto; display:flex; align-items:center; gap:7px; }
.teamWatchBtn{ font-size:12px; font-weight:800; border-radius:8px; padding:7px 12px; background:var(--nf-red); border:0; color:#fff; cursor:pointer; }
.teamGameActions .programReminderButton{ font-size:11px; padding:6px 9px; }

.myStuffRecentCard{ flex:0 0 110px; width:110px; cursor:pointer; }
.myStuffRecentArt{ position:relative; aspect-ratio:2/3; border-radius:8px; overflow:hidden; background:linear-gradient(160deg,#23242e,#0e0f15); display:flex; align-items:center; justify-content:center; }
.myStuffRecentArt img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.myStuffRecentFallback{ font-weight:800; font-size:15px; color:#cfd2dd; letter-spacing:.04em; }
.myStuffRecentTag{ position:absolute; top:6px; left:6px; z-index:2; background:rgba(8,8,12,.78); border:1px solid rgba(255,255,255,.18); font-size:8px; font-weight:800; letter-spacing:.05em; border-radius:4px; padding:2px 5px; }
.myStuffRecentName{ margin-top:6px; font-size:11.5px; font-weight:600; color:#c9c9d2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.addTeamLeagueChips{ display:flex; gap:8px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:none; }
.addTeamLeagueChips::-webkit-scrollbar{ display:none; }
.addTeamLeagueChip{ flex:0 0 auto; width:auto !important; font-size:12.5px; font-weight:700; border-radius:999px; padding:7px 14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#d6d6de; cursor:pointer; }
.addTeamLeagueChip.active{ background:#fff; color:#0b0b0f; border-color:#fff; }
.addTeamCustomRow{ padding:0 0 8px; }
.addTeamCustomBtn{ width:100%; font-size:13px; font-weight:700; border-radius:10px; padding:11px 14px; background:rgba(229,9,20,.14); border:1px solid rgba(229,9,20,.4); color:#fff; cursor:pointer; text-align:left; }
.addTeamSheetList{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.addTeamRow{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); cursor:pointer; text-align:left; color:#fff; }
.addTeamRow.added{ background:rgba(46,160,90,.14); border-color:rgba(46,160,90,.4); }
.addTeamRowDot{ flex:0 0 auto; width:36px; height:36px; border-radius:10px; background:linear-gradient(150deg,#2a2c3a,#15161e); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#dfe2ee; }
.addTeamRowText{ flex:1; min-width:0; display:flex; flex-direction:column; }
.addTeamRowText b{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.addTeamRowText small{ font-size:11px; color:var(--nf-muted); }
.addTeamRowMark{ flex:0 0 auto; font-size:12px; font-weight:800; color:#c9c9d2; }
.addTeamRow.added .addTeamRowMark{ color:#67d18b; }

/* Live TV rows on mobile: bigger channel art, stronger title */