/* ===== CINESCOPE SIGNATURE UI - Complete Design System ===== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');



:root {

    /* Core Palette - Pure Obsidian Cinema & Titanium Accents */

    --bg-base: #08090C;

    --bg-dark: #0D0E12;

    --bg-surface: #13151B;

    --bg-elevated: #181A22;

    --bg-card: #151720;

    --bg-glass: rgba(12, 13, 18, 0.94);

    --bg-glass-light: rgba(22, 24, 32, 0.82);



    /* Borders - Subtle hairline glass edges */

    --border: rgba(255, 255, 255, 0.08);

    --border-accent: rgba(229, 9, 20, 0.35);

    --border-hover: rgba(255, 255, 255, 0.22);



    /* Text */

    --text-primary: #FFFFFF;

    --text-secondary: #CBD5E1;

    --text-muted: #8E95A5;

    --text-dim: #555A68;



    /* Accent Colors - Cinema Crimson & Platinum (Apple TV+ / Netflix Benchmark) */

    --brand: #E50914;

    --brand-glow: #F4222D;

    --brand-dark: #B80710;

    --violet: #CBD5E1;

    --violet-glow: #FFFFFF;

    --violet-dim: rgba(255, 255, 255, 0.08);

    --blue: #38BDF8;

    --cyan: #06B6D4;

    --indigo: #6366F1;

    --emerald: #10B981;

    --gold: #F59E0B;

    --rose: #E50914;

    --orange: #F97316;



    /* Gradients - Deep, rich cinematic finishes (No cheap generic AI purple/pink) */

    --gradient-brand: linear-gradient(180deg, #E50914 0%, #B80710 100%);

    --gradient-violet: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);

    --gradient-gold: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);

    --gradient-emerald: linear-gradient(180deg, #10B981 0%, #059669 100%);

    --gradient-rose: linear-gradient(180deg, #E50914 0%, #DC2626 100%);

    --gradient-subtle: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);



    /* Shadows */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);

    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);

    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.85);

    --shadow-violet: 0 0 35px rgba(229, 9, 20, 0.25);

    --shadow-glow: 0 0 40px rgba(229, 9, 20, 0.35);



    /* Typography */

    --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-mono: 'JetBrains Mono', Consolas, monospace;



    /* Radius */

    --r-sm: 8px;

    --r-md: 12px;

    --r-lg: 18px;

    --r-xl: 24px;

    --r-full: 9999px;



    /* Transitions */

    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    --t-fast: 0.15s var(--ease);

    --t-med: 0.25s var(--ease);

    --t-slow: 0.4s var(--ease);

}



/* ===== RESET & BASE ===== */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}



html {
    scroll-behavior: smooth;
}



body {

    background: var(--bg-base);

    color: var(--text-primary);

    font-family: var(--font);

    line-height: 1.6;

    min-height: 100vh;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* ===== AMBIENT BACKGROUND ===== */

.ambient-glow {

    position: fixed;

    top: 0;

    left: 0;
    right: 0;

    height: 420px;

    /* Extremely subtle warm cinematic glow — not the garish purple/crimson AI look */

    background: radial-gradient(ellipse 60% 35% at 50% 0%, rgba(200, 60, 60, 0.045) 0%, transparent 75%);

    pointer-events: none;

    z-index: 0;

}



/* ===== SCROLLBAR ===== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: #2A2D3A;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand);
}



/* ===== NAVBAR ===== */

.navbar {

    position: sticky;

    top: 0;

    z-index: 500;

    background: var(--bg-glass);

    backdrop-filter: blur(24px) saturate(180%);

    -webkit-backdrop-filter: blur(24px) saturate(180%);

    border-bottom: 1px solid var(--border);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

}



.nav-container {

    max-width: 1440px;

    width: 100%;

    margin: 0 auto;

    padding: 0 20px;

    height: 64px;

    display: flex;

    align-items: center;

    gap: 16px;

    box-sizing: border-box;

}



.nav-left {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-shrink: 0;

}



.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: var(--text-primary);

    transition: opacity var(--t-fast);

}

.brand:hover {
    opacity: 0.85;
}



.brand-icon {

    width: 36px;
    height: 36px;

    border-radius: var(--r-sm);

    background: var(--gradient-brand);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 12px rgba(255, 45, 65, 0.4);

    flex-shrink: 0;

}



.brand-title {

    font-size: 20px;

    font-weight: 800;

    letter-spacing: -0.5px;

    color: var(--text-primary);

}



.brand-title {

    font-size: 20px;

    font-weight: 800;

    letter-spacing: -0.4px;

    color: #ffffff;

}

.brand-title .gradient-text {

    color: #E50914;

    -webkit-text-fill-color: #E50914;

    background: none;

    font-weight: 800;

}



.badge {

    display: inline-flex;

    align-items: center;

    padding: 2px 10px;

    border-radius: var(--r-full);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.3px;

    white-space: nowrap;

}



.badge-glow {

    background: rgba(229, 9, 20, 0.15);

    border: 1px solid rgba(229, 9, 20, 0.4);

    color: #ffffff;

    animation: badgePulse 3s ease-in-out infinite;

}



@keyframes badgePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0);
    }

    50% {
        box-shadow: 0 0 12px rgba(229, 9, 20, 0.4);
    }

}



.badge-primary {

    background: rgba(229, 9, 20, 0.15);

    border: 1px solid rgba(229, 9, 20, 0.3);

    color: #ffffff;

}



.badge-gold {

    background: rgba(245, 158, 11, 0.12);

    border: 1px solid rgba(245, 158, 11, 0.3);

    color: #fcd34d;

}



.badge-outline {

    background: transparent;

    border: 1px solid var(--border);

    color: var(--text-secondary);

}



.badge-emerald {

    background: rgba(16, 185, 129, 0.12);

    border: 1px solid rgba(16, 185, 129, 0.3);

    color: #6ee7b7;

}



/* ===== NAV LINKS ===== */

.nav-links {

    display: flex;

    align-items: center;

    gap: 4px;

    flex: 1;

}



.nav-btn {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 14px;

    border-radius: var(--r-md);

    border: 1px solid transparent;

    background: transparent;

    color: var(--text-secondary);

    font-family: var(--font);

    font-size: 13.5px;

    font-weight: 500;

    cursor: pointer;

    transition: all var(--t-fast);

    white-space: nowrap;

}



.nav-btn:hover {

    color: var(--text-primary);

    background: rgba(255, 255, 255, 0.05);

    border-color: var(--border);

}



.nav-btn.active {

    color: #ffffff;

    background: rgba(229, 9, 20, 0.08);

    border-color: rgba(229, 9, 20, 0.25);

}



.nav-right {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    margin-left: auto;

}

.nav-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.2), rgba(255, 46, 85, 0.3));
    border: 1px solid rgba(255, 46, 85, 0.45);
    border-radius: var(--r-full);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--t-fast);
    white-space: nowrap;
}

.nav-app-btn:hover {
    background: linear-gradient(135deg, #E50914, #ff2e55);
    border-color: #ff2e55;
    box-shadow: 0 4px 14px rgba(255, 46, 85, 0.45);
    transform: translateY(-1px);
}

/* ===== SEARCH ===== */

.search-container {

    position: relative;

    display: flex;

    align-items: center;

    z-index: 105;

}



.search-icon {

    position: absolute;

    left: 12px;

    color: var(--text-muted);

    pointer-events: none;

    z-index: 107;

}



.global-search-input {

    position: relative;

    z-index: 106;

    pointer-events: auto !important;

    cursor: text !important;

    width: 210px;

    padding: 8px 36px 8px 36px;

    border-radius: var(--r-full);

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--border);

    color: var(--text-primary);

    font-family: var(--font);

    font-size: 13px;

    transition: all var(--t-fast);

    outline: none;

}



.global-search-input:focus {

    width: 250px;

    background: rgba(255, 255, 255, 0.07);

    border-color: var(--border-accent);

    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.08);

}



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



.search-shortcut {

    position: absolute;

    right: 10px;

    font-size: 11px;

    color: var(--text-dim);

    background: var(--bg-elevated);

    border: 1px solid var(--border);

    border-radius: 4px;

    padding: 1px 5px;

    font-family: var(--font-mono);

}



.autocomplete-dropdown {

    position: absolute;

    top: calc(100% + 8px);

    right: 0;

    left: auto;

    width: 380px;

    max-width: calc(100vw - 32px);

    background: var(--bg-card);

    border: 1px solid var(--border-accent);

    border-radius: var(--r-md);

    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(99, 102, 241, 0.25);

    display: none;

    z-index: 500;

    max-height: 440px;

    overflow-y: auto;

    backdrop-filter: blur(16px);

    animation: dropDown 0.15s var(--ease);

}



@keyframes dropDown {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}



.autocomplete-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 16px;

    cursor: pointer;

    border-bottom: 1px solid var(--border);

    transition: background var(--t-fast);

}

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

.autocomplete-item:hover {
    background: var(--violet-dim);
}



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

.ac-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 1px;
}



.icon-btn {

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--r-md);

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--border);

    color: var(--text-secondary);

    text-decoration: none;

    transition: all var(--t-fast);

}

.icon-btn:hover {

    background: rgba(255, 255, 255, 0.08);

    color: var(--text-primary);

    border-color: var(--border-accent);

}



/* ===== MOBILE NAV ===== */

.mobile-menu-btn {

    display: none;

    align-items: center;

    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: var(--r-md);

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--border);

    color: var(--text-secondary);

    cursor: pointer;

    margin-left: auto;

}



/* ===== MAIN CONTENT ===== */

.main-content {

    max-width: 1440px;

    margin: 0 auto;

    padding: 0 28px 60px;

    position: relative;

    z-index: 1;

}



/* ===== TAB PANES ===== */

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: tabFadeIn 0.3s var(--ease);
}



@keyframes tabFadeIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}



/* ===== HERO BANNER ===== */

.hero-banner {

    position: relative;

    height: 520px;

    border-radius: var(--r-xl);

    overflow: hidden;

    margin: 28px 0 40px;

    box-shadow: var(--shadow-lg);

    border: 1px solid var(--border);

}



.hero-backdrop {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transition: background-image 0.8s ease;

    filter: brightness(0.5) saturate(1.3);

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        /* Left-side cinematic vignette — natural, organic feel (no flat purple/blue) */

        linear-gradient(105deg, rgba(4, 5, 9, 0.92) 0%, rgba(4, 5, 9, 0.62) 40%, rgba(4, 5, 9, 0.05) 75%),

        /* Bottom fade to page — seamless blend */

        linear-gradient(to top, rgba(8, 9, 12, 0.96) 0%, rgba(8, 9, 12, 0.3) 38%, transparent 65%);

}



.hero-content {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 48px 48px 48px 84px;

    max-width: 640px;

}



.hero-badges {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-bottom: 16px;

}



.hero-title {

    font-size: 48px;

    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -1px;

    color: #fff;

    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);

    margin-bottom: 14px;

    animation: heroTitleIn 0.5s var(--ease);

}



@keyframes heroTitleIn {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}



.hero-desc {

    font-size: 14.5px;

    color: rgba(255, 255, 255, 0.75);

    line-height: 1.7;

    margin-bottom: 28px;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

}



.hero-actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}



.hero-carousel-dots {

    position: absolute;

    bottom: 24px;

    right: 32px;

    display: flex;

    gap: 7px;

}



.dot {

    width: 8px;
    height: 8px;

    border-radius: var(--r-full);

    background: rgba(255, 255, 255, 0.3);

    cursor: pointer;

    transition: all var(--t-med);

    border: 1px solid transparent;

}

.dot.active {

    width: 28px;

    background: var(--violet);

    border-color: rgba(255, 45, 65, 0.5);

}



/* ===== BUTTONS ===== */

.btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 9px 20px;

    border-radius: var(--r-md);

    font-family: var(--font);

    font-size: 13.5px;

    font-weight: 600;

    cursor: pointer;

    transition: all var(--t-fast);

    border: 1px solid transparent;

    text-decoration: none;

    white-space: nowrap;

}



.btn-primary {

    background: #E50914;

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);

}

.btn-primary:hover {

    background: #f40612;

    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.35);

    transform: translateY(-1px);

}

.btn-primary:active {
    transform: scale(0.97);
}



.btn-secondary {

    background: rgba(255, 255, 255, 0.06);

    color: var(--text-primary);

    border-color: var(--border);

}

.btn-secondary:hover {

    background: rgba(255, 255, 255, 0.1);

    border-color: var(--border-accent);

}



.btn-ghost {

    background: transparent;

    color: var(--text-secondary);

    border-color: var(--border);

}

.btn-ghost:hover {

    background: rgba(255, 255, 255, 0.05);

    color: var(--text-primary);

    border-color: var(--border-accent);

}



.btn-outline {

    background: rgba(229, 9, 20, 0.08);

    color: #ff5252;

    border-color: rgba(229, 9, 20, 0.35);

}

.btn-outline:hover {

    background: rgba(229, 9, 20, 0.2);

    border-color: var(--accent);

    color: #fff;

    transform: translateY(-1px);

}



.btn-sm {

    padding: 5px 12px;

    font-size: 12px;

}



.btn-block {

    width: 100%;

    justify-content: center;

    margin-bottom: 10px;

}



.btn-link {

    background: none;

    border: none;

    color: var(--violet);

    font-family: var(--font);

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    padding: 4px 8px;

    border-radius: var(--r-sm);

    transition: all var(--t-fast);

    text-decoration: none;

}

.btn-link:hover {

    background: var(--violet-dim);

    color: #ff808e;

}



/* ===== SECTION HEADERS ===== */

.section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

    gap: 12px;

}



.section-title-wrap {

    display: flex;

    align-items: center;

    gap: 12px;

}



.section-dot {

    width: 8px;
    height: 8px;

    border-radius: var(--r-full);

    background: #E50914;

    flex-shrink: 0;

    /* Crisp, editorial dot — not a gradient blob */

    box-shadow: 0 0 7px rgba(229, 9, 20, 0.45);

}

.section-dot.dot-cyan {
    background: #10B981;
    box-shadow: 0 0 7px rgba(16, 185, 129, 0.45);
}

.section-dot.dot-rose {
    background: #E50914;
    box-shadow: 0 0 7px rgba(229, 9, 20, 0.45);
}

.section-dot.dot-gold {
    background: #F59E0B;
    box-shadow: 0 0 7px rgba(245, 158, 11, 0.45);
}

.section-dot.dot-emerald {
    background: #10B981;
}

.section-dot.dot-violet {
    background: #E50914;
}

.section-dot.dot-sky {
    background: #38BDF8;
    box-shadow: 0 0 7px rgba(56, 189, 248, 0.45);
}

.section-dot.dot-amber {
    background: #FBBF24;
    box-shadow: 0 0 7px rgba(251, 191, 36, 0.45);
}



.section-header h2 {

    font-size: 20px;

    font-weight: 700;

    color: var(--text-primary);

    letter-spacing: -0.3px;

}



.section-subtitle {

    font-size: 12px;

    color: var(--text-muted);

}



.section-divider {

    height: 1px;

    background: linear-gradient(to right, transparent, var(--border), transparent);

    margin: 36px 0;

}



/* ===== SHELF HEADER ===== */

