/* Experimental appearance modes — map chrome + org dashboard */

html[data-appearance="dark"],
html[data-appearance="dark-blue"],
html[data-appearance="premium-dark"] {
    color-scheme: dark;
}

/* ---- Map page canvas + body ---- */
html[data-appearance="dark"] {
    --app-page-bg: #0f1419;
    --app-chrome-bg: rgba(30, 41, 59, 0.82);
    --app-chrome-bg-strong: rgba(30, 41, 59, 0.92);
    --app-chrome-text: #e2e8f0;
    --app-chrome-muted: #94a3b8;
    --app-chrome-border: rgba(255, 255, 255, 0.1);
    --app-field-bg: rgba(15, 23, 42, 0.65);
    --app-dialog-surface: linear-gradient(145deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98));
}

html[data-appearance="dark-blue"] {
    --app-page-bg: #0a1628;
    --app-chrome-bg: rgba(12, 35, 64, 0.88);
    --app-chrome-bg-strong: rgba(12, 35, 64, 0.94);
    --app-chrome-text: #e0f2fe;
    --app-chrome-muted: #7dd3fc;
    --app-chrome-border: rgba(56, 189, 248, 0.14);
    --app-field-bg: rgba(8, 28, 52, 0.72);
    --app-dialog-surface: linear-gradient(145deg, rgba(12, 35, 64, 0.96), rgba(8, 28, 52, 0.98));
}

/* premium-light chrome + page — see ophanim-appearance-premium.css (gradient stroke shells) */

html[data-appearance="dark"] body,
html[data-appearance="dark-blue"] body,
html[data-appearance="premium-dark"] body {
    background-color: var(--app-page-bg);
    color: var(--app-chrome-text);
}

html[data-appearance="dark"] #map,
html[data-appearance="dark-blue"] #map,
html[data-appearance="premium-dark"] #map {
    background-color: var(--app-page-bg);
}

/* ---- Org dashboard (glass-body) ---- */
html[data-appearance="dark"] body.glass-body {
    --bg: #0f1419;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --hairline: rgba(255, 255, 255, 0.1);
    --hairline-soft: rgba(255, 255, 255, 0.06);
    --glass: rgba(30, 41, 59, 0.62);
    --glass-strong: rgba(30, 41, 59, 0.78);
    --glass-inset: rgba(15, 23, 42, 0.55);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
    background-color: var(--bg);
    background-image:
        radial-gradient(42rem 42rem at 8% -8%, rgba(71, 85, 105, 0.2), transparent 60%),
        radial-gradient(38rem 38rem at 102% 4%, rgba(51, 65, 85, 0.18), transparent 60%),
        radial-gradient(46rem 46rem at 78% 108%, rgba(30, 41, 59, 0.22), transparent 60%);
}

html[data-appearance="dark-blue"] body.glass-body {
    --bg: #0a1628;
    --text: #e0f2fe;
    --text-muted: #7dd3fc;
    --hairline: rgba(56, 189, 248, 0.14);
    --hairline-soft: rgba(14, 165, 233, 0.08);
    --glass: rgba(12, 35, 64, 0.65);
    --glass-strong: rgba(15, 45, 82, 0.82);
    --glass-inset: rgba(8, 28, 52, 0.58);
    --shadow: 0 10px 30px rgba(2, 8, 23, 0.45), 0 2px 8px rgba(14, 165, 233, 0.08);
    --shadow-lg: 0 20px 50px rgba(2, 8, 23, 0.55), 0 4px 12px rgba(56, 189, 248, 0.1);
    background-color: var(--bg);
    background-image:
        radial-gradient(42rem 42rem at 8% -8%, rgba(37, 99, 235, 0.22), transparent 60%),
        radial-gradient(38rem 38rem at 102% 4%, rgba(14, 165, 233, 0.16), transparent 60%),
        radial-gradient(46rem 46rem at 78% 108%, rgba(2, 132, 199, 0.18), transparent 60%);
}

html[data-appearance="dark"] body.glass-body .glass-inset,
html[data-appearance="dark-blue"] body.glass-body .glass-inset,
html[data-appearance="premium-dark"] body.glass-body .glass-inset {
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] body.glass-body .dash-map-pill,
html[data-appearance="dark-blue"] body.glass-body .dash-map-pill,
html[data-appearance="premium-dark"] body.glass-body .dash-map-pill {
    background: var(--glass-strong);
    border-color: var(--hairline);
    color: var(--text);
}

html[data-appearance="dark-blue"] body.glass-body .dash-map-pill:hover,
html[data-appearance="premium-dark"] body.glass-body .dash-map-pill:hover {
    border-color: rgba(56, 189, 248, 0.35);
}

html[data-appearance="dark"] body.glass-body .mascot-picker-card,
html[data-appearance="dark-blue"] body.glass-body .mascot-picker-card,
html[data-appearance="premium-dark"] body.glass-body .mascot-picker-card {
    background: var(--glass-inset);
    border-color: var(--hairline-soft);
}

html[data-appearance="dark"] body.glass-body .mascot-card-preview-host,
html[data-appearance="dark-blue"] body.glass-body .mascot-card-preview-host,
html[data-appearance="premium-dark"] body.glass-body .mascot-card-preview-host {
    background: linear-gradient(180deg, rgba(10, 15, 24, 0.95) 0%, rgba(6, 10, 18, 0.88) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-appearance="dark"] body.glass-body .mascot-picker-card-option.is-selected .mascot-picker-card,
html[data-appearance="dark"] body.glass-body .mascot-picker-card-option input:checked + .mascot-picker-card,
html[data-appearance="dark-blue"] body.glass-body .mascot-picker-card-option.is-selected .mascot-picker-card,
html[data-appearance="premium-dark"] body.glass-body .mascot-picker-card-option.is-selected .mascot-picker-card,
html[data-appearance="dark-blue"] body.glass-body .mascot-picker-card-option input:checked + .mascot-picker-card,
html[data-appearance="premium-dark"] body.glass-body .mascot-picker-card-option input:checked + .mascot-picker-card {
    border-color: rgba(47, 123, 246, 0.45);
    box-shadow: 0 0 0 1px rgba(47, 123, 246, 0.2);
}

html[data-appearance="dark-blue"] body.glass-body .mascot-picker-card-option.is-selected .mascot-picker-card,
html[data-appearance="premium-dark"] body.glass-body .mascot-picker-card-option.is-selected .mascot-picker-card,
html[data-appearance="dark-blue"] body.glass-body .mascot-picker-card-option input:checked + .mascot-picker-card,
html[data-appearance="premium-dark"] body.glass-body .mascot-picker-card-option input:checked + .mascot-picker-card {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2);
}

html[data-appearance="dark"] body.glass-body input,
html[data-appearance="dark"] body.glass-body textarea,
html[data-appearance="dark"] body.glass-body select,
html[data-appearance="dark-blue"] body.glass-body input,
html[data-appearance="premium-dark"] body.glass-body input,
html[data-appearance="dark-blue"] body.glass-body textarea,
html[data-appearance="premium-dark"] body.glass-body textarea,
html[data-appearance="dark-blue"] body.glass-body select,
html[data-appearance="premium-dark"] body.glass-body select {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

html[data-appearance="dark-blue"] body.glass-body input:focus,
html[data-appearance="premium-dark"] body.glass-body input:focus,
html[data-appearance="dark-blue"] body.glass-body textarea:focus,
html[data-appearance="premium-dark"] body.glass-body textarea:focus,
html[data-appearance="dark-blue"] body.glass-body select:focus,
html[data-appearance="premium-dark"] body.glass-body select:focus {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* ---- Map chrome ---- */
html[data-appearance="dark"] #sidebar,
html[data-appearance="dark-blue"] #sidebar,
html[data-appearance="premium-dark"] #sidebar {
    background-color: rgba(30, 41, 59, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    color: #e2e8f0;
}

html[data-appearance="dark-blue"] #sidebar,
html[data-appearance="premium-dark"] #sidebar {
    background-color: rgba(12, 35, 64, 0.82);
    border-color: rgba(56, 189, 248, 0.12);
}

html[data-appearance="dark"] #sidebar,
html[data-appearance="dark-blue"] #sidebar,
html[data-appearance="premium-dark"] #sidebar {
    color: #f1f5f9 !important;
}

html[data-appearance="dark"] #sidebar h1,
html[data-appearance="dark"] #sidebar h1 strong,
html[data-appearance="dark-blue"] #sidebar h1,
html[data-appearance="premium-dark"] #sidebar h1,
html[data-appearance="dark-blue"] #sidebar h1 strong,
html[data-appearance="premium-dark"] #sidebar h1 strong,
html[data-appearance="dark"] #sidebar label,
html[data-appearance="dark-blue"] #sidebar label,
html[data-appearance="premium-dark"] #sidebar label,
html[data-appearance="dark"] #sidebar .sidebar-section-title,
html[data-appearance="dark-blue"] #sidebar .sidebar-section-title,
html[data-appearance="premium-dark"] #sidebar .sidebar-section-title,
html[data-appearance="dark"] #sidebar p,
html[data-appearance="dark-blue"] #sidebar p,
html[data-appearance="premium-dark"] #sidebar p,
html[data-appearance="dark"] #sidebar span,
html[data-appearance="dark-blue"] #sidebar span,
html[data-appearance="premium-dark"] #sidebar span,
html[data-appearance="dark"] #sidebar div,
html[data-appearance="dark-blue"] #sidebar div,
html[data-appearance="premium-dark"] #sidebar div,
html[data-appearance="dark"] #sidebar strong,
html[data-appearance="dark-blue"] #sidebar strong,
html[data-appearance="premium-dark"] #sidebar strong,
html[data-appearance="dark"] #feed-me-data-text,
html[data-appearance="dark-blue"] #feed-me-data-text,
html[data-appearance="premium-dark"] #feed-me-data-text,
html[data-appearance="dark"] #sidebar .unit-suffix,
html[data-appearance="dark-blue"] #sidebar .unit-suffix,
html[data-appearance="premium-dark"] #sidebar .unit-suffix,
html[data-appearance="dark"] #stroke-width-value,
html[data-appearance="dark-blue"] #stroke-width-value,
html[data-appearance="premium-dark"] #stroke-width-value {
    color: #f1f5f9 !important;
}

