v4: /settings and /manage take after /notifications — the three pages the user menu and the bell lead to share one frame: a 680px column (PageShell's new narrow), a title with its icon (PageHeader: ⚙️, 🛠️, 🔔), then groups under a small capitalized label ruled to the column's end (PageGroup, the notifications' day label), their content on surface cards (.page-card, the notification items' surface). Settings drew big section headings over controls laid on the bare page, the full width wide, and Manage the same around the category manager; each section is now a card whose setting rows are ruled apart and keep their labels lined up (a subgrid of the card's columns). The notifications' column, centered by auto margins in a flex column, shrank to its content (380px with short ones); it fills its width now. Its own header, group and bell rules gave way to the shared ones, and Times, Brutalist and GeoCities dress .page-card as they dress the notification items. In the narrower column, Kanagawa's monospace no longer fit the six styles on one row, and French labels leave even less room: a segmented control of more than four options now makes two even rows at any width, as it did on phones. 670 frontend tests pass, and tsc, eslint, deno lint, deno fmt and doc:lint are clean; checked in screenshots in all six styles at 1280 and 390px, Smooth in light too, with the account's style and the notifications mocked so the shared test account was left as it was.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/themes/brutalist.css

@@ -321,8 +321,9 @@
   color: var(--color-text);
 }
 
-/* ── Notification items ──────────────────────────────────────────── */
-[data-style="brutalist"] .notification-item {
+/* ── Notification items and page cards ─────────────────────────── */
+[data-style="brutalist"] .notification-item,
+[data-style="brutalist"] .page-card {
   border: 2px solid var(--color-border);
   box-shadow: 2px 2px 0 var(--color-border);
 }