.shelf-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding: 32px 0 24px;

    border-bottom: 1px solid var(--border);

    margin-bottom: 24px;

    flex-wrap: wrap;

}



.page-title {

    font-size: 28px;

    font-weight: 800;

    letter-spacing: -0.5px;

    color: var(--text-primary);

    margin-bottom: 6px;

}



.page-subtitle {

    font-size: 13.5px;

    color: var(--text-muted);

}



/* ===== FILTER BAR ===== */

.filter-bar {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    align-items: flex-start;

}



.filter-pill {

    padding: 7px 16px;

    border-radius: var(--r-full);

    border: 1px solid var(--border);

    background: var(--bg-elevated);

    color: var(--text-secondary);

    font-family: var(--font);

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    transition: all var(--t-fast);

}

.filter-pill:hover {

    border-color: var(--border-accent);

    color: var(--text-primary);

    background: rgba(229, 9, 20, 0.1);

}

.filter-pill.active {

    background: rgba(229, 9, 20, 0.18);

    border-color: var(--indigo);

    color: #ffffff;

}



/* ===== GENRE SCROLL BAR ===== */

.genre-scroll-bar {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding: 0 0 14px;

    margin-bottom: 16px;

    scrollbar-width: none;

}

.genre-scroll-bar::-webkit-scrollbar {
    display: none;
}



.genre-chip {

    padding: 6px 14px;

    border-radius: var(--r-full);

    border: 1px solid var(--border);

    background: var(--bg-elevated);

    color: var(--text-muted);

    font-family: var(--font);

    font-size: 12.5px;

    font-weight: 500;

    cursor: pointer;

    white-space: nowrap;

    transition: all var(--t-fast);

    flex-shrink: 0;

}

.genre-chip:hover {

    border-color: var(--border-accent);

    color: var(--text-primary);

}

.genre-chip.active {

    background: rgba(255, 45, 65, 0.2);

    border-color: var(--violet);

    color: #ff808e;

}



/* ===== MEDIA CARDS GRID ===== */

.cards-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));

    gap: 18px;

}



.media-card {

    background: var(--bg-card);

    border-radius: var(--r-lg);

    border: 1px solid var(--border);

    overflow: hidden;

    cursor: pointer;

    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;

    position: relative;

    content-visibility: auto;

    contain-intrinsic-size: 172px 258px;

}



.media-card:hover {

    transform: translateY(-5px) scale(1.015);

    border-color: rgba(255, 255, 255, 0.16);

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 4px 18px rgba(0, 0, 0, 0.45);

}



.poster-wrap {

    position: relative;

    aspect-ratio: 2/3;

    overflow: hidden;

    background: var(--bg-elevated);

}



.card-poster {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s var(--ease), filter 0.3s ease;

}



.media-card:hover .card-poster {

    transform: scale(1.08);

    filter: brightness(0.7);

}



.card-badge-rating {

    position: absolute;

    top: 8px;
    left: 8px;

    background: rgba(10, 15, 29, 0.9);

    border: 1px solid rgba(245, 158, 11, 0.3);

    color: #fcd34d;

    font-size: 11px;

    font-weight: 600;

    padding: 2px 8px;

    border-radius: var(--r-full);

}



.card-badge-type {

    position: absolute;

    top: 8px;
    right: 8px;

    background: rgba(10, 15, 29, 0.9);

    border: 1px solid rgba(229, 9, 20, 0.3);

    color: #ffffff;

    font-size: 10px;

    font-weight: 600;

    padding: 2px 7px;

    border-radius: var(--r-full);

    text-transform: uppercase;

    letter-spacing: 0.3px;

}



.card-badge-coming-soon {

    position: absolute;

    bottom: 8px;
    left: 8px;

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95));

    border: 1px solid rgba(251, 191, 36, 0.6);

    color: #ffffff;

    font-size: 9.5px;

    font-weight: 700;

    padding: 2.5px 8px;

    border-radius: var(--r-full);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);

    z-index: 2;

}



.badge-text-coming-soon {

    display: inline-block;

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));

    border: 1px solid rgba(245, 158, 11, 0.5);

    color: #fbbf24;

    font-size: 10.5px;

    font-weight: 700;

    padding: 1px 7px;

    border-radius: var(--r-full);

    text-transform: uppercase;

    letter-spacing: 0.4px;

    margin-left: 6px;

    vertical-align: middle;

}



.title-coming-soon-badge {

    display: inline-block;

    vertical-align: middle;

    background: linear-gradient(135deg, #d97706, #b45309);

    border: 1px solid rgba(251, 191, 36, 0.6);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    padding: 3px 10px;

    border-radius: var(--r-full);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-left: 10px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

}



.btn-coming-soon {

    background: rgba(245, 158, 11, 0.15) !important;

    border: 1px solid rgba(245, 158, 11, 0.4) !important;

    color: #fcd34d !important;

    cursor: default;

}

.btn-coming-soon:hover {

    background: rgba(245, 158, 11, 0.22) !important;

}



.custom-select-server {

    background: rgba(255, 45, 65, 0.12) !important;

    border: 1px solid rgba(255, 45, 65, 0.45) !important;

    color: #ff808e !important;

    font-weight: 600;

}

.custom-select-server option {

    background: #181824;

    color: #f3f4f6;

}



.cinema-iframe {

    width: 100%;

    height: 100%;

    border: none;

    background: #000;

}



.card-overlay-btn {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: all var(--t-med);

    background: rgba(0, 0, 0, 0.3);

}



.media-card:hover .card-overlay-btn {

    opacity: 1;

}



.play-circle {

    width: 52px;
    height: 52px;

    border-radius: var(--r-full);

    background: var(--gradient-brand);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 0 24px rgba(229, 9, 20, 0.7);

    transform: scale(0.8);

    transition: transform var(--t-med);

}



.media-card:hover .play-circle {

    transform: scale(1);

}



.card-body {

    padding: 10px 12px 12px;

}



.card-title {

    font-size: 13px;

    font-weight: 600;

    color: var(--text-primary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    margin-bottom: 5px;

}



.card-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 11.5px;

    color: var(--text-muted);

}



/* ===== SKELETON LOADING ===== */

.skeleton-card {

    background: var(--bg-card);

    border-radius: var(--r-lg);

    border: 1px solid var(--border);

    overflow: hidden;

}



.skeleton-poster {

    aspect-ratio: 2/3;

    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-glass-light) 50%, var(--bg-elevated) 75%);

    background-size: 400% 100%;

    animation: shimmer 1.5s infinite;

}



.skeleton-body {
    padding: 10px 12px 12px;
}



.skeleton-line {

    height: 12px;

    border-radius: 4px;

    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-glass-light) 50%, var(--bg-elevated) 75%);

    background-size: 400% 100%;

    animation: shimmer 1.5s infinite;

    margin-bottom: 6px;

}

.skeleton-line.short {
    width: 60%;
}



@keyframes shimmer {

    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }

}



/* ===== PAGINATION ===== */

.pagination-bar {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    padding: 32px 0 8px;

}



.page-indicator {

    font-size: 14px;

    color: var(--text-muted);

    min-width: 80px;

    text-align: center;

}



/* ===== CONTINUE WATCHING SHELF ===== */

.continue-shelf {
    margin-bottom: 32px;
}



.continue-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 14px;

    margin-top: 16px;

}



.continue-card {

    background: var(--bg-card);

    border-radius: var(--r-md);

    border: 1px solid var(--border);

    overflow: hidden;

    cursor: pointer;

    transition: all var(--t-fast);

}

.continue-card:hover {

    border-color: rgba(229, 9, 20, 0.3);

    transform: translateY(-3px);

    box-shadow: var(--shadow-md);

}



.continue-thumb-wrap {
    position: relative;
}

.continue-thumb {

    width: 100%;

    aspect-ratio: 16/9;

    object-fit: cover;

    display: block;

}



.continue-bar-bg {

    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: rgba(255, 255, 255, 0.15);

}

.continue-bar-fill {

    height: 100%;

    background: var(--gradient-brand);

    transition: width 0.3s ease;

}



.continue-body {
    padding: 10px 12px;
}

.continue-title {

    font-size: 13px;

    font-weight: 600;

    color: var(--text-primary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    margin-bottom: 3px;

}

.continue-time {
    font-size: 11px;
    color: var(--text-muted);
}



/* ===== RESOLVER CARD ===== */

.resolver-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: var(--r-xl);

    padding: 28px;

    margin-bottom: 24px;

}



.resolver-inputs {

    display: flex;

    gap: 14px;

    align-items: flex-end;

    flex-wrap: wrap;

}



.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-group.flex-3 {
    flex: 3;
    min-width: 200px;
}

.input-group.flex-1 {
    flex: 1;
    min-width: 80px;
}

.input-group.btn-col {
    flex-shrink: 0;
}



.input-group label {

    font-size: 12px;

    font-weight: 500;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.custom-input {

    width: 100%;

    padding: 10px 14px;

    border-radius: var(--r-md);

    background: var(--bg-elevated);

    border: 1px solid var(--border);

    color: var(--text-primary);

    font-family: var(--font);

    font-size: 14px;

    outline: none;

    transition: all var(--t-fast);

}

.custom-input:focus {

    border-color: var(--border-accent);

    background: rgba(255, 255, 255, 0.04);

    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.08);

}



.presets-row {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid var(--border);

}



.presets-label {

    font-size: 12px;

    color: var(--text-muted);

    font-weight: 500;

    flex-shrink: 0;

}



.preset-pill {

    padding: 5px 12px;

    border-radius: var(--r-full);

    border: 1px solid var(--border);

    background: var(--bg-elevated);

    color: var(--text-secondary);

    font-family: var(--font);

    font-size: 12px;

    cursor: pointer;

    transition: all var(--t-fast);

}

.preset-pill:hover {

    border-color: var(--border-accent);

    color: var(--text-primary);

    background: var(--violet-dim);

}



/* ===== RESOLVER RESULTS ===== */

.resolver-results-container {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.media-overview-card {

    display: flex;

    gap: 24px;

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: var(--r-xl);

    padding: 24px;

    align-items: flex-start;

    flex-wrap: wrap;

}



.overview-poster {

    width: 90px;

    border-radius: var(--r-md);

    box-shadow: var(--shadow-md);

    object-fit: cover;

    aspect-ratio: 2/3;

    flex-shrink: 0;

}



.overview-info {
    flex: 1;
    min-width: 200px;
}



.overview-tags {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-bottom: 12px;

}



.overview-title {

    font-size: 22px;

    font-weight: 700;

    letter-spacing: -0.3px;

    margin-bottom: 10px;

}



.overview-desc {

    font-size: 13.5px;

    color: var(--text-secondary);

    line-height: 1.7;

    margin-bottom: 12px;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.overview-meta {

    font-size: 12.5px;

    color: var(--text-muted);

}



/* ===== DUBS ===== */

.resolver-dubs-row,
.dubs-row {

    margin-top: 14px;

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}



.dubs-label {

    font-size: 12px;

    color: var(--text-muted);

    font-weight: 500;

}



.dubs-pills {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.dub-pill {

    padding: 5px 14px;

    border-radius: var(--r-full);

    border: 1px solid var(--border);

    background: var(--bg-elevated);

    color: var(--text-secondary);

    font-family: var(--font);

    font-size: 12px;

    font-weight: 500;

    cursor: pointer;

    transition: all var(--t-fast);

}

.dub-pill:hover {

    border-color: rgba(255, 45, 65, 0.4);

    color: var(--text-primary);

}

.dub-pill.active {

    background: rgba(255, 45, 65, 0.2);

    border-color: var(--violet);

    color: #ff808e;

}



/* ===== SERIES NAVIGATOR ===== */

.series-navigator-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: var(--r-xl);

    padding: 24px;

}



.navigator-header {

    display: flex;

    align-items: baseline;

    gap: 12px;

    margin-bottom: 18px;

}

.navigator-header h3 {

    font-size: 16px;

    font-weight: 700;

}

.navigator-subtitle {

    font-size: 12px;

    color: var(--text-muted);

}



.season-tabs {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-bottom: 18px;

}



.season-tab-btn {

    padding: 7px 16px;

    border-radius: var(--r-full);

    border: 1px solid var(--border);

    background: var(--bg-elevated);

    color: var(--text-secondary);

    font-family: var(--font);

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    transition: all var(--t-fast);

}

.season-tab-btn:hover {

    border-color: var(--border-accent);

    color: var(--text-primary);

}

.season-tab-btn.active {

    background: rgba(229, 9, 20, 0.2);

    border-color: var(--indigo);

    color: #ffffff;

}



.episodes-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));

    gap: 8px;

    max-height: 220px;

    overflow-y: auto;

}



.episode-btn {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    padding: 10px 6px;

    border-radius: var(--r-md);

    border: 1px solid var(--border);

    background: var(--bg-elevated);

    cursor: pointer;

    transition: all var(--t-fast);

}

.episode-btn:hover {

    border-color: rgba(255, 45, 65, 0.4);

    background: var(--violet-dim);

}

.episode-btn.active {

    background: rgba(255, 45, 65, 0.2);

    border-color: var(--violet);

}



.ep-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.ep-res-badge {
    font-size: 10px;
    color: var(--text-muted);
}



/* ===== STREAMS & CAPTIONS ===== */

.streams-section,
.captions-section {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: var(--r-xl);

    padding: 24px;

}



.streams-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}



.stream-row-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 14px 18px;

    background: var(--bg-elevated);

    border-radius: var(--r-md);

    border: 1px solid var(--border);

    flex-wrap: wrap;

    transition: border-color var(--t-fast);

}

.stream-row-item:hover {
    border-color: rgba(255, 45, 65, 0.25);
}



.stream-meta-left {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}



.badge-res {

    padding: 3px 10px;

    border-radius: var(--r-full);

    font-size: 12px;

    font-weight: 700;

    background: rgba(229, 9, 20, 0.15);

    border: 1px solid rgba(229, 9, 20, 0.3);

    color: #ffffff;

    font-family: var(--font-mono);

    letter-spacing: 0.5px;

}

.badge-res.hd-1080 {

    background: rgba(16, 185, 129, 0.12);

    border-color: rgba(16, 185, 129, 0.3);

    color: #6ee7b7;

}



.stream-format-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.stream-info-tag {
    font-size: 12px;
    color: var(--text-muted);
}

.stream-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}



.captions-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

    gap: 10px;

    margin-top: 16px;

}



.caption-chip {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 10px 14px;

    background: var(--bg-elevated);

    border-radius: var(--r-md);

    border: 1px solid var(--border);

    font-size: 12.5px;

    transition: border-color var(--t-fast);

}

.caption-chip:hover {
    border-color: rgba(255, 45, 65, 0.3);
}

.caption-chip a {

    font-size: 11px;

    color: var(--violet);

    text-decoration: none;

}

.caption-chip a:hover {
    text-decoration: underline;
}



/* ===== CINEMA PLAYER MODAL ===== */

.player-modal {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 16px;

    opacity: 0;

    pointer-events: none;

    overflow-y: auto;

    overflow-x: hidden;

    transition: opacity var(--t-med);

}

.player-modal.active {

    opacity: 1;

    pointer-events: all;

}



.player-modal-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.85);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}



