/**
 * TiviGlass IPTV - Main Stylesheet
 * TiviMate-inspired design with refined TV-focused aesthetics
 */

/* ============================================
   CSS Variables - Design Tokens
   Premium design optimized for Fire Stick
   ============================================ */
:root {
    /* ===========================================
       Primary Colors - Deep, rich dark theme
       Optimized for Fire Stick OLED/LED displays
       =========================================== */
    --bg-primary: #030610;
    --bg-secondary: #071018;
    --bg-tertiary: #0a1624;
    --bg-elevated: #0e1c30;
    --bg-card: rgba(14, 28, 48, 0.88);

    /* ===========================================
       Accent Colors - Vibrant, TV-friendly
       =========================================== */
    --accent-cyan: #00d4d4;
    --accent-cyan-rgb: 0, 212, 212;
    --accent-cyan-dim: rgba(0, 212, 212, 0.15);
    --accent-cyan-glow: rgba(0, 212, 212, 0.3);
    --accent-cyan-bright: #4de0e0;
    --accent-pink: #ff5a7e;
    --accent-pink-rgb: 255, 90, 126;
    --accent-pink-dim: rgba(255, 90, 126, 0.15);
    --accent-purple: #9966ff;
    --accent-purple-dim: rgba(153, 102, 255, 0.15);
    --accent-gold: #ffbb33;
    --accent-green: #00e676;
    --accent-red: #ff5252;
    --accent-primary: var(--accent-cyan);
    --accent-primary-hover: var(--accent-cyan-bright);
    --accent-on-primary: #031018;
    --theme-gradient: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-pink) 100%);
    --theme-gradient-soft: linear-gradient(
        135deg,
        rgba(var(--accent-cyan-rgb), 0.2) 0%,
        rgba(var(--accent-pink-rgb), 0.18) 100%
    );
    --status-error: #ff5252;
    --status-warning: #ffd700;

    /* ===========================================
       Text Colors - High contrast for 10-foot UI
       =========================================== */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.82);
    --text-tertiary: rgba(255, 255, 255, 0.6);
    --text-disabled: rgba(255, 255, 255, 0.38);
    --text-muted: rgba(255, 255, 255, 0.55);
    --text-inverse: #040810;

    /* ===========================================
       Surface Colors - Clean, defined panels
       =========================================== */
    --surface-glass: rgba(12, 24, 42, 0.94);
    --surface-card: rgba(20, 38, 65, 0.75);
    --surface-overlay: rgba(6, 12, 22, 0.97);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --surface-active: rgba(0, 212, 212, 0.12);
    --surface-selected: rgba(0, 212, 212, 0.18);

    /* ===========================================
       Border Colors - Visible but elegant
       =========================================== */
    --border-default: rgba(255, 255, 255, 0.12);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-focus: var(--accent-cyan);
    --border-active: var(--accent-pink);
    --border-strong: rgba(255, 255, 255, 0.2);

    /* ===========================================
       Shadows & Focus - Premium depth
       =========================================== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 0 2.5px rgba(0, 212, 212, 0.5), 0 0 12px rgba(0, 212, 212, 0.18);
    --shadow-glow-strong: 0 0 0 2.5px var(--accent-cyan), 0 0 20px rgba(0, 212, 212, 0.3);
    --focus-ring: 0 0 0 2.5px var(--accent-cyan);
    --focus-ring-offset: 0 0 0 4px rgba(0, 212, 212, 0.2);

    /* ===========================================
       Typography - Large, readable for TV
       =========================================== */
    --font-primary: 'Outfit', 'Roboto', 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Roboto Mono', 'Consolas', monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ===========================================
       Spacing - Generous for TV remote navigation
       =========================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --spacing-xxxl: 64px;

    /* ===========================================
       Border Radius - Modern, rounded
       =========================================== */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;

    /* ===========================================
       Transitions - Snappy, premium easing
       =========================================== */
    --transition-fast: 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-normal: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Blur - DISABLED for Fire Stick performance */
    --blur-light: 0px;
    --blur-medium: 0px;

    /* ===========================================
       Layout
       =========================================== */
    --sidebar-width: 240px;
    --sidebar-collapsed: 80px;
    --nav-height: 72px;

    /* UI Scaling baseline (device-agnostic) */
    --ui-scale: 0.85;

    /* EPG sizing (full grid) */
    --epg-row-h: 56px;
    --epg-program-inset: 4px;
    --epg-channel-pad-y: 6px;
    --epg-channel-pad-x: 12px;

    /* Focus indicator thickness */
    --focus-width: 3px;

    /* Focus glow — used for the bold D-pad focus ring */
    --focus-glow: 0 0 0 2.5px var(--accent-cyan), 0 0 14px rgba(0, 212, 212, 0.35);
    --focus-glow-strong:
        0 0 0 2.5px var(--accent-cyan), 0 0 20px rgba(0, 212, 212, 0.4), 0 0 40px rgba(0, 212, 212, 0.12);

    /* ===========================================
       Overlay / Popup Shared Tokens
       All modals, toasts, panels, and floating UI
       share these values for a cohesive look.
       =========================================== */
    --overlay-bg: rgba(10, 20, 38, 0.97);
    --overlay-border: 1px solid rgba(255, 255, 255, 0.1);
    --overlay-border-width: 1px;
    --overlay-border-color: rgba(255, 255, 255, 0.1);
    --overlay-radius: var(--radius-lg); /* 16px */
    --overlay-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    --overlay-padding: var(--spacing-lg); /* 24px */
    --overlay-transition: opacity 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --backdrop-bg: rgba(0, 0, 0, 0.78);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Shared control system */
    --control-surface:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.12), transparent 72%),
        linear-gradient(180deg, rgba(28, 42, 68, 0.9) 0%, rgba(14, 22, 40, 0.96) 100%);
    --control-surface-hover:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.16), transparent 72%),
        linear-gradient(180deg, rgba(34, 50, 78, 0.94) 0%, rgba(18, 28, 50, 1) 100%);
    --control-surface-active:
        linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.28) 0%, rgba(60, 228, 255, 0.18) 100%),
        linear-gradient(180deg, rgba(20, 38, 60, 0.94) 0%, rgba(12, 20, 38, 1) 100%);
    --control-surface-focus:
        linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.36) 0%, rgba(78, 232, 255, 0.26) 100%),
        linear-gradient(180deg, rgba(18, 34, 58, 0.96) 0%, rgba(10, 18, 34, 1) 100%);
    --control-surface-primary: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-cyan-bright, #40d8ff) 100%);
    --control-surface-primary-hover: linear-gradient(135deg, var(--accent-cyan-bright, #40d8ff) 0%, #79ebff 100%);
    --control-border: rgba(255, 255, 255, 0.14);
    --control-border-accent: rgba(var(--accent-cyan-rgb), 0.34);
    --control-border-strong: rgba(255, 255, 255, 0.22);
    --control-shadow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 16px rgba(0, 0, 0, 0.14);
    --control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 20px rgba(0, 0, 0, 0.16);
    --control-focus-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 0 4px rgba(var(--accent-cyan-rgb), 0.24);
    --panel-shell-bg:
        radial-gradient(circle at top right, rgba(var(--accent-cyan-rgb), 0.16), transparent 34%),
        linear-gradient(180deg, rgba(18, 30, 54, 0.99) 0%, rgba(8, 18, 34, 0.995) 100%);
    --panel-shell-border: 1px solid rgba(var(--accent-cyan-rgb), 0.16);
    --panel-shell-shadow: 0 30px 60px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.04);

    /* Modal-specific (centred dialog) */
    --modal-radius: var(--radius-xl); /* 24px */
    --modal-padding: var(--spacing-xl); /* 32px */
    --modal-max-width: 560px;
    --modal-title-size: 26px;

    /* Toast-specific */
    --toast-radius: var(--radius-lg); /* 16px */
    --toast-padding: var(--spacing-md) var(--spacing-lg); /* 16px 24px */

    /* Shared button inside overlays */
    --overlay-btn-padding: 12px 24px;
    --overlay-btn-radius: 16px;
    --overlay-btn-font: 15px;
    --overlay-btn-weight: 600;
    --overlay-btn-border: 1px solid var(--border-default);

    /* TV safe-area padding (overscan) */
    --tv-safe-x: 32px;
    --tv-safe-y: 24px;

    /* ===========================================
       VOD Component Variables (Movies/Shows)
       =========================================== */
    /* Larger cards for TV viewing */
    --vod-card-min-width: 150px;
    --vod-card-max-width: 195px;
    --vod-card-gap: 14px;
    --vod-poster-radius: 10px;
    --vod-title-size: 11px;
    --vod-subtitle-size: 12px;
    --vod-rating-size: 12px;
    --vod-progress-height: 6px;
    --vod-badge-size: 12px;

    /* Trending Carousel Variables */
    --trending-height: 340px;
    --trending-item-width: 150px;
    --trending-poster-height: 225px;
    --trending-title-size: 12px;

    /* Shared Pill Tokens */
    --pill-radius: var(--radius-full);
    --pill-min-height: 46px;
    --pill-border-width: 1px;
    --pill-content-gap: 8px;
    --pill-padding-x: 18px;
    --pill-padding-y: 9px;
    --pill-font-size: 13px;
    --pill-gap: 10px;

    /* ===========================================
       Skeleton Loading
       =========================================== */
    --skeleton-bg: rgba(255, 255, 255, 0.07);
    --skeleton-shine: rgba(255, 255, 255, 0.14);
}

