/* ════════════════════════════════════════════════════════════════
   css/twofa.css — mandatory 2FA gate screen
   ════════════════════════════════════════════════════════════════ */
#twofa-screen { position: fixed; inset: 0; z-index: 4000; background: var(--bg, #f7f6f2); overflow-y: auto; }
.twofa-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.twofa-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--border, #e7e5df); border-radius: 16px; padding: 2rem; box-shadow: 0 10px 40px rgba(0,0,0,.08); text-align: center; }
.twofa-title { font-family: 'EB Garamond', serif; font-size: 1.5rem; margin-bottom: .5rem; color: var(--text, #1a1a1a); }
.twofa-sub { font-size: .9rem; color: var(--text-muted, #777); line-height: 1.5; margin-bottom: 1.4rem; }
.twofa-qr { display: flex; justify-content: center; margin: 0 auto 1rem; width: 200px; height: 200px; background: #fff; border: 1px solid var(--border, #eee); border-radius: 10px; padding: 8px; }
.twofa-qr svg, .twofa-qr-img { width: 100%; height: 100%; }
.twofa-secret { font-size: .78rem; color: var(--text-muted, #999); margin-bottom: 1.2rem; line-height: 1.6; }
.twofa-secret code { display: inline-block; margin-top: .3rem; background: var(--surface-2, #f3f3f0); padding: .3rem .6rem; border-radius: 6px; font-size: .8rem; letter-spacing: .05em; word-break: break-all; }
.twofa-input { width: 100%; text-align: center; font-size: 1.5rem; letter-spacing: .4em; padding: .7rem; border: 1px solid var(--border, #ddd); border-radius: 10px; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.twofa-input:focus { outline: none; border-color: var(--gold, #a67c00); }
.twofa-btn { width: 100%; }
.twofa-err { color: var(--danger, #c0392b); font-size: .82rem; min-height: 1.1em; margin-top: .7rem; }
.twofa-links { display: flex; gap: 1.2rem; justify-content: center; margin-top: 1.1rem; }
.twofa-signout { display: inline-block; font-size: .82rem; color: var(--text-muted, #999); cursor: pointer; text-decoration: underline; }
.twofa-input-text { font-size: .95rem; letter-spacing: normal; text-align: left; }
.twofa-help-msg { width: 100%; min-height: 90px; border: 1px solid var(--border, #ddd); border-radius: 10px; padding: .7rem; font: inherit; font-size: .9rem; margin-bottom: 1rem; resize: vertical; }
.twofa-help-msg:focus { outline: none; border-color: var(--gold, #a67c00); }