/* Shared appearance switch. The dark palette follows HoYoLAB's current homepage. */
:root { --theme-hover:#eceffd; --theme-accent-bg:#eef1ff; }
.site-header-actions { display:flex; align-items:center; gap:12px; margin-left:auto; flex-shrink:0; }
.site-header-actions .preview-badge { margin-left:0; }
.site-header .theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:38px; padding:8px 11px; flex-shrink:0; white-space:nowrap;
  border:1px solid var(--line); border-radius:10px;
  background:var(--surface-muted); color:var(--muted); font-size:12px;
}
.site-header .theme-toggle:hover { background:var(--theme-hover); color:var(--text); border-color:var(--accent); }
.site-header .theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.theme-toggle svg { flex-shrink:0; }
.theme-toggle .theme-icon-sun { display:none; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display:none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display:block; }
@media(max-width:1000px) {
  .site-header-actions { gap:8px; }
  .theme-toggle [data-theme-label] { display:none; }
  .site-header .theme-toggle { width:38px; padding:0; }
}
@media(max-width:570px) {
  .site-header { gap:6px; }
  .site-header-actions { gap:6px; margin-left:0; }
  .site-header .theme-toggle { min-height:38px; width:34px; border-radius:9px; }
  .site-navigation a { padding-left:8px; padding-right:8px; }
}
@media(max-width:350px) {
  .site-header { padding:0 8px; gap:4px; }
  .site-header-actions { gap:4px; }
  .site-header .site-navigation a { padding-left:6px; padding-right:6px; }
  .site-header .preview-badge { padding:5px 4px; }
}

