/*
   Space Gate Nova+ — Premium Cinematic Pass (2026-08-17)
   Loaded LAST after the Ultimate Visual Contract.

   Purpose:
   - cinematic hero blending + restrained brand ambience
   - single typography / spacing / radius / shadow rhythm
   - clean media cards (never neon-framed)
   - premium search / filters / buttons / tabs
   - details + episodes elevation
   - subtle interactions, skeletons and image reveal
   - stable route polish that does NOT transform fixed-navigation ancestors
*/

:root {
    /* Brand is intentionally scarce: only controls, active states and progress. */
    --nova-p4-pink: #F04AD8;
    --nova-p4-violet: #9B4DFF;
    --nova-p4-cyan: #14D7FF;
    --nova-p4-brand: linear-gradient(100deg, var(--nova-p4-pink) 0%, var(--nova-p4-violet) 50%, var(--nova-p4-cyan) 100%);

    --nova-p4-bg: #000000;
    --nova-p4-surface-0: #05060A;
    --nova-p4-surface-1: #080A0F;
    --nova-p4-surface-2: #0B0D14;
    --nova-p4-glass: rgba(10, 12, 18, .78);
    --nova-p4-glass-strong: rgba(8, 10, 15, .92);
    --nova-p4-line: rgba(255, 255, 255, .065);
    --nova-p4-line-strong: rgba(255, 255, 255, .125);
    --nova-p4-text: rgba(255, 255, 255, .98);
    --nova-p4-text-secondary: rgba(248, 249, 253, .68);
    --nova-p4-text-muted: rgba(248, 249, 253, .48);

    /* Only two elevation families across the product. */
    --nova-p4-shadow-card: 0 12px 30px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .018);
    --nova-p4-shadow-overlay: 0 22px 58px rgba(0, 0, 0, .54), inset 0 1px 0 rgba(255, 255, 255, .025);

    --nova-p4-r-sm: 10px;
    --nova-p4-r-card: 14px;
    --nova-p4-r-panel: 18px;
    --nova-p4-pill: 999px;

    /* Strict 4/8 rhythm; 56 is the only large exception. */
    --nova-p4-s1: 4px;
    --nova-p4-s2: 8px;
    --nova-p4-s3: 12px;
    --nova-p4-s4: 16px;
    --nova-p4-s5: 20px;
    --nova-p4-s6: 24px;
    --nova-p4-s7: 32px;
    --nova-p4-s8: 40px;
    --nova-p4-s9: 56px;
    --nova-p4-page-x: clamp(12px, 3vw, 28px);
    --nova-p4-section-y: clamp(30px, 4.5vw, 48px);

    --nova-p4-hero-title: clamp(2.1rem, 6vw, 5.4rem);
    --nova-p4-section-title: clamp(1.02rem, 2vw, 1.28rem);
    --nova-p4-card-title: clamp(.72rem, 1.2vw, .90rem);
    --nova-p4-meta: clamp(.60rem, .95vw, .74rem);
    --nova-p4-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------------------------------------------------------------
   1. FOUNDATION / PREMIUM GRAIN / TYPE
   --------------------------------------------------------------- */
html,
body,
#app,
.main-layout-shell,
.sg-route-frame,
.sg-route-surface {
    background: var(--nova-p4-bg) !important;
}

body::after {
    content: "";
    position: fixed;
    z-index: 2147482000;
    inset: 0;
    pointer-events: none;
    opacity: .022;
    background-image:
        repeating-radial-gradient(circle at 0 0,
            rgba(255,255,255,.9) 0 .45px,
            transparent .55px 2.4px);
    background-size: 5px 5px;
    mix-blend-mode: soft-light;
}

html.sg-player-open body::after,
body.sg-player-open::after {
    opacity: 0 !important;
}

body {
    color: var(--nova-p4-text) !important;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Four-level hierarchy: Hero / Section / Card / Metadata. */
:is(.target-hero-text h1, .cinematic-title, .channel-detail-copy h1, .standalone-episode-series-name) {
    color: var(--nova-p4-text) !important;
    font-size: var(--nova-p4-hero-title) !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
}

:is(.shahid-section-heading h2, .section-heading h2, .nova-section-head h2,
    .anime-ref-section-head h2, .anime-v2-section-head h2, .movie-producers-head h2,
    .movie-collections-rail-head h2, .episode-gallery-heading h2,
    .standalone-section-heading-row h2) {
    color: var(--nova-p4-text) !important;
    font-size: var(--nova-p4-section-title) !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: -.012em !important;
}

:is(.media-title, .card-title, .poster-title, .nova-media-card > strong,
    .discover-desktop-card > strong, .sg-anime-pro-card .copy b,
    .sg-wrestling-card .copy > b, .anime-ref-card-copy strong,
    .movie-collection-card-copy strong, .continue-watching-card > strong,
    .episode-gallery-collapsed-copy strong) {
    color: rgba(255,255,255,.96) !important;
    font-size: var(--nova-p4-card-title) !important;
    font-weight: 820 !important;
    line-height: 1.38 !important;
}

:is(.media-meta, .card-meta, .nova-media-card > small, .discover-desktop-card > small,
    .sg-anime-pro-card .copy small, .sg-wrestling-card .secondary-meta,
    .anime-ref-card-copy small, .movie-collection-card-copy small,
    .continue-watching-card > small, .episode-gallery-collapsed-copy small) {
    color: var(--nova-p4-text-muted) !important;
    font-size: var(--nova-p4-meta) !important;
    line-height: 1.5 !important;
}

/* ---------------------------------------------------------------
   2. CINEMATIC HERO — HOME / ANIME / WRESTLING / DETAILS
   --------------------------------------------------------------- */
:is(.target-home-hero-shell, .cinematic-details-hero, .channel-detail-hero,
    .standalone-episode-hero, .world-hub-stage, .anime-ref-hero, .wrestling-hero) {
    background: #000 !important;
}

.target-hero-slide::before,
.cinematic-details-hero::before,
.channel-detail-hero::before,
.standalone-episode-hero::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 58% 38% at 50% 82%, rgba(155,77,255,.055), transparent 70%),
        radial-gradient(ellipse 82% 64% at 50% 42%, transparent 52%, rgba(0,0,0,.32) 82%, rgba(0,0,0,.58) 100%);
}

