/* Login premium + responsivo por dispositivo */
.roku-login-page {
    min-height: 100vh;
    background: radial-gradient(circle at 20% 20%, rgba(255,46,109,.24), transparent 32%),
                radial-gradient(circle at 80% 20%, rgba(104,108,255,.24), transparent 32%),
                linear-gradient(135deg, #070817 0%, #101026 45%, #16081e 100%) !important;
    overflow-x: hidden;
}
.roku-login-page:before { display:none !important; }
.roku-login-page #nsofts_header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: fixed;
    top: 14px;
    right: 18px;
    width: auto;
    min-height: 42px;
    z-index: 20;
}
.roku-login-page main { padding: 38px 14px !important; }
.roku-login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .82fr);
    min-height: 660px;
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 34px 95px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter: blur(18px);
}
.roku-login-sidecopy {
    position: relative;
    padding: 72px 56px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.roku-login-sidecopy:before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,46,109,.50), transparent 62%);
    left: -180px;
    bottom: -210px;
    filter: blur(2px);
}
.roku-login-sidecopy:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255,46,109,.22), rgba(104,108,255,.07));
    pointer-events: none;
}
.roku-login-sidecopy > * { position: relative; z-index: 1; }
.roku-login-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.20);
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: 24px;
}
.roku-login-sidecopy h1 {
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.02;
    color: #fff !important;
    font-weight: 900;
    max-width: 680px;
    margin-bottom: 18px;
}
.roku-login-sidecopy p {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,.80);
    max-width: 620px;
}
.roku-login-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.roku-login-features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    font-weight: 800;
}
.roku-login-card-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px;
    background: rgba(4,5,18,.42);
}
.roku-login-page .nsofts-auth { width: 100%; max-width: 440px; }
.roku-login-page .nsofts-auth__pattern-1,
.roku-login-page .nsofts-auth__pattern-2 { display: none !important; }
.roku-login-page .card {
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.065)) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter: blur(20px);
    color: #fff;
}
.roku-login-page .card-body { padding: 34px !important; }
.roku-login-brand-wrap { text-align: center; margin-bottom: 22px; }
.roku-login-logo {
    display: block;
    max-width: 84px;
    max-height: 84px;
    object-fit: contain;
    margin: 0 auto 12px;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
.roku-login-brand {
    color: #fff !important;
    font-weight: 900;
    font-size: 24px;
    text-decoration: none;
    letter-spacing: .3px;
}
.roku-login-page h5 { color: #fff !important; font-size: 24px; font-weight: 900; }
.roku-login-page p { color: rgba(255,255,255,.68); }
.roku-login-page .form-label,
.roku-login-page .form-check-label { color: rgba(255,255,255,.86); }
.roku-login-page .form-control {
    height: 54px;
    border-radius: 16px;
    color: #fff;
    background: rgba(4,5,18,.58);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.roku-login-page .form-control:focus {
    color: #fff;
    background: rgba(4,5,18,.72);
    border-color: #ff2e6d;
    box-shadow: 0 0 0 4px rgba(255,46,109,.18);
}
.roku-login-page .form-control::placeholder { color: rgba(255,255,255,.42); }
.roku-login-page .nsofts-input-icon__left,
.roku-login-page .nsofts-input-icon__right { color: rgba(255,255,255,.72); }
.roku-login-page .btn-primary {
    height: 56px;
    border-radius: 16px;
    border: 0;
    background: linear-gradient(180deg, #ff4b86, #db1459) !important;
    box-shadow: 0 16px 30px rgba(255,46,109,.30), inset 0 1px 0 rgba(255,255,255,.28);
    font-weight: 900;
    letter-spacing: .2px;
}
.roku-login-page .btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}
.roku-login-page .form-check-input:checked { background-color: #ff2e6d; border-color: #ff2e6d; }
.device-mobile .roku-login-page main { padding: 14px !important; align-items: flex-start !important; }
@media (max-width: 991.98px) {
    .roku-login-shell { grid-template-columns: 1fr; min-height: auto; border-radius: 24px; }
    .roku-login-sidecopy { padding: 34px 28px 12px; text-align: center; align-items: center; }
    .roku-login-sidecopy h1 { font-size: 32px; }
    .roku-login-sidecopy p { font-size: 15px; }
    .roku-login-card-wrap { padding: 24px; background: transparent; }
}
@media (max-width: 575.98px) {
    .roku-login-sidecopy { display: none; }
    .roku-login-card-wrap { padding: 12px; }
    .roku-login-page .card-body { padding: 24px !important; }
    .roku-login-page .nsofts-auth { max-width: 100%; }
    .roku-login-shell { border-radius: 20px; }
}