html[data-appearance="dark"] #sidebar select,
html[data-appearance="dark"] #sidebar input:not([type="range"]),
html[data-appearance="dark"] #sidebar textarea,
html[data-appearance="dark-blue"] #sidebar select,
html[data-appearance="premium-dark"] #sidebar select,
html[data-appearance="dark-blue"] #sidebar input:not([type="range"]),
html[data-appearance="premium-dark"] #sidebar input:not([type="range"]),
html[data-appearance="dark-blue"] #sidebar textarea,
html[data-appearance="premium-dark"] #sidebar textarea {
    background: var(--app-field-bg) !important;
    border-color: var(--app-chrome-border) !important;
    color: #f1f5f9 !important;
}

html[data-appearance="dark"] #sidebar select option,
html[data-appearance="dark-blue"] #sidebar select option,
html[data-appearance="premium-dark"] #sidebar select option {
    background: #1e293b;
    color: #f1f5f9;
}

html[data-appearance="dark"] #slider-container,
html[data-appearance="dark"] #elevation-scale-container,
html[data-appearance="dark"] #hexagon-size-container,
html[data-appearance="dark"] #transparency-scale-container,
html[data-appearance="dark"] #custom-score-container,
html[data-appearance="dark-blue"] #slider-container,
html[data-appearance="premium-dark"] #slider-container,
html[data-appearance="dark-blue"] #elevation-scale-container,
html[data-appearance="premium-dark"] #elevation-scale-container,
html[data-appearance="dark-blue"] #hexagon-size-container,
html[data-appearance="premium-dark"] #hexagon-size-container,
html[data-appearance="dark-blue"] #transparency-scale-container,
html[data-appearance="premium-dark"] #transparency-scale-container,
html[data-appearance="dark-blue"] #custom-score-container,
html[data-appearance="premium-dark"] #custom-score-container {
    background-color: rgba(15, 23, 42, 0.35) !important;
}

html[data-appearance="dark"] #sidebar button,
html[data-appearance="dark-blue"] #sidebar button,
html[data-appearance="premium-dark"] #sidebar button {
    background-color: #2563eb;
    color: #f8fafc;
}

html[data-appearance="dark"] #sidebar button:hover,
html[data-appearance="dark-blue"] #sidebar button:hover,
html[data-appearance="premium-dark"] #sidebar button:hover {
    background-color: #1d4ed8;
}

html[data-appearance="dark"] #basemap-selector,
html[data-appearance="dark"] #hamburger-basemap-selector,
html[data-appearance="dark-blue"] #basemap-selector,
html[data-appearance="premium-dark"] #basemap-selector,
html[data-appearance="dark-blue"] #hamburger-basemap-selector,
html[data-appearance="premium-dark"] #hamburger-basemap-selector {
    background: var(--app-field-bg);
    border-color: var(--app-chrome-border);
    color: var(--app-chrome-text);
}

html[data-appearance="dark"] #geocoder-toggle-btn,
html[data-appearance="dark"] #toggle-measuring-tool,
html[data-appearance="dark-blue"] #geocoder-toggle-btn,
html[data-appearance="premium-dark"] #geocoder-toggle-btn,
html[data-appearance="dark-blue"] #toggle-measuring-tool,
html[data-appearance="premium-dark"] #toggle-measuring-tool {
    background: var(--app-chrome-bg) !important;
    border: 1px solid var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Light theme — collapsed geocoder + measuring tool (not expanded search pill) */
body[data-appearance-mode="light"] #geocoder-toggle-btn,
body[data-appearance-mode="light"] #toggle-measuring-tool,
html:not([data-appearance]) #geocoder-toggle-btn,
html:not([data-appearance]) #toggle-measuring-tool {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    color: #0f172a !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

body[data-appearance-mode="light"] #geocoder-toggle-btn svg,
body[data-appearance-mode="light"] #toggle-measuring-tool svg,
html:not([data-appearance]) #geocoder-toggle-btn svg,
html:not([data-appearance]) #toggle-measuring-tool svg {
    stroke: currentColor !important;
}

body[data-appearance-mode="light"] #geocoder-toggle-btn:hover,
body[data-appearance-mode="light"] #toggle-measuring-tool:hover,
html:not([data-appearance]) #geocoder-toggle-btn:hover,
html:not([data-appearance]) #toggle-measuring-tool:hover {
    background: #f5f5f5 !important;
    color: #0f172a !important;
}

body[data-appearance-mode="light"] #toggle-measuring-tool:not(.active),
html:not([data-appearance]) #toggle-measuring-tool:not(.active) {
    background: #ffffff !important;
    border-color: #ddd !important;
    color: #0f172a !important;
}

html[data-appearance="dark"] #geocoder-results,
html[data-appearance="dark-blue"] #geocoder-results,
html[data-appearance="premium-dark"] #geocoder-results {
    background: var(--app-chrome-bg-strong);
    border-color: var(--app-chrome-border);
    color: var(--app-chrome-text);
}