/* ============================================
   Focus Reset - Prevent double focus outlines
   Navigation uses a custom .focused class;
   suppress the browser's native :focus ring.
   ============================================ */
[data-focusable]:focus {
    outline: none;
}

/* ============================================
    PERFORMANCE PROFILE (baked-in)
    Conservative UI settings for stability
    ============================================ */
:root {
    /* Disable all blur effects */
    --blur-light: 0px !important;
    --blur-medium: 0px !important;
    --glass-blur: 0px !important;
    --player-blur: 0px !important;
    --player-blur-heavy: 0px !important;

    /* Disable all transitions for maximum performance */
    --transition-fast: 0s !important;
    --transition-normal: 0s !important;
    --transition-slow: 0s !important;
    --motion-fast: 0s !important;
    --motion-med: 0s !important;
    --ease-out-sky: linear !important;
    --ease-inout-sky: linear !important;

    /* Disable shadows completely (major GPU savings) */
    --shadow-sm: none !important;
    --shadow-md: none !important;
    --shadow-lg: none !important;
    --shadow-glow: 0 0 0 2px rgba(var(--accent-cyan-rgb), 0.5) !important;
    --shadow-glow-strong: 0 0 0 2px rgba(var(--accent-cyan-rgb), 0.6) !important;
    --focus-ring: 0 0 0 2px rgba(var(--accent-cyan-rgb), 0.5) !important;
    --control-shadow-soft: none !important;
    --control-shadow: none !important;
    --control-focus-shadow: 0 0 0 2px rgba(var(--accent-cyan-rgb), 0.6) !important;
    --panel-shell-shadow: none !important;

    /* Keep a fixed baseline scale across devices */
    --ui-scale: 0.85 !important;
}

.app {
    width: calc(100% / var(--ui-scale)) !important;
    height: calc(100% / var(--ui-scale)) !important;
    transform: scale(var(--ui-scale)) !important;
    transform-origin: 0 0 !important;
}

.modal-overlay,
.settings-modal-overlay {
    width: calc(100% / var(--ui-scale)) !important;
    height: calc(100% / var(--ui-scale)) !important;
    transform: scale(var(--ui-scale)) !important;
    transform-origin: 0 0 !important;
}

/* ============================================
   CSS CONTAINMENT - Fire Stick Performance Boost
   Limits layout/paint recalculations
   ============================================ */
.channel-list,
.vod-grid,
.epg-grid,
.search-results,
.category-list,
.settings-content,
.modal-content {
    contain: content;
}

.channel-item,
.vod-card,
.epg-program,
.nav-item {
    contain: layout style;
}

/* Disable all backdrop-filter, animations, and transitions */
*,
*::before,
*::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    animation: none !important;
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    transition: none !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
}

/* Disable filter effects only on decorative elements (not logos/images) */
.logo-tivi,
.logo-glass,
.hero-bg,
.bg-pattern,
.bg-pattern::before,
.bg-pattern::after {
    filter: none !important;
}

.loader-bar {
    width: 60% !important;
}

/* Disable ALL transform effects to reduce compositing layers */
.focused,
.vod-card.focused,
.category-item.focused,
.nav-item.focused,
.channel-item.focused,
.quick-channel.focused,
.quick-btn.focused,
.osd-btn.focused,
.osd-strip-item.focused,
.epg-action-btn.focused,
.epg-program.focused {
    transform: none !important;
}

/* Disable scale transforms on hover/focus */
.vod-card:hover,
.quick-btn:hover,
.osd-btn:hover,
.epg-action-btn:hover {
    transform: none !important;
}

/* Simple solid backgrounds instead of gradients */
.bg-gradient {
    background: #050617 !important;
}

.bg-pattern {
    display: none !important;
}

/* Disable hero parallax effects */
.hero-bg {
    transform: none !important;
}

.hero-content {
    transform: none !important;
}

/* Simplify glass surfaces to solid colors */
.sidebar,
.categories-panel,
.channels-panel,
.preview-info,
.preview-epg,
.modal-content,
.toast,
.settings-menu,
.settings-content {
    background: rgba(10, 22, 40, 0.95) !important;
}

/* Disable gradient backgrounds on buttons */
.btn-primary {
    background: var(--accent-cyan) !important;
}

.osd-live {
    background: var(--accent-pink) !important;
}

/* Simplify progress bars */
.player-progress-bar,
.osd-progress-bar,
.mini-guide-progress-bar {
    background: var(--accent-cyan) !important;
}

/* Remove pseudo-element decorations */
.player-progress-bar::after,
.epg-current-time::before,
.epg-program.current::before,
.nav-item::before {
    display: none !important;
}

/* Disable text shadows */
h1,
h2,
h3,
h4,
h5,
h6,
.nav-label,
.panel-title,
.hero-title,
.hero-channel,
.osd-clock {
    text-shadow: none !important;
}

/* Use simple borders instead of box-shadows for focus */
.focused {
    outline: var(--focus-width) solid rgba(var(--accent-cyan-rgb), 0.85) !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb), 0.65) !important;
}

/* Reduce layer complexity in scrolling lists.
   content = layout + style + paint — keeps perf gains without 'size'
   containment which breaks scrollHeight on older WebViews (Fire TV). */
.channel-list,
.category-list,
.epg-grid,
.vod-grid {
    contain: strict !important;
}

/* Collapse GPU compositor layers.
   translateZ(0) / translate3d() force layer promotion even with will-change:auto.
   Override them to 'none' or '0' so the compositor uses fewer tile textures. */
.sidebar,
.channel-list {
    transform: none !important;
}

.hero-bg,
.hero-content {
    transform: none !important;
    filter: none !important;
}

.recording-item:focus,
.recording-item.focused {
    transform: none !important;
}

/* Performance: Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
        --transition-slow: 0s;
    }
}

/* ============================================
   Network Offline State
   ============================================ */
.network-offline .sidebar::after {
    content: 'Offline';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 152, 0, 0.9);
    color: #000;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    z-index: 100;
}

.network-offline .channel-item,
.network-offline .vod-card {
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================
   Base Reset & Typography
   ============================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    font-family: var(--font-primary);
    font-size: 17px;
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    cursor: default;
    letter-spacing: 0.01em;
}

/* ============================================
   Splash Screen - Premium Loading Experience
   ============================================ */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #020408 0%, #061020 40%, #040810 100%);
    overflow: hidden;
}

.splash-content {
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
}

/* Static logo lockup */
.splash-logo-animated {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.logo-letter {
    font-size: clamp(52px, 7vw, 88px);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -2px;
    background: linear-gradient(165deg, var(--accent-cyan) 0%, #9966ff 60%, var(--accent-pink) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 1;
    transform: none;
}

.logo-letter.glass {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(200, 220, 255, 0.92) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Premium glow effect */
.splash-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    height: 320px;
    background:
        radial-gradient(ellipse 55% 45% at 35% 42%, rgba(0, 212, 255, 0.14) 0%, transparent 65%),
        radial-gradient(ellipse 45% 38% at 68% 58%, rgba(153, 102, 255, 0.1) 0%, transparent 65%),
        radial-gradient(ellipse 35% 30% at 50% 50%, rgba(255, 68, 119, 0.06) 0%, transparent 60%);
    z-index: -1;
}

.splash-tagline {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    margin-top: -8px;
}

.splash-status {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    opacity: 0.75;
}

/* Loading indicator dots */
.splash-status::after {
    content: '';
    animation: loadingDots 1.5s infinite steps(4, end) !important;
}

@keyframes loadingDots {
    0% {
        content: '';
    }
    25% {
        content: '.';
    }
    50% {
        content: '..';
    }
    75% {
        content: '...';
    }
}

/* @keyframes fadeIn defined in settings.css */

/* .splash-logo removed — unused (only .splash-logo-animated is used) */

.logo-tivi {
    background: linear-gradient(135deg, #00b0ff 0%, #6f4bff 50%, #ff2b8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: none;
}

.logo-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(200, 220, 255, 0.85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: none;
}

/* ============================================
   App Layout
   ============================================ */
.app {
    display: flex;
    flex-direction: column;
    /* Scale the UI up on 4K while keeping 1080p safe */
    width: calc(100% / var(--ui-scale));
    height: calc(100% / var(--ui-scale));
    position: relative;
    transform: scale(var(--ui-scale));
    transform-origin: 0 0;
}

.app.hidden {
    display: none;
}

.app-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        155deg,
        var(--bg-primary) 0%,
        var(--bg-secondary) 35%,
        var(--bg-tertiary) 70%,
        rgba(6, 12, 24, 1) 100%
    );
}

.bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image:
        radial-gradient(circle at 25% 25%, white 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, white 1px, transparent 1px);
    background-size: 50px 50px;
    /* Performance: Only render when visible */
    content-visibility: auto;
}

/* ============================================
   Top Navigation Bar
   ============================================ */
.sidebar {
    width: 100%;
    height: var(--nav-height); /* Larger for TV */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(7, 16, 24, 0.96) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.03) inset;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: var(--tv-safe-x);
    padding-right: var(--tv-safe-x);
    z-index: 100;
    transition:
        transform var(--transition-normal),
        opacity var(--transition-normal);
    /* GPU layer promotion only when animating */
}

/* Top bar collapsed state - hide when in content sections */
.sidebar-collapsed .sidebar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* When sidebar is visible, add padding to content for the header */
.main-content {
    padding-top: var(--nav-height);
    transition: padding-top var(--transition-slow);
}

