/* Auto-extracted from the current MAUI/Blazor visual source of truth. */

/* ===== Components/Layout/MainLayout.razor.css ===== */
.main-layout-shell {
    min-height: 100vh;
    background: #000000;
    color: #ffffff;
    overflow-x: hidden;
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.sg-route-frame {
    position: relative;
    min-height: 100vh;
    background: #000000;
    transform: none !important;
    will-change: opacity;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    contain: none !important;
}

.sg-route-surface {
    min-height: 100vh;
    background: #000000;
}

.sg-route-enter-initial,
.sg-route-enter-home {
    animation: sgRouteInitialIn 300ms cubic-bezier(.2, .85, .22, 1) both;
}

.sg-route-switch-tab {
    animation: sgRouteTabIn 260ms cubic-bezier(.18, .84, .28, 1) both;
}

.sg-route-enter-detail {
    animation: sgRouteDetailIn 300ms cubic-bezier(.16, .86, .25, 1) both;
}

.sg-route-return-from-detail {
    animation: sgRouteReturnIn 250ms cubic-bezier(.2, .8, .2, 1) both;
}

.sg-route-enter-forward {
    animation: sgRouteForwardIn 260ms cubic-bezier(.18, .82, .22, 1) both;
}

.sg-route-enter-back {
    animation: sgRouteBackIn 240ms cubic-bezier(.2, .76, .28, 1) both;
}

.sg-route-enter-soft {
    animation: sgRouteSoftIn 220ms cubic-bezier(.2, .76, .28, 1) both;
}

@keyframes sgRouteInitialIn {
    from { opacity: .001; transform: none; }
    to { opacity: 1; transform: none; }
}

@keyframes sgRouteTabIn {
    from { opacity: .001; transform: none; }
    to { opacity: 1; transform: none; }
}

@keyframes sgRouteDetailIn {
    from { opacity: .001; transform: none; }
    to { opacity: 1; transform: none; }
}

@keyframes sgRouteReturnIn {
    from { opacity: .001; transform: none; }
    to { opacity: 1; transform: none; }
}

@keyframes sgRouteForwardIn {
    from { opacity: .001; transform: none; }
    to { opacity: 1; transform: none; }
}

@keyframes sgRouteBackIn {
    from { opacity: .001; transform: none; }
    to { opacity: 1; transform: none; }
}

@keyframes sgRouteSoftIn {
    from { opacity: .001; transform: none; }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .sg-route-frame :is(.media-card, .poster-card, .catalog-card, .rail-card, .home-rail-card, .channel-card, .match-card, .oscar-card) {
        animation: sgContentItemIn 220ms cubic-bezier(.18, .78, .24, 1) both;
        will-change: opacity;
        backface-visibility: visible;
    }

    .sg-route-frame :is(.media-card, .poster-card, .catalog-card, .rail-card, .home-rail-card, .channel-card, .match-card, .oscar-card):nth-child(2) { animation-delay: 16ms; }
    .sg-route-frame :is(.media-card, .poster-card, .catalog-card, .rail-card, .home-rail-card, .channel-card, .match-card, .oscar-card):nth-child(3) { animation-delay: 30ms; }
    .sg-route-frame :is(.media-card, .poster-card, .catalog-card, .rail-card, .home-rail-card, .channel-card, .match-card, .oscar-card):nth-child(4) { animation-delay: 44ms; }
    .sg-route-frame :is(.media-card, .poster-card, .catalog-card, .rail-card, .home-rail-card, .channel-card, .match-card, .oscar-card):nth-child(n+5) { animation-delay: 56ms; }

    .sg-route-frame :is(.details-hero, .details-poster, .hero-section, .home-hero, .catalog-hero, .target-home-hero-shell) {
        animation: sgHeroIn 340ms cubic-bezier(.15, .82, .22, 1) both;
    }
}

@keyframes sgContentItemIn {
    from { opacity: .001; transform: none; }
    to { opacity: 1; transform: none; }
}

@keyframes sgHeroIn {
    from { opacity: .001; transform: none; }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-route-frame,
    .sg-route-frame * {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}


/* Final scroll-safe layer: route containers must never become the scroll root or a transformed containing block. */
.main-layout-shell,
.sg-route-frame,
.sg-route-surface {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    transform: none !important;
    contain: none !important;
    pointer-events: auto !important;
}


/* SG FINAL: layout-level bottom navigation lives outside the route scroll surface. */
.sg-layout-bottom-nav {
    position: fixed !important;
    z-index: 2147483000 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    height: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
    pointer-events: none !important;
    transform: none !important;
    contain: none !important;
    isolation: isolate !important;
}

.sg-layout-bottom-nav > nav.oscar-bottom-nav.original-bottom-nav {
    position: fixed !important;
    z-index: 2147483000 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
    translate: none !important;
    contain: layout paint style !important;
}

/* Hide old per-page copies. They remain in code for safety, but cannot scroll with content anymore. */
.sg-route-frame nav.oscar-bottom-nav.original-bottom-nav,
.sg-route-surface nav.oscar-bottom-nav.original-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Viewport-fixed headers must not inherit an animated containing block. */
.sg-route-frame,
.sg-route-enter-initial,
.sg-route-enter-home,
.sg-route-switch-tab,
.sg-route-enter-detail,
.sg-route-return-from-detail,
.sg-route-enter-forward,
.sg-route-enter-back,
.sg-route-enter-soft {
    animation: none !important;
    transform: none !important;
    translate: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
}

.main-layout-shell,
.sg-route-surface {
    transform: none !important;
    translate: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
}

/* Keep the full bottom menu visible on Windows and Android. */
.sg-layout-bottom-nav {
    display: block !important;
    visibility: visible !important;
}

/* Nova Aperture route motion: opacity-only reveal keeps every fixed header and bottom bar stable. */
.sg-route-frame.sg-route-enter-initial,
.sg-route-frame.sg-route-enter-home,
.sg-route-frame.sg-route-switch-tab,
.sg-route-frame.sg-route-enter-detail,
.sg-route-frame.sg-route-return-from-detail,
.sg-route-frame.sg-route-enter-forward,
.sg-route-frame.sg-route-enter-back,
.sg-route-frame.sg-route-enter-soft {
    animation: sgNovaRouteReveal 160ms cubic-bezier(.18, .82, .22, 1) both !important;
    transform: none !important;
    filter: none !important;
}

.sg-route-frame.sg-route-enter-detail {
    animation-name: sgNovaDetailReveal !important;
}

.sg-route-frame.sg-route-return-from-detail {
    animation-name: sgNovaReturnReveal !important;
}

@keyframes sgNovaRouteReveal {
    from { opacity: .88; }
    to { opacity: 1; }
}

@keyframes sgNovaDetailReveal {
    0% { opacity: .82; }
    45% { opacity: .94; }
    100% { opacity: 1; }
}

@keyframes sgNovaReturnReveal {
    from { opacity: .9; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-route-frame.sg-route-enter-initial,
    .sg-route-frame.sg-route-enter-home,
    .sg-route-frame.sg-route-switch-tab,
    .sg-route-frame.sg-route-enter-detail,
    .sg-route-frame.sg-route-return-from-detail,
    .sg-route-frame.sg-route-enter-forward,
    .sg-route-frame.sg-route-enter-back,
    .sg-route-frame.sg-route-enter-soft {
        animation: none !important;
    }
}


/* Player focus mode: the app navigation must never overlay video on Windows or mobile. */
html.sg-player-open .sg-layout-bottom-nav,
body.sg-player-open .sg-layout-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
}


/* ===== Components/Shared/AppHeader.razor.css ===== */
header.oscar-toolbar {
    background: rgba(0, 0, 0, .78);
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

header.oscar-toolbar.home-toolbar {
    background: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.46) 62%, transparent 100%);
}

header.oscar-toolbar.professional-home-toolbar {
    min-height: calc(70px + var(--safe-top, 0px));
    padding-top: var(--safe-top, 0px);
    padding-inline: clamp(14px, 3.5vw, 22px);
    border: 0;
    box-shadow: none;
    overflow: visible;
    pointer-events: none;
}

.professional-home-toolbar .home-toolbar-shell {
    width: 100%;
    min-height: 70px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    direction: ltr;
    pointer-events: none;
}

.professional-home-toolbar .home-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: clamp(10px, 2.2vw, 16px);
    pointer-events: auto;
}

.professional-home-toolbar .home-toolbar-leading {
    justify-self: start;
}

.professional-home-toolbar .home-toolbar-trailing {
    justify-self: end;
}

.professional-home-toolbar .home-toolbar-center {
    min-width: 0;
    min-height: 1px;
    pointer-events: none;
}

.professional-home-toolbar .home-toolbar-glow {
    display: none;
}

/* أيقونات الرأس فقط: بدون خلفية، بدون إطار، بدون حاويات */
.professional-home-toolbar .icon-button.home-header-action,
.professional-home-toolbar .icon-button.home-menu-button {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: #ffffff;
    box-shadow: none !important;
    outline: none;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.professional-home-toolbar .icon-button.home-header-action::before,
.professional-home-toolbar .icon-button.home-header-action::after,
.professional-home-toolbar .icon-button.home-menu-button::before,
.professional-home-toolbar .icon-button.home-menu-button::after {
    display: none !important;
    content: none !important;
}

.professional-home-toolbar .icon-button.home-header-action:active,
.professional-home-toolbar .icon-button.home-menu-button:active {
    background: transparent !important;
    transform: scale(.92);
}

.professional-home-toolbar .icon-button.home-header-action svg,
.professional-home-toolbar .icon-button.home-menu-button svg,
.professional-home-toolbar .icon-button.home-header-action .oscar-icon,
.professional-home-toolbar .icon-button.home-menu-button .oscar-icon {
    color: #ffffff;
    filter: drop-shadow(0 2px 9px rgba(0,0,0,.76));
}

.professional-home-toolbar .icon-button.notification i {
    position: absolute;
    top: 4px;
    right: 2px;
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 52%, #14D7FF 100%);
    box-shadow: 0 0 0 3px rgba(155,77,255,.16);
}

@media (max-width: 600px) {
    header.oscar-toolbar.professional-home-toolbar {
        min-height: calc(58px + var(--safe-top, 0px));
        padding-inline: 18px;
    }

    .professional-home-toolbar .home-toolbar-shell {
        min-height: 58px;
        gap: 8px;
    }

    .professional-home-toolbar .home-toolbar-actions {
        gap: 16px;
    }

    .professional-home-toolbar .icon-button.home-header-action,
    .professional-home-toolbar .icon-button.home-menu-button {
        width: 34px;
        height: 34px;
    }
}


/* Full Space Gate NOVA+ wordmark: production sizing tuned for a compact app header.
   The original 1600:620 logo ratio is preserved so it never appears stretched. */
.professional-home-toolbar .icon-button.home-menu-button {
    width: clamp(126px, 10.5vw, 148px) !important;
    height: 52px !important;
    padding: 3px 0 !important;
    overflow: visible;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}

.professional-home-toolbar .home-menu-button .nova-menu-logo {
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 620;
    display: block;
    object-fit: contain;
    object-position: center right;
    border-radius: 0;
    opacity: .98;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.55));
    transform-origin: right center;
    transition: transform .18s cubic-bezier(.22,1,.36,1), opacity .18s ease, filter .18s ease;
}

.professional-home-toolbar .home-menu-button:active .nova-menu-logo {
    transform: scale(.965);
    opacity: .92;
    filter: drop-shadow(0 2px 7px rgba(0,0,0,.68));
}

@media (max-width: 820px) {
    .professional-home-toolbar .icon-button.home-menu-button {
        width: 118px !important;
        height: 48px !important;
        padding-block: 3px !important;
    }
}

@media (max-width: 600px) {
    .professional-home-toolbar .icon-button.home-menu-button {
        width: 108px !important;
        height: 44px !important;
        padding-block: 2px !important;
    }
}

@media (max-width: 380px) {
    .professional-home-toolbar .icon-button.home-menu-button {
        width: 98px !important;
        height: 40px !important;
    }
}



/* ===== Components/Shared/BottomNavigation.razor.css ===== */
nav.oscar-bottom-nav.original-bottom-nav {
    --nav-active-grad-a: #9B4DFF;
    --nav-active-grad-b: #7B5CFF;
    --nav-active-grad-c: #14D7FF;
    --nav-inactive-soft: #8A8A92;
    --nav-active-gradient: linear-gradient(105deg, var(--nav-active-grad-a) 0%, var(--nav-active-grad-b) 48%, var(--nav-active-grad-c) 100%);
    position: fixed;
    z-index: 170;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding: 7px max(3px, var(--safe-right, 0px)) var(--safe-bottom) max(3px, var(--safe-left, 0px));
    display: flex;
    align-items: stretch;
    direction: rtl;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(5,5,6,.97) !important;
    border-top: 1px solid rgba(255,255,255,.025) !important;
    box-shadow: 0 -10px 24px rgba(0,0,0,.5) !important;
    scrollbar-width: none;
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    pointer-events: auto !important;
}

nav.oscar-bottom-nav.original-bottom-nav::-webkit-scrollbar { display: none; }

nav.oscar-bottom-nav.original-bottom-nav :is(button, a) {
    position: relative;
    z-index: 1;
    flex: 1 0 74px;
    min-width: 74px;
    padding: 3px 3px 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent !important;
    background-image: none !important;
    color: var(--nav-inactive-soft) !important;
    box-shadow: none !important;
    outline: none;
    transform: none !important;
    transition: background .18s ease, color .18s ease;
    pointer-events: auto !important;
    text-decoration: none !important;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

nav.oscar-bottom-nav.original-bottom-nav .nav-icon {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    color: currentColor;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    isolation: isolate !important;
    overflow: visible !important;
    transition: transform .15s ease;
}

nav.oscar-bottom-nav.original-bottom-nav .nav-icon-solid,
nav.oscar-bottom-nav.original-bottom-nav .nav-icon-gradient-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

nav.oscar-bottom-nav.original-bottom-nav .nav-icon-solid {
    opacity: 1 !important;
    color: var(--nav-inactive-soft) !important;
}

nav.oscar-bottom-nav.original-bottom-nav .nav-icon-gradient-layer {
    opacity: 0 !important;
    filter: none !important;
}

nav.oscar-bottom-nav.original-bottom-nav .oscar-icon {
    color: inherit;
    width: 26px;
    height: 26px;
}

nav.oscar-bottom-nav.original-bottom-nav b {
    display: block;
    color: currentColor;
    font-size: .68rem;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active:hover,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active:focus,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active:focus-visible {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    filter: none !important;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-solid { opacity: 0 !important; }
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-layer { opacity: 1 !important; }

nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-start {
    color: var(--nav-active-grad-a) !important;
    clip-path: polygon(0 0, 43% 0, 34% 100%, 0 100%) !important;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-mid {
    color: var(--nav-active-grad-b) !important;
    clip-path: polygon(30% 0, 74% 0, 62% 100%, 23% 100%) !important;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-end {
    color: var(--nav-active-grad-c) !important;
    clip-path: polygon(58% 0, 100% 0, 100% 100%, 50% 100%) !important;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-layer svg,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-layer .oscar-icon {
    color: inherit !important;
    opacity: 1 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active svg * { vector-effect: non-scaling-stroke; }

nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active b,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-label-text {
    background: var(--nav-active-gradient) !important;
    background-image: var(--nav-active-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--nav-active-grad-a) !important;
    text-shadow: none !important;
    filter: none !important;
    font-weight: 800 !important;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) .nav-icon-gradient-layer { opacity: 0 !important; }
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) .nav-icon-solid { opacity: 1 !important; }
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) b,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) .nav-label-text {
    -webkit-text-fill-color: currentColor !important;
    background: transparent !important;
    background-image: none !important;
    filter: none !important;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a)::before,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a)::after,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a) .nav-icon::before,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a) .nav-icon::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

@media (min-width: 600px) {
    nav.oscar-bottom-nav.original-bottom-nav {
        max-width: none;
        margin-inline: 0;
    }
}

@media (max-width: 600px) {
    nav.oscar-bottom-nav.original-bottom-nav {
        padding: 4px 2px var(--safe-bottom);
        box-shadow: 0 -5px 15px rgba(0,0,0,.42) !important;
    }

    nav.oscar-bottom-nav.original-bottom-nav :is(button, a) {
        flex-basis: 58px;
        min-width: 58px;
        gap: 2px;
    }

    nav.oscar-bottom-nav.original-bottom-nav .nav-icon {
        height: 22px !important;
        width: 22px !important;
    }

    nav.oscar-bottom-nav.original-bottom-nav .oscar-icon {
        width: 20px;
        height: 20px;
    }

    nav.oscar-bottom-nav.original-bottom-nav b { font-size: .52rem; }
}

/* Final lock: keep bottom menu outside page scroll visually. */
nav.oscar-bottom-nav.original-bottom-nav {
    position: fixed !important;
    z-index: 2147483000 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    transform: translate3d(0,0,0) !important;
    will-change: transform !important;
}


/* SG FINAL FIX: the nav is portaled to <body>, so it cannot scroll with page content. */
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked,
nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal,
nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked {
    position: fixed !important;
    z-index: 2147483000 !important;
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
    will-change: auto !important;
    contain: layout paint style !important;
    pointer-events: auto !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal a,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked a {
    transform: none !important;
}

html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal a:active,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked a:active {
    opacity: .72 !important;
    transform: none !important;
}

/* The same complete menu remains visible on Windows and Android. */
nav.oscar-bottom-nav.original-bottom-nav,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* ===== Components/Shared/NovaMotionLoader.razor.css ===== */
.nova-web-page {
    display: block;
    width: 100%;
}

.nova-motion-loader {
    --nova-motion-size: clamp(82px, 10vw, 118px);
    --nova-motion-gap: 17px;
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 260px;
    padding: 34px 20px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--nova-motion-gap);
    overflow: hidden;
    color: #fff;
    background: #000;
    box-sizing: border-box;
}

.nova-motion-loader::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(62vw, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(72, 106, 255, .12), rgba(138, 67, 255, .055) 34%, transparent 70%);
    filter: blur(30px);
    opacity: .72;
    animation: novaMotionAmbient 6.8s ease-in-out infinite;
    pointer-events: none;
}

.nova-motion-loader__stage {
    position: relative;
    width: var(--nova-motion-size);
    height: var(--nova-motion-size);
    display: grid;
    place-items: center;
}

.nova-motion-loader__mark {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 18px 36px rgba(53, 104, 255, .18));
}

.nova-motion-loader__horizon {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 50%;
    width: clamp(140px, 27vw, 330px);
    height: 1px;
    transform: translate(50%, -50%) scaleX(.08);
    transform-origin: center;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #26DFFF 25%, #6877FF 52%, #D34DDF 77%, transparent);
    box-shadow: 0 0 14px rgba(78, 130, 255, .58);
    opacity: 0;
    animation: novaMotionHorizon 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.nova-motion-loader__flare {
    position: absolute;
    z-index: 2;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 14px 4px rgba(65, 200, 255, .45);
    opacity: .5;
}

.flare-a {
    top: 14%;
    left: 6%;
    animation: novaMotionFlare 3.4s ease-in-out infinite;
}

.flare-b {
    right: 1%;
    bottom: 18%;
    width: 3px;
    height: 3px;
    animation: novaMotionFlare 3.4s ease-in-out -1.7s infinite;
}

.nova-motion-aura {
    transform-origin: 60px 60px;
    animation: novaMotionAura 5.8s ease-in-out infinite;
}

.nova-motion-orbit,
.nova-motion-scan,
.nova-motion-aperture,
.nova-motion-monogram,
.nova-motion-glint,
.nova-motion-pulse {
    transform-origin: 60px 60px;
}

.nova-motion-orbit--outer {
    animation: novaMotionClockwise 8.8s linear infinite;
}

.nova-motion-orbit--inner {
    animation: novaMotionCounter 13.6s linear infinite;
}

.nova-motion-comet {
    transform-origin: center;
    animation: novaMotionComet 2.7s ease-in-out infinite;
}

.nova-motion-scan {
    animation: novaMotionScan 3.9s cubic-bezier(.52, .04, .36, 1) infinite;
}

.nova-motion-aperture {
    animation: novaMotionAperture 3.1s cubic-bezier(.42, 0, .2, 1) infinite;
}

.nova-motion-blade {
    transform-origin: 60px 60px;
}

.blade-a,
.blade-c { animation: novaMotionBladeA 3.1s cubic-bezier(.42, 0, .2, 1) infinite; }
.blade-b,
.blade-d { animation: novaMotionBladeB 3.1s cubic-bezier(.42, 0, .2, 1) infinite; }

.nova-motion-pulse {
    animation: novaMotionPulse 4.6s ease-out infinite;
}

.pulse-two { animation-delay: -2.3s; }

.nova-motion-monogram {
    animation: novaMotionMonogram 4.8s ease-in-out infinite;
}

.nova-motion-glint {
    animation: novaMotionGlint 2.9s ease-in-out infinite;
}

.nova-motion-loader__copy {
    min-width: 0;
    display: grid;
    gap: 6px;
    text-align: center;
}

.nova-motion-loader__copy strong {
    color: #fff;
    font-size: clamp(.9rem, 2vw, 1.06rem);
    line-height: 1.35;
    font-weight: 950;
    letter-spacing: -.015em;
}

.nova-motion-loader__copy span {
    color: rgba(255, 255, 255, .57);
    font-size: clamp(.68rem, 1.5vw, .8rem);
    line-height: 1.55;
    font-weight: 650;
}

.nova-motion-loader.is-page {
    min-height: calc(100dvh - var(--bottom-nav-h, 76px) - var(--safe-bottom, 0px));
}

.nova-motion-loader.is-compact {
    --nova-motion-size: 58px;
    --nova-motion-gap: 10px;
    min-height: 92px;
    padding: 12px 14px;
    grid-auto-flow: column;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: center;
}

.nova-motion-loader.is-compact::before {
    width: 190px;
    opacity: .46;
}

.nova-motion-loader.is-compact .nova-motion-loader__copy {
    text-align: right;
}

.nova-motion-loader.is-details {
    min-height: calc(100dvh - var(--bottom-nav-h, 76px) - var(--safe-bottom, 0px));
    padding-top: max(40px, var(--safe-top, 0px));
    padding-bottom: calc(32px + var(--bottom-nav-h, 76px));
}

.nova-motion-loader.is-details::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 14%;
    width: min(78vw, 680px);
    height: 1px;
    transform: translateX(50%);
    background: linear-gradient(90deg, transparent, rgba(40, 223, 255, .22), rgba(139, 82, 255, .28), transparent);
    opacity: .55;
}

.nova-motion-loader.is-transition {
    --nova-motion-size: 66px;
    position: fixed;
    z-index: 2147482500;
    inset: 0;
    min-height: 100dvh;
    padding: 0;
    background: rgba(0, 0, 0, .82);
    pointer-events: none;
    animation: novaMotionTransitionLayer .48s cubic-bezier(.2, .8, .22, 1) both;
}

.nova-motion-loader.is-transition::before {
    width: min(52vw, 440px);
    opacity: .5;
    filter: blur(36px);
}

.nova-motion-loader.is-transition .nova-motion-loader__stage {
    transform: translateY(-2vh);
    animation: novaMotionTransitionStage .48s cubic-bezier(.18, .82, .22, 1) both;
}

.nova-motion-loader.is-transition .nova-motion-loader__horizon {
    width: min(44vw, 320px);
    animation-duration: 1.25s;
}

.nova-motion-loader.is-transition .nova-motion-loader__copy {
    display: none;
}

