/*
  TALVAXO BETA 10.0 — zusaetzliche Klassen fuer die neuen Auth-Seiten (Register/Verify/Forgot/
  Reset/MFA/Account), NACH login.css geladen. Nutzt ausschliesslich bestehende --talvaxo-*-Tokens
  aus tokens.css — keine neuen Farben erfunden. login.css selbst bleibt unveraendert (Mandat Teil L:
  "extend login style", kein Redesign der bestehenden Seite).
*/

.auth-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 18px;
  font-size: 13.5px; line-height: 1.5;
  border: 1px solid var(--border-soft);
}
.auth-alert[hidden] { display: none; } /* v10.3.9 real bug fix (same root cause as
  .login-field[hidden] in login.css): equal-specificity + later source order let .auth-alert's own
  `display: flex` silently override the native [hidden] behavior -- every auth-alert box (login
  error/success, register error/success, MFA/reset/etc.) was an empty-but-technically-visible flex
  box whenever "hidden", not actually display:none. Invisible in practice only because it carried
  no text content while genuinely hidden, so no prior visual QA pass caught it. */
.auth-alert--info { background: rgba(0, 122, 255, 0.08); color: var(--text); }
.auth-alert--success { background: rgba(52, 199, 89, 0.1); border-color: rgba(52, 199, 89, 0.35); color: var(--text); }
.auth-alert--error { background: rgba(255, 69, 58, 0.1); border-color: rgba(255, 69, 58, 0.35); color: var(--text); }
.auth-alert[hidden] { display: none; }

.auth-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; margin-bottom: 18px; text-decoration: none; }
.auth-back-link:hover { color: var(--talvaxo-cyan); }
.auth-back-link svg { width: 15px; height: 15px; }

.auth-otp-input {
  width: 100%; text-align: center; letter-spacing: 0.5em; font-family: var(--font-mono);
  font-size: 22px; padding: 15px 10px 15px 16px !important;
}

.auth-hint { color: var(--text-dim); font-size: 12px; margin: -10px 0 18px 0; line-height: 1.5; }

.auth-recovery-codes {
  font-family: var(--font-mono); font-size: 14px; line-height: 2;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 14px 18px; margin: 4px 0 18px 0; column-count: 2; column-gap: 20px;
}

.auth-qr-wrap { display: flex; justify-content: center; margin-bottom: 18px; }
.auth-qr-wrap img { border-radius: 10px; background: #fff; padding: 10px; width: 176px; height: 176px; }

.auth-secondary-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border-radius: 10px; cursor: pointer; margin-top: 10px;
  background: var(--panel-alt); border: 1px solid var(--border-soft);
  color: var(--text); font-size: 13.5px; font-family: var(--font-body);
}
.auth-secondary-btn:hover { border-color: var(--talvaxo-cyan); color: var(--talvaxo-cyan); }
.auth-secondary-btn.is-danger:hover { border-color: #ff453a; color: #ff453a; }

/* ===== Account/Settings-Seite: eigenes, einfacheres Panel-Layout (kein Wave-Background/
   Zweispalten-Brand-Layout — mandatsgemaess bewusst schlicht, kein bestehendes Sidebar-Nav
   nachgebaut) ===== */
.account-body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); }
.account-shell { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px 24px; }
.account-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; gap: 16px; flex-wrap: wrap; }
.account-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0; }
.account-back { color: var(--text-muted-on-bg); font-size: 13.5px; text-decoration: none; }
.account-back:hover { color: var(--talvaxo-cyan); }

.account-panel {
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 26px 28px; margin-bottom: 20px;
}
.account-panel h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 4px 0; }
.account-panel p.account-panel-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 18px 0; }

.account-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.account-row:last-child { border-bottom: none; }
.account-row-label { font-size: 13.5px; color: var(--text-muted); }
.account-row-value { font-size: 13.5px; font-weight: 500; }

.account-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.account-badge--on { background: rgba(52, 199, 89, 0.15); color: #34c759; }
.account-badge--off { background: rgba(255, 255, 255, 0.06); color: var(--text-dim); }

.account-session-list { display: flex; flex-direction: column; gap: 10px; }
.account-session {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel-alt);
  flex-wrap: wrap;
}
.account-session-meta { font-size: 12.5px; color: var(--text-dim); }
.account-session-current { color: var(--talvaxo-cyan); font-weight: 600; }
/* v10.3.1 (Mandat §22 "raw User-Agent only in a secondary detail view"): die normalisierte
   Bezeichnung ("Chrome · Windows") ist jetzt die primaere Anzeige, der rohe User-Agent bleibt
   ueber dieses <details> weiterhin real einsehbar statt entfernt zu werden. */
.account-session-details { margin-top: 4px; }
.account-session-details summary { cursor: pointer; font-size: 11.5px; color: var(--text-dim); }
.account-session-details .acct-code { display: block; margin-top: 4px; font-size: 11px; word-break: break-all; }
.account-session-revoke { background: none; border: 1px solid var(--border-soft); color: var(--text-muted); font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.account-session-revoke:hover { border-color: #ff453a; color: #ff453a; }