/* Theme Toggle Button */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1000;
  border: none;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* Default Light Mode Variables */
:root {
  --bg-primary: #f8f9fa;
  --bg-gradient: linear-gradient(135deg, #e0e0e0 0%, #d1d1d1 50%, #f5f5f5 100%);
  --player-bg: linear-gradient(145deg, #ffffff 0%, #f0f0f0 50%, #e8e8e8 100%);
  --text-color: #333333;
  --control-bg: #e0e0e0;
  --progress-bg: rgba(209, 209, 209, 0.5);
  --progress-active: #4a8fe7;
  --art-border: #d1d1d1;
  --shadow-color: rgba(0,0,0,0.1);
}

/* Dark Mode Overrides */
.dark-mode {
  --bg-primary: #121212;
  --bg-gradient: linear-gradient(135deg, #0f0f0f 0%, #1c1c1c 50%, #2c2c2c 100%);
  --player-bg: linear-gradient(145deg, #2b2b2b 0%, #1e1e1e 50%, #121212 100%);
  --text-color: #ffffff;
  --control-bg: #333333;
  --progress-bg: rgba(255, 255, 255, 0.2);
  --progress-active: #ffffff;
  --art-border: #444;
  --shadow-color: rgba(0, 0, 0, 0.6);
}




/* Apply Variables */
body {
  background: var(--bg-gradient, var(--bg-primary));
  color: var(--text-color);
  transition: all 0.5s ease;
}

.box-1 {
  background: var(--player-bg);
  box-shadow: 0 5px 15px var(--shadow-color);
  transition: all 0.5s ease;
}

.ctrl {
  background-color: var(--control-bg);
  box-shadow: 0 2px 5px var(--shadow-color);
  transition: all 0.3s ease;
}

.line {
  background-color: var(--progress-bg);
}

.lineChild {
  background-color: var(--progress-active);
  box-shadow: 0 0 5px var(--progress-active);
}

.art img {
  border-color: var(--art-border);
  box-shadow: 0 0 10px var(--shadow-color);
}

#name, #we, .title, .time span {
  color: var(--text-color);
  text-shadow: 0 1px 2px var(--shadow-color);
}

/* Visual feedback for theme toggle */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), 
              rgba(255,255,255,0.1) 0%, 
              transparent 150px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.light-mode::before {
  opacity: 1;
}

body.dark {
  --bg-primary: #121212;
  --bg-gradient: linear-gradient(135deg, #0f0f0f 0%, #1c1c1c 50%, #2c2c2c 100%);
  --player-bg: linear-gradient(145deg, #2b2b2b 0%, #1e1e1e 50%, #121212 100%);
  --text-color: #ffffff;
  --control-bg: #333333;
  --progress-bg: rgba(255, 255, 255, 0.2);
  --progress-active: #ffffff;
  --art-border: #444;
  --shadow-color: rgba(0, 0, 0, 0.6);
}
.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}