lighter first load, math reads left-to-right in quizzes, tickets from the server, readable separators

- Every screen but home is its own chunk and preloads when the browser is
  idle; React and motion get their own long-cached chunks. The app entry
  goes from 505 kB (160 kB gzip) to 85 kB (27 kB gzip).
- Quiz prompts, options and lesson examples go through MathText, so
  '10 + 3 - 7 - 2' reads from the left; an unpaired bracket at the edge of
  a math run stays with the Persian sentence.
- Support lists tickets from GET /support/tickets instead of this
  browser's localStorage; a ticket's messages load when it is opened.
- '·' next to a Persian zero read as another digit ('فصلِ ۱ · ۰' looked
  like ۱۰۰); a thin bar separates them now. Notification bodies show
  Persian digits.
- A root or vertex the model already marked with coordinates is no longer
  labelled a second time on top of it.

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

src/screens/NotificationsScreen.tsx

@@ -4,7 +4,7 @@ import { useAppData } from '@/state/AppData';
 import { useAsync } from '@/lib/useAsync';
 import { useToast } from '@/components/Toast';
 import { EmptyState, ErrorState, LoadingState, Screen, ScreenHeader } from '@/components/ui';
-import { relativeTime } from '@/lib/format';
+import { relativeTime, toFa } from '@/lib/format';
 
 const STYLE: Record<string, { icon: LucideIcon; color: string; bg: string }> = {
   xp_earned: { icon: Star, color: '#E8A400', bg: '#FFF8E1' },
@@ -83,7 +83,7 @@ export function NotificationsScreen() {
                     </span>
                     <span className="min-w-0 flex-1">
                       <span className={`block text-sm ${n.isRead ? 'text-muted' : 'font-bold text-ink'}`}>{n.title}</span>
-                      {n.body && <span className="mt-0.5 block whitespace-pre-line text-xs leading-6 text-body">{n.body}</span>}
+                      {n.body && <span className="mt-0.5 block whitespace-pre-line text-xs leading-6 text-body">{toFa(n.body)}</span>}
                       <span className="mt-1 block text-[10px] text-faint">{relativeTime(n.createdAt)}</span>
                     </span>
                     {!n.isRead && <span className="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-coral" />}