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>
feat: v1.8.0 — new themes, queue toolbar, lightbox, i18n (fr/nl)
2026-07-23 15:55:45 +00:00 · 2026-03-21 14:22:02 +01:00 · 2026-03-21 01:05:16 +01:00 · 2026-03-20 19:32:57 +01:00 · 2026-03-20 19:14:04 +01:00 · 2026-03-20 19:07:06 +01:00
51 changed files with 7381 additions and 1367 deletions
@@ -100,6 +100,8 @@ jobs:
      - uses: tauri-apps/tauri-action@v0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VITE_LASTFM_API_KEY: ${{ secrets.VITE_LASTFM_API_KEY }}
+          VITE_LASTFM_API_SECRET: ${{ secrets.VITE_LASTFM_API_SECRET }}
        with:
          releaseId: ${{ needs.create-release.outputs.release_id }}
          args: ${{ matrix.settings.args }}
@@ -131,6 +133,9 @@ jobs:
        run: npm install

      - name: build
+        env:
+          VITE_LASTFM_API_KEY: ${{ secrets.VITE_LASTFM_API_KEY }}
+          VITE_LASTFM_API_SECRET: ${{ secrets.VITE_LASTFM_API_SECRET }}
        run: npm run tauri:build -- --bundles deb,rpm

      - name: upload Linux artifacts
@@ -7,6 +7,11 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*

+# Environment variables (API keys)
+.env
+.env.local
+.env.*.local
+
 # Node
 node_modules
 dist
@@ -29,3 +34,9 @@ src-tauri/target/

 # Documentation
 CLAUDE.md
+
+# Claude Code memory (local only)
+memory/
+
+# Local scratchpad / notes (not committed)
+tmp/
@@ -5,8 +5,184 @@ 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.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
+
+#### Last.fm Integration *(Beta)*
+- **Direct Last.fm scrobbling**: Tracks are scrobbled directly via the Last.fm API at 50% playback — no longer routed through Navidrome. Configure in Settings → Server with your Last.fm username and password.
+- **Now Playing updates**: Last.fm receives the currently playing track in real time.
+- **Love / Unlove**: Heart button in the Now Playing page and player bar syncs the loved state with Last.fm instantly.
+- **Last.fm profile badge** in Settings → Server: shows your scrobble count and member since year once connected.
+- ⚠️ **This feature is in beta.** Session management and edge cases are still being refined.
+
+#### Similar Artists
+- Artist detail pages now show a **Similar Artists** section below Top Tracks, sourced from Last.fm and filtered to artists actually present in your library. Shown as chip buttons — click to navigate directly to that artist's page.
+- Requires Last.fm to be configured. Hidden when Last.fm is not connected or no library matches are found.
+
+#### Statistics — Last.fm Stats
+- New **Last.fm Stats** section on the Statistics page (requires Last.fm): top artists, albums, and tracks with proportional play-count bars.
+- **Period filter**: switch between Last 7 Days, 1 Month, 3 Months, 6 Months, 12 Months, and Overall.
+- **Recent Scrobbles**: last 20 scrobbled tracks with relative timestamps and a "Now Playing" badge for the currently active entry.
+- **Genre Distribution removed**: replaced by the Last.fm stats sections.
+
+#### Psychowave Theme *(Work in Progress)*
+- New **Psychowave** theme: a deep purple/violet dark theme inspired by synthwave and retrowave aesthetics.
+- ⚠️ **Still in active development** — colors and details will continue to be refined in upcoming releases.
+
+#### Tooltip System — TooltipPortal
+- All tooltips now use a **React portal** rendered into `document.body` at `z-index: 99999`. Replaces the previous CSS `::after` pseudo-element system.
+- Fixes tooltip clipping inside `overflow: hidden` containers (player bar, queue panel, EQ).
+- Fixes black OS-native tooltip boxes that appeared on native `title=` attributes — all converted to `data-tooltip`.
+- Smart edge detection: tooltip flips position automatically when it would overflow the viewport.
+
+#### Custom Select Dropdowns
+- **Theme**, **Language**, and **EQ preset** selectors are now rendered as styled portal dropdowns — no more unstyled native `<select>` boxes.
+- Supports option groups (EQ: Built-in Presets / Custom Presets), keyboard navigation, and click-outside-to-close.
+
+### Changed
+
+#### Fullscreen Player / Now Playing — Background
+- **Ken Burns animation improved**: background image now has significantly more movement (±8% translate, `inset: -30%`) with a 90-second cycle — more cinematic without being distracting.
+- **Color orbs removed** from both the Fullscreen Player and the Now Playing page. They caused noticeable GPU load especially on integrated graphics.
+
+### Fixed
+
+- **Live dropdown (Now Playing)**: Own playback was no longer reported to Navidrome after the Last.fm implementation removed the `reportNowPlaying` call. Both are now called independently on track start.
+- **Sidebar: Now Playing button position when collapsed**: The button was appearing in the middle of the nav instead of just above the System section. Caused by a leftover `margin-top: auto` on the Statistics link that split the remaining flex space.
+
+---
+
 ## [1.6.0] - 2026-03-19

+> ⚠️ **Wichtiger Hinweis / Important Notice**
+>
+> **DE:** Der Bundle-Identifier der App wurde von `dev.psysonic.app` auf `dev.psysonic.player` geändert. **Alle gespeicherten Einstellungen (Server-Profile, Theme, EQ, Sprache usw.) gehen beim Update auf diese Version einmalig verloren** und müssen neu eingetragen werden. Zukünftige Updates sind davon nicht betroffen.
+>
+> **EN:** The app's bundle identifier has changed from `dev.psysonic.app` to `dev.psysonic.player`. **All saved settings (server profiles, theme, EQ, language, etc.) will be reset once when updating to this version** and need to be re-entered. Future updates are not affected.
+
 ### Added

 #### Replay Gain
@@ -33,26 +33,35 @@ 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 (30 themes), applied as `data-theme` on `<html>` |
+| `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 +96,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 +110,42 @@ 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.
+30 themes are available, selectable in Settings via `ThemePicker` (grouped). `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` |
+| `cupertino-light` | Betriebssysteme | macOS light, frosted glass | Apple Blue `#0071e3` |
+| `cupertino-dark` | Betriebssysteme | macOS Space Grey, frosted glass | Vibrant Blue `#007aff` |
+| `aero-glass` | Betriebssysteme | Win7 Aero glass blue | Blue `#1878e8` |
+| `luna-teal` | Betriebssysteme | WinXP Luna, green gel buttons | Green `#3c9d29` |
+| `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` |
+| `gruvbox-dark-hard` | Retro | Gruvbox dark hard | Orange `#fe8019` |
+| `gruvbox-dark-medium` | Retro | Gruvbox dark medium | Orange `#fe8019` |
+| `gruvbox-dark-soft` | Retro | Gruvbox dark soft | Orange `#fe8019` |
+| `gruvbox-light-hard` | Retro | Gruvbox light hard | Orange `#af3a03` |
+| `gruvbox-light-medium` | Retro | Gruvbox light medium | Orange `#af3a03` |
+| `gruvbox-light-soft` | Retro | Gruvbox light soft | Orange `#af3a03` |
+| `tokyo-night` | Tokyo Night | dark blue | Blue `#7aa2f7` |
+| `tokyo-night-storm` | Tokyo Night | stormy blue-gray | Blue `#7aa2f7` |
+| `tokyo-night-light` | Tokyo Night | light | Blue `#7aa2f7` |

 **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 +159,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 +174,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 +200,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).
