feat: glass effects and custom background images (#595)

* feat: add glass effects and track item styling

- add CSS variables for glass effects (--glass-bg, --glass-blur, --glass-border)
- apply backdrop-filter blur to Player, Header, and Queue sidebar
- add translucent backgrounds to TrackItem without blur (performance safe)
- add subtle border-radius (6px) and box-shadow to track items
- support both dark and light themes with appropriate glass values
- remove conflicting light theme overrides in favor of CSS variables

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* feat: add ui_settings JSONB column for extensible preferences

- add ui_settings JSONB column to user_preferences table
- update preferences API to expose ui_settings field
- merge ui_settings on partial updates to support incremental changes
- add migration for new column
- add tests for ui_settings CRUD and persistence

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* feat: add background image settings UI

- add UiSettings interface with background_image_url and background_tile
- add background image URL input and tile toggle in settings page
- apply background image via CSS custom properties in layout
- update preferences manager with updateUiSettings method

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* feat: refine track item hover behavior and glass styling

- remove chunky left border, use uniform subtle border
- add tactile hover: 0.5px lift with accent-tinted glow
- smooth cubic-bezier easing for polished feel
- active state settles back down on click
- adjust track background opacity (88%) for better balance
- fix background image input reactivity bug

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* feat: add subtle 3D wheel scroll effect to track items

tracks now appear on a convex cylinder surface:
- items at viewport center are closest
- items above/below rotate away slightly (2° max)
- uses passive scroll listener for performance
- transform-style: preserve-3d for proper layering

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* feat: glass button styling for background image visibility

icon buttons now have translucent backgrounds when a
background image is set, ensuring they remain visible
against any background:

- ShareButton gets glass background
- playlist page icon-btn (edit, delete) gets glass bg
- HiddenTagsFilter eyeball toggle gets glass bg
- glass button CSS variables set dynamically in layout
when background image is present
- respects light/dark theme with appropriate opacity

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* fix: consistent glass button styling and preserve bg image on refresh

- unified queue/action buttons across tag, liked, playlist, and album pages
to use glass button CSS variables (--glass-btn-bg, --glass-btn-border)
- only apply background image changes when preferences are actually loaded
to prevent clearing the background image on refresh/hydration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* feat: use playing track artwork as background option

adds a new toggle in settings to use the currently playing
track's artwork as the background image:

- new ui_settings.use_playing_artwork_as_background option
- when enabled, overrides custom background image URL
- background changes dynamically as tracks change
- disables the custom URL input when enabled
- playing artwork never tiles (always cover)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* feat: blur and tile playing artwork background

- playing artwork now tiles in a 4x4 grid (25% size)
- applies 40px blur for smooth, ambient effect
- uses body::before pseudo-element with scale(1.1) to prevent blur edge artifacts
- custom background images remain unblurred

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* fix: fall back to custom bg when playing track has no artwork

when "use playing artwork as background" is enabled but the
current track has no artwork, now falls back to the custom
background URL if one is set (instead of showing nothing)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* feat: add subtle text glow for readability against backgrounds

adds a --text-shadow CSS variable that provides a soft glow effect
around gray metadata text when a background image is set. this improves
readability without being visually heavy like a drop shadow.

applied to:
- album page metadata (type, title, meta, artist link)
- tag page track count subtitle
- settings page section headers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

* fix: use proper fallbacks for glass button styling

when no background image is set, buttons should fall back to
transparent backgrounds and standard border colors rather than
hardcoded dark theme glass values.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

---------

Co-authored-by: Claude Opus 4.5 <[e-mail]>

.claude/commands/deploy.md

···
 ## post-deployment
 
 remind the user to:
-- verify staging at https://stg.plyr.fm (frontend auto-deploys)
 - monitor fly.io dashboard for backend deployment status
 - check https://plyr.fm once deployment completes

backend/alembic/versions/2025_12_16_000000_add_ui_settings_jsonb.py

···
+"""add ui_settings jsonb to preferences
+
+Revision ID: a1b2c3d4e5f6
+Revises: 37cc1d6980c3
+Create Date: 2025-12-16 00:00:00.000000
+
+"""
+
+from collections.abc import Sequence
+
+import sqlalchemy as sa
+from sqlalchemy.dialects import postgresql
+
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision: str = "a1b2c3d4e5f6"
+down_revision: str | None = "37cc1d6980c3"
+branch_labels: str | Sequence[str] | None = None
+depends_on: str | Sequence[str] | None = None
+
+
+def upgrade() -> None:
+    op.add_column(
+        "user_preferences",
+        sa.Column(
+            "ui_settings",
+            postgresql.JSONB(astext_type=sa.Text()),
+            server_default=sa.text("'{}'::jsonb"),
+            nullable=False,
+        ),
+    )
+
+
+def downgrade() -> None:
+    op.drop_column("user_preferences", "ui_settings")

backend/src/backend/api/preferences.py

···
 """user preferences api endpoints."""
 
-from typing import Annotated
+from typing import Annotated, Any
 
 from fastapi import APIRouter, Depends
 from pydantic import BaseModel, field_validator
···
     show_sensitive_artwork: bool = False
     show_liked_on_profile: bool = False
     support_url: str | None = None
+    # extensible UI settings (background_image_url, glass_effects, custom_colors, etc.)
+    ui_settings: dict[str, Any] = {}
 
 
 class PreferencesUpdate(BaseModel):
···
     show_sensitive_artwork: bool | None = None
     show_liked_on_profile: bool | None = None
     support_url: str | None = None
+    ui_settings: dict[str, Any] | None = None
 
     @field_validator("support_url", mode="before")
     @classmethod
···
         show_sensitive_artwork=prefs.show_sensitive_artwork,
         show_liked_on_profile=prefs.show_liked_on_profile,
         support_url=prefs.support_url,
+        ui_settings=prefs.ui_settings or {},
     )
 
 