/* Remove top padding when sidebar is hidden - content uses full space */
.sidebar-collapsed .main-content {
    padding-top: 0;
}

/* Maximize content space when nav is hidden */
.sidebar-collapsed .content-section {
    padding: 6px;
}

.sidebar-collapsed .vod-container.vod-fullwidth {
    padding: 4px !important;
    gap: 4px !important;
}

/* Ensure vod-fullwidth uses full height */
.vod-container.vod-fullwidth {
    display: flex;
    flex-direction: column;
    gap: 0;
    row-gap: 0;
    column-gap: 0;
    padding: 4px;
    height: 100%;
    overflow: hidden;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
}

.sidebar-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: none;
    border-right: 1px solid var(--border-default);
}

.logo {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    flex: 1;
    list-style: none;
    padding: 0 var(--spacing-sm);
    margin: 0;
    gap: var(--pill-gap);
    overflow-x: auto;
    align-items: center;
}

.tg-pill {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--pill-content-gap);
    padding: var(--pill-padding-y) var(--pill-padding-x);
    margin: 0;
    min-height: var(--pill-min-height);
    border-radius: var(--pill-radius);
    border: var(--pill-border-width) solid var(--control-border);
    background: var(--control-surface);
    box-shadow: var(--control-shadow-soft);
    color: var(--text-secondary);
    font-size: var(--pill-font-size);
    font-weight: var(--font-weight-medium);
    line-height: 1.15;
    white-space: nowrap;
    text-transform: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    flex-shrink: 0;
}

.tg-pill:hover {
    background: var(--control-surface-hover);
    color: var(--text-primary);
    border-color: rgba(var(--accent-cyan-rgb), 0.22);
    transform: translateY(-1px);
}

.tg-pill.active {
    background: var(--control-surface-active);
    color: var(--text-primary);
    border-color: var(--control-border-accent);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--control-shadow);
}

.tg-pill.focused,
.tg-pill:focus,
.tg-pill:focus-visible {
    background: var(--control-surface-focus);
    color: var(--text-primary);
    border-color: var(--accent-cyan);
    box-shadow: var(--control-focus-shadow);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    transform: translateY(-1px);
}

.tg-pill.active.focused,
.tg-pill.active:focus,
.tg-pill.active:focus-visible {
    background: var(--control-surface-primary);
    border-color: var(--control-border-strong);
    color: var(--text-inverse);
    box-shadow: var(--control-focus-shadow);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
}

.nav-item {
    justify-content: flex-start;
    position: relative;
    letter-spacing: 0.01em;
}

.nav-item::before {
    display: none;
}

.nav-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    opacity: 0.95;
}

.nav-label {
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
}

/* QoL 2.4: Sleep timer badge in sidebar */
.sleep-timer-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 16px 0;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: rgba(var(--accent-cyan-rgb, 0, 212, 255), 0.15);
    color: var(--accent-cyan, #00d4ff);
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-collapsed .sleep-timer-badge span {
    display: none;
}
.sidebar-collapsed .sleep-timer-badge {
    justify-content: center;
    padding: 6px;
    margin: 12px 8px 0;
}
.sleep-timer-badge.sleep-warning {
    background: rgba(255, 152, 0, 0.18);
    color: #ffb74d;
}

/* .nav-footer removed — no HTML element uses this class */

/* ============================================
   Main Content Area
   ============================================ */
.main-content {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.content-section {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: var(--bg-primary, #040810);
    padding: calc(var(--spacing-lg) + var(--tv-safe-y) + env(safe-area-inset-top))
        calc(var(--spacing-lg) + var(--tv-safe-x) + env(safe-area-inset-right))
        calc(var(--spacing-lg) + var(--tv-safe-y) + env(safe-area-inset-bottom))
        calc(var(--spacing-lg) + var(--tv-safe-x) + env(safe-area-inset-left));
    z-index: 1;
}

.content-section.hidden {
    display: none !important;
}

.section-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: var(--spacing-lg);
}

.section-intro {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-shrink: 0;
    padding: 24px 26px 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: calc(var(--radius-xl) + 2px);
    background:
        radial-gradient(circle at top right, rgba(var(--accent-cyan-rgb), 0.12), transparent 30%),
        linear-gradient(180deg, rgba(12, 22, 40, 0.78) 0%, rgba(8, 16, 30, 0.88) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 20px 34px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}

.section-intro::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(180px, 34%);
    height: 2px;
    border-radius: var(--radius-full);
    background: linear-gradient(
        90deg,
        rgba(var(--accent-cyan-rgb), 0.95) 0%,
        rgba(var(--accent-cyan-rgb), 0.18) 72%,
        rgba(var(--accent-cyan-rgb), 0) 100%
    );
}

.section-copy {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--accent-cyan-rgb), 0.92);
}

.section-title {
    margin: 0;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.05;
    font-weight: var(--font-weight-extrabold);
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.section-subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.section-badge {
    display: inline-flex;
    align-items: center;
    align-self: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.22);
    background: var(--control-surface);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    box-shadow: var(--control-shadow-soft);
}

/* ============================================
   TV Section - Three Column Layout
   ============================================ */
.tv-container {
    display: grid;
    grid-template-columns: 240px 1fr 380px;
    gap: var(--spacing-md);
    height: 100%;
}

.categories-panel {
    background: var(--surface-glass);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-title {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-default);
}

.category-list {
    flex: 1;
    list-style: none;
    overflow-y: auto;
    padding: var(--spacing-sm);
    scroll-padding: var(--spacing-lg) 0;
}

.category-item {
    justify-content: flex-start;
}

