.security-page { max-width:620px; margin:60px auto; }
.security-page [hidden] { display:none !important; }
.security-card { padding:28px; border:3px solid var(--border); box-shadow:var(--shadow); background:var(--surface); }
.security-card h1 { font-family:'Kalam',cursive; font-size:2.2rem; }
.security-card p { margin:12px 0 20px; }
.security-card label, .passkey-controls label { display:block; font-weight:700; margin:14px 0 8px; }
.security-input { width:100%; padding:14px 16px; font:inherit; color:var(--text-primary); background:var(--surface); border:3px solid var(--border); box-shadow:3px 3px 0 var(--border); }
.security-input:focus { outline:2px solid var(--accent-blue); outline-offset:3px; }
.security-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; }
.security-actions .btn { font-size:1.1rem; padding:12px 18px; }
.security-message { white-space:pre-wrap; overflow-wrap:anywhere; margin:16px 0; }
.security-message.is-error { color:var(--accent-orange); font-weight:700; }
.passkey-list { list-style:none; margin:16px 0; }
.passkey-list li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:2px solid var(--border); }
.passkey-list li span { min-width:0; overflow-wrap:anywhere; }
.passkey-list .btn { font-size:1rem; padding:8px 14px; }
.passkey-controls { max-width:460px; }
@media(max-width:600px) { .security-page { margin:32px auto; } .security-card { padding:18px; } .security-actions .btn { width:100%; } }