/* ---- Sidebar: mode toggle, layers panel, pills ---- */
html[data-appearance="dark"] .smt-label,
html[data-appearance="dark-blue"] .smt-label,
html[data-appearance="premium-dark"] .smt-label {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .smt-label.active,
html[data-appearance="dark-blue"] .smt-label.active,
html[data-appearance="premium-dark"] .smt-label.active {
    color: var(--app-chrome-text) !important;
    font-weight: 600;
}

html[data-appearance="dark"] #layers-panel .lm-actions,
html[data-appearance="dark-blue"] #layers-panel .lm-actions,
html[data-appearance="premium-dark"] #layers-panel .lm-actions {
    border-bottom-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .lm-action-btn,
html[data-appearance="dark"] .lm-calc-stats-btn,
html[data-appearance="dark"] .lm-style-btn,
html[data-appearance="dark-blue"] .lm-action-btn,
html[data-appearance="premium-dark"] .lm-action-btn,
html[data-appearance="dark-blue"] .lm-calc-stats-btn,
html[data-appearance="premium-dark"] .lm-calc-stats-btn,
html[data-appearance="dark-blue"] .lm-style-btn,
html[data-appearance="premium-dark"] .lm-style-btn {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .lm-action-btn:hover,
html[data-appearance="dark"] .lm-calc-stats-btn:hover,
html[data-appearance="dark"] .lm-style-btn:hover,
html[data-appearance="dark-blue"] .lm-action-btn:hover,
html[data-appearance="premium-dark"] .lm-action-btn:hover,
html[data-appearance="dark-blue"] .lm-calc-stats-btn:hover,
html[data-appearance="premium-dark"] .lm-calc-stats-btn:hover,
html[data-appearance="dark-blue"] .lm-style-btn:hover,
html[data-appearance="premium-dark"] .lm-style-btn:hover {
    background: rgba(71, 85, 105, 0.72) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
    color: #c7d2fe !important;
}

html[data-appearance="dark"] .lm-layer-name,
html[data-appearance="dark-blue"] .lm-layer-name,
html[data-appearance="premium-dark"] .lm-layer-name {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .lm-layer-entry.active .lm-layer-name,
html[data-appearance="dark-blue"] .lm-layer-entry.active .lm-layer-name,
html[data-appearance="premium-dark"] .lm-layer-entry.active .lm-layer-name {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .lm-layer-entry:hover,
html[data-appearance="dark-blue"] .lm-layer-entry:hover,
html[data-appearance="premium-dark"] .lm-layer-entry:hover {
    background: rgba(99, 102, 241, 0.12) !important;
}

html[data-appearance="dark"] .lm-layer-entry.active,
html[data-appearance="dark-blue"] .lm-layer-entry.active,
html[data-appearance="premium-dark"] .lm-layer-entry.active {
    background: rgba(99, 102, 241, 0.18) !important;
}

html[data-appearance="dark"] .lm-layer-expanded,
html[data-appearance="dark-blue"] .lm-layer-expanded,
html[data-appearance="premium-dark"] .lm-layer-expanded {
    border-top-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .lm-filter-row label,
html[data-appearance="dark"] .lm-stat-label,
html[data-appearance="dark"] .lm-expand-empty,
html[data-appearance="dark"] .lm-picker-name,
html[data-appearance="dark-blue"] .lm-filter-row label,
html[data-appearance="premium-dark"] .lm-filter-row label,
html[data-appearance="dark-blue"] .lm-stat-label,
html[data-appearance="premium-dark"] .lm-stat-label,
html[data-appearance="dark-blue"] .lm-expand-empty,
html[data-appearance="premium-dark"] .lm-expand-empty,
html[data-appearance="dark-blue"] .lm-picker-name,
html[data-appearance="premium-dark"] .lm-picker-name {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .lm-stat-value,
html[data-appearance="dark-blue"] .lm-stat-value,
html[data-appearance="premium-dark"] .lm-stat-value {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .lm-stats-title,
html[data-appearance="dark-blue"] .lm-stats-title,
html[data-appearance="premium-dark"] .lm-stats-title {
    color: #a5b4fc !important;
}

html[data-appearance="dark"] .lm-range-bg,
html[data-appearance="dark-blue"] .lm-range-bg,
html[data-appearance="premium-dark"] .lm-range-bg {
    background: rgba(51, 65, 85, 0.65) !important;
}

html[data-appearance="dark"] .lm-range-handle,
html[data-appearance="dark-blue"] .lm-range-handle,
html[data-appearance="premium-dark"] .lm-range-handle {
    background: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .lm-attr-picker,
html[data-appearance="dark-blue"] .lm-attr-picker,
html[data-appearance="premium-dark"] .lm-attr-picker {
    border-color: var(--app-chrome-border) !important;
    background: rgba(15, 23, 42, 0.35) !important;
}

html[data-appearance="dark"] .lm-picker-header,
html[data-appearance="dark-blue"] .lm-picker-header,
html[data-appearance="premium-dark"] .lm-picker-header {
    background: rgba(15, 23, 42, 0.45) !important;
    border-bottom-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .lm-picker-row,
html[data-appearance="dark-blue"] .lm-picker-row,
html[data-appearance="premium-dark"] .lm-picker-row {
    border-bottom-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .lm-remove-btn,
html[data-appearance="dark-blue"] .lm-remove-btn,
html[data-appearance="premium-dark"] .lm-remove-btn {
    background: transparent !important;
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .filter-chip,
html[data-appearance="dark-blue"] .filter-chip,
html[data-appearance="premium-dark"] .filter-chip {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .filter-chip:hover,
html[data-appearance="dark-blue"] .filter-chip:hover,
html[data-appearance="premium-dark"] .filter-chip:hover {
    background: rgba(71, 85, 105, 0.72) !important;
}

html[data-appearance="dark"] .filter-chip.active,
html[data-appearance="dark-blue"] .filter-chip.active,
html[data-appearance="premium-dark"] .filter-chip.active {
    background: rgba(59, 130, 246, 0.22) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
    color: #93c5fd !important;
}

html[data-appearance="dark"] .attribute-tag,
html[data-appearance="dark-blue"] .attribute-tag,
html[data-appearance="premium-dark"] .attribute-tag {
    background: rgba(51, 65, 85, 0.55) !important;
    border: 1px solid var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .attribute-tag.selected,
html[data-appearance="dark-blue"] .attribute-tag.selected,
html[data-appearance="premium-dark"] .attribute-tag.selected {
    background: rgba(59, 130, 246, 0.25) !important;
    color: #93c5fd !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2) !important;
}

html[data-appearance="dark"] .layer-item,
html[data-appearance="dark-blue"] .layer-item,
html[data-appearance="premium-dark"] .layer-item {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .layer-item:hover,
html[data-appearance="dark-blue"] .layer-item:hover,
html[data-appearance="premium-dark"] .layer-item:hover {
    background: rgba(71, 85, 105, 0.72) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

html[data-appearance="dark"] .layer-item.selected,
html[data-appearance="dark-blue"] .layer-item.selected,
html[data-appearance="premium-dark"] .layer-item.selected {
    background: rgba(59, 130, 246, 0.22) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
}

html[data-appearance="dark"] .tiles-layers-list,
html[data-appearance="dark-blue"] .tiles-layers-list,
html[data-appearance="premium-dark"] .tiles-layers-list {
    background: rgba(15, 23, 42, 0.45) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .tiles-layers-placeholder,
html[data-appearance="dark-blue"] .tiles-layers-placeholder,
html[data-appearance="premium-dark"] .tiles-layers-placeholder {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .scale-options,
html[data-appearance="dark-blue"] .scale-options,
html[data-appearance="premium-dark"] .scale-options {
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .selected-scale,
html[data-appearance="dark-blue"] .selected-scale,
html[data-appearance="premium-dark"] .selected-scale {
    border-color: var(--app-chrome-border) !important;
}

/* Planning / UK layer selection dialog (styles injected from core.js) */
html[data-appearance="dark"] .layer-selection-dialog,
html[data-appearance="dark-blue"] .layer-selection-dialog,
html[data-appearance="premium-dark"] .layer-selection-dialog {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99)) !important;
    border: 1px solid var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.5) !important;
}

html[data-appearance="dark-blue"] .layer-selection-dialog,
html[data-appearance="premium-dark"] .layer-selection-dialog {
    background: linear-gradient(145deg, rgba(12, 35, 64, 0.98), rgba(8, 28, 52, 0.99)) !important;
}

html[data-appearance="dark"] .layer-dialog-header,
html[data-appearance="dark"] .layer-dialog-utilities,
html[data-appearance="dark"] .layer-dialog-footer,
html[data-appearance="dark-blue"] .layer-dialog-header,
html[data-appearance="premium-dark"] .layer-dialog-header,
html[data-appearance="dark-blue"] .layer-dialog-utilities,
html[data-appearance="premium-dark"] .layer-dialog-utilities,
html[data-appearance="dark-blue"] .layer-dialog-footer,
html[data-appearance="premium-dark"] .layer-dialog-footer {
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .layer-dialog-eyebrow,
html[data-appearance="dark"] .layer-dialog-copy,
html[data-appearance="dark"] .search-label,
html[data-appearance="dark-blue"] .layer-dialog-eyebrow,
html[data-appearance="premium-dark"] .layer-dialog-eyebrow,
html[data-appearance="dark-blue"] .layer-dialog-copy,
html[data-appearance="premium-dark"] .layer-dialog-copy,
html[data-appearance="dark-blue"] .search-label,
html[data-appearance="premium-dark"] .search-label {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .layer-dialog-header h3,
html[data-appearance="dark"] .layer-group-heading h4,
html[data-appearance="dark-blue"] .layer-dialog-header h3,
html[data-appearance="premium-dark"] .layer-dialog-header h3,
html[data-appearance="dark-blue"] .layer-group-heading h4,
html[data-appearance="premium-dark"] .layer-group-heading h4 {
    color: var(--app-chrome-text) !important;
    background: transparent !important;
}

html[data-appearance="dark"] .layer-group-heading p,
html[data-appearance="dark-blue"] .layer-group-heading p,
html[data-appearance="premium-dark"] .layer-group-heading p {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .layer-dialog-close,
html[data-appearance="dark-blue"] .layer-dialog-close,
html[data-appearance="premium-dark"] .layer-dialog-close {
    background: rgba(51, 65, 85, 0.55) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #layer-search-input,
html[data-appearance="dark"] #uk-layer-search-input,
html[data-appearance="dark-blue"] #layer-search-input,
html[data-appearance="premium-dark"] #layer-search-input,
html[data-appearance="dark-blue"] #uk-layer-search-input,
html[data-appearance="premium-dark"] #uk-layer-search-input {
    background: var(--app-field-bg) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .layer-group,
html[data-appearance="dark-blue"] .layer-group,
html[data-appearance="premium-dark"] .layer-group {
    background: rgba(15, 23, 42, 0.45) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .layer-group-controls button,
html[data-appearance="dark-blue"] .layer-group-controls button,
html[data-appearance="premium-dark"] .layer-group-controls button {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .layer-group-controls button:hover,
html[data-appearance="dark-blue"] .layer-group-controls button:hover,
html[data-appearance="premium-dark"] .layer-group-controls button:hover {
    background: rgba(71, 85, 105, 0.72) !important;
}

html[data-appearance="dark"] .layer-option,
html[data-appearance="dark-blue"] .layer-option,
html[data-appearance="premium-dark"] .layer-option {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .layer-option:hover,
html[data-appearance="dark-blue"] .layer-option:hover,
html[data-appearance="premium-dark"] .layer-option:hover {
    background: rgba(71, 85, 105, 0.72) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

html[data-appearance="dark"] .layer-option.selected,
html[data-appearance="dark-blue"] .layer-option.selected,
html[data-appearance="premium-dark"] .layer-option.selected {
    background: rgba(59, 130, 246, 0.28) !important;
    border-color: rgba(96, 165, 250, 0.55) !important;
    color: var(--app-chrome-text) !important;
    box-shadow: 0 4px 18px rgba(59, 130, 246, 0.2) !important;
}

html[data-appearance="dark"] .layer-option .layer-option-name,
html[data-appearance="dark-blue"] .layer-option .layer-option-name,
html[data-appearance="premium-dark"] .layer-option .layer-option-name {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .layer-option small,
html[data-appearance="dark-blue"] .layer-option small,
html[data-appearance="premium-dark"] .layer-option small {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .badge-vector,
html[data-appearance="dark-blue"] .badge-vector,
html[data-appearance="premium-dark"] .badge-vector {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

html[data-appearance="dark"] .badge-raster,
html[data-appearance="dark-blue"] .badge-raster,
html[data-appearance="premium-dark"] .badge-raster {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

html[data-appearance="dark"] .ghost-button,
html[data-appearance="dark-blue"] .ghost-button,
html[data-appearance="premium-dark"] .ghost-button {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .ghost-button:hover,
html[data-appearance="dark-blue"] .ghost-button:hover,
html[data-appearance="premium-dark"] .ghost-button:hover {
    background: rgba(71, 85, 105, 0.72) !important;
}

/* ---- Map dialogs (full surface theming) ---- */
html[data-appearance="dark"] .dialog-fixed-center,
html[data-appearance="dark-blue"] .dialog-fixed-center,
html[data-appearance="premium-dark"] .dialog-fixed-center,
html[data-appearance="dark"] [id$="-dialog"],
html[data-appearance="dark-blue"] [id$="-dialog"],
html[data-appearance="premium-dark"] [id$="-dialog"] {
    background: var(--app-dialog-surface) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Dialog headings: text colour only — never boxed backgrounds on h2/h3 */
html[data-appearance="dark"] [id$="-dialog"] h2,
html[data-appearance="dark"] [id$="-dialog"] h3,
html[data-appearance="dark"] [id$="-dialog"] h4,
html[data-appearance="dark-blue"] [id$="-dialog"] h2,
html[data-appearance="premium-dark"] [id$="-dialog"] h2,
html[data-appearance="dark-blue"] [id$="-dialog"] h3,
html[data-appearance="premium-dark"] [id$="-dialog"] h3,
html[data-appearance="dark-blue"] [id$="-dialog"] h4,
html[data-appearance="premium-dark"] [id$="-dialog"] h4 {
    color: var(--app-chrome-text) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-appearance="dark"] [id$="-dialog"] p,
html[data-appearance="dark"] [id$="-dialog"] label,
html[data-appearance="dark"] [id$="-dialog"] span:not(.bld-scale-swatch):not(.lsd-scale-option):not(.modeler-attribute-chip),
html[data-appearance="dark-blue"] [id$="-dialog"] p,
html[data-appearance="premium-dark"] [id$="-dialog"] p,
html[data-appearance="dark-blue"] [id$="-dialog"] label,
html[data-appearance="premium-dark"] [id$="-dialog"] label,
html[data-appearance="dark-blue"] [id$="-dialog"] span:not(.bld-scale-swatch):not(.lsd-scale-option):not(.modeler-attribute-chip),
html[data-appearance="premium-dark"] [id$="-dialog"] span:not(.bld-scale-swatch):not(.lsd-scale-option):not(.modeler-attribute-chip) {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] [id$="-dialog"] .modeler-field-label,
html[data-appearance="dark"] [id$="-dialog"] .modeler-step-title,
html[data-appearance="dark-blue"] [id$="-dialog"] .modeler-field-label,
html[data-appearance="premium-dark"] [id$="-dialog"] .modeler-field-label,
html[data-appearance="dark-blue"] [id$="-dialog"] .modeler-step-title,
html[data-appearance="premium-dark"] [id$="-dialog"] .modeler-step-title {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] [id$="-dialog"] .explanation,
html[data-appearance="dark-blue"] [id$="-dialog"] .explanation,
html[data-appearance="premium-dark"] [id$="-dialog"] .explanation {
    background: rgba(15, 23, 42, 0.55) !important;
    color: var(--app-chrome-muted) !important;
    border-left-color: #3b82f6 !important;
}

html[data-appearance="dark"] [id$="-dialog"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-appearance="dark"] [id$="-dialog"] select,
html[data-appearance="dark"] [id$="-dialog"] textarea,
html[data-appearance="dark-blue"] [id$="-dialog"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-appearance="premium-dark"] [id$="-dialog"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-appearance="dark-blue"] [id$="-dialog"] select,
html[data-appearance="premium-dark"] [id$="-dialog"] select,
html[data-appearance="dark-blue"] [id$="-dialog"] textarea,
html[data-appearance="premium-dark"] [id$="-dialog"] textarea {
    background: var(--app-field-bg) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] [id$="-dialog"] table,
html[data-appearance="dark-blue"] [id$="-dialog"] table,
html[data-appearance="premium-dark"] [id$="-dialog"] table {
    color: var(--app-chrome-text);
}

html[data-appearance="dark"] [id$="-dialog"] th,
html[data-appearance="dark-blue"] [id$="-dialog"] th,
html[data-appearance="premium-dark"] [id$="-dialog"] th {
    background: rgba(15, 23, 42, 0.55) !important;
    color: var(--app-chrome-text) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] [id$="-dialog"] td,
html[data-appearance="dark-blue"] [id$="-dialog"] td,
html[data-appearance="premium-dark"] [id$="-dialog"] td {
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text);
}

/* Graphical modeler / custom score / weighted score */
html[data-appearance="dark"] .graphical-modeler-dialog,
html[data-appearance="dark-blue"] .graphical-modeler-dialog,
html[data-appearance="premium-dark"] .graphical-modeler-dialog,
html[data-appearance="dark"] #weighted-score-dialog,
html[data-appearance="dark-blue"] #weighted-score-dialog,
html[data-appearance="premium-dark"] #weighted-score-dialog,
html[data-appearance="dark"] #multifilter-dialog,
html[data-appearance="dark-blue"] #multifilter-dialog,
html[data-appearance="premium-dark"] #multifilter-dialog {
    background: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid var(--app-chrome-border);
    color: var(--app-chrome-text);
}

html[data-appearance="dark-blue"] .graphical-modeler-dialog,
html[data-appearance="premium-dark"] .graphical-modeler-dialog,
html[data-appearance="dark-blue"] #weighted-score-dialog,
html[data-appearance="premium-dark"] #weighted-score-dialog,
html[data-appearance="dark-blue"] #multifilter-dialog,
html[data-appearance="premium-dark"] #multifilter-dialog {
    background: rgba(12, 35, 64, 0.98) !important;
}

html[data-appearance="dark"] #multifilter-dialog .filter-item,
html[data-appearance="dark-blue"] #multifilter-dialog .filter-item,
html[data-appearance="premium-dark"] #multifilter-dialog .filter-item {
    background: rgba(15, 23, 42, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    box-shadow: none;
}

html[data-appearance="dark"] #multifilter-dialog .filter-item .attribute-name,
html[data-appearance="dark-blue"] #multifilter-dialog .filter-item .attribute-name,
html[data-appearance="premium-dark"] #multifilter-dialog .filter-item .attribute-name {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #multifilter-dialog .filter-item .range-inputs input,
html[data-appearance="dark-blue"] #multifilter-dialog .filter-item .range-inputs input,
html[data-appearance="premium-dark"] #multifilter-dialog .filter-item .range-inputs input {
    background: var(--app-field-bg) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #multifilter-dialog .noUi-target,
html[data-appearance="dark-blue"] #multifilter-dialog .noUi-target,
html[data-appearance="premium-dark"] #multifilter-dialog .noUi-target {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    box-shadow: none !important;
}

html[data-appearance="dark"] #multifilter-dialog .noUi-handle,
html[data-appearance="dark-blue"] #multifilter-dialog .noUi-handle,
html[data-appearance="premium-dark"] #multifilter-dialog .noUi-handle {
    border-color: var(--app-chrome-border) !important;
    background-color: #3b82f6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

html[data-appearance="dark"] #multifilter-dialog .button-row,
html[data-appearance="dark-blue"] #multifilter-dialog .button-row,
html[data-appearance="premium-dark"] #multifilter-dialog .button-row {
    background: var(--app-dialog-surface) !important;
}

html[data-appearance="dark"] .graphical-modeler-header,
html[data-appearance="dark-blue"] .graphical-modeler-header,
html[data-appearance="premium-dark"] .graphical-modeler-header {
    background: rgba(15, 23, 42, 0.55) !important;
    color: var(--app-chrome-text) !important;
    border-bottom: 1px solid var(--app-chrome-border) !important;
}

html[data-appearance="dark-blue"] .graphical-modeler-header,
html[data-appearance="premium-dark"] .graphical-modeler-header {
    background: rgba(8, 28, 52, 0.6) !important;
}

html[data-appearance="dark"] .graphical-modeler-header h3,
html[data-appearance="dark-blue"] .graphical-modeler-header h3,
html[data-appearance="premium-dark"] .graphical-modeler-header h3 {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .graphical-modeler-header p,
html[data-appearance="dark-blue"] .graphical-modeler-header p,
html[data-appearance="premium-dark"] .graphical-modeler-header p {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .modeler-sidebar,
html[data-appearance="dark-blue"] .modeler-sidebar,
html[data-appearance="premium-dark"] .modeler-sidebar {
    background: rgba(15, 23, 42, 0.45) !important;
    border-right-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .modeler-main,
html[data-appearance="dark-blue"] .modeler-main,
html[data-appearance="premium-dark"] .modeler-main {
    background: transparent !important;
}

html[data-appearance="dark"] .modeler-sidebar-title,
html[data-appearance="dark"] .modeler-field-label,
html[data-appearance="dark"] .modeler-step-title,
html[data-appearance="dark-blue"] .modeler-sidebar-title,
html[data-appearance="premium-dark"] .modeler-sidebar-title,
html[data-appearance="dark-blue"] .modeler-field-label,
html[data-appearance="premium-dark"] .modeler-field-label,
html[data-appearance="dark-blue"] .modeler-step-title,
html[data-appearance="premium-dark"] .modeler-step-title {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .modeler-library-description,
html[data-appearance="dark"] .modeler-step-description,
html[data-appearance="dark"] .modeler-hint,
html[data-appearance="dark-blue"] .modeler-library-description,
html[data-appearance="premium-dark"] .modeler-library-description,
html[data-appearance="dark-blue"] .modeler-step-description,
html[data-appearance="premium-dark"] .modeler-step-description,
html[data-appearance="dark-blue"] .modeler-hint,
html[data-appearance="premium-dark"] .modeler-hint {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .modeler-library-card,
html[data-appearance="dark"] .modeler-step-card,
html[data-appearance="dark-blue"] .modeler-library-card,
html[data-appearance="premium-dark"] .modeler-library-card,
html[data-appearance="dark-blue"] .modeler-step-card,
html[data-appearance="premium-dark"] .modeler-step-card {
    background: rgba(30, 41, 59, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    box-shadow: none;
}

html[data-appearance="dark"] .modeler-icon-button,
html[data-appearance="dark-blue"] .modeler-icon-button,
html[data-appearance="premium-dark"] .modeler-icon-button {
    background: rgba(51, 65, 85, 0.55) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .modeler-chip-button,
html[data-appearance="dark-blue"] .modeler-chip-button,
html[data-appearance="premium-dark"] .modeler-chip-button {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #c4b5fd !important;
}

html[data-appearance="dark"] .modeler-empty-hint,
html[data-appearance="dark"] .modeler-empty-state,
html[data-appearance="dark-blue"] .modeler-empty-hint,
html[data-appearance="premium-dark"] .modeler-empty-hint,
html[data-appearance="dark-blue"] .modeler-empty-state,
html[data-appearance="premium-dark"] .modeler-empty-state {
    background: rgba(99, 102, 241, 0.12) !important;
    color: var(--app-chrome-muted) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .modeler-attribute-chip-row,
html[data-appearance="dark-blue"] .modeler-attribute-chip-row,
html[data-appearance="premium-dark"] .modeler-attribute-chip-row {
    background: rgba(15, 23, 42, 0.45) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] #formula-attribute-selection,
html[data-appearance="dark-blue"] #formula-attribute-selection,
html[data-appearance="premium-dark"] #formula-attribute-selection {
    background: rgba(15, 23, 42, 0.45) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .modeler-attribute-chip:not(.modeler-step-output),
html[data-appearance="dark-blue"] .modeler-attribute-chip:not(.modeler-step-output),
html[data-appearance="premium-dark"] .modeler-attribute-chip:not(.modeler-step-output) {
    background: rgba(59, 130, 246, 0.22) !important;
    color: #bfdbfe !important;
    border: 1px solid rgba(96, 165, 250, 0.35);
}

html[data-appearance="dark"] .modeler-attribute-chip:not(.modeler-step-output):hover,
html[data-appearance="dark-blue"] .modeler-attribute-chip:not(.modeler-step-output):hover,
html[data-appearance="premium-dark"] .modeler-attribute-chip:not(.modeler-step-output):hover {
    background: rgba(59, 130, 246, 0.38) !important;
    color: #eff6ff !important;
}

html[data-appearance="dark"] .modeler-attribute-chip.muted,
html[data-appearance="dark-blue"] .modeler-attribute-chip.muted,
html[data-appearance="premium-dark"] .modeler-attribute-chip.muted {
    background: rgba(51, 65, 85, 0.55) !important;
    color: var(--app-chrome-muted) !important;
    border-color: var(--app-chrome-border);
}

html[data-appearance="dark"] .modeler-secondary,
html[data-appearance="dark-blue"] .modeler-secondary,
html[data-appearance="premium-dark"] .modeler-secondary {
    background: rgba(51, 65, 85, 0.72) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #custom-score-dialog .calc-btn,
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn,
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn {
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

html[data-appearance="dark"] #custom-score-dialog .calc-btn.number,
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.number,
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.number {
    background-color: rgba(51, 65, 85, 0.9) !important;
}

html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="("],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value=")"],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value=","],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="("],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value=")"],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value=","],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="("],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value=")"],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value=","] {
    background-color: rgba(71, 85, 105, 0.92) !important;
}

html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="/"],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="*"],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="-"],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="+"],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="/"],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="*"],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="-"],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="+"],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="/"],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="*"],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="-"],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="+"] {
    background-color: rgba(234, 88, 12, 0.82) !important;
}

html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="sqrt("],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="pow("],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="log("],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="exp("],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="min("],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="max("],
html[data-appearance="dark"] #custom-score-dialog .calc-btn.operator[data-value="abs("],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="sqrt("],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="pow("],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="log("],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="exp("],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="min("],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="max("],
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.operator[data-value="abs("],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="sqrt("],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="pow("],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="log("],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="exp("],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="min("],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="max("],
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.operator[data-value="abs("] {
    background-color: rgba(37, 99, 235, 0.82) !important;
}

html[data-appearance="dark"] #custom-score-dialog .calc-btn.clear,
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.clear,
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.clear {
    background-color: rgba(220, 38, 38, 0.82) !important;
    color: #fff !important;
}

html[data-appearance="dark"] #custom-score-dialog .calc-btn.backspace,
html[data-appearance="dark-blue"] #custom-score-dialog .calc-btn.backspace,
html[data-appearance="premium-dark"] #custom-score-dialog .calc-btn.backspace {
    background-color: rgba(217, 119, 6, 0.88) !important;
    color: #fff !important;
}

