:root {
  --surface:#fff;
  --surface-soft:#f4f8f3;
  --accent-soft:#e7f5ec;
  --accent-text:#35694d;
  --text-secondary:#64786b;
  --text-muted:#83908a;
  --theme-glow:#edf4ed;
  --on-accent:#fff;
  --chart-primary:#73a984;
  --chart-secondary:#b7a1dc;
  --chart-tertiary:#9bcbd0;
  --chart-fill:#c3e4c7;
  --chart-track:#f1f5ee;
  --theme-tooltip:#233d30;
  --theme-tooltip-text:#e2efe7;
  color-scheme:light;
}
html[data-theme="ocean"] {
  --green:#2563a5; --green-dark:#1e5089; --mint:#e8f2fc; --ink:#22354a;
  --muted:#5f7387; --line:#dce5ee; --canvas:#f3f7fb; --white:#fff;
  --surface:#fff; --surface-soft:#eef4fa; --accent-soft:#e3effb; --accent-text:#285f91;
  --text-secondary:#526a81; --text-muted:#5f7387; --theme-glow:#dfeefb; --on-accent:#fff;
  --purple:#a59dd7; --cyan:#6dbdc7; --chart-primary:#568fca; --chart-secondary:#a59dd7;
  --chart-tertiary:#6dbdc7; --chart-fill:#bfd9f2; --chart-track:#eaf1f8; --theme-tooltip:#223a55;
}
html[data-theme="lavender"] {
  --green:#7850b5; --green-dark:#613d96; --mint:#f0e9fa; --ink:#362e45;
  --muted:#756382; --line:#e6deef; --canvas:#f7f4fc; --white:#fff;
  --surface:#fff; --surface-soft:#f3eef9; --accent-soft:#eee5f8; --accent-text:#70499e;
  --text-secondary:#6b5a7d; --text-muted:#756382; --theme-glow:#eee2fa; --on-accent:#fff;
  --purple:#d1a4cc; --cyan:#8fbccf; --chart-primary:#a080cd; --chart-secondary:#d1a4cc;
  --chart-tertiary:#8fbccf; --chart-fill:#dac9ef; --chart-track:#f1eaf8; --theme-tooltip:#3b294f;
}
html[data-theme="sunset"] {
  --green:#b65b32; --green-dark:#974721; --mint:#fbece1; --ink:#453128;
  --muted:#816a5b; --line:#edded4; --canvas:#fcf7f3; --white:#fff;
  --surface:#fff; --surface-soft:#faf0e9; --accent-soft:#fae9dd; --accent-text:#995432;
  --text-secondary:#7f6252; --text-muted:#816a5b; --theme-glow:#f9e5d5; --on-accent:#fff;
  --purple:#c29ac5; --cyan:#8eb9ab; --chart-primary:#d28b61; --chart-secondary:#c29ac5;
  --chart-tertiary:#8eb9ab; --chart-fill:#f2d1b8; --chart-track:#f8ece3; --theme-tooltip:#533426;
}
html[data-theme="midnight"] {
  color-scheme:dark;
  --green:#78d6b4; --green-dark:#9ae2c8; --mint:#244137; --ink:#e0eeea;
  --muted:#a4b7b2; --line:#304147; --canvas:#10191d; --white:#19262b;
  --surface:#19262b; --surface-soft:#203138; --accent-soft:#244137; --accent-text:#91ddbf;
  --text-secondary:#bed0c9; --text-muted:#a4b7b2; --theme-glow:#193e34; --on-accent:#10251c;
  --purple:#b4a1dd; --cyan:#82c4d0; --chart-primary:#78d6b4; --chart-secondary:#b4a1dd;
  --chart-tertiary:#82c4d0; --chart-fill:#427c68; --chart-track:#26373d; --theme-tooltip:#2a4340;
  --theme-tooltip-text:#e0eeea; --shadow:0 3px 15px #00000055;
}

