.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(2, 8, 20, .86), rgba(5, 18, 31, .54), rgba(1, 10, 20, .90)),
        radial-gradient(circle at 14% 16%, rgba(115, 142, 196, .38), transparent 30%),
        radial-gradient(circle at 80% 12%, rgba(30, 215, 160, .44), transparent 28%),
        linear-gradient(125deg, #07111f 0%, #14213d 44%, #062b31 100%);
}

.auth-page::before {
    content: "";
    position: absolute;
    inset: -18%;
    background:
        linear-gradient(105deg, transparent 18%, rgba(133, 244, 187, .54) 34%, transparent 48%),
        linear-gradient(72deg, transparent 50%, rgba(48, 214, 159, .42) 65%, transparent 82%),
        linear-gradient(132deg, transparent 36%, rgba(124, 96, 180, .24) 51%, transparent 70%);
    filter: blur(18px);
    opacity: .9;
    transform: rotate(-5deg);
}

.auth-page::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(178,255,231,.55) 0 1px, transparent 1.3px);
    background-position: 0 0, 42px 38px;
    background-size: 96px 96px, 132px 132px;
    opacity: .32;
}

.auth-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
}

.auth-card {
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 24px;
    background: rgba(4, 13, 25, .74);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .44);
    color: #eef9fb;
    backdrop-filter: blur(22px);
}

.auth-card .card-body {
    padding: 34px;
}

.auth-logo {
    width: 82px;
    max-width: 45%;
    filter: drop-shadow(0 12px 22px rgba(79, 209, 208, .25));
}

.auth-card h2 {
    color: #fff;
    font-weight: 850;
}

.auth-card .text-muted,
.auth-card .form-label,
.auth-card .small {
    color: rgba(232, 246, 248, .76) !important;
}

.auth-card .form-control {
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

.auth-card .form-control:focus {
    border-color: rgba(126, 244, 243, .82);
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 0 0 .22rem rgba(79, 209, 208, .16);
    color: #fff;
}

.auth-card .form-control::placeholder {
    color: rgba(232, 246, 248, .48);
}

.auth-password-wrap {
    position: relative;
}

.auth-password-wrap .form-control {
    padding-right: 48px;
}

.auth-password-toggle {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 5px;
    top: 4px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgba(232, 246, 248, .74);
}

.auth-password-toggle:hover,
.auth-password-toggle:focus {
    background: rgba(79, 209, 208, .16);
    color: #fff;
}

.auth-alert {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 16px;
    animation: authAlertIn .28s ease both;
}

.auth-alert.error {
    border-color: rgba(248, 113, 113, .34);
    background: rgba(127, 29, 29, .34);
    color: #fee2e2;
    animation: authAlertIn .28s ease both, authShake .34s ease .03s both;
}

.auth-alert.success {
    border-color: rgba(52, 211, 153, .35);
    background: rgba(6, 78, 59, .34);
    color: #d1fae5;
}

.auth-primary-btn {
    min-height: 48px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, #2f7184, #43c7c9);
    box-shadow: 0 16px 34px rgba(32, 176, 173, .24);
    font-weight: 800;
}

.auth-secondary-btn {
    min-height: 46px;
    border-radius: 15px;
}

.auth-link {
    color: #8df4ee;
    text-decoration: none;
}

.auth-link:hover {
    color: #fff;
}

@keyframes authAlertIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    24% { transform: translateX(-6px); }
    48% { transform: translateX(5px); }
    72% { transform: translateX(-3px); }
}

@media (max-width: 575.98px) {
    .auth-card .card-body {
        padding: 26px 20px;
    }
}