@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

:root {
    --bg-color: #141414;
    --text-color: #ffffff;
    --accent-color: #e50914;
    --theme-accent-color: #e50914;
    --ambient-hero-glow: rgba(229, 9, 20, 0.35);
    --fyp-badge-color: #e50914;
    --modal-bg: #181818;
    --btn-bg: #333333;
    --btn-hover: #4d4d4d;
}

/* Capacitor Native Feel Tuning */
body.is-native-app {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.is-native-app input,
body.is-native-app textarea {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

html.is-native-app,
body.is-native-app {
    overscroll-behavior-y: none !important;
}

/* Hide all scrollbars and scroll indicators across the entire app when native or mobile touch */
html.is-native-app,
body.is-native-app,
.is-native-app,
.is-native-app *,
.is-native-app *::before,
.is-native-app *::after {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.is-native-app *::-webkit-scrollbar,
.is-native-app::-webkit-scrollbar,
html.is-native-app::-webkit-scrollbar,
body.is-native-app::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Ensure mobile native app and mobile devices NEVER show desktop sidebar even in landscape */
.is-native-app .tv-sidebar,
.is-native-app #tv-sidebar,
.is-mobile-device .tv-sidebar,
.is-mobile-device #tv-sidebar,
.is-native-app .hero-sidebar-show-btn,
.is-native-app #btn-hero-sidebar-show,
.is-mobile-device .hero-sidebar-show-btn,
.is-mobile-device #btn-hero-sidebar-show {
    display: none !important;
}

.is-native-app .main-content,
.is-mobile-device .main-content {
    margin-left: 0 !important;
}

.is-native-app .player-embed-pill,
.is-native-app .player-source-dock-sep,
.is-native-app #player-embed-servers-btn,
.is-mobile-device .player-embed-pill,
.is-mobile-device .player-source-dock-sep,
.is-mobile-device #player-embed-servers-btn {
    display: none !important;
}

@media (max-width: 768px),
(pointer: coarse) {
    #player-back-btn {
        display: none !important;
    }

    #btn-player-miniplayer {
        display: inline-flex !important;
    }
}

/* Offline mode styles */
body.app-offline {
    --hero-solid-color: #0d0d0d;
}

#offline-banner a {
    color: #ffd700 !important;
    text-decoration: underline !important;
}

.app-offline #hero-backdrop {
    opacity: 0.3;
}

.app-offline .hero-banner::after {
    content: 'OFFLINE';
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(229, 9, 20, 0.9);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    z-index: 10;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Universal Arrow-Key Cursor Hiding (TV & Remote Experience) */
body.hide-cursor,
body.hide-cursor * {
    cursor: none !important;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--hero-solid-color, #141414);
    color: white;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    background-image: linear-gradient(to bottom, var(--hero-solid-color, #141414) 0%, #141414 600px);
    background-attachment: fixed;
    transition: background-color 0.8s ease, background-image 0.8s ease;
}

/* Global Minimalist Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;
}

.logo {
    color: var(--accent-color);
    margin: 0;
    font-size: 28px;
    font-weight: 700;
}

.search-container {
    position: relative;
}

.search-container input {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #333;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    width: 300px;
    font-size: 16px;
    transition: border-color 0.2s;
}

.search-container input:focus {
    outline: none;
    border-color: #e50914;
}

.search-history-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 380px;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    z-index: 200;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    animation: fadeInDown 0.15s ease;
    padding: 8px;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

.history-header {
    padding: 12px 14px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #eee;
    transition: background 0.2s ease, border-radius 0.2s ease;
    border-radius: 6px;
    margin-bottom: 2px;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.history-item .history-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    flex-shrink: 0;
}

.history-item .history-icon svg {
    width: 18px;
    height: 18px;
}

.history-item .history-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item .history-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    flex-shrink: 0;
    padding: 6px;
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
    opacity: 0;
}

.history-item .history-remove svg {
    width: 16px;
    height: 16px;
}

.history-item:hover .history-remove {
    opacity: 1;
}

.history-item .history-remove:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.history-clear {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s ease;
    text-align: center;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.history-clear:hover {
    color: #fff;
}



#app-container {
    padding: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    padding: 10px 10px 80px 10px;
    overflow-x: hidden;
    scrollbar-width: none;
    /* Firefox */
}

.grid-container::-webkit-scrollbar {
    display: none;
}

.movie-card {
    cursor: pointer;
    align-self: start;
    position: relative;
    z-index: 1;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.movie-card:hover,
.movie-card.focused {
    transform: scale(1.04);
    z-index: 99;
}

.movie-card.focused {
    outline: 2px solid #e50914 !important;
    outline-offset: 2px;
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.6) !important;
}

.movie-card-poster-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    background: #181818;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.movie-card-poster-wrap .poster-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    z-index: 1;
    pointer-events: none;
}

.movie-card-poster-wrap img.movie-poster-img,
.movie-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: opacity 0.25s ease-in-out;
}

.movie-card-poster-wrap img.movie-poster-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.movie-card-poster-wrap img.movie-poster-img.is-loading {
    opacity: 0;
}

.movie-card-poster-wrap .poster-fallback-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #222 0%, #121212 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    z-index: 3;
}

.movie-card-poster-wrap .poster-fallback-placeholder svg {
    width: 32px;
    height: 32px;
    stroke: #666;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.movie-card-poster-wrap .poster-fallback-placeholder span {
    font-size: 11px;
    color: #999;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.movie-card h4 {
    margin: 8px 0 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--modal-bg);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 8px;
    overflow-y: auto;
    position: relative;
    padding: 30px;
    box-sizing: border-box;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

.modal-header {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.modal-header img {
    width: 150px;
    border-radius: 8px;
}

.modal-info h2 {
    margin: 0 0 10px;
}

.modal-info p {
    color: #aaa;
    font-size: 14px;
    line-height: 1.5;
}

/* Netflix Player Styles */
.netflix-player-container {
    width: 100vw;
    height: 100vh;
    background: #000;
    border-radius: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.netflix-player-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    z-index: 9999;
    margin: 0;
}

#video-player {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    /* Let the container handle clicks for play/pause */
}

/* Spinner */
.netflix-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(229, 9, 20, 0.3);
    border-top: 4px solid #E50914;
    border-radius: 50%;
    animation: netflix-spin 1s linear infinite;
}

@keyframes netflix-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Controls Base */
.player-controls {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    /* Fixes padding overflow */
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 10;
}

.netflix-player-container.idle .player-controls {
    opacity: 0;
    visibility: hidden;
}

/* Top Bar */
.player-top-bar {
    top: 0;
    left: 0;
    padding: 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    display: flex;
    align-items: flex-start;
}

/* Center Overlay */
.player-center-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    width: auto;
    z-index: 12 !important;
    pointer-events: auto;
}

#netflix-player-container.is-loading .player-center-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.center-control-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid transparent;
    color: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.center-control-btn.circle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.center-control-btn.play-pause-massive {
    width: 90px;
    height: 90px;
    border: 2px solid white;
    background: rgba(0, 0, 0, 0.3);
}

.center-control-btn:hover {
    background: rgba(229, 9, 20, 0.2);
    border-color: #E50914;
    transform: scale(1.1);
}

.center-control-btn svg {
    width: 32px;
    height: 32px;
}

.play-pause-massive svg {
    width: 48px;
    height: 48px;
}

.center-skip-text {
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

/* Bottom Bar */
.player-bottom-bar {
    bottom: 0;
    left: 0;
    padding: 0 20px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Progress Bar */
.player-progress-container {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0);
    cursor: pointer;
    border-radius: 2px;
    transition: height 0.1s ease;
}

.player-progress-container:hover {
    height: 8px;
}

.player-progress-loaded {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    pointer-events: none;
}

.player-progress-current {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #E50914;
    border-radius: 2px;
    pointer-events: none;
    width: 0%;
}

.player-progress-scrubber {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    width: 14px;
    height: 14px;
    background: #E50914;
    border-radius: 50%;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.player-progress-container:hover .player-progress-scrubber {
    transform: translate(50%, -50%) scale(1.2);
}

.player-progress-hover {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.5);
    display: none;
    pointer-events: none;
    z-index: 5;
}

.progress-hover-box {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: #141414;
    border: 2px solid white;
    padding: 8px 12px;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-hover-box::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.player-progress-container:hover .player-progress-hover {
    display: block;
}

/* Controls Row */
.player-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.controls-left,
.controls-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.controls-center {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.control-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s, color 0.2s;
}

.control-btn svg {
    width: 28px;
    height: 28px;
}

.control-btn:hover {
    transform: scale(1.15);
}

/* Volume Hover Slider */
.volume-container {
    position: relative;
    display: flex;
    align-items: center;
}

.volume-slider-wrapper {
    width: 0;
    overflow: hidden;
    height: 24px;
    display: flex;
    align-items: center;
    transition: width 0.3s ease, margin-left 0.3s ease;
    opacity: 0;
}

.volume-container:hover .volume-slider-wrapper,
.volume-slider-wrapper.active {
    width: 80px;
    margin-left: 10px;
    opacity: 1;
}

.volume-slider-bg {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.volume-slider-current {
    height: 100%;
    background: #E50914;
    border-radius: 2px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.volume-slider-current::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #E50914;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* =========================================
   SUBTITLES CC MENU & MODALS
========================================= */
.cc-menu-popup {
    position: absolute !important;
    top: auto !important;
    bottom: 98px !important;
    /* Sits cleanly right above the scrubber with ample clearance */
    right: 20px !important;
    background: rgba(22, 22, 26, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 250px;
    max-height: 52vh;
    /* Half of screen height */
    overflow: hidden;
    padding: 8px 0;
    color: white;
    z-index: 150 !important;
    display: none;
    flex-direction: column;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(16px);
}

.cc-menu-popup.open {
    display: flex !important;
    animation: popupSlideUpFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes popupSlideUpFade {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

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

#player-cc-languages-list {
    max-height: 190px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

#player-cc-languages-list::-webkit-scrollbar,
.cc-menu-popup::-webkit-scrollbar,
.three-dot-popup::-webkit-scrollbar {
    width: 5px;
}

#player-cc-languages-list::-webkit-scrollbar-thumb,
.cc-menu-popup::-webkit-scrollbar-thumb,
.three-dot-popup::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.cc-menu-header {
    font-size: 14px;
    font-weight: 600;
    padding: 5px 20px 10px 20px;
    color: #a1a1aa;
}

.cc-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 5px 0;
}

.cc-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
}

.cc-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cc-menu-item svg {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    opacity: 0.7;
}

.cc-menu-item.active {
    color: #E50914;
}

.cc-menu-item.active svg {
    opacity: 1;
}

/* Search Modal */
.cc-search-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: rgba(28, 28, 28, 0.98);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    z-index: 60;
    display: none;
    flex-direction: column;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-search-modal.open {
    display: flex;
    animation: modalPopCenter 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalPopCenter {
    0% {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.cc-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-search-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.cc-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
}

.cc-close-btn:hover {
    opacity: 1;
}

.cc-search-body,
.cc-settings-body {
    overflow-x: hidden;
    max-width: 100vw;
    padding: 20px;
}

.cc-search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.cc-search-box input {
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 10px;
    color: white;
    outline: none;
}

.cc-search-box input:focus {
    border-color: #E50914;
}

.cc-search-box button {
    background: #E50914;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0 15px;
    cursor: pointer;
    font-weight: 600;
}

.cc-search-box button:hover {
    background: #f40612;
}

.cc-search-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.cc-result-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cc-result-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cc-result-info {
    display: flex;
    flex-direction: column;
}

.cc-result-name {
    font-size: 14px;
    margin-bottom: 4px;
}

.cc-result-meta {
    font-size: 12px;
    color: #aaa;
}

/* Settings Menu */
.cc-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 16px;
}

.cc-setting-row label {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.cc-setting-row select {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    max-width: 190px;
    text-overflow: ellipsis;
    transition: border-color 0.2s, background 0.2s;
}

.cc-setting-row select:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.cc-setting-row select:focus {
    border-color: #e50914;
}

.cc-setting-row select option {
    background: #18181b;
    color: #ffffff;
    padding: 4px;
}

/* Subtitle Track Customization Variables */
:root {
    --cue-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --cue-font-size: 100%;
    --cue-size-multiplier: 1;
    --cue-color: #ffffff;
    --cue-bg: rgba(0, 0, 0, 0.8);
    --cue-window-bg: transparent;
}

/* Hide native HTML5 video default subtitle cues completely so only custom draggable overlay renders */
.netflix-video-element::cue,
video::cue {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    text-shadow: none !important;
    font-size: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

.netflix-video-element::-webkit-media-text-track-display,
video::-webkit-media-text-track-display {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.netflix-video-element::-webkit-media-text-track-container,
video::-webkit-media-text-track-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background-color: transparent !important;
}

/* Custom Draggable Subtitle Overlay (YouTube Style - Horizontally Centered, Vertically Draggable) */
.coco-subtitle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 12;
    overflow: hidden;
}

.coco-subtitle-box {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 28px;
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    text-align: center;
    max-width: 85vw;
    background-color: var(--cue-window-bg, transparent);
    padding: 2px 6px;
    border-radius: 6px;
    will-change: transform, bottom, top, left;
    transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1), top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When controls are active / not idle, float above bottom controls */
.netflix-player-container:not(.idle) .coco-subtitle-box:not(.user-positioned) {
    bottom: 115px;
    transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.netflix-player-container.idle .coco-subtitle-box:not(.user-positioned) {
    bottom: 28px;
    transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* User dragged active state */
.coco-subtitle-box.is-dragging {
    cursor: grabbing !important;
    transition: none !important;
    box-shadow: 0 0 0 1.5px rgba(229, 9, 20, 0.6), 0 8px 24px rgba(0, 0, 0, 0.6);
}

.coco-subtitle-box.user-positioned {
    transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.coco-subtitle-text {
    font-family: var(--cue-font-family, 'Helvetica Neue', Helvetica, Arial, sans-serif);
    font-size: calc(clamp(16px, 2.4vw, 32px) * var(--cue-size-multiplier, 1));
    color: var(--cue-color, #ffffff);
    background-color: var(--cue-bg, rgba(0, 0, 0, 0.8));
    padding: 4px 10px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.25px;
    display: inline-block;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 1px 1px 2px rgba(0, 0, 0, 0.9), -1px -1px 2px rgba(0, 0, 0, 0.9);
    animation: subCueFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.15s ease-out;
}

@keyframes subCueFadeIn {
    0% {
        opacity: 0;
        transform: translateY(3px) scale(0.98);
    }

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


/* Center Text */
.cw-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cw-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.cw-info-btn {
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.cw-info-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #fff;
    transform: scale(1.1);
}

#player-title {
    font-size: 18px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#player-episode-info {
    display: none !important;
}

.player-top-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    max-width: calc(100vw - 260px);
}

.player-top-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.player-top-ep-info {
    font-size: 12px;
    font-weight: 500;
    color: #b3b3b3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: 2px;
}

/* Episodes Side Panel Overlay */
.episodes-side-panel {
    position: absolute;
    top: 0;
    right: -350px;
    /* Hidden off-screen */
    width: 350px;
    height: 100%;
    background: rgba(20, 20, 20, 0.95);
    border-left: 1px solid #333;
    transition: right 0.3s ease;
    z-index: 50;
    display: flex;
    flex-direction: column;
}

.episodes-side-panel.open {
    right: 0;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #333;
}

.panel-header h3 {
    margin: 0;
    font-size: 18px;
    color: white;
}

.panel-close-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
}

.panel-close-btn:hover {
    color: white;
}

.panel-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

.panel-episode-item {
    display: flex;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    align-items: center;
    gap: 15px;
}

.panel-episode-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.panel-episode-item.active {
    background: rgba(229, 9, 20, 0.15);
    border-left: 3px solid #E50914;
}

.panel-episode-num {
    font-size: 24px;
    font-weight: 700;
    color: #555;
    min-width: 30px;
    text-align: right;
}

.panel-episode-item.active .panel-episode-num {
    color: #E50914;
}

.panel-episode-details h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: white;
}

/* Sources */
.sources-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.source-item {
    background: #222;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.source-item.selected-source {
    border-color: rgba(229, 9, 20, 0.6);
    background: rgba(229, 9, 20, 0.08);
}

.source-item.playing-source {
    border-color: rgba(40, 167, 69, 0.8);
    background: rgba(40, 167, 69, 0.12);
}

.source-item .playing-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #28a745;
    border-radius: 4px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.source-info strong {
    display: block;
    font-size: 16px;
    color: var(--accent-color);
}

.source-info span {
    font-size: 12px;
    color: #888;
    word-break: break-all;
}

.source-actions {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-raw {
    background: #007bff;
    color: white;
}

.btn-raw:hover {
    background: #0056b3;
}

.btn-proxied {
    background: #28a745;
    color: white;
}

.btn-proxied:hover {
    background: #1e7e34;
}

/* SSE Stream Segments CSS */
.segments-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.provider-segment {
    background: #18181b;
    border-radius: 8px;
    border: 1px solid #27272a;
    padding: 15px;
}

.provider-segment h4 {
    margin: 0 0 12px 0;
    color: #e50914;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top-color: #e50914;
    animation: spin 1s ease-in-out infinite;
}

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

/* TV Series UI (Netflix Style) */
.movie-modal-content {
    background: var(--modal-bg);
    margin: 3% auto;
    width: 90%;
    max-width: 1200px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    position: relative;
}



.episodes-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.episode-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    background-color: #1a1a1a;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
}

.episode-item:hover {
    background-color: #2a2a2a;
}

.episode-item.active {
    background-color: #2a2a2a;
    border-color: #e50914;
}

.episode-thumbnail-container {
    position: relative;
    width: 160px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background-color: #333;
}

.episode-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.episode-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.episode-item:hover .episode-play-overlay {
    opacity: 1;
}

.episode-play-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
}

.episode-play-icon svg {
    display: block;
    fill: #ffffff;
    pointer-events: none;
}

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

.episode-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.episode-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.episode-duration {
    font-size: 14px;
    color: #aaa;
}

.episode-desc {
    font-size: 14px;
    color: #888;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   APP LAYOUT & TV SIDEBAR
========================================= */
.app-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #141414;
}

.tv-sidebar {
    width: 72px;
    height: 100vh;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 75%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
    z-index: 1000;
    position: fixed;
    left: 0;
    top: 0;
    border-right: none;
    will-change: transform;
}

body.sidebar-hidden .tv-sidebar {
    transform: translateX(-100%);
    pointer-events: none;
}

.tv-sidebar:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 75%, transparent 100%);
    box-shadow: none;
}

/* Sidebar Top Section (Detached Collapse Button) */
.sidebar-top-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.sidebar-collapse-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: color 0.2s ease;
}

.sidebar-collapse-btn:hover {
    color: #ffffff;
}

.sidebar-collapse-btn:hover .sidebar-icon-disc {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.06);
}

.sidebar-collapse-btn.focused .sidebar-icon-disc,
.sidebar-collapse-btn:focus-visible .sidebar-icon-disc {
    background: rgba(229, 9, 20, 0.3);
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.6);
}

.sidebar-icons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 0 10px;
    margin-bottom: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 6px 4px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 10px;
    gap: 14px;
}

.sidebar-icon-disc {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
}

.sidebar-item svg,
.sidebar-collapse-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar-item span {
    display: none !important;
}

.sidebar-item:hover,
.sidebar-item.active {
    color: white;
}

.sidebar-item:hover .sidebar-icon-disc {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.sidebar-item.active .sidebar-icon-disc {
    background: rgba(229, 9, 20, 0.25);
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.5);
}

.sidebar-item.active {
    color: white;
}

/* MAIN CONTENT */
.main-content {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    margin-left: 72px;
    transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-hidden .main-content {
    margin-left: 0;
}

/* Hero Top-Left Show Sidebar Button */
.hero-sidebar-show-btn {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(16, 16, 22, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.85);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s,
        transform 0.25s cubic-bezier(0.2, 0, 0.1, 1),
        background 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
}

.hero-sidebar-show-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

body.sidebar-hidden .hero-sidebar-show-btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.hero-sidebar-show-btn:hover {
    background: rgba(28, 28, 38, 0.9);
    border-color: rgba(255, 255, 255, 0.45);
    transform: scale(1.08);
    box-shadow:
        inset 0 1.5px 3px rgba(255, 255, 255, 0.4),
        0 6px 20px rgba(0, 0, 0, 0.65);
}

.hero-sidebar-show-btn:hover svg {
    transform: scale(1.08);
}

.hero-sidebar-show-btn:active {
    transform: scale(0.95);
}

.hero-sidebar-show-btn.focused,
.hero-sidebar-show-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.8), 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Hero Top-Right New & Hot Button */
.hero-new-hot-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(16, 16, 22, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 20;
    transition: background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s cubic-bezier(0.2, 0, 0.1, 1),
        box-shadow 0.25s ease,
        color 0.25s ease;
    text-decoration: none;
    user-select: none;
}

.hero-new-hot-btn .hero-new-hot-icon {
    width: 18px;
    height: 18px;
    color: #ff3344;
    transition: transform 0.25s ease, color 0.25s ease;
}

.hero-new-hot-btn:hover {
    background: rgba(229, 9, 20, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    transform: translateY(-1px) scale(1.04);
    box-shadow:
        inset 0 1.5px 3px rgba(255, 255, 255, 0.4),
        0 6px 20px rgba(229, 9, 20, 0.5);
}

.hero-new-hot-btn:hover .hero-new-hot-icon {
    color: #ffffff;
    transform: scale(1.15) rotate(-6deg);
}

.hero-new-hot-btn:active {
    transform: scale(0.96);
}

.hero-new-hot-btn.focused,
.hero-new-hot-btn:focus-visible {
    border-color: #e50914;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.8), 0 4px 16px rgba(0, 0, 0, 0.5);
    outline: none;
}

@media (max-width: 768px) {
    .hero-new-hot-btn {
        top: 16px;
        right: 16px;
        height: 36px;
        padding: 0 14px;
        font-size: 12px;
        gap: 6px;
    }

    .hero-new-hot-btn .hero-new-hot-icon {
        width: 15px;
        height: 15px;
    }
}

.view-section {
    display: none;
    min-height: 100%;
}

.view-section.active {
    display: block;
}

/* =========================================
   HOME VIEW & HERO BANNER (Curved Bubbly Glass Effect)
========================================= */
.hero-banner {
    position: relative;
    height: clamp(600px, 86vh, 960px);
    min-height: 600px;
    width: calc(100% - 48px);
    max-width: 1840px;
    margin: 20px auto 36px auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 48px 58px 64px;
    box-sizing: border-box;
    overflow: hidden;
    background: #000000;
    border-radius: 48px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 2px 20px rgba(255, 255, 255, 0.15),
        inset 0 0 80px rgba(0, 0, 0, 0.70),
        0 20px 48px rgba(0, 0, 0, 0.90);
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.2, 0, 0.1, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.hero-banner:hover {
    transform: scale(1.008) !important;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.20),
        inset 0 2px 20px rgba(255, 255, 255, 0.20),
        inset 0 0 80px rgba(0, 0, 0, 0.70),
        0 0 20px rgba(255, 255, 255, 0.12),
        0 24px 56px rgba(0, 0, 0, 0.92) !important;
}

.hero-banner:focus,
.hero-banner.focused {
    outline: none !important;
    transform: scale(1.008) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        inset 0 2px 25px rgba(255, 255, 255, 0.28),
        inset 0 0 80px rgba(0, 0, 0, 0.70),
        0 0 32px rgba(255, 255, 255, 0.28),
        0 24px 56px rgba(0, 0, 0, 0.92) !important;
}

.hero-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    transform: none !important;
}

.hero-bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    border-radius: inherit;
    transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    pointer-events: none;
}


.hero-gradient,
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(circle at 65% 35%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(14, 14, 18, 0.85) 100%),
        linear-gradient(to top, rgba(14, 14, 18, 0.95) 0%, rgba(14, 14, 18, 0.5) 28%, transparent 60%),
        linear-gradient(to right, rgba(10, 10, 14, 0.92) 0%, rgba(10, 10, 14, 0.45) 45%, transparent 75%);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(255, 255, 255, 0.15),
        inset 2px 0 4px rgba(255, 255, 255, 0.18),
        inset -2px 0 4px rgba(255, 255, 255, 0.18);
    transition: background 0.8s ease;
}

.hero-content {
    position: relative;
    z-index: 20;
    max-width: 680px;
    margin-bottom: 0px;
    opacity: 1;
    transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-content.fade-blur-active {
    opacity: 0 !important;
    transform: translateY(6px);
    pointer-events: none;
}

.network-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    letter-spacing: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.network-badge img {
    height: 20px;
    object-fit: contain;
}

.hero-title-logo {
    max-width: 90%;
    max-height: 140px;
    margin-bottom: 20px;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7));
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 12px 0;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.hero-meta-plain {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}

.hero-meta-pill {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    letter-spacing: 0.5px;
}

/* Hero Nav Arrows Hover Zones */
.hero-nav-btn {
    position: absolute;
    top: 0;
    height: 100%;
    width: 12%;
    min-width: 60px;
    z-index: 15;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease, transform 0.4s cubic-bezier(0.2, 0, 0, 1), visibility 0.3s ease;
    border-radius: inherit;
}

.hero-nav-btn svg {
    width: 45px;
    height: 45px;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
}

.hero-nav-btn:hover {
    opacity: 1;
}

.hero-nav-btn:hover svg {
    transform: scale(1.15);
}

.hero-nav-prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 24px;
}

.hero-nav-prev:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
}

.hero-nav-next {
    right: 0;
    justify-content: flex-end;
    padding-right: 24px;
}

.hero-nav-next:hover {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
}

.top-10-badge {
    background: #E50914;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
}

.hero-description {
    font-size: 16.5px;
    line-height: 1.45;
    color: rgba(240, 240, 240, 0.9);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.8);
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    max-height: 48px;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s ease;
    user-select: none;
}

.hero-description:hover {
    color: #ffffff;
}

.hero-description.expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: 360px;
    overflow-y: visible;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.btn-hero {
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, box-shadow 0.2s;
    letter-spacing: 0.2px;
}

.btn-hero svg {
    width: 22px;
    height: 22px;
}

.btn-play {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25);
}

.btn-play:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(255, 255, 255, 0.4);
}

.btn-more {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.22), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.btn-more:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.35), 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Hero Elements Focused States (Clean white luminous highlights without red outline or zoom) */
.hero-nav-btn.focused,
.hero-nav-btn:focus {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

.hero-description.focused,
.hero-description:focus {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.btn-play.focused,
.btn-play:focus {
    outline: none !important;
    transform: none !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 20px rgba(255, 255, 255, 0.8) !important;
}

.btn-more.focused,
.btn-more:focus {
    outline: none !important;
    transform: none !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 20px rgba(255, 255, 255, 0.6) !important;
}

/* Hero Pagination */
.hero-pagination-wrapper {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 20;
}

.hero-pagination-track {
    display: flex;
    gap: 8px;
    height: 100%;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-pagination-dash {
    width: 22px;
    height: 4px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    flex-shrink: 0;
    transition: background 0.4s ease, width 0.4s ease, box-shadow 0.4s ease;
}

.hero-pagination-dash.active {
    background: #ffffff;
    width: 32px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
}

/* =========================================
   PLAYER EXTRA CONTROLS
========================================= */
/* Player time display */
.player-time-display {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    margin-left: 6px;
}

/* Gear button wrapper with quality label */
.gear-btn-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
}

.quality-label {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 8px;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 1px 3px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    pointer-events: none;
    line-height: 1;
    z-index: 2;
}

.quality-label.quality-auto {
    color: #ffffff !important;
}

.quality-label.quality-manual {
    color: #e50914 !important;
    /* Red color when selected manually! */
    border-color: rgba(229, 9, 20, 0.5) !important;
}

/* Three dot top-right button */
.three-dot-btn {
    position: absolute !important;
    top: 16px;
    right: 16px;
    z-index: 15;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
}

.three-dot-btn svg {
    width: 22px;
    height: 22px;
}

/* Three-dot popup menu */
.three-dot-popup {
    position: absolute;
    top: 60px;
    right: 16px;
    background: rgba(18, 18, 18, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 230px;
    padding: 8px 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(16px);
}

.three-dot-popup.open {
    display: flex !important;
}

/* Streaming Service Badge */
.service-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.service-badge img {
    height: 18px;
    object-fit: contain;
}

.service-badge-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Modal service badge */
.modal-service-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.modal-service-badge img {
    height: 18px;
    object-fit: contain;
}

/* =========================================
   CAROUSELS
========================================= */
.carousels-container {
    position: relative;
    z-index: 10;
    margin-top: 6px;
    padding-bottom: 50px;
}

.carousel-section {
    margin-bottom: 24px;
    position: relative;
    overflow: visible;
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

.carousel-section h2 {
    font-size: 20px;
    margin: 0 0 8px 0;
    color: #e5e5e5;
    padding-left: 28px;
    /* Align with hero banner frame */
    position: relative;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.carousel-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible !important;
    padding: 30px 28px 36px 28px;
    margin: -24px 0 -24px 0;
    scroll-behavior: smooth;
    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.carousel-row .carousel-card-container:first-of-type {
    transform-origin: left center !important;
}

.carousel-row .carousel-card-container:last-of-type {
    transform-origin: right center !important;
}

.carousel-row::-webkit-scrollbar {
    display: none;
}

.carousel-card-container {
    width: 178px;
    flex: 0 0 178px;
    height: 260px;
    flex-shrink: 0;
    cursor: pointer;
    transform-origin: center center;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.25s ease, outline 0.2s ease;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #181818;
}

.carousel-card-container:hover {
    transform: scale(1.045);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85);
    z-index: 20;
}

.carousel-card-container.focused {
    outline: 2px solid #e50914 !important;
    outline-offset: 2px;
    border-radius: 8px;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.6), 0 10px 25px rgba(0, 0, 0, 0.7) !important;
    z-index: 10;
}

.carousel-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #181818;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.carousel-poster.loaded {
    opacity: 1 !important;
}

/* Carousel Nav Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 100%;
    max-height: 240px;
    background: rgba(20, 20, 20, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    color: white;
    z-index: 20;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-section:hover .carousel-arrow {
    opacity: 1;
}

.carousel-arrow:hover {
    background: rgba(20, 20, 20, 0.8);
}

.carousel-arrow-prev {
    left: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.carousel-arrow-next {
    right: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.carousel-arrow.disabled {
    opacity: 0 !important;
    pointer-events: none;
}

/* =========================================
/* =========================================
   LIVE TV GUIDE STYLES - ISOLATED EPG SCROLL
========================================= */
body.live-tv-mode {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

body.live-tv-mode .main-content,
.main-content.live-tv-active-mode {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

#live-tv-view {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: none;
    flex-direction: column;
}

#live-tv-view.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

.live-tv-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100vh !important;
    width: 100% !important;
    background-color: #141414 !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Hero Section */
.live-tv-hero {
    display: none;
    flex-direction: row;
    height: 245px;
    min-height: 225px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, #181818, #101010);
    border-bottom: 1px solid #282828;
    padding: 16px 32px;
    gap: 24px;
    box-sizing: border-box;
    align-items: center;
    overflow: hidden;
}

.live-tv-hero.hero-active,
.live-tv-hero.hero-animating-in {
    display: flex !important;
}

.live-tv-hero.hero-animating-in {
    animation: liveTvHeroSlideDown 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes liveTvHeroSlideDown {
    0% {
        opacity: 0;
        max-height: 0;
        transform: translateY(-28px);
        padding-top: 0;
        padding-bottom: 0;
    }

    100% {
        opacity: 1;
        max-height: 320px;
        transform: translateY(0);
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

@media (max-width: 768px) {
    .live-tv-hero {
        height: auto !important;
        min-height: auto !important;
        flex-direction: column !important;
        padding: 0 0 10px 0 !important;
    }

    .live-tv-hero.hero-animating-in {
        animation: liveTvHeroSlideDownMobile 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes liveTvHeroSlideDownMobile {
        0% {
            opacity: 0;
            max-height: 0;
            transform: translateY(-20px);
        }

        100% {
            opacity: 1;
            max-height: 600px;
            transform: translateY(0);
        }
    }
}

.live-tv-mini-player-container {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

#live-tv-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Logo reveal backdrop — shown while stream loads */
#live-tv-logo-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 70%);
    opacity: 1;
    transition: opacity 0.6s ease;
    z-index: 5;
    pointer-events: none;
}

#live-tv-logo-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 30%,
            rgba(255, 255, 255, 0.03) 50%,
            transparent 70%);
    background-size: 200% 200%;
    animation: shimmerBg 2.5s ease-in-out infinite;
}

@keyframes shimmerBg {
    0% {
        background-position: 200% 200%;
    }

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

#live-tv-backdrop-img {
    max-width: 55%;
    max-height: 55%;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.5s ease;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.15));
    animation: logoPulse 2s ease-in-out infinite;
    z-index: 1;
    position: relative;
}

@keyframes logoPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.12));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.25));
        transform: scale(1.03);
    }
}


/* Custom PVR Controls */
.live-tv-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.45) 60%, transparent 100%);
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
    z-index: 15;
}

.live-tv-mini-player-container.user-active .live-tv-controls,
.live-tv-mini-player-container.user-active .live-tv-top-bar,
.live-tv-controls.active {
    opacity: 1;
    pointer-events: auto;
}

.live-tv-mini-player-container.user-active #live-tv-mini-center-overlay {
    opacity: 1;
    pointer-events: auto;
}

.live-tv-mini-player-container:not(.user-active) {
    cursor: none;
}

.live-tv-mini-player-container:not(.user-active) * {
    cursor: none !important;
}

.live-tv-progress-bar {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    margin: 8px 0 12px 0;
    cursor: pointer;
    transition: height 0.15s ease, background 0.15s ease;
}

/* Extra-Generous 38px Hitbox so clicking and dragging never misses */
.live-tv-progress-bar::before {
    content: '';
    position: absolute;
    top: -18px;
    bottom: -18px;
    left: 0;
    right: 0;
    z-index: 10;
    cursor: pointer;
}

.live-tv-progress-bar:hover,
.live-tv-progress-bar.is-dragging {
    height: 9px;
    background: rgba(255, 255, 255, 0.35);
}

.live-tv-progress-buffered {
    position: absolute;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    width: 0%;
    pointer-events: none;
    z-index: 2;
}

.live-tv-progress-played {
    position: absolute;
    height: 100%;
    background: #e50914;
    border-radius: 4px;
    width: 0%;
    pointer-events: none;
    z-index: 3;
}

.live-tv-progress-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 14px;
    height: 14px;
    background: #e50914;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    left: 0%;
    z-index: 5;
    pointer-events: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.live-tv-progress-bar:hover .live-tv-progress-thumb,
.live-tv-progress-bar.is-dragging .live-tv-progress-thumb {
    transform: translate(-50%, -50%) scale(1.35);
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.8), 0 0 0 2px #ffffff;
}

.live-tv-controls-bottom {
    display: flex;
    align-items: center;
    gap: 15px;
}

.live-tv-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.1s;
}

.live-tv-btn svg {
    width: 24px;
    height: 24px;
}

.live-tv-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.live-tv-time {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.live-tv-time.is-live {
    color: #e50914;
}

.epg-tier-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 5px 14px;
    border-radius: 999px;
    transition: all 0.22s ease;
    user-select: none;
    cursor: pointer;
}

.epg-tier-filter-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.epg-tier-pill-label {
    font-size: 12px;
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.2px;
}

.epg-more-options-container {
    position: relative;
}

.epg-more-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: rgba(18, 18, 22, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
    z-index: 1000;
    animation: epgDropdownFade 0.15s ease-out;
}

@keyframes epgDropdownFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.epg-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.epg-tier-badge-pill {
    background: rgba(229, 9, 20, 0.2);
    border: 1px solid rgba(229, 9, 20, 0.5);
    color: #ff4d52;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.epg-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px;
}

.epg-dropdown-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.epg-dropdown-item-title {
    font-size: 13px;
    font-weight: 600;
    color: #f0f0f0;
}

.epg-dropdown-item-desc {
    font-size: 11px;
    color: #888;
    line-height: 1.2;
}

.epg-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 0;
}

.epg-dropdown-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #eee;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.epg-dropdown-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.epg-more-dropdown input:checked+.slider {
    background-color: #e50914 !important;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.5);
}

.epg-more-dropdown input:checked+.slider:before {
    transform: translateX(16px);
}

/* Metadata Pane */
.live-tv-metadata-pane {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 10;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}

.live-tv-meta-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: 100%;
    height: 100%;
}

.live-tv-meta-player-wrapper {
    flex: 0 0 auto;
    width: 380px;
    max-width: 40vw;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 214px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: stretch;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.live-tv-meta-player-wrapper img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.live-tv-meta-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.live-tv-meta-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.live-tv-meta-header-row h2 {
    font-size: 13px;
    color: #9e9e9e;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.live-tv-meta-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-meta-pill {
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #e0e0e0;
    line-height: 1.2;
}

#live-tv-meta-genre {
    background: rgba(229, 9, 20, 0.2);
    border-color: rgba(229, 9, 20, 0.5);
    color: #ff5252;
}

#live-tv-meta-title,
#live-meta-inspecting-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

#live-tv-meta-time,
#live-meta-inspecting-time {
    color: #4CAF50;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.live-tv-desc-container {
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 110px;
}

#live-tv-meta-desc,
#live-meta-inspecting-desc {
    line-height: 1.45;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    color: #b0b0b0;
    font-size: 13.5px;
    transition: max-height 0.3s ease;
}

#live-tv-meta-desc.expanded,
#live-meta-inspecting-desc.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
    max-height: 85px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
}

.read-more-btn {
    background: transparent;
    border: none;
    color: #42a5f5;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    align-self: flex-start;
    transition: color 0.2s;
}

.read-more-btn:hover {
    color: #90caf9;
    text-decoration: underline;
}

/* Selected program block highlight */
.epg-program-block.selected-program {
    outline: 2px solid #2196f3 !important;
    outline-offset: -2px;
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.45);
    z-index: 10 !important;
}

/* Mobile specific overrides */
@media (max-width: 768px) {
    #epg-jump-to-live-btn {
        display: none !important;
    }
}

/* EPG Wrapper */
.epg-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #1a1a1a;
    overflow: hidden;
    position: relative;
    min-height: 0;
    width: 100%;
}

#epg-grid-view-wrap,
#epg-list-view-wrap,
#epg-channel-guide-wrap {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

/* EPG Toolbar (Sticky DStv Style) */
.epg-toolbar {
    display: flex;
    align-items: center;
    background-color: #181818;
    height: 50px;
    min-height: 50px;
    flex-shrink: 0;
    padding: 0 15px;
    border-bottom: 1px solid #333;
    z-index: 1000;
    position: sticky;
    top: 0;
    overflow: visible;
}

.epg-search-container {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 20px;
}

.epg-search-btn {
    background: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    z-index: 2;
}

.epg-search-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.epg-search-input {
    width: 0;
    opacity: 0;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: #333;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    height: 36px;
}

.epg-search-input.active {
    width: 200px;
    opacity: 1;
    padding: 0 15px 0 40px;
}

.epg-search-btn.active {
    position: absolute;
    left: 2px;
}

.epg-genres-scroll {
    display: flex;
    align-items: center;
    overflow-x: auto;
    gap: 10px;
    flex: 1;
    scrollbar-width: none;
}

.epg-genres-scroll::-webkit-scrollbar {
    display: none;
}

.epg-genre-btn {
    background: transparent;
    border: 1px solid #444;
    color: #ccc;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.epg-genre-btn:hover {
    border-color: #888;
    color: #fff;
}

.epg-genre-btn.active {
    background: #fff;
    color: #000;
    border-color: #fff;
}

#epg-list-view-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.epg-header {
    display: flex;
    height: 40px;
    min-height: 40px;
    flex-shrink: 0;
    background-color: #222;
    border-bottom: 1px solid #333;
    z-index: 50;
    position: sticky;
    top: 0;
}

.epg-corner {
    width: 120px;
    min-width: 120px;
    background-color: #222;
    border-right: 1px solid #333;
    z-index: 60;
}

.epg-times {
    flex: 1;
    overflow-x: hidden;
    position: relative;
}

/* Skeleton Loading Animations */
@keyframes skeletonPulse {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.4;
    }
}

.skeleton-text,
.skeleton-card,
.skeleton-logo {
    background: #333;
    animation: skeletonPulse 1.5s infinite ease-in-out;
}

.epg-time-slot {
    width: 180px;
    color: #aaa;
    font-size: 13px;
    font-weight: 600;
    padding-left: 10px;
    display: flex;
    align-items: center;
    border-right: 1px solid #333;
    box-sizing: border-box;
}

.epg-body-wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.epg-sidebar {
    width: 120px;
    min-width: 120px;
    flex-shrink: 0;
    background-color: #222;
    overflow-y: scroll;
    overflow-x: hidden;
    border-right: 1px solid #333;
    z-index: 10;
    scrollbar-width: none;
}

.epg-sidebar::-webkit-scrollbar {
    display: none;
}

.epg-channel-row {
    position: relative;
    height: 60px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 5px 12px 5px;
    border-bottom: 1px solid #333;
    box-sizing: border-box;
    cursor: pointer;
    background-color: #222;
}

.epg-channel-row img {
    max-width: 90%;
    max-height: 40px;
    object-fit: contain;
    margin-bottom: 2px;
}

.epg-channel-row span {
    color: #fff;
    font-weight: 500;
    font-size: 11px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epg-body {
    overflow-x: hidden;
    max-width: 100vw;
    flex: 1;
    min-height: 0;
    overflow: auto;
    position: relative;
    display: block;
}

.epg-body.epg-dragging {
    cursor: grabbing !important;
}

.epg-body.epg-dragging .epg-program-block {
    pointer-events: none !important;
}

.epg-past-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* DStv style dark overlay for past */
    z-index: 15;
    pointer-events: none;
}

.epg-current-time-line {
    position: absolute;
    top: 0;
    width: 2px;
    background-color: #2196F3;
    z-index: 150;
    pointer-events: none;
    transform: translateX(0);
}

.epg-current-time-label {
    position: absolute;
    top: -30px;
    left: -25px;
    background-color: #2196F3;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    white-space: nowrap;
    z-index: 150;
}

.epg-programs-row {
    height: 60px;
    min-height: 60px;
    display: block;
    position: relative;
    border-bottom: 1px solid #333;
    background: repeating-linear-gradient(90deg, #18202c 0px, #222c3d 150px, #18202c 298px, #333 298px, #333 300px);
    width: 60480px;
    box-sizing: border-box;
}

.epg-program-block {
    position: absolute;
    height: 50px;
    top: 5px;
    background-color: #333;
    border-radius: 4px;
    padding: 5px 10px;
    color: #fff;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.2s;
    border-left: 4px solid transparent;
    border-right: 6px solid #1a1a1a;
    /* DStv grid spacing */
    box-sizing: border-box;
    /* Needed for the DStv-style fill-in animation */
    transform-origin: center;
    will-change: opacity, transform;
}

.epg-program-block:hover,
.epg-program-block.active {
    background-color: #444;
    z-index: 100;
}

/* DStv Midnight Vertical Date Ribbon (Spans full channel grid height) */
.epg-date-ribbon {
    position: absolute;
    top: 0;
    height: 100%;
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.25) 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
    z-index: 120;
    pointer-events: none;
}

.epg-date-ribbon-badge {
    position: sticky;
    top: 8px;
    margin-left: 2px;
    background: #1b2432;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    padding: 10px 4px;
    border-radius: 4px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
    z-index: 125;
}

/* Orderly Grid Loading Skeletons - Exact DStv Styling */
.epg-grid-skeleton-slot {
    position: absolute;
    height: 50px;
    top: 5px;
    background: linear-gradient(90deg, #18202c 0%, #222c3d 50%, #18202c 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    border-right: 6px solid #11141a;
    box-sizing: border-box;
    animation: epgGridShimmer 2s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}

@keyframes epgGridShimmer {
    0% {
        background-position: 100% 0;
        opacity: 0.7;
    }

    50% {
        background-position: 0% 0;
        opacity: 0.95;
    }

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



/* =========================================
   PLAYER V2 OVERLAY & SKIP
========================================= */
/* Coco Modal fullscreen */
.coco-player-modal {
    padding: 0 !important;
    background: #0a0a0a !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    width: 90vw !important;
    max-width: 1100px !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.coco-player-modal #netflix-player-container {
    flex: 1;
    min-height: 0;
    border-radius: 0;
    overflow: hidden;
}

/* Coco top bar */
.player-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    z-index: 15;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

.coco-top-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    backdrop-filter: blur(6px);
}

.coco-top-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.08);
}

.coco-top-btn svg {
    width: 20px;
    height: 20px;
}

/* Three-dot popup for top-bar 3-dots menu */
.three-dot-popup {
    position: absolute;
    top: 60px;
    bottom: auto;
    right: 16px;
    background: rgba(18, 18, 18, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 230px;
    max-height: calc(100% - 100px);
    overflow-y: auto;
    padding: 8px 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(16px);
}

.three-dot-popup.open {
    display: flex !important;
}

/* COCO INFO OVERLAY — displays metadata when UI is active */
.player-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 100%);
    pointer-events: none;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.netflix-player-container.idle .player-dark-overlay {
    opacity: 0;
}

.coco-info-overlay-el {
    position: absolute;
    bottom: 140px;
    /* Sits comfortably above bottom controls without overlapping */
    left: 48px;
    z-index: 12;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

.netflix-player-container.show-info .coco-info-overlay-el {
    opacity: 1;
    transform: translateY(0);
}

/* Scrubber Hover Mini Player Preview */
.coco-hover-thumb-card {
    width: 160px;
    height: 90px;
    background: #111;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coco-hover-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coco-hover-time {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.coco-thumb-spinner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #e50914;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* COCO CONTROL BAR — stays at bottom, shows/hides on hover */
.coco-bottom-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    padding: 0 20px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 10;
}

.coco-title {
    font-size: 56px;
    font-weight: 800;
    margin: 0 0 6px 0;
    line-height: 1.15;
    color: #ffffff;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.95);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.5px;
}

.coco-title-img {
    max-height: 140px;
    max-width: 480px;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.95));
}

.coco-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.coco-duration {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.coco-genre-tag {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.coco-rating-badge {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 3px 10px;
    border-radius: 5px;
    letter-spacing: 0.5px;
}

.coco-desc {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 650px;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

/* =======================================================
   RESPONSIVE PAUSE INFO OVERLAY (MOBILE & LANDSCAPE PHONES)
   Balanced sizing: bold, readable title & logo, clear of center controls
   ======================================================= */
@media (max-width: 900px),
(max-height: 520px) {
    .coco-info-overlay-el {
        bottom: 82px !important;
        left: 20px !important;
        max-width: min(440px, 48vw) !important;
        gap: 8px !important;
    }

    .coco-title-img {
        max-height: clamp(52px, 14vh, 76px) !important;
        max-width: 220px !important;
        margin-bottom: 4px !important;
        object-fit: contain !important;
        object-position: left bottom !important;
    }

    .coco-title {
        font-size: 24px !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
    }

    .coco-meta {
        gap: 8px !important;
        margin-bottom: 4px !important;
        flex-wrap: wrap !important;
    }

    .coco-duration {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .coco-genre-tag {
        font-size: 12px !important;
    }

    .coco-rating-badge {
        font-size: 11px !important;
        padding: 2px 7px !important;
    }

    .coco-desc {
        font-size: 13px !important;
        line-height: 1.4 !important;
        max-width: 400px !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        display: -webkit-box !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
}

/* Coco control bar */
.coco-control-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.coco-scrubber-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.coco-time-row {
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
}

.coco-time-left,
.coco-time-right {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
}

.coco-buttons-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
    width: 100%;
}

.coco-buttons-left,
.coco-buttons-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.coco-ctrl-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    outline: none;
    padding: 0;
}

.coco-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.coco-ctrl-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Scrubber / Progress styling with Generous 18px Hitbox */
.player-progress-container {
    position: relative;
    width: 100%;
    height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0;
    touch-action: none;
    z-index: 10;
}

.player-progress-container::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 0;
    right: 0;
    z-index: 1;
}

.player-progress-bg {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    pointer-events: none;
    transition: height 0.15s ease;
    z-index: 2;
}

.player-progress-disk-loaded {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    width: 0;
    pointer-events: none;
    transition: height 0.15s ease;
    z-index: 2;
}

.player-progress-loaded {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 9999px;
    width: 0;
    pointer-events: none;
    transition: height 0.15s ease;
    z-index: 3;
}

.player-progress-current {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: #e50914;
    border-radius: 9999px;
    width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    transition: height 0.15s ease;
    z-index: 4;
}

.player-progress-scrubber {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #e50914;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 6px rgba(229, 9, 20, 0.6);
    opacity: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    pointer-events: none;
    z-index: 10;
}

.player-progress-container:hover .player-progress-scrubber,
.player-progress-container.scrubbing .player-progress-scrubber {
    transform: translate(50%, -50%) scale(1.2);
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.95);
}

.player-progress-container:hover .player-progress-bg,
.player-progress-container:hover .player-progress-disk-loaded,
.player-progress-container:hover .player-progress-loaded,
.player-progress-container:hover .player-progress-current,
.player-progress-container.scrubbing .player-progress-bg,
.player-progress-container.scrubbing .player-progress-disk-loaded,
.player-progress-container.scrubbing .player-progress-loaded,
.player-progress-container.scrubbing .player-progress-current {
    height: 8px;
}

/* =========================================
   SKIP INTRO & NEXT EPISODE BUTTONS
   (Dynamic floating position: moves up when controls show, moves down when controls hide)
========================================= */
.btn-skip-intro {
    position: absolute;
    right: 32px;
    bottom: 60px;
    z-index: 50;
    background: rgba(20, 20, 20, 0.88);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
    will-change: bottom, transform;
    transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* When player controls are active/visible, move buttons high above the bottom controls */
.netflix-player-container:not(.idle) .btn-skip-intro,
.netflix-player-container.show-controls .btn-skip-intro {
    bottom: 140px !important;
}

.netflix-player-container.idle .btn-skip-intro {
    bottom: 60px !important;
}



.btn-skip-intro:hover {
    background: white;
    color: black;
    border-color: white;
    transform: scale(1.04);
}

.btn-skip-intro svg {
    width: 18px;
    height: 18px;
}

/* Next Episode Countdown Card Dynamic Positioning */
#next-ep-countdown-card {
    will-change: bottom;
    transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.netflix-player-container:not(.idle) #next-ep-countdown-card {
    bottom: 110px !important;
}

.netflix-player-container.idle #next-ep-countdown-card {
    bottom: 40px !important;
}

/* =========================================
   ANIMATIONS
========================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.hero-content {
    animation: fadeInUp 0.8s ease-out;
}

/* =========================================
   NETFLIX DETAILS MODAL & PLAYER TRANSITIONS
========================================= */
.netflix-details-modal {
    padding: 0 !important;
    background: rgba(25, 25, 25, 0.65) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    width: 90vw !important;
    max-width: 950px !important;
    max-height: 92vh !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
    position: relative !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.netflix-details-modal.player-active,
#detail-modal.player-active,
#detail-modal:has(.player-active) {
    display: none !important;
}

/* 1. Cinematic Banner Header */
.modal-banner {
    position: relative;
    width: 100%;
    height: clamp(380px, 52vh, 500px);
    background-color: #000;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
}

.banner-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 20%;
}

.banner-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to top, #181818 0%, rgba(24, 24, 24, 0.7) 45%, transparent 100%);
    z-index: 1;
}

.banner-content {
    position: absolute;
    bottom: 24px;
    left: 40px;
    right: 40px;
    z-index: 2;
}

.modal-title-text {
    font-size: 2.1rem;
    font-weight: 900;
    margin: 0 0 12px 0;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    line-height: 1.15;
}

.modal-title-logo {
    max-width: 320px;
    max-height: 80px;
    object-fit: contain;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
}

.banner-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.btn-play {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: white;
    color: black;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-play:hover {
    background-color: rgba(255, 255, 255, 0.85);
    transform: scale(1.04);
}

.circle-btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(40, 40, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.circle-btn-action:hover {
    border-color: white;
    background-color: rgba(60, 60, 60, 0.8);
    transform: scale(1.08);
}

/* Close Button on Modal */
.netflix-details-modal .close-btn {
    position: sticky;
    top: 20px;
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: -58px;
    z-index: 1000 !important;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(24, 24, 24, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.netflix-details-modal .close-btn:hover {
    background: #2a2a2a;
    transform: scale(1.08);
}

/* 2. Details Metadata Columns */
.modal-details-body {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
    flex-shrink: 0 !important;
    max-width: 100vw;
    display: flex;
    padding: 18px 36px 20px;
    gap: 32px;
}

.details-body-left {
    width: 65%;
    flex-shrink: 0;
    overflow: visible !important;
}

.details-body-right {
    width: 35%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    overflow: visible !important;
}

.details-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14.5px;
}

.match-score {
    color: #46d369;
    font-weight: 700;
}

.meta-year,
.meta-seasons-badge {
    color: #a3a3a3;
}

.meta-pill {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.modal-desc-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: #e5e5e5;
    margin-top: 6px;
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal;
}

.modal-desc-text.expanded {
    line-clamp: unset;
    -webkit-line-clamp: unset;
    max-height: none;
}

.meta-info-item {
    line-height: 1.5;
}

.info-label {
    color: #777777;
}

.info-value {
    color: #ffffff;
}

/* 3. TV Episodes List */
.tv-episodes-section {
    border-top: 1px solid #333;
    padding-top: 30px;
    margin-top: 20px;
}

.tv-series-container {
    padding: 0 48px;
}

.episodes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.episodes-header h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.season-dropdown {
    position: relative;
    background-color: #242424;
    color: #ffffff;
    border: 1px solid #444;
    padding: 8px 36px 8px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    user-select: none;
    min-width: 130px;
    text-align: left;
    display: flex;
    align-items: center;
    z-index: 50;
}

.season-dropdown:focus,
.season-dropdown.open {
    border-color: #e50914;
    z-index: 60;
}

.season-dropdown .dropdown-icon {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.season-dropdown.open .dropdown-icon {
    transform: rotate(180deg);
}

.dropdown-options-container {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #141414;
    border: 1px solid #444;
    border-radius: 4px;
    margin-top: 4px;
    min-width: 100%;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
}

.dropdown-option {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #ccc;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.dropdown-option:hover,
.dropdown-option.selected {
    background-color: #333;
    color: #fff;
}

.anime-audio-dropdown {
    background: linear-gradient(135deg, rgba(36, 36, 36, 0.95), rgba(28, 28, 28, 0.95));
    border-color: rgba(255, 255, 255, 0.2);
    min-width: 140px;
}

.anime-audio-dropdown:hover,
.anime-audio-dropdown:focus,
.anime-audio-dropdown.open {
    border-color: #e50914;
}

.anime-audio-dropdown .dropdown-options-container {
    min-width: 170px;
}

.episodes-list {
    display: flex;
    flex-direction: column;
    padding: 0 48px;
}

.episode-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: background-color 0.2s;
}

.episode-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.episode-item.active {
    background-color: rgba(255, 255, 255, 0.08);
}

.episode-index-num {
    font-size: 24px;
    font-weight: 700;
    color: #777777;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    flex: 0 0 48px;
    flex-shrink: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.episode-thumbnail-container {
    position: relative;
    width: 150px;
    min-width: 150px;
    height: 85px;
    border-radius: 4px;
    overflow: hidden;
    flex: 0 0 150px;
    flex-shrink: 0;
    margin-left: 12px;
}

.episode-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.modal-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 40px 50px;
    background: linear-gradient(to top, #181818 0%, rgba(24, 24, 24, 0.9) 30%, rgba(24, 24, 24, 0.4) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.episode-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.episode-item:hover .episode-play-overlay {
    opacity: 1;
}

.episode-play-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.episode-info {
    flex-grow: 1;
    padding-left: 20px;
}

.episode-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.episode-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.episode-duration {
    font-size: 14px;
    color: #a3a3a3;
}

.episode-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #a3a3a3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.4s ease;
    max-height: 44px;
}

.episode-desc.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: 500px;
}

/* 4. Trailers & More Section */
/* 4. Split Dual-Column Footer: Trailers & More + Ratings & Reviews */
.split-details-footer {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    padding: 30px 48px 0 48px;
    margin-top: 25px;
    border-top: 1px solid #333;
}

.trailers-section {
    flex: 0 0 240px;
    max-width: 240px;
}

.reviews-section {
    flex: 1;
    min-width: 0;
}

.trailers-section h3,
.reviews-section h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px 0;
    padding: 0;
    color: #ffffff;
    line-height: 1.2;
}

.reviews-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 5px;
}



.trailers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.trailer-card {
    background-color: #242424;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.trailer-card:hover {
    transform: translateY(-3px);
    background-color: #333333;
}

.trailer-thumb-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.trailer-thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.trailer-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(30, 30, 30, 0.85);
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background-color 0.2s, transform 0.2s;
}

.trailer-card:hover .trailer-play-btn {
    background-color: #e50914;
    border-color: #e50914;
    transform: translate(-50%, -50%) scale(1.1);
}

.trailer-title-info {
    padding: 10px 12px;
}

.trailer-title-info h4 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 3px 0;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trailer-title-info span {
    font-size: 12px;
    color: #a3a3a3;
}

/* 5. About Box Section */
.about-section {
    border-top: 1px solid #333;
    padding-top: 35px !important;
}

.about-section h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.about-grid {
    display: flex;
    gap: 48px;
}

.about-col {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
}

.about-col p {
    margin: 0;
    line-height: 1.6;
}

.about-col .label {
    color: #777777;
}

.maturity-rating-tag {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    margin-right: 8px;
    display: inline-block;
}

.maturity-desc {
    color: #a3a3a3;
}

/* 6. FULLSCREEN COCO VIDEO PLAYER COVER */
#netflix-player-container[style*="display: none"] {
    display: none !important;
}

#netflix-player-container:not([style*="display: none"]) {
    background: #000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 99999 !important;
    border-radius: 0 !important;
    background-color: #000000 !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#netflix-player-container #video-player {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    display: block !important;
    pointer-events: none !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform-origin: center center !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#netflix-player-container.fit-cover #video-player,
#netflix-player-container #video-player.fit-cover {
    object-fit: cover !important;
}

#netflix-player-container.fit-fill #video-player,
#netflix-player-container #video-player.fit-fill {
    object-fit: fill !important;
}

/* Search Parental Filter Notices */
.search-filtered-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 24px;
    background: rgba(229, 9, 20, 0.05);
    border: 1px solid rgba(229, 9, 20, 0.18);
    border-radius: 14px;
    margin: 20px auto;
    max-width: 520px;
    width: 100%;
    backdrop-filter: blur(12px);
    box-sizing: border-box;
}

.search-filtered-empty-state .sf-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.search-filtered-empty-state h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
}

.search-filtered-empty-state p {
    font-size: 14px;
    color: #a3a3a3;
    line-height: 1.5;
    margin: 0;
}

.search-filtered-empty-state p strong {
    color: #e50914;
    font-weight: 600;
}

.search-partial-filter-banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 16px;
    color: #a3a3a3;
    font-size: 13px;
    box-sizing: border-box;
}

.search-partial-filter-banner svg {
    color: #e50914;
    flex-shrink: 0;
}

.search-partial-filter-banner strong {
    color: #fff;
}

/* 3-Dot Spin Animation */
.three-dot-spin {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.three-dot-spin.open {
    transform: rotate(90deg);
}

/* Stats for Nerds — Polished Dark Frosted Glass */
.stats-for-nerds {
    position: absolute;
    top: 24px;
    left: 24px;
    background: rgba(14, 14, 18, 0.94);
    color: #e4e4e7;
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
    font-size: 11.5px;
    padding: 16px 18px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85);
    z-index: 500;
    width: 440px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    box-sizing: border-box;
}

.stats-for-nerds.visible {
    display: block;
    animation: sfnFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sfnFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

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

.sfn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sfn-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sfn-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
    display: inline-block;
    animation: sfnPulse 1.8s infinite;
}

@keyframes sfnPulse {

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

    50% {
        opacity: 0.4;
        transform: scale(1.2);
    }
}

.sfn-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}

.sfn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    outline: none;
}

.sfn-close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    transform: scale(1.08);
}

.sfn-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sfn-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 8px;
    padding: 3px 0;
    align-items: baseline;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.sfn-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    user-select: none;
}

.sfn-val {
    color: #e4e4e7;
    font-weight: 500;
    font-size: 11.5px;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.sfn-val-vid {
    color: #fff;
    max-height: 48px;
    overflow-y: auto;
    font-size: 11px;
    line-height: 1.4;
}

.sfn-val-accent {
    color: #00e676 !important;
    font-weight: 700;
}

/* Watch Party Onboarding Tip Modal (Inside Player Container) */
.wp-tip-modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 50000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    animation: wpTipFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wpTipFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

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

.wp-tip-modal-card {
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    width: 92%;
    max-width: 440px;
    padding: 28px 24px 22px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95);
    text-align: center;
    box-sizing: border-box;
}

.wp-tip-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.15);
    color: #e50914;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.wp-tip-title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.wp-tip-desc {
    margin: 0 0 18px;
    color: #a1a1aa;
    font-size: 13.5px;
    line-height: 1.55;
}

.wp-tip-checkbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    cursor: pointer;
    color: #71717a;
    font-size: 13px;
    user-select: none;
}

.wp-tip-checkbox {
    cursor: pointer;
    accent-color: #e50914;
    width: 15px;
    height: 15px;
}

.wp-tip-btn-row {
    display: flex;
    gap: 10px;
}

.wp-tip-btn-cancel {
    flex: 1;
    padding: 11px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #27272a;
    color: #eee;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.wp-tip-btn-cancel:hover {
    background: #3f3f46;
}

.wp-tip-btn-confirm {
    flex: 1;
    padding: 11px;
    border-radius: 9px;
    border: none;
    background: #e50914;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

.wp-tip-btn-confirm:hover {
    opacity: 0.92;
    transform: scale(1.02);
}

/* Keyboard Shortcuts Modal */
.kb-shortcuts-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    z-index: 10000;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    display: none;
    min-width: 400px;
}

.kb-shortcuts-modal.visible {
    display: block;
}

.kb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.kb-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

.kb-key {
    background: #333;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
}

/* Sidebar tooltip styling */
.sidebar-tooltip {
    position: fixed;
    left: 80px;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(-10px);
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.sidebar-tooltip.show {
    opacity: 1;
    transform: translateX(0);
}

/* Upcoming (unreleased) media cards */
.upcoming-card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

.upcoming-card img {
    filter: blur(2px) brightness(0.7);
}

.incoming-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    background: #e50914;
    color: white;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    border-radius: 4px;
    padding: 3px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 5;
}

/* Autocomplete suggestion dropdown styling */
.autocomplete-suggestions {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    z-index: 1001;
    overflow: hidden;
    display: none;
}

.autocomplete-suggestion-item {
    padding: 12px 18px;
    color: #e5e5e5;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.autocomplete-suggestion-item:hover,
.autocomplete-suggestion-item.focused {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    outline: none;
}

/* TV Alphabet Keyboard Layout */
.tv-keyboard-container {
    padding: 16px;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.keyboard-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.keyboard-key {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s, color 0.15s;
    outline: none;
}

.info-modal-body {
    overflow-x: hidden;
    max-width: 100vw;
    max-height: 70vh;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: #ccc;
    padding-bottom: 100px;
}

.keyboard-key:hover,
.keyboard-key.focused {
    background: #ffffff;
    color: #000000;
    transform: scale(1.08);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.keyboard-key.key-wide {
    flex: 1;
    font-size: 15px;
}

/* TV Search Layout adjustments */
.search-layout-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
    transition: padding 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: visible;
    overflow-x: clip;
}

.search-left-panel {
    display: flex;
    flex-direction: column;
    width: 320px;
    max-width: 320px;
    flex-shrink: 0;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-layout-wrapper.keyboard-collapsed {
    padding-left: 32px;
}

.search-layout-wrapper.keyboard-collapsed .search-left-panel {
    opacity: 0;
    max-width: 0;
    margin-right: -30px;
    transform: translateX(-20px);
    pointer-events: none;
    overflow: hidden;
}

.btn-reopen-keyboard {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    color: #ddd;
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-reopen-keyboard:hover,
.btn-reopen-keyboard.focused {
    background: #e50914;
    color: #fff;
    border-color: #e50914;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.4);
    outline: none;
}

.search-right-panel {
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-width: none;
}

.search-right-panel::-webkit-scrollbar {
    display: none;
}

/* Enclosed Search Input Box (PC & Mobile Unified) */
.search-right-header {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}

.search-input-box-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 0 14px;
    height: 54px;
    flex: 1;
    min-width: 0;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
    box-sizing: border-box;
}

.search-input-box-wrap:focus-within {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.25), 0 6px 20px rgba(0, 0, 0, 0.3);
}

.search-box-lens-icon {
    color: #888;
    margin-right: 12px;
    flex-shrink: 0;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    transition: color 0.2s;
}

.search-input-box-wrap:focus-within .search-box-lens-icon {
    color: #fff;
}


.search-input-field {
    flex: 1;
    background: transparent !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #fff !important;
    outline: none !important;
    padding: 0 !important;
    min-width: 0;
    width: 100%;
    box-shadow: none !important;
}

.search-input-field::placeholder {
    color: #666;
    font-weight: 500;
}

/* Suppress all native browser search clear icons */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

.search-clear-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #bbb;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 8px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    outline: none;
}

.search-clear-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: scale(1.08);
}

.search-voice-btn {
    background: transparent;
    border: none;
    color: #aaa;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 50%;
    transition: all 0.2s ease;
    outline: none;
}

.search-voice-btn:hover,
.search-voice-btn.focused {
    background: rgba(255, 255, 255, 0.12);
    color: #e50914;
    transform: scale(1.08);
}

/* Sticky Search Header Container (PC & Mobile) */
.search-sticky-header-container {
    position: sticky;
    top: 0;
    z-index: 60;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background: rgba(14, 14, 18, 0.98);
    padding: 10px 0 6px 0;
    width: 100%;
    box-sizing: border-box;
}

/* Inline In-Bar Voice Recording (Red Theme) */
.search-input-box-wrap.is-voice-recording {
    border-color: rgba(229, 9, 20, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.22), 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    background: rgba(28, 14, 16, 0.92) !important;
}

.search-input-box-wrap.is-transcribing {
    border-color: rgba(229, 9, 20, 0.4) !important;
    background: rgba(20, 16, 18, 0.85) !important;
}

.search-input-box-wrap.is-transcribing input {
    font-style: italic !important;
    color: #bbb !important;
    pointer-events: none !important;
}

.search-voice-inline-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.voice-inline-rec-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.voice-inline-rec-pill .voice-rec-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e50914;
    animation: blink 1s infinite alternate;
}

.voice-inline-rec-pill .voice-rec-timer {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    font-family: monospace;
}

.voice-inline-visualizer {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 30px;
}

.voice-bar-red {
    width: 3.5px;
    height: 8px;
    min-height: 4px;
    background: #e50914;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(229, 9, 20, 0.75);
    transition: height 0.08s ease;
}

.voice-listening-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .voice-listening-label {
        display: none;
    }
}

.search-voice-send-btn {
    display: none !important;
    background: #e50914 !important;
    color: #ffffff !important;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 6px;
    box-shadow: 0 2px 10px rgba(229, 9, 20, 0.45);
    transition: transform 0.2s, background 0.2s;
}

.search-input-box-wrap.is-voice-recording .search-voice-send-btn {
    display: inline-flex !important;
}

.search-voice-send-btn:hover {
    transform: scale(1.08);
    background: #f40612 !important;
}

.search-voice-btn.is-recording-cancel {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.search-voice-btn.is-recording-cancel:hover {
    background: #e50914 !important;
    color: #fff !important;
    border-color: #e50914 !important;
    transform: scale(1.05);
}

/* Ensure Trending & Discover Grid Cards Never Overlap */
.trending-discover-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 14px !important;
    padding-bottom: 80px !important;
}

.trending-discover-grid .carousel-card-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    flex: unset !important;
}

/* Mobile Search Layout Adjustments */
@media (max-width: 768px),
((orientation: landscape) and (max-height: 520px)) {
    #search-view {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }

    .search-layout-wrapper,
    .search-layout-wrapper.keyboard-collapsed {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: auto !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }

    .search-left-panel,
    #search-left-panel {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        flex: 0 0 0 !important;
    }

    #btn-reopen-keyboard,
    .btn-reopen-keyboard,
    #btn-keyboard-toggle {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        pointer-events: none !important;
    }

    .search-right-panel,
    #search-right-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px 90px 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: clip !important;
        flex: 1 1 100% !important;
    }

    .search-sticky-header-container {
        position: sticky !important;
        top: 0 !important;
        z-index: 60 !important;
        background: rgba(14, 14, 18, 0.98) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        padding: max(8px, env(safe-area-inset-top, 8px)) 16px 8px 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
        box-sizing: border-box !important;
    }

    .search-right-header {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .search-input-box-wrap {
        height: 48px;
        border-radius: 12px;
        padding: 0 12px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        flex: 1 !important;
    }

    .search-input-field {
        font-size: 16px !important;
    }

    .search-clear-btn {
        width: 26px;
        height: 26px;
        margin-right: 6px;
    }

    .search-voice-btn {
        width: 30px;
        height: 30px;
    }

    .search-category-tabs {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 16px 0 !important;
        padding: 2px 24px 6px 0 !important;
        gap: 8px !important;
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .search-category-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .search-cat-tab {
        font-size: 13px !important;
        padding: 6px 13px !important;
        flex-shrink: 0 !important;
    }
}

/* Mobile History Modal Animated Transitions */
#search-mobile-history-modal {
    position: fixed;
    z-index: 99999;
    max-height: 80vh;
    width: 420px;
    max-width: 92vw;
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    animation: slideUpHistoryModal 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideUpHistoryModal {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.96);
    }

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


/* Back to Browse Button */
.btn-search-back {
    width: 100%;
    background: #141414;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    padding: 10px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    outline: none;
    text-align: center;
}

.btn-search-back:hover,
.btn-search-back.focused {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* Static Suggestions list under keyboard */
.search-suggestions-list {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 10px;
}

.suggestion-item {
    font-size: 16px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    text-align: left;
    outline: none;
}

.suggestion-item:hover,
.suggestion-item.focused {
    color: #ffffff;
    transform: translateX(5px);
}

/* Search Header layout */
.search-right-header {
    display: flex;
    margin-bottom: 25px;
    margin-top: 26px;
    /* Align perfectly with left panel hide/voice buttons */
}

@media (min-width: 769px) {
    .search-right-header {
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
        padding-left: 10px;
    }
}

.search-query-display {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
}

.search-input-container {
    display: flex;
    gap: 12px;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 6px 14px;
    transition: border-color 0.2s;
}

.search-input-container:focus-within {
    border-color: #e50914;
}

#search-input {
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 32px;
    width: 100%;
    padding: 0;
    transform: none !important;
}

#search-input:focus,
#search-input.focused {
    transform: none !important;
    zoom: normal !important;
    outline: none !important;
    box-shadow: none !important;
}

.search-header-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: color 0.2s, transform 0.2s;
    outline: none;
}

.search-header-btn:hover,
.search-header-btn.focused {
    color: white;
    transform: scale(1.1);
}

/* Voice search listening overlay */
.voice-listening-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 2000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    width: 480px;
    text-align: center;
}

.voice-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rec-dot {
    width: 12px;
    height: 12px;
    background: #e50914;
    border-radius: 50%;
    animation: blink 1s infinite alternate;
}

.rec-timer {
    font-size: 16px;
    font-weight: 700;
    color: #e5e5e5;
}

.voice-visualizer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 60px;
    width: 100%;
}

.voice-bar {
    width: 6px;
    height: 15px;
    background: #e50914;
    border-radius: 3px;
    transition: height 0.1s ease;
}

@keyframes blink {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
    }
}

/* Expanded Episode Download panel */
.episode-item-wrapper {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #333;
}

.episode-item-wrapper .episode-item {
    border-bottom: none;
    /* Removed border since it is handled by the wrapper */
}

.episode-download-panel {
    background: rgba(255, 255, 255, 0.02);
    border-top: none;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
}

.episode-download-panel.open {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.download-sources-container {
    padding: 8px 48px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.episode-download-panel .stream-segmented-container {
    margin-top: 0;
    margin-bottom: 0;
    gap: 8px;
}

.download-source-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 20px;
    border-radius: 6px;
    transition: background 0.2s, border-color 0.2s;
}

.download-source-item:hover,
.download-source-item.focused {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    outline: none;
}

.download-source-item .btn-action-dl {
    background: #e50914;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.download-source-item .btn-action-dl:hover {
    background: #ff1f2f;
}

/* Custom Scrollbars */
.custom-slim-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-slim-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.custom-slim-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.custom-slim-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Key focus styles for TV Spatial & keyboard navigation (Uses exact border-radius instead of square box) */
.focused {
    outline: none !important;
    box-shadow: 0 0 0 2.5px #e50914, 0 0 15px rgba(229, 9, 20, 0.6) !important;
    transform: scale(1.02);
    transition: transform 0.15s, box-shadow 0.15s;
}

*:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px #e50914 !important;
}

/* Shape-matching focus rings for all circular & pill buttons across the entire app */
.bottom-nav-item,
.nav-plus,
.drama-action-item,
.drama-action-icon-disc,
.drama-nav-arrow,
.drama-top-search-btn,
.drama-series-back-btn,
.drama-avatar-wrapper,
.fab-item,
.fab-toggle,
.btn-circle,
.btn-drama-mute,
.drama-range-btn,
.drama-ep-tile {
    outline: none !important;
}

.bottom-nav-item.focused,
.bottom-nav-item:focus-visible {
    border-radius: 12px !important;
    box-shadow: 0 0 0 2px #e50914 !important;
}

.nav-plus.focused,
.nav-plus:focus-visible,
.drama-action-icon-disc.focused,
.drama-action-icon-disc:focus-visible,
.drama-nav-arrow.focused,
.drama-nav-arrow:focus-visible,
.drama-top-search-btn.focused,
.drama-top-search-btn:focus-visible,
.drama-avatar-wrapper.focused,
.drama-avatar-wrapper:focus-visible,
.fab-toggle.focused,
.fab-toggle:focus-visible {
    border-radius: 50% !important;
    box-shadow: 0 0 0 2.5px #ff2d55, 0 0 15px rgba(255, 45, 85, 0.6) !important;
}

.tv-sidebar .sidebar-item.focused .sidebar-icon-disc {
    background: rgba(229, 9, 20, 0.4) !important;
}

/* =======================================================
   OFFLINE DOWNLOAD MANAGER STYLING
   ======================================================= */
.play-download-container {
    position: relative;
    width: 150px;
    height: 48px;
    display: inline-block;
}

.play-download-container button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.3s ease, filter 0.3s ease;
    z-index: 2;
    margin: 0 !important;
}

.play-download-container .download-progress-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform-origin: 50% 50%;
    stroke-linecap: round;
    stroke-dasharray: 88;
    /* 2 * PI * 14 */
    stroke-dashoffset: 88;
}

.play-download-container .download-progress-overlay .progress-percent {
    font-size: 10px;
    font-weight: 700;
    color: white;
    margin-top: 1px;
    line-height: 1;
}

.play-download-container.downloading:not(:hover) button {
    opacity: 1;
    pointer-events: auto;
}

.play-download-container.downloading:not(:hover) .download-progress-overlay {
    opacity: 0;
    pointer-events: none;
}

.play-download-container.downloading:hover button {
    opacity: 1;
    pointer-events: auto;
}

.play-download-container.downloading:hover .download-progress-overlay {
    opacity: 0;
    pointer-events: none;
}

.downloads-card-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.downloads-page-container {
    padding: 40px 60px;
    width: 100%;
    box-sizing: border-box;
}

.downloads-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 15px;
}

.downloads-tabs-row {
    display: flex;
    gap: 30px;
    align-items: baseline;
    flex-wrap: wrap;
}

.downloads-tab {
    margin: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

#tab-downloaded.downloads-tab {
    color: white;
    font-size: 32px;
    font-weight: 700;
}

#tab-recently-deleted.downloads-tab {
    color: #666;
    font-size: 24px;
    font-weight: 600;
}

.downloads-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

#btn-download-settings {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

#btn-cleanup-watched {
    background: rgba(229, 9, 20, 0.2);
    border: 1px solid #e50914;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}

.downloads-delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(14, 14, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, color 0.2s;
    z-index: 30 !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.downloads-card-wrapper:hover .downloads-delete-btn {
    z-index: 35 !important;
    background: rgba(24, 24, 32, 0.95);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.downloads-delete-btn:hover,
.downloads-delete-btn.focused {
    transform: scale(1.15);
    color: #ffffff !important;
    background: #e50914 !important;
    border-color: #e50914 !important;
    box-shadow: 0 0 16px rgba(229, 9, 20, 0.75);
    outline: none;
}

.btn-episode-download.downloaded {
    background: rgba(34, 197, 94, 0.15) !important;
    border: 1.5px solid #22c55e !important;
    color: #22c55e !important;
}

.btn-episode-download.downloaded:hover {
    background: rgba(34, 197, 94, 0.3) !important;
    transform: scale(1.08);
}

.btn-episode-download.downloading {
    background: rgba(229, 9, 20, 0.12) !important;
    border: 1.5px solid #e50914 !important;
    color: #e50914 !important;
}

.btn-episode-download.downloading svg {
    animation: spin 1.2s linear infinite;
}

.btn-episode-download.failed {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1.5px solid #ef4444 !important;
    color: #ef4444 !important;
}

.btn-episode-download.failed:hover {
    background: rgba(239, 68, 68, 0.28) !important;
    transform: scale(1.08);
}

.btn-episode-download.queued {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1.5px solid #f59e0b !important;
    color: #f59e0b !important;
}

#modal-btn-download-movie.downloaded {
    border-color: #4cd964 !important;
    color: #4cd964 !important;
    background: rgba(76, 217, 100, 0.12) !important;
}

#modal-btn-download-movie.downloaded:hover {
    background: rgba(76, 217, 100, 0.25) !important;
    transform: scale(1.08);
}

#modal-btn-download-movie.downloading {
    border-color: #e50914 !important;
    color: #e50914 !important;
    background: rgba(229, 9, 20, 0.12) !important;
}

#modal-btn-download-movie.downloading svg {
    animation: spin 1.2s linear infinite;
}

#modal-btn-download-movie.failed {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
}

#modal-btn-download-movie.failed:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    transform: scale(1.08);
}

/* =======================================================
   NETFLIX-STYLE GROUPED DOWNLOADS SCREEN (Image 4)
   ======================================================= */
.netflix-downloads-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.netflix-dl-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    user-select: none;
    position: relative;
}

.netflix-dl-row:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}

.netflix-dl-row:active {
    transform: scale(0.99);
}

.netflix-dl-thumb-wrap {
    position: relative;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    height: 68px;
    border-radius: 6px;
    overflow: hidden;
    background: #1c1c1e;
    flex-shrink: 0;
}

.netflix-dl-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.netflix-dl-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.netflix-dl-play-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.netflix-dl-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.netflix-dl-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.netflix-dl-subtitle {
    font-size: 12.5px;
    color: #999999;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.netflix-dl-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888888;
    flex-shrink: 0;
    padding-right: 4px;
}

.netflix-dl-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.netflix-dl-action-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, border-color 0.2s;
}

.netflix-dl-action-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

.netflix-dl-action-btn.btn-delete-dl:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
}

/* TV Show Drilldown View */
.netflix-dl-detail-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.netflix-dl-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
}

.netflix-dl-back-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.netflix-dl-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.netflix-dl-detail-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.netflix-dl-detail-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.netflix-dl-detail-sub {
    font-size: 13px;
    color: #8c8c8e;
}

/* =======================================================
   PREMIUM FLOATING ERROR CONSOLE DRAWER
   ======================================================= */
.console-trigger {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px) saturate(150%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
    z-index: 100000;
}

.console-trigger:hover,
.console-trigger.focused {
    transform: scale(1.1);
    background: rgba(229, 9, 20, 0.2);
    border-color: #e50914;
    outline: none;
}

.console-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e50914;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.6);
    line-height: 1;
}

.console-drawer {
    position: fixed;
    bottom: -400px;
    right: 20px;
    width: 450px;
    height: 350px;
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(30px) saturate(180%);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.console-drawer.open {
    bottom: 0;
}

.console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.console-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
}

.console-logs-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.console-log-item {
    font-family: monospace;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid #ff3b30;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    color: #ff453a;
    line-height: 1.4;
    word-break: break-all;
}

.console-log-time {
    color: #888;
    margin-bottom: 4px;
    font-size: 9px;
}

/* =======================================================
.rating-review-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100000;
}

.rating-review-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: min(400px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    background: rgba(20, 20, 26, 0.96);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 20px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(229, 9, 20, 0.12);
    z-index: 100001;
    display: none;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.rating-review-popup.active {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.rate-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2px;
}

.rate-modal-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rate-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
}

.rate-modal-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.rate-modal-close-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: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.rate-modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.05);
}

/* 1. Reaction Pills Row */
.rate-reaction-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 4px 0;
}

.rate-reaction-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.rate-reaction-pill:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-2px);
}

.rate-reaction-pill:active {
    transform: scale(0.96);
}

.rate-reaction-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}

.rate-reaction-label {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Active Reaction States */
.rate-reaction-pill.active#rate-pill-dislike {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #ff6b6b !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
}
.rate-reaction-pill.active#rate-pill-dislike .rate-reaction-icon-box {
    background: #ef4444 !important;
    color: #fff !important;
}

.rate-reaction-pill.active#rate-pill-like {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: #22c55e !important;
    color: #4ade80 !important;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.25);
}
.rate-reaction-pill.active#rate-pill-like .rate-reaction-icon-box {
    background: #22c55e !important;
    color: #fff !important;
}

.rate-reaction-pill.active#rate-pill-superlike {
    background: rgba(236, 72, 153, 0.15) !important;
    border-color: #ec4899 !important;
    color: #f472b6 !important;
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.25);
}
.rate-reaction-pill.active#rate-pill-superlike .rate-reaction-icon-box {
    background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
    color: #fff !important;
}

/* 2. Review Textarea */
.rate-review-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rate-review-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.rate-optional-badge {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}

.rate-review-textarea {
    width: 100%;
    min-height: 72px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.4;
    font-family: inherit;
    resize: none;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
}

.rate-review-textarea:focus {
    border-color: rgba(229, 9, 20, 0.6);
    background: rgba(255, 255, 255, 0.06);
}

/* 3. User's Current Status Card */
.rate-user-status-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 9px 14px;
    gap: 12px;
}

.rate-status-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.rate-status-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
}

.rate-status-value {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rate-status-separator {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.08);
}

/* 4. Action Buttons */
.rate-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.btn-rate-remove {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-rate-remove:hover {
    background: rgba(239, 68, 68, 0.15);
}

.btn-rate-cancel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-rate-cancel:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.btn-rate-submit {
    background: #e50914;
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
    transition: transform 0.15s, background 0.2s;
}

.btn-rate-submit:hover {
    background: #f40612;
    transform: scale(1.03);
}

.popup-actions .btn-primary {
    background: #e50914;
    color: white;
}

.popup-actions .btn-primary:hover,
.popup-actions .btn-primary.focused {
    background: #f40b17;
}

.popup-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.popup-actions .btn-secondary:hover,
.popup-actions .btn-secondary.focused {
    background: rgba(255, 255, 255, 0.2);
}

/* =======================================================
   PREMIUM GLOBAL APP INITIALIZATION LOADER
   ======================================================= */
.global-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #141414;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.loader-title {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #e50914;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(229, 9, 20, 0.3);
    animation: pulseGlow 2s infinite ease-in-out;
}

.loader-subtitle {
    font-size: 14px;
    color: #888;
    margin: 0;
    letter-spacing: 0.5px;
}

@keyframes pulseGlow {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 20px rgba(229, 9, 20, 0.3);
    }

    50% {
        transform: scale(1.03);
        text-shadow: 0 0 35px rgba(229, 9, 20, 0.6);
    }
}

/* =======================================================
   VIBRATE ANIMATION FEEDBACK
   ======================================================= */
.vibrate {
    animation: shakeVibrate 0.4s ease-in-out;
}

@keyframes shakeVibrate {

    0%,
    100% {
        transform: translateX(0);
    }

    15%,
    45%,
    75% {
        transform: translateX(-6px);
    }

    30%,
    60%,
    90% {
        transform: translateX(6px);
    }
}

/* =======================================================
   PREMIUM SIDEBAR HOVER/ARROW STYLING
   ======================================================= */
/* Prevent red outline on sidebar-item itself */
.sidebar-item:hover,
.sidebar-item.focused {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Zoom on hover (always) */
.sidebar-item:hover .sidebar-icon-disc {
    transform: scale(1.1);
}

/* Circular red outline ONLY in keyboard mode */
.keyboard-mode .sidebar-item.focused .sidebar-icon-disc {
    box-shadow: 0 0 0 3px #e50914, 0 0 15px rgba(229, 9, 20, 0.6) !important;
    transform: scale(1.1);
    background: rgba(229, 9, 20, 0.25) !important;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, transform 0.2s;
    backdrop-filter: blur(6px);
}

.carousel-arrow svg {
    width: 22px;
    height: 22px;
}

.carousel-section:hover .carousel-arrow {
    opacity: 1;
}

.carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-50%) scale(1.1);
}

.carousel-arrow-prev {
    left: 20px;
}

.carousel-arrow-next {
    right: 20px;
}

.carousel-arrow.disabled {
    opacity: 0 !important;
    pointer-events: none !important;
}

.carousel-arrow {
    pointer-events: none;
    /* Default hidden state */
}

.carousel-section:hover .carousel-arrow:not(.disabled) {
    opacity: 1;
    pointer-events: auto;
}

/* Hide YouTube red progress bar by pushing the bottom edge down and cropping it */
#hero-trailer-container {
    overflow: hidden;
}

/* SKELETON LOADING PLACEHOLDERS */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

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

.carousel-skeleton-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 24px;
    margin-bottom: 28px;
}

.skeleton-row-title {
    width: 240px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(90deg, #181818 25%, #282828 37%, #181818 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2.2s ease-in-out infinite;
}

.skeleton-card {
    border-radius: 8px;
    background: linear-gradient(90deg, #181818 25%, #282828 37%, #181818 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2.2s ease-in-out infinite;
    aspect-ratio: 2 / 3;
    width: 165px;
    flex: 0 0 165px;
    flex-shrink: 0;
}

.skeleton-card-wrapper {
    display: flex;
    flex-direction: column;
    flex: 0 0 165px;
    width: 165px;
}

.grid-container .skeleton-card-wrapper {
    width: 100%;
}

.skeleton-text {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #181818 25%, #282828 37%, #181818 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2.2s ease-in-out infinite;
}

/* TOP-PRIORITY HERO SKELETON LOADER OVERLAY */
#hero-skeleton-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 5;
    margin: 0;
    /* Shimmer backdrop — mimics a dark cinematic image loading */
    background: linear-gradient(90deg, #0e0e0e 25%, #1a1a1a 50%, #0e0e0e 75%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 3s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 48px 58px 64px;
    box-sizing: border-box;
    pointer-events: none;
}

.hero-skeleton-content {
    width: 100%;
    max-width: 650px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Network badge — small text strip above the logo */
.skeleton-hero-network {
    width: 80px;
    height: 12px;
    border-radius: 3px;
    margin-bottom: 4px;
}

/* Title logo — wide rectangle like a show title image */
.skeleton-hero-logo {
    width: 55%;
    height: 100px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.skeleton-hero-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 2px;
}

.skeleton-meta-badge {
    width: 48px;
    height: 20px;
    border-radius: 4px;
    margin-top: 0;
}

.skeleton-desc-line-1 {
    width: 100%;
    height: 15px;
    border-radius: 4px;
    margin-top: 0;
}

.skeleton-desc-line-2 {
    width: 90%;
    height: 15px;
    border-radius: 4px;
    margin-top: 0;
}

.skeleton-desc-line-3 {
    width: 65%;
    height: 15px;
    border-radius: 4px;
    margin-top: 0;
    margin-bottom: 10px;
}

.skeleton-hero-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.skeleton-hero-btn {
    height: 48px;
    border-radius: 6px;
    margin-top: 0;
}

.skeleton-btn-play {
    width: 120px;
}

.skeleton-btn-more {
    width: 165px;
}

.skeleton-row-title {
    width: 180px;
    height: 20px;
    margin-left: 60px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #181818 25%, #282828 37%, #181818 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2.2s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-logo {
    background: linear-gradient(90deg, #181818 25%, #282828 37%, #181818 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2.2s ease-in-out infinite;
    border-radius: 8px;
    min-height: 100px;
    min-width: 250px;
}

@media (max-width: 768px) {
    #hero-skeleton-overlay {
        padding: 0 15px 40px 15px !important;
        align-items: center;
        text-align: center;
    }

    .hero-skeleton-content {
        max-width: 100%;
        align-items: center;
    }

    .skeleton-hero-logo {
        width: 70%;
        height: 60px;
    }

    .skeleton-hero-network {
        display: none;
    }

    .skeleton-desc-line-1,
    .skeleton-desc-line-2,
    .skeleton-desc-line-3 {
        display: none !important;
    }

    .skeleton-hero-buttons {
        justify-content: center;
        gap: 10px;
    }

    .skeleton-hero-btn {
        height: 36px;
        min-width: 110px;
    }

    .skeleton-row-title {
        margin-left: 15px;
    }
}

#hero-trailer-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

#hero-trailer-container iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vw !important;
    height: 56.25vw !important;
    min-height: 100% !important;
    min-width: 177.77vh !important;
    transform: translate(-50%, -50%) scale(1.0) !important;
    border: none !important;
    pointer-events: none !important;
}

/* Hide show sidebar button and navigation buttons when hero banner is fullscreen or trailer is active */
.hero-banner.is-fullscreen #btn-hero-sidebar-show,
.hero-banner:fullscreen #btn-hero-sidebar-show,
:fullscreen #btn-hero-sidebar-show,
:-webkit-full-screen #btn-hero-sidebar-show {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* --- Floating Notification System --- */
/* 1. Middle/Center container for regular system in-app notifications */
.notification-toast-container.center {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    max-width: 90vw;
    width: auto;
}

.notification-toast-container.center .notification-toast {
    transform: translateY(-20px);
    min-width: 280px;
    max-width: 480px;
}

.notification-toast-container.center .notification-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.notification-toast-container.center .notification-toast.hide {
    transform: translateY(-20px);
    opacity: 0;
}

/* 2. Top-Right container specifically for JSmart TV live stream & match broadcasts */
.notification-toast-container.top-right {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 2000000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100% - 48px);
}

@media (max-width: 768px) {
    .notification-toast-container.top-right {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

.notification-toast-container.top-right .notification-toast {
    transform: translateX(35px);
}

.notification-toast-container.top-right .notification-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.notification-toast-container.top-right .notification-toast.hide {
    transform: translateY(-12px) scale(0.95);
    opacity: 0;
}

.notification-toast {
    background: rgba(22, 22, 24, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    color: white;
    pointer-events: auto;
    cursor: pointer;
    position: relative;
}

.notification-toast .toast-icon {
    font-size: 22px;
    line-height: 1;
    margin-top: 1px;
    flex-shrink: 0;
}

.notification-toast .toast-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.notification-toast .toast-title {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-toast .toast-message {
    font-size: 11.5px;
    color: #bbb;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-toast .toast-close-btn {
    background: transparent;
    border: none;
    color: #777;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 4px;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.notification-toast .toast-close-btn:hover {
    color: #fff;
}

/* =========================================
   FAB STACK
========================================= */
.fab-container {
    position: fixed;
    bottom: 40px;
    right: 23px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fab-main-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e50914;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), background 0.3s;
    z-index: 2;
}

.fab-main-btn:hover {
    background: #f40612;
    transform: scale(1.05);
}

.fab-main-btn svg {
    width: 26px;
    height: 26px;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s ease;
}

.fab-main-btn .icon-hamburger {
    display: block;
}

.fab-main-btn .icon-close {
    display: none;
}

.fab-container.open .fab-main-btn .icon-hamburger {
    display: none;
}

.fab-container.open .fab-main-btn .icon-close {
    display: block;
    transform: rotate(90deg);
}

.fab-menu {
    position: absolute;
    bottom: 60px;
    display: flex;
    flex-direction: column-reverse;
    /* Bottom to top stacking */
    align-items: center;
    gap: 12px;
    pointer-events: none;
    z-index: 1;
    padding-bottom: 12px;
    /* space between + and buttons */
}

.fab-sub-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2b2b2b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

.fab-sub-btn:hover {
    background: #3a3a3a;
}

.fab-sub-btn svg {
    width: 22px;
    height: 22px;
}

.fab-container.open .fab-menu {
    pointer-events: auto;
}

.fab-container.open .fab-sub-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered transition delays for popping out (nth-child matches DOM order, so 1 is info, 2 is downloads, 3 is notifs) */
.fab-container.open .fab-sub-btn:nth-child(3) {
    transition-delay: 0.05s;
}

.fab-container.open .fab-sub-btn:nth-child(2) {
    transition-delay: 0.1s;
}

.fab-container.open .fab-sub-btn:nth-child(1) {
    transition-delay: 0.15s;
}

/* Staggered transition delays for popping in */
.fab-container:not(.open) .fab-sub-btn:nth-child(1) {
    transition-delay: 0.0s;
}

.fab-container:not(.open) .fab-sub-btn:nth-child(2) {
    transition-delay: 0.05s;
}

.fab-container:not(.open) .fab-sub-btn:nth-child(3) {
    transition-delay: 0.1s;
}

.fab-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: white;
    color: #e50914;
    font-size: 11px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.fab-badge.grey {
    background: #555;
    color: white;
}

/* =========================================
   RESPONSIVE DESIGN & MOBILE BOTTOM NAV
========================================= */

.mobile-trailer-btn {
    display: none;
}

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

.bottom-nav-main {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.bottom-nav-expanded {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

/* Push the last two items in expanded nav to columns 4 and 5, leaving col 3 for the plus button */
.bottom-nav-expanded .bottom-nav-text-item:nth-child(3) {
    grid-column: 4;
}

.bottom-nav-expanded .bottom-nav-text-item:nth-child(4) {
    grid-column: 5;
}

.bottom-nav-item {
    color: #b3b3b3;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}

.bottom-nav-item svg {
    width: 24px;
    height: 24px;
}

.bottom-nav-item.active {
    color: white;
}

.bottom-nav-item.nav-plus {
    background-color: #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 5px;
    color: white;
    transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-nav-item.nav-plus svg {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-nav-item.nav-plus.rotated {
    background-color: #e50914;
}

.bottom-nav-item.nav-plus.rotated svg {
    transform: rotate(45deg);
    color: white;
}

.bottom-nav-text-item {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    background: transparent;
    transition: color 0.2s ease, transform 0.2s ease;
}

.bottom-nav-text-item:hover,
.bottom-nav-text-item:focus {
    color: #4cd964;
    transform: scale(1.1);
}

@media (max-width: 768px),
((orientation: landscape) and (max-height: 520px)) {

    /* Global scrollbar hiding for mobile layout */
    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    *::-webkit-scrollbar {
        display: none !important;
    }

    .hero-banner {
        height: 56vh !important;
        min-height: 420px !important;
        margin: 12px auto 20px auto !important;
        width: calc(100% - 20px) !important;
        border-radius: 36px !important;
        padding: 0 18px 32px 18px !important;
    }

    .hero-nav-prev,
    .hero-nav-next {
        display: flex !important;
        opacity: 0.85 !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: rgba(14, 14, 18, 0.65) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
        top: 40% !important;
        transform: translateY(-50%) !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 25 !important;
    }

    .hero-nav-prev {
        left: 10px !important;
    }

    .hero-nav-next {
        right: 10px !important;
    }

    .hero-nav-btn svg {
        width: 26px !important;
        height: 26px !important;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) !important;
    }

    #hero-meta-row {
        display: none !important;
    }

    .hero-gradient,
    .hero-overlay {
        background: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(14, 14, 18, 0.9) 100%),
            linear-gradient(to top, rgba(14, 14, 18, 0.95) 0%, rgba(14, 14, 18, 0.5) 35%, transparent 65%) !important;
    }

    .hero-content {
        bottom: 0px !important;
        /* Lowered back to natural position */
    }

    .hero-pagination-wrapper {
        display: none !important;
    }

    .carousels-container {
        position: relative;
        margin-top: 0 !important;
        padding-bottom: 20px !important;
        z-index: 10;
    }

    .carousels-container::before {
        display: none !important;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .hero-title-logo {
        max-width: 80% !important;
        max-height: 80px !important;
        margin-bottom: 12px !important;
        object-position: bottom center !important;
    }

    .hero-title {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }

    .hero-logo-img {
        max-width: 50% !important;
        max-height: 90px !important;
        margin: 0 auto 15px auto;
        object-fit: contain;
    }

    .hero-meta-row {
        display: flex !important;
    }

    .hero-description {
        display: none !important;
    }

    .hero-buttons {
        justify-content: center;
        gap: 10px;
    }

    .btn-hero {
        padding: 8px 16px;
        font-size: 14px;
        min-width: 120px;
    }

    .btn-hero svg {
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }

    .tv-sidebar {
        display: none !important;
    }

    .hero-sidebar-show-btn {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding-bottom: 70px !important;
    }

    .mobile-bottom-nav {
        display: block;
    }

    .fab-container {
        display: flex !important;
        bottom: 90px !important;
        right: 20px !important;
    }

    .hero-pagination-dash {
        width: 15px !important;
        margin: 0 3px !important;
    }

    .carousel-card-container {
        width: 130px !important;
        flex: 0 0 130px !important;
        height: 195px !important;
        border-radius: 8px !important;
    }

    .carousel-card-container .card-image,
    .carousel-card-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Adjust Search Bar & Remove Mobile WebKit Indentation Offset */
    #search-input {
        font-size: 16px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    #search-input::-webkit-search-decoration,
    #search-input::-webkit-search-cancel-button,
    #search-input::-webkit-search-results-button,
    #search-input::-webkit-search-results-decoration {
        -webkit-appearance: none !important;
        display: none !important;
    }

    .search-chip-btn:hover,
    .search-chip-btn:focus-visible {
        background: rgba(229, 9, 20, 0.22) !important;
        border-color: rgba(229, 9, 20, 0.6) !important;
        color: #fff !important;
        transform: translateY(-1px);
    }

    .search-chip-btn:active {
        transform: scale(0.96);
    }

    /* Mobile Top 10 Badges & Sizing */
    /* Mobile Top 10 Badges & Sizing */
    .anime-top10-card {
        flex: 0 0 150px !important;
        width: 150px !important;
        height: 200px !important;
    }

    .anime-top10-card.rank-10 {
        flex: 0 0 170px !important;
        width: 170px !important;
    }

    .anime-top10-card .top10-poster-wrap {
        width: 112px !important;
        height: 168px !important;
        border-radius: 8px !important;
    }

    .anime-top10-card .top10-rank-number {
        font-size: 80px !important;
        left: -8px !important;
        bottom: 0px !important;
        -webkit-text-stroke: 3px #595959 !important;
    }

    .anime-top10-card .top10-rank-number.rank-double-digit {
        font-size: 68px !important;
    }

    .top10-carousel-card {
        flex: 0 0 150px !important;
        width: 150px !important;
        height: 200px !important;
    }

    .top10-carousel-card.top10-card-10 {
        flex: 0 0 170px !important;
        width: 170px !important;
        margin-left: 8px !important;
    }

    .top10-carousel-card .carousel-poster-wrap {
        width: 112px !important;
        height: 168px !important;
        border-radius: 8px !important;
    }

    .top10-carousel-card .landing-top10-svg-rank {
        width: 65px !important;
        height: 115px !important;
        left: -8px !important;
    }

    .top10-carousel-card.top10-card-10 .landing-top10-svg-rank {
        width: 90px !important;
        left: -10px !important;
    }

    .top10-carousel-card .landing-rank-text {
        font-size: 80px !important;
        stroke-width: 3px !important;
    }

    .top10-carousel-card.top10-card-10 .landing-rank-text {
        font-size: 68px !important;
    }

    /* Hide Footer everywhere except Account View */
    .webapp-main-footer {
        display: none !important;
    }

    body.view-account .webapp-main-footer,
    #account-view:not([style*="display: none"])~.webapp-main-footer {
        display: block !important;
    }

    /* Video Player Mobile Optimizations */
    #player-fullscreen-btn,
    #btn-fullscreen,
    #live-tv-btn-fullscreen,
    .coco-btn-fullscreen {
        display: none !important;
    }

    #live-tv-btn-watchparty,
    #watch-party-status-pill {
        display: none !important;
    }

    #live-tv-mini-buffer-toggle,
    #live-tv-buffer-toggle {
        display: none !important;
    }

    #player-back-btn,
    #live-tv-back-btn {
        display: none !important;
    }

    #btn-player-miniplayer,
    #live-tv-btn-miniplayer {
        display: inline-flex !important;
    }

    /* Notification Bottom Sheet & Downloads Drawer Mobile Styling */
    .console-drawer {
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        border-radius: 20px 20px 0 0 !important;
        height: 60vh !important;
        max-height: 80vh !important;
        bottom: -100% !important;
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
        box-sizing: border-box !important;
    }

    .console-drawer.open {
        bottom: 0 !important;
    }

    /* Hero Banner Mobile Clean View */
    #hero-age-rating-pill,
    #hero-meta-age-badge,
    #hero-network-badge,
    .network-badge,
    .hero-genres,
    #hero-genres,
    .hero-genre {
        display: none !important;
    }

    /* Trailer Playing on Hero Banner */
    .hero-banner.trailer-active .hero-title-logo,
    .hero-banner.trailer-active #hero-title-text {
        opacity: 0 !important;
        transform: translateY(-8px) !important;
        pointer-events: none !important;
        transition: opacity 0.4s ease, transform 0.4s ease !important;
    }

    .hero-banner.trailer-active #hero-btn-play,
    .hero-banner.trailer-active #hero-btn-more {
        display: none !important;
    }

    .hero-banner.trailer-active .hero-trailer-controls-pill {
        display: inline-flex !important;
    }

    /* Continue Watching Play Button Visible by Default */
    .cw-play-overlay {
        opacity: 0.92 !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    /* Scale Down Stats for Nerds on Mobile */
    .stats-for-nerds {
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: 320px !important;
        max-height: 65vh !important;
        font-size: 10px !important;
        padding: 10px 12px !important;
    }

    /* Compact Audio & Subtitles Dialog */
    .coco-audio-subs-modal {
        width: min(340px, 94vw) !important;
        bottom: 72px !important;
        right: 10px !important;
        padding: 12px !important;
    }

    /* Short Dramas Clean View Mode */
    .drama-feed-column.clean-view-mode .drama-action-column,
    .drama-feed-column.clean-view-mode .drama-bottom-info,
    .drama-feed-column.clean-view-mode .drama-floating-nav,
    .drama-feed-column.clean-view-mode .drama-video-top-bar {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease;
    }

    .drama-clean-view-exit-btn {
        display: none;
        position: absolute;
        bottom: 24px;
        right: 18px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        color: #fff;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 60;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
        pointer-events: auto !important;
    }

    .drama-feed-column.clean-view-mode .drama-clean-view-exit-btn {
        display: flex !important;
    }

    .tv-keyboard-container {
        display: none !important;
    }

    #search-left-panel {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #btn-toggle-keyboard,
    #btn-reopen-keyboard {
        display: none !important;
    }

    #btn-voice-search {
        display: inline-flex !important;
    }

    /* Make carousels edge-to-edge */
    .carousel-row {
        gap: 10px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .carousel-section h2 {
        padding-left: 15px;
        font-size: 18px;
    }

    .carousel-causal-subtitle {
        padding-left: 15px;
    }

    #new-hot-view {
        padding-top: 0 !important;
    }

    /* Modal Mobile Full-Bleed & Sliding Animations */
    #detail-modal {
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: #141418 !important;
        overflow: hidden !important;
    }

    .netflix-details-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        animation: detailSlideInRight 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    #detail-modal.closing .netflix-details-modal {
        animation: detailSlideOutRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    /* Anime & Manga Modals Full-Bleed Mobile Fullscreen */
    .anime-modal-backdrop {
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: #141418 !important;
        overflow: hidden !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        z-index: 10000 !important;
    }

    .anime-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        animation: detailSlideInRight 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .anime-modal-backdrop.closing .anime-modal-content {
        animation: detailSlideOutRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    .anime-modal-hero,
    .manga-modal-hero {
        min-height: 260px !important;
        max-height: none !important;
        height: 280px !important;
        padding: 20px 16px !important;
        border-radius: 0 !important;
    }

    .adm-details-body {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 18px 16px !important;
    }

    .adm-body-right {
        width: 100% !important;
    }

    .anime-modal-close {
        top: max(16px, env(safe-area-inset-top, 16px)) !important;
        right: 16px !important;
        width: 36px !important;
        height: 36px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .adm-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    .adm-meta-row {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .adm-synopsis {
        font-size: 13px !important;
        -webkit-line-clamp: 3 !important;
    }

    .adm-action-row {
        width: 100% !important;
        gap: 10px !important;
    }

    .adm-action-row .btn-hero {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 14px !important;
        padding: 11px 16px !important;
        border-radius: 24px !important;
    }

    .anime-episodes-control-bar {
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .anime-episodes-grid {
        padding: 10px 16px 80px 16px !important;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        gap: 10px !important;
    }

    .manga-chapter-list {
        padding: 10px 16px 80px 16px !important;
    }

    @keyframes detailSlideInRight {
        from {
            transform: translateX(100%);
            opacity: 0.85;
        }

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

    @keyframes detailSlideOutRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }

        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }

    /* Live TV Nav Switcher Bottom Segmented Pill */
    .live-hub-nav-switcher {
        position: fixed !important;
        bottom: calc(var(--bottom-nav-height, 64px) + 14px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 9999 !important;
        background: rgba(20, 20, 26, 0.92) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 999px !important;
        padding: 4px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75) !important;
        gap: 6px !important;
    }

    .live-hub-tab-btn {
        padding: 6px 14px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
    }

    /* Blur gradient overlay for mobile details screen */
    .banner-gradient {
        height: 60% !important;
        background: linear-gradient(to bottom, transparent 0%, rgba(24, 24, 24, 0.4) 30%, rgba(24, 24, 24, 0.95) 80%, #181818 100%) !important;
    }

    .modal-title-text {
        font-size: 1.6rem !important;
    }

    .modal-description {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .episode-title {
        font-size: 13px !important;
    }

    .nav-plus-btn span {
        display: none !important;
    }



    .filters-bar {
        padding-left: 15px !important;
    }


    /* Mobile modal banner & actions */
    .modal-banner {
        height: clamp(240px, 36vh, 310px) !important;
    }

    .banner-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        left: 18px !important;
        right: 18px !important;
        bottom: 14px !important;
    }

    .modal-title-text {
        text-align: left !important;
        font-size: 1.45rem !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .banner-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

    .banner-actions::-webkit-scrollbar {
        display: none !important;
    }

    .play-download-container {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .play-download-container button,
    .play-download-container #modal-btn-play {
        position: relative !important;
        width: auto !important;
        height: 42px !important;
        padding: 0 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        z-index: 1 !important;
    }

    .play-download-container .download-progress-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2 !important;
    }

    .circle-btn-action {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    .netflix-rating-group {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    /* Fix metadata wrapping, remove inner scrollbar, clamp description with tap to expand */
    .details-body-left {
        width: 100% !important;
        overflow: visible !important;
    }

    .modal-desc-text {
        font-size: 13px !important;
        line-height: 1.45 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        cursor: pointer;
        position: relative;
    }

    .modal-desc-text.expanded {
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .modal-details-body {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
        flex-shrink: 0 !important;
        max-width: 100vw;
        flex-direction: column !important;
        padding: 16px 18px !important;
        gap: 16px !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .details-body-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        gap: 8px !important;
        font-size: 12.5px !important;
        overflow: visible !important;
    }

    #reviews-section-container,
    .reviews-section {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 20px !important;
    }

    .split-details-footer {
        border-top: none !important;
        padding: 0 16px !important;
        margin-top: 24px !important;
    }

    .mobile-trailer-btn {
        display: inline-flex !important;
    }

    #trailers-section {
        display: none !important;
    }

    /* Netflix-style horizontal row layout for episodes on mobile */
    .episode-item-wrapper {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 10px 0 !important;
    }

    .episode-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        gap: 12px !important;
        margin: 0 !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .episode-index-num {
        display: none !important;
    }

    .episode-thumbnail-container {
        width: 115px !important;
        min-width: 115px !important;
        max-width: 115px !important;
        height: 65px !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        position: relative !important;
        flex: 0 0 115px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        background-color: #1a1a1a !important;
    }

    .episode-thumbnail {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .episode-play-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
    }

    .episode-play-icon {
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Download source mobile layout: info on left, circular download button on right */
    .download-source-item {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 10px 14px !important;
    }

    .download-source-item > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .download-source-item > div:last-child {
        width: auto !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .download-source-item .stream-circular-dl-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        background: rgba(255, 255, 255, 0.08);
        border: 1.5px solid rgba(255, 255, 255, 0.2);
        color: #ffffff;
        cursor: pointer;
        padding: 0;
        box-sizing: border-box;
        transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    }

    .download-source-item .stream-circular-dl-btn:hover {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.4);
        transform: scale(1.06);
    }

    .download-source-item .stream-circular-dl-btn.downloaded {
        background: rgba(34, 197, 94, 0.15) !important;
        border: 1.5px solid #22c55e !important;
        color: #22c55e !important;
    }

    .download-source-item .stream-circular-dl-btn.downloaded:hover {
        background: rgba(34, 197, 94, 0.28) !important;
        transform: scale(1.08);
    }

    .download-source-item .stream-circular-dl-btn.downloading {
        background: rgba(229, 9, 20, 0.12) !important;
        border: 1.5px solid #e50914 !important;
        color: #e50914 !important;
    }

    .download-source-item .stream-circular-dl-btn.downloading svg {
        animation: spin 1.2s linear infinite;
    }

    .download-source-item .stream-circular-dl-btn.failed {
        background: rgba(239, 68, 68, 0.15) !important;
        border: 1.5px solid #ef4444 !important;
        color: #ef4444 !important;
    }

    .download-source-item .stream-circular-dl-btn.failed:hover {
        background: rgba(239, 68, 68, 0.28) !important;
        transform: scale(1.08);
    }

    /* Hide desktop download buttons strictly on mobile viewports */
    .download-source-item .btn-action-dl:not(.stream-circular-dl-btn),
    .download-source-item .dl-dropdown-wrapper {
        display: none !important;
    }

    /* Episode row layout: info in middle, download button on right */
    .episode-info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;
        box-sizing: border-box;
    }

    .episode-title-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .episode-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .episode-duration {
        font-size: 11.5px !important;
        color: #8c8c8e !important;
        font-weight: 500 !important;
    }

    .episode-desc {
        font-size: 12px !important;
        line-height: 1.35 !important;
        color: #8c8c8e !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        max-height: 33px !important;
    }

    .mobile-episode-footer-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 0 0 auto !important;
        flex-shrink: 0 !important;
    }

    .mobile-episode-num {
        display: none !important;
    }

    .mobile-episode-footer-wrapper .btn-episode-download,
    .btn-episode-download {
        margin: 0 0 0 8px !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        padding: 4px !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
    }

    .search-input-mobile {
        font-size: 16px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        padding: 10px 45px 10px 15px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px;
        width: calc(100% - 20px);
        box-sizing: border-box;
    }

    .search-right-header {
        padding: 0 !important;
        justify-content: center !important;
    }

    .mobile-voice-btn {
        right: 25px !important;
    }

    .netflix-player-container:not(.idle) .btn-skip-intro {
        bottom: 120px !important;
        right: 20px !important;
    }

    .netflix-player-container.idle .btn-skip-intro {
        bottom: 30px !important;
        right: 20px !important;
    }

    .btn-skip-intro {
        font-size: 13px !important;
        padding: 7px 14px !important;
    }

    .circle-btn-action {
        width: 38px !important;
        height: 38px !important;
    }

    .circle-btn-action svg {
        width: 18px !important;
        height: 18px !important;
    }

    .details-meta-row {
        gap: 8px !important;
        flex-wrap: wrap;
    }

    #modal-poster {
        max-height: 250px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .details-body-right {
        display: flex !important;
    }

    .episodes-list {
        padding: 0 !important;
    }

    .episode-card {
        flex-direction: column !important;
    }

    .episode-img-wrapper {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        margin-bottom: 10px;
        border-radius: 4px;
        overflow: hidden;
    }

    .episode-header {
        align-items: center !important;
    }

    .episode-header-text {
        font-size: 14px !important;
    }

    .episodes-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        text-align: left !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 16px !important;
    }

    .episodes-header h3 {
        display: none !important;
    }

    .episodes-header-actions,
    .episodes-header > div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: auto !important;
        flex-wrap: wrap !important;
    }

    .grid-container,
    .trending-discover-grid {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
        gap: 10px !important;
    }

    #search-results.grid-container,
    #search-initial-trending-wrap .trending-discover-grid {
        margin-left: -8px !important;
        margin-right: -8px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Mobile Downloads Screen Responsive Layout */
    .downloads-page-container {
        padding: 16px 12px 90px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .downloads-header-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        margin-bottom: 18px !important;
    }

    .downloads-tabs-row {
        gap: 16px !important;
        width: 100% !important;
        align-items: center !important;
    }

    #tab-downloaded.downloads-tab {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    #tab-recently-deleted.downloads-tab {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .downloads-actions-row {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    #btn-download-settings {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }

    #btn-cleanup-watched {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
}

/* Downloads Screen List Layout (Universal: Desktop & Mobile) */
#downloads-results,
#downloads-results.grid-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    padding: 6px 0 80px 0 !important;
    width: 100% !important;
}

.download-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease !important;
    user-select: none !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.download-list-item:hover,
.download-list-item:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.download-item-thumb {
    position: relative !important;
    width: 120px !important;
    height: 68px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #18181b !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.download-thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.download-item-play-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease !important;
}

.download-list-item:hover .download-item-play-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
}

.download-item-play-icon {
    width: 28px !important;
    height: 28px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.download-item-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
}

.download-item-title {
    color: #ffffff !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.download-item-meta {
    color: #8e8e93 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.download-item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.download-item-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.download-item-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: scale(1.05) !important;
}

.download-item-btn.btn-dl-del {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.2) !important;
}

.download-item-btn.btn-dl-del:hover {
    background: rgba(248, 113, 113, 0.15) !important;
}

.download-item-chevron {
    color: #71717a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-right: 4px !important;
}

@media (max-width: 768px) {
    .download-list-item {
        padding: 10px 14px !important;
        gap: 12px !important;
        border-radius: 10px !important;
    }
    .download-item-thumb {
        width: 96px !important;
        height: 54px !important;
        border-radius: 6px !important;
    }
    .download-item-title {
        font-size: 14.5px !important;
    }
}

.watch-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: #e50914;
    z-index: 10;
    border-bottom-left-radius: 4px;
}


/* Title Logo Modal Styles */
.modal-title-logo {
    max-width: 385px;
    width: auto;
    max-height: 125px;
    margin-bottom: 20px;
    object-fit: contain;
    object-position: left bottom;
}

@media (max-width: 768px) {
    .modal-title-logo {
        max-width: 290px !important;
        max-height: 90px !important;
        margin: 0 0 16px 0 !important;
        object-position: left bottom !important;
    }
}

/* Frosted play button on mobile detailed screen */
@media (max-width: 768px) {
    #modal-btn-play {
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
}

/* Global fix for download panel scrolling */
.download-sources-container {
    max-height: 480px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    /* Make modal truly edge to edge on mobile */


    /* Make download panel edge to edge */


    .download-sources-container {
        padding: 15px 20px !important;
        max-height: 400px !important;
        /* Smaller on mobile to fit screen */
    }

    .download-source-item {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        padding: 15px 20px !important;
    }
}

/* Fix grid container overflow on mobile */
.movie-card {
    min-width: 0;
}

.movie-card h4,
.movie-card p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Search History Mobile Layout */
@media (max-width: 768px) {
    .search-history-dropdown {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(20, 20, 20, 0.98) !important;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important;
    }
}

/* mobile-season-alignment */
@media (max-width: 768px) {
    #tv-series-container {
        padding: 0 16px !important;
        margin-top: 15px !important;
    }

    .episodes-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 14px !important;
        padding: 0 !important;
    }

    .episodes-header > div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: auto !important;
        flex-wrap: wrap !important;
    }

    #btn-download-season {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        padding: 7px 14px !important;
        border-radius: 6px !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .season-dropdown {
        width: auto !important;
        min-width: 105px !important;
        max-width: fit-content !important;
        font-size: 13.5px !important;
        padding: 7px 30px 7px 12px !important;
        border-radius: 6px !important;
        background-color: #242424 !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        flex-shrink: 0 !important;
    }
}

/* Robust Movie Download Panel */
.movie-download-panel-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    opacity: 0;
    margin-bottom: 0;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    box-sizing: border-box;
}

.movie-download-panel-wrapper.expanded {
    max-height: 600px;
    opacity: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.movie-download-panel-wrapper .download-sources-container {
    padding: 24px 48px;
    max-height: 500px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .movie-download-panel-wrapper .download-sources-container {
        padding: 20px 24px;
    }
}

.details-screen-content {
    display: flex;
    flex-direction: column;
}

/* My List Layout */
.mylist-layout-wrapper {
    padding: 40px 60px;
}

@media (max-width: 768px) {
    .mylist-layout-wrapper {
        padding: 16px 15px 80px 15px !important;
    }

    .account-layout-wrapper {
        padding: 16px 15px 80px 15px !important;
    }
}

/* ==========================================
   Account Layout Wrapper
   ========================================== */
.account-layout-wrapper {
    padding: 40px 60px;
}

/* ==========================================
   Account Top Cards Carousel (Desktop & Mobile Layout)
   ========================================== */
#account-view,
.account-layout-wrapper {
    padding: 36px 6%;
    width: 100%;
    box-sizing: border-box;
}

.account-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    width: 100%;
}

#account-page-main-title {
    color: white;
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.account-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-join-party-header-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 4px 5px 4px 12px;
    gap: 8px;
}

#account-party-code-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    width: 135px;
    font-weight: 500;
}

.account-join-party-header-box button {
    background: #e50914;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
}

.account-header-btn-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

#account-dmca-nav-btn {
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    background: rgba(229, 9, 20, 0.12);
    border: 1px solid rgba(229, 9, 20, 0.35);
    color: #ffffff;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#account-settings-gear-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

#account-logout-btn {
    width: auto;
    padding: 10px 22px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.account-carousel-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
}

.account-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.account-cards-grid .account-card-panel {
    width: 100%;
    box-sizing: border-box;
}

.account-carousel-arrow {
    display: none;
}

@media (max-width: 768px),
((orientation: landscape) and (max-height: 520px)) {

    #account-view,
    .account-layout-wrapper {
        padding: 20px 16px 140px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .account-header-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    #account-page-main-title {
        font-size: 24px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .account-header-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .account-join-party-header-box {
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 8px 6px 12px !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 10px !important;
    }

    #account-party-code-input {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 13.5px !important;
    }

    .account-header-btn-group {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .account-header-btn-group a,
    .account-header-btn-group button {
        flex: 1 1 0 !important;
        height: 40px !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: nowrap !important;
        gap: 6px !important;
    }

    #account-settings-gear-btn {
        width: auto !important;
        border-radius: 8px !important;
    }

    .account-carousel-wrapper {
        margin-bottom: 24px !important;
        width: 100% !important;
    }

    .account-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .account-card-panel {
        width: 100% !important;
        background: #19191d !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 14px !important;
        padding: 18px 16px !important;
        box-sizing: border-box !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    }

    .account-card-panel h3 {
        font-size: 20px !important;
    }

    .account-card-panel button,
    .account-card-panel .account-btn-red,
    .account-card-panel .account-btn-dark {
        padding: 12px 14px !important;
        font-size: 13.5px !important;
        border-radius: 8px !important;
    }
}

@media (min-width: 769px) {
    .account-cards-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 24px !important;
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .account-cards-grid::-webkit-scrollbar {
        display: none !important;
    }

    /*
     * Desktop Sizing:
     * Sized like when only 3 items existed.
     * Shows 3 full cards and peeks a bit (~18-20%) of the 4th item (Playback & Previews).
     * Sizing formula: calc((100% - 72px) / 3.18) gives ~3.18 cards in viewport width.
     */
    .account-cards-grid .account-card-panel {
        flex: 0 0 calc((100% - 72px) / 3.18) !important;
        min-width: 320px !important;
        box-sizing: border-box !important;
    }

    .account-carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(22, 22, 28, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.75);
        transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        opacity: 0;
        pointer-events: none;
    }

    .account-carousel-arrow.visible {
        opacity: 0.92;
        pointer-events: auto;
    }

    .account-carousel-arrow.prev {
        left: -20px;
    }

    .account-carousel-arrow.next {
        right: -20px;
    }

    .account-carousel-arrow.visible:hover {
        opacity: 1;
        background: #e50914;
        border-color: #ff333f;
        transform: translateY(-50%) scale(1.12);
        box-shadow: 0 8px 26px rgba(229, 9, 20, 0.6);
    }
}

/* ==========================================
   Continue Watching & Watch History Logic
   ========================================== */

.cw-card {
    position: relative;
    width: 260px;
    height: 216px;
    box-sizing: border-box;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    background: #181818;
    transition: transform 0.2s ease, z-index 0.2s ease;
    display: flex;
    flex-direction: column;
}

.cw-card:hover,
.cw-card:focus {
    transform: scale(1.05);
    z-index: 10;
    outline: none;
}

/* ── CONTINUE WATCHING & MY LIST SKELETON LOADERS ────────────────────── */
.cw-skeleton-section,
.mylist-skeleton-section {
    position: relative;
    margin-bottom: 24px;
    transition: opacity 0.3s ease;
}

.cw-skeleton-card {
    position: relative;
    width: 260px;
    height: 216px;
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #181818;
    display: flex;
    flex-direction: column;
}

.cw-skeleton-thumb {
    width: 100%;
    height: 146px;
    aspect-ratio: 16/9;
    flex-shrink: 0;
    background: linear-gradient(90deg, #181818 25%, #2a2a2a 37%, #181818 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2.2s ease-in-out infinite;
}

.cw-skeleton-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cw-skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #1e1e1e 25%, #2c2c2c 37%, #1e1e1e 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2.2s ease-in-out infinite;
}

.mylist-skeleton-card {
    width: 165px;
    flex: 0 0 165px;
    height: 247px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #181818;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.mylist-skeleton-thumb {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #181818 25%, #2a2a2a 37%, #181818 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2.2s ease-in-out infinite;
    border-radius: 8px;
}

/* In-card shimmer overlay for lazy loading thumbnails */
.cw-thumbnail-container .cw-skeleton-shimmer,
.mylist-card .mylist-skeleton-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #181818 25%, #282828 37%, #181818 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2.2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.cw-thumbnail-container {
    width: 100%;
    aspect-ratio: 16/9;
    height: 146px;
    flex-shrink: 0;
    position: relative;
    background: #222;
}

.cw-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease-in-out, filter 0.25s ease;
}

.cw-thumbnail.loaded,
.cw-thumbnail.cw-loaded {
    opacity: 1;
}

.cw-card:hover .cw-thumbnail,
.cw-card:focus .cw-thumbnail {
    filter: brightness(0.85);
}

.mylist-card .carousel-poster {
    transition: opacity 0.2s ease-in;
}

/* Staggered card entrance animation */
.cw-card.entering {
    animation: cardEnterFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardEnterFade {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }

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

.cw-drama-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    background: linear-gradient(135deg, rgba(255, 45, 85, 0.95), rgba(170, 0, 255, 0.95));
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 4;
    pointer-events: none;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cw-drama-badge-icon {
    font-size: 11px;
    line-height: 1;
}

.cw-drama-badge-text {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.cw-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    color: white;
    z-index: 5;
}

.cw-card:hover .cw-delete-btn,
.cw-card:focus .cw-delete-btn,
.cw-delete-btn.focused {
    opacity: 1;
}

.cw-delete-btn:hover,
.cw-delete-btn.focused {
    background: #e50914;
}

.cw-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    transition: opacity 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
    pointer-events: none;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-card:hover .cw-play-overlay,
.cw-card:focus .cw-play-overlay,
.cw-card.focused .cw-play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.cw-play-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(15, 15, 15, 0.72);
    border: 2px solid rgba(255, 255, 255, 0.92);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cw-play-circle svg {
    margin-left: 3px;
    display: block;
}

.cw-progress-bar-bg {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    z-index: 6 !important;
    pointer-events: none !important;
}

.cw-progress-bar-fill {
    height: 100% !important;
    background: #e50914 !important;
    border-radius: 0 2px 2px 0 !important;
    box-shadow: 0 0 6px rgba(229, 9, 20, 0.6) !important;
}

.cw-info {
    padding: 10px 12px;
    height: 70px;
    box-sizing: border-box;
    flex: 0 0 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cw-title {
    color: white;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cw-subtitle {
    color: #999;
    font-size: 12px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.cw-view-all-card {
    width: 260px !important;
    height: 216px !important;
    flex: 0 0 260px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.cw-view-all-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: white;
    transition: all 0.2s ease;
}

.vertical-view-all-card:hover .cw-view-all-circle,
.vertical-view-all-card:focus .cw-view-all-circle,
.cw-view-all-card:hover .cw-view-all-circle,
.cw-view-all-card:focus .cw-view-all-circle {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.cw-view-all-card .cw-title,
.vertical-view-all-card .cw-title {
    font-size: 15px;
    text-align: center;
    flex: 0 0 auto !important;
    white-space: normal;
    overflow: visible;
}

/* Grid Layout for Full History */
#watch-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.grid-cw-card {
    width: 100% !important;
    /* Take full width of grid cell */
}

/* Mobile Adjustments */
@media (max-width: 768px) {

    .cw-card,
    .cw-view-all-card {
        width: 200px !important;
        height: 172px !important;
        flex: 0 0 200px !important;
    }

    .cw-thumbnail-container {
        height: 112px !important;
    }

    .cw-play-circle {
        width: 38px;
        height: 38px;
    }

    .cw-play-circle svg {
        width: 18px;
        height: 18px;
    }

    .cw-info {
        height: 60px !important;
        flex: 0 0 60px !important;
        padding: 8px 10px;
    }

    #watch-history-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .cw-title {
        font-size: 13px;
    }

    .cw-subtitle {
        font-size: 11px;
    }
}

/* EPG Skeletons & Dynamic Elements */
.epg-skeleton-block {
    height: 50px;
    top: 5px;
    background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    position: absolute;
    box-sizing: border-box;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

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

.epg-program-block.live-now {
    background-color: #555555;
    /* Distinctive gray */
    border-left-color: #2196F3;
    font-weight: bold;
}

.epg-program-block.live-now:hover {
    background-color: #666666;
}

.epg-program-block.past-program {
    background-color: #111111;
    color: #777777;
    border-left-color: #333333;
}

.epg-program-block.past-program .epg-program-title {
    color: #777777;
}

.epg-program-block.past-program .epg-program-time {
    color: #555555;
}

.epg-day-marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 5;
    pointer-events: none;
}

.epg-day-marker-label {
    position: absolute;
    top: -25px;
    left: 5px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    white-space: nowrap;
    text-transform: uppercase;
}



#epg-region-selector,
#epg-language-selector {
    display: none;
}

#epg-region-selector.active,
#epg-language-selector.active {
    display: inline-block;
}


#epg-jump-to-live-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #2a2a2a;
    color: white;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s, left 0.3s, right 0.3s;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    border: 1px solid #444;
    display: flex;
    align-items: center;
    gap: 8px;
}

#epg-jump-to-live-btn.left {
    left: 140px;
    /* Right after sidebar */
    right: auto;
}

#epg-jump-to-live-btn.right {
    right: 30px;
    left: auto;
}

#epg-jump-to-live-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {
    #epg-jump-to-live-btn {
        display: none !important;
    }
}

.epg-toolbar select option {
    background: #222;
    color: white;
}


/* EPG Mobile Responsiveness */
@media (max-width: 768px) {
    .live-tv-hero {
        flex-direction: column !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: unset !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
        background: #0d0d11 !important;
        border-bottom: 1px solid #222 !important;
    }

    .live-tv-meta-layout {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        gap: 0 !important;
    }

    .live-tv-meta-player-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: unset !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .live-tv-mini-player-container {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }

    .live-tv-metadata-pane {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        height: auto !important;
    }

    .live-tv-meta-text {
        width: 100% !important;
        height: auto !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    .live-tv-meta-header-row {
        margin-bottom: 2px !important;
        gap: 6px !important;
    }

    #live-tv-meta-title,
    #live-meta-inspecting-title {
        font-size: 15px !important;
        line-height: 1.2 !important;
        margin: 0 0 2px 0 !important;
        -webkit-line-clamp: 1 !important;
        line-clamp: 1 !important;
    }

    #live-tv-meta-time,
    #live-meta-inspecting-time {
        font-size: 11px !important;
        margin: 0 0 2px 0 !important;
    }

    #live-tv-meta-desc,
    #live-meta-inspecting-desc {
        font-size: 11px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    .live-tv-desc-container {
        margin-bottom: 4px !important;
    }

    /* Hide view mode toggle on mobile - mobile is locked to Grid View */
    #epg-view-mode-toggle,
    #epg-view-mode-btn,
    .epg-view-mode-btn {
        display: none !important;
    }

    .epg-toolbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 4px 10px !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        flex-shrink: 0 !important;
        background-color: #14141c !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .epg-toolbar::-webkit-scrollbar {
        display: none !important;
    }

    .epg-search-container {
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    .epg-toolbar .custom-select-container,
    .epg-toolbar select,
    .epg-source-select,
    .epg-toolbar .custom-select-wrapper {
        flex-shrink: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
    }

    .epg-genres-scroll {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .epg-genres-scroll::-webkit-scrollbar {
        display: none !important;
    }

    .epg-genre-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 5px 12px !important;
        font-size: 12px !important;
    }

    .epg-date-nav {
        display: flex;
        overflow-x: auto;
        padding-bottom: 5px;
        width: 100%;
    }

    .epg-sidebar {
        width: 60px;
        min-width: 60px;
    }

    #epg-times-corner {
        width: 60px;
        min-width: 60px;
    }

    .epg-channel-row span {
        display: none;
    }

    .epg-channel-row img {
        max-width: 100%;
        max-height: 35px;
    }

    #live-tv-view.view-section.active {
        height: calc(100dvh - 60px) !important;
        max-height: calc(100dvh - 60px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .main-content.live-tv-active-mode {
        overflow: hidden !important;
        padding-bottom: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .live-tv-container {
        height: 100% !important;
        max-height: 100% !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
}

/* Live TV Top Bar & Fullscreen Overrides */
.live-tv-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
}

.live-tv-top-bar button {
    pointer-events: auto;
}

/* Only show top bar header in fullscreen mode */
.live-tv-mini-player-container:not(.fullscreen-active):not(:fullscreen):not(:-webkit-full-screen) .live-tv-top-bar {
    display: none !important;
}

.live-tv-mini-player-container.user-active .live-tv-top-bar,
.live-tv-top-bar.active {
    opacity: 1;
    pointer-events: auto;
}

.live-tv-mini-player-container.user-active .live-tv-controls,
.live-tv-controls.active {
    opacity: 1;
    pointer-events: auto;
}

.live-tv-back-btn,
.live-tv-top-action-btn {
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

.live-tv-top-action-btn:hover,
.live-tv-back-btn:hover {
    background: rgba(229, 9, 20, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.08);
}

.live-tv-top-action-btn svg,
.live-tv-back-btn svg {
    width: 20px;
    height: 20px;
}

/* Hide back button and status/progress bar in mini player mode */
.live-tv-mini-player-container:not(.fullscreen-active):not(:fullscreen):not(:-webkit-full-screen) .live-tv-back-btn,
.live-tv-mini-player-container:not(.fullscreen-active):not(:fullscreen):not(:-webkit-full-screen) .live-tv-top-action-btn {
    display: none !important;
}

.live-tv-mini-player-container:not(.fullscreen-active):not(:fullscreen):not(:-webkit-full-screen) .live-tv-progress-bar {
    display: none !important;
}

.live-tv-mini-player-container:not(.fullscreen-active):not(:fullscreen):not(:-webkit-full-screen) .gear-btn-wrapper {
    display: none !important;
}

.live-tv-mini-player-container:not(.fullscreen-active):not(:fullscreen):not(:-webkit-full-screen) #live-tv-btn-quality {
    display: none !important;
}

.live-tv-mini-player-container:not(.fullscreen-active):not(:fullscreen):not(:-webkit-full-screen) #live-tv-btn-live {
    display: none !important;
}

/* Hide live badge until the channel stream has loaded */
.live-tv-mini-player-container:not(.stream-loaded) .live-tv-badge-pill {
    display: none !important;
}

.live-tv-mini-player-container.fullscreen-active .live-tv-back-btn,
.live-tv-mini-player-container:fullscreen .live-tv-back-btn,
.live-tv-mini-player-container:-webkit-full-screen .live-tv-back-btn {
    display: flex !important;
}

.live-tv-mini-player-container.fullscreen-active .live-tv-progress-bar,
.live-tv-mini-player-container:fullscreen .live-tv-progress-bar,
.live-tv-mini-player-container:-webkit-full-screen .live-tv-progress-bar {
    display: block !important;
}

.live-tv-back-btn:hover {
    background: rgba(229, 9, 20, 0.85);
    border-color: #e50914;
    transform: scale(1.08);
}

.live-tv-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow: hidden;
}

.live-tv-header-channel {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-tv-header-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   MODERN GO LIVE & LIVE BADGE STYLING
========================================= */
.coco-go-live-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(229, 9, 20, 0.18);
    border: 1px solid rgba(229, 9, 20, 0.65);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.3);
    outline: none;
    user-select: none;
}

.coco-go-live-btn:hover {
    background: #e50914;
    border-color: #ff3344;
    color: #ffffff;
    box-shadow: 0 0 18px rgba(229, 9, 20, 0.7);
    transform: scale(1.05);
}

.coco-go-live-btn:active {
    transform: scale(0.97);
}

.coco-go-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e50914;
    box-shadow: 0 0 6px #ff3344;
    animation: liveTvPulse 1.5s infinite ease-in-out;
}

.coco-go-live-btn:hover .coco-go-live-dot {
    background: #ffffff;
    box-shadow: 0 0 6px #ffffff;
}

/* Top-Right Badge (Hero & Fullscreen Live Player) */
.live-tv-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(229, 9, 20, 0.85);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.5);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.live-tv-badge-pill.buffered,
.live-tv-badge-pill.status-buffered,
.live-tv-badge-pill.dvr {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

.live-tv-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: liveTvPulse 1.5s infinite ease-in-out;
    transition: all 0.3s ease;
}

.live-tv-badge-pill.buffered .live-tv-dot,
.live-tv-badge-pill.status-buffered .live-tv-dot,
.live-tv-badge-pill.dvr .live-tv-dot {
    background: #fbbf24 !important;
    box-shadow: 0 0 6px #fbbf24 !important;
    animation: none !important;
}

@keyframes liveTvPulse {

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

    50% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

/* Fullscreen states for Live TV Container */
.live-tv-mini-player-container:fullscreen,
.live-tv-mini-player-container:-webkit-full-screen,
.live-tv-mini-player-container.fullscreen-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important;
    background: #000 !important;
    border-radius: 0 !important;
    display: flex !important;
}

.live-tv-mini-player-container:fullscreen #live-tv-video,
.live-tv-mini-player-container:-webkit-full-screen #live-tv-video,
.live-tv-mini-player-container.fullscreen-active #live-tv-video {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain !important;
}

.live-tv-mini-player-container:not(.fullscreen-active):not(:fullscreen):not(:-webkit-full-screen) #live-tv-mini-center-overlay {
    display: none !important;
}

.live-tv-mini-player-container:fullscreen #live-tv-mini-center-overlay,
.live-tv-mini-player-container:-webkit-full-screen #live-tv-mini-center-overlay,
.live-tv-mini-player-container.fullscreen-active #live-tv-mini-center-overlay {
    justify-content: center !important;
    align-items: center !important;
}

/* PVR Custom UI Elements */
.pvr-bookmark-tick {
    transition: transform 0.2s;
    cursor: pointer;
}

.pvr-bookmark-tick:hover {
    transform: scaleY(1.5);
    background: #fff !important;
}

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

.fade-image {
    transition: opacity 0.3s ease-in-out;
}

/* =========================================
   MILESTONE 2: STREAM HEALTH STATUS BADGES & DOTS
========================================= */

/* Channel Signal Bar Indicator in EPG Sidebar */
.epg-signal-bars {
    position: absolute;
    top: 7px;
    right: 7px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1.5px;
    height: 11px;
    width: 12px;
    z-index: 5;
    pointer-events: none;
}

.epg-signal-bars .bar {
    width: 2.5px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.25s ease, opacity 0.25s ease;
}

.epg-signal-bars .bar-1 {
    height: 3.5px;
}

.epg-signal-bars .bar-2 {
    height: 7px;
}

.epg-signal-bars .bar-3 {
    height: 11px;
}

/* Dynamic State: 🟢 3 Green Bars - Very Good Ping (<400ms / Online) */
.epg-signal-bars.status-good .bar-1,
.epg-signal-bars.status-good .bar-2,
.epg-signal-bars.status-good .bar-3,
.epg-signal-bars.status-online .bar-1,
.epg-signal-bars.status-online .bar-2,
.epg-signal-bars.status-online .bar-3 {
    background: #10b981;
}

/* Dynamic State: 🟡 2 Yellow Bars - Medium Ping (400-1200ms / Degraded) */
.epg-signal-bars.status-medium .bar-1,
.epg-signal-bars.status-medium .bar-2,
.epg-signal-bars.status-degraded .bar-1,
.epg-signal-bars.status-degraded .bar-2 {
    background: #f59e0b;
}

.epg-signal-bars.status-medium .bar-3,
.epg-signal-bars.status-degraded .bar-3 {
    background: rgba(255, 255, 255, 0.15);
}

/* Dynamic State: 🔴 1 Red Bar - High Ping (>1200ms / Poor) */
.epg-signal-bars.status-poor .bar-1 {
    background: #ef4444;
}

.epg-signal-bars.status-poor .bar-2,
.epg-signal-bars.status-poor .bar-3 {
    background: rgba(255, 255, 255, 0.15);
}

/* Dynamic State: ⚪ 3 Dim Grey Bars - Offline / Standby */
.epg-signal-bars.status-offline .bar,
.epg-signal-bars.status-standby .bar,
.epg-signal-bars.status-unknown .bar {
    background: rgba(255, 255, 255, 0.18);
}

/* Dynamic State: Subtle Shimmer Wave - Checking / Probing */
.epg-signal-bars.status-checking .bar,
.epg-signal-bars.status-probing .bar {
    background: rgba(245, 158, 11, 0.4);
    animation: signalWave 1.2s infinite ease-in-out;
}

.epg-signal-bars.status-checking .bar-1 {
    animation-delay: 0s;
}

.epg-signal-bars.status-checking .bar-2 {
    animation-delay: 0.2s;
}

.epg-signal-bars.status-checking .bar-3 {
    animation-delay: 0.4s;
}

@keyframes signalWave {

    0%,
    100% {
        background: rgba(255, 255, 255, 0.18);
    }

    50% {
        background: #f59e0b;
    }
}

/* Animations */
@keyframes statusCheckingPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 6px rgba(234, 179, 8, 0.8);
    }

    50% {
        opacity: 0.35;
        transform: scale(0.75);
        box-shadow: 0 0 2px rgba(234, 179, 8, 0.2);
    }
}

@keyframes statusOnlineGlow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.8), 0 0 9px rgba(34, 197, 94, 0.35);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 8px rgba(34, 197, 94, 1), 0 0 14px rgba(34, 197, 94, 0.6);
        transform: scale(1.08);
    }
}

@keyframes statusDegradedPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 5px rgba(249, 115, 22, 0.7);
    }

    50% {
        opacity: 0.5;
        box-shadow: 0 0 2px rgba(249, 115, 22, 0.3);
    }
}

/* Player Header Badge States */
.live-tv-badge-pill.status-online {
    background: rgba(34, 197, 94, 0.85);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.live-tv-badge-pill.status-online .live-tv-dot {
    background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.live-tv-badge-pill.status-checking {
    background: rgba(234, 179, 8, 0.35);
    border: 1px solid rgba(234, 179, 8, 0.6);
    color: #facc15;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.3);
}

.live-tv-badge-pill.status-checking .live-tv-dot {
    background: #facc15;
    box-shadow: 0 0 6px #facc15;
    animation: liveTvPulse 1s infinite ease-in-out;
}

.live-tv-badge-pill.status-offline {
    background: rgba(239, 68, 68, 0.3);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #f87171;
    box-shadow: none;
}

.live-tv-badge-pill.status-offline .live-tv-dot {
    background: #ef4444;
    animation: none;
    box-shadow: none;
}

.live-tv-badge-pill.status-degraded {
    background: rgba(249, 115, 22, 0.35);
    border: 1px solid rgba(249, 115, 22, 0.6);
    color: #fb923c;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.3);
}

.live-tv-badge-pill.status-degraded .live-tv-dot {
    background: #fb923c;
    box-shadow: 0 0 6px #fb923c;
}

/* Metadata Bar Health Pill */
.live-tv-health-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.live-tv-health-pill .health-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s ease;
}

.live-tv-health-pill.status-online {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

.live-tv-health-pill.status-online .health-dot {
    background: #22c55e;
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.8);
}

.live-tv-health-pill.status-checking {
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.4);
    color: #facc15;
}

.live-tv-health-pill.status-checking .health-dot {
    background: #eab308;
    box-shadow: 0 0 5px rgba(234, 179, 8, 0.8);
    animation: statusCheckingPulse 1.2s infinite ease-in-out;
}

.live-tv-health-pill.status-offline {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.live-tv-health-pill.status-offline .health-dot {
    background: #ef4444;
    box-shadow: none;
}

.live-tv-health-pill.status-degraded {
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.4);
    color: #fb923c;
}

.live-tv-health-pill.status-degraded .health-dot {
    background: #f97316;
}

/* ==========================================================================
   LIVE TV EPG GRID VIEW & DSTV-STYLE SINGLE CHANNEL GUIDE
   ========================================================================== */
.epg-view-toggle-group {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-left: 12px;
    flex-shrink: 0;
}

.epg-view-btn {
    background: transparent;
    border: none;
    color: #888;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.epg-view-btn.active {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.epg-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 16px;
    padding: 20px 24px 80px;
    background: #0e0e12;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@media (max-width: 768px) {
    .epg-grid-container {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-rows: max-content !important;
        align-content: start !important;
        gap: 8px !important;
        padding: 10px 8px 85px 8px !important;
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}

.epg-grid-card {
    background: #16161e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    position: relative;
    user-select: none;
    height: auto !important;
    min-height: 135px !important;
    max-height: 165px !important;
    box-sizing: border-box !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    content-visibility: auto;
    contain-intrinsic-size: 140px 170px;
}

@media (max-width: 768px) {
    .epg-grid-card {
        flex: unset !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 10px 6px !important;
        min-height: 110px !important;
        max-height: 140px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }
}

.epg-grid-card:hover {
    transform: translateY(-3px);
    border-color: rgba(229, 9, 20, 0.7);
    background: #1e1e28;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.epg-grid-card.selected-inspecting {
    border-color: #e50914 !important;
    background: #241418 !important;
    box-shadow: 0 0 14px rgba(229, 9, 20, 0.5) !important;
}

.epg-grid-card:active {
    transform: scale(0.98);
}

/* EPG Switch Animation */
@keyframes epgFadeSlideUp {
    0% {
        opacity: 0.15;
        transform: translateY(6px);
    }

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

.epg-animate-switch {
    animation: epgFadeSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* EPG Grid Shimmer Skeleton Cards */
.epg-grid-skeleton-card {
    display: flex !important;
    flex-direction: column !important;
    background: #181822 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 14px 10px !important;
    gap: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .epg-grid-skeleton-card {
        padding: 10px 6px !important;
        border-radius: 10px !important;
    }
}

.epg-grid-skeleton-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: epg-skeleton-shimmer 1.4s infinite;
}

@keyframes epg-skeleton-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.epg-skeleton-poster {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.09);
    margin: 0 auto 4px;
}

@media (max-width: 768px) {
    .epg-skeleton-poster {
        width: 48px;
        height: 48px;
        border-radius: 8px;
    }
}

.epg-skeleton-line {
    height: 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    width: 80%;
    margin: 0 auto;
}

.epg-skeleton-line.short {
    width: 50%;
    height: 8px;
}

.epg-grid-logo-box {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    padding: 6px;
    box-sizing: border-box;
}

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

.epg-grid-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #eee;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.epg-grid-sub {
    font-size: 11px;
    color: #8c8c9a;
    margin-top: 3px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.epg-grid-signal {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 10px;
}

.epg-grid-signal span {
    width: 2.5px;
    background: #22c55e;
    border-radius: 1px;
}

.epg-grid-signal span:nth-child(1) {
    height: 4px;
}

.epg-grid-signal span:nth-child(2) {
    height: 7px;
}

.epg-grid-signal span:nth-child(3) {
    height: 10px;
}

.epg-grid-signal.signal-good span {
    background: #22c55e;
}

.epg-grid-signal.signal-medium span:nth-child(1),
.epg-grid-signal.signal-medium span:nth-child(2) {
    background: #eab308;
}

.epg-grid-signal.signal-medium span:nth-child(3) {
    background: rgba(255, 255, 255, 0.18);
}

.epg-grid-signal.signal-poor span:nth-child(1) {
    background: #ef4444;
}

.epg-grid-signal.signal-poor span:nth-child(2),
.epg-grid-signal.signal-poor span:nth-child(3) {
    background: rgba(255, 255, 255, 0.18);
}

.epg-grid-signal.signal-offline span {
    background: rgba(255, 255, 255, 0.18);
}

.epg-grid-signal.signal-checking span {
    background: #eab308;
    animation: epgSignalPulse 1s infinite alternate;
}

@keyframes epgSignalPulse {
    0% {
        opacity: 0.35;
    }

    100% {
        opacity: 1;
    }
}

/* Guest "My Plan Only" Empty State with Animated SVG */
.epg-guest-locked-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    width: 100%;
    grid-column: 1 / -1;
    z-index: 10;
}

.epg-guest-svg-pulse {
    width: 90px;
    height: 90px;
    margin-bottom: 20px;
    animation: epgLockFloat 3s ease-in-out infinite alternate;
}

@keyframes epgLockFloat {
    0% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 4px 15px rgba(229, 9, 20, 0.3));
    }

    100% {
        transform: translateY(-8px) scale(1.04);
        filter: drop-shadow(0 12px 25px rgba(229, 9, 20, 0.6));
    }
}

.epg-guest-locked-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.epg-guest-locked-desc {
    font-size: 14px;
    color: #999;
    max-width: 440px;
    line-height: 1.55;
    margin-bottom: 24px;
}

.epg-guest-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.epg-btn-signup {
    background: #e50914;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.epg-btn-signup:hover {
    background: #b80710;
    transform: translateY(-1px);
}

.epg-btn-preview {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background 0.2s;
}

.epg-btn-preview:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Live TV Guide Tour Help Button */
.epg-guide-tour-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ddd;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.epg-guide-tour-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
    #epg-guide-tour-btn {
        display: none !important;
    }
}

/* DStv Single Channel Program Schedule */
.dstv-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: #12121a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    z-index: 10;
}

@media (max-width: 768px) {
    .dstv-schedule-header {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    .dstv-schedule-header .dstv-back-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .dstv-schedule-header .dstv-center-info {
        gap: 8px !important;
        flex: 1 !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    .dstv-schedule-header #dstv-guide-channel-name {
        font-size: 14px !important;
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .dstv-schedule-header .dstv-watch-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .dstv-schedule-header>div:last-child {
        display: none !important;
    }
}

.dstv-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.dstv-back-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.dstv-center-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dstv-watch-btn {
    background: #e50914;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, background 0.2s;
}

.dstv-watch-btn:hover {
    background: #b20710;
    transform: scale(1.03);
}

.dstv-schedule-list-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dstv-schedule-list {
    padding: 16px 24px 80px;
    background: #0d0d13;
    flex: 1;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

@media (max-width: 768px) {
    .dstv-schedule-list {
        padding: 10px 12px 80px !important;
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}

.dstv-whats-on-now-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #e50914;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(229, 9, 20, 0.7);
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    width: auto;
    min-width: 130px;
    max-width: 220px;
    pointer-events: auto;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, box-shadow 0.2s;
}

.dstv-whats-on-now-pill:hover {
    background: #ff1924;
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 6px 24px rgba(255, 25, 36, 0.85);
}

.dstv-whats-on-now-pill.top {
    top: 14px;
}

.dstv-whats-on-now-pill.bottom {
    bottom: 20px;
}

.dstv-whats-on-now-pill .live-dot-pulse {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px #ffffff;
    animation: livePillDotPulse 1.4s infinite ease-in-out;
}

@keyframes livePillDotPulse {

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

    50% {
        transform: scale(1.4);
        opacity: 0.5;
    }
}

.dstv-date-pill {
    font-size: 12px;
    font-weight: 800;
    color: #8c8c9a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0;
    margin-top: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dstv-program-row {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 4px 0;
    cursor: pointer;
    transition: background 0.15s;
    gap: 16px;
}

.dstv-program-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dstv-program-row.is-selected {
    background: rgba(0, 168, 255, 0.12);
    border-left: 3px solid #00a8ff;
}

.dstv-program-row.is-live {
    background: rgba(229, 9, 20, 0.12);
    border-left: 3px solid #e50914;
}

.dstv-prog-time {
    font-size: 13px;
    font-weight: 800;
    color: #00a8ff;
    width: 60px;
    flex-shrink: 0;
}

.dstv-prog-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex: 1;
}

/* ==========================================================================
   MINI-PLAYER SPLIT METADATA VIEW (DESKTOP VERTICAL LINE / MOBILE 2-DOT SLIDER)
   ========================================================================== */
.live-tv-meta-dual-wrap {
    display: flex;
    width: 100%;
    align-items: stretch;
    position: relative;
}

.live-tv-meta-dual-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
}

.live-meta-col {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
}

.live-meta-vertical-divider {
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0.25) 75%, transparent);
    margin: 0 10px;
    flex-shrink: 0;
}

.live-meta-dots {
    display: none !important;
}

@media (max-width: 768px) {
    .live-tv-meta-text {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .live-tv-meta-dual-wrap {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        overflow: hidden !important;
        touch-action: pan-y !important;
        user-select: none !important;
    }

    .live-meta-col {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .live-meta-vertical-divider {
        display: none !important;
    }

    .live-meta-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 12px auto 4px auto !important;
        gap: 8px !important;
    }
}

.live-meta-dot-btn {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.live-meta-dot-btn.active {
    background: #e50914;
    width: 18px;
    border-radius: 4px;
}

/* Live TV Top Right Close Area X Button */
.live-tv-close-top-btn {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-tv-close-top-btn:hover {
    background: rgba(229, 9, 20, 0.2);
    border-color: rgba(229, 9, 20, 0.6);
    color: #ff3344;
    transform: scale(1.08);
}

.live-tv-close-top-btn:active {
    transform: scale(0.94);
}

/* Fixture Match Bell Notification Button */
.btn-fixture-bell {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 6px;
    flex-shrink: 0;
}

.btn-fixture-bell:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffd266;
    border-color: rgba(255, 210, 102, 0.4);
    transform: scale(1.08);
}

.btn-fixture-bell.active {
    background: rgba(255, 210, 102, 0.2);
    border-color: rgba(255, 210, 102, 0.6);
    color: #ffd266;
}

/* ==========================================================================
   SWITCH TOGGLE & SLIDER STYLES
   ========================================================================== */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2b2b36;
    border-radius: 34px;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

input:checked+.slider {
    background-color: #e50914;
    border-color: #e50914;
}

input:checked+.slider:before {
    transform: translateX(20px);
}

/* ==========================================================================
   ADVANCED NETFLIX-STYLE DEVICE MANAGEMENT MODAL
   ========================================================================== */
.advanced-devices-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.adv-devices-box {
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.adv-devices-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.adv-devices-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.adv-devices-tabs::-webkit-scrollbar {
    display: none;
}

.adv-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #888;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .advanced-devices-modal {
        padding: 8px !important;
    }

    .adv-devices-box {
        max-height: 94vh !important;
        border-radius: 12px !important;
    }

    .adv-devices-header {
        padding: 14px 16px !important;
    }

    .adv-devices-header h2 {
        font-size: 18px !important;
    }

    .adv-devices-tabs {
        padding: 8px 12px !important;
        gap: 6px !important;
    }

    .adv-tab-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

.adv-tab-btn.active {
    background: rgba(229, 9, 20, 0.15);
    border-color: rgba(229, 9, 20, 0.5);
    color: #fff;
}

.adv-device-item {
    background: #1a1a24;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.badge-parent-device {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.badge-download-hq {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #ffd700;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
}

/* ==========================================================================
   TIER LOCK & GUEST SIGNUP GATE MODAL ANIMATIONS & INTERACTIVE FLOW
   ========================================================================== */
@keyframes cmOverlayFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

@keyframes cmOverlayFadeOut {
    from {
        opacity: 1;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    to {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
}

@keyframes cmModalCardSpringIn {
    0% {
        opacity: 0;
        transform: scale(0.84) translateY(32px);
    }

    55% {
        opacity: 1;
        transform: scale(1.025) translateY(-4px);
    }

    75% {
        transform: scale(0.99) translateY(1px);
    }

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

@keyframes cmModalCardSpringOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    100% {
        opacity: 0;
        transform: scale(0.88) translateY(24px);
    }
}

@keyframes cmIconPulseRing {
    0% {
        transform: scale(0.85);
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.5);
    }

    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 16px rgba(229, 9, 20, 0);
    }

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

@keyframes cmElementFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

.cm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.84);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: cmOverlayFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cm-modal-overlay.is-closing {
    animation: cmOverlayFadeOut 0.22s ease-in forwards;
    pointer-events: none;
}

.cm-guest-modal-card {
    background: linear-gradient(175deg, #1b1b26 0%, #121218 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    max-width: 440px;
    width: 100%;
    padding: 32px 28px 24px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.9), 0 0 40px rgba(229, 9, 20, 0.12);
    position: relative;
    animation: cmModalCardSpringIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    overflow: hidden;
}

.cm-modal-overlay.is-closing .cm-guest-modal-card {
    animation: cmModalCardSpringOut 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cm-guest-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.16);
    border: 1px solid rgba(229, 9, 20, 0.35);
    color: #e50914;
    margin-bottom: 18px;
    animation: cmIconPulseRing 1.8s infinite ease-in-out;
}

.cm-guest-modal-tag {
    color: #e50914;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 8px;
    animation: cmElementFadeUp 0.35s ease-out both;
    animation-delay: 0.08s;
}

.cm-guest-modal-title {
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1.25;
    animation: cmElementFadeUp 0.35s ease-out both;
    animation-delay: 0.14s;
}

.cm-guest-modal-desc {
    color: #a0a0a8;
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 24px 0;
    animation: cmElementFadeUp 0.35s ease-out both;
    animation-delay: 0.2s;
}

.cm-guest-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: cmElementFadeUp 0.35s ease-out both;
    animation-delay: 0.26s;
}

.cm-guest-btn-primary {
    background: linear-gradient(135deg, #e50914 0%, #b81d24 100%);
    color: #ffffff !important;
    text-decoration: none;
    padding: 13px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.4);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.cm-guest-btn-primary svg {
    transition: transform 0.2s ease;
}

.cm-guest-btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 26px rgba(229, 9, 20, 0.55);
    filter: brightness(1.1);
}

.cm-guest-btn-primary:hover svg {
    transform: translateX(4px);
}

.cm-guest-btn-primary:active {
    transform: scale(0.96) translateY(0);
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.3);
}

.cm-guest-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #e0e0e0 !important;
    text-decoration: none;
    padding: 11px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.cm-guest-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff !important;
    transform: translateY(-1px);
}

.cm-guest-btn-secondary:active {
    transform: scale(0.97);
}

.cm-guest-btn-ghost {
    background: transparent;
    color: #7d7d8a;
    border: none;
    padding: 8px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.cm-guest-btn-ghost:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.cm-guest-btn-ghost:active {
    color: #999999;
    transform: scale(0.96);
}

/* ==========================================================================
   SEGMENTED QUALITY DOWNLOAD BOXES & STREAM LIST
   ========================================================================== */
.stream-segmented-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 6px;
}

.stream-quality-sources-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 190px;
    max-height: 190px;
    overflow-y: auto;
    padding: 6px 8px 6px 6px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.stream-quality-sources-list::-webkit-scrollbar {
    width: 5px;
}

.stream-quality-sources-list::-webkit-scrollbar-track {
    background: transparent;
}

.stream-quality-sources-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.stream-quality-sources-list::-webkit-scrollbar-thumb:hover {
    background: rgba(229, 9, 20, 0.6);
}

@keyframes streamSourceSlideIn {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

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

.stream-quality-sources-list .download-source-item {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.stream-quality-sources-list .download-source-item:hover,
.stream-quality-sources-list .download-source-item:focus-within {
    transform: translateY(-2px) scale(1.008);
    z-index: 10;
    border-color: rgba(229, 9, 20, 0.75) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(229, 9, 20, 0.35) !important;
}

.btn-magnet-dl {
    background: #dc2626 !important;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.btn-magnet-dl:hover {
    background: #ef4444 !important;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.5);
}

.btn-torrent-file {
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.btn-torrent-file:hover {
    background: rgba(229, 9, 20, 0.2) !important;
    border-color: #ef4444 !important;
    transform: translateY(-1px);
}

.stream-quality-segmented-bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 6px;
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.stream-quality-segmented-bar::-webkit-scrollbar {
    display: none;
}

.stream-quality-box-btn {
    flex: 1 1 0px;
    min-width: 0;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    user-select: none;
}

.stream-quality-box-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
}

.stream-quality-box-btn:active {
    transform: scale(0.97);
}

.stream-quality-box-btn.active {
    background: #e50914 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.45) !important;
    transform: translateY(-1px);
}

.stream-quality-box-btn.is-locked {
    opacity: 0.85;
}

.stream-quality-box-btn.is-locked.active {
    background: #dc2626 !important;
    border-color: #f87171 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45) !important;
}

.download-source-item.is-locked-source {
    border-color: rgba(239, 68, 68, 0.25) !important;
    background: rgba(239, 68, 68, 0.04) !important;
}

.download-source-item.is-locked-source:hover {
    border-color: rgba(239, 68, 68, 0.6) !important;
    background: rgba(239, 68, 68, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(239, 68, 68, 0.25) !important;
}

.stream-quality-box-btn .sq-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.stream-quality-box-btn.active .sq-label {
    color: #ffffff;
}

.stream-quality-box-btn .sq-count {
    font-size: 10px;
    color: inherit;
    opacity: 0.8;
    font-weight: 600;
}

/* ==========================================================================
   IN-PLAYER SOURCES & QUALITIES SEGMENTED MENU
   ========================================================================== */
/* ==========================================================================
   DESKTOP VS MOBILE BOTTOM SHEET / POPUP MODALS
   Desktop: Classic floating popups above scrubber / top right.
   Mobile / Rotated Landscape / Native App: YouTube bottom sheet modals.
   ========================================================================== */

/* 1. DESKTOP STYLES (Default / min-width: 769px & non-mobile) */
.player-sheet-backdrop {
    display: none !important;
}

#btn-three-dot {
    display: flex !important;
}

#three-dot-menu {
    position: absolute !important;
    top: 60px !important;
    bottom: auto !important;
    right: 16px !important;
    background: rgba(18, 18, 18, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    width: 230px !important;
    max-height: calc(100% - 100px) !important;
    overflow-y: auto !important;
    padding: 8px 0 !important;
    z-index: 220 !important;
    display: none;
    flex-direction: column !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

#three-dot-menu.open {
    display: flex !important;
}

/* Desktop Gear Menu popup */
#gear-menu {
    position: absolute !important;
    top: auto !important;
    bottom: 98px !important;
    right: 20px !important;
    left: auto !important;
    transform: none !important;
    width: 230px !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    padding: 8px 0 !important;
    background: rgba(18, 18, 18, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 210 !important;
    display: none;
    flex-direction: column !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#gear-menu.open {
    display: flex !important;
}

#gear-menu .yt-sheet-drag-handle {
    display: none !important;
}

#gear-menu .yt-sheet-slider-track {
    width: 100% !important;
    transform: none !important;
    display: block !important;
}

#gear-menu #gm-panel-main {
    width: 100% !important;
    padding: 0 !important;
    max-height: none !important;
    display: block !important;
}

#gear-menu #gm-more {
    display: none !important; /* On desktop, more options are in top-bar 3-dot menu */
}

#gear-menu #gm-panel-more {
    display: none !important;
}

#gear-menu .yt-sheet-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    font-size: 13.5px !important;
    background: transparent !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

#gear-menu .yt-sheet-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

#gear-menu .yt-chevron {
    display: none !important;
}

.yt-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.yt-item-left svg {
    width: 18px;
    height: 18px;
    color: #eee;
    flex-shrink: 0;
}

.yt-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: 12.5px;
}

.yt-val-label {
    color: #aaa;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Desktop Sources & Qualities Menu */
#player-sources-menu.cc-menu-popup,
#player-sources-menu.player-sources-qualities-modal {
    position: absolute !important;
    top: auto !important;
    bottom: 98px !important;
    right: 20px !important;
    left: auto !important;
    transform: none !important;
    width: 350px !important;
    max-width: 90vw !important;
    background: #111114 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 0, 0, 0.6) !important;
    padding: 20px 18px 18px 18px !important;
    box-sizing: border-box !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 210 !important;
    display: none;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#player-sources-menu.open {
    display: flex !important;
    flex-direction: column !important;
}

#player-sources-menu .yt-sheet-drag-handle {
    display: none !important;
}


/* 2. MOBILE & ROTATED PHONE STYLES (YouTube Bottom Sheet Mode) */
@media (max-width: 768px), (orientation: landscape) and (max-height: 520px), (pointer: coarse) and (max-height: 520px) {
    /* Hide 3-dot top button on mobile (merged into gear menu) */
    #btn-three-dot,
    #three-dot-menu {
        display: none !important;
    }

    .player-sheet-backdrop {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.65) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 10004 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
    }

    .player-sheet-backdrop.open {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #gear-menu.yt-bottom-sheet {
        position: fixed !important;
        bottom: 12px !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        width: min(320px, calc(100% - 24px)) !important;
        max-width: 320px !important;
        height: 238px !important;
        max-height: none !important;
        background: rgba(28, 28, 30, 0.96) !important;
        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85) !important;
        z-index: 10005 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: translate(-50%, calc(100% + 24px)) !important;
        transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.22s ease, height 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important;
        pointer-events: none !important;
        opacity: 0 !important;
        padding: 0 8px 6px 8px !important;
    }

    #gear-menu.yt-bottom-sheet.in-more-view {
        height: 306px !important;
        max-height: none !important;
    }

    #player-sources-menu.yt-bottom-sheet {
        position: fixed !important;
        bottom: 12px !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        width: min(320px, calc(100% - 24px)) !important;
        max-width: 320px !important;
        height: auto !important;
        max-height: min(340px, calc(100vh - 28px)) !important;
        background: rgba(28, 28, 30, 0.96) !important;
        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85) !important;
        z-index: 10005 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: translate(-50%, calc(100% + 24px)) !important;
        transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.22s ease !important;
        pointer-events: none !important;
        opacity: 0 !important;
        padding: 0 8px 6px 8px !important;
    }

    #gear-menu.yt-bottom-sheet.open,
    #player-sources-menu.yt-bottom-sheet.open {
        transform: translate(-50%, 0) !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    #gear-menu.yt-bottom-sheet .yt-sheet-drag-handle,
    #player-sources-menu.yt-bottom-sheet .yt-sheet-drag-handle,
    .yt-sheet-drag-handle {
        width: 100% !important;
        height: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: grab !important;
        touch-action: none !important;
        flex-shrink: 0 !important;
        margin: 4px 0 2px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .yt-sheet-drag-handle:active {
        cursor: grabbing !important;
    }

    .yt-drag-pill {
        width: 32px !important;
        height: 3.5px !important;
        background: rgba(255, 255, 255, 0.35) !important;
        border-radius: 2px !important;
        display: block !important;
        pointer-events: none !important;
        margin: 0 auto !important;
    }

    #gear-menu .yt-sheet-slider-track {
        display: flex !important;
        width: 200% !important;
        transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important;
        box-sizing: border-box !important;
    }

    #gear-menu .yt-sheet-slider-track.show-more {
        transform: translateX(-50%) !important;
    }

    #gear-menu #gm-panel-main,
    #gear-menu #gm-panel-more {
        width: 50% !important;
        padding: 0 2px 2px 2px !important;
        gap: 1px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #gear-menu #m-tdm-keys {
        display: none !important; /* Mobile touch devices do not have physical keyboard shortcuts */
    }

    #gear-menu #gm-more {
        display: flex !important;
    }

    #gear-menu .yt-chevron {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        color: #777 !important;
        flex-shrink: 0 !important;
    }

    #gear-menu .yt-sheet-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 7px 10px !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        color: #fff !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        min-height: 34px !important;
        box-sizing: border-box !important;
        transition: background 0.15s ease !important;
        user-select: none !important;
    }

    #gear-menu .yt-sheet-item:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    #gear-menu .yt-sheet-item:active {
        background: rgba(255, 255, 255, 0.15) !important;
    }

    .yt-sheet-back-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 6px 8px !important;
        border: none !important;
        background: transparent !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin-bottom: 3px !important;
        box-sizing: border-box !important;
        min-height: 32px !important;
    }

    .yt-sheet-back-row:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px !important;
    }

    #player-sources-menu.yt-bottom-sheet #segments-container {
        max-height: min(290px, calc(100vh - 60px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* Download Action Tray Bottom Sheet */
.download-action-tray-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    display: none;
    align-items: flex-end !important;
    justify-content: center !important;
}

.download-action-tray-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    opacity: 0;
    transition: opacity 0.22s ease !important;
}

.download-action-tray-modal.open .download-action-tray-backdrop {
    opacity: 1 !important;
}

.download-action-tray-content {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 480px !important;
    background: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: none !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 20px 20px 32px !important;
    box-sizing: border-box !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8) !important;
    transform: translateY(100%) !important;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.download-action-tray-modal.open .download-action-tray-content {
    transform: translateY(0) !important;
}

.download-action-tray-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.download-action-tray-titles {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding-right: 12px !important;
}

.download-action-tray-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.download-action-tray-subtitle {
    color: #4cd964 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.download-action-tray-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    color: #ccc !important;
    font-size: 22px !important;
    line-height: 1 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.download-action-tray-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

.download-action-tray-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.download-action-tray-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 13px 16px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.download-action-tray-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

#player-sources-menu .cc-menu-header {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    letter-spacing: 0.2px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.player-menu-close-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.player-menu-close-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

#player-sources-menu #segments-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.player-quality-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    width: 100%;
}

.player-quality-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px;
    background: #191920;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    box-sizing: border-box;
}

.player-quality-pill:hover {
    background: #22222b;
    border-color: rgba(255, 255, 255, 0.12);
}

.player-quality-pill.active {
    background: #161215 !important;
    border: 2px solid #e50914 !important;
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.35) !important;
}

.player-quality-pill .pill-text-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.player-quality-pill .pill-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-quality-pill .pill-subtext {
    font-size: 11px;
    font-weight: 500;
    color: #ff4d6d;
}

.player-quality-pill .pill-check {
    color: #e50914;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    margin-left: auto;
}

.player-source-dock {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.player-source-dock::-webkit-scrollbar {
    display: none;
}

.player-source-pill {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 10px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    background: #1f1f25;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: sourcePillEnter 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap !important;
}

.player-source-pill span {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-source-pill:hover {
    background: #2a2a32;
    border-color: rgba(255, 255, 255, 0.18);
}

.player-source-pill.active {
    background: rgba(229, 9, 20, 0.15) !important;
    color: #ff4d57 !important;
    font-weight: 800 !important;
    border-color: rgba(229, 9, 20, 0.6) !important;
    border-bottom: 2px solid #e50914 !important;
    box-shadow: 0 2px 12px rgba(229, 9, 20, 0.25) !important;
}

.player-source-pill .pill-playing-badge {
    font-size: 10px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.player-no-sources-msg {
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #888899;
    padding: 8px 0;
}

.player-source-dock-sep {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.16);
    margin: 0 4px;
    align-self: center;
    flex-shrink: 0;
}

.player-source-pill.player-embed-pill {
    background: #18181f;
    border-color: rgba(229, 9, 20, 0.3);
    color: #e5e5e5;
}

.player-source-pill.player-embed-pill:hover {
    background: #231f24;
    border-color: rgba(229, 9, 20, 0.6);
}

.player-source-pill.player-embed-pill.active {
    background: rgba(229, 9, 20, 0.15) !important;
    border-color: rgba(229, 9, 20, 0.6) !important;
    border-bottom: 2px solid #e50914 !important;
    color: #ff4d57 !important;
    box-shadow: 0 2px 12px rgba(229, 9, 20, 0.3) !important;
}

.player-source-pill.player-offline-pill {
    background: #142017;
    border-color: rgba(76, 217, 100, 0.35);
    color: #4cd964;
}

.player-source-pill.player-offline-pill:hover {
    background: #192e1f;
    border-color: rgba(76, 217, 100, 0.7);
    color: #5deb75;
}

.player-source-pill.player-offline-pill.active {
    background: rgba(76, 217, 100, 0.18) !important;
    border-color: rgba(76, 217, 100, 0.7) !important;
    border-bottom: 2px solid #4cd964 !important;
    color: #4cd964 !important;
    box-shadow: 0 2px 14px rgba(76, 217, 100, 0.35) !important;
}

/* Embed Mode Styles on Player Container */
#netflix-player-container.embed-mode-active #video-player,
#netflix-player-container.embed-mode-active #video-player-shadow,
#netflix-player-container.embed-mode-active .coco-bottom-area,
#netflix-player-container.embed-mode-active .player-controls-bottom,
#netflix-player-container.embed-mode-active .player-center-overlay,
#netflix-player-container.embed-mode-active .player-seek-ripple-container,
#netflix-player-container.embed-mode-active .coco-subtitle-overlay,
#netflix-player-container.embed-mode-active #player-maturity-badge {
    display: none !important;
}

#netflix-player-container.embed-mode-active #player-top-bar {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 30 !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%) !important;
}

/* Centered Top Pills Orchestrator Container */
.player-top-pills-container {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 45;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.player-top-pills-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: auto;
    position: relative;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.player-embed-servers-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    height: 32px;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(229, 9, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, background 0.2s ease, margin 0.35s ease;
}

#netflix-player-container.embed-mode-active #player-embed-servers-btn {
    display: inline-flex !important;
}

.player-embed-servers-btn:hover {
    background: rgba(255, 20, 30, 1);
    transform: scale(1.04);
}

/* Ensure sources modal stays completely visible and interactive even if container is idle */
#netflix-player-container.idle #player-sources-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
}

@keyframes sourcePillEnter {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }

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

/* ==========================================================================
   MOVIE DIRECT DOWNLOAD POPUP MODAL & BACKDROP
   ========================================================================== */
#movie-download-popup-backdrop,
.cm-movie-download-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.52) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 100001 !important;
    pointer-events: auto !important;
    display: none;
}

.cm-movie-download-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100002 !important;
    margin: 0 !important;
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 85vh !important;
    background: rgba(18, 18, 24, 0.88) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(229, 9, 20, 0.16) !important;
    display: none;
    flex-direction: column;
    overflow-x: hidden !important;
    overflow-y: hidden;
    touch-action: pan-y;
    color: #ffffff;
    box-sizing: border-box;
    animation: cmModalCardSpringIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#movie-download-popup-modal {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    pointer-events: none;
    align-items: center;
    max-height: 92vh !important;
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
}

#movie-download-popup-modal .cm-movie-download-card {
    width: 100%;
    background: rgba(18, 18, 24, 0.88) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(229, 9, 20, 0.16) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #ffffff;
    box-sizing: border-box;
    pointer-events: auto;
}

.cm-floating-switcher-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
    pointer-events: auto;
    width: 100%;
}

.cm-floating-switcher-wrap .stream-source-type-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(22, 22, 30, 0.94) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 9999px !important;
    padding: 3px !important;
    gap: 4px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(229, 9, 20, 0.16) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cm-floating-switcher-wrap .stream-source-type-pill:hover {
    transform: scale(1.04);
}

/* Bottom controls: Quality selectors + Direct/Magnet pill */
.stream-bottom-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    width: 100%;
}



.stream-source-type-pill-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.stream-source-type-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    padding: 3px;
    gap: 4px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.stream-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    padding: 0;
}

.stream-pill-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.15);
}

.stream-pill-btn.active {
    background: #e50914 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 12px rgba(229, 9, 20, 0.5) !important;
}

.stream-pill-btn.glow-invite {
    animation: streamPillTorrentGlow 1.8s ease-in-out infinite alternate !important;
    color: #fff !important;
}

@keyframes streamPillTorrentGlow {
    0% {
        box-shadow: 0 0 4px rgba(229, 9, 20, 0.4), inset 0 0 4px rgba(229, 9, 20, 0.2);
        border-color: rgba(229, 9, 20, 0.5);
        background: rgba(229, 9, 20, 0.15);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 16px rgba(229, 9, 20, 0.9), 0 0 24px rgba(229, 9, 20, 0.4), inset 0 0 8px rgba(229, 9, 20, 0.3);
        border-color: rgba(255, 255, 255, 0.7);
        background: rgba(229, 9, 20, 0.35);
        transform: scale(1.08);
    }

    100% {
        box-shadow: 0 0 4px rgba(229, 9, 20, 0.4), inset 0 0 4px rgba(229, 9, 20, 0.2);
        border-color: rgba(229, 9, 20, 0.5);
        background: rgba(229, 9, 20, 0.15);
        transform: scale(1);
    }
}

.stream-pill-btn svg {
    display: block;
    flex-shrink: 0;
}

#movie-download-popup-modal.open,
.cm-movie-download-modal.open {
    display: flex !important;
}

#movie-download-popup-modal.is-closing,
.cm-movie-download-modal.is-closing {
    animation: cmModalCardSpringOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    pointer-events: none;
}

#movie-download-popup-modal .cc-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

#movie-download-popup-modal .cc-search-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
}

#movie-download-popup-modal .cc-search-body {
    overflow-x: hidden;
    max-width: 100vw;
    padding: 20px 24px;
    overflow-y: auto;
    max-height: calc(85vh - 75px);
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    #movie-download-popup-modal .cc-search-body {
        padding: 12px 14px;
    }
}

#movie-download-popup-modal .stream-segmented-container {
    margin-top: 0;
    margin-bottom: 0;
}

#movie-download-popup-modal .stream-quality-sources-list {
    min-height: 0;
    max-height: 280px;
    height: auto;
}

/* ==========================================================================
   HOW TO DOWNLOAD TORRENT POPUP & CIRCULAR HELP BUTTON
   ========================================================================== */
.torrent-help-circle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent !important;
    border: none !important;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    outline: none;
}

.torrent-help-circle-btn:hover {
    background: transparent !important;
    border: none !important;
    color: #ffffff;
    transform: scale(1.18);
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.75));
}

.torrent-help-circle-btn:active {
    transform: scale(0.92);
}

.stream-segmented-side-actions {
    position: absolute;
    top: 6px;
    right: -34px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    z-index: 25;
}

.stream-segmented-help-btn,
.stream-segmented-refresh-btn {
    width: 22px;
    height: 22px;
    opacity: 0.85;
}

.stream-segmented-help-btn:hover,
.stream-segmented-refresh-btn:hover {
    opacity: 1;
    transform: scale(1.18);
}

/* Vertical Direct & Torrent switcher pill on the right side below reload button */
.stream-side-switcher-pill {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    padding: 2px !important;
    gap: 3px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    margin-top: 4px;
}

.stream-side-switcher-pill .stream-pill-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 1px solid transparent;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.stream-side-switcher-pill .stream-pill-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.stream-side-switcher-pill .stream-pill-btn.active {
    background: #e50914 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.5) !important;
}

.stream-side-switcher-pill .stream-pill-btn svg {
    width: 13px !important;
    height: 13px !important;
    display: block;
    flex-shrink: 0;
}

#movie-download-popup-modal .stream-segmented-side-actions {
    display: none !important;
}

@keyframes refreshSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.refresh-icon.spinning {
    animation: refreshSpin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    color: #e50914 !important;
}

@media (max-width: 768px) {
    .stream-segmented-side-actions {
        right: 6px !important;
        top: 4px;
        gap: 6px;
    }

    .stream-segmented-help-btn,
    .stream-segmented-refresh-btn {
        width: 20px;
        height: 20px;
    }

    .stream-quality-sources-list {
        padding-right: 36px !important;
    }
}

#torrent-guide-modal,
.cm-torrent-guide-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100005 !important;
    margin: 0 !important;
    width: 520px !important;
    max-width: 92vw !important;
    max-height: 86vh !important;
    background: rgba(18, 18, 26, 0.92) !important;
    backdrop-filter: blur(32px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.96), 0 0 35px rgba(229, 9, 20, 0.2) !important;
    display: none;
    flex-direction: column;
    overflow: hidden;
    color: #ffffff;
    box-sizing: border-box;
    animation: cmModalCardSpringIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#torrent-guide-modal.open,
.cm-torrent-guide-modal.open {
    display: flex !important;
}

#torrent-guide-modal.is-closing,
.cm-torrent-guide-modal.is-closing {
    animation: cmModalCardSpringOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    pointer-events: none;
}

.torrent-guide-dialog {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: inherit;
}

#torrent-guide-steps-content {
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes torrentStepSpringIn {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }

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

.torrent-step-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    animation: torrentStepSpringIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.torrent-step-item:nth-child(1) {
    animation-delay: 0.03s;
}

.torrent-step-item:nth-child(2) {
    animation-delay: 0.08s;
}

.torrent-step-item:nth-child(3) {
    animation-delay: 0.13s;
}

.torrent-step-item:nth-child(4) {
    animation-delay: 0.18s;
}

.torrent-step-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

.torrent-step-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e50914 0%, #b91c1c 100%);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.4);
}

.torrent-step-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}

.torrent-step-desc {
    font-size: 12.5px;
    color: #a1a1aa;
    line-height: 1.45;
}

.torrent-step-desc a {
    color: #60a5fa;
    text-decoration: underline;
    font-weight: 600;
}

.torrent-step-desc a:hover {
    color: #93c5fd;
}

.torrent-platform-tab {
    flex: 1;
    min-width: 60px;
    padding: 9px 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.torrent-platform-tab:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: translateY(-2px);
}

.torrent-platform-tab.active {
    background: linear-gradient(135deg, #e50914 0%, #b91c1c 100%);
    border-color: #f87171;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.45);
    transform: translateY(-1px) scale(1.04);
}

.torrent-platform-tab .platform-icon {
    font-size: 16px;
}

.torrent-platform-tab .platform-name {
    font-size: 11px;
    font-weight: 600;
}

/* ==========================================================================
   SEASON DOWNLOAD MODAL & EPISODE CHECKLIST
   ========================================================================== */
.cm-season-download-modal {
    width: 580px !important;
    max-width: 95vw !important;
    height: 620px !important;
    max-height: 88vh !important;
}

.season-dl-top-bar {
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

.btn-season-select-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-season-select-all:hover,
.btn-season-select-all.focused {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.btn-season-start-dl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e50914;
    border: none;
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}

.btn-season-start-dl:hover:not(:disabled),
.btn-season-start-dl.focused:not(:disabled) {
    background: #f40612;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.6);
}

.btn-season-start-dl:disabled {
    background: #333333;
    color: #777777;
    cursor: not-allowed;
    box-shadow: none;
}

.season-episodes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 10px 4px 2px;
    box-sizing: border-box;
}

.season-ep-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
    position: relative;
}

.season-ep-item:hover,
.season-ep-item.focused {
    background: rgba(255, 255, 255, 0.07);
    border-color: #e50914 !important;
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.35);
}

.season-ep-item.selected {
    background: rgba(229, 9, 20, 0.12);
    border-color: rgba(229, 9, 20, 0.45);
}

.season-ep-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    margin-right: 12px;
    flex-shrink: 0;
}

.season-ep-item.selected .season-ep-checkbox {
    background: #e50914;
    border-color: #e50914;
}

.season-ep-item.selected-other {
    opacity: 0.75;
    border-style: dashed;
}

.season-dl-bottom-quality-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.season-dl-bottom-quality-bar .stream-segmented-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 0 !important;
}

.season-dl-bottom-quality-bar .stream-quality-box-btn {
    flex: 1;
    min-height: 48px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.season-dl-bottom-quality-bar .stream-quality-box-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.25);
}

.season-dl-bottom-quality-bar .stream-quality-box-btn.active {
    background: #0066ff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.4);
}

/* ==========================================================================
   CUSTOM CONFIRM MODAL & SETTINGS MODAL
   ========================================================================== */
.custom-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.custom-confirm-box {
    background: rgba(22, 22, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    padding: 24px;
    width: 90%;
    color: #fff;
    box-sizing: border-box;
    animation: cmModalCardSpringIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Drawer Card Item Action Buttons */
.drawer-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-drawer-action {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #ccc;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-drawer-action:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: scale(1.08);
}

.btn-drawer-action.btn-cancel:hover {
    background: rgba(229, 9, 20, 0.25);
    color: #e50914;
}

/* Prevent bright white browser autofill box */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #0e0e13 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

#search-input:-webkit-autofill,
#search-input:-webkit-autofill:hover,
#search-input:-webkit-autofill:focus,
#search-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
}

/* Account Settings Gear & DMCA Button */
#account-dmca-nav-btn:hover {
    background: rgba(229, 9, 20, 0.25) !important;
    border-color: #e50914 !important;
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.35);
    transform: translateY(-1px);
}

#account-settings-gear-btn:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    transform: rotate(30deg) scale(1.06);
    border-color: rgba(255, 255, 255, 0.35) !important;
}

#account-settings-subpage {
    opacity: 1;
}

/* EPG Grid Infinite Loading Skeleton Card */
.epg-grid-skeleton-loading-card {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    background: #14141c !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
}

.epg-grid-skeleton-loading-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: epg-skeleton-shimmer 1.4s infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SHORT DRAMAS TIKTOK-STYLE FEED & MULTI-SOURCE HUB                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

.shortdramas-layout-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background: #08080c;
    color: #fff;
    position: relative;
    box-sizing: border-box;
}

/* Top Filter / Source Bar */
.drama-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 20;
    flex-shrink: 0;
    position: relative;
}

.drama-top-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 6px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.drama-tab-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    padding: 7px 16px;
    border-radius: 22px;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    white-space: nowrap;
    user-select: none;
    outline: none;
}

.drama-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.drama-tab-btn:active {
    transform: scale(0.96);
}

.drama-tab-btn.active {
    color: #fff;
    background: rgba(255, 45, 85, 0.22);
    box-shadow: 0 2px 12px rgba(255, 45, 85, 0.35);
    border: 1px solid rgba(255, 45, 85, 0.4);
}

.drama-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    background: #ff2d55;
    border-radius: 3px;
    box-shadow: 0 0 8px #ff2d55;
    animation: tabIndicatorPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tabIndicatorPop {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        width: 18px;
        opacity: 1;
    }
}

/* Desktop Search Bar (Centered in middle of top bar) */
.drama-desktop-search-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 7px 16px;
    width: 360px;
    max-width: 440px;
    transition: all 0.25s ease;
}

.drama-desktop-search-bar:focus-within {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 16px rgba(255, 45, 85, 0.3);
    width: 420px;
}

.drama-desktop-search-bar .drama-search-icon {
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.drama-desktop-search-bar .drama-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
}

.drama-desktop-search-bar .drama-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.drama-desktop-search-bar .drama-search-clear-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.drama-source-filter-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
}

.drama-source-picker-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.drama-source-picker-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #ff2d55;
}

.drama-sources-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 270px;
    max-height: 420px;
    background: #181824;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
    z-index: 10000;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drama-sources-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.6);
}

.drama-sources-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 12px;
    width: 100%;
}

.drama-sources-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drama-source-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #ddd;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.drama-source-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.drama-source-item.active {
    background: rgba(255, 45, 85, 0.2);
    color: #ff2d55;
    font-weight: 700;
}

.drama-source-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drama-source-item-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.drama-source-badge-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

/* Main Dual-Panel Container */
.drama-main-container {
    display: flex;
    flex: 1;
    height: calc(100vh - 65px);
    overflow: hidden;
    position: relative;
}

/* Left Feed Column */
.drama-feed-column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0;
    overflow: hidden;
    min-width: 0;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.drama-feed-scroll {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    padding: 0;
    margin: 0;
}

.drama-feed-scroll.series-locked {
    overflow-y: hidden !important;
    scroll-snap-type: none !important;
}

/* Episode Slide Animations */
@keyframes dramaEpSlideInBottom {
    0% {
        transform: translateY(100%);
        opacity: 0.85;
    }

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

@keyframes dramaEpSlideInTop {
    0% {
        transform: translateY(-100%);
        opacity: 0.85;
    }

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

.drama-video-container.slide-in-bottom,
.drama-video-container.slide-up {
    animation: dramaEpSlideInBottom 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.drama-video-container.slide-in-top,
.drama-video-container.slide-down {
    animation: dramaEpSlideInTop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Horizontal Series Mode Slide Animations (Right Open / Close) */
@keyframes dramaSeriesSlideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0.2;
    }

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

@keyframes dramaSeriesSlideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0.2;
    }
}

.drama-video-container.slide-in-right {
    animation: dramaSeriesSlideInRight 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.drama-video-container.slide-out-right {
    animation: dramaSeriesSlideOutRight 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Card Frame (TikTok Aspect Ratio) - Contiguously Connected Vertically */
.drama-card-frame {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 12px 0;
    overflow: visible;
}

.drama-video-container {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 100%;
    max-height: 820px;
    background: #000;
    cursor: pointer;
    user-select: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.drama-video-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6) blur(6px);
    z-index: 1;
    transition: opacity 0.3s ease;
}

.drama-video-element {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: transparent;
    z-index: 2;
}

/* Top Controls Bar (TikTok Desktop & Mobile Style) */
.drama-video-top-bar {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 25;
    pointer-events: none;
}

.drama-top-left-group,
.drama-top-right-group {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}

/* General Player Top Button Pill */
.drama-player-top-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.drama-player-top-btn:hover {
    background: rgba(255, 45, 85, 0.85);
    border-color: #ff2d55;
    transform: scale(1.08);
}

/* Series Back Button */
.drama-series-back-btn {
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateX(-15px);
}

.drama-card-frame.series-active .drama-series-back-btn {
    display: flex;
    opacity: 1;
    transform: translateX(0);
}

.drama-series-back-btn:hover {
    background: #ff2d55;
    border-color: #ff2d55;
    transform: translateX(-3px);
}

/* Mute & Expanding Volume Slider (TikTok Desktop Style) */
.drama-top-volume-pill {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    height: 38px;
    padding-right: 0;
    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.drama-top-volume-pill .drama-player-top-btn {
    background: transparent;
    border: none;
    box-shadow: none;
}

.drama-volume-slider-box {
    width: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.3s ease;
    padding-right: 0;
}

.drama-top-volume-pill:hover,
.drama-top-volume-pill:focus-within {
    background: rgba(18, 18, 24, 0.9);
    border-color: rgba(255, 45, 85, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.drama-top-volume-pill:hover .drama-volume-slider-box,
.drama-top-volume-pill:focus-within .drama-volume-slider-box {
    width: 90px;
    opacity: 1;
    padding-right: 12px;
}

.drama-volume-slider-input {
    width: 80px;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.drama-volume-slider-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease, background 0.15s ease;
}

.drama-volume-slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: #ff2d55;
}

/* 3-Dot More Menu */
.drama-top-more-wrap {
    position: relative;
}

.drama-more-menu-dropdown {
    position: absolute;
    top: 46px;
    right: 0;
    background: rgba(18, 18, 24, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    width: 220px;
    padding: 8px 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.25s ease;
}

.drama-more-menu-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.drama-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    color: #eee;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.drama-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.drama-menu-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drama-menu-val {
    font-size: 12px;
    color: #ff2d55;
    font-weight: 700;
}

.drama-menu-speed-submenu {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 4px;
    gap: 2px;
    margin-left: 20px;
}

.drama-menu-speed-submenu .speed-opt {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.drama-menu-speed-submenu .speed-opt:hover,
.drama-menu-speed-submenu .speed-opt.active {
    background: #ff2d55;
    color: #fff;
}

.drama-menu-toggle {
    accent-color: #ff2d55;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.drama-top-search-btn {
    display: none;
    /* Only visible on mobile */
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drama-top-search-btn:hover {
    background: rgba(255, 45, 85, 0.85);
    border-color: #ff2d55;
    transform: scale(1.08);
}

/* Mobile Search Bar - Expands from Right to Left across top of player */
.drama-mobile-search-bar {
    position: absolute;
    top: 12px;
    right: 12px;
    height: 44px;
    width: 0;
    max-width: calc(100% - 24px);
    background: rgba(18, 18, 24, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 30;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85);
    transform-origin: right center;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.3s ease;
}

.drama-mobile-search-bar.open {
    width: calc(100% - 24px);
    padding: 0 14px;
    opacity: 1;
    pointer-events: auto;
}

.drama-mobile-search-bar input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    width: 100%;
}

.drama-mobile-search-close {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

/* Video Loading Spinner */
.drama-video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
}

.drama-video-loading.active {
    opacity: 1;
}

.drama-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ff2d55;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Play/Pause Center Indicator */
.drama-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 72px;
    height: 72px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s;
    backdrop-filter: blur(10px);
    z-index: 4;
}

.drama-play-overlay.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.drama-play-overlay svg {
    width: 36px;
    height: 36px;
    margin-left: 4px;
}

/* Heart Burst Animation for Double-Tap */
.drama-heart-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 90px;
    height: 90px;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s;
    z-index: 10;
}

.drama-heart-burst.animate {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
}

/* Bottom Overlay Info */
.drama-bottom-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 36px 16px 14px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    z-index: 5;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.drama-ai-curation-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 45, 85, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 45, 85, 0.4);
    color: #ff5b79;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    width: fit-content;
    margin-bottom: 5px;
    box-shadow: 0 2px 8px rgba(255, 45, 85, 0.25);
    letter-spacing: 0.2px;
}

.drama-ai-curation-pill .drama-ai-sparkle {
    font-size: 12px;
    animation: dramaSparklePulse 2s infinite ease-in-out;
}

@keyframes dramaSparklePulse {

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

    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

.drama-ai-curation-pill .drama-ai-match-text {
    color: #fff;
}

.drama-ai-curation-pill .drama-ai-dot {
    color: rgba(255, 255, 255, 0.4);
}

.drama-ai-curation-pill .drama-ai-source-tag {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.drama-continue-watching-pill {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #38bdf8;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    z-index: 6;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.3px;
    animation: fadeInDown 0.35s ease-out;
}

.drama-continue-watching-pill .drama-cw-icon {
    font-size: 13px;
    color: #38bdf8;
}

.drama-creator-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    width: fit-content;
}

.drama-creator-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.drama-series-title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.drama-episode-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 6px;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.drama-desc-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 14px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Floating Watch in Series Banner (TikTok-Style Watch Pill) */
.drama-watch-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(30, 30, 40, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    max-height: 70px;
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        margin 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.drama-watch-banner:hover {
    background: rgba(45, 45, 60, 0.9);
    border-color: rgba(255, 45, 85, 0.5);
    transform: translateY(-2px);
}

/* When Series Mode is active: Watch pill collapses smoothly, title and subtitle shift down */
.drama-card-frame.series-active .drama-watch-banner {
    opacity: 0;
    max-height: 0;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-color: transparent !important;
    pointer-events: none;
    transform: translateY(16px);
}

.drama-card-frame.series-active .drama-series-title {
    transform: translateY(8px);
}

.drama-card-frame.series-active .drama-episode-subtitle {
    transform: translateY(8px);
    color: #ff2d55;
    font-weight: 700;
}

.drama-watch-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.drama-banner-icon {
    width: 24px;
    height: 24px;
    color: #ff2d55;
    flex-shrink: 0;
}

.drama-banner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.drama-banner-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drama-banner-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
}

.drama-banner-btn-watch {
    background: #ff2d55;
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 45, 85, 0.4);
}

.drama-banner-btn-watch:hover {
    background: #ff1340;
    transform: scale(1.05);
}

/* Fullscreen Theater Mode (TikTok Desktop Exact Layout across entire Short Dramas Feed) */
#shortdramas-view.theater-fullscreen,
#shortdramas-view:fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background: #000 !important;
    z-index: 99999 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#shortdramas-view.theater-fullscreen .drama-top-bar,
#shortdramas-view:fullscreen .drama-top-bar {
    display: none !important;
}

#shortdramas-view.theater-fullscreen .drama-main-container,
#shortdramas-view:fullscreen .drama-main-container {
    height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

#shortdramas-view.theater-fullscreen .drama-feed-column,
#shortdramas-view:fullscreen .drama-feed-column {
    height: 100vh !important;
    width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
}

#shortdramas-view.theater-fullscreen .drama-feed-scroll,
#shortdramas-view:fullscreen .drama-feed-scroll {
    height: 100vh !important;
    width: 100vw !important;
    overflow-y: scroll !important;
    scroll-snap-type: y mandatory !important;
    padding: 0 !important;
    margin: 0 !important;
}

#shortdramas-view.theater-fullscreen .drama-card-frame,
#shortdramas-view:fullscreen .drama-card-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #000 !important;
}

#shortdramas-view.theater-fullscreen .drama-video-container,
#shortdramas-view:fullscreen .drama-video-container {
    height: calc(100vh - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    width: calc((100vh - 40px) * (9 / 16)) !important;
    max-width: calc((100vh - 40px) * (9 / 16)) !important;
    aspect-ratio: 9 / 16 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9) !important;
    position: relative !important;
}

#shortdramas-view.theater-fullscreen .drama-video-element,
#shortdramas-view.theater-fullscreen .drama-video-backdrop,
#shortdramas-view:fullscreen .drama-video-element,
#shortdramas-view:fullscreen .drama-video-backdrop {
    border-radius: 18px !important;
}

/* In Fullscreen mode: Top bar spans across entire screen width */
#shortdramas-view.theater-fullscreen .drama-video-top-bar,
#shortdramas-view:fullscreen .drama-video-top-bar {
    position: absolute !important;
    top: 20px !important;
    left: 24px !important;
    right: 24px !important;
    width: calc(100vw - 48px) !important;
    z-index: 100000 !important;
    pointer-events: none !important;
}

#shortdramas-view.theater-fullscreen .drama-top-left-group,
#shortdramas-view.theater-fullscreen .drama-top-right-group,
#shortdramas-view:fullscreen .drama-top-left-group,
#shortdramas-view:fullscreen .drama-top-right-group {
    pointer-events: auto !important;
}

#shortdramas-view.theater-fullscreen .drama-player-top-btn,
#shortdramas-view:fullscreen .drama-player-top-btn {
    width: 44px !important;
    height: 44px !important;
    background: rgba(30, 30, 40, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* In Fullscreen mode: Title and Episode align to bottom-left */
#shortdramas-view.theater-fullscreen .drama-bottom-info,
#shortdramas-view:fullscreen .drama-bottom-info {
    position: absolute !important;
    left: 32px !important;
    bottom: 28px !important;
    width: auto !important;
    max-width: 420px !important;
    z-index: 100000 !important;
    text-align: left !important;
    padding: 0 !important;
}

/* In Fullscreen mode: Seekbar spans entire viewport width */
#shortdramas-view.theater-fullscreen .drama-seekbar-container,
#shortdramas-view:fullscreen .drama-seekbar-container {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    z-index: 100001 !important;
}

/* In Fullscreen mode: Action buttons animate and pin to right wall of viewport */
#shortdramas-view.theater-fullscreen .drama-action-column,
#shortdramas-view:fullscreen .drama-action-column {
    position: absolute !important;
    left: auto !important;
    right: 28px !important;
    bottom: 36px !important;
    top: auto !important;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* In Fullscreen mode: Up and Down buttons pin to middle-right wall of viewport */
#shortdramas-view.theater-fullscreen .drama-floating-nav,
#shortdramas-view:fullscreen .drama-floating-nav {
    position: absolute !important;
    left: auto !important;
    right: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 900px) {

    #shortdramas-view.theater-fullscreen .drama-action-column,
    #shortdramas-view:fullscreen .drama-action-column {
        position: absolute !important;
        left: auto !important;
        right: 12px !important;
        bottom: 80px !important;
    }

    #shortdramas-view.theater-fullscreen .drama-floating-nav,
    #shortdramas-view:fullscreen .drama-floating-nav {
        display: none !important;
    }

    #shortdramas-view.theater-fullscreen .drama-video-top-bar,
    #shortdramas-view:fullscreen .drama-video-top-bar {
        position: absolute !important;
        top: 14px !important;
        left: 14px !important;
        right: 14px !important;
        width: calc(100% - 28px) !important;
    }
}


/* Action column, icon disc, floating nav, and action count styles are
   defined in the Responsive Design section at the bottom of this file. */


/* Video Seekbar (sits at very bottom of video card) */
.drama-seekbar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: flex-end;
    padding: 0 0 6px;
    z-index: 12;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.drama-video-container:hover .drama-seekbar-container,
.drama-seekbar-container.active {
    opacity: 1;
}

.drama-seekbar-track {
    position: relative;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    margin: 0 10px;
    transition: height 0.15s ease;
    cursor: pointer;
}

.drama-seekbar-container:hover .drama-seekbar-track,
.drama-seekbar-container.dragging .drama-seekbar-track {
    height: 5px;
}

.drama-seekbar-buffer {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    pointer-events: none;
}

.drama-seekbar-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #ff2d55;
    border-radius: 3px;
    pointer-events: none;
    transition: width 0.1s linear;
}

.drama-seekbar-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 14px;
    height: 14px;
    background: #ff2d55;
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.15s ease;
    box-shadow: 0 2px 6px rgba(255, 45, 85, 0.6);
}

.drama-seekbar-container:hover .drama-seekbar-thumb,
.drama-seekbar-container.dragging .drama-seekbar-thumb {
    transform: translate(-50%, -50%) scale(1);
}


/* ── Action Icon Disc & Buttons (Compact TikTok Style: 36px, Dull Grey, 8px Gap, Zero Space to Counter) ── */
.drama-action-item {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 0;
    color: #fff;
    gap: 1px !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.drama-action-item,
.drama-action-item.focused,
.drama-action-item:focus-visible,
.drama-action-item:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.drama-action-icon-disc {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.drama-action-icon-disc svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #fff;
    fill: none;
    transition: all 0.2s ease;
}

.drama-action-item:hover .drama-action-icon-disc {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.08);
}

.drama-action-item:active .drama-action-icon-disc {
    transform: scale(0.92);
}

.drama-action-item.focused .drama-action-icon-disc,
.drama-action-item:focus-visible .drama-action-icon-disc,
.drama-action-item:focus .drama-action-icon-disc {
    outline: none !important;
    border-color: #ff2d55 !important;
    box-shadow: 0 0 0 2px #ff2d55, 0 0 14px rgba(255, 45, 85, 0.6) !important;
    transform: scale(1.08);
}

.drama-action-count {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.95);
    margin-top: -1px !important;
    line-height: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    text-align: center;
}

.drama-action-item.focused .drama-avatar-wrapper,
.drama-action-item:focus-visible .drama-avatar-wrapper,
.drama-avatar-wrapper.focused,
.drama-avatar-wrapper:focus-visible {
    outline: none !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 2.5px #ff2d55, 0 0 16px rgba(255, 45, 85, 0.75) !important;
    transform: scale(1.08);
}

/* Liked state */
.drama-action-item.liked .drama-action-icon-disc {
    background: rgba(255, 45, 85, 0.25) !important;
    border-color: #ff2d55 !important;
}

.drama-action-item.liked .icon-heart {
    fill: #ff2d55 !important;
    stroke: #ff2d55 !important;
    animation: heartBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heartBounce {
    0% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(1.3);
    }

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

/* Saved / Bookmarked state */
.drama-action-item.saved .drama-action-icon-disc {
    background: rgba(255, 204, 0, 0.25) !important;
    border-color: #ffcc00 !important;
}

.drama-action-item.saved .icon-bookmark {
    fill: #ffcc00 !important;
    stroke: #ffcc00 !important;
}

/* Drama Poster / Details Action Button */
.drama-avatar-wrapper {
    position: relative;
    width: 36px !important;
    height: 36px !important;
    transition: transform 0.2s ease;
}

.drama-avatar-wrapper:hover {
    transform: scale(1.08);
}

.drama-avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid #fff;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75);
}

.drama-avatar-info-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: #ff2d55;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}


/* .drama-floating-nav and .drama-nav-arrow defined in Responsive Design section */


/* ═══════════════════════════════════════════════════════════════════════════ */
/* RIGHT SIDE PANEL (Desktop Comments & About Details)                         */
/* ═══════════════════════════════════════════════════════════════════════════ */

.drama-side-panel,
.drama-search-panel {
    width: 0;
    min-width: 0;
    max-width: 0;
    background: rgba(18, 18, 24, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid transparent;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 32px);
    margin: 16px 0;
    overflow: hidden;
    position: relative;
    z-index: 15;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(30px);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        min-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        margin 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.4s ease;
}

.drama-side-panel.open,
.drama-search-panel.open {
    width: 440px;
    min-width: 400px;
    max-width: 480px;
    margin: 16px 28px 16px 16px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    transform: translateX(0);
}

/* In Fullscreen mode: When side panel opens, it retains rounded corners, small space from wall, and shifts action buttons and nav */
#shortdramas-view.theater-fullscreen #drama-side-panel.open,
#shortdramas-view:fullscreen #drama-side-panel.open,
.drama-main-container:has(#drama-side-panel.open) #shortdramas-view.theater-fullscreen #drama-side-panel.open {
    position: fixed !important;
    top: 20px !important;
    right: 24px !important;
    bottom: 20px !important;
    height: calc(100vh - 40px) !important;
    margin: 0 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(18, 18, 24, 0.96) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8) !important;
    z-index: 100000 !important;
}

#shortdramas-view.theater-fullscreen .drama-main-container:has(#drama-side-panel.open) .drama-action-column,
#shortdramas-view:fullscreen .drama-main-container:has(#drama-side-panel.open) .drama-action-column {
    right: 488px !important;
}

#shortdramas-view.theater-fullscreen .drama-main-container:has(#drama-side-panel.open) .drama-floating-nav,
#shortdramas-view:fullscreen .drama-main-container:has(#drama-side-panel.open) .drama-floating-nav {
    right: 488px !important;
}

.drama-search-panel {
    background: rgba(20, 20, 28, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.drama-search-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.drama-search-results-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drama-search-card {
    display: flex;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    animation: dramaCardFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dramaCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.drama-search-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 45, 85, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.drama-search-card-poster {
    width: 60px;
    height: 84px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #111;
}

.drama-search-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.drama-search-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drama-search-card-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.drama-search-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.drama-search-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 45, 85, 0.15);
    color: #ff4d6d;
}


.drama-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(17, 17, 24, 0.95);
    flex-shrink: 0;
}

.drama-panel-tabs {
    display: flex;
    gap: 20px;
}

.drama-panel-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
    position: relative;
    transition: color 0.25s ease, transform 0.2s ease;
}

.drama-panel-tab:hover {
    color: #fff;
}

.drama-panel-tab.active {
    color: #fff;
}

.drama-panel-tab::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 0;
    height: 3px;
    background: #ff2d55;
    border-radius: 3px;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drama-panel-tab.active::after {
    width: 100%;
    left: 0;
}

.drama-panel-close {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.drama-panel-close:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.08);
}

.drama-panel-close svg {
    width: 18px;
    height: 18px;
}

/* Panel Tab Contents with Smooth Cross-Fade Animation */
.drama-panel-tab-content {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.drama-panel-tab-content.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    animation: dramaTabIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dramaTabIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }

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

/* Tab 1: Comments */
.drama-comments-header-row {
    padding: 12px 20px 8px;
    flex-shrink: 0;
}

.drama-comments-total {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.drama-comments-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.drama-comment-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.drama-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.drama-comment-body {
    overflow-x: hidden;
    max-width: 100vw;
    flex: 1;
    min-width: 0;
}

.drama-comment-author {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.drama-comment-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    word-break: break-word;
    margin-bottom: 6px;
}

.drama-comment-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.drama-comment-reply-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.drama-comment-reply-btn:hover {
    color: #fff;
}

.drama-comment-like-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    transition: color 0.2s;
}

.drama-comment-like-btn:hover,
.drama-comment-like-btn.liked {
    color: #ff2d55;
}

.drama-comment-like-btn.liked svg {
    fill: #ff2d55;
}

.drama-comment-like-btn svg {
    width: 14px;
    height: 14px;
    transition: fill 0.15s ease;
}

/* ── Threaded Replies (YouTube style) ── */
.drama-comment-replies-toggle {
    background: transparent;
    border: none;
    color: #5eaeff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 0 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.drama-comment-replies-toggle:hover {
    color: #88c6ff;
}

.drama-comment-replies-list {
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.drama-comment-replies-list.hidden {
    display: none;
}

.drama-reply-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.drama-reply-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Reply-To Banner ── */
.drama-reply-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: rgba(255, 45, 85, 0.12);
    border-top: 1px solid rgba(255, 45, 85, 0.25);
    flex-shrink: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    animation: fadeInUp 0.2s ease;
}

.drama-reply-banner-text strong {
    color: #ff2d55;
    margin-left: 2px;
}

.drama-cancel-reply-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s;
}

.drama-cancel-reply-btn:hover {
    color: #fff;
}

/* ── Skeleton Loader ── */
@keyframes shimmer {
    0% {
        background-position: -600px 0;
    }

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

.drama-skeleton-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 0 0 6px;
    animation: fadeInUp 0.3s ease;
}

.drama-skel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 75%);
    background-size: 600px 100%;
    animation: shimmer 1.4s infinite linear;
}

.drama-skel-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drama-skel-line {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 75%);
    background-size: 600px 100%;
    animation: shimmer 1.4s infinite linear;
}

.drama-skel-line.short {
    width: 45%;
}

.drama-skel-line.medium {
    width: 70%;
}

.drama-skel-line.long {
    width: 90%;
}

/* ── Episode Skeleton ── */
.drama-ep-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 4px 0;
}

.drama-ep-skel-tile {
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 75%);
    background-size: 600px 100%;
    animation: shimmer 1.4s infinite linear;
}


/* Add Comment Input Bar */
.drama-add-comment-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #14141c;
    flex-shrink: 0;
}

.drama-input-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.drama-comment-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 10px 16px;
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.drama-comment-input:focus {
    border-color: #ff2d55;
    background: rgba(255, 255, 255, 0.12);
}

.drama-btn-send-comment {
    background: #ff2d55;
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.drama-btn-send-comment:hover {
    background: #ff1340;
    transform: scale(1.08);
}

.drama-btn-send-comment svg {
    width: 18px;
    height: 18px;
    margin-left: 2px;
}

/* Tab 2: About & Episode Selector (Matching User Screenshot) */
.drama-about-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.drama-about-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.drama-about-poster-wrapper {
    position: relative;
    width: 100px;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

.drama-about-poster-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drama-poster-views-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
}

.drama-about-info-col {
    flex: 1;
    min-width: 0;
}

.drama-about-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.3;
}

.drama-about-genre-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.drama-about-synopsis {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
    margin: 0;
}

.drama-synopsis-more {
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

/* Episodes Grid Section */
.drama-section-heading {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
}

/* Pagination Range Pills (e.g. 1-24, 25-47) */
.drama-range-pills {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 14px;
    gap: 4px;
}

.drama-range-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drama-range-btn:hover {
    color: #fff;
}

.drama-range-btn.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* 6-Column Number Grid */
.drama-episodes-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.drama-ep-tile {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    user-select: none;
}

.drama-ep-tile:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}

.drama-ep-tile.playing {
    background: rgba(255, 45, 85, 0.28);
    border-color: #ff2d55;
    color: #ff2d55;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(255, 45, 85, 0.4);
}

/* Equalizer animated waves */
.drama-equalizer-wave {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    margin-right: 4px;
}

.drama-equalizer-bar {
    width: 2px;
    background: #ff2d55;
    border-radius: 1px;
    animation: eqWave 0.6s infinite ease-in-out alternate;
}

.drama-equalizer-bar:nth-child(1) {
    height: 6px;
    animation-delay: 0.1s;
}

.drama-equalizer-bar:nth-child(2) {
    height: 14px;
    animation-delay: 0.25s;
}

.drama-equalizer-bar:nth-child(3) {
    height: 10px;
    animation-delay: 0.4s;
}

@keyframes eqWave {
    0% {
        height: 4px;
    }

    100% {
        height: 14px;
    }
}

/* "You may also like" section */
.drama-rec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.drama-rec-card {
    border-radius: 10px;
    overflow: hidden;
    background: #181822;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.drama-rec-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.drama-rec-poster-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
}

.drama-rec-poster-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drama-rec-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.drama-rec-info {
    padding: 8px 10px;
}

.drama-rec-title {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CREATOR / CHANNEL DETAILS MODAL (Matching Image 4)                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

.drama-creator-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.drama-creator-modal-card {
    position: relative;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    background: #14141e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
    animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleUp {
    0% {
        transform: scale(0.92);
        opacity: 0;
    }

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

.drama-creator-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s;
}

.drama-creator-modal-close:hover {
    transform: scale(1.1);
}

.drama-creator-banner {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #ff2d55 0%, #7928ca 100%);
    background-size: cover;
    background-position: center;
}

.drama-creator-profile-header {
    padding: 0 24px 20px;
    text-align: center;
    position: relative;
    margin-top: -50px;
}

.drama-creator-avatar-container {
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 4px solid #14141e;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.drama-creator-avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drama-creator-main-name {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 2px;
}

.drama-creator-main-handle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 16px;
}

.drama-creator-stats-row {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 18px;
}

.drama-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.drama-stat-item strong {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}

.drama-stat-item span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.drama-btn-follow {
    width: 100%;
    max-width: 280px;
    background: #ff2d55;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    padding: 12px 0;
    border-radius: 25px;
    cursor: pointer;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(255, 45, 85, 0.4);
    transition: all 0.2s ease;
}

.drama-btn-follow:hover {
    background: #ff1340;
    transform: scale(1.02);
}

.drama-btn-follow.following {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: none;
}

.drama-creator-bio {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    margin: 0 auto;
    max-width: 400px;
}

/* Creator Series List */
.drama-creator-series-container {
    padding: 20px 24px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.drama-creator-series-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 16px;
}

.drama-creator-series-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.drama-creator-series-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drama-creator-series-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.drama-creator-series-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.drama-creator-series-meta img {
    width: 44px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.drama-creator-series-text {
    min-width: 0;
}

.drama-creator-series-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drama-creator-series-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.drama-btn-series-watch {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.drama-btn-series-watch:hover {
    background: #ff2d55;
    transform: scale(1.05);
}

.drama-creator-episodes-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.drama-creator-ep-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.drama-creator-ep-pill:hover {
    background: #ff2d55;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE DESIGN (Phone vs Laptop Viewports)                                */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Action Column: Desktop — sits to the bottom-right of the video card ── */
.drama-action-column {
    position: absolute;
    left: calc(100% + 14px);
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 20;
    pointer-events: auto;
}

/* Floating nav: sits at the vertical middle-right of the card frame (never overlaps top or bottom) */
.drama-floating-nav {
    position: absolute;
    left: calc(100% + 14px);
    top: 40%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 20;
    pointer-events: auto;
}

/* ── Action icon disc style for outside-video placement (TikTok Dull Grey & Tight Spacing) ── */
.drama-action-icon-disc {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.drama-action-icon-disc svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    fill: none;
}

.drama-action-count {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 0 !important;
    line-height: 1.1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    text-align: center;
}

/* ── Comment Like Button — YouTube style with thumbs up icon ── */
.drama-comment-like-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 0;
    transition: color 0.15s ease;
}

.drama-comment-like-btn:hover {
    color: rgba(255, 255, 255, 0.9);
}

.drama-comment-like-btn.liked {
    color: #fff;
}

.drama-comment-like-btn.liked svg {
    fill: #fff;
    stroke: #fff;
}

.drama-comment-like-btn svg {
    width: 15px;
    height: 15px;
    transition: fill 0.15s ease, stroke 0.15s ease;
}

/* ── Comments scroll spacing ── */
.drama-comments-scroll {
    padding-bottom: 12px;
}

.drama-comment-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 4px;
}

.drama-comment-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    flex-wrap: wrap;
}

/* ── Dislike button (YouTube style) ── */
.drama-comment-dislike-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 0;
    transition: color 0.15s ease;
}

.drama-comment-dislike-btn:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* ── Separator between reply toggle and next comment ── */
.drama-comment-thread-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.drama-nav-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drama-nav-arrow:hover:not(:disabled):not(.disabled) {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.08);
}

.drama-nav-arrow:disabled,
.drama-nav-arrow.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    transform: none !important;
}

.drama-nav-arrow svg {
    width: 18px;
    height: 18px;
}

/* Hide floating action menu (hamburger FAB) and Main Footer in Short Dramas view */
#shortdramas-view.active~#fab-container,
#shortdramas-view:not([style*="display: none"])~#fab-container,
#fab-container.hidden-in-dramas {
    display: none !important;
}

#shortdramas-view.active~#webapp-main-footer,
#shortdramas-view:not([style*="display: none"])~#webapp-main-footer,
body.shortdramas-mode #webapp-main-footer,
#live-tv-view.active~#webapp-main-footer,
#live-tv-view:not([style*="display: none"])~#webapp-main-footer,
body.live-tv-mode #webapp-main-footer,
#search-view.active~#webapp-main-footer,
#search-view:not([style*="display: none"])~#webapp-main-footer,
#downloads-view.active~#webapp-main-footer,
#downloads-view:not([style*="display: none"])~#webapp-main-footer,
#mylist-view.active~#webapp-main-footer,
#mylist-view:not([style*="display: none"])~#webapp-main-footer {
    display: none !important;
}

@media (max-width: 900px) {

    body.shortdramas-mode,
    html.shortdramas-mode {
        overflow: hidden !important;
        height: 100% !important;
    }

    body.shortdramas-mode .main-content {
        overflow: hidden !important;
        height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)) !important;
    }

    .drama-top-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: transparent;
        border-bottom: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 12px 16px;
        pointer-events: none;
        z-index: 20;
        height: 60px;
    }

    .drama-top-tabs {
        position: absolute;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 26px;
        padding: 3px 6px;
        gap: 4px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
        max-width: calc(100vw - 116px);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .drama-top-tabs::-webkit-scrollbar {
        display: none;
    }

    .drama-tab-btn {
        font-size: 11.5px;
        padding: 5px 10px;
        border-radius: 20px;
        white-space: nowrap;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .drama-tab-btn.active {
        background: rgba(255, 45, 85, 0.25);
        box-shadow: 0 2px 10px rgba(255, 45, 85, 0.35);
        border: 1px solid rgba(255, 45, 85, 0.45);
    }

    .drama-tab-btn.active::after {
        bottom: 2px;
        width: 14px;
        height: 2.5px;
        box-shadow: 0 0 6px #ff2d55;
    }

    .drama-desktop-search-bar {
        display: none !important;
    }

    #shortdramas-view.shortdramas-layout-wrapper {
        height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .drama-main-container {
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .drama-feed-column {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .drama-feed-scroll {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .drama-card-frame {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    .drama-video-container {
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .drama-video-element {
        border-radius: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
    }

    .drama-video-backdrop {
        border-radius: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
    }

    /* On mobile: action column sits INSIDE video player (bottom right overlay, above bottom nav) */
    .drama-action-column {
        position: absolute;
        left: auto;
        right: 12px;
        bottom: 80px;
        gap: 16px;
        z-index: 25;
        pointer-events: auto;
    }

    .drama-floating-nav {
        display: none !important;
    }

    /* STRICT MOBILE CONTROLS: Hide Desktop Fullscreen Theater button and More button on mobile */
    .btn-top-fullscreen,
    .btn-more-wrap,
    .drama-top-more-wrap {
        display: none !important;
    }

    /* Mobile Search Button on Top-Right of Player (Horizontal level with Mute, right side) */
    .drama-top-search-btn,
    .btn-top-search {
        display: flex !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.65) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 35 !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
        pointer-events: auto !important;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease !important;
    }

    .drama-top-search-btn:active,
    .btn-top-search:active {
        transform: scale(0.92) !important;
        background: rgba(255, 45, 85, 0.85) !important;
    }

    .drama-top-search-btn svg,
    .btn-top-search svg {
        width: 17px !important;
        height: 17px !important;
    }

    /* Mobile Expandable Search Bar across top of player */
    .drama-mobile-search-bar {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        right: 12px !important;
        max-width: calc(100% - 24px) !important;
        box-sizing: border-box !important;
        z-index: 50 !important;
    }

    .drama-mobile-search-bar.open {
        width: calc(100% - 24px) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Action item container has no box outline - only the round disc gets the focus ring */
    .drama-action-item,
    .drama-action-item.focused,
    .drama-action-item:focus-visible,
    .drama-action-item:focus {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    .drama-action-item.focused .drama-action-icon-disc,
    .drama-action-item:focus-visible .drama-action-icon-disc,
    .drama-action-item:focus .drama-action-icon-disc,
    .drama-action-icon-disc.focused,
    .drama-action-icon-disc:focus-visible {
        outline: none !important;
        border-radius: 50% !important;
        box-shadow: 0 0 0 2.5px #ff2d55, 0 0 16px rgba(255, 45, 85, 0.75) !important;
        transform: scale(1.1);
    }

    .drama-action-item.focused .drama-avatar-wrapper,
    .drama-action-item:focus-visible .drama-avatar-wrapper,
    .drama-avatar-wrapper.focused,
    .drama-avatar-wrapper:focus-visible {
        outline: none !important;
        border-radius: 50% !important;
        box-shadow: 0 0 0 2.5px #ff2d55, 0 0 16px rgba(255, 45, 85, 0.75) !important;
        transform: scale(1.1);
    }

    /* On mobile: action buttons are TikTok circular discs with dull grey background */
    .drama-action-icon-disc {
        width: 46px !important;
        height: 46px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border-radius: 50% !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    }

    .drama-action-icon-disc svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #fff !important;
        fill: none !important;
        filter: none !important;
    }

    .drama-action-count {
        font-size: 11px !important;
        font-weight: 700 !important;
        margin-top: 0 !important;
        line-height: 1.1 !important;
    }

    .drama-avatar-wrapper {
        width: 46px !important;
        height: 46px !important;
    }

    .drama-avatar-wrapper img {
        width: 52px !important;
        height: 52px !important;
    }

    .drama-action-count {
        font-size: 12px !important;
        font-weight: 800 !important;
        margin-top: 3px !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 1) !important;
    }

    /* Side Panel & Search Panel Become Bottom Sheet Drawers on Phone */
    .drama-side-panel,
    .drama-search-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 75vh;
        max-height: 75vh;
        margin: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9);
        transform: translateY(100%);
        opacity: 1;
        visibility: visible;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 2000;
        display: flex;
    }

    .drama-side-panel.open,
    .drama-search-panel.open {
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
}

/* ==========================================================================
   WATCH PARTY & MODERN PLAYBACK SUITE STYLES
   ========================================================================== */

/* In-Player Watch Party Live Status Pill */
.wp-status-pill {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: none;
    align-items: center;
    gap: 8px;
    height: 32px;
    box-sizing: border-box;
    background: rgba(229, 9, 20, 0.25);
    border: 1px solid rgba(229, 9, 20, 0.6);
    color: #fff;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, background 0.2s ease, margin 0.35s ease;
    cursor: pointer;
    user-select: none;
    z-index: 40;
    white-space: nowrap;
}

.wp-status-pill:hover {
    background: rgba(229, 9, 20, 0.4);
    border-color: #ff3344;
    transform: scale(1.03);
}

.wp-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3344;
    box-shadow: 0 0 8px #ff3344;
    animation: wpPulse 1.4s infinite ease-in-out;
}

@keyframes wpPulse {

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

    50% {
        opacity: 0.4;
        transform: scale(0.85);
    }
}

/* Watch Party Floating Sidebar (Desktop & Mobile) */
.wp-sidebar {
    position: fixed;
    top: 60px;
    right: 24px;
    bottom: 115px;
    /* Sits cleanly above scrubber and controls */
    width: 360px;
    max-width: calc(100vw - 48px);
    background: rgba(18, 18, 24, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    z-index: 9999999 !important;
    /* Always ON TOP of player controls */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(calc(100% + 40px));
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
    opacity: 0;
    pointer-events: none;
}

.wp-sidebar.open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.netflix-player-container.idle .wp-sidebar {
    bottom: 28px !important;
}

.wp-sidebar.scrubber-hidden {
    bottom: 28px !important;
}

/* Default transition for video player resizing */
#netflix-player-container #video-player,
#netflix-player-container #live-tv-video {
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Video Player Transformation when Watch Party Pin/Split Mode is Active */
#netflix-player-container.wp-active-mode #video-player,
#netflix-player-container.wp-active-mode #live-tv-video,
.live-tv-mini-player-container.wp-active-mode #live-tv-video,
.live-tv-mini-player-container.wp-active-mode #live-tv-iframe {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    bottom: 14px !important;
    width: calc(100% - 402px) !important;
    height: calc(100% - 28px) !important;
    max-width: calc(100% - 402px) !important;
    max-height: calc(100% - 28px) !important;
    border-radius: 16px !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    object-fit: contain !important;
}

#netflix-player-container.wp-active-mode .player-controls,
#netflix-player-container.wp-active-mode .player-header,
#netflix-player-container.wp-active-mode #subtitle-overlay,
#netflix-player-container.wp-active-mode #coco-subtitle-overlay,
.live-tv-mini-player-container.wp-active-mode .live-tv-controls,
.live-tv-mini-player-container.wp-active-mode .live-tv-top-bar {
    width: calc(100% - 402px) !important;
    left: 14px !important;
    right: auto !important;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#netflix-player-container.wp-active-mode .player-center-overlay,
.live-tv-mini-player-container.wp-active-mode #live-tv-mini-center-overlay {
    left: calc(14px + (100% - 402px) / 2) !important;
    width: auto !important;
    transform: translate(-50%, -50%) !important;
}

#netflix-player-container.wp-active-mode #player-loading,
#netflix-player-container.wp-active-mode #player-error,
.live-tv-mini-player-container.wp-active-mode #live-tv-buffering-spinner {
    left: calc(14px + (100% - 402px) / 2) !important;
}

#netflix-player-container.wp-active-mode #gear-menu,
#netflix-player-container.wp-active-mode .cc-menu-popup {
    right: calc(360px + 28px) !important;
}

#netflix-player-container.wp-active-mode .wp-sidebar,
.wp-sidebar.pinned-mode {
    top: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    height: calc(100% - 28px) !important;
    width: 360px !important;
    max-height: calc(100% - 28px) !important;
    border-radius: 16px !important;
    z-index: 9999999 !important;
}

#netflix-player-container.wp-active-mode .wp-sidebar.open,
.wp-sidebar.pinned-mode.open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.wp-sidebar-header {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
}

.wp-sidebar-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wp-header-action-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ccc;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wp-header-action-btn:hover {
    background: rgba(229, 9, 20, 0.3);
    color: #fff;
    border-color: rgba(229, 9, 20, 0.6);
}

.wp-header-action-btn.active {
    background: #e50914;
    color: #fff;
    border-color: #e50914;
}

.wp-sidebar-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s;
}

.wp-sidebar-close:hover {
    color: #fff;
}

/* Watch Party Tabs (Chat / Members / Settings) */
.wp-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.wp-tab-btn {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #888;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wp-tab-btn.active {
    color: #fff;
    border-bottom-color: #e50914;
    background: rgba(229, 9, 20, 0.08);
}

/* Chat Messages Feed */
.wp-chat-feed {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wp-chat-feed::-webkit-scrollbar {
    width: 5px;
}

.wp-chat-feed::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.wp-chat-msg {
    display: flex;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
}

.wp-chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.wp-chat-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    padding: 8px 12px;
    border-radius: 10px;
    border-top-left-radius: 2px;
    color: #eee;
}

.wp-chat-content.system-msg {
    background: rgba(229, 9, 20, 0.12);
    border: 1px solid rgba(229, 9, 20, 0.25);
    color: #ff99a0;
    font-style: italic;
    font-size: 12px;
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
    width: 100%;
}

.wp-chat-author {
    font-weight: 700;
    font-size: 12px;
    color: #ff5566;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
}

.wp-chat-time {
    font-size: 10.5px;
    color: #777;
    font-weight: normal;
}

/* Quick Emoji Reactions Bar */
.wp-reactions-bar {
    padding: 8px 12px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
}

.wp-react-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wp-react-btn:hover {
    transform: scale(1.35);
    background: rgba(255, 255, 255, 0.1);
}

.wp-react-btn:active {
    transform: scale(0.9);
}

/* Chat Input Bar */
.wp-chat-input-bar {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(14, 14, 18, 0.98);
}

.wp-chat-form {
    display: flex;
    gap: 8px;
}

.wp-chat-input {
    flex: 1;
    background: #202028;
    border: 1px solid #353542;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s;
}

.wp-chat-input:focus {
    border-color: #e50914;
}

.wp-chat-send {
    background: #e50914;
    border: none;
    color: #fff;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.wp-chat-send:hover {
    background: #f40612;
}

/* Participants List in Sidebar */
.wp-participants-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wp-participant-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.wp-p-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wp-p-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.wp-p-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #eee;
}

.wp-p-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.wp-p-badge.host {
    background: #e50914;
    color: #fff;
}

.wp-p-badge.remote {
    background: #2563eb;
    color: #fff;
}

/* Floating Animated Emoji Bursts on Video Canvas */
.wp-reaction-stage {
    position: fixed;
    bottom: 120px;
    right: 380px;
    /* Positioned cleanly beside the Watch Party sidebar */
    width: 140px;
    height: 360px;
    pointer-events: none;
    overflow: visible;
    z-index: 9999998 !important;
}

.wp-burst-item {
    position: absolute;
    bottom: 0;
    font-size: 36px;
    animation: floatUpFade 2.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

@keyframes floatUpFade {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    15% {
        opacity: 1;
        transform: translateY(-40px) scale(1.25);
    }

    70% {
        opacity: 0.9;
        transform: translateY(-200px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-280px) scale(0.8);
    }
}

.coco-audio-subs-modal {
    position: absolute !important;
    top: auto !important;
    bottom: 98px !important;
    right: 20px !important;
    background: rgba(18, 18, 24, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important;
    width: 460px !important;
    max-width: 92vw !important;
    max-height: calc(100vh - 130px) !important;
    z-index: 200 !important;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.9) !important;
    padding: 16px !important;
    display: none;
    flex-direction: column !important;
}

/* YouTube-Style Speed Boost / Custom Speed Pill Badge */
.player-speed-boost-badge {
    position: relative;
    top: auto;
    left: auto;
    transform: scale(0.85);
    background: rgba(18, 18, 24, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 30px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 16px;
    display: none;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 16px rgba(229, 9, 20, 0.3);
    z-index: 220;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, top 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin 0.35s ease;
    opacity: 0;
    white-space: nowrap;
}

.player-speed-boost-badge:hover {
    background: rgba(229, 9, 20, 0.85);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.03);
}

/* Stale Speed State: In top pills row */
.player-speed-boost-badge.show-custom-speed:not(.holding-below) {
    display: inline-flex !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

/* Holding Speed State when NO top pills active: On top */
.player-speed-boost-badge.active:not(.holding-below) {
    display: inline-flex !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    animation: speedBadgePulse 1.2s infinite ease-in-out;
}

/* Holding Speed State when TOP PILL(S) ARE ACTIVE: Sits just below the active top pill(s) */
.player-speed-boost-badge.holding-below {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) scale(1) !important;
    display: inline-flex !important;
    opacity: 1 !important;
    animation: speedBadgePulse 1.2s infinite ease-in-out;
}

.player-speed-boost-badge.holding-below:hover {
    transform: translateX(-50%) scale(1.03) !important;
}

@keyframes speedBadgePulse {

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

    50% {
        transform: scale(1.05);
    }
}

.player-speed-boost-badge.holding-below {
    animation: speedBadgePulseBelow 1.2s infinite ease-in-out;
}

@keyframes speedBadgePulseBelow {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.05);
    }
}

.player-speed-boost-badge.badge-confirm-reset {
    background: rgba(229, 9, 20, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: scale(1.05) !important;
}

.player-speed-boost-badge.holding-below.badge-confirm-reset {
    transform: translateX(-50%) scale(1.05) !important;
}

.player-speed-boost-badge.badge-dismissing {
    opacity: 0 !important;
    transform: scale(0.6) !important;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.player-speed-boost-badge.holding-below.badge-dismissing {
    transform: translateX(-50%) scale(0.6) !important;
}

.player-speed-boost-badge .speed-boost-icon {
    width: 16px;
    height: 16px;
    fill: #e50914;
    display: block;
    transition: fill 0.2s ease;
}

.player-speed-boost-badge:hover .speed-boost-icon {
    fill: #ffffff;
}

/* Animated ±10s Seek Ripples (Netflix/YouTube Style) */
.player-seek-ripple-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.player-seek-indicator {
    position: absolute;
    top: 50%;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.6);
    transition: none;
}

.player-seek-indicator.player-seek-left {
    left: 12%;
}

.player-seek-indicator.player-seek-right {
    right: 12%;
}

.player-seek-indicator.animate-seek {
    animation: seekRipplePop 0.65s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes seekRipplePop {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.6);
    }

    30% {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
        background: rgba(229, 9, 20, 0.28);
    }

    70% {
        opacity: 0.9;
        transform: translateY(-50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.25);
    }
}

.player-seek-indicator svg {
    width: 38px;
    height: 38px;
    fill: #ffffff;
    margin-bottom: 2px;
}

.player-seek-indicator span {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Audio & Subtitles Menu Shimmer Skeleton */
.as-subtitles-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 12px;
}

.as-sub-skeleton-row {
    height: 34px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.05) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

/* Player Sleep Timer Modal */
.player-sleep-modal {
    width: 280px !important;
    max-width: 90vw !important;
    background: rgba(18, 18, 24, 0.96) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9) !important;
    padding: 10px 8px !important;
    box-sizing: border-box;
    z-index: 210 !important;
    bottom: 98px !important;
    right: 20px !important;
}

.player-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
}

.player-menu-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.player-menu-back-btn,
.player-menu-close-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.player-menu-back-btn:hover,
.player-menu-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: scale(1.08);
}

.player-sleep-options {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 260px;
    overflow-y: auto;
}

.player-sleep-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.player-sleep-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.player-sleep-item .sleep-check {
    font-size: 14px;
    font-weight: 800;
    color: #e50914;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.player-sleep-item.active {
    background: rgba(229, 9, 20, 0.12);
    color: #ffffff;
    font-weight: 700;
}

.player-sleep-item.active .sleep-check {
    opacity: 1;
    transform: scale(1);
}

.coco-audio-subs-modal.open {
    display: flex !important;
    animation: audioSubsModalEnter 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes audioSubsModalEnter {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.95);
    }

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

.coco-as-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.coco-as-title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.coco-as-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.coco-as-col-title {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.coco-as-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.coco-as-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease !important;
}

.coco-as-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff;
    transform: translateX(3px);
}

.coco-as-item:active {
    transform: scale(0.98);
}

.coco-as-item.active {
    background: rgba(229, 9, 20, 0.18);
    color: #ff4d5a;
    font-weight: 700;
}

.coco-as-item span:last-child {
    display: inline-block;
    animation: checkmarkPop 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes checkmarkPop {
    0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }

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

.coco-as-footer-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.coco-as-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #eee;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.coco-as-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.coco-as-action-btn:active {
    transform: translateY(0) scale(0.97);
}

.coco-as-action-btn svg {
    width: 14px;
    height: 14px;
}

/* Mobile Adjustments for Watch Party */
@media (max-width: 768px) {
    .wp-sidebar {
        width: 100%;
        max-width: 100%;
        height: 60vh;
        top: auto;
        bottom: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .wp-sidebar.open {
        transform: translateY(0);
    }
}

/* Upgrade Modal Styles */
.cm-upgrade-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.cm-upgrade-modal-dialog {
    position: relative;
    max-width: 500px;
    width: 100%;
    background: #16161f;
    border: 1px solid rgba(229, 9, 20, 0.35);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    text-align: center;
    box-sizing: border-box;
    animation: modalPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

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

.cm-upgrade-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cm-upgrade-modal-icon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.3);
    margin-bottom: 16px;
}

.cm-upgrade-tier-tag {
    font-size: 11px;
    font-weight: 800;
    color: #ff5566;
    letter-spacing: 0.5px;
}

.cm-upgrade-modal-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
}

.cm-upgrade-modal-desc {
    font-size: 13.5px;
    color: #aaa;
    line-height: 1.55;
    margin: 0 0 22px;
}

.cm-upgrade-benefits-list {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cm-upgrade-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #ddd;
    line-height: 1.4;
}

.cm-upgrade-benefit-icon {
    color: #4cd964;
    font-weight: 800;
}

.cm-upgrade-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cm-upgrade-btn-proceed {
    width: 100%;
    padding: 13px;
    background: #e50914;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
    transition: background 0.2s;
}

.cm-upgrade-btn-proceed:hover {
    background: #f40612;
}

.cm-upgrade-btn-cancel {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 13px;
    cursor: pointer;
}

.cm-upgrade-btn-cancel:hover {
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ANIME & MANGA HUB — HERO BUTTONS, TOP 10, CAROUSELS, AND READER
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hero Banner Anime Entry Button */
.hero-anime-btn {
    position: absolute;
    top: 24px;
    left: 24px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(16, 16, 22, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 20;
    transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.25s cubic-bezier(0.2, 0, 0.1, 1),
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}

/* When sidebar is hidden/collapsed, show-sidebar button appears at left: 24px, shifting anime button smoothly to left: 80px */
body.sidebar-hidden .hero-anime-btn {
    left: 80px;
}

.hero-anime-btn:hover {
    background: rgba(28, 28, 38, 0.9);
    border-color: rgba(255, 118, 197, 0.6);
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        inset 0 1.5px 3px rgba(255, 255, 255, 0.3),
        0 8px 24px rgba(255, 110, 199, 0.35);
}

.hero-anime-btn:active {
    transform: scale(0.95);
}

.hero-anime-icon {
    width: 17px;
    height: 17px;
    color: #ff76c5;
    transition: transform 0.2s ease;
}

.hero-anime-btn:hover .hero-anime-icon {
    transform: scale(1.15) rotate(12deg);
}

@media (max-width: 768px) {

    .hero-anime-btn,
    body.sidebar-hidden .hero-anime-btn {
        left: 16px !important;
        top: 16px !important;
        height: 36px !important;
        padding: 0 14px !important;
        font-size: 12.5px !important;
    }
}

/* Inside-Hero Navigation & Hub Controls */
.hero-return-btn {
    position: absolute;
    top: 24px;
    left: 24px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(16, 16, 22, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 30;
    white-space: nowrap;
    flex-shrink: 0;
    transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.25s cubic-bezier(0.2, 0, 0.1, 1),
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

body.sidebar-hidden .hero-return-btn {
    left: 80px;
}

.hero-return-btn:hover {
    background: rgba(28, 28, 38, 0.9);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        inset 0 1.5px 3px rgba(255, 255, 255, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.6);
}

.hero-return-btn .hero-return-chevron {
    display: none;
}

.hero-return-btn .hero-return-desktop-icon {
    display: inline-block;
}

.anime-subview-section {
    opacity: 1;
    transition: opacity 0.22s ease-out;
}

.anime-subview-section.view-entering {
    animation: animeHubSubViewEnter 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes animeHubSubViewEnter {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }

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

.hero-hub-tabs {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    background: rgba(16, 16, 22, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.18),
        0 8px 28px rgba(0, 0, 0, 0.65);
    gap: 4px;
    transition: all 0.25s ease;
}

.hero-hub-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: #a0aec0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    user-select: none;
}

.hero-hub-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.hero-hub-tab.active {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 65, 108, 0.35);
}

.hero-hub-tab.active svg {
    filter: none;
    transform: none;
}

.hero-hub-search-box {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 30;
    display: flex;
    align-items: center;
}

.hero-hub-search-box input {
    background: rgba(16, 16, 22, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.45);
    border-radius: 999px;
    padding: 9px 16px 9px 38px;
    color: #fff;
    font-size: 13px;
    width: 220px;
    outline: none;
    transition: all 0.25s ease;
}

.hero-hub-search-box input:focus {
    width: 300px;
    border-color: #ff416c;
    background: rgba(28, 28, 38, 0.9);
    box-shadow: 0 0 16px rgba(255, 65, 108, 0.35);
}

.anime-search-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: #888;
}

@media (max-width: 900px) and (min-width: 601px) {
    .hero-hub-tabs {
        top: 74px;
    }

    .hero-hub-search-box {
        top: 24px;
        right: 24px;
    }
}

@media (max-width: 600px) {

    /* 1. Circular Frosted Back Button (Left: 16px, Top: 16px) */
    .hero-return-btn {
        top: 16px !important;
        left: 16px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 30 !important;
    }

    .hero-return-btn span,
    .hero-return-btn .hero-return-desktop-icon {
        display: none !important;
    }

    .hero-return-btn .hero-return-chevron {
        display: block !important;
        margin: 0 !important;
    }

    /* 2. Centered [Anime | Manga] Segmented Tab Switcher Pill on the same row (Top: 16px) */
    .hero-hub-tabs {
        top: 16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        height: 38px !important;
        padding: 3px 4px !important;
        gap: 3px !important;
        z-index: 30 !important;
    }

    .hero-hub-tab {
        padding: 5px 13px !important;
        font-size: 12px !important;
        gap: 5px !important;
        height: 30px !important;
    }

    .hero-hub-tab svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* 3. Circular Frosted Search Button on the same row (Right: 16px, Top: 16px) */
    .hero-hub-search-box {
        top: 16px !important;
        right: 16px !important;
        left: auto !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 30 !important;
        background: rgba(16, 16, 22, 0.82) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.45) !important;
        transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
    }

    .hero-hub-search-box:hover,
    .hero-hub-search-box:active {
        transform: scale(1.06) !important;
        background: rgba(28, 28, 38, 0.95) !important;
        border-color: rgba(255, 255, 255, 0.45) !important;
    }

    .hero-hub-search-box input {
        display: none !important;
    }

    .hero-hub-search-box .anime-search-icon {
        position: static !important;
        width: 18px !important;
        height: 18px !important;
        color: #ffffff !important;
        pointer-events: none !important;
    }

    .hero-hub-search-box #btn-anime-search-clear {
        display: none !important;
    }
}

/* Netflix-Style Top 10 Carousel */
.anime-top10-section {
    max-width: 1840px;
    margin: 4px auto 10px;
    padding: 0 24px;
    position: relative;
}

.anime-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.anime-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.anime-section-title {
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
}

.anime-section-badge {
    background: rgba(255, 65, 108, 0.2);
    color: #ff6584;
    border: 1px solid rgba(255, 65, 108, 0.4);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.anime-top10-scroll-wrap {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.anime-top10-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    padding: 6px 10px 10px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.anime-top10-carousel::-webkit-scrollbar {
    display: none;
}

/* Top 10 Card with Large Rank Number (No Box Outline) */
.anime-top10-card,
.anime-top10-card:hover,
.anime-top10-card:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.anime-top10-card {
    position: relative;
    flex: 0 0 230px;
    height: 255px;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    overflow: visible;
}

.anime-top10-card.rank-9 {
    margin-right: 18px;
}

.anime-top10-card.rank-10 {
    flex: 0 0 260px;
    margin-left: 12px;
}

.anime-top10-card:hover {
    transform: scale(1.05) translateY(-4px);
    z-index: 20;
}

.top10-rank-number {
    position: absolute;
    left: -12px;
    bottom: -2px;
    font-size: 130px;
    font-weight: 900;
    line-height: 0.85;
    color: #141414;
    -webkit-text-stroke: 4px #595959;
    user-select: none;
    z-index: 1;
    letter-spacing: -10px;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    pointer-events: none;
}

.top10-rank-number.rank-double-digit {
    font-size: 110px;
    left: -10px;
    letter-spacing: -10px;
}

.anime-top10-card:hover .top10-rank-number {
    -webkit-text-stroke: 4.5px #ff416c;
    color: #1f0a14;
    filter: drop-shadow(0 0 14px rgba(255, 65, 108, 0.5));
}


.top10-poster-wrap {
    position: relative;
    width: 165px;
    height: 240px;
    margin-left: auto;
    border-radius: 14px;
    overflow: hidden;
    z-index: 2;
    background: #202020;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}


.top10-poster-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top10-meta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
}

.top10-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.top10-badge-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    align-items: center;
}

.top10-pill {
    background: rgba(255, 255, 255, 0.2);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.top10-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 25;
    transition: all 0.2s ease;
}

.top10-nav-btn:hover {
    background: #ff416c;
    border-color: #ff416c;
    transform: translateY(-50%) scale(1.1);
}

.top10-prev {
    left: -10px;
}

.top10-next {
    right: -10px;
}

/* Anime Modal & Detail Styles */
.anime-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: animeModalFadeIn 0.3s ease;
}

@keyframes animeModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

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

.anime-modal-content {
    background: #15181f;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    width: 100%;
    max-width: 1120px;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
}

.anime-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anime-modal-hero {
    position: relative;
    min-height: 380px;
    height: 420px;
    border-radius: 28px 28px 0 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 32px 36px;
}

.anime-modal-backdrop-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    filter: brightness(0.95);
    transition: transform 0.4s ease;
}

.anime-modal-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, #15181f 0%, rgba(21, 24, 31, 0.6) 45%, rgba(0, 0, 0, 0.1) 100%),
        linear-gradient(to right, rgba(21, 24, 31, 0.8) 0%, transparent 60%);
    pointer-events: none;
}

.anime-modal-hero-bottom {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.anime-modal-info {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.adm-details-body {
    display: flex;
    gap: 32px;
    padding: 24px 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #15181f;
}

.adm-body-left {
    flex: 1;
    min-width: 0;
}

.adm-body-right {
    width: 280px;
    flex-shrink: 0;
}

.adm-meta-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #888;
    margin-bottom: 10px;
}

.adm-title {
    font-size: clamp(24px, 3.2vw, 38px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}

.adm-jp-title {
    font-size: 14px;
    color: #aaa;
    margin: 0 0 14px 0;
    font-weight: 500;
}

.adm-meta-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    align-items: center;
}

.adm-pill {
    background: rgba(255, 255, 255, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #ddd;
}

.adm-score {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.adm-quality {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.adm-countdown-badge {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(249, 115, 22, 0.25));
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    font-weight: 700;
    animation: pulseBadge 2s infinite ease-in-out;
}

@keyframes pulseBadge {

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

    50% {
        opacity: 0.85;
        transform: scale(0.98);
    }
}

/* Authentic ClearArt Logos */
.anime-hero-clearart-logo {
    max-height: 120px;
    max-width: min(340px, 80vw);
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
    margin-bottom: 8px;
    display: block;
}

.adm-clearart-logo {
    max-height: 90px;
    max-width: min(300px, 75vw);
    object-fit: contain;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.95));
    display: block;
}

.adm-synopsis {
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
    margin: 0 0 14px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.adm-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.adm-tag-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #bbb;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
}

/* Audio Switcher & Episode Grid */
.anime-episodes-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.adm-sort-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.adm-sort-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
}

.adm-custom-dropdown {
    position: relative;
    display: inline-block;
    user-select: none;
}

.adm-season-dropdown-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.adm-season-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
}

.adm-season-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 250px;
    max-height: 380px;
    overflow-y: auto;
    background: rgba(18, 18, 22, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
}

.adm-season-dropdown-menu.open {
    display: flex;
    animation: fadeInDropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.adm-dropdown-group-title {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #ff416c;
    padding: 8px 12px 4px 12px;
}

.adm-dropdown-item {
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.15s ease;
}

.adm-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.adm-dropdown-item.active {
    background: rgba(255, 65, 108, 0.18);
    color: #ff6584;
    font-weight: 700;
}


.adm-audio-toggle {
    display: flex;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px;
    border-radius: 999px;
}

.adm-audio-btn {
    padding: 6px 16px;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.adm-audio-btn.active {
    background: #ff416c;
    color: #fff;
}

.adm-ep-search-wrap input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 8px 16px;
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: all 0.25s ease;
    width: 200px;
}

.adm-ep-search-wrap input:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 65, 108, 0.6);
    box-shadow: 0 0 12px rgba(255, 65, 108, 0.25);
    width: 240px;
}

.anime-episode-list-container {
    padding: 24px 32px;
}

.anime-episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.anime-ep-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.anime-ep-card:hover {
    background: rgba(255, 65, 108, 0.12);
    border-color: rgba(255, 65, 108, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.ep-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ep-number-tag {
    font-weight: 800;
    font-size: 14px;
    color: #fff;
}

.ep-filler-tag {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.ep-title-text {
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ep-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.ep-btn-play {
    flex: 1;
    padding: 8px 14px;
    background: linear-gradient(135deg, #e50914, #ff416c);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.35);
}

.ep-btn-play:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
    box-shadow: 0 6px 16px rgba(229, 9, 20, 0.5);
}

.ep-btn-download {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ep-btn-download:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.08);
}

.ep-btn-download:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Manga Reader Modal */
.manga-reader-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #0b0c10;
    display: flex;
    flex-direction: column;
}

.manga-reader-header {
    height: 56px;
    background: rgba(15, 17, 23, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
    z-index: 50;
}

.reader-btn-back {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
}

.manga-reader-title-info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 46vw;
    pointer-events: none;
    z-index: 1;
}

.reader-manga-title {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reader-chapter-title {
    display: block;
    font-size: 11.5px;
    color: #a0aec0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manga-reader-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.reader-mode-toggle,
.reader-btn-download {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.reader-btn-close {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
}

.manga-reader-arrow-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(20, 24, 33, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.manga-reader-arrow-btn:hover {
    background: #ff416c;
    border-color: #ff416c;
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 10px 30px rgba(255, 65, 108, 0.6);
}

.reader-arrow-left {
    left: 20px;
}

.reader-arrow-right {
    right: 20px;
}

/* Floating Vertical Scroll Buttons (Continuous Scroll Mode) */
.manga-reader-vertical-scroll-bar {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.reader-vscroll-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(20, 24, 33, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.reader-vscroll-btn:hover {
    background: #ff416c;
    border-color: #ff416c;
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 10px 30px rgba(255, 65, 108, 0.6);
}

/* Continuous Scroll Mode */
.manga-reader-viewport {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    padding: 20px 0 80px 0;
}

.manga-reader-viewport.scroll-mode .manga-pages-container {
    max-width: var(--reader-scroll-width, 800px) !important;
    width: var(--reader-scroll-width, 800px) !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
    transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), max-width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.manga-reader-viewport.scroll-mode.fit-screen .manga-pages-container {
    --reader-scroll-width: 720px;
}

.manga-reader-viewport.scroll-mode.fit-width .manga-pages-container {
    --reader-scroll-width: 980px;
}

.manga-reader-viewport.scroll-mode.fit-orig .manga-pages-container {
    --reader-scroll-width: 1200px;
}

.manga-reader-viewport.scroll-mode .manga-page-slot {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

.manga-reader-viewport.scroll-mode .manga-page-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: top !important;
    box-shadow: none !important;
}

/* Single Page Horizontal Connected Slide / Swipe Mode */
.manga-reader-viewport.flip-mode {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    padding: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 120px) !important;
    margin-top: 54px !important;
    cursor: grab;
    user-select: none;
    scrollbar-width: none;
    display: block !important;
}

.manga-reader-viewport.flip-mode::-webkit-scrollbar {
    display: none;
}

.manga-reader-viewport.flip-mode:active {
    cursor: grabbing;
}

.manga-reader-viewport.flip-mode .manga-pages-container {
    display: flex !important;
    flex-direction: row !important;
    width: max-content !important;
    height: 100% !important;
    max-width: none !important;
    align-items: center !important;
    gap: 0 !important;
}

.manga-reader-viewport.flip-mode .manga-page-slot {
    flex: 0 0 100vw !important;
    width: 100vw !important;
    height: calc(100vh - 130px) !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 10px 20px !important;
    overflow-y: auto !important;
}

/* Sizing & Fit Modes in Single Page Flip Mode */
.manga-reader-viewport.flip-mode.fit-screen .manga-page-img {
    max-height: calc(100vh - 140px) !important;
    max-width: 90vw !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.manga-reader-viewport.flip-mode.fit-width .manga-page-img {
    width: min(92vw, 980px) !important;
    max-width: 980px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.manga-reader-viewport.flip-mode.fit-orig .manga-page-img {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Floating Reader Bottom-Right Zoom Controls (Vertical & Larger) */
.reader-zoom-floating-pill {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(20, 24, 33, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 60;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reader-zoom-floating-pill:hover {
    border-color: rgba(255, 65, 108, 0.55);
    transform: scale(1.05);
    box-shadow: 0 12px 36px rgba(255, 65, 108, 0.35);
}

.reader-zoom-floating-pill .reader-zoom-btn {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reader-zoom-floating-pill .reader-zoom-btn:hover {
    background: #ff416c;
    border-color: #ff416c;
    color: #fff;
    transform: scale(1.14);
}

.reader-zoom-floating-pill .reader-zoom-label {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    min-width: 38px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
    transition: color 0.2s ease;
}

.reader-zoom-floating-pill .reader-zoom-label:hover {
    color: #ff6584;
}

.reader-btn-download-main {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 14px rgba(255, 65, 108, 0.4);
}

.reader-btn-download-main:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 65, 108, 0.6);
}

/* Manga Download Modal */
.manga-dl-card {
    max-width: 500px !important;
    background: #141721 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 18px !important;
    padding: 22px 24px !important;
}

.manga-dl-chapter-info {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.manga-dl-chapter-info h4 {
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}

.manga-dl-chapter-info p {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #aaa;
}

.manga-dl-meta-badge {
    background: rgba(255, 65, 108, 0.15);
    border: 1px solid rgba(255, 65, 108, 0.4);
    color: #ff6584;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.manga-dl-options-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manga-dl-option-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.manga-dl-option-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: #ff416c;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.manga-dl-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.manga-dl-icon-wrap.pdf {
    background: rgba(255, 75, 75, 0.18);
    color: #ff4b4b;
    border: 1px solid rgba(255, 75, 75, 0.4);
}

.manga-dl-icon-wrap.cbz {
    background: rgba(255, 170, 0, 0.18);
    color: #ffaa00;
    border: 1px solid rgba(255, 170, 0, 0.4);
}

.manga-dl-details {
    flex: 1;
}

.manga-dl-opt-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.manga-dl-opt-desc {
    font-size: 11.5px;
    color: #99a;
}

.manga-dl-action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 6px;
    pointer-events: none;
    transition: all 0.2s ease;
}

.manga-dl-option-card:hover .manga-dl-action-btn {
    background: #ff416c;
    border-color: #ff416c;
    color: #fff;
}

.manga-reader-footer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 24, 33, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 50;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
}

.reader-nav-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.reader-progress-pill {
    font-size: 12px;
    color: #ff6584;
    font-weight: 700;
}

/* Anime & Manga Hub Search Results Overlay */
.anime-search-results-overlay {
    position: absolute;
    top: 70px;
    left: 24px;
    right: 24px;
    background: rgba(14, 17, 23, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    z-index: 100;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
}

.anime-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.anime-search-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.anime-search-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MANGA GENRE FILTER BAR & CHIPS
   ═══════════════════════════════════════════════════════════════════════════════ */
.manga-genre-bar {
    max-width: 1840px;
    margin: 12px auto 20px;
    padding: 0 24px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.manga-genre-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #ccc;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    white-space: nowrap;
    outline: none;
}

.manga-genre-chip:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

.manga-genre-chip.active {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 65, 108, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRO READER FIT MODES & SCRUBBER
   ═══════════════════════════════════════════════════════════════════════════════ */
.reader-fit-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

.reader-fit-select option {
    background: #141720;
    color: #fff;
}

.manga-reader-viewport.fit-width .manga-page-img {
    width: 100%;
    max-width: 840px;
    height: auto;
}

.manga-reader-viewport.fit-screen .manga-page-img {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    margin: 0 auto;
}

.manga-reader-viewport.fit-orig .manga-page-img {
    width: auto;
    max-width: none;
}

.reader-scrubber-wrap {
    display: flex;
    align-items: center;
    min-width: 140px;
    max-width: 240px;
}

.reader-page-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.reader-page-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff416c;
    box-shadow: 0 0 10px rgba(255, 65, 108, 0.8);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.reader-page-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   READ & WATCHED BADGES & 1-CLICK QUICK JUMP
   ═══════════════════════════════════════════════════════════════════════════════ */
.chapter-read-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(46, 213, 115, 0.15);
    color: #2ed573;
    border: 1px solid rgba(46, 213, 115, 0.35);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.episode-watched-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 210, 211, 0.15);
    color: #00d2d3;
    border: 1px solid rgba(0, 210, 211, 0.35);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-quick-chapter-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(20, 24, 33, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.2s ease;
    z-index: 5;
    pointer-events: auto;
}

.media-card:hover .card-quick-chapter-btn {
    opacity: 1;
    transform: translateY(0);
}

.card-quick-chapter-btn:hover {
    background: #ff416c;
    border-color: #ff416c;
    box-shadow: 0 4px 12px rgba(255, 65, 108, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MY LIST VIEW MORE CARD
   ═══════════════════════════════════════════════════════════════════════════════ */
.view-more-card {
    min-width: 140px;
    max-width: 140px;
    height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #aaa;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    text-align: center;
    padding: 16px;
}

.view-more-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ff416c;
    color: #fff;
    transform: scale(1.04);
}

.view-more-card-icon {
    font-size: 28px;
    margin-bottom: 8px;
    color: #ff416c;
}

.view-more-card-text {
    font-size: 13px;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CLAMPED 2-LINE SYNOPSIS & SINGLE-ROW GENRES WITH ANIMATED POPUPS
   ═══════════════════════════════════════════════════════════════════════════════ */
.adm-synopsis-container {
    position: relative;
    margin: 8px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #bbb;
}

.adm-synopsis-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-synopsis-more-btn {
    display: inline-block;
    color: #ff416c;
    font-weight: 700;
    cursor: pointer;
    margin-left: 6px;
    transition: color 0.15s ease;
}

.adm-synopsis-more-btn:hover {
    color: #ff6584;
    text-decoration: underline;
}

.adm-tags-single-row {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 8px;
    margin: 8px 0 12px;
    max-height: 32px;
    align-items: center;
}

.adm-tag-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e0e0e0;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.adm-tag-pill:hover {
    background: rgba(255, 65, 108, 0.2);
    border-color: #ff416c;
    color: #fff;
    transform: translateY(-1px);
}

.adm-tag-more-pill {
    background: linear-gradient(135deg, rgba(255, 65, 108, 0.2), rgba(255, 75, 43, 0.2));
    border: 1px solid #ff416c;
    color: #ff416c;
    font-weight: 800;
}

.adm-tag-more-pill:hover {
    background: #ff416c;
    color: #fff;
}

/* Modal Info Popups (Synopsis & All Genres) */
.modal-info-popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(12px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.modal-info-popup-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.modal-info-popup-card {
    background: #141720;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 65, 108, 0.15);
    transform: scale(0.92) translateY(20px);
    transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-info-popup-backdrop.active .modal-info-popup-card {
    transform: scale(1) translateY(0);
}

.modal-info-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-info-popup-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-info-popup-close {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #fff;
    font-size: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-info-popup-close:hover {
    background: #ff416c;
    transform: scale(1.1);
}

.modal-info-popup-body {
    overflow-x: hidden;
    max-width: 100vw;
    padding: 20px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: #ddd;
}

.modal-info-popup-body .popup-genre-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MANGA & ANIME CAROUSEL SKELETON LOADERS (ULTRA-SLEEK)
   ═══════════════════════════════════════════════════════════════════════════════ */
@keyframes mangaPulseShimmer {
    0% {
        background-position: -200% 0;
    }

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

.manga-skeleton-section {
    padding: 18px 0;
    margin-bottom: 20px;
}

.manga-skeleton-header {
    height: 24px;
    width: 240px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.03) 100%);
    background-size: 200% 100%;
    animation: mangaPulseShimmer 1.6s infinite ease-in-out;
    margin: 0 0 16px 24px;
}

.manga-skeleton-row {
    display: flex;
    gap: 16px;
    overflow: hidden;
    padding: 0 24px;
}

.manga-skeleton-card-wrap {
    min-width: 165px;
    max-width: 165px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.manga-skeleton-card {
    aspect-ratio: 2 / 3;
    width: 100%;
    border-radius: 12px;
    background: linear-gradient(110deg, #141722 20%, #202636 50%, #141722 80%);
    background-size: 200% 100%;
    animation: mangaPulseShimmer 1.6s infinite ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.manga-skeleton-card::before {
    content: '📖';
    font-size: 24px;
    opacity: 0.18;
}

.manga-skeleton-title {
    height: 14px;
    width: 80%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: mangaPulseShimmer 1.6s infinite ease-in-out;
}

.manga-skeleton-sub {
    height: 11px;
    width: 50%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.02) 100%);
    background-size: 200% 100%;
    animation: mangaPulseShimmer 1.6s infinite ease-in-out;
}

.manga-page-skeleton {
    width: min(85vw, 680px);
    height: min(82vh, 920px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(110deg, #10131d 20%, #1c2233 50%, #10131d 80%);
    background-size: 200% 100%;
    animation: mangaPulseShimmer 1.6s infinite ease-in-out;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85);
}

.manga-page-skeleton::after {
    content: '📖 Loading page...';
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.5px;
}

/* Modal Instant Loading Shimmer Skeletons */
.modal-backdrop-skeleton {
    background: linear-gradient(90deg, #11141c 25%, #1f2535 37%, #11141c 63%) !important;
    background-size: 400% 100% !important;
    animation: skeleton-shimmer 2s ease-in-out infinite !important;
}

.modal-skeleton-line {
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(90deg, #181c26 25%, #2a3142 37%, #181c26 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2s ease-in-out infinite;
    margin-bottom: 8px;
}

.modal-skeleton-episode-card {
    height: 52px;
    border-radius: 8px;
    background: linear-gradient(90deg, #161922 25%, #252b3b 37%, #161922 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 2s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOVIES CATEGORY BAR & ANIME STUDIO BRAND BAR
   ═══════════════════════════════════════════════════════════════════════════════ */
.movies-category-bar,
.anime-studio-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 2px;
}


.movies-category-bar::-webkit-scrollbar,
.anime-studio-bar::-webkit-scrollbar {
    display: none;
}

.movies-cat-chip,
.anime-studio-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #bbb;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.movies-cat-chip:hover,
.anime-studio-chip:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.movies-cat-chip.active {
    background: linear-gradient(135deg, #e50914, #b20710);
    border-color: #e50914;
    color: #fff;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}

.anime-studio-chip.active {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    border-color: #ff416c;
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 65, 108, 0.4);
}

/* Manga Chapter Search Input */
.manga-ch-search-input,
#mdm-ch-search {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    color: #fff !important;
    padding: 7px 16px 7px 34px !important;
    font-size: 13px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
}

.manga-ch-search-input:focus,
#mdm-ch-search:focus {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: #ff416c !important;
    box-shadow: 0 0 12px rgba(255, 65, 108, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MANGA READER MOBILE OPTIMIZATIONS (SLIM HEADER, HIGH-TOUCH CONTROLS, SPACING)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .manga-reader-header {
        padding: 8px 12px !important;
        gap: 6px !important;
        height: auto !important;
        min-height: 48px !important;
    }

    .manga-reader-title-info {
        position: static !important;
        transform: none !important;
        max-width: 140px !important;
        flex: 1 1 auto !important;
        text-align: left !important;
        pointer-events: auto !important;
    }

    .reader-manga-title {
        font-size: 12.5px !important;
        max-width: 130px !important;
    }

    .reader-chapter-title {
        font-size: 10px !important;
        max-width: 130px !important;
    }

    .manga-reader-actions {
        gap: 6px !important;
        margin-left: auto !important;
    }

    .reader-mode-toggle {
        font-size: 10.5px !important;
        padding: 5px 8px !important;
        white-space: nowrap !important;
    }

    .reader-fit-select {
        display: none !important;
    }

    #btn-reader-fullscreen {
        display: none !important;
    }

    .reader-btn-download-main span {
        display: none !important;
    }

    .reader-btn-download-main {
        padding: 6px 9px !important;
    }

    .reader-btn-close {
        font-size: 22px !important;
        padding: 0 4px !important;
    }

    /* Vertical Floating Zoom Controls on Mobile (Clean Right-Side Placement) */
    .reader-zoom-floating-pill {
        bottom: 84px !important;
        right: 12px !important;
        padding: 6px 4px !important;
        gap: 5px !important;
    }

    .reader-zoom-floating-pill .reader-zoom-btn {
        width: 34px !important;
        height: 34px !important;
    }

    .reader-zoom-floating-pill .reader-zoom-label {
        font-size: 10px !important;
        min-width: 32px !important;
    }

    /* Floating Vertical Scroll Buttons on Mobile */
    .manga-reader-vertical-scroll-bar {
        right: 12px !important;
        top: 38% !important;
        gap: 8px !important;
    }

    .reader-vscroll-btn {
        width: 36px !important;
        height: 36px !important;
    }

    /* Bottom Scrubber Pill on Mobile */
    .manga-reader-footer {
        bottom: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        padding: 6px 10px !important;
        gap: 6px !important;
    }

    .reader-nav-btn {
        padding: 4px 7px !important;
        font-size: 10.5px !important;
    }

    .reader-progress-pill {
        font-size: 10px !important;
        padding: 3px 6px !important;
        min-width: 54px !important;
    }
}

/* My List Multi-Source Carousels */
/* My List Multi-Source Carousels */
.mylist-carousel {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-behavior: smooth !important;
    padding: 10px 4px 14px 4px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    align-items: center;
}

.mylist-carousel::-webkit-scrollbar {
    display: none !important;
}

.anime-top10-scroll-wrap:has(.mylist-carousel),
.mylist-source-section .anime-top10-scroll-wrap {
    overflow: visible !important;
    position: relative;
    padding: 0 !important;
}

/* My List Card - Exactly Matches Home Screen Behavior */
.mylist-card {
    width: 165px;
    flex: 0 0 165px;
    height: 247px;
    flex-shrink: 0;
    position: relative !important;
    border-radius: 8px;
    background: #181818;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, outline 0.2s ease !important;
    contain: layout paint;
}

.mylist-carousel .mylist-card:first-of-type,
.media-carousel .mylist-card:first-of-type {
    transform-origin: left center !important;
}

.mylist-carousel .mylist-card:last-of-type,
.media-carousel .mylist-card:last-of-type {
    transform-origin: right center !important;
}

.mylist-card:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
    z-index: 10 !important;
}

.mylist-card.focused,
.mylist-card:focus-visible {
    outline: 2px solid #e50914 !important;
    outline-offset: 2px;
    border-radius: 8px;
    transform: scale(1.05) !important;
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.6), 0 10px 25px rgba(0, 0, 0, 0.7) !important;
    z-index: 10 !important;
}

.mylist-view-all-card {
    border-radius: 8px !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.2s ease !important;
}

.mylist-view-all-card:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Clean List Mode / Selection Circle */
.mylist-select-circle {
    display: none;
    position: absolute;
    top: 9px;
    right: 9px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(10, 10, 15, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.7);
    z-index: 80;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.mylist-select-circle svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* When Clean List (Edit Mode) is Active */
.mylist-selection-mode .mylist-select-circle {
    display: flex !important;
}

.mylist-selection-mode .mylist-card:hover .mylist-select-circle {
    border-color: #fff;
    transform: scale(1.08);
}

/* Selected Card State */
.mylist-card.is-selected {
    border-color: #e50914 !important;
    box-shadow: 0 0 24px rgba(229, 9, 20, 0.8), 0 16px 36px rgba(0, 0, 0, 0.9) !important;
    transform: translateY(-6px) scale(1.04) !important;
}

.mylist-card.is-selected .mylist-select-circle {
    display: flex !important;
    background: #e50914 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 14px rgba(229, 9, 20, 0.9) !important;
    transform: scale(1.1) !important;
}

.mylist-card.is-selected .mylist-select-circle svg {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* My List Carousel Navigation Arrows - Matching Home Screen Carousel Arrows */
.mylist-source-section {
    position: relative;
    margin-bottom: 24px !important;
}

.mylist-source-section .anime-section-header {
    margin-bottom: 6px;
}

.mylist-source-section .anime-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #e5e5e5;
    letter-spacing: -0.3px;
}

.mylist-source-section .anime-top10-scroll-wrap {
    position: relative;
    overflow: visible !important;
}

.mylist-arrow-prev,
.mylist-arrow-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.mylist-source-section:hover .mylist-arrow-prev:not(.disabled),
.mylist-source-section:hover .mylist-arrow-next:not(.disabled) {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mylist-arrow-prev:hover,
.mylist-arrow-next:hover {
    background: rgba(229, 9, 20, 0.95);
    border-color: #ff3344;
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.mylist-arrow-prev {
    left: 6px;
}

.mylist-arrow-next {
    right: 6px;
}

.mylist-arrow-prev.disabled,
.mylist-arrow-next.disabled {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* My List Category Filter Tabs */
.mylist-filter-tab {
    background: rgba(255, 255, 255, 0.06);
    color: #bbb;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mylist-filter-tab:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.mylist-filter-tab.active {
    background: #e50914 !important;
    color: #fff !important;
    border-color: #e50914 !important;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.45);
}

/* Search Category Tabs */
.search-category-tabs {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-cat-tab {
    background: rgba(255, 255, 255, 0.07);
    color: #bbb;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    outline: none;
}

.search-cat-tab:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.search-cat-tab.active {
    background: #e50914;
    color: #fff;
    border-color: #e50914;
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.4);
}

.search-multi-source-row {
    margin-bottom: 36px;
    width: 100%;
}

.search-multi-source-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.search-multi-source-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-multi-source-count {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
}

.search-multi-source-explore {
    font-size: 13px;
    font-weight: 600;
    color: #e50914;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.search-multi-source-explore:hover {
    color: #ff3b47;
}

#btn-search-sidebar-show {
    display: none !important;
}

.search-row-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    padding-top: 14px;
    margin-top: -14px;
    padding-bottom: 22px;
    margin-bottom: -10px;
    padding-left: 8px;
    padding-right: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.search-row-carousel::-webkit-scrollbar {
    display: none;
}

/* Downloads Category Filter Bar */
.downloads-category-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.downloads-category-filter-bar::-webkit-scrollbar {
    display: none;
}

.downloads-cat-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ccc;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.downloads-cat-pill:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    transform: translateY(-1px);
}

.downloads-cat-pill.active {
    background: #e50914;
    border-color: #e50914;
    color: #fff;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}

/* Category Tab Switching Animation */
@keyframes searchFadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.search-results-anim-wrap {
    animation: searchFadeSlideIn 0.28s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    width: 100%;
}

.movie-card.anim-card {
    opacity: 0;
    animation: searchFadeSlideIn 0.28s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* =======================================================
   IN-HOUSE AD ENGINE & UPGRADE PROMO STYLING
   ======================================================= */
.cm-ad-preroll-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInModal 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cm-ad-preroll-container.is-closing {
    opacity: 0;
    transform: scale(0.96);
    transition: all 0.22s ease;
    pointer-events: none;
}

.cm-pause-ad-banner {
    display: none;
    position: absolute;
    bottom: 92px;
    left: 28px;
    transform: none;
    background: rgba(16, 16, 24, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    padding: 10px 14px;
    width: auto;
    max-width: 380px;
    z-index: 95;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
    animation: fadeInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (max-width: 768px) {
    .cm-pause-ad-banner {
        bottom: 80px;
        left: 14px;
        right: 14px;
        max-width: none;
    }
}

/* =======================================================
   WATCH PARTY V2 FLOATING BUBBLE & EXPANDABLE DOCK
   ======================================================= */
.wp-floating-dock {
    position: fixed;
    right: 28px;
    bottom: 30px;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s ease;
    user-select: none;
}

/* Dynamic floating position: moves up when controls show, moves down when controls hide */
body.player-controls-active .wp-floating-dock,
.netflix-player-container:not(.idle)~.wp-floating-dock,
.netflix-player-container:not(.idle) .wp-floating-dock,
.netflix-player-container.show-controls~.wp-floating-dock,
.netflix-player-container.show-controls .wp-floating-dock {
    bottom: 125px !important;
}

.netflix-player-container.idle~.wp-floating-dock,
.netflix-player-container.idle .wp-floating-dock {
    bottom: 30px !important;
}

/* Round Bubble (Default Minimized State) */
.wp-dock-bubble {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e50914 0%, #b20710 100%);
    box-shadow: 0 10px 26px rgba(229, 9, 20, 0.55), 0 4px 12px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.wp-dock-bubble:hover {
    transform: scale(1.08);
}

.wp-bubble-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #fff;
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Expanded Pill (Hidden by default, reveals smoothly on hover) */
.wp-floating-dock .wp-floating-pill {
    display: none;
    background: rgba(18, 18, 24, 0.95);
    border: 1.5px solid rgba(229, 9, 20, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 30px;
    padding: 7px 14px 7px 12px;
    align-items: center;
    gap: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.94) translateX(8px);
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hovering over the dock collapses bubble and expands party active pill */
.wp-floating-dock:hover .wp-dock-bubble {
    display: none;
}

.wp-floating-dock:hover .wp-floating-pill {
    display: flex;
    opacity: 1;
    transform: scale(1) translateX(0);
}

.wp-floating-live-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.wp-floating-avatars {
    display: flex;
    align-items: center;
}

.wp-floating-avatar-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #111;
    margin-left: -8px;
    object-fit: cover;
}

.wp-floating-avatar-thumb:first-child {
    margin-left: 0;
}

.wp-floating-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.wp-floating-btn:hover {
    background: rgba(229, 9, 20, 0.3);
    border-color: #e50914;
}

.wp-bubble-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #fff;
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* In-Player Transient Live Chat Bubbles (Bottom-Left) */
.wp-player-chat-overlay {
    position: fixed;
    bottom: 96px;
    left: 32px;
    width: 320px;
    max-width: 80vw;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    z-index: 9999998 !important;
}

.wp-transient-chat-bubble {
    background: rgba(18, 18, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 12.5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    animation: transientBubbleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes transientBubbleIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

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

/* =======================================================
   IN-APP YOUTUBE-STYLE PIP MINIPLAYER
   ======================================================= */
.inapp-pip-miniplayer {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: #0f0f13;
    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: 999990;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    will-change: transform, opacity, left, top;
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.2s ease, opacity 0.2s ease;
}

.inapp-pip-miniplayer.is-dragging {
    cursor: grabbing !important;
    transition: none !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.98) !important;
    border-color: rgba(229, 9, 20, 0.5) !important;
}

.inapp-pip-miniplayer.entering {
    animation: miniPlayerEnter 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.inapp-pip-miniplayer.exiting {
    animation: miniPlayerExit 0.28s cubic-bezier(0.4, 0, 1, 1) forwards !important;
    pointer-events: none !important;
}

@keyframes miniPlayerEnter {
    0% {
        opacity: 0;
        transform: scale(0.82) translate(30px, 30px);
    }

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

@keyframes miniPlayerExit {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }

    100% {
        opacity: 0;
        transform: scale(0.82) translate(30px, 30px);
    }
}

/* Fullscreen container smooth minimizing & expanding morphing */
.netflix-player-container.pip-minimizing {
    transform-origin: calc(100vw - 180px) calc(100vh - 120px) !important;
    animation: netflixPlayerMinimize 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
    pointer-events: none !important;
}

@keyframes netflixPlayerMinimize {
    0% {
        opacity: 1;
        transform: scale(1);
        border-radius: 0px;
    }

    100% {
        opacity: 0;
        transform: scale(0.25);
        border-radius: 20px;
    }
}

.netflix-player-container.pip-expanding {
    transform-origin: calc(100vw - 180px) calc(100vh - 120px) !important;
    animation: netflixPlayerExpand 0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes netflixPlayerExpand {
    0% {
        opacity: 0;
        transform: scale(0.25);
        border-radius: 20px;
    }

    100% {
        opacity: 1;
        transform: scale(1);
        border-radius: 0px;
    }
}

.inapp-pip-miniplayer:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Adaptive Video Canvas Stage - exact aspect ratio */
.yt-mini-stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--mini-ar, 16 / 9) !important;
    background: #000;
    overflow: hidden;
    transition: aspect-ratio 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.yt-mini-video-slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yt-mini-video-slot img,
.yt-mini-video-slot canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mini Player Rolling Circle Loading Spinner */
.yt-mini-loading {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 16, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.yt-mini-spinner {
    width: 38px;
    height: 38px;
    border: 3.5px solid rgba(229, 9, 20, 0.25);
    border-top: 3.5px solid #e50914;
    border-radius: 50%;
    animation: netflix-spin 0.8s linear infinite;
    box-shadow: 0 0 16px rgba(229, 9, 20, 0.45);
}

/* YouTube Hover Overlay */
.yt-mini-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 10px;
    box-sizing: border-box;
    z-index: 5;
}

.yt-mini-stage:hover .yt-mini-hover-overlay {
    opacity: 1;
    pointer-events: auto;
}

.yt-mini-top-action-btn {
    position: absolute;
    top: 8px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.yt-mini-top-action-btn:first-child {
    left: 8px;
}

.yt-mini-top-action-btn:nth-child(2) {
    right: 8px;
}

.yt-mini-top-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Center Play Button */
.yt-mini-center-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.65);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}

.yt-mini-center-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: #e50914;
}

/* Seek Controls & Time */
.yt-mini-seek-cluster {
    position: absolute;
    bottom: 8px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.yt-mini-seek-btn {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.yt-mini-seek-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.yt-mini-time-label {
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Bottom Progress Scrubber */
.yt-mini-scrubber-track {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    z-index: 6;
    transition: height 0.15s;
}

.yt-mini-stage:hover .yt-mini-scrubber-track {
    height: 5px;
}

.yt-mini-scrubber-fill {
    height: 100%;
    width: 0%;
    background: #e50914;
    transition: width 0.15s linear;
}

/* Bottom Metadata Bar */
.yt-mini-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #14141a;
    gap: 10px;
}

.yt-mini-meta {
    flex: 1;
    min-width: 0;
}

.yt-mini-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-mini-subtitle {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-mini-expand-icon-btn {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s;
}

.yt-mini-expand-icon-btn:hover {
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────
   LIVE TV TIER BADGES & SOURCE LOCK INDICATORS
   ───────────────────────────────────────────────────────────── */
.epg-tier-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.epg-tier-badge.badge-plus {
    background: rgba(30, 136, 229, 0.95);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.epg-tier-badge.badge-pro {
    background: rgba(229, 9, 20, 0.95);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.epg-tier-badge.badge-premium {
    background: linear-gradient(135deg, #ffb300, #ff8f00);
    color: #000;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.epg-grid-card.channel-locked {
    opacity: 0.82;
    filter: saturate(0.85);
    position: relative;
}

.epg-grid-card.channel-locked:hover {
    opacity: 1;
    filter: saturate(1);
}

.epg-grid-card.channel-locked .epg-grid-logo-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   SHORT DRAMA EPISODE GATING & UNLOCK OVERLAY
   ───────────────────────────────────────────────────────────── */
.drama-ep-tile.locked {
    position: relative;
    opacity: 0.65;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.drama-ep-tile.locked:hover {
    opacity: 1;
    background: rgba(229, 9, 20, 0.15);
    border-color: rgba(229, 9, 20, 0.4);
}

.drama-ep-tile .drama-ep-lock-icon {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 9px;
    opacity: 0.8;
}

.drama-unlock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 16, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    box-sizing: border-box;
    animation: fadeIn 0.2s ease;
}

.drama-unlock-box {
    max-width: 380px;
    width: 100%;
}

.drama-unlock-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.15);
    border: 1.5px solid rgba(229, 9, 20, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
}

.drama-unlock-title {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
}

.drama-unlock-desc {
    font-size: 13px;
    color: #aaa;
    line-height: 1.5;
    margin: 0 0 20px;
}

.drama-unlock-btn-ad {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 800;
    border-radius: 10px;
    background: #e50914;
    border: none;
    color: #fff;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform 0.15s, background 0.15s;
}

.drama-unlock-btn-ad:hover {
    background: #f40612;
    transform: scale(1.02);
}

.drama-unlock-btn-upgrade {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.drama-unlock-btn-upgrade:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   LIVE TV HUB LANDING EXPERIENCE: HERO, BBN 24/7 & FOOTBALL FIXTURES
   ========================================================================== */

/* Container and Scroll Behavior */
.live-tv-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

.live-hub-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 0 60px 0;
    box-sizing: border-box;
    animation: liveHubFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

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

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

/* 1. Live Hub vs TV Guide Nav Switcher in Toolbar */
.live-hub-nav-switcher {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 30px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
    margin-right: 12px;
}

.live-hub-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap;
}

.live-hub-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.live-hub-tab-btn.active {
    background: #e50914 !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(229, 9, 20, 0.5);
}

/* 2. CINEMATIC LIVE TV HERO BANNER */
.live-hero-banner {
    position: relative;
    height: clamp(580px, 78vh, 760px);
    min-height: 580px;
    width: calc(100% - 48px);
    max-width: 1840px;
    margin: 20px auto 32px auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 60px 56px 64px;
    box-sizing: border-box;
    overflow: hidden;
    background: #0a0a0f;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 2px 20px rgba(255, 255, 255, 0.12),
        inset 0 0 80px rgba(0, 0, 0, 0.8),
        0 20px 48px rgba(0, 0, 0, 0.85);
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.2, 0, 0.1, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.live-hero-banner:hover {
    transform: scale(1.006);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 2px 20px rgba(255, 255, 255, 0.18),
        inset 0 0 80px rgba(0, 0, 0, 0.8),
        0 24px 56px rgba(0, 0, 0, 0.9);
}

.live-hero-banner:focus,
.live-hero-banner.focused {
    outline: none !important;
    transform: scale(1.008);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 32px rgba(255, 255, 255, 0.25), 0 24px 56px rgba(0, 0, 0, 0.9) !important;
}

.live-hero-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-image 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    animation: liveKenBurns 20s infinite alternate ease-in-out;
}

@keyframes liveKenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.06);
    }
}

.live-hero-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(circle at 80% 35%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(10, 10, 16, 0.85) 100%),
        linear-gradient(to top, rgba(10, 10, 16, 0.95) 0%, rgba(10, 10, 16, 0.45) 40%, transparent 70%),
        linear-gradient(to right, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.5) 40%, rgba(8, 8, 12, 0.15) 75%, transparent 100%);
}

/* Hero Content */
.live-hero-content {
    position: relative;
    z-index: 20;
    max-width: 720px;
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.live-hero-content.fade-blur-active {
    opacity: 0 !important;
    transform: translateY(8px);
}

.live-hero-badges-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.live-hero-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(229, 9, 20, 0.22);
    border: 1px solid rgba(229, 9, 20, 0.6);
    color: #ff3344;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.live-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e50914;
    box-shadow: 0 0 10px #e50914;
    animation: livePulseAnim 1.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
    display: inline-block;
}

.live-pulse-dot.gold {
    background: #ffb800;
    box-shadow: 0 0 10px #ffb800;
    animation: livePulseGold 1.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.live-pulse-dot.green {
    background: #00e676;
    box-shadow: 0 0 10px #00e676;
    animation: livePulseGreen 1.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes livePulseAnim {

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

    50% {
        opacity: 0.4;
        transform: scale(1.3);
    }
}

@keyframes livePulseGold {

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

    50% {
        opacity: 0.4;
        transform: scale(1.3);
    }
}

@keyframes livePulseGreen {

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

    50% {
        opacity: 0.4;
        transform: scale(1.3);
    }
}

.live-hero-category-pill {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.live-hero-quality-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.live-hero-title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 900;
    line-height: 1.12;
    margin: 0 0 12px 0;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
    letter-spacing: -0.5px;
}

.live-hero-subtitle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.live-hero-time-badge {
    color: #00e676;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.live-hero-channel-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.live-hero-desc {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(235, 235, 245, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 660px;
}

.live-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-live-hero {
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, box-shadow 0.2s;
    letter-spacing: 0.3px;
}

.btn-live-play {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 4px 18px rgba(255, 255, 255, 0.3);
}

.btn-live-play:hover {
    background-color: #f2f2f2;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 255, 255, 0.45);
}

.btn-live-guide {
    background: rgba(229, 9, 20, 0.18);
    color: #ffffff;
    border: 1px solid rgba(229, 9, 20, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn-live-guide:hover {
    background: rgba(229, 9, 20, 0.32);
    border-color: #e50914;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.4);
}

.btn-live-info {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn-live-info:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

/* Hero Left/Right Nav Arrows */
.live-hero-nav-btn {
    position: absolute;
    top: 0;
    height: 100%;
    width: 10%;
    min-width: 55px;
    z-index: 15;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
    border-radius: inherit;
}

.live-hero-nav-btn svg {
    width: 42px;
    height: 42px;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
}

.live-hero-nav-btn:hover {
    opacity: 1;
}

.live-hero-nav-btn:hover svg {
    transform: scale(1.15);
}

.live-hero-nav-prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 20px;
}

.live-hero-nav-prev:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

.live-hero-nav-next {
    right: 0;
    justify-content: flex-end;
    padding-right: 20px;
}

.live-hero-nav-next:hover {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

/* Pagination Track */
.live-hero-pagination-wrapper {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 20;
}

.live-hero-pagination-track {
    display: flex;
    gap: 8px;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.live-hero-pagination-dash {
    width: 22px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.35s ease;
    cursor: pointer;
}

.live-hero-pagination-dash.active {
    background: #ffffff;
    width: 32px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* 3. BIG BROTHER NAIJA (BBN) 24/7 INTERACTIVE CARD */
.live-bbn-container {
    width: calc(100% - 48px);
    max-width: 1840px;
    margin: 0 auto 36px auto;
}

.live-bbn-card {
    position: relative;
    border-radius: 28px;
    background: linear-gradient(135deg, #181524 0%, #100f1c 50%, #151119 100%);
    border: 1px solid rgba(255, 184, 0, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(255, 184, 0, 0.12),
        inset 0 2px 24px rgba(255, 184, 0, 0.1),
        0 16px 40px rgba(0, 0, 0, 0.7);
    padding: 32px 38px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.live-bbn-card:hover {
    transform: translateY(-3px) scale(1.004);
    border-color: rgba(255, 184, 0, 0.55);
    box-shadow:
        inset 0 0 0 1px rgba(255, 184, 0, 0.25),
        inset 0 2px 28px rgba(255, 184, 0, 0.2),
        0 20px 48px rgba(0, 0, 0, 0.85);
}

.live-bbn-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 85% 30%, rgba(255, 184, 0, 0.18) 0%, transparent 60%);
    pointer-events: none;
}

.live-bbn-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.live-bbn-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.live-bbn-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-bbn-eye-icon {
    font-size: 22px;
    filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.6));
}

.live-bbn-brand {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #ffb800;
    text-transform: uppercase;
}

.live-bbn-season-tag {
    background: rgba(255, 184, 0, 0.14);
    border: 1px solid rgba(255, 184, 0, 0.3);
    color: #ffd266;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.live-bbn-pulse-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 184, 0, 0.15);
    border: 1px solid rgba(255, 184, 0, 0.4);
    color: #ffd266;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.live-bbn-headline {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #ffffff;
}

.live-bbn-synopsis {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(230, 230, 240, 0.8);
    margin: 0;
    max-width: 820px;
}

.live-bbn-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
}

.live-bbn-schedule-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffd266;
    font-size: 13px;
    font-weight: 700;
}

.btn-bbn-watch {
    background: linear-gradient(135deg, #ffb800 0%, #ff8800 100%);
    color: #000;
    border: none;
    border-radius: 24px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(255, 184, 0, 0.4);
    transition: all 0.2s ease;
}

.btn-bbn-watch:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 184, 0, 0.6);
}

/* 4. LIVE FOOTBALL FIXTURES ROW */
.live-fixtures-section,
.live-channels-quick-section {
    width: calc(100% - 48px);
    max-width: 1840px;
    margin: 0 auto 36px auto;
}

.live-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.live-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-section-icon {
    font-size: 20px;
}

.live-section-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.2px;
}

.live-section-count {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #ccc;
    white-space: nowrap;
}

.live-section-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-carousel-nav-arrows {
    display: flex;
    gap: 6px;
}

.live-fixtures-empty-state {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin: 4px 0 12px 0;
    box-sizing: border-box;
    width: 100%;
}

.live-fixtures-empty-icon {
    font-size: 18px;
    opacity: 0.7;
}

.live-section-guide-link {
    background: transparent;
    border: none;
    color: #e50914;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.live-section-guide-link:hover {
    color: #ff3344;
    transform: translateX(3px);
}

.live-carousel-arrow-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.live-carousel-arrow-btn:hover {
    background: #e50914;
    border-color: #e50914;
    transform: scale(1.08);
}

.live-fixtures-carousel {
    display: flex;
    overflow-x: auto;
    gap: 18px;
    padding: 8px 4px 18px 4px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    -webkit-overflow-scrolling: touch;
}

.live-fixtures-carousel::-webkit-scrollbar {
    height: 6px;
}

.live-fixtures-carousel::-webkit-scrollbar-track {
    background: transparent;
}

.live-fixtures-carousel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.live-fixtures-carousel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.live-fixture-card {
    flex: 0 0 310px;
    min-width: 310px;
    max-width: 310px;
    scroll-snap-align: start;
    background: #14141a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: default;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.live-fixture-skeleton-card {
    pointer-events: none;
    background: #121218;
    border-color: rgba(255, 255, 255, 0.06);
}

.live-fixture-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
    background: #181822;
}

.live-fixture-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.live-fixture-comp {
    font-size: 11px;
    font-weight: 800;
    color: #aaa;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.live-fixture-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: #00e676;
}

.live-fixture-teams {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.live-fixture-team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.live-fixture-team-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-fixture-team-logo {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px;
}

.live-fixture-team-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.live-fixture-score {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.live-fixture-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
}

.live-fixture-channel {
    font-size: 12px;
    font-weight: 700;
    color: #8c8c9a;
}

.live-fixture-actions-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-fixture-bell {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #bbb;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-fixture-bell:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.1);
}

.btn-fixture-bell.active {
    background: rgba(255, 184, 0, 0.2) !important;
    border-color: #ffb800 !important;
    color: #ffb800 !important;
    box-shadow: 0 0 12px rgba(255, 184, 0, 0.4);
    animation: bellRing 0.5s ease-in-out;
}

@keyframes bellRing {

    0%,
    100% {
        transform: rotate(0deg);
    }

    20%,
    60% {
        transform: rotate(-15deg);
    }

    40%,
    80% {
        transform: rotate(15deg);
    }
}

.live-fixture-score.goal-flash {
    color: #00e676 !important;
    animation: goalScorePulse 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes goalScorePulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 transparent;
    }

    30% {
        transform: scale(1.4);
        text-shadow: 0 0 16px #00e676;
    }

    100% {
        transform: scale(1);
        text-shadow: 0 0 0 transparent;
    }
}

.btn-fixture-watch {
    background: #e50914;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-fixture-watch:hover {
    background: #ff1a28;
    transform: scale(1.05);
}

/* See More Fixtures Button in Header */
.live-fixtures-see-more-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.live-fixtures-see-more-btn:hover {
    background: rgba(229, 9, 20, 0.2);
    border-color: #e50914;
    color: #fff;
    transform: translateY(-1px);
}

/* See More Card at the end of Carousel */
.see-more-fixture-card {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(145deg, rgba(20, 20, 26, 0.9), rgba(30, 30, 42, 0.9)) !important;
    border: 1px dashed rgba(255, 255, 255, 0.22) !important;
    text-align: center;
}

.see-more-fixture-card:hover {
    border-color: #e50914 !important;
    background: linear-gradient(145deg, rgba(30, 20, 26, 0.95), rgba(40, 30, 42, 0.95)) !important;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(229, 9, 20, 0.3) !important;
}

.see-more-fixture-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

.see-more-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.15);
    color: #e50914;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    transition: transform 0.2s, background 0.2s;
}

.see-more-fixture-card:hover .see-more-icon-circle {
    transform: scale(1.1);
    background: #e50914;
    color: #fff;
}

.see-more-count {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.see-more-label {
    font-size: 12px;
    font-weight: 600;
    color: #8c8c9a;
}

/* ALL FIXTURES MODAL DIALOG */
.all-fixtures-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.all-fixtures-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.all-fixtures-dialog {
    position: relative;
    width: 100%;
    max-width: 1060px;
    max-height: 90vh;
    background: #111116;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }

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

.all-fixtures-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.all-fixtures-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.all-fixtures-icon {
    font-size: 22px;
}

.all-fixtures-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.all-fixtures-subtitle {
    font-size: 12px;
    color: #8c8c9a;
    font-weight: 600;
}

.all-fixtures-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.all-fixtures-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 6px 12px;
    width: 220px;
    color: #8c8c9a;
}

.all-fixtures-search {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    width: 100%;
}

.all-fixtures-search::placeholder {
    color: #666;
}

.all-fixtures-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #bbb;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.all-fixtures-close-btn:hover {
    background: #e50914;
    color: #fff;
    border-color: #e50914;
}

.all-fixtures-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
}

.all-fixtures-tabs::-webkit-scrollbar {
    display: none;
}

.all-fixtures-tab {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #aaa;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.all-fixtures-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.all-fixtures-tab.active {
    background: #e50914;
    border-color: #e50914;
    color: #fff;
}

.all-fixtures-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    scroll-behavior: smooth;
    max-height: calc(90vh - 150px);
}

.all-fixtures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

.all-fixtures-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
    color: #8c8c9a;
    font-size: 13px;
}

.all-fixtures-spinner .spinner-ring {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #e50914;
    border-radius: 50%;
    animation: spinnerSpin 0.7s linear infinite;
}

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

@media (max-width: 768px) {
    .all-fixtures-dialog {
        max-height: 95vh;
        border-radius: 16px;
    }

    .all-fixtures-header {
        padding: 14px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .all-fixtures-controls {
        width: 100%;
        justify-content: space-between;
    }

    .all-fixtures-search-wrap {
        flex: 1;
    }

    .all-fixtures-tabs {
        padding: 8px 16px;
    }

    .all-fixtures-body {
        padding: 14px 16px;
    }

    .all-fixtures-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile Fixtures Section Overrides */
    .live-fixtures-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 28px 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    .live-section-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .live-section-title-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }

    .live-section-title {
        font-size: 18px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        letter-spacing: -0.2px !important;
    }

    .live-section-icon {
        font-size: 18px !important;
    }

    .live-section-count {
        font-size: 11px !important;
        padding: 2px 7px !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .live-carousel-nav-arrows {
        display: none !important; /* Hide scroll arrow buttons on mobile touch screens */
    }

    .live-section-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .live-fixtures-see-more-btn {
        padding: 5px 9px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    .live-section-guide-link {
        font-size: 12px !important;
        white-space: nowrap !important;
        padding: 4px 6px !important;
    }

    .live-section-guide-link .live-guide-link-text {
        display: none !important; /* On mobile replace full text with Sports to prevent clipping */
    }

    .live-section-guide-link::before {
        content: "Sports " !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    .live-fixtures-carousel {
        padding: 4px 0 14px 0 !important;
        gap: 12px !important;
    }

    .live-fixture-card {
        flex: 0 0 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .live-fixtures-empty-state {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 14px 16px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 12.5px !important;
        margin: 4px 0 10px 0 !important;
        box-sizing: border-box !important;
    }
}

/* 5. TRENDING LIVE CHANNELS QUICK ROW */
.live-quick-channels-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.live-quick-channel-card {
    flex: 0 0 170px;
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.live-quick-channel-card:hover {
    transform: translateY(-3px);
    border-color: #e50914;
    background: #191924;
}

.live-quick-channel-logo {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: contain;
    background: #000;
    padding: 6px;
    margin-bottom: 10px;
}

.live-quick-channel-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.live-quick-channel-prog {
    font-size: 11px;
    color: #8c8c9a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Responsive Mobile Adjustments */
@media (max-width: 768px) {
    .live-hero-banner {
        width: calc(100% - 24px) !important;
        height: auto !important;
        min-height: 480px !important;
        padding: 44px 18px 24px 18px !important;
        border-radius: 24px !important;
        margin: 12px auto 20px auto !important;
    }

    .live-hero-badges-row {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    .live-hero-status-pill,
    .live-hero-category-pill,
    .live-hero-quality-pill {
        font-size: 10px !important;
        padding: 3px 9px !important;
    }

    .live-hero-title {
        font-size: 1.65rem !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    .live-hero-subtitle-row {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .live-hero-time-badge {
        font-size: 12.5px !important;
    }

    .live-hero-channel-badge {
        font-size: 11px !important;
        padding: 2px 9px !important;
    }

    .live-hero-desc {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 18px !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    .live-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        margin-bottom: 22px !important;
    }

    .btn-live-hero {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
    }

    .btn-live-hero svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* Match details / third button spans full width if visible */
    .btn-live-hero.btn-live-info {
        grid-column: 1 / -1 !important;
    }

    .live-hero-pagination-wrapper {
        bottom: 10px !important;
        height: 6px !important;
    }

    .live-hero-pagination-dash {
        width: 14px !important;
        height: 3px !important;
    }

    .live-hero-pagination-dash.active {
        width: 22px !important;
    }

    /* BBN 24/7 Card Mobile Enhancements */
    .live-bbn-container,
    .live-fixtures-section,
    .live-channels-quick-section {
        width: calc(100% - 24px) !important;
        margin-bottom: 20px !important;
    }

    .live-bbn-card {
        padding: 18px 16px !important;
        border-radius: 20px !important;
    }

    .live-bbn-content {
        gap: 12px !important;
    }

    .live-bbn-top-row {
        gap: 8px !important;
    }

    .live-bbn-logo-wrap {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .live-bbn-eye-icon {
        font-size: 18px !important;
    }

    .live-bbn-brand {
        font-size: 13px !important;
        letter-spacing: 1px !important;
    }

    .live-bbn-season-tag {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    .live-bbn-pulse-pill {
        font-size: 10px !important;
        padding: 3px 10px !important;
    }

    .live-bbn-headline {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }

    .live-bbn-synopsis {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .live-bbn-footer-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-top: 2px !important;
    }

    .live-bbn-schedule-pill {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    .live-bbn-actions {
        width: 100% !important;
    }

    .btn-bbn-watch {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
    }

    /* Football Fixtures Carousel Mobile */
    .live-fixtures-carousel {
        display: flex !important;
        overflow-x: auto !important;
        gap: 12px !important;
        padding-bottom: 12px !important;
    }

    .live-fixtures-carousel .live-fixture-card {
        flex: 0 0 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
    }

    .live-section-title {
        font-size: 17px !important;
    }

    .live-hub-nav-switcher {
        margin-right: 6px !important;
    }

    .live-hub-tab-btn {
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
}


/* Live TV Iframe Centering & Native Controls Elevation */
.live-tv-mini-player-container.iframe-active {
    overflow: hidden !important;
    position: relative !important;
}

.live-tv-mini-player-container.iframe-active #live-tv-iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    z-index: 5 !important;
    pointer-events: auto !important;
}

.live-tv-mini-player-container.iframe-active .live-tv-controls {
    display: none !important;
}

.live-tv-mini-player-container.iframe-active #live-tv-mini-center-overlay {
    display: none !important;
}

.live-tv-mini-player-container.iframe-active .live-tv-iframe-bottom-blocker {
    display: none !important;
}

.live-tv-mini-player-container.iframe-active .live-tv-top-bar {
    z-index: 25 !important;
    pointer-events: auto !important;
}

/* Live TV Server Switcher */
.live-tv-server-list.expanded {
    display: flex !important;
}

html.live-tv-mode {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

/* ==========================================================================
   HERO BANNER AGE RATING INDICATOR & TRAILER CONTROLS SYSTEM
   ========================================================================== */

/* 1. Hero Netflix-Themed Age Rating Docked Pill */
.hero-age-rating-pill {
    position: absolute;
    bottom: 95px;
    right: 0;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px 7px 16px;
    background: rgba(35, 35, 35, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-right: none;
    border-left: 3.5px solid #dcdcdc;
    border-radius: 4px 0 0 4px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    animation: heroAgeSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: opacity 0.35s ease, transform 0.35s ease;
    user-select: none;
    pointer-events: none;
}

@keyframes heroAgeSlideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

.hero-age-badge {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.6px;
}

.hero-age-desc {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    padding-left: 10px;
    white-space: nowrap;
}

.hero-age-badge:empty+.hero-age-desc {
    border-left: none;
    padding-left: 0;
}

/* Metadata fallback age pill when trailer is playing */
.hero-meta-age-badge {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* 2. Hero Center Trailer Controls Pill (Image 3 Curved Enclosure) */
.hero-trailer-controls-pill {
    position: absolute;
    bottom: 46px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 16px;
    background: rgba(16, 16, 20, 0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(0, 0, 0, 0.4);
    animation: htcFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

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

.htc-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    outline: none;
}

.htc-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.08);
}

.htc-btn:active {
    transform: scale(0.95);
}

.htc-btn.active {
    background: #e50914 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(229, 9, 20, 0.65);
}

.htc-cc-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* 3. Autoplay Countdown Badge */
.hero-trailer-countdown {
    position: absolute;
    top: 28px;
    left: 48px;
    z-index: 4;
    padding: 7px 16px;
    border-radius: 30px;
    background: rgba(18, 18, 22, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(229, 9, 20, 0.85);
    box-shadow: 0 0 16px rgba(229, 9, 20, 0.45);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: countdownPulse 1.8s infinite;
}

@keyframes countdownPulse {

    0%,
    100% {
        box-shadow: 0 0 14px rgba(229, 9, 20, 0.4);
        border-color: rgba(229, 9, 20, 0.7);
    }

    50% {
        box-shadow: 0 0 24px rgba(229, 9, 20, 0.85);
        border-color: rgba(229, 9, 20, 1);
    }
}

/* 4. Coordinated Trailer Active State Transitions */
.hero-banner.trailer-active .hero-age-rating-pill {
    opacity: 0 !important;
    transform: translateX(40px) !important;
    pointer-events: none !important;
}

.hero-banner.trailer-active .hero-meta-age-badge {
    display: inline-flex !important;
    animation: heroAgeSlideIn 0.3s ease;
}

.hero-banner.trailer-active .hero-pagination-wrapper {
    opacity: 0 !important;
    transform: translateY(18px) !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-banner.trailer-active .hero-description {
    opacity: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease;
}

.hero-banner.trailer-active .network-badge,
.hero-banner.trailer-active #hero-network-badge {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

.hero-banner.trailer-active #hero-btn-anime,
.hero-banner.trailer-active #hero-btn-new-hot {
    opacity: 0 !important;
    transform: translateY(-12px) !important;
    pointer-events: none !important;
    transition: all 0.3s ease;
}

/* Animate away hero navigation buttons (prev / next) so they don't block trailer or fullscreen view */
.hero-banner.trailer-active .hero-nav-btn,
.hero-banner.trailer-active .hero-nav-prev,
.hero-banner.trailer-active .hero-nav-next,
.hero-banner.is-fullscreen .hero-nav-btn,
.hero-banner.is-fullscreen .hero-nav-prev,
.hero-banner.is-fullscreen .hero-nav-next,
.hero-banner:fullscreen .hero-nav-btn,
.hero-banner:fullscreen .hero-nav-prev,
.hero-banner:fullscreen .hero-nav-next {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.4s cubic-bezier(0.2, 0, 0, 1), transform 0.4s cubic-bezier(0.2, 0, 0, 1), visibility 0.4s ease;
}

.hero-banner.trailer-active .hero-nav-prev,
.hero-banner.is-fullscreen .hero-nav-prev,
.hero-banner:fullscreen .hero-nav-prev {
    transform: translateX(-35px) !important;
}

.hero-banner.trailer-active .hero-nav-next,
.hero-banner.is-fullscreen .hero-nav-next,
.hero-banner:fullscreen .hero-nav-next {
    transform: translateX(35px) !important;
}

/* Animate away dark gradient vignette overlays between logo area and trailer */
.hero-banner.trailer-active .hero-gradient,
.hero-banner.trailer-active .hero-overlay {
    opacity: 0.1 !important;
    transition: opacity 0.6s ease;
}

/* Shrink hero content section down to maximize trailer visibility without over-blurring */
.hero-banner.trailer-active .hero-content {
    transform: scale(0.82) translateY(16px);
    transform-origin: bottom left;
    opacity: 0.52 !important;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.4s cubic-bezier(0.2, 0, 0.1, 1), opacity 0.4s ease;
    pointer-events: auto;
}

.hero-banner.trailer-active .hero-title-logo,
.hero-banner.trailer-active #hero-title-text,
.hero-banner.trailer-active .hero-meta,
.hero-banner.trailer-active .hero-actions {
    opacity: 0.52 !important;
    transition: opacity 0.4s ease;
}

/* ONLY when cursor hovers specifically into that region (.hero-content), zoom back in and un-fade */
.hero-banner.trailer-active .hero-content:hover {
    transform: scale(0.98) translateY(0) !important;
    opacity: 1 !important;
}

.hero-banner.trailer-active .hero-content:hover .hero-title-logo,
.hero-banner.trailer-active .hero-content:hover #hero-title-text,
.hero-banner.trailer-active .hero-content:hover .hero-meta,
.hero-banner.trailer-active .hero-content:hover .hero-actions {
    opacity: 1 !important;
}

.hero-banner.trailer-active #hero-btn-more {
    background: rgba(229, 9, 20, 0.85) !important;
    color: #ffffff !important;
    border-color: rgba(229, 9, 20, 0.9) !important;
}

/* Fullscreen trailer mode handling */
.hero-banner:fullscreen,
.hero-banner:-webkit-full-screen,
.hero-banner.is-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* CC button is strictly hidden unless the trailer/player is in full screen */
#htc-captions {
    display: none !important;
}

.hero-banner:fullscreen #htc-captions,
.hero-banner:-webkit-full-screen #htc-captions,
.hero-banner.is-fullscreen #htc-captions,
:fullscreen #htc-captions,
:-webkit-full-screen #htc-captions {
    display: inline-flex !important;
}

/* Fullscreen video true 100% scaling (Never crop edges) */
:fullscreen video,
:-webkit-full-screen video,
.player-container.fullscreen video,
.live-tv-mini-player-container.fullscreen-active video {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

.hero-banner:fullscreen #hero-trailer-controls,
.hero-banner:-webkit-full-screen #hero-trailer-controls,
.hero-banner.is-fullscreen #hero-trailer-controls {
    position: absolute !important;
    bottom: 32px !important;
    right: 40px !important;
    left: auto !important;
    transform: none !important;
    z-index: 10000 !important;
}

/* Top-Right Trailer Live Time Remaining Badge */
.hero-trailer-time-remaining {
    position: absolute;
    top: 28px;
    right: 32px;
    z-index: 25;
    padding: 7px 16px;
    border-radius: 30px;
    background: rgba(18, 18, 22, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    display: none;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-banner.trailer-active .hero-trailer-time-remaining {
    display: inline-flex !important;
}

.modal-trailer-container .modal-trailer-time-remaining {
    display: inline-flex !important;
    top: 20px;
    right: 20px;
    z-index: 25;
}

.trailer-time-remaining-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e50914;
    box-shadow: 0 0 8px #e50914;
    animation: trailerPulseDot 1.5s infinite ease-in-out;
}

@keyframes trailerPulseDot {

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

    50% {
        opacity: 0.5;
        transform: scale(0.85);
    }
}

/* Sleek Trailer Progress / Seekbar at the dead bottom of the banner */
.hero-trailer-seekbar-container {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 4px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 0;
    cursor: pointer;
    z-index: 9999;
    transition: height 0.2s cubic-bezier(0.2, 0, 0, 1), background 0.2s ease;
    display: none;
    overflow: visible;
}

/* Invisible hit area expansion for effortless mouse/touch dragging without visual interference */
.hero-trailer-seekbar-container::before {
    content: '';
    position: absolute;
    top: -16px;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
}

.hero-banner.trailer-active .hero-trailer-seekbar-container {
    display: block !important;
}

.hero-trailer-seekbar-container:hover,
.hero-trailer-seekbar-container.is-scrubbing {
    height: 7px;
    background: rgba(255, 255, 255, 0.45);
}

.hero-trailer-seekbar-track {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 0;
    overflow: visible;
}

.hero-trailer-seekbar-fill {
    height: 100%;
    width: 0%;
    background: #e50914;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.95);
    border-radius: 0;
    position: relative;
    transition: width 0.1s linear;
}

.hero-trailer-seekbar-fill::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 4px rgba(229, 9, 20, 0.8);
    transition: transform 0.15s ease;
    pointer-events: none;
}

.hero-trailer-seekbar-container:hover .hero-trailer-seekbar-fill::after,
.hero-trailer-seekbar-container.is-scrubbing .hero-trailer-seekbar-fill::after {
    transform: translateY(-50%) scale(1);
}

/* Modal trailer seekbar docked inside modal-trailer-container */
.modal-trailer-seekbar-container {
    bottom: 12px !important;
    left: 24px !important;
    right: 24px !important;
    display: block !important;
}

.modal-trailer-container {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: #000000;
    overflow: hidden;
    animation: modalTrailerFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalTrailerFadeIn {
    from {
        opacity: 0;
        transform: scale(1.03);
    }

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

#modal-youtube-player,
.modal-trailer-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

.modal-trailer-seekbar-container {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 5px !important;
    z-index: 20 !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.15) !important;
    transition: height 0.2s ease !important;
}

.modal-trailer-seekbar-container:hover {
    height: 8px !important;
}

.modal-trailer-controls-pill {
    position: absolute;
    bottom: 22px;
    right: 28px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(18, 18, 22, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

.mtc-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    outline: none;
}

.mtc-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.08);
}

/* 6. Netflix 3-State Thumbs Feedback Component */
.netflix-rating-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 30px;
}

.netflix-rating-group .rating-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    outline: none;
}

.netflix-rating-group .rating-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.netflix-rating-group .rating-btn[data-rating="thumbs_down"].active {
    background: rgba(229, 9, 20, 0.3) !important;
    color: #ff4d5a !important;
    border: 1px solid rgba(229, 9, 20, 0.7) !important;
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.5) !important;
}

.netflix-rating-group .rating-btn[data-rating="thumbs_up"].active {
    background: rgba(76, 217, 100, 0.3) !important;
    color: #4cd964 !important;
    border: 1px solid rgba(76, 217, 100, 0.7) !important;
    box-shadow: 0 0 12px rgba(76, 217, 100, 0.5) !important;
}

.netflix-rating-group .rating-btn[data-rating="double_thumbs"].active {
    background: rgba(255, 215, 0, 0.3) !important;
    color: #ffd700 !important;
    border: 1px solid rgba(255, 215, 0, 0.7) !important;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.6) !important;
}

/* Card Deprioritized on Thumbs Down */
.movie-card.title-deprioritized,
.grid-item.title-deprioritized {
    opacity: 0.4 !important;
    filter: grayscale(60%) !important;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.movie-card.title-deprioritized:hover,
.grid-item.title-deprioritized:hover {
    opacity: 0.8 !important;
    filter: grayscale(20%) !important;
}

/* 7. Main Webapp Footer */
.webapp-main-footer {
    margin-top: 60px;
    padding: 50px 6% 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d0d10;
    color: #8c8c9a;
}

.webapp-footer-top {
    margin-bottom: 24px;
}

.webapp-footer-question {
    font-size: 14px;
    margin: 0;
    color: #999;
}

.webapp-footer-question a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.webapp-footer-question a:hover {
    text-decoration: underline;
}

.webapp-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 36px;
}

.webapp-footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.webapp-footer-col a {
    color: #8c8c9a;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.webapp-footer-col a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.webapp-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.webapp-footer-dmca-note {
    font-size: 12px;
    line-height: 1.6;
    color: #71717e;
    margin: 0;
}

.webapp-footer-copyright {
    font-size: 12px;
    color: #555562;
    margin: 0;
}

/* Ensure Live TV Pre-Buffer toggle is strictly hidden during standard VOD / Movie / Show playback */
#netflix-player-container:not(.live-tv-mode) #live-tv-buffer-toggle,
.netflix-player-container:not(.live-tv-mode) #live-tv-buffer-toggle {
    display: none !important;
}

/* =======================================================
   SEARCH AUTOCOMPLETE DROPDOWN
   ======================================================= */
.search-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: rgba(22, 22, 29, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75);
    z-index: 1000;
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
    padding: 6px;
}

.search-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

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

.search-autocomplete-thumb {
    width: 36px;
    height: 52px;
    border-radius: 4px;
    object-fit: cover;
    background: #111;
    flex-shrink: 0;
}

.search-autocomplete-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.search-autocomplete-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-autocomplete-meta {
    font-size: 12px;
    color: #8c8c9a;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
}

/* =======================================================
   REGIONAL QUICK FILTER CARDS
   ======================================================= */
.quick-filter-card {
    position: relative;
    min-width: 170px;
    height: 84px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
    background-size: cover;
    background-position: center;
}

.quick-filter-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.quick-filter-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.8) 100%);
    display: flex;
    align-items: flex-end;
    padding: 10px 14px;
}

.quick-filter-title {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* Adult Hero Banner Pagination */
.adult-hero-banner .hero-pagination-wrapper {
    position: absolute;
    bottom: 24px;
    right: 32px;
    z-index: 10;
}

.adult-hero-banner .hero-pagination-dash {
    background: rgba(255, 45, 85, 0.4);
}

.adult-hero-banner .hero-pagination-dash.active {
    background: #ff2d55;
    box-shadow: 0 0 10px rgba(255, 45, 85, 0.8);
    width: 32px;
}

/* Search Recommendation Chips */
.search-recommendation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
    padding: 0 4px;
    z-index: 20;
    position: relative;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #e5e5e5;
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.search-chip:hover,
.search-chip:focus {
    background: rgba(229, 9, 20, 0.25);
    border-color: #e50914;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.35);
}

.search-chip-icon {
    opacity: 0.7;
    font-size: 11px;
}

/* ==========================================================================
   PICK 3+ FAVORITE GENRES ANIMATED ONBOARDING MODAL
   ========================================================================== */

.onboarding-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000020;
    background: rgba(8, 8, 12, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: fadeInOverlay 0.28s ease-out forwards;
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }

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

.onboarding-modal-card {
    background: linear-gradient(170deg, #181824 0%, #111118 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    max-width: 580px;
    width: 92%;
    padding: 36px 32px 28px 32px;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: fadeInScale 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.onboarding-title {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

.onboarding-subtitle {
    font-size: 14px;
    color: #9ca3af;
    line-height: 1.5;
    margin: 0 auto 18px auto;
    max-width: 440px;
}

.onboarding-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
    padding: 4px 14px;
    border-radius: 9999px;
    margin: 0 auto 20px auto;
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
}

.onboarding-counter.ready {
    color: #34d399;
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(52, 211, 153, 0.4);
}

.onboarding-genres-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 24px;
    padding: 2px;
    overflow: visible;
}

.onboarding-genre-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    color: #d1d5db;
    font-size: 13px;
    font-weight: 600;
}

.onboarding-genre-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
    color: #ffffff;
}

.onboarding-genre-chip.selected {
    background: rgba(229, 9, 20, 0.16);
    border-color: #e50914;
    color: #ffffff;
    box-shadow: 0 0 18px rgba(229, 9, 20, 0.35), inset 0 0 8px rgba(229, 9, 20, 0.1);
    transform: translateY(-2px) scale(1.02);
}

.onboarding-genre-icon {
    font-size: 22px;
    line-height: 1;
}

.onboarding-btn-primary {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: #e50914;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 4px 18px rgba(229, 9, 20, 0.4);
}

.onboarding-btn-primary:hover:not(:disabled) {
    background: #f40612;
    box-shadow: 0 6px 24px rgba(229, 9, 20, 0.6);
    transform: translateY(-1px);
}

.onboarding-btn-primary:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: #6b7280;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.onboarding-btn-skip {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 14px;
    padding: 6px 16px;
    border-radius: 6px;
    transition: color 0.15s ease;
}

.onboarding-btn-skip:hover {
    color: #ffffff;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .onboarding-modal-card {
        padding: 24px 18px;
    }

    .onboarding-title {
        font-size: 22px;
    }

    .onboarding-genres-grid {
        grid-template-columns: repeat(2, 1fr);
        max-height: 240px;
    }
}

/* =======================================================
   VIEW ALL STICKY NAVIGATION & SHIMMER SKELETON
   ======================================================= */
.view-all-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 0 16px;
    margin-bottom: 8px;
}

.view-all-sticky-back {
    position: sticky;
    top: 20px;
    z-index: 100;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

@media (max-width: 768px) {
    .view-all-header {
        padding: 8px 0 12px;
        gap: 14px;
    }

    .view-all-sticky-back {
        top: 12px;
    }
}

.view-all-skeleton {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: 2 / 3 !important;
    background: linear-gradient(90deg, #181818 0%, #2a2a2a 50%, #181818 100%) !important;
    background-size: 200% 100% !important;
    animation: netflixShimmer 1.5s ease-in-out infinite !important;
}

@keyframes netflixShimmer {
    0% {
        background-position: 200% 0;
    }

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

.quick-filters-scroll {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
}

/* =======================================================
   HOME TOP 10 CAROUSEL VECTOR-STROKE RANK STYLES (Exact Netflix Layout as in Picture 2, Standard Row Height)
   ======================================================= */
.top10-carousel-card {
    position: relative;
    flex: 0 0 215px !important;
    width: 215px !important;
    height: 260px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    cursor: pointer;
    user-select: none;
    outline: none !important;
    border: none !important;
    overflow: visible !important;
    background: transparent !important;
    transform-origin: center center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.top10-carousel-card.top10-card-10 {
    flex: 0 0 235px !important;
    width: 235px !important;
}

.top10-carousel-card:hover {
    transform: scale(1.04);
    z-index: 25 !important;
}

.top10-carousel-card .carousel-poster-wrap {
    position: relative;
    width: 170px !important;
    height: 252px !important;
    margin-left: auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background-color: #202020 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 2 !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.top10-carousel-card:hover .carousel-poster-wrap {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

.top10-carousel-card .carousel-poster {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.top10-carousel-card .landing-top10-svg-rank {
    position: absolute !important;
    left: -10px !important;
    bottom: -2px !important;
    width: 95px !important;
    height: 165px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.8)) !important;
    transition: all 0.3s ease !important;
}

.top10-carousel-card.top10-card-10 .landing-top10-svg-rank {
    width: 140px !important;
    left: -15px !important;
}

.top10-carousel-card .landing-rank-text {
    fill: #141414 !important;
    stroke: #595959 !important;
    stroke-width: 5px !important;
    paint-order: stroke fill;
    font-family: 'Impact', 'Arial Black', 'Bebas Neue', sans-serif;
    font-size: 135px !important;
    font-weight: 900;
    letter-spacing: -8px;
    transition: stroke 0.3s ease, fill 0.3s ease, filter 0.3s ease !important;
}

.top10-carousel-card.top10-card-10 .landing-rank-text {
    font-size: 115px !important;
    letter-spacing: -10px;
}

.top10-carousel-card:hover .landing-rank-text {
    stroke: #ffffff !important;
    fill: #141414 !important;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.5)) !important;
}

@media (max-width: 768px) {
    .top10-carousel-card {
        position: relative !important;
        flex: 0 0 155px !important;
        width: 155px !important;
        height: 195px !important;
        margin: 0 4px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .top10-carousel-card.top10-card-10 {
        flex: 0 0 170px !important;
        width: 170px !important;
    }

    .top10-carousel-card .carousel-poster-wrap {
        position: relative !important;
        width: 125px !important;
        height: 188px !important;
        margin-left: auto !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        z-index: 2 !important;
    }

    .top10-carousel-card .landing-top10-svg-rank {
        position: absolute !important;
        left: -8px !important;
        bottom: -2px !important;
        width: 70px !important;
        height: 120px !important;
        z-index: 1 !important;
        pointer-events: none !important;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8)) !important;
    }

    .top10-carousel-card.top10-card-10 .landing-top10-svg-rank {
        width: 100px !important;
        left: -12px !important;
    }

    .top10-carousel-card .landing-rank-text {
        fill: #141414 !important;
        stroke: #595959 !important;
        stroke-width: 4px !important;
        paint-order: stroke fill;
        font-family: 'Impact', 'Arial Black', 'Bebas Neue', sans-serif;
        font-size: 90px !important;
        font-weight: 900;
        letter-spacing: -6px;
    }

    .top10-carousel-card.top10-card-10 .landing-rank-text {
        font-size: 78px !important;
        letter-spacing: -8px;
    }
}


/* Rounded Pill Hero Play Button */
#hero-btn-play,
.btn-hero.btn-play {
    border-radius: 50px !important;
    padding: 12px 28px !important;
}

/* Manga Carousel Card Bottom Title (Middle Aligned) */
.manga-card-bottom-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 8px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    text-align: center;
    z-index: 2;
    pointer-events: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.manga-title-text {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    display: block;
    width: 100%;
}

.manga-fallback-card {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    box-sizing: border-box;
}

.manga-fallback-initials {
    font-size: 32px;
    font-weight: 800;
    color: #c7d2fe;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.manga-fallback-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Netflix-style Personalized Evidence Badges & Causal Subtitles */
.carousel-causal-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: #a3a3a3;
    padding-left: 28px;
    margin: -4px 0 12px 0;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

.carousel-poster-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.card-match-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(20, 20, 20, 0.88);
    color: #46d369;
    /* Netflix iconic match green */
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 4;
    pointer-events: none;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(70, 211, 105, 0.3);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.carousel-card-container:hover .card-match-badge,
.carousel-card-container.focused .card-match-badge {
    opacity: 1;
    transform: translateY(0);
}

/* Netflix Offline Cache Layer & Download Intelligence */
.offline-home-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(30, 30, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 12px 18px;
    margin: 18px 28px 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #e5e5e5;
    font-size: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.3s ease;
}

.offline-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.offline-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e50914;
    box-shadow: 0 0 8px #e50914;
    display: inline-block;
}

.badge-downloads-for-you {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #0071eb, #00d2ff);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 10px;
    vertical-align: middle;
}

.carousel-download-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #00d2ff;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .offline-home-banner {
        margin: 12px 15px 18px;
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* Netflix "More Like This" Recommendations Grid */
.more-like-this-section {
    position: relative;
    box-sizing: border-box;
}

.more-like-this-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    box-sizing: border-box;
}

.more-like-this-card {
    background: #202020;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.more-like-this-card:hover {
    transform: translateY(-4px);
    background: #282828;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.more-like-this-card:focus-visible {
    outline: 2.5px solid #e50914;
    outline-offset: 2px;
}

.more-like-this-poster-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #151515;
    overflow: hidden;
}

.more-like-this-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.more-like-this-card:hover .more-like-this-poster {
    transform: scale(1.04);
}

.more-like-this-duration-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.more-like-this-info {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.more-like-this-top-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.more-like-this-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.more-like-this-match {
    color: #46d369;
    font-weight: 700;
    font-size: 13px;
}

.more-like-this-year {
    color: #aaa;
    font-size: 12px;
}

.more-like-this-mat {
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ccc;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 2px;
    text-transform: uppercase;
}

.more-like-this-quick-add {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    background: rgba(30, 30, 30, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.more-like-this-quick-add:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.more-like-this-title-text {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.more-like-this-synopsis {
    font-size: 12.5px;
    color: #999;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .more-like-this-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .more-like-this-section {
        padding: 0 16px !important;
        margin-top: 24px !important;
    }

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

    .more-like-this-synopsis {
        -webkit-line-clamp: 2;
        font-size: 11.5px;
    }
}

/* More Like This Loading Skeleton */
.more-like-this-skeleton-card {
    background: #181818;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.more-like-this-skeleton-poster {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(90deg, #222 25%, #2a2a2a 50%, #222 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 2s ease-in-out infinite;
}

.more-like-this-skeleton-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.more-like-this-skeleton-bar {
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, #252525 25%, #303030 50%, #252525 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 2s ease-in-out infinite;
}

.more-like-this-skeleton-bar.w-40 {
    width: 40%;
}

.more-like-this-skeleton-bar.w-60 {
    width: 60%;
}

.more-like-this-skeleton-bar.w-80 {
    width: 80%;
}

.more-like-this-skeleton-bar.w-full {
    width: 100%;
}

/* =======================================================
   ANDROID EXCLUSIVE: DOCKED DETAIL SCREEN PLAYER & MINI-PLAYER
   ======================================================= */

/* 1. Docked Player Container at Top of Detail Screen */
.netflix-player-container.android-docked {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--player-ar, 16 / 9) !important;
    max-height: 48vh !important;
    z-index: 10002 !important;
    background: #000 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75) !important;
    overflow: hidden !important;
    will-change: transform, opacity !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
    touch-action: none !important;
}

.netflix-player-container.android-docked.is-swiping {
    transition: none !important;
}

/* Detail modal layout when player is docked */
#detail-modal.has-docked-player {
    display: block !important;
    z-index: 10001 !important;
}

#detail-modal.has-docked-player .netflix-details-modal {
    padding-top: 0 !important;
}

#detail-modal.has-docked-player #modal-banner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--player-ar, 16 / 9) !important;
    max-height: 48vh !important;
    min-height: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    pointer-events: none !important;
}

#detail-modal.has-docked-player #modal-banner>* {
    display: none !important;
}

#detail-modal.has-docked-player #modal-close {
    background: rgba(15, 15, 19, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10006 !important;
    color: #fff !important;
}

/* 2. Docked Player Controls Layout */
/* Controls visibility: fade out when idle */
.netflix-player-container.android-docked.idle .player-controls {
    opacity: 0 !important;
    pointer-events: none !important;
}

.netflix-player-container.android-docked:not(.idle) .player-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Docked Top Bar: Left down-arrow, Right Cast, CC, Settings */
.netflix-player-container.android-docked .player-top-bar {
    top: 6px !important;
    left: 8px !important;
    right: 8px !important;
    width: calc(100% - 16px) !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
}

.netflix-player-container.android-docked #player-back-btn,
.netflix-player-container.android-docked #player-top-info,
.netflix-player-container.android-docked #player-top-pills-container,
.netflix-player-container.android-docked #btn-three-dot {
    display: none !important;
}

.netflix-player-container.android-docked #btn-player-miniplayer {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
}

.netflix-player-container.android-docked #player-docked-top-right {
    display: flex !important;
    gap: 6px !important;
}

.netflix-player-container.android-docked #player-docked-top-right .coco-top-btn {
    width: 36px !important;
    height: 36px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Docked Center Controls: Prominent Play/Pause */
.netflix-player-container.android-docked .player-center-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.netflix-player-container.android-docked #center-rw-btn,
.netflix-player-container.android-docked #center-ff-btn,
.netflix-player-container.android-docked #live-tv-buffer-toggle {
    display: none !important;
}

.netflix-player-container.android-docked #center-play-btn {
    width: 52px !important;
    height: 52px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
}

/* Docked Bottom Bar: Scrubber at bottom edge, time on left, expand on right */
.netflix-player-container.android-docked .coco-bottom-area {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%) !important;
}

.netflix-player-container.android-docked .coco-scrubber-area {
    margin: 0 !important;
    padding: 0 !important;
    height: 4px !important;
}

.netflix-player-container.android-docked .player-progress-container {
    height: 4px !important;
    border-radius: 0 !important;
}

.netflix-player-container.android-docked .coco-buttons-row {
    padding: 2px 8px 6px 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.netflix-player-container.android-docked #btn-play-pause,
.netflix-player-container.android-docked .volume-container,
.netflix-player-container.android-docked #btn-episodes,
.netflix-player-container.android-docked #btn-next-ep,
.netflix-player-container.android-docked #btn-watch-party-toggle,
.netflix-player-container.android-docked #btn-subtitles,
.netflix-player-container.android-docked .gear-btn-wrapper,
.netflix-player-container.android-docked #btn-pin-moment,
.netflix-player-container.android-docked #btn-export-segment,
.netflix-player-container.android-docked #btn-go-live {
    display: none !important;
}

.netflix-player-container.android-docked .coco-yt-time-badge {
    display: inline-flex !important;
    font-size: 11.5px !important;
}

.netflix-player-container.android-docked #btn-fullscreen {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide non-docked overlays */
.netflix-player-container.android-docked #coco-info-overlay,
.netflix-player-container.android-docked #next-ep-countdown-card,
.netflix-player-container.android-docked #btn-skip-intro,
.netflix-player-container.android-docked #btn-skip-outro,
.netflix-player-container.android-docked #player-maturity-badge {
    display: none !important;
}

/* 3. Android Clean Mini-Player */
body.is-native-app .inapp-pip-miniplayer #yt-mini-play-top-left,
.is-native-app #inapp-pip-miniplayer #yt-mini-play-top-left {
    display: flex !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(12, 12, 16, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

body.is-native-app .inapp-pip-miniplayer .yt-mini-close-btn,
.is-native-app #inapp-pip-miniplayer .yt-mini-close-btn {
    display: flex !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(12, 12, 16, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

body.is-native-app .inapp-pip-miniplayer .yt-mini-top-action-btn:nth-child(2),
.is-native-app #inapp-pip-miniplayer .yt-mini-top-action-btn:nth-child(2),
body.is-native-app .inapp-pip-miniplayer .yt-mini-seek-cluster,
.is-native-app #inapp-pip-miniplayer .yt-mini-seek-cluster,
body.is-native-app .inapp-pip-miniplayer #yt-mini-center-play,
.is-native-app #inapp-pip-miniplayer #yt-mini-center-play,
body.is-native-app .inapp-pip-miniplayer .yt-mini-expand-icon-btn,
.is-native-app #inapp-pip-miniplayer .yt-mini-expand-icon-btn,
body.is-native-app .inapp-pip-miniplayer .yt-mini-subtitle,
.is-native-app #inapp-pip-miniplayer .yt-mini-subtitle {
    display: none !important;
}

body.is-native-app .inapp-pip-miniplayer .yt-mini-info-bar,
.is-native-app #inapp-pip-miniplayer .yt-mini-info-bar {
    padding: 7px 12px !important;
    background: #0f0f13 !important;
}

body.is-native-app .inapp-pip-miniplayer .yt-mini-title,
.is-native-app #inapp-pip-miniplayer .yt-mini-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #fff !important;
}