/* static/v2/auth.css — layout for the public auth pages (login, recover,
 * set-password, success — see app.js's PUBLIC_ROUTES). These render outside
 * the authenticated app shell (no rail/top bar), so this is the one thing
 * app.css/pages.css don't already provide: a centered card on a bare page.
 * Everything inside the card (buttons, inputs, fields, notices) reuses the
 * same classes/primitives as every other v2 page — see ui.js and app.css.
 */

.auth-page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: var(--bg-0);
}
.auth-wrap { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
.auth-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.auth-card-head { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-foot {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; font-size: 12.5px; color: var(--text-3);
}
.auth-foot a { color: var(--text-2); text-decoration: none; font-weight: 500; }
.auth-foot a:hover { color: var(--text); }
.auth-submit { width: 100%; }