.account-module { color-scheme: dark; color: var(--account-text); font: inherit; min-width: 0; }
.account-module *, .account-module *::before, .account-module *::after { box-sizing: border-box; }
.account-module ::selection { background: var(--account-primary); color: #fff; }
.account-module a { text-underline-offset: .2em; }
.account-module :is(button, input, select) { font: inherit; }
.account-module :is(button, a, input, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--account-accent); outline-offset: 3px; }
.account-module button, .account-module summary { cursor: pointer; }
.account-module [hidden] { display: none !important; }
.account-content { width: 100%; max-width: 1200px; margin: auto; }
.account-module h1 { margin: 0 0 8px; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: normal; }
.account-module h2 { margin: 0 0 16px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: normal; }
.account-module h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.account-module p { margin: 0 0 16px; max-width: 72ch; line-height: 1.6; }
.account-heading { margin-bottom: 24px; }
.account-heading .account-note { margin-bottom: 0; }
.account-note, .account-meta { color: var(--account-muted); font-size: 14px; }
.account-meta { overflow-wrap: anywhere; }
.account-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: start; gap: 24px; }
.account-navigation { position: sticky; top: 90px; min-width: 0; }
.account-navigation > summary { padding: 12px 16px; border: 1px solid var(--account-border); border-radius: 8px; font-size: 14px; font-weight: 600; }
.account-nav { display: grid; gap: 4px; }
.account-nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.account-nav a:hover { background: var(--account-soft); text-decoration: none; }
.account-nav a[aria-current] { color: var(--account-accent); background: var(--account-selected); border-color: var(--account-border); }
.account-sections, .account-section { min-width: 0; }
.account-section { scroll-margin-top: 90px; }
.account-section-heading { margin-bottom: 16px; }
.account-section-fields { display: grid; gap: 16px; min-width: 0; padding: 0; margin: 0; border: 0; }
.account-section > .account-block + .account-block { margin-top: 16px; }
.account-block { padding: 24px; border: 1px solid var(--account-border); border-radius: 16px; background: var(--account-surface); }
.account-block-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.account-block-heading h3 { margin: 0; }
.account-block > :last-child { margin-bottom: 0; }
.account-form { max-width: 600px; margin: 0; }
.account-form .form-group, .account-field { margin: 0 0 20px; }
.account-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0; }
.account-module .account-field label, .account-module .control-label, .account-label { position: static; inset: auto; transform: none; transition: none; pointer-events: auto; display: block; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--account-muted); }
.account-module .account-field:focus-within label { color: var(--account-accent); }
.account-module .account-field.has-error label, .account-form .help-block, .account-form .error-summary { color: var(--account-danger); }
.account-form .help-block, .account-form .error-summary { margin: 0; font-size: 14px; line-height: 1.5; }
.account-form .help-block:empty { display: none; }
.account-module .account-input { width: 100%; min-height: 48px; height: 48px; padding: 10px 12px; margin: 0; border: 1px solid var(--account-border); border-radius: 8px; background: var(--account-bg); color: var(--account-text); caret-color: var(--account-accent); font-size: 14px; line-height: 1.5; }
.account-module .account-input::placeholder { color: var(--account-muted) !important; opacity: 1 !important; font-style: normal !important; }
.account-module .account-input.form-control { background-image: none !important; }
.account-module .account-input:is(:hover, :focus) { background-color: var(--account-bg) !important; }
.account-module .account-input:focus { transform: none !important; border-color: var(--account-accent) !important; box-shadow: 0 0 0 3px var(--account-selected) !important; }
.account-module .account-input[aria-invalid="true"], .account-module .has-error .account-input { border-color: var(--account-danger) !important; }
.account-input[readonly] { color: var(--account-muted); }
.account-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 16px; }
.account-form-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
.account-module .account-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 10px 16px; margin: 0; border: 1px solid transparent; border-radius: 8px; background: var(--account-primary); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; text-transform: none; text-decoration: none; white-space: normal; overflow-wrap: anywhere; box-shadow: none; transform: none; transition: background-color .15s, border-color .15s; }
.account-module .account-button:is(:hover, :active) { background: var(--account-primary-hover); color: #fff; text-decoration: none; box-shadow: none; transform: none; }
.account-module .account-button--secondary { background: transparent; border-color: var(--account-border); color: var(--account-text); }
.account-module .account-button--secondary:is(:hover, :active) { background: var(--account-soft); color: var(--account-text); }
.account-module .account-button--quiet { background: transparent; color: var(--account-muted); padding-inline: 12px; }
.account-module .account-button--quiet:is(:hover, :active) { background: var(--account-soft); color: var(--account-text); }
.account-module .account-button--danger { background: transparent; border-color: var(--account-danger); color: var(--account-danger); }
.account-module .account-button--danger:is(:hover, :active), .account-module .account-button--destructive { background: var(--account-danger-fill); border-color: var(--account-danger-fill); color: #fff; }
.account-module .account-button--destructive:is(:hover, :active) { background: #991b1b; border-color: #991b1b; }
.account-module button:disabled, .account-module fieldset:disabled button { opacity: .55; cursor: not-allowed; }
.account-module [aria-busy="true"] button:disabled { cursor: wait; }
.account-feedback { margin: 12px 0 0; font-size: 14px; color: var(--account-muted); overflow-wrap: anywhere; }
.account-feedback:empty { display: none; }
.account-feedback[data-state="success"] { color: var(--account-success); }
.account-feedback[data-state="warning"] { color: var(--account-warning); }
.account-feedback[data-state="error"], .account-feedback[data-error="true"] { color: var(--account-danger); }
.account-alert { color: var(--account-danger); padding: 16px; border: 1px solid currentColor; border-radius: 8px; margin-bottom: 24px; font-size: 14px; overflow-wrap: anywhere; }
.account-alert--neutral { color: var(--account-muted); }
.account-alert--success { color: var(--account-success); }
.account-alert--warning { color: var(--account-warning); }
.account-list { list-style: none; padding: 0; margin: 16px 0; }
.account-list > li { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--account-border); }
.account-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.account-list .account-form { flex-shrink: 0; }
.account-list > li > div { min-width: 0; overflow-wrap: anywhere; }
.account-list p { margin-bottom: 4px; }
.account-meta-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--account-muted); font-size: 14px; }
.account-history > li { align-items: baseline; }
.account-history .account-time { flex-shrink: 0; }
.account-badge { display: inline-block; padding: 3px 8px; color: var(--account-success); background: var(--account-bg); border: 1px solid var(--account-border); border-radius: 5px; font-size: 12px; font-weight: 500; vertical-align: middle; }
.account-badge--neutral { color: var(--account-muted); }
.account-facts { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 20px; margin: 0 0 24px; }
.account-facts dt { color: var(--account-muted); font-size: 14px; font-weight: 500; }
.account-facts dd { margin: 0; overflow-wrap: anywhere; }
.account-check { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; }
.account-module .account-check input { width: 20px; height: 20px; margin: 2px 0 0 !important; accent-color: var(--account-primary); flex: 0 0 20px; }
.account-check label { margin: 0; cursor: pointer; font-size: 14px; line-height: 1.5; }
.account-details > summary { width: fit-content; max-width: 100%; min-height: 44px; padding: 10px 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
.account-details[open] > summary { margin-bottom: 12px; }
.account-details + .account-form { margin-top: 16px; }
.account-secret { background: var(--account-bg); color: var(--account-text); border: 1px solid var(--account-border); padding: 16px; border-radius: 8px; font: 500 16px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; font-variant-numeric: tabular-nums; }
.account-qr { display: block; width: 220px; max-width: 100%; height: auto; background: white; padding: 12px; margin: 16px 0; }
.account-step { margin: 20px 0; }
.account-step h3 { font-size: 16px; }
.account-swal-container.swal2-container { z-index: 20000; padding: 16px; background: rgb(0 0 0 / 64%); animation: account-backdrop-enter 180ms ease-out both; }
.account-swal-container:has(.swal2-hide) { animation: account-backdrop-exit 120ms ease-in both; }
.account-swal {
    --account-bg: #222;
    --account-surface: #252c3c;
    --account-dialog-surface: #252c3c;
    --account-text: #fff;
    --account-muted: #a1a1aa;
    --account-border: #3f3f46;
    --account-accent: #60a5fa;
    --account-hover: #9ec5fe;
    --account-primary: #2563eb;
    --account-primary-hover: #1d4ed8;
    --account-danger: #f87171;
    --account-danger-fill: #b91c1c;
    --account-soft: rgb(255 255 255 / 5%);
    --account-selected: rgb(59 130 246 / 15%);
    --account-success: #34d399;
    --account-warning: #fbbf24;
}
.account-swal.swal2-popup {
    width: 480px !important;
    max-width: 100%;
    max-height: calc(100dvh - 32px);
    padding: 24px;
    overflow: auto;
    border: 1px solid var(--account-border) !important;
    border-radius: 16px !important;
    background: var(--account-dialog-surface) !important;
    backdrop-filter: none !important;
    color: var(--account-text) !important;
    font: inherit;
    text-align: left;
    box-shadow: 0 20px 60px rgb(0 0 0 / 25%) !important;
}
.account-swal.swal2-popup:has(.account-dialog-content) { width: 560px !important; }
.account-swal.swal2-show { animation: account-modal-enter 180ms cubic-bezier(.16, 1, .3, 1) both; }
.account-swal.swal2-hide { animation: account-modal-exit 120ms ease-in both; }
.account-swal.swal2-popup .swal2-header { flex-direction: row; align-items: center; gap: 16px; }
.account-swal.swal2-popup .swal2-title { flex: 1; min-width: 0; margin: 0; padding: 0; color: var(--account-text) !important; font-size: 20px; font-weight: 600; line-height: 1.4; text-align: left; overflow-wrap: anywhere; }
.account-swal.swal2-popup .swal2-icon { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; border-width: 2px; border-color: var(--account-warning) !important; color: var(--account-warning); }
.account-swal.swal2-popup .swal2-icon .swal2-icon-text { font-size: 26px; font-weight: 500; line-height: 36px; }
.account-swal.swal2-popup .swal2-icon, .account-swal.swal2-popup .swal2-icon * { animation: none !important; }
.account-swal.swal2-popup .swal2-content { margin: 16px 0 0; padding: 0; color: var(--account-muted) !important; font-size: 14px; font-weight: 400; line-height: 1.6; text-align: left; overflow-wrap: anywhere; }
.account-swal.swal2-popup #swal2-content { text-align: left; }
.account-swal.swal2-popup:has(.account-dialog-content) .swal2-content { margin-top: 0; }
.account-dialog-content { color: var(--account-text); }
.account-dialog-content h2 { margin-bottom: 12px; font-size: 20px; }
.account-dialog-content > :last-child { margin-bottom: 0; }
.account-swal.swal2-popup .swal2-actions { width: 100%; justify-content: flex-end; align-items: stretch; flex-wrap: nowrap; gap: 12px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--account-border); }
.account-swal.swal2-popup .swal2-confirm, .account-swal.swal2-popup .swal2-cancel { min-height: 44px; max-width: 100%; margin: 0; padding: 10px 16px; border: 1px solid var(--account-border) !important; border-radius: 8px !important; background: transparent !important; color: var(--account-text) !important; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; text-transform: none; white-space: normal; overflow-wrap: anywhere; box-shadow: none !important; transform: none !important; transition: background-color 140ms, border-color 140ms !important; }
.account-swal.swal2-popup .swal2-confirm { border-color: var(--account-danger-fill) !important; background: var(--account-danger-fill) !important; color: #fff !important; }
.account-swal.swal2-popup .swal2-cancel { flex-shrink: 0; }
.account-swal.swal2-popup .swal2-confirm:is(:hover, :active) { border-color: #991b1b !important; background: #991b1b !important; }
.account-swal.swal2-popup .swal2-cancel:is(:hover, :active) { background: var(--account-soft) !important; }
.account-swal.swal2-popup :is(.swal2-confirm, .swal2-cancel):focus { outline: 2px solid var(--account-accent); outline-offset: 3px; }
.account-module :is([data-password-fields], [data-stepup-password-fields], #account-totp-setup):not([hidden]) { animation: account-field-enter 140ms ease-out; }
@keyframes account-modal-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes account-modal-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(.99); } }
@keyframes account-backdrop-enter { from { background-color: transparent; } to { background-color: rgb(0 0 0 / 64%); } }
@keyframes account-backdrop-exit { from { background-color: rgb(0 0 0 / 64%); } to { background-color: transparent; } }
@keyframes account-field-enter { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.account-card { max-width: 480px; margin: 0 auto; border: 1px solid var(--account-border); border-radius: 16px; background: var(--account-surface); }
.account-enrollment-card { max-width: 600px; }
.account-card .account-form { max-width: none; }
.account-method + .account-method { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--account-border); }
.account-method > summary, .account-operation > summary { padding: 12px 0; }
.account-manual-key > summary { min-height: 44px; padding: 10px 0; font-size: 14px; font-weight: 600; }
.account-manual-key[open] > summary { margin-bottom: 12px; }
.account-method > summary h2, .account-operation > summary h2 { display: inline; margin: 0; font-size: 18px; }
.account-method > summary .account-note, .account-operation > summary .account-note { display: block; margin: 8px 0 0; font-size: 14px; color: var(--account-muted); }
.account-method[open] > summary, .account-operation[open] > summary { margin-bottom: 16px; }
.account-auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--account-muted); font-size: 14px; }
.account-auth-divider::before, .account-auth-divider::after { content: ''; height: 1px; background: var(--account-border); flex: 1; }
.account-auth-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--account-border); font-size: 14px; line-height: 1.5; }
.account-auth-footer--split { justify-content: space-between; }
.account-auth-footer > a { display: inline-flex; align-items: center; min-height: 44px; }
.account-auth-alternative { margin-top: 12px; text-align: center; }
.account-module .account-auth-link { min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--account-accent); font-size: 14px; }
.account-module .account-auth-link:hover { color: var(--account-hover); text-decoration: underline; }
.account-auth-captcha { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.account-auth-captcha .help-block { align-self: stretch; }
.account-auth-captcha:has([data-local-captcha]):not(:has(.help-block:not(:empty))) { display: none; }
.account-wide { width: 100%; }
.account-skip { position: fixed; top: -100px; left: 16px; z-index: 1100; padding: 12px 18px; background: var(--account-surface); }
.account-skip:focus { top: 12px; }
.account-time { font-variant-numeric: tabular-nums; }
.account-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1200px) { .account-navigation > summary { display: none; } }
@media (max-width: 1199px) {
    .account-layout { display: block; }
    .account-navigation { position: static; margin-bottom: 16px; }
    .account-navigation[open] > summary { margin-bottom: 8px; }
    .account-nav { padding: 8px; border: 1px solid var(--account-border); border-radius: 8px; background: var(--account-surface); }
}
@media (max-width: 600px) {
    .account-block, .account-swal.swal2-popup { padding: 20px; }
    .account-list > li { flex-direction: column; gap: 12px; }
    .account-history .account-time { white-space: normal; }
    .account-facts { grid-template-columns: 1fr; gap: 4px; }
    .account-facts dd { margin-bottom: 12px; }
    .account-facts dd:last-child { margin-bottom: 0; }
    .account-actions > .account-button, .account-actions > .account-form { flex: 1 1 auto; }
    .account-actions > .account-form .account-button { width: 100%; }
    .account-auth-footer--split { justify-content: center; }
}
@media (max-width: 374px) { .account-auth-captcha > .cf-turnstile { zoom: .8; } }
@media (max-width: 360px) { .account-swal.swal2-popup .swal2-actions { align-items: stretch; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .account-module, .account-module *, .account-module *::before, .account-module *::after, .account-swal-container { transition: none !important; animation: none !important; } }