.player-modal-content {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: min(95vw, 1340px);

    max-height: calc(100vh - 24px);

    display: flex;

    flex-direction: column;

    background: rgba(8, 10, 16, 0.98);

    border-radius: 20px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    overflow-y: auto;

    overflow-x: hidden;

    box-shadow: 0 40px 140px rgba(0, 0, 0, 0.95), 0 0 80px rgba(229, 9, 20, 0.22);

    margin: auto;

    transform: scale(0.96);

    transition: transform var(--t-med);

}



.player-modal-content::-webkit-scrollbar,

.player-modal::-webkit-scrollbar {

    width: 6px;

}

.player-modal-content::-webkit-scrollbar-track,

.player-modal::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, 0.5);

}

.player-modal-content::-webkit-scrollbar-thumb,

.player-modal::-webkit-scrollbar-thumb {

    background: #e50914;

    border-radius: 3px;

}



.player-modal.active .player-modal-content {

    transform: scale(1);

}



.video-stage {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    max-height: 74vh;

    min-height: 380px;

    background: #000;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 20px 20px 0 0;

}



.video-stage video,

.video-stage iframe,

.video-stage .plyr {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



/* TRUE CINEMA FULLSCREEN OVERRIDES (Resolves stretching & black voids completely) */

.video-stage:fullscreen,

.video-stage:-webkit-full-screen,

.video-stage.is-fullscreen {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    max-width: 100vw !important;

    max-height: 100vh !important;

    aspect-ratio: auto !important;

    background: #000 !important;

    z-index: 9999999 !important;

    border-radius: 0 !important;

}



.video-stage:fullscreen video,

.video-stage:-webkit-full-screen video,

.video-stage.is-fullscreen video,

.video-stage:fullscreen .plyr,

.video-stage:-webkit-full-screen .plyr,

.video-stage.is-fullscreen .plyr,

.video-stage:fullscreen .plyr__video-wrapper,

.video-stage:-webkit-full-screen .plyr__video-wrapper,

.video-stage.is-fullscreen .plyr__video-wrapper,

.video-stage:fullscreen iframe,

.video-stage:-webkit-full-screen iframe,

.video-stage.is-fullscreen iframe,

.plyr--fullscreen-active,

.plyr--fullscreen-active video,

.plyr--fullscreen-active .plyr__video-wrapper {

    width: 100% !important;

    height: 100% !important;

    max-width: 100vw !important;

    max-height: 100vh !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    background: #000 !important;

    border-radius: 0 !important;

}



.video-stage:fullscreen .plyr__controls,

.video-stage:-webkit-full-screen .plyr__controls,

.video-stage.is-fullscreen .plyr__controls,

.plyr--fullscreen-active .plyr__controls {

    position: absolute !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    z-index: 40 !important;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.45) 65%, transparent 100%) !important;

    padding: 16px 24px 18px !important;

}



.video-stage.hide-cursor,

.video-stage.hide-cursor * {

    cursor: none !important;

}



/* ===== IN-PLAYER HUD OVERLAY (NETFLIX / APPLE TV+ BENCHMARK) ===== */

.in-player-top-bar {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 60;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 20px;

    background: linear-gradient(180deg, rgba(6, 8, 14, 0.94) 0%, rgba(6, 8, 14, 0.55) 65%, transparent 100%);

    border-bottom: none;

    opacity: 1;

    transition: opacity 0.28s ease, transform 0.28s ease;

    pointer-events: auto;

}



.video-stage.is-iframe-mode .in-player-top-bar {

    background: linear-gradient(180deg, rgba(6, 8, 14, 0.96) 0%, rgba(6, 8, 14, 0.6) 70%, transparent 100%) !important;

    box-shadow: none !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    transform: none !important;

    z-index: 90 !important;

}



.video-stage:not(.is-iframe-mode).hud-hidden .in-player-top-bar,

.video-stage.hud-hidden .in-player-quick-bar {

    opacity: 0 !important;

    pointer-events: none !important;

    transform: translateY(-8px);

}

.video-stage.hud-hidden .in-player-quick-bar {

    transform: translateY(8px);

}



.in-player-title-row {

    display: flex;

    align-items: center;

    gap: 10px;

    flex: 1;

    min-width: 0;

}



.in-player-title-row .in-player-hud-btn {

    flex-shrink: 0;

}



.in-player-title {

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: -0.2px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    min-width: 0;

    max-width: min(340px, 40vw);

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);

}



.in-player-badge {

    background: rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 6px;

    padding: 3px 8px;

    font-size: 10px;

    font-weight: 800;

    color: #cbd5e1;

}



.in-player-badge.badge-quality {

    background: rgba(229, 9, 20, 0.22);

    border-color: rgba(229, 9, 20, 0.5);

    color: #ff4d4f;

}



.in-player-top-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}



.in-player-hud-btn {

    background: rgba(16, 20, 30, 0.82);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 8px;

    color: #fff;

    padding: 6px 12px;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: all 0.2s ease;

}

.in-player-hud-btn:hover {

    background: rgba(229, 9, 20, 0.85);

    border-color: #e50914;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.4);

}

.in-player-hud-btn.btn-close-inplayer {

    font-size: 14px;

    padding: 6px 10px;

}



/* ==========================================================================

   UNIFIED CINEMA PLAYER: PARALLEL LOADING, ERROR STATE & CONTROLS

   ========================================================================== */



/* 1. PARALLEL SERVER DETECTION LOADING OVERLAY */

.player-loading-overlay {

    position: absolute;

    inset: 0;

    z-index: 70;

    background: radial-gradient(circle at center, rgba(10, 14, 24, 0.94) 0%, rgba(4, 6, 12, 0.98) 100%);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 24px;

    text-align: center;

    animation: fadeIn 0.25s ease forwards;

}



.loading-ring-spinner {

    width: 46px;

    height: 46px;

    border: 3.5px solid rgba(229, 9, 20, 0.18);

    border-top-color: #e50914;

    border-right-color: #ff3366;

    border-radius: 50%;

    animation: spin 0.8s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;

    margin-bottom: 18px;

    box-shadow: 0 0 24px rgba(229, 9, 20, 0.45);

}



.loading-state-title {

    color: #fff;

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 6px;

    letter-spacing: -0.2px;

}



.loading-state-sub {

    color: #94a3b8;

    font-size: 13px;

    max-width: 420px;

    margin-bottom: 16px;

    line-height: 1.45;

}



.server-probe-chips {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 8px;

    max-width: 500px;

}



.probe-chip {

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 999px;

    padding: 4px 12px;

    font-size: 11px;

    font-weight: 700;

    color: #cbd5e1;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: all 0.2s ease;

}



.probe-chip .chip-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #f59e0b;

    box-shadow: 0 0 8px #f59e0b;

}



.probe-chip.healthy {

    border-color: rgba(16, 185, 129, 0.5);

    background: rgba(16, 185, 129, 0.12);

    color: #34d399;

}

.probe-chip.healthy .chip-dot {

    background: #10b981;

    box-shadow: 0 0 8px #10b981;

}



.probe-chip.failed {

    border-color: rgba(239, 68, 68, 0.35);

    background: rgba(239, 68, 68, 0.08);

    color: #f87171;

    opacity: 0.75;

}

.probe-chip.failed .chip-dot {

    background: #ef4444;

    box-shadow: none;

}



/* 2. ERROR OVERLAY (ALL SERVERS FAILED) */

.player-error-overlay {

    position: absolute;

    inset: 0;

    z-index: 75;

    background: radial-gradient(circle at center, rgba(18, 12, 16, 0.96) 0%, rgba(8, 6, 10, 0.99) 100%);

    backdrop-filter: blur(20px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 30px;

    text-align: center;

}



.error-badge-icon {

    font-size: 38px;

    margin-bottom: 14px;

    filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.6));

}



.error-state-title {

    color: #fff;

    font-size: 19px;

    font-weight: 800;

    margin-bottom: 8px;

}



.error-state-sub {

    color: #94a3b8;

    font-size: 13px;

    max-width: 440px;

    line-height: 1.5;

    margin-bottom: 20px;

}



.error-state-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    justify-content: center;

}



/* 3. UNIFIED BOTTOM PLAYER CONTROLS (Single Player Layout) */

.cinema-player-controls {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 50;

    background: linear-gradient(180deg, transparent 0%, rgba(4, 6, 12, 0.65) 30%, rgba(2, 4, 8, 0.96) 100%);

    padding: 24px 20px 14px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    opacity: 1;

    transform: translateY(0) translateZ(0);

    transition: opacity 0.28s ease, transform 0.28s ease;

    pointer-events: auto;

    will-change: opacity, transform;

}



.video-stage.hud-hidden .cinema-player-controls,

.video-stage.hud-hidden .in-player-top-bar {

    opacity: 0 !important;

    pointer-events: none !important;

    transform: translateY(12px);

}

.video-stage.hud-hidden .in-player-top-bar {

    transform: translateY(-12px);

}



/* Timeline Progress Track */

.player-timeline-wrap {

    position: relative;

    width: 100%;

    height: 16px;

    cursor: pointer;

    display: flex;

    align-items: center;

    contain: layout style;

}



.player-progress-bar {

    position: relative;

    width: 100%;

    height: 5px;

    background: rgba(255, 255, 255, 0.22);

    border-radius: 3px;

    transition: height 0.15s ease;

    overflow: visible;

}



.player-timeline-wrap:hover .player-progress-bar {

    height: 8px;

}



.player-progress-buffer {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 0%;

    background: rgba(255, 255, 255, 0.42);

    border-radius: 3px;

    transition: width 0.25s linear;

}



.player-progress-current {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 0%;

    background: linear-gradient(90deg, #e50914, #ff3366);

    border-radius: 3px;

    box-shadow: 0 0 10px rgba(229, 9, 20, 0.6);

}



.player-progress-thumb {

    position: absolute;

    right: -6px;

    top: 50%;

    transform: translateY(-50%) scale(0);

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 12px rgba(229, 9, 20, 0.8);

    transition: transform 0.15s ease;

}



.player-timeline-wrap:hover .player-progress-thumb {

    transform: translateY(-50%) scale(1);

}



.player-time-tooltip {

    position: absolute;

    bottom: 24px;

    transform: translateX(-50%);

    background: rgba(10, 14, 24, 0.94);

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 6px;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    font-family: 'JetBrains Mono', monospace;

    padding: 3px 8px;

    pointer-events: none;

    display: none;

    white-space: nowrap;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8);

}



/* Controls Bottom Row */

.player-controls-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

}



.controls-left,

.controls-right {

    display: flex;

    align-items: center;

    gap: 8px;

}



.player-ctrl-btn {

    background: transparent;

    border: none;

    color: #fff;

    width: 38px;

    height: 38px;

    border-radius: 8px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: all 0.15s ease;

    padding: 0;

}

.player-ctrl-btn:hover {

    background: rgba(255, 255, 255, 0.14);

    color: #fff;

    transform: scale(1.06);

}

.player-ctrl-btn:active {

    transform: scale(0.95);

}



.player-ctrl-btn .ctrl-label {

    font-size: 12px;

    font-weight: 700;

    margin-left: 6px;

}

#bottomEpisodesBtn {

    width: auto;

    padding: 0 12px;

    background: rgba(255, 255, 255, 0.08);

}

#bottomEpisodesBtn:hover {

    background: rgba(229, 9, 20, 0.85);

}



/* Volume Slider */

.player-volume-wrap {

    display: flex;

    align-items: center;

    gap: 2px;

}



.player-volume-slider-box {

    width: 0;

    overflow: hidden;

    transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;

    align-items: center;

}



.player-volume-wrap:hover .player-volume-slider-box,

.player-volume-wrap:focus-within .player-volume-slider-box {

    width: 78px;

    margin-right: 6px;

}



#playerVolumeSlider {

    width: 74px;

    height: 4px;

    -webkit-appearance: none;

    appearance: none;

    background: rgba(255, 255, 255, 0.25);

    border-radius: 2px;

    outline: none;

    cursor: pointer;

}

#playerVolumeSlider::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #fff;

    cursor: pointer;

    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);

}



.player-time-display {

    color: #cbd5e1;

    font-size: 12px;

    font-weight: 600;

    font-family: 'JetBrains Mono', monospace;

    display: flex;

    align-items: center;

    gap: 4px;

    margin-left: 6px;

    user-select: none;

}

.player-time-display .time-sep {

    opacity: 0.45;

}



/* 4. UNIFIED SETTINGS MENU (GEAR POPUP) */

.player-settings-wrap {

    position: relative;

}



.player-unified-settings-menu {

    position: absolute;

    bottom: 48px;

    right: 0;

    z-index: 100;

    width: 280px;

    background: rgba(14, 18, 28, 0.96);

    backdrop-filter: blur(24px);

    -webkit-backdrop-filter: blur(24px);

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 14px;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(229, 9, 20, 0.2);

    overflow: hidden;

    display: none;

    animation: inPlayerPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}

.player-unified-settings-menu.open {

    display: block;

}



.settings-menu-page {

    display: none;

    padding: 10px;

    max-height: 340px;

    overflow-y: auto;

}

.settings-menu-page.active {

    display: block;

}



.settings-menu-header {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    color: #94a3b8;

    padding: 6px 10px 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    margin-bottom: 6px;

}



.settings-subpage-header {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 6px 8px 10px;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    margin-bottom: 8px;

    cursor: pointer;

}

.settings-subpage-header:hover {

    color: #ff3366;

}

.settings-subpage-header .back-arrow {

    font-size: 18px;

    font-weight: 800;

    line-height: 1;

}



.settings-menu-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 12px;

    border-radius: 8px;

    cursor: pointer;

    transition: background 0.15s ease;

    user-select: none;

}

.settings-menu-item:hover {

    background: rgba(255, 255, 255, 0.09);

}



.settings-menu-item .menu-icon {

    font-size: 15px;

    width: 20px;

    text-align: center;

}

.settings-menu-item .menu-label {

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    flex: 1;

}

.settings-menu-item .menu-value {

    color: #94a3b8;

    font-size: 12px;

    font-weight: 500;

    max-width: 110px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    text-align: right;

}

.settings-menu-item .menu-arrow {

    color: #64748b;

    font-size: 15px;

    font-weight: 700;

}



.settings-options-list {

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.settings-opt-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 9px 12px;

    border-radius: 8px;

    background: transparent;

    border: none;

    color: #cbd5e1;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    text-align: left;

    transition: all 0.15s ease;

}

.settings-opt-item:hover {

    background: rgba(255, 255, 255, 0.08);

    color: #fff;

}

.settings-opt-item.active {

    background: rgba(229, 9, 20, 0.18);

    color: #ff4d4f;

    font-weight: 700;

}



.settings-subs-tools {

    display: flex;

    gap: 8px;

    margin-bottom: 8px;

}

.btn-sub-tool {

    flex: 1;

    padding: 7px 10px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 8px;

    color: #cbd5e1;

    font-size: 11px;

    font-weight: 700;

    text-align: center;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    transition: all 0.15s ease;

}

.btn-sub-tool:hover {

    background: rgba(229, 9, 20, 0.3);

    color: #fff;

    border-color: rgba(229, 9, 20, 0.6);

}



/* Badge Server inside top bar */

.in-player-badge.badge-server {

    background: rgba(59, 130, 246, 0.22);

    border-color: rgba(59, 130, 246, 0.5);

    color: #60a5fa;

}



