.palette-picker { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 18px; margin-bottom:20px; border:1px solid var(--panel-border); border-radius:14px; background:var(--panel-bg); color:var(--text-main); }
.palette-picker > div:first-child { display:grid; gap:3px; margin-right:auto; }
.palette-picker strong { font-size:11px; letter-spacing:.15em; }
.palette-picker span,.palette-picker label { font-size:11px; color:var(--text-muted); }
.palette-picker select { border:1px solid var(--panel-border); background:var(--inset-bg); color:var(--text-main); padding:8px 26px 8px 10px; border-radius:8px; }
.palette-picker label:has(output) { display:flex; flex-wrap:wrap; align-items:center; width:100%; gap:6px; }
.palette-picker label > output { margin-left:auto; text-align:right; }
.palette-picker label:has(output) > input { flex-basis:100%; width:100%; }
.palette-picker input[type="range"] { width:110px; accent-color:var(--accent-green); }
.palette-picker .mode-toggle { position:relative; width:42px; height:24px; border:1px solid var(--panel-border); border-radius:999px; background:var(--inset-bg); cursor:pointer; padding:0; flex:0 0 auto; }
.palette-picker .mode-toggle-thumb { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--panel-bg); box-shadow:0 1px 2px rgba(0,0,0,.35); transition:transform .15s ease, background .15s ease; }
.palette-picker .mode-toggle[aria-checked="true"] { background:var(--accent-green); }
.palette-picker .mode-toggle[aria-checked="true"] .mode-toggle-thumb { transform:translateX(18px); background:var(--palette-ink); }
.palette-picker .mode-toggle:focus-visible { outline:2px solid var(--palette-focus); outline-offset:2px; }
.palette-picker .palette-mode-row { display:flex; align-items:center; gap:8px; width:100%; }
.palette-picker .palette-mode-row label { margin:0; cursor:pointer; color:var(--text-main); }
.palette-swatches { display:flex; flex-wrap:wrap; gap:8px; max-width:100%; }
.palette-swatches button { width:24px; height:24px; border:3px solid var(--panel-bg); border-radius:6px; background:var(--swatch); cursor:pointer; }
.palette-swatches button[aria-pressed=true] { outline:2px solid var(--palette-focus); }
.color-control-palette { display:grid; grid-template-columns:repeat(6,24px); grid-template-rows:repeat(4,24px); align-content:start; justify-content:space-between; width:min(182px,100%); height:120px; box-sizing:border-box; margin:0; gap:8px 0; }
.color-control-palette button { justify-self:center; }
html[data-palette] body { background:radial-gradient(ellipse at top left,var(--palette-selected),transparent 65%),radial-gradient(ellipse at top right,var(--palette-selected),transparent 65%),var(--page-bg)!important; color:var(--text-main); accent-color:var(--accent-green); }
html[data-palette] body [class*="bg-indigo-"],html[data-palette] body [class*="bg-purple-"],html[data-palette] body [class*="bg-emerald-"],html[data-palette] body [class*="bg-sky-"] { background-color:var(--palette-selected); }
html[data-palette] body [class*="border-indigo-"],html[data-palette] body [class*="border-purple-"],html[data-palette] body [class*="border-sky-"] { border-color:var(--panel-border); }
html[data-palette] body [class*="text-sky-"] { color:var(--accent-green); }
html[data-palette] body [class*="bg-gradient-"] { background-image:linear-gradient(120deg,var(--palette-selected),var(--inset-bg)); }
html[data-palette] body .game-tab.active,html[data-palette] body .const-node.unlocked,html[data-palette] body button[class*="bg-indigo-600"],html[data-palette] body #result-navigation button { background:var(--accent-green); color:var(--palette-ink); border-color:var(--accent-green); box-shadow:none; }
html[data-palette] body .char-tab-btn.selected { background:var(--palette-selected); border-color:var(--accent-green); box-shadow:none; }
html[data-palette] body .view-tool-tab:hover { background:var(--palette-selected); }
html[data-palette] ::selection { background:var(--accent-green); color:var(--palette-ink); }
html[data-palette] body :is(button,select,a,input):focus-visible { outline:2px solid var(--palette-focus); outline-offset:3px; }
/* Surface colors follow the palette without replacing artwork background images. */
html[data-palette] body main.showcase-content { background-color:transparent; }
html[data-palette] body main section { background-color:var(--panel-bg); border-color:var(--panel-border); }
html[data-palette] body main :is(#character-selector-section,#build-card-section,#artifacts-page-section) { background-color:transparent; }
html[data-palette] body main.showcase-content > section[id$="-page-section"] {
  background:transparent !important;
  border-color:transparent !important;
}
.uid-refresh { display:grid; justify-items:center; min-width:42px; }
.uid-refresh:disabled { opacity:.65; cursor:wait; }
html[data-palette] body main :is([class*="bg-slate-900"],[class*="bg-slate-800"]) { background-color:var(--panel-bg); }
html[data-palette] body main [class*="bg-slate-950"] { background-color:var(--inset-bg); }
html[data-palette] body main [class*="border-slate-"] { border-color:var(--panel-border); }
html[data-palette] body main :is(.char-tab-btn,.history-char-tab) { background-color:var(--panel-bg); border-color:var(--panel-border); }
html[data-palette] body main :is(.char-tab-btn,.history-char-tab):hover { background-color:var(--palette-selected); border-color:var(--palette-focus); }
html[data-palette] body main .char-tab-btn.selected { background-color:var(--palette-selected); border-color:var(--palette-focus); }
html[data-palette] body:has(#damage-form) input { background:var(--inset-bg); color:var(--text-main); border-color:var(--panel-border); }
html[data-palette] body:has(#damage-form) :is(output,a) { color:var(--accent-green); }
html[data-palette] body:has(#damage-form) p { color:var(--text-muted); }
@media(max-width:540px) { .palette-picker { gap:10px; padding:12px; } .palette-picker > div:first-child { width:100%; } .palette-swatches { margin-left:auto; } }

/* Keep artwork unchanged while adapting text and surfaces to the selected mode. */
html[data-palette] body :is(h1,h2,h3,h4,p,span,a,label,strong,small,div,section,button,input,select,option,output,td,th,summary,li,pre,code) { color:var(--text-main) !important; }
html[data-palette] body [class*="text-"] { color:var(--text-main) !important; }
html[data-palette] body :is(input,select,textarea) { color:var(--text-main); background-color:var(--inset-bg); }
html[data-palette] body ::placeholder { color:var(--text-muted); opacity:1; }
html[data-palette] body [class*="bg-amber-"],
html[data-palette] body [class*="bg-black"],
html[data-palette] body [class*="bg-[#"] { background-color:var(--inset-bg); }
html[data-palette] body .initial-roll-values { background:var(--palette-selected); }
html[data-palette] body .char-tab-btn.selected { border-color:var(--palette-focus); }
html[data-palette] body :is(.game-tab.active,.const-node.unlocked,button[class*="bg-indigo-600"],#result-navigation button),
html[data-palette] body :is(.game-tab.active,.const-node.unlocked,button[class*="bg-indigo-600"],#result-navigation button) * { color:var(--palette-ink) !important; }