[hidden]{display:none!important}.security-main{max-width:980px;width:100%;padding-bottom:60px}.security-card{background:var(--panel,#141a25);border:1px solid var(--border,#2b3444);border-radius:18px;padding:28px;margin:22px 0;line-height:1.6}.security-card h2{margin:0;font-size:22px}.security-card h3{margin-top:26px}.security-card p,.security-footnote{color:var(--muted,#aab4c5)}.card-heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.card-heading p{margin:5px 0}.security-icon{font-size:32px;color:#ffd744}.status-pill{margin-left:auto;border:1px solid #697489;border-radius:30px;padding:4px 12px;font-size:13px}.security-main button,.challenge button{background:#ffd744;color:#121826;border:0;border-radius:9px;padding:12px 18px;font:inherit;font-weight:650;cursor:pointer}.security-main .secondary{background:transparent;color:inherit;border:1px solid #697489}.security-main button:disabled,.challenge button:disabled{opacity:.5;cursor:wait}.security-main label,.challenge label{display:block;margin:18px 0 8px}.security-main input,.challenge input{display:block;width:min(100%,360px);box-sizing:border-box;padding:13px;border:1px solid #697489;border-radius:9px;background:#0b1220;color:#fff;font:inherit;margin-bottom:16px}.actions{display:flex;gap:12px;flex-wrap:wrap}#qr{background:white;border-radius:12px;max-width:100%;height:auto}#secret{overflow-wrap:anywhere}#message:not(:empty){padding:14px 18px;border:1px solid #697489;border-radius:9px}#codes{line-height:1.9;white-space:pre-wrap;font-size:16px}hr{border:0;border-top:1px solid #384255;margin:24px 0}.challenge{max-width:460px;margin:10vh auto;padding:32px;background:#141a25;border:1px solid #384255;border-radius:18px;color:#f4f7fc;line-height:1.6}.challenge-page{background:#090f1b;color:#f4f7fc;font-family:system-ui;padding:16px}.challenge a{color:#ffd744}.security-footnote{font-size:13px}@media(max-width:600px){.security-card{padding:20px}.status-pill{margin-left:0}.security-main{padding:20px}}

/* Security settings inherit the same palette as Workspace and Themes. */
.security-main{color:var(--text)}
.security-card{background:var(--card);border-color:var(--line)}
.security-icon{color:var(--gold-text,var(--gold))}
.security-main .status-pill{color:var(--soft);border-color:var(--line);background:var(--panel-alt,var(--card))}
.security-main button{background:var(--gold);color:var(--gold-ink,#171100)}
.security-main .secondary{background:transparent;color:var(--gold-text,var(--gold));border-color:var(--gold-dim,var(--line))}
.security-main label{color:var(--soft)}
.security-main input{background:var(--panel-alt,var(--card));color:var(--text);border-color:var(--line)}
.security-main input::placeholder{color:var(--muted)}
.security-main input:focus-visible,.security-main button:focus-visible,.security-main summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.security-main #message:not(:empty){background:var(--gold-tint,color-mix(in srgb,var(--gold) 8%,transparent));color:var(--soft);border-color:var(--line)}
.security-main hr{border-color:var(--line)}
.security-main #secret,.security-main #codes{color:var(--text)}
.security-main summary{color:var(--gold-text,var(--gold));cursor:pointer}
.security-page .nav a:hover,.security-page .nav a.active,.security-page .nav button:hover{background:var(--gold-tint,color-mix(in srgb,var(--gold) 8%,transparent));color:var(--gold-text,var(--gold))}
.security-page .avatar{background:var(--gold-tint,color-mix(in srgb,var(--gold) 8%,transparent));color:var(--gold-text,var(--gold));border-color:var(--gold-dim,var(--line))}
/* Keep authenticator QR codes black on white so scanning stays reliable. */
.security-main #qr{background:#fff}