fix: resolve bugs and improve frontend performance

- Fix register not resetting isLoading on success (causing login page to hang)
- Fix leaderboard streaks 400 error by forcing all_time timeframe
- Reorder routes so static paths match before dynamic practice/:sheetId
- Lazy-load QuestMap + Three.js (saves ~350KB gzip on initial load)
- Move KaTeX CSS to lazy import (only loads on math pages)
- Remove 28 duplicate Google Font @import lines from component CSS
- Add font preconnect + single stylesheet link in index.html
- Replace 8 unsafe JSON.parse(localStorage) calls with Zustand selectors
- Add global ErrorBoundary to prevent full-app crashes
- Extract arcTheme utilities to break static import cycle with QuestMap
- Merge Three.js + Troika into single chunk to fix circular dependency

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

index.html

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&family=Sorts+Mill+Goudy:ital@0;1&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://www.geogebra.org/apps/deployggb.js"></script>
 
     <script

package.json

@@ -35,6 +35,8 @@
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "three": "^0.183.2",
+    "troika-three-text": "^0.52.4",
+    "troika-worker-utils": "^0.52.0",
     "vaul": "^1.1.2",
     "zustand": "^5.0.9"
   },

pnpm-lock.yaml

@@ -83,6 +83,12 @@ importers:
       three:
         specifier: ^0.183.2
         version: 0.183.2
+      troika-three-text:
+        specifier: ^0.52.4
+        version: 0.52.4(three@0.183.2)
+      troika-worker-utils:
+        specifier: ^0.52.0
+        version: 0.52.0
       vaul:
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)

src/App.tsx

