.auth-page {
    min-height: calc(100vh - var(--header-height));
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4) var(--space-3);
    background: var(--color-bg-alt);
}
.auth-card {
    width: 100%; max-width: 380px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.auth-card__logo {display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom: var(--space-4); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary); }
.auth-card__title { font-size: var(--font-size-lg); margin-bottom: var(--space-1); text-align: center; }
.auth-card__subtitle { color: var(--color-text-secondary); font-size: var(--font-size-sm); text-align: center; margin-bottom: var(--space-3); }
.auth-card__footer { text-align: center; font-size: var(--font-size-sm); margin-top: var(--space-3); color: var(--color-text-secondary); }
.auth-card__footer a, .btn-link { color: var(--color-primary); font-weight: 600; background: none; border: none; cursor: pointer; }

.form-label { display: block; font-size: var(--font-size-sm); margin-bottom: var(--space-1); }
.form-input {
    width: 100%; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font-size: var(--font-size-base); font-family: inherit; margin-bottom: var(--space-3);
}
.form-input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.form-error { color: var(--color-error); font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
.btn--full { width: 100%; }

.otp-input-row { display: flex; gap: var(--space-1); justify-content: space-between; margin-bottom: var(--space-3); }
.otp-box {
    width: 44px; height: 52px; text-align: center; font-size: var(--font-size-lg);
    border: 1px solid var(--color-border); border-radius: var(--radius); font-family: inherit;
}
.otp-box:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

@media (min-width: 1024px) {
    .auth-card { padding: var(--space-5); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
}