/* ===================================================
   Dark Mode Toggle
=================================================== */
#darkModeToggle {
  position: fixed;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  border: 2px solid rgba(0,255,255,0.6);
  background-color: var(--bg-light);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0,255,255,0.4), 0 0 6px rgba(255,0,255,0.2);
  transition: all 0.3s ease;
}

#darkModeToggle:hover {
  box-shadow: 0 0 16px rgba(0,255,255,0.8), 0 0 16px rgba(255,0,255,0.6);
  transform: scale(1.1);
}

/* Glitch effect on toggle */
#darkModeToggle:active {
  animation: toggleGlitch 0.3s steps(3, end) 1;
}

@keyframes toggleGlitch {
  0%,100% { text-shadow: 2px 0 var(--glitch-left), -2px 0 var(--glitch-right); }
  25% { text-shadow: -2px 0 var(--glitch-left), 2px 0 var(--glitch-right); }
  50% { text-shadow: 1px 0 var(--glitch-left), -1px 0 var(--glitch-right); }
  75% { text-shadow: -1px 0 var(--glitch-left), 1px 0 var(--glitch-right); }
}