.target-hero-shade,
.cinematic-details-shade,
.channel-detail-shade,
.standalone-episode-shade {
    background:
        linear-gradient(180deg,
            rgba(0,0,0,.12) 0%,
            rgba(0,0,0,.02) 24%,
            rgba(0,0,0,.04) 44%,
            rgba(0,0,0,.30) 64%,
            rgba(0,0,0,.76) 82%,
            #000 100%),
        radial-gradient(ellipse 92% 82% at 50% 48%, transparent 44%, rgba(0,0,0,.28) 78%, rgba(0,0,0,.62) 100%) !important;
}

/* Desktop details needs a side-readable fade without killing the artwork. */
@media (min-width: 900px) {
    .cinematic-details-shade {
        background:
            linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.10) 56%, rgba(0,0,0,.86) 100%),
            linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.78) 26%, rgba(0,0,0,.26) 54%, rgba(0,0,0,.04) 78%, rgba(0,0,0,.18) 100%),
            radial-gradient(ellipse 70% 90% at 70% 45%, transparent 48%, rgba(0,0,0,.34) 100%) !important;
    }
}

:is(.target-hero-text, .cinematic-hero-copy, .channel-detail-copy) {
    position: relative;
}

:is(.target-hero-text, .cinematic-hero-copy, .channel-detail-copy)::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -28px -36px;
    pointer-events: none;
    opacity: .65;
    filter: blur(24px);
    background: radial-gradient(ellipse at center, rgba(0,0,0,.56), transparent 72%);
}

:is(.target-hero-text h1, .cinematic-title, .cinematic-title-en, .channel-detail-copy h1) {
    text-shadow: 0 5px 24px rgba(0,0,0,.78), 0 1px 0 rgba(255,255,255,.025) !important;
}

.target-home-hero-shell {
    margin-bottom: var(--nova-p4-s7) !important;
}

.target-hero-copy {
    bottom: clamp(76px, 10dvh, 112px) !important;
}

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

.target-hero-text p {
    color: rgba(255,255,255,.76) !important;
    font-weight: 720 !important;
}

.target-hero-meta {
    color: rgba(255,255,255,.66) !important;
    gap: 6px 10px !important;
}

.target-hero-meta > span:not(.target-hero-status) + span:not(.target-hero-status)::before {
    width: 3px !important;
    height: 3px !important;
    margin-inline: 2px 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.40) !important;
}

/* Tiny brand status jewel is acceptable; it is not a card frame. */
.target-hero-status::before {
    width: 7px !important;
    height: 7px !important;
    box-shadow: 0 0 10px rgba(155,77,255,.22) !important;
}

.target-hero-actions {
    width: min(100%, 410px) !important;
    margin-top: var(--nova-p4-s4) !important;
    gap: var(--nova-p4-s3) !important;
}

.target-watch-button,
.target-save-button {
    height: 48px !important;
    min-height: 48px !important;
    padding-inline: 20px !important;
    font-size: .82rem !important;
}

/* ---------------------------------------------------------------
   3. MEDIA CARDS — CLEAN, FLAT, CINEMATIC
   --------------------------------------------------------------- */
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
    .movie-collection-card-art, .favorites-card-art, .notification-media,
    .anime-ref-poster-art, .anime-v2-episode-art, .anime-ref-episode-art,
    .related-poster-shell, .episode-gallery-card,
    .sg-anime-pro-card .art, .sg-wrestling-card .artwork,
    .shahid-poster-image, .shahid-ranked-poster, .shahid-landscape-image,
    .shahid-live-poster, .continue-watching-image) {
    border: 1px solid rgba(255,255,255,.055) !important;
    border-image: none !important;
    border-radius: var(--nova-p4-r-card) !important;
    background: var(--nova-p4-surface-1) !important;
    background-image: none !important;
    box-shadow: var(--nova-p4-shadow-card) !important;
    overflow: hidden !important;
}

:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
    .movie-collection-card-art, .favorites-card-art, .notification-media,
    .anime-ref-poster-art, .anime-v2-episode-art, .anime-ref-episode-art,
    .related-poster-shell, .episode-gallery-card,
    .sg-anime-pro-card .art, .sg-wrestling-card .artwork,
    .shahid-poster-image, .shahid-ranked-poster, .shahid-landscape-image,
    .shahid-live-poster, .continue-watching-image)::before,
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
    .movie-collection-card-art, .favorites-card-art, .notification-media,
    .anime-ref-poster-art, .anime-v2-episode-art, .anime-ref-episode-art,
    .related-poster-shell, .episode-gallery-card,
    .sg-anime-pro-card .art, .sg-wrestling-card .artwork,
    .shahid-poster-image, .shahid-ranked-poster, .shahid-landscape-image,
    .shahid-live-poster, .continue-watching-image)::after {
    border-image: none !important;
    box-shadow: none !important;
}

:is(.poster-wrapper, .poster-wrap, .nova-media-art,
    .sg-anime-pro-card.poster .art, .sg-wrestling-card.poster .artwork,
    .sg-wrestling-card.ranked .artwork, .anime-ref-poster-art) {
    aspect-ratio: 2 / 3 !important;
}

:is(.sg-anime-pro-card.episode .art, .sg-wrestling-card.landscape .artwork,
    .anime-v2-episode-art, .anime-ref-episode-art, .continue-watching-image,
    .episode-gallery-collapsed-art, .episode-gallery-expanded-art) {
    aspect-ratio: 16 / 9 !important;
}

/* No outer neon on focus: use a neutral high-contrast ring. */
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
    .movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
    .anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
    .continue-watching-card):focus-visible {
    outline: 2px solid rgba(255,255,255,.62) !important;
    outline-offset: 3px !important;
}

:is(.sg-anime-pro-card, .sg-wrestling-card):focus-visible :is(.art, .artwork),
.continue-watching-card:focus-visible .continue-watching-image {
    outline: 0 !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: var(--nova-p4-shadow-card) !important;
}

@media (hover: hover) and (pointer: fine) {
    :is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
        .movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
        .anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
        .continue-watching-card) {
        transition: transform 180ms var(--nova-p4-ease), opacity 180ms var(--nova-p4-ease) !important;
    }

    :is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
        .movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
        .anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
        .continue-watching-card):hover {
        transform: translateY(-3px) !important;
    }

    :is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
        .movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
        .anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
        .continue-watching-card):hover :is(.poster-wrapper, .poster-wrap, .nova-media-art,
            .discover-desktop-art, .movie-collection-card-art, .art, .artwork,
            .anime-ref-poster-art, .anime-v2-episode-art, .continue-watching-image) {
        border-color: rgba(255,255,255,.105) !important;
        box-shadow: 0 17px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.025) !important;
    }

    :is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
        .movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
        .anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
        .continue-watching-card):hover img {
        transform: scale(1.025) !important;
    }
}

:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
    .movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
    .anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
    .continue-watching-card):active {
    transform: scale(.985) !important;
}

/* ---------------------------------------------------------------
   4. IMAGE REVEAL — SafeImage lifecycle class
   --------------------------------------------------------------- */
.nova-fast-image {
    transition: opacity 220ms var(--nova-p4-ease), transform 280ms var(--nova-p4-ease), filter 220ms var(--nova-p4-ease) !important;
}

.nova-fast-image.nova-image-pending {
    opacity: .34 !important;
    filter: saturate(.78) brightness(.72) blur(3px) !important;
}

.nova-fast-image.nova-image-loaded {
    opacity: 1 !important;
    filter: none !important;
}

/* ---------------------------------------------------------------
   5. CONTINUE WATCHING — premium 16:9 + hairline progress
   --------------------------------------------------------------- */
.continue-watching-section {
    padding-block: var(--nova-p4-s4) var(--nova-p4-section-y) !important;
}

.continue-watching-section .shahid-section-heading {
    min-height: 52px !important;
    padding-inline: var(--nova-p4-page-x) !important;
}

.continue-watching-section .shahid-section-heading h2 {
    padding-inline-start: 0 !important;
}

.continue-watching-section .shahid-section-heading h2::before {
    content: none !important;
    display: none !important;
}

.continue-watching-rail {
    padding-inline: var(--nova-p4-page-x) !important;
    scroll-padding-inline: var(--nova-p4-page-x) !important;
    gap: var(--nova-p4-s3) !important;
}

.continue-watching-card {
    flex-basis: clamp(220px, 42vw, 320px) !important;
    max-width: 320px !important;
    gap: 6px !important;
}

.continue-watching-progress {
    inset-inline: 0 !important;
    bottom: 0 !important;
    height: 3px !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.14) !important;
}

.continue-watching-progress > i {
    background: var(--nova-p4-brand) !important;
    box-shadow: none !important;
}

.continue-watching-card > small {
    color: var(--nova-p4-text-muted) !important;
}

/* ---------------------------------------------------------------
   6. SEARCH / FILTERS / TABS — jewellery, not decoration
   --------------------------------------------------------------- */
:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
    .sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
    .world-hub-search, .search-solid-input) {
    min-height: 46px !important;
    border-radius: var(--nova-p4-r-sm) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.30), 0 0 12px rgba(155,77,255,.045) !important;
}

:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
    .sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
    .world-hub-search):focus-within,
.search-solid-input:focus {
    box-shadow: 0 12px 28px rgba(0,0,0,.38), 0 0 18px rgba(155,77,255,.11) !important;
}

:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
    .sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
    .world-hub-search) > .oscar-icon,
:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
    .sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
    .world-hub-search) svg {
    transition: transform 180ms var(--nova-p4-ease), opacity 180ms var(--nova-p4-ease) !important;
}

:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
    .sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
    .world-hub-search):focus-within > .oscar-icon {
    transform: scale(1.06) !important;
}

.search-field > .icon-button:last-child {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.045) !important;
}

:is(.category-tabs button, .filter-chip, .nova-catalog-select-card,
    .discover-desktop-tabs button, .discover-result-tabs button, .discover-topic-chip,
    .favorites-filters button, .notifications-filters button, .mc-day-tabs button,
    .mc-league-tabs button, .anime-season-chip, .related-type-chip,
    .schedule-day-control, .archive-year-control) {
    min-height: 38px !important;
    padding-inline: 13px !important;
    border-radius: var(--nova-p4-r-sm) !important;
    font-size: .74rem !important;
}

:is(.cinematic-tabs, .pro-comments-tabs, .standalone-episode-tabs,
    .sg-anime-pro-nav, .sg-wrestling-section-nav) {
    gap: clamp(8px, 2vw, 22px) !important;
}

:is(.cinematic-tabs button, .pro-comments-tabs button, .standalone-episode-tabs button,
    .sg-anime-pro-nav button, .sg-wrestling-section-nav button).active::after {
    right: 30% !important;
    left: 30% !important;
    height: 2px !important;
    box-shadow: 0 0 8px rgba(155,77,255,.16) !important;
    transition: right 190ms var(--nova-p4-ease), left 190ms var(--nova-p4-ease), opacity 190ms var(--nova-p4-ease) !important;
}

/* ---------------------------------------------------------------
   7. BOTTOM NAV — gradient icon + white label + tiny indicator
   --------------------------------------------------------------- */
nav.oscar-bottom-nav.original-bottom-nav {
    background: rgba(3,4,7,.94) !important;
    border-top-color: rgba(255,255,255,.055) !important;
    box-shadow: 0 -16px 36px rgba(0,0,0,.44) !important;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a) {
    gap: 3px !important;
    color: rgba(248,249,253,.44) !important;
}

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: transparent !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    font-weight: 800 !important;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 2px !important;
    left: 50% !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: var(--nova-p4-pill) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.5) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: opacity 170ms var(--nova-p4-ease), transform 190ms var(--nova-p4-ease) !important;
}

nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active::before {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
    background: var(--nova-p4-brand) !important;
    box-shadow: 0 0 8px rgba(155,77,255,.18) !important;
}

/* ---------------------------------------------------------------
   8. DETAILS — cinematic hierarchy, unboxed story, glass info cells
   --------------------------------------------------------------- */
.cinematic-details-hero {
    min-height: clamp(430px, 58dvh, 680px) !important;
}

.cinematic-hero-copy {
    width: min(48vw, 560px) !important;
}

.cinematic-title {
    margin-block: 10px 12px !important;
}

.cinematic-meta {
    gap: 6px !important;
}

.cinematic-meta > * {
    min-height: 28px !important;
    padding-inline: 10px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: var(--nova-p4-r-sm) !important;
    background: rgba(0,0,0,.34) !important;
    color: rgba(255,255,255,.74) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.cinematic-ranking {
    margin-top: var(--nova-p4-s3) !important;
    gap: var(--nova-p4-s2) !important;
}

.cinematic-ranking span {
    min-height: 34px !important;
    padding-inline: 11px !important;
    border-color: rgba(255,255,255,.075) !important;
    border-radius: var(--nova-p4-r-sm) !important;
    background: rgba(3,5,9,.46) !important;
    color: var(--nova-p4-text-secondary) !important;
}

.cinematic-actions {
    margin-top: var(--nova-p4-s5) !important;
    gap: var(--nova-p4-s3) !important;
}

/* Narrative text should breathe on the canvas rather than live inside a box. */
:is(.reference-story-block, .reference-details-story, .series-story, .episode-story,
    .standalone-story-card, .standalone-episode-narrative .standalone-story-card) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

:is(.reference-story-block, .standalone-story-card, .series-story, .episode-story) {
    padding-inline: 0 !important;
}

:is(.reference-details-story, .reference-story-block p, .series-story p,
    .episode-story p, .standalone-story-card p, .cinematic-story p) {
    color: rgba(248,249,253,.72) !important;
    font-size: clamp(.84rem, 1.3vw, 1rem) !important;
    line-height: 1.9 !important;
    max-width: 76ch !important;
}

/* Information turns into quiet mini glass cells, never neon. */
.reference-info-grid,
.anime-hero-facts,
.standalone-episode-info-grid,
.channel-detail-facts {
    display: grid !important;
    gap: var(--nova-p4-s2) !important;
    border: 0 !important;
}

.reference-info-grid > div,
.anime-hero-facts > div,
.standalone-episode-info-grid > div,
.channel-detail-facts > div {
    min-height: 56px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255,255,255,.065) !important;
    border-radius: var(--nova-p4-r-sm) !important;
    background: rgba(255,255,255,.025) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.015) !important;
}