html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0c0f1d;
  --panel:#1b1d2a;
  --surface:#1b1d2a;
  --panel2:#242734;
  --surface-muted:#242734;
  --line:#343746;
  --text:rgba(255,255,255,.85);
  --muted:rgba(255,255,255,.65);
  --accent:#6680ff;
  --teal:#94a6ff;
  --theme-hover:#343746;
  --theme-accent-bg:#1a224d;
}
html[data-theme="dark"] body { background:var(--bg); color:var(--text); }
html[data-theme="dark"] :is(button,.button) { background:var(--surface-muted); border-color:var(--line); color:var(--text); }
html[data-theme="dark"] :is(button,.button):hover { background:var(--theme-hover); border-color:#596182; }
html[data-theme="dark"] :is(input,select,textarea) { background:var(--surface-muted); border-color:var(--line); color:var(--text); }
html[data-theme="dark"] :is(input,textarea)::placeholder { color:var(--muted); opacity:.8; }
html[data-theme="dark"] a { color:var(--teal); }
html[data-theme="dark"] .site-header { background:var(--surface); border-color:var(--line); box-shadow:0 2px 12px #0000001a; }
html[data-theme="dark"] :is(.site-brand,.site-brand:hover) { color:var(--text); }
html[data-theme="dark"] .site-brand small { color:var(--muted); }
html[data-theme="dark"] .site-brand-mark { color:var(--accent); }
html[data-theme="dark"] .site-brand-mark span { color:var(--teal); }
html[data-theme="dark"] .site-navigation a { color:var(--muted); }
html[data-theme="dark"] .site-navigation a:hover { color:var(--text); background:var(--surface-muted); }
html[data-theme="dark"] .site-navigation a[aria-current="page"] { color:var(--teal); background:transparent; }
html[data-theme="dark"] :is(.preview-badge,.site-version) { color:var(--muted); background:var(--surface-muted); border-color:var(--line); }
html[data-theme="dark"] :is(button,a,input,select,summary):focus-visible { outline-color:var(--accent); }
html[data-theme="dark"] ::selection { color:#fff; background:#556de580; }

/* Map controls use the same panels and blue accent as the gallery. */
html[data-theme="dark"] .map-context-bar #map-tabs { background:var(--surface); }
html[data-theme="dark"] .map-context-bar #map-tabs button { background:transparent; color:var(--muted); }
html[data-theme="dark"] .map-context-bar #map-tabs button.active { color:var(--teal); background:var(--theme-accent-bg); box-shadow:none; }
html[data-theme="dark"] .map-context-actions .badge { color:var(--teal); background:var(--theme-accent-bg); }
html[data-theme="dark"] .map-context-actions #export { color:var(--text); background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .map-page :is(.left-panel,.right-panel,.workspace) { background:var(--surface); border-color:var(--line); box-shadow:0 3px 12px #0000000d; }
html[data-theme="dark"] .map-page :is(.left-panel,.right-panel) { scrollbar-color:#44495f transparent; }
html[data-theme="dark"] .map-page :is(h1,h2,h3,.detail-title) { color:var(--text); }
html[data-theme="dark"] .map-page :is(
  .muted,.eyebrow,.toolbar-note,.side-bottom,.detail-note,.candidate-source,
  .section-label,.type-row .n,.region-btn span,.stat-card small,.detail-meta dt,
  .map-footer,.detail-eyebrow,.observation-count,.search-result-meta,
  .search-result.active .search-result-meta,.spawn-item small,.route-preset small,
  .native-option,.native-option small,.native-height-inputs label
) { color:var(--muted); }
html[data-theme="dark"] .map-page #configured-locations { background:var(--surface-muted); border-color:var(--line); }
html[data-theme="dark"] .map-page #configured-locations h3 { color:var(--teal); }
html[data-theme="dark"] .map-page :is(#configured-spawn-count,#configured-exit-count) { color:var(--text); }
html[data-theme="dark"] .map-page .configured-location-actions button { background:var(--surface); border-color:var(--line); color:var(--teal); }
html[data-theme="dark"] .map-page .side-tabs { background:var(--surface-muted); }
html[data-theme="dark"] .map-page .side-tabs button { background:transparent; color:var(--muted); }
html[data-theme="dark"] .map-page .side-tabs button.active { background:var(--theme-accent-bg); color:var(--teal); box-shadow:none; }
html[data-theme="dark"] .map-page .search { background:var(--surface-muted); border-color:var(--line); }
html[data-theme="dark"] .map-page .search input { background:transparent; color:var(--text); }
html[data-theme="dark"] .map-page .search:focus-within { border-color:var(--accent); }
html[data-theme="dark"] .map-page #search-clear { color:var(--muted); }
html[data-theme="dark"] .map-page #search-clear:hover { color:var(--text); background:var(--theme-hover); }
html[data-theme="dark"] .map-page .text-btn { color:var(--teal); background:transparent; }
html[data-theme="dark"] .map-page .type-row { color:var(--text); }
html[data-theme="dark"] .map-page .type-row:hover { background:var(--surface-muted); }
html[data-theme="dark"] .map-page .chips button { background:var(--surface-muted); color:var(--muted); border-color:var(--line); }
html[data-theme="dark"] .map-page .chips button.active { background:var(--theme-accent-bg); color:var(--teal); border-color:#4c5eac; }
html[data-theme="dark"] .map-page .region-btn { background:var(--surface-muted); color:var(--text); border-color:var(--line); }
html[data-theme="dark"] .map-page .callout { background:#302d25; border-color:#484333; color:#c7beaa; }
html[data-theme="dark"] .map-page .callout b { color:#e3d4b1; }
html[data-theme="dark"] .map-page .wide-button { background:var(--theme-accent-bg); color:var(--teal); border-color:var(--line); }
html[data-theme="dark"] .map-page .side-bottom { border-color:var(--line); }
html[data-theme="dark"] .map-page .dot { background:var(--accent); }
html[data-theme="dark"] .map-page .toolbar { background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .map-page .source-2d-tabs { background:var(--surface-muted); }
html[data-theme="dark"] .map-page .source-2d-tabs button { color:var(--muted); background:transparent; }
html[data-theme="dark"] .map-page .source-2d-tabs button.active { color:var(--teal); background:var(--theme-accent-bg); box-shadow:none; }
html[data-theme="dark"] .map-page #source-route-open { color:var(--teal); background:var(--theme-accent-bg); border-color:var(--line); }
html[data-theme="dark"] .map-page :is(.toolbar-actions button,.toolbar .mobile-control,.mobile-drawer-close) { color:var(--text); background:var(--surface-muted); border-color:var(--line); }
html[data-theme="dark"] .map-page #map-stage { background-color:#222633; background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px); }
html[data-theme="dark"] .map-page .stage-tag { background:#1b1d2aee; border-color:var(--line); color:var(--text); box-shadow:0 2px 8px #0003; }
html[data-theme="dark"] .map-page .pulse { background:var(--accent); }
html[data-theme="dark"] .map-page .zoom-tools button { background:#242734f2; border-color:#44495f; color:var(--text); box-shadow:0 2px 8px #0003; }
html[data-theme="dark"] .map-page .map-footer { background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .map-page :is(#tooltip,#native-tooltip) { color:var(--text); background:#242734fa; border-color:#4a516d; box-shadow:0 4px 14px #0003; }
html[data-theme="dark"] .map-page :is(#empty-message,#map-error,#native-map-empty,#native-map-loading) { background:#242734fa; color:var(--text); border-color:var(--line); box-shadow:0 4px 18px #0003; }
html[data-theme="dark"] .map-page #native-map-layer { background:#242734ee; color:var(--text); border-color:var(--line); }
html[data-theme="dark"] .map-page #native-orientation-toggle { color:var(--text); background:#242734f2; border-color:#44495f; }
html[data-theme="dark"] .map-page #native-orientation-toggle:hover { color:var(--teal); border-color:var(--accent); }
html[data-theme="dark"] .map-page .overview-art { color:var(--accent); background:var(--theme-accent-bg); }
html[data-theme="dark"] .map-page .stat-card { background:var(--surface-muted); border-color:var(--line); }
html[data-theme="dark"] .map-page .stat-card strong { color:var(--teal); }
html[data-theme="dark"] .map-page .detail-status { background:var(--theme-accent-bg); color:var(--teal); }
html[data-theme="dark"] .map-page .detail-status.random_source { background:#352d45; color:#cbb6ec; }
html[data-theme="dark"] .map-page :is(.detail-status.unknown,.detail-status.conditional) { background:#403628; color:#e8c891; }
html[data-theme="dark"] .map-page .detail-meta { border-color:var(--line); color:var(--text); }
html[data-theme="dark"] .map-page .primary-button { background:#556de5; color:#fff; box-shadow:0 3px 8px #0002; }
html[data-theme="dark"] .map-page .primary-button:hover { background:#627bee; color:#fff; }
html[data-theme="dark"] .map-page .secondary-button { color:var(--teal); }
html[data-theme="dark"] .map-page .observation-buttons button { background:var(--surface-muted); color:var(--text); border-color:var(--line); }
html[data-theme="dark"] .map-page :is(.room-contents div,.spawn-item) { background:var(--surface-muted); color:var(--text); }
html[data-theme="dark"] .map-page .search-result { background:var(--surface-muted); color:var(--text); border-color:var(--line); }
html[data-theme="dark"] .map-page .search-result.active { background:var(--theme-accent-bg); color:var(--teal); border-color:#4c5eac; }
html[data-theme="dark"] .map-page :is(.route-evidence,.candidate-evidence) { background:var(--surface-muted); color:var(--muted); border-color:var(--line); }
html[data-theme="dark"] .map-page :is(.route-evidence summary,.route-evidence[open] summary) { color:var(--teal); }
html[data-theme="dark"] .map-page :is(#source-route-panel,#native2d-route-panel,.source-route-detail-actions,.native2d-detail-route) { border-color:var(--line); }
html[data-theme="dark"] .map-page :is(#source-route-status,#native2d-route-status) { color:var(--muted); }
html[data-theme="dark"] .map-page :is(#source-route-status,#native2d-route-status)[data-status="complete"] { color:#89d6c8; }
html[data-theme="dark"] .map-page :is(#source-route-status,#native2d-route-status)[data-status="conditional"] { color:#ffc470; }
html[data-theme="dark"] .map-page :is(#source-route-legend,#native2d-route-legend) { background:#332b20;color:#f2ce95;border-color:#d99736; }
html[data-theme="dark"] .map-page :is(#source-route-status,#native2d-route-status):is([data-status="unreachable"],[data-status="off_mesh"],[data-status="error"]) { color:#edb98c; }
html[data-theme="dark"] .map-page :is(#source-route-panel input,#source-route-panel select) { color:var(--text); background:var(--surface-muted); border-color:var(--line); }
html[data-theme="dark"] .map-page #route-list li button { color:var(--text); }
html[data-theme="dark"] .map-page dialog { background:var(--surface-muted); color:var(--text); border-color:var(--line); box-shadow:0 20px 70px #0008; }
html[data-theme="dark"] .map-page dialog::backdrop { background:#0c0f1dbb; }
html[data-theme="dark"] .map-page #toast { background:#556de5; color:white; box-shadow:0 5px 22px #0005; }