@keyframes novaMotionClockwise { to { transform: rotate(360deg); } }
@keyframes novaMotionCounter { to { transform: rotate(-360deg); } }
@keyframes novaMotionScan { 0% { transform: rotate(-38deg); opacity: .12; } 28%, 72% { opacity: .8; } 100% { transform: rotate(322deg); opacity: .12; } }
@keyframes novaMotionAura { 0%, 100% { opacity: .1; transform: scale(.92); } 50% { opacity: .25; transform: scale(1.08); } }
@keyframes novaMotionPulse { 0% { opacity: .22; transform: scale(.82); } 72%, 100% { opacity: 0; transform: scale(1.22); } }
@keyframes novaMotionComet { 0%, 100% { opacity: .66; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes novaMotionAperture { 0%, 100% { opacity: .44; transform: rotate(-4deg) scale(.94); } 48% { opacity: .92; transform: rotate(4deg) scale(1.02); } }
@keyframes novaMotionBladeA { 0%, 100% { transform: rotate(-8deg) scale(.96); opacity: .08; } 50% { transform: rotate(8deg) scale(1.04); opacity: .2; } }
@keyframes novaMotionBladeB { 0%, 100% { transform: rotate(8deg) scale(.96); opacity: .08; } 50% { transform: rotate(-8deg) scale(1.04); opacity: .2; } }
@keyframes novaMotionMonogram { 0%, 100% { opacity: .92; transform: scale(.985); } 50% { opacity: 1; transform: scale(1.018); } }
@keyframes novaMotionGlint { 0%, 100% { opacity: .35; transform: scale(.65) rotate(0deg); } 50% { opacity: 1; transform: scale(1.16) rotate(45deg); } }
@keyframes novaMotionFlare { 0%, 100% { opacity: .18; transform: scale(.6); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes novaMotionHorizon { 0% { opacity: 0; transform: translate(50%, -50%) scaleX(.06); } 32% { opacity: .82; } 55% { opacity: .5; transform: translate(50%, -50%) scaleX(1); } 100% { opacity: 0; transform: translate(50%, -50%) scaleX(.12); } }
@keyframes novaMotionAmbient { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: .82; transform: scale(1.08); } }
@keyframes novaMotionTransitionLayer { 0% { opacity: 0; } 24% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes novaMotionTransitionStage { 0% { opacity: 0; transform: translateY(8px) scale(.82); } 40% { opacity: 1; transform: translateY(-2vh) scale(1); } 100% { opacity: 0; transform: translateY(-2vh) scale(1.04); } }

@media (max-width: 620px) {
    .nova-motion-loader {
        --nova-motion-size: 88px;
        min-height: 220px;
    }

    .nova-motion-loader.is-details {
        --nova-motion-size: 96px;
        min-height: calc(100dvh - var(--bottom-nav-h, 70px) - var(--safe-bottom, 0px));
    }

    .nova-motion-loader.is-transition {
        --nova-motion-size: 58px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nova-motion-loader,
    .nova-motion-loader::before,
    .nova-motion-loader__stage,
    .nova-motion-loader__horizon,
    .nova-motion-loader__flare,
    .nova-motion-aura,
    .nova-motion-orbit,
    .nova-motion-comet,
    .nova-motion-scan,
    .nova-motion-aperture,
    .nova-motion-blade,
    .nova-motion-pulse,
    .nova-motion-monogram,
    .nova-motion-glint {
        animation: none !important;
    }

    .nova-motion-loader.is-transition {
        opacity: 0;
    }
}


/* ===== Components/Shared/NovaInitialGateLoader.razor.css ===== */
.nova-web-page {
    display: contents;
}

.nova-initial-gate {
    position: fixed;
    z-index: 2147483600;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000000;
    color: #ffffff;
    isolation: isolate;
}

.nova-initial-gate__topline {
    position: absolute;
    z-index: 4;
    top: var(--safe-top, 0px);
    right: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    background: rgba(255,255,255,.035);
}

.nova-initial-gate__topline span {
    position: absolute;
    inset-block: 0;
    right: -34%;
    width: 34%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, #F04AD8 16%, #9B4DFF 50%, #14D7FF 84%, transparent 100%);
    filter: drop-shadow(0 0 9px rgba(90, 132, 255, .85));
    animation: novaInitialGateWave 1.62s cubic-bezier(.42, 0, .22, 1) infinite;
}

.nova-initial-gate__center {
    width: min(88vw, 430px);
    display: grid;
    justify-items: center;
    gap: 13px;
    transform: translateY(-3vh);
}

.nova-initial-gate__motion {
    width: min(150px, 34vw);
}

.nova-initial-gate__motion .nova-motion-loader {
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.nova-initial-gate__motion .nova-motion-loader::before {
    opacity: .48 !important;
}

.nova-initial-gate__dots {
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    direction: ltr;
}

.nova-initial-gate__dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #14D7FF;
    box-shadow: 0 0 13px rgba(20, 215, 255, .68);
    animation: novaInitialGateDot 1.28s cubic-bezier(.45, 0, .25, 1) infinite;
}

.nova-initial-gate__dots i:nth-child(2) {
    background: #9B4DFF;
    box-shadow: 0 0 13px rgba(155, 77, 255, .72);
    animation-delay: -.43s;
}

.nova-initial-gate__dots i:nth-child(3) {
    background: #F04AD8;
    box-shadow: 0 0 13px rgba(240, 74, 216, .68);
    animation-delay: -.86s;
}

.nova-initial-gate__copy {
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
}

.nova-initial-gate__copy strong {
    font-size: clamp(.9rem, 2.2vw, 1.08rem);
    line-height: 1.4;
    font-weight: 950;
}

.nova-initial-gate__copy span {
    color: rgba(255,255,255,.56);
    font-size: clamp(.68rem, 1.55vw, .8rem);
    line-height: 1.55;
    font-weight: 650;
}

@keyframes novaInitialGateWave {
    0% { right: -36%; transform: scaleX(.72); opacity: .2; }
    20% { opacity: 1; }
    52% { transform: scaleX(1.22); }
    82% { opacity: 1; }
    100% { right: 102%; transform: scaleX(.76); opacity: .15; }
}

@keyframes novaInitialGateDot {
    0%, 100% { opacity: .28; transform: translateY(0) scale(.72); }
    48% { opacity: 1; transform: translateY(-5px) scale(1.08); }
}

@media (max-width: 620px) {
    .nova-initial-gate__center { transform: translateY(-5vh); }
    .nova-initial-gate__topline { height: 2px; }
    .nova-initial-gate__dots i { width: 8px; height: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .nova-initial-gate__topline span,
    .nova-initial-gate__dots i { animation: none !important; }
}


/* ===== Components/Shared/NovaProgressiveLoader.razor.css ===== */
.nova-web-page { display:block; width:100%; background:transparent !important; }
.nova-progressive-loader {
    position:relative; isolation:isolate; width:100%; padding:18px clamp(14px,4vw,34px) 28px;
    overflow:hidden; color:#fff; background:transparent !important; box-sizing:border-box;
    animation:novaProgressiveEnter .42s cubic-bezier(.2,.8,.25,1) both;
}
.nova-progressive-loader::before { display:none !important; content:none !important; }
.nova-progressive-loader__status { min-height:72px; display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:13px; direction:rtl; }
.nova-progressive-loader__orbit { width:58px; height:58px; justify-self:end; filter:drop-shadow(0 9px 22px rgba(74,103,255,.18)); }
.nova-progressive-loader__orbit svg { width:100%; height:100%; display:block; overflow:visible; }
.nova-progressive-aura,.nova-progressive-orbit,.nova-progressive-pulse,.nova-progressive-monogram,.nova-progressive-glint { transform-origin:36px 36px; }
.orbit-outer { animation:novaProgressiveClockwise 7.6s linear infinite; }
.orbit-inner { animation:novaProgressiveCounter 12.8s linear infinite; }
.nova-progressive-aura { animation:novaProgressiveAura 5.8s ease-in-out infinite; }
.nova-progressive-pulse { animation:novaProgressivePulse 5.6s ease-out infinite; }
.pulse-two { animation-delay:-2.8s; }
.nova-progressive-comet { animation:novaProgressiveComet 2.7s ease-in-out infinite; }
.nova-progressive-glint { animation:novaProgressiveGlint 2.9s ease-in-out infinite; }
.nova-progressive-monogram { animation:novaProgressiveMonogram 6.8s ease-in-out infinite; }
.nova-progressive-loader__copy { min-width:0; display:grid; gap:4px; text-align:right; }
.nova-progressive-loader__copy strong { color:#fff; font-size:clamp(.82rem,1.8vw,.98rem); line-height:1.35; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nova-progressive-loader__copy span { color:rgba(255,255,255,.56); font-size:clamp(.66rem,1.45vw,.78rem); line-height:1.45; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nova-progressive-loader__signal { min-width:28px; display:flex; align-items:center; gap:5px; direction:ltr; }
.nova-progressive-loader__signal i { width:5px; height:5px; border-radius:50%; background:#4be9ff; box-shadow:0 0 12px currentColor; animation:novaProgressiveSignal 1.8s ease-in-out infinite; }
.nova-progressive-loader__signal i:nth-child(2){color:#6d7dff;background:#6d7dff;animation-delay:-.6s}.nova-progressive-loader__signal i:nth-child(3){color:#c25dff;background:#c25dff;animation-delay:-1.2s}
.nova-progressive-loader__rails { margin-top:10px; display:grid; gap:20px; }
.nova-progressive-heading { height:20px; margin-bottom:11px; display:flex; align-items:center; justify-content:space-between; gap:14px; direction:rtl; }
.nova-progressive-heading span,.nova-progressive-heading b,.nova-progressive-cards i { position:relative; display:block; overflow:hidden; background:linear-gradient(118deg,rgba(255,255,255,.035) 8%,rgba(66,102,255,.09) 24%,rgba(168,75,255,.10) 36%,rgba(255,255,255,.035) 52%); background-size:240% 100%; animation:novaProgressiveShimmer 2.9s linear infinite; }
.nova-progressive-heading span { width:clamp(128px,30vw,245px); height:16px; border-radius:7px; }.nova-progressive-heading b{width:31px;height:8px;border-radius:999px;opacity:.55}
.nova-progressive-cards { display:grid; grid-auto-flow:column; grid-auto-columns:clamp(116px,20vw,170px); gap:clamp(9px,1.7vw,13px); overflow:hidden; direction:rtl; }
.nova-progressive-cards i { aspect-ratio:2/3; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); animation-delay:calc(var(--nova-progressive-index) * -.19s); }
.nova-progressive-cards i::after { content:""; position:absolute; right:10px; bottom:11px; width:62%; height:7px; border-radius:999px; background:rgba(255,255,255,.055); box-shadow:0 -14px 0 rgba(255,255,255,.035); }
.nova-progressive-rail.is-landscape .nova-progressive-cards { grid-auto-columns:clamp(190px,36vw,315px); }.nova-progressive-rail.is-landscape .nova-progressive-cards i{aspect-ratio:16/9}
.nova-progressive-loader__progress { position:relative; width:min(46vw,270px); height:2px; margin:22px auto 0; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.045); }
.nova-progressive-loader__progress span { position:absolute; inset-block:0; right:0; width:42%; border-radius:inherit; background:linear-gradient(90deg,transparent,#3ee5ff 28%,#6976ff 62%,#c95dff 88%,transparent); filter:drop-shadow(0 0 7px rgba(87,147,255,.72)); animation:novaProgressiveBar 3.4s cubic-bezier(.42,0,.58,1) infinite; }
.nova-progressive-loader.is-compact { padding-block:10px 16px; }.nova-progressive-loader.is-compact .nova-progressive-loader__status{min-height:56px}.nova-progressive-loader.is-compact .nova-progressive-loader__orbit{width:48px;height:48px}.nova-progressive-loader.is-compact .nova-progressive-loader__rails{margin-top:6px}.nova-progressive-loader.is-compact .nova-progressive-loader__progress{margin-top:14px}
.nova-progressive-loader.is-inline {
    min-height: 86px;
    padding: 10px 0 12px;
    display: grid;
    place-items: center;
    background: transparent !important;
}
.nova-progressive-loader.is-inline .nova-progressive-loader__status {
    min-height: 58px;
    grid-template-columns: 58px;
    justify-content: center;
    gap: 0;
}
.nova-progressive-loader.is-inline .nova-progressive-loader__orbit { justify-self: center; }
.nova-progressive-loader.is-inline .nova-progressive-loader__copy,
.nova-progressive-loader.is-inline .nova-progressive-loader__signal,
.nova-progressive-loader.is-inline .nova-progressive-loader__rails,
.nova-progressive-loader.is-inline .nova-progressive-loader__progress { display: none !important; }
@keyframes novaProgressiveEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes novaProgressiveAmbient{0%,100%{opacity:.5;transform:translateX(50%) scale(.92)}50%{opacity:.9;transform:translateX(50%) scale(1.08)}}@keyframes novaProgressiveClockwise{to{transform:rotate(360deg)}}@keyframes novaProgressiveCounter{to{transform:rotate(-360deg)}}@keyframes novaProgressiveAura{0%,100%{opacity:.13;transform:scale(.93)}50%{opacity:.28;transform:scale(1.09)}}@keyframes novaProgressivePulse{0%{opacity:.28;transform:scale(.84)}70%,100%{opacity:0;transform:scale(1.18)}}@keyframes novaProgressiveComet{0%,100%{opacity:.76;transform:scale(.82)}50%{opacity:1;transform:scale(1.18)}}@keyframes novaProgressiveGlint{0%,100%{opacity:.55;transform:scale(.74) rotate(0)}50%{opacity:1;transform:scale(1.22) rotate(45deg)}}@keyframes novaProgressiveMonogram{0%,100%{opacity:.94;transform:scale(.99)}50%{opacity:1;transform:scale(1.015)}}@keyframes novaProgressiveSignal{0%,100%{opacity:.2;transform:scale(.75)}50%{opacity:1;transform:translateY(-2px) scale(1.08)}}@keyframes novaProgressiveShimmer{0%{background-position:135% 0}100%{background-position:-135% 0}}@keyframes novaProgressiveBar{0%{transform:translateX(140%);opacity:.18}50%{opacity:1}100%{transform:translateX(-340%);opacity:.18}}
@media(max-width:600px){.nova-progressive-loader{padding-inline:12px;padding-bottom:22px}.nova-progressive-loader__status{grid-template-columns:50px minmax(0,1fr) 22px;gap:9px}.nova-progressive-loader__orbit{width:50px;height:50px}.nova-progressive-cards{grid-auto-columns:clamp(104px,30vw,136px)}.nova-progressive-loader__copy span{white-space:normal}.nova-progressive-loader__progress{width:58vw}}
@media(prefers-reduced-motion:reduce){.nova-progressive-loader,.nova-progressive-loader::before,.nova-progressive-loader *{animation:none!important}}


/* ===== Components/Shared/SearchSheet.razor.css ===== */
section.search-sheet {
    background: rgba(0, 0, 0, .76);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(28px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
}


/* ===== Components/Shared/SideMenu.razor.css ===== */
aside.side-menu {
    background: rgba(0, 0, 0, .78);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .58);
    backdrop-filter: blur(28px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
}

.side-menu-brand strong {
    color: #fff;
}

.side-menu > a {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 12px;
    background: transparent;
    color: #d9d9dc;
    text-align: right;
    font-weight: 700;
    text-decoration: none;
    pointer-events: auto;
}

.side-menu > a:active {
    background: #242426;
    color: var(--accent);
}


/* ===== Components/Shared/MediaCard.razor.css ===== */
article.nova-item-card {
    background: transparent;
    color: #fff;
}

.poster-wrapper {
    background: #000;
}


/* ===== Components/Pages/Home.razor.css ===== */
.nova-web-page {
    display: block;
    background: #000000;
}

.home-app {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background: #000000 !important;
    background-image: none !important;
    padding-bottom: 0;
}

.home-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: #000000 !important;
}

.target-home,
.target-home-reference,
.shahid-home-reference {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 0 calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px) + 8px);
    overflow: hidden;
    background: #000000 !important;
    background-image: none !important;
    box-sizing: border-box;
}

/* صفحات التحميل والفراغ */
.home-loading-page,
.home-empty-page {
    min-height: 72vh;
    padding: calc(88px + var(--safe-top, 0px)) 22px 120px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 16px;
    color: #ffffff;
    text-align: center;
    background: #000000 !important;
}

/* مؤشر التحميل بهوية Nova+ */
.home-loader-ring {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #9B4DFF;
    animation: home-loader-spin 0.85s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.home-loading-page strong,
.home-empty-page h1 {
    margin: 0;
    font-size: clamp(1.2rem, 3.5vw, 1.8rem);
    font-weight: 950;
    letter-spacing: -0.02em;
}

.home-loading-page small,
.home-empty-page p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    line-height: 1.7;
    font-weight: 600;
}

/* الأزرار الأساسية */
.primary-action {
    min-height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
    color: #ffffff;
    font-weight: 900;
    font-size: 0.95rem;
    box-shadow: 0 12px 28px rgba(155, 77, 255, 0.28);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .primary-action:active {
        transform: scale(0.96);
        box-shadow: 0 6px 16px rgba(155, 77, 255, 0.2);
    }

/* زر الاشتراك العائم */
.home-subscribe-cta {
    position: fixed;
    z-index: 149;
    right: 50%;
    bottom: calc(76px + var(--safe-bottom, 0px));
    width: clamp(140px, 35vw, 220px);
    min-height: 48px;
    padding: 0 20px;
    transform: translateX(50%);
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
    box-shadow: 0 12px 30px rgba(155, 77, 255, 0.35);
    font-size: clamp(0.8rem, 1.85vw, 0.95rem);
    font-weight: 950;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .home-subscribe-cta:active {
        transform: translateX(50%) scale(0.96);
        box-shadow: 0 8px 20px rgba(155, 77, 255, 0.25);
    }

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

/* الميديا كويري للهواتف الذكية */
@media (max-width: 600px) {
    .home-app {
        padding-bottom: 0;
    }

    .target-home,
    .target-home-reference,
    .shahid-home-reference {
        padding-bottom: calc(var(--bottom-nav-h, 72px) + var(--safe-bottom, 0px) + 6px);
    }

    .home-subscribe-cta {
        bottom: calc(71px + var(--safe-bottom, 0px));
        width: 170px;
        min-height: 44px;
        font-size: 0.8rem;
    }

    .home-loader-ring {
        width: 44px;
        height: 44px;
        border-width: 2.5px;
    }
}

/* Facebook/X-style skeleton loading: no old centered loading message. */
.home-skeleton-page {
    width: 100%;
    min-height: 100vh;
    padding: 0 0 112px;
    background: #000000;
    overflow: hidden;
}

.nova-shimmer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg, rgba(255,255,255,0.055) 8%, rgba(151,0,198,0.16) 18%, rgba(86,109,255,0.12) 26%, rgba(255,255,255,0.055) 38%);
    background-size: 220% 100%;
    animation: nova-shimmer-sweep 1.12s linear infinite;
}

.home-hero-skeleton {
    height: min(78vh, 760px);
    min-height: 520px;
    width: 100%;
    border-radius: 0 0 34px 34px;
    background-color: #070709;
    box-shadow: inset 0 -180px 150px rgba(0,0,0,0.92);
}

.home-hero-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 26%, rgba(151,0,198,0.20), transparent 28%),
        linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.95));
}

.home-hero-skeleton-copy {
    position: absolute;
    z-index: 2;
    left: 24px;
    right: 24px;
    bottom: 84px;
    display: grid;
    justify-items: center;
    gap: 14px;
}

.home-hero-skeleton-copy span,
.home-hero-skeleton-copy strong,
.home-hero-skeleton-copy small,
.home-hero-skeleton-copy b,
.home-skeleton-heading,
.home-skeleton-card {
    display: block;
    border-radius: 999px;
    background-color: rgba(255,255,255,0.08);
}

.home-hero-skeleton-copy span { width: 82px; height: 14px; }
.home-hero-skeleton-copy strong { width: min(68vw, 360px); height: 48px; border-radius: 18px; }
.home-hero-skeleton-copy small { width: min(56vw, 280px); height: 16px; }
.home-hero-skeleton-copy div { display: flex; gap: 16px; margin-top: 8px; }
.home-hero-skeleton-copy b { width: min(38vw, 180px); height: 54px; }

.home-rail-skeleton-batch {
    display: grid;
    gap: 28px;
    padding-top: 26px;
}

.home-rail-skeleton {
    padding-inline: clamp(14px, 4vw, 34px);
}

.home-skeleton-heading {
    width: min(58vw, 330px);
    height: 28px;
    margin: 0 0 16px auto;
    border-radius: 12px;
}

.home-skeleton-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(122px, 30vw, 178px);
    gap: 12px;
    overflow: hidden;
    direction: rtl;
}

.home-skeleton-card {
    height: clamp(178px, 43vw, 258px);
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.home-lazy-sentinel {
    min-height: 320px;
    padding-bottom: 30px;
}

@keyframes nova-shimmer-sweep {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

@media (max-width: 600px) {
    .home-hero-skeleton {
        height: 74vh;
        min-height: 500px;
        border-radius: 0 0 26px 26px;
    }

    .home-hero-skeleton-copy {
        bottom: 70px;
        gap: 12px;
    }

    .home-hero-skeleton-copy strong {
        height: 42px;
        border-radius: 16px;
    }

    .home-hero-skeleton-copy b {
        height: 48px;
    }

    .home-rail-skeleton-batch {
        gap: 24px;
        padding-top: 22px;
    }

    .home-skeleton-row {
        grid-auto-columns: 31vw;
        gap: 10px;
    }

    .home-skeleton-card {
        height: 46vw;
        min-height: 150px;
        border-radius: 14px;
    }
}

/* Lightweight observer sentinel. The full branded loader is rendered only while a batch is actually loading. */
.home-lazy-sentinel {
    position: relative;
    min-height: 96px;
    display: grid;
    place-items: center;
    padding: 8px 0 22px;
    overflow: hidden;
}

.home-lazy-pulse {
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #31ddff, #6d72ff, #c45dff, transparent);
    opacity: .28;
    filter: drop-shadow(0 0 7px rgba(75, 130, 255, .5));
    animation: home-lazy-pulse 2.8s ease-in-out infinite;
}

@keyframes home-lazy-pulse {
    0%, 100% { opacity: .16; transform: scaleX(.58); }
    50% { opacity: .48; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .home-lazy-pulse { animation: none; }
}

.home-motion-loading {
    min-height: calc(100dvh - var(--bottom-nav-h, 76px));
    padding-top: calc(76px + var(--safe-top, env(safe-area-inset-top, 0px)));
    box-sizing: border-box;
    background: transparent !important;
}

.home-motion-loading .nova-motion-loader {
    min-height: calc(100dvh - var(--bottom-nav-h, 76px));
}


/* Pre-stage3 runtime spacing guard: observer geometry must never become visible dead space. */
.home-lazy-sentinel {
    min-height: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.target-home,
.target-home-reference,
.shahid-home-reference {
    min-height: 0 !important;
}


/* ===== Components/Pages/HomeSections/HomeHeroSlider.razor.css ===== */
.nova-web-page {
    display: block;
    background: #000000;
}

/* Hero slider shell */
.target-home-hero-shell {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0 0 22px;
    overflow: hidden;
    background: #000000;
}

.target-home-hero-shell::after {
    display: none;
    content: none;
}

.target-home-hero-rail {
    display: flex;
    direction: rtl;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    cursor: grab;
}

.target-home-hero-rail:active {
    cursor: grabbing;
}

.target-home-hero-rail::-webkit-scrollbar {
    display: none;
}

/* Slide size: professional, prominent, not tiny */
.target-hero-slide {
    position: relative;
    z-index: 0;
    flex: 0 0 100%;
    width: 100%;
    height: clamp(540px, 76dvh, 780px);
    min-height: 540px;
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    cursor: pointer;
    background: #000000;
}

/* Cinematic lower fade: keeps the artwork visible while grounding the copy and
   actions over a deep, transparent black gradient. The overlay is deliberately
   behind all hero controls, so button styling and interaction remain unchanged. */
.target-hero-slide::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 82% 34% at 50% 89%,
            rgba(0,0,0,.34) 0%,
            rgba(0,0,0,.13) 44%,
            rgba(0,0,0,0) 74%),
        linear-gradient(180deg,
            rgba(0,0,0,0) 30%,
            rgba(0,0,0,.025) 42%,
            rgba(0,0,0,.12) 54%,
            rgba(0,0,0,.34) 66%,
            rgba(0,0,0,.64) 78%,
            rgba(0,0,0,.88) 90%,
            #000000 100%);
}

/* Hero image: natural brightness, no global dimming */
.target-hero-slide .safe-background-image {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    object-position: center top;
    filter: saturate(1) contrast(1.02) brightness(1);
    transform: scale(1.002);
    pointer-events: none;
}

/* Soft cinematic shade only for readability */
.target-hero-shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,.06) 18%,
            rgba(0,0,0,0) 32%,
            rgba(0,0,0,.12) 48%,
            rgba(0,0,0,.48) 68%,
            rgba(0,0,0,.82) 84%,
            #000000 100%),
        linear-gradient(90deg,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,0) 28%,
            rgba(0,0,0,0) 72%,
            rgba(0,0,0,.14) 100%);
}

/* Hero content position */
.target-hero-copy {
    position: absolute;
    z-index: 3;
    right: clamp(16px, 4vw, 42px);
    left: clamp(16px, 4vw, 42px);
    bottom: clamp(72px, 10dvh, 104px);
    display: block;
    direction: rtl;
    text-align: center;
    pointer-events: none;
}

.target-hero-poster {
    display: none;
}

.target-hero-text {
    width: min(100%, 560px);
    margin: 0 auto;
    text-align: center;
}

.target-hero-text h1 {
    max-width: 560px;
    margin: 0 auto 7px;
    color: #ffffff;
    font-size: clamp(1.45rem, 4.4vw, 3.15rem);
    line-height: .98;
    font-weight: 950;
    letter-spacing: -.035em;
    text-shadow: 0 3px 18px rgba(0,0,0,.78);
}

.target-hero-text p {
    margin: 0 auto 6px;
    color: rgba(255,255,255,.88);
    font-size: clamp(.68rem, 1.55vw, .92rem);
    line-height: 1.35;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0,0,0,.72);
}

/* Meta */
.target-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px 9px;
    color: rgba(255,255,255,.82);
    font-size: clamp(.62rem, 1.3vw, .78rem);
    line-height: 1.35;
    font-weight: 750;
    text-shadow: 0 2px 9px rgba(0,0,0,.78);
}

.target-hero-meta > span:not(.target-hero-status) + span:not(.target-hero-status)::before {
    content: "";
    width: 3px;
    height: 12px;
    margin-left: 7px;
    display: inline-block;
    border-radius: 99px;
    background: #14D7FF;
    vertical-align: -2px;
}

.target-hero-status {
    min-height: 18px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffffff;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-weight: 900;
}

.target-hero-status::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: 5px;
    display: inline-block;
    border-radius: 3px;
    background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 58%, #14D7FF 100%);
    transform: rotate(45deg);
    box-shadow: 0 0 14px rgba(155,77,255,.36);
}

/* Buttons: compact, centered, professional */
.target-hero-actions {
    width: min(100%, 370px);
    margin: 14px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    direction: rtl;
    pointer-events: auto;
}

.target-watch-button,
.target-save-button {
    height: 40px;
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px;
    font-size: clamp(.68rem, 1.25vw, .82rem);
    line-height: 1;
    font-weight: 950;
    cursor: pointer;
    user-select: none;
    transition: transform .14s ease, opacity .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.target-watch-button:active,
.target-save-button:active {
    transform: scale(.965);
}

/* Primary action */
.target-watch-button {
    color: #ffffff;
    border: 0;
    background: linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
    box-shadow: 0 10px 22px rgba(155,77,255,.28), 0 0 18px rgba(20,215,255,.12);
}

/* My List: same purple/blue hero outline in every section using HomeHeroSlider */
.target-save-button,
.target-save-button.saved,
.target-save-button:hover,
.target-save-button:focus,
.target-save-button:active {
    color: #ffffff !important;
    border: 3px solid transparent !important;
    background:
        linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)) padding-box,
        linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) border-box !important;
    background-color: transparent !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 18px rgba(155,77,255,.20) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.target-save-button.saved {
    background:
        linear-gradient(rgba(155,77,255,.18), rgba(20,215,255,.12)) padding-box,
        linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) border-box !important;
    color: #ffffff !important;
}

.target-watch-button svg,
.target-save-button svg,
.target-watch-button .oscar-icon,
.target-save-button .oscar-icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto;
}

.target-save-button span,
.target-save-button .oscar-icon,
.target-save-button svg {
    background: transparent !important;
    background-image: none !important;
}