+- **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" 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.
+- **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 +217,9 @@ 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.5.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`).
+- **Version**: 1.9.0
@@ -22,21 +22,55 @@ 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**: 30 deeply integrated themes across 7 groups — Catppuccin, Nord, Retro (Gruvbox), Tokyo Night, Betriebssysteme (Cupertino, Aero Glass, Luna Teal), and Psysonic originals (WnAmp, Poison, Nucleo, Neon Drift…) — 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** *(Beta)*: Direct scrobbling, Now Playing updates, love/unlove, Similar Artists, and top stats — no Navidrome configuration required.
 - 💾 **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 *(experimental)*
+- [x] Waveform seekbar
+- [x] Last.fm scrobbling, Now Playing & love/unlove *(beta)*
+- [x] Similar Artists via Last.fm, filtered to library
+- [x] Statistics — Last.fm top charts & recent scrobbles
+- [x] Multi-server support
+- [x] IndexedDB image caching
+- [x] Random Mix with keyword filter & Super Genre mix
+- [x] 30 themes across 7 groups: Catppuccin, Nord, Retro (Gruvbox), Tokyo Night, Betriebssysteme, Psysonic originals, Psysonic Mediaplayer
+- [x] Internationalization (English, German, French, Dutch)
+- [x] AUR package (Arch / CachyOS)
+- [x] Configurable keybindings
+- [x] Font picker (10 UI fonts)
+
+### 🚧 In Progress
+- [ ] **Last.fm integration** — stabilising, moving out of beta
+- [ ] **Gapless playback** — edge case stabilisation
+- [ ] **Crossfade** — stability improvements
+
+### 📋 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.6.0",
+  "version": "1.9.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>
 pkgname=psysonic
-pkgver=1.6.0
+pkgver=1.9.0
 pkgrel=1
 pkgdesc="Desktop music player for Subsonic API-compatible servers (Navidrome, Gonic, etc.)"
 arch=('x86_64')
@@ -2273,6 +2273,12 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2532096657941c2fea9c289d370a250971c689d4f143798ff67113ec042024a5"

+[[package]]
+name = "md5"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "490cc448043f947bae3cbee9c203358d62dbee0db12107a74be5c30ccfd09771"
+
 [[package]]
 name = "memchr"
 version = "2.8.0"
@@ -3133,9 +3139,10 @@ dependencies = [

 [[package]]
 name = "psysonic"
-version = "1.5.0"
+version = "1.9.0"
 dependencies = [
 "biquad",
+ "md5",
 "reqwest 0.12.28",
 "rodio",
 "serde",
@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.6.0"
+version = "1.9.0"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""
@@ -31,7 +31,8 @@ tauri-plugin-fs = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 rodio = { version = "0.19", default-features = false, features = ["symphonia-all"] }
-reqwest = { version = "0.12", features = ["stream"] }
+reqwest = { version = "0.12", features = ["stream", "json"] }
+md5 = "0.7"
 tokio = { version = "1", features = ["rt", "time"] }
 biquad = "0.4"
 tauri-plugin-window-state = "2.4.1"
@@ -111,7 +111,7 @@ impl<S: Source<Item = f32>> Source for EqSource<S> {
    fn total_duration(&self) -> Option<Duration> { self.inner.total_duration() }

    fn try_seek(&mut self, pos: Duration) -> Result<(), rodio::source::SeekError> {
-        // Reset biquad filter state to avoid glitches/clicks after seek.
+        // Reset biquad filter state to avoid glitches after seek.
        for band in 0..10 {
            let gain_db = f32::from_bits(self.gains[band].load(Ordering::Relaxed));
            self.current_gains[band] = gain_db;
@@ -133,41 +133,297 @@ impl<S: Source<Item = f32>> Source for EqSource<S> {
    }
 }

-// ─── Debug logger ─────────────────────────────────────────────────────────────
+// ─── DynSource — type-erased Source wrapper ───────────────────────────────────
+//
+// Allows chaining differently-typed sources (with trimming applied) into a
+// single concrete type accepted by EqSource<S: Source<Item=f32>>.

-// ─── Engine state (registered as Tauri managed state) ────────────────────────
+struct DynSource {
+    inner: Box<dyn Source<Item = f32> + Send>,
+    channels: u16,
+    sample_rate: u32,
+}
+
+impl DynSource {
+    fn new(src: impl Source<Item = f32> + Send + 'static) -> Self {
+        let channels = src.channels();
+        let sample_rate = src.sample_rate();
+        Self { inner: Box::new(src), channels, sample_rate }
+    }
+}
+
+impl Iterator for DynSource {
+    type Item = f32;
+    fn next(&mut self) -> Option<f32> { self.inner.next() }
+}
+
+impl Source for DynSource {
+    fn current_frame_len(&self) -> Option<usize> { self.inner.current_frame_len() }
+    fn channels(&self) -> u16 { self.channels }
+    fn sample_rate(&self) -> u32 { self.sample_rate }
+    fn total_duration(&self) -> Option<Duration> { self.inner.total_duration() }
+    fn try_seek(&mut self, pos: Duration) -> Result<(), rodio::source::SeekError> {
+        self.inner.try_seek(pos)
+    }
+}
+
+// ─── EqualPowerFadeIn — per-sample sin(t·π/2) fade-in envelope ───────────────
+//
+// Applied to every new track:
+//   • Crossfade: fade_dur = crossfade_secs  → symmetric equal-power fade-in
+//   • Hard cut:  fade_dur = 5 ms            → micro-fade eliminates DC-click
+//   • Gapless:   fade_dur = 0               → unity gain (no modification)
+//
+// gain(t) = sin(t · π/2),  t ∈ [0, 1)
+// At t = 0 gain = 0, at t = 1 gain = 1.
+// Equal-power property: cos²+sin² = 1 → combined with cos fade-out on Track A
+// the total perceived loudness stays constant across the crossfade.
+
+struct EqualPowerFadeIn<S: Source<Item = f32>> {
+    inner: S,
+    sample_count: u64,
+    fade_samples: u64,
+}
+
+impl<S: Source<Item = f32>> EqualPowerFadeIn<S> {
+    fn new(inner: S, fade_dur: Duration) -> Self {
+        let sample_rate = inner.sample_rate();
+        let channels = inner.channels() as u64;
+        let fade_samples = if fade_dur.is_zero() {
+            0
+        } else {
+            (fade_dur.as_secs_f64() * sample_rate as f64 * channels as f64) as u64
+        };
+        Self { inner, sample_count: 0, fade_samples }
+    }
+}
+
+impl<S: Source<Item = f32>> Iterator for EqualPowerFadeIn<S> {
+    type Item = f32;
+    fn next(&mut self) -> Option<f32> {
+        let sample = self.inner.next()?;
+        let gain = if self.fade_samples == 0 || self.sample_count >= self.fade_samples {
+            1.0
+        } else {
+            let t = self.sample_count as f32 / self.fade_samples as f32;
+            (t * std::f32::consts::FRAC_PI_2).sin()
+        };
+        self.sample_count += 1;
+        Some(sample * gain)
+    }
+}
+
+impl<S: Source<Item = f32>> Source for EqualPowerFadeIn<S> {
+    fn current_frame_len(&self) -> Option<usize> { self.inner.current_frame_len() }
+    fn channels(&self) -> u16 { self.inner.channels() }
+    fn sample_rate(&self) -> u32 { self.inner.sample_rate() }
+    fn total_duration(&self) -> Option<Duration> { self.inner.total_duration() }
+    fn try_seek(&mut self, pos: Duration) -> Result<(), rodio::source::SeekError> {
+        // Restart the fade envelope after seeking (avoids a mid-song click if
+        // the user seeks to the very beginning while a fade was in progress).
+        self.sample_count = 0;
+        self.inner.try_seek(pos)
+    }
+}
+
+// ─── NotifyingSource — sets a flag when the inner iterator is exhausted ───────
+//
+// This is the key mechanism for gapless: the progress task polls `done` to know
+// exactly when source N has finished inside the Sink, without relying on
+// wall-clock estimation or the unreliable `Sink::empty()`.
+
+struct NotifyingSource<S: Source<Item = f32>> {
+    inner: S,
+    done: Arc<AtomicBool>,
+    signalled: bool,
+}
+
+impl<S: Source<Item = f32>> NotifyingSource<S> {
+    fn new(inner: S, done: Arc<AtomicBool>) -> Self {
+        Self { inner, done, signalled: false }
+    }
+}
+
+impl<S: Source<Item = f32>> Iterator for NotifyingSource<S> {
+    type Item = f32;
+    fn next(&mut self) -> Option<f32> {
+        let sample = self.inner.next();
+        if sample.is_none() && !self.signalled {
+            self.signalled = true;
+            self.done.store(true, Ordering::SeqCst);
+        }
+        sample
+    }
+}
+
+impl<S: Source<Item = f32>> Source for NotifyingSource<S> {
+    fn current_frame_len(&self) -> Option<usize> { self.inner.current_frame_len() }
+    fn channels(&self) -> u16 { self.inner.channels() }
+    fn sample_rate(&self) -> u32 { self.inner.sample_rate() }
+    fn total_duration(&self) -> Option<Duration> { self.inner.total_duration() }
+    fn try_seek(&mut self, pos: Duration) -> Result<(), rodio::source::SeekError> {
+        // If we seek backwards the source is no longer exhausted.
+        self.signalled = false;
+        self.done.store(false, Ordering::SeqCst);
+        self.inner.try_seek(pos)
+    }
+}
+
+// ─── Encoder-gap trimming (iTunSMPB) ─────────────────────────────────────────
+//
+// MP3/AAC encoders prepend an "encoder delay" (typically 576–2112 silent
+// samples for LAME) and append end-padding to fill the final frame.
+// iTunes embeds the exact counts in an ID3v2 COMM frame with description
+// "iTunSMPB". Format: " 00000000 DELAY PADDING TOTAL ..."  (space-separated hex)
+//
+// Parsing strategy: scan raw bytes for the ASCII marker, then extract the
+// first whitespace-separated hex tokens after it.
+
+struct GaplessInfo {
+    delay_samples: u64,
+    total_valid_samples: Option<u64>,
+}
+
+impl Default for GaplessInfo {
+    fn default() -> Self {
+        Self { delay_samples: 0, total_valid_samples: None }
+    }
+}
+
+fn find_subsequence(data: &[u8], needle: &[u8]) -> Option<usize> {
+    data.windows(needle.len()).position(|w| w == needle)
+}
+
+fn parse_gapless_info(data: &[u8]) -> GaplessInfo {
+    let pos = match find_subsequence(data, b"iTunSMPB") {
+        Some(p) => p,
+        None => return GaplessInfo::default(),
+    };
+
+    // Collect printable ASCII bytes after the tag (skip nulls / control chars)
+    let tail = &data[pos + 8..data.len().min(pos + 8 + 256)];
+    let text: String = tail.iter()
+        .map(|&b| b as char)
+        .filter(|c| c.is_ascii_hexdigit() || *c == ' ')
+        .collect();
+
+    let parts: Vec<&str> = text.split_whitespace().collect();
+    // parts[0] = "00000000", parts[1] = delay, parts[2] = padding, parts[3] = total
+    if parts.len() < 3 {
+        return GaplessInfo::default();
+    }
+    let delay = u64::from_str_radix(parts.get(1).unwrap_or(&"0"), 16).unwrap_or(0);
+    let padding = u64::from_str_radix(parts.get(2).unwrap_or(&"0"), 16).unwrap_or(0);
+    let total_raw = parts.get(3).and_then(|s| u64::from_str_radix(s, 16).ok());
+
+    let total_valid = total_raw.map(|t| t).filter(|&t| t > 0).or_else(|| {
+        // Derive from delay + padding if total not available:
+        // Not possible without knowing total encoded samples, so just use None.
+        let _ = padding;
+        None
+    });
+
+    GaplessInfo { delay_samples: delay, total_valid_samples: total_valid }
+}
+
+/// Build a fully-prepared playback source: decode → trim → EQ → fade-in → notify.
+///
+/// `fade_in_dur`:
+///   • `Duration::ZERO`          — unity gain; used for gapless chain (no click)
+///   • `Duration::from_millis(5)` — micro-fade; used for hard cuts (anti-click)
+///   • `Duration::from_secs_f32(cf)` — full equal-power fade-in for crossfade
+fn build_source(
+    data: Vec<u8>,
+    duration_hint: f64,
+    eq_gains: Arc<[AtomicU32; 10]>,
+    eq_enabled: Arc<AtomicBool>,
+    done_flag: Arc<AtomicBool>,
+    fade_in_dur: Duration,
+) -> Result<(NotifyingSource<EqualPowerFadeIn<EqSource<DynSource>>>, f64), String> {
+    let gapless = parse_gapless_info(&data);
+
+    let cursor = Cursor::new(data);
+    let decoder = Decoder::new(cursor).map_err(|e| e.to_string())?;
+    let sample_rate = decoder.sample_rate();
+
+    // Determine effective duration.
+    // Prefer hint from Subsonic API (reliable) over decoder (unreliable for VBR MP3).
+    let effective_dur = if duration_hint > 1.0 {
+        duration_hint
+    } else {
+        decoder.total_duration()
+            .map(|d| d.as_secs_f64())
+            .unwrap_or(duration_hint)
+    };
+
+    // Apply encoder-delay trim and optional end-padding trim.
+    let dyn_src: DynSource = if gapless.delay_samples > 0 || gapless.total_valid_samples.is_some() {
+        let delay_dur = Duration::from_secs_f64(
+            gapless.delay_samples as f64 / sample_rate as f64
+        );
+        let base = decoder.convert_samples::<f32>().skip_duration(delay_dur);
+
+        if let Some(total) = gapless.total_valid_samples {
+            let valid_dur = Duration::from_secs_f64(total as f64 / sample_rate as f64);
+            DynSource::new(base.take_duration(valid_dur))
+        } else {
+            DynSource::new(base)
+        }
+    } else {
+        DynSource::new(decoder.convert_samples::<f32>())
+    };
+
+    let eq_src = EqSource::new(dyn_src, eq_gains, eq_enabled);
+    let fade_in = EqualPowerFadeIn::new(eq_src, fade_in_dur);
+    let notifying = NotifyingSource::new(fade_in, done_flag);
+
+    Ok((notifying, effective_dur))
+}
+
+// ─── Engine state ─────────────────────────────────────────────────────────────

 pub(crate) struct PreloadedTrack {
    url: String,
    data: Vec<u8>,
-    duration_hint: f64,
+}
+
+/// Info about the track that has been appended (chained) to the current Sink
+/// but whose source has not yet started playing (gapless mode only).
+pub(crate) struct ChainedInfo {
+    /// The URL that was chained — used by audio_play to detect a pre-chain hit.
+    url: String,
+    duration_secs: f64,
+    replay_gain_linear: f32,
+    base_volume: f32,
+    /// Set by NotifyingSource when this chained track's source is exhausted.
+    source_done: Arc<AtomicBool>,
 }

 pub struct AudioEngine {
    pub stream_handle: Arc<rodio::OutputStreamHandle>,
    pub current: Arc<Mutex<AudioCurrent>>,
-    /// Monotonically incremented on each audio_play / audio_stop call.
-    /// The background progress task captures its own `gen` at creation and
-    /// bails out if this counter has moved on, preventing stale events.
+    /// Monotonically incremented on each audio_play (non-chain) / audio_stop call.
    pub generation: Arc<AtomicU64>,
    pub http_client: reqwest::Client,
    pub eq_gains: Arc<[AtomicU32; 10]>,
    pub eq_enabled: Arc<AtomicBool>,
    pub preloaded: Arc<Mutex<Option<PreloadedTrack>>>,
    pub crossfade_enabled: Arc<AtomicBool>,
-    pub crossfade_secs: Arc<AtomicU32>,  // f32 stored as bits
+    pub crossfade_secs: Arc<AtomicU32>,
    pub fading_out_sink: Arc<Mutex<Option<Sink>>>,
+    /// When true, audio_play chains sources to the existing Sink instead of
+    /// creating a new one, achieving sample-accurate gapless transitions.
+    pub gapless_enabled: Arc<AtomicBool>,
+    /// Info about the next-up chained track (gapless mode).
+    /// The progress task reads this when `current_source_done` fires.
+    pub chained_info: Arc<Mutex<Option<ChainedInfo>>>,
 }

 pub struct AudioCurrent {
-    /// The active rodio Sink. `None` when stopped.
    pub sink: Option<Sink>,
    pub duration_secs: f64,
-    /// Position (seconds) that we seeked/resumed from.
    pub seek_offset: f64,
-    /// Instant when we started counting from seek_offset (None when paused/stopped).
    pub play_started: Option<Instant>,
-    /// Set when paused; holds the position at pause time.
    pub paused_at: Option<f64>,
    pub replay_gain_linear: f32,
    pub base_volume: f32,
@@ -187,25 +443,30 @@ impl AudioCurrent {
    }
 }

-/// Initialise the audio engine. Spawns a dedicated thread that holds the
-/// `OutputStream` alive for the lifetime of the process (parking prevents
-/// the thread — and thus the stream — from being dropped).
 pub fn create_engine() -> (AudioEngine, std::thread::JoinHandle<()>) {
    let (tx, rx) = std::sync::mpsc::sync_channel::<rodio::OutputStreamHandle>(0);

+    // Request a larger audio buffer from PipeWire/PulseAudio to reduce ALSA underruns.
+    // Only set if the user hasn't already configured these themselves.
+    // PIPEWIRE_LATENCY: 4096 frames / 48000 Hz ≈ 85 ms — enough to absorb scheduler jitter.
+    #[cfg(target_os = "linux")]
+    {
+        if std::env::var("PIPEWIRE_LATENCY").is_err() {
+            std::env::set_var("PIPEWIRE_LATENCY", "4096/48000");
+        }
+        if std::env::var("PULSE_LATENCY_MSEC").is_err() {
+            std::env::set_var("PULSE_LATENCY_MSEC", "85");
+        }
+    }
+
    let thread = std::thread::Builder::new()
        .name("psysonic-audio-stream".into())
        .spawn(move || match rodio::OutputStream::try_default() {
            Ok((_stream, handle)) => {
                tx.send(handle).ok();
-                // Park forever — `_stream` must stay alive for audio to work.
-                loop {
-                    std::thread::park();
-                }
-            }
-            Err(e) => {
-                eprintln!("[psysonic] audio output error: {e}");
+                loop { std::thread::park(); }
            }
+            Err(e) => { eprintln!("[psysonic] audio output error: {e}"); }
        })
        .expect("spawn audio stream thread");

@@ -233,6 +494,8 @@ pub fn create_engine() -> (AudioEngine, std::thread::JoinHandle<()>) {
        crossfade_enabled: Arc::new(AtomicBool::new(false)),
        crossfade_secs: Arc::new(AtomicU32::new(3.0f32.to_bits())),
        fading_out_sink: Arc::new(Mutex::new(None)),
+        gapless_enabled: Arc::new(AtomicBool::new(false)),
+        chained_info: Arc::new(Mutex::new(None)),
    };

    (engine, thread)
@@ -246,11 +509,59 @@ pub struct ProgressPayload {
    pub duration: f64,
 }

+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/// Fetch track bytes from the preload cache or via HTTP.
+async fn fetch_data(
+    url: &str,
+    state: &AudioEngine,
+    gen: u64,
+    app: &AppHandle,
+) -> Result<Option<Vec<u8>>, String> {
+    // Check preload cache first.
+    let cached = {
+        let mut preloaded = state.preloaded.lock().unwrap();
+        if preloaded.as_ref().map(|p| p.url == url).unwrap_or(false) {
+            preloaded.take().map(|p| p.data)
+        } else {
+            None
+        }
+    };
+
+    if let Some(data) = cached {
+        return Ok(Some(data));
+    }
+
+    let response = state.http_client.get(url).send().await.map_err(|e| e.to_string())?;
+    if !response.status().is_success() {
+        if state.generation.load(Ordering::SeqCst) != gen {
+            return Ok(None); // superseded
+        }
+        let status = response.status().as_u16();
+        let msg = format!("HTTP {status}");
+        app.emit("audio:error", &msg).ok();
+        return Err(msg);
+    }
+    let data: Vec<u8> = response.bytes().await.map_err(|e| e.to_string())?.into();
+    Ok(Some(data))
+}
+
+fn compute_gain(
+    replay_gain_db: Option<f32>,
+    replay_gain_peak: Option<f32>,
+    volume: f32,
+) -> (f32, f32) {
+    let gain_linear = replay_gain_db
+        .map(|db| 10f32.powf(db / 20.0))
+        .unwrap_or(1.0);
+    let peak = replay_gain_peak.unwrap_or(1.0).max(0.001);
+    let gain_linear = gain_linear.min(1.0 / peak);
+    let effective = (volume.clamp(0.0, 1.0) * gain_linear).clamp(0.0, 1.0);
+    (gain_linear, effective)
+}
+
 // ─── Commands ─────────────────────────────────────────────────────────────────

-/// Download and play the given URL. Replaces any currently playing track.
-/// Emits `audio:playing` (with duration as f64) once playback starts,
-/// then `audio:progress` every 500 ms, and `audio:ended` when done.
 #[tauri::command]
 pub async fn audio_play(
    url: String,
@@ -261,115 +572,116 @@ pub async fn audio_play(
    app: AppHandle,
    state: State<'_, AudioEngine>,
 ) -> Result<(), String> {
-    // Claim this generation — any in-flight progress task with the old gen will exit.
+    let gapless = state.gapless_enabled.load(Ordering::Relaxed);
+
+    // ── Gapless pre-chain hit ─────────────────────────────────────────────────
+    // audio_chain_preload already appended this URL to the Sink 30 s in
+    // advance. The source is live in the queue — just return and let the
+    // progress task handle the state transition when the previous source ends.
+    if gapless {
+        let already_chained = state.chained_info.lock().unwrap()
+            .as_ref()
+            .map(|c| c.url == url)
+            .unwrap_or(false);
+        if already_chained {
+            return Ok(());
+        }
+    }
+
+    // ── Standard (new-sink) path ─────────────────────────────────────────────
+    // Used for: manual skip, gapless OFF, first play, or gapless when the
+    // proactive chain was not set up in time.
+
    let gen = state.generation.fetch_add(1, Ordering::SeqCst) + 1;

-    // Stop any previous fading sink unconditionally.
-    {
-        let mut fo = state.fading_out_sink.lock().unwrap();
-        if let Some(old) = fo.take() {
-            old.stop();
-        }
+    // Cancel any pending chain (manual skip while gapless chain was set up).
+    *state.chained_info.lock().unwrap() = None;
+
+    // Stop fading-out sink from previous crossfade.
+    if let Some(old) = state.fading_out_sink.lock().unwrap().take() {
+        old.stop();
    }

-    // NOTE: We intentionally do NOT stop the current Sink here.
-    // The old Sink keeps playing while we download + decode the new track.
-    // We swap Sinks atomically only after the new data is ready, so the
-    // old track plays to completion (or as close to it as possible).
-
-    // ── Check preload cache or download ──────────────────────────────────────
-    let data: Vec<u8> = {
-        let cached = {
-            let mut preloaded = state.preloaded.lock().unwrap();
-            if let Some(p) = preloaded.as_ref().filter(|p| p.url == url) {
-                let d = p.data.clone();
-                let _ = p.duration_hint; // used for type check
-                *preloaded = None;
-                Some(d)
-            } else {
-                None
-            }
-        };
-        if let Some(cached_data) = cached {
-            cached_data
-        } else {
-            let response = state
-                .http_client
-                .get(&url)
-                .send()
-                .await
-                .map_err(|e| e.to_string())?;
-            if !response.status().is_success() {
-                let status = response.status().as_u16();
-                if state.generation.load(Ordering::SeqCst) != gen {
-                    return Ok(());
-                }
-                let msg = format!("HTTP {status}");
-                app.emit("audio:error", &msg).ok();
-                return Err(msg);
-            }
-            response.bytes().await.map_err(|e| e.to_string())?.into()
-        }
+    // Fetch bytes (may use preload cache).
+    let data = match fetch_data(&url, &state, gen, &app).await? {
+        Some(d) => d,
+        None => return Ok(()), // superseded while downloading
    };

-    // Bail if superseded while downloading.
    if state.generation.load(Ordering::SeqCst) != gen {
        return Ok(());
    }

-    // ── Decode ────────────────────────────────────────────────────────────────
+    let (gain_linear, effective_volume) = compute_gain(replay_gain_db, replay_gain_peak, volume);

-    // Trust the Subsonic API duration_hint as the primary source.
-    // Decoder::total_duration() is unreliable for VBR MP3 (symphonia may
-    // return a single-frame or header duration that is far too short).
-    let decoder_duration = {
-        let cursor = Cursor::new(data.clone());
-        Decoder::new(cursor)
-            .ok()
-            .and_then(|d| d.total_duration())
-            .map(|d| d.as_secs_f64())
-    };
-    let duration_secs = if duration_hint > 1.0 {
-        duration_hint
-    } else {
-        decoder_duration.unwrap_or(duration_hint)
-    };
-
-    let cursor = Cursor::new(data);
-    let decoder = Decoder::new(cursor).map_err(|e| {
-        app.emit("audio:error", e.to_string()).ok();
-        e.to_string()
-    })?;
-
-    // Final generation check before committing.
-    if state.generation.load(Ordering::SeqCst) != gen {
-        return Ok(());
-    }
-
-    // ── Compute replay gain ───────────────────────────────────────────────────
-    let gain_linear: f32 = replay_gain_db
-        .map(|db| 10f32.powf(db / 20.0))
-        .unwrap_or(1.0);
-    let peak = replay_gain_peak.unwrap_or(1.0).max(0.001);
-    // Limit gain so peak sample doesn't exceed 1.0 (prevent clipping).
-    let gain_linear = gain_linear.min(1.0 / peak);
-    let effective_volume = (volume.clamp(0.0, 1.0) * gain_linear).clamp(0.0, 1.0);
-
-    // ── Create new sink ───────────────────────────────────────────────────────
    let crossfade_enabled = state.crossfade_enabled.load(Ordering::Relaxed);
    let crossfade_secs_val = f32::from_bits(state.crossfade_secs.load(Ordering::Relaxed)).clamp(0.5, 12.0);

-    let sink = Sink::try_new(&*state.stream_handle).map_err(|e| e.to_string())?;
-    sink.set_volume(effective_volume);
-    let eq_source = EqSource::new(
-        decoder.convert_samples::<f32>(),
+    // Measure how much audio Track A actually has left right now.
+    // By the time audio_play is called, near_end_ticks (2×500ms) + IPC latency
+    // have consumed ~500–800ms from Track A's tail — so its true remaining time
+    // is always less than crossfade_secs_val.  Using the measured remaining time
+    // for BOTH fade-out (Track A) and fade-in (Track B) keeps them in sync and
+    // guarantees Track A reaches 0 exactly when its source exhausts.
+    let actual_fade_secs: f32 = if crossfade_enabled {
+        let cur = state.current.lock().unwrap();
+        let remaining = (cur.duration_secs - cur.position()) as f32;
+        remaining.clamp(0.1, crossfade_secs_val)
+    } else {
+        0.0
+    };
+
+    // Fade-in duration for Track B:
+    //   crossfade → equal-power sin(t·π/2) over actual remaining time of Track A
+    //   hard cut  → 5 ms micro-fade to suppress DC-offset click
+    let fade_in_dur = if crossfade_enabled {
+        Duration::from_secs_f32(actual_fade_secs)
+    } else {
+        Duration::from_millis(5)
+    };
+
+    // Build source: decode → trim → EQ → fade-in → notify.
+    let done_flag = Arc::new(AtomicBool::new(false));
+    let (source, duration_secs) = build_source(
+        data,
+        duration_hint,
        state.eq_gains.clone(),
        state.eq_enabled.clone(),
-    );
-    sink.append(eq_source);
+        done_flag.clone(),
+        fade_in_dur,
+    ).map_err(|e| { app.emit("audio:error", &e).ok(); e })?;

-    // Atomically swap sinks: take old one, install new one.
-    // Capture old volume so the crossfade fade-out starts at the right level.
+    if state.generation.load(Ordering::SeqCst) != gen {
+        return Ok(());
+    }
+
+    let sink = Sink::try_new(&*state.stream_handle).map_err(|e| e.to_string())?;
+    sink.set_volume(effective_volume);
+
+    // Gapless OFF: prepend a short silence so tracks are clearly separated.
+    // Only when this is an auto-advance (near end), not on manual skip.
+    if !gapless {
+        let cur_pos = {
+            let cur = state.current.lock().unwrap();
+            cur.position()
+        };
+        let cur_dur = {
+            let cur = state.current.lock().unwrap();
+            cur.duration_secs
+        };
+        let is_auto_advance = cur_dur > 3.0 && cur_pos >= cur_dur - 3.0;
+        if is_auto_advance {
+            let silence = rodio::source::Zero::<f32>::new(
+                source.channels(),
+                source.sample_rate(),
+            ).take_duration(Duration::from_millis(500));
+            sink.append(silence);
+        }
+    }
+
+    sink.append(source);
+
+    // Atomically swap sinks.
    let (old_sink, old_vol) = {
        let mut cur = state.current.lock().unwrap();
        let old_vol = (cur.base_volume * cur.replay_gain_linear).clamp(0.0, 1.0);
@@ -384,25 +696,35 @@ pub async fn audio_play(
        (old, old_vol)
    };

-    // Handle old sink: crossfade fade-out or immediate stop.
-    // The new track is already playing; the old sink runs in parallel during a crossfade.
+    // Handle old sink: equal-power crossfade or immediate stop.
    if crossfade_enabled {
        if let Some(old) = old_sink {
-            // Park the old sink in fading_out_sink so a subsequent audio_play can cancel it.
            *state.fading_out_sink.lock().unwrap() = Some(old);
            let fo_arc = state.fading_out_sink.clone();
            tokio::spawn(async move {
-                let steps: u32 = 30;
-                let step_ms = ((crossfade_secs_val * 1000.0) / steps as f32) as u64;
-                for i in (0..=steps).rev() {
-                    {
+                // ~100 steps/sec (one step every 10 ms) for smooth equal-power fade.
+                // Duration = actual_fade_secs (Track A's measured remaining time),
+                // so the fade reaches exactly 0 when the source is exhausted.
+                const STEP_MS: u64 = 10;
+                let total_steps = ((actual_fade_secs * 1000.0) / STEP_MS as f32).round() as u32;
+                for i in (0..=total_steps).rev() {
+                    let alive = {
                        let fo = fo_arc.lock().unwrap();
                        match fo.as_ref() {
-                            Some(s) => s.set_volume(old_vol * (i as f32 / steps as f32)),
-                            None => return, // cancelled by a subsequent audio_play
+                            Some(s) => {
+                                // Equal-power cos curve: gain_a = cos(t · π/2)
+                                // t goes 1→0 as i goes total_steps→0
+                                let t = i as f32 / total_steps as f32;
+                                let gain = (t * std::f32::consts::FRAC_PI_2).cos();
+                                s.set_volume(old_vol * gain);
+                                true
+                            }
+                            None => false,
                        }
-                    }
-                    tokio::time::sleep(Duration::from_millis(step_ms)).await;
+                        // MutexGuard dropped here before the await
+                    };
+                    if !alive { return; }
+                    tokio::time::sleep(Duration::from_millis(STEP_MS)).await;
                }
                if let Some(s) = fo_arc.lock().unwrap().take() {
                    s.stop();
@@ -416,24 +738,141 @@ pub async fn audio_play(
    app.emit("audio:playing", duration_secs).ok();

    // ── Progress + ended detection ────────────────────────────────────────────
-    // We do NOT use `sink.empty()` because in rodio 0.19 the source moves from
-    // the pending queue to the active state almost immediately after `append()`,
-    // making `empty()` return `true` within milliseconds even for long tracks.
-    //
-    // Instead we use the wall-clock position (seek_offset + elapsed).
-    // `AudioCurrent::position()` is clamped to `duration_secs`, so once it
-    // reaches the end it stays there. We fire `audio:ended` after two
-    // consecutive ticks where position >= duration - threshold, where threshold
-    // is extended to crossfade_secs when crossfade is enabled so the frontend
-    // gets time to start the next track during the fade.
-    let gen_counter = state.generation.clone();
-    let current_arc = state.current.clone();
-    let app_clone = app.clone();
-    let crossfade_enabled_arc = state.crossfade_enabled.clone();
-    let crossfade_secs_arc = state.crossfade_secs.clone();
+    spawn_progress_task(
+        gen,
+        state.generation.clone(),
+        state.current.clone(),
+        state.chained_info.clone(),
+        state.crossfade_enabled.clone(),
+        state.crossfade_secs.clone(),
+        done_flag,
+        app,
+    );

+    Ok(())
+}
+
+/// Proactively appends the next track to the current Sink ~30 s before the
+/// current track ends. Called from JS at the same trigger point as preload.
+///
+/// Because this runs well before the track boundary, the IPC round-trip is
+/// irrelevant — by the time the current track actually ends, the next source
+/// is already live in the Sink queue and rodio transitions at sample accuracy.
+///
+/// audio_play() checks chained_info.url on arrival: if it matches, it returns
+/// immediately without touching the Sink (pure no-op on the audio path).
+#[tauri::command]
+pub async fn audio_chain_preload(
+    url: String,
+    volume: f32,
+    duration_hint: f64,
+    replay_gain_db: Option<f32>,
+    replay_gain_peak: Option<f32>,
+    state: State<'_, AudioEngine>,
+) -> Result<(), String> {
+    // Idempotent: already chained this URL → nothing to do.
+    {
+        let chained = state.chained_info.lock().unwrap();
+        if chained.as_ref().map(|c| c.url == url).unwrap_or(false) {
+            return Ok(());
+        }
+    }
+
+    // Gapless must be enabled and a sink must exist.
+    if !state.gapless_enabled.load(Ordering::Relaxed) {
+        return Ok(());
+    }
+
+    let snapshot_gen = state.generation.load(Ordering::SeqCst);
+
+    // Fetch bytes — use preload cache if available, otherwise HTTP.
+    let data: Vec<u8> = {
+        let cached = {
+            let mut preloaded = state.preloaded.lock().unwrap();
+            if preloaded.as_ref().map(|p| p.url == url).unwrap_or(false) {
+                preloaded.take().map(|p| p.data)
+            } else {
+                None
+            }
+        };
+        if let Some(d) = cached {
+            d
+        } else {
+            let resp = state.http_client.get(&url).send().await
+                .map_err(|e| e.to_string())?;
+            if !resp.status().is_success() {
+                return Ok(()); // silently fail — audio_play will retry
+            }
+            resp.bytes().await.map_err(|e| e.to_string())?.into()
+        }
+    };
+
+    // Bail if the user skipped to a different track while we were downloading.
+    if state.generation.load(Ordering::SeqCst) != snapshot_gen {
+        return Ok(());
+    }
+
+    let (gain_linear, effective_volume) = compute_gain(replay_gain_db, replay_gain_peak, volume);
+
+    let done_next = Arc::new(AtomicBool::new(false));
+    let (source, duration_secs) = build_source(
+        data,
+        duration_hint,
+        state.eq_gains.clone(),
+        state.eq_enabled.clone(),
+        done_next.clone(),
+        Duration::ZERO, // gapless: no fade-in — sample-accurate boundary, no click
+    ).map_err(|e| e.to_string())?;
+
+    // Final gen check — reject if a manual skip happened during decode.
+    if state.generation.load(Ordering::SeqCst) != snapshot_gen {
+        return Ok(());
+    }
+
+    // Append to the existing Sink. The audio hardware stream never stalls.
+    {
+        let cur = state.current.lock().unwrap();
+        match &cur.sink {
+            Some(sink) => {
+                sink.set_volume(effective_volume);
+                sink.append(source);
+            }
+            None => return Ok(()), // playback stopped — bail
+        }
+    }
+
+    *state.chained_info.lock().unwrap() = Some(ChainedInfo {
+        url,
+        duration_secs,
+        replay_gain_linear: gain_linear,
+        base_volume: volume.clamp(0.0, 1.0),
+        source_done: done_next,
+    });
+
+    Ok(())
+}
+
+/// Spawns the per-generation progress + ended-detection task.
+///
+/// The task owns a local `done: Arc<AtomicBool>` reference that starts as
+/// the current track's done flag. When the progress task detects that the
+/// done flag is set AND `chained_info` has data, it swaps `done` to the
+/// chained source's flag and transitions state — all without creating a new
+/// task or changing the generation counter.
+fn spawn_progress_task(
+    gen: u64,
+    gen_counter: Arc<AtomicU64>,
+    current_arc: Arc<Mutex<AudioCurrent>>,
+    chained_arc: Arc<Mutex<Option<ChainedInfo>>>,
+    crossfade_enabled_arc: Arc<AtomicBool>,
+    crossfade_secs_arc: Arc<AtomicU32>,
+    initial_done: Arc<AtomicBool>,
+    app: AppHandle,
+) {
    tokio::spawn(async move {
        let mut near_end_ticks: u32 = 0;
+        // Local done-flag reference; swapped on gapless transition.
+        let mut current_done = initial_done;

        loop {
            tokio::time::sleep(Duration::from_millis(500)).await;
@@ -442,20 +881,43 @@ pub async fn audio_play(
                break;
            }

+            // ── Gapless transition detection ─────────────────────────────────
+            // If the current source is exhausted AND we have a chained track
+            // ready, transition seamlessly: swap tracking state, emit
+            // audio:playing for the new track, and continue the loop.
+            if current_done.load(Ordering::SeqCst) {
+                let chained = chained_arc.lock().unwrap().take();
+                if let Some(info) = chained {
+                    // Swap to the chained source's done flag.
+                    current_done = info.source_done;
+                    // Tracking was already updated in audio_play_gapless_chain;
+                    // just update replay gain fields in case they differ.
+                    {
+                        let mut cur = current_arc.lock().unwrap();
+                        cur.replay_gain_linear = info.replay_gain_linear;
+                        cur.base_volume = info.base_volume;
+                        // Reset play_started to now — the old track physically
+                        // ended, the new one is now actively producing samples.
+                        cur.seek_offset = 0.0;
+                        cur.play_started = Some(Instant::now());
+                    }
+                    app.emit("audio:playing", info.duration_secs).ok();
+                    near_end_ticks = 0;
+                    continue;
+                }
+                // Current source exhausted but no chain queued — the Sink is
+                // likely draining; audio:ended will fire on the next tick via
+                // the near-end logic below.
+            }
+
            let (pos, dur, is_paused) = {
                let cur = current_arc.lock().unwrap();
                (cur.position(), cur.duration_secs, cur.paused_at.is_some())
            };

-            app_clone
-                .emit(
-                    "audio:progress",
-                    ProgressPayload { current_time: pos, duration: dur },
-                )
-                .ok();
+            app.emit("audio:progress", ProgressPayload { current_time: pos, duration: dur }).ok();

            if is_paused {
-                // Don't advance near-end counter while paused (stay put).
                continue;
            }

@@ -467,7 +929,7 @@ pub async fn audio_play(
                near_end_ticks += 1;
                if near_end_ticks >= 2 {
                    gen_counter.fetch_add(1, Ordering::SeqCst);
-                    app_clone.emit("audio:ended", ()).ok();
+                    app.emit("audio:ended", ()).ok();
                    break;
                }
            } else {
@@ -475,8 +937,6 @@ pub async fn audio_play(
            }
        }
    });
-
-    Ok(())
 }

 #[tauri::command]
@@ -509,6 +969,7 @@ pub fn audio_resume(state: State<'_, AudioEngine>) {
 #[tauri::command]
 pub fn audio_stop(state: State<'_, AudioEngine>) {
    state.generation.fetch_add(1, Ordering::SeqCst);
+    *state.chained_info.lock().unwrap() = None;
    let mut cur = state.current.lock().unwrap();
    if let Some(sink) = cur.sink.take() {
        sink.stop();
@@ -521,6 +982,15 @@ pub fn audio_stop(state: State<'_, AudioEngine>) {

 #[tauri::command]
 pub fn audio_seek(seconds: f64, state: State<'_, AudioEngine>) -> Result<(), String> {
+    // Seeking far back invalidates any pending gapless chain.
+    let cur_pos = {
+        let cur = state.current.lock().unwrap();
+        cur.position()
+    };
+    if seconds < cur_pos - 1.0 {
+        *state.chained_info.lock().unwrap() = None;
+    }
+
    let mut cur = state.current.lock().unwrap();
    if let Some(sink) = &cur.sink {
        sink.try_seek(Duration::from_secs_f64(seconds.max(0.0)))
@@ -558,24 +1028,19 @@ pub async fn audio_preload(
    duration_hint: f64,
    state: State<'_, AudioEngine>,
 ) -> Result<(), String> {
-    // Don't re-download if already preloaded for this URL.
    {
        let preloaded = state.preloaded.lock().unwrap();
        if preloaded.as_ref().map(|p| p.url == url).unwrap_or(false) {
            return Ok(());
        }
    }
-    let response = state
-        .http_client
-        .get(&url)
-        .send()
-        .await
-        .map_err(|e| e.to_string())?;
+    let response = state.http_client.get(&url).send().await.map_err(|e| e.to_string())?;
    if !response.status().is_success() {
-        return Ok(()); // silently fail preload
+        return Ok(());
    }
    let data: Vec<u8> = response.bytes().await.map_err(|e| e.to_string())?.into();
-    *state.preloaded.lock().unwrap() = Some(PreloadedTrack { url, data, duration_hint });
+    let _ = duration_hint; // kept in API for compatibility
+    *state.preloaded.lock().unwrap() = Some(PreloadedTrack { url, data });
    Ok(())
 }

@@ -584,3 +1049,8 @@ pub fn audio_set_crossfade(enabled: bool, secs: f32, state: State<'_, AudioEngin
    state.crossfade_enabled.store(enabled, Ordering::Relaxed);
    state.crossfade_secs.store(secs.clamp(0.5, 12.0).to_bits(), Ordering::Relaxed);
 }
+
+#[tauri::command]
+pub fn audio_set_gapless(enabled: bool, state: State<'_, AudioEngine>) {
+    state.gapless_enabled.store(enabled, Ordering::Relaxed);
+}
@@ -19,6 +19,62 @@ fn exit_app(app_handle: tauri::AppHandle) {
    app_handle.exit(0);
 }

+/// Proxy Last.fm API calls through Rust/reqwest to avoid WebView networking restrictions.
+/// `params` is a list of [key, value] pairs (method must be included).
+/// If `sign` is true an api_sig is computed. If `get` is true, a GET request is made.
+#[tauri::command]
+async fn lastfm_request(
+    params: Vec<[String; 2]>,
+    sign: bool,
+    get: bool,
+    api_key: String,
+    api_secret: String,
+) -> Result<serde_json::Value, String> {
+    use std::collections::HashMap;
+
+    let mut map: HashMap<String, String> = params.into_iter().map(|[k, v]| (k, v)).collect();
+    map.insert("api_key".into(), api_key.clone());
+
+    if sign {
+        let mut keys: Vec<String> = map.keys().cloned().collect();
+        keys.sort();
+        let sig_str: String = keys.iter()
+            .filter(|k| k.as_str() != "format" && k.as_str() != "callback")
+            .map(|k| format!("{}{}", k, map[k]))
+            .collect::<String>();
+        let sig_input = format!("{}{}", sig_str, api_secret);
+        let digest = md5::compute(sig_input.as_bytes());
+        map.insert("api_sig".into(), format!("{:x}", digest));
+    }
+
+    map.insert("format".into(), "json".into());
+
+    let client = reqwest::Client::new();
+    let resp = if get {
+        client
+            .get("https://ws.audioscrobbler.com/2.0/")
+            .query(&map)
+            .header("User-Agent", "psysonic/1.6.0")
+            .send()
+            .await
+    } else {
+        client
+            .post("https://ws.audioscrobbler.com/2.0/")
+            .form(&map)
+            .header("User-Agent", "psysonic/1.6.0")
+            .send()
+            .await
+    }.map_err(|e| e.to_string())?;
+
+    let json: serde_json::Value = resp.json().await.map_err(|e| e.to_string())?;
+
+    if let Some(err) = json.get("error") {
+        return Err(format!("Last.fm {} {}", err, json.get("message").and_then(|m| m.as_str()).unwrap_or("")));
+    }
+
+    Ok(json)
+}
+

 pub fn run() {
    let (audio_engine, _audio_thread) = audio::create_engine();
@@ -128,6 +184,9 @@ 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!())
        .expect("error while running Psysonic");
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Psysonic",
-  "version": "1.6.0",
+  "version": "1.9.0",
  "identifier": "dev.psysonic.player",
  "build": {
    "beforeDevCommand": "npm run dev",
@@ -16,8 +16,8 @@
        "title": "Psysonic",
        "width": 1280,
        "height": 800,
-        "minWidth": 900,
-        "minHeight": 600,
+        "minWidth": 1280,
+        "minHeight": 720,
        "resizable": true,
        "fullscreen": false,
        "decorations": true,
@@ -30,13 +30,17 @@ import NowPlayingPage from './pages/NowPlaying';
 import FullscreenPlayer from './components/FullscreenPlayer';
 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';

 function RequireAuth({ children }: { children: React.ReactNode }) {
  const { isLoggedIn, servers, activeServerId } = useAuthStore();
@@ -139,11 +143,13 @@ function AppShell() {
          <LiveSearch />
          <div className="spacer" />
          <ConnectionIndicator status={connStatus} isLan={isLan} serverName={serverName} />
+          <LastfmIndicator />
          <NowPlayingDropdown />
          <button
            className="collapse-btn"
            onClick={toggleQueue}
-            title={t('player.toggleQueue')}
+            data-tooltip={t('player.toggleQueue')}
+            data-tooltip-pos="bottom"
          >
            {isQueueVisible ? <PanelRightClose size={24} /> : <PanelRight size={24} />}
          </button>
@@ -191,6 +197,7 @@ function AppShell() {
      )}
      <ContextMenu />
      <DownloadFolderModal />
+      <TooltipPortal />
    </div>
  );
 }
@@ -202,24 +209,49 @@ 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;
+
+      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(() => {
    const unlisten: Array<() => void> = [];
@@ -250,11 +282,16 @@ 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();
  }, []);
@@ -0,0 +1,302 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useAuthStore } from '../store/authStore';
+
+const API_KEY = '9917fb39049225a13bec225ad6d49054';
+const API_SECRET = '03817dda02bee87a178aab7581abae3b';
+
+export function lastfmIsConfigured(): boolean {
+  return Boolean(API_KEY && API_SECRET);
+}
+
+function errMsg(e: unknown): string {
+  if (typeof e === 'string') return e;
+  if (e instanceof Error) return e.message;
+  return String(e);
+}
+
+async function call(params: Record<string, string>, sign = false, get = false): Promise<any> {
+  const entries = Object.entries(params) as [string, string][];
+  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> {
+  try {
+    const data = await call({ method: 'auth.getToken' }, false, true);
+    return data.token as string;
+  } catch (e) {
+    throw new Error(errMsg(e));
+  }
+}
+
+export function lastfmAuthUrl(token: string): string {
+  return `https://www.last.fm/api/auth/?api_key=${API_KEY}&token=${token}`;
+}
+
+export async function lastfmGetSession(token: string): Promise<{ key: string; name: string }> {
+  try {
+    const data = await call({ method: 'auth.getSession', token }, true, false);
+    return { key: data.session.key as string, name: data.session.name as string };
+  } catch (e) {
+    throw new Error(errMsg(e));
+  }
+}
+
+export async function lastfmGetSimilarArtists(artistName: string): Promise<string[]> {
+  try {
+    const data = await call({ method: 'artist.getSimilar', artist: artistName, limit: '50' }, false, true);
+    const artists = data?.similarartists?.artist;
+    if (!artists) return [];
+    const arr = Array.isArray(artists) ? artists : [artists];
+    return arr.map((a: any) => a.name as string);
+  } catch {
+    return [];
+  }
+}
+
+export async function lastfmGetAllLovedTracks(
+  username: string,
+  sessionKey: string,
+): Promise<Array<{ title: string; artist: string }>> {
+  const results: Array<{ title: string; artist: string }> = [];
+  let page = 1;
+  const limit = 200;
+
+  while (true) {
+    try {
+      const data = await call({
+        method: 'user.getLovedTracks',
+        user: username,
+        sk: sessionKey,
+        limit: String(limit),
+        page: String(page),
+      }, false, true);
+
+      const tracks = data?.lovedtracks?.track;
+      if (!tracks) break;
+      const arr = Array.isArray(tracks) ? tracks : [tracks];
+      for (const t of arr) {
+        results.push({ title: t.name, artist: t.artist?.name ?? '' });
+      }
+
+      const totalPages = Number(data?.lovedtracks?.['@attr']?.totalPages ?? 1);
+      if (page >= totalPages || page >= 10) break; // max 10 pages = 2000 tracks
+      page++;
+    } catch {
+      break;
+    }
+  }
+
+  return results;
+}
+
+export async function lastfmGetTrackLoved(
+  title: string,
+  artist: string,
+  sessionKey: string,
+): Promise<boolean> {
+  try {
+    const data = await call({ method: 'track.getInfo', track: title, artist, sk: sessionKey }, false, true);
+    return data?.track?.userloved === '1' || data?.track?.userloved === 1;
+  } catch {
+    return false;
+  }
+}
+
+export async function lastfmUpdateNowPlaying(
+  track: { title: string; artist: string; album: string; duration: number },
+  sessionKey: string,
+): Promise<void> {
+  try {
+    await call({
+      method: 'track.updateNowPlaying',
+      track: track.title,
+      artist: track.artist,
+      album: track.album,
+      duration: String(Math.round(track.duration)),
+      sk: sessionKey,
+    }, true, false);
+  } catch {
+    // best effort
+  }
+}
+
+export async function lastfmLoveTrack(
+  track: { title: string; artist: string },
+  sessionKey: string,
+): Promise<void> {
+  try {
+    await call({ method: 'track.love', track: track.title, artist: track.artist, sk: sessionKey }, true, false);
+  } catch {
+    // best effort
+  }
+}
+
+export async function lastfmUnloveTrack(
+  track: { title: string; artist: string },
+  sessionKey: string,
+): Promise<void> {
+  try {
+    await call({ method: 'track.unlove', track: track.title, artist: track.artist, sk: sessionKey }, true, false);
+  } catch {
+    // best effort
+  }
+}
+
+export interface LastfmUserInfo {
+  playcount: number;
+  registeredAt: number; // unix timestamp
+}
+
+export async function lastfmGetUserInfo(
+  username: string,
+  sessionKey: string,
+): Promise<LastfmUserInfo | null> {
+  try {
+    const data = await call({ method: 'user.getInfo', user: username, sk: sessionKey }, false, true);
+    const u = data?.user;
+    if (!u) return null;
+    return {
+      playcount: Number(u.playcount),
+      registeredAt: Number(u.registered?.unixtime ?? 0),
+    };
+  } catch {
+    return null;
+  }
+}
+
+export interface LastfmRecentTrack {
+  name: string;
+  artist: string;
+  album: string;
+  timestamp: number | null; // null = currently playing
+  nowPlaying: boolean;
+}
+
+export async function lastfmGetRecentTracks(
+  username: string,
+  sessionKey: string,
+  limit = 20,
+): Promise<LastfmRecentTrack[]> {
+  try {
+    const data = await call({ method: 'user.getRecentTracks', user: username, sk: sessionKey, limit: String(limit) }, false, true);
+    const items = data?.recenttracks?.track;
+    if (!items) return [];
+    const arr = Array.isArray(items) ? items : [items];
+    return arr.map((t: any) => ({
+      name: t.name,
+      artist: t.artist?.['#text'] ?? t.artist?.name ?? '',
+      album: t.album?.['#text'] ?? '',
+      timestamp: t.date?.uts ? Number(t.date.uts) : null,
+      nowPlaying: t['@attr']?.nowplaying === 'true',
+    }));
+  } catch {
+    return [];
+  }
+}
+
+export type LastfmPeriod = 'overall' | '7day' | '1month' | '3month' | '6month' | '12month';
+
+export interface LastfmTopArtist {
+  name: string;
+  playcount: string;
+}
+
+export interface LastfmTopAlbum {
+  name: string;
+  playcount: string;
+  artist: string;
+}
+
+export interface LastfmTopTrack {
+  name: string;
+  playcount: string;
+  artist: string;
+}
+
+export async function lastfmGetTopArtists(
+  username: string,
+  sessionKey: string,
+  period: LastfmPeriod,
+  limit = 10,
+): Promise<LastfmTopArtist[]> {
+  try {
+    const data = await call({ method: 'user.getTopArtists', user: username, sk: sessionKey, period, limit: String(limit) }, false, true);
+    const items = data?.topartists?.artist;
+    if (!items) return [];
+    const arr = Array.isArray(items) ? items : [items];
+    return arr.map((a: any) => ({ name: a.name, playcount: a.playcount }));
+  } catch {
+    return [];
+  }
+}
+
+export async function lastfmGetTopAlbums(
+  username: string,
+  sessionKey: string,
+  period: LastfmPeriod,
+  limit = 10,
+): Promise<LastfmTopAlbum[]> {
+  try {
+    const data = await call({ method: 'user.getTopAlbums', user: username, sk: sessionKey, period, limit: String(limit) }, false, true);
+    const items = data?.topalbums?.album;
+    if (!items) return [];
+    const arr = Array.isArray(items) ? items : [items];
+    return arr.map((a: any) => ({ name: a.name, playcount: a.playcount, artist: a.artist?.name ?? '' }));
+  } catch {
+    return [];
+  }
+}
+
+export async function lastfmGetTopTracks(
+  username: string,
+  sessionKey: string,
+  period: LastfmPeriod,
+  limit = 10,
+): Promise<LastfmTopTrack[]> {
+  try {
+    const data = await call({ method: 'user.getTopTracks', user: username, sk: sessionKey, period, limit: String(limit) }, false, true);
+    const items = data?.toptracks?.track;
+    if (!items) return [];
+    const arr = Array.isArray(items) ? items : [items];
+    return arr.map((t: any) => ({ name: t.name, playcount: t.playcount, artist: t.artist?.name ?? '' }));
+  } catch {
+    return [];
+  }
+}
+
+export async function lastfmScrobble(
+  track: { title: string; artist: string; album: string; duration: number },
+  timestamp: number,
+  sessionKey: string,
+): Promise<void> {
+  try {
+    await call({
+      method: 'track.scrobble',
+      track: track.title,
+      artist: track.artist,
+      album: track.album,
+      duration: String(Math.round(track.duration)),
+      timestamp: String(Math.floor(timestamp / 1000)),
+      sk: sessionKey,
+    }, true, false);
+  } catch {
+    // best effort
+  }
+}
@@ -124,6 +124,7 @@ export interface SubsonicArtistInfo {
  smallImageUrl?: string;
  mediumImageUrl?: string;
  largeImageUrl?: string;
+  similarArtist?: Array<{ id: string; name: string; albumCount?: number }>;
 }

 // ─── API Methods ──────────────────────────────────────────────
