:root {
    --brand-red: #e5092f;
    --brand-cyan: #1bd4ff;
    --brand-gold: #f8c24e;
    --ink: #f8fafc;
    --muted: #a7b0c0;
    --panel: rgba(16, 23, 42, .78);
    --line: rgba(255, 255, 255, .12);
    --admin-bg: #f4f6f8;
    --admin-nav: #111827;
    --admin-primary: #2563eb;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
}

.admin-body,
.guest-body {
    background: var(--admin-bg);
    color: #111827;
}

.scan-error {
    background: #111827;
    border-radius: 6px;
    color: #f8fafc;
    max-height: 14rem;
    max-width: 36rem;
    overflow: auto;
    padding: .75rem;
    white-space: pre-wrap;
}

.stream-body {
    background:
        radial-gradient(circle at top left, rgba(229, 9, 47, .22), transparent 34rem),
        radial-gradient(circle at 78% 12%, rgba(27, 212, 255, .12), transparent 28rem),
        linear-gradient(180deg, #06070b 0%, #0a0d14 42%, #050609 100%);
    color: var(--ink);
}

.app-nav {
    background: rgba(4, 6, 11, .82);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px);
}

.admin-body .app-nav,
.guest-body .app-nav {
    background: var(--admin-nav);
}

.brand-lockup {
    align-items: center;
    display: inline-flex;
    gap: .7rem;
}

