From 00308fde18bf6e87b640650ca2415721f6fb7f51 Mon Sep 17 00:00:00 2001
From: Yusuf Suleman <yusuf@quadjourney.com>
Date: Fri, 3 Apr 2026 07:54:44 -0500
Subject: [PATCH] style: restyle podcast player to Atelier warm design system

- All CSS vars replaced with Atelier inline colors
- Warm parchment sidebar, frosted glass player bar
- Brown accent tones matching Brain/Reader/Fitness
- Route page renders component directly (no wrappers)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/components/media/PodcastPlayer.svelte | 608 ++++++++++++------
 .../src/routes/(app)/podcasts/+page.svelte    |  19 +-
 2 files changed, 396 insertions(+), 231 deletions(-)

diff --git a/frontend-v2/src/lib/components/media/PodcastPlayer.svelte b/frontend-v2/src/lib/components/media/PodcastPlayer.svelte
index b00b2ac..6e9da80 100644
--- a/frontend-v2/src/lib/components/media/PodcastPlayer.svelte
+++ b/frontend-v2/src/lib/components/media/PodcastPlayer.svelte
@@ -493,7 +493,7 @@
 			<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 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>
@@ -657,7 +657,7 @@
 			<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>
+					<button class="btn-secondary" onclick={clearQueue}>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>
@@ -705,123 +705,189 @@
 {/if}
 
 <style>
+	/* ═══ Atelier Podcast — Warm earthy design system ═══ */
+
 	/* ── 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);
+		display: flex;
+		min-height: calc(100vh - 60px);
+		font-family: var(--font);
 	}
 
 	.mobile-shows-btn {
 		display: none;
 		align-items: center;
-		gap: var(--sp-2);
-		margin-bottom: var(--sp-3);
+		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 {
-		border-right: 1px solid var(--border);
-		background: var(--surface-secondary);
+		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: hidden;
+		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: var(--sp-4) var(--sp-4) var(--sp-3);
+		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: var(--sp-2);
-		padding: 0 var(--sp-4) var(--sp-3);
+		gap: 4px;
+		padding: 0 12px 10px;
 	}
 	.add-form .input {
 		flex: 1;
-		font-size: var(--text-sm);
-		padding: var(--sp-2) var(--sp-3);
+		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;
-		font-size: var(--text-sm);
-		padding: var(--sp-2) var(--sp-3);
+		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: var(--error);
-		font-size: var(--text-xs);
-		padding: 0 var(--sp-4) var(--sp-2);
+		color: #DC2626;
+		font-size: 0.72rem;
+		padding: 0 18px 8px;
 	}
 
 	.show-list {
 		flex: 1;
 		overflow-y: auto;
-		padding: 0 var(--sp-2) var(--sp-2);
+		padding: 0 12px 8px;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
 	}
 
 	.show-item {
 		display: flex;
 		align-items: center;
-		gap: var(--sp-3);
+		gap: 10px;
 		width: 100%;
-		padding: var(--sp-2) var(--sp-2);
+		padding: 10px 12px;
 		border: none;
 		background: none;
-		border-radius: var(--radius-sm);
+		border-radius: 14px;
 		cursor: pointer;
-		transition: background var(--transition);
+		transition: all 160ms;
 		text-align: left;
 		font-family: var(--font);
 	}
-	.show-item:hover { background: var(--card-hover); }
-	.show-item.active { background: var(--accent-dim); }
+	.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: 40px;
-		height: 40px;
-		border-radius: var(--radius-xs);
+		width: 38px;
+		height: 38px;
+		border-radius: 10px;
 		object-fit: cover;
 		flex-shrink: 0;
 	}
 
 	.show-artwork-placeholder {
-		width: 40px;
-		height: 40px;
-		border-radius: var(--radius-xs);
-		background: var(--card-hover);
+		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: var(--text-4);
+		color: #8c7b69;
 	}
-	.show-artwork-placeholder svg { width: 20px; height: 20px; }
+	.show-artwork-placeholder svg { width: 18px; height: 18px; }
 
 	.show-icon-all {
-		width: 40px;
-		height: 40px;
-		border-radius: var(--radius-xs);
-		background: var(--accent-dim);
+		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: var(--accent);
+		color: #7f5f3d;
 	}
-	.show-icon-all svg { width: 20px; height: 20px; }
+	.show-icon-all svg { width: 18px; height: 18px; }
 
 	.show-info {
 		flex: 1;
@@ -832,17 +898,18 @@
 	}
 
 	.show-name {
-		font-size: var(--text-sm);
+		font-size: 0.85rem;
 		font-weight: 500;
-		color: var(--text-1);
+		color: #1e1812;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+	.show-item.active .show-name { font-weight: 600; }
 
 	.show-meta {
-		font-size: var(--text-xs);
-		color: var(--text-3);
+		font-size: 0.72rem;
+		color: #8c7b69;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -851,11 +918,11 @@
 	.unplayed-badge {
 		font-size: 10px;
 		font-weight: 700;
-		background: var(--accent);
+		background: #5d4737;
 		color: white;
 		min-width: 18px;
 		height: 18px;
-		border-radius: var(--radius-full);
+		border-radius: 999px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -864,70 +931,105 @@
 		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 - 200px);
+		max-height: calc(100vh - 60px);
+		padding: 0;
 	}
 
 	/* Show banner */
 	.show-banner {
-		padding: var(--sp-5);
-		border-bottom: 1px solid var(--border);
-		background: var(--surface-secondary);
+		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: var(--sp-4);
+		gap: 18px;
 	}
 	.banner-artwork {
 		width: 72px;
 		height: 72px;
-		border-radius: var(--radius-md);
+		border-radius: 16px;
 		object-fit: cover;
 		flex-shrink: 0;
-		box-shadow: var(--shadow-sm);
+		box-shadow: 0 4px 16px rgba(42,30,19,0.08);
 	}
 	.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);
