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/App.css

@@ -825,12 +825,11 @@
   white-space: nowrap;
 }
 
-/* On a phone, many options make two even rows; Segmented sets the columns. */
-@media (max-width: 512px) {
-  .visibility-toggle--many {
-    display: grid;
-    grid-template-columns: repeat(var(--segmented-columns), minmax(0, 1fr));
-  }
+/* Many options make two even rows, whatever the width, so their fit doesn't
+   hang on the style's font or the language; Segmented sets the columns. */
+.visibility-toggle--many {
+  display: grid;
+  grid-template-columns: repeat(var(--segmented-columns), minmax(0, 1fr));
 }
 
 .visibility-toggle button.active {
@@ -2720,11 +2719,17 @@ body.has-player .chat-fab {
   gap: 2.5rem;
 }
 
-/* ── Page header ──
-   A page that edits nothing (settings, manage, notifications) names itself
-   with a bare h1, a size above its sections' h2, and keeps whatever goes
-   with it (a count) at the row's end. The edit forms cap their panels with
+/* ── Menu pages ──
+   The pages the user menu and the bell lead to (settings, manage,
+   notifications) share one frame: a narrow column, a bare h1 with its icon
+   (PageHeader), then groups under a small ruled label (PageGroup) whose
+   content sits on surface cards. The edit forms cap their panels with
    .form-page-header instead. */
+.page-content--narrow {
+  max-width: calc(680px + 2.5rem);
+  gap: 2rem;
+}
+
 .page-header {
   display: flex;
   align-items: center;
@@ -2744,6 +2749,68 @@ body.has-player .chat-fab {
   overflow-wrap: anywhere;
 }
 
+.page-title-icon {
+  font-size: var(--text-xl);
+}
+
+.page-group-label {
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  margin: 0 0 0.6rem;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.page-group-label::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--color-border-subtle);
+}
+
+/* The notification items are cards of their own, with an unread bar. */
+.page-card,
+.notification-item {
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-border-subtle);
+}
+
+.page-card {
+  padding: 1rem;
+}
+
+/* A card of settings rules its rows apart; they keep the grid's columns, so
+   the labels still line up. */
+.page-card.profile-appearance-grid {
+  padding-block: 0;
+  row-gap: 0;
+}
+
+.page-card > .profile-appearance-row {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: center;
+  justify-items: start;
+  padding-block: 0.75rem;
+}
+
+.page-card > .profile-appearance-row + .profile-appearance-row {
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+@media (max-width: 512px) {
+  .page-card > .profile-appearance-row {
+    display: flex;
+    align-items: flex-start;
+  }
+}
+
 .page-content--centered {
   align-items: center;
   padding-top: 2.5rem;
@@ -6498,17 +6565,6 @@ body.has-player .chat-fab {
 }
 
 /* ── Notifications page ── */
-.notifications-page {
-  max-width: 680px;
-  margin: 0 auto;
-  padding: 1.5rem 1rem 3rem;
-}
-.notifications-page > .page-header {
-  margin-bottom: 1.75rem;
-}
-.notifications-title-bell {
-  font-size: var(--text-lg);
-}
 .notifications-unread-pill {
   font-size: var(--text-xs);
   font-weight: 700;
@@ -6540,26 +6596,6 @@ body.has-player .chat-fab {
   line-height: 1.5;
 }
 
-.notif-group {
-  margin-bottom: 2rem;
-}
-.notif-group-label {
-  font-size: var(--text-2xs);
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--color-text-muted);
-  margin: 0 0 0.6rem;
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-}
-.notif-group-label::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: var(--color-border-subtle);
-}
 .notification-list {
   list-style: none;
   margin: 0;
@@ -6569,9 +6605,6 @@ body.has-player .chat-fab {
   gap: 1rem;
 }
 .notification-item {
-  background: var(--color-surface);
-  border-radius: var(--radius-xl);
-  border: 1px solid var(--color-border-subtle);
   border-left: 3px solid transparent;
   transition: background var(--dur-fast), border-color var(--dur-fast);
   overflow: hidden;