/* Kinetic fuer die Konto-Reise: Anmelden, Account erstellen, E-Mail bestaetigen.
   Nur Tokens aus theme.css, damit Dunkel (Standard) und Hell dieselben
   Kontrastpaare nutzen. Laedt nach theme.css; styles.css bleibt unveraendert. */
.auth-body,
.auth-body .auth-workbench {
  background: var(--k-bg) !important;
  color: var(--k-text) !important;
  font-family: var(--k-font-sans), system-ui, sans-serif !important;
}
.auth-body .auth-topbar {
  background: var(--k-bg) !important;
  color: var(--k-text) !important;
  border-bottom: 1px solid var(--k-line) !important;
}
.auth-body .auth-brand,
.auth-body .auth-library-link {
  color: var(--k-text) !important;
}
.auth-body .auth-brand {
  font-weight: 800;
  letter-spacing: -.04em;
}
.auth-body .auth-brand svg { width: 22px; height: 22px; flex: 0 0 22px; }
.auth-body .auth-brand .kinetic-mark-ink { stroke: var(--k-text); }
.auth-body .auth-brand .kinetic-mark-accent { fill: var(--k-accent); }
.auth-body .auth-account-panel {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-0, 0) !important;
  box-shadow: none !important;
  color: var(--k-text) !important;
}
.auth-body .auth-form-heading h1 {
  color: var(--k-text) !important;
  letter-spacing: -.03em;
}
.auth-body .auth-kicker {
  font-family: var(--k-font-mono) !important;
  color: var(--k-muted) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.auth-body .auth-tabs {
  border-bottom: 1px solid var(--k-line) !important;
  justify-content: flex-start !important;
  gap: 24px !important;
}
.auth-body .auth-tabs a {
  flex: 0 0 auto !important;
  white-space: nowrap;
  text-align: left !important;
  color: var(--k-muted) !important;
  border-bottom: 2px solid transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.auth-body .auth-tabs a.active {
  color: var(--k-text) !important;
  border-bottom-color: var(--k-accent) !important;
}
.auth-body .auth-form label,
.auth-body .verification-copy {
  color: var(--k-muted) !important;
}
.auth-body .auth-form input:not([type=hidden], [type=checkbox]) {
  background: var(--k-bg) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: 0 !important;
  color: var(--k-text) !important;
  font-family: inherit !important;
}
.auth-body .auth-form input:focus-visible {
  outline: 3px solid var(--k-focus) !important;
  outline-offset: 1px;
}
.auth-body .auth-form input[type=checkbox] { accent-color: var(--k-accent); }
.auth-body .auth-consent-row a,
.auth-body .auth-text-link {
  color: var(--k-text) !important;
  text-decoration: underline;
  text-decoration-color: var(--k-accent);
  text-underline-offset: 3px;
}
.auth-body .auth-submit,
.auth-body .auth-secondary-submit {
  border-radius: 0 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}
.auth-body .auth-submit {
  background: var(--k-accent) !important;
  border: 1px solid var(--k-accent) !important;
  color: var(--k-accent-ink) !important;
}
.auth-body .auth-secondary-submit {
  background: transparent !important;
  border: 1px solid var(--k-line) !important;
  color: var(--k-text) !important;
}
.auth-body .auth-inline-status {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-line) !important;
  border-left: 3px solid var(--k-info) !important;
  border-radius: 0 !important;
  color: var(--k-text) !important;
}
.auth-body .auth-inline-status.success { border-left-color: var(--k-success) !important; }
.auth-body .auth-inline-status.error { border-left-color: var(--k-danger) !important; }
.auth-body .auth-field-error { color: var(--k-danger) !important; }
.auth-body .verification-icon { color: var(--k-accent) !important; }
@media (max-width: 560px) {
  .auth-body .auth-tabs { gap: 16px !important; }
  .auth-body .auth-tabs a { flex: 1 1 0 !important; min-width: 0; white-space: normal; }
}
/* Kontoseiten laden app.js nicht, das sonst html.material-symbols-ready setzt.
   Die Icon-Schrift nutzt font-display: block, also erscheint nie Ligaturtext. */
html:not(.material-symbols-ready) .auth-body .verification-icon.material-symbols-outlined {
  max-width: none;
  opacity: 1 !important;
  color: var(--k-accent) !important;
}
html:not(.material-symbols-ready) .auth-body .verification-icon.error.material-symbols-outlined {
  color: var(--k-danger) !important;
}