diff --git a/frontend-v2/src/lib/components/media/PodcastPlayer.svelte b/frontend-v2/src/lib/components/media/PodcastPlayer.svelte
index 6e9da80..aafa1cf 100644
--- a/frontend-v2/src/lib/components/media/PodcastPlayer.svelte
+++ b/frontend-v2/src/lib/components/media/PodcastPlayer.svelte
@@ -398,168 +398,360 @@
 	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>
+<div style="display:flex; min-height:calc(100vh - 60px); font-family:var(--font); position:relative;">
 
-	<!-- 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>
+	<!-- ═══ Desktop Sidebar ═══ -->
+	<aside style="
+		width:248px; flex-shrink:0; min-height:0;
+		background:rgba(245,237,228,0.82);
+		border-right:1px solid rgba(35,26,17,0.08);
+		display:flex; flex-direction:column;
+		overflow-y:auto; padding:16px 0 12px;
+		backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
+	" class="desktop-sidebar">
+
+		<!-- Sidebar header -->
+		<div style="display:flex; align-items:center; justify-content:space-between; padding:0 18px 14px;">
+			<div style="display:flex; align-items:center; gap:8px;">
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1e1812" 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>
+				<span style="font-size:1rem; font-weight:700; color:#1e1812; letter-spacing:-0.03em;">Podcasts</span>
+			</div>
+			<button
+				style="width:28px; height:28px; border-radius:8px; border:none; background:none; color:#8c7b69; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 140ms; padding:0;"
+				onclick={() => { showAddForm = !showAddForm; }}
+				title="Add podcast"
+				onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.72)'; (e.currentTarget as HTMLElement).style.color = '#1e1812'; }}
+				onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; (e.currentTarget as HTMLElement).style.color = '#8c7b69'; }}
+			>
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
 			</button>
 		</div>
 
