.mfa-page{max-width:560px;margin:44px auto 70px}
.mfa-page h1,.mfa-setup h1{font-size:clamp(2rem,4vw,3rem);line-height:1.14;letter-spacing:-.025em}
.mfa-page p,.mfa-setup p{line-height:1.65}
.mfa-page label,.mfa-setup label{font-weight:650;display:block;margin-bottom:8px}
.mfa-page input,.mfa-setup input{width:100%;max-width:100%;box-sizing:border-box}
.mfa-page input[name=code],.mfa-setup input[name=code]{font-size:1.2rem;letter-spacing:.07em}
.mfa-setup{max-width:1050px;margin:24px auto 64px}
.mfa-setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-top:26px}
.mfa-setup-grid>.panel{min-width:0;margin:0}
.mfa-setup h2{font-size:1.4rem;margin:0 0 16px}
.mfa-setup .badge.good{color:#21621f;background:#edf7ec}
.mfa-qr{display:block;width:280px;height:280px;max-width:100%;margin:18px auto;background:#fff;padding:10px;border:1px solid var(--line);border-radius:8px;box-sizing:border-box}
.mfa-account{text-align:center;overflow-wrap:anywhere;font-size:.95rem;color:var(--muted)}
.mfa-key{font:1rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;margin:8px 0 12px}
.mfa-help{margin:24px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mfa-help summary{color:var(--navy);font-weight:650;cursor:pointer}
.mfa-help p:last-child{margin-bottom:0}
.mfa-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:22px}
.mfa-actions .button{white-space:normal;text-align:center}
.mfa-actions .text-button{align-self:flex-start;text-decoration:underline;padding:8px 0}
.mfa-codes-page{max-width:650px}
.mfa-codes{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;list-style:none;padding:24px;background:var(--subtle);border:1px solid var(--line);border-radius:12px;margin:24px 0}
.mfa-codes li{text-align:center;white-space:nowrap}
.mfa-codes code{font-size:.98rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.mfa-events{margin-top:26px}
.mfa-events ul{list-style:none;padding:0;margin:0}
.mfa-events li{padding:12px 0;border-bottom:1px solid var(--line)}
.mfa-events li:last-child{border:0}
.mfa-events time{display:block;font-size:.85rem;color:var(--muted);margin-top:4px}
.mfa-page .errorlist,.mfa-setup .errorlist{color:#a31d26;padding-left:20px;line-height:1.5}
@media(max-width:720px){
 .mfa-setup-grid{grid-template-columns:1fr;gap:18px}
 .mfa-setup,.mfa-page{margin:18px auto 36px}
 .mfa-codes{grid-template-columns:1fr;padding:22px 12px}
 .mfa-page .button{max-width:100%;white-space:normal;text-align:center}
}
@media print{
 body:has(.mfa-codes-page) .site-header,body:has(.mfa-codes-page) .site-footer,body:has(.mfa-codes-page) .workspace-nav,body:has(.mfa-codes-page) button{display:none}
 .mfa-codes{grid-template-columns:1fr 1fr}
}

/* Account email addresses must wrap on narrow phone screens. */
.mfa-setup p{overflow-wrap:anywhere}