/* Default dark-mode text color */
html.dark-mode {
  --reader-text-color: #ffffff;
}

/* Apply ONLY to content, not UI */
html.dark-mode .book-content,
html.dark-mode .layout-content,
html.dark-mode .region-content,
html.dark-mode .node__content,
html.dark-mode main {
  color: var(--reader-text-color);
}

/* Make sure children inherit properly */
html.dark-mode .book-content *,
html.dark-mode .layout-content *,
html.dark-mode .region-content *,
html.dark-mode .node__content *,
html.dark-mode main * {
  color: inherit;
}

.reader-color-slider {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

/* Hide slider in light mode */
html:not(.dark-mode) .reader-color-slider {
  display: none;
}

.reader-color-slider input[type="range"] {
  width: 120px;
  appearance: none;
  background: transparent;
}

.reader-color-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.reader-color-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  margin-top: -5px;
}

.reader-color-slider input[type="range"]::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.reader-color-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: none;
  border-radius: 50%;
}