/* Hide Plyr internal controls so only our unified bottom bar is visible */

.video-stage .plyr__controls {

    display: none !important;

}



/* Prevent duplicate native and Plyr subtitle rendering so only cinema-subtitle-overlay renders */

.plyr__captions,

.plyr__caption,

.video-stage video::cue,

.plyr video::cue,

video::cue {

    display: none !important;

    opacity: 0 !important;

    visibility: hidden !important;

}



/* ===== BULLETPROOF FAIL-SAFE CINEMA SUBTITLE OVERLAY ===== */

.cinema-subtitle-overlay {

    position: absolute !important;

    bottom: clamp(100px, 14vh, 135px) !important;

    left: 4% !important;

    right: 4% !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    pointer-events: none !important;

    z-index: 46 !important;

    transition: bottom 0.22s ease !important;

}



.video-stage.hud-hidden .cinema-subtitle-overlay {

    bottom: clamp(58px, 8.5vh, 88px) !important;

}



.cinema-subtitle-text {

    display: inline-block !important;

    background: transparent !important;

    background-color: transparent !important;

    color: #ffffff !important;

    font-family: var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

    font-size: clamp(16px, 2.4vw, 26px) !important;

    font-weight: 700 !important;

    line-height: 1.4 !important;

    padding: 0 8px !important;

    border-radius: 0 !important;

    max-width: 88% !important;

    margin: 2px 0 !important;

    word-wrap: break-word !important;

    box-shadow: none !important;

    text-shadow:

        -1.5px -1.5px 0 #000,

        1.5px -1.5px 0 #000,

        -1.5px 1.5px 0 #000,

        1.5px 1.5px 0 #000,

        0 0 3px #000,

        0 2px 5px rgba(0, 0, 0, 0.95),

        0 4px 10px rgba(0, 0, 0, 0.85) !important;

    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.85);

}



.in-player-btn-badge {

    cursor: pointer;

    background: rgba(15, 23, 42, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #e2e8f0;

    transition: all 0.18s ease;

    user-select: none;

}

.in-player-btn-badge:hover {

    background: rgba(30, 41, 59, 0.9);

    border-color: rgba(255, 255, 255, 0.35);

    color: #ffffff;

    transform: translateY(-1px);

}



/* In-Player Server Dropdown Menu */

.in-player-server-btn {

    cursor: pointer;

    font-family: inherit;

    transition: transform 0.15s ease, filter 0.15s ease;

}

.in-player-server-btn:hover {

    filter: brightness(1.25);

    transform: scale(1.03);

}

.in-player-server-dropdown {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    min-width: 220px;

    background: rgba(8, 12, 22, 0.98);

    backdrop-filter: blur(24px);

    -webkit-backdrop-filter: blur(24px);

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 12px;

    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);

    z-index: 100;

    padding: 6px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.in-player-server-dropdown .server-opt-btn {

    background: transparent;

    border: none;

    color: #cbd5e1;

    padding: 8px 12px;

    font-size: 0.82rem;

    font-weight: 600;

    border-radius: 8px;

    text-align: left;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: all 0.15s ease;

}

.in-player-server-dropdown .server-opt-btn:hover {

    background: rgba(255, 255, 255, 0.12);

    color: #fff;

}

.in-player-server-dropdown .server-opt-btn.active {

    background: linear-gradient(135deg, #e50914, #b20710);

    color: #fff;

    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.4);

}



/* Dedicated 1-Click Server Selector Strip */

.player-server-strip {

    display: block;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.server-strip-header {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}

.server-strip-label {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.85rem;

    font-weight: 700;

    color: var(--text-secondary, #94a3b8);

}

.server-strip-pills {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    align-items: center;

}

.servel {

    padding: 5px 12px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: #cbd5e1;

    font-size: 0.8rem;

    font-weight: 600;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: all 0.18s ease;

}

.server-pill:hover {

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

    border-color: rgba(255, 255, 255, 0.25);

    transform: translateY(-1px);

}

.server-pill.active {

    background: linear-gradient(135deg, #e50914, #b20710);

    border-color: #ff3344;

    color: #fff;

    box-shadow: 0 2px 10px rgba(229, 9, 20, 0.45);

}





/* IFRAME EMBED MODE: Hide video/plyr/buffering — top bar + footer server strip stay visible */

.video-stage.is-iframe-mode #cinemaVideo,

.video-stage.is-iframe-mode .plyr,

.video-stage.is-iframe-mode .video-buffering-spinner,

.video-stage.is-iframe-mode .seek-ripple-overlay,

.video-stage.is-iframe-mode .seek-ripple {

    display: none !important;

    pointer-events: none !important;

}



.video-stage.is-iframe-mode .cinema-iframe {

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    z-index: 5 !important;

    pointer-events: auto !important;

}



/* In iframe mode, completely hide CineScope custom bottom controls so the embed player has full interactive space */

.video-stage.is-iframe-mode .cinema-player-controls {

    display: none !important;

}



/* Ensure top bar + server badge dropdown float above iframe */

.video-stage.is-iframe-mode .in-player-top-bar {

    z-index: 70 !important;

    pointer-events: auto !important;

}



.video-stage.is-iframe-mode .in-player-server-wrap,

.video-stage.is-iframe-mode #inPlayerServerDropdown {

    z-index: 80 !important;

}







@keyframes inPlayerPopIn {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}



.in-player-popover .popover-header {

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    color: #94a3b8;

    padding: 6px 10px 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    margin-bottom: 4px;

}



.in-player-popover .popover-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 8px 12px;

    border-radius: 8px;

    background: transparent;

    border: none;

    color: #cbd5e1;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    text-align: left;

    transition: all 0.15s ease;

    margin-bottom: 2px;

}

.in-player-popover .popover-item:hover {

    background: rgba(255, 255, 255, 0.1);

    color: #fff;

}

.in-player-popover .popover-item.active {

    background: rgba(229, 9, 20, 0.22);

    color: #fff;

    font-weight: 800;

    border: 1px solid rgba(229, 9, 20, 0.4);

}



.popover-sync-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 10px 4px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    margin-top: 6px;

    gap: 8px;

}



.btn-xs-sync {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 6px;

    color: #fff;

    padding: 3px 8px;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;

}

.btn-xs-sync:hover {

    background: #e50914;

    border-color: #e50914;

}



/* ===== CINEMA PLAYER FOOTER & SERIES RIBBON ===== */

.player-cinema-footer {

    background: rgba(12, 15, 24, 0.96);

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    padding: 14px 22px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    border-radius: 0 0 20px 20px;

    flex-shrink: 0;

}



/* ===== 1-CLICK STREAMING SERVER SELECTOR STRIP ===== */

.player-server-strip {

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

}



.server-strip-header {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}



.server-strip-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    color: #94a3b8;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;

    flex-shrink: 0;

}



.server-strip-pills {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

    flex: 1;

    min-width: 0;

}



.server-pill-tab {

    background: rgba(22, 27, 40, 0.85);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 8px;

    color: #cbd5e1;

    padding: 5px 11px;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    transition: all 0.2s ease;

    white-space: nowrap;

}



.server-pill-tab:hover {

    background: rgba(255, 255, 255, 0.12);

    color: #fff;

    border-color: rgba(255, 255, 255, 0.25);

    transform: translateY(-1px);

}



.server-pill-tab.active {

    background: rgba(229, 9, 20, 0.22);

    border-color: #e50914;

    color: #fff;

    box-shadow: 0 0 14px rgba(229, 9, 20, 0.35);

}



.server-pill-active-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #00e599;

    box-shadow: 0 0 6px #00e599;

}



.btn-external-stream {

    background: rgba(56, 189, 248, 0.12);

    border: 1px solid rgba(56, 189, 248, 0.3);

    border-radius: 8px;

    color: #38bdf8;

    padding: 5px 11px;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-left: auto;

    transition: all 0.2s ease;

    white-space: nowrap;

}



.btn-external-stream:hover {

    background: rgba(56, 189, 248, 0.22);

    border-color: #38bdf8;

    color: #fff;

    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);

    transform: translateY(-1px);

}



/* In iframe mode, hide direct-only stats and volume boost */

.video-stage.is-iframe-mode~.player-cinema-footer #audioBoostBtn,

.video-stage.is-iframe-mode~.player-cinema-footer #playerCodecStat,

.video-stage.is-iframe-mode~.player-cinema-footer #playerSizeStat {

    display: none !important;

}



.player-series-ribbon {

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.series-ribbon-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 8px;

}



.ribbon-title {

    font-size: 13px;

    font-weight: 700;

    color: #fff;

    display: flex;

    align-items: center;

    gap: 6px;

}



.ribbon-seasons {

    display: flex;

    gap: 6px;

    overflow-x: auto;

}



.ribbon-season-btn {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: var(--text-secondary);

    padding: 3px 10px;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.18s ease;

}

.ribbon-season-btn.active,

.ribbon-season-btn:hover {

    background: #e50914;

    border-color: #e50914;

    color: #fff;

}

.ribbon-season-label {

    font-size: 11px;

    font-weight: 700;

    color: var(--text-muted);

}



.ribbon-episodes {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding: 4px 0 6px;

    scrollbar-width: thin;

}

.ribbon-episodes::-webkit-scrollbar {

    height: 4px;

}

.ribbon-episodes::-webkit-scrollbar-thumb {

    background: rgba(229, 9, 20, 0.5);

    border-radius: 4px;

}



.ribbon-ep-btn {

    flex-shrink: 0;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #cbd5e1;

    padding: 6px 14px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.2s ease;

}

.ribbon-ep-btn:hover {

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

    transform: translateY(-1px);

}

.ribbon-ep-btn.active {

    background: linear-gradient(135deg, #e50914 0%, #b20710 100%);

    border-color: #e50914;

    color: #fff;

    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.4);

}



.player-meta-strip {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

}



.meta-strip-left {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

}



.meta-stream-title {

    font-size: 15px;

    font-weight: 800;

    color: #fff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 380px;

}



.meta-stream-badge {

    background: rgba(229, 9, 20, 0.22);

    border: 1px solid rgba(229, 9, 20, 0.5);

    color: #ff4d4f;

    padding: 2px 8px;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 800;

}



.meta-stream-sub {

    font-size: 12px;

    color: var(--text-muted);

}



.meta-strip-right {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-left: auto;

}



.stream-stat {

    font-size: 12px;

    color: var(--text-muted);

    font-family: var(--font-mono);

}



.btn-close {

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--r-sm);

    background: rgba(244, 63, 94, 0.1);

    border: 1px solid rgba(244, 63, 94, 0.3);

    color: var(--rose);

    font-size: 14px;

    cursor: pointer;

    transition: all var(--t-fast);

    flex-shrink: 0;

}

.btn-close:hover {

    background: rgba(244, 63, 94, 0.2);

    transform: scale(1.1);

}



/* ===== MINI PLAYER ===== */

.mini-player-dock {

    position: fixed;

    bottom: 24px;
    right: 24px;

    z-index: 800;

    width: 320px;

    background: var(--bg-card);

    border: 1px solid var(--border-accent);

    border-radius: var(--r-lg);

    box-shadow: var(--shadow-lg), var(--shadow-violet);

    overflow: hidden;

    animation: slideUpIn 0.3s var(--ease);

}



@keyframes slideUpIn {

    from {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}



.mini-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 14px;

    border-bottom: 1px solid var(--border);

}

.mini-title {
    font-size: 13px;
    font-weight: 600;
}

.mini-actions {
    display: flex;
    gap: 6px;
}

.btn-mini-action {

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--r-sm);

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--border);

    color: var(--text-secondary);

    font-size: 13px;

    cursor: pointer;

    transition: all var(--t-fast);

}

.btn-mini-action:hover {

    background: rgba(255, 255, 255, 0.1);

    color: var(--text-primary);

}



.mini-video-container {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}



/* ===== DETAIL MODAL ===== */

.detail-modal {

    position: fixed;

    inset: 0;

    z-index: 900;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    pointer-events: none;

    transition: opacity var(--t-med);

}

.detail-modal.active {

    opacity: 1;

    pointer-events: all;

}



.detail-modal-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

}



.detail-modal-card {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 780px;

    max-height: 90vh;

    overflow-y: auto;

    background: #0e0f14;

    border-radius: var(--r-xl);

    border: 1px solid rgba(255, 255, 255, 0.09);

    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(255, 255, 255, 0.04);

    transform: scale(0.94) translateY(20px);

    transition: transform var(--t-med);

}

.detail-modal.active .detail-modal-card {

    transform: scale(1) translateY(0);

}



.detail-close {

    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 2;

}



.detail-layout {

    display: flex;

    gap: 28px;

    padding: 32px;

    align-items: flex-start;

    flex-wrap: wrap;

}



.detail-poster-wrap {

    width: 160px;

    flex-shrink: 0;

}



.detail-poster-img {

    width: 100%;

    border-radius: var(--r-md);

    box-shadow: var(--shadow-md);

    object-fit: cover;

    aspect-ratio: 2/3;

    margin-bottom: 14px;

    display: block;

}



.detail-main {
    flex: 1;
    min-width: 200px;
}



.detail-header-badges {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-bottom: 14px;

}



.detail-title {

    font-size: 26px;

    font-weight: 800;

    letter-spacing: -0.5px;

    margin-bottom: 6px;

}



.detail-genres {

    font-size: 13px;

    color: var(--violet);

    margin-bottom: 14px;

    font-weight: 500;

}



.detail-plot {

    font-size: 13.5px;

    color: var(--text-secondary);

    line-height: 1.8;

    margin-bottom: 20px;

}



.detail-subhead {

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 10px;

    color: var(--text-primary);

}



.detail-info-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

    gap: 14px;

    margin-top: 20px;

}



.info-block {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.info-label {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--text-muted);

    font-weight: 600;

}

.info-value {

    font-size: 13px;

    color: var(--text-primary);

    font-weight: 500;

}

.mono {
    font-family: var(--font-mono);
    font-size: 11px !important;
}



/* ===== TOAST NOTIFICATIONS ===== */

.toast-container {

    position: fixed;

    bottom: 24px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 2000;

    display: flex;

    flex-direction: column-reverse;

    gap: 8px;

    pointer-events: none;

}



.toast {

    padding: 12px 20px;

    background: var(--bg-elevated);

    border: 1px solid var(--border-accent);

    border-radius: var(--r-full);

    font-size: 13.5px;

    font-weight: 500;

    color: var(--text-primary);

    box-shadow: var(--shadow-md), var(--shadow-violet);

    animation: toastIn 0.3s var(--ease);

    white-space: nowrap;

    transition: opacity 0.25s ease;

}



.toast.error {

    border-color: rgba(244, 63, 94, 0.4);

    color: #fda4af;

}



@keyframes toastIn {

    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}



/* ===== API PLAYGROUND ===== */

.api-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: var(--r-xl);

    overflow: hidden;

    margin-bottom: 20px;

}



.api-table {

    width: 100%;

    border-collapse: collapse;

}



.api-table th {

    text-align: left;

    padding: 14px 18px;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--text-muted);

    border-bottom: 1px solid var(--border);

    background: var(--bg-elevated);

}



.api-table td {

    padding: 14px 18px;

    border-bottom: 1px solid var(--border);

    font-size: 13px;

    color: var(--text-secondary);

    vertical-align: middle;

}