html[data-appearance="dark"] #autocomplete-dropdown,
html[data-appearance="dark-blue"] #autocomplete-dropdown,
html[data-appearance="premium-dark"] #autocomplete-dropdown {
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .graphical-modeler-header .dialog-close-button,
html[data-appearance="dark-blue"] .graphical-modeler-header .dialog-close-button,
html[data-appearance="premium-dark"] .graphical-modeler-header .dialog-close-button {
    color: var(--app-chrome-text) !important;
}

/* Layer style / batch layers / save-as-map overlays */
html[data-appearance="dark"] .lsd-surface,
html[data-appearance="dark"] .bld-surface,
html[data-appearance="dark"] .sam-surface,
html[data-appearance="dark-blue"] .lsd-surface,
html[data-appearance="premium-dark"] .lsd-surface,
html[data-appearance="dark-blue"] .bld-surface,
html[data-appearance="premium-dark"] .bld-surface,
html[data-appearance="dark-blue"] .sam-surface,
html[data-appearance="premium-dark"] .sam-surface {
    background: rgba(30, 41, 59, 0.98) !important;
    color: var(--app-chrome-text) !important;
    border: 1px solid var(--app-chrome-border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
}

html[data-appearance="dark-blue"] .lsd-surface,
html[data-appearance="premium-dark"] .lsd-surface,
html[data-appearance="dark-blue"] .bld-surface,
html[data-appearance="premium-dark"] .bld-surface,
html[data-appearance="dark-blue"] .sam-surface,
html[data-appearance="premium-dark"] .sam-surface {
    background: rgba(12, 35, 64, 0.98) !important;
}

html[data-appearance="dark"] .lsd-title,
html[data-appearance="dark"] .bld-title,
html[data-appearance="dark"] .sam-title,
html[data-appearance="dark"] .bld-card-name,
html[data-appearance="dark-blue"] .lsd-title,
html[data-appearance="premium-dark"] .lsd-title,
html[data-appearance="dark-blue"] .bld-title,
html[data-appearance="premium-dark"] .bld-title,
html[data-appearance="dark-blue"] .sam-title,
html[data-appearance="premium-dark"] .sam-title,
html[data-appearance="dark-blue"] .bld-card-name,
html[data-appearance="premium-dark"] .bld-card-name {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .lsd-row label,
html[data-appearance="dark"] .bld-hint,
html[data-appearance="dark"] .sam-hint,
html[data-appearance="dark-blue"] .lsd-row label,
html[data-appearance="premium-dark"] .lsd-row label,
html[data-appearance="dark-blue"] .bld-hint,
html[data-appearance="premium-dark"] .bld-hint,
html[data-appearance="dark-blue"] .sam-hint,
html[data-appearance="premium-dark"] .sam-hint {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .lsd-close,
html[data-appearance="dark"] .bld-close,
html[data-appearance="dark"] .sam-close,
html[data-appearance="dark-blue"] .lsd-close,
html[data-appearance="premium-dark"] .lsd-close,
html[data-appearance="dark-blue"] .bld-close,
html[data-appearance="premium-dark"] .bld-close,
html[data-appearance="dark-blue"] .sam-close,
html[data-appearance="premium-dark"] .sam-close {
    background: rgba(51, 65, 85, 0.55) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .bld-card,
html[data-appearance="dark-blue"] .bld-card,
html[data-appearance="premium-dark"] .bld-card {
    background: rgba(15, 23, 42, 0.45) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .bld-select-btn,
html[data-appearance="dark-blue"] .bld-select-btn,
html[data-appearance="premium-dark"] .bld-select-btn {
    background: var(--app-field-bg) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .lsd-row select,
html[data-appearance="dark-blue"] .lsd-row select,
html[data-appearance="premium-dark"] .lsd-row select {
    background: var(--app-field-bg) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

/* Onboarding prompt */
html[data-appearance="dark"] .data-onboarding-card,
html[data-appearance="dark-blue"] .data-onboarding-card,
html[data-appearance="premium-dark"] .data-onboarding-card {
    background: rgba(30, 41, 59, 0.96) !important;
    border: 1px solid var(--app-chrome-border);
    color: var(--app-chrome-text);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

html[data-appearance="dark-blue"] .data-onboarding-card,
html[data-appearance="premium-dark"] .data-onboarding-card {
    background: rgba(12, 35, 64, 0.96) !important;
}

html[data-appearance="dark"] .data-onboarding-card h2,
html[data-appearance="dark-blue"] .data-onboarding-card h2,
html[data-appearance="premium-dark"] .data-onboarding-card h2 {
    color: var(--app-chrome-text) !important;
    background: transparent !important;
}

html[data-appearance="dark"] .data-onboarding-card p,
html[data-appearance="dark-blue"] .data-onboarding-card p,
html[data-appearance="premium-dark"] .data-onboarding-card p {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .onboarding-footer,
html[data-appearance="dark-blue"] .onboarding-footer,
html[data-appearance="premium-dark"] .onboarding-footer {
    border-top-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .onboarding-footer-btn-secondary,
html[data-appearance="dark-blue"] .onboarding-footer-btn-secondary,
html[data-appearance="premium-dark"] .onboarding-footer-btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--app-chrome-muted) !important;
    border-color: var(--app-chrome-border) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

html[data-appearance="dark"] .onboarding-footer-btn-secondary:hover,
html[data-appearance="dark-blue"] .onboarding-footer-btn-secondary:hover,
html[data-appearance="premium-dark"] .onboarding-footer-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #ophanim-mantra,
html[data-appearance="dark"] #ophanim-tooltip,
html[data-appearance="dark-blue"] #ophanim-mantra,
html[data-appearance="premium-dark"] #ophanim-mantra,
html[data-appearance="dark-blue"] #ophanim-tooltip,
html[data-appearance="premium-dark"] #ophanim-tooltip {
    background: var(--app-chrome-bg);
    border-color: var(--app-chrome-border);
    color: var(--app-chrome-text);
}

html[data-appearance="dark"] .oph-btn-secondary,
html[data-appearance="dark"] .settings-secondary-button,
html[data-appearance="dark"] .custom-workspace-reset,
html[data-appearance="dark"] .custom-workspace-secondary,
html[data-appearance="dark"] .axis-secondary-button,
html[data-appearance="dark"] .lsd-actions .lsd-cancel,
html[data-appearance="dark"] .bld-actions .bld-cancel,
html[data-appearance="dark"] .sam-actions .sam-cancel,
html[data-appearance="dark"] .tiles-button-close,
html[data-appearance="dark"] .tiles-button-catalog,
html[data-appearance="dark-blue"] .oph-btn-secondary,
html[data-appearance="premium-dark"] .oph-btn-secondary,
html[data-appearance="dark-blue"] .settings-secondary-button,
html[data-appearance="premium-dark"] .settings-secondary-button,
html[data-appearance="dark-blue"] .custom-workspace-reset,
html[data-appearance="premium-dark"] .custom-workspace-reset,
html[data-appearance="dark-blue"] .custom-workspace-secondary,
html[data-appearance="premium-dark"] .custom-workspace-secondary,
html[data-appearance="dark-blue"] .axis-secondary-button,
html[data-appearance="premium-dark"] .axis-secondary-button,
html[data-appearance="dark-blue"] .lsd-actions .lsd-cancel,
html[data-appearance="premium-dark"] .lsd-actions .lsd-cancel,
html[data-appearance="dark-blue"] .bld-actions .bld-cancel,
html[data-appearance="premium-dark"] .bld-actions .bld-cancel,
html[data-appearance="dark-blue"] .sam-actions .sam-cancel,
html[data-appearance="premium-dark"] .sam-actions .sam-cancel,
html[data-appearance="dark-blue"] .tiles-button-close,
html[data-appearance="premium-dark"] .tiles-button-close,
html[data-appearance="dark-blue"] .tiles-button-catalog,
html[data-appearance="premium-dark"] .tiles-button-catalog,
html[data-appearance="dark"] [id$="-dialog"] .button-row button[id*="cancel" i],
html[data-appearance="dark"] [id$="-dialog"] .button-row button[id*="close" i]:not(.dialog-close-button),
html[data-appearance="dark-blue"] [id$="-dialog"] .button-row button[id*="cancel" i],
html[data-appearance="premium-dark"] [id$="-dialog"] .button-row button[id*="cancel" i],
html[data-appearance="dark-blue"] [id$="-dialog"] .button-row button[id*="close" i]:not(.dialog-close-button),
html[data-appearance="premium-dark"] [id$="-dialog"] .button-row button[id*="close" i]:not(.dialog-close-button) {
    background: rgba(30, 41, 59, 0.72) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #top-menu,
html[data-appearance="dark-blue"] #top-menu,
html[data-appearance="premium-dark"] #top-menu {
    background-color: rgba(30, 41, 59, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.35);
}

html[data-appearance="dark-blue"] #top-menu,
html[data-appearance="premium-dark"] #top-menu {
    background-color: rgba(12, 35, 64, 0.88);
    border-color: rgba(56, 189, 248, 0.14);
}

html[data-appearance="dark"] #top-menu button,
html[data-appearance="dark-blue"] #top-menu button,
html[data-appearance="premium-dark"] #top-menu button {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

html[data-appearance="dark"] #top-menu button:hover,
html[data-appearance="dark-blue"] #top-menu button:hover,
html[data-appearance="premium-dark"] #top-menu button:hover {
    background-color: rgba(51, 65, 85, 0.75);
    color: #f1f5f9;
}

html[data-appearance="dark-blue"] #top-menu button:hover,
html[data-appearance="premium-dark"] #top-menu button:hover {
    color: #f1f5f9;
    border-color: rgba(56, 189, 248, 0.35);
}

/* Top menu labels — always white in dark modes (override per-group accent colours) */
html[data-appearance="dark"] #top-menu .button-group button,
html[data-appearance="dark"] #top-menu .button-group button span,
html[data-appearance="dark"] #top-menu .button-group button:hover,
html[data-appearance="dark"] #top-menu .button-group button:hover span,
html[data-appearance="dark"] #top-menu .import-dropdown-btn,
html[data-appearance="dark"] #top-menu .download-dropdown-btn,
html[data-appearance="dark-blue"] #top-menu .button-group button,
html[data-appearance="premium-dark"] #top-menu .button-group button,
html[data-appearance="dark-blue"] #top-menu .button-group button span,
html[data-appearance="premium-dark"] #top-menu .button-group button span,
html[data-appearance="dark-blue"] #top-menu .button-group button:hover,
html[data-appearance="premium-dark"] #top-menu .button-group button:hover,
html[data-appearance="dark-blue"] #top-menu .button-group button:hover span,
html[data-appearance="premium-dark"] #top-menu .button-group button:hover span,
html[data-appearance="dark-blue"] #top-menu .import-dropdown-btn,
html[data-appearance="premium-dark"] #top-menu .import-dropdown-btn,
html[data-appearance="dark-blue"] #top-menu .download-dropdown-btn,
html[data-appearance="premium-dark"] #top-menu .download-dropdown-btn {
    color: #f1f5f9 !important;
}

html[data-appearance="dark"] #top-menu .button-group:nth-child(n) button,
html[data-appearance="dark"] #top-menu .button-group:nth-child(n) button:hover,
html[data-appearance="dark-blue"] #top-menu .button-group:nth-child(n) button,
html[data-appearance="premium-dark"] #top-menu .button-group:nth-child(n) button,
html[data-appearance="dark-blue"] #top-menu .button-group:nth-child(n) button:hover,
html[data-appearance="premium-dark"] #top-menu .button-group:nth-child(n) button:hover {
    color: #f1f5f9 !important;
}

html[data-appearance="dark"] .group-label,
html[data-appearance="dark-blue"] .group-label,
html[data-appearance="premium-dark"] .group-label {
    color: #94a3b8;
}

html[data-appearance="dark"] .hamburger-menu-btn,
html[data-appearance="dark-blue"] .hamburger-menu-btn,
html[data-appearance="premium-dark"] .hamburger-menu-btn {
    background: rgba(30, 41, 59, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

html[data-appearance="dark-blue"] .hamburger-menu-btn,
html[data-appearance="premium-dark"] .hamburger-menu-btn {
    background: rgba(12, 35, 64, 0.88);
    border-color: rgba(56, 189, 248, 0.14);
}

html[data-appearance="dark"] .hamburger-menu-content,
html[data-appearance="dark-blue"] .hamburger-menu-content,
html[data-appearance="premium-dark"] .hamburger-menu-content {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-appearance="dark-blue"] .hamburger-menu-content,
html[data-appearance="premium-dark"] .hamburger-menu-content {
    background: rgba(12, 35, 64, 0.94);
    border-color: rgba(56, 189, 248, 0.12);
}

html[data-appearance="dark"] .hamburger-menu-item,
html[data-appearance="dark-blue"] .hamburger-menu-item,
html[data-appearance="premium-dark"] .hamburger-menu-item {
    color: #e2e8f0;
}

html[data-appearance="dark"] .hamburger-menu-item:hover,
html[data-appearance="dark-blue"] .hamburger-menu-item:hover,
html[data-appearance="premium-dark"] .hamburger-menu-item:hover {
    background: rgba(51, 65, 85, 0.55);
}

html[data-appearance="dark"] .user-profile-btn,
html[data-appearance="dark-blue"] .user-profile-btn,
html[data-appearance="premium-dark"] .user-profile-btn {
    background: rgba(30, 41, 59, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

html[data-appearance="dark-blue"] .user-profile-btn,
html[data-appearance="premium-dark"] .user-profile-btn {
    background: rgba(12, 35, 64, 0.88);
    border-color: rgba(56, 189, 248, 0.14);
}

html[data-appearance="dark"] .map-legend,
html[data-appearance="dark-blue"] .map-legend,
html[data-appearance="premium-dark"] .map-legend,
html[data-appearance="dark"] #color-legend.map-legend,
html[data-appearance="dark-blue"] #color-legend.map-legend,
html[data-appearance="premium-dark"] #color-legend.map-legend {
    background: rgba(30, 41, 59, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

html[data-appearance="dark-blue"] .map-legend,
html[data-appearance="premium-dark"] .map-legend,
html[data-appearance="dark-blue"] #color-legend.map-legend,
html[data-appearance="premium-dark"] #color-legend.map-legend {
    background: rgba(12, 35, 64, 0.88);
    border-color: rgba(56, 189, 248, 0.12);
}

html[data-appearance="dark"] .map-legend-title,
html[data-appearance="dark-blue"] .map-legend-title,
html[data-appearance="premium-dark"] .map-legend-title {
    color: #cbd5e1;
}

html[data-appearance="dark"] .extraction-progress,
html[data-appearance="dark-blue"] .extraction-progress,
html[data-appearance="premium-dark"] .extraction-progress {
    background: rgba(30, 41, 59, 0.82);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

html[data-appearance="premium-dark"] .extraction-progress {
    background: rgba(18, 12, 32, 0.88);
    border-color: rgba(167, 139, 250, 0.22);
    color: #f5f3ff;
}

html[data-appearance="premium-dark"] #extraction-progress-percent {
    color: #c4b5fd;
}

html[data-appearance="dark"] #geocoder-toggle-btn,
html[data-appearance="dark"] #geocoder-input,
html[data-appearance="dark-blue"] #geocoder-toggle-btn,
html[data-appearance="premium-dark"] #geocoder-toggle-btn,
html[data-appearance="dark-blue"] #geocoder-input,
html[data-appearance="premium-dark"] #geocoder-input {
    background: rgba(30, 41, 59, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

html[data-appearance="dark-blue"] #geocoder-toggle-btn,
html[data-appearance="premium-dark"] #geocoder-toggle-btn,
html[data-appearance="dark-blue"] #geocoder-input,
html[data-appearance="premium-dark"] #geocoder-input {
    background: rgba(12, 35, 64, 0.88);
    border-color: rgba(56, 189, 248, 0.12);
}

html[data-appearance="dark"] .settings-dialog-overlay,
html[data-appearance="dark-blue"] .settings-dialog-overlay,
html[data-appearance="premium-dark"] .settings-dialog-overlay,
html[data-appearance="dark"] .help-dialog-overlay,
html[data-appearance="dark-blue"] .help-dialog-overlay,
html[data-appearance="premium-dark"] .help-dialog-overlay {
    background: radial-gradient(circle at top, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.88));
}

html[data-appearance="dark"] .settings-dialog-surface,
html[data-appearance="dark"] .help-dialog-surface,
html[data-appearance="dark-blue"] .settings-dialog-surface,
html[data-appearance="premium-dark"] .settings-dialog-surface,
html[data-appearance="dark-blue"] .help-dialog-surface,
html[data-appearance="premium-dark"] .help-dialog-surface {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-appearance="dark-blue"] .settings-dialog-surface,
html[data-appearance="premium-dark"] .settings-dialog-surface,
html[data-appearance="dark-blue"] .help-dialog-surface,
html[data-appearance="premium-dark"] .help-dialog-surface {
    background: linear-gradient(145deg, rgba(12, 35, 64, 0.96), rgba(8, 28, 52, 0.98));
    border-color: rgba(56, 189, 248, 0.14);
}

html[data-appearance="dark"] .settings-dialog-header h2,
html[data-appearance="dark"] .help-dialog-header h2,
html[data-appearance="dark-blue"] .settings-dialog-header h2,
html[data-appearance="premium-dark"] .settings-dialog-header h2,
html[data-appearance="dark-blue"] .help-dialog-header h2,
html[data-appearance="premium-dark"] .help-dialog-header h2,
html[data-appearance="dark"] .settings-section-header h3,
html[data-appearance="dark-blue"] .settings-section-header h3,
html[data-appearance="premium-dark"] .settings-section-header h3 {
    color: #f1f5f9;
}

html[data-appearance="dark"] .settings-dialog-subtitle,
html[data-appearance="dark"] .help-dialog-subtitle,
html[data-appearance="dark-blue"] .settings-dialog-subtitle,
html[data-appearance="premium-dark"] .settings-dialog-subtitle,
html[data-appearance="dark-blue"] .help-dialog-subtitle,
html[data-appearance="premium-dark"] .help-dialog-subtitle,
html[data-appearance="dark"] .settings-section-header p,
html[data-appearance="dark-blue"] .settings-section-header p,
html[data-appearance="premium-dark"] .settings-section-header p,
html[data-appearance="dark"] .settings-option-description,
html[data-appearance="dark-blue"] .settings-option-description,
html[data-appearance="premium-dark"] .settings-option-description {
    color: #94a3b8;
}

html[data-appearance="dark"] .settings-section,
html[data-appearance="dark-blue"] .settings-section,
html[data-appearance="premium-dark"] .settings-section {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

html[data-appearance="dark"] .settings-radio-option,
html[data-appearance="dark-blue"] .settings-radio-option,
html[data-appearance="premium-dark"] .settings-radio-option,
html[data-appearance="dark"] .settings-switch-option,
html[data-appearance="dark-blue"] .settings-switch-option,
html[data-appearance="premium-dark"] .settings-switch-option,
html[data-appearance="dark"] .settings-range-option,
html[data-appearance="dark-blue"] .settings-range-option,
html[data-appearance="premium-dark"] .settings-range-option,
html[data-appearance="dark"] .settings-field-option,
html[data-appearance="dark-blue"] .settings-field-option,
html[data-appearance="premium-dark"] .settings-field-option {
    background: rgba(30, 41, 59, 0.45);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] .settings-option-title,
html[data-appearance="dark-blue"] .settings-option-title,
html[data-appearance="premium-dark"] .settings-option-title {
    color: #e2e8f0;
}

html[data-appearance="dark"] .settings-dialog-close,
html[data-appearance="dark-blue"] .settings-dialog-close,
html[data-appearance="premium-dark"] .settings-dialog-close,
html[data-appearance="dark"] .help-dialog-close,
html[data-appearance="dark-blue"] .help-dialog-close,
html[data-appearance="premium-dark"] .help-dialog-close {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

html[data-appearance="dark"] .settings-dialog-footer,
html[data-appearance="dark-blue"] .settings-dialog-footer,
html[data-appearance="premium-dark"] .settings-dialog-footer {
    background: rgba(15, 23, 42, 0.55) !important;
    border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] .help-dialog-header-top,
html[data-appearance="dark-blue"] .help-dialog-header-top,
html[data-appearance="premium-dark"] .help-dialog-header-top {
    border-bottom-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .help-search-input,
html[data-appearance="dark-blue"] .help-search-input,
html[data-appearance="premium-dark"] .help-search-input {
    background: var(--app-field-bg) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .help-search-input:focus,
html[data-appearance="dark-blue"] .help-search-input:focus,
html[data-appearance="premium-dark"] .help-search-input:focus {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

html[data-appearance="dark"] .help-search-input::placeholder,
html[data-appearance="dark-blue"] .help-search-input::placeholder,
html[data-appearance="premium-dark"] .help-search-input::placeholder {
    color: var(--app-chrome-muted);
}

html[data-appearance="dark"] .help-search-icon,
html[data-appearance="dark-blue"] .help-search-icon,
html[data-appearance="premium-dark"] .help-search-icon {
    color: var(--app-chrome-muted);
}

html[data-appearance="dark"] .help-tabs-container,
html[data-appearance="dark-blue"] .help-tabs-container,
html[data-appearance="premium-dark"] .help-tabs-container {
    background: rgba(15, 23, 42, 0.45) !important;
    border-right-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .help-tab,
html[data-appearance="dark-blue"] .help-tab,
html[data-appearance="premium-dark"] .help-tab {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .help-tab:hover,
html[data-appearance="dark-blue"] .help-tab:hover,
html[data-appearance="premium-dark"] .help-tab:hover {
    background: rgba(51, 65, 85, 0.45) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .help-tab.active,
html[data-appearance="dark-blue"] .help-tab.active,
html[data-appearance="premium-dark"] .help-tab.active {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}

html[data-appearance="dark-blue"] .help-tab.active,
html[data-appearance="premium-dark"] .help-tab.active {
    color: #7dd3fc !important;
}

html[data-appearance="dark"] .help-sub-nav,
html[data-appearance="dark-blue"] .help-sub-nav,
html[data-appearance="premium-dark"] .help-sub-nav {
    border-left-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .help-sub-nav-link,
html[data-appearance="dark-blue"] .help-sub-nav-link,
html[data-appearance="premium-dark"] .help-sub-nav-link {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .help-sub-nav-link:hover,
html[data-appearance="dark-blue"] .help-sub-nav-link:hover,
html[data-appearance="premium-dark"] .help-sub-nav-link:hover {
    background: rgba(51, 65, 85, 0.45) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .help-sub-nav-link.active,
html[data-appearance="dark-blue"] .help-sub-nav-link.active,
html[data-appearance="premium-dark"] .help-sub-nav-link.active {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}

html[data-appearance="dark"] .help-content-panel h3,
html[data-appearance="dark"] .help-content-panel h4,
html[data-appearance="dark-blue"] .help-content-panel h3,
html[data-appearance="premium-dark"] .help-content-panel h3,
html[data-appearance="dark-blue"] .help-content-panel h4,
html[data-appearance="premium-dark"] .help-content-panel h4 {
    color: var(--app-chrome-text) !important;
    background: transparent !important;
}

html[data-appearance="dark"] .help-content-panel p,
html[data-appearance="dark"] .help-content-panel li,
html[data-appearance="dark-blue"] .help-content-panel p,
html[data-appearance="premium-dark"] .help-content-panel p,
html[data-appearance="dark-blue"] .help-content-panel li,
html[data-appearance="premium-dark"] .help-content-panel li {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .help-content-panel code,
html[data-appearance="dark-blue"] .help-content-panel code,
html[data-appearance="premium-dark"] .help-content-panel code {
    background: rgba(15, 23, 42, 0.55) !important;
    color: #c4b5fd !important;
    border-color: var(--app-chrome-border) !important;
}

/* Appearance picker (map + org settings) */
.appearance-experimental-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.15);
    border: 1px solid rgba(167, 139, 250, 0.25);
    vertical-align: middle;
}

html[data-appearance="dark"] .appearance-experimental-tag,
html[data-appearance="dark-blue"] .appearance-experimental-tag,
html[data-appearance="premium-dark"] .appearance-experimental-tag {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.2);
}

.appearance-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.appearance-picker .settings-radio-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

html[data-appearance="dark"] .appearance-picker .settings-radio-option,
html[data-appearance="dark-blue"] .appearance-picker .settings-radio-option,
html[data-appearance="premium-dark"] .appearance-picker .settings-radio-option {
    background: rgba(30, 41, 59, 0.45);
    border-color: rgba(255, 255, 255, 0.08);
}

.appearance-picker .settings-radio-option:has(input:checked) {
    border-color: rgba(47, 123, 246, 0.55);
    background: rgba(47, 123, 246, 0.08);
}

html[data-appearance="dark-blue"] .appearance-picker .settings-radio-option:has(input:checked),
html[data-appearance="premium-dark"] .appearance-picker .settings-radio-option:has(input:checked) {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(14, 165, 233, 0.12);
}

.appearance-picker input[type="radio"] {
    margin-top: 3px;
}

.appearance-picker .settings-option-title {
    font-weight: 600;
    font-size: 14px;
    color: #0f172a;
}

html[data-appearance="dark"] .appearance-picker .settings-option-title,
html[data-appearance="dark-blue"] .appearance-picker .settings-option-title,
html[data-appearance="premium-dark"] .appearance-picker .settings-option-title {
    color: #f1f5f9 !important;
}

.appearance-picker .settings-option-description {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

html[data-appearance="dark"] .appearance-picker .settings-option-description,
html[data-appearance="dark-blue"] .appearance-picker .settings-option-description,
html[data-appearance="premium-dark"] .appearance-picker .settings-option-description {
    color: var(--text-muted) !important;
}

/* Org settings — mascot picker + text preview on glass dashboard */
html[data-appearance="dark"] body.glass-body .mascot-picker-copy strong,
html[data-appearance="dark-blue"] body.glass-body .mascot-picker-copy strong,
html[data-appearance="premium-dark"] body.glass-body .mascot-picker-copy strong,
html[data-appearance="dark"] body.glass-body h3,
html[data-appearance="dark-blue"] body.glass-body h3,
html[data-appearance="premium-dark"] body.glass-body h3,
html[data-appearance="dark"] body.glass-body .field label,
html[data-appearance="dark-blue"] body.glass-body .field label,
html[data-appearance="premium-dark"] body.glass-body .field label {
    color: #f1f5f9 !important;
}

html[data-appearance="dark"] .mascot-live-preview-inner .ophanim-text-mascot,
html[data-appearance="dark-blue"] .mascot-live-preview-inner .ophanim-text-mascot,
html[data-appearance="premium-dark"] .mascot-live-preview-inner .ophanim-text-mascot,
html[data-appearance="dark"] #sidebar .ophanim-text-mascot,
html[data-appearance="dark-blue"] #sidebar .ophanim-text-mascot,
html[data-appearance="premium-dark"] #sidebar .ophanim-text-mascot {
    color: #f1f5f9 !important;
}

/* ---- Map chrome: search, measure, zoom, legend ---- */
html[data-appearance="dark"] #geocoder-toggle-btn svg,
html[data-appearance="dark"] #toggle-measuring-tool svg,
html[data-appearance="dark-blue"] #geocoder-toggle-btn svg,
html[data-appearance="premium-dark"] #geocoder-toggle-btn svg,
html[data-appearance="dark-blue"] #toggle-measuring-tool svg,
html[data-appearance="premium-dark"] #toggle-measuring-tool svg {
    stroke: currentColor !important;
}

html[data-appearance="dark"] #geocoder-toggle-btn,
html[data-appearance="dark"] #toggle-measuring-tool,
html[data-appearance="dark-blue"] #geocoder-toggle-btn,
html[data-appearance="premium-dark"] #geocoder-toggle-btn,
html[data-appearance="dark-blue"] #toggle-measuring-tool,
html[data-appearance="premium-dark"] #toggle-measuring-tool {
    color: #e2e8f0 !important;
}

html[data-appearance="premium-light"] #geocoder-toggle-btn,
html[data-appearance="premium-light"] #toggle-measuring-tool {
    color: #0f172a !important;
}

html[data-appearance="dark"] #geocoder-toggle-btn:hover,
html[data-appearance="dark"] #toggle-measuring-tool:hover,
html[data-appearance="dark-blue"] #geocoder-toggle-btn:hover,
html[data-appearance="premium-dark"] #geocoder-toggle-btn:hover,
html[data-appearance="dark-blue"] #toggle-measuring-tool:hover,
html[data-appearance="premium-dark"] #toggle-measuring-tool:hover {
    background: rgba(51, 65, 85, 0.85) !important;
    border-color: var(--app-chrome-border) !important;
    color: #f8fafc !important;
}

html[data-appearance="premium-light"] #geocoder-toggle-btn:hover,
html[data-appearance="premium-light"] #toggle-measuring-tool:hover {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #0f172a !important;
}

html[data-appearance="dark"] #toggle-measuring-tool:not(.active),
html[data-appearance="dark-blue"] #toggle-measuring-tool:not(.active),
html[data-appearance="premium-dark"] #toggle-measuring-tool:not(.active) {
    background: var(--app-chrome-bg) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] .deck-widget,
html[data-appearance="dark-blue"] .deck-widget,
html[data-appearance="premium-dark"] .deck-widget {
    --button-background: rgba(30, 41, 59, 0.95);
    --button-stroke: rgba(255, 255, 255, 0.12);
    --button-icon-idle: #cbd5e1;
    --button-icon-hover: #f8fafc;
    --button-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

html[data-appearance="dark"] .map-legend-content,
html[data-appearance="dark"] .legend-item,
html[data-appearance="dark-blue"] .map-legend-content,
html[data-appearance="premium-dark"] .map-legend-content,
html[data-appearance="dark-blue"] .legend-item,
html[data-appearance="premium-dark"] .legend-item {
    color: #cbd5e1 !important;
}

html[data-appearance="dark"] .map-legend-toggle,
html[data-appearance="dark-blue"] .map-legend-toggle,
html[data-appearance="premium-dark"] .map-legend-toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

/* ---- Floating tool panels (inline light styles) ---- */
html[data-appearance="dark"] #drawing-tools-popup,
html[data-appearance="dark"] #extract-intel-dialog,
html[data-appearance="dark"] #monitoring-dialog,
html[data-appearance="dark"] #masterplanner-sidebar,
html[data-appearance="dark-blue"] #drawing-tools-popup,
html[data-appearance="premium-dark"] #drawing-tools-popup,
html[data-appearance="dark-blue"] #extract-intel-dialog,
html[data-appearance="premium-dark"] #extract-intel-dialog,
html[data-appearance="dark-blue"] #monitoring-dialog,
html[data-appearance="premium-dark"] #monitoring-dialog,
html[data-appearance="dark-blue"] #masterplanner-sidebar,
html[data-appearance="premium-dark"] #masterplanner-sidebar {
    background: var(--app-dialog-surface) !important;
    border: 1px solid var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

html[data-appearance="dark"] #drawing-tools-popup h3,
html[data-appearance="dark"] #extract-intel-dialog h3,
html[data-appearance="dark"] #monitoring-dialog h3,
html[data-appearance="dark"] #masterplanner-sidebar h3,
html[data-appearance="dark-blue"] #drawing-tools-popup h3,
html[data-appearance="premium-dark"] #drawing-tools-popup h3,
html[data-appearance="dark-blue"] #extract-intel-dialog h3,
html[data-appearance="premium-dark"] #extract-intel-dialog h3,
html[data-appearance="dark-blue"] #monitoring-dialog h3,
html[data-appearance="premium-dark"] #monitoring-dialog h3,
html[data-appearance="dark-blue"] #masterplanner-sidebar h3,
html[data-appearance="premium-dark"] #masterplanner-sidebar h3 {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .drawing-tool-btn,
html[data-appearance="dark"] .extract-tool-btn,
html[data-appearance="dark"] #reset-aoi-btn,
html[data-appearance="dark"] #calculate-distance-btn,
html[data-appearance="dark"] #calculate-network-distance-btn,
html[data-appearance="dark-blue"] .drawing-tool-btn,
html[data-appearance="premium-dark"] .drawing-tool-btn,
html[data-appearance="dark-blue"] .extract-tool-btn,
html[data-appearance="premium-dark"] .extract-tool-btn,
html[data-appearance="dark-blue"] #reset-aoi-btn,
html[data-appearance="premium-dark"] #reset-aoi-btn,
html[data-appearance="dark-blue"] #calculate-distance-btn,
html[data-appearance="premium-dark"] #calculate-distance-btn,
html[data-appearance="dark-blue"] #calculate-network-distance-btn,
html[data-appearance="premium-dark"] #calculate-network-distance-btn {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .drawing-tool-btn svg,
html[data-appearance="dark"] .extract-tool-btn svg,
html[data-appearance="dark"] #calculate-distance-btn svg,
html[data-appearance="dark"] #calculate-network-distance-btn svg,
html[data-appearance="dark-blue"] .drawing-tool-btn svg,
html[data-appearance="premium-dark"] .drawing-tool-btn svg,
html[data-appearance="dark-blue"] .extract-tool-btn svg,
html[data-appearance="premium-dark"] .extract-tool-btn svg,
html[data-appearance="dark-blue"] #calculate-distance-btn svg,
html[data-appearance="premium-dark"] #calculate-distance-btn svg,
html[data-appearance="dark-blue"] #calculate-network-distance-btn svg,
html[data-appearance="premium-dark"] #calculate-network-distance-btn svg {
    color: #93c5fd !important;
}

html[data-appearance="dark"] #area-display,
html[data-appearance="dark-blue"] #area-display,
html[data-appearance="premium-dark"] #area-display {
    background: rgba(15, 23, 42, 0.45) !important;
    color: var(--app-chrome-muted) !important;
}

/* Masterplanner */
html[data-appearance="dark"] #masterplanner-scenario,
html[data-appearance="dark-blue"] #masterplanner-scenario,
html[data-appearance="premium-dark"] #masterplanner-scenario {
    background: rgba(15, 23, 42, 0.45) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] #scenario-selector,
html[data-appearance="dark-blue"] #scenario-selector,
html[data-appearance="premium-dark"] #scenario-selector {
    background: var(--app-field-bg) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #add-scenario-btn,
html[data-appearance="dark"] #manage-scenarios-btn,
html[data-appearance="dark"] #add-land-use-btn,
html[data-appearance="dark-blue"] #add-scenario-btn,
html[data-appearance="premium-dark"] #add-scenario-btn,
html[data-appearance="dark-blue"] #manage-scenarios-btn,
html[data-appearance="premium-dark"] #manage-scenarios-btn,
html[data-appearance="dark-blue"] #add-land-use-btn,
html[data-appearance="premium-dark"] #add-land-use-btn {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .land-use-card,
html[data-appearance="dark-blue"] .land-use-card,
html[data-appearance="premium-dark"] .land-use-card {
    background: rgba(30, 41, 59, 0.55) !important;
    border-color: var(--app-chrome-border) !important;
    box-shadow: none !important;
}

html[data-appearance="dark"] .land-use-card:hover,
html[data-appearance="dark-blue"] .land-use-card:hover,
html[data-appearance="premium-dark"] .land-use-card:hover {
    background: rgba(51, 65, 85, 0.65) !important;
}

html[data-appearance="dark"] .land-use-card-title,
html[data-appearance="dark"] .land-use-title-text,
html[data-appearance="dark-blue"] .land-use-card-title,
html[data-appearance="premium-dark"] .land-use-card-title,
html[data-appearance="dark-blue"] .land-use-title-text,
html[data-appearance="premium-dark"] .land-use-title-text {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #scenario-totals-panel,
html[data-appearance="dark"] #scenario-totals-content,
html[data-appearance="dark-blue"] #scenario-totals-panel,
html[data-appearance="premium-dark"] #scenario-totals-panel,
html[data-appearance="dark-blue"] #scenario-totals-content,
html[data-appearance="premium-dark"] #scenario-totals-content {
    color: var(--app-chrome-muted) !important;
}

/* Reporting + regression dialogs */
html[data-appearance="dark"] #reporting-dialog,
html[data-appearance="dark-blue"] #reporting-dialog,
html[data-appearance="premium-dark"] #reporting-dialog {
    background: var(--app-dialog-surface) !important;
    border: 1px solid var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #reporting-dialog h3,
html[data-appearance="dark"] #reporting-dialog h4,
html[data-appearance="dark-blue"] #reporting-dialog h3,
html[data-appearance="premium-dark"] #reporting-dialog h3,
html[data-appearance="dark-blue"] #reporting-dialog h4,
html[data-appearance="premium-dark"] #reporting-dialog h4 {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #reporting-dialog label,
html[data-appearance="dark-blue"] #reporting-dialog label,
html[data-appearance="premium-dark"] #reporting-dialog label {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] #reporting-dialog .stat-label,
html[data-appearance="dark"] #reporting-dialog .stat-value,
html[data-appearance="dark-blue"] #reporting-dialog .stat-label,
html[data-appearance="premium-dark"] #reporting-dialog .stat-label,
html[data-appearance="dark-blue"] #reporting-dialog .stat-value,
html[data-appearance="premium-dark"] #reporting-dialog .stat-value {
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #reporting-dialog #statistics-summary,
html[data-appearance="dark-blue"] #reporting-dialog #statistics-summary,
html[data-appearance="premium-dark"] #reporting-dialog #statistics-summary {
    color: var(--app-chrome-text);
}

html[data-appearance="dark"] #reporting-dialog #statistics-summary,
html[data-appearance="dark-blue"] #reporting-dialog #statistics-summary,
html[data-appearance="premium-dark"] #reporting-dialog #statistics-summary,
html[data-appearance="dark"] #reporting-dialog div:has(> #statistics-summary),
html[data-appearance="dark-blue"] #reporting-dialog div:has(> #statistics-summary),
html[data-appearance="premium-dark"] #reporting-dialog div:has(> #statistics-summary) {
    background: rgba(15, 23, 42, 0.55) !important;
    border-radius: 8px;
}

html[data-appearance="dark"] #regression-independent-vars,
html[data-appearance="dark-blue"] #regression-independent-vars,
html[data-appearance="premium-dark"] #regression-independent-vars {
    background: rgba(15, 23, 42, 0.45) !important;
    border-color: var(--app-chrome-border) !important;
}

html[data-appearance="dark"] #regression-model-summary,
html[data-appearance="dark-blue"] #regression-model-summary,
html[data-appearance="premium-dark"] #regression-model-summary {
    background: rgba(15, 23, 42, 0.55) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] #regression-key-predictors,
html[data-appearance="dark-blue"] #regression-key-predictors,
html[data-appearance="premium-dark"] #regression-key-predictors {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
}

html[data-appearance="dark"] #regression-predictors-list,
html[data-appearance="dark"] #regression-explanations,
html[data-appearance="dark-blue"] #regression-predictors-list,
html[data-appearance="premium-dark"] #regression-predictors-list,
html[data-appearance="dark-blue"] #regression-explanations,
html[data-appearance="premium-dark"] #regression-explanations {
    color: var(--app-chrome-muted) !important;
}

html[data-appearance="dark"] .regression-tab,
html[data-appearance="dark-blue"] .regression-tab,
html[data-appearance="premium-dark"] .regression-tab {
    background: rgba(51, 65, 85, 0.55) !important;
    color: var(--app-chrome-text) !important;
}

html[data-appearance="dark"] .regression-tab:hover,
html[data-appearance="dark-blue"] .regression-tab:hover,
html[data-appearance="premium-dark"] .regression-tab:hover {
    background: rgba(71, 85, 105, 0.72) !important;
    color: #f1f5f9 !important;
}

html[data-appearance="dark"] .regression-tab.active,
html[data-appearance="dark-blue"] .regression-tab.active,
html[data-appearance="premium-dark"] .regression-tab.active {
    background: rgba(59, 130, 246, 0.22) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}

/* Premium upsell — keep voucher field layout stable in all appearances */
.glass-premium-upsell .premium-voucher-input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    background: rgba(12, 10, 8, 0.75) !important;
    border-color: rgba(212, 175, 55, 0.35) !important;
    color: #fff8e7 !important;
}

.glass-premium-upsell .premium-voucher-apply {
    background: rgba(212, 175, 55, 0.14) !important;
    color: #ffe9a8 !important;
    border: 1px solid rgba(255, 223, 140, 0.45) !important;
    box-shadow: none !important;
}

.glass-premium-upsell .premium-upsell-dismiss {
    background: transparent !important;
    color: rgba(248, 244, 232, 0.92) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
}