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/routes/(app)/upload/+page.svelte

@@ -115,7 +115,7 @@
 							class="grid h-7 w-7 shrink-0 place-items-center rounded-full text-xs font-bold {stepStates[
 								i
 							] === 'idle'
-								? 'bg-white/[3.5%] text-fg-2'
+								? 'bg-surface-2 text-fg-2'
 								: 'bg-accent-btn text-accent-soft'}"
 						>
 							{#if stepStates[i] === 'done'}
@@ -228,7 +228,7 @@
 						{#if coverPreview !== ''}
 							<img src={coverPreview} alt="Portada" class="h-full w-full object-cover" />
 						{:else}
-							<ImageIcon class="h-11 w-11 text-white/70" strokeWidth={1.3} />
+							<ImageIcon class="h-11 w-11 text-on-art/70" strokeWidth={1.3} />
 						{/if}
 					</label>
 				</Field>