:root {
    color-scheme: light;
    --sender-surface-raised: #fff;
    --sender-surface-hover: #f8fbff;
    --sender-surface-active: #edf4ff;
    --sender-selection-muted: #40546e;
    --sender-text-secondary: #4b5565;
    --sender-link: #155dbd;
    --sender-link-hover: #0f4ea3;
    --sender-primary-hover: #155dbd;
    --sender-primary-soft: #edf4ff;
    --sender-primary-soft-text: #155dbd;
    --sender-input-bg: #fff;
    --sender-input-disabled: #eef1f4;
    --sender-input-border: #cfd7e2;
    --sender-focus-border: #80aef3;
    --sender-focus-ring: rgba(31, 111, 235, .16);
    --sender-topbar-bg: rgba(255, 255, 255, .96);
    --sender-overlay: rgba(15, 23, 42, .42);
    --sender-code-bg: #0f172a;
    --sender-code-text: #e2e8f0;
    --sender-success: #198754;
    --sender-success-soft: #eaf7f0;
    --sender-success-border: #a7d9bd;
    --sender-success-text: #155d3c;
    --sender-warning: #b7791f;
    --sender-warning-soft: #fff6dd;
    --sender-warning-border: #efd18a;
    --sender-warning-text: #72510d;
    --sender-danger: #c43845;
    --sender-danger-soft: #fff0f1;
    --sender-danger-border: #efb3b9;
    --sender-danger-text: #8e2430;
    --sender-info: #2176a6;
    --sender-info-soft: #edf7fc;
    --sender-info-border: #acd4e8;
    --sender-info-text: #185573;
    --sender-chart-axis: #94a3b8;
    --sender-chart-text: #334155;
    --sender-chart-grid: #e5e7eb;
    --sender-chart-empty: #e5e7eb;
    --sender-chart-symbol: #fff;
    --sender-chart-tooltip-bg: rgba(255, 255, 255, .98);
}

.scheduler-email-preview-frame,
#previewTemplate {
    color-scheme: light;
}