.brand-mark {
    align-items: center;
    background: linear-gradient(135deg, var(--brand-red), #ff6b4a 52%, var(--brand-gold));
    border-radius: 7px;
    box-shadow: 0 0 26px rgba(229, 9, 47, .32);
    color: #fff;
    display: inline-flex;
    font-size: .85rem;
    font-weight: 900;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.brand-copy {
    display: grid;
    line-height: 1.05;
}

.brand-copy span {
    font-size: 1rem;
}

.brand-copy small {
    color: rgba(255, 255, 255, .58);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
}

.client-nav-package {
    align-items: center;
    background: linear-gradient(135deg, rgba(229, 9, 47, .95), rgba(248, 194, 78, .88));
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(229, 9, 47, .22);
    color: #fff;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    gap: .35rem;
    letter-spacing: .08em;
    line-height: 1;
    padding: .42rem .68rem;
}

.client-nav-profile {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: rgba(255, 255, 255, .9);
    display: inline-flex;
    font-size: .84rem;
    font-weight: 800;
    gap: .45rem;
    padding: .22rem .55rem .22rem .25rem;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.client-nav-profile:hover,
.client-nav-profile:focus-visible {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.client-nav-avatar {
    align-items: center;
    background: linear-gradient(135deg, var(--profile-primary, var(--brand-cyan)), var(--profile-secondary, #2979ff));
    border-radius: 999px;
    color: #041018;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 950;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.stream-body .navbar-nav .nav-link {
    border-radius: 7px;
    color: rgba(255, 255, 255, .76);
    font-weight: 650;
    padding-left: .75rem;
    padding-right: .75rem;
}

.stream-body .navbar-nav .nav-link:hover,
.stream-body .navbar-nav .nav-link:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.focusable:focus-visible,
.episode-btn:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(27, 212, 255, .45), 0 0 0 .42rem rgba(255, 255, 255, .18);
    outline: none;
}

.stream-main {
    padding: 0 0 3rem;
}




.pf-login-wrap {
    background: #000;
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.pf-login-orbit {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

.pf-login-orbit::before {
    background: radial-gradient(circle at center, rgba(125,196,255,.15), transparent 36%);
    content: "";
    filter: blur(22px);
    height: 44rem;
    opacity: .54;
    position: absolute;
    width: 44rem;
}

.pf-puzzle-logo {
    height: clamp(7rem, 18vw, 15rem);
    opacity: .86;
    position: relative;
    transform: translate3d(0, -2vh, 0) scale(.96);
    width: clamp(13rem, 34vw, 28rem);
    will-change: transform, opacity;
}

.pf-puzzle-piece {
    align-items: center;
    animation-duration: 5.8s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.18, .76, .24, 1);
    background: linear-gradient(120deg, #090b0f 0%, #303a46 36%, #d7eaff 50%, #202832 66%, #050607 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: flex;
    filter: drop-shadow(0 0 .95rem rgba(120,196,255,.13));
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(6rem, 17vw, 14rem);
    font-weight: 950;
    height: 58%;
    justify-content: center;
    letter-spacing: -.12em;
    line-height: .8;
    overflow: hidden;
    position: absolute;
    text-rendering: geometricPrecision;
    text-shadow: 0 0 1.7rem rgba(152,210,255,.08);
    will-change: transform, opacity, filter;
}

.pf-piece-1,
.pf-piece-2 {
    left: 0;
    width: 52%;
}

.pf-piece-3,
.pf-piece-4 {
    left: 47%;
    width: 53%;
}

.pf-piece-1,
.pf-piece-3 {
    clip-path: polygon(0 0, 100% 0, 100% 54%, 62% 54%, 56% 66%, 44% 66%, 38% 54%, 0 54%);
    top: 0;
}

.pf-piece-2,
.pf-piece-4 {
    align-items: flex-end;
    clip-path: polygon(0 46%, 38% 46%, 44% 34%, 56% 34%, 62% 46%, 100% 46%, 100% 100%, 0 100%);
    top: 42%;
}

.pf-piece-1 { animation-name: pfPuzzleAssemble1; }
.pf-piece-2 { animation-name: pfPuzzleAssemble2; }
.pf-piece-3 { animation-name: pfPuzzleAssemble3; }
.pf-piece-4 { animation-name: pfPuzzleAssemble4; }

.pf-puzzle-sheen {
    animation: pfPuzzleSheen 5.8s cubic-bezier(.18, .76, .24, 1) infinite;
    background: linear-gradient(90deg, transparent 0%, rgba(165,220,255,.12) 36%, rgba(255,255,255,.78) 50%, rgba(105,190,255,.22) 62%, transparent 100%);
    filter: blur(.2px);
    height: 96%;
    left: -42%;
    opacity: 0;
    position: absolute;
    top: 2%;
    transform: skewX(-16deg) translate3d(0,0,0);
    width: 28%;
    will-change: transform, opacity;
}

@keyframes pfPuzzleAssemble1 {
    0% { opacity: 0; transform: translate3d(-18vw, -16vh, 0) rotate(-10deg) scale(.92); }
    24% { opacity: .68; }
    45%, 78% { opacity: .88; transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: drop-shadow(0 0 1rem rgba(120,196,255,.16)); }
    100% { opacity: 0; transform: translate3d(-3vw, 0, 0) scale(.98); }
}

@keyframes pfPuzzleAssemble2 {
    0% { opacity: 0; transform: translate3d(-12vw, 18vh, 0) rotate(8deg) scale(.90); }
    28% { opacity: .62; }
    48%, 78% { opacity: .86; transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: drop-shadow(0 0 1rem rgba(120,196,255,.16)); }
    100% { opacity: 0; transform: translate3d(-2vw, 2vh, 0) scale(.98); }
}

@keyframes pfPuzzleAssemble3 {
    0% { opacity: 0; transform: translate3d(17vw, -14vh, 0) rotate(9deg) scale(.92); }
    32% { opacity: .68; }
    52%, 78% { opacity: .88; transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: drop-shadow(0 0 1rem rgba(120,196,255,.16)); }
    100% { opacity: 0; transform: translate3d(3vw, 0, 0) scale(.98); }
}

@keyframes pfPuzzleAssemble4 {
    0% { opacity: 0; transform: translate3d(14vw, 17vh, 0) rotate(-8deg) scale(.90); }
    36% { opacity: .62; }
    55%, 78% { opacity: .86; transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: drop-shadow(0 0 1rem rgba(120,196,255,.16)); }
    100% { opacity: 0; transform: translate3d(2vw, 2vh, 0) scale(.98); }
}

@keyframes pfPuzzleSheen {
    0%, 50% { opacity: 0; transform: skewX(-16deg) translate3d(0,0,0); }
    60% { opacity: .78; }
    74% { opacity: .28; }
    86%, 100% { opacity: 0; transform: skewX(-16deg) translate3d(220%,0,0); }
}

@media (prefers-reduced-motion: reduce) {
    .pf-puzzle-piece,
    .pf-puzzle-sheen {
        animation: none;
        opacity: .18;
        transform: none;
    }
}


.login-choice-row {
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px;
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 1.15rem;
    padding: .35rem;
}

.login-choice {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, .72);
    font-weight: 800;
    padding: .72rem .85rem;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.login-choice.active {
    background: linear-gradient(135deg, rgba(40, 112, 255, .95), rgba(87, 188, 255, .82));
    box-shadow: 0 .55rem 1.4rem rgba(34, 117, 255, .26);
    color: #fff;
}

.new-client-box {
    animation: fadeIn .18s ease;
}

.login-activation-code {
    background: rgba(0, 0, 0, .34);
    border: 1px solid rgba(130, 200, 255, .22);
    border-radius: 1.2rem;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(2rem, 8vw, 3.4rem);
    font-weight: 900;
    letter-spacing: .18em;
    padding: 1rem;
    text-align: center;
    text-shadow: 0 0 1.2rem rgba(132, 204, 255, .32);
}

.activation-qr-image {
    background: #fff;
    border-radius: 18px;
    display: block;
    margin: 0 auto;
    max-width: min(18rem, 78vw);
    padding: .8rem;
    width: 100%;
}

.activation-qr-device {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    color: rgba(255,255,255,.82);
    padding: 1rem;
}

.stream-hero {
    align-items: end;
    background: #111827 center / cover no-repeat;
    display: flex;
    gap: clamp(1.5rem, 4vw, 4rem);
    justify-content: space-between;
    min-height: 74vh;
    overflow: hidden;
    padding: 8rem 4.5vw 5.5rem;
    position: relative;
    transition: transform .35s ease, filter .35s ease;
}

.stream-hero:focus-visible,
.stream-hero:focus-within {
    filter: saturate(1.08);
}

.stream-hero::before {
    background:
        linear-gradient(90deg, rgba(5, 6, 9, .90) 0%, rgba(5, 6, 9, .62) 44%, rgba(5, 6, 9, .10) 100%),
        linear-gradient(0deg, #06070b 0%, rgba(6, 7, 11, .10) 42%);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 3;
}

.hero-video,
.hero-video-shade {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.hero-video {
    background: #06070b;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 1;
}

.hero-video.is-ready {
    opacity: 1;
}

.hero-video-shade {
    background:
        radial-gradient(circle at 74% 38%, rgba(255, 255, 255, .08), transparent 29%),
        linear-gradient(90deg, rgba(5, 6, 9, .82) 0%, rgba(5, 6, 9, .58) 38%, rgba(5, 6, 9, .12) 70%, rgba(5, 6, 9, .52) 100%);
    z-index: 2;
}

.hero-content {
    max-width: 780px;
    position: relative;
    z-index: 4;
}

.brand-eyebrow {
    color: var(--brand-cyan);
    font-size: .82rem;
    font-weight: 800;
    margin-bottom: .9rem;
    text-transform: uppercase;
}

.brand-eyebrow span {
    background: rgba(27, 212, 255, .12);
    border: 1px solid rgba(27, 212, 255, .28);
    border-radius: 999px;
    padding: .38rem .72rem;
}

.stream-hero h1,
.detail-copy h1 {
    color: #fff;
    font-size: clamp(2.55rem, 6vw, 5.5rem);
    font-weight: 900;
    line-height: .96;
    margin: 0 0 1rem;
    max-width: 13ch;
}

.title-art {
    display: block;
    max-height: 9rem;
    max-width: min(30rem, 86vw);
    object-fit: contain;
    object-position: left center;
}

.hero-meta,
.detail-meta {
    color: rgba(255, 255, 255, .8);
    display: flex;
    flex-wrap: wrap;
    font-weight: 700;
    gap: .7rem;
    margin-bottom: 1rem;
}

.hero-meta span,
.detail-meta span {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    padding: .34rem .68rem;
}

.hero-content p,
.detail-copy p,
.watch-copy p {
    color: rgba(255, 255, 255, .78);
    font-size: 1.06rem;
    line-height: 1.65;
    max-width: 46rem;
}

.detail-facts-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin: 1rem 0 1.15rem;
    max-width: 820px;
}

.detail-fact-card {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
    padding: .85rem .95rem;
}

.detail-fact-kicker {
    align-items: center;
    color: rgba(255, 255, 255, .82);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 900;
    gap: .42rem;
    letter-spacing: .06em;
    margin-bottom: .45rem;
    text-transform: uppercase;
}

.detail-fact-kicker i {
    color: var(--brand-red);
}

.detail-fact-card p {
    color: rgba(255, 255, 255, .76);
    font-size: .92rem;
    line-height: 1.45;
    margin: 0;
}

.detail-fact-list {
    display: grid;
    gap: .35rem;
}

.detail-fact-list span {
    align-items: baseline;
    color: rgba(255, 255, 255, .78);
    display: flex;
    gap: .45rem;
    justify-content: space-between;
}

.detail-fact-list strong,
.detail-fact-card p strong {
    color: rgba(255, 255, 255, .94);
    font-weight: 900;
}

.detail-people-section {
    display: grid;
    gap: .8rem;
    margin-top: 1.15rem;
    max-width: 860px;
}

.detail-people-card {
    grid-column: span 2;
}

.detail-people-section .detail-people-card {
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}

.detail-person-grid {
    display: grid;
    gap: .62rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.detail-person-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.person-chip {
    align-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #fff;
    display: flex;
    gap: .62rem;
    min-width: 0;
    padding: .42rem .72rem .42rem .42rem;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.person-chip:hover,
.person-chip:focus-visible {
    background: linear-gradient(135deg, rgba(229,9,47,.34), rgba(27,212,255,.16));
    border-color: rgba(255,255,255,.30);
    box-shadow: 0 16px 38px rgba(0,0,0,.28);
    color: #fff;
    transform: translateY(-2px);
}

.person-chip-static {
    opacity: .78;
}

.person-chip-avatar {
    align-items: center;
    background: linear-gradient(135deg, var(--brand-red), rgba(27,212,255,.85));
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 2.65rem;
    font-size: .82rem;
    font-weight: 950;
    height: 2.65rem;
    justify-content: center;
    overflow: hidden;
    width: 2.65rem;
}

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

.person-chip-copy {
    display: grid;
    line-height: 1.12;
    min-width: 0;
}

.person-chip-copy strong {
    color: #fff;
    font-size: .93rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-chip-copy small {
    color: rgba(255,255,255,.62);
    font-size: .74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actor-detail-hero-modern {
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.actor-detail-glow {
    background: radial-gradient(circle at 18% 20%, rgba(229,9,47,.38), transparent 32%), radial-gradient(circle at 82% 30%, rgba(27,212,255,.28), transparent 35%);
    inset: 0;
    opacity: .9;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.actor-detail-avatar {
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    box-shadow: 0 24px 55px rgba(0,0,0,.36);
    height: clamp(6.5rem, 12vw, 9.5rem);
    object-fit: cover;
    width: clamp(6.5rem, 12vw, 9.5rem);
}

.actor-detail-avatar-empty {
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.actor-detail-copy h1 {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: 950;
    margin: .35rem 0;
}

.actor-detail-copy p {
    color: rgba(255,255,255,.76);
    font-size: 1.05rem;
    margin: 0;
}

.actor-detail-results {
    margin-top: 1rem;
}

@media (max-width: 760px) {
    .detail-people-card {
        grid-column: span 1;
    }
    .detail-person-grid {
        grid-template-columns: 1fr;
    }
    .actor-detail-hero-modern {
        align-items: flex-start;
        flex-direction: column;
    }
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.35rem;
}

.client-mini-player {
    background: rgba(7, 9, 14, .94);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    bottom: 1rem;
    box-shadow: 0 28px 80px rgba(0,0,0,.52);
    color: #fff;
    display: grid;
    gap: .65rem;
    overflow: hidden;
    padding: .55rem;
    position: fixed;
    right: 1rem;
    width: min(26rem, calc(100vw - 2rem));
    z-index: 5000;
}

.client-mini-video-wrap {
    background: #000;
    border-radius: 13px;
    overflow: hidden;
}

.client-mini-video {
    aspect-ratio: 16 / 9;
    display: block;
    height: auto;
    width: 100%;
}

.client-mini-copy {
    display: grid;
    gap: .18rem;
    padding: .1rem .2rem .2rem;
}

.client-mini-copy strong {
    font-size: .94rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-mini-copy small {
    color: rgba(255,255,255,.64);
    font-size: .76rem;
}

.client-mini-actions {
    display: flex;
    gap: .45rem;
    margin-top: .35rem;
}

.client-mini-btn {
    align-items: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 850;
    gap: .35rem;
    padding: .35rem .62rem;
    text-decoration: none;
}

.client-mini-btn:hover,
.client-mini-btn:focus-visible {
    background: rgba(255,255,255,.18);
    color: #fff;
}

@media (max-width: 720px) {
    .client-mini-player {
        bottom: .65rem;
        right: .65rem;
        width: min(18.5rem, calc(100vw - 1.3rem));
    }
}

.hero-poster-panel {
    align-self: end;
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .54);
    flex: 0 0 clamp(10.5rem, 18vw, 17rem);
    overflow: hidden;
    position: relative;
    transform: translateY(.5rem);
    transition: transform .35s ease;
    z-index: 3;
}

.stream-hero:focus-within .hero-poster-panel,
.stream-hero:hover .hero-poster-panel {
    transform: translateY(0) scale(1.035);
}

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

.hero-rotation-controls {
    bottom: 2.5rem;
    display: flex;
    gap: .6rem;
    position: absolute;
    right: 4.5vw;
    z-index: 4;
}

.hero-rotation-controls button {
    align-items: center;
    background: rgba(0, 0, 0, .48);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    height: 2.65rem;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
    width: 2.65rem;
}

.hero-rotation-controls button:hover,
.hero-rotation-controls button:focus-visible {
    background: rgba(255, 255, 255, .2);
    transform: scale(1.08);
}

.hero-actions .btn,
.search-panel .btn,
.blocked-wrap .btn {
    align-items: center;
    border: 0;
    border-radius: 7px;
    display: inline-flex;
    font-weight: 850;
    gap: .45rem;
}

.btn-glass,
.btn-ghost {
    color: #fff;
}

.btn-glass {
    background: rgba(255, 255, 255, .18);
}

.btn-ghost {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18) !important;
}

.btn-brand {
    background: linear-gradient(135deg, var(--brand-red), #ff6b4a);
    color: #fff;
}

.btn-brand:hover,
.btn-glass:hover,
.btn-ghost:hover {
    color: #fff;
    filter: brightness(1.08);
}

.stream-toolbar {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    margin: 1.6rem 4.5vw 2.2rem;
    position: relative;
    z-index: 3;
}

.stream-toolbar-hero {
    margin-top: -2.5rem;
}

.search-panel,
.profile-panel {
    background: rgba(10, 14, 24, .82);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 22px 64px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
}

.search-panel {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(14rem, 1fr) minmax(9rem, 12rem) minmax(9rem, 13rem) auto;
    padding: .75rem;
}

.search-box {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    display: flex;
    gap: .7rem;
    padding: 0 .9rem;
}

.search-box i {
    color: var(--brand-cyan);
}

.search-box input,
.search-panel select {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    color: #fff;
    min-height: 3rem;
}

.search-box input {
    background: transparent;
    border: 0;
    flex: 1;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.search-panel select {
    padding: 0 .8rem;
}

.search-panel select option {
    background: #111827;
}

.profile-panel {
    align-items: center;
    display: flex;
    gap: .85rem;
    padding: .8rem 1rem;
}

.profile-avatar {
    align-items: center;
    background: linear-gradient(135deg, var(--profile-primary, var(--brand-cyan)), var(--profile-secondary, #2979ff));
    border-radius: 7px;
    color: #041018;
    display: inline-flex;
    font-size: 1.2rem;
    font-weight: 950;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.profile-panel strong,
.profile-panel span {
    display: block;
}

.profile-panel span {
    color: var(--muted);
    font-size: .86rem;
}

.profiles-screen {
    min-height: calc(100vh - 4rem);
    padding: clamp(2rem, 5vw, 4rem);
}

.profiles-head {
    align-items: end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 auto 2rem;
    max-width: 1180px;
}

.profiles-head h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 900;
    margin: 0;
}

.profiles-head p,
.profile-limit label {
    color: var(--muted);
    margin: 0;
}

.profile-limit {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.profiles-alert {
    margin: 0 auto 1.5rem;
    max-width: 1180px;
}

.profiles-grid {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin: 0 auto;
    max-width: 1180px;
}

.profile-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--profile-primary, #e5092f) 28%, #101827), color-mix(in srgb, var(--profile-secondary, #1bd4ff) 18%, #0b1020));
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    padding: 1.2rem;
    transition: transform .2s ease, border-color .2s ease;
}

.profile-card:hover,
.profile-card:focus-within {
    border-color: rgba(255, 255, 255, .42);
    transform: translateY(-.25rem);
}

.profile-select-form {
    text-align: center;
}

.profile-avatar-button {
    align-items: center;
    aspect-ratio: 1;
    background: radial-gradient(circle at 30% 20%, var(--profile-secondary, #1bd4ff), var(--profile-primary, #e5092f));
    border: 0;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 950;
    justify-content: center;
    margin: 0 auto 1rem;
    max-width: 11rem;
    width: 100%;
}

.profile-card h2 {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 850;
    margin: 0 0 .65rem;
    text-align: center;
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
}

.profile-tags span {
    background: rgba(0, 0, 0, .32);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: rgba(255, 255, 255, .86);
    font-size: .72rem;
    font-weight: 750;
    padding: .22rem .55rem;
}

.profile-pin {
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 8px;
    margin-top: .8rem;
    padding: .55rem .75rem;
    text-align: center;
    width: 100%;
}

.profile-actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
}

.profile-editor {
    margin-top: 1rem;
}

.profile-form {
    display: grid;
    gap: .65rem;
}

.profile-color-row,
.profile-checks {
    display: flex;
    gap: .65rem;
}

.profile-checks {
    color: #fff;
    flex-wrap: wrap;
    font-size: .85rem;
    justify-content: space-between;
}

.profile-checks label {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
}

.stream-row,
.episodes-panel {
    margin: 0 0 2rem;
    padding: 0 4.5vw;
    scroll-margin-top: 6.5rem;
}

.stream-row-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .9rem;
}

.stream-row-head h2 {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 850;
    margin: 0;
}

.stream-row-head span {
    color: var(--muted);
}

.row-controls {
    color: rgba(255, 255, 255, .44);
    display: flex;
    gap: .7rem;
}

.stream-rail {
    --rail-edge-space: clamp(1rem, 4.5vw, 4rem);
    display: grid;
    gap: .9rem;
    grid-auto-columns: clamp(8.2rem, 11vw, 11.5rem);
    grid-auto-flow: column;
    margin-inline: calc(-1 * var(--rail-edge-space));
    overflow-x: auto;
    overflow-y: visible;
    padding: .9rem var(--rail-edge-space) 2.25rem;
    scroll-padding-inline: var(--rail-edge-space);
    scroll-snap-type: x proximity;
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

.recent-auto-row {
    margin-bottom: 2.4rem;
}

.recent-row-head {
    align-items: end;
}

.recent-row-head > div:first-child {
    display: grid;
    gap: .25rem;
}

.recent-row-head h2 {
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
}

.recent-rail {
    gap: 1rem;
    grid-auto-columns: clamp(10.5rem, 14vw, 14.25rem);
    padding-bottom: 1.5rem;
}

.recent-rail[data-auto-rail] {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.recent-card {
    min-height: 100%;
}

.recent-poster {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .46);
}

.recent-card:hover,
.recent-card:focus-visible {
    transform: translateY(-.45rem) scale(1.035);
}

.quality-chip {
    background: linear-gradient(135deg, rgba(248, 194, 78, .94), rgba(255, 107, 74, .92));
    border-radius: 999px;
    color: #130b03;
    font-size: .68rem;
    font-weight: 950;
    padding: .25rem .55rem;
    position: absolute;
    right: .6rem;
    top: .6rem;
    z-index: 1;
}

.recent-meta h3 {
    font-size: 1.02rem;
}

.recent-meta p {
    display: flex;
    gap: .45rem;
}

.recent-meta p span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.episode-recent-poster::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .36));
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

.stream-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.stream-card {
    color: inherit;
    display: block;
    min-width: 0;
    position: relative;
    scroll-snap-align: start;
    text-decoration: none;
    transform-origin: center center;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s ease, box-shadow .2s ease;
    will-change: transform;
}

.stream-card:focus-visible {
    filter: saturate(1.12) brightness(1.05);
    transform: translateY(-.65rem) scale(1.18);
    z-index: 30;
}

@media (hover: hover) and (pointer: fine) {
    .stream-card:hover {
        filter: saturate(1.12) brightness(1.05);
        transform: translateY(-.65rem) scale(1.18);
        z-index: 30;
    }
}

.stream-poster {
    align-items: center;
    aspect-ratio: 2 / 3;
    background:
        linear-gradient(135deg, rgba(229, 9, 47, .18), rgba(27, 212, 255, .12)),
        #141824 center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .35);
    color: rgba(255, 255, 255, .42);
    display: flex;
    font-size: 3rem;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.stream-poster::after {
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .68) 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.stream-poster img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    transition: transform .24s ease;
    width: 100%;
}

.stream-card:hover .stream-poster,
.stream-card:focus-visible .stream-poster {
    border-color: rgba(255, 255, 255, .34);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .66), 0 0 0 1px rgba(255, 255, 255, .08);
}

.stream-card:hover .stream-poster img,
.stream-card:focus-visible .stream-poster img {
    transform: scale(1.035);
}

.stream-chip {
    background: rgba(0, 0, 0, .66);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    bottom: .6rem;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    left: .6rem;
    padding: .24rem .52rem;
    position: absolute;
    z-index: 1;
}

.stream-card-meta {
    padding: .7rem .12rem 0;
}

.stream-card-meta h3 {
    color: #fff;
    font-size: .94rem;
    font-weight: 800;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stream-card-meta p {
    color: var(--muted);
    font-size: .8rem;
    margin: .16rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-hero {
    background: #0f172a center / cover no-repeat;
    min-height: calc(100vh - 4.5rem);
    padding: 6rem 4.5vw 4rem;
    position: relative;
}

.detail-hero::before {
    background:
        linear-gradient(90deg, rgba(5, 6, 9, .98), rgba(5, 6, 9, .76) 48%, rgba(5, 6, 9, .28)),
        linear-gradient(0deg, #06070b, rgba(6, 7, 11, .14) 42%);
    content: "";
    inset: 0;
    position: absolute;
}

.detail-shell {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr);
    max-width: 1180px;
    position: relative;
    z-index: 1;
}

.detail-art-column {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.detail-poster {
    align-items: center;
    aspect-ratio: 2 / 3;
    background: #141824 center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
    color: rgba(255, 255, 255, .45);
    display: flex;
    font-size: 4rem;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.detail-poster-player[hidden] {
    display: none !important;
}

.detail-poster-player {
    background: #000;
    display: flex;
    flex-direction: column;
    inset: 0;
    position: absolute;
    z-index: 2;
}

.detail-poster-player video,
.detail-poster-player .empty-player {
    background: #000;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    object-fit: contain;
    width: 100%;
}

.detail-player-controls {
    align-items: center;
    background: #050507;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    gap: .55rem .6rem;
    grid-template-columns: auto auto minmax(0, 1fr) auto minmax(5.8rem, 8rem) auto auto auto auto auto;
    padding: .72rem .85rem .82rem;
    position: relative;
    z-index: 5;
}

.detail-player-control-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    display: inline-flex;
    font-size: 1.15rem;
    height: 2.25rem;
    justify-content: center;
    transition: background .16s ease, color .16s ease, transform .16s ease;
    width: 2.25rem;
}

.detail-player-control-btn:hover,
.detail-player-control-btn:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    outline: none;
    transform: scale(1.06);
}

.detail-player-time {
    color: rgba(255, 255, 255, .72);
    font-size: .78rem;
    font-weight: 800;
    min-width: 2.35rem;
    text-align: center;
}

.detail-player-control-btn,
.detail-player-time,
.detail-player-volume-wrap,
.detail-player-track-pill {
    grid-row: 2;
}

.detail-player-seek {
    accent-color: var(--brand-red);
    cursor: pointer;
    grid-column: 1 / -1;
    grid-row: 1;
    height: .28rem;
    min-width: 0;
    width: 100%;
}

.detail-player-volume-wrap {
    align-items: center;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    color: rgba(255, 255, 255, .9);
    display: inline-grid;
    gap: .42rem;
    grid-template-columns: auto minmax(4.5rem, 1fr);
    height: 2.25rem;
    margin: 0;
    min-width: 5.8rem;
    padding: 0 .48rem;
}

.detail-player-volume-wrap i {
    cursor: pointer;
    font-size: .96rem;
}

.detail-player-volume {
    accent-color: var(--brand-cyan);
    cursor: pointer;
    height: .28rem;
    min-width: 0;
    width: 100%;
}

.detail-player-track-pill {
    align-items: center;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    display: inline-grid;
    gap: .38rem;
    grid-template-columns: auto minmax(4.2rem, 1fr);
    height: 2.25rem;
    margin: 0;
    max-width: 9.5rem;
    min-width: 6.8rem;
    padding: 0 .48rem;
    transition: background .16s ease, border-color .16s ease;
}

.detail-player-track-pill:hover,
.detail-player-track-pill:focus-within {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .22);
}

.detail-player-track-pill i {
    font-size: .96rem;
}

.detail-player-track-pill select {
    appearance: none;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 850;
    max-width: 100%;
    min-width: 0;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-player-track-pill option {
    background: #10131f;
    color: #fff;
}

.detail-poster.is-playing {
    background-image: none !important;
}

.detail-shell.has-large-player {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

.detail-shell.has-large-player .detail-art-column {
    max-width: min(1180px, 100%);
    width: 100%;
}

.detail-poster.is-large-player,
.detail-poster.is-medium-player,
.detail-poster.is-mini-player {
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    width: min(1180px, 100%);
}

.detail-poster.is-medium-player {
    width: min(820px, 100%);
}

.detail-poster.is-large-player .detail-poster-player,
.detail-poster.is-medium-player .detail-poster-player {
    background: transparent;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    inset: auto;
    position: relative;
    width: 100%;
}


.detail-poster.is-mini-player .detail-poster-player {
    background: #000;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    bottom: 1.25rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
    height: min(32vh, 15rem);
    inset: auto 1.25rem 1.25rem auto;
    overflow: hidden;
    position: fixed;
    width: min(42vw, 26rem);
    z-index: 1000;
}

.detail-poster.is-mini-player .detail-poster-player video {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    height: auto;
    min-height: 0;
}

.detail-poster.is-mini-player .detail-player-controls {
    gap: .25rem;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    padding: .35rem;
}

.detail-poster.is-mini-player .detail-player-time,
.detail-poster.is-mini-player .detail-player-volume-wrap,
.detail-poster.is-mini-player .detail-player-track-pill,
.detail-poster.is-mini-player #detailPlayerMedium,
.detail-poster.is-mini-player #detailPlayerFullscreen {
    display: none;
}

.detail-poster.is-mini-player .detail-player-seek {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .detail-poster.is-mini-player .detail-poster-player {
        bottom: .75rem;
        left: .75rem;
        right: .75rem;
        width: auto;
    }
}

.detail-poster.is-large-player .detail-poster-player video,
.detail-poster.is-medium-player .detail-poster-player video {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    height: auto;
}

.detail-poster-player:fullscreen,
.detail-poster-player:-webkit-full-screen {
    align-items: stretch;
    background: #000;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    justify-content: center;
    padding: 1rem;
}

.detail-poster-player:fullscreen video,
.detail-poster-player:-webkit-full-screen video {
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: calc(100vh - 5rem);
    object-fit: contain;
    width: 100%;
}

.detail-poster.is-large-player + .detail-copy,
.detail-shell.has-large-player .detail-copy {
    max-width: 980px;
}

.detail-player-section {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
    max-width: 1180px;
    position: relative;
    z-index: 1;
}

.detail-player-section[data-empty="1"] {
    opacity: .72;
}

.detail-info-player-shell {
    border-color: rgba(255, 255, 255, .2);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .5);
}

.detail-player-heading {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    justify-content: space-between;
}

.detail-player-heading span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.detail-player-heading strong {
    color: #fff;
    font-size: 1.02rem;
    line-height: 1.25;
}

.detail-player-help {
    color: var(--muted);
    font-size: .86rem;
    margin: 0;
}

.back-link {
    align-items: center;
    color: rgba(255, 255, 255, .75);
    display: inline-flex;
    font-weight: 800;
    gap: .35rem;
    margin-bottom: 1.2rem;
    text-decoration: none;
}

.back-link:hover {
    color: #fff;
}

.season-list {
    display: grid;
    gap: 1rem;
}

.season-block {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    padding: 1rem;
}

.season-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.season-head h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
    margin: 0;
}

.season-head span {
    color: var(--muted);
    font-size: .88rem;
    font-weight: 800;
}

.episode-list {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.episode-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #fff;
    display: grid;
    gap: .28rem;
    padding: 1rem;
    text-decoration: none;
}

.episode-card span,
.episode-card small {
    color: var(--muted);
}

.watch-topbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    padding: 1rem 4.5vw .75rem;
}

.watch-topbar div {
    display: grid;
}

.watch-topbar span {
    color: var(--muted);
    font-size: .85rem;
}

.watch-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 320px;
    padding: 0 4.5vw 3rem;
}

.cinema-watch {
    align-items: start;
}

.player-shell {
    background: #000;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .46);
    overflow: hidden;
    position: relative;
}

.player-shell video {
    background: #000;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.player-seek-panel {
    align-items: center;
    background: rgba(0,0,0,.34);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    display: flex;
    flex: 1 1 34rem;
    gap: .55rem;
    padding: .45rem .55rem;
}

.player-time-label {
    color: rgba(255,255,255,.82);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    min-width: 3.4rem;
    text-align: center;
}

.player-seek-range {
    accent-color: var(--brand-red);
    flex: 1 1 12rem;
    min-width: 8rem;
}

.player-jump-box {
    align-items: center;
    display: flex;
    gap: .35rem;
}

.player-jump-box input {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    color: #fff;
    max-width: 7.2rem;
}

.player-jump-box input::placeholder {
    color: rgba(255,255,255,.48);
}

@media (max-width: 760px) {
    .player-seek-panel {
        border-radius: 18px;
        flex-basis: 100%;
        flex-wrap: wrap;
    }
    .player-jump-box {
        flex: 1 1 100%;
    }
    .player-jump-box input {
        max-width: none;
    }
}

.empty-player {
    background: #111827;
    color: #9ca3af;
}

.watch-copy {
    padding: 1.4rem .2rem 0;
}

.watch-copy h1 {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 900;
}

.episodes {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    box-shadow: 0 22px 58px rgba(0, 0, 0, .28);
    padding: 1rem;
}

.episodes h2 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 850;
    margin-bottom: .9rem;
}

.episode-btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    color: #fff;
    display: grid;
    margin-bottom: .55rem;
    padding: .8rem;
    text-align: left;
    width: 100%;
}

.episode-btn:hover {
    background: rgba(255, 255, 255, .14);
}

.episode-btn.is-active {
    background: rgba(27, 212, 255, .16);
    border-color: rgba(27, 212, 255, .42);
}

.episode-btn span {
    color: var(--brand-cyan);
    font-size: .78rem;
    font-weight: 800;
}

.blocked-wrap {
    display: grid;
    min-height: calc(100vh - 4.5rem);
    padding: 2rem;
    place-items: center;
}

.suspended-panel {
    background:
        linear-gradient(135deg, rgba(229, 9, 47, .14), rgba(27, 212, 255, .08)),
        rgba(10, 14, 24, .88);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
    max-width: 520px;
    padding: 2.4rem;
    text-align: center;
}

.suspended-icon {
    align-items: center;
    background: rgba(229, 9, 47, .14);
    border: 1px solid rgba(229, 9, 47, .28);
    border-radius: 8px;
    color: #ff6b7a;
    display: inline-flex;
    font-size: 2.4rem;
    height: 5rem;
    justify-content: center;
    margin-bottom: 1.2rem;
    width: 5rem;
}

.suspended-panel h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
}

.suspended-panel p {
    color: rgba(255, 255, 255, .72);
    font-size: 1.05rem;
}

.empty-state {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: var(--muted);
    margin: 0 4.5vw 2rem;
    padding: 1.25rem;
}

.login-wrap {
    display: grid;
    min-height: calc(100vh - 92px);
    padding: 1rem;
    place-items: center;
}

.login-panel {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, .12);
    max-width: 430px;
    padding: 2rem;
    width: min(100%, 430px);
}

.stat-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    padding: 1rem;
}

.admin-thumb {
    background: #e5e7eb center / cover no-repeat;
    border-radius: 6px;
    flex: 0 0 auto;
    height: 58px;
    width: 44px;
}

.table-desc {
    max-width: 440px;
}

.promo-hero {
    align-items: center;
    background:
        linear-gradient(90deg, rgba(8, 12, 22, .96), rgba(8, 12, 22, .78)),
        radial-gradient(circle at 30% 20%, rgba(229, 9, 47, .28), transparent 32%),
        radial-gradient(circle at 80% 10%, rgba(27, 212, 255, .18), transparent 28%),
        linear-gradient(135deg, #090b12, #141824 52%, #050507);
    color: #fff;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
    min-height: calc(100vh - 72px);
    padding: clamp(2rem, 6vw, 6rem);
}

.promo-copy {
    max-width: 760px;
}

.promo-kicker {
    color: #73e6ff;
    display: block;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.promo-copy h1 {
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 900;
    line-height: .92;
    margin-bottom: 1rem;
}

.promo-copy p {
    color: rgba(255, 255, 255, .78);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    max-width: 640px;
}

.promo-actions,
.promo-plans {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.promo-plans {
    align-content: center;
}

.promo-plans article {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    min-width: 11rem;
    padding: 1.25rem;
}

.promo-plans strong,
.promo-plans span {
    display: block;
}

.promo-plans span {
    color: rgba(255, 255, 255, .7);
}

.support-shell {
    color: #fff;
    margin: 0 auto;
    max-width: 900px;
    padding: clamp(1.5rem, 5vw, 4rem);
}

.support-form {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}


.support-history {
    margin-top: 2rem;
}

.support-history article {
    align-items: center;
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin-top: .75rem;
    padding: 1rem;
}

.support-history span {
    color: rgba(255, 255, 255, .58);
    display: block;
    font-size: .9rem;
}

@media (max-width: 991.98px) {
    .stream-hero {
        min-height: 68vh;
        padding-top: 7rem;
    }

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

    .stream-toolbar,
    .detail-shell,
    .watch-layout {
        grid-template-columns: 1fr;
    }

    .search-panel {
        grid-template-columns: 1fr 1fr;
    }

    .search-box,
    .search-panel .btn {
        grid-column: 1 / -1;
    }

    .detail-poster {
        max-width: 15rem;
    }

    .promo-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .brand-copy small {
        display: none;
    }

    .stream-hero {
        min-height: 62vh;
        padding: 6.5rem 1rem 4rem;
    }

    .hero-rotation-controls {
        bottom: 1.25rem;
        right: 1rem;
    }

    .stream-hero h1,
    .detail-copy h1 {
        font-size: 2.45rem;
    }

    .hero-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .stream-toolbar,
    .stream-row,
    .episodes-panel,
    .watch-layout,
    .watch-topbar {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .stream-toolbar-hero {
        margin-top: -1.5rem;
    }

    .search-panel {
        grid-template-columns: 1fr;
    }

    .search-box,
    .search-panel .btn {
        grid-column: auto;
    }

    .stream-rail {
        grid-auto-columns: 8.2rem;
    }

    .stream-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-hero {
        padding: 5rem 1rem 3rem;
    }

    .detail-shell {
        gap: 1.25rem;
    }

    .detail-poster {
        max-width: 12rem;
    }

    .suspended-panel {
        padding: 1.5rem;
    }
}

/* Live TV module */
.live-tv-shell {
    background:
        radial-gradient(circle at 10% 0%, rgba(27, 212, 255, .18), transparent 28rem),
        radial-gradient(circle at 90% 10%, rgba(229, 9, 47, .16), transparent 26rem);
    padding: 2rem 4vw 3rem;
}

.live-tv-toolbar {
    align-items: end;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.live-tv-title-block h1,
.live-tv-toolbar h1 {
    color: #fff;
    font-size: clamp(2.35rem, 5vw, 5.5rem);
    font-weight: 950;
    letter-spacing: -.06em;
    line-height: .92;
    margin: 0;
}

.live-tv-toolbar p {
    color: rgba(255, 255, 255, .72);
    margin: .55rem 0 0;
}

.live-tv-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .9rem;
}

.live-tv-stats span {
    align-items: center;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 850;
    gap: .38rem;
    padding: .42rem .68rem;
}

.live-tv-stats i { color: var(--brand-cyan); }

.live-tv-filters {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(14rem, 22rem) minmax(12rem, 16rem);
    padding: .65rem;
}

.live-tv-filter-field {
    align-items: center;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    display: grid;
    gap: .45rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    padding: .2rem .65rem;
}

.live-tv-filter-field i { color: rgba(255, 255, 255, .62); }
.live-tv-filter-field .form-control,
.live-tv-filter-field .form-select {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff;
}
.live-tv-filter-field .form-control::placeholder { color: rgba(255, 255, 255, .5); }
.live-tv-filter-field option { background: #10131f; color: #fff; }

.live-tv-layout {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-areas: "channels player";
    grid-template-columns: clamp(16rem, 28vw, 25rem) minmax(0, 1fr);
    min-height: 68vh;
}

.live-tv-list {
    backdrop-filter: blur(18px);
    background: rgba(8, 10, 16, .74);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1.4rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
    grid-area: channels;
    max-height: calc(100vh - 12rem);
    overflow: auto;
    padding: .75rem;
}

.live-tv-list-head {
    color: #fff;
    display: grid;
    gap: .12rem;
    padding: .35rem .45rem .75rem;
}
.live-tv-list-head span { font-size: 1.05rem; font-weight: 950; }
.live-tv-list-head small { color: rgba(255, 255, 255, .54); font-weight: 750; }

.live-tv-channel {
    align-items: center;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1rem;
    color: #fff;
    display: grid;
    gap: .8rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-bottom: .55rem;
    padding: .68rem;
    text-align: left;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    width: 100%;
}

.live-tv-channel:hover,
.live-tv-channel.active {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(27, 212, 255, .36);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
    transform: translateY(-1px);
}

.live-tv-channel.active { background: linear-gradient(135deg, rgba(27,212,255,.18), rgba(229,9,47,.12)); }

.live-tv-logo {
    align-items: center;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.13), rgba(255,255,255,.055));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    display: inline-flex;
    height: 3.35rem;
    justify-content: center;
    overflow: hidden;
    width: 3.35rem;
}

.live-tv-logo img {
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
    max-height: 88%;
    max-width: 88%;
    object-fit: contain;
}

.live-tv-meta {
    display: grid;
    min-width: 0;
}

.live-tv-meta strong {
    font-size: .95rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-tv-meta small {
    color: rgba(255, 255, 255, .58);
    font-weight: 750;
}

.live-tv-channel-status {
    align-items: center;
    background: rgba(27,212,255,.14);
    border-radius: 999px;
    color: var(--brand-cyan);
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    opacity: .72;
    width: 2rem;
}
.live-tv-channel.active .live-tv-channel-status { background: var(--brand-cyan); color: #031018; opacity: 1; }

.live-tv-player-card {
    align-self: start;
    backdrop-filter: blur(18px);
    background: rgba(8, 10, 16, .78);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1.4rem;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .38);
    grid-area: player;
    overflow: hidden;
    position: sticky;
    top: 5rem;
}

.live-tv-player-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.15rem;
}

.live-tv-player-head small {
    align-items: center;
    color: var(--brand-cyan);
    display: inline-flex;
    font-weight: 900;
    gap: .35rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.live-tv-player-head h2 {
    color: #fff;
    font-size: clamp(1.1rem, 1.8vw, 1.55rem);
    font-weight: 950;
    margin: .15rem 0 0;
}

.live-tv-playback-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.live-tv-playback-controls label,
.live-tv-mini-btn,
.live-tv-status-pill {
    align-items: center;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .9);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 850;
    gap: .38rem;
    margin: 0;
    min-height: 2.15rem;
    padding: .28rem .55rem;
}

.live-tv-playback-controls select {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
    max-width: 7.2rem;
    padding: 0;
}
.live-tv-playback-controls option { background: #10131f; color: #fff; }
.live-tv-mini-btn { cursor: pointer; }
.live-tv-mini-btn:hover { background: rgba(255,255,255,.14); }
.live-tv-status-pill { background: rgba(229,9,47,.18); color: #fff; }

.live-tv-video-wrap {
    aspect-ratio: 16 / 9;
    background: #000;
    border-top: 1px solid rgba(255,255,255,.08);
    position: relative;
}

.live-tv-video-wrap video {
    display: block;
    height: 100%;
    width: 100%;
}

.live-tv-live-badge {
    align-items: center;
    background: rgba(229, 9, 47, .92);
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(229,9,47,.3);
    color: #fff;
    display: inline-flex;
    font-size: .74rem;
    font-weight: 950;
    gap: .38rem;
    left: .9rem;
    letter-spacing: .08em;
    padding: .38rem .58rem;
    position: absolute;
    top: .9rem;
    z-index: 3;
}
.live-tv-live-badge span {
    animation: livePulse 1.3s infinite;
    background: #fff;
    border-radius: 999px;
    height: .46rem;
    width: .46rem;
}
@keyframes livePulse { 0%, 100% { opacity: .45; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.05); } }

.live-tv-message,
.live-tv-empty {
    align-items: center;
    color: rgba(255, 255, 255, .72);
    display: flex;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.live-tv-message {
    background: rgba(0, 0, 0, .72);
    inset: 0;
    position: absolute;
}

.live-tv-order {
    min-width: 5rem;
}

@media (max-width: 991px) {
    .live-tv-toolbar {
        align-items: stretch;
        display: grid;
    }
    .live-tv-layout {
        gap: .75rem;
        grid-template-areas: "channels player";
        grid-template-columns: minmax(9rem, 34vw) minmax(0, 1fr);
    }
    .live-tv-player-card {
        position: sticky;
        top: 4.25rem;
    }
    .live-tv-filters {
        grid-template-columns: 1fr;
        margin-top: 1rem;
    }
    .live-tv-list {
        display: block;
        max-height: calc(100vh - 9rem);
        margin-bottom: 0;
    }
    .live-tv-list-head {
        grid-column: auto;
    }
    .live-tv-channel {
        gap: .5rem;
        grid-template-columns: auto minmax(0, 1fr);
        margin-bottom: .45rem;
        padding: .55rem;
    }
    .live-tv-channel-status {
        display: none;
    }
    .live-tv-logo {
        height: 2.55rem;
        width: 2.55rem;
    }
    .live-tv-player-head {
        align-items: stretch;
        display: grid;
    }
    .live-tv-playback-controls {
        justify-content: flex-start;
    }
    .live-tv-video-wrap {
        min-height: 11rem;
    }
}

@media (max-width: 575px) {
    .live-tv-shell {
        overflow-x: auto;
        padding: 1rem .5rem 2rem;
    }
    .live-tv-layout {
        gap: .5rem;
        grid-template-areas: "channels player";
        grid-template-columns: minmax(7.25rem, 36vw) minmax(13rem, 1fr);
        min-width: 21rem;
    }
    .live-tv-list {
        border-radius: 1rem;
        max-height: calc(100vh - 7.5rem);
        padding: .45rem;
    }
    .live-tv-list-head {
        padding: .25rem .25rem .55rem;
    }
    .live-tv-list-head small {
        display: none;
    }
    .live-tv-channel {
        border-radius: .8rem;
        gap: .38rem;
        grid-template-columns: auto minmax(0, 1fr);
        padding: .42rem;
    }
    .live-tv-logo {
        border-radius: .75rem;
        height: 2.1rem;
        width: 2.1rem;
    }
    .live-tv-title-block h1,
    .live-tv-toolbar h1 {
        font-size: 3rem;
    }
    .live-tv-player-head {
        padding: .75rem;
    }
    .live-tv-player-head h2 {
        font-size: 1rem;
    }
    .live-tv-meta small,
    .live-tv-playback-controls label span,
    .live-tv-mini-btn span {
        display: none;
    }
    .live-tv-playback-controls select {
        max-width: 5.8rem;
    }
}

/* PlexFlix Universal PWA */
.universal-body {
    background: radial-gradient(circle at top left, rgba(229, 9, 47, .25), transparent 34rem), #06070b;
    color: #f8fafc;
    min-height: 100vh;
}
.universal-app { min-height: 100vh; }

.universal-activation[hidden],
.universal-shell[hidden],
.universal-profile-select[hidden],
#profileSelectScreen[hidden],
#appScreen[hidden],
#activationScreen[hidden] {
    display: none !important;
}
.universal-activation {
    align-items: center;
    display: grid;
    justify-items: center;
    min-height: 100vh;
    padding: 2rem;
}
.universal-brand { margin-bottom: 1.25rem; }
.universal-brand.compact { margin: 0 0 1.5rem; }
.activation-card {
    background: rgba(15, 23, 42, .82);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1.5rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
    max-width: 36rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    width: min(100%, 36rem);
}
.activation-card h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; }
.activation-card p { color: rgba(255,255,255,.74); }
.activation-code {
    background: #fff;
    border-radius: 1rem;
    color: #06070b;
    font-size: clamp(2.3rem, 10vw, 5.5rem);
    font-weight: 950;
    letter-spacing: .18em;
    margin: 1.5rem 0;
    padding: .7rem 1rem;
}
.activation-status { color: var(--brand-cyan); font-weight: 800; margin-bottom: 1rem; }
.activation-choice-row {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1.3rem 0 1rem;
}
.activation-helper { margin: 1rem 0 0; }
.activation-login-form {
    display: grid;
    gap: .8rem;
    margin: 1.25rem 0 1rem;
}
.activation-login-form[hidden] { display: none; }
.activation-login-form input {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: .95rem;
    color: #fff;
    font-size: 1rem;
    padding: .9rem 1rem;
}
.activation-login-form input::placeholder { color: rgba(255,255,255,.55); }
@media (max-width: 520px) {
    .activation-choice-row { grid-template-columns: 1fr; }
}
.universal-btn,
.nav-pill {
    border: 0;
    border-radius: .9rem;
    cursor: pointer;
    font-weight: 800;
}
.universal-btn { background: var(--brand-red); color: #fff; padding: .85rem 1.2rem; }
.universal-btn.secondary { background: rgba(255,255,255,.12); }
.universal-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 100vh;
}
.universal-sidebar {
    align-items: center;
    background: rgba(4, 6, 11, .9);
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-right: 0;
    display: flex;
    flex-direction: row;
    gap: .5rem;
    height: auto;
    min-height: 4.6rem;
    overflow-x: auto;
    padding: .75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 40;
}
.universal-sidebar .universal-brand.compact {
    flex: 0 0 auto;
    margin-right: .7rem;
}
.nav-pill {
    align-items: center;
    background: transparent;
    color: rgba(255,255,255,.72);
    display: flex;
    flex: 0 0 auto;
    gap: .7rem;
    justify-content: center;
    padding: .85rem 1rem;
    text-align: center;
    white-space: nowrap;
}
.nav-pill:hover,
.nav-pill.active { background: rgba(255,255,255,.12); color: #fff; }
.nav-pill.install { background: rgba(27, 212, 255, .18); color: #fff; margin-left: auto; margin-top: 0; }
.nav-pill.muted { color: rgba(255,255,255,.5); }
.universal-main { padding: clamp(1rem, 3vw, 2.5rem); }
.universal-header {
    align-items: end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.universal-header h1 { color: #fff; font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 950; margin: 0; }
.universal-search {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #fff;
    min-width: min(22rem, 45vw);
    padding: .85rem 1.2rem;
}
.universal-search::placeholder { color: rgba(255,255,255,.5); }
.profile-strip {
    background:
        radial-gradient(circle at 14% 12%, rgba(27, 212, 255, .20), transparent 30%),
        radial-gradient(circle at 86% 8%, rgba(229, 9, 47, .22), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1.65rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.30);
    display: grid;
    gap: .95rem;
    margin: 0 0 1.45rem;
    overflow: hidden;
    padding: 1rem;
    position: relative;
}
.profile-strip::before {
    background: linear-gradient(90deg, rgba(255,255,255,.22), transparent 38%, rgba(255,255,255,.12));
    content: "";
    height: 1px;
    left: 1rem;
    position: absolute;
    right: 1rem;
    top: 0;
}
.profile-showcase-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}
.profile-showcase-kicker {
    color: var(--brand-cyan);
    display: block;
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.profile-showcase-head h2 {
    color: #fff;
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
    font-weight: 950;
    margin: .1rem 0 0;
}
.profile-active-pill {
    align-items: center;
    background: rgba(0,0,0,.30);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: rgba(255,255,255,.88);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    gap: .5rem;
    padding: .35rem .75rem .35rem .4rem;
    white-space: nowrap;
}
.profile-active-pill span {
    align-items: center;
    background: linear-gradient(135deg, var(--brand-red), var(--brand-cyan));
    border-radius: 999px;
    display: inline-flex;
    height: 1.9rem;
    justify-content: center;
    width: 1.9rem;
}
.profile-showcase-rail {
    display: grid;
    gap: .85rem;
    grid-auto-columns: minmax(8.8rem, 11.5rem);
    grid-auto-flow: column;
    overflow-x: auto;
    padding: .15rem .1rem .35rem;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}
.profile-chip {
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
}
.profile-avatar-card {
    align-items: center;
    background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1.35rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 45px rgba(0,0,0,.24);
    cursor: pointer;
    display: grid;
    gap: .45rem;
    min-height: 9.2rem;
    padding: .95rem .75rem;
    place-items: center;
    position: relative;
    text-align: center;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.profile-avatar-card:hover,
.profile-avatar-card:focus-visible,
.profile-avatar-card.active {
    background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
    border-color: var(--profile-secondary, #1bd4ff);
    box-shadow: 0 22px 60px rgba(0,0,0,.34), 0 0 0 1px rgba(27,212,255,.30);
    outline: none;
    transform: translateY(-.22rem);
}
.profile-avatar-card.active::after {
    background: linear-gradient(135deg, var(--profile-primary, #e5092f), var(--profile-secondary, #1bd4ff));
    border-radius: 999px;
    bottom: .6rem;
    content: "Viendo";
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .08em;
    padding: .22rem .55rem;
    position: absolute;
    text-transform: uppercase;
}
.profile-avatar-orb {
    align-items: center;
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.55), transparent 24%),
        linear-gradient(135deg, var(--profile-primary, #e5092f), var(--profile-secondary, #1bd4ff));
    border: 3px solid rgba(255,255,255,.22);
    border-radius: 1.45rem;
    box-shadow: 0 18px 38px rgba(0,0,0,.32);
    display: inline-flex;
    font-size: 2.15rem;
    height: 4.7rem;
    justify-content: center;
    line-height: 1;
    width: 4.7rem;
}
.profile-avatar-card strong {
    color: #fff;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.profile-avatar-card small {
    color: rgba(255,255,255,.62);
    font-size: .72rem;
    font-weight: 850;
    min-height: 1rem;
    padding-bottom: .7rem;
}
.universal-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.universal-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    color: #fff;
    overflow: hidden;
    padding: 0;
    text-align: left;
}
.universal-card:hover,
.universal-card:focus-visible { outline: 3px solid rgba(27, 212, 255, .7); transform: translateY(-2px); }
.universal-card-art { background: #111827; position: relative; }
.universal-card-art > img:not(.universal-card-logo) { aspect-ratio: 2 / 3; display: block; object-fit: cover; width: 100%; }
.platform-card { grid-column: span 2; }
.platform-art > img:not(.platform-logo) { aspect-ratio: 16 / 9; }
.universal-card-logo {
    bottom: .65rem;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.8));
    left: .65rem;
    max-height: 3.4rem;
    max-width: 78%;
    object-fit: contain;
    position: absolute;
    width: auto;
}
.platform-logo { max-height: 4.5rem; }
.platform-logo-wordmark {
    color: #fff;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
    font-size: clamp(1rem, 1.7vw, 1.45rem);
    font-weight: 950;
    line-height: 1;
    max-width: 82%;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    z-index: 2;
}
.universal-card-placeholder {
    align-items: center;
    aspect-ratio: 2 / 3;
    color: rgba(255,255,255,.35);
    display: flex;
    font-size: 2rem;
    font-weight: 950;
    justify-content: center;
}
.universal-card-copy { display: grid; gap: .28rem; padding: .75rem; }
.universal-card-title { display: block; font-weight: 900; padding: 0; }
.universal-card-meta { color: rgba(255,255,255,.68); font-size: .76rem; font-weight: 750; line-height: 1.25; }
.universal-card-description {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: rgba(255,255,255,.62);
    display: -webkit-box;
    font-size: .78rem;
    line-height: 1.35;
    overflow: hidden;
}
.universal-content-rows {
    display: block;
    margin-inline: calc(-1 * clamp(1rem, 3vw, 2.5rem));
}

.universal-home-row {
    padding-inline: clamp(1rem, 4.5vw, 4rem);
}

.universal-stream-grid {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.universal-stream-button {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
    width: 100%;
}

.universal-stream-button .stream-card-meta h3 {
    color: #fff;
}

.install-intro {
    margin-top: .85rem;
    width: 100%;
}

.universal-movie-page-shell {
    display: grid;
    gap: 1rem;
}
.universal-movie-pagination {
    align-items: center;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1rem;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    padding: .75rem;
}
.universal-movie-pagination strong {
    font-weight: 950;
}
.universal-movie-pagination span {
    color: rgba(255,255,255,.7);
    font-weight: 800;
}
.universal-movie-page-btn {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    font-weight: 950;
    min-height: 2.75rem;
    padding: .55rem 1rem;
}
.universal-movie-page-btn:focus-visible,
.universal-movie-page-btn:hover {
    background: var(--profile-primary, #e5092f);
    outline: 3px solid rgba(255,255,255,.7);
}
.universal-movie-page-btn:disabled {
    cursor: default;
    opacity: .42;
}

.movie-pagination-bar {
    align-items: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 1rem;
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    margin: 0 0 1rem;
    padding: .75rem .9rem;
}
.movie-pagination-bar.bottom {
    margin: 1.25rem 0 0;
}
.movie-pagination-bar strong {
    color: rgba(255,255,255,.88);
    font-weight: 900;
    text-align: center;
}
.movie-page-btn {
    align-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    gap: .35rem;
    padding: .55rem .9rem;
    text-decoration: none;
}
.movie-page-btn:hover,
.movie-page-btn:focus-visible {
    background: var(--profile-primary, #e5092f);
    color: #fff;
    outline: none;
}
.movie-page-btn.disabled {
    cursor: default;
    opacity: .42;
}
@media (max-width: 620px) {
    .movie-pagination-bar { flex-wrap: wrap; justify-content: center; }
    .movie-pagination-bar strong { flex-basis: 100%; order: -1; }
}

.platform-top-dropdown-menu {
    max-height: min(72vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--profile-primary, #e5092f) rgba(255,255,255,.12);
    scrollbar-width: thin;
}
.platform-top-dropdown-menu::-webkit-scrollbar {
    width: .65rem;
}
.platform-top-dropdown-menu::-webkit-scrollbar-track {
    background: rgba(255,255,255,.12);
    border-radius: 999px;
}
.platform-top-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--profile-primary, #e5092f);
    border-radius: 999px;
}

.universal-stream-button:focus-visible {
    outline: 3px solid rgba(27, 212, 255, .72);
    outline-offset: .35rem;
}

.platform-carousel-shell {
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
}
.platform-vertical-nav {
    align-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.52));
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    box-shadow: 0 18px 42px rgba(0,0,0,.42);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .65rem .42rem;
    position: absolute;
    right: .55rem;
    top: 4.5rem;
    bottom: 3.4rem;
    width: 3.4rem;
    z-index: 36;
}
.platform-vertical-nav-range {
    accent-color: var(--profile-primary, #e5092f);
    cursor: pointer;
    flex: 1;
    min-height: 9rem;
    writing-mode: vertical-rl;
    width: 2.2rem;
}
.platform-vertical-nav-btn {
    align-items: center;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-size: .92rem;
    font-weight: 950;
    height: 2.15rem;
    justify-content: center;
    line-height: 1;
    width: 2.15rem;
}
.platform-vertical-nav-btn:hover,
.platform-vertical-nav-btn:focus-visible {
    background: var(--profile-primary, #e5092f);
    outline: 2px solid rgba(255,255,255,.72);
}
.platform-vertical-nav span {
    color: rgba(255,255,255,.82);
    display: block;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1.05;
    max-height: 5.5rem;
    max-width: 2.5rem;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    writing-mode: vertical-rl;
}
.platform-carousel-heading {
    align-items: center;
    color: rgba(255,255,255,.82);
    display: flex;
    font-size: 1.05rem;
    gap: .5rem;
    grid-column: 1 / -1;
    letter-spacing: .02em;
}
.platform-carousel-heading strong { color: #fff; }
.platform-carousel-viewport {
    grid-column: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .25rem 5.4rem 1rem 4.4rem;
    scroll-behavior: smooth;
    scroll-padding-inline: 1rem;
    scrollbar-width: thin;
    touch-action: pan-x;
}
.platform-carousel-track {
    display: grid;
    gap: 1rem;
    grid-auto-columns: minmax(12.5rem, 15rem);
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    width: max-content;
}
.platform-carousel-prev,
.platform-carousel-next {
    align-items: center;
    background: rgba(0,0,0,.72);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(0,0,0,.42);
    color: #fff;
    display: flex;
    font-size: 2.8rem;
    font-weight: 950;
    height: 3.8rem;
    justify-content: center;
    line-height: 1;
    opacity: 1;
    position: absolute;
    pointer-events: auto;
    top: calc(50% + 1.15rem);
    transform: translateY(-50%);
    visibility: visible;
    width: 3.8rem;
    z-index: 30;
}
.platform-carousel-prev { left: .55rem; }
.platform-carousel-next { right: .55rem; }
.platform-carousel-prev:hover,
.platform-carousel-next:hover,
.platform-carousel-prev:focus-visible,
.platform-carousel-next:focus-visible {
    background: rgba(27, 212, 255, .32);
    outline: 3px solid rgba(27, 212, 255, .8);
}
.platform-carousel-prev.is-muted,
.platform-carousel-next.is-muted { opacity: .72; }
.platform-more-indicator {
    background: linear-gradient(90deg, transparent, rgba(6,7,11,.96) 32%);
    border-radius: 999px;
    bottom: .4rem;
    color: rgba(255,255,255,.86);
    font-size: .88rem;
    font-weight: 850;
    padding: .45rem .75rem .45rem 2.6rem;
    pointer-events: none;
    position: absolute;
    right: 4rem;
}
.platform-card {
    grid-column: auto;
    min-height: 0;
    width: 100%;
}
.platform-name {
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
}
.platform-fallback-art {
    aspect-ratio: 16 / 9;
    background: radial-gradient(circle at top left, rgba(229,9,47,.74), rgba(124,58,237,.58) 52%, rgba(17,24,39,1));
    width: 100%;
}
.universal-empty { color: rgba(255,255,255,.7); grid-column: 1 / -1; padding: 2rem; text-align: center; }
.content-preview-overlay {
    align-items: center;
    background: rgba(0, 0, 0, .72);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    position: fixed;
    z-index: 1800;
}
.content-preview-overlay[hidden] { display: none; }
.content-preview-panel {
    background: #070a12;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 1.35rem;
    box-shadow: 0 30px 90px rgba(0,0,0,.72);
    max-height: min(92vh, 54rem);
    max-width: 68rem;
    overflow: hidden auto;
    position: relative;
    width: min(100%, 68rem);
}
.content-preview-close {
    align-items: center;
    background: rgba(0,0,0,.62);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    height: 2.8rem;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 2.8rem;
    z-index: 5;
}
.content-preview-backdrop {
    background: linear-gradient(135deg, rgba(229,9,47,.5), rgba(15,23,42,.96));
    background-position: center;
    background-size: cover;
    height: clamp(15rem, 42vw, 28rem);
    opacity: .72;
}
.content-preview-gradient {
    background: linear-gradient(180deg, transparent, #070a12 88%);
    height: clamp(15rem, 42vw, 28rem);
    inset: 0 0 auto;
    pointer-events: none;
    position: absolute;
}
.content-preview-body {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr);
    margin-top: clamp(-8rem, -12vw, -5rem);
    padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem);
    position: relative;
    z-index: 2;
}
.content-preview-poster {
    align-self: start;
    background: #111827;
    border-radius: 1rem;
    box-shadow: 0 18px 44px rgba(0,0,0,.56);
    overflow: hidden;
}
.content-preview-poster img,
.content-preview-poster-fallback {
    aspect-ratio: 2 / 3;
    display: block;
    object-fit: cover;
    width: 100%;
}
.content-preview-poster-fallback {
    align-items: center;
    color: rgba(255,255,255,.35);
    display: flex;
    font-size: 2.4rem;
    font-weight: 950;
    justify-content: center;
}
.content-preview-copy { align-self: end; display: grid; gap: .85rem; min-width: 0; }
.content-preview-eyebrow {
    color: var(--brand-cyan);
    font-size: .82rem;
    font-weight: 950;
    letter-spacing: .08em;
    margin: 0;
    text-transform: uppercase;
}
.content-preview-copy h2 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 4.2rem);
    font-weight: 950;
    line-height: .98;
    margin: 0;
}
.content-preview-meta,
.content-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}
.content-preview-meta span {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.88);
    font-size: .88rem;
    font-weight: 850;
    padding: .38rem .68rem;
}
.content-preview-synopsis {
    color: rgba(255,255,255,.78);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    max-width: 48rem;
}
.content-preview-episodes {
    color: rgba(255,255,255,.72);
    display: grid;
    gap: .2rem;
}
.content-preview-episodes strong { color: #fff; }
.content-preview-btn {
    align-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    gap: .45rem;
    min-height: 2.8rem;
    padding: .7rem 1rem;
}
.content-preview-btn.primary { background: #fff; color: #070a12; }
.content-preview-btn:disabled { cursor: not-allowed; opacity: .66; }
.content-preview-btn:focus-visible,
.content-preview-close:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(27, 212, 255, .45), 0 0 0 .42rem rgba(255,255,255,.18);
    outline: none;
}
.content-preview-more {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1rem;
    display: grid;
    gap: .7rem;
    padding: 1rem;
}
.content-preview-more[hidden] { display: none; }
.content-preview-more div { display: grid; gap: .18rem; }
.content-preview-more strong { color: #fff; }
.content-preview-more span { color: rgba(255,255,255,.72); }
.content-preview-episode-list {
    max-height: 12rem;
    overflow: auto;
}
@media (max-width: 720px) {
    .content-preview-body { grid-template-columns: 1fr; margin-top: -6rem; }
    .content-preview-poster { max-width: 10rem; }
    .content-preview-copy { align-self: start; }
}
.universal-player {
    background: rgba(0,0,0,.96);
    inset: 0;
    position: fixed;
    transition: border-radius .2s ease, box-shadow .2s ease, height .2s ease, inset .2s ease, width .2s ease;
    z-index: 2000;
}
.universal-player video { background: #000; height: 100%; object-fit: contain; width: 100%; }
.mobile-playback-prompt {
    align-items: center;
    background: radial-gradient(circle, rgba(0,0,0,.38), rgba(0,0,0,.76));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    inset: 0;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    text-align: center;
    z-index: 5;
}
.mobile-playback-prompt[hidden] { display: none; }
.mobile-playback-start {
    align-items: center;
    background: var(--brand-red);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 1.05rem;
    font-weight: 900;
    gap: .45rem;
    min-height: 3.2rem;
    padding: .75rem 1.2rem;
    pointer-events: auto;
}
.mobile-playback-prompt small { color: rgba(255,255,255,.78); font-weight: 700; }
.universal-player.is-mini {
    background: #000;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    bottom: max(1rem, env(safe-area-inset-bottom));
    box-shadow: 0 22px 70px rgba(0,0,0,.62);
    height: min(28vh, 13.5rem);
    inset: auto max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) auto;
    overflow: hidden;
    width: min(24rem, calc(100vw - 2rem));
}
.universal-player.is-mini video { border-radius: 14px; object-fit: cover; }
.universal-player.is-mini::before {
    background: linear-gradient(180deg, rgba(0,0,0,.62), transparent 46%, rgba(0,0,0,.68));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}
.floating-player-controls {
    display: flex;
    gap: .45rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 3;
}
.floating-player-btn {
    align-items: center;
    background: rgba(10,14,24,.72);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    height: 2.8rem;
    justify-content: center;
    width: 2.8rem;
}
.floating-player-btn:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(27, 212, 255, .45), 0 0 0 .42rem rgba(255, 255, 255, .18);
    outline: none;
}
.floating-player-btn.danger { background: rgba(229, 9, 47, .72); }
.universal-player.is-mini .floating-player-controls { gap: .25rem; right: .45rem; top: .45rem; }
.universal-player.is-mini .floating-player-btn { height: 2.25rem; width: 2.25rem; }
.player-title { bottom: 9.3rem; color: rgba(255,255,255,.82); font-weight: 800; left: 1rem; max-width: calc(100% - 2rem); overflow: hidden; position: absolute; text-overflow: ellipsis; white-space: nowrap; z-index: 2; }
.universal-player.is-mini .player-title { bottom: .55rem; font-size: .82rem; left: .75rem; max-width: calc(100% - 1.5rem); }
.professional-player-panel {
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.86) 16%, rgba(3,7,18,.96));
    bottom: 0;
    color: #fff;
    display: grid;
    gap: .75rem;
    left: 0;
    padding: 2.2rem max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-bottom));
    position: absolute;
    right: 0;
    z-index: 4;
}
.player-info-line { color: rgba(255,255,255,.9); font-weight: 900; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-progress-row { align-items: center; display: grid; gap: .65rem; grid-template-columns: auto minmax(8rem,1fr) auto auto; }
.player-progress { accent-color: var(--brand-red); cursor: pointer; width: 100%; }
.player-control-grid { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; }
.player-control-btn,
.player-select-wrap {
    align-items: center;
    background: rgba(15,23,42,.78);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-weight: 850;
    gap: .35rem;
    min-height: 2.7rem;
    padding: .55rem .85rem;
}
.player-control-btn.primary { background: var(--brand-red); border-color: rgba(255,255,255,.28); }
.player-control-btn:disabled { cursor: not-allowed; opacity: .38; }
.player-control-btn:focus-visible,
.player-select-wrap:focus-within { box-shadow: 0 0 0 .2rem rgba(27,212,255,.45), 0 0 0 .42rem rgba(255,255,255,.18); outline: none; }
.player-select-wrap select {
    background: rgba(0,0,0,.42);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    padding: .28rem .55rem;
}
.universal-player.is-mini .professional-player-panel { display: none; }
.player-lan-indicator {
    background: rgba(16,185,129,.92);
    border-radius: 999px;
    color: #031712;
    font-weight: 900;
    left: 1rem;
    padding: .45rem .8rem;
    position: absolute;
    top: 1rem;
    z-index: 2;
}
@media (max-width: 900px) {
    .platform-carousel-shell { grid-template-columns: 1fr; }
    .platform-carousel-heading { display: none; }
    .platform-more-indicator { display: block; right: 3.4rem; }
    .platform-vertical-nav { bottom: 3.2rem; right: .35rem; top: 1rem; width: 3rem; }
    .platform-vertical-nav-range { width: 1.9rem; }
    .platform-vertical-nav span { display: none; }
    .platform-carousel-viewport { grid-column: 1; padding-left: 3.5rem; padding-right: 4.2rem; }
    .platform-carousel-track { grid-auto-columns: minmax(10rem, 12rem); grid-template-rows: 1fr; }
    .platform-carousel-prev,
    .platform-carousel-next { display: flex; height: 3rem; width: 3rem; font-size: 2.2rem; }
    .universal-shell { grid-template-columns: 1fr; }
    .universal-sidebar { flex-direction: row; height: auto; overflow-x: auto; position: sticky; z-index: 10; }
    .universal-brand.compact { display: none; }
    .nav-pill { white-space: nowrap; }
    .universal-header { align-items: stretch; display: grid; }
    .universal-search { min-width: 0; width: 100%; }
    .universal-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
    .universal-player.is-mini {
        bottom: max(.75rem, env(safe-area-inset-bottom));
        height: min(31vh, 11rem);
        left: .75rem;
        right: .75rem;
        width: auto;
    }
    .universal-player.is-mini .floating-player-btn { height: 2.15rem; width: 2.15rem; }
    .professional-player-panel { gap: .55rem; padding-top: 1.5rem; }
    .player-title { bottom: 12rem; }
    .player-progress-row { font-size: .82rem; gap: .4rem; grid-template-columns: auto minmax(5rem,1fr) auto; }
    .player-progress-row #playerPercent { display: none; }
    .player-control-grid { gap: .4rem; max-height: 8rem; overflow-y: auto; }
    .player-control-btn, .player-select-wrap { font-size: .82rem; min-height: 2.35rem; padding: .42rem .62rem; }
    .player-select-wrap select { max-width: 8.5rem; }
}
@media (min-width: 1400px) {
    .universal-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
    .nav-pill { font-size: 1.08rem; padding: 1rem 1.1rem; }
}

.universal-profile-select {
    min-height: 100vh;
}

.universal-profile-select .profiles-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
}

.universal-profile-choice {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 0;
    width: 100%;
}

.universal-profile-select .profile-card.active .profile-avatar-button {
    border-color: rgba(255,255,255,.86);
}

/* Netflix-style profile selector */
.netflix-profiles {
    align-items: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(229, 9, 20, .12), transparent 34rem),
        linear-gradient(180deg, #111 0%, #050505 52%, #000 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 4rem);
    padding: clamp(1.5rem, 4vw, 4.5rem);
}

.netflix-profiles .profiles-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin: 0 auto clamp(1.6rem, 4vw, 3rem);
    max-width: 1180px;
    width: 100%;
}

.netflix-profiles .profile-limit {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: .45rem .7rem;
}

.netflix-profiles .profiles-title-block {
    margin: 0 auto clamp(1.8rem, 4vw, 3rem);
    max-width: 1180px;
    text-align: center;
    width: 100%;
}

.netflix-profiles .profiles-title-block h1 {
    color: #f5f5f5;
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    font-weight: 500;
    letter-spacing: -.04em;
    margin: 0;
}

.netflix-profiles .profiles-title-block p {
    color: rgba(255, 255, 255, .48);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    margin: .5rem 0 0;
}

.netflix-profiles .profiles-alert {
    width: min(100%, 760px);
}

.netflix-profiles .profiles-grid {
    align-items: start;
    display: grid;
    gap: clamp(1rem, 2.4vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    justify-content: center;
    max-width: 1080px;
    width: 100%;
}

.netflix-profiles .profile-card {
    background: transparent;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
    padding: .25rem;
    position: relative;
    transition: transform .18s ease;
}

.netflix-profiles .profile-card:hover,
.netflix-profiles .profile-card:focus-within {
    border-color: transparent;
    transform: translateY(-.25rem) scale(1.025);
}

.netflix-profiles .profile-select-form {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.netflix-profiles .profile-avatar-button {
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--profile-secondary, #1bd4ff) 70%, #fff), transparent 32%),
        linear-gradient(145deg, color-mix(in srgb, var(--profile-primary, #e5092f) 72%, #191919), color-mix(in srgb, var(--profile-secondary, #1bd4ff) 58%, #101010));
    border: 4px solid transparent;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 42px rgba(0,0,0,.38);
    color: #fff;
    cursor: pointer;
    font-size: clamp(3.8rem, 9vw, 6.7rem);
    margin-bottom: .9rem;
    max-width: none;
    overflow: hidden;
    position: relative;
    transition: border-color .16s ease, box-shadow .16s ease, filter .16s ease;
    width: 100%;
}

.netflix-profiles .profile-avatar-button:hover,
.netflix-profiles .profile-avatar-button:focus-visible {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 22px 54px rgba(0,0,0,.5);
    filter: brightness(1.08);
    outline: 0;
}

.netflix-profiles .profile-avatar-button span {
    line-height: 1;
    transform: translateY(.03em);
}

.netflix-profiles .profile-avatar-button em {
    background: #19d3ff;
    border-radius: 999px;
    bottom: .65rem;
    color: #001018;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em;
    padding: .24rem .55rem;
    position: absolute;
    right: .65rem;
    text-transform: uppercase;
}

.netflix-profiles .profile-card h2 {
    color: rgba(255,255,255,.72);
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    font-weight: 500;
    letter-spacing: -.01em;
    margin: 0;
}

.netflix-profiles .profile-card:hover h2,
.netflix-profiles .profile-card:focus-within h2 {
    color: #fff;
}

.netflix-profiles .profile-card-child .profile-avatar-button {
    background:
        radial-gradient(circle at 25% 18%, rgba(255,255,255,.35), transparent 32%),
        linear-gradient(145deg, #00c2ff, #7a5cff 48%, #ff8bd1);
}

.netflix-profiles .profile-tags {
    margin-top: .7rem;
    min-height: 1.6rem;
}

.netflix-profiles .profile-tags span {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.68);
}

.netflix-profiles .profile-tags .kids-tag {
    background: rgba(25, 211, 255, .18);
    border-color: rgba(25, 211, 255, .38);
    color: #9cecfd;
}

.netflix-profiles .profile-pin {
    background: rgba(255,255,255,.96);
    margin: .75rem auto 0;
    max-width: 11rem;
}

.netflix-profiles .manage-only {
    display: none;
}

.netflix-profiles.is-managing .manage-only {
    display: flex;
}

.netflix-profiles .profile-actions {
    margin-top: .85rem;
}

.netflix-profiles .profile-editor {
    background: rgba(20,20,20,.96);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(0,0,0,.55);
    margin-top: 1rem;
    padding: 1rem;
}

.netflix-profiles .profile-form .form-label,
.netflix-profiles .profile-checks {
    color: rgba(255,255,255,.84);
}

.netflix-profiles .add-profile-button {
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 3px dashed rgba(255,255,255,.38);
    box-shadow: none;
    color: rgba(255,255,255,.72);
}

.netflix-profiles .add-profile-button:hover,
.netflix-profiles .add-profile-button:focus-visible {
    background: rgba(255,255,255,.14);
    border-color: #fff;
    color: #fff;
}

.avatar-picker {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
}

.avatar-option {
    cursor: pointer;
    display: grid;
    gap: .28rem;
    justify-items: center;
}

.avatar-option input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.avatar-option span {
    align-items: center;
    aspect-ratio: 1;
    background: linear-gradient(145deg, #2a2a2a, #121212);
    border: 2px solid rgba(255,255,255,.16);
    border-radius: 14px;
    display: inline-flex;
    font-size: 2.1rem;
    justify-content: center;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
    width: 100%;
}

.avatar-option small {
    color: rgba(255,255,255,.62);
    font-size: .68rem;
    line-height: 1.1;
    text-align: center;
}

.avatar-option input:checked + span {
    background: linear-gradient(145deg, #e50914, #751014);
    border-color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 700px) {
    .netflix-profiles {
        justify-content: flex-start;
        padding-top: 2rem;
    }

    .netflix-profiles .profiles-toolbar {
        flex-direction: column-reverse;
        justify-content: center;
    }

    .netflix-profiles .profiles-grid {
        grid-template-columns: repeat(2, minmax(132px, 1fr));
    }
}

@media (min-width: 1200px) {
    .netflix-profiles .profiles-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 190px));
    }
}

@media (pointer: coarse) {
    .netflix-profiles .profile-avatar-button {
        border-width: 3px;
        min-height: 9.5rem;
    }
}

.universal-body.is-authenticated #activationScreen,
.universal-body.is-authenticated .universal-activation,
.universal-body.is-authenticated #profileSelectScreen {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.universal-body.is-authenticated #appScreen {
    display: grid !important;
}

.client-notification-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.06);
    text-decoration: none;
}
.client-notification-bell:hover,
.client-notification-bell.has-unread {
    color: #fff;
    border-color: rgba(229,9,47,.75);
    background: rgba(229,9,47,.18);
}
.client-notification-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e5092f;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px #08090f;
}
.content-notification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.content-notification-card {
    display: grid;
    grid-template-rows: 270px auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    color: #fff;
    text-decoration: none;
}
.content-notification-card:hover {
    color: #fff;
    border-color: rgba(229,9,47,.65);
    transform: translateY(-2px);
}
.content-notification-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: linear-gradient(135deg, rgba(229,9,47,.35), rgba(27,212,255,.18));
}
.content-notification-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 48px;
    background: linear-gradient(135deg, rgba(229,9,47,.35), rgba(27,212,255,.18));
}
.content-notification-body {
    padding: 14px;
}
.content-notification-kicker {
    color: rgba(255,255,255,.68);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.content-notification-title {
    margin: 5px 0 8px;
    font-size: 16px;
    font-weight: 800;
}
.content-notification-meta {
    color: rgba(255,255,255,.7);
    font-size: 13px;
}

/* TV/WebView auto-fit: Fire TV and Android TV report a short landscape viewport.
   Keep the original backend UI but reduce visual density so platforms/cards fit screen. */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 720px) {
    html {
        font-size: clamp(12px, 1.65vw, 15px);
    }

    .app-nav {
        min-height: 0;
    }

    .brand-mark {
        height: 1.9rem;
        width: 1.9rem;
    }

    .brand-copy span {
        font-size: .92rem;
    }

    .brand-copy small {
        font-size: .58rem;
    }

    .stream-body .navbar-nav .nav-link {
        padding: .34rem .52rem;
    }

    .client-nav-package,
    .client-nav-profile {
        font-size: .68rem;
        padding-block: .2rem;
    }

    .stream-main {
        padding-bottom: 1.6rem;
    }

    .stream-hero {
        gap: 1.25rem;
        min-height: 54vh;
        padding: clamp(3.2rem, 8vh, 4.5rem) clamp(1.2rem, 3vw, 2.4rem) clamp(1.6rem, 5vh, 2.6rem);
    }

    .hero-content {
        max-width: min(42rem, 62vw);
    }

    .stream-hero h1,
    .detail-copy h1 {
        font-size: clamp(1.8rem, 4.8vw, 3.35rem);
        max-width: 16ch;
    }

    .title-art {
        max-height: 5.4rem;
        max-width: min(22rem, 54vw);
    }

    .hero-content p,
    .detail-copy p,
    .watch-copy p {
        font-size: .92rem;
        line-height: 1.45;
        max-width: 38rem;
    }

    .stream-row,
    .recent-auto-row,
    .collection-library-shell {
        margin-bottom: 1.3rem;
    }

    .stream-row-head,
    .recent-row-head {
        margin-bottom: .25rem;
    }

    .stream-row-head h2,
    .recent-row-head h2 {
        font-size: clamp(1.15rem, 2.5vw, 1.55rem);
    }

    .stream-rail {
        --rail-edge-space: clamp(1rem, 2.8vw, 2.2rem);
        gap: .65rem;
        grid-auto-columns: clamp(6.7rem, 10vw, 8.5rem);
        padding-bottom: 1.25rem;
        padding-top: .45rem;
    }

    .recent-rail {
        gap: .7rem;
        grid-auto-columns: clamp(8rem, 12vw, 10rem);
        padding-bottom: 1rem;
    }

    .stream-grid,
    .collection-library-grid {
        gap: .7rem;
        grid-template-columns: repeat(auto-fill, minmax(clamp(6.8rem, 10vw, 8.5rem), 1fr));
    }

    .stream-poster {
        border-radius: 7px;
        font-size: 2.15rem;
    }

    .stream-card:focus-visible,
    .stream-card:hover {
        transform: translateY(-.28rem) scale(1.055);
    }

    .recent-card:hover,
    .recent-card:focus-visible {
        transform: translateY(-.22rem) scale(1.035);
    }

    .stream-card-meta h3,
    .recent-meta h3 {
        font-size: .82rem;
        line-height: 1.18;
    }

    .stream-card-meta p,
    .recent-meta p,
    .quality-chip {
        font-size: .66rem;
    }

    .catalog-tools,
    .collection-search {
        transform-origin: top left;
    }
}

/* TV remote focus: visible on Fire TV / Android TV without changing playback logic. */
.stream-body a:focus-visible,
.stream-body button:focus-visible,
.stream-body input:focus,
.stream-body select:focus,
.stream-body textarea:focus,
.stream-body .focusable:focus-visible {
    outline: 3px solid var(--brand-cyan);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(27, 212, 255, .22), 0 18px 45px rgba(0, 0, 0, .38);
}

.stream-body .platform-card:focus-visible,
.stream-body .stream-card:focus-visible,
.stream-body .episode-card:focus-visible,
.stream-body .live-tv-channel:focus-visible,
.stream-body .content-notification-card:focus-visible {
    border-color: var(--brand-cyan);
    outline: 3px solid var(--brand-cyan);
    outline-offset: 3px;
    z-index: 50;
}

@media (orientation: landscape) and (min-width: 700px) and (max-height: 720px) {
    .stream-body a:focus-visible,
    .stream-body button:focus-visible,
    .stream-body .focusable:focus-visible {
        outline-width: 2px;
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(27, 212, 255, .20), 0 12px 28px rgba(0, 0, 0, .34);
    }
}

/* TV profile selector auto-fit: keep profiles usable on Fire TV / Android TV WebView. */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 720px) {
    .netflix-profiles {
        justify-content: flex-start;
        min-height: calc(100vh - 3rem);
        overflow-x: hidden;
        overflow-y: auto;
        padding: clamp(.7rem, 2vh, 1.1rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 3vh, 1.6rem);
    }

    .netflix-profiles .profiles-toolbar {
        gap: .55rem;
        margin-bottom: clamp(.45rem, 1.6vh, .8rem);
        max-width: min(92vw, 980px);
    }

    .netflix-profiles .profile-limit {
        padding: .25rem .5rem;
    }

    .netflix-profiles .profile-limit label,
    .netflix-profiles .manage-profiles-btn,
    .netflix-profiles .form-select-sm {
        font-size: .72rem;
    }

    .netflix-profiles .profiles-title-block {
        margin-bottom: clamp(.7rem, 2vh, 1.1rem);
        max-width: min(92vw, 980px);
    }

    .netflix-profiles .profiles-title-block h1 {
        font-size: clamp(1.55rem, 4.4vw, 2.55rem);
        letter-spacing: -.025em;
        line-height: 1.05;
    }

    .netflix-profiles .profiles-title-block p {
        font-size: clamp(.72rem, 1.5vw, .9rem);
        margin-top: .22rem;
    }

    .netflix-profiles .profiles-grid {
        gap: clamp(.55rem, 1.5vw, .9rem);
        grid-template-columns: repeat(auto-fit, minmax(clamp(5.6rem, 11vw, 7.6rem), clamp(5.6rem, 11vw, 7.6rem)));
        justify-content: center;
        max-width: min(92vw, 900px);
    }

    .netflix-profiles .profile-card {
        border-radius: 12px;
        padding: .1rem;
    }

    .netflix-profiles .profile-card:hover,
    .netflix-profiles .profile-card:focus-within {
        transform: translateY(-.12rem) scale(1.018);
    }

    .netflix-profiles .profile-avatar-button,
    .netflix-profiles .add-profile-button {
        border-radius: 12px;
        border-width: 2px;
        font-size: clamp(2.1rem, 5.2vw, 3.45rem);
        margin-bottom: .42rem;
        min-height: 0;
        width: 100%;
    }

    .netflix-profiles .profile-avatar-button em {
        bottom: .32rem;
        font-size: .52rem;
        padding: .14rem .34rem;
        right: .32rem;
    }

    .netflix-profiles .profile-card h2 {
        font-size: clamp(.72rem, 1.55vw, .92rem);
        line-height: 1.12;
        margin-bottom: .28rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .netflix-profiles .profile-tags {
        gap: .22rem;
        margin-top: .3rem;
        min-height: 0;
    }

    .netflix-profiles .profile-tags span {
        font-size: .55rem;
        padding: .12rem .32rem;
    }

    .netflix-profiles .profile-pin {
        font-size: .72rem;
        margin-top: .35rem;
        max-width: 7rem;
        padding: .32rem .45rem;
    }

    .netflix-profiles .profile-actions {
        gap: .25rem;
        margin-top: .4rem;
    }

    .netflix-profiles .profile-actions .btn {
        font-size: .65rem;
        padding: .2rem .35rem;
    }

    .netflix-profiles .profile-editor {
        border-radius: 12px;
        margin-top: .45rem;
        max-height: 54vh;
        overflow-y: auto;
        padding: .55rem;
    }

    .netflix-profiles .profile-form {
        gap: .38rem;
    }

    .avatar-picker {
        gap: .32rem;
        grid-template-columns: repeat(auto-fit, minmax(2.8rem, 1fr));
    }

    .avatar-option span {
        border-radius: 9px;
        font-size: 1.35rem;
    }

    .avatar-option small {
        font-size: .52rem;
    }
}

/* TV catalog layout fix: search must not sit on top of hero/preview. */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 720px) {
    .stream-toolbar {
        margin: .75rem clamp(1rem, 3vw, 2rem) 1rem;
        z-index: 6;
    }

    .stream-toolbar-hero {
        margin-top: .75rem;
    }

    .search-panel {
        align-items: center;
        gap: .45rem;
        grid-template-columns: minmax(12rem, 1.25fr) minmax(7rem, .75fr) minmax(7rem, .75fr) auto;
        padding: .45rem;
        position: relative;
    }

    .search-box {
        min-height: 2.15rem;
        padding: 0 .55rem;
    }

    .search-box input,
    .search-panel select {
        font-size: .72rem;
        min-height: 2.15rem;
    }

    .search-panel select {
        padding: 0 .45rem;
    }

    .search-panel .btn {
        font-size: .72rem;
        min-height: 2.15rem;
        padding: .32rem .55rem;
        white-space: nowrap;
    }

    .stream-hero {
        min-height: 50vh;
        overflow: hidden;
        padding-bottom: clamp(1.2rem, 4vh, 2rem);
    }

    .hero-poster-panel {
        flex-basis: clamp(7rem, 13vw, 10rem);
        transform: translateY(0);
    }
}

/* Entrada: presentación visual solamente. No cambia flujo, rutas ni formularios. */
body:has(.login-wrap) {
    background:
        radial-gradient(circle at 12% 18%, rgba(229, 9, 47, .26), transparent 26rem),
        radial-gradient(circle at 88% 14%, rgba(27, 212, 255, .20), transparent 24rem),
        radial-gradient(circle at 50% 100%, rgba(112, 68, 255, .18), transparent 30rem),
        linear-gradient(135deg, #05070d 0%, #0b1020 46%, #09040a 100%);
    color: #fff;
}

body:has(.login-wrap) .app-nav {
    background: rgba(4, 7, 13, .76) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

body:has(.login-wrap) main.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.login-wrap {
    min-height: calc(100vh - 92px);
    padding: clamp(1.25rem, 4vw, 3rem);
    position: relative;
}

.login-wrap::before {
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    inset: 0;
    mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
    opacity: .55;
    pointer-events: none;
    position: absolute;
}

.login-panel {
    backdrop-filter: blur(22px) saturate(1.18);
    background:
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055)),
        rgba(8, 12, 22, .82);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    box-shadow: 0 34px 110px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
    color: #fff;
    max-width: 460px;
    padding: clamp(1.45rem, 3vw, 2.25rem);
    position: relative;
    overflow: hidden;
}

.login-panel::before {
    background: linear-gradient(90deg, #e5092f, #ff6b4a, #1bd4ff);
    content: "";
    height: 4px;
    left: 1.25rem;
    position: absolute;
    right: 1.25rem;
    top: 1rem;
    border-radius: 999px;
}

.login-panel h1 {
    background: linear-gradient(135deg, #fff 0%, #ffd9df 42%, #8feeff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(2.25rem, 6vw, 3.8rem);
    letter-spacing: -.055em;
    line-height: .94;
    margin-top: .75rem;
}

.login-panel .text-muted {
    color: rgba(255,255,255,.68) !important;
}

.login-panel .form-label {
    color: rgba(255,255,255,.84);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.login-panel .form-control {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 15px;
    color: #fff;
    min-height: 3.1rem;
}

.login-panel .form-control:focus {
    background: rgba(255,255,255,.13);
    border-color: rgba(27, 212, 255, .72);
    box-shadow: 0 0 0 4px rgba(27, 212, 255, .18), 0 15px 38px rgba(0,0,0,.26);
}

.login-panel .btn-primary {
    background: linear-gradient(135deg, #e5092f, #ff6b4a);
    border: 0;
    border-radius: 15px;
    box-shadow: 0 18px 44px rgba(229, 9, 47, .32);
    font-weight: 900;
    min-height: 3.1rem;
}

.login-panel .btn-primary:hover,
.login-panel .btn-primary:focus-visible {
    filter: brightness(1.08);
}

@media (orientation: landscape) and (min-width: 700px) and (max-height: 720px) {
    .login-wrap {
        min-height: calc(100vh - 58px);
        padding: .85rem;
    }
    .login-panel {
        border-radius: 18px;
        max-width: 430px;
        padding: 1.15rem;
    }
    .login-panel h1 {
        font-size: clamp(2rem, 5vw, 3rem);
    }
    .login-panel .form-control,
    .login-panel .btn-primary {
        min-height: 2.55rem;
    }
}

/* Web móvil: alinear con el sistema original. Solo presentación responsive. */
@media (max-width: 575.98px) {
    body.stream-body main.container-fluid,
    body.guest-body main.container-fluid {
        overflow-x: hidden;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .app-nav .container-fluid {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .brand-mark {
        height: 2.15rem;
        width: 2.15rem;
    }

    .brand-copy span {
        font-size: .95rem;
    }

    .stream-hero {
        align-items: flex-end;
        display: flex;
        min-height: 56vh;
        padding: 5.75rem 1rem 2.35rem;
        width: 100%;
    }

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

    .stream-hero h1,
    .detail-copy h1 {
        font-size: clamp(2rem, 10vw, 2.75rem);
        line-height: 1;
        max-width: 12ch;
    }

    .title-art {
        max-height: 5.2rem;
        max-width: 82vw;
    }

    .hero-content p {
        display: -webkit-box;
        font-size: .92rem;
        line-height: 1.45;
        max-width: 100%;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .hero-meta {
        gap: .4rem;
        margin-bottom: .7rem;
    }

    .hero-meta span {
        font-size: .72rem;
        padding: .24rem .48rem;
    }

    .hero-actions {
        gap: .55rem;
        margin-top: .9rem;
    }

    .hero-actions .btn {
        border-radius: 9px;
        font-size: .86rem;
        min-height: 2.55rem;
    }

    .stream-toolbar,
    .stream-toolbar-hero {
        margin: 1rem 0 1.25rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%;
    }

    .search-panel {
        border-radius: 14px;
        gap: .55rem;
        grid-template-columns: 1fr !important;
        padding: .65rem;
        width: 100%;
    }

    .search-box,
    .search-panel select,
    .search-panel .btn {
        grid-column: auto !important;
        min-height: 2.65rem;
        width: 100%;
    }

    .stream-row,
    .episodes-panel,
    .watch-layout,
    .watch-topbar,
    .collection-library-shell {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .stream-row-head,
    .recent-row-head {
        align-items: flex-start;
        gap: .2rem;
    }

    .stream-row-head h2,
    .recent-row-head h2 {
        font-size: 1.25rem;
        line-height: 1.15;
    }

    .stream-row-head span,
    .recent-row-head span {
        font-size: .78rem;
    }

    .platform-rail-shell {
        gap: .35rem;
        margin-bottom: 1.25rem;
        padding: 0 1rem !important;
        width: 100%;
    }

    .platform-rail {
        gap: .5rem;
        padding-bottom: .75rem;
    }

    .platform-card {
        flex: 0 0 auto;
        font-size: .78rem;
        height: 3.45rem;
        padding: .35rem;
        width: 6.85rem;
    }

    .platform-arrow {
        flex: 0 0 auto;
        height: 2.25rem;
        width: 2.25rem;
    }

    .stream-rail {
        --rail-edge-space: 1rem;
        gap: .65rem;
        grid-auto-columns: 8.1rem;
        padding-top: .35rem;
    }

    .recent-rail {
        gap: .65rem;
        grid-auto-columns: 8.8rem;
    }

    .stream-grid,
    .collection-library-grid {
        gap: .75rem;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .stream-card-meta h3,
    .recent-meta h3 {
        font-size: .84rem;
        line-height: 1.2;
    }

    .stream-card-meta p,
    .recent-meta p {
        font-size: .68rem;
    }

    .detail-hero,
    .detail-shell {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .login-wrap {
        min-height: calc(100vh - 72px);
        padding: 1rem;
    }

    .login-panel {
        border-radius: 18px;
        max-width: 100%;
        padding: 1.25rem;
        width: 100%;
    }
}

/* Profiles as a vertical list after client login. */
.netflix-profiles .profiles-grid {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-width: min(100%, 760px);
}

.netflix-profiles .profile-card {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 1.35rem;
    box-shadow: 0 1.2rem 3rem rgba(0,0,0,.22);
    padding: .9rem;
}

.netflix-profiles .profile-card:hover,
.netflix-profiles .profile-card:focus-within {
    border-color: rgba(255,255,255,.28);
    transform: translateY(-.12rem);
}

.netflix-profiles .profile-select-form {
    align-items: center;
    display: grid;
    gap: .2rem 1rem;
    grid-template-columns: clamp(4.25rem, 9vw, 5.8rem) minmax(0, 1fr);
    text-align: left;
}

.netflix-profiles .profile-avatar-button,
.netflix-profiles .add-profile-button {
    border-radius: 1rem;
    font-size: clamp(2.15rem, 5vw, 3.45rem);
    grid-row: 1 / span 2;
    height: clamp(4.25rem, 9vw, 5.8rem);
    margin: 0;
    min-height: 0;
    width: clamp(4.25rem, 9vw, 5.8rem);
}

.netflix-profiles .profile-card h2 {
    align-self: end;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    font-weight: 700;
    margin: 0;
}

.netflix-profiles .profile-pin {
    align-self: start;
    margin: .28rem 0 0;
    max-width: 13rem;
}

.netflix-profiles .profile-tags,
.netflix-profiles .profile-actions {
    margin-left: calc(clamp(4.25rem, 9vw, 5.8rem) + 1rem);
}

.netflix-profiles .profile-new {
    align-items: center;
    display: grid;
    gap: .2rem 1rem;
    grid-template-columns: clamp(4.25rem, 9vw, 5.8rem) minmax(0, 1fr);
}

.netflix-profiles .profile-new h2 {
    align-self: center;
}

.netflix-profiles .profile-new .profile-editor {
    grid-column: 1 / -1;
}

.netflix-profiles .profile-editor {
    margin-left: calc(clamp(4.25rem, 9vw, 5.8rem) + 1rem);
}

@media (max-width: 700px) {
    .netflix-profiles .profiles-grid {
        display: flex;
        flex-direction: column;
        max-width: 100%;
    }

    .netflix-profiles .profile-card {
        padding: .78rem;
    }

    .netflix-profiles .profile-tags,
    .netflix-profiles .profile-actions,
    .netflix-profiles .profile-editor {
        margin-left: 0;
    }
}

/* Modern profile avatar lettering. */
.netflix-profiles .profile-avatar-button span,
.avatar-option span {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 950;
    letter-spacing: -.08em;
}

.netflix-profiles .profile-avatar-button span {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(160,214,255,.72));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: .82em;
    text-shadow: none;
}

.avatar-option span {
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.30), transparent 30%),
        linear-gradient(145deg, #202936, #07090d 58%, #111927);
    color: #eaf6ff;
    font-size: 1.35rem;
}

.avatar-option input:checked + span {
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.42), transparent 30%),
        linear-gradient(145deg, #2a7dff, #111827 54%, #05d4ff);
    border-color: #fff;
}

/* Real modern avatar images. */
.netflix-profiles .profile-avatar-img,
.avatar-option img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.netflix-profiles .profile-avatar-button:has(.profile-avatar-img),
.netflix-profiles .add-profile-button:has(.profile-avatar-img) {
    background: #000;
    padding: 0;
}

.netflix-profiles .profile-avatar-button .profile-avatar-img {
    border-radius: .78rem;
}

.avatar-option .avatar-image-option {
    padding: 0;
}

.avatar-option .avatar-image-option img {
    border-radius: 12px;
}

/* Fire TV / Android TV deterministic focus navigation */
.universal-body .focusable:focus,
.universal-body .focusable:focus-visible,
.universal-body .focused,
.universal-body button:focus,
.universal-body button:focus-visible,
.universal-body a:focus,
.universal-body a:focus-visible,
.universal-body input:focus,
.universal-body select:focus {
    outline: 4px solid rgba(27, 212, 255, .98) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 7px rgba(255,255,255,.22), 0 0 34px rgba(27,212,255,.55) !important;
}

.universal-body .stream-card.focused,
.universal-body .stream-card:focus,
.universal-body .stream-card:focus-visible,
.universal-body .recent-card.focused,
.universal-body .recent-card:focus,
.universal-body .recent-card:focus-visible,
.universal-body .universal-card.focused,
.universal-body .universal-card:focus,
.universal-body .universal-card:focus-visible,
.universal-body .platform-card.focused,
.universal-body .platform-card:focus,
.universal-body .platform-card:focus-visible,
.universal-body .live-tv-channel.focused,
.universal-body .live-tv-channel:focus,
.universal-body .live-tv-channel:focus-visible {
    filter: saturate(1.14) brightness(1.08);
    transform: translateY(-.45rem) scale(1.075) !important;
    z-index: 80 !important;
}

.universal-body .nav-pill.focused,
.universal-body .nav-pill:focus,
.universal-body .nav-pill:focus-visible,
.universal-body .content-preview-btn.focused,
.universal-body .content-preview-btn:focus,
.universal-body .content-preview-btn:focus-visible,
.universal-body .floating-player-btn.focused,
.universal-body .floating-player-btn:focus,
.universal-body .floating-player-btn:focus-visible,
.universal-body .player-control-btn.focused,
.universal-body .player-control-btn:focus,
.universal-body .player-control-btn:focus-visible,
.universal-body .universal-movie-page-btn.focused,
.universal-body .universal-movie-page-btn:focus,
.universal-body .universal-movie-page-btn:focus-visible {
    background: rgba(27, 212, 255, .30) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

.universal-body .stream-card.focused .stream-poster,
.universal-body .stream-card:focus .stream-poster,
.universal-body .stream-card:focus-visible .stream-poster,
.universal-body .recent-card.focused .stream-poster,
.universal-body .recent-card:focus .stream-poster,
.universal-body .recent-card:focus-visible .stream-poster {
    border-color: rgba(27, 212, 255, .98) !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.7), 0 0 0 3px rgba(27,212,255,.75) !important;
}

.universal-body .stream-poster::after,
.universal-body .episode-recent-poster::before,
.universal-body .stream-chip,
.universal-body .quality-chip,
.universal-body .universal-card-logo,
.universal-body .platform-logo-wordmark,
.universal-body .content-preview-backdrop,
.universal-body .content-preview-gradient {
    pointer-events: none;
}

.universal-body .content-preview-overlay[hidden],
.universal-body .universal-player[hidden] {
    pointer-events: none;
}

.universal-body .content-preview-panel,
.universal-body .content-preview-close,
.universal-body .content-preview-btn,
.universal-body .floating-player-controls,
.universal-body .floating-player-btn,
.universal-body .player-control-btn,
.universal-body .mobile-playback-start {
    pointer-events: auto;
}