.music-player {  
  position: relative;  
  display: flex;  
  align-items: center;  
  width: 100%;  
  height: 80px;  
  margin-top: 20px;  
  padding: 0 20px;  
  gap: 15px;  
  overflow: hidden;  
  background: transparent;  
  border-radius: var(--card-border-radius, 20px);  
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);  
  backdrop-filter: blur(calc(var(--card-blur) * 1px));  
  -webkit-backdrop-filter: blur(calc(var(--card-blur) * 1px));  
}  

.music-player::before {  
  content: '';  
  position: absolute;  
  inset: 0;  
  background-color: var(--accent-color);  
  background-image: linear-gradient(135deg, var(--primary-gradient, transparent) 0%, var(--secondary-gradient, transparent) 100%);  
  background-blend-mode: overlay;  
  opacity: calc(var(--card-opacity) / 100);  
  border-radius: var(--card-border-radius, 20px);  
  z-index: 0;  
  pointer-events: none;  
}  

.music-player > * {  
  position: relative;  
  z-index: 1;  
}  

.music-cover {  
  flex-shrink: 0;  
  width: 50px;  
  height: 50px;  
  object-fit: cover;  
  border: 2px solid var(--accent-color);  
  border-radius: 8px;  
}  

.music-info {  
  flex: 1;  
  display: flex;  
  flex-direction: column;  
  gap: 8px;  
  min-width: 0;  
}  

.music-track-name {  
  font-size: 14px;  
  font-weight: 600;  
  color: var(--text-color);  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}  

.music-seekbar-container {  
  display: flex;  
  align-items: center;  
  gap: 8px;  
  flex: 1;  
}  

.music-time {  
  font-size: 11px;  
  color: var(--text-muted);  
  font-weight: 500;  
  min-width: 35px;  
}  

.music-time.current {  
  text-align: right;  
}  

.music-time.duration {  
  text-align: left;  
}  

.music-seekbar {  
  flex: 1;  
  height: 4px;  
  background: rgba(255,255,255,0.2);  
  border-radius: 2px;  
  position: relative;  
  overflow: visible;  
  cursor: pointer;  
  touch-action: none;  
}  

.music-seekbar-progress {  
  height: 100%;  
  width: 0%;  
  background: var(--text-color);  
  border-radius: 2px;  
  pointer-events: none;  
}  

.music-seekbar:hover {  
  height: 6px;  
}  

.music-controls {  
  display: flex;  
  align-items: center;  
  gap: 10px;  
  flex-shrink: 0;  
}  

.music-control-btn {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  padding: 5px;  
  background: transparent;  
  border: none;  
  outline: none;  
  color: var(--icon-color);  
  cursor: pointer;  
}  

.music-control-btn:hover {  
  opacity: 0.9;  
}  

.music-control-btn img {  
  display: block;  
  width: 20px;  
  height: 20px;  
  object-fit: contain;  
  filter: var(--icon-filter, none);  
}  

/* Next and Previous buttons smaller and grey */
.music-control-btn.next img,  
.music-control-btn.prev img {  
  width: 16px;  
  height: 16px;  
  filter: grayscale(1) brightness(0.7);  
}  

/* Play/Pause stays larger and white */
.music-control-btn.play-pause img {  
  width: 24px;  
  height: 24px;  
  filter: brightness(1.2);  
}  

.music-control-btn .pause-icon {  
  display: none;  
}  

.music-player.playing .play-icon {  
  display: none;  
}  

.music-player.playing .pause-icon {  
  display: inline-block;  
}  

.music-control-btn:focus {  
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12);  
  border-radius: 6px;  
}  

@media (max-width: 480px) {  
  .music-player {  
    height: 72px;  
    padding: 0 12px;  
    gap: 10px;  
  }  

  .music-cover {  
    width: 44px;  
    height: 44px;  
  }  

  .music-track-name {  
    font-size: 13px;  
  }  

  .music-control-btn img {  
    width: 18px;  
    height: 18px;  
  }  

  .music-control-btn.play-pause img {  
    width: 22px;  
    height: 22px;  
  }  

  .music-control-btn.next img,  
  .music-control-btn.prev img {  
    width: 14px;  
    height: 14px;  
  }  
}