+		font-size: 1.1rem;
+		font-weight: 700;
+		color: #1e1812;
+		line-height: 1.3;
 		margin: 0;
+		letter-spacing: -0.02em;
 	}
 	.banner-author {
-		font-size: var(--text-sm);
-		color: var(--text-3);
-		margin: 2px 0 0;
+		font-size: 0.85rem;
+		color: #6b6256;
+		margin: 3px 0 0;
 	}
 	.banner-stats {
-		font-size: var(--text-xs);
-		color: var(--text-4);
+		font-size: 0.72rem;
+		color: #8c7b69;
 		margin: 4px 0 0;
 	}
 	.banner-actions {
 		display: flex;
-		gap: var(--sp-2);
+		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: var(--sp-2) 0;
+		padding: 8px 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);
+		gap: 14px;
+		padding: 14px 28px;
+		border-bottom: 1px solid rgba(35,26,17,0.06);
+		transition: background 160ms;
 	}
-	.episode-card:hover { background: var(--card-hover); }
-	.episode-card.playing { background: var(--accent-dim); }
+	.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 {
@@ -947,15 +1049,15 @@
 	.ep-artwork {
 		width: 52px;
 		height: 52px;
-		border-radius: var(--radius-sm);
+		border-radius: 12px;
 		object-fit: cover;
 	}
 	.ep-artwork-empty {
-		background: var(--card-hover);
+		background: rgba(35,26,17,0.06);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: var(--text-4);
+		color: #8c7b69;
 	}
 	.ep-artwork-empty svg { width: 24px; height: 24px; }
 
@@ -965,10 +1067,10 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: rgba(0,0,0,0.4);
-		border-radius: var(--radius-sm);
+		background: rgba(30,24,18,0.45);
+		border-radius: 12px;
 		opacity: 0;
-		transition: opacity var(--transition);
+		transition: opacity 160ms;
 		color: white;
 	}
 	.play-overlay svg { width: 20px; height: 20px; }