/* Dots */
.target-hero-dots {
    position: absolute;
    z-index: 5;
    right: 50%;
    bottom: 32px;
    transform: translateX(50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    direction: rtl;
    pointer-events: auto;
}

.target-hero-dots button {
    width: 10px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(176,186,202,.52);
    opacity: .72;
    transform: scaleX(.92);
    transform-origin: center;
    transition:
        width .34s cubic-bezier(.22,1,.36,1),
        transform .34s cubic-bezier(.22,1,.36,1),
        opacity .26s ease,
        background .26s ease,
        box-shadow .26s ease;
    will-change: width, transform, opacity;
}

.target-hero-dots button.active {
    width: 21px;
    opacity: 1;
    transform: scaleX(1);
    background: linear-gradient(90deg, #F04AD8 0%, #9B4DFF 52%, #14D7FF 100%);
    box-shadow: 0 0 12px rgba(155,77,255,.30);
}

.target-hero-dots button:focus-visible {
    outline: 1px solid rgba(20,215,255,.86);
    outline-offset: 4px;
}

/* Desktop arrows */
.scroll-arrow {
    position: absolute;
    z-index: 26;
    top: 50%;
    width: 42px;
    height: 42px;
    display: none;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    background: rgba(0,0,0,.10);
    color: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateY(-50%);
    transition: border-color .16s ease, color .16s ease, transform .16s ease, background .16s ease;
    pointer-events: auto;
}

.scroll-arrow::before {
    display: none;
    content: none;
}

.scroll-arrow-right {
    right: 14px;
}

.scroll-arrow-left {
    left: 14px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 760px) {
    .scroll-arrow {
        display: grid;
    }

    .scroll-arrow:hover {
        color: #14D7FF;
        border-color: rgba(20,215,255,.42);
        background: rgba(0,0,0,.18);
        transform: translateY(-50%) scale(1.06);
    }
}

/* Android / small screens */
@media (max-width: 600px) {
    .target-home-hero-shell {
        margin-bottom: 18px;
    }

    .target-hero-slide {
        height: clamp(500px, 74dvh, 660px);
        min-height: 500px;
    }

    .target-hero-slide::after {
        background:
            radial-gradient(ellipse 96% 32% at 50% 90%,
                rgba(0,0,0,.36) 0%,
                rgba(0,0,0,.12) 46%,
                rgba(0,0,0,0) 76%),
            linear-gradient(180deg,
                rgba(0,0,0,0) 26%,
                rgba(0,0,0,.03) 38%,
                rgba(0,0,0,.14) 50%,
                rgba(0,0,0,.40) 63%,
                rgba(0,0,0,.70) 76%,
                rgba(0,0,0,.93) 90%,
                #000000 100%);
    }

    .target-hero-shade {
        background:
            linear-gradient(180deg,
                rgba(0,0,0,.16) 0%,
                rgba(0,0,0,.04) 18%,
                rgba(0,0,0,0) 30%,
                rgba(0,0,0,.14) 45%,
                rgba(0,0,0,.48) 64%,
                rgba(0,0,0,.80) 79%,
                #000000 100%);
    }

    .target-hero-copy {
        right: 16px;
        left: 16px;
        bottom: 70px;
    }

    .target-hero-text {
        width: min(100%, 330px);
    }

    .target-hero-text h1 {
        max-width: 94%;
        margin-bottom: 5px;
        font-size: clamp(1.18rem, 5.8vw, 1.82rem);
        line-height: 1;
        letter-spacing: -.03em;
    }

    .target-hero-text p {
        margin-bottom: 4px;
        font-size: .62rem;
    }

    .target-hero-meta {
        gap: 3px 6px;
        font-size: .57rem;
    }

    .target-hero-meta > span:not(.target-hero-status) + span:not(.target-hero-status)::before {
        width: 2px;
        height: 9px;
        margin-left: 4px;
        vertical-align: -1px;
    }

    .target-hero-status {
        min-height: 14px;
        gap: 3px;
    }

    .target-hero-status::before {
        width: 7px;
        height: 7px;
        margin-left: 3px;
        border-radius: 2px;
    }

    .target-hero-actions {
        width: min(100%, 286px);
        margin-top: 10px;
        gap: 8px;
    }

    .target-watch-button,
    .target-save-button {
        height: 35px;
        min-height: 35px;
        padding: 0 10px;
        gap: 5px;
        font-size: .62rem;
    }

    .target-watch-button svg,
    .target-save-button svg,
    .target-watch-button .oscar-icon,
    .target-save-button .oscar-icon {
        width: 12px !important;
        height: 12px !important;
    }

    .target-hero-dots {
        bottom: 30px;
        gap: 3px;
    }

    .target-hero-dots button {
        width: 5px;
        height: 2px;
    }

    .target-hero-dots button.active {
        width: 11px;
    }
}

/* Very small Android screens */
@media (max-width: 380px) {
    .target-hero-slide {
        height: clamp(470px, 72dvh, 620px);
        min-height: 470px;
    }

    .target-hero-copy {
        right: 14px;
        left: 14px;
        bottom: 66px;
    }

    .target-hero-text h1 {
        font-size: clamp(1.08rem, 5.6vw, 1.58rem);
    }

    .target-hero-text p {
        font-size: .58rem;
    }

    .target-hero-meta {
        font-size: .53rem;
    }

    .target-hero-actions {
        width: min(100%, 262px);
        gap: 7px;
    }

    .target-watch-button,
    .target-save-button {
        height: 33px;
        min-height: 33px;
        padding-inline: 8px;
        font-size: .58rem;
    }

    .target-hero-dots {
        bottom: 28px;
    }
}

/* Large desktop refinement */
@media (min-width: 1000px) {
    .target-hero-dots {
        gap: 5px;
    }

    .target-hero-dots button {
        width: 10px;
        height: 3px;
    }

    .target-hero-dots button.active {
        width: 21px;
    }

    .target-hero-copy {
        bottom: clamp(86px, 11dvh, 118px);
    }

    .target-hero-actions {
        width: min(100%, 390px);
    }

    .target-watch-button,
    .target-save-button {
        height: 42px;
        min-height: 42px;
    }
}

/* FIX: My List hero button must stay transparent; only the frame uses the Nova purple/blue brand color. */
.target-save-button,
.target-save-button.saved,
.target-save-button:hover,
.target-save-button:focus,
.target-save-button:active {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    color: #ffffff !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(155,77,255,.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.target-save-button::before,
.target-save-button.saved::before,
.target-save-button:hover::before,
.target-save-button:focus::before,
.target-save-button:active::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    padding: 3px;
    pointer-events: none;
    background: linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.target-save-button > *,
.target-save-button span,
.target-save-button .oscar-icon,
.target-save-button svg {
    position: relative;
    z-index: 1;
    background: transparent !important;
    background-image: none !important;
}

@supports not (-webkit-mask-composite: xor) {
    .target-save-button::before,
    .target-save-button.saved::before,
    .target-save-button:hover::before,
    .target-save-button:focus::before,
    .target-save-button:active::before {
        padding: 0;
        border: 3px solid #8E44FF;
        background: transparent;
        -webkit-mask: none;
        mask: none;
    }
}



/* ===== Components/Pages/HomeSections/HomeRailSection.razor.css ===== */
.nova-web-page {
    display: block;
    background: #000000;
}

.shahid-home-section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 18px 0 24px;
    overflow: hidden;
    box-sizing: border-box;
    background: #000000;
}

    .shahid-home-section + .shahid-home-section {
        padding-top: 24px;
    }

.shahid-section-heading {
    min-height: 58px;
    padding: 0 max(18px, var(--safe-right, 0px)) 0 max(18px, var(--safe-left, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    direction: rtl;
}

    .shahid-section-heading h2 {
        position: relative;
        min-width: 0;
        margin: 0;
        padding-right: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        /*           */
        font-size: clamp(0.95rem, 2vw, 1.15rem);
        line-height: 1.2;
        font-weight: 950;
        letter-spacing: -.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /*     */
        .shahid-section-heading h2::before {
            content: "";
            position: absolute;
            right: 0;
            width: 5px;
            align-self: stretch;
            min-height: 28px;
            border-radius: 999px;
            background: linear-gradient(180deg, #14D7FF 0%, #9B4DFF 56%, #F04AD8 100%);
        }

    .shahid-section-heading > button {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        padding: 0;
        display: grid;
        place-items: center;
        color: #9B4DFF;
        background: transparent;
        border: 0;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

        .shahid-section-heading > button:active {
            transform: scale(0.9);
        }

.shahid-brand-mark {
    position: relative;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    display: inline-block;
}

    .shahid-brand-mark i {
        position: absolute;
        top: 2px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

        .shahid-brand-mark i:nth-child(1) {
            right: 1px;
            background: #F04AD8;
        }

        .shahid-brand-mark i:nth-child(2) {
            right: 10px;
            background: #9B4DFF;
        }

        .shahid-brand-mark i:nth-child(3) {
            right: 19px;
            background: #14D7FF;
        }

    .shahid-brand-mark b {
        position: absolute;
        right: 11px;
        bottom: 0;
        width: 6px;
        height: 15px;
        border: 2px solid #dce4ee;
        border-radius: 2px;
        box-sizing: border-box;
    }

.horizontal-scroll-shell,
.desktop-rail-controls {
    position: relative;
    isolation: isolate;
}

    .desktop-rail-controls > .scroll-arrow {
        top: 48%;
    }

    .desktop-rail-controls > .scroll-arrow-right {
        right: max(12px, var(--safe-right, 0px));
    }

    .desktop-rail-controls > .scroll-arrow-left {
        left: max(12px, var(--safe-left, 0px));
    }

.shahid-rail {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    direction: rtl;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .shahid-rail::-webkit-scrollbar {
        display: none;
    }

    .shahid-rail > * {
        scroll-snap-align: start;
    }

.scroll-arrow {
    position: absolute;
    z-index: 26;
    top: 50%;
    width: 47px;
    height: 47px;
    display: none;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    box-shadow: none;
    backdrop-filter: none;
    transform: translateY(-50%);
    transition: border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    pointer-events: auto;
}

    .scroll-arrow::before {
        content: "";
        position: absolute;
        inset: -7px;
        border-radius: 999px;
        background: radial-gradient(circle at center, rgba(155,108,255,.18) 0%, rgba(53,168,255,.10) 38%, rgba(53,168,255,0) 72%);
        opacity: .75;
        pointer-events: none;
        filter: blur(6px);
    }

    .scroll-arrow > * {
        position: relative;
        z-index: 1;
    }

.scroll-arrow-right {
    right: 8px;
}

.scroll-arrow-left {
    left: 8px;
}

.shahid-card-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 43%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.96) 100%);
}

.shahid-short-card,
.shahid-poster-card,
.shahid-ranked-card,
.shahid-landscape-card,
.shahid-live-card,
.shahid-mood-card,
.shahid-person-card {
    background: #0d0d0d;
    cursor: pointer;
}

.shahid-short-card {
    position: relative;
    flex: 0 0 clamp(180px, 29vw, 300px);
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 6px;
    color: #fff;
}

    .shahid-short-card .shahid-card-image,
    .shahid-person-card .shahid-card-image,
    .shahid-ranked-poster .shahid-card-image,
    .shahid-live-poster .shahid-card-image,
    .shahid-poster-image .shahid-card-image,
    .shahid-landscape-image .shahid-card-image {
        width: 100% !important;
        height: 100% !important;
        display: block;
        object-fit: cover;
        pointer-events: none;
    }

.shahid-short-copy {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    left: 10px;
    text-align: right;
}

    .shahid-short-copy strong {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #fff;
        font-size: clamp(.75rem, 1.8vw, 1rem);
        line-height: 1.35;
        font-weight: 800;
        text-shadow: 0 2px 8px #000;
    }

    .shahid-short-copy small {
        margin-top: 5px;
        display: flex;
        align-items: center;
        gap: 6px;
        color: #fff;
        font-size: clamp(.68rem, 1.55vw, .88rem);
        direction: ltr;
        justify-content: flex-end;
    }

.shahid-people-rail {
    gap: 7px;
}

.shahid-person-card {
    position: relative;
    flex: 0 0 clamp(150px, 22vw, 230px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    color: #fff;
}

    .shahid-person-card > span {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(3,9,15,.04), rgba(3,9,15,.55)), linear-gradient(90deg, rgba(0,196,180,.18), rgba(9,20,28,.1));
    }

    .shahid-person-card strong {
        position: absolute;
        z-index: 2;
        right: 8px;
        bottom: 11px;
        left: 8px;
        color: #fff;
        text-align: center;
        font-size: clamp(.72rem, 1.6vw, .95rem);
        font-weight: 950;
        text-shadow: 0 2px 8px #000;
    }

.shahid-ranked-rail {
    gap: 8px;
}

.shahid-ranked-card {
    flex: 0 0 clamp(300px, 46vw, 470px);
    min-width: 0;
    color: #fff;
}

.shahid-ranked-poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 5px;
    background: #0d0d0d;
}

.shahid-rank-ribbon {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 8px;
    min-width: 48px;
    padding: 8px 7px 13px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 52%, #14D7FF 100%);
    clip-path: polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
    line-height: 1;
}

    .shahid-rank-ribbon small {
        font-size: .65rem;
        font-weight: 900;
    }

    .shahid-rank-ribbon b {
        margin-top: 3px;
        font-size: 1.8rem;
        font-weight: 950;
    }

.shahid-ranked-card > strong {
    margin-top: 8px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    color: #fff;
    font-size: .82rem;
    font-weight: 850;
}

.shahid-ranked-card > small,
.shahid-live-card > small,
.shahid-poster-card > small {
    margin-top: 5px;
    display: block;
    color: rgba(255,255,255,.82);
    font-size: clamp(.62rem, 1.45vw, .78rem);
    font-weight: 750;
}

.shahid-live-card,
.shahid-poster-card {
    flex: 0 0 clamp(150px, 22vw, 230px);
    min-width: 0;
    color: #fff;
}

.shahid-live-poster,
.shahid-poster-image {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    display: block;
    overflow: hidden;
    border-radius: 5px;
    background: #0d0d0d;
}

    .shahid-live-poster em {
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
        padding: 5px 7px;
        color: #fff;
        background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 52%, #14D7FF 100%);
        border-radius: 0 0 5px 0;
        font-size: .66rem;
        font-style: normal;
        font-weight: 950;
    }

.shahid-live-card > strong {
    margin-top: 7px;
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shahid-poster-image > strong {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #fff;
    font-size: clamp(.7rem, 1.55vw, .9rem);
    line-height: 1.25;
    font-weight: 900;
    text-shadow: 0 2px 8px #000;
}

.shahid-mood-rail {
    gap: 7px;
}

.shahid-mood-card {
    position: relative;
    flex: 0 0 clamp(150px, 22vw, 230px);
    aspect-ratio: 1 / 1;
    padding: 12px;
    overflow: hidden;
    border: 0;
    border-radius: 5px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: rgba(255,255,255,.93);
    text-align: center;
}

    .shahid-mood-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 46%);
        pointer-events: none;
    }

    .shahid-mood-card span {
        position: relative;
        z-index: 2;
        font-size: clamp(2.7rem, 8vw, 5.2rem);
        line-height: .8;
        font-weight: 900;
        background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 52%, #14D7FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .shahid-mood-card strong {
        position: relative;
        z-index: 2;
        font-size: clamp(.72rem, 1.55vw, .92rem);
        line-height: 1.25;
        font-weight: 950;
    }

.shahid-landscape-card {
    flex: 0 0 clamp(290px, 45vw, 560px);
    overflow: hidden;
    border-radius: 6px;
    color: #fff;
}

.shahid-landscape-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0d0d0d;
}

.shahid-landscape-duration {
    position: absolute;
    right: 10px;
    bottom: 8px;
    padding: 4px 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    background: rgba(15,20,28,.74);
    border: 1px solid rgba(155,77,255,.7);
    border-radius: 999px;
    direction: ltr;
    font-size: .68rem;
    font-weight: 850;
}

.shahid-landscape-copy {
    min-height: 58px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .shahid-landscape-copy strong {
        min-width: 0;
        overflow: hidden;
        color: #fff;
        font-size: clamp(.74rem, 1.6vw, .95rem);
        font-weight: 850;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .shahid-landscape-copy b {
        color: #fff;
        font-size: 1.55rem;
        line-height: 1;
    }

@media (hover: hover) and (pointer: fine) and (min-width: 760px) {
    .scroll-arrow {
        display: grid;
    }

    .shahid-rail {
        scroll-behavior: smooth;
    }
}

/*      */
@media (max-width: 600px) {
    .shahid-home-section {
        padding-top: 16px;
        padding-bottom: 20px;
    }

        .shahid-home-section + .shahid-home-section {
            padding-top: 19px;
        }

    .shahid-section-heading {
        min-height: 46px;
        padding-inline: 18px;
    }

        .shahid-section-heading h2 {
            gap: 6px;
            /*        */
            font-size: clamp(0.85rem, 3.5vw, 0.95rem);
        }

        .shahid-section-heading > button {
            flex-basis: 38px;
            width: 38px;
            height: 38px;
        }

    .shahid-brand-mark {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
    }

        .shahid-brand-mark i {
            width: 6px;
            height: 6px;
        }

            .shahid-brand-mark i:nth-child(1) {
                right: 0;
            }

            .shahid-brand-mark i:nth-child(2) {
                right: 8px;
            }

            .shahid-brand-mark i:nth-child(3) {
                right: 16px;
            }

        .shahid-brand-mark b {
            right: 9px;
            width: 6px;
            height: 14px;
        }

    .shahid-short-card {
        flex-basis: 40.2vw;
    }

    .shahid-person-card,
    .shahid-live-card,
    .shahid-poster-card,
    .shahid-mood-card {
        flex-basis: 29.2vw;
    }

    .shahid-ranked-card {
        flex-basis: 60.3vw;
    }

    .shahid-landscape-card {
        flex-basis: 57.2vw;
    }

    .shahid-short-copy {
        right: 8px;
        bottom: 8px;
        left: 8px;
    }

        .shahid-short-copy strong {
            font-size: .71rem;
        }

        .shahid-short-copy small {
            font-size: .65rem;
        }

    .shahid-rank-ribbon {
        left: 5px;
        min-width: 39px;
        padding: 6px 5px 11px;
    }

        .shahid-rank-ribbon small {
            font-size: .52rem;
        }

        .shahid-rank-ribbon b {
            font-size: 1.45rem;
        }

    .shahid-ranked-card > strong {
        font-size: .7rem;
    }

    .shahid-ranked-card > small,
    .shahid-live-card > small,
    .shahid-poster-card > small {
        font-size: .57rem;
    }

    .shahid-live-card > strong {
        font-size: .65rem;
    }

    .shahid-poster-image > strong {
        font-size: .66rem;
    }

    .shahid-person-card strong {
        font-size: .65rem;
    }

    .shahid-mood-card {
        padding: 8px;
        gap: 6px;
    }

        .shahid-mood-card span {
            font-size: 2.65rem;
        }

        .shahid-mood-card strong {
            font-size: .62rem;
        }

    .shahid-landscape-copy {
        min-height: 47px;
        padding: 8px 10px;
    }

        .shahid-landscape-copy strong {
            font-size: .68rem;
        }

    .shahid-landscape-duration {
        right: 7px;
        bottom: 6px;
        font-size: .58rem;
    }
}

@media (min-width: 1000px) {
    .shahid-short-card {
        flex-basis: 250px;
    }

    .shahid-person-card,
    .shahid-live-card,
    .shahid-poster-card,
    .shahid-mood-card {
        flex-basis: 210px;
    }

    .shahid-ranked-card {
        flex-basis: 390px;
    }

    .shahid-landscape-card {
        flex-basis: 520px;
    }
}


/* SpaceGate Nova: remove three-dot section mark */
.shahid-brand-mark,
.shahid-brand-mark i,
.shahid-brand-mark b {
    display: none !important;
    content: none !important;
}

/* Newly appended lazy-loaded sections enter softly instead of appearing abruptly. */
.shahid-home-section {
    animation: nova-home-section-arrive .62s cubic-bezier(.2, .78, .25, 1) both;
}

@keyframes nova-home-section-arrive {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: saturate(.78);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: saturate(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shahid-home-section { animation: none; }
}

.shahid-taxonomy-badges {
    position: absolute;
    z-index: 4;
    top: 8px;
    right: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    direction: rtl;
    pointer-events: none;
}

.shahid-taxonomy-badges em {
    max-width: 48%;
    padding: 4px 7px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(4,7,13,.74);
    box-shadow: 0 3px 12px rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
    font-size: clamp(.56rem, 1.15vw, .68rem);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shahid-taxonomy-badges em.region {
    background: linear-gradient(135deg, rgba(155,77,255,.88), rgba(20,215,255,.78));
}

/* NOVA+ 2.58 — progressive horizontal rail paging. Existing keyed cards remain
   mounted; only appended page cards animate in, avoiding rail-wide repaint/jank. */
.nova-rail-card {
    animation: nova-rail-card-arrive .34s cubic-bezier(.2,.78,.25,1) both;
    contain: layout paint style;
}

.nova-rail-page-sentinel {
    flex: 0 0 58px;
    min-width: 58px;
    min-height: 96px;
    align-self: stretch;
    display: grid;
    place-items: center;
    gap: 5px;
    scroll-snap-align: none !important;
    pointer-events: none;
}

.nova-rail-page-sentinel.loading {
    grid-auto-flow: column;
    align-content: center;
    justify-content: center;
    padding-inline: 10px;
}

.nova-rail-page-sentinel.loading i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    color: #4BE9FF;
    background: #4BE9FF;
    box-shadow: 0 0 12px rgba(75,233,255,.72);
    animation: nova-rail-dot 1s ease-in-out infinite;
}

.nova-rail-page-sentinel.loading i:nth-child(2) {
    color: #6D7DFF;
    background: #6D7DFF;
    box-shadow: 0 0 12px rgba(109,125,255,.72);
    animation-delay: .12s;
}
.nova-rail-page-sentinel.loading i:nth-child(3) {
    color: #C25DFF;
    background: #C25DFF;
    box-shadow: 0 0 12px rgba(194,93,255,.72);
    animation-delay: .24s;
}

@keyframes nova-rail-card-arrive {
    from { opacity: 0; transform: translateX(-12px) scale(.985); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes nova-rail-dot {
    0%, 70%, 100% { opacity: .36; transform: translateY(0) scale(.8); }
    35% { opacity: 1; transform: translateY(-3px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .nova-rail-card,
    .nova-rail-page-sentinel.loading i { animation: none !important; }
}

/* Stage 8 — commercial rail hierarchy without leaving Nova+ identity. */
.shahid-section-heading > .shahid-view-all {
    width: auto;
    height: 38px;
    min-width: 44px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 0;
    color: rgba(255,255,255,.56);
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: color .16s ease, transform .16s ease;
}

.shahid-section-heading > .shahid-view-all span {
    font-size: .68rem;
    font-weight: 800;
}

.shahid-section-heading > .shahid-view-all .oscar-icon {
    color: #9B4DFF;
}

.shahid-section-heading > .shahid-view-all:active {
    color: #fff;
    transform: translateX(-2px);
}

/* three deliberate visual densities: featured / standard / compact */
.nova-card-scale-featured.shahid-poster-section .shahid-poster-card {
    flex-basis: clamp(168px, 25vw, 250px);
}
.nova-card-scale-featured.shahid-poster-section .shahid-poster-image {
    border-radius: 10px;
}

.nova-card-scale-standard.shahid-poster-section .shahid-poster-card {
    flex-basis: clamp(150px, 22vw, 230px);
}

.nova-card-scale-compact.shahid-poster-section .shahid-poster-card {
    flex-basis: clamp(132px, 19vw, 196px);
}
.nova-card-scale-compact.shahid-poster-section .shahid-poster-image {
    border-radius: 8px;
}

.nova-card-scale-featured.shahid-landscape-section .shahid-landscape-card {
    flex-basis: clamp(320px, 49vw, 510px);
}
.nova-card-scale-standard.shahid-landscape-section .shahid-landscape-card {
    flex-basis: clamp(280px, 42vw, 430px);
}
.nova-card-scale-compact.shahid-landscape-section .shahid-landscape-card {
    flex-basis: clamp(238px, 36vw, 360px);
}

.nova-card-scale-featured .shahid-card-image,
.nova-card-scale-standard .shahid-card-image,
.nova-card-scale-compact .shahid-card-image {
    transition: transform .22s ease, filter .22s ease;
}

.nova-rail-card:active .shahid-card-image {
    transform: scale(1.018);
    filter: brightness(.94);
}

@media(max-width:680px){
    .shahid-section-heading > .shahid-view-all { height:36px; gap:4px; }
    .shahid-section-heading > .shahid-view-all span { font-size:.64rem; }
    .nova-card-scale-featured.shahid-poster-section .shahid-poster-card { flex-basis:44vw; }
    .nova-card-scale-standard.shahid-poster-section .shahid-poster-card { flex-basis:39vw; }
    .nova-card-scale-compact.shahid-poster-section .shahid-poster-card { flex-basis:34vw; }
    .nova-card-scale-featured.shahid-landscape-section .shahid-landscape-card { flex-basis:78vw; }
    .nova-card-scale-standard.shahid-landscape-section .shahid-landscape-card { flex-basis:70vw; }
    .nova-card-scale-compact.shahid-landscape-section .shahid-landscape-card { flex-basis:62vw; }
}

@media(prefers-reduced-motion:reduce){
    .shahid-section-heading > .shahid-view-all,
    .nova-card-scale-featured .shahid-card-image,
    .nova-card-scale-standard .shahid-card-image,
    .nova-card-scale-compact .shahid-card-image { transition:none !important; }
}


/* ===== Components/Pages/HomeSections/HomeWorldSwitcher.razor.css ===== */
.nova-web-page {
    display: block;
}

.nova-world-gateway {
    position: relative;
    width: 100%;
    margin: 8px 0 22px;
    padding: 26px max(16px, var(--safe-right, 0px)) 8px max(16px, var(--safe-left, 0px));
    box-sizing: border-box;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 0%, rgba(155,77,255,.105), transparent 31%),
        radial-gradient(circle at 16% 18%, rgba(20,215,255,.075), transparent 26%),
        #000;
}

.nova-world-gateway::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    pointer-events: none;
}

.nova-world-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
}

.nova-world-heading > div { min-width: 0; }
.nova-world-heading span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.48);
    font-size: .68rem;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .08em;
}

.nova-world-heading h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.18rem, 4.5vw, 1.65rem);
    line-height: 1.06;
    font-weight: 950;
    letter-spacing: -.035em;
}

.nova-world-heading p {
    max-width: 340px;
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: .73rem;
    line-height: 1.55;
    font-weight: 650;
}

.nova-world-primary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.nova-world-button {
    position: relative;
    min-height: 74px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-align: right;
    border: 1px solid rgba(255,255,255,.105);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16,18,25,.96), rgba(6,7,11,.96));
    box-shadow: 0 16px 42px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.035);
    overflow: hidden;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.nova-world-button::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 80% 0%, rgba(155,77,255,.12), transparent 42%);
    opacity: .7;
}

.nova-world-button > * { position: relative; z-index: 1; }
.nova-world-button:active { transform: scale(.982); }
.nova-world-button:focus-visible { outline: 2px solid rgba(20,215,255,.86); outline-offset: 3px; }

.nova-world-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: rgba(255,255,255,.065);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
}

.nova-world-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.nova-world-copy strong { font-size: .93rem; font-weight: 950; }
.nova-world-copy small { color: rgba(255,255,255,.52); font-size: .66rem; font-weight: 650; }

.nova-world-secondary {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.nova-world-secondary button {
    min-height: 56px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.84);
    text-align: right;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 17px;
    background: rgba(9,10,15,.72);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, color .16s ease;
}

.nova-world-secondary button:active { transform: scale(.982); }
.nova-world-secondary button > span { min-width: 0; display: grid; gap: 2px; }
.nova-world-secondary strong { font-size: .78rem; font-weight: 900; }
.nova-world-secondary small { color: rgba(255,255,255,.43); font-size: .61rem; font-weight: 650; }

@media (max-width: 560px) {
    .nova-world-gateway { padding-top: 22px; margin-bottom: 12px; }
    .nova-world-heading { align-items: start; margin-bottom: 15px; }
    .nova-world-heading p { display: none; }
    .nova-world-primary { gap: 8px; }
    .nova-world-button {
        min-height: 68px;
        padding: 10px 11px;
        grid-template-columns: auto minmax(0, 1fr);
        border-radius: 18px;
    }
    .nova-world-button > :last-child { display: none; }
    .nova-world-icon { width: 38px; height: 38px; border-radius: 13px; }
    .nova-world-copy strong { font-size: .84rem; }
    .nova-world-copy small { font-size: .59rem; }
    .nova-world-secondary { gap: 8px; }
    .nova-world-secondary button { min-height: 52px; padding: 9px 10px; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .nova-world-button,
    .nova-world-secondary button { transition: none; }
}


/* ===== Components/Pages/HomeSections/HomeEditorialSpotlight.razor.css ===== */
.nova-web-page { display:block; }

.nova-editorial-spotlight {
    width:100%;
    margin:18px 0 34px;
    padding:0;
    background:#000;
}

.nova-editorial-card {
    position:relative;
    width:100%;
    min-height:clamp(330px,62vw,620px);
    overflow:hidden;
    color:#fff;
    background:#080a0e;
    cursor:pointer;
    isolation:isolate;
}

.nova-editorial-card .nova-editorial-art {
    position:absolute!important;
    z-index:0;
    inset:0;
    width:100%!important;
    height:100%!important;
    object-fit:cover;
    object-position:center 24%;
    filter:saturate(.98) contrast(1.045);
    transform:scale(1.006);
    transition:transform .7s cubic-bezier(.22,1,.36,1), filter .3s ease;
}

.nova-editorial-shade {
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse 70% 42% at 50% 83%,rgba(0,0,0,.20),transparent 68%),
        linear-gradient(180deg,rgba(0,0,0,.04) 22%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.82) 82%,#000 100%);
}

.nova-editorial-copy {
    position:absolute;
    z-index:2;
    right:max(18px,var(--safe-right,0px));
    left:max(18px,var(--safe-left,0px));
    bottom:28px;
    width:min(620px,calc(100% - 36px));
    margin-inline:auto;
    text-align:center;
}

.nova-editorial-kicker {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.72);
    font-size:.67rem;
    font-weight:850;
}

