@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@500;600;700&display=swap');

:root {
    --auth-bg-start: #f7f9fc;
    --auth-bg-end: #eef3f9;
    --auth-card: rgba(255, 255, 255, 0.9);
    --auth-border: rgba(162, 176, 199, 0.24);
    --auth-shadow: 0 24px 60px rgba(16, 32, 56, 0.14);
    --auth-text: #17253d;
    --auth-muted: #5b6c84;
    --auth-accent: #2f7ef7;
    --auth-accent-strong: #1e66d1;
    --auth-accent-soft: rgba(47, 126, 247, 0.12);
    --auth-success-bg: rgba(30, 179, 125, 0.14);
    --auth-success-text: #157d57;
    --auth-danger-bg: rgba(219, 78, 78, 0.14);
    --auth-danger-text: #b53131;
}

body.auth-screen {
    font-family: 'Manrope', sans-serif !important;
    color: var(--auth-text);
    background:
        radial-gradient(circle at 14% 18%, rgba(47, 126, 247, 0.2), transparent 40%),
        radial-gradient(circle at 84% 10%, rgba(22, 165, 233, 0.14), transparent 45%),
        linear-gradient(165deg, var(--auth-bg-start) 0%, var(--auth-bg-end) 100%) !important;
    min-height: 100vh;
}

body.auth-screen::before {
    background-image:
        linear-gradient(rgba(47, 126, 247, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 126, 247, 0.06) 1px, transparent 1px) !important;
    background-size: 42px 42px !important;
}

.auth-screen .login-wrapper,
.auth-screen .signup-wrapper,
.auth-screen .page {
    animation: authFadeUp 0.5s ease both;
}

@keyframes authFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-screen .brand {
    margin-bottom: 24px !important;
}

.auth-screen .brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    margin: 0 auto 10px;
    display: block;
    background: linear-gradient(140deg, rgba(47, 126, 247, 0.18), rgba(22, 165, 233, 0.14));
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 10px 22px rgba(47, 126, 247, 0.2);
    object-fit: contain;
    padding: 8px;
}

.auth-screen .brand h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 21px !important;
    letter-spacing: 0.7px !important;
    color: #f6f9ff !important;
    text-shadow: 0 4px 16px rgba(9, 20, 39, 0.32);
}

.auth-screen .brand p {
    color: rgba(232, 239, 250, 0.9) !important;
    font-weight: 500 !important;
}

.auth-screen .card {
    border-radius: 18px !important;
    border: 1px solid var(--auth-border) !important;
    background: var(--auth-card) !important;
    backdrop-filter: blur(8px);
    box-shadow: var(--auth-shadow) !important;
    padding: 34px 30px !important;
}

.auth-screen .card-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    color: var(--auth-text) !important;
    margin-bottom: 8px !important;
}

.auth-screen .card-subtitle {
    color: var(--auth-muted) !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
}

.auth-screen label {
    color: #334864 !important;
    letter-spacing: 0.7px !important;
}

.auth-screen input[type="text"],
.auth-screen input[type="email"],
.auth-screen input[type="password"] {
    border: 1px solid rgba(136, 154, 178, 0.28) !important;
    background: rgba(248, 251, 255, 0.95) !important;
    border-radius: 12px !important;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
}

.auth-screen input[type="text"]:focus,
.auth-screen input[type="email"]:focus,
.auth-screen input[type="password"]:focus {
    border-color: rgba(47, 126, 247, 0.58) !important;
    box-shadow: 0 0 0 4px var(--auth-accent-soft) !important;
    transform: translateY(-1px);
}

.auth-screen .btn-primary,
.auth-screen .btn-login {
    background: linear-gradient(135deg, var(--auth-accent) 0%, var(--auth-accent-strong) 100%) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-family: 'Manrope', sans-serif !important;
    letter-spacing: 0.2px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
    box-shadow: 0 12px 22px rgba(30, 102, 209, 0.25);
}

.auth-screen .btn-primary:hover,
.auth-screen .btn-login:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.auth-screen .btn-primary:active,
.auth-screen .btn-login:active {
    transform: translateY(0);
}

.auth-screen .alert {
    border-radius: 11px !important;
    border: 1px solid transparent !important;
}

.auth-screen .alert-success {
    background: var(--auth-success-bg) !important;
    color: var(--auth-success-text) !important;
    border-color: rgba(21, 125, 87, 0.18) !important;
}

.auth-screen .alert-error {
    background: var(--auth-danger-bg) !important;
    color: var(--auth-danger-text) !important;
    border-color: rgba(181, 49, 49, 0.18) !important;
}

