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)} />