/* Keep Django's rendered widgets and validation messages within the account card. */
.account-ui :where(input:not([type="checkbox"]):not([type="hidden"]), select, textarea) {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: #fff;
    color: #1f2937;
    font-size: 0.875rem;
    line-height: 1.5rem;
}
.account-ui textarea { min-height: 8rem; resize: vertical; }
.account-ui input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: #2563eb; flex-shrink: 0; }
.account-ui :is(input, select, textarea, button, a):focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.account-ui [aria-invalid="true"] { border-color: #dc2626; }
.account-ui button:disabled { cursor: wait; opacity: 0.6; }
.account-primary, .account-secondary, .account-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-align: center;
    cursor: pointer;
}
.account-primary { background: #2563eb; color: #fff; }
.account-primary:hover { background: #1d4ed8; }
.account-secondary { border-color: #d1d5db; background: #fff; color: #374151; }
.account-secondary:hover { background: #f3f4f6; }
.account-danger { background: #dc2626; color: #fff; }
.account-danger:hover { background: #b91c1c; }
.account-link { color: #2563eb; }
.account-link:hover { text-decoration: underline; }
.account-error, .account-success { border: 1px solid; border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; overflow-wrap: anywhere; }
.account-error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.account-success { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.account-help { overflow-wrap: anywhere; }
.account-help ul { list-style: disc; padding-left: 1.25rem; }
.account-help li + li { margin-top: 0.25rem; }
.account-help a { color: #2563eb; text-decoration: underline; }
.account-code { font-family: ui-monospace, monospace; }
.account-ui .totp-qr-code img { image-rendering: pixelated; }
.account-ui .select2-container { max-width: 100%; width: 100% !important; }
.account-ui .select2-selection--single { height: auto; min-height: 2.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; }
.account-ui .select2-selection--single .select2-selection__rendered { padding: 0.625rem 2rem 0.625rem 0.75rem; color: #1f2937; line-height: 1.5rem; }
.account-ui .select2-selection--single .select2-selection__arrow { height: 100%; }
.dark .account-ui :where(input:not([type="checkbox"]):not([type="hidden"]), select, textarea),
.dark .account-ui .select2-selection--single { border-color: #404040; background: #171717; color: #e5e5e5; }
.dark .account-ui [aria-invalid="true"] { border-color: #f87171; }
.dark .account-ui .select2-selection--single .select2-selection__rendered { color: #e5e5e5; }
.dark .account-secondary { border-color: #525252; background: #262626; color: #e5e5e5; }
.dark .account-secondary:hover { background: #404040; }
.dark .account-link, .dark .account-help a { color: #60a5fa; }
.dark .account-error { border-color: #991b1b; background: #450a0a; color: #fca5a5; }
.dark .account-success { border-color: #065f46; background: #022c22; color: #6ee7b7; }
.account-select-dropdown { border-color: #d1d5db; color: #1f2937; font-size: 0.875rem; }
.account-select-dropdown .select2-search__field { border: 1px solid #d1d5db; border-radius: 0.25rem; padding: 0.375rem; }
.dark .account-select-dropdown { border-color: #404040; background: #171717; color: #e5e5e5; }
.dark .account-select-dropdown .select2-search__field { border-color: #525252; background: #262626; color: #e5e5e5; }
.dark .account-select-dropdown .select2-results__option[aria-selected="true"] { background: #404040; }
.account-select-dropdown .select2-results__option--highlighted[aria-selected] { background: #2563eb; color: #fff; }