.nova-editorial-kicker i {
    width:7px;
    height:7px;
    border-radius:2px;
    background:linear-gradient(135deg,#F04AD8,#9B4DFF 54%,#14D7FF);
    transform:rotate(45deg);
    box-shadow:0 0 14px rgba(155,77,255,.30);
}

.nova-editorial-copy h2 {
    margin:8px 0 0;
    color:#fff;
    font-size:clamp(1.55rem,6.4vw,3.1rem);
    line-height:1.02;
    font-weight:950;
    letter-spacing:-.04em;
    text-wrap:balance;
    text-shadow:0 6px 26px rgba(0,0,0,.72);
}

.nova-editorial-copy p {
    max-width:540px;
    margin:9px auto 0;
    color:rgba(255,255,255,.66);
    font-size:clamp(.72rem,2.1vw,.9rem);
    line-height:1.62;
    font-weight:600;
    display:-webkit-box;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.nova-editorial-cta {
    min-width:152px;
    min-height:43px;
    margin-top:16px;
    padding:0 21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(100deg,#F04AD8 0%,#9B4DFF 50%,#14D7FF 100%);
    box-shadow:0 13px 32px rgba(155,77,255,.24);
    font-size:.78rem;
    font-weight:950;
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease;
}

.nova-editorial-cta:active { transform:scale(.968); box-shadow:0 8px 22px rgba(155,77,255,.18); }
.nova-editorial-card:focus-visible { outline:2px solid rgba(20,215,255,.86); outline-offset:-4px; }

@media (hover:hover) and (pointer:fine) {
    .nova-editorial-card:hover .nova-editorial-art { transform:scale(1.026); filter:saturate(1.02) contrast(1.055); }
}

@media(max-width:560px) {
    .nova-editorial-spotlight { margin:14px 0 28px; }
    .nova-editorial-card { min-height:clamp(390px,112vw,540px); }
    .nova-editorial-copy { bottom:24px; }
    .nova-editorial-copy p { -webkit-line-clamp:2; }
}

@media(prefers-reduced-motion:reduce) {
    .nova-editorial-card .nova-editorial-art,
    .nova-editorial-cta { transition:none; }
}


/* ===== Components/Pages/MoviesPage.razor.css ===== */
.nova-web-page {
    display: block;
    background: #000000 !important;
}

.movies-landing-app {
    min-height: 100vh;
    background: #000000 !important;
    color: #fff;
    font-family: Tajawal, Arial, sans-serif;
}

/* 1. الشريط العلوي في حالته الافتراضية */
.movies-landing-toolbar {
    position: fixed;
    z-index: 150;
    top: 0;
    right: 0;
    left: 0;
    height: calc(65px + var(--safe-top, 0px));
    padding: var(--safe-top, 0px) max(20px,var(--safe-right,0px)) 0 max(20px,var(--safe-left,0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    border-bottom: 1px solid transparent;
    transition: background-color 0.4s ease, border-bottom 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
    pointer-events: auto;
}

/* 2. الشريط العلوي عند التمرير */
.movies-landing-toolbar.scrolled {
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}

.movies-landing-toolbar h1 {
    margin: 0;
    color: #fff;
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

/* زر البحث */
.movies-toolbar-button {
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: transparent;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.movies-toolbar-button:active {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0.92);
}

/* منطقة المحتوى */
.movies-landing-main {
    padding-top: 0;
    padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px) + 20px);
    min-height: 100vh;
    overflow-x: hidden;
    background: #000000 !important;
}

.movies-home-reference {
    background: #000000 !important;
}

.movies-home-reference .target-home-hero-shell {
    margin-top: 0;
    background: #000000 !important;
}

/* حالات التحميل والخطأ */
.movies-landing-loading,
.movies-landing-empty {
    min-height: 100vh;
    padding: calc(90px + var(--safe-top, 0px)) 22px 120px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    color: #fff;
    text-align: center;
    background: #000000 !important;
}

.home-loader-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #9B4DFF;
    animation: movies-spin 0.8s linear infinite;
}

.movies-landing-loading strong,
.movies-landing-empty h1 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.movies-landing-loading small,
.movies-landing-empty p {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    line-height: 1.6;
}

.primary-action {
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(to left, #14D7FF, #9B4DFF);
    font-size: 0.9rem;
    font-weight: 800;
    transition: opacity 0.2s;
}

.primary-action:active {
    opacity: 0.8;
}

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

@media (max-width: 420px) {
    .movies-landing-toolbar {
        height: calc(58px + var(--safe-top, 0px));
        padding-inline: 16px;
    }

    .movies-toolbar-button {
        width: 34px;
        height: 34px;
    }

    .movies-landing-toolbar h1 {
        font-size: 1.25rem;
    }
}


/* ===== Components/Pages/SeriesPage.razor.css ===== */
.nova-web-page {
    display: block;
    background: #000000 !important; /* فرض الأسود بقوة */
}

.series-landing-app {
    min-height: 100vh;
    background: #000000 !important; /* فرض الأسود بقوة */
    color: #fff;
    font-family: Tajawal, Arial, sans-serif;
}

/* 1. الشريط العلوي في حالته الافتراضية (شفاف ليظهر بوستر المسلسل) */
.series-landing-toolbar {
    position: fixed;
    z-index: 150;
    top: 0;
    right: 0;
    left: 0;
    height: calc(65px + var(--safe-top, 0px));
    padding: var(--safe-top, 0px) max(20px,var(--safe-right,0px)) 0 max(20px,var(--safe-left,0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* تدرج أسود خفيف جداً في الأعلى فقط لضمان وضوح النص */
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    border-bottom: 1px solid transparent;
    transition: background-color 0.4s ease, border-bottom 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
    pointer-events: auto;
}

    /* 2. الشريط العلوي عند التمرير (شفافية احترافية مبنية على الأسود النقي) */
    .series-landing-toolbar.scrolled {
        background-color: rgba(0, 0, 0, 0.85); /* أسود بشفافية 85% */
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 4px 20px rgba(0,0,0,0.7);
    }

    .series-landing-toolbar h1 {
        margin: 0;
        color: #fff;
        font-size: 1.45rem;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -0.02em;
        text-shadow: 0 2px 10px rgba(0,0,0,0.9);
    }

/* زر البحث */
.series-toolbar-button {
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: transparent;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

    .series-toolbar-button:active {
        background: rgba(255, 255, 255, 0.15);
        transform: scale(0.92);
    }

/* منطقة المحتوى: استخدام !important لمسح أي تدرج من كلاسات oscar-main وغيرها */
.series-landing-main {
    padding-top: 0;
    padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px) + 20px);
    min-height: 100vh;
    overflow-x: hidden;
    background: #000000 !important; /* إجبار الخلفية على الأسود النقي */
}

/* استخدام !important لمسح أي تدرج من target-home أو shahid-home-reference */
.series-home-reference {
    background: #000000 !important;
}

    .series-home-reference .target-home-hero-shell {
        margin-top: 0;
        background: #000000 !important;
    }

/* حالات التحميل والخطأ */
.series-landing-loading,
.series-landing-empty {
    min-height: 100vh;
    padding: calc(90px + var(--safe-top, 0px)) 22px 120px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    color: #fff;
    text-align: center;
    background: #000000 !important;
}

.home-loader-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #9B4DFF;
    animation: series-spin 0.8s linear infinite;
}

.series-landing-loading strong,
.series-landing-empty h1 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.series-landing-loading small,
.series-landing-empty p {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    line-height: 1.6;
}

.primary-action {
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(to left, #14D7FF, #9B4DFF);
    font-size: 0.9rem;
    font-weight: 800;
    transition: opacity 0.2s;
}

    .primary-action:active {
        opacity: 0.8;
    }

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

@media (max-width: 420px) {
    .series-landing-toolbar {
        height: calc(58px + var(--safe-top, 0px));
        padding-inline: 16px;
    }

    .series-toolbar-button {
        width: 34px;
        height: 34px;
    }

    .series-landing-toolbar h1 {
        font-size: 1.25rem;
    }
}


/* ===== Components/Pages/Details.razor.css ===== */
.nova-web-page {
    display: block;
    background: transparent;
}

.torrent-preparation-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 24px;
    direction: rtl;
}

.torrent-preparation-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 38%, rgba(122, 57, 255, .20), transparent 38%),
        rgba(2, 1, 7, .96);
    backdrop-filter: blur(18px);
}

.torrent-preparation-card {
    position: relative;
    width: min(520px, 100%);
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 46px 38px 34px;
    border: 1px solid rgba(155, 77, 255, .38);
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(150deg, rgba(20, 15, 34, .98), rgba(5, 4, 12, .98));
    box-shadow: 0 34px 100px rgba(0, 0, 0, .72), 0 0 44px rgba(115, 62, 255, .13);
}

.torrent-preparation-spinner {
    width: 78px;
    height: 78px;
    margin-bottom: 24px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, .10);
    border-top-color: #9b4dff;
    border-right-color: #14d7ff;
    animation: torrent-preparation-spin .9s linear infinite;
    box-shadow: 0 0 28px rgba(155, 77, 255, .28);
}

.torrent-preparation-badge {
    margin-bottom: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(155, 77, 255, .14);
    color: #cab2ff;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.torrent-preparation-card h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 900;
}

.torrent-preparation-card p {
    min-height: 28px;
    margin: 15px 0 7px;
    color: #d7d2e3;
    font-size: 1rem;
    line-height: 1.8;
}

.torrent-preparation-card small {
    color: #888298;
    line-height: 1.7;
}

.torrent-preparation-cancel {
    min-width: 170px;
    margin-top: 26px;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.torrent-preparation-cancel.primary {
    border-color: transparent;
    background: linear-gradient(135deg, #8c4dff, #4d9cff);
}

.torrent-preparation-error-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border: 2px solid rgba(255, 86, 111, .62);
    border-radius: 50%;
    color: #ff6a80;
    background: rgba(255, 54, 88, .10);
    font-size: 2rem;
    font-weight: 900;
}

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

/* =========================================
   1. الهوية اللونية (Solid Premium Theme)
   ========================================= */
:root, .nova-app, .details-app {
    --nova-bg-master: #030206; /* أسود سينمائي عميق */
    --nova-surface-dark: #0a0812;
    --nova-surface-card: #110d1a;
    --nova-surface-hover: #181326;
    --nova-border-subtle: rgba(255, 255, 255, 0.05);
    --nova-brand-primary: #9B4DFF;
    --nova-brand-secondary: #14D7FF;
    --nova-text-pure: #ffffff;
    --nova-text-dim: #a3a1ab;
    --nova-text-muted: #6a6775;
    --font-family: 'Inter', 'Tajawal', system-ui, sans-serif;
    /* مسافات ديناميكية تتكيف مع حجم الشاشة */
    --page-pad: clamp(20px, 5vw, 60px);
    --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* الإعدادات الشاملة لمنع التكدس */
.details-app, .details-page-shell {
    min-height: 100dvh;
    background: var(--nova-bg-master) !important;
    color: var(--nova-text-pure);
    font-family: var(--font-family);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    /* إجبار التطبيق على احترام اتجاه اليمين لليسار بشكل صحيح */
    direction: rtl;
}

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

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

::-webkit-scrollbar-thumb {
    background: #2a2240;
    border-radius: 10px;
}

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

/* =========================================
   2. الحاوية المركزية (الحل الجذري للويندوز)
   ========================================= */
/* هذه الفئة هي السر، ستمنع المحتوى من الهروب لليمين وتتوسطه في الشاشة */
.nova-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* =========================================
   3. الرأس (Hero Section) - خلفية سينمائية غامرة
   ========================================= */
.nova-hero-solid {
    position: relative;
    width: 100%;
    /* ارتفاع ديناميكي يملأ معظم الشاشة */
    min-height: clamp(550px, 75vh, 850px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 50px;
    overflow: hidden;
}

.nova-bg-layer {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center top;
    /* تخفيف سطوع الخلفية لبروز النصوص */
    filter: brightness(0.7) contrast(1.1);
}

/* تدرج لوني يبتلع أسفل ويمين الصورة لدمجها مع لون الخلفية */
.nova-vignette-solid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, var(--nova-bg-master) 0%, rgba(3,2,6,0.8) 35%, transparent 80%), linear-gradient(to right, rgba(3,2,6,0.95) 0%, rgba(3,2,6,0.5) 40%, transparent 100%);
}

.nova-details-topbar {
    position: absolute;
    top: calc(var(--safe-top, 0px) + 30px);
    left: var(--page-pad);
    right: var(--page-pad);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nova-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(10, 8, 18, 0.6);
    border: 1px solid var(--nova-border-subtle);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: var(--transition-fast);
}

    .nova-icon-btn:hover, .nova-icon-btn.active {
        background: var(--nova-brand-primary);
        border-color: var(--nova-brand-primary);
        transform: scale(1.05);
    }

.nova-topbar-actions {
    display: flex;
    gap: 12px;
}

/* =========================================
   4. توزيع المحتوى (البوستر بجانب النصوص)
   ========================================= */
.nova-hero-content {
    display: flex;
    gap: 40px;
    align-items: flex-end;
    padding: 0 var(--page-pad);
}

.nova-poster-main {
    width: clamp(200px, 18vw, 280px);
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 25px 60px rgba(0,0,0,0.9);
    flex-shrink: 0;
}

.nova-info-stack {
    flex: 1;
    min-width: 0;
    padding-bottom: 10px;
}

.nova-badge-type, .nova-badge-live {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--nova-text-dim);
    margin-bottom: 16px;
    backdrop-filter: blur(4px);
}

.nova-badge-live {
    color: #ff3b30;
    border-color: rgba(255,59,48,0.3);
    background: rgba(255,59,48,0.1);
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background: #ff3b30;
    border-radius: 50%;
    margin-left: 8px;
    box-shadow: 0 0 10px #ff3b30;
}

.nova-title-main {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 950;
    line-height: 1.1;
    margin: 0 0 20px;
    color: var(--nova-text-pure);
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
    letter-spacing: -0.02em;
}

.nova-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nova-text-dim);
    margin-bottom: 16px;
}

.rating-highlight {
    color: #f5c518;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.quality-tag {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff;
}

.nova-tags-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

    .nova-tags-row span {
        font-size: 0.7rem;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: 4px;
        background: var(--nova-surface-card);
        border: 1px solid var(--nova-border-subtle);
    }

.tag-airing {
    color: var(--nova-brand-secondary) !important;
    border-color: rgba(20,215,255,0.3) !important;
}

.tag-translated {
    color: var(--nova-brand-primary) !important;
    border-color: rgba(155,77,255,0.3) !important;
}

.nova-plot-main {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--nova-text-dim);
    margin: 0 0 30px;
    max-width: 850px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nova-stats-row {
    display: flex;
    gap: 24px;
    font-size: 0.75rem;
    color: var(--nova-text-muted);
    margin-bottom: 30px;
}

.stat-item, .stat-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-btn {
    background: transparent;
    border: none;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

    .stat-btn:hover {
        color: var(--nova-text-pure);
    }

.nova-action-row {
    display: flex;
    gap: 16px;
}

.nova-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 40px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--nova-brand-primary), var(--nova-brand-secondary));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(155, 77, 255, 0.25);
    transition: var(--transition-fast);
}

    .nova-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(155, 77, 255, 0.4);
        filter: brightness(1.1);
    }

/* =========================================
   5. محتوى الصفحة السفلي (Sections & Rails)
   ========================================= */
.nova-content-flow {
    padding: 40px var(--page-pad) 120px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.nova-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

    .nova-section-head h2 {
        font-size: 1.1rem;
        font-weight: 900;
        margin: 0;
        color: var(--nova-text-pure);
    }

        .nova-section-head h2::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 18px;
            background: var(--nova-brand-primary);
            margin-left: 8px;
            border-radius: 2px;
        }

/* سكة الممثلين */
.nova-people-rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 10px;
}

    .nova-people-rail::-webkit-scrollbar {
        display: none;
    }

.person-card {
    flex: 0 0 auto;
    width: 100px;
    text-align: center;
}

.person-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: var(--nova-surface-card);
    border: 1px solid var(--nova-border-subtle);
    overflow: hidden;
}

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

.person-card strong {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--nova-text-pure);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.person-card small {
    display: block;
    font-size: 0.65rem;
    color: var(--nova-text-muted);
    margin-top: 4px;
}

.nova-story-box {
    background: var(--nova-surface-dark);
    border: 1px solid var(--nova-border-subtle);
    padding: 30px;
    border-radius: 8px;
}

    .nova-story-box p {
        font-size: 0.85rem;
        line-height: 1.8;
        color: var(--nova-text-dim);
        margin: 0;
        max-width: 1000px;
    }


/* =========================================
   5.1 أعمال قد تثير اهتمامك - Nova Related Cards
   ========================================= */
.nova-empty-state {
    min-height: 120px;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(145deg, rgba(17,13,26,0.96), rgba(7,5,12,0.98));
    border: 1px solid rgba(151, 0, 198, 0.22);
    border-radius: 18px;
    color: var(--nova-text-dim);
    font-size: 0.84rem;
    font-weight: 800;
}

.nova-related-section {
    position: relative;
    isolation: isolate;
}

.nova-related-section::before {
    content: "";
    position: absolute;
    inset: -18px -18px auto;
    height: 170px;
    border-radius: 30px;
    background: radial-gradient(circle at 88% 10%, rgba(151, 0, 198, 0.18), transparent 46%),
                radial-gradient(circle at 12% 28%, rgba(50, 150, 255, 0.12), transparent 42%);
    pointer-events: none;
    z-index: -1;
}

.nova-related-head {
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.section-title-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.section-kicker {
    width: fit-content;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(90deg, #b24cff, #3296ff);
    -webkit-background-clip: text;
    background-clip: text;
}

.related-total {
    flex: 0 0 auto;
    font-style: normal;
    color: #d9ceff;
    background: linear-gradient(135deg, rgba(151, 0, 198, 0.22), rgba(50, 150, 255, 0.16));
    border: 1px solid rgba(151, 0, 198, 0.34);
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 0.68rem;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(151, 0, 198, 0.12);
}

.nova-related-rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 4px 2px 14px;
}

.nova-related-rail::-webkit-scrollbar {
    display: none;
}

.nova-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 18px;
    align-items: start;
}

.related-media-card {
    min-width: 0;
    cursor: pointer;
    color: var(--nova-text-pure);
    outline: none;
    scroll-snap-align: start;
}

.related-poster-shell {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(145deg, #110d1a, #050309);
    border: 1px solid rgba(151, 0, 198, 0.32);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.58),
                0 0 0 1px rgba(255, 255, 255, 0.025) inset;
    transform: translateZ(0);
    transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease, filter 0.28s ease;
}

.related-poster-shell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 0.38s ease, filter 0.38s ease;
}

.related-poster-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3, 2, 6, 0.94) 0%, rgba(3, 2, 6, 0.36) 42%, transparent 72%),
                radial-gradient(circle at 18% 14%, rgba(178, 76, 255, 0.30), transparent 38%),
                linear-gradient(135deg, rgba(151, 0, 198, 0.14), rgba(50, 150, 255, 0.10));
    pointer-events: none;
}

.related-media-card:hover .related-poster-shell,
.related-media-card:focus-visible .related-poster-shell {
    transform: translateY(-6px);
    border-color: rgba(50, 150, 255, 0.72);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.70),
                0 0 28px rgba(151, 0, 198, 0.28),
                0 0 32px rgba(50, 150, 255, 0.18);
    filter: brightness(1.04);
}

.related-media-card:hover .related-poster-shell img,
.related-media-card:focus-visible .related-poster-shell img {
    transform: scale(1.075);
}

.related-type-chip,
.related-score,
.related-favorite {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.related-type-chip {
    top: 10px;
    right: 10px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #9700c6, #3296ff);
    font-size: 0.62rem;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(151, 0, 198, 0.28);
}

.related-score {
    left: 10px;
    bottom: 10px;
    gap: 4px;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    color: #fff3a5;
    background: rgba(3, 2, 6, 0.72);
    border: 1px solid rgba(255, 231, 97, 0.20);
    font-size: 0.63rem;
    font-weight: 950;
}

.related-favorite {
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(3, 2, 6, 0.70);
    color: #fff;
    cursor: pointer;
    transition: var(--transition-fast);
}

.related-favorite:hover,
.related-favorite.active {
    color: #fff;
    background: linear-gradient(135deg, #9700c6, #3296ff);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 10px 24px rgba(151, 0, 198, 0.28);
}

.related-card-info {
    padding: 12px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.related-card-info strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.55em;
    color: #fff;
    font-size: 0.83rem;
    font-weight: 950;
    line-height: 1.28;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

.related-card-info small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--nova-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.related-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 22px;
}

.related-card-tags span {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #cfc7ea;
    background: rgba(17, 13, 26, 0.95);
    border: 1px solid rgba(151, 0, 198, 0.18);
    font-size: 0.58rem;
    font-weight: 950;
}

/* =========================================
   6. قسم الحلقات (Episodes Panel) - إصلاح العرض
   ========================================= */
.episode-panel .nova-section-head {
    justify-content: space-between;
}

.nova-sort-btn {
    background: var(--nova-surface-card);
    border: 1px solid var(--nova-border-subtle);
    color: var(--nova-text-dim);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

    .nova-sort-btn:hover {
        color: #fff;
        border-color: rgba(255,255,255,0.2);
    }

.nova-season-tabs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 24px;
}

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

.season-tab {
    flex: 0 0 auto;
    background: var(--nova-surface-dark);
    border: 1px solid var(--nova-border-subtle);
    padding: 12px 24px;
    border-radius: 8px;
    color: var(--nova-text-dim);
    text-align: right;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .season-tab strong {
        display: block;
        font-size: 0.8rem;
        font-weight: 800;
    }

    .season-tab small {
        display: block;
        font-size: 0.65rem;
        margin-top: 4px;
        opacity: 0.7;
    }

    .season-tab:hover {
        background: var(--nova-surface-hover);
    }

    .season-tab.active {
        background: var(--nova-brand-primary);
        border-color: var(--nova-brand-primary);
        color: var(--nova-text-pure);
    }

.nova-search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 0.75rem;
    color: var(--nova-text-muted);
}

.search-solid-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--nova-surface-dark);
    border: 1px solid var(--nova-border-subtle);
    padding: 0 16px;
    height: 42px;
    border-radius: 6px;
    width: 300px;
}

    .search-solid-input input {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 0.75rem;
        outline: none;
        width: 100%;
    }

/* شبكة الحلقات الاحترافية */
.nova-episode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.nova-episode-card {
    background: var(--nova-surface-card);
    border: 1px solid var(--nova-border-subtle);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .nova-episode-card:hover {
        transform: translateY(-4px);
        border-color: var(--nova-brand-primary);
        box-shadow: 0 12px 30px rgba(0,0,0,0.6);
    }

.ep-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}

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

.ep-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: var(--transition-fast);
}

.play-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--nova-brand-primary);
    display: grid;
    place-items: center;
    color: #fff;
}

.nova-episode-card:hover .ep-overlay {
    opacity: 1;
}

.ep-details {
    padding: 16px;
}

.ep-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

    .ep-header strong {
        font-size: 0.85rem;
        font-weight: 850;
        color: var(--nova-text-pure);
    }

.ep-badges span {
    font-size: 0.6rem;
    font-weight: 900;
    background: var(--nova-surface-dark);
    border: 1px solid var(--nova-border-subtle);
    padding: 2px 8px;
    border-radius: 4px;
}

.ep-details small {
    font-size: 0.7rem;
    color: var(--nova-text-muted);
}

/* =========================================
   7. سيرفرات التشغيل (Solid & Sharp)
   ========================================= */
.nova-server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.nova-server-card {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: right;
    background: var(--nova-surface-card);
    border: 1px solid var(--nova-border-subtle);
    padding: 16px 20px;
    border-radius: 8px;
    color: var(--nova-text-pure);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .nova-server-card:hover {
        background: var(--nova-surface-hover);
        border-color: var(--nova-brand-primary);
        transform: translateX(-4px);
    }

.server-icon {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: var(--nova-surface-dark);
    display: grid;
    place-items: center;
    color: var(--nova-brand-secondary);
    border: 1px solid var(--nova-border-subtle);
}

.nova-server-card:hover .server-icon {
    background: var(--nova-brand-primary);
    color: #fff;
    border-color: var(--nova-brand-primary);
}

.server-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

    .server-details strong {
        font-size: 0.85rem;
        font-weight: 850;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .server-details small {
        font-size: 0.7rem;
        color: var(--nova-text-dim);
    }

.server-badge {
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 900;
    background: var(--nova-surface-dark);
    border: 1px solid var(--nova-border-subtle);
    padding: 4px 10px;
    border-radius: 4px;
}

/* =========================================
   8. استجابة الأندرويد (تكدس عمودي احترافي)
   ========================================= */
@media (max-width: 760px) {
    .nova-hero-solid {
        min-height: 70vh;
        padding-bottom: 20px;
    }

    /* تغيير التوزيع في الموبايل من أفقي إلى عمودي */
    .nova-hero-content {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    .nova-vignette-solid {
        background: linear-gradient(to top, var(--nova-bg-master) 0%, rgba(3,2,6,0.6) 45%, transparent 100%);
    }

    .nova-poster-main {
        width: 140px;
        margin-top: calc(var(--safe-top, 0px) + 70px);
    }

    .nova-info-stack {
        align-items: center;
    }

    .nova-title-main {
        font-size: 1.8rem;
    }

    .nova-meta-row, .nova-tags-row, .nova-stats-row {
        justify-content: center;
    }

    .nova-plot-main {
        font-size: 0.8rem;
        -webkit-line-clamp: 4;
        text-align: center;
    }

    .nova-action-row {
        justify-content: center;
        width: 100%;
    }

    .nova-btn-primary {
        width: 100%;
        justify-content: center;
    }

    .nova-content-flow {
        padding-top: 24px;
        gap: 32px;
    }

    .nova-related-section::before {
        inset-inline: -8px;
        height: 140px;
        opacity: 0.8;
    }

    .nova-related-head {
        align-items: flex-start;
        gap: 12px;
    }

    .related-total {
        padding: 7px 11px;
        font-size: 0.62rem;
    }

    .nova-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }

    .related-poster-shell {
        border-radius: 20px;
    }

    .related-card-info {
        padding-top: 10px;
    }

    .related-card-info strong {
        font-size: 0.76rem;
    }

    .related-card-info small {
        font-size: 0.62rem;
    }

    .related-card-tags span:nth-child(n+3) {
        display: none;
    }

    /* تحويل الحلقات إلى نمط القائمة (List) لتسهيل التصفح بالهاتف */
    .nova-episode-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .nova-episode-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px;
        border-radius: 6px;
    }

    .ep-thumb {
        width: 130px;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .ep-details {
        padding: 0;
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ep-header {
        flex-direction: column;
        margin-bottom: 4px;
        gap: 6px;
    }

        .ep-header strong {
            font-size: 0.75rem;
        }

    .nova-search-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .search-solid-input {
        width: 100%;
    }
}


/* Skeleton تفصيلي بدون شاشة التحميل القديمة */
.details-skeleton-page {
    min-height: 100dvh;
    position: relative;
    overflow: hidden;
    background: #030206;
    padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px));
}

.details-skeleton-backdrop {
    position: absolute;
    inset: 0;
    min-height: 64vh;
    opacity: .92;
}

.details-skeleton-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 28%, rgba(155,77,255,.28), transparent 32%),
        radial-gradient(circle at 22% 58%, rgba(20,215,255,.18), transparent 30%),
        linear-gradient(to top, #030206 0%, rgba(3,2,6,.72) 44%, rgba(3,2,6,.15) 100%);
}

.details-skeleton-content {
    position: relative;
    z-index: 2;
    min-height: 78vh;
    display: grid;
    grid-template-columns: minmax(170px, 250px) minmax(0, 1fr);
    gap: clamp(18px, 4vw, 34px);
    align-items: end;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(120px, 24vh, 230px) var(--page-pad) 56px;
}

.details-skeleton-poster {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0,0,0,.58);
}

.details-skeleton-copy {
    display: grid;
    gap: 14px;
    max-width: 620px;
}

.details-skeleton-pill,
.details-skeleton-title,
.details-skeleton-line,
.details-skeleton-actions b {
    display: block;
    border-radius: 999px;
}

.details-skeleton-pill { width: 120px; height: 13px; }
.details-skeleton-title { width: min(520px, 78vw); height: 44px; }
.details-skeleton-line { width: min(460px, 70vw); height: 13px; }
.details-skeleton-line.short { width: min(320px, 54vw); }
.details-skeleton-actions { display: flex; gap: 12px; margin-top: 10px; }
.details-skeleton-actions b { width: 132px; height: 46px; }

.details-shimmer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, #090814 0%, #15132b 33%, #221a46 48%, #11142d 62%, #090814 100%);
    background-size: 240% 100%;
    animation: details-shimmer 1.16s linear infinite;
}

@keyframes details-shimmer { to { background-position-x: -240%; } }

@media (max-width: 760px) {
    .details-skeleton-content {
        grid-template-columns: 1fr;
        align-items: end;
        padding-top: 42vh;
    }
    .details-skeleton-poster {
        display: none;
    }
}

/* Cinematic mobile details — reference layout */
.cinematic-details-page {
    position: relative;
    min-height: 100dvh;
    overflow-x: hidden;
    background: #01030a;
    color: #fff;
    padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, 0px) + 24px);
}

.cinematic-details-page .nova-details-topbar {
    position: fixed !important;
    z-index: 980 !important;
    top: calc(var(--safe-top, 0px) + 10px) !important;
    right: 14px !important;
    left: 14px !important;
    width: auto !important;
    pointer-events: none;
}

.cinematic-details-page .nova-details-topbar .nova-icon-btn {
    pointer-events: auto;
    border: 0;
    background: rgba(1, 4, 12, .34);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cinematic-details-hero {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: clamp(540px, 56dvh, 790px);
    overflow: hidden;
    background: #050713;
}

.cinematic-details-backdrop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(1.08) contrast(1.05);
}

.cinematic-details-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(1, 3, 10, .04) 0%, rgba(1, 3, 10, .04) 50%, rgba(1, 3, 10, .72) 78%, #01030a 100%),
        linear-gradient(90deg, rgba(1, 3, 10, .14), transparent 24%, transparent 76%, rgba(1, 3, 10, .14));
}

.cinematic-details-content {
    position: relative;
    z-index: 2;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: clamp(470px, 51dvh, 700px) clamp(18px, 5vw, 42px) 0;
    box-sizing: border-box;
    text-align: center;
}

.cinematic-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, .78);
    font-size: .92rem;
}

.cinematic-eyebrow span {
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: linear-gradient(145deg, #7744ff, #1b9eff);
    transform: rotate(45deg);
    box-shadow: 0 0 16px rgba(68, 105, 255, .5);
}

.cinematic-eyebrow b { font-weight: 500; }

.cinematic-title {
    margin: 11px 0 16px;
    color: #f4e9e5;
    font-size: clamp(3rem, 10vw, 6.4rem);
    line-height: .96;
    font-weight: 900;
    letter-spacing: -.055em;
    text-shadow: 0 9px 32px rgba(0, 0, 0, .84);
}

.cinematic-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    color: rgba(255, 255, 255, .63);
    font-size: .9rem;
}

.cinematic-meta > * {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 13px;
    border-inline-start: 1px solid rgba(255, 255, 255, .20);
}

