:root {
    --theme-page-bg: var(--grey-light-4, #F4F6F9);
    --theme-text: var(--black, #000000);
    --theme-surface: var(--white, #FFFFFF);
    --theme-surface-muted: var(--grey-light-3, #EDEEF4);
    --theme-border: var(--grey-light-1, #D2DFEF);
    --theme-muted-text: var(--grey-medium, #8C8C90);
    --theme-field-bg: var(--white, #FFFFFF);
    --theme-field-text: var(--black, #000000);
    --theme-heading: var(--blue-darkest, #0B3072);
    --theme-link: var(--blue-dark, #366AC7);
    --theme-link-hover: var(--blue-darkest, #0B3072);
    --theme-header-bg: linear-gradient(90deg, var(--blue-darkest, #0B3072) 0%, var(--blue-dark, #366AC7) 100%);
    --theme-sidebar-bg: linear-gradient(180deg, var(--blue-medium, #1D7AEC) 0%, var(--blue-dark, #366AC7) 100%);
    --theme-sidebar-link: rgba(255, 255, 255, 0.86);
    --theme-sidebar-link-active: #FFFFFF;
    --theme-sidebar-link-active-bg: rgba(255, 255, 255, 0.15);
    --theme-sidebar-muted: rgba(255, 255, 255, 0.76);
    --theme-drag-handle-bg: var(--blue-dark, #366AC7);
    --theme-drag-handle-hover-bg: var(--blue-medium, #1D7AEC);
    --theme-button-bg: var(--blue-medium, #1D7AEC);
    --theme-button-hover-bg: var(--blue-dark, #366AC7);
    --theme-focus-shadow: rgba(29, 122, 236, 0.15);
    --theme-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    --theme-table-header-bg: var(--blue-dark, #366AC7);
    --theme-table-header-text: #FFFFFF;
    --theme-table-stripe-bg: var(--grey-light-4, #F4F6F9);
    --theme-table-hover-bg: var(--grey-light-3, #EDEEF4);
    --theme-viewed-row-bg: #BCE5C8;
    --theme-viewed-row-hover-bg: #A7DAB6;
    --theme-chart-text: #333333;
    --theme-chart-grid: rgba(11, 48, 114, 0.12);
}

:root[data-theme="dark"] {
    --blue-darkest: #D7E6FF;
    --blue-dark: #72A7FF;
    --blue-medium: #3B82F6;
    --grey-light-1: #334155;
    --grey-light-2: #475569;
    --grey-light-3: #1E293B;
    --grey-light-4: #0B1120;
    --grey-medium: #94A3B8;
    --black: #E7EEF8;
    --white: #FFFFFF;
    --theme-page-bg: #0B1120;
    --theme-text: #E7EEF8;
    --theme-surface: #111827;
    --theme-surface-muted: #1E293B;
    --theme-border: #334155;
    --theme-muted-text: #9EABC1;
    --theme-field-bg: #0F172A;
    --theme-field-text: #F8FAFC;
    --theme-heading: #D7E6FF;
    --theme-link: #93C5FD;
    --theme-link-hover: #BFDBFE;
    --theme-header-bg: linear-gradient(90deg, #070D18 0%, #14213A 100%);
    --theme-sidebar-bg: linear-gradient(180deg, #10192B 0%, #070D18 100%);
    --theme-sidebar-link: #A3AFC3;
    --theme-sidebar-link-active: #FFFFFF;
    --theme-sidebar-link-active-bg: rgba(59, 130, 246, 0.24);
    --theme-sidebar-muted: #7F8DA3;
    --theme-drag-handle-bg: #10192B;
    --theme-drag-handle-hover-bg: #1E3A5F;
    --theme-button-bg: #2563EB;
    --theme-button-hover-bg: #1D4ED8;
    --theme-focus-shadow: rgba(96, 165, 250, 0.24);
    --theme-card-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
    --theme-table-header-bg: #17233A;
    --theme-table-header-text: #E7EEF8;
    --theme-table-stripe-bg: #0F172A;
    --theme-table-hover-bg: #1E293B;
    --theme-viewed-row-bg: #12331F;
    --theme-viewed-row-hover-bg: #184027;
    --theme-chart-text: #D7E6FF;
    --theme-chart-grid: rgba(148, 163, 184, 0.22);
}

:root[data-theme="pink"] {
    --blue-darkest: #BE185D;
    --blue-dark: #E24D92;
    --blue-medium: #F062A8;
    --grey-light-1: #D2DFEF;
    --grey-light-2: #E1E2E8;
    --grey-light-3: #EDEEF4;
    --grey-light-4: #F4F6F9;
    --grey-medium: #8C8C90;
    --black: #000000;
    --white: #FFFFFF;
    --theme-page-bg: var(--grey-light-4);
    --theme-text: var(--black);
    --theme-surface: #FFFFFF;
    --theme-surface-muted: var(--grey-light-3);
    --theme-border: var(--grey-light-1);
    --theme-muted-text: var(--grey-medium);
    --theme-field-bg: #FFFFFF;
    --theme-field-text: var(--black);
    --theme-heading: #BE185D;
    --theme-link: #D9468A;
    --theme-link-hover: #BE185D;
    --theme-header-bg: linear-gradient(90deg, #C93674 0%, #F062A8 100%);
    --theme-sidebar-bg: linear-gradient(180deg, #F062A8 0%, #D9468A 100%);
    --theme-sidebar-link: rgba(255, 255, 255, 0.88);
    --theme-sidebar-link-active: #FFFFFF;
    --theme-sidebar-link-active-bg: rgba(255, 255, 255, 0.18);
    --theme-active-menu-pink: #F37EB8;
    --theme-sidebar-muted: rgba(255, 255, 255, 0.76);
    --theme-drag-handle-bg: #D9468A;
    --theme-drag-handle-hover-bg: #F062A8;
    --theme-button-bg: #E24D92;
    --theme-button-hover-bg: #D9468A;
    --theme-focus-shadow: rgba(236, 72, 153, 0.18);
    --theme-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    --theme-filter-tab-active-bg: var(--theme-active-menu-pink);
    --theme-table-header-bg: var(--theme-active-menu-pink);
    --theme-table-header-text: #FFFFFF;
    --theme-table-stripe-bg: var(--grey-light-4);
    --theme-table-hover-bg: var(--grey-light-3);
    --theme-viewed-row-bg: #BCE5C8;
    --theme-viewed-row-hover-bg: #A7DAB6;
    --theme-chart-text: #BE185D;
    --theme-chart-grid: rgba(190, 24, 93, 0.16);
}

:root:is([data-theme="dark"], [data-theme="pink"]) body,
:root:is([data-theme="dark"], [data-theme="pink"]) .main-content {
    background-color: var(--theme-page-bg) !important;
    color: var(--theme-text) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #page-header {
    background: var(--theme-header-bg) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .sidebar {
    background: var(--theme-sidebar-bg) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .nav-link {
    color: var(--theme-sidebar-link) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .nav-link:hover,
:root:is([data-theme="dark"], [data-theme="pink"]) .nav-link.active {
    background-color: var(--theme-sidebar-link-active-bg) !important;
    color: var(--theme-sidebar-link-active) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .sidebar-footer {
    color: var(--theme-sidebar-muted) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #sidebar-drag-handle {
    background-color: var(--theme-drag-handle-bg) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #sidebar-drag-handle:hover {
    background-color: var(--theme-drag-handle-hover-bg) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .page-title,
:root:is([data-theme="dark"], [data-theme="pink"]) .main-header,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget-title,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget h2,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget h3,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget h5,
:root:is([data-theme="dark"], [data-theme="pink"]) #search-form label,
:root:is([data-theme="dark"], [data-theme="pink"]) .pipeline-subsection p strong,
:root:is([data-theme="dark"], [data-theme="pink"]) .mmr-subsection p strong,
:root:is([data-theme="dark"], [data-theme="pink"]) #details-content p strong,
:root:is([data-theme="dark"], [data-theme="pink"]) #overview-seen-info p strong {
    color: var(--theme-heading) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .widget,
:root:is([data-theme="dark"], [data-theme="pink"]) .card,
:root:is([data-theme="dark"], [data-theme="pink"]) .modal-content,
:root:is([data-theme="dark"], [data-theme="pink"]) .collapse .card-body,
:root:is([data-theme="dark"], [data-theme="pink"]) .stage-9-section {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .widget,
:root:is([data-theme="dark"], [data-theme="pink"]) .card,
:root:is([data-theme="dark"], [data-theme="pink"]) .modal-content {
    box-shadow: var(--theme-card-shadow) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .widget-header,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget h2,
:root:is([data-theme="dark"], [data-theme="pink"]) .title-separator,
:root:is([data-theme="dark"], [data-theme="pink"]) .price-separator {
    border-color: var(--theme-border) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .widget p,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget .slim-text,
:root:is([data-theme="dark"], [data-theme="pink"]) .form-text,
:root:is([data-theme="dark"], [data-theme="pink"]) .loading-message,
:root:is([data-theme="dark"], [data-theme="pink"]) .text-muted {
    color: var(--theme-muted-text) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .widget p strong {
    color: var(--theme-text) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) a,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget a,
:root:is([data-theme="dark"], [data-theme="pink"]) .timeline-view-card-link,
:root:is([data-theme="dark"], [data-theme="pink"]) #manual-load-more-trigger,
:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table td:nth-child(2) a {
    color: var(--theme-link) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) a:hover,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget a:hover,
:root:is([data-theme="dark"], [data-theme="pink"]) .timeline-view-card-link:hover,
:root:is([data-theme="dark"], [data-theme="pink"]) #manual-load-more-trigger:hover,
:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table td:nth-child(2) a:hover {
    color: var(--theme-link-hover) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .form-control,
:root:is([data-theme="dark"], [data-theme="pink"]) .form-select,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget-content input[type="text"],
:root:is([data-theme="dark"], [data-theme="pink"]) .widget-content input[type="email"],
:root:is([data-theme="dark"], [data-theme="pink"]) .widget-content input[type="password"],
:root:is([data-theme="dark"], [data-theme="pink"]) .widget-content select.form-select,
:root:is([data-theme="dark"], [data-theme="pink"]) #search-form input,
:root:is([data-theme="dark"], [data-theme="pink"]) #search-form select,
:root:is([data-theme="dark"], [data-theme="pink"]) textarea {
    background-color: var(--theme-field-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-field-text) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .form-control:focus,
:root:is([data-theme="dark"], [data-theme="pink"]) .form-select:focus,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget-content input:focus,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget-content select.form-select:focus,
:root:is([data-theme="dark"], [data-theme="pink"]) #search-form input:focus,
:root:is([data-theme="dark"], [data-theme="pink"]) #search-form select:focus,
:root:is([data-theme="dark"], [data-theme="pink"]) textarea:focus {
    border-color: var(--blue-medium) !important;
    box-shadow: 0 0 0 3px var(--theme-focus-shadow) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .form-control::placeholder,
:root:is([data-theme="dark"], [data-theme="pink"]) textarea::placeholder {
    color: var(--theme-muted-text) !important;
    opacity: 1;
}

:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .widget-content select.form-select,
:root[data-theme="dark"] #search-form select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F8FAFC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .btn-primary,
:root:is([data-theme="dark"], [data-theme="pink"]) #search-form button,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget-content button {
    background-color: var(--theme-button-bg) !important;
    border-color: var(--theme-button-bg) !important;
    color: #FFFFFF !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .btn-primary:hover,
:root:is([data-theme="dark"], [data-theme="pink"]) #search-form button:hover,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget-content button:hover {
    background-color: var(--theme-button-hover-bg) !important;
    border-color: var(--theme-button-hover-bg) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #filter-tabs-container {
    background-color: var(--theme-page-bg) !important;
    border-bottom-color: var(--theme-border) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .filter-tab-btn {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-link) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .filter-tab-btn:hover {
    background-color: var(--theme-table-hover-bg) !important;
    color: var(--theme-link-hover) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .filter-tab-btn.active {
    background-color: var(--theme-filter-tab-active-bg, var(--theme-button-bg)) !important;
    border-color: var(--theme-filter-tab-active-bg, var(--theme-button-bg)) !important;
    color: #FFFFFF !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table,
:root:is([data-theme="dark"], [data-theme="pink"]) .styled-table {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table th,
:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table td,
:root:is([data-theme="dark"], [data-theme="pink"]) .styled-table th,
:root:is([data-theme="dark"], [data-theme="pink"]) .styled-table td {
    border-color: var(--theme-border) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table th,
:root:is([data-theme="dark"], [data-theme="pink"]) .styled-table thead tr {
    background-color: var(--theme-table-header-bg) !important;
    color: var(--theme-table-header-text) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table tbody tr.viewed-row,
:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table tbody tr.viewed-row:nth-child(even) {
    background-color: var(--theme-viewed-row-bg) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table tbody tr.viewed-row:hover {
    background-color: var(--theme-viewed-row-hover-bg) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table td::before,
:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table .value-wrapper,
:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table .price-content-wrapper,
:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table .mmr-combined-mobile,
:root:is([data-theme="dark"], [data-theme="pink"]) .table-container {
    color: var(--theme-text) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table td:nth-child(3) > span.value-wrapper,
:root:is([data-theme="dark"], [data-theme="pink"]) #listings-table td:nth-child(3) > span.price-inline,
:root:is([data-theme="dark"], [data-theme="pink"]) .widget .data {
    color: var(--theme-link) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .filter-tag-overlay,
:root:is([data-theme="dark"], [data-theme="pink"]) .unviewed-count-badge,
:root:is([data-theme="dark"], [data-theme="pink"]) .website-overlay-tag + .filter-tag-overlay {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}

:root[data-theme="pink"] .unviewed-count-badge {
    background-color: #8000FF !important;
    color: #FFFFFF !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .mark-viewed-btn,
:root:is([data-theme="dark"], [data-theme="pink"]) .block-seller-btn,
:root:is([data-theme="dark"], [data-theme="pink"]) .vehicle-history-report-btn,
:root:is([data-theme="dark"], [data-theme="pink"]) .expand-btn {
    background-color: var(--theme-surface-muted) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-link) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .mark-viewed-btn:hover,
:root:is([data-theme="dark"], [data-theme="pink"]) .block-seller-btn:hover,
:root:is([data-theme="dark"], [data-theme="pink"]) .vehicle-history-report-btn:hover,
:root:is([data-theme="dark"], [data-theme="pink"]) .expand-btn:hover {
    background-color: var(--theme-table-hover-bg) !important;
    border-color: var(--theme-muted-text) !important;
    color: var(--theme-link-hover) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) #map-container {
    border-color: var(--theme-border) !important;
}

:root:is([data-theme="dark"], [data-theme="pink"]) .description-textarea {
    background-color: var(--theme-field-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-field-text) !important;
}