.api-table tr:last-child td {
    border-bottom: none;
}

.api-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}



.method-tag {

    display: inline-block;

    padding: 2px 8px;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 700;

    font-family: var(--font-mono);

    background: rgba(16, 185, 129, 0.12);

    border: 1px solid rgba(16, 185, 129, 0.3);

    color: #6ee7b7;

}



.endpoint-url {

    font-family: var(--font-mono);

    font-size: 12px;

    color: var(--violet);

}



.json-inspector-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: var(--r-xl);

    overflow: hidden;

}



.inspector-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 20px;

    border-bottom: 1px solid var(--border);

    background: var(--bg-elevated);

}

.inspector-title {
    font-size: 13.5px;
    font-weight: 600;
}



.json-code {

    padding: 20px;

    font-family: var(--font-mono);

    font-size: 12px;

    color: #ffffff;

    overflow-x: auto;

    max-height: 420px;

    overflow-y: auto;

    line-height: 1.7;

    white-space: pre;

}



/* ===== WATCHLIST ===== */

.grid-loading {

    grid-column: 1 / -1;

    text-align: center;

    padding: 60px 20px;

    color: var(--text-muted);

    font-size: 14px;

}



/* ===== LOADING SPINNER ===== */

.loading-spinner {

    display: inline-block;

    width: 20px;
    height: 20px;

    border: 2px solid var(--border);

    border-top-color: var(--violet);

    border-radius: 50%;

    animation: spin 0.7s linear infinite;

}



@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}



/* ===== PLYR OVERRIDES ===== */

.plyr {

    --plyr-color-main: var(--violet);

    --plyr-video-background: #000;

    border-radius: 0;

    width: 100%;

    height: 100%;

}



.plyr--video .plyr__control.plyr__tab-focus,

.plyr--video .plyr__control:hover,

.plyr--video .plyr__control[aria-expanded=true] {

    background: var(--violet);

}



/* ===== RESPONSIVE ===== */

@media (max-width: 1366px) {

    .nav-container {
        gap: 10px;
        padding: 0 16px;
    }

    .badge-glow {
        display: none;
    }

    .nav-btn {
        padding: 7px 11px;
        font-size: 13px;
        gap: 6px;
    }

    .global-search-input {
        width: 180px;
    }

    .global-search-input:focus {
        width: 220px;
    }

}



@media (max-width: 1024px) {

    .nav-container {
        padding: 0 14px;
        gap: 8px;
    }

    .main-content {
        padding: 0 20px 48px;
    }

    .nav-btn span:not(#watchlistCountBadge) {
        font-size: 12px;
    }

    .global-search-input {
        width: 160px;
    }

    .global-search-input:focus {
        width: 190px;
    }

}



@media (max-width: 768px) {

    .mobile-menu-btn {
        display: flex;
    }



    .nav-links {

        display: none;

        position: absolute;

        top: 64px;

        left: 0;
        right: 0;

        flex-direction: column;

        align-items: stretch;

        background: var(--bg-glass);

        backdrop-filter: blur(24px);

        -webkit-backdrop-filter: blur(24px);

        border-bottom: 1px solid var(--border);

        padding: 8px 16px 16px;

        gap: 4px;

        z-index: 100;

    }

    .nav-links.mobile-open {
        display: flex;
    }



    .nav-btn {
        width: 100%;
        padding: 11px 16px;
    }



    .nav-right {
        gap: 6px;
    }



    .badge-glow {
        display: none;
    }



    .hero-banner {
        height: 380px;
        margin: 16px 0 28px;
    }

    .hero-content {
        padding: 28px;
        max-width: 100%;
    }

    .hero-title {
        font-size: 30px;
    }

    .hero-desc {
        display: none;
    }



    .main-content {
        padding: 0 16px 40px;
    }



    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }



    .shelf-header {
        flex-direction: column;
        gap: 12px;
    }



    .resolver-inputs {
        flex-direction: column;
    }

    .input-group.flex-3,
    .input-group.flex-1 {
        flex: unset;
        width: 100%;
    }



    .detail-layout {
        flex-direction: column;
    }

    .detail-poster-wrap {
        width: 130px;
    }



    .player-toolbar {
        flex-direction: column;
    }

    .toolbar-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .control-group {
        width: 100%;
        min-width: unset;
    }



    .global-search-input {
        width: 160px;
    }

    .global-search-input:focus {
        width: 200px;
    }

}



@media (max-width: 480px) {

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-actions {
        gap: 8px;
    }

    .api-table {
        font-size: 12px;
    }

}



/* ===== CATEGORY PILLS BAR ===== */

.category-pills-bar {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 16px 0 20px;

    overflow-x: auto;

    padding-bottom: 6px;

    scrollbar-width: thin;

}

.cat-pill {

    padding: 7px 16px;

    border-radius: var(--r-full);

    border: 1px solid var(--border);

    background: var(--bg-card);

    color: var(--text-secondary);

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    white-space: nowrap;

    transition: all var(--t-fast);

}

.cat-pill:hover {

    background: var(--bg-elevated);

    color: var(--text-primary);

    border-color: rgba(229, 9, 20, 0.4);

}

.cat-pill.active {

    background: var(--gradient-brand);

    color: #fff;

    border-color: transparent;

    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);

}



/* ===== PLAYER AMBIENT GLOW ===== */

.player-ambient-glow {

    position: absolute;

    inset: -30px;

    background-size: cover;

    background-position: center;

    filter: blur(50px) saturate(180%) brightness(0.6);

    opacity: 0.55;

    pointer-events: none;

    z-index: 0;

    transition: opacity 0.5s ease;

    will-change: opacity;

    transform: translateZ(0);

}

/* Firefox: disable the expensive blur on the ambient glow to prevent lag */

@supports (-moz-appearance: none) {

    .player-ambient-glow {

        filter: none !important;

        opacity: 0.18 !important;

    }

}

.video-stage video,

.video-stage iframe,

.video-stage .plyr {

    position: relative;

    z-index: 1;

    width: 100%;

    height: 100%;

    object-fit: contain;

}



/* Double-tap / Click seek ripple */

.seek-ripple {

    position: absolute;

    top: 0;
    bottom: 0;

    width: 35%;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    pointer-events: none;

    opacity: 0;

    transition: opacity 0.25s ease;

}

.seek-ripple.left {
    left: 0;
}

.seek-ripple.right {
    right: 0;
}

.seek-ripple span {

    padding: 10px 18px;

    border-radius: var(--r-full);

    background: rgba(0, 0, 0, 0.75);

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    backdrop-filter: blur(10px);

}

.seek-ripple.active {

    opacity: 1;

    animation: seekPop 0.6s ease forwards;

}

@keyframes seekPop {

    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    40% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }

}



/* Episode countdown box */

.next-ep-countdown {

    position: absolute;

    bottom: 70px;

    right: 24px;

    z-index: 20;

    background: rgba(13, 16, 32, 0.92);

    border: 1px solid rgba(229, 9, 20, 0.4);

    border-radius: var(--r-lg);

    padding: 14px 18px;

    backdrop-filter: blur(16px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

    animation: slideUp 0.3s ease;

}

.countdown-text {

    font-size: 14px;

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 8px;

}

.countdown-actions {

    display: flex;

    gap: 8px;

}



/* Audio Dub select custom styling */

.custom-select-audio {

    border-color: rgba(229, 9, 20, 0.45);

    background: rgba(229, 9, 20, 0.1);

    color: #ffffff;

    font-weight: 600;

}

.custom-select-audio:focus {

    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.25);

}



/* Shortcuts modal */

.shortcuts-modal {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;

    justify-content: center;

}

.shortcuts-modal.active {
    display: flex;
}

.shortcuts-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.7);

    backdrop-filter: blur(10px);

}

.shortcuts-card {

    position: relative;

    z-index: 1;

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: var(--r-xl);

    padding: 28px;

    max-width: 480px;

    width: 90%;

    box-shadow: var(--shadow-xl);

}

.shortcuts-title {

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 18px;

    color: var(--text-primary);

}

.shortcuts-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 10px;

}

.shortcut-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 6px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    font-size: 13px;

    color: var(--text-secondary);

}

kbd {

    background: var(--bg-elevated);

    border: 1px solid var(--border);

    border-radius: 4px;

    padding: 2px 7px;

    font-family: var(--font-mono);

    font-size: 11.5px;

    color: #ffffff;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

}

.shortcuts-close {

    position: absolute;

    top: 18px;

    right: 18px;

}



/* Autocomplete Dropdown Enhanced Styling */

.autocomplete-dropdown {

    right: 0;

    left: auto;

}

.autocomplete-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

    cursor: pointer;

    transition: background 0.15s ease;

}

.autocomplete-item:hover {

    background: rgba(229, 9, 20, 0.15);

}

.ac-thumb {

    width: 36px;

    height: 52px;

    object-fit: cover;

    border-radius: 4px;

    flex-shrink: 0;

    background: var(--bg-surface);

}

.ac-info {

    flex: 1;

    min-width: 0;

}

.ac-title {

    font-size: 14px;

    font-weight: 600;

    color: var(--text-primary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    margin-bottom: 2px;

}

.ac-meta-row {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 11.5px;

    color: var(--text-secondary);

}

.ac-badge {

    font-size: 10px;

    padding: 1px 6px;

}

.ac-rating {

    color: var(--gold);

    font-weight: 600;

}

.ac-year {

    color: var(--text-muted);

}



/* ===== RECENT SEARCHES ROW ===== */

.recent-searches-row {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

    padding: 10px 24px;

    background: rgba(13, 16, 32, 0.6);

    border-bottom: 1px solid var(--border);

    margin-bottom: 8px;

}

.recent-searches-label {

    display: flex;

    align-items: center;

    gap: 5px;

    color: var(--text-muted);

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

}

.recent-chips-wrap {

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

}

.recent-chip {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 4px 12px;

    background: var(--bg-elevated);

    border: 1px solid var(--border);

    border-radius: var(--r-full);

    color: var(--text-secondary);

    font-size: 12px;

    font-family: var(--font);

    cursor: pointer;

    transition: all var(--t-fast);

}

.recent-chip:hover {

    border-color: var(--violet);

    color: var(--text-primary);

    background: var(--violet-dim);

}

.recent-chip svg {

    flex-shrink: 0;

    color: var(--text-muted);

}



/* ===== CONTINUE WATCHING PROGRESS OVERLAY ===== */

.continue-progress-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding: 6px 8px;

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, transparent 100%);

    opacity: 0;

    transition: opacity var(--t-fast);

    pointer-events: none;

}

.continue-card:hover .continue-progress-overlay {

    opacity: 1;

}

.continue-pct-label {

    font-size: 11px;

    font-weight: 700;

    color: var(--gold);

    background: rgba(0, 0, 0, 0.5);

    padding: 2px 5px;

    border-radius: 4px;

}

.continue-left-label {

    font-size: 11px;

    font-weight: 600;

    color: #fff;

    background: rgba(0, 0, 0, 0.5);

    padding: 2px 5px;

    border-radius: 4px;

}



/* ===== EPISODE BUTTON PLAY ICON ===== */

.episode-btn .ep-res-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--emerald);

}



/* ═══════════════════════════════════════════════════════════════════════════

   STREAMFLIX / MOVIEBOX MOBILE EXPERIENCE — Responsive Cinema UI Engine

   ═══════════════════════════════════════════════════════════════════════════ */



/* Sheet drag handle default hide on desktop */

.sheet-drag-handle {

    display: none;

}