@@ -988,22 +1090,22 @@
 	}
 
 	.ep-title {
-		font-size: var(--text-base);
-		color: var(--text-2);
+		font-size: 0.92rem;
+		color: #2f2116;
 		font-weight: 400;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		line-height: var(--leading-snug);
+		line-height: 1.35;
 	}
 	.ep-title.unplayed {
-		color: var(--text-1);
-		font-weight: 500;
+		color: #1e1812;
+		font-weight: 600;
 	}
 
 	.ep-show {
-		font-size: var(--text-xs);
-		color: var(--text-3);
+		font-size: 0.72rem;
+		color: #8c7b69;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1012,60 +1114,80 @@
 	.ep-meta {
 		display: flex;
 		align-items: center;
-		gap: var(--sp-1);
+		gap: 5px;
 		margin-top: 4px;
-		font-size: var(--text-xs);
-		color: var(--text-4);
+		font-size: 0.72rem;
+		color: #8c7b69;
 	}
 
 	.ep-dot { opacity: 0.4; }
 
 	.ep-progress-label {
-		color: var(--accent);
-		font-weight: 500;
+		color: #7f5f3d;
+		font-weight: 600;
 	}
 
 	.ep-progress-bar {
 		width: 100%;
 		height: 3px;
-		background: var(--border);
-		border-radius: var(--radius-full);
+		background: rgba(35,26,17,0.08);
+		border-radius: 999px;
 		margin-top: 6px;
 		overflow: hidden;
 	}
 	.ep-progress-fill {
 		height: 100%;
-		background: var(--accent);
-		border-radius: var(--radius-full);
+		background: rgba(179,92,50,0.7);
+		border-radius: 999px;
 		transition: width 0.3s ease;
 	}
 
 	.ep-actions {
 		display: flex;
-		gap: var(--sp-1);
+		gap: 4px;
 		flex-shrink: 0;
 		opacity: 0;
-		transition: opacity var(--transition);
+		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: var(--sp-4);
+		padding: 20px 28px;
 		display: flex;
 		flex-direction: column;
-		gap: var(--sp-3);
+		gap: 12px;
+	}
+	.skeleton {
+		background: rgba(35,26,17,0.06);
+		border-radius: 10px;
+		animation: shimmer 1.6s infinite;
+	}
+	@keyframes shimmer {
+		0%, 100% { opacity: 0.6; }
+		50% { opacity: 1; }
 	}
 	.episode-skeleton {
 		display: flex;
-		gap: var(--sp-3);
-		padding: var(--sp-3);
-		border-radius: var(--radius-sm);
+		gap: 12px;
+		padding: 12px;
+		border-radius: 14px;
 		height: 72px;
 	}
 
@@ -1074,41 +1196,42 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		padding: var(--sp-16) var(--sp-4);
-		color: var(--text-4);
+		padding: 80px 20px;
+		color: #8c7b69;
 		text-align: center;
-		gap: var(--sp-3);
+		gap: 12px;
 	}
 	.empty-state svg {
 		width: 48px;
 		height: 48px;
-		opacity: 0.4;
+		opacity: 0.35;
 	}
 	.empty-state p {
-		font-size: var(--text-base);
+		font-size: 0.92rem;
 		margin: 0;
+		color: rgba(93,72,55,0.76);
 	}
 
-	/* ── Player bar ── */
+	/* ═══ Player bar ═══ */
 	.player-bar {
 		position: sticky;
 		bottom: 0;
 		left: 0;
 		right: 0;
 		z-index: 50;
-		background: var(--surface);
+		background: rgba(250,246,239,0.78);
 		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));
+		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: var(--sp-4);
+		gap: 16px;
 		max-width: 1280px;
 		margin: 0 auto;
 	}
@@ -1116,7 +1239,7 @@
 	.player-info {
 		display: flex;
 		align-items: center;
-		gap: var(--sp-3);
+		gap: 12px;
 		min-width: 0;
 		flex: 0 1 220px;
 	}
@@ -1124,16 +1247,16 @@
 	.player-artwork {
 		width: 44px;
 		height: 44px;
-		border-radius: var(--radius-xs);
+		border-radius: 10px;
 		object-fit: cover;
 		flex-shrink: 0;
 	}
 	.player-artwork-empty {
-		background: var(--card-hover);
+		background: rgba(35,26,17,0.06);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: var(--text-4);
+		color: #8c7b69;
 	}
 	.player-artwork-empty svg { width: 20px; height: 20px; }
 
