/* Shared UI paint only. Map tiles, canvas colors and terrain materials untouched. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f6f8f6, #000000);
  --panel: light-dark(#ffffff, #121212);
  --panel2: light-dark(#edf2ed, #222222);
  --line: light-dark(#adbab1, #454545);
  --ink: light-dark(#203026, #f0f0f0);
  --muted: light-dark(#52615a, #bcbcbc);
  --grass: light-dark(#2c6816, #6fbf44);
  --theme-button-fill: #6fbf44;
  --theme-input: light-dark(#ffffff, #0a0a0a);
  --theme-error: light-dark(#9a3025, #e06c5a);
  --theme-tool-description: light-dark(#394c3f, #cccccc);
  --theme-tool-success: light-dark(#edf5e9, #18231a);
  --theme-tool-starter: light-dark(#edf5e9, #202c21);
  --theme-tool-recovery: light-dark(#fff8e8, #292719);
  --theme-tool-warning: light-dark(#71531a, #f0d982);
  --theme-tool-code: light-dark(#edf2ed, #181818);
  --color-paper: light-dark(#f6f8f6, #000000);
  --color-panel: light-dark(#ffffff, #121212);
  --color-raised: light-dark(#edf2ed, #222222);
  --color-ink: light-dark(#203026, #f0f0f0);
  --color-muted: light-dark(#52615a, #bcbcbc);
  --color-line: light-dark(#adbab1, #454545);
  --color-control: light-dark(#8c9d90, #999999);
  --color-accent: light-dark(#2c6816, oklch(79% .15 140));
  --color-focus: light-dark(#276014, oklch(85% .13 140));
  --color-accent-ink: light-dark(#fff, oklch(20% .03 140));
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
input[type=text], input[type=number], select, .recovery-card,
.selinfo, .stat, .export-control, details { background: var(--theme-input); }
.starter { background: linear-gradient(145deg, var(--theme-tool-starter), var(--panel) 60%); }
.starter p, .format-guide div, .success-check p, .export-status, details .body { color: var(--theme-tool-description); }
.success-check { background: var(--theme-tool-success); }
.recovery-panel { background: linear-gradient(145deg, var(--theme-tool-recovery), var(--panel) 62%); }
.recovery-eyebrow, .recovery-panel h2, .recovery-id { color: var(--theme-tool-warning); }
.recovery-id { background: var(--theme-input); }
details code { background: var(--theme-tool-code); }
.preset-button[aria-pressed="true"] { color: var(--ink); }
#log, .diagnostic-preview, #pv { color-scheme: dark; }
.btn:not(.ghost):not(.sub):not(.danger):not(:disabled) { background: var(--theme-button-fill); }
.theme-switcher { position: relative; display: flex; flex: none; align-items: center; }
.theme-switcher button { font: inherit; border: 0; color: var(--ink); background: var(--panel); cursor: pointer; line-height: 1; }
.theme-switcher [data-theme-trigger] { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 6px; }
.theme-switcher [data-theme-panel] { position: fixed; inset: auto; width: 184px; max-width: calc(100% - 32px); margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--panel); }
.theme-switcher [data-theme-panel][data-theme-fallback] { z-index: 1100; }
.theme-switcher [data-theme-option] { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 8px 12px; gap: 16px; border-radius: 3px; white-space: nowrap; }
.theme-option-label { display: flex; align-items: center; gap: 8px; }
.theme-option-label svg { width: 18px; height: 18px; }
.theme-switcher [data-theme-check] { visibility: hidden; }
.theme-switcher [aria-pressed="true"] [data-theme-check] { visibility: visible; }
.theme-switcher button:focus-visible { outline: 2px solid var(--grass); outline-offset: 2px; }
.theme-switcher button:active, .theme-switcher [aria-pressed="true"], .theme-switcher [aria-expanded="true"] { background: var(--panel2); color: var(--grass); }
.theme-switcher button:disabled { opacity: .55; cursor: not-allowed; }
.theme-switcher [data-theme-save-error] { position: absolute; top: 100%; right: 0; width: 220px; padding: 8px; background: var(--panel); color: var(--ink); z-index: 1100; }
.theme-switcher [hidden] { display: none!important; }
.theme-switcher[data-state="error"] [data-theme-trigger] { outline: 1px solid var(--theme-error); }
@media (hover:hover) { .theme-switcher button:hover:not(:disabled) { background: var(--panel2); color: var(--grass); } }
.shell > header { flex-wrap: wrap; }