feat: add mobile responsiveness, design consistency, and micro-interactions

- Add mobile hamburger menu with slide-out nav drawer (AppLayout)
- Make modals responsive: full-width on mobile, slide-up animation
- Scratchpad becomes full-screen overlay on mobile with backdrop
- Folder sidebar hidden on mobile, opens as slide-over drawer
- Tree editor shows "Desktop Required" gate on mobile
- Stack action buttons vertically on mobile (sessions, detail pages)
- Increase touch targets throughout (buttons, close icons)
- Add CSS animations: fade-in, slide-in-left, scale-in, btn-press
- Add card hover lift effect and consistent border highlights
- Standardize page padding (px-4 py-6 sm:px-6 sm:py-8)
- Responsive headings (text-2xl sm:text-3xl)
- CustomStepModal goes full-screen on mobile
- Tighten auth page spacing on mobile

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/TreeNavigationPage.tsx

@@ -643,7 +643,7 @@ export function TreeNavigationPage() {
   return (
     <div className="h-[calc(100vh-4rem)]">
       {/* Main Content */}
-      <div className={cn('h-full overflow-y-auto px-4 py-8 transition-[padding] duration-200', scratchpadOpen && 'pr-[440px]')}>
+      <div className={cn('h-full overflow-y-auto px-4 py-8 transition-[padding] duration-200', scratchpadOpen && 'sm:pr-[440px]')}>
       <div className="mx-auto max-w-4xl">
       {/* Header */}
       <div className="mb-6 flex items-center justify-between">
@@ -659,7 +659,7 @@ export function TreeNavigationPage() {
         </div>
         <button
           onClick={() => navigate('/sessions')}
-          className="text-sm text-muted-foreground hover:text-foreground"
+          className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           Exit
         </button>
@@ -753,9 +753,10 @@ export function TreeNavigationPage() {
             {/* Add Custom Step Button */}
             <button
               onClick={() => setShowCustomStepModal(true)}
-              className="mt-2 text-sm text-primary hover:underline"
+              className="mt-2 inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm text-primary hover:bg-primary/10"
             >
-              + Add Custom Step
+              <Plus className="h-3.5 w-3.5" />
+              Add Custom Step
             </button>
           </>
         )}