.auth-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.auth-form.hidden { display: none; }
.auth-form label { font-size: 14px; font-weight: 600; margin-top: 4px; }
.auth-form input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; font: inherit; color: #0f172a; background: #fff; }
.auth-form input:focus-visible, .auth-form button:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }
.auth-password { display: flex; align-items: center; gap: 8px; }
.auth-password input { flex: 1; width: 0; }
.auth-password button, .auth-link { border: 0; background: transparent; color: var(--color-primary, #2563eb); font: inherit; font-size: 13px; font-weight: 600; min-height: 44px; cursor: pointer; }
.auth-form .primary-btn { width: 100%; margin-top: 4px; min-height: 44px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: #64748b; font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: #e2e8f0; }
.auth-form button:disabled { cursor: wait; opacity: .6; }
.login-status { overflow-wrap: anywhere; }
@media (max-width: 480px) { #loginScreen .login-card, #recoveryScreen .login-card { padding: 24px 20px; } }