style(layout): sidebar stripe + topbar gradient + bell spring + search ring

Sidebar active items: 4px brand left-edge stripe (rounded-r-full) replacing the
border-l-2 + bg shift; section header smaller-caps + brand-200 colour; user-footer
avatar gets shadow-sm + ring-2 ring-white/30.

Topbar '+ New' uses bg-gradient-brand with shadow-sm + scale-1.02 hover. User
avatar trigger gets shadow-sm + ring-2 ring-white. Notification badge gets
gradient-brand fill + ring-2 ring-background + animate-badge-pop spring keyframe
(retriggers on count change via key={unreadCount}). Command search gets shadow-xs
inset + brand focus ring (ring-4 ring-brand/15).

Adds badge-pop keyframes to tailwind config.

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

src/components/layout/sidebar.tsx

@@ -141,12 +141,18 @@ function NavItemLink({
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       href={item.href as any}
       className={cn(
-        'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150',
+        'relative flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-all duration-150',
         'text-[#cdcfd6] hover:bg-[#171f35] hover:text-white',
-        active && 'border-l-2 border-[#3a7bc8] bg-[#3a7bc810] text-white pl-[10px]',
+        active && 'text-white pl-[14px]',
         collapsed && 'justify-center px-2',
       )}
     >
+      {active && !collapsed && (
+        <span
+          aria-hidden
+          className="absolute left-0 top-1 bottom-1 w-1 rounded-r-full bg-[#3a7bc8]"
+        />
+      )}
       <item.icon
         className={cn(
           'shrink-0',
@@ -231,7 +237,7 @@ function SidebarContent({
                 <div key={section.title}>
                   {!collapsed && (
                     <div className="flex items-center justify-between px-1 mb-1">
-                      <span className="text-[#71768a] text-xs font-medium uppercase tracking-wider">
+                      <span className="text-[#83aab1] text-[10px] font-semibold uppercase tracking-[0.12em]">
                         {section.title}
                       </span>
                       {section.adminRequired && (
@@ -284,7 +290,7 @@ function SidebarContent({
             </Tooltip>
           ) : (
             <div className="flex items-center gap-3">
-              <Avatar className="w-8 h-8 shrink-0">
+              <Avatar className="w-8 h-8 shrink-0 shadow-sm ring-2 ring-white/30">
                 <AvatarImage src={undefined} />
                 <AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold">
                   {(user?.name ?? 'U').slice(0, 1).toUpperCase()}