/* Random Theme Styles */
:root.random-theme-active {
  transition: all 0.3s ease-in-out;
}

.random-theme-active * {
  transition: background 0.3s ease-in-out, 
              border-color 0.3s ease-in-out, 
              color 0.3s ease-in-out,
              box-shadow 0.3s ease-in-out;
}

/* Ensure random themes override other theme styles */
:root.random-theme-active {
  --transition-duration: 0.3s;
}

/* Special styling for random theme indicator */
.skin-option[data-skin-id="random"] {
  background: linear-gradient(45deg, 
    #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
  background-size: 400% 400%;
  animation: randomThemeGradient 3s ease infinite;
  border: 2px solid transparent;
}

.skin-option[data-skin-id="random"] .skin-name {
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  font-weight: bold;
}

@keyframes randomThemeGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.skin-option[data-skin-id="random"].active {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}