/* Channels Panel */
.channels-panel {
    background: var(--surface-glass);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.channels-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.channels-datetime {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.channels-status {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channels-filters {
    display: flex;
    gap: var(--pill-gap);
    padding: 10px var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-pill {
    justify-content: center;
}

.channel-list {
    flex: 1;
    list-style: none;
    overflow-y: auto;
    padding: var(--spacing-sm);
    contain: layout style;
    scroll-padding: var(--spacing-lg) 0;
}

.channel-item {
    height: 76px;
    min-height: 56px;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    /* Paint containment helps the browser optimize repaint scope per row.
       It does NOT promote each row to a GPU compositor layer. */
    contain: layout style paint;
}

.channel-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

.channel-item.active {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.35);
}

.channel-item.focused {
    background: rgba(0, 212, 255, 0.14);
    border-color: var(--accent-cyan);
    box-shadow: var(--focus-glow);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: -1px;
}

.channel-item.active.focused {
    background: rgba(0, 212, 255, 0.18);
    border-color: var(--accent-cyan);
    box-shadow: var(--focus-glow-strong);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: -1px;
}

.channel-logo {
    width: 56px;
    height: 42px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.channel-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* .channel-logo-placeholder, .channel-info, .channel-name are defined in
   "Enhanced Channel List Styles" section below – those later rules win. */

.channel-epg {
    font-size: 13px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}

.channel-catchup {
    width: 18px;
    height: 18px;
    color: var(--text-tertiary);
}

/* Catch Up Section */
.catchup-container {
    display: grid;
    grid-template-columns: minmax(340px, 520px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    height: 100%;
    align-content: start;
}

.catchup-overview {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}

.catchup-left,
.catchup-right {
    background:
        radial-gradient(circle at top right, rgba(var(--accent-cyan-rgb), 0.1), transparent 30%),
        linear-gradient(180deg, rgba(14, 28, 48, 0.84) 0%, rgba(8, 18, 32, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 30px rgba(0, 0, 0, 0.16);
}

.catchup-panel-header {
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 100%);
}

.catchup-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.catchup-title,
.catchup-channel-title {
    margin: 0;
    font-size: clamp(22px, 2.3vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.catchup-range-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Day selector tabs for catch-up */
.catchup-day-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.catchup-day-tab {
    padding: 7px 16px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    white-space: nowrap;
}
.catchup-day-tab:hover,
.catchup-day-tab.focused {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
    box-shadow: var(--focus-glow);
}
.catchup-day-tab.active {
    background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.96) 0%, rgba(82, 227, 255, 0.92) 100%);
    color: var(--bg-primary, #000);
    border-color: rgba(var(--accent-cyan-rgb), 0.96);
    box-shadow: 0 14px 26px rgba(var(--accent-cyan-rgb), 0.22);
}

.catchup-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 7px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px;
    color: var(--text-secondary);
}

.catchup-channel-list,
.catchup-program-list {
    padding: var(--spacing-md);
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.catchup-channel-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.catchup-channel-item.active,
.catchup-channel-item.focused {
    background: linear-gradient(165deg, rgba(var(--accent-cyan-rgb), 0.14) 0%, rgba(12, 24, 42, 0.88) 100%);
    border-color: rgba(var(--accent-cyan-rgb), 0.34);
    box-shadow: var(--focus-glow);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
}

.catchup-program-item {
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.catchup-program-item + .catchup-program-item {
    margin-top: 8px;
}

.catchup-program-item.focused,
.catchup-program-item:hover {
    background: linear-gradient(165deg, rgba(var(--accent-pink-rgb), 0.12) 0%, rgba(12, 24, 42, 0.88) 100%);
    border-color: rgba(var(--accent-cyan-rgb), 0.3);
    box-shadow:
        0 16px 26px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.catchup-program-time {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
}

.catchup-program-title {
    margin-top: 6px;
    font-weight: 600;
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.catchup-program-desc {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.catchup-program-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    background: rgba(var(--accent-cyan-rgb), 0.14);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
    color: var(--accent-cyan);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ============================================
   Skeleton Loading (Inline)
   ============================================ */

.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--skeleton-bg);
    border-radius: var(--radius-md);
}

/* VOD skeleton cards */
.vod-item.vod-skeleton {
    cursor: default;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.03);
}

.vod-item.vod-skeleton:hover {
    transform: none;
}

.vod-item.vod-skeleton .vod-poster {
    background: var(--skeleton-bg);
}

.vod-item.vod-skeleton .vod-title {
    height: 12px;
    width: 88%;
    padding: 0;
    border-radius: 8px;
}

/* Catch Up program skeletons */
.catchup-program-item.catchup-skeleton {
    cursor: default;
    pointer-events: none;
}

.catchup-program-item.catchup-skeleton .catchup-program-time.skeleton {
    height: 10px;
    width: 56%;
    border-radius: 8px;
}

.catchup-program-item.catchup-skeleton .catchup-program-title.skeleton {
    height: 14px;
    width: 82%;
    margin-top: 8px;
    border-radius: 9px;
}

.catchup-program-item.catchup-skeleton .catchup-program-desc.skeleton {
    height: 12px;
    width: 96%;
    margin-top: 8px;
    border-radius: 9px;
}

.catchup-program-item.catchup-skeleton .catchup-program-desc.skeleton.catchup-skeleton-line2 {
    width: 72%;
}

/* Preview Panel */
.preview-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.preview-video {
    aspect-ratio: 16/9;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-default);
}

.preview-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-disabled);
}

.preview-placeholder svg {
    width: 64px;
    height: 64px;
}

.preview-info {
    background: var(--surface-glass);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    padding: var(--spacing-lg);
}

.preview-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.preview-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.preview-epg {
    flex: 1;
    background: var(--surface-glass);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    overflow: hidden;
}

.preview-epg-item {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-default);
}

.preview-epg-item:last-child {
    border-bottom: none;
}

.preview-epg-time {
    font-size: 12px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.preview-epg-title {
    font-size: 14px;
    margin-top: 2px;
}

.preview-epg-progress {
    height: 3px;
    background: var(--bg-elevated);
    border-radius: 2px;
    margin-top: var(--spacing-xs);
    overflow: hidden;
}

.preview-epg-progress-bar {
    height: 100%;
    background: var(--accent-cyan);
    border-radius: 2px;
    transition: width var(--transition-normal);
}

/* ============================================
   VOD Sections (Movies/Shows)
   ============================================ */
.vod-container {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--spacing-md);
    height: 100%;
}

/* TV Now-style hero bar for Movies/Shows */
.vod-top-bar {
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Prevent Movies/Shows hero resizing (no layout shift) */
.sky-top-bar.vod-top-bar {
    position: relative;
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    overflow: hidden;
    isolation: isolate;
}

.vod-hero-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(var(--accent-cyan-rgb), 0.18), transparent 36%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(3, 6, 16, 0.82) 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

.vod-hero-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3, 6, 16, 0.92) 0%, rgba(3, 6, 16, 0.55) 48%, rgba(3, 6, 16, 0.82) 100%);
}

.sky-top-bar.vod-top-bar .sky-info-panel {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--spacing-md);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.sky-top-bar.vod-top-bar .sky-info-header {
    flex: 0 0 auto;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: stretch;
}

.sky-top-bar.vod-top-bar .sky-program-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.sky-top-bar.vod-top-bar .sky-program-meta {
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow: hidden;
}

.sky-top-bar.vod-top-bar .vod-hero-plot {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.vod-hero-poster {
    width: 56px;
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex: 0 0 auto;
}

.sky-top-bar.vod-top-bar .vod-hero-poster {
    height: 100%;
    width: 120px;
}

.vod-hero-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vod-hero-poster-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-weight: var(--font-weight-extrabold);
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.vod-hero-meta .vod-hero-year:empty,
.vod-hero-meta .vod-hero-genre:empty,
.vod-hero-meta .vod-hero-runtime:empty,
.vod-hero-meta .vod-hero-seasons:empty {
    display: none;
}

/* Full width layout when nav is collapsed */
.vod-container.vod-fullwidth {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    min-height: 0;
}

/* Horizontal categories row */
.vod-categories-row {
    height: var(--nav-height);
    min-height: var(--nav-height);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 0 4px;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.vod-categories-row + .vod-grid {
    margin-top: 4px !important;
    padding-top: 0 !important;
}

.vod-categories-row::-webkit-scrollbar {
    display: none;
}

.category-list-horizontal {
    display: flex;
    align-items: center;
    gap: var(--pill-gap);
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 100%;
    height: 100%;
}

.category-pill {
    justify-content: center;
}

.vod-categories {
    background: var(--surface-glass);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.vod-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    height: 100%;
    overflow: hidden;
    min-height: 0;
}

.vod-info {
    background: var(--surface-glass);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    padding: var(--spacing-lg);
}

.vod-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.vod-meta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 14px;
    color: var(--text-secondary);
}

.vod-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.vod-rating {
    background: var(--accent-cyan);
    color: var(--bg-primary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
}

.vod-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vod-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--vod-card-min-width), var(--vod-card-max-width)));
    gap: var(--vod-card-gap);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 4px 8px 4px;
    scrollbar-gutter: stable;
    min-height: 220px;
    scroll-behavior: smooth;
    /* Align cards to start for consistent layout */
    justify-content: start;
}

.vod-virtual-spacer {
    grid-column: 1 / -1;
    visibility: hidden;
    pointer-events: none;
}

/* VOD cards (Movies/Shows grid) */
.vod-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all var(--transition-fast);
    max-width: var(--vod-card-max-width);
}

.vod-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}

.vod-item.focused {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.12);
    box-shadow: var(--focus-glow);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    transform: translateY(-2px);
}

.vod-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: var(--vod-poster-radius);
    overflow: hidden;
    background: linear-gradient(155deg, rgba(15, 35, 65, 0.92) 0%, rgba(8, 18, 38, 0.96) 100%);
}

.vod-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.vod-poster-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, 0.5);
    z-index: 0;
    background: linear-gradient(145deg, rgba(0, 80, 130, 0.4) 0%, rgba(0, 40, 90, 0.5) 100%);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.vod-item .vod-title {
    font-size: var(--vod-title-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    padding: 2px 4px;
}

.vod-item .vod-year {
    font-size: var(--vod-subtitle-size);
    color: var(--text-tertiary);
    padding: 0 4px;
}

.vod-item .vod-rating {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent-cyan);
    color: var(--text-inverse);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--vod-rating-size);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-sm);
}

/* Trending provider badge on posters */
.vod-provider-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-extrabold);
    box-shadow: var(--shadow-sm);
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   Continue Watching - Progress Bars
   ============================================ */
.vod-item.has-progress .vod-poster {
    position: relative;
}

/* Gradient overlay for better text visibility */
.vod-item.has-progress .vod-poster::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    pointer-events: none;
}

.vod-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--vod-progress-height);
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.vod-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-cyan-bright, #40d8ff) 100%);
    transition: width var(--transition-slow);
    box-shadow: 0 0 8px rgba(var(--accent-cyan-rgb), 0.5);
}

.vod-time-left {
    position: absolute;
    bottom: 10px;
    right: 8px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: var(--vod-badge-size);
    font-weight: 600;
    z-index: 1;
}

.vod-episode-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.9);
    color: var(--accent-cyan);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: var(--vod-badge-size);
    font-weight: 700;
    border: 1px solid var(--accent-cyan-dim);
}

.vod-episode-title {
    font-size: calc(var(--vod-subtitle-size) - 2px);
    color: var(--text-tertiary);
    margin-top: 2px;
    padding: 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   Recommendations - Match Badges & Reasons
   ============================================ */
.category-item .category-icon {
    margin-right: 4px;
}

.vod-item.recommended .vod-poster {
    position: relative;
}

.vod-match-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #10b981;
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--vod-badge-size);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.vod-match-reason {
    font-size: 10px;
    color: var(--accent-cyan);
    margin-top: 3px;
    padding: 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
}

/* ============================================
   Empty States - Polished Empty Messages
   ============================================ */
.empty-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-tertiary);
    font-size: 15px;
    text-align: center;
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Recommendation Tip Box */
.recommendation-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    width: min(100%, 660px);
    min-height: 300px;
    padding: clamp(28px, 4vw, 48px);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.14), transparent 42%),
        linear-gradient(180deg, rgba(16, 28, 48, 0.76) 0%, rgba(10, 18, 34, 0.82) 100%);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 40px rgba(0, 0, 0, 0.18);
}

.recommendation-tip .tip-kicker {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: rgba(var(--accent-cyan-rgb), 0.92);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.recommendation-tip .tip-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
    background: rgba(var(--accent-cyan-rgb), 0.08);
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 16px rgba(0, 212, 255, 0.16));
}

.recommendation-tip .tip-icon svg {
    width: 38px;
    height: 38px;
}

