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/topbar.tsx

@@ -57,7 +57,10 @@ export function Topbar({ ports, user }: TopbarProps) {
         {/* + New dropdown */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button size="sm" className="bg-brand hover:bg-brand-500 text-white gap-1.5">
+            <Button
+              size="sm"
+              className="bg-gradient-brand hover:opacity-90 text-white gap-1.5 shadow-sm transition-all duration-base ease-smooth hover:scale-[1.02]"
+            >
               <Plus className="w-4 h-4" />
               <span className="hidden sm:inline">New</span>
             </Button>
@@ -93,7 +96,7 @@ export function Topbar({ ports, user }: TopbarProps) {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="icon" className="rounded-full">
-              <Avatar className="w-7 h-7">
+              <Avatar className="w-7 h-7 shadow-sm ring-2 ring-white">
                 <AvatarImage src={undefined} />
                 <AvatarFallback className="bg-brand text-white text-xs font-semibold">
                   {(user?.name ?? 'U').slice(0, 1).toUpperCase()}