/* ============================================================================
   CloudTV — Mobile layer  (loaded LAST, after styles.css + redesign + netflix)
   Phone-only overrides (@media max-width). Extracted from cloudtv-netflix.css
   on 2026-06-10 so all phone-sized styling lives in one place.
   Desktop rules stay in their base layers; this file only adds mobile @media.
   ============================================================================ */

@media (max-width:768px){
  #bottomNav .bottomNavInner{ grid-template-columns:repeat(6,1fr) !important; }
  #bottomNav .bottomNavText{ font-size:9px !important; letter-spacing:0 !important; }
  #bottomNav{ background:rgba(7,8,11,.94) !important; }
  #bottomNav .bottomNavItem.active .bottomNavIcon,
  #bottomNav .bottomNavItem.active svg{ color:var(--nf-red) !important; stroke:var(--nf-red) !important; }
  #bottomNav .bottomNavItem.active{
    background:linear-gradient(180deg,rgba(229,9,20,.18),rgba(229,9,20,.06)) !important;
    color:#fff !important;
    text-shadow:none !important;
  }
  #bottomNav .bottomNavItem.active::before{
    background:rgba(229,9,20,.08) !important;
    border:1px solid rgba(229,9,20,.18) !important;
    box-shadow:0 0 18px rgba(229,9,20,.14) !important;
    opacity:1 !important;
    transform:scale(1) !important;
  }
  #bottomNav .bottomNavItem.active::after{
    background:var(--nf-red) !important;
    border:0 !important;
    box-shadow:0 0 12px rgba(229,9,20,.55) !important;
    opacity:1 !important;
    transform:translateX(-50%) scaleX(1) !important;
  }
  #home .quickSearchPanel{
    display:none !important;
  }
}

@media (max-width:768px){
  /* ---- Home Option A: billboard card (owner-picked 2026-06-11) -----------
     One sizing system for the whole home tab: 16px page gutter everywhere,
     10px radius on every rail card, one section-header style. */
  /* chips row sits in flow between the brand bar and the hero card */
  .trendingHero .trendingSourcePanel{
    position:static !important; top:auto !important; right:auto !important; left:auto !important;
    width:auto !important; /* base width:100% + side margins = page h-scroll */
    margin:2px 16px 12px !important; padding:0 !important;
    background:none !important; border:0 !important; border-radius:0 !important;
  }
  .spotlightHero.trendingHero{ gap:0 !important; } /* base flex gap added 18px between chips and card */
  .trendingSourcePills{ gap:8px !important; margin:0 !important; padding:0 !important; }
  .trendingSourcePanel .sourcePill{
    height:32px; display:inline-flex; align-items:center;
    padding:0 14px !important; border:1px solid rgba(255,255,255,.22) !important;
    border-radius:999px !important; font-size:12.5px !important;
  }
  .trendingSourcePanel .sourcePill.active{ border-color:#fff !important; }
  /* the billboard is a framed rounded card on the same 16px gutter */
  .trendingHeader{
    margin:0 16px !important;
    min-height:0 !important; aspect-ratio:5/6 !important; max-height:62vh;
    padding:0 16px 16px !important;
    border-radius:16px !important;
  }
  .trendingHeader::before{ /* bottom-weighted scrim under the in-card text */
    background:linear-gradient(to top, rgba(5,6,10,.94) 0%, rgba(5,6,10,.55) 30%, rgba(5,6,10,.06) 58%, rgba(5,6,10,0) 78%) !important;
  }
  .spotlightTitle{ font-size:clamp(24px,7vw,30px) !important; }
  .spotlightCopy{ font-size:12.5px !important; -webkit-line-clamp:2; }
  .nfHeroBtns{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px; width:100%; max-width:none; margin-top:14px; }
  .nfHeroBtn{ min-height:44px; min-width:0; max-width:none; justify-content:center; padding:11px 12px; font-size:14.5px; border-radius:9px; }
  .nfHeroBtn.info{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.10); backdrop-filter:none; }
  .nfHeroBtn svg{ width:16px; height:16px; }
  /* sections: identical header + rail rhythm */
  .paneHeader{ padding:0 16px !important; margin:20px 0 10px !important; }
  .paneHeaderTitle{ font-size:17px !important; letter-spacing:0 !important; }
  .paneHeaderLink, #homeContinueCount{ font-size:12px !important; font-weight:700 !important; }
  /* the trending RAIL stays in the DOM (it feeds the hero card + backdrop)
     but on phones the hero IS the trending surface — hide the rail section */
  #homeTrendingSection{ display:none !important; }
  /* reminder banner + watchlist posters on the shared 16px gutter */
  .homeReminderBanner{ margin:14px 16px 0 !important; }
  .homeWatchCard{ flex:0 0 110px !important; width:110px !important; }
  /* every home section is FLAT (header + rail) — no boxed panels; the boxes
     came from styles.css .continueSection / #homeRecentSection / .reminderSection */
  .continueSection, .reminderSection, #homeRecentSection{
    margin:0 !important; border:0 !important; border-radius:0 !important;
    background:none !important; box-shadow:none !important; overflow:visible !important;
  }
  /* brand bar: one control (avatar) — the hamburger duplicated bottom-nav More */
  .mobileHomeBarButton{ display:none !important; }
  /* margin-left:auto — the right-push lived on the hidden hamburger */
  .mobileHomeBarAvatar{ width:36px !important; height:36px !important; min-height:0 !important; border-radius:10px !important; margin-left:auto !important; }
  /* content must clear the fixed bottom nav (sections were sliding under it) */
  .tab{ padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important; }
  .trendingRail, .continueRow, .homeRecent, #recent, .homeLiveRail{
    /* scroll-padding keeps scroll-snap aligned to the 16px gutter — without it
       the rail loads snapped 16px left (first card flush to the screen edge) */
    padding:2px 16px 10px !important; gap:8px !important; scroll-padding:0 16px;
  }
  .railControls{ display:none !important; } /* desktop arrows; rails are touch-scrolled */
  /* search overlay header: field + close button side by side (the close ✕ was
     absolutely positioned and floated over the input text) */
  .searchOverlayInner{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; }
  /* basis 0 — with flex-wrap the input's intrinsic placeholder width would
     otherwise push the close button onto its own line before shrink applies */
  .searchOverlayInput{ order:1; flex:1 1 0% !important; min-width:0 !important; width:auto !important; font-size:22px !important; }
  .searchOverlayClose{
    order:2; position:static !important; flex:0 0 auto; margin:0 0 0 10px !important;
    width:42px !important; height:42px !important; min-height:42px !important; padding:0 !important;
    border-radius:12px !important; background:rgba(255,255,255,.07) !important;
    border:1px solid rgba(255,255,255,.12) !important; color:#e8e8ee !important;
    font-size:15px !important; display:flex !important; align-items:center !important; justify-content:center !important;
  }
  .searchOverlayScopes{ order:3; width:100% !important; }
  .searchResultsWrap{ order:4; width:100% !important; }
  /* rail cards: uniform 10px radius; live + trending share one width */
  .trendingRail .trendCard{ flex:0 0 124px !important; }
  .trendCard{ min-height:0 !important; border-radius:10px !important; box-shadow:none !important; border-color:rgba(255,255,255,.08) !important; }
  .trendInfo{ padding:9px 10px 11px !important; }
  .trendLabel{ font-size:9px !important; }
  .trendTitle{ font-size:12.5px !important; font-weight:700 !important; }
  .trendMeta{ font-size:10.5px !important; margin-top:4px !important; }
  .homeLiveCard{ flex:0 0 124px !important; width:124px !important; max-width:124px !important; border-radius:10px !important; padding:9px !important; }
  .homeLiveLogoStage{ height:60px !important; border-radius:7px !important; }
  .continueCard{ min-width:156px !important; width:156px !important; border-radius:10px !important; }
  .continueProgressFill{ background:var(--nf-red) !important; } /* match the red bars everywhere else */
  .recentCard{ border-radius:10px !important; }
  /* Movies/Series: stack category as a horizontal chip strip above posters */
  .categoryContainer.mediaPane{ display:flex !important; flex-direction:column !important; height:auto !important; gap:10px !important; }
  .mediaCategoryList{ width:100% !important; display:flex !important; flex-direction:row !important; gap:8px !important;
    overflow-x:auto !important; padding:6px !important; scrollbar-width:none; }
  .mediaCategoryList::-webkit-scrollbar{ display:none; }
  .mediaCategoryList .listItem{ flex:0 0 auto !important; white-space:nowrap !important; border-radius:999px !important;
    background:rgba(255,255,255,.06) !important; }
  .mediaItemList{ width:100% !important; }
}