@@ -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,10 +51,10 @@ 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>
@@ -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>
            )}
@@ -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" title={title}>
+    <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>
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Play, ListPlus, Radio, Star, Download, ChevronRight, User, Disc3 } from 'lucide-react';
+import { Play, ListPlus, Radio, Star, Download, ChevronRight, User, Disc3, Heart } from 'lucide-react';
+import { lastfmLoveTrack, lastfmUnloveTrack } from '../api/lastfm';
 import { usePlayerStore, Track } from '../store/playerStore';
 import { SubsonicAlbum, SubsonicArtist, star, unstar, getSimilarSongs2, getTopSongs, buildDownloadUrl, getAlbum } from '../api/subsonic';
 import { useNavigate } from 'react-router-dom';
@@ -20,7 +21,7 @@ function sanitizeFilename(name: string): string {

 export default function ContextMenu() {
  const { t } = useTranslation();
-  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack } = usePlayerStore();
+  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong } = usePlayerStore();
  const auth = useAuthStore();
  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
  const navigate = useNavigate();
@@ -150,6 +151,21 @@ export default function ContextMenu() {
              <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
                <Star size={14} /> {t('contextMenu.favorite')}
              </div>
+              {auth.lastfmSessionKey && (() => {
+                const loveKey = `${song.title}::${song.artist}`;
+                const loved = lastfmLovedCache[loveKey] ?? false;
+                return (
+                  <div className="context-menu-item" onClick={() => handleAction(() => {
+                    const newLoved = !loved;
+                    setLastfmLovedForSong(song.title, song.artist, newLoved);
+                    if (newLoved) lastfmLoveTrack(song, auth.lastfmSessionKey);
+                    else lastfmUnloveTrack(song, auth.lastfmSessionKey);
+                  })}>
+                    <Heart size={14} fill={loved ? 'currentColor' : 'none'} style={{ color: loved ? '#e31c23' : undefined }} />
+                    {loved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
+                  </div>
+                );
+              })()}
            </>
          );
        })()}
