.auth-wrapper {
    background:
        linear-gradient(180deg, rgba(22, 155, 112, .12) 0%, rgba(245, 246, 248, .94) 42%, rgba(245, 246, 248, 1) 100%) !important;
    padding: 34px 16px;
}

.auth-card {
    max-width: 460px;
    border-radius: 16px;
    padding: 34px 28px;
    background: #fff;
    border: 1px solid #e6edf2;
    box-shadow: 0 18px 45px rgba(25, 28, 35, .10);
    color: #111827;
}

.brand-header {
    margin-bottom: 16px;
}

.brand-logo {
    margin-bottom: 10px;
}

.brand-icon {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(22, 155, 112, .18);
    object-fit: cover;
}

.auth-subtitle {
    color: #111827;
    font-size: 20px !important;
    line-height: 1.5;
    font-weight: 900;
    text-align: center;
    margin-bottom: 24px !important;
}

.auth-subtitle .text-link {
    color: #169b70;
    font-weight: 900;
    margin: 0 3px;
}

.form-floating {
    margin-bottom: 18px !important;
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
    height: 58px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #dfe7ee;
    color: #111827;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 9px 20px rgba(25, 28, 35, .05);
}

.form-floating > label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #111827;
    font-size: 15px;
    font-weight: 900;
}

.form-control:focus {
    background: #fff;
    color: #111827;
    border-color: #169b70;
    box-shadow: 0 0 0 4px rgba(22, 155, 112, .13);
}

.image-code {
    width: 100%;
    height: 58px;
    margin-left: 0;
    opacity: 1;
    border-radius: 14px;
    border: 1px solid #dfe7ee;
    box-shadow: 0 9px 20px rgba(25, 28, 35, .05);
    object-fit: cover;
}

.form-check {
    color: #111827;
    gap: 8px;
}

.form-check input[type="checkbox"] {
    width: 19px;
    height: 19px;
    border-color: rgba(22, 155, 112, .42);
    border-radius: 6px;
}

.form-check input[type="checkbox"]:checked {
    background: #169b70;
    border-color: #169b70;
    box-shadow: 0 4px 12px rgba(22, 155, 112, .2);
}

.form-check label {
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

.text-link.small,
.text-center.small {
    font-size: 15px !important;
    font-weight: 800;
}

.text-link {
    color: #169b70;
    font-weight: 900;
}

.btn-gradient {
    min-height: 54px;
    border-radius: 14px;
    background: #169b70;
    background-image: none;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(22, 155, 112, .22);
}

.btn-gradient:hover {
    background: #12845f;
    box-shadow: 0 14px 30px rgba(22, 155, 112, .26);
}

.auth-card .btn-outline-primary,
.send-email-code,
.send-phone-captcha {
    min-height: 58px;
    border-radius: 14px;
    border: 1px solid #bfe9d5;
    background: #eefbf5;
    color: #126d4f;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 9px 20px rgba(22, 155, 112, .08);
}

.auth-card .btn-outline-primary:hover,
.send-email-code:hover,
.send-phone-captcha:hover {
    background: #dff7ec;
    color: #126d4f;
    border-color: #9edfc3;
}

.auth-card .row {
    --bs-gutter-x: 10px;
}

.auth-card .text-center.small {
    color: #111827;
    line-height: 1.6;
}

.divider {
    color: #6b7280;
    font-size: 14px;
    font-weight: 900;
}

@media (max-width: 576px) {
    .auth-card {
        padding: 28px 18px;
        border-radius: 14px;
    }

    .auth-subtitle {
        font-size: 18px !important;
    }

    .form-floating > .form-control,
    .image-code,
    .auth-card .btn-outline-primary,
    .send-email-code,
    .send-phone-captcha {
        height: 54px;
        min-height: 54px;
    }
}