/* Shared theme tokens for Dye Lab (index.html + garment.html).
   Dark is the default and reproduces the existing look; html[data-theme="light"] overrides it. */
:root {
  --theme-page-bg-0: #2c3540;
  --theme-page-bg-1: #4e5b6d;
  --theme-page-bg-2: #748191;
  --theme-panel-bg: rgba(24, 30, 38, .82);
  --theme-panel-border: rgba(255, 255, 255, .12);
  --theme-field-bg: rgba(255, 255, 255, .055);
  --theme-field-border: rgba(255, 255, 255, .11);
  --theme-text: #d8dde6;
  --theme-muted: #8b93a3;
  --theme-faint: #5c6472;
  --theme-accent: #5aa9ff;
  --theme-accent-2: #8f7bff;
  --theme-danger: #ff7a6b;
  --theme-warn: #ffcf70;
  --theme-ok: #58d68d;
  --theme-badge-bg: rgba(88, 214, 141, .14);
  --theme-badge-text: #9ff0c4;
  --theme-button-bg: rgba(255, 255, 255, .06);
  --theme-button-border: rgba(255, 255, 255, .14);
  --theme-button-hover: rgba(255, 255, 255, .11);
  --theme-viewport-0: #8d99aa;
  --theme-viewport-1: #5e6b7d;
  --theme-viewport-2: #3b4656;
  --theme-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  --theme-overlay-bg: rgba(24, 30, 38, .95);
  /* aliases used by the existing page CSS */
  --bg-0: var(--theme-page-bg-0);
  --bg-1: var(--theme-page-bg-1);
  --bg-2: var(--theme-page-bg-2);
  --bg: var(--theme-page-bg-0);
  --panel: var(--theme-panel-bg);
  --panel-border: var(--theme-panel-border);
  --line: var(--theme-panel-border);
  --text: var(--theme-text);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --dim: var(--theme-muted);
  --faint: var(--theme-faint);
  --accent: var(--theme-accent);
  --accent-2: var(--theme-accent-2);
  --danger: var(--theme-danger);
  --warn: var(--theme-warn);
  --ok: var(--theme-ok);
}
html { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light;
  --theme-page-bg-0: #e7d5b4;
  --theme-page-bg-1: #f1e2c9;
  --theme-page-bg-2: #f9efdd;
  --theme-panel-bg: rgba(252, 245, 233, .94);
  --theme-panel-border: #cbb796;
  --theme-field-bg: #f1e3cb;
  --theme-field-border: #c0aa88;
  --theme-text: #2b2318;
  --theme-muted: #554531;
  --theme-faint: #68553c;
  --theme-accent: #2b6fc4;
  --theme-accent-2: #6c5bb5;
  --theme-danger: #a83b2d;
  --theme-warn: #795000;
  --theme-ok: #2a6b40;
  --theme-badge-bg: #f2e1c4;
  --theme-badge-text: #58401a;
  --theme-button-bg: #f6ead5;
  --theme-button-border: #c8b28f;
  --theme-button-hover: #efdfc4;
  --theme-viewport-0: #d9c4a2;
  --theme-viewport-1: #efe2ca;
  --theme-viewport-2: #fbf3e5;
  --theme-shadow: 0 14px 40px rgba(83, 57, 24, .18), inset 0 1px 0 rgba(255, 250, 240, .75);
  --theme-overlay-bg: rgba(248, 240, 226, .97);
}

/* Shared header controls (both pages). */
.brand-row { display: flex; align-items: center; gap: 8px; }
.brand { flex: none; min-width: 0; }
.header-nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; }
.header-nav .toolnav { margin: 0; }
.header-nav .nav-cta { width: 132px; height: 32px; box-sizing: border-box; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; white-space: nowrap;
  border-radius: 8px; font-size: 14px; line-height: 1; }
