/* Scoped authentication controls shared by the modal and standalone pages. */
.auth-flow [hidden], .auth-page [hidden] { display: none !important; }
.auth-page { min-height: calc(100vh - 200px); display: grid; place-items: center; padding: 56px 20px; background: var(--gray-50, #f8fafc); }
.auth-page-card { width: 100%; max-width: 440px; padding: 32px; box-sizing: border-box; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 20px; background: var(--theme-bg-primary, white); box-shadow: 0 12px 36px #00000012; }
.auth-page-card h1 { font-size: 24px; margin: 0 0 12px; text-align: center; }
.auth-page-intro { color: var(--text-secondary, #64748b); font-size: 14px; line-height: 1.6; margin: 0 0 24px; text-align: center; }
.auth-flow { display: flex; flex-direction: column; gap: 16px; }
.auth-flow .ds-form-group { margin: 0; }
.auth-flow label { display: block; color: var(--text-primary, #334155); font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.auth-flow input:not([type=checkbox]):not([type=hidden]) { width: 100%; box-sizing: border-box; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--gray-300, #cbd5e1); border-radius: 10px; background: var(--theme-bg-secondary, white); color: var(--text-primary, #0f172a); font-size: 16px; }
.auth-flow input:focus-visible, .auth-flow button:focus-visible, .auth-flow a:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.auth-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--gray-100, #f1f5f9); padding: 4px; border-radius: 10px; }
.auth-flow .auth-mode-switch button { border: 0; border-radius: 7px; padding: 10px 6px; background: transparent; color: var(--text-secondary, #64748b); cursor: pointer; font: inherit; font-size: 14px; }
.auth-flow .auth-mode-switch button[aria-pressed=true] { background: var(--theme-bg-primary, white); color: #2563eb; box-shadow: 0 1px 4px #00000014; }
.auth-flow .auth-primary, .auth-page .auth-primary { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 10px; background: #2563eb; color: white; font-size: 15px; font-weight: 600; cursor: pointer; box-sizing: border-box; text-decoration: none; }
.auth-flow button:disabled, .auth-flow [disabled], .auth-page button:disabled { opacity: .55; cursor: not-allowed; }
.auth-flow .auth-primary:hover:not(:disabled) { background: #1d4ed8; }
.auth-code-row { display: flex; gap: 8px; align-items: center; }
.auth-code-row button { flex-shrink: 0; min-height: 44px; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: var(--theme-bg-primary, white); color: #2563eb; cursor: pointer; font: inherit; font-size: 13px; }
.auth-note { color: var(--text-secondary, #64748b); font-size: 13px; line-height: 1.6; margin: 6px 0 0; overflow-wrap: anywhere; }
.auth-message { padding: 10px 12px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.auth-message[data-kind=success] { background: #ecfdf5; color: #047857; }
.auth-captcha { display: flex; justify-content: center; min-height: 78px; }
.auth-links { text-align: center; color: var(--text-secondary, #64748b); font-size: 14px; margin-top: 20px; line-height: 1.8; }
.auth-flow a, .auth-links a { color: #2563eb; text-decoration: none; }
.auth-flow a:hover, .auth-links a:hover { text-decoration: underline; }
.auth-password-footer { display: flex; justify-content: flex-end; font-size: 13px; }
@media(max-width: 380px) { .auth-page { padding: 24px 10px; } .auth-page-card { padding: 24px 14px; } .auth-captcha { transform: scale(.9); transform-origin: center; } }