.table-primary .text-muted,
.table-primary .send-time-rank {
    color: var(--sender-selection-muted) !important;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --sender-bg: #17191c;
        --sender-surface: #202328;
        --sender-surface-raised: #25292f;
        --sender-surface-muted: #282c32;
        --sender-surface-hover: #2d3239;
        --sender-surface-active: #203653;
        --sender-selection-bg: #253a52;
        --sender-selection-hover: #29415c;
        --sender-selection-muted: #aab3bf;
        --sender-border: #3b4149;
        --sender-border-soft: #30353c;
        --sender-text: #f1f3f5;
        --sender-text-secondary: #c6ccd4;
        --sender-muted: #aab3bf;
        --sender-primary: #2b72ca;
        --sender-primary-hover: #2466b6;
        --sender-primary-soft: #203653;
        --sender-primary-soft-text: #a8cbff;
        --sender-link: #83b6ff;
        --sender-link-hover: #b4d2ff;
        --sender-input-bg: #191c20;
        --sender-input-disabled: #262a30;
        --sender-input-border: #4a525d;
        --sender-focus-border: #6aa7f5;
        --sender-focus-ring: rgba(90, 157, 242, .28);
        --sender-topbar-bg: rgba(32, 35, 40, .96);
        --sender-overlay: rgba(0, 0, 0, .62);
        --sender-code-bg: #111316;
        --sender-code-text: #dce2ea;
        --sender-shadow: 0 1px 2px rgba(0, 0, 0, .32);
        --sender-success: #36a875;
        --sender-success-soft: #1b382c;
        --sender-success-border: #356b53;
        --sender-success-text: #b1e7cb;
        --sender-warning: #d5a13f;
        --sender-warning-soft: #403418;
        --sender-warning-border: #725b27;
        --sender-warning-text: #f3d58c;
        --sender-danger: #df6570;
        --sender-danger-action: #b84954;
        --sender-danger-action-hover: #a23d47;
        --sender-danger-soft: #432429;
        --sender-danger-border: #784149;
        --sender-danger-text: #ffbcc2;
        --sender-info: #4e9bc5;
        --sender-info-soft: #1c3444;
        --sender-info-border: #37647d;
        --sender-info-text: #b3dcf1;
        --sender-chart-axis: #778392;
        --sender-chart-text: #cbd2db;
        --sender-chart-grid: #343a42;
        --sender-chart-empty: #3a4048;
        --sender-chart-symbol: #25292f;
        --sender-chart-tooltip-bg: rgba(37, 41, 47, .98);
    }

    html,
    body,
    .app-public-content {
        background-color: var(--sender-bg);
        color: var(--sender-text);
    }

    a,
    .btn-link,
    .pagination .page-link {
        color: var(--sender-link);
    }

    a:hover,
    .btn-link:hover,
    .pagination .page-link:hover {
        color: var(--sender-link-hover);
    }

    hr,
    .border,
    .border-top,
    .border-right,
    .border-bottom,
    .border-left,
    .dropdown-divider {
        border-color: var(--sender-border) !important;
    }

    .app-sidebar,
    .app-topbar,
    .scheduler-filter-panel,
    .smtp-editor-header,
    .smtp-editor-panel,
    .smtp-editor-actions {
        background: var(--sender-surface) !important;
    }

    .app-topbar {
        background: var(--sender-topbar-bg) !important;
    }

    .app-sidebar-backdrop {
        background: var(--sender-overlay);
    }

    .app-sidebar-minor-link,
    .app-sidebar-link,
    .app-topbar-icon,
    .app-topbar-user,
    .scheduler-project-bar .nav-pills .nav-link,
    .nav-tabs .nav-link {
        color: var(--sender-text-secondary);
    }

    .app-sidebar-link .fa,
    .app-sidebar-link .far {
        color: var(--sender-muted);
    }

    .app-sidebar-link:hover,
    .dropdown-item:hover,
    .dropdown-item:focus,
    .list-group-item-action:hover,
    .list-group-item-action:focus,
    .nav-tabs .nav-link:hover,
    .pagination .page-link:hover {
        background-color: var(--sender-surface-hover);
        color: var(--sender-text);
    }

    .app-sidebar-link.active,
    .scheduler-project-bar .nav-pills .nav-link.active,
    .nav-pills .nav-link.active {
        background: var(--sender-primary-soft);
        color: var(--sender-primary-soft-text);
    }

    .app-sidebar-link.active .fa,
    .app-sidebar-link.active .far {
        color: var(--sender-primary-soft-text);
    }

    .bg-white,
    .bg-light,
    .card,
    .card-body,
    .modal-content,
    .dropdown-menu,
    .popover,
    .list-group-item,
    .breadcrumb,
    .jumbotron,
    .page-link {
        background-color: var(--sender-surface) !important;
        color: var(--sender-text);
    }

    .card-header,
    .card-footer,
    .modal-header,
    .modal-footer,
    .popover-header,
    .breadcrumb,
    .input-group-text {
        background-color: var(--sender-surface-muted);
        border-color: var(--sender-border);
        color: var(--sender-text);
    }

    .modal-content,
    .dropdown-menu,
    .popover,
    .list-group-item,
    .page-link {
        border-color: var(--sender-border);
    }

    .dropdown-item,
    .breadcrumb-item.active,
    .popover-body,
    .close {
        color: var(--sender-text-secondary);
    }

    .dropdown-item.active,
    .dropdown-item:active,
    .list-group-item.active,
    .page-item.active .page-link {
        background-color: var(--sender-primary);
        border-color: var(--sender-primary);
        color: #fff;
    }

    .page-item.disabled .page-link,
    .nav-link.disabled {
        background-color: var(--sender-input-disabled);
        border-color: var(--sender-border);
        color: var(--sender-muted);
    }

    .bs-popover-auto[x-placement^='top'] > .arrow::after,
    .bs-popover-top > .arrow::after {
        border-top-color: var(--sender-surface);
    }

    .bs-popover-auto[x-placement^='bottom'] > .arrow::after,
    .bs-popover-bottom > .arrow::after {
        border-bottom-color: var(--sender-surface);
    }

    .bs-popover-auto[x-placement^='left'] > .arrow::after,
    .bs-popover-left > .arrow::after {
        border-left-color: var(--sender-surface);
    }

    .bs-popover-auto[x-placement^='right'] > .arrow::after,
    .bs-popover-right > .arrow::after {
        border-right-color: var(--sender-surface);
    }

    .form-control,
    .custom-select,
    select,
    textarea,
    input[type='text'],
    input[type='email'],
    input[type='number'],
    input[type='password'],
    input[type='search'],
    input[type='url'],
    input[type='datetime-local'],
    input[type='date'],
    input[type='time'] {
        background-color: var(--sender-input-bg);
        border-color: var(--sender-input-border);
        color: var(--sender-text);
    }

    .form-control:focus,
    .custom-select:focus,
    select:focus,
    textarea:focus,
    input:focus {
        background-color: var(--sender-input-bg);
        border-color: var(--sender-focus-border);
        box-shadow: 0 0 0 .12rem var(--sender-focus-ring);
        color: var(--sender-text);
    }

    .form-control:disabled,
    .form-control[readonly],
    .custom-select:disabled,
    select:disabled,
    textarea:disabled,
    input:disabled {
        background-color: var(--sender-input-disabled);
        color: var(--sender-muted);
    }

    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: var(--sender-muted);
        opacity: 1;
    }

    select option {
        background: var(--sender-input-bg);
        color: var(--sender-text);
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--sender-text);
        box-shadow: 0 0 0 1000px var(--sender-input-bg) inset;
    }

    input[type='date']::-webkit-calendar-picker-indicator,
    input[type='time']::-webkit-calendar-picker-indicator,
    input[type='datetime-local']::-webkit-calendar-picker-indicator {
        filter: invert(.86);
    }

    label,
    .form-group label,
    .scheduler-filter-label,
    .smtp-editor-form label,
    .smtp-editor-section-title {
        color: var(--sender-text-secondary);
    }

    .table,
    .table td,
    .table th {
        color: var(--sender-text);
    }

    .table thead th,
    .table-light th,
    .table-light td {
        background-color: var(--sender-surface-muted);
        border-color: var(--sender-border);
        color: var(--sender-text-secondary);
    }

    .table td,
    .table th,
    .table-bordered,
    .table-bordered td,
    .table-bordered th,
    .table tbody + tbody {
        border-color: var(--sender-border-soft);
    }

    .table-hover tbody tr:hover,
    .table-striped tbody tr:nth-of-type(odd),
    .table-active,
    .table-active > td,
    .table-active > th {
        background-color: var(--sender-surface-hover);
        color: var(--sender-text);
    }

    .table-primary,
    .table-primary > td,
    .table-primary > th {
        background-color: var(--sender-selection-bg);
        color: var(--sender-text);
    }

    .table-hover tbody .table-primary:hover,
    .table-hover tbody .table-primary:hover > td,
    .table-hover tbody .table-primary:hover > th {
        background-color: var(--sender-selection-hover);
        color: var(--sender-text);
    }

    .table-success,
    .table-success > td,
    .table-success > th {
        background-color: var(--sender-success-soft);
        color: var(--sender-text);
    }

    .table-warning,
    .table-warning > td,
    .table-warning > th {
        background-color: var(--sender-warning-soft);
        color: var(--sender-text);
    }

    .table-danger,
    .table-danger > td,
    .table-danger > th {
        background-color: var(--sender-danger-soft);
        color: var(--sender-text);
    }

    .table-info,
    .table-info > td,
    .table-info > th {
        background-color: var(--sender-info-soft);
        color: var(--sender-text);
    }

    .table-secondary,
    .table-secondary > td,
    .table-secondary > th,
    .table-light,
    .table-light > td,
    .table-light > th {
        background-color: var(--sender-surface-muted);
        color: var(--sender-text);
    }

    .btn-primary {
        background-color: var(--sender-primary);
        border-color: var(--sender-primary);
        color: #fff;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:not(:disabled):not(.disabled):active {
        background-color: var(--sender-primary-hover);
        border-color: var(--sender-primary-hover);
        color: #fff;
    }

    .btn-outline-primary {
        border-color: #568fcf;
        color: var(--sender-link);
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:not(:disabled):not(.disabled):active {
        background-color: var(--sender-primary);
        border-color: var(--sender-primary);
        color: #fff;
    }

    .btn-secondary,
    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:not(:disabled):not(.disabled):active {
        background-color: #3b4149;
        border-color: #59616c;
        color: #f1f3f5;
    }

    .btn-outline-secondary {
        background: transparent;
        border-color: #59616c;
        color: var(--sender-text-secondary);
    }

    .btn-light,
    .btn-outline-light:hover {
        background-color: var(--sender-surface-muted);
        border-color: var(--sender-border);
        color: var(--sender-text);
    }

    .btn-outline-danger {
        border-color: var(--sender-danger);
        color: var(--sender-danger-text);
    }

    .btn-outline-danger:hover,
    .btn-danger {
        background-color: var(--sender-danger-action);
        border-color: var(--sender-danger-action);
        color: #fff;
    }

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:not(:disabled):not(.disabled):active {
        background-color: var(--sender-danger-action-hover);
        border-color: var(--sender-danger-action-hover);
        color: #fff;
    }

    .btn-outline-success {
        border-color: var(--sender-success);
        color: var(--sender-success-text);
    }

    .btn-outline-success:hover,
    .btn-success {
        background-color: var(--sender-success);
        border-color: var(--sender-success);
        color: #101713;
    }

    .btn-info,
    .btn-outline-info:hover {
        background-color: #347b9f;
        border-color: #347b9f;
        color: #fff;
    }

    .btn-outline-info {
        border-color: var(--sender-info);
        color: var(--sender-info-text);
    }

    .btn-warning,
    .btn-outline-warning:hover {
        background-color: var(--sender-warning);
        border-color: var(--sender-warning);
        color: #17191c;
    }

    .btn-outline-warning {
        border-color: var(--sender-warning);
        color: var(--sender-warning-text);
    }

    .alert-primary,
    .alert-info {
        background-color: var(--sender-info-soft);
        border-color: var(--sender-info-border);
        color: var(--sender-info-text);
    }

    .alert-success {
        background-color: var(--sender-success-soft);
        border-color: var(--sender-success-border);
        color: var(--sender-success-text);
    }

    .alert-warning {
        background-color: var(--sender-warning-soft);
        border-color: var(--sender-warning-border);
        color: var(--sender-warning-text);
    }

    .alert-danger {
        background-color: var(--sender-danger-soft);
        border-color: var(--sender-danger-border);
        color: var(--sender-danger-text);
    }

    .alert-secondary,
    .alert-light {
        background-color: var(--sender-surface-muted);
        border-color: var(--sender-border);
        color: var(--sender-text-secondary);
    }

    .alert a {
        color: inherit;
        text-decoration: underline;
    }

    .badge-primary {
        background-color: var(--sender-primary);
    }

    .badge-secondary {
        background-color: #59616c;
    }

    .badge-success {
        background-color: var(--sender-success);
        color: #101713;
    }

    .badge-warning {
        background-color: var(--sender-warning);
        color: #17191c;
    }

    .badge-danger {
        background-color: var(--sender-danger-action);
    }

    .badge-info {
        background-color: var(--sender-info);
        color: #101417;
    }

    .badge-light {
        background-color: var(--sender-surface-muted);
        color: var(--sender-text);
    }

    .text-dark,
    .text-body {
        color: var(--sender-text) !important;
    }

    .text-secondary {
        color: var(--sender-text-secondary) !important;
    }

    .text-black-50 {
        color: var(--sender-muted) !important;
    }

    .text-danger,
    .invalid-feedback {
        color: var(--sender-danger-text) !important;
    }

    .text-success,
    .valid-feedback {
        color: var(--sender-success-text) !important;
    }

    code {
        color: #f099ae;
    }

    pre,
    kbd {
        background-color: var(--sender-code-bg);
        color: var(--sender-code-text);
    }

    .nav-tabs .nav-link.active {
        background-color: var(--sender-surface);
        border-color: var(--sender-border) var(--sender-border) var(--sender-surface);
        color: var(--sender-text);
    }

    .progress,
    .analytics-progress {
        background-color: var(--sender-surface-muted);
    }

    .bootstrap-datetimepicker-widget.dropdown-menu {
        background: var(--sender-surface-raised) !important;
        border-color: var(--sender-border) !important;
        color: var(--sender-text);
    }

    .bootstrap-datetimepicker-widget table td.day:hover,
    .bootstrap-datetimepicker-widget table td.hour:hover,
    .bootstrap-datetimepicker-widget table td.minute:hover,
    .bootstrap-datetimepicker-widget table td.second:hover,
    .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
    .bootstrap-datetimepicker-widget table td span:hover {
        background: var(--sender-surface-hover);
    }

    .bootstrap-datetimepicker-widget table td.active,
    .bootstrap-datetimepicker-widget table td.active:hover,
    .bootstrap-datetimepicker-widget table td span.active {
        background-color: var(--sender-primary);
        color: #fff;
    }

    .bootstrap-datetimepicker-widget table td.old,
    .bootstrap-datetimepicker-widget table td.new,
    .bootstrap-datetimepicker-widget table td.disabled,
    .bootstrap-datetimepicker-widget table td span.disabled {
        color: var(--sender-muted);
    }

    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple,
    .select2-dropdown {
        background-color: var(--sender-input-bg);
        border-color: var(--sender-input-border);
        color: var(--sender-text);
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--default .select2-selection--multiple .select2-selection__choice,
    .select2-container--default .select2-results__option {
        color: var(--sender-text);
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: var(--sender-primary);
    }

    .analytics-filter-panel,
    .analytics-card,
    .analytics-panel,
    .analytics-table-panel,
    .report-panel,
    .metric-tile,
    .list-panel,
    .list-card,
    .launch-section,
    .launch-side,
    .template-editor-panel,
    .template-help-panel,
    .risk-panel {
        background: var(--sender-surface) !important;
        border-color: var(--sender-border) !important;
        box-shadow: var(--sender-shadow) !important;
    }

    .analytics-kicker,
    .analytics-filter-summary,
    .analytics-card-label,
    .analytics-card-caption,
    .analytics-panel-subtitle,
    .analytics-scroll-hint,
    .health-item-label,
    .send-time-rank,
    .campaign-kicker,
    .report-muted,
    .metric-label,
    .metric-caption,
    .campaign-data-label,
    .report-sort-indicator,
    .list-kicker,
    .list-card-label,
    .list-card-caption,
    .list-muted,
    .list-empty,
    .list-sort-indicator,
    .launch-muted,
    .launch-label,
    .campaign-format-hint,
    .risk-muted,
    .risk-rule-code,
    .project-muted,
    .import-map-steps,
    .import-map-sample,
    .template-variable-meta,
    .smtp-editor-summary {
        color: var(--sender-muted) !important;
    }

    .smtp-editor-note {
        color: var(--sender-text-secondary) !important;
    }

    .analytics-filter-label,
    .analytics-preset-label,
    .analytics-best-slot-label,
    .analytics-best-slot-meta,
    .analytics-metric-toggle,
    .risk-rule-table th,
    .project-overview-table th,
    .project-metric-pill,
    .import-map-control label,
    .template-help-group-title {
        color: var(--sender-text-secondary) !important;
    }

    .analytics-card-value,
    .analytics-panel-title,
    .analytics-best-slot-value,
    .health-item-value,
    .metric-value,
    .campaign-data-value,
    .list-card-value,
    .launch-value,
    .launch-empty-action h6,
    .risk-rule-title {
        color: var(--sender-text) !important;
    }

    .analytics-preset-label,
    .analytics-segmented,
    .campaign-edit-scope,
    .launch-card,
    .launch-empty-action,
    .template-variable-token,
    .project-metric-pill,
    .smtp-editor-summary span,
    .smtp-editor-note {
        background: var(--sender-surface-muted) !important;
        border-color: var(--sender-border) !important;
    }

    .analytics-preset-input:checked + .analytics-preset-label,
    .analytics-metric-toggle.is-active,
    .launch-step,
    .template-variable-token:hover,
    .template-variable-token:focus {
        background: var(--sender-primary-soft) !important;
        border-color: #568fcf !important;
        color: var(--sender-primary-soft-text) !important;
    }

    .analytics-best-slot,
    .health-item {
        background: var(--sender-info-soft) !important;
        border-color: var(--sender-info-border) !important;
        color: var(--sender-info-text) !important;
    }

    .health-item-warning,
    .send-time-sample-preliminary {
        background: var(--sender-warning-soft) !important;
        border-color: var(--sender-warning-border) !important;
        color: var(--sender-warning-text) !important;
    }

    .health-item-danger {
        background: var(--sender-danger-soft) !important;
        border-color: var(--sender-danger-border) !important;
        color: var(--sender-danger-text) !important;
    }

    .send-time-sample-reliable,
    .launch-status-row.is-ok .launch-status-icon {
        background: var(--sender-success-soft) !important;
        border-color: var(--sender-success-border) !important;
        color: var(--sender-success-text) !important;
    }

    .send-time-sample-low,
    .launch-status-icon {
        background: var(--sender-surface-muted) !important;
        border-color: var(--sender-border) !important;
        color: var(--sender-text-secondary) !important;
    }

    .launch-choice {
        background: var(--sender-surface);
        border-color: var(--sender-border) !important;
    }

    .launch-choice:hover,
    .launch-choice.is-selected {
        border-color: var(--sender-focus-border) !important;
        box-shadow: 0 0 0 2px var(--sender-focus-ring) !important;
    }

    .campaign-data-item,
    .campaign-edit-scope,
    .analytics-filter-actions,
    .launch-side-summary,
    .import-map-footer,
    .template-variable-row {
        border-color: var(--sender-border-soft) !important;
    }

    .report-sort-link:hover,
    .report-sort-link:focus,
    .report-sort-link.is-active,
    .list-sort-link:hover,
    .list-sort-link:focus,
    .list-sort-link.is-active,
    .campaign-start-suggestion,
    .import-map-steps strong,
    .template-variable-token {
        color: var(--sender-link) !important;
    }

    .risk-json-preview {
        background: var(--sender-code-bg) !important;
        color: var(--sender-code-text) !important;
    }

    #launchSchedule .bootstrap-datetimepicker-widget table th.picker-switch,
    #launchSchedule .bootstrap-datetimepicker-widget table th.dow {
        color: var(--sender-text-secondary) !important;
    }

    .scheduler-email-preview,
    .scheduler-email-preview-frame,
    #previewTemplate {
        background: #fff !important;
    }

    .mce-panel,
    .mce-container,
    .mce-window,
    .mce-menu {
        background-color: var(--sender-surface-raised) !important;
        border-color: var(--sender-border) !important;
        color: var(--sender-text) !important;
    }

    .mce-btn,
    .mce-menu-item {
        background-color: var(--sender-surface-raised) !important;
        color: var(--sender-text) !important;
    }

    .mce-btn:hover,
    .mce-btn:focus,
    .mce-menu-item:hover,
    .mce-menu-item.mce-selected {
        background-color: var(--sender-surface-hover) !important;
    }
}