.cinematic-meta > *:first-child { border-inline-start: 0; }
.cinematic-quality { color: #9e39ff; font-size: 1.02rem; font-weight: 900; font-style: italic; }
.cinematic-age { border: 1px solid rgba(255, 255, 255, .34) !important; border-radius: 6px; margin-inline: 7px; padding-inline: 8px !important; min-height: 26px !important; color: rgba(255, 255, 255, .8); }

.cinematic-ranking {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
}

.cinematic-ranking span {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(130, 146, 183, .28);
    border-radius: 8px;
    background: rgba(3, 7, 17, .52);
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
}

.cinematic-ranking span:first-child { direction: ltr; }
.cinematic-ranking span:first-child .oscar-icon { color: #9b36ff; }

.cinematic-story {
    margin-top: 27px;
    text-align: right;
}

.cinematic-story h2 {
    margin: 0 0 10px;
    font-size: 1.24rem;
    font-weight: 900;
}

.cinematic-story p {
    margin: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .68);
    font-size: clamp(.9rem, 2.8vw, 1.06rem);
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.cinematic-story p.expanded { display: block; overflow: visible; }

.cinematic-story button {
    margin-top: 4px;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: #b83bff;
    font-size: .95rem;
    font-weight: 800;
}

.cinematic-actions {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 110px 110px minmax(260px, 1fr);
    align-items: center;
    gap: 14px;
    direction: ltr;
}

.cinematic-secondary-action {
    min-height: 78px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .88);
}

.cinematic-secondary-action span { font-size: .78rem; }

.cinematic-watch-button {
    height: 64px;
    padding: 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 0;
    border-radius: 32px;
    color: #fff;
    background: linear-gradient(100deg, #b521ff 0%, #7440ff 47%, #159eff 100%);
    box-shadow: 0 12px 32px rgba(82, 63, 255, .36), 0 0 18px rgba(46, 145, 255, .18);
    font-size: 1.2rem;
    font-weight: 850;
    direction: rtl;
}

.cinematic-tabs {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.cinematic-tabs button {
    position: relative;
    min-height: 58px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .57);
    font-size: .96rem;
    font-weight: 700;
}

.cinematic-tabs button.active { color: #fff; font-weight: 900; }
.cinematic-tabs button.active::after {
    content: "";
    position: absolute;
    right: 22%;
    bottom: -1px;
    left: 22%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c02cff, #1da0ff);
}

.cinematic-tab-content {
    padding: 24px 0 30px;
    text-align: right;
}

.cinematic-tab-content .nova-content-section { margin: 0; }
.cinematic-tab-content .nova-section-head { margin-bottom: 14px; }
.cinematic-tab-content .nova-section-head h2 { font-size: 1rem; }
.cinematic-genre-pills { margin-bottom: 24px; }
.cinematic-cast-section { margin-top: 24px !important; }

.cinematic-tab-content .episode-panel > .nova-section-head {
    display: none;
}

.cinematic-tab-content .nova-season-tabs {
    margin-bottom: 14px;
}

.cinematic-tab-content .nova-search-bar {
    margin-bottom: 14px;
}

.cinematic-tab-content .nova-episode-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.cinematic-tab-content .nova-episode-card {
    min-height: 150px;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 44px;
    grid-template-areas: "thumb details actions";
    align-items: stretch;
    direction: ltr;
    border: 1px solid rgba(128, 149, 185, .25);
    border-radius: 17px;
    background: linear-gradient(90deg, rgba(5, 10, 19, .98), rgba(3, 7, 15, .96));
    box-shadow: none;
}

.cinematic-tab-content .nova-episode-card:hover { transform: none; }
.cinematic-tab-content .ep-thumb { grid-area: thumb; aspect-ratio: auto; min-height: 150px; margin: 12px; border-radius: 10px; overflow: hidden; }
.cinematic-tab-content .ep-overlay { opacity: 1; background: rgba(0, 0, 0, .22); }
.cinematic-tab-content .play-ring { width: 48px; height: 48px; background: rgba(0, 0, 0, .56); border: 1px solid rgba(255,255,255,.5); }
.cinematic-tab-content .ep-details { grid-area: details; min-width: 0; padding: 20px 10px; direction: rtl; text-align: right; }
.cinematic-tab-content .ep-header { margin: 0; }
.cinematic-tab-content .ep-header > div:first-child { min-width: 0; display: grid; gap: 5px; }
.cinematic-tab-content .ep-header small { color: rgba(255,255,255,.52); font-size: .72rem; }
.cinematic-tab-content .ep-header strong { overflow: hidden; color: #fff; font-size: 1.06rem; text-overflow: ellipsis; white-space: nowrap; }
.cinematic-tab-content .ep-details p { margin: 12px 0 0; overflow: hidden; color: rgba(255,255,255,.58); font-size: .78rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cinematic-tab-content .ep-badges { display: none; }
.cinematic-tab-content .ep-card-actions { grid-area: actions; padding: 20px 7px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 19px; color: rgba(255,255,255,.7); }

@media (max-width: 680px) {
    .cinematic-details-hero { height: clamp(510px, 54dvh, 690px); }
    .cinematic-details-content { padding: clamp(455px, 49dvh, 610px) 16px 0; }
    .cinematic-title { font-size: clamp(2.65rem, 12.6vw, 4.7rem); }
    .cinematic-meta { font-size: .76rem; }
    .cinematic-meta > * { padding-inline: 9px; }
    .cinematic-ranking span { min-height: 38px; padding-inline: 11px; font-size: .72rem; }
    .cinematic-story { margin-top: 22px; }
    .cinematic-actions { grid-template-columns: 74px 74px minmax(0, 1fr); gap: 8px; }
    .cinematic-secondary-action { min-height: 68px; }
    .cinematic-secondary-action span { font-size: .7rem; }
    .cinematic-watch-button { height: 58px; padding-inline: 20px; font-size: 1.04rem; }
    .cinematic-tabs { margin-top: 18px; }
    .cinematic-tabs button { min-height: 52px; font-size: .84rem; }
    .cinematic-tab-content { padding-top: 18px; }
    .cinematic-tab-content .nova-search-bar { display: grid; gap: 10px; }
    .cinematic-tab-content .search-solid-input { width: 100%; }
    .cinematic-tab-content .nova-episode-card { min-height: 134px; grid-template-columns: 104px minmax(0, 1fr) 38px; }
    .cinematic-tab-content .ep-thumb { min-height: 110px; margin: 11px; }
    .cinematic-tab-content .ep-details { padding: 16px 6px; }
    .cinematic-tab-content .ep-header strong { font-size: .94rem; }
    .cinematic-tab-content .ep-details p { margin-top: 8px; font-size: .7rem; }
    .cinematic-tab-content .ep-card-actions { padding-inline: 4px; }
}

@media (min-width: 900px) {
    .cinematic-details-backdrop { object-position: center 22%; }
    .cinematic-details-content { padding-inline: 54px; }
}

/* =========================================================
   Reference details layout — desktop + Android (2026-07)
   Keeps the existing details header/topbar untouched.
   ========================================================= */
.cinematic-details-page {
    --details-panel: rgba(2, 5, 11, .90);
    --details-panel-soft: rgba(7, 10, 17, .88);
    --details-line: rgba(151, 165, 190, .28);
    --details-muted: rgba(255, 255, 255, .62);
    --details-gradient: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
    position: relative;
    min-height: 100dvh;
    padding-bottom: calc(82px + var(--safe-bottom, 0px));
    overflow: hidden;
    background: #000;
}

.cinematic-details-hero {
    position: relative;
    z-index: 0;
    width: 100%;
    height: clamp(330px, 38vw, 450px);
    overflow: hidden;
    background: #02040a;
}

.cinematic-details-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    filter: saturate(1.03) contrast(1.04);
}

.cinematic-details-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .08) 52%, rgba(0, 0, 0, .88) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .88) 25%, rgba(0, 0, 0, .42) 52%, rgba(0, 0, 0, .08) 78%, rgba(0, 0, 0, .18) 100%);
}

.cinematic-hero-copy {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: clamp(34px, 4vw, 64px);
    width: min(46vw, 510px);
    padding-top: clamp(48px, 6vh, 78px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    direction: rtl;
    text-align: right;
}

.cinematic-eyebrow {
    justify-content: flex-start;
    gap: 9px;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(.76rem, 1.05vw, .94rem);
}

.cinematic-eyebrow span {
    width: 9px;
    height: 9px;
    border-radius: 1px;
}

.cinematic-title {
    margin: 10px 0 13px;
    max-width: 100%;
    color: #fff;
    font-size: clamp(2.7rem, 5.2vw, 5rem);
    line-height: .98;
    font-weight: 950;
    letter-spacing: -.045em;
    text-align: right;
    text-shadow: 0 8px 28px rgba(0, 0, 0, .9);
}

.cinematic-meta {
    justify-content: flex-start;
    gap: 8px;
    font-size: .78rem;
}

.cinematic-meta > * {
    min-height: 29px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 5px;
    color: rgba(255, 255, 255, .86);
    background: rgba(0, 0, 0, .23);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.cinematic-meta > *:first-child {
    border-inline-start: 1px solid rgba(255, 255, 255, .35);
}

.cinematic-age {
    margin: 0;
    min-height: 29px !important;
    padding-inline: 12px !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
}

.cinematic-ranking {
    margin-top: 10px;
    justify-content: flex-start;
    gap: 8px;
}

.cinematic-ranking span {
    min-height: 31px;
    padding: 0 12px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .28);
    font-size: .75rem;
}

.cinematic-ranking span:first-child {
    color: #fff;
}

.cinematic-ranking span:last-child {
    border-color: transparent;
    background:
        linear-gradient(#05070d, #05070d) padding-box,
        linear-gradient(100deg, #c000ff, #139cff) border-box;
    border: 1px solid transparent;
    color: #d950ff;
}

.cinematic-actions {
    width: 100%;
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    direction: ltr;
}

.cinematic-watch-button {
    width: clamp(205px, 21vw, 245px);
    height: 55px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--details-gradient);
    box-shadow: 0 12px 30px rgba(85, 48, 255, .32);
    font-size: 1rem;
}

.cinematic-secondary-action {
    width: 58px;
    min-height: 70px;
    padding: 0;
    gap: 5px;
    direction: rtl;
}

.cinematic-secondary-action > .oscar-icon {
    width: 48px;
    height: 48px;
    padding: 11px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .50);
    border-radius: 50%;
    background: rgba(0, 0, 0, .25);
}

.cinematic-secondary-action span {
    font-size: .68rem;
    color: rgba(255, 255, 255, .82);
}

.cinematic-secondary-action.active > .oscar-icon {
    border-color: rgba(155,77,255,.72);
    color: #fff;
    background: linear-gradient(135deg, rgba(240,74,216,.28), rgba(155,77,255,.30) 52%, rgba(20,215,255,.22));
    box-shadow: 0 0 0 1px rgba(155,77,255,.12), 0 8px 22px rgba(83,43,170,.18);
}

.cinematic-secondary-action.active span {
    color: rgba(255,255,255,.96);
    font-weight: 800;
}

.cinematic-details-content {
    position: relative;
    z-index: 3;
    width: min(100% - 64px, 1080px);
    margin: 0 auto;
    padding: 0 0 34px;
    text-align: right;
    box-sizing: border-box;
}

.cinematic-tabs {
    margin: 0;
    min-height: 52px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.cinematic-tabs button {
    min-height: 52px;
    font-size: .93rem;
}

.cinematic-tabs button.active::after {
    right: 30%;
    left: 30%;
    height: 3px;
}

.cinematic-desktop-content {
    display: block;
    padding-top: 10px;
}

.cinematic-mobile-content {
    display: none;
}

.reference-desktop-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 16px;
    align-items: start;
    direction: ltr;
}

.reference-primary-column,
.reference-side-column,
.reference-wide-details-grid {
    min-width: 0;
    direction: rtl;
}

.reference-side-column {
    display: grid;
    gap: 12px;
}

.reference-wide-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    gap: 16px;
    align-items: start;
}

.reference-panel {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--details-line);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(3, 6, 12, .96), rgba(0, 2, 7, .98));
    box-shadow: 0 15px 45px rgba(0, 0, 0, .18);
}

.reference-panel-heading {
    min-height: 25px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
}

.reference-panel-heading h2 {
    margin: 0;
    color: #fff;
    font-size: .98rem;
    font-weight: 900;
}

.reference-panel-heading span {
    color: #149cff;
    font-size: .72rem;
    font-weight: 800;
}

.reference-season-tabs {
    margin: -1px 0 9px;
    padding-bottom: 4px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

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

.reference-season-tabs button {
    min-height: 28px;
    padding: 0 10px;
    flex: 0 0 auto;
    border: 1px solid rgba(133, 151, 181, .28);
    border-radius: 6px;
    background: rgba(9, 13, 22, .78);
    color: rgba(255, 255, 255, .66);
    font-size: .68rem;
}

.reference-season-tabs button.active {
    border-color: transparent;
    background:
        linear-gradient(#070a11, #070a11) padding-box,
        linear-gradient(100deg, #c000ff, #139cff) border-box;
    color: #fff;
}

.reference-episode-list {
    display: grid;
    gap: 8px;
}

.reference-episode-card {
    min-height: 65px;
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 58px 36px;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(137, 153, 180, .20);
    border-radius: 9px;
    background: rgba(1, 4, 9, .92);
    direction: ltr;
    cursor: pointer;
}

.reference-episode-card:hover {
    border-color: rgba(91, 119, 188, .62);
    background: rgba(5, 8, 16, .98);
}

.reference-episode-thumb {
    position: relative;
    min-height: 65px;
    overflow: hidden;
}

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

.reference-episode-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .12);
}

.reference-play-ring {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    transform: translate(-50%, -50%);
}

.reference-episode-copy {
    min-width: 0;
    padding: 10px 12px;
    align-self: center;
    direction: rtl;
    text-align: right;
}

.reference-episode-copy strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-episode-copy p {
    margin: 4px 0 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .55);
    font-size: .62rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.reference-episode-duration {
    align-self: center;
    display: grid;
    gap: 2px;
    direction: rtl;
    text-align: center;
    color: rgba(255, 255, 255, .75);
    font-size: .6rem;
}

.reference-episode-duration small {
    color: rgba(255, 255, 255, .58);
    font-size: .58rem;
}

.reference-download-icon {
    display: grid;
    place-items: center;
    border-left: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .78);
}

.reference-show-all {
    margin-top: 10px;
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: #bd36ff;
    font-size: .74rem;
    font-weight: 850;
}

.reference-related-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.reference-related-card {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 4px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.reference-related-card img {
    width: 100%;
    aspect-ratio: 2 / 2.7;
    object-fit: cover;
    border: 1px solid rgba(126, 145, 178, .24);
    border-radius: 8px;
    background: #090d16;
}

.reference-related-card strong {
    overflow: hidden;
    color: #fff;
    font-size: .68rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-related-card small {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #f3b700;
    font-size: .58rem;
    direction: ltr;
    justify-self: end;
}

.reference-info-grid {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.reference-info-grid > div {
    min-width: 0;
    padding: 4px 8px 9px;
    border-inline-start: 1px solid rgba(255, 255, 255, .07);
    text-align: center;
}

.reference-info-grid > div:first-child {
    border-inline-start: 0;
}

.reference-info-grid dt {
    color: rgba(255, 255, 255, .57);
    font-size: .61rem;
}

.reference-info-grid dd {
    margin: 3px 0 0;
    overflow: hidden;
    color: #fff;
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-details-story {
    margin: 9px 0 0;
    color: rgba(255, 255, 255, .67);
    font-size: .68rem;
    line-height: 1.7;
}

.reference-cast-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.reference-cast-section h3 {
    margin: 0 0 11px;
    font-size: .92rem;
}

.reference-details-sources,
.reference-watch-panel .nova-content-section {
    margin-top: 18px;
}

.reference-watch-panel {
    padding: 15px;
}

.reference-watch-panel > .nova-content-section,
.reference-details-sources > .nova-content-section {
    margin-inline: 0;
}

@media (max-width: 820px) {
    .cinematic-details-page {
        padding-bottom: calc(78px + var(--safe-bottom, 0px));
    }

    .cinematic-details-hero {
        height: auto;
        min-height: 450px;
        overflow: visible;
    }

    .cinematic-details-backdrop {
        height: 270px;
        object-position: center top;
    }

    .cinematic-details-shade {
        height: 355px;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .06) 43%, rgba(0, 0, 0, .93) 78%, #000 100%),
            linear-gradient(90deg, rgba(0, 0, 0, .16), transparent 45%, rgba(0, 0, 0, .12));
    }

    .cinematic-hero-copy {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        min-height: 450px;
        padding: 230px 15px 18px;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }

    .cinematic-eyebrow,
    .cinematic-meta,
    .cinematic-ranking {
        justify-content: center;
    }

    .cinematic-title {
        margin: 8px 0 12px;
        font-size: clamp(2rem, 10vw, 3.25rem);
        text-align: center;
    }

    .cinematic-meta {
        gap: 6px;
    }

    .cinematic-meta > *,
    .cinematic-age {
        min-height: 28px !important;
        padding-inline: 10px !important;
        font-size: .7rem;
    }

    .cinematic-ranking {
        margin-top: 9px;
    }

    .cinematic-ranking span {
        min-height: 30px;
        padding-inline: 10px;
        font-size: .68rem;
    }

    .cinematic-actions {
        margin-top: 15px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        direction: ltr;
    }

    .cinematic-watch-button {
        width: 100%;
        height: 48px;
        grid-column: 1 / -1;
        grid-row: 1;
        border-radius: 7px;
        font-size: .94rem;
    }

    .cinematic-secondary-action {
        width: 100%;
        min-height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid rgba(255, 255, 255, .26);
        border-radius: 7px;
        background: rgba(0, 0, 0, .26);
    }

    .cinematic-secondary-action > .oscar-icon {
        width: 22px;
        height: 22px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .cinematic-secondary-action span {
        font-size: .73rem;
    }

    .cinematic-details-content {
        width: 100%;
        padding: 0 14px 24px;
    }

    .cinematic-tabs {
        position: relative;
        z-index: 5;
    }

    .cinematic-tabs button {
        min-height: 48px;
        font-size: .78rem;
    }

    .cinematic-desktop-content {
        display: none;
    }

    .cinematic-mobile-content {
        display: block;
        padding-top: 10px;
    }

    .reference-panel {
        padding: 10px 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .reference-panel-heading {
        padding-inline: 2px;
    }

    .reference-episode-card {
        min-height: 66px;
        grid-template-columns: 96px minmax(0, 1fr) 49px 31px;
        border-radius: 8px;
    }

    .reference-episode-thumb {
        min-height: 66px;
    }

    .reference-play-ring {
        width: 38px;
        height: 38px;
    }

    .reference-episode-copy {
        padding: 8px 9px;
    }

    .reference-episode-copy strong {
        font-size: .76rem;
    }

    .reference-episode-copy p {
        font-size: .58rem;
        -webkit-line-clamp: 2;
    }

    .reference-episode-duration {
        font-size: .56rem;
    }

    .reference-episode-duration small {
        font-size: .54rem;
    }

    .reference-related-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 9px;
    }

    .reference-related-card strong {
        font-size: .72rem;
    }

    .reference-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 9px;
        overflow: hidden;
    }

    .reference-info-grid > div {
        padding: 10px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .reference-info-grid > div:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .reference-details-story {
        margin-top: 13px;
        font-size: .76rem;
        line-height: 1.75;
    }
}

@media (max-width: 390px) {
    .cinematic-details-backdrop {
        height: 235px;
    }

    .cinematic-details-shade {
        height: 315px;
    }

    .cinematic-hero-copy {
        min-height: 425px;
        padding-top: 202px;
    }

    .cinematic-title {
        font-size: 2rem;
    }

    .cinematic-meta > *,
    .cinematic-age {
        min-height: 26px !important;
        padding-inline: 8px !important;
        font-size: .64rem;
    }

    .cinematic-ranking span {
        padding-inline: 8px;
        font-size: .62rem;
    }

    .reference-episode-card {
        grid-template-columns: 88px minmax(0, 1fr) 30px;
    }

    .reference-episode-duration {
        display: none;
    }

    .reference-episode-copy p {
        -webkit-line-clamp: 1;
    }
}

/* =========================================================
   Full-screen details distribution + taller Android hero
   ========================================================= */
@media (min-width: 821px) {
    .cinematic-details-page {
        overflow-x: hidden;
    }

    .cinematic-details-hero {
        height: clamp(440px, 43vw, 640px);
        min-height: 440px;
    }

    .cinematic-details-backdrop {
        object-position: center 24%;
    }

    .cinematic-details-shade {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .03) 0%, rgba(0, 0, 0, .06) 58%, rgba(0, 0, 0, .86) 100%),
            linear-gradient(90deg, rgba(0, 0, 0, .99) 0%, rgba(0, 0, 0, .92) 20%, rgba(0, 0, 0, .58) 43%, rgba(0, 0, 0, .10) 72%, rgba(0, 0, 0, .13) 100%);
    }

    .cinematic-hero-copy {
        left: clamp(42px, 5vw, 96px);
        width: min(39vw, 620px);
        padding-top: clamp(62px, 7vh, 102px);
    }

    .cinematic-title {
        font-size: clamp(3.2rem, 5.5vw, 5.8rem);
    }

    .cinematic-details-content {
        width: calc(100% - clamp(42px, 6vw, 104px));
        max-width: 1720px;
        margin-inline: auto;
        padding-bottom: 48px;
    }

    .cinematic-tabs {
        min-height: 58px;
    }

    .cinematic-tabs button {
        min-height: 58px;
        font-size: 1rem;
    }

    .cinematic-desktop-content {
        padding-top: clamp(14px, 1.7vw, 26px);
    }

    .reference-desktop-grid {
        grid-template-columns: minmax(560px, 1.22fr) minmax(430px, .78fr);
        gap: clamp(18px, 2vw, 32px);
    }

    .reference-wide-details-grid {
        grid-template-columns: minmax(620px, 1.28fr) minmax(420px, .72fr);
        gap: clamp(18px, 2vw, 32px);
    }

    .reference-side-column {
        gap: clamp(15px, 1.5vw, 24px);
    }

    .reference-panel {
        padding: clamp(17px, 1.6vw, 26px);
        border-radius: 15px;
    }

    .reference-panel-heading {
        min-height: 31px;
        margin-bottom: 13px;
    }

    .reference-panel-heading h2 {
        font-size: clamp(1rem, 1.25vw, 1.2rem);
    }

    .reference-episode-list {
        gap: 10px;
    }

    .reference-episode-card {
        min-height: 82px;
        grid-template-columns: clamp(120px, 10vw, 160px) minmax(0, 1fr) 70px 44px;
        border-radius: 11px;
    }

    .reference-episode-thumb {
        min-height: 82px;
    }

    .reference-episode-copy {
        padding: 13px 16px;
    }

    .reference-episode-copy strong {
        font-size: .93rem;
    }

    .reference-episode-copy p {
        font-size: .7rem;
    }

    .reference-related-strip {
        gap: 12px;
    }

    .reference-related-card strong {
        font-size: .76rem;
    }

    .reference-info-grid dt {
        font-size: .68rem;
    }

    .reference-info-grid dd {
        font-size: .76rem;
    }

    .reference-details-story {
        font-size: .78rem;
        line-height: 1.82;
    }
}

@media (min-width: 1500px) {
    .reference-desktop-grid {
        grid-template-columns: minmax(720px, 1.32fr) minmax(500px, .68fr);
    }

    .reference-related-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .cinematic-details-hero {
        min-height: clamp(700px, 88dvh, 860px);
    }

    .cinematic-details-backdrop {
        height: clamp(500px, 64dvh, 620px);
        object-position: center top;
    }

    .cinematic-details-shade {
        height: clamp(620px, 78dvh, 760px);
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .01) 0%, rgba(0, 0, 0, .04) 52%, rgba(0, 0, 0, .86) 76%, #000 100%),
            linear-gradient(90deg, rgba(0, 0, 0, .10), transparent 50%, rgba(0, 0, 0, .08));
    }

    .cinematic-hero-copy {
        min-height: clamp(700px, 88dvh, 860px);
        padding: clamp(455px, 59dvh, 565px) 15px 20px;
    }
}

@media (max-width: 390px) {
    .cinematic-details-hero {
        min-height: 680px;
    }

    .cinematic-details-backdrop {
        height: 470px;
    }

    .cinematic-details-shade {
        height: 590px;
    }

    .cinematic-hero-copy {
        min-height: 680px;
        padding-top: 425px;
    }
}

/* =========================================================
   Android hero correction — compact cinematic overlap
   Final override: eliminates the empty gap under the artwork.
   ========================================================= */
@media (max-width: 820px) {
    .cinematic-details-page {
        background: #000000 !important;
    }

    .cinematic-details-hero {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #000000 !important;
    }

    .cinematic-details-backdrop {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: clamp(450px, 66dvh, 660px) !important;
        min-height: 450px !important;
        object-fit: cover !important;
        object-position: center 18% !important;
        background: #000000 !important;
    }

    .cinematic-details-shade {
        position: absolute !important;
        z-index: 1 !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: clamp(450px, 66dvh, 660px) !important;
        background:
            linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.04) 44%, rgba(0,0,0,.38) 69%, rgba(0,0,0,.92) 91%, #000 100%),
            linear-gradient(90deg, rgba(0,0,0,.14), transparent 46%, rgba(0,0,0,.12)) !important;
        pointer-events: none;
    }

    .cinematic-hero-copy {
        position: relative !important;
        z-index: 2 !important;
        inset: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: clamp(-190px, -21dvh, -138px) 0 0 !important;
        padding: clamp(150px, 18dvh, 188px) 16px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 37%, #000 74%) !important;
        box-sizing: border-box !important;
    }

    .cinematic-eyebrow {
        margin: 0 0 6px !important;
        font-size: .72rem !important;
    }

    .cinematic-title {
        width: min(100%, 680px) !important;
        margin: 5px auto 12px !important;
        font-size: clamp(1.85rem, 8.4vw, 2.85rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -.025em !important;
        overflow-wrap: anywhere !important;
        text-wrap: balance;
    }

    .cinematic-meta {
        gap: 6px !important;
    }

    .cinematic-meta > *,
    .cinematic-age {
        min-height: 27px !important;
        padding-inline: 9px !important;
        font-size: .67rem !important;
    }

    .cinematic-ranking {
        margin-top: 8px !important;
    }

    .cinematic-ranking span {
        min-height: 31px !important;
        padding-inline: 10px !important;
        font-size: .66rem !important;
        background: #000000 !important;
    }

    .cinematic-actions {
        width: 100% !important;
        margin-top: 15px !important;
    }

    .cinematic-details-content {
        position: relative !important;
        z-index: 3 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        background: #000000 !important;
    }
}

@media (max-width: 390px) {
    .cinematic-details-backdrop,
    .cinematic-details-shade {
        height: clamp(430px, 64dvh, 570px) !important;
        min-height: 430px !important;
    }

    .cinematic-hero-copy {
        margin-top: -155px !important;
        padding-top: 128px !important;
    }

    .cinematic-title {
        font-size: clamp(1.68rem, 8.1vw, 2.25rem) !important;
    }
}

/* Nova Aperture replaces the old large detail skeleton without changing the details header or content layout. */
.details-motion-loading {
    min-height: 100dvh;
    padding-top: calc(72px + var(--safe-top, env(safe-area-inset-top, 0px)));
    box-sizing: border-box;
    background: transparent !important;
    overflow: hidden;
}

.details-motion-loading .nova-motion-loader {
    min-height: 100dvh;
}

/* ==========================================================
   Channel details — dedicated Windows / Android experience
   ========================================================== */
.nova-channel-details {
    min-height: 100dvh;
    padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, 0px) + 24px);
    background: #000;
    color: #fff;
}

.channel-detail-hero {
    position: relative;
    min-height: clamp(560px, 72dvh, 820px);
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #000;
}

.channel-detail-backdrop,
.channel-detail-backdrop img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.channel-detail-backdrop img,
img.channel-detail-backdrop {
    object-fit: cover !important;
    object-position: center 28% !important;
    filter: saturate(.92) contrast(1.05) brightness(.72);
}

.channel-detail-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.52) 48%, #000 100%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12) 48%, #000 100%);
}

.channel-detail-hero-inner {
    position: relative;
    z-index: 4;
    width: min(100% - clamp(32px, 8vw, 120px), 1560px);
    min-height: inherit;
    margin: 0 auto;
    padding: clamp(112px, 14vh, 150px) 0 clamp(48px, 7vh, 78px);
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.15fr);
    align-items: end;
    gap: clamp(38px, 6vw, 92px);
    direction: ltr;
}

.channel-detail-identity,
.channel-detail-copy {
    direction: rtl;
}

.channel-detail-identity {
    display: grid;
    place-items: end start;
}

.channel-detail-logo-shell {
    position: relative;
    width: min(34vw, 370px);
    aspect-ratio: 1.3 / 1;
    padding: clamp(18px, 2.4vw, 30px);
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 26px;
    background:
        linear-gradient(#000,#000) padding-box,
        linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
    box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 48px rgba(103,71,255,.14);
}

.channel-detail-logo,
.channel-detail-logo img {
    width: 100% !important;
    height: 100% !important;
}

.channel-detail-logo img,
img.channel-detail-logo {
    object-fit: contain !important;
}

.channel-detail-live-mark {
    position: absolute;
    right: 16px;
    bottom: 14px;
    height: 31px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    background: #000;
    color: #fff;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .08em;
}

.channel-detail-live-mark i,
.channel-status-heading span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F04AD8;
    box-shadow: 0 0 0 4px rgba(240,74,216,.14), 0 0 16px rgba(240,74,216,.7);
    animation: channel-live-pulse 1.7s ease-in-out infinite;
}

.channel-detail-copy {
    align-self: end;
    max-width: 720px;
}

