@charset "UTF-8";
/* login.php (frontend/src/auth/). Standalone page: no header, no sidebar.
   Prefixed au-. Safe-area padding so the app's status bar never covers the card. */
body.au-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); box-sizing: border-box; }
/* #auth-root is the flex item, not the card: without a width it shrink-wraps to
   its content, so the sign-in card came out narrower than sign-up. */
.au-body #auth-root { width: 100%; display: flex; justify-content: center; }
.au-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 2rem 2rem 1.5rem; box-sizing: border-box; }
.au-logo { display: block; margin: 0 auto 1.5rem; width: 150px; }
.au-logo img { display: block; width: 150px; height: auto; }
.au-form { display: flex; flex-direction: column; gap: 1rem; }
.au-form h1 { margin: 0; font-size: var(--fs-2xl); font-weight: 700; color: var(--text-strong); text-align: center; }
.au-lede { margin: 0; color: var(--text-muted); font-size: var(--fs-md); text-align: center; line-height: 1.5; }
.au-form .ui-flash { margin: 0; }
.au-form .ui-code { margin: .25rem 0; }
.au-providers { display: flex; flex-direction: column; gap: .6rem; }
.au-provider { display: flex; align-items: center; justify-content: center; gap: .6rem; height: 42px; border-radius: var(--radius-md); background: var(--surface); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--border-strong); font-weight: 600; font-size: var(--fs-md); text-decoration: none; }
.au-provider:hover { background: var(--surface-2); }
.au-provider .fa-apple { font-size: var(--fs-xl); }
.au-or { display: flex; align-items: center; gap: .75rem; color: var(--text-faint); font-size: var(--fs-sm); }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.au-links { margin: .25rem 0 0; display: flex; flex-direction: column; gap: .4rem; align-items: center; font-size: var(--fs-sm); color: var(--text-muted); }
.au-resend { margin: 0; text-align: center; font-size: var(--fs-sm); }
.au-link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.au-link:disabled { color: var(--text-disabled); cursor: default; }
@media (max-width: 480px) {
  .au-card { padding: 1.5rem 1.25rem; }
}