@media (max-width:768px){
  #categoryContainer{ display:flex !important; flex-direction:column !important; height:auto !important; gap:10px !important; }
  #categoryList{ width:100% !important; max-height:none !important; display:flex !important; flex-direction:row !important; gap:8px !important; overflow-x:auto !important; overflow-y:hidden !important; padding:6px !important; scrollbar-width:none; }
  #categoryList::-webkit-scrollbar{ display:none; }
  #categoryList .listItem{ flex:0 0 auto !important; white-space:nowrap !important; border-radius:999px !important; background:rgba(255,255,255,.06) !important; }
  #channelList{ width:100% !important; }
  #channelList .paneHeader{ position:static !important; }
  /* Diagnostics belong in Control Center, not on the customer player surface */
  #playerHealthCard, #playerSignalDisplay{ display:none !important; }
}

@media (max-width:768px){
  .vodModalActions{ display:flex; flex-direction:column; gap:9px; }
  .vodModalActions .compactButton{ width:100%; padding:13px 16px !important; font-size:15.5px !important; border-radius:10px !important; }
}

/* (login uses the Option B hero+sheet layout in cloudtv-netflix.css §14;
   the small-screen padding override was removed when that landed) */

@media (max-width:768px){
  /* clear the absolute brand bar (14+36+10 ≈ 60px) — Option A content is in
     flow below it, no longer full-bleed art behind it */
  #home{ position:relative; padding-top:60px !important; }
  .mobileHomeBar{ display:flex; }
  /* featured-title hero: centered title, badge eyebrow, meta row */
  .trendingHeader{ justify-content:flex-end !important; text-align:center !important; }
  /* width:100% — the header's desktop align-items:flex-start would otherwise
     shrink this block (and the button grid inside it) to max-content */
  .trendingHeader > div:first-child{ display:flex; flex-direction:column; align-items:center; width:100%; }
  .spotlightEyebrow{
    display:inline-block !important; background:var(--nf-red) !important; color:#fff !important;
    font-size:10.5px !important; font-weight:800 !important; letter-spacing:.06em !important;
    padding:4px 9px !important; border-radius:6px !important; text-transform:uppercase;
    margin-bottom:12px !important;
  }
  .spotlightTitle{ line-height:1.04 !important; letter-spacing:-.02em !important; text-shadow:0 2px 18px rgba(0,0,0,.7); }
  .spotlightCopy{ color:#d6d6de !important; font-weight:600 !important; margin-top:8px !important; }
}

@media (max-width:768px){
  /* category chips (Live TV + Movies + Series): real pills, not stretched bars;
     hide/favorite actions live in the Filter sheet */
  #categoryList .itemButton, #categoryList .categoryFavorite,
  .mediaCategoryList .itemButton, .mediaCategoryList .categoryFavorite{ display:none !important; }
  #categoryList .listItem, .mediaCategoryList .listItem{
    width:auto !important; min-width:0 !important; padding:9px 15px !important; font-weight:700 !important;
  }
  #categoryList .listItem .listItemRow, .mediaCategoryList .listItem .listItemRow{ display:flex !important; gap:0 !important; }
  .mobileMediaContext{ display:none !important; }

  /* poster grids: 3-up, smaller cards (Movies + Series) */
  .vodResultGrid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:9px !important; }
  .vodResultCard{ padding:0 !important; }
  .vodResultTitle{ font-size:12.5px !important; font-weight:700 !important; line-height:1.25 !important; }
  .vodResultMeta{ font-size:11px !important; }
  .vodResultRating{ font-size:10.5px !important; padding:3px 6px !important; }
  .mediaItemList .paneHeader{ position:static !important; border:0 !important; background:none !important; padding:12px 4px 6px !important; }
  .mediaItemList .paneHeaderTitle{ font-size:12px !important; font-weight:800 !important; letter-spacing:.1em !important; text-transform:uppercase; color:var(--nf-muted) !important; }
  .mediaItemList .paneHeader span:last-child{ font-size:11px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase; color:#7ddcff !important; }
  /* quieter section header: "USA NEWS · 107 CHANNELS" */
  #channelList .paneHeader{ position:static !important; border:0 !important; background:none !important; padding:14px 4px 4px !important; }
  #channelList .paneHeaderTitle{ font-size:12px !important; font-weight:800 !important; letter-spacing:.1em !important; text-transform:uppercase; color:var(--nf-muted) !important; }
  #channelList .paneHeader span:last-child{ font-size:11px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase; color:#7ddcff !important; }
  #mobileLiveContext{ display:none !important; }

  /* ---- player guide: horizontal "Tonight on" card rail (2026-06-12 — the
     vertical timeline filled the whole page; one swipeable row instead) ----- */
  #epgHeader{ font-size:12px !important; font-weight:800 !important; letter-spacing:.06em !important; text-transform:uppercase; color:var(--nf-muted) !important; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #epgContainer{
    display:flex !important; flex-direction:row !important; gap:8px !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    margin:0 -16px !important; padding:5px 16px 8px !important; scroll-padding:0 16px;
    scrollbar-width:none;
  }
  #epgContainer::-webkit-scrollbar{ display:none; }
  /* Compact EPG cards (owner: "epg box more compact") — tighter padding + a
     shorter title block so the strip takes less height and the video leads. */
  #epgContainer .epgItem{
    display:flex !important; flex-direction:column !important; gap:3px !important;
    flex:0 0 190px !important; width:190px !important; max-width:190px !important; min-width:0 !important;
    background:#15151c !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important;
    padding:7px 10px !important; margin:0 !important; box-shadow:none !important;
  }
  #epgContainer .epgItem.epgNowItem{ border-color:rgba(229,9,20,.45) !important; background:rgba(229,9,20,.08) !important; }
  /* past programs sit to the left of "now"; ones with provider archive are
     tappable (Replay), ones without are dimmed context */
  #epgContainer .epgItem.epgPastItem:not(.epgReplayItem){ opacity:.55 !important; }
  #epgContainer .epgItem.epgReplayItem{ border-color:rgba(125,220,255,.34) !important; background:rgba(125,220,255,.06) !important; }
  #epgContainer .epgItem.epgReplayItem .epgHour::after{ content:" · CATCH-UP"; color:#7ddcff; }
  #epgContainer .epgHour{ font-size:10px !important; font-weight:800 !important; color:#9a9aa6 !important; letter-spacing:.06em !important; text-transform:uppercase; }
  #epgContainer .epgProgram{
    font-size:12px !important; font-weight:700 !important; color:#fff !important; line-height:1.28 !important;
    white-space:normal !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden !important; min-height:25px;
  }
  #epgContainer .epgProgressTrack{ height:2.5px !important; width:100% !important; max-width:none !important; border-radius:2px !important; background:rgba(255,255,255,.14) !important; }
  #epgContainer .epgItem:not(.epgNowItem) .epgProgressTrack{ display:none !important; } /* upcoming cards: no empty bar */
  #epgContainer .epgProgressFill{ background:var(--nf-red) !important; }
  #epgContainer .epgProgressText{ font-size:9.5px !important; color:#9a9aa6 !important; font-weight:600 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #epgContainer .programReminderButton, #epgContainer .catchupButton, #epgContainer .programCatchupButton{
    align-self:flex-start; margin-top:1px; padding:4px 10px !important; font-size:9.5px !important; min-height:0 !important; width:auto !important;
  }
  /* Replay (catch-up) pill: cyan accent + play glyph so it reads as "tap to go back" */
  #epgContainer .programCatchupButton{
    border:1px solid rgba(125,220,255,.45) !important; background:rgba(125,220,255,.12) !important; color:#bfeaff !important;
    border-radius:999px !important; font-weight:800 !important;
  }
  #epgContainer .programCatchupButton::before{ content:"\25B6\FE0E"; font-size:8px; margin-right:5px; vertical-align:1px; }
  .epgArrow{ display:none !important; }

  /* recovery card must FIT INSIDE the video frame (it was overflowing it) */
  /* recovery overlay: a compact card docked near the top of the video frame,
     translucent backdrop so the player still reads behind it (was a near-full
     centered wall that dominated the frame) */
  .streamRecoveryPanel.open{
    position:absolute !important; inset:0 !important; z-index:30 !important;
    display:flex !important; align-items:flex-start !important; justify-content:center !important;
    padding:12px 12px 0 !important; overflow:hidden !important; background:rgba(5,6,10,.42) !important;
  }
  .streamRecoveryCard{
    width:100% !important; max-width:286px !important; max-height:calc(100% - 16px) !important; overflow-y:auto !important;
    margin:0 !important; padding:11px 12px !important; box-shadow:0 14px 34px rgba(0,0,0,.5) !important;
  }
  .streamRecoveryKicker{ font-size:8.5px !important; letter-spacing:.12em !important; margin-bottom:2px !important; }
  .streamRecoveryTitle{ font-size:12px !important; font-weight:800 !important; line-height:1.25 !important; white-space:normal !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden !important; }
  .streamRecoveryReason{ font-size:10.5px !important; line-height:1.35 !important; color:#c9c9d2 !important; margin-top:3px !important; }
  .streamRecoveryActions{ margin-top:9px !important; gap:6px !important; }
  .streamRecoveryActions button{ min-height:32px !important; font-size:11px !important; border-radius:8px !important; padding:0 8px !important; }
}

