.mfa-card { width: min(520px, 100%); line-height: 1.55; }
.mfa-card .auth-brand { justify-content: flex-start; }
.mfa-card .auth-brand > span:last-child { font-size: 16px; }
.mfa-card h1 { line-height: 1.2; }
.mfa-card h2 { margin: 0 0 5px; font-size: 16px; }
.mfa-card p { overflow-wrap: anywhere; }
.mfa-small { font-size: 12px; line-height: 1.6; }
.mfa-form { margin-top: 22px; }
.mfa-form .button { margin-top: 8px; min-height: 44px; }
.mfa-form input { min-height: 44px; }
.mfa-form input[name="token"] { font-variant-numeric: tabular-nums; }
.mfa-errors { margin: 18px 0; padding: 12px 14px; border: 1px solid light-dark(#b7584c, #b77870); border-radius: 9px; color: light-dark(#8f342c, #f3b2a8); background: light-dark(#fff5f2, #382421); font-size: 13px; }
.mfa-errors p { margin: 0 0 5px; font-weight: 700; }
.mfa-errors ul { margin: 4px 0; padding-left: 18px; }
.mfa-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 16px; border-top: 1px solid light-dark(#e7dfd4, #474039); font-size: 13px; }
.mfa-footer form { margin: 0; }
.mfa-text-button { padding: 0; border: 0; color: inherit; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.mfa-steps { display: grid; gap: 8px; padding-left: 22px; font-size: 14px; }
.mfa-qr { margin: 22px 0; text-align: center; }
.mfa-qr img { display: block; width: min(256px, 100%); height: auto; margin: 0 auto; border: 12px solid #fff; border-radius: 12px; background: #fff; }
.mfa-qr figcaption { margin-top: 10px; color: light-dark(#7e766e, #aaa198); font-size: 11px; }
.mfa-manual { padding: 12px 14px; border: 1px solid light-dark(#ddd5ca, #49443e); border-radius: 9px; }
.mfa-manual summary { font-size: 13px; font-weight: 650; }
.mfa-secret { display: block; padding: 10px; overflow-wrap: anywhere; border-radius: 6px; color: inherit; background: light-dark(#f0ebe3, #1e1c1a); font-size: 14px; user-select: all; }
.mfa-status { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: light-dark(#47663e, #b4ceab); font-size: 13px; font-weight: 700; }
.mfa-facts { display: grid; gap: 12px; margin: 24px 0; padding: 16px 0; border-block: 1px solid light-dark(#e7dfd4, #474039); }
.mfa-facts > div { display: flex; justify-content: space-between; gap: 18px; font-size: 13px; }
.mfa-facts dt { color: light-dark(#7e766e, #aaa198); }
.mfa-facts dd { margin: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.mfa-options { display: grid; gap: 24px; }
.mfa-options p { margin: 5px 0 12px; font-size: 13px; }
.mfa-recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0; padding: 0; list-style: none; }
.mfa-recovery-codes li { padding: 10px 6px; border: 1px solid light-dark(#ddd5ca, #49443e); border-radius: 8px; background: light-dark(#f7f4ee, #211f1c); text-align: center; }
.mfa-recovery-codes code { font-size: 14px; overflow-wrap: anywhere; user-select: all; }
.mfa-actions { display: grid; justify-items: start; gap: 14px; margin-top: 22px; font-size: 13px; }
.mfa-card a:focus-visible, .mfa-card button:focus-visible, .mfa-card summary:focus-visible, .mfa-card input:focus-visible, .security-nav-link:focus-visible { outline: 2px solid light-dark(#7a5d43, #cdb497); outline-offset: 4px; }

@media (max-width: 900px) {
  .security-nav-link::after { content: "⚙"; }
}

@media (max-width: 620px) {
  .sidebar-footer { display: flex; align-items: center; gap: 3px; margin-top: 0; padding: 0; }
  .sidebar-footer .nav-button { width: 40px; min-height: 42px; margin: 0; padding: 8px; }
  .sidebar-footer form { margin: 0; }
}

@media (max-width: 420px) {
  .auth-shell:has(.mfa-card) { padding: 16px; }
  .mfa-card { padding: 22px 18px; }
  .mfa-facts > div { flex-direction: column; gap: 2px; }
  .mfa-facts dd { text-align: left; }
  .mfa-recovery-codes { grid-template-columns: 1fr; }
  .mfa-actions { justify-items: stretch; }
}