Unify web-player design tokens and componentize collection headers

Migrates remaining one-off colors (bg-white/[N%], border-white/N, hardcoded
shadows/gradients) to the existing --mf-* tokens so light mode reacts
consistently everywhere, including a fix to --color-hover which was
hardcoded instead of pointing at --mf-surface-2. Extracts CollectionHeader
(album/playlist/mix/liked headers) and AccountMenu (TopBar/MobileHeader)
to remove five and two duplicated implementations respectively, and
normalizes inconsistent empty-state copy.

web-player/src/lib/components/player/SeekBar.svelte

@@ -28,7 +28,7 @@
 	</button>
 {:else}
 	<div class="flex w-full max-w-135 items-center gap-2.75">
-		<span class="min-w-8 text-right text-[10.5px] text-fg-3 tabular-nums">
+		<span class="min-w-8 text-right text-xs text-fg-3 tabular-nums">
 			{fmtTime(player.progress)}
 		</span>
 		<button
@@ -41,7 +41,7 @@
 				<div class="h-full rounded-full bg-accent" style="width:{player.progressPercent}%"></div>
 			</div>
 		</button>
-		<span class="min-w-8 text-[10.5px] text-fg-3 tabular-nums">
+		<span class="min-w-8 text-xs text-fg-3 tabular-nums">
 			{fmtTime(player.current.duration)}
 		</span>
 	</div>