@media (max-width:768px){
  /* old button-wall grid — superseded by the player action row + tools sheet
     (2026-06-12); the hide lives in the Player revamp block below */
  #channelInfoActions{ display:none !important; }
  #channelInfoActions .miniButton{
    width:100% !important; min-height:46px !important; margin:0 !important;
    padding:6px 4px !important; border-radius:10px !important;
    font-size:11.5px !important; font-weight:700 !important; line-height:1.2 !important;
    letter-spacing:.01em !important; white-space:normal !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    text-align:center !important; background:rgba(255,255,255,.07) !important;
    border:1px solid rgba(255,255,255,.09) !important; color:#e8e8ee !important;
  }
}

@media (max-width:768px){
  /* Control Center & its sibling modals must sit ABOVE the fixed bottom nav.
     Base .settingsModal is z-index:90 — a dead TIE with #bottomNav (also z:90)
     that currently wins only by DOM source order (fragile; one reorder from the
     same tap-stealing bug the settings sheet had). Pin it above the nav AND the
     .mobileSheet modal layer (140) so the intent is explicit and stable. */
  .settingsModal{ z-index:150 !important; }
  /* Sub-screens opened FROM the Control Center (z:150) must sit ABOVE it.
     #profileManagerModal is earlier in the DOM (would tie + lose) and
     #diagnosticsPanel is a z:80 side panel — both opened BEHIND the Control
     Center and looked dead. Pin every openable sub-screen above it. */
  #profileManagerModal, #storageManagerModal, #parentalModal, #guideModal{ z-index:160 !important; }
  #diagnosticsPanel{ z-index:160 !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:auto !important; border-radius:0 !important; }
  /* full-screen settings sheet */
  #discoverySettingsModal .settingsModalPanel{
    width:100% !important; max-width:none !important; height:100dvh !important; max-height:100dvh !important;
    border-radius:0 !important; border:0 !important; margin:0 !important;
  }
  #discoverySettingsModal .settingsModalHeader{ padding:16px 16px 8px !important; border:0 !important; }
  #discoverySettingsModal .settingsKicker{ display:none !important; }
  #discoverySettingsModal #discoverySettingsTitle{ font-size:21px !important; font-weight:900 !important; letter-spacing:-.01em !important; }
  #discoverySettingsModal .settingsClose{ border-radius:999px !important; padding:8px 16px !important; font-weight:700 !important; }

  /* internal/dev panels off the customer surface (desktop keeps them) */
  #controlCenterHealthDashboard,
  #controlCenterQaPanel,
  #discoverySettingsModal .controlCenterOverview,
  #controlCenterDiscoveryBlock,
  #discoverySettingsStatus,
  .controlCenterJumpBar button[data-action*="controlCenterQaPanel"],
  .controlCenterJumpBar button[data-action*="controlCenterDiscoveryBlock"],
  .controlCenterAction[data-action*="openShortcutsPanel"]{
    display:none !important;
  }

  /* No tabs — one single scroll (owner: drop Tools/Guide tabs, everything in Account) */
  .controlCenterJumpBar{ display:none !important; }

  /* reorder the stack: health hero -> reminders -> guide source -> tools -> parental */
  #discoverySettingsModal .settingsStack{ display:flex !important; flex-direction:column !important; padding:2px 16px calc(26px + env(safe-area-inset-bottom)) !important; gap:14px !important; }
  #discoverySettingsModal .settingsStack > #accountSummaryPanel{ order:1 !important; }
  #discoverySettingsModal .settingsStack > #controlCenterReminderPanel{ order:2 !important; }
  #discoverySettingsModal .settingsStack > #controlCenterGuideBlock{ order:3 !important; }
  #discoverySettingsModal .settingsStack > .settingsActions{ order:4 !important; }
  #discoverySettingsModal .settingsStack > #controlCenterToolsBlock{ order:5 !important; }
  #discoverySettingsModal .settingsStack > #parentalControlsPanel{ order:6 !important; }

  /* tools: 2-up tiles (icon over label + sublabel) */
  #controlCenterToolsBlock{ 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;
    width:100% !important; min-height:0 !important; padding:13px !important; border-radius:12px !important;
    background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.08) !important; text-align:left !important;
  }
  .controlCenterActionIcon{ color:#7ddcff !important; margin-bottom:9px !important; }
  .controlCenterActionIcon svg{ width:21px !important; height:21px !important; }
  .controlCenterAction > span:not(.controlCenterActionIcon){ font-size:13.5px !important; font-weight:600 !important; color:#fff !important; letter-spacing:0 !important; text-transform:none !important; margin:0 !important; flex:0 0 auto; }
  .controlCenterAction strong{ font-size:11px !important; font-weight:500 !important; color:#9a9aa6 !important; margin:2px 0 0 !important; }
  .controlCenterAction::after{ content:none !important; }

  /* sections as clean cards */
  #discoverySettingsModal .settingsSubsection,
  #discoverySettingsModal .controlCenterSettingsBlock,
  #controlCenterReminderPanel{
    background:rgba(255,255,255,.045) !important; border:1px solid rgba(255,255,255,.07) !important;
    border-radius:14px !important; padding:14px !important; margin:0 !important;
  }
  #discoverySettingsModal .controlCenterSectionTitle strong{ display:none !important; }
  #discoverySettingsModal .controlCenterSectionTitle span{ font-size:15px !important; font-weight:800 !important; color:#fff !important; }
  /* reminder card header: give the title the row, keep Clear All compact */
  #controlCenterReminderPanel .paneHeader{ gap:8px !important; align-items:center !important; }
  #controlCenterReminderPanel .paneHeaderTitle{ flex:1 1 auto !important; min-width:0 !important; font-size:13.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #controlCenterReminderPanel .paneHeader .compactButton{ flex:0 0 auto !important; width:auto !important; }

  /* Guide tile spans the last row (odd 5th tile) */
  .controlCenterActionGuide{ grid-column:1 / -1 !important; }

  /* Parental popup: stacked form + blocked-keyword chips + toggle row */
  #parentalModal .parentalControlsGrid{ display:flex !important; flex-direction:column !important; gap:14px !important; }
  .parentalEnableRow{ display:flex !important; align-items:center !important; gap:10px !important; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:13px 14px !important; }
  .parentalEnableRow > span{ flex:1 1 auto; color:#fff !important; font-size:14px !important; font-weight:600 !important; }
  .parentalEnableRow #parentalControlsSummary{ flex:0 0 auto; color:var(--nf-muted); font-size:12px; font-style:normal; }
  .parentalKeywordChips{ display:flex; flex-wrap:wrap; gap:7px; margin:6px 0 8px; }
  .parentalChip{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); color:#fff; font-size:12.5px; padding:5px 5px 5px 11px; border-radius:999px; }
  .parentalChip button{ background:rgba(255,255,255,.14) !important; border:0 !important; color:#cfd2dd !important; width:18px !important; height:18px !important; min-height:0 !important; border-radius:999px !important; padding:0 !important; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .parentalChipEmpty{ color:var(--nf-muted); font-size:12px; }
  .parentalKeywordAdd{ width:100% !important; }

  /* Storage: stack the cramped action rows; flag destructive "Clear" actions */
  #storageManagerModal .settingsActions{ display:flex !important; flex-direction:column !important; gap:8px !important; }
  #storageManagerModal .settingsActions button{ width:100% !important; }
  #storageManagerModal button[data-action="clearCachedLibraryData()"],
  #storageManagerModal button[data-action="clearTrendingCache()"],
  #storageManagerModal button[data-action="clearWatchHistory()"]{
    color:#ec8a8a !important; border-color:rgba(226,75,74,.35) !important; background:none !important;
  }

  /* Diagnostics → focused line check: drop dev perf timings + the 8-tile support
     grid + the raw JSON copy/export buttons so the provider line-check leads. */
  #diagnosticsPanel #diagnosticsSummary,
  #diagnosticsPanel #diagnosticsList,
  #diagnosticsPanel .supportHealthCard,
  #diagnosticsPanel .supportHealthGrid,
  #diagnosticsPanel .duplicateChannelPanel,
  #diagnosticsPanel .clientErrorPanel,
  #diagnosticsPanel button[data-action="copyDiagnosticsReport()"],
  #diagnosticsPanel button[data-action="downloadDiagnosticsReport()"]{ display:none !important; }
  /* the line check leads with the provider rows */
  #diagnosticsPanel .providerCheckRow{ background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:10px !important; margin-bottom:8px !important; }
  #discoverySettingsModal input{ min-height:48px !important; font-size:16px !important; border-radius:10px !important; }
  #discoverySettingsModal .heroButton.primary{ background:var(--nf-red) !important; border:0 !important; border-radius:10px !important; font-weight:800 !important; min-height:46px !important; }
  #discoverySettingsModal .ghostButton{ border-radius:10px !important; }
  #accountSummaryPanel{ border-radius:14px !important; }
}

@media (max-width:768px){
  /* the picker sheet replaces the chip strip entirely on mobile */
  .mediaCategoryList{ display:none !important; }
  /* category line is the page title now — drop the redundant tab heading */
  #movies > .tabHeader, #series > .tabHeader{ display:none !important; }
  #movies .mobileMediaToolbar, #series .mobileMediaToolbar{ padding-top:14px !important; }
  /* Option 2 — category-led header: title (tap to change) + search/filter icons */
  .vodHeaderBar{ display:flex !important; align-items:center; gap:10px; padding:0 2px; min-height:44px; }
  .vodHeaderTitleBtn{
    flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px;
    background:none !important; border:0 !important; padding:0 !important; text-align:left; cursor:pointer; color:#fff;
  }
  .vodHeaderTitleRow{ display:flex; align-items:center; gap:7px; max-width:100%; }
  .vodHeaderName{ font-size:20px; font-weight:900; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .vodHeaderChevron{ width:23px; height:23px; flex:0 0 auto; color:var(--nf-red-2); stroke-width:3.4; filter:drop-shadow(0 1px 3px rgba(229,9,20,.45)); }
  .vodHeaderSub{ font-size:11.5px; font-weight:600; color:var(--nf-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .vodHeaderIcon{
    flex:0 0 auto; width:42px; height:42px; border-radius:999px; cursor:pointer;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#e8e8ee;
    display:flex; align-items:center; justify-content:center;
  }
  .vodHeaderIcon:active{ transform:scale(.93); }
  .vodHeaderIcon svg{ width:19px; height:19px; }
  /* the toolbar's old context line is redundant now (subtitle carries it) */
  .mobileMediaContext{ display:none !important; }

  /* expandable per-category search: the icon swaps the header for a field */
  .vodHeaderSearch{ display:none; }
  .vodHeaderBar.searching .vodHeaderTitleBtn,
  .vodHeaderBar.searching .vodHeaderIcon{ display:none !important; }
  .vodHeaderBar.searching .vodHeaderSearch{ display:flex; flex:1 1 auto; align-items:center; gap:6px; }
  .vodHeaderSearchBack{ flex:0 0 auto; width:36px; height:44px; background:none !important; border:0 !important; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .vodHeaderSearchBack svg{ width:22px; height:22px; }
  .vodHeaderSearch input{ flex:1 1 auto; min-width:0; height:44px; border-radius:11px !important; background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.16) !important; color:#fff !important; font-size:16px !important; padding:0 12px !important; }
  .vodHeaderSearch input:focus{ border-color:var(--nf-red) !important; outline:none !important; }
  .vodHeaderSearchClear{ flex:0 0 auto; width:34px; height:44px; background:none !important; border:0 !important; color:#9a9aa6; font-size:15px; cursor:pointer; }
}

@media (max-width:768px){
  #channelList .listItemRow{ gap:12px !important; }
  #channelList .channelVisual{ width:84px !important; height:48px !important; border-radius:9px !important; flex:0 0 auto; }
  #channelList .listItemTitle{ font-size:15px !important; font-weight:700 !important; }
  #channelList .channelCategoryLabel{ font-size:12px !important; }
  #channelList .favorite{ font-size:19px !important; padding:8px !important; }
}

@media (max-width:768px){
  /* Live TV header matches Movies/Shows exactly: no big tab title above the
     category-led bar, same toolbar inset (owner consistency pass 2026-06-11) */
  #categories > .tabHeader{ display:none !important; }
  #categories .mobileLiveToolbar{ padding-top:14px !important; }

  .liveHeaderBar{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:0 2px !important;
    min-height:44px !important;
  }

  .liveHeaderTitleBtn{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:1px !important;
    background:none !important;
    border:0 !important;
    color:#fff !important;
    cursor:pointer !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
    width:auto !important;
  }

  .liveHeaderTitleRow{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .liveHeaderName{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:20px !important;
    font-weight:900 !important;
    letter-spacing:-.02em !important; /* same as .vodHeaderName */
  }

  .liveHeaderChevron{
    width:23px !important;
    height:23px !important;
    flex:0 0 auto !important;
    color:var(--nf-red-2) !important;
    stroke-width:3.4 !important;
    filter:drop-shadow(0 1px 3px rgba(229,9,20,.45)) !important;
  }

  .liveHeaderSub{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    color:var(--nf-muted) !important;
    font-size:11.5px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
  }

  .liveHeaderIcon{
    flex:0 0 auto !important;
    width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:12px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:rgba(255,255,255,.07) !important;
    color:#e8e8ee !important;
    cursor:pointer !important;
    line-height:1 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .liveHeaderIcon:active{ transform:scale(.93) !important; }
  .liveHeaderIcon svg{ width:19px !important; height:19px !important; }
  .mobileLiveContext{ display:none !important; }

  .liveHeaderBar .mobileLiveSearchRow{ display:none !important; }
  .liveHeaderBar.searching .liveHeaderTitleBtn,
  .liveHeaderBar.searching .liveHeaderIcon{ display:none !important; }
  .liveHeaderBar.searching .mobileLiveSearchRow{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
  }

  .liveHeaderSearchBack,
  .liveHeaderSearchClear{
    flex:0 0 auto !important;
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:none !important;
    border:0 !important;
    color:#fff !important;
    cursor:pointer !important;
    padding:0 !important;
  }

  .liveHeaderSearchBack{ width:36px !important; }
  .liveHeaderSearchBack svg{ width:22px !important; height:22px !important; }
  .liveHeaderSearchClear{ width:34px !important; color:#9a9aa6 !important; font-size:15px !important; }

  .liveHeaderBar .mobileLiveSearchRow input{
    flex:1 1 auto !important;
    min-width:0 !important;
    height:44px !important;
    border-radius:11px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
    font-size:16px !important;
    padding:0 12px !important;
  }

  .liveHeaderBar .mobileLiveSearchRow input:focus{
    border-color:var(--nf-red) !important;
    outline:none !important;
  }

  #categoryList{ display:none !important; }

  #categoryList .listItem{
    height:50px !important;
    min-height:42px !important;
    display:inline-flex !important;
    align-items:center !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.06) !important;
    background:rgba(255,255,255,.07) !important;
    margin:0 !important;
    padding:0 16px !important;
  }

  #categoryList .listItemRow{
    align-items:center !important;
    height:100% !important;
  }

  #categoryList .listItem.showAction{
    border-color:var(--nf-red) !important;
    background:var(--nf-red) !important;
    color:#fff !important;
  }

  #categoryList .listItemTitle{
    max-width:38vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #liveCategorySheet .mobileSheetClose{
    border-radius:12px !important;
    height:40px !important;
  }
}

@media (max-width:768px){
  .vodHeaderTitleBtn{
    margin:0 !important;
    width:auto !important;
  }

  .vodHeaderIcon{
    width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:12px !important;
    line-height:1 !important;
  }

  #favorites > .tabHeader{
    padding:18px 24px 12px !important;
    margin:0 !important;
    border:0 !important;
  }

  #favorites .tabTitle{
    font-size:24px !important;
    line-height:1.08 !important;
  }

  .favoritesToggle{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:0 24px 12px !important;
  }

  .favoritesToggle button{
    width:100% !important;
    min-width:0 !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 8px !important;
    border-radius:12px !important;
    font-size:14px !important;
    font-weight:850 !important;
    letter-spacing:0 !important;
  }

  .favoritesSection{
    padding:0 24px 18px !important;
  }

  .favoritesSection h3{
    font-size:18px !important;
    line-height:1.15 !important;
  }

  .favoriteCategoryGrid,
  .watchlistGrid,
  #favoritesGrid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:10px 0 0 !important;
  }

  .favoriteCategoryCard,
  #favoritesGrid .card{
    min-height:68px !important;
    border-radius:12px !important;
    padding:14px 16px !important;
    background:rgba(255,255,255,.055) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    box-shadow:none !important;
  }

  #favoritesGrid .card{
    align-items:flex-start !important;
    text-align:left !important;
  }

  #favoritesGrid .card img{
    display:none !important;
  }

  .watchlistCard{
    border-radius:12px !important;
  }

  #programSearch .tabHeader{
    padding:18px 24px 12px !important;
    margin:0 !important;
    border:0 !important;
  }

  #programSearch .tabTitle{
    font-size:24px !important;
    line-height:1.08 !important;
  }

  #programSearch .programSearchPanel{
    margin:0 24px 18px !important;
    padding:14px !important;
    border-radius:14px !important;
  }

  #programSearch .programSearchBar{
    gap:10px !important;
    padding:10px !important;
    border-radius:14px !important;
  }

  #programSearch .programSearchBar input{
    min-height:48px !important;
    border-radius:12px !important;
    font-size:16px !important;
  }

  #programSearch .programSearchBar .heroButton,
  #programSearch .programSearchBar .ghostButton,
  #programSearch .guideNowNextEmpty .heroButton{
    min-height:48px !important;
    margin:0 !important;
    border-radius:12px !important;
    font-size:15px !important;
  }

  #programSearch .guideSearchSuggestions,
  #programSearch .guideNowNextPanel,
  #programSearch .guidePerformancePanel,
  #programSearch .guideCacheSummary,
  #programSearch .guideModeCard,
  #programSearch .guidePresetAction{
    border-radius:14px !important;
  }

  #programSearch .guideSuggestionPill{
    max-width:70vw !important;
    min-height:42px !important;
  }
}