@@ -211,6 +227,21 @@ export default function ContextMenu() {
              <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
                <Star size={14} /> {t('contextMenu.favorite')}
              </div>
+              {auth.lastfmSessionKey && (() => {
+                const loveKey = `${song.title}::${song.artist}`;
+                const loved = lastfmLovedCache[loveKey] ?? false;
+                return (
+                  <div className="context-menu-item" onClick={() => handleAction(() => {
+                    const newLoved = !loved;
+                    setLastfmLovedForSong(song.title, song.artist, newLoved);
+                    if (newLoved) lastfmLoveTrack(song, auth.lastfmSessionKey);
+                    else lastfmUnloveTrack(song, auth.lastfmSessionKey);
+                  })}>
+                    <Heart size={14} fill={loved ? 'currentColor' : 'none'} style={{ color: loved ? '#e31c23' : undefined }} />
+                    {loved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
+                  </div>
+                );
+              })()}
              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
                <Radio size={14} /> {t('contextMenu.startRadio')}
              </div>
@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+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 (
+    <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>
+  );
+}
@@ -0,0 +1,115 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown } from 'lucide-react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  group?: string; // group label — shown as non-selectable header when it changes
+  disabled?: boolean;
+}
+
+interface Props {
+  value: string;
+  options: SelectOption[];
+  onChange: (value: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function CustomSelect({ value, options, onChange, className = '', style }: Props) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [dropStyle, setDropStyle] = useState<React.CSSProperties>({});
+
+  const selected = options.find(o => o.value === value);
+
+  useLayoutEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const MARGIN = 6;
+    const maxH = 240;
+    const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
+    const spaceAbove = rect.top - MARGIN;
+    const useAbove = spaceBelow < 80 && spaceAbove > spaceBelow;
+
+    setDropStyle({
+      position: 'fixed',
+      left: rect.left,
+      width: rect.width,
+      ...(useAbove
+        ? { bottom: window.innerHeight - rect.top + MARGIN }
+        : { top: rect.bottom + MARGIN }),
+      maxHeight: Math.min(maxH, useAbove ? spaceAbove : spaceBelow),
+      zIndex: 99998,
+    });
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (
+        !triggerRef.current?.contains(e.target as Node) &&
+        !listRef.current?.contains(e.target as Node)
+      ) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`custom-select-trigger ${className}`}
+        style={style}
+        onClick={() => setOpen(v => !v)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+      >
+        <span className="custom-select-label">{selected?.label ?? value}</span>
+        <ChevronDown size={14} className={`custom-select-chevron ${open ? 'open' : ''}`} />
+      </button>
+
+      {open && createPortal(
+        <div
+          ref={listRef}
+          className="custom-select-dropdown"
+          style={dropStyle}
+          role="listbox"
+        >
+          {options.reduce<React.ReactNode[]>((acc, opt, i) => {
+            const prevGroup = i > 0 ? options[i - 1].group : undefined;
+            if (opt.group && opt.group !== prevGroup) {
+              acc.push(
+                <div key={`group-${opt.group}`} className="custom-select-group-label">
+                  {opt.group}
+                </div>
+              );
+            }
+            acc.push(
+              <div
+                key={opt.value}
+                className={`custom-select-option ${opt.value === value ? 'selected' : ''} ${opt.disabled ? 'disabled' : ''}`}
+                role="option"
+                aria-selected={opt.value === value}
+                onMouseDown={() => { if (!opt.disabled) { onChange(opt.value); setOpen(false); } }}
+              >
+                {opt.label}
+              </div>
+            );
+            return acc;
+          }, [])}
+        </div>,
+        document.body
+      )}
+    </>
+  );
+}
@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Save, Trash2, RotateCcw } from 'lucide-react';
+import CustomSelect from './CustomSelect';
 import { useEqStore, EQ_BANDS, BUILTIN_PRESETS } from '../store/eqStore';
 import { useThemeStore } from '../store/themeStore';

