/* Shared tokens. Both the application and isolated preview use these rules. */
:root {
    --ui-alert-success-bg: var(--ui-light-alert-success-bg);
    --ui-alert-success-text: var(--ui-light-alert-success-text);
    --ui-alert-success-border: var(--ui-light-alert-success-border);
    --ui-alert-danger-bg: var(--ui-light-alert-danger-bg);
    --ui-alert-danger-text: var(--ui-light-alert-danger-text);
    --ui-alert-danger-border: var(--ui-light-alert-danger-border);
    --ui-alert-info-bg: var(--ui-light-alert-info-bg);
    --ui-alert-info-text: var(--ui-light-alert-info-text);
    --ui-alert-info-border: var(--ui-light-alert-info-border);
    --ui-alert-warning-bg: var(--ui-light-alert-warning-bg);
    --ui-alert-warning-text: var(--ui-light-alert-warning-text);
    --ui-alert-warning-border: var(--ui-light-alert-warning-border);
    --ui-alert-neutral-bg: var(--ui-light-alert-neutral-bg);
    --ui-alert-neutral-text: var(--ui-light-alert-neutral-text);
    --ui-alert-neutral-border: var(--ui-light-alert-neutral-border);
    --ui-background: var(--ui-light-background);
    --ui-surface: var(--ui-light-surface);
    --ui-text: var(--ui-light-text);
    --ui-muted: var(--ui-light-muted);
    --ui-label: var(--ui-light-label);
    --ui-border: var(--ui-light-border);
    --ui-sidebar-bg: var(--ui-light-sidebar-bg);
    --ui-sidebar-text: var(--ui-light-sidebar-text);
    --ui-nav-active-bg: var(--ui-light-nav-active-bg);
    --ui-nav-active-text: var(--ui-light-nav-active-text);
    --ui-header-bg: var(--ui-light-header-bg);
    --ui-link: var(--ui-light-link);
    --ui-button-bg: var(--ui-light-button-bg);
    --ui-button-text: var(--ui-light-button-text);
    --ui-button-hover: var(--ui-light-button-hover);
    --ui-secondary-bg: var(--ui-light-secondary-bg);
    --ui-secondary-text: var(--ui-light-secondary-text);
    --ui-secondary-hover: var(--ui-light-secondary-hover);
    --ui-disabled-bg: var(--ui-light-disabled-bg);
    --ui-disabled-text: var(--ui-light-disabled-text);
    --ui-input-bg: var(--ui-light-input-bg);
    --ui-input-text: var(--ui-light-input-text);
    --ui-input-border: var(--ui-light-input-border);
    --ui-placeholder: var(--ui-light-placeholder);
    --ui-focus: var(--ui-light-focus);
    --ui-select-bg: var(--ui-light-select-bg);
    --ui-select-text: var(--ui-light-select-text);
    --ui-toggle-off: var(--ui-light-toggle-off);
    --ui-toggle-on: var(--ui-light-toggle-on);
    --ui-toggle-knob: var(--ui-light-toggle-knob);
    --ui-option: var(--ui-light-option);
    --ui-table-bg: var(--ui-light-table-bg);
    --ui-table-text: var(--ui-light-table-text);
    --ui-table-head-bg: var(--ui-light-table-head-bg);
    --ui-table-head-text: var(--ui-light-table-head-text);
    --ui-table-stripe: var(--ui-light-table-stripe);
    --ui-table-hover: var(--ui-light-table-hover);
    --ui-table-border: var(--ui-light-table-border);
    --ui-success-bg: var(--ui-light-success-bg);
    --ui-success-text: var(--ui-light-success-text);
    --ui-success-border: var(--ui-light-success-border);
    --ui-warning-bg: var(--ui-light-warning-bg);
    --ui-warning-text: var(--ui-light-warning-text);
    --ui-warning-border: var(--ui-light-warning-border);
    --ui-danger-bg: var(--ui-light-danger-bg);
    --ui-danger-text: var(--ui-light-danger-text);
    --ui-danger-border: var(--ui-light-danger-border);
    --ui-info-bg: var(--ui-light-info-bg);
    --ui-info-text: var(--ui-light-info-text);
    --ui-info-border: var(--ui-light-info-border);
    --ui-neutral-bg: var(--ui-light-neutral-bg);
    --ui-neutral-text: var(--ui-light-neutral-text);
    --ui-neutral-border: var(--ui-light-neutral-border);
    --ui-modal-bg: var(--ui-light-modal-bg);
    --ui-modal-text: var(--ui-light-modal-text);
    --ui-modal-border: var(--ui-light-modal-border);
    --ui-overlay: var(--ui-light-overlay);
}
:root.dark {
    --ui-alert-success-bg: var(--ui-dark-alert-success-bg);
    --ui-alert-success-text: var(--ui-dark-alert-success-text);
    --ui-alert-success-border: var(--ui-dark-alert-success-border);
    --ui-alert-danger-bg: var(--ui-dark-alert-danger-bg);
    --ui-alert-danger-text: var(--ui-dark-alert-danger-text);
    --ui-alert-danger-border: var(--ui-dark-alert-danger-border);
    --ui-alert-info-bg: var(--ui-dark-alert-info-bg);
    --ui-alert-info-text: var(--ui-dark-alert-info-text);
    --ui-alert-info-border: var(--ui-dark-alert-info-border);
    --ui-alert-warning-bg: var(--ui-dark-alert-warning-bg);
    --ui-alert-warning-text: var(--ui-dark-alert-warning-text);
    --ui-alert-warning-border: var(--ui-dark-alert-warning-border);
    --ui-alert-neutral-bg: var(--ui-dark-alert-neutral-bg);
    --ui-alert-neutral-text: var(--ui-dark-alert-neutral-text);
    --ui-alert-neutral-border: var(--ui-dark-alert-neutral-border);
    --ui-background: var(--ui-dark-background);
    --ui-surface: var(--ui-dark-surface);
    --ui-text: var(--ui-dark-text);
    --ui-muted: var(--ui-dark-muted);
    --ui-label: var(--ui-dark-label);
    --ui-border: var(--ui-dark-border);
    --ui-sidebar-bg: var(--ui-dark-sidebar-bg);
    --ui-sidebar-text: var(--ui-dark-sidebar-text);
    --ui-nav-active-bg: var(--ui-dark-nav-active-bg);
    --ui-nav-active-text: var(--ui-dark-nav-active-text);
    --ui-header-bg: var(--ui-dark-header-bg);
    --ui-link: var(--ui-dark-link);
    --ui-button-bg: var(--ui-dark-button-bg);
    --ui-button-text: var(--ui-dark-button-text);
    --ui-button-hover: var(--ui-dark-button-hover);
    --ui-secondary-bg: var(--ui-dark-secondary-bg);
    --ui-secondary-text: var(--ui-dark-secondary-text);
    --ui-secondary-hover: var(--ui-dark-secondary-hover);
    --ui-disabled-bg: var(--ui-dark-disabled-bg);
    --ui-disabled-text: var(--ui-dark-disabled-text);
    --ui-input-bg: var(--ui-dark-input-bg);
    --ui-input-text: var(--ui-dark-input-text);
    --ui-input-border: var(--ui-dark-input-border);
    --ui-placeholder: var(--ui-dark-placeholder);
    --ui-focus: var(--ui-dark-focus);
    --ui-select-bg: var(--ui-dark-select-bg);
    --ui-select-text: var(--ui-dark-select-text);
    --ui-toggle-off: var(--ui-dark-toggle-off);
    --ui-toggle-on: var(--ui-dark-toggle-on);
    --ui-toggle-knob: var(--ui-dark-toggle-knob);
    --ui-option: var(--ui-dark-option);
    --ui-table-bg: var(--ui-dark-table-bg);
    --ui-table-text: var(--ui-dark-table-text);
    --ui-table-head-bg: var(--ui-dark-table-head-bg);
    --ui-table-head-text: var(--ui-dark-table-head-text);
    --ui-table-stripe: var(--ui-dark-table-stripe);
    --ui-table-hover: var(--ui-dark-table-hover);
    --ui-table-border: var(--ui-dark-table-border);
    --ui-success-bg: var(--ui-dark-success-bg);
    --ui-success-text: var(--ui-dark-success-text);
    --ui-success-border: var(--ui-dark-success-border);
    --ui-warning-bg: var(--ui-dark-warning-bg);
    --ui-warning-text: var(--ui-dark-warning-text);
    --ui-warning-border: var(--ui-dark-warning-border);
    --ui-danger-bg: var(--ui-dark-danger-bg);
    --ui-danger-text: var(--ui-dark-danger-text);
    --ui-danger-border: var(--ui-dark-danger-border);
    --ui-info-bg: var(--ui-dark-info-bg);
    --ui-info-text: var(--ui-dark-info-text);
    --ui-info-border: var(--ui-dark-info-border);
    --ui-neutral-bg: var(--ui-dark-neutral-bg);
    --ui-neutral-text: var(--ui-dark-neutral-text);
    --ui-neutral-border: var(--ui-dark-neutral-border);
    --ui-modal-bg: var(--ui-dark-modal-bg);
    --ui-modal-text: var(--ui-dark-modal-text);
    --ui-modal-border: var(--ui-dark-modal-border);
    --ui-overlay: var(--ui-dark-overlay);
}
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) {
    --asy-status-pending-bg: var(--ui-warning-bg);
    --asy-status-pending-text: var(--ui-warning-text);
    --asy-status-pending-border: var(--ui-warning-border);
    --asy-status-process-bg: var(--ui-info-bg);
    --asy-status-process-text: var(--ui-info-text);
    --asy-status-process-border: var(--ui-info-border);
    --asy-status-created-bg: var(--ui-success-bg);
    --asy-status-created-text: var(--ui-success-text);
    --asy-status-created-border: var(--ui-success-border);
    --asy-status-sent-bg: var(--ui-info-bg);
    --asy-status-sent-text: var(--ui-info-text);
    --asy-status-sent-border: var(--ui-info-border);
    --asy-status-accepted-bg: var(--ui-warning-bg);
    --asy-status-accepted-text: var(--ui-warning-text);
    --asy-status-accepted-border: var(--ui-warning-border);
    --asy-status-response-bg: var(--ui-info-bg);
    --asy-status-response-text: var(--ui-info-text);
    --asy-status-response-border: var(--ui-info-border);
    --asy-status-rejected-bg: var(--ui-danger-bg);
    --asy-status-rejected-text: var(--ui-danger-text);
    --asy-status-rejected-border: var(--ui-danger-border);
    --asy-status-active-bg: var(--ui-success-bg);
    --asy-status-active-text: var(--ui-success-text);
    --asy-status-active-border: var(--ui-success-border);
    --asy-status-inactive-bg: var(--ui-danger-bg);
    --asy-status-inactive-text: var(--ui-danger-text);
    --asy-status-inactive-border: var(--ui-danger-border);
    --asy-status-neutral-bg: var(--ui-neutral-bg);
    --asy-status-neutral-text: var(--ui-neutral-text);
    --asy-status-neutral-border: var(--ui-neutral-border);
}