···
             if update.show_liked_on_profile is not None
             else False,
             support_url=update.support_url,
+            ui_settings=update.ui_settings or {},
         )
         db.add(prefs)
     else:
···
         if update.support_url is not None:
             # allow clearing by setting to empty string
             prefs.support_url = update.support_url if update.support_url else None
+        if update.ui_settings is not None:
+            # merge with existing settings to allow partial updates
+            prefs.ui_settings = {**(prefs.ui_settings or {}), **update.ui_settings}
 
     await db.commit()
     await db.refresh(prefs)
···
         show_sensitive_artwork=prefs.show_sensitive_artwork,
         show_liked_on_profile=prefs.show_liked_on_profile,
         support_url=prefs.support_url,
+        ui_settings=prefs.ui_settings or {},
     )

backend/src/backend/models/preferences.py

···
     # artist support link (Ko-fi, Patreon, etc.)
     support_url: Mapped[str | None] = mapped_column(String, nullable=True)
 
+    # extensible UI settings (colors, background image, glass effects, etc.)
+    # schema-less to avoid migrations for new UI preferences
+    ui_settings: Mapped[dict] = mapped_column(
+        JSONB,
+        nullable=False,
+        default=dict,
+        server_default=text("'{}'::jsonb"),
+    )
+
     # metadata
     created_at: Mapped[datetime] = mapped_column(
         DateTime(timezone=True),

backend/tests/api/test_preferences.py

···
         json={"support_url": "random-string"},
     )
     assert response.status_code == 422  # validation error
+
+
+async def test_get_preferences_includes_ui_settings(
+    client_no_teal: AsyncClient,
+):
+    """should return ui_settings field in preferences response."""
+    response = await client_no_teal.get("/preferences/")
+    assert response.status_code == 200
+
+    data = response.json()
+    assert "ui_settings" in data
+    # default should be empty dict
+    assert data["ui_settings"] == {}
+
+
+async def test_set_ui_settings(
+    client_no_teal: AsyncClient,
+):
+    """should update ui_settings preference."""
+    response = await client_no_teal.post(
+        "/preferences/",
+        json={
+            "ui_settings": {
+                "glass_enabled": True,
+                "background_image_url": "https://example.com/bg.jpg",
+            }
+        },
+    )
+    assert response.status_code == 200
+
+    data = response.json()
+    assert data["ui_settings"]["glass_enabled"] is True
+    assert data["ui_settings"]["background_image_url"] == "https://example.com/bg.jpg"
+
+
+async def test_ui_settings_partial_update(
+    client_no_teal: AsyncClient,
+):
+    """should merge ui_settings on partial update."""
+    # first set some settings
+    await client_no_teal.post(
+        "/preferences/",
+        json={"ui_settings": {"glass_enabled": True, "theme_color": "#ff0000"}},
+    )
+
+    # then update just one setting
+    response = await client_no_teal.post(
+        "/preferences/",
+        json={"ui_settings": {"glass_enabled": False}},
+    )
+    assert response.status_code == 200
+
+    data = response.json()
+    # new value should override
+    assert data["ui_settings"]["glass_enabled"] is False
+    # old value should be preserved
+    assert data["ui_settings"]["theme_color"] == "#ff0000"
+
+
+async def test_ui_settings_persists_after_other_update(
+    client_no_teal: AsyncClient,
+):
+    """ui_settings should persist when updating other preferences."""
+    # set ui_settings
+    await client_no_teal.post(
+        "/preferences/",
+        json={"ui_settings": {"glass_enabled": True}},
+    )
+
+    # update a different preference
+    response = await client_no_teal.post(
+        "/preferences/",
+        json={"auto_advance": False},
+    )
+    assert response.status_code == 200
+
+    data = response.json()
+    # ui_settings should still be set
+    assert data["ui_settings"]["glass_enabled"] is True
+    assert data["auto_advance"] is False