.recommendation-tip h3 {
    position: relative;
    z-index: 1;
    font-size: 28px;
    color: var(--text-primary);
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.recommendation-tip p {
    position: relative;
    z-index: 1;
    max-width: 500px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

.recommendation-tip .tip-progress {
    position: relative;
    z-index: 1;
    display: inline-block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    background: rgba(var(--accent-cyan-rgb), 0.1);
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
}

/* Highlighted recommendation in category list */
.category-item[data-category='recommended'] {
    color: var(--accent-cyan);
    font-weight: 500;
}

.category-item[data-category='recommended'].active {
    background: linear-gradient(135deg, var(--surface-selected) 0%, rgba(16, 185, 129, 0.15) 100%);
    border-color: var(--accent-cyan);
}

/* ============================================
   Series Modal - Improved Season Selection
   ============================================ */
/* .series-detail-modal removed — unused (series uses .series-detail-page) */

/* Full-page series detail view (no overlay) */
.series-detail-page {
    width: 100%;
    height: 100%;
    background: var(--surface-glass);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    overflow: hidden;
}

#series-detail-root {
    width: 100%;
    height: 100%;
}

#section-series-detail .series-modal {
    max-height: none;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#section-series-detail .episodes-container {
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--spacing-md);
}

/* Shrink header/info area in full-page series detail */
#section-series-detail .series-header {
    padding: var(--spacing-md);
}

#section-series-detail .series-header-content {
    gap: var(--spacing-md);
}

#section-series-detail .series-cover {
    width: 120px;
    height: 176px;
}

#section-series-detail .series-info h2 {
    font-size: 20px;
    margin: 0 0 var(--spacing-xs) 0;
}

#section-series-detail .series-meta {
    margin-bottom: var(--spacing-sm);
}

#section-series-detail .series-meta span {
    font-size: 11px;
    padding: 3px 8px;
}

#section-series-detail .continue-btn {
    font-size: 13px;
    padding: 8px 12px;
    margin-bottom: var(--spacing-sm);
}

#section-series-detail .series-plot {
    font-size: 12px;
    line-height: 1.4;
    max-height: 52px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fit more episodes on-screen in full-page series detail */
#section-series-detail .season-episodes.active {
    gap: var(--spacing-sm);
}

#section-series-detail .episode-card {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
}

#section-series-detail .episode-thumbnail {
    width: 140px;
    height: 78px;
}

#section-series-detail .episode-plot {
    display: none;
}

.series-modal {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(10, 18, 34, 0.98) 0%, rgba(6, 12, 24, 0.99) 100%);
}

.series-header {
    position: relative;
    padding: 28px 28px 24px;
    background:
        radial-gradient(circle at top right, rgba(var(--accent-cyan-rgb), 0.2), transparent 32%),
        linear-gradient(140deg, rgba(14, 36, 62, 0.96) 0%, rgba(8, 18, 32, 0.98) 58%, rgba(6, 12, 24, 0.99) 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.series-header::after {
    content: '';
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-cyan-rgb), 0.4), transparent);
}

.series-header-content {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.series-cover {
    flex-shrink: 0;
    width: 174px;
    height: 252px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(18, 34, 58, 1) 0%, rgba(10, 18, 32, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
}

.series-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.series-info {
    flex: 1;
    min-width: 0;
}

.series-info h2 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: clamp(28px, 3vw, 34px);
    color: white;
    letter-spacing: -0.03em;
}

.series-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--spacing-md);
}

.series-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: var(--text-secondary);
}

.series-rating {
    color: var(--status-warning) !important;
    background: rgba(255, 202, 40, 0.14) !important;
    border-color: rgba(255, 202, 40, 0.22) !important;
}

.continue-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--accent-cyan);
    color: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.35);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: var(--spacing-md);
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    box-shadow: 0 16px 28px rgba(var(--accent-cyan-rgb), 0.22);
}

.continue-btn:hover,
.continue-btn:focus,
.continue-btn.focused {
    background: var(--accent-cyan-bright, #40d8ff);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    box-shadow: var(--focus-glow);
}

.series-plot {
    max-width: 720px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    max-height: 96px;
    overflow: hidden;
}

/* Season Tabs */
.season-selector {
    background: rgba(255, 255, 255, 0.02);
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.season-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.season-tabs::-webkit-scrollbar {
    display: none;
}

.season-tab {
    flex-shrink: 0;
}

/* Episodes Container */
.episodes-container {
    padding: 24px;
    max-height: 450px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(10, 18, 34, 0.78) 0%, rgba(6, 12, 24, 0.94) 100%);
}

.season-episodes {
    display: none;
}

.season-episodes.active {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 18px;
}

/* Episode Card */
.episode-card {
    display: flex;
    gap: var(--spacing-md);
    padding: 18px;
    background: linear-gradient(165deg, rgba(15, 28, 48, 0.76) 0%, rgba(8, 18, 32, 0.84) 100%);
    border-radius: 20px;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 16px 28px rgba(0, 0, 0, 0.16);
}

.episode-card:hover {
    background: linear-gradient(165deg, rgba(var(--accent-cyan-rgb), 0.12) 0%, rgba(8, 18, 32, 0.86) 100%);
    border-color: rgba(var(--accent-cyan-rgb), 0.18);
    transform: translateY(-2px);
}

.episode-card.focused {
    background: linear-gradient(165deg, rgba(var(--accent-cyan-rgb), 0.16) 0%, rgba(8, 18, 32, 0.9) 100%);
    border-color: rgba(var(--accent-cyan-rgb), 0.3);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    box-shadow:
        var(--focus-glow),
        0 20px 36px rgba(0, 0, 0, 0.18);
}

.episode-thumbnail {
    flex-shrink: 0;
    width: 170px;
    height: 96px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, rgba(18, 34, 58, 1) 0%, rgba(10, 18, 32, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.episode-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.58);
    background: linear-gradient(180deg, rgba(16, 30, 52, 1) 0%, rgba(10, 18, 32, 1) 100%);
    letter-spacing: 0.08em;
}

.episode-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.episode-card:hover .episode-play-icon,
.episode-card:focus .episode-play-icon,
.episode-card.focused .episode-play-icon {
    opacity: 1;
}

.episode-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.6);
}

.episode-progress-fill {
    height: 100%;
    background: var(--accent-cyan);
    transition: width var(--transition-slow);
}

.episode-card.watched .episode-progress-fill {
    background: rgba(16, 185, 129, 0.95);
}

.episode-watched-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(16, 185, 129, 0.9);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.episode-card.watched {
    opacity: 0.9;
}

.episode-card.watched:hover,
.episode-card.watched:focus,
.episode-card.watched.focused {
    opacity: 1;
}

.episode-resume {
    color: var(--accent-cyan);
    font-weight: 500;
}

.episode-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.episode-number-title {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.episode-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.episode-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.episode-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.episode-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.episode-plot {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   VOD Card
   ============================================ */
.vod-card {
    position: relative;
    aspect-ratio: 2/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm);
}

.vod-card:hover {
    z-index: 1;
    box-shadow: var(--shadow-lg);
}

.vod-card.focused {
    z-index: 2;
    box-shadow: var(--focus-glow);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
}

.vod-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vod-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.85);
}

.vod-card-title {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vod-card-rating {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    background: var(--accent-cyan);
    color: var(--bg-primary);
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
}

/* Search base (.search-container, .search-input, .search-results, .search-placeholder)\n   defined in the \"Search Section Improvements\" section below (~L3250). */

/* Search Loading State */
.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxxl) var(--spacing-xxl);
    color: var(--text-secondary);
    gap: var(--spacing-lg);
}

.search-loading .loading-spinner {
    width: 56px;
    height: 56px;
}

.search-loading p {
    font-size: 1.1rem;
    color: var(--text-tertiary);
}

/* .search-results-grid removed — unused */

/* ============================================
   Recordings
   ============================================ */
.recordings-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.reminders-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    width: min(100%, 620px);
    min-height: 340px;
    gap: 10px;
    text-align: center;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px);
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.14), transparent 42%),
        linear-gradient(180deg, rgba(16, 28, 48, 0.76) 0%, rgba(10, 18, 34, 0.82) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 40px rgba(0, 0, 0, 0.18);
}

.empty-state::before {
    content: '';
    position: absolute;
    inset: auto 12% -34% 12%;
    height: 58%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(var(--accent-cyan-rgb), 0.12) 0%,
        rgba(var(--accent-cyan-rgb), 0.03) 38%,
        transparent 72%
    );
    filter: blur(20px);
    pointer-events: none;
}

.empty-state svg {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    margin-bottom: 6px;
    padding: 22px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
    background: rgba(var(--accent-cyan-rgb), 0.08);
    opacity: 0.96;
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 16px rgba(0, 212, 255, 0.16));
}

.empty-state h3 {
    position: relative;
    z-index: 1;
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.empty-state p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 440px;
}

.empty-state .empty-state-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: rgba(var(--accent-cyan-rgb), 0.92);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.empty-state .empty-state-path {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin-top: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--control-border);
    background: var(--control-surface);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 14px;
}

/* Recordings list */
.recordings-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 0 0 var(--spacing-lg) 0;
}

.reminders-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 0 0 var(--spacing-lg) 0;
}

