fix(dashboard): use bg-surface instead of bg-white in ReaderHeaderBar for dark mode

bg-white is hardcoded #fff and only flips via the Tailwind dark: media-query variant.
bg-surface uses a CSS variable (--c-surface) that responds to both the media query
and the [data-theme='dark'] attribute, matching how all other cards on the page work.

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

frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte

@@ -20,7 +20,7 @@ const timeLabel = $derived.by(() => {
 </script>
 
 <header
-	class="flex flex-col items-start gap-4 rounded-sm border border-line bg-white px-4 py-3 sm:flex-row sm:items-center dark:border-white/8 dark:bg-surface"
+	class="flex flex-col items-start gap-4 rounded-sm border border-line bg-surface px-4 py-3 sm:flex-row sm:items-center dark:border-white/8"
 >
 	<!-- Greeting -->
 	<div class="min-w-0 flex-1">

frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte.spec.ts

@@ -81,12 +81,11 @@ describe('ReaderHeaderBar', () => {
 		await expect.element(welcome).toBeInTheDocument();
 	});
 
-	it('wrapper has dark mode classes', async () => {
+	it('wrapper uses bg-surface (CSS-variable-backed, dark-mode-aware)', async () => {
 		render(ReaderHeaderBar, { name: 'Anna', documents: 1, persons: 1, stories: 1 });
 		const wrapper = page.getByRole('banner');
 		const cls = ((await wrapper.element()) as HTMLElement).className;
-		expect(cls).toMatch(/dark:bg-surface/);
-		expect(cls).toMatch(/dark:border-white\/8/);
+		expect(cls).toMatch(/\bbg-surface\b/);
 	});
 
 	it('renders a vertical divider with bg-line class', async () => {