.channel-detail-eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
    color: #14D7FF;
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.channel-detail-copy h1 {
    margin: 0;
    max-width: 100%;
    color: #fff;
    font-size: clamp(2.5rem, 5.4vw, 5.2rem);
    line-height: .98;
    font-weight: 1000;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.channel-detail-meta {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.channel-detail-meta span {
    min-height: 31px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    background: #000;
    color: rgba(255,255,255,.78);
    font-size: .72rem;
    font-weight: 800;
}

.channel-detail-copy p {
    max-width: 680px;
    margin: 18px 0 0;
    color: rgba(255,255,255,.68);
    font-size: clamp(.84rem,1.25vw,1rem);
    line-height: 1.8;
}

.channel-detail-actions {
    margin-top: 26px;
    display: flex;
    gap: 12px;
}

.channel-detail-actions button {
    min-height: 52px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 10px;
    color: #fff;
    font: inherit;
    font-weight: 950;
}

.channel-detail-play {
    min-width: 220px;
    border: 0;
    background: linear-gradient(100deg,#c728ff,#7650ff,#16a8ff);
    box-shadow: 0 15px 38px rgba(99,74,255,.25);
}

.channel-detail-save {
    border: 1px solid rgba(255,255,255,.2);
    background: #000;
}

.channel-detail-save.active {
    border-color: transparent;
    background: linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
}

.channel-detail-body {
    width: min(100% - clamp(28px, 7vw, 104px), 1560px);
    margin: 0 auto;
    padding: 32px 0 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
    gap: 18px;
}

.channel-detail-status-card,
.channel-detail-source-card,
.channel-detail-related {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: #000;
}

.channel-detail-status-card {
    padding: 22px;
}

.channel-status-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.channel-status-heading span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 950;
}

.channel-status-heading small {
    color: rgba(255,255,255,.5);
}

.channel-detail-facts {
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
}

.channel-detail-facts > div {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 12px 8px;
    border-inline-start: 1px solid rgba(255,255,255,.08);
    text-align: center;
}

.channel-detail-facts > div:last-child { border-inline-start: 0; }
.channel-detail-facts .oscar-icon { color: #9B4DFF; }
.channel-detail-facts strong { font-size: .72rem; }
.channel-detail-facts span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.58); font-size: .68rem; }

.channel-detail-source-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}

.channel-detail-source-card > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.channel-source-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    background: linear-gradient(#000,#000) padding-box,linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
    color: #14D7FF;
}

.channel-detail-source-card strong,
.channel-detail-source-card small { display: block; }
.channel-detail-source-card strong { font-size: .88rem; }
.channel-detail-source-card small { margin-top: 5px; color: rgba(255,255,255,.5); font-size: .7rem; }
.channel-detail-source-card > button {
    min-height: 45px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 10px;
    background: #000;
    color: #fff;
    font: inherit;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.channel-detail-related {
    grid-column: 1 / -1;
    padding: 20px;
}

.channel-detail-related .nova-related-section { margin: 0; }

@keyframes channel-live-pulse {
    0%,100% { opacity: .6; transform: scale(.86); }
    50% { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 780px) {
    .nova-channel-details {
        padding-bottom: calc(var(--bottom-nav-h, 72px) + var(--safe-bottom, 0px) + 12px);
    }

    .channel-detail-hero {
        min-height: auto;
        overflow: visible;
        border-bottom: 0;
    }

    .channel-detail-backdrop,
    .channel-detail-backdrop img {
        height: clamp(330px, 53dvh, 540px) !important;
    }

    .channel-detail-backdrop img,
    img.channel-detail-backdrop {
        object-position: center 25% !important;
        filter: saturate(.95) contrast(1.04) brightness(.78);
    }

    .channel-detail-shade {
        height: clamp(330px, 53dvh, 540px);
        bottom: auto;
        background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.16) 58%,#000 100%);
    }

    .channel-detail-hero-inner {
        width: 100%;
        min-height: 0;
        padding: clamp(270px, 45dvh, 440px) 14px 18px;
        display: block;
    }

    .channel-detail-identity {
        display: none;
    }

    .channel-detail-copy {
        max-width: none;
        text-align: center;
    }

    .channel-detail-eyebrow {
        margin-bottom: 10px;
        font-size: .66rem;
    }

    .channel-detail-copy h1 {
        font-size: clamp(2rem, 9vw, 3.2rem);
        line-height: 1.03;
    }

    .channel-detail-meta {
        justify-content: center;
        margin-top: 14px;
    }

    .channel-detail-meta span {
        min-height: 29px;
        padding-inline: 10px;
        font-size: .65rem;
    }

    .channel-detail-copy p {
        margin: 14px auto 0;
        max-width: 560px;
        font-size: .78rem;
        line-height: 1.7;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .channel-detail-actions {
        margin-top: 18px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .channel-detail-actions button {
        min-width: 0;
        min-height: 48px;
        padding-inline: 10px;
        font-size: .78rem;
    }

    .channel-detail-play { grid-column: 1 / -1; }

    .channel-detail-body {
        width: calc(100% - 24px);
        padding-top: 10px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .channel-detail-status-card,
    .channel-detail-source-card,
    .channel-detail-related {
        border-radius: 14px;
    }

    .channel-detail-status-card { padding: 15px; }
    .channel-status-heading { align-items: flex-start; padding-bottom: 13px; }
    .channel-status-heading small { max-width: 46%; text-align: left; font-size: .62rem; }

    .channel-detail-facts {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 0;
        padding-top: 12px;
    }

    .channel-detail-facts > div {
        min-height: 86px;
        border-inline-start: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .channel-detail-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
    .channel-detail-facts > div:nth-child(odd) { border-inline-end: 1px solid rgba(255,255,255,.08); }

    .channel-detail-source-card { padding: 15px; }
    .channel-detail-related { padding: 14px; }

    .nova-channel-details .nova-details-topbar {
        top: calc(var(--safe-top, 0px) + 12px);
        left: 12px;
        right: 12px;
    }
}


/* =========================================================
   FINAL MOBILE DETAILS REPAIR
   Keeps the artwork, floating actions and copy in one coherent hero without
   the opaque toolbar slab or the empty vertical gap introduced by older rules.
   ========================================================= */
@media (max-width: 820px) {
    .cinematic-details-page .nova-details-topbar {
        position: absolute !important;
        top: calc(var(--safe-top, 0px) + 10px) !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        min-height: 44px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .cinematic-details-page .nova-details-topbar .nova-icon-btn {
        width: 42px !important;
        height: 42px !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        border-radius: 50% !important;
        color: #fff !important;
        background: rgba(0,0,0,.28) !important;
        box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .cinematic-details-page .nova-topbar-actions { gap: 8px !important; }

    .cinematic-details-hero {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #000 !important;
    }

    .cinematic-details-backdrop {
        position: relative !important;
        width: 100% !important;
        height: clamp(480px, 68dvh, 700px) !important;
        min-height: 480px !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center 18% !important;
        filter: saturate(1.02) contrast(1.04) brightness(.9) !important;
        background: #000 !important;
    }

    .cinematic-details-shade {
        position: absolute !important;
        z-index: 1 !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
        height: clamp(480px, 68dvh, 700px) !important;
        pointer-events: none !important;
        background:
            linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.02) 36%, rgba(0,0,0,.20) 57%, rgba(0,0,0,.66) 76%, rgba(0,0,0,.94) 91%, #000 100%),
            linear-gradient(90deg, rgba(0,0,0,.16), transparent 34%, transparent 66%, rgba(0,0,0,.14)) !important;
    }

    .cinematic-hero-copy {
        position: relative !important;
        z-index: 2 !important;
        inset: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: clamp(-176px, -19dvh, -132px) 0 0 !important;
        padding: clamp(128px, 15dvh, 160px) 16px 22px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 32%, #000 76%) !important;
    }

    .cinematic-title {
        width: min(100%, 640px) !important;
        margin: 5px auto 11px !important;
        font-size: clamp(1.82rem, 8.2vw, 2.8rem) !important;
        line-height: 1.06 !important;
        overflow-wrap: anywhere !important;
        text-wrap: balance;
    }

    .cinematic-actions {
        width: min(100%, 640px) !important;
        margin-top: 16px !important;
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 9px !important;
        direction: rtl !important;
    }

    .cinematic-watch-button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 52px !important;
        height: 52px !important;
        border-radius: 15px !important;
        font-size: .93rem !important;
    }

    .cinematic-secondary-action {
        min-height: 48px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 13px !important;
        background: #000 !important;
    }

    .cinematic-details-content {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 14px calc(var(--bottom-nav-h,72px) + 22px) !important;
        background: #000 !important;
        box-sizing: border-box !important;
    }

    .cinematic-tabs { margin-top: 4px !important; }
}

@media (max-width: 390px) {
    .cinematic-details-backdrop,
    .cinematic-details-shade {
        height: clamp(440px, 65dvh, 590px) !important;
        min-height: 440px !important;
    }
    .cinematic-hero-copy {
        margin-top: -148px !important;
        padding-top: 116px !important;
    }
}

/* =========================================================
   ANDROID DETAILS HERO — FINAL STRUCTURAL FIX
   - Styles the SafeImage output through a native wrapper, so CSS isolation
     cannot collapse the artwork.
   - Keeps the floating details actions fixed inside the Android safe area.
   - Preserves the desktop layout and all existing interaction logic.
   ========================================================= */
.cinematic-details-backdrop-shell {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #000;
}

.cinematic-details-backdrop-shell .cinematic-details-backdrop-image,
.cinematic-details-backdrop-shell img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 22%;
    background: #000;
    filter: saturate(1.03) contrast(1.04) brightness(.9);
}

@media (max-width: 820px) {
    .cinematic-details-page {
        position: relative !important;
        overflow-x: hidden !important;
        background: #000 !important;
    }

    .cinematic-details-page .nova-details-topbar {
        position: fixed !important;
        z-index: 1400 !important;
        top: calc(var(--safe-top, 0px) + 8px) !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        min-height: 46px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    .cinematic-details-page .nova-details-topbar .nova-icon-btn {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 50% !important;
        background: rgba(0,0,0,.38) !important;
        color: #fff !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.34) !important;
        backdrop-filter: blur(12px) saturate(1.15) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
        pointer-events: auto !important;
    }

    .cinematic-details-page .nova-topbar-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        pointer-events: auto !important;
    }

    .cinematic-details-page .details-title-spacer {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .cinematic-details-hero {
        position: relative !important;
        z-index: 0 !important;
        width: 100% !important;
        height: clamp(680px, 92dvh, 900px) !important;
        min-height: 680px !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .cinematic-details-backdrop-shell {
        position: absolute !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
        height: clamp(540px, 72dvh, 760px) !important;
        min-height: 540px !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .cinematic-details-backdrop-shell .cinematic-details-backdrop-image,
    .cinematic-details-backdrop-shell img {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center 18% !important;
        filter: saturate(1.04) contrast(1.05) brightness(.9) !important;
    }

    .cinematic-details-shade {
        position: absolute !important;
        z-index: 1 !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        background:
            linear-gradient(180deg,
                rgba(0,0,0,.03) 0%,
                rgba(0,0,0,.04) 35%,
                rgba(0,0,0,.18) 52%,
                rgba(0,0,0,.68) 72%,
                rgba(0,0,0,.96) 88%,
                #000 100%),
            linear-gradient(90deg,
                rgba(0,0,0,.16) 0%,
                transparent 28%,
                transparent 72%,
                rgba(0,0,0,.14) 100%) !important;
    }

    .cinematic-hero-copy {
        position: absolute !important;
        z-index: 2 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 170px 16px 24px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        box-sizing: border-box !important;
        text-align: center !important;
        background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.52) 28%, #000 78%) !important;
    }

    .cinematic-title {
        width: min(100%, 640px) !important;
        margin: 6px auto 11px !important;
        font-size: clamp(1.9rem, 8.4vw, 2.9rem) !important;
        line-height: 1.06 !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    .cinematic-eyebrow,
    .cinematic-meta,
    .cinematic-ranking {
        justify-content: center !important;
    }

    .cinematic-actions {
        width: min(100%, 640px) !important;
        margin-top: 16px !important;
    }

    .cinematic-details-content {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        margin: 0 !important;
        padding-top: 0 !important;
        background: #000 !important;
    }
}

@media (max-width: 390px) {
    .cinematic-details-hero {
        height: clamp(640px, 90dvh, 820px) !important;
        min-height: 640px !important;
    }

    .cinematic-details-backdrop-shell {
        height: clamp(500px, 70dvh, 690px) !important;
        min-height: 500px !important;
    }

    .cinematic-hero-copy {
        padding-top: 150px !important;
    }
}


/* =========================================================
   COMMERCIAL DETAILS HEADER — FINAL FIXED LAYER
   Applies to movies, series, episodes and live channels.
   ========================================================= */
.details-app .nova-details-topbar {
    position: fixed !important;
    z-index: 2200 !important;
    top: calc(var(--safe-top, 0px) + 8px) !important;
    right: clamp(12px, 2.2vw, 30px) !important;
    left: clamp(12px, 2.2vw, 30px) !important;
    width: auto !important;
    min-height: 48px !important;
    padding: 3px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.34)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
}
.details-app .nova-details-topbar > strong {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: clamp(.82rem, 1.5vw, 1rem) !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.details-app .nova-details-topbar .details-title-spacer { flex: 1 1 auto !important; }
.details-app .nova-details-topbar .nova-icon-btn,
.details-app .nova-details-topbar .nova-topbar-actions { pointer-events: auto !important; }
.details-app .nova-details-topbar .nova-icon-btn {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(0,0,0,.52) !important;
}
@media (max-width: 640px) {
    .details-app .nova-details-topbar {
        top: calc(var(--safe-top, 0px) + 6px) !important;
        right: 10px !important;
        left: 10px !important;
        min-height: 46px !important;
        padding: 2px 5px !important;
    }
    .details-app .nova-details-topbar .nova-icon-btn { width: 39px !important; height: 39px !important; flex-basis: 39px !important; }
}

/* Current public-catalog rich metadata: real Nova2/TMDB promotional videos. */
.reference-promo-section {
    margin-top: 1.35rem;
}

.reference-promo-section h3 {
    margin: 0 0 .75rem;
}

.reference-promo-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 30vw);
    gap: .85rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding-bottom: .35rem;
}

.reference-promo-card {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    padding: 0;
    cursor: pointer;
    min-width: 0;
}

.reference-promo-card:disabled {
    cursor: default;
    opacity: .7;
}

.reference-promo-art {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, .06);
}

.reference-promo-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reference-promo-play {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(8px);
}

.reference-promo-card strong,
.reference-promo-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-promo-card strong {
    margin-top: .55rem;
    font-size: .94rem;
}

.reference-promo-card small {
    margin-top: .2rem;
    opacity: .7;
}

@media (max-width: 720px) {
    .reference-promo-rail {
        grid-auto-columns: minmax(210px, 76vw);
    }
}

/* NOVA+ 2.53 — inline commercial episode gallery. */
.episode-gallery-shell,
.episode-gallery-panel,
.episode-gallery-card,
.episode-gallery-collapsed,
.episode-gallery-expanded-layout,
.episode-source-card,
.episode-source-login,
.episode-source-error,
.episode-source-empty,
.episode-gallery-loading,
.episode-gallery-empty {
    background: #000000;
}

.episode-gallery-panel {
    width: 100%;
    min-width: 0;
}

.episode-gallery-header {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.episode-gallery-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.episode-gallery-heading h2 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.35;
    font-weight: 850;
    color: rgba(255,255,255,.96);
}

.episode-gallery-heading span {
    font-size: .78rem;
    color: rgba(255,255,255,.56);
    white-space: nowrap;
}

.episode-gallery-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.episode-gallery-sort {
    width: auto;
    min-width: 92px;
    grid-auto-flow: column;
    gap: 7px;
    padding: 0 11px;
}

.episode-gallery-sort span {
    font-size: .72rem;
    font-weight: 780;
}

.episode-season-filter-strip {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 0 0 16px;
    padding: 4px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.episode-season-filter-strip::-webkit-scrollbar {
    display: none;
}

.episode-season-filter {
    appearance: none;
    flex: 0 0 auto;
    text-align: right;
}

.episode-season-filter:hover,
.episode-season-filter:focus-visible {
    outline: 0;
}

.episode-gallery-season,
.episode-gallery-tool {
    height: 39px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    color: rgba(255,255,255,.9);
    background: #000000;
}

.episode-gallery-season {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 166px;
    padding: 0 11px;
}

.episode-gallery-season select {
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 37px;
    border: 0;
    outline: 0;
    background: #000000;
    color: rgba(255,255,255,.9);
    font: inherit;
    font-size: .79rem;
    cursor: pointer;
}

.episode-gallery-season > .oscar-icon:last-child {
    pointer-events: none;
    color: rgba(255,255,255,.55);
}

.episode-gallery-tool {
    appearance: none;
    width: 41px;
    min-width: 41px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
}

.episode-gallery-tool:hover,
.episode-gallery-tool.active,
.episode-gallery-tool:focus-visible,
.episode-gallery-season:focus-within {
    border-color: #14D7FF;
    color: #14D7FF;
    outline: 0;
}

.episode-gallery-search {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    margin: 0 0 14px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 9px;
    background: #000000;
    color: rgba(255,255,255,.55);
}

.episode-gallery-search:focus-within {
    border-color: #9B4DFF;
}

.episode-gallery-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    color: rgba(255,255,255,.94);
    background: #000000;
    font: inherit;
    font-size: .84rem;
}

.episode-gallery-search button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.65);
    background: #000000;
    cursor: pointer;
}

.episode-gallery-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.episode-gallery-entry {
    min-width: 0;
    opacity: 0;
    transform: translateY(12px) scale(.992);
    animation: episode-season-enter .38s cubic-bezier(.2,.8,.2,1) forwards;
}

.episode-gallery-entry.expanded {
    grid-column: 1 / -1;
}

.episode-gallery-entry:nth-child(2) { animation-delay: 35ms; }
.episode-gallery-entry:nth-child(3) { animation-delay: 70ms; }
.episode-gallery-entry:nth-child(4) { animation-delay: 105ms; }
.episode-gallery-entry:nth-child(n+5) { animation-delay: 125ms; }

.episode-gallery-card {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.episode-gallery-card::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    right: 12%;
    left: 12%;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg,transparent,#F04AD8,#14D7FF,transparent);
    transition: opacity .2s ease, right .2s ease, left .2s ease;
}

.episode-gallery-card:hover::before,
.episode-gallery-card.expanded::before {
    right: 3%;
    left: 3%;
    opacity: .78;
}

.episode-gallery-card:hover {
    border-color: rgba(255,255,255,.25);
}

.episode-gallery-card.expanded {
    grid-column: 1 / -1;
    border-color: transparent;
    background:
        linear-gradient(#000000,#000000) padding-box,
        linear-gradient(105deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
    box-shadow: 0 18px 46px rgba(0,0,0,.42);
}

.episode-gallery-collapsed {
    appearance: none;
    width: 100%;
    min-height: 126px;
    display: grid;
    grid-template-columns: minmax(190px, 36%) minmax(0,1fr) auto;
    align-items: stretch;
    gap: 14px;
    padding: 0;
    border: 0;
    color: inherit;
    text-align: right;
    cursor: pointer;
}

.episode-gallery-collapsed-art {
    position: relative;
    overflow: hidden;
    min-height: 126px;
    background: #000000;
}

.episode-gallery-collapsed-art img,
.episode-gallery-expanded-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.episode-gallery-card:hover .episode-gallery-collapsed-art img {
    transform: scale(1.025);
}

.episode-gallery-collapsed-art::after,
.episode-gallery-expanded-art::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.12) 52%,rgba(0,0,0,.82));
}

.episode-gallery-collapsed-art > small,
.episode-gallery-number {
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 9px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #000000;
    color: rgba(255,255,255,.92);
    font-size: .69rem;
    font-weight: 750;
}

.episode-gallery-collapsed-copy {
    align-self: center;
    min-width: 0;
}

.episode-gallery-collapsed-copy strong,
.episode-gallery-collapsed-copy small {
    display: block;
}

.episode-gallery-collapsed-copy strong {
    margin-bottom: 8px;
    color: rgba(255,255,255,.96);
    font-size: 1rem;
    line-height: 1.45;
}

.episode-gallery-collapsed-copy small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: rgba(255,255,255,.54);
    font-size: .76rem;
    line-height: 1.7;
}

.episode-gallery-collapsed-meta {
    min-width: 96px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    padding: 0 15px;
    color: rgba(255,255,255,.52);
}

.episode-gallery-collapsed-meta small {
    white-space: nowrap;
    font-size: .72rem;
}

.episode-gallery-more {
    appearance: none;
    min-width: 190px;
    height: 41px;
    margin: 16px auto 0;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 9px;
    background: #000000;
    color: rgba(255,255,255,.84);
    cursor: pointer;
}

.episode-gallery-more:hover,
.episode-gallery-more:focus-visible {
    border-color: #9B4DFF;
    outline: 0;
}

.episode-gallery-expanded-layout {
    min-width: 0;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(235px,.58fr) minmax(500px,1.55fr);
    grid-template-areas: "sources copy art";
    gap: 22px;
    align-items: center;
    direction: ltr;
}

.episode-gallery-expanded-art,
.episode-gallery-expanded-copy,
.episode-source-area {
    direction: rtl;
}

.episode-gallery-expanded-art {
    grid-area: art;
    appearance: none;
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 8.6;
    min-height: 230px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: #000000;
    cursor: pointer;
}

.episode-gallery-play {
    position: absolute;
    z-index: 3;
    inset: 50% auto auto 50%;
    transform: translate(-50%,-50%);
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(#000000,#000000) padding-box,
        linear-gradient(120deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
}

.episode-gallery-progress {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    width: 33%;
    height: 3px;
    background: linear-gradient(90deg,#F04AD8,#9B4DFF,#14D7FF);
}

.episode-gallery-expanded-copy {
    grid-area: copy;
    position: relative;
    min-width: 0;
}

.episode-gallery-collapse {
    position: absolute;
    top: -8px;
    left: 0;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    color: rgba(255,255,255,.68);
    background: #000000;
    cursor: pointer;
}

.episode-gallery-collapse .oscar-icon {
    transform: rotate(180deg);
}

.episode-gallery-expanded-copy > small {
    color: #F04AD8;
    font-size: .79rem;
    font-weight: 780;
}

.episode-gallery-expanded-copy h3 {
    margin: 10px 0 8px;
    color: rgba(255,255,255,.98);
    font-size: clamp(1.3rem,2vw,2rem);
    line-height: 1.32;
}

.episode-gallery-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 13px;
    color: rgba(255,255,255,.62);
    font-size: .77rem;
}

.episode-gallery-expanded-copy p {
    margin: 15px 0 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    color: rgba(255,255,255,.62);
    font-size: .82rem;
    line-height: 1.85;
}

.episode-source-area {
    grid-area: sources;
    min-width: 0;
}

.episode-source-heading {
    margin-bottom: 11px;
}

.episode-source-heading h3 {
    margin: 0;
    color: rgba(255,255,255,.95);
    font-size: .91rem;
}

.episode-source-heading small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.48);
    font-size: .68rem;
}

.episode-source-grid {
    display: grid;
    gap: 8px;
}

.episode-source-card {
    appearance: none;
    width: 100%;
    min-height: 62px;
    padding: 7px 10px;
    display: grid;
    grid-template-columns: minmax(48px,auto) minmax(0,1fr) 44px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    color: rgba(255,255,255,.9);
    text-align: right;
    cursor: pointer;
}

.episode-source-card.primary {
    border-color: transparent;
    background:
        linear-gradient(#000000,#000000) padding-box,
        linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
}

.episode-source-card:hover,
.episode-source-card:focus-visible {
    border-color: #14D7FF;
    outline: 0;
}

.episode-source-card:disabled {
    cursor: wait;
    opacity: .58;
}

.episode-source-card.loading {
    opacity: 1;
}

.episode-source-quality {
    color: #F04AD8;
    font-size: .88rem;
    font-weight: 850;
    direction: ltr;
    text-align: center;
}

.episode-source-card:nth-child(2n) .episode-source-quality {
    color: #14D7FF;
}

.episode-source-copy {
    min-width: 0;
}

.episode-source-copy strong,
.episode-source-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.episode-source-copy strong {
    color: rgba(255,255,255,.94);
    font-size: .82rem;
}

.episode-source-copy small {
    margin-top: 3px;
    color: rgba(255,255,255,.46);
    font-size: .65rem;
}

.episode-source-play {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    color: rgba(255,255,255,.94);
    background: #000000;
}

.episode-source-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.24);
    border-top-color: #14D7FF;
    border-radius: 999px;
    animation: episode-source-spin .7s linear infinite;
}

.episode-source-login,
.episode-source-error,
.episode-source-empty {
    min-height: 58px;
    width: 100%;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 9px;
    color: rgba(255,255,255,.76);
}

.episode-source-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
}

.episode-source-error,
.episode-source-empty {
    padding: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .72rem;
    line-height: 1.6;
}

.episode-source-error button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    background: #000000;
    color: #14D7FF;
    cursor: pointer;
}

.episode-source-skeletons {
    display: grid;
    gap: 8px;
}

