:root {
    --login-azul-noite: #07172f;
    --login-azul-profundo: #0b2f57;
    --login-azul: #1769aa;
    --login-ciano: #4bc5d6;
    --login-gelo: #f4f8fc;
    --login-texto: #20354d;
}

body.login-page {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 14% 20%, rgba(75, 197, 214, 0.26), transparent 27rem),
        radial-gradient(circle at 86% 82%, rgba(23, 105, 170, 0.34), transparent 32rem),
        linear-gradient(135deg, var(--login-azul-noite) 0%, var(--login-azul-profundo) 58%, #0b2442 100%);
    color: var(--login-texto);
}

body.login-page::before,
body.login-page::after {
    position: fixed;
    z-index: 0;
    content: "";
    pointer-events: none;
}

body.login-page::before {
    inset: -20%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    transform: rotate(-8deg);
    -webkit-mask-image: radial-gradient(circle at center, #000 15%, transparent 70%);
    mask-image: radial-gradient(circle at center, #000 15%, transparent 70%);
}

body.login-page::after {
    top: -28vw;
    right: -22vw;
    width: 68vw;
    min-width: 650px;
    height: 68vw;
    min-height: 650px;
    border: 1px solid rgba(123, 221, 231, 0.18);
    border-radius: 50%;
    box-shadow:
        0 0 0 7vw rgba(75, 197, 214, 0.035),
        0 0 0 14vw rgba(75, 197, 214, 0.025);
}

.login-page section {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

.login-page .login-card {
    min-height: 100vh;
    height: auto;
    padding: 32px 16px;
    background: transparent;
}

.login-page .login-form {
    position: relative;
    width: min(100%, 430px);
    padding: 42px 40px 34px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px !important;
    box-shadow:
        0 28px 70px rgba(1, 12, 29, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(16px);
}

.login-page .login-form::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 112px;
    height: 5px;
    content: "";
    background: linear-gradient(90deg, var(--login-azul), var(--login-ciano));
    border-radius: 0 0 8px 8px;
    transform: translateX(-50%);
}

.login-page .login-form h1.text-primary {
    margin-bottom: 6px;
    color: var(--login-azul-profundo) !important;
    font-family: "Rubik", sans-serif;
    letter-spacing: 0.12em;
}

.login-page .login-form h6 {
    margin-bottom: 22px;
    color: #66798e;
    font-size: 13px;
    letter-spacing: 0.035em;
}

.login-page .login-form hr {
    margin-bottom: 28px;
    border-color: #dce7f1 !important;
    opacity: 1;
}

.login-page .login-form .form-group label {
    margin-bottom: 8px;
    color: #40566e;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.login-page .login-form .input-group {
    overflow: hidden;
    border: 1px solid #d9e4ee;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-page .login-form .input-group:focus-within {
    border-color: var(--login-azul);
    box-shadow: 0 0 0 4px rgba(23, 105, 170, 0.12);
}

.login-page .login-form .form-group .input-group-text {
    width: 48px;
    justify-content: center;
    background: var(--login-gelo);
    border: 0;
    color: var(--login-azul);
}

.login-page .login-form .form-control {
    min-height: 48px;
    padding-right: 16px;
    background: #fff;
    border: 0;
    color: var(--login-texto);
}

.login-page .login-form .form-control:focus {
    background: #fff;
}

.login-page .login-form .btn {
    width: 100%;
    min-height: 48px;
    margin-top: 6px;
    background: linear-gradient(100deg, var(--login-azul-profundo), var(--login-azul));
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(11, 47, 87, 0.24);
    font-size: 13px;
    letter-spacing: 0.06em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-page .login-form .btn:hover {
    box-shadow: 0 14px 28px rgba(11, 47, 87, 0.3);
    transform: translateY(-1px);
}

.login-page .login-form .btn:focus-visible {
    outline: 3px solid rgba(75, 197, 214, 0.75);
    outline-offset: 3px;
}

.login-page .login-form small.text-muted {
    color: #8191a2 !important;
    font-size: 11px;
}

@media (max-width: 575px) {
    .login-page .login-card {
        padding: 20px 14px;
    }

    .login-page .login-form {
        padding: 36px 24px 28px;
        border-radius: 22px !important;
    }

    body.login-page::after {
        top: -340px;
        right: -430px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-page .login-form .input-group,
    .login-page .login-form .btn {
        transition: none;
    }
}