frontend/src/lib/components/Header.svelte

···
 
 <style>
 	header {
-		border-bottom: 1px solid var(--border-default);
+		border-bottom: 1px solid var(--glass-border, var(--border-default));
 		margin-bottom: 2rem;
 		position: sticky;
 		top: 0;
 		z-index: 50;
-		background: var(--bg-primary);
+		background: var(--glass-bg, var(--bg-primary));
+		backdrop-filter: var(--glass-blur, none);
+		-webkit-backdrop-filter: var(--glass-blur, none);
 	}
 
 	.header-content {

frontend/src/lib/components/HiddenTagsFilter.svelte

···
 		display: inline-flex;
 		align-items: center;
 		gap: 0.3rem;
-		padding: 0.25rem;
-		background: transparent;
-		border: none;
+		padding: 0.35rem;
+		background: var(--glass-btn-bg, transparent);
+		border: 1px solid var(--glass-btn-border, transparent);
 		color: var(--text-tertiary);
 		cursor: pointer;
-		transition: color 0.15s;
-		border-radius: 4px;
+		transition: all 0.15s;
+		border-radius: 6px;
 	}
 
 	.filter-toggle:hover {
 		color: var(--text-secondary);
+		background: var(--glass-btn-bg-hover, var(--bg-hover, transparent));
 	}
 
 	.filter-toggle.has-filters {

frontend/src/lib/components/Queue.svelte

···
 		flex-direction: column;
 		height: 100%;
 		padding: 1.5rem 1.25rem calc(var(--player-height, 0px) + 40px + env(safe-area-inset-bottom, 0px));
-		background: var(--bg-primary);
-		border-left: 1px solid var(--border-subtle);
+		background: transparent;
 		gap: 1rem;
 	}
 

frontend/src/lib/components/ShareButton.svelte

···
 
 <style>
 	.share-btn {
-		background: transparent;
-		border: 1px solid var(--border-default);
-		border-radius: 4px;
+		background: var(--glass-btn-bg, transparent);
+		border: 1px solid var(--glass-btn-border, var(--border-default));
+		border-radius: 6px;
 		width: 32px;
 		height: 32px;
 		padding: 0;
···
 	}
 
 	.share-btn:hover {
+		background: var(--glass-btn-bg-hover, transparent);
 		border-color: var(--accent);
 		color: var(--accent);
 	}

frontend/src/lib/components/TrackItem.svelte

···
 <script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 	import ShareButton from './ShareButton.svelte';
 	import AddToMenu from './AddToMenu.svelte';
 	import TrackActionsMenu from './TrackActionsMenu.svelte';
···
 		// also update the track object itself
 		track.like_count = likeCount;
 	}
+
+	// wheel effect: tracks rotate based on distance from viewport center
+	let containerEl: HTMLDivElement;
+	let rotateX = $state(0);
+	let translateZ = $state(0);
+
+	onMount(() => {
+		if (!browser) return;
+
+		const MAX_ROTATION = 2; // max degrees of rotation (very subtle)
+
+		function updateWheelPosition() {
+			if (!containerEl) return;
+
+			const rect = containerEl.getBoundingClientRect();
+			const viewportCenter = window.innerHeight / 2;
+			const itemCenter = rect.top + rect.height / 2;
+
+			// distance from viewport center, normalized (-1 to 1)
+			const distanceFromCenter = (itemCenter - viewportCenter) / viewportCenter;
+
+			// convex wheel: items above tilt toward viewer (positive), below tilt away (negative)
+			rotateX = -distanceFromCenter * MAX_ROTATION;
+
+			// z-translate: items at center are closest, edges recede slightly
+			translateZ = (1 - Math.abs(distanceFromCenter)) * 3 - 1.5;
+		}
+
+		// use passive scroll listener for performance
+		window.addEventListener('scroll', updateWheelPosition, { passive: true });
+		// also update on resize
+		window.addEventListener('resize', updateWheelPosition, { passive: true });
+		// initial position
+		updateWheelPosition();
+
+		return () => {
+			window.removeEventListener('scroll', updateWheelPosition);
+			window.removeEventListener('resize', updateWheelPosition);
+		};
+	});
 </script>
 
