fix(ui): softer chrome-gradient falloff + segmented media toggle (#1478)

Two operator-flagged polish items from the Vuetify-4 review:

Gradient: reshape the nav + sub-header fade from a near-linear ramp to a
hold-then-soft-drop profile — hold high opacity (0.92 → seam 0.68) through the
bulk of the chrome, then ease to transparent over a small section at the bottom
with an intermediate stop, so it tails off softly instead of running a straight
line into a hard edge. Raising the shared --fc-chrome-seam also makes the tab
strips more legible over scrolling content.

Media toggle: FC's global VBtn { rounded: 'pill' } default made Vuetify 4
pill-round each SEGMENT of the All/Images/Videos v-btn-toggle individually, so
the rounded ends collided at the joins. Square the inner segments and clip the
group to one 8px outline — a proper segmented control.

Both are colour/border-radius only — no control height changes, so the filter
bar height and the nav offset (--fc-nav-h) are untouched.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/TopNav.vue

@@ -145,12 +145,17 @@ const health = computed(() => {
   align-items: center;
   gap: 1rem;
   padding: 0.75rem 1rem;
-  /* Obsidian (#14171A = 20,23,26) gradient fade — content scrolls under it. */
+  /* Obsidian (#14171A) fade — content scrolls under it. Holds high (0.92 →
+     0.84) through the top half, then eases to transparent over the bottom
+     quarter so it tails off softly instead of a straight line to a hard edge
+     (operator 2026-07-13). Shared --fc-chrome-rgb keeps it in sync with the
+     sub-header continuation. */
   background: linear-gradient(
     to bottom,
-    rgba(20, 23, 26, 0.92) 0%,
-    rgba(20, 23, 26, 0.65) 60%,
-    rgba(20, 23, 26, 0) 100%
+    rgba(var(--fc-chrome-rgb), 0.92) 0%,
+    rgba(var(--fc-chrome-rgb), 0.84) 50%,
+    rgba(var(--fc-chrome-rgb), 0.55) 75%,
+    rgba(var(--fc-chrome-rgb), 0) 100%
   );
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
@@ -165,7 +170,7 @@ const health = computed(() => {
   background: linear-gradient(
     to bottom,
     rgba(var(--fc-chrome-rgb), 0.92) 0%,
-    rgba(var(--fc-chrome-rgb), 0.72) 55%,
+    rgba(var(--fc-chrome-rgb), 0.84) 60%,
     rgba(var(--fc-chrome-rgb), var(--fc-chrome-seam)) 100%
   );
 }

frontend/src/components/gallery/GalleryFilterBar.vue

@@ -331,6 +331,20 @@ function pushFilter(mutate) {
 .fc-filterbar-wrap :deep(.v-btn-group) {
   background-color: rgba(20, 23, 26, 0.72);
 }
+/* Media toggle (All / Images / Videos) as ONE cohesive segmented control.
+   FC's global VBtn { rounded: 'pill' } default made Vuetify 4 pill-round each
+   SEGMENT individually, so the rounded ends collided at the joins — the shapes
+   landed awkwardly on the button edges (operator 2026-07-13). Square the inner
+   segments (over the pill utility's !important) and clip the group to a single
+   8px outline (matches the chips/tiles rounding elsewhere in the app). Radius
+   only — no height change, so the bar height and nav offset are untouched. */
+.fc-filterbar-wrap :deep(.v-btn-toggle) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+.fc-filterbar-wrap :deep(.v-btn-toggle .v-btn) {
+  border-radius: 0 !important;
+}
 .fc-filterbar__search { max-width: 320px; min-width: 200px; }
 .fc-filterbar__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 /* The tag chips' bodies toggle include/exclude — signal they're clickable. */