fix(notifications): use bg-canvas on list so items match page background

The <ul> had bg-surface (white), causing unread rows to inherit white
instead of blending with the canvas background. Read rows already set
bg-canvas explicitly, so they looked fine. Unread rows were white.

Fix: set bg-canvas on the <ul> so all rows inherit the page background.
The redundant explicit bg-canvas on read rows is removed.
Unread items remain visually distinct via the left accent border + dot only.

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

frontend/src/routes/notifications/+page.svelte

@@ -202,7 +202,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 		{:else}
 			<ul
 				role="list"
-				class="divide-y divide-line rounded-sm border border-line bg-surface shadow-sm"
+				class="divide-y divide-line rounded-sm border border-line bg-canvas shadow-sm"
 			>
 				{#each allNotifications as n (n.id)}
 					<li class="relative">
@@ -213,7 +213,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 								'flex min-h-14 flex-col justify-center border-l-[3px] px-4 py-4 md:px-6 md:py-5',
 								'transition-colors hover:bg-accent-bg',
 								n.read
-									? 'border-l-transparent bg-canvas'
+									? 'border-l-transparent'
 									: 'border-l-accent'
 							].join(' ')}
 							aria-label={m.notification_row_aria({