.lfx-compat-theme,
.lfx-auth-flow,
body.lfx-body {
    position: relative;
    background: radial-gradient(120% 80% at 50% -30%, rgba(59, 130, 246, 0.26), transparent 52%), linear-gradient(180deg, #05060d 0%, #090c18 100%);
}

.lfx-compat-theme::before,
.lfx-auth-flow::before,
body.lfx-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
    background: radial-gradient(120% 80% at 50% -30%, rgba(59, 130, 246, 0.24), transparent 54%), linear-gradient(180deg, #05060d 0%, #090c18 100%);
}

.lfx-compat-theme::after,
.lfx-auth-flow::after,
body.lfx-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(110deg, rgba(4, 6, 14, 0.88) 0%, rgba(4, 6, 14, 0.56) 42%, rgba(4, 6, 14, 0.92) 100%);
}

/* Mantém a parede de cartazes sempre no fundo */
.lfx-compat-theme > .lfx-compat-bg,
.lfx-auth-flow > .lfx-compat-bg,
body.lfx-body > .lfx-compat-bg {
    position: fixed !important;
    z-index: 0 !important;
}

/*
 * Camadas do conteúdo — não usar body > * { position:relative } genérico: isso
 * sobrescrevia position:fixed da sidebar (.lfx-sidebar), do skip link e do bloco WhatsApp extra.
 * Excluir também modais da landing (login, obrigar senha, TMDB, etc.) — precisam de position:fixed + z-index alto.
 */
.lfx-compat-theme > *:not(.lfx-compat-bg):not(nav.lfx-sidebar):not(a.lfx-homex-skip):not(.lfx-contact-extra):not(script):not(.modal-bg):not(.modal-releases):not(.modal-series):not(.modal-popular-movies):not(.modal-live-tv):not(#wa-float-btn),
.lfx-auth-flow > *:not(.lfx-compat-bg):not(nav.lfx-sidebar):not(a.lfx-homex-skip):not(.lfx-contact-extra):not(script):not(.modal-bg):not(.modal-releases):not(.modal-series):not(.modal-popular-movies):not(.modal-live-tv):not(#wa-float-btn),
body.lfx-body > *:not(.lfx-compat-bg):not(nav.lfx-sidebar):not(a.lfx-homex-skip):not(.lfx-contact-extra):not(script):not(.modal-bg):not(.modal-releases):not(.modal-series):not(.modal-popular-movies):not(.modal-live-tv):not(#wa-float-btn) {
    position: relative;
    z-index: 2;
}

.lfx-auth-flow .app-topbar,
.lfx-auth-flow .app-card,
.lfx-auth-flow .app-err,
.lfx-auth-flow .profile-tile,
.lfx-auth-flow .pf-modal {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(7, 10, 24, 0.70) 48%, rgba(6, 8, 14, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .4);
}

.lfx-auth-flow .app-btn--primary,
.lfx-auth-flow .profiles-btn {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    border-color: rgba(96, 165, 250, .8);
}

.lfx-auth-flow .app-tab--active {
    border-color: rgba(96, 165, 250, .8);
    color: #dbeafe;
}

#modalAssistirAgora .modal-content {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(7, 10, 24, 0.72) 48%, rgba(6, 8, 14, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

#modalAssistirAgora .access-btn {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    border: 1px solid rgba(147, 197, 253, .45);
}

body.lfx-unified-login {
    position: relative;
    background: radial-gradient(120% 80% at 50% -30%, rgba(59, 130, 246, 0.28), transparent 52%), linear-gradient(180deg, #05060d 0%, #090c18 100%);
}

body.lfx-unified-login .login-box {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(7, 10, 24, 0.72) 48%, rgba(6, 8, 14, 0.92));
}

.lfx-compat-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.lfx-compat-bg-track {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    padding: 12px;
    opacity: 0.42;
    transform: translateY(0);
}

.lfx-compat-bg-track.is-animated {
    animation: lfxCompatTrackMove 70s linear infinite;
}

.lfx-compat-poster {
    width: clamp(84px, 9vw, 136px);
    flex: 0 0 auto;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .38);
}

.lfx-compat-poster img {
    width: 100%;
    display: block;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

@keyframes lfxCompatTrackMove {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}