/* ==========================================================================
   THPLAY CINEMATIC — autenticação / recuperação / teste
   Carregado depois dos estilos próprios de cada página para alinhar a
   paleta, tipografia e superfícies ao restante da plataforma.
   ========================================================================== */

:root {
    --primary: #7c5cff;
    --primary-light: #a78bfa;
    --primary-lighter: #d7ccff;
    --primary-dark: #6244e8;
    --primary-deeper: #5236c9;
    --accent: #4f8cff;
    --accent-light: #7ab0ff;
    --surface: rgba(16, 18, 27, 0.82);
    --surface-border: rgba(255, 255, 255, 0.09);
    --surface-border-focus: rgba(124, 92, 255, 0.5);
    --text: #f6f7fb;
    --text-secondary: #9aa3b5;
    --text-muted: #687086;
    --bg: #07080d;
    --bg-card: #0d0f17;
    --error: #ff4d5e;
    --error-bg: rgba(255, 77, 94, 0.1);
    --success: #33d69f;
    --shadow: 0 38px 90px -30px rgba(0, 0, 0, 0.92);
    --radius: 26px;
    --radius-sm: 13px;
    --radius-xs: 10px;
}

body {
    background-color: #07080d !important;
    background-image:
        radial-gradient(ellipse 62% 52% at 50% -12%, rgba(124, 92, 255, 0.22) 0%, transparent 62%),
        radial-gradient(ellipse 42% 38% at 96% 92%, rgba(79, 140, 255, 0.14) 0%, transparent 64%),
        radial-gradient(ellipse 38% 34% at 4% 88%, rgba(167, 139, 250, 0.09) 0%, transparent 64%) !important;
    background-attachment: fixed !important;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.orb { filter: blur(110px); opacity: 0.1; }
.orb-1 { background: #7c5cff !important; }
.orb-2 { background: #4f8cff !important; }
.orb-3 { background: #a78bfa !important; }

.login-header h1,
.login-card h1,
.login-card h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    letter-spacing: -0.9px !important;
}

.login-card {
    background: linear-gradient(180deg, rgba(18, 20, 30, 0.9) 0%, rgba(10, 12, 19, 0.94) 100%) !important;
    border-color: rgba(255, 255, 255, 0.095) !important;
    box-shadow:
        0 38px 90px -30px rgba(0, 0, 0, 0.95),
        0 0 0 1px rgba(124, 92, 255, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.login-card::before {
    background: linear-gradient(90deg,
        transparent 0%,
        #7c5cff 22%,
        #4f8cff 50%,
        #a78bfa 78%,
        transparent 100%) !important;
}

.login-card::after {
    background: radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.1) 0%, transparent 54%) !important;
}

.logo-icon {
    width: clamp(76px, 12vw, 92px) !important;
    height: clamp(76px, 12vw, 92px) !important;
    border-radius: 21px !important;
}

.logo-icon::before {
    background: linear-gradient(135deg, #7c5cff, #4f8cff, #a78bfa, #7c5cff) !important;
    background-size: 300% 300% !important;
    opacity: 0.62 !important;
}

.logo-icon::after { background: #0b0d15 !important; }

.input-container input {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.085) !important;
    border-radius: var(--radius-sm) !important;
    color: #f6f7fb !important;
    font-family: 'Inter', sans-serif !important;
}

.input-container input::placeholder { color: rgba(154, 163, 181, 0.42) !important; }

.input-container input:hover {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.input-container input:focus {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(124, 92, 255, 0.6) !important;
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.13), 0 0 22px rgba(124, 92, 255, 0.08) !important;
}

.input-container:focus-within .icon-left { color: #b9a8ff !important; }

.btn-login,
.btn-primary {
    background: linear-gradient(135deg, #7c5cff 0%, #4f8cff 100%) !important;
    border-radius: 13px !important;
    box-shadow: 0 14px 34px -14px rgba(124, 92, 255, 0.75) !important;
    font-weight: 700 !important;
}

.btn-login:hover,
.btn-primary:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 18px 42px -16px rgba(124, 92, 255, 0.85) !important;
}

.btn-login::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent) !important; }

.error-alert,
.alert {
    border-color: rgba(255, 77, 94, 0.28) !important;
    background: rgba(255, 77, 94, 0.09) !important;
    color: #ff9aa3 !important;
}

.alert-success { border-color: rgba(51, 214, 159, 0.28) !important; background: rgba(51, 214, 159, 0.09) !important; color: #7ee7c1 !important; }
.alert-info { border-color: rgba(79, 140, 255, 0.28) !important; background: rgba(79, 140, 255, 0.09) !important; color: #a9c9ff !important; }

.login-footer a,
.forgot-link,
.btn-login-link {
    color: #c4b5fd !important;
}

.login-footer a:hover,
.forgot-link:hover,
.btn-login-link:hover {
    color: #fff !important;
}

.remember-me input:checked + .checkmark,
.checkmark {
    border-color: rgba(124, 92, 255, 0.5) !important;
}

.remember-me input:checked + .checkmark { background: #7c5cff !important; }

.timer,
.step.active,
.code-input:focus,
.pass-hint.valid {
    border-color: rgba(124, 92, 255, 0.55) !important;
}

.code-input:focus { box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12) !important; }

@media (max-width: 480px) {
    .login-card { border-radius: 22px !important; }
}