html[data-vv-theme="dark"] { color-scheme: dark; background: #0b1420; }
html[data-vv-theme="dark"] body { background: #0b1420 !important; color: #e4edf5; }
html[data-vv-theme="dark"] .vv-theme-surface {
  background-color: var(--vv-dark-surface, #142231) !important;
}
html[data-vv-theme="dark"] .vv-theme-gradient { background-image: none !important; }
html[data-vv-theme="dark"] .vv-theme-text { color: var(--vv-dark-text, #e4edf5) !important; }
html[data-vv-theme="dark"] .vv-theme-border { border-color: #354a5d !important; }
html[data-vv-theme="dark"] input,
html[data-vv-theme="dark"] select,
html[data-vv-theme="dark"] textarea { accent-color: #65d3c6; }
html[data-vv-theme="dark"] input::placeholder,
html[data-vv-theme="dark"] textarea::placeholder { color: #a2b5c7; opacity: 1; }
html[data-vv-theme="dark"] :focus-visible { outline: 3px solid #78d9e7; outline-offset: 3px; }
/* Canvas plots draw their own labels and backgrounds. Keep their original
   rendering and the supplied logo artwork independent of the UI theme. */
html[data-vv-theme="dark"] canvas { color-scheme: normal; background-color: var(--vv-canvas-background, transparent); }
.vv-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #bacbd6;
  border-radius: 999px;
  background: #fff;
  color: #183445;
  box-shadow: 0 4px 20px #0002;
  font: 700 13px/1.2 system-ui, sans-serif;
  cursor: pointer;
}
.vv-theme-toggle:hover { border-color: #289f9b; }
html[data-vv-theme="dark"] .vv-theme-toggle {
  background: #1d3042;
  color: #eaf6ff;
  border-color: #4c6a80;
  box-shadow: 0 4px 20px #0005;
}
@media (max-width: 600px) {
  .vv-theme-toggle { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); padding: 10px 13px; }
}
@media print { .vv-theme-toggle { display: none; } }