body.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--gray-950); padding: 24px; position: relative; overflow: hidden; }
.auth-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(0,82,204,.18) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 70%, rgba(0,135,90,.12) 0%, transparent 70%); pointer-events: none; }
.auth-card { position: relative; background: var(--surface); border-radius: 12px; box-shadow: 0 24px 80px rgba(9,30,66,.40); width: 100%; max-width: 440px; overflow: hidden; animation: slideUp 240ms cubic-bezier(.4,0,.2,1); }
.auth-logo { display: flex; align-items: center; gap: 12px; padding: 24px 32px 20px; border-bottom: 1px solid var(--border-2); }
.auth-logo-text { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.auth-tabs { display: flex; position: relative; background: var(--gray-100); border-bottom: 1px solid var(--border-2); }
.auth-tab { flex: 1; padding: 12px 16px; text-align: center; font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: color var(--t-base); position: relative; z-index: 1; }
.auth-tab.active { color: var(--text); font-weight: 600; }
.auth-tab-indicator { position: absolute; bottom: 0; width: 50%; height: 2px; background: var(--brand); border-radius: 2px 2px 0 0; transition: left var(--t-base), width var(--t-base); }
.auth-tabs:has(.auth-tab:only-of-type) .auth-tab-indicator { width: 100%; }
.auth-form { padding: 24px 32px 32px; display: flex; flex-direction: column; }
.auth-heading { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.auth-subheading { font-size: 13px; color: var(--text-2); margin-bottom: 20px; }
.auth-error { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff5f5; border: 1px solid #ffc3b8; border-radius: var(--r-md); color: var(--red); font-size: 13px; margin-bottom: 16px; }
.auth-error.hidden { display: none; }
.auth-submit { width: 100%; justify-content: center; margin-top: 16px; }
.auth-switch { text-align: center; font-size: 13px; color: var(--text-2); margin-top: 16px; }
.auth-switch a { font-weight: 500; }


/* ── Auth page dark mode — explicit data-theme ───────────────── */
[data-theme="dark"] body.auth-page,
[data-theme="oled"] body.auth-page {
  background: var(--bg);
}
[data-theme="dark"] .auth-bg,
[data-theme="oled"] .auth-bg { opacity: .03; }
[data-theme="dark"] .auth-card,
[data-theme="oled"] .auth-card {
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
[data-theme="dark"] .auth-logo,
[data-theme="oled"] .auth-logo { border-color: var(--border-2); }
[data-theme="dark"] .auth-logo-text,
[data-theme="oled"] .auth-logo-text { color: var(--text); }
[data-theme="dark"] .auth-tabs,
[data-theme="oled"] .auth-tabs { background: var(--gray-200); border-color: var(--border-2); }
[data-theme="dark"] .auth-tab,
[data-theme="oled"] .auth-tab { color: var(--text-2); }
[data-theme="dark"] .auth-tab.active,
[data-theme="oled"] .auth-tab.active { color: var(--text); }
[data-theme="dark"] .auth-heading,
[data-theme="oled"] .auth-heading { color: var(--text); }
[data-theme="dark"] .auth-subheading,
[data-theme="oled"] .auth-subheading { color: var(--text-2); }
[data-theme="dark"] .form-label,
[data-theme="oled"] .form-label { color: var(--text-2); }
[data-theme="dark"] .form-control,
[data-theme="oled"] .form-control {
  background: var(--gray-200); border-color: var(--border); color: var(--text);
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="oled"] .form-control::placeholder { color: var(--text-3); }
[data-theme="dark"] .form-control:focus,
[data-theme="oled"] .form-control:focus { background: var(--gray-300); border-color: var(--brand); }
[data-theme="dark"] .auth-switch,
[data-theme="oled"] .auth-switch { color: var(--text-2); }

/* ── Auth page dark mode — OS system preference ──────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.auth-page  { background: var(--bg); }
  :root:not([data-theme="light"]) .auth-bg        { opacity: .03; }
  :root:not([data-theme="light"]) .auth-card      { background: var(--surface); box-shadow: 0 24px 80px rgba(0,0,0,.6); }
  :root:not([data-theme="light"]) .auth-logo      { border-color: var(--border-2); }
  :root:not([data-theme="light"]) .auth-logo-text { color: var(--text); }
  :root:not([data-theme="light"]) .auth-tabs      { background: var(--gray-200); border-color: var(--border-2); }
  :root:not([data-theme="light"]) .auth-tab       { color: var(--text-2); }
  :root:not([data-theme="light"]) .auth-tab.active { color: var(--text); }
  :root:not([data-theme="light"]) .auth-heading   { color: var(--text); }
  :root:not([data-theme="light"]) .auth-subheading { color: var(--text-2); }
  :root:not([data-theme="light"]) .form-label     { color: var(--text-2); }
  :root:not([data-theme="light"]) .form-control   { background: var(--gray-200); border-color: var(--border); color: var(--text); }
  :root:not([data-theme="light"]) .form-control::placeholder { color: var(--text-3); }
  :root:not([data-theme="light"]) .form-control:focus { background: var(--gray-300); border-color: var(--brand); }
  :root:not([data-theme="light"]) .auth-switch    { color: var(--text-2); }
}

/* ── Smooth transition on theme change ───────────────────────── */
html.theme-transitioning body.auth-page,
html.theme-transitioning .auth-card,
html.theme-transitioning .auth-tabs,
html.theme-transitioning .form-control {
  transition: background-color 350ms ease, background 350ms ease,
              color 350ms ease, border-color 350ms ease,
              box-shadow 350ms ease !important;
}