Align library styles with the design system

Use type recipes and Button danger variant, add danger tint, dropzone and cover-fill tokens, give SearchInput a size prop so the top bar keeps its larger search, show queue details inline on mobile, derive upload limits from constants and document the card hover style.

web-player/src/lib/components/music/library/LibraryTracksSection.svelte

@@ -77,6 +77,7 @@
 			<SearchInput
 				bind:value={query}
 				placeholder="Filtrar por título o artista"
+				size="sm"
 				class="w-full sm:max-w-search sm:flex-1"
 			/>
 			<ChipGroup label="Filtrar por estado" options={filterOptions} bind:value={filter} />

web-player/src/lib/components/music/library/LibraryUploadsSection.svelte

@@ -6,6 +6,7 @@
 		summarizeQueue,
 		toQueuedUpload,
 		UPLOAD_FORMATS,
+		uploadLimitsLabel,
 		type QueuedUpload,
 		type Visibility
 	} from '$lib/data/uploadQueue';
@@ -69,7 +70,7 @@
 		<FileDropzone
 			accept={ACCEPT}
 			title="Arrastra tus archivos aquí"
-			hint="WAV, FLAC, AIFF o MP3 · hasta 500 MB por archivo · puedes soltar carpetas enteras"
+			hint={uploadLimitsLabel()}
 			inputLabel="Elegir archivos de audio"
 			onfiles={enqueue}
 			readDrop={filesFromDrop}
@@ -88,7 +89,7 @@
 	<section class="min-w-0 rounded-panel bg-surface p-5 sm:p-6">
 		<div class="flex flex-wrap items-start justify-between gap-4">
 			<div>
-				<h2 class="font-display text-xl font-semibold tracking-display text-fg">Cola de subida</h2>
+				<h2 class="text-display-3 text-fg">Cola de subida</h2>
 				<p class="mt-1 text-xs text-fg-2">
 					{queue.length > 0 ? queueMeta : 'Todavía no hay archivos'}
 				</p>

web-player/src/lib/components/music/library/UploadQueueList.svelte

@@ -57,6 +57,17 @@
 		onTitle,
 		class: klass = ''
 	}: Props = $props();
+
+	function details(item: QueuedUpload): string {
+		return [
+			genresLabel,
+			visibilityLabel,
+			formatSize(item.file.size),
+			item.duration === null ? '' : fmtTime(item.duration)
+		]
+			.filter((part) => part !== '' && part !== '-')
+			.join(' · ');
+	}
 </script>
 
 <DataGrid
@@ -82,6 +93,7 @@
 						class="w-full truncate rounded-tag bg-transparent text-sm text-fg transition-colors hover:bg-surface focus:bg-surface-2 focus:outline-none"
 					/>
 					<p class="truncate text-xs text-fg-2">{item.file.name}</p>
+					<p class="truncate text-xs text-fg-2 sm:hidden">{details(item)}</p>
 				</div>
 			</div>
 		{:else if column.id === 'genres'}

web-player/src/lib/components/music/library/UploadSettings.svelte

@@ -59,11 +59,11 @@
 </script>
 
 <aside class="flex flex-col gap-6 {klass}">
-	<p class="text-xs font-medium tracking-eyebrow text-fg-2 uppercase">Aplicar a esta subida</p>
+	<p class="text-eyebrow text-fg-2">Aplicar a esta subida</p>
 
 	<div class="grid gap-8 sm:grid-cols-[auto_1fr]">
 		<Field label="Portada">
-			<div class="w-full max-w-44">
+			<div class="w-full max-w-cover-fill">
 				<ImageDropzone
 					name="cover"
 					icon={ImageIcon}