/* Auth-only styling: deliberately independent of the onboarding layout. */
body[data-auth] .social-auth { margin-top: 24px; }
body[data-auth] button.social-button { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; background: #fff; border: 1px solid #d4d4d8; color: #27272a; box-shadow: 0 1px 2px #18181b05; }
body[data-auth] button.social-button:hover:not(:disabled) { background: #fafafa; border-color: #a1a1aa; }
body[data-auth] button.social-button:disabled { background: #fff; border-color: #e4e4e7; color: #71717a; }
body[data-auth] .social-button svg { width: 20px; height: 20px; flex: none; }
body[data-auth] .social-note { margin-top: 12px; font-size: 11px; }
body[data-auth] .social-note:empty { display: none; }
body[data-auth] .auth-divider { display: flex; align-items: center; gap: 14px; margin-top: 24px; color: #a1a1aa; font-size: 11px; }
body[data-auth] .auth-divider::before, body[data-auth] .auth-divider::after { content: ''; height: 1px; flex: 1; background: #e4e4e7; }
body[data-auth] .is-sent .social-auth { display: none; }
body[data-auth], body[data-auth] * { box-sizing: border-box; }
body[data-auth] {
  margin: 0; min-height: 100vh; min-height: 100dvh; padding: 48px 20px;
  display: flex; align-items: center; justify-content: center;
  color: #18181b; background-color: #fafafa;
  background-image: radial-gradient(ellipse at 50% 40%, #ffffffed 12%, #ffffff20 75%), linear-gradient(#18181b04 1px, transparent 1px), linear-gradient(90deg, #18181b04 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body[data-auth] [hidden] { display: none !important; }
body[data-auth] .auth-card {
  display: block; flex: none; width: 100%; max-width: 440px; height: auto; min-height: 0;
  padding: 40px 36px 32px; text-align: center; background: #fff;
  border: 1px solid #e4e4e7; border-radius: 16px;
  box-shadow: 0 2px 4px #18181b03, 0 16px 32px -16px #18181b1a, 0 40px 80px -32px #18181b24;
  animation: auth-enter .45s cubic-bezier(.2,.7,.2,1) both;
}
body[data-auth] .auth-brand { display: inline-block; font-size: 19px; font-weight: 650; letter-spacing: -.7px; color: #18181b; text-decoration: none; }
body[data-auth] .auth-brand span { color: #0a66c2; }
body[data-auth] .auth-symbol, body[data-auth] .sent-symbol { width: 48px; height: 48px; margin: 32px auto 24px; display: grid; place-items: center; color: #52525b; background: #fafafa; border: 1px solid #e4e4e7; border-radius: 14px; box-shadow: 0 2px 3px #18181b03; }
body[data-auth] svg { width: 24px; height: 24px; }
body[data-auth] h1, body[data-auth] h2 { margin: 0 0 12px; font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -1px; text-wrap: balance; }
body[data-auth] p { margin: 0; font-size: 14px; line-height: 1.65; color: #71717a; }
body[data-auth] form { display: block; text-align: left; margin: 28px 0 0; }
body[data-auth] label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; color: #3f3f46; }
body[data-auth] input { font: inherit; font-size: 16px; width: 100%; min-height: 50px; padding: 13px 15px; border: 1px solid #d4d4d8; border-radius: 9px; color: #18181b; background: #fff; box-shadow: 0 1px 2px #18181b04; transition: border-color .18s, box-shadow .18s; }
body[data-auth] input::placeholder { color: #a1a1aa; }
body[data-auth] input:focus { outline: none; border-color: #71717a; box-shadow: 0 0 0 3px #18181b0c; }
body[data-auth] button { font: inherit; font-size: 14px; width: 100%; min-height: 48px; padding: 13px 12px; margin-top: 14px; border: 1px solid #18181b; border-radius: 9px; background: #18181b; color: #fff; font-weight: 500; cursor: pointer; transition: background .18s, transform .16s, box-shadow .18s; }
body[data-auth] button:hover:not(:disabled) { background: #303034; box-shadow: 0 3px 7px #18181b12; }
body[data-auth] button:active:not(:disabled) { transform: scale(.98); }
body[data-auth] button:disabled { background: #52525b; border-color: #52525b; cursor: not-allowed; }
body[data-auth] :is(button,a):focus-visible { outline: 2px solid #0a66c2; outline-offset: 4px; }
body[data-auth] .helper { font-size: 12px; line-height: 1.65; margin-top: 20px; color: #71717a; }
body[data-auth] #status:empty { display: none; }
body[data-auth] #status { margin-top: 20px; padding: 12px; border: 1px solid #e4e4e7; border-radius: 9px; background: #fafafa; color: #52525b; font-size: 13px; }
body[data-auth] .back { display: inline-block; padding: 12px; margin-top: 12px; color: #52525b; font-size: 13px; text-underline-offset: 4px; }
body[data-auth] .spinner { display: block; flex: none; margin: 28px auto; border: 2px solid #e4e4e7; border-top-color: #52525b; border-radius: 50%; height: 32px; width: 32px; animation: auth-spin .9s linear infinite; }
body[data-auth=callback] .auth-symbol { display: none; }
body[data-auth=callback] .auth-heading { margin-top: 32px; }
body[data-auth] .auth-sent { animation: auth-enter .35s ease both; }
body[data-auth] .sent-symbol { color: #0a66c2; background: #f7fbff; border-color: #e1ecf7; }
body[data-auth] .sent-symbol svg { animation: auth-mail .55s cubic-bezier(.2,.7,.2,1) both; }
body[data-auth] #sent-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; color: #3f3f46; font-weight: 500; }
body[data-auth] .sent-help { font-size: 12px; margin-top: 20px; }
body[data-auth] .is-sent form { margin-top: 16px; }
body[data-auth] .text-button, body[data-auth] .is-sent #submit { background: transparent; border-color: transparent; color: #52525b; box-shadow: none; margin-top: 0; min-height: 44px; padding: 10px; font-size: 13px; }
body[data-auth] .text-button:hover:not(:disabled), body[data-auth] .is-sent #submit:hover:not(:disabled) { background: #fafafa; box-shadow: none; color: #18181b; }
body[data-auth] .is-sent #submit:disabled { color: #71717a; cursor: default; }
body[data-auth] #change-email { color: #71717a; font-size: 12px; }
@keyframes auth-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-mail { from { opacity: 0; transform: translateY(5px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { body[data-auth] { padding: 28px 16px; } body[data-auth] .auth-card { padding: 32px 24px 26px; } body[data-auth] h1, body[data-auth] h2 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { body[data-auth] *, body[data-auth] *::before, body[data-auth] *::after { animation: none !important; transition: none !important; } }