/* Keep authentication colors coherent even when global mobile styles load later. */
#auth.auth-page {
  --auth-surface: #ffffff;
  --auth-text: #172033;
  --auth-muted: #536177;
  --auth-field: #ffffff;
  --auth-border: #ccd4e2;
  --auth-track: #f0ebfa;
  --auth-selected: #ffffff;
  --auth-accent: #6430b7;
  --auth-primary: #7137cf;
  --auth-primary-text: #ffffff;
}
:root[data-theme="dark"] #auth.auth-page {
  --auth-surface: #202c33;
  --auth-text: #f3f5fa;
  --auth-muted: #bcc7d6;
  --auth-field: #17232c;
  --auth-border: #516172;
  --auth-track: #15212b;
  --auth-selected: #d8c7ff;
  --auth-accent: #d8c7ff;
  --auth-primary: #d8c7ff;
  --auth-primary-text: #30204f;
  color-scheme: dark;
}
:root #auth.auth-page .auth-card.auth-card {
  background: var(--auth-surface) !important;
  color: var(--auth-text) !important;
}
:root #auth.auth-page .auth-card.auth-card #auth-title,
:root #auth.auth-page .auth-card.auth-card h1,
:root #auth.auth-page .auth-card.auth-card label {
  color: var(--auth-text) !important;
  -webkit-text-fill-color: var(--auth-text) !important;
}
:root #auth.auth-page .auth-card.auth-card #auth-subtitle,
:root #auth.auth-page .auth-card.auth-card #auth-help {
  color: var(--auth-muted) !important;
}
:root #auth.auth-page .auth-card.auth-card .eyebrow { color: var(--auth-accent) !important; }
:root #auth.auth-page .auth-card.auth-card .tabs {
  background: var(--auth-track) !important;
  padding: 5px;
  gap: 5px;
}
:root #auth.auth-page .auth-card.auth-card .tabs button {
  min-height: 44px;
  background: transparent !important;
  color: var(--auth-accent) !important;
  -webkit-text-fill-color: var(--auth-accent) !important;
  font-weight: 650;
}
:root #auth.auth-page .auth-card.auth-card .tabs button.active {
  background: var(--auth-selected) !important;
  color: #4c237f !important;
  -webkit-text-fill-color: #4c237f !important;
  box-shadow: 0 2px 8px #00000014;
}
:root #auth.auth-page .auth-card.auth-card :is(input, select) {
  background: var(--auth-field) !important;
  border-color: var(--auth-border) !important;
  color: var(--auth-text) !important;
  -webkit-text-fill-color: var(--auth-text) !important;
  caret-color: var(--auth-accent) !important;
}
:root #auth.auth-page .auth-card.auth-card :is(input, select)::placeholder {
  color: var(--auth-muted) !important;
  -webkit-text-fill-color: var(--auth-muted) !important;
  opacity: 1;
}
:root #auth.auth-page .auth-card.auth-card #auth-form > button.primary {
  background: var(--auth-primary) !important;
  color: var(--auth-primary-text) !important;
  -webkit-text-fill-color: var(--auth-primary-text) !important;
  font-weight: 700;
}
:root #auth.auth-page .auth-card.auth-card .password-recovery-actions button {
  color: var(--auth-accent) !important;
  -webkit-text-fill-color: var(--auth-accent) !important;
}
:root #auth.auth-page .auth-card.auth-card :is(input, select, button):focus-visible {
  outline: 2px solid var(--auth-accent);
  outline-offset: 3px;
}
:root[data-theme="dark"] #auth.auth-page .auth-card.auth-card #auth-error {
  color: #ffb4b4 !important;
}