/* ------------------------------------------------------------------
   Catalis authentication screens (sign in / password / forgot / reset)
   Loaded ONLY by the Account step views, so the global rules below
   (.welcome-block, body background) safely apply to those pages alone.
   All component rules are scoped under .catalis-auth, and names that
   would clash with the Bootstrap bundle (.card/.btn) are renamed
   (.auth-card / .auth-btn).

   Design rules that keep every control consistent:
   - One field shell (.field__control): same height, border, radius.
   - One button (.auth-btn): navy primary, used for login, SSO, and the
     "log in with password" toggle so they share the exact look & feel.
------------------------------------------------------------------- */

:root {
  --navy:          #1f3c6e;
  --navy-hover:    #022c59;
  --focus-ring:    rgba(1, 57, 112, 0.12);
  --ink:           rgba(0, 0, 0, 0.87);
  --muted:         rgba(0, 0, 0, 0.60);
  --border:        rgba(0, 0, 0, 0.23);
  --border-focus:  #1f3c6e;
  --field-icon:    rgba(0, 0, 0, 0.60);
  --link:          #1f3c6e;

  --error:        #d32f2f;
  --error-text:   #d32f2f;
  --error-bg:     #fdeded;
  --error-border: #f2c0c0;

  --success-text:   #1d6f4a;
  --success-bg:     #e9f7ef;
  --success-border: #b8e3c9;

  --panel-bg:     #f5f6f8;
  --panel-border: #e8e8e8;

  --surface:    #ffffff;
  --page-bg:    #f5f6f8;
  --line:       #e8e8e8;
  --divider:    rgba(0, 0, 0, 0.12);
  --radius-card: 12px;
  --radius-ctl:  8px;
  --radius-btn:  6px;
  --control-h:  52px;
  --btn-h:      56px;

  --auth-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* On auth pages, drop the layout's logo/title block and use the page bg. */
.welcome-block { display: none !important; }

body {
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

/* The layout wraps RenderBody() in .container.flex-fill (a flex item that fills the
   space between the top and the footer). Make it a flex column so the card can use
   margin:auto. */
.container.flex-fill {
  display: flex;
  flex-direction: column;
}

/* margin:auto centers the card vertically (and horizontally) when there's free space.
   When the card is taller than the available area, the auto margins collapse to 0, so it
   stays pinned to the top and grows DOWNWARD (page scrolls) — it never clips off the top. */
.catalis-auth {
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  font-family: var(--auth-font);
  color: var(--ink);
}

.catalis-auth * { box-sizing: border-box; }

/* ---------- Card ---------- */
.catalis-auth .auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 40px 40px 32px;
  box-shadow:
    0 12px 32px -8px rgba(1, 57, 112, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ---------- Brand (existing Catalis logo) ---------- */
.catalis-auth .brand {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
.catalis-auth .brand__logo {
  display: block;
  height: 34px;
  width: auto;
  border: 0;
}

/* ---------- Headings ---------- */
.catalis-auth .auth-card__title {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: normal;
}
.catalis-auth .auth-card__subtitle {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
  /* Plain left alignment, natural wrapping across the full card width (no balancing/justify). */
  text-align: left;
}

/* ---------- Vertical stack for the form / choices ---------- */
.catalis-auth .form,
.catalis-auth .auth-stack,
.catalis-auth .auth-substack { display: flex; flex-direction: column; gap: 18px; }
.catalis-auth .sso-list { display: flex; flex-direction: column; gap: 12px; }

/* Default order: SSO on top, then "or", then "log in with password", then the form.
   In .password-mode the password form moves to the top and SSO drops to the bottom
   (the "interchange" requested when the user chooses to log in with a password). */
.catalis-auth .auth-stack > #sso-area         { order: 1; }
.catalis-auth .auth-stack > #or-divider       { order: 2; }
.catalis-auth .auth-stack > #show-password-btn { order: 3; }
.catalis-auth .auth-stack > #password-section  { order: 4; }
.catalis-auth .auth-stack.password-mode > #password-section  { order: 0; }
.catalis-auth .auth-stack.password-mode > #sso-area          { order: 5; }
.catalis-auth .auth-stack.password-mode > #show-password-btn { display: none; }

/* ---------- Signed-in-as panel ---------- */
.catalis-auth .signed-as {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 22px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-ctl);
}
.catalis-auth .signed-as__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.catalis-auth .signed-as__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.catalis-auth .signed-as__email {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalis-auth .signed-as__change {
  flex: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--link);
  cursor: pointer;
  padding: 4px;
  text-decoration: none;
}
.catalis-auth .signed-as__change:hover { text-decoration: underline; }

/* ---------- Field: one shell for every input ---------- */
.catalis-auth .field { position: relative; }

/* Floating label: rests INSIDE the field as a placeholder when empty + unfocused,
   then animates up into the border notch on focus OR once the field has a value
   (.is-filled is toggled by the shared script in _LayoutNoTopbar). */
.catalis-auth .field__label {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
  pointer-events: none;
  transition: all 0.15s ease;
}
/* Fields with a leading adornment (email "@", key/code icons): rest the label past it. */
.catalis-auth .field:has(.field__at) .field__label,
.catalis-auth .field:has(.field__keyicon) .field__label { left: 46px; }
/* The "123" badge is wider than the @/key icons, so rest the label further right to clear it. */
.catalis-auth .field:has(.field__badge) .field__label { left: 62px; }

/* Floated state — when focused or filled, move to the notch. */
.catalis-auth .field:focus-within .field__label,
.catalis-auth .field.is-filled .field__label {
  top: -8px;
  left: 10px;
  transform: none;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0 4px;
  background: var(--surface);
  color: var(--muted);
}
/* Navy label while the field is focused. */
.catalis-auth .field:focus-within .field__label { color: var(--navy); }
.catalis-auth .field__control {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 16px;
  height: var(--control-h);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.catalis-auth .field__control:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
/* Leading email icon (Material Icons "alternate_email"), 22px, vertically centred
   so it never looks detached from the field. */
.catalis-auth .field__at {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  font-size: 22px;
  line-height: 1;
  color: var(--field-icon);
  user-select: none;
  pointer-events: none;
}
.catalis-auth .field__control input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  padding: 0;
}
.catalis-auth .field__control input::placeholder { color: var(--field-icon); }
.catalis-auth .field__control input[readonly] { color: var(--muted); cursor: default; }

/* Password show/hide toggle */
.catalis-auth .field__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--field-icon);
  cursor: pointer;
  border-radius: 8px;
}
.catalis-auth .field__toggle:hover { color: var(--ink); }
.catalis-auth .field__toggle svg { width: 22px; height: 22px; }

/* Error state for fields */
.catalis-auth .field--error .field__label { color: var(--error-text); }
.catalis-auth .field--error .field__control { border-color: var(--error-border); }
.catalis-auth .field--error .field__control:focus-within {
  border-color: var(--error);
  box-shadow: 0 0 0 4px rgba(210, 59, 59, 0.16);
}

/* ---------- Password requirements checklist ---------- */
.catalis-auth .pw-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding: 16px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-ctl);
}
.catalis-auth .pw-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--muted);
}
.catalis-auth .pw-rule__dot {
  flex: none;
  width: 18px;
  height: 18px;
  /* Darker than the faint input border so the unmet-state ring meets the 3:1 non-text contrast bar. */
  border: 1.5px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.catalis-auth .pw-rule--met { color: var(--ink); }
.catalis-auth .pw-rule--met .pw-rule__dot {
  background: var(--success-text);
  border-color: var(--success-text);
}
.catalis-auth .pw-rule--met .pw-rule__dot::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media (max-width: 480px) {
  .catalis-auth .pw-rules { grid-template-columns: 1fr; }
}

/* ---------- Row: remember me + forgot ---------- */
.catalis-auth .auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -2px;
}
.catalis-auth .checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.catalis-auth .checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.catalis-auth .checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: #fff;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.catalis-auth .checkbox__box svg { width: 14px; height: 14px; opacity: 0; transition: opacity 0.12s ease; }
.catalis-auth .checkbox input:checked + .checkbox__box {
  background: var(--navy);
  border-color: var(--navy);
}
.catalis-auth .checkbox input:checked + .checkbox__box svg { opacity: 1; }
.catalis-auth .checkbox input:focus-visible + .checkbox__box {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.catalis-auth .checkbox__label { font-size: 16px; color: var(--ink); }

.catalis-auth .inline-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}
.catalis-auth .inline-link:hover { text-decoration: underline; }

