.auth-wrap { max-width: 960px; margin: 32px auto; padding: 0 16px; }
.auth-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; align-items: stretch; }
.auth-card { padding: 28px; }
.auth-head { margin-bottom: 16px; }
.auth-title { margin: 0 0 6px; font-size: 28px; }
.auth-sub { margin: 0; color: var(--muted-600); }
.auth-form { display: grid; gap: 14px; }
.auth-field { display: grid; gap: 6px; }
.auth-label { font-weight: 600; font-size: 14px; }
/* Input styles are now in inputs.css - using .input class from Inputs.js */
.auth-input { /* Legacy class - inputs now use .input from inputs.css */ }
.auth-hint { font-size: 12px; color: var(--muted-600); margin-top: -2px; }
.field-error { font-size: 12px; color: var(--danger-500, #e2555a); }
.auth-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-direction: column}
.auth-alt { margin-top: 8px; font-size: 14px; color: var(--muted-600); }
.auth-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 12px 0; color: var(--muted-600); }
.auth-or::before, .auth-or::after { content: ""; height: 1px; background: var(--border-200); display: block; }
.oauth-grid { display: grid; gap: 8px; }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-200); border-radius: 10px; background: var(--bg-200); text-decoration: none; color: var(--fg-900); transition: background .15s ease, box-shadow .15s ease; cursor: pointer; font-weight: 600; }
.oauth-btn:hover { background: var(--bg-300); }
.oauth-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--primary-100); }
.oauth-icon { width: 20px; height: 20px; display: inline-block; }
.auth-help { font-size: 13px; color: var(--muted-600); margin-top: 12px; }

.auth-illustration { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }

.auth-inline-note { text-align: center; margin-top: 8px; font-size: 14px; color: var(--muted-600); }
.auth-inline-note a { color: var(--primary-400); text-decoration: none; font-weight: 600; }
.auth-inline-note a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .auth-grid { grid-template-columns: 1fr; }
}