body { font-family: 'Inter', sans-serif; background-color: #000; color: #fff; overflow-x: hidden; }
.mono { font-family: 'JetBrains Mono', monospace; }

#history-panel, #lyrics-panel {
  position: fixed; top: 0; right: -100%; width: 100%; max-width: 500px; height: 100vh;
  background: #080808; z-index: 100; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid #1a1a1a;
}
#history-panel.open, #lyrics-panel.open { right: 0; }

.overlay-blur {
  position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px);
  z-index: 90; display: none;
}
.overlay-blur.open { display: block; }

.v-bar { width: 4px; background: #333; }
.playing .v-bar { background: currentColor; animation: v-bounce 0.8s infinite ease-in-out; }
.playing .v-bar:nth-child(2) { animation-delay: 0.15s; }
.playing .v-bar:nth-child(3) { animation-delay: 0.3s; }
.playing .v-bar:nth-child(4) { animation-delay: 0.45s; }

@keyframes v-bounce {
  0%, 100% { height: 6px; }
  50% { height: 24px; }
}

#progress-shadow {
  transition: width 0.1s linear;
  background: rgba(0,0,0,0.15);
}

.lyrics-content {
  white-space: pre-line;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.lyrics-content::-webkit-scrollbar { width: 4px; }
.lyrics-content::-webkit-scrollbar-track { background: transparent; }
.lyrics-content::-webkit-scrollbar-thumb { background: #333; }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 0;
  background: #f97316;
  cursor: pointer;
}