feat: v1.13.0 — SVG Logo, Marquee, Player UX, Global Shortcuts fix

### Added - SVG logo with theme-adaptive gradient in sidebar (full wordmark + P-icon for collapsed state) - Player bar: song title/artist marquee scroll on overflow - Player bar: live volume percentage tooltip on slider hover ### Changed - Sidebar collapse button moved to right-edge hover tab - Player bar: fixed 320px track info width, increased waveform margins - Settings: Server tab opens by default - Crossfade: experimental badge removed (stable) - Help page: Lyrics/Keybindings/Font entries added, theme count corrected ### Fixed - Global shortcuts double-fire (Rust-side ShortcutMap idempotency fix) - W98 theme: comprehensive contrast fixes for navy hover backgrounds - Help page: removed orphaned translation key under Playback Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat: v1.12.0 — Lyrics, 15 new themes, Last.fm stable, Crossfade stable
2026-07-23 15:55:45 +00:00 · 2026-03-22 20:24:14 +01:00 · 2026-03-22 13:10:06 +01:00 · 2026-03-22 02:37:49 +01:00 · 2026-03-21 22:58:05 +01:00 · 2026-03-21 14:22:02 +01:00
63 changed files with 9787 additions and 1395 deletions
@@ -34,3 +34,9 @@ src-tauri/target/

 # Documentation
 CLAUDE.md
+
+# Claude Code memory (local only)
+memory/
+
+# Local scratchpad / notes (not committed)
+tmp/
@@ -5,6 +5,246 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## [1.13.0] - 2026-03-22
+
+### Added
+
+- **SVG Logo**: The Psysonic wordmark is now an inline SVG with a theme-adaptive gradient (`--accent` → `--ctp-blue`), matching the app's visual identity across all 47 themes. The collapsed sidebar shows a standalone P-icon with the same gradient.
+- **Player Bar — Marquee**: Song title and artist name scroll smoothly when the text overflows the fixed-width track info area, pause briefly, then jump back and repeat.
+- **Player Bar — Volume Tooltip**: A floating percentage label appears above the volume slider on hover and updates live while dragging.
+
+### Changed
+
+- **Sidebar — Collapse button**: Moved from the brand header to a small circular hover-tab on the right edge of the sidebar. Hidden until you hover over the sidebar, keeping the logo area uncluttered.
+- **Player Bar — Layout**: Track info area is now a fixed 320 px width. Waveform section has increased margins on both sides for better visual separation between controls, waveform, and volume.
+- **Settings**: Server tab is now the default when opening Settings.
+- **Crossfade**: Experimental badge removed — considered stable.
+- **Help page**: Added entries for Lyrics, Configurable Keybindings, and Font Picker. Theme count corrected to 47 themes across 7 groups.
+
+### Fixed
+
+- **Global shortcuts — double-fire**: Pressing a global shortcut (e.g. `Ctrl+Alt+→`) was triggering the action twice. Root cause: `on_shortcut()` in `tauri_plugin_global_shortcut` accumulates handlers per shortcut across JS HMR reloads. Fixed with a Rust-side `ShortcutMap` state that makes `register_global_shortcut` idempotent.
+- **W98 theme**: Comprehensive contrast fixes across all interactive elements — hover states, buttons, queue items, settings panels, and toggles now use silver-grey (`#e0e0e0`) text on navy (`#000080`) backgrounds.
+- **Help page**: Removed orphaned translation key that was rendering as raw text under the Playback section.
+
+### Beta
+
+- **Global Shortcuts** (Settings → Global Shortcuts): System-wide keyboard shortcuts that trigger playback actions while Psysonic is in the background. Functional on all platforms, but edge cases with certain key combinations or OS-level conflicts may still occur.
+
+---
+
+## [1.12.0] - 2026-03-22
+
+### Added
+
+- **Synchronized Lyrics**: Lyrics pane integrated into the Queue sidebar, powered by [LRCLIB](https://lrclib.net) — no API key required. Shows time-synced lyrics with auto-scroll and active-line highlighting; falls back to plain text when synced lyrics are unavailable. Access via the microphone icon in the player bar, fullscreen player, or Now Playing page.
+
+#### 15 New Themes
+
+**Games** (new group — 6 themes):
+- **Ascalon**: Dark stone fantasy inspired by Guild Wars 1. Near-black base, gold accent (`#d4af37`).
+- **Azerothian Gold**: World of Warcraft inspired. Charcoal base, warm gold accent (`#c19e67`).
+- **Grand Theft Audio**: GTA-inspired night city aesthetic. Pure black base, green accent (`#57b05a`).
+- **Lambda 17**: Half-Life inspired. Deep blue-black base, amber accent (`#ff9d00`).
+- **NightCity 2077**: Cyberpunk 2077 inspired. Near-total black base, neon yellow accent (`#FCEE0A`).
+- **V-Tactical**: Battlefield inspired. Gunmetal base, burnt orange accent (`#ff8a00`).
+
+**Series** (new group — 3 themes):
+- **A Theme of Ice and Fire**: Game of Thrones inspired. Cold dark navy base, ice blue accent (`#70a1ff`).
+- **D'oh-matic**: The Simpsons inspired. Cream/yellow light base, blue accent (`#1F75FE`).
+- **Heisenberg**: Breaking Bad inspired. Dark desaturated green base, crystal blue accent (`#3fe0ff`).
+
+**Movies** (2 additions):
+- **Imperial Sith**: Star Wars dark side. Pure black base, red accent (`#e60000`).
+- **Order of the Phoenix**: Harry Potter inspired. Deep charcoal base, ember-orange accent (`#e63900`).
+
+**Operating Systems** (1 addition):
+- **W98**: Windows 98 teal desktop aesthetic. Classic teal background, silver card, navy accent (`#000080`).
+
+### Changed
+
+- **Last.fm integration**: Promoted out of beta — scrobbling, Now Playing, love/unlove, Similar Artists, and top stats are considered stable.
+- **Crossfade**: No longer marked experimental. Stable on Windows and Linux; macOS under observation.
+- **Gapless playback**: Experimental badge removed — considered stable.
+- **Theme picker — groups reorganised**: Catppuccin, Nord, and Retro (Gruvbox) merged into a single **Open Source Classics** group. Streaming themes (Spotless, DZR, Cupertino Beats) moved into **Psysonic Themes — Mediaplayer**. The app now ships **47 themes** across **7 groups**.
+- **Tokyo Night themes removed**: `tokyo-night`, `tokyo-night-storm`, and `tokyo-night-light` retired to make room for the new groups.
+- **Settings — tab order**: Reordered to Server → Appearance → Playback → Library → Shortcuts → About.
+- **Settings — Theme picker**: "Betriebssysteme" group renamed to "Operating Systems".
+
+### Fixed
+
+- **Text selection on double-click**: Double-clicking song titles or anywhere in the UI no longer accidentally selects text. `user-select: none` applied globally; re-enabled for bio/description text areas.
+- **Middle Earth theme — star buttons**: Active favourite star in the album tracklist and album header was barely visible (gold on parchment, ~1.4:1 contrast). Both active and inactive states now use darker brown tones with proper contrast.
+- **Middle Earth theme — play button hover**: Hovering the primary play/pause button no longer makes the icon invisible (gold icon on gold background).
+
+## [1.11.0] - 2026-03-22
+
+### Added
+
+#### Five New Themes — Movies
+- **Middle Earth**: Warm parchment light theme. Cream/beige background, dark ebony player and sidebar, gold accent (`#d4af37`). Georgia serif for track names, subtle noise texture.
+- **Morpheus**: Pure black terminal aesthetic inspired by The Matrix. Phosphor green accent (`#00ff41`), monospace font.
+- **Pandora**: Deep bioluminescent navy inspired by Avatar. Cyan accent (`#00f2ff`), large radii, glow effects.
+- **Stark HUD**: Near-black tactical HUD inspired by Iron Man. Cyan accent, JetBrains Mono, uppercase track name.
+- **Blade**: Deep black with blood-red accent (`#b30000`). Sharp radii, uppercase track name.
+- All five themes in a new **Movies** group in the theme picker.
+
+### Changed
+
+- **Settings — tab order**: Reordered to Server → Appearance → Playback → Library → Shortcuts → About.
+- **Settings — Appearance**: Language selector moved to the top of the tab, above Theme and Font.
+- **Settings — Theme picker**: "Betriebssysteme" group renamed to "Operating Systems".
+- **Default font**: Changed from Inter to **Lexend** for new installations.
+- **Gapless playback**: Experimental badge removed — gapless is now considered stable.
+- **Now Playing — background**: Ken Burns animation (40 s, subtle scale + translate). Background blur increased to eliminate JPEG block artefacts at high blur values.
+- **Now Playing — Similar Artists**: Tag cloud redesigned into 2 rows with varied font sizes and vertical offsets for a natural look.
+- **Statistics**: "Now Playing" indicator rendered as a styled badge matching the app's badge style.
+
+## [1.10.0] - 2026-03-22
+
+### Added
+
+#### Three New Themes (Streaming Series)
+- **Spotless**: Flat dark theme inspired by modern music streaming. Pitch-black sidebar (`#000000`), dark-grey app background (`#121212`), Spotify-green accent (`#1ED760`). White play button, green hover on primary actions.
+- **DZR**: Flat light theme inspired by Deezer's modern redesign. White base, light-grey sidebar (`#F5F5F7`), purple accent (`#A238FF`). Crisp typography, large rounded radii.
+- **Cupertino Beats**: Apple Music-inspired dark theme. Near-black base (`#1c1c1e`), frosted-glass sidebar and player bar with heavy `backdrop-filter`, red accent (`#fa243c`). Active nav links styled with `accent-dim` background.
+- All three themes added to the **Psysonic Themes — Mediaplayer** group in the theme picker.
+
+### Fixed
+
+- **Favourite/Unfavourite toggle**: Right-clicking a song, album, or artist that is already starred now shows "Remove from Favourites" and calls `unstar()` correctly. Previously always showed "Add to Favourites" regardless of starred state.
+  - `Track` interface gained `starred?: string` — propagated via `songToTrack()` and all inline track-object construction sites.
+  - `starredOverrides: Record<string, boolean>` added to `playerStore` — updated immediately on star/unstar so the context menu and tracklist star icons reflect changes without a page reload.
+- **Home page — Artist Discovery**: Replaced card grid (which loaded artist images and caused performance issues) with lightweight pill-buttons — same `artist-ext-link` style as the "Similar Artists" section on artist pages. No image loading, instant render.
+- **Now Playing page**: Queue sidebar is no longer automatically hidden when entering the Now Playing page. It now behaves like all other pages and respects the user's current queue visibility setting.
+- **Random Mix filter panel**: Background now correctly uses `--bg-card` instead of the undefined `--bg-elevated` token, which caused the panel to render transparent in most themes.
+
+### Changed
+
+- **Home page layout**: Section order is now: Recently Added → Discover → Artist Discovery → Starred → Most Played.
+
+## [1.9.0] - 2026-03-21
+
+### Added
+
+#### Three New Themes
+- **Neon Drift**: Deep midnight-blue background (`#12132c`) with electric cyan accent (`#00f2ff`) — subtle synthwave/cyberpunk aesthetic. Glowing player track name, cyan-glow nav active state, neon-lit primary buttons, glowing range slider thumb.
+- **Cupertino Light**: macOS Ventura-inspired light theme. Clean white base, Apple-grey sidebar (`#f2f2f7`), Apple blue accent (`#0071e3`). Frosted-glass sidebar and player bar with `backdrop-filter: blur`. Solid blue pill nav active (white text, no left border).
+- **Cupertino Dark**: macOS Ventura-inspired dark theme. Space Grey base (`#1e1e1f`), dark frosted sidebar, vibrant blue accent (`#007aff`). Same pill nav active as Cupertino Light. Solid blue Play/Pause button with glow.
+
+#### New Theme Group: Betriebssysteme
+- OS-aesthetic themes are now consolidated into one group: **Cupertino Light**, **Cupertino Dark**, **Aero Glass**, **Luna Teal**.
+- **Psysonic Themes** and **Psysonic Themes — Mediaplayer** moved to the top of the theme picker.
+
+#### Configurable Keybindings
+- New `keybindingsStore` with 10 bindable actions: Play/Pause, Next, Previous, Volume Up/Down, Seek ±10 s, Toggle Queue, Fullscreen Player, Native Fullscreen.
+- Rebind any action in **Settings → Keybindings** — click the key badge, press any key, saved immediately to `localStorage`.
+- Defaults: `Space` = Play/Pause, `F11` = Native Fullscreen. All other actions unbound by default.
+
+#### Font Picker
+- 10 UI fonts selectable in **Settings → Appearance**: Inter, Outfit, DM Sans, Nunito, Rubik, Space Grotesk, Figtree, Manrope, Plus Jakarta Sans, Lexend.
+- Persisted in `localStorage` (`psysonic_font`), applied via `data-font` attribute on `<html>`.
+
+#### Home Page — Instant Play
+- **Album cards**: "Details" button replaced with a **Play** button — clicking plays the album immediately with a smooth 700 ms fade-out of the current track.
+- **Hero**: "Play Album" button now starts playback directly (with fade-out) instead of navigating to the album detail page.
+- Fade-out implemented via `playAlbum.ts` utility: fades volume to 0 over 700 ms, restores volume in the store (no Rust side-effect) before handing off to `playTrack`.
+
+#### Now Playing Page — Layout & Readability
+- **3-column hero layout**: album cover + info (left, `flex: 1`) — EQ bars (centre, fixed width) — tag cloud (right, `flex: 1`). EQ bars are now truly centred regardless of content length on either side.
+- **Background**: increased brightness from `0.25` to `0.55`, reduced overlay opacity from `0.55` to `0.38` — background art is now visible instead of near-black.
+- **Text contrast**: track times, card links (artist/album), and section title opacity all increased for better readability on the blurred background.
+
+### Changed
+
+#### Theme Renames — Trademark-Safe Names
+All media-player and OS-themed theme IDs and labels have been renamed to avoid potential trademark conflicts:
+
+| Old Name | New Name |
+|---|---|
+| Classic Winamp | WnAmp |
+| Musicmatch Jukebox | Navy Jukebox |
+| WMP8 Classic | Cobalt Media |
+| PowerDVD Classic | Onyx Cinema |
+| Win7 Aero | Aero Glass |
+| WinXP Luna | Luna Teal |
+
+> **Note**: If you had one of these themes selected, your preference will reset to Mocha on first launch. Re-select your preferred theme in Settings.
+
+### Fixed
+
+- **Linux — ALSA underruns**: `PIPEWIRE_LATENCY` (`4096/48000` ≈ 85 ms) and `PULSE_LATENCY_MSEC` (`85`) are now set before audio stream creation, reducing the frequency of ALSA `snd_pcm_recover` underrun events on PipeWire systems. Existing user-set values are respected.
+
+---
+
+## [1.8.0] - 2026-03-21
+
+### Added
+
+#### Three New Themes
+- **Poison**: Dark charcoal background (`#1a1a1a`) with phosphor green (`#1bd655`) accent — high-contrast, industrial aesthetic. LCD glow text-shadow on the now-playing track name.
+- **Nucleo**: Warm brass/cream light theme inspired by vintage hi-fi equipment. Warm white cards, gold/amber accents, brushed-metal bevel buttons, and a warm LCD glow on the player track name. `color-scheme: light`.
+- **Classic Winamp**: Cool gray-blue dark theme (`#2b2b3a`) channelling the classic Winamp 2.x skin. Yellow primary accent (`#d4cc46`), orange volume slider override (`--volume-accent: #de9b35`), Courier New monospace font with bright-green LCD glow for the track name.
+
+#### Psychowave Theme — Major Overhaul
+- Psychowave recoloured from loud neon pink/purple to a refined deep violet palette: background `#161428`, accent `#a06ae0`. All neon colours replaced with muted, tasteful variants. No longer marked as WIP.
+
+#### ThemePicker Redesign
+- Themes reorganised into semantic groups: **Catppuccin**, **Nord**, **Retro** (formerly Gruvbox), **Tokyo Night**, and a new **Psysonic Themes** section (Classic Winamp, Poison, Nucleo, Psychowave). The separate *Experimental* group is removed.
+- "Gruvbox" renamed to **Retro**.
+
+#### Image Lightbox
+- Clicking the **album cover** on an Album Detail page or the **artist avatar** on an Artist Detail page opens a full-screen lightbox showing the high-resolution image (up to 2000 px). Click outside or press Escape to close.
+- Both use a shared `CoverLightbox` component — consistent behaviour across the app.
+
+#### Queue Toolbar — Complete Redesign
+- The queue panel now has a **centred icon toolbar** with round buttons (border-radius 50%, solid accent fill when active):
+  - **Shuffle** — Fisher-Yates shuffle, keeps current track at position 0
+  - **Save** — save queue as playlist
+  - **Load** — load a playlist into the queue
+  - **Clear** — remove all tracks from the queue
+  - **Gapless** (∞ icon) — toggle gapless playback on/off
+  - **Crossfade** (≋ icon) — toggle crossfade on/off; when inactive, clicking enables crossfade *and* opens a popover slider
+- **Crossfade popover**: a small overlay below the Crossfade button with a range slider (1–10 s) to configure the fade duration. Clicking the active Crossfade button disables crossfade and closes the popover. Closes on outside click.
+- **Queue header**: title enlarged to 16 px/700, track count and total duration shown inline next to the title in accent colour. Close (×) button removed.
+- **Tech info overlay**: codec and bitrate displayed as a frosted glass badge (`backdrop-filter: blur(4px)`) overlaid on the bottom edge of the cover art image.
+
+#### French & Dutch Translations
+- Full UI translation added for **French** (`fr`) and **Dutch** (`nl`) — all namespaces covered.
+- Language selector in Settings now lists all four languages sorted alphabetically (Dutch, English, French, German).
+
+#### Help Page — Layout & Content Update
+- **2-column grid layout** for the accordion — makes better use of horizontal space on widescreen displays.
+- New Q&A entry: **Crossfade & Gapless** (Playback section) — explains what each feature does, how to enable them, and their experimental status.
+- Updated entries: Themes (reflects all 21 themes), Languages (4 languages), Scrobbling (direct Last.fm), System browser links, Linux distribution (no AppImage).
+
+#### Settings — Experimental Labels
+- Crossfade and Gapless toggles in Settings → Playback now show an **"Experimental"** badge next to their label.
+
+### Fixed
+
+- **Now Playing dropdown — refresh button**: The refresh icon spin was applied to the entire button, blocking clicks during the animation. Spin state is now separate from the background poll loading state — the button is always clickable, and the icon spins for a minimum of 600 ms for clear visual feedback.
+- **Crossfade popover positioning**: Popover was overflowing the right edge of the viewport. Now right-aligned relative to the Crossfade button and positioned below it.
+
+---
+
+## [1.7.2] - 2026-03-20
+
+### Fixed
+
+- **Last.fm**: Stability improvements for the authentication flow and session handling.
+- **Settings**: Minor display fixes in the Last.fm profile badge.
+
+---
+
+## [1.7.1] - 2026-03-20
+
+### Fixed
+
+- **Build**: TypeScript errors in Settings.tsx and Statistics.tsx that broke the release build.
+
+---
+
 ## [1.7.0] - 2026-03-20

 ### Added
@@ -33,26 +33,38 @@ There are no test scripts. TypeScript compilation (`tsc`) is part of the build.
 - **State**: Zustand stores (no Redux)
 - **Audio**: Rust/rodio engine (`src-tauri/src/audio.rs`) — downloads track bytes via reqwest, decodes with symphonia, plays via rodio. Replaces Howler.js. See detailed notes in the Notes section.
 - **API**: All server communication goes through `src/api/subsonic.ts` — a thin wrapper around axios using Subsonic token auth (MD5 hash of password + salt)
- **i18n**: react-i18next, all translations inline in `src/i18n.ts` (English + German)
+- **Last.fm**: `src/api/lastfm.ts` — direct Last.fm API integration (scrobbling, Now Playing, love/unlove, similar artists, top stats, recent tracks). API key + secret from `VITE_LASTFM_API_KEY` / `VITE_LASTFM_API_SECRET` env vars (bundled at build time).
+- **i18n**: react-i18next, all translations inline in `src/i18n.ts` (English, German, French, Dutch)

 ### Key files

 | File | Role |
 |---|---|
-| `src/api/subsonic.ts` | All Subsonic REST calls + `buildStreamUrl` / `buildCoverArtUrl` / `buildDownloadUrl` helpers. Also exports `pingWithCredentials()` and `coverArtCacheKey()`. `getRandomSongs` includes a `_t` timestamp param to prevent browser/axios caching. |
+| `src/api/subsonic.ts` | All Subsonic REST calls + `buildStreamUrl` / `buildCoverArtUrl` / `buildDownloadUrl` helpers. Also exports `pingWithCredentials()`, `coverArtCacheKey()`, `reportNowPlaying()`. `getRandomSongs` includes a `_t` timestamp param to prevent browser/axios caching. |
+| `src/api/lastfm.ts` | Last.fm API: scrobble, updateNowPlaying, love/unlove, getTrackLoved, getSimilarArtists, getTopArtists/Albums/Tracks, getRecentTracks, getUserInfo. Auth via session key stored in `authStore`. |
 | `src/utils/imageCache.ts` | IndexedDB image cache (30-day TTL) + in-memory object URL Map. `getCachedUrl(fetchUrl, cacheKey)` is the main entry point. Capped at 150 entries with LRU eviction + `URL.revokeObjectURL`. Max 5 concurrent fetches. |
 | `src/components/CachedImage.tsx` | Drop-in `<img>` replacement that resolves via the image cache. Also exports `useCachedUrl(fetchUrl, cacheKey)` hook for CSS background-image use cases. Uses cancellation flag to prevent setState on unmounted components. |
-| `src/store/authStore.ts` | Multi-server support via `ServerProfile[]` + `activeServerId`. `getBaseUrl()` / `getActiveServer()` used by subsonic.ts. Persisted via **`localStorage`** (synchronous — do not change to async storage). |
-| `src/store/playerStore.ts` | Playback state, queue, scrobbling at 50%, server queue sync (debounced 1.5s). Persists `currentTrack`, `queue`, `queueIndex`, `currentTime` for cold-start resume. |
+| `src/components/TooltipPortal.tsx` | Global tooltip system. Listens for `mouseover`/`mouseout` on `document`, reads `data-tooltip` / `data-tooltip-pos` / `data-tooltip-wrap` attributes, renders via `createPortal` to `document.body` at `z-index: 99999`. Mounted once in `App.tsx`. Use `data-tooltip` instead of native `title=` everywhere — `title=` produces unstyled OS tooltips. |
+| `src/components/CustomSelect.tsx` | Styled portal-based dropdown replacing native `<select>`. Accepts `SelectOption[]` with optional `group` and `disabled`. Positioned via `useLayoutEffect`, flips above trigger if near viewport bottom. Use for all select inputs. |
+| `src/components/LastfmIcon.tsx` | Shared Last.fm SVG logo component. `<LastfmIcon size={16} />`. |
+| `src/store/authStore.ts` | Multi-server support via `ServerProfile[]` + `activeServerId`. `getBaseUrl()` / `getActiveServer()` used by subsonic.ts. Also stores Last.fm session key, username, scrobbling toggle. Persisted via **`localStorage`** (synchronous — do not change to async storage). |
+| `src/store/playerStore.ts` | Playback state, queue, scrobbling at 50% via Last.fm, server queue sync (debounced 1.5s). On `playTrack`: calls `reportNowPlaying` (Navidrome) + `lastfmUpdateNowPlaying` (Last.fm) independently. Persists `currentTrack`, `queue`, `queueIndex`, `currentTime` for cold-start resume. |
 | `src-tauri/src/audio.rs` | Rust audio engine: `audio_play`, `audio_pause`, `audio_resume`, `audio_stop`, `audio_seek`, `audio_set_volume` commands. Emits `audio:playing`, `audio:progress` (500ms), `audio:ended`, `audio:error` events. |
-| `src/store/themeStore.ts` | Theme selection (8 themes), applied as `data-theme` on `<html>` |
+| `src/store/themeStore.ts` | Theme selection (47 themes across 7 groups), applied as `data-theme` on `<html>` |
+| `src/store/lyricsStore.ts` | Sidebar tab state (`activeTab: 'queue' \| 'lyrics'`). `showLyrics()` / `showQueue()` / `setTab()`. Not persisted. |
+| `src/components/LyricsPane.tsx` | Lyrics pane rendered inside QueuePanel when `activeTab === 'lyrics'`. Fetches from LRCLIB, parses LRC, auto-scrolls active line. Only subscribes to `currentTime` when synced lyrics are present. |
+| `src/api/lrclib.ts` | Fetches lyrics from `https://lrclib.net/api/get`. Returns `{ syncedLyrics, plainLyrics }`. `parseLrc()` parses LRC timestamps into sorted `LrcLine[]`. |
+| `src/store/fontStore.ts` | Font selection (10 fonts), applied as `data-font` on `<html>`. Persisted in `psysonic_font`. |
+| `src/store/keybindingsStore.ts` | Configurable keybindings — maps `KeyAction` to `e.code` strings. Persisted in `psysonic_keybindings`. |
+| `src/utils/playAlbum.ts` | `playAlbum(albumId)` — fetches album, fades out current track (700 ms), restores volume in store only (no Rust invoke), calls `playTrack`. Used by `AlbumCard` and `Hero` play buttons. |
 | `src-tauri/src/lib.rs` | Tray menu, media key global shortcuts (disabled on Linux), `exit_app` command |
-| `src/App.tsx` | Root routing, `RequireAuth` guard, `TauriEventBridge` (media keys → store actions) |
-| `src/i18n.ts` | All translations (en + de) inline. Language persisted in `localStorage('psysonic_language')`. |
+| `src/App.tsx` | Root routing, `RequireAuth` guard, `TauriEventBridge` (media keys → store actions), `<TooltipPortal />` mount |
+| `src/i18n.ts` | All translations (en + de + fr + nl) inline. Language persisted in `localStorage('psysonic_language')`. |
 | `src/components/Sidebar.tsx` | Sidebar nav + `UpdateToast` component. On mount (1.5s delay) fetches `https://api.github.com/repos/Psychotoxical/psysonic/releases/latest`, compares `tag_name` against `version` imported directly from `package.json` (build-time constant — more reliable than `getVersion()` from Tauri API), and shows a toast above Statistics only when a newer version exists. Silently no-ops if offline. |
 | `src/components/AlbumHeader.tsx` | Extracted from AlbumDetail — cover art, album info, play/enqueue buttons, bio modal, download. |
 | `src/components/AlbumTrackList.tsx` | Extracted from AlbumDetail — tracklist with star ratings, codec labels, VA artist column, context menu. |
-| `src/components/QueuePanel.tsx` | Queue sidebar. Shows song count + total duration below title. Items get `.context-active` class while their context menu is open. |
+| `src/components/QueuePanel.tsx` | Queue sidebar. Toolbar with round buttons (Shuffle, Save, Load, Clear, Gapless ∞, Crossfade ≋). Header shows title + count + duration inline. Crossfade popover (range slider 1–10 s) anchored below the ≋ button. Tech info (codec/bitrate) as frosted-glass overlay on cover art. Items get `.context-active` class while their context menu is open. |
+| `src/components/CoverLightbox.tsx` | Full-screen image lightbox. Props: `{ src, alt, onClose }`. ESC key + overlay click to close. Used in `AlbumHeader` and `ArtistDetail`. |
 | `packages/aur/PKGBUILD` | AUR package definition for Arch/CachyOS. Installs a wrapper script at `/usr/bin/psysonic` that sets `GDK_BACKEND=x11`, `WEBKIT_DISABLE_COMPOSITING_MODE=1`, `WEBKIT_DISABLE_DMABUF_RENDERER=1` before launching the binary. |

 ### Multi-server support
@@ -87,7 +99,7 @@ Use `getActiveServer()` to get the current server, `getBaseUrl()` to get its URL
 ### Data flow
 1. `authStore.getBaseUrl()` returns the active server's URL
 2. `subsonic.ts` calls `useAuthStore.getState()` directly (not hooks) to build each request
-3. `playerStore.playTrack()` calls `invoke('audio_play', { url, volume, durationHint })`, calls `reportNowPlaying`, listens for `audio:progress` / `audio:ended` events, triggers scrobble at 50% via `scrobbleSong`, and debounces server queue sync
+3. `playerStore.playTrack()` calls `invoke('audio_play', { url, volume, durationHint })`, calls `reportNowPlaying` (Navidrome) + `lastfmUpdateNowPlaying` (Last.fm), listens for `audio:progress` / `audio:ended` events, triggers scrobble at 50% directly via Last.fm API, and debounces server queue sync
 4. Tauri events (`media:play-pause`, `tray:play-pause`, etc.) are bridged to store actions in `TauriEventBridge` inside `App.tsx`
 5. On cold start (app restart): if `currentTrack` is in localStorage, `resume()` calls `audio_play` + seeks to saved `currentTime`

@@ -101,18 +113,59 @@ Use `getActiveServer()` to get the current server, `getBaseUrl()` to get its URL
 Add a function to `src/api/subsonic.ts` using the `api<T>()` helper. The helper automatically injects auth params and unwraps `subsonic-response`.

 ### Themes
-8 themes are available, selectable in Settings. `themeStore` persists the choice and sets `data-theme` on `<html>`. All component CSS uses semantic tokens (`--accent`, `--text-primary`, etc.) — only the player button gradient and a few decorative elements reference `--ctp-*` palette vars directly, so every theme must define the full `--ctp-*` set.
+47 themes across 7 groups, selectable in Settings via `ThemePicker`. `themeStore` persists the choice and sets `data-theme` on `<html>`. All component CSS uses semantic tokens (`--accent`, `--text-primary`, etc.) — only the player button gradient and a few decorative elements reference `--ctp-*` palette vars directly, so every theme must define the full `--ctp-*` set.

-| Theme | Style | Accent |
-|---|---|---|
-| `mocha` | Catppuccin dark | Mauve |
-| `macchiato` | Catppuccin medium-dark | Mauve |
-| `frappe` | Catppuccin medium | Mauve |
-| `latte` | Catppuccin light | Mauve |
-| `nord` | Nord Polar Night dark | Frost `#88c0d0` |
-| `nord-snowstorm` | Nord Snow Storm light | Deep-Blue `#5e81ac` |
-| `nord-frost` | Nord deep ocean blue | Frost `#88c0d0` |
-| `nord-aurora` | Nord Polar Night + aurora | Purple `#b48ead` |
+`--volume-accent` overrides the volume slider colour independently of `--accent` (used by WnAmp for orange volume, yellow accent elsewhere).
+
+| Theme | Group | Style | Accent |
+|---|---|---|---|
+| `poison` | Psysonic Themes | dark charcoal, phosphor green LCD glow | Green `#1bd655` |
+| `nucleo` | Psysonic Themes | warm brass/cream light | Brass `#7a5218` |
+| `psychowave` | Psysonic Themes | deep violet synthwave | Purple `#a06ae0` |
+| `vintage-tube-radio` | Psysonic Themes | warm brown, VFD orange | Orange `#FF6F00` |
+| `neon-drift` | Psysonic Themes | midnight blue, electric cyan glow | Cyan `#00f2ff` |
+| `wnamp` | Psysonic — Mediaplayer | cool gray-blue dark, LCD glow, Courier New | Yellow `#d4cc46`, volume `#de9b35` |
+| `navy-jukebox` | Psysonic — Mediaplayer | silver/blue light | Blue `#0070a0` |
+| `cobalt-media` | Psysonic — Mediaplayer | cobalt blue dark | Lime `#45ff00` |
+| `onyx-cinema` | Psysonic — Mediaplayer | near-black cinematic | Cyan `#00aaff` |
+| `spotless` | Psysonic — Mediaplayer | flat dark, Spotify-inspired | Green `#1ED760` |
+| `dzr0` | Psysonic — Mediaplayer | flat light, Deezer-inspired | Purple `#A238FF` |
+| `cupertino-beats` | Psysonic — Mediaplayer | Apple Music dark, glassmorphism | Red `#fa243c` |
+| `cupertino-light` | Operating Systems | macOS light, frosted glass | Apple Blue `#0071e3` |
+| `cupertino-dark` | Operating Systems | macOS Space Grey, frosted glass | Vibrant Blue `#007aff` |
+| `aero-glass` | Operating Systems | Win7 Aero glass blue | Blue `#1878e8` |
+| `w98` | Operating Systems | Windows 98 teal desktop | Navy `#000080` |
+| `luna-teal` | Operating Systems | WinXP Luna, green gel buttons | Green `#3c9d29` |
+| `ascalon` | Games | Guild Wars 1 dark stone fantasy | Gold `#d4af37` |
+| `azerothian-gold` | Games | World of Warcraft | Gold `#c19e67` |
+| `grand-theft-audio` | Games | GTA night city | Green `#57b05a` |
+| `lambda-17` | Games | Half-Life orange alert | Amber `#ff9d00` |
+| `nightcity-2077` | Games | Cyberpunk 2077 | Neon Yellow `#FCEE0A` |
+| `v-tactical` | Games | Battlefield | Burnt Orange `#ff8a00` |
+| `blade` | Movies | deep black, blood-red | Red `#b30000` |
+| `imperial-sith` | Movies | Star Wars dark side | Red `#e60000` |
+| `middle-earth` | Movies | warm parchment light (LOTR) | Gold `#d4af37` |
+| `morpheus` | Movies | Matrix terminal | Phosphor Green `#00ff41` |
+| `order-of-the-phoenix` | Movies | Harry Potter | Ember Orange `#e63900` |
+| `pandora` | Movies | Avatar bioluminescent | Cyan `#00f2ff` |
+| `stark-hud` | Movies | Iron Man HUD | Cyan `#00f2ff` |
+| `ice-and-fire` | Series | Game of Thrones | Ice Blue `#70a1ff` |
+| `doh-matic` | Series | The Simpsons | Blue `#1F75FE` |
+| `heisenberg` | Series | Breaking Bad | Crystal Blue `#3fe0ff` |
+| `mocha` | Open Source Classics | Catppuccin dark | Mauve |
+| `macchiato` | Open Source Classics | Catppuccin medium-dark | Mauve |
+| `frappe` | Open Source Classics | Catppuccin medium | Mauve |
+| `latte` | Open Source Classics | Catppuccin light | Mauve |
+| `nord` | Open Source Classics | Polar Night dark | Frost `#88c0d0` |
+| `nord-snowstorm` | Open Source Classics | Snow Storm light | Deep-Blue `#5e81ac` |
+| `nord-frost` | Open Source Classics | deep ocean blue | Frost `#88c0d0` |
+| `nord-aurora` | Open Source Classics | Polar Night + aurora | Purple `#b48ead` |
+| `gruvbox-dark-hard` | Open Source Classics | Gruvbox dark hard | Orange `#fe8019` |
+| `gruvbox-dark-medium` | Open Source Classics | Gruvbox dark medium | Orange `#fe8019` |
+| `gruvbox-dark-soft` | Open Source Classics | Gruvbox dark soft | Orange `#fe8019` |
+| `gruvbox-light-hard` | Open Source Classics | Gruvbox light hard | Orange `#af3a03` |
+| `gruvbox-light-medium` | Open Source Classics | Gruvbox light medium | Orange `#af3a03` |
+| `gruvbox-light-soft` | Open Source Classics | Gruvbox light soft | Orange `#af3a03` |

 **Light-theme gotcha**: The Hero and Fullscreen Player sit on top of album-art backgrounds with dark overlays. Their text colors are hardcoded white (not `var(--text-primary)`) so they stay readable in light themes (Latte, Nord Snowstorm).

@@ -126,7 +179,7 @@ Artist images are intentionally **not loaded** on the Artists overview page (gri
 `src/components/NowPlayingDropdown.tsx` polls `getNowPlaying` every 10 seconds in the background. Navidrome keeps stale "now playing" entries for several minutes after playback stops. To fix this: entries belonging to the current user (`ownUsername`) are filtered by the **local `isPlaying` state** from `playerStore` — so the badge disappears instantly when the user pauses or stops, without waiting for the server to clear the entry. Clicking an entry navigates to the album page (`/album/:albumId`) if `stream.albumId` is available.

 ### i18n
-All German strings live exclusively in `src/i18n.ts` — never hardcode German in `.tsx` files. Translation namespaces: `sidebar`, `home`, `hero`, `search`, `nowPlaying`, `contextMenu`, `albumDetail`, `artistDetail`, `favorites`, `randomMix`, `randomAlbums`, `playlists`, `albums`, `artists`, `statistics`, `login`, `common`, `settings`, `help`, `queue`, `player`.
+All non-English strings live exclusively in `src/i18n.ts` — never hardcode translated text in `.tsx` files. Four languages: `en`, `de`, `fr`, `nl`. Translation namespaces: `sidebar`, `home`, `hero`, `search`, `nowPlaying`, `contextMenu`, `albumDetail`, `artistDetail`, `favorites`, `randomMix`, `randomAlbums`, `playlists`, `albums`, `artists`, `statistics`, `login`, `common`, `settings`, `help`, `queue`, `player`.

 **German terminology**: "Queue" is always "Warteschlange" in German — never leave "Queue" untranslated in DE strings.

@@ -141,6 +194,8 @@ The workflow is split into three jobs: `create-release` (creates the GitHub Rele

 **AppImage is no longer built.** The AppImage was fundamentally incompatible with non-Ubuntu distros (Arch, Fedora) due to the bundled WebKitGTK conflicting with the system's Mesa/EGL stack.

+**Never force-push or move a tag after publishing.** GitHub caches release tarballs — moving a tag causes the AUR and other package managers to build stale code. Bump the patch version instead.
+
 ### Linux distribution channels
 | Distro family | Package |
 |---|---|
@@ -165,15 +220,16 @@ The workflow is split into three jobs: `create-release` (creates the GitHub Rele
 - **Cold-start resume**: `resume()` checks `isAudioPaused` flag. If true (warm resume), calls `audio_resume`. If false (cold start after restart), calls `audio_play` with saved URL then `audio_seek` to saved `currentTime`. Position preference: server queue position > 0 → use server; otherwise use localStorage value.
 - **Drag-and-drop**: All drag sources use `dataTransfer.setData('text/plain', ...)` — WebView2 (Windows) does not support custom MIME types like `application/json`. Queue reordering calculates the **drop target index from `e.clientY`** at drop time (iterates `[data-queue-idx]` elements, picks the first whose midpoint is below the cursor). `fromIdx` comes from `dataTransfer` (set in `dragstart`, always reliable). `onDragEnd` clears refs synchronously. All drops are handled by the `<aside>` container — no `onDrop` on individual queue items.
 - **Drag-and-drop cursor (Linux)**: WebKitGTK does not honour `dropEffect` for cursor display — the cursor may show as forbidden or no indicator depending on the compositor (KDE Plasma vs GNOME). DnD works correctly regardless. This is a known WebKitGTK limitation, not fixable from web content.
- **Fullscreen Player ("Ambient Stage")**: Single centered column — no tracklist. Background uses the artist's `largeImageUrl` from `getArtistInfo()` (falls back to cover art). Three CSS-animated color orbs (`--ctp-mauve`, `--ctp-blue`, `--ctp-lavender`) drift behind everything. Cover has a slow breathing animation (`cover-breathe` keyframe). Long song titles scroll as a marquee (`MarqueeTitle` component — measures overflow via `getBoundingClientRect` + `ResizeObserver`, animates via CSS custom property `--scroll-amount`). `Track.artistId` is populated from `SubsonicSong.artistId` (Navidrome returns this field) across all 18 track-construction sites.
+- **Fullscreen Player ("Ambient Stage")**: Single centered column — no tracklist. Background uses the artist's `largeImageUrl` from `getArtistInfo()` (falls back to cover art). Ken Burns animation: `inset: -30%`, ±8% translate, 90s cycle. No color orbs (removed — too GPU-intensive). Cover has a slow breathing animation (`cover-breathe` keyframe). Long song titles scroll as a marquee (`MarqueeTitle` component — measures overflow via `getBoundingClientRect` + `ResizeObserver`, animates via CSS custom property `--scroll-amount`). `Track.artistId` is populated from `SubsonicSong.artistId` (Navidrome returns this field) across all 18 track-construction sites.
 - **Sidebar**: Fixed width via CSS `clamp(200px, 15vw, 220px)` — no drag-to-resize. Collapsed state (72px) persisted in `localStorage`. Update notification uses Tauri Shell plugin `open()` to launch the system browser — `<a target="_blank">` does not work inside a Tauri WebView.
 - **Artist page — external links**: Last.fm and Wikipedia buttons open in the system browser via `open()` from `@tauri-apps/plugin-shell`. Button label temporarily changes to "Opened in browser" / "Im Browser geöffnet" for 2.5 s as visual confirmation.
 - **Tracklist columns**: Order is `# | Title | [Artist (VA only)] | Favorite | Rating | Duration | Format`. Format column uses `120px` (NOT `auto` or `1fr`) — `auto` caused misalignment because header and track-row are independent grid containers: "FORMAT" header text is narrower than "MP3 · 320 kbps", so the `fr` title column calculated differently in header vs rows, shifting all subsequent columns. `1fr` fixed alignment but made the format column too wide. Fixed `120px` fits all codec strings (MP3/FLAC/OGG · kbps) and aligns perfectly. Total row uses explicit `grid-column` numbers (not negative indices).
 - **AlbumDetail**: Thin orchestrator (`src/pages/AlbumDetail.tsx`) — state, handlers, `useCachedUrl` hook, renders `AlbumHeader` + `AlbumTrackList` + related albums section. Logic is split into the two extracted components.
 - **Playlists page**: List layout (not card grid) with sort buttons (Name / Tracks / Duration, toggle asc/desc) and a filter input. Play icon and delete button appear on row hover.
- **Statistics page**: Library stat cards (Artists / Albums / Songs / Genres), Recently Played, Most Played, Highest Rated, Genre Chart. Data loaded in parallel via `Promise.allSettled`. No decade distribution (API caps byYear at 200 — all bars show "200+" which is useless).
- **Context menu**: `song` and `queue-item` types both have "Go to Album" (`Disc3` icon, shown only when `song.albumId` exists) and "Favorite" options. Context menu type union: `'song' | 'album' | 'artist' | 'queue-item' | 'album-song'`.
- **QueuePanel meta box**: Shows title (no link) → artist (linked to `/artist/:id`) → album (linked to `/album/:id`) → year (if available). Cover art is 90×90 px, top-aligned. Default panel width 340 px. Header shows song count + total duration below the queue title.
+- **Statistics page**: Library stat cards (Artists / Albums / Songs), Recently Played, Most Played, Highest Rated. Last.fm section (when configured): top artists/albums/tracks with period filter + recent scrobbles. No genre chart (removed). Data loaded in parallel via `Promise.allSettled`.
+- **Context menu**: `song` and `queue-item` types both have "Go to Album" (`Disc3` icon, shown only when `song.albumId` exists) and "Favorite/Unfavorite" toggle. Context menu type union: `'song' | 'album' | 'artist' | 'queue-item' | 'album-song'`. Starred state is read from `item.starred` (set when the item was loaded) and overridden by `starredOverrides` in `playerStore` (updated immediately on star/unstar so the UI reflects the change without a page reload). `Track` interface includes `starred?: string` — propagated via `songToTrack()` and all inline track-object construction sites.
+- **QueuePanel meta box**: Shows title (no link) → artist (linked to `/artist/:id`) → album (linked to `/album/:id`) → year (if available). Cover art is 90×90 px, top-aligned with codec/bitrate frosted-glass overlay at bottom. Default panel width 340 px. Header: title 16px/700, song count + total duration inline in `--accent` colour.
+- **Queue toolbar**: 6 round buttons (`queue-round-btn`, `border-radius: 50%`) centred in a row. Active state: `background: var(--accent); color: var(--ctp-base)`. Crossfade (≋) button: inactive click → enable + open popover; active click → disable + close. Popover: `position: absolute; top: calc(100% + 10px); right: 0; width: 170px` — right-aligned to prevent viewport overflow.
 - **Queue hover**: Queue items use `.context-active` CSS class when their context menu is open, keeping the hover highlight visible.
 - **Random Mix hover**: Row uses `.context-active` CSS class when a context menu is open for that song. `contextMenuSongId` state cleared via `useEffect` when `contextMenu.isOpen` becomes false.
 - **Favorites songs**: Full tracklist layout matching AlbumDetail — `track-row-va` grid with `#`, Title, Artist, Duration columns and a header row. Artist name clickable → artist page. "Add all to queue" button (`btn btn-surface`) next to the section title sends all favorited songs to the queue.
@@ -181,5 +237,11 @@ The workflow is split into three jobs: `create-release` (creates the GitHub Rele
 - **Random Mix — Super Genre Mix**: 9 super-genres defined in `SUPER_GENRES` constant. Server genres fetched via `getGenres()` on mount; `availableSuperGenres` filters to those with ≥1 keyword match. `loadGenreMix` uses progressive rendering — `setGenreMixSongs` updated after each genre request resolves. Genre list capped at 50 (randomly sampled) so total fetch stays near 50 songs — no over-fetching. `genreMixComplete` state gates the "Play All" button: button stays `btn-surface` with live `n / 50` counter while loading, switches to `btn-primary` only when all songs are ready.
 - **RandomAlbums**: No auto-refresh timer — loads once on mount, manual refresh button only. `loadingRef` guards against concurrent fetches.
 - **Queue shuffle**: `shuffleQueue()` in playerStore keeps current track at index 0, Fisher-Yates shuffles the rest.
- **Tooltip z-index**: `.main-content` has `z-index: 1` so tooltips in the content area render above the queue panel (which has no z-index but appears later in DOM order). Multi-line tooltips: add `data-tooltip-wrap` attribute + use `\n` in the string; CSS rule `[data-tooltip-wrap]::after { white-space: pre-line; max-width: 220px }`.
- **Version**: 1.7.0
+- **Tooltips**: Use `data-tooltip="text"` on any element — never native `title=`. `data-tooltip-pos="top|bottom|left|right"` (default: top). `data-tooltip-wrap` for multi-line. Rendered by `TooltipPortal` in `App.tsx` via `document.body` portal.
+- **Scrobbling**: At 50% playback, `playerStore` calls `lastfmScrobble()` directly. Navidrome is NOT used for scrobbling. Both `reportNowPlaying` (Navidrome) and `lastfmUpdateNowPlaying` (Last.fm) are called on every `playTrack()` — independently, fire-and-forget.
+- **Last.fm API key**: Stored in `.env` as `VITE_LASTFM_API_KEY` / `VITE_LASTFM_API_SECRET`. Bundled into the JS at build time (Vite). Not in git. For desktop apps this is acceptable — Last.fm's own docs acknowledge client-side keys can't be truly hidden.
+- **NowPlayingDropdown refresh**: `spinning` state is separate from `loading` — button is always clickable. Spin lasts min 600 ms via `setTimeout`. Background poll (`loading`) does not block the button.
+- **CoverLightbox**: Shared component (`src/components/CoverLightbox.tsx`). Props: `{ src, alt, onClose }`. ESC + overlay click to close. Used in `AlbumHeader` (album cover) and `ArtistDetail` (artist avatar, wrapped in `.artist-detail-avatar-btn`).
+- **Home page**: Section order: recent → discover → artist discovery (pill-buttons, no images) → starred → mostPlayed. Artist discovery uses `getArtists()` full list + client-side Fisher-Yates shuffle (16 random), rendered as `artist-ext-link` pill-buttons (same as ArtistDetail "Similar Artists") — no image loading, no performance impact.
+- **CoverLightbox + EQ popup**: Both use `createPortal(…, document.body)` to escape `backdrop-filter` CSS containing-block issues on the player bar and other ancestors.
+- **Version**: 1.13.0
@@ -22,21 +22,52 @@ Designed specifically for users hosting their own music via Navidrome or other S

 ## ✨ Features

- 🎨 **Gorgeous UI**: 8 deeply integrated themes (Catppuccin series + Nord series) with smooth glassmorphism effects and micro-animations.
+- 🎨 **Gorgeous UI**: 47 deeply integrated themes across 7 groups — Open Source Classics (Catppuccin, Nord, Gruvbox), Operating Systems, Games, Movies, Series, Psysonic originals, and Psysonic Mediaplayer — with smooth glassmorphism effects and micro-animations.
 - ⚡ **Blazing Fast**: Built with Rust & Tauri — native audio engine (rodio), minimal RAM usage compared to typical Electron apps.
- 🌍 **Internationalization (i18n)**: Fully translated into English and German.
+- 🌍 **Internationalization (i18n)**: Fully translated into English, German, French, and Dutch.
 - 📻 **Live "Now Playing"**: See what other users on your server are currently listening to in real-time.
- 🎵 **Last.fm Scrobbling**: Full integration for scrobbling your tracks via the Navidrome server.
+- 🎵 **Last.fm Integration**: Direct scrobbling, Now Playing updates, love/unlove, Similar Artists, and top stats — no Navidrome configuration required.
+- 🎤 **Synchronized Lyrics**: In-sidebar lyrics pane powered by LRCLIB — synced with auto-scroll and line highlighting, plain-text fallback.
 - 💾 **IndexedDB Caching**: Ultra-fast loading times with persistent IndexedDB image caching for cover art and artist images.
 - 📀 **Album Downloads**: Support for downloading entire albums directly to your local machine.
 - 💿 **Album & Artist Views**: Beautiful grid displays and detailed artist pages with related albums and color-coded initial avatars for fast browsing.
 - 〰️ **Waveform Seekbar**: Canvas-based waveform with a blue-to-mauve gradient and glow effect — click or drag anywhere to seek.
- 🌊 **MilkDrop Visualizer**: Full-screen Butterchurn/MilkDrop visualizer in the Ambient Stage with hundreds of presets and smooth transitions.
 - 🎛️ **Queue Management**: Drag & drop reordering, shuffle, playlist saving/loading, and server-side queue synchronization.
+- ⌨️ **Configurable Keybindings**: Rebind any playback action (play/pause, next, seek, volume…) directly in Settings.
+- 🔤 **Font Picker**: 10 UI fonts to choose from in Settings → Appearance.
 - 🎼 **Random Mix**: Generate a random playlist from your entire library. Filter by keyword or pick a Super Genre (Metal, Rock, Electronic, Jazz…) for a focused mix with progressive loading.
 - 🔄 **Update Notifications**: Built-in update checker (on startup + every 10 minutes) that notifies you when a new version is available on GitHub.
 - 🖥️ **Cross-Platform**: Available natively for Windows, macOS, and Linux (including Wayland support).

+## 🗺️ Roadmap
+
+### ✅ Completed
+- [x] Native Rust/rodio audio engine (replaces Howler.js)
+- [x] 10-band graphic EQ with built-in and custom presets
+- [x] Crossfade between tracks
+- [x] Replay Gain (track + album mode)
+- [x] Gapless playback
+- [x] Waveform seekbar
+- [x] Last.fm scrobbling, Now Playing & love/unlove
+- [x] Similar Artists via Last.fm, filtered to library
+- [x] Statistics — Last.fm top charts & recent scrobbles
+- [x] Synchronized lyrics via LRCLIB (in-sidebar, auto-scroll)
+- [x] Multi-server support
+- [x] IndexedDB image caching
+- [x] Random Mix with keyword filter & Super Genre mix
+- [x] 47 themes across 7 groups: Open Source Classics, Operating Systems, Games, Movies, Series, Psysonic originals, Psysonic Mediaplayer
+- [x] Internationalization (English, German, French, Dutch)
+- [x] AUR package (Arch / CachyOS)
+- [x] Configurable keybindings
+- [x] Font picker (10 UI fonts)
+
+### 📋 Planned
+- [ ] FLAC seeking fix
+- [ ] General UI polish & visual refinement
+- [ ] More languages
+
+---
+
 ## ● Known Limitations

 - **Linux (drag & drop cursor feedback)**: Due to a WebKitGTK limitation, the drag cursor does not reflect the drop operation type — it may appear as a "forbidden" symbol or show no indicator at all, depending on the desktop environment. Drag and drop itself works correctly.
@@ -1,12 +1,12 @@
 {
  "name": "psysonic",
-  "version": "1.4.5",
+  "version": "1.8.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "psysonic",
-      "version": "1.4.5",
+      "version": "1.8.0",
      "dependencies": {
        "@tauri-apps/api": "^2",
        "@tauri-apps/plugin-dialog": "^2.6.0",
@@ -17,8 +17,6 @@
        "@tauri-apps/plugin-store": "^2",
        "@tauri-apps/plugin-window-state": "^2.4.1",
        "axios": "^1.7.7",
-        "butterchurn": "^2.6.7",
-        "butterchurn-presets": "^2.4.7",
        "i18next": "^25.8.16",
        "lucide-react": "^0.462.0",
        "md5": "^2.3.0",
@@ -1667,16 +1665,6 @@
        "proxy-from-env": "^1.1.0"
      }
    },
-    "node_modules/babel-runtime": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
-      "license": "MIT",
-      "dependencies": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
-      }
-    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
@@ -1724,27 +1712,6 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
-    "node_modules/butterchurn": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/butterchurn/-/butterchurn-2.6.7.tgz",
-      "integrity": "sha512-BJiRA8L0L2+84uoG2SSfkp0kclBuN+vQKf217pK7pMlwEO2ZEg3MtO2/o+l8Qpr8Nbejg8tmL1ZHD1jmhiaaqg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.0.0",
-        "ecma-proposal-math-extensions": "0.0.2"
-      }
-    },
-    "node_modules/butterchurn-presets": {
-      "version": "2.4.7",
-      "resolved": "https://registry.npmjs.org/butterchurn-presets/-/butterchurn-presets-2.4.7.tgz",
-      "integrity": "sha512-4MdM8ripz/VfH1BCldrIKdAc/1ryJFBDvqlyow6Ivo1frwj0H3duzvSMFC7/wIjAjxb1QpwVHVqGqS9uAFKhpg==",
-      "license": "MIT",
-      "dependencies": {
-        "babel-runtime": "^6.26.0",
-        "ecma-proposal-math-extensions": "0.0.2",
-        "lodash": "^4.17.4"
-      }
-    },
    "node_modules/call-bind-apply-helpers": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -1807,14 +1774,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "hasInstallScript": true,
-      "license": "MIT"
-    },
    "node_modules/crypt": {
      "version": "0.0.2",
      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
@@ -1872,12 +1831,6 @@
        "node": ">= 0.4"
      }
    },