-<div class="track-container" class:playing={isPlaying} class:likers-tooltip-open={showLikersTooltip}>
+<div
+	class="track-container"
+	class:playing={isPlaying}
+	class:likers-tooltip-open={showLikersTooltip}
+	bind:this={containerEl}
+	style="transform: perspective(1000px) rotateX({rotateX}deg) translateZ({translateZ}px);"
+>
 	{#if showIndex}
 		<span class="track-index">{index + 1}</span>
 	{/if}
···
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border-subtle);
-		border-left: 3px solid transparent;
+		background: var(--track-bg, var(--bg-secondary));
+		border: 1px solid var(--track-border, var(--border-subtle));
+		border-radius: 8px;
 		padding: 1rem;
-		transition: all 0.15s ease-in-out;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+		transform-origin: center center;
+		transform-style: preserve-3d;
+		will-change: transform;
+		transition:
+			box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+			background 0.15s ease-out,
+			border-color 0.15s ease-out;
 	}
 
 	.track-index {
···
 	}
 
 	.track-container:hover {
-		background: var(--bg-tertiary);
-		border-left-color: var(--accent);
-		border-color: var(--border-default);
+		background: var(--track-bg-hover, var(--bg-tertiary));
+		border-color: color-mix(in srgb, var(--accent) 15%, var(--track-border-hover, var(--border-default)));
+		box-shadow:
+			0 1px 3px rgba(0, 0, 0, 0.06),
+			0 0 8px color-mix(in srgb, var(--accent) 8%, transparent);
+	}
+
+	.track-container:active {
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+		transition-duration: 0.08s;
 	}
 
 	.track-container.playing {
-		background: color-mix(in srgb, var(--accent) 10%, var(--bg-tertiary));
-		border-left-color: var(--accent);
-		border-color: color-mix(in srgb, var(--accent) 20%, var(--border-subtle));
+		background: color-mix(in srgb, var(--accent) 10%, var(--track-bg-playing, var(--bg-tertiary)));
+		border-color: color-mix(in srgb, var(--accent) 20%, var(--track-border, var(--border-subtle)));
 	}
 
 	/* elevate entire track container when likers tooltip is open

frontend/src/lib/components/player/Player.svelte

···
 		bottom: 0;
 		left: 0;
 		right: 0;
-		background: var(--bg-tertiary);
-		border-top: 1px solid var(--border-default);
+		background: var(--glass-bg, var(--bg-tertiary));
+		backdrop-filter: var(--glass-blur, none);
+		-webkit-backdrop-filter: var(--glass-blur, none);
+		border-top: 1px solid var(--glass-border, var(--border-default));
 		padding: 0.75rem 2rem;
 		padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
 		z-index: 100;

frontend/src/lib/preferences.svelte.ts

···
 
 export type Theme = 'dark' | 'light' | 'system';
 
+export interface UiSettings {
+	background_image_url?: string;
+	background_tile?: boolean;
+	use_playing_artwork_as_background?: boolean;
+}
+
 export interface Preferences {
 	accent_color: string | null;
 	auto_advance: boolean;
···
 	show_sensitive_artwork: boolean;
 	show_liked_on_profile: boolean;
 	support_url: string | null;
+	ui_settings: UiSettings;
 }
 
 const DEFAULT_PREFERENCES: Preferences = {
···
 	teal_needs_reauth: false,
 	show_sensitive_artwork: false,
 	show_liked_on_profile: false,
-	support_url: null
+	support_url: null,
+	ui_settings: {}
 };
 
 class PreferencesManager {
···
 		return this.data?.support_url ?? DEFAULT_PREFERENCES.support_url;
 	}
 
+	get uiSettings(): UiSettings {
+		return this.data?.ui_settings ?? DEFAULT_PREFERENCES.ui_settings;
+	}
+
 	setTheme(theme: Theme): void {
 		if (browser) {
 			localStorage.setItem('theme', theme);
···
 					teal_needs_reauth: data.teal_needs_reauth ?? DEFAULT_PREFERENCES.teal_needs_reauth,
 					show_sensitive_artwork: data.show_sensitive_artwork ?? DEFAULT_PREFERENCES.show_sensitive_artwork,
 					show_liked_on_profile: data.show_liked_on_profile ?? DEFAULT_PREFERENCES.show_liked_on_profile,
-					support_url: data.support_url ?? DEFAULT_PREFERENCES.support_url
+					support_url: data.support_url ?? DEFAULT_PREFERENCES.support_url,
+					ui_settings: data.ui_settings ?? DEFAULT_PREFERENCES.ui_settings
 				};
 			} else {
 				this.data = { ...DEFAULT_PREFERENCES, theme: currentTheme };
···
 		} catch (error) {
 			console.error('failed to save preferences:', error);
 			// revert on error by refetching
+			await this.fetch();
+		}
+	}
+
+	async updateUiSettings(updates: Partial<UiSettings>): Promise<void> {
+		if (!browser || !auth.isAuthenticated) return;
+
+		// optimistic update - merge with existing
+		if (this.data) {
+			this.data = {
+				...this.data,
+				ui_settings: { ...this.data.ui_settings, ...updates }
+			};
+		}
+
+		try {
+			const response = await fetch(`${API_URL}/preferences/`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				credentials: 'include',
+				body: JSON.stringify({ ui_settings: updates })
+			});
+			if (!response.ok) {
+				console.error('failed to save ui settings:', response.status);
+				await this.fetch();
+			}
+		} catch (error) {
+			console.error('failed to save ui settings:', error);
 			await this.fetch();
 		}
 	}

frontend/src/routes/+layout.svelte

···
 		document.documentElement.style.setProperty('--queue-width', queueWidth);
 	});
 
+	// apply background image from ui_settings or playing track artwork
+	// only apply when preferences are actually loaded (not null) to avoid clearing on initial load
+	$effect(() => {
+		if (!browser) return;
+		// don't clear bg image if preferences haven't loaded yet
+		if (!preferences.loaded) return;
+
+		const uiSettings = preferences.uiSettings;
+		const root = document.documentElement;
+
+		// determine background image URL
+		// priority: playing artwork (if enabled and available) > custom URL
+		let bgImageUrl: string | undefined;
+		let isUsingPlayingArtwork = false;
+		if (uiSettings.use_playing_artwork_as_background && player.currentTrack?.image_url) {
+			bgImageUrl = player.currentTrack.image_url;
+			isUsingPlayingArtwork = true;
+		} else if (uiSettings.background_image_url) {
+			// fall back to custom URL (whether playing artwork is enabled or not)
+			bgImageUrl = uiSettings.background_image_url;
+		}
+
+		if (bgImageUrl) {
+			root.style.setProperty('--bg-image', `url(${bgImageUrl})`);
+			// playing artwork tiles in a 4x4 grid with blur, custom image respects tile setting
+			const shouldTile = isUsingPlayingArtwork || uiSettings.background_tile;
+			root.style.setProperty('--bg-image-mode', shouldTile ? 'repeat' : 'no-repeat');
+			// playing artwork: 25% size (4x4 grid), custom: auto if tiled, cover if not
+			root.style.setProperty('--bg-image-size', isUsingPlayingArtwork ? '25%' : (uiSettings.background_tile ? 'auto' : 'cover'));
+			// blur playing artwork for smoother look
+			root.style.setProperty('--bg-blur', isUsingPlayingArtwork ? '40px' : '0px');
+			// glass button styling for visibility against background images
+			const isLight = root.classList.contains('theme-light');
+			root.style.setProperty('--glass-btn-bg', isLight ? 'rgba(255, 255, 255, 0.8)' : 'rgba(18, 18, 18, 0.8)');
+			root.style.setProperty('--glass-btn-bg-hover', isLight ? 'rgba(255, 255, 255, 0.9)' : 'rgba(30, 30, 30, 0.9)');
+			root.style.setProperty('--glass-btn-border', isLight ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)');
+			// very subtle text outline for readability against background images
+			root.style.setProperty('--text-shadow', isLight ? '0 0 8px rgba(255, 255, 255, 0.6)' : '0 0 8px rgba(0, 0, 0, 0.6)');
+		} else {
+			root.style.removeProperty('--bg-image');
+			root.style.removeProperty('--bg-image-mode');
+			root.style.removeProperty('--bg-image-size');
+			root.style.removeProperty('--bg-blur');
+			root.style.removeProperty('--glass-btn-bg');
+			root.style.removeProperty('--glass-btn-bg-hover');
+			root.style.removeProperty('--glass-btn-border');
+			root.style.removeProperty('--text-shadow');
+		}
+	});
+
 	const SEEK_AMOUNT = 10; // seconds
 	let previousVolume = 0.7; // for mute toggle
 
···
 		--success: #4ade80;
 		--warning: #fbbf24;
 		--error: #ef4444;
+
+		/* glass effects (dark theme) */
+		--glass-bg: rgba(20, 20, 20, 0.75);
+		--glass-blur: blur(12px);
+		--glass-border: rgba(255, 255, 255, 0.06);
+
+		/* track item glass (no blur, just translucent) */
+		--track-bg: rgba(18, 18, 18, 0.88);
+		--track-bg-hover: rgba(24, 24, 24, 0.92);
+		--track-bg-playing: rgba(18, 18, 18, 0.88);
+		--track-border: rgba(255, 255, 255, 0.06);
+		--track-border-hover: rgba(255, 255, 255, 0.1);
 	}
 
 	/* light theme overrides */
