feat(mobile): redesign topbar + collapse cumbersome page-header on mobile

Topbar (mobile-topbar.tsx):
  - Bumped to 56px to match standard mobile-app proportions.
  - Deep-navy gradient surface (#1e2844 -> #171f35) with white type —
    matches the desktop sidebar identity, gives the app a premium
    finish instead of generic white-with-text.
  - Brand "PN" wordmark mark on the left when no back affordance is
    needed (rounded brand-blue square, inset highlight + drop shadow).
  - Soft glow shadow underneath for elevation depth instead of a hard
    bottom border.
  - White-on-navy back arrow with active-state translucent fill.

PageHeader (page-header.tsx):
  - On mobile, the gradient hero strip + duplicate title + description
    block now collapses entirely — the topbar already shows the title,
    so duplicating it in the body wasted a third of the viewport.
  - The actions slot remains rendered as a flush right-aligned row so
    primary buttons (date-range pickers, "+ New X") stay accessible.
  - Desktop rendering is untouched.

Mobile shell (mobile-layout.tsx):
  - Top buffer 16px below the topbar so content doesn't ride flush.
  - Bottom buffer 32px above the tab bar so the last card breathes.

CSS (globals.css):
  - Hide the react-query-devtools floating button below lg: — it was
    overlapping the bottom-tab bar's "More" affordance.

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

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

@@ -2,6 +2,7 @@
 
 import { useState, type ReactNode } from 'react';
 
+import { cn } from '@/lib/utils';
 import { MobileLayoutProvider } from './mobile-layout-provider';
 import { MobileTopbar } from './mobile-topbar';
 import { MobileBottomTabs } from './mobile-bottom-tabs';
@@ -21,7 +22,15 @@ export function MobileLayout({ children }: { children: ReactNode }) {
     <div data-shell="mobile" className="min-h-screen bg-background">
       <MobileLayoutProvider>
         <MobileTopbar />
-        <main className="px-4 pt-[calc(52px+env(safe-area-inset-top))] pb-[calc(56px+env(safe-area-inset-bottom))] min-h-screen">
+        <main
+          className={cn(
+            'px-4 min-h-screen',
+            // 56px topbar + safe-area + 16px breathing room
+            'pt-[calc(56px+env(safe-area-inset-top)+1rem)]',
+            // 56px tab bar + safe-area + 32px breathing room
+            'pb-[calc(56px+env(safe-area-inset-bottom)+2rem)]',
+          )}
+        >
           {children}
         </main>
         <MobileBottomTabs onMoreClick={() => setMoreOpen(true)} />

src/components/layout/mobile/mobile-topbar.tsx

@@ -7,16 +7,20 @@ import { cn } from '@/lib/utils';
 import { useMobileChrome } from './mobile-layout-provider';
 
 /**
- * Fixed compact topbar (52px + safe-area top inset). Renders the page title
- * (auto-truncating), an optional back button, and an optional primary action
- * — all driven by `useMobileChrome()` from the active page.
+ * Fixed mobile topbar (56px + safe-area top inset). Marina-editorial premium:
+ * deep-navy gradient surface with white type, the brand "PN" mark on the
+ * left when there's no back affordance, and a soft glow shadow underneath
+ * for depth instead of a hard divider line.
+ *
+ * Slots: title (auto-truncating), back arrow, primary action — all driven by
+ * `useMobileChrome()` from the active page. When no page has set a title the
+ * URL's last segment is title-cased as a fallback.
  */
 export function MobileTopbar() {
   const { title, primaryAction, showBackButton } = useMobileChrome();
   const router = useRouter();
   const pathname = usePathname();
 
-  // Fall back to the last path segment (Title Case) if no page-supplied title.
   const fallbackTitle =
     pathname
       .split('/')
@@ -28,8 +32,10 @@ export function MobileTopbar() {
   return (
     <header
       className={cn(
-        'fixed top-0 inset-x-0 z-40 bg-background border-b border-border',
-        'h-[calc(52px+env(safe-area-inset-top))] pt-safe-top',
+        'fixed top-0 inset-x-0 z-40',
+        'bg-gradient-to-b from-[#1e2844] to-[#171f35]',
+        'shadow-[0_4px_18px_-6px_rgba(15,23,42,0.45)]',
+        'h-[calc(56px+env(safe-area-inset-top))] pt-safe-top',
         'flex items-center gap-2 px-3',
       )}
     >
@@ -38,19 +44,37 @@ export function MobileTopbar() {
           type="button"
           onClick={() => router.back()}
           aria-label="Go back"
-          className="-ml-1 size-11 inline-flex items-center justify-center text-foreground"
+          className={cn(
+            'size-11 inline-flex items-center justify-center rounded-full -ml-1',
+            'text-white/95 active:bg-white/10 transition-colors',
+          )}
         >
-          <ChevronLeft className="size-5" />
+          <ChevronLeft className="size-[22px] stroke-[2.25]" />
         </button>
       ) : (
-        <div className="size-11" aria-hidden />
+        <div
+          aria-label="Port Nimara"
+          className={cn(
+            'size-9 shrink-0 rounded-lg flex items-center justify-center',
+            'bg-[#3a7bc8] shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_1px_2px_rgba(0,0,0,0.25)]',
+          )}
+        >
+          <span className="text-white font-bold text-[13px] tracking-tight">PN</span>
+        </div>
       )}
 
-      <h1 className="flex-1 text-base font-semibold truncate text-foreground">
+      <h1
+        className={cn(
+          'flex-1 min-w-0 truncate text-center',
+          'text-[17px] font-semibold tracking-tight text-white',
+        )}
+      >
         {title ?? fallbackTitle}
       </h1>
 
-      <div className="size-11 inline-flex items-center justify-end">{primaryAction}</div>
+      <div className="size-11 inline-flex items-center justify-center text-white/95">
+        {primaryAction}
+      </div>
     </header>
   );
 }