/* ---------- Button: ONE style for login / SSO / toggles ---------- */
.catalis-auth .auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  /* flex:none cancels the legacy `flex-basis:100%` on button[value=login|submit|verify];
     in a flex column that basis governs the main (height) axis and would otherwise shrink
     those buttons, making them shorter than the SSO <a> buttons. */
  flex: none;
  /* height/padding forced with !important so the legacy global button rules
     (padding:14px, box-shadow, uppercase, 2px radius) can't resize/restyle them. */
  height: var(--btn-h) !important;
  padding: 0 20px !important;
  line-height: 1;
  border: 0;
  border-radius: var(--radius-btn) !important;
  box-shadow: none;
  text-transform: uppercase;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s ease, transform 0.05s ease;
}
.catalis-auth .auth-btn:hover  { background: var(--navy-hover); color: #fff; }
.catalis-auth .auth-btn:active { transform: translateY(1px); }
.catalis-auth .auth-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.catalis-auth .auth-btn__arrow { width: 22px; height: 22px; color: #fff; flex: none; }

/* ---------- "or" separator ---------- */
.catalis-auth .or-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.catalis-auth .or-divider::before,
.catalis-auth .or-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--divider);
}

/* ---------- Banners ---------- */
.catalis-auth .error-banner {
  margin: 0 0 18px;
  padding: 16px 20px;
  border: 1px solid var(--error-border);
  border-radius: var(--radius-ctl);
  background: var(--error-bg);
  color: var(--error-text);
  font-size: 15px;
}
.catalis-auth .error-banner ul { margin: 0; padding-left: 0; list-style: none; }
/* Error shown at the bottom of the card, just above the help divider. */
.catalis-auth .error-banner--bottom { margin: 18px 0 0; }
.catalis-auth .success-banner {
  display: block;
  margin: 0 0 18px;
  padding: 16px 20px;
  border: 1px solid var(--success-border);
  border-radius: var(--radius-ctl);
  background: var(--success-bg);
  color: var(--success-text);
  font-size: 15px;
  font-weight: 500;
}
.catalis-auth .error-banner[hidden], .catalis-auth .success-banner[hidden] { display: none; }

