style(mobile-nav): dock the bottom bar to the screen edge, drop the floating pill

The primary mobile nav (Home/Discover/Calendar/My Events/Profile) was a
floating rounded pill with side margins and a gap above the safe area.
Restyled to a standard docked, full-width bottom tab bar flush to the
edge — matching how Instagram/TikTok/X render their own primary nav —
instead of introducing a second, competing "floating vs. dashboard" nav
idiom. Same items, same active-state logic, same hidden-path rules.

Author: claude

src/components/layout/mobile-bottom-nav.tsx

@@ -30,9 +30,9 @@ export function MobileBottomNav() {
   return (
     <nav
       aria-label="Mobile navigation"
-      className="fixed inset-x-4 bottom-[calc(env(safe-area-inset-bottom,0px)+1rem)] z-40 md:hidden"
+      className="fixed inset-x-0 bottom-0 z-40 border-t border-elevated bg-background/90 backdrop-blur-xl pb-[env(safe-area-inset-bottom,0px)] md:hidden"
     >
-      <div className="flex items-center justify-around px-2 h-14 mx-auto max-w-100 rounded-full bg-background/90 backdrop-blur-xl border border-elevated shadow-lg">
+      <div className="flex items-center justify-around px-2 h-14">
         {mobileNavItems.map((item) => {
           // For profile, redirect to sign-in if not authenticated
           const href =