@@ -240,31 +241,26 @@ export default function Equalizer() {
        </label>

        <div className="eq-preset-row">
-          <select
-            className="input eq-preset-select"
+          <CustomSelect
+            className="eq-preset-select"
            value={selectValue}
-            onChange={e => applyPreset(e.target.value)}
-          >
-            {activePreset === null && <option value="__custom__">{t('settings.eqPresetCustom')}</option>}
-            <optgroup label={t('settings.eqPresetBuiltin')}>
-              {BUILTIN_PRESETS.map(p => <option key={p.name} value={p.name}>{p.name}</option>)}
-            </optgroup>
-            {customPresets.length > 0 && (
-              <optgroup label={t('settings.eqPresetCustomGroup')}>
-                {customPresets.map(p => <option key={p.name} value={p.name}>{p.name}</option>)}
-              </optgroup>
-            )}
-          </select>
+            onChange={v => applyPreset(v)}
+            options={[
+              ...(activePreset === null ? [{ value: '__custom__', label: t('settings.eqPresetCustom'), disabled: true }] : []),
+              ...BUILTIN_PRESETS.map(p => ({ value: p.name, label: p.name, group: t('settings.eqPresetBuiltin') })),
+              ...customPresets.map(p => ({ value: p.name, label: p.name, group: t('settings.eqPresetCustomGroup') })),
+            ]}
+          />

          {isCustomSaved && (
-            <button className="eq-ctrl-btn" onClick={() => deleteCustomPreset(activePreset!)} title={t('settings.eqDeletePreset')}>
+            <button className="eq-ctrl-btn" onClick={() => deleteCustomPreset(activePreset!)} data-tooltip={t('settings.eqDeletePreset')}>
              <Trash2 size={13} />
            </button>
          )}
-          <button className="eq-ctrl-btn" onClick={() => applyPreset('Flat')} title={t('settings.eqResetBands')}>
+          <button className="eq-ctrl-btn" onClick={() => applyPreset('Flat')} data-tooltip={t('settings.eqResetBands')}>
            <RotateCcw size={13} />
          </button>
-          <button className="eq-ctrl-btn" onClick={() => setShowSave(v => !v)} title={t('settings.eqSavePreset')}>
+          <button className="eq-ctrl-btn" onClick={() => setShowSave(v => !v)} data-tooltip={t('settings.eqSavePreset')}>
            <Save size={13} />
          </button>
        </div>
@@ -1,13 +1,12 @@
 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
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 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,10 +147,6 @@ 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 duration = currentTrack?.duration ?? 0;
  const coverUrl = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
@@ -182,58 +177,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" />
-          <div className="fs-orb fs-orb-1" aria-hidden="true" />
-          <div className="fs-orb fs-orb-2" aria-hidden="true" />
-          <div className="fs-orb fs-orb-3" 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">
@@ -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,7 @@
+export default function LastfmIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M11.344 16.143l-.917-2.494s-1.485 1.662-3.716 1.662c-1.97 0-3.373-1.714-3.373-4.46 0-3.514 1.773-4.777 3.52-4.777 2.508 0 3.306 1.625 3.997 3.714l.918 2.88c.918 2.8 2.642 5.047 7.615 5.047 3.563 0 5.98-1.094 5.98-3.972 0-2.326-1.327-3.53-3.797-4.11l-1.836-.41c-1.27-.29-1.645-.82-1.645-1.693 0-.987.778-1.56 2.047-1.56 1.384 0 2.132.52 2.245 1.756l2.878-.347C24.883 5.116 23.3 4 20.5 4c-3.26 0-4.945 1.537-4.945 3.824 0 1.843.91 3.008 3.2 3.562l1.947.46c1.404.327 1.97.874 1.97 1.894 0 1.13-.988 1.593-2.948 1.593-2.858 0-4.052-1.497-4.742-3.634l-.943-2.887C13.22 6.162 11.73 4 7.897 4 3.847 4 1 6.61 1 11.022c0 4.235 2.617 6.638 6.19 6.638 2.566 0 4.154-1.517 4.154-1.517z"/>
+    </svg>
+  );
+}
@@ -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>
+  );
+}
@@ -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>

