.two-factor-account{margin-top:22px;padding-top:18px;border-top:1px solid #29495a}.two-factor-account h3{margin:0 0 8px}.two-factor-link{display:inline-block;color:#c2e7ef;background:#153041;border:1px solid #345366;border-radius:7px;padding:8px 13px;text-decoration:none;font-size:12px}.two-factor-page{max-width:900px!important}.two-factor-page form,.two-factor-login form{margin-top:18px}.two-factor-page input,.two-factor-login input{box-sizing:border-box;max-width:100%}.totp-qr{display:block;width:240px;height:240px;max-width:100%;object-fit:contain;margin:24px auto;background:#fff;padding:10px;border-radius:10px}.totp-secret{display:block;margin:12px 0;overflow-wrap:anywhere;font-size:16px;letter-spacing:1px}.recovery-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:24px 0}.recovery-codes code{font-size:14px;overflow-wrap:anywhere;user-select:all}.two-factor-login{max-width:560px!important;margin:8vh auto!important}.two-factor-page li{margin-bottom:8px}.two-factor-page details{margin:18px 0}.two-factor-page .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.two-factor-page a:not(.two-factor-link){color:#9ed8e8}@media(max-width:580px){.recovery-codes{grid-template-columns:1fr}.two-factor-login{margin-top:25px!important}}

html[data-theme="light"] .two-factor-account{border-color:#d7e1e9}

/* Match the existing account cards' description and action typography. */
.two-factor-account > p {
  font-size: 11px;
  line-height: 1.55;
  margin: 8px 0 14px;
}
.two-factor-account > .two-factor-link {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.two-factor-account .authenticator-icon{flex:0 0 28px;overflow:hidden}.two-factor-account .authenticator-icon img{display:block;width:26px;height:26px;object-fit:contain;border-radius:6px}

.two-factor-account .authenticator-icon svg{display:block;width:24px;height:24px;color:#85dce4}

/* Use the same label colors as the adjacent account action buttons. */
html body.novi-portal-page .two-factor-account > a.two-factor-link {
  color: #c2e7ef !important;
}
html[data-theme="light"] body.novi-portal-page .two-factor-account > a.two-factor-link {
  color: #203b4c !important;
}

/* Quiet labels on the two account-management actions. */
.two-factor-page .actions button:is([value="recovery"], [value="disable"]) {
  font-size: 12px !important;
  font-weight: 400;
}

/* Match the login recovery hint without changing typography. */
.two-factor-login a[href="/login/2fa/recovery"],.two-factor-login a[href="/login/2fa/recovery"]:visited{color:#63e6ff;}

/* All auxiliary account links receive an explicit portal color, including visited links. */
.two-factor-login a:not(.two-factor-link),.two-factor-login a:not(.two-factor-link):visited{color:#63e6ff}
html[data-theme="light"] :is(.two-factor-login,.two-factor-page) a:not(.two-factor-link){color:#245e70}
/* Keep the explicitly chosen light-blue sign-in recovery hint. */
html[data-theme="light"] .two-factor-login a[href="/login/2fa/recovery"]{color:#63e6ff}

/* Compact informational and recovery cards; sign-in/enrollment stays unchanged. */
.account-page.two-factor-login.compact-account-flow{max-width:470px!important;padding:22px 24px;margin:6vh auto!important}
.compact-account-flow .card{padding:20px}
html body.novi-portal-page .compact-account-flow h1{font-size:23px!important;line-height:1.3!important;margin:0 0 12px!important}
.compact-account-flow .card p{font-size:12px;line-height:1.65;margin:10px 0}
.compact-account-flow form{margin-top:12px}
.compact-account-flow .novi-support-contact{font-size:11px;margin-top:14px}
@media(max-width:500px){.account-page.two-factor-login.compact-account-flow{padding:16px;margin:25px auto!important}.compact-account-flow .card{padding:18px}}

/* Lift only the small captions above sign-in and confirmation cards. */
.two-factor-login > .kicker{transform:translateY(-10px)}