.erp-auth-card {
    max-width: 29rem;
}

.erp-auth-copy {
    margin: -1rem 0 1.5rem;
    color: rgb(71 85 105);
    font-size: 0.9rem;
    line-height: 1.55;
}

.dark .erp-auth-copy {
    color: rgb(203 213 225);
}

.erp-auth-alert {
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
}

.erp-auth-alert--success {
    border-color: rgb(16 185 129 / 0.24);
    background: rgb(16 185 129 / 0.12);
    color: rgb(4 120 87);
}

.dark .erp-auth-alert--success {
    border-color: rgb(52 211 153 / 0.22);
    background: rgb(16 185 129 / 0.12);
    color: rgb(167 243 208);
}

.erp-auth-alert--danger {
    border-color: rgb(244 63 94 / 0.24);
    background: rgb(244 63 94 / 0.1);
    color: rgb(190 18 60);
}

.dark .erp-auth-alert--danger {
    border-color: rgb(251 113 133 / 0.24);
    background: rgb(244 63 94 / 0.12);
    color: rgb(253 164 175);
}

.erp-auth-form {
    gap: 1rem;
}

.erp-auth-field {
    display: grid;
    gap: 0.5rem;
}

.erp-auth-field label {
    color: rgb(30 41 59);
    font-size: 0.875rem;
    font-weight: 800;
}

.dark .erp-auth-field label {
    color: rgb(226 232 240);
}

.erp-auth-field input {
    width: 100%;
    min-height: 2.875rem;
    border: 1px solid rgb(148 163 184 / 0.38);
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.92);
    padding: 0.625rem 0.875rem;
    color: rgb(15 23 42);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.erp-auth-field input:focus {
    border-color: rgb(56 189 248 / 0.72);
    box-shadow: 0 0 0 3px rgb(56 189 248 / 0.16);
}

.dark .erp-auth-field input {
    border-color: rgb(148 163 184 / 0.22);
    background: rgb(15 23 42 / 0.72);
    color: rgb(248 250 252);
}

.dark .erp-auth-field input:focus {
    border-color: rgb(125 211 252 / 0.76);
    box-shadow: 0 0 0 3px rgb(56 189 248 / 0.18);
}

.erp-auth-field p {
    color: rgb(225 29 72);
    font-size: 0.8125rem;
    font-weight: 700;
}

.dark .erp-auth-field p {
    color: rgb(251 113 133);
}

.erp-auth-button {
    display: inline-flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgb(30 58 95), rgb(37 99 235));
    color: white;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 1rem 2rem rgb(15 23 42 / 0.18);
    transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.erp-auth-button:hover,
.erp-auth-button:focus-visible {
    filter: brightness(1.06);
}

.erp-auth-button:active {
    transform: translateY(1px);
}

.erp-auth-button[disabled] {
    cursor: wait;
    opacity: 0.72;
}

.erp-auth-button__loading {
    display: none;
}

.erp-auth-button.is-loading .erp-auth-button__label {
    display: none;
}

.erp-auth-button.is-loading .erp-auth-button__loading {
    display: inline;
}

.erp-auth-link {
    display: inline-flex;
    margin-top: 1.25rem;
    color: rgb(30 58 95);
    font-size: 0.875rem;
    font-weight: 800;
}

.erp-auth-link:hover,
.erp-auth-link:focus-visible {
    color: rgb(37 99 235);
}

.dark .erp-auth-link {
    color: rgb(125 211 252);
}

.dark .erp-auth-link:hover,
.dark .erp-auth-link:focus-visible {
    color: rgb(186 230 253);
}

@media (max-width: 480px) {
    .erp-auth-copy {
        margin-top: -0.75rem;
    }

    .erp-auth-card {
        width: min(100%, 26rem);
    }
}