@@ -1,9 +1,10 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import {
  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
-  Square, Repeat, Repeat1, Maximize2, SlidersHorizontal, X
+  Square, Repeat, Repeat1, Maximize2, SlidersHorizontal, X, Heart
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
+import { useAuthStore } from '../store/authStore';
 import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import CachedImage from './CachedImage';
 import WaveformSeek from './WaveformSeek';
@@ -26,7 +27,9 @@ export default function PlayerBar() {
    currentTrack, isPlaying, currentTime, volume,
    togglePlay, next, previous, setVolume,
    stop, toggleRepeat, repeatMode, toggleFullscreen,
+    lastfmLoved, toggleLastfmLove,
  } = usePlayerStore();
+  const { lastfmSessionKey } = useAuthStore();

  const duration = currentTrack?.duration ?? 0;
  const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
@@ -37,7 +40,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 (
@@ -86,6 +89,17 @@ export default function PlayerBar() {
            {currentTrack?.artist ?? '—'}
          </div>
        </div>
+        {currentTrack && lastfmSessionKey && (
+          <button
+            className="player-btn player-btn-sm player-love-btn"
+            onClick={toggleLastfmLove}
+            aria-label={lastfmLoved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
+            data-tooltip={lastfmLoved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
+            style={{ color: lastfmLoved ? '#e31c23' : 'var(--text-muted)', flexShrink: 0 }}
+          >
+            <Heart size={15} fill={lastfmLoved ? '#e31c23' : 'none'} />
+          </button>
+        )}
      </div>

      {/* Transport Controls */}
@@ -1,10 +1,11 @@
 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 } 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';

 function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -120,6 +121,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 +132,31 @@ 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 [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 +282,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,6 +320,13 @@ 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>
@@ -319,20 +345,78 @@ export default function QueuePanel() {
            {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>
      )}

+      <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}>
@@ -10,7 +10,7 @@ import {
 } from 'lucide-react';

 const PsysonicLogo = () => (
-  <img src="/logo-psysonic.png" alt="Psysonic Logo" width="36" height="36" style={{ borderRadius: '8px' }} />
+  <img src="/logo-psysonic.png" alt="Psysonic Logo" width="36" height="36" />
 );

 const navItems = [
@@ -38,7 +38,7 @@ function UpdateToast({ isCollapsed, latestVersion }: { isCollapsed: boolean; lat

  if (isCollapsed) {
    return (
-      <div className="update-toast-icon" style={{ marginTop: 'auto' }} title={`${t('sidebar.updateAvailable')}: ${latestVersion}`}>
+      <div className="update-toast-icon" style={{ marginTop: 'auto' }} data-tooltip={`${t('sidebar.updateAvailable')}: ${latestVersion}`} data-tooltip-pos="bottom">
        <ArrowUpCircle size={20} />
      </div>
    );
@@ -100,9 +100,10 @@ export default function Sidebar({
    <aside className={`sidebar animate-slide-in ${isCollapsed ? 'collapsed' : ''}`}>
      <div className="sidebar-brand">
        <button 
-          className="collapse-btn" 
-          onClick={toggleCollapse} 
-          title={isCollapsed ? t('sidebar.expand') : t('sidebar.collapse')}
+          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} />}
@@ -119,7 +120,8 @@ export default function Sidebar({
            to={item.to}
            end={item.to === '/'}
            className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-            title={isCollapsed ? t(item.labelKey) : undefined}
+            data-tooltip={isCollapsed ? t(item.labelKey) : undefined}
+            data-tooltip-pos="bottom"
          >
            <item.icon size={isCollapsed ? 22 : 18} />
            {!isCollapsed && <span>{t(item.labelKey)}</span>}
@@ -130,7 +132,8 @@ export default function Sidebar({
        <NavLink
          to="/now-playing"
          className={({ isActive }) => `nav-link nav-link-nowplaying ${isActive ? 'active' : ''}`}
-          title={isCollapsed ? t('sidebar.nowPlaying') : undefined}
+          data-tooltip={isCollapsed ? t('sidebar.nowPlaying') : undefined}
+          data-tooltip-pos="bottom"
          style={{ marginTop: 'auto' }}
        >
          <span className="nav-np-icon-wrap">
@@ -145,8 +148,8 @@ export default function Sidebar({
        <NavLink
          to="/statistics"
          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-          style={isCollapsed && !latestVersion ? { marginTop: 'auto' } : undefined}
-          title={isCollapsed ? t('sidebar.statistics') : undefined}
+          data-tooltip={isCollapsed ? t('sidebar.statistics') : undefined}
+          data-tooltip-pos="bottom"
        >
          <BarChart3 size={isCollapsed ? 22 : 18} />
          {!isCollapsed && <span>{t('sidebar.statistics')}</span>}
@@ -154,7 +157,8 @@ export default function Sidebar({
        <NavLink
          to="/help"
          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-          title={isCollapsed ? t('sidebar.help') : undefined}
+          data-tooltip={isCollapsed ? t('sidebar.help') : undefined}
+          data-tooltip-pos="bottom"
        >
          <HelpCircle size={isCollapsed ? 22 : 18} />
          {!isCollapsed && <span>{t('sidebar.help')}</span>}
@@ -162,7 +166,8 @@ export default function Sidebar({
        <NavLink
          to="/settings"
          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-          title={isCollapsed ? t('sidebar.settings') : undefined}
+          data-tooltip={isCollapsed ? t('sidebar.settings') : undefined}
+          data-tooltip-pos="bottom"
        >
          <Settings size={isCollapsed ? 22 : 18} />
          {!isCollapsed && <span>{t('sidebar.settings')}</span>}
@@ -0,0 +1,174 @@
+import { Check } from 'lucide-react';
+
+interface ThemeDef {
+  id: string;
+  label: string;
+  bg: string;
+  card: string;
+  accent: string;
+}
+
+const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
+  {
+    group: 'Psysonic Themes',
+    themes: [
+      { id: 'poison',              label: 'Poison',         bg: '#1f1f1f', card: '#282828', accent: '#1bd655' },
+      { id: 'nucleo',              label: 'Nucleo',         bg: '#f5e4c3', card: '#dfc08f', accent: '#7a5218' },
+      { id: 'psychowave',          label: 'Psychowave',     bg: '#161428', card: '#1f1c38', accent: '#a06ae0' },
+      { id: 'vintage-tube-radio',  label: 'Tube Radio',     bg: '#3E2723', card: '#1E110A', accent: '#FF6F00' },
+      { id: 'neon-drift',          label: 'Neon Drift',     bg: '#12132c', card: '#080916', accent: '#00f2ff' },
+    ],
+  },
+  {
+    group: 'Psysonic Themes — Mediaplayer',
+    themes: [
+      { id: 'wnamp',         label: 'WnAmp',        bg: '#2b2b3a', card: '#000000', accent: '#00ff00' },
+      { id: 'navy-jukebox',  label: 'Navy Jukebox', bg: '#d4d8db', card: '#001358', accent: '#0070a0' },
+      { id: 'cobalt-media',  label: 'Cobalt Media', bg: '#3a62a5', card: '#000000', accent: '#45ff00' },
+      { id: 'onyx-cinema',   label: 'Onyx Cinema',  bg: '#141414', card: '#000000', accent: '#00aaff' },
+    ],
+  },
+  {
+    group: 'Betriebssysteme',
+    themes: [
+      { id: 'cupertino-light', label: 'Cupertino Light', bg: '#ffffff', card: '#f2f2f7', accent: '#0071e3' },
+      { id: 'cupertino-dark',  label: 'Cupertino Dark',  bg: '#1e1e1f', card: '#2d2d2f', accent: '#007aff' },
+      { id: 'aero-glass',      label: 'Aero Glass',      bg: '#cddbed', card: '#1d4268', accent: '#1878e8' },
+      { id: 'luna-teal',       label: 'Luna Teal',        bg: '#ece9d8', card: '#0055e5', accent: '#3c9d29' },
+    ],
+  },
+  {
+    group: 'Catppuccin',
+    themes: [
+      { id: 'mocha',     label: 'Mocha',     bg: '#1e1e2e', card: '#313244', accent: '#cba6f7' },
+      { id: 'macchiato', label: 'Macchiato', bg: '#24273a', card: '#363a4f', accent: '#c6a0f6' },
+      { id: 'frappe',    label: 'Frappé',    bg: '#303446', card: '#414559', accent: '#ca9ee6' },
+      { id: 'latte',     label: 'Latte',     bg: '#eff1f5', card: '#ccd0da', accent: '#8839ef' },
+    ],
+  },
+  {
+    group: 'Nord',
+    themes: [
+      { id: 'nord',           label: 'Polar Night', bg: '#3b4252', card: '#434c5e', accent: '#88c0d0' },
+      { id: 'nord-snowstorm', label: 'Snowstorm',   bg: '#e5e9f0', card: '#eceff4', accent: '#5e81ac' },
+      { id: 'nord-frost',     label: 'Frost',       bg: '#1e2d3d', card: '#243447', accent: '#88c0d0' },
+      { id: 'nord-aurora',    label: 'Aurora',      bg: '#3b4252', card: '#434c5e', accent: '#b48ead' },
+    ],
+  },
+  {
+    group: 'Retro',
+    themes: [
+      { 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: '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' },
+    ],
+  },
+  {
+    group: 'Tokyo Night',
+    themes: [
+      { id: 'tokyo-night',       label: 'Standard', bg: '#1a1b26', card: '#24283b', accent: '#7aa2f7' },
+      { id: 'tokyo-night-storm', label: 'Storm',    bg: '#24283b', card: '#2f334d', accent: '#7aa2f7' },
+      { id: 'tokyo-night-light', label: 'Light',    bg: '#d5d6db', card: '#e9e9ec', accent: '#34548a' },
+    ],
+  },
+];
+
+interface Props {
+  value: string;
+  onChange: (id: string) => void;
+}
+
+export default function ThemePicker({ value, onChange }: Props) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      {THEME_GROUPS.map(({ group, themes }) => (
+        <div key={group}>
+          <div style={{
+            fontSize: '11px',
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.08em',
+            color: 'var(--text-muted)',
+            marginBottom: '10px',
+          }}>
+            {group}
+          </div>
+          <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',
+                  }}>
+                    {/* main bg */}
+                    <div style={{ background: t.bg, height: '55%' }} />
+                    {/* card tone */}
+                    <div style={{ background: t.card, height: '20%' }} />
+                    {/* accent bar */}
+                    <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>
+  );
+}
@@ -0,0 +1,94 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface TooltipState {
+  text: string;
+  anchorRect: DOMRect;
+  preferBottom: boolean;
+  wrap: boolean;
+}
+
+export default function TooltipPortal() {
+  const [tooltip, setTooltip] = useState<TooltipState | null>(null);
+  const boxRef = useRef<HTMLDivElement>(null);
+  const [style, setStyle] = useState<React.CSSProperties>({ opacity: 0 });
+
+  useEffect(() => {
+    const onOver = (e: MouseEvent) => {
+      const target = (e.target as HTMLElement).closest('[data-tooltip]') as HTMLElement | null;
+      if (!target) return;
+      const text = target.getAttribute('data-tooltip');
+      if (!text) return;
+      setTooltip({
+        text,
+        anchorRect: target.getBoundingClientRect(),
+        preferBottom: target.getAttribute('data-tooltip-pos') === 'bottom',
+        wrap: target.hasAttribute('data-tooltip-wrap'),
+      });
+    };
+    const onOut = (e: MouseEvent) => {
+      const target = (e.target as HTMLElement).closest('[data-tooltip]');
+      if (target) setTooltip(null);
+    };
+    document.addEventListener('mouseover', onOver);
+    document.addEventListener('mouseout', onOut);
+    return () => {
+      document.removeEventListener('mouseover', onOver);
+      document.removeEventListener('mouseout', onOut);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!tooltip || !boxRef.current) { setStyle({ opacity: 0 }); return; }
+
+    const box = boxRef.current.getBoundingClientRect();
+    const { anchorRect, preferBottom } = tooltip;
+    const GAP = 7;
+    const MARGIN = 8;
+
+    // Decide top or bottom
+    const spaceAbove = anchorRect.top - GAP - box.height;
+    const useBottom = preferBottom || spaceAbove < MARGIN;
+
+    let top = useBottom
+      ? anchorRect.bottom + GAP
+      : anchorRect.top - GAP - box.height;
+
+    // Clamp vertically
+    top = Math.max(MARGIN, Math.min(top, window.innerHeight - box.height - MARGIN));
+
+    // Centre horizontally, clamp to viewport
+    let left = anchorRect.left + anchorRect.width / 2 - box.width / 2;
+    left = Math.max(MARGIN, Math.min(left, window.innerWidth - box.width - MARGIN));
+
+    setStyle({ opacity: 1, top, left });
+  }, [tooltip]);
+
+  if (!tooltip) return null;
+
+  return createPortal(
+    <div
+      ref={boxRef}
+      style={{
+        position: 'fixed',
+        zIndex: 99999,
+        background: 'var(--bg-card)',
+        color: 'var(--text-primary)',
+        border: '1px solid var(--border-subtle)',
+        borderRadius: 'var(--radius-sm)',
+        padding: '4px 8px',
+        fontSize: '12px',
+        fontWeight: 500,
+        boxShadow: '0 4px 12px rgba(0,0,0,0.6)',
+        pointerEvents: 'none',
+        whiteSpace: tooltip.wrap ? 'pre-line' : 'nowrap',
+        maxWidth: tooltip.wrap ? '220px' : undefined,
+        transition: 'opacity 0.15s ease',
+        ...style,
+      }}
+    >
+      {tooltip.text}
+    </div>,
+    document.body
+  );
+}
@@ -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;
@@ -3,10 +3,13 @@ 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';
 import { useTranslation } from 'react-i18next';
+import { lastfmGetSimilarArtists, lastfmIsConfigured } from '../api/lastfm';
+import LastfmIcon from '../components/LastfmIcon';

 function formatDuration(seconds: number): string {
  const m = Math.floor(seconds / 60);
@@ -31,13 +34,6 @@ function sanitizeHtml(html: string): string {
  return doc.body.innerHTML;
 }

-function LastfmIcon({ size = 16 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-      <path d="M11.344 16.143l-.917-2.494s-1.485 1.662-3.716 1.662c-1.97 0-3.373-1.714-3.373-4.46 0-3.514 1.773-4.777 3.52-4.777 2.508 0 3.306 1.625 3.997 3.714l.918 2.88c.918 2.8 2.642 5.047 7.615 5.047 3.563 0 5.98-1.094 5.98-3.972 0-2.326-1.327-3.53-3.797-4.11l-1.836-.41c-1.27-.29-1.645-.82-1.645-1.693 0-.987.778-1.56 2.047-1.56 1.384 0 2.132.52 2.245 1.756l2.878-.347C24.883 5.116 23.3 4 20.5 4c-3.26 0-4.945 1.537-4.945 3.824 0 1.843.91 3.008 3.2 3.562l1.947.46c1.404.327 1.97.874 1.97 1.894 0 1.13-.988 1.593-2.948 1.593-2.858 0-4.052-1.497-4.742-3.634l-.943-2.887C13.22 6.162 11.73 4 7.897 4 3.847 4 1 6.61 1 11.022c0 4.235 2.617 6.638 6.19 6.638 2.566 0 4.154-1.517 4.154-1.517z"/>
-    </svg>
-  );
-}

 export default function ArtistDetail() {
  const { t } = useTranslation();
@@ -52,6 +48,10 @@ export default function ArtistDetail() {
  const [radioLoading, setRadioLoading] = useState(false);
  const [isStarred, setIsStarred] = useState(false);
  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);
@@ -61,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);
@@ -107,6 +80,67 @@ 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([]);
+    setSimilarLoading(true);
+    lastfmGetSimilarArtists(artist.name).then(async names => {
+      if (names.length === 0) { setSimilarLoading(false); return; }
+      const results = await Promise.all(
+        names.slice(0, 30).map(name =>
+          search(name, { artistCount: 3, albumCount: 0, songCount: 0 }).catch(() => ({ artists: [], albums: [], songs: [] }))
+        )
+      );
+      const seen = new Set<string>([artist.id]);
+      const found: SubsonicArtist[] = [];
+      for (let i = 0; i < results.length; i++) {
+        const targetName = names[i].toLowerCase();
+        const match = results[i].artists.find(a => a.name.toLowerCase() === targetName);
+        if (match && !seen.has(match.id)) {
+          seen.add(match.id);
+          found.push(match);
+        }
+      }
+      setSimilarArtists(found);
+      setSimilarLoading(false);
+    }).catch(() => setSimilarLoading(false));
+  }, [artist?.id]);
+
  const openLink = (url: string, key: string) => {
    open(url);
    setOpenedLink(key);
@@ -190,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)" />
          )}
@@ -325,8 +373,35 @@ export default function ArtistDetail() {
        </>
      )}

+      {/* Similar Artists (Last.fm) */}
+      {lastfmIsConfigured() && (similarLoading || similarArtists.length > 0) && (
+        <>
+          <h2 className="section-title" style={{ marginTop: '2rem', marginBottom: '1rem' }}>
+            {t('artistDetail.similarArtists')}
+          </h2>
+          {similarLoading ? (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', color: 'var(--text-muted)', fontSize: '0.875rem' }}>
+              <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} />
+              {t('artistDetail.loading')}
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+              {similarArtists.map(a => (
+                <button
+                  key={a.id}
+                  className="artist-ext-link"
+                  onClick={() => navigate(`/artist/${a.id}`)}
+                >
+                  {a.name}
+                </button>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
      {/* Albums */}
-      <h2 className="section-title" style={{ marginTop: (info?.biography || topSongs.length > 0) ? '2rem' : '0', marginBottom: '1rem' }}>
+      <h2 className="section-title" style={{ marginTop: (info?.biography || topSongs.length > 0 || lastfmIsConfigured()) ? '2rem' : '0', marginBottom: '1rem' }}>
        {t('artistDetail.albumsBy', { name: artist.name })}
      </h2>

@@ -339,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>
@@ -45,6 +45,7 @@ export default function Help() {
        { 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') },
      ],
    },
    {
@@ -100,7 +101,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,14 +1,12 @@
 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 } from 'lucide-react';
+import { usePlayerStore } from '../store/playerStore';
 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 +18,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 +39,104 @@ 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 {
+  genre?: string;
+  year?: number;
+  similarArtists: Array<{ id: string; name: string }>;
+  onArtistClick: (id: string) => void;
+}
+
+function TagCloud({ genre, year, similarArtists, onArtistClick }: TagCloudProps) {
+  const { t } = useTranslation();
+  const hasTags = genre || year || similarArtists.length > 0;
+  if (!hasTags) return null;
+
+  return (
+    <div className="np-tag-cloud">
+      {genre && <span className="np-tag np-tag-accent">{genre}</span>}
+      {year && <span className="np-tag">{year}</span>}
+      {similarArtists.slice(0, 6).map(a => (
+        <span
+          key={a.id}
+          className="np-tag np-tag-clickable"
+          onClick={() => onArtistClick(a.id)}
+          data-tooltip={t('nowPlaying.goToArtist')}
+        >
+          {a.name}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+// ─── Blurred background ───────────────────────────────────────────────────────

 const NpBg = memo(function NpBg({ url }: { url: string }) {
  const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
@@ -65,106 +156,23 @@ 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 }}
        />
      ))}
-      <div className="np-orb np-orb-1" />
-      <div className="np-orb np-orb-2" />
-      <div className="np-orb np-orb-3" />
      <div className="np-bg-overlay" />
    </div>
  );
 });

-// ─── Modals (reused from QueuePanel) ──────────────────────────────────────────
-
-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>
-  );
-}
-
-function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void; onLoad: (id: string) => void }) {
-  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(); }
-  };
-
-  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>
-          )}
-      </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 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 currentTrack    = usePlayerStore(s => s.currentTrack);
+  const isPlaying       = usePlayerStore(s => s.isPlaying);
  const setQueueVisible = usePlayerStore(s => s.setQueueVisible);

  // Hide queue panel while on this page, restore on leave
@@ -174,279 +182,179 @@ export default function NowPlaying() {
    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; }
-        }
-      }
-      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);
-    }
-  };
-
-  // 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" />
-                )}
-                {resolvedCover
-                  ? <img src={resolvedCover} alt="" className="np-cover" />
-                  : <div className="np-cover np-cover-fallback"><Music size={64} /></div>
-                }
-              </div>
+      <div className="np-main">
+        {currentTrack ? (
+          <>
+            {/* ── Hero Card ── */}
+            <div className="np-hero-card">

-              {/* Meta */}
-              <div className="np-info">
-                <div className="np-title">{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></>}
+              {/* Left: cover + meta info */}
+              <div className="np-hero-left">
+                <div className="np-hero-cover-wrap">
+                  {resolvedCover && <img src={resolvedCover} alt="" className="np-cover-glow" aria-hidden />}
+                  {resolvedCover
+                    ? <img src={resolvedCover} alt="" className="np-cover" />
+                    : <div className="np-cover np-cover-fallback"><Music size={52} /></div>
+                  }
                </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"
-                    title={starred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
-                  >
-                    <Star size={18} fill={starred ? 'var(--ctp-yellow)' : 'none'} color={starred ? 'var(--ctp-yellow)' : 'white'} />
-                  </button>
+                <div className="np-hero-info">
+                  <div className="np-title">{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>
+                  </div>
                </div>
              </div>
-            </>
-          ) : (
-            <div className="np-empty-state">
-              <Music size={48} style={{ opacity: 0.3 }} />
-              <p>{t('nowPlaying.nothingPlaying')}</p>
+
+              {/* Center: EQ bars */}
+              <EQBars isPlaying={isPlaying} />
+
+              {/* Right: tag cloud */}
+              <TagCloud
+                genre={songMeta?.genre}
+                year={currentTrack.year}
+                similarArtists={similarArtists}
+                onArtistClick={id => navigate(`/artist/${id}`)}
+              />
+
            </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" title={t('queue.shuffle')} disabled={queue.length < 2}>
-              <Shuffle size={15} />
-            </button>
-            <button onClick={() => setSaveModalOpen(true)} className="np-action-btn" title={t('queue.save')} disabled={queue.length === 0}>
-              <Save size={15} />
-            </button>
-            <button onClick={() => setLoadModalOpen(true)} className="np-action-btn" title={t('queue.load')}>
-              <FolderOpen size={15} />
-            </button>
-            <button onClick={clearQueue} className="np-action-btn" title={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); }}
-                    title={t('queue.remove')}
-                  ><X size={13} /></button>
+            {/* ── From this Album ── */}
+            {albumTracks.length > 0 && (
+              <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)' }}>{currentTrack.album}</em></h3>
+                  {currentTrack.albumId && (
+                    <button className="np-card-link" onClick={() => navigate(`/album/${currentTrack.albumId}`)}>
+                      {t('nowPlaying.viewAlbum')} <ExternalLink size={12} />
+                    </button>
+                  )}
                </div>
-              );
-            })
-          )}
-        </div>
+                <div className="np-album-tracklist">
+                  {albumTracks.map(track => {
+                    const isActive = track.id === currentTrack.id;
+                    return (
+                      <div key={track.id}
+                        className={`np-album-track${isActive ? ' active' : ''}`}
+                        onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.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>
+            )}
+          </>
+        ) : (
+          <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>
  );
 }
@@ -1,14 +1,20 @@
-import React, { useState, useMemo } from 'react';
+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, 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 { pingWithCredentials } from '../api/subsonic';
 import { open as openDialog } from '@tauri-apps/plugin-dialog';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +22,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();
@@ -79,13 +85,68 @@ 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 [listeningFor, setListeningFor] = useState<KeyAction | 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 ?? 'playback');
  const [connStatus, setConnStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({});
  const [showAddForm, setShowAddForm] = useState(false);
  const [newGenre, setNewGenre] = useState('');
+  const [lfmState, setLfmState] = useState<'idle' | 'waiting' | 'error'>('idle');
+  const [lfmPendingToken, setLfmPendingToken] = useState<string | null>(null);
+  const [lfmError, setLfmError] = useState<string | null>(null);
+  const [lfmUserInfo, setLfmUserInfo] = useState<LastfmUserInfo | null>(null);
+
+  useEffect(() => {
+    if (!auth.lastfmSessionKey || !auth.lastfmUsername) { setLfmUserInfo(null); return; }
+    lastfmGetUserInfo(auth.lastfmUsername, auth.lastfmSessionKey).then(setLfmUserInfo).catch(() => {});
+  }, [auth.lastfmSessionKey, auth.lastfmUsername]);
+
+  const startLastfmConnect = useCallback(async () => {
+    setLfmError(null);
+    let token: string;
+    try {
+      token = await lastfmGetToken();
+      setLfmPendingToken(token);
+      setLfmState('waiting');
+      await openUrl(lastfmAuthUrl(token));
+    } catch (e: any) {
+      setLfmError(e.message ?? 'Unknown error');
+      setLfmState('error');
+      return;
+    }
+
+    // Poll every 2 s until the user authorises or we time out (2 min)
+    const deadline = Date.now() + 120_000;
+    const poll = async () => {
+      if (Date.now() > deadline) {
+        setLfmState('error');
+        setLfmError('Timed out — please try again.');
+        setLfmPendingToken(null);
+        return;
+      }
+      try {
+        const { key, name } = await lastfmGetSession(token);
+        auth.connectLastfm(key, name);
+        setLfmState('idle');
+        setLfmPendingToken(null);
+      } catch (e: any) {
+        // Error 14 = not yet authorised, keep polling
+        if (e.message?.includes('14')) {
+          setTimeout(poll, 2000);
+        } else {
+          setLfmState('error');
+          setLfmError(e.message ?? 'Unknown error');
+          setLfmPendingToken(null);
+        }
+      }
+    };
+    setTimeout(poll, 2000);
+  }, [auth]);

  const testConnection = async (server: ServerProfile) => {
    setConnStatus(s => ({ ...s, [server.id]: 'testing' }));
@@ -154,6 +215,7 @@ export default function Settings() {
    { 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: 'shortcuts',   label: t('settings.tabShortcuts'),   icon: <Keyboard size={15} /> },
    { id: 'server',      label: t('settings.tabServer'),      icon: <Server size={15} /> },
    { id: 'about',       label: t('settings.tabAbout'),       icon: <Info size={15} /> },
  ];
@@ -233,7 +295,12 @@ export default function Settings() {
              {/* Crossfade */}
              <div className="settings-toggle-row">
                <div>
-                  <div style={{ fontWeight: 500 }}>{t('settings.crossfade')}</div>
+                  <div style={{ fontWeight: 500, display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    {t('settings.crossfade')}
+                    <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' }}>
+                      {t('settings.experimental')}
+                    </span>
+                  </div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.crossfadeDesc')}</div>
                </div>
                <label className="toggle-switch" aria-label={t('settings.crossfade')}>
@@ -264,7 +331,12 @@ export default function Settings() {
              {/* Gapless */}
              <div className="settings-toggle-row">
                <div>
-                  <div style={{ fontWeight: 500 }}>{t('settings.gapless')}</div>
+                  <div style={{ fontWeight: 500, display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    {t('settings.gapless')}
+                    <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' }}>
+                      {t('settings.experimental')}
+                    </span>
+                  </div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.gaplessDesc')}</div>
                </div>
                <label className="toggle-switch" aria-label={t('settings.gapless')}>
@@ -275,33 +347,6 @@ export default function Settings() {
            </div>
          </section>

-          {/* Scrobbling */}
-          <section className="settings-section">
-            <div className="settings-section-header">
-              <Music2 size={18} />
-              <h2>{t('settings.lfmTitle')}</h2>
-            </div>
-            <div className="settings-card">
-              <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: '1rem', lineHeight: 1.5 }}>
-                <p style={{ marginBottom: '0.5rem' }}>
-                  {t('settings.lfmDesc1')}{' '}
-                  <strong>{t('settings.lfmDesc1NavidromeWebplayer')}</strong>
-                  {' '}{t('settings.lfmDesc1b')}
-                </p>
-                <p>{t('settings.lfmDesc2')}</p>
-              </div>
-              <div className="settings-toggle-row" style={{ marginTop: '1rem' }}>
-                <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>
-          </section>
        </>
      )}

@@ -429,23 +474,7 @@ export default function Settings() {
              <h2>{t('settings.theme')}</h2>
            </div>
            <div className="settings-card">
-              <div className="form-group" style={{ maxWidth: '300px' }}>
-                <select
-                  className="input"
-                  value={theme.theme}
-                  onChange={(e) => theme.setTheme(e.target.value as any)}
-                  aria-label={t('settings.theme')}
-                >
-                  <option value="mocha">Catppuccin Mocha</option>
-                  <option value="macchiato">Catppuccin Macchiato</option>
-                  <option value="frappe">Catppuccin Frappé</option>
-                  <option value="latte">Catppuccin Latte</option>
-                  <option value="nord">Nord · Polar Night</option>
-                  <option value="nord-snowstorm">Nord · Snowstorm</option>
-                  <option value="nord-frost">Nord · Frost</option>
-                  <option value="nord-aurora">Nord · Aurora</option>
-                </select>
-              </div>
+              <ThemePicker value={theme.theme} onChange={v => theme.setTheme(v as any)} />
            </div>
          </section>

@@ -456,21 +485,152 @@ export default function Settings() {
            </div>
            <div className="settings-card">
              <div className="form-group" style={{ maxWidth: '300px' }}>
-                <select
-                  className="input"
+                <CustomSelect
                  value={i18n.language}
-                  onChange={(e) => i18n.changeLanguage(e.target.value)}
-                  aria-label={t('settings.language')}
-                >
-                  <option value="en">{t('settings.languageEn')}</option>
-                  <option value="de">{t('settings.languageDe')}</option>
-                </select>
+                  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">
+              <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);
+                        }}
+                        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>
+      )}
+
      {/* ── Server ───────────────────────────────────────────────────────────── */}
      {activeTab === 'server' && (
        <>
@@ -553,6 +713,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">
@@ -1,34 +1,88 @@
 import React, { useEffect, useState } from 'react';
-import { getAlbumList, getArtists, getGenres, SubsonicAlbum, SubsonicGenre } from '../api/subsonic';
+import { getAlbumList, getArtists, getGenres, SubsonicAlbum } from '../api/subsonic';
 import AlbumRow from '../components/AlbumRow';
 import { useTranslation } from 'react-i18next';
+import { useAuthStore } from '../store/authStore';
+import { lastfmIsConfigured, lastfmGetTopArtists, lastfmGetTopAlbums, lastfmGetTopTracks, lastfmGetRecentTracks, LastfmPeriod, LastfmTopArtist, LastfmTopAlbum, LastfmTopTrack, LastfmRecentTrack } from '../api/lastfm';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function relativeTime(timestamp: number, t: (key: string, opts?: any) => string): string {
+  const diff = Math.floor(Date.now() / 1000) - timestamp;
+  if (diff < 60) return t('statistics.lfmJustNow');
+  if (diff < 3600) return t('statistics.lfmMinutesAgo', { n: Math.floor(diff / 60) });
+  if (diff < 86400) return t('statistics.lfmHoursAgo', { n: Math.floor(diff / 3600) });
+  return t('statistics.lfmDaysAgo', { n: Math.floor(diff / 86400) });
+}
+
+const PERIODS: { key: LastfmPeriod; label: string }[] = [
+  { key: '7day', label: 'lfmPeriod7day' },
+  { key: '1month', label: 'lfmPeriod1month' },
+  { key: '3month', label: 'lfmPeriod3month' },
+  { key: '6month', label: 'lfmPeriod6month' },
+  { key: '12month', label: 'lfmPeriod12month' },
+  { key: 'overall', label: 'lfmPeriodOverall' },
+];

 export default function Statistics() {
  const { t } = useTranslation();
+  const { lastfmSessionKey, lastfmUsername } = useAuthStore();
  const [recent, setRecent] = useState<SubsonicAlbum[]>([]);
  const [frequent, setFrequent] = useState<SubsonicAlbum[]>([]);
  const [highest, setHighest] = useState<SubsonicAlbum[]>([]);
-  const [genres, setGenres] = useState<SubsonicGenre[]>([]);
  const [artistCount, setArtistCount] = useState<number | null>(null);
+  const [totalSongs, setTotalSongs] = useState<number | null>(null);
+  const [totalAlbums, setTotalAlbums] = useState<number | null>(null);
  const [loading, setLoading] = useState(true);

+  const [lfmPeriod, setLfmPeriod] = useState<LastfmPeriod>('1month');
+  const [lfmTopArtists, setLfmTopArtists] = useState<LastfmTopArtist[]>([]);
+  const [lfmTopAlbums, setLfmTopAlbums] = useState<LastfmTopAlbum[]>([]);
+  const [lfmTopTracks, setLfmTopTracks] = useState<LastfmTopTrack[]>([]);
+  const [lfmLoading, setLfmLoading] = useState(false);
+  const [lfmRecentTracks, setLfmRecentTracks] = useState<LastfmRecentTrack[]>([]);
+  const [lfmRecentLoading, setLfmRecentLoading] = useState(false);
+
  useEffect(() => {
    Promise.all([
      getAlbumList('recent', 20).catch(() => []),
      getAlbumList('frequent', 12).catch(() => []),
      getAlbumList('highest', 12).catch(() => []),
-      getGenres().catch(() => []),
      getArtists().catch(() => []),
-    ]).then(([rc, fr, hi, g, a]) => {
+      getGenres().catch(() => []),
+    ]).then(([rc, fr, hi, a, g]) => {
      setRecent(rc);
      setFrequent(fr);
      setHighest(hi);
-      setGenres(g.sort((a, b) => b.songCount - a.songCount).slice(0, 20));
      setArtistCount(a.length);
+      setTotalSongs(g.reduce((acc: number, genre: any) => acc + genre.songCount, 0));
+      setTotalAlbums(g.reduce((acc: number, genre: any) => acc + genre.albumCount, 0));
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);

+  useEffect(() => {
+    if (!lastfmIsConfigured() || !lastfmSessionKey || !lastfmUsername) return;
+    setLfmRecentLoading(true);
+    lastfmGetRecentTracks(lastfmUsername, lastfmSessionKey, 20)
+      .then(tracks => { setLfmRecentTracks(tracks); setLfmRecentLoading(false); })
+      .catch(() => setLfmRecentLoading(false));
+  }, [lastfmSessionKey, lastfmUsername]);
+
+  useEffect(() => {
+    if (!lastfmIsConfigured() || !lastfmSessionKey || !lastfmUsername) return;
+    setLfmLoading(true);
+    Promise.all([
+      lastfmGetTopArtists(lastfmUsername, lastfmSessionKey, lfmPeriod, 10),
+      lastfmGetTopAlbums(lastfmUsername, lastfmSessionKey, lfmPeriod, 10),
+      lastfmGetTopTracks(lastfmUsername, lastfmSessionKey, lfmPeriod, 10),
+    ]).then(([artists, albums, tracks]) => {
+      setLfmTopArtists(artists);
+      setLfmTopAlbums(albums);
+      setLfmTopTracks(tracks);
+      setLfmLoading(false);
+    }).catch(() => setLfmLoading(false));
+  }, [lfmPeriod, lastfmSessionKey, lastfmUsername]);
+
  const loadMore = async (
    type: 'frequent' | 'highest',
    currentList: SubsonicAlbum[],
@@ -43,15 +97,10 @@ export default function Statistics() {
    }
  };

-  const totalSongs = genres.reduce((acc, g) => acc + g.songCount, 0);
-  const totalAlbums = genres.reduce((acc, g) => acc + g.albumCount, 0);
-  const maxGenreCount = Math.max(...genres.map(g => g.songCount), 1);
-
  const stats = [
    { label: t('statistics.statArtists'), value: artistCount },
-    { label: t('statistics.statAlbums'), value: totalAlbums || null },
-    { label: t('statistics.statSongs'), value: totalSongs || null },
-    { label: t('statistics.statGenres'), value: genres.length || null },
+    { label: t('statistics.statAlbums'), value: totalAlbums },
+    { label: t('statistics.statSongs'), value: totalSongs },
  ];

  return (
@@ -90,29 +139,105 @@ export default function Statistics() {
            moreText={t('statistics.loadMore')}
          />

-          {genres.length > 0 && (
-            <section>
-              <h2 className="section-title">{t('statistics.genreDistribution')}</h2>
-              <div className="genre-chart">
-                {genres.map(genre => (
-                  <div key={genre.value} className="genre-row">
-                    <div className="genre-row-header">
-                      <span className="genre-name">{genre.value}</span>
-                      <span className="genre-counts">
-                        {t('statistics.genreSongs', { count: genre.songCount })}
-                        {' · '}
-                        {t('statistics.genreAlbums', { count: genre.albumCount })}
+          {/* Last.fm Stats */}
+          {lastfmIsConfigured() && (
+            <section style={{ marginTop: '2rem' }}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.75rem', marginBottom: '1rem' }}>
+                <h2 className="section-title" style={{ margin: 0 }}>{t('statistics.lfmTitle')}</h2>
+                {lastfmSessionKey && (
+                  <div style={{ display: 'flex', gap: '0.375rem', flexWrap: 'wrap' }}>
+                    {PERIODS.map(p => (
+                      <button
+                        key={p.key}
+                        className={`btn btn-sm ${lfmPeriod === p.key ? 'btn-primary' : 'btn-surface'}`}
+                        onClick={() => setLfmPeriod(p.key)}
+                        style={{ padding: '0.25rem 0.625rem', fontSize: '0.75rem' }}
+                      >
+                        {t(`statistics.${p.label}`)}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {!lastfmSessionKey ? (
+                <p style={{ color: 'var(--text-muted)', fontSize: '0.875rem' }}>{t('statistics.lfmNotConnected')}</p>
+              ) : lfmLoading ? (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', color: 'var(--text-muted)', fontSize: '0.875rem', padding: '1rem 0' }}>
+                  <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} />
+                </div>
+              ) : (
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '1rem' }}>
+                  {([
+                    { label: t('statistics.lfmTopArtists'), items: lfmTopArtists.map(a => ({ primary: a.name, secondary: null, playcount: a.playcount })) },
+                    { label: t('statistics.lfmTopAlbums'),  items: lfmTopAlbums.map(a =>  ({ primary: a.name, secondary: a.artist, playcount: a.playcount })) },
+                    { label: t('statistics.lfmTopTracks'),  items: lfmTopTracks.map(tr => ({ primary: tr.name, secondary: tr.artist, playcount: tr.playcount })) },
+                  ] as { label: string; items: { primary: string; secondary: string | null; playcount: string }[] }[]).map(col => {
+                    const max = Math.max(...col.items.map(it => Number(it.playcount)), 1);
+                    return (
+                      <div key={col.label} style={{ background: 'var(--glass-bg)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1.25rem', backdropFilter: 'blur(8px)' }}>
+                        <h3 style={{ fontSize: '0.7rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--accent)', marginBottom: '1rem' }}>
+                          {col.label}
+                        </h3>
+                        <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.875rem' }}>
+                          {col.items.map((it, i) => (
+                            <li key={`${it.primary}-${i}`}>
+                              <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.625rem', marginBottom: '0.25rem' }}>
+                                <span style={{ fontSize: '1.1rem', fontWeight: 800, color: i === 0 ? 'var(--accent)' : 'var(--text-muted)', opacity: i === 0 ? 1 : 0.5, lineHeight: 1, flexShrink: 0, width: '1.5rem' }}>
+                                  {i + 1}
+                                </span>
+                                <div style={{ flex: 1, minWidth: 0 }}>
+                                  <div style={{ fontSize: '0.875rem', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.primary}</div>
+                                  {it.secondary && (
+                                    <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.secondary}</div>
+                                  )}
+                                </div>
+                                <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)', flexShrink: 0 }}>{Number(it.playcount).toLocaleString()}</span>
+                              </div>
+                              <div style={{ height: '2px', borderRadius: '1px', background: 'var(--glass-border)', overflow: 'hidden', marginLeft: '2.125rem' }}>
+                                <div style={{ height: '100%', width: `${(Number(it.playcount) / max) * 100}%`, background: i === 0 ? 'var(--accent)' : 'var(--text-muted)', opacity: i === 0 ? 0.8 : 0.3, borderRadius: '1px', transition: 'width 0.4s ease' }} />
+                              </div>
+                            </li>
+                          ))}
+                        </ol>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </section>
+          )}
+
+          {/* Recent Scrobbles */}
+          {lastfmIsConfigured() && lastfmSessionKey && (
+            <section style={{ marginTop: '2rem' }}>
+              <h2 className="section-title" style={{ marginBottom: '1rem' }}>{t('statistics.lfmRecentTracks')}</h2>
+              {lfmRecentLoading ? (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', color: 'var(--text-muted)', fontSize: '0.875rem' }}>
+                  <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} />
+                </div>
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
+                  {lfmRecentTracks.map((track, i) => (
+                    <div key={`${track.name}-${i}`} style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '0.5rem 0.75rem', borderRadius: '8px', background: track.nowPlaying ? 'color-mix(in srgb, var(--accent) 8%, transparent)' : 'transparent', border: track.nowPlaying ? '1px solid color-mix(in srgb, var(--accent) 20%, transparent)' : '1px solid transparent' }}>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <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>
+                          )}
+                        </div>
+                        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                          {track.artist}{track.album ? ` · ${track.album}` : ''}
+                        </div>
+                      </div>
+                      <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)', flexShrink: 0 }}>
+                        {track.nowPlaying ? '' : track.timestamp ? relativeTime(track.timestamp, t) : ''}
                      </span>
                    </div>
-                    <div className="genre-bar-track">
-                      <div
-                        className="genre-bar-fill"
-                        style={{ width: `${(genre.songCount / maxGenreCount) * 100}%` }}
-                      />
-                    </div>
-                  </div>
-                ))}
-              </div>
+                  ))}
+                </div>
+              )}
            </section>
          )}

@@ -37,6 +37,7 @@ interface AuthState {
  isLoggedIn: boolean;
  isConnecting: boolean;
  connectionError: string | null;
+  lastfmSessionError: boolean;

  // Actions
  addServer: (profile: Omit<ServerProfile, 'id'>) => string;
@@ -47,6 +48,9 @@ interface AuthState {
  setConnecting: (v: boolean) => void;
  setConnectionError: (e: string | null) => void;
  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;
@@ -92,6 +96,7 @@ export const useAuthStore = create<AuthState>()(
      isLoggedIn: false,
      isConnecting: false,
      connectionError: null,
+      lastfmSessionError: false,

      addServer: (profile) => {
        const id = generateId();
@@ -126,6 +131,14 @@ export const useAuthStore = create<AuthState>()(
      setLastfm: (apiKey, apiSecret, sessionKey, username) =>
        set({ lastfmApiKey: apiKey, lastfmApiSecret: apiSecret, lastfmSessionKey: sessionKey, lastfmUsername: username }),

+      connectLastfm: (sessionKey, username) =>
+        set({ lastfmSessionKey: sessionKey, lastfmUsername: username }),
+
+      disconnectLastfm: () =>
+        set({ lastfmSessionKey: '', lastfmUsername: '', lastfmSessionError: false }),
+
+      setLastfmSessionError: (v) => set({ lastfmSessionError: v }),
+
      setMinimizeToTray: (v) => set({ minimizeToTray: v }),
      setScrobblingEnabled: (v) => set({ scrobblingEnabled: v }),
      setMaxCacheMb: (v) => set({ maxCacheMb: 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: 'inter',
+      setFont: (font) => set({ font }),
+    }),
+    { name: 'psysonic_font' }
+  )
+);
@@ -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;
+}
@@ -2,7 +2,8 @@ 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, SubsonicSong, reportNowPlaying, scrobbleSong } from '../api/subsonic';
+import { buildStreamUrl, getPlayQueue, savePlayQueue, reportNowPlaying, SubsonicSong } from '../api/subsonic';
+import { lastfmScrobble, lastfmUpdateNowPlaying, lastfmLoveTrack, lastfmUnloveTrack, lastfmGetTrackLoved, lastfmGetAllLovedTracks } from '../api/lastfm';
 import { useAuthStore } from './authStore';

 export interface Track {
@@ -55,6 +56,8 @@ interface PlayerState {
  currentTime: number;
  volume: number;
  scrobbled: boolean;
+  lastfmLoved: boolean;
+  lastfmLovedCache: Record<string, boolean>;

  playTrack: (track: Track, queue?: Track[]) => void;
  pause: () => void;
@@ -83,6 +86,11 @@ interface PlayerState {
  removeTrack: (index: number) => void;
  shuffleQueue: () => void;

+  toggleLastfmLove: () => void;
+  setLastfmLoved: (v: boolean) => void;
+  setLastfmLovedForSong: (title: string, artist: string, v: boolean) => void;
+  syncLastfmLovedTracks: () => Promise<void>;
+
  initializeFromServerQueue: () => Promise<void>;

  contextMenu: {
@@ -143,16 +151,18 @@ function handleAudioProgress(current_time: number, duration: number) {
  const progress = current_time / dur;
  usePlayerStore.setState({ currentTime: current_time, progress, buffered: 0 });

-  // Scrobble at 50%
+  // Scrobble at 50% directly via Last.fm
  if (progress >= 0.5 && !store.scrobbled) {
    usePlayerStore.setState({ scrobbled: true });
-    const { scrobblingEnabled } = useAuthStore.getState();
-    if (scrobblingEnabled) 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'
@@ -160,7 +170,30 @@ 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(() => {});
+      }
    }
  }
 }
@@ -205,16 +238,21 @@ export function initAudioListeners(): () => void {
    listen<string>('audio:error', ({ payload }) => handleAudioError(payload)),
  ];

-  // Initial sync of crossfade settings to Rust audio engine on startup.
-  const { crossfadeEnabled, crossfadeSecs } = useAuthStore.getState();
-  invoke('audio_set_crossfade', { enabled: crossfadeEnabled, secs: crossfadeSecs }).catch(() => {});
+  // Sync Last.fm loved tracks cache on startup.
+  usePlayerStore.getState().syncLastfmLovedTracks();

-  // Keep crossfade settings in sync whenever auth store changes.
+  // 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 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 () => {
@@ -237,6 +275,8 @@ export const usePlayerStore = create<PlayerState>()(
      currentTime: 0,
      volume: 0.8,
      scrobbled: false,
+      lastfmLoved: false,
+      lastfmLovedCache: {},
      isQueueVisible: true,
      isFullscreenOpen: false,
      repeatMode: 'off',
@@ -253,6 +293,55 @@ export const usePlayerStore = create<PlayerState>()(
      setQueueVisible: (v: boolean) => set({ isQueueVisible: v }),
      toggleFullscreen: () => set(state => ({ isFullscreenOpen: !state.isFullscreenOpen })),

+      toggleLastfmLove: () => {
+        const { currentTrack, lastfmLoved } = get();
+        const { lastfmSessionKey } = useAuthStore.getState();
+        if (!currentTrack || !lastfmSessionKey) return;
+        const newLoved = !lastfmLoved;
+        const cacheKey = `${currentTrack.title}::${currentTrack.artist}`;
+        set(s => ({ lastfmLoved: newLoved, lastfmLovedCache: { ...s.lastfmLovedCache, [cacheKey]: newLoved } }));
+        if (newLoved) {
+          lastfmLoveTrack(currentTrack, lastfmSessionKey);
+        } else {
+          lastfmUnloveTrack(currentTrack, lastfmSessionKey);
+        }
+      },
+
+      setLastfmLoved: (v) => {
+        const { currentTrack } = get();
+        if (currentTrack) {
+          const cacheKey = `${currentTrack.title}::${currentTrack.artist}`;
+          set(s => ({ lastfmLoved: v, lastfmLovedCache: { ...s.lastfmLovedCache, [cacheKey]: v } }));
+        } else {
+          set({ lastfmLoved: v });
+        }
+      },
+
+      syncLastfmLovedTracks: async () => {
+        const { lastfmSessionKey, lastfmUsername } = useAuthStore.getState();
+        if (!lastfmSessionKey || !lastfmUsername) return;
+        const tracks = await lastfmGetAllLovedTracks(lastfmUsername, lastfmSessionKey);
+        const newCache: Record<string, boolean> = {};
+        for (const t of tracks) newCache[`${t.title}::${t.artist}`] = true;
+        // Merge with existing cache (local likes take precedence)
+        set(s => ({ lastfmLovedCache: { ...newCache, ...s.lastfmLovedCache } }));
+        // Update current track's loved state if it's in the new cache
+        const { currentTrack } = get();
+        if (currentTrack) {
+          const loved = newCache[`${currentTrack.title}::${currentTrack.artist}`] ?? false;
+          set({ lastfmLoved: loved });
+        }
+      },
+
+      setLastfmLovedForSong: (title, artist, v) => {
+        const cacheKey = `${title}::${artist}`;
+        const isCurrentTrack = get().currentTrack?.title === title && get().currentTrack?.artist === artist;
+        set(s => ({
+          lastfmLovedCache: { ...s.lastfmLovedCache, [cacheKey]: v },
+          ...(isCurrentTrack ? { lastfmLoved: v } : {}),
+        }));
+      },
+
      toggleRepeat: () => set(state => {
        const modes = ['off', 'all', 'one'] as const;
        return { repeatMode: modes[(modes.indexOf(state.repeatMode) + 1) % modes.length] };
@@ -285,6 +374,7 @@ export const usePlayerStore = create<PlayerState>()(
          buffered: 0,
          currentTime: 0,
          scrobbled: false,
+          lastfmLoved: false,
          isPlaying: true, // optimistic — reverted on error
        });

@@ -310,7 +400,19 @@ export const usePlayerStore = create<PlayerState>()(
          }, 500);
        });

+        // Report Now Playing to Navidrome (for Live/getNowPlaying) + Last.fm
        reportNowPlaying(track.id);
+        const { scrobblingEnabled: lfmEnabled, lastfmSessionKey: lfmKey } = useAuthStore.getState();
+        if (lfmKey) {
+          if (lfmEnabled) lastfmUpdateNowPlaying(track, lfmKey);
+          lastfmGetTrackLoved(track.title, track.artist, lfmKey).then(loved => {
+            const cacheKey = `${track.title}::${track.artist}`;
+            usePlayerStore.setState(s => ({
+              lastfmLoved: loved,
+              lastfmLovedCache: { ...s.lastfmLovedCache, [cacheKey]: loved },
+            }));
+          });
+        }
        syncQueueToServer(newQueue, track, 0);
      },

@@ -521,6 +623,7 @@ export const usePlayerStore = create<PlayerState>()(
        queue: state.queue,
        queueIndex: state.queueIndex,
        currentTime: state.currentTime,
+        lastfmLovedCache: state.lastfmLovedCache,
      } as Partial<PlayerState>),
    }
  )
@@ -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';
+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' | 'cupertino-light' | 'cupertino-dark' | 'gruvbox-dark-hard' | 'gruvbox-dark-medium' | 'gruvbox-dark-soft' | 'gruvbox-light-hard' | 'gruvbox-light-medium' | 'gruvbox-light-soft' | 'tokyo-night' | 'tokyo-night-storm' | 'tokyo-night-light';

 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);
 }
@@ -630,13 +631,74 @@
  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: flex-start;
+  justify-content: center;
+  padding-top: 8vh;
+  cursor: zoom-out;
+  backdrop-filter: blur(6px);
+}
+
+.cover-lightbox-img {
+  max-width: 90vw;
+  max-height: 90vh;
+  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 {
@@ -1179,6 +1241,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;
@@ -1422,7 +1499,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 +1532,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;
@@ -1716,57 +1793,6 @@
  }
 }

-/* ── Drifting color orbs ── */
-@keyframes orb-a {
-  0% {
-    transform: translate(0px, 0px) scale(1);
-  }
-
-  33% {
-    transform: translate(90px, -50px) scale(1.12);
-  }
-
-  66% {
-    transform: translate(-40px, 70px) scale(0.94);
-  }
-
-  100% {
-    transform: translate(0px, 0px) scale(1);
-  }
-}
-
-@keyframes orb-b {
-  0% {
-    transform: translate(0px, 0px) scale(1);
-  }
-
-  33% {
-    transform: translate(-70px, 40px) scale(1.08);
-  }
-
-  66% {
-    transform: translate(50px, -60px) scale(1.14);
-  }
-
-  100% {
-    transform: translate(0px, 0px) scale(1);
-  }
-}
-
-@keyframes orb-c {
-  0% {
-    transform: translate(0px, 0px) scale(1);
-  }
-
-  50% {
-    transform: translate(60px, 50px) scale(0.9);
-  }
-
-  100% {
-    transform: translate(0px, 0px) scale(1);
-  }
-}
-
 /* ── Cover breathing ── */
@keyframes cover-breathe {

@@ -1781,38 +1807,23 @@
 }

@keyframes ken-burns {
-  0% {
-    transform: scale(1.08) translate(0%, 0%);
-  }
-
-  25% {
-    transform: scale(1.12) translate(-1.5%, 1%);
-  }
-
-  50% {
-    transform: scale(1.10) translate(1%, -1.5%);
-  }
-
-  75% {
-    transform: scale(1.13) translate(1.5%, 0.5%);
-  }
-
-  100% {
-    transform: scale(1.08) translate(0%, 0%);
-  }
+  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 ── */
 .fs-bg {
  position: absolute;
-  inset: -15%;
+  inset: -30%;
  background-size: cover;
-  background-position: top center;
+  background-position: center 20%;
  filter: blur(6px) brightness(0.25) saturate(1.6);
-  animation: ken-burns 40s ease-in-out infinite;
-  transform: scale(1.2);
+  animation: ken-burns 120s linear infinite;
  z-index: 0;
-  will-change: opacity;
+  will-change: transform;
  pointer-events: none;
  transition: opacity 700ms ease;
 }
@@ -1825,45 +1836,6 @@
  pointer-events: none;
 }

-/* ── Drifting color orbs ── */
-.fs-orb {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(110px);
-  opacity: 0.22;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.fs-orb-1 {
-  background: var(--ctp-mauve);
-  width: 700px;
-  height: 700px;
-  top: -220px;
-  left: -180px;
-  animation: orb-a 20s ease-in-out infinite;
-}
-
-.fs-orb-2 {
-  background: var(--ctp-blue);
-  width: 600px;
-  height: 600px;
-  bottom: -180px;
-  right: -120px;
-  animation: orb-b 26s ease-in-out infinite;
-  animation-delay: -9s;
-}
-
-.fs-orb-3 {
-  background: var(--ctp-lavender);
-  width: 480px;
-  height: 480px;
-  top: 35%;
-  right: 5%;
-  animation: orb-c 17s ease-in-out infinite;
-  animation-delay: -14s;
-}
-
 /* ── Close button ── */
 .fs-close {
  position: absolute;
@@ -1907,7 +1879,7 @@
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
-  color: var(--ctp-lavender);
+  color: var(--accent);
  margin: 0;
  opacity: 0.9;
 }
@@ -2076,7 +2048,7 @@
 }

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

 .fs-btn-sm {
@@ -2087,15 +2059,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);
 }

@@ -2272,71 +2245,11 @@
 }

 /* ─ CSS Tooltips ─ */
+/* Tooltips are handled by TooltipPortal (React portal) — no CSS pseudo-elements needed */
 [data-tooltip] {
  position: relative;
 }

-[data-tooltip]::before,
-[data-tooltip]::after {
-  position: absolute;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.2s ease, visibility 0.2s ease;
-  pointer-events: none;
-  z-index: 9999;
-}
-
-[data-tooltip]::before {
-  content: '';
-  border: 5px solid transparent;
-  border-top-color: var(--border-subtle);
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-/* Inner triangle for the tooltip arrow to match background */
-[data-tooltip]::after {
-  content: attr(data-tooltip);
-  background: var(--bg-card);
-  color: var(--text-primary);
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-sm);
-  font-size: 12px;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-  white-space: nowrap;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
-  font-weight: 500;
-  border: 1px solid var(--border-subtle);
-}
-
-[data-tooltip]:hover::before,
-[data-tooltip]:hover::after {
-  opacity: 1;
-  visibility: visible;
-}
-
-[data-tooltip-wrap]::after {
-  white-space: pre-line;
-  max-width: 220px;
-  text-align: left;
-}
-
-/* Modifiers for position */
-[data-tooltip][data-tooltip-pos="bottom"]::before {
-  top: 100%;
-  bottom: auto;
-  border-top-color: transparent;
-  border-bottom-color: var(--border-subtle);
-}
-
-[data-tooltip][data-tooltip-pos="bottom"]::after {
-  top: calc(100% + 6px);
-  bottom: auto;
-}
-

 /* ─ Playlists Page ─ */
 .playlist-page-header {
@@ -2479,7 +2392,7 @@

 .stats-overview {
  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
 }

@@ -2706,14 +2619,394 @@
 }

 /* ─ 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: flex;
+  align-items: stretch;
+  gap: 20px;
+  padding: 24px;
+  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;
+  min-height: 200px;
+}
+
+/* Left column: cover + meta, left-aligned — takes equal share with right */
+.np-hero-left {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 18px;
+}
+
+.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: 10px;
+  padding-top: 4px;
+  justify-content: center;
+}
+
+/* Center column: fixed width so it stays truly centered between equal outer columns */
+.np-eq-wrap {
+  flex: 0 0 clamp(100px, 20vw, 220px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
+}
+
+.np-eq-bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 3px;
+  height: 80px;
+  width: 100%;
+}
+
+.np-eq-bar {
+  flex: 1;
+  min-width: 3px;
+  max-width: 8px;
+  background: var(--accent);
+  border-radius: 2px 2px 0 0;
+  opacity: 0.85;
+  height: 8%;
+  transition: background 0.3s;
+  will-change: height;
+}
+
+/* Right column: tag cloud — takes equal share with left so EQ stays centered */
+.np-tag-cloud {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  align-content: flex-start;
+  padding-top: 4px;
+  justify-content: flex-end;
+}
+
+.np-tag {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 10px;
+  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);
+  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;
@@ -2724,7 +3017,7 @@

 .np-bg-wrap {
  position: absolute;
-  inset: 0 0 -80px 0;
+  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: paint;
@@ -2735,7 +3028,7 @@
  inset: -15%;
  background-size: cover;
  background-position: center;
-  filter: blur(50px) brightness(0.25) saturate(1.8);
+  filter: blur(40px) brightness(0.55) saturate(1.6);
  transition: opacity 0.6s ease;
  will-change: opacity;
 }
@@ -2743,48 +3036,7 @@
 .np-bg-overlay {
  position: absolute;
  inset: 0;
-  background: linear-gradient(to bottom, transparent 40%, var(--bg-app) 100%);
-}
-
-/* Orbs — will-change promotes each to its own compositor layer so
-   the blur is composited on the GPU and doesn't repaint on every frame */
-.np-orb {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(70px);
-  opacity: 0.3;
-  pointer-events: none;
-  z-index: 0;
-  will-change: transform;
-}
-
-.np-orb-1 {
-  background: var(--ctp-mauve);
-  width: 400px;
-  height: 400px;
-  top: -120px;
-  left: -80px;
-  animation: orb-a 18s ease-in-out infinite;
-}
-
-.np-orb-2 {
-  background: var(--ctp-blue);
-  width: 320px;
-  height: 320px;
-  bottom: -80px;
-  right: -60px;
-  animation: orb-b 24s ease-in-out infinite;
-  animation-delay: -9s;
-}
-
-.np-orb-3 {
-  background: var(--ctp-lavender);
-  width: 260px;
-  height: 260px;
-  top: 30%;
-  right: 10%;
-  animation: orb-c 15s ease-in-out infinite;
-  animation-delay: -5s;
+  background: rgba(0, 0, 0, 0.38);
 }

 .np-hero-content {
@@ -2811,8 +3063,8 @@

 .np-cover-glow {
  position: absolute;
-  width: 170px;
-  height: 170px;
+  width: 200px;
+  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  filter: blur(36px) saturate(1.5) brightness(0.85);
@@ -2832,8 +3084,8 @@
 .np-cover {
  position: relative;
  z-index: 1;
-  width: 160px;
-  height: 160px;
+  width: 196px;
+  height: 196px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
@@ -2848,7 +3100,7 @@
  color: var(--text-muted);
 }

-/* Info column */
+/* Info column (legacy, kept for compat) */
 .np-info {
  display: flex;
  flex-direction: column;
@@ -2871,7 +3123,7 @@
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
  gap: 6px;
  align-items: center;
 }
@@ -2888,7 +3140,7 @@
 .np-tech-row {
  display: flex;
  flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
@@ -3208,6 +3460,87 @@
  min-width: 140px;
 }

+/* ─ Custom Select ─ */
+.custom-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-input);
+  border: 1px solid var(--border-dropdown, var(--border));
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, background 0.15s;
+}
+.custom-select-trigger:hover {
+  border-color: var(--accent);
+  background: var(--bg-hover);
+}
+.custom-select-trigger:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.custom-select-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.custom-select-chevron {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  transition: transform 0.2s ease;
+}
+.custom-select-chevron.open {
+  transform: rotate(180deg);
+}
+.custom-select-dropdown {
+  background: var(--bg-card);
+  border: 1px solid var(--border-dropdown, var(--border));
+  border-radius: var(--radius-md);
+  box-shadow: 0 8px 32px var(--shadow-dropdown, rgba(0, 0, 0, 0.4));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.custom-select-option {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.custom-select-option:hover {
+  background: var(--bg-hover);
+}
+.custom-select-option.selected {
+  color: var(--accent);
+  font-weight: 600;
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+}
+.custom-select-option.disabled {
+  color: var(--text-muted);
+  cursor: default;
+}
+.custom-select-group-label {
+  padding: 0.375rem 0.75rem 0.25rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border-subtle);
+  margin-top: 0.25rem;
+}
+.custom-select-group-label:first-child {
+  border-top: none;
+  margin-top: 0;
+}
+
 .eq-ctrl-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border);
@@ -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;
@@ -324,8 +324,8 @@
  display: flex;
  align-items: center;
  gap: var(--space-3);
-  flex-shrink: 0;
-  width: 220px;
+  flex: 0 0 auto;
+  max-width: min(40vw, 480px);
  min-width: 0;
 }

@@ -386,6 +386,7 @@

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

 .player-track-name {
@@ -439,7 +440,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 +448,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 */
@@ -581,6 +583,121 @@
  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 +719,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 +753,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	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
Psychotoxical	c8d5e9c028	fix: TypeScript build errors in Settings and Statistics (count→n, relativeTime t type) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-20 18:53:12 +01:00
Psychotoxical	2ba7845c79	feat: Last.fm beta, Similar Artists, Statistics Last.fm stats, TooltipPortal, CustomSelect, Psychowave theme (v1.7.0) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-20 18:35:26 +01:00
Psychotoxical	9400a5fb2b	docs: warn about settings reset in v1.6.0 changelog (identifier change) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-19 20:48:26 +01:00