.recordings-title {
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.reminders-title {
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.recordings-subtitle {
    font-size: 14px;
    color: var(--text-tertiary);
}

.reminders-subtitle {
    font-size: 14px;
    color: var(--text-tertiary);
}

.recordings-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.reminders-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.recording-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, rgba(14, 28, 48, 0.7) 0%, rgba(8, 18, 32, 0.75) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.reminder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, rgba(14, 28, 48, 0.7) 0%, rgba(8, 18, 32, 0.75) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.recording-item:focus,
.recording-item.focused {
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    transform: translateZ(0) scale(1.01);
    border-color: rgba(var(--accent-cyan-rgb), 0.75);
    box-shadow: var(--focus-glow);
}

.reminder-item:focus,
.reminder-item.focused {
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    transform: translateZ(0) scale(1.01);
    border-color: rgba(var(--accent-cyan-rgb), 0.75);
    box-shadow: var(--focus-glow);
}

.reminder-item.is-live {
    border-color: rgba(var(--accent-cyan-rgb), 0.36);
    background: linear-gradient(165deg, rgba(12, 34, 52, 0.82) 0%, rgba(8, 24, 39, 0.8) 100%);
}

.recording-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.reminder-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 10px;
}

.recording-name {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reminder-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.reminder-name {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reminder-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
    background: rgba(var(--accent-cyan-rgb), 0.12);
    color: rgba(var(--accent-cyan-rgb), 0.96);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.recording-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.reminder-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.recording-meta-chip {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.reminder-meta-chip {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.recording-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.reminder-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.btn.small {
    padding: 8px 12px;
    min-height: 40px;
    font-size: 14px;
}

.btn.danger {
    background: rgba(255, 60, 100, 0.18);
    border-color: rgba(255, 60, 100, 0.35);
    color: #ffd2dd;
}

.btn.danger:hover {
    background: rgba(255, 60, 100, 0.18);
    border-color: rgba(255, 60, 100, 0.45);
}

.btn.danger.focused {
    background: rgba(255, 60, 100, 0.26);
    border-color: rgba(255, 60, 100, 0.55);
    box-shadow: var(--focus-glow);
}

.tab-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--surface-glass);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 52px;
    min-width: 120px;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.tab-btn.active {
    background: var(--accent-cyan);
    color: var(--text-inverse);
    border-color: var(--accent-cyan);
}

.tab-btn.focused {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--accent-cyan);
    color: var(--text-primary);
    box-shadow: var(--focus-glow);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
}

.tab-btn.active.focused {
    background: var(--accent-cyan-bright);
    border-color: var(--accent-cyan-bright);
    box-shadow: var(--focus-glow-strong);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
}

/* Modal base (.modal-overlay, .modal-content, .modal-title, .modal-body)
   defined in the "Modal Enhancements" section below (~L3593). */

.modal-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

.btn {
    background: var(--control-surface);
    padding: 12px 24px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
    border: 1px solid var(--control-border);
    outline: none;
    min-height: 52px;
    min-width: 136px;
    box-shadow: var(--control-shadow);
}

.btn-primary {
    background: var(--control-surface-primary);
    color: var(--text-inverse);
    border-color: var(--control-border-strong);
}

.btn-primary:hover {
    background: var(--control-surface-primary-hover);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.btn-primary.focused {
    background: var(--control-surface-primary-hover);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: var(--control-focus-shadow);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--control-surface);
    color: var(--text-primary);
    border: 1px solid var(--control-border);
}

.btn-secondary:hover {
    background: var(--control-surface-hover);
    border-color: rgba(var(--accent-cyan-rgb), 0.22);
    transform: translateY(-1px);
}

.btn-secondary.focused {
    background: var(--control-surface-focus);
    border-color: var(--accent-cyan);
    box-shadow: var(--control-focus-shadow);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    transform: translateY(-1px);
}

.btn.focused {
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    box-shadow: var(--control-focus-shadow);
}

/* Toast base (.toast-container, .toast) defined in the
   "Toast Notifications" section below (~L3563). */

.toast.success {
    border-color: var(--accent-cyan);
}

.toast.error {
    border-color: var(--accent-pink);
}

.toast-icon {
    width: 24px;
    height: 24px;
}

.toast.success .toast-icon {
    color: var(--accent-cyan);
}

.toast.error .toast-icon {
    color: var(--accent-pink);
}

.toast-message {
    flex: 1;
    font-size: 14px;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    border: 1px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.25);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================
   Utility Classes
   ============================================ */
.hidden {
    display: none !important;
}

/* For elements that start hidden but will be shown via JS inline styles. */
.start-hidden {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ============================================
   Focus States (TV Navigation)
   ============================================ */

/* --- D-pad / keyboard FOCUS: bold, unmissable glow ring --- */
[data-focusable].focused {
    outline: var(--focus-width) solid var(--accent-cyan) !important;
    outline-offset: 2px;
    box-shadow: var(--focus-glow) !important;
    z-index: 5;
    /* Ensure the focused item is never clipped by siblings */
    position: relative;
}

/* --- Mouse HOVER: subtle highlight only --- */
[data-focusable].dpad-hovered {
    background: var(--surface-hover);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Scroll-margin so scrollIntoView keeps a comfortable gap from edges */
[data-focusable] {
    scroll-margin: 12px 0;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

/* Smaller screens / lower resolution TVs */
@media (max-width: 1280px) {
    :root {
        --sidebar-width: 180px;

        /* Smaller VOD cards for compact screens */
        --vod-card-min-width: 120px;
        --vod-card-max-width: 160px;
        --vod-card-gap: 10px;
        --vod-title-size: 9px;

        /* Smaller trending carousel */
        --trending-height: 270px;
        --trending-item-width: 110px;
        --trending-poster-height: 160px;
        --trending-title-size: 10px;

        /* Smaller pills */
        --pill-padding-x: 12px;
        --pill-padding-y: 5px;
        --pill-font-size: 12px;
    }

    .tv-container {
        grid-template-columns: 200px 1fr 320px;
    }

    .vod-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--vod-card-min-width), var(--vod-card-max-width)));
    }
}

/* Large screens / 4K TVs */
@media (min-width: 1920px) {
    :root {
        font-size: 20px;

        /* Slightly thicker focus ring and safer margins for 4K TVs */
        --focus-width: 3px;
        --tv-safe-x: 40px;
        --tv-safe-y: 40px;

        /* Larger VOD cards for big screens */
        --vod-card-min-width: 160px;
        --vod-card-max-width: 220px;
        --vod-card-gap: 16px;
        --vod-title-size: 11px;
        --vod-subtitle-size: 12px;

        /* Larger trending carousel */
        --trending-height: 360px;
        --trending-item-width: 160px;
        --trending-poster-height: 240px;
        --trending-title-size: 13px;

        /* Larger pills */
        --pill-padding-x: 18px;
        --pill-padding-y: 8px;
        --pill-font-size: 14px;
    }

    .tv-container {
        grid-template-columns: 280px 1fr 420px;
    }
}

/* ============================================
   App Loader
   ============================================ */
.app-loader {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: var(--backdrop-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: var(--overlay-transition);
}

.app-loader.hidden {
    display: none;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    text-align: center;
}

.app-loader .loading-spinner {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

.app-loader.mode-progress .loading-spinner {
    display: none;
}

.loader-progress {
    display: none;
    width: min(520px, 72vw);
}

.app-loader.mode-progress .loader-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.loader-progress-track {
    width: 100%;
    height: 8px;
    background: var(--accent-cyan-dim);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.loader-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-cyan);
    transition: width var(--transition-fast);
}

.loader-progress-meta {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-progress-percent {
    color: var(--text-secondary);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

.loader-message {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.25;
    margin-top: 0;
}

/* ============================================
   Enhanced Channel List Styles (TiviMate-like)
   ============================================ */

.channel-logo-wrapper {
    width: 54px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.channel-logo-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.channel-logo-placeholder {
    width: 54px;
    height: 40px;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-elevated));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

.channel-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.channel-name {
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.channel-program {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-progress {
    height: 2px;
    background: var(--bg-elevated);
    border-radius: 1px;
    overflow: hidden;
    margin-top: 2px;
    width: 100%;
}

.channel-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-pink) 0%, rgba(255, 68, 119, 0.75) 100%);
    border-radius: 1px;
    transition: width var(--transition-slow);
}

/* ============================================
   EPG Inline View (TiviMate-style preview)
   ============================================ */
.epg-inline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.epg-time-slot {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.epg-time-slot.current {
    color: var(--text-primary);
}

.epg-time-slot .time {
    width: 70px;
    flex-shrink: 0;
}

.epg-time-slot .title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   Preview Panel Enhancements
   ============================================ */
.preview-video-container {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-default);
}

.preview-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.preview-video-placeholder svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

.preview-info-panel {
    background: var(--surface-glass);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    padding: var(--spacing-md);
}

.preview-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.preview-description {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   Search Section Improvements
   ============================================ */
.search-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: var(--spacing-lg);
}

.search-input-wrapper {
    position: relative;
    flex-shrink: 0;
}

.search-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    color: var(--text-tertiary);
}

.search-input {
    width: 100%;
    max-width: 760px;
    min-height: 64px;
    padding: 18px 18px 18px 58px;
    background: linear-gradient(180deg, rgba(15, 28, 48, 0.9) 0%, rgba(10, 20, 36, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    outline: none;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.search-input:focus,
.search-input.focused {
    border-color: var(--accent-cyan);
    background: linear-gradient(180deg, rgba(17, 31, 54, 0.96) 0%, rgba(11, 22, 40, 0.98) 100%);
    box-shadow:
        0 0 0 3px rgba(var(--accent-cyan-rgb), 0.12),
        0 18px 32px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-results {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: clamp(22px, 2vw, 30px);
    border-radius: calc(var(--radius-xl) + 2px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        radial-gradient(circle at top right, rgba(var(--accent-cyan-rgb), 0.12), transparent 34%),
        linear-gradient(180deg, rgba(14, 26, 44, 0.76) 0%, rgba(8, 18, 32, 0.84) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 20px 34px rgba(0, 0, 0, 0.14);
    position: relative;
}

.search-results > * {
    position: relative;
    z-index: 1;
}

.search-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    color: var(--text-tertiary);
    gap: 10px;
    text-align: center;
    padding: clamp(32px, 4vw, 52px);
    border-radius: 28px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.12), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.search-placeholder svg {
    width: 84px;
    height: 84px;
    margin-bottom: 6px;
    padding: 20px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
    background: rgba(var(--accent-cyan-rgb), 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--accent-cyan);
    opacity: 0.92;
}

.search-placeholder h3 {
    margin: 0;
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.search-placeholder p {
    margin: 0;
    max-width: 480px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.search-placeholder-note {
    font-size: 14px !important;
    color: var(--text-tertiary) !important;
}

.search-placeholder-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.search-placeholder-actions .btn {
    min-width: 168px;
    justify-content: center;
}

.search-placeholder-path {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin-top: 2px !important;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.16);
    background: rgba(var(--accent-cyan-rgb), 0.08);
    color: rgba(var(--accent-cyan-rgb), 0.92) !important;
    font-size: 13px !important;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.search-section {
    margin-bottom: var(--spacing-xxl);
}

.search-section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-section-icon {
    width: 24px;
    height: 24px;
    color: var(--accent-cyan);
    flex-shrink: 0;
}

.search-section h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.search-section-count {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-left: auto;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
}

/* Channel search grid — horizontal list items */
.search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md);
}

/* VOD search grid — poster cards */
.search-grid-vod {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 170px));
    gap: 14px;
}

/* Base search item — horizontal (channels) */
.search-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--surface-card);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast) !important;
    border: 2px solid transparent;
}

.search-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.search-item.focused {
    background: var(--accent-cyan-dim);
    border-color: var(--accent-cyan);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    box-shadow: var(--focus-glow);
}

/* VOD search item — vertical poster card */
.search-item.vod-item {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: rgba(20, 30, 50, 0.85);
    border-radius: 8px;
    overflow: hidden;
}

.search-item.vod-item:hover {
    transform: scale(1.015);
    box-shadow: var(--shadow-md);
    z-index: 2;
}

.search-item.vod-item.focused {
    transform: scale(1.02) !important;
    box-shadow:
        var(--focus-glow),
        0 6px 20px rgba(0, 0, 0, 0.35) !important;
    background: rgba(20, 30, 50, 0.85);
    z-index: 3;
    border-color: var(--accent-cyan);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
}

/* Channel logo container */
.search-item-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* VOD poster container */
.search-item-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 0;
    background: rgba(30, 50, 80, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.search-item-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.search-item-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-logo-fallback {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* VOD search info area */
.search-item.vod-item .search-item-info {
    padding: 8px 10px 10px;
}

.search-item-info {
    flex: 1;
    min-width: 0;
}

.search-item-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.search-item.vod-item .search-item-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* ============================================
   Toast Notifications
   ============================================ */
.toast-container {
    position: fixed;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    background: linear-gradient(170deg, rgba(14, 28, 48, 0.97) 0%, rgba(8, 18, 32, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--toast-padding);
    border-radius: var(--toast-radius);
    box-shadow: var(--shadow-xl);
    color: var(--text-primary);
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(0.97);
    transition:
        var(--overlay-transition),
        transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.toast.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* ============================================
   Modal Enhancements
   ============================================ */
.tg-scroll-lock {
    overscroll-behavior: none;
}

html.tg-scroll-lock,
body.tg-scroll-lock {
    overflow: hidden !important;
}

.modal-overlay.tg-scroll-lock {
    overscroll-behavior: none;
    touch-action: none;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 8000;
    background: radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.12), transparent 32%), var(--backdrop-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: var(--overlay-transition);
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: var(--panel-shell-bg);
    border: var(--panel-shell-border);
    border-radius: 30px;
    padding: 34px 34px 30px;
    max-width: var(--modal-max-width);
    width: min(92vw, var(--modal-max-width));
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    isolation: isolate;
    box-shadow: var(--panel-shell-shadow);
}

.modal-content::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 124px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.modal-content > * {
    position: relative;
    z-index: 1;
}

.modal-title {
    font-size: var(--modal-title-size);
    font-weight: 600;
    margin-bottom: 14px;
    letter-spacing: -0.03em;
}

.modal-body {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.modal-body p {
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
}

.modal-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-btn {
    padding: var(--overlay-btn-padding);
    border: 1px solid var(--control-border);
    border-radius: var(--overlay-btn-radius);
    background: var(--control-surface);
    color: var(--text-primary);
    font-size: var(--overlay-btn-font);
    font-weight: var(--overlay-btn-weight);
    min-width: 140px;
    min-height: 50px;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
    box-shadow: var(--control-shadow);
}

.modal-btn:hover {
    background: var(--control-surface-hover);
    border-color: rgba(var(--accent-cyan-rgb), 0.22);
    transform: translateY(-1px);
}

.modal-btn.focused {
    background: var(--control-surface-focus);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    box-shadow: var(--control-focus-shadow);
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
}

.modal-btn.primary {
    background: var(--control-surface-primary);
    border-color: var(--control-border-strong);
    color: var(--text-inverse);
}

.modal-btn.primary:hover {
    background: var(--control-surface-primary-hover);
    transform: translateY(-1px);
}

.modal-btn.primary.focused {
    background: var(--control-surface-primary-hover);
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
    box-shadow: var(--control-focus-shadow);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.modal-content.welcome-no-playlist {
    max-width: 720px;
    padding: 44px 44px 36px;
    border-color: rgba(var(--accent-cyan-rgb), 0.16);
    background:
        radial-gradient(circle at top right, rgba(var(--accent-cyan-rgb), 0.22), transparent 34%),
        linear-gradient(180deg, rgba(16, 30, 54, 0.995) 0%, rgba(8, 18, 34, 0.995) 100%);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(var(--accent-cyan-rgb), 0.08);
    overflow: hidden;
}

.modal-content.welcome-no-playlist::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.modal-content.welcome-no-playlist::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-cyan-rgb), 0.18) 0%, rgba(var(--accent-cyan-rgb), 0) 72%);
    pointer-events: none;
    z-index: 0;
}

.modal-content.welcome-no-playlist > * {
    position: relative;
    z-index: 1;
}

.modal-content.welcome-no-playlist .modal-title {
    margin-bottom: 14px;
    font-size: clamp(28px, 3vw, 34px);
}

.modal-content.welcome-no-playlist .modal-body {
    margin-bottom: 28px;
}

.welcome-modal-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 520px;
    padding-left: 18px;
    border-left: 2px solid rgba(var(--accent-cyan-rgb), 0.32);
}

.welcome-modal-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(var(--accent-cyan-rgb), 0.92);
}

.welcome-modal-lead {
    margin: 0;
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.45;
    color: var(--text-primary);
}

.welcome-modal-path {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 40px;
    margin-top: 4px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--control-border);
    background: var(--control-surface);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 14px;
}

.modal-content.welcome-no-playlist .modal-buttons {
    justify-content: flex-start;
    gap: 14px;
    padding-top: 14px;
}

.modal-content.welcome-no-playlist .modal-btn {
    min-width: 150px;
    min-height: 52px;
}

/* ============================================
   Context Panel (slide-in from left)
   ============================================ */
.modal-overlay.ctx-panel-left {
    justify-content: flex-start;
    align-items: stretch;
}

.modal-overlay.ctx-panel-left .modal-content {
    position: absolute;
    inset: 0 auto 0 0;
    max-width: 312px;
    width: 312px;
    max-height: none;
    min-height: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0 14px 14px 0 !important;
    padding: 24px 16px 16px;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 18px 0 36px rgba(0, 0, 0, 0.28) !important;
}

.modal-overlay.ctx-panel-left.hidden .modal-content {
    transform: translateX(-100%);
}

.ctx-panel-left .ctx-panel-header {
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-default);
}