@media (max-width: 768px) {

    /* Touch optimization & App feel */

    * {

        -webkit-tap-highlight-color: transparent;

    }



    body {

        padding-bottom: 24px;

        -webkit-user-select: none;

        user-select: none;

    }



    /* Ambient glow reduction for mobile performance */

    .ambient-glow {

        height: 320px;

        opacity: 0.5;

    }



    /* ─── COMPACT STREAMING APP NAVBAR ─── */

    .navbar {

        height: 56px;

        background: rgba(8, 10, 18, 0.92);

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        padding: 0 14px;

    }



    .nav-container {

        height: 56px;

        padding: 0;

        gap: 10px;

        justify-content: space-between;

    }



    .nav-left {

        gap: 8px;

    }



    .brand-title {

        font-size: 19px;

        font-weight: 800;

        letter-spacing: -0.5px;

    }



    .brand-icon {

        width: 30px;

        height: 30px;

    }



    /* Hide desktop-only badges, Swagger docs, and dev tools from mobile header */

    .badge-glow,

    .nav-right .icon-btn,

    .search-shortcut,

    .nav-links button#tabBtn-resolver,

    .nav-links button#tabBtn-api {

        display: none !important;

    }



    /* Clean mobile search input */

    .nav-right {

        flex: 1;

        max-width: 190px;

        margin-left: auto;

    }



    .search-container {

        width: 100%;

    }



    .global-search-input {

        width: 100% !important;

        height: 36px;

        font-size: 13px;

        padding: 0 10px 0 32px;

        background: rgba(255, 255, 255, 0.08);

        border-radius: 50px;

        border: 1px solid rgba(255, 255, 255, 0.1);

    }



    .search-icon {

        left: 10px;

        width: 14px;

        height: 14px;

    }



    /* Mobile Drawer navigation if opened */

    .mobile-menu-btn {

        display: flex;

        align-items: center;

        justify-content: center;

        background: transparent;

        border: none;

        color: var(--text-primary);

        padding: 6px;

        cursor: pointer;

    }



    .nav-links {

        display: none;

        position: fixed;

        top: 56px;

        left: 0;

        right: 0;

        background: rgba(13, 16, 32, 0.98);

        backdrop-filter: blur(28px);

        -webkit-backdrop-filter: blur(28px);

        border-bottom: 1px solid var(--border-accent);

        flex-direction: column;

        padding: 16px;

        gap: 10px;

        z-index: 999;

        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);

    }



    .nav-links.mobile-open {

        display: flex;

        animation: mobileNavSlide 0.25s var(--ease);

    }



    @keyframes mobileNavSlide {

        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }



    .nav-btn {

        width: 100%;

        justify-content: flex-start;

        padding: 12px 16px;

        font-size: 15px;

        border-radius: var(--r-md);

        background: rgba(255, 255, 255, 0.04);

    }



    /* ─── MAIN CONTENT CONTAINER ─── */

    .main-content {

        padding: 0 14px 40px;

    }



    /* ─── STREAMFLIX / NETFLIX CINEMATIC MOBILE HERO BANNER ─── */

    .hero-banner {

        height: 380px;

        border-radius: 18px;

        margin: 14px 0 24px;

        border: 1px solid rgba(255, 255, 255, 0.08);

    }



    .hero-backdrop {

        filter: brightness(0.55) saturate(1.2);

    }



    .hero-overlay {

        background:

            linear-gradient(to top, rgba(6, 8, 16, 0.98) 12%, rgba(6, 8, 16, 0.6) 45%, transparent 100%),

            linear-gradient(to right, rgba(6, 8, 16, 0.7) 0%, transparent 100%);

    }



    .hero-content {

        padding: 20px 16px;

        max-width: 100%;

    }



    .hero-title {

        font-size: 26px;

        line-height: 1.15;

        letter-spacing: -0.4px;

        margin-bottom: 8px;

    }



    .hero-desc {

        font-size: 12.5px;

        line-height: 1.5;

        margin-bottom: 16px;

        -webkit-line-clamp: 2;

    }



    .hero-badges {

        gap: 6px;

        margin-bottom: 10px;

    }



    .hero-badges .badge {

        font-size: 11px;

        padding: 3px 8px;

    }



    .hero-actions {

        gap: 10px;

        width: 100%;

    }



    .hero-actions .btn {

        flex: 1;

        justify-content: center;

        padding: 10px 16px;

        font-size: 13.5px;

        font-weight: 700;

        border-radius: 50px;

    }



    .btn-primary#heroPlayBtn {

        background: linear-gradient(135deg, #e50914 0%, #b20710 100%);

        box-shadow: 0 4px 18px rgba(229, 9, 20, 0.5);

    }



    .hero-carousel-dots {

        bottom: 8px;

    }



    /* ─── STREAMFLIX HORIZONTAL SWIPEABLE ROWS (HOME SHELVES) ─── */

    .section-header {

        margin: 20px 0 12px;

        padding: 0 2px;

    }



    .section-header h2 {

        font-size: 17px;

        font-weight: 700;

        letter-spacing: -0.2px;

    }



    .section-subtitle {

        display: none;

    }



    .section-divider {

        margin: 22px 0 10px;

        opacity: 0.4;

    }



    /* Home shelves become smooth horizontal swipeable carousels! */

    .tab-pane#tab-home .cards-grid {

        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        gap: 12px;

        padding: 4px 14px 14px;

        margin: 0 -14px;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

    }



    .tab-pane#tab-home .cards-grid::-webkit-scrollbar {

        display: none;

    }



    /* Card dimensions in horizontal row */

    .tab-pane#tab-home .media-card {

        flex: 0 0 128px;

        width: 128px;

        min-width: 128px;

        scroll-snap-align: start;

        border-radius: 12px;

        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);

        border: 1px solid rgba(255, 255, 255, 0.07);

        transition: transform 0.15s ease;

    }



    .tab-pane#tab-home .media-card:active {

        transform: scale(0.95);

    }



    /* ─── 2-COLUMN RESPONSIVE GRID (MOVIES, TV SERIES, SEARCH) ─── */

    .shelf-header {

        flex-direction: column;

        align-items: flex-start;

        padding: 16px 0 12px;

        gap: 12px;

    }



    .page-title {

        font-size: 22px;

    }



    .page-subtitle {

        font-size: 12px;

        margin-top: 2px;

    }



    /* Category & Genre scrollable pill bars */

    .category-pills-bar,

    .genre-scroll-bar {

        display: flex;

        overflow-x: auto;

        gap: 8px;

        padding: 6px 2px 12px;

        margin: 0 -14px;

        padding-left: 14px;

        padding-right: 14px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }



    .category-pills-bar::-webkit-scrollbar,

    .genre-scroll-bar::-webkit-scrollbar {

        display: none;

    }



    .cat-pill,

    .genre-chip,

    .filter-pill {

        flex-shrink: 0;

        padding: 6px 14px;

        font-size: 12px;

        border-radius: 50px;

    }



    /* Movies & Series Tab Grids */

    #tab-movies .cards-grid,

    #tab-series .cards-grid,

    #searchResultsGrid,

    #watchlistGrid {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }



    .media-card {

        border-radius: 12px;

        border: 1px solid rgba(255, 255, 255, 0.08);

    }



    .card-body {

        padding: 8px 8px 10px;

    }



    .card-title {

        font-size: 12.5px;

        font-weight: 600;

        line-height: 1.3;

        margin-bottom: 4px;

    }



    .card-meta {

        font-size: 11px;

    }



    .card-badge-rating {

        top: 6px;

        left: 6px;

        font-size: 10px;

        padding: 2px 6px;

    }



    .card-badge-type {

        top: 6px;

        right: 6px;

        font-size: 9px;

        padding: 2px 6px;

    }



    /* Pagination for mobile */

    .pagination-bar {

        margin: 24px 0 10px;

        gap: 10px;

    }



    .pagination-bar .btn {

        padding: 8px 16px;

        font-size: 12px;

    }



    /* ─── STREAMFLIX NATIVE BOTTOM-SHEET DETAIL MODAL ─── */

    .detail-modal {

        padding: 0;

        align-items: flex-end;

    }



    .detail-modal-card {

        width: 100%;

        max-width: 100%;

        max-height: 90vh;

        border-radius: 24px 24px 0 0;

        border-bottom: none;

        overflow-y: auto;

        padding: 16px 16px 36px;

        transform: translateY(100%);

        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);

        background: #12131a;

        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85);

    }



    .detail-modal.active .detail-modal-card {

        transform: translateY(0);

    }



    .sheet-drag-handle {

        display: block;

        width: 42px;

        height: 5px;

        background: rgba(255, 255, 255, 0.3);

        border-radius: 5px;

        margin: 0 auto 14px;

    }



    .detail-close {

        top: 14px;

        right: 14px;

        width: 32px;

        height: 32px;

        font-size: 14px;

        background: rgba(255, 255, 255, 0.12);

        backdrop-filter: blur(8px);

        border: 1px solid rgba(255, 255, 255, 0.15);

    }



    .detail-layout {

        flex-direction: column;

        gap: 16px;

    }



    .detail-poster-wrap {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    .detail-poster-img {

        width: 140px;

        height: 210px;

        border-radius: 14px;

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);

        margin-bottom: 16px;

    }



    .detail-poster-wrap .btn-block {

        width: 100%;

        height: 48px;

        font-size: 15px;

        font-weight: 700;

        border-radius: 50px;

    }



    .btn-primary#detailStreamBtn {

        background: linear-gradient(135deg, #e50914 0%, #b20710 100%);

        box-shadow: 0 4px 20px rgba(229, 9, 20, 0.5);

    }



    .detail-title {

        font-size: 20px;

        text-align: center;

        margin-bottom: 6px;

    }



    .detail-genres {

        font-size: 12px;

        text-align: center;

        margin-bottom: 12px;

    }



    .detail-header-badges {

        justify-content: center;

        gap: 6px;

        margin-bottom: 10px;

    }



    .detail-plot {

        font-size: 13px;

        line-height: 1.6;

        color: rgba(255, 255, 255, 0.8);

    }



    /* Season tabs & episode list on mobile */

    .season-tabs {

        display: flex;

        overflow-x: auto;

        gap: 8px;

        padding-bottom: 8px;

        scrollbar-width: none;

    }



    .season-tabs::-webkit-scrollbar {

        display: none;

    }



    .episodes-grid {

        grid-template-columns: 1fr;

        gap: 8px;

    }



    .episode-btn {

        padding: 12px 14px;

        font-size: 13px;

        border-radius: 10px;

    }



    /* ─── FULLSCREEN CINEMA PLAYER MODAL ─── */

    .player-modal {

        padding: 0;

    }



    .player-modal-content {

        max-width: 100%;

        height: 100%;

        max-height: 100vh;

        border-radius: 0;

        border: none;

        display: flex;

        flex-direction: column;

    }



    .player-header {

        padding: 10px 14px;

    }



    .player-title {

        font-size: 14px;

    }



    .video-stage {

        aspect-ratio: 16/9;

        width: 100%;

        flex-shrink: 0;

    }



    .player-cinema-footer {

        padding: 10px 14px;

        gap: 10px;

        border-radius: 0;

    }



    .player-meta-strip {

        gap: 8px;

    }



    .meta-stream-title {

        font-size: 13px;

        max-width: 220px;

    }



    .meta-strip-right button[onclick*="openShortcutsModal"],

    #playerCodecStat {

        display: none !important;

    }



    .in-player-top-bar {

        padding: 8px 12px;

    }

    .in-player-title {

        font-size: 13px;

        max-width: 130px;

    }

    .in-player-top-actions {

        gap: 4px;

    }

    .in-player-hud-btn {

        padding: 5px 8px;

        font-size: 11px;

    }

    .server-strip-pills {

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 4px;

        -webkit-overflow-scrolling: touch;

    }

    .server-pill-tab {

        flex-shrink: 0;

    }

    .btn-external-stream {

        padding: 5px 8px;

        font-size: 10px;

    }



    .toolbar-left,

    .toolbar-right {

        width: 100%;

        justify-content: space-between;

    }



    .toolbar-select {

        flex: 1;

        font-size: 12px;

        padding: 6px 10px;

    }

}



/* ─── ULTRA SMALL SCREENS (iPhone SE, smaller Androids < 380px) ─── */

@media (max-width: 380px) {

    .tab-pane#tab-home .media-card {

        flex: 0 0 115px;

        width: 115px;

        min-width: 115px;

    }



    .hero-banner {

        height: 340px;

    }



    .hero-title {

        font-size: 22px;

    }



    .brand-title {

        font-size: 17px;

    }

}



/* ═══════════════════════════════════════════════════════════════════════════

   CINEMA PLAYER CONTROLS (Netflix, Prime, Apple TV+ UX)

   ═══════════════════════════════════════════════════════════════════════════ */



/* Mobile Quick Category Scroll Bar */

.mobile-quick-categories {

    display: none;

}



@media (max-width: 768px) {

    .mobile-quick-categories {

        display: flex;

        overflow-x: auto;

        gap: 8px;

        padding: 8px 14px;

        background: rgba(8, 10, 18, 0.88);

        backdrop-filter: blur(16px);

        -webkit-backdrop-filter: blur(16px);

        border-bottom: 1px solid rgba(255, 255, 255, 0.06);

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

        position: sticky;

        top: 56px;

        z-index: 150;

    }

    .mobile-quick-categories::-webkit-scrollbar {

        display: none;

    }

    .quick-cat-chip {

        flex-shrink: 0;

        background: rgba(255, 255, 255, 0.06);

        border: 1px solid rgba(255, 255, 255, 0.1);

        color: var(--text-secondary);

        font-size: 12px;

        font-weight: 600;

        padding: 6px 14px;

        border-radius: 50px;

        cursor: pointer;

        transition: all var(--t-fast);

        white-space: nowrap;

    }

    .quick-cat-chip:active,

    .quick-cat-chip.active {

        background: linear-gradient(135deg, #e50914 0%, #b20710 100%);

        border-color: #e50914;

        color: #fff;

        box-shadow: 0 2px 10px rgba(229, 9, 20, 0.4);

    }

}



/* Screen Lock Button (Netflix style) */

.player-screen-lock-btn {

    position: absolute;

    top: 14px;

    left: 14px;

    z-index: 25;

    background: rgba(0, 0, 0, 0.65);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.18);

    color: #fff;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    cursor: pointer;

    transition: all var(--t-fast);

}

.player-screen-lock-btn:hover {

    background: rgba(229, 9, 20, 0.7);

    border-color: #e50914;

}

.video-stage.screen-locked .plyr__controls {

    pointer-events: none !important;

    opacity: 0 !important;

}



/* Resume Prompt Box (Prime Video style) */

.resume-prompt-box {

    position: absolute;

    bottom: 80px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 30;

    background: rgba(13, 16, 32, 0.95);

    backdrop-filter: blur(16px);

    border: 1px solid rgba(229, 9, 20, 0.4);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(229, 9, 20, 0.2);

    border-radius: 14px;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    gap: 16px;

    animation: resumeSlideUp 0.3s var(--ease);

}

@keyframes resumeSlideUp {

    from {
        opacity: 0;
        transform: translate(-50%, 15px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }

}

.resume-prompt-content {

    display: flex;

    align-items: center;

    gap: 10px;

}

.resume-icon {
    font-size: 20px;
}

.resume-prompt-text {

    display: flex;

    flex-direction: column;

}

.resume-title {

    font-size: 13px;

    font-weight: 700;

    color: #fff;

}

.resume-time {

    font-size: 11px;

    color: var(--gold);

    font-family: var(--font-mono);

}

.resume-actions {

    display: flex;

    gap: 8px;

}



/* Subtitle Sync Controls */

.sub-sync-btns {

    display: flex;

    align-items: center;

    gap: 4px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid var(--border);

    border-radius: var(--r-sm);

    padding: 2px 4px;

}

.sub-sync-val {

    font-family: var(--font-mono);

    font-size: 11px;

    font-weight: 600;

    color: var(--emerald);

    padding: 0 4px;

}



/* Audio Dialogue Boost active indicator */

#audioBoostBtn.boost-active {

    background: rgba(16, 185, 129, 0.2) !important;

    border-color: rgba(16, 185, 129, 0.5) !important;

    color: #6ee7b7 !important;

}



/* In-Player Episodes Drawer */

.player-episodes-drawer {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    max-height: 75%;

    background: rgba(8, 11, 20, 0.96);

    backdrop-filter: blur(24px);

    -webkit-backdrop-filter: blur(24px);

    border-top: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 16px 16px 0 0;

    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.9);

    z-index: 60;

    padding: 16px 20px;

    overflow-y: auto;

    animation: drawerSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes drawerSlideUp {

    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }

}

.drawer-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

}

.drawer-header h4 {

    margin: 0;

    font-size: 1.05rem;

    font-weight: 700;

    color: #fff;

    letter-spacing: -0.01em;

}

.drawer-header .btn-close {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.16);

    color: #fff;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 15px;

    transition: all 0.18s ease;

}

.drawer-header .btn-close:hover {

    background: rgba(255, 255, 255, 0.22);

    transform: scale(1.08);

}

.drawer-season-tabs {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    margin-bottom: 14px;

    scrollbar-width: none;

    padding-bottom: 2px;

}

.drawer-season-tabs .filter-pill {

    padding: 6px 14px;

    font-size: 0.85rem;

    font-weight: 600;

    border-radius: 20px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    background: rgba(255, 255, 255, 0.06);

    color: var(--text-secondary, #cbd5e1);

    cursor: pointer;

    white-space: nowrap;

    transition: all 0.18s ease;

}

.drawer-season-tabs .filter-pill:hover {

    background: rgba(255, 255, 255, 0.14);

    color: #fff;

}

.drawer-season-tabs .filter-pill.active {

    background: #e50914;

    border-color: #ff3344;

    color: #fff;

    box-shadow: 0 2px 10px rgba(229, 9, 20, 0.5);

}

.drawer-episodes-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));

    gap: 8px;

    max-height: 240px;

    overflow-y: auto;

    padding-right: 4px;

}

.drawer-episodes-grid .episode-btn {

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 8px;

    padding: 9px 12px;

    color: #e2e8f0;

    font-size: 0.85rem;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: all 0.18s ease;

}

.drawer-episodes-grid .episode-btn:hover {

    background: rgba(255, 255, 255, 0.15);

    border-color: rgba(255, 255, 255, 0.28);

    transform: translateY(-1px);

}

