FIX: custom playlist download

js/app.js

@@ -330,7 +330,18 @@ document.addEventListener('DOMContentLoaded', async () => {
     btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
 
     try {
-        const { playlist, tracks } = await api.getPlaylist(playlistId);
+        let playlist, tracks;
+        const userPlaylist = await db.getPlaylist(playlistId);
+        
+        if (userPlaylist) {
+            playlist = { ...userPlaylist, title: userPlaylist.name };
+            tracks = userPlaylist.tracks || [];
+        } else {
+            const data = await api.getPlaylist(playlistId);
+            playlist = data.playlist;
+            tracks = data.tracks;
+        }
+        
         await downloadPlaylistAsZip(playlist, tracks, api, player.quality, lyricsManager);
     } catch (error) {
         console.error('Playlist download failed:', error);

js/utils.js

@@ -71,9 +71,11 @@ export const buildTrackFilename = (track, quality) => {
     const template = localStorage.getItem('filename-template') || '{trackNumber} - {artist} - {title}';
     const extension = getExtensionForQuality(quality);
 
+    const artistName = track.artist?.name || track.artists?.[0]?.name || 'Unknown Artist';
+
     const data = {
         trackNumber: track.trackNumber,
-        artist: track.artist?.name,
+        artist: artistName,
         title: getTrackTitle(track),
         album: track.album?.title
     };

styles.css

@@ -3092,9 +3092,6 @@ input:checked + .slider::before {
     justify-self: flex-end;
 }
 
-@media (max-width: 768px) {
-    /* ... existing generic rules ... */
-
 @media (max-width: 480px) {
     #playlist-detail-title {
         font-size: 1.75rem;