:root, html[data-theme="dark"] {
  color-scheme: dark;
  --page: #050713;
  --bg: #050713;
  --surface: #091022;
  --surface-2: #0d1630;
  --panel: #091022;
  --panel2: #0d1630;
  --line: #202d52;
  --line-strong: #354877;
  --ink: #f4f7ff;
  --text: #f4f7ff;
  --muted: #9caac8;
  --dim: #6f7f9f;
  --lime: #37dcff;
  --cyan: #756cff;
  --accent: #37dcff;
  --accent-2: #756cff;
  --panel-2: #0d1630;
}

body { background: radial-gradient(circle at 84% 4%, rgba(117,108,255,.18), transparent 31rem), radial-gradient(circle at 8% 35%, rgba(55,220,255,.09), transparent 27rem), var(--page, var(--bg)) !important; }
.site-header { background: rgba(5,7,19,.86); }
.site-header .brand-mark, body > header .brand svg { width: 38px; height: 38px; padding: 4px; fill: #37dcff; filter: drop-shadow(0 0 9px rgba(55,220,255,.3)); }
.site-header .brand-mark .logo-cut, body > header .brand .cut { fill: var(--page, var(--bg)); }
.query-panel { background: linear-gradient(135deg, rgba(13,22,47,.97), rgba(7,11,27,.97)) !important; }
.pulse { box-shadow: 0 0 0 5px rgba(55,220,255,.1) !important; }
.privacy-strip { border-color: rgba(55,220,255,.24) !important; background: linear-gradient(110deg, rgba(55,220,255,.055), rgba(117,108,255,.045)) !important; }
.bit.network { background: linear-gradient(180deg, #37dcff, #756cff) !important; }

.theme-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong, #354877);
  border-radius: 999px;
  color: var(--ink, var(--text));
  background: var(--surface, #091022);
  font: 800 .75rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: #37dcff; outline: none; box-shadow: 0 0 0 3px rgba(55,220,255,.1); }

html[data-theme="light"] {
  color-scheme: light;
  --page: #eef3fa;
  --bg: #eef3fa;
  --surface: #ffffff;
  --surface-2: #f4f7fc;
  --panel: #ffffff;
  --panel2: #f4f7fc;
  --line: rgba(18,40,78,.14);
  --line-strong: rgba(18,40,78,.25);
  --ink: #081426;
  --text: #081426;
  --muted: #536581;
  --dim: #71809a;
  --lime: #087f9c;
  --cyan: #5145d8;
  --accent: #087f9c;
  --accent-2: #5145d8;
  --panel-2: #f4f7fc;
  --amber: #9b6200;
  --red: #bd3045;
  background: var(--page);
  color: var(--ink);
}
html[data-theme="light"] body { color: var(--ink); background: radial-gradient(circle at 84% 4%, rgba(81,69,216,.11), transparent 31rem), radial-gradient(circle at 8% 35%, rgba(8,127,156,.09), transparent 27rem), var(--page) !important; }
html[data-theme="light"] .site-header, html[data-theme="light"] body > header { background: rgba(255,255,255,.88) !important; border-color: var(--line) !important; }
html[data-theme="light"] .brand-mark .logo-cut, html[data-theme="light"] .brand .cut { fill: #eef3fa !important; }
html[data-theme="light"] .query-panel, html[data-theme="light"] form,
html[data-theme="light"] .results, html[data-theme="light"] .metrics article,
html[data-theme="light"] .panels > article, html[data-theme="light"] .guide-grid article,
html[data-theme="light"] .policy-card, html[data-theme="light"] .header-card,
html[data-theme="light"] .detail-card, html[data-theme="light"] .explain article {
  color: var(--ink);
  background: linear-gradient(145deg, rgba(81,69,216,.045), #fff 68%) !important;
  border-color: var(--line) !important;
}
html[data-theme="light"] .domain-input-wrap, html[data-theme="light"] input,
html[data-theme="light"] .record-picker span, html[data-theme="light"] .san-list code,
html[data-theme="light"] .cookie-row span { color: var(--ink); background: #fff !important; border-color: var(--line-strong) !important; }
html[data-theme="light"] .record-picker input:checked + span, html[data-theme="light"] .run-button,
html[data-theme="light"] button:not(.theme-toggle) { color: #fff; background: linear-gradient(135deg, #087f9c, #5145d8); }
html[data-theme="light"] .record-group-head, html[data-theme="light"] .policy-card-head,
html[data-theme="light"] .header-card-head { background: var(--surface-2) !important; }
html[data-theme="light"] .map { background-color: #f8faff !important; }
html[data-theme="light"] .map-label { background: rgba(255,255,255,.9) !important; }
html[data-theme="light"] footer { border-color: var(--line); }

@media (max-width: 720px) {
  .theme-toggle [data-theme-label] { display: none; }
  .theme-toggle { width: 38px; padding: 0; flex: 0 0 38px; }
}