.auth-page { min-height: 100vh; background: var(--surface-soft); }
.auth-main { min-height: calc(100vh - 74px); display: grid; place-items: center; padding: 32px 16px 60px; }
.auth-card {
    width: min(100%, 480px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 34px;
    box-shadow: var(--shadow);
}
.auth-heading { text-align: center; margin-bottom: 26px; }
.auth-icon {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px;
    display: grid; place-items: center; background: #e7f1ff; color: var(--primary);
    font-size: 28px; font-weight: 500;
}
.auth-kicker { margin: 0 0 6px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; }
.auth-heading h1 { margin: 0 0 8px; font-size: 32px; letter-spacing: -1px; }
.auth-heading p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.auth-form { display: grid; gap: 17px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 700; }
.field input {
    width: 100%; height: 48px; border: 1px solid var(--border); border-radius: 11px;
    background: var(--surface); color: var(--text); padding: 0 14px; font: inherit; outline: none;
}
.field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8,120,249,.12); }
.field input::placeholder { color: #8a98aa; }
.password-field { position: relative; }
.password-field input { padding-right: 65px; }
.password-toggle {
    position: absolute; right: 7px; top: 7px; height: 34px; padding: 0 9px;
    border: 0; border-radius: 8px; background: var(--surface-soft); color: var(--primary);
    font-weight: 700; cursor: pointer;
}
.field-hint { color: var(--muted); font-size: 11px; }
.field-error { min-height: 0; color: #d52c4c; font-size: 11px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--muted); }
.check-row input { margin-top: 2px; accent-color: var(--primary); }
.check-row a, .auth-footer a { color: var(--primary); text-decoration: underline; }
.auth-submit { width: 100%; margin-top: 2px; }
.auth-footer { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.form-status { min-height: 0; font-size: 12px; color: var(--muted); text-align: center; }
.form-status.success { color: #12814d; padding: 10px 12px; border-radius: 10px; background: #e8f8f0; }
body.dark .auth-icon { background: #142b49; }
body.dark .form-status.success { background: #102e23; color: #72ddb0; }

@media (max-width: 640px) {
    .auth-main { padding: 20px 12px 40px; }
    .auth-card { border-radius: 20px; padding: 26px 20px; }
    .auth-heading h1 { font-size: 28px; }
    .auth-main .btn-outline { display: none; }
}

.label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.label-row a { color:var(--primary); font-size:11px; text-decoration:underline; font-weight:600; }
.auth-divider { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11px; margin-top:2px; }
.auth-divider::before, .auth-divider::after { content:""; height:1px; background:var(--border); flex:1; }
.auth-divider span { padding:0 3px; }