/* Auth pages: login, password-reset, set-password */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-3);
    padding: var(--sp-4);
}

.auth-card {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--r-4);
    padding: var(--sp-7) var(--sp-7);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-2);
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-6);
}

.auth-logo img {
    height: 34px;
    width: auto;
}

.auth-title {
    font-family: var(--font-display);
    font-size: var(--fs-24);
    font-weight: var(--fw-bold);
    color: var(--fg-1);
    margin: 0 0 var(--sp-2);
    text-align: center;
    letter-spacing: var(--tr-display);
}

.auth-subtitle {
    font-size: var(--fs-14);
    color: var(--fg-3);
    text-align: center;
    margin: 0 0 var(--sp-6);
    line-height: var(--lh-normal);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.form-group label {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    color: var(--fg-2);
}

.form-group input {
    width: 100%;
    height: 40px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border-1);
    border-radius: var(--r-2);
    font-family: var(--font-text);
    font-size: var(--fs-14);
    color: var(--fg-1);
    background: var(--bg-1);
    box-sizing: border-box;
    transition: border-color var(--dur-fast) var(--ease-standard);
}

.form-group input::placeholder {
    color: var(--fg-mute);
}

.form-group input:focus {
    outline: none;
    border-color: var(--va-red);
    box-shadow: var(--shadow-focus);
}

.auth-btn {
    height: 40px;
    background: var(--va-red);
    color: var(--va-white);
    border: none;
    border-radius: var(--r-2);
    font-family: var(--font-text);
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease-standard);
    margin-top: var(--sp-2);
}

.auth-btn:hover   { opacity: .9; }
.auth-btn:active  { opacity: .8; }
.auth-btn:disabled { opacity: .5; cursor: not-allowed; }

.auth-link {
    font-size: var(--fs-13);
    color: var(--fg-3);
    text-align: center;
    margin-top: var(--sp-4);
    display: block;
}

.auth-link a {
    color: var(--va-red);
    text-decoration: none;
}

.auth-link a:hover { text-decoration: underline; }

.auth-message {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-2);
    font-size: var(--fs-13);
    line-height: var(--lh-normal);
    margin-bottom: var(--sp-3);
}

.auth-message--error {
    background: var(--va-red-050);
    border: 1px solid var(--va-red-100);
    color: var(--va-red-700);
}

.auth-message--success {
    background: var(--va-green-100);
    border: 1px solid #b2d8c5;
    color: var(--va-green-600);
}

.password-strength {
    height: 3px;
    border-radius: 2px;
    background: var(--border-1);
    overflow: hidden;
    margin-top: var(--sp-1);
}

.password-strength-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 200ms, background 200ms;
    width: 0%;
}

@media (max-width: 480px) {
    .auth-card {
        padding: var(--sp-6) var(--sp-5);
    }
}