.reference-info-grid dt,
.anime-hero-facts dt,
.standalone-episode-info-grid span,
.channel-detail-facts span {
    color: var(--nova-p4-text-muted) !important;
    font-size: .62rem !important;
}

.reference-info-grid dd,
.anime-hero-facts dd,
.standalone-episode-info-grid strong,
.channel-detail-facts strong {
    color: rgba(255,255,255,.92) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
}

.cinematic-details-content {
    width: min(calc(100% - 2 * var(--nova-p4-page-x)), 1120px) !important;
    padding-bottom: var(--nova-p4-s9) !important;
}

.cinematic-tabs {
    margin-top: var(--nova-p4-s2) !important;
}

.cinematic-desktop-content,
.cinematic-tab-content {
    padding-top: var(--nova-p4-s5) !important;
}

/* ---------------------------------------------------------------
   9. EPISODES — clean 16:9 cards + status progress, no gradient frame
   --------------------------------------------------------------- */
.episode-gallery-list {
    gap: var(--nova-p4-s3) !important;
}

.episode-gallery-card,
.episode-gallery-card.expanded,
.cinematic-tab-content .nova-episode-card,
.nova-episode-card,
.episode-gallery-entry {
    border-color: rgba(255,255,255,.065) !important;
    background: var(--nova-p4-surface-1) !important;
    background-image: none !important;
    box-shadow: var(--nova-p4-shadow-card) !important;
}

.episode-gallery-card::before,
.episode-gallery-card.expanded::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

.episode-gallery-collapsed-art,
.episode-gallery-expanded-art,
.cinematic-tab-content .ep-thumb {
    aspect-ratio: 16 / 9 !important;
    border-radius: var(--nova-p4-r-sm) !important;
}

.episode-gallery-progress,
:is(.nova-episode-card, .episode-gallery-card) .episode-progress,
:is(.nova-episode-card, .episode-gallery-card) .progress-fill {
    height: 3px !important;
    background: var(--nova-p4-brand) !important;
    box-shadow: none !important;
}

.episode-gallery-collapsed-copy strong {
    margin-bottom: 5px !important;
}

.episode-gallery-collapsed-copy small {
    color: var(--nova-p4-text-muted) !important;
    line-height: 1.65 !important;
}

.episode-gallery-collapsed-meta {
    color: var(--nova-p4-text-muted) !important;
}

.episode-gallery-more,
.episode-gallery-collapse {
    border-color: rgba(255,255,255,.10) !important;
    border-radius: var(--nova-p4-r-sm) !important;
    background: rgba(255,255,255,.025) !important;
}

.episode-gallery-more:hover,
.episode-gallery-more:focus-visible {
    border-color: rgba(255,255,255,.18) !important;
}

/* ---------------------------------------------------------------
   10. ANIME / WRESTLING — same Nova identity, subtle world ambience
   --------------------------------------------------------------- */
:is(.sg-anime-pro-home, .sg-anime-catalog, .anime-ref-shell, .anime-v2-shell) {
    background:
        radial-gradient(circle at 84% 10%, rgba(155,77,255,.035), transparent 25%),
        radial-gradient(circle at 14% 36%, rgba(20,215,255,.018), transparent 24%),
        #000 !important;
}

:is(.sg-wrestling-home, .sg-wrestling-catalog, .wrestling-world-shell) {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.028), transparent 34%),
        linear-gradient(180deg, #020306 0%, #000 38%) !important;
}

/* Studio / wrestling brand tiles are navigation/data surfaces: quiet glass only. */
:is(.studio-tile, .anime-v2-studio-card, .anime-native-studio,
    .wrestling-brand-tile, .brand-tile-shell, .movie-producer-card) {
    border-color: rgba(255,255,255,.065) !important;
    border-radius: var(--nova-p4-r-card) !important;
    background: linear-gradient(155deg, rgba(13,15,22,.78), rgba(5,6,10,.92)) !important;
    background-image: linear-gradient(155deg, rgba(13,15,22,.78), rgba(5,6,10,.92)) !important;
    box-shadow: var(--nova-p4-shadow-card) !important;
}

/* ---------------------------------------------------------------
   11. PANELS / GLASS — reserve blur for overlays and chrome
   --------------------------------------------------------------- */
:is(.oscar-toolbar, .account-pro-header, .favorites-pro-header, .notifications-pro-header,
    .nova-catalog-fixed-header, .catalog-landing-toolbar, .nova-native-catalog-header,
    .rail-catalog-header, .details-standard-header, .nova-live-fixed-header,
    .search-sheet, .nova-live-filter-panel, .nova-live-menu, .sg-notification-panel,
    .sg-notification-headsup, .side-menu) {
    backdrop-filter: blur(20px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.05) !important;
}

