[data-workspace-panel="extras"] .workspace-secondary { grid-template-columns: minmax(0, 1fr); }
.theme-setting {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
}
.theme-setting-copy { display: flex; gap: .8rem; align-items: flex-start; }
.theme-setting-copy > svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-setting h3 { font-size: .95rem; margin-bottom: .3rem; }
.theme-setting p { font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }
.theme-choices { display: grid; grid-template-columns: repeat(3, minmax(76px, 1fr)); gap: .3rem; padding: .3rem; border: 1px solid var(--line); border-radius: 11px; background: var(--muted-panel, #f4f7fa); flex: none; }
.theme-choice { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 36px; padding: .4rem .65rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-soft); font: inherit; font-size: .8rem; cursor: pointer; }
.theme-choice > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-choice[aria-checked="true"] { color: var(--brand-strong); background: var(--card); border-color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.1); font-weight: 700; }
.theme-choice:hover { color: var(--brand-strong); border-color: var(--line-strong); }
.theme-choice:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-switch { display: inline-flex; align-items: center; gap: .6rem; min-width: 96px; justify-content: center; flex: none; }
.theme-switch-track { display: inline-flex; width: 32px; height: 18px; border-radius: 20px; padding: 3px; background: var(--line-strong); }
.theme-switch-track::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--card); transition: transform .15s; }
.theme-switch[aria-checked="true"] .theme-switch-track { background: var(--brand); }
.theme-switch[aria-checked="true"] .theme-switch-track::before { transform: translateX(14px); }
.theme-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.theme-reference-chart { display: none; }

/* The derived palette reuses the app's full cascade, including conditional UI
   states. These semantic tokens and chart surfaces take precedence over it. */