···
 		--success: #16a34a;
 		--warning: #d97706;
 		--error: #dc2626;
-	}
 
-	/* light theme specific overrides for components */
-	:global(:root.theme-light) :global(.track-container) {
-		background: var(--bg-secondary);
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-	}
+		/* glass effects (light theme) */
+		--glass-bg: rgba(250, 250, 250, 0.75);
+		--glass-border: rgba(0, 0, 0, 0.06);
 
-	:global(:root.theme-light) :global(.track-container:hover) {
-		background: var(--bg-tertiary);
-	}
-
-	:global(:root.theme-light) :global(.track-container.playing) {
-		background: color-mix(in srgb, var(--accent) 8%, white);
-		border-color: color-mix(in srgb, var(--accent) 30%, white);
-	}
-
-	:global(:root.theme-light) :global(header) {
-		background: var(--bg-primary);
-		border-color: var(--border-default);
+		/* track item glass (light theme) */
+		--track-bg: rgba(255, 255, 255, 0.94);
+		--track-bg-hover: rgba(250, 250, 250, 0.96);
+		--track-bg-playing: rgba(255, 255, 255, 0.94);
+		--track-border: rgba(0, 0, 0, 0.08);
+		--track-border-hover: rgba(0, 0, 0, 0.12);
 	}
 