/* Content panels are flatter than overlays. */
:is(.reference-info-panel, .reference-watch-panel, .channel-detail-status-card,
    .channel-detail-source-card, .episode-panel, .episode-gallery-panel,
    .favorites-featured, .notifications-delivery-state, .settings-intro,
    .settings-section, .settings-status-card, .mc-match-card, .mc-detail-card,
    .content-comment, .download-link-card) {
    border-color: rgba(255,255,255,.06) !important;
    border-radius: var(--nova-p4-r-panel) !important;
    background: rgba(8,10,15,.72) !important;
    background-image: none !important;
    box-shadow: var(--nova-p4-shadow-card) !important;
}

/* ---------------------------------------------------------------
   12. SPACING / BREATHING ROOM
   --------------------------------------------------------------- */
:is(.shahid-home-section, .oscar-section, .sg-anime-pro-section, .home-section,
    .anime-ref-section, .anime-v2-studios, .anime-v2-episodes,
    .movie-producers-section, .movie-collections-rail, .nova-content-section) {
    margin-bottom: var(--nova-p4-section-y) !important;
}

:is(.shahid-section-heading, .section-heading, .sg-anime-pro-section > header,
    .home-section > header, .anime-ref-section-head, .anime-v2-section-head,
    .movie-producers-head, .movie-collections-rail-head, .nova-section-head) {
    min-height: 48px !important;
    padding-bottom: var(--nova-p4-s3) !important;
}

:is(.poster-rail, .shahid-home-rail, .studio-rail, .episode-rail, .brand-rail,
    .continue-rail, .anime-ref-continue-rail, .anime-v2-studio-rail,
    .anime-v2-episode-rail, .movie-producers-rail, .movie-collections-rail-row) {
    gap: var(--nova-p4-s3) !important;
}

:is(.oscar-grid, .discover-desktop-grid, .rail-catalog-grid,
    .sg-anime-commercial-grid, .sg-wrestling-media-grid, .nova-related-grid) {
    row-gap: var(--nova-p4-s6) !important;
    column-gap: var(--nova-p4-s3) !important;
}

/* ---------------------------------------------------------------
   13. SKELETONS — slower graphite shimmer
   --------------------------------------------------------------- */
