body {
      font-family: 'Poppins', sans-serif;
    }

    .music-player-container {
      background: linear-gradient(135deg, #1e293b, #0f172a);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .album-art-container {
      position: relative;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(0, 0, 0, 0.5);
      transition: transform 0.3s ease-in-out;
    }

    .album-art-container.playing .album-art {
      animation: spin 10s linear infinite;
    }

    .album-art {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.5s ease-in-out;
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .progress-bar-container {
      cursor: pointer;
      height: 8px;
      background-color: #4a5568;
      border-radius: 9999px;
    }

    .progress-bar {
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, #6366f1, #a855f7);
      border-radius: 9999px;
      transition: width 0.1s linear;
    }

    .playlist-modal {
      transform: translateX(100%);
      transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      z-index: 10;
    }

    .playlist-modal.open {
      transform: translateX(0);
    }

    .playlist-item:hover {
      background-color: #3f4552;
      transform: translateX(5px);
    }

    .playlist-item.active {
      background-color: #4a5568;
      border-left: 4px solid #a855f7;
    }

    .control-btn {
      transition: all 0.2s ease-in-out;
    }

    .control-btn:hover {
      transform: scale(1.1);
      color: #a855f7;
    }

    .control-btn:active {
      transform: scale(0.95);
    }