+	/* light theme specific overrides for components */
 	:global(:root.theme-light) :global(.tag-badge) {
 		background: color-mix(in srgb, var(--accent) 12%, white);
 		color: var(--accent-muted);
···
 		margin: 0;
 		padding: 0;
 		font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
-		background: var(--bg-primary);
+		background-color: var(--bg-primary);
 		color: var(--text-primary);
 		-webkit-font-smoothing: antialiased;
 	}
 
+	/* background image with blur effect */
+	:global(body::before) {
+		content: '';
+		position: fixed;
+		inset: 0;
+		background-image: var(--bg-image, none);
+		background-repeat: var(--bg-image-mode, no-repeat);
+		background-size: var(--bg-image-size, cover);
+		background-position: center;
+		filter: blur(var(--bg-blur, 0px));
+		transform: scale(1.1); /* prevent blur edge artifacts */
+		z-index: -1;
+	}
+
 	.app-layout {
 		display: flex;
 		min-height: 100vh; /* fallback for browsers without dvh support */
···
 		right: 0;
 		width: min(360px, 100%);
 		height: 100vh; /* fallback for browsers without dvh support */
-		background: var(--bg-primary);
-		border-left: 1px solid var(--border-subtle);
+		background: var(--glass-bg, var(--bg-primary));
+		backdrop-filter: var(--glass-blur, none);
+		-webkit-backdrop-filter: var(--glass-blur, none);
+		border-left: 1px solid var(--glass-border, var(--border-subtle));
 		z-index: 50;
 	}
 

frontend/src/routes/+layout.ts

···
 	teal_needs_reauth: false,
 	show_sensitive_artwork: false,
 	show_liked_on_profile: false,