:is(.catalog-shimmer, .nova-shimmer, .home-skeleton-card, .home-skeleton-heading,
    .catalog-landing-skeleton-card, .catalog-landing-skeleton-heading,
    .anime-ref-skeleton-brand, .anime-ref-skeleton-tools > *, .anime-ref-skeleton-switcher > *,
    .anime-ref-skeleton-hero-copy > *, .anime-ref-skeleton-cards > *,
    .catalog-skeleton, .catalog-skeleton > *, .home-skeleton-row > *,
    .home-hero-skeleton-copy > *, .schedule-skeleton > *, .skeleton-match,
    .favorites-skeletons > *, .favorites-skeletons i,
    .watch-quality-skeletons > *, .watch-server-skeletons > *,
    .standalone-quality-skeletons > *, .standalone-server-skeletons > *) {
    border-color: rgba(255,255,255,.035) !important;
    background: linear-gradient(110deg, #06070A 12%, #090B10 44%, #0D0F16 52%, #090B10 60%, #06070A 88%) !important;
    background-size: 245% 100% !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
    animation-duration: 1.9s !important;
    animation-timing-function: ease-in-out !important;
}

/* ---------------------------------------------------------------
   14. EMPTY / ERROR — minimal, one clear action
   --------------------------------------------------------------- */
:is(.favorites-empty, .notifications-empty, .catalog-empty, .rail-catalog-empty,
    .sg-anime-catalog-empty, .schedule-empty, .day-empty, .nova-empty-state,
    .discover-error, .server-driven-error, .standalone-watch-empty,
    .nova-offline-state, .nova-not-found) {
    max-width: 520px !important;
    margin-inline: auto !important;
    padding: clamp(28px, 6vw, 52px) var(--nova-p4-s6) !important;
    text-align: center !important;
}

:is(.favorites-empty, .notifications-empty, .catalog-empty, .rail-catalog-empty,
    .sg-anime-catalog-empty, .schedule-empty, .nova-empty-state, .discover-error,
    .nova-offline-state, .nova-not-found) p {
    max-width: 44ch !important;
    margin-inline: auto !important;
    color: var(--nova-p4-text-secondary) !important;
    line-height: 1.75 !important;
}

/* ---------------------------------------------------------------
   15. CONTENT ENTRANCE — 8px lift without touching fixed ancestors
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .sg-route-surface :is(.shahid-home-section, .catalog-landing-main > section,
        .nova-catalog-main > section, .cinematic-details-content,
        .favorites-page-content > section, .notifications-page-content > section,
        .settings-layout > section, .discover-mobile-section,
        .server-collections-shell > section, .rail-catalog-main > section) {
        animation: novaP4ContentIn 190ms var(--nova-p4-ease) both;
    }
}

@keyframes novaP4ContentIn {
    from { opacity: .01; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------
   16. RESPONSIVE POLISH
   --------------------------------------------------------------- */
@media (max-width: 760px) {
    :root {
        --nova-p4-page-x: 12px;
        --nova-p4-section-y: 32px;
        --nova-p4-hero-title: clamp(2rem, 11.5vw, 4rem);
    }

    body::after { opacity: .014; }

    .target-hero-slide {
        height: clamp(520px, 76dvh, 700px) !important;
        min-height: 520px !important;
    }

    .target-hero-copy {
        right: 14px !important;
        left: 14px !important;
        bottom: 74px !important;
    }

    .target-hero-actions {
        width: min(100%, 360px) !important;
        gap: 10px !important;
    }

    .target-watch-button,
    .target-save-button {
        height: 44px !important;
        min-height: 44px !important;
        font-size: .76rem !important;
    }

    .cinematic-details-hero {
        min-height: clamp(520px, 70dvh, 680px) !important;
    }

    .cinematic-hero-copy {
        width: auto !important;
    }

    .cinematic-actions {
        gap: 8px !important;
    }

    .reference-info-grid,
    .standalone-episode-info-grid,
    .channel-detail-facts {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .episode-gallery-list {
        grid-template-columns: 1fr !important;
    }

    .episode-gallery-collapsed {
        grid-template-columns: minmax(128px, 38%) minmax(0,1fr) !important;
    }

    .episode-gallery-collapsed-meta {
        display: none !important;
    }
}

@media (max-width: 390px) {
    :root {
        --nova-p4-page-x: 10px;
        --nova-p4-section-y: 28px;
    }

    :is(.category-tabs button, .filter-chip, .nova-catalog-select-card,
        .discover-desktop-tabs button, .discover-result-tabs button, .discover-topic-chip,
        .favorites-filters button, .notifications-filters button) {
        min-height: 36px !important;
        padding-inline: 11px !important;
    }
}

/* ---------------------------------------------------------------
   17. REDUCED MOTION + FINAL NO-NEON CARD GUARD
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nova-fast-image,
    :is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
        .movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
        .anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
        .continue-watching-card) {
        transition: none !important;
        animation: none !important;
    }

    .nova-fast-image.nova-image-pending {
        opacity: 1 !important;
        filter: none !important;
    }
}

/* Content artwork / media / studio / wrestling tiles can never inherit a brand frame. */
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
    .movie-collection-card-art, .favorites-card-art, .notification-media,
    .sg-anime-pro-card .art, .sg-wrestling-card .artwork,
    .studio-tile, .anime-v2-studio-card, .anime-native-studio,
    .wrestling-brand-tile, .brand-tile-shell, .movie-producer-card,
    .channel-card, .mc-match-card, .related-poster-shell,
    .episode-gallery-card, .anime-ref-poster-art,
    .anime-v2-episode-art, .anime-ref-episode-art,
    .continue-watching-image) {
    border-image: none !important;
    outline-color: transparent !important;
}

:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
    .movie-collection-card-art, .favorites-card-art, .notification-media,
    .sg-anime-pro-card .art, .sg-wrestling-card .artwork,
    .studio-tile, .anime-v2-studio-card, .anime-native-studio,
    .wrestling-brand-tile, .brand-tile-shell, .movie-producer-card,
    .channel-card, .mc-match-card, .related-poster-shell,
    .episode-gallery-card, .anime-ref-poster-art,
    .anime-v2-episode-art, .anime-ref-episode-art,
    .continue-watching-image)::before,
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
    .movie-collection-card-art, .favorites-card-art, .notification-media,
    .sg-anime-pro-card .art, .sg-wrestling-card .artwork,
    .studio-tile, .anime-v2-studio-card, .anime-native-studio,
    .wrestling-brand-tile, .brand-tile-shell, .movie-producer-card,
    .channel-card, .mc-match-card, .related-poster-shell,
    .episode-gallery-card, .anime-ref-poster-art,
    .anime-v2-episode-art, .anime-ref-episode-art,
    .continue-watching-image)::after {
    border-image: none !important;
}

/* ---------------------------------------------------------------
   18. PLAYER — cinematic chrome, quiet until interaction
   --------------------------------------------------------------- */
.sg-player-controls {
    padding-bottom: max(18px, var(--safe-bottom, 0px)) !important;
    background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.24) 66%, transparent) !important;
}

.sg-player-control-row {
    gap: 10px !important;
}

.sg-player-icon,
.sg-player-select-wrap {
    border: 1px solid rgba(255,255,255,.105) !important;
    background: rgba(4,5,9,.48) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: transform 150ms var(--nova-p4-ease), background 170ms var(--nova-p4-ease), border-color 170ms var(--nova-p4-ease) !important;
}

.sg-player-icon:active {
    transform: scale(.94) !important;
}

.sg-player-main-play {
    box-shadow: 0 14px 34px rgba(0,0,0,.44), 0 0 18px rgba(155,77,255,.12) !important;
}

.sg-player-timeline,
.sg-player-progress-track {
    height: 3px !important;
    border-radius: var(--nova-p4-pill) !important;
}

