/* Default desktop light mode (unchanged) */
body.light-mode-desktop {
  background-color: white;
  color: black;
}

/* Default mobile dark mode */
@media screen and (max-width: 768px) {
  body {
    background-color: black;
    color: white;
    transition: background 0.5s, color 0.5s;
  }

  body.light-mode {
    background-color: white !important;
    color: black !important;
  }

  body.dark-mode {
    background-color: black !important;
    color: white !important;
  }

  body.light-mode-desktop {
    background-color: black; /* override desktop class on mobile */
    color: white;
  }

  body.light-mode.light-mode-desktop {
    background-color: white !important;
    color: black !important;
  }
}

/* Toggle Button */
.toggle-btn {
  background: gray;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  cursor: pointer;
}