-	support_url: null
+	support_url: null,
+	ui_settings: {}
 };
 
 export async function load({ fetch, data }: LoadEvent): Promise<LayoutData> {
···
 						teal_needs_reauth: prefsData.teal_needs_reauth ?? false,
 						show_sensitive_artwork: prefsData.show_sensitive_artwork ?? false,
 						show_liked_on_profile: prefsData.show_liked_on_profile ?? false,
-						support_url: prefsData.support_url ?? null
+						support_url: prefsData.support_url ?? null,
+						ui_settings: prefsData.ui_settings ?? {}
 					};
 				}
 			} catch (e) {

frontend/src/routes/liked/+page.svelte

···
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		border: none;
-		background: transparent;
+		background: var(--glass-btn-bg, transparent);
 		color: var(--text-primary);
-		border: 1px solid var(--border-default);
+		border: 1px solid var(--glass-btn-border, var(--border-default));
 	}
 
 	.queue-button:hover,
 	.reorder-button:hover {
+		background: var(--glass-btn-bg-hover, transparent);
 		border-color: var(--accent);
 		color: var(--accent);
 	}

frontend/src/routes/playlist/[id]/+page.svelte

···
 		justify-content: center;
 		width: 32px;
 		height: 32px;
-		background: transparent;
-		border: 1px solid var(--border-default);
-		border-radius: 4px;
-		color: var(--text-tertiary);
+		background: var(--glass-btn-bg, rgba(18, 18, 18, 0.75));
+		border: 1px solid var(--glass-btn-border, rgba(255, 255, 255, 0.1));
+		border-radius: 6px;
+		color: var(--text-secondary);
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 
 	.icon-btn:hover {
+		background: var(--glass-btn-bg-hover, rgba(30, 30, 30, 0.85));
 		border-color: var(--accent);
 		color: var(--accent);
 	}
 
 	.icon-btn.danger:hover {
+		background: rgba(239, 68, 68, 0.15);
 		border-color: #ef4444;
 		color: #ef4444;
 	}
···
 	.icon-btn.active {
 		border-color: var(--accent);
 		color: var(--accent);
-		background: color-mix(in srgb, var(--accent) 10%, transparent);
+		background: color-mix(in srgb, var(--accent) 20%, var(--glass-btn-bg, rgba(18, 18, 18, 0.75)));
 	}
 
 	/* playlist actions */
···
 	}
 
 	.queue-button {
-		background: transparent;
+		background: var(--glass-btn-bg, transparent);
 		color: var(--text-primary);
-		border: 1px solid var(--border-default);
+		border: 1px solid var(--glass-btn-border, var(--border-default));
 	}
 
 	.queue-button:hover {
+		background: var(--glass-btn-bg-hover, transparent);
 		border-color: var(--accent);
 		color: var(--accent);
 	}

frontend/src/routes/settings/+page.svelte

···
 	let currentTheme = $derived(preferences.theme);
 	let currentColor = $derived(preferences.accentColor ?? '#6a9fff');
 	let autoAdvance = $derived(preferences.autoAdvance);
+	let backgroundImageUrl = $derived(preferences.uiSettings.background_image_url ?? '');
+	let backgroundTile = $derived(preferences.uiSettings.background_tile ?? false);
+	let usePlayingArtwork = $derived(preferences.uiSettings.use_playing_artwork_as_background ?? false);
 	// developer token state
 	let creatingToken = $state(false);
 	let developerToken = $state<string | null>(null);