@@ -1144,16 +1267,16 @@
 		gap: 2px;
 	}
 	.player-title {
-		font-size: var(--text-sm);
-		font-weight: 500;
-		color: var(--text-1);
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: #1e1812;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 	.player-show {
-		font-size: var(--text-xs);
-		color: var(--text-3);
+		font-size: 0.72rem;
+		color: #8c7b69;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1163,7 +1286,7 @@
 	.player-controls {
 		display: flex;
 		align-items: center;
-		gap: var(--sp-2);
+		gap: 6px;
 		flex-shrink: 0;
 	}
 
@@ -1174,15 +1297,15 @@
 		border: none;
 		background: none;
 		cursor: pointer;
-		color: var(--text-2);
+		color: #2f2116;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border-radius: var(--radius-full);
-		transition: all var(--transition);
+		border-radius: 999px;
+		transition: all 160ms;
 		padding: 0;
 	}
-	.control-btn:hover { background: var(--card-hover); color: var(--text-1); }
+	.control-btn:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
 	.control-btn svg { width: 20px; height: 20px; }
 	.skip-label {
 		position: absolute;
@@ -1196,18 +1319,18 @@
 	.play-btn {
 		width: 44px;
 		height: 44px;
-		border-radius: var(--radius-full);
+		border-radius: 999px;
 		border: none;
-		background: var(--text-1);
-		color: var(--surface);
+		background: #1e1812;
+		color: #faf6ef;
 		cursor: pointer;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		transition: all var(--transition);
+		transition: all 160ms;
 		flex-shrink: 0;
 	}
-	.play-btn:hover { transform: scale(1.05); }
+	.play-btn:hover { opacity: 0.9; transform: scale(1.05); }
 	.play-btn:active { transform: scale(0.95); }
 	.play-btn svg { width: 20px; height: 20px; }
 
@@ -1215,7 +1338,7 @@
 	.player-progress-section {
 		display: flex;
 		align-items: center;
-		gap: var(--sp-2);
+		gap: 8px;
 		flex: 1;
 		min-width: 0;
 	}
@@ -1223,7 +1346,7 @@
 	.time-label {
 		font-size: 11px;
 		font-family: var(--mono);
-		color: var(--text-4);
+		color: #8c7b69;
 		min-width: 40px;
 		text-align: center;
 		flex-shrink: 0;
@@ -1232,19 +1355,19 @@
 
 	.player-progress-bar {
 		flex: 1;
-		height: 6px;
-		background: var(--border);
-		border-radius: var(--radius-full);
+		height: 5px;
+		background: rgba(35,26,17,0.1);
+		border-radius: 999px;
 		cursor: pointer;
 		position: relative;
-		transition: height var(--transition);
+		transition: height 160ms;
 	}
-	.player-progress-bar:hover { height: 8px; }
+	.player-progress-bar:hover { height: 7px; }
 
 	.player-progress-fill {
 		height: 100%;
-		background: var(--accent);
-		border-radius: var(--radius-full);
+		background: #5d4737;
+		border-radius: 999px;
 		position: relative;
 		transition: width 0.1s linear;
 		max-width: 100%;
@@ -1257,11 +1380,11 @@
 		transform: translateY(-50%);
 		width: 12px;
 		height: 12px;
-		border-radius: var(--radius-full);
-		background: var(--accent);
-		box-shadow: var(--shadow-sm);
+		border-radius: 999px;
+		background: #5d4737;
+		box-shadow: 0 2px 6px rgba(42,30,19,0.18);
 		opacity: 0;
-		transition: opacity var(--transition);
+		transition: opacity 160ms;
 	}
 	.player-progress-bar:hover .player-progress-thumb { opacity: 1; }
 
@@ -1269,54 +1392,56 @@
 	.player-right {
 		display: flex;
 		align-items: center;
-		gap: var(--sp-2);
+		gap: 6px;
 		flex-shrink: 0;
 	}
 
 	.rate-control { position: relative; }
 	.rate-btn {
-		padding: 4px 8px;
-		border-radius: var(--radius-xs);
-		border: 1px solid var(--border);
+		padding: 4px 10px;
+		border-radius: 999px;
+		border: 1px solid rgba(35,26,17,0.1);
 		background: none;
-		font-size: var(--text-xs);
+		font-size: 0.72rem;
 		font-weight: 600;
 		font-family: var(--mono);
-		color: var(--text-2);
+		color: #2f2116;
 		cursor: pointer;
-		transition: all var(--transition);
+		transition: all 160ms;
 	}
-	.rate-btn:hover { background: var(--card-hover); color: var(--text-1); }
+	.rate-btn:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
 
 	.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);
+		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: 6px 14px;
-		font-size: var(--text-sm);
+		padding: 7px 16px;
+		font-size: 0.85rem;
 		font-family: var(--mono);
 		border: none;
 		background: none;
-		color: var(--text-2);
+		color: #2f2116;
 		cursor: pointer;
-		border-radius: var(--radius-xs);
+		border-radius: 10px;
 		text-align: left;
 		white-space: nowrap;
-		transition: all var(--transition);
+		transition: all 160ms;
 		font-weight: 500;
 	}
