.account-security {
  --security-panel: #191d20; --security-field: #101213; --security-button: #22262c;
  --security-border: #34383f; --security-text: #f3f3f5; --security-muted: #bcc0ca;
  --security-purple: #b6a0e8; --security-gold: #dec17d;
  color: var(--security-text); font: 400 14px/1.5 Inter, system-ui, sans-serif; letter-spacing: 0;
}
.account-security *, .account-security *::before, .account-security *::after { box-sizing: border-box; }
.account-security [hidden] { display: none !important; }
.account-security h2 { font-size: 21px; font-weight: 600; margin: 14px 0 8px; letter-spacing: 0; }
.account-security p { margin: 0; color: var(--security-muted); }
.account-security .security-kicker { color: var(--security-purple); display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.account-security .security-top, .account-security .security-detail { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.account-security .security-detail { margin-top: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--security-border); }
.account-security .security-detail div { min-width: 0; overflow-wrap: anywhere; }
.account-security.security-username-row dt { letter-spacing: 0; }
.account-security.security-username-row .security-username-value { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.account-security.security-username-row .security-username-value > span { min-width: 0; overflow-wrap: anywhere; }
.account-security.security-username-row .security-button { flex-shrink: 0; max-width: 100%; }
.account-security .security-small { font-size: 12px; color: var(--security-muted); }
.account-security .security-on { color: var(--security-gold); }
.account-security .security-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.account-security .security-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--security-border); border-radius: 6px; background: var(--security-button); color: var(--security-text); font: inherit; cursor: pointer; text-align: center; text-decoration: none; }
.account-security .security-button:hover { background: #2b3037; }
.account-security .security-button:disabled { opacity: .55; cursor: not-allowed; }
.account-security .security-primary { border-color: #70628d; }
.account-security .security-primary:hover { border-color: var(--security-purple); }
.account-security .security-button svg { flex-shrink: 0; }
.account-security .security-full { width: 100%; }
.account-security .security-foot { margin-top: 18px; font-size: 12px; }
.account-security .security-close { width: 44px; flex-shrink: 0; padding: 10px; background: transparent; }
.account-security.security-dialog { background: var(--security-panel); border: 1px solid var(--security-border); border-radius: 8px; width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 22px; overflow-y: auto; }
.account-security.security-dialog::backdrop { background: rgb(0 0 0 / .72); }
.account-security label { display: block; margin: 18px 0 6px; }
.account-security input:not([type="checkbox"]) { width: 100%; min-width: 0; min-height: 46px; border: 1px solid var(--security-border); border-radius: 6px; background: var(--security-field); color: var(--security-text); font: 400 16px/1.5 Inter, system-ui, sans-serif; padding: 10px 12px; }
.account-security .security-password { position: relative; }
.account-security .security-password input { padding-right: 58px; }
.account-security .security-reveal { position: absolute; top: 1px; bottom: 1px; right: 1px; width: 48px; padding: 0; border: 0; border-radius: 0 5px 5px 0; background: transparent; font-size: 21px; }
.account-security .security-message { margin-top: 14px; color: #f2b2ae; overflow-wrap: anywhere; }
.account-security .security-message:empty { display: none; }
.account-security .security-qr { display: block; width: 200px; height: 200px; max-width: 100%; object-fit: contain; margin: 20px auto; background: white; }
.account-security .security-key { display: block; overflow-wrap: anywhere; margin: 10px 0; user-select: all; }
.account-security .security-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; gap: 10px; margin-top: 20px; list-style: none; font-family: monospace; }
.account-security .security-check { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.account-security .security-check input { width: 18px; height: 18px; accent-color: var(--security-purple); }
.account-security .security-check label { margin: 0; }
.account-security .security-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--security-purple); text-decoration: underline; }
.account-security .security-google { margin-top: 18px; min-height: 44px; }
.security-standalone { width: min(520px, calc(100% - 24px)); margin: 40px auto; }
.security-standalone > .account-security { padding: 22px; margin-bottom: 20px; background: #191d20; border: 1px solid #34383f; border-radius: 8px; }
@media (max-width: 380px) { .account-security.security-dialog { padding: 18px; } .account-security .security-actions { flex-direction: column; } }