.ctx-panel-left .ctx-panel-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text-primary);
}

.ctx-panel-left .ctx-panel-header p {
    margin: 0;
    opacity: 0.6;
    font-size: 0.85em;
    color: var(--text-secondary);
}

.ctx-panel-left .ctx-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    padding-right: 2px;
}

.ctx-panel-left .ctx-panel-actions .btn {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    padding: 11px 14px !important;
    font-size: 14px !important;
    line-height: 1.25;
    min-height: 48px !important;
    height: auto !important;
    min-width: 0;
    border-radius: 12px !important;
    box-shadow: none !important;
    border-width: 1px !important;
}

.ctx-panel-left .ctx-panel-actions .btn.primary,
.ctx-panel-left .ctx-panel-actions .btn.secondary,
.ctx-panel-left .ctx-panel-actions .btn.danger {
    border-radius: 12px !important;
}

.ctx-panel-left .ctx-panel-actions .btn.focused,
.ctx-panel-left .ctx-panel-actions .btn.primary.focused,
.ctx-panel-left .ctx-panel-actions .btn.secondary.focused,
.ctx-panel-left .ctx-panel-actions .btn.danger.focused {
    transform: none !important;
    box-shadow:
        inset 0 0 0 2px rgba(var(--accent-cyan-rgb), 0.78),
        0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
}

/* Inline SVG icons in context panels & buttons */
.ctx-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 4px;
    flex-shrink: 0;
    display: inline-block;
}

.cat-icon {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 2px;
    flex-shrink: 0;
    display: inline-block;
}

.rating-star {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 2px;
    color: #f5c518;
    fill: #f5c518;
}

.ctx-panel-divider {
    height: 1px;
    background: var(--border-default);
    margin: 6px 0;
    opacity: 0.5;
    flex-shrink: 0;
}

