Add mobile floating banners for specialization status and course selection progress

On mobile, the single-column layout makes it easy to lose context when
scrolling between the specializations and course selection panels. This adds
two floating banners that appear via IntersectionObserver:

- Top banner: summarizes specialization statuses (achieved/achievable/missing/unreachable)
- Bottom banner: shows course selection progress (N/12 selected)

Both slide in/out with CSS transitions and scroll to their respective
sections on tap. Only rendered on mobile viewports (max-width: 639px).

app/src/components/SpecializationRanking.tsx

@@ -21,7 +21,7 @@ import { SPECIALIZATIONS } from '../data/specializations';
 import { courseById } from '../data/lookups';
 import type { SpecStatus, AllocationResult } from '../data/types';
 
-const STATUS_STYLES: Record<SpecStatus, { bg: string; color: string; label: string }> = {
+export const STATUS_STYLES: Record<SpecStatus, { bg: string; color: string; label: string }> = {
   achieved: { bg: '#dcfce7', color: '#16a34a', label: 'Achieved' },
   achievable: { bg: '#dbeafe', color: '#2563eb', label: 'Achievable' },
   missing_required: { bg: '#fef3c7', color: '#d97706', label: 'Missing Req.' },