/* Dark mode base styling */
body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

/* Dark mode common components */
body.dark-mode #toggle-btn, 
body.dark-mode #toggle-btn-social, 
body.dark-mode #toggle-btn-toolkit, 
body.dark-mode #toggle-btn-schedule {
  background: linear-gradient(145deg, #6a3093, #4a148c);
  box-shadow: 0 4px 15px rgba(106, 48, 147, 0.3);
}

body.dark-mode #toggle-btn::before, 
body.dark-mode #toggle-btn-social::before, 
body.dark-mode #toggle-btn-toolkit::before, 
body.dark-mode #toggle-btn-schedule::before {
  background: linear-gradient(145deg, #4a148c, #6a3093);
}

body.dark-mode #clock, 
body.dark-mode #clock-social, 
body.dark-mode #clock-toolkit, 
body.dark-mode #clock-schedule {
  background: rgba(106, 48, 147, 0.9);
  box-shadow: 0 4px 15px rgba(106, 48, 147, 0.3);
}

body.dark-mode .clock-toggle {
  background: rgba(106, 48, 147, 0.9);
  box-shadow: 0 4px 15px rgba(106, 48, 147, 0.3);
}

body.dark-mode .back-btn {
  background: #6a3093;
  box-shadow: 0 5px 15px rgba(106, 48, 147, 0.4);
}

body.dark-mode .back-btn:hover {
  background: #4a148c;
}