.header-actions { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.conn { display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.2;
  padding: 4px 8px; border: 1px solid var(--theme-panel-border); border-radius: 999px;
  background: var(--theme-field-bg); color: var(--theme-muted); white-space: nowrap; }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.theme-toggle { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; border: 1px solid var(--theme-button-border);
  border-radius: 999px; background: var(--theme-button-bg); color: var(--theme-text);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
.theme-toggle:hover { background: var(--theme-button-hover); border-color: var(--theme-accent); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }
.theme-icon { display: block; line-height: 1; transform: translateY(-.5px); }
@media (max-width: 1100px) {
  .brand { font-size: 15px; letter-spacing: .18em; }
  .header-nav .nav-cta { width: 96px; height: 30px; padding: 0 6px; font-size: 13px; gap: 4px; }
  .header-actions { gap: 6px; }
  .conn { font-size: 11px; gap: 5px; padding: 3px 6px; }
  .dot { width: 8px; height: 8px; }
  .theme-toggle { width: 26px; height: 26px; font-size: 13px; }
}

/* Dark mode keeps the existing look; these only normalize controls shared by both pages. */
html[data-theme="dark"] .panel,
html[data-theme="dark"] #side,
html[data-theme="dark"] .pane { background: var(--theme-panel-bg); border-color: var(--theme-panel-border); color: var(--theme-text); }
html[data-theme="dark"] .brand,
html[data-theme="dark"] .pane h3 { color: var(--theme-text); }
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] select { color: var(--theme-text); }
html[data-theme="dark"] .theme-toggle { color: var(--theme-text); }

/* ---------- LIGHT THEME ---------- */
html[data-theme="light"] body { background: radial-gradient(1200px 820px at 50% 38%,
  var(--theme-page-bg-2) 0%, var(--theme-page-bg-1) 45%, var(--theme-page-bg-0) 100%);
  color: var(--theme-text); }
html[data-theme="light"] .panel,
html[data-theme="light"] #side,
html[data-theme="light"] .pane { background: var(--theme-panel-bg); border-color: var(--theme-panel-border);
  box-shadow: var(--theme-shadow); color: var(--theme-text); }
html[data-theme="light"] .brand { color: #2b2318; }
html[data-theme="light"] .subtitle { color: var(--theme-muted); }
html[data-theme="light"] .conn { background: var(--theme-field-bg); border-color: var(--theme-panel-border); color: var(--theme-muted); }
html[data-theme="light"] .dot { background: #a89272; }
html[data-theme="light"] .dot.ok { background: #1f8a4e; box-shadow: 0 0 0 2px rgba(31,138,78,.16); }
html[data-theme="light"] .dot.bad { background: var(--theme-danger); }
html[data-theme="light"] .toolnav a,
html[data-theme="light"] .nav-cta { background: #efe7f8; border-color: #c7b2df; color: #59377c; }
html[data-theme="light"] .toolnav a:hover,
html[data-theme="light"] .nav-cta:hover { background: #e7dcf4; border-color: #9f79c7; color: #43285f; }
html[data-theme="light"] .pagenav a { background: #efe7f8; border-color: #c7b2df; color: #59377c; }
html[data-theme="light"] .pagenav a:hover { background: #e7dcf4; }
html[data-theme="light"] .theme-toggle { background: var(--theme-button-bg); border-color: var(--theme-button-border); color: #3a2d1d; }
html[data-theme="light"] .theme-toggle:hover { background: var(--theme-button-hover); border-color: var(--theme-accent); }
html[data-theme="light"] label { color: var(--theme-muted); }
html[data-theme="light"] .panel-title { color: var(--theme-muted); }
html[data-theme="light"] .purpose,
html[data-theme="light"] .filter-row,
html[data-theme="light"] .catalog-counts,
html[data-theme="light"] .list-meta,
html[data-theme="light"] .current,
html[data-theme="light"] .hint,
html[data-theme="light"] .mode-desc,
html[data-theme="light"] .mask-info,
html[data-theme="light"] .notice,
html[data-theme="light"] .item-data-note,
html[data-theme="light"] .cost-note,
html[data-theme="light"] .cost-unknown,
html[data-theme="light"] #sun-desc,
html[data-theme="light"] #lamp-desc,
html[data-theme="light"] .static-fallback-note { color: var(--theme-muted); }
html[data-theme="light"] .item-data-template { color: var(--theme-muted); }
html[data-theme="light"] .class-banner { background: #f7ead8; border-color: var(--theme-panel-border); color: var(--theme-text); }
html[data-theme="light"] .class-banner .why { color: var(--theme-muted); }
html[data-theme="light"] .notice { background: #f9edd4; border-color: #d3ae6c; color: #5d430f; }
html[data-theme="light"] .notice.tiny { background: #f2e5cf; border-color: var(--theme-panel-border); color: var(--theme-muted); }
html[data-theme="light"] .side-note { background: #f9edd4; border-color: #d3ae6c; color: #5d430f; }
html[data-theme="light"] .side-note b { color: #47310a; }
html[data-theme="light"] .material-suppress-callout { background: #f9edd4; border-color: #d3ae6c; color: #5b3f0a; }
html[data-theme="light"] .material-suppress-callout .suppress-sub { color: var(--theme-muted); }
html[data-theme="light"] .variant-paint-note { background: #f4e8d4; border-color: #c3a97f; color: #4d3920; }
html[data-theme="light"] .static-fallback-note { background: #f7e7c4; border-color: #d3ae6c; color: #5b3f0a; }

/* fields and native controls */
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input.hex,
html[data-theme="light"] select,
html[data-theme="light"] #controls select,
html[data-theme="light"] #controls input[type="search"],
html[data-theme="light"] #controls input[type="text"],
html[data-theme="light"] #controls input.hex,
html[data-theme="light"] #material-section select,
html[data-theme="light"] #variant-section select,
html[data-theme="light"] #side select,
html[data-theme="light"] #side input[type="text"],
html[data-theme="light"] .outfit-row select { background: var(--theme-field-bg); border-color: var(--theme-field-border);
  color: var(--theme-text); }
html[data-theme="light"] input[type="search"]:focus,
html[data-theme="light"] input[type="text"]:focus,
html[data-theme="light"] input.hex:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] #controls select:focus,
html[data-theme="light"] #material-section select:focus,
html[data-theme="light"] #variant-section select:focus,
html[data-theme="light"] #side select:focus,
html[data-theme="light"] .outfit-row select:focus { border-color: var(--theme-accent); background: #fdf8ee; }
html[data-theme="light"] .hex-wrap,
html[data-theme="light"] #controls .hex-wrap { background: var(--theme-field-bg); border-color: var(--theme-field-border); }
html[data-theme="light"] .hex-wrap .hash { color: var(--theme-muted); }
html[data-theme="light"] input[type="color"],
html[data-theme="light"] .outfit-row input[type="color"],
html[data-theme="light"] .light-row input[type="color"] { border-color: var(--theme-field-border); }
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup { color: #2b2318; background-color: #fbf2e2; }
html[data-theme="light"] select option:checked { color: #fff; background-color: #2b6fc4; }

/* buttons / segmented / lists */
html[data-theme="light"] .btn,
html[data-theme="light"] .seg,
html[data-theme="light"] .file-btn,
html[data-theme="light"] .mini-btn { background: var(--theme-button-bg); border-color: var(--theme-button-border); color: var(--theme-text); }
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .seg:hover,
html[data-theme="light"] .file-btn:hover,
html[data-theme="light"] .mini-btn:hover { background: var(--theme-button-hover); border-color: var(--theme-accent); }
html[data-theme="light"] .seg.on { background: rgba(43,111,196,.15); color: #174a80; box-shadow: inset 0 0 0 1px rgba(43,111,196,.38); }
html[data-theme="light"] .seg:disabled { color: var(--theme-faint); opacity: .55; }
html[data-theme="light"] .btn.primary { background: #2b6fc4; border-color: #2b6fc4; color: #fff; }
html[data-theme="light"] .btn.primary:hover { background: #245fa8; }
html[data-theme="light"] .sun-presets .seg.on,
html[data-theme="light"] #sun-presets .seg.on { background: rgba(208,151,38,.18); color: #6b4a00; box-shadow: inset 0 0 0 1px rgba(174,120,15,.4); }
html[data-theme="light"] .model-item:hover { background: rgba(43,111,196,.08); border-color: rgba(43,111,196,.22); }
html[data-theme="light"] .model-item.active { background: rgba(43,111,196,.14); border-color: #7ca9d8; }
html[data-theme="light"] .model-name { color: var(--theme-text); }
html[data-theme="light"] .model-path { color: var(--theme-muted); }
html[data-theme="light"] .outfit-list { background: transparent; border-color: var(--theme-panel-border); }
html[data-theme="light"] .outfit-row { border-color: #d9c7a8; }
html[data-theme="light"] .outfit-row .region { color: #2c5f92; }
html[data-theme="light"] .outfit-row .layer-count { color: var(--theme-muted); }
html[data-theme="light"] .outfit-row.empty { opacity: .62; }
html[data-theme="light"] .pane { background: var(--theme-panel-bg); }
html[data-theme="light"] .pane h3 { color: var(--theme-muted); }
html[data-theme="light"] .pane h3 .chip { color: #245d9c; }
html[data-theme="light"] #shot { box-shadow: 0 8px 28px rgba(83,57,24,.20); }
html[data-theme="light"] #body3d { background: radial-gradient(ellipse at 50% 35%, #fffaf0 0%, #f2e6d2 48%, #ddc8a7 100%); }
html[data-theme="light"] #body-msg { color: var(--theme-muted); }
html[data-theme="light"] #msg { color: var(--theme-muted); }

/* swatches / sliders / badges */
html[data-theme="light"] .swatch,
html[data-theme="light"] #swatch,
html[data-theme="light"] #metalswatch,
html[data-theme="light"] #material-swatch { border-color: var(--theme-panel-border); }
html[data-theme="light"] input[type="range"] { background: #d9c7a8; }
html[data-theme="light"] input[type="range"]::-webkit-slider-thumb { background: #fffaf0; border-color: #5a4935; box-shadow: 0 1px 4px rgba(83,57,24,.35); }
html[data-theme="light"] input[type="range"]::-moz-range-thumb { background: #fffaf0; border-color: #5a4935; }
html[data-theme="light"] .slider-row label,
html[data-theme="light"] .slider-row output,
html[data-theme="light"] .light-row .light-label,
html[data-theme="light"] .light-row .light-out,
html[data-theme="light"] .mini-label { color: var(--theme-muted); }
html[data-theme="light"] .class-badge { border-width: 1px; }
html[data-theme="light"] .class-badge.class-DYEABLE { background: #e8f2e1; color: #14552f; border-color: #a6c792; }
html[data-theme="light"] .class-badge.class-MATERIAL { background: #f1e7d4; color: #1f5288; border-color: #c3ae8a; }
html[data-theme="light"] .class-badge.class-NEITHER { background: #f0e6d4; color: #554531; border-color: #c9b89a; }
html[data-theme="light"] .class-badge.class-MIXED { background: #f9eac9; color: #5f4200; border-color: #d3ae6c; }
html[data-theme="light"] .id-confidence.authoritative,
html[data-theme="light"] .cost-src.wiki { background: #e8f2e1; color: #14552f; }
html[data-theme="light"] .id-confidence.derived,
html[data-theme="light"] .cost-src.jar { background: #f9eac9; color: #5f4200; }
html[data-theme="light"] .id-confidence.unknown,
html[data-theme="light"] .cost-src.derived { background: #f6e1d8; color: #7d2a1e; }
html[data-theme="light"] .variant-badge { background: #e8f2e1; color: #14552f; }
html[data-theme="light"] .suppress-badge { background: #e2b64e; color: #2a1d00; }
html[data-theme="light"] .cap-state { color: var(--theme-muted); }
html[data-theme="light"] .item-data-row,
html[data-theme="light"] .cost-row,
html[data-theme="light"] .item-data-label { color: var(--theme-text); }
html[data-theme="light"] .item-data-label { color: var(--theme-muted); }
html[data-theme="light"] .item-materials,
html[data-theme="light"] .item-actions { color: var(--theme-text); }
html[data-theme="light"] #dyecost { background: #f6ead6; border-color: var(--theme-panel-border); }
html[data-theme="light"] .cost-area { color: var(--theme-text); }
html[data-theme="light"] .cost-kg { color: #6d4d00; }
html[data-theme="light"] .cost-kind, html[data-theme="light"] .cost-note { color: var(--theme-muted); }
html[data-theme="light"] .material-suppressed { background: #f9edd4; }
html[data-theme="light"] .material-tint-suppressed { background: #f4e8d4; }
html[data-theme="light"] #warnings-panel { background: #faeee6; border-color: #c58f7c; }
html[data-theme="light"] #warnings-list { color: #6e2a1f; }
html[data-theme="light"] #diagnostics-panel summary,
html[data-theme="light"] #diagnostics-list { background: #f4e8d5; border-color: var(--theme-panel-border); color: var(--theme-muted); }
html[data-theme="light"] #selftest-out { background: #f4e8d5; border-color: #c3a97f; color: #4a3a24; }
html[data-theme="light"] #footer,
html[data-theme="light"] #mask-caption { background: rgba(252,245,233,.90); color: var(--theme-muted); border: 1px solid var(--theme-panel-border); }
html[data-theme="light"] #footer code { color: var(--theme-text); }
html[data-theme="light"] #loading { background: #fbf2e2; border-color: var(--theme-panel-border); color: var(--theme-muted); }
html[data-theme="light"] .spinner { border-color: #d9c7a8; border-top-color: var(--theme-accent); }
html[data-theme="light"] #banner { background: #f8e8df; border-color: #c58f7c; }
html[data-theme="light"] .banner-title { color: #8d2b21; } html[data-theme="light"] .banner-text { color: #6b3a33; }
html[data-theme="light"] #offline { background: var(--theme-overlay-bg); }
html[data-theme="light"] #offline h2 { color: var(--theme-danger); }
html[data-theme="light"] #offline p { color: var(--theme-text); }
html[data-theme="light"] #offline code { background: #f4e6d0; border-color: var(--theme-panel-border); color: var(--theme-text); }
html[data-theme="light"] #offline .how { color: var(--theme-muted); }
html[data-theme="light"] .note { color: var(--theme-muted); }
html[data-theme="light"] .note code { background: #f2e5cf; border-color: var(--theme-panel-border); color: var(--theme-text); }
html[data-theme="light"] .mask-load input[type="text"] { background: var(--theme-field-bg); color: var(--theme-text); }
html[data-theme="light"] .file-btn { background: var(--theme-button-bg); color: var(--theme-text); }
html[data-theme="light"] .dev-notes summary { color: var(--theme-muted); }
html[data-theme="light"] .empty-title { color: rgba(43,35,24,.68); }
html[data-theme="light"] .empty-text { color: rgba(43,35,24,.58); }
html[data-theme="light"] .fatal-text { color: #5a3a2e; }
html[data-theme="light"] .metalinfo { color: var(--theme-muted); }
html[data-theme="light"] .chip { color: var(--theme-muted); }
html[data-theme="light"] .layer-count { color: var(--theme-muted); }
html[data-theme="light"] .light-desc { color: var(--theme-muted); }