/* Rich success banner: bold title + muted hint (e.g. the "Email sent" confirmation). */
.catalis-auth .success-banner--rich { font-weight: 400; }
.catalis-auth .success-banner__title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.catalis-auth .success-banner__hint {
  display: block;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Divider + help link ---------- */
.catalis-auth .divider {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: 26px 0 20px;
}
.catalis-auth .help-link {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--link);
  text-decoration: none;
}
.catalis-auth .help-link:hover { text-decoration: underline; }

/* ---------- Secondary / disabled buttons ---------- */
.catalis-auth .auth-btn--secondary {
  background: var(--surface);
  color: var(--navy);
  border: 1.5px solid var(--border);
}
.catalis-auth .auth-btn--secondary:hover { background: var(--panel-bg); color: var(--navy); }
.catalis-auth .auth-btn:disabled,
.catalis-auth .auth-btn.is-disabled {
  background: #e9ecf1 !important;
  color: #9aa3b0;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Numbered steps (authenticator setup) ---------- */
.catalis-auth .steps { display: flex; flex-direction: column; gap: 22px; margin-bottom: 4px; }
.catalis-auth .step { display: flex; gap: 14px; }
.catalis-auth .step__num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.catalis-auth .step__title { margin: 3px 0 4px; font-size: 16px; font-weight: 600; color: var(--ink); }
.catalis-auth .step__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- QR / setup-key panel ---------- */
.catalis-auth .qr-panel {
  display: flex;
  gap: 18px;
  padding: 16px;
  margin-top: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-ctl);
}
.catalis-auth .qr-panel__code { flex: none; background: #fff; padding: 8px; border-radius: 8px; line-height: 0; }
.catalis-auth .qr-panel__code img,
.catalis-auth .qr-panel__code canvas { display: block; width: 150px; height: 150px; }
.catalis-auth .qr-panel__info { flex: 1; min-width: 0; }

/* Wider card for content-heavy screens (e.g. authenticator setup) so the
   side-by-side QR + setup key fits without overflowing. */
.catalis-auth .auth-card--wide { max-width: 680px; }
/* Let the subtitle span the wider card instead of staying clamped to 36ch. */
.catalis-auth .auth-card--wide .auth-card__subtitle { max-width: none; }

/* On small screens the QR panel stacks: QR on top, setup details below. */
@media (max-width: 520px) {
  .catalis-auth .qr-panel { flex-direction: column; align-items: center; }
  .catalis-auth .qr-panel__info { width: 100%; }
}
.catalis-auth .qr-panel__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.catalis-auth .setup-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; letter-spacing: 0.04em; color: var(--ink);
  background: #fff; border: 1px solid var(--panel-border); border-radius: 8px;
  padding: 10px 12px; word-break: break-word;
}
.catalis-auth .copy-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 0;
  background: none; border: 0; color: var(--link); font-weight: 600; font-size: 14px;
  cursor: pointer; font-family: inherit;
}
.catalis-auth .copy-btn:hover { text-decoration: underline; }
.catalis-auth .copy-btn svg { width: 16px; height: 16px; }
.catalis-auth .qr-panel__account { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- Field badge / key icon (code & recovery inputs) ---------- */
.catalis-auth .field__badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 22px; padding: 0 6px; margin-right: 4px; border-radius: 5px;
  /* Darkened text so the "123" badge clears the 4.5:1 contrast bar on its light background. */
  background: #e7eaef; color: #475467;
  font-size: 11px; font-weight: 700; font-family: ui-monospace, monospace;
}
.catalis-auth .field__keyicon { flex: none; display: inline-flex; width: 22px; color: var(--field-icon); }
.catalis-auth .field__keyicon svg { width: 22px; height: 22px; }