.drawer-episodes-grid .episode-btn.active {

    background: linear-gradient(135deg, #e50914, #b20710);

    border-color: #ff3344;

    color: #fff;

    box-shadow: 0 3px 12px rgba(229, 9, 20, 0.45);

}



/* Compact rules for laptops and short screens (height <= 760px) */

@media (max-height: 760px) {

    .player-modal {

        padding: 8px;

        align-items: center;

    }

    .player-modal-content {

        max-height: calc(100vh - 16px);

    }

    .player-cinema-footer {

        padding: 8px 14px;

        gap: 6px;

    }

    .custom-select {

        padding: 4px 6px;

        font-size: 11px;

    }

}



/* ===== SUBTITLE UPLOAD & ONLINE SUBTITLES STYLES ===== */

.popover-actions-bar {

    display: flex;

    gap: 6px;

    padding: 8px 12px;

    background: rgba(255, 255, 255, 0.03);

    border-bottom: 1px solid var(--border);

}



.popover-action-chip {

    flex: 1;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 6px 10px;

    background: rgba(139, 92, 246, 0.12);

    border: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: var(--r-sm);

    color: #e2e8f0;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    transition: all var(--t-fast);

    text-align: center;

    white-space: nowrap;

    user-select: none;

}



.popover-action-chip:hover {

    background: rgba(139, 92, 246, 0.25);

    border-color: var(--violet);

    color: #ffffff;

    box-shadow: 0 0 12px rgba(139, 92, 246, 0.35);

}



.online-subs-modal {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.online-subs-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

}



.online-subs-card {

    position: relative;

    width: 100%;

    max-width: 640px;

    max-height: 85vh;

    background: var(--bg-card);

    border: 1px solid rgba(139, 92, 246, 0.25);

    border-radius: var(--r-lg);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(139, 92, 246, 0.15);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    animation: modalScaleIn 0.22s var(--ease);

}



@keyframes modalScaleIn {

    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}



.online-subs-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    border-bottom: 1px solid var(--border);

    background: rgba(255, 255, 255, 0.02);

}



.online-subs-title {

    font-size: 17px;

    font-weight: 800;

    color: var(--text-primary);

    margin: 0;

}



.online-subs-sub {

    font-size: 12px;

    color: var(--text-muted);

    margin: 2px 0 0 0;

}



.online-subs-search-row {

    display: flex;

    gap: 8px;

    padding: 14px 20px 8px;

}



.subs-search-input-wrap {

    flex: 1;

    position: relative;

    display: flex;

    align-items: center;

}



.subs-search-input-wrap svg {

    position: absolute;

    left: 12px;

    color: var(--text-muted);

    pointer-events: none;

}



.subs-search-input-wrap input {

    width: 100%;

    height: 38px;

    padding: 0 12px 0 36px;

    background: var(--bg-surface);

    border: 1px solid var(--border);

    border-radius: var(--r-sm);

    color: var(--text-primary);

    font-size: 13px;

    outline: none;

    transition: border-color var(--t-fast);

}



.subs-search-input-wrap input:focus {

    border-color: var(--violet);

    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);

}



.subs-lang-select {

    height: 38px;

    padding: 0 10px;

    background: var(--bg-surface);

    border: 1px solid var(--border);

    border-radius: var(--r-sm);

    color: var(--text-secondary);

    font-size: 12px;

    outline: none;

    cursor: pointer;

}



.subs-lang-select:focus {

    border-color: var(--violet);

}



.online-subs-chips-row {

    display: flex;

    gap: 6px;

    padding: 6px 20px 12px;

    overflow-x: auto;

    scrollbar-width: none;

}



.online-chip {

    padding: 4px 12px;

    background: var(--bg-surface);

    border: 1px solid var(--border);

    border-radius: var(--r-full);

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

    transition: all var(--t-fast);

}



.online-chip:hover {

    color: #fff;

    border-color: rgba(255, 255, 255, 0.2);

}



.online-chip.active {

    background: var(--gradient-brand);

    border-color: transparent;

    color: #ffffff;

    box-shadow: 0 2px 8px rgba(255, 46, 85, 0.35);

}



.online-subs-list {

    flex: 1;

    overflow-y: auto;

    padding: 8px 20px 20px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    min-height: 220px;

    max-height: 420px;

}



.subs-empty-state {

    text-align: center;

    padding: 40px 20px;

    color: var(--text-muted);

    font-size: 13px;

}



.online-sub-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 14px;

    background: var(--bg-surface);

    border: 1px solid var(--border);

    border-radius: var(--r-sm);

    transition: all var(--t-fast);

}



.online-sub-item:hover {

    border-color: rgba(139, 92, 246, 0.4);

    background: var(--bg-elevated);

}



.online-sub-info {

    flex: 1;

    min-width: 0;

    margin-right: 12px;

}



.online-sub-lang-row {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 2px;

}



.online-sub-lang {

    font-size: 13px;

    font-weight: 700;

    color: #fff;

}



.online-sub-badge {

    font-size: 10px;

    padding: 1px 6px;

    background: rgba(139, 92, 246, 0.15);

    border: 1px solid rgba(139, 92, 246, 0.3);

    color: var(--violet-glow);

    border-radius: 4px;

    font-weight: 600;

}



.online-sub-filename {

    font-size: 11px;

    color: var(--text-muted);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.online-sub-stats {

    font-size: 10px;

    color: var(--text-dim);

    margin-top: 2px;

}



.btn-apply-sub {

    padding: 6px 14px;

    background: var(--gradient-brand);

    border: none;

    border-radius: var(--r-sm);

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition: all var(--t-fast);

    flex-shrink: 0;

}



.btn-apply-sub:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 14px rgba(255, 46, 85, 0.45);

}



/* ==========================================================================

   💰 PHASE 2: AD MONETIZATION & SPONSOR ENGINE STYLES

   ========================================================================== */



/* 1. CINEMA PRE-ROLL OVERLAY (Inside Player Stage) */

.cinema-preroll-overlay {

    position: absolute;

    inset: 0;

    z-index: 85;

    background: radial-gradient(circle at center, rgba(18, 20, 32, 0.94) 0%, rgba(8, 9, 14, 0.98) 100%);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    animation: fadeInOverlay 0.25s ease-out;

}



@keyframes fadeInOverlay {

    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}



.preroll-card {

    width: 100%;

    max-width: 560px;

    background: rgba(22, 24, 38, 0.85);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: var(--r-lg);

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 46, 85, 0.15);

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.preroll-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(255, 255, 255, 0.02);

}



.preroll-sponsor-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    color: #ffd166;

}



.preroll-pulse {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #ff2e55;

    box-shadow: 0 0 10px #ff2e55;

    animation: pulseDot 1.4s infinite;

}



@keyframes pulseDot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }

}



.preroll-countdown-box {

    display: flex;

    align-items: center;

    gap: 12px;

}



.preroll-timer-text {

    font-size: 13px;

    font-weight: 600;

    color: var(--text-muted);

}



.preroll-skip-btn {

    padding: 7px 16px;

    border-radius: var(--r-full);

    font-size: 12px;

    font-weight: 700;

    border: none;

    cursor: not-allowed;

    background: rgba(255, 255, 255, 0.08);

    color: var(--text-muted);

    transition: all 0.25s ease;

}



.preroll-skip-btn.can-skip {

    cursor: pointer;

    background: var(--gradient-brand);

    color: #fff;

    box-shadow: 0 4px 16px rgba(255, 46, 85, 0.5);

}



.preroll-skip-btn.can-skip:hover {

    transform: translateY(-1px) scale(1.02);

}



.preroll-ad-body {

    padding: 24px 20px;

}



.preroll-spotlight {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 18px;

    background: rgba(18, 20, 28, 0.95);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--r-md);

}



.preroll-icon {

    font-size: 38px;

    flex-shrink: 0;

}



.preroll-info {

    flex: 1;

}



.preroll-ad-title {

    font-size: 16px;

    font-weight: 700;

    color: #fff;

    margin-bottom: 4px;

}



.preroll-ad-desc {

    font-size: 12px;

    color: var(--text-muted);

    line-height: 1.45;

    margin-bottom: 12px;

}



.preroll-ad-cta {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 14px;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: var(--r-sm);

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.2s ease;

}



.preroll-ad-cta:hover {

    background: rgba(255, 255, 255, 0.2);

    border-color: #fff;

}



.preroll-bottom-bar {

    padding: 12px 20px 16px;

    background: rgba(0, 0, 0, 0.25);

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.preroll-progress-track {

    width: 100%;

    height: 4px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 2px;

    overflow: hidden;

}



.preroll-progress-bar {

    width: 0%;

    height: 100%;

    background: var(--gradient-brand);

    border-radius: 2px;

    transition: width 0.1s linear;

}



.preroll-footer-note {

    font-size: 11px;

    color: var(--text-dim);

    text-align: center;

}



/* 2. IN-FEED NATIVE BANNER SLOT */

.in-feed-ad-banner {

    margin: 28px 0;

    padding: 18px 24px;

    background: rgba(16, 18, 25, 0.95);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--r-md);

    position: relative;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

}



.ad-pill-badge {

    position: absolute;

    top: -9px;

    left: 20px;

    padding: 2px 10px;

    background: #1e2030;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: var(--r-full);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--text-dim);

    letter-spacing: 0.5px;

}



.ad-banner-mock {

    display: flex;

    align-items: center;

    gap: 16px;

}



.ad-banner-icon {

    font-size: 28px;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255, 46, 85, 0.15);

    border-radius: var(--r-md);

    flex-shrink: 0;

}



.ad-banner-text {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.ad-banner-text strong {

    font-size: 15px;

    color: #fff;

}



.ad-banner-text span {

    font-size: 12px;

    color: var(--text-muted);

}



.ad-banner-button {

    padding: 8px 18px;

    background: var(--gradient-brand);

    border-radius: var(--r-sm);

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    flex-shrink: 0;

    transition: all 0.2s ease;

}



.ad-banner-button:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 14px rgba(255, 46, 85, 0.4);

}



/* 3. CINEMA EXIT INTERSTITIAL MODAL */

.exit-interstitial-modal {

    position: fixed;

    inset: 0;

    z-index: 1200;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 16px;

    animation: fadeInOverlay 0.2s ease-out;

}



.exit-interstitial-modal.active {

    display: flex;

}



/* Ensure inactive modals never capture clicks or block search */

.player-modal:not(.active),

.player-modal:not(.active) *,

.detail-modal:not(.active),

.detail-modal:not(.active) *,

.exit-interstitial-modal:not(.active),

.exit-interstitial-modal:not(.active) *,

.shortcuts-modal:not(.active),

.shortcuts-modal:not(.active) *,

.online-subs-modal:not(.active),

.online-subs-modal:not(.active) * {

    pointer-events: none !important;

}



.player-modal:not(.active),

.detail-modal:not(.active),

.exit-interstitial-modal:not(.active),

.shortcuts-modal:not(.active),

.online-subs-modal:not(.active) {

    display: none !important;

    visibility: hidden !important;

}



.player-modal:not(.active) .video-stage {

    position: static !important;

    z-index: auto !important;

}



.interstitial-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.92);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

}



.interstitial-card {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 480px;

    background: #111319;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: var(--r-lg);

    padding: 28px 24px;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(229, 9, 20, 0.15);

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.interstitial-close {

    position: absolute;

    top: 14px;

    right: 14px;

}



.interstitial-badge {

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: #a78bfa;

}



.interstitial-title {

    font-size: 20px;

    font-weight: 800;

    color: #fff;

    margin-top: -8px;

}



.interstitial-desc {

    font-size: 13px;

    color: var(--text-muted);

    line-height: 1.5;

    margin-top: -10px;

}



.interstitial-mock-box {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--r-md);

}



.interstitial-mock-icon {

    font-size: 30px;

}



.interstitial-mock-details h4 {

    font-size: 14px;

    color: #fff;

    font-weight: 700;

    margin-bottom: 3px;

}



.interstitial-mock-details p {

    font-size: 11px;

    color: var(--text-dim);

    line-height: 1.4;

}



/* 4. ADSTERRA SOCIAL BAR (Floating Pill at bottom-right) */

.adsterra-social-bar {

    position: fixed;

    bottom: 24px;

    right: 24px;

    z-index: 950;

    background: rgba(18, 20, 32, 0.92);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border: 1px solid rgba(139, 92, 246, 0.4);

    border-radius: var(--r-full);

    padding: 8px 16px 8px 12px;

    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(139, 92, 246, 0.25);

    display: flex;

    align-items: center;

    gap: 12px;

    animation: slideUpSocialBar 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



@keyframes slideUpSocialBar {

    from {
        transform: translateY(60px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }

}



.adsterra-social-bar:hover {

    transform: translateY(-2px);

    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 28px rgba(139, 92, 246, 0.4);

}



.social-bar-close {

    background: none;

    border: none;

    color: var(--text-dim);

    font-size: 12px;

    cursor: pointer;

    padding: 4px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: color 0.15s ease;

}



.social-bar-close:hover {

    color: #fff;

}



.social-bar-content {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

}



.social-bar-icon-wrap {

    position: relative;

    width: 32px;

    height: 32px;

    background: rgba(255, 46, 85, 0.18);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.social-bar-pulse {

    position: absolute;

    inset: -3px;

    border-radius: 50%;

    border: 1.5px solid #ff2e55;

    animation: ripplePulse 1.6s infinite;

}



@keyframes ripplePulse {

    0% {
        transform: scale(0.9);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }

}



.social-bar-emoji {

    font-size: 16px;

}



.social-bar-text {

    display: flex;

    flex-direction: column;

    gap: 1px;

}



.social-bar-headline {

    font-size: 13px;

    font-weight: 700;

    color: #fff;

}



.social-bar-sub {

    font-size: 10px;

    color: var(--text-muted);

}



.social-bar-action {

    padding: 4px 10px;

    background: var(--gradient-brand);

    border-radius: var(--r-full);

    font-size: 11px;

    font-weight: 700;

    color: #fff;

    margin-left: 4px;

}



/* Mobile responsive adjustments */

@media (max-width: 640px) {

    .adsterra-social-bar {

        left: 12px;

        right: 12px;

        bottom: 16px;

        border-radius: var(--r-md);

        justify-content: space-between;

    }

    .ad-banner-mock {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }

    .ad-banner-button {

        width: 100%;

        text-align: center;

    }

    .preroll-card {

        max-width: 100%;

    }

    .preroll-spotlight {

        flex-direction: column;

        text-align: center;

    }

}



/* ===== CINEMA VIDEO BUFFERING SPINNER ===== */

.video-buffering-spinner {

    position: absolute;

    inset: 0;

    margin: auto;

    width: fit-content;

    height: fit-content;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    z-index: 10;

    pointer-events: none;

    background: rgba(10, 14, 26, 0.85);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 16px;

    padding: 16px 24px;

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);

    transition: opacity 0.2s ease;

}

.video-spinner-ring {

    width: 38px;

    height: 38px;

    border: 3px solid rgba(229, 9, 20, 0.2);

    border-top-color: #e50914;

    border-radius: 50%;

    animation: videoSpinnerSpin 0.75s linear infinite;

}

@keyframes videoSpinnerSpin {

    to {
        transform: rotate(360deg);
    }

}

.video-buffering-spinner span {

    font-size: 13px;

    font-weight: 600;

    color: #fff;

    letter-spacing: 0.3px;

}



/* ==========================================================================

   HERO AUTO-UPDATING SLIDER NAVIGATION & RESPONSIVE CONTROLS

   ========================================================================== */

.hero-banner {

    position: relative;

    user-select: none;

    -webkit-user-select: none;

}



.hero-nav-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: rgba(10, 14, 26, 0.65);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 8;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

    opacity: 0.7;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

}



.hero-nav-arrow:hover {

    opacity: 1;

    background: rgba(229, 9, 20, 0.85);

    border-color: rgba(255, 255, 255, 0.4);

    transform: translateY(-50%) scale(1.1);

    box-shadow: 0 0 24px rgba(229, 9, 20, 0.6);

}



.hero-nav-arrow.prev {

    left: 20px;

}



.hero-nav-arrow.next {

    right: 20px;

}



@media (max-width: 768px) {

    .hero-nav-arrow {

        width: 38px;

        height: 38px;

        opacity: 0.85;

    }

    .hero-nav-arrow.prev {
        left: 10px;
    }

    .hero-nav-arrow.next {
        right: 10px;
    }

}



/* ==========================================================================

   HORIZONTAL SCROLLABLE SHELVES (DESKTOP & MOBILE STREAMING ROWS)

   ========================================================================== */

.shelf-row-wrapper {

    margin: 28px 0 10px;

    position: relative;

}



.shelf-row-wrapper .section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;

    padding: 0 4px;

}