@@ -1,5 +1,4 @@
-import "katex/dist/katex.min.css";
+import { Suspense, lazy } from "react";
-
 import { Home } from "./pages/student/Home";
 import {
   createBrowserRouter,
@@ -19,8 +18,12 @@ import { StudentLayout } from "./pages/student/StudentLayout";
 import { TargetedPractice } from "./pages/student/targeted-practice/page";
 import { Drills } from "./pages/student/drills/page";
 import { HardTestModules } from "./pages/student/hard-test-modules/page";
-import { QuestMap } from "./pages/student/QuestMap";
 import { Register } from "./pages/auth/Register";
+import { PracticeSheetList } from "./pages/student/practice-sheet/page";
+
+const QuestMap = lazy(() =>
+  import("./pages/student/QuestMap").then((m) => ({ default: m.QuestMap })),
+);
 
 function App() {
   const router = createBrowserRouter([
@@ -62,11 +65,11 @@ function App() {
             },
             {
               path: "quests",
-              element: <QuestMap />,
+              element: (
-            },
+                <Suspense fallback={<div style={{ minHeight: "100vh" }} />}>
-            {
+                  <QuestMap />
-              path: "practice/:sheetId",
+                </Suspense>
-              element: <Pretest />,
+              ),
             },
             {
               path: "practice/targeted-practice",
@@ -80,6 +83,14 @@ function App() {
               path: "practice/hard-test-modules",
               element: <HardTestModules />,
             },
+            {
+              path: "practice/practice-sheet",
+              element: <PracticeSheetList />,
+            },
+            {
+              path: "practice/:sheetId",
+              element: <Pretest />,
+            },
           ],
         },
         {

src/components/AppSidebar.tsx

@@ -19,6 +19,7 @@ import {
   Trophy,
   Map,
   SquareLibrary,
+  ListIcon,
 } from "lucide-react";
 
 import { useState } from "react";
@@ -362,6 +363,7 @@ export function AppSidebar() {
                         />
                         <span>Targeted Practice</span>
                       </NavLink>
+
                       <NavLink
                         to="/student/practice/drills"
                         className={({ isActive }) =>
@@ -396,6 +398,23 @@ export function AppSidebar() {
                         />
                         <span>Hard Test Modules</span>
                       </NavLink>
+                      <NavLink
+                        to="/student/practice/practice-sheet"
+                        className={({ isActive }) =>
+                          `flex items-center gap-2.5 rounded-2xl px-2 py-2 text-sm font-satoshi transition-colors duration-200 ${
+                            isActive
+                              ? "bg-white text-slate-900"
+                              : "text-slate-500 hover:bg-white hover:text-slate-900"
+                          }`
+                        }
+                      >
+                        <ListIcon
+                          size={18}
+                          strokeWidth={3}
+                          className="text-slate-400"
+                        />
+                        <span>Practice Sheet</span>
+                      </NavLink>
                     </SidebarMenuSub>
                   )}
                 </SidebarMenuItem>

src/components/ChestOpenModal.tsx

@@ -3,7 +3,6 @@ import type { QuestNode, ClaimedRewardResponse } from "../types/quest";
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const S = `
-  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Nunito:wght@800;900&display=swap');
 
   /* ══ FULL SCREEN OVERLAY ══ */
   .com-overlay {

src/components/ChoiceCard.tsx

@@ -1,5 +1,4 @@
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@600;700&display=swap');
 
   .cc-btn {
     width: 100%;

src/components/CircularLevelProgress.tsx

@@ -12,7 +12,6 @@ type Props = {
 };
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600&display=swap');
 
   .clp-wrap {
     width: 100%;

src/components/ErrorBoundary.tsx

@@ -0,0 +1,83 @@
+import { Component } from "react";
+import type { ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("Uncaught error:", error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            minHeight: "100vh",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            fontFamily: "'Nunito', sans-serif",
+            background: "#fffbf4",
+            padding: "2rem",
+            textAlign: "center",
+          }}
+        >
+          <h1
+            style={{
+              fontSize: "1.5rem",
+              fontWeight: 900,
+              color: "#1e1b4b",
+              marginBottom: "0.5rem",
+            }}
+          >
+            Something went wrong
+          </h1>
+          <p
+            style={{
+              fontSize: "0.9rem",
+              color: "#6b7280",
+              marginBottom: "1.5rem",
+            }}
+          >
+            An unexpected error occurred. Please try refreshing the page.
+          </p>
+          <button
+            onClick={() => window.location.reload()}
+            style={{
+              padding: "0.7rem 1.4rem",
+              borderRadius: "100px",
+              border: "none",
+              background: "linear-gradient(135deg, #7c3aed, #a855f7)",
+              color: "white",
+              fontFamily: "'Nunito', sans-serif",
+              fontSize: "0.88rem",
+              fontWeight: 800,
+              cursor: "pointer",
+            }}
+          >
+            Reload page
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/components/InfoHeader.tsx

@@ -17,7 +17,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Drawer, DrawerContent, DrawerTrigger } from "./ui/drawer";
 import { PredictedScoreCard } from "./PredictedScoreCard";
 import { ChestOpenModal } from "./ChestOpenModal";
-import { generateArcTheme } from "../pages/student/QuestMap";
+import { generateArcTheme } from "../utils/arcTheme";
 import { InventoryButton } from "./InventoryButton";
 
 // ─── Requirement helpers ──────────────────────────────────────────────────────
@@ -43,7 +43,6 @@ const REQ_LABEL: Record<string, string> = {
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&family=Cinzel:wght@700;900&display=swap');
 
   /* ════ SHARED ANIMATION ════ */
   @keyframes hcIn {

src/components/InventoryButton.tsx

@@ -8,7 +8,6 @@ import { InventoryModal } from "./InventoryModal";
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const BTN_STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800;900&family=Cinzel:wght@700&display=swap');
 
   /* ── Inventory trigger button ── */
   .inv-btn {

src/components/InventoryModal.tsx

@@ -12,7 +12,6 @@ import { api } from "../utils/api";
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   /* ══ OVERLAY ══ */
   .inv-overlay {

src/components/LessonModal.tsx

@@ -24,7 +24,6 @@ const UUID_REGEX =
 const isVideoLesson = (id: string) => UUID_REGEX.test(id);
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   .lm-content {
     font-family: 'Nunito', sans-serif;
@@ -156,6 +155,7 @@ export const LessonModal = ({
   onOpenChange,
 }: LessonModalProps) => {
   const user = useAuthStore((state) => state.user);
+  const token = useAuthStore((state) => state.token);
 
   const [loading, setLoading] = useState(false);
   const [lesson, setLesson] = useState<LessonDetails | null>(null);
@@ -196,12 +196,6 @@ export const LessonModal = ({
       setLoading(true);
 
       try {
-        const authStorage = localStorage.getItem("auth-storage");
-        if (!authStorage) throw new Error("No auth storage");
-        const {
-          // @ts-ignore
-          state: { token },
-        } = JSON.parse(authStorage) as { state?: { token?: string } };
         if (!token) throw new Error("No token");
 
         // @ts-ignore

src/components/PredictedScoreCard.tsx

@@ -83,7 +83,6 @@ const useCountUp = (target: number, duration = 900) => {
 // ─── Styles ───────────────────────────────────────────────────────────────────
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   .psc-card {
     background: white;

src/components/QuestNodeModal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { X, Lock } from "lucide-react";
 import type { QuestNode, QuestArc } from "../types/quest";
 // Re-use the same theme generator as QuestMap so island colours are consistent
-import { generateArcTheme } from "../pages/student/QuestMap";
+import { generateArcTheme } from "../utils/arcTheme";
 
 // ─── Requirement helpers (mirrors QuestMap / InfoHeader) ──────────────────────
 const REQ_LABEL: Record<string, string> = {
@@ -28,7 +28,6 @@ const reqIcon = (type: string): string =>
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Sorts+Mill+Goudy:ital@0;1&family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   /* ══ OVERLAY ══ */
   .qnm-overlay {

src/components/RenderQuestionText.tsx

@@ -1,3 +1,4 @@
+import "katex/dist/katex.min.css";
 import { Component, type ReactNode } from "react";
 // @ts-ignore
 import { BlockMath, InlineMath } from "react-katex";

src/components/SearchOverlay.tsx

@@ -188,7 +188,6 @@ const highlightText = (text: string, query: string) => {
 // ─── Styles ───────────────────────────────────────────────────────────────────
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   .so-overlay {
     position: fixed; inset: 0; z-index: 50;

src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
+import { ErrorBoundary } from "./components/ErrorBoundary.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </StrictMode>,
 );

src/pages/auth/Login.tsx

@@ -9,7 +9,6 @@ interface LocationState {
 }
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 

src/pages/auth/Register.tsx

@@ -18,7 +18,6 @@ import {
 import { api } from "../../utils/api";
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 

src/pages/student/Home.tsx

@@ -19,7 +19,6 @@ const DOTS = [
 ];
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   :root { --content-max: 1100px; }
 
@@ -312,6 +311,7 @@ const PAGE_SIZE = 6;
 
 export const Home = () => {
   const user = useAuthStore((state) => state.user);
+  const token = useAuthStore((state) => state.token);
   const navigate = useNavigate();
 
   const [practiceSheets, setPracticeSheets] = useState<PracticeSheet[]>([]);
@@ -337,14 +337,8 @@ export const Home = () => {
     };
 
     const fetch = async () => {
-      if (!user) return;
+      if (!user || !token) return;
       try {
-        const authStorage = localStorage.getItem("auth-storage");
-        if (!authStorage) return;
-        const {
-          state: { token },
-        } = JSON.parse(authStorage);
-        if (!token) return;
         const sheets = await api.getPracticeSheets(token, 1, 10);
         setPracticeSheets(sheets.data);
         sort(sheets.data);

src/pages/student/Lessons.tsx

@@ -31,7 +31,6 @@ const DOTS = [
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   :root { --content-max: 1100px; }
 
@@ -465,6 +464,7 @@ const VideoCard = ({ lesson, index, searchQuery, onClick }: VideoCardProps) => (
 // ─── Component ────────────────────────────────────────────────────────────────
 export const Lessons = () => {
   const user = useAuthStore((s) => s.user);
+  const token = useAuthStore((s) => s.token);
 
   // Video lessons from API — typed as Lesson[]
   const [allVideos, setAllVideos] = useState<Lesson[]>([]);
@@ -486,17 +486,9 @@ export const Lessons = () => {
 
   useEffect(() => {
     const fetchVideos = async () => {
-      if (!user) return;
+      if (!user || !token) return;
       try {
         setLessonLoading(true);
-        const authStorage = localStorage.getItem("auth-storage");
-        if (!authStorage) return;
-
-        const {
-          // @ts-ignore
-          state: { token },
-        } = JSON.parse(authStorage) as { state?: { token?: string } };
-        if (!token) return;
         const response = await api.fetchLessonVideos(token);
         // response matches LessonsResponse: { data: Lesson[], pagination: ... }
         setAllVideos(response.data);

src/pages/student/Practice.tsx

@@ -1,12 +1,4 @@
-import {
+import { DraftingCompass, FileText, Target, Trophy, Zap } from "lucide-react";
-  BookOpen,
-  Clock,
-  DraftingCompass,
-  Loader2,
-  Target,
-  Trophy,
-  Zap,
-} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { InfoHeader } from "../../components/InfoHeader";
 
@@ -20,19 +12,18 @@ const DOTS = [
 ];
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   :root { --content-max: 1100px; }
 
   .pr-screen {
     min-height: 100vh;
+    padding-bottom: 40px;
     background: #fffbf4;
     font-family: 'Nunito', sans-serif;
     position: relative;
     overflow-x: hidden;
   }
 
-  /* On desktop, account for sidebar */
   @media (min-width: 768px) {
     .pr-screen {
       padding-left: calc(17rem + 1.25rem);
@@ -70,10 +61,9 @@ const STYLES = `
     display: flex; flex-direction: column; gap: 1.5rem;
   }
 
-  /* Desktop / wide layout */
   @media (min-width: 900px) {
     .pr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
-    .pr-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
+    .pr-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; }
 
     .pr-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
     .pr-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
@@ -95,29 +85,6 @@ const STYLES = `
   .pr-anim-3 { animation-delay: 0.15s; }
   .pr-anim-4 { animation-delay: 0.2s; }
 
-  /* ── Header ── */
-  .pr-header {
-    display: flex; align-items: center; justify-content: space-between;
-    animation: prPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
-  }
-  .pr-logo-btn {
-    width: 44px; height: 44px; border-radius: 14px;
-    background: linear-gradient(135deg, #a855f7, #7c3aed);
-    display: flex; align-items: center; justify-content: center;
-    box-shadow: 0 4px 0 #5b21b644;
-  }
-  .pr-xp-chip {
-    display: flex; align-items: center; gap: 0.5rem;
-    background: white; border: 2.5px solid #e9d5ff;
-    border-radius: 100px; padding: 0.45rem 1rem;
-    font-size: 0.85rem; font-weight: 800; color: #7c3aed;
-    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
-  }
-  .pr-xp-dot {
-    width: 8px; height: 8px; border-radius: 50%;
-    background: linear-gradient(135deg, #a855f7, #7c3aed);
-  }
-
   /* ── Hero banner ── */
   .pr-hero {
     border-radius: 24px;
@@ -175,15 +142,15 @@ const STYLES = `
   /* ── Mode card ── */
   .pr-mode-card {
     background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
-    padding: 1.1rem 1.25rem;
+    padding: 0;
     box-shadow: 0 4px 14px rgba(0,0,0,0.04);
-    cursor: pointer; display: flex; flex-direction: column; gap: 0.85rem;
+    cursor: pointer; display: flex; flex-direction: column;
     transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
     position: relative; overflow: hidden;
   }
   .pr-mode-card:hover  {
-    transform: translateY(-3px);
+    transform: translateY(-4px);
-    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
+    box-shadow: 0 14px 32px rgba(0,0,0,0.1);
   }
   .pr-mode-card:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,0.06); }
 
@@ -193,71 +160,455 @@ const STYLES = `
   .pr-mode-card.cyan:hover   { border-color: #67e8f9; }
   .pr-mode-card.lime   { border-color: #d9f99d; }
   .pr-mode-card.lime:hover   { border-color: #bef264; }
+  .pr-mode-card.amber  { border-color: #fde68a; }
+  .pr-mode-card.amber:hover  { border-color: #fcd34d; }
+
+  /* Illustration strip at top of card */
+  .pr-card-illo {
+    width: 100%;
+    height: 110px;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .pr-card-illo svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Card body below illustration */
+  .pr-card-body {
+    padding: 1rem 1.1rem 1rem;
+    display: flex; flex-direction: column; gap: 0.6rem;
+    flex: 1;
+  }
 
   .pr-mode-top {
-    display: flex; align-items: flex-start; justify-content: space-between;
+    display: flex; align-items: center; gap: 0.6rem;
   }
   .pr-mode-icon {
-    width: 44px; height: 44px; border-radius: 14px;
+    width: 36px; height: 36px; border-radius: 12px;
     display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
   }
-  .pr-mode-icon.red  { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 4px 0 #b91c1c44; }
+  .pr-mode-icon.red  { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 3px 0 #b91c1c44; }
-  .pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 4px 0 #0e7490aa; }
+  .pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 3px 0 #0e7490aa; }
-  .pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 4px 0 #4d7c0f44; }
+  .pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 3px 0 #4d7c0f44; }
-
+  .pr-mode-icon.amber{ background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 3px 0 #92400e44; }
-  .pr-mode-badge {
-    width: 36px; height: 36px; border-radius: 50%;
-    display: flex; align-items: center; justify-content: center;
-  }
-  .pr-mode-badge.red  { background: #fff5f5; }
-  .pr-mode-badge.cyan { background: #ecfeff; }
-  .pr-mode-badge.lime { background: #f7ffe4; }
 
   .pr-mode-title {
-    font-size: 1rem; font-weight: 900; color: #1e1b4b;
+    font-size: 0.95rem; font-weight: 900; color: #1e1b4b;
   }
   .pr-mode-desc {
     font-family: 'Nunito Sans', sans-serif;
-    font-size: 0.78rem; font-weight: 600; color: #9ca3af;
+    font-size: 0.76rem; font-weight: 600; color: #9ca3af;
+    line-height: 1.4;
   }
   .pr-mode-arrow {
     font-size: 0.75rem; font-weight: 800; margin-top: auto;
     display: flex; align-items: center; gap: 0.25rem;
     transition: gap 0.2s ease;
+    padding-top: 0.25rem;
   }
   .pr-mode-card:hover .pr-mode-arrow { gap: 0.5rem; }
   .pr-mode-arrow.red  { color: #ef4444; }
   .pr-mode-arrow.cyan { color: #06b6d4; }
   .pr-mode-arrow.lime { color: #84cc16; }
+  .pr-mode-arrow.amber{ color: #f59e0b; }
+
+  /* Wiggle on hover for illustration elements */
+  .pr-mode-card:hover .illo-wiggle {
+    animation: illoWiggle 0.5s ease;
+  }
+  @keyframes illoWiggle {
+    0%,100%{transform:rotate(0deg);}
+    25%{transform:rotate(-5deg);}
+    75%{transform:rotate(5deg);}
+  }
 `;
 
+/* ── SVG Illustrations for each card ── */
+
+const IlloTargeted = () => (
+  <svg
+    viewBox="0 0 260 110"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid slice"
+  >
+    <rect width="260" height="110" fill="#fff5f5" />
+    {/* soft bg circles */}
+    <circle cx="200" cy="55" r="70" fill="#fee2e2" opacity="0.6" />
+    <circle cx="220" cy="30" r="30" fill="#fecaca" opacity="0.4" />
+    {/* Target rings */}
+    <circle
+      cx="195"
+      cy="58"
+      r="44"
+      stroke="#fca5a5"
+      strokeWidth="2.5"
+      fill="none"
+    />
+    <circle
+      cx="195"
+      cy="58"
+      r="30"
+      stroke="#f87171"
+      strokeWidth="2.5"
+      fill="none"
+    />
+    <circle cx="195" cy="58" r="16" fill="#ef4444" opacity="0.9" />
+    <circle cx="195" cy="58" r="6" fill="white" />
+    {/* Arrow hitting bullseye */}
+    <line
+      x1="130"
+      y1="20"
+      x2="187"
+      y2="56"
+      stroke="#dc2626"
+      strokeWidth="3"
+      strokeLinecap="round"
+    />
+    <polygon points="187,56 178,46 192,49" fill="#dc2626" />
+    {/* Arrow fletching */}
+    <line
+      x1="130"
+      y1="20"
+      x2="120"
+      y2="12"
+      stroke="#dc2626"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <line
+      x1="130"
+      y1="20"
+      x2="122"
+      y2="25"
+      stroke="#dc2626"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    {/* Sparkles */}
+    <circle cx="60" cy="35" r="4" fill="#fbbf24" opacity="0.7" />
+    <circle cx="80" cy="70" r="3" fill="#f87171" opacity="0.5" />
+    <circle cx="45" cy="75" r="5" fill="#fca5a5" opacity="0.4" />
+    <path d="M50 30 l3 -8 l3 8 l-6 0Z" fill="#ef4444" opacity="0.4" />
+    <path d="M100 80 l2 -6 l2 6 l-4 0Z" fill="#fca5a5" opacity="0.5" />
+  </svg>
+);
+
+const IlloDrills = () => (
+  <svg
+    viewBox="0 0 260 110"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid slice"
+  >
+    <rect width="260" height="110" fill="#ecfeff" />
+    <circle cx="50" cy="55" r="65" fill="#cffafe" opacity="0.5" />
+    <circle cx="25" cy="25" r="28" fill="#a5f3fc" opacity="0.35" />
+    {/* Stopwatch body */}
+    <circle
+      cx="70"
+      cy="62"
+      r="36"
+      fill="white"
+      stroke="#22d3ee"
+      strokeWidth="3"
+    />
+    <circle
+      cx="70"
+      cy="62"
+      r="28"
+      fill="#ecfeff"
+      stroke="#67e8f9"
+      strokeWidth="1.5"
+    />
+    {/* Clock hands */}
+    <line
+      x1="70"
+      y1="62"
+      x2="70"
+      y2="40"
+      stroke="#06b6d4"
+      strokeWidth="3"
+      strokeLinecap="round"
+    />
+    <line
+      x1="70"
+      y1="62"
+      x2="88"
+      y2="70"
+      stroke="#0891b2"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+    />
+    <circle cx="70" cy="62" r="3.5" fill="#0891b2" />
+    {/* Crown / button */}
+    <rect x="64" y="22" width="12" height="6" rx="3" fill="#22d3ee" />
+    <rect x="56" y="18" width="8" height="5" rx="2.5" fill="#06b6d4" />
+    {/* Lightning bolts (speed) */}
+    <path
+      d="M148 20 l-10 22 h10 l-10 22"
+      stroke="#f59e0b"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+    <path
+      d="M170 30 l-8 18 h8 l-8 18"
+      stroke="#fbbf24"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      opacity="0.7"
+    />
+    <path
+      d="M192 38 l-6 14 h6 l-6 14"
+      stroke="#fcd34d"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      opacity="0.5"
+    />
+    {/* Speed lines */}
+    <line
+      x1="115"
+      y1="52"
+      x2="140"
+      y2="52"
+      stroke="#22d3ee"
+      strokeWidth="2"
+      strokeLinecap="round"
+      opacity="0.5"
+    />
+    <line
+      x1="120"
+      y1="62"
+      x2="138"
+      y2="62"
+      stroke="#22d3ee"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      opacity="0.35"
+    />
+    <line
+      x1="118"
+      y1="72"
+      x2="136"
+      y2="72"
+      stroke="#22d3ee"
+      strokeWidth="1"
+      strokeLinecap="round"
+      opacity="0.25"
+    />
+    {/* dots */}
+    <circle cx="220" cy="28" r="5" fill="#22d3ee" opacity="0.4" />
+    <circle cx="240" cy="75" r="4" fill="#06b6d4" opacity="0.3" />
+    <circle cx="210" cy="88" r="3" fill="#67e8f9" opacity="0.4" />
+  </svg>
+);
+
+const IlloHard = () => (
+  <svg
+    viewBox="0 0 260 110"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid slice"
+  >
+    <rect width="260" height="110" fill="#f7ffe4" />
+    <circle cx="210" cy="55" r="70" fill="#d9f99d" opacity="0.5" />
+    <circle cx="230" cy="20" r="30" fill="#bef264" opacity="0.3" />
+    {/* Trophy */}
+    <rect x="168" y="78" width="44" height="8" rx="4" fill="#84cc16" />
+    <rect x="182" y="68" width="16" height="12" rx="2" fill="#a3e635" />
+    <path
+      d="M163 28 h54 v28 a27 27 0 0 1 -54 0 Z"
+      fill="white"
+      stroke="#84cc16"
+      strokeWidth="2.5"
+    />
+    <path
+      d="M163 38 Q148 38 148 52 Q148 63 163 63"
+      stroke="#a3e635"
+      strokeWidth="2.5"
+      fill="none"
+      strokeLinecap="round"
+    />
+    <path
+      d="M217 38 Q232 38 232 52 Q232 63 217 63"
+      stroke="#a3e635"
+      strokeWidth="2.5"
+      fill="none"
+      strokeLinecap="round"
+    />
+    {/* Star inside trophy */}
+    <path
+      d="M190 38 l3 9 h9 l-7 5 3 9 -8 -6 -8 6 3 -9 -7 -5 h9 Z"
+      fill="#fbbf24"
+    />
+    {/* Mountain / difficulty hills */}
+    <path d="M20 90 L55 35 L90 90Z" fill="#86efac" opacity="0.7" />
+    <path d="M60 90 L95 50 L130 90Z" fill="#4ade80" opacity="0.5" />
+    <path d="M85 90 L120 40 L155 90Z" fill="#22c55e" opacity="0.35" />
+    {/* flag on tallest */}
+    <line
+      x1="120"
+      y1="40"
+      x2="120"
+      y2="22"
+      stroke="#16a34a"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <path d="M120 22 l12 5 l-12 5 Z" fill="#16a34a" />
+    {/* sparkles */}
+    <path
+      d="M30 28 l2 -5 l2 5 l5 2 l-5 2 l-2 5 l-2 -5 l-5 -2 Z"
+      fill="#fbbf24"
+      opacity="0.6"
+    />
+    <path
+      d="M240 88 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
+      fill="#a3e635"
+      opacity="0.5"
+    />
+  </svg>
+);
+
+const IlloSheet = () => (
+  <svg
+    viewBox="0 0 260 110"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid slice"
+  >
+    <rect width="260" height="110" fill="#fffbeb" />
+    <circle cx="55" cy="55" r="65" fill="#fef3c7" opacity="0.6" />
+    <circle cx="30" cy="80" r="30" fill="#fde68a" opacity="0.35" />
+    {/* Paper sheet */}
+    <rect
+      x="30"
+      y="18"
+      width="72"
+      height="82"
+      rx="8"
+      fill="white"
+      stroke="#fcd34d"
+      strokeWidth="2.5"
+    />
+    {/* Folded corner */}
+    <path d="M82 18 L102 38 L82 38 Z" fill="#fde68a" />
+    <path d="M82 18 L102 38" stroke="#fcd34d" strokeWidth="2" />
+    {/* Lines on paper */}
+    <line
+      x1="42"
+      y1="50"
+      x2="84"
+      y2="50"
+      stroke="#e5e7eb"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <line
+      x1="42"
+      y1="60"
+      x2="90"
+      y2="60"
+      stroke="#e5e7eb"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <line
+      x1="42"
+      y1="70"
+      x2="78"
+      y2="70"
+      stroke="#e5e7eb"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <line
+      x1="42"
+      y1="80"
+      x2="86"
+      y2="80"
+      stroke="#e5e7eb"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    {/* Checkmark on first line */}
+    <path
+      d="M42 42 l5 5 l9 -9"
+      stroke="#22c55e"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+    {/* Pencil */}
+    <g transform="rotate(-35 155 55)">
+      <rect x="138" y="28" width="14" height="52" rx="3" fill="#fbbf24" />
+      <path d="M138 76 L145 90 L152 76 Z" fill="#f97316" />
+      <rect x="138" y="28" width="14" height="10" rx="3" fill="#9ca3af" />
+      <rect x="140" y="30" width="10" height="6" rx="2" fill="#d1d5db" />
+    </g>
+    {/* Stars / highlights */}
+    <path
+      d="M200 22 l2 -6 l2 6 l6 2 l-6 2 l-2 6 l-2 -6 l-6 -2 Z"
+      fill="#f59e0b"
+      opacity="0.7"
+    />
+    <path
+      d="M230 65 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
+      fill="#fbbf24"
+      opacity="0.5"
+    />
+    <circle cx="215" cy="88" r="4" fill="#fcd34d" opacity="0.4" />
+    <circle cx="240" cy="35" r="3" fill="#fbbf24" opacity="0.35" />
+  </svg>
+);
+
 const MODE_CARDS = [
   {
     color: "red",
-    icon: <Target size={20} color="white" />,
+    icon: <Target size={18} color="white" />,
-    badge: <Loader2 size={22} color="#ef4444" />,
     title: "Targeted Practice",
     desc: "Focus on your weak spots and improve fast",
     route: "/student/practice/targeted-practice",
     arrow: "Practice →",
+    Illo: IlloTargeted,
   },
   {
     color: "cyan",
-    icon: <Zap size={20} color="white" />,
+    icon: <Zap size={18} color="white" />,
-    badge: <Clock size={22} color="#06b6d4" />,
     title: "Drills",
     desc: "Train speed and accuracy under pressure",
     route: "/student/practice/drills",
     arrow: "Drill →",
+    Illo: IlloDrills,
   },
   {
     color: "lime",
-    icon: <Trophy size={20} color="white" />,
+    icon: <Trophy size={18} color="white" />,
-    badge: <BookOpen size={22} color="#84cc16" />,
     title: "Hard Modules",
     desc: "Push yourself with the toughest questions",
     route: "/student/practice/hard-test-modules",
     arrow: "Challenge →",
+    Illo: IlloHard,
+  },
+  {
+    color: "amber",
+    icon: <FileText size={18} color="white" />,
+    title: "Practice Sheet",
+    desc: "Work through curated question sets at your own pace",
+    route: "/student/practice/practice-sheet",
+    arrow: "Start Sheet →",
+    Illo: IlloSheet,
   },
 ] as const;
 
@@ -297,6 +648,7 @@ export const Practice = () => {
       <div className="pr-inner">
         {/* ── Header ── */}
         <InfoHeader mode="LEVEL" />
+
         {/* ── Hero banner ── */}
         <div className="pr-hero pr-anim pr-anim-1">
           <div className="pr-hero-icon-bg">
@@ -307,7 +659,12 @@ export const Practice = () => {
           <p className="pr-hero-sub">
             Take a full adaptive test and benchmark your SAT readiness.
           </p>
-          <button className="pr-hero-btn">Take a practice test →</button>
+          <button
+            onClick={() => navigate("/student/practice/practice-sheet")}
+            className="pr-hero-btn"
+          >
+            Take a practice test →
+          </button>
         </div>
 
         {/* ── Practice modes ── */}
@@ -322,19 +679,22 @@ export const Practice = () => {
                 className={`pr-mode-card ${card.color}`}
                 onClick={() => navigate(card.route)}
               >
-                <div className="pr-mode-top">
+                {/* Illustration */}
-                  <div className={`pr-mode-icon ${card.color}`}>
+                <div className="pr-card-illo">
-                    {card.icon}
+                  <card.Illo />
-                  </div>
-                  <div className={`pr-mode-badge ${card.color}`}>
-                    {card.badge}
-                  </div>
                 </div>
-                <div>
+
-                  <p className="pr-mode-title">{card.title}</p>
+                {/* Body */}
+                <div className="pr-card-body">
+                  <div className="pr-mode-top">
+                    <div className={`pr-mode-icon ${card.color}`}>
+                      {card.icon}
+                    </div>
+                    <p className="pr-mode-title">{card.title}</p>
+                  </div>
                   <p className="pr-mode-desc">{card.desc}</p>
+                  <p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
                 </div>
-                <p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
               </div>
             ))}
           </div>

src/pages/student/Profile.tsx

@@ -17,7 +17,6 @@ const DOTS = [
 ];
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   :root { --content-max: 1100px; }
 

src/pages/student/QuestMap.tsx

@@ -7,6 +7,7 @@ import type {
 import { useQuestStore } from "../../stores/useQuestStore";
 import { useAuthStore } from "../../stores/authStore";
 import { api } from "../../utils/api";
+import { generateArcTheme, mkRng, strToSeed, type ArcTheme } from "../../utils/arcTheme";
 import { QuestNodeModal } from "../../components/QuestNodeModal";
 import { ChestOpenModal } from "../../components/ChestOpenModal";
 import { InfoHeader } from "../../components/InfoHeader";
@@ -21,22 +22,7 @@ const TOP_PAD = 80;
 const ROW_H = 520; // vertical step per island (increased for more separation)
 
 // ─── Seeded RNG ───────────────────────────────────────────────────────────────
-const mkRng = (seed: number) => {
+// mkRng, strToSeed imported from ../../utils/arcTheme
-  let s = seed >>> 0;
-  return () => {
-    s += 0x6d2b79f5;
-    let t = Math.imul(s ^ (s >>> 15), 1 | s);
-    t ^= t + Math.imul(t ^ (t >>> 7), 61 | t);
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
-};
-
-const strToSeed = (str: string) => {
-  let h = 5381;
-  for (let i = 0; i < str.length; i++)
-    h = (Math.imul(h, 33) ^ str.charCodeAt(i)) >>> 0;
-  return h;
-};
 
 // ─── Random island positions ──────────────────────────────────────────────────
 // Generates organic-feeling positions that zigzag downward with random offsets.
@@ -102,8 +88,7 @@ const generateIslandPositions = (
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&family=Cinzel:wght@700;900&display=swap');
+
-  @import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap');
 
   * { box-sizing: border-box; }
 
@@ -601,92 +586,7 @@ const ERROR_STYLES = `
 `;
 
 // ─── Arc theme ────────────────────────────────────────────────────────────────
-export interface ArcTheme {
+// ArcTheme, generateArcTheme imported from ../../utils/arcTheme
-  accent: string;
-  accentDark: string;
-  bgFrom: string;
-  bgTo: string;
-  emoji: string;
-  terrain: { l: string; m: string; d: string; s: string };
-  decos: [string, string, string];
-}
-
-const DECO_SETS: [string, string, string][] = [
-  ["🌴", "🌿", "🌴"],
-  ["🌵", "🏺", "🌵"],
-  ["☁️", "✨", "☁️"],
-  ["🪨", "🌾", "🪨"],
-  ["🍄", "🌸", "🍄"],
-  ["🔥", "💀", "🔥"],
-  ["❄️", "🌨️", "❄️"],
-  ["🌺", "🦜", "🌺"],
-];
-
-const hslToHex = (h: number, s: number, l: number) => {
-  const a = s * Math.min(l, 1 - l);
-  const f = (n: number) => {
-    const k = (n + h * 12) % 12;
-    const c = l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
-    return Math.round(255 * c)
-      .toString(16)
-      .padStart(2, "0");
-  };
-  return `#${f(0)}${f(8)}${f(4)}`;
-};
-
-export const generateArcTheme = (arc: QuestArc): ArcTheme => {
-  const rng = mkRng(strToSeed(arc.id));
-  const anchors = [150, 165, 180, 200, 230, 260];
-  const baseHue =
-    anchors[Math.floor(rng() * anchors.length)] + (rng() - 0.5) * 8;
-  const satBase = 0.48 + rng() * 0.18;
-  const satTerrain = Math.min(0.8, satBase + 0.12);
-  const accentLightL = 0.48 + rng() * 0.12;
-  const accentDarkL = 0.22 + rng() * 0.06;
-  const bgFromL = 0.04 + rng() * 0.06;
-  const bgToL = 0.1 + rng() * 0.06;
-  const accent = hslToHex(baseHue, satBase, accentLightL);
-  const accentDark = hslToHex(
-    baseHue + (rng() * 6 - 3),
-    Math.max(0.35, satBase - 0.08),
-    accentDarkL,
-  );
-  const bgFrom = hslToHex(
-    baseHue + (rng() * 10 - 5),
-    0.1 + rng() * 0.06,
-    bgFromL,
-  );
-  const bgTo = hslToHex(baseHue + (6 + rng() * 12), 0.08 + rng() * 0.06, bgToL);
-  const tL = hslToHex(
-    baseHue + 10 + rng() * 6,
-    Math.min(0.85, satTerrain),
-    0.36 + rng() * 0.08,
-  );
-  const tM = hslToHex(
-    baseHue + (rng() * 6 - 3),
-    Math.min(0.72, satTerrain - 0.06),
-    0.24 + rng() * 0.06,
-  );
-  const tD = hslToHex(
-    baseHue + (rng() * 8 - 4),
-    Math.max(0.38, satBase - 0.18),
-    0.1 + rng() * 0.04,
-  );
-  const sd = parseInt(tD.slice(1, 3), 16);
-  const sg = parseInt(tD.slice(3, 5), 16);
-  const sb = parseInt(tD.slice(5, 7), 16);
-  const emojis = ["🌿", "🌲", "🌳", "🌺", "🪨", "🍄", "🌵"];
-  const emoji = emojis[Math.floor(rng() * emojis.length)];
-  return {
-    accent,
-    accentDark,
-    bgFrom,
-    bgTo,
-    emoji,
-    terrain: { l: tL, m: tM, d: tD, s: `rgba(${sd},${sg},${sb},0.6)` },
-    decos: DECO_SETS[Math.floor(rng() * DECO_SETS.length)],
-  };
-};
 
 const themeCache = new Map<string, ArcTheme>();
 const getArcTheme = (arc: QuestArc): ArcTheme => {

src/pages/student/Rewards.tsx

@@ -31,7 +31,6 @@ const DOTS = [
 ];
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   :root { --content-max: 1100px; }
 
@@ -415,6 +414,7 @@ const EmptyState = () => (
 
 export const Rewards = () => {
   const user = useAuthStore((state) => state.user);
+  const token = useAuthStore((state) => state.token);
   const [time, setTime] = useState("today");
   const [activeTab, setActiveTab] = useState<TabId>("xp");
   const [leaderboard, setLeaderboard] = useState<Leaderboard | undefined>();
@@ -431,20 +431,15 @@ export const Rewards = () => {
 
   useEffect(() => {
     const fetchData = async () => {
-      if (!user) return;
+      if (!user || !token) return;
-      const authStorage = localStorage.getItem("auth-storage");
-      if (!authStorage) return;
-      const parsed = JSON.parse(authStorage) as {
-        state?: { token?: string };
-      } | null;
-      const token = parsed?.state?.token;
-      if (!token) return;
       try {
         setLoading(true);
+        const timeframe =
+          activeTab === "streaks" ? "all_time" : (TIME_MAP[time] ?? "daily");
         const response = await api.fetchLeaderboard(
           token,
           activeTab,
-          TIME_MAP[time] ?? "daily",
+          timeframe,
         );
         setLeaderboard(response);
         // ✅ FIX 1: Guard against null user_rank before accessing its properties
@@ -563,9 +558,13 @@ export const Rewards = () => {
             </div>
 
             <DropdownMenu>
-              <DropdownMenuTrigger asChild>
+              <DropdownMenuTrigger asChild disabled={activeTab === "streaks"}>
-                <button className="rw-filter-btn">
+                <button
-                  {formatTimeLabel(time)} <ChevronDown size={13} />
+                  className="rw-filter-btn"
+                  style={activeTab === "streaks" ? { opacity: 0.5, cursor: "not-allowed" } : undefined}
+                >
+                  {activeTab === "streaks" ? "All Time" : formatTimeLabel(time)}{" "}
+                  <ChevronDown size={13} />
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent

src/pages/student/StudentLayout.tsx

@@ -57,8 +57,7 @@ const QUEST_NAV_ITEMS = NAV_ITEMS.map((item) =>
 );
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Cinzel:wght@700&display=swap');
+
-  @import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap');
 
   /* ══ DEFAULT dock (cream frosted glass) ══ */
   .sl-dock-wrap {

src/pages/student/drills/page.tsx

@@ -22,7 +22,6 @@ const DOTS = [
 ];
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   :root { --content-max: 1100px; }
 
@@ -281,6 +280,7 @@ const STYLES = `
 
 export const Drills = () => {
   const user = useAuthStore((state) => state.user);
+  const token = useAuthStore((state) => state.token);
   const navigate = useNavigate();
 
   const [direction, setDirection] = useState<1 | -1>(1);
@@ -319,16 +319,9 @@ export const Drills = () => {
 
   useEffect(() => {
     const fetchAllTopics = async () => {
-      if (!user) return;
+      if (!user || !token) return;
       try {
         setLoading(true);
-        const authStorage = localStorage.getItem("auth-storage");
-        if (!authStorage) return;
-        const parsed = JSON.parse(authStorage) as {
-          state?: { token?: string };
-        } | null;
-        const token = parsed?.state?.token;
-        if (!token) return;
         const response = await api.fetchAllTopics(token);
         setTopics(response);
       } catch (e) {

src/pages/student/hard-test-modules/page.tsx

@@ -24,7 +24,6 @@ const DOTS = [
 ];
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   :root { --content-max: 1100px; }
 

src/pages/student/practice/Pretest.tsx

@@ -23,7 +23,6 @@ const DOTS = [
 ];
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   :root { --content-max: 1100px; }
 
@@ -227,6 +226,7 @@ export const Pretest = () => {
   const { setSheetId, setMode, storeDuration, setQuestionCount } =
     useExamConfigStore();
   const user = useAuthStore((state) => state.user);
+  const token = useAuthStore((state) => state.token);
   const { sheetId } = useParams<{ sheetId: string }>();
   const navigate = useNavigate();
 
@@ -246,15 +246,9 @@ export const Pretest = () => {
   }
 
   useEffect(() => {
-    if (!user) return;
+    if (!user || !token) return;
     async function fetchSheet(id: string) {
-      const authStorage = localStorage.getItem("auth-storage");
+      const data = await api.getPracticeSheetById(token!, id);
-      if (!authStorage) return;
-      const {
-        state: { token },
-      } = JSON.parse(authStorage);
-      if (!token) return;
-      const data = await api.getPracticeSheetById(token, id);
       setPracticeSheet(data);
     }
     fetchSheet(sheetId!);

src/pages/student/practice/Results.tsx

@@ -8,7 +8,6 @@ import { useAuthStore } from "../../../stores/authStore";
 
 // ─── Shared styles injected once ─────────────────────────────────────────────
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600&display=swap');
 
   :root { --content-max: 1100px; }
 

src/pages/student/practice/Test.tsx

@@ -91,7 +91,6 @@ const DOTS = [
 
 // ─── Global Styles ────────────────────────────────────────────────────────────
 const GLOBAL_STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   :root { --content-max: 1100px; }
 
@@ -1170,6 +1169,7 @@ export const Test = () => {
   const handleQuitExam = () => {
     useExamConfigStore.getState().clearPayload();
     quitExam();
+    navigate("/student/home", { replace: true });
   };
 
   const toggleEliminate = (questionId: string, optionId: string) => {
@@ -1703,16 +1703,15 @@ export const Test = () => {
                           </p>
                         </div>
                       )}
-                      {currentQuestion?.context_image_url &&
+                      {currentQuestion?.context_image_url && (
-                        currentQuestion.context_image_url !== "NULL" && (
+                        <div className="t-card p-6">
-                          <div className="t-card p-6">
+                          <img
-                            <img
+                            src={currentQuestion.context_image_url}
-                              src="https://placehold.co/600x400"
+                            alt="Question context"
-                              alt="Question context"
+                            className="w-full h-auto rounded-xl"
-                              className="w-full h-auto rounded-xl"
+                          />
-                            />
+                        </div>
-                          </div>
+                      )}
-                        )}
                       <div className="t-card t-card-purple p-6">
                         <p className="font-bold text-lg text-[#1e1b4b] leading-relaxed">
                           {currentQuestion?.text &&
@@ -1755,26 +1754,24 @@ export const Test = () => {
                       </div>
                     ) : (
                       <>
-                        {currentQuestion?.context_image_url &&
+                        {currentQuestion?.context_image_url && (
-                          currentQuestion.context_image_url !== "NULL" && (
+                          <div className="t-card p-6">
-                            <div className="t-card p-6">
+                            <img
-                              <img
+                              src={currentQuestion.context_image_url}
-                                src="https://placehold.co/600x400"
+                              alt="Question context"
-                                alt="Question context"
+                              className="w-full h-auto rounded-xl"
-                                className="w-full h-auto rounded-xl"
+                            />
-                              />
+                          </div>
-                            </div>
+                        )}
-                          )}
+                        {currentQuestion?.context && (
-                        {currentQuestion?.context &&
+                          <div className="t-card p-6">
-                          currentQuestion.context !== "NULL" && (
+                            <HighlightableRichText
-                            <div className="t-card p-6">
+                              fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
-                              <HighlightableRichText
+                              text={currentQuestion.context}
-                                fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
+                              className="font-semibold text-gray-700 leading-relaxed"
-                                text={currentQuestion.context}
+                            />
-                                className="font-semibold text-gray-700 leading-relaxed"
+                          </div>
-                              />
+                        )}
-                            </div>
-                          )}
                       </>
                     )}
                   </div>

src/pages/student/targeted-practice/page.tsx

@@ -66,7 +66,6 @@ const getSectionMeta = (section?: string) =>
   SECTION_META[section ?? ""] ?? SECTION_META["default"];
 
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
   :root { --content-max: 1100px; }
 
@@ -508,16 +507,9 @@ export const TargetedPractice = () => {
 
   useEffect(() => {
     const fetchAllTopics = async () => {
-      if (!user) return;
+      if (!user || !token) return;
       try {
         setLoading(true);
-        const authStorage = localStorage.getItem("auth-storage");
-        if (!authStorage) return;
-        const parsed = JSON.parse(authStorage) as {
-          state?: { token?: string };
-        } | null;
-        const token = parsed?.state?.token;
-        if (!token) return;
         const response = await api.fetchAllTopics(token);
         setTopics(response);
       } catch (error) {

src/stores/authStore.ts

@@ -68,6 +68,7 @@ export const useAuthStore = create<AuthState>()(
 
           set({
             registrationMessage: response.message,
+            isLoading: false,
           });
 
           return true;
@@ -119,3 +120,8 @@ export const useAuthStore = create<AuthState>()(
     },
   ),
 );
+
+/** Safe non-hook token accessor for use outside React components or in callbacks */
+export function getAuthToken(): string | null {
+  return useAuthStore.getState().token;
+}

src/utils/arcTheme.ts

@@ -0,0 +1,105 @@
+import type { QuestArc } from "../types/quest";
+
+export interface ArcTheme {
+  accent: string;
+  accentDark: string;
+  bgFrom: string;
+  bgTo: string;
+  emoji: string;
+  terrain: { l: string; m: string; d: string; s: string };
+  decos: [string, string, string];
+}
+
+export const mkRng = (seed: number) => {
+  let s = seed >>> 0;
+  return () => {
+    s += 0x6d2b79f5;
+    let t = Math.imul(s ^ (s >>> 15), 1 | s);
+    t ^= t + Math.imul(t ^ (t >>> 7), 61 | t);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+};
+
+export const strToSeed = (str: string) => {
+  let h = 5381;
+  for (let i = 0; i < str.length; i++)
+    h = (Math.imul(h, 33) ^ str.charCodeAt(i)) >>> 0;
+  return h;
+};
+
+const hslToHex = (h: number, s: number, l: number) => {
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => {
+    const k = (n + h * 12) % 12;
+    const c = l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    return Math.round(255 * c)
+      .toString(16)
+      .padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+};
+
+const DECO_SETS: [string, string, string][] = [
+  ["\u{1F334}", "\u{1F33F}", "\u{1F334}"],
+  ["\u{1F335}", "\u{1F3FA}", "\u{1F335}"],
+  ["\u2601\uFE0F", "\u2728", "\u2601\uFE0F"],
+  ["\u{1FAA8}", "\u{1F33E}", "\u{1FAA8}"],
+  ["\u{1F344}", "\u{1F338}", "\u{1F344}"],
+  ["\u{1F525}", "\u{1F480}", "\u{1F525}"],
+  ["\u2744\uFE0F", "\u{1F328}\uFE0F", "\u2744\uFE0F"],
+  ["\u{1F33A}", "\u{1F99C}", "\u{1F33A}"],
+];
+
+export const generateArcTheme = (arc: QuestArc): ArcTheme => {
+  const rng = mkRng(strToSeed(arc.id));
+  const anchors = [150, 165, 180, 200, 230, 260];
+  const baseHue =
+    anchors[Math.floor(rng() * anchors.length)] + (rng() - 0.5) * 8;
+  const satBase = 0.48 + rng() * 0.18;
+  const satTerrain = Math.min(0.8, satBase + 0.12);
+  const accentLightL = 0.48 + rng() * 0.12;
+  const accentDarkL = 0.22 + rng() * 0.06;
+  const bgFromL = 0.04 + rng() * 0.06;
+  const bgToL = 0.1 + rng() * 0.06;
+  const accent = hslToHex(baseHue, satBase, accentLightL);
+  const accentDark = hslToHex(
+    baseHue + (rng() * 6 - 3),
+    Math.max(0.35, satBase - 0.08),
+    accentDarkL,
+  );
+  const bgFrom = hslToHex(
+    baseHue + (rng() * 10 - 5),
+    0.1 + rng() * 0.06,
+    bgFromL,
+  );
+  const bgTo = hslToHex(baseHue + (6 + rng() * 12), 0.08 + rng() * 0.06, bgToL);
+  const tL = hslToHex(
+    baseHue + 10 + rng() * 6,
+    Math.min(0.85, satTerrain),
+    0.36 + rng() * 0.08,
+  );
+  const tM = hslToHex(
+    baseHue + (rng() * 6 - 3),
+    Math.min(0.72, satTerrain - 0.06),
+    0.24 + rng() * 0.06,
+  );
+  const tD = hslToHex(
+    baseHue + (rng() * 8 - 4),
+    Math.max(0.38, satBase - 0.18),
+    0.1 + rng() * 0.04,
+  );
+  const sd = parseInt(tD.slice(1, 3), 16);
+  const sg = parseInt(tD.slice(3, 5), 16);
+  const sb = parseInt(tD.slice(5, 7), 16);
+  const emojis = ["\u{1F33F}", "\u{1F332}", "\u{1F333}", "\u{1F33A}", "\u{1FAA8}", "\u{1F344}", "\u{1F335}"];
+  const emoji = emojis[Math.floor(rng() * emojis.length)];
+  return {
+    accent,
+    accentDark,
+    bgFrom,
+    bgTo,
+    emoji,
+    terrain: { l: tL, m: tM, d: tD, s: `rgba(${sd},${sg},${sb},0.6)` },
+    decos: DECO_SETS[Math.floor(rng() * DECO_SETS.length)],
+  };
+};

vite.config.ts

@@ -11,7 +11,19 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
-  esbuild: {
+  build: {
-    keepNames: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          three: [
+            "three",
+            "@react-three/fiber",
+            "@react-three/drei",
+            "troika-three-text",
+            "troika-worker-utils",
+          ],
+        },
+      },
+    },
   },
 });