.episode-source-skeletons span {
    height: 62px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px;
    background: linear-gradient(100deg,#000000 18%,rgba(255,255,255,.08) 42%,#000000 66%);
    background-size: 240% 100%;
    animation: episode-source-shimmer 1.2s ease-in-out infinite;
}

.episode-gallery-loading,
.episode-gallery-empty {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    color: rgba(255,255,255,.56);
}

@keyframes episode-source-spin { to { transform: rotate(360deg); } }
@keyframes episode-source-shimmer { to { background-position: -180% 0; } }
@keyframes episode-season-enter {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1240px) {
    .episode-gallery-list {
        grid-template-columns: 1fr;
    }

    .episode-gallery-expanded-layout {
        grid-template-columns: minmax(250px,.72fr) minmax(220px,.56fr) minmax(430px,1.35fr);
        gap: 16px;
    }
}

@media (max-width: 900px) {
    .episode-gallery-header {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        padding-bottom: 12px;
    }

    .episode-gallery-tools {
        width: 100%;
    }

    .episode-gallery-season {
        flex: 1;
    }

    .episode-gallery-tool {
        width: 48px;
        min-width: 48px;
        height: 48px;
    }

    .episode-gallery-sort {
        width: auto;
        min-width: 104px;
    }

    .episode-season-filter-strip {
        margin-bottom: 12px;
        padding-bottom: 7px;
    }

    .episode-gallery-season,
    .episode-gallery-season select {
        height: 48px;
    }

    .episode-gallery-list {
        gap: 10px;
    }

    .episode-gallery-collapsed {
        min-height: 96px;
        grid-template-columns: 128px minmax(0,1fr) 36px;
        gap: 10px;
    }

    .episode-gallery-collapsed-art {
        min-height: 96px;
    }

    .episode-gallery-collapsed-copy strong {
        margin-bottom: 4px;
        font-size: .88rem;
    }

    .episode-gallery-collapsed-copy small {
        -webkit-line-clamp: 1;
        font-size: .68rem;
    }

    .episode-gallery-collapsed-meta {
        min-width: 36px;
        padding: 0 8px;
    }

    .episode-gallery-collapsed-meta small {
        display: none;
    }

    .episode-gallery-expanded-layout {
        padding: 10px;
        grid-template-columns: minmax(0,1fr);
        grid-template-areas: "art" "copy" "sources";
        gap: 16px;
    }

    .episode-gallery-expanded-art {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .episode-gallery-expanded-copy h3 {
        padding-left: 42px;
        font-size: 1.2rem;
    }

    .episode-gallery-expanded-copy p {
        -webkit-line-clamp: 3;
        font-size: .76rem;
    }

    .episode-source-card {
        min-height: 58px;
        grid-template-columns: 52px minmax(0,1fr) 48px;
        padding: 5px 7px;
    }

    .episode-source-play {
        width: 34px;
        height: 34px;
        justify-self: center;
    }

    .episode-gallery-more {
        min-height: 48px;
    }
}

@media (max-width: 520px) {
    .episode-gallery-heading {
        width: 100%;
        justify-content: space-between;
    }

    .episode-gallery-collapsed {
        grid-template-columns: 112px minmax(0,1fr) 32px;
        gap: 8px;
    }

    .episode-gallery-collapsed-meta {
        min-width: 32px;
        padding: 0 5px;
    }

    .episode-gallery-collapsed-art > small {
        top: 6px;
        right: 6px;
        padding: 3px 6px;
        font-size: .62rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .episode-gallery-card,
    .episode-gallery-entry,
    .episode-gallery-collapsed-art img,
    .episode-source-spinner,
    .episode-source-skeletons span {
        transition: none;
        animation-duration: .01ms;
        animation-iteration-count: 1;
    }
}

/* NOVA+ 2.55 — standalone episode experience and compact rich details. */
.episode-season-filter-strip {
    align-items: center;
    gap: 7px;
    padding: 0 0 8px;
}

.episode-season-filter.nova-catalog-select-card {
    flex: 0 0 auto;
    height: var(--nova-catalog-control-h, 42px);
    min-height: var(--nova-catalog-control-h, 42px);
    min-width: 118px;
    max-width: 178px;
    margin: 0;
    padding: 0 10px;
    grid-template-columns: 18px auto minmax(38px, auto) 14px;
    gap: 6px;
    border-radius: 8px !important;
}

.episode-season-filter.nova-catalog-select-card::after {
    display: none;
}

.reference-info-panel {
    padding: 13px;
}

.reference-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}

.reference-info-grid > div {
    padding: 3px 7px 8px;
}

.reference-info-grid dd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.reference-details-story {
    max-width: 1050px;
    margin-top: 8px;
    font-size: .65rem;
    line-height: 1.65;
}

.reference-cast-section {
    margin-top: 14px;
    padding-top: 11px;
}

.reference-cast-section h3 {
    margin-bottom: 9px;
    font-size: .82rem;
}

.reference-info-panel .nova-people-rail {
    gap: 12px;
    padding-bottom: 6px;
}

.reference-info-panel .person-card {
    width: 78px;
}

.reference-info-panel .person-avatar {
    width: 68px;
    height: 68px;
    margin-bottom: 7px;
}

.reference-info-panel .person-card strong {
    font-size: .68rem;
}

.reference-info-panel .person-card small {
    margin-top: 2px;
    font-size: .57rem;
}

.reference-promo-player {
    overflow: hidden;
    margin: 0 0 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    background: #000000;
    box-shadow: 0 18px 42px rgba(0,0,0,.38);
    animation: promo-player-enter .24s ease-out both;
}

.reference-promo-player > header {
    min-height: 52px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.reference-promo-player > header > div {
    min-width: 0;
}

.reference-promo-player > header span,
.reference-promo-player > header strong {
    display: block;
}

.reference-promo-player > header span {
    color: #14D7FF;
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.reference-promo-player > header strong {
    margin-top: 2px;
    overflow: hidden;
    color: #fff;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-promo-player > header button {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    background: #000000;
    color: #fff;
}

.reference-promo-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.reference-promo-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000000;
}

.reference-promo-card.active .reference-promo-art {
    outline: 2px solid #9B4DFF;
    outline-offset: 2px;
    box-shadow: 0 0 24px rgba(20,215,255,.15);
}

@keyframes promo-player-enter {
    from { opacity: 0; transform: translateY(8px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.standalone-episode-page {
    min-height: 100%;
    padding-bottom: 36px;
    background: #000000;
    color: #fff;
    animation: standalone-page-enter .26s ease-out both;
}

.standalone-episode-hero {
    position: relative;
    isolation: isolate;
    height: clamp(410px, 48vh, 530px);
    min-height: 410px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.09);
    background: #000000;
}

.standalone-episode-backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.012);
    animation: standalone-art-enter .7s cubic-bezier(.2,.72,.25,1) both;
}

.standalone-episode-shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.20) 35%, rgba(0,0,0,.78) 72%, #000000 100%),
        linear-gradient(0deg, #000000 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.30) 100%);
    pointer-events: none;
}

.standalone-episode-shade::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(48vw, 720px);
    height: 2px;
    background: linear-gradient(90deg, #F04AD8, #9B4DFF 52%, #14D7FF);
    box-shadow: 0 0 20px rgba(155,77,255,.28);
}

.standalone-episode-hero-content {
    position: absolute;
    z-index: 3;
    inset: 0 0 0 auto;
    width: min(650px, 47vw);
    min-height: 0;
    padding: clamp(74px, 8vh, 98px) clamp(30px, 4.5vw, 72px) 38px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.standalone-hero-art-play {
    position: absolute;
    z-index: 3;
    top: 52%;
    left: 29%;
    width: 62px;
    height: 62px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 50%;
    background: rgba(0,0,0,.54);
    color: #fff;
    box-shadow: 0 12px 36px rgba(0,0,0,.42), 0 0 0 7px rgba(0,0,0,.15);
    backdrop-filter: blur(8px);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.standalone-hero-art-play:hover,
.standalone-hero-art-play:focus-visible {
    transform: translate(-50%, -50%) scale(1.07);
    border-color: #14D7FF;
    outline: 0;
    box-shadow: 0 12px 38px rgba(0,0,0,.48), 0 0 0 7px rgba(155,77,255,.18), 0 0 22px rgba(20,215,255,.22);
}

.standalone-episode-kicker,
.standalone-episode-meta,
.standalone-episode-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.standalone-episode-kicker {
    gap: 9px;
    color: rgba(255,255,255,.72);
    font-size: .69rem;
    font-weight: 800;
}

.standalone-episode-kicker i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #14D7FF;
    box-shadow: 0 0 9px #14D7FF;
}

.standalone-episode-series-name {
    max-width: 100%;
    margin-top: 12px;
    overflow: hidden;
    color: rgba(255,255,255,.78);
    font-size: .78rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standalone-episode-hero-content h1 {
    max-width: 100%;
    margin: 5px 0 0;
    font-size: clamp(2.05rem, 3.15vw, 3.25rem);
    line-height: 1.1;
    text-wrap: balance;
}

.standalone-episode-hero-content > p {
    max-width: 590px;
    margin: 11px 0 0;
    display: -webkit-box;
    overflow: hidden;
    color: rgba(255,255,255,.70);
    font-size: .86rem;
    line-height: 1.78;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.standalone-episode-meta {
    gap: 12px;
    margin-top: 14px;
}

.standalone-episode-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.67);
    font-size: .71rem;
}

.standalone-episode-actions {
    gap: 9px;
    margin-top: 20px;
}

.standalone-episode-play,
.standalone-series-return {
    min-height: 48px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 11px;
    color: #fff;
}

.standalone-episode-play {
    min-width: 164px;
    border: 0;
    background: #fff;
    color: #000;
}

.standalone-episode-play > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #000;
    color: #fff;
}

.standalone-episode-play strong {
    font-size: .79rem;
}

.standalone-series-return {
    max-width: 300px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(0,0,0,.64);
    backdrop-filter: blur(12px);
}

.standalone-series-return span {
    overflow: hidden;
    font-size: .71rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standalone-episode-content {
    width: min(1500px, calc(100% - clamp(32px, 5vw, 84px)));
    margin: 0 auto;
    padding-top: 24px;
    display: grid;
    gap: 24px;
}

.standalone-episode-narrative {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 14px;
}

.standalone-story-card,
.standalone-source-panel {
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;
    background: #000000;
}

.standalone-story-card {
    min-width: 0;
    padding: 21px 22px;
    position: relative;
    overflow: hidden;
}

.standalone-story-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, #F04AD8, #14D7FF);
}

.standalone-section-kicker {
    color: #14D7FF;
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .07em;
}

.standalone-story-card h2 {
    margin: 6px 0 0;
    font-size: 1.08rem;
}

.standalone-story-card p {
    margin: 9px 0 0;
    display: -webkit-box;
    overflow: hidden;
    color: rgba(255,255,255,.66);
    font-size: .79rem;
    line-height: 1.78;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.standalone-story-card.episode-story p {
    -webkit-line-clamp: 4;
}

.standalone-story-facts {
    margin-top: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.standalone-story-facts span {
    min-height: 26px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 7px;
    color: rgba(255,255,255,.72);
    font-size: .64rem;
}

.standalone-story-card > button {
    margin-top: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #14D7FF;
    font-size: .69rem;
}

.standalone-source-panel {
    padding: 22px;
}

.standalone-source-panel > header,
.standalone-related-episodes > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.standalone-source-panel > header h2,
.standalone-related-episodes > header h2 {
    margin: 5px 0 0;
    color: #fff;
    font-size: 1.16rem;
}

.standalone-source-panel > header p {
    margin: 5px 0 0;
    color: rgba(255,255,255,.48);
    font-size: .7rem;
}

.standalone-source-count {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: rgba(255,255,255,.66);
    font-size: .67rem;
    white-space: nowrap;
}

.standalone-source-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.standalone-source-card.episode-source-card {
    min-height: 74px;
    padding: 8px;
    display: grid;
    grid-template-columns: 66px minmax(0,1fr) 46px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    background: #000000;
    color: #fff;
    text-align: right;
}

.standalone-source-card.episode-source-card.primary {
    border-color: transparent;
    background:
        linear-gradient(#000000,#000000) padding-box,
        linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
}

.standalone-source-card.episode-source-card:hover,
.standalone-source-card.episode-source-card:focus-visible {
    transform: translateY(-2px);
    border-color: #9B4DFF;
    outline: 0;
}

.standalone-source-quality {
    height: 48px;
    display: grid;
    place-items: center;
    border-left: 1px solid rgba(255,255,255,.10);
    color: #14D7FF;
    font-size: .83rem;
    font-weight: 900;
    direction: ltr;
}

.standalone-source-copy {
    min-width: 0;
}

.standalone-source-copy strong,
.standalone-source-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standalone-source-copy strong {
    font-size: .8rem;
}

.standalone-source-copy small {
    margin-top: 4px;
    color: rgba(255,255,255,.46);
    font-size: .62rem;
}

.standalone-source-play {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    justify-self: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
}

.standalone-source-login,
.standalone-source-skeletons,
.standalone-source-error,
.standalone-source-empty {
    margin-top: 16px;
}

.standalone-related-episodes {
    min-width: 0;
}

.standalone-related-rail {
    margin-top: 13px;
    padding-bottom: 7px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 20vw);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.standalone-related-card {
    min-width: 0;
    padding: 0;
    border: 0;
    background: #000000;
    color: #fff;
    text-align: right;
}

.standalone-related-art {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 11px;
    background: #000000;
}

.standalone-related-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .24s ease;
}

.standalone-related-art i {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(0,0,0,.70);
    opacity: 0;
    transition: opacity .2s ease;
}

.standalone-related-art > small {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(0,0,0,.78);
    font-size: .58rem;
}

.standalone-related-card:hover .standalone-related-art i,
.standalone-related-card:focus-visible .standalone-related-art i {
    opacity: 1;
}

.standalone-related-card:hover .standalone-related-art img {
    transform: scale(1.035);
}

.standalone-related-card > strong,
.standalone-related-card > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standalone-related-card > strong {
    margin-top: 8px;
    font-size: .78rem;
}

.standalone-related-card > small {
    margin-top: 3px;
    color: rgba(255,255,255,.43);
    font-size: .62rem;
}

@keyframes standalone-art-enter {
    from { opacity: .35; transform: scale(1.045); }
    to { opacity: 1; transform: scale(1.012); }
}

@keyframes standalone-page-enter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 821px) {
    .cinematic-details-hero {
        height: clamp(390px, 47dvh, 555px);
    }

    .cinematic-title {
        font-size: clamp(2.15rem, 5.1vw, 4.7rem);
    }
}

@media (max-width: 1040px) {
    .standalone-source-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .standalone-episode-narrative {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .episode-season-filter.nova-catalog-select-card {
        height: 34px !important;
        min-height: 34px !important;
        min-width: 84px !important;
        max-width: 126px !important;
        padding-inline: 7px !important;
        grid-template-columns: 15px minmax(38px, auto) 13px !important;
        gap: 4px !important;
        border-radius: 7px !important;
    }

    .episode-season-filter.nova-catalog-select-card > span {
        display: none;
    }

    .episode-season-filter.nova-catalog-select-card > strong {
        font-size: .68rem;
    }

    .cinematic-details-hero {
        height: clamp(390px, 49dvh, 475px);
        min-height: 390px;
    }

    .cinematic-title {
        font-size: clamp(1.75rem, 9vw, 3.25rem);
    }

    .reference-info-panel .person-card {
        width: 68px;
    }

    .reference-info-panel .person-avatar {
        width: 58px;
        height: 58px;
    }

    .standalone-episode-hero {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template: auto auto / minmax(0, 1fr);
        overflow: hidden;
    }

    .standalone-episode-backdrop {
        position: relative;
        z-index: 0;
        grid-area: 1 / 1;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 8.8;
        object-position: center 28%;
    }

    .standalone-episode-shade {
        position: relative;
        z-index: 1;
        grid-area: 1 / 1;
        inset: auto;
        background:
            linear-gradient(0deg, #000000 0%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.28) 100%),
            linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
    }

    .standalone-episode-shade::after {
        width: 58%;
    }

    .standalone-hero-art-play {
        position: relative;
        z-index: 2;
        grid-area: 1 / 1;
        place-self: center;
        top: auto;
        left: auto;
        width: 56px;
        height: 56px;
        transform: none;
    }

    .standalone-hero-art-play:hover,
    .standalone-hero-art-play:focus-visible {
        transform: scale(1.06);
    }

    .standalone-episode-hero-content {
        position: relative;
        z-index: 3;
        grid-area: 2 / 1;
        inset: auto;
        width: 100%;
        min-height: 0;
        margin-top: -32px;
        padding: 48px 18px 22px;
        justify-content: flex-end;
        background: linear-gradient(0deg, #000 0%, #000 78%, rgba(0,0,0,0) 100%);
    }

    .standalone-episode-hero-content h1 {
        font-size: clamp(1.65rem, 7.2vw, 2.35rem);
    }

    .standalone-episode-hero-content > p {
        max-width: 100%;
        font-size: .77rem;
        line-height: 1.72;
        -webkit-line-clamp: 3;
    }

    .standalone-episode-content {
        width: calc(100% - 24px);
        padding-top: 16px;
        gap: 18px;
    }

    .standalone-story-card {
        padding: 17px;
    }

    .standalone-story-card p {
        font-size: .75rem;
        -webkit-line-clamp: 5;
    }

    .standalone-source-panel {
        padding: 16px;
    }

    .standalone-source-panel > header p {
        display: none;
    }

    .standalone-related-rail {
        grid-auto-columns: minmax(205px, 64vw);
    }
}

@media (max-width: 560px) {
    .standalone-episode-hero {
        min-height: 0;
    }

    .standalone-episode-backdrop {
        aspect-ratio: 4 / 3;
    }

    .standalone-episode-series-name {
        margin-top: 9px;
        font-size: .72rem;
    }

    .standalone-episode-hero-content {
        margin-top: -27px;
        padding: 43px 14px 18px;
    }

    .standalone-episode-kicker {
        font-size: .64rem;
    }

    .standalone-episode-actions {
        width: 100%;
    }

    .standalone-episode-play,
    .standalone-series-return {
        flex: 1 1 138px;
        min-height: 46px;
        max-width: none;
        padding-inline: 11px;
    }

    .standalone-series-return span {
        font-size: .66rem;
    }

    .standalone-source-grid {
        grid-template-columns: 1fr;
    }

    .standalone-source-panel > header {
        align-items: center;
    }

    .standalone-source-panel > header h2 {
        font-size: .98rem;
    }

    .standalone-story-card {
        padding: 15px;
    }

    .standalone-source-card.episode-source-card {
        min-height: 68px;
        grid-template-columns: 58px minmax(0,1fr) 42px;
    }

    .standalone-source-quality {
        height: 44px;
        font-size: .78rem;
    }

    .standalone-related-rail {
        grid-auto-columns: minmax(190px, 70vw);
    }

    .reference-promo-rail {
        grid-auto-columns: minmax(190px, 74vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .standalone-episode-page,
    .standalone-episode-backdrop,
    .reference-promo-player,
    .standalone-related-art img {
        animation: none;
        transition: none;
    }
}

/* =========================================================
   EPISODE DETAILS — RESPONSIVE PROFESSIONAL LAYOUT V2
   This final block intentionally overrides the legacy standalone episode
   rules above. SafeImage renders a child <img>, therefore image styling must
   cross the scoped-component boundary with .
   ========================================================= */
.standalone-episode-page {
    min-height: 100dvh;
    padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 34px);
    background:
        radial-gradient(circle at 18% 8%, rgba(155,77,255,.075), transparent 25rem),
        radial-gradient(circle at 83% 22%, rgba(20,215,255,.045), transparent 22rem),
        #030304;
    color: #fff;
}

.standalone-episode-hero {
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 78px) clamp(18px, 3vw, 46px) 26px;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
}

.standalone-episode-hero-frame {
    width: min(1460px, 100%);
    min-height: 430px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, .78fr);
    grid-template-areas: "media info";
    direction: ltr;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.095);
    border-radius: 22px;
    background: #08080b;
    box-shadow: 0 26px 80px rgba(0,0,0,.48), 0 1px 0 rgba(255,255,255,.035) inset;
}

.standalone-episode-media {
    position: relative;
    grid-area: media;
    min-width: 0;
    min-height: 430px;
    overflow: hidden;
    isolation: isolate;
    background: #07070a;
}

.standalone-episode-media::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.02) 56%, rgba(8,8,11,.92) 100%),
        linear-gradient(0deg, rgba(0,0,0,.52) 0%, transparent 42%, rgba(0,0,0,.18) 100%);
}

.standalone-episode-media .standalone-episode-backdrop-image,
.standalone-episode-media .standalone-episode-art-image {
    position: absolute;
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

.standalone-episode-media .standalone-episode-backdrop-image {
    z-index: 0;
    object-fit: cover;
    object-position: center 28%;
    transform: scale(1.09);
    filter: blur(20px) saturate(.82) brightness(.58);
    opacity: .76;
}

.standalone-episode-media .standalone-episode-art-image {
    z-index: 1;
    object-fit: contain;
    object-position: center;
    filter: saturate(.96) contrast(1.02) brightness(.94);
    animation: standalone-art-enter .55s cubic-bezier(.2,.72,.25,1) both;
}

.standalone-episode-shade {
    position: absolute !important;
    z-index: 3 !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.02), transparent 48%, rgba(7,7,10,.72) 100%),
        linear-gradient(0deg, rgba(0,0,0,.45), transparent 42%) !important;
}

