diff --git a/src/lib/components/AlbumCard.svelte b/src/lib/components/AlbumCard.svelte
index 152158a00..8d8627f9f 100644
--- a/src/lib/components/AlbumCard.svelte
+++ b/src/lib/components/AlbumCard.svelte
@@ -282,9 +282,9 @@
   }
   
   [data-theme="light"] .quality-badge {
-    color: rgba(40, 42, 54, 0.85);
-    background: rgba(40, 42, 54, 0.08);
-    border: 1px solid rgba(40, 42, 54, 0.2);
+    color: #ffffff;
+    background: rgba(40, 42, 54, 0.85);
+    border: 1px solid rgba(40, 42, 54, 0.95);
   }
 
   .play-overlay {
diff --git a/src/lib/components/QualityBadge.svelte b/src/lib/components/QualityBadge.svelte
index fe30748b7..c9d47fc52 100644
--- a/src/lib/components/QualityBadge.svelte
+++ b/src/lib/components/QualityBadge.svelte
@@ -114,8 +114,21 @@
   }
   
   [data-theme="light"] .quality-badge {
-    background: rgba(40, 42, 54, 0.06);
-    border: 1px solid rgba(40, 42, 54, 0.15);
+    background: rgba(40, 42, 54, 0.85);
+    border: 1px solid rgba(40, 42, 54, 0.95);
+  }
+  
+  [data-theme="light"] .tier-label,
+  [data-theme="light"] .quality-info {
+    color: #ffffff;
+  }
+  
+  [data-theme="light"] .badge-icon {
+    filter: invert(1) brightness(1.5);
+  }
+  
+  [data-theme="light"] .badge-icon.hires {
+    filter: brightness(1.2);
   }
 
   .badge-icon {
diff --git a/src/lib/components/views/LocalLibraryView.svelte b/src/lib/components/views/LocalLibraryView.svelte
index 8eaa757bb..e69de29bb 100644
--- a/src/lib/components/views/LocalLibraryView.svelte
+++ b/src/lib/components/views/LocalLibraryView.svelte
@@ -1,3244 +0,0 @@
-<script lang="ts">
-  import { invoke, convertFileSrc } from '@tauri-apps/api/core';
-  import { open } from '@tauri-apps/plugin-dialog';
-  import { onMount, onDestroy } from 'svelte';
-  import {
-    HardDrive, Music, Disc3, Mic2, FolderPlus, Trash2, RefreshCw,
-    Settings, ArrowLeft, X, Play, AlertCircle, ImageDown, Upload, Search, LayoutGrid, List, Edit3
-  } from 'lucide-svelte';
-  import AlbumCard from '../AlbumCard.svelte';
-  import TrackRow from '../TrackRow.svelte';
-  import {
-    subscribe as subscribeNav,
-    selectLocalAlbum,
-    clearLocalAlbum,
-    getSelectedLocalAlbumId,
-    goBack as navGoBack,
-    navigateTo,
-    getNavigationState
-  } from '$lib/stores/navigationStore';
-
-  // Backend types matching Rust models
-  interface LocalTrack {
-    id: number;
-    file_path: string;
-    title: string;
-    artist: string;
-    album: string;
-    album_artist?: string;
-    album_group_key?: string;
-    album_group_title?: string;
-    track_number?: number;
-    disc_number?: number;
-    year?: number;
-    genre?: string;
-    duration_secs: number;
-    format: string;
-    bit_depth?: number;
-    sample_rate: number;
-    channels: number;
-    file_size_bytes: number;
-    cue_file_path?: string;
-    cue_start_secs?: number;
-    cue_end_secs?: number;
-    artwork_path?: string;
-    last_modified: number;
-    indexed_at: number;
-  }
-
-  interface LocalAlbum {
-    id: string;
-    title: string;
-    artist: string;
-    year?: number;
-    artwork_path?: string;
-    track_count: number;
-    total_duration_secs: number;
-    format: string;
-    bit_depth?: number;
-    sample_rate: number;
-    directory_path: string;
-  }
-
-  interface LocalArtist {
-    name: string;
-    album_count: number;
-    track_count: number;
-  }
-
-  interface ArtistSearchResult {
-    id: number;
-    name: string;
-    image?: { small?: string; thumbnail?: string; large?: string };
-  }
-
-  interface SearchResults<T> {
-    items: T[];
-    total: number;
-    offset: number;
-    limit: number;
-  }
-
-  interface LibraryStats {
-    track_count: number;
-    album_count: number;
-    artist_count: number;
-    total_duration_secs: number;
-    total_size_bytes: number;
-  }
-
-  interface ScanProgress {
-    status: 'Idle' | 'Scanning' | 'Complete' | 'Cancelled' | 'Error';
-    total_files: number;
-    processed_files: number;
-    current_file?: string;
-    errors: { file_path: string; error: string }[];
-  }
-
-  interface Props {
-    onAlbumClick?: (album: LocalAlbum) => void;
-    onQobuzArtistClick?: (artistId: number) => void;
-    onTrackPlay?: (track: LocalTrack) => void;
-    onTrackPlayNext?: (track: LocalTrack) => void;
-    onTrackPlayLater?: (track: LocalTrack) => void;
-    onTrackAddToPlaylist?: (trackId: number) => void;
-    onSetLocalQueue?: (trackIds: number[]) => void;
-  }
-
-  let {
-    onAlbumClick,
-    onQobuzArtistClick,
-    onTrackPlay,
-    onTrackPlayNext,
-    onTrackPlayLater,
-    onTrackAddToPlaylist,
-    onSetLocalQueue
-  }: Props = $props();
-
-  // View state
-  type TabType = 'albums' | 'artists' | 'tracks';
-  let activeTab = $state<TabType>('albums');
-  let showSettings = $state(false);
-  let showHiddenAlbums = $state(false);
-  let albumSearch = $state('');
-  let albumViewMode = $state<'grid' | 'list'>('grid');
-  type AlbumGroupMode = 'alpha' | 'artist';
-  let albumGroupMode = $state<AlbumGroupMode>('alpha');
-  let albumGroupingEnabled = $state(false);
-  let showGroupMenu = $state(false);
-  let artistSearch = $state('');
-  let trackSearch = $state('');
-  type TrackGroupMode = 'album' | 'artist' | 'name';
-  let trackGroupMode = $state<TrackGroupMode>('album');
-  let trackGroupingEnabled = $state(false);
-  let showTrackGroupMenu = $state(false);
-  let trackSearchTimer: ReturnType<typeof setTimeout> | null = null;
-
-  // Data state
-  let albums = $state<LocalAlbum[]>([]);
-  let hiddenAlbums = $state<LocalAlbum[]>([]);
-  let artists = $state<LocalArtist[]>([]);
-  let tracks = $state<LocalTrack[]>([]);
-  let stats = $state<LibraryStats | null>(null);
-  let folders = $state<string[]>([]);
-  let scanProgress = $state<ScanProgress | null>(null);
-
-  // Loading state
-  let loading = $state(false);
-  let scanning = $state(false);
-  let error = $state<string | null>(null);
-  let fetchingArtwork = $state(false);
-  let updatingArtwork = $state(false);
-  let hasDiscogsCredentials = $state(false);
-
-  // Album detail state (for viewing album tracks)
-  let selectedAlbum = $state<LocalAlbum | null>(null);
-  let albumTracks = $state<LocalTrack[]>([]);
-
-  // Qobuz artist images cache (artist name -> image URL)
-  let artistImages = $state<Map<string, string>>(new Map());
-
-  // Album edit modal state
-  let showAlbumEditModal = $state(false);
-  let editingAlbumTitle = $state('');
-  let editingAlbumHidden = $state(false);
-
-  // Folder selection state
-  let selectedFolders = $state<Set<string>>(new Set());
-
-  let unsubscribeNav: (() => void) | null = null;
-
-  onMount(() => {
-    loadLibraryData();
-    loadFolders();
-    checkDiscogsCredentials();
-
-    // Subscribe to navigation changes for back/forward support
-    unsubscribeNav = subscribeNav(() => {
-      const navState = getNavigationState();
-
-      // When navigating to library-album, load the album if we have an ID
-      if (navState.activeView === 'library-album' && navState.selectedLocalAlbumId) {
-        const albumId = navState.selectedLocalAlbumId;
-        // Find album in current list or load it
-        const album = albums.find(a => a.id === albumId);
-        if (album && (!selectedAlbum || selectedAlbum.id !== albumId)) {
-          loadAlbumById(albumId);
-        }
-      }
-
-      // When navigating back to library (from library-album), clear album selection
-      if (navState.activeView === 'library' && selectedAlbum) {
-        selectedAlbum = null;
-        albumTracks = [];
-      }
-    });
-
-    // Check if we should show an album on initial load (forward navigation)
-    const initialNavState = getNavigationState();
-    if (initialNavState.activeView === 'library-album' && initialNavState.selectedLocalAlbumId) {
-      loadAlbumById(initialNavState.selectedLocalAlbumId);
-    }
-  });
-
-  onDestroy(() => {
-    if (unsubscribeNav) {
-      unsubscribeNav();
-    }
-  });
-
-  async function loadAlbumById(albumId: string) {
-    try {
-      // Find album in current list
-      let album = albums.find(a => a.id === albumId);
-
-      // If not found in loaded albums, we need to fetch album list first
-      if (!album) {
-        const allAlbums = await invoke<LocalAlbum[]>('library_get_albums', { includeHidden: false });
-        albums = allAlbums;
-        album = allAlbums.find(a => a.id === albumId);
-      }
-
-      if (album) {
-        selectedAlbum = album;
-        albumTracks = await invoke<LocalTrack[]>('library_get_album_tracks', {
-          albumGroupKey: album.id
-        });
-      }
-    } catch (err) {
-      console.error('Failed to load album:', err);
-    }
-  }
-
-  async function checkDiscogsCredentials() {
-    try {
-      hasDiscogsCredentials = await invoke<boolean>('discogs_has_credentials');
-    } catch {
-      hasDiscogsCredentials = false;
-    }
-  }
-
-  async function loadLibraryData() {
-    loading = true;
-    error = null;
-    try {
-      const [albumsResult, statsResult] = await Promise.all([
-        invoke<LocalAlbum[]>('library_get_albums', { includeHidden: false }),
-        invoke<LibraryStats>('library_get_stats')
-      ]);
-      albums = albumsResult;
-      stats = statsResult;
-    } catch (err) {
-      console.error('Failed to load library:', err);
-      error = String(err);
-    } finally {
-      loading = false;
-    }
-  }
-
-  async function loadFolders() {
-    try {
-      folders = await invoke<string[]>('library_get_folders');
-    } catch (err) {
-      console.error('Failed to load folders:', err);
-    }
-  }
-
-  async function loadArtists() {
-    loading = true;
-    try {
-      artists = await invoke<LocalArtist[]>('library_get_artists');
-      // Load cached artist images from database
-      await loadCachedArtistImages();
-      // Fetch missing images in background if enabled
-      const fetchEnabled = localStorage.getItem('qbz-fetch-artist-images') !== 'false';
-      if (fetchEnabled) {
-        fetchMissingArtistImages();
-      }
-    } catch (err) {
-      console.error('Failed to load artists:', err);
-      error = String(err);
-    } finally {
-      loading = false;
-    }
-  }
-
-  async function loadTracks(query = '') {
-    loading = true;
-    try {
-      tracks = await invoke<LocalTrack[]>('library_search', { query, limit: 1000 });
-    } catch (err) {
-      console.error('Failed to load tracks:', err);
-      error = String(err);
-    } finally {
-      loading = false;
-    }
-  }
-
-  function handleTabChange(tab: TabType) {
-    activeTab = tab;
-
-    // If we're viewing an album, navigate back to library
-    const navState = getNavigationState();
-    if (navState.activeView === 'library-album') {
-      clearLocalAlbum();
-      navigateTo('library');
-    }
-
-    // Clear local state
-    selectedAlbum = null;
-    albumTracks = [];
-
-    if (tab === 'artists' && artists.length === 0) {
-      loadArtists();
-    } else if (tab === 'tracks' && tracks.length === 0) {
-      loadTracks(trackSearch.trim());
-    }
-  }
-
-  async function handleAddFolder() {
-    try {
-      const selected = await open({
-        directory: true,
-        multiple: false,
-        title: 'Select Music Folder'
-      });
-
-      if (!selected || typeof selected !== 'string') return;
-
-      await invoke('library_add_folder', { path: selected });
-      await loadFolders();
-    } catch (err) {
-      console.error('Failed to add folder:', err);
-    }
-  }
-
-  async function handleRemoveFolder(path: string) {
-    if (!confirm(`Remove "${path}" from library? This will remove all indexed tracks from this folder.`)) {
-      return;
-    }
-
-    try {
-      await invoke('library_remove_folder', { path });
-      selectedFolders.delete(path);
-      selectedFolders = new Set(selectedFolders);
-      await loadFolders();
-      await loadLibraryData();
-    } catch (err) {
-      console.error('Failed to remove folder:', err);
-      alert(`Failed to remove folder: ${err}`);
-    }
-  }
-
-  function toggleFolderSelection(folder: string) {
-    if (selectedFolders.has(folder)) {
-      selectedFolders.delete(folder);
-    } else {
-      selectedFolders.add(folder);
-    }
-    selectedFolders = new Set(selectedFolders);
-  }
-
-  async function handleRemoveSelectedFolders() {
-    if (selectedFolders.size === 0) return;
-    
-    const count = selectedFolders.size;
-    if (!confirm(`Remove ${count} selected folder${count > 1 ? 's' : ''}? This will remove all indexed tracks from these folders.`)) return;
-
-    try {
-      for (const folder of selectedFolders) {
-        await invoke('library_remove_folder', { path: folder });
-      }
-      selectedFolders.clear();
-      selectedFolders = new Set(selectedFolders);
-      await loadFolders();
-      await loadLibraryData();
-    } catch (err) {
-      console.error('Failed to remove folders:', err);
-      alert(`Failed to remove folders: ${err}`);
-    }
-  }
-
-  async function handleScan() {
-    if (folders.length === 0) {
-      alert('Please add at least one folder to scan.');
-      return;
-    }
-
-    scanning = true;
-    scanProgress = {
-      status: 'Scanning',
-      total_files: 0,
-      processed_files: 0,
-      current_file: undefined,
-      errors: []
-    };
-
-    // Start polling for progress
-    const pollInterval = setInterval(async () => {
-      try {
-        scanProgress = await invoke<ScanProgress>('library_get_scan_progress');
-        if (scanProgress.status === 'Complete' || scanProgress.status === 'Cancelled' || scanProgress.status === 'Error') {
-          clearInterval(pollInterval);
-          scanning = false;
-          await loadLibraryData();
-          if (activeTab === 'artists') await loadArtists();
-          if (activeTab === 'tracks') await loadTracks();
-        }
-      } catch (err) {
-        console.error('Failed to get scan progress:', err);
-      }
-    }, 500);
-
-    try {
-      await invoke('library_scan');
-    } catch (err) {
-      console.error('Scan failed:', err);
-      scanning = false;
-      clearInterval(pollInterval);
-    }
-  }
-
-  async function handleStopScan() {
-    try {
-      await invoke('library_stop_scan');
-    } catch (err) {
-      console.error('Failed to stop scan:', err);
-    }
-  }
-
-  async function handleClearLibrary() {
-    const firstConfirm = confirm(
-      'Clear entire library?\n\n' +
-      'This will remove ALL indexed tracks from the database.\n' +
-      'Your audio files will NOT be deleted.\n\n' +
-      'You will need to re-scan your folders after this.'
-    );
-    
-    if (!firstConfirm) return;
-
-    const secondConfirm = confirm(
-      'Are you absolutely sure?\n\n' +
-      'This action cannot be undone.\n' +
-      'Type OK to confirm or Cancel to abort.'
-    );
-    
-    if (!secondConfirm) return;
-
-    try {
-      await invoke('library_clear');
-      await loadLibraryData();
-      albums = [];
-      artists = [];
-      tracks = [];
-    } catch (err) {
-      console.error('Failed to clear library:', err);
-      alert(`Failed to clear library: ${err}`);
-    }
-  }
-
-  async function handleFetchMissingArtwork() {
-    if (!hasDiscogsCredentials) {
-      alert('Discogs credentials not configured. Please set up DISCOGS_API_CLIENT_KEY and DISCOGS_API_CLIENT_SECRET.');
-      return;
-    }
-
-    fetchingArtwork = true;
-    try {
-      const count = await invoke<number>('library_fetch_missing_artwork');
-      if (count > 0) {
-        alert(`Fetched artwork for ${count} albums from Discogs.`);
-        await loadLibraryData();
-      } else {
-        alert('No albums needed artwork updates.');
-      }
-    } catch (err) {
-      console.error('Failed to fetch artwork:', err);
-      alert(`Failed to fetch artwork: ${err}`);
-    } finally {
-      fetchingArtwork = false;
-    }
-  }
-
-  function applyAlbumArtworkUpdate(groupKey: string, artworkPath: string) {
-    albums = albums.map(album =>
-      album.id === groupKey ? { ...album, artwork_path: artworkPath } : album
-    );
-    if (selectedAlbum?.id === groupKey) {
-      selectedAlbum = { ...selectedAlbum, artwork_path: artworkPath };
-    }
-    albumTracks = albumTracks.map(track =>
-      track.album_group_key === groupKey ? { ...track, artwork_path: artworkPath } : track
-    );
-    tracks = tracks.map(track =>
-      track.album_group_key === groupKey ? { ...track, artwork_path: artworkPath } : track
-    );
-  }
-
-  async function handleSetAlbumArtwork() {
-    if (!selectedAlbum || updatingArtwork) return;
-    try {
-      updatingArtwork = true;
-      const selected = await open({
-        title: 'Select Album Artwork',
-        multiple: false,
-        directory: false,
-        filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'webp'] }]
-      });
-
-      if (!selected || typeof selected !== 'string') return;
-
-      const cachedPath = await invoke<string>('library_set_album_artwork', {
-        albumGroupKey: selectedAlbum.id,
-        artworkPath: selected
-      });
-      applyAlbumArtworkUpdate(selectedAlbum.id, cachedPath);
-    } catch (err) {
-      console.error('Failed to set album artwork:', err);
-      alert(`Failed to set artwork: ${err}`);
-    } finally {
-      updatingArtwork = false;
-    }
-  }
-
-  async function handleAlbumClick(album: LocalAlbum) {
-    // Use navigation store for proper back/forward support
-    selectLocalAlbum(album.id);
-    // Also load album data immediately for responsive UI
-    selectedAlbum = album;
-    try {
-      albumTracks = await invoke<LocalTrack[]>('library_get_album_tracks', {
-        albumGroupKey: album.id
-      });
-    } catch (err) {
-      console.error('Failed to load album tracks:', err);
-    }
-  }
-
-  async function handleAlbumPlayFromGrid(album: LocalAlbum) {
-    const tracks = await fetchAlbumTracks(album);
-    if (!tracks.length) return;
-
-    await setQueueForAlbumTracks(tracks);
-    await handleTrackPlay(tracks[0]);
-  }
-
-  async function handleAlbumQueueNextFromGrid(album: LocalAlbum) {
-    if (!onTrackPlayNext) return;
-    const tracks = await fetchAlbumTracks(album);
-    if (!tracks.length) return;
-    for (let i = tracks.length - 1; i >= 0; i--) {
-      onTrackPlayNext(tracks[i]);
-    }
-  }
-
-  async function handleAlbumQueueLaterFromGrid(album: LocalAlbum) {
-    if (!onTrackPlayLater) return;
-    const tracks = await fetchAlbumTracks(album);
-    if (!tracks.length) return;
-    for (const track of tracks) {
-      onTrackPlayLater(track);
-    }
-  }
-
-  async function handleTrackPlay(track: LocalTrack) {
-    try {
-      await invoke('library_play_track', { trackId: track.id });
-      onTrackPlay?.(track);
-    } catch (err) {
-      console.error('Failed to play track:', err);
-      alert(`Failed to play: ${err}`);
-    }
-  }
-
-  async function handlePlayAllAlbum() {
-    if (!selectedAlbum || albumTracks.length === 0) return;
-
-    try {
-      await setQueueForAlbumTracks(albumTracks);
-      await handleTrackPlay(albumTracks[0]);
-    } catch (err) {
-      console.error('Failed to play album:', err);
-    }
-  }
-
-  async function fetchAlbumTracks(album: LocalAlbum): Promise<LocalTrack[]> {
-    try {
-      return await invoke<LocalTrack[]>('library_get_album_tracks', {
-        albumGroupKey: album.id
-      });
-    } catch (err) {
-      console.error('Failed to load album tracks:', err);
-      return [];
-    }
-  }
-
-  async function setQueueForAlbumTracks(tracks: LocalTrack[]) {
-    const queueTracks = tracks.map(t => ({
-      id: t.id,
-      title: t.title,
-      artist: t.artist,
-      album: t.album,
-      duration_secs: t.duration_secs,
-      artwork_url: t.artwork_path ? getArtworkUrl(t.artwork_path) : null,
-      hires: (t.bit_depth && t.bit_depth > 16) || t.sample_rate > 44100,
-      bit_depth: t.bit_depth ?? null,
-      sample_rate: t.sample_rate ?? null,
-    }));
-
-    await invoke('set_queue', { tracks: queueTracks, startIndex: 0 });
-    onSetLocalQueue?.(tracks.map(t => t.id));
-  }
-
-  function formatDuration(seconds: number): string {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
-  }
-
-  function formatTotalDuration(seconds: number): string {
-    const hours = Math.floor(seconds / 3600);
-    const mins = Math.floor((seconds % 3600) / 60);
-    if (hours > 0) {
-      return `${hours}h ${mins}m`;
-    }
-    return `${mins} min`;
-  }
-
-  function formatFileSize(bytes: number): string {
-    if (bytes >= 1073741824) {
-      return `${(bytes / 1073741824).toFixed(1)} GB`;
-    }
-    if (bytes >= 1048576) {
-      return `${(bytes / 1048576).toFixed(1)} MB`;
-    }
-    return `${(bytes / 1024).toFixed(1)} KB`;
-  }
-
-  async function handleHideAlbum(album: LocalAlbum) {
-    try {
-      await invoke('library_set_album_hidden', { albumGroupKey: album.id, hidden: true });
-      await loadLibraryData();
-    } catch (err) {
-      console.error('Failed to hide album:', err);
-      alert(`Failed to hide album: ${err}`);
-    }
-  }
-
-  async function handleShowAlbum(album: LocalAlbum) {
-    try {
-      await invoke('library_set_album_hidden', { albumGroupKey: album.id, hidden: false });
-      await loadHiddenAlbums();
-      await loadLibraryData();
-    } catch (err) {
-      console.error('Failed to show album:', err);
-      alert(`Failed to show album: ${err}`);
-    }
-  }
-
-  async function loadHiddenAlbums() {
-    try {
-      hiddenAlbums = await invoke<LocalAlbum[]>('library_get_albums', { includeHidden: true });
-      const visibleAlbumIds = new Set(albums.map(a => a.id));
-      hiddenAlbums = hiddenAlbums.filter(a => !visibleAlbumIds.has(a.id));
-    } catch (err) {
-      console.error('Failed to load hidden albums:', err);
-    }
-  }
-
-  async function toggleHiddenAlbumsView() {
-    showHiddenAlbums = !showHiddenAlbums;
-    if (showHiddenAlbums && hiddenAlbums.length === 0) {
-      await loadHiddenAlbums();
-    }
-  }
-
-  function openAlbumEditModal() {
-    if (!selectedAlbum) return;
-    editingAlbumTitle = selectedAlbum.title;
-    editingAlbumHidden = false;
-    showAlbumEditModal = true;
-  }
-
-  async function saveAlbumEdit() {
-    if (!selectedAlbum) return;
-
-    try {
-      await invoke('library_set_album_hidden', {
-        albumGroupKey: selectedAlbum.id,
-        hidden: editingAlbumHidden
-      });
-
-      showAlbumEditModal = false;
-      
-      if (editingAlbumHidden) {
-        clearLocalAlbum();
-        navGoBack();
-        await loadLibraryData();
-      }
-    } catch (err) {
-      console.error('Failed to save album settings:', err);
-      alert(`Failed to save settings: ${err}`);
-    }
-  }
-
-  function getQualityBadge(track: LocalTrack): string {
-    const format = track.format.toUpperCase();
-    const bitDepth = track.bit_depth ?? 16;
-    const sampleRate = track.sample_rate / 1000; // Convert to kHz
-
-    // Format: "FLAC 24/96" style that audiophiles love
-    return `${format} ${bitDepth}/${sampleRate}`;
-  }
-
-  function isHiRes(track: LocalTrack): boolean {
-    return (track.bit_depth ?? 16) >= 24 || track.sample_rate > 48000;
-  }
-
-  function formatSampleRate(hz: number): string {
-    return `${(hz / 1000).toFixed(1)} kHz`;
-  }
-
-  function formatBitDepth(bits?: number): string {
-    return bits ? `${bits}-bit` : '16-bit';
-  }
-
-  function getAlbumQualityBadge(album: LocalAlbum): string {
-    const format = album.format.toUpperCase();
-    const bitDepth = album.bit_depth ?? 16;
-    const sampleRate = album.sample_rate / 1000;
-    return `${format} ${bitDepth}/${sampleRate}`;
-  }
-
-  function isAlbumHiRes(album: LocalAlbum): boolean {
-    return (album.bit_depth ?? 16) >= 24 || album.sample_rate > 48000;
-  }
-
-  function extractDiscNumber(track: LocalTrack): number {
-    if (track.disc_number && track.disc_number > 0) return track.disc_number;
-
-    const album = track.album ?? '';
-    const match = album.match(/(?:disc|disk|cd)\s*([0-9]+)/i);
-    if (match) {
-      const parsed = Number(match[1]);
-      if (!Number.isNaN(parsed) && parsed > 0) return parsed;
-    }
-
-    return 1;
-  }
-
-  function buildAlbumSections(tracks: LocalTrack[]) {
-    const sorted = [...tracks].sort((a, b) => {
-      const aDisc = extractDiscNumber(a);
-      const bDisc = extractDiscNumber(b);
-      if (aDisc !== bDisc) return aDisc - bDisc;
-      const aTrack = a.track_number ?? 0;
-      const bTrack = b.track_number ?? 0;
-      if (aTrack !== bTrack) return aTrack - bTrack;
-      return a.title.localeCompare(b.title);
-    });
-
-    const groups = new Map<number, LocalTrack[]>();
-    for (const track of sorted) {
-      const disc = extractDiscNumber(track);
-      if (!groups.has(disc)) {
-        groups.set(disc, []);
-      }
-      groups.get(disc)?.push(track);
-    }
-
-    const discs = [...groups.keys()].sort((a, b) => a - b);
-    return discs.map(disc => ({
-      disc,
-      label: `Disc ${disc}`,
-      tracks: groups.get(disc) ?? []
-    }));
-  }
-
-  function getArtworkUrl(path?: string): string {
-    if (!path) return '';
-    return convertFileSrc(path);
-  }
-
-  function matchesAlbumSearch(album: LocalAlbum, query: string): boolean {
-    const needle = query.trim().toLowerCase();
-    if (!needle) return true;
-    return (
-      album.title.toLowerCase().includes(needle) ||
-      album.artist.toLowerCase().includes(needle)
-    );
-  }
-
-  function matchesArtistSearch(artist: LocalArtist, query: string): boolean {
-    const needle = query.trim().toLowerCase();
-    if (!needle) return true;
-    return artist.name.toLowerCase().includes(needle);
-  }
-
-  const alphaIndexLetters = ['#', ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];
-
-  function alphaGroupKey(title: string): string {
-    const trimmed = title.trim();
-    if (!trimmed) return '#';
-    const first = trimmed[0].toUpperCase();
-    return first >= 'A' && first <= 'Z' ? first : '#';
-  }
-
-  function slugify(value: string): string {
-    return value
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/^-+|-+$/g, '') || 'group';
-  }
-
-  function groupIdForKey(prefix: string, key: string): string {
-    if (key === '#') {
-      return `${prefix}-num`;
-    }
-    return `${prefix}-${slugify(key)}`;
-  }
-
-  function groupAlbums(items: LocalAlbum[], mode: AlbumGroupMode) {
-    const prefix = `album-${mode}`;
-    const sorted = [...items].sort((a, b) => {
-      if (mode === 'artist') {
-        const artistCmp = a.artist.localeCompare(b.artist);
-        if (artistCmp !== 0) return artistCmp;
-        return a.title.localeCompare(b.title);
-      }
-      return a.title.localeCompare(b.title);
-    });
-
-    const groups = new Map<string, LocalAlbum[]>();
-    for (const album of sorted) {
-      const key = mode === 'artist' ? album.artist : alphaGroupKey(album.title);
-      if (!groups.has(key)) {
-        groups.set(key, []);
-      }
-      groups.get(key)?.push(album);
-    }
-
-    const keys = [...groups.keys()].sort((a, b) => {
-      if (mode === 'alpha') {
-        if (a === '#') return -1;
-        if (b === '#') return 1;
-      }
-      return a.localeCompare(b);
-    });
-
-    return keys.map(key => ({
-      key,
-      id: groupIdForKey(prefix, key),
-      albums: groups.get(key) ?? []
-    }));
-  }
-
-  function scrollToGroup(prefix: string, letter: string, available: Set<string>) {
-    if (!available.has(letter)) return;
-    const id = groupIdForKey(prefix, letter);
-    const target = document.getElementById(id);
-    target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }
-
-  function scrollToGroupId(groupId?: string) {
-    if (!groupId) return;
-    const target = document.getElementById(groupId);
-    target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }
-
-  function scheduleTrackSearch() {
-    if (trackSearchTimer) {
-      clearTimeout(trackSearchTimer);
-    }
-    trackSearchTimer = setTimeout(() => {
-      loadTracks(trackSearch.trim());
-    }, 250);
-  }
-
-  function trackSortValue(track: LocalTrack) {
-    const disc = track.disc_number ?? 0;
-    const trackNumber = track.track_number ?? 0;
-    return { disc, trackNumber };
-  }
-
-  function normalizeAlbumTitle(title: string): string {
-    const trimmed = title.trim();
-    if (!trimmed) return trimmed;
-
-    let normalized = trimmed.replace(/\s*[\[(](disc|disk|cd)\s*\d+[\])]\s*$/i, '');
-    normalized = normalized.replace(/\s+(disc|disk|cd)\s*\d+\s*$/i, '');
-    return normalized.trim() || trimmed;
-  }
-
-  function normalizeArtistName(name: string): string {
-    return name
-      .toLowerCase()
-      .normalize('NFKD')
-      .replace(/[\u0300-\u036f]/g, '')
-      .replace(/[^a-z0-9]+/g, ' ')
-      .trim();
-  }
-
-  async function resolveQobuzArtistId(name: string): Promise<number | null> {
-    const query = name.trim();
-    if (!query) return null;
-
-    const results = await invoke<SearchResults<ArtistSearchResult>>('search_artists', {
-      query,
-      limit: 5,
-      offset: 0
-    });
-
-    if (!results.items.length) return null;
-
-    const normalizedQuery = normalizeArtistName(query);
-    const exactMatch = results.items.find(
-      artist => normalizeArtistName(artist.name) === normalizedQuery
-    );
-    return (exactMatch ?? results.items[0]).id;
-  }
-
-  async function handleLocalArtistClick(name?: string) {
-    if (!name || !onQobuzArtistClick) return;
-    if (normalizeArtistName(name) === 'various artists') return;
-    try {
-      const artistId = await resolveQobuzArtistId(name);
-      if (artistId) {
-        onQobuzArtistClick(artistId);
-      } else {
-        console.warn('No Qobuz artist match for local artist:', name);
-      }
-    } catch (err) {
-      console.error('Failed to resolve Qobuz artist for local artist:', name, err);
-    }
-  }
-
-  /**
-   * Load cached artist images from database.
-   */
-  async function loadCachedArtistImages(): Promise<void> {
-    try {
-      const artistNames = artists.map(a => a.name);
-      const cachedImages = await invoke<Array<{
-        artist_name: string;
-        image_url: string | null;
-        source: string | null;
-        custom_image_path: string | null;
-      }>>('library_get_artist_images', { artistNames });
-
-      for (const cached of cachedImages) {
-        const imageUrl = cached.custom_image_path
-          ? convertFileSrc(cached.custom_image_path)
-          : cached.image_url;
-        if (imageUrl) {
-          artistImages.set(cached.artist_name, imageUrl);
-        }
-      }
-      // Trigger re-render
-      artistImages = new Map(artistImages);
-    } catch (err) {
-      console.debug('Failed to load cached artist images:', err);
-    }
-  }
-
-  /**
-   * Fetch missing artist images from Qobuz and Discogs (fallback).
-   */
-  async function fetchMissingArtistImages(): Promise<void> {
-    // Filter out artists we already have images for and "Various Artists"
-    const toFetch = artists.filter(artist => {
-      const normalized = normalizeArtistName(artist.name);
-      return normalized !== 'various artists' && !artistImages.has(artist.name);
-    });
-
-    if (toFetch.length === 0) return;
-
-    // Fetch in batches of 10 to avoid overwhelming the API
-    const batchSize = 10;
-    for (let i = 0; i < toFetch.length; i += batchSize) {
-      const batch = toFetch.slice(i, i + batchSize);
-      const promises = batch.map(async (artist) => {
-        const name = artist.name;
-        try {
-          // Try Qobuz first
-          const results = await invoke<SearchResults<ArtistSearchResult>>('search_artists', {
-            query: name.trim(),
-            limit: 3,
-            offset: 0
-          });
-
-          if (results.items.length > 0) {
-            const normalizedQuery = normalizeArtistName(name);
-            const exactMatch = results.items.find(
-              item => normalizeArtistName(item.name) === normalizedQuery
-            );
-            const match = exactMatch ?? results.items[0];
-            const imageUrl = match.image?.large || match.image?.thumbnail || match.image?.small;
-            
-            if (imageUrl) {
-              // Cache in database
-              await invoke('library_cache_artist_image', {
-                artistName: name,
-                imageUrl,
-                source: 'qobuz'
-              });
-              artistImages.set(name, imageUrl);
-              return;
-            }
-          }
-
-          // Fallback to Discogs if Qobuz failed and Discogs is available
-          if (hasDiscogsCredentials) {
-            try {
-              const discogsResults = await invoke<any>('discogs_search_artist', {
-                query: name.trim()
-              });
-              
-              if (discogsResults && discogsResults.results && discogsResults.results.length > 0) {
-                const imageUrl = discogsResults.results[0].thumb || discogsResults.results[0].cover_image;
-                if (imageUrl && !imageUrl.includes('spacer.gif')) {
-                  // Cache in database
-                  await invoke('library_cache_artist_image', {
-                    artistName: name,
-                    imageUrl,
-                    source: 'discogs'
-                  });
-                  artistImages.set(name, imageUrl);
-                }
-              }
-            } catch (discogsErr) {
-              console.debug('Discogs fallback failed for artist:', name, discogsErr);
-            }
-          }
-        } catch (err) {
-          console.debug('Failed to fetch image for artist:', name, err);
-        }
-      });
-
-      await Promise.all(promises);
-      // Update state to trigger re-render
-      artistImages = new Map(artistImages);
-    }
-  }
-
-  /**
-   * Legacy function - kept for compatibility but now calls new implementation.
-   * @deprecated Use fetchMissingArtistImages() instead
-   */
-  async function fetchArtistImages(artistNames: string[]): Promise<void> {
-    await fetchMissingArtistImages();
-  }
-
-  /**
-   * Upload custom artist image
-   */
-  async function handleUploadArtistImage(artistName: string, event?: Event) {
-    event?.stopPropagation();
-    try {
-      const selected = await open({
-        multiple: false,
-        filters: [{
-          name: 'Image',
-          extensions: ['jpg', 'jpeg', 'png', 'webp']
-        }]
-      });
-
-      if (!selected) return;
-
-      const imagePath = Array.isArray(selected) ? selected[0] : selected;
-      
-      // Save to database
-      await invoke('library_set_custom_artist_image', {
-        artistName,
-        imagePath
-      });
-
-      // Update local state
-      const imageUrl = convertFileSrc(imagePath);
-      artistImages.set(artistName, imageUrl);
-      artistImages = new Map(artistImages);
-    } catch (err) {
-      console.error('Failed to upload custom artist image:', err);
-    }
-  }
-
-  function handleLocalAlbumLink(track: LocalTrack) {
-    if (!track.album_group_key) return;
-    const album = albums.find(item => item.id === track.album_group_key);
-    if (album) {
-      handleAlbumClick(album);
-    }
-  }
-
-  function groupTracks(items: LocalTrack[], mode: TrackGroupMode) {
-    const prefix = `track-${mode}`;
-    const sorted = [...items].sort((a, b) => {
-      if (mode === 'album') {
-        const albumCmp = a.album.localeCompare(b.album);
-        if (albumCmp !== 0) return albumCmp;
-        const artistCmp = a.artist.localeCompare(b.artist);
-        if (artistCmp !== 0) return artistCmp;
-        const aOrder = trackSortValue(a);
-        const bOrder = trackSortValue(b);
-        if (aOrder.disc !== bOrder.disc) return aOrder.disc - bOrder.disc;
-        if (aOrder.trackNumber !== bOrder.trackNumber) return aOrder.trackNumber - bOrder.trackNumber;
-        return a.title.localeCompare(b.title);
-      }
-      if (mode === 'artist') {
-        const artistCmp = a.artist.localeCompare(b.artist);
-        if (artistCmp !== 0) return artistCmp;
-        const albumCmp = a.album.localeCompare(b.album);
-        if (albumCmp !== 0) return albumCmp;
-        const aOrder = trackSortValue(a);
-        const bOrder = trackSortValue(b);
-        if (aOrder.disc !== bOrder.disc) return aOrder.disc - bOrder.disc;
-        if (aOrder.trackNumber !== bOrder.trackNumber) return aOrder.trackNumber - bOrder.trackNumber;
-        return a.title.localeCompare(b.title);
-      }
-      const titleCmp = a.title.localeCompare(b.title);
-      if (titleCmp !== 0) return titleCmp;
-      const artistCmp = a.artist.localeCompare(b.artist);
-      if (artistCmp !== 0) return artistCmp;
-      return a.album.localeCompare(b.album);
-    });
-
-    const groups = new Map<string, { title: string; subtitle?: string; tracks: LocalTrack[]; artists: Set<string> }>();
-    for (const track of sorted) {
-      if (mode === 'album') {
-        const title = track.album_group_title?.trim() || normalizeAlbumTitle(track.album);
-        const albumArtist = track.album_artist?.trim() || '';
-        const groupKey = track.album_group_key?.trim()
-          ? track.album_group_key
-          : albumArtist
-            ? `${title}|||${albumArtist}`
-            : title;
-        const entry = groups.get(groupKey);
-        if (!entry) {
-          groups.set(groupKey, {
-            title,
-            subtitle: albumArtist || undefined,
-            tracks: [track],
-            artists: new Set([track.artist || 'Unknown Artist'])
-          });
-        } else {
-          entry.tracks.push(track);
-          if (albumArtist && !entry.subtitle) {
-            entry.subtitle = albumArtist;
-          }
-          entry.artists.add(track.artist || 'Unknown Artist');
-        }
-      } else if (mode === 'artist') {
-        const key = track.artist || 'Unknown Artist';
-        if (!groups.has(key)) {
-          groups.set(key, { title: key, tracks: [], artists: new Set([key]) });
-        }
-        groups.get(key)?.tracks.push(track);
-      } else {
-        const key = alphaGroupKey(track.title);
-        if (!groups.has(key)) {
-          groups.set(key, { title: key, tracks: [], artists: new Set() });
-        }
-        groups.get(key)?.tracks.push(track);
-      }
-    }
-
-    const keys = [...groups.keys()].sort((a, b) => {
-      if (mode === 'name') {
-        if (a === '#') return -1;
-        if (b === '#') return 1;
-      }
-      if (mode === 'album') {
-        const titleCmp = (groups.get(a)?.title ?? a).localeCompare(groups.get(b)?.title ?? b);
-        if (titleCmp !== 0) return titleCmp;
-      }
-      return a.localeCompare(b);
-    });
-
-    return keys.map(key => ({
-      key,
-      id: groupIdForKey(prefix, key),
-      title: groups.get(key)?.title ?? key,
-      subtitle: (() => {
-        const entry = groups.get(key);
-        if (!entry) return undefined;
-        if (mode === 'album') {
-          if (entry.subtitle) return entry.subtitle;
-          const artists = [...entry.artists];
-          if (artists.length > 1) return 'Various Artists';
-          return artists[0];
-        }
-        return entry.subtitle;
-      })(),
-      tracks: groups.get(key)?.tracks ?? []
-    }));
-  }
-</script>
-
-<div class="library-view">
-  {#if selectedAlbum}
-    {@const albumSections = buildAlbumSections(albumTracks)}
-    {@const showDiscHeaders = albumSections.length > 1}
-    <!-- Album Detail View -->
-    <div class="album-detail">
-      <div class="nav-row">
-        <button class="back-btn" onclick={() => { clearLocalAlbum(); navGoBack(); }}>
-          <ArrowLeft size={16} />
-          <span>Back to Library</span>
-        </button>
-        <button class="edit-btn" onclick={openAlbumEditModal} title="Edit album">
-          <Edit3 size={16} />
-        </button>
-      </div>
-
-      <div class="album-header">
-        <div class="album-artwork">
-          {#if selectedAlbum.artwork_path}
-            <img src={getArtworkUrl(selectedAlbum.artwork_path)} alt={selectedAlbum.title} />
-          {:else}
-            <div class="artwork-placeholder">
-              <Disc3 size={64} />
-            </div>
-          {/if}
-        </div>
-        <div class="album-info">
-          <h1>{selectedAlbum.title}</h1>
-          {#if onQobuzArtistClick}
-            <button class="artist artist-link" type="button" onclick={() => handleLocalArtistClick(selectedAlbum?.artist)}>
-              {selectedAlbum.artist}
-            </button>
-          {:else}
-            <p class="artist">{selectedAlbum.artist}</p>
-          {/if}
-          <p class="meta">
-            {#if selectedAlbum.year}{selectedAlbum.year} &bull; {/if}
-            {selectedAlbum.track_count} tracks &bull;
-            {formatTotalDuration(selectedAlbum.total_duration_secs)}
-          </p>
-          {#if albumTracks.length > 0}
-            {@const firstTrack = albumTracks[0]}
-            <div class="audio-specs">
-              <span class="spec-badge" class:hires={isHiRes(firstTrack)}>
-                {firstTrack.format.toUpperCase()}
-              </span>
-              <span class="spec-item">{formatBitDepth(firstTrack.bit_depth)}</span>
-              <span class="spec-item">{formatSampleRate(firstTrack.sample_rate)}</span>
-              <span class="spec-item">{firstTrack.channels === 2 ? 'Stereo' : firstTrack.channels === 1 ? 'Mono' : `${firstTrack.channels}ch`}</span>
-            </div>
-          {/if}
-          <div class="album-actions">
-            <button class="play-btn" onclick={handlePlayAllAlbum}>
-              <Play size={16} fill="white" />
-              <span>Play All</span>
-            </button>
-            <button
-              class="secondary-btn"
-              onclick={handleSetAlbumArtwork}
-              disabled={updatingArtwork}
-              title="Set album artwork"
-            >
-              <Upload size={14} />
-              <span>{updatingArtwork ? 'Updating...' : 'Set Cover'}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="track-list">
-        {#each albumSections as section (section.disc)}
-          {#if showDiscHeaders}
-            <div class="disc-header">{section.label}</div>
-          {/if}
-          {#each section.tracks as track, index (track.id)}
-            <TrackRow
-              number={track.track_number ?? index + 1}
-              title={track.title}
-              artist={track.artist !== selectedAlbum?.artist ? track.artist : undefined}
-              duration={formatDuration(track.duration_secs)}
-              quality={getQualityBadge(track)}
-              hideDownload={true}
-              hideFavorite={true}
-              onArtistClick={track.artist && track.artist !== selectedAlbum?.artist
-                ? () => handleLocalArtistClick(track.artist)
-                : undefined}
-              onPlay={() => handleTrackPlay(track)}
-              menuActions={{
-                onPlayNow: () => handleTrackPlay(track),
-                onPlayNext: onTrackPlayNext ? () => onTrackPlayNext(track) : undefined,
-                onPlayLater: onTrackPlayLater ? () => onTrackPlayLater(track) : undefined,
-                onAddToPlaylist: onTrackAddToPlaylist ? () => onTrackAddToPlaylist(track.id) : undefined
-              }}
-            />
-          {/each}
-        {/each}
-      </div>
-    </div>
-  {:else}
-    <!-- Main Library View -->
-    <div class="header">
-      <div class="header-icon">
-        <HardDrive size={32} />
-      </div>
-      <div class="header-content">
-        <h1>Local Library</h1>
-        {#if stats}
-          <p class="subtitle">
-            {stats.album_count} albums &bull; {stats.track_count} tracks &bull;
-            {formatTotalDuration(stats.total_duration_secs)} &bull;
-            {formatFileSize(stats.total_size_bytes)}
-          </p>
-        {:else}
-          <p class="subtitle">Your local music collection</p>
-        {/if}
-      </div>
-      <div class="header-actions">
-        <button class="icon-btn" onclick={handleScan} disabled={scanning} title="Scan library">
-          <RefreshCw size={20} class={scanning ? 'spinning' : ''} />
-        </button>
-        <button class="icon-btn" onclick={() => (showSettings = !showSettings)} title="Library settings">
-          <Settings size={20} />
-        </button>
-      </div>
-    </div>
-
-    <!-- Scan Progress -->
-    {#if scanning && scanProgress}
-      <div class="scan-progress">
-        <div class="progress-bar">
-          <div
-            class="progress-fill"
-            style="width: {scanProgress.total_files > 0
-              ? (scanProgress.processed_files / scanProgress.total_files) * 100
-              : 0}%"
-          ></div>
-        </div>
-        <div class="progress-text">
-          <span>Scanning: {scanProgress.processed_files} / {scanProgress.total_files} files</span>
-          {#if scanProgress.current_file}
-            <span class="current-file">{scanProgress.current_file.split('/').pop()}</span>
-          {/if}
-          <button class="stop-scan-btn" onclick={handleStopScan} title="Stop scanning">
-            <X size={14} />
-            <span>Stop</span>
-          </button>
-        </div>
-      </div>
-    {/if}
-
-    <!-- Settings Panel -->
-    {#if showSettings}
-      <div class="settings-panel">
-        <div class="settings-header">
-          <h3>Library Folders</h3>
-          <div class="folder-actions">
-            <button class="icon-btn" onclick={handleAddFolder} title="Add folder">
-              <FolderPlus size={16} />
-            </button>
-            <button 
-              class="icon-btn" 
-              onclick={handleRemoveSelectedFolders} 
-              disabled={selectedFolders.size === 0}
-              title="Remove selected folders"
-            >
-              <Trash2 size={16} />
-            </button>
-          </div>
-        </div>
-
-        {#if folders.length === 0}
-          <div class="no-folders">
-            <p>No folders added yet. Add a folder to start building your library.</p>
-          </div>
-        {:else}
-          <div class="folder-table">
-            {#each folders as folder}
-              <div class="folder-row" class:selected={selectedFolders.has(folder)}>
-                <label class="folder-checkbox">
-                  <input
-                    type="checkbox"
-                    checked={selectedFolders.has(folder)}
-                    onchange={() => toggleFolderSelection(folder)}
-                  />
-                </label>
-                <span class="folder-path">{folder}</span>
-              </div>
-            {/each}
-          </div>
-        {/if}
-
-        <div class="settings-actions">
-          <button class="secondary-btn" onclick={toggleHiddenAlbumsView}>
-            <span>{showHiddenAlbums ? 'Show Active Albums' : 'View Hidden Albums'}</span>
-            {#if hiddenAlbums.length > 0}
-              <span class="count">({hiddenAlbums.length})</span>
-            {/if}
-          </button>
-          {#if hasDiscogsCredentials}
-            <button
-              class="secondary-btn"
-              onclick={handleFetchMissingArtwork}
-              disabled={fetchingArtwork}
-            >
-              <ImageDown size={14} class={fetchingArtwork ? 'spinning' : ''} />
-              <span>{fetchingArtwork ? 'Fetching...' : 'Fetch Missing Artwork'}</span>
-            </button>
-          {:else}
-            <div class="discogs-hint">
-              <span>Configure Discogs API for automatic artwork fetching</span>
-            </div>
-          {/if}
-        </div>
-
-        <div class="danger-zone">
-          <div class="danger-zone-label">Danger Zone</div>
-          <button class="danger-btn-small" onclick={handleClearLibrary}>
-            <Trash2 size={12} />
-            <span>Clear Library Database</span>
-          </button>
-        </div>
-      </div>
-    {/if}
-
-    <!-- Tabs -->
-    <div class="tabs">
-      <button
-        class="tab"
-        class:active={activeTab === 'albums'}
-        onclick={() => handleTabChange('albums')}
-      >
-        <Disc3 size={16} />
-        <span>Albums</span>
-        {#if stats}<span class="count">({stats.album_count})</span>{/if}
-      </button>
-      <button
-        class="tab"
-        class:active={activeTab === 'artists'}
-        onclick={() => handleTabChange('artists')}
-      >
-        <Mic2 size={16} />
-        <span>Artists</span>
-        {#if stats}<span class="count">({stats.artist_count})</span>{/if}
-      </button>
-      <button
-        class="tab"
-        class:active={activeTab === 'tracks'}
-        onclick={() => handleTabChange('tracks')}
-      >
-        <Music size={16} />
-        <span>Tracks</span>
-        {#if stats}<span class="count">({stats.track_count})</span>{/if}
-      </button>
-    </div>
-
-    <!-- Content -->
-    <div class="content">
-      {#if loading}
-        <div class="loading">
-          <div class="spinner"></div>
-          <p>Loading library...</p>
-        </div>
-      {:else if error}
-        <div class="error">
-          <AlertCircle size={48} />
-          <p>Failed to load library</p>
-          <p class="error-detail">{error}</p>
-          <button class="retry-btn" onclick={loadLibraryData}>Retry</button>
-        </div>
-      {:else if activeTab === 'albums'}
-        {#if showHiddenAlbums}
-          <!-- Hidden Albums View -->
-          <div class="albums-section">
-            <div class="section-header">
-              <h3>Hidden Albums ({hiddenAlbums.length})</h3>
-              <button class="secondary-btn" onclick={toggleHiddenAlbumsView}>
-                <span>Back to Active Albums</span>
-              </button>
-            </div>
-            {#if hiddenAlbums.length === 0}
-              <div class="empty-state">
-                <Disc3 size={64} />
-                <p>No hidden albums</p>
-              </div>
-            {:else}
-              <div class="album-list">
-                {#each hiddenAlbums as album (album.id)}
-                  <div class="album-row" role="button" tabindex="0">
-                    <div class="album-row-art" onclick={() => handleAlbumClick(album)}>
-                      {#if album.artwork_path}
-                        <img src={getArtworkUrl(album.artwork_path)} alt={album.title} loading="lazy" decoding="async" />
-                      {:else}
-                        <div class="artwork-placeholder">
-                          <Disc3 size={28} />
-                        </div>
-                      {/if}
-                    </div>
-                    <div class="album-row-info" onclick={() => handleAlbumClick(album)}>
-                      <div class="album-row-title">{album.title}</div>
-                      <div class="album-row-artist">{album.artist}</div>
-                      <div class="album-row-meta">
-                        {#if album.year}<span>{album.year}</span><span class="separator">•</span>{/if}
-                        <span>{album.track_count} tracks</span>
-                        <span class="separator">•</span>
-                        <span>{formatTotalDuration(album.total_duration_secs)}</span>
-                        <span class="separator">•</span>
-                        <span class="quality-badge" class:hires={isAlbumHiRes(album)}>{getAlbumQualityBadge(album)}</span>
-                      </div>
-                    </div>
-                    <button class="show-album-btn" onclick={() => handleShowAlbum(album)} title="Show album">
-                      <span>Show</span>
-                    </button>
-                  </div>
-                {/each}
-              </div>
-            {/if}
-          </div>
-        {:else}
-          <!-- Active Albums View -->
-        {#if albums.length === 0}
-          <div class="empty">
-            <Disc3 size={48} />
-            <p>No albums in library</p>
-            <p class="empty-hint">Add folders and scan to build your library</p>
-          </div>
-        {:else}
-          {@const filteredAlbums = albumSearch.trim()
-            ? albums.filter(album => matchesAlbumSearch(album, albumSearch))
-            : albums}
-
-          <div class="album-controls">
-            <div class="search-container">
-              <Search size={16} class="search-icon" />
-              <input
-                type="text"
-                placeholder="Search albums or artists..."
-                bind:value={albumSearch}
-                class="search-input"
-              />
-              {#if albumSearch}
-                <button class="clear-search" onclick={() => (albumSearch = '')}>
-                  <X size={14} />
-                </button>
-              {/if}
-            </div>
-
-            <div class="dropdown-container">
-              <button
-                class="control-btn"
-                onclick={() => (showGroupMenu = !showGroupMenu)}
-                title="Group albums"
-              >
-                <span>{!albumGroupingEnabled
-                  ? 'Group: Off'
-                  : albumGroupMode === 'alpha'
-                    ? 'Group: A-Z'
-                    : 'Group: Artist'}</span>
-              </button>
-              {#if showGroupMenu}
-                <div class="dropdown-menu">
-                  <button
-                    class="dropdown-item"
-                    class:selected={!albumGroupingEnabled}
-                    onclick={() => { albumGroupingEnabled = false; showGroupMenu = false; }}
-                  >
-                    Off
-                  </button>
-                  <button
-                    class="dropdown-item"
-                    class:selected={albumGroupingEnabled && albumGroupMode === 'alpha'}
-                    onclick={() => { albumGroupMode = 'alpha'; albumGroupingEnabled = true; showGroupMenu = false; }}
-                  >
-                    Alphabetical (A-Z)
-                  </button>
-                  <button
-                    class="dropdown-item"
-                    class:selected={albumGroupingEnabled && albumGroupMode === 'artist'}
-                    onclick={() => { albumGroupMode = 'artist'; albumGroupingEnabled = true; showGroupMenu = false; }}
-                  >
-                    Artist
-                  </button>
-                </div>
-              {/if}
-            </div>
-
-            <button
-              class="control-btn icon-only"
-              onclick={() => (albumViewMode = albumViewMode === 'list' ? 'grid' : 'list')}
-              title={albumViewMode === 'list' ? 'Grid view' : 'List view'}
-            >
-              {#if albumViewMode === 'list'}
-                <LayoutGrid size={16} />
-              {:else}
-                <List size={16} />
-              {/if}
-            </button>
-
-            <span class="album-count">{filteredAlbums.length} albums</span>
-          </div>
-
-          {#if filteredAlbums.length === 0}
-            <div class="empty">
-              <Disc3 size={48} />
-              <p>No albums match your search</p>
-              <p class="empty-hint">Try a different artist or album name</p>
-            </div>
-          {:else}
-          {@const groupedAlbums = albumGroupingEnabled ? groupAlbums(filteredAlbums, albumGroupMode) : [{ key: '', id: 'ungrouped', albums: filteredAlbums }]}
-          {@const alphaGroups = albumGroupingEnabled && albumGroupMode === 'alpha'
-            ? new Set(groupedAlbums.map(group => group.key))
-            : new Set<string>()}
-
-            <div class="album-sections">
-              <div class="album-group-list">
-                {#each groupedAlbums as group (group.id)}
-                  <div class="album-group" id={group.id}>
-                    {#if albumGroupingEnabled}
-                    <div class="album-group-header">
-                      <span class="album-group-title">{group.key}</span>
-                      <span class="album-group-count">{group.albums.length}</span>
-                    </div>
-                    {/if}
-                    {#if albumViewMode === 'grid'}
-                      <div class="album-grid">
-                        {#each group.albums as album (album.id)}
-                          <AlbumCard
-                            artwork={getArtworkUrl(album.artwork_path)}
-                            title={album.title}
-                            artist={album.artist}
-                            quality={getAlbumQualityBadge(album)}
-                            showFavorite={true}
-                            favoriteEnabled={false}
-                            onPlay={() => handleAlbumPlayFromGrid(album)}
-                            onPlayNext={() => handleAlbumQueueNextFromGrid(album)}
-                            onPlayLater={() => handleAlbumQueueLaterFromGrid(album)}
-                            onclick={() => handleAlbumClick(album)}
-                          />
-                        {/each}
-                      </div>
-                    {:else}
-                      <div class="album-list">
-                        {#each group.albums as album (album.id)}
-                          <div class="album-row" role="button" tabindex="0" onclick={() => handleAlbumClick(album)}>
-                            <div class="album-row-art">
-                              {#if album.artwork_path}
-                                <img src={getArtworkUrl(album.artwork_path)} alt={album.title} loading="lazy" decoding="async" />
-                              {:else}
-                                <div class="artwork-placeholder">
-                                  <Disc3 size={28} />
-                                </div>
-                              {/if}
-                            </div>
-                            <div class="album-row-info">
-                              <div class="album-row-title truncate">{album.title}</div>
-                              <div class="album-row-meta">
-                                <span>{album.artist}</span>
-                                {#if album.year}<span>{album.year}</span>{/if}
-                                <span>{album.track_count} tracks</span>
-                                <span>{formatTotalDuration(album.total_duration_secs)}</span>
-                              </div>
-                            </div>
-                            <div class="album-row-quality">
-                              <span class="quality-badge" class:hires={isAlbumHiRes(album)}>
-                                {getAlbumQualityBadge(album)}
-                              </span>
-                            </div>
-                          </div>
-                        {/each}
-                      </div>
-                    {/if}
-                  </div>
-                {/each}
-              </div>
-
-              {#if albumGroupingEnabled && albumGroupMode === 'alpha'}
-                <div class="alpha-index">
-                  {#each alphaIndexLetters as letter}
-                    <button
-                      class="alpha-letter"
-                      class:disabled={!alphaGroups.has(letter)}
-                      onclick={() => scrollToGroup('album-alpha', letter, alphaGroups)}
-                    >
-                      {letter}
-                    </button>
-                  {/each}
-                </div>
-              {/if}
-            </div>
-          {/if}
-        {/if}
-        {/if}
-      {:else if activeTab === 'artists'}
-        {#if artists.length === 0}
-          <div class="empty">
-            <Mic2 size={48} />
-            <p>No artists in library</p>
-          </div>
-        {:else}
-          {@const filteredArtists = artists.filter(artist => matchesArtistSearch(artist, artistSearch))}
-          <div class="artist-controls">
-            <div class="search-container">
-              <Search size={16} class="search-icon" />
-              <input
-                type="text"
-                placeholder="Search artists..."
-                bind:value={artistSearch}
-                class="search-input"
-              />
-              {#if artistSearch}
-                <button class="clear-search" onclick={() => (artistSearch = '')}>
-                  <X size={14} />
-                </button>
-              {/if}
-            </div>
-            <span class="album-count">{filteredArtists.length} artists</span>
-          </div>
-
-          {#if filteredArtists.length === 0}
-            <div class="empty">
-              <Mic2 size={48} />
-              <p>No artists match your search</p>
-            </div>
-          {:else}
-            <div class="artist-grid">
-              {#each filteredArtists as artist (artist.name)}
-                {@const artistImage = artistImages.get(artist.name)}
-                <div
-                  class="artist-card"
-                  role="button"
-                  tabindex="0"
-                  onclick={() => handleLocalArtistClick(artist.name)}
-                  onkeydown={(event) => event.key === 'Enter' && handleLocalArtistClick(artist.name)}
-                >
-                  <div class="artist-icon" class:has-image={!!artistImage}>
-                    {#if artistImage}
-                      <img src={artistImage} alt={artist.name} class="artist-image" loading="lazy" />
-                    {:else}
-                      <Mic2 size={32} />
-                    {/if}
-                  </div>
-                  {#if showSettings}
-                    <button
-                      class="artist-image-btn"
-                      onclick={(e) => handleUploadArtistImage(artist.name, e)}
-                      title="Upload custom image"
-                    >
-                      <Upload size={14} />
-                    </button>
-                  {/if}
-                  <div class="artist-name">{artist.name}</div>
-                  <div class="artist-stats">
-                    {artist.album_count} albums &bull; {artist.track_count} tracks
-                  </div>
-                </div>
-              {/each}
-            </div>
-          {/if}
-        {/if}
-      {:else if activeTab === 'tracks'}
-        {#if tracks.length === 0}
-          <div class="empty">
-            <Music size={48} />
-            <p>No tracks in library</p>
-          </div>
-        {:else}
-          <div class="track-controls">
-            <div class="search-container">
-              <Search size={16} class="search-icon" />
-              <input
-                type="text"
-                placeholder="Search tracks, albums, artists..."
-                bind:value={trackSearch}
-                oninput={scheduleTrackSearch}
-                class="search-input"
-              />
-              {#if trackSearch}
-                <button class="clear-search" onclick={() => { trackSearch = ''; loadTracks(''); }}>
-                  <X size={14} />
-                </button>
-              {/if}
-            </div>
-
-            <div class="dropdown-container">
-              <button
-                class="control-btn"
-                onclick={() => (showTrackGroupMenu = !showTrackGroupMenu)}
-                title="Group tracks"
-              >
-                <span>
-                  {!trackGroupingEnabled
-                    ? 'Group: Off'
-                    : trackGroupMode === 'album'
-                      ? 'Group: Album'
-                      : trackGroupMode === 'artist'
-                        ? 'Group: Artist'
-                        : 'Group: Name'}
-                </span>
-              </button>
-              {#if showTrackGroupMenu}
-                <div class="dropdown-menu">
-                  <button
-                    class="dropdown-item"
-                    class:selected={!trackGroupingEnabled}
-                    onclick={() => { trackGroupingEnabled = false; showTrackGroupMenu = false; }}
-                  >
-                    Off
-                  </button>
-                  <button
-                    class="dropdown-item"
-                    class:selected={trackGroupingEnabled && trackGroupMode === 'album'}
-                    onclick={() => { trackGroupMode = 'album'; trackGroupingEnabled = true; showTrackGroupMenu = false; }}
-                  >
-                    Album
-                  </button>
-                  <button
-                    class="dropdown-item"
-                    class:selected={trackGroupingEnabled && trackGroupMode === 'artist'}
-                    onclick={() => { trackGroupMode = 'artist'; trackGroupingEnabled = true; showTrackGroupMenu = false; }}
-                  >
-                    Artist
-                  </button>
-                  <button
-                    class="dropdown-item"
-                    class:selected={trackGroupingEnabled && trackGroupMode === 'name'}
-                    onclick={() => { trackGroupMode = 'name'; trackGroupingEnabled = true; showTrackGroupMenu = false; }}
-                  >
-                    Name (A-Z)
-                  </button>
-                </div>
-              {/if}
-            </div>
-
-            <span class="album-count">{tracks.length} tracks</span>
-          </div>
-
-          {@const groupedTracks = trackGroupingEnabled ? groupTracks(tracks, trackGroupMode) : [{ id: 'ungrouped', title: '', subtitle: '', tracks, key: '' }]}
-          {@const trackIndexTargets = trackGroupingEnabled && trackGroupMode === 'artist'
-            ? (() => {
-                const map = new Map<string, string>();
-                for (const group of groupedTracks) {
-                  const letter = alphaGroupKey(group.title);
-                  if (!map.has(letter)) {
-                    map.set(letter, group.id);
-                  }
-                }
-                return map;
-              })()
-            : new Map<string, string>()}
-          {@const trackAlphaGroups = trackGroupingEnabled && trackGroupMode === 'name'
-            ? new Set(groupedTracks.map(group => group.key))
-            : trackGroupingEnabled && trackGroupMode === 'artist'
-              ? new Set(trackIndexTargets.keys())
-              : new Set<string>()}
-
-          <div class="track-sections">
-            <div class="track-group-list">
-              {#each groupedTracks as group (group.id)}
-                <div class="track-group" id={group.id}>
-                  {#if trackGroupingEnabled}
-                  <div class="track-group-header">
-                    <div class="track-group-title">{group.title}</div>
-                    {#if group.subtitle}
-                      <div class="track-group-subtitle">{group.subtitle}</div>
-                    {/if}
-                    <div class="track-group-count">{group.tracks.length} tracks</div>
-                  </div>
-                  {/if}
-
-                  <div class="track-list">
-                    {#if trackGroupingEnabled && trackGroupMode === 'album'}
-                      {@const trackSections = buildAlbumSections(group.tracks)}
-                      {@const showTrackDiscHeaders = trackSections.length > 1}
-                      {#each trackSections as section (section.disc)}
-                        {#if showTrackDiscHeaders}
-                          <div class="disc-header">{section.label}</div>
-                        {/if}
-                        {#each section.tracks as track, index (track.id)}
-                          <TrackRow
-                            number={track.track_number ?? index + 1}
-                            title={track.title}
-                            artist={track.artist}
-                            duration={formatDuration(track.duration_secs)}
-                            quality={getQualityBadge(track)}
-                            hideDownload={true}
-                            hideFavorite={true}
-                            onArtistClick={track.artist ? () => handleLocalArtistClick(track.artist) : undefined}
-                            onAlbumClick={track.album_group_key ? () => handleLocalAlbumLink(track) : undefined}
-                            onPlay={() => handleTrackPlay(track)}
-                            menuActions={{
-                              onPlayNow: () => handleTrackPlay(track),
-                              onPlayNext: onTrackPlayNext ? () => onTrackPlayNext(track) : undefined,
-                              onPlayLater: onTrackPlayLater ? () => onTrackPlayLater(track) : undefined,
-                              onAddToPlaylist: onTrackAddToPlaylist ? () => onTrackAddToPlaylist(track.id) : undefined
-                            }}
-                          />
-                        {/each}
-                      {/each}
-                    {:else}
-                      {#each group.tracks as track, index (track.id)}
-                        <TrackRow
-                          number={track.track_number ?? index + 1}
-                          title={track.title}
-                          artist={track.artist}
-                          duration={formatDuration(track.duration_secs)}
-                          quality={getQualityBadge(track)}
-                          hideDownload={true}
-                          hideFavorite={true}
-                          onArtistClick={track.artist ? () => handleLocalArtistClick(track.artist) : undefined}
-                          onAlbumClick={track.album_group_key ? () => handleLocalAlbumLink(track) : undefined}
-                          onPlay={() => handleTrackPlay(track)}
-                          menuActions={{
-                            onPlayNow: () => handleTrackPlay(track),
-                            onPlayNext: onTrackPlayNext ? () => onTrackPlayNext(track) : undefined,
-                            onPlayLater: onTrackPlayLater ? () => onTrackPlayLater(track) : undefined,
-                            onAddToPlaylist: onTrackAddToPlaylist ? () => onTrackAddToPlaylist(track.id) : undefined
-                          }}
-                        />
-                      {/each}
-                    {/if}
-                  </div>
-                </div>
-              {/each}
-            </div>
-
-            {#if trackGroupingEnabled && (trackGroupMode === 'name' || trackGroupMode === 'artist')}
-              <div class="alpha-index">
-                {#each alphaIndexLetters as letter}
-                  <button
-                    class="alpha-letter"
-                    class:disabled={!trackAlphaGroups.has(letter)}
-                    onclick={() => trackGroupMode === 'artist'
-                      ? scrollToGroupId(trackIndexTargets.get(letter))
-                      : scrollToGroup(`track-${trackGroupMode}`, letter, trackAlphaGroups)}
-                  >
-                    {letter}
-                  </button>
-                {/each}
-              </div>
-            {/if}
-          </div>
-        {/if}
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<!-- Album Edit Modal -->
-{#if showAlbumEditModal && selectedAlbum}
-  <div class="modal-overlay" onclick={() => showAlbumEditModal = false}>
-    <div class="modal" onclick={(e: MouseEvent) => e.stopPropagation()}>
-      <div class="modal-header">
-        <h2>Edit Album</h2>
-        <button class="close-btn" onclick={() => showAlbumEditModal = false}>
-          <X size={20} />
-        </button>
-      </div>
-      
-      <div class="modal-body">
-        <div class="form-group">
-          <label for="album-title">Album Title</label>
-          <input
-            id="album-title"
-            type="text"
-            bind:value={editingAlbumTitle}
-            placeholder="Album title"
-            readonly
-            disabled
-          />
-          <p class="form-hint">Album title editing coming soon</p>
-        </div>
-
-        <div class="form-group">
-          <label class="toggle-label">
-            <input
-              type="checkbox"
-              bind:checked={editingAlbumHidden}
-            />
-            <span>Hide this album from library</span>
-          </label>
-          <p class="form-hint">Hidden albums can be viewed from Settings</p>
-        </div>
-      </div>
-
-      <div class="modal-footer">
-        <button class="secondary-btn" onclick={() => showAlbumEditModal = false}>
-          Cancel
-        </button>
-        <button class="primary-btn" onclick={saveAlbumEdit}>
-          Save
-        </button>
-      </div>
-    </div>
-  </div>
-{/if}
-
-<style>
-  .library-view {
-    padding: 24px;
-    padding-right: 8px;
-    padding-bottom: 100px;
-    overflow-y: auto;
-    height: 100%;
-  }
-
-  /* Custom scrollbar */
-  .library-view::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  .library-view::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .library-view::-webkit-scrollbar-thumb {
-    background: var(--bg-tertiary);
-    border-radius: 3px;
-  }
-
-  .library-view::-webkit-scrollbar-thumb:hover {
-    background: var(--text-muted);
-  }
-
-  /* Header */
-  .header {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    margin-bottom: 24px;
-  }
-
-  .header-icon {
-    width: 80px;
-    height: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, var(--accent-primary) 0%, #64b5f6 100%);
-    border-radius: 16px;
-    color: white;
-  }
-
-  .header-content {
-    flex: 1;
-  }
-
-  .header-content h1 {
-    font-size: 24px;
-    font-weight: 700;
-    color: var(--text-primary);
-    margin: 0 0 4px 0;
-  }
-
-  .subtitle {
-    font-size: 14px;
-    color: var(--text-muted);
-    margin: 0;
-  }
-
-  .header-actions {
-    display: flex;
-    gap: 8px;
-  }
-
-  .icon-btn {
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg-tertiary);
-    border: none;
-    border-radius: 8px;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .icon-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .icon-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  :global(.spinning) {
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-
-  /* Scan Progress */
-  .scan-progress {
-    background: var(--bg-secondary);
-    border-radius: 8px;
-    padding: 16px;
-    margin-bottom: 24px;
-  }
-
-  .progress-bar {
-    height: 4px;
-    background: var(--bg-tertiary);
-    border-radius: 2px;
-    overflow: hidden;
-    margin-bottom: 8px;
-  }
-
-  .progress-fill {
-    height: 100%;
-    background: var(--accent-primary);
-    transition: width 300ms ease;
-  }
-
-  .progress-text {
-    display: flex;
-    justify-content: space-between;
-    font-size: 13px;
-    color: var(--text-muted);
-  }
-
-  .current-file {
-    max-width: 300px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .stop-scan-btn {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 4px 10px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-subtle);
-    border-radius: 6px;
-    color: var(--text-secondary);
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .stop-scan-btn:hover {
-    background: var(--error);
-    border-color: var(--error);
-    color: white;
-  }
-
-  /* Settings Panel */
-  .settings-panel {
-    background: var(--bg-secondary);
-    border-radius: 12px;
-    padding: 20px;
-    margin-bottom: 24px;
-  }
-
-  .settings-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-  }
-
-  .settings-header h3 {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin: 0;
-  }
-
-  .no-folders {
-    padding: 24px;
-    text-align: center;
-    color: var(--text-muted);
-    font-size: 14px;
-    background: var(--bg-tertiary);
-    border-radius: 8px;
-  }
-
-  .folder-table {
-    max-height: 150px;
-    overflow-y: auto;
-    border: 1px solid var(--bg-tertiary);
-    border-radius: 8px;
-    background: var(--bg-secondary);
-  }
-
-  .folder-table::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  .folder-table::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .folder-table::-webkit-scrollbar-thumb {
-    background: var(--bg-tertiary);
-    border-radius: 3px;
-  }
-
-  .folder-table::-webkit-scrollbar-thumb:hover {
-    background: var(--text-muted);
-  }
-
-  .folder-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--bg-tertiary);
-    transition: background 150ms ease;
-    cursor: pointer;
-    min-height: 36px;
-  }
-
-  .folder-row:last-child {
-    border-bottom: none;
-  }
-
-  .folder-row:hover {
-    background: var(--bg-tertiary);
-  }
-
-  .folder-row.selected {
-    background: rgba(59, 130, 246, 0.15);
-  }
-
-  .folder-row.selected:hover {
-    background: rgba(59, 130, 246, 0.2);
-  }
-
-  .folder-checkbox {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin: 0;
-  }
-
-  .folder-checkbox input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    accent-color: var(--accent-primary);
-    cursor: pointer;
-    margin: 0;
-  }
-
-  .folder-path {
-    flex: 1;
-    font-size: 13px;
-    color: var(--text-primary);
-    font-family: var(--font-mono, 'Courier New', monospace);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .folder-actions {
-    display: flex;
-    gap: 8px;
-  }
-
-  .no-folders {
-    padding: 24px;
-    text-align: center;
-    color: var(--text-muted);
-    font-size: 14px;
-  }
-
-  .folder-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .folder-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    background: var(--bg-tertiary);
-    border-radius: 8px;
-  }
-
-  .folder-path {
-    font-size: 13px;
-    color: var(--text-primary);
-    font-family: var(--font-mono);
-  }
-
-  .settings-actions {
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid var(--bg-tertiary);
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    align-items: center;
-  }
-
-  .secondary-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-subtle);
-    border-radius: 8px;
-    font-size: 13px;
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .secondary-btn:hover:not(:disabled) {
-    background: var(--bg-hover);
-    border-color: var(--text-muted);
-  }
-
-  .secondary-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .discogs-hint {
-    font-size: 12px;
-    color: var(--text-muted);
-    padding: 8px 12px;
-    background: var(--bg-tertiary);
-    border-radius: 6px;
-    flex: 1;
-  }
-
-  .danger-zone {
-    margin-top: 24px;
-    padding-top: 20px;
-    border-top: 2px solid var(--bg-tertiary);
-  }
-
-  .danger-zone-label {
-    font-size: 12px;
-    font-weight: 600;
-    color: #ef4444;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 12px;
-  }
-
-  .danger-btn-small {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: transparent;
-    color: #ef4444;
-    border: 1px solid #ef4444;
-    border-radius: 6px;
-    font-size: 12px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .danger-btn-small:hover {
-    background: #ef4444;
-    color: white;
-  }
-
-  .danger-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    background: transparent;
-    color: #ef4444;
-    border: 1px solid #ef4444;
-    border-radius: 8px;
-    font-size: 13px;
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .danger-btn:hover {
-    background: #ef4444;
-    color: white;
-  }
-
-  /* Tabs */
-  .tabs {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 24px;
-    border-bottom: 1px solid var(--bg-tertiary);
-    padding-bottom: 16px;
-  }
-
-  .tab {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 20px;
-    background: none;
-    border: none;
-    border-radius: 8px;
-    color: var(--text-muted);
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .tab:hover {
-    color: var(--text-primary);
-    background-color: var(--bg-tertiary);
-  }
-
-  .tab.active {
-    color: var(--text-primary);
-    background-color: var(--bg-tertiary);
-  }
-
-  .tab .count {
-    font-size: 12px;
-    opacity: 0.7;
-  }
-
-  /* Album Controls */
-  .album-controls {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-  }
-
-  .artist-controls {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-  }
-
-  .search-container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-subtle);
-    border-radius: 8px;
-    padding: 8px 12px;
-    flex: 1;
-    max-width: 420px;
-  }
-
-  .search-icon {
-    color: var(--text-muted);
-  }
-
-  .search-input {
-    background: none;
-    border: none;
-    color: var(--text-primary);
-    font-size: 13px;
-    width: 100%;
-    outline: none;
-  }
-
-  .search-input::placeholder {
-    color: var(--text-muted);
-  }
-
-  .clear-search {
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    padding: 2px;
-  }
-
-  .clear-search:hover {
-    color: var(--text-primary);
-  }
-
-  .control-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-subtle);
-    border-radius: 8px;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .control-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .control-btn.icon-only {
-    width: 36px;
-    height: 36px;
-    justify-content: center;
-    padding: 0;
-  }
-
-  .album-count {
-    font-size: 12px;
-    color: var(--text-muted);
-    margin-left: auto;
-  }
-
-  .dropdown-container {
-    position: relative;
-  }
-
-  .dropdown-menu {
-    position: absolute;
-    top: calc(100% + 6px);
-    left: 0;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-subtle);
-    border-radius: 10px;
-    padding: 6px;
-    min-width: 180px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
-    z-index: 20;
-  }
-
-  .dropdown-item {
-    width: 100%;
-    text-align: left;
-    padding: 8px 10px;
-    background: none;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-primary);
-    font-size: 13px;
-    cursor: pointer;
-    transition: background 150ms ease;
-  }
-
-  .dropdown-item:hover {
-    background: var(--bg-tertiary);
-  }
-
-  .dropdown-item.selected {
-    background: var(--bg-tertiary);
-    font-weight: 600;
-  }
-
-  /* Content */
-  .content {
-    min-height: 200px;
-  }
-
-  .loading,
-  .error,
-  .empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 64px;
-    color: var(--text-muted);
-  }
-
-  .spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid var(--bg-tertiary);
-    border-top-color: var(--accent-primary);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  .error-detail {
-    font-size: 12px;
-    margin-top: 8px;
-  }
-
-  .retry-btn {
-    margin-top: 16px;
-    padding: 8px 24px;
-    background-color: var(--accent-primary);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-  }
-
-  .empty-hint {
-    font-size: 13px;
-    margin-top: 8px;
-  }
-
-  /* Album Grid */
-  .album-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 24px;
-  }
-
-  .album-sections {
-    display: flex;
-    gap: 12px;
-    align-items: flex-start;
-  }
-
-  .album-group-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-
-  .album-group {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .album-group-header {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-  }
-
-  .album-group-title {
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--text-primary);
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-  }
-
-  .album-group-count {
-    font-size: 12px;
-    color: var(--text-muted);
-  }
-
-  /* Album List */
-  .album-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .album-row {
-    display: grid;
-    grid-template-columns: 56px 1fr auto;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    background: var(--bg-secondary);
-    border-radius: 10px;
-    cursor: pointer;
-    transition: background 150ms ease;
-  }
-
-  .album-row:hover {
-    background: var(--bg-tertiary);
-  }
-
-  .album-row-art {
-    width: 52px;
-    height: 52px;
-    border-radius: 8px;
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  .album-row-art img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .album-row-info {
-    min-width: 0;
-  }
-
-  .album-row-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--text-primary);
-    margin-bottom: 4px;
-  }
-
-  .album-row-meta {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    font-size: 12px;
-    color: var(--text-muted);
-  }
-
-  .album-row-meta span + span::before {
-    content: "\2022";
-    margin: 0 8px;
-    color: var(--text-muted);
-  }
-
-  .album-row-quality {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .album-row-quality .quality-badge {
-    font-size: 11px;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.85);
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 6px;
-    padding: 3px 8px;
-  }
-
-  .album-row-quality .quality-badge.hires {
-    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-    color: white;
-    border-color: transparent;
-  }
-
-  /* Track Controls */
-  .track-controls {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-  }
-
-  .track-sections {
-    display: flex;
-    gap: 12px;
-    align-items: flex-start;
-  }
-
-  .track-group-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-
-  .track-group {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .track-group-header {
-    display: flex;
-    align-items: baseline;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .track-group-title {
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--text-primary);
-  }
-
-  .track-group-subtitle {
-    font-size: 12px;
-    color: var(--text-muted);
-  }
-
-  .track-group-count {
-    font-size: 12px;
-    color: var(--text-muted);
-  }
-
-  .alpha-index {
-    position: sticky;
-    top: 120px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 6px 4px;
-    border-radius: 10px;
-    background: rgba(0, 0, 0, 0.2);
-  }
-
-  .alpha-letter {
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    background: none;
-    border: none;
-    color: var(--text-primary);
-    font-size: 11px;
-    font-weight: 600;
-    cursor: pointer;
-    opacity: 0.9;
-  }
-
-  .alpha-letter:hover {
-    color: var(--accent-primary);
-  }
-
-  .alpha-letter.disabled {
-    opacity: 0.25;
-    cursor: default;
-    pointer-events: none;
-  }
-
-  /* Artist Grid */
-  .artist-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 24px;
-  }
-
-  .artist-card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
-    background: var(--bg-secondary);
-    border-radius: 12px;
-    cursor: pointer;
-    transition: background 150ms ease;
-  }
-
-  .artist-card:hover {
-    background: var(--bg-tertiary);
-  }
-
-  .artist-image-btn {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 6px;
-    color: var(--text-primary);
-    cursor: pointer;
-    transition: all 150ms ease;
-    z-index: 2;
-  }
-
-  .artist-image-btn:hover {
-    background: rgba(0, 0, 0, 0.8);
-    border-color: var(--accent-primary);
-    color: var(--accent-primary);
-  }
-
-  .artist-icon {
-    width: 100px;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg-tertiary);
-    border-radius: 50%;
-    margin-bottom: 12px;
-    color: var(--text-muted);
-    overflow: hidden;
-  }
-
-  .artist-icon.has-image {
-    background: none;
-  }
-
-  .artist-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .artist-name {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--text-primary);
-    text-align: center;
-    margin-bottom: 4px;
-  }
-
-  .artist-stats {
-    font-size: 12px;
-    color: var(--text-muted);
-    text-align: center;
-  }
-
-  /* Track List */
-  .track-list {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .disc-header {
-    margin-top: 16px;
-    margin-bottom: 8px;
-    font-size: 12px;
-    font-weight: 700;
-    color: var(--text-secondary);
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-  }
-
-  .track-list .disc-header:first-child {
-    margin-top: 0;
-  }
-
-  /* Album Detail */
-  .album-detail {
-    padding-bottom: 100px;
-  }
-
-  .back-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    font-size: 14px;
-    cursor: pointer;
-    margin-bottom: 24px;
-    transition: color 150ms ease;
-  }
-
-  .back-btn:hover {
-    color: var(--text-primary);
-  }
-
-  .album-header {
-    display: flex;
-    gap: 24px;
-    margin-bottom: 32px;
-  }
-
-  .album-artwork {
-    width: 200px;
-    height: 200px;
-    border-radius: 8px;
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  .album-artwork img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .artwork-placeholder {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
-    color: var(--text-muted);
-  }
-
-  .album-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-  }
-
-  .album-info h1 {
-    font-size: 24px;
-    font-weight: 700;
-    color: var(--text-primary);
-    margin: 0 0 8px 0;
-  }
-
-  .album-info .artist {
-    font-size: 16px;
-    color: var(--text-primary);
-    margin: 0 0 8px 0;
-  }
-
-  .album-info .artist-link {
-    background: none;
-    border: none;
-    padding: 0;
-    text-align: left;
-    cursor: pointer;
-  }
-
-  .album-info .artist-link:hover {
-    color: var(--text-primary);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-
-  .album-info .meta {
-    font-size: 14px;
-    color: var(--text-muted);
-    margin: 0 0 12px 0;
-  }
-
-  .audio-specs {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-  }
-
-  .spec-badge {
-    padding: 4px 10px;
-    background: var(--bg-tertiary);
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--text-primary);
-  }
-
-  .spec-badge.hires {
-    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-    color: white;
-  }
-
-  .spec-item {
-    font-size: 13px;
-    color: var(--text-secondary);
-    padding: 4px 8px;
-    background: var(--bg-secondary);
-    border-radius: 4px;
-  }
-
-  .album-actions {
-    display: flex;
-    gap: 12px;
-  }
-
-  .play-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 28px;
-    background: var(--accent-primary);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background 150ms ease;
-  }
-
-  .play-btn:hover {
-    background: var(--accent-hover);
-  }
-
-  /* Nav row for album detail */
-  .nav-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 24px;
-  }
-
-  .edit-btn {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    border-radius: 6px;
-    transition: all 150ms ease;
-  }
-
-  .edit-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-tertiary);
-  }
-
-  /* Modal */
-  .modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-  }
-
-  .modal {
-    width: 100%;
-    max-width: 440px;
-    max-height: 90vh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    background: var(--bg-secondary);
-    border-radius: 16px;
-    border: 1px solid var(--bg-tertiary);
-    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
-  }
-
-  .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 24px;
-    border-bottom: 1px solid var(--bg-tertiary);
-  }
-
-  .modal-header h2 {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin: 0;
-  }
-
-  .close-btn {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    border-radius: 6px;
-    transition: all 150ms ease;
-  }
-
-  .close-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-tertiary);
-  }
-
-  .modal-body {
-    padding: 24px;
-    overflow-y: auto;
-  }
-
-  .form-group {
-    margin-bottom: 20px;
-  }
-
-  .form-group label {
-    display: block;
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--text-secondary);
-    margin-bottom: 8px;
-  }
-
-  .form-group input[type="text"] {
-    width: 100%;
-    padding: 10px 12px;
-    background: var(--bg-secondary);
-    border: 1px solid var(--bg-tertiary);
-    border-radius: 8px;
-    font-size: 14px;
-    color: var(--text-primary);
-    transition: border-color 150ms ease;
-  }
-
-  .form-group input[type="text"]:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .form-group input[type="text"]:focus:not(:disabled) {
-    outline: none;
-    border-color: var(--accent-primary);
-  }
-
-  .toggle-label {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    cursor: pointer;
-  }
-
-  .toggle-label input[type="checkbox"] {
-    width: 18px;
-    height: 18px;
-    accent-color: var(--accent-primary);
-    cursor: pointer;
-  }
-
-  .toggle-label span {
-    font-size: 14px;
-    color: var(--text-primary);
-  }
-
-  .form-hint {
-    margin-top: 6px;
-    font-size: 12px;
-    color: var(--text-muted);
-  }
-
-  .modal-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-    padding: 16px 24px;
-    border-top: 1px solid var(--bg-tertiary);
-  }
-
-  .secondary-btn,
-  .primary-btn {
-    padding: 10px 20px;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .secondary-btn {
-    background: transparent;
-    border: 1px solid var(--text-muted);
-    color: var(--text-secondary);
-  }
-
-  .secondary-btn:hover {
-    border-color: var(--text-primary);
-    color: var(--text-primary);
-  }
-
-  .primary-btn {
-    background: var(--accent-primary);
-    border: none;
-    color: white;
-  }
-
-  .primary-btn:hover {
-    background: var(--accent-hover);
-  }
-</style>