/* Only the marked login/register surfaces participate. Wizard visibility stays with its existing scripts. */
.account-appearance {
    --aa-primary: var(--sa-primary, #2d545e);
    --aa-on-primary: var(--sa-on-primary, #fff);
    --aa-surface: var(--sa-surface, #fff);
    --aa-background: var(--sa-background, #f3f7f6);
    --aa-text: var(--sa-text, #263d38);
    --aa-muted: color-mix(in srgb, var(--aa-text) 78%, var(--aa-surface));
    --aa-border: color-mix(in srgb, var(--aa-text) 24%, var(--aa-surface));
    --aa-subtle: color-mix(in srgb, var(--aa-primary) 7%, var(--aa-surface));
    --aa-focus: color-mix(in srgb, var(--aa-primary) 22%, transparent);
    --aa-radius: var(--sa-radius, 12px);
    --wizard-primary: var(--aa-primary);
    --wizard-primary-light: var(--aa-primary);
    --wizard-primary-dark: var(--aa-primary);
    --wizard-secondary: var(--sa-secondary, var(--aa-primary));
    --wizard-accent: var(--aa-primary);
    --wizard-bg: var(--aa-background);
    --wizard-card-bg: var(--aa-surface);
    --wizard-text: var(--aa-text);
    --wizard-text-muted: var(--aa-muted);
    --wizard-border: var(--aa-border);
    --wizard-input-bg: var(--aa-subtle);
    --wizard-radius-sm: var(--aa-radius);
    --wizard-radius-md: var(--aa-radius);
    --wizard-radius-lg: var(--aa-radius);
    --wizard-radius-xl: var(--aa-radius);
    --wizard-shadow-glow: 0 0 24px var(--aa-focus);
    color: var(--aa-text);
    font-size: 16px;
    line-height: 1.6;
}
.account-appearance:is(.login-wrapper, .register-wrapper) { background: var(--aa-background); }
.account-appearance:is(.login-card, .register-card, .modal-content, .register-modal-dialog) {
    background: var(--aa-surface);
    border-color: var(--aa-border);
    border-radius: var(--aa-radius) !important;
}
.account-appearance :is(.login-header h4, .register-header h2, .step-title, .success-title-modern, .register-modal-title) {
    color: var(--aa-text);
    background: none;
    -webkit-text-fill-color: currentColor;
    line-height: 1.4;
}
.account-appearance :is(.login-header h4, .register-header h2, .success-title-modern) { font-size: clamp(22px, 2.5vw, 30px); }
.account-appearance :is(.step-title, .register-modal-title) { font-size: 20px; }
.account-appearance :is(.login-header .subtitle, .register-header p, .step-description, .success-subtitle-modern,
    .register-modal-text, .register-footer p, .login-footer .register-link, .verification-status-text,
    .form-hint, .info-card-hint, .avatar-scroll-hint, .resend-section, .tip-card p) {
    color: var(--aa-muted);
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.account-appearance :is(.input-group-modern label, .form-group-modern label, .info-card-label,
    .form-label, .section-label, .info-label, .card-label, .tip-card strong) {
    color: var(--aa-text);
    font-size: 15px;
    line-height: 1.5;
}
.account-appearance :is(.char-counter, .countdown-text) { color: var(--aa-muted); font-size: 13px; }
.account-appearance :is(.login-footer, .register-footer, .wizard-navigation, .modal-footer, .section-label) { border-color: var(--aa-border); }
.account-appearance :is(.login-footer-links a, .register-link a, .register-footer a, .hint-panel a, .hint-toggle-btn,
    .btn-resend, .input-group-modern .toggle-password:hover, .info-value, .success-email) {
    color: var(--aa-primary);
}
.account-appearance :is(.login-footer-links a, .hint-toggle-btn, .btn-resend) { font-size: 14px; }
.account-appearance :is(.hint-panel, .wizard-steps, .email-section, .verification-status) {
    background: var(--aa-subtle);
    border-color: var(--aa-border);
    border-radius: var(--aa-radius);
    color: var(--aa-text);
}
.account-appearance .hint-panel { font-size: 14px; overflow-wrap: anywhere; }
.account-appearance .hint-panel code { background: var(--aa-surface); color: var(--aa-text); font-size: 14px; white-space: normal; }
.account-appearance .email-section::before,
.account-appearance .wizard-step.completed::after { background: var(--aa-primary); }
.account-appearance .step-label { font-size: 12px; line-height: 1.4; color: var(--aa-muted); }
.account-appearance .step-indicator { font-size: 15px; }
.account-appearance .wizard-step:is(.active, .completed) .step-indicator {
    background: var(--aa-primary);
    color: var(--aa-on-primary);
    border-color: var(--aa-primary);
    box-shadow: 0 3px 12px var(--aa-focus);
}
.account-appearance .wizard-step:is(.active, .completed) .step-label { color: var(--aa-primary); }

/* Keep native input types, errors and the existing show/hide behavior intact. */
.account-appearance :is(.input-group-modern, .form-group-modern, .info-card-content, .modal-body)
    :is(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea) {
    min-width: 0;
    min-height: 46px;
    font-size: 16px;
    color: var(--aa-text);
    background-color: var(--aa-surface);
    border-color: var(--aa-border);
    border-radius: var(--aa-radius);
}
.account-appearance :is(.input-group-modern, .form-group-modern, .info-card-content, .modal-body)
    :is(input, select, textarea):focus {
    border-color: var(--aa-primary);
    background-color: var(--aa-surface);
    box-shadow: 0 0 0 3px var(--aa-focus);
}
.account-appearance :is(input, textarea)::placeholder { color: var(--aa-muted); opacity: 1; }
.account-appearance #id_email[readonly] { color: var(--aa-text); background-color: var(--aa-subtle) !important; }
.account-appearance :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--aa-primary); }
.account-appearance :is(button, a):focus-visible { outline: 2px solid var(--aa-primary); outline-offset: 3px; }
.account-appearance .has-error :is(input, select, textarea),
.account-appearance :is(input, select, textarea).is-invalid {
    border-color: var(--wizard-danger, #dc3545);
    background-color: color-mix(in srgb, var(--wizard-danger, #dc3545) 6%, var(--aa-surface));
}
.account-appearance :is(.form-error, .alert, .email-warning, .email-warning strong) { font-size: 14px; line-height: 1.6; }

/* Solid primary surfaces use the renderer's contrasting foreground, including bright themes. */
.account-appearance :is(.btn-login, .btn-send-code, .btn-verify-code, .btn-wizard-next, .btn-wizard-submit,
    .btn-primary-modern, .btn-modal-confirm, .modal-footer .btn-modal-confirm),
.account-appearance :is(.btn-login, .btn-send-code, .btn-verify-code, .btn-wizard-next, .btn-wizard-submit,
    .btn-primary-modern, .btn-modal-confirm, .modal-footer .btn-modal-confirm):hover {
    color: var(--aa-on-primary);
    background: var(--aa-primary);
    border-color: var(--aa-primary);
    border-radius: var(--aa-radius);
    font-size: 16px;
    line-height: 1.5;
    min-height: 44px;
    box-shadow: 0 4px 12px var(--aa-focus);
}
.account-appearance :is(.btn-wizard-prev, .btn-secondary-modern, .btn-modal-cancel, .modal-footer .btn-modal-cancel),
.account-appearance :is(.btn-wizard-prev, .btn-secondary-modern, .btn-modal-cancel, .modal-footer .btn-modal-cancel):hover {
    color: var(--aa-text);
    background: var(--aa-surface);
    border-color: var(--aa-border);
    border-radius: var(--aa-radius);
    font-size: 16px;
    line-height: 1.5;
    min-height: 44px;
    box-shadow: none;
}
.account-appearance :is(.btn-login, .btn-send-code, .btn-verify-code, .btn-wizard, .btn-resend, .btn-modal-confirm):disabled {
    color: var(--aa-muted);
    background: var(--aa-subtle);
    border-color: var(--aa-border);
    box-shadow: none;
    opacity: 1;
}
/* Keep the send-code button distinct from its tinted panel even before an email is entered. */
.account-appearance .btn-send-code { border: 1px solid var(--aa-primary); }
.account-appearance .btn-send-code:disabled { background: var(--aa-surface); }

/* General selections follow the site palette; gender cards keep their blue/pink identity. */
.account-appearance :is(.id-type-btn, .radio-card-label, .info-card, .info-card .info-card-icon) {
    background: var(--aa-surface);
    color: var(--aa-text);
    border-color: var(--aa-border);
    border-radius: var(--aa-radius);
}
.account-appearance .id-type-btn:hover,
.account-appearance .radio-card:hover .radio-card-label,
.account-appearance .info-card:hover,
.account-appearance .info-card:hover .info-card-icon {
    background: var(--aa-subtle);
    border-color: var(--aa-primary);
    box-shadow: 0 3px 12px var(--aa-focus);
}
.account-appearance .gender-card-modern[data-value="Male"] {
    --gender-accent: #91bde0;
    --gender-icon: #315f82;
    --gender-icon-surface: #e0effa;
}
.account-appearance .gender-card-modern[data-value="Female"] {
    --gender-accent: #e5aac2;
    --gender-icon: #8c4262;
    --gender-icon-surface: #fbe5ee;
}
.account-appearance .gender-card-modern[data-value] {
    --gender-ink: color-mix(in srgb, var(--gender-icon) 30%, var(--aa-text));
    background: color-mix(in srgb, var(--gender-accent) 8%, var(--aa-surface));
    border-color: color-mix(in srgb, var(--gender-accent) 65%, var(--aa-surface));
    border-radius: var(--aa-radius);
    color: var(--aa-text);
}
.account-appearance .gender-card-modern[data-value]:hover {
    background: color-mix(in srgb, var(--gender-accent) 12%, var(--aa-surface));
    border-color: var(--gender-ink);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--gender-accent) 25%, transparent);
}
.account-appearance .gender-card-modern[data-value].selected {
    background: color-mix(in srgb, var(--gender-accent) 18%, var(--aa-surface));
    border-color: var(--gender-ink);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gender-accent) 25%, transparent);
}
.account-appearance .gender-card-modern[data-value] .card-icon-wrapper,
.account-appearance .gender-card-modern[data-value].selected .card-icon-wrapper {
    background: var(--gender-icon-surface);
    color: var(--gender-icon);
    box-shadow: none;
}
.account-appearance .gender-card-modern[data-value] .card-icon { color: var(--gender-icon); }
.account-appearance .gender-card-modern[data-value] .card-icon-wrapper::after {
    background: var(--gender-icon-surface);
    color: var(--gender-icon);
}
.account-appearance .gender-card-modern[data-value] :is(.card-label, .card-check),
.account-appearance .gender-card-modern[data-value].selected :is(.card-label, .card-check) { color: var(--gender-ink); }
.account-appearance .avatar-item-modern.selected { border-color: var(--aa-primary); box-shadow: 0 0 0 3px var(--aa-focus); }
.account-appearance .avatar-grid-modern::-webkit-scrollbar-thumb { background: var(--aa-primary); border-color: var(--aa-border); }
.account-appearance .avatar-grid-modern::-webkit-scrollbar-track { background: var(--aa-subtle); }
.account-appearance .id-type-btn { font-size: 15px; }
.account-appearance .id-type-btn.active,
.account-appearance .radio-card input[type="radio"]:checked + .radio-card-label {
    color: var(--aa-on-primary);
    background: var(--aa-primary);
    border-color: var(--aa-primary);
    box-shadow: 0 3px 12px var(--aa-focus);
}
.account-appearance .id-type-btn.active :is(i, svg) { stroke: currentColor; }
.account-appearance .radio-card-label { font-size: 15px; }
.account-appearance .radio-card input[type="radio"]:focus + .radio-card-label { outline-color: var(--aa-primary); }
.account-appearance .radio-card input[type="radio"]:disabled + .radio-card-label { background: var(--aa-subtle); color: var(--aa-muted); }
.account-appearance .info-card .info-card-icon :is(i, svg),
.account-appearance .info-card .info-card-hint :is(i, svg) { stroke: var(--aa-primary); }

/* Legacy enhanced selects still receive the same palette if the widget is enabled. */
.account-appearance .bootstrap-select :is(.dropdown-toggle, .dropdown-menu, .bs-searchbox input) {
    color: var(--aa-text) !important;
    background: var(--aa-surface) !important;
    border-color: var(--aa-border) !important;
    border-radius: var(--aa-radius) !important;
    font-size: 16px !important;
}
.account-appearance .bootstrap-select :is(.dropdown-toggle, .bs-searchbox input):focus,
.account-appearance .bootstrap-select.show .dropdown-toggle { border-color: var(--aa-primary) !important; box-shadow: 0 0 0 3px var(--aa-focus) !important; }
.account-appearance .info-card .bootstrap-select .dropdown-toggle:hover { background: var(--aa-surface) !important; border-color: var(--aa-primary) !important; }
.account-appearance .bootstrap-select .dropdown-menu li a { color: var(--aa-text) !important; font-size: 15px !important; }
.account-appearance .bootstrap-select .dropdown-menu li a:hover { color: var(--aa-text) !important; background: var(--aa-subtle) !important; }
.account-appearance .bootstrap-select .dropdown-menu li:is(.selected, .active, .selected.active) a,
.account-appearance .bootstrap-select .dropdown-menu li.selected a .check-mark {
    background: var(--aa-primary) !important;
    color: var(--aa-on-primary) !important;
}
.account-appearance .bootstrap-select .dropdown-toggle::after { border-top-color: var(--aa-text) !important; }

/* Registration's searchable township picker keeps its dropdown inside the marked form. */
.account-appearance .ts-wrapper.rbt-modern-select-ts :is(.ts-control, .ts-dropdown) {
    color: var(--aa-text) !important;
    background: var(--aa-surface) !important;
    border-color: var(--aa-border) !important;
    border-radius: var(--aa-radius) !important;
    font-size: 16px !important;
}
.account-appearance .ts-wrapper.rbt-modern-select-ts .ts-control:hover,
.account-appearance .ts-wrapper.rbt-modern-select-ts.focus .ts-control {
    border-color: var(--aa-primary) !important;
    box-shadow: 0 0 0 3px var(--aa-focus) !important;
}
.account-appearance .ts-wrapper.rbt-modern-select-ts .ts-control::after { border-top-color: var(--aa-primary); }
.account-appearance .ts-wrapper.rbt-modern-select-ts .ts-dropdown {
    border-color: var(--aa-primary) !important;
    box-shadow: 0 8px 24px var(--aa-focus) !important;
}
.account-appearance .ts-wrapper.rbt-modern-select-ts .dropdown-input-wrap {
    background: var(--aa-subtle) !important;
    border-color: var(--aa-border) !important;
}
.account-appearance .ts-wrapper.rbt-modern-select-ts :is(input, .ts-item, .item) {
    color: var(--aa-text) !important;
    font-size: 16px !important;
}
.account-appearance .ts-wrapper.rbt-modern-select-ts .dropdown-input {
    background: var(--aa-surface) !important;
    border-color: var(--aa-border) !important;
    border-radius: var(--aa-radius) !important;
}
.account-appearance .ts-wrapper.rbt-modern-select-ts .dropdown-input:focus {
    border-color: var(--aa-primary) !important;
    box-shadow: 0 0 0 2px var(--aa-focus) !important;
}
.account-appearance .ts-wrapper.rbt-modern-select-ts input::placeholder,
.account-appearance .ts-wrapper.rbt-modern-select-ts .no-results { color: var(--aa-muted) !important; }
.account-appearance .ts-wrapper.rbt-modern-select-ts .ts-dropdown .option {
    background: var(--aa-surface) !important;
    color: var(--aa-text) !important;
    font-size: 15px !important;
}
.account-appearance .ts-wrapper.rbt-modern-select-ts .ts-dropdown .option:is(:hover, .active) {
    background: var(--aa-subtle) !important;
    color: var(--aa-text) !important;
}
.account-appearance .ts-wrapper.rbt-modern-select-ts .ts-dropdown .option.selected {
    background: var(--aa-primary) !important;
    color: var(--aa-on-primary) !important;
}
.account-appearance .ts-wrapper.rbt-modern-select-ts .ts-dropdown-content::-webkit-scrollbar-track { background: var(--aa-subtle); }
.account-appearance .ts-wrapper.rbt-modern-select-ts .ts-dropdown-content::-webkit-scrollbar-thumb { background: var(--aa-primary); }
.account-appearance .ts-wrapper.rbt-modern-select-ts.disabled .ts-control {
    background: var(--aa-subtle) !important;
    color: var(--aa-muted) !important;
    border-color: var(--aa-border) !important;
}

/* Recovery dialogs and the success card share the form palette, retaining semantic alerts. */
.account-appearance .modal-header,
.account-appearance .card-header-gradient {
    background: var(--aa-primary);
    color: var(--aa-on-primary);
    font-size: 16px;
}
.account-appearance .modal-header :is(.modal-title, .modal-title i) { color: var(--aa-on-primary) !important; }
.account-appearance .modal-header .btn-close {
    background-image: none;
    filter: none;
    color: var(--aa-on-primary);
    opacity: 1;
    min-width: 32px;
    min-height: 32px;
}
.account-appearance .modal-header .btn-close::before { content: "×"; font-size: 28px; line-height: 1; }
.account-appearance :is(.modal-footer, .modal-body) { background: var(--aa-surface); }
.account-appearance .modal-body .input-group-text { background: var(--aa-surface) !important; color: var(--aa-text); }
.account-appearance .modal-body .input-group-text .text-muted { color: var(--aa-muted) !important; }
.account-appearance .town-table-header { background: var(--aa-subtle) !important; border-color: var(--aa-border) !important; }
.account-appearance .table {
    --bs-table-bg: var(--aa-surface);
    --bs-table-color: var(--aa-text);
    --bs-table-hover-bg: var(--aa-subtle);
    --bs-table-hover-color: var(--aa-text);
    color: var(--aa-text);
}
.account-appearance .town-table-header th,
.account-appearance .town-table-body td { color: var(--aa-text) !important; border-color: var(--aa-border) !important; font-size: 14px !important; }
.account-appearance .town-table-body { border-color: var(--aa-border) !important; }
.account-appearance .town-table-body .table tbody tr:hover { background-color: var(--aa-subtle) !important; }
.account-appearance .modal-body .input-group { border-color: var(--aa-border) !important; }
.account-appearance .modal-body .input-group:focus-within { border-color: var(--aa-primary) !important; box-shadow: 0 0 0 3px var(--aa-focus) !important; }
.account-appearance .info-row:hover { background: var(--aa-subtle); }
.account-appearance .info-value { font-size: 16px; overflow-wrap: anywhere; }
.account-appearance .tip-email { border-left-color: var(--aa-primary); }
.account-appearance .tip-email :is(i, svg) { color: var(--aa-primary); }
.account-appearance .confetti::before { background: var(--aa-primary); }
.account-appearance .confetti::after { background: var(--sa-secondary, var(--aa-primary)); }

@media (max-width: 575px) {
    .account-appearance .wizard-steps { padding-inline: 8px; gap: 4px; }
    .account-appearance .wizard-step { flex: 1; min-width: 0; }
    .account-appearance .wizard-step:not(:last-child) { margin-right: 0; }
    .account-appearance .wizard-step:not(:last-child)::after { width: calc(100% - 28px); left: calc(50% + 16px); }
    .account-appearance .step-label { white-space: normal; overflow-wrap: anywhere; }
    .account-appearance .register-modal-actions .btn-wizard { min-width: 0; flex: 1; padding-inline: 8px; white-space: normal; }
    .account-appearance .hint-toggle-btn { margin-bottom: 4px; }
    .account-appearance .success-container-modern { padding-inline: 0; }
}