/* Every non-default palette changes actual surfaces, rather than filtering the page. */
html[data-theme]:not([data-theme="evergreen"]) body { color:var(--ink); }
html[data-theme]:not([data-theme="evergreen"]) .workspace-main { background:radial-gradient(ellipse at 58% 8%,var(--theme-glow),transparent 52%),var(--canvas); }
html[data-theme]:not([data-theme="evergreen"]) :is(.sidebar,.topbar,.card,.button,.platform-tab,.store-tab,.disclosure,.modal,.dropdown,.drawer,.toast,.search-field,.budget-row input,.budget-row select,.budget-month-label input,.form-field input,.form-field select,.field-input,.creative-filter-bar select,input[type="checkbox"],.global-search kbd) { background:var(--surface); border-color:var(--line); color:var(--ink); }
html[data-theme]:not([data-theme="evergreen"]) :is(.workspace,.sidebar-tip,.budget-summary>div,.budget-table-head,.drawer-kpis>div,.search-result,.date-presets button,.count-badge,.nav-count,.new-badge,.actuals-list span,th,.channel-bar-track,.progress-track) { background:var(--surface-soft); border-color:var(--line); }
html[data-theme]:not([data-theme="evergreen"]) :is(.brand-mark,.button-primary) { background:var(--green); color:var(--on-accent); border-color:var(--green); }
html[data-theme]:not([data-theme="evergreen"]) .button-primary:hover { background:var(--green-dark); }
html[data-theme]:not([data-theme="evergreen"]) :is(.nav-item.active,.store-item.selected,.platform-tab.active,.store-tab.active,.platform-sales-card.active,.pagination button.active,.dropdown button.selected,.chart-tab.active,.mode-pill,.selection-bar) { background:var(--accent-soft); color:var(--green); border-color:var(--green); }
html[data-theme]:not([data-theme="evergreen"]) :is(.button:hover,.platform-tab:hover,.store-tab:hover,.icon-button:hover,.nav-item:hover,.store-item:hover,.dropdown button:hover,.date-presets button:hover,.search-result:hover,tbody tr:hover) { background:var(--surface-soft); }
html[data-theme]:not([data-theme="evergreen"]) :is(.workspace-icon,.avatar,.integration-logo,.channel-icon,.campaign-symbol,.store-tab-icon) { background:var(--accent-soft); color:var(--accent-text); border-color:var(--line); }
html[data-theme]:not([data-theme="evergreen"]) .kpi-card:last-child { background:radial-gradient(ellipse at 100% 100%,var(--accent-soft),transparent 85%),var(--surface); }
html[data-theme]:not([data-theme="evergreen"]) .insight-banner { background:linear-gradient(100deg,var(--accent-soft),var(--surface-soft)); border-color:var(--line); }
html[data-theme]:not([data-theme="evergreen"]) :is(.page-heading p,.eyebrow,.breadcrumbs,.breadcrumbs>.lucide,.global-search,.global-search kbd,.nav-label,.nav-item,.store-item,.store-item small,.workspace>.lucide,.profile>.lucide,.sidebar-tip p,.card-header p,.kpi-top,.kpi-top>.lucide,.kpi-title .lucide,.kpi-bottom,.currency,.chart-legend,.chart-tab,.donut-center small,.donut-center span,.allocation-legend>div,.section-heading p,.channel-card p,.channel-roas small,.count-badge,.platform-pill,.table-footer,.campaign-name small,.settings-card>p,.integration-info small,.report-card p,.report-tag,.term-card p,.term-card small,.muted,.main-footer,.footer-mark,.filter-description,.disclosure-toggle small,.metric-strip small,.form-field label,.modal p,.drawer-kpis small,.drawer-section p,.empty-state,.loading-state,.search-result small,.platform-sales-note,.platform-attribution-note,.platform-tab-name,.platform-tab small,.platform-card-top,.platform-card-logo,.platform-sales-label,.platform-card-details,.platform-card-spend,.platform-card-foot,.budget-planner-heading p,.budget-month-label,.budget-scope>span,.budget-summary small,.budget-summary span,.budget-row,.budget-table-head,.budget-equivalent,.budget-form-footer p,#budget-save-status,.store-tabs-heading p,.store-tab-title [lang="ar"]) { color:var(--text-muted); }
html[data-theme]:not([data-theme="evergreen"]) :is(td,.campaign-name strong,.breadcrumbs strong,.allocation-legend b,.platform-tab strong,.platform-sales-card>strong,.budget-platform-name,.channel-bar-row,.empty-state h3,.loading-state h2) { color:var(--text-secondary); }
html[data-theme]:not([data-theme="evergreen"]) :is(.text-link,.sidebar-tip button,.sidebar-tip strong,.sidebar-tip .lucide,.tip-icon,.roas-cell,.platform-letter,.term-card h2,.live-value,.selection-bar strong,.insight-banner p,.insight-banner p strong,.insight-banner>.lucide,.platform-card-details b,.budget-remaining,.store-tab.active .store-tab-title,.disclosure-toggle>.lucide,.drawer-section h3) { color:var(--accent-text); }
html[data-theme]:not([data-theme="evergreen"]) :is(td,th,.budget-row,.profile,.integration-row,.drawer-section,.notices,.search-field,.date-presets button,.channel-icon,.metric-strip>div,.pagination button,.sidebar-tip) { border-color:var(--line); }
html[data-theme]:not([data-theme="evergreen"]) .chart-grid-line { stroke:var(--line); }
html[data-theme]:not([data-theme="evergreen"]) .chart-axis-text { fill:var(--text-muted); }
html[data-theme]:not([data-theme="evergreen"]) .chart-tooltip { background:var(--theme-tooltip); color:var(--theme-tooltip-text); }
html[data-theme]:not([data-theme="evergreen"]) .chart-tooltip strong { color:var(--theme-tooltip-text); }
html[data-theme]:not([data-theme="evergreen"]) .progress-track>span { background:var(--chart-primary); }
html[data-theme]:not([data-theme="evergreen"]) .channel-bar-track>span { background:linear-gradient(90deg,var(--chart-fill),var(--chart-primary)); }
html[data-theme]:not([data-theme="evergreen"]) .channel-bar-row:nth-child(2) .channel-bar-track>span { background:var(--chart-secondary); }
html[data-theme]:not([data-theme="evergreen"]) .channel-bar-row:nth-child(3) .channel-bar-track>span { background:var(--chart-tertiary); }
html[data-theme]:not([data-theme="evergreen"]) .creative-thumbnail { background:linear-gradient(145deg,var(--accent-soft),var(--chart-fill)); color:var(--accent-text); }
html[data-theme]:not([data-theme="evergreen"]) .spinner { border-color:var(--line); border-top-color:var(--green); }
html[data-theme]:not([data-theme="evergreen"]) input[type="checkbox"]:checked { background:var(--green); }
html[data-theme]:not([data-theme="evergreen"]) input[type="checkbox"]:checked:after { color:var(--on-accent); }
html[data-theme]:not([data-theme="evergreen"]) :is(button,a,input,select):focus-visible { outline-color:var(--green); }
html[data-theme]:not([data-theme="evergreen"]) :is(input,select)::placeholder { color:var(--text-muted); }
html[data-theme]:not([data-theme="evergreen"]) .small-note { color:var(--text-muted)!important; }
html[data-theme="midnight"] .status-badge { background:#214036; color:#90dab1; }
html[data-theme="midnight"] .status-badge.paused { background:#433929; color:#edc98a; }
html[data-theme="midnight"] .status-badge.review { background:#393047; color:#ccb5eb; }
html[data-theme="midnight"] :is(.status-badge.deleted,.status-badge.archived) { background:#304044; color:#b4c3c1; }
html[data-theme="midnight"] :is(.warning-note,.warning-banner) { background:#393327; color:#e8cd9e; border-color:#5a4930; }
html[data-theme="midnight"] .change { color:#9bdbb5; background:#254034; }
html[data-theme="midnight"] .change.negative { color:#f0ac96; background:#452f2b; }
html[data-theme="midnight"] :is(.error-text,.toast.error,.over-budget) { color:#f0ac96!important; }
html[data-theme="midnight"] :is(.channel-icon.purple,.campaign-symbol.purple,.store-tab-icon.muein) { background:#393047; color:#c8b3e8; }
html[data-theme="midnight"] :is(.channel-icon.cyan,.campaign-symbol.cyan) { background:#263f46; color:#95cad4; }
html[data-theme="midnight"] .store-tab-icon.katateeb { background:#42392c; color:#dcc087; }
html[data-theme="midnight"] .notification-button>span { border-color:var(--surface); }

/* The six previews retain their own palette, independent of the chosen dashboard theme. */
.appearance-card { padding:24px; margin-bottom:23px; }
.appearance-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.appearance-heading h2 { font-family:Manrope,sans-serif; font-size:20px; margin:0 0 8px; letter-spacing:-.5px; }
.appearance-heading p { color:var(--text-muted); font-size:11px; margin:0; line-height:1.8; }
.appearance-badge { display:flex; align-items:center; gap:7px; font-size:9px; color:var(--text-muted); white-space:nowrap; }
.appearance-badge .lucide { width:14px; height:14px; }
.theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.theme-option { display:block; text-align:left; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--surface); transition:border-color .18s,box-shadow .18s; }
.theme-option:hover { border-color:var(--green); }
.theme-option.selected { border-color:var(--green); box-shadow:0 0 0 1px var(--green); }
.theme-preview { display:flex; overflow:hidden; border-radius:7px; height:100px; background:var(--preview-canvas); border:1px solid color-mix(in srgb,var(--preview-ink) 12%,transparent); }
.theme-preview-sidebar { display:flex; flex-direction:column; width:24%; padding:13px 8px; gap:8px; background:var(--preview-surface); border-right:1px solid color-mix(in srgb,var(--preview-ink) 8%,transparent); }
.theme-preview-sidebar b { width:10px; height:10px; background:var(--preview-accent); border-radius:3px; margin-bottom:5px; }
.theme-preview-sidebar i { width:100%; height:3px; border-radius:2px; background:color-mix(in srgb,var(--preview-accent) 30%,transparent); }
.theme-preview-main { flex:1; padding:13px 10px; }
.theme-preview-heading { display:block; height:4px; width:50%; border-radius:2px; margin-bottom:10px; background:var(--preview-ink); opacity:.5; }
.theme-preview-kpis { display:flex; gap:5px; margin-bottom:7px; }
.theme-preview-kpis i { flex:1; height:16px; border-radius:3px; background:var(--preview-surface); border-top:2px solid var(--preview-accent); }
.theme-preview-chart { display:block; height:28px; border-radius:3px; background:var(--preview-surface); color:var(--preview-accent); padding:3px 5px; }
.theme-preview-chart svg { width:100%; height:100%; }
.system-preview { background:linear-gradient(90deg,#edf4ef 50%,#10191d 50%); }
.system-preview .theme-preview-main { background:linear-gradient(90deg,transparent 50%,#19262b 50%); }
.theme-option-heading { display:flex; align-items:center; justify-content:space-between; margin:12px 3px 6px; }
.theme-option-heading strong { font-size:12px; font-weight:600; }
.theme-color-swatch { width:9px; height:9px; border-radius:50%; background:var(--preview-accent); }
.theme-option-description { display:block; font-size:9px; color:var(--text-muted); margin:0 3px; }
.theme-choice-indicator { display:block; margin:10px 3px 2px; font-size:8px; font-weight:500; color:var(--text-muted); }
.theme-option.selected .theme-choice-indicator { color:var(--green); }
.appearance-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:18px; font-size:9px; color:var(--text-muted); line-height:1.8; }
#theme-status { color:var(--accent-text); }
@media (max-width:900px) { .theme-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .appearance-heading { align-items:flex-start; } .appearance-badge { display:none; } .appearance-footer { align-items:flex-start; flex-direction:column; gap:4px; } }
@media (max-width:640px) { .appearance-card { padding:18px; } .theme-options { gap:10px; } .theme-option { padding:7px; } .theme-preview { height:85px; } .theme-option-description { line-height:1.7; } }
@media (prefers-reduced-motion:reduce) { .theme-option { transition:none; } }

html[data-theme]:not([data-theme="evergreen"]) .button-primary:hover { background:var(--green-dark); color:var(--on-accent); }
html[data-theme="midnight"] .chart-large-value>span { color:var(--text-muted)!important; }
html[data-theme]:not([data-theme="evergreen"]) .chart-tooltip span { color:var(--theme-tooltip-text)!important; }