fix(ui): polish discover skeleton, library card hovers, reading progress bar

- Discover loading skeleton: add borders and book icon placeholder so
  card shapes are visible on all dark themes (was invisible on forest)
- Library grid cards: match catalogue hover style (brand border, surface
  lift, shadow, -translate-y-0.5) and remove hardcoded zinc-500 border
- Reading progress bar: increase height 2px→3px and add brand glow shadow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/app.css

@@ -202,9 +202,10 @@ html {
 	position: fixed;
 	top: 0;
 	left: 0;
-	height: 2px;
+	height: 3px;
 	z-index: 100;
 	background: var(--color-brand);
+	box-shadow: 0 0 8px color-mix(in srgb, var(--color-brand) 70%, transparent);
 	pointer-events: none;
 	transition: width 0.1s linear;
 }

ui/src/routes/books/+page.svelte

@@ -217,10 +217,10 @@
 				href="/books/{book.slug}"
 				onclick={(e) => onCardClick(e, book.slug)}
 				draggable="false"
-				class="group relative flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) border transition-colors select-none
+				class="group relative flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) border transition-all select-none
 					{isSelected
 						? 'border-(--color-brand) ring-2 ring-(--color-brand)/40'
-						: 'border-(--color-border) hover:bg-(--color-surface-3) hover:border-zinc-500'}"
+						: 'border-(--color-border) hover:bg-(--color-surface-3) hover:border-(--color-brand)/50 hover:shadow-lg hover:shadow-black/20 hover:-translate-y-0.5'}"
 			>
 				<!-- Selection overlay -->
 				{#if selectMode}

ui/src/routes/discover/+page.svelte

@@ -597,11 +597,15 @@
 		{#if loading}
 			<!-- ── Skeleton ──────────────────────────────────────────────────── -->
 			<div class="w-full max-w-sm lg:max-w-none flex-1 flex flex-col gap-4">
-				<div class="flex-1 rounded-2xl bg-(--color-surface-2) animate-pulse" style="min-height: 340px;"></div>
+				<div class="flex-1 rounded-2xl bg-(--color-surface-2) border border-(--color-border) animate-pulse flex items-center justify-center" style="min-height: 340px;">
+					<svg class="w-12 h-12 text-(--color-border)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+					</svg>
+				</div>
 				<div class="flex gap-3">
-					<div class="flex-1 h-14 rounded-2xl bg-(--color-surface-2) animate-pulse"></div>
-					<div class="flex-[1.4] h-14 rounded-2xl bg-(--color-surface-2) animate-pulse"></div>
-					<div class="flex-1 h-14 rounded-2xl bg-(--color-surface-2) animate-pulse"></div>
+					<div class="flex-1 h-14 rounded-2xl bg-(--color-surface-2) border border-(--color-border) animate-pulse"></div>
+					<div class="flex-[1.4] h-14 rounded-2xl bg-(--color-surface-2) border border-(--color-brand)/20 animate-pulse"></div>
+					<div class="flex-1 h-14 rounded-2xl bg-(--color-surface-2) border border-(--color-border) animate-pulse"></div>
 				</div>
 			</div>
 
@@ -791,13 +795,13 @@
 		{#if loading}
 			<!-- Skeleton -->
 			<div class="p-8 flex flex-col gap-4">
-				<div class="h-6 rounded-lg bg-(--color-surface-3) animate-pulse w-3/4"></div>
-				<div class="h-4 rounded-lg bg-(--color-surface-3) animate-pulse w-1/2"></div>
-				<div class="h-32 rounded-xl bg-(--color-surface-3) animate-pulse"></div>
+				<div class="h-6 rounded-lg bg-(--color-surface-3) border border-(--color-border)/50 animate-pulse w-3/4"></div>
+				<div class="h-4 rounded-lg bg-(--color-surface-3) border border-(--color-border)/50 animate-pulse w-1/2"></div>
+				<div class="h-32 rounded-xl bg-(--color-surface-3) border border-(--color-border)/50 animate-pulse"></div>
 				<div class="flex gap-2">
-					<div class="h-6 rounded-full bg-(--color-surface-3) animate-pulse w-16"></div>
-					<div class="h-6 rounded-full bg-(--color-surface-3) animate-pulse w-20"></div>
-					<div class="h-6 rounded-full bg-(--color-surface-3) animate-pulse w-14"></div>
+					<div class="h-6 rounded-full bg-(--color-surface-3) border border-(--color-border)/50 animate-pulse w-16"></div>
+					<div class="h-6 rounded-full bg-(--color-surface-3) border border-(--color-border)/50 animate-pulse w-20"></div>
+					<div class="h-6 rounded-full bg-(--color-surface-3) border border-(--color-border)/50 animate-pulse w-14"></div>
 				</div>
 			</div>
 		{:else if !deckEmpty && currentBook}