/* ---------- Recovery codes grid (individual boxes, 2 columns) ---------- */
.catalis-auth .recovery-codes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
  padding: 0; background: transparent; border: 0;
}
.catalis-auth .recovery-code {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #f5f6f8; border: 1px solid #eef0f2; border-radius: 8px;
}
.catalis-auth .recovery-code__num { color: rgba(0, 0, 0, 0.45); font-size: 12px; min-width: 18px; }
.catalis-auth .recovery-code__val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; letter-spacing: 0.04em; color: var(--ink); word-break: break-all;
}
@media (max-width: 480px) {
  .catalis-auth .recovery-codes { grid-template-columns: 1fr; }
}

/* ---------- Warning (amber) banner ---------- */
.catalis-auth .warning-banner {
  display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--radius-ctl);
  background: #fdf6e3; border: 1px solid #f1e2b6; border-left: 4px solid #e0a020;
}
.catalis-auth .warning-banner__icon { flex: none; color: #d98a00; }
.catalis-auth .warning-banner__icon svg { width: 22px; height: 22px; }
.catalis-auth .warning-banner__title { display: block; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.catalis-auth .warning-banner__text { display: block; font-size: 14px; line-height: 1.5; color: #7a5b16; }

/* Checkbox row that left-aligns (e.g. "I've saved these codes") */
.catalis-auth .checkbox-row { display: flex; }

/* ---------- Responsive (Bootstrap handles the page; this tunes the card) ---------- */
@media (max-width: 480px) {
  .catalis-auth .auth-card { padding: 32px 24px 26px; border-radius: 14px; }
  .catalis-auth .auth-card__title { font-size: 26px; }
  .catalis-auth .auth-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .catalis-auth * { transition: none !important; }
}

/* ---------- Settings sub-pages (MFA change / recovery codes under the app-bar header) ----------
   Left-aligned, wide content beneath the _Layout header — overrides the centered narrow-card
   defaults above. Shared by ChangeAuthenticator, GenerateRecoveryCodes and ShowRecoveryCodes. */
.catalis-auth.mfa-page {
  display: block; max-width: 960px; margin: 0 auto; padding: 32px 24px 56px; text-align: left;
}
.mfa-back {
  display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 500;
  font-size: 0.95rem; text-decoration: none; margin-bottom: 18px; cursor: pointer;
}
/* No underline — instead the arrow grows on hover/focus as the affordance; click navigates back. */
.mfa-back:hover, .mfa-back:focus { text-decoration: none; color: var(--navy-hover); outline: none; }
.mfa-back .material-icons { font-size: 20px; transition: transform 0.12s ease; }
.mfa-back:hover .material-icons,
.mfa-back:focus-visible .material-icons { transform: scale(1.3) translateX(-2px); }
.mfa-title { font-size: 2.25rem; font-weight: 500; margin: 0 0 6px; color: var(--ink); }
.mfa-subtitle { color: var(--muted); font-size: 1rem; line-height: 1.5; margin: 0 0 24px; }
.catalis-auth .auth-card.mfa-card { max-width: none; }
.catalis-auth .mfa-actions { display: flex; justify-content: flex-end; gap: 12px; }

/* Compact settings buttons (sentence case, auto width) matching the account pages. */
.catalis-auth .mfa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 6px; border: 1px solid var(--navy);
  background: var(--navy); color: #fff; font: 500 0.92rem var(--auth-font);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.catalis-auth .mfa-btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: #fff; }
.catalis-auth .mfa-btn--secondary { background: #fff; color: var(--navy); }
.catalis-auth .mfa-btn--secondary:hover { background: var(--navy); color: #fff; }
.catalis-auth .mfa-btn:disabled,
.catalis-auth .mfa-btn.is-disabled { background: #e9ecf1; border-color: #e9ecf1; color: #9aa3b0; cursor: not-allowed; pointer-events: none; }
.catalis-auth .mfa-btn .material-icons { font-size: 18px; }