New look: slate-indigo panels, pink accent, Poppins, and a gradient card for your song

Inspired by a dashboard design the user shared.
- App: new palette and fonts, borderless rounded panels with soft shadows, a pink-to-blue
  gradient card for your own song (text and controls switch to white on it), flat cards for
  friends, a 'Hi Chris, welcome back' header, an outline bell, and a pink pill on the active tab.
- Website: the same look, plus a wide-screen layout with a sidebar, the page in a rounded panel,
  and a right column with your profile, recent activity and recent plays. Phones keep the top
  bar and bottom tabs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011Y2iUsKEWDuRGjK5FPmcUP

apps/mobile/src/components/FeaturedPicker.tsx

@@ -5,7 +5,7 @@ import useSWR from 'swr';
 import type { ProfileDTO, TrackSearchResultDTO } from '@musicshare/shared';
 import { api } from '@/lib/api';
 import { showError } from '@/lib/errors';
-import { colors, radius, space } from '@/lib/theme';
+import { colors, fonts, radius, space } from '@/lib/theme';
 import { useSession } from '@/lib/session';
 import { useDebounced } from '@/lib/useDebounced';
 import { Body, Button, Card, Field, Heading, Row } from './ui';
@@ -147,9 +147,9 @@ export function FeaturedPicker({ bare, onSaved }: { bare?: boolean; onSaved?: ()
 }
 
 const styles = StyleSheet.create({
-  small: { fontSize: 13 },
-  title: { color: colors.text, fontWeight: '700', fontSize: 15 },
+  small: { fontSize: 13, fontFamily: fonts.body },
+  title: { color: colors.text, fontFamily: fonts.display, fontSize: 15 },
   result: { flexDirection: 'row', alignItems: 'center', gap: space.md, paddingVertical: space.xs },
-  resultText: { color: colors.text, flex: 1, fontSize: 14 },
+  resultText: { color: colors.text, flex: 1, fontSize: 14, fontFamily: fonts.body },
   thumb: { width: 40, height: 40, borderRadius: radius.sm },
 });