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/QuizScreen.tsx

@@ -14,6 +14,7 @@ import { useToast } from '@/components/Toast';
 import { ErrorState, InlineError, LoadingState, PrimaryButton, SecondaryButton, Screen } from '@/components/ui';
 import { friendlyError } from '@/lib/errors';
 import { timeUntil, toFa } from '@/lib/format';
+import { MathText } from '@/lib/MathText';
 import { sounds } from '@/lib/sound';
 
 type Phase =
@@ -272,7 +273,7 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
               <Flag size={12} /> گزارشِ ایراد
             </button>
           </div>
-          <h2 className="whitespace-pre-line text-base font-bold leading-8 text-ink">{question.prompt}</h2>
+          <h2 className="whitespace-pre-line text-base font-bold leading-8 text-ink"><MathText text={question.prompt} /></h2>
         </div>
 
         <div className={shortOptions ? 'grid grid-cols-2 gap-2.5' : 'flex flex-col gap-2.5'}>
@@ -285,7 +286,7 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
               whileTap={{ scale: selected === null ? 0.95 : 1 }}
               className={`flex min-h-14 items-center justify-center gap-1.5 rounded-2xl border-2 border-b-4 px-3 py-3 font-black transition-colors ${shortOptions ? 'text-xl' : 'text-base'} ${optionClass(option.id)}`}
             >
-              <span dir="auto">{option.value}</span>
+              <span><MathText text={option.value} /></span>
               {answer && option.id === answer.correctOptionId && <Check size={16} className="text-green-500" strokeWidth={3} />}
               {answer && option.id === selected && !answer.correct && <X size={16} className="text-red-400" strokeWidth={3} />}
             </motion.button>