.auth-screen .info-note,
.auth-screen .email-badge,
.auth-screen .banner {
    background: rgba(48, 125, 247, 0.08) !important;
    border: 1px solid rgba(48, 125, 247, 0.18) !important;
    color: #3d5270 !important;
    border-radius: 12px !important;
}

.auth-screen .footer-note,
.auth-screen .hint,
.auth-screen .timer,
.auth-screen .back-link,
.auth-screen .aux-links,
.auth-screen .aux-links a {
    color: #5f7290 !important;
}

.auth-screen .aux-links a:hover,
.auth-screen .back-link:hover {
    color: var(--auth-accent-strong) !important;
}

.auth-screen .step-pill {
    border: 1px solid rgba(136, 154, 178, 0.2);
    background: rgba(246, 249, 255, 0.95) !important;
    color: #526780 !important;
}

.auth-screen .step-pill.active {
    background: linear-gradient(130deg, #2f7ef7 0%, #1e66d1 100%) !important;
    color: #ffffff !important;
    border-color: transparent;
}

.auth-screen .strength-bar {
    background: rgba(136, 154, 178, 0.2) !important;
    border-radius: 999px !important;
}

html[data-theme="dark"] body.auth-screen {
    --auth-bg-start: #081020;
    --auth-bg-end: #101b31;
    --auth-card: rgba(17, 28, 46, 0.9);
    --auth-border: rgba(91, 112, 146, 0.38);
    --auth-shadow: 0 26px 60px rgba(2, 7, 15, 0.6);
    --auth-text: #ecf2fb;
    --auth-muted: #b5c3d9;
    --auth-accent: #67b2ff;
    --auth-accent-strong: #3c8fe8;
    --auth-accent-soft: rgba(103, 178, 255, 0.2);
    --auth-success-bg: rgba(95, 211, 161, 0.16);
    --auth-success-text: #8de4bb;
    --auth-danger-bg: rgba(240, 127, 134, 0.16);
    --auth-danger-text: #ffbdc2;
}

html[data-theme="dark"] .auth-screen .brand h1 {
    color: #f8fbff !important;
}

html[data-theme="dark"] .auth-screen .brand p {
    color: rgba(194, 211, 237, 0.92) !important;
}

html[data-theme="dark"] .auth-screen .brand-icon {
    border-color: rgba(118, 154, 204, 0.3);
    background: linear-gradient(145deg, rgba(103, 178, 255, 0.25), rgba(95, 211, 161, 0.18));
    box-shadow: 0 12px 26px rgba(11, 38, 77, 0.45);
}

html[data-theme="dark"] .auth-screen .card {
    border-color: var(--auth-border) !important;
}

html[data-theme="dark"] .auth-screen label {
    color: #c0cee1 !important;
}

html[data-theme="dark"] .auth-screen input[type="text"],
html[data-theme="dark"] .auth-screen input[type="email"],
html[data-theme="dark"] .auth-screen input[type="password"] {
    color: var(--auth-text) !important;
    border-color: rgba(91, 112, 146, 0.45) !important;
    background: rgba(10, 18, 32, 0.75) !important;
}

html[data-theme="dark"] .auth-screen .info-note,
html[data-theme="dark"] .auth-screen .email-badge,
html[data-theme="dark"] .auth-screen .banner {
    color: #bdd2ef !important;
    background: rgba(103, 178, 255, 0.14) !important;
    border-color: rgba(103, 178, 255, 0.25) !important;
}

html[data-theme="dark"] .auth-screen .footer-note,
html[data-theme="dark"] .auth-screen .hint,
html[data-theme="dark"] .auth-screen .timer,
html[data-theme="dark"] .auth-screen .back-link,
html[data-theme="dark"] .auth-screen .aux-links,
html[data-theme="dark"] .auth-screen .aux-links a {
    color: #a8bad6 !important;
}

html[data-theme="dark"] .auth-screen .step-pill {
    background: rgba(16, 27, 49, 0.76) !important;
    border-color: rgba(83, 103, 136, 0.42);
    color: #b5c3d9 !important;
}

html[data-theme="dark"] .auth-screen .strength-bar {
    background: rgba(83, 103, 136, 0.38) !important;
}

@media (max-width: 600px) {
    .auth-screen .card {
        padding: 26px 20px !important;
        border-radius: 16px !important;
    }

    .auth-screen .card-title {
        font-size: 21px !important;
    }
}