.ctx-panel-section-label {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    padding: 2px 14px 4px;
    opacity: 0.6;
}

/* ============================================
   Empty State Messages
   ============================================ */
.empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 240px;
    width: min(100%, 620px);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 44px);
    color: var(--text-secondary);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.12), transparent 40%),
        linear-gradient(180deg, rgba(16, 28, 48, 0.74) 0%, rgba(10, 18, 34, 0.8) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.empty-message::before {
    content: '';
    position: absolute;
    inset: auto 16% -36% 16%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(var(--accent-cyan-rgb), 0.1) 0%,
        rgba(var(--accent-cyan-rgb), 0.02) 38%,
        transparent 72%
    );
    filter: blur(18px);
    pointer-events: none;
}

.empty-message p {
    position: relative;
    z-index: 1;
    margin: 0;
}

.empty-message > p:first-child:not(.empty-message-kicker):not(.hint):not(.empty-message-path),
.empty-message .empty-message-title {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.empty-message .empty-message-kicker {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: rgba(var(--accent-cyan-rgb), 0.92);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.empty-message .hint {
    max-width: 400px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-tertiary);
}

.empty-message .empty-message-path {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin-top: 4px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--control-border);
    background: var(--control-surface);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 14px;
}

.empty-message-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.empty-message-actions .btn {
    min-width: 168px;
    justify-content: center;
}

.empty-message svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.3;
}

/* ============================================
   Loading Spinner
   ============================================ */
.loading-spinner {
    width: 48px;
    height: 48px;
    border: 2.5px solid rgba(255, 255, 255, 0.06);
    border-top-color: var(--accent-cyan);
    border-right-color: rgba(0, 212, 255, 0.35);
    border-radius: 50%;
    animation: spin 0.85s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important;
    background: transparent !important;
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.18));
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Trending Carousel - Popular on Streaming Platforms
   Premium streaming-app style tiles
   ============================================ */
.trending-carousel {
    position: relative;
    grid-column: 1 / -1;
    width: 100%;
    height: var(--trending-height);
    margin-bottom: 6px;
    background:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.08), transparent 42%),
        linear-gradient(180deg, rgba(16, 28, 48, 0.72) 0%, rgba(10, 18, 34, 0.78) 100%);
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-width: 100%;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 38px rgba(0, 0, 0, 0.15);
}

.trending-carousel-inner {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.trending-carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 18px 26px 18px 26px;
    box-sizing: border-box;
    position: relative;
}

/* Provider accent bar on left edge */
.trending-carousel-slide::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 2px;
    background: var(--accent-cyan);
    opacity: 0.92;
}

.trending-provider-header {
    display: flex;
    align-items: center;
    gap: 6px 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 0;
    padding-left: 10px;
    border-bottom: none;
}

.trending-provider-logo {
    display: none;
}

.trending-provider-name {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
    text-transform: none;
}

.trending-provider-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.58);
    margin-left: 0;
    flex: 0 0 100%;
    width: 100%;
    line-height: 1.4;
}

.trending-items-row {
    display: flex;
    gap: 12px;
    flex: 1;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    padding: 2px 6px 12px 4px;
}

.trending-items-row::-webkit-scrollbar {
    display: none;
}

.trending-item {
    flex: 0 0 auto;
    width: var(--trending-item-width);
    cursor: pointer;
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal) !important;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: rgba(20, 30, 50, 0.85);
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.trending-item:hover,
.trending-item:focus,
.trending-item.focused {
    transform: scale(1.03) !important;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-cyan-rgb), 0.3);
    outline: none;
    border-color: rgba(var(--accent-cyan-rgb), 0.6);
    z-index: 5;
}

.trending-item:focus,
.trending-item.focused {
    border-color: var(--accent-cyan);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.6),
        0 0 12px rgba(var(--accent-cyan-rgb), 0.25) !important;
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: 1px;
}

.trending-item-poster {
    width: 100%;
    height: var(--trending-poster-height);
    object-fit: cover;
    background: rgba(30, 50, 80, 0.9);
    border-radius: 0;
    flex-shrink: 0;
}

.trending-item:hover .trending-item-poster {
    /* No transform for Fire Stick */
}

/* Gradient overlay on poster for text legibility */
.trending-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
    pointer-events: none;
    border-radius: 0 0 6px 6px;
}

/* Poster placeholder icon (shown when image hasn't loaded) */
.trending-item-placeholder {
    width: 100%;
    height: var(--trending-poster-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(25, 40, 65, 1) 0%, rgba(15, 25, 45, 1) 100%);
    flex-shrink: 0;
}

.trending-item-placeholder svg {
    width: 36px;
    height: 36px;
    opacity: 0.25;
    color: rgba(255, 255, 255, 0.5);
}

.trending-item-info {
    display: block;
    padding: 6px 8px 8px;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.92) 100%);
    min-height: 36px;
    flex-shrink: 0;
}

.trending-item-title {
    display: block;
    font-size: var(--trending-title-size);
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin-bottom: 2px;
}

.trending-item-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    gap: 6px;
    align-items: center;
}

.trending-item-rating {
    color: #ffca28;
    font-weight: 700;
    font-size: 10px;
}

/* Carousel Navigation */
.trending-carousel-nav {
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-sm);
    z-index: 10;
}

.trending-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast) !important;
}

.trending-nav-btn:hover,
.trending-nav-btn:focus,
.trending-nav-btn.focused {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    outline: none;
}

.trending-nav-btn svg {
    width: 18px;
    height: 18px;
}

/* Carousel Indicators */
.trending-carousel-indicators {
    position: absolute;
    bottom: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-xs);
    z-index: 10;
}

.trending-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all var(--transition-slow) !important;
}

.trending-indicator.active {
    width: 24px;
    border-radius: 4px;
    background: var(--accent-cyan);
}

/* Provider-specific colors */
.trending-carousel-slide[data-provider='netflix'] .trending-provider-logo {
    background: #e50914;
}
.trending-carousel-slide[data-provider='disney'] .trending-provider-logo {
    background: #113ccf;
}
.trending-carousel-slide[data-provider='prime'] .trending-provider-logo {
    background: #00a8e1;
}
.trending-carousel-slide[data-provider='hbo'] .trending-provider-logo {
    background: #b026ff;
}
.trending-carousel-slide[data-provider='apple'] .trending-provider-logo {
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.trending-carousel-slide[data-provider='paramount'] .trending-provider-logo {
    background: #0064ff;
}
.trending-carousel-slide[data-provider='hulu'] .trending-provider-logo {
    background: #1ce783;
}
.trending-carousel-slide[data-provider='trending'] .trending-provider-logo {
    background: linear-gradient(135deg, #ff6b35, #ff3366);
}

/* Empty/Loading state */
.trending-carousel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: min(100%, 620px);
    margin: 0 auto;
    color: var(--text-tertiary);
    text-align: center;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top, rgba(var(--accent-cyan-rgb), 0.1), transparent 40%),
        linear-gradient(180deg, rgba(16, 28, 48, 0.72) 0%, rgba(10, 18, 34, 0.8) 100%);
}

.trending-carousel-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.trending-carousel-empty h4 {
    margin: 0 0 var(--spacing-sm);
    color: var(--text-secondary);
}

.trending-carousel-empty p {
    margin: 0;
    font-size: 13px;
}

.trending-carousel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Auto-slide animation indicator */
.trending-carousel.auto-sliding .trending-indicator.active {
    animation: slideProgress 8s linear !important;
}

@keyframes slideProgress {
    from {
        width: 8px;
    }
    to {
        width: 24px;
    }
}

/* Hide carousel if not configured */
.trending-carousel.hidden {
    display: none;
}

/* Simpler carousel (performance profile) */
.trending-carousel {
    height: 200px;
}

.trending-item {
    width: 100px;
}

.trending-carousel-slide {
    padding: var(--spacing-md);
}

/* ==================== Last-Watched Badge ==================== */
.channel-item.last-watched {
    border-left: 3px solid var(--accent-primary, #0078d4);
}
.last-watched-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--accent-primary, #0078d4);
    opacity: 0.8;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

.last-watched-label {
    display: none;
}

.channel-item:not(.last-watched) .last-watched-badge {
    display: none;
}

/* ============================================
   Visibility Edit Mode
   ============================================ */

/* Floating banner at top of channel list */
.visibility-edit-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.92), rgba(0, 90, 180, 0.92));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.visibility-edit-banner .veb-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.visibility-edit-banner .veb-hint {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.9em;
}

/* Eye icon inside channel rows during edit mode */
.visibility-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    font-size: 16px;
    flex-shrink: 0;
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.visibility-icon.vis-visible {
    opacity: 1;
    color: #fff;
}

.visibility-icon.vis-hidden {
    opacity: 0.35;
    color: #999;
}

/* Dim the entire row for hidden channels in edit mode */
.visibility-edit-mode .channel-item.channel-hidden-row {
    opacity: 0.45;
}

.visibility-edit-mode .channel-item.channel-hidden-row:focus,
.visibility-edit-mode .channel-item.channel-hidden-row.focused {
    opacity: 0.7;
}

/* Override: ensure focused row in edit mode has clear selection ring */
.visibility-edit-mode .channel-item:focus,
.visibility-edit-mode .channel-item.focused {
    outline: var(--focus-width) solid var(--accent-cyan);
    outline-offset: -1px;
    box-shadow: var(--focus-glow);
}

/* Toggle animation on the eye icon */
.visibility-icon.vis-toggle-flash {
    transform: scale(1.3);
}