style(ui): use solid sidebar pills instead of accent gradients

Active and nested nav rows are rounded-md with neutral selected fills
and a left accent rail. Remove purple/yellow gradient washes and update
the redesign notes to match.

UI_REDESIGN.md

@@ -38,9 +38,8 @@ The interface is compact and product-focused:
 - outline Reicon glyphs through `<x-reicon>`;
 - the Coolify purple brand accent in light mode;
 - the readable Coolify yellow accent in dark mode;
-- subtle active-item gradients that fade completely into the surrounding
-  background at the far edge, with the active pill rounded only on the left
-  (square on the right so it bleeds into the content edge);
+- solid active-item fills (neutral black/white opacity), not accent gradients;
+  active state is the left accent rail plus a flat selected surface;
 - sentence-case labels and headings;
 - never use the em dash (`—`) in UI copy. Prefer a period, colon, comma, or
   ASCII hyphen (`-`) for empty cells and separators.
@@ -124,9 +123,10 @@ opacity rather than a fully saturated fill.
 
 - Main sidebar groups are compact, use outline Reicons, and keep a 32px row
   height.
-- Active sidebar rows have a curved accent rail and a subtle horizontal
-  gradient. The gradient must fade to the exact sidebar background at the
-  right edge in both themes.
+- Active sidebar rows are rounded pills (`rounded-md`) with an accent rail on
+  the left plus a solid neutral selected fill (`bg-black/5` light,
+  `bg-white/6` dark). Hover rows use the same radius. Do not use accent-tinted
+  gradients on nav rows; yellow washes look muddy on dark UI.
 - Nested items use a thin guide line with a visible active segment, not a thick
   box border.
 - The update badge sits on the version row and uses a tiny fully rounded

resources/css/app.css

@@ -75,7 +75,7 @@
         @apply min-h-10 rounded-md border border-white/10 bg-white/10 px-2 py-2 text-sm font-semibold text-white shadow-inner active:bg-white/25;
     }
 
-    /* Accent bar on the active sidebar item (Linear/Wave-style) */
+    /* Accent rail on the active rounded pill (sits flush on the left edge) */
     .menu-item-active::before {
         content: "";
         position: absolute;
@@ -84,7 +84,7 @@
         left: 0;
         width: 3px;
         background: var(--color-accent);
-        border-radius: 0;
+        border-radius: 0.375rem 0 0 0.375rem;
         pointer-events: none;
     }
     .menu-subitem-active::before {
@@ -92,16 +92,13 @@
         position: absolute;
         top: 0;
         bottom: 0;
-        left: calc(-0.25rem - 4px);
+        left: 0;
         z-index: 1;
         width: 3px;
-        border-radius: 0;
+        border-radius: 0.375rem 0 0 0.375rem;
         background: var(--color-accent);
         pointer-events: none;
     }
-    .menu-subitem-active {
-        overflow: visible !important;
-    }
     .sidebar-collapsed .menu-item-active::before {
         display: none;
     }
@@ -111,26 +108,12 @@
         opacity: 1;
     }
 
+    /* Kill any legacy accent wash; fill is solid via menu-item-active utility. */
     .menu-item-active,
-    .menu-subitem-active {
-        background-image: linear-gradient(
-            90deg,
-            rgba(107, 22, 237, 0.2) 0%,
-            rgba(107, 22, 237, 0.1) 42%,
-            rgba(107, 22, 237, 0.035) 76%,
-            transparent 100%
-        );
-    }
-
+    .menu-subitem-active,
     .dark .menu-item-active,
     .dark .menu-subitem-active {
-        background-image: linear-gradient(
-            90deg,
-            rgba(252, 212, 82, 0.2) 0%,
-            rgba(252, 212, 82, 0.1) 42%,
-            rgba(252, 212, 82, 0.035) 76%,
-            transparent 100%
-        );
+        background-image: none;
     }
 
     /* vertical connector line for a nested nav group */

resources/css/utilities.css

@@ -205,7 +205,7 @@
 }
 
 @utility menu-item {
-    @apply relative flex gap-2.5 items-center h-8 px-2.5 w-full text-[13px] font-medium rounded-none truncate min-w-0 transition-colors text-neutral-500 dark:text-fg-faint hover:bg-neutral-100 hover:text-black dark:hover:bg-white/[0.05] dark:hover:text-fg;
+    @apply relative flex gap-2.5 items-center h-8 px-2.5 w-full text-[13px] font-medium rounded-md truncate min-w-0 transition-colors text-neutral-500 dark:text-fg-faint hover:bg-neutral-100 hover:text-black dark:hover:bg-white/[0.05] dark:hover:text-fg;
 }
 @utility menu-item-icon {
     @apply shrink-0 size-[18px] opacity-90;
@@ -216,7 +216,8 @@
 }
 
 @utility menu-item-active {
-    @apply overflow-visible rounded-none bg-transparent text-black hover:bg-transparent dark:bg-transparent dark:text-fg dark:hover:bg-transparent;
+    /* Solid selected pill + accent rail (app.css ::before). No accent gradient. */
+    @apply overflow-hidden rounded-md bg-black/[0.05] text-black hover:bg-black/[0.05] dark:bg-white/[0.06] dark:text-fg dark:hover:bg-white/[0.06];
 }
 
 /* Subtle Title-Case section header */
@@ -226,10 +227,10 @@
 
 /* Indented child rows in a collapsible nav group */
 @utility menu-subitem {
-    @apply relative flex gap-2.5 items-center h-8 pl-3 pr-2.5 w-full text-[13px] font-medium rounded-none truncate min-w-0 transition-colors text-neutral-500 dark:text-fg-faint hover:bg-neutral-100 hover:text-black dark:hover:bg-white/[0.05] dark:hover:text-fg;
+    @apply relative flex gap-2.5 items-center h-8 pl-3 pr-2.5 w-full text-[13px] font-medium rounded-md truncate min-w-0 transition-colors text-neutral-500 dark:text-fg-faint hover:bg-neutral-100 hover:text-black dark:hover:bg-white/[0.05] dark:hover:text-fg;
 }
 @utility menu-subitem-active {
-    @apply rounded-none bg-transparent text-black hover:bg-transparent dark:bg-transparent dark:text-fg dark:hover:bg-transparent;
+    @apply overflow-hidden rounded-md bg-black/[0.05] text-black hover:bg-black/[0.05] dark:bg-white/[0.06] dark:text-fg dark:hover:bg-white/[0.06];
 }
 
 @utility sub-menu-wrapper {