@media (max-width:768px){
  /* ---- Player revamp A+D (owner pick 2026-06-12) --------------------------
     Video pinned top, identity row + 5-icon action row, tools behind a sheet,
     Up Next timeline only (no guide search / Earlier-Later pills), recovery
     card in plain English. Same system: 16px gutter, 42px r12 icons, r10 cells. */
  #live > .tabHeader{ display:none !important; }
  /* full-bleed video: the tab container's side padding moved into each section
     so the 16px gutter starts at the screen edge like every other tab */
  #live{ padding:0 0 calc(92px + env(safe-area-inset-bottom)) 0 !important; }
  .playerShell{ border-radius:0 !important; border:0 !important; box-shadow:none !important; margin:0 !important; }

  /* identity row — 16px gutter, 12px internal gaps (unified player rhythm) */
  /* Compact identity row so the VIDEO is the hero (owner: "make the actual
     player the show"): tighter vertical padding + smaller logo. */
  .channelInfoBar{ background:none !important; border:0 !important; padding:7px 16px 4px !important; gap:11px !important; align-items:center !important; }
  .channelLogo{ width:46px !important; height:34px !important; border-radius:8px !important; background:#15151c !important; object-fit:contain !important; padding:4px !important; flex:0 0 auto; }
  .channelName{ font-size:14px !important; font-weight:800 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .channelNow{ font-size:11px !important; font-weight:600 !important; color:var(--nf-muted) !important; margin-top:1px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .playerNowBar{ margin-top:6px !important; max-width:none !important; }
  .channelInfoActions{ display:none !important; } /* button wall -> inline header icons + More sheet */

  /* Option C: actions live INLINE on the right of the channel row — no bulky
     separate icon-tile block. Favorite / CC / More as light ghost icons.
     (PiP + Fullscreen are in the video bar; the rest in the More sheet.) */
  .playerActionRow{ display:none !important; } /* removed; superseded by inline header actions */
  .playerHeadActions{ flex:0 0 auto; display:flex !important; align-items:center; gap:16px; padding-left:6px; }
  .playerHeadAct{ background:none !important; border:0 !important; padding:0 !important; min-height:0 !important; width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:#cfd2dd !important; cursor:pointer; }
  .playerHeadAct[hidden]{ display:none !important; } /* the hidden attr must beat display:flex (catch-up icon hides when the channel has no archive) */
  .playerHeadAct svg{ width:20px; height:20px; }
  .playerHeadAct.active{ color:#ff6b73 !important; }
  .playerHeadAct:active{ transform:scale(.9); }
  /* Favorite = STAR: outline by default, FILLS amber when the channel is a
     favorite (consistent with the favorites star used across the app, #ffb02e). */
  .playerHeadFav svg{ transition:fill .15s ease; }
  .playerHeadFav.active{ color:#ffb02e !important; }
  .playerHeadFav.active svg{ fill:#ffb02e !important; }

  /* Catch-up / archive sheet (opened from the player header catch-up icon) —
     a tappable list of replayable past programs, cyan replay accent. */
  .catchupSheetList{ display:flex; flex-direction:column; width:100%; max-height:56vh; overflow-y:auto; margin-top:4px; -webkit-overflow-scrolling:touch; }
  .catchupSheetRow{ display:flex; align-items:center; gap:12px; width:100%; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.06); padding:12px 4px; text-align:left; cursor:pointer; color:#fff; }
  .catchupSheetRow:active{ background:rgba(255,255,255,.04); }
  .catchupSheetIco{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:rgba(125,220,255,.12); border:1px solid rgba(125,220,255,.3); color:#bfeaff; display:flex; align-items:center; justify-content:center; }
  .catchupSheetIco svg{ width:17px; height:17px; }
  .catchupSheetMeta{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .catchupSheetName{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .catchupSheetTime{ font-size:11.5px; font-weight:600; color:var(--nf-muted); }
  .catchupSheetPlay{ flex:0 0 auto; color:#bfeaff; font-size:13px; padding-left:4px; }
  .catchupSheetEmpty{ padding:24px 10px; color:var(--nf-muted); font-size:13px; line-height:1.5; text-align:center; }

  /* Channel-note inline editor (replaces native prompt() on mobile) */
  .noteEditor{ display:flex; flex-direction:column; margin-top:4px; }
  .noteEditorLabel{ font-size:11.5px; font-weight:700; color:#8b8b96; margin:10px 2px 5px; }
  .noteEditorInput, .noteEditorTextarea{ width:100%; box-sizing:border-box; background:#15161d; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#fff; font-size:14px; padding:11px 12px; font-family:inherit; }
  .noteEditorInput:focus, .noteEditorTextarea:focus{ outline:none; border-color:rgba(125,220,255,.5); }
  .noteEditorTextarea{ resize:none; line-height:1.45; }
  .noteEditorActions{ display:flex; gap:10px; margin-top:16px; }
  .noteEditorActions button{ width:auto !important; } /* beat the base full-width sheet-button rule so they sit side by side */
  .noteEditorClear{ flex:0 0 auto; min-width:0; padding:11px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:none; color:#cfd2dd; font-weight:700; font-size:13px; }
  .noteEditorSave{ flex:1 1 auto; min-width:0; padding:11px 16px; border-radius:999px; border:0; background:#fff; color:#0b0c10; font-weight:800; font-size:14px; }

  /* Multi-screen: real 2-up at phone width (was a single-column scroll) */
  #multiViewGrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }

  /* guide: the timeline carries it — hide search field, Earlier/Later pills */
  #epgSearchControls, .epgRailControls, .epgArrow, #playbackDebug{ display:none !important; }
  .playerMeta{ background:none !important; border:0 !important; padding:0 16px !important; margin:0 !important; box-shadow:none !important; }

  /* recently watched lives on Home now */
  #recentSection{ display:none !important; }

  /* Option D: Switch Channels as a scannable LIST (logo · name · what's on ·
     NOW/ALT), not bulky tiles. Scored alternates (.alt) lead, then favorite /
     recent / generic — relevant feeds, with what's airing on each. */
  .playerChannelRail{ display:flex !important; flex-direction:column !important; gap:0 !important; overflow:visible !important; padding:0 !important; }
  .playerChListRow{
    display:flex !important; align-items:center; gap:11px; padding:9px 16px !important; cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .playerChListRow.active{ background:rgba(229,9,20,.07) !important; }
  .playerChListLogo{ width:44px !important; height:32px !important; border-radius:7px !important; background:#15151c !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; flex:0 0 auto; }
  .playerChListLogo img{ max-width:84%; max-height:84%; object-fit:contain; }
  .playerChListLogo span{ font-weight:800; font-size:10px; color:#cfd2dd; letter-spacing:.03em; }
  .playerChListInfo{ min-width:0; flex:1; }
  .playerChListName{ font-size:13px !important; font-weight:700 !important; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .playerChListNow{ font-size:10.5px !important; color:var(--nf-muted) !important; font-weight:600; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .playerChListBadge{ flex:0 0 auto; font-size:8px; font-weight:800; letter-spacing:.05em; border-radius:4px; padding:2.5px 6px; }
  .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:12px; padding:0; }

  /* guide reminder pills on the system palette (were teal); compact sizing
     lives with the guide-rail rules earlier in this file */
  #epgContainer .programReminderButton{
    border:1px solid rgba(255,255,255,.22) !important; background:none !important; color:#d6d6de !important;
    border-radius:999px !important; font-weight:700 !important;
  }
  #epgContainer .programReminderButton.active{
    border-color:rgba(229,9,20,.5) !important; background:rgba(229,9,20,.12) !important; color:#ff6b73 !important;
  }

  /* recovery card chrome (compact in-video sizing lives with the guide-rail
     rules earlier in this file — keep these to chrome only, no dimensions) */
  .streamRecoveryCard{ border-radius:12px !important; background:rgba(15,16,22,.96) !important; border:1px solid rgba(255,255,255,.1) !important; }
  .streamRecoveryActions{ display:grid !important; grid-template-columns:1fr 1fr; }
  .streamRecoveryActions button{ font-weight:800 !important; width:auto !important; }

  /* ---- Player controls Option B (owner pick 2026-06-12): one bottom broadcast
     bar for LIVE; no center cluster while playing, center play only on pause,
     no ±30s seek / fake 0:00 duration on live. VOD keeps its scrubber+seeks. -- */
  .playerVideoWrap.liveMode .ytCenterControls{ display:none !important; }
  .playerVideoWrap.liveMode.isPaused .ytCenterControls{ display:flex !important; }
  .playerVideoWrap.liveMode .ytCenterControls .ytSeek{ display:none !important; } /* no ±30s on live */
  .playerVideoWrap.liveMode.isPaused .ytCenterControls .ytPlay{ display:grid !important; }
  /* clean single bottom bar */
  .playerVideoWrap.liveMode .ytTime{ display:none !important; } /* live has no real duration */
  .playerVideoWrap.liveMode .ytProgress{ opacity:.5; } /* thin live-edge bar, not a scrubber */
  .playerVideoWrap.liveMode .ytLiveChip{
    background:var(--nf-red) !important; color:#fff !important; height:24px !important; padding:0 9px !important;
    font-size:10.5px !important; letter-spacing:.05em; display:inline-flex; align-items:center; gap:5px;
  }
  .playerVideoWrap.liveMode .ytLiveChip::before{ content:""; width:5px; height:5px; border-radius:3px; background:#fff; }
  .ytBarLeft, .ytBarRight{ gap:13px !important; }
  /* CC button uses stroke (bar icons are otherwise filled) + active state */
  .playerVideoWrap .ytCc svg{ fill:none !important; stroke:currentColor !important; }
  .playerVideoWrap .ytCc.active{ color:#ff6b73 !important; }

  /* ---- Player settings as a bottom SHEET (Option 1, 2026-06-15) ----------
     Hosted on <body> on mobile (no .playerVideoWrap ancestor), so the selector
     must NOT require that ancestor. left:0/right:0 + border-box = exact viewport
     width (an explicit width:100% + padding overflowed the right edge). Dim
     backdrop via a fixed ::before (NOT a 9999px box-shadow scrim). */
  .playerSettingsPanel{
    box-sizing:border-box !important;
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    z-index:140 !important; /* modal layer — above #bottomNav (z:90), matches .mobileSheet. Without this the nav covered the bottom 'Stream info' row and swallowed taps. */
    width:auto !important; max-width:none !important; max-height:82dvh !important; overflow-y:auto !important;
    margin:0 !important; padding:0 18px calc(18px + env(safe-area-inset-bottom)) !important;
    border:0 !important; border-top:1px solid rgba(255,255,255,.08) !important;
    border-radius:22px 22px 0 0 !important;
    background:#0c0d12 !important; box-shadow:0 -16px 44px rgba(0,0,0,.55) !important;
    backdrop-filter:none !important;
    transform:translateY(12px) !important;
  }
  .playerSettingsPanel.open{ transform:translateY(0) !important; }
  .playerSettingsPanel.open::before{
    content:""; position:fixed; inset:0; z-index:-1; background:rgba(5,6,10,.55);
  }
  /* ROOT-CAUSE FIX (settings1c): the desktop popup added
     .playerVideoWrap.settingsOpen{overflow:visible} so it could bleed past the
     video. On mobile the sheet is body-level, and un-clipping the wrap exposes
     the oversized ambient-glow backdrop (width:120%, left:-10%), which expands
     the mobile layout viewport and clips the WHOLE page on the right. Keep the
     wrap clipped on mobile. */
  .playerVideoWrap.settingsOpen{ overflow:hidden !important; }
  .playerShell:has(.playerVideoWrap.settingsOpen){ overflow:hidden !important; }
  .ambientGlowContainer{ max-width:100% !important; left:0 !important; right:0 !important; width:auto !important; } /* belt-and-suspenders: never wider than the screen */
  .settingsSheetGrab{ display:block !important; width:38px; height:4px; border-radius:2px; background:rgba(255,255,255,.22); margin:9px auto 4px; }
  .playerSettingsPanel .playerSettingsHeader{ padding:6px 0 12px !important; }
  .settingsRow{ padding:14px 2px !important; }
  .settingsRowLabel{ font-size:15px !important; }
  /* drill-in OPTIONS as clean list rows (label · detail · ✓), NOT boxed cards
     — keeps the whole flow consistent with the main list (was the "old format") */
  .settingsMenuOptions.drill{ gap:0 !important; }
  .settingsMenuOptions.drill .settingsMenuOption{
    width:100% !important; display:flex !important; align-items:center !important; gap:10px !important;
    background:none !important; border:0 !important; border-bottom:1px solid rgba(255,255,255,.06) !important;
    border-radius:0 !important; padding:14px 2px !important; min-height:0 !important; box-shadow:none !important;
    text-align:left !important;
  }
  .settingsMenuOptions.drill .settingsMenuOption span{ font-size:15px !important; font-weight:600 !important; color:#fff !important; }
  .settingsMenuOptions.drill .settingsMenuOption strong{ margin-left:auto !important; font-size:12.5px !important; font-weight:600 !important; color:#8b8b96 !important; padding-right:26px; position:relative; }
  .settingsMenuOptions.drill .settingsMenuOption.active strong::after{
    content:"\2713"; position:absolute; right:0; top:50%; transform:translateY(-50%); color:var(--nf-red); font-size:15px; font-weight:800;
  }
  .settingsMenuOptions.drill .settingsMenuOption.active span{ color:#fff !important; }
  .settingsMenuOptions.drill .externalPlayerActions{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px; }
}

/* ---- Transport-button polish (2026-06-16) -----------------------------------
   The center cluster previously stacked THREE icon systems on each seek button
   (inline <svg> chevron + legacy ::before "<<"/">>" glyph + "30" span) and a
   duplicate CSS triangle on play. Keep the one system that toggles correctly —
   the inline SVGs — suppress the legacy glyphs, and give the buttons a crisp,
   readable look over bright video. Phone-only; desktop chrome is untouched. */
@media (max-width:720px){
  /* kill the legacy pseudo-glyphs so icons don't render doubled-up */
  .playerVideoWrap .ytCenterControls .ytSeek::before,
  .playerVideoWrap .ytCenterControls .ytSeekForward::before,
  .playerVideoWrap .ytCenterControls .ytPlay::before{
    content:none !important;
    display:none !important;
  }

  /* skip-back / skip-forward: glassy, legible, with a clean "30" label */
  .playerVideoWrap .ytCenterControls .ytSeek{
    width:54px !important; height:54px !important;
    min-width:54px !important; min-height:54px !important;
    font-size:11px !important; /* re-enable the "30" label (was font-size:0) */
    overflow:visible !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.30) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.42) !important;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  .playerVideoWrap .ytCenterControls .ytSeek:hover,
  .playerVideoWrap .ytCenterControls .ytSeek:active{
    background:rgba(255,255,255,.24) !important;
    border-color:rgba(255,255,255,.45) !important;
  }
  .playerVideoWrap .ytCenterControls .ytSeek svg{
    width:23px !important; height:23px !important;
    transform:translateY(-5px) !important;
  }
  .playerVideoWrap .ytCenterControls .ytSeek span{
    position:absolute !important;
    left:50% !important; top:auto !important; bottom:9px !important;
    transform:translateX(-50%) !important;
    font-size:9.5px !important; font-weight:800 !important; letter-spacing:.02em;
    color:rgba(255,255,255,.94) !important;
  }

  /* play / pause: solid white, crisp shadow, dark centered glyph */
  .playerVideoWrap .ytCenterControls .ytPlay{
    width:70px !important; height:70px !important;
    min-width:70px !important; min-height:70px !important;
    background:#fff !important;
    border:0 !important;
    color:#0a0c10 !important;
    box-shadow:0 12px 34px rgba(0,0,0,.5) !important;
  }
  .playerVideoWrap .ytCenterControls .ytPlay:hover,
  .playerVideoWrap .ytCenterControls .ytPlay:active{
    background:#fff !important;
  }
  .playerVideoWrap .ytCenterControls .ytPlay svg{
    width:32px !important; height:32px !important;
    fill:currentColor !important;
  }
  /* the play triangle reads better nudged a hair off-centre; pause stays centred */
  .playerVideoWrap .ytCenterControls .ytPlay .iconPlay{ transform:translateX(2px); }

  /* a touch more breathing room between the three buttons */
  .playerVideoWrap .ytCenterControls{ gap:18px !important; }
}