diff --git a/frontend-v2/src/lib/components/media/PodcastPlayer.svelte b/frontend-v2/src/lib/components/media/PodcastPlayer.svelte
new file mode 100644
index 0000000..b00b2ac
--- /dev/null
+++ b/frontend-v2/src/lib/components/media/PodcastPlayer.svelte
@@ -0,0 +1,1551 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+
+	// ── Types ──
+	interface Show {
+		id: string;
+		title: string;
+		author: string;
+		artwork_url: string;
+		feed_url: string;
+		episode_count: number;
+		unplayed_count: number;
+	}
+
+	interface Episode {
+		id: string;
+		show_id: string;
+		show_title: string;
+		title: string;
+		description: string;
+		artwork_url: string;
+		audio_url: string;
+		duration: number;
+		published_at: string;
+		status: 'unplayed' | 'in-progress' | 'played';
+		progress_seconds: number;
+	}
+
+	interface QueueItem {
+		position: number;
+		episode: Episode;
+	}
+
+	// ── State ──
+	let shows = $state<Show[]>([]);
+	let episodes = $state<Episode[]>([]);
+	let selectedShowId = $state<string | null>(null);
+	let loading = $state(true);
+	let loadingEpisodes = $state(false);
+	let error = $state('');
+
+	// Player state
+	let currentEpisode = $state<Episode | null>(null);
+	let isPlaying = $state(false);
+	let currentTime = $state(0);
+	let duration = $state(0);
+	let playbackRate = $state(1);
+	let isSeeking = $state(false);
+
+	// Queue state
+	let queue = $state<QueueItem[]>([]);
+	let showQueue = $state(false);
+
+	// Add show
+	let showAddForm = $state(false);
+	let feedUrl = $state('');
+	let addingShow = $state(false);
+
+	// Mobile state
+	let mobileShowSidebar = $state(false);
+
+	// Audio element
+	let audio: HTMLAudioElement;
+	let progressReportInterval: ReturnType<typeof setInterval> | null = null;
+
+	// ── Derived ──
+	const selectedShow = $derived(shows.find(s => s.id === selectedShowId) ?? null);
+	const totalUnplayed = $derived(shows.reduce((sum, s) => sum + s.unplayed_count, 0));
+
+	// ── Lifecycle ──
+	onMount(() => {
+		audio = new Audio();
+		audio.preload = 'metadata';
+
+		const savedRate = localStorage.getItem('podcast-playback-rate');
+		if (savedRate) playbackRate = parseFloat(savedRate);
+
+		audio.addEventListener('timeupdate', () => {
+			if (!isSeeking) currentTime = audio.currentTime;
+		});
+		audio.addEventListener('durationchange', () => {
+			if (audio.duration && isFinite(audio.duration)) duration = audio.duration;
+		});
+		audio.addEventListener('play', () => { isPlaying = true; });
+		audio.addEventListener('pause', () => { isPlaying = false; });
+		audio.addEventListener('ended', handleEpisodeEnd);
+		audio.addEventListener('loadedmetadata', () => {
+			if (audio.duration && isFinite(audio.duration)) duration = audio.duration;
+		});
+
+		loadShows();
+		loadEpisodes();
+		loadQueue();
+		loadNowPlaying();
+
+		progressReportInterval = setInterval(reportProgress, 30000);
+	});
+
+	onDestroy(() => {
+		if (progressReportInterval) clearInterval(progressReportInterval);
+		if (audio) {
+			reportProgress();
+			audio.pause();
+			audio.src = '';
+		}
+	});
+
+	// ── API helpers ──
+	async function apiFetch(url: string, opts: RequestInit = {}) {
+		const res = await fetch(url, { credentials: 'include', ...opts });
+		if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+		return res.json();
+	}
+
+	async function apiPost(url: string, body?: unknown) {
+		return apiFetch(url, {
+			method: 'POST',
+			headers: body ? { 'Content-Type': 'application/json' } : undefined,
+			body: body ? JSON.stringify(body) : undefined,
+		});
+	}
+
+	// ── Data loading ──
+	async function loadShows() {
+		try {
+			const data = await apiFetch('/api/media/shows');
+			shows = data.shows ?? data ?? [];
+		} catch { shows = []; }
+	}
+
+	async function loadEpisodes(showId?: string | null) {
+		loadingEpisodes = true;
+		try {
+			const params = new URLSearchParams({ limit: '50', offset: '0' });
+			if (showId) params.set('show_id', showId);
+			const data = await apiFetch(`/api/media/episodes?${params}`);
+			episodes = data.episodes ?? data ?? [];
+		} catch { episodes = []; }
+		loadingEpisodes = false;
+		loading = false;
+	}
+
+	async function loadQueue() {
+		try {
+			const data = await apiFetch('/api/media/queue');
+			queue = data.items ?? data ?? [];
+		} catch { queue = []; }
+	}
+
+	async function loadNowPlaying() {
+		try {
+			const data = await apiFetch('/api/media/playback/now-playing');
+			if (data?.episode) {
+				currentEpisode = data.episode;
+				duration = data.episode.duration || 0;
+				currentTime = data.position_seconds || data.episode.progress_seconds || 0;
+				// Don't auto-play, just load it
+				audio.src = getAudioUrl(data.episode);
+				audio.currentTime = currentTime;
+			}
+		} catch { /* no episode playing */ }
+	}
+
+	// ── Show management ──
+	async function addShow() {
+		if (!feedUrl.trim()) return;
+		addingShow = true;
+		error = '';
+		try {
+			await apiPost('/api/media/shows', { feed_url: feedUrl.trim() });
+			feedUrl = '';
+			showAddForm = false;
+			await loadShows();
+			await loadEpisodes(selectedShowId);
+		} catch (e: any) {
+			error = e.message || 'Failed to add podcast';
+		}
+		addingShow = false;
+	}
+
+	async function removeShow(id: string) {
+		try {
+			await apiFetch(`/api/media/shows/${id}`, { method: 'DELETE' });
+			if (selectedShowId === id) { selectedShowId = null; }
+			await loadShows();
+			await loadEpisodes(selectedShowId);
+		} catch { /* silent */ }
+	}
+
+	async function refreshShow(id: string) {
+		try {
+			await apiPost(`/api/media/shows/${id}/refresh`);
+			await loadShows();
+			await loadEpisodes(selectedShowId);
+		} catch { /* silent */ }
+	}
+
+	function selectShow(id: string | null) {
+		selectedShowId = id;
+		mobileShowSidebar = false;
+		loadEpisodes(id);
+	}
+
+	// ── Audio playback ──
+	function getAudioUrl(ep: Episode): string {
+		if (ep.audio_url.startsWith('http')) return ep.audio_url;
+		return `/api/media/episodes/${ep.id}/stream`;
+	}
+
+	async function playEpisode(ep: Episode) {
+		currentEpisode = ep;
+		duration = ep.duration || 0;
+		currentTime = ep.progress_seconds || 0;
+
+		audio.src = getAudioUrl(ep);
+		audio.playbackRate = playbackRate;
+		if (ep.progress_seconds > 0) {
+			audio.currentTime = ep.progress_seconds;
+		}
+		await audio.play();
+
+		apiPost('/api/media/playback/play', {
+			episode_id: ep.id,
+			position_seconds: ep.progress_seconds || 0,
+		}).catch(() => {});
+	}
+
+	function togglePlayPause() {
+		if (!currentEpisode) return;
+		if (isPlaying) {
+			audio.pause();
+			apiPost('/api/media/playback/pause', {
+				episode_id: currentEpisode.id,
+				position_seconds: Math.floor(audio.currentTime),
+			}).catch(() => {});
+		} else {
+			audio.play();
+			apiPost('/api/media/playback/play', {
+				episode_id: currentEpisode.id,
+				position_seconds: Math.floor(audio.currentTime),
+			}).catch(() => {});
+		}
+	}
+
+	function seek(e: MouseEvent | TouchEvent) {
+		const bar = (e.currentTarget as HTMLElement);
+		const rect = bar.getBoundingClientRect();
+		const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+		const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+		const newTime = pct * (duration || audio.duration || 0);
+		audio.currentTime = newTime;
+		currentTime = newTime;
+
+		if (currentEpisode) {
+			apiPost('/api/media/playback/seek', {
+				episode_id: currentEpisode.id,
+				position_seconds: Math.floor(newTime),
+			}).catch(() => {});
+		}
+	}
+
+	function setPlaybackRate(rate: number) {
+		playbackRate = rate;
+		audio.playbackRate = rate;
+		localStorage.setItem('podcast-playback-rate', String(rate));
+	}
+
+	function skipBack() {
+		audio.currentTime = Math.max(0, audio.currentTime - 15);
+		currentTime = audio.currentTime;
+	}
+
+	function skipForward() {
+		audio.currentTime = Math.min(audio.duration || 0, audio.currentTime + 30);
+		currentTime = audio.currentTime;
+	}
+
+	async function handleEpisodeEnd() {
+		if (currentEpisode) {
+			await apiPost('/api/media/playback/complete', { episode_id: currentEpisode.id }).catch(() => {});
+		}
+		// Auto-advance queue
+		if (queue.length > 0) {
+			const next = queue[0];
+			await playEpisode(next.episode);
+			queue = queue.slice(1);
+			await apiFetch(`/api/media/queue/${next.episode.id}`, { method: 'DELETE' }).catch(() => {});
+		} else {
+			isPlaying = false;
+			currentEpisode = null;
+		}
+		loadEpisodes(selectedShowId);
+	}
+
+	async function reportProgress() {
+		if (currentEpisode && isPlaying && audio.currentTime > 0) {
+			apiPost('/api/media/playback/seek', {
+				episode_id: currentEpisode.id,
+				position_seconds: Math.floor(audio.currentTime),
+			}).catch(() => {});
+		}
+	}
+
+	// ── Queue management ──
+	async function addToQueue(ep: Episode) {
+		try {
+			await apiPost('/api/media/queue/add', { episode_id: ep.id });
+			await loadQueue();
+		} catch { /* silent */ }
+	}
+
+	async function playNext(ep: Episode) {
+		try {
+			await apiPost('/api/media/queue/play-next', { episode_id: ep.id });
+			await loadQueue();
+		} catch { /* silent */ }
+	}
+
+	async function playNow(ep: Episode) {
+		try {
+			await apiPost('/api/media/queue/play-now', { episode_id: ep.id });
+			await playEpisode(ep);
+			await loadQueue();
+		} catch { /* silent */ }
+	}
+
+	async function removeFromQueue(episodeId: string) {
+		try {
+			await apiFetch(`/api/media/queue/${episodeId}`, { method: 'DELETE' });
+			queue = queue.filter(q => q.episode.id !== episodeId);
+		} catch { /* silent */ }
+	}
+
+	async function clearQueue() {
+		try {
+			await apiFetch('/api/media/queue', { method: 'DELETE' });
+			queue = [];
+		} catch { /* silent */ }
+	}
+
+	async function moveQueueItem(fromIdx: number, toIdx: number) {
+		if (toIdx < 0 || toIdx >= queue.length) return;
+		const items = [...queue];
+		const [moved] = items.splice(fromIdx, 1);
+		items.splice(toIdx, 0, moved);
+		queue = items;
+
+		try {
+			await apiPost('/api/media/queue/reorder', {
+				episode_ids: items.map(q => q.episode.id),
+			});
+		} catch { /* silent */ }
+	}
+
+	// ── Formatters ──
+	function formatDuration(seconds: number): string {
+		if (!seconds || seconds <= 0) return '--:--';
+		const h = Math.floor(seconds / 3600);
+		const m = Math.floor((seconds % 3600) / 60);
+		if (h > 0) return `${h}h ${m}m`;
+		return `${m} min`;
+	}
+
+	function formatTime(seconds: number): string {
+		if (!seconds || !isFinite(seconds) || seconds < 0) return '0:00';
+		const h = Math.floor(seconds / 3600);
+		const m = Math.floor((seconds % 3600) / 60);
+		const s = Math.floor(seconds % 60);
+		if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+		return `${m}:${String(s).padStart(2, '0')}`;
+	}
+
+	function formatDate(dateStr: string): string {
+		if (!dateStr) return '';
+		const d = new Date(dateStr);
+		const now = new Date();
+		const diff = now.getTime() - d.getTime();
+		const days = Math.floor(diff / 86400000);
+		if (days === 0) return 'Today';
+		if (days === 1) return 'Yesterday';
+		if (days < 7) return `${days}d ago`;
+		if (days < 30) return `${Math.floor(days / 7)}w ago`;
+		return d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' });
+	}
+
+	function progressPct(ep: Episode): number {
+		if (!ep.duration || ep.duration <= 0) return 0;
+		return Math.min(100, (ep.progress_seconds / ep.duration) * 100);
+	}
+
+	function artworkFor(ep: Episode): string {
+		if (ep.artwork_url) return ep.artwork_url;
+		const show = shows.find(s => s.id === ep.show_id);
+		return show?.artwork_url || '';
+	}
+
+	const rates = [0.5, 1, 1.25, 1.5, 2];
+	let showRateMenu = $state(false);
+</script>
+
+<div class="podcast-layout">
+	<!-- Mobile sidebar toggle -->
+	<button class="mobile-shows-btn btn-secondary" onclick={() => mobileShowSidebar = !mobileShowSidebar}>
+		<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
+		Shows
+		{#if totalUnplayed > 0}
+			<span class="badge accent">{totalUnplayed}</span>
+		{/if}
+	</button>
+
+	<!-- Sidebar -->
+	<aside class="shows-sidebar" class:open={mobileShowSidebar}>
+		<div class="sidebar-header">
+			<span class="module-title">Podcasts</span>
+			<button class="btn-icon" onclick={() => { showAddForm = !showAddForm; }} title="Add podcast">
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+			</button>
+		</div>
+
+		{#if showAddForm}
+			<form class="add-form" onsubmit={(e) => { e.preventDefault(); addShow(); }}>
+				<input class="input" type="url" bind:value={feedUrl} placeholder="RSS feed URL..." />
+				<button class="btn-primary" type="submit" disabled={addingShow || !feedUrl.trim()}>
+					{addingShow ? 'Adding...' : 'Add'}
+				</button>
+			</form>
+			{#if error}
+				<p class="error-msg">{error}</p>
+			{/if}
+		{/if}
+
+		<div class="show-list">
+			<button class="show-item" class:active={!selectedShowId} onclick={() => selectShow(null)}>
+				<div class="show-icon-all">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="20" r="1"/></svg>
+				</div>
+				<div class="show-info">
+					<span class="show-name">All Episodes</span>
+					<span class="show-meta">{shows.length} show{shows.length !== 1 ? 's' : ''}</span>
+				</div>
+				{#if totalUnplayed > 0}
+					<span class="unplayed-badge">{totalUnplayed}</span>
+				{/if}
+			</button>
+
+			{#each shows as show (show.id)}
+				<button class="show-item" class:active={selectedShowId === show.id} onclick={() => selectShow(show.id)}>
+					{#if show.artwork_url}
+						<img class="show-artwork" src={show.artwork_url} alt="" loading="lazy" />
+					{:else}
+						<div class="show-artwork-placeholder">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 11H5m14 0a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2m14 0V9a2 2 0 0 0-2-2M5 11V9a2 2 0 0 1 2-2m0 0V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2M7 7h10"/></svg>
+						</div>
+					{/if}
+					<div class="show-info">
+						<span class="show-name">{show.title}</span>
+						<span class="show-meta">{show.author || `${show.episode_count} episodes`}</span>
+					</div>
+					{#if show.unplayed_count > 0}
+						<span class="unplayed-badge">{show.unplayed_count}</span>
+					{/if}
+				</button>
+			{/each}
+		</div>
+	</aside>
+
+	<!-- Main panel -->
+	<main class="episodes-main">
+		{#if selectedShow}
+			<div class="show-banner">
+				<div class="show-banner-content">
+					{#if selectedShow.artwork_url}
+						<img class="banner-artwork" src={selectedShow.artwork_url} alt="" />
+					{/if}
+					<div class="banner-info">
+						<h2 class="banner-title">{selectedShow.title}</h2>
+						<p class="banner-author">{selectedShow.author}</p>
+						<p class="banner-stats">{selectedShow.episode_count} episodes &middot; {selectedShow.unplayed_count} unplayed</p>
+					</div>
+					<div class="banner-actions">
+						<button class="btn-icon" onclick={() => refreshShow(selectedShow.id)} title="Refresh feed">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+						</button>
+						<button class="btn-icon" onclick={() => removeShow(selectedShow.id)} title="Unsubscribe">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+						</button>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		{#if loading}
+			<div class="loading-state">
+				{#each Array(6) as _, i}
+					<div class="skeleton episode-skeleton">
+						<div class="skeleton" style="width: 56px; height: 56px; border-radius: var(--radius-sm);"></div>
+						<div style="flex: 1; display: flex; flex-direction: column; gap: 8px;">
+							<div class="skeleton" style="width: 70%; height: 14px;"></div>
+							<div class="skeleton" style="width: 40%; height: 12px;"></div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{:else if episodes.length === 0}
+			<div class="empty-state">
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="20" r="1"/></svg>
+				<p>{shows.length === 0 ? 'No podcasts yet. Add a show to get started.' : 'No episodes found.'}</p>
+			</div>
+		{:else}
+			<div class="episode-list">
+				{#each episodes as ep (ep.id)}
+					{@const art = artworkFor(ep)}
+					{@const pct = progressPct(ep)}
+					<div class="episode-card" class:playing={currentEpisode?.id === ep.id}>
+						<button class="episode-play-area" onclick={() => playEpisode(ep)}>
+							<div class="ep-artwork-wrap">
+								{#if art}
+									<img class="ep-artwork" src={art} alt="" loading="lazy" />
+								{:else}
+									<div class="ep-artwork ep-artwork-empty">
+										<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="20" r="1"/></svg>
+									</div>
+								{/if}
+								<div class="play-overlay">
+									{#if currentEpisode?.id === ep.id && isPlaying}
+										<svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>
+									{:else}
+										<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
+									{/if}
+								</div>
+							</div>
+						</button>
+
+						<div class="ep-body" onclick={() => playEpisode(ep)} role="button" tabindex="0" onkeydown={(e) => { if (e.key === 'Enter') playEpisode(ep); }}>
+							<div class="ep-header">
+								<span class="ep-title" class:unplayed={ep.status === 'unplayed'}>{ep.title}</span>
+								{#if !selectedShowId}
+									<span class="ep-show">{ep.show_title}</span>
+								{/if}
+							</div>
+							<div class="ep-meta">
+								<span>{formatDate(ep.published_at)}</span>
+								<span class="ep-dot">&middot;</span>
+								<span>{formatDuration(ep.duration)}</span>
+								{#if ep.status === 'in-progress' && pct > 0}
+									<span class="ep-dot">&middot;</span>
+									<span class="ep-progress-label">{Math.round(pct)}%</span>
+								{/if}
+							</div>
+							{#if ep.status === 'in-progress' && pct > 0}
+								<div class="ep-progress-bar">
+									<div class="ep-progress-fill" style="width: {pct}%"></div>
+								</div>
+							{/if}
+						</div>
+
+						<div class="ep-actions">
+							<button class="btn-icon" onclick={() => addToQueue(ep)} title="Add to queue">
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+							</button>
+							<button class="btn-icon" onclick={() => playNext(ep)} title="Play next">
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5,4 15,12 5,20"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
+							</button>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</main>
+</div>
+
+<!-- Player bar -->
+{#if currentEpisode}
+	{@const playerArt = artworkFor(currentEpisode)}
+	<div class="player-bar">
+		<div class="player-inner">
+			<!-- Episode info -->
+			<div class="player-info">
+				{#if playerArt}
+					<img class="player-artwork" src={playerArt} alt="" />
+				{:else}
+					<div class="player-artwork player-artwork-empty">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="20" r="1"/></svg>
+					</div>
+				{/if}
+				<div class="player-text">
+					<span class="player-title">{currentEpisode.title}</span>
+					<span class="player-show">{currentEpisode.show_title}</span>
+				</div>
+			</div>
+
+			<!-- Controls -->
+			<div class="player-controls">
+				<button class="control-btn" onclick={skipBack} title="Back 15s">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+					<span class="skip-label">15</span>
+				</button>
+
+				<button class="play-btn" onclick={togglePlayPause}>
+					{#if isPlaying}
+						<svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>
+					{:else}
+						<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
+					{/if}
+				</button>
+
+				<button class="control-btn" onclick={skipForward} title="Forward 30s">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+					<span class="skip-label">30</span>
+				</button>
+			</div>
+
+			<!-- Progress -->
+			<div class="player-progress-section">
+				<span class="time-label">{formatTime(currentTime)}</span>
+				<div class="player-progress-bar" onclick={seek} role="slider" tabindex="0" aria-valuenow={currentTime} aria-valuemin={0} aria-valuemax={duration}>
+					<div class="player-progress-fill" style="width: {duration > 0 ? (currentTime / duration) * 100 : 0}%">
+						<div class="player-progress-thumb"></div>
+					</div>
+				</div>
+				<span class="time-label">{formatTime(duration)}</span>
+			</div>
+
+			<!-- Right actions -->
+			<div class="player-right">
+				<div class="rate-control">
+					<button class="rate-btn" onclick={() => showRateMenu = !showRateMenu}>
+						{playbackRate}x
+					</button>
+					{#if showRateMenu}
+						<div class="rate-menu">
+							{#each rates as rate}
+								<button class="rate-option" class:active={playbackRate === rate} onclick={() => { setPlaybackRate(rate); showRateMenu = false; }}>
+									{rate}x
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<button class="queue-btn" onclick={() => showQueue = !showQueue} title="Queue">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+					{#if queue.length > 0}
+						<span class="queue-count">{queue.length}</span>
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Queue slide-out -->
+{#if showQueue}
+	<div class="queue-overlay" onclick={() => showQueue = false} role="presentation"></div>
+	<aside class="queue-panel">
+		<div class="queue-header">
+			<span class="module-title">Queue</span>
+			<div class="queue-header-actions">
+				{#if queue.length > 0}
+					<button class="btn-secondary" onclick={clearQueue} style="font-size: var(--text-xs); padding: 4px 10px;">Clear</button>
+				{/if}
+				<button class="btn-icon" onclick={() => showQueue = false}>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+				</button>
+			</div>
+		</div>
+
+		{#if queue.length === 0}
+			<div class="queue-empty">
+				<p>Queue is empty</p>
+				<span>Add episodes from the list</span>
+			</div>
+		{:else}
+			<div class="queue-list">
+				{#each queue as item, idx (item.episode.id)}
+					{@const qArt = artworkFor(item.episode)}
+					<div class="queue-item">
+						<div class="queue-reorder">
+							<button class="reorder-btn" disabled={idx === 0} onclick={() => moveQueueItem(idx, idx - 1)} title="Move up">
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>
+							</button>
+							<button class="reorder-btn" disabled={idx === queue.length - 1} onclick={() => moveQueueItem(idx, idx + 1)} title="Move down">
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+							</button>
+						</div>
+						{#if qArt}
+							<img class="queue-artwork" src={qArt} alt="" loading="lazy" />
+						{:else}
+							<div class="queue-artwork queue-artwork-empty">
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="5" cy="20" r="1"/></svg>
+							</div>
+						{/if}
+						<div class="queue-info">
+							<span class="queue-ep-title">{item.episode.title}</span>
+							<span class="queue-ep-show">{item.episode.show_title}</span>
+						</div>
+						<button class="btn-icon" onclick={() => removeFromQueue(item.episode.id)} title="Remove">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+						</button>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</aside>
+{/if}
+
+<style>
+	/* ── Layout ── */
+	.podcast-layout {
+		display: grid;
+		grid-template-columns: 280px 1fr;
+		gap: 0;
+		min-height: 60vh;
+		border: 1px solid var(--border);
+		border-radius: var(--radius);
+		background: var(--card);
+		overflow: hidden;
+		box-shadow: var(--shadow-sm);
+	}
+
+	.mobile-shows-btn {
+		display: none;
+		align-items: center;
+		gap: var(--sp-2);
+		margin-bottom: var(--sp-3);
+		width: 100%;
+		justify-content: center;
+	}
+	.mobile-shows-btn svg { width: 16px; height: 16px; }
+
+	/* ── Sidebar ── */
+	.shows-sidebar {
+		border-right: 1px solid var(--border);
+		background: var(--surface-secondary);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.sidebar-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--sp-4) var(--sp-4) var(--sp-3);
+	}
+
+	.add-form {
+		display: flex;
+		gap: var(--sp-2);
+		padding: 0 var(--sp-4) var(--sp-3);
+	}
+	.add-form .input {
+		flex: 1;
+		font-size: var(--text-sm);
+		padding: var(--sp-2) var(--sp-3);
+	}
+	.add-form .btn-primary {
+		flex-shrink: 0;
+		font-size: var(--text-sm);
+		padding: var(--sp-2) var(--sp-3);
+	}
+
+	.error-msg {
+		color: var(--error);
+		font-size: var(--text-xs);
+		padding: 0 var(--sp-4) var(--sp-2);
+	}
+
+	.show-list {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0 var(--sp-2) var(--sp-2);
+	}
+
+	.show-item {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+		width: 100%;
+		padding: var(--sp-2) var(--sp-2);
+		border: none;
+		background: none;
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		transition: background var(--transition);
+		text-align: left;
+		font-family: var(--font);
+	}
+	.show-item:hover { background: var(--card-hover); }
+	.show-item.active { background: var(--accent-dim); }
+
+	.show-artwork {
+		width: 40px;
+		height: 40px;
+		border-radius: var(--radius-xs);
+		object-fit: cover;
+		flex-shrink: 0;
+	}
+
+	.show-artwork-placeholder {
+		width: 40px;
+		height: 40px;
+		border-radius: var(--radius-xs);
+		background: var(--card-hover);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: var(--text-4);
+	}
+	.show-artwork-placeholder svg { width: 20px; height: 20px; }
+
+	.show-icon-all {
+		width: 40px;
+		height: 40px;
+		border-radius: var(--radius-xs);
+		background: var(--accent-dim);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: var(--accent);
+	}
+	.show-icon-all svg { width: 20px; height: 20px; }
+
+	.show-info {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.show-name {
+		font-size: var(--text-sm);
+		font-weight: 500;
+		color: var(--text-1);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.show-meta {
+		font-size: var(--text-xs);
+		color: var(--text-3);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.unplayed-badge {
+		font-size: 10px;
+		font-weight: 700;
+		background: var(--accent);
+		color: white;
+		min-width: 18px;
+		height: 18px;
+		border-radius: var(--radius-full);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 5px;
+		flex-shrink: 0;
+		font-family: var(--mono);
+	}
+
+	/* ── Main episodes panel ── */
+	.episodes-main {
+		overflow-y: auto;
+		max-height: calc(100vh - 200px);
+	}
+
+	/* Show banner */
+	.show-banner {
+		padding: var(--sp-5);
+		border-bottom: 1px solid var(--border);
+		background: var(--surface-secondary);
+	}
+	.show-banner-content {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-4);
+	}
+	.banner-artwork {
+		width: 72px;
+		height: 72px;
+		border-radius: var(--radius-md);
+		object-fit: cover;
+		flex-shrink: 0;
+		box-shadow: var(--shadow-sm);
+	}
+	.banner-info { flex: 1; min-width: 0; }
+	.banner-title {
+		font-size: var(--text-lg);
+		font-weight: 600;
+		color: var(--text-1);
+		line-height: var(--leading-tight);
+		margin: 0;
+	}
+	.banner-author {
+		font-size: var(--text-sm);
+		color: var(--text-3);
+		margin: 2px 0 0;
+	}
+	.banner-stats {
+		font-size: var(--text-xs);
+		color: var(--text-4);
+		margin: 4px 0 0;
+	}
+	.banner-actions {
+		display: flex;
+		gap: var(--sp-2);
+		flex-shrink: 0;
+	}
+
+	/* Episode list */
+	.episode-list {
+		padding: var(--sp-2) 0;
+	}
+
+	.episode-card {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+		padding: var(--sp-3) var(--sp-4);
+		border-bottom: 1px solid var(--border);
+		transition: background var(--transition);
+	}
+	.episode-card:hover { background: var(--card-hover); }
+	.episode-card.playing { background: var(--accent-dim); }
+	.episode-card:last-child { border-bottom: none; }
+
+	.episode-play-area {
+		flex-shrink: 0;
+		border: none;
+		background: none;
+		padding: 0;
+		cursor: pointer;
+	}
+
+	.ep-artwork-wrap {
+		position: relative;
+		width: 52px;
+		height: 52px;
+	}
+
+	.ep-artwork {
+		width: 52px;
+		height: 52px;
+		border-radius: var(--radius-sm);
+		object-fit: cover;
+	}
+	.ep-artwork-empty {
+		background: var(--card-hover);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--text-4);
+	}
+	.ep-artwork-empty svg { width: 24px; height: 24px; }
+
+	.play-overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(0,0,0,0.4);
+		border-radius: var(--radius-sm);
+		opacity: 0;
+		transition: opacity var(--transition);
+		color: white;
+	}
+	.play-overlay svg { width: 20px; height: 20px; }
+	.episode-play-area:hover .play-overlay,
+	.episode-card.playing .play-overlay { opacity: 1; }
+
+	.ep-body {
+		flex: 1;
+		min-width: 0;
+		cursor: pointer;
+	}
+
+	.ep-header {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.ep-title {
+		font-size: var(--text-base);
+		color: var(--text-2);
+		font-weight: 400;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		line-height: var(--leading-snug);
+	}
+	.ep-title.unplayed {
+		color: var(--text-1);
+		font-weight: 500;
+	}
+
+	.ep-show {
+		font-size: var(--text-xs);
+		color: var(--text-3);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.ep-meta {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		margin-top: 4px;
+		font-size: var(--text-xs);
+		color: var(--text-4);
+	}
+
+	.ep-dot { opacity: 0.4; }
+
+	.ep-progress-label {
+		color: var(--accent);
+		font-weight: 500;
+	}
+
+	.ep-progress-bar {
+		width: 100%;
+		height: 3px;
+		background: var(--border);
+		border-radius: var(--radius-full);
+		margin-top: 6px;
+		overflow: hidden;
+	}
+	.ep-progress-fill {
+		height: 100%;
+		background: var(--accent);
+		border-radius: var(--radius-full);
+		transition: width 0.3s ease;
+	}
+
+	.ep-actions {
+		display: flex;
+		gap: var(--sp-1);
+		flex-shrink: 0;
+		opacity: 0;
+		transition: opacity var(--transition);
+	}
+	.episode-card:hover .ep-actions { opacity: 1; }
+	.ep-actions .btn-icon {
+		width: 30px;
+		height: 30px;
+	}
+	.ep-actions .btn-icon svg { width: 14px; height: 14px; }
+
+	/* ── Loading / empty ── */
+	.loading-state {
+		padding: var(--sp-4);
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-3);
+	}
+	.episode-skeleton {
+		display: flex;
+		gap: var(--sp-3);
+		padding: var(--sp-3);
+		border-radius: var(--radius-sm);
+		height: 72px;
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: var(--sp-16) var(--sp-4);
+		color: var(--text-4);
+		text-align: center;
+		gap: var(--sp-3);
+	}
+	.empty-state svg {
+		width: 48px;
+		height: 48px;
+		opacity: 0.4;
+	}
+	.empty-state p {
+		font-size: var(--text-base);
+		margin: 0;
+	}
+
+	/* ── Player bar ── */
+	.player-bar {
+		position: sticky;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 50;
+		background: var(--surface);
+		backdrop-filter: blur(20px);
+		-webkit-backdrop-filter: blur(20px);
+		border-top: 1px solid var(--border);
+		box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
+		padding: var(--sp-3) var(--sp-4);
+		padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
+	}
+
+	.player-inner {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-4);
+		max-width: 1280px;
+		margin: 0 auto;
+	}
+
+	.player-info {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+		min-width: 0;
+		flex: 0 1 220px;
+	}
+
+	.player-artwork {
+		width: 44px;
+		height: 44px;
+		border-radius: var(--radius-xs);
+		object-fit: cover;
+		flex-shrink: 0;
+	}
+	.player-artwork-empty {
+		background: var(--card-hover);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--text-4);
+	}
+	.player-artwork-empty svg { width: 20px; height: 20px; }
+
+	.player-text {
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	.player-title {
+		font-size: var(--text-sm);
+		font-weight: 500;
+		color: var(--text-1);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.player-show {
+		font-size: var(--text-xs);
+		color: var(--text-3);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/* Controls */
+	.player-controls {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		flex-shrink: 0;
+	}
+
+	.control-btn {
+		position: relative;
+		width: 36px;
+		height: 36px;
+		border: none;
+		background: none;
+		cursor: pointer;
+		color: var(--text-2);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--radius-full);
+		transition: all var(--transition);
+		padding: 0;
+	}
+	.control-btn:hover { background: var(--card-hover); color: var(--text-1); }
+	.control-btn svg { width: 20px; height: 20px; }
+	.skip-label {
+		position: absolute;
+		font-size: 8px;
+		font-weight: 700;
+		color: inherit;
+		font-family: var(--mono);
+		bottom: 4px;
+	}
+
+	.play-btn {
+		width: 44px;
+		height: 44px;
+		border-radius: var(--radius-full);
+		border: none;
+		background: var(--text-1);
+		color: var(--surface);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all var(--transition);
+		flex-shrink: 0;
+	}
+	.play-btn:hover { transform: scale(1.05); }
+	.play-btn:active { transform: scale(0.95); }
+	.play-btn svg { width: 20px; height: 20px; }
+
+	/* Progress bar */
+	.player-progress-section {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		flex: 1;
+		min-width: 0;
+	}
+
+	.time-label {
+		font-size: 11px;
+		font-family: var(--mono);
+		color: var(--text-4);
+		min-width: 40px;
+		text-align: center;
+		flex-shrink: 0;
+		user-select: none;
+	}
+
+	.player-progress-bar {
+		flex: 1;
+		height: 6px;
+		background: var(--border);
+		border-radius: var(--radius-full);
+		cursor: pointer;
+		position: relative;
+		transition: height var(--transition);
+	}
+	.player-progress-bar:hover { height: 8px; }
+
+	.player-progress-fill {
+		height: 100%;
+		background: var(--accent);
+		border-radius: var(--radius-full);
+		position: relative;
+		transition: width 0.1s linear;
+		max-width: 100%;
+	}
+
+	.player-progress-thumb {
+		position: absolute;
+		right: -5px;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 12px;
+		height: 12px;
+		border-radius: var(--radius-full);
+		background: var(--accent);
+		box-shadow: var(--shadow-sm);
+		opacity: 0;
+		transition: opacity var(--transition);
+	}
+	.player-progress-bar:hover .player-progress-thumb { opacity: 1; }
+
+	/* Right actions */
+	.player-right {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		flex-shrink: 0;
+	}
+
+	.rate-control { position: relative; }
+	.rate-btn {
+		padding: 4px 8px;
+		border-radius: var(--radius-xs);
+		border: 1px solid var(--border);
+		background: none;
+		font-size: var(--text-xs);
+		font-weight: 600;
+		font-family: var(--mono);
+		color: var(--text-2);
+		cursor: pointer;
+		transition: all var(--transition);
+	}
+	.rate-btn:hover { background: var(--card-hover); color: var(--text-1); }
+
+	.rate-menu {
+		position: absolute;
+		bottom: calc(100% + 8px);
+		right: 0;
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md);
+		box-shadow: var(--shadow-lg);
+		padding: var(--sp-1);
+		display: flex;
+		flex-direction: column;
+		z-index: 60;
+	}
+	.rate-option {
+		padding: 6px 14px;
+		font-size: var(--text-sm);
+		font-family: var(--mono);
+		border: none;
+		background: none;
+		color: var(--text-2);
+		cursor: pointer;
+		border-radius: var(--radius-xs);
+		text-align: left;
+		white-space: nowrap;
+		transition: all var(--transition);
+		font-weight: 500;
+	}
+	.rate-option:hover { background: var(--card-hover); color: var(--text-1); }
+	.rate-option.active { color: var(--accent); font-weight: 600; }
+
+	.queue-btn {
+		position: relative;
+		width: 36px;
+		height: 36px;
+		border: none;
+		background: none;
+		cursor: pointer;
+		color: var(--text-3);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--radius-md);
+		transition: all var(--transition);
+		padding: 0;
+	}
+	.queue-btn:hover { background: var(--card-hover); color: var(--text-1); }
+	.queue-btn svg { width: 18px; height: 18px; }
+	.queue-count {
+		position: absolute;
+		top: 2px;
+		right: 2px;
+		min-width: 14px;
+		height: 14px;
+		border-radius: var(--radius-full);
+		background: var(--accent);
+		color: white;
+		font-size: 9px;
+		font-weight: 700;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 3px;
+		font-family: var(--mono);
+	}
+
+	/* ── Queue panel ── */
+	.queue-overlay {
+		position: fixed;
+		inset: 0;
+		background: var(--overlay);
+		z-index: 80;
+	}
+	.queue-panel {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 360px;
+		max-width: 90vw;
+		background: var(--surface);
+		border-left: 1px solid var(--border);
+		box-shadow: var(--shadow-xl);
+		z-index: 90;
+		display: flex;
+		flex-direction: column;
+		animation: slideIn 0.2s ease;
+	}
+	@keyframes slideIn {
+		from { transform: translateX(100%); }
+		to { transform: translateX(0); }
+	}
+
+	.queue-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--sp-4) var(--sp-4) var(--sp-3);
+		border-bottom: 1px solid var(--border);
+	}
+	.queue-header-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+	}
+
+	.queue-empty {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		color: var(--text-4);
+		gap: var(--sp-1);
+	}
+	.queue-empty p {
+		font-size: var(--text-base);
+		font-weight: 500;
+		margin: 0;
+	}
+	.queue-empty span { font-size: var(--text-sm); }
+
+	.queue-list {
+		flex: 1;
+		overflow-y: auto;
+		padding: var(--sp-2);
+	}
+
+	.queue-item {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: var(--sp-2);
+		border-radius: var(--radius-sm);
+		transition: background var(--transition);
+	}
+	.queue-item:hover { background: var(--card-hover); }
+	.queue-item + .queue-item { border-top: 1px solid var(--border); }
+
+	.queue-reorder {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		flex-shrink: 0;
+	}
+	.reorder-btn {
+		width: 22px;
+		height: 16px;
+		border: none;
+		background: none;
+		cursor: pointer;
+		color: var(--text-4);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		border-radius: 2px;
+		transition: all var(--transition);
+	}
+	.reorder-btn:hover:not(:disabled) { color: var(--text-1); background: var(--card-hover); }
+	.reorder-btn:disabled { opacity: 0.2; cursor: default; }
+	.reorder-btn svg { width: 14px; height: 14px; }
+
+	.queue-artwork {
+		width: 36px;
+		height: 36px;
+		border-radius: var(--radius-xs);
+		object-fit: cover;
+		flex-shrink: 0;
+	}
+	.queue-artwork-empty {
+		background: var(--card-hover);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--text-4);
+	}
+
+	.queue-info {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	.queue-ep-title {
+		font-size: var(--text-sm);
+		font-weight: 500;
+		color: var(--text-1);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.queue-ep-show {
+		font-size: var(--text-xs);
+		color: var(--text-3);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.queue-item .btn-icon {
+		width: 28px;
+		height: 28px;
+	}
+	.queue-item .btn-icon svg { width: 12px; height: 12px; }
+
+	/* ── Mobile ── */
+	@media (max-width: 768px) {
+		.podcast-layout {
+			display: flex;
+			flex-direction: column;
+			min-height: auto;
+		}
+
+		.mobile-shows-btn { display: flex; }
+
+		.shows-sidebar {
+			display: none;
+			position: fixed;
+			inset: 0;
+			z-index: 70;
+			border-right: none;
+			padding-top: env(safe-area-inset-top, 0px);
+		}
+		.shows-sidebar.open {
+			display: flex;
+		}
+
+		.episodes-main {
+			max-height: none;
+		}
+
+		/* Player bar responsive */
+		.player-inner {
+			flex-wrap: wrap;
+			gap: var(--sp-2);
+		}
+		.player-info { flex: 1 1 100%; order: 1; }
+		.player-controls { order: 3; }
+		.player-progress-section { flex: 1 1 100%; order: 2; }
+		.player-right { order: 4; margin-left: auto; }
+
+		.ep-actions { opacity: 1; }
+
+		.show-banner-content {
+			flex-wrap: wrap;
+		}
+		.banner-artwork {
+			width: 56px;
+			height: 56px;
+		}
+	}
+
+	@media (max-width: 480px) {
+		.player-info { flex-basis: auto; }
+		.player-inner { gap: var(--sp-1); }
+		.player-progress-section { order: 2; }
+		.player-controls { order: 3; flex: 0; }
+		.player-right { order: 4; }
+	}
+</style>
diff --git a/frontend-v2/src/routes/(app)/media/+page.svelte b/frontend-v2/src/routes/(app)/media/+page.svelte
index f893ff2..ffeec28 100644
--- a/frontend-v2/src/routes/(app)/media/+page.svelte
+++ b/frontend-v2/src/routes/(app)/media/+page.svelte
@@ -3,11 +3,17 @@
 	import BookSearch from '$lib/components/media/BookSearch.svelte';
 	import MusicSearch from '$lib/components/media/MusicSearch.svelte';
 	import BookLibrary from '$lib/components/media/BookLibrary.svelte';
+	import PodcastPlayer from '$lib/components/media/PodcastPlayer.svelte';
 
-	type MediaTab = 'books' | 'music' | 'library';
+	type MediaTab = 'books' | 'music' | 'library' | 'podcasts';
 
 	const urlMode = page.url.searchParams.get('mode');
-	let activeTab = $state<MediaTab>(urlMode === 'music' ? 'music' : urlMode === 'library' ? 'library' : 'books');
+	let activeTab = $state<MediaTab>(
+		urlMode === 'music' ? 'music'
+		: urlMode === 'library' ? 'library'
+		: urlMode === 'podcasts' ? 'podcasts'
+		: 'books'
+	);
 </script>
 
 <div class="page">
@@ -17,6 +23,7 @@
 			<div class="page-subtitle">
 				{#if activeTab === 'books'}Book Downloads
 				{:else if activeTab === 'music'}Music Downloads
+				{:else if activeTab === 'podcasts'}Podcast Player
 				{:else}Book Library{/if}
 			</div>
 		</div>
@@ -30,6 +37,10 @@
 				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
 				Music
 			</button>
+			<button class="tab" class:active={activeTab === 'podcasts'} onclick={() => activeTab = 'podcasts'}>
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="20" r="1"/></svg>
+				Podcasts
+			</button>
 			<button class="tab" class:active={activeTab === 'library'} onclick={() => activeTab = 'library'}>
 				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
 				Library
@@ -40,6 +51,8 @@
 			<BookSearch />
 		{:else if activeTab === 'music'}
 			<MusicSearch />
+		{:else if activeTab === 'podcasts'}
+			<PodcastPlayer />
 		{:else}
 			<BookLibrary />
 		{/if}