:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#253342;background:#f5f6f8;--auth-focus:#2563eb;--auth-border:#d8dee7}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f5f6f8;font-size:14px;font-weight:400;line-height:1.5;color:#253342;padding:40px 16px}a.auth-brand{display:block;width:max-content;max-width:100%;margin:0 auto 22px;color:#16867b;font-size:28px;font-weight:750;text-decoration:none;letter-spacing:-.6px}main.auth-card{box-sizing:border-box;width:430px;max-width:100%;margin:0 auto;background:#fff;border:1px solid var(--auth-border);border-radius:12px;padding:30px 34px;box-shadow:0 2px 8px #192b4508}h1{font-size:25px;line-height:1.25;letter-spacing:-.5px;margin:0 0 18px;font-weight:700}h2{font-size:19px}p{font-size:14px;line-height:1.5;color:#5d6878;margin:0 0 20px}label{display:grid;gap:7px;font-size:15px;font-weight:700;margin:0 0 18px}input:not([type=checkbox]),select,textarea{box-sizing:border-box;width:100%;min-width:0;height:44px;border:1px solid var(--auth-border);border-radius:6px;padding:10px 12px;background:#fff;color:#253342;font:400 14px system-ui}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--auth-focus);outline-offset:2px}button{box-sizing:border-box;min-height:44px;width:100%;padding:11px 16px;border:1px solid #1f4e79;border-radius:6px;background:#1f4e79;color:white;font:600 14px system-ui;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button+button{margin-top:12px}a{color:#1f4e79;text-underline-offset:2px}#error{color:#b42318;font-size:14px;margin-top:16px}#error:empty{display:none}footer,small{display:block;margin-top:22px;text-align:center;font-size:14px}.check,label:has(input[type=checkbox]){display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;margin:18px 0}input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:2px 0}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;background:#f5f6f8;border:1px solid var(--auth-border);padding:12px;border-radius:6px}img{max-width:100%;height:auto}#activation-qr,#qr{display:block;width:224px;max-width:100%;margin:0 auto 20px}details{margin-bottom:18px}summary{cursor:pointer;color:#1f4e79;font-size:14px}#activation-secret,#manual-key{overflow-wrap:anywhere}.help{font-size:12px}section[data-security-scan]{border-top:1px solid #e7ebf0;margin-top:24px;padding-top:18px}section[data-security-scan] p{font-size:12px;margin-bottom:12px}[hidden]{display:none!important}@media(max-width:480px){body{padding:24px 16px}.auth-brand{margin-bottom:18px!important}main.auth-card{padding:26px 24px;border-radius:10px}}

button.secondary{background:transparent;color:#1f4e79;border-color:#d8dee7;margin-bottom:16px}
.auth-card #codes{font-size:13px;background:#f5f6f8;padding:12px;border:1px solid var(--auth-border);border-radius:6px}.auth-card #use-recovery{background:transparent;color:#1f4e79;border-color:#d8dee7}.auth-card #recovery input[type=checkbox]{width:18px;height:18px;flex:0 0 18px}

.security-status-heading{display:flex;align-items:center;gap:8px;font-weight:700;color:#425466}.security-status-heading svg{flex:0 0 22px}

/* Keep authentication content centered across every stage. */
.auth-card{text-align:center}
.auth-card label,.auth-card input:not([type=checkbox]),.auth-card select,.auth-card textarea,.auth-card pre{text-align:center}
.auth-card .check,.auth-card label:has(input[type=checkbox]),.auth-card .security-status-heading{justify-content:center}
/* Email verification actions cross the form boundary, so sibling button spacing alone is insufficient. */
#pending-email-form + #check-email{margin-top:12px}
#logout + #message{margin-top:16px}