## 1. Create MobileCourseBanner component

- [x] 1.1 Create `app/src/components/MobileCourseBanner.tsx` with props: `selectedCount: number`, `totalSets: number`, `visible: boolean`, `onTap: () => void`
- [x] 1.2 Render "{selectedCount} / {totalSets} courses selected" text
- [x] 1.3 Style the banner: `position: fixed`, `bottom: 0`, `left: 0`, `width: 100%`, `z-index: 1000`, white background with top border, compact height (~40px)
- [x] 1.4 Implement slide animation: always mounted, use `transform: translateY(100%)` when hidden vs `translateY(0)` when visible, `transition: transform 200ms ease-out`
- [x] 1.5 Attach `onClick` handler to the banner root element that calls `onTap`

## 2. Integrate into App.tsx

- [x] 2.1 Add a `courseSectionRef` to the course selection wrapper `<div>` in `App.tsx`
- [x] 2.2 Add a `courseBannerVisible` state and IntersectionObserver useEffect for the course section ref, gated on `isMobile`
- [x] 2.3 Mount `<MobileCourseBanner>` in the App return (after the existing `MobileStatusBanner`), passing `selectedCount={Object.keys(state.pinnedCourses).length}`, `totalSets={12}`, `visible={courseBannerVisible && isMobile}`, and `onTap` that calls `courseSectionRef.current.scrollIntoView({ behavior: 'smooth' })`
- [x] 2.4 Clean up the IntersectionObserver on unmount or when isMobile changes

## 3. Test

- [x] 3.1 Verify banner appears at bottom on mobile when scrolling above course selection
- [x] 3.2 Verify banner hides when scrolling back down to course selection
- [x] 3.3 Verify banner does not render on tablet/desktop
- [x] 3.4 Verify tapping the banner scrolls to the course selection section
- [x] 3.5 Verify selected count updates reactively when courses are pinned/unpinned
- [x] 3.6 Verify both top and bottom banners can coexist without visual conflict