.sg-player-toast,
.sg-player-delay-panel,
.sg-player-next-prompt {
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: var(--nova-p4-r-panel) !important;
    background: rgba(7,8,12,.88) !important;
    box-shadow: var(--nova-p4-shadow-overlay) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

/* ---------------------------------------------------------------
   19. ACCOUNT / FAVORITES / NOTIFICATIONS / SETTINGS
   --------------------------------------------------------------- */
:is(.sg-account-profile-card, .sg-account-plan-card, .sg-account-stats,
    .sg-account-menu, .sg-account-offers article, .sg-account-quick-grid > button,
    .favorites-featured, .notifications-delivery-state,
    .settings-intro, .settings-section, .settings-status-card) {
    border-color: rgba(255,255,255,.06) !important;
    border-radius: var(--nova-p4-r-panel) !important;
    background: rgba(8,10,15,.70) !important;
    background-image: none !important;
    box-shadow: var(--nova-p4-shadow-card) !important;
}

.sg-account-portal,
.favorites-page-content,
.notifications-page-content,
.settings-layout {
    gap: var(--nova-p4-s6) !important;
}

.sg-account-quick-grid > button,
.settings-row {
    transition: background 160ms var(--nova-p4-ease), transform 150ms var(--nova-p4-ease), border-color 160ms var(--nova-p4-ease) !important;
}

@media (hover:hover) and (pointer:fine) {
    .sg-account-quick-grid > button:hover,
    .settings-row:hover {
        background: rgba(255,255,255,.035) !important;
        border-color: rgba(255,255,255,.09) !important;
    }
}

.settings-row {
    min-height: 58px !important;
    padding-block: 10px !important;
}

.settings-row-icon,
.settings-status-icon,
.sg-account-plan-icon {
    border: 1px solid rgba(255,255,255,.07) !important;
    background: rgba(255,255,255,.025) !important;
    box-shadow: none !important;
}

.settings-brand-mark,
.sg-account-brand-mark {
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.42)) !important;
}

.favorites-grid {
    row-gap: var(--nova-p4-s6) !important;
    column-gap: var(--nova-p4-s3) !important;
}

.notifications-page-app .notification-card {
    border-radius: var(--nova-p4-r-card) !important;
}

.notifications-page-app .notification-card.unread {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(12,14,21,.82) !important;
    background-image: none !important;
}

/* ---------------------------------------------------------------
   20. LIVE / MATCHES / COLLECTIONS / COMMENTS
   --------------------------------------------------------------- */
:is(.channel-card, .mc-match-card, .movie-collection-card, .content-comment,
    .download-link-card, .reference-related-card) {
    border-color: rgba(255,255,255,.055) !important;
    border-radius: var(--nova-p4-r-card) !important;
    background-image: none !important;
    box-shadow: var(--nova-p4-shadow-card) !important;
}

.channel-logo-wrapper {
    border-color: rgba(255,255,255,.055) !important;
    border-radius: var(--nova-p4-r-sm) !important;
}

.live-badge {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.045) !important;
    color: rgba(255,255,255,.90) !important;
    box-shadow: none !important;
}

.movie-collection-card-art {
    aspect-ratio: 16 / 9 !important;
}

.pro-comment-composer {
    border-color: rgba(255,255,255,.065) !important;
    border-radius: var(--nova-p4-r-panel) !important;
    background: rgba(8,10,15,.72) !important;
    box-shadow: var(--nova-p4-shadow-card) !important;
}

.pro-comment-composer > span {
    border-color: rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.025) !important;
    color: rgba(255,255,255,.86) !important;
    box-shadow: none !important;
}

.pro-comment-composer input,
.content-comment-composer :is(textarea, input) {
    border-color: rgba(255,255,255,.075) !important;
    border-radius: var(--nova-p4-r-sm) !important;
    background: rgba(3,4,7,.76) !important;
}

.comment-send-progress {
    border-color: rgba(255,255,255,.07) !important;
    background: rgba(255,255,255,.022) !important;
}

/* ---------------------------------------------------------------
   21. CTA MICRO-INTERACTION — tactile but restrained
   --------------------------------------------------------------- */
:is(.primary-action, .nova-btn-primary, .target-watch-button, .cinematic-watch-button,
    .channel-primary-action, .standalone-episode-play, .watch-retry-button,
    .nova-offline-retry, .nova-not-found-actions .primary,
    .server-driven-error button, .discover-preview-actions .primary,
    .settings-actions .primary, .sg-account-plan-action,
    .sg-account-login form button, .favorites-featured-copy button) {
    background-size: 130% 100% !important;
    background-position: 50% 50% !important;
    transition: transform 150ms var(--nova-p4-ease), filter 170ms var(--nova-p4-ease),
                box-shadow 180ms var(--nova-p4-ease), background-position 240ms var(--nova-p4-ease) !important;
}

@media (hover:hover) and (pointer:fine) {
    :is(.primary-action, .nova-btn-primary, .target-watch-button, .cinematic-watch-button,
        .channel-primary-action, .standalone-episode-play, .watch-retry-button,
        .nova-offline-retry, .nova-not-found-actions .primary,
        .server-driven-error button, .discover-preview-actions .primary,
        .settings-actions .primary, .sg-account-plan-action,
        .sg-account-login form button, .favorites-featured-copy button):hover {
        background-position: 70% 50% !important;
    }
}