.svg-node { cursor: pointer; transition: filter 0.2s; }
        .svg-node:hover { filter: brightness(1.15) drop-shadow(0px 0px 5px rgba(59,130,246,0.4)); }
        .svg-node.pipe-selected { opacity: 0.5; }

        /* Canvas Selection CSS Styles */
        .svg-node.selected {
            filter: drop-shadow(0px 0px 8px rgba(37, 99, 235, 0.85)) brightness(1.05) !important;
        }
        .pipe-link.selected path:not([stroke="transparent"]),
        .control-link.selected path:not([stroke="transparent"]),
        .power-link.selected path:not([stroke="transparent"]) {
            stroke: #2563eb !important;
            stroke-width: 5px !important;
            filter: drop-shadow(0 0 3px rgba(37, 99, 235, 0.5));
        }
        .selection-box {
            fill: rgba(37, 99, 235, 0.15);
            stroke: #2563eb;
            stroke-width: 1.5px;
            stroke-dasharray: 4 4;
            pointer-events: none;
        }

        .tool-btn { width: 100%; text-align: left; border: 1px solid #e2e8f0; border-radius: 0.375rem; padding: 0.5rem; background: white; transition: background 0.15s, border-color 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .tool-btn:hover { background: #eff6ff; border-color: #93c5fd; }
        .tool-btn.active { background: #fff7ed; border-color: #fb923c; }

        /* Chart expansion */
        .chart-expanded {
            position: fixed !important;
            inset: 4rem 4rem 4rem 4rem !important;
            width: auto !important;
            height: auto !important;
            z-index: 100 !important;
            background: white !important;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important;
            border-radius: 1rem !important;
            padding: 2rem !important;
            margin: 0 !important;
        }
        html.dark .chart-expanded {
            background-color: #0f172a !important;
            background: #0f172a !important;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 0px;
            background: transparent;
        }

        /* Warning Glow Animation */
        @keyframes pulse-red {
            0% { filter: drop-shadow(0 0 2px rgba(239,68,68,0.5)); stroke: #ef4444; }
            50% { filter: drop-shadow(0 0 10px rgba(239,68,68,0.9)); stroke: #b91c1c; }
            100% { filter: drop-shadow(0 0 2px rgba(239,68,68,0.5)); stroke: #ef4444; }
        }
        .warning-glow {
            animation: pulse-red 1.5s infinite;
        }
        .warning-glow rect[fill="transparent"], .warning-glow circle[fill="transparent"] {
            stroke: none !important;
        }
        .warning-glow-fill {
            animation: pulse-red 1.5s infinite;
            fill: #ef4444 !important;
        }

        /* Blinking Ramping Indicator */
        @keyframes blink-active {
            0% { opacity: 1.0; }
            50% { opacity: 0.35; }
            100% { opacity: 1.0; }
        }
        .blink-ramping {
            animation: blink-active 0.8s infinite;
        }

        /* Toggles Visibility CSS */
        .hide-component-ids .node-id-label,
        .hide-component-ids .link-id-label,
        .hide-component-ids .control-link-label {
            display: none !important;
        }
        .hide-simulation-outputs .node-output-label,
        .hide-simulation-outputs .link-output-label,
        .hide-simulation-outputs .power-flow-label,
        .hide-simulation-outputs .pump-speed-bar,
        .hide-simulation-outputs .turbine-speed-bar {
            display: none !important;
        }

        /* Text label background cutout stroke for overlapping pipes/links */
        .node-id-label,
        .node-output-label,
        .node-combined-label,
        .link-id-label,
        .link-output-label,
        .power-flow-label {
            paint-order: stroke fill !important;
            stroke: var(--ui-canvas-bg) !important;
            stroke-width: 4px !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }
        .node-output-label.inside-water {
            stroke: none !important;
        }
        .node-output-label.tank-level-label,
        .dark .node-output-label.tank-level-label {
            stroke: none !important;
            font-weight: 600;
        }
        
        /* ── Strict Modal Styling Framework ── */
        .r-thym-dialog, .r-thym-dialog *:not(h3):not(i):not([class*="fa-"]) {
            font-family: 'Inter', sans-serif !important;
            font-size: 12px !important;
            font-weight: 400 !important;
            text-transform: none !important;
            font-style: normal !important;
        }
        .r-thym-dialog h3 {
            font-family: 'Inter', sans-serif !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            color: #000 !important;
        }
        .r-thym-dialog {
            color: #000 !important;
        }
        .r-thym-dialog label, .r-thym-dialog span:not(.button-icon), .r-thym-dialog p, .r-thym-dialog input, .r-thym-dialog select {
            color: #000 !important;
        }
        :where(.r-thym-dialog) button {
            color: inherit;
        }
        .r-thym-dialog button.text-white,
        .r-thym-dialog button.text-white span,
        .r-thym-dialog button.text-white i,
        html.dark .r-thym-dialog button.text-white,
        html.dark .r-thym-dialog button.text-white span,
        html.dark .r-thym-dialog button.text-white i {
            color: #fff !important;
        }

        /* Economics — explicit income/cost colors (override strict uniform text rules) */
        .rthym-econ-income,
        .rthym-econ-income span,
        #right-sidebar .rthym-econ-income,
        #right-sidebar .rthym-econ-income span,
        .r-thym-dialog .rthym-econ-income,
        .r-thym-dialog .rthym-econ-income span,
        .r-thym-dialog td.rthym-econ-income {
            color: var(--ui-econ-income) !important;
        }
        .rthym-econ-cost,
        .rthym-econ-cost span,
        #right-sidebar .rthym-econ-cost,
        #right-sidebar .rthym-econ-cost span,
        .r-thym-dialog .rthym-econ-cost,
        .r-thym-dialog .rthym-econ-cost span,
        .r-thym-dialog td.rthym-econ-cost {
            color: var(--ui-econ-cost) !important;
        }
        .rthym-econ-gain,
        .rthym-econ-gain span,
        #right-sidebar .rthym-econ-gain,
        #right-sidebar .rthym-econ-gain span,
        .r-thym-dialog .rthym-econ-gain,
        .r-thym-dialog .rthym-econ-gain span,
        .r-thym-dialog td.rthym-econ-gain {
            font-weight: 600 !important;
        }
        .rthym-econ-loss,
        .rthym-econ-loss span,
        #right-sidebar .rthym-econ-loss,
        #right-sidebar .rthym-econ-loss span,
        .r-thym-dialog .rthym-econ-loss,
        .r-thym-dialog .rthym-econ-loss span,
        .r-thym-dialog td.rthym-econ-loss {
            font-weight: 600 !important;
        }

        /* Cost Estimator category icons (theme-aware) */
        .rthym-cost-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 14px;
            height: 14px;
            line-height: 0;
        }
        .rthym-cost-icon.rthym-cost-icon-md {
            width: 16px;
            height: 16px;
        }
        .rthym-cost-icon svg {
            width: 100%;
            height: 100%;
        }
        .rthym-cost-icon-capital {
            color: var(--ui-accent, #2563eb);
        }
        .rthym-cost-icon-maintenance {
            color: #d97706;
        }
        html.dark .rthym-cost-icon-maintenance {
            color: #fbbf24;
        }
        .rthym-cost-icon-power {
            color: var(--ui-econ-income, #059669);
        }
        .rthym-cost-icon-financing {
            color: #7c3aed;
        }
        html.dark .rthym-cost-icon-financing {
            color: #a78bfa;
        }
        .rthym-cost-section-header {
            border-bottom: 1px solid #94a3b8;
            padding-bottom: 0.35rem;
        }
        html.dark .rthym-cost-section-header {
            border-bottom-color: #64748b;
        }
        .r-thym-dialog .rthym-cost-section-header h4 {
            border-bottom: none;
            padding-bottom: 0;
        }
        .r-thym-dialog button.bg-blue-600 .rthym-cost-icon,
        .r-thym-dialog button[class*="bg-blue-600"] .rthym-cost-icon {
            color: inherit;
        }

        /* ── Theme Definitions ── */
        :root, html.theme-default {
            /* Default Theme: R-THYM Light */
            --ui-bg: #f8fafc;
            --ui-panel-bg: #ffffff;
            --ui-dialog-bg: #ffffff;
            --ui-dialog-header-bg: #f1f5f9;
            --ui-dialog-header-text: #0f172a;

            --ui-border: #cbd5e1;
            --ui-text-main: #0f172a;
            --ui-text-muted: #475569;
            --ui-text-heading: #0f172a;
            --ui-input-bg: #ffffff;
            --ui-input-border: #d1d5db;
            --ui-input-text: #0f172a;
            --ui-input-focus-border: #3b82f6;
            --ui-btn-bg: #ffffff;
            --ui-btn-border: #d1d5db;
            --ui-btn-text: #374151;
            --ui-btn-hover: #f9fafb;
            --ui-tool-hover: #f1f5f9;
            --ui-ctx-bg: #ffffff;
            --ui-ctx-border: #cbd5e1;
            --ui-ctx-text: #374151;
            --ui-ctx-hover: #f1f5f9;
            --ui-tab-active-bg: #ffffff;
            --ui-tab-active-border: #3b82f6;
            --ui-tab-active-text: #0f172a;
            --ui-tab-inactive-bg: #f8fafc;
            --ui-tab-inactive-text: #64748b;
            --ui-tab-inactive-opacity: 1.0;
            --ui-canvas-bg: #f8fafc;
            --ui-grid-dot: #94a3b8;
            --ui-grid-line: #cbd5e1;
            --ui-weather-hud-bg: rgba(255, 255, 255, 0.9);
            --ui-weather-hud-hover: rgba(241, 245, 249, 0.9);
            --ui-accent: #2563eb;
            --ui-accent-hover: #1d4ed8;
            --ui-accent-text: #ffffff;
            --ui-accent-text-hover: #ffffff;
            --ui-header-bg: var(--ui-panel-bg);
            --ui-header-text: var(--ui-text-main);
            --ui-sidebar-bg: var(--ui-panel-bg);
            --ui-sidebar-text: var(--ui-text-main);

            /* Danger / warning state variables */
            --ui-accent-danger: #dc2626;
            --ui-accent-danger-hover: #b91c1c;
            --ui-accent-danger-bg-subtle: rgba(239, 68, 68, 0.1);
            --ui-accent-danger-border-subtle: rgba(239, 68, 68, 0.2);
            --ui-accent-danger-text-subtle: #dc2626;

            /* Economics semantic colors (income vs cost) */
            --ui-econ-income: #059669;
            --ui-econ-cost: #dc2626;

            /* Standard SVG Icon Fills (Light Mode Defaults) */
            --svg-icon-fill-374151: #374151;
            --svg-icon-fill-64748b: #64748b;
            --svg-icon-fill-F3F4F6: #F3F4F6;
            --svg-icon-fill-E5E7EB: #E5E7EB;
            --svg-icon-fill-3B82F6: #3B82F6;
            --svg-icon-fill-DBEAFE: #DBEAFE;
            --svg-icon-stroke-2563EB: #2563EB;
            --svg-icon-fill-D1FAE5: #D1FAE5;
            --svg-icon-stroke-059669: #059669;
            --svg-icon-fill-FEE2E2: #FEE2E2;
            --svg-icon-stroke-DC2626: #DC2626;
            --svg-icon-fill-f8fafc: #f8fafc;
        }

        /* STREAM-1D Theme: Light Mode overrides */
        html.theme-stream1d {
            --ui-bg: #f0f4f8;
            --ui-panel-bg: rgba(255, 255, 255, 0.85);
            --ui-dialog-bg: #ffffff;
            --ui-dialog-header-bg: rgba(231, 236, 239, 0.95);
            --ui-dialog-header-text: #274c77;
            --ui-border: #a3cef1;
            --ui-text-main: #274c77;
            --ui-text-muted: #334155;
            --ui-text-heading: #274c77;
            --ui-input-bg: #cbd5e1;
            --ui-input-border: #a3cef1;
            --ui-input-text: #274c77;
            --ui-input-focus-border: #0369a1;
            --ui-btn-bg: #e7ecef;
            --ui-btn-border: #a3cef1;
            --ui-btn-text: #274c77;
            --ui-btn-hover: rgba(163, 206, 241, 0.2);
            --ui-tool-hover: rgba(163, 206, 241, 0.2);
            --ui-ctx-bg: #ffffff;
            --ui-ctx-border: #a3cef1;
            --ui-ctx-text: #274c77;
            --ui-ctx-hover: rgba(163, 206, 241, 0.2);
            --ui-tab-active-bg: #ffffff;
            --ui-tab-active-border: #0369a1;
            --ui-tab-active-text: #274c77;
            --ui-tab-inactive-bg: rgba(231, 236, 239, 0.5);
            --ui-tab-inactive-text: #334155;
            --ui-tab-inactive-opacity: 1.0;
            --ui-canvas-bg: #f0f4f8;
            --ui-grid-dot: #94a3b8;
            --ui-grid-line: #cbd5e1;
            --ui-weather-hud-bg: rgba(255, 255, 255, 0.9);
            --ui-weather-hud-hover: rgba(231, 236, 239, 0.9);
            --ui-accent: #274c77;
            --ui-accent-hover: #1e3a5f;

            --ui-accent-danger: #e63946;
            --ui-accent-danger-hover: #d62828;
            --ui-accent-danger-bg-subtle: rgba(230, 57, 70, 0.1);
            --ui-accent-danger-border-subtle: rgba(230, 57, 70, 0.2);
            --ui-accent-danger-text-subtle: #e63946;
        }

        /* Default Theme: Dark Mode overrides */
        html.dark {
            --ui-bg: #0f172a;
            --ui-panel-bg: #1e293b;
            --ui-dialog-bg: #1e293b;
            --ui-dialog-header-bg: #0f172a;
            --ui-dialog-header-text: #f8fafc;
            --ui-border: #334155;
            --ui-text-main: #f8fafc;
            --ui-text-muted: #94a3b8;
            --ui-text-heading: #f8fafc;
            --ui-input-bg: #0f172a;
            --ui-input-border: #475569;
            --ui-input-text: #f8fafc;
            --ui-input-focus-border: #3b82f6;
            --ui-btn-bg: #334155;
            --ui-btn-border: #475569;
            --ui-btn-text: #f8fafc;
            --ui-btn-hover: #475569;
            --ui-tool-hover: #334155;
            --ui-ctx-bg: #1e293b;
            --ui-ctx-border: #334155;
            --ui-ctx-text: #f8fafc;
            --ui-ctx-hover: #334155;
            --ui-tab-active-bg: #1e293b;
            --ui-tab-active-border: #38bdf8;
            --ui-tab-active-text: #f8fafc;
            --ui-tab-inactive-bg: #0f172a;
            --ui-tab-inactive-text: #94a3b8;
            --ui-tab-inactive-opacity: 0.6;
            --ui-canvas-bg: #0f172a;
            --ui-grid-dot: #334155;
            --ui-grid-line: #334155;
            --ui-weather-hud-bg: rgba(30, 41, 59, 0.9);
            --ui-weather-hud-hover: rgba(51, 65, 85, 0.9);
            --ui-accent: #3b82f6;
            --ui-accent-hover: #2563eb;

            --ui-accent-danger: #ef4444;
            --ui-accent-danger-hover: #fca5a5;
            --ui-accent-danger-bg-subtle: rgba(239, 68, 68, 0.15);
            --ui-accent-danger-border-subtle: rgba(239, 68, 68, 0.25);
            --ui-accent-danger-text-subtle: #fca5a5;

            --ui-econ-income: #34d399;
            --ui-econ-cost: #f87171;

            /* Dark Mode SVG Icon Contrasts */
            --svg-icon-fill-374151: #cbd5e1;
            --svg-icon-fill-64748b: #cbd5e1;
            --svg-icon-fill-F3F4F6: #1e293b;
            --svg-icon-fill-E5E7EB: #334155;
            --svg-icon-fill-3B82F6: #60a5fa;
            --svg-icon-fill-DBEAFE: #1e3a8a;
            --svg-icon-stroke-2563EB: #3b82f6;
            --svg-icon-fill-D1FAE5: #064e3b;
            --svg-icon-stroke-059669: #10b981;
            --svg-icon-fill-FEE2E2: #7f1d1d;
            --svg-icon-stroke-DC2626: #ef4444;
            --svg-icon-fill-f8fafc: #0f172a;
        }

        /* STREAM-1D Theme: Dark Mode overrides */
        html.theme-stream1d.dark {
            --ui-bg: #0b132b;
            --ui-panel-bg: #1c2541;
            --ui-dialog-bg: #1c2541;
            --ui-dialog-header-bg: #0b132b;
            --ui-dialog-header-text: #e0f2fe;
            --ui-border: #3a506b;
            --ui-text-main: #e0f2fe;
            --ui-text-muted: #94a3b8;
            --ui-text-heading: #38bdf8;
            --ui-input-bg: #0b132b;
            --ui-input-border: #3a506b;
            --ui-input-text: #e0f2fe;
            --ui-input-focus-border: #00b4d8;
            --ui-btn-bg: #1c2541;
            --ui-btn-border: #3a506b;
            --ui-btn-text: #e0f2fe;
            --ui-btn-hover: #0b132b;
            --ui-tool-hover: #1c2541;
            --ui-ctx-bg: #1c2541;
            --ui-ctx-border: #3a506b;
            --ui-ctx-text: #e0f2fe;
            --ui-ctx-hover: #0b132b;
            --ui-tab-active-bg: #1c2541;
            --ui-tab-active-border: #00b4d8;
            --ui-tab-active-text: #e0f2fe;
            --ui-tab-inactive-bg: #0b132b;
            --ui-tab-inactive-text: #94a3b8;
            --ui-tab-inactive-opacity: 0.6;
            --ui-canvas-bg: #0b132b;
            --ui-grid-dot: #1c2541;
            --ui-grid-line: #1c2541;
            --ui-weather-hud-bg: rgba(28, 37, 65, 0.9);
            --ui-weather-hud-hover: rgba(11, 19, 43, 0.9);
            --ui-accent: #38bdf8;
            --ui-accent-hover: #0284c7;

            --ui-accent-danger: #f43f5e;
            --ui-accent-danger-hover: #fda4af;
            --ui-accent-danger-bg-subtle: rgba(244, 63, 94, 0.15);
            --ui-accent-danger-border-subtle: rgba(244, 63, 94, 0.25);
            --ui-accent-danger-text-subtle: #fda4af;

            /* SVG Icon contrasting fills for STREAM-1D dark */
            --svg-icon-fill-374151: #e0f2fe;
            --svg-icon-fill-64748b: #94a3b8;
            --svg-icon-fill-F3F4F6: #1c2541;
            --svg-icon-fill-E5E7EB: #0b132b;
            --svg-icon-fill-3B82F6: #38bdf8;
            --svg-icon-fill-DBEAFE: #093a3e;
            --svg-icon-stroke-2563EB: #38bdf8;
            --svg-icon-fill-D1FAE5: #0f4c3a;
            --svg-icon-stroke-059669: #34d399;
            --svg-icon-fill-FEE2E2: #6b21a8;
            --svg-icon-stroke-DC2626: #f43f5e;
            --svg-icon-fill-f8fafc: #0b132b;
        }

        /* National Park Theme: Light Mode overrides */
        html.theme-nationalpark {
            --ui-bg: #fefae0;
            --ui-panel-bg: #fefae0;
            --ui-dialog-bg: #fefae0;
            --ui-dialog-header-bg: #606c38;
            --ui-dialog-header-text: #ffffff;
            --ui-border: #dda15e;
            --ui-text-main: #283618;
            --ui-text-muted: #606c38;
            --ui-text-heading: #283618;
            --ui-input-bg: #fffef2;
            --ui-input-border: #dda15e;
            --ui-input-text: #283618;
            --ui-input-focus-border: #606c38;
            --ui-btn-bg: #fefae0;
            --ui-btn-border: #dda15e;
            --ui-btn-text: #283618;
            --ui-btn-hover: rgba(221, 161, 94, 0.2);
            --ui-tool-hover: rgba(96, 108, 56, 0.15);
            --ui-ctx-bg: #fffef2;
            --ui-ctx-border: #dda15e;
            --ui-ctx-text: #283618;
            --ui-ctx-hover: rgba(96, 108, 56, 0.15);
            --ui-tab-active-bg: #fffef2;
            --ui-tab-active-border: #bc6c25;
            --ui-tab-active-text: #283618;
            --ui-tab-inactive-bg: rgba(221, 161, 94, 0.1);
            --ui-tab-inactive-text: #606c38;
            --ui-tab-inactive-opacity: 1.0;
            --ui-canvas-bg: #fefae0;
            --ui-grid-dot: #bc6c25;
            --ui-grid-line: #dda15e;
            --ui-weather-hud-bg: rgba(254, 250, 224, 0.9);
            --ui-weather-hud-hover: rgba(221, 161, 94, 0.2);
            --ui-accent: #bc6c25;
            --ui-accent-hover: #a0561d;

            --ui-accent-danger: #bc6c25;
            --ui-accent-danger-hover: #a0561d;
            --ui-accent-danger-bg-subtle: rgba(188, 108, 37, 0.1);
            --ui-accent-danger-border-subtle: rgba(188, 108, 37, 0.2);
            --ui-accent-danger-text-subtle: #bc6c25;

            /* Layout Framing variables */
            --ui-header-bg: #283618;
            --ui-header-text: #fefae0;
            --ui-sidebar-bg: #ccd5ae;
            --ui-sidebar-text: #283618;
            --ui-sidebar-hover: rgba(40, 54, 24, 0.08);
            --ui-sidebar-active-bg: #283618;
            --ui-sidebar-active-text: #fefae0;
        }

        /* National Park Theme: Dark Mode overrides */
        html.theme-nationalpark.dark {
            --ui-bg: #141d0f;
            --ui-panel-bg: #1c2815;
            --ui-dialog-bg: #1c2815;
            --ui-dialog-header-bg: #606c38;
            --ui-dialog-header-text: #ffffff;
            --ui-border: #606c38;
            --ui-text-main: #fefae0;
            --ui-text-muted: #dda15e;
            --ui-text-heading: #dda15e;
            --ui-input-bg: #141d0f;
            --ui-input-border: #606c38;
            --ui-input-text: #fefae0;
            --ui-input-focus-border: #dda15e;
            --ui-btn-bg: #1c2815;
            --ui-btn-border: #606c38;
            --ui-btn-text: #fefae0;
            --ui-btn-hover: #283618;
            --ui-tool-hover: #283618;
            --ui-ctx-bg: #1c2815;
            --ui-ctx-border: #606c38;
            --ui-ctx-text: #fefae0;
            --ui-ctx-hover: #283618;
            --ui-tab-active-bg: #1c2815;
            --ui-tab-active-border: #bc6c25;
            --ui-tab-active-text: #fefae0;
            --ui-tab-inactive-bg: #141d0f;
            --ui-tab-inactive-text: #dda15e;
            --ui-tab-inactive-opacity: 0.6;
            --ui-canvas-bg: #141d0f;
            --ui-grid-dot: #bc6c25;
            --ui-grid-line: #606c38;
            --ui-weather-hud-bg: rgba(28, 40, 21, 0.9);
            --ui-weather-hud-hover: rgba(40, 54, 24, 0.9);
            --ui-accent: #bc6c25;
            --ui-accent-hover: #dda15e;
            --ui-accent-text-hover: #141d0f;

            --ui-accent-danger: #bc6c25;
            --ui-accent-danger-hover: #dda15e;
            --ui-accent-danger-bg-subtle: rgba(188, 108, 37, 0.15);
            --ui-accent-danger-border-subtle: rgba(188, 108, 37, 0.3);
            --ui-accent-danger-text-subtle: #dda15e;

            /* Layout Framing variables */
            --ui-header-bg: #141d0f;
            --ui-header-text: #fefae0;
            --ui-sidebar-bg: #283618;
            --ui-sidebar-text: #fefae0;
            --ui-sidebar-hover: rgba(96, 108, 56, 0.3);
            --ui-sidebar-active-bg: #606c38;
            --ui-sidebar-active-text: #fefae0;

            /* SVG contrasting fills for National Park dark */
            --svg-icon-fill-374151: #fefae0;
            --svg-icon-fill-64748b: #dda15e;
            --svg-icon-fill-F3F4F6: #1c2815;
            --svg-icon-fill-E5E7EB: #141d0f;
            --svg-icon-fill-3B82F6: #dda15e;
            --svg-icon-fill-DBEAFE: #283618;
            --svg-icon-stroke-2563EB: #dda15e;
            --svg-icon-fill-D1FAE5: #283618;
            --svg-icon-stroke-059669: #606c38;
            --svg-icon-fill-FEE2E2: #bc6c25;
            --svg-icon-stroke-DC2626: #dda15e;
            --svg-icon-fill-f8fafc: #141d0f;
        }

        /* Forest Bath Theme: Light Mode overrides */
        html.theme-forestbath {
            --ui-bg: #f2e8cf;
            --ui-panel-bg: #f2e8cf;
            --ui-dialog-bg: #f2e8cf;
            --ui-dialog-header-bg: #6a994e;
            --ui-dialog-header-text: #ffffff;
            --ui-border: #a7c957;
            --ui-text-main: #386641;
            --ui-text-muted: #3f5e30;
            --ui-text-heading: #386641;
            --ui-input-bg: #faf6eb;
            --ui-input-border: #a7c957;
            --ui-input-text: #386641;
            --ui-input-focus-border: #6a994e;
            --ui-btn-bg: #f2e8cf;
            --ui-btn-border: #a7c957;
            --ui-btn-text: #386641;
            --ui-btn-hover: rgba(106, 153, 78, 0.2);
            --ui-tool-hover: rgba(56, 102, 65, 0.15);
            --ui-ctx-bg: #faf6eb;
            --ui-ctx-border: #a7c957;
            --ui-ctx-text: #386641;
            --ui-ctx-hover: rgba(106, 153, 78, 0.15);
            --ui-tab-active-bg: #faf6eb;
            --ui-tab-active-border: #bc4749;
            --ui-tab-active-text: #386641;
            --ui-tab-inactive-bg: rgba(106, 153, 78, 0.1);
            --ui-tab-inactive-text: #6a994e;
            --ui-tab-inactive-opacity: 1.0;
            --ui-canvas-bg: #f2e8cf;
            --ui-grid-dot: #bc4749;
            --ui-grid-line: #a7c957;
            --ui-weather-hud-bg: rgba(242, 232, 207, 0.9);
            --ui-weather-hud-hover: rgba(106, 153, 78, 0.2);
            --ui-accent: #bc4749;
            --ui-accent-hover: #9a3536;
            --ui-accent-danger: #bc4749;
            --ui-accent-danger-hover: #9a3536;
            --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.12);
            --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.25);
            --ui-accent-danger-text-subtle: #bc4749;

            /* Layout Framing variables */
            --ui-header-bg: #386641;
            --ui-header-text: #f2e8cf;
            --ui-sidebar-bg: #a7c957;
            --ui-sidebar-text: #386641;
            --ui-sidebar-hover: rgba(56, 102, 65, 0.08);
            --ui-sidebar-active-bg: #386641;
            --ui-sidebar-active-text: #f2e8cf;
        }

        /* Forest Bath Theme: Dark Mode overrides */
        html.theme-forestbath.dark {
            --ui-bg: #142016;
            --ui-panel-bg: #1a2c1f;
            --ui-dialog-bg: #1a2c1f;
            --ui-dialog-header-bg: #6a994e;
            --ui-dialog-header-text: #ffffff;
            --ui-border: #386641;
            --ui-text-main: #f2e8cf;
            --ui-text-muted: #a7c957;
            --ui-text-heading: #a7c957;
            --ui-input-bg: #142016;
            --ui-input-border: #386641;
            --ui-input-text: #f2e8cf;
            --ui-input-focus-border: #a7c957;
            --ui-btn-bg: #1a2c1f;
            --ui-btn-border: #386641;
            --ui-btn-text: #f2e8cf;
            --ui-btn-hover: #386641;
            --ui-tool-hover: #386641;
            --ui-ctx-bg: #1a2c1f;
            --ui-ctx-border: #386641;
            --ui-ctx-text: #f2e8cf;
            --ui-ctx-hover: #386641;
            --ui-tab-active-bg: #1a2c1f;
            --ui-tab-active-border: #bc4749;
            --ui-tab-active-text: #f2e8cf;
            --ui-tab-inactive-bg: #142016;
            --ui-tab-inactive-text: #a7c957;
            --ui-tab-inactive-opacity: 0.6;
            --ui-canvas-bg: #142016;
            --ui-grid-dot: #bc4749;
            --ui-grid-line: #386641;
            --ui-weather-hud-bg: rgba(26, 44, 31, 0.9);
            --ui-weather-hud-hover: rgba(56, 102, 65, 0.9);
            --ui-accent: #bc4749;
            --ui-accent-hover: #9a3536;
            --ui-accent-danger: #bc4749;
            --ui-accent-danger-hover: #9a3536;
            --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.15);
            --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.3);
            --ui-accent-danger-text-subtle: #f2e8cf;

            /* Layout Framing variables */
            --ui-header-bg: #142016;
            --ui-header-text: #f2e8cf;
            --ui-sidebar-bg: #386641;
            --ui-sidebar-text: #f2e8cf;
            --ui-sidebar-hover: rgba(167, 201, 87, 0.3);
            --ui-sidebar-active-bg: #a7c957;
            --ui-sidebar-active-text: #142016;

            /* SVG contrasting fills for Forest Bath dark */
            --svg-icon-fill-374151: #f2e8cf;
            --svg-icon-fill-64748b: #a7c957;
            --svg-icon-fill-F3F4F6: #1a2c1f;
            --svg-icon-fill-E5E7EB: #142016;
            --svg-icon-fill-3B82F6: #a7c957;
            --svg-icon-fill-DBEAFE: #386641;
            --svg-icon-stroke-2563EB: #a7c957;
            --svg-icon-fill-D1FAE5: #386641;
            --svg-icon-stroke-059669: #6a994e;
            --svg-icon-fill-FEE2E2: #bc4749;
            --svg-icon-stroke-DC2626: #a7c957;
            --svg-icon-fill-f8fafc: #142016;
        }

        /* Black Gold Theme: Light Mode overrides */
        html.theme-blackgold {
            --ui-bg: #e5e5e5;
            --ui-panel-bg: #ffffff;
            --ui-dialog-bg: #ffffff;
            --ui-dialog-header-bg: #14213d;
            --ui-dialog-header-text: #fca311;
            --ui-border: #cbd5e1;
            --ui-text-main: #14213d;
            --ui-text-muted: #64748b;
            --ui-text-heading: #14213d;
            --ui-input-bg: #f5f5f5;
            --ui-input-border: #cbd5e1;
            --ui-input-text: #14213d;
            --ui-input-focus-border: #fca311;
            --ui-btn-bg: #ffffff;
            --ui-btn-border: #cbd5e1;
            --ui-btn-text: #14213d;
            --ui-btn-hover: rgba(252, 163, 17, 0.15);
            --ui-tool-hover: rgba(20, 33, 61, 0.1);
            --ui-ctx-bg: #ffffff;
            --ui-ctx-border: #cbd5e1;
            --ui-ctx-text: #14213d;
            --ui-ctx-hover: rgba(252, 163, 17, 0.15);
            --ui-tab-active-bg: #ffffff;
            --ui-tab-active-border: #fca311;
            --ui-tab-active-text: #14213d;
            --ui-tab-inactive-bg: #e5e5e5;
            --ui-tab-inactive-text: #64748b;
            --ui-tab-inactive-opacity: 1.0;
            --ui-canvas-bg: #ffffff;
            --ui-grid-dot: #fca311;
            --ui-grid-line: #e5e5e5;
            --ui-weather-hud-bg: rgba(255, 255, 255, 0.9);
            --ui-weather-hud-hover: rgba(252, 163, 17, 0.2);
            --ui-accent: #fca311;
            --ui-accent-hover: #e59200;
            --ui-accent-text: #14213d;
            --ui-accent-text-hover: #ffffff;
            --ui-accent-danger: #bc4749;
            --ui-accent-danger-hover: #9a3536;
            --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.12);
            --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.25);
            --ui-accent-danger-text-subtle: #bc4749;

            /* Layout Framing variables */
            --ui-header-bg: #14213d;
            --ui-header-text: #fca311;
            --ui-sidebar-bg: #e5e5e5;
            --ui-sidebar-text: #14213d;
            --ui-sidebar-hover: rgba(20, 33, 61, 0.08);
            --ui-sidebar-active-bg: #14213d;
            --ui-sidebar-active-text: #fca311;
        }

        /* Black Gold Theme: Dark Mode overrides */
        html.theme-blackgold.dark {
            --ui-bg: #000000;
            --ui-panel-bg: #14213d;
            --ui-dialog-bg: #14213d;
            --ui-dialog-header-bg: #000000;
            --ui-dialog-header-text: #fca311;
            --ui-border: #334155;
            --ui-text-main: #e5e5e5;
            --ui-text-muted: #94a3b8;
            --ui-text-heading: #fca311;
            --ui-input-bg: #000000;
            --ui-input-border: #334155;
            --ui-input-text: #e5e5e5;
            --ui-input-focus-border: #fca311;
            --ui-btn-bg: #14213d;
            --ui-btn-border: #334155;
            --ui-btn-text: #e5e5e5;
            --ui-btn-hover: #000000;
            --ui-tool-hover: #000000;
            --ui-ctx-bg: #14213d;
            --ui-ctx-border: #334155;
            --ui-ctx-text: #e5e5e5;
            --ui-ctx-hover: #000000;
            --ui-tab-active-bg: #14213d;
            --ui-tab-active-border: #fca311;
            --ui-tab-active-text: #e5e5e5;
            --ui-tab-inactive-bg: #000000;
            --ui-tab-inactive-text: #94a3b8;
            --ui-tab-inactive-opacity: 0.6;
            --ui-canvas-bg: #000000;
            --ui-grid-dot: #fca311;
            --ui-grid-line: #14213d;
            --ui-weather-hud-bg: rgba(20, 33, 61, 0.9);
            --ui-weather-hud-hover: rgba(0, 0, 0, 0.9);
            --ui-accent: #fca311;
            --ui-accent-hover: #e59200;
            --ui-accent-text: #000000;
            --ui-accent-text-hover: #000000;
            --ui-accent-danger: #bc4749;
            --ui-accent-danger-hover: #9a3536;
            --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.15);
            --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.3);
            --ui-accent-danger-text-subtle: #f2e8cf;

            /* Layout Framing variables */
            --ui-header-bg: #000000;
            --ui-header-text: #fca311;
            --ui-sidebar-bg: #14213d;
            --ui-sidebar-text: #e5e5e5;
            --ui-sidebar-hover: rgba(252, 163, 17, 0.15);
            --ui-sidebar-active-bg: #000000;
            --ui-sidebar-active-text: #fca311;

            /* SVG contrasting fills for Black Gold dark */
            --svg-icon-fill-374151: #e5e5e5;
            --svg-icon-fill-64748b: #fca311;
            --svg-icon-fill-F3F4F6: #14213d;
            --svg-icon-fill-E5E7EB: #000000;
            --svg-icon-fill-3B82F6: #fca311;
            --svg-icon-fill-DBEAFE: #14213d;
            --svg-icon-stroke-2563EB: #fca311;
            --svg-icon-fill-D1FAE5: #14213d;
            --svg-icon-stroke-059669: #fca311;
            --svg-icon-fill-FEE2E2: #bc4749;
            --svg-icon-stroke-DC2626: #fca311;
            --svg-icon-fill-f8fafc: #000000;
        }

        /* Mocha Latte Theme: Light Mode overrides */
        html.theme-mochalatte {
            --ui-bg: #f2f4f3;
            --ui-panel-bg: #ffffff;
            --ui-dialog-bg: #ffffff;
            --ui-dialog-header-bg: #5e503f;
            --ui-dialog-header-text: #f2f4f3;
            --ui-border: #a9927d;
            --ui-text-main: #5e503f;
            --ui-text-muted: #7a6655;
            --ui-text-heading: #5e503f;
            --ui-input-bg: #ffffff;
            --ui-input-border: #a9927d;
            --ui-input-text: #0a0908;
            --ui-input-focus-border: #22333b;
            --ui-btn-bg: #ffffff;
            --ui-btn-border: #a9927d;
            --ui-btn-text: #5e503f;
            --ui-btn-hover: rgba(169, 146, 125, 0.15);
            --ui-tool-hover: rgba(94, 80, 63, 0.1);
            --ui-ctx-bg: #ffffff;
            --ui-ctx-border: #a9927d;
            --ui-ctx-text: #0a0908;
            --ui-ctx-hover: rgba(169, 146, 125, 0.15);
            --ui-tab-active-bg: #ffffff;
            --ui-tab-active-border: #5e503f;
            --ui-tab-active-text: #0a0908;
            --ui-tab-inactive-bg: #f2f4f3;
            --ui-tab-inactive-text: #a9927d;
            --ui-tab-inactive-opacity: 1.0;
            --ui-canvas-bg: #f2f4f3;
            --ui-grid-dot: #a9927d;
            --ui-grid-line: rgba(169, 146, 125, 0.2);
            --ui-weather-hud-bg: rgba(242, 244, 243, 0.9);
            --ui-weather-hud-hover: rgba(169, 146, 125, 0.2);
            --ui-accent: #22333b;
            --ui-accent-hover: #0a0908;
            --ui-accent-danger: #bc4749;
            --ui-accent-danger-hover: #9a3536;
            --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.12);
            --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.25);
            --ui-accent-danger-text-subtle: #bc4749;

            /* Layout Framing variables */
            --ui-header-bg: #5e503f;
            --ui-header-text: #f2f4f3;
            --ui-sidebar-bg: #f2f4f3;
            --ui-sidebar-text: #5e503f;
            --ui-sidebar-hover: rgba(94, 80, 63, 0.08);
            --ui-sidebar-active-bg: #5e503f;
            --ui-sidebar-active-text: #f2f4f3;
        }

        /* Mocha Latte Theme: Dark Mode overrides */
        html.theme-mochalatte.dark {
            --ui-bg: #0a0908;
            --ui-panel-bg: #22333b;
            --ui-dialog-bg: #22333b;
            --ui-dialog-header-bg: #0a0908;
            --ui-dialog-header-text: #a9927d;
            --ui-border: #5e503f;
            --ui-text-main: #f2f4f3;
            --ui-text-muted: #a9927d;
            --ui-text-heading: #a9927d;
            --ui-input-bg: #0a0908;
            --ui-input-border: #5e503f;
            --ui-input-text: #f2f4f3;
            --ui-input-focus-border: #a9927d;
            --ui-btn-bg: #22333b;
            --ui-btn-border: #5e503f;
            --ui-btn-text: #f2f4f3;
            --ui-btn-hover: #0a0908;
            --ui-tool-hover: #0a0908;
            --ui-ctx-bg: #22333b;
            --ui-ctx-border: #5e503f;
            --ui-ctx-text: #f2f4f3;
            --ui-ctx-hover: #0a0908;
            --ui-tab-active-bg: #22333b;
            --ui-tab-active-border: #a9927d;
            --ui-tab-active-text: #f2f4f3;
            --ui-tab-inactive-bg: #0a0908;
            --ui-tab-inactive-text: #a9927d;
            --ui-tab-inactive-opacity: 0.6;
            --ui-canvas-bg: #0a0908;
            --ui-grid-dot: #a9927d;
            --ui-grid-line: #22333b;
            --ui-weather-hud-bg: rgba(34, 51, 59, 0.9);
            --ui-weather-hud-hover: rgba(10, 9, 8, 0.9);
            --ui-accent: #a9927d;
            --ui-accent-hover: #f2f4f3;
            --ui-accent-text: #0a0908;
            --ui-accent-text-hover: #0a0908;
            --ui-accent-danger: #bc4749;
            --ui-accent-danger-hover: #9a3536;
            --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.15);
            --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.3);
            --ui-accent-danger-text-subtle: #f2f4f3;

            /* Layout Framing variables */
            --ui-header-bg: #0a0908;
            --ui-header-text: #a9927d;
            --ui-sidebar-bg: #22333b;
            --ui-sidebar-text: #f2f4f3;
            --ui-sidebar-hover: rgba(169, 146, 125, 0.15);
            --ui-sidebar-active-bg: #0a0908;
            --ui-sidebar-active-text: #a9927d;

            /* SVG contrasting fills for Mocha Latte dark */
            --svg-icon-fill-374151: #f2f4f3;
            --svg-icon-fill-64748b: #a9927d;
            --svg-icon-fill-F3F4F6: #22333b;
            --svg-icon-fill-E5E7EB: #0a0908;
            --svg-icon-fill-3B82F6: #a9927d;
            --svg-icon-fill-DBEAFE: #22333b;
            --svg-icon-stroke-2563EB: #a9927d;
            --svg-icon-fill-D1FAE5: #22333b;
            --svg-icon-stroke-059669: #a9927d;
            --svg-icon-fill-FEE2E2: #5e503f;
            --svg-icon-stroke-DC2626: #a9927d;
            --svg-icon-fill-f8fafc: #0a0908;
        }

        /* Coastal Vibes Theme: Light Mode overrides */
        html.theme-coastalvibes {
            --ui-bg: #e0fbfc;
            --ui-panel-bg: #ffffff;
            --ui-dialog-bg: #ffffff;
            --ui-dialog-header-bg: #3d5a80;
            --ui-dialog-header-text: #e0fbfc;
            --ui-border: #98c1d9;
            --ui-text-main: #293241;
            --ui-text-muted: #3d5a80;
            --ui-text-heading: #293241;
            --ui-input-bg: #ffffff;
            --ui-input-border: #98c1d9;
            --ui-input-text: #293241;
            --ui-input-focus-border: #ee6c4d;
            --ui-btn-bg: #ffffff;
            --ui-btn-border: #98c1d9;
            --ui-btn-text: #3d5a80;
            --ui-btn-hover: rgba(152, 193, 217, 0.15);
            --ui-tool-hover: rgba(61, 90, 128, 0.1);
            --ui-ctx-bg: #ffffff;
            --ui-ctx-border: #98c1d9;
            --ui-ctx-text: #293241;
            --ui-ctx-hover: rgba(152, 193, 217, 0.15);
            --ui-tab-active-bg: #ffffff;
            --ui-tab-active-border: #3d5a80;
            --ui-tab-active-text: #293241;
            --ui-tab-inactive-bg: #e0fbfc;
            --ui-tab-inactive-text: #98c1d9;
            --ui-tab-inactive-opacity: 1.0;
            --ui-canvas-bg: #e0fbfc;
            --ui-grid-dot: #98c1d9;
            --ui-grid-line: rgba(152, 193, 217, 0.2);
            --ui-weather-hud-bg: rgba(224, 251, 252, 0.9);
            --ui-weather-hud-hover: rgba(152, 193, 217, 0.2);
            --ui-accent: #3d5a80;
            --ui-accent-hover: #293241;
            --ui-accent-danger: #ee6c4d;
            --ui-accent-danger-hover: #d9583b;
            --ui-accent-danger-bg-subtle: rgba(238, 108, 77, 0.12);
            --ui-accent-danger-border-subtle: rgba(238, 108, 77, 0.25);
            --ui-accent-danger-text-subtle: #ee6c4d;

            /* Layout Framing variables */
            --ui-header-bg: #3d5a80;
            --ui-header-text: #e0fbfc;
            --ui-sidebar-bg: #e0fbfc;
            --ui-sidebar-text: #3d5a80;
            --ui-sidebar-hover: rgba(61, 90, 128, 0.08);
            --ui-sidebar-active-bg: #3d5a80;
            --ui-sidebar-active-text: #e0fbfc;
        }

        /* Coastal Vibes Theme: Dark Mode overrides */
        html.theme-coastalvibes.dark {
            --ui-bg: #293241;
            --ui-panel-bg: #3d5a80;
            --ui-dialog-bg: #3d5a80;
            --ui-dialog-header-bg: #293241;
            --ui-dialog-header-text: #98c1d9;
            --ui-border: #3d5a80;
            --ui-text-main: #e0fbfc;
            --ui-text-muted: #98c1d9;
            --ui-text-heading: #98c1d9;
            --ui-input-bg: #293241;
            --ui-input-border: #3d5a80;
            --ui-input-text: #e0fbfc;
            --ui-input-focus-border: #98c1d9;
            --ui-btn-bg: #3d5a80;
            --ui-btn-border: #293241;
            --ui-btn-text: #e0fbfc;
            --ui-btn-hover: #293241;
            --ui-tool-hover: #293241;
            --ui-ctx-bg: #3d5a80;
            --ui-ctx-border: #293241;
            --ui-ctx-text: #e0fbfc;
            --ui-ctx-hover: #293241;
            --ui-tab-active-bg: #3d5a80;
            --ui-tab-active-border: #98c1d9;
            --ui-tab-active-text: #e0fbfc;
            --ui-tab-inactive-bg: #293241;
            --ui-tab-inactive-text: #98c1d9;
            --ui-tab-inactive-opacity: 0.6;
            --ui-canvas-bg: #293241;
            --ui-grid-dot: #98c1d9;
            --ui-grid-line: #3d5a80;
            --ui-weather-hud-bg: rgba(61, 90, 128, 0.9);
            --ui-weather-hud-hover: rgba(41, 50, 65, 0.9);
            --ui-accent: #98c1d9;
            --ui-accent-hover: #e0fbfc;
            --ui-accent-text: #293241;
            --ui-accent-text-hover: #293241;
            --ui-accent-danger: #ee6c4d;
            --ui-accent-danger-hover: #f58d76;
            --ui-accent-danger-bg-subtle: rgba(238, 108, 77, 0.15);
            --ui-accent-danger-border-subtle: rgba(238, 108, 77, 0.3);
            --ui-accent-danger-text-subtle: #f58d76;

            /* Layout Framing variables */
            --ui-header-bg: #293241;
            --ui-header-text: #98c1d9;
            --ui-sidebar-bg: #3d5a80;
            --ui-sidebar-text: #e0fbfc;
            --ui-sidebar-hover: rgba(152, 193, 217, 0.15);
            --ui-sidebar-active-bg: #293241;
            --ui-sidebar-active-text: #98c1d9;

            /* SVG contrasting fills for Coastal Vibes dark */
            --svg-icon-fill-374151: #e0fbfc;
            --svg-icon-fill-64748b: #98c1d9;
            --svg-icon-fill-F3F4F6: #3d5a80;
            --svg-icon-fill-E5E7EB: #293241;
            --svg-icon-fill-3B82F6: #98c1d9;
            --svg-icon-fill-DBEAFE: #3d5a80;
            --svg-icon-stroke-2563EB: #98c1d9;
            --svg-icon-fill-D1FAE5: #3d5a80;
            --svg-icon-stroke-059669: #98c1d9;
            --svg-icon-fill-FEE2E2: #ee6c4d;
            --svg-icon-stroke-DC2626: #98c1d9;
            --svg-icon-fill-f8fafc: #293241;
        }

        /* Rustic Charm Theme: Light Mode overrides */
        html.theme-rusticcharm {
            --ui-bg: #fffcf2;
            --ui-panel-bg: #ffffff;
            --ui-dialog-bg: #ffffff;
            --ui-dialog-header-bg: #403d39;
            --ui-dialog-header-text: #fffcf2;
            --ui-border: #ccc5b9;
            --ui-text-main: #252422;
            --ui-text-muted: #7a7368;
            --ui-text-heading: #252422;
            --ui-input-bg: #ffffff;
            --ui-input-border: #ccc5b9;
            --ui-input-text: #252422;
            --ui-input-focus-border: #eb5e28;
            --ui-btn-bg: #ffffff;
            --ui-btn-border: #ccc5b9;
            --ui-btn-text: #403d39;
            --ui-btn-hover: rgba(204, 197, 185, 0.2);
            --ui-tool-hover: rgba(64, 61, 57, 0.08);
            --ui-ctx-bg: #ffffff;
            --ui-ctx-border: #ccc5b9;
            --ui-ctx-text: #252422;
            --ui-ctx-hover: rgba(204, 197, 185, 0.2);
            --ui-tab-active-bg: #ffffff;
            --ui-tab-active-border: #eb5e28;
            --ui-tab-active-text: #252422;
            --ui-tab-inactive-bg: #fffcf2;
            --ui-tab-inactive-text: #403d39;
            --ui-tab-inactive-opacity: 1.0;
            --ui-canvas-bg: #fffcf2;
            --ui-grid-dot: #ccc5b9;
            --ui-grid-line: rgba(204, 197, 185, 0.2);
            --ui-weather-hud-bg: rgba(255, 252, 242, 0.9);
            --ui-weather-hud-hover: rgba(204, 197, 185, 0.2);
            --ui-accent: #eb5e28;
            --ui-accent-hover: #d84a15;
            --ui-accent-danger: #eb5e28;
            --ui-accent-danger-hover: #d84a15;
            --ui-accent-danger-bg-subtle: rgba(235, 94, 40, 0.12);
            --ui-accent-danger-border-subtle: rgba(235, 94, 40, 0.25);
            --ui-accent-danger-text-subtle: #eb5e28;

            /* Layout Framing variables */
            --ui-header-bg: #403d39;
            --ui-header-text: #fffcf2;
            --ui-sidebar-bg: #fffcf2;
            --ui-sidebar-text: #403d39;
            --ui-sidebar-hover: rgba(64, 61, 57, 0.08);
            --ui-sidebar-active-bg: #403d39;
            --ui-sidebar-active-text: #fffcf2;
        }

        /* Rustic Charm Theme: Dark Mode overrides */
        html.theme-rusticcharm.dark {
            --ui-bg: #252422;
            --ui-panel-bg: #403d39;
            --ui-dialog-bg: #403d39;
            --ui-dialog-header-bg: #252422;
            --ui-dialog-header-text: #ccc5b9;
            --ui-border: #403d39;
            --ui-text-main: #fffcf2;
            --ui-text-muted: #ccc5b9;
            --ui-text-heading: #ccc5b9;
            --ui-input-bg: #252422;
            --ui-input-border: #403d39;
            --ui-input-text: #fffcf2;
            --ui-input-focus-border: #eb5e28;
            --ui-btn-bg: #403d39;
            --ui-btn-border: #252422;
            --ui-btn-text: #fffcf2;
            --ui-btn-hover: #252422;
            --ui-tool-hover: #252422;
            --ui-ctx-bg: #403d39;
            --ui-ctx-border: #252422;
            --ui-ctx-text: #fffcf2;
            --ui-ctx-hover: #252422;
            --ui-tab-active-bg: #403d39;
            --ui-tab-active-border: #eb5e28;
            --ui-tab-active-text: #fffcf2;
            --ui-tab-inactive-bg: #252422;
            --ui-tab-inactive-text: #ccc5b9;
            --ui-tab-inactive-opacity: 0.6;
            --ui-canvas-bg: #252422;
            --ui-grid-dot: #ccc5b9;
            --ui-grid-line: #403d39;
            --ui-weather-hud-bg: rgba(64, 61, 57, 0.9);
            --ui-weather-hud-hover: rgba(37, 36, 34, 0.9);
            --ui-accent: #eb5e28;
            --ui-accent-hover: #fffcf2;
            --ui-accent-text: #252422;
            --ui-accent-text-hover: #252422;
            --ui-accent-danger: #eb5e28;
            --ui-accent-danger-hover: #fffcf2;
            --ui-accent-danger-bg-subtle: rgba(235, 94, 40, 0.15);
            --ui-accent-danger-border-subtle: rgba(235, 94, 40, 0.3);
            --ui-accent-danger-text-subtle: #fffcf2;

            /* Layout Framing variables */
            --ui-header-bg: #252422;
            --ui-header-text: #ccc5b9;
            --ui-sidebar-bg: #403d39;
            --ui-sidebar-text: #fffcf2;
            --ui-sidebar-hover: rgba(204, 197, 185, 0.15);
            --ui-sidebar-active-bg: #252422;
            --ui-sidebar-active-text: #ccc5b9;

            /* SVG contrasting fills for Rustic Charm dark */
            --svg-icon-fill-374151: #fffcf2;
            --svg-icon-fill-64748b: #ccc5b9;
            --svg-icon-fill-F3F4F6: #403d39;
            --svg-icon-fill-E5E7EB: #252422;
            --svg-icon-fill-3B82F6: #eb5e28;
            --svg-icon-fill-DBEAFE: #403d39;
            --svg-icon-stroke-2563EB: #eb5e28;
            --svg-icon-fill-D1FAE5: #403d39;
            --svg-icon-stroke-059669: #eb5e28;
            --svg-icon-fill-FEE2E2: #403d39;
            --svg-icon-stroke-DC2626: #eb5e28;
            --svg-icon-fill-f8fafc: #252422;
        }

        /* ── Theme Global Application Styles ── */
        body {
            background-color: var(--ui-bg) !important;
            color: var(--ui-text-main) !important;
        }

        .r-thym-dialog {
            background-color: var(--ui-dialog-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-main) !important;
        }
        .r-thym-dialog .bg-white {
            background-color: var(--ui-dialog-bg) !important;
            border-color: var(--ui-border) !important;
        }
        .r-thym-dialog .cursor-move {
            background-color: var(--ui-dialog-header-bg) !important;
            border-color: var(--ui-border) !important;
        }
        .r-thym-dialog .cursor-move h3 {
            color: var(--ui-dialog-header-text) !important;
        }
        .r-thym-dialog .cursor-move button {
            color: var(--ui-dialog-header-text) !important;
            background-color: transparent !important;
        }
        .r-thym-dialog .cursor-move button:hover {
            background-color: rgba(128, 128, 128, 0.15) !important;
        }
        .r-thym-dialog .bg-orange-50 {
            background-color: rgba(249, 115, 22, 0.15) !important;
            border-color: rgba(249, 115, 22, 0.3) !important;
            color: var(--ui-text-main) !important;
        }
        .r-thym-dialog .bg-slate-50,
        .r-thym-dialog .bg-slate-100 {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-main) !important;
        }
        .r-thym-dialog *:not(h3) {
            color: var(--ui-text-main);
        }
        .r-thym-dialog h3 {
            color: var(--ui-text-heading) !important;
        }
        .r-thym-dialog label, 
        .r-thym-dialog span:not(.button-icon), 
        .r-thym-dialog p, 
        .r-thym-dialog input:not([type="checkbox"]), 
        .r-thym-dialog select {
            color: var(--ui-text-main) !important;
        }
        .r-thym-dialog input:not([type="checkbox"]),
        .r-thym-dialog textarea,
        .r-thym-dialog select {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-input-border) !important;
            color: var(--ui-input-text) !important;
        }
        .r-thym-dialog input:focus,
        .r-thym-dialog textarea:focus,
        .r-thym-dialog select:focus {
            border-color: var(--ui-input-focus-border) !important;
        }
        .r-thym-dialog button:not(.bg-blue-600):not(.bg-green-500):not(.bg-slate-400):not(.bg-red-600):not(.bg-brand-action) {
            background-color: var(--ui-btn-bg) !important;
            border-color: var(--ui-btn-border) !important;
            color: var(--ui-btn-text) !important;
        }
        .r-thym-dialog button:not(.bg-blue-600):not(.bg-green-500):not(.bg-slate-400):not(.bg-red-600):not(.bg-brand-action):hover {
            background-color: var(--ui-btn-hover) !important;
        }

        .r-thym-dialog button.bg-blue-600,
        .r-thym-dialog button.bg-brand-action,
        .r-thym-dialog button#themes-dialog-confirm {
            background-color: var(--ui-accent) !important;
            border-color: var(--ui-accent) !important;
            color: var(--ui-accent-text, #ffffff) !important;
        }
        .r-thym-dialog button.bg-blue-600:hover,
        .r-thym-dialog button.bg-brand-action:hover,
        .r-thym-dialog button#themes-dialog-confirm:hover {
            background-color: var(--ui-accent-hover) !important;
            border-color: var(--ui-accent-hover) !important;
            color: var(--ui-accent-text-hover, #ffffff) !important;
        }

        .r-thym-dialog button.bg-red-600,
        .r-thym-dialog button.bg-red-500 {
            background-color: var(--ui-accent-danger, #dc2626) !important;
            border-color: var(--ui-accent-danger, #dc2626) !important;
            color: #ffffff !important;
        }
        .r-thym-dialog button.bg-red-600:hover,
        .r-thym-dialog button.bg-red-500:hover {
            background-color: var(--ui-accent-danger-hover, #b91c1c) !important;
            border-color: var(--ui-accent-danger-hover, #b91c1c) !important;
        }

        /* Cash Flow Optimizer */
        #batch-optimizer-dialog[data-running="1"] {
            background-color: rgba(0, 0, 0, 0.45) !important;
        }
        #batch-optimizer-dialog .batch-opt-var-card {
            border: 1px solid var(--ui-border);
            border-radius: 0.375rem;
            padding: 0.5rem 0.625rem;
            background-color: var(--ui-input-bg);
        }
        #batch-optimizer-dialog .batch-opt-inline-field {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            min-width: 0;
        }
        #batch-optimizer-dialog .batch-opt-inline-label {
            flex-shrink: 0;
            font-size: 0.6875rem;
            font-weight: 600;
            text-align: right;
            color: var(--ui-text-muted) !important;
        }
        #batch-optimizer-dialog .batch-opt-inline-label--wide { width: 4.75rem; }
        #batch-optimizer-dialog .batch-opt-inline-label--narrow { width: 2.5rem; }
        #batch-optimizer-dialog .batch-opt-var-fields {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.375rem;
        }
        @media (min-width: 520px) {
            #batch-optimizer-dialog .batch-opt-var-fields {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        #batch-optimizer-dialog .batch-opt-field-group {
            min-width: 0;
        }
        #batch-optimizer-dialog .batch-opt-bound-group {
            min-width: 0;
        }
        #batch-optimizer-dialog [id^="batch-opt-numeric-bounds-"] {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.375rem;
        }

        /* ── Chart Properties Dialog Themes ── */
        #chart-dialog .cursor-move h3 {
            color: var(--ui-dialog-header-text) !important;
        }
        #chart-dialog select.bg-white,
        #chart-dialog button.bg-white:not(.bg-blue-600),
        #chart-dialog input.bg-white {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-input-border) !important;
            color: var(--ui-input-text) !important;
        }
        #chart-dialog select option {
            background-color: var(--ui-input-bg) !important;
            color: var(--ui-input-text) !important;
        }
        #chart-dialog #chart-metrics-warning {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-main) !important;
        }
        #chart-dialog .bg-slate-50:not(#chart-metrics-warning) {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #chart-dialog .text-slate-800,
        #chart-dialog .text-slate-900,
        #chart-dialog .text-slate-700,
        #chart-dialog .text-slate-600,
        #chart-dialog h4 {
            color: var(--ui-text-main) !important;
        }
        #chart-dialog #chart-add-btn:not(:disabled),
        #chart-dialog #chart-add-btn:not(:disabled) span {
            background-color: var(--ui-btn-bg) !important;
            color: var(--ui-btn-text) !important;
            border-color: var(--ui-btn-border) !important;
        }
        #chart-dialog #chart-add-btn:not(:disabled) span {
            background: transparent !important;
        }
        #chart-dialog #chart-add-btn:disabled,
        #chart-dialog #chart-add-btn:disabled span {
            background-color: var(--ui-btn-bg) !important;
            color: var(--ui-text-muted) !important;
            border-color: var(--ui-border) !important;
            opacity: 0.6 !important;
        }
        #chart-dialog #chart-add-btn:disabled span {
            background: transparent !important;
        }
        #chart-draft-series-list .bg-white {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #chart-draft-series-list .text-slate-700,
        #chart-draft-series-list .text-slate-800 {
            color: var(--ui-text-main) !important;
        }
        #chart-draft-series-list .text-slate-500 {
            color: var(--ui-text-muted) !important;
        }
        #chart-draft-series-list .bg-slate-100 {
            background-color: var(--ui-btn-hover) !important;
            color: var(--ui-text-main) !important;
        }
        #chart-draft-series-list .text-slate-400 {
            color: var(--ui-text-muted) !important;
        }

        /* ── Left Sidebar Themes ── */
        aside {
            background-color: var(--ui-sidebar-bg) !important;
            border-color: var(--ui-border) !important;
        }
        /* Scope the SVG icon fill/stroke variables under aside and its menus to adapt to the sidebar colors */
        aside, #surge-flyout-menu, #valve-flyout-menu {
            --svg-icon-fill-374151: var(--ui-sidebar-text) !important;
            --svg-icon-fill-64748b: var(--ui-sidebar-text) !important;
            --svg-icon-fill-F3F4F6: var(--ui-sidebar-bg) !important;
            --svg-icon-fill-E5E7EB: var(--ui-sidebar-bg) !important;
            --svg-icon-fill-3B82F6: var(--ui-accent) !important;
            --svg-icon-fill-DBEAFE: var(--ui-sidebar-bg) !important;
            --svg-icon-stroke-2563EB: var(--ui-accent) !important;
        }
        .spatial-tool:hover,
        .tool-btn:hover {
            background-color: var(--ui-sidebar-hover, var(--ui-tool-hover)) !important;
        }
        aside .spatial-tool,
        aside .tool-btn {
            color: var(--ui-sidebar-text) !important;
        }
        aside .bg-slate-200 {
            background-color: var(--ui-sidebar-active-bg, var(--ui-btn-bg)) !important;
            --svg-icon-fill-374151: var(--ui-sidebar-active-text) !important;
            --svg-icon-fill-64748b: var(--ui-sidebar-active-text) !important;
            --svg-icon-fill-F3F4F6: var(--ui-sidebar-active-bg) !important;
            --svg-icon-fill-E5E7EB: var(--ui-sidebar-active-bg) !important;
            --svg-icon-fill-DBEAFE: var(--ui-sidebar-active-bg) !important;
        }
        aside .bg-slate-200,
        aside .bg-slate-200 * {
            color: var(--ui-sidebar-active-text, var(--ui-btn-text)) !important;
        }
        #surge-flyout-menu,
        #valve-flyout-menu {
            background-color: var(--ui-sidebar-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #surge-flyout-menu *,
        #valve-flyout-menu * {
            color: var(--ui-sidebar-text) !important;
        }
        #surge-flyout-menu button:hover,
        #valve-flyout-menu button:hover {
            background-color: var(--ui-sidebar-hover, var(--ui-tool-hover)) !important;
        }
        .spatial-tool svg *[fill="#374151"],
        #surge-flyout-trigger svg *[fill="#374151"],
        #surge-flyout-menu svg *[fill="#374151"],
        #valve-flyout-trigger svg *[fill="#374151"],
        #valve-flyout-menu svg *[fill="#374151"] {
            fill: var(--svg-icon-fill-374151) !important;
        }
        .spatial-tool svg *[stroke="#374151"],
        #surge-flyout-trigger svg *[stroke="#374151"],
        #surge-flyout-menu svg *[stroke="#374151"],
        #valve-flyout-trigger svg *[stroke="#374151"],
        #valve-flyout-menu svg *[stroke="#374151"] {
            stroke: var(--svg-icon-fill-374151) !important;
        }
        .spatial-tool svg *[stroke="#64748b"],
        .tool-btn svg *[stroke="#64748b"] {
            stroke: var(--svg-icon-fill-64748b) !important;
        }
        /* Component theme SVG contrast overrides */
        .spatial-tool svg *[fill="#F3F4F6"],
        #surge-flyout-trigger svg *[fill="#F3F4F6"],
        #surge-flyout-menu svg *[fill="#F3F4F6"],
        #valve-flyout-trigger svg *[fill="#F3F4F6"],
        #valve-flyout-menu svg *[fill="#F3F4F6"] {
            fill: var(--svg-icon-fill-F3F4F6) !important;
        }
        .spatial-tool svg *[fill="#E5E7EB"],
        #surge-flyout-trigger svg *[fill="#E5E7EB"],
        #surge-flyout-menu svg *[fill="#E5E7EB"],
        #valve-flyout-trigger svg *[fill="#E5E7EB"],
        #valve-flyout-menu svg *[fill="#E5E7EB"] {
            fill: var(--svg-icon-fill-E5E7EB) !important;
        }
        .spatial-tool svg *[fill="#3B82F6"],
        #surge-flyout-trigger svg *[fill="#3B82F6"],
        #surge-flyout-menu svg *[fill="#3B82F6"],
        #valve-flyout-trigger svg *[fill="#3B82F6"],
        #valve-flyout-menu svg *[fill="#3B82F6"] {
            fill: var(--svg-icon-fill-3B82F6) !important;
        }
        .spatial-tool svg *[fill="#DBEAFE"] {
            fill: var(--svg-icon-fill-DBEAFE) !important;
        }
        .spatial-tool svg *[stroke="#2563EB"] {
            stroke: var(--svg-icon-stroke-2563EB) !important;
        }
        .spatial-tool svg *[fill="#D1FAE5"] {
            fill: var(--svg-icon-fill-D1FAE5) !important;
        }
        .spatial-tool svg *[stroke="#059669"] {
            stroke: var(--svg-icon-stroke-059669) !important;
        }
        .spatial-tool svg *[fill="#FEE2E2"] {
            fill: var(--svg-icon-fill-FEE2E2) !important;
        }
        .spatial-tool svg *[stroke="#DC2626"] {
            stroke: var(--svg-icon-stroke-DC2626) !important;
        }
        .spatial-tool svg *[fill="#f8fafc"] {
            fill: var(--svg-icon-fill-f8fafc) !important;
        }

        /* ── Right-click Context Menu Themes ── */
        #ctx-menu {
            background-color: var(--ui-panel-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #ctx-menu * {
            color: var(--ui-text-main) !important;
        }
        #ctx-label {
            border-bottom-color: var(--ui-border) !important;
            color: var(--ui-text-muted) !important;
        }
        #ctx-delete {
            color: #ef4444 !important;
        }
        #ctx-delete:hover {
            background-color: rgba(239, 68, 68, 0.15) !important;
        }
        #ctx-properties:hover {
            background-color: var(--ui-tool-hover) !important;
        }

        /* ── Right Sidebar Themes ── */
        #right-sidebar {
            background-color: var(--ui-panel-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-main) !important;
        }
        #right-sidebar * {
            color: var(--ui-text-main) !important;
        }
        /* Active & Inactive Tabs */
        #right-sidebar #tab-live-telemetry.bg-white,
        #right-sidebar #tab-study-summary.bg-white {
            background-color: var(--ui-panel-bg) !important;
            border-bottom-color: var(--ui-tab-active-border) !important;
            color: var(--ui-tab-active-text) !important;
        }
        #right-sidebar #tab-live-telemetry.bg-slate-50,
        #right-sidebar #tab-study-summary.bg-slate-50 {
            background-color: var(--ui-tab-inactive-bg) !important;
            border-bottom-color: transparent !important;
            color: var(--ui-tab-inactive-text) !important;
            opacity: var(--ui-tab-inactive-opacity) !important;
        }
        #right-sidebar .bg-slate-100 {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-main) !important;
        }
        #right-sidebar .bg-slate-50 {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-muted) !important;
        }
        #right-sidebar .bg-white {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #right-sidebar .bg-indigo-50 {
            background-color: var(--ui-btn-hover) !important;
            border-color: var(--ui-border) !important;
        }
        #right-sidebar .bg-indigo-50 .bg-white {
            background-color: var(--ui-panel-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #right-sidebar .bg-green-100 {
            background-color: rgba(16, 185, 129, 0.15) !important;
            border-color: rgba(16, 185, 129, 0.3) !important;
        }
        #right-sidebar .bg-green-100,
        #right-sidebar .bg-green-100 * {
            color: #34d399 !important;
        }
        #right-sidebar .bg-amber-100 {
            background-color: rgba(245, 158, 11, 0.15) !important;
            border-color: rgba(245, 158, 11, 0.3) !important;
        }
        #right-sidebar .bg-amber-100,
        #right-sidebar .bg-amber-100 * {
            color: #fcd34d !important;
        }
        #right-sidebar .bg-rose-100,
        #right-sidebar .bg-rose-200 {
            background-color: var(--ui-accent-danger-bg-subtle, rgba(239, 68, 68, 0.15)) !important;
            border-color: var(--ui-accent-danger-border-subtle, rgba(239, 68, 68, 0.25)) !important;
        }
        #right-sidebar .bg-rose-100,
        #right-sidebar .bg-rose-100 *,
        #right-sidebar .bg-rose-200,
        #right-sidebar .bg-rose-200 * {
            color: var(--ui-accent-danger-text-subtle, #fca5a5) !important;
        }
        #right-sidebar .bg-slate-100.text-black {
            background-color: var(--ui-input-bg) !important;
            color: var(--ui-text-muted) !important;
            border-color: var(--ui-border) !important;
        }
        /* Filter Button Groups */
        #right-sidebar button.bg-black {
            background-color: var(--ui-accent, #38bdf8) !important;
            border-color: var(--ui-accent, #38bdf8) !important;
        }
        #right-sidebar button.bg-black,
        #right-sidebar button.bg-black * {
            color: var(--ui-bg, #0f172a) !important;
            font-weight: 600 !important;
        }
        #right-sidebar button.bg-white {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #right-sidebar button.bg-white,
        #right-sidebar button.bg-white * {
            color: var(--ui-text-muted) !important;
        }
        #right-sidebar button.bg-white:hover {
            background-color: var(--ui-panel-bg) !important;
        }
        #right-sidebar button.bg-white:hover * {
            color: var(--ui-text-main) !important;
        }
        /* Table and Rows */
        #right-sidebar table thead.bg-white {
            background-color: var(--ui-input-bg) !important;
        }
        #right-sidebar tr.hover\:bg-slate-50:hover {
            background-color: var(--ui-panel-bg) !important;
        }
        #right-sidebar tr.bg-rose-50 {
            background-color: rgba(239, 68, 68, 0.15) !important;
        }
        #right-sidebar tr.bg-rose-50:hover {
            background-color: rgba(239, 68, 68, 0.25) !important;
        }
        #right-sidebar tr.bg-rose-50,
        #right-sidebar tr.bg-rose-50 * {
            color: #fca5a5 !important;
        }
        #right-sidebar tr.bg-amber-50\/50 {
            background-color: rgba(245, 158, 11, 0.1) !important;
        }
        #right-sidebar tr.bg-amber-50\/50:hover {
            background-color: rgba(245, 158, 11, 0.18) !important;
        }
        #right-sidebar tr.bg-amber-50\/50,
        #right-sidebar tr.bg-amber-50\/50 * {
            color: #fcd34d !important;
        }
        #right-sidebar .text-rose-600 {
            color: #fca5a5 !important;
        }
        #right-sidebar .border-slate-200,
        #right-sidebar .border-slate-100,
        #right-sidebar .border-t {
            border-color: var(--ui-border) !important;
        }
        #right-sidebar #telemetry-warnings h4,
        #right-sidebar #telemetry-warnings h4 span {
            color: var(--ui-accent-danger-text-subtle, #fca5a5) !important;
        }
        #right-sidebar #telemetry-warnings .bg-red-50 {
            background-color: var(--ui-accent-danger-bg-subtle, rgba(239, 68, 68, 0.15)) !important;
            border-color: var(--ui-accent-danger-border-subtle, rgba(239, 68, 68, 0.25)) !important;
        }
        #right-sidebar #telemetry-warnings .bg-red-50,
        #right-sidebar #telemetry-warnings .bg-red-50 * {
            color: var(--ui-accent-danger-text-subtle, #fca5a5) !important;
        }
        /* ── Acceptance Panel Themes ── */
        #right-sidebar .bg-green-50,
        #right-sidebar .bg-green-50 *:not(.text-white),
        .r-thym-dialog .bg-green-50,
        .r-thym-dialog .bg-green-50 *:not(.text-white) {
            background-color: rgba(16, 185, 129, 0.15) !important;
            border-color: rgba(16, 185, 129, 0.35) !important;
            color: #34d399 !important;
        }
        #right-sidebar .bg-red-50,
        #right-sidebar .bg-red-50 *:not(.text-white),
        .r-thym-dialog .bg-red-50,
        .r-thym-dialog .bg-red-50 *:not(.text-white) {
            background-color: var(--ui-accent-danger-bg-subtle, rgba(239, 68, 68, 0.15)) !important;
            border-color: var(--ui-accent-danger-border-subtle, rgba(239, 68, 68, 0.3)) !important;
            color: var(--ui-accent-danger-text-subtle, #fca5a5) !important;
        }
        /* ── Cavitation Warnings & Amber Panels Themes ── */
        #right-sidebar .bg-amber-50,
        #right-sidebar .bg-amber-50 *,
        .r-thym-dialog .bg-amber-50,
        .r-thym-dialog .bg-amber-50 * {
            background-color: rgba(245, 158, 11, 0.15) !important;
            border-color: rgba(245, 158, 11, 0.3) !important;
            color: #fcd34d !important;
        }
        /* ── Dialog & Sidebar Badges & Blue Panels Themes ── */
        #right-sidebar .bg-blue-50,
        #right-sidebar .bg-blue-50 *,
        #right-sidebar .bg-blue-50\/50,
        #right-sidebar .bg-blue-50\/50 *,
        .r-thym-dialog .bg-blue-50,
        .r-thym-dialog .bg-blue-50 *,
        .r-thym-dialog .bg-blue-50\/50,
        .r-thym-dialog .bg-blue-50\/50 * {
            background-color: rgba(59, 130, 246, 0.15) !important;
            border-color: rgba(59, 130, 246, 0.3) !important;
            color: #60a5fa !important;
        }
        /* ── Recording Overrides & Rose Panels Themes ── */
        #right-sidebar .bg-rose-50,
        #right-sidebar .bg-rose-50 *:not(.text-white),
        .r-thym-dialog .bg-rose-50,
        .r-thym-dialog .bg-rose-50 *:not(.text-white) {
            background-color: var(--ui-accent-danger-bg-subtle, rgba(239, 68, 68, 0.15)) !important;
            border-color: var(--ui-accent-danger-border-subtle, rgba(239, 68, 68, 0.25)) !important;
            color: var(--ui-accent-danger-text-subtle, #fca5a5) !important;
        }
        #right-sidebar .bg-rose-50 button,
        #right-sidebar .bg-rose-50 a,
        .r-thym-dialog .bg-rose-50 button,
        .r-thym-dialog .bg-rose-50 a {
            color: var(--ui-accent-danger-text-subtle, #fca5a5) !important;
            text-decoration: underline !important;
            opacity: 0.85;
        }
        #right-sidebar .bg-rose-50 button:hover,
        #right-sidebar .bg-rose-50 a:hover,
        .r-thym-dialog .bg-rose-50 button:hover,
        .r-thym-dialog .bg-rose-50 a:hover {
            opacity: 1 !important;
            color: var(--ui-accent-danger, #ef4444) !important;
        }
        #right-sidebar .rounded-full.bg-emerald-50,
        .r-thym-dialog .rounded-full.bg-emerald-50 {
            background-color: rgba(16, 185, 129, 0.15) !important;
            border-color: rgba(16, 185, 129, 0.3) !important;
            color: #34d399 !important;
        }
        #right-sidebar .rounded-full.bg-amber-50,
        .r-thym-dialog .rounded-full.bg-amber-50 {
            background-color: rgba(245, 158, 11, 0.15) !important;
            border-color: rgba(245, 158, 11, 0.3) !important;
            color: #fbbf24 !important;
        }
        #right-sidebar .rounded-full.bg-slate-50,
        #right-sidebar .rounded-full.bg-slate-100,
        .r-thym-dialog .rounded-full.bg-slate-50,
        .r-thym-dialog .rounded-full.bg-slate-100 {
            background-color: rgba(148, 163, 184, 0.12) !important;
            border-color: rgba(148, 163, 184, 0.25) !important;
            color: var(--ui-text-muted) !important;
        }
        #right-sidebar input,
        #right-sidebar select,
        #right-sidebar textarea {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-input-border) !important;
            color: var(--ui-input-text) !important;
        }
        #sidebar-toggle {
            background-color: var(--ui-panel-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-main) !important;
        }
        #sidebar-toggle:hover {
            background-color: var(--ui-tool-hover) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-main) !important;
        }

        /* ── Toolbar & Playback Deck Themes ── */
        /* Overall container */
        #app-shell > div:first-child {
            background-color: var(--ui-panel-bg) !important;
            border-color: var(--ui-border) !important;
        }
        /* Top Row of toolbar (branding, menu options, project name, theme toggle) */
        #app-shell > div:first-child > div:first-child {
            background-color: var(--ui-header-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #app-shell > div:first-child > div:first-child .bg-slate-100 {
            background-color: var(--ui-input-bg) !important;
        }
        #app-shell > div:first-child > div:first-child .bg-slate-50 {
            background-color: var(--ui-dialog-header-bg, var(--ui-input-bg)) !important;
            border-color: var(--ui-border) !important;
        }
        #app-shell > div:first-child > div:first-child,
        #app-shell > div:first-child > div:first-child button:not(.menu-dropdown-list button),
        #app-shell > div:first-child > div:first-child span:not(.menu-dropdown-list *),
        #app-shell > div:first-child > div:first-child div:not(.menu-dropdown-list *) {
            color: var(--ui-header-text) !important;
        }
        #app-shell > div:first-child > div:first-child button:not(.menu-dropdown-list button):hover {
            background-color: var(--ui-tool-hover) !important;
            color: var(--ui-header-text) !important;
        }
        #theme-toggle {
            color: var(--ui-header-text) !important;
        }
        /* Dropdown Lists inside top row menu */
        #app-shell > div:first-child .menu-dropdown-list {
            background-color: var(--ui-panel-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #app-shell > div:first-child .menu-dropdown-list * {
            color: var(--ui-text-main) !important;
        }
        #app-shell > div:first-child .menu-dropdown-list button:hover {
            background-color: var(--ui-tool-hover) !important;
            color: var(--ui-text-main) !important;
        }
        #app-shell > div:first-child .menu-dropdown-checkbox-item:hover {
            background-color: var(--ui-tool-hover) !important;
        }
        /* Playback Deck (Bottom Row) */
        #app-shell > div:first-child > div:last-child {
            background-color: var(--ui-weather-hud-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #app-shell > div:first-child > div:last-child,
        #app-shell > div:first-child > div:last-child label,
        #app-shell > div:first-child > div:last-child span:not(#sim-speed-label),
        #app-shell > div:first-child > div:last-child select,
        #app-shell > div:first-child > div:last-child input {
            color: var(--ui-text-main);
        }
        /* Keep playback buttons text white */
        #app-shell > div:first-child > div:last-child button:not(#scenario-manage-btn) {
            color: #ffffff !important;
        }
        /* Scenario gear button theme support */
        #scenario-manage-btn {
            color: var(--ui-text-muted) !important;
        }
        #scenario-manage-btn:hover {
            color: var(--ui-text-main) !important;
        }
        /* Playback deck capsules */
        #app-shell > div:first-child > div:last-child .bg-white {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #app-shell > div:first-child > div:last-child select,
        #app-shell > div:first-child > div:last-child input {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-main) !important;
        }
        #app-shell > div:first-child > div:last-child select option {
            background-color: var(--ui-input-bg) !important;
            color: var(--ui-text-main) !important;
        }
        #app-shell > div:first-child > div:last-child label,
        #app-shell > div:first-child > div:last-child span:not(#sim-speed-label) {
            color: var(--ui-text-muted) !important;
        }
        #app-shell > div:first-child > div:last-child #sim-speed-label {
            background-color: var(--ui-btn-bg) !important;
            border-color: var(--ui-btn-border) !important;
            color: var(--ui-btn-text) !important;
        }
        #app-shell > div:first-child > div:last-child .bg-slate-200 {
            background-color: var(--ui-border) !important;
        }

        /* ── Canvas Container and Dot Grid Themes ── */
        #canvas-container {
            background-color: var(--ui-canvas-bg);
        }
        #grid-background {
            display: none;
        }
        .show-grid #grid-background {
            display: block;
        }
        .grid-dot {
            fill: var(--ui-grid-dot) !important;
        }
        .grid-line {
            stroke: var(--ui-grid-line) !important;
        }

        /* ── Zoom Controls Themes ── */
        #zoom-controls-container {
            background-color: var(--ui-panel-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #zoom-controls-container button {
            background-color: var(--ui-input-bg) !important;
            color: var(--ui-text-main) !important;
        }
        #zoom-controls-container button:hover {
            background-color: var(--ui-tool-hover) !important;
        }

        /* ── Weather HUD & Controls Themes ── */
        #weather-hud,
        #weather-controls {
            background-color: var(--ui-weather-hud-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-main) !important;
        }
        #weather-hud:hover {
            background-color: var(--ui-weather-hud-hover) !important;
        }
        #weather-controls span {
            color: var(--ui-text-muted) !important;
        }
        #weather-controls #cloud-override-toggle {
            background-color: var(--ui-input-bg) !important;
            color: var(--ui-text-main) !important;
        }
        #weather-controls #cloud-override-toggle:hover {
            background-color: var(--ui-tool-hover) !important;
        }

        /* ── Manage Patterns Dialog Themes ── */
        #patterns-list .bg-indigo-50 {
            background-color: var(--ui-btn-hover) !important;
            border-color: var(--ui-border) !important;
        }
        #patterns-list .bg-white:hover {
            background-color: var(--ui-tool-hover) !important;
        }
        #patterns-hourly-inputs .bg-slate-50\/50 {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
            color: var(--ui-text-muted) !important;
        }
        #patterns-hourly-inputs input:focus {
            background-color: var(--ui-input-bg) !important;
            color: var(--ui-text-main) !important;
        }
        #patterns-hourly-inputs > div:hover {
            background-color: var(--ui-tool-hover) !important;
        }
        #patterns-hourly-inputs > div {
            border-color: var(--ui-border) !important;
        }
        #patterns-hourly-inputs .border-r {
            border-color: var(--ui-border) !important;
        }

        /* ── Pipe Materials Library Dialog Themes ── */
        #materials-table thead {
            background-color: var(--ui-panel-bg) !important;
        }
        #materials-table th,
        #materials-table td {
            border-color: var(--ui-border) !important;
            color: var(--ui-text-main) !important;
        }
        #materials-dialog .bg-slate-50 {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
        }

        /* ── About Modal Themes ── */
        #about-modal .inline-block.align-bottom {
            background-color: var(--ui-dialog-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #about-modal .bg-slate-50,
        #about-modal .bg-slate-100 {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #about-modal .bg-white {
            background-color: var(--ui-dialog-bg) !important;
        }
        #about-modal .border-slate-200,
        #about-modal .border-slate-200\/80,
        #about-modal .border-slate-200\/50,
        #about-modal .border-slate-200\/40,
        #about-modal .border-slate-200\/60 {
            border-color: var(--ui-border) !important;
        }
        #about-modal .border-slate-100 {
            border-color: var(--ui-border) !important;
        }
        #about-modal .hover\:bg-slate-100:hover,
        #about-modal .hover\:bg-slate-200:hover,
        #about-modal .hover\:bg-slate-200\/60:hover {
            background-color: var(--ui-tool-hover) !important;
        }
        #about-modal .hover\:text-slate-700:hover {
            color: var(--ui-text-main) !important;
        }
        #about-modal .text-slate-800 {
            color: var(--ui-text-main) !important;
        }
        #about-modal .text-slate-600 {
            color: var(--ui-text-muted) !important;
        }
        #about-modal .text-slate-500 {
            color: var(--ui-text-muted) !important;
        }
        #about-modal .text-slate-400 {
            color: var(--ui-text-muted) !important;
        }
        #about-modal .text-slate-700 {
            color: var(--ui-text-muted) !important;
        }
        #about-modal .about-card-link {
            background-color: var(--ui-dialog-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #about-modal .about-card-link:hover {
            background-color: var(--ui-tool-hover) !important;
        }
        #about-modal .hover\:border-blue-300:hover {
            border-color: #3b82f6 !important;
        }
        #about-modal .hover\:border-emerald-300:hover {
            border-color: #10b981 !important;
        }
        #about-modal .bg-blue-50 {
            background-color: var(--ui-btn-hover) !important;
            color: var(--ui-text-main) !important;
        }
        #about-modal .bg-emerald-50 {
            background-color: var(--ui-btn-hover) !important;
            color: var(--ui-text-main) !important;
        }
        #about-modal #about-modal-close-btn {
            background-color: var(--ui-btn-bg) !important;
            color: var(--ui-btn-text) !important;
            border-color: var(--ui-btn-border) !important;
        }
        #about-modal #about-modal-close-btn:hover {
            background-color: var(--ui-btn-hover) !important;
        }
        #about-modal .prose h3 {
            color: var(--ui-text-heading) !important;
        }
        #about-modal svg circle {
            fill: var(--ui-input-bg) !important;
            stroke: var(--ui-border) !important;
        }
        #about-modal svg polygon {
            fill: var(--ui-border) !important;
        }
        #about-modal .text-blue-600 {
            color: var(--ui-text-main) !important;
        }
        #about-modal .border-blue-500 {
            border-color: var(--ui-border) !important;
        }

        /* ── Feedback Modal Themes ── */
        #feedback-modal .inline-block.align-bottom {
            background-color: var(--ui-dialog-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #feedback-modal .bg-white {
            background-color: var(--ui-dialog-bg) !important;
        }
        #feedback-modal .bg-slate-50 {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #feedback-modal .border-slate-100,
        #feedback-modal .border-slate-300 {
            border-color: var(--ui-border) !important;
        }
        #feedback-modal .text-slate-900,
        #feedback-modal .text-slate-800 {
            color: var(--ui-text-main) !important;
        }
        #feedback-modal .text-slate-700,
        #feedback-modal .text-slate-600 {
            color: var(--ui-text-muted) !important;
        }
        #feedback-modal textarea {
            background-color: var(--ui-input-bg) !important;
            color: var(--ui-text-main) !important;
            border-color: var(--ui-border) !important;
        }
        #feedback-modal textarea::placeholder {
            color: var(--ui-text-muted) !important;
        }
        #feedback-modal input[type="file"] {
            color: var(--ui-text-main) !important;
        }
        #feedback-modal input[type="file"]::file-selector-button {
            background-color: var(--ui-btn-bg) !important;
            color: var(--ui-btn-text) !important;
            border: 1px solid var(--ui-btn-border) !important;
        }
        #feedback-modal input[type="file"]::file-selector-button:hover {
            background-color: var(--ui-btn-hover) !important;
        }
        #feedback-modal .bg-blue-50 {
            background-color: var(--ui-btn-hover) !important;
        }
        #feedback-modal #cancel-feedback-btn {
            background-color: var(--ui-btn-bg) !important;
            color: var(--ui-btn-text) !important;
            border-color: var(--ui-btn-border) !important;
        }
        #feedback-modal #cancel-feedback-btn:hover {
            background-color: var(--ui-btn-hover) !important;
        }

        /* ── Release Notes Modal Themes ── */
        #release-notes-modal .inline-block.align-bottom {
            background-color: var(--ui-dialog-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #release-notes-modal .bg-white {
            background-color: var(--ui-dialog-bg) !important;
        }
        #release-notes-modal .bg-slate-50 {
            background-color: var(--ui-input-bg) !important;
            border-color: var(--ui-border) !important;
        }
        #release-notes-modal .border-slate-100 {
            border-color: var(--ui-border) !important;
        }
        #release-notes-modal .border-slate-200 {
            border-color: var(--ui-border) !important;
        }
        #release-notes-modal .text-slate-800 {
            color: var(--ui-text-main) !important;
        }
        #release-notes-modal .text-slate-700 {
            color: var(--ui-text-muted) !important;
        }
        #release-notes-modal .text-slate-600 {
            color: var(--ui-text-muted) !important;
        }
        #release-notes-modal .text-slate-500 {
            color: var(--ui-text-muted) !important;
        }
        #release-notes-modal .text-slate-400 {
            color: var(--ui-text-muted) !important;
        }
        #release-notes-modal .bg-slate-100 {
            background-color: var(--ui-btn-bg) !important;
            color: var(--ui-btn-text) !important;
        }
        #release-notes-modal .ring-white {
            --tw-ring-color: var(--ui-dialog-bg) !important;
        }
        #release-notes-modal .bg-cerulean-50 {
            background-color: var(--ui-btn-hover, rgba(6, 182, 212, 0.15)) !important;
            border: 1px solid var(--ui-border) !important;
        }
        #release-notes-modal .text-cerulean-600,
        #release-notes-modal .text-cerulean-400 {
            color: var(--ui-accent, #22d3ee) !important;
        }
        
        /* Release notes badges */
        #release-notes-modal .bg-emerald-100 {
            background-color: rgba(16, 185, 129, 0.15) !important;
            color: #34d399 !important;
        }
        #release-notes-modal .bg-blue-100 {
            background-color: rgba(59, 130, 246, 0.15) !important;
            color: #60a5fa !important;
        }
        #release-notes-modal .bg-orange-100 {
            background-color: rgba(249, 115, 22, 0.15) !important;
            color: #fb923c !important;
        }

        /* ── MOC Simulation Active Banner Themes ── */
        #mode-banner.moc-active,
        #mode-banner.animate-pulse {
            background-color: #F3E8FF !important;
            color: #000000 !important;
        }
        html.dark #mode-banner.moc-active,
        html.dark #mode-banner.animate-pulse {
            background-color: #4c1d95 !important;
            color: #f5f3ff !important;
        }
        html.dark #mode-banner.animate-pulse {
            background-color: #4c1d95 !important;
            color: #f5f3ff !important;
        }