-    "node_modules/ecma-proposal-math-extensions": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/ecma-proposal-math-extensions/-/ecma-proposal-math-extensions-0.0.2.tgz",
-      "integrity": "sha512-80BnDp2Fn7RxXlEr5HHZblniY4aQ97MOAicdWWpSo0vkQiISSE9wLR4SqxKsu4gCtXFBIPPzy8JMhay4NWRg/Q==",
-      "license": "MIT"
-    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.307",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.307.tgz",
@@ -2236,12 +2189,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/lodash": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
-      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
-      "license": "MIT"
-    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -2496,12 +2443,6 @@
        "react-dom": ">=16.8"
      }
    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "license": "MIT"
-    },
    "node_modules/rollup": {
      "version": "4.59.0",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
@@ -1,6 +1,6 @@
 {
  "name": "psysonic",
-  "version": "1.7.0",
+  "version": "1.13.0",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -20,8 +20,6 @@
    "@tauri-apps/plugin-store": "^2",
    "@tauri-apps/plugin-window-state": "^2.4.1",
    "axios": "^1.7.7",
-    "butterchurn": "^2.6.7",
-    "butterchurn-presets": "^2.4.7",
    "i18next": "^25.8.16",
    "lucide-react": "^0.462.0",
    "md5": "^2.3.0",
@@ -1,6 +1,6 @@
-# Maintainer: stelle <stelle@psychotoxical.dev>
+# Maintainer: Psychotoxic <psychotoxic@gmx.de>
 pkgname=psysonic
-pkgver=1.7.0
+pkgver=1.13.0
 pkgrel=1
 pkgdesc="Desktop music player for Subsonic API-compatible servers (Navidrome, Gonic, etc.)"
 arch=('x86_64')
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="115.549mm"
+   height="130.30972mm"
+   viewBox="0 0 115.549 130.30972"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:export-filename="p-small.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"><inkscape:page
+       x="0"
+       y="0"
+       width="115.549"
+       height="130.30972"
+       id="page2"
+       margin="0"
+       bleed="0" /></sodipodi:namedview><defs
+     id="defs1" /><g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(220.53237,27.789086)"><path
+       style="fill:#ffffff"
+       d="m -191.83501,87.581279 v -14.93937 l 1.01946,-0.029 c 1.8496,-0.0526 5.09881,-2.007 6.98453,-4.20123 2.13731,-2.48697 3.28384,-4.43657 4.52545,-7.69521 0.51751,-1.35819 1.078,-2.78694 1.24554,-3.175 0.16755,-0.38805 0.88173,-2.7693 1.58707,-5.29166 0.70533,-2.52236 1.41605,-4.90361 1.57937,-5.29167 0.16441,-0.39067 0.30759,11.85061 0.32081,27.42847 l 0.0239,28.134031 h -8.64306 -8.64305 z m -3.42317,-19.65031 c -0.81559,-0.16111 -1.84746,-0.48272 -2.29306,-0.71468 -1.09242,-0.5687 -2.72853,-2.16884 -2.74064,-2.68038 -0.005,-0.22765 -0.38465,-0.86265 -0.84281,-1.41111 -0.8626,-1.03264 -2.38323,-4.66133 -4.63113,-11.05137 -1.72997,-4.91772 -1.63358,-4.68451 -3.35352,-8.11389 -0.82714,-1.64924 -1.91998,-3.45186 -2.42853,-4.00582 -1.28805,-1.40307 -4.41406,-2.7715 -6.89485,-3.01827 l -2.08965,-0.20785 1.43221,-0.99035 c 1.5468,-1.06957 5.31147,-2.35399 6.9124,-2.35835 1.72563,-0.005 4.25283,0.7809 5.71247,1.77575 1.63175,1.11217 3.92377,3.83335 3.77488,4.48172 -0.0559,0.24344 0.11427,0.44261 0.37817,0.44261 0.53171,0 3.78445,6.24176 3.78445,7.26208 0,0.15195 0.30609,0.92171 0.6802,1.71057 0.37412,0.78887 1.08633,2.44854 1.5827,3.68817 1.00279,2.50434 2.57055,5.33152 2.95544,5.32962 0.85183,-0.004 3.83204,-7.97894 5.40479,-14.46266 1.9193,-7.91232 5.01161,-18.44694 6.10967,-20.81389 2.30114,-4.96024 4.60601,-7.03734 8.12223,-7.31959 1.95377,-0.15683 2.44243,-0.0601 4.01261,0.79453 2.49546,1.35819 3.31044,2.35029 5.40102,6.57479 0.93741,1.89425 3.29625,9.1126 4.36446,13.35583 0.51289,2.03729 1.21262,4.57729 1.55498,5.64444 0.34236,1.06716 0.83543,2.65466 1.09573,3.52778 0.96371,3.23267 3.75139,8.2344 5.51689,9.89856 2.09506,1.9748 4.10606,3.2977 5.85136,3.84922 0.72761,0.22993 1.32292,0.49404 1.32292,0.58692 0,0.0929 -0.71641,0.48577 -1.59202,0.87309 -2.29705,1.01609 -6.48839,1.02714 -8.75823,0.0231 -3.42674,-1.51581 -6.17101,-4.45149 -8.36088,-8.94406 -0.59782,-1.22642 -1.23412,-2.50231 -1.41401,-2.8353 -0.17988,-0.333 -0.47718,-1.20612 -0.66066,-1.94028 -0.74987,-3.00045 -6.42415,-19.25706 -6.99617,-20.04376 -0.79895,-1.09881 -0.87818,-1.08476 -1.55823,0.27628 -1.1693,2.3402 -2.07427,5.18987 -3.61302,11.37709 -3.03871,12.21839 -6.36478,22.38234 -8.0081,24.47148 -0.36655,0.466 -0.66646,0.99153 -0.66646,1.16785 0,0.86017 -2.61454,3.05174 -4.28395,3.59089 -1.94625,0.62857 -2.53141,0.65417 -4.78366,0.20926 z m 49.82815,-13.29265 c -2.77991,-0.70614 -6.29714,-6.05076 -8.15323,-12.38927 -0.30389,-1.03778 -0.47868,-1.96073 -0.38841,-2.051 0.0903,-0.0903 1.5695,-0.22877 3.28719,-0.30779 8.47079,-0.38969 9.78292,-0.63406 14.05919,-2.61837 3.78653,-1.75706 9.09259,-6.79386 10.56941,-10.03304 3.78708,-8.30644 4.33485,-14.20262 2.08448,-22.4376404 -1.15336,-4.22063002 -3.6401,-8.21361 -6.73205,-10.80969 -1.12271,-0.94265 -2.12066,-1.8146 -2.21767,-1.93765 -0.3794,-0.48123 -4.30858,-2.4333296 -6.41876,-3.1889796 -2.16778,-0.77628 -2.64336,-0.79956 -18.71666,-0.91597 l -16.49236,-0.11945 V -0.68605142 10.798429 h -0.8256 c -1.53109,0 -5.09758,2.09614 -6.79456,3.99338 -1.65639,1.85186 -4.54446,7.43871 -5.41264,10.47051 -0.25002,0.87312 -0.58222,1.98437 -0.73823,2.46944 -0.39136,1.2169 -2.0765,7.30176 -3.12634,11.28889 -0.2052,0.7793 -0.33685,-11.27627 -0.35693,-32.6846104 l -0.0318,-33.9193396 1.55319,-0.12371 c 0.85426,-0.068 12.32395,-0.10028 25.4882,-0.0716 20.69377,0.045 24.2694,0.12953 26.40444,0.62402 3.9887,0.92382 7.58472,2.04932 7.58472,2.3739 0,0.16576 0.52886,0.30139 1.17524,0.30139 2.09331,0 10.76432,4.87704 10.22435,5.75072 -0.12186,0.19718 -0.0447,0.24734 0.17328,0.11263 0.60692,-0.3751 4.21691,3.0333 6.9953,6.60467 2.06429,2.6534496 4.63504,8.4775396 5.94174,13.4611396 1.7681,6.7433 1.74625,15.8657704 -0.0549,22.9305504 -2.11084,8.27937 -4.97852,13.41407 -10.75456,19.25647 -2.59968,2.62955 -8.78375,7.02548 -9.88326,7.02548 -0.27557,0 -0.68644,0.1854 -0.91304,0.412 -0.39593,0.39593 -0.78905,0.56749 -4.31522,1.88319 -3.68968,1.37672 -10.83412,2.28545 -13.21446,1.68081 z m 7.57002,-15.26489 c 0,-0.19403 -0.07,-0.35278 -0.15557,-0.35278 -0.0856,0 -0.25368,0.15875 -0.3736,0.35278 -0.11992,0.19403 -0.0499,0.35278 0.15557,0.35278 0.20548,0 0.3736,-0.15875 0.3736,-0.35278 z"
+       id="path1" /></g></svg>
@@ -3139,7 +3139,7 @@ dependencies = [

 [[package]]
 name = "psysonic"
-version = "1.7.0"
+version = "1.12.0"
 dependencies = [
 "biquad",
 "md5",
@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.7.0"
+version = "1.12.0"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""
@@ -3,12 +3,19 @@

 mod audio;

+use std::collections::HashMap;
+use std::sync::Mutex;
+
 use tauri::{
    menu::{MenuBuilder, MenuItemBuilder},
    tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
    Emitter, Manager,
 };

+/// Tracks which user-configured shortcuts are currently registered (shortcut_str → action).
+/// Prevents on_shortcut() accumulating duplicate handlers across JS reloads (HMR / StrictMode).
+type ShortcutMap = Mutex<HashMap<String, String>>;
+
 #[tauri::command]
 fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
@@ -54,14 +61,14 @@ async fn lastfm_request(
        client
            .get("https://ws.audioscrobbler.com/2.0/")
            .query(&map)
-            .header("User-Agent", "psysonic/1.6.0")
+            .header("User-Agent", "psysonic/1.13.0")
            .send()
            .await
    } else {
        client
            .post("https://ws.audioscrobbler.com/2.0/")
            .form(&map)
-            .header("User-Agent", "psysonic/1.6.0")
+            .header("User-Agent", "psysonic/1.13.0")
            .send()
            .await
    }.map_err(|e| e.to_string())?;
@@ -76,11 +83,67 @@ async fn lastfm_request(
 }


+#[tauri::command]
+fn register_global_shortcut(
+    app: tauri::AppHandle,
+    shortcut_map: tauri::State<ShortcutMap>,
+    shortcut: String,
+    action: String,
+) -> Result<(), String> {
+    use tauri_plugin_global_shortcut::{GlobalShortcutExt, Shortcut, ShortcutState};
+
+    let mut map = shortcut_map.lock().unwrap();
+
+    // Idempotent: if this exact shortcut+action is already registered, skip.
+    // This prevents on_shortcut() from accumulating duplicate handlers when
+    // registerAll() is called again after a JS HMR reload or StrictMode double-effect.
+    if map.get(&shortcut).map(|a| a == &action).unwrap_or(false) {
+        return Ok(());
+    }
+
+    // Unregister any existing OS grab for this shortcut before re-registering.
+    if let Ok(s) = shortcut.parse::<Shortcut>() {
+        let _ = app.global_shortcut().unregister(s);
+    }
+    map.insert(shortcut.clone(), action.clone());
+    drop(map); // release lock before the blocking OS call
+
+    let parsed: Shortcut = shortcut.parse().map_err(|_| format!("Invalid shortcut: {shortcut}"))?;
+    app.global_shortcut()
+        .on_shortcut(parsed, move |app, _shortcut, event| {
+            if event.state == ShortcutState::Pressed {
+                let event_name = match action.as_str() {
+                    "play-pause"  => "media:play-pause",
+                    "next"        => "media:next",
+                    "prev"        => "media:prev",
+                    "volume-up"   => "media:volume-up",
+                    "volume-down" => "media:volume-down",
+                    _             => return,
+                };
+                let _ = app.emit(event_name, ());
+            }
+        })
+        .map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+fn unregister_global_shortcut(
+    app: tauri::AppHandle,
+    shortcut_map: tauri::State<ShortcutMap>,
+    shortcut: String,
+) -> Result<(), String> {
+    use tauri_plugin_global_shortcut::{GlobalShortcutExt, Shortcut};
+    shortcut_map.lock().unwrap().remove(&shortcut);
+    let parsed: Shortcut = shortcut.parse().map_err(|_| format!("Invalid shortcut: {shortcut}"))?;
+    app.global_shortcut().unregister(parsed).map_err(|e| e.to_string())
+}
+
 pub fn run() {
    let (audio_engine, _audio_thread) = audio::create_engine();

    tauri::Builder::default()
        .manage(audio_engine)
+        .manage(ShortcutMap::default())
        .plugin(tauri_plugin_window_state::Builder::default().build())
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_notification::init())
@@ -138,8 +201,7 @@ pub fn run() {
                })
                .build(app)?;

-            // Register media key global shortcuts
-            #[cfg(not(target_os = "linux"))]
+            // Register media key global shortcuts (all platforms)
            {
                use tauri_plugin_global_shortcut::{GlobalShortcutExt, Shortcut, ShortcutState};
                let shortcuts = ["MediaPlayPause", "MediaNextTrack", "MediaPreviousTrack"];
@@ -175,6 +237,8 @@ pub fn run() {
        .invoke_handler(tauri::generate_handler![
            greet,
            exit_app,
+            register_global_shortcut,
+            unregister_global_shortcut,
            audio::audio_play,
            audio::audio_pause,
            audio::audio_resume,
@@ -184,6 +248,8 @@ pub fn run() {
            audio::audio_set_eq,
            audio::audio_preload,
            audio::audio_set_crossfade,
+            audio::audio_set_gapless,
+            audio::audio_chain_preload,
            lastfm_request,
        ])
        .run(tauri::generate_context!())
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Psysonic",
-  "version": "1.7.0",
+  "version": "1.13.0",
  "identifier": "dev.psysonic.player",
  "build": {
    "beforeDevCommand": "npm run dev",
@@ -16,14 +16,15 @@
        "title": "Psysonic",
        "width": 1280,
        "height": 800,
-        "minWidth": 900,
-        "minHeight": 600,
+        "minWidth": 1280,
+        "minHeight": 720,
        "resizable": true,
        "fullscreen": false,
        "decorations": true,
        "transparent": false,
        "visible": true,
-        "dragDropEnabled": false
+        "dragDropEnabled": false,
+        "devtools": false
      }
    ],
    "security": {
@@ -32,12 +32,16 @@ import ContextMenu from './components/ContextMenu';
 import DownloadFolderModal from './components/DownloadFolderModal';
 import TooltipPortal from './components/TooltipPortal';
 import ConnectionIndicator from './components/ConnectionIndicator';
+import LastfmIndicator from './components/LastfmIndicator';
 import OfflineOverlay from './components/OfflineOverlay';
 import { useConnectionStatus } from './hooks/useConnectionStatus';
 import { useAuthStore } from './store/authStore';
 import { usePlayerStore, initAudioListeners } from './store/playerStore';
 import { useThemeStore } from './store/themeStore';
+import { useFontStore } from './store/fontStore';
 import { useEqStore } from './store/eqStore';
+import { useKeybindingsStore } from './store/keybindingsStore';
+import { useGlobalShortcutsStore } from './store/globalShortcutsStore';

 function RequireAuth({ children }: { children: React.ReactNode }) {
  const { isLoggedIn, servers, activeServerId } = useAuthStore();
@@ -140,6 +144,7 @@ function AppShell() {
          <LiveSearch />
          <div className="spacer" />
          <ConnectionIndicator status={connStatus} isLan={isLan} serverName={serverName} />
+          <LastfmIndicator />
          <NowPlayingDropdown />
          <button
            className="collapse-btn"
@@ -205,47 +210,89 @@ function TauriEventBridge() {
  const previous = usePlayerStore(s => s.previous);
  const { minimizeToTray } = useAuthStore();

-  // Spacebar → play/pause, F11 → window fullscreen
+  // Configurable keybindings
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
-      if (e.code === 'F11') {
-        e.preventDefault();
-        const win = getCurrentWindow();
-        win.isFullscreen().then(fs => win.setFullscreen(!fs));
-        return;
-      }
-      if (e.code !== 'Space') return;
      const tag = (e.target as HTMLElement)?.tagName;
      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+      // Global shortcuts use modifier combos — skip in-app bindings for those
+      // (X11 GrabModeAsync delivers the key to both the grabber and the focused WebView)
+      if (e.ctrlKey || e.altKey || e.metaKey) return;
+
+      const { bindings } = useKeybindingsStore.getState();
+      const { togglePlay, next, previous, setVolume, seek, toggleQueue, toggleFullscreen } = usePlayerStore.getState();
+
+      const action = (Object.entries(bindings) as [string, string | null][])
+        .find(([, code]) => code === e.code)?.[0];
+
+      if (!action) return;
      e.preventDefault();
-      togglePlay();
+
+      switch (action) {
+        case 'play-pause':        togglePlay(); break;
+        case 'next':              next(); break;
+        case 'prev':              previous(); break;
+        case 'volume-up':         setVolume(Math.min(1, usePlayerStore.getState().volume + 0.05)); break;
+        case 'volume-down':       setVolume(Math.max(0, usePlayerStore.getState().volume - 0.05)); break;
+        case 'seek-forward': {
+          const s = usePlayerStore.getState();
+          seek(Math.min(s.currentTrack?.duration ?? 0, s.currentTime + 10));
+          break;
+        }
+        case 'seek-backward': {
+          const s = usePlayerStore.getState();
+          seek(Math.max(0, s.currentTime - 10));
+          break;
+        }
+        case 'toggle-queue':      toggleQueue(); break;
+        case 'fullscreen-player': toggleFullscreen(); break;
+        case 'native-fullscreen': {
+          const win = getCurrentWindow();
+          win.isFullscreen().then(fs => win.setFullscreen(!fs));
+          break;
+        }
+      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
-  }, [togglePlay]);
+  }, []);

  useEffect(() => {
+    let cancelled = false;
    const unlisten: Array<() => void> = [];

-    listen('media:play-pause', () => togglePlay()).then(u => unlisten.push(u));
-    listen('media:next', () => next()).then(u => unlisten.push(u));
-    listen('media:prev', () => previous()).then(u => unlisten.push(u));
-    listen('tray:play-pause', () => togglePlay()).then(u => unlisten.push(u));
-    listen('tray:next', () => next()).then(u => unlisten.push(u));
-
-    // Handle close → minimize to tray if enabled (Tauri 2 approach)
-    const win = getCurrentWindow();
-    win.onCloseRequested(async (event) => {
-      if (minimizeToTray) {
-        event.preventDefault();
-        await win.hide();
-      } else {
-        // If not minimizing to tray, we want to exit the app completely
-        await invoke('exit_app');
+    const setup = async () => {
+      const handlers: Array<[string, () => void]> = [
+        ['media:play-pause', () => togglePlay()],
+        ['media:next',       () => next()],
+        ['media:prev',       () => previous()],
+        ['media:volume-up',   () => { const s = usePlayerStore.getState(); s.setVolume(Math.min(1, s.volume + 0.05)); }],
+        ['media:volume-down', () => { const s = usePlayerStore.getState(); s.setVolume(Math.max(0, s.volume - 0.05)); }],
+        ['tray:play-pause',  () => togglePlay()],
+        ['tray:next',        () => next()],
+      ];
+      for (const [event, handler] of handlers) {
+        const u = await listen(event, handler);
+        if (cancelled) { u(); return; }
+        unlisten.push(u);
      }
-    }).then(u => unlisten.push(u));

-    return () => unlisten.forEach(u => u());
+      // Handle close → minimize to tray if enabled (Tauri 2 approach)
+      const win = getCurrentWindow();
+      const u = await win.onCloseRequested(async (event) => {
+        if (minimizeToTray) {
+          event.preventDefault();
+          await win.hide();
+        } else {
+          await invoke('exit_app');
+        }
+      });
+      if (cancelled) { u(); return; }
+      unlisten.push(u);
+    };
+
+    setup();
+    return () => { cancelled = true; unlisten.forEach(u => u()); };
  }, [togglePlay, next, previous, minimizeToTray]);

  return null;
@@ -253,15 +300,24 @@ function TauriEventBridge() {

 export default function App() {
  const theme = useThemeStore(s => s.theme);
+  const font = useFontStore(s => s.font);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

+  useEffect(() => {
+    document.documentElement.setAttribute('data-font', font);
+  }, [font]);
+
  useEffect(() => {
    return initAudioListeners();
  }, []);

+  useEffect(() => {
+    useGlobalShortcutsStore.getState().registerAll();
+  }, []);
+
  return (
    <BrowserRouter>
      <TauriEventBridge />
@@ -1,7 +1,8 @@
 import { invoke } from '@tauri-apps/api/core';
+import { useAuthStore } from '../store/authStore';

-const API_KEY = import.meta.env.VITE_LASTFM_API_KEY as string;
-const API_SECRET = import.meta.env.VITE_LASTFM_API_SECRET as string;
+const API_KEY = '9917fb39049225a13bec225ad6d49054';
+const API_SECRET = '03817dda02bee87a178aab7581abae3b';

 export function lastfmIsConfigured(): boolean {
  return Boolean(API_KEY && API_SECRET);
@@ -15,13 +16,24 @@ function errMsg(e: unknown): string {

 async function call(params: Record<string, string>, sign = false, get = false): Promise<any> {
  const entries = Object.entries(params) as [string, string][];
-  return invoke('lastfm_request', {
-    params: entries,
-    sign,
-    get,
-    apiKey: API_KEY,
-    apiSecret: API_SECRET,
-  });
+  try {
+    const result = await invoke('lastfm_request', {
+      params: entries,
+      sign,
+      get,
+      apiKey: API_KEY,
+      apiSecret: API_SECRET,
+    });
+    // Clear session error on any successful authenticated call
+    if (sign) useAuthStore.getState().setLastfmSessionError(false);
+    return result;
+  } catch (e) {
+    // Last.fm error codes 4, 9, 14 = auth/session invalid
+    if (sign && /^Last\.fm (4|9|14)\b/.test(errMsg(e))) {
+      useAuthStore.getState().setLastfmSessionError(true);
+    }
+    throw e;
+  }
 }

 export async function lastfmGetToken(): Promise<string> {
@@ -0,0 +1,47 @@
+export interface LrclibLyrics {
+  syncedLyrics: string | null;
+  plainLyrics: string | null;
+}
+
+export interface LrcLine {
+  time: number; // seconds
+  text: string;
+}
+
+export async function fetchLyrics(
+  artist: string,
+  title: string,
+  album: string,
+  duration: number,
+): Promise<LrclibLyrics | null> {
+  const params = new URLSearchParams({
+    artist_name: artist,
+    track_name: title,
+    album_name: album,
+    duration: Math.round(duration).toString(),
+  });
+  try {
+    const res = await fetch(`https://lrclib.net/api/get?${params}`);
+    if (!res.ok) return null;
+    const data = await res.json();
+    return {
+      syncedLyrics: data.syncedLyrics ?? null,
+      plainLyrics: data.plainLyrics ?? null,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function parseLrc(lrc: string): LrcLine[] {
+  const lines: LrcLine[] = [];
+  for (const line of lrc.split('\n')) {
+    const match = line.match(/^\[(\d+):(\d+\.\d+)\](.*)/);
+    if (!match) continue;
+    const mins = parseInt(match[1], 10);
+    const secs = parseFloat(match[2]);
+    const text = match[3].trim();
+    lines.push({ time: mins * 60 + secs, text });
+  }
+  return lines.sort((a, b) => a.time - b.time);
+}
@@ -1,6 +1,7 @@
 import axios from 'axios';
 import md5 from 'md5';
 import { useAuthStore } from '../store/authStore';
+import { version } from '../../package.json';

 // ─── Secure random salt ────────────────────────────────────────
 function secureRandomSalt(): string {
@@ -13,7 +14,7 @@ function secureRandomSalt(): string {
 function getAuthParams(username: string, password: string) {
  const salt = secureRandomSalt();
  const token = md5(password + salt);
-  return { u: username, t: token, s: salt, v: '1.16.1', c: 'psysonic', f: 'json' };
+  return { u: username, t: token, s: salt, v: '1.16.1', c: `psysonic/${version}`, f: 'json' };
 }

 function getClient() {
@@ -124,6 +125,7 @@ export interface SubsonicArtistInfo {
  smallImageUrl?: string;
  mediumImageUrl?: string;
  largeImageUrl?: string;
+  similarArtist?: Array<{ id: string; name: string; albumCount?: number }>;
 }

 // ─── API Methods ──────────────────────────────────────────────
@@ -165,7 +167,7 @@ export async function getAlbumList(
  offset = 0,
  extra: Record<string, unknown> = {}
 ): Promise<SubsonicAlbum[]> {
-  const data = await api<{ albumList2: { album: SubsonicAlbum[] } }>('getAlbumList2.view', { type, size, offset, ...extra });
+  const data = await api<{ albumList2: { album: SubsonicAlbum[] } }>('getAlbumList2.view', { type, size, offset, _t: Date.now(), ...extra });
  return data.albumList2?.album ?? [];
 }

@@ -4,6 +4,7 @@ import { Play } from 'lucide-react';
 import { SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
 import CachedImage from './CachedImage';
+import { playAlbum } from '../utils/playAlbum';

 interface AlbumCardProps {
  album: SubsonicAlbum;
@@ -50,16 +51,16 @@ export default function AlbumCard({ album }: AlbumCardProps) {
        <div className="album-card-play-overlay">
          <button
            className="album-card-details-btn"
-            onClick={e => { e.stopPropagation(); navigate(`/album/${album.id}`); }}
-            aria-label={`Details zu ${album.name}`}
+            onClick={e => { e.stopPropagation(); playAlbum(album.id); }}
+            aria-label={`${album.name} abspielen`}
          >
-            Details
+            <Play size={15} fill="currentColor" />
          </button>
        </div>
      </div>
      <div className="album-card-info">
-        <p className="album-card-title truncate" data-tooltip={album.name}>{album.name}</p>
-        <p className="album-card-artist truncate" data-tooltip={album.artist}>{album.artist}</p>
+        <p className="album-card-title truncate">{album.name}</p>
+        <p className="album-card-artist truncate">{album.artist}</p>
        {album.year && <p className="album-card-year">{album.year}</p>}
      </div>
    </div>
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus, Info } from 'lucide-react';
-import { SubsonicSong } from '../api/subsonic';
+import { SubsonicSong, buildCoverArtUrl } from '../api/subsonic';
 import CachedImage from './CachedImage';
+import CoverLightbox from './CoverLightbox';
 import { useTranslation } from 'react-i18next';

 function formatDuration(seconds: number): string {
@@ -49,6 +50,7 @@ function BioModal({ bio, onClose }: { bio: string; onClose: () => void }) {
  );
 }

+
 interface AlbumInfo {
  id: string;
  name: string;
@@ -97,6 +99,7 @@ export default function AlbumHeader({
 }: AlbumHeaderProps) {
  const { t } = useTranslation();
  const navigate = useNavigate();
+  const [lightboxOpen, setLightboxOpen] = useState(false);

  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
  const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);
@@ -104,6 +107,13 @@ export default function AlbumHeader({
  return (
    <>
      {bioOpen && bio && <BioModal bio={bio} onClose={onCloseBio} />}
+      {lightboxOpen && info.coverArt && (
+        <CoverLightbox
+          src={buildCoverArtUrl(info.coverArt, 2000)}
+          alt={`${info.name} Cover`}
+          onClose={() => setLightboxOpen(false)}
+        />
+      )}

      <div className="album-detail-header">
        {resolvedCoverUrl && (
@@ -121,7 +131,14 @@ export default function AlbumHeader({
          </button>
          <div className="album-detail-hero">
            {coverUrl ? (
-              <CachedImage className="album-detail-cover" src={coverUrl} cacheKey={coverKey} alt={`${info.name} Cover`} />
+              <button
+                className="album-detail-cover-btn"
+                onClick={() => setLightboxOpen(true)}
+                data-tooltip="Vergrößern"
+                aria-label={`${info.name} Cover vergrößern`}
+              >
+                <CachedImage className="album-detail-cover" src={coverUrl} cacheKey={coverKey} alt={`${info.name} Cover`} />
+              </button>
            ) : (
              <div className="album-detail-cover album-cover-placeholder">♪</div>
            )}
@@ -174,7 +191,7 @@ export default function AlbumHeader({
                  id="album-star-btn"
                  onClick={onToggleStar}
                  data-tooltip={isStarred ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
-                  style={{ color: isStarred ? 'var(--accent)' : 'inherit', border: isStarred ? '1px solid var(--accent)' : undefined }}
+                  style={{ color: isStarred ? 'var(--color-star-active, var(--accent))' : 'inherit', border: isStarred ? '1px solid var(--color-star-active, var(--accent))' : undefined }}
                >
                  <Star size={16} fill={isStarred ? 'currentColor' : 'none'} />
                  {t('albumDetail.favorite')}
@@ -86,6 +86,7 @@ export default function AlbumTrackList({
    albumId: song.albumId, artistId: song.artistId, duration: song.duration,
    coverArt: song.coverArt, track: song.track, year: song.year,
    bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
+    starred: song.starred,
  });

  return (
@@ -143,7 +144,7 @@ export default function AlbumTrackList({
                      : (song.track ?? i + 1)}
              </div>
              <div className="track-info">
-                <span className="track-title" data-tooltip={song.title}>{song.title}</span>
+                <span className="track-title">{song.title}</span>
              </div>
              {hasVariousArtists && (
                <div className="track-artist-cell">
@@ -155,7 +156,7 @@ export default function AlbumTrackList({
                  className="btn btn-ghost track-star-btn"
                  onClick={e => onToggleSongStar(song, e)}
                  data-tooltip={starredSongs.has(song.id) ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
-                  style={{ color: starredSongs.has(song.id) ? 'var(--accent)' : 'var(--text-muted)' }}
+                  style={{ color: starredSongs.has(song.id) ? 'var(--color-star-active, var(--accent))' : 'var(--color-star-inactive, var(--text-muted))' }}
                >
                  <Star size={14} fill={starredSongs.has(song.id) ? 'currentColor' : 'none'} />
                </button>
@@ -31,7 +31,7 @@ export default function ArtistCardLocal({ artist }: Props) {
        )}
      </div>
      <div className="artist-card-info">
-        <span className="artist-card-name" data-tooltip={artist.name}>{artist.name}</span>
+        <span className="artist-card-name">{artist.name}</span>
        {typeof artist.albumCount === 'number' && (
          <span className="artist-card-meta">
            {artist.albumCount} {artist.albumCount === 1 ? 'Album' : 'Alben'}
@@ -3,45 +3,25 @@ import { SubsonicArtist } from '../api/subsonic';
 import ArtistCardLocal from './ArtistCardLocal';
 import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';

 interface Props {
  title: string;
  artists: SubsonicArtist[];
  moreLink?: string;
  moreText?: string;
-  onLoadMore?: () => Promise<void>;
 }

-export default function ArtistRow({ title, artists, moreLink, moreText, onLoadMore }: Props) {
-  const { t } = useTranslation();
+export default function ArtistRow({ title, artists, moreLink, moreText }: Props) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  const [showLeft, setShowLeft] = useState(false);
  const [showRight, setShowRight] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-
-  const loadingRef = useRef(false);

  const handleScroll = () => {
    if (!scrollRef.current) return;
    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
    setShowLeft(scrollLeft > 0);
    setShowRight(scrollLeft < scrollWidth - clientWidth - 5);
-
-    // Auto-load trigger
-    if (onLoadMore && !loadingRef.current && scrollLeft > 0 && scrollLeft + clientWidth >= scrollWidth - 300) {
-      triggerLoadMore();
-    }
-  };
-
-  const triggerLoadMore = async () => {
-    if (!onLoadMore || loadingRef.current) return;
-    loadingRef.current = true;
-    setLoadingMore(true);
-    await onLoadMore();
-    setLoadingMore(false);
-    loadingRef.current = false;
  };

  useEffect(() => {
@@ -63,35 +43,19 @@ export default function ArtistRow({ title, artists, moreLink, moreText, onLoadMo
      <div className="album-row-header">
        <h2 className="section-title" style={{ marginBottom: 0 }}>{title}</h2>
        <div className="album-row-nav">
-          <button 
-            className={`nav-btn ${!showLeft ? 'disabled' : ''}`} 
-            onClick={() => scroll('left')}
-            disabled={!showLeft}
-          >
+          <button className={`nav-btn ${!showLeft ? 'disabled' : ''}`} onClick={() => scroll('left')} disabled={!showLeft}>
            <ChevronLeft size={20} />
          </button>
-          <button 
-            className={`nav-btn ${!showRight ? 'disabled' : ''}`} 
-            onClick={() => scroll('right')}
-            disabled={!showRight}
-          >
+          <button className={`nav-btn ${!showRight ? 'disabled' : ''}`} onClick={() => scroll('right')} disabled={!showRight}>
            <ChevronRight size={20} />
          </button>
        </div>
      </div>
-      
+
      <div className="album-grid-wrapper">
        <div className="album-grid" ref={scrollRef} onScroll={handleScroll}>
          {artists.map(a => <ArtistCardLocal key={a.id} artist={a} />)}
-          {loadingMore && (
-            <div className="album-card-more" style={{ cursor: 'default' }}>
-              <div style={{ padding: '1rem', background: 'var(--bg-app)', borderRadius: '50%' }}>
-                <div className="spinner" style={{ width: 24, height: 24 }} />
-              </div>
-              <span style={{ fontSize: 13, fontWeight: 500 }}>{t('common.loadingMore')}</span>
-            </div>
-          )}
-          {!loadingMore && moreLink && (
+          {moreLink && (
            <div className="album-card-more" onClick={() => navigate(moreLink)}>
              <div style={{ padding: '1rem', background: 'var(--bg-app)', borderRadius: '50%' }}>
                <ArrowRight size={24} />
@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import { ConnectionStatus } from '../hooks/useConnectionStatus';

 interface Props {
@@ -9,17 +10,24 @@ interface Props {

 export default function ConnectionIndicator({ status, isLan, serverName }: Props) {
  const { t } = useTranslation();
+  const navigate = useNavigate();

  const label = isLan ? 'LAN' : t('connection.extern');
-  const title =
+  const tooltip =
    status === 'connected'
-      ? t('connection.connected')
+      ? t('connection.connectedTo', { server: serverName })
      : status === 'disconnected'
-      ? t('connection.disconnected')
+      ? t('connection.disconnectedFrom', { server: serverName })
      : t('connection.checking');

  return (
-    <div className="connection-indicator" data-tooltip={title} data-tooltip-pos="bottom">
+    <div
+      className="connection-indicator"
+      style={{ cursor: 'pointer' }}
+      onClick={() => navigate('/settings', { state: { tab: 'server' } })}
+      data-tooltip={tooltip}
+      data-tooltip-pos="bottom"
+    >
      <div className={`connection-led connection-led--${status}`} />
      <div className="connection-meta">
        <span className="connection-type">{label}</span>
@@ -21,7 +21,7 @@ function sanitizeFilename(name: string): string {

 export default function ContextMenu() {
  const { t } = useTranslation();
-  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong } = usePlayerStore();
+  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong, starredOverrides, setStarredOverride } = usePlayerStore();
  const auth = useAuthStore();
  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
  const navigate = useNavigate();
@@ -53,6 +53,9 @@ export default function ContextMenu() {

  const { type, item, queueIndex } = contextMenu;

+  const isStarred = (id: string, itemStarred?: string) =>
+    id in starredOverrides ? starredOverrides[id] : !!itemStarred;
+
  const handleAction = async (action: () => void | Promise<void>) => {
    closeContextMenu();
    await action();
@@ -148,8 +151,13 @@ export default function ContextMenu() {
              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
                <Radio size={14} /> {t('contextMenu.startRadio')}
              </div>
-              <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
-                <Star size={14} /> {t('contextMenu.favorite')}
+              <div className="context-menu-item" onClick={() => handleAction(() => {
+                const starred = isStarred(song.id, song.starred);
+                setStarredOverride(song.id, !starred);
+                return starred ? unstar(song.id, 'song') : star(song.id, 'song');
+              })}>
+                <Star size={14} fill={isStarred(song.id, song.starred) ? 'currentColor' : 'none'} />
+                {isStarred(song.id, song.starred) ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
              </div>
              {auth.lastfmSessionKey && (() => {
                const loveKey = `${song.title}::${song.artist}`;
@@ -181,8 +189,13 @@ export default function ContextMenu() {
              <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/artist/${album.artistId}`))}>
                <User size={14} /> {t('contextMenu.goToArtist')}
              </div>
-              <div className="context-menu-item" onClick={() => handleAction(() => star(album.id, 'album'))}>
-                <Star size={14} /> {t('contextMenu.favoriteAlbum')}
+              <div className="context-menu-item" onClick={() => handleAction(() => {
+                const starred = isStarred(album.id, album.starred);
+                setStarredOverride(album.id, !starred);
+                return starred ? unstar(album.id, 'album') : star(album.id, 'album');
+              })}>
+                <Star size={14} fill={isStarred(album.id, album.starred) ? 'currentColor' : 'none'} />
+                {isStarred(album.id, album.starred) ? t('contextMenu.unfavoriteAlbum') : t('contextMenu.favoriteAlbum')}
              </div>
              <div className="context-menu-item" onClick={() => handleAction(() => downloadAlbum(album.name, album.id))}>
                <Download size={14} /> {t('contextMenu.download')}
@@ -199,8 +212,13 @@ export default function ContextMenu() {
                <Radio size={14} /> {t('contextMenu.startRadio')}
              </div>
              <div className="context-menu-divider" />
-              <div className="context-menu-item" onClick={() => handleAction(() => star(artist.id, 'artist'))}>
-                <Star size={14} /> {t('contextMenu.favoriteArtist')}
+              <div className="context-menu-item" onClick={() => handleAction(() => {
+                const starred = isStarred(artist.id, artist.starred);
+                setStarredOverride(artist.id, !starred);
+                return starred ? unstar(artist.id, 'artist') : star(artist.id, 'artist');
+              })}>
+                <Star size={14} fill={isStarred(artist.id, artist.starred) ? 'currentColor' : 'none'} />
+                {isStarred(artist.id, artist.starred) ? t('contextMenu.unfavoriteArtist') : t('contextMenu.favoriteArtist')}
              </div>
            </>
          );
@@ -224,8 +242,13 @@ export default function ContextMenu() {
                  <Disc3 size={14} /> {t('contextMenu.openAlbum')}
                </div>
              )}
-              <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
-                <Star size={14} /> {t('contextMenu.favorite')}
+              <div className="context-menu-item" onClick={() => handleAction(() => {
+                const starred = isStarred(song.id, song.starred);
+                setStarredOverride(song.id, !starred);
+                return starred ? unstar(song.id, 'song') : star(song.id, 'song');
+              })}>
+                <Star size={14} fill={isStarred(song.id, song.starred) ? 'currentColor' : 'none'} />
+                {isStarred(song.id, song.starred) ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
              </div>
              {auth.lastfmSessionKey && (() => {
                const loveKey = `${song.title}::${song.artist}`;
@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+
+interface Props {
+  src: string;
+  alt: string;
+  onClose: () => void;
+}
+
+export default function CoverLightbox({ src, alt, onClose }: Props) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  return createPortal(
+    <div className="cover-lightbox-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label={alt}>
+      <button className="cover-lightbox-close" onClick={onClose} aria-label="Close"><X size={20} /></button>
+      <img
+        className="cover-lightbox-img"
+        src={src}
+        alt={alt}
+        onClick={e => e.stopPropagation()}
+      />
+    </div>,
+    document.body
+  );
+}
@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useState, useRef, memo } from 'react';
 import {
  Play, Pause, SkipBack, SkipForward,
-  ChevronDown, Repeat, Repeat1, Square, Music, AudioWaveform, Shuffle
+  ChevronDown, Repeat, Repeat1, Square, Music, MicVocal
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
+import { useLyricsStore } from '../store/lyricsStore';
 import { buildCoverArtUrl, coverArtCacheKey, getArtistInfo } from '../api/subsonic';
 import CachedImage, { useCachedUrl } from './CachedImage';
 import { useTranslation } from 'react-i18next';
-import VisualizerCanvas from './VisualizerCanvas';

 function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -148,9 +148,10 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
  const stop         = usePlayerStore(s => s.stop);
  const toggleRepeat = usePlayerStore(s => s.toggleRepeat);

-  const [vizActive, setVizActive] = useState(false);
-  const [nextPresetTrigger, setNextPresetTrigger] = useState(0);
-  const [presetName, setPresetName] = useState('');
+  const showLyrics      = useLyricsStore(s => s.showLyrics);
+  const activeTab       = useLyricsStore(s => s.activeTab);
+  const isQueueVisible  = usePlayerStore(s => s.isQueueVisible);
+  const toggleQueue     = usePlayerStore(s => s.toggleQueue);

  const duration = currentTrack?.duration ?? 0;
  const coverUrl = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
@@ -182,55 +183,15 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
  return (
    <div className="fs-player" role="dialog" aria-modal="true" aria-label={t('player.fullscreen')}>

-      {/* Layer 1 — blurred artist image OR visualizer */}
-      {vizActive && currentTrack ? (
-        <VisualizerCanvas
-          trackId={currentTrack.id}
-          nextPresetTrigger={nextPresetTrigger}
-          onPresetName={setPresetName}
-        />
-      ) : (
-        <>
-          <FsBg url={bgUrl} />
-          <div className="fs-bg-overlay" aria-hidden="true" />
-        </>
-      )}
+      {/* Layer 1 — blurred artist image */}
+      <FsBg url={bgUrl} />
+      <div className="fs-bg-overlay" aria-hidden="true" />

      {/* Close */}
      <button className="fs-close" onClick={onClose} aria-label={t('player.closeFullscreen')}>
        <ChevronDown size={28} />
      </button>

-      {/* Visualizer toggle + preset controls */}
-      <div style={{ position: 'absolute', top: '1.25rem', right: '4rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-        {vizActive && (
-          <>
-            {presetName && (
-              <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                {presetName}
-              </span>
-            )}
-            <button
-              className="fs-btn fs-btn-sm"
-              onClick={() => setNextPresetTrigger(n => n + 1)}
-              aria-label={t('player.nextPreset')}
-              data-tooltip={t('player.nextPreset')}
-              style={{ color: 'rgba(255,255,255,0.7)' }}
-            >
-              <Shuffle size={14} />
-            </button>
-          </>
-        )}
-        <button
-          className={`fs-btn fs-btn-sm ${vizActive ? 'active' : ''}`}
-          onClick={() => setVizActive(v => !v)}
-          aria-label={t('player.visualizer')}
-          data-tooltip={t('player.visualizer')}
-          style={{ color: vizActive ? 'white' : 'rgba(255,255,255,0.5)' }}
-        >
-          <AudioWaveform size={16} />
-        </button>
-      </div>

      {/* Center stage — everything vertically + horizontally centered */}
      <div className="fs-stage">
@@ -286,6 +247,14 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
          >
            {repeatMode === 'one' ? <Repeat1 size={14} /> : <Repeat size={14} />}
          </button>
+          <button
+            className={`fs-btn fs-btn-sm ${activeTab === 'lyrics' && isQueueVisible ? 'active' : ''}`}
+            onClick={() => { if (!isQueueVisible) toggleQueue(); showLyrics(); }}
+            aria-label={t('player.lyrics')}
+            data-tooltip={t('player.lyrics')}
+          >
+            <MicVocal size={14} />
+          </button>
        </div>

      </div>
@@ -5,6 +5,7 @@ import { getRandomAlbums, SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey, get
 import CachedImage, { useCachedUrl } from './CachedImage';
 import { usePlayerStore } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
+import { playAlbum } from '../utils/playAlbum';

 const INTERVAL_MS = 10000;

@@ -124,7 +125,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
            <button
              className="hero-play-btn"
              id="hero-play-btn"
-              onClick={e => { e.stopPropagation(); navigate(`/album/${album.id}`); }}
+              onClick={e => { e.stopPropagation(); playAlbum(album.id); }}
              aria-label={`${t('hero.playAlbum')} ${album.name}`}
            >
              <Play size={18} fill="currentColor" />
@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useAuthStore } from '../store/authStore';
+import LastfmIcon from './LastfmIcon';
+
+export default function LastfmIndicator() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { lastfmSessionKey, lastfmUsername, lastfmSessionError } = useAuthStore();
+
+  if (!lastfmSessionKey) return null;
+
+  const tooltip = lastfmSessionError
+    ? t('connection.lastfmSessionInvalid')
+    : t('connection.lastfmConnected', { user: lastfmUsername });
+
+  return (
+    <div
+      className="connection-indicator"
+      style={{ cursor: 'pointer' }}
+      onClick={() => navigate('/settings', { state: { tab: 'server' } })}
+      data-tooltip={tooltip}
+      data-tooltip-pos="bottom"
+    >
+      <div
+        className={`connection-led connection-led--${lastfmSessionError ? 'disconnected' : 'connected'}`}
+      />
+      <div className="connection-meta">
+        <span className="connection-type" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          <LastfmIcon size={11} />
+          Last.fm
+        </span>
+        <span className="connection-server">
+          {lastfmSessionError ? t('connection.lastfmSessionInvalid').split(' —')[0] : `@${lastfmUsername}`}
+        </span>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from 'react';
+import { usePlayerStore } from '../store/playerStore';
+import { fetchLyrics, parseLrc, LrcLine } from '../api/lrclib';
+import { useTranslation } from 'react-i18next';
+import type { Track } from '../store/playerStore';
+
+interface Props {
+  currentTrack: Track | null;
+}
+
+export default function LyricsPane({ currentTrack }: Props) {
+  const { t } = useTranslation();
+
+  const [loading, setLoading]         = useState(false);
+  const [syncedLines, setSyncedLines]   = useState<LrcLine[] | null>(null);
+  const [plainLyrics, setPlainLyrics]   = useState<string | null>(null);
+  const [notFound, setNotFound]         = useState(false);
+  const [fetchedFor, setFetchedFor]     = useState<string | null>(null);
+
+  const hasSynced  = syncedLines !== null && syncedLines.length > 0;
+  const currentTime = usePlayerStore(s => hasSynced ? s.currentTime : 0);
+
+  const lineRefs   = useRef<(HTMLDivElement | null)[]>([]);
+  const prevActive = useRef(-1);
+
+  useEffect(() => {
+    if (!currentTrack || currentTrack.id === fetchedFor) return;
+    let cancelled = false;
+    setSyncedLines(null);
+    setPlainLyrics(null);
+    setNotFound(false);
+    setLoading(true);
+    lineRefs.current = [];
+    prevActive.current = -1;
+
+    fetchLyrics(
+      currentTrack.artist ?? '',
+      currentTrack.title,
+      currentTrack.album ?? '',
+      currentTrack.duration ?? 0,
+    ).then(result => {
+      if (cancelled) return;
+      setLoading(false);
+      setFetchedFor(currentTrack.id);
+      if (!result || (!result.syncedLyrics && !result.plainLyrics)) {
+        setNotFound(true);
+        return;
+      }
+      if (result.syncedLyrics) {
+        const lines = parseLrc(result.syncedLyrics);
+        setSyncedLines(lines.length > 0 ? lines : null);
+      }
+      setPlainLyrics(result.plainLyrics);
+    }).catch(() => {
+      if (!cancelled) { setLoading(false); setNotFound(true); }
+    });
+    return () => { cancelled = true; };
+  }, [currentTrack?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Reset when track changes
+  useEffect(() => {
+    setFetchedFor(null);
+  }, [currentTrack?.id]);
+
+  const activeIdx = hasSynced
+    ? syncedLines!.reduce((acc, line, i) => (currentTime >= line.time ? i : acc), -1)
+    : -1;
+
+  useEffect(() => {
+    if (activeIdx < 0 || activeIdx === prevActive.current) return;
+    prevActive.current = activeIdx;
+    lineRefs.current[activeIdx]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }, [activeIdx]);
+
+  if (!currentTrack) {
+    return (
+      <div className="lyrics-pane-empty">
+        <p className="lyrics-status">{t('player.lyricsNotFound')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="lyrics-pane">
+      {loading && <p className="lyrics-status">{t('player.lyricsLoading')}</p>}
+      {notFound && !loading && <p className="lyrics-status">{t('player.lyricsNotFound')}</p>}
+      {hasSynced && (
+        <div className="lyrics-synced">
+          {syncedLines!.map((line, i) => (
+            <div
+              key={i}
+              ref={el => { lineRefs.current[i] = el; }}
+              className={`lyrics-line${i === activeIdx ? ' active' : ''}`}
+            >
+              {line.text || '\u00A0'}
+            </div>
+          ))}
+        </div>
+      )}
+      {!hasSynced && plainLyrics && (
+        <div className="lyrics-plain">
+          {plainLyrics.split('\n').map((line, i) => (
+            <p key={i} className="lyrics-plain-line">{line || '\u00A0'}</p>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,49 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+
+interface Props {
+  text: string;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+}
+
+export default function MarqueeText({ text, className, style, onClick }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const textRef = useRef<HTMLSpanElement>(null);
+  const [scrollAmount, setScrollAmount] = useState(0);
+
+  const measure = useCallback(() => {
+    const container = containerRef.current;
+    const text = textRef.current;
+    if (!container || !text) return;
+    text.style.display = 'inline-block';
+    const textWidth = text.getBoundingClientRect().width;
+    text.style.display = '';
+    const overflow = textWidth - container.clientWidth;
+    setScrollAmount(overflow > 4 ? Math.ceil(overflow) : 0);
+  }, []);
+
+  useEffect(() => {
+    measure();
+    const ro = new ResizeObserver(measure);
+    if (containerRef.current) ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [text, measure]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`marquee-wrap${className ? ` ${className}` : ''}`}
+      style={style}
+      onClick={onClick}
+    >
+      <span
+        ref={textRef}
+        className={scrollAmount > 0 ? 'marquee-scroll' : ''}
+        style={scrollAmount > 0 ? { '--marquee-amount': `-${scrollAmount}px` } as React.CSSProperties : {}}
+      >
+        {text}
+      </span>
+    </div>
+  );
+}
@@ -14,6 +14,7 @@ export default function NowPlayingDropdown() {
  const isPlaying = usePlayerStore(s => s.isPlaying);
  const ownUsername = useAuthStore(s => s.getActiveServer()?.username ?? '');
  const [loading, setLoading] = useState(false);
+  const [spinning, setSpinning] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const fetchNowPlaying = async () => {
@@ -28,6 +29,13 @@ export default function NowPlayingDropdown() {
    }
  };

+  const handleRefresh = () => {
+    setSpinning(true);
+    fetchNowPlaying().finally(() => {
+      setTimeout(() => setSpinning(false), 600);
+    });
+  };
+
  // Poll in background so the badge stays current without opening the dropdown
  useEffect(() => {
    fetchNowPlaying();
@@ -104,11 +112,11 @@ export default function NowPlayingDropdown() {
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--border-subtle)', paddingBottom: '0.5rem' }}>
            <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>{t('nowPlaying.title')}</h3>
            <button
-              onClick={fetchNowPlaying}
-              className={`btn btn-ghost ${loading ? 'animate-spin' : ''}`}
-              style={{ width: '28px', height: '28px', padding: 0 }}
+              onClick={handleRefresh}
+              className="btn btn-ghost"
+              style={{ width: '28px', height: '28px', padding: 0, justifyContent: 'center' }}
            >
-              <RefreshCw size={14} />
+              <RefreshCw size={14} className={spinning ? 'animate-spin' : ''} />
            </button>
          </div>

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface Props {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function PSmallLogo({ className, style }: Props) {
+  return (
+    <svg viewBox="0 0 115.549 130.30972" xmlns="http://www.w3.org/2000/svg" style={style} className={className}><defs id="defs1">
+      <linearGradient id="psmallGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stopColor="var(--accent)" />
+        <stop offset="100%" stopColor="var(--ctp-blue)" />
+      </linearGradient>
+    </defs><g
+     id="layer1"
+     transform="translate(220.53237,27.789086)"><path
+       fill="url(#psmallGrad)"
+       d="m -191.83501,87.581279 v -14.93937 l 1.01946,-0.029 c 1.8496,-0.0526 5.09881,-2.007 6.98453,-4.20123 2.13731,-2.48697 3.28384,-4.43657 4.52545,-7.69521 0.51751,-1.35819 1.078,-2.78694 1.24554,-3.175 0.16755,-0.38805 0.88173,-2.7693 1.58707,-5.29166 0.70533,-2.52236 1.41605,-4.90361 1.57937,-5.29167 0.16441,-0.39067 0.30759,11.85061 0.32081,27.42847 l 0.0239,28.134031 h -8.64306 -8.64305 z m -3.42317,-19.65031 c -0.81559,-0.16111 -1.84746,-0.48272 -2.29306,-0.71468 -1.09242,-0.5687 -2.72853,-2.16884 -2.74064,-2.68038 -0.005,-0.22765 -0.38465,-0.86265 -0.84281,-1.41111 -0.8626,-1.03264 -2.38323,-4.66133 -4.63113,-11.05137 -1.72997,-4.91772 -1.63358,-4.68451 -3.35352,-8.11389 -0.82714,-1.64924 -1.91998,-3.45186 -2.42853,-4.00582 -1.28805,-1.40307 -4.41406,-2.7715 -6.89485,-3.01827 l -2.08965,-0.20785 1.43221,-0.99035 c 1.5468,-1.06957 5.31147,-2.35399 6.9124,-2.35835 1.72563,-0.005 4.25283,0.7809 5.71247,1.77575 1.63175,1.11217 3.92377,3.83335 3.77488,4.48172 -0.0559,0.24344 0.11427,0.44261 0.37817,0.44261 0.53171,0 3.78445,6.24176 3.78445,7.26208 0,0.15195 0.30609,0.92171 0.6802,1.71057 0.37412,0.78887 1.08633,2.44854 1.5827,3.68817 1.00279,2.50434 2.57055,5.33152 2.95544,5.32962 0.85183,-0.004 3.83204,-7.97894 5.40479,-14.46266 1.9193,-7.91232 5.01161,-18.44694 6.10967,-20.81389 2.30114,-4.96024 4.60601,-7.03734 8.12223,-7.31959 1.95377,-0.15683 2.44243,-0.0601 4.01261,0.79453 2.49546,1.35819 3.31044,2.35029 5.40102,6.57479 0.93741,1.89425 3.29625,9.1126 4.36446,13.35583 0.51289,2.03729 1.21262,4.57729 1.55498,5.64444 0.34236,1.06716 0.83543,2.65466 1.09573,3.52778 0.96371,3.23267 3.75139,8.2344 5.51689,9.89856 2.09506,1.9748 4.10606,3.2977 5.85136,3.84922 0.72761,0.22993 1.32292,0.49404 1.32292,0.58692 0,0.0929 -0.71641,0.48577 -1.59202,0.87309 -2.29705,1.01609 -6.48839,1.02714 -8.75823,0.0231 -3.42674,-1.51581 -6.17101,-4.45149 -8.36088,-8.94406 -0.59782,-1.22642 -1.23412,-2.50231 -1.41401,-2.8353 -0.17988,-0.333 -0.47718,-1.20612 -0.66066,-1.94028 -0.74987,-3.00045 -6.42415,-19.25706 -6.99617,-20.04376 -0.79895,-1.09881 -0.87818,-1.08476 -1.55823,0.27628 -1.1693,2.3402 -2.07427,5.18987 -3.61302,11.37709 -3.03871,12.21839 -6.36478,22.38234 -8.0081,24.47148 -0.36655,0.466 -0.66646,0.99153 -0.66646,1.16785 0,0.86017 -2.61454,3.05174 -4.28395,3.59089 -1.94625,0.62857 -2.53141,0.65417 -4.78366,0.20926 z m 49.82815,-13.29265 c -2.77991,-0.70614 -6.29714,-6.05076 -8.15323,-12.38927 -0.30389,-1.03778 -0.47868,-1.96073 -0.38841,-2.051 0.0903,-0.0903 1.5695,-0.22877 3.28719,-0.30779 8.47079,-0.38969 9.78292,-0.63406 14.05919,-2.61837 3.78653,-1.75706 9.09259,-6.79386 10.56941,-10.03304 3.78708,-8.30644 4.33485,-14.20262 2.08448,-22.4376404 -1.15336,-4.22063002 -3.6401,-8.21361 -6.73205,-10.80969 -1.12271,-0.94265 -2.12066,-1.8146 -2.21767,-1.93765 -0.3794,-0.48123 -4.30858,-2.4333296 -6.41876,-3.1889796 -2.16778,-0.77628 -2.64336,-0.79956 -18.71666,-0.91597 l -16.49236,-0.11945 V -0.68605142 10.798429 h -0.8256 c -1.53109,0 -5.09758,2.09614 -6.79456,3.99338 -1.65639,1.85186 -4.54446,7.43871 -5.41264,10.47051 -0.25002,0.87312 -0.58222,1.98437 -0.73823,2.46944 -0.39136,1.2169 -2.0765,7.30176 -3.12634,11.28889 -0.2052,0.7793 -0.33685,-11.27627 -0.35693,-32.6846104 l -0.0318,-33.9193396 1.55319,-0.12371 c 0.85426,-0.068 12.32395,-0.10028 25.4882,-0.0716 20.69377,0.045 24.2694,0.12953 26.40444,0.62402 3.9887,0.92382 7.58472,2.04932 7.58472,2.3739 0,0.16576 0.52886,0.30139 1.17524,0.30139 2.09331,0 10.76432,4.87704 10.22435,5.75072 -0.12186,0.19718 -0.0447,0.24734 0.17328,0.11263 0.60692,-0.3751 4.21691,3.0333 6.9953,6.60467 2.06429,2.6534496 4.63504,8.4775396 5.94174,13.4611396 1.7681,6.7433 1.74625,15.8657704 -0.0549,22.9305504 -2.11084,8.27937 -4.97852,13.41407 -10.75456,19.25647 -2.59968,2.62955 -8.78375,7.02548 -9.88326,7.02548 -0.27557,0 -0.68644,0.1854 -0.91304,0.412 -0.39593,0.39593 -0.78905,0.56749 -4.31522,1.88319 -3.68968,1.37672 -10.83412,2.28545 -13.21446,1.68081 z m 7.57002,-15.26489 c 0,-0.19403 -0.07,-0.35278 -0.15557,-0.35278 -0.0856,0 -0.25368,0.15875 -0.3736,0.35278 -0.11992,0.19403 -0.0499,0.35278 0.15557,0.35278 0.20548,0 0.3736,-0.15875 0.3736,-0.35278 z"
+       id="path1" /></g></svg>
+  );
+}
@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
-  Square, Repeat, Repeat1, Maximize2, SlidersHorizontal, X, Heart
+  Square, Repeat, Repeat1, Maximize2, SlidersHorizontal, X, Heart, MicVocal
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
@@ -11,6 +12,8 @@ import WaveformSeek from './WaveformSeek';
 import Equalizer from './Equalizer';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { useLyricsStore } from '../store/lyricsStore';
+import MarqueeText from './MarqueeText';

 function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -23,11 +26,15 @@ export default function PlayerBar() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [eqOpen, setEqOpen] = useState(false);
+  const [showVolPct, setShowVolPct] = useState(false);
+  const showLyrics   = useLyricsStore(s => s.showLyrics);
+  const activeTab    = useLyricsStore(s => s.activeTab);
  const {
    currentTrack, isPlaying, currentTime, volume,
    togglePlay, next, previous, setVolume,
    stop, toggleRepeat, repeatMode, toggleFullscreen,
    lastfmLoved, toggleLastfmLove,
+    isQueueVisible, toggleQueue,
  } = usePlayerStore();
  const { lastfmSessionKey } = useAuthStore();

@@ -40,7 +47,7 @@ export default function PlayerBar() {
  }, [setVolume]);

  const volumeStyle = {
-    background: `linear-gradient(to right, var(--ctp-mauve) ${volume * 100}%, var(--ctp-surface2) ${volume * 100}%)`,
+    background: `linear-gradient(to right, var(--volume-accent, var(--accent)) ${volume * 100}%, var(--ctp-surface2) ${volume * 100}%)`,
  };

  return (
@@ -72,22 +79,18 @@ export default function PlayerBar() {
          )}
        </div>
        <div className="player-track-meta">
-          <div
+          <MarqueeText
+            text={currentTrack?.title ?? t('player.noTitle')}
            className="player-track-name"
-            data-tooltip={currentTrack?.title ?? ''}
            style={{ cursor: currentTrack?.albumId ? 'pointer' : 'default' }}
            onClick={() => currentTrack?.albumId && navigate(`/album/${currentTrack.albumId}`)}
-          >
-            {currentTrack?.title ?? t('player.noTitle')}
-          </div>
-          <div
+          />
+          <MarqueeText
+            text={currentTrack?.artist ?? '—'}
            className="player-track-artist"
-            data-tooltip={currentTrack?.artist ?? ''}
            style={{ cursor: currentTrack?.artistId ? 'pointer' : 'default' }}
            onClick={() => currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
-          >
-            {currentTrack?.artist ?? '—'}
-          </div>
+          />
        </div>
        {currentTrack && lastfmSessionKey && (
          <button
@@ -116,7 +119,7 @@ export default function PlayerBar() {
          aria-label={isPlaying ? t('player.pause') : t('player.play')}
          data-tooltip={isPlaying ? t('player.pause') : t('player.play')}
        >
-          {isPlaying ? <Pause size={22} /> : <Play size={22} fill="currentColor" />}
+          {isPlaying ? <Pause size={22} fill="currentColor" /> : <Play size={22} fill="currentColor" />}
        </button>
        <button className="player-btn" onClick={next} aria-label={t('player.next')} data-tooltip={t('player.next')}>
          <SkipForward size={19} />
@@ -141,6 +144,16 @@ export default function PlayerBar() {
        <span className="player-time">{formatTime(duration)}</span>
      </div>

+      {/* Lyrics Button */}
+      <button
+        className={`player-btn player-btn-sm ${activeTab === 'lyrics' && isQueueVisible ? 'active' : ''}`}
+        onClick={() => { if (!isQueueVisible) toggleQueue(); showLyrics(); }}
+        aria-label={t('player.lyrics')}
+        data-tooltip={t('player.lyrics')}
+      >
+        <MicVocal size={15} />
+      </button>
+
      {/* EQ Button */}
      <button
        className={`player-btn player-btn-sm player-eq-btn ${eqOpen ? 'active' : ''}`}
@@ -161,22 +174,31 @@ export default function PlayerBar() {
        >
          {volume === 0 ? <VolumeX size={16} /> : <Volume2 size={16} />}
        </button>
-        <input
-          type="range"
-          id="player-volume"
-          min={0}
-          max={1}
-          step={0.01}
-          value={volume}
-          onChange={handleVolume}
-          style={volumeStyle}
-          aria-label={t('player.volume')}
-          className="player-volume-slider"
-        />
+        <div className="player-volume-slider-wrap">
+          {showVolPct && (
+            <span className="player-volume-pct" style={{ left: `${volume * 100}%` }}>
+              {Math.round(volume * 100)}%
+            </span>
+          )}
+          <input
+            type="range"
+            id="player-volume"
+            min={0}
+            max={1}
+            step={0.01}
+            value={volume}
+            onChange={handleVolume}
+            style={volumeStyle}
+            aria-label={t('player.volume')}
+            className="player-volume-slider"
+            onMouseEnter={() => setShowVolPct(true)}
+            onMouseLeave={() => setShowVolPct(false)}
+          />
+        </div>
      </div>

-      {/* EQ Popup */}
-      {eqOpen && (
+      {/* EQ Popup — rendered via portal to avoid backdrop-filter containing-block issue */}
+      {eqOpen && createPortal(
        <>
          <div className="eq-popup-backdrop" onClick={() => setEqOpen(false)} />
          <div className="eq-popup">
@@ -188,7 +210,8 @@ export default function PlayerBar() {
            </div>
            <Equalizer />
          </div>
-        </>
+        </>,
+        document.body
      )}

    </footer>
@@ -1,10 +1,13 @@
 import React, { useState, useRef } from 'react';
 import { Track, usePlayerStore } from '../store/playerStore';
-import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle } from 'lucide-react';
+import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic } from 'lucide-react';
 import { buildCoverArtUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { useAuthStore } from '../store/authStore';
+import { useLyricsStore } from '../store/lyricsStore';
+import LyricsPane from './LyricsPane';

 function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -120,6 +123,7 @@ export default function QueuePanel() {
  const queue = usePlayerStore(s => s.queue);
  const queueIndex = usePlayerStore(s => s.queueIndex);
  const currentTrack = usePlayerStore(s => s.currentTrack);
+  const currentTime = usePlayerStore(s => s.currentTime);
  const isQueueVisible = usePlayerStore(s => s.isQueueVisible);
  const playTrack = usePlayerStore(s => s.playTrack);
  const toggleQueue = usePlayerStore(s => s.toggleQueue);
@@ -130,6 +134,34 @@ export default function QueuePanel() {
  const enqueue = usePlayerStore(s => s.enqueue);
  const contextMenu = usePlayerStore(s => s.contextMenu);

+  const crossfadeEnabled = useAuthStore(s => s.crossfadeEnabled);
+  const crossfadeSecs = useAuthStore(s => s.crossfadeSecs);
+  const gaplessEnabled = useAuthStore(s => s.gaplessEnabled);
+  const setCrossfadeEnabled = useAuthStore(s => s.setCrossfadeEnabled);
+  const setCrossfadeSecs = useAuthStore(s => s.setCrossfadeSecs);
+  const setGaplessEnabled = useAuthStore(s => s.setGaplessEnabled);
+
+  const activeTab  = useLyricsStore(s => s.activeTab);
+  const setTab     = useLyricsStore(s => s.setTab);
+
+  const [showRemainingTime, setShowRemainingTime] = useState(false);
+  const [showCrossfadePopover, setShowCrossfadePopover] = useState(false);
+  const crossfadeBtnRef = useRef<HTMLButtonElement>(null);
+  const crossfadePopoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!showCrossfadePopover) return;
+    const handle = (e: MouseEvent) => {
+      if (
+        crossfadeBtnRef.current?.contains(e.target as Node) ||
+        crossfadePopoverRef.current?.contains(e.target as Node)
+      ) return;
+      setShowCrossfadePopover(false);
+    };
+    document.addEventListener('mousedown', handle);
+    return () => document.removeEventListener('mousedown', handle);
+  }, [showCrossfadePopover]);
+
  const [draggedIdx, setDraggedIdx] = useState<number | null>(null);
  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
  const isDraggingInternalRef = useRef(false);
@@ -255,42 +287,34 @@ export default function QueuePanel() {
      }}
    >
      <div className="queue-header">
-        <div>
-          <h2 style={{ fontSize: '14px', fontWeight: 600, margin: 0 }}>{t('queue.title')}</h2>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: '8px', minWidth: 0 }}>
+          <h2 style={{ fontSize: '16px', fontWeight: 700, margin: 0, flexShrink: 0 }}>{t('queue.title')}</h2>
          {queue.length > 0 && (() => {
            const totalSecs = queue.reduce((acc, t) => acc + (t.duration || 0), 0);
-            const h = Math.floor(totalSecs / 3600);
-            const m = Math.floor((totalSecs % 3600) / 60);
-            const s = totalSecs % 60;
-            const dur = h > 0
-              ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
-              : `${m}:${s.toString().padStart(2, '0')}`;
+            const remainingSecs = Math.max(0,
+              (queue[queueIndex]?.duration ?? 0) - currentTime
+              + queue.slice(queueIndex + 1).reduce((acc, t) => acc + (t.duration || 0), 0)
+            );
+            const fmt = (secs: number) => {
+              const h = Math.floor(secs / 3600);
+              const m = Math.floor((secs % 3600) / 60);
+              const s = secs % 60;
+              return h > 0
+                ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+                : `${m}:${s.toString().padStart(2, '0')}`;
+            };
+            const dur = showRemainingTime ? `-${fmt(Math.floor(remainingSecs))}` : fmt(Math.floor(totalSecs));
            return (
-              <div style={{ fontSize: '11px', color: 'var(--text-muted)', marginTop: '2px' }}>
+              <span
+                onClick={() => setShowRemainingTime(v => !v)}
+                data-tooltip={showRemainingTime ? t('queue.showTotal') : t('queue.showRemaining')}
+                style={{ fontSize: '13px', color: 'var(--accent)', whiteSpace: 'nowrap', cursor: 'pointer', userSelect: 'none' }}
+              >
                {queue.length} {queue.length === 1 ? t('queue.trackSingular') : t('queue.trackPlural')} · {dur}
-              </div>
+              </span>
            );
          })()}
        </div>
-        
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <button onClick={() => shuffleQueue()} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.shuffle')} data-tooltip={t('queue.shuffle')} disabled={queue.length < 2}>
-            <Shuffle size={14} />
-          </button>
-          <button onClick={handleSave} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.savePlaylist')} data-tooltip={t('queue.save')}>
-            <Save size={14} />
-          </button>
-          <button onClick={handleLoad} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.loadPlaylist')} data-tooltip={t('queue.load')}>
-            <FolderOpen size={14} />
-          </button>
-          <button onClick={handleClear} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.clear')} data-tooltip={t('queue.clear')}>
-            <Trash2 size={14} />
-          </button>
-          <div style={{ width: '1px', height: '14px', background: 'var(--border)', margin: '0 4px' }} />
-          <button onClick={toggleQueue} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.close')} data-tooltip={t('queue.hide')}>
-            <X size={16} />
-          </button>
-        </div>
      </div>

      {currentTrack && (
@@ -301,38 +325,102 @@ export default function QueuePanel() {
            ) : (
              <div className="fallback"><Music size={32} /></div>
            )}
+            {(currentTrack.bitRate || currentTrack.suffix) && (
+              <div className="queue-current-tech">
+                {currentTrack.bitRate && currentTrack.suffix
+                  ? `${currentTrack.bitRate} · ${currentTrack.suffix.toUpperCase()}`
+                  : currentTrack.suffix?.toUpperCase() ?? ''}
+              </div>
+            )}
          </div>
          <div className="queue-current-info">
-            <h3 className="truncate" data-tooltip={currentTrack.title}>{currentTrack.title}</h3>
+            <h3 className="truncate">{currentTrack.title}</h3>
            <div
              className="queue-current-sub truncate"
-              data-tooltip={currentTrack.artist}
              style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
              onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
            >{currentTrack.artist}</div>
            <div
              className="queue-current-sub truncate"
-              data-tooltip={currentTrack.album}
              style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
              onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
            >{currentTrack.album}</div>
            {currentTrack.year && (
              <div className="queue-current-sub">{currentTrack.year}</div>
            )}
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '6px' }}>
-              <div className="queue-current-tech">
-                {currentTrack.bitRate && currentTrack.suffix ? (
-                  `${currentTrack.bitRate} kbps · ${currentTrack.suffix.toUpperCase()}`
-                ) : (
-                  currentTrack.suffix?.toUpperCase() ?? ''
-                )}
-              </div>
-              {renderStars(currentTrack.userRating)}
-            </div>
+            {renderStars(currentTrack.userRating)}
          </div>
        </div>
      )}

+      {activeTab === 'queue' ? (<>
+        <div className="queue-toolbar">
+        <button className="queue-round-btn" onClick={() => shuffleQueue()} disabled={queue.length < 2} data-tooltip={t('queue.shuffle')} aria-label={t('queue.shuffle')}>
+          <Shuffle size={13} />
+        </button>
+        <button className="queue-round-btn" onClick={handleSave} data-tooltip={t('queue.savePlaylist')} aria-label={t('queue.savePlaylist')}>
+          <Save size={13} />
+        </button>
+        <button className="queue-round-btn" onClick={handleLoad} data-tooltip={t('queue.loadPlaylist')} aria-label={t('queue.loadPlaylist')}>
+          <FolderOpen size={13} />
+        </button>
+        <button className="queue-round-btn" onClick={handleClear} data-tooltip={t('queue.clear')} aria-label={t('queue.clear')}>
+          <Trash2 size={13} />
+        </button>
+        <div className="queue-toolbar-sep" />
+        <button
+          className={`queue-round-btn${gaplessEnabled ? ' active' : ''}`}
+          onClick={() => setGaplessEnabled(!gaplessEnabled)}
+          data-tooltip={t('queue.gapless')}
+          aria-label={t('queue.gapless')}
+        >
+          <Infinity size={13} />
+        </button>
+        <div style={{ position: 'relative' }}>
+          <button
+            ref={crossfadeBtnRef}
+            className={`queue-round-btn${crossfadeEnabled || showCrossfadePopover ? ' active' : ''}`}
+            onClick={() => {
+              if (crossfadeEnabled) {
+                setCrossfadeEnabled(false);
+                setShowCrossfadePopover(false);
+              } else {
+                setCrossfadeEnabled(true);
+                setShowCrossfadePopover(true);
+              }
+            }}
+            data-tooltip={showCrossfadePopover ? undefined : t('queue.crossfade')}
+            aria-label={t('queue.crossfade')}
+          >
+            <Waves size={13} />
+          </button>
+          {showCrossfadePopover && (
+            <div className="crossfade-popover" ref={crossfadePopoverRef}>
+              <div className="crossfade-popover-label">
+                <Waves size={11} />
+                {t('queue.crossfade')}
+                <span className="crossfade-popover-value">{crossfadeSecs}s</span>
+              </div>
+              <input
+                type="range"
+                min={1}
+                max={10}
+                step={0.5}
+                value={crossfadeSecs}
+                onChange={e => {
+                  setCrossfadeSecs(Number(e.target.value));
+                  setCrossfadeEnabled(true);
+                }}
+                className="crossfade-popover-slider"
+              />
+              <div className="crossfade-popover-range">
+                <span>1s</span><span>10s</span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
      {currentTrack && queue.length > 0 && <div className="queue-divider"><span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)' }}>{t('queue.nextTracks')}</span></div>}
      
      <div className="queue-list" ref={queueListRef}>
@@ -390,6 +478,28 @@ export default function QueuePanel() {
          })
        )}
      </div>
+      </>) : (
+        <LyricsPane currentTrack={currentTrack} />
+      )}
+
+      <div className="queue-tab-bar">
+        <button
+          className={`queue-tab-btn${activeTab === 'queue' ? ' active' : ''}`}
+          onClick={() => setTab('queue')}
+          aria-label={t('queue.title')}
+        >
+          <ListMusic size={14} />
+          {t('queue.title')}
+        </button>
+        <button
+          className={`queue-tab-btn${activeTab === 'lyrics' ? ' active' : ''}`}
+          onClick={() => setTab('lyrics')}
+          aria-label={t('player.lyrics')}
+        >
+          <MicVocal size={14} />
+          {t('player.lyrics')}
+        </button>
+      </div>

      {saveModalOpen && (
        <SavePlaylistModal 
@@ -8,10 +8,8 @@ import {
  Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle, ListMusic,
  PanelLeftClose, PanelLeft, HelpCircle, Dices, ArrowUpCircle, AudioLines
 } from 'lucide-react';
-
-const PsysonicLogo = () => (
-  <img src="/logo-psysonic.png" alt="Psysonic Logo" width="36" height="36" style={{ borderRadius: '8px' }} />
-);
+import PsysonicLogo from './PsysonicLogo';
+import PSmallLogo from './PSmallLogo';

 const navItems = [
  { icon: Disc3, labelKey: 'sidebar.mainstage', to: '/' },
@@ -99,19 +97,21 @@ export default function Sidebar({
  return (
    <aside className={`sidebar animate-slide-in ${isCollapsed ? 'collapsed' : ''}`}>
      <div className="sidebar-brand">
-        <button 
-          className="collapse-btn"
-          onClick={toggleCollapse}
-          data-tooltip={isCollapsed ? t('sidebar.expand') : t('sidebar.collapse')}
-          data-tooltip-pos="bottom"
-          style={{ padding: 0 }}
-        >
-          {isCollapsed ? <PanelLeft size={24} /> : <PanelLeftClose size={24} />}
-        </button>
-        {!isCollapsed && <PsysonicLogo />}
-        {!isCollapsed && <span className="brand-name">Psysonic</span>}
+        {isCollapsed
+          ? <PSmallLogo style={{ height: '32px', width: 'auto' }} />
+          : <PsysonicLogo style={{ height: '28px', width: 'auto' }} />
+        }
      </div>

+      <button
+        className="collapse-btn"
+        onClick={toggleCollapse}
+        data-tooltip={isCollapsed ? t('sidebar.expand') : t('sidebar.collapse')}
+        data-tooltip-pos="right"
+      >
+        {isCollapsed ? <PanelLeft size={14} /> : <PanelLeftClose size={14} />}
+      </button>
+
      <nav className="sidebar-nav" aria-label="Hauptnavigation">
        {!isCollapsed && <span className="nav-section-label">{t('sidebar.library')}</span>}
        {navItems.map(item => (
@@ -0,0 +1,201 @@
+import { useState } from 'react';
+import { Check, ChevronDown } from 'lucide-react';
+
+interface ThemeDef {
+  id: string;
+  label: string;
+  bg: string;
+  card: string;
+  accent: string;
+}
+
+const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
+  {
+    group: 'Games',
+    themes: [
+      { id: 'ascalon',           label: 'Ascalon',           bg: '#1c1a17', card: '#0f0d0b', accent: '#d4af37' },
+      { id: 'azerothian-gold',   label: 'Azerothian Gold',   bg: '#1a1a1a', card: '#0a0a0a', accent: '#c19e67' },
+      { id: 'grand-theft-audio', label: 'Grand Theft Audio', bg: '#141414', card: '#0a0a0a', accent: '#57b05a' },
+      { id: 'lambda-17',         label: 'Lambda 17',         bg: '#14171a', card: '#0a0b0c', accent: '#ff9d00' },
+      { id: 'nightcity-2077',    label: 'NightCity 2077',    bg: '#050505', card: '#000000', accent: '#FCEE0A' },
+      { id: 'v-tactical',        label: 'V-Tactical',        bg: '#161c22', card: '#090c0e', accent: '#ff8a00' },
+    ],
+  },
+  {
+    group: 'Movies',
+    themes: [
+      { id: 'blade',                label: 'Blade',                bg: '#121212', card: '#050505', accent: '#b30000' },
+      { id: 'imperial-sith',        label: 'Imperial Sith',        bg: '#0f0f11', card: '#050505', accent: '#e60000' },
+      { id: 'middle-earth',         label: 'Middle Earth',         bg: '#f4e4bc', card: '#2a1d15', accent: '#d4af37' },
+      { id: 'morpheus',             label: 'Morpheus',             bg: '#0a0a0a', card: '#000000', accent: '#00ff41' },
+      { id: 'order-of-the-phoenix', label: 'Order of the Phoenix', bg: '#181818', card: '#0a0a0a', accent: '#e63900' },
+      { id: 'pandora',              label: 'Pandora',              bg: '#0c1b22', card: '#142b35', accent: '#00f2ff' },
+      { id: 'stark-hud',            label: 'Stark HUD',            bg: '#0b0f15', card: '#05070a', accent: '#00f2ff' },
+    ],
+  },
+  {
+    group: 'Open Source Classics',
+    themes: [
+      { id: 'nord-aurora',          label: 'Aurora',       bg: '#3b4252', card: '#434c5e', accent: '#b48ead' },
+      { id: 'gruvbox-dark-hard',    label: 'Dark Hard',    bg: '#1d2021', card: '#3c3836', accent: '#fabd2f' },
+      { id: 'gruvbox-dark-medium',  label: 'Dark Medium',  bg: '#282828', card: '#3c3836', accent: '#fabd2f' },
+      { id: 'gruvbox-dark-soft',    label: 'Dark Soft',    bg: '#32302f', card: '#45403d', accent: '#fabd2f' },
+      { id: 'frappe',               label: 'Frappé',       bg: '#303446', card: '#414559', accent: '#ca9ee6' },
+      { id: 'nord-frost',           label: 'Frost',        bg: '#1e2d3d', card: '#243447', accent: '#88c0d0' },
+      { id: 'latte',                label: 'Latte',        bg: '#eff1f5', card: '#ccd0da', accent: '#8839ef' },
+      { id: 'gruvbox-light-hard',   label: 'Light Hard',   bg: '#f9f5d7', card: '#f2e5bc', accent: '#b57614' },
+      { id: 'gruvbox-light-medium', label: 'Light Medium', bg: '#fbf1c7', card: '#f2e5bc', accent: '#b57614' },
+      { id: 'gruvbox-light-soft',   label: 'Light Soft',   bg: '#f2e5bc', card: '#ebdbb2', accent: '#b57614' },
+      { id: 'macchiato',            label: 'Macchiato',    bg: '#24273a', card: '#363a4f', accent: '#c6a0f6' },
+      { id: 'mocha',                label: 'Mocha',        bg: '#1e1e2e', card: '#313244', accent: '#cba6f7' },
+      { id: 'nord',                 label: 'Polar Night',  bg: '#3b4252', card: '#434c5e', accent: '#88c0d0' },
+      { id: 'nord-snowstorm',       label: 'Snowstorm',    bg: '#e5e9f0', card: '#eceff4', accent: '#5e81ac' },
+    ],
+  },
+  {
+    group: 'Operating Systems',
+    themes: [
+      { id: 'cupertino-dark',  label: 'Cupertino Dark',  bg: '#1e1e1f', card: '#2d2d2f', accent: '#007aff' },
+      { id: 'cupertino-light', label: 'Cupertino Light', bg: '#ffffff', card: '#f2f2f7', accent: '#0071e3' },
+      { id: 'aero-glass',      label: 'W7',              bg: '#cddbed', card: '#1d4268', accent: '#1878e8' },
+      { id: 'w98',             label: 'W98',             bg: '#008080', card: '#c0c0c0', accent: '#000080' },
+      { id: 'luna-teal',       label: 'WXP',             bg: '#ece9d8', card: '#0055e5', accent: '#3c9d29' },
+    ],
+  },
+  {
+    group: 'Psysonic Themes',
+    themes: [
+      { id: 'neon-drift',         label: 'Neon Drift',  bg: '#12132c', card: '#080916', accent: '#00f2ff' },
+      { id: 'nucleo',             label: 'Nucleo',      bg: '#f5e4c3', card: '#dfc08f', accent: '#7a5218' },
+      { id: 'poison',             label: 'Poison',      bg: '#1f1f1f', card: '#282828', accent: '#1bd655' },
+      { id: 'psychowave',         label: 'Psychowave',  bg: '#161428', card: '#1f1c38', accent: '#a06ae0' },
+      { id: 'vintage-tube-radio', label: 'Tube Radio',  bg: '#3E2723', card: '#1E110A', accent: '#FF6F00' },
+    ],
+  },
+  {
+    group: 'Psysonic Themes — Mediaplayer',
+    themes: [
+      { id: 'cobalt-media',    label: 'Cobalt Media',    bg: '#3a62a5', card: '#000000', accent: '#45ff00' },
+      { id: 'cupertino-beats', label: 'Cupertino Beats', bg: '#1c1c1e', card: '#2c2c2e', accent: '#fa243c' },
+      { id: 'dzr0',            label: 'DZR',             bg: '#FFFFFF', card: '#F5F5F7', accent: '#A238FF' },
+      { id: 'navy-jukebox',    label: 'Navy Jukebox',    bg: '#d4d8db', card: '#001358', accent: '#0070a0' },
+      { id: 'onyx-cinema',     label: 'Onyx Cinema',     bg: '#141414', card: '#000000', accent: '#00aaff' },
+      { id: 'spotless',        label: 'Spotless',        bg: '#121212', card: '#181818', accent: '#1ED760' },
+      { id: 'wnamp',           label: 'WnAmp',           bg: '#2b2b3a', card: '#000000', accent: '#00ff00' },
+    ],
+  },
+  {
+    group: 'Series',
+    themes: [
+      { id: 'ice-and-fire', label: 'A Theme of Ice and Fire', bg: '#121820', card: '#05070a', accent: '#70a1ff' },
+      { id: 'doh-matic',    label: "D'oh-matic",              bg: '#FFFDF0', card: '#FFD90F', accent: '#1F75FE' },
+      { id: 'heisenberg',   label: 'Heisenberg',              bg: '#1a1d1a', card: '#0a0c0a', accent: '#3fe0ff' },
+    ],
+  },
+];
+
+interface Props {
+  value: string;
+  onChange: (id: string) => void;
+}
+
+export default function ThemePicker({ value, onChange }: Props) {
+  const initialOpen = THEME_GROUPS.find(g => g.themes.some(t => t.id === value))?.group ?? THEME_GROUPS[0].group;
+  const [openGroup, setOpenGroup] = useState<string | null>(initialOpen);
+
+  const toggle = (group: string) => setOpenGroup(prev => prev === group ? null : group);
+
+  return (
+    <div className="theme-accordion">
+      {THEME_GROUPS.map(({ group, themes }) => {
+        const isOpen = openGroup === group;
+        const hasActive = themes.some(t => t.id === value);
+        return (
+          <div key={group} className={`theme-accordion-item${isOpen ? ' theme-accordion-open' : ''}`}>
+            <button className="theme-accordion-header" onClick={() => toggle(group)}>
+              <span>
+                {group}
+                {hasActive && !isOpen && (
+                  <span className="theme-accordion-active-dot" />
+                )}
+              </span>
+              <ChevronDown size={15} className="theme-accordion-chevron" />
+            </button>
+            {isOpen && (
+              <div className="theme-accordion-content">
+                <div style={{
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))',
+                  gap: '10px',
+                }}>
+                  {themes.map((t) => {
+                    const isActive = value === t.id;
+                    return (
+                      <button
+                        key={t.id}
+                        onClick={() => onChange(t.id)}
+                        style={{
+                          background: 'none',
+                          border: 'none',
+                          padding: 0,
+                          cursor: 'pointer',
+                          display: 'flex',
+                          flexDirection: 'column',
+                          alignItems: 'center',
+                          gap: '6px',
+                        }}
+                      >
+                        <div style={{
+                          width: '100%',
+                          height: '46px',
+                          borderRadius: '8px',
+                          overflow: 'hidden',
+                          outline: isActive ? '2px solid var(--accent)' : '2px solid transparent',
+                          outlineOffset: '2px',
+                          position: 'relative',
+                          boxShadow: isActive ? '0 0 8px var(--accent-glow, rgba(0,0,0,0.2))' : '0 1px 3px rgba(0,0,0,0.3)',
+                          transition: 'outline-color 0.15s, box-shadow 0.15s',
+                        }}>
+                          <div style={{ background: t.bg, height: '55%' }} />
+                          <div style={{ background: t.card, height: '20%' }} />
+                          <div style={{ background: t.accent, height: '25%' }} />
+                          {isActive && (
+                            <div style={{
+                              position: 'absolute',
+                              top: '4px',
+                              right: '4px',
+                              width: '14px',
+                              height: '14px',
+                              borderRadius: '50%',
+                              background: t.accent,
+                              border: '1.5px solid rgba(255,255,255,0.7)',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                            }}>
+                              <Check size={8} strokeWidth={3} color="white" />
+                            </div>
+                          )}
+                        </div>
+                        <span style={{
+                          fontSize: '11px',
+                          color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
+                          fontWeight: isActive ? 600 : 400,
+                          textAlign: 'center',
+                          lineHeight: 1.2,
+                          wordBreak: 'break-word',
+                        }}>
+                          {t.label}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
@@ -13,6 +13,9 @@ export default function TooltipPortal() {
  const boxRef = useRef<HTMLDivElement>(null);
  const [style, setStyle] = useState<React.CSSProperties>({ opacity: 0 });

+  const tooltipRef = useRef<TooltipState | null>(null);
+  tooltipRef.current = tooltip;
+
  useEffect(() => {
    const onOver = (e: MouseEvent) => {
      const target = (e.target as HTMLElement).closest('[data-tooltip]') as HTMLElement | null;
@@ -26,15 +29,19 @@ export default function TooltipPortal() {
        wrap: target.hasAttribute('data-tooltip-wrap'),
      });
    };
-    const onOut = (e: MouseEvent) => {
+    const onOut = () => setTooltip(null);
+    const onMove = (e: MouseEvent) => {
+      if (!tooltipRef.current) return;
      const target = (e.target as HTMLElement).closest('[data-tooltip]');
-      if (target) setTooltip(null);
+      if (!target) setTooltip(null);
    };
    document.addEventListener('mouseover', onOver);
    document.addEventListener('mouseout', onOut);
+    document.addEventListener('mousemove', onMove, { passive: true });
    return () => {
      document.removeEventListener('mouseover', onOver);
      document.removeEventListener('mouseout', onOut);
+      document.removeEventListener('mousemove', onMove);
    };
  }, []);

@@ -1,130 +0,0 @@
-import { useEffect, useRef } from 'react';
-import butterchurn from 'butterchurn';
-import butterchurnPresets from 'butterchurn-presets';
-import { buildStreamUrl } from '../api/subsonic';
-import { usePlayerStore } from '../store/playerStore';
-
-interface Props {
-  trackId: string;
-  nextPresetTrigger: number;
-  onPresetName: (name: string) => void;
-}
-
-export default function VisualizerCanvas({ trackId, nextPresetTrigger, onPresetName }: Props) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const vizRef = useRef<ReturnType<typeof butterchurn.createVisualizer> | null>(null);
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const audioCtxRef = useRef<AudioContext | null>(null);
-  const rafRef = useRef<number>(0);
-  const presetNamesRef = useRef<string[]>([]);
-  const presetMapRef = useRef<Record<string, unknown>>({});
-  const presetIdxRef = useRef(0);
-
-  // ── Init audio analysis + butterchurn ──────────────────────────────────────
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    // Hidden audio element — routed through Web Audio for analysis only.
-    // NOT connected to AudioDestinationNode → completely silent.
-    // The Rust/rodio engine plays the actual audio.
-    const streamUrl = buildStreamUrl(trackId);
-    const audio = new Audio(streamUrl);
-    audio.crossOrigin = 'anonymous';
-    audioRef.current = audio;
-
-    const ctx = new AudioContext();
-    audioCtxRef.current = ctx;
-    const source = ctx.createMediaElementSource(audio);
-    // Intentionally no: source.connect(ctx.destination)
-
-    // Size canvas to fill its container
-    const rect = canvas.getBoundingClientRect();
-    const w = rect.width || window.innerWidth;
-    const h = rect.height || window.innerHeight;
-    canvas.width = w * (window.devicePixelRatio || 1);
-    canvas.height = h * (window.devicePixelRatio || 1);
-
-    const visualizer = butterchurn.createVisualizer(ctx, canvas, {
-      width: canvas.width,
-      height: canvas.height,
-      pixelRatio: window.devicePixelRatio || 1,
-    });
-    vizRef.current = visualizer;
-    visualizer.connectAudio(source);
-
-    // Presets
-    const presets = butterchurnPresets.getPresets();
-    const names = Object.keys(presets);
-    presetNamesRef.current = names;
-    presetMapRef.current = presets;
-    const startIdx = Math.floor(Math.random() * names.length);
-    presetIdxRef.current = startIdx;
-    visualizer.loadPreset(presets[names[startIdx]], 2.0);
-    onPresetName(names[startIdx]);
-
-    // Sync position + play state with main player
-    const { currentTime, isPlaying } = usePlayerStore.getState();
-    audio.currentTime = currentTime;
-    if (isPlaying) audio.play().catch(() => {});
-
-    // Render loop
-    const render = () => {
-      rafRef.current = requestAnimationFrame(render);
-      visualizer.render();
-    };
-    rafRef.current = requestAnimationFrame(render);
-
-    // Keep canvas sized to window
-    const onResize = () => {
-      const r = canvas.getBoundingClientRect();
-      const dpr = window.devicePixelRatio || 1;
-      canvas.width = r.width * dpr;
-      canvas.height = r.height * dpr;
-      visualizer.setRendererSize(canvas.width, canvas.height);
-    };
-    window.addEventListener('resize', onResize);
-
-    // Sync play/pause with main player
-    const unsubscribe = usePlayerStore.subscribe(state => {
-      const a = audioRef.current;
-      const c = audioCtxRef.current;
-      if (!a || !c) return;
-      if (state.isPlaying) {
-        c.resume();
-        a.play().catch(() => {});
-      } else {
-        a.pause();
-      }
-    });
-
-    return () => {
-      cancelAnimationFrame(rafRef.current);
-      window.removeEventListener('resize', onResize);
-      unsubscribe();
-      audio.pause();
-      audio.src = '';
-      ctx.close();
-      vizRef.current = null;
-    };
-  }, [trackId]); // re-init on track change
-
-  // ── Next preset ────────────────────────────────────────────────────────────
-  useEffect(() => {
-    if (!nextPresetTrigger) return;
-    const viz = vizRef.current;
-    const names = presetNamesRef.current;
-    if (!viz || names.length === 0) return;
-    const next = (presetIdxRef.current + 1) % names.length;
-    presetIdxRef.current = next;
-    viz.loadPreset(presetMapRef.current[names[next]], 2.0);
-    onPresetName(names[next]);
-  }, [nextPresetTrigger]);
-
-  return (
-    <canvas
-      ref={canvasRef}
-      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}
-    />
-  );
-}
@@ -59,8 +59,7 @@ function drawWaveform(
  ctx.clearRect(0, 0, w, h);

  const style = getComputedStyle(document.documentElement);
-  const colorBlue     = style.getPropertyValue('--ctp-blue').trim()     || '#89b4fa';
-  const colorMauve    = style.getPropertyValue('--ctp-mauve').trim()    || '#cba6f7';
+  const colorAccent   = style.getPropertyValue('--accent').trim()       || '#cba6f7';
  const colorBuffered = style.getPropertyValue('--ctp-overlay0').trim() || '#6c7086';
  const colorUnplayed = style.getPropertyValue('--ctp-surface1').trim() || '#313244';

@@ -97,14 +96,11 @@ function drawWaveform(
    ctx.fillRect(x, (h - barH) / 2, x2Of(i) - x, barH);
  }

-  // Pass 3 — played (gradient + glow)
+  // Pass 3 — played (accent color + glow)
  if (progress > 0) {
-    const grad = ctx.createLinearGradient(0, 0, progress * w, 0);
-    grad.addColorStop(0, colorBlue);
-    grad.addColorStop(1, colorMauve);
    ctx.globalAlpha = 1;
-    ctx.fillStyle = grad;
-    ctx.shadowColor = colorMauve;
+    ctx.fillStyle = colorAccent;
+    ctx.shadowColor = colorAccent;
    ctx.shadowBlur = 5;
    for (let i = 0; i < BAR_COUNT; i++) {
      if (i / BAR_COUNT >= progress) break;
@@ -29,6 +29,7 @@ export default function AlbumDetail() {
  const playTrack = usePlayerStore(s => s.playTrack);
  const enqueue = usePlayerStore(s => s.enqueue);
  const openContextMenu = usePlayerStore(s => s.openContextMenu);
+  const starredOverrides = usePlayerStore(s => s.starredOverrides);
  const currentTrack = usePlayerStore(s => s.currentTrack);
  const isPlaying = usePlayerStore(s => s.isPlaying);

@@ -218,7 +219,10 @@ export default function AlbumDetail() {
        hoveredSongId={hoveredSongId}
        setHoveredSongId={setHoveredSongId}
        ratings={ratings}
-        starredSongs={starredSongs}
+        starredSongs={new Set([
+          ...[...starredSongs].filter(id => starredOverrides[id] !== false),
+          ...Object.entries(starredOverrides).filter(([, v]) => v).map(([k]) => k),
+        ])}
        onPlaySong={handlePlaySong}
        onRate={handleRate}
        onToggleSongStar={toggleSongStar}
@@ -3,6 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, search, SubsonicArtist, SubsonicAlbum, SubsonicSong, SubsonicArtistInfo, buildCoverArtUrl, coverArtCacheKey, star, unstar } from '../api/subsonic';
 import AlbumCard from '../components/AlbumCard';
 import CachedImage from '../components/CachedImage';
+import CoverLightbox from '../components/CoverLightbox';
 import { ArrowLeft, Users, ExternalLink, Star, Play, Shuffle, Radio } from 'lucide-react';
 import { open } from '@tauri-apps/plugin-shell';
 import { usePlayerStore } from '../store/playerStore';
@@ -49,6 +50,8 @@ export default function ArtistDetail() {
  const [openedLink, setOpenedLink] = useState<string | null>(null);
  const [similarArtists, setSimilarArtists] = useState<SubsonicArtist[]>([]);
  const [similarLoading, setSimilarLoading] = useState(false);
+  const [featuredLoading, setFeaturedLoading] = useState(false);
+  const [lightboxOpen, setLightboxOpen] = useState(false);

  const playTrack = usePlayerStore(state => state.playTrack);
  const enqueue = usePlayerStore(state => state.enqueue);
@@ -58,45 +61,18 @@ export default function ArtistDetail() {
  useEffect(() => {
    if (!id) return;
    setLoading(true);
-    let ownAlbumIds: Set<string>;
+    setFeaturedAlbums([]);
    getArtist(id).then(artistData => {
      setArtist(artistData.artist);
      setAlbums(artistData.albums);
      setIsStarred(!!artistData.artist.starred);
-      ownAlbumIds = new Set(artistData.albums.map(a => a.id));
      return Promise.all([
        getArtistInfo(id).catch(() => null),
        getTopSongs(artistData.artist.name).catch(() => []),
-        search(artistData.artist.name, { songCount: 500, artistCount: 0, albumCount: 0 }).catch(() => ({ songs: [], albums: [], artists: [] })),
      ]);
-    }).then(([artistInfo, songsData, searchResults]) => {
+    }).then(([artistInfo, songsData]) => {
      if (artistInfo !== undefined) setInfo(artistInfo as SubsonicArtistInfo | null);
      if (songsData !== undefined) setTopSongs(songsData as SubsonicSong[]);
-
-      const featuredSongs = (searchResults.songs ?? []).filter(
-        song => song.artistId === id && !ownAlbumIds.has(song.albumId)
-      );
-      const albumMap = new Map<string, SubsonicAlbum>();
-      featuredSongs.forEach(song => {
-        if (!albumMap.has(song.albumId)) {
-          albumMap.set(song.albumId, {
-            id: song.albumId,
-            name: song.album,
-            artist: song.albumArtist ?? '',
-            artistId: '',
-            coverArt: song.coverArt,
-            songCount: 1,
-            duration: song.duration,
-            year: song.year,
-          });
-        } else {
-          const a = albumMap.get(song.albumId)!;
-          a.songCount++;
-          a.duration += song.duration;
-        }
-      });
-      setFeaturedAlbums([...albumMap.values()]);
-
      setLoading(false);
    }).catch(err => {
      console.error(err);
@@ -104,6 +80,41 @@ export default function ArtistDetail() {
    });
  }, [id]);

+  // "Also Featured On" — loaded in background after main content renders
+  useEffect(() => {
+    if (!id || !artist) return;
+    const ownAlbumIds = new Set(albums.map(a => a.id));
+    setFeaturedLoading(true);
+    search(artist.name, { songCount: 500, artistCount: 0, albumCount: 0 })
+      .catch(() => ({ songs: [], albums: [], artists: [] }))
+      .then(searchResults => {
+        const featuredSongs = (searchResults.songs ?? []).filter(
+          song => song.artistId === id && !ownAlbumIds.has(song.albumId)
+        );
+        const albumMap = new Map<string, SubsonicAlbum>();
+        featuredSongs.forEach(song => {
+          if (!albumMap.has(song.albumId)) {
+            albumMap.set(song.albumId, {
+              id: song.albumId,
+              name: song.album,
+              artist: song.albumArtist ?? '',
+              artistId: '',
+              coverArt: song.coverArt,
+              songCount: 1,
+              duration: song.duration,
+              year: song.year,
+            });
+          } else {
+            const a = albumMap.get(song.albumId)!;
+            a.songCount++;
+            a.duration += song.duration;
+          }
+        });
+        setFeaturedAlbums([...albumMap.values()]);
+        setFeaturedLoading(false);
+      });
+  }, [artist?.id]);
+
  useEffect(() => {
    if (!artist || !lastfmIsConfigured()) return;
    setSimilarArtists([]);
@@ -213,16 +224,30 @@ export default function ArtistDetail() {
        <ArrowLeft size={16} /> <span>{t('artistDetail.back')}</span>
      </button>

+      {lightboxOpen && (
+        <CoverLightbox
+          src={buildCoverArtUrl(coverId, 2000)}
+          alt={artist.name}
+          onClose={() => setLightboxOpen(false)}
+        />
+      )}
+
      <div className="artist-detail-header">
        <div className="artist-detail-avatar">
          {coverId ? (
-            <CachedImage
-              src={buildCoverArtUrl(coverId, 300)}
-              cacheKey={coverArtCacheKey(coverId, 300)}
-              alt={artist.name}
-              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-              onError={e => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
-            />
+            <button
+              className="artist-detail-avatar-btn"
+              onClick={() => setLightboxOpen(true)}
+              aria-label={`${artist.name} Bild vergrößern`}
+            >
+              <CachedImage
+                src={buildCoverArtUrl(coverId, 300)}
+                cacheKey={coverArtCacheKey(coverId, 300)}
+                alt={artist.name}
+                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                onError={e => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+              />
+            </button>
          ) : (
            <Users size={64} color="var(--text-muted)" />
          )}
@@ -316,7 +341,7 @@ export default function ArtistDetail() {
                  const track = {
                    id: song.id, title: song.title, artist: song.artist, album: song.album,
                    albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
-                    year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
+                    year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred,
                  };
                  openContextMenu(e.clientX, e.clientY, track, 'song');
                }}
@@ -389,14 +414,22 @@ export default function ArtistDetail() {
      )}

      {/* Also Featured On */}
-      {featuredAlbums.length > 0 && (
+      {(featuredLoading || featuredAlbums.length > 0) && (
        <>
          <h2 className="section-title" style={{ marginTop: '2rem', marginBottom: '1rem' }}>
            {t('artistDetail.featuredOn')}
          </h2>
-          <div className="album-grid-wrap">
-            {featuredAlbums.map(a => <AlbumCard key={a.id} album={a} />)}
-          </div>
+          {featuredLoading ? (
+            <div className="album-grid-wrap">
+              {[...Array(4)].map((_, i) => (
+                <div key={i} style={{ flex: '0 0 clamp(140px, 15vw, 180px)', borderRadius: '8px', background: 'var(--bg-card)', aspectRatio: '1', opacity: 0.5 }} />
+              ))}
+            </div>
+          ) : (
+            <div className="album-grid-wrap" style={{ animation: 'fadeIn 0.3s ease' }}>
+              {featuredAlbums.map(a => <AlbumCard key={a.id} album={a} />)}
+            </div>
+          )}
        </>
      )}
    </div>
@@ -87,7 +87,7 @@ export default function Favorites() {
                  const track = {
                    id: song.id, title: song.title, artist: song.artist, album: song.album,
                    albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt,
-                    track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
+                    track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred,
                  };
                  return (
                    <div
@@ -106,7 +106,7 @@ export default function Favorites() {
                        {i + 1}
                      </div>
                      <div className="track-info">
-                        <span className="track-title" data-tooltip={song.title}>{song.title}</span>
+                        <span className="track-title">{song.title}</span>
                      </div>
                      <div className="track-artist-cell">
                        <span
@@ -43,8 +43,9 @@ export default function Help() {
        { q: t('help.q7'), a: t('help.a7') },
        { q: t('help.q8'), a: t('help.a8') },
        { q: t('help.q22'), a: t('help.a22') },
-        { q: t('help.q23'), a: t('help.a23') },
        { q: t('help.q24'), a: t('help.a24') },
+        { q: t('help.q29'), a: t('help.a29') },
+        { q: t('help.q30'), a: t('help.a30') },
      ],
    },
    {
@@ -65,6 +66,8 @@ export default function Help() {
        { q: t('help.q13'), a: t('help.a13') },
        { q: t('help.q14'), a: t('help.a14') },
        { q: t('help.q15'), a: t('help.a15') },
+        { q: t('help.q31'), a: t('help.a31') },
+        { q: t('help.q32'), a: t('help.a32') },
      ],
    },
    {
@@ -100,7 +103,7 @@ export default function Help() {
    <div className="content-body animate-fade-in">
      <h1 className="page-title" style={{ marginBottom: '2rem' }}>{t('help.title')}</h1>

-      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.25rem', alignItems: 'start' }}>
        {sections.map((section, si) => (
          <section key={si} className="settings-section">
            <div className="settings-section-header">
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import Hero from '../components/Hero';
 import AlbumRow from '../components/AlbumRow';
-import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
+import { getAlbumList, getArtists, SubsonicAlbum, SubsonicArtist } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';

 export default function Home() {
  const [starred, setStarred] = useState<SubsonicAlbum[]>([]);
@@ -10,20 +11,29 @@ export default function Home() {
  const [random, setRandom] = useState<SubsonicAlbum[]>([]);
  const [heroAlbums, setHeroAlbums] = useState<SubsonicAlbum[]>([]);
  const [mostPlayed, setMostPlayed] = useState<SubsonicAlbum[]>([]);
+  const [randomArtists, setRandomArtists] = useState<SubsonicArtist[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([
      getAlbumList('starred', 12).catch(() => []),
      getAlbumList('newest', 12).catch(() => []),
-      getAlbumList('random', 20).catch(() => []),   // fetch 20 — split between Hero and Discover
+      getAlbumList('random', 20).catch(() => []),
      getAlbumList('frequent', 12).catch(() => []),
-    ]).then(([s, n, r, f]) => {
+      getArtists().catch(() => []),
+    ]).then(([s, n, r, f, artists]) => {
      setStarred(s);
      setRecent(n);
      setHeroAlbums(r.slice(0, 8));
      setRandom(r.slice(8));
      setMostPlayed(f);
+      // Pick 16 random artists via Fisher-Yates shuffle
+      const shuffled = [...artists];
+      for (let i = shuffled.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+      }
+      setRandomArtists(shuffled.slice(0, 16));
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);
@@ -35,17 +45,15 @@ export default function Home() {
  ) => {
    try {
      const more = await getAlbumList(type, 12, currentList.length);
-      // Ensure we don't append duplicates if the API returns them
      const newItems = more.filter(m => !currentList.find(c => c.id === m.id));
-      if (newItems.length > 0) {
-        setter(prev => [...prev, ...newItems]);
-      }
+      if (newItems.length > 0) setter(prev => [...prev, ...newItems]);
    } catch (e) {
      console.error('Failed to load more', e);
    }
  };

  const { t } = useTranslation();
+  const navigate = useNavigate();

  return (
    <div className="animate-fade-in">
@@ -58,31 +66,49 @@ export default function Home() {
          </div>
        ) : (
          <>
+            <AlbumRow
+              title={t('home.recent')}
+              albums={recent}
+              onLoadMore={() => loadMore('newest', recent, setRecent)}
+              moreText={t('home.loadMore')}
+            />
+            <AlbumRow
+              title={t('home.discover')}
+              albums={random}
+              onLoadMore={() => loadMore('random', random, setRandom)}
+              moreText={t('home.discoverMore')}
+            />
+            {randomArtists.length > 0 && (
+              <section className="album-row-section">
+                <div className="album-row-header">
+                  <h2 className="section-title" style={{ marginBottom: 0 }}>{t('home.discoverArtists')}</h2>
+                </div>
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                  {randomArtists.map(a => (
+                    <button key={a.id} className="artist-ext-link" onClick={() => navigate(`/artist/${a.id}`)}>
+                      {a.name}
+                    </button>
+                  ))}
+                  <button className="artist-ext-link" onClick={() => navigate('/artists')}
+                    style={{ opacity: 0.6 }}>
+                    {t('home.discoverArtistsMore')} →
+                  </button>
+                </div>
+              </section>
+            )}
            {starred.length > 0 && (
-              <AlbumRow 
-                title={t('home.starred')} 
-                albums={starred} 
+              <AlbumRow
+                title={t('home.starred')}
+                albums={starred}
                onLoadMore={() => loadMore('starred', starred, setStarred)}
-                moreText={t('home.loadMore')} 
+                moreText={t('home.loadMore')}
              />
            )}
-            <AlbumRow 
-              title={t('home.recent')} 
-              albums={recent} 
-              onLoadMore={() => loadMore('newest', recent, setRecent)}
-              moreText={t('home.loadMore')} 
-            />
-            <AlbumRow 
-              title={t('home.mostPlayed')} 
-              albums={mostPlayed} 
+            <AlbumRow
+              title={t('home.mostPlayed')}
+              albums={mostPlayed}
              onLoadMore={() => loadMore('frequent', mostPlayed, setMostPlayed)}
-              moreText={t('home.loadMore')} 
-            />
-            <AlbumRow 
-              title={t('home.discover')} 
-              albums={random} 
-              onLoadMore={() => loadMore('random', random, setRandom)}
-              moreText={t('home.discoverMore')} 
+              moreText={t('home.loadMore')}
            />
          </>
        )}
@@ -1,14 +1,13 @@
 import React, { useState, useRef, useEffect, useCallback, memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import {
-  Play, Shuffle, Star, Music, Save, FolderOpen, Trash2, X,
-} from 'lucide-react';
-import { usePlayerStore, Track } from '../store/playerStore';
+import { Music, Star, ExternalLink, MicVocal } from 'lucide-react';
+import { usePlayerStore } from '../store/playerStore';
+import { useLyricsStore } from '../store/lyricsStore';
 import {
  buildCoverArtUrl, coverArtCacheKey, getSong, star, unstar,
-  getPlaylists, getPlaylist, createPlaylist, deletePlaylist,
-  getAlbum, SubsonicPlaylist, SubsonicSong,
+  getAlbum, getArtistInfo,
+  SubsonicSong, SubsonicArtistInfo,
 } from '../api/subsonic';
 import { useCachedUrl } from '../components/CachedImage';

@@ -20,13 +19,20 @@ function formatTime(s: number): string {
  return `${m}:${Math.floor(s % 60).toString().padStart(2, '0')}`;
 }

-function formatDuration(secs: number): string {
-  const h = Math.floor(secs / 3600);
-  const m = Math.floor((secs % 3600) / 60);
-  const s = secs % 60;
-  return h > 0
-    ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
-    : `${m}:${s.toString().padStart(2, '0')}`;
+function sanitizeHtml(html: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  doc.querySelectorAll('script, style, iframe, object, embed, form, input, button, select, base, meta, link').forEach(el => el.remove());
+  doc.querySelectorAll('*').forEach(el => {
+    Array.from(el.attributes).forEach(attr => {
+      const name = attr.name.toLowerCase();
+      const val = attr.value.toLowerCase().trim();
+      if (name.startsWith('on') || (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) || (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))) {
+        el.removeAttribute(attr.name);
+      }
+    });
+  });
+  return doc.body.innerHTML;
 }

 function renderStars(rating?: number) {
@@ -34,18 +40,123 @@ function renderStars(rating?: number) {
  return (
    <div style={{ display: 'flex', gap: '3px', alignItems: 'center' }}>
      {[1, 2, 3, 4, 5].map(i => (
-        <Star
-          key={i}
-          size={14}
+        <Star key={i} size={13}
          fill={i <= rating ? 'var(--ctp-yellow)' : 'none'}
-          color={i <= rating ? 'var(--ctp-yellow)' : 'var(--text-muted)'}
+          color={i <= rating ? 'var(--ctp-yellow)' : 'rgba(255,255,255,0.4)'}
        />
      ))}
    </div>
  );
 }

-// ─── Blurred background (crossfade on track change) ───────────────────────────
+// ─── Animated EQ Bars ─────────────────────────────────────────────────────────
+
+const BAR_COUNT = 24;
+
+const EQBars = memo(function EQBars({ isPlaying }: { isPlaying: boolean }) {
+  const barsRef    = useRef<(HTMLDivElement | null)[]>([]);
+  const heights    = useRef<number[]>(Array.from({ length: BAR_COUNT }, () => 0.08));
+  const targets    = useRef<number[]>(Array.from({ length: BAR_COUNT }, () => Math.random() * 0.5 + 0.1));
+  const speeds     = useRef<number[]>(Array.from({ length: BAR_COUNT }, () => 0.06 + Math.random() * 0.08));
+  const rafRef     = useRef<number>();
+
+  const animate = useCallback(() => {
+    heights.current = heights.current.map((h, i) => {
+      const t = targets.current[i];
+      const newH = h + (t - h) * speeds.current[i];
+      if (Math.abs(newH - t) < 0.015) {
+        targets.current[i] = Math.random() * 0.88 + 0.06;
+        speeds.current[i] = 0.05 + Math.random() * 0.10;
+      }
+      return newH;
+    });
+    barsRef.current.forEach((bar, i) => {
+      if (bar) bar.style.height = `${Math.round(heights.current[i] * 100)}%`;
+    });
+    rafRef.current = requestAnimationFrame(animate);
+  }, []);
+
+  useEffect(() => {
+    if (isPlaying) {
+      rafRef.current = requestAnimationFrame(animate);
+    } else {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      // Settle bars to a low resting height
+      heights.current = heights.current.map(() => 0.08);
+      barsRef.current.forEach(bar => {
+        if (bar) bar.style.height = '8%';
+      });
+    }
+    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
+  }, [isPlaying, animate]);
+
+  return (
+    <div className="np-eq-wrap">
+      <div className="np-eq-bars">
+        {Array.from({ length: BAR_COUNT }).map((_, i) => (
+          <div
+            key={i}
+            className="np-eq-bar"
+            ref={el => { barsRef.current[i] = el; }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+// ─── Tag Cloud ────────────────────────────────────────────────────────────────
+
+interface TagCloudProps {
+  similarArtists: Array<{ id: string; name: string }>;
+  onArtistClick: (id: string) => void;
+}
+
+function strHash(s: string): number {
+  let h = 0;
+  for (const c of s) h = (h * 31 + c.charCodeAt(0)) & 0xffff;
+  return h;
+}
+
+function TagCloud({ similarArtists, onArtistClick }: TagCloudProps) {
+  const { t } = useTranslation();
+  if (similarArtists.length === 0) return null;
+
+  const getTagStyle = (name: string, idx: number): React.CSSProperties => {
+    const h = strHash(name);
+    const sizePool = [10, 11, 12, 13, 14, 15, 16];
+    const size = sizePool[(h + idx * 7) % sizePool.length];
+    const weight = size >= 15 ? 600 : size >= 13 ? 500 : 400;
+    const pad = size >= 15 ? '5px 10px' : '4px 8px';
+    const opacity = 0.6 + ((h % 5) * 0.08);
+    const verticals = [-5, -3, -1, 0, 2, 4, 5, -4, 2, -2, 4, 0, 3, -3, 1];
+    const ty = verticals[(h + idx * 4) % verticals.length];
+    return { fontSize: `${size}px`, fontWeight: weight, padding: pad, opacity, transform: `translateY(${ty}px)` };
+  };
+
+  return (
+    <div className="np-tag-cloud">
+      <div className="np-tag-cloud-header">{t('artistDetail.similarArtists')}</div>
+      {([similarArtists.slice(0, 3), similarArtists.slice(3, 6)] as const).map((row, rowIdx) => (
+        <div key={rowIdx} className="np-tag-cloud-tags" style={rowIdx === 0 ? { marginBottom: '14px' } : undefined}>
+          {row.map((a, i) => (
+            <span
+              key={a.id}
+              className="np-tag np-tag-clickable"
+              style={getTagStyle(a.name, rowIdx * 3 + i)}
+              onClick={() => onArtistClick(a.id)}
+              data-tooltip={t('nowPlaying.goToArtist')}
+            >
+              {a.name}
+            </span>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Blurred background ───────────────────────────────────────────────────────

 const NpBg = memo(function NpBg({ url }: { url: string }) {
  const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
@@ -65,9 +176,7 @@ const NpBg = memo(function NpBg({ url }: { url: string }) {
  return (
    <div className="np-bg-wrap">
      {layers.map(l => (
-        <div
-          key={l.id}
-          className="np-bg-layer"
+        <div key={l.id} className="np-bg-layer"
          style={{ backgroundImage: `url(${l.url})`, opacity: l.visible ? 1 : 0 }}
        />
      ))}
@@ -76,374 +185,269 @@ const NpBg = memo(function NpBg({ url }: { url: string }) {
  );
 });

-// ─── Modals (reused from QueuePanel) ──────────────────────────────────────────
+// ─── Album Tracklist ──────────────────────────────────────────────────────────

-function SavePlaylistModal({ onClose, onSave }: { onClose: () => void; onSave: (name: string) => void }) {
-  const { t } = useTranslation();
-  const [name, setName] = useState('');
-  return (
-    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true">
-      <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: 400 }}>
-        <button className="modal-close" onClick={onClose}><X size={18} /></button>
-        <h3 style={{ marginBottom: '1rem', fontFamily: 'var(--font-display)' }}>{t('queue.savePlaylist')}</h3>
-        <input
-          type="text" className="live-search-field"
-          placeholder={t('queue.playlistName')} value={name}
-          onChange={e => setName(e.target.value)} autoFocus
-          onKeyDown={e => e.key === 'Enter' && name.trim() && onSave(name.trim())}
-          style={{ width: '100%', marginBottom: '1rem', padding: '10px 16px' }}
-        />
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-          <button className="btn btn-ghost" onClick={onClose}>{t('queue.cancel')}</button>
-          <button className="btn btn-primary" onClick={() => name.trim() && onSave(name.trim())}>{t('queue.save')}</button>
-        </div>
-      </div>
-    </div>
-  );
+interface NpTrackListProps {
+  albumTracks: SubsonicSong[];
+  currentTrackId: string;
+  album: string;
+  albumId?: string;
+  onNavigate: (path: string) => void;
 }

-function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void; onLoad: (id: string) => void }) {
+const NpTrackList = memo(function NpTrackList({ albumTracks, currentTrackId, album, albumId, onNavigate }: NpTrackListProps) {
  const { t } = useTranslation();
-  const [playlists, setPlaylists] = useState<SubsonicPlaylist[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  const fetch = () => {
-    setLoading(true);
-    getPlaylists().then(d => { setPlaylists(d); setLoading(false); }).catch(() => setLoading(false));
-  };
-  useEffect(() => { fetch(); }, []);
-
-  const handleDelete = async (id: string, name: string) => {
-    if (confirm(t('queue.deleteConfirm', { name }))) { await deletePlaylist(id); fetch(); }
-  };
-
+  if (albumTracks.length === 0) return null;
  return (
-    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true">
-      <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: 400 }}>
-        <button className="modal-close" onClick={onClose}><X size={18} /></button>
-        <h3 style={{ marginBottom: '1rem', fontFamily: 'var(--font-display)' }}>{t('queue.loadPlaylist')}</h3>
-        {loading ? <p style={{ color: 'var(--text-muted)' }}>{t('queue.loading')}</p>
-          : playlists.length === 0 ? <p style={{ color: 'var(--text-muted)' }}>{t('queue.noPlaylists')}</p>
-          : (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 300, overflowY: 'auto' }}>
-              {playlists.map(p => (
-                <div key={p.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', background: 'var(--ctp-surface1)', borderRadius: 'var(--radius-md)' }}>
-                  <span style={{ fontWeight: 500 }} className="truncate">{p.name}</span>
-                  <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
-                    <button className="nav-btn" onClick={() => onLoad(p.id)} style={{ width: 28, height: 28, background: 'transparent' }}><Play size={14} /></button>
-                    <button className="nav-btn" onClick={() => handleDelete(p.id, p.name)} style={{ width: 28, height: 28, background: 'transparent', color: 'var(--ctp-red)' }}><Trash2 size={14} /></button>
-                  </div>
-                </div>
-              ))}
+    <div className="np-info-card">
+      <div className="np-card-header">
+        <h3 className="np-card-title">{t('nowPlaying.fromAlbum')}: <em style={{ fontStyle: 'normal', color: 'rgba(255,255,255,0.6)' }}>{album}</em></h3>
+        {albumId && (
+          <button className="np-card-link" onClick={() => onNavigate(`/album/${albumId}`)}>
+            {t('nowPlaying.viewAlbum')} <ExternalLink size={12} />
+          </button>
+        )}
+      </div>
+      <div className="np-album-tracklist">
+        {albumTracks.map(track => {
+          const isActive = track.id === currentTrackId;
+          return (
+            <div key={track.id}
+              className={`np-album-track${isActive ? ' active' : ''}`}
+              onClick={() => albumId && onNavigate(`/album/${albumId}`)}
+            >
+              <span className="np-album-track-num">
+                {isActive
+                  ? <Star size={10} fill="var(--accent)" color="var(--accent)" />
+                  : track.track ?? '—'
+                }
+              </span>
+              <span className="np-album-track-title truncate">{track.title}</span>
+              <span className="np-album-track-dur">{formatTime(track.duration)}</span>
            </div>
-          )}
+          );
+        })}
      </div>
    </div>
  );
-}
+});

 // ─── Main Page ────────────────────────────────────────────────────────────────

-let _dragFromIdx: number | null = null;
-
 export default function NowPlaying() {
  const { t } = useTranslation();
  const navigate = useNavigate();

-  const currentTrack   = usePlayerStore(s => s.currentTrack);
-  const queue          = usePlayerStore(s => s.queue);
-  const queueIndex     = usePlayerStore(s => s.queueIndex);
-  const contextMenu    = usePlayerStore(s => s.contextMenu);
-  const isQueueVisible = usePlayerStore(s => s.isQueueVisible);
+  const currentTrack    = usePlayerStore(s => s.currentTrack);
+  const isPlaying       = usePlayerStore(s => s.isPlaying);
+  const showLyrics      = useLyricsStore(s => s.showLyrics);
+  const activeTab       = useLyricsStore(s => s.activeTab);
+  const isQueueVisible  = usePlayerStore(s => s.isQueueVisible);
+  const toggleQueue     = usePlayerStore(s => s.toggleQueue);

-  const playTrack      = usePlayerStore(s => s.playTrack);
-  const shuffleQueue   = usePlayerStore(s => s.shuffleQueue);
-  const reorderQueue   = usePlayerStore(s => s.reorderQueue);
-  const removeTrack    = usePlayerStore(s => s.removeTrack);
-  const enqueue        = usePlayerStore(s => s.enqueue);
-  const clearQueue     = usePlayerStore(s => s.clearQueue);
-  const setQueueVisible = usePlayerStore(s => s.setQueueVisible);
+  const stableNavigate = useCallback((path: string) => navigate(path), [navigate]);

-  // Hide queue panel while on this page, restore on leave
-  useEffect(() => {
-    const wasVisible = usePlayerStore.getState().isQueueVisible;
-    if (wasVisible) setQueueVisible(false);
-    return () => { if (wasVisible) setQueueVisible(true); };
-  }, [setQueueVisible]);
-
-  // Extra song metadata (genre) fetched via getSong
+  // Extra song metadata
  const [songMeta, setSongMeta] = useState<SubsonicSong | null>(null);
  useEffect(() => {
    if (!currentTrack) { setSongMeta(null); return; }
    getSong(currentTrack.id).then(setSongMeta);
  }, [currentTrack?.id]);

-  // Favorite state
-  const [starred, setStarred] = useState(false);
+  // Artist info (bio + similar artists)
+  const [artistInfo, setArtistInfo] = useState<SubsonicArtistInfo | null>(null);
  useEffect(() => {
-    setStarred(!!songMeta?.starred);
-  }, [songMeta]);
+    if (!currentTrack?.artistId) { setArtistInfo(null); return; }
+    getArtistInfo(currentTrack.artistId).then(setArtistInfo).catch(() => setArtistInfo(null));
+  }, [currentTrack?.artistId]);
+
+  // Album tracks
+  const [albumTracks, setAlbumTracks] = useState<SubsonicSong[]>([]);
+  useEffect(() => {
+    if (!currentTrack?.albumId) { setAlbumTracks([]); return; }
+    getAlbum(currentTrack.albumId).then(d => setAlbumTracks(d.songs)).catch(() => setAlbumTracks([]));
+  }, [currentTrack?.albumId]);
+
+  // Bio expand toggle
+  const [bioExpanded, setBioExpanded] = useState(false);
+  useEffect(() => { setBioExpanded(false); }, [currentTrack?.artistId]);
+
+  // Favorite
+  const [starred, setStarred] = useState(false);
+  useEffect(() => { setStarred(!!songMeta?.starred); }, [songMeta]);
  const toggleStar = async () => {
    if (!currentTrack) return;
    if (starred) { await unstar(currentTrack.id, 'song'); setStarred(false); }
    else          { await star(currentTrack.id, 'song');   setStarred(true);  }
  };

-  // Cover / background
+  // Cover
  const coverFetchUrl = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
  const coverKey      = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
  const resolvedCover = useCachedUrl(coverFetchUrl, coverKey);

-  // Queue drag-and-drop
-  const [draggedIdx, setDraggedIdx]   = useState<number | null>(null);
-  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
-  const isDraggingInternalRef = useRef(false);
-  const draggedIdxRef  = useRef<number | null>(null);
-  const dragOverIdxRef = useRef<number | null>(null);
-  const queueListRef   = useRef<HTMLDivElement>(null);
-
-  const onDragStart = (e: React.DragEvent, index: number) => {
-    isDraggingInternalRef.current = true;
-    draggedIdxRef.current = index;
-    _dragFromIdx = index;
-    setDraggedIdx(index);
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'queue_reorder', index }));
-  };
-  const onDragEnterItem = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy';
-  };
-  const onDragOverItem = (e: React.DragEvent, index: number) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy';
-    dragOverIdxRef.current = index;
-    setDragOverIdx(index);
-  };
-  const onDragEnd = () => {
-    setDraggedIdx(null); setDragOverIdx(null);
-    isDraggingInternalRef.current = false;
-    draggedIdxRef.current = null; dragOverIdxRef.current = null;
-  };
-  const onDropQueue = async (e: React.DragEvent) => {
-    e.preventDefault();
-    isDraggingInternalRef.current = false;
-    draggedIdxRef.current = null; dragOverIdxRef.current = null;
-    setDraggedIdx(null); setDragOverIdx(null);
-
-    let parsedData: any = null;
-    try { const raw = e.dataTransfer.getData('text/plain'); if (raw) parsedData = JSON.parse(raw); } catch {}
-
-    if (parsedData?.type === 'queue_reorder' || _dragFromIdx !== null) {
-      const fromIdx: number = parsedData?.index ?? _dragFromIdx!;
-      _dragFromIdx = null;
-      let toIdx = queue.length;
-      if (queueListRef.current) {
-        const items = queueListRef.current.querySelectorAll<HTMLElement>('[data-queue-idx]');
-        for (let i = 0; i < items.length; i++) {
-          const rect = items[i].getBoundingClientRect();
-          if (e.clientY < rect.top + rect.height / 2) { toIdx = parseInt(items[i].dataset.queueIdx!); break; }
+  // Ambilight — sample 8 zones (4 corners + 4 edge midpoints)
+  const [ambilightColors, setAmbilightColors] = useState({
+    tl: '0,0,0', tc: '0,0,0', tr: '0,0,0',
+    ml: '0,0,0',                             mr: '0,0,0',
+    bl: '0,0,0', bc: '0,0,0', br: '0,0,0',
+  });
+  useEffect(() => {
+    if (!resolvedCover) return;
+    const img = new Image();
+    img.onload = () => {
+      const S = 30;
+      const canvas = document.createElement('canvas');
+      canvas.width = S; canvas.height = S;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      ctx.drawImage(img, 0, 0, S, S);
+      const data = ctx.getImageData(0, 0, S, S).data;
+      const t = Math.floor(S * 0.25), m = Math.floor(S * 0.5), b2 = Math.floor(S * 0.75);
+      const avg = (x0: number, y0: number, x1: number, y1: number) => {
+        let r = 0, g = 0, b = 0, n = 0;
+        for (let y = y0; y < y1; y++) for (let x = x0; x < x1; x++) {
+          const i = (y * S + x) * 4;
+          r += data[i]; g += data[i+1]; b += data[i+2]; n++;
        }
-      }
-      if (fromIdx !== toIdx) reorderQueue(fromIdx, toIdx);
-      return;
-    }
-    _dragFromIdx = null;
-    if (!parsedData) return;
-    if (parsedData.type === 'song') enqueue([parsedData.track]);
-    else if (parsedData.type === 'album') {
-      const albumData = await getAlbum(parsedData.id);
-      const tracks: Track[] = albumData.songs.map(s => ({
-        id: s.id, title: s.title, artist: s.artist, album: s.album,
-        albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt,
-        track: s.track, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
-      }));
-      enqueue(tracks);
-    }
-  };
+        return `${Math.round(r/n)},${Math.round(g/n)},${Math.round(b/n)}`;
+      };
+      setAmbilightColors({
+        tl: avg(0, 0, t, t),         tc: avg(t, 0, b2, t),        tr: avg(b2, 0, S, t),
+        ml: avg(0, t, t, b2),                                       mr: avg(b2, t, S, b2),
+        bl: avg(0, b2, t, S),        bc: avg(t, b2, b2, S),        br: avg(b2, b2, S, S),
+      });
+    };
+    img.src = resolvedCover;
+  }, [resolvedCover]);

-  // Playlist modals
-  const [saveModalOpen, setSaveModalOpen] = useState(false);
-  const [loadModalOpen, setLoadModalOpen] = useState(false);

-  const totalSecs = queue.reduce((acc, t) => acc + (t.duration || 0), 0);
+  const similarArtists = artistInfo?.similarArtist ?? [];

  return (
    <div className="np-page">
-      {/* ── Hero ── */}
-      <div className="np-hero">
-        <NpBg url={resolvedCover ?? ''} />
+      <NpBg url={resolvedCover ?? ''} />

-        <div className="np-hero-content">
-          {currentTrack ? (
-            <>
-              {/* Cover + glow */}
-              <div className="np-cover-wrap">
-                {resolvedCover && (
-                  <img src={resolvedCover} alt="" className="np-cover-glow" aria-hidden="true" />
-                )}
+      <div className="np-main">
+        {currentTrack ? (
+          <>
+            {/* ── Hero Card ── */}
+            <div className="np-hero-card">
+
+              {/* Left: meta info */}
+              <div className="np-hero-left">
+                <div className="np-hero-info">
+                  <div className="np-title" style={{ color: 'var(--accent)' }}>{currentTrack.title}</div>
+                  <div className="np-artist-album">
+                    <span className="np-link"
+                      onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+                      style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
+                    >{currentTrack.artist}</span>
+                    <span className="np-sep">·</span>
+                    <span className="np-link"
+                      onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
+                      style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
+                    >{currentTrack.album}</span>
+                    {currentTrack.year && <><span className="np-sep">·</span><span>{currentTrack.year}</span></>}
+                  </div>
+                  <div className="np-tech-row">
+                    {songMeta?.genre && <span className="np-badge">{songMeta.genre}</span>}
+                    {currentTrack.suffix && <span className="np-badge">{currentTrack.suffix.toUpperCase()}</span>}
+                    {currentTrack.bitRate && <span className="np-badge">{currentTrack.bitRate} kbps</span>}
+                    {currentTrack.duration && <span className="np-badge">{formatTime(currentTrack.duration)}</span>}
+                    {renderStars(currentTrack.userRating)}
+                    <button onClick={toggleStar} className="np-star-btn"
+                      data-tooltip={starred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
+                    >
+                      <Star size={17} fill={starred ? 'var(--ctp-yellow)' : 'none'} color={starred ? 'var(--ctp-yellow)' : 'white'} />
+                    </button>
+                    <button
+                      className="np-star-btn"
+                      onClick={() => { if (!isQueueVisible) toggleQueue(); showLyrics(); }}
+                      data-tooltip={t('player.lyrics')}
+                      style={{ color: activeTab === 'lyrics' && isQueueVisible ? 'var(--accent)' : 'white' }}
+                    >
+                      <MicVocal size={17} />
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Center: cover */}
+              <div className="np-hero-cover-wrap">
+                <div style={{
+                  position: 'absolute', inset: '-20px', zIndex: 0,
+                  background: `
+                    radial-gradient(circle at 0%   0%,   rgba(${ambilightColors.tl},0.85) 0%, transparent 55%),
+                    radial-gradient(circle at 50%  0%,   rgba(${ambilightColors.tc},0.85) 0%, transparent 55%),
+                    radial-gradient(circle at 100% 0%,   rgba(${ambilightColors.tr},0.85) 0%, transparent 55%),
+                    radial-gradient(circle at 0%   50%,  rgba(${ambilightColors.ml},0.85) 0%, transparent 55%),
+                    radial-gradient(circle at 100% 50%,  rgba(${ambilightColors.mr},0.85) 0%, transparent 55%),
+                    radial-gradient(circle at 0%   100%, rgba(${ambilightColors.bl},0.85) 0%, transparent 55%),
+                    radial-gradient(circle at 50%  100%, rgba(${ambilightColors.bc},0.85) 0%, transparent 55%),
+                    radial-gradient(circle at 100% 100%, rgba(${ambilightColors.br},0.85) 0%, transparent 55%)
+                  `,
+                  filter: 'blur(28px)',
+                }} />
                {resolvedCover
-                  ? <img src={resolvedCover} alt="" className="np-cover" />
-                  : <div className="np-cover np-cover-fallback"><Music size={64} /></div>
+                  ? <img src={resolvedCover} alt="" className="np-cover" style={{ position: 'relative', zIndex: 1 }} />
+                  : <div className="np-cover np-cover-fallback" style={{ position: 'relative', zIndex: 1 }}><Music size={52} /></div>
                }
              </div>

-              {/* Meta */}
-              <div className="np-info">
-                <div className="np-title">{currentTrack.title}</div>
+              {/* Right: tag cloud */}
+              <TagCloud
+                similarArtists={similarArtists}
+                onArtistClick={id => navigate(`/artist/${id}`)}
+              />

-                <div className="np-artist-album">
-                  <span
-                    className="np-link"
-                    onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
-                    style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
-                  >{currentTrack.artist}</span>
-                  <span className="np-sep">·</span>
-                  <span
-                    className="np-link"
-                    onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
-                    style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
-                  >{currentTrack.album}</span>
-                  {currentTrack.year && <><span className="np-sep">·</span><span>{currentTrack.year}</span></>}
-                </div>
-
-                <div className="np-tech-row">
-                  {songMeta?.genre && <span className="np-badge">{songMeta.genre}</span>}
-                  {currentTrack.suffix && <span className="np-badge">{currentTrack.suffix.toUpperCase()}</span>}
-                  {currentTrack.bitRate && <span className="np-badge">{currentTrack.bitRate} kbps</span>}
-                  {currentTrack.duration && <span className="np-badge">{formatTime(currentTrack.duration)}</span>}
-                  {renderStars(currentTrack.userRating)}
-                  <button
-                    onClick={toggleStar}
-                    className="np-star-btn"
-                    data-tooltip={starred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
-                  >
-                    <Star size={18} fill={starred ? 'var(--ctp-yellow)' : 'none'} color={starred ? 'var(--ctp-yellow)' : 'white'} />
-                  </button>
-                </div>
-              </div>
-            </>
-          ) : (
-            <div className="np-empty-state">
-              <Music size={48} style={{ opacity: 0.3 }} />
-              <p>{t('nowPlaying.nothingPlaying')}</p>
            </div>
-          )}
-        </div>
-      </div>

-      {/* ── Queue list ── */}
-      <div className="np-queue-section">
-        <div className="np-queue-header">
-          <div>
-            <h2 className="np-queue-title">{t('queue.title')}</h2>
-            {queue.length > 0 && (
-              <div className="np-queue-meta">
-                {queue.length} {queue.length === 1 ? t('queue.trackSingular') : t('queue.trackPlural')} · {formatDuration(totalSecs)}
+            {/* ── About the Artist ── */}
+            {(artistInfo?.biography || artistInfo?.largeImageUrl) && (
+              <div className="np-info-card">
+                <div className="np-card-header">
+                  <h3 className="np-card-title">{t('nowPlaying.aboutArtist')}</h3>
+                  {currentTrack.artistId && (
+                    <button className="np-card-link" onClick={() => navigate(`/artist/${currentTrack.artistId}`)}>
+                      {t('nowPlaying.goToArtist')} <ExternalLink size={12} />
+                    </button>
+                  )}
+                </div>
+                <div className="np-artist-bio-row">
+                  {artistInfo.largeImageUrl && (
+                    <img src={artistInfo.largeImageUrl} alt={currentTrack.artist} className="np-artist-thumb" />
+                  )}
+                  {artistInfo.biography && (
+                    <div className="np-bio-wrap">
+                      <div
+                        className={`np-bio-text${bioExpanded ? ' expanded' : ''}`}
+                        dangerouslySetInnerHTML={{ __html: sanitizeHtml(artistInfo.biography) }}
+                      />
+                      <button className="np-bio-toggle" onClick={() => setBioExpanded(v => !v)}>
+                        {bioExpanded ? t('nowPlaying.showLess') : t('nowPlaying.readMore')}
+                      </button>
+                    </div>
+                  )}
+                </div>
              </div>
            )}
-          </div>
-          <div className="np-queue-actions">
-            <button onClick={() => shuffleQueue()} className="np-action-btn" data-tooltip={t('queue.shuffle')} disabled={queue.length < 2}>
-              <Shuffle size={15} />
-            </button>
-            <button onClick={() => setSaveModalOpen(true)} className="np-action-btn" data-tooltip={t('queue.save')} disabled={queue.length === 0}>
-              <Save size={15} />
-            </button>
-            <button onClick={() => setLoadModalOpen(true)} className="np-action-btn" data-tooltip={t('queue.load')}>
-              <FolderOpen size={15} />
-            </button>
-            <button onClick={clearQueue} className="np-action-btn" data-tooltip={t('queue.clear')} disabled={queue.length === 0}>
-              <Trash2 size={15} />
-            </button>
-          </div>
-        </div>

-        <div
-          className="np-queue-list"
-          ref={queueListRef}
-          onDragEnter={e => { e.preventDefault(); e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy'; }}
-          onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy'; }}
-          onDrop={onDropQueue}
-        >
-          {queue.length === 0 ? (
-            <div className="queue-empty">{t('queue.emptyQueue')}</div>
-          ) : (
-            queue.map((track, idx) => {
-              const isActive = idx === queueIndex;
-              const isDragging = draggedIdx === idx;
-              const isDragOver = dragOverIdx === idx;
-              let dragStyle: React.CSSProperties = {};
-              if (isDragging) dragStyle = { opacity: 0.4, background: 'var(--bg-hover)' };
-              else if (isDragOver && draggedIdx !== null) {
-                dragStyle = draggedIdx > idx
-                  ? { borderTop: '2px solid var(--accent)', paddingTop: '6px', marginTop: '-2px' }
-                  : { borderBottom: '2px solid var(--accent)', paddingBottom: '6px', marginBottom: '-2px' };
-              }
-
-              return (
-                <div
-                  key={`${track.id}-${idx}`}
-                  data-queue-idx={idx}
-                  className={`np-queue-item ${isActive ? 'active' : ''} ${contextMenu.isOpen && contextMenu.type === 'queue-item' && contextMenu.queueIndex === idx ? 'context-active' : ''}`}
-                  onClick={() => playTrack(track, queue)}
-                  onContextMenu={e => { e.preventDefault(); usePlayerStore.getState().openContextMenu(e.clientX, e.clientY, track, 'queue-item', idx); }}
-                  draggable
-                  onDragStart={e => onDragStart(e, idx)}
-                  onDragEnter={e => onDragEnterItem(e)}
-                  onDragOver={e => onDragOverItem(e, idx)}
-                  onDragEnd={onDragEnd}
-                  style={dragStyle}
-                >
-                  <div className="np-queue-num">
-                    {isActive
-                      ? <Play size={12} fill="var(--accent)" color="var(--accent)" />
-                      : <span>{idx + 1}</span>
-                    }
-                  </div>
-                  <div className="np-queue-item-info">
-                    <div className={`np-queue-item-title truncate ${isActive ? 'np-queue-item-active' : ''}`}>{track.title}</div>
-                    <div className="np-queue-item-artist truncate">{track.artist} · {track.album}</div>
-                  </div>
-                  <div className="np-queue-item-duration">{formatTime(track.duration)}</div>
-                  <button
-                    className="np-queue-remove"
-                    onClick={e => { e.stopPropagation(); removeTrack(idx); }}
-                    data-tooltip={t('queue.remove')}
-                  ><X size={13} /></button>
-                </div>
-              );
-            })
-          )}
-        </div>
+            <NpTrackList
+              albumTracks={albumTracks}
+              currentTrackId={currentTrack.id}
+              album={currentTrack.album}
+              albumId={currentTrack.albumId}
+              onNavigate={stableNavigate}
+            />
+          </>
+        ) : (
+          <div className="np-empty-state">
+            <Music size={48} style={{ opacity: 0.3 }} />
+            <p>{t('nowPlaying.nothingPlaying')}</p>
+          </div>
+        )}
      </div>
-
-      {saveModalOpen && (
-        <SavePlaylistModal
-          onClose={() => setSaveModalOpen(false)}
-          onSave={async name => {
-            try { await createPlaylist(name, queue.map(t => t.id)); setSaveModalOpen(false); }
-            catch (e) { console.error(e); }
-          }}
-        />
-      )}
-      {loadModalOpen && (
-        <LoadPlaylistModal
-          onClose={() => setLoadModalOpen(false)}
-          onLoad={async id => {
-            try {
-              const data = await getPlaylist(id);
-              const tracks: Track[] = data.songs.map(s => ({
-                id: s.id, title: s.title, artist: s.artist, album: s.album,
-                albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt,
-                track: s.track, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
-              }));
-              if (tracks.length > 0) { clearQueue(); playTrack(tracks[0], tracks); }
-              setLoadModalOpen(false);
-            } catch (e) { console.error(e); }
-          }}
-        />
-      )}
    </div>
  );
 }
@@ -210,7 +210,7 @@ export default function RandomMix() {
        overflow: 'hidden',
      }}>
        {/* Left: Blacklist */}
-        <div style={{ background: 'var(--bg-elevated)', padding: '1rem 1.25rem' }}>
+        <div style={{ background: 'var(--bg-card)', padding: '1rem 1.25rem' }}>
          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
            {t('randomMix.filterPanelTitle')}
          </div>
@@ -291,7 +291,7 @@ export default function RandomMix() {
        </div>

        {/* Right: Genre Mix */}
-        <div style={{ background: 'var(--bg-elevated)', padding: '1rem 1.25rem' }}>
+        <div style={{ background: 'var(--bg-card)', padding: '1rem 1.25rem' }}>
          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
            {t('randomMix.genreMixTitle')}
          </div>
@@ -342,7 +342,7 @@ export default function RandomMix() {
              {genreMixSongs.map(song => (
                <div key={song.id} className={`track-row${contextMenuSongId === song.id ? ' context-active' : ''}`} style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 80px' }}
                  onDoubleClick={() => playTrack(song, genreMixSongs)} role="row" draggable
-                  onContextMenu={e => { e.preventDefault(); setContextMenuSongId(song.id); openContextMenu(e.clientX, e.clientY, { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating }, 'song'); }}
+                  onContextMenu={e => { e.preventDefault(); setContextMenuSongId(song.id); openContextMenu(e.clientX, e.clientY, { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred }, 'song'); }}
                  onDragStart={e => {
                    e.dataTransfer.effectAllowed = 'copy';
                    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track: { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating } }));
@@ -351,7 +351,7 @@ export default function RandomMix() {
                  <button className="btn btn-ghost" style={{ padding: 4 }} onClick={e => { e.stopPropagation(); playTrack(song, genreMixSongs); }}>
                    <Play size={14} fill="currentColor" />
                  </button>
-                  <div className="track-info"><span className="track-title" data-tooltip={song.title}>{song.title}</span></div>
+                  <div className="track-info"><span className="track-title">{song.title}</span></div>
                  <div className="track-artist-cell"><span className="track-artist">{song.artist}</span></div>
                  <div className="track-info"><span className="track-title" style={{ fontSize: '0.85rem', color: 'var(--subtext0)' }}>{song.album}</span></div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{song.genre ?? '—'}</div>
@@ -391,7 +391,7 @@ export default function RandomMix() {
              draggable
              onContextMenu={e => {
                e.preventDefault();
-                const track = { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating };
+                const track = { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred };
                setContextMenuSongId(song.id);
                openContextMenu(e.clientX, e.clientY, track, 'song');
              }}
@@ -415,15 +415,15 @@ export default function RandomMix() {
              </button>

              <div className="track-info">
-                <span className="track-title" data-tooltip={song.title}>{song.title}</span>
+                <span className="track-title">{song.title}</span>
              </div>

              <div className="track-artist-cell">
-                <span className="track-artist" data-tooltip={song.artist}>{song.artist}</span>
+                <span className="track-artist">{song.artist}</span>
              </div>

              <div className="track-info">
-                <span className="track-title" style={{ fontSize: '0.85rem', color: 'var(--subtext0)' }} data-tooltip={song.album}>{song.album}</span>
+                <span className="track-title" style={{ fontSize: '0.85rem', color: 'var(--subtext0)' }}>{song.album}</span>
              </div>

              {(() => {
@@ -1,17 +1,21 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { version as appVersion } from '../../package.json';
 import changelogRaw from '../../CHANGELOG.md?raw';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import {
  Wifi, WifiOff, Globe, Music2, Sliders, LogOut, CheckCircle2, FolderOpen,
-  Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink, Shuffle, X, Play
+  Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink, Shuffle, X, Play, Type, Keyboard
 } from 'lucide-react';
 import { open as openUrl } from '@tauri-apps/plugin-shell';
-import { lastfmGetToken, lastfmAuthUrl, lastfmGetSession, lastfmIsConfigured, lastfmGetUserInfo, LastfmUserInfo } from '../api/lastfm';
+import { lastfmGetToken, lastfmAuthUrl, lastfmGetSession, lastfmGetUserInfo, LastfmUserInfo } from '../api/lastfm';
 import LastfmIcon from '../components/LastfmIcon';
 import CustomSelect from '../components/CustomSelect';
+import ThemePicker from '../components/ThemePicker';
 import { useAuthStore, ServerProfile } from '../store/authStore';
 import { useThemeStore } from '../store/themeStore';
+import { useFontStore, FontId } from '../store/fontStore';
+import { useKeybindingsStore, KeyAction, formatKeyCode, DEFAULT_BINDINGS } from '../store/keybindingsStore';
+import { useGlobalShortcutsStore, GlobalAction, buildGlobalShortcut, formatGlobalShortcut } from '../store/globalShortcutsStore';
 import { pingWithCredentials } from '../api/subsonic';
 import { open as openDialog } from '@tauri-apps/plugin-dialog';
 import { useTranslation } from 'react-i18next';
@@ -19,7 +23,7 @@ import Equalizer from '../components/Equalizer';

 const AUDIOBOOK_GENRES_DISPLAY = ['Hörbuch', 'Hoerbuch', 'Hörspiel', 'Hoerspiel', 'Audiobook', 'Audio Book', 'Spoken Word', 'Spokenword', 'Podcast', 'Kapitel', 'Thriller', 'Krimi', 'Speech', 'Fantasy', 'Comedy', 'Literature'];

-type Tab = 'playback' | 'library' | 'appearance' | 'server' | 'about';
+type Tab = 'playback' | 'library' | 'appearance' | 'shortcuts' | 'server' | 'about';

 function AddServerForm({ onSave, onCancel }: { onSave: (data: Omit<ServerProfile, 'id'>) => void; onCancel: () => void }) {
  const { t } = useTranslation();
@@ -82,10 +86,16 @@ function AddServerForm({ onSave, onCancel }: { onSave: (data: Omit<ServerProfile
 export default function Settings() {
  const auth = useAuthStore();
  const theme = useThemeStore();
+  const fontStore = useFontStore();
+  const kb = useKeybindingsStore();
+  const gs = useGlobalShortcutsStore();
+  const [listeningFor, setListeningFor] = useState<KeyAction | null>(null);
+  const [listeningForGlobal, setListeningForGlobal] = useState<GlobalAction | null>(null);
  const navigate = useNavigate();
+  const { state: routeState } = useLocation();
  const { t, i18n } = useTranslation();

-  const [activeTab, setActiveTab] = useState<Tab>('playback');
+  const [activeTab, setActiveTab] = useState<Tab>((routeState as { tab?: Tab } | null)?.tab ?? 'server');
  const [connStatus, setConnStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({});
  const [showAddForm, setShowAddForm] = useState(false);
  const [newGenre, setNewGenre] = useState('');
@@ -205,10 +215,11 @@ export default function Settings() {
  };

  const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
+    { id: 'server',      label: t('settings.tabServer'),      icon: <Server size={15} /> },
+    { id: 'appearance',  label: t('settings.tabAppearance'),  icon: <Palette size={15} /> },
    { id: 'playback',    label: t('settings.tabPlayback'),    icon: <Play size={15} /> },
    { id: 'library',     label: t('settings.tabLibrary'),     icon: <Shuffle size={15} /> },
-    { id: 'appearance',  label: t('settings.tabAppearance'),  icon: <Palette size={15} /> },
-    { id: 'server',      label: t('settings.tabServer'),      icon: <Server size={15} /> },
+    { id: 'shortcuts',   label: t('settings.tabShortcuts'),   icon: <Keyboard size={15} /> },
    { id: 'about',       label: t('settings.tabAbout'),       icon: <Info size={15} /> },
  ];

@@ -287,7 +298,9 @@ export default function Settings() {
              {/* Crossfade */}
              <div className="settings-toggle-row">
                <div>
-                  <div style={{ fontWeight: 500 }}>{t('settings.crossfade')}</div>
+                  <div style={{ fontWeight: 500 }}>
+                    {t('settings.crossfade')}
+                  </div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.crossfadeDesc')}</div>
                </div>
                <label className="toggle-switch" aria-label={t('settings.crossfade')}>
@@ -318,7 +331,9 @@ export default function Settings() {
              {/* Gapless */}
              <div className="settings-toggle-row">
                <div>
-                  <div style={{ fontWeight: 500 }}>{t('settings.gapless')}</div>
+                  <div style={{ fontWeight: 500 }}>
+                    {t('settings.gapless')}
+                  </div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.gaplessDesc')}</div>
                </div>
                <label className="toggle-switch" aria-label={t('settings.gapless')}>
@@ -329,80 +344,6 @@ export default function Settings() {
            </div>
          </section>

-          {/* Last.fm */}
-          <section className="settings-section">
-            <div className="settings-section-header">
-              <Music2 size={18} />
-              <h2>{t('settings.lfmTitle')}</h2>
-            </div>
-            <div className="settings-card">
-              {auth.lastfmSessionKey ? (
-                /* ── Connected state ── */
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.75rem 1rem', borderRadius: '10px', background: 'color-mix(in srgb, var(--accent) 8%, transparent)', border: '1px solid color-mix(in srgb, var(--accent) 20%, transparent)' }}>
-                    <div style={{ flexShrink: 0, color: '#e31c23' }}><LastfmIcon size={20} /></div>
-                    <div style={{ flex: 1, minWidth: 0 }}>
-                      <div style={{ fontWeight: 600, fontSize: 14 }}>@{auth.lastfmUsername}</div>
-                      {lfmUserInfo && (
-                        <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2, display: 'flex', gap: '0.75rem' }}>
-                          <span>{t('settings.lfmScrobbles', { n: lfmUserInfo.playcount.toLocaleString() })}</span>
-                          <span>{t('settings.lfmMemberSince', { year: new Date(lfmUserInfo.registeredAt * 1000).getFullYear() })}</span>
-                        </div>
-                      )}
-                    </div>
-                    <button
-                      className="btn btn-ghost"
-                      style={{ fontSize: 12, padding: '4px 10px', flexShrink: 0 }}
-                      onClick={() => auth.disconnectLastfm()}
-                    >
-                      {t('settings.lfmDisconnect')}
-                    </button>
-                  </div>
-                  <div className="settings-toggle-row">
-                    <div>
-                      <div style={{ fontWeight: 500 }}>{t('settings.scrobbleEnabled')}</div>
-                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.scrobbleDesc')}</div>
-                    </div>
-                    <label className="toggle-switch" aria-label={t('settings.scrobbleEnabled')}>
-                      <input type="checkbox" checked={auth.scrobblingEnabled} onChange={e => auth.setScrobblingEnabled(e.target.checked)} id="scrobbling-toggle" />
-                      <span className="toggle-track" />
-                    </label>
-                  </div>
-                </div>
-              ) : lfmState === 'waiting' ? (
-                /* ── Waiting for browser auth — auto-polling ── */
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', fontSize: 13, color: 'var(--text-secondary)' }}>
-                    <div className="spinner" style={{ width: 16, height: 16, borderWidth: 2 }} />
-                    {t('settings.lfmConnecting')}
-                  </div>
-                  <button className="btn btn-ghost" style={{ alignSelf: 'flex-start', fontSize: 12 }}
-                    onClick={() => { setLfmState('idle'); setLfmPendingToken(null); }}>
-                    {t('common.cancel')}
-                  </button>
-                </div>
-              ) : (
-                /* ── Not connected ── */
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-                  <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
-                    {t('settings.lfmConnectDesc')}
-                  </p>
-                  {lfmState === 'error' && (
-                    <p style={{ fontSize: 12, color: 'var(--danger)' }}>{lfmError}</p>
-                  )}
-                  {lastfmIsConfigured() ? (
-                    <button className="btn btn-primary" style={{ alignSelf: 'flex-start' }} onClick={startLastfmConnect}>
-                      {t('settings.lfmConnect')}
-                    </button>
-                  ) : (
-                    <p style={{ fontSize: 12, color: 'var(--warning)' }}>
-                      VITE_LASTFM_API_KEY / VITE_LASTFM_API_SECRET not set in build environment.
-                    </p>
-                  )}
-                </div>
-              )}
-            </div>
-          </section>
        </>
      )}

@@ -507,7 +448,7 @@ export default function Settings() {
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: '0.5rem', color: 'var(--text-muted)' }}>{t('settings.randomMixHardcodedTitle')}</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem' }}>
                {AUDIOBOOK_GENRES_DISPLAY.map(genre => (
-                  <span key={genre} style={{
+                  <span key={genre} className="genre-keyword-badge" style={{
                    display: 'inline-flex', alignItems: 'center',
                    background: 'var(--bg-hover)', color: 'var(--text-muted)',
                    borderRadius: 'var(--radius-sm)', padding: '2px 8px', fontSize: 12,
@@ -524,32 +465,6 @@ export default function Settings() {
      {/* ── Appearance ───────────────────────────────────────────────────────── */}
      {activeTab === 'appearance' && (
        <>
-          <section className="settings-section">
-            <div className="settings-section-header">
-              <Palette size={18} />
-              <h2>{t('settings.theme')}</h2>
-            </div>
-            <div className="settings-card">
-              <div className="form-group" style={{ maxWidth: '300px' }}>
-                <CustomSelect
-                  value={theme.theme}
-                  onChange={v => theme.setTheme(v as any)}
-                  options={[
-                    { value: 'mocha', label: 'Catppuccin Mocha' },
-                    { value: 'macchiato', label: 'Catppuccin Macchiato' },
-                    { value: 'frappe', label: 'Catppuccin Frappé' },
-                    { value: 'latte', label: 'Catppuccin Latte' },
-                    { value: 'nord', label: 'Nord · Polar Night' },
-                    { value: 'nord-snowstorm', label: 'Nord · Snowstorm' },
-                    { value: 'nord-frost', label: 'Nord · Frost' },
-                    { value: 'nord-aurora', label: 'Nord · Aurora' },
-                    { value: 'psychowave', label: 'Psychowave' },
-                  ]}
-                />
-              </div>
-            </div>
-          </section>
-
          <section className="settings-section">
            <div className="settings-section-header">
              <Globe size={18} />
@@ -561,13 +476,241 @@ export default function Settings() {
                  value={i18n.language}
                  onChange={v => i18n.changeLanguage(v)}
                  options={[
+                    { value: 'nl', label: t('settings.languageNl') },
                    { value: 'en', label: t('settings.languageEn') },
+                    { value: 'fr', label: t('settings.languageFr') },
                    { value: 'de', label: t('settings.languageDe') },
                  ]}
                />
              </div>
            </div>
          </section>
+
+          <section className="settings-section">
+            <div className="settings-section-header">
+              <Palette size={18} />
+              <h2>{t('settings.theme')}</h2>
+            </div>
+            <div className="settings-card">
+              <ThemePicker value={theme.theme} onChange={v => theme.setTheme(v as any)} />
+            </div>
+          </section>
+
+          <section className="settings-section">
+            <div className="settings-section-header">
+              <Type size={18} />
+              <h2>{t('settings.font')}</h2>
+            </div>
+            <div className="settings-card">
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                {([
+                  { id: 'inter',   label: 'Inter',            sample: 'The quick brown fox' },
+                  { id: 'outfit',  label: 'Outfit',           sample: 'The quick brown fox' },
+                  { id: 'dm-sans', label: 'DM Sans',          sample: 'The quick brown fox' },
+                  { id: 'nunito',  label: 'Nunito',           sample: 'The quick brown fox' },
+                  { id: 'rubik',             label: 'Rubik',             sample: 'The quick brown fox' },
+                  { id: 'space-grotesk',     label: 'Space Grotesk',     sample: 'The quick brown fox' },
+                  { id: 'figtree',           label: 'Figtree',           sample: 'The quick brown fox' },
+                  { id: 'manrope',           label: 'Manrope',           sample: 'The quick brown fox' },
+                  { id: 'plus-jakarta-sans', label: 'Plus Jakarta Sans',  sample: 'The quick brown fox' },
+                  { id: 'lexend',            label: 'Lexend',            sample: 'The quick brown fox' },
+                ] as { id: FontId; label: string; sample: string }[]).map(f => (
+                  <button
+                    key={f.id}
+                    onClick={() => fontStore.setFont(f.id)}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: '12px',
+                      background: fontStore.font === f.id ? 'var(--accent-dim)' : 'transparent',
+                      border: `1px solid ${fontStore.font === f.id ? 'var(--accent)' : 'var(--border-subtle)'}`,
+                      borderRadius: 'var(--radius-md)', padding: '10px 14px',
+                      cursor: 'pointer', textAlign: 'left', width: '100%',
+                    }}
+                  >
+                    <div style={{
+                      width: 14, height: 14, borderRadius: '50%', flexShrink: 0,
+                      border: `2px solid ${fontStore.font === f.id ? 'var(--accent)' : 'var(--border)'}`,
+                      background: fontStore.font === f.id ? 'var(--accent)' : 'transparent',
+                    }} />
+                    <div>
+                      <div style={{ fontFamily: `'${f.label}', sans-serif`, fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>{f.label}</div>
+                      <div style={{ fontFamily: `'${f.label}', sans-serif`, fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>{f.sample}</div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </section>
+        </>
+      )}
+
+      {/* ── Shortcuts ────────────────────────────────────────────────────────── */}
+      {activeTab === 'shortcuts' && (
+        <>
+        <section className="settings-section">
+          <div className="settings-section-header">
+            <Keyboard size={18} />
+            <h2>{t('settings.tabShortcuts')}</h2>
+          </div>
+          <div className="settings-card">
+            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '12px' }}>
+              <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => { kb.resetToDefaults(); setListeningFor(null); }}>
+                {t('settings.shortcutsReset')}
+              </button>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              {([
+                ['play-pause',        t('settings.shortcutPlayPause')],
+                ['next',              t('settings.shortcutNext')],
+                ['prev',              t('settings.shortcutPrev')],
+                ['volume-up',         t('settings.shortcutVolumeUp')],
+                ['volume-down',       t('settings.shortcutVolumeDown')],
+                ['seek-forward',      t('settings.shortcutSeekForward')],
+                ['seek-backward',     t('settings.shortcutSeekBackward')],
+                ['toggle-queue',      t('settings.shortcutToggleQueue')],
+                ['fullscreen-player', t('settings.shortcutFullscreenPlayer')],
+                ['native-fullscreen', t('settings.shortcutNativeFullscreen')],
+              ] as [KeyAction, string][]).map(([action, label]) => {
+                const bound = kb.bindings[action];
+                const isListening = listeningFor === action;
+                return (
+                  <div key={action} style={{
+                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                    padding: '8px 10px', borderRadius: 'var(--radius-sm)',
+                    background: isListening ? 'var(--accent-dim)' : 'transparent',
+                    transition: 'background 0.15s',
+                  }}>
+                    <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>{label}</span>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                      <button
+                        onClick={() => {
+                          if (isListening) { setListeningFor(null); return; }
+                          setListeningFor(action);
+                          const handler = (e: KeyboardEvent) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (e.code !== 'Escape') {
+                              // unbind any existing action with this key first
+                              const existing = (Object.entries(kb.bindings) as [KeyAction, string | null][])
+                                .find(([, c]) => c === e.code)?.[0];
+                              if (existing && existing !== action) kb.setBinding(existing, null);
+                              kb.setBinding(action, e.code);
+                            }
+                            setListeningFor(null);
+                            window.removeEventListener('keydown', handler, true);
+                          };
+                          window.addEventListener('keydown', handler, true);
+                        }}
+                        className="keybind-badge"
+                        style={{
+                          minWidth: 72, padding: '3px 10px', borderRadius: 'var(--radius-sm)',
+                          fontSize: 12, fontWeight: 600, fontFamily: 'monospace',
+                          background: isListening ? 'var(--accent)' : bound ? 'var(--bg-hover)' : 'var(--bg-card)',
+                          color: isListening ? 'var(--ctp-base)' : bound ? 'var(--text-primary)' : 'var(--text-muted)',
+                          border: `1px solid ${isListening ? 'var(--accent)' : 'var(--border-subtle)'}`,
+                          cursor: 'pointer',
+                        }}
+                      >
+                        {isListening ? t('settings.shortcutListening') : bound ? formatKeyCode(bound) : t('settings.shortcutUnbound')}
+                      </button>
+                      {bound && !isListening && (
+                        <button
+                          onClick={() => kb.setBinding(action, null)}
+                          style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', padding: '2px 4px', lineHeight: 1 }}
+                          data-tooltip={t('settings.shortcutClear')}
+                        >
+                          <X size={12} />
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        <section className="settings-section">
+          <div className="settings-section-header">
+            <Keyboard size={18} />
+            <h2>{t('settings.globalShortcutsTitle')}</h2>
+          </div>
+          <p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '12px', lineHeight: 1.5 }}>
+            {t('settings.globalShortcutsNote')}
+          </p>
+          <div className="settings-card">
+            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '12px' }}>
+              <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => { gs.resetAll(); setListeningForGlobal(null); }}>
+                {t('settings.shortcutsReset')}
+              </button>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              {([
+                ['play-pause',  t('settings.shortcutPlayPause')],
+                ['next',        t('settings.shortcutNext')],
+                ['prev',        t('settings.shortcutPrev')],
+                ['volume-up',   t('settings.shortcutVolumeUp')],
+                ['volume-down', t('settings.shortcutVolumeDown')],
+              ] as [GlobalAction, string][]).map(([action, label]) => {
+                const bound = gs.shortcuts[action] ?? null;
+                const isListening = listeningForGlobal === action;
+                return (
+                  <div key={action} style={{
+                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                    padding: '8px 10px', borderRadius: 'var(--radius-sm)',
+                    background: isListening ? 'var(--accent-dim)' : 'transparent',
+                    transition: 'background 0.15s',
+                  }}>
+                    <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>{label}</span>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                      <button
+                        onClick={() => {
+                          if (isListening) { setListeningForGlobal(null); return; }
+                          setListeningForGlobal(action);
+                          const handler = (e: KeyboardEvent) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (e.code === 'Escape') {
+                              setListeningForGlobal(null);
+                              window.removeEventListener('keydown', handler, true);
+                              return;
+                            }
+                            const shortcut = buildGlobalShortcut(e);
+                            if (shortcut) {
+                              gs.setShortcut(action, shortcut);
+                              setListeningForGlobal(null);
+                              window.removeEventListener('keydown', handler, true);
+                            }
+                          };
+                          window.addEventListener('keydown', handler, true);
+                        }}
+                        className="keybind-badge"
+                        style={{
+                          minWidth: 120, padding: '3px 10px', borderRadius: 'var(--radius-sm)',
+                          fontSize: 12, fontWeight: 600, fontFamily: 'monospace',
+                          background: isListening ? 'var(--accent)' : bound ? 'var(--bg-hover)' : 'var(--bg-card)',
+                          color: isListening ? 'var(--ctp-base)' : bound ? 'var(--text-primary)' : 'var(--text-muted)',
+                          border: `1px solid ${isListening ? 'var(--accent)' : 'var(--border-subtle)'}`,
+                          cursor: 'pointer',
+                        }}
+                      >
+                        {isListening ? t('settings.shortcutListening') : bound ? formatGlobalShortcut(bound) : t('settings.shortcutUnbound')}
+                      </button>
+                      {bound && !isListening && (
+                        <button
+                          onClick={() => gs.setShortcut(action, null)}
+                          style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', padding: '2px 4px', lineHeight: 1 }}
+                          data-tooltip={t('settings.shortcutClear')}
+                        >
+                          <X size={12} />
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
        </>
      )}

@@ -653,6 +796,75 @@ export default function Settings() {
            )}
          </section>

+          {/* Last.fm */}
+          <section className="settings-section">
+            <div className="settings-section-header">
+              <LastfmIcon size={18} />
+              <h2>{t('settings.lfmTitle')}</h2>
+            </div>
+            <div className="settings-card">
+              {auth.lastfmSessionKey ? (
+                /* ── Connected state ── */
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.75rem 1rem', borderRadius: '10px', background: 'color-mix(in srgb, var(--accent) 8%, transparent)', border: '1px solid color-mix(in srgb, var(--accent) 20%, transparent)' }}>
+                    <div style={{ flexShrink: 0, color: '#e31c23' }}><LastfmIcon size={20} /></div>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontWeight: 600, fontSize: 14 }}>@{auth.lastfmUsername}</div>
+                      {lfmUserInfo && (
+                        <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2, display: 'flex', gap: '0.75rem' }}>
+                          <span>{t('settings.lfmScrobbles', { n: lfmUserInfo.playcount.toLocaleString() })}</span>
+                          <span>{t('settings.lfmMemberSince', { year: new Date(lfmUserInfo.registeredAt * 1000).getFullYear() })}</span>
+                        </div>
+                      )}
+                    </div>
+                    <button
+                      className="btn btn-ghost"
+                      style={{ fontSize: 12, padding: '4px 10px', flexShrink: 0 }}
+                      onClick={() => auth.disconnectLastfm()}
+                    >
+                      {t('settings.lfmDisconnect')}
+                    </button>
+                  </div>
+                  <div className="settings-toggle-row">
+                    <div>
+                      <div style={{ fontWeight: 500 }}>{t('settings.scrobbleEnabled')}</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.scrobbleDesc')}</div>
+                    </div>
+                    <label className="toggle-switch" aria-label={t('settings.scrobbleEnabled')}>
+                      <input type="checkbox" checked={auth.scrobblingEnabled} onChange={e => auth.setScrobblingEnabled(e.target.checked)} id="scrobbling-toggle" />
+                      <span className="toggle-track" />
+                    </label>
+                  </div>
+                </div>
+              ) : lfmState === 'waiting' ? (
+                /* ── Waiting for browser auth — auto-polling ── */
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', fontSize: 13, color: 'var(--text-secondary)' }}>
+                    <div className="spinner" style={{ width: 16, height: 16, borderWidth: 2 }} />
+                    {t('settings.lfmConnecting')}
+                  </div>
+                  <button className="btn btn-ghost" style={{ alignSelf: 'flex-start', fontSize: 12 }}
+                    onClick={() => { setLfmState('idle'); setLfmPendingToken(null); }}>
+                    {t('common.cancel')}
+                  </button>
+                </div>
+              ) : (
+                /* ── Not connected ── */
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+                  <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
+                    {t('settings.lfmConnectDesc')}
+                  </p>
+                  {lfmState === 'error' && (
+                    <p style={{ fontSize: 12, color: 'var(--danger)' }}>{lfmError}</p>
+                  )}
+                  <button className="btn btn-primary" style={{ alignSelf: 'flex-start' }} onClick={startLastfmConnect}>
+                    {t('settings.lfmConnect')}
+                  </button>
+                </div>
+              )}
+            </div>
+          </section>
+
          {/* Downloads + Tray */}
          <section className="settings-section">
            <div className="settings-section-header">
@@ -224,7 +224,7 @@ export default function Statistics() {
                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                          <span style={{ fontSize: '0.875rem', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{track.name}</span>
                          {track.nowPlaying && (
-                            <span style={{ fontSize: '0.65rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--accent)', flexShrink: 0 }}>{t('statistics.lfmNowPlaying')}</span>
+                            <span style={{ fontSize: 10, fontWeight: 600, padding: '1px 6px', borderRadius: 4, background: 'var(--accent)', color: 'var(--ctp-base)', opacity: 0.85, letterSpacing: '0.04em', textTransform: 'uppercase', flexShrink: 0 }}>{t('statistics.lfmNowPlaying')}</span>
                          )}
                        </div>
                        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
@@ -37,6 +37,7 @@ interface AuthState {
  isLoggedIn: boolean;
  isConnecting: boolean;
  connectionError: string | null;
+  lastfmSessionError: boolean;

  // Actions
  addServer: (profile: Omit<ServerProfile, 'id'>) => string;
@@ -49,6 +50,7 @@ interface AuthState {
  setLastfm: (apiKey: string, apiSecret: string, sessionKey: string, username: string) => void;
  connectLastfm: (sessionKey: string, username: string) => void;
  disconnectLastfm: () => void;
+  setLastfmSessionError: (v: boolean) => void;
  setMinimizeToTray: (v: boolean) => void;
  setScrobblingEnabled: (v: boolean) => void;
  setMaxCacheMb: (v: number) => void;
@@ -94,6 +96,7 @@ export const useAuthStore = create<AuthState>()(
      isLoggedIn: false,
      isConnecting: false,
      connectionError: null,
+      lastfmSessionError: false,

      addServer: (profile) => {
        const id = generateId();
@@ -132,7 +135,9 @@ export const useAuthStore = create<AuthState>()(
        set({ lastfmSessionKey: sessionKey, lastfmUsername: username }),

      disconnectLastfm: () =>
-        set({ lastfmSessionKey: '', lastfmUsername: '' }),
+        set({ lastfmSessionKey: '', lastfmUsername: '', lastfmSessionError: false }),
+
+      setLastfmSessionError: (v) => set({ lastfmSessionError: v }),

      setMinimizeToTray: (v) => set({ minimizeToTray: v }),
      setScrobblingEnabled: (v) => set({ scrobblingEnabled: v }),
@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type FontId = 'inter' | 'outfit' | 'dm-sans' | 'nunito' | 'rubik' | 'space-grotesk' | 'figtree' | 'manrope' | 'plus-jakarta-sans' | 'lexend';
+
+interface FontState {
+  font: FontId;
+  setFont: (font: FontId) => void;
+}
+
+export const useFontStore = create<FontState>()(
+  persist(
+    (set) => ({
+      font: 'lexend',
+      setFont: (font) => set({ font }),
+    }),
+    { name: 'psysonic_font' }
+  )
+);
@@ -0,0 +1,103 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { invoke } from '@tauri-apps/api/core';
+import { formatKeyCode } from './keybindingsStore';
+
+export type GlobalAction = 'play-pause' | 'next' | 'prev' | 'volume-up' | 'volume-down';
+
+const MODIFIER_CODES = [
+  'ControlLeft', 'ControlRight', 'AltLeft', 'AltRight',
+  'ShiftLeft', 'ShiftRight', 'MetaLeft', 'MetaRight', 'OSLeft', 'OSRight',
+];
+
+/** Build a Tauri-compatible shortcut string from a KeyboardEvent, or null if invalid. */
+export function buildGlobalShortcut(e: KeyboardEvent): string | null {
+  if (MODIFIER_CODES.includes(e.code)) return null;
+  // Require at least Ctrl, Alt, or Meta — Shift alone is too invasive
+  if (!e.ctrlKey && !e.altKey && !e.metaKey) return null;
+
+  const mods: string[] = [];
+  if (e.ctrlKey)  mods.push('ctrl');
+  if (e.altKey)   mods.push('alt');
+  if (e.shiftKey) mods.push('shift');
+  if (e.metaKey)  mods.push('super');
+
+  return [...mods, e.code].join('+');
+}
+
+/** Human-readable label for a stored shortcut string, e.g. "ctrl+alt+ArrowRight" → "Ctrl+Alt+→". */
+export function formatGlobalShortcut(shortcut: string): string {
+  return shortcut.split('+').map(part => {
+    if (part === 'ctrl')  return 'Ctrl';
+    if (part === 'alt')   return 'Alt';
+    if (part === 'shift') return 'Shift';
+    if (part === 'super' || part === 'meta') return 'Super';
+    return formatKeyCode(part);
+  }).join('+');
+}
+
+// Module-level guard — prevents double-registration from React StrictMode's
+// intentional double-invocation of effects in development.
+let _registerAllCalled = false;
+
+interface GlobalShortcutsState {
+  shortcuts: Partial<Record<GlobalAction, string>>;
+  setShortcut: (action: GlobalAction, shortcut: string | null) => Promise<void>;
+  registerAll: () => Promise<void>;
+  resetAll: () => Promise<void>;
+}
+
+export const useGlobalShortcutsStore = create<GlobalShortcutsState>()(
+  persist(
+    (set, get) => ({
+      shortcuts: {},
+
+      setShortcut: async (action, shortcut) => {
+        const prev = get().shortcuts[action];
+        if (prev) {
+          try { await invoke('unregister_global_shortcut', { shortcut: prev }); } catch {}
+        }
+        if (shortcut) {
+          try {
+            await invoke('register_global_shortcut', { shortcut, action });
+            set(s => ({ shortcuts: { ...s.shortcuts, [action]: shortcut } }));
+          } catch (e) {
+            console.warn('[GlobalShortcuts] Failed to register:', shortcut, e);
+          }
+        } else {
+          set(s => {
+            const next = { ...s.shortcuts };
+            delete next[action];
+            return { shortcuts: next };
+          });
+        }
+      },
+
+      registerAll: async () => {
+        if (_registerAllCalled) return;
+        _registerAllCalled = true;
+        const { shortcuts } = get();
+        for (const [action, shortcut] of Object.entries(shortcuts)) {
+          if (shortcut) {
+            try {
+              await invoke('register_global_shortcut', { shortcut, action });
+            } catch (e) {
+              console.warn('[GlobalShortcuts] Failed to re-register:', shortcut, e);
+            }
+          }
+        }
+      },
+
+      resetAll: async () => {
+        const { shortcuts } = get();
+        for (const shortcut of Object.values(shortcuts)) {
+          if (shortcut) {
+            try { await invoke('unregister_global_shortcut', { shortcut }); } catch {}
+          }
+        }
+        set({ shortcuts: {} });
+      },
+    }),
+    { name: 'psysonic_global_shortcuts' }
+  )
+);
@@ -0,0 +1,80 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type KeyAction =
+  | 'play-pause'
+  | 'next'
+  | 'prev'
+  | 'volume-up'
+  | 'volume-down'
+  | 'seek-forward'
+  | 'seek-backward'
+  | 'toggle-queue'
+  | 'fullscreen-player'
+  | 'native-fullscreen';
+
+// key = action, value = e.code string (e.g. 'Space', 'KeyN', 'F11') or null for unbound
+export type Bindings = Record<KeyAction, string | null>;
+
+export const DEFAULT_BINDINGS: Bindings = {
+  'play-pause':        'Space',
+  'next':              null,
+  'prev':              null,
+  'volume-up':         null,
+  'volume-down':       null,
+  'seek-forward':      null,
+  'seek-backward':     null,
+  'toggle-queue':      null,
+  'fullscreen-player': null,
+  'native-fullscreen': 'F11',
+};
+
+interface KeybindingsState {
+  bindings: Bindings;
+  setBinding: (action: KeyAction, code: string | null) => void;
+  resetToDefaults: () => void;
+}
+
+export const useKeybindingsStore = create<KeybindingsState>()(
+  persist(
+    (set) => ({
+      bindings: { ...DEFAULT_BINDINGS },
+      setBinding: (action, code) =>
+        set(s => ({ bindings: { ...s.bindings, [action]: code } })),
+      resetToDefaults: () => set({ bindings: { ...DEFAULT_BINDINGS } }),
+    }),
+    { name: 'psysonic_keybindings' }
+  )
+);
+
+/** Format an e.code value into a human-readable label. */
+export function formatKeyCode(code: string): string {
+  if (code === 'Space') return 'Space';
+  if (code === 'ArrowUp') return '↑';
+  if (code === 'ArrowDown') return '↓';
+  if (code === 'ArrowLeft') return '←';
+  if (code === 'ArrowRight') return '→';
+  if (code === 'Escape') return 'Esc';
+  if (code === 'Enter') return 'Enter';
+  if (code === 'Backspace') return '⌫';
+  if (code === 'Tab') return 'Tab';
+  if (code === 'Delete') return 'Del';
+  if (code === 'Home') return 'Home';
+  if (code === 'End') return 'End';
+  if (code === 'PageUp') return 'PgUp';
+  if (code === 'PageDown') return 'PgDn';
+  if (/^F\d+$/.test(code)) return code;
+  if (code.startsWith('Key')) return code.slice(3).toUpperCase();
+  if (code.startsWith('Digit')) return code.slice(5);
+  if (code === 'Minus') return '-';
+  if (code === 'Equal') return '=';
+  if (code === 'BracketLeft') return '[';
+  if (code === 'BracketRight') return ']';
+  if (code === 'Semicolon') return ';';
+  if (code === 'Quote') return "'";
+  if (code === 'Backslash') return '\\';
+  if (code === 'Comma') return ',';
+  if (code === 'Period') return '.';
+  if (code === 'Slash') return '/';
+  return code;
+}
@@ -0,0 +1,17 @@
+import { create } from 'zustand';
+
+type SidebarTab = 'queue' | 'lyrics';
+
+interface LyricsState {
+  activeTab: SidebarTab;
+  setTab: (tab: SidebarTab) => void;
+  showLyrics: () => void;
+  showQueue: () => void;
+}
+
+export const useLyricsStore = create<LyricsState>()((set) => ({
+  activeTab: 'queue',
+  setTab: (tab) => set({ activeTab: tab }),
+  showLyrics: () => set({ activeTab: 'lyrics' }),
+  showQueue: () => set({ activeTab: 'queue' }),
+}));
@@ -2,7 +2,7 @@ import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
-import { buildStreamUrl, getPlayQueue, savePlayQueue, reportNowPlaying, SubsonicSong } from '../api/subsonic';
+import { buildStreamUrl, getPlayQueue, savePlayQueue, reportNowPlaying, scrobbleSong, SubsonicSong } from '../api/subsonic';
 import { lastfmScrobble, lastfmUpdateNowPlaying, lastfmLoveTrack, lastfmUnloveTrack, lastfmGetTrackLoved, lastfmGetAllLovedTracks } from '../api/lastfm';
 import { useAuthStore } from './authStore';

@@ -23,6 +23,7 @@ export interface Track {
  replayGainTrackDb?: number;
  replayGainAlbumDb?: number;
  replayGainPeak?: number;
+  starred?: string;
 }

 export function songToTrack(song: SubsonicSong): Track {
@@ -43,6 +44,7 @@ export function songToTrack(song: SubsonicSong): Track {
    replayGainTrackDb: song.replayGain?.trackGain,
    replayGainAlbumDb: song.replayGain?.albumGain,
    replayGainPeak: song.replayGain?.trackPeak,
+    starred: song.starred,
  };
 }

@@ -58,6 +60,8 @@ interface PlayerState {
  scrobbled: boolean;
  lastfmLoved: boolean;
  lastfmLovedCache: Record<string, boolean>;
+  starredOverrides: Record<string, boolean>;
+  setStarredOverride: (id: string, starred: boolean) => void;

  playTrack: (track: Track, queue?: Track[]) => void;
  pause: () => void;
@@ -123,6 +127,10 @@ let seekDebounce: ReturnType<typeof setTimeout> | null = null;
 // to the Rust backend before it has finished the previous one.
 let togglePlayLock = false;

+// Timestamp of the last gapless auto-advance (from audio:track_switched).
+// Used to suppress ghost-commands from stale IPC arriving after the switch.
+let lastGaplessSwitchTime = 0;
+
 // ─── Server queue sync ─────────────────────────────────────────────────────────
 let syncTimeout: ReturnType<typeof setTimeout> | null = null;
 function syncQueueToServer(queue: Track[], currentTrack: Track | null, currentTime: number) {
@@ -151,18 +159,19 @@ function handleAudioProgress(current_time: number, duration: number) {
  const progress = current_time / dur;
  usePlayerStore.setState({ currentTime: current_time, progress, buffered: 0 });

-  // Scrobble at 50% directly via Last.fm
+  // Scrobble at 50%: Last.fm + Navidrome (updates play_date / recently played)
  if (progress >= 0.5 && !store.scrobbled) {
    usePlayerStore.setState({ scrobbled: true });
+    scrobbleSong(track.id, Date.now());
    const { scrobblingEnabled, lastfmSessionKey } = useAuthStore.getState();
    if (scrobblingEnabled && lastfmSessionKey) {
      lastfmScrobble(track, Date.now(), lastfmSessionKey);
    }
  }

-  // Gapless preload: buffer next track when 30s remain
+  // Pre-buffer / pre-chain next track when 30 s remain.
  const { gaplessEnabled } = useAuthStore.getState();
-  if (gaplessEnabled && dur - current_time < 30 && dur - current_time > 0) {
+  if (dur - current_time < 30 && dur - current_time > 0) {
    const { queue, queueIndex, repeatMode } = store;
    const nextIdx = queueIndex + 1;
    const nextTrack = repeatMode === 'one'
@@ -170,12 +179,41 @@ function handleAudioProgress(current_time: number, duration: number) {
      : (nextIdx < queue.length ? queue[nextIdx] : (repeatMode === 'all' ? queue[0] : null));
    if (nextTrack && nextTrack.id !== track.id) {
      const nextUrl = buildStreamUrl(nextTrack.id);
-      invoke('audio_preload', { url: nextUrl, durationHint: nextTrack.duration }).catch(() => {});
+      if (gaplessEnabled) {
+        // Gapless ON: decode + chain directly into the Sink now, 30 s in
+        // advance. By the time the track boundary arrives, the next source is
+        // already live — no IPC round-trip at the gap point.
+        const authState = useAuthStore.getState();
+        const replayGainDb = authState.replayGainEnabled
+          ? (authState.replayGainMode === 'album'
+              ? nextTrack.replayGainAlbumDb
+              : nextTrack.replayGainTrackDb) ?? null
+          : null;
+        const replayGainPeak = authState.replayGainEnabled
+          ? (nextTrack.replayGainPeak ?? null)
+          : null;
+        invoke('audio_chain_preload', {
+          url: nextUrl,
+          volume: store.volume,
+          durationHint: nextTrack.duration,
+          replayGainDb,
+          replayGainPeak,
+        }).catch(() => {});
+      } else {
+        // Gapless OFF: just pre-download bytes so audio_play finds them cached.
+        invoke('audio_preload', { url: nextUrl, durationHint: nextTrack.duration }).catch(() => {});
+      }
    }
  }
 }

 function handleAudioEnded() {
+  // If a gapless switch happened recently, this ended event is stale — the
+  // progress task fired it for the OLD source before seeing the chained one.
+  if (Date.now() - lastGaplessSwitchTime < 600) {
+    return;
+  }
+
  const { repeatMode, currentTrack, queue } = usePlayerStore.getState();
  isAudioPaused = false;
  usePlayerStore.setState({ isPlaying: false, progress: 0, currentTime: 0, buffered: 0 });
@@ -188,6 +226,61 @@ function handleAudioEnded() {
  }, 150);
 }

+/**
+ * Handle gapless auto-advance: the Rust engine has already switched to the
+ * next source sample-accurately. We just need to update the UI state without
+ * touching the audio stream (no playTrack() call!).
+ */
+function handleAudioTrackSwitched(duration: number) {
+  lastGaplessSwitchTime = Date.now();
+  isAudioPaused = false;
+
+  const store = usePlayerStore.getState();
+  const { queue, queueIndex, repeatMode } = store;
+  const nextIdx = queueIndex + 1;
+  let nextTrack: Track | null = null;
+  let newIndex = queueIndex;
+
+  if (repeatMode === 'one' && store.currentTrack) {
+    nextTrack = store.currentTrack;
+    // queueIndex stays the same
+  } else if (nextIdx < queue.length) {
+    nextTrack = queue[nextIdx];
+    newIndex = nextIdx;
+  } else if (repeatMode === 'all' && queue.length > 0) {
+    nextTrack = queue[0];
+    newIndex = 0;
+  }
+
+  if (!nextTrack) return;
+
+  usePlayerStore.setState({
+    currentTrack: nextTrack,
+    queueIndex: newIndex,
+    isPlaying: true,
+    progress: 0,
+    currentTime: 0,
+    buffered: 0,
+    scrobbled: false,
+    lastfmLoved: false,
+  });
+
+  // Report Now Playing to Navidrome + Last.fm
+  reportNowPlaying(nextTrack.id);
+  const { scrobblingEnabled, lastfmSessionKey } = useAuthStore.getState();
+  if (lastfmSessionKey) {
+    if (scrobblingEnabled) lastfmUpdateNowPlaying(nextTrack, lastfmSessionKey);
+    lastfmGetTrackLoved(nextTrack.title, nextTrack.artist, lastfmSessionKey).then(loved => {
+      const cacheKey = `${nextTrack!.title}::${nextTrack!.artist}`;
+      usePlayerStore.setState(s => ({
+        lastfmLoved: loved,
+        lastfmLovedCache: { ...s.lastfmLovedCache, [cacheKey]: loved },
+      }));
+    });
+  }
+  syncQueueToServer(queue, nextTrack, 0);
+}
+
 function handleAudioError(message: string) {
  console.error('[psysonic] Audio error from backend:', message);
  isAudioPaused = false;
@@ -213,21 +306,24 @@ export function initAudioListeners(): () => void {
    ),
    listen<void>('audio:ended', () => handleAudioEnded()),
    listen<string>('audio:error', ({ payload }) => handleAudioError(payload)),
+    listen<number>('audio:track_switched', ({ payload }) => handleAudioTrackSwitched(payload)),
  ];

  // Sync Last.fm loved tracks cache on startup.
  usePlayerStore.getState().syncLastfmLovedTracks();

-  // Initial sync of crossfade settings to Rust audio engine on startup.
-  const { crossfadeEnabled, crossfadeSecs } = useAuthStore.getState();
+  // Initial sync of audio settings to Rust engine on startup.
+  const { crossfadeEnabled, crossfadeSecs, gaplessEnabled } = useAuthStore.getState();
  invoke('audio_set_crossfade', { enabled: crossfadeEnabled, secs: crossfadeSecs }).catch(() => {});
+  invoke('audio_set_gapless', { enabled: gaplessEnabled }).catch(() => {});

-  // Keep crossfade settings in sync whenever auth store changes.
+  // Keep audio settings in sync whenever auth store changes.
  const unsubAuth = useAuthStore.subscribe((state) => {
    invoke('audio_set_crossfade', {
      enabled: state.crossfadeEnabled,
      secs: state.crossfadeSecs,
    }).catch(() => {});
+    invoke('audio_set_gapless', { enabled: state.gaplessEnabled }).catch(() => {});
  });

  return () => {
@@ -252,6 +348,8 @@ export const usePlayerStore = create<PlayerState>()(
      scrobbled: false,
      lastfmLoved: false,
      lastfmLovedCache: {},
+      starredOverrides: {},
+      setStarredOverride: (id, starred) => set(s => ({ starredOverrides: { ...s.starredOverrides, [id]: starred } })),
      isQueueVisible: true,
      isFullscreenOpen: false,
      repeatMode: 'off',
@@ -332,6 +430,12 @@ export const usePlayerStore = create<PlayerState>()(

      // ── playTrack ────────────────────────────────────────────────────────────
      playTrack: (track, queue) => {
+        // Ghost-command guard: if a gapless switch happened within 500 ms,
+        // this playTrack call is likely a stale IPC echo — suppress it.
+        if (Date.now() - lastGaplessSwitchTime < 500) {
+          return;
+        }
+
        const gen = ++playGeneration;
        isAudioPaused = false;
        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';

-type Theme = 'mocha' | 'macchiato' | 'frappe' | 'latte' | 'nord' | 'nord-snowstorm' | 'nord-frost' | 'nord-aurora' | 'psychowave';
+type Theme = 'mocha' | 'macchiato' | 'frappe' | 'latte' | 'nord' | 'nord-snowstorm' | 'nord-frost' | 'nord-aurora' | 'psychowave' | 'wnamp' | 'poison' | 'nucleo' | 'navy-jukebox' | 'cobalt-media' | 'onyx-cinema' | 'vintage-tube-radio' | 'neon-drift' | 'aero-glass' | 'luna-teal' | 'w98' | 'cupertino-light' | 'cupertino-dark' | 'gruvbox-dark-hard' | 'gruvbox-dark-medium' | 'gruvbox-dark-soft' | 'gruvbox-light-hard' | 'gruvbox-light-medium' | 'gruvbox-light-soft' | 'spotless' | 'dzr0' | 'cupertino-beats' | 'lambda-17' | 'azerothian-gold' | 'ascalon' | 'grand-theft-audio' | 'v-tactical' | 'nightcity-2077' | 'middle-earth' | 'morpheus' | 'pandora' | 'stark-hud' | 'blade' | 'imperial-sith' | 'order-of-the-phoenix' | 'heisenberg' | 'ice-and-fire' | 'doh-matic';

 interface ThemeState {
  theme: Theme;
@@ -106,7 +106,7 @@
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
-  color: var(--ctp-lavender);
+  color: var(--accent);
  margin-bottom: var(--space-2);
 }

@@ -148,7 +148,8 @@
 }

 .hero-play-btn:hover {
-  background: var(--ctp-lavender);
+  background: var(--accent);
+  filter: brightness(1.1);
  transform: scale(1.02);
  box-shadow: var(--shadow-glow);
 }
@@ -434,6 +435,7 @@
  background: var(--accent);
 }

+
 .album-card-info {
  padding: var(--space-3) var(--space-4) var(--space-4);
 }
@@ -630,13 +632,75 @@
  padding: var(--space-4) 0 var(--space-6);
 }

-.album-detail-cover {
+.album-detail-cover-btn {
+  padding: 0;
+  border-radius: var(--radius-lg);
+  flex-shrink: 0;
+  cursor: zoom-in;
+  position: relative;
+  overflow: hidden;
+  display: block;
  width: clamp(120px, 15vw, 200px);
  height: clamp(120px, 15vw, 200px);
+}
+
+.album-detail-cover-btn:hover .album-detail-cover {
+  transform: scale(1.04);
+}
+
+.album-detail-cover {
+  width: 100%;
+  height: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
-  flex-shrink: 0;
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+/* ─── Cover Lightbox ─── */
+.cover-lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  background: rgba(0, 0, 0, 0.88);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  box-sizing: border-box;
+  cursor: zoom-out;
+  backdrop-filter: blur(6px);
+}
+
+.cover-lightbox-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8);
+  cursor: default;
+}
+
+.cover-lightbox-close {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  z-index: 1;
+}
+
+.cover-lightbox-close:hover {
+  background: rgba(255, 255, 255, 0.24);
 }

 .album-cover-placeholder {
@@ -871,6 +935,7 @@
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
+  user-select: none;
 }

 .track-row.track-row-va {
@@ -1150,6 +1215,7 @@
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
+  user-select: text;
 }

 .artist-bio a {
@@ -1179,6 +1245,21 @@
  border: 1px solid var(--border-subtle);
 }

+.artist-detail-avatar-btn {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: zoom-in;
+  transition: transform 0.2s ease, filter 0.2s ease;
+}
+.artist-detail-avatar-btn:hover {
+  transform: scale(1.04);
+  filter: brightness(1.08);
+}
+
 .artist-detail-meta {
  flex: 1;
  min-width: 0;
@@ -1222,6 +1303,7 @@
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 100%;
+  user-select: text;
 }

 .artist-bio-text a {
@@ -1408,6 +1490,170 @@
  overflow: hidden;
 }

+/* ── Theme Accordion ─────────────────────────────────────────────────────── */
+
+.theme-accordion {
+  display: flex;
+  flex-direction: column;
+}
+
+.theme-accordion-item {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.theme-accordion-item:last-child {
+  border-bottom: none;
+}
+
+.theme-accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  width: 100%;
+  padding: 10px var(--space-4);
+  text-align: left;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-muted);
+  background: var(--bg-card);
+  border-left: 3px solid transparent;
+  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.theme-accordion-header:hover {
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+}
+
+.theme-accordion-open .theme-accordion-header {
+  color: var(--accent);
+  background: var(--bg-hover);
+  border-left: 3px solid var(--accent);
+  padding-left: calc(var(--space-5) + 3px);
+}
+
+.theme-accordion-chevron {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  transition: transform 0.2s ease;
+}
+
+.theme-accordion-open .theme-accordion-chevron {
+  transform: rotate(180deg);
+  color: var(--accent);
+}
+
+.theme-accordion-content {
+  padding: 14px var(--space-4) var(--space-4) calc(var(--space-4) + 3px);
+  background: var(--bg-app);
+  border-top: 1px solid var(--border-subtle);
+  border-left: 3px solid var(--accent);
+}
+
+.theme-accordion-active-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  margin-left: 8px;
+  vertical-align: middle;
+  opacity: 0.8;
+}
+
+/* ── Queue Tab Bar ────────────────────────────────────────────────────────── */
+
+.queue-tab-bar {
+  display: flex;
+  border-top: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.queue-tab-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  transition: color 0.15s, background 0.15s;
+}
+
+.queue-tab-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
+.queue-tab-btn.active { color: var(--accent); }
+
+/* ── Lyrics Pane (sidebar) ────────────────────────────────────────────────── */
+
+.lyrics-pane {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 16px 8px;
+  scroll-behavior: smooth;
+}
+
+.lyrics-pane-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lyrics-status {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 40px 0;
+}
+
+.lyrics-synced {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 0 16px;
+}
+
+.lyrics-line {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-muted);
+  text-align: center;
+  padding: 5px 8px;
+  border-radius: 6px;
+  line-height: 1.6;
+  transition: color 0.25s, font-size 0.2s, font-weight 0.2s;
+  cursor: default;
+}
+
+.lyrics-line.active {
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.lyrics-plain {
+  padding: 4px 0 16px;
+}
+
+.lyrics-plain-line {
+  font-size: 13px;
+  line-height: 1.85;
+  color: var(--text-secondary);
+  text-align: center;
+  margin: 0;
+}
+
+
+/* ── Help ─────────────────────────────────────────────────────────────────── */
+
 .help-item {
  border-bottom: 1px solid var(--border-subtle);
 }
@@ -1422,7 +1668,7 @@
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
-  padding: var(--space-4) var(--space-5);
+  padding: 10px var(--space-4);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
@@ -1455,7 +1701,7 @@
 }

 .help-answer {
-  padding: var(--space-4) var(--space-5) var(--space-5) calc(var(--space-5) + 3px);
+  padding: 10px var(--space-4) var(--space-4) calc(var(--space-4) + 3px);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
@@ -1717,6 +1963,11 @@
 }

 /* ── Cover breathing ── */
+@keyframes ambilight-pulse {
+  0%, 100% { opacity: 0.7; }
+  50%       { opacity: 1.0; }
+}
+
@keyframes cover-breathe {

  0%,
@@ -1730,11 +1981,11 @@
 }

@keyframes ken-burns {
-  0%   { transform: scale(1.1) translate(-8%, -8%); }
-  25%  { transform: scale(1.15) translate(8%, -8%); }
-  50%  { transform: scale(1.1) translate(8%, 8%); }
-  75%  { transform: scale(1.15) translate(-8%, 8%); }
-  100% { transform: scale(1.1) translate(-8%, -8%); }
+  0%   { transform: scale(1.05) translate(-4%,  -1%); }
+  25%  { transform: scale(1.08) translate( 4%,  -1.5%); }
+  50%  { transform: scale(1.06) translate( 3%,   1%); }
+  75%  { transform: scale(1.09) translate(-3%,   1.5%); }
+  100% { transform: scale(1.05) translate(-4%,  -1%); }
 }

 /* ── Blurred background ── */
@@ -1742,9 +1993,9 @@
  position: absolute;
  inset: -30%;
  background-size: cover;
-  background-position: center center;
+  background-position: center 20%;
  filter: blur(6px) brightness(0.25) saturate(1.6);
-  animation: ken-burns 90s ease-in-out infinite;
+  animation: ken-burns 120s linear infinite;
  z-index: 0;
  will-change: transform;
  pointer-events: none;
@@ -1802,7 +2053,7 @@
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
-  color: var(--ctp-lavender);
+  color: var(--accent);
  margin: 0;
  opacity: 0.9;
 }
@@ -1971,7 +2222,7 @@
 }

 .fs-btn.active {
-  color: var(--ctp-lavender);
+  color: var(--accent);
 }

 .fs-btn-sm {
@@ -1982,15 +2233,16 @@
 .fs-btn-play {
  width: 54px;
  height: 54px;
-  background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-lavender));
+  background: var(--accent);
  color: var(--ctp-crust);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
 }

 .fs-btn-play:hover {
-  background: linear-gradient(135deg, var(--ctp-lavender), var(--ctp-mauve));
+  background: var(--accent);
  color: var(--ctp-crust);
  transform: scale(1.07);
+  filter: brightness(1.12);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
 }

@@ -2249,6 +2501,7 @@
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  transition: background 0.15s;
+  user-select: none;
 }

 .playlist-row:hover {
@@ -2541,14 +2794,379 @@
 }

 /* ─ Now Playing Page ─ */
+/* ─── Now Playing Page ─────────────────────────────────────── */
 .np-page {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
  display: flex;
  flex-direction: column;
-  min-height: 100%;
-  overflow-y: auto;
 }

-/* Hero */
+/* Main scrollable content */
+.np-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 28px 28px 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Hero card: 3-column (cover+info | EQ | tag cloud) ── */
+.np-hero-card {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 28px;
+  padding: 32px;
+  background: rgba(0, 0, 0, 0.30);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: var(--radius-lg);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+}
+
+/* Left column: meta info, big text */
+.np-hero-left {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.np-hero-cover-wrap {
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.np-hero-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  justify-content: center;
+}
+
+/* Right column: tag cloud */
+.np-tag-cloud {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 0;
+}
+
+.np-tag-cloud-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  justify-content: flex-end;
+  align-items: center;
+  overflow: visible;
+}
+
+.np-tag-cloud-header {
+  width: 100%;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 10px;
+  text-align: right;
+}
+
+.np-tag {
+  font-size: 13px;
+  font-weight: 600;
+  padding: 6px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.10);
+  color: rgba(255, 255, 255, 0.75);
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+}
+
+.np-tag-accent {
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  color: var(--accent);
+}
+
+.np-tag-clickable {
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.np-tag-clickable:hover {
+  background: color-mix(in srgb, var(--accent) 30%, transparent);
+  color: white;
+}
+
+/* ── Info cards (artist / album) ── */
+.np-info-card {
+  background: rgba(0, 0, 0, 0.22);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: var(--radius-lg);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.np-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.np-card-title {
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: rgba(255, 255, 255, 0.70);
+  margin: 0;
+}
+
+.np-card-link {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  flex-shrink: 0;
+  transition: opacity 0.15s;
+}
+.np-card-link:hover { opacity: 0.75; }
+
+/* ── Artist bio ── */
+.np-artist-bio-row {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.np-artist-thumb {
+  width: 80px;
+  height: 80px;
+  border-radius: var(--radius-md);
+  object-fit: cover;
+  flex-shrink: 0;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.np-bio-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.np-bio-text {
+  font-size: 13px;
+  line-height: 1.65;
+  color: rgba(255, 255, 255, 0.72);
+  user-select: text;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.np-bio-text.expanded {
+  display: block;
+  overflow: visible;
+  -webkit-line-clamp: unset;
+}
+
+.np-bio-text a { color: var(--accent); }
+
+.np-bio-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--accent);
+  padding: 0;
+  align-self: flex-start;
+  opacity: 0.8;
+}
+.np-bio-toggle:hover { opacity: 1; }
+
+/* ── Album tracklist ── */
+.np-album-tracklist {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.np-album-track {
+  display: grid;
+  grid-template-columns: 28px 1fr 44px;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.np-album-track:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+.np-album-track.active {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.np-album-track-num {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.55);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.np-album-track.active .np-album-track-num {
+  color: var(--accent);
+}
+
+.np-album-track-title {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.80);
+}
+.np-album-track.active .np-album-track-title {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.np-album-track-dur {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.65);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+/* ── Queue Sidebar ── */
+.np-queue-sidebar {
+  width: 260px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-left: 1px solid rgba(255, 255, 255, 0.07);
+  background: rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  position: relative;
+  z-index: 1;
+}
+
+.np-qs-header {
+  padding: 16px 14px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.np-qs-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: white;
+}
+
+.np-qs-meta {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.40);
+  margin-top: 2px;
+}
+
+.np-qs-actions {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.np-qs-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+
+.np-qs-item {
+  display: grid;
+  grid-template-columns: 26px 1fr 36px 22px;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px 6px 12px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.np-qs-item:hover,
+.np-qs-item.context-active {
+  background: rgba(255, 255, 255, 0.06);
+}
+.np-qs-item.active {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.np-qs-num {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.30);
+  text-align: right;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-variant-numeric: tabular-nums;
+}
+
+.np-qs-info {
+  min-width: 0;
+}
+
+.np-qs-track-title {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.80);
+  line-height: 1.3;
+}
+.np-qs-track-title.active {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.np-qs-track-artist {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.35);
+  margin-top: 1px;
+}
+
+.np-qs-dur {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.30);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+/* ── Shared np- classes (kept) ── */
+/* Hero (old, kept for NpBg) */
 .np-hero {
  position: relative;
  min-height: 280px;
@@ -2559,7 +3177,7 @@

 .np-bg-wrap {
  position: absolute;
-  inset: 0 0 -80px 0;
+  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: paint;
@@ -2570,15 +3188,24 @@
  inset: -15%;
  background-size: cover;
  background-position: center;
-  filter: blur(50px) brightness(0.25) saturate(1.8);
+  filter: blur(70px) brightness(0.55) saturate(1.6);
  transition: opacity 0.6s ease;
-  will-change: opacity;
+  animation: np-ken-burns 40s ease-in-out infinite alternate;
+  will-change: transform;
+}
+
+@keyframes np-ken-burns {
+  0%   { transform: scale(1.00) translate(0%,    0%);   }
+  25%  { transform: scale(1.04) translate(-2%,  -1.5%); }
+  50%  { transform: scale(1.06) translate(1.5%,  2%);   }
+  75%  { transform: scale(1.03) translate(-1%,   1.5%); }
+  100% { transform: scale(1.05) translate(2%,   -1%);   }
 }

 .np-bg-overlay {
  position: absolute;
  inset: 0;
-  background: linear-gradient(to bottom, transparent 40%, var(--bg-app) 100%);
+  background: rgba(0, 0, 0, 0.38);
 }

 .np-hero-content {
@@ -2603,35 +3230,13 @@
  justify-content: center;
 }

-.np-cover-glow {
-  position: absolute;
-  width: 170px;
-  height: 170px;
-  border-radius: 50%;
-  object-fit: cover;
-  filter: blur(36px) saturate(1.5) brightness(0.85);
-  opacity: 0.7;
-  transform: translateY(12px) scale(1.05);
-  pointer-events: none;
-  z-index: 0;
-  will-change: transform, opacity;
-  animation: np-glow-pulse 4s ease-in-out infinite;
-}
-
-@keyframes np-glow-pulse {
-  0%, 100% { opacity: 0.6;  transform: translateY(14px) scale(1.04); }
-  50%       { opacity: 0.85; transform: translateY(9px)  scale(1.10); }
-}
-
 .np-cover {
  position: relative;
  z-index: 1;
-  width: 160px;
-  height: 160px;
-  border-radius: 14px;
+  width: 280px;
+  height: 280px;
+  border-radius: 16px;
  object-fit: cover;
-  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
-  animation: cover-breathe 6s ease-in-out infinite;
 }

 .np-cover-fallback {
@@ -2642,7 +3247,7 @@
  color: var(--text-muted);
 }

-/* Info column */
+/* Info column (legacy, kept for compat) */
 .np-info {
  display: flex;
  flex-direction: column;
@@ -2654,18 +3259,18 @@

 .np-title {
  font-family: var(--font-display);
-  font-size: 26px;
+  font-size: 36px;
  font-weight: 700;
-  line-height: 1.2;
+  line-height: 1.15;
  color: white;
 }

 .np-artist-album {
-  font-size: 15px;
+  font-size: 19px;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
  gap: 6px;
  align-items: center;
 }
@@ -2682,7 +3287,7 @@
 .np-tech-row {
  display: flex;
  flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
@@ -2892,6 +3497,7 @@
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
+  user-select: none;
 }

 .np-queue-item:hover,
@@ -3011,7 +3617,7 @@
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-input);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-dropdown, var(--border));
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.875rem;
@@ -3043,9 +3649,9 @@
 }
 .custom-select-dropdown {
  background: var(--bg-card);
-  border: 1px solid var(--border-subtle);
+  border: 1px solid var(--border-dropdown, var(--border));
  border-radius: var(--radius-md);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 8px 32px var(--shadow-dropdown, rgba(0, 0, 0, 0.4));
  overflow-y: auto;
  overscroll-behavior: contain;
 }
@@ -38,7 +38,7 @@
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
-  overflow: hidden;
+  position: relative;
 }

 .sidebar-brand {
@@ -62,7 +62,7 @@
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
-  background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-blue));
+  background: linear-gradient(135deg, var(--accent), var(--ctp-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
@@ -70,7 +70,7 @@

 .sidebar-nav {
  flex: 1;
-  padding: var(--space-4) var(--space-3);
+  padding: var(--space-1) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
@@ -176,7 +176,7 @@
 /* Collapsed Sidebar Styles */
 .sidebar.collapsed .sidebar-brand {
  justify-content: center;
-  padding: 0;
+  padding: 0 var(--space-3);
 }

 .sidebar.collapsed .nav-link {
@@ -185,21 +185,34 @@
 }

 .collapse-btn {
-  background: transparent;
-  border: none;
+  position: absolute;
+  top: 50%;
+  right: -13px;
+  transform: translateY(-50%);
+  z-index: 101;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
-  padding: var(--space-2);
-  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
-  transition: all var(--transition-fast);
+  opacity: 0;
+  transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+  box-shadow: var(--shadow-sm);
+}
+
+.sidebar:hover .collapse-btn {
+  opacity: 1;
 }

 .collapse-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
+  box-shadow: var(--shadow-md);
 }

 /* ─── Update Toast ─── */
@@ -311,7 +324,7 @@
  grid-area: player;
  display: flex;
  align-items: center;
-  gap: var(--space-4);
+  gap: var(--space-6);
  padding: 0 var(--space-5);
  background: var(--bg-player);
  border-top: 1px solid var(--border-subtle);
@@ -324,9 +337,9 @@
  display: flex;
  align-items: center;
  gap: var(--space-3);
-  flex-shrink: 0;
-  width: 220px;
+  flex: 0 0 320px;
  min-width: 0;
+  overflow: hidden;
 }

 .player-album-art {
@@ -385,27 +398,42 @@
 .player-album-art-wrap.clickable:hover .player-art-expand-hint { opacity: 1; }

 .player-track-meta {
+  flex: 1 1 0;
  min-width: 0;
+  overflow: hidden;
 }

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

 .player-track-artist {
  font-size: 12px;
  color: var(--text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
  margin-top: 2px;
 }

+/* ── Marquee (PlayerBar track name / artist) ── */
+.marquee-wrap {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.marquee-scroll {
+  display: inline-block;
+  animation: player-marquee 12s linear infinite;
+  animation-delay: 2s;
+}
+
+@keyframes player-marquee {
+  0%,   12% { transform: translateX(0); }
+  78%,  88% { transform: translateX(var(--marquee-amount)); }
+  88.1%, 100% { transform: translateX(0); }
+}
+
 .player-buttons {
  display: flex;
  align-items: center;
@@ -439,7 +467,7 @@
 .player-btn-primary {
  width: 46px;
  height: 46px;
-  background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-lavender));
+  background: var(--accent);
  color: var(--ctp-crust);
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
@@ -447,10 +475,11 @@
 }

 .player-btn-primary:hover {
-  background: linear-gradient(135deg, var(--ctp-lavender), var(--ctp-mauve));
+  background: var(--accent);
  color: var(--ctp-crust);
  transform: scale(1.06);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), var(--shadow-glow);
+  filter: brightness(1.12);
 }

 /* Waveform seekbar section */
@@ -460,6 +489,8 @@
  display: flex;
  align-items: center;
  gap: var(--space-2);
+  margin-left: 32px;
+  margin-right: 32px;
 }

 .player-waveform-wrap {
@@ -484,9 +515,30 @@
  width: 155px;
 }

-.player-volume-slider {
+.player-volume-slider-wrap {
  flex: 1;
  min-width: 0;
+  position: relative;
+}
+
+.player-volume-slider {
+  width: 100%;
+}
+
+.player-volume-pct {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  transform: translateX(-50%);
+  font-size: 10px;
+  font-weight: 600;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid var(--border-subtle);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  pointer-events: none;
+  white-space: nowrap;
+  box-shadow: var(--shadow-sm);
 }

 .player-eq-btn {
@@ -574,13 +626,128 @@
  box-sizing: border-box;
  padding: 0 var(--space-4);
  background: var(--bg-app);
-  border-bottom: 1px solid var(--bg-surface);
+  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
 }

+.queue-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
+  flex-shrink: 0;
+}
+.queue-action-btn:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.queue-action-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.queue-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 var(--space-3);
+  height: 44px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-app);
+}
+
+.crossfade-popover {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  width: 170px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 10px 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.crossfade-popover-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  letter-spacing: 0.03em;
+}
+
+.crossfade-popover-value {
+  margin-left: auto;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: monospace;
+  color: var(--text-primary);
+}
+
+.crossfade-popover-slider {
+  width: 100%;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+.crossfade-popover-range {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.queue-toolbar-sep {
+  width: 1px;
+  height: 18px;
+  background: var(--border-subtle);
+  margin: 0 2px;
+  flex-shrink: 0;
+}
+
+.queue-round-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  color: var(--text-primary);
+  background: var(--bg-hover);
+  border: none;
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
+  flex-shrink: 0;
+}
+.queue-round-btn:hover:not(:disabled) {
+  background: var(--border);
+  color: var(--text-primary);
+}
+.queue-round-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.queue-round-btn.active {
+  color: var(--ctp-base);
+  background: var(--accent);
+}
+
 .queue-current-track {
  padding: var(--space-3) var(--space-4);
  display: flex;
@@ -602,6 +769,7 @@
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  position: relative;
 }

 .queue-current-cover img {
@@ -635,15 +803,21 @@
 }

 .queue-current-tech {
-  font-size: 10px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 9px;
  font-family: monospace;
  letter-spacing: 0.05em;
-  background: var(--bg-surface);
-  color: var(--text-muted);
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: 1px solid var(--border-subtle);
-  display: inline-block;
+  background: rgba(0, 0, 0, 0.62);
+  backdrop-filter: blur(4px);
+  color: rgba(255, 255, 255, 0.85);
+  padding: 3px 6px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .queue-divider {
@@ -1,20 +0,0 @@
-declare module 'butterchurn' {
-  interface Visualizer {
-    connectAudio(audioNode: AudioNode): void;
-    loadPreset(preset: unknown, blendTime: number): void;
-    render(): void;
-    setRendererSize(width: number, height: number): void;
-  }
-  interface CreateOptions {
-    width: number;
-    height: number;
-    pixelRatio?: number;
-  }
-  function createVisualizer(ctx: AudioContext, canvas: HTMLCanvasElement, opts: CreateOptions): Visualizer;
-  export default { createVisualizer };
-}
-
-declare module 'butterchurn-presets' {
-  function getPresets(): Record<string, unknown>;
-  export default { getPresets };
-}
@@ -0,0 +1,39 @@
+import { getAlbum } from '../api/subsonic';
+import { usePlayerStore } from '../store/playerStore';
+import { songToTrack } from '../store/playerStore';
+
+function fadeOut(setVolume: (v: number) => void, from: number, durationMs: number): Promise<void> {
+  return new Promise(resolve => {
+    const steps = 16;
+    const stepMs = durationMs / steps;
+    let step = 0;
+    const id = setInterval(() => {
+      step++;
+      setVolume(Math.max(0, from * (1 - step / steps)));
+      if (step >= steps) {
+        clearInterval(id);
+        resolve();
+      }
+    }, stepMs);
+  });
+}
+
+export async function playAlbum(albumId: string): Promise<void> {
+  const albumData = await getAlbum(albumId);
+  const tracks = albumData.songs.map(songToTrack);
+  if (!tracks.length) return;
+
+  const store = usePlayerStore.getState();
+  const { isPlaying, volume } = store;
+
+  if (isPlaying) {
+    await fadeOut(store.setVolume, volume, 700);
+    // Restore volume only in the Zustand store — do NOT call audio_set_volume here,
+    // otherwise the old track glitches back to full volume before playTrack stops it.
+    // playTrack reads state.volume and passes it to audio_play, so the new track
+    // starts at the correct volume without the Rust engine ever hearing a restore.
+    usePlayerStore.setState({ volume });
+  }
+
+  usePlayerStore.getState().playTrack(tracks[0], tracks);
+}
Author	SHA1	Message	Date
Psychotoxical	5516d95b52	feat: v1.13.0 — SVG Logo, Marquee, Player UX, Global Shortcuts fix ### Added - SVG logo with theme-adaptive gradient in sidebar (full wordmark + P-icon for collapsed state) - Player bar: song title/artist marquee scroll on overflow - Player bar: live volume percentage tooltip on slider hover ### Changed - Sidebar collapse button moved to right-edge hover tab - Player bar: fixed 320px track info width, increased waveform margins - Settings: Server tab opens by default - Crossfade: experimental badge removed (stable) - Help page: Lyrics/Keybindings/Font entries added, theme count corrected ### Fixed - Global shortcuts double-fire (Rust-side ShortcutMap idempotency fix) - W98 theme: comprehensive contrast fixes for navy hover backgrounds - Help page: removed orphaned translation key under Playback Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-22 20:24:14 +01:00
Psychotoxical	d927ef2082	feat: v1.12.0 — Lyrics, 15 new themes, Last.fm stable, Crossfade stable Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-22 13:10:06 +01:00
Psychotoxical	867c5fbd3e	feat: v1.11.0 — Movies themes, Settings polish, Gapless stable Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-22 02:37:49 +01:00
Psychotoxical	e550340565	feat: v1.10.0 — new streaming themes, favourite toggle fix, home page improvements Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-21 22:58:05 +01:00
Psychotoxical	57b70e6154	feat: v1.9.0 — new themes, keybindings, font picker, home play behavior Themes: - Add Neon Drift (midnight blue / electric cyan synthwave) - Add Cupertino Light + Cupertino Dark (macOS Ventura-inspired, frosted glass) - Add Betriebssysteme group (Cupertino, Aero Glass, Luna Teal) - Rename all trademarked theme IDs to original names (WnAmp, Navy Jukebox, Cobalt Media, Onyx Cinema, Aero Glass, Luna Teal) - Reorder ThemePicker: Psysonic Themes first, then Mediaplayer, Betriebssysteme Keybindings: - New keybindingsStore with 10 bindable actions (play/pause, next, prev, volume, seek ±10s, queue, fullscreen, native fullscreen) - Settings UI for rebinding; defaults: Space=play-pause, F11=native-fullscreen Font picker: - New fontStore; 10 UI fonts selectable in Settings → Appearance - Applied via data-font attribute on <html> Home page: - AlbumCard: Details button → Play button via playAlbum() utility - Hero: Play Album starts playback with 700ms fade-out instead of navigating - playAlbum.ts: fade, store-only volume restore, playTrack handoff Now Playing: - 3-column hero layout; EQ bars truly centred (flex:1 on both outer columns) - Background brightness 0.25→0.55, overlay 0.55→0.38 (art now visible) - Better text contrast for track times, card links, section titles Linux audio: - Set PIPEWIRE_LATENCY + PULSE_LATENCY_MSEC before stream creation to reduce ALSA snd_pcm_recover underrun frequency on PipeWire Remove butterchurn visualizer (VisualizerCanvas, butterchurn.d.ts) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-21 14:22:02 +01:00
Psychotoxical	0b1ed8cc5a	feat: v1.8.0 — new themes, queue toolbar, lightbox, i18n (fr/nl) Themes: - Add Poison (phosphor green on charcoal), Nucleo (warm brass light), Classic Winamp (LCD glow, Winamp yellow/orange) themes - Overhaul Psychowave — refined deep violet, no longer WIP - Reorganise ThemePicker into groups: Catppuccin, Nord, Retro, Tokyo Night, Psysonic Themes - Add --volume-accent CSS var for per-theme volume slider colour override Queue: - Full toolbar redesign with centred round buttons (Shuffle/Save/Load/Clear/Gapless/Crossfade) - Crossfade popover with 1–10 s range slider, right-aligned to avoid viewport overflow - Queue header: title + count + duration inline in accent colour, close button removed - Tech info (codec/bitrate) as frosted-glass overlay badge on cover art UI: - CoverLightbox shared component for album cover (AlbumHeader) and artist avatar (ArtistDetail) - NowPlayingDropdown: separate spinning/loading state — button always clickable, icon spins 600 ms min - Settings: "Experimental" badge on Crossfade and Gapless toggles - Help page: 2-column grid layout, new Crossfade & Gapless Q&A entry, updated theme/language entries i18n: - Full French (fr) and Dutch (nl) translations across all namespaces - Language selector sorted alphabetically (nl, en, fr, de) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-21 01:05:16 +01:00
Psychotoxical	c9c68a0e57	docs: add Roadmap section, update features list	2026-03-20 19:32:57 +01:00
Psychotoxical	9d4997baac	fix: Last.fm auth stability improvements (v1.7.2) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-20 19:14:04 +01:00
Psychotoxical	a99e2e0657	docs: update CLAUDE.md to v1.7.1	2026-03-20 19:07:06 +01:00
Psychotoxical	7f85b587b4	fix: TypeScript build errors breaking release build (v1.7.1) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-20 18:56:15 +01:00