.account-security { --security-link: #1768c5; --security-border: #d6dee8; --security-muted: #58697c; --security-error: #a8293d; }
.account-security .security-panel { width: min(100%, 404px); }
.account-security.security-manage .security-panel { width: min(100%, 620px); }
.account-security .security-card { padding: 28px; border: 1px solid var(--security-border); border-radius: 18px; background: var(--login-card); box-shadow: 0 12px 36px #20314b08; overflow-wrap: anywhere; }
.account-security .security-navigation { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 2px 16px; font-size: 14px; }
.account-security .security-navigation form { margin: 0; }
.account-security .security-navigation button { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--security-link); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.account-security h1 { font-size: 24px; line-height: 1.2; margin: 0 0 14px; letter-spacing: -.025em; }
.account-security h2 { font-size: 17px; line-height: 1.35; margin: 0 0 8px; }
.account-security p { margin: 0 0 16px; }
.account-security a { color: var(--security-link); text-underline-offset: 3px; }
.account-security button, .account-security .security-primary, .account-security .security-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; max-width: 100%; padding: 10px 15px; border: 1px solid transparent; border-radius: 9px; background: var(--login-accent); color: #fff; font: inherit; font-weight: 600; line-height: 1.35; text-decoration: none; text-align: center; cursor: pointer; }
.account-security button:hover, .account-security .security-primary:hover { background: #115bac; }
.account-security .security-navigation button:hover { background: transparent; text-decoration-thickness: 2px; }
.account-security .security-secondary { background: transparent; color: var(--security-link); border-color: var(--security-border); }
.account-security .security-secondary:hover { background: #1768c510; }
.account-security .security-wide { width: 100%; }
.account-security button:disabled { opacity: .55; cursor: default; }
.account-security :is(button,a,summary,input,textarea):focus-visible { outline: 3px solid var(--security-link); outline-offset: 3px; }
.account-security :is(input,textarea,select):not([type=hidden]):not([type=checkbox]):not([type=radio]) { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--login-line); border-radius: 9px; background: var(--login-input); color: var(--login-text); font: inherit; font-size: 16px; }
.account-security textarea { resize: vertical; }
.account-security label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.account-security .security-field { margin-bottom: 20px; }
.account-security .security-check { display: flex; gap: 9px; align-items: baseline; margin-bottom: 20px; }
.account-security .security-check label { margin: 0; }
.account-security input[type=checkbox] { flex: 0 0 18px; width: 18px; height: 18px; accent-color: var(--login-accent); }
.account-security [hidden] { display: none !important; }
.account-security .security-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 18px; }
.account-security .security-fallback { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--security-border); }
.account-security summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 3px 0; }
.account-security .security-fallback[open] > summary { margin-bottom: 16px; }
.account-security .security-muted, .account-security .helptext { color: var(--security-muted); font-size: 14px; }
.account-security .helptext { display: block; margin-top: 7px; }
.account-security .errorlist, .account-security .security-error { color: var(--security-error); }
.account-security .errorlist { margin: 0 0 16px; padding-left: 20px; font-size: 14px; }
.account-security .security-status, .account-security .security-messages { margin-bottom: 20px; padding: 12px; border-radius: 9px; background: #1768c50e; font-size: 14px; }
.account-security .security-status[data-error=true] { color: var(--security-error); background: var(--login-error-bg); }
.account-security .security-messages p:last-child { margin-bottom: 0; }
.account-security .security-sections { display: grid; gap: 20px; margin: 24px 0; }
.account-security .security-section { border-top: 1px solid var(--security-border); padding-top: 20px; }
.account-security .security-section p:last-child { margin-bottom: 0; }
.account-security .security-admin-card { margin-top: 22px; }
.account-security .security-admin-activity { margin-top: 22px; }
.account-security .security-admin-activity > summary { display: flex; align-items: center; gap: 8px; padding: 2px 0 14px; font-size: 17px; list-style: none; }
.account-security .security-admin-activity > summary::-webkit-details-marker { display: none; }
.account-security .security-disclosure-chevron { flex: 0 0 16px; width: 16px; height: 16px; }
.account-security .security-admin-activity[open] .security-disclosure-chevron { transform: rotate(90deg); }
.account-security .security-admin-activity[open] > summary { margin-bottom: 0; }
.account-security .security-activity-count { margin-left: auto; color: var(--security-muted); font-size: 13px; font-weight: 500; }
.account-security .security-event-list { display: grid; max-height: 400px; overflow-y: auto; border: 1px solid var(--security-border); border-radius: 10px; }
.account-security .security-event-row { display: grid; grid-template-columns: 112px minmax(120px, .8fr) minmax(180px, 1.3fr); gap: 4px 12px; padding: 11px 12px; border-bottom: 1px solid var(--security-border); font-size: 14px; }
.account-security .security-event-row:last-child { border-bottom: 0; }
.account-security .security-event-row time { color: var(--security-muted); }
.account-security .security-event-row small { grid-column: 2 / -1; color: var(--security-muted); }
.account-security .security-admin-note { margin-top: 22px; }
.account-security .security-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #1768c510; font-size: 12px; margin: 0 0 10px; }
.account-security .security-danger { background: #b32d43; }
.account-security .security-danger:hover { background: #942238; }
.account-security .security-danger-link { color: var(--security-error); }
.account-security .security-codes { font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; }
.account-security .security-after { margin-top: 20px; }
.account-security .security-table-scroll { max-width: 100%; overflow-x: auto; }
.account-security table { width: 100%; border-collapse: collapse; font-size: 14px; }
.account-security th, .account-security td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--security-border); vertical-align: top; overflow-wrap: anywhere; }
html[data-theme=dark] .account-security { --security-link: #85bbff; --security-border: #3f5065; --security-muted: #b1bfd0; --security-error: #ffb3bd; }
html[data-theme=dark] .account-security :is(button,.security-primary):hover { background: #2475cd; }
html[data-theme=dark] .account-security .security-secondary:hover { background: #85bbff12; }
html[data-theme=dark] .account-security .security-danger:hover { background: #942238; }
@media(max-width:600px) { .account-security .security-event-row { grid-template-columns: 1fr; } .account-security .security-event-row small { grid-column: auto; } }
@media(max-width:359px) { .account-security .security-card { padding: 24px 20px; } }
/* Compact native disclosure; only presentation changes, never auth policy. */
.security-passkey-access > summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto 8px;list-style:none;cursor:pointer;border-radius:6px;color:#1768c6}
.security-passkey-access > summary::-webkit-details-marker{display:none}
.security-passkey-access > summary svg{width:22px;height:22px}
.security-passkey-access[open] > summary{background:#dceafb}
html[data-theme="dark"] .security-passkey-access > summary{color:#98c7ff}
html[data-theme="dark"] .security-passkey-access[open] > summary{background:#243e58}