+		<!-- Add form -->
 		{#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()}>
+			<form style="display:flex; gap:4px; padding:0 12px 10px;" onsubmit={(e) => { e.preventDefault(); addShow(); }}>
+				<input
+					type="url"
+					bind:value={feedUrl}
+					placeholder="RSS feed URL..."
+					style="flex:1; min-width:0; padding:7px 10px; border-radius:12px; border:1px solid rgba(35,26,17,0.12); background:rgba(255,255,255,0.7); font-size:0.78rem; font-family:var(--font); color:#1e1812; outline:none; transition:border-color 160ms;"
+				/>
+				<button
+					type="submit"
+					disabled={addingShow || !feedUrl.trim()}
+					style="flex-shrink:0; padding:7px 10px; border-radius:12px; border:none; background:#1e1812; color:white; font-size:0.72rem; font-weight:600; font-family:var(--font); cursor:pointer; transition:opacity 160ms; opacity:{addingShow || !feedUrl.trim() ? '0.4' : '1'};"
+				>
 					{addingShow ? 'Adding...' : 'Add'}
 				</button>
 			</form>
 			{#if error}
-				<p class="error-msg">{error}</p>
+				<p style="color:#DC2626; font-size:0.72rem; padding:0 18px 8px; margin:0;">{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>
+		<!-- Section label -->
+		<div style="padding:0 18px 6px;">
+			<span style="font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:#8c7b69;">Shows</span>
+		</div>
+
+		<!-- Show list -->
+		<div style="flex:1; overflow-y:auto; padding:0 8px 8px; display:flex; flex-direction:column; gap:1px;">
+			<!-- All Episodes -->
+			<button
+				style="
+					display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px;
+					border:none; border-radius:14px; cursor:pointer; text-align:left; font-family:var(--font);
+					transition:all 160ms;
+					background:{!selectedShowId ? 'rgba(255,248,241,0.92)' : 'none'};
+					{!selectedShowId ? 'box-shadow:inset 0 0 0 1px rgba(35,26,17,0.08); border-left:3px solid rgba(179,92,50,0.6);' : 'border-left:3px solid transparent;'}
+				"
+				onclick={() => selectShow(null)}
+				onmouseenter={(e) => { if (selectedShowId) (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.72)'; }}
+				onmouseleave={(e) => { if (selectedShowId) (e.currentTarget as HTMLElement).style.background = 'none'; }}
+			>
+				<div style="width:36px; height:36px; border-radius:10px; background:rgba(179,92,50,0.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#7f5f3d;">
+					<svg width="18" height="18" 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 style="flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;">
+					<span style="font-size:0.85rem; font-weight:{!selectedShowId ? '600' : '500'}; color:#1e1812; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">All Episodes</span>
+					<span style="font-size:0.72rem; color:#8c7b69;">{shows.length} show{shows.length !== 1 ? 's' : ''}</span>
 				</div>
 				{#if totalUnplayed > 0}
-					<span class="unplayed-badge">{totalUnplayed}</span>
+					<span style="font-size:10px; font-weight:700; background:#059669; color:white; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px; flex-shrink:0; font-family:var(--mono);">
+						{totalUnplayed}
+					</span>
 				{/if}
 			</button>
 
 			{#each shows as show (show.id)}
-				<button class="show-item" class:active={selectedShowId === show.id} onclick={() => selectShow(show.id)}>
+				<button
+					style="
+						display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px;
+						border:none; border-radius:14px; cursor:pointer; text-align:left; font-family:var(--font);
+						transition:all 160ms;
+						background:{selectedShowId === show.id ? 'rgba(255,248,241,0.92)' : 'none'};
+						{selectedShowId === show.id ? 'box-shadow:inset 0 0 0 1px rgba(35,26,17,0.08); border-left:3px solid rgba(179,92,50,0.6);' : 'border-left:3px solid transparent;'}
+					"
+					onclick={() => selectShow(show.id)}
+					onmouseenter={(e) => { if (selectedShowId !== show.id) (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.72)'; }}
+					onmouseleave={(e) => { if (selectedShowId !== show.id) (e.currentTarget as HTMLElement).style.background = 'none'; }}
+				>
 					{#if show.artwork_url}
-						<img class="show-artwork" src={show.artwork_url} alt="" loading="lazy" />
+						<img src={show.artwork_url} alt="" loading="lazy" style="width:36px; height:36px; border-radius:10px; object-fit:cover; flex-shrink:0;" />
 					{: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 style="width:36px; height:36px; border-radius:10px; background:rgba(35,26,17,0.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#8c7b69;">
+							<svg width="18" height="18" 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="show-info">
-						<span class="show-name">{show.title}</span>
-						<span class="show-meta">{show.author || `${show.episode_count} episodes`}</span>
+					<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;">
+						<span style="font-size:0.85rem; font-weight:{selectedShowId === show.id ? '600' : '500'}; color:#1e1812; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{show.title}</span>
+						<span style="font-size:0.72rem; color:#8c7b69; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{show.author || `${show.episode_count} episodes`}</span>
 					</div>
 					{#if show.unplayed_count > 0}
-						<span class="unplayed-badge">{show.unplayed_count}</span>
+						<span style="font-size:10px; font-weight:700; background:#059669; color:white; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px; flex-shrink:0; font-family:var(--mono);">
+							{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="" />
+	<!-- ═══ Main Content ═══ -->
+	<main style="flex:1; min-width:0; overflow-y:auto; max-height:calc(100vh - 60px); padding-bottom:{currentEpisode ? '100px' : '0'};" class="episodes-main">
+
+		<!-- Mobile show pills (horizontal scroll) -->
+		<div class="mobile-pills">
+			<button
+				class="show-pill"
+				style="
+					display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
+					border-radius:999px; border:1px solid {!selectedShowId ? 'rgba(179,92,50,0.3)' : 'rgba(35,26,17,0.08)'};
+					background:{!selectedShowId ? 'rgba(179,92,50,0.12)' : 'rgba(255,252,248,0.82)'};
+					color:{!selectedShowId ? '#7f5f3d' : '#2f2116'};
+					font-size:0.78rem; font-weight:{!selectedShowId ? '700' : '500'}; font-family:var(--font);
+					cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all 160ms;
+				"
+				onclick={() => selectShow(null)}
+			>
+				All
+				{#if totalUnplayed > 0}
+					<span style="font-size:9px; font-weight:700; background:#059669; color:white; min-width:16px; height:16px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; font-family:var(--mono);">{totalUnplayed}</span>
+				{/if}
+			</button>
+			{#each shows as show (show.id)}
+				<button
+					class="show-pill"
+					style="
+						display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
+						border-radius:999px; border:1px solid {selectedShowId === show.id ? 'rgba(179,92,50,0.3)' : 'rgba(35,26,17,0.08)'};
+						background:{selectedShowId === show.id ? 'rgba(179,92,50,0.12)' : 'rgba(255,252,248,0.82)'};
+						color:{selectedShowId === show.id ? '#7f5f3d' : '#2f2116'};
+						font-size:0.78rem; font-weight:{selectedShowId === show.id ? '700' : '500'}; font-family:var(--font);
+						cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all 160ms;
+					"
+					onclick={() => selectShow(show.id)}
+				>
+					{#if show.artwork_url}
+						<img src={show.artwork_url} alt="" style="width:16px; height:16px; border-radius:4px; object-fit:cover;" />
+					{:else}
+						<span style="width:16px; height:16px; border-radius:4px; background:rgba(35,26,17,0.08); display:inline-flex; align-items:center; justify-content:center;">
+							<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#8c7b69" stroke-width="2"><circle cx="5" cy="20" r="1"/></svg>
+						</span>
 					{/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>
+					{show.title}
+					{#if show.unplayed_count > 0}
+						<span style="font-size:9px; font-weight:700; background:#059669; color:white; min-width:16px; height:16px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; font-family:var(--mono);">{show.unplayed_count}</span>
+					{/if}
+				</button>
+			{/each}
+			<!-- Mobile add button -->
+			<button
+				class="show-pill"
+				style="display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border-radius:999px; border:1px dashed rgba(35,26,17,0.15); background:none; color:#8c7b69; font-size:0.78rem; font-family:var(--font); cursor:pointer; white-space:nowrap; flex-shrink:0;"
+				onclick={() => showAddForm = !showAddForm}
+			>
+				<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+				Add
+			</button>
+		</div>
+
+		<!-- Mobile add form -->
+		<div class="mobile-add-form">
+			{#if showAddForm}
+				<form style="display:flex; gap:6px; padding:0 16px 12px;" onsubmit={(e) => { e.preventDefault(); addShow(); }}>
+					<input
+						type="url"
+						bind:value={feedUrl}
+						placeholder="RSS feed URL..."
+						style="flex:1; min-width:0; padding:9px 12px; border-radius:14px; border:1px solid rgba(35,26,17,0.12); background:rgba(255,255,255,0.7); font-size:0.82rem; font-family:var(--font); color:#1e1812; outline:none;"
+					/>
+					<button
+						type="submit"
+						disabled={addingShow || !feedUrl.trim()}
+						style="flex-shrink:0; padding:9px 16px; border-radius:14px; border:none; background:#1e1812; color:white; font-size:0.78rem; font-weight:600; font-family:var(--font); cursor:pointer; opacity:{addingShow || !feedUrl.trim() ? '0.4' : '1'};"
+					>
+						{addingShow ? '...' : 'Add'}
+					</button>
+				</form>
+				{#if error}
+					<p style="color:#DC2626; font-size:0.72rem; padding:0 18px 8px; margin:0;">{error}</p>
+				{/if}
+			{/if}
+		</div>
+
+		<!-- Show banner (when a show is selected) -->
+		{#if selectedShow}
+			<div style="padding:24px 28px; border-bottom:1px solid rgba(35,26,17,0.08); background:rgba(250,246,239,0.6);" class="show-banner">
+				<div style="display:flex; align-items:center; gap:18px;">
+					{#if selectedShow.artwork_url}
+						<img src={selectedShow.artwork_url} alt="" style="width:72px; height:72px; border-radius:16px; object-fit:cover; flex-shrink:0; box-shadow:0 4px 16px rgba(42,30,19,0.08);" />
+					{/if}
+					<div style="flex:1; min-width:0;">
+						<h2 style="font-size:1.1rem; font-weight:700; color:#1e1812; line-height:1.3; margin:0; letter-spacing:-0.02em;">{selectedShow.title}</h2>
+						<p style="font-size:0.85rem; color:#6b6256; margin:3px 0 0;">{selectedShow.author}</p>
+						<p style="font-size:0.72rem; color:#8c7b69; margin:4px 0 0;">{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>
+					<div style="display:flex; gap:6px; flex-shrink:0;">
+						<button
+							style="width:32px; height:32px; border-radius:10px; border:1px solid rgba(35,26,17,0.08); background:rgba(255,252,248,0.82); color:#6b6256; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 160ms; padding:0;"
+							onclick={() => refreshShow(selectedShow.id)}
+							title="Refresh feed"
+							onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.95)'; (e.currentTarget as HTMLElement).style.color = '#1e1812'; }}
+							onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,252,248,0.82)'; (e.currentTarget as HTMLElement).style.color = '#6b6256'; }}
+						>
+							<svg width="15" height="15" 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
+							style="width:32px; height:32px; border-radius:10px; border:1px solid rgba(35,26,17,0.08); background:rgba(255,252,248,0.82); color:#6b6256; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 160ms; padding:0;"
+							onclick={() => removeShow(selectedShow.id)}
+							title="Unsubscribe"
+							onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(220,38,38,0.06)'; (e.currentTarget as HTMLElement).style.color = '#DC2626'; }}
+							onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,252,248,0.82)'; (e.currentTarget as HTMLElement).style.color = '#6b6256'; }}
+						>
+							<svg width="15" height="15" 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>
+		{:else}
+			<!-- Header for "All Episodes" -->
+			<div style="padding:20px 28px 12px;" class="main-header">
+				<div style="font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:#8c7b69;">Library</div>
+				<div style="display:flex; align-items:baseline; justify-content:space-between; gap:16px;">
+					<h2 style="font-size:1.3rem; font-weight:700; color:#1e1812; margin:4px 0 0; letter-spacing:-0.03em;">All Episodes</h2>
+					<span style="font-size:0.82rem; color:#8c7b69;">{episodes.length} episodes</span>
+				</div>
+			</div>
 		{/if}
 
+		<!-- Episode list -->
 		{#if loading}
-			<div class="loading-state">
+			<div style="padding:20px 28px; display:flex; flex-direction:column; gap:12px;">
 				{#each Array(6) as _, i}
-					<div class="skeleton episode-skeleton">
-						<div class="skeleton" style="width: 56px; height: 56px; border-radius: 10px;"></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 class="skeleton-card" style="display:flex; gap:14px; padding:16px; border-radius:18px; background:rgba(35,26,17,0.03);">
+						<div style="width:56px; height:56px; border-radius:12px; background:rgba(35,26,17,0.06); flex-shrink:0;" class="shimmer"></div>
+						<div style="flex:1; display:flex; flex-direction:column; gap:8px;">
+							<div style="width:70%; height:14px; border-radius:6px; background:rgba(35,26,17,0.06);" class="shimmer"></div>
+							<div style="width:40%; height:12px; border-radius:6px; background:rgba(35,26,17,0.06);" class="shimmer"></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 style="display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; color:#8c7b69; text-align:center; gap:12px;">
+				<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity:0.35;"><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 style="font-size:0.92rem; margin:0; color:rgba(93,72,55,0.76);">{shows.length === 0 ? 'No podcasts yet. Add a show to get started.' : 'No episodes found.'}</p>
 			</div>
 		{:else}
-			<div class="episode-list">
+			<div style="padding:8px 16px 16px; display:flex; flex-direction:column; gap:8px;" class="episode-grid">
 				{#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}
+					{@const isActive = currentEpisode?.id === ep.id}
+					<div
+						class="episode-card"
+						style="
+							display:flex; align-items:center; gap:14px;
+							padding:14px 16px; border-radius:18px;
+							border:1px solid {isActive ? 'rgba(179,92,50,0.25)' : 'rgba(35,26,17,0.08)'};
+							background:{isActive ? 'rgba(179,92,50,0.06)' : 'rgba(255,252,248,0.82)'};
+							transition:all 160ms; cursor:pointer; position:relative;
+							{isActive ? 'box-shadow:0 0 0 1px rgba(179,92,50,0.12), 0 4px 16px rgba(179,92,50,0.06);' : ''}
+						"
+						onmouseenter={(e) => { if (!isActive) { (e.currentTarget as HTMLElement).style.transform = 'translateY(-2px)'; (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 24px rgba(42,30,19,0.08)'; } }}
+						onmouseleave={(e) => { if (!isActive) { (e.currentTarget as HTMLElement).style.transform = 'none'; (e.currentTarget as HTMLElement).style.boxShadow = 'none'; } }}
+						role="button"
+						tabindex="0"
+						onclick={() => playEpisode(ep)}
+						onkeydown={(e) => { if (e.key === 'Enter') playEpisode(ep); }}
+					>
+						<!-- Artwork -->
+						<div style="position:relative; width:56px; height:56px; flex-shrink:0;">
+							{#if art}
+								<img src={art} alt="" loading="lazy" style="width:56px; height:56px; border-radius:12px; object-fit:cover;" />
+							{:else}
+								<div style="width:56px; height:56px; border-radius:12px; background:rgba(35,26,17,0.06); display:flex; align-items:center; justify-content:center; color:#8c7b69;">
+									<svg width="24" height="24" 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>
-							</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}
+							<!-- Play overlay -->
+							<div class="play-hover" style="
+								position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
+								background:rgba(30,24,18,0.5); border-radius:12px; opacity:0; transition:opacity 160ms; color:white;
+							">
+								{#if isActive && isPlaying}
+									<svg width="20" height="20" 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 width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
 								{/if}
 							</div>
-							<div class="ep-meta">
+						</div>
+
+						<!-- Body -->
+						<div style="flex:1; min-width:0;">
+							<div style="font-size:0.92rem; font-weight:{ep.status === 'unplayed' ? '600' : '400'}; color:#1e1812; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35;">
+								{ep.title}
+							</div>
+							<div style="display:flex; align-items:center; gap:5px; margin-top:3px; font-size:0.78rem; color:#8c7b69;">
+								{#if !selectedShowId}
+									<span style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px;">{ep.show_title}</span>
+									<span style="opacity:0.4;">&middot;</span>
+								{/if}
 								<span>{formatDate(ep.published_at)}</span>
-								<span class="ep-dot">&middot;</span>
+								<span style="opacity:0.4;">&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>
+									<span style="opacity:0.4;">&middot;</span>
+									<span style="color:#7f5f3d; font-weight:600;">{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 style="width:100%; height:3px; background:rgba(35,26,17,0.08); border-radius:999px; margin-top:8px; overflow:hidden;">
+									<div style="height:100%; background:#5d4737; border-radius:999px; width:{pct}%; transition:width 0.3s ease;"></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>
+						<!-- Actions -->
+						<div class="ep-actions" style="display:flex; gap:4px; flex-shrink:0; opacity:0; transition:opacity 160ms;" onclick={(e) => e.stopPropagation()}>
+							<button
+								style="width:32px; height:32px; border-radius:10px; border:none; background:none; color:#6b6256; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 160ms; padding:0;"
+								onclick={(e) => { e.stopPropagation(); addToQueue(ep); }}
+								title="Add to queue"
+								onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.95)'; (e.currentTarget as HTMLElement).style.color = '#1e1812'; }}
+								onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; (e.currentTarget as HTMLElement).style.color = '#6b6256'; }}
+							>
+								<svg width="14" height="14" 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
+								style="width:32px; height:32px; border-radius:10px; border:none; background:none; color:#6b6256; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 160ms; padding:0;"
+								onclick={(e) => { e.stopPropagation(); playNext(ep); }}
+								title="Play next"
+								onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.95)'; (e.currentTarget as HTMLElement).style.color = '#1e1812'; }}
+								onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; (e.currentTarget as HTMLElement).style.color = '#6b6256'; }}
+							>
+								<svg width="14" height="14" 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>
@@ -569,68 +761,116 @@
 	</main>
 </div>
 
-<!-- Player bar -->
+<!-- ═══ Player Bar (sticky bottom, glassmorphic) ═══ -->
 {#if currentEpisode}
 	{@const playerArt = artworkFor(currentEpisode)}
-	<div class="player-bar">
-		<div class="player-inner">
+	<div style="
+		position:fixed; bottom:0; left:0; right:0; z-index:50;
+		background:rgba(250,246,239,0.82); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
+		border-top:1px solid rgba(35,26,17,0.08);
+		box-shadow:0 -4px 24px rgba(42,30,19,0.06);
+		padding:10px 20px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
+	" class="player-bar">
+		<div style="display:flex; align-items:center; gap:14px; max-width:1280px; margin:0 auto;" class="player-inner">
 			<!-- Episode info -->
-			<div class="player-info">
+			<div style="display:flex; align-items:center; gap:12px; min-width:0; flex:0 1 220px;" class="player-info">
 				{#if playerArt}
-					<img class="player-artwork" src={playerArt} alt="" />
+					<img src={playerArt} alt="" style="width:48px; height:48px; border-radius:12px; object-fit:cover; flex-shrink:0; box-shadow:0 2px 8px rgba(42,30,19,0.1);" />
 				{: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 style="width:48px; height:48px; border-radius:12px; background:rgba(35,26,17,0.06); display:flex; align-items:center; justify-content:center; color:#8c7b69; flex-shrink:0;">
+						<svg width="20" height="20" 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 style="min-width:0; display:flex; flex-direction:column; gap:2px;">
+					<span style="font-size:0.85rem; font-weight:600; color:#1e1812; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{currentEpisode.title}</span>
+					<span style="font-size:0.72rem; color:#8c7b69; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{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>
+			<div style="display:flex; align-items:center; gap:6px; flex-shrink:0;" class="player-controls">
+				<button
+					style="position:relative; width:36px; height:36px; border:none; background:none; cursor:pointer; color:#2f2116; display:flex; align-items:center; justify-content:center; border-radius:999px; transition:all 160ms; padding:0;"
+					onclick={skipBack}
+					title="Back 15s"
+					onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.95)'; }}
+					onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; }}
+				>
+					<svg width="20" height="20" 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 style="position:absolute; font-size:8px; font-weight:700; color:inherit; font-family:var(--mono); bottom:4px;">15</span>
 				</button>
 
-				<button class="play-btn" onclick={togglePlayPause}>
+				<button
+					style="width:44px; height:44px; border-radius:999px; border:none; background:#1e1812; color:#faf6ef; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 160ms; flex-shrink:0;"
+					onclick={togglePlayPause}
+					class="play-main-btn"
+				>
 					{#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>
+						<svg width="20" height="20" 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>
+						<svg width="20" height="20" 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
+					style="position:relative; width:36px; height:36px; border:none; background:none; cursor:pointer; color:#2f2116; display:flex; align-items:center; justify-content:center; border-radius:999px; transition:all 160ms; padding:0;"
+					onclick={skipForward}
+					title="Forward 30s"
+					onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.95)'; }}
+					onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; }}
+				>
+					<svg width="20" height="20" 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 style="position:absolute; font-size:8px; font-weight:700; color:inherit; font-family:var(--mono); bottom:4px;">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 style="display:flex; align-items:center; gap:8px; flex:1; min-width:0;" class="player-progress">
+				<span style="font-size:11px; font-family:var(--mono); color:#8c7b69; min-width:40px; text-align:center; flex-shrink:0; user-select:none;">{formatTime(currentTime)}</span>
+				<div
+					class="progress-bar-track"
+					style="flex:1; height:3px; background:rgba(35,26,17,0.1); border-radius:999px; cursor:pointer; position:relative; transition:height 160ms;"
+					onclick={seek}
+					role="slider"
+					tabindex="0"
+					aria-valuenow={currentTime}
+					aria-valuemin={0}
+					aria-valuemax={duration}
+				>
+					<div style="height:100%; background:#5d4737; border-radius:999px; position:relative; transition:width 0.1s linear; max-width:100%; width:{duration > 0 ? (currentTime / duration) * 100 : 0}%;">
+						<div class="progress-thumb" style="position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:12px; height:12px; border-radius:999px; background:#5d4737; box-shadow:0 2px 6px rgba(42,30,19,0.18); opacity:0; transition:opacity 160ms;"></div>
 					</div>
 				</div>
-				<span class="time-label">{formatTime(duration)}</span>
+				<span style="font-size:11px; font-family:var(--mono); color:#8c7b69; min-width:40px; text-align:center; flex-shrink:0; user-select:none;">{formatTime(duration)}</span>
 			</div>
 
 			<!-- Right actions -->
-			<div class="player-right">
-				<div class="rate-control">
-					<button class="rate-btn" onclick={() => showRateMenu = !showRateMenu}>
+			<div style="display:flex; align-items:center; gap:6px; flex-shrink:0;" class="player-right">
+				<!-- Speed -->
+				<div style="position:relative;">
+					<button
+						style="padding:4px 10px; border-radius:999px; border:1px solid rgba(35,26,17,0.1); background:none; font-size:0.72rem; font-weight:600; font-family:var(--mono); color:#2f2116; cursor:pointer; transition:all 160ms;"
+						onclick={() => showRateMenu = !showRateMenu}
+						onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.95)'; }}
+						onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; }}
+					>
 						{playbackRate}x
 					</button>
 					{#if showRateMenu}
-						<div class="rate-menu">
+						<div style="
+							position:absolute; bottom:calc(100% + 8px); right:0;
+							background:rgba(255,252,248,0.96); border:1px solid rgba(35,26,17,0.1);
+							border-radius:14px; box-shadow:0 12px 32px rgba(42,30,19,0.12);
+							padding:4px; display:flex; flex-direction:column; z-index:60;
+							backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
+						">
 							{#each rates as rate}
-								<button class="rate-option" class:active={playbackRate === rate} onclick={() => { setPlaybackRate(rate); showRateMenu = false; }}>
+								<button
+									style="padding:7px 16px; font-size:0.85rem; font-family:var(--mono); border:none; background:none; color:{playbackRate === rate ? '#7f5f3d' : '#2f2116'}; cursor:pointer; border-radius:10px; text-align:left; white-space:nowrap; transition:all 160ms; font-weight:{playbackRate === rate ? '700' : '500'};"
+									onclick={() => { setPlaybackRate(rate); showRateMenu = false; }}
+									onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.95)'; }}
+									onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; }}
+								>
 									{rate}x
 								</button>
 							{/each}
@@ -638,10 +878,19 @@
 					{/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>
+				<!-- Queue -->
+				<button
+					style="position:relative; width:36px; height:36px; border:none; background:none; cursor:pointer; color:#6b6256; display:flex; align-items:center; justify-content:center; border-radius:10px; transition:all 160ms; padding:0;"
+					onclick={() => showQueue = !showQueue}
+					title="Queue"
+					onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.95)'; (e.currentTarget as HTMLElement).style.color = '#1e1812'; }}
+					onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; (e.currentTarget as HTMLElement).style.color = '#6b6256'; }}
+				>
+					<svg width="18" height="18" 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>
+						<span style="position:absolute; top:2px; right:2px; min-width:14px; height:14px; border-radius:999px; background:#059669; color:white; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; font-family:var(--mono);">
+							{queue.length}
+						</span>
 					{/if}
 				</button>
 			</div>
@@ -649,53 +898,109 @@
 	</div>
 {/if}
 
-<!-- Queue slide-out -->
+<!-- ═══ Queue Panel (slide from right) ═══ -->
 {#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">
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		style="position:fixed; inset:0; background:rgba(17,13,10,0.3); z-index:80;"
+		onclick={() => showQueue = false}
+	></div>
+	<aside style="
+		position:fixed; top:0; right:0; bottom:0; width:380px; max-width:90vw;
+		background:rgba(250,246,239,0.96); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
+		border-left:1px solid rgba(35,26,17,0.08);
+		box-shadow:-8px 0 32px rgba(42,30,19,0.1);
+		z-index:90; display:flex; flex-direction:column;
+		animation:queueSlideIn 0.22s ease;
+	">
+		<!-- Queue header -->
+		<div style="display:flex; align-items:center; justify-content:space-between; padding:20px 20px 16px; border-bottom:1px solid rgba(35,26,17,0.08);">
+			<div>
+				<div style="font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:#8c7b69;">Up next</div>
+				<span style="font-size:1rem; font-weight:700; color:#1e1812; letter-spacing:-0.03em;">Queue</span>
+			</div>
+			<div style="display:flex; align-items:center; gap:8px;">
 				{#if queue.length > 0}
-					<button class="btn-secondary" onclick={clearQueue}>Clear</button>
+					<button
+						style="padding:5px 12px; border-radius:999px; border:1px solid rgba(35,26,17,0.1); background:none; color:#6b6256; font-size:0.72rem; font-weight:600; font-family:var(--font); cursor:pointer; transition:all 160ms;"
+						onclick={clearQueue}
+						onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.95)'; (e.currentTarget as HTMLElement).style.color = '#1e1812'; }}
+						onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; (e.currentTarget as HTMLElement).style.color = '#6b6256'; }}
+					>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
+					style="width:28px; height:28px; border-radius:8px; border:none; background:none; color:#8c7b69; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 140ms; padding:0;"
+					onclick={() => showQueue = false}
+					onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.72)'; (e.currentTarget as HTMLElement).style.color = '#1e1812'; }}
+					onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; (e.currentTarget as HTMLElement).style.color = '#8c7b69'; }}
+				>
+					<svg width="16" height="16" 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 style="flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#8c7b69; gap:6px; padding:40px;">
+				<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity:0.3;"><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>
+				<p style="font-size:0.92rem; font-weight:600; margin:0; color:#6b6256;">Queue is empty</p>
+				<span style="font-size:0.82rem; color:#8c7b69;">Add episodes from the list</span>
 			</div>
 		{:else}
-			<div class="queue-list">
+			<div style="flex:1; overflow-y:auto; padding:8px 10px;">
 				{#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>
+					<div style="
+						display:flex; align-items:center; gap:10px; padding:10px;
+						border-radius:14px; transition:background 160ms;
+						{idx > 0 ? 'margin-top:2px;' : ''}
+					"
+						onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,248,241,0.72)'; }}
+						onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
+					>
+						<!-- Reorder -->
+						<div style="display:flex; flex-direction:column; gap:1px; flex-shrink:0;">
+							<button
+								disabled={idx === 0}
+								onclick={() => moveQueueItem(idx, idx - 1)}
+								title="Move up"
+								style="width:22px; height:16px; border:none; background:none; cursor:{idx === 0 ? 'default' : 'pointer'}; color:#8c7b69; display:flex; align-items:center; justify-content:center; padding:0; border-radius:4px; transition:all 160ms; opacity:{idx === 0 ? '0.2' : '1'};"
+							>
+								<svg width="14" height="14" 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
+								disabled={idx === queue.length - 1}
+								onclick={() => moveQueueItem(idx, idx + 1)}
+								title="Move down"
+								style="width:22px; height:16px; border:none; background:none; cursor:{idx === queue.length - 1 ? 'default' : 'pointer'}; color:#8c7b69; display:flex; align-items:center; justify-content:center; padding:0; border-radius:4px; transition:all 160ms; opacity:{idx === queue.length - 1 ? '0.2' : '1'};"
+							>
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
 							</button>
 						</div>
+
+						<!-- Artwork -->
 						{#if qArt}
-							<img class="queue-artwork" src={qArt} alt="" loading="lazy" />
+							<img src={qArt} alt="" loading="lazy" style="width:40px; height:40px; border-radius:10px; object-fit:cover; flex-shrink:0;" />
 						{: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 style="width:40px; height:40px; border-radius:10px; background:rgba(35,26,17,0.06); display:flex; align-items:center; justify-content:center; color:#8c7b69; flex-shrink:0;">
+								<svg width="16" height="16" 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>
+
+						<!-- Info -->
+						<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;">
+							<span style="font-size:0.82rem; font-weight:600; color:#1e1812; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{item.episode.title}</span>
+							<span style="font-size:0.7rem; color:#8c7b69; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{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>
+
+						<!-- Remove -->
+						<button
+							style="width:28px; height:28px; border-radius:8px; border:none; background:none; color:#8c7b69; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 140ms; padding:0; flex-shrink:0;"
+							onclick={() => removeFromQueue(item.episode.id)}
+							title="Remove"
+							onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(220,38,38,0.08)'; (e.currentTarget as HTMLElement).style.color = '#DC2626'; }}
+							onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'none'; (e.currentTarget as HTMLElement).style.color = '#8c7b69'; }}
+						>
+							<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
 						</button>
 					</div>
 				{/each}
@@ -705,1029 +1010,114 @@
 {/if}
 
 <style>
-	/* ═══ Atelier Podcast — Warm earthy design system ═══ */
-
-	/* ── Layout ── */
-	.podcast-layout {
-		display: flex;
-		min-height: calc(100vh - 60px);
-		font-family: var(--font);
+	/* ═══ Queue slide animation ═══ */
+	@keyframes queueSlideIn {
+		from { transform: translateX(100%); }
+		to { transform: translateX(0); }
 	}
 
-	.mobile-shows-btn {
-		display: none;
-		align-items: center;
-		gap: 8px;
-		margin-bottom: 12px;
-		width: 100%;
-		justify-content: center;
-		padding: 10px 18px;
-		border-radius: 999px;
-		border: 1px solid rgba(35,26,17,0.1);
-		background: rgba(255,252,248,0.82);
-		color: #2f2116;
-		font-size: 0.85rem;
-		font-weight: 600;
-		font-family: var(--font);
-		cursor: pointer;
-		transition: all 160ms;
-	}
-	.mobile-shows-btn:hover { background: rgba(255,248,241,0.95); }
-	.mobile-shows-btn svg { width: 16px; height: 16px; }
-
-	/* ── Sidebar ── */
-	.shows-sidebar {
-		width: 248px;
-		flex-shrink: 0;
-		min-height: 0;
-		background: rgba(245,237,228,0.82);
-		border-right: 1px solid rgba(35,26,17,0.1);
-		display: flex;
-		flex-direction: column;
-		overflow-y: auto;
-		padding: 16px 0 12px;
-		backdrop-filter: blur(16px);
-		-webkit-backdrop-filter: blur(16px);
-	}
-
-	.sidebar-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 18px 14px;
-	}
-
-	.module-title {
-		font-size: 1rem;
-		font-weight: 700;
-		color: #1f1811;
-		letter-spacing: -0.03em;
-	}
-
-	.sidebar-header .btn-icon {
-		width: 28px;
-		height: 28px;
-		border-radius: 8px;
-		border: none;
-		background: none;
-		color: #8c7b69;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		transition: all 140ms;
-		flex-shrink: 0;
-		padding: 0;
-	}
-	.sidebar-header .btn-icon:hover { background: rgba(255,248,241,0.72); color: #1f1811; }
-	.sidebar-header .btn-icon svg { width: 16px; height: 16px; }
-
-	.add-form {
-		display: flex;
-		gap: 4px;
-		padding: 0 12px 10px;
-	}
-	.add-form .input {
-		flex: 1;
-		min-width: 0;
-		padding: 7px 10px;
-		border-radius: 12px;
-		border: 1px solid rgba(35,26,17,0.12);
-		background: rgba(255,255,255,0.7);
-		font-size: 0.78rem;
-		font-family: var(--font);
-		color: #1e1812;
-		outline: none;
-		transition: border-color 160ms;
-	}
-	.add-form .input:focus { border-color: rgba(179,92,50,0.4); }
-	.add-form .input::placeholder { color: #8c7b69; }
-	.add-form .btn-primary {
-		flex-shrink: 0;
-		padding: 7px 10px;
-		border-radius: 12px;
-		border: none;
-		background: #1e1812;
-		color: white;
-		font-size: 0.72rem;
-		font-weight: 600;
-		font-family: var(--font);
-		cursor: pointer;
-		transition: opacity 160ms;
-	}
-	.add-form .btn-primary:hover { opacity: 0.9; }
-	.add-form .btn-primary:disabled { opacity: 0.4; cursor: default; }
-
-	.error-msg {
-		color: #DC2626;
-		font-size: 0.72rem;
-		padding: 0 18px 8px;
-	}
-
-	.show-list {
-		flex: 1;
-		overflow-y: auto;
-		padding: 0 12px 8px;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
-
-	.show-item {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		width: 100%;
-		padding: 10px 12px;
-		border: none;
-		background: none;
-		border-radius: 14px;
-		cursor: pointer;
-		transition: all 160ms;
-		text-align: left;
-		font-family: var(--font);
-	}
-	.show-item:hover { background: rgba(255,248,241,0.72); color: #1f1811; }
-	.show-item.active {
-		background: rgba(255,248,241,0.92);
-		color: #1f1811;
-		font-weight: 600;
-		box-shadow: inset 0 0 0 1px rgba(35,26,17,0.08);
-	}
-
-	.show-artwork {
-		width: 38px;
-		height: 38px;
-		border-radius: 10px;
-		object-fit: cover;
-		flex-shrink: 0;
-	}
-
-	.show-artwork-placeholder {
-		width: 38px;
-		height: 38px;
-		border-radius: 10px;
-		background: rgba(35,26,17,0.06);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		color: #8c7b69;
-	}
-	.show-artwork-placeholder svg { width: 18px; height: 18px; }
-
-	.show-icon-all {
-		width: 38px;
-		height: 38px;
-		border-radius: 10px;
-		background: rgba(179,92,50,0.08);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		color: #7f5f3d;
-	}
-	.show-icon-all svg { width: 18px; height: 18px; }
-
-	.show-info {
-		flex: 1;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
-
-	.show-name {
-		font-size: 0.85rem;
-		font-weight: 500;
-		color: #1e1812;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	.show-item.active .show-name { font-weight: 600; }
-
-	.show-meta {
-		font-size: 0.72rem;
-		color: #8c7b69;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.unplayed-badge {
-		font-size: 10px;
-		font-weight: 700;
-		background: #5d4737;
-		color: white;
-		min-width: 18px;
-		height: 18px;
-		border-radius: 999px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 5px;
-		flex-shrink: 0;
-		font-family: var(--mono);
-	}
-
-	.badge.accent {
-		font-size: 10px;
-		font-weight: 700;
-		background: #5d4737;
-		color: white;
-		min-width: 18px;
-		height: 18px;
-		border-radius: 999px;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 5px;
-		font-family: var(--mono);
-	}
-
-	/* ── Main episodes panel ── */
-	.episodes-main {
-		flex: 1;
-		min-width: 0;
-		overflow-y: auto;
-		max-height: calc(100vh - 60px);
-		padding: 0;
-	}
-
-	/* Show banner */
-	.show-banner {
-		padding: 24px 28px;
-		border-bottom: 1px solid rgba(35,26,17,0.08);
-		background: rgba(250,246,239,0.6);
-	}
-	.show-banner-content {
-		display: flex;
-		align-items: center;
-		gap: 18px;
-	}
-	.banner-artwork {
-		width: 72px;
-		height: 72px;
-		border-radius: 16px;
-		object-fit: cover;
-		flex-shrink: 0;
-		box-shadow: 0 4px 16px rgba(42,30,19,0.08);
-	}
-	.banner-info { flex: 1; min-width: 0; }
-	.banner-title {
-		font-size: 1.1rem;
-		font-weight: 700;
-		color: #1e1812;
-		line-height: 1.3;
-		margin: 0;
-		letter-spacing: -0.02em;
-	}
-	.banner-author {
-		font-size: 0.85rem;
-		color: #6b6256;
-		margin: 3px 0 0;
-	}
-	.banner-stats {
-		font-size: 0.72rem;
-		color: #8c7b69;
-		margin: 4px 0 0;
-	}
-	.banner-actions {
-		display: flex;
-		gap: 6px;
-		flex-shrink: 0;
-	}
-	.banner-actions .btn-icon {
-		width: 32px;
-		height: 32px;
-		border-radius: 10px;
-		border: 1px solid rgba(35,26,17,0.08);
-		background: rgba(255,252,248,0.82);
-		color: #6b6256;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		transition: all 160ms;
-		padding: 0;
-	}
-	.banner-actions .btn-icon:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
-	.banner-actions .btn-icon svg { width: 15px; height: 15px; }
-
-	/* Episode list */
-	.episode-list {
-		padding: 8px 0;
-	}
-
-	.episode-card {
-		display: flex;
-		align-items: center;
-		gap: 14px;
-		padding: 14px 28px;
-		border-bottom: 1px solid rgba(35,26,17,0.06);
-		transition: background 160ms;
-	}
-	.episode-card:hover { background: rgba(255,248,241,0.6); }
-	.episode-card.playing { background: rgba(179,92,50,0.06); }
-	.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: 12px;
-		object-fit: cover;
-	}
-	.ep-artwork-empty {
-		background: rgba(35,26,17,0.06);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #8c7b69;
-	}
-	.ep-artwork-empty svg { width: 24px; height: 24px; }
-
-	.play-overlay {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: rgba(30,24,18,0.45);
-		border-radius: 12px;
-		opacity: 0;
-		transition: opacity 160ms;
-		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: 0.92rem;
-		color: #2f2116;
-		font-weight: 400;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		line-height: 1.35;
-	}
-	.ep-title.unplayed {
-		color: #1e1812;
-		font-weight: 600;
-	}
-
-	.ep-show {
-		font-size: 0.72rem;
-		color: #8c7b69;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.ep-meta {
-		display: flex;
-		align-items: center;
-		gap: 5px;
-		margin-top: 4px;
-		font-size: 0.72rem;
-		color: #8c7b69;
-	}
-
-	.ep-dot { opacity: 0.4; }
-
-	.ep-progress-label {
-		color: #7f5f3d;
-		font-weight: 600;
-	}
-
-	.ep-progress-bar {
-		width: 100%;
-		height: 3px;
-		background: rgba(35,26,17,0.08);
-		border-radius: 999px;
-		margin-top: 6px;
-		overflow: hidden;
-	}
-	.ep-progress-fill {
-		height: 100%;
-		background: rgba(179,92,50,0.7);
-		border-radius: 999px;
-		transition: width 0.3s ease;
-	}
-
-	.ep-actions {
-		display: flex;
-		gap: 4px;
-		flex-shrink: 0;
-		opacity: 0;
-		transition: opacity 160ms;
-	}
-	.episode-card:hover .ep-actions { opacity: 1; }
-	.ep-actions .btn-icon {
-		width: 30px;
-		height: 30px;
-		border-radius: 10px;
-		border: none;
-		background: none;
-		color: #6b6256;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		transition: all 160ms;
-		padding: 0;
-	}
-	.ep-actions .btn-icon:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
-	.ep-actions .btn-icon svg { width: 14px; height: 14px; }
-
-	/* ── Loading / empty ── */
-	.loading-state {
-		padding: 20px 28px;
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
-	.skeleton {
-		background: rgba(35,26,17,0.06);
-		border-radius: 10px;
+	/* ═══ Shimmer animation ═══ */
+	.shimmer {
 		animation: shimmer 1.6s infinite;
 	}
 	@keyframes shimmer {
 		0%, 100% { opacity: 0.6; }
 		50% { opacity: 1; }
 	}
-	.episode-skeleton {
-		display: flex;
-		gap: 12px;
-		padding: 12px;
-		border-radius: 14px;
-		height: 72px;
+
+	/* ═══ Episode card hover ═══ */
+	.episode-card:hover .ep-actions { opacity: 1 !important; }
+	.episode-card:hover .play-hover { opacity: 1 !important; }
+
+	/* ═══ Progress bar hover ═══ */
+	.progress-bar-track:hover { height: 6px !important; }
+	.progress-bar-track:hover .progress-thumb { opacity: 1 !important; }
+
+	/* ═══ Play button hover ═══ */
+	.play-main-btn:hover { opacity: 0.9; transform: scale(1.05); }
+	.play-main-btn:active { transform: scale(0.95); }
+
+	/* ═══ Mobile pills — hidden on desktop ═══ */
+	.mobile-pills {
+		display: none;
+	}
+	.mobile-add-form {
+		display: none;
 	}
 
-	.empty-state {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 80px 20px;
-		color: #8c7b69;
-		text-align: center;
-		gap: 12px;
-	}
-	.empty-state svg {
-		width: 48px;
-		height: 48px;
-		opacity: 0.35;
-	}
-	.empty-state p {
-		font-size: 0.92rem;
-		margin: 0;
-		color: rgba(93,72,55,0.76);
+	/* ═══ Desktop sidebar — visible on desktop ═══ */
+	.desktop-sidebar {
+		display: flex !important;
 	}
 
-	/* ═══ Player bar ═══ */
-	.player-bar {
-		position: sticky;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		z-index: 50;
-		background: rgba(250,246,239,0.78);
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		border-top: 1px solid rgba(35,26,17,0.11);
-		box-shadow: 0 -4px 20px rgba(42,30,19,0.05);
-		padding: 12px 20px;
-		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
-	}
-
-	.player-inner {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-		max-width: 1280px;
-		margin: 0 auto;
-	}
-
-	.player-info {
-		display: flex;
-		align-items: center;
-		gap: 12px;
-		min-width: 0;
-		flex: 0 1 220px;
-	}
-
-	.player-artwork {
-		width: 44px;
-		height: 44px;
-		border-radius: 10px;
-		object-fit: cover;
-		flex-shrink: 0;
-	}
-	.player-artwork-empty {
-		background: rgba(35,26,17,0.06);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #8c7b69;
-	}
-	.player-artwork-empty svg { width: 20px; height: 20px; }
-
-	.player-text {
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
-	.player-title {
-		font-size: 0.85rem;
-		font-weight: 600;
-		color: #1e1812;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	.player-show {
-		font-size: 0.72rem;
-		color: #8c7b69;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	/* Controls */
-	.player-controls {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		flex-shrink: 0;
-	}
-
-	.control-btn {
-		position: relative;
-		width: 36px;
-		height: 36px;
-		border: none;
-		background: none;
-		cursor: pointer;
-		color: #2f2116;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 999px;
-		transition: all 160ms;
-		padding: 0;
-	}
-	.control-btn:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
-	.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: 999px;
-		border: none;
-		background: #1e1812;
-		color: #faf6ef;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 160ms;
-		flex-shrink: 0;
-	}
-	.play-btn:hover { opacity: 0.9; 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: 8px;
-		flex: 1;
-		min-width: 0;
-	}
-
-	.time-label {
-		font-size: 11px;
-		font-family: var(--mono);
-		color: #8c7b69;
-		min-width: 40px;
-		text-align: center;
-		flex-shrink: 0;
-		user-select: none;
-	}
-
-	.player-progress-bar {
-		flex: 1;
-		height: 5px;
-		background: rgba(35,26,17,0.1);
-		border-radius: 999px;
-		cursor: pointer;
-		position: relative;
-		transition: height 160ms;
-	}
-	.player-progress-bar:hover { height: 7px; }
-
-	.player-progress-fill {
-		height: 100%;
-		background: #5d4737;
-		border-radius: 999px;
-		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: 999px;
-		background: #5d4737;
-		box-shadow: 0 2px 6px rgba(42,30,19,0.18);
-		opacity: 0;
-		transition: opacity 160ms;
-	}
-	.player-progress-bar:hover .player-progress-thumb { opacity: 1; }
-
-	/* Right actions */
-	.player-right {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		flex-shrink: 0;
-	}
-
-	.rate-control { position: relative; }
-	.rate-btn {
-		padding: 4px 10px;
-		border-radius: 999px;
-		border: 1px solid rgba(35,26,17,0.1);
-		background: none;
-		font-size: 0.72rem;
-		font-weight: 600;
-		font-family: var(--mono);
-		color: #2f2116;
-		cursor: pointer;
-		transition: all 160ms;
-	}
-	.rate-btn:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
-
-	.rate-menu {
-		position: absolute;
-		bottom: calc(100% + 8px);
-		right: 0;
-		background: rgba(255,252,248,0.96);
-		border: 1px solid rgba(35,26,17,0.1);
-		border-radius: 14px;
-		box-shadow: 0 12px 32px rgba(42,30,19,0.12);
-		padding: 4px;
-		display: flex;
-		flex-direction: column;
-		z-index: 60;
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-	}
-	.rate-option {
-		padding: 7px 16px;
-		font-size: 0.85rem;
-		font-family: var(--mono);
-		border: none;
-		background: none;
-		color: #2f2116;
-		cursor: pointer;
-		border-radius: 10px;
-		text-align: left;
-		white-space: nowrap;
-		transition: all 160ms;
-		font-weight: 500;
-	}
-	.rate-option:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
-	.rate-option.active { color: #7f5f3d; font-weight: 700; }
-
-	.queue-btn {
-		position: relative;
-		width: 36px;
-		height: 36px;
-		border: none;
-		background: none;
-		cursor: pointer;
-		color: #6b6256;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 10px;
-		transition: all 160ms;
-		padding: 0;
-	}
-	.queue-btn:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
-	.queue-btn svg { width: 18px; height: 18px; }
-	.queue-count {
-		position: absolute;
-		top: 2px;
-		right: 2px;
-		min-width: 14px;
-		height: 14px;
-		border-radius: 999px;
-		background: #5d4737;
-		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: rgba(17,13,10,0.3);
-		z-index: 80;
-	}
-	.queue-panel {
-		position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		width: 360px;
-		max-width: 90vw;
-		background: rgba(250,246,239,0.96);
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		border-left: 1px solid rgba(35,26,17,0.1);
-		box-shadow: -8px 0 32px rgba(42,30,19,0.1);
-		z-index: 90;
-		display: flex;
-		flex-direction: column;
-		animation: slideIn 0.22s ease;
-	}
-	@keyframes slideIn {
-		from { transform: translateX(100%); }
-		to { transform: translateX(0); }
-	}
-
-	.queue-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 18px 18px 14px;
-		border-bottom: 1px solid rgba(35,26,17,0.08);
-	}
-	.queue-header .module-title {
-		font-size: 1rem;
-		font-weight: 700;
-		color: #1f1811;
-	}
-	.queue-header-actions {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-	.queue-header-actions .btn-secondary {
-		padding: 5px 12px;
-		border-radius: 999px;
-		border: 1px solid rgba(35,26,17,0.1);
-		background: none;
-		color: #6b6256;
-		font-size: 0.72rem;
-		font-weight: 600;
-		font-family: var(--font);
-		cursor: pointer;
-		transition: all 160ms;
-	}
-	.queue-header-actions .btn-secondary:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
-	.queue-header-actions .btn-icon {
-		width: 28px;
-		height: 28px;
-		border-radius: 8px;
-		border: none;
-		background: none;
-		color: #8c7b69;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		transition: all 140ms;
-		padding: 0;
-	}
-	.queue-header-actions .btn-icon:hover { background: rgba(255,248,241,0.72); color: #1e1812; }
-	.queue-header-actions .btn-icon svg { width: 16px; height: 16px; }
-
-	.queue-empty {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		color: #8c7b69;
-		gap: 4px;
-	}
-	.queue-empty p {
-		font-size: 0.92rem;
-		font-weight: 600;
-		margin: 0;
-		color: #6b6256;
-	}
-	.queue-empty span { font-size: 0.82rem; color: #8c7b69; }
-
-	.queue-list {
-		flex: 1;
-		overflow-y: auto;
-		padding: 8px;
-	}
-
-	.queue-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 8px;
-		border-radius: 14px;
-		transition: background 160ms;
-	}
-	.queue-item:hover { background: rgba(255,248,241,0.72); }
-	.queue-item + .queue-item { border-top: 1px solid rgba(35,26,17,0.06); }
-
-	.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: #8c7b69;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0;
-		border-radius: 4px;
-		transition: all 160ms;
-	}
-	.reorder-btn:hover:not(:disabled) { color: #1e1812; background: rgba(255,248,241,0.95); }
-	.reorder-btn:disabled { opacity: 0.2; cursor: default; }
-	.reorder-btn svg { width: 14px; height: 14px; }
-
-	.queue-artwork {
-		width: 36px;
-		height: 36px;
-		border-radius: 8px;
-		object-fit: cover;
-		flex-shrink: 0;
-	}
-	.queue-artwork-empty {
-		background: rgba(35,26,17,0.06);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #8c7b69;
-	}
-
-	.queue-info {
-		flex: 1;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
-	.queue-ep-title {
-		font-size: 0.82rem;
-		font-weight: 600;
-		color: #1e1812;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	.queue-ep-show {
-		font-size: 0.7rem;
-		color: #8c7b69;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.queue-item .btn-icon {
-		width: 28px;
-		height: 28px;
-		border-radius: 8px;
-		border: none;
-		background: none;
-		color: #8c7b69;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		transition: all 140ms;
-		padding: 0;
-	}
-	.queue-item .btn-icon:hover { background: rgba(220,38,38,0.08); color: #DC2626; }
-	.queue-item .btn-icon svg { width: 12px; height: 12px; }
-
-	/* ═══ Mobile ═══ */
+	/* ═══ Mobile breakpoint ═══ */
 	@media (max-width: 768px) {
-		.podcast-layout {
-			display: flex;
-			flex-direction: column;
-			min-height: auto;
+		.desktop-sidebar {
+			display: none !important;
 		}
 
-		.mobile-shows-btn { display: flex; }
-
-		.shows-sidebar {
-			display: none;
-			position: fixed;
-			inset: 0;
-			z-index: 70;
-			width: 100%;
-			border-right: none;
-			padding-top: env(safe-area-inset-top, 0px);
-			box-shadow: 8px 0 24px rgba(0,0,0,0.1);
-		}
-		.shows-sidebar.open {
+		.mobile-pills {
 			display: flex;
+			gap: 8px;
+			padding: 12px 16px 6px;
+			overflow-x: auto;
+			-webkit-overflow-scrolling: touch;
+			scrollbar-width: none;
+		}
+		.mobile-pills::-webkit-scrollbar { display: none; }
+
+		.mobile-add-form {
+			display: block;
 		}
 
 		.episodes-main {
-			max-height: none;
+			max-height: none !important;
 		}
 
-		.episode-card {
-			padding: 12px 16px;
+		.show-banner {
+			padding: 18px 16px !important;
+		}
+
+		.main-header {
+			padding: 14px 16px 8px !important;
+		}
+
+		.episode-grid {
+			padding: 8px 12px 16px !important;
+		}
+
+		.episode-card .ep-actions {
+			opacity: 1 !important;
 		}
 
 		/* Player bar responsive */
 		.player-inner {
-			flex-wrap: wrap;
-			gap: 8px;
+			flex-wrap: wrap !important;
+			gap: 6px !important;
 		}
-		.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 {
-			padding: 18px 16px;
+		.player-info {
+			flex: 1 1 100% !important;
+			order: 1;
 		}
-		.show-banner-content {
-			flex-wrap: wrap;
+		.player-progress {
+			flex: 1 1 100% !important;
+			order: 2;
 		}
-		.banner-artwork {
-			width: 56px;
-			height: 56px;
+		.player-controls {
+			order: 3;
+		}
+		.player-right {
+			order: 4;
+			margin-left: auto;
 		}
 	}
 
 	@media (max-width: 480px) {
-		.player-info { flex-basis: auto; }
-		.player-inner { gap: 4px; }
-		.player-progress-section { order: 2; }
-		.player-controls { order: 3; flex: 0; }
-		.player-right { order: 4; }
+		.player-info {
+			flex-basis: auto !important;
+		}
+		.player-inner {
+			gap: 4px !important;
+		}
 	}
 </style>