···
 
 	function selectPreset(color: string) {
 		applyColor(color);
+	}
+
+	// background image state - initialize once, don't sync reactively
+	let backgroundInput = $state(preferences.uiSettings.background_image_url ?? '');
+	let backgroundInputInitialized = $state(false);
+
+	// only sync from server on initial load, not on every change
+	$effect(() => {
+		if (!backgroundInputInitialized && preferences.loaded) {
+			backgroundInput = preferences.uiSettings.background_image_url ?? '';
+			backgroundInputInitialized = true;
+		}
+	});
+
+	async function saveBackgroundImage() {
+		const url = backgroundInput.trim();
+		await preferences.updateUiSettings({
+			background_image_url: url || ''
+		});
+		if (url) {
+			toast.success('background image set');
+		} else {
+			toast.success('background image cleared');
+		}
+	}
+
+	async function saveBackgroundTile(tile: boolean) {
+		await preferences.updateUiSettings({ background_tile: tile });
+		toast.success(tile ? 'background tiled' : 'background stretched');
+	}
+
+	async function saveUsePlayingArtwork(enabled: boolean) {
+		await preferences.updateUiSettings({ use_playing_artwork_as_background: enabled });
+		toast.success(enabled ? 'using playing artwork as background' : 'using custom background');
 	}
 
 	function selectTheme(theme: Theme) {
···
 						</div>
 					</div>
 				</div>
+
+				<div class="setting-row">
+					<div class="setting-info">
+						<h3>background image</h3>
+						<p>set a custom background image (URL)</p>
+					</div>
+					<div class="background-controls">
+						<input
+							type="url"
+							class="background-input"
+							placeholder="https://..."
+							bind:value={backgroundInput}
+							onblur={saveBackgroundImage}
+							onkeydown={(e) => e.key === 'Enter' && saveBackgroundImage()}
+							disabled={usePlayingArtwork}
+						/>
+						{#if backgroundImageUrl && !usePlayingArtwork}
+							<label class="tile-toggle">
+								<input
+									type="checkbox"
+									checked={backgroundTile}
+									onchange={(e) => saveBackgroundTile((e.target as HTMLInputElement).checked)}
+								/>
+								<span>tile</span>
+							</label>
+						{/if}
+					</div>
+				</div>
+
+				<div class="setting-row">
+					<div class="setting-info">
+						<h3>playing artwork as background</h3>
+						<p>use the currently playing track's artwork as background (overrides custom image)</p>
+					</div>
+					<label class="toggle-switch">
+						<input
+							type="checkbox"
+							checked={usePlayingArtwork}
+							onchange={(e) => saveUsePlayingArtwork((e.target as HTMLInputElement).checked)}
+						/>
+						<span class="toggle-slider"></span>
+					</label>
+				</div>
 			</div>
 		</section>
 
···
 		letter-spacing: 0.08em;
 		color: var(--text-tertiary);
 		margin-bottom: 0.75rem;
+		text-shadow: var(--text-shadow, none);
 	}
 
 	.settings-card {
···
 	.preset-btn.active {
 		border-color: var(--text-primary);
 		box-shadow: 0 0 0 1px var(--bg-secondary);
+	}
+
+	/* background controls */
+	.background-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		flex-shrink: 0;
+	}
+
+	.background-input {
+		width: 200px;
+		padding: 0.5rem 0.75rem;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
+		border-radius: 6px;
+		color: var(--text-primary);
+		font-size: 0.85rem;
+		font-family: inherit;
+	}
+
+	.background-input:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+
+	.background-input::placeholder {
+		color: var(--text-tertiary);
+	}
+
+	.tile-toggle {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		font-size: 0.8rem;
+		color: var(--text-secondary);
+		cursor: pointer;
+	}
+
+	.tile-toggle input {
+		accent-color: var(--accent);
 	}
 
 	/* toggle switch */

frontend/src/routes/tag/[name]/+page.svelte

···
 		font-size: 0.95rem;
 		color: var(--text-tertiary);
 		margin: 0;
+		text-shadow: var(--text-shadow, none);
 	}
 
 	.btn-queue-all {
···
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.6rem 1rem;
-		background: transparent;
-		border: 1px solid var(--accent);
+		background: var(--glass-btn-bg, transparent);
+		border: 1px solid var(--glass-btn-border, var(--accent));
 		color: var(--accent);
 		border-radius: 6px;
 		font-size: 0.9rem;

frontend/src/routes/u/[handle]/album/[slug]/+page.svelte

···
 		letter-spacing: 0.1em;
 		color: var(--text-tertiary);
 		margin: 0;
+		text-shadow: var(--text-shadow, none);
 	}
 
 	.album-title {
···
 		word-wrap: break-word;
 		overflow-wrap: break-word;
 		hyphens: auto;
+		text-shadow: var(--text-shadow, none);
 	}
 
 	.album-meta {
···
 		gap: 0.75rem;
 		font-size: 0.95rem;
 		color: var(--text-secondary);
+		text-shadow: var(--text-shadow, none);
 	}
 
 	.artist-link {
···
 		text-decoration: none;
 		font-weight: 600;
 		transition: color 0.2s;
+		text-shadow: var(--text-shadow, none);
 	}
 
 	.artist-link:hover {
···
 	}
 
 	.queue-button {
-		background: transparent;
+		background: var(--glass-btn-bg, transparent);
 		color: var(--text-primary);
-		border: 1px solid var(--border-default);
+		border: 1px solid var(--glass-btn-border, var(--border-default));
 	}
 
 	.queue-button:hover {
+		background: var(--glass-btn-bg-hover, transparent);
 		border-color: var(--accent);
 		color: var(--accent);
 	}