.account-security-entry { border-top: 1px solid #dbe3ee; padding-top: 14px; margin-top: 10px; text-align: left; }
dialog.account-security-dialog { --security-text: #21334c; --security-muted: #52627a; width: min(620px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 1px solid #cad5e4; border-radius: 20px; color: var(--security-text); background: #fff; box-shadow: 0 24px 80px #10203650; overflow: auto; overscroll-behavior: contain; }
dialog.account-security-dialog::backdrop { background: #132239ad; backdrop-filter: blur(3px); }
.account-security-dialog * { box-sizing: border-box; }
.security-content { min-width: 0; font: 400 16px/1.55 system-ui, sans-serif; color: var(--security-text); }
.security-header { display: flex; gap: 12px; align-items: start; justify-content: space-between; padding: 24px; border-bottom: 1px solid #dbe3ee; background: #f7f9fc; }
.security-header h2 { font-size: 23px; line-height: 1.3; font-weight: 750; margin: 0 0 7px; color: var(--security-text); }
.security-header p { font-size: 14px; color: var(--security-muted); margin: 0; overflow-wrap: anywhere; }
.security-close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid #bdcada; border-radius: 12px; background: #fff; color: #253955; font: 400 29px/1 system-ui, sans-serif; cursor: pointer; }
.security-body { padding: 24px; display: grid; gap: 18px; }
.security-body p { margin: 0; color: var(--security-text); }
.security-body form { display: grid; gap: 12px; min-width: 0; }
.security-body label { color: var(--security-text); font-weight: 650; font-size: 15px; }
.security-body input:not([type="checkbox"]), .security-body textarea { display: block; width: 100%; min-width: 0; padding: 12px; min-height: 48px; border: 1px solid #b7c6d8; border-radius: 10px; background: #fff; color: #172c48; font: 400 17px/1.4 system-ui, sans-serif; }
.security-body input[readonly], .security-body textarea[readonly] { background: #f5f8fc; font-family: ui-monospace, monospace; }
.security-body textarea { resize: vertical; overflow-wrap: anywhere; word-break: break-all; font-size: 14px; min-height: 230px; }
.security-body #security-secret { min-height: 72px; resize: none; }
.security-body .security-hint { font-size: 14px; color: var(--security-muted); }
.security-body .security-warning { border-left: 3px solid #bd8518; padding: 9px 12px; background: #fff7e6; color: #624818; font-size: 14px; }
.security-status { display: grid; gap: 6px; background: #f0f3f8; border: 1px solid #d6dfeb; padding: 16px; border-radius: 12px; }
.security-status strong { color: var(--security-text); font-size: 18px; }
.security-status span { color: var(--security-muted); }
.security-status.is-enabled { background: #eaf6f0; border-color: #b2d8c8; }
.security-status.is-enabled strong { color: #1c644c; }
.security-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.security-actions > .button { flex: 1 1 170px; }
.security-actions-stacked { display: grid; }
.security-accounts { display: grid; gap: 14px; min-width: 0; }
.security-account { display: grid; gap: 14px; border: 1px solid #d6dfeb; border-radius: 12px; padding: 16px; min-width: 0; overflow-wrap: anywhere; }
.security-account .security-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.security-account .security-actions > :last-child { grid-column: 1 / -1; }
.security-body .button { min-height: 46px; white-space: normal; font: 650 15px/1.4 system-ui, sans-serif; padding: 12px 16px; text-align: center; }
.security-body .button.secondary, .security-body .button.quiet { background: #fff; border: 1px solid #bac8da; color: #253955; }
.security-body .button.primary { background: #3d53ce; color: #fff; border: 1px solid #3d53ce; }
.security-body .button.security-danger { border-color: #d4aaaa; color: #9d3030; }
.security-body button:disabled { opacity: .58; cursor: not-allowed; }
.security-enrollment { display: grid; gap: 20px; justify-items: center; }
.security-qr { display: block; width: min(220px, 100%); height: auto; background: #fff; image-rendering: pixelated; border: 1px solid #dce3ed; border-radius: 10px; }
.security-key { display: grid; gap: 9px; min-width: 0; width: 100%; }
.security-key > .button { justify-self: start; }
.security-body .security-saved { display: flex; align-items: start; gap: 12px; line-height: 1.5; cursor: pointer; }
.security-saved input { width: 22px; height: 22px; flex: 0 0 22px; margin: 1px 0 0; accent-color: #3d53ce; }
.security-body .security-error { background: #fff0ef; border: 1px solid #e5b3ae; border-radius: 10px; padding: 12px; color: #96342c; overflow-wrap: anywhere; }
.security-body .security-message { background: #edf3fb; border-radius: 10px; padding: 12px; color: #2b4769; }
.security-body [hidden] { display: none !important; }
.security-footer { margin: 0; padding: 16px 24px 22px; border-top: 1px solid #dbe3ee; color: var(--security-muted); font-size: 13px; }
.account-security-dialog :focus-visible { outline: 3px solid #405cd8; outline-offset: 3px; }
.account-security-dialog h2:focus { outline: none; }
body.theme-classic .account-security-dialog { --security-text: #254b43; --security-muted: #46675e; border-color: #85b5a5; }
body.theme-classic .security-header { background: #e9f3ed; }
body.theme-classic .security-body .button.primary { background: #326856; border-color: #326856; }
.security-login .button + .button { margin-top: 12px; }
@media (max-width: 480px) {
  dialog.account-security-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .security-header, .security-body { padding: 18px; }
  .security-header h2 { font-size: 21px; }
  .security-footer { padding: 15px 18px 18px; }
  .security-actions { flex-direction: column; }
  .security-actions > .button { flex-basis: auto; }
  .security-account .security-actions { grid-template-columns: minmax(0, 1fr); }
}
