.dark-mode body {
  background-color: #1a1a1a;
  color: #f0f0f0;
}

.dark-mode h1 {
  background-color: #333;
  color: #f0f0f0;
  border-bottom-color: #555;
}

.dark-mode #controls {
  background-color: #222;
  border-left-color: #666;
  border-right-color: #666;
}

.dark-mode .control-group label {
  color: #f0f0f0;
}

.dark-mode select, .dark-mode button {
  background-color: #444;
  color: #ddd;
  border-color: #777;
}

.dark-mode select:focus, .dark-mode button:focus {
  background-color: #555;
}

.dark-mode button:hover {
  background-color: #555;
}

.dark-mode .slider {
  background-color: #555;
  border-color: #888;
}

.dark-mode .slider:before {
  background-color: #ccc;
}

.dark-mode input:checked + .slider {
  background-color: #777;
}

.dark-mode #timeLines {
  background-color: #222;
  border-left-color: #666;
  border-right-color: #666;
}

.dark-mode .timeline-container {
  background-color: #333;
  border-color: #777;
}

.dark-mode .timeline-label {
  color: #f0f0f0;
}

.dark-mode .remove-btn {
  color: #aaa;
}

.dark-mode .remove-btn:hover {
  color: #ddd;
}

.dark-mode .timeline {
  background-color: #444;
  border-color: #888;
}

.dark-mode .time-block {
  background-color: #444;
  color: #ddd;
  border-right-color: #888;
}

.dark-mode .now {
  background-color: #f9aa33;
  color: #111;
}

.dark-mode .gmt-offset {
  background-color: #444;
  border-color: #666;
  color: #ddd;
}

.dark-mode .current-time {
  background-color: #222;
  color: #f0f0f0;
  border-left-color: #666;
  border-right-color: #666;
}