@media screen {
    :root:is([data-theme="dark"], [data-theme="dracula"]) {
        color-scheme: dark;
        --ink: #dce5ed;
        --ink-soft: #a8b6c3;
        --paper: #000000;
        --card: #0c1014;
        --line: #38434e;
        --line-strong: #586979;
        --brand: #347fa1;
        --brand-strong: #276985;
        --brand-ink: #9dcce5;
        --accent: #f08278;
        --success: #7ac9a0;
        --success-bg: #10291e;
        --inherit: #23192f;
        --inherit-line: #8765b5;
        --computed: #2b250e;
        --computed-line: #917c2c;
        --process: #11171c;
        --muted-panel: #131a20;
        --shadow: 0 18px 40px rgba(0,0,0,.35);
        --environment-accent: #65b897;
        --environment-accent-hover: #84caaf;
        --environment-text: #98d2b9;
        --environment-border: rgba(101,184,151,.45);
        --environment-bg: rgba(66,137,108,.12);
        --environment-bg-active: rgba(66,137,108,.23);
        --hx-screen-paper: #000000;
        --hx-screen-ink: #dce5ed;
        /* Several compact editors use these aliases with light fallbacks. */
        --surface: var(--card);
        --surface-2: var(--muted-panel);
        --panel: var(--card);
        --border: var(--line);
        --text-muted: var(--ink-soft);
        --theme-heat: #f28b86;
        --theme-sensible: #ed8b96;
        --theme-latent: #f3b2c3;
        --theme-water: #6dccdf;
    }
    :root[data-theme="dracula"] {
        --ink: #f8f8f2;
        --ink-soft: #bfc2d5;
        --paper: #282a36;
        --card: #303341;
        --line: #53586f;
        --line-strong: #727a98;
        --brand: #8393d4;
        --brand-strong: #6579c2;
        --brand-ink: #c1ccff;
        --process: #2c2f3d;
        --muted-panel: #363a4b;
        --inherit: #393149;
        --inherit-line: #9b85bd;
        --computed: #413c2c;
        --computed-line: #a99757;
        --success-bg: #243c37;
        --hx-screen-paper: #282a36;
        --hx-screen-ink: #f8f8f2;
    }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .chain-tab.is-active {
        background: #214f78;
        border-color: #65b5ff;
        color: #f3f8ff;
        box-shadow: inset 4px 0 0 #65b5ff;
    }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .chain-tab.is-active .chain-tab-copy small { color: #d2e8ff; }
    :root[data-theme="dark"] [data-hx-light-style] {
        --hx-screen-schematic-fill: var(--hx-schematic-fill-dark);
        --hx-screen-schematic-stroke: var(--hx-schematic-stroke-dark);
        --hx-screen-schematic-color: var(--hx-schematic-color-dark);
    }
    :root[data-theme="dracula"] [data-hx-light-style] {
        --hx-screen-schematic-fill: var(--hx-schematic-fill-dracula);
        --hx-screen-schematic-stroke: var(--hx-schematic-stroke-dracula);
        --hx-screen-schematic-color: var(--hx-schematic-color-dracula);
    }
    :root:is([data-theme="dark"], [data-theme="dracula"]) body { background: var(--paper); }
    :root:is([data-theme="dark"], [data-theme="dracula"]) :is(.diagram-frame, .weather-lab-chart, .weather-lab-svg, .weather-lab-polar, .weather-lab-solar, .process-schematic-frame, #dashboard-preview-diagram, .reference-chart-frame) { background: var(--paper); }
    /* The air lines are a sibling underneath React Flow, not inside its host. */
    :root:is([data-theme="dark"], [data-theme="dracula"]) .process-flow-shell > .reactflow-host { background: transparent; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .process-flow-lane-label { fill: var(--ink-soft) !important; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .reference-chart-frame:has(.theme-reference-chart) img { display: none; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .theme-reference-chart { display: block; width: 100%; height: auto; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) :is(.weather-lab-chart, .reactflow-host) svg { color: var(--ink); }
    :root:is([data-theme="dark"], [data-theme="dracula"]) :is(.weather-lab-chart figcaption, .weather-lab-chart aside, .weather-lab-wind-legend, .weather-lab-solar-colorbar) { color: var(--ink); }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .theme-choice:is(:hover, [aria-checked="true"]) { color: var(--brand-ink); }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .weather-lab-threshold-hx > span { color: inherit; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) :is(input, textarea)::placeholder { color: var(--ink-soft); opacity: .8; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) :focus-visible { outline-color: var(--brand-ink); }

    /* Screen colours only: inline React values and all export data stay intact. */
    :root:is([data-theme="dark"], [data-theme="dracula"]) :is(.flow-process-info, .flow-heat-recovery-info, .flow-coupling-info) { color: var(--ink-soft); }
    :root:is([data-theme="dark"], [data-theme="dracula"]) [data-exchange-kind="heat"] { color: var(--theme-heat) !important; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) [data-exchange-kind="water"] { color: var(--theme-water) !important; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) [data-exchange-kind="sens"] { color: var(--theme-sensible) !important; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) [data-exchange-kind="lat"] { color: var(--theme-latent) !important; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) [data-exchange-kind="heat"] small > span:first-of-type { color: var(--theme-sensible) !important; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) [data-exchange-kind="heat"] small > span:nth-of-type(2) { color: var(--theme-latent) !important; }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .inline-summary-chip[data-energy-kind="sensible"] { --balance-value-color: var(--theme-sensible); }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .inline-summary-chip[data-energy-kind="latent"] { --balance-value-color: var(--theme-latent); }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .inline-summary-chip[data-energy-kind="total"] { --balance-value-color: var(--theme-heat); }
    :root:is([data-theme="dark"], [data-theme="dracula"]) .inline-summary-chip[data-energy-kind="water"] { --balance-value-color: var(--theme-water); }
    /* Retain scientific marker RGB, with a fine screen-only halo for black/navy. */
    :root:is([data-theme="dark"], [data-theme="dracula"]) :is(.diagram-frame, .weather-lab-chart) [id^="PathCollection"] { filter: drop-shadow(0 0 .65px rgba(248,248,242,.9)); }
}
@media (max-width: 520px) {
    .theme-setting { flex-wrap: wrap; gap: .7rem; }
    .theme-switch { margin-left: auto; }
    .theme-choices { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .theme-switch-track::before { transition: none; }
}