.standalone-episode-shade::after {
    right: auto !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 46% !important;
    height: 2px !important;
    background: linear-gradient(90deg, #14D7FF, #9B4DFF 55%, #F04AD8) !important;
    opacity: .86;
}

.standalone-hero-art-play {
    position: absolute !important;
    z-index: 5 !important;
    top: 50% !important;
    left: 50% !important;
    width: 64px !important;
    height: 64px !important;
    transform: translate(-50%, -50%) !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    border-radius: 50% !important;
    background: rgba(3,3,5,.62) !important;
    color: #fff !important;
    box-shadow: 0 14px 44px rgba(0,0,0,.46), 0 0 0 8px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(12px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
}

.standalone-hero-art-play:hover,
.standalone-hero-art-play:focus-visible {
    transform: translate(-50%, -50%) scale(1.07) !important;
    border-color: #14D7FF !important;
    outline: 0 !important;
    box-shadow: 0 16px 46px rgba(0,0,0,.52), 0 0 0 8px rgba(155,77,255,.15), 0 0 28px rgba(20,215,255,.24) !important;
}

.standalone-episode-hero-content {
    position: relative !important;
    grid-area: info;
    z-index: 4 !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0;
    min-height: 430px !important;
    padding: clamp(28px, 3vw, 44px) clamp(24px, 2.8vw, 40px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    direction: rtl;
    text-align: right;
    background:
        linear-gradient(135deg, rgba(17,17,22,.97), rgba(8,8,11,.985)),
        #08080b !important;
    border-left: 1px solid rgba(255,255,255,.055);
}

.standalone-episode-hero-content::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 148px;
    height: 2px;
    background: linear-gradient(90deg, #F04AD8, #9B4DFF, #14D7FF);
    opacity: .92;
}

.standalone-episode-kicker {
    gap: 8px !important;
    color: rgba(255,255,255,.64) !important;
    font-size: .68rem !important;
    font-weight: 850 !important;
}

.standalone-episode-series-name {
    margin-top: 13px !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .77rem !important;
    font-weight: 750 !important;
}

.standalone-episode-hero-content h1 {
    max-width: 100% !important;
    margin: 6px 0 0 !important;
    color: #fff;
    font-size: clamp(2rem, 2.9vw, 3.05rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.standalone-episode-hero-content > p {
    max-width: 100% !important;
    margin: 13px 0 0 !important;
    color: rgba(255,255,255,.64) !important;
    font-size: .82rem !important;
    line-height: 1.82 !important;
    -webkit-line-clamp: 4 !important;
}

.standalone-episode-meta {
    gap: 7px 11px !important;
    margin-top: 16px !important;
}

.standalone-episode-meta span {
    min-height: 27px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 7px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.67) !important;
    font-size: .67rem !important;
}

.standalone-episode-actions {
    width: 100%;
    margin-top: 22px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px !important;
}

.standalone-episode-play,
.standalone-series-return {
    width: 100%;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 13px !important;
    border-radius: 10px !important;
}

.standalone-episode-play {
    background: #fff !important;
    color: #050506 !important;
    box-shadow: 0 8px 24px rgba(255,255,255,.07);
}

.standalone-series-return {
    border-color: rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.035) !important;
    backdrop-filter: none !important;
}

.standalone-episode-play:hover,
.standalone-episode-play:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(255,255,255,.11);
    outline: 0;
}

.standalone-series-return:hover,
.standalone-series-return:focus-visible {
    border-color: rgba(20,215,255,.42) !important;
    background: rgba(20,215,255,.055) !important;
    outline: 0;
}

.standalone-episode-content {
    width: min(1460px, calc(100% - clamp(36px, 6vw, 92px))) !important;
    margin: 0 auto !important;
    padding-top: 0 !important;
    display: grid !important;
    gap: 20px !important;
}

.standalone-episode-narrative {
    gap: 14px !important;
}

.standalone-story-card,
.standalone-source-panel {
    border-color: rgba(255,255,255,.085) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(15,15,19,.96), rgba(7,7,9,.98)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
}

.standalone-story-card {
    padding: 22px 24px !important;
}

.standalone-story-card::before {
    width: 126px !important;
    height: 2px !important;
}

.standalone-story-card h2,
.standalone-source-panel > header h2,
.standalone-related-episodes > header h2 {
    letter-spacing: -.012em;
}

.standalone-story-card p {
    color: rgba(255,255,255,.61) !important;
}

.standalone-source-panel {
    padding: 22px 24px !important;
}

.standalone-source-card.episode-source-card {
    min-height: 72px !important;
    border-color: rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.024) !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.standalone-source-card.episode-source-card.primary {
    border-color: transparent !important;
    background:
        linear-gradient(#0b0b0e,#0b0b0e) padding-box,
        linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box !important;
}

.standalone-related-art {
    border-radius: 14px !important;
    background: #09090c !important;
}

@media (max-width: 1120px) {
    .standalone-episode-hero-frame {
        grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr);
        min-height: 400px;
    }

    .standalone-episode-media,
    .standalone-episode-hero-content {
        min-height: 400px !important;
    }

    .standalone-episode-hero-content {
        padding: 28px 25px !important;
    }

    .standalone-episode-hero-content h1 {
        font-size: clamp(1.8rem, 3vw, 2.45rem) !important;
    }

    .standalone-episode-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .standalone-episode-hero {
        padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 66px) 14px 18px !important;
    }

    .standalone-episode-hero-frame {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "media"
            "info";
        border-radius: 18px;
    }

    .standalone-episode-media {
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
    }

    .standalone-episode-media::before {
        background:
            linear-gradient(0deg, rgba(8,8,11,.70) 0%, transparent 38%),
            linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.08));
    }

    .standalone-episode-media .standalone-episode-backdrop-image {
        object-position: center 24%;
        filter: blur(18px) saturate(.84) brightness(.56);
    }

    .standalone-episode-media .standalone-episode-art-image {
        object-fit: contain;
        object-position: center;
    }

    .standalone-episode-shade {
        position: absolute !important;
        grid-area: auto !important;
        background: linear-gradient(0deg, rgba(8,8,11,.76), transparent 42%) !important;
    }

    .standalone-episode-shade::after {
        width: 54% !important;
    }

    .standalone-hero-art-play {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 58px !important;
        height: 58px !important;
        transform: translate(-50%, -50%) !important;
    }

    .standalone-hero-art-play:hover,
    .standalone-hero-art-play:focus-visible {
        transform: translate(-50%, -50%) scale(1.06) !important;
    }

    .standalone-episode-hero-content {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 24px 22px 23px !important;
        justify-content: flex-start !important;
        background: linear-gradient(180deg, #0d0d11, #08080b) !important;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.055);
    }

    .standalone-episode-hero-content h1 {
        font-size: clamp(1.65rem, 6.8vw, 2.25rem) !important;
    }

    .standalone-episode-hero-content > p {
        font-size: .78rem !important;
        line-height: 1.76 !important;
        -webkit-line-clamp: 3 !important;
    }

    .standalone-episode-actions {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .standalone-episode-content {
        width: calc(100% - 28px) !important;
        gap: 16px !important;
    }

    .standalone-story-card,
    .standalone-source-panel {
        border-radius: 14px !important;
    }

    .standalone-story-card,
    .standalone-source-panel {
        padding: 18px !important;
    }
}

@media (max-width: 560px) {
    .standalone-episode-hero {
        padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 56px) 0 12px !important;
    }

    .standalone-episode-hero-frame {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .standalone-episode-media {
        aspect-ratio: 16 / 10.5;
    }

    .standalone-episode-media .standalone-episode-art-image {
        object-fit: contain;
    }

    .standalone-hero-art-play {
        width: 54px !important;
        height: 54px !important;
    }

    .standalone-episode-hero-content {
        padding: 21px 14px 20px !important;
    }

    .standalone-episode-series-name {
        margin-top: 10px !important;
        font-size: .71rem !important;
    }

    .standalone-episode-hero-content h1 {
        font-size: clamp(1.55rem, 8vw, 1.95rem) !important;
    }

    .standalone-episode-hero-content > p {
        margin-top: 10px !important;
        font-size: .75rem !important;
    }

    .standalone-episode-meta {
        margin-top: 13px !important;
    }

    .standalone-episode-meta span {
        min-height: 25px;
        font-size: .62rem !important;
    }

    .standalone-episode-actions {
        grid-template-columns: 1fr;
        margin-top: 17px !important;
    }

    .standalone-episode-play,
    .standalone-series-return {
        min-height: 46px !important;
    }

    .standalone-episode-content {
        width: calc(100% - 20px) !important;
        gap: 14px !important;
    }

    .standalone-story-card,
    .standalone-source-panel {
        padding: 16px !important;
        border-radius: 13px !important;
    }

    .standalone-source-panel > header {
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .standalone-source-count {
        min-height: 30px;
        padding-inline: 9px;
        font-size: .61rem;
    }

    .standalone-source-grid {
        margin-top: 14px !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .standalone-related-rail {
        grid-auto-columns: minmax(190px, 78vw) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .standalone-episode-media .standalone-episode-art-image,
    .standalone-hero-art-play,
    .standalone-source-card.episode-source-card {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   RELEASE AUDIT STAGE 1 — DETAILS TEXT / ACTION FEEDBACK
   Keeps the approved visual identity while fixing bidi text, action feedback
   and hidden error states.
   ========================================================= */
.nova-directional-text {
    text-align: start !important;
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
}

.nova-directional-text[dir="ltr"],
.details-standard-title h1[dir="ltr"],
.cinematic-title[dir="ltr"] {
    direction: ltr !important;
    text-align: left !important;
}

.nova-directional-text[dir="rtl"],
.details-standard-title h1[dir="rtl"],
.cinematic-title[dir="rtl"] {
    direction: rtl !important;
    text-align: right !important;
}

.details-action-alert {
    position: fixed;
    z-index: 2250;
    top: calc(var(--nova-app-header-h, 58px) + var(--safe-top, env(safe-area-inset-top, 0px)) + 8px);
    right: clamp(12px, 3vw, 28px);
    left: clamp(12px, 3vw, 28px);
    width: min(560px, calc(100% - 24px));
    min-height: 42px;
    margin-inline: auto;
    padding: 8px 8px 8px 11px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color: rgba(255,255,255,.92);
    background: rgba(12,10,17,.94);
    box-shadow: 0 12px 34px rgba(0,0,0,.34);
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
    font-size: .76rem;
    line-height: 1.55;
}

.details-action-alert > .oscar-icon {
    color: #C25DFF;
}

.details-action-alert > button {
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: rgba(255,255,255,.78);
    background: transparent;
}

.cinematic-watch-button:disabled,
.cinematic-secondary-action:disabled,
.nova-server-card:disabled,
.standalone-episode-play:disabled,
.standalone-hero-art-play:disabled,
.details-header-action:disabled {
    cursor: default;
    opacity: .62;
}

@media (max-width: 600px) {
    .details-action-alert {
        top: calc(54px + var(--safe-top, env(safe-area-inset-top, 0px)) + 6px);
        font-size: .72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .details-action-alert,
    .details-action-alert * {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   STAGE 2 RUNTIME DETAILS — COMMERCIAL HERO / PROMO / STORY
   Keeps NOVA identity while reducing vertical dominance, moving promotional
   playback into the approved hero artwork slot and removing bottom-nav reserve
   from immersive details routes.
   ========================================================= */
.cinematic-title-stack {
    width: min(100%, 680px);
    display: grid;
    justify-items: center;
    gap: 4px;
}

.cinematic-title-stack .cinematic-title {
    margin-bottom: 0 !important;
}

.cinematic-title-en {
    max-width: 100%;
    color: rgba(255,255,255,.68);
    font-size: clamp(.78rem, 2.1vw, 1rem);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: .01em;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.cinematic-hero-promo {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.cinematic-hero-promo iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: #000;
}

.cinematic-details-hero.nova-promo-active .cinematic-hero-promo {
    opacity: 1;
    visibility: visible;
}

.cinematic-details-hero.nova-promo-active .cinematic-details-backdrop-shell > .cinematic-details-backdrop-image,
.cinematic-details-hero.nova-promo-active .cinematic-details-backdrop-shell > img {
    opacity: 0;
}

.cinematic-details-backdrop-shell .cinematic-details-backdrop-image,
.cinematic-details-backdrop-shell img {
    transition: opacity 220ms ease;
}

.cinematic-hero-promo-controls {
    position: absolute;
    z-index: 6;
    display: flex;
    gap: 7px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.cinematic-details-hero.nova-promo-active .cinematic-hero-promo-controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cinematic-hero-promo-controls button {
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 50%;
    color: #fff;
    background: rgba(5,5,8,.52);
    box-shadow: 0 8px 22px rgba(0,0,0,.24);
    backdrop-filter: blur(12px) saturate(1.12);
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
}

.cinematic-hero-promo-controls button:active {
    transform: scale(.96);
}

.promo-state-pause,
.promo-state-audible { display: none; }
.cinematic-details-hero.nova-promo-playing .promo-state-play { display: none; }
.cinematic-details-hero.nova-promo-playing .promo-state-pause { display: inline-grid; }
.cinematic-details-hero:not(.nova-promo-muted) .promo-state-muted { display: none; }
.cinematic-details-hero:not(.nova-promo-muted) .promo-state-audible { display: inline-grid; }

.reference-details-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(156px, 190px);
    gap: 14px;
    align-items: stretch;
}

.reference-production-card {
    min-width: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.reference-production-label {
    color: rgba(255,255,255,.48);
    font-size: .66rem;
    font-weight: 700;
}

.reference-production-logos {
    display: grid;
    gap: 8px;
}

.reference-production-company {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.reference-production-logo {
    height: 54px;
    padding: 7px 10px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(255,255,255,.96);
}

.reference-production-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.reference-production-company strong {
    min-width: 0;
    color: rgba(255,255,255,.76);
    font-size: .66rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    unicode-bidi: plaintext;
}

.reference-story-block {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.reference-story-block h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: .92rem;
    font-weight: 780;
}

.reference-story-block .reference-details-story {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: .78rem;
    line-height: 1.85;
    text-align: right !important;
    overflow-wrap: anywhere;
}

/* Details routes are immersive; MainLayout removes its bottom navigation. */
.details-app .details-page-shell,
.details-app .cinematic-details-content,
.details-app .nova-channel-details,
.details-app .standalone-episode-page {
    padding-bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 24px) !important;
}

@media (min-width: 821px) {
    .cinematic-hero-promo-controls {
        left: clamp(18px, 3vw, 42px);
        bottom: 20px;
    }
}

@media (max-width: 820px) {
    .cinematic-details-hero {
        height: clamp(600px, 72dvh, 760px) !important;
        min-height: 600px !important;
    }

    .cinematic-details-backdrop-shell {
        height: clamp(430px, 55dvh, 560px) !important;
        min-height: 430px !important;
    }

    .cinematic-hero-promo iframe {
        width: 177.78%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
    }

    .cinematic-hero-copy {
        padding: 132px 16px 18px !important;
    }

    .cinematic-title-stack {
        gap: 3px;
    }

    .cinematic-title {
        margin: 4px auto 0 !important;
        font-size: clamp(1.62rem, 7.6vw, 2.45rem) !important;
        line-height: 1.04 !important;
    }

    .cinematic-title-en {
        max-width: min(92vw, 620px);
        font-size: .72rem;
    }

    .cinematic-meta {
        margin-top: 9px !important;
    }

    .cinematic-ranking {
        margin-top: 8px !important;
    }

    .cinematic-actions {
        margin-top: 12px !important;
        gap: 8px !important;
    }

    .cinematic-watch-button {
        min-height: 48px !important;
        height: 48px !important;
        border-radius: 13px !important;
        font-size: .88rem !important;
    }

    .cinematic-secondary-action {
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        gap: 6px !important;
    }

    .cinematic-secondary-action span {
        font-size: .7rem !important;
    }

    .cinematic-hero-promo-controls {
        top: calc(clamp(430px, 55dvh, 560px) - 54px);
        left: 14px;
    }

    .cinematic-hero-promo-controls button {
        width: 38px;
        height: 38px;
    }

    .reference-details-overview-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .reference-production-card {
        padding: 10px;
    }

    .reference-production-logos {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .reference-production-logos::-webkit-scrollbar { display: none; }

    .reference-production-company {
        flex: 0 0 132px;
    }

    .reference-production-logo {
        height: 48px;
    }
}

@media (max-width: 390px) {
    .cinematic-details-hero {
        height: clamp(560px, 70dvh, 690px) !important;
        min-height: 560px !important;
    }

    .cinematic-details-backdrop-shell {
        height: clamp(400px, 52dvh, 510px) !important;
        min-height: 400px !important;
    }

    .cinematic-hero-copy {
        padding: 112px 14px 16px !important;
    }

    .cinematic-hero-promo-controls {
        top: calc(clamp(400px, 52dvh, 510px) - 51px);
        left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cinematic-hero-promo,
    .cinematic-hero-promo-controls,
    .cinematic-details-backdrop-shell img,
    .cinematic-hero-promo-controls button {
        transition: none !important;
    }
}

/* =========================================================
   Stage 8 — Details commercial interaction polish
   Identity locked to Nova+: #F04AD8 → #9B4DFF → #14D7FF
   ========================================================= */
.cinematic-details-page {
    --nova-pink: #F04AD8;
    --nova-purple: #9B4DFF;
    --nova-cyan: #14D7FF;
    padding-bottom: calc(24px + var(--safe-bottom, 0px));
}

.cinematic-actions {
    column-gap: 12px;
    row-gap: 12px;
}

.cinematic-secondary-action {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(4,4,8,.52);
    transition: transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.cinematic-secondary-action::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), transparent 58%);
    transform: scale(.7);
    transition: opacity .18s ease, transform .18s ease;
}

.cinematic-secondary-action:active {
    transform: scale(.975);
}

.cinematic-secondary-action:active::after {
    opacity: 1;
    transform: scale(1);
}

.secondary-action-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.035);
    transition: transform .18s cubic-bezier(.2,.8,.2,1), color .18s ease, background .18s ease, box-shadow .18s ease;
}

.cinematic-secondary-action.active {
    border-color: transparent;
    color: #fff;
    background:
        linear-gradient(#07070b,#07070b) padding-box,
        linear-gradient(105deg,var(--nova-pink),var(--nova-purple) 52%,var(--nova-cyan)) border-box;
    box-shadow: 0 8px 26px rgba(0,0,0,.34), 0 0 20px rgba(155,77,255,.12);
}

.cinematic-secondary-action.active .secondary-action-icon {
    color: #fff;
    background: linear-gradient(135deg,rgba(240,74,216,.28),rgba(155,77,255,.34) 52%,rgba(20,215,255,.24));
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(155,77,255,.18);
    transform: scale(1.06);
}

.cinematic-secondary-action.favorite-action.active .secondary-action-icon {
    color: #F45BDB;
}

.cinematic-secondary-action.list-action.active .secondary-action-icon {
    color: #fff;
}

.cinematic-secondary-action.just-selected .secondary-action-icon {
    animation: novaActionConfirm .34s cubic-bezier(.22,.9,.3,1.2);
}

@keyframes novaActionConfirm {
    0% { transform: scale(.82); }
    58% { transform: scale(1.17); }
    100% { transform: scale(1.06); }
}

.reference-story-block.story-first {
    margin: 0 0 18px;
    padding: 0 2px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.reference-story-block.story-first .reference-panel-heading {
    margin-bottom: 7px;
}

.reference-story-block.story-first .reference-details-story {
    margin: 0;
    color: rgba(255,255,255,.75);
    font-size: clamp(.78rem,1.5vw,.92rem);
    line-height: 1.88;
}

.reference-panel-heading.details-heading {
    margin-top: 2px;
}

.reference-production-card {
    min-width: 220px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: linear-gradient(145deg,rgba(12,8,18,.84),rgba(2,5,11,.90));
}

.reference-production-label {
    display: block;
    margin-bottom: 9px;
    color: #C55CFF;
    font-size: .66rem;
    font-weight: 900;
}

.reference-production-logos {
    display: grid;
    gap: 8px;
}

.reference-production-company {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    gap: 10px;
    align-items: center;
}

.reference-production-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 12px;
    background:
        linear-gradient(#07080d,#07080d) padding-box,
        linear-gradient(135deg,rgba(240,74,216,.72),rgba(155,77,255,.62),rgba(20,215,255,.66)) border-box;
}

.reference-production-logo img {
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.production-logo-fallback {
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
}

.reference-production-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.reference-production-copy strong {
    overflow: hidden;
    color: #fff;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-production-copy small {
    color: rgba(255,255,255,.45);
    font-size: .6rem;
}

.watch-options-section {
    min-height: 220px;
}

.watch-loading-shell {
    display: grid;
    gap: 14px;
}

.watch-quality-skeletons {
    display: flex;
    gap: 8px;
    overflow: hidden;
}

.watch-quality-skeletons i {
    width: 82px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: linear-gradient(100deg,rgba(255,255,255,.05) 22%,rgba(155,77,255,.18) 44%,rgba(20,215,255,.11) 52%,rgba(255,255,255,.05) 72%);
    background-size: 240% 100%;
    animation: novaWatchShimmer 1.05s linear infinite;
}

.watch-server-skeletons {
    display: grid;
    gap: 10px;
}

.watch-server-skeletons > div {
    min-height: 66px;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 28px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.watch-server-skeletons span {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(255,255,255,.07);
}

.watch-server-skeletons b {
    width: 62%;
    height: 11px;
    border-radius: 999px;
    background: linear-gradient(90deg,rgba(255,255,255,.06),rgba(155,77,255,.15),rgba(255,255,255,.06));
    background-size: 220% 100%;
    animation: novaWatchShimmer 1.05s linear infinite;
}

.watch-server-skeletons em,
.watch-loading-note > i {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255,255,255,.14);
    border-top-color: var(--nova-purple);
    border-right-color: var(--nova-cyan);
    border-radius: 50%;
    animation: novaWatchSpin .75s linear infinite;
}

.watch-loading-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: rgba(255,255,255,.52);
    font-size: .72rem;
}

.watch-quality-row {
    margin: 12px 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.watch-quality-row span {
    min-height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(155,77,255,.30);
    border-radius: 10px;
    color: rgba(255,255,255,.86);
    background: rgba(155,77,255,.07);
    font-size: .7rem;
    font-weight: 800;
}

.watch-empty-state {
    min-height: 300px;
    padding: 28px 18px 20px;
    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;
}

.watch-empty-illustration {
    position: relative;
    width: 128px;
    height: 112px;
    margin-bottom: 14px;
}

.watch-empty-cloud {
    position: absolute;
    top: 4px;
    left: 20px;
    width: 88px;
    height: 58px;
    border: 2px solid rgba(155,77,255,.62);
    border-radius: 36px;
    background: rgba(155,77,255,.035);
    box-shadow: 0 0 28px rgba(155,77,255,.08);
}

.watch-empty-cloud::after {
    content: "×";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #C44DFF;
    font-size: 2rem;
    font-weight: 300;
}

.watch-empty-server {
    position: absolute;
    right: 27px;
    bottom: 0;
    width: 74px;
    display: grid;
    gap: 4px;
}

.watch-empty-server i {
    height: 18px;
    border: 1px solid rgba(20,215,255,.24);
    border-radius: 6px;
    background: linear-gradient(90deg,rgba(155,77,255,.10),rgba(20,215,255,.04));
}

.watch-empty-state h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.05rem,3vw,1.35rem);
    font-weight: 950;
}

.watch-empty-state p {
    max-width: 460px;
    margin: 10px 0 0;
    color: rgba(255,255,255,.55);
    font-size: .78rem;
    line-height: 1.75;
}

.watch-retry-button {
    min-height: 44px;
    margin-top: 17px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(#030307,#030307) padding-box, linear-gradient(100deg,var(--nova-pink),var(--nova-purple),var(--nova-cyan)) border-box;
}

@keyframes novaWatchShimmer { to { background-position-x: -220%; } }
@keyframes novaWatchSpin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
    .cinematic-actions {
        gap: 10px;
    }

    .cinematic-secondary-action {
        min-height: 50px;
        padding: 0 12px;
        border-radius: 12px;
    }

    .secondary-action-icon {
        width: 30px;
        height: 30px;
        background: transparent;
    }

    .reference-story-block.story-first {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    .reference-production-card {
        margin-top: 14px;
        min-width: 0;
    }

    .reference-production-company {
        grid-template-columns: 52px minmax(0,1fr);
    }

    .reference-production-logo {
        width: 52px;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cinematic-secondary-action,
    .cinematic-secondary-action::after,
    .secondary-action-icon,
    .watch-quality-skeletons i,
    .watch-server-skeletons b,
    .watch-server-skeletons em,
    .watch-loading-note > i { animation: none !important; transition: none !important; }
}

/* =========================================================
   STAGE 9 — STANDALONE EPISODE COMMERCIAL RESTRUCTURE
   Story → Details → Watch, exact action spacing, premium states.
   ========================================================= */
.standalone-episode-page {
    --episode9-purple:#C25DFF;
    --episode9-blue:#6D7DFF;
    --episode9-cyan:#4BE9FF;
    --episode9-grad:linear-gradient(105deg,#C25DFF,#6D7DFF 52%,#4BE9FF);
    background:#000 !important;
}

.standalone-episode-hero-frame {
    border-color:rgba(109,125,255,.16) !important;
    background:#08090e !important;
}

.standalone-episode-hero-content {
    background:linear-gradient(145deg,#0c0d14,#07080c) !important;
}

.standalone-episode-hero-content::before,
.standalone-story-card::before {
    background:var(--episode9-grad) !important;
}

.standalone-episode-actions {
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
}

.standalone-episode-play {
    color:#fff !important;
    background:var(--episode9-grad) !important;
    box-shadow:0 13px 30px rgba(92,70,235,.20) !important;
}

.standalone-episode-state-action {
    min-width:0;
    min-height:48px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid rgba(109,125,255,.22);
    border-radius:10px;
    color:#EDEFFF;
    background:#0A0B11;
    font:850 .70rem Tajawal,Arial,sans-serif;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.standalone-episode-state-action:active { transform:scale(.975); }
.standalone-episode-state-action.favorite.active {
    border-color:rgba(194,93,255,.54);
    color:#fff;
    background:linear-gradient(120deg,rgba(194,93,255,.22),rgba(74,34,92,.18));
    box-shadow:0 0 0 1px rgba(194,93,255,.08) inset,0 10px 26px rgba(194,93,255,.10);
}
.standalone-episode-state-action.mylist.active {
    border-color:rgba(75,233,255,.48);
    color:#fff;
    background:linear-gradient(120deg,rgba(109,125,255,.22),rgba(75,233,255,.09));
    box-shadow:0 0 0 1px rgba(75,233,255,.06) inset,0 10px 26px rgba(75,233,255,.07);
}
.standalone-episode-state-action.favorite.active svg { color:#E574FF; }
.standalone-episode-state-action.mylist.active svg { color:#82EEFF; }

.standalone-episode-tabs {
    min-height:54px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:end;
    gap:4px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.standalone-episode-tabs button {
    position:relative;
    min-height:50px;
    border:0;
    color:rgba(255,255,255,.50);
    background:transparent;
    font:900 .78rem Tajawal,Arial,sans-serif;
}
.standalone-episode-tabs button.active { color:#fff; }
.standalone-episode-tabs button.active::after {
    content:"";
    position:absolute;
    right:18%;
    bottom:-1px;
    left:18%;
    height:3px;
    border-radius:999px;
    background:var(--episode9-grad);
}

.standalone-section-heading-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.standalone-section-heading-row svg { color:#A980FF; }

.standalone-episode-narrative { display:block !important; }
.standalone-story-card.episode-story { width:100%; }
.standalone-story-card.episode-story h2 { margin-top:8px !important; }

.standalone-episode-info-panel {
    padding:20px 22px;
    border:1px solid rgba(109,125,255,.13);
    border-radius:15px;
    background:linear-gradient(145deg,#0c0e16,#07080c);
}
.standalone-episode-info-panel header h2 {
    margin:3px 0 0;
    color:#fff;
    font-size:1rem;
    font-weight:950;
}
.standalone-episode-info-grid {
    margin-top:15px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border:1px solid rgba(255,255,255,.065);
    border-radius:12px;
    overflow:hidden;
}
.standalone-episode-info-grid > div {
    min-height:70px;
    padding:12px 14px;
    display:grid;
    gap:4px;
    align-content:center;
    border-left:1px solid rgba(255,255,255,.055);
    border-bottom:1px solid rgba(255,255,255,.055);
}
.standalone-episode-info-grid > div:nth-child(3n) { border-left:0; }
.standalone-episode-info-grid > div:nth-last-child(-n+3) { border-bottom:0; }
.standalone-episode-info-grid span { color:rgba(255,255,255,.43); font-size:.60rem; }
.standalone-episode-info-grid strong { color:#F5F6FF; font-size:.78rem; font-weight:850; }
.standalone-episode-info-grid strong.available { color:#8CE6BA; }
.standalone-series-return.compact {
    width:auto !important;
    min-height:38px !important;
    margin-top:14px;
    padding-inline:13px !important;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#C8CCE0 !important;
    border:1px solid rgba(109,125,255,.15) !important;
    border-radius:9px !important;
    background:#0A0B11 !important;
}

.standalone-source-panel {
    border-color:rgba(109,125,255,.13) !important;
    background:linear-gradient(145deg,#0c0e16,#07080c) !important;
}
.standalone-source-panel > header p { color:rgba(255,255,255,.48) !important; }
.standalone-source-count {
    border-color:rgba(109,125,255,.16) !important;
    background:#0A0B11 !important;
}

.standalone-watch-loading {
    margin-top:15px;
    display:grid;
    gap:13px;
}
.standalone-quality-skeletons {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.standalone-quality-skeletons span {
    height:40px;
    border:1px solid rgba(109,125,255,.09);
    border-radius:10px;
    background:linear-gradient(100deg,#0b0d14 10%,#151827 46%,#0b0d14 80%);
    background-size:220% 100%;
    animation:standalone-watch-shimmer 1.15s linear infinite;
}
.standalone-server-skeletons { display:grid; gap:8px; }
.standalone-server-skeletons span {
    height:68px;
    border:1px solid rgba(109,125,255,.09);
    border-radius:11px;
    background:linear-gradient(100deg,#0b0d14 10%,#151827 46%,#0b0d14 80%);
    background-size:220% 100%;
    animation:standalone-watch-shimmer 1.15s linear infinite;
}
.standalone-watch-loading > small {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:rgba(255,255,255,.48);
    font-size:.65rem;
}
@keyframes standalone-watch-shimmer { to { background-position-x:-220%; } }

.standalone-watch-empty {
    margin-top:15px;
    min-height:190px;
    padding:22px;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:8px;
    border:1px solid rgba(109,125,255,.12);
    border-radius:13px;
    text-align:center;
    background:radial-gradient(circle at 50% 20%,rgba(109,125,255,.07),transparent 46%),#090a10;
}
.standalone-watch-empty-icon {
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(109,125,255,.22);
    border-radius:16px;
    color:#A980FF;
    background:#0C0E17;
}
.standalone-watch-empty strong { color:#fff; font-size:.9rem; }
.standalone-watch-empty p { max-width:500px; margin:0; color:rgba(255,255,255,.48); font-size:.67rem; line-height:1.7; }
.standalone-watch-empty button {
    min-height:38px;
    margin-top:4px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid transparent;
    border-radius:9px;
    color:#fff;
    background:linear-gradient(#090a10,#090a10) padding-box,var(--episode9-grad) border-box;
    font:850 .66rem Tajawal,Arial,sans-serif;
}

.standalone-related-episodes.compact-navigation {
    padding:18px 20px;
    border:1px solid rgba(109,125,255,.13);
    border-radius:15px;
    background:#090A10;
}
.standalone-related-episodes.compact-navigation > header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.standalone-related-episodes.compact-navigation > header svg { color:#A980FF; }
.standalone-episode-jump-rail {
    display:flex;
    gap:8px;
    overflow-x:auto;
    direction:rtl;
    scrollbar-width:none;
}
.standalone-episode-jump-rail::-webkit-scrollbar { display:none; }
.standalone-episode-jump-rail button {
    flex:0 0 auto;
    min-width:112px;
    min-height:48px;
    padding:7px 11px;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:3px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px;
    color:#EDEFFF;
    background:#0D0F16;
    font-family:inherit;
}
.standalone-episode-jump-rail button:active {
    border-color:rgba(75,233,255,.40);
    transform:scale(.98);
}
.standalone-episode-jump-rail button span { font-size:.68rem; font-weight:850; }
.standalone-episode-jump-rail button small { color:rgba(255,255,255,.40); font-size:.54rem; }

@media(max-width:1120px){
    .standalone-episode-actions { grid-template-columns:1.2fr 1fr !important; }
    .standalone-episode-play { grid-column:1 / -1; }
}

@media(max-width:820px){
    .standalone-episode-tabs { margin-top:2px; }
    .standalone-episode-actions { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .standalone-episode-play { grid-column:1 / -1; }
    .standalone-episode-info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .standalone-episode-info-grid > div:nth-child(3n) { border-left:1px solid rgba(255,255,255,.055); }
    .standalone-episode-info-grid > div:nth-child(2n) { border-left:0; }
    .standalone-episode-info-grid > div:nth-last-child(-n+3) { border-bottom:1px solid rgba(255,255,255,.055); }
    .standalone-episode-info-grid > div:nth-last-child(-n+2) { border-bottom:0; }
}

@media(max-width:560px){
    .standalone-episode-actions { gap:8px !important; }
    .standalone-episode-state-action { min-height:45px; font-size:.64rem; }
    .standalone-episode-tabs { min-height:50px; }
    .standalone-episode-tabs button { min-height:46px; font-size:.70rem; }
    .standalone-episode-info-panel,
    .standalone-related-episodes.compact-navigation { padding:15px; border-radius:13px; }
    .standalone-episode-info-grid > div { min-height:64px; padding:10px; }
    .standalone-quality-skeletons { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .standalone-watch-empty { min-height:170px; padding:18px 14px; }
    .standalone-episode-jump-rail button { min-width:104px; }
}

@media(prefers-reduced-motion:reduce){
    .standalone-quality-skeletons span,
    .standalone-server-skeletons span,
    .standalone-episode-state-action,
    .standalone-episode-jump-rail button { animation:none!important; transition:none!important; }
}

/* Stage 9 active favorite state marker. */
.favorite-icon-state { position:relative; }
.favorite-state-check {
    position:absolute;
    right:-5px;
    bottom:-5px;
    width:16px;
    height:16px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.26);
    border-radius:50%;
    color:#fff;
    background:#08090e;
}
.cinematic-secondary-action.favorite-action.active .favorite-state-check {
    color:#fff;
    border-color:rgba(75,233,255,.38);
    background:linear-gradient(135deg,#C25DFF,#6D7DFF 55%,#4BE9FF);
}
.compact-series-story { margin-top:12px; }

/* =========================================================
   Nova+ details surfaces — pure black policy
   Requested visual rule: all non-media detail surfaces use #000000 only.
   Hero/poster imagery and Nova accent controls remain untouched.
   ========================================================= */
:root,
.nova-app,
.details-app,
.cinematic-details-page {
    --nova-bg-master: #000000 !important;
    --nova-surface-dark: #000000 !important;
    --nova-surface-card: #000000 !important;
    --nova-surface-hover: #000000 !important;
    --details-panel: #000000 !important;
    --details-panel-soft: #000000 !important;
}

.details-app,
.details-page-shell,
.cinematic-details-page,
.cinematic-details-content,
.cinematic-desktop-content,
.cinematic-mobile-content,
.reference-wide-details-grid,
.reference-desktop-grid,
.reference-primary-column,
.reference-side-column,
.reference-panel,
.reference-watch-panel,
.reference-info-panel,
.reference-related-panel,
.reference-production-card,
.reference-production-logo,
.nova-content-section,
.episode-panel,
.watch-options-section,
.standalone-episode-page,
.standalone-episode-hero-frame,
.standalone-episode-media,
.standalone-episode-hero-content,
.standalone-episode-body,
.standalone-episode-narrative,
.standalone-story-card,
.standalone-related-episodes,
.standalone-navigation-card,
.nova-channel-details,
.channel-detail-content,
.channel-detail-panel {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
}

.reference-season-tabs button,
.reference-season-tabs button.active,
.reference-episode-card,
.reference-episode-card:hover,
.watch-server-skeletons > div,
.server-option,
.server-card,
.server-row,
.quality-chip,
.quality-chip.active,
.standalone-episode-meta span,
.cinematic-secondary-action,
.cinematic-secondary-action.active,
.secondary-action-icon,
.reference-production-company,
.reference-promo-card {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
}

/* Keep media itself visible; only its empty/fallback canvas is pure black. */
.related-poster-shell,
.reference-related-card img,
.reference-episode-thumb,
.standalone-episode-media img,
.cinematic-details-backdrop-shell {
    background-color: #000000 !important;
}


/* Anime semantic details: keep the existing details architecture, only allow
   multi-value taxonomy and character labels to breathe inside the native grid. */
.reference-info-grid > .reference-anime-genres {
    grid-column: span 2;
}

.reference-info-grid > .reference-anime-genres dd {
    overflow: visible;
    white-space: normal;
    line-height: 1.55;
    text-overflow: clip;
}

.reference-anime-characters .anime-character-card small {
    white-space: normal;
    line-height: 1.35;
}

@media (max-width: 680px) {
    .reference-info-grid > .reference-anime-genres {
        grid-column: 1 / -1;
    }
}


/* Anime semantic hero facts: same NOVA+ details palette and surface language. */
.anime-hero-facts {
    width: min(780px, 100%);
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.anime-hero-facts > div {
    min-width: 0;
    padding: 9px 11px;
    display: grid;
    gap: 4px;
    border: 1px solid var(--oscar-border);
    border-radius: 9px;
    background: var(--oscar-bg);
    backdrop-filter: blur(10px);
}

.anime-hero-facts dt,
.anime-hero-facts dd {
    margin: 0;
}

.anime-hero-facts dt {
    color: var(--oscar-muted);
    font-size: .62rem;
    font-weight: 750;
}

.anime-hero-facts dd {
    overflow: hidden;
    color: var(--oscar-text);
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.45;
    text-overflow: ellipsis;
}

.anime-hero-facts-wide {
    grid-column: 1 / -1;
}

.anime-hero-facts-wide dd {
    white-space: normal;
}

@media (max-width: 820px) {
    .anime-hero-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .anime-hero-facts > div {
        padding: 7px 9px;
        border-radius: 8px;
    }

    .anime-hero-facts dt {
        font-size: .56rem;
    }

    .anime-hero-facts dd {
        font-size: .68rem;
    }
}

/* Final freeze — direction must win over legacy RTL presentation rules. */
.details-app .reference-story-block .reference-details-story.nova-directional-text[dir="ltr"],
.details-app .details-standard-title h1[dir="ltr"],
.details-app .cinematic-title[dir="ltr"] {
    direction:ltr !important;
    text-align:left !important;
    unicode-bidi:plaintext;
}

.details-app .reference-story-block .reference-details-story.nova-directional-text[dir="rtl"],
.details-app .details-standard-title h1[dir="rtl"],
.details-app .cinematic-title[dir="rtl"] {
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext;
}


/* ===== Components/Pages/Account.razor.css ===== */
.nova-web-page {display:block;min-height:100dvh;background:#000!important}.account-page-app{min-height:100dvh;background:#000!important;color:#fff;font-family:Tajawal,Arial,sans-serif;padding-bottom:calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px))}.account-pro-header{position:fixed;z-index:160;top:0;right:0;left:0;height:calc(72px + var(--safe-top,0px));padding:var(--safe-top,0px) max(clamp(16px,3vw,36px),var(--safe-right,0px)) 0 max(clamp(16px,3vw,36px),var(--safe-left,0px));display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:#000!important;border-bottom:1px solid rgba(255,255,255,.08)}.account-pro-header h1{margin:0;text-align:center;color:#fff;font-size:1.55rem;font-weight:950}.account-pro-header button{width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:#000;color:#fff}.account-page-shell{min-height:100dvh;padding:calc(92px + var(--safe-top,0px)) clamp(14px,3vw,44px) calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 34px);overflow-x:hidden;background:#000!important;background-image:none!important}@media(max-width:640px){.account-pro-header{height:calc(64px + var(--safe-top,0px));grid-template-columns:44px 1fr 44px}.account-pro-header h1{font-size:1.3rem}.account-pro-header button{width:44px;height:44px}.account-page-shell{padding-top:calc(78px + var(--safe-top,0px));padding-inline:12px}}

.account-pro-header button{transition:transform .12s ease,background-color .12s ease}.account-pro-header button:active{transform:scale(.96);background:rgba(255,255,255,.05)}.account-pro-header button:focus-visible{outline:2px solid rgba(109,125,255,.9);outline-offset:2px}