/* Bridge the existing Tailwind components to the design tokens. */
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) { background: var(--ui-background) !important; color: var(--ui-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.bg-white, .panel, [class~="dark:bg-black"], [class~="dark:bg-[#121212]"], [class~="dark:bg-[#1c1c1c]"]):not(button):not(a):not(input) { background-color: var(--ui-surface) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.bg-lightwhite, .bg-gray-50, .bg-gray-100) { background-color: var(--ui-background) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.text-black, [class~="dark:text-white"], .text-gray-900, .text-slate-900):not(.btn):not(.badge-status):not(button) { color: var(--ui-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is([class*="text-black/"], [class*="dark:text-white/"], .text-gray-500, .text-gray-600, .text-slate-500):not(.badge-status):not(button) { color: var(--ui-muted) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is([class*="border-black/"], [class*="border-white/"], .border-gray-200, .border-gray-300, .border-slate-200) { border-color: var(--ui-border) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body.app-shell .sidebar { background: var(--ui-sidebar-bg) !important; color: var(--ui-sidebar-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body.app-shell .sidebar :is(.nav-item > a, .nav-item > button, .sub-menu a) { color: var(--ui-sidebar-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body.app-shell .sidebar :is(a.active, a:hover, button.active, button:hover) { background: var(--ui-nav-active-bg) !important; color: var(--ui-nav-active-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body.app-shell .sidebar .sub-menu a.active::before { background: var(--ui-nav-active-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) header { background-color: var(--ui-header-bg) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(a.text-primary, a.text-blue-600, .ui-link) { color: var(--ui-link) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) label { color: var(--ui-label) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.form-input, .form-select, .form-multiselect, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], input[type="url"], textarea, select) {
    background-color: var(--ui-input-bg) !important; color: var(--ui-input-text) !important; border: 1px solid var(--ui-input-border) !important; border-radius: 8px; padding: 8px 10px;
}
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(select, select option) { background-color: var(--ui-select-bg) !important; color: var(--ui-select-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(input, textarea)::placeholder { color: var(--ui-placeholder) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(input, textarea, select, button, a):focus-visible { outline: 2px solid var(--ui-focus) !important; outline-offset: 2px; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(input, textarea, select):focus { border-color: var(--ui-focus) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ui-option); }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.form-checkbox, .form-radio):checked { background-color: var(--ui-option) !important; border-color: var(--ui-option) !important; color: var(--ui-option) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) .togglebutton .band { background: var(--ui-toggle-off) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) .togglebutton input:checked ~ .band { background: var(--ui-toggle-on) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) .togglebutton .dot { background: var(--ui-toggle-knob) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.btn, .ui-button, .asy-action-icon) { background: var(--ui-secondary-bg) !important; color: var(--ui-secondary-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.btn, .ui-button, .asy-action-icon):hover { background: var(--ui-secondary-hover) !important; color: var(--ui-secondary-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.btn-primary, .ui-button-primary, button.bg-black, a.bg-black, button.bg-primary, a.bg-primary, button.bg-blue-600) { background: var(--ui-button-bg) !important; color: var(--ui-button-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.btn-primary, .ui-button-primary, button.bg-black, a.bg-black, button.bg-primary, a.bg-primary, button.bg-blue-600):hover { background: var(--ui-button-hover) !important; color: var(--ui-button-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.btn-danger, .asy-action-icon--danger, button.bg-red-600) { background: var(--ui-danger-bg) !important; color: var(--ui-danger-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(button:disabled, .btn.disabled) { background: var(--ui-disabled-bg) !important; color: var(--ui-disabled-text) !important; cursor: not-allowed; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) table { background: var(--ui-table-bg) !important; color: var(--ui-table-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) table :is(thead, thead tr, th) { background: var(--ui-table-head-bg) !important; color: var(--ui-table-head-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) table :is(td, th, tr) { border-color: var(--ui-table-border) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) table td { color: var(--ui-table-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) table.table-striped tbody tr:nth-child(odd) { background: var(--ui-table-stripe) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) table tbody tr:hover { background: var(--ui-table-hover) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.modal-content, [role="dialog"]:not([class~="fixed"]), .contact-modal-panel, #modalConfirmacion > div, [id^="modal"] > .bg-white, [id^="modal"] > [class~="dark:bg-black"]) { background: var(--ui-modal-bg) !important; color: var(--ui-modal-text) !important; border-color: var(--ui-modal-border) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is([role="dialog"], .modal, #modalConfirmacion) :is(h2, h3, p) { color: var(--ui-modal-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.ui-overlay, #modalConfirmacion, [class*="bg-black/"][class~="fixed"], [class*="bg-[black]/"][class~="fixed"]) { background: color-mix(in srgb, var(--ui-overlay) 60%, transparent) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.alert-success, .badge-success, .ui-alert-success, .bg-green-50, .bg-emerald-50) { background: var(--ui-success-bg) !important; color: var(--ui-success-text) !important; border-color: var(--ui-success-border) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.alert-danger, .badge-danger, .ui-alert-danger, .bg-red-50, .bg-rose-50) { background: var(--ui-danger-bg) !important; color: var(--ui-danger-text) !important; border-color: var(--ui-danger-border) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.alert-warning, .badge-warning, .ui-alert-warning, .bg-yellow-50, .bg-amber-50) { background: var(--ui-warning-bg) !important; color: var(--ui-warning-text) !important; border-color: var(--ui-warning-border) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.alert-info, .badge-info, .ui-alert-info, .bg-blue-50) { background: var(--ui-info-bg) !important; color: var(--ui-info-text) !important; border-color: var(--ui-info-border) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.badge-neutral, .ui-alert-neutral) { background: var(--ui-neutral-bg) !important; color: var(--ui-neutral-text) !important; border-color: var(--ui-neutral-border) !important; }
/* Utility variants used by older views. Preserve semantic colors and icon layouts. */
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(button, a):is([class~="bg-black/5"], [class~="bg-white/5"], [class~="bg-gray-200"], [class~="bg-gray-100"]) { background: var(--ui-secondary-bg) !important; color: var(--ui-secondary-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(button, a):is([class~="bg-black/5"], [class~="bg-white/5"], [class~="bg-gray-200"], [class~="bg-gray-100"]):hover { background: var(--ui-secondary-hover) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(input[name="search"], input[name="q"]) { padding-left: 28px; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.bg-primary, .text-primary) { --tw-ring-color: var(--ui-focus); }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.bg-slate-50, [class~="bg-[#f4f7fb]"], [class~="bg-[#f8fafc]"]) { background-color: var(--ui-background) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is([id$="Modal"], [id$="modal"])[class~="fixed"] { background: color-mix(in srgb, var(--ui-overlay) 60%, transparent) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is([id$="Modal"], [id$="modal"])[class~="fixed"] > :is(.bg-white, [role="dialog"]) { background: var(--ui-modal-bg) !important; color: var(--ui-modal-text) !important; border-color: var(--ui-modal-border) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.bg-green-100, .bg-green-200, .bg-emerald-100, .bg-emerald-200) {background:var(--ui-success-bg)!important;color:var(--ui-success-text)!important;border-color:var(--ui-success-border)!important}
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.text-green-600, .text-green-700, .text-green-800, .text-emerald-600, .text-emerald-700, .text-emerald-800) {color:var(--ui-success-text)!important}
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.bg-red-100, .bg-red-200, .bg-rose-100, .bg-rose-200) {background:var(--ui-danger-bg)!important;color:var(--ui-danger-text)!important;border-color:var(--ui-danger-border)!important}
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.text-red-600, .text-red-700, .text-red-800, .text-rose-600, .text-rose-700, .text-rose-800) {color:var(--ui-danger-text)!important}
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.bg-yellow-100, .bg-yellow-200, .bg-amber-100, .bg-amber-200, .bg-orange-100, .bg-orange-200) {background:var(--ui-warning-bg)!important;color:var(--ui-warning-text)!important;border-color:var(--ui-warning-border)!important}
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.text-yellow-600, .text-yellow-700, .text-yellow-800, .text-amber-600, .text-amber-700, .text-amber-800, .text-orange-600, .text-orange-700, .text-orange-800) {color:var(--ui-warning-text)!important}
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.bg-blue-100, .bg-blue-200, .bg-sky-100, .bg-sky-200, .bg-cyan-100, .bg-cyan-200) {background:var(--ui-info-bg)!important;color:var(--ui-info-text)!important;border-color:var(--ui-info-border)!important}
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) :is(.text-blue-600, .text-blue-700, .text-blue-800, .text-sky-600, .text-sky-700, .text-sky-800, .text-cyan-600, .text-cyan-700, .text-cyan-800) {color:var(--ui-info-text)!important}

:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) .contact-modal-panel :is(.contact-modal-header, .contact-modal-footer, .contact-modal-section) { background: var(--ui-modal-bg) !important; color: var(--ui-modal-text) !important; border-color: var(--ui-modal-border) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) table :is(th, th[class]) { background: var(--ui-table-head-bg) !important; color: var(--ui-table-head-text) !important; }
:root:is(:not(.dark)[data-ui-custom-light="true"], .dark[data-ui-custom-dark="true"]) body:is(.app-shell, .standalone-shell) table :is(td, td[class]) { color: var(--ui-table-text) !important; }

/* New design components are independent of the preserved production styles. */
body:is(.app-shell,.standalone-shell) .ui-button { background:var(--ui-secondary-bg)!important;color:var(--ui-secondary-text)!important; }
body:is(.app-shell,.standalone-shell) .ui-button:hover { background:var(--ui-secondary-hover)!important; }
body:is(.app-shell,.standalone-shell) .ui-button-primary { background:var(--ui-button-bg)!important;color:var(--ui-button-text)!important; }
body:is(.app-shell,.standalone-shell) .ui-button-primary:hover { background:var(--ui-button-hover)!important; }
body:is(.app-shell,.standalone-shell) .ui-button:disabled { background:var(--ui-disabled-bg)!important;color:var(--ui-disabled-text)!important; }
body:is(.app-shell,.standalone-shell) .ui-link { color:var(--ui-link)!important; }
body:is(.app-shell,.standalone-shell) .ui-alert-success { background:var(--ui-success-bg)!important;color:var(--ui-success-text)!important;border-color:var(--ui-success-border)!important; }
body:is(.app-shell,.standalone-shell) .ui-alert-danger { background:var(--ui-danger-bg)!important;color:var(--ui-danger-text)!important;border-color:var(--ui-danger-border)!important; }
body:is(.app-shell,.standalone-shell) .ui-alert-warning { background:var(--ui-warning-bg)!important;color:var(--ui-warning-text)!important;border-color:var(--ui-warning-border)!important; }
body:is(.app-shell,.standalone-shell) .ui-alert-info { background:var(--ui-info-bg)!important;color:var(--ui-info-text)!important;border-color:var(--ui-info-border)!important; }
body:is(.app-shell,.standalone-shell) .ui-alert-neutral { background:var(--ui-neutral-bg)!important;color:var(--ui-neutral-text)!important;border-color:var(--ui-neutral-border)!important; }