-	.rate-option:hover { background: var(--card-hover); color: var(--text-1); }
-	.rate-option.active { color: var(--accent); font-weight: 600; }
+	.rate-option:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
+	.rate-option.active { color: #7f5f3d; font-weight: 700; }
 
 	.queue-btn {
 		position: relative;
@@ -1325,15 +1450,15 @@
 		border: none;
 		background: none;
 		cursor: pointer;
-		color: var(--text-3);
+		color: #6b6256;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border-radius: var(--radius-md);
-		transition: all var(--transition);
+		border-radius: 10px;
+		transition: all 160ms;
 		padding: 0;
 	}
-	.queue-btn:hover { background: var(--card-hover); color: var(--text-1); }
+	.queue-btn:hover { background: rgba(255,248,241,0.95); color: #1e1812; }
 	.queue-btn svg { width: 18px; height: 18px; }
 	.queue-count {
 		position: absolute;
@@ -1341,8 +1466,8 @@
 		right: 2px;
 		min-width: 14px;
 		height: 14px;
-		border-radius: var(--radius-full);
-		background: var(--accent);
+		border-radius: 999px;
+		background: #5d4737;
 		color: white;
 		font-size: 9px;
 		font-weight: 700;
@@ -1353,11 +1478,11 @@
 		font-family: var(--mono);
 	}
 
-	/* ── Queue panel ── */
+	/* ═══ Queue panel ═══ */
 	.queue-overlay {
 		position: fixed;
 		inset: 0;
-		background: var(--overlay);
+		background: rgba(17,13,10,0.3);
 		z-index: 80;
 	}
 	.queue-panel {
@@ -1367,13 +1492,15 @@
 		bottom: 0;
 		width: 360px;
 		max-width: 90vw;
-		background: var(--surface);
-		border-left: 1px solid var(--border);
-		box-shadow: var(--shadow-xl);
+		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.2s ease;
+		animation: slideIn 0.22s ease;
 	}
 	@keyframes slideIn {
 		from { transform: translateX(100%); }
@@ -1384,14 +1511,48 @@
 		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);
+		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: var(--sp-2);
+		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;
@@ -1399,32 +1560,33 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		color: var(--text-4);
-		gap: var(--sp-1);
+		color: #8c7b69;
+		gap: 4px;
 	}
 	.queue-empty p {
-		font-size: var(--text-base);
-		font-weight: 500;
+		font-size: 0.92rem;
+		font-weight: 600;
 		margin: 0;
+		color: #6b6256;
 	}
-	.queue-empty span { font-size: var(--text-sm); }
+	.queue-empty span { font-size: 0.82rem; color: #8c7b69; }
 
 	.queue-list {
 		flex: 1;
 		overflow-y: auto;
-		padding: var(--sp-2);
+		padding: 8px;
 	}
 
 	.queue-item {
 		display: flex;
 		align-items: center;
-		gap: var(--sp-2);
-		padding: var(--sp-2);
-		border-radius: var(--radius-sm);
-		transition: background var(--transition);
+		gap: 8px;
+		padding: 8px;
+		border-radius: 14px;
+		transition: background 160ms;
 	}
-	.queue-item:hover { background: var(--card-hover); }
-	.queue-item + .queue-item { border-top: 1px solid var(--border); }
+	.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;
@@ -1438,31 +1600,31 @@
 		border: none;
 		background: none;
 		cursor: pointer;
-		color: var(--text-4);
+		color: #8c7b69;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		padding: 0;
-		border-radius: 2px;
-		transition: all var(--transition);
+		border-radius: 4px;
+		transition: all 160ms;
 	}
-	.reorder-btn:hover:not(:disabled) { color: var(--text-1); background: var(--card-hover); }
+	.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: var(--radius-xs);
+		border-radius: 8px;
 		object-fit: cover;
 		flex-shrink: 0;
 	}
 	.queue-artwork-empty {
-		background: var(--card-hover);
+		background: rgba(35,26,17,0.06);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: var(--text-4);
+		color: #8c7b69;
 	}
 
 	.queue-info {
@@ -1473,16 +1635,16 @@
 		gap: 2px;
 	}
 	.queue-ep-title {
-		font-size: var(--text-sm);
-		font-weight: 500;
-		color: var(--text-1);
+		font-size: 0.82rem;
+		font-weight: 600;
+		color: #1e1812;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 	.queue-ep-show {
-		font-size: var(--text-xs);
-		color: var(--text-3);
+		font-size: 0.7rem;
+		color: #8c7b69;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1491,10 +1653,21 @@
 	.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 ═══ */
 	@media (max-width: 768px) {
 		.podcast-layout {
 			display: flex;
@@ -1509,8 +1682,10 @@
 			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 {
 			display: flex;
@@ -1520,10 +1695,14 @@
 			max-height: none;
 		}
 
+		.episode-card {
+			padding: 12px 16px;
+		}
+
 		/* Player bar responsive */
 		.player-inner {
 			flex-wrap: wrap;
-			gap: var(--sp-2);
+			gap: 8px;
 		}
 		.player-info { flex: 1 1 100%; order: 1; }
 		.player-controls { order: 3; }
@@ -1532,6 +1711,9 @@
 
 		.ep-actions { opacity: 1; }
 
+		.show-banner {
+			padding: 18px 16px;
+		}
 		.show-banner-content {
 			flex-wrap: wrap;
 		}
@@ -1543,7 +1725,7 @@
 
 	@media (max-width: 480px) {
 		.player-info { flex-basis: auto; }
-		.player-inner { gap: var(--sp-1); }
+		.player-inner { gap: 4px; }
 		.player-progress-section { order: 2; }
 		.player-controls { order: 3; flex: 0; }
 		.player-right { order: 4; }
diff --git a/frontend-v2/src/routes/(app)/podcasts/+page.svelte b/frontend-v2/src/routes/(app)/podcasts/+page.svelte
index d2254b3..5380583 100644
--- a/frontend-v2/src/routes/(app)/podcasts/+page.svelte
+++ b/frontend-v2/src/routes/(app)/podcasts/+page.svelte
@@ -2,21 +2,4 @@
   import PodcastPlayer from '$lib/components/media/PodcastPlayer.svelte';
 </script>
 
-<div class="page">
-  <div class="app-surface">
-    <div class="page-header">
-      <div class="page-title">PODCASTS</div>
-      <div class="page-subtitle">Your podcast library</div>
-    </div>
-    <PodcastPlayer />
-  </div>
-</div>
-
-<style>
-  .page-subtitle {
-    font-size: var(--text-2xl);
-    font-weight: 300;
-    color: var(--text-1);
-    line-height: 1.2;
-  }
-</style>
+<PodcastPlayer />