.shelf-count-badge {

    display: inline-flex;

    align-items: center;

    font-size: 11px;

    font-weight: 700;

    color: var(--text-muted);

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    padding: 2px 8px;

    margin-left: 8px;

    letter-spacing: 0.2px;

}



.shelf-controls {

    display: flex;

    align-items: center;

    gap: 8px;

}



.shelf-scroll-btn {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: var(--text-primary);

    font-size: 18px;

    font-weight: 700;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

    user-select: none;

}



.shelf-scroll-btn:hover {

    background: var(--brand-red, #e50914);

    color: #fff;

    border-color: transparent;

    transform: scale(1.08);

    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.4);

}



.horizontal-scroll-row {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    overflow-x: auto;

    overflow-y: hidden;

    gap: 16px;

    padding: 8px 4px 18px;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;

    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;

}



.horizontal-scroll-row::-webkit-scrollbar {

    height: 6px;

}



.horizontal-scroll-row::-webkit-scrollbar-track {

    background: transparent;

}



.horizontal-scroll-row::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.12);

    border-radius: 10px;

}



.horizontal-scroll-row::-webkit-scrollbar-thumb:hover {

    background: rgba(229, 9, 20, 0.5);

}



/* Row media card sizing */

.horizontal-scroll-row .media-card {

    flex: 0 0 172px;

    width: 172px;

    min-width: 172px;

    border-radius: 14px;

    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;

}



.horizontal-scroll-row .media-card:hover {

    transform: translateY(-6px) scale(1.03);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);

    z-index: 3;

}



@media (max-width: 768px) {

    .horizontal-scroll-row {

        gap: 12px;

        scroll-snap-type: x mandatory;

        padding-bottom: 12px;

        scrollbar-width: none;

    }

    .horizontal-scroll-row::-webkit-scrollbar {

        display: none;

    }

    .horizontal-scroll-row .media-card {

        flex: 0 0 136px;

        width: 136px;

        min-width: 136px;

        scroll-snap-align: start;

    }

}



/* ==========================================================================

   AUDIO DUB BADGES & DEDUPLICATION VISUALS

   ========================================================================== */

.card-badge-audio {

    display: inline-block;

    margin-left: 6px;

    padding: 1px 6px;

    border-radius: 4px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    background: rgba(139, 92, 246, 0.25);

    color: #c4b5fd;

    border: 1px solid rgba(139, 92, 246, 0.4);

    vertical-align: middle;

}



/* ==========================================================================

   INFINITE SCROLL & CATALOG LOAD MORE

   ========================================================================== */

.catalog-load-more-wrap {

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 28px 0 20px;

}



.btn-load-more {

    padding: 12px 32px;

    font-size: 14px;

    font-weight: 700;

    border-radius: 30px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #fff;

    cursor: pointer;

    transition: all 0.2s ease;

}



.btn-load-more:hover {

    background: var(--brand-red, #e50914);

    border-color: transparent;

    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.4);

    transform: translateY(-2px);

}



.infinite-sentinel {

    height: 10px;

    width: 100%;

    margin-top: 20px;

    pointer-events: none;

}







/* ===== FIREFOX PERFORMANCE OVERRIDES =======================================

   Firefox's compositor struggles with multiple backdrop-filter: blur() layers

   inside the video player. These rules replace blurs with solid backgrounds.

   ========================================================================== */

/* ===== FIREFOX PERFORMANCE OVERRIDES =======================================

   Firefox compositor struggles with multiple backdrop-filter: blur() layers.

   These rules replace blurs with high-contrast sleek solid dark backgrounds.

   ========================================================================== */

@supports (-moz-appearance: none) {

    *,
    *::before,
    *::after {

        /* Prevent Firefox backdrop filter lag */

    }

    .navbar {

        backdrop-filter: none !important;

        -webkit-backdrop-filter: none !important;

        background: rgba(8, 11, 20, 0.98) !important;

    }

    .player-modal-backdrop {

        backdrop-filter: none !important;

        background: rgba(0, 0, 0, 0.95) !important;

    }

    .player-modal-content {

        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95) !important;

    }

    .player-unified-settings-menu {

        backdrop-filter: none !important;

        background: rgba(10, 14, 24, 0.99) !important;

    }

    .in-player-server-dropdown {

        backdrop-filter: none !important;

        background: rgba(6, 10, 20, 0.99) !important;

    }

    .in-player-top-bar {

        backdrop-filter: none !important;

        background: linear-gradient(180deg, rgba(2, 4, 8, 0.92) 0%, transparent 100%) !important;

    }

    .search-dropdown {

        backdrop-filter: none !important;

        background: rgba(10, 14, 26, 0.98) !important;

    }

    .detail-modal-backdrop {

        backdrop-filter: none !important;

        background: rgba(0, 0, 0, 0.95) !important;

    }

    .btn-glass {

        backdrop-filter: none !important;

        background: rgba(255, 255, 255, 0.1) !important;

    }

    .episodes-drawer {

        backdrop-filter: none !important;

        background: rgba(8, 12, 22, 0.99) !important;

    }

}

/* ==========================================================================
   NATIVE MOBILE BOTTOM NAVIGATION & APK SUGGESTION BANNER
   ========================================================================== */
.mobile-app-bottom-nav {
    display: none;
}

.mobile-apk-banner {
    display: none;
}

@media (max-width: 768px) {
    /* Give main content comfortable breathing space above bottom nav */
    .main-content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 12px)) !important;
    }

    /* Fixed Native Mobile Bottom Navigation */
    .mobile-app-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(9, 11, 18, 0.94);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 999;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
    }

    .mob-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: #8E9BAE;
        gap: 3px;
        padding: 6px 0;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.15s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-nav-item span {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    .mob-nav-item.active {
        color: #E50914;
    }

    .mob-nav-item.active svg {
        stroke: #E50914;
    }

    .mob-nav-item:active {
        transform: scale(0.92);
    }

    /* Floating Mobile APK Suggestion Banner */
    .mobile-apk-banner {
        display: flex;
        position: fixed;
        bottom: calc(66px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        background: rgba(14, 18, 30, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(229, 9, 20, 0.35);
        border-radius: 12px;
        padding: 10px 12px;
        align-items: center;
        gap: 10px;
        z-index: 998;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(229, 9, 20, 0.18);
        animation: slideUpBanner 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes slideUpBanner {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mobile-apk-banner-close {
        position: absolute;
        top: 6px;
        right: 8px;
        background: none;
        border: none;
        color: #64748B;
        font-size: 13px;
        padding: 4px;
        cursor: pointer;
        line-height: 1;
    }

    .mobile-apk-banner-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(229, 9, 20, 0.15);
        border: 1px solid rgba(229, 9, 20, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mobile-apk-banner-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-right: 14px;
    }

    .mobile-apk-banner-text strong {
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 700;
    }

    .mobile-apk-banner-text span {
        color: #94A3B8;
        font-size: 10px;
        line-height: 1.3;
    }

    .mobile-apk-banner-btn {
        background: #E50914;
        color: #FFFFFF;
        font-size: 11px;
        font-weight: 800;
        padding: 7px 12px;
        border-radius: 6px;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(229, 9, 20, 0.4);
    }

    /* Mobile Web App Touch & Shelf Aesthetics */
    .hero-banner {
        min-height: 360px !important;
        cursor: grab;
    }

    .hero-banner:active {
        cursor: grabbing;
    }


    .horizontal-scroll-row {
        scroll-padding-left: 14px;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM NATIVE-APP MOBILE STREAMING UI & CINEMA PLAYER (v6.0)
   Designed specifically for mobile viewports: 16:9 video deck, clean HUD,
   zero clutter, native app bottom deck, high-speed streaming layout.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    body {
        padding-bottom: 74px !important;
    }

    /* Top Navbar */
    .navbar {
        height: 56px !important;
        padding: 0 12px !important;
    }
    .nav-container {
        gap: 8px !important;
    }
    .nav-left {
        gap: 8px !important;
    }
    .nav-app-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 20px !important;
    }
    .nav-search-wrap, .search-container {
        flex: 1 !important;
        max-width: 150px !important;
        min-width: 0 !important;
    }
    .search-input {
        width: 100% !important;
        font-size: 12px !important;
        padding: 6px 10px 6px 30px !important;
    }

    /* Bottom Nav Bar */
    .mobile-app-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 62px !important;
        background: rgba(10, 13, 20, 0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        z-index: 1000 !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding-bottom: env(safe-area-inset-bottom, 4px) !important;
    }

    .mobile-apk-banner {
        bottom: 68px !important;
        margin: 0 10px !important;
        border-radius: 12px !important;
    }

    /* CINEMA PLAYER: FULLSCREEN NATIVE APP LAYOUT */
    #playerModal.player-modal {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 99999 !important;
        background: #06080d !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .player-modal-backdrop {
        display: none !important;
    }

    .player-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #06080d !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Video Stage: Fixed 16:9 at top in Portrait */
    .video-stage {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        max-height: 38vh !important;
        background: #000 !important;
        position: relative !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    #cinemaVideo {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        background: #000 !important;
    }

    #cinemaIframe {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        inset: 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }

    /* In-Player Top HUD */
    .in-player-top-bar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 48px !important;
        z-index: 20 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 10px !important;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%) !important;
        border: none !important;
        pointer-events: auto !important;
    }

    .in-player-title-row {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .in-player-title-row .in-player-hud-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        flex-shrink: 0 !important;
    }
    .in-player-title-row .in-player-hud-btn svg {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        stroke: #fff !important;
    }

    .in-player-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #fff !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 130px !important;
        line-height: 1.2 !important;
    }

    .in-player-top-actions {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
    }

    #inPlayerDubBadge,
    #inPlayerEpisodesBtn,
    #playerNextEpBtn,
    .in-player-top-actions button[title*="Mini"],
    .in-player-top-actions button[title*="Dock"] {
        display: none !important;
    }

    #inPlayerQualityBadge {
        padding: 4px 7px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    #inPlayerServerBadge {
        padding: 4px 8px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        border-radius: 6px !important;
        background: #e50914 !important;
        color: #fff !important;
        border: none !important;
    }

    .btn-close-inplayer {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
    }

    /* Bottom In-Video Controls */
    .cinema-player-controls {
        padding: 4px 10px !important;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%) !important;
    }

    .player-timeline-wrap {
        height: 18px !important;
        padding: 6px 0 !important;
        margin-bottom: 2px !important;
    }

    .player-progress-bar {
        height: 3.5px !important;
        border-radius: 2px !important;
    }

    .player-controls-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .player-time-display {
        font-size: 11px !important;
        font-weight: 600 !important;
        gap: 3px !important;
    }

    .player-volume-wrap,
    #bottomEpisodesBtn,
    #bottomNextEpBtn,
    .controls-right button[title*="Mini"] {
        display: none !important;
    }

    /* LOWER DECK: NATIVE STREAMING APP DETAILS VIEW */
    .player-cinema-footer {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 14px 90px 14px !important;
        background: #090b12 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .player-meta-strip {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
    }

    .meta-strip-left {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .meta-stream-title {
        font-size: 19px !important;
        font-weight: 800 !important;
        color: #fff !important;
        letter-spacing: -0.3px !important;
        line-height: 1.25 !important;
    }

    .meta-stream-badge {
        display: inline-block !important;
        font-size: 10px !important;
        padding: 2px 6px !important;
        font-weight: 800 !important;
        border-radius: 4px !important;
        background: rgba(229, 9, 20, 0.2) !important;
        color: #ff3b49 !important;
        border: 1px solid rgba(229, 9, 20, 0.4) !important;
        margin-right: 6px !important;
    }

    .meta-stream-sub {
        font-size: 12px !important;
        color: #8c93a8 !important;
        font-weight: 500 !important;
    }

    .meta-strip-right {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .meta-strip-right .btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 20px !important;
        background: #141824 !important;
        color: #e2e8f0 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .meta-strip-right button[onclick*="openShortcutsModal"],
    #playerCodecStat {
        display: none !important;
    }

    /* SERVER SELECTOR: 1-Tap Fast Pills */
    .player-server-strip {
        background: #111420 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
        padding: 10px 12px !important;
        margin: 0 !important;
    }

    .server-strip-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }

    .server-strip-label {
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #7e879f !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
    }

    .server-strip-pills {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        width: 100% !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .server-strip-pills::-webkit-scrollbar { display: none; }

    .server-pill-tab {
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        background: #191e2e !important;
        color: #c4ccdf !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        white-space: nowrap !important;
    }

    .server-pill-tab.active {
        background: #e50914 !important;
        color: #fff !important;
        border-color: #e50914 !important;
        box-shadow: 0 3px 12px rgba(229, 9, 20, 0.45) !important;
    }

    /* TV SERIES EPISODES RIBBON */
    .player-series-ribbon {
        background: #111420 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
        padding: 12px !important;
    }

    .series-ribbon-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 10px !important;
    }

    .ribbon-title {
        font-size: 12px !important;
        font-weight: 800 !important;
        color: #7e879f !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .ribbon-episodes {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .ribbon-episodes::-webkit-scrollbar { display: none; }

    .ribbon-ep-btn {
        flex-shrink: 0 !important;
        min-width: 58px !important;
        height: 38px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        background: #191e2e !important;
        color: #c4ccdf !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ribbon-ep-btn.active {
        background: #e50914 !important;
        color: #fff !important;
        border-color: #e50914 !important;
    }

    .player-cinema-footer > button,
    .player-cinema-footer > .btn-lg,
    .player-cinema-footer [style*="border-radius: 9999px"],
    .player-cinema-footer [style*="border-radius: 999px"] {
        display: none !important;
    }

    .video-buffering-spinner {
        padding: 16px 20px !important;
        background: rgba(8, 10, 16, 0.88) !important;
        backdrop-filter: blur(12px) !important;
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
}

/* MOBILE LANDSCAPE: 100% IMMERSIVE FULLSCREEN VIDEO */
@media (max-width: 950px) and (orientation: landscape) {
    #playerModal.player-modal {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 99999 !important;
        background: #000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .player-modal-content {
        width: 100vw !important;
        height: 100vh !important;
        flex-direction: column !important;
        background: #000 !important;
    }

    .video-stage {
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        aspect-ratio: unset !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1000 !important;
        border-radius: 0 !important;
    }

    .player-cinema-footer {
        display: none !important;
    }
}