From 5aea0dcc27c977865fc29c53461eba2a2ddf4a13 Mon Sep 17 00:00:00 2001
From: NSTKrishna <krishnagehlot936@gmail.com>
Date: Sat, 3 Oct 2026 16:21:05 +0530
Subject: [PATCH 01/10] Remove the mock-data prototype and quiz surfaces

Drops the screens that ran on hardcoded fixtures rather than the API: the
Home and Interview prototypes, the quiz hub and practice pages, and the
dashboard's overview and feedback panels.

- Deletes src/data/mockData.js and continueContent.js, the fixture source
  every one of these read from
- Removes the duplicate dashboard shell (dashboard-layout.jsx) and Navbar,
  superseded by the DashboardLayout and LearningSidebar pair
- Drops the unused logo.png, vite.svg and react.svg assets
---
 public/logo.png                               | Bin 21001 -> 0 bytes
 public/vite.svg                               |   1 -
 src/App.css                                   |  33 -
 src/assets/react.svg                          |   1 -
 src/components/Home.jsx                       |  86 ---
 src/components/Interview.jsx                  | 718 ------------------
 src/components/common/Badge.jsx               |  15 -
 .../dashboard/InterviewPrepCard.jsx           |  33 -
 src/components/dashboard/StatsOverview.jsx    |  37 -
 src/components/dashboard/dashboard-layout.jsx | 110 ---
 src/components/dashboard/feedback-content.jsx | 211 -----
 src/components/dashboard/overview-content.jsx | 390 ----------
 src/components/layout/Navbar.jsx              | 107 ---
 src/data/continueContent.js                   |  71 --
 src/data/mockData.js                          | 247 ------
 src/pages/InterviewHubPage.jsx                | 279 -------
 src/pages/InterviewPracticePage.jsx           | 177 -----
 17 files changed, 2516 deletions(-)
 delete mode 100644 public/logo.png
 delete mode 100644 public/vite.svg
 delete mode 100644 src/App.css
 delete mode 100644 src/assets/react.svg
 delete mode 100644 src/components/Home.jsx
 delete mode 100644 src/components/Interview.jsx
 delete mode 100644 src/components/common/Badge.jsx
 delete mode 100644 src/components/dashboard/InterviewPrepCard.jsx
 delete mode 100644 src/components/dashboard/StatsOverview.jsx
 delete mode 100644 src/components/dashboard/dashboard-layout.jsx
 delete mode 100644 src/components/dashboard/feedback-content.jsx
 delete mode 100644 src/components/dashboard/overview-content.jsx
 delete mode 100644 src/components/layout/Navbar.jsx
 delete mode 100644 src/data/continueContent.js
 delete mode 100644 src/data/mockData.js
 delete mode 100644 src/pages/InterviewHubPage.jsx
 delete mode 100644 src/pages/InterviewPracticePage.jsx

diff --git a/public/logo.png b/public/logo.png
deleted file mode 100644
index 804b86d150650458a931b0e43530cf58a74d7bc5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 21001
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

diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 198cec1..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/* Pulse animation for connection indicator */
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* Robot speaking animation */
-@keyframes robotPulse {
-  0%, 100% {
-    transform: scale(1);
-    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
-  }
-  50% {
-    transform: scale(1.05);
-    box-shadow: 0 0 40px rgba(16, 185, 129, 0.8);
-  }
-}
-
-/* Slide in animation for transcript messages */
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
diff --git a/src/assets/react.svg b/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
deleted file mode 100644
index a0b8fdb..0000000
--- a/src/components/Home.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { MessageSquare, ArrowRight, Sparkles } from "lucide-react";
-
-function Home() {
-  const navigate = useNavigate();
-
-  const handleInterviewClick = () => {
-    navigate("/interview");
-  };
-
-  return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 px-4">
-      {/* Header Section */}
-      <div className="text-center space-y-4 mb-12">
-        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-50 border border-blue-200 text-blue-700 text-sm font-medium">
-          <Sparkles className="h-4 w-4" />
-          AI-Powered Learning
-        </div>
-
-        <h1 className="text-4xl md:text-5xl font-bold text-slate-900">
-          Choose Your Learning Path
-        </h1>
-
-        <p className="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto">
-          Your AI-powered learning companion for interviews and quizzes
-        </p>
-      </div>
-
-      {/* Interview Card */}
-      <div className="w-full max-w-2xl mx-auto">
-        <div
-          onClick={handleInterviewClick}
-          className="group relative overflow-hidden rounded-3xl bg-white border-2 border-slate-200 hover:border-green-300 p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:-translate-y-1"
-        >
-          {/* Hover Background */}
-          <div className="absolute inset-0 bg-gradient-to-br from-green-50/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
-
-          <div className="relative space-y-6">
-            {/* Icon */}
-            <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-green-600 to-green-700 flex items-center justify-center shadow-lg shadow-green-600/30 group-hover:scale-110 transition-transform">
-              <MessageSquare className="h-8 w-8 text-white" />
-            </div>
-
-            {/* Title + Description */}
-            <div className="flex flex-col gap-4">
-              <h2 className="text-3xl font-bold text-slate-900">
-                Mock Interviews
-              </h2>
-
-              <p className="text-slate-600 leading-relaxed">
-                Practice with AI interviewers and get real-time feedback on your
-                performance.
-              </p>
-            </div>
-
-            {/* Features */}
-            <ul className="space-y-3">
-              <li className="flex items-start gap-3 text-sm text-slate-600">
-                <div className="h-1.5 w-1.5 rounded-full bg-green-600 mt-1.5" />
-                <span>Technical & behavioral questions</span>
-              </li>
-
-              <li className="flex items-start gap-3 text-sm text-slate-600">
-                <div className="h-1.5 w-1.5 rounded-full bg-green-600 mt-1.5" />
-                <span>Voice interaction support</span>
-              </li>
-
-              <li className="flex items-start gap-3 text-sm text-slate-600">
-                <div className="h-1.5 w-1.5 rounded-full bg-green-600 mt-1.5" />
-                <span>Personalized feedback</span>
-              </li>
-            </ul>
-
-            {/* Button */}
-            <button className="w-full bg-green-600 hover:bg-green-700 text-white py-4 px-6 rounded-xl font-semibold text-lg shadow-md hover:shadow-lg transition-all inline-flex items-center justify-center gap-2 group-hover:gap-3">
-              <span>Start Interview</span>
-              <ArrowRight className="h-5 w-5 group-hover:translate-x-1 transition-transform" />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Home;
diff --git a/src/components/Interview.jsx b/src/components/Interview.jsx
deleted file mode 100644
index 8fe292b..0000000
--- a/src/components/Interview.jsx
+++ /dev/null
@@ -1,718 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-import Vapi from "@vapi-ai/web";
-import { useLearner } from "../context/LearnerContext";
-import "../App.css";
-
-const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3000/api";
-const INTERVIEW_START_URL = `${API_URL}/interview/start-interview`;
-const INTERVIEW_COMPLETE_URL = `${API_URL}/interview/complete`;
-
-function Interview() {
-  const navigate = useNavigate();
-  const { learnerProfile, refreshProfile, fetchTokens, tokens, setTokens } =
-    useLearner();
-  const [step, setStep] = useState(1);
-  const [status, setStatus] = useState(
-    "Fill out the form to start your personalized mock interview",
-  );
-  const [vapiInstance, setVapiInstance] = useState(null);
-  const [_interviewInfo, setInterviewInfo] = useState(null);
-  const [interviewId, setInterviewId] = useState(null);
-  const [transcript, setTranscript] = useState([]);
-  const [isSpeaking, setIsSpeaking] = useState(false);
-  const [callDuration, setCallDuration] = useState(0);
-  const [isConnected, setIsConnected] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const transcriptEndRef = useRef(null);
-  const timerIntervalRef = useRef(null);
-
-  const [formData, setFormData] = useState({
-    userId: learnerProfile?.id || `user_${Date.now()}`,
-    role: learnerProfile?.role || "",
-    interviewType: "mixed",
-    technologies: learnerProfile?.skills || [],
-  });
-  useEffect(() => {
-    if (learnerProfile) {
-      setFormData((prev) => ({
-        ...prev,
-        userId: learnerProfile.id,
-        role: learnerProfile.role || prev.role,
-        technologies: learnerProfile.skills || prev.technologies,
-      }));
-    }
-  }, [learnerProfile]);
-
-  useEffect(() => {
-    if (transcriptEndRef.current) {
-      transcriptEndRef.current.scrollIntoView({ behavior: "smooth" });
-    }
-  }, [transcript]);
-
-  useEffect(() => {
-    const currentTimer = timerIntervalRef.current;
-    return () => {
-      if (vapiInstance) {
-        try {
-          vapiInstance.stop();
-        } catch (error) {
-          console.error("Error cleaning up VAPI instance:", error);
-        }
-      }
-      if (currentTimer) {
-        clearInterval(currentTimer);
-      }
-    };
-  }, [vapiInstance]);
-
-  const roles = [
-    "Full Stack Developer",
-    "Frontend Developer",
-    "Backend Developer",
-    "Data Scientist",
-    "Machine Learning Engineer",
-    "DevOps Engineer",
-    "Mobile Developer",
-    "UI/UX Designer",
-    "Product Manager",
-    "Cloud Architect",
-  ];
-
-  const techOptions = {
-    "Full Stack Developer": [
-      "React",
-      "Node.js",
-      "MongoDB",
-      "PostgreSQL",
-      "Express",
-      "TypeScript",
-      "AWS",
-    ],
-    "Frontend Developer": [
-      "React",
-      "Vue.js",
-      "Angular",
-      "TypeScript",
-      "Next.js",
-      "CSS/SCSS",
-      "Webpack",
-    ],
-    "Backend Developer": [
-      "Node.js",
-      "Python",
-      "Java",
-      "Go",
-      "PostgreSQL",
-      "MongoDB",
-      "Redis",
-      "Microservices",
-    ],
-    "Data Scientist": [
-      "Python",
-      "R",
-      "TensorFlow",
-      "PyTorch",
-      "Pandas",
-      "SQL",
-      "Machine Learning",
-    ],
-    "Machine Learning Engineer": [
-      "Python",
-      "TensorFlow",
-      "PyTorch",
-      "Scikit-learn",
-      "Keras",
-      "MLOps",
-      "AWS SageMaker",
-    ],
-    "DevOps Engineer": [
-      "Docker",
-      "Kubernetes",
-      "Jenkins",
-      "AWS",
-      "Terraform",
-      "CI/CD",
-      "Linux",
-    ],
-    "Mobile Developer": [
-      "React Native",
-      "Flutter",
-      "Swift",
-      "Kotlin",
-      "iOS",
-      "Android",
-      "Firebase",
-    ],
-    "UI/UX Designer": [
-      "Figma",
-      "Adobe XD",
-      "User Research",
-      "Prototyping",
-      "Design Systems",
-      "Wireframing",
-    ],
-    "Product Manager": [
-      "Product Strategy",
-      "Roadmapping",
-      "Analytics",
-      "Agile",
-      "Stakeholder Management",
-    ],
-    "Cloud Architect": [
-      "AWS",
-      "Azure",
-      "GCP",
-      "Serverless",
-      "Microservices",
-      "Cloud Security",
-      "Terraform",
-    ],
-  };
-
-  const handleInputChange = (field, value) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    if (field === "role") {
-      setFormData((prev) => ({ ...prev, technologies: [] }));
-    }
-  };
-
-  const toggleTechnology = (tech) => {
-    setFormData((prev) => ({
-      ...prev,
-      technologies: prev.technologies.includes(tech)
-        ? prev.technologies.filter((t) => t !== tech)
-        : [...prev.technologies, tech],
-    }));
-  };
-
-  const startInterview = async () => {
-    if (tokens !== null && tokens < 10) {
-      setStatus(
-        "Not enough tokens to start the interview. Please purchase a top-up.",
-      );
-      alert(
-        "Not enough tokens to start the interview. Please purchase a top-up.",
-      );
-      return;
-    }
-
-    if (!formData.role) {
-      setStatus("Please select a role");
-      return;
-    }
-    if (formData.technologies.length === 0) {
-      setStatus("Please select at least one technology");
-      return;
-    }
-
-    console.log("🚀 Starting interview with formData:", formData);
-    setIsLoading(true);
-
-    // Request microphone permission explicitly
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      stream.getTracks().forEach((track) => track.stop()); // Release the microphone
-    } catch (permError) {
-      console.error("Microphone permission denied:", permError);
-      setStatus(
-        "Microphone access denied. Please allow microphone access in your browser settings to continue.",
-      );
-      setIsLoading(false);
-      return;
-    }
-
-    if (vapiInstance) {
-      try {
-        await vapiInstance.stop();
-        setVapiInstance(null);
-      } catch (error) {
-        console.error("Error stopping previous VAPI instance:", error);
-      }
-    }
-
-    try {
-      setStatus("Generating your personalized interview with AI (Groq)...");
-      setTranscript([]);
-
-      const token = localStorage.getItem("authToken");
-      if (!token) {
-        setStatus("Authentication token not found. Please log in again.");
-        setIsLoading(false);
-        return;
-      }
-
-      const res = await fetch(INTERVIEW_START_URL, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify(formData),
-      });
-
-      let data;
-      try {
-        data = await res.json();
-      } catch (err) {
-        console.error("Failed to parse JSON:", err);
-        setStatus("Invalid response from server");
-        setIsLoading(false);
-        return;
-      }
-
-      if (!res.ok) {
-        if (res.status === 400 && data?.error?.includes("Token")) {
-          const errMsg =
-            "Not enough tokens to start the interview. Please purchase a top-up.";
-          setStatus(errMsg);
-          alert(errMsg);
-        } else {
-          setStatus(data?.error || "Server error");
-        }
-        setIsLoading(false);
-        return;
-      }
-
-      if (tokens !== null) {
-        setTokens((prev) => (prev !== null ? prev - 10 : prev));
-      }
-
-      setInterviewInfo(data.interviewConfig);
-      setInterviewId(data.interviewId);
-      setStep(2);
-
-      // Use the key from server or fallback
-      const publicKey =
-        data.publicKey || "963b4430-fefb-4d42-bc81-78b81277cf45";
-      console.log("Using Vapi Public Key:", publicKey);
-
-      const vapi = new Vapi(publicKey);
-      setVapiInstance(vapi);
-
-      setStatus("🔄 Connecting to AI interviewer...");
-      setIsConnected(false);
-
-      vapi.on("call-start", () => {
-        setIsConnected(true);
-        setStatus(
-          `🎤 ${formData.interviewType.toUpperCase()} Interview in Progress!`,
-        );
-
-        const startTime = Date.now();
-        const interval = setInterval(() => {
-          setCallDuration(Math.floor((Date.now() - startTime) / 1000));
-        }, 1000);
-
-        timerIntervalRef.current = interval;
-      });
-
-      vapi.on("call-end", async () => {
-        setIsConnected(false);
-        setIsSpeaking(false);
-        if (timerIntervalRef.current) {
-          clearInterval(timerIntervalRef.current);
-          timerIntervalRef.current = null;
-        }
-
-        console.log("Call ended. Transcript length:", transcript.length);
-        if (interviewId && transcript.length > 0) {
-          try {
-            setStatus("Saving interview data and generating feedback...");
-            await fetch(INTERVIEW_COMPLETE_URL, {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${localStorage.getItem("authToken")}`,
-              },
-              body: JSON.stringify({
-                interviewId,
-                transcript,
-                duration: callDuration,
-              }),
-            })
-              .then((r) => r.json())
-              .then((d) => {
-                if (d.success) {
-                  refreshProfile();
-                  fetchTokens();
-                  setStatus(
-                    "Interview completed successfully! Check your dashboard.",
-                  );
-                } else {
-                  setStatus("Interview completed. Feedback generation failed.");
-                }
-              });
-          } catch (e) {
-            console.error(e);
-            setStatus("Could not save feedback.");
-          }
-        } else {
-          setStatus("Mock interview completed.");
-        }
-      });
-
-      vapi.on("speech-start", () => {
-        setIsSpeaking(true);
-      });
-
-      vapi.on("speech-end", () => {
-        setIsSpeaking(false);
-      });
-
-      vapi.on("message", (msg) => {
-        if (msg.type === "transcript" && msg.transcriptType === "final") {
-          const speaker = msg.role === "assistant" ? "Interviewer" : "You";
-          setTranscript((prev) => [
-            ...prev,
-            {
-              speaker,
-              text: msg.transcript,
-              timestamp: new Date().toLocaleTimeString(),
-            },
-          ]);
-        }
-      });
-
-      vapi.on("error", (error) => {
-        console.error("VAPI Error Details:", JSON.stringify(error, null, 2));
-        setStatus(
-          `Connection Error: ${error.errorMsg || error.message || "Unknown error"}`,
-        );
-        setIsConnected(false);
-      });
-
-      try {
-        // Option 1: Start with a pre-configured Assistant ID if provided
-        if (data.assistantId) {
-          console.log(
-            "Starting Vapi call with Assistant ID:",
-            data.assistantId,
-          );
-          await vapi.start(data.assistantId);
-        }
-        // Option 2: Start with a minimal inline config (fallback)
-        else {
-          const callConfig = {
-            name: `${formData.role} Interview`,
-            model: {
-              provider: "openai",
-              model: "gpt-3.5-turbo",
-              messages: [
-                {
-                  role: "system",
-                  content:
-                    data.systemPrompt || "You are a helpful interviewer.",
-                },
-              ],
-            },
-            // Use standard 11labs voice which is widely supported
-            voice: {
-              provider: "11labs",
-              voiceId: "paula",
-            },
-            firstMessage: `Hello! I'm your AI interviewer for the ${formData.role} position.`,
-          };
-
-          console.log(
-            "Starting Vapi call with minimal fallback config:",
-            callConfig,
-          );
-          await vapi.start(callConfig);
-        }
-      } catch (startError) {
-        console.error("Error calling vapi.start():", startError);
-        setStatus(`Failed to start call: ${startError.message}`);
-        setIsConnected(false);
-        throw startError;
-      }
-    } catch (err) {
-      console.error(err);
-      setStatus("Error starting interview. Check console.");
-      setIsLoading(false);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const stopInterview = async () => {
-    if (vapiInstance) {
-      vapiInstance.stop();
-      setVapiInstance(null);
-    }
-
-    if (interviewId && transcript.length > 0) {
-      try {
-        setStatus("Saving interview data and generating feedback...");
-        const response = await fetch(INTERVIEW_COMPLETE_URL, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${localStorage.getItem("authToken")}`,
-          },
-          body: JSON.stringify({
-            interviewId,
-            transcript,
-            duration: callDuration,
-          }),
-        });
-
-        const data = await response.json();
-        if (data.success) {
-          await refreshProfile(); // Refresh profile to update dashboard
-          await fetchTokens();
-          setStatus(
-            "Interview completed successfully! Check your dashboard for detailed feedback.",
-          );
-          // Take the user back to the dashboard so they immediately see the updated stats + feedback
-          navigate("/dashboard", { replace: true });
-        } else {
-          setStatus("Interview stopped. Feedback generation failed.");
-        }
-      } catch (error) {
-        console.error("Error saving interview:", error);
-        setStatus("Interview stopped. Could not save feedback.");
-      }
-    } else {
-      setStatus("Interview stopped.");
-    }
-
-    if (timerIntervalRef.current) {
-      clearInterval(timerIntervalRef.current);
-      timerIntervalRef.current = null;
-    }
-    setIsConnected(false);
-    setIsSpeaking(false);
-    setCallDuration(0);
-  };
-
-  const resetForm = () => {
-    if (vapiInstance) {
-      vapiInstance.stop();
-      setVapiInstance(null);
-    }
-    if (timerIntervalRef.current) {
-      clearInterval(timerIntervalRef.current);
-      timerIntervalRef.current = null;
-    }
-    setStep(1);
-    setFormData({
-      userId: learnerProfile?.id || `user_${Date.now()}`,
-      role: learnerProfile?.role || "",
-      interviewType: "mixed",
-      technologies: learnerProfile?.skills || [],
-    });
-    setTranscript([]);
-    setInterviewInfo(null);
-    setInterviewId(null);
-    setStatus("Fill out the form to start your personalized mock interview");
-    setIsConnected(false);
-    setIsSpeaking(false);
-    setCallDuration(0);
-  };
-
-  return (
-    <div className="flex flex-col h-[calc(100vh-80px)] max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-      {step === 1 && (
-        <div className="max-w-2xl mx-auto w-full">
-          <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold mb-3">AI Mock Interview</h1>
-            <p className="text-muted-foreground">
-              Configure your session and get ready to practice
-            </p>
-          </div>
-
-          <div className="bg-white rounded-2xl border border-border shadow-sm p-6 sm:p-8">
-            <h2 className="text-xl font-semibold mb-6 flex items-center gap-2">
-              Configuration
-            </h2>
-
-            <div className="space-y-6">
-              <div>
-                <label className="block text-sm font-medium mb-2">
-                  Select Your Role
-                </label>
-                <select
-                  value={formData.role}
-                  onChange={(e) => handleInputChange("role", e.target.value)}
-                  className="w-full px-4 py-3 rounded-xl border border-border bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
-                >
-                  <option value="">-- Select a role --</option>
-                  {roles.map((role) => (
-                    <option key={role} value={role}>
-                      {role}
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium mb-3">
-                  Interview Type
-                </label>
-                <div className="grid grid-cols-3 gap-3">
-                  {["technical", "behavioral", "mixed"].map((type) => (
-                    <button
-                      key={type}
-                      onClick={() => handleInputChange("interviewType", type)}
-                      className={`py-3 px-2 rounded-xl text-sm font-medium capitalize transition-all border ${
-                        formData.interviewType === type
-                          ? "bg-blue-600 text-white border-blue-600 shadow-md transform scale-[1.02]"
-                          : "bg-white text-muted-foreground border-border hover:bg-slate-50"
-                      }`}
-                    >
-                      {type}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              {formData.role && (
-                <div>
-                  <label className="block text-sm font-medium mb-3">
-                    Select Technologies{" "}
-                    <span className="text-xs text-muted-foreground font-normal">
-                      (Choose at least 1)
-                    </span>
-                  </label>
-                  <div className="flex flex-wrap gap-2">
-                    {techOptions[formData.role]?.map((tech) => (
-                      <button
-                        key={tech}
-                        onClick={() => toggleTechnology(tech)}
-                        className={`px-4 py-2 rounded-full text-sm font-medium transition-all border ${
-                          formData.technologies.includes(tech)
-                            ? "bg-green-100 text-green-700 border-green-200"
-                            : "bg-white text-slate-600 border-border hover:bg-slate-50"
-                        }`}
-                      >
-                        {tech}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              <button
-                onClick={startInterview}
-                disabled={
-                  !formData.role ||
-                  formData.technologies.length === 0 ||
-                  isLoading
-                }
-                className="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all flex items-center justify-center gap-2 mt-4"
-              >
-                {isLoading ? <>Starting Session...</> : <>Start Interview</>}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {step === 2 && (
-        <div className="flex flex-col h-full max-w-6xl mx-auto w-full">
-          {/* Header */}
-          <div className="flex items-center justify-between mb-6">
-            <button
-              onClick={stopInterview}
-              className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
-            >
-              <span className="text-lg">←</span> Back
-            </button>
-            <h2 className="text-xl font-bold">Mock Interview</h2>
-            <div className="bg-slate-100 px-4 py-1.5 rounded-full font-mono font-medium text-slate-700 flex items-center gap-2">
-              <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
-              {Math.floor(callDuration / 60)}:
-              {(callDuration % 60).toString().padStart(2, "0")}
-            </div>
-          </div>
-
-          {/* Status Bar */}
-          {!isConnected && (
-            <div className="bg-blue-50 text-blue-700 px-4 py-3 rounded-xl mb-6 flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
-              <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
-              {status}
-            </div>
-          )}
-
-          {/* Info Card */}
-          <div className="bg-white border border-border rounded-xl p-4 mb-6 flex flex-wrap items-center justify-between gap-4 shadow-sm">
-            <div>
-              <h3 className="font-bold text-lg">{formData.role}</h3>
-              <p className="text-sm text-muted-foreground capitalize">
-                {formData.interviewType} Interview •{" "}
-                {formData.technologies.slice(0, 3).join(", ")}
-                {formData.technologies.length > 3 &&
-                  ` +${formData.technologies.length - 3}`}
-              </p>
-            </div>
-            <div
-              className={`px-3 py-1 rounded-full text-xs font-semibold flex items-center gap-1.5 ${isConnected ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`}
-            >
-              <div
-                className={`w-2 h-2 rounded-full ${isConnected ? "bg-green-600" : "bg-yellow-600 animate-pulse"}`}
-              ></div>
-              {isConnected ? "Active" : "Connecting..."}
-            </div>
-          </div>
-
-          {/* Main Content Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 flex-1 min-h-[400px]">
-            {/* AI Avatar */}
-            <div className="bg-white border border-border rounded-2xl flex flex-col items-center justify-center p-8 shadow-sm relative overflow-hidden group">
-              <div
-                className={`w-32 h-32 rounded-full flex items-center justify-center mb-6 transition-all duration-300 ${isSpeaking ? "bg-blue-100 scale-110" : "bg-slate-50"}`}
-              >
-                <div
-                  className={`text-4xl transition-all duration-300 ${isSpeaking ? "scale-110" : "scale-100"}`}
-                >
-                  🎙️
-                </div>
-              </div>
-
-              {isSpeaking && (
-                <div className="absolute inset-0 pointer-events-none flex items-center justify-center">
-                  <div className="w-40 h-40 border-4 border-blue-100 rounded-full animate-ping opacity-20"></div>
-                </div>
-              )}
-
-              <h3 className="font-bold text-lg">AI Interviewer</h3>
-              <p className="text-sm text-muted-foreground mt-1">
-                {isSpeaking ? "Speaking..." : "Listening..."}
-              </p>
-            </div>
-
-            {/* User Avatar */}
-            <div className="bg-white border border-border rounded-2xl flex flex-col items-center justify-center p-8 shadow-sm">
-              <div className="w-32 h-32 rounded-full bg-blue-600/10 flex items-center justify-center mb-6">
-                <div className="text-4xl text-blue-600">👤</div>
-              </div>
-              <h3 className="font-bold text-lg">You</h3>
-              <p className="text-sm text-muted-foreground mt-1">
-                Waiting to connect...
-              </p>
-            </div>
-          </div>
-
-          {/* Footer Actions */}
-          <div className="mt-6 flex items-center justify-center gap-4">
-            <button
-              onClick={stopInterview}
-              className="px-8 py-3 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all flex items-center gap-2 min-w-[200px] justify-center"
-            >
-              <span>End Interview</span>
-            </button>
-            <button
-              onClick={resetForm}
-              className="px-6 py-3 bg-white border border-border hover:bg-slate-50 text-foreground font-medium rounded-xl transition-all flex items-center gap-2"
-            >
-              <span>New</span>
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Interview;
diff --git a/src/components/common/Badge.jsx b/src/components/common/Badge.jsx
deleted file mode 100644
index f0d4ed2..0000000
--- a/src/components/common/Badge.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export default function Badge({ children, variant = "default", className = "", ...props }) {
-  const baseStyles = "inline-flex items-center justify-center gap-1 rounded-full border px-3 py-1 text-xs font-medium transition-colors"
-
-  const variants = {
-    default: "bg-primary/10 text-primary border-primary/20",
-    secondary: "bg-muted text-muted-foreground border-border",
-    outline: "bg-transparent text-foreground border-border",
-  }
-
-  return (
-    <span className={`${baseStyles} ${variants[variant] || variants.default} ${className}`} {...props}>
-      {children}
-    </span>
-  )
-}
diff --git a/src/components/dashboard/InterviewPrepCard.jsx b/src/components/dashboard/InterviewPrepCard.jsx
deleted file mode 100644
index 1bbfa05..0000000
--- a/src/components/dashboard/InterviewPrepCard.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Link } from "react-router-dom"
-import Button from "../common/Button"
-
-export default function InterviewPrepCard({ topic, data }) {
-  return (
-    <div className="bg-card border border-border rounded-lg p-6 hover:shadow-lg transition-shadow">
-      <div className="flex items-start justify-between mb-4">
-        <div>
-          <h3 className="text-lg font-semibold text-foreground mb-1">{data.title}</h3>
-          <p className="text-sm text-muted-foreground">{data.questions.length} practice questions</p>
-        </div>
-        <span className="text-2xl">🎤</span>
-      </div>
-
-      <div className="mb-4">
-        <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
-          <span>💡</span>
-          <span>Practice common interview questions</span>
-        </div>
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <span>🎯</span>
-          <span>Build confidence</span>
-        </div>
-      </div>
-
-      <Link to={`/interview/${topic}`}>
-        <Button variant="primary" className="w-full">
-          Practice Interview
-        </Button>
-      </Link>
-    </div>
-  )
-}
diff --git a/src/components/dashboard/StatsOverview.jsx b/src/components/dashboard/StatsOverview.jsx
deleted file mode 100644
index 1cdb7f6..0000000
--- a/src/components/dashboard/StatsOverview.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useLearner } from "../../context/LearnerContext";
-
-export default function StatsOverview() {
-  const { learnerProfile } = useLearner();
-
-  const stats = [
-    {
-      label: "Interviews Practiced",
-      value: learnerProfile?.interviewsPracticed?.length || 0,
-      icon: "🎤",
-    },
-    {
-      label: "Modules Completed",
-      value: learnerProfile?.completedModules?.length || 0,
-      icon: "✅",
-    },
-  ];
-
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-      {stats.map((stat, index) => (
-        <div
-          key={index}
-          className="bg-card border border-border rounded-lg p-6 hover:shadow-lg transition-shadow"
-        >
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">{stat.label}</p>
-              <p className="text-2xl font-bold text-foreground">{stat.value}</p>
-            </div>
-            <div className="text-4xl">{stat.icon}</div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/src/components/dashboard/dashboard-layout.jsx b/src/components/dashboard/dashboard-layout.jsx
deleted file mode 100644
index c3a59d6..0000000
--- a/src/components/dashboard/dashboard-layout.jsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import {
-  LayoutDashboard,
-  Play,
-  BookOpen,
-  Mic,
-  Menu,
-  X,
-  GraduationCap,
-} from "lucide-react";
-import { Button } from "../ui/button";
-import { cn } from "../../lib/utils";
-
-const navigation = [
-  { name: "Dashboard", href: "/", icon: LayoutDashboard },
-  { name: "Interviews", href: "/interviews", icon: Mic },
-];
-
-export function DashboardLayout({ children }) {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const pathname = useLocation().pathname;
-
-  return (
-    <div className="min-h-screen bg-background">
-      {sidebarOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
-
-      <aside
-        className={cn(
-          "fixed inset-y-0 left-0 z-50 w-64 transform bg-card border-r border-border transition-transform duration-300 ease-in-out lg:translate-x-0",
-          sidebarOpen ? "translate-x-0" : "-translate-x-full",
-        )}
-      >
-        <div className="flex h-full flex-col">
-          <div className="flex h-16 items-center gap-2 border-b border-border px-6">
-            <GraduationCap className="h-8 w-8 text-primary" />
-            <span className="text-xl font-semibold text-foreground">
-              LearnHub
-            </span>
-          </div>
-
-          <nav className="flex-1 space-y-1 px-3 py-4">
-            {navigation.map((item) => {
-              const isActive = pathname === item.href;
-              return (
-                <Link
-                  key={item.name}
-                  to={item.href}
-                  className={cn(
-                    "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
-                    isActive
-                      ? "bg-primary text-primary-foreground"
-                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
-                  )}
-                  onClick={() => setSidebarOpen(false)}
-                >
-                  <item.icon className="h-5 w-5" />
-                  {item.name}
-                </Link>
-              );
-            })}
-          </nav>
-
-          <div className="border-t border-border p-4">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground font-semibold">
-                AS
-              </div>
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-foreground truncate">
-                  Alex Smith
-                </p>
-                <p className="text-xs text-muted-foreground truncate">
-                  Computer Science
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </aside>
-
-      <div className="lg:pl-64">
-        <header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-border bg-card px-4 lg:hidden">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-          >
-            {sidebarOpen ? (
-              <X className="h-6 w-6" />
-            ) : (
-              <Menu className="h-6 w-6" />
-            )}
-          </Button>
-          <div className="flex items-center gap-2">
-            <GraduationCap className="h-6 w-6 text-primary" />
-            <span className="text-lg font-semibold">LearnHub</span>
-          </div>
-        </header>
-
-        <main className="p-4 lg:p-8">{children}</main>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/dashboard/feedback-content.jsx b/src/components/dashboard/feedback-content.jsx
deleted file mode 100644
index 024f91e..0000000
--- a/src/components/dashboard/feedback-content.jsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { MessageSquare, ThumbsUp, Clock, CheckCircle2 } from "lucide-react"
-
-const interviewResults = [
-  {
-    id: 1,
-    title: "Technical Interview - Data Structures",
-    date: "June 15, 2024",
-    interviewer: "Dr. Sarah Johnson",
-    rating: "Excellent",
-    score: 92,
-    feedback:
-      "Demonstrated exceptional understanding of data structures and algorithms. Problem-solving approach was methodical and efficient. Strong communication throughout the session.",
-    strengths: ["Algorithm optimization", "Clear communication", "Time complexity analysis"],
-    improvements: ["Edge case handling", "Code documentation"],
-    status: "completed",
-  },
-  {
-    id: 2,
-    title: "Behavioral Interview - Team Collaboration",
-    date: "June 10, 2024",
-    interviewer: "Prof. Michael Chen",
-    rating: "Good",
-    score: 85,
-    feedback:
-      "Good examples of teamwork and leadership. Could provide more specific metrics and outcomes in responses. Overall positive performance.",
-    strengths: ["Leadership examples", "Conflict resolution", "Active listening"],
-    improvements: ["Quantifiable results", "More diverse examples"],
-    status: "completed",
-  },
-  {
-    id: 3,
-    title: "System Design - Scalability",
-    date: "June 5, 2024",
-    interviewer: "Dr. Emily Rodriguez",
-    rating: "Very Good",
-    score: 88,
-    feedback:
-      "Solid understanding of distributed systems and scalability patterns. Good trade-off analysis between different architectural approaches.",
-    strengths: ["System architecture", "Trade-off analysis", "Scalability concepts"],
-    improvements: ["Database sharding", "Caching strategies"],
-    status: "completed",
-  },
-  {
-    id: 4,
-    title: "Mock Interview - Frontend Development",
-    date: "June 20, 2024",
-    interviewer: "Dr. James Wilson",
-    rating: "Pending",
-    score: 0,
-    feedback: "Feedback will be available within 48 hours.",
-    strengths: [],
-    improvements: [],
-    status: "pending",
-  },
-]
-
-export function FeedbackContent() {
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight text-foreground">Feedback & Results</h1>
-        <p className="text-muted-foreground mt-1">Review your interview feedback and performance insights</p>
-      </div>
-
-      {/* Summary Stats */}
-      <div className="grid gap-4 md:grid-cols-4">
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
-                <MessageSquare className="h-5 w-5 text-primary" />
-              </div>
-              <div>
-                <p className="text-sm text-muted-foreground">Total Interviews</p>
-                <p className="text-2xl font-bold text-foreground">12</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-accent/10">
-                <CheckCircle2 className="h-5 w-5 text-accent" />
-              </div>
-              <div>
-                <p className="text-sm text-muted-foreground">Completed</p>
-                <p className="text-2xl font-bold text-foreground">9</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-chart-3/10">
-                <Clock className="h-5 w-5 text-chart-3" />
-              </div>
-              <div>
-                <p className="text-sm text-muted-foreground">Pending</p>
-                <p className="text-2xl font-bold text-foreground">3</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-chart-4/10">
-                <ThumbsUp className="h-5 w-5 text-chart-4" />
-              </div>
-              <div>
-                <p className="text-sm text-muted-foreground">Avg. Score</p>
-                <p className="text-2xl font-bold text-foreground">87%</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Interview Results */}
-      <div className="space-y-4">
-        {interviewResults.map((result) => (
-          <Card key={result.id}>
-            <CardHeader>
-              <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-                <div className="space-y-1">
-                  <CardTitle className="text-xl">{result.title}</CardTitle>
-                  <CardDescription>
-                    <span className="flex items-center gap-2 text-sm">
-                      <Clock className="h-4 w-4" />
-                      {result.date} • Interviewer: {result.interviewer}
-                    </span>
-                  </CardDescription>
-                </div>
-                <div className="flex items-center gap-3">
-                  {result.status === "completed" && (
-                    <div className="text-right">
-                      <p className="text-sm text-muted-foreground">Score</p>
-                      <p className="text-2xl font-bold text-foreground">{result.score}%</p>
-                    </div>
-                  )}
-                  <Badge
-                    variant={result.status === "pending" ? "secondary" : result.score >= 90 ? "default" : "outline"}
-                    className="h-fit"
-                  >
-                    {result.rating}
-                  </Badge>
-                </div>
-              </div>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {/* Feedback */}
-              <div>
-                <h4 className="font-semibold text-foreground mb-2">Overall Feedback</h4>
-                <p className="text-sm text-muted-foreground leading-relaxed">{result.feedback}</p>
-              </div>
-
-              {/* Strengths and Improvements */}
-              {result.status === "completed" && (
-                <div className="grid gap-4 md:grid-cols-2">
-                  <div className="space-y-2">
-                    <h4 className="font-semibold text-foreground flex items-center gap-2">
-                      <ThumbsUp className="h-4 w-4 text-accent" />
-                      Strengths
-                    </h4>
-                    <ul className="space-y-1">
-                      {result.strengths.map((strength, index) => (
-                        <li key={index} className="text-sm text-muted-foreground flex items-start gap-2">
-                          <span className="text-accent mt-1">•</span>
-                          {strength}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  <div className="space-y-2">
-                    <h4 className="font-semibold text-foreground flex items-center gap-2">
-                      <MessageSquare className="h-4 w-4 text-primary" />
-                      Areas for Improvement
-                    </h4>
-                    <ul className="space-y-1">
-                      {result.improvements.map((improvement, index) => (
-                        <li key={index} className="text-sm text-muted-foreground flex items-start gap-2">
-                          <span className="text-primary mt-1">•</span>
-                          {improvement}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </div>
-              )}
-
-              {/* Action Button */}
-              {result.status === "completed" && (
-                <div className="pt-2">
-                  <Button variant="outline" size="sm">
-                    View Detailed Report
-                  </Button>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/dashboard/overview-content.jsx b/src/components/dashboard/overview-content.jsx
deleted file mode 100644
index 2577ef5..0000000
--- a/src/components/dashboard/overview-content.jsx
+++ /dev/null
@@ -1,390 +0,0 @@
-import { useEffect, useState } from "react";
-import { useLearner } from "../../context/LearnerContext";
-import { dashboardAPI } from "../../lib/api";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../ui/card";
-import Button from "../common/Button";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import { TrendingUp, BookOpen, MessageSquare, Coins } from "lucide-react";
-
-const normalizeScoreToPercent = (value) => {
-  if (typeof value !== "number" || Number.isNaN(value)) return null;
-  // backend stores Float; could be 0..1 or 0..100 depending on implementation
-  const v = value <= 1 ? value * 100 : value;
-  return Math.max(0, Math.min(100, v));
-};
-
-const formatScore = (value) => {
-  const pct = normalizeScoreToPercent(value);
-  if (pct === null) return "N/A";
-  return `${Math.round(pct)}%`;
-};
-
-const chartBlue = "#2563eb"; // tailwind blue-600
-const chartBlueLight = "#60a5fa"; // tailwind blue-400
-
-export function OverviewContent() {
-  const { learnerProfile, tokens, fetchTokens } = useLearner();
-  const [stats, setStats] = useState({
-    avgScore: 0,
-    totalInterviews: 0,
-    completedInterviews: 0,
-    skillsTracked: 0,
-  });
-  const [expandedFeedback, setExpandedFeedback] = useState({});
-
-  const toggleFeedback = (interviewId) => {
-    setExpandedFeedback((prev) => ({
-      ...prev,
-      [interviewId]: !prev[interviewId],
-    }));
-  };
-
-  useEffect(() => {
-    const fetchDashboardStats = async () => {
-      try {
-        const response = await dashboardAPI.getStats();
-        if (response.success) {
-          setStats((prev) => ({
-            ...prev,
-            totalInterviews: Number(response?.data?.interviewSessions || 0),
-            skillsTracked: Number(response?.data?.skillsTracked || 0),
-          }));
-        }
-      } catch (error) {
-        console.error("Failed to fetch dashboard stats:", error);
-      }
-    };
-
-    fetchDashboardStats();
-    fetchTokens(); // Ensure tokens are perfectly synced on dashboard load
-  }, []);
-
-  useEffect(() => {
-    if (learnerProfile) {
-      const interviews = learnerProfile.interviewsPracticed || [];
-      const scoredInterviews = interviews.filter(
-        (i) => normalizeScoreToPercent(i?.overallScore) !== null,
-      );
-      const avgOverall =
-        scoredInterviews.length > 0
-          ? scoredInterviews.reduce(
-              (sum, i) => sum + normalizeScoreToPercent(i.overallScore),
-              0,
-            ) / scoredInterviews.length
-          : 0;
-
-      setStats((prev) => ({
-        ...prev,
-        avgScore: avgOverall > 0 ? Math.round(avgOverall * 10) / 10 : 0,
-        completedInterviews: interviews.length,
-      }));
-    }
-  }, [learnerProfile]);
-
-  // Prepare skills chart data
-  const skillsChartData = (learnerProfile?.skills || [])
-    .slice(0, 8)
-    .map((skill) => ({ skill }));
-
-  const recentInterview = (learnerProfile?.interviewsPracticed || [])
-    .slice()
-    .sort(
-      (a, b) =>
-        new Date(b?.completedAt || b?.createdAt || b?.startedAt || 0) -
-        new Date(a?.completedAt || a?.createdAt || a?.startedAt || 0),
-    )[0];
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight text-foreground">
-          Welcome back, {learnerProfile?.name || "Learner"}!
-        </h1>
-        <p className="text-muted-foreground mt-1">
-          {learnerProfile?.role || "Complete your profile to get started"}
-        </p>
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
-        <Card className="bg-white border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Available Tokens
-            </CardTitle>
-            <Coins className="h-4 w-4 text-blue-600" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {tokens !== null ? tokens : "..."} 🪙
-            </div>
-            <p className="text-xs text-muted-foreground mt-1 text-blue-600 font-medium">
-              Ready for {tokens !== null ? Math.floor(tokens / 10) : 0}{" "}
-              interviews
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card className="bg-white border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Average Score</CardTitle>
-            <TrendingUp className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-foreground">
-              {stats.avgScore > 0 ? `${Math.round(stats.avgScore)}%` : "N/A"}
-            </div>
-            <p className="text-xs text-muted-foreground mt-1">
-              Based on your recent activity
-            </p>
-
-            {recentInterview && (
-              <div className="mt-4 grid grid-cols-2 gap-2 text-xs">
-                <div className="rounded-md border border-slate-200 bg-slate-50 px-2 py-1">
-                  <span className="text-muted-foreground">Tech</span>
-                  <div className="font-semibold text-foreground">
-                    {formatScore(recentInterview.technicalScore)}
-                  </div>
-                </div>
-                <div className="rounded-md border border-slate-200 bg-slate-50 px-2 py-1">
-                  <span className="text-muted-foreground">Comm</span>
-                  <div className="font-semibold text-foreground">
-                    {formatScore(recentInterview.communicationScore)}
-                  </div>
-                </div>
-                <div className="rounded-md border border-slate-200 bg-slate-50 px-2 py-1">
-                  <span className="text-muted-foreground">Problem</span>
-                  <div className="font-semibold text-foreground">
-                    {formatScore(recentInterview.problemSolvingScore)}
-                  </div>
-                </div>
-                <div className="rounded-md border border-slate-200 bg-slate-50 px-2 py-1">
-                  <span className="text-muted-foreground">Overall</span>
-                  <div className="font-semibold text-foreground">
-                    {formatScore(recentInterview.overallScore)}
-                  </div>
-                </div>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        <Card className="bg-white border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Skills Tracked
-            </CardTitle>
-            <BookOpen className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-foreground">
-              {stats.skillsTracked || learnerProfile?.skills?.length || 0}
-            </div>
-            <p className="text-xs text-muted-foreground mt-1">
-              {learnerProfile?.experience || "Set your experience level"}
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card className="bg-white border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Interview Sessions
-            </CardTitle>
-            <MessageSquare className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-foreground">
-              {stats.totalInterviews}
-            </div>
-            <p className="text-xs text-muted-foreground mt-1">
-              <span className="text-accent font-medium">
-                {/* Just showing total for now as "completed" count logic might differ */}
-                {stats.completedInterviews}
-              </span>{" "}
-              feedback received
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Charts */}
-      {(learnerProfile?.skills?.length || 0) > 0 && (
-        <div className="grid gap-6 lg:grid-cols-2">
-          {/* Skills Progress Chart */}
-          {(learnerProfile?.skills?.length || 0) > 0 && (
-            <Card className="bg-white border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
-              <CardHeader>
-                <CardTitle>Your Tech Stack</CardTitle>
-                <CardDescription>Skills you're tracking</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <ResponsiveContainer width="100%" height={300}>
-                  <BarChart data={skillsChartData} layout="vertical">
-                    <CartesianGrid
-                      strokeDasharray="3 3"
-                      stroke="#e2e8f0"
-                      opacity={0.8}
-                    />
-                    <XAxis type="number" domain={[0, 1]} hide />
-                    <YAxis
-                      dataKey="skill"
-                      type="category"
-                      width={140}
-                      tick={{
-                        fill: "#334155",
-                        fontSize: 12,
-                      }}
-                      axisLine={false}
-                      tickLine={false}
-                    />
-                    <Tooltip
-                      wrapperStyle={{ zIndex: 50 }}
-                      contentStyle={{
-                        backgroundColor: "#ffffff",
-                        border: "1px solid #e2e8f0",
-                        borderRadius: "10px",
-                        color: "#0f172a",
-                        boxShadow:
-                          "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.08)",
-                      }}
-                      formatter={() => null}
-                      labelFormatter={(label) => `Skill: ${label}`}
-                    />
-                    <Bar
-                      dataKey={() => 1}
-                      fill={chartBlue}
-                      activeBar={{ fill: chartBlueLight }}
-                      radius={[0, 8, 8, 0]}
-                    />
-                  </BarChart>
-                </ResponsiveContainer>
-
-                <p className="mt-3 text-xs text-muted-foreground">
-                  This list is based on the skills in your profile.
-                </p>
-              </CardContent>
-            </Card>
-          )}
-        </div>
-      )}
-
-      {/* Recent Interview Feedback */}
-      {(learnerProfile?.interviewsPracticed || []).length > 0 && (
-        <Card className="bg-white border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
-          <CardHeader>
-            <CardTitle>Recent Interview Feedback</CardTitle>
-            <CardDescription>
-              Summary of your latest interview sessions
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {(learnerProfile?.interviewsPracticed || [])
-                .slice(0, 5)
-                .map((interview, index) => (
-                  <div
-                    key={interview.id || index}
-                    className="flex flex-col gap-2 rounded-lg border border-slate-200 p-4 hover:bg-slate-50 transition-colors"
-                  >
-                    <div className="flex items-start justify-between">
-                      <div className="space-y-1">
-                        <h4 className="font-semibold text-foreground">
-                          {interview.role || "N/A"} -{" "}
-                          {interview.interviewType || "Interview"}
-                        </h4>
-                        <p className="text-sm text-muted-foreground">
-                          {new Date(
-                            interview.createdAt || interview.startedAt,
-                          ).toLocaleDateString()}
-                        </p>
-                      </div>
-                      {interview.overallScore && (
-                        <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
-                          {formatScore(interview.overallScore)}
-                        </span>
-                      )}
-                    </div>
-                    <div className="space-y-2">
-                      {interview.feedback ? (
-                        <>
-                          <p
-                            className={`text-sm text-muted-foreground ${
-                              expandedFeedback[interview.id]
-                                ? ""
-                                : "line-clamp-2"
-                            }`}
-                          >
-                            {interview.feedback}
-                          </p>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => toggleFeedback(interview.id)}
-                            className="text-xs cursor-pointer"
-                          >
-                            {expandedFeedback[interview.id]
-                              ? "Show Less"
-                              : "Show Full Feedback"}
-                          </Button>
-                        </>
-                      ) : (
-                        <div className="text-sm text-muted-foreground italic">
-                          No feedback available for this interview
-                        </div>
-                      )}
-                    </div>
-                    {interview.strengths && interview.strengths.length > 0 && (
-                      <div className="flex flex-wrap gap-1">
-                        {interview.strengths.slice(0, 3).map((strength, i) => (
-                          <span
-                            key={i}
-                            className="rounded-md bg-green-500/10 px-2 py-0.5 text-xs text-green-700 dark:text-green-400"
-                          >
-                            {strength}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Empty State */}
-      {stats.totalInterviews === 0 && (
-        <Card>
-          <CardContent className="flex flex-col items-center justify-center py-12">
-            <BookOpen className="h-16 w-16 text-muted-foreground mb-4" />
-            <h3 className="text-lg font-semibold text-foreground mb-2">
-              Ready to start your learning journey?
-            </h3>
-            <p className="text-muted-foreground text-center max-w-md">
-              Practice an interview to get personalized feedback and track your
-              progress.
-            </p>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
-}
-
-export default OverviewContent;
diff --git a/src/components/layout/Navbar.jsx b/src/components/layout/Navbar.jsx
deleted file mode 100644
index 58b25e3..0000000
--- a/src/components/layout/Navbar.jsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { useState, useRef, useEffect } from "react";
-import { useLearner } from "../../context/LearnerContext";
-
-export default function Navbar() {
-  const { isAuthenticated, learnerProfile, authUser, logout, tokens } =
-    useLearner();
-  const navigate = useNavigate();
-  const [showDropdown, setShowDropdown] = useState(false);
-  const dropdownRef = useRef(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setShowDropdown(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  const handleLogout = () => {
-    logout();
-    setShowDropdown(false);
-    navigate("/login");
-  };
-
-  if (!isAuthenticated || !learnerProfile) {
-    return null;
-  }
-
-  const userAvatar = authUser?.picture || learnerProfile?.avatar;
-  const userName = learnerProfile?.name || "Learner";
-  const userInitials = userName
-    .split(" ")
-    .map((n) => n[0])
-    .join("")
-    .toUpperCase()
-    .slice(0, 2);
-
-  return (
-    <nav className="bg-card border-b border-border sticky top-0 z-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-end h-16">
-          <div className="flex items-center gap-4">
-            {tokens !== null && (
-              <div className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-700 rounded-full font-medium text-sm">
-                <span>🪙</span>
-                <span>{tokens} Tokens</span>
-              </div>
-            )}
-            <div className="relative" ref={dropdownRef}>
-              <button
-                onClick={() => setShowDropdown(!showDropdown)}
-                className="flex items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer"
-              >
-                <span className="text-sm text-muted-foreground hidden sm:block">
-                  {userName}
-                </span>
-                {userAvatar ? (
-                  <img
-                    src={userAvatar}
-                    alt={userName}
-                    className="w-8 h-8 rounded-full border-2 border-primary object-cover cursor-pointer"
-                  />
-                ) : (
-                  <div className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-semibold cursor-pointer">
-                    {userInitials}
-                  </div>
-                )}
-              </button>
-
-              {showDropdown && (
-                <div className="absolute right-0 mt-2 w-48 bg-card border border-border rounded-lg shadow-lg py-1 z-50">
-                  <div className="px-4 py-2 border-b border-border">
-                    <p className="text-sm font-medium text-foreground">
-                      {userName}
-                    </p>
-                    <p className="text-xs text-muted-foreground truncate">
-                      {learnerProfile?.email}
-                    </p>
-                  </div>
-                  <button
-                    onClick={() => {
-                      setShowDropdown(false);
-                      navigate("/dashboard");
-                    }}
-                    className="w-full text-left px-4 py-2 text-sm text-foreground hover:bg-muted transition-colors cursor-pointer"
-                  >
-                    Dashboard
-                  </button>
-                  <button
-                    onClick={handleLogout}
-                    className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-muted transition-colors cursor-pointer"
-                  >
-                    Logout
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-}
diff --git a/src/data/continueContent.js b/src/data/continueContent.js
deleted file mode 100644
index 7994626..0000000
--- a/src/data/continueContent.js
+++ /dev/null
@@ -1,71 +0,0 @@
-
-export const dsaHighlight = {
-  title: "Striver's A2Z DSA Sheet",
-  description: "Comprehensive DSA preparation sheet covering all important topics",
-  ctaLabel: "Visit Resource",
-  url: "https://takeuforward.org/strivers-a2z-dsa-course/",
-}
-
-export const dsaPracticeResources = [
-  {
-    id: "leetcode",
-    title: "LeetCode",
-    description: "Practice coding problems and prepare for technical interviews",
-    url: "https://leetcode.com/",
-  },
-  {
-    id: "codeforces",
-    title: "Codeforces",
-    description: "Competitive programming platform with regular contests",
-    url: "https://codeforces.com/",
-  },
-  {
-    id: "hackerrank",
-    title: "HackerRank",
-    description: "Practice coding challenges and prepare for interviews",
-    url: "https://www.hackerrank.com/",
-  },
-]
-
-export const webDevFoundation = {
-  title: "Foundations (Beginner Level)",
-  description: "Master the core building blocks of web interfaces.",
-  modules: [
-    {
-      id: "html",
-      title: "Learn HTML (Structure of Web Pages)",
-      keyTopics: [
-        "Basic Structure (<!DOCTYPE html>, <html>, <head>, <body>)",
-        "Semantic Tags (<header>, <nav>, <main>, <section>, <article>, <footer>)",
-        "Forms & Inputs (<form>, <input>, <select>, <textarea>, <button>)",
-        "Tables (<table>, <thead>, <tbody>, <tr>, <td>, <th>)",
-        "Links & Media (<a>, <img>, <video>, <audio>)",
-      ],
-      resources: [
-        { title: "MDN HTML Guide", url: "https://developer.mozilla.org/en-US/docs/Web/HTML" },
-  { title: "HTML Full Course - FreeCodeCamp", url: "https://www.freecodecamp.org/news/html-full-course/" },
-  { title: "HTML Crash Course - Traversy Media", url: "https://www.youtube.com/watch?v=UB1O30fR-EE" },
-        { title: "HTML cheatsheet", url: "https://htmlcheatsheet.com/" },
-      ],
-      practiceTask: "Create a Personal Portfolio Page with a navbar, bio section, skills table, and contact form.",
-    },
-    {
-      id: "css",
-      title: "Learn CSS (Styling the Web)",
-      keyTopics: [
-        "Box Model (margin, padding, border, width, height)",
-        "CSS Grid & Flexbox for modern layouts",
-        "Typography & color systems for accessible design",
-        "Transitions and animations for micro-interactions",
-        "Responsive design patterns and media queries",
-      ],
-      resources: [
-        { title: "MDN CSS Guide", url: "https://developer.mozilla.org/en-US/docs/Web/CSS" },
-  { title: "CSS Crash Course - Traversy Media", url: "https://www.youtube.com/watch?v=1Rs2ND1ryYc" },
-        { title: "Every Layout", url: "https://every-layout.dev/" },
-        { title: "Smashing Magazine CSS", url: "https://www.smashingmagazine.com/category/css" },
-      ],
-      practiceTask: "Build a responsive landing page with grid-based sections, typography hierarchy, and interactive buttons.",
-    },
-  ],
-}
\ No newline at end of file
diff --git a/src/data/mockData.js b/src/data/mockData.js
deleted file mode 100644
index 44ec9b7..0000000
--- a/src/data/mockData.js
+++ /dev/null
@@ -1,247 +0,0 @@
-// Mock data for EduNerve AI platform
-
-export const careerPaths = {
-  "Software Engineer": [
-    "Data Structures",
-    "Algorithms",
-    "System Design",
-    "Object-Oriented Programming",
-    "Database Management",
-    "Web Development",
-    "API Design",
-    "Testing & Debugging",
-  ],
-  "Data Scientist": [
-    "Statistics",
-    "Machine Learning",
-    "Python Programming",
-    "Data Visualization",
-    "SQL",
-    "Deep Learning",
-    "Feature Engineering",
-    "Model Deployment",
-  ],
-  "Product Manager": [
-    "Product Strategy",
-    "User Research",
-    "Agile Methodologies",
-    "Roadmap Planning",
-    "Stakeholder Management",
-    "Market Analysis",
-    "Metrics & Analytics",
-    "Communication Skills",
-  ],
-  "UI/UX Designer": [
-    "Design Principles",
-    "User Research",
-    "Wireframing",
-    "Prototyping",
-    "Visual Design",
-    "Interaction Design",
-    "Usability Testing",
-    "Design Systems",
-  ],
-}
-
-export const learningGoals = [
-  "Get job-ready in 3 months",
-  "Improve technical skills",
-  "Prepare for interviews",
-  "Learn new technologies",
-  "Career transition",
-  "Skill enhancement",
-]
-
-export const content = {
-  "Data Structures": {
-    lms: {
-      title: "Data Structures Fundamentals",
-      description: "Master essential data structures for coding interviews",
-      modules: [
-        { id: 1, title: "Arrays & Strings", duration: "45 min", completed: false },
-        { id: 2, title: "Linked Lists", duration: "60 min", completed: false },
-        { id: 3, title: "Stacks & Queues", duration: "50 min", completed: false },
-        { id: 4, title: "Trees & Graphs", duration: "90 min", completed: false },
-      ],
-    },
-    quiz: {
-      title: "Data Structures Quiz",
-      questions: [
-        {
-          id: 1,
-          question: "What is the time complexity of accessing an element in an array by index?",
-          options: ["O(1)", "O(n)", "O(log n)", "O(n²)"],
-          correct: 0,
-        },
-        {
-          id: 2,
-          question: "Which data structure uses LIFO (Last In First Out)?",
-          options: ["Queue", "Stack", "Array", "Linked List"],
-          correct: 1,
-        },
-        {
-          id: 3,
-          question: "What is the best case time complexity for searching in a Binary Search Tree?",
-          options: ["O(n)", "O(1)", "O(log n)", "O(n log n)"],
-          correct: 2,
-        },
-      ],
-    },
-    interview: {
-      title: "Data Structures Interview Prep",
-      questions: [
-        "Explain the difference between an array and a linked list.",
-        "How would you implement a stack using queues?",
-        "Describe how a hash table works and its time complexity.",
-        "What is the difference between BFS and DFS?",
-      ],
-    },
-  },
-  Algorithms: {
-    lms: {
-      title: "Algorithm Design & Analysis",
-      description: "Learn to design efficient algorithms",
-      modules: [
-        { id: 1, title: "Sorting Algorithms", duration: "60 min", completed: false },
-        { id: 2, title: "Searching Algorithms", duration: "45 min", completed: false },
-        { id: 3, title: "Dynamic Programming", duration: "90 min", completed: false },
-        { id: 4, title: "Greedy Algorithms", duration: "75 min", completed: false },
-      ],
-    },
-    quiz: {
-      title: "Algorithms Quiz",
-      questions: [
-        {
-          id: 1,
-          question: "What is the average time complexity of Quick Sort?",
-          options: ["O(n)", "O(n log n)", "O(n²)", "O(log n)"],
-          correct: 1,
-        },
-        {
-          id: 2,
-          question: "Which algorithm uses divide and conquer strategy?",
-          options: ["Bubble Sort", "Merge Sort", "Selection Sort", "Insertion Sort"],
-          correct: 1,
-        },
-        {
-          id: 3,
-          question: "What is the space complexity of recursive Fibonacci?",
-          options: ["O(1)", "O(n)", "O(log n)", "O(n²)"],
-          correct: 1,
-        },
-      ],
-    },
-    interview: {
-      title: "Algorithms Interview Prep",
-      questions: [
-        "Explain the difference between dynamic programming and greedy algorithms.",
-        "How does binary search work? What are its prerequisites?",
-        "Describe the merge sort algorithm and its time complexity.",
-        "What is memoization and how does it optimize recursive algorithms?",
-      ],
-    },
-  },
-  "System Design": {
-    lms: {
-      title: "System Design Principles",
-      description: "Design scalable distributed systems",
-      modules: [
-        { id: 1, title: "Scalability Basics", duration: "60 min", completed: false },
-        { id: 2, title: "Load Balancing", duration: "50 min", completed: false },
-        { id: 3, title: "Caching Strategies", duration: "55 min", completed: false },
-        { id: 4, title: "Database Design", duration: "70 min", completed: false },
-      ],
-    },
-    quiz: {
-      title: "System Design Quiz",
-      questions: [
-        {
-          id: 1,
-          question: "What is horizontal scaling?",
-          options: [
-            "Adding more power to existing servers",
-            "Adding more servers to the system",
-            "Optimizing code performance",
-            "Reducing database queries",
-          ],
-          correct: 1,
-        },
-        {
-          id: 2,
-          question: "Which caching strategy removes the least recently used item?",
-          options: ["FIFO", "LIFO", "LRU", "LFU"],
-          correct: 2,
-        },
-        {
-          id: 3,
-          question: "What is the CAP theorem?",
-          options: [
-            "Consistency, Availability, Partition tolerance",
-            "Cache, API, Performance",
-            "Compute, Allocate, Process",
-            "Create, Access, Persist",
-          ],
-          correct: 0,
-        },
-      ],
-    },
-    interview: {
-      title: "System Design Interview Prep",
-      questions: [
-        "Design a URL shortening service like bit.ly",
-        "How would you design a social media feed?",
-        "Explain how you would design a distributed cache",
-        "Design a rate limiting system for an API",
-      ],
-    },
-  },
-  "Machine Learning": {
-    lms: {
-      title: "Machine Learning Fundamentals",
-      description: "Introduction to ML algorithms and concepts",
-      modules: [
-        { id: 1, title: "Supervised Learning", duration: "75 min", completed: false },
-        { id: 2, title: "Unsupervised Learning", duration: "60 min", completed: false },
-        { id: 3, title: "Neural Networks", duration: "90 min", completed: false },
-        { id: 4, title: "Model Evaluation", duration: "50 min", completed: false },
-      ],
-    },
-    quiz: {
-      title: "Machine Learning Quiz",
-      questions: [
-        {
-          id: 1,
-          question: "What is overfitting in machine learning?",
-          options: [
-            "Model performs well on training data but poorly on test data",
-            "Model performs poorly on both training and test data",
-            "Model performs well on test data but poorly on training data",
-            "Model has too few parameters",
-          ],
-          correct: 0,
-        },
-        {
-          id: 2,
-          question: "Which algorithm is used for classification?",
-          options: ["Linear Regression", "K-Means", "Logistic Regression", "PCA"],
-          correct: 2,
-        },
-        {
-          id: 3,
-          question: "What does the learning rate control in gradient descent?",
-          options: ["Number of iterations", "Step size in parameter updates", "Number of features", "Batch size"],
-          correct: 1,
-        },
-      ],
-    },
-    interview: {
-      title: "Machine Learning Interview Prep",
-      questions: [
-        "Explain the bias-variance tradeoff",
-        "What is the difference between L1 and L2 regularization?",
-        "How does a decision tree work?",
-        "Explain cross-validation and why it's important",
-      ],
-    },
-  },
-}
diff --git a/src/pages/InterviewHubPage.jsx b/src/pages/InterviewHubPage.jsx
deleted file mode 100644
index d708898..0000000
--- a/src/pages/InterviewHubPage.jsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import { useState } from "react";
-import {
-  MessageSquare,
-  Calendar,
-  CheckCircle2,
-  ArrowRight,
-  Menu,
-} from "lucide-react";
-
-import LearningSidebar from "../components/layout/LearningSidebar";
-import Button from "../components/common/Button";
-import Badge from "../components/common/Badge";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-} from "../components/ui/card";
-
-const technicalQuestions = [
-  {
-    id: 1,
-    question:
-      "Explain the difference between var, let, and const in JavaScript",
-    difficulty: "Beginner",
-    category: "JavaScript",
-  },
-  {
-    id: 2,
-    question: "What is the time complexity of common sorting algorithms?",
-    difficulty: "Intermediate",
-    category: "Algorithms",
-  },
-  {
-    id: 3,
-    question: "How does React's virtual DOM work?",
-    difficulty: "Intermediate",
-    category: "React",
-  },
-  {
-    id: 4,
-    question: "Explain database indexing and when to use it",
-    difficulty: "Advanced",
-    category: "Database",
-  },
-];
-
-const behavioralQuestions = [
-  {
-    id: 1,
-    question: "Tell me about a time you faced a challenging project deadline",
-    category: "Time Management",
-  },
-  {
-    id: 2,
-    question:
-      "Describe a situation where you had to work with a difficult team member",
-    category: "Teamwork",
-  },
-  {
-    id: 3,
-    question: "How do you handle constructive criticism?",
-    category: "Growth Mindset",
-  },
-  {
-    id: 4,
-    question: "Share an example of when you took initiative on a project",
-    category: "Leadership",
-  },
-];
-
-const hrQuestions = [
-  {
-    id: 1,
-    question: "Why do you want to work for our company?",
-    category: "Motivation",
-  },
-  {
-    id: 2,
-    question: "Where do you see yourself in 5 years?",
-    category: "Career Goals",
-  },
-  {
-    id: 3,
-    question: "What are your salary expectations?",
-    category: "Compensation",
-  },
-  {
-    id: 4,
-    question: "Why are you leaving your current position?",
-    category: "Career Change",
-  },
-];
-
-export default function InterviewHubPage() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState("technical");
-
-  const renderQuestions = (questions, options = {}) => (
-    <div className="grid grid-cols-1 gap-5">
-      {questions.map((question) => (
-        <Card
-          key={question.id}
-          className="bg-white border border-border rounded-2xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
-        >
-          <CardHeader className="pb-4">
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex-1 space-y-3">
-                <div className="flex items-center gap-2">
-                  <Badge
-                    variant="secondary"
-                    className="text-xs font-semibold px-3 py-1 rounded-full bg-blue-100 text-blue-600"
-                  >
-                    {question.category}
-                  </Badge>
-                  {question.difficulty && (
-                    <Badge
-                      variant="outline"
-                      className="text-xs font-semibold px-3 py-1 rounded-full"
-                    >
-                      {question.difficulty}
-                    </Badge>
-                  )}
-                </div>
-                <CardTitle className="text-lg leading-relaxed font-semibold">
-                  {question.question}
-                </CardTitle>
-              </div>
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-100">
-                <MessageSquare className="h-5 w-5 text-slate-600" />
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <Button
-              variant={options.buttonVariant || "ghost"}
-              size="sm"
-              className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 font-medium transition-colors"
-            >
-              {options.buttonLabel || "View Answer & Tips"}
-            </Button>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  );
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 text-foreground">
-      <LearningSidebar
-        open={sidebarOpen}
-        onClose={() => setSidebarOpen(false)}
-      />
-
-      <div className="flex min-h-screen flex-col lg:pl-72">
-        <header className="sticky top-0 z-30 flex items-center gap-3 border-b border-border bg-white/80 backdrop-blur px-4 py-4 shadow-sm lg:hidden">
-          <button
-            type="button"
-            className="inline-flex h-11 w-11 items-center justify-center rounded-lg border border-border hover:bg-slate-100 transition-colors"
-            onClick={() => setSidebarOpen(true)}
-            aria-label="Open sidebar"
-          >
-            <Menu className="h-5 w-5" />
-          </button>
-          <div>
-            <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Prepare
-            </p>
-            <p className="text-base font-semibold">Interview Preparation</p>
-          </div>
-        </header>
-
-        <main className="flex-1 px-4 py-10 sm:px-8 lg:px-12">
-          <div className="mx-auto w-full max-w-6xl">
-            <div className="mb-12 hidden lg:block">
-              <p className="text-sm font-semibold uppercase tracking-widest text-primary">
-                Prepare
-              </p>
-              <h1 className="mt-3 text-4xl font-bold sm:text-5xl">
-                Interview Preparation
-              </h1>
-              <p className="mt-4 max-w-3xl text-lg leading-relaxed text-muted-foreground">
-                Prepare for your next interview with our comprehensive question
-                bank and mock interview sessions. Practice makes perfect.
-              </p>
-            </div>
-
-            <Card className="mb-12 border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-white rounded-2xl shadow-lg">
-              <CardHeader className="pb-4">
-                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-                  <div className="space-y-3">
-                    <CardTitle className="text-2xl font-bold">
-                      Book a Mock Interview
-                    </CardTitle>
-                    <CardDescription className="text-base leading-relaxed text-muted-foreground">
-                      Practice with AI interviewer and get personalized feedback
-                      on your performance.
-                    </CardDescription>
-                  </div>
-                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
-                    <Calendar className="h-6 w-6 text-blue-600" />
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent className="space-y-6">
-                <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
-                  {[
-                    "1-on-1 AI sessions",
-                    "Instant feedback",
-                    "Practice anytime",
-                  ].map((item) => (
-                    <div
-                      key={item}
-                      className="flex items-center gap-2 text-sm text-muted-foreground"
-                    >
-                      <CheckCircle2 className="h-5 w-5 text-green-600" />
-                      {item}
-                    </div>
-                  ))}
-                </div>
-                <Button
-                  size="lg"
-                  className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-md hover:shadow-lg transition-all"
-                >
-                  Schedule Mock Interview
-                  <ArrowRight className="ml-2 h-5 w-5" />
-                </Button>
-              </CardContent>
-            </Card>
-
-            <section className="mb-8 flex flex-wrap items-center justify-between gap-4">
-              <div>
-                <h2 className="text-2xl font-bold">Question Bank</h2>
-                <p className="text-muted-foreground">
-                  Switch between technical, behavioral, and HR prompts.
-                </p>
-              </div>
-              <div className="inline-flex rounded-xl border border-border bg-white p-1.5 shadow-sm">
-                {[
-                  { value: "technical", label: "Technical" },
-                  { value: "behavioral", label: "Behavioral" },
-                  { value: "hr", label: "HR" },
-                ].map((tab) => (
-                  <button
-                    key={tab.value}
-                    type="button"
-                    onClick={() => setActiveTab(tab.value)}
-                    className={`rounded-lg px-5 py-2.5 text-sm font-semibold transition-all ${
-                      activeTab === tab.value
-                        ? "bg-blue-600 text-white shadow-md"
-                        : "text-muted-foreground hover:text-foreground hover:bg-slate-50"
-                    }`}
-                  >
-                    {tab.label}
-                  </button>
-                ))}
-              </div>
-            </section>
-
-            {activeTab === "technical" && renderQuestions(technicalQuestions)}
-
-            {activeTab === "behavioral" &&
-              renderQuestions(behavioralQuestions, {
-                buttonLabel: "View Answer Framework",
-                buttonVariant: "ghost",
-              })}
-
-            {activeTab === "hr" &&
-              renderQuestions(hrQuestions, {
-                buttonLabel: "View Best Practices",
-                buttonVariant: "ghost",
-              })}
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/InterviewPracticePage.jsx b/src/pages/InterviewPracticePage.jsx
deleted file mode 100644
index 5c37a7d..0000000
--- a/src/pages/InterviewPracticePage.jsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { useState } from "react";
-import { useParams, useNavigate, Link } from "react-router-dom";
-import { useLearner } from "../context/LearnerContext";
-import { content } from "../data/mockData";
-import Button from "../components/common/Button";
-
-export default function InterviewPracticePage() {
-  const { topic } = useParams();
-  const navigate = useNavigate();
-  const { practiceInterview } = useLearner();
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [responses, setResponses] = useState({});
-  const [showComplete, setShowComplete] = useState(false);
-
-  const topicContent = content[topic];
-
-  if (!topicContent) {
-    return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-foreground mb-4">
-            Interview prep not found
-          </h1>
-          <Link to="/interviews">
-            <Button>Back to Interviews</Button>
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  const interview = topicContent.interview;
-  const questions = interview.questions;
-
-  const handleResponse = (questionIndex, response) => {
-    setResponses({ ...responses, [questionIndex]: response });
-  };
-
-  const handleNext = () => {
-    if (currentQuestion < questions.length - 1) {
-      setCurrentQuestion(currentQuestion + 1);
-    } else {
-      handleComplete();
-    }
-  };
-
-  const handleComplete = () => {
-    practiceInterview(topic, responses);
-    setShowComplete(true);
-  };
-
-  if (showComplete) {
-    return (
-      <div className="min-h-screen bg-background">
-        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <div className="bg-card border border-border rounded-lg p-8 text-center">
-            <div className="text-6xl mb-4">🎉</div>
-            <h1 className="text-3xl font-bold text-foreground mb-2">
-              Practice Complete!
-            </h1>
-            <p className="text-muted-foreground mb-8">
-              Great job practicing {questions.length} interview questions!
-            </p>
-
-            <div className="bg-muted rounded-lg p-6 mb-8 text-left">
-              <h3 className="font-semibold text-foreground mb-4">
-                Tips for your next interview:
-              </h3>
-              <ul className="space-y-2 text-sm text-muted-foreground">
-                <li>• Practice explaining your thought process clearly</li>
-                <li>• Use specific examples from your experience</li>
-                <li>• Ask clarifying questions when needed</li>
-                <li>• Stay calm and take your time to think</li>
-              </ul>
-            </div>
-
-            <div className="flex gap-4 justify-center">
-              <Button onClick={() => navigate("/interviews")}>
-                Back to Interviews
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => window.location.reload()}
-              >
-                Practice Again
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const question = questions[currentQuestion];
-  const progress = ((currentQuestion + 1) / questions.length) * 100;
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <Link
-          to="/interviews"
-          className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground mb-6 transition-colors"
-        >
-          <ArrowRight className="h-4 w-4 rotate-180" />
-          Back
-        </Link>
-
-        <div className="bg-white border border-border rounded-2xl p-8 shadow-xl">
-          <div className="mb-8">
-            <div className="flex items-center justify-between text-sm font-medium text-muted-foreground mb-3">
-              <span>
-                Question {currentQuestion + 1} of {questions.length}
-              </span>
-              <span>{Math.round(progress)}%</span>
-            </div>
-            <div className="w-full bg-slate-200 rounded-full h-2.5">
-              <div
-                className="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
-                style={{ width: `${progress}%` }}
-              />
-            </div>
-          </div>
-
-          <div className="mb-8">
-            <div className="flex items-start gap-4 mb-6">
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 flex-shrink-0">
-                <span className="text-2xl">🎤</span>
-              </div>
-              <div>
-                <h2 className="text-2xl font-bold text-foreground mb-2">
-                  {question}
-                </h2>
-                <p className="text-sm text-muted-foreground">
-                  Take your time to think through your answer. Practice
-                  explaining your thought process clearly.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="mb-8">
-            <label className="block text-sm font-semibold text-foreground mb-3">
-              Your Response
-            </label>
-            <textarea
-              value={responses[currentQuestion] || ""}
-              onChange={(e) => handleResponse(currentQuestion, e.target.value)}
-              placeholder="Type your answer here..."
-              rows={10}
-              className="w-full px-4 py-3 bg-slate-50 border border-border rounded-xl text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
-            />
-          </div>
-
-          <div className="flex justify-between items-center gap-4">
-            <Button
-              variant="outline"
-              onClick={() =>
-                setCurrentQuestion(Math.max(0, currentQuestion - 1))
-              }
-              disabled={currentQuestion === 0}
-              className="px-6 disabled:opacity-50"
-            >
-              Previous
-            </Button>
-            <Button
-              onClick={handleNext}
-              disabled={!responses[currentQuestion]?.trim()}
-              className="px-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold disabled:opacity-50"
-            >
-              {currentQuestion === questions.length - 1 ? "Complete" : "Next"}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

From 708033d6253286ac34b4e8297bf6f41eb042e347 Mon Sep 17 00:00:00 2001
From: NSTKrishna <krishnagehlot936@gmail.com>
Date: Sat, 3 Oct 2026 16:21:19 +0530
Subject: [PATCH 02/10] Move to Tailwind v4 and plain JS, add Vitest and CI

- Replaces tailwind.config.js with the @tailwindcss/vite plugin; theme now
  lives in CSS rather than a JS config
- Converts the remaining TypeScript shims to JS (lib/utils.ts -> utils.js)
  and drops the unused ui/button.tsx
- Adds Vitest with a jsdom environment and a GitHub Actions workflow
- Ignores .env while keeping .env.example tracked, so the required
  VITE_API_URL is documented without shipping a value
---
 .env.example                 |    2 +
 .github/workflows/ci.yml     |   19 +
 .gitignore                   |   14 +-
 package-lock.json            | 2691 +++++++++++++++++++++++-----------
 package.json                 |   19 +-
 src/components/ui/button.tsx |   60 -
 src/lib/utils.js             |    6 +
 src/lib/utils.ts             |    6 -
 tailwind.config.js           |   22 -
 vitest.config.js             |    9 +
 10 files changed, 1921 insertions(+), 927 deletions(-)
 create mode 100644 .env.example
 create mode 100644 .github/workflows/ci.yml
 delete mode 100644 src/components/ui/button.tsx
 create mode 100644 src/lib/utils.js
 delete mode 100644 src/lib/utils.ts
 delete mode 100644 tailwind.config.js
 create mode 100644 vitest.config.js

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..8437445
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+# Base URL of the EduNerve backend API (must include /api)
+VITE_API_URL=http://localhost:3000/api
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..c07136e
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,19 @@
+name: CI
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+      - run: npm test
+      - run: npm run build
diff --git a/.gitignore b/.gitignore
index a68ad01..1d8b16c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,14 +5,17 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-lerna-debug.log*
-.env
-.env.example 
+
 node_modules
 dist
 dist-ssr
 *.local
 
+# Environment variables (keep .env.example tracked)
+.env
+.env.*
+!.env.example
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -22,5 +25,6 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw? 
-server/ 
+*.sw?
+coverage/
+.impeccable
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1fda442..20f65ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,22 +1,17 @@
 {
-  "name": "frontend",
-  "version": "0.0.0",
+  "name": "edunerve-ai-frontend",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
-      "version": "0.0.0",
+      "name": "edunerve-ai-frontend",
+      "version": "1.0.0",
       "dependencies": {
-        "@radix-ui/react-slot": "^1.2.3",
-        "@react-oauth/google": "^0.12.2",
         "@tailwindcss/vite": "^4.1.16",
         "@vapi-ai/web": "^2.5.0",
-        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "framer-motion": "^12.26.2",
         "lucide-react": "^0.552.0",
-        "motion": "^12.26.2",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-router-dom": "^7.9.5",
@@ -26,24 +21,78 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
-        "@types/react": "^19.1.16",
-        "@types/react-dom": "^19.1.9",
+        "@testing-library/react": "^16.3.3",
         "@vitejs/plugin-react": "^5.0.4",
         "eslint": "^9.36.0",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.22",
         "globals": "^16.4.0",
-        "vite": "^7.1.12"
+        "jsdom": "^30.1.1",
+        "vite": "^7.1.12",
+        "vitest": "^3.2.4"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-7.1.2.tgz",
+      "integrity": "sha512-99DHAnXDB5z6EEK+9GMpVI7Mw4oxj97dY5bpOzMnjADQWxI8rN6TvTduuFLUhUMlS7/CfVZ06tcZsus6cltnNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.4.1",
+        "@csstools/css-color-parser": "^4.2.4",
+        "@csstools/css-parser-algorithms": "^4.0.1",
+        "@csstools/css-tokenizer": "^4.0.2",
+        "lru-cache": "^11.5.3"
+      },
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "11.5.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.3.tgz",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "9.2.3",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-9.2.3.tgz",
+      "integrity": "sha512-MDKmPBa6CfNN1zAJroTl7Uc+nBbcNtfE/F24iROfZAtcLffEeY3IbHR8XeHH5dJBspMYTpAsjEYmnp3tAmoVxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.1.0",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.5.3"
+      },
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
+      "version": "11.5.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.3.tgz",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
-      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.29.7",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.1.1"
       },
@@ -52,9 +101,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
-      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -62,21 +111,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
-      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.5",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-module-transforms": "^7.28.3",
-        "@babel/helpers": "^7.28.4",
-        "@babel/parser": "^7.28.5",
-        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.5",
-        "@babel/types": "^7.28.5",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
         "@jridgewell/remapping": "^2.3.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
@@ -93,14 +142,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
-      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.5",
-        "@babel/types": "^7.28.5",
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -110,14 +159,14 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
-      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.27.2",
-        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
         "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
@@ -127,9 +176,9 @@
       }
     },
     "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -137,29 +186,29 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
-      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
-      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "@babel/traverse": "^7.28.3"
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -169,9 +218,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
-      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -179,9 +228,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -189,9 +238,9 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -199,9 +248,9 @@
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -209,27 +258,27 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
-      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.4"
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
-      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "version": "7.29.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.9.tgz",
+      "integrity": "sha512-CjXrNHTnvqBVqHgdBysY3vk2T8tpJHb5/RMeHJBTyVa9xgugCB0CJTx/3oO8RV2QRQP391RWpB7D6hLjm8V9uA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.5"
+        "@babel/types": "^7.29.8"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -239,13 +288,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
-      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz",
+      "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -255,13 +304,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
-      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz",
+      "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -271,42 +320,42 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
-      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
-      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/parser": "^7.27.2",
-        "@babel/types": "^7.27.1"
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
-      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
+      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.5",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.5",
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.5",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -314,23 +363,176 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
-      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.28.5"
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.2.tgz",
+      "integrity": "sha512-grhRy3OKmniaAEKXMjua5z/EODX0MSqBGjunw8+j/3HQjOnahs2AGhvEOIYVUWcU6ScApbhLhVrQTX8XqrMrow==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.4.2.tgz",
+      "integrity": "sha512-tL6LRF844sHjAKO7jt2w+uHo8Tocqpb9+KPUvIQETpR4RU87IaUzDuOV0QyzuQ37jmzFgwPHLLtLu/PDuH5qgg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.2",
+        "@csstools/css-tokenizer": "^4.0.2"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.2.5.tgz",
+      "integrity": "sha512-Qqbp5pjbMwoaErP2t5qne5QDVDr3G5243oNW8ev5zfyyoqbzrQKbYDpKP/cuo3xBkzwqZqpP/rChrJhBdyTX7g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.2",
+        "@csstools/css-calc": "^3.4.2"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.2",
+        "@csstools/css-tokenizer": "^4.0.2"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.2.tgz",
+      "integrity": "sha512-40cSKyMvK+tq4qz6Awrlye2WGuOKt3FwPgtGg6KTfbHOWNw+Rk1rzbAtZnZ6IBhsY491HLRnDXwoyBAijmmILA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.2"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.15.tgz",
+      "integrity": "sha512-J0u7HkVl2nzSlhsiTOp4AmwcUQ3D+mGEEKfBy/7To5/y7F2OHwyLrXfrhR0SMgr4p5Lo+eaMVSeai24zUcBIxA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.2.tgz",
+      "integrity": "sha512-OoKoR0f76dCY666JlcbhmVTs2drYj1GUXZTYTcbUgJjh9Nv41aFfZ21bPQTERm5+L5cBDo466NltB2lplS5GBw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
     "node_modules/@daily-co/daily-js": {
-      "version": "0.84.0",
-      "resolved": "https://registry.npmjs.org/@daily-co/daily-js/-/daily-js-0.84.0.tgz",
-      "integrity": "sha512-/ynXrMDDkRXhLlHxiFNf9QU5yw4ZGPr56wNARgja/Tiid71UIniundTavCNF5cMb2I1vNoMh7oEJ/q8stg/V7g==",
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@daily-co/daily-js/-/daily-js-0.87.0.tgz",
+      "integrity": "sha512-hWHdBDvJwDeg8unz+XG9hD7xamuFi5Jmsk89ASATKL4fdTDHplpxi4PG9aaPXzBZYYLTjuxUje1K7B5uUR+gzw==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
@@ -344,9 +546,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
-      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz",
+      "integrity": "sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==",
       "cpu": [
         "ppc64"
       ],
@@ -360,9 +562,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
-      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.2.tgz",
+      "integrity": "sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==",
       "cpu": [
         "arm"
       ],
@@ -376,9 +578,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
-      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.2.tgz",
+      "integrity": "sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==",
       "cpu": [
         "arm64"
       ],
@@ -392,9 +594,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
-      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.2.tgz",
+      "integrity": "sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==",
       "cpu": [
         "x64"
       ],
@@ -408,9 +610,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
-      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.2.tgz",
+      "integrity": "sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==",
       "cpu": [
         "arm64"
       ],
@@ -424,9 +626,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
-      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.2.tgz",
+      "integrity": "sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==",
       "cpu": [
         "x64"
       ],
@@ -440,9 +642,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==",
       "cpu": [
         "arm64"
       ],
@@ -456,9 +658,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
-      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.2.tgz",
+      "integrity": "sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==",
       "cpu": [
         "x64"
       ],
@@ -472,9 +674,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
-      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.2.tgz",
+      "integrity": "sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==",
       "cpu": [
         "arm"
       ],
@@ -488,9 +690,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
-      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.2.tgz",
+      "integrity": "sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==",
       "cpu": [
         "arm64"
       ],
@@ -504,9 +706,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
-      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.2.tgz",
+      "integrity": "sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==",
       "cpu": [
         "ia32"
       ],
@@ -520,9 +722,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
-      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.2.tgz",
+      "integrity": "sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==",
       "cpu": [
         "loong64"
       ],
@@ -536,9 +738,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
-      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.2.tgz",
+      "integrity": "sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==",
       "cpu": [
         "mips64el"
       ],
@@ -552,9 +754,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
-      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.2.tgz",
+      "integrity": "sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==",
       "cpu": [
         "ppc64"
       ],
@@ -568,9 +770,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
-      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.2.tgz",
+      "integrity": "sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==",
       "cpu": [
         "riscv64"
       ],
@@ -584,9 +786,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
-      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.2.tgz",
+      "integrity": "sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==",
       "cpu": [
         "s390x"
       ],
@@ -600,9 +802,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
-      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.2.tgz",
+      "integrity": "sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==",
       "cpu": [
         "x64"
       ],
@@ -616,9 +818,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==",
       "cpu": [
         "arm64"
       ],
@@ -632,9 +834,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
-      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==",
       "cpu": [
         "x64"
       ],
@@ -648,9 +850,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==",
       "cpu": [
         "arm64"
       ],
@@ -664,9 +866,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
-      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==",
       "cpu": [
         "x64"
       ],
@@ -680,9 +882,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
-      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.2.tgz",
+      "integrity": "sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==",
       "cpu": [
         "arm64"
       ],
@@ -696,9 +898,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
-      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.2.tgz",
+      "integrity": "sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==",
       "cpu": [
         "x64"
       ],
@@ -712,9 +914,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
-      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.2.tgz",
+      "integrity": "sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==",
       "cpu": [
         "arm64"
       ],
@@ -728,9 +930,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
-      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.2.tgz",
+      "integrity": "sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==",
       "cpu": [
         "ia32"
       ],
@@ -744,9 +946,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
-      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.2.tgz",
+      "integrity": "sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==",
       "cpu": [
         "x64"
       ],
@@ -760,9 +962,9 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
-      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.10.1.tgz",
+      "integrity": "sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -802,15 +1004,15 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
-      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
-        "minimatch": "^3.1.2"
+        "minimatch": "^3.1.5"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -843,20 +1045,20 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
-      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.7.tgz",
+      "integrity": "sha512-F42g89Qd5oAWtp0k0nnSrjziAKza7w8SVT4mStc18LZMaRb4J1HQAHLCalEtDCxrTuksx7NU9qsmeLwpOfPqWw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ajv": "^6.12.4",
+        "ajv": "^6.14.0",
         "debug": "^4.3.2",
         "espree": "^10.0.1",
         "globals": "^14.0.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
+        "js-yaml": "^4.3.2",
+        "minimatch": "^3.1.5",
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
@@ -880,9 +1082,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.39.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.0.tgz",
-      "integrity": "sha512-BIhe0sW91JGPiaF1mOuPy5v8NflqfjIcDNpC+LbW9f609WVRX1rArrhi6Z2ymvrAry9jw+5POTj4t2t62o8Bmw==",
+      "version": "9.39.5",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.5.tgz",
+      "integrity": "sha512-QywQuszQh77pIXCsq998c8hbhSTI/azTty1Z6N53dmAudKHhy573j3yvRLsX2BSp8YpLtoCEG8E9DJe+8zUh4A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -916,30 +1118,62 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@exodus/bytes": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.16.0.tgz",
+      "integrity": "sha512-IcpW84uEn3N7ETtNZMlxKhfl6Pec8rUNGOTBtWbK1FKhJxIFAptZyVrvVRVBimAJxJCgc3PxepxkdWWG4DVzfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@humanfs/core": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
-      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+      "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
       "dev": true,
       "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/types": "^0.15.0"
+      },
       "engines": {
         "node": ">=18.18.0"
       }
     },
     "node_modules/@humanfs/node": {
-      "version": "0.16.7",
-      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
-      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+      "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@humanfs/core": "^0.19.1",
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
         "@humanwhocodes/retry": "^0.4.0"
       },
       "engines": {
         "node": ">=18.18.0"
       }
     },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+      "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -998,9 +1232,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
-      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -1013,58 +1247,31 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
-      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@react-oauth/google": {
-      "version": "0.12.2",
-      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.2.tgz",
-      "integrity": "sha512-d1GVm2uD4E44EJft2RbKtp8Z1fp/gK8Lb6KHgs3pHlM0PxCXGLaq8LLYQYENnN4xPWO1gkL4apBtlPKzpLvZwg==",
+    "node_modules/@napi-rs/lzma-linux-x64-gnu": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
+      "integrity": "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==",
+      "cpu": [
+        "x64"
+      ],
       "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^22.20 || ^24.12 || >=25"
       }
     },
     "node_modules/@reduxjs/toolkit": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.9.2.tgz",
-      "integrity": "sha512-ZAYu/NXkl/OhqTz7rfPaAhY0+e8Fr15jqNxte/2exKUxvHyQ/hcqmdekiN1f+Lcw3pE+34FCgX+26zcUE3duCg==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.13.0.tgz",
+      "integrity": "sha512-f6jwVRfwW30+tnllz4YcsHHpPYYOE7abcHkyUCovD+P7DyhdAI5prz2Fh/8TLhakjpN+7aIEion1s5L/tvlYlA==",
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
         "@standard-schema/utils": "^0.3.0",
-        "immer": "^10.0.3",
+        "immer": "^11.0.0",
         "redux": "^5.0.1",
         "redux-thunk": "^3.1.0",
         "reselect": "^5.1.0"
@@ -1083,16 +1290,16 @@
       }
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.43",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.43.tgz",
-      "integrity": "sha512-5Uxg7fQUCmfhax7FJke2+8B6cqgeUJUD9o2uXIKXhD+mG0mL6NObmVoi9wXEU1tY89mZKgAYA6fTbftx3q2ZPQ==",
+      "version": "1.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
+      "integrity": "sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.5.tgz",
-      "integrity": "sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.63.6.tgz",
+      "integrity": "sha512-G6xF9OVRWsbHadMfoPNUDwW/Jt70QYG+ZDUvtYCFxjf3SPhqVAO0u9ShXZ7Cf5silVoRWyN4bDjCEKnJkXkw0w==",
       "cpu": [
         "arm"
       ],
@@ -1103,9 +1310,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.5.tgz",
-      "integrity": "sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.63.6.tgz",
+      "integrity": "sha512-Us/kTH5e2anr1CQvO8MEq4eeCVcIXI3Ag7OFxDI30n2OW7Q7xWuxo8ItbYq28PG2Sm1NWmZzG9+SqVEaj25SFA==",
       "cpu": [
         "arm64"
       ],
@@ -1116,9 +1323,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.5.tgz",
-      "integrity": "sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.63.6.tgz",
+      "integrity": "sha512-fwaSNrSHp9PJuEh4bKtd0mYC+G3FeVDjSTmsSiSlIYu7TFCpxrfB6lk7Ao8cIbswFyklPB1ZDUV8LkLBM15VWw==",
       "cpu": [
         "arm64"
       ],
@@ -1129,9 +1336,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.5.tgz",
-      "integrity": "sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.63.6.tgz",
+      "integrity": "sha512-QR2tx26gCeGh4eAGnUasfnJuRc+d7Vc0Jo1/fYtKGuiKqCuhbVpbNEvqgYGBwGDZGyS04jj+zdHi9W8uvb1Sdw==",
       "cpu": [
         "x64"
       ],
@@ -1142,9 +1349,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.5.tgz",
-      "integrity": "sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.63.6.tgz",
+      "integrity": "sha512-7E1wRJEW8r7WlqmCy58ugndWHrzoEV/pRt2x0D9el7Inra62+Cw00lYW9XhW6iUCtFjhNw49McsSCIzJ/nG8uw==",
       "cpu": [
         "arm64"
       ],
@@ -1155,9 +1362,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.5.tgz",
-      "integrity": "sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.63.6.tgz",
+      "integrity": "sha512-13KJeF+vDswMzEHmMIouCVcEQdov3CzAA3ZhM8QFmBJV/FZ/VMZI49UHDvPXTK+wokk86kYPmQ9Qb3xGGJbZoQ==",
       "cpu": [
         "x64"
       ],
@@ -1168,9 +1375,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.5.tgz",
-      "integrity": "sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.63.6.tgz",
+      "integrity": "sha512-hV+W1r8HM84PER4If94QuzrrD0DNk4CxobNhVUiz9ZiiWHDzJss4Jra2AYGH1a7GOTzjS1sIyZ35yYEhw/aq+g==",
       "cpu": [
         "arm"
       ],
@@ -1181,9 +1388,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.5.tgz",
-      "integrity": "sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.63.6.tgz",
+      "integrity": "sha512-5dWs/GENZufRph8PEfl0TrNH/R3DHJA+VxF/dqlfV2oUZfxRtN3qmFXg2DZj8DYM8d+Vd3dgZtuVmoBE/nb2YQ==",
       "cpu": [
         "arm"
       ],
@@ -1194,9 +1401,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.5.tgz",
-      "integrity": "sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.63.6.tgz",
+      "integrity": "sha512-inQYLPVIUvYk+s7zpxQldqwrajUNs+t4TJjPGzsdPTvsT8gsQXVcW/sQFolHZ3YSWVk0nMMwU7TtRi0Ow+QMuw==",
       "cpu": [
         "arm64"
       ],
@@ -1207,9 +1414,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.5.tgz",
-      "integrity": "sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.63.6.tgz",
+      "integrity": "sha512-sH+0MV1HmDC1q7+bQnlN9ywKBmHqkA2EdD/hHYrrz654ybc+vNC1FRNyzuYKicMQVtZZ4X2jz0osJYmsOtnj4g==",
       "cpu": [
         "arm64"
       ],
@@ -1220,9 +1427,22 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.5.tgz",
-      "integrity": "sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.63.6.tgz",
+      "integrity": "sha512-mCECvRr6HGekdBc6dvHzUWubqEti4JyOqlNePrOzl4Wimk26iW5Zy9rld2mQbC9id1NYjfF8nHLFq5fr3CuOKQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.63.6.tgz",
+      "integrity": "sha512-bb9rdoCPwM4DEsbOP3CJgFnvhSJ3XKCUYyUhxnlSs/XGT0DknpOYgLCPbK8VUzwl+cZGzFQm0KbBYRaSGZC2YQ==",
       "cpu": [
         "loong64"
       ],
@@ -1233,9 +1453,22 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.5.tgz",
-      "integrity": "sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.63.6.tgz",
+      "integrity": "sha512-aIJRoGCHev45JSu7JMzVrMzu1NX3nQrXx1Vb/6y4AblxW7JpCMpk4e8C6lHzvSElxi3UEcMdFJldsuWQjV1ddA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.63.6.tgz",
+      "integrity": "sha512-LvjnulezHjiaM5Ga9MPCDLTVddjvcrJhZc6vEz9fxeFRGPJsPAX9HuTuPTUQ3l8d+nYpZB/xWzUpuKJlLQm3VQ==",
       "cpu": [
         "ppc64"
       ],
@@ -1246,9 +1479,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.5.tgz",
-      "integrity": "sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.63.6.tgz",
+      "integrity": "sha512-YmhSBeYZwJ937s8tKpYAhms48N+tj7e+oFkbkVVxfMRdAiynK2AxqRapJXB4utyXxc/iYTkMfPRQ+7ZP0IO78w==",
       "cpu": [
         "riscv64"
       ],
@@ -1259,9 +1492,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.5.tgz",
-      "integrity": "sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.63.6.tgz",
+      "integrity": "sha512-9+YukhzqTvJvzfDXJJzkURK9TDY01nofNH3pyHGuucGC4xPvBVtIfCAqJjkjnmBEGJYNXB8sBc2EDt7xDgGenw==",
       "cpu": [
         "riscv64"
       ],
@@ -1272,9 +1505,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.5.tgz",
-      "integrity": "sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.63.6.tgz",
+      "integrity": "sha512-9G5AtEkpN/A89BILHHEL9aYRYTuFjwa8PUQqoEg8SDrwOZBKpwYqNlQCBNI5QPwGrf7qFlb6LNFilo8FCSA3Wg==",
       "cpu": [
         "s390x"
       ],
@@ -1285,9 +1518,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.5.tgz",
-      "integrity": "sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.63.6.tgz",
+      "integrity": "sha512-Ezx2E5D6Siz805j41x91JiGbzuCm8i2U98U37SQ7ytY737+wsJq+P9nPL6UmqDww491zO7MTivYOTrtmTTeCSw==",
       "cpu": [
         "x64"
       ],
@@ -1298,9 +1531,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.5.tgz",
-      "integrity": "sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.63.6.tgz",
+      "integrity": "sha512-8EZ1Q3PB7yUjvR4MbFAnCBF1wF0XRe5QQqbtlJXP7ZX5C8iYlSQJugUhj9oS0gbUP4jp9qGhaIgFnV9Nvod86Q==",
       "cpu": [
         "x64"
       ],
@@ -1310,10 +1543,23 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.63.6.tgz",
+      "integrity": "sha512-3JI27TALItfZ/qaxXKdbRXfV6WepUoUa3IN07FE+1xxoRdl3JIyrp5PiDF0vOHsPgEiOFkF8s3B3BRymQkdwGA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.5.tgz",
-      "integrity": "sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.63.6.tgz",
+      "integrity": "sha512-BNOGeNFNRZDT7Hfc7b9JbTZFXkpAXeXl/CZWtxdd5CNfBaor/0RkJjg+q+E2gwVIvGqqp/NclThKFGrhuScVhw==",
       "cpu": [
         "arm64"
       ],
@@ -1324,9 +1570,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.5.tgz",
-      "integrity": "sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.63.6.tgz",
+      "integrity": "sha512-D3eEyLSIim5WF5fHbwnx+ryk0delN7fJyBrDTO3wVCCNBZ/cA8aCGwLS3SiuK+vRI4E7dqikAlStGuR20dBMuw==",
       "cpu": [
         "arm64"
       ],
@@ -1337,9 +1583,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.5.tgz",
-      "integrity": "sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.63.6.tgz",
+      "integrity": "sha512-xwbs9g8zLbHzj1poG1uh27xtubsu27Gk2nuN6kvvGDybjiTfwMksQAnF+phlvI5oeXkJWWDc6kg1t3XpgUYvrg==",
       "cpu": [
         "ia32"
       ],
@@ -1350,9 +1596,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.5.tgz",
-      "integrity": "sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.63.6.tgz",
+      "integrity": "sha512-Tr6rhRNnFthvXr45zWVZQ5P8jZ5UwZnXNc7Qnu80cP/VVYtSioOPmvv7wP6UMgRfkBCJr2Pm60ua0YBDSJjgnw==",
       "cpu": [
         "x64"
       ],
@@ -1363,9 +1609,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.5.tgz",
-      "integrity": "sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.63.6.tgz",
+      "integrity": "sha512-0RAxO1pS/6lY1mSoD2Apm+6aPyfUlm+OWKgncIdj/eVN9I+pDY3lKgD7xsUNFei1u7MZQETGOo6m8POXMDp53A==",
       "cpu": [
         "x64"
       ],
@@ -1376,84 +1622,84 @@
       ]
     },
     "node_modules/@sentry-internal/browser-utils": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.55.0.tgz",
-      "integrity": "sha512-ROgqtQfpH/82AQIpESPqPQe0UyWywKJsmVIqi3c5Fh+zkds5LUxnssTj3yNd1x+kxaPDVB023jAP+3ibNgeNDw==",
+      "version": "8.55.2",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.55.2.tgz",
+      "integrity": "sha512-GnKod+gL/Y+1FUM/RGV8q6le1CoyiGbT40MitEK7eVwWe+bfTRq1gN7ioupyHFMUg1RlQkDQ4/sENmio/uow5A==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "8.55.0"
+        "@sentry/core": "8.55.2"
       },
       "engines": {
         "node": ">=14.18"
       }
     },
     "node_modules/@sentry-internal/feedback": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.55.0.tgz",
-      "integrity": "sha512-cP3BD/Q6pquVQ+YL+rwCnorKuTXiS9KXW8HNKu4nmmBAyf7urjs+F6Hr1k9MXP5yQ8W3yK7jRWd09Yu6DHWOiw==",
+      "version": "8.55.2",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.55.2.tgz",
+      "integrity": "sha512-XQy//NWbL0mLLM5w8wNDWMNpXz39VUyW2397dUrH8++kR63WhUVAvTOtL0o0GMVadSAzl1b08oHP9zSUNFQwcg==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "8.55.0"
+        "@sentry/core": "8.55.2"
       },
       "engines": {
         "node": ">=14.18"
       }
     },
     "node_modules/@sentry-internal/replay": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.55.0.tgz",
-      "integrity": "sha512-roCDEGkORwolxBn8xAKedybY+Jlefq3xYmgN2fr3BTnsXjSYOPC7D1/mYqINBat99nDtvgFvNfRcZPiwwZ1hSw==",
+      "version": "8.55.2",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.55.2.tgz",
+      "integrity": "sha512-+W43Z697EVe/OgpGW07B773sa8xO1UbpnW0Cr+E+3FMDb6ZbXlaBUoagPTUkkQPdwBe35SDh6r8y2M3EOPGbxg==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/browser-utils": "8.55.0",
-        "@sentry/core": "8.55.0"
+        "@sentry-internal/browser-utils": "8.55.2",
+        "@sentry/core": "8.55.2"
       },
       "engines": {
         "node": ">=14.18"
       }
     },
     "node_modules/@sentry-internal/replay-canvas": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.55.0.tgz",
-      "integrity": "sha512-nIkfgRWk1091zHdu4NbocQsxZF1rv1f7bbp3tTIlZYbrH62XVZosx5iHAuZG0Zc48AETLE7K4AX9VGjvQj8i9w==",
+      "version": "8.55.2",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.55.2.tgz",
+      "integrity": "sha512-P/jGiuR7dRLG9IzD/463fLgiibyYceauav/9prRG0ZxJm1AtuO02OKball2Fs3bbzdzwHCTlcsUuL2ivDF4b5A==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/replay": "8.55.0",
-        "@sentry/core": "8.55.0"
+        "@sentry-internal/replay": "8.55.2",
+        "@sentry/core": "8.55.2"
       },
       "engines": {
         "node": ">=14.18"
       }
     },
     "node_modules/@sentry/browser": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.55.0.tgz",
-      "integrity": "sha512-1A31mCEWCjaMxJt6qGUK+aDnLDcK6AwLAZnqpSchNysGni1pSn1RWSmk9TBF8qyTds5FH8B31H480uxMPUJ7Cw==",
+      "version": "8.55.2",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.55.2.tgz",
+      "integrity": "sha512-xHuPIEKhx9zw5quWvv4YgZprnwoVMCfxIhmOIf6KJ9iizyUHeUDcKpLS59xERroqwX4RpvK+l/27AZu4zfZlzQ==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/browser-utils": "8.55.0",
-        "@sentry-internal/feedback": "8.55.0",
-        "@sentry-internal/replay": "8.55.0",
-        "@sentry-internal/replay-canvas": "8.55.0",
-        "@sentry/core": "8.55.0"
+        "@sentry-internal/browser-utils": "8.55.2",
+        "@sentry-internal/feedback": "8.55.2",
+        "@sentry-internal/replay": "8.55.2",
+        "@sentry-internal/replay-canvas": "8.55.2",
+        "@sentry/core": "8.55.2"
       },
       "engines": {
         "node": ">=14.18"
       }
     },
     "node_modules/@sentry/core": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.55.0.tgz",
-      "integrity": "sha512-6g7jpbefjHYs821Z+EBJ8r4Z7LT5h80YSWRJaylGS4nW5W5Z2KXzpdnyFarv37O7QjauzVC2E+PABmpkw5/JGA==",
+      "version": "8.55.2",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.55.2.tgz",
+      "integrity": "sha512-YlEBwybUcOQ/KjMHDmof1vwweVnBtBxYlQp7DE3fOdtW4pqqdHWTnTntQs4VgYfxzjJYgtkd9LHlGtg8qy+JVQ==",
       "license": "MIT",
       "engines": {
         "node": ">=14.18"
       }
     },
     "node_modules/@standard-schema/spec": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
-      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
       "license": "MIT"
     },
     "node_modules/@standard-schema/utils": {
@@ -1463,47 +1709,47 @@
       "license": "MIT"
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
-      "integrity": "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
+      "integrity": "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/remapping": "^2.3.4",
-        "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.6.1",
-        "lightningcss": "1.30.2",
-        "magic-string": "^0.30.19",
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.24.1",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.16"
+        "tailwindcss": "4.3.3"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
-      "integrity": "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.3.tgz",
+      "integrity": "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==",
       "license": "MIT",
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.16",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.16",
-        "@tailwindcss/oxide-darwin-x64": "4.1.16",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.16",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.16",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.16",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.16",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.16",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.16"
+        "@tailwindcss/oxide-android-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-x64": "4.3.3",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.3",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.3",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.3",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.3"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.16.tgz",
-      "integrity": "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.3.tgz",
+      "integrity": "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==",
       "cpu": [
         "arm64"
       ],
@@ -1513,13 +1759,13 @@
         "android"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.16.tgz",
-      "integrity": "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.3.tgz",
+      "integrity": "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==",
       "cpu": [
         "arm64"
       ],
@@ -1529,13 +1775,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.16.tgz",
-      "integrity": "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.3.tgz",
+      "integrity": "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==",
       "cpu": [
         "x64"
       ],
@@ -1545,13 +1791,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.16.tgz",
-      "integrity": "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.3.tgz",
+      "integrity": "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==",
       "cpu": [
         "x64"
       ],
@@ -1561,13 +1807,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.16.tgz",
-      "integrity": "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.3.tgz",
+      "integrity": "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==",
       "cpu": [
         "arm"
       ],
@@ -1577,13 +1823,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.16.tgz",
-      "integrity": "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.3.tgz",
+      "integrity": "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==",
       "cpu": [
         "arm64"
       ],
@@ -1593,13 +1839,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.16.tgz",
-      "integrity": "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.3.tgz",
+      "integrity": "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==",
       "cpu": [
         "arm64"
       ],
@@ -1609,13 +1855,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.16.tgz",
-      "integrity": "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.3.tgz",
+      "integrity": "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==",
       "cpu": [
         "x64"
       ],
@@ -1625,13 +1871,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.16.tgz",
-      "integrity": "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.3.tgz",
+      "integrity": "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==",
       "cpu": [
         "x64"
       ],
@@ -1641,13 +1887,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.16.tgz",
-      "integrity": "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.3.tgz",
+      "integrity": "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -1662,21 +1908,21 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.5.0",
-        "@emnapi/runtime": "^1.5.0",
-        "@emnapi/wasi-threads": "^1.1.0",
-        "@napi-rs/wasm-runtime": "^1.0.7",
-        "@tybys/wasm-util": "^0.10.1",
-        "tslib": "^2.4.0"
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.16.tgz",
-      "integrity": "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz",
+      "integrity": "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==",
       "cpu": [
         "arm64"
       ],
@@ -1686,13 +1932,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.16.tgz",
-      "integrity": "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.3.tgz",
+      "integrity": "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==",
       "cpu": [
         "x64"
       ],
@@ -1702,23 +1948,80 @@
         "win32"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 20"
       }
     },
     "node_modules/@tailwindcss/vite": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.16.tgz",
-      "integrity": "sha512-bbguNBcDxsRmi9nnlWJxhfDWamY3lmcyACHcdO1crxfzuLpOhHLLtEIN/nCbbAtj5rchUgQD17QVAKi1f7IsKg==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz",
+      "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.3",
+        "@tailwindcss/oxide": "4.3.3",
+        "tailwindcss": "4.3.3"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.2.tgz",
+      "integrity": "sha512-yzr2S9HyAIdhz2/6qHgbs665Q7PKVcDF05vsOlHPxG1mo36gKVesdYVeDLnXgfjJ03CrKRk08knc6+E/9m8v2Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.3.tgz",
+      "integrity": "sha512-Uo193NgQbPMz6lrrhtRQQFcMC6Re/ELLFbbuVL30WDlZxlpZf9/lMHTAVxPRLw1q1iu9OJmR1c2BLiENRstdBg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tailwindcss/node": "4.1.16",
-        "@tailwindcss/oxide": "4.1.16",
-        "tailwindcss": "4.1.16"
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
       },
       "peerDependencies": {
-        "vite": "^5.2.0 || ^6 || ^7"
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1764,6 +2067,17 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
@@ -1807,9 +2121,9 @@
       }
     },
     "node_modules/@types/d3-shape": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
-      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-kVd74ta9eof3eJOvbNd1vGKS/XERRyQbT26Og63hIsvDO84cjD5gEOhsXf26w3FSoNlPVz84DOFcKv/oou+fMw==",
       "license": "MIT",
       "dependencies": {
         "@types/d3-path": "*"
@@ -1827,10 +2141,17 @@
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
-      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
       "license": "MIT"
     },
     "node_modules/@types/json-schema": {
@@ -1840,26 +2161,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/react": {
-      "version": "19.2.2",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
-      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "19.2.2",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
-      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^19.2.0"
-      }
-    },
     "node_modules/@types/use-sync-external-store": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
@@ -1867,12 +2168,12 @@
       "license": "MIT"
     },
     "node_modules/@vapi-ai/web": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@vapi-ai/web/-/web-2.5.0.tgz",
-      "integrity": "sha512-I+XkLPG99kWspJ2AH4vky/vSgCui9ntb20n4/D9RSP6ChG3RHNvZVXoA79gKiY1fWmowuzBD7hL8sJbGHfJOJw==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@vapi-ai/web/-/web-2.7.1.tgz",
+      "integrity": "sha512-074wXF2NdljXWv6rw0VQyIamMS8u5qsBejJBOLrcd9mT9z9xbQbd8Zu5CKe2UXdsxYpCzDYopsISE2EnwvaKSA==",
       "license": "MIT",
       "dependencies": {
-        "@daily-co/daily-js": "^0.84.0",
+        "@daily-co/daily-js": "^0.87.0",
         "events": "^3.3.0"
       },
       "engines": {
@@ -1880,16 +2181,16 @@
       }
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.0.tgz",
-      "integrity": "sha512-4LuWrg7EKWgQaMJfnN+wcmbAW+VSsCmqGohftWjuct47bv8uE4n/nPpq4XjJPsxgq00GGG5J8dvBczp8uxScew==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.2.0.tgz",
+      "integrity": "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.28.4",
+        "@babel/core": "^7.29.0",
         "@babel/plugin-transform-react-jsx-self": "^7.27.1",
         "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-        "@rolldown/pluginutils": "1.0.0-beta.43",
+        "@rolldown/pluginutils": "1.0.0-rc.3",
         "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.18.0"
       },
@@ -1897,17 +2198,132 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+    "node_modules/@vitest/expect": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.7.tgz",
+      "integrity": "sha512-E8eBXaKibuvH2pSZErOjdVb5vF4PbKYcrnluBTYxEk1l/VhhwZg1kZQsdtjq+CsF5CFydf2Rdkz7jDHKSisi3w==",
       "dev": true,
       "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "3.2.7",
+        "@vitest/utils": "3.2.7",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.7.tgz",
+      "integrity": "sha512-Trr0hYO9CM3Wj6ksWHRhK9IZpIY6wTMO5u/MqXurMxT57sWBaOPEtP3Oq60ihZuh5JsiagKfz95OcxdEP6dBrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.2.7",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.7.tgz",
+      "integrity": "sha512-KUHlwqVu0sRlhCdyPdQ/wBoTfRahjUky1MubOmYw9fWfIZy1gNoHpuaaQBPAaMaVYdQYHJLurzj8ECCj5OwTqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.7.tgz",
+      "integrity": "sha512-sB9y4ovltoQP+WaUPwmSxO9WIg9Ig694Di5PalVPsYHklAdE027mehpWF2SQSVq+k6sFgaivbTjTJwZLSHbedA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.2.7",
+        "pathe": "^2.0.3",
+        "strip-literal": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.7.tgz",
+      "integrity": "sha512-7C+MwShwtBSI5Buwoyg3s/iY1eHL9PKAf+O1wVh/TdnjXUtkoL/9YQtre90i4MtNXM6edP1wJ2zOBpfCyhIS7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.7",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.7.tgz",
+      "integrity": "sha512-Q2eQGI6d2L/hBtZ0qNuKcAGid68XK6cv1xsoaIma6PaJhHPoqcEJhYpXZ/5myCMqkNgtP6UKuBhbc0nHKnrkuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^4.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.7.tgz",
+      "integrity": "sha512-x6BDOd7dyo3PFLY3I9/HJ25X/6OurhGXk2/B9gOZNPF7XDVjeBK4k01lQE5uvDpbuheErh91qYuE1E2OEjK3Rw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.7",
+        "loupe": "^3.1.4",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
+      "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
       },
       "engines": {
         "node": ">=0.4.0"
@@ -1924,9 +2340,9 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1940,6 +2356,17 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -1963,6 +2390,27 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1971,25 +2419,38 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.23",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.23.tgz",
-      "integrity": "sha512-616V5YX4bepJFzNyOfce5Fa8fDJMfoxzOIzDCZwaGL8MKVpFrXqfNUoIpRn9YMI5pXf/VKgzjB4htFMsFKKdiQ==",
+      "version": "2.11.27",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.27.tgz",
+      "integrity": "sha512-ElY12DaROGuan+lMmZ8Cvo/ZUbXPe7Enc/9VU/b1T3Kp4dwytRcNdR8DoSJN5SNJT/CuvcCA0DHDVmMOCePdRQ==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.1.0.tgz",
+      "integrity": "sha512-fX1Onk0tdVPC7obPWB5EbJ1z7NVhLq4m2xZLq2YXBkxzMXIGRpNMU88n0EPgWseKl12J7zXs7qrDxPK4sRs2fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
       }
     },
     "node_modules/bowser": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.12.1.tgz",
-      "integrity": "sha512-z4rE2Gxh7tvshQ4hluIT7XcFrgLIQaw9X3A+kTTRdovCz5PMukm/0QC/BKSYPj3omF5Qfypn9O/c5kgpmvYUCw==",
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.14.1.tgz",
+      "integrity": "sha512-tzPjzCxygAKWFOJP011oxFHs57HzIhOEracIgAePE4pqB3LikALKnSzUyU4MGs9/iCEUuHlAJTjTc5M+u7YEGg==",
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.21.tgz",
+      "integrity": "sha512-9zeA+KLZNNzglF2TPKRQEDyx6Yby7daAkuy8MiPzpXPsYDWi/DRM8jmwUDxokQjYqBpv5DgPiwD4h4ZZSy1Ujw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1998,9 +2459,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.27.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.27.0.tgz",
-      "integrity": "sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==",
+      "version": "4.29.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.29.3.tgz",
+      "integrity": "sha512-1R4kiYKXGViqEN0CnoDrXc1StD9niAwu+j2dukWzrD4bJgsD4lDmEp0CRbc6E/vYJIfTHwPmwyaKtVSudICdPA==",
       "dev": true,
       "funding": [
         {
@@ -2018,11 +2479,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.8.19",
-        "caniuse-lite": "^1.0.30001751",
-        "electron-to-chromium": "^1.5.238",
-        "node-releases": "^2.0.26",
-        "update-browserslist-db": "^1.1.4"
+        "baseline-browser-mapping": "^2.11.26",
+        "caniuse-lite": "^1.0.30001813",
+        "electron-to-chromium": "^1.5.439",
+        "node-releases": "^2.0.57",
+        "update-browserslist-db": "^1.3.3"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -2031,6 +2492,16 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2042,9 +2513,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001753",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001753.tgz",
-      "integrity": "sha512-Bj5H35MD/ebaOV4iDLqPEtiliTN29qkGtEHCwawWn4cYm+bPJM2NsaP30vtZcnERClMzp52J4+aw2UNbK4o+zw==",
+      "version": "1.0.30001814",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001814.tgz",
+      "integrity": "sha512-/Uaf1lAzr59XcMpW0o96WoEfr+VXK2OX4U9AgFoiSHsVJ4HppnIFUjtYzsyDH2+tgANaQb2/oxYGwCPapN1FpA==",
       "dev": true,
       "funding": [
         {
@@ -2062,6 +2533,23 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chai": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
+      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2079,16 +2567,14 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/class-variance-authority": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
-      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "clsx": "^2.1.1"
-      },
-      "funding": {
-        "url": "https://polar.sh/cva"
+    "node_modules/check-error": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
+      "integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
       }
     },
     "node_modules/clsx": {
@@ -2135,12 +2621,16 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/cross-spawn": {
@@ -2158,12 +2648,19 @@
         "node": ">= 8"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
-      "license": "MIT"
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
     },
     "node_modules/d3-array": {
       "version": "3.2.4",
@@ -2196,9 +2693,9 @@
       }
     },
     "node_modules/d3-format": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
-      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
       "license": "ISC",
       "engines": {
         "node": ">=12"
@@ -2286,6 +2783,35 @@
         "node": ">=12"
       }
     },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2304,12 +2830,29 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/decimal.js-light": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
       "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
       "license": "MIT"
     },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2335,40 +2878,70 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.244",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.244.tgz",
-      "integrity": "sha512-OszpBN7xZX4vWMPJwB9illkN/znA8M36GQqQxi6MNy9axWxhOfJyZZJtSLQCpEFLHP2xK33BiWx9aIuIEXVCcw==",
+      "version": "1.5.444",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.444.tgz",
+      "integrity": "sha512-5ss/uJfoDYDHT0lfJzT6FbcskIzROIOPf0BbbFkGcvDzoJU7i//9GDrwwIHQVmIsrAGiF3ihpADBRIsrEFt1rQ==",
       "dev": true,
       "license": "ISC"
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.18.3",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
-      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "version": "5.26.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.26.0.tgz",
+      "integrity": "sha512-9vhedylFonb2YGogzUKX6+Ja72gOJbN1QHAqdrvqLwhdl/QWbKopzoUC9EbQNVsAns/bx/4uyqalrQAoy1IByw==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "tapable": "^2.3.3"
       },
       "engines": {
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.1.0.tgz",
+      "integrity": "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-toolkit": {
-      "version": "1.41.0",
-      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.41.0.tgz",
-      "integrity": "sha512-bDd3oRmbVgqZCJS6WmeQieOrzpl3URcWBUVDXxOELlUW2FuW+0glPOz1n0KnRie+PdyvUZcXz2sOn00c6pPRIA==",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.52.0.tgz",
+      "integrity": "sha512-XTNEJQh1tY1ZJVcf6ayP/2n4ZPyaHlW2FWs7xvw5ddPuhUVjLD3olQVQS7kf58JbAB48iL0uL/jerTrjtV3lDA==",
       "license": "MIT",
       "workspaces": [
         "docs",
-        "benchmarks"
+        "benchmarks",
+        "tests/types",
+        "tests/browser-compat"
       ]
     },
     "node_modules/esbuild": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
-      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
+      "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2378,32 +2951,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.12",
-        "@esbuild/android-arm": "0.25.12",
-        "@esbuild/android-arm64": "0.25.12",
-        "@esbuild/android-x64": "0.25.12",
-        "@esbuild/darwin-arm64": "0.25.12",
-        "@esbuild/darwin-x64": "0.25.12",
-        "@esbuild/freebsd-arm64": "0.25.12",
-        "@esbuild/freebsd-x64": "0.25.12",
-        "@esbuild/linux-arm": "0.25.12",
-        "@esbuild/linux-arm64": "0.25.12",
-        "@esbuild/linux-ia32": "0.25.12",
-        "@esbuild/linux-loong64": "0.25.12",
-        "@esbuild/linux-mips64el": "0.25.12",
-        "@esbuild/linux-ppc64": "0.25.12",
-        "@esbuild/linux-riscv64": "0.25.12",
-        "@esbuild/linux-s390x": "0.25.12",
-        "@esbuild/linux-x64": "0.25.12",
-        "@esbuild/netbsd-arm64": "0.25.12",
-        "@esbuild/netbsd-x64": "0.25.12",
-        "@esbuild/openbsd-arm64": "0.25.12",
-        "@esbuild/openbsd-x64": "0.25.12",
-        "@esbuild/openharmony-arm64": "0.25.12",
-        "@esbuild/sunos-x64": "0.25.12",
-        "@esbuild/win32-arm64": "0.25.12",
-        "@esbuild/win32-ia32": "0.25.12",
-        "@esbuild/win32-x64": "0.25.12"
+        "@esbuild/aix-ppc64": "0.28.2",
+        "@esbuild/android-arm": "0.28.2",
+        "@esbuild/android-arm64": "0.28.2",
+        "@esbuild/android-x64": "0.28.2",
+        "@esbuild/darwin-arm64": "0.28.2",
+        "@esbuild/darwin-x64": "0.28.2",
+        "@esbuild/freebsd-arm64": "0.28.2",
+        "@esbuild/freebsd-x64": "0.28.2",
+        "@esbuild/linux-arm": "0.28.2",
+        "@esbuild/linux-arm64": "0.28.2",
+        "@esbuild/linux-ia32": "0.28.2",
+        "@esbuild/linux-loong64": "0.28.2",
+        "@esbuild/linux-mips64el": "0.28.2",
+        "@esbuild/linux-ppc64": "0.28.2",
+        "@esbuild/linux-riscv64": "0.28.2",
+        "@esbuild/linux-s390x": "0.28.2",
+        "@esbuild/linux-x64": "0.28.2",
+        "@esbuild/netbsd-arm64": "0.28.2",
+        "@esbuild/netbsd-x64": "0.28.2",
+        "@esbuild/openbsd-arm64": "0.28.2",
+        "@esbuild/openbsd-x64": "0.28.2",
+        "@esbuild/openharmony-arm64": "0.28.2",
+        "@esbuild/sunos-x64": "0.28.2",
+        "@esbuild/win32-arm64": "0.28.2",
+        "@esbuild/win32-ia32": "0.28.2",
+        "@esbuild/win32-x64": "0.28.2"
       }
     },
     "node_modules/escalade": {
@@ -2430,25 +3003,26 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.39.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.0.tgz",
-      "integrity": "sha512-iy2GE3MHrYTL5lrCtMZ0X1KLEKKUjmK0kzwcnefhR66txcEmXZD2YWgR5GNdcEwkNx3a0siYkSvl0vIC+Svjmg==",
+      "version": "9.39.5",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.5.tgz",
+      "integrity": "sha512-DgZS62aPLXKlnxILS/AYCoRvHaZeXceIzlXPkkGGzJWSow1aEk0lbTlxUSlyjC8jcaKxAdOnTDz+o1JFSBsyjw==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-array": "^0.21.2",
         "@eslint/config-helpers": "^0.4.2",
         "@eslint/core": "^0.17.0",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.39.0",
+        "@eslint/eslintrc": "^3.3.6",
+        "@eslint/js": "9.39.5",
         "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
         "@types/estree": "^1.0.6",
-        "ajv": "^6.12.4",
+        "ajv": "^6.14.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
@@ -2467,7 +3041,7 @@
         "is-glob": "^4.0.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
+        "minimatch": "^3.1.5",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.3"
       },
@@ -2503,9 +3077,9 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.24.tgz",
-      "integrity": "sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==",
+      "version": "0.4.26",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.26.tgz",
+      "integrity": "sha512-1RETEylht2O6FM/MvgnyvT+8K21wLqDNg4qD51Zj3guhjt433XbnnkVttHMyaVyAFD03QSV4LPS5iE3VQmO7XQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -2561,9 +3135,9 @@
       }
     },
     "node_modules/esquery": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -2596,6 +3170,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2607,9 +3191,9 @@
       }
     },
     "node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
       "license": "MIT"
     },
     "node_modules/events": {
@@ -2621,6 +3205,16 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2704,39 +3298,12 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.4.tgz",
+      "integrity": "sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==",
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/framer-motion": {
-      "version": "12.26.2",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.26.2.tgz",
-      "integrity": "sha512-lflOQEdjquUi9sCg5Y1LrsZDlsjrHw7m0T9Yedvnk7Bnhqfkc89/Uha10J3CFhkL+TCZVCRw9eUGyM/lyYhXQA==",
-      "license": "MIT",
-      "dependencies": {
-        "motion-dom": "^12.26.2",
-        "motion-utils": "^12.24.10",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/is-prop-valid": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2803,6 +3370,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-7.0.0.tgz",
+      "integrity": "sha512-UikN5yr7xsCDAq87Or5or0PAlD3HJJOKVzM05az588WnpDJ4Ux7a2A53Qi6gofGg2/EtvF/H4hCi/TXfCW4Y6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.15.1"
+      },
+      "engines": {
+        "node": "^22.13.0 || >=24.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2814,9 +3394,9 @@
       }
     },
     "node_modules/immer": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
-      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "version": "11.1.18",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.18.tgz",
+      "integrity": "sha512-EQyQtLiYW029lyoczMl/Hh4Xu7cDecSc58JRYpHyL4tIAu3eqd1yJzQX04d2BZHDkzFFvm6qJEJWOtfDSWAXbQ==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -2882,6 +3462,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2890,9 +3477,9 @@
       "license": "ISC"
     },
     "node_modules/jiti": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
-      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -2906,10 +3493,20 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.2.tgz",
+      "integrity": "sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -2918,6 +3515,56 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "30.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-30.1.1.tgz",
+      "integrity": "sha512-FahmoPK5vbPc+jxV1iErMHmAZypCZ942NHF4+qqaWAuvaKKTBZxawnmAtrbGWLU7MtlxfqIP0qw6aSI+aWGtLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^7.0.0",
+        "@asamuzakjp/dom-selector": "^9.2.1",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.13",
+        "@exodus/bytes": "^1.15.1",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^7.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.5.2",
+        "parse5": "^8.0.1",
+        "saxes": "^6.0.0",
+        "tough-cookie": "^6.0.2",
+        "undici": "^8.10.2",
+        "w3c-xmlserializer": "^6.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^17.1.1",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.2.3"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/lru-cache": {
+      "version": "11.5.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.3.tgz",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -2990,9 +3637,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
-      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
       "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
@@ -3005,23 +3652,23 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-android-arm64": "1.30.2",
-        "lightningcss-darwin-arm64": "1.30.2",
-        "lightningcss-darwin-x64": "1.30.2",
-        "lightningcss-freebsd-x64": "1.30.2",
-        "lightningcss-linux-arm-gnueabihf": "1.30.2",
-        "lightningcss-linux-arm64-gnu": "1.30.2",
-        "lightningcss-linux-arm64-musl": "1.30.2",
-        "lightningcss-linux-x64-gnu": "1.30.2",
-        "lightningcss-linux-x64-musl": "1.30.2",
-        "lightningcss-win32-arm64-msvc": "1.30.2",
-        "lightningcss-win32-x64-msvc": "1.30.2"
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
       }
     },
     "node_modules/lightningcss-android-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
-      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
       "cpu": [
         "arm64"
       ],
@@ -3039,9 +3686,9 @@
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
-      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
       "cpu": [
         "arm64"
       ],
@@ -3059,9 +3706,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
-      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
       "cpu": [
         "x64"
       ],
@@ -3079,9 +3726,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
-      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
       "cpu": [
         "x64"
       ],
@@ -3099,9 +3746,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
-      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
       "cpu": [
         "arm"
       ],
@@ -3119,9 +3766,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
-      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
       "cpu": [
         "arm64"
       ],
@@ -3139,9 +3786,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
-      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
       "cpu": [
         "arm64"
       ],
@@ -3159,9 +3806,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
-      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
       "cpu": [
         "x64"
       ],
@@ -3179,9 +3826,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
-      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
       "cpu": [
         "x64"
       ],
@@ -3199,9 +3846,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
-      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
       "cpu": [
         "arm64"
       ],
@@ -3219,9 +3866,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
-      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
       "cpu": [
         "x64"
       ],
@@ -3261,6 +3908,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loupe": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
+      "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3280,6 +3934,17 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -3289,10 +3954,17 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -3302,47 +3974,6 @@
         "node": "*"
       }
     },
-    "node_modules/motion": {
-      "version": "12.26.2",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-12.26.2.tgz",
-      "integrity": "sha512-2Q6g0zK1gUJKhGT742DAe42LgietcdiJ3L3OcYAHCQaC1UkLnn6aC8S/obe4CxYTLAgid2asS1QdQ/blYfo5dw==",
-      "license": "MIT",
-      "dependencies": {
-        "framer-motion": "^12.26.2",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/is-prop-valid": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/motion-dom": {
-      "version": "12.26.2",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.26.2.tgz",
-      "integrity": "sha512-KLMT1BroY8oKNeliA3JMNJ+nbCIsTKg6hJpDb4jtRAJ7nCKnnpg/LTq/NGqG90Limitz3kdAnAVXecdFVGlWTw==",
-      "license": "MIT",
-      "dependencies": {
-        "motion-utils": "^12.24.10"
-      }
-    },
-    "node_modules/motion-utils": {
-      "version": "12.24.10",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.24.10.tgz",
-      "integrity": "sha512-x5TFgkCIP4pPsRLpKoI86jv/q8t8FQOiM/0E8QKBzfMozWHfkKap2gA1hOki+B5g3IsBNpxbUnfOum1+dgvYww==",
-      "license": "MIT"
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3351,9 +3982,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.19",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
+      "integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
       "funding": [
         {
           "type": "github",
@@ -3376,11 +4007,14 @@
       "license": "MIT"
     },
     "node_modules/node-releases": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
-      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "version": "2.0.57",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.57.tgz",
+      "integrity": "sha512-kQK9LGGFiHtrWiNhZtA7Qbw17AQz+dmsEKODRIVTXA9+e5MS/2gZEBhYJt13GrAz5/IOZKddH/0Z3TP/Zgo+yw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/optionator": {
       "version": "0.9.4",
@@ -3445,6 +4079,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3465,6 +4112,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3472,9 +4136,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -3484,9 +4148,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "version": "8.5.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
+      "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
       "funding": [
         {
           "type": "opencollective",
@@ -3503,7 +4167,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.18",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -3521,6 +4185,44 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3532,37 +4234,37 @@
       }
     },
     "node_modules/react": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
-      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
-      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==",
       "license": "MIT",
       "dependencies": {
-        "scheduler": "^0.27.0"
+        "scheduler": "^0.28.0"
       },
       "peerDependencies": {
-        "react": "^19.2.0"
+        "react": "^19.3.0"
       }
     },
     "node_modules/react-is": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
-      "integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.3.0.tgz",
+      "integrity": "sha512-UpMYezM4v5/18F28aC66AEsjXIgE02kyEMH6yLdgLXu/UTfa1Ntwck/nNLrbqJsEXW7gPb0coNO9FQse9WTovA==",
       "license": "MIT",
       "peer": true
     },
     "node_modules/react-redux": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
-      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
       "license": "MIT",
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
@@ -3593,9 +4295,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.5.tgz",
-      "integrity": "sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==",
+      "version": "7.18.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz",
+      "integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -3615,12 +4317,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.5.tgz",
-      "integrity": "sha512-mkEmq/K8tKN63Ae2M7Xgz3c9l9YNbY+NHH6NNeUmLA3kDkhKXRsNb/ZpxaEunvGo2/3YXdk5EJU3Hxp3ocaBPw==",
+      "version": "7.18.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz",
+      "integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.9.5"
+        "react-router": "7.18.4"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -3631,19 +4333,22 @@
       }
     },
     "node_modules/recharts": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.3.0.tgz",
-      "integrity": "sha512-Vi0qmTB0iz1+/Cz9o5B7irVyUjX2ynvEgImbgMt/3sKRREcUM07QiYjS1QpAVrkmVlXqy5gykq4nGWMz9AS4Rg==",
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.10.1.tgz",
+      "integrity": "sha512-QXFrvt6IVcw7eeZCoyXTwkIJAX3Dv1nyVhMicXJ47GsGDDpcN8z6o644DibE9XjpBTThtsomLKnTV6lc+cVFUA==",
       "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
       "dependencies": {
-        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
         "clsx": "^2.1.1",
         "decimal.js-light": "^2.5.1",
         "es-toolkit": "^1.39.3",
         "eventemitter3": "^5.0.1",
-        "immer": "^10.1.1",
+        "immer": "^11.1.8",
         "react-redux": "8.x.x || 9.x.x",
-        "reselect": "5.1.1",
+        "reselect": "5.2.0",
         "tiny-invariant": "^1.3.3",
         "use-sync-external-store": "^1.2.2",
         "victory-vendor": "^37.0.2"
@@ -3672,10 +4377,20 @@
         "redux": "^5.0.0"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/reselect": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
-      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
       "license": "MIT"
     },
     "node_modules/resolve-from": {
@@ -3689,12 +4404,12 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.52.5",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.5.tgz",
-      "integrity": "sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==",
+      "version": "4.63.6",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.63.6.tgz",
+      "integrity": "sha512-w4+GKyTBqshj84F1GF3s2zxAPFZPEmNkCbQtqilsYS7GsksmX6VoV7UggfZg8sUHCCOkBe7UtQp6fZwbH311FQ==",
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.8"
+        "@types/estree": "1.0.9"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -3704,35 +4419,52 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.52.5",
-        "@rollup/rollup-android-arm64": "4.52.5",
-        "@rollup/rollup-darwin-arm64": "4.52.5",
-        "@rollup/rollup-darwin-x64": "4.52.5",
-        "@rollup/rollup-freebsd-arm64": "4.52.5",
-        "@rollup/rollup-freebsd-x64": "4.52.5",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.52.5",
-        "@rollup/rollup-linux-arm-musleabihf": "4.52.5",
-        "@rollup/rollup-linux-arm64-gnu": "4.52.5",
-        "@rollup/rollup-linux-arm64-musl": "4.52.5",
-        "@rollup/rollup-linux-loong64-gnu": "4.52.5",
-        "@rollup/rollup-linux-ppc64-gnu": "4.52.5",
-        "@rollup/rollup-linux-riscv64-gnu": "4.52.5",
-        "@rollup/rollup-linux-riscv64-musl": "4.52.5",
-        "@rollup/rollup-linux-s390x-gnu": "4.52.5",
-        "@rollup/rollup-linux-x64-gnu": "4.52.5",
-        "@rollup/rollup-linux-x64-musl": "4.52.5",
-        "@rollup/rollup-openharmony-arm64": "4.52.5",
-        "@rollup/rollup-win32-arm64-msvc": "4.52.5",
-        "@rollup/rollup-win32-ia32-msvc": "4.52.5",
-        "@rollup/rollup-win32-x64-gnu": "4.52.5",
-        "@rollup/rollup-win32-x64-msvc": "4.52.5",
+        "@napi-rs/lzma-linux-x64-gnu": "1.5.1",
+        "@rollup/rollup-android-arm-eabi": "4.63.6",
+        "@rollup/rollup-android-arm64": "4.63.6",
+        "@rollup/rollup-darwin-arm64": "4.63.6",
+        "@rollup/rollup-darwin-x64": "4.63.6",
+        "@rollup/rollup-freebsd-arm64": "4.63.6",
+        "@rollup/rollup-freebsd-x64": "4.63.6",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.63.6",
+        "@rollup/rollup-linux-arm-musleabihf": "4.63.6",
+        "@rollup/rollup-linux-arm64-gnu": "4.63.6",
+        "@rollup/rollup-linux-arm64-musl": "4.63.6",
+        "@rollup/rollup-linux-loong64-gnu": "4.63.6",
+        "@rollup/rollup-linux-loong64-musl": "4.63.6",
+        "@rollup/rollup-linux-ppc64-gnu": "4.63.6",
+        "@rollup/rollup-linux-ppc64-musl": "4.63.6",
+        "@rollup/rollup-linux-riscv64-gnu": "4.63.6",
+        "@rollup/rollup-linux-riscv64-musl": "4.63.6",
+        "@rollup/rollup-linux-s390x-gnu": "4.63.6",
+        "@rollup/rollup-linux-x64-gnu": "4.63.6",
+        "@rollup/rollup-linux-x64-musl": "4.63.6",
+        "@rollup/rollup-openbsd-x64": "4.63.6",
+        "@rollup/rollup-openharmony-arm64": "4.63.6",
+        "@rollup/rollup-win32-arm64-msvc": "4.63.6",
+        "@rollup/rollup-win32-ia32-msvc": "4.63.6",
+        "@rollup/rollup-win32-x64-gnu": "4.63.6",
+        "@rollup/rollup-win32-x64-msvc": "4.63.6",
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
-      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz",
+      "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==",
       "license": "MIT"
     },
     "node_modules/semver": {
@@ -3774,15 +4506,36 @@
         "node": ">=8"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3796,6 +4549,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
+      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3810,9 +4583,9 @@
       }
     },
     "node_modules/tailwind-merge": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
-      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.7.0.tgz",
+      "integrity": "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -3820,15 +4593,15 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
-      "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
+      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
       "license": "MIT"
     },
     "node_modules/tapable": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
-      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -3844,14 +4617,28 @@
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "license": "MIT"
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
+        "picomatch": "^4.0.4"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -3860,11 +4647,81 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+    "node_modules/tinypool": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
+      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.6.tgz",
+      "integrity": "sha512-u8KszXvGfU68hVcZpRHKG28T0krMuv2G5nDhiHaMLen/gIuFEgIJhaJuO69qjnXg5paSrbPMFfx3brNuN8eVSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.4.16",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.16.tgz",
+      "integrity": "sha512-QwBER5KMR86IIjpIiO7H/Z3IMJPsZ1A6RKPAqzTTgOyUQUSt9FdnKcqhTaJmkY6HVrgouZHZR0ncK5QxvmnQeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.16"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.16",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.16.tgz",
+      "integrity": "sha512-MDolfaSJtlSK5Y0A1xl3277ekubZwobpBjugknDizI9O5Rm60a1m8k4ICK+MRsCDzPygT81mp3BBf5RKDlFRfA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.2.tgz",
+      "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -3879,10 +4736,20 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/undici": {
+      "version": "8.11.2",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-8.11.2.tgz",
+      "integrity": "sha512-u4UB2/IrKdU6lFxumHmmo1a3fCQO5tzQllRorfoRS63txhrB7xTpSn1PftwC4qEHkOaqP95fCWW4lJzwErwzhQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.19.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",
-      "integrity": "sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.3.tgz",
+      "integrity": "sha512-pJ2sYawQS0R/WI928Gj5GlPhTGzbMelq0+4INtSYNDV9ErKJcX6xjGWkoG/VnB3dpUm00zALaqkrUD77pO5TDQ==",
       "dev": true,
       "funding": [
         {
@@ -3921,9 +4788,9 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
-      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
+      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3952,12 +4819,12 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.12",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
-      "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
+      "version": "7.3.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz",
+      "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==",
       "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.25.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
         "fdir": "^6.5.0",
         "picomatch": "^4.0.3",
         "postcss": "^8.5.6",
@@ -4025,6 +4892,150 @@
         }
       }
     },
+    "node_modules/vite-node": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.1",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.7.tgz",
+      "integrity": "sha512-KrxIJ62Fd89gfysR4WotlgZABiz2dqFPgqGzX7s+CwsqLFomRH7777ZcrOD6+WVAh7khPQP41A+BKbpcJFrdEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/expect": "3.2.7",
+        "@vitest/mocker": "3.2.7",
+        "@vitest/pretty-format": "^3.2.7",
+        "@vitest/runner": "3.2.7",
+        "@vitest/snapshot": "3.2.7",
+        "@vitest/spy": "3.2.7",
+        "@vitest/utils": "3.2.7",
+        "chai": "^5.2.0",
+        "debug": "^4.4.1",
+        "expect-type": "^1.2.1",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
+        "std-env": "^3.9.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.2",
+        "tinyglobby": "^0.2.14",
+        "tinypool": "^1.1.1",
+        "tinyrainbow": "^2.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
+        "vite-node": "3.2.4",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/debug": "^4.1.12",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@vitest/browser": "3.2.7",
+        "@vitest/ui": "3.2.7",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/debug": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-6.0.0.tgz",
+      "integrity": "sha512-4Nsy8K5Tr6SPDH9jhKJOHf7ChDrc1zufZTVSF7x72hwuEXBqxqk9G6cK+K2NRUtB3iELRJqjXb4JPDMBjMTl2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "17.1.2",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-17.1.2.tgz",
+      "integrity": "sha512-TEZA+Zqxin7Jjsm2cjRohCmen5awh+hT6Zi3VZdqZlNRk7zvOI/9WpBFg/DWlA56bWnzwm6DuB8NS0EsxQH9uQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.15.1",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^22.14.0 || >=24.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4041,6 +5052,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -4051,6 +5079,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index c0479a1..8cf2db5 100644
--- a/package.json
+++ b/package.json
@@ -1,24 +1,20 @@
 {
-  "name": "frontend",
+  "name": "edunerve-ai-frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.2.3",
-    "@react-oauth/google": "^0.12.2",
     "@tailwindcss/vite": "^4.1.16",
     "@vapi-ai/web": "^2.5.0",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.26.2",
     "lucide-react": "^0.552.0",
-    "motion": "^12.26.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.9.5",
@@ -28,13 +24,14 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
+    "@testing-library/react": "^16.3.3",
     "@vitejs/plugin-react": "^5.0.4",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
-    "vite": "^7.1.12"
+    "jsdom": "^30.1.1",
+    "vite": "^7.1.12",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
deleted file mode 100644
index 37ae1da..0000000
--- a/src/components/ui/button.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..378ccef
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
deleted file mode 100644
index cec6ac9..0000000
--- a/src/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index ca40658..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      animation: {
-        'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-        'robot-pulse': 'robotPulse 1s infinite',
-      },
-      keyframes: {
-        robotPulse: {
-          '0%, 100%': { transform: 'scale(1)' },
-          '50%': { transform: 'scale(1.05)' },
-        },
-      },
-    },
-  },
-  plugins: [],
-}
diff --git a/vitest.config.js b/vitest.config.js
new file mode 100644
index 0000000..63e408c
--- /dev/null
+++ b/vitest.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  esbuild: { jsx: "automatic" },
+  test: {
+    environment: "node",
+    include: ["tests/**/*.test.{js,jsx}"],
+  },
+});

From 937adbe312699df5b0f5f560eb7805b466b1cc75 Mon Sep 17 00:00:00 2001
From: NSTKrishna <krishnagehlot936@gmail.com>
Date: Sat, 3 Oct 2026 16:21:19 +0530
Subject: [PATCH 03/10] Add the API client, learner context and async hooks

Centralises every backend call in one module so screens never build URLs
or branch on message text.

- lib/api.js throws a typed ApiError carrying a stable `code`; session
  expiry codes trigger a global logout through a registered handler
- LearnerContext restores the session from a cached profile when the
  server is unreachable, instead of signing the user out
- useVapiInterview holds call state in refs so Vapi's callbacks cannot
  read stale values, and submits the transcript exactly once
- lib/format.js owns the 0-10 score scale, duration and date formatting
---
 src/context/LearnerContext.jsx | 450 +++++++++++----------------------
 src/hooks/useAsync.js          |  26 ++
 src/hooks/useVapiInterview.js  | 167 ++++++++++++
 src/lib/api.js                 | 156 ++++++------
 src/lib/format.js              | 101 ++++++++
 5 files changed, 524 insertions(+), 376 deletions(-)
 create mode 100644 src/hooks/useAsync.js
 create mode 100644 src/hooks/useVapiInterview.js
 create mode 100644 src/lib/format.js

diff --git a/src/context/LearnerContext.jsx b/src/context/LearnerContext.jsx
index acde7c8..9dc8298 100644
--- a/src/context/LearnerContext.jsx
+++ b/src/context/LearnerContext.jsx
@@ -1,332 +1,184 @@
 /* eslint-disable react-refresh/only-export-components */
-import { createContext, useContext, useState, useEffect } from "react";
-import { authAPI } from "../lib/api";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { ApiError, TOKEN_KEY, authAPI, setSessionExpiredHandler, tokenAPI } from "../lib/api";
 
-const LearnerContext = createContext(null);
-
-export function LearnerProvider({ children }) {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [authUser, setAuthUser] = useState(null);
-  const [learnerProfile, setLearnerProfile] = useState(null);
-  const [tokens, setTokens] = useState(null);
-  const [loading, setLoading] = useState(true);
+const PROFILE_CACHE_KEY = "cachedProfile";
 
-  const fetchTokens = async () => {
+const storage = {
+  get: (key) => {
     try {
-      const response = await authAPI.getTokens();
-      console.log("Token response:", response);
-      if (response && response.tokensRemaining !== undefined) {
-        setTokens(response.tokensRemaining);
-      }
-    } catch (error) {
-      console.error("Failed to fetch tokens:", error);
+      return localStorage.getItem(key);
+    } catch {
+      return null;
     }
-  };
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      fetchTokens();
+  },
+  set: (key, value) => {
+    try {
+      localStorage.setItem(key, value);
+    } catch {
+      /* private mode etc. - the session just won't survive a reload */
     }
-  }, [isAuthenticated]);
-
-  useEffect(() => {
-    const checkAuth = async () => {
-      const token = localStorage.getItem("authToken");
-
-      console.log("🔐 Auth check on mount:", {
-        hasToken: !!token,
-      });
-
-      if (token) {
-        try {
-          const response = await authAPI.getProfile();
-          const user = response.success ? response.user : response;
-
-          console.log("✅ Auth check successful:", {
-            userId: user.id,
-            email: user.email,
-          });
-
-          setAuthUser({
-            provider: "credentials",
-            email: user.email,
-            name: user.name,
-            picture: null,
-          });
-
-          const profileData = {
-            id: user.id,
-            name: user.name,
-            email: user.email,
-            avatar: user.avatar,
-            role: user.role,
-            experience: user.experience,
-            skills: user.skills || [],
-            interviewsPracticed: user.interviews || [],
-          };
+  },
+  remove: (key) => {
+    try {
+      localStorage.removeItem(key);
+    } catch {
+      /* ignore */
+    }
+  },
+};
+
+const readCachedProfile = () => {
+  try {
+    return JSON.parse(storage.get(PROFILE_CACHE_KEY));
+  } catch {
+    return null;
+  }
+};
 
-          localStorage.setItem("cachedProfile", JSON.stringify(profileData));
+const LearnerContext = createContext(null);
 
-          setIsAuthenticated(true);
-          setLearnerProfile(profileData);
-        } catch (error) {
-          console.error("Auth check failed:", error);
+export function LearnerProvider({ children }) {
+  const [user, setUserState] = useState(null);
+  const [loading, setLoading] = useState(true);
 
-          if (
-            error.message?.includes("401") ||
-            error.message?.includes("Invalid token") ||
-            error.message?.includes("Token has expired")
-          ) {
-            console.error("🔒 Token is invalid or expired - clearing session");
-            localStorage.removeItem("authToken");
-            localStorage.removeItem("cachedProfile");
-            setIsAuthenticated(false);
-            setAuthUser(null);
-            setLearnerProfile(null);
-          } else {
-            console.warn(
-              "⚠️ Server temporarily unavailable - keeping user session active",
-            );
+  const setUser = useCallback((next) => {
+    setUserState(next);
+    if (next) storage.set(PROFILE_CACHE_KEY, JSON.stringify(next));
+    else storage.remove(PROFILE_CACHE_KEY);
+  }, []);
 
-            const cachedProfile = localStorage.getItem("cachedProfile");
+  const logout = useCallback(() => {
+    storage.remove(TOKEN_KEY);
+    setUser(null);
+  }, [setUser]);
 
-            if (cachedProfile) {
-              const profile = JSON.parse(cachedProfile);
-              setLearnerProfile(profile);
-              setIsAuthenticated(true);
+  useEffect(() => {
+    setSessionExpiredHandler(logout);
+    return () => setSessionExpiredHandler(null);
+  }, [logout]);
 
-              setAuthUser({
-                provider: "credentials",
-                email: profile.email,
-                name: profile.name,
-                picture: null,
-              });
-            } else {
-              try {
-                const base64Url = token.split(".")[1];
-                const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
-                const jsonPayload = decodeURIComponent(
-                  atob(base64)
-                    .split("")
-                    .map(
-                      (c) =>
-                        `%${("00" + c.charCodeAt(0).toString(16)).slice(-2)}`,
-                    )
-                    .join(""),
-                );
-                const decoded = JSON.parse(jsonPayload);
+  // Restore the session on page load.
+  useEffect(() => {
+    let cancelled = false;
 
-                setAuthUser({
-                  provider: "credentials",
-                  email: decoded.email,
-                  name: decoded.name || "User",
-                  picture: null,
-                });
-                setIsAuthenticated(true);
-                setLearnerProfile({
-                  id: decoded.userId,
-                  name: decoded.name || "User",
-                  email: decoded.email,
-                  avatar: null,
-                  role: null,
-                  experience: null,
-                  skills: [],
-                  interviewsPracticed: [],
-                });
-              } catch (decodeError) {
-                console.error("Failed to decode token:", decodeError);
-                // If we can't decode the token, clear the session
-                localStorage.removeItem("authToken");
-                localStorage.removeItem("cachedProfile");
-                setIsAuthenticated(false);
-                setAuthUser(null);
-                setLearnerProfile(null);
-              }
-            }
-          }
+    async function restore() {
+      if (!storage.get(TOKEN_KEY)) {
+        setLoading(false);
+        return;
+      }
+      try {
+        const { user: profile } = await authAPI.getProfile();
+        if (!cancelled) setUser(profile);
+      } catch (error) {
+        if (cancelled) return;
+        if (error instanceof ApiError && error.status === 0) {
+          // Server unreachable: keep the user signed in with the last known profile.
+          const cached = readCachedProfile();
+          if (cached) setUserState(cached);
+          else storage.remove(TOKEN_KEY);
+        } else {
+          logout(); // 401 (handled globally) or the account no longer exists
         }
-      } else {
-        console.log("ℹNo authentication found - user needs to log in");
+      } finally {
+        if (!cancelled) setLoading(false);
       }
-      setLoading(false);
-      console.log("🏁 Auth check complete:", { isAuthenticated: !!token });
-    };
-    checkAuth();
-  }, []);
-
-  const login = async (email, password) => {
-    try {
-      const response = await authAPI.login(email, password);
-      localStorage.setItem("authToken", response.token);
-
-      const authUserData = {
-        provider: "credentials",
-        email: response.user.email,
-        name: response.user.name,
-        picture: null,
-      };
-
-      const profileData = {
-        id: response.user.id,
-        name: response.user.name,
-        email: response.user.email,
-        role: response.user.role,
-        experience: response.user.experience,
-        skills: response.user.skills || [],
-        interviewsPracticed: [],
-      };
-
-      localStorage.setItem("cachedProfile", JSON.stringify(profileData));
-
-      setIsAuthenticated(true);
-      setAuthUser(authUserData);
-      setLearnerProfile(profileData);
-
-      return { success: true };
-    } catch (error) {
-      console.error("Login failed:", error);
-      return { success: false, error: error.message };
     }
-  };
-
-  const signup = async (name, email, password, role, experience, skills) => {
-    try {
-      const response = await authAPI.register(
-        name,
-        email,
-        password,
-        role,
-        experience,
-        skills,
-      );
-      console.log("Signup response:", response);
-      console.log("Saving token:", response.token);
-      localStorage.setItem("authToken", response.token);
-
-      const savedToken = localStorage.getItem("authToken");
-      console.log("Token saved successfully:", !!savedToken);
 
-      const authUserData = {
-        provider: "credentials",
-        email: response.user.email,
-        name: response.user.name,
-        picture: null,
-      };
+    restore();
+    return () => {
+      cancelled = true;
+    };
+  }, [logout, setUser]);
+
+  const startSession = useCallback(
+    ({ user: profile, token }) => {
+      storage.set(TOKEN_KEY, token);
+      setUser(profile);
+    },
+    [setUser],
+  );
 
-      const profileData = {
-        id: response.user.id,
-        name: response.user.name,
-        email: response.user.email,
-        role: response.user.role,
-        experience: response.user.experience,
-        skills: response.user.skills || [],
-        interviewsPracticed: [],
-      };
+  // Auth actions resolve to { success, error } so forms can show the message without try/catch.
+  const login = useCallback(
+    async (email, password) => {
+      try {
+        startSession(await authAPI.login({ email, password }));
+        return { success: true };
+      } catch (error) {
+        return { success: false, error: error.message };
+      }
+    },
+    [startSession],
+  );
 
-      localStorage.setItem("cachedProfile", JSON.stringify(profileData));
+  const signup = useCallback(
+    async ({ name, email, password }) => {
+      try {
+        startSession(await authAPI.register({ name, email, password }));
+        return { success: true };
+      } catch (error) {
+        return { success: false, error: error.message };
+      }
+    },
+    [startSession],
+  );
 
-      setIsAuthenticated(true);
-      setAuthUser(authUserData);
-      setLearnerProfile(profileData);
+  const updateProfile = useCallback(
+    async (changes) => {
+      const { user: updated } = await authAPI.updateProfile(changes);
+      setUser(updated);
+      return updated;
+    },
+    [setUser],
+  );
 
-      return { success: true };
-    } catch (error) {
-      console.error("Signup failed:", error);
-      return { success: false, error: error.message };
+  const refreshUser = useCallback(async () => {
+    try {
+      const { user: profile } = await authAPI.getProfile();
+      setUser(profile);
+    } catch {
+      /* a stale profile is fine; session expiry is handled globally */
     }
-  };
-
-  const logout = () => {
-    localStorage.removeItem("authToken");
-    localStorage.removeItem("cachedProfile");
-    setIsAuthenticated(false);
-    setAuthUser(null);
-    setLearnerProfile(null);
-  };
+  }, [setUser]);
 
-  const setProfile = (profileData) => {
-    setLearnerProfile((prev) => {
-      const updatedProfile = {
-        ...prev,
-        ...profileData,
-        name: profileData?.name || prev?.name || authUser?.name || "",
-        email: profileData?.email || prev?.email || authUser?.email || "",
-        avatar:
-          profileData?.avatar || prev?.avatar || authUser?.picture || null,
-        role: profileData?.role || prev?.role || "",
-        experience: profileData?.experience || prev?.experience || "",
-        skills: profileData?.skills || prev?.skills || [],
-      };
-
-      return updatedProfile;
-    });
-  };
-
-  const saveInterviewResult = async (interviewData) => {
-    setLearnerProfile((prev) => {
-      if (!prev) return prev;
-      return {
-        ...prev,
-        interviewsPracticed: [
-          ...(prev.interviewsPracticed || []),
-          {
-            ...interviewData,
-            date: new Date().toISOString(),
-          },
-        ],
-      };
-    });
-  };
+  /** Apply a balance we already know (e.g. from /start-interview) without another request. */
+  const setTokens = useCallback(
+    (tokens) => setUserState((prev) => (prev ? { ...prev, tokens } : prev)),
+    [],
+  );
 
-  const refreshProfile = async () => {
+  const refreshTokens = useCallback(async () => {
     try {
-      const token = localStorage.getItem("authToken");
-      if (!token) return;
-
-      const response = await authAPI.getProfile();
-      const user = response.success ? response.user : response;
-
-      setLearnerProfile({
-        id: user.id,
-        name: user.name,
-        email: user.email,
-        avatar: user.avatar,
-        role: user.role,
-        experience: user.experience,
-        skills: user.skills || [],
-        interviewsPracticed: user.interviews || [],
-      });
-    } catch (error) {
-      console.error("Error refreshing profile:", error);
+      const { tokensRemaining } = await tokenAPI.getBalance();
+      setTokens(tokensRemaining);
+    } catch {
+      /* the chip keeps showing the last known balance */
     }
-  };
-
-  const value = {
-    isAuthenticated,
-    authUser,
-    learnerProfile,
-    tokens,
-    loading,
-    login,
-    signup,
-    logout,
-    setProfile,
-    // completeQuiz removed
-    saveInterviewResult,
-    refreshProfile,
-    fetchTokens,
-    setTokens,
-  };
-
-  return (
-    <LearnerContext.Provider value={value}>{children}</LearnerContext.Provider>
+  }, [setTokens]);
+
+  const value = useMemo(
+    () => ({
+      user,
+      isAuthenticated: Boolean(user),
+      loading,
+      tokens: user ? user.tokens : null,
+      login,
+      signup,
+      logout,
+      updateProfile,
+      refreshUser,
+      setTokens,
+      refreshTokens,
+    }),
+    [user, loading, login, signup, logout, updateProfile, refreshUser, setTokens, refreshTokens],
   );
+
+  return <LearnerContext.Provider value={value}>{children}</LearnerContext.Provider>;
 }
 
 export function useLearner() {
   const context = useContext(LearnerContext);
-  if (!context) {
-    throw new Error("useLearner must be used within LearnerProvider");
-  }
+  if (!context) throw new Error("useLearner must be used within LearnerProvider");
   return context;
 }
diff --git a/src/hooks/useAsync.js b/src/hooks/useAsync.js
new file mode 100644
index 0000000..ab31203
--- /dev/null
+++ b/src/hooks/useAsync.js
@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Runs `load()` on mount and whenever `deps` change.
+ * Returns { data, error, loading, reload }; ignores results from stale runs.
+ */
+export function useAsync(load, deps) {
+  const [state, setState] = useState({ data: null, error: null, loading: true });
+  const [nonce, setNonce] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    setState((prev) => ({ ...prev, error: null, loading: true }));
+    load().then(
+      (data) => !cancelled && setState({ data, error: null, loading: false }),
+      (error) => !cancelled && setState({ data: null, error, loading: false }),
+    );
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...deps, nonce]);
+
+  const reload = useCallback(() => setNonce((n) => n + 1), []);
+  return { ...state, reload };
+}
diff --git a/src/hooks/useVapiInterview.js b/src/hooks/useVapiInterview.js
new file mode 100644
index 0000000..9f36717
--- /dev/null
+++ b/src/hooks/useVapiInterview.js
@@ -0,0 +1,167 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import Vapi from "@vapi-ai/web";
+import { interviewAPI } from "../lib/api";
+
+/**
+ * Runs one live interview: Vapi call + transcript + submitting the result.
+ *
+ * Everything the event handlers need lives in refs (not state) because Vapi
+ * callbacks are registered once and would otherwise read stale values. That
+ * stale-closure problem is why feedback used to be lost when the call ended on
+ * Vapi's side. There is exactly one `finish()` and it only ever runs once.
+ *
+ * phase: idle -> connecting -> live -> finishing -> done | failed
+ *
+ * start() resolves to { ok: true } once the call is set up, or { ok: false, error } if it
+ * could not start (the interview is then closed and refunded automatically).
+ */
+export function useVapiInterview({ onFinished }) {
+  const [phase, setPhase] = useState("idle");
+  const [transcript, setTranscript] = useState([]);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+  const [error, setError] = useState(null);
+
+  const vapiRef = useRef(null);
+  const interviewIdRef = useRef(null);
+  const transcriptRef = useRef([]);
+  const startedAtRef = useRef(0);
+  const timerRef = useRef(null);
+  const submittedRef = useRef(false); // true once a /complete request succeeded
+  const submittingRef = useRef(false);
+  const onFinishedRef = useRef(onFinished);
+
+  useEffect(() => {
+    onFinishedRef.current = onFinished;
+  }, [onFinished]);
+
+  const stopTimer = useCallback(() => {
+    clearInterval(timerRef.current);
+    timerRef.current = null;
+  }, []);
+
+  const startTimer = useCallback(() => {
+    stopTimer();
+    startedAtRef.current = Date.now();
+    timerRef.current = setInterval(
+      () => setSeconds(Math.floor((Date.now() - startedAtRef.current) / 1000)),
+      1000,
+    );
+  }, [stopTimer]);
+
+  /** Send the transcript to the backend. Safe to call repeatedly: it submits at most once. */
+  const finish = useCallback(async ({ keepError = false } = {}) => {
+    if (!interviewIdRef.current || submittedRef.current || submittingRef.current) return;
+    submittingRef.current = true;
+    stopTimer();
+    setIsSpeaking(false);
+    setPhase("finishing");
+    if (!keepError) setError(null);
+
+    try {
+      const result = await interviewAPI.complete({
+        interviewId: interviewIdRef.current,
+        transcript: transcriptRef.current,
+        duration: startedAtRef.current ? Math.round((Date.now() - startedAtRef.current) / 1000) : undefined,
+      });
+      submittedRef.current = true;
+      setPhase("done");
+      onFinishedRef.current?.(result);
+    } catch (err) {
+      if (err.code === "ALREADY_FINISHED") {
+        submittedRef.current = true;
+      }
+      setError(err.message);
+      setPhase("failed"); // transcript is kept so the user can retry
+    } finally {
+      submittingRef.current = false;
+    }
+  }, [stopTimer]);
+
+  const start = useCallback(
+    async (session) => {
+      const { interviewId, publicKey, assistantConfig } = session;
+      interviewIdRef.current = interviewId;
+      transcriptRef.current = [];
+      submittedRef.current = false;
+      setTranscript([]);
+      setSeconds(0);
+      setError(null);
+      setPhase("connecting");
+
+      try {
+        if (!publicKey) throw new Error("Voice service is not configured on the server.");
+        const vapi = new Vapi(publicKey);
+        vapiRef.current = vapi;
+
+        vapi.on("call-start", () => {
+          setPhase("live");
+          startTimer();
+        });
+        vapi.on("call-end", () => finish());
+        vapi.on("speech-start", () => setIsSpeaking(true));
+        vapi.on("speech-end", () => setIsSpeaking(false));
+        vapi.on("message", (message) => {
+          if (message.type !== "transcript" || message.transcriptType !== "final") return;
+          const turn = {
+            speaker: message.role === "assistant" ? "Interviewer" : "You",
+            text: message.transcript,
+            timestamp: new Date().toISOString(),
+          };
+          transcriptRef.current = [...transcriptRef.current, turn];
+          setTranscript(transcriptRef.current);
+        });
+        vapi.on("error", (event) => {
+          console.error("Vapi error:", event);
+          setError(event?.errorMsg || event?.error?.message || event?.message || "The voice connection failed.");
+        });
+
+        await vapi.start(assistantConfig);
+        return { ok: true };
+      } catch (err) {
+        // The interview row exists and tokens were charged. Closing it with an empty
+        // transcript makes the server mark it abandoned and refund the tokens.
+        const message = err?.message || "Could not start the voice call.";
+        setError(message);
+        await finish({ keepError: true });
+        return { ok: false, error: message };
+      }
+    },
+    [finish, startTimer],
+  );
+
+  /** End button: stopping the call fires `call-end`, which submits. Without a live call, submit directly. */
+  const stop = useCallback(async () => {
+    const vapi = vapiRef.current;
+    if (vapi && phase === "live") {
+      vapi.stop();
+      // call-end normally follows; this is a safety net if it never arrives.
+      setTimeout(() => finish(), 4000);
+    } else {
+      await finish();
+    }
+  }, [finish, phase]);
+
+  const retry = useCallback(() => finish(), [finish]);
+
+  // Leaving the page mid-call: hang up and save what we have (best effort).
+  useEffect(
+    () => () => {
+      stopTimer();
+      try {
+        vapiRef.current?.stop();
+      } catch {
+        /* already stopped */
+      }
+      if (interviewIdRef.current && !submittedRef.current && !submittingRef.current) {
+        submittingRef.current = true; // keeps a late `call-end` from submitting a second time
+        interviewAPI
+          .complete({ interviewId: interviewIdRef.current, transcript: transcriptRef.current })
+          .catch(() => {});
+      }
+    },
+    [stopTimer],
+  );
+
+  return { phase, transcript, isSpeaking, seconds, error, start, stop, retry };
+}
diff --git a/src/lib/api.js b/src/lib/api.js
index 9c8a552..f453dbb 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -1,99 +1,101 @@
-const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3000/api";
+// All backend calls live here. See API_CONTRACT.md in the backend repo.
+const API_URL = (import.meta.env.VITE_API_URL || "http://localhost:3000/api").replace(/\/$/, "");
+
+export const TOKEN_KEY = "authToken";
 
 const getAuthToken = () => {
-  return localStorage.getItem("authToken");
+  try {
+    return localStorage.getItem(TOKEN_KEY);
+  } catch {
+    return null;
+  }
 };
 
-const fetchWithAuth = async (url, options = {}) => {
-  const token = getAuthToken();
-  const headers = {
-    "Content-Type": "application/json",
-    ...options.headers,
-  };
-
-  if (token) {
-    headers.Authorization = `Bearer ${token}`;
+/** Every failed request throws this. Branch on `code`, never on `message`. */
+export class ApiError extends Error {
+  constructor(message, { status = 0, code = "UNKNOWN", details } = {}) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.code = code;
+    this.details = details;
   }
+}
 
-  const response = await fetch(url, {
-    ...options,
-    headers,
-  });
-
-  if (!response.ok) {
-    const error = await response
-      .json()
-      .catch(() => ({ message: "An error occurred" }));
-    throw new Error(error.message || `HTTP ${response.status}`);
-  }
+// Codes meaning "your session is no longer valid" (as opposed to e.g. a wrong login password).
+const SESSION_CODES = new Set(["UNAUTHORIZED", "INVALID_TOKEN", "TOKEN_EXPIRED"]);
+let onSessionExpired = null;
 
-  return response.json();
+/** Called once by the auth provider so an expired JWT logs the user out anywhere in the app. */
+export const setSessionExpiredHandler = (handler) => {
+  onSessionExpired = handler;
 };
 
-// Auth API
-export const authAPI = {
-  login: async (email, password) => {
-    return fetchWithAuth(`${API_URL}/auth/login`, {
-      method: "POST",
-      body: JSON.stringify({ email, password }),
-    });
-  },
-
-  register: async (name, email, password, role, experience, skills) => {
-    return fetchWithAuth(`${API_URL}/auth/register`, {
-      method: "POST",
-      body: JSON.stringify({ name, email, password, role, experience, skills }),
+async function request(path, { method = "GET", body, query } = {}) {
+  const headers = {};
+  const token = getAuthToken();
+  if (token) headers.Authorization = `Bearer ${token}`;
+  if (body !== undefined) headers["Content-Type"] = "application/json";
+
+  const search = query
+    ? new URLSearchParams(
+        Object.entries(query).filter(([, v]) => v !== undefined && v !== null && v !== ""),
+      ).toString()
+    : "";
+  const url = `${API_URL}${path}${search ? `?${search}` : ""}`;
+
+  let response;
+  try {
+    response = await fetch(url, {
+      method,
+      headers,
+      body: body !== undefined ? JSON.stringify(body) : undefined,
     });
-  },
-
-  getProfile: async () => {
-    return fetchWithAuth(`${API_URL}/auth/profile`);
-  },
-
-  updateProfile: async (data) => {
-    return fetchWithAuth(`${API_URL}/auth/profile`, {
-      method: "PUT",
-      body: JSON.stringify(data),
+  } catch {
+    throw new ApiError("Can't reach the server. Check your connection and try again.", {
+      code: "NETWORK_ERROR",
     });
-  },
-
-  getTokens: async () => {
-    return fetchWithAuth(`${API_URL}/token`);
-  },
-};
+  }
 
-export const interviewAPI = {
-  startInterview: async (role, interviewType, technologies) => {
-    return fetchWithAuth(`${API_URL}/interview/start-interview`, {
-      method: "POST",
-      body: JSON.stringify({ role, interviewType, technologies }),
-    });
-  },
+  const data = await response.json().catch(() => null);
 
-  completeInterview: async (interviewId, transcript, duration) => {
-    return fetchWithAuth(`${API_URL}/interview/complete`, {
-      method: "POST",
-      body: JSON.stringify({ interviewId, transcript, duration }),
+  if (!response.ok) {
+    const error = new ApiError(data?.error || `Request failed (${response.status})`, {
+      status: response.status,
+      code: data?.code || "UNKNOWN",
+      details: data?.details,
     });
-  },
+    if (response.status === 401 && SESSION_CODES.has(error.code)) onSessionExpired?.();
+    throw error;
+  }
 
-  getInterview: async (interviewId) => {
-    return fetchWithAuth(`${API_URL}/interview/${interviewId}`);
-  },
+  return data;
+}
 
-  getUserInterviews: async () => {
-    return fetchWithAuth(`${API_URL}/interview/user/history`);
-  },
+export const authAPI = {
+  login: ({ email, password }) => request("/auth/login", { method: "POST", body: { email, password } }),
+  register: (payload) => request("/auth/register", { method: "POST", body: payload }),
+  getProfile: () => request("/auth/profile"),
+  updateProfile: (changes) => request("/auth/profile", { method: "PUT", body: changes }),
+  changePassword: (payload) => request("/auth/password", { method: "PUT", body: payload }),
+  deleteAccount: (password) => request("/auth/me", { method: "DELETE", body: { password } }),
 };
 
 export const dashboardAPI = {
-  getStats: async () => {
-    return fetchWithAuth(`${API_URL}/auth/dashboard`);
-  },
+  getStats: () => request("/auth/dashboard"),
 };
 
-export default {
-  authAPI,
-  interviewAPI,
-  dashboardAPI,
+export const tokenAPI = {
+  getBalance: () => request("/token"),
+  getTransactions: (limit = 30) => request("/token/transactions", { query: { limit } }),
+};
+
+export const interviewAPI = {
+  getOptions: () => request("/interview/options"),
+  start: ({ role, interviewType, technologies }) =>
+    request("/interview/start-interview", { method: "POST", body: { role, interviewType, technologies } }),
+  complete: ({ interviewId, transcript, duration }) =>
+    request("/interview/complete", { method: "POST", body: { interviewId, transcript, duration } }),
+  get: (interviewId) => request(`/interview/${encodeURIComponent(interviewId)}`),
+  list: (params) => request("/interview/user/history", { query: params }),
 };
diff --git a/src/lib/format.js b/src/lib/format.js
new file mode 100644
index 0000000..bb16c36
--- /dev/null
+++ b/src/lib/format.js
@@ -0,0 +1,101 @@
+// Backend scores are 0-10 (or null when there was no AI evaluation).
+export const SCORE_MAX = 10;
+
+export const hasScore = (value) => typeof value === "number" && Number.isFinite(value);
+
+export function formatScore(value) {
+  if (!hasScore(value)) return "N/A";
+  const rounded = Math.round(value * 10) / 10;
+  return `${Number.isInteger(rounded) ? rounded : rounded.toFixed(1)}/${SCORE_MAX}`;
+}
+
+/** 0-100 for progress bars. */
+export const scoreToPercent = (value) => (hasScore(value) ? Math.max(0, Math.min(100, (value / SCORE_MAX) * 100)) : 0);
+
+/**
+ * "success" | "warning" | "danger" | "neutral" — the semantic band a score falls in.
+ *
+ * Banded on the value as DISPLAYED, not the raw one. formatScore rounds to one
+ * decimal, so 7.45 prints as "7.5/10"; banding the raw value put "7.5 Developing"
+ * next to "7.5 Strong" on the same screen.
+ */
+export function scoreBand(value) {
+  if (!hasScore(value)) return "neutral";
+  const shown = Math.round(value * 10) / 10;
+  if (shown >= 7.5) return "success";
+  if (shown >= 5) return "warning";
+  return "danger";
+}
+
+const TONE_CLASS = {
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger",
+  neutral: "text-muted-foreground",
+};
+
+export const scoreTone = (value) => TONE_CLASS[scoreBand(value)];
+
+/*
+ * A word for the band, so the score's quality is not carried by colour alone.
+ */
+const BAND_LABEL = {
+  success: "Strong",
+  warning: "Developing",
+  danger: "Needs work",
+  neutral: "Not scored",
+};
+
+export const scoreLabel = (value) => BAND_LABEL[scoreBand(value)];
+
+export function formatDuration(totalSeconds) {
+  const seconds = Math.max(0, Math.round(Number(totalSeconds) || 0));
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+}
+
+export function formatDate(value, options = { dateStyle: "medium" }) {
+  if (!value) return "";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : new Intl.DateTimeFormat(undefined, options).format(date);
+}
+
+export const formatDateTime = (value) => formatDate(value, { dateStyle: "medium", timeStyle: "short" });
+
+export const STATUS_LABELS = {
+  completed: "Completed",
+  in_progress: "In progress",
+  abandoned: "Not finished",
+};
+
+export const initials = (name = "") =>
+  name
+    .split(" ")
+    .filter(Boolean)
+    .map((part) => part[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2) || "U";
+
+/*
+ * A short, stable, citable reference for an interview, derived from its id.
+ * History reads as a body of work you can point at — "EN-7K42" — rather than a
+ * list of undifferentiated rows. Derived, never invented: the same id always
+ * yields the same code.
+ */
+const REF_ALPHABET = "0123456789ABCDEFGHJKMNPQRSTVWXYZ"; // no I, L, O, U
+
+export function interviewRef(id) {
+  const source = String(id ?? "");
+  if (!source) return "EN-0000";
+  let hash = 2166136261;
+  for (let i = 0; i < source.length; i += 1) {
+    hash ^= source.charCodeAt(i);
+    hash = Math.imul(hash, 16777619) >>> 0;
+  }
+  let code = "";
+  for (let i = 0; i < 4; i += 1) {
+    code += REF_ALPHABET[hash % REF_ALPHABET.length];
+    hash = Math.floor(hash / REF_ALPHABET.length);
+  }
+  return `EN-${code}`;
+}

From c12873b99fa772fab7e8fbd4a8f41b8cdfa289db Mon Sep 17 00:00:00 2001
From: NSTKrishna <krishnagehlot936@gmail.com>
Date: Sat, 3 Oct 2026 16:21:19 +0530
Subject: [PATCH 04/10] Add tests for formatting, the API client and page
 rendering

- Pins the 0-10 score scale so a score can never render as a percentage
- Covers ApiError codes and the session-expiry path
- Renders the dashboard, history, report, settings and interview pages
  against a mocked API
---
 tests/api.test.js               |  87 +++++++++++++++++
 tests/format.test.js            |  74 ++++++++++++++
 tests/pages.test.jsx            | 165 ++++++++++++++++++++++++++++++++
 tests/useVapiInterview.test.jsx | 143 +++++++++++++++++++++++++++
 4 files changed, 469 insertions(+)
 create mode 100644 tests/api.test.js
 create mode 100644 tests/format.test.js
 create mode 100644 tests/pages.test.jsx
 create mode 100644 tests/useVapiInterview.test.jsx

diff --git a/tests/api.test.js b/tests/api.test.js
new file mode 100644
index 0000000..6dfef0f
--- /dev/null
+++ b/tests/api.test.js
@@ -0,0 +1,87 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const store = new Map();
+vi.stubGlobal("localStorage", {
+  getItem: (key) => (store.has(key) ? store.get(key) : null),
+  setItem: (key, value) => store.set(key, String(value)),
+  removeItem: (key) => store.delete(key),
+});
+
+const { ApiError, authAPI, interviewAPI, setSessionExpiredHandler } = await import("../src/lib/api.js");
+
+const respond = (status, body) =>
+  Promise.resolve({ ok: status >= 200 && status < 300, status, json: () => Promise.resolve(body) });
+
+beforeEach(() => {
+  store.clear();
+  vi.stubGlobal("fetch", vi.fn());
+});
+
+afterEach(() => setSessionExpiredHandler(null));
+
+describe("request()", () => {
+  it("sends the JWT and a JSON body", async () => {
+    store.set("authToken", "jwt-123");
+    fetch.mockReturnValue(respond(200, { success: true }));
+
+    await authAPI.updateProfile({ name: "A" });
+
+    const [url, init] = fetch.mock.calls[0];
+    expect(url).toBe("http://localhost:3000/api/auth/profile");
+    expect(init.method).toBe("PUT");
+    expect(init.headers.Authorization).toBe("Bearer jwt-123");
+    expect(init.headers["Content-Type"]).toBe("application/json");
+    expect(JSON.parse(init.body)).toEqual({ name: "A" });
+  });
+
+  it("surfaces the backend's `error` message (not a generic HTTP status)", async () => {
+    fetch.mockReturnValue(respond(401, { success: false, code: "INVALID_CREDENTIALS", error: "Invalid email or password" }));
+
+    await expect(authAPI.login({ email: "a@b.co", password: "x" })).rejects.toMatchObject({
+      name: "ApiError",
+      message: "Invalid email or password",
+      status: 401,
+      code: "INVALID_CREDENTIALS",
+    });
+  });
+
+  it("does NOT log the user out for a wrong password", async () => {
+    const onExpired = vi.fn();
+    setSessionExpiredHandler(onExpired);
+    fetch.mockReturnValue(respond(401, { code: "INVALID_CREDENTIALS", error: "Invalid email or password" }));
+
+    await authAPI.login({ email: "a@b.co", password: "x" }).catch(() => {});
+    expect(onExpired).not.toHaveBeenCalled();
+  });
+
+  it("logs the user out when the session is invalid or expired", async () => {
+    const onExpired = vi.fn();
+    setSessionExpiredHandler(onExpired);
+    fetch.mockReturnValue(respond(401, { code: "TOKEN_EXPIRED", error: "Token has expired. Please login again." }));
+
+    await expect(interviewAPI.list()).rejects.toBeInstanceOf(ApiError);
+    expect(onExpired).toHaveBeenCalledTimes(1);
+  });
+
+  it("turns network failures into a NETWORK_ERROR", async () => {
+    fetch.mockRejectedValue(new TypeError("Failed to fetch"));
+    await expect(interviewAPI.getOptions()).rejects.toMatchObject({ code: "NETWORK_ERROR", status: 0 });
+  });
+
+  it("handles non-JSON error bodies", async () => {
+    fetch.mockReturnValue(Promise.resolve({ ok: false, status: 502, json: () => Promise.reject(new Error("not json")) }));
+    await expect(interviewAPI.getOptions()).rejects.toMatchObject({ status: 502, message: "Request failed (502)" });
+  });
+
+  it("builds query strings and skips empty values", async () => {
+    fetch.mockReturnValue(respond(200, { interviews: [] }));
+    await interviewAPI.list({ limit: 10, cursor: undefined, status: "" , interviewType: "mixed" });
+    expect(fetch.mock.calls[0][0]).toBe("http://localhost:3000/api/interview/user/history?limit=10&interviewType=mixed");
+  });
+
+  it("encodes interview ids in the path", async () => {
+    fetch.mockReturnValue(respond(200, {}));
+    await interviewAPI.get("a/b");
+    expect(fetch.mock.calls[0][0]).toContain("/interview/a%2Fb");
+  });
+});
diff --git a/tests/format.test.js b/tests/format.test.js
new file mode 100644
index 0000000..c641481
--- /dev/null
+++ b/tests/format.test.js
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { formatDate, formatDateTime, formatDuration, formatScore, hasScore, initials, scoreBand, scoreLabel, scoreToPercent, scoreTone } from "../src/lib/format.js";
+
+describe("scores (backend scale is 0-10)", () => {
+  it("shows 7.5 as 7.5/10, not 8%", () => {
+    expect(formatScore(7.5)).toBe("7.5/10");
+  });
+  it("shows whole numbers without decimals", () => {
+    expect(formatScore(8)).toBe("8/10");
+  });
+  it("does not treat 1 as 100% (old 0..1 guess)", () => {
+    expect(formatScore(1)).toBe("1/10");
+    expect(scoreToPercent(1)).toBe(10);
+  });
+  it("shows N/A for missing scores", () => {
+    expect(formatScore(null)).toBe("N/A");
+    expect(formatScore(undefined)).toBe("N/A");
+    expect(hasScore(0)).toBe(true);
+    expect(hasScore(null)).toBe(false);
+  });
+  it("clamps progress bar percentages", () => {
+    expect(scoreToPercent(12)).toBe(100);
+    expect(scoreToPercent(-1)).toBe(0);
+    expect(scoreToPercent(null)).toBe(0);
+  });
+  // Bands are semantic now, so these assert the band rather than a palette name.
+  it("picks a score band", () => {
+    expect(scoreBand(9)).toBe("success");
+    expect(scoreBand(7.5)).toBe("success");
+    expect(scoreBand(6)).toBe("warning");
+    expect(scoreBand(5)).toBe("warning");
+    expect(scoreBand(2)).toBe("danger");
+    expect(scoreBand(null)).toBe("neutral");
+  });
+  it("maps each band to a token class and a word", () => {
+    expect(scoreTone(9)).toBe("text-success");
+    expect(scoreTone(6)).toBe("text-warning");
+    expect(scoreTone(2)).toBe("text-danger");
+    expect(scoreTone(null)).toBe("text-muted-foreground");
+    expect(scoreLabel(9)).toBe("Strong");
+    expect(scoreLabel(null)).toBe("Not scored");
+  });
+});
+
+describe("formatDuration", () => {
+  it("formats m:ss", () => {
+    expect(formatDuration(0)).toBe("0:00");
+    expect(formatDuration(65)).toBe("1:05");
+    expect(formatDuration(600)).toBe("10:00");
+  });
+  it("tolerates bad input", () => {
+    expect(formatDuration(undefined)).toBe("0:00");
+    expect(formatDuration(-5)).toBe("0:00");
+  });
+});
+
+describe("initials", () => {
+  it("takes up to two letters", () => {
+    expect(initials("Krishna Kumar Gehlot")).toBe("KK");
+    expect(initials("  ")).toBe("U");
+    expect(initials()).toBe("U");
+  });
+});
+
+describe("dates", () => {
+  it("formats dates and date-times (toLocaleDateString rejects timeStyle, so this guards a crash)", () => {
+    expect(formatDate("2026-10-01T10:00:00Z")).toMatch(/2026/);
+    expect(formatDateTime("2026-10-01T10:00:00Z")).toMatch(/2026/);
+  });
+  it("returns an empty string for missing or invalid dates", () => {
+    expect(formatDate(null)).toBe("");
+    expect(formatDate("not a date")).toBe("");
+  });
+});
diff --git a/tests/pages.test.jsx b/tests/pages.test.jsx
new file mode 100644
index 0000000..e82a12c
--- /dev/null
+++ b/tests/pages.test.jsx
@@ -0,0 +1,165 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const api = vi.hoisted(() => ({
+  interviewAPI: { getOptions: vi.fn(), list: vi.fn(), get: vi.fn(), start: vi.fn(), complete: vi.fn() },
+  dashboardAPI: { getStats: vi.fn() },
+  tokenAPI: { getTransactions: vi.fn(), getBalance: vi.fn() },
+  authAPI: { changePassword: vi.fn(), deleteAccount: vi.fn() },
+}));
+vi.mock("../src/lib/api.js", () => api);
+vi.mock("@vapi-ai/web", () => ({ default: class {} }));
+// recharts needs real layout; the chart itself isn't what these tests are about.
+vi.mock("recharts", async () => {
+  const stub = () => null;
+  return { ResponsiveContainer: ({ children }) => <div data-testid="chart">{children}</div>, LineChart: stub, Line: stub, XAxis: stub, YAxis: stub, CartesianGrid: stub, Tooltip: stub, Legend: stub };
+});
+
+const user = { id: "u1", name: "Ada Lovelace", email: "ada@x.com", role: "Backend Developer", experience: "3-5 years", skills: ["Node.js", "Redis"], tokens: 80 };
+vi.mock("../src/context/LearnerContext.jsx", () => ({
+  useLearner: () => ({ user, tokens: 80, setTokens: vi.fn(), updateProfile: vi.fn(), logout: vi.fn() }),
+}));
+
+const { ToastProvider } = await import("../src/components/common/Toast.jsx");
+const { default: DashboardPage } = await import("../src/pages/DashboardPage.jsx");
+const { default: HistoryPage } = await import("../src/pages/HistoryPage.jsx");
+const { default: ReportPage } = await import("../src/pages/ReportPage.jsx");
+const { default: SettingsPage } = await import("../src/pages/SettingsPage.jsx");
+const { default: InterviewPage } = await import("../src/pages/InterviewPage.jsx");
+
+const options = {
+  roles: { "Backend Developer": ["Node.js", "Redis", "Go"], "Frontend Developer": ["React"] },
+  interviewTypes: ["technical", "behavioral", "mixed"],
+  maxTechnologies: 8,
+  tokenCost: 10,
+  durationMinutes: 10,
+};
+
+const summary = (overrides = {}) => ({
+  id: "i-1", role: "Backend Developer", interviewType: "mixed", technologies: ["Node.js"], status: "completed",
+  duration: 300, startedAt: "2026-10-01T10:00:00Z", completedAt: "2026-10-01T10:05:00Z", feedback: "Solid fundamentals.",
+  strengths: ["Clear"], weakAreas: [], technicalScore: 8, communicationScore: 7, problemSolvingScore: 7.5, overallScore: 7.5, ...overrides,
+});
+
+const renderAt = (path, element, route = path) =>
+  render(
+    <ToastProvider>
+      <MemoryRouter initialEntries={[path]}>
+        <Routes>
+          <Route path={route} element={element} />
+        </Routes>
+      </MemoryRouter>
+    </ToastProvider>,
+  );
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  api.interviewAPI.getOptions.mockResolvedValue({ success: true, ...options });
+  api.tokenAPI.getTransactions.mockResolvedValue({ transactions: [{ id: "t1", delta: -10, balanceAfter: 90, reason: "INTERVIEW_START", createdAt: "2026-10-01T10:00:00Z" }] });
+});
+afterEach(cleanup);
+
+describe("DashboardPage", () => {
+  it("shows scores on the 0-10 scale (not as a wrong percentage)", async () => {
+    api.dashboardAPI.getStats.mockResolvedValue({
+      data: { tokens: 80, skillsTracked: 2, interviewSessions: 3, completedInterviews: 2, avgScore: 7.5,
+        avgScores: { technical: 8, communication: 7, problemSolving: 7.5 }, scoreTrend: [] },
+    });
+    api.interviewAPI.list.mockResolvedValue({ interviews: [summary()], total: 1, nextCursor: null });
+
+    renderAt("/dashboard", <DashboardPage />);
+
+    expect(await screen.findByText("Welcome back, Ada")).toBeTruthy();
+    expect(screen.getAllByText("7.5/10").length).toBeGreaterThan(0);
+    expect(screen.queryByText("8%")).toBeNull();
+    expect(screen.getByText("Recent interviews")).toBeTruthy();
+  });
+
+  it("shows an empty state and a retry on failure", async () => {
+    api.dashboardAPI.getStats.mockRejectedValueOnce(new Error("Server down"));
+    api.interviewAPI.list.mockResolvedValue({ interviews: [], total: 0, nextCursor: null });
+    renderAt("/dashboard", <DashboardPage />);
+    expect(await screen.findByText("Server down")).toBeTruthy();
+
+    api.dashboardAPI.getStats.mockResolvedValue({
+      data: { tokens: 80, skillsTracked: 0, interviewSessions: 0, completedInterviews: 0, avgScore: null,
+        avgScores: { technical: null, communication: null, problemSolving: null }, scoreTrend: [] },
+    });
+    screen.getByText("Try again").click();
+    expect(await screen.findByText("Ready for your first interview?")).toBeTruthy();
+  });
+});
+
+describe("HistoryPage", () => {
+  it("lists interviews and loads the next page with the cursor", async () => {
+    api.interviewAPI.list
+      .mockResolvedValueOnce({ interviews: [summary()], total: 2, nextCursor: "i-1" })
+      .mockResolvedValueOnce({ interviews: [summary({ id: "i-2", role: "Frontend Developer" })], total: 2, nextCursor: null });
+
+    renderAt("/history", <HistoryPage />);
+    expect(await screen.findByText("Backend Developer")).toBeTruthy();
+    expect(screen.getByText("2 interviews")).toBeTruthy();
+
+    screen.getByText("Load more").click();
+    expect(await screen.findByText("Frontend Developer")).toBeTruthy();
+    expect(api.interviewAPI.list).toHaveBeenLastCalledWith(expect.objectContaining({ cursor: "i-1", limit: 10 }));
+    expect(screen.queryByText("Load more")).toBeNull();
+  });
+});
+
+describe("ReportPage", () => {
+  const full = {
+    ...summary(), transcript: [{ speaker: "Interviewer", text: "Hello" }, { speaker: "You", text: "Hi, I'm Ada" }],
+    aiAnalysis: { summary: "Good", notes: ["Use STAR"] }, strengths: ["Clear explanations"], weakAreas: ["Depth"],
+  };
+
+  it("renders scores, feedback and the transcript", async () => {
+    api.interviewAPI.get.mockResolvedValue({ interview: full });
+    renderAt("/interviews/i-1", <ReportPage />, "/interviews/:interviewId");
+
+    expect(await screen.findByText("Solid fundamentals.")).toBeTruthy();
+    expect(screen.getByText("Clear explanations")).toBeTruthy();
+    expect(screen.getByText("Use STAR")).toBeTruthy();
+    expect(screen.getByText("Hi, I'm Ada")).toBeTruthy();
+    expect(api.interviewAPI.get).toHaveBeenCalledWith("i-1");
+  });
+
+  it("explains unscored (fallback) interviews instead of showing fake scores", async () => {
+    api.interviewAPI.get.mockResolvedValue({
+      interview: { ...full, technicalScore: null, communicationScore: null, problemSolvingScore: null, overallScore: null, strengths: [], weakAreas: [] },
+    });
+    renderAt("/interviews/i-1", <ReportPage />, "/interviews/:interviewId");
+    expect(await screen.findByText(/AI feedback wasn.t available/)).toBeTruthy();
+    expect(screen.queryByText("Scores")).toBeNull();
+  });
+
+  it("shows a friendly message for someone else's interview", async () => {
+    api.interviewAPI.get.mockRejectedValue(Object.assign(new Error("Interview not found"), { code: "NOT_FOUND" }));
+    renderAt("/interviews/nope", <ReportPage />, "/interviews/:interviewId");
+    expect(await screen.findByText(/couldn.t find that interview/)).toBeTruthy();
+  });
+});
+
+describe("SettingsPage", () => {
+  it("shows the profile, token ledger and password form", async () => {
+    renderAt("/settings", <SettingsPage />);
+    expect(await screen.findByDisplayValue("Ada Lovelace")).toBeTruthy();
+    expect(screen.getByDisplayValue("Backend Developer")).toBeTruthy();
+    expect(await screen.findByText("Interview")).toBeTruthy(); // ledger row
+    expect(screen.getByText("Update password")).toBeTruthy();
+    expect(screen.getByText("Delete my account")).toBeTruthy();
+  });
+});
+
+describe("InterviewPage", () => {
+  it("builds the form from server options and pre-selects profile skills valid for the role", async () => {
+    renderAt("/interviews", <InterviewPage />);
+    expect(await screen.findByText("AI mock interview")).toBeTruthy();
+    expect(screen.getByDisplayValue("Backend Developer")).toBeTruthy();
+    expect(screen.getByText("Node.js").getAttribute("aria-pressed")).toBe("true");
+    expect(screen.getByText("Go").getAttribute("aria-pressed")).toBe("false");
+    await waitFor(() => expect(screen.getByText("Start interview").closest("button").disabled).toBe(false));
+  });
+});
diff --git a/tests/useVapiInterview.test.jsx b/tests/useVapiInterview.test.jsx
new file mode 100644
index 0000000..4660ba9
--- /dev/null
+++ b/tests/useVapiInterview.test.jsx
@@ -0,0 +1,143 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { instances, complete } = vi.hoisted(() => ({ instances: [], complete: vi.fn() }));
+
+vi.mock("@vapi-ai/web", () => ({
+  default: class FakeVapi {
+    handlers = {};
+    constructor(key) {
+      this.key = key;
+      instances.push(this);
+    }
+    on(event, handler) {
+      this.handlers[event] = handler;
+    }
+    emit(event, payload) {
+      this.handlers[event]?.(payload);
+    }
+    start = vi.fn(async () => {});
+    // Hanging up fires `call-end`, like the real SDK.
+    stop = vi.fn(() => this.emit("call-end"));
+  },
+}));
+
+vi.mock("../src/lib/api.js", () => ({ interviewAPI: { complete } }));
+
+const { useVapiInterview } = await import("../src/hooks/useVapiInterview.js");
+
+const session = { interviewId: "i-1", publicKey: "pk", assistantConfig: { name: "x" } };
+const say = (vapi, role, transcript) =>
+  act(() => vapi.emit("message", { type: "transcript", transcriptType: "final", role, transcript }));
+
+const setup = async () => {
+  const onFinished = vi.fn();
+  const hook = renderHook(() => useVapiInterview({ onFinished }));
+  await act(() => hook.result.current.start(session));
+  const vapi = instances.at(-1);
+  act(() => vapi.emit("call-start"));
+  return { ...hook, vapi, onFinished };
+};
+
+beforeEach(() => {
+  instances.length = 0;
+  complete.mockReset();
+  complete.mockResolvedValue({ interview: { id: "i-1" }, feedbackStatus: "ai", tokensRemaining: 90 });
+});
+
+describe("useVapiInterview", () => {
+  it("starts the call with the server's assistant config", async () => {
+    const { vapi, result } = await setup();
+    expect(vapi.key).toBe("pk");
+    expect(vapi.start).toHaveBeenCalledWith(session.assistantConfig);
+    expect(result.current.phase).toBe("live");
+  });
+
+  it("saves the transcript when Vapi ends the call on its own (the old stale-closure bug)", async () => {
+    const { vapi, onFinished } = await setup();
+    say(vapi, "assistant", "Tell me about yourself");
+    say(vapi, "user", "I build web apps");
+
+    await act(async () => vapi.emit("call-end"));
+
+    expect(complete).toHaveBeenCalledTimes(1);
+    expect(complete.mock.calls[0][0]).toMatchObject({
+      interviewId: "i-1",
+      transcript: [
+        { speaker: "Interviewer", text: "Tell me about yourself" },
+        { speaker: "You", text: "I build web apps" },
+      ],
+    });
+    expect(onFinished).toHaveBeenCalledWith(expect.objectContaining({ tokensRemaining: 90 }));
+  });
+
+  it("ignores partial transcripts", async () => {
+    const { vapi } = await setup();
+    act(() => vapi.emit("message", { type: "transcript", transcriptType: "partial", role: "user", transcript: "hel" }));
+    await act(async () => vapi.emit("call-end"));
+    expect(complete.mock.calls[0][0].transcript).toEqual([]);
+  });
+
+  it("submits exactly once when the user presses End (stop -> call-end)", async () => {
+    const { vapi, result } = await setup();
+    say(vapi, "user", "hello");
+
+    await act(async () => {
+      await result.current.stop();
+    });
+
+    expect(vapi.stop).toHaveBeenCalled();
+    expect(complete).toHaveBeenCalledTimes(1);
+    expect(result.current.phase).toBe("done");
+  });
+
+  it("closes the interview (so the server refunds it) when the call cannot start", async () => {
+    const onFinished = vi.fn();
+    const hook = renderHook(() => useVapiInterview({ onFinished }));
+    const original = instances.length;
+    let outcome;
+    await act(async () => {
+      outcome = await hook.result.current.start({ ...session, publicKey: null });
+    });
+
+    expect(instances.length).toBe(original); // never constructed
+    expect(complete).toHaveBeenCalledWith(expect.objectContaining({ interviewId: "i-1", transcript: [] }));
+    expect(outcome).toMatchObject({ ok: false, error: expect.stringMatching(/not configured/i) });
+    expect(hook.result.current.error).toMatch(/not configured/i);
+  });
+
+  it("keeps the transcript and allows a retry when saving fails", async () => {
+    complete.mockRejectedValueOnce(new Error("boom"));
+    const { vapi, result, onFinished } = await setup();
+    say(vapi, "user", "important answer");
+
+    await act(async () => vapi.emit("call-end"));
+    expect(result.current.phase).toBe("failed");
+    expect(result.current.error).toBe("boom");
+    expect(onFinished).not.toHaveBeenCalled();
+
+    await act(async () => {
+      await result.current.retry();
+    });
+    expect(complete).toHaveBeenCalledTimes(2);
+    expect(complete.mock.calls[1][0].transcript).toHaveLength(1);
+    expect(result.current.phase).toBe("done");
+    expect(onFinished).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not submit twice after success", async () => {
+    const { vapi } = await setup();
+    await act(async () => vapi.emit("call-end"));
+    await act(async () => vapi.emit("call-end"));
+    expect(complete).toHaveBeenCalledTimes(1);
+  });
+
+  it("saves what it has when the user leaves the page mid-call", async () => {
+    const { vapi, unmount } = await setup();
+    say(vapi, "user", "partial");
+    unmount();
+    expect(vapi.stop).toHaveBeenCalled();
+    expect(complete).toHaveBeenCalledTimes(1); // despite the late `call-end` from stop()
+  });
+});

From 1b84df7aab78e1f32c197f52b29163411342ff8d Mon Sep 17 00:00:00 2001
From: NSTKrishna <krishnagehlot936@gmail.com>
Date: Sat, 3 Oct 2026 16:21:44 +0530
Subject: [PATCH 05/10] Add the worksheet design system with light and dark
 themes

Replaces ad-hoc palette classes with one semantic token layer. Results
read as work marked up in the margin: hairlines divide, annotation colour
carries judgement, and nothing is fenced by a drop-shadowed card.

- Four annotation marks, each in four parts (ink, wash, wash-ink, rule):
  red correction, green tick, ochre caution, blue note
- Both themes are designed, not flipped; dark is a warm near-black that
  keeps the paper's temperature rather than a blue-black slate
- Every text pair clears 4.5:1 in both themes; the four chart hues are
  validated for normal vision and protan/deutan/tritan separation
- Loads Bricolage Grotesque for display, Geist for UI and Geist Mono for
  measurement, with a pre-paint script so dark mode never flashes
- Themes the browser surfaces the design system usually forgets:
  selection, caret, scrollbar, focus ring, underline offset, numerals
- Drops components/grid.jsx, whose fixed grid overlay double-painted the
  one already on body

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 index.html                    |  40 +++-
 src/components/brand/Logo.jsx |  74 ++++++
 src/components/grid.jsx       |  17 --
 src/context/ThemeContext.jsx  |  69 ++++++
 src/index.css                 | 436 +++++++++++++++++++++++++---------
 5 files changed, 506 insertions(+), 130 deletions(-)
 create mode 100644 src/components/brand/Logo.jsx
 delete mode 100644 src/components/grid.jsx
 create mode 100644 src/context/ThemeContext.jsx

diff --git a/index.html b/index.html
index f1ffdda..bc59010 100644
--- a/index.html
+++ b/index.html
@@ -2,11 +2,47 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <!-- Paper sheet, red margin rule, ink E: the worked example in 48px. -->
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23fbf7ef%22/><rect x=%2224%22 y=%220%22 width=%222%22 height=%22100%22 fill=%22%23b8311a%22/><text x=%2262%22 y=%2272%22 font-size=%2266%22 font-family=%22Georgia,serif%22 font-weight=%22600%22 text-anchor=%22middle%22 fill=%22%231a1612%22>E</text></svg>"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Practice a spoken mock interview built from your role and your stack, then read it back marked up."
+    />
+    <meta name="color-scheme" content="light dark" />
     <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups" />
     <meta http-equiv="Cross-Origin-Embedder-Policy" content="unsafe-none" />
-    <title>EduNerve AI - Learn Smarter</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <!-- Bricolage Grotesque carries the display voice; Geist does the UI work;
+         Geist Mono is reserved for measurement. -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>EduNerve AI — mock interviews, marked up</title>
+
+    <!-- Applies the saved theme before first paint so a dark-mode user never
+         sees a flash of paper. Mirrors src/context/ThemeContext.jsx. -->
+    <script>
+      (function () {
+        try {
+          var saved = localStorage.getItem("edunerve-theme");
+          var dark =
+            saved === "dark" ||
+            (saved !== "light" &&
+              window.matchMedia("(prefers-color-scheme: dark)").matches);
+          if (dark) document.documentElement.classList.add("dark");
+        } catch (e) {
+          /* blocked storage: fall through to paper */
+        }
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/components/brand/Logo.jsx b/src/components/brand/Logo.jsx
new file mode 100644
index 0000000..00b141b
--- /dev/null
+++ b/src/components/brand/Logo.jsx
@@ -0,0 +1,74 @@
+import { Link } from "react-router-dom";
+import { cn } from "../../lib/utils";
+
+const MARK = { sm: "h-7 w-7", md: "h-9 w-9", lg: "h-11 w-11" };
+const WORD = { sm: "text-base", md: "text-lg", lg: "text-xl" };
+
+/*
+ * A sheet with a margin rule and two lines of writing. Drawn as SVG rather
+ * than stacked boxes so it stays legible at 28px, where percentage insets
+ * collapsed into an unreadable blot.
+ */
+function Mark({ size }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("block shrink-0", MARK[size] ?? MARK.md)}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <rect
+        x="0.75"
+        y="0.75"
+        width="22.5"
+        height="22.5"
+        rx="5"
+        fill="var(--sheet)"
+        stroke="var(--rule-strong)"
+        strokeWidth="1.5"
+      />
+      <line x1="7" y1="4.5" x2="7" y2="19.5" stroke="var(--mark-red)" strokeWidth="1.5" />
+      <line
+        x1="10.5"
+        y1="10"
+        x2="18.5"
+        y2="10"
+        stroke="var(--ink)"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <line
+        x1="10.5"
+        y1="14.5"
+        x2="15.5"
+        y2="14.5"
+        stroke="var(--ink-faint)"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default function Logo({ size = "md", to = "/", withWordmark = true, className = "" }) {
+  const content = (
+    <>
+      <Mark size={size} />
+      {withWordmark && (
+        <span className={cn("font-display font-semibold tracking-[-0.02em] text-ink", WORD[size] ?? WORD.md)}>
+          EduNerve
+        </span>
+      )}
+    </>
+  );
+
+  const classes = cn("inline-flex items-center gap-2.5", className);
+
+  return to ? (
+    <Link to={to} className={classes} aria-label="EduNerve AI, home">
+      {content}
+    </Link>
+  ) : (
+    <span className={classes}>{content}</span>
+  );
+}
diff --git a/src/components/grid.jsx b/src/components/grid.jsx
deleted file mode 100644
index 3270a08..0000000
--- a/src/components/grid.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { cn } from "@/lib/utils";
-import React from "react";
-
-export function GridBackgroundDemo() {
-    return (
-        <div className="fixed inset-0 -z-10 h-full w-full bg-white dark:bg-black">
-            <div
-                className={cn(
-                    "absolute inset-0",
-                    "[background-size:40px_40px]",
-                    "[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
-                    "dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
-                )}
-            />
-        </div>
-    );
-}
\ No newline at end of file
diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
new file mode 100644
index 0000000..a72962b
--- /dev/null
+++ b/src/context/ThemeContext.jsx
@@ -0,0 +1,69 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+
+const STORAGE_KEY = "edunerve-theme";
+const ThemeContext = createContext(null);
+
+// Mirrors the pre-paint script in index.html. Storage can throw in private mode.
+function readStored() {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    return saved === "dark" || saved === "light" ? saved : null;
+  } catch {
+    return null;
+  }
+}
+
+const systemTheme = () =>
+  typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+
+export function ThemeProvider({ children }) {
+  // null means "follow the system", which is the default until someone chooses.
+  const [preference, setPreference] = useState(readStored);
+  const [system, setSystem] = useState(systemTheme);
+
+  useEffect(() => {
+    const query = window.matchMedia?.("(prefers-color-scheme: dark)");
+    if (!query) return undefined;
+    const sync = (event) => setSystem(event.matches ? "dark" : "light");
+    query.addEventListener("change", sync);
+    return () => query.removeEventListener("change", sync);
+  }, []);
+
+  const theme = preference ?? system;
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  }, [theme]);
+
+  const setTheme = useCallback((next) => {
+    setPreference(next);
+    try {
+      if (next === null) localStorage.removeItem(STORAGE_KEY);
+      else localStorage.setItem(STORAGE_KEY, next);
+    } catch {
+      // Preference just won't survive a reload; the UI still updates.
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      isDark: theme === "dark",
+      followsSystem: preference === null,
+      setTheme,
+      toggle: () => setTheme(theme === "dark" ? "light" : "dark"),
+    }),
+    [theme, preference, setTheme],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) throw new Error("useTheme must be used within ThemeProvider");
+  return context;
+}
diff --git a/src/index.css b/src/index.css
index ca78485..97e725c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,136 +1,350 @@
 @import "tailwindcss";
-/* @import 'tw-animate-css'; */
 
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * THE WORKED EXAMPLE
+ *
+ * Your interview is work shown and then marked up in the margin — not a score
+ * card handed down. The ground is worksheet paper; judgement arrives as a
+ * margin mark in annotation colour. Hairlines divide. Nothing is fenced by a
+ * drop-shadowed card.
+ *
+ * Four annotation marks, each with a fixed meaning:
+ *   red    a correction — what went wrong, what to fix
+ *   green  a tick — what was right
+ *   ochre  a caution — in progress, incomplete, careful
+ *   blue   a note — neutral information, the teacher's aside
+ *
+ * Each mark comes in four parts: the saturated ink, a wash to fill a whole
+ * region, the ink that sits legibly on that wash, and the rule that bounds it.
+ */
+
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --paper: #fbf7ef;
+  --sheet: #fffdf8;
+  --sunk: #f3ede0;
+
+  --ink: #1a1612;
+  --ink-muted: #645b4e;
+  --ink-faint: #776d5d;
+
+  --rule: #e4dbca;
+  --rule-strong: #cbbfa8;
+
+  --mark-red: #b8311a;
+  --mark-green: #16803c;
+  --mark-ochre: #8f6512;
+  --mark-blue: #3a4fb8;
+
+  --red-wash: #fbede9;
+  --red-ink: #8e2415;
+  --red-rule: #f0d3cb;
+
+  --green-wash: #e9f4ec;
+  --green-ink: #0e5a2a;
+  --green-rule: #cbe4d3;
+
+  --ochre-wash: #faf2df;
+  --ochre-ink: #70500c;
+  --ochre-rule: #ebdcb4;
+
+  --blue-wash: #ebedf9;
+  --blue-ink: #27357f;
+  --blue-rule: #d2d7ee;
+
+  /* Primary action is the boxed answer: ink fill, paper text. */
+  --primary: var(--ink);
+  --primary-ink: var(--sheet);
+  --primary-hover: #312922;
+
+  --focus: #3a4fb8;
+
+  /* Validated against the sheet ground for normal vision and CVD.
+     Series order is fixed: overall, technical, problem solving, communication. */
+  --chart-1: #c8371f;
+  --chart-2: #16803c;
+  --chart-3: #3a4fb8;
+  --chart-4: #b5801f;
+
+  --radius: 14px;
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  /* Night desk, not an inverted sheet: the paper warmth stays, the lamp goes out. */
+  --paper: #17140f;
+  --sheet: #201c16;
+  --sunk: #2a251d;
+
+  --ink: #f5efe2;
+  --ink-muted: #a89c88;
+  --ink-faint: #938876;
+
+  --rule: #39322a;
+  --rule-strong: #4e4539;
+
+  --mark-red: #e3705a;
+  --mark-green: #3fb89c;
+  --mark-ochre: #d4a03c;
+  --mark-blue: #8690f0;
+
+  --red-wash: #2e1b16;
+  --red-ink: #f0a896;
+  --red-rule: #4a2b22;
+
+  --green-wash: #132a24;
+  --green-ink: #85d8c0;
+  --green-rule: #1f4238;
+
+  --ochre-wash: #2b2112;
+  --ochre-ink: #e8c47e;
+  --ochre-rule: #453620;
+
+  --blue-wash: #1c1d33;
+  --blue-ink: #b3b8f5;
+  --blue-rule: #2e3050;
+
+  /* Chalk on slate. */
+  --primary: var(--ink);
+  --primary-ink: #17140f;
+  --primary-hover: #ffffff;
+
+  --focus: #8690f0;
+
+  --chart-1: #dc6048;
+  --chart-2: #2fa98f;
+  --chart-3: #6b7be8;
+  --chart-4: #b5841c;
 }
 
 @theme inline {
-  --font-sans: 'Geist', 'Geist Fallback';
-  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
+  /* Display carries the world's character; Geist is the Operate workhorse;
+     mono is reserved for measurement — scores, counts, session numbers. */
+  --font-display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
+
+  --color-paper: var(--paper);
+  --color-sheet: var(--sheet);
+  --color-sunk: var(--sunk);
+
+  --color-ink: var(--ink);
+  --color-ink-muted: var(--ink-muted);
+  --color-ink-faint: var(--ink-faint);
+
+  --color-rule: var(--rule);
+  --color-rule-strong: var(--rule-strong);
+
+  --color-mark-red: var(--mark-red);
+  --color-mark-green: var(--mark-green);
+  --color-mark-ochre: var(--mark-ochre);
+  --color-mark-blue: var(--mark-blue);
+
+  --color-red-wash: var(--red-wash);
+  --color-red-ink: var(--red-ink);
+  --color-red-rule: var(--red-rule);
+
+  --color-green-wash: var(--green-wash);
+  --color-green-ink: var(--green-ink);
+  --color-green-rule: var(--green-rule);
+
+  --color-ochre-wash: var(--ochre-wash);
+  --color-ochre-ink: var(--ochre-ink);
+  --color-ochre-rule: var(--ochre-rule);
+
+  --color-blue-wash: var(--blue-wash);
+  --color-blue-ink: var(--blue-ink);
+  --color-blue-rule: var(--blue-rule);
+
   --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
+  --color-primary-ink: var(--primary-ink);
+  --color-primary-hover: var(--primary-hover);
+
+  --color-focus: var(--focus);
+
+  /* Semantic aliases onto the marks: a tick is green, a caution ochre, a
+     correction red. lib/format.js and its tests speak in these names. */
+  --color-success: var(--mark-green);
+  --color-warning: var(--mark-ochre);
+  --color-danger: var(--mark-red);
+  --color-muted-foreground: var(--ink-muted);
+
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+
+  --radius-sm: 6px;
+  --radius-md: 10px;
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-xl: 20px;
+  --radius-2xl: 26px;
+
+  --text-display: 4.5rem;
+  --text-display--line-height: 0.95;
+  --text-display--letter-spacing: -0.035em;
+  --text-figure: 3.5rem;
+  --text-figure--line-height: 1;
+  --text-figure--letter-spacing: -0.03em;
 }
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-rule;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
   }
+
   body {
-    @apply bg-background text-foreground;
-    background-size: 40px 40px;
-    background-image: linear-gradient(
-        to right,
-        color-mix(in srgb, var(--border) 50%, transparent) 1px,
-        transparent 1px
-      ),
-      linear-gradient(
-        to bottom,
-        color-mix(in srgb, var(--border) 50%, transparent) 1px,
-        transparent 1px
-      );
+    @apply bg-paper text-ink antialiased;
+    font-synthesis-weight: none;
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-family: var(--font-display);
+    font-weight: 600;
+    letter-spacing: -0.025em;
+    text-wrap: balance;
+  }
+
+  /* Measurement is set in mono and lines up in columns. */
+  .tabular,
+  [data-figure] {
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum" 1;
   }
+
+  /*
+   * Browser surfaces. These ship with defaults belonging to no design system,
+   * so the world claims them too.
+   */
+  ::selection {
+    background: var(--ochre-wash);
+    color: var(--ink);
+  }
+
+  :root {
+    accent-color: var(--mark-blue);
+    caret-color: var(--mark-red);
+    scrollbar-color: var(--rule-strong) transparent;
+    scrollbar-width: thin;
+  }
+
+  ::-webkit-scrollbar {
+    width: 11px;
+    height: 11px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--rule-strong);
+    border: 3px solid var(--paper);
+    border-radius: 999px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--ink-faint);
+  }
+
+  a {
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: 1px;
+  }
+
+  /* No border-radius here: setting one would reshape the focused element's own
+     corners. The outline already follows whatever radius the element has. */
+  :focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+/*
+ * The exercise-book margin: one vertical rule in correction red, the line every
+ * worked answer is written to the right of.
+ */
+@utility margin-rule {
+  position: relative;
+}
+
+@utility margin-rule-line {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 1px;
+  background: color-mix(in srgb, var(--mark-red) 40%, transparent);
+}
+
+/* A mark drawn beside the thing it refers to, settling rather than sliding. */
+@keyframes mark-settle {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+    clip-path: inset(0 100% 0 0);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@utility mark-in {
+  animation: mark-settle 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+/* A waiting indicator in the world's own grammar: ink darkening and easing
+   back, never a stock pulse. */
+@keyframes ink-breathe {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@utility ink-breathe {
+  animation: ink-breathe 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* A stroke being drawn and lifted: the waiting indicator in a world whose
+   motion grammar is ink settling, not a rotating spinner. */
+@keyframes ink-draw {
+  0% {
+    clip-path: inset(0 100% 0 0);
+  }
+  45% {
+    clip-path: inset(0 0 0 0);
+  }
+  55% {
+    clip-path: inset(0 0 0 0);
+  }
+  100% {
+    clip-path: inset(0 0 0 100%);
+  }
+}
+
+@utility ink-draw {
+  animation: ink-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }

From bcea83c0b255c7c78d5fb06fe53f2f1130ab55a9 Mon Sep 17 00:00:00 2001
From: NSTKrishna <krishnagehlot936@gmail.com>
Date: Sat, 3 Oct 2026 16:21:44 +0530
Subject: [PATCH 06/10] Rebuild the shared primitives on the design system

The old primitives were bypassed by every screen that mattered: Button's
primary variant rendered near-black, so each real call-to-action
overrode it inline, and three different spinners shipped at once.

- Button and ButtonLink share one variant matrix, so a link that looks
  like a button is the same object as a button
- One Spinner and one Skeleton, both animated with the world's own
  keyframes rather than Tailwind's stock spin and pulse
- Dialog traps focus, closes on Escape and restores focus to its opener
- PasswordInput adds a reveal toggle; inputs wire label, hint and error
  through aria-describedby and aria-invalid
- ScoreBar and StatusBadge name the band in words, so score quality is
  never carried by colour alone
- Cards are hairline-bounded sheets with no elevation shadow

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/common/Avatar.jsx         | 19 +++++
 src/components/common/Button.jsx         | 43 ++++++----
 src/components/common/ButtonLink.jsx     |  8 ++
 src/components/common/Dialog.jsx         | 99 ++++++++++++++++++++++++
 src/components/common/FormError.jsx      | 14 ++++
 src/components/common/Input.jsx          | 42 ++++++++--
 src/components/common/LoadingSpinner.jsx | 13 ----
 src/components/common/PageState.jsx      | 39 ++++++++++
 src/components/common/PasswordInput.jsx  | 58 ++++++++++++++
 src/components/common/Progress.jsx       | 32 ++++++--
 src/components/common/ScoreBar.jsx       | 29 +++++++
 src/components/common/Select.jsx         | 39 ++++++++++
 src/components/common/Skeleton.jsx       |  7 ++
 src/components/common/Spinner.jsx        | 20 +++++
 src/components/common/StatusBadge.jsx    | 23 ++++++
 src/components/common/ThemeToggle.jsx    | 15 ++++
 src/components/common/Toast.jsx          | 73 +++++++++++++++++
 src/components/common/buttonStyles.js    | 33 ++++++++
 src/components/ui/card.jsx               | 49 ++++++++++++
 src/components/ui/card.tsx               | 92 ----------------------
 20 files changed, 614 insertions(+), 133 deletions(-)
 create mode 100644 src/components/common/Avatar.jsx
 create mode 100644 src/components/common/ButtonLink.jsx
 create mode 100644 src/components/common/Dialog.jsx
 create mode 100644 src/components/common/FormError.jsx
 delete mode 100644 src/components/common/LoadingSpinner.jsx
 create mode 100644 src/components/common/PageState.jsx
 create mode 100644 src/components/common/PasswordInput.jsx
 create mode 100644 src/components/common/ScoreBar.jsx
 create mode 100644 src/components/common/Select.jsx
 create mode 100644 src/components/common/Skeleton.jsx
 create mode 100644 src/components/common/Spinner.jsx
 create mode 100644 src/components/common/StatusBadge.jsx
 create mode 100644 src/components/common/ThemeToggle.jsx
 create mode 100644 src/components/common/Toast.jsx
 create mode 100644 src/components/common/buttonStyles.js
 create mode 100644 src/components/ui/card.jsx
 delete mode 100644 src/components/ui/card.tsx

diff --git a/src/components/common/Avatar.jsx b/src/components/common/Avatar.jsx
new file mode 100644
index 0000000..ce4d50c
--- /dev/null
+++ b/src/components/common/Avatar.jsx
@@ -0,0 +1,19 @@
+import { initials } from "../../lib/format";
+import { cn } from "../../lib/utils";
+
+const SIZES = { sm: "h-8 w-8 text-[11px]", md: "h-9 w-9 text-xs", lg: "h-12 w-12 text-sm" };
+
+export default function Avatar({ name, size = "md", className = "" }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "flex shrink-0 items-center justify-center rounded-full border border-rule-strong bg-sunk font-mono font-medium tracking-wide text-ink",
+        SIZES[size] ?? SIZES.md,
+        className,
+      )}
+    >
+      {initials(name)}
+    </span>
+  );
+}
diff --git a/src/components/common/Button.jsx b/src/components/common/Button.jsx
index 56411e9..8c981b6 100644
--- a/src/components/common/Button.jsx
+++ b/src/components/common/Button.jsx
@@ -1,22 +1,31 @@
-export default function Button({ children, variant = "primary", size = "md", className = "", ...props }) {
-  const baseStyles = "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
-
-  const variants = {
-    primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-primary",
-    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:ring-secondary",
-    outline: "border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground focus:ring-primary",
-    ghost: "text-foreground hover:bg-muted focus:ring-muted",
-  }
-
-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-base",
-    lg: "px-6 py-3 text-lg",
-  }
+import { buttonClasses } from "./buttonStyles";
+import Spinner from "./Spinner";
 
+/*
+ * The one button. The primary variant is the boxed answer, so callers never
+ * pass colour classes; a page with two competing primaries is a page that has
+ * not decided which question it is asking.
+ */
+export default function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  className = "",
+  loading = false,
+  disabled,
+  type = "button",
+  ...props
+}) {
   return (
-    <button className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`} {...props}>
+    <button
+      type={type}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      className={buttonClasses({ variant, size, className })}
+      {...props}
+    >
+      {loading && <Spinner size="sm" />}
       {children}
     </button>
-  )
+  );
 }
diff --git a/src/components/common/ButtonLink.jsx b/src/components/common/ButtonLink.jsx
new file mode 100644
index 0000000..b24d10a
--- /dev/null
+++ b/src/components/common/ButtonLink.jsx
@@ -0,0 +1,8 @@
+import { Link } from "react-router-dom";
+import { buttonClasses } from "./buttonStyles";
+
+/* A router link that is visually a Button, so navigation CTAs stop retyping
+   the brand styling inline. */
+export default function ButtonLink({ variant = "primary", size = "md", className = "", ...props }) {
+  return <Link className={buttonClasses({ variant, size, className })} {...props} />;
+}
diff --git a/src/components/common/Dialog.jsx b/src/components/common/Dialog.jsx
new file mode 100644
index 0000000..02a078d
--- /dev/null
+++ b/src/components/common/Dialog.jsx
@@ -0,0 +1,99 @@
+import { useEffect, useRef } from "react";
+import { X } from "lucide-react";
+import Button from "./Button";
+
+/*
+ * A modal that behaves like one: Escape closes it, focus moves in and is kept
+ * inside while it is open, and focus returns to whatever opened it. Used for
+ * destructive confirmations, which previously expanded inline under the form
+ * that triggered them.
+ */
+export default function Dialog({ open, onClose, title, description, children, footer }) {
+  const panelRef = useRef(null);
+  const openerRef = useRef(null);
+
+  useEffect(() => {
+    if (!open) return undefined;
+
+    openerRef.current = document.activeElement;
+    const panel = panelRef.current;
+    // `a?.focus?.() ?? b.focus()` would run both, since focus() returns undefined.
+    const preferred = panel?.querySelector("[data-autofocus]");
+    if (preferred) preferred.focus();
+    else panel?.focus();
+
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab" || !panel) return;
+
+      const focusable = panel.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown, true);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, true);
+      document.body.style.overflow = previousOverflow;
+      openerRef.current?.focus?.();
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-90 flex items-end justify-center p-4 sm:items-center">
+      <div
+        className="absolute inset-0 bg-ink/45"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dialog-title"
+        aria-describedby={description ? "dialog-description" : undefined}
+        tabIndex={-1}
+        className="mark-in relative w-full max-w-md rounded-lg border border-rule-strong bg-sheet p-6"
+      >
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1.5">
+            <h2 id="dialog-title" className="font-display text-lg font-semibold tracking-[-0.015em] text-ink">
+              {title}
+            </h2>
+            {description && (
+              <p id="dialog-description" className="text-sm text-ink-muted">
+                {description}
+              </p>
+            )}
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close">
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {children && <div className="mt-4">{children}</div>}
+        {footer && <div className="mt-6 flex flex-wrap justify-end gap-2">{footer}</div>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/common/FormError.jsx b/src/components/common/FormError.jsx
new file mode 100644
index 0000000..77568db
--- /dev/null
+++ b/src/components/common/FormError.jsx
@@ -0,0 +1,14 @@
+import { AlertCircle } from "lucide-react";
+
+export default function FormError({ message }) {
+  if (!message) return null;
+  return (
+    <div
+      role="alert"
+      className="mark-in flex items-start gap-2.5 rounded-md border border-red-rule bg-red-wash px-3 py-2.5 text-sm text-red-ink"
+    >
+      <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+      <p>{message}</p>
+    </div>
+  );
+}
diff --git a/src/components/common/Input.jsx b/src/components/common/Input.jsx
index cc57bf2..cbe8318 100644
--- a/src/components/common/Input.jsx
+++ b/src/components/common/Input.jsx
@@ -1,12 +1,44 @@
-export default function Input({ label, error, className = "", ...props }) {
+import { useId } from "react";
+import { cn } from "../../lib/utils";
+
+export default function Input({ label, error, hint, className = "", id, ...props }) {
+  const generated = useId();
+  const inputId = id || generated;
+  const errorId = `${inputId}-error`;
+  const hintId = `${inputId}-hint`;
+
   return (
     <div className="w-full">
-      {label && <label className="block text-sm font-medium text-foreground mb-1.5">{label}</label>}
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="mb-1.5 block font-mono text-[11px] uppercase tracking-[0.12em] text-ink-muted"
+        >
+          {label}
+        </label>
+      )}
       <input
-        className={`w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-colors ${error ? "border-destructive" : ""} ${className}`}
+        id={inputId}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={cn(error && errorId, hint && hintId) || undefined}
+        className={cn(
+          "h-11 w-full rounded-md border bg-sheet px-3.5 text-ink transition-colors",
+          "placeholder:text-ink-faint disabled:cursor-not-allowed disabled:bg-sunk disabled:opacity-70",
+          error ? "border-mark-red" : "border-rule-strong hover:border-ink-faint",
+          className,
+        )}
         {...props}
       />
-      {error && <p className="mt-1 text-sm text-destructive">{error}</p>}
+      {hint && !error && (
+        <p id={hintId} className="mt-1.5 text-xs text-ink-muted">
+          {hint}
+        </p>
+      )}
+      {error && (
+        <p id={errorId} className="mark-in mt-1.5 text-sm text-mark-red">
+          {error}
+        </p>
+      )}
     </div>
-  )
+  );
 }
diff --git a/src/components/common/LoadingSpinner.jsx b/src/components/common/LoadingSpinner.jsx
deleted file mode 100644
index 68dcd78..0000000
--- a/src/components/common/LoadingSpinner.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export default function LoadingSpinner({ size = "md" }) {
-  const sizes = {
-    sm: "w-4 h-4 border-2",
-    md: "w-8 h-8 border-3",
-    lg: "w-12 h-12 border-4",
-  }
-
-  return (
-    <div className="flex items-center justify-center">
-      <div className={`${sizes[size]} border-primary border-t-transparent rounded-full animate-spin`} />
-    </div>
-  )
-}
diff --git a/src/components/common/PageState.jsx b/src/components/common/PageState.jsx
new file mode 100644
index 0000000..1685707
--- /dev/null
+++ b/src/components/common/PageState.jsx
@@ -0,0 +1,39 @@
+import { AlertCircle } from "lucide-react";
+import Spinner from "./Spinner";
+import Button from "./Button";
+
+export function PageLoading({ label = "Loading..." }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 py-24">
+      <Spinner size="lg" className="text-mark-red" />
+      <p className="font-mono text-[11px] uppercase tracking-[0.12em] text-ink-muted" role="status">
+        {label}
+      </p>
+    </div>
+  );
+}
+
+export function PageError({ message, onRetry }) {
+  return (
+    <div className="mx-auto flex max-w-md flex-col items-start gap-3 border-l border-mark-red py-6 pl-5">
+      <AlertCircle className="h-5 w-5 text-mark-red" aria-hidden="true" />
+      <p className="text-ink">{message || "Something went wrong."}</p>
+      {onRetry && (
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          Try again
+        </Button>
+      )}
+    </div>
+  );
+}
+
+/* An empty state that says what to do next, not just that there is nothing. */
+export function EmptyState({ title, description, action }) {
+  return (
+    <div className="px-6 py-14 text-center">
+      <h3 className="mb-2 text-xl text-ink">{title}</h3>
+      {description && <p className="mx-auto mb-6 max-w-sm text-sm text-ink-muted">{description}</p>}
+      {action}
+    </div>
+  );
+}
diff --git a/src/components/common/PasswordInput.jsx b/src/components/common/PasswordInput.jsx
new file mode 100644
index 0000000..f82ad8f
--- /dev/null
+++ b/src/components/common/PasswordInput.jsx
@@ -0,0 +1,58 @@
+import { useId, useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+export default function PasswordInput({ label, error, hint, className = "", id, ...props }) {
+  const generated = useId();
+  const inputId = id || generated;
+  const errorId = `${inputId}-error`;
+  const hintId = `${inputId}-hint`;
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="mb-1.5 block font-mono text-[11px] uppercase tracking-[0.12em] text-ink-muted"
+        >
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <input
+          id={inputId}
+          type={visible ? "text" : "password"}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={cn(error && errorId, hint && hintId) || undefined}
+          className={cn(
+            "h-11 w-full rounded-md border bg-sheet pl-3.5 pr-11 text-ink transition-colors",
+            "placeholder:text-ink-faint disabled:cursor-not-allowed disabled:opacity-70",
+            error ? "border-mark-red" : "border-rule-strong hover:border-ink-faint",
+            className,
+          )}
+          {...props}
+        />
+        <button
+          type="button"
+          onClick={() => setVisible((shown) => !shown)}
+          aria-label={visible ? "Hide password" : "Show password"}
+          aria-pressed={visible}
+          className="absolute right-1 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-sm text-ink-faint transition-colors hover:text-ink"
+        >
+          {visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+        </button>
+      </div>
+      {hint && !error && (
+        <p id={hintId} className="mt-1.5 text-xs text-ink-muted">
+          {hint}
+        </p>
+      )}
+      {error && (
+        <p id={errorId} className="mark-in mt-1.5 text-sm text-mark-red">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/common/Progress.jsx b/src/components/common/Progress.jsx
index eb10ec7..1cd668f 100644
--- a/src/components/common/Progress.jsx
+++ b/src/components/common/Progress.jsx
@@ -1,12 +1,32 @@
-export default function Progress({ value = 0, className = "" }) {
-  const clampedValue = Math.min(100, Math.max(0, value))
+import { cn } from "../../lib/utils";
+
+const TONES = {
+  success: "bg-mark-green",
+  warning: "bg-mark-ochre",
+  danger: "bg-mark-red",
+  neutral: "bg-ink-faint",
+};
+
+/*
+ * The mark: a stroke drawn along a ruled track to where the score reached.
+ * The track is the ruled line; the stroke is the annotation over it.
+ */
+export default function Progress({ value = 0, tone = "neutral", className = "", label }) {
+  const clamped = Math.min(100, Math.max(0, value));
 
   return (
-    <div className={`w-full overflow-hidden rounded-full bg-muted ${className}`} aria-valuenow={clampedValue} aria-valuemin={0} aria-valuemax={100} role="progressbar">
+    <div
+      role="progressbar"
+      aria-valuenow={Math.round(clamped)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={label}
+      className={cn("relative h-[6px] w-full overflow-hidden rounded-full bg-sunk", className)}
+    >
       <div
-        className="h-2 rounded-full bg-primary transition-all duration-300"
-        style={{ width: `${clampedValue}%` }}
+        className={cn("h-full rounded-full transition-[width] duration-700 ease-out", TONES[tone] ?? TONES.neutral)}
+        style={{ width: `${clamped}%` }}
       />
     </div>
-  )
+  );
 }
diff --git a/src/components/common/ScoreBar.jsx b/src/components/common/ScoreBar.jsx
new file mode 100644
index 0000000..85f73a8
--- /dev/null
+++ b/src/components/common/ScoreBar.jsx
@@ -0,0 +1,29 @@
+import Progress from "./Progress";
+import { formatScore, scoreBand, scoreLabel, scoreToPercent, scoreTone } from "../../lib/format";
+
+/*
+ * One line of the marked-up sheet: what was assessed, the word for how it went,
+ * and the figure — with the mark drawn beneath it.
+ */
+export default function ScoreBar({ label, value, showBand = true }) {
+  const band = scoreBand(value);
+
+  return (
+    <div>
+      <div className="mb-2 flex items-baseline justify-between gap-3">
+        <span className="text-sm text-ink">{label}</span>
+        <span className="flex items-baseline gap-2.5">
+          {showBand && band !== "neutral" && (
+            <span className="font-mono text-[11px] uppercase tracking-[0.1em] text-ink-muted">
+              {scoreLabel(value)}
+            </span>
+          )}
+          <span className={`tabular font-mono text-sm font-medium ${scoreTone(value)}`}>
+            {formatScore(value)}
+          </span>
+        </span>
+      </div>
+      <Progress value={scoreToPercent(value)} tone={band} label={label} />
+    </div>
+  );
+}
diff --git a/src/components/common/Select.jsx b/src/components/common/Select.jsx
new file mode 100644
index 0000000..4f17477
--- /dev/null
+++ b/src/components/common/Select.jsx
@@ -0,0 +1,39 @@
+import { useId } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+export default function Select({ label, className = "", id, children, ...props }) {
+  const generated = useId();
+  const selectId = id || generated;
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label
+          htmlFor={selectId}
+          className="mb-1.5 block font-mono text-[11px] uppercase tracking-[0.12em] text-ink-muted"
+        >
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <select
+          id={selectId}
+          className={cn(
+            "h-11 w-full appearance-none rounded-md border border-rule-strong bg-sheet",
+            "pl-3.5 pr-10 text-ink transition-colors hover:border-ink-faint",
+            "disabled:cursor-not-allowed disabled:opacity-70",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </select>
+        <ChevronDown
+          className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-ink-faint"
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/common/Skeleton.jsx b/src/components/common/Skeleton.jsx
new file mode 100644
index 0000000..5d4a11a
--- /dev/null
+++ b/src/components/common/Skeleton.jsx
@@ -0,0 +1,7 @@
+import { cn } from "../../lib/utils";
+
+/* Holds the page's shape while data loads. Breathes in the world's grammar
+   rather than with Tailwind's stock pulse. */
+export default function Skeleton({ className = "" }) {
+  return <div aria-hidden="true" className={cn("ink-breathe rounded-sm bg-sunk", className)} />;
+}
diff --git a/src/components/common/Spinner.jsx b/src/components/common/Spinner.jsx
new file mode 100644
index 0000000..196c913
--- /dev/null
+++ b/src/components/common/Spinner.jsx
@@ -0,0 +1,20 @@
+import { cn } from "../../lib/utils";
+
+const SIZES = { sm: "h-px w-4", md: "h-0.5 w-6", lg: "h-0.5 w-10" };
+
+/*
+ * The app's only waiting indicator: a stroke drawn and lifted, in the world's
+ * own motion grammar. A rotating spinner is a stock utility that belongs to no
+ * design system, and this world says ink settles rather than spins.
+ * Colour comes from `currentColor`, so callers tint it with a text class.
+ */
+export default function Spinner({ size = "md", className = "", label }) {
+  return (
+    <span
+      role={label ? "status" : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : "true"}
+      className={cn("ink-draw inline-block rounded-full bg-current", SIZES[size] ?? SIZES.md, className)}
+    />
+  );
+}
diff --git a/src/components/common/StatusBadge.jsx b/src/components/common/StatusBadge.jsx
new file mode 100644
index 0000000..3852511
--- /dev/null
+++ b/src/components/common/StatusBadge.jsx
@@ -0,0 +1,23 @@
+import { STATUS_LABELS } from "../../lib/format";
+
+/*
+ * One state vocabulary, rendered identically everywhere. Each state keeps its
+ * own mark so the same status never appears two different ways.
+ */
+const TONES = {
+  completed: "border-green-rule bg-green-wash text-green-ink",
+  in_progress: "border-ochre-rule bg-ochre-wash text-ochre-ink",
+  abandoned: "border-rule-strong bg-sunk text-ink-muted",
+};
+
+export default function StatusBadge({ status }) {
+  return (
+    <span
+      className={`inline-flex shrink-0 items-center rounded-full border px-2.5 py-0.5 font-mono text-[11px] uppercase tracking-[0.08em] ${
+        TONES[status] || TONES.abandoned
+      }`}
+    >
+      {STATUS_LABELS[status] || status}
+    </span>
+  );
+}
diff --git a/src/components/common/ThemeToggle.jsx b/src/components/common/ThemeToggle.jsx
new file mode 100644
index 0000000..7aef3cf
--- /dev/null
+++ b/src/components/common/ThemeToggle.jsx
@@ -0,0 +1,15 @@
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "../../context/ThemeContext";
+import Button from "./Button";
+
+/* The icon shows the action, not the current state, so it agrees with the label. */
+export default function ThemeToggle({ className = "" }) {
+  const { isDark, toggle } = useTheme();
+  const label = isDark ? "Switch to light theme" : "Switch to dark theme";
+
+  return (
+    <Button variant="ghost" size="icon" onClick={toggle} className={className} aria-label={label} title={label}>
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </Button>
+  );
+}
diff --git a/src/components/common/Toast.jsx b/src/components/common/Toast.jsx
new file mode 100644
index 0000000..cd54645
--- /dev/null
+++ b/src/components/common/Toast.jsx
@@ -0,0 +1,73 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { AlertCircle, Check, Info, X } from "lucide-react";
+
+const ToastContext = createContext(null);
+
+/* Each notice carries its mark: a tick, a correction, a note. */
+const STYLES = {
+  success: { icon: Check, classes: "border-green-rule bg-green-wash text-green-ink" },
+  error: { icon: AlertCircle, classes: "border-red-rule bg-red-wash text-red-ink" },
+  info: { icon: Info, classes: "border-blue-rule bg-blue-wash text-blue-ink" },
+};
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const nextId = useRef(1);
+
+  const dismiss = useCallback((id) => setToasts((all) => all.filter((toast) => toast.id !== id)), []);
+
+  const show = useCallback(
+    (message, type = "info", duration = 5000) => {
+      const id = nextId.current++;
+      setToasts((all) => [...all, { id, message, type }]);
+      if (duration) setTimeout(() => dismiss(id), duration);
+    },
+    [dismiss],
+  );
+
+  const api = useMemo(
+    () => ({
+      show,
+      success: (message) => show(message, "success"),
+      error: (message) => show(message, "error", 7000),
+      info: (message) => show(message, "info"),
+    }),
+    [show],
+  );
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      <div
+        className="pointer-events-none fixed bottom-4 right-4 z-[100] flex w-full max-w-sm flex-col gap-2 px-4 sm:px-0"
+        role="region"
+        aria-live="polite"
+        aria-label="Notifications"
+      >
+        {toasts.map(({ id, message, type }) => {
+          const { icon: Icon, classes } = STYLES[type] || STYLES.info;
+          return (
+            <div
+              key={id}
+              role={type === "error" ? "alert" : "status"}
+              className={`mark-in pointer-events-auto flex items-start gap-3 rounded-md border p-3 text-sm ${classes}`}
+            >
+              <Icon className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+              <p className="flex-1">{message}</p>
+              <button onClick={() => dismiss(id)} aria-label="Dismiss" className="opacity-60 hover:opacity-100">
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error("useToast must be used within ToastProvider");
+  return context;
+}
diff --git a/src/components/common/buttonStyles.js b/src/components/common/buttonStyles.js
new file mode 100644
index 0000000..b3e01f3
--- /dev/null
+++ b/src/components/common/buttonStyles.js
@@ -0,0 +1,33 @@
+import { cn } from "../../lib/utils";
+
+/*
+ * The primary action is the boxed answer: ink fill, paper text, square-ish
+ * corners. Everything else is quieter than it — a worksheet has one answer per
+ * question, and the page should read that way.
+ */
+export const BUTTON_VARIANTS = {
+  primary: "bg-primary text-primary-ink hover:bg-primary-hover",
+  outline: "border border-rule-strong bg-sheet text-ink hover:bg-sunk",
+  ghost: "text-ink-muted hover:bg-sunk hover:text-ink",
+  wash: "bg-sunk text-ink hover:bg-rule",
+  danger: "bg-mark-red text-sheet hover:opacity-90",
+  dangerOutline: "border border-red-rule bg-red-wash text-red-ink hover:border-mark-red",
+};
+
+export const BUTTON_SIZES = {
+  sm: "h-8 gap-1.5 px-3 text-sm",
+  md: "h-10 gap-2 px-4 text-sm",
+  lg: "h-12 gap-2 px-6 text-base",
+  icon: "h-10 w-10",
+};
+
+export const buttonClasses = ({ variant = "primary", size = "md", className = "" } = {}) =>
+  cn(
+    "inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap",
+    "transition-[background-color,border-color,opacity] duration-150",
+    "disabled:pointer-events-none disabled:opacity-45",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    BUTTON_VARIANTS[variant] ?? BUTTON_VARIANTS.primary,
+    BUTTON_SIZES[size] ?? BUTTON_SIZES.md,
+    className,
+  );
diff --git a/src/components/ui/card.jsx b/src/components/ui/card.jsx
new file mode 100644
index 0000000..1bf74da
--- /dev/null
+++ b/src/components/ui/card.jsx
@@ -0,0 +1,49 @@
+import { cn } from "../../lib/utils"
+
+/*
+ * A sheet, not a floating card: hairline bounded, no shadow. Depth in this
+ * world comes from the contrast between paper, sheet and annotation wash.
+ */
+function Card({ className, ...props }) {
+  return (
+    <div
+      data-slot="card"
+      className={cn("flex flex-col rounded-lg border border-rule bg-sheet", className)}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }) {
+  return <div data-slot="card-header" className={cn("px-5 pt-5", className)} {...props} />
+}
+
+function CardTitle({ className, ...props }) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-display text-base font-semibold tracking-[-0.015em] text-ink", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }) {
+  return <div data-slot="card-description" className={cn("mt-1 text-sm text-ink-muted", className)} {...props} />
+}
+
+function CardAction({ className, ...props }) {
+  return <div data-slot="card-action" className={cn("shrink-0", className)} {...props} />
+}
+
+function CardContent({ className, ...props }) {
+  return <div data-slot="card-content" className={cn("px-5 py-5", className)} {...props} />
+}
+
+function CardFooter({ className, ...props }) {
+  return (
+    <div data-slot="card-footer" className={cn("flex items-center border-t border-rule px-5 py-4", className)} {...props} />
+  )
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
deleted file mode 100644
index 96c5f2f..0000000
--- a/src/components/ui/card.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../../lib/utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

From 787970e2cb3019ba1445535f94446efdaeba1bc6 Mon Sep 17 00:00:00 2001
From: NSTKrishna <krishnagehlot936@gmail.com>
Date: Sat, 3 Oct 2026 16:22:03 +0530
Subject: [PATCH 07/10] Rebuild the app shells and screens in the new world

Every screen is a register page: one enormous figure against small mono
labels, hairline division, and the margin rule down the left.

- The report is the memorable moment: marks sit in a margin column
  beside the transcript rather than stacked above it as a verdict. They
  are labelled session-level because the API returns strengths, weak
  areas and notes as flat arrays with no turn reference
- Dashboard leads with the average score; the row of equal stat tiles
  above a line chart is gone, replaced by one ruled register line
- Login and Sign-up collapse into a shared AuthLayout, removing a 90%
  duplicate, and gain a password reveal
- History dims the list in place while refiltering instead of blanking
  the page, so the thing being compared against stays on screen
- The out-of-tokens state says plainly that top-ups do not exist yet
  rather than pointing at a screen that cannot help
- Skip link, aria-current on nav, focus-trapped mobile drawer, and a
  page title in the mobile header that no longer scrolls away
- The landing proves the mechanism with a labelled sample report and
  drops the unverified "7+ roles / 40+ technologies" counters

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/App.jsx                                   |  75 ++-
 src/components/PrivateRoute.jsx               |  27 +-
 .../dashboard/DashboardSkeleton.jsx           |  31 +
 src/components/dashboard/InterviewRow.jsx     |  45 ++
 src/components/dashboard/LeadFigure.jsx       |  37 ++
 src/components/dashboard/ScoreTrendChart.jsx  | 168 ++++++
 src/components/interview/InterviewSession.jsx | 182 ++++++
 src/components/interview/InterviewSetup.jsx   | 173 ++++++
 src/components/layout/AuthLayout.jsx          |  48 ++
 src/components/layout/DashboardLayout.jsx     | 118 ++--
 src/components/layout/LearningSidebar.jsx     | 136 +++--
 src/pages/DashboardPage.jsx                   | 185 +++++-
 src/pages/HistoryPage.jsx                     | 159 +++++
 src/pages/InterviewPage.jsx                   | 100 +++-
 src/pages/LandingPage.jsx                     | 561 ++++++++----------
 src/pages/LoginPage.jsx                       | 174 ++----
 src/pages/NotFoundPage.jsx                    |  38 +-
 src/pages/ReportPage.jsx                      | 260 ++++++++
 src/pages/SettingsPage.jsx                    | 394 ++++++++++++
 src/pages/SignUpPage.jsx                      | 214 +++----
 20 files changed, 2340 insertions(+), 785 deletions(-)
 create mode 100644 src/components/dashboard/DashboardSkeleton.jsx
 create mode 100644 src/components/dashboard/InterviewRow.jsx
 create mode 100644 src/components/dashboard/LeadFigure.jsx
 create mode 100644 src/components/dashboard/ScoreTrendChart.jsx
 create mode 100644 src/components/interview/InterviewSession.jsx
 create mode 100644 src/components/interview/InterviewSetup.jsx
 create mode 100644 src/components/layout/AuthLayout.jsx
 create mode 100644 src/pages/HistoryPage.jsx
 create mode 100644 src/pages/ReportPage.jsx
 create mode 100644 src/pages/SettingsPage.jsx

diff --git a/src/App.jsx b/src/App.jsx
index d42ee79..18f57e1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,36 +1,63 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { lazy, Suspense } from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { ThemeProvider } from "./context/ThemeContext";
 import { LearnerProvider } from "./context/LearnerContext";
+import { ToastProvider } from "./components/common/Toast";
 import PrivateRoute from "./components/PrivateRoute";
+import DashboardLayout from "./components/layout/DashboardLayout";
 import LandingPage from "./pages/LandingPage";
 import LoginPage from "./pages/LoginPage";
 import SignUpPage from "./pages/SignUpPage";
-import DashboardPage from "./pages/DashboardPage";
-import InterviewPage from "./pages/InterviewPage";
-import DashboardLayout from "./components/layout/DashboardLayout";
 import NotFoundPage from "./pages/NotFoundPage";
+import { PageLoading } from "./components/common/PageState";
+
+// Signed-in pages are split out: the dashboard pulls in recharts and the interview page the Vapi SDK.
+const DashboardPage = lazy(() => import("./pages/DashboardPage"));
+const InterviewPage = lazy(() => import("./pages/InterviewPage"));
+const ReportPage = lazy(() => import("./pages/ReportPage"));
+const HistoryPage = lazy(() => import("./pages/HistoryPage"));
+const SettingsPage = lazy(() => import("./pages/SettingsPage"));
+
 export default function App() {
   return (
-    <LearnerProvider>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/signup" element={<SignUpPage />} />
+    <ThemeProvider>
+      <ToastProvider>
+        <LearnerProvider>
+          <BrowserRouter>
+            {/* First tab stop on every page: without it, reaching the content
+                means tabbing through the whole sidebar. */}
+            <a
+              href="#main"
+              className="sr-only z-200 focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-primary-ink"
+            >
+              Skip to content
+            </a>
+            <Suspense fallback={<PageLoading />}>
+              <Routes>
+                <Route path="/" element={<LandingPage />} />
+                <Route path="/login" element={<LoginPage />} />
+                <Route path="/signup" element={<SignUpPage />} />
 
-          <Route
-            element={
-              <PrivateRoute>
-                <DashboardLayout />
-              </PrivateRoute>
-            }
-          >
-            <Route path="/dashboard" element={<DashboardPage />} />
-            <Route path="/interviews" element={<InterviewPage />} />
-          </Route>
+                <Route
+                  element={
+                    <PrivateRoute>
+                      <DashboardLayout />
+                    </PrivateRoute>
+                  }
+                >
+                  <Route path="/dashboard" element={<DashboardPage />} />
+                  <Route path="/interviews" element={<InterviewPage />} />
+                  <Route path="/interviews/:interviewId" element={<ReportPage />} />
+                  <Route path="/history" element={<HistoryPage />} />
+                  <Route path="/settings" element={<SettingsPage />} />
+                </Route>
 
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
-      </BrowserRouter>
-    </LearnerProvider>
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </Suspense>
+          </BrowserRouter>
+        </LearnerProvider>
+      </ToastProvider>
+    </ThemeProvider>
   );
 }
diff --git a/src/components/PrivateRoute.jsx b/src/components/PrivateRoute.jsx
index 62c6690..388d37b 100644
--- a/src/components/PrivateRoute.jsx
+++ b/src/components/PrivateRoute.jsx
@@ -1,24 +1,11 @@
-import { Navigate } from "react-router-dom"
-import { useLearner } from "../context/LearnerContext"
+import { Navigate } from "react-router-dom";
+import { useLearner } from "../context/LearnerContext";
+import { PageLoading } from "./common/PageState";
 
 export default function PrivateRoute({ children }) {
-  const { isAuthenticated, loading } = useLearner()
+  const { isAuthenticated, loading } = useLearner();
 
-  // Show nothing while checking authentication
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
-          <p className="text-muted-foreground">Loading...</p>
-        </div>
-      </div>
-    )
-  }
-
-  if (!isAuthenticated) {
-    return <Navigate to="/login" replace />
-  }
-
-  return children
+  if (loading) return <PageLoading label="Checking your session..." />;
+  if (!isAuthenticated) return <Navigate to="/login" replace />;
+  return children;
 }
diff --git a/src/components/dashboard/DashboardSkeleton.jsx b/src/components/dashboard/DashboardSkeleton.jsx
new file mode 100644
index 0000000..25d8b12
--- /dev/null
+++ b/src/components/dashboard/DashboardSkeleton.jsx
@@ -0,0 +1,31 @@
+import Skeleton from "../common/Skeleton";
+
+/* Holds the register's shape so the page does not blank on every visit. */
+export default function DashboardSkeleton() {
+  return (
+    <div className="space-y-12">
+      <div className="pl-6">
+        <Skeleton className="h-3 w-28" />
+        <Skeleton className="mt-4 h-16 w-48" />
+        <Skeleton className="mt-3 h-4 w-64" />
+      </div>
+      <div className="grid gap-x-10 sm:grid-cols-3">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="border-t border-rule py-4">
+            <Skeleton className="h-3 w-20" />
+            <Skeleton className="mt-3 h-7 w-16" />
+          </div>
+        ))}
+      </div>
+      <div>
+        <Skeleton className="h-3 w-32" />
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="border-t border-rule py-5">
+            <Skeleton className="h-4 w-56" />
+            <Skeleton className="mt-2 h-3 w-40" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/dashboard/InterviewRow.jsx b/src/components/dashboard/InterviewRow.jsx
new file mode 100644
index 0000000..53dfa6b
--- /dev/null
+++ b/src/components/dashboard/InterviewRow.jsx
@@ -0,0 +1,45 @@
+import { Link } from "react-router-dom";
+import StatusBadge from "../common/StatusBadge";
+import { formatDate, formatScore, hasScore, interviewRef, scoreLabel, scoreTone } from "../../lib/format";
+
+/* A line in the register: reference, subject, date, and the mark it earned. */
+export default function InterviewRow({ interview }) {
+  const scored = hasScore(interview.overallScore);
+
+  return (
+    <Link
+      to={`/interviews/${interview.id}`}
+      className="group flex items-start gap-4 border-t border-rule py-4 transition-colors hover:bg-sunk/50"
+    >
+      <span className="tabular mt-0.5 hidden w-[72px] shrink-0 font-mono text-[11px] tracking-[0.04em] text-ink-faint sm:block">
+        {interviewRef(interview.id)}
+      </span>
+
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
+          <h4 className="truncate font-medium text-ink">{interview.role}</h4>
+          <span className="text-xs capitalize text-ink-muted">{interview.interviewType}</span>
+          <StatusBadge status={interview.status} />
+        </div>
+        <p className="mt-1 truncate text-sm text-ink-muted">
+          {formatDate(interview.completedAt || interview.startedAt)}
+          {interview.technologies.length > 0 && ` · ${interview.technologies.slice(0, 3).join(", ")}`}
+        </p>
+        {interview.feedback && interview.status === "completed" && (
+          <p className="mt-1.5 line-clamp-1 text-sm text-ink-faint">{interview.feedback}</p>
+        )}
+      </div>
+
+      {scored && (
+        <div className="shrink-0 text-right">
+          <p className={`tabular font-mono text-lg ${scoreTone(interview.overallScore)}`}>
+            {formatScore(interview.overallScore)}
+          </p>
+          <p className="font-mono text-[10px] uppercase tracking-[0.1em] text-ink-faint">
+            {scoreLabel(interview.overallScore)}
+          </p>
+        </div>
+      )}
+    </Link>
+  );
+}
diff --git a/src/components/dashboard/LeadFigure.jsx b/src/components/dashboard/LeadFigure.jsx
new file mode 100644
index 0000000..b7ed769
--- /dev/null
+++ b/src/components/dashboard/LeadFigure.jsx
@@ -0,0 +1,37 @@
+import { formatScore, hasScore, scoreLabel, scoreTone } from "../../lib/format";
+
+/*
+ * The register's headline. Hierarchy here is scale contrast alone, so the
+ * figure has to outrank everything else on the view by a long way — at a 1.6x
+ * step it merely competed with the greeting.
+ */
+export default function LeadFigure({ label, value, caption }) {
+  const scored = hasScore(value);
+
+  return (
+    <div className="relative pl-6">
+      <span aria-hidden="true" className="absolute inset-y-1 left-0 w-px bg-mark-red/40" />
+
+      <p className="font-mono text-[11px] uppercase tracking-[0.14em] text-ink-muted">{label}</p>
+
+      <p className="mt-2 flex items-baseline gap-3">
+        <span
+          className={`tabular font-display text-[clamp(4.5rem,12vw,7rem)] font-semibold leading-[0.85] tracking-[-0.045em] ${
+            scored ? "text-ink" : "text-ink-faint"
+          }`}
+        >
+          {scored ? formatScore(value).split("/")[0] : "--"}
+        </span>
+        <span className="font-mono text-sm text-ink-faint">/10</span>
+      </p>
+
+      {scored && (
+        <p className={`mark-in mt-1 font-mono text-[11px] uppercase tracking-[0.12em] ${scoreTone(value)}`}>
+          {scoreLabel(value)}
+        </p>
+      )}
+
+      {caption && <p className="mt-3 text-sm text-ink-muted">{caption}</p>}
+    </div>
+  );
+}
diff --git a/src/components/dashboard/ScoreTrendChart.jsx b/src/components/dashboard/ScoreTrendChart.jsx
new file mode 100644
index 0000000..cfe39d1
--- /dev/null
+++ b/src/components/dashboard/ScoreTrendChart.jsx
@@ -0,0 +1,168 @@
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { formatDate } from "../../lib/format";
+
+/*
+ * Series order is fixed and so are the hues: the palette was validated for
+ * normal vision and for protan/deutan/tritan separation against the sheet in
+ * both themes, and reordering would break the adjacency it was checked on.
+ *
+ * All four end-labels collided into an unreadable stack when the series
+ * converge, which they do whenever someone is improving evenly. A legend names
+ * every series, and only the lead series is labelled at its line end.
+ */
+const SERIES = [
+  { key: "overall", label: "Overall", color: "var(--chart-1)", width: 2 },
+  { key: "technical", label: "Technical", color: "var(--chart-2)", width: 1.25 },
+  { key: "problemSolving", label: "Problem solving", color: "var(--chart-3)", width: 1.25 },
+  { key: "communication", label: "Communication", color: "var(--chart-4)", width: 1.25 },
+];
+
+const shortDate = (value) => formatDate(value, { day: "numeric", month: "short" });
+
+/*
+ * The axis is zoomed to the band the scores actually occupy. A fixed 0-10 axis
+ * squeezed every line into a fifth of the plot and read as flat, so the scale
+ * is stated in words instead of spent on empty space.
+ */
+function bandFor(data) {
+  const values = data.flatMap((point) =>
+    SERIES.map(({ key }) => point[key]).filter((v) => typeof v === "number"),
+  );
+  if (!values.length) return [0, 10];
+  const lo = Math.max(0, Math.floor(Math.min(...values) - 0.5));
+  const hi = Math.min(10, Math.ceil(Math.max(...values) + 0.5));
+  return hi - lo < 2 ? [Math.max(0, hi - 2), hi] : [lo, hi];
+}
+
+function TrendTooltip({ active, payload }) {
+  if (!active || !payload?.length) return null;
+  const point = payload[0]?.payload;
+
+  return (
+    <div className="rounded-md border border-rule-strong bg-sheet px-3 py-2.5">
+      <p className="font-mono text-[11px] uppercase tracking-[0.1em] text-ink-muted">{point?.when}</p>
+      <ul className="mt-2 space-y-1">
+        {SERIES.map(({ key, label, color }) => {
+          const entry = payload.find((item) => item.dataKey === key);
+          if (!entry || entry.value == null) return null;
+          return (
+            <li key={key} className="flex items-center justify-between gap-6 text-xs">
+              <span className="flex items-center gap-2 text-ink-muted">
+                <span aria-hidden="true" className="h-[2px] w-3" style={{ background: color }} />
+                {label}
+              </span>
+              <span className="tabular font-mono text-ink">{entry.value}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default function ScoreTrendChart({ trend }) {
+  const data = trend.map((point) => ({
+    ...point,
+    name: shortDate(point.date),
+    when: formatDate(point.date),
+  }));
+
+  if (data.length < 2) {
+    return (
+      <div className="border-t border-rule py-10">
+        <p className="text-sm text-ink-muted">
+          Two scored interviews are enough to draw the line. You have {data.length}.
+        </p>
+      </div>
+    );
+  }
+
+  const [low, high] = bandFor(data);
+
+  return (
+    <div className="border-t border-rule pt-5">
+      <div className="mb-4 flex flex-wrap items-baseline justify-between gap-3">
+        <h2 className="font-mono text-[11px] uppercase tracking-[0.14em] text-ink-muted">
+          Score trend
+        </h2>
+        <p className="text-xs text-ink-faint">
+          {data.length} scored sessions · showing {low}–{high} of a 0–10 scale
+        </p>
+      </div>
+
+      <ul className="mb-5 flex flex-wrap gap-x-5 gap-y-2">
+        {SERIES.map(({ key, label, color }) => (
+          <li key={key} className="flex items-center gap-2 text-xs text-ink-muted">
+            <span
+              aria-hidden="true"
+              className="h-[2px] w-4 rounded-full"
+              style={{ background: color }}
+            />
+            {label}
+          </li>
+        ))}
+      </ul>
+
+      <ResponsiveContainer width="100%" height={210}>
+        <LineChart data={data} margin={{ top: 6, right: 56, bottom: 0, left: -18 }}>
+          <CartesianGrid stroke="var(--rule)" strokeDasharray="0" vertical={false} />
+          <XAxis
+            dataKey="name"
+            tick={{ fontSize: 11, fill: "var(--ink-faint)", fontFamily: "var(--font-mono)" }}
+            axisLine={{ stroke: "var(--rule)" }}
+            tickLine={false}
+          />
+          <YAxis
+            domain={[low, high]}
+            allowDecimals={false}
+            tick={{ fontSize: 11, fill: "var(--ink-faint)", fontFamily: "var(--font-mono)" }}
+            axisLine={false}
+            tickLine={false}
+            width={40}
+          />
+          <Tooltip content={<TrendTooltip />} cursor={{ stroke: "var(--ink-faint)", strokeWidth: 1 }} />
+          {SERIES.map(({ key, label, color, width }) => (
+            <Line
+              key={key}
+              type="monotone"
+              dataKey={key}
+              name={label}
+              stroke={color}
+              strokeWidth={width}
+              dot={false}
+              activeDot={{ r: 4, strokeWidth: 0 }}
+              connectNulls
+              isAnimationActive={false}
+              label={
+                key === "overall"
+                  ? ({ x, y, index }) =>
+                      index === data.length - 1 ? (
+                        <text
+                          key={key}
+                          x={x + 9}
+                          y={y}
+                          dy={4}
+                          fill={color}
+                          fontSize={11}
+                          fontFamily="var(--font-mono)"
+                        >
+                          {label}
+                        </text>
+                      ) : null
+                  : undefined
+              }
+            />
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
diff --git a/src/components/interview/InterviewSession.jsx b/src/components/interview/InterviewSession.jsx
new file mode 100644
index 0000000..e4c2250
--- /dev/null
+++ b/src/components/interview/InterviewSession.jsx
@@ -0,0 +1,182 @@
+import { useEffect, useRef } from "react";
+import { Check, PhoneOff, RotateCw } from "lucide-react";
+import Button from "../common/Button";
+import Spinner from "../common/Spinner";
+import { formatDuration } from "../../lib/format";
+
+const PHASE_LABELS = {
+  connecting: "Connecting to your interviewer",
+  live: "Interview in progress",
+  finishing: "Saving your interview and marking it",
+  failed: "We could not save your interview",
+};
+
+/*
+ * The transcript is the page. It fills the column and gains lines as you speak,
+ * the way a worked answer fills the sheet — not a chat window beside a card.
+ */
+export default function InterviewSession({
+  session,
+  phase,
+  transcript,
+  isSpeaking,
+  seconds,
+  error,
+  onStop,
+  onRetry,
+}) {
+  const endRef = useRef(null);
+  const total = session.interviewConfig.durationSeconds;
+  const live = phase === "live";
+  const busy = phase === "finishing" || phase === "done";
+  const elapsed = Math.min(100, total ? (seconds / total) * 100 : 0);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [transcript]);
+
+  // Closing the tab mid-call would lose the interview.
+  useEffect(() => {
+    if (!live) return undefined;
+    const warn = (event) => event.preventDefault();
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [live]);
+
+  return (
+    <div className="mx-auto flex w-full max-w-[920px] flex-col">
+      <header className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2">
+        <div>
+          <h1 className="font-display text-xl font-semibold tracking-[-0.02em] text-ink">
+            {session.role}
+          </h1>
+          <p className="mt-1 text-sm capitalize text-ink-muted">
+            {session.interviewType} · {session.technologies.slice(0, 3).join(", ")}
+            {session.technologies.length > 3 && ` +${session.technologies.length - 3}`}
+          </p>
+        </div>
+
+        <div className="flex items-baseline gap-3">
+          <span
+            className={`inline-flex items-center gap-1.5 font-mono text-[11px] uppercase tracking-[0.1em] ${
+              live ? "text-mark-green" : "text-mark-ochre"
+            }`}
+          >
+            <span
+              aria-hidden="true"
+              className={`h-1.5 w-1.5 rounded-full ${
+                live ? "bg-mark-green" : "ink-breathe bg-mark-ochre"
+              }`}
+            />
+            {live ? "Live" : "Connecting"}
+          </span>
+          <span className="tabular font-mono text-sm text-ink">
+            {formatDuration(seconds)}
+            <span className="text-ink-faint"> / {formatDuration(total)}</span>
+          </span>
+        </div>
+      </header>
+
+      {/* The sheet filling up: one rule, drawn to where the session has reached. */}
+      <div
+        className="mt-5 h-px w-full bg-rule"
+        role="progressbar"
+        aria-valuenow={Math.round(elapsed)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label="Interview progress"
+      >
+        <div
+          className="h-px bg-mark-red transition-[width] duration-1000 ease-linear"
+          style={{ width: `${elapsed}%` }}
+        />
+      </div>
+
+      {PHASE_LABELS[phase] && phase !== "live" && (
+        <div
+          role="status"
+          className={`mt-5 flex items-center gap-3 rounded-md border px-4 py-3 text-sm ${
+            phase === "failed"
+              ? "border-red-rule bg-red-wash text-red-ink"
+              : "border-blue-rule bg-blue-wash text-blue-ink"
+          }`}
+        >
+          {phase !== "failed" && <Spinner size="sm" className="text-current" />}
+          <span className="flex-1">
+            {PHASE_LABELS[phase]}
+            {phase === "failed" && error ? `: ${error}` : ""}
+          </span>
+          {phase === "failed" && (
+            <button onClick={onRetry} className="inline-flex items-center gap-1.5 font-medium underline">
+              <RotateCw className="h-3.5 w-3.5" aria-hidden="true" /> Try again
+            </button>
+          )}
+        </div>
+      )}
+
+      {error && phase !== "failed" && (
+        <p role="alert" className="mt-5 rounded-md border border-red-rule bg-red-wash px-4 py-3 text-sm text-red-ink">
+          {error}
+        </p>
+      )}
+
+      <div className="relative mt-8 min-h-[320px] flex-1 pl-6" aria-live="polite">
+        <span aria-hidden="true" className="absolute inset-y-0 left-0 w-px bg-mark-red/40" />
+
+        {transcript.length === 0 && (
+          <p className="text-sm text-ink-faint">
+            {live
+              ? "Say hello when you are ready — your words appear here."
+              : "Captions appear here once the interviewer connects."}
+          </p>
+        )}
+
+        <div className="space-y-5">
+          {transcript.map((turn, index) => {
+            const you = turn.speaker === "You";
+            return (
+              <div key={index} className="mark-in relative">
+                {/*
+                 * The transcript gains its marks as you speak. The mark records
+                 * that the turn was captured — it is not a judgement, because
+                 * nothing has been scored yet while the call is still running.
+                 */}
+                {you && (
+                  <Check
+                    aria-hidden="true"
+                    className="absolute -left-[22px] top-0.5 h-3 w-3 text-mark-green"
+                  />
+                )}
+                <p
+                  className={`font-mono text-[10px] uppercase tracking-[0.14em] ${
+                    you ? "text-mark-blue" : "text-ink-faint"
+                  }`}
+                >
+                  {turn.speaker}
+                  {you && <span className="sr-only"> — captured</span>}
+                </p>
+                <p className={`mt-1.5 max-w-[60ch] leading-relaxed ${you ? "text-ink" : "text-ink-muted"}`}>
+                  {turn.text}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+
+        {live && isSpeaking && (
+          <p className="mt-5 font-mono text-[11px] uppercase tracking-[0.12em] text-ink-faint">
+            Interviewer speaking
+          </p>
+        )}
+
+        <div ref={endRef} />
+      </div>
+
+      <div className="mt-10 border-t border-rule pt-5">
+        <Button variant="dangerOutline" onClick={onStop} disabled={busy || phase === "failed"}>
+          <PhoneOff className="h-4 w-4" aria-hidden="true" /> End interview
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/interview/InterviewSetup.jsx b/src/components/interview/InterviewSetup.jsx
new file mode 100644
index 0000000..5228888
--- /dev/null
+++ b/src/components/interview/InterviewSetup.jsx
@@ -0,0 +1,173 @@
+import { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import Select from "../common/Select";
+import Button from "../common/Button";
+
+const TYPE_HINTS = {
+  technical: "Questions about your stack",
+  behavioral: "Teamwork and past experience",
+  mixed: "A bit of both",
+};
+
+/*
+ * The question paper, filled in before the exam starts. Each choice is a
+ * numbered line on the sheet; the submit is the boxed answer at the foot.
+ */
+function Field({ step, label, hint, children }) {
+  return (
+    <fieldset className="border-t border-rule py-6">
+      <legend className="sr-only">{label}</legend>
+      <div className="flex gap-5">
+        <span aria-hidden="true" className="tabular pt-0.5 font-mono text-[11px] text-ink-faint">
+          {String(step).padStart(2, "0")}
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="font-mono text-[11px] uppercase tracking-[0.12em] text-ink-muted">{label}</p>
+          {hint && <p className="mt-1 text-xs text-ink-faint">{hint}</p>}
+          <div className="mt-4">{children}</div>
+        </div>
+      </div>
+    </fieldset>
+  );
+}
+
+export default function InterviewSetup({ options, user, tokens, starting, onStart }) {
+  const roles = useMemo(() => Object.keys(options.roles), [options]);
+
+  // Pre-fill from the profile, but only with values the server will accept.
+  const [role, setRole] = useState(() => (roles.includes(user?.role) ? user.role : ""));
+  const [interviewType, setInterviewType] = useState("mixed");
+  const [technologies, setTechnologies] = useState(() => {
+    const allowed = options.roles[user?.role] || [];
+    return (user?.skills || []).filter((skill) => allowed.includes(skill)).slice(0, options.maxTechnologies);
+  });
+
+  const available = options.roles[role] || [];
+  const canAfford = tokens === null || tokens >= options.tokenCost;
+  const ready = role && technologies.length > 0 && canAfford && !starting;
+
+  const changeRole = (next) => {
+    setRole(next);
+    setTechnologies([]);
+  };
+
+  const toggleTechnology = (tech) =>
+    setTechnologies((current) => {
+      if (current.includes(tech)) return current.filter((t) => t !== tech);
+      return current.length >= options.maxTechnologies ? current : [...current, tech];
+    });
+
+  return (
+    <div className="mx-auto w-full max-w-[920px]">
+      <h1 className="font-display text-xl font-semibold tracking-[-0.02em] text-ink">AI mock interview</h1>
+      <p className="mt-3 text-ink-muted">
+        {options.durationMinutes} minutes, spoken aloud, built from the stack you choose below.
+      </p>
+
+      <form
+        className="mt-10 max-w-[640px]"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (ready) onStart({ role, interviewType, technologies });
+        }}
+      >
+        <Field step={1} label="Role">
+          <Select
+            id="role"
+            value={role}
+            onChange={(event) => changeRole(event.target.value)}
+            aria-label="Role"
+          >
+            <option value="">Select a role</option>
+            {roles.map((name) => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </Select>
+        </Field>
+
+        <Field step={2} label="Interview type">
+          <div className="grid gap-2 sm:grid-cols-3">
+            {options.interviewTypes.map((type) => {
+              const selected = interviewType === type;
+              return (
+                <button
+                  key={type}
+                  type="button"
+                  aria-pressed={selected}
+                  onClick={() => setInterviewType(type)}
+                  className={`rounded-md border px-3 py-3 text-left transition-colors ${
+                    selected
+                      ? "border-ink bg-sunk"
+                      : "border-rule-strong bg-sheet hover:border-ink-faint"
+                  }`}
+                >
+                  <span className="block text-sm capitalize text-ink">{type}</span>
+                  <span className="mt-0.5 block text-xs text-ink-muted">{TYPE_HINTS[type]}</span>
+                </button>
+              );
+            })}
+          </div>
+        </Field>
+
+        {role && (
+          <Field
+            step={3}
+            label="Technologies"
+            hint={`Pick 1 to ${options.maxTechnologies}. These become the questions you are asked.`}
+          >
+            <div className="flex flex-wrap gap-2">
+              {available.map((tech) => {
+                const selected = technologies.includes(tech);
+                return (
+                  <button
+                    key={tech}
+                    type="button"
+                    aria-pressed={selected}
+                    onClick={() => toggleTechnology(tech)}
+                    className={`rounded-full border px-3.5 py-1.5 text-sm transition-colors ${
+                      selected
+                        ? "border-green-rule bg-green-wash text-green-ink"
+                        : "border-rule-strong bg-sheet text-ink-muted hover:border-ink-faint hover:text-ink"
+                    }`}
+                  >
+                    {tech}
+                  </button>
+                );
+              })}
+            </div>
+            <p className="mt-3 font-mono text-[11px] uppercase tracking-[0.1em] text-ink-faint">
+              {technologies.length} of {options.maxTechnologies} chosen
+            </p>
+          </Field>
+        )}
+
+        <div className="flex flex-wrap items-baseline justify-between gap-2 border-t border-rule py-5 text-sm">
+          <span className="text-ink-muted">
+            Costs <span className="tabular font-mono text-ink">{options.tokenCost}</span> tokens,
+            refunded if you do not speak
+          </span>
+          <span className="tabular font-mono text-xs text-ink-faint">
+            {tokens ?? "--"} available
+          </span>
+        </div>
+
+        {!canAfford && (
+          <p className="mb-5 rounded-md border border-ochre-rule bg-ochre-wash px-4 py-3 text-sm text-ochre-ink">
+            You need {options.tokenCost} tokens and have {tokens}. There is no way to buy more yet —
+            your balance and its history are in{" "}
+            <Link to="/settings" className="underline">
+              Settings
+            </Link>
+            .
+          </p>
+        )}
+
+        <Button type="submit" size="lg" disabled={!ready} loading={starting} className="w-full">
+          {starting ? "Preparing your interview" : "Start interview"}
+        </Button>
+      </form>
+    </div>
+  );
+}
diff --git a/src/components/layout/AuthLayout.jsx b/src/components/layout/AuthLayout.jsx
new file mode 100644
index 0000000..61139e8
--- /dev/null
+++ b/src/components/layout/AuthLayout.jsx
@@ -0,0 +1,48 @@
+import { Link } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import Logo from "../brand/Logo";
+import ThemeToggle from "../common/ThemeToggle";
+
+/*
+ * The shell Login and Sign-up share. The sheet sits on paper with its own
+ * margin rule; the form is written to the right of it.
+ */
+export default function AuthLayout({ title, subtitle, children, footer }) {
+  return (
+    <div className="min-h-screen bg-paper">
+      <div className="mx-auto flex min-h-screen w-full max-w-[1100px] flex-col px-4 sm:px-8">
+        <header className="flex h-[72px] shrink-0 items-center justify-between">
+          <Link
+            to="/"
+            className="group inline-flex items-center gap-2 rounded-md py-1 text-sm text-ink-muted transition-colors hover:text-ink"
+          >
+            <ArrowLeft
+              className="h-4 w-4 transition-transform group-hover:-translate-x-0.5"
+              aria-hidden="true"
+            />
+            Back
+          </Link>
+          <ThemeToggle />
+        </header>
+
+        <main id="main" tabIndex={-1} className="flex flex-1 items-center justify-center py-12">
+          <div className="w-full max-w-[420px]">
+            <Logo size="lg" withWordmark={false} className="mb-8" />
+
+            <h1 className="font-display text-[2.5rem] font-semibold leading-[1.05] tracking-[-0.035em] text-ink">
+              {title}
+            </h1>
+            <p className="mb-9 mt-3 text-ink-muted">{subtitle}</p>
+
+            <div className="relative pl-6">
+              <span aria-hidden="true" className="absolute inset-y-0 left-0 w-px bg-mark-red/40" />
+              {children}
+            </div>
+
+            {footer && <div className="mt-8 pl-6 text-sm text-ink-muted">{footer}</div>}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/DashboardLayout.jsx b/src/components/layout/DashboardLayout.jsx
index c75a82a..dcf82af 100644
--- a/src/components/layout/DashboardLayout.jsx
+++ b/src/components/layout/DashboardLayout.jsx
@@ -1,60 +1,70 @@
 import { useState } from "react";
-import { Menu, Search, Bell } from "lucide-react";
-import { Outlet } from "react-router-dom";
-import LearningSidebar from "./LearningSidebar";
+import { Link, Outlet, useLocation } from "react-router-dom";
+import { Menu } from "lucide-react";
+import LearningSidebar, { NAV_LINKS, isNavActive } from "./LearningSidebar";
 import Button from "../common/Button";
+import ThemeToggle from "../common/ThemeToggle";
+import Avatar from "../common/Avatar";
 import { useLearner } from "../../context/LearnerContext";
 
+const TITLES = { "/interviews": "AI Interview" };
+
+function currentTitle(pathname) {
+  if (pathname.startsWith("/interviews/")) return "Report";
+  const match = NAV_LINKS.find((link) => isNavActive(link.to, pathname));
+  return TITLES[pathname] || match?.label || "";
+}
+
 export default function DashboardLayout() {
-    const [sidebarOpen, setSidebarOpen] = useState(false);
-    const { learnerProfile, authUser  } = useLearner();
-
-    const userName = learnerProfile?.name || authUser?.name || "User";
-    const userInitials = userName
-        .split(" ")
-        .map((n) => n[0])
-        .join("")
-        .toUpperCase()
-        .slice(0, 2);
-
-    return (
-        <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
-            <LearningSidebar
-                open={sidebarOpen}
-                onClose={() => setSidebarOpen(false)}
-            />
-
-            <div className="lg:ml-72 flex min-h-screen flex-col">
-                <header className="sticky top-0 z-10 flex h-16 items-center justify-between border-b border-border bg-white/80 backdrop-blur-sm px-4 lg:px-8 shadow-sm">
-                    <div className="flex items-center gap-3">
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            className="lg:hidden inline-flex items-center gap-2 hover:bg-slate-100"
-                            onClick={() => setSidebarOpen(true)}
-                        >
-                            <Menu className="h-5 w-5" />
-                        </Button>
-                    </div>
-
-                    <div className="flex items-center gap-4">
-                        <div className="flex items-center gap-3">
-                            <div className="hidden sm:block text-right">
-                                <p className="text-sm font-semibold text-foreground">
-                                    {userName}
-                                </p>
-                            </div>
-                            <div className="h-9 w-9 rounded-full bg-gradient-to-br from-blue-600 to-blue-700 flex items-center justify-center text-white text-sm font-semibold ring-2 ring-blue-100">
-                                {userInitials}
-                            </div>
-                        </div>
-                    </div>
-                </header>
-
-                <main className="flex-1 px-4 py-6 lg:px-8 lg:py-8">
-                    <Outlet />
-                </main>
-            </div>
-        </div>
-    );
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const { user, tokens } = useLearner();
+  const { pathname } = useLocation();
+  const userName = user?.name || "User";
+
+  return (
+    <div className="min-h-screen bg-paper">
+      <LearningSidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <div className="flex min-h-screen flex-col lg:ml-[248px]">
+        <header className="sticky top-0 z-20 flex h-[72px] shrink-0 items-center gap-3 border-b border-rule bg-paper/92 px-4 backdrop-blur lg:px-10">
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="Open navigation"
+            aria-expanded={sidebarOpen}
+            className="lg:hidden"
+            onClick={() => setSidebarOpen(true)}
+          >
+            <Menu className="h-5 w-5" />
+          </Button>
+
+          {/* Without this the only cue to where you are is the page h1, which scrolls away. */}
+          <p className="truncate font-mono text-[11px] uppercase tracking-[0.14em] text-ink-muted lg:hidden">
+            {currentTitle(pathname)}
+          </p>
+
+          <div className="ml-auto flex items-center gap-2 sm:gap-3">
+            {tokens !== null && (
+              <Link
+                to="/settings"
+                className="group inline-flex items-baseline gap-1.5 rounded-md px-2.5 py-1.5 transition-colors hover:bg-sunk"
+              >
+                <span className="tabular font-mono text-sm font-medium text-ink">{tokens}</span>
+                <span className="font-mono text-[11px] uppercase tracking-[0.1em] text-ink-muted">
+                  tokens
+                </span>
+              </Link>
+            )}
+            <ThemeToggle />
+            <span className="hidden text-sm text-ink sm:block">{userName}</span>
+            <Avatar name={userName} />
+          </div>
+        </header>
+
+        <main id="main" tabIndex={-1} className="flex-1 px-4 py-8 lg:px-10 lg:py-10">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
 }
diff --git a/src/components/layout/LearningSidebar.jsx b/src/components/layout/LearningSidebar.jsx
index a0b50ec..5bdf0c2 100644
--- a/src/components/layout/LearningSidebar.jsx
+++ b/src/components/layout/LearningSidebar.jsx
@@ -1,91 +1,97 @@
-import { Link, useLocation } from "react-router-dom";
-import {
-  LayoutDashboard,
-  BookOpen,
-  MessageSquare,
-  Sparkles,
-  Settings,
-  LogOut,
-} from "lucide-react";
+import { useEffect, useRef } from "react";
+import { NavLink, useLocation } from "react-router-dom";
+import { History, LayoutDashboard, LogOut, Mic, Settings } from "lucide-react";
 import { useLearner } from "../../context/LearnerContext";
-import Button from "../common/Button";
+import Logo from "../brand/Logo";
+import { cn } from "../../lib/utils";
 
-const links = [
+export const NAV_LINKS = [
   { label: "Dashboard", to: "/dashboard", icon: LayoutDashboard },
-  { label: "AI Interview", to: "/interviews", icon: MessageSquare },
+  { label: "AI Interview", to: "/interviews", icon: Mic },
+  { label: "History", to: "/history", icon: History },
+  { label: "Settings", to: "/settings", icon: Settings },
 ];
 
+// `/interviews/:id` is a report, which belongs to History; `/interviews` itself is the start page.
+export const isNavActive = (to, pathname) =>
+  to === "/history"
+    ? pathname === "/history" || pathname.startsWith("/interviews/")
+    : pathname === to;
+
 export default function LearningSidebar({ open = false, onClose }) {
   const location = useLocation();
-  const { logout  } = useLearner();
+  const { logout } = useLearner();
+  const panelRef = useRef(null);
 
-  const handleLogout = () => {
-    logout();
-    if (onClose) {
-      onClose();
-    }
-  };
+  // The drawer is modal on mobile: Escape closes it and focus moves in.
+  useEffect(() => {
+    if (!open) return undefined;
+    panelRef.current?.querySelector("a, button")?.focus();
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose?.();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
 
   return (
     <>
       {open && (
-        <div
-          className="fixed inset-0 z-30 bg-black/40 lg:hidden"
-          onClick={onClose}
-        />
+        <div className="fixed inset-0 z-30 bg-ink/45 lg:hidden" onClick={onClose} aria-hidden="true" />
       )}
 
       <aside
-        className={`fixed inset-y-0 left-0 z-40 w-72 transform border-r border-border bg-white transition-transform duration-300 ease-in-out lg:translate-x-0 ${open ? "translate-x-0" : "-translate-x-full"}`}
+        ref={panelRef}
+        aria-label="Main navigation"
+        className={cn(
+          "fixed inset-y-0 left-0 z-40 flex w-[248px] flex-col border-r border-rule bg-sheet",
+          "transition-transform duration-300 ease-out lg:translate-x-0",
+          open ? "translate-x-0" : "-translate-x-full",
+        )}
       >
-        <div className="flex h-full flex-col">
-          {/* Logo Section */}
-          <div className="flex h-16 items-center gap-2 border-b border-border px-6">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-blue-600 to-blue-700 shadow-md">
-              <Sparkles className="h-5 w-5 text-white" />
-            </div>
-            <div>
-              <p className="text-lg font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
-                EduNerve AI
-              </p>
-            </div>
-          </div>
-
-          {/* Navigation Links */}
-          <nav className="flex-1 space-y-1 overflow-y-auto px-4 py-6">
-            {links.map((item) => {
-              const isActive = location.pathname === item.to;
-              const Icon = item.icon;
+        <div className="flex h-[72px] shrink-0 items-center border-b border-rule px-6">
+          <Logo size="sm" />
+        </div>
 
+        {/* The margin rule: nav items are written to the right of it, as on the sheet. */}
+        <nav className="relative flex-1 overflow-y-auto py-5 pl-6 pr-4">
+          <span aria-hidden="true" className="absolute inset-y-4 left-6 w-px bg-mark-red/35" />
+          <div className="space-y-0.5 pl-4">
+            {NAV_LINKS.map(({ to, label, icon: Icon }) => {
+              const active = isNavActive(to, location.pathname);
               return (
-                <Link
-                  key={item.to}
-                  to={item.to}
-                  className={`flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all ${
-                    isActive
-                      ? "bg-blue-600 text-white shadow-md"
-                      : "text-muted-foreground hover:bg-slate-100 hover:text-foreground"
-                  }`}
+                <NavLink
+                  key={to}
+                  to={to}
                   onClick={onClose}
+                  aria-current={active ? "page" : undefined}
+                  className={cn(
+                    "group flex items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors",
+                    active ? "bg-sunk font-medium text-ink" : "text-ink-muted hover:bg-sunk/60 hover:text-ink",
+                  )}
                 >
-                  <Icon className="h-5 w-5" />
-                  {item.label}
-                </Link>
+                  <Icon
+                    className={cn("h-[18px] w-[18px] shrink-0", active ? "text-mark-red" : "text-ink-faint")}
+                    aria-hidden="true"
+                  />
+                  {label}
+                </NavLink>
               );
             })}
-          </nav>
-
-          <div className="border-t border-border px-6 py-5">
-            <div className="px-4 py-3">
-              <button
-                onClick={handleLogout}
-                className="w-full flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-red-600 hover:bg-red-50 transition-all mt-1"
-              >
-                <LogOut className="h-5 w-5" />
-                Sign Out
-              </button>
-            </div>
           </div>
+        </nav>
+
+        <div className="shrink-0 border-t border-rule p-4">
+          <button
+            onClick={() => {
+              logout();
+              onClose?.();
+            }}
+            className="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-ink-muted transition-colors hover:bg-red-wash hover:text-red-ink"
+          >
+            <LogOut className="h-[18px] w-[18px] shrink-0" aria-hidden="true" />
+            Sign out
+          </button>
         </div>
       </aside>
     </>
diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx
index 7fc2295..f916a6c 100644
--- a/src/pages/DashboardPage.jsx
+++ b/src/pages/DashboardPage.jsx
@@ -1,9 +1,186 @@
-import { OverviewContent } from "../components/dashboard/overview-content";
+import { useEffect } from "react";
+import { Link } from "react-router-dom";
+import { useLearner } from "../context/LearnerContext";
+import { useAsync } from "../hooks/useAsync";
+import { dashboardAPI, interviewAPI } from "../lib/api";
+import { formatScore } from "../lib/format";
+import { PageError } from "../components/common/PageState";
+import ButtonLink from "../components/common/ButtonLink";
+import ScoreBar from "../components/common/ScoreBar";
+import LeadFigure from "../components/dashboard/LeadFigure";
+import ScoreTrendChart from "../components/dashboard/ScoreTrendChart";
+import InterviewRow from "../components/dashboard/InterviewRow";
+import DashboardSkeleton from "../components/dashboard/DashboardSkeleton";
+
+/* A heading set as a small ruled label, so nothing competes with the lead figure. */
+function SectionHead({ children, aside }) {
+  return (
+    <div className="mb-1 flex flex-wrap items-baseline justify-between gap-3">
+      <h2 className="font-mono text-[11px] uppercase tracking-[0.14em] text-ink-muted">{children}</h2>
+      {aside}
+    </div>
+  );
+}
+
+/*
+ * The register line. This replaced a row of three identically weighted tiles
+ * sitting above the trend chart — the exact arrangement the direction refuses,
+ * restated in the world's own materials. Facts of different kinds now sit on
+ * one ruled line at label rank, well below the lead figure.
+ */
+function RegisterLine({ facts }) {
+  return (
+    <dl className="flex flex-wrap items-baseline gap-x-8 gap-y-2 border-t border-rule pt-4">
+      {facts.map(({ term, detail }) => (
+        <div key={term} className="flex items-baseline gap-2">
+          <dt className="font-mono text-[11px] uppercase tracking-[0.12em] text-ink-muted">{term}</dt>
+          <dd className="tabular font-mono text-sm text-ink">{detail}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
 
 export default function DashboardPage() {
+  const { user, setTokens } = useLearner();
+
+  const { data, error, loading, reload } = useAsync(async () => {
+    const [stats, history] = await Promise.all([
+      dashboardAPI.getStats(),
+      interviewAPI.list({ limit: 5 }),
+    ]);
+    return { stats: stats.data, recent: history.interviews };
+  }, []);
+
+  // Keep the header token count in step with what the server says.
+  const serverTokens = data?.stats.tokens;
+  useEffect(() => {
+    if (typeof serverTokens === "number") setTokens(serverTokens);
+  }, [serverTokens, setTokens]);
+
+  if (loading) return <DashboardSkeleton />;
+  if (error) return <PageError message={error.message} onRetry={reload} />;
+
+  const { stats, recent } = data;
+  const scored = stats.completedInterviews > 0;
+
   return (
-    <>
-      <OverviewContent />
-    </>
+    <div className="mx-auto w-full max-w-[920px]">
+      <header className="mb-10 flex flex-wrap items-baseline justify-between gap-5">
+        <div>
+          {/* Demoted to label rank: the figure below is the headline. */}
+          <h1 className="font-display text-xl font-semibold tracking-[-0.02em] text-ink">
+            Welcome back, {user?.name?.split(" ")[0] || "there"}
+          </h1>
+          <p className="mt-1 text-sm text-ink-muted">
+            {user?.role || (
+              <>
+                <Link to="/settings" className="text-ink underline">
+                  Add your target role
+                </Link>{" "}
+                so your interviews match the job
+              </>
+            )}
+          </p>
+        </div>
+
+        {/* The boxed answer. Kept at md so it does not outweigh the lead figure,
+            which FIRST VIEWPORT wants taking first fixation. */}
+        <ButtonLink to="/interviews">Start interview</ButtonLink>
+      </header>
+
+      <section className="grid gap-10 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] md:items-end">
+        <LeadFigure
+          label="Average score"
+          value={scored ? stats.avgScore : null}
+          caption={
+            scored
+              ? `Across ${stats.completedInterviews} scored ${
+                  stats.completedInterviews === 1 ? "session" : "sessions"
+                }`
+              : "Nothing scored yet — your first interview sets the baseline."
+          }
+        />
+
+        {scored && (
+          <div className="space-y-5">
+            <ScoreBar label="Technical" value={stats.avgScores.technical} />
+            <ScoreBar label="Communication" value={stats.avgScores.communication} />
+            <ScoreBar label="Problem solving" value={stats.avgScores.problemSolving} />
+          </div>
+        )}
+      </section>
+
+      <section className="mt-10">
+        <RegisterLine
+          facts={[
+            {
+              term: "Interviews",
+              detail: `${stats.interviewSessions} · ${stats.completedInterviews} marked`,
+            },
+            { term: "Skills tracked", detail: stats.skillsTracked },
+            ...(user?.experience ? [{ term: "Experience", detail: user.experience }] : []),
+          ]}
+        />
+      </section>
+
+      {scored && (
+        <section className="mt-12">
+          <ScoreTrendChart trend={stats.scoreTrend} />
+        </section>
+      )}
+
+      <section className="mt-12">
+        <SectionHead
+          aside={
+            recent.length > 0 && (
+              <Link to="/history" className="text-xs text-ink-muted underline hover:text-ink">
+                View all
+              </Link>
+            )
+          }
+        >
+          Recent interviews
+        </SectionHead>
+
+        {recent.length > 0 ? (
+          <div>
+            {recent.map((interview) => (
+              <InterviewRow key={interview.id} interview={interview} />
+            ))}
+          </div>
+        ) : (
+          <div className="border-t border-rule py-12">
+            <h3 className="font-display text-xl font-semibold tracking-[-0.02em] text-ink">
+              Ready for your first interview?
+            </h3>
+            <p className="mb-6 mt-2 max-w-[48ch] text-sm text-ink-muted">
+              Talk through a real question out loud and get it back marked up — scored on technical
+              depth, communication and problem solving.
+            </p>
+            <ButtonLink to="/interviews">Start practising</ButtonLink>
+          </div>
+        )}
+      </section>
+
+      {user?.skills?.length > 0 && (
+        <section className="mt-12">
+          <SectionHead>Your stack</SectionHead>
+          <div className="flex flex-wrap gap-2 border-t border-rule pt-4">
+            {user.skills.map((skill) => (
+              <span
+                key={skill}
+                className="rounded-full border border-rule-strong px-3 py-1 text-xs text-ink-muted"
+              >
+                {skill}
+              </span>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Keeps the 0-10 scale legible to assistive tech without repeating it visually. */}
+      <p className="sr-only">Average score {formatScore(stats.avgScore)}.</p>
+    </div>
   );
 }
diff --git a/src/pages/HistoryPage.jsx b/src/pages/HistoryPage.jsx
new file mode 100644
index 0000000..bca3db5
--- /dev/null
+++ b/src/pages/HistoryPage.jsx
@@ -0,0 +1,159 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { interviewAPI } from "../lib/api";
+import { STATUS_LABELS } from "../lib/format";
+import { PageError } from "../components/common/PageState";
+import InterviewRow from "../components/dashboard/InterviewRow";
+import Button from "../components/common/Button";
+import ButtonLink from "../components/common/ButtonLink";
+import Select from "../components/common/Select";
+import Skeleton from "../components/common/Skeleton";
+
+const PAGE_SIZE = 10;
+
+function RowSkeleton() {
+  return (
+    <div className="border-t border-rule py-4">
+      <Skeleton className="h-4 w-52" />
+      <Skeleton className="mt-2.5 h-3 w-36" />
+    </div>
+  );
+}
+
+export default function HistoryPage() {
+  const [filters, setFilters] = useState({ status: "", interviewType: "" });
+  const [items, setItems] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [cursor, setCursor] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState(null);
+  const requestId = useRef(0); // ignore responses from an older filter selection
+  const loadedOnce = useRef(false);
+
+  const load = useCallback(
+    async (nextCursor, append) => {
+      const id = ++requestId.current;
+      append ? setLoadingMore(true) : setLoading(true);
+      setError(null);
+      try {
+        const page = await interviewAPI.list({
+          ...filters,
+          limit: PAGE_SIZE,
+          cursor: nextCursor || undefined,
+        });
+        if (id !== requestId.current) return;
+        setItems((current) => (append ? [...current, ...page.interviews] : page.interviews));
+        setTotal(page.total);
+        setCursor(page.nextCursor);
+        loadedOnce.current = true;
+      } catch (err) {
+        if (id === requestId.current) setError(err);
+      } finally {
+        if (id === requestId.current) {
+          setLoading(false);
+          setLoadingMore(false);
+        }
+      }
+    },
+    [filters],
+  );
+
+  useEffect(() => {
+    load(null, false);
+  }, [load]);
+
+  const setFilter = (key) => (event) =>
+    setFilters((current) => ({ ...current, [key]: event.target.value }));
+  const filtered = Boolean(filters.status || filters.interviewType);
+
+  // Changing a filter dims the list in place rather than replacing the page with
+  // a spinner, so the thing being compared against stays on screen.
+  const refiltering = loading && loadedOnce.current;
+  const firstLoad = loading && !loadedOnce.current;
+
+  return (
+    <div className="mx-auto w-full max-w-[920px]">
+      <header className="flex flex-wrap items-end justify-between gap-5">
+        <div>
+          <h1 className="font-display text-xl font-semibold tracking-[-0.02em] text-ink">Interview history</h1>
+          <p className="mt-2 text-sm text-ink-muted">
+            {firstLoad ? "Loading" : `${total} interview${total === 1 ? "" : "s"}`}
+          </p>
+        </div>
+
+        <div className="flex gap-3">
+          <Select
+            aria-label="Filter by status"
+            value={filters.status}
+            onChange={setFilter("status")}
+            className="h-10 w-auto"
+          >
+            <option value="">All statuses</option>
+            {Object.entries(STATUS_LABELS).map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </Select>
+          <Select
+            aria-label="Filter by type"
+            value={filters.interviewType}
+            onChange={setFilter("interviewType")}
+            className="h-10 w-auto"
+          >
+            <option value="">All types</option>
+            <option value="technical">Technical</option>
+            <option value="behavioral">Behavioral</option>
+            <option value="mixed">Mixed</option>
+          </Select>
+        </div>
+      </header>
+
+      <div className="mt-10">
+        {firstLoad && (
+          <>
+            <RowSkeleton />
+            <RowSkeleton />
+            <RowSkeleton />
+          </>
+        )}
+
+        {!loading && error && <PageError message={error.message} onRetry={() => load(null, false)} />}
+
+        {!loading && !error && items.length === 0 && (
+          <div className="border-t border-rule py-14">
+            <p className="text-sm text-ink-muted">
+              {filtered
+                ? "No interviews match these filters."
+                : "You haven't done any interviews yet."}
+            </p>
+            {!filtered && (
+              <div className="mt-6">
+                <ButtonLink to="/interviews">Start your first interview</ButtonLink>
+              </div>
+            )}
+          </div>
+        )}
+
+        {!error && items.length > 0 && (
+          <div
+            aria-busy={refiltering}
+            className={refiltering ? "opacity-50 transition-opacity" : "transition-opacity"}
+          >
+            {items.map((interview) => (
+              <InterviewRow key={interview.id} interview={interview} />
+            ))}
+
+            {cursor && (
+              <div className="border-t border-rule pt-5">
+                <Button variant="outline" onClick={() => load(cursor, true)} loading={loadingMore}>
+                  Load more
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/InterviewPage.jsx b/src/pages/InterviewPage.jsx
index 018e14f..3dff14f 100644
--- a/src/pages/InterviewPage.jsx
+++ b/src/pages/InterviewPage.jsx
@@ -1,11 +1,97 @@
-import React from "react";
-import Navbar from "../components/layout/Navbar";
-import Interview from "../components/Interview";
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useLearner } from "../context/LearnerContext";
+import { useToast } from "../components/common/Toast";
+import { PageError, PageLoading } from "../components/common/PageState";
+import InterviewSetup from "../components/interview/InterviewSetup";
+import InterviewSession from "../components/interview/InterviewSession";
+import { useAsync } from "../hooks/useAsync";
+import { useVapiInterview } from "../hooks/useVapiInterview";
+import { interviewAPI } from "../lib/api";
 
 export default function InterviewPage() {
-  return (
-    <div className="min-h-screen bg-background">
-      <Interview />
-    </div>
+  const navigate = useNavigate();
+  const toast = useToast();
+  const { user, tokens, setTokens } = useLearner();
+  const options = useAsync(() => interviewAPI.getOptions(), []);
+
+  const [session, setSession] = useState(null); // the /start-interview response
+  const [starting, setStarting] = useState(false);
+  const [endedEarly, setEndedEarly] = useState(null); // survives on the setup screen
+
+  const handleFinished = useCallback(
+    (result) => {
+      setTokens(result.tokensRemaining);
+      if (result.feedbackStatus === "none") {
+        // A toast alone used to be the whole explanation, and it vanished after
+        // five seconds onto a form that looked like nothing had happened.
+        setEndedEarly({ refunded: result.refunded });
+        setSession(null);
+        return;
+      }
+      if (result.feedbackStatus === "fallback") {
+        toast.info("Your interview was saved, but AI feedback is unavailable right now.");
+      }
+      navigate(`/interviews/${result.interview.id}`, { replace: true });
+    },
+    [navigate, setTokens, toast],
+  );
+
+  const interview = useVapiInterview({ onFinished: handleFinished });
+
+  const handleStart = async (form) => {
+    setStarting(true);
+    setEndedEarly(null);
+    try {
+      // Ask for the microphone first so a denied prompt doesn't cost any tokens.
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        stream.getTracks().forEach((track) => track.stop());
+      } catch {
+        toast.error("Microphone access is needed. Allow it in your browser settings and try again.");
+        return;
+      }
+
+      const started = await interviewAPI.start(form);
+      setTokens(started.tokensRemaining);
+      setSession(started);
+      interview.start(started).then((outcome) => {
+        if (!outcome.ok) toast.error(outcome.error);
+      });
+    } catch (error) {
+      toast.error(
+        error.code === "INSUFFICIENT_TOKENS"
+          ? "Not enough tokens to start an interview."
+          : error.message,
+      );
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  if (options.loading) return <PageLoading label="Loading interview options" />;
+  if (options.error) return <PageError message={options.error.message} onRetry={options.reload} />;
+
+  return session ? (
+    <InterviewSession
+      session={session}
+      phase={interview.phase}
+      transcript={interview.transcript}
+      isSpeaking={interview.isSpeaking}
+      seconds={interview.seconds}
+      error={interview.error}
+      onStop={interview.stop}
+      onRetry={interview.retry}
+    />
+  ) : (
+    <InterviewSetup
+      options={options.data}
+      user={user}
+      tokens={tokens}
+      starting={starting}
+      endedEarly={endedEarly}
+      onDismissEndedEarly={() => setEndedEarly(null)}
+      onStart={handleStart}
+    />
   );
 }
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index 7720810..6b3b3d2 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -1,365 +1,272 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { ArrowRight, Check, LayoutDashboard, Target } from "lucide-react";
 import { useLearner } from "../context/LearnerContext";
-import Button from "../components/common/Button";
-import { GridBackgroundDemo } from "../components/grid";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  CardDescription,
-} from "../components/ui/card";
-import {
-  ArrowRight,
-  BookOpen,
-  MessageSquare,
-  CheckCircle2,
-  BarChart3,
-  Clock,
-  Sparkles,
-} from "lucide-react";
+import Logo from "../components/brand/Logo";
+import Avatar from "../components/common/Avatar";
+import ButtonLink from "../components/common/ButtonLink";
+import ThemeToggle from "../components/common/ThemeToggle";
 
-export default function LandingPage() {
-  const navigate = useNavigate();
-  const { isAuthenticated, learnerProfile, authUser, logout } = useLearner();
-  const [showDropdown, setShowDropdown] = useState(false);
-  const dropdownRef = useRef(null);
+/*
+ * The sequence carries the argument, so the steps are numbered and ruled rather
+ * than boxed into equal cards.
+ */
+const STEPS = [
+  {
+    title: "Name the job",
+    body: "Pick the role you're interviewing for and the technologies you want to be asked about. That selection is what the interviewer is built from — not a generic question bank.",
+  },
+  {
+    title: "Say it out loud",
+    body: "A short spoken interview with follow-up questions, timed by the session itself. Your answers are transcribed as you go, so nothing depends on remembering what you said.",
+  },
+  {
+    title: "Read it back marked up",
+    body: "Scored on technical depth, communication and problem solving, with the marks written in the margin beside the conversation they came from.",
+  },
+];
+
+function AccountMenu({ user, onLogout }) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
 
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setShowDropdown(false);
-      }
+    if (!open) return undefined;
+    const onPointerDown = (event) => {
+      if (!containerRef.current?.contains(event.target)) setOpen(false);
     };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
 
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  const handleLogout = () => {
-    logout();
-    setShowDropdown(false);
-    navigate("/");
-  };
-
-  const userAvatar = authUser?.picture || learnerProfile?.avatar;
-  const userName = learnerProfile?.name || authUser?.name || "User";
-  const userInitials = userName
-    .split(" ")
-    .map((n) => n[0])
-    .join("")
-    .toUpperCase()
-    .slice(0, 2);
+  const name = user?.name || "User";
 
   return (
-    <>
-      <GridBackgroundDemo />
-      <div className="min-h-screen flex flex-col relative z-10 bg-gradient-to-b from-transparent to-muted/20">
-        <header className="sticky top-0 z-50 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-            <div className="flex items-center justify-between">
-              <Link to="/" className="flex items-center gap-2 group">
-                <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-600 to-blue-700 flex items-center justify-center">
-                  <Sparkles className="h-5 w-5 text-white" />
-                </div>
-                <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
-                  EduNerve AI
-                </span>
-              </Link>
+    <div className="relative" ref={containerRef}>
+      <button
+        onClick={() => setOpen((shown) => !shown)}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        className="flex items-center gap-2.5 rounded-full p-0.5 transition-opacity hover:opacity-80"
+      >
+        <span className="hidden text-sm text-ink sm:block">{name}</span>
+        <Avatar name={name} />
+      </button>
 
-              <div className="flex items-center gap-3">
-                {!isAuthenticated ? (
-                  <>
-                    <Button
-                      onClick={() => navigate("/login")}
-                      variant="ghost"
-                      className="hidden sm:inline-flex"
-                    >
-                      Log In
-                    </Button>
-                    <Button
-                      onClick={() => navigate("/signup")}
-                      className="bg-blue-600 hover:bg-blue-700"
-                    >
-                      Get Started
-                    </Button>
-                  </>
-                ) : (
-                  <div className="relative" ref={dropdownRef}>
-                    <button
-                      onClick={() => setShowDropdown(!showDropdown)}
-                      className="flex items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer"
-                    >
-                      <span className="text-sm font-medium text-foreground hidden sm:block">
-                        {userName}
-                      </span>
-                      {userAvatar ? (
-                        <img
-                          src={userAvatar}
-                          alt={userName}
-                          className="w-9 h-9 rounded-full border-2 border-blue-600 object-cover cursor-pointer ring-2 ring-blue-100"
-                        />
-                      ) : (
-                        <div className="w-9 h-9 rounded-full bg-gradient-to-br from-blue-600 to-blue-700 text-white flex items-center justify-center text-sm font-semibold cursor-pointer ring-2 ring-blue-100">
-                          {userInitials}
-                        </div>
-                      )}
-                    </button>
-
-                    {showDropdown && (
-                      <div className="absolute right-0 mt-3 w-56 bg-card border border-border rounded-xl shadow-xl py-2 z-50 animate-in fade-in slide-in-from-top-2 duration-200">
-                        <div className="px-4 py-3 border-b border-border">
-                          <p className="text-sm font-semibold text-foreground">
-                            {userName}
-                          </p>
-                          <p className="text-xs text-muted-foreground truncate mt-0.5">
-                            {learnerProfile?.email || authUser?.email}
-                          </p>
-                        </div>
-                        <button
-                          onClick={() => {
-                            setShowDropdown(false);
-                            navigate("/dashboard");
-                          }}
-                          className="w-full text-left px-4 py-2.5 text-sm text-foreground hover:bg-muted transition-colors cursor-pointer flex items-center gap-2"
-                        >
-                          <BarChart3 className="h-4 w-4" />
-                          Dashboard
-                        </button>
-                        <button
-                          onClick={handleLogout}
-                          className="w-full text-left px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-colors cursor-pointer"
-                        >
-                          Logout
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
+      {open && (
+        <div
+          role="menu"
+          className="mark-in absolute right-0 z-50 mt-2 w-60 overflow-hidden rounded-md border border-rule-strong bg-sheet py-1.5"
+        >
+          <div className="border-b border-rule px-4 py-3">
+            <p className="truncate text-sm text-ink">{name}</p>
+            <p className="mt-0.5 truncate font-mono text-[11px] text-ink-faint">{user?.email}</p>
           </div>
-        </header>
-
-        <section className="pt-20 sm:pt-28 pb-16 sm:pb-24 px-4 sm:px-6 lg:px-8">
-          <div className="max-w-7xl mx-auto">
-            <div className="flex flex-col items-center text-center space-y-8 max-w-4xl mx-auto">
-              <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight">
-                Ace your next interview with{" "}
-                <span className="bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
-                  AI practice
-                </span>
-              </h1>
+          <Link
+            to="/dashboard"
+            role="menuitem"
+            onClick={() => setOpen(false)}
+            className="flex items-center gap-2 px-4 py-2.5 text-sm text-ink transition-colors hover:bg-sunk"
+          >
+            <LayoutDashboard className="h-4 w-4" aria-hidden="true" />
+            Dashboard
+          </Link>
+          <button
+            role="menuitem"
+            onClick={() => {
+              setOpen(false);
+              onLogout();
+            }}
+            className="flex w-full items-center gap-2 px-4 py-2.5 text-left text-sm text-ink-muted transition-colors hover:bg-red-wash hover:text-red-ink"
+          >
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
 
-              <p className="text-lg sm:text-xl text-muted-foreground max-w-3xl leading-relaxed">
-                Practice mock interviews with AI and get personalized feedback
-                to land your dream job.
-              </p>
+/*
+ * The proof: a specimen of what comes back, built the way the real report is.
+ * Labelled a sample so nobody mistakes it for their own data, and carrying no
+ * claim about anyone's results.
+ */
+function Specimen() {
+  return (
+    <figure className="w-full">
+      <figcaption className="mb-4 flex items-baseline justify-between gap-3 font-mono text-[11px] uppercase tracking-[0.12em] text-ink-faint">
+        <span>Sample report</span>
+        <span aria-hidden="true">EN-4K71</span>
+      </figcaption>
 
-              <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2 w-full sm:w-auto">
-                <Button
-                  size="lg"
-                  onClick={() =>
-                    navigate(isAuthenticated ? "/dashboard" : "/signup")
-                  }
-                  className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-8 h-12 text-base font-semibold shadow-lg shadow-blue-600/30 hover:shadow-xl hover:shadow-blue-600/40 transition-all group/btn"
-                >
-                  <span className="flex items-center justify-center gap-2">
-                    Get Started Free
-                    <ArrowRight className="h-5 w-5 group-hover/btn:translate-x-1 transition-transform" />
-                  </span>
-                </Button>
-              </div>
+      <div className="rounded-lg border border-rule bg-sheet p-6">
+        <div className="flex items-start justify-between gap-6 border-b border-rule pb-5">
+          <div>
+            <p className="font-display text-lg font-semibold tracking-[-0.02em] text-ink">
+              Backend Developer
+            </p>
+            <p className="mt-1 text-sm text-ink-muted">Technical · Node.js, PostgreSQL</p>
+          </div>
+          <div className="shrink-0 text-right">
+            <p className="tabular font-display text-[2.5rem] font-semibold leading-none tracking-[-0.03em] text-mark-green">
+              8.1
+            </p>
+            <p className="mt-1 font-mono text-[10px] uppercase tracking-[0.1em] text-ink-muted">
+              Strong
+            </p>
+          </div>
+        </div>
 
-              {/* Stats Section */}
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 pt-12 w-full max-w-4xl">
-                <div className="flex flex-col items-center space-y-2 p-4 rounded-xl border border-border bg-card/50 hover:bg-card transition-colors">
-                  <div className="text-3xl sm:text-4xl font-bold text-blue-600">
-                    7+
-                  </div>
-                  <div className="text-sm text-muted-foreground font-medium">
-                    Job Roles
-                  </div>
-                </div>
-                <div className="flex flex-col items-center space-y-2 p-4 rounded-xl border border-border bg-card/50 hover:bg-card transition-colors">
-                  <div className="text-3xl sm:text-4xl font-bold text-blue-600">
-                    40+
-                  </div>
-                  <div className="text-sm text-muted-foreground font-medium">
-                    Technologies
-                  </div>
-                </div>
-                <div className="flex flex-col items-center space-y-2 p-4 rounded-xl border border-border bg-card/50 hover:bg-card transition-colors">
-                  <div className="text-3xl sm:text-4xl font-bold text-blue-600">
-                    AI
-                  </div>
-                  <div className="text-sm text-muted-foreground font-medium">
-                    Powered
-                  </div>
-                </div>
-                <div className="flex flex-col items-center space-y-2 p-4 rounded-xl border border-border bg-card/50 hover:bg-card transition-colors">
-                  <div className="text-3xl sm:text-4xl font-bold text-blue-600">
-                    24/7
-                  </div>
-                  <div className="text-sm text-muted-foreground font-medium">
-                    Available
-                  </div>
-                </div>
-              </div>
-            </div>
+        <div className="relative mt-5 space-y-4 pl-5">
+          <span aria-hidden="true" className="absolute inset-y-0 left-0 w-px bg-mark-red/40" />
+          <div>
+            <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-mark-blue">You</p>
+            <p className="mt-1.5 text-sm leading-relaxed text-ink">
+              I&apos;d put an index on the lookup column first, then check the query plan before
+              changing anything else.
+            </p>
           </div>
-        </section>
+        </div>
 
-        {/* Features Section */}
-        {/* Features Section */}
-        <section className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
-          <div className="max-w-7xl mx-auto">
-            <div className="flex justify-center">
-              <div className="w-full max-w-2xl">
-                {/* Mock Interviews Card */}
-                <Card className="group hover:shadow-2xl transition-all duration-300 border-2 hover:border-green-200 cursor-pointer bg-gradient-to-br from-white to-green-50/30 overflow-hidden relative">
-                  <div className="absolute inset-0 bg-gradient-to-br from-green-600/0 to-green-600/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <ul className="mt-6 space-y-2.5 border-t border-rule pt-5">
+          <li className="flex gap-2.5 text-sm text-ink">
+            <Check className="mt-0.5 h-4 w-4 shrink-0 text-mark-green" aria-hidden="true" />
+            Reached for measurement before optimising
+          </li>
+          <li className="flex gap-2.5 text-sm text-ink">
+            <Target className="mt-0.5 h-4 w-4 shrink-0 text-mark-ochre" aria-hidden="true" />
+            Name the trade-off an index costs on writes
+          </li>
+        </ul>
+      </div>
+    </figure>
+  );
+}
 
-                  <CardHeader className="relative pb-4">
-                    <div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-green-600 to-green-700 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform shadow-lg shadow-green-600/30">
-                      <MessageSquare className="h-7 w-7 text-white" />
-                    </div>
+export default function LandingPage() {
+  const navigate = useNavigate();
+  const { isAuthenticated, user, logout } = useLearner();
 
-                    <CardTitle className="text-2xl sm:text-3xl font-bold">
-                      Mock Interviews
-                    </CardTitle>
+  const handleLogout = () => {
+    logout();
+    navigate("/");
+  };
+
+  const primaryHref = isAuthenticated ? "/dashboard" : "/signup";
 
-                    <CardDescription className="text-base leading-relaxed pt-2">
-                      Practice with AI interviewers and get real-time feedback
-                      on your performance.
-                    </CardDescription>
-                  </CardHeader>
+  return (
+    <div className="min-h-screen bg-paper">
+      <header className="sticky top-0 z-50 border-b border-rule bg-paper/92 backdrop-blur">
+        <div className="mx-auto flex max-w-[1100px] items-center justify-between gap-4 px-4 py-4 sm:px-8">
+          <Logo size="sm" />
+          <div className="flex items-center gap-2 sm:gap-3">
+            <ThemeToggle />
+            {isAuthenticated ? (
+              <AccountMenu user={user} onLogout={handleLogout} />
+            ) : (
+              <>
+                <ButtonLink to="/login" variant="ghost" className="hidden sm:inline-flex">
+                  Log in
+                </ButtonLink>
+                <ButtonLink to="/signup">Get started</ButtonLink>
+              </>
+            )}
+          </div>
+        </div>
+      </header>
 
-                  <CardContent className="relative space-y-6">
-                    <ul className="space-y-3">
-                      <li className="flex items-center gap-3 text-sm text-muted-foreground">
-                        <CheckCircle2 className="h-4 w-4 text-green-600" />
-                        Technical & behavioral
-                      </li>
+      <main id="main" tabIndex={-1}>
+        <section className="mx-auto max-w-[1100px] px-4 pb-20 pt-16 sm:px-8 sm:pb-28 sm:pt-24">
+          <div className="grid gap-14 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)] lg:items-center lg:gap-16">
+            <div className="relative pl-6">
+              <span aria-hidden="true" className="absolute inset-y-2 left-0 w-px bg-mark-red/40" />
 
-                      <li className="flex items-center gap-3 text-sm text-muted-foreground">
-                        <CheckCircle2 className="h-4 w-4 text-green-600" />
-                        Voice interaction
-                      </li>
+              <h1 className="font-display text-[clamp(2.75rem,6.5vw,4.25rem)] font-semibold leading-[0.98] tracking-[-0.04em] text-ink">
+                Practise the interview you&apos;re actually going to
+              </h1>
 
-                      <li className="flex items-center gap-3 text-sm text-muted-foreground">
-                        <CheckCircle2 className="h-4 w-4 text-green-600" />
-                        Personalized feedback
-                      </li>
-                    </ul>
+              <p className="mt-6 max-w-[46ch] text-lg leading-relaxed text-ink-muted">
+                Pick your role and your stack. Talk through a real question out loud. Get it back
+                marked up, the way a good coach would hand it to you.
+              </p>
 
-                    <Button
-                      className="w-full bg-green-600 hover:bg-green-700 text-white h-11 font-semibold"
-                      onClick={() =>
-                        navigate(isAuthenticated ? "/interviews" : "/signup")
-                      }
-                    >
-                      <span className="flex items-center justify-center gap-2 w-full">
-                        Get Started
-                        <ArrowRight className="h-4 w-4" />
-                      </span>
-                    </Button>
-                  </CardContent>
-                </Card>
+              <div className="mt-9 flex flex-col gap-3 sm:flex-row">
+                <ButtonLink to={primaryHref} size="lg" className="group">
+                  {isAuthenticated ? "Go to dashboard" : "Start practising free"}
+                  <ArrowRight
+                    className="h-4 w-4 transition-transform group-hover:translate-x-0.5"
+                    aria-hidden="true"
+                  />
+                </ButtonLink>
+                {!isAuthenticated && (
+                  <ButtonLink to="/login" size="lg" variant="outline">
+                    I already have an account
+                  </ButtonLink>
+                )}
               </div>
             </div>
+
+            <Specimen />
           </div>
         </section>
 
-        {/* Additional Features */}
-        <section className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8 bg-muted/30">
-          <div className="max-w-7xl mx-auto">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
-              <div className="flex flex-col items-center text-center space-y-4 p-6 rounded-2xl hover:bg-white transition-colors">
-                <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-purple-600 to-purple-700 flex items-center justify-center shadow-lg shadow-purple-600/30">
-                  <Sparkles className="h-6 w-6 text-white" />
-                </div>
-                <h3 className="text-xl font-bold">AI-Powered Learning</h3>
-                <p className="text-sm text-muted-foreground leading-relaxed">
-                  Adaptive content that matches your skill level and learning
-                  pace.
-                </p>
-              </div>
-
-              <div className="flex flex-col items-center text-center space-y-4 p-6 rounded-2xl hover:bg-white transition-colors">
-                <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-orange-600 to-orange-700 flex items-center justify-center shadow-lg shadow-orange-600/30">
-                  <BarChart3 className="h-6 w-6 text-white" />
-                </div>
-                <h3 className="text-xl font-bold">Track Progress</h3>
-                <p className="text-sm text-muted-foreground leading-relaxed">
-                  Detailed analytics to visualize your strengths and areas to
-                  improve.
-                </p>
-              </div>
+        <section className="mx-auto max-w-[1100px] px-4 pb-14 sm:px-8 sm:pb-16">
+          <h2 className="mb-10 font-mono text-[11px] uppercase tracking-[0.14em] text-ink-muted">
+            How it works
+          </h2>
 
-              <div className="flex flex-col items-center text-center space-y-4 p-6 rounded-2xl hover:bg-white transition-colors">
-                <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-pink-600 to-pink-700 flex items-center justify-center shadow-lg shadow-pink-600/30">
-                  <Clock className="h-6 w-6 text-white" />
+          <ol className="max-w-[760px]">
+            {STEPS.map(({ title, body }, index) => (
+              <li key={title} className="flex gap-6 border-t border-rule py-7 sm:gap-8">
+                <span className="tabular shrink-0 pt-1 font-mono text-[11px] text-ink-faint">
+                  {String(index + 1).padStart(2, "0")}
+                </span>
+                <div>
+                  <h3 className="font-display text-xl font-semibold tracking-[-0.02em] text-ink">
+                    {title}
+                  </h3>
+                  <p className="mt-2 max-w-[58ch] leading-relaxed text-ink-muted">{body}</p>
                 </div>
-                <h3 className="text-xl font-bold">Learn Anytime</h3>
-                <p className="text-sm text-muted-foreground leading-relaxed">
-                  Practice 24/7 at your own pace with instant AI feedback.
-                </p>
-              </div>
-            </div>
-          </div>
+              </li>
+            ))}
+          </ol>
         </section>
 
-        {/* CTA Section */}
-        <section className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
-          <div className="max-w-4xl mx-auto">
-            <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-blue-600 to-blue-700 p-8 sm:p-12 shadow-2xl">
-              <div className="absolute inset-0 bg-grid-white/10 [mask-image:linear-gradient(0deg,transparent,black)]" />
-              <div className="relative flex flex-col items-center text-center space-y-6">
-                <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white">
-                  Ready to ace your next interview?
-                </h2>
-                <p className="text-lg sm:text-xl text-blue-100 max-w-2xl">
-                  Start practicing today and improve your interview skills.
-                </p>
-                <Button
-                  size="lg"
-                  onClick={() =>
-                    navigate(isAuthenticated ? "/dashboard" : "/signup")
-                  }
-                  className="text-blue-600 hover:bg-blue-50 h-12 px-8 text-base font-semibold shadow-xl hover:shadow-2xl transition-all group/btn"
-                >
-                  <span className="flex items-center justify-center gap-2">
-                    Start for Free
-                    <ArrowRight className="h-5 w-5 group-hover/btn:translate-x-1 transition-transform" />
-                  </span>
-                </Button>
-              </div>
+        <section className="mx-auto max-w-[1100px] px-4 pb-24 sm:px-8 sm:pb-28">
+          <div className="relative max-w-[760px] border-t border-rule pt-12 pl-6">
+            <span aria-hidden="true" className="absolute bottom-0 left-0 top-10 w-px bg-mark-red/40" />
+            <h2 className="max-w-[20ch] font-display text-[clamp(2rem,4.5vw,2.75rem)] font-semibold leading-[1.05] tracking-[-0.035em] text-ink">
+              Your next interview shouldn&apos;t be the first time you say it out loud
+            </h2>
+            <div className="mt-8">
+              <ButtonLink to={primaryHref} size="lg" className="group">
+                {isAuthenticated ? "Go to dashboard" : "Start practising free"}
+                <ArrowRight
+                  className="h-4 w-4 transition-transform group-hover:translate-x-0.5"
+                  aria-hidden="true"
+                />
+              </ButtonLink>
             </div>
           </div>
         </section>
+      </main>
 
-        {/* Footer */}
-        <footer className="border-t border-border bg-muted/30 px-4 sm:px-6 lg:px-8 py-12">
-          <div className="max-w-7xl mx-auto">
-            <div className="flex flex-col items-center justify-center space-y-4">
-              <Link to="/" className="flex items-center gap-2">
-                <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-600 to-blue-700 flex items-center justify-center">
-                  <Sparkles className="h-5 w-5 text-white" />
-                </div>
-                <span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
-                  EduNerve AI
-                </span>
-              </Link>
-              <p className="text-sm text-muted-foreground">
-                &copy; {new Date().getFullYear()} EduNerve AI. All rights
-                reserved.
-              </p>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </>
+      <footer className="border-t border-rule">
+        <div className="mx-auto flex max-w-[1100px] flex-wrap items-center justify-between gap-4 px-4 py-8 sm:px-8">
+          <Logo size="sm" />
+          <p className="font-mono text-[11px] text-ink-faint">
+            &copy; {new Date().getFullYear()} EduNerve AI
+          </p>
+        </div>
+      </footer>
+    </div>
   );
 }
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index 96643aa..31191de 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -1,154 +1,74 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useLearner } from "../context/LearnerContext";
+import AuthLayout from "../components/layout/AuthLayout";
 import Input from "../components/common/Input";
+import PasswordInput from "../components/common/PasswordInput";
+import FormError from "../components/common/FormError";
 import Button from "../components/common/Button";
-import { Sparkles, ArrowLeft, Mail, Lock } from "lucide-react";
 
 export default function LoginPage() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const [form, setForm] = useState({ email: "", password: "" });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const { login, isAuthenticated } = useLearner();
   const navigate = useNavigate();
 
-  // Redirect if already authenticated
   useEffect(() => {
-    if (isAuthenticated) {
-      navigate("/dashboard", { replace: true });
-    }
+    if (isAuthenticated) navigate("/dashboard", { replace: true });
   }, [isAuthenticated, navigate]);
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleSubmit = async (event) => {
+    event.preventDefault();
     setError("");
-    setLoading(true);
 
-    if (!email || !password) {
-      setError("Please fill in all fields");
-      setLoading(false);
+    if (!form.email || !form.password) {
+      setError("Enter your email and password to sign in.");
       return;
     }
 
-    const result = await login(email, password);
+    setLoading(true);
+    const result = await login(form.email, form.password);
     setLoading(false);
 
-    if (result.success) {
-      navigate("/dashboard");
-    } else {
-      setError(result.error || "Login failed. Please try again.");
-    }
+    if (result.success) navigate("/dashboard");
+    else setError(result.error || "We couldn't sign you in. Check your details and try again.");
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 flex items-center justify-center px-4 py-12">
-      {/* Back to Home Button */}
-      <Link
-        to="/"
-        className="fixed top-6 left-6 flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors group"
-      >
-        <ArrowLeft className="h-4 w-4 group-hover:-translate-x-1 transition-transform" />
-        Back to Home
-      </Link>
-
-      <div className="w-full max-w-md">
-        {/* Logo & Header */}
-        <div className="flex flex-col items-center text-center mb-8 space-y-4">
-          <Link to="/" className="flex items-center gap-2 group">
-            <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-blue-600 to-blue-700 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-105 transition-transform">
-              <Sparkles className="h-5 w-5 text-white" />
-            </div>
-            <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
-              EduNerve AI
-            </span>
+    <AuthLayout
+      title="Welcome back"
+      subtitle="Sign in to pick up where you left off"
+      footer={
+        <>
+          Don&apos;t have an account?{" "}
+          <Link to="/signup" className="text-ink underline underline-offset-4 hover:text-mark-red">
+            Sign up
           </Link>
-
-          <div className="space-y-2">
-            <h1 className="text-3xl md:text-4xl font-bold text-foreground">
-              Welcome Back
-            </h1>
-            <p className="text-muted-foreground">
-              Sign in to continue your learning journey
-            </p>
-          </div>
-        </div>
-
-        {/* Form Card */}
-        <div className="bg-white border border-border rounded-2xl p-8 shadow-xl">
-          <form onSubmit={handleSubmit} className="space-y-5">
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground flex items-center gap-2">
-                <Mail className="h-4 w-4 text-muted-foreground" />
-                Email Address
-              </label>
-              <Input
-                type="email"
-                placeholder="your@email.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="h-11"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-foreground flex items-center gap-2">
-                  <Lock className="h-4 w-4 text-muted-foreground" />
-                  Password
-                </label>
-                <a
-                  href="#"
-                  className="text-xs text-blue-600 hover:text-blue-700 font-medium hover:underline"
-                >
-                  Forgot password?
-                </a>
-              </div>
-              <Input
-                type="password"
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="h-11"
-              />
-            </div>
-
-            {error && (
-              <div className="bg-red-50 border border-red-200 rounded-lg p-3">
-                <p className="text-sm text-red-600">{error}</p>
-              </div>
-            )}
-
-            <Button
-              type="submit"
-              className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-semibold shadow-md hover:shadow-lg transition-all"
-              disabled={loading}
-            >
-              {loading ? "Signing In..." : "Sign In"}
-            </Button>
-          </form>
-
-          <div className="mt-6 text-center">
-            <p className="text-sm text-muted-foreground">
-              Don't have an account?{" "}
-              <Link
-                to="/signup"
-                className="text-blue-600 hover:text-blue-700 font-semibold hover:underline transition-colors"
-              >
-                Sign up
-              </Link>
-            </p>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <p className="text-center text-xs text-muted-foreground mt-8">
-          Protected by reCAPTCHA and subject to the{" "}
-          <a href="#" className="underline hover:text-foreground">
-            Privacy Policy
-          </a>
-        </p>
-      </div>
-    </div>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+        <Input
+          label="Email address"
+          type="email"
+          autoComplete="email"
+          placeholder="you@example.com"
+          value={form.email}
+          onChange={(e) => setForm({ ...form, email: e.target.value })}
+        />
+        <PasswordInput
+          label="Password"
+          autoComplete="current-password"
+          placeholder="Your password"
+          value={form.password}
+          onChange={(e) => setForm({ ...form, password: e.target.value })}
+        />
+        <FormError message={error} />
+        <Button type="submit" size="lg" loading={loading} className="w-full">
+          {loading ? "Signing in..." : "Sign in"}
+        </Button>
+      </form>
+    </AuthLayout>
   );
 }
diff --git a/src/pages/NotFoundPage.jsx b/src/pages/NotFoundPage.jsx
index 089f91e..d7461d3 100644
--- a/src/pages/NotFoundPage.jsx
+++ b/src/pages/NotFoundPage.jsx
@@ -1,17 +1,31 @@
-import { Link } from "react-router-dom"
-import Button from "../components/common/Button"
+import Logo from "../components/brand/Logo";
+import ButtonLink from "../components/common/ButtonLink";
 
 export default function NotFoundPage() {
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center px-4">
-      <div className="text-center">
-        <div className="text-6xl mb-4">🔍</div>
-        <h1 className="text-4xl font-bold text-foreground mb-2">404</h1>
-        <p className="text-xl text-muted-foreground mb-8">Page not found</p>
-        <Link to="/">
-          <Button>Go to Home</Button>
-        </Link>
-      </div>
+    <div className="flex min-h-screen flex-col bg-paper">
+      <header className="flex h-[72px] shrink-0 items-center px-4 sm:px-8">
+        <Logo size="sm" />
+      </header>
+
+      <main id="main" tabIndex={-1} className="flex flex-1 items-center px-4 sm:px-8">
+        <div className="relative mx-auto w-full max-w-[560px] pl-6">
+          <span aria-hidden="true" className="absolute inset-y-1 left-0 w-px bg-mark-red/40" />
+          <h1 className="font-display text-[clamp(2.5rem,7vw,3.5rem)] font-semibold leading-[1.02] tracking-[-0.035em] text-ink">
+            We couldn&apos;t find that page
+          </h1>
+          <p className="mt-4 max-w-[48ch] text-ink-muted">
+            The link may be out of date, or the page may have moved. Your interviews are all still
+            in your history.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <ButtonLink to="/dashboard">Go to dashboard</ButtonLink>
+            <ButtonLink to="/" variant="outline">
+              Back to home
+            </ButtonLink>
+          </div>
+        </div>
+      </main>
     </div>
-  )
+  );
 }
diff --git a/src/pages/ReportPage.jsx b/src/pages/ReportPage.jsx
new file mode 100644
index 0000000..10c90bb
--- /dev/null
+++ b/src/pages/ReportPage.jsx
@@ -0,0 +1,260 @@
+import { Link, useParams } from "react-router-dom";
+import { ArrowLeft, Check, Lightbulb, Target } from "lucide-react";
+import { useAsync } from "../hooks/useAsync";
+import { interviewAPI } from "../lib/api";
+import {
+  formatDateTime,
+  formatDuration,
+  formatScore,
+  hasScore,
+  interviewRef,
+  scoreLabel,
+  scoreTone,
+} from "../lib/format";
+import { PageError, PageLoading } from "../components/common/PageState";
+import ScoreBar from "../components/common/ScoreBar";
+import StatusBadge from "../components/common/StatusBadge";
+
+const MARKS = {
+  green: { rule: "bg-mark-green", icon: "text-mark-green" },
+  ochre: { rule: "bg-mark-ochre", icon: "text-mark-ochre" },
+  blue: { rule: "bg-mark-blue", icon: "text-mark-blue" },
+};
+
+/* One mark in the margin: a rule, a word, and the lines it carries. */
+function Annotation({ icon: Icon, mark, title, items }) {
+  if (!items.length) return null;
+  const tone = MARKS[mark];
+
+  return (
+    <section className="relative pl-4">
+      <span aria-hidden="true" className={`absolute inset-y-0.5 left-0 w-px ${tone.rule}`} />
+      <h3 className="flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.12em] text-ink-muted">
+        <Icon className={`h-3.5 w-3.5 ${tone.icon}`} aria-hidden="true" />
+        {title}
+      </h3>
+      <ul className="mt-2.5 space-y-2">
+        {items.map((item, index) => (
+          <li key={index} className="text-sm leading-relaxed text-ink">
+            {item}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function Notice({ tone, children }) {
+  const tones = {
+    ochre: "border-ochre-rule bg-ochre-wash text-ochre-ink",
+    blue: "border-blue-rule bg-blue-wash text-blue-ink",
+    plain: "border-rule-strong bg-sunk text-ink-muted",
+  };
+  return (
+    <div role="status" className={`rounded-md border px-4 py-3 text-sm ${tones[tone]}`}>
+      {children}
+    </div>
+  );
+}
+
+export default function ReportPage() {
+  const { interviewId } = useParams();
+  const { data, error, loading, reload } = useAsync(
+    () => interviewAPI.get(interviewId),
+    [interviewId],
+  );
+
+  if (loading) return <PageLoading label="Loading report" />;
+  if (error) {
+    return (
+      <PageError
+        message={error.code === "NOT_FOUND" ? "We couldn't find that interview." : error.message}
+        onRetry={error.code === "NOT_FOUND" ? undefined : reload}
+      />
+    );
+  }
+
+  const { interview } = data;
+  const analysis = interview.aiAnalysis || {};
+  const transcript = Array.isArray(interview.transcript) ? interview.transcript : [];
+  const scored = hasScore(interview.overallScore);
+  const feedbackUnavailable = interview.status === "completed" && !scored;
+
+  const strengths = interview.strengths || [];
+  const weakAreas = interview.weakAreas || [];
+  const notes = Array.isArray(analysis.notes) ? analysis.notes : [];
+  const hasMarks = strengths.length > 0 || weakAreas.length > 0 || notes.length > 0;
+
+  return (
+    <div className="mx-auto w-full max-w-[920px]">
+      <Link
+        to="/history"
+        className="inline-flex items-center gap-1.5 text-sm text-ink-muted transition-colors hover:text-ink"
+      >
+        <ArrowLeft className="h-4 w-4" aria-hidden="true" /> All interviews
+      </Link>
+
+      <header className="mt-6 flex flex-wrap items-end justify-between gap-6 border-b border-rule pb-8">
+        <div className="min-w-0">
+          <p className="tabular font-mono text-[11px] tracking-[0.1em] text-ink-faint">
+            {interviewRef(interview.id)}
+          </p>
+          {/* Demoted so the figure is unambiguously the headline. */}
+          <h1 className="mt-2 font-display text-xl font-semibold tracking-[-0.02em] text-ink">{interview.role}</h1>
+          <p className="mt-1.5 flex flex-wrap items-center gap-x-2.5 gap-y-1.5 text-sm text-ink-muted">
+            <span className="capitalize">{interview.interviewType}</span>
+            <span aria-hidden="true" className="text-ink-faint">·</span>
+            <span>{formatDateTime(interview.completedAt || interview.startedAt)}</span>
+            {interview.duration != null && (
+              <>
+                <span aria-hidden="true" className="text-ink-faint">·</span>
+                {/* Labelled: beside a timestamp, a bare "10:12" reads as another clock time. */}
+                <span className="tabular font-mono text-xs">
+                  {formatDuration(interview.duration)} long
+                </span>
+              </>
+            )}
+            <StatusBadge status={interview.status} />
+          </p>
+          {interview.technologies.length > 0 && (
+            <div className="mt-4 flex flex-wrap gap-2">
+              {interview.technologies.map((tech) => (
+                <span
+                  key={tech}
+                  className="rounded-full border border-rule-strong px-2.5 py-0.5 text-xs text-ink-muted"
+                >
+                  {tech}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {scored && (
+          <div className="shrink-0">
+            <p
+              className={`tabular font-display text-[clamp(4rem,10vw,5.5rem)] font-semibold leading-[0.85] tracking-[-0.045em] ${scoreTone(
+                interview.overallScore,
+              )}`}
+            >
+              {formatScore(interview.overallScore).split("/")[0]}
+            </p>
+            <p className="mt-1.5 font-mono text-[11px] uppercase tracking-[0.1em] text-ink-muted">
+              {scoreLabel(interview.overallScore)} · out of 10
+            </p>
+            <p className="sr-only">{formatScore(interview.overallScore)}</p>
+          </div>
+        )}
+      </header>
+
+      <div className="mt-8 space-y-10">
+        {feedbackUnavailable && (
+          <Notice tone="ochre">
+            AI feedback wasn&apos;t available for this interview, so there are no scores. Your
+            transcript was saved below.
+          </Notice>
+        )}
+        {interview.status === "abandoned" && (
+          <Notice tone="plain">
+            This interview ended before any answers were recorded, so it wasn&apos;t scored and the
+            tokens were refunded.
+          </Notice>
+        )}
+        {interview.status === "in_progress" && (
+          <Notice tone="blue">
+            This interview was never submitted, so there&apos;s no feedback yet.
+          </Notice>
+        )}
+
+        {scored && (
+          <section>
+            <h2 className="mb-5 font-mono text-[11px] uppercase tracking-[0.14em] text-ink-muted">
+              Scores
+            </h2>
+            <div className="grid gap-5 sm:grid-cols-3">
+              <ScoreBar label="Technical" value={interview.technicalScore} />
+              <ScoreBar label="Communication" value={interview.communicationScore} />
+              <ScoreBar label="Problem solving" value={interview.problemSolvingScore} />
+            </div>
+          </section>
+        )}
+
+        {interview.feedback && (
+          <section>
+            <h2 className="mb-3 font-mono text-[11px] uppercase tracking-[0.14em] text-ink-muted">
+              Feedback
+            </h2>
+            {analysis.summary && <p className="mb-3 max-w-[62ch] text-ink">{analysis.summary}</p>}
+            <p className="max-w-[62ch] whitespace-pre-line leading-relaxed text-ink-muted">
+              {interview.feedback}
+            </p>
+          </section>
+        )}
+
+        {/*
+         * The marked-up sheet: the transcript is the work, and the marks sit in
+         * the margin beside it rather than stacked above it as a verdict.
+         *
+         * The marks are session-level because that is all the backend returns —
+         * strengths, weak areas and notes arrive as flat arrays with no link to
+         * a turn. Pinning each one to a specific answer would be inventing an
+         * attribution the data does not carry, so the margin heading says what
+         * they cover.
+         */}
+        <section>
+          <h2 className="mb-5 flex flex-wrap items-baseline justify-between gap-3 font-mono text-[11px] uppercase tracking-[0.14em] text-ink-muted">
+            Marked up
+            <span className="tabular text-ink-faint">{transcript.length} turns</span>
+          </h2>
+
+          {transcript.length === 0 && !hasMarks ? (
+            <p className="border-t border-rule py-5 text-sm text-ink-muted">
+              No transcript was recorded.
+            </p>
+          ) : (
+            <div className="grid gap-8 border-t border-rule pt-6 lg:grid-cols-[minmax(0,260px)_minmax(0,1fr)] lg:gap-10">
+              {hasMarks && (
+                <aside className="space-y-7 lg:sticky lg:top-24 lg:self-start">
+                  <p className="text-xs leading-relaxed text-ink-faint">
+                    Marks for the session as a whole, read against the conversation beside them.
+                  </p>
+                  <Annotation icon={Check} mark="green" title="What worked" items={strengths} />
+                  <Annotation icon={Target} mark="ochre" title="Work on this" items={weakAreas} />
+                  <Annotation icon={Lightbulb} mark="blue" title="Next time" items={notes} />
+                </aside>
+              )}
+
+              <div className="relative space-y-5 pl-6">
+                <span aria-hidden="true" className="absolute inset-y-0 left-0 w-px bg-mark-red/35" />
+                {transcript.length === 0 && (
+                  <p className="text-sm text-ink-muted">No transcript was recorded.</p>
+                )}
+                {transcript.map((turn, index) => {
+                  const you = turn.speaker === "You";
+                  return (
+                    <div key={index}>
+                      <p
+                        className={`font-mono text-[10px] uppercase tracking-[0.14em] ${
+                          you ? "text-mark-blue" : "text-ink-faint"
+                        }`}
+                      >
+                        {turn.speaker}
+                      </p>
+                      <p
+                        className={`mt-1.5 max-w-[62ch] leading-relaxed ${
+                          you ? "text-ink" : "text-ink-muted"
+                        }`}
+                      >
+                        {turn.text}
+                      </p>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/SettingsPage.jsx b/src/pages/SettingsPage.jsx
new file mode 100644
index 0000000..b30274b
--- /dev/null
+++ b/src/pages/SettingsPage.jsx
@@ -0,0 +1,394 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Plus, X } from "lucide-react";
+import { useLearner } from "../context/LearnerContext";
+import { useToast } from "../components/common/Toast";
+import { useAsync } from "../hooks/useAsync";
+import { authAPI, interviewAPI, tokenAPI } from "../lib/api";
+import { formatDateTime } from "../lib/format";
+import Input from "../components/common/Input";
+import PasswordInput from "../components/common/PasswordInput";
+import Select from "../components/common/Select";
+import Button from "../components/common/Button";
+import Dialog from "../components/common/Dialog";
+
+const EXPERIENCE_LEVELS = ["Student / Fresher", "0-1 years", "1-3 years", "3-5 years", "5+ years"];
+const MAX_SKILLS = 20;
+
+const REASON_LABELS = {
+  SIGNUP_GRANT: "Welcome bonus",
+  INTERVIEW_START: "Interview",
+  INTERVIEW_REFUND: "Refund",
+  ADMIN_ADJUSTMENT: "Adjustment",
+};
+
+// Keeps a value that predates the fixed list (e.g. "2 years") selectable.
+const withCurrent = (list, current) => (current && !list.includes(current) ? [current, ...list] : list);
+
+/* Each concern is its own ruled section rather than a stack of equal cards. */
+function Section({ title, description, children }) {
+  return (
+    <section className="border-t border-rule pt-8">
+      <div className="mb-6">
+        <h2 className="font-display text-base font-semibold tracking-[-0.015em] text-ink">{title}</h2>
+        {description && <p className="mt-1.5 max-w-[56ch] text-sm text-ink-muted">{description}</p>}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function ProfileForm({ user, roles }) {
+  const { updateProfile } = useLearner();
+  const toast = useToast();
+  const [form, setForm] = useState({
+    name: user.name,
+    role: user.role || "",
+    experience: user.experience || "",
+    skills: user.skills,
+  });
+  const [skillInput, setSkillInput] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  const suggestions = (roles[form.role] || []).filter((skill) => !form.skills.includes(skill));
+
+  const addSkill = (raw) => {
+    const skill = raw.trim().slice(0, 40);
+    if (!skill || form.skills.some((s) => s.toLowerCase() === skill.toLowerCase())) return;
+    if (form.skills.length >= MAX_SKILLS) {
+      toast.error(`You can track up to ${MAX_SKILLS} skills.`);
+      return;
+    }
+    setForm((f) => ({ ...f, skills: [...f.skills, skill] }));
+    setSkillInput("");
+  };
+
+  const submit = async (event) => {
+    event.preventDefault();
+    setSaving(true);
+    try {
+      await updateProfile({
+        name: form.name.trim(),
+        role: form.role,
+        experience: form.experience,
+        skills: form.skills,
+      });
+      toast.success("Profile saved");
+    } catch (error) {
+      toast.error(error.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Section title="Profile" description="Used to pre-fill your interviews, so the questions match the job you want.">
+      <form onSubmit={submit} className="max-w-[520px] space-y-5">
+        <Input
+          label="Name"
+          value={form.name}
+          maxLength={80}
+          required
+          onChange={(e) => setForm({ ...form, name: e.target.value })}
+        />
+        <Input label="Email" value={user.email} disabled readOnly />
+
+        <Select
+          label="Target role"
+          id="profile-role"
+          value={form.role}
+          onChange={(e) => setForm({ ...form, role: e.target.value })}
+        >
+          <option value="">Not set</option>
+          {withCurrent(Object.keys(roles), user.role).map((role) => (
+            <option key={role} value={role}>
+              {role}
+            </option>
+          ))}
+        </Select>
+
+        <Select
+          label="Experience"
+          id="profile-exp"
+          value={form.experience}
+          onChange={(e) => setForm({ ...form, experience: e.target.value })}
+        >
+          <option value="">Not set</option>
+          {withCurrent(EXPERIENCE_LEVELS, user.experience).map((level) => (
+            <option key={level} value={level}>
+              {level}
+            </option>
+          ))}
+        </Select>
+
+        <div>
+          <div className="flex gap-2">
+            <Input
+              id="skill-input"
+              label="Skills"
+              value={skillInput}
+              placeholder="Add a skill and press Enter"
+              onChange={(e) => setSkillInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  addSkill(skillInput);
+                }
+              }}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="mt-[26px] h-11 w-11"
+              onClick={() => addSkill(skillInput)}
+              aria-label="Add skill"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {form.skills.length > 0 && (
+            <div className="mt-3 flex flex-wrap gap-2">
+              {form.skills.map((skill) => (
+                <span
+                  key={skill}
+                  className="inline-flex items-center gap-1.5 rounded-full border border-rule-strong px-3 py-1 text-sm text-ink"
+                >
+                  {skill}
+                  <button
+                    type="button"
+                    aria-label={`Remove ${skill}`}
+                    className="text-ink-faint transition-colors hover:text-mark-red"
+                    onClick={() =>
+                      setForm((f) => ({ ...f, skills: f.skills.filter((s) => s !== skill) }))
+                    }
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </button>
+                </span>
+              ))}
+            </div>
+          )}
+
+          {suggestions.length > 0 && (
+            <div className="mt-3 flex flex-wrap items-center gap-2">
+              <span className="font-mono text-[11px] uppercase tracking-[0.1em] text-ink-faint">
+                Suggested
+              </span>
+              {suggestions.slice(0, 6).map((skill) => (
+                <button
+                  key={skill}
+                  type="button"
+                  onClick={() => addSkill(skill)}
+                  className="rounded-full border border-dashed border-rule-strong px-2.5 py-1 text-xs text-ink-muted transition-colors hover:border-ink-faint hover:text-ink"
+                >
+                  + {skill}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <Button type="submit" loading={saving} disabled={!form.name.trim()}>
+          Save changes
+        </Button>
+      </form>
+    </Section>
+  );
+}
+
+function PasswordForm() {
+  const toast = useToast();
+  const [form, setForm] = useState({ current: "", next: "", confirm: "" });
+  const [saving, setSaving] = useState(false);
+  const mismatch = Boolean(form.confirm) && form.next !== form.confirm;
+
+  const submit = async (event) => {
+    event.preventDefault();
+    setSaving(true);
+    try {
+      await authAPI.changePassword({ currentPassword: form.current, newPassword: form.next });
+      setForm({ current: "", next: "", confirm: "" });
+      toast.success("Password updated");
+    } catch (error) {
+      toast.error(error.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Section title="Password">
+      <form onSubmit={submit} className="max-w-[520px] space-y-5">
+        <PasswordInput
+          label="Current password"
+          autoComplete="current-password"
+          required
+          value={form.current}
+          onChange={(e) => setForm({ ...form, current: e.target.value })}
+        />
+        <PasswordInput
+          label="New password"
+          autoComplete="new-password"
+          minLength={8}
+          required
+          hint="At least 8 characters."
+          value={form.next}
+          onChange={(e) => setForm({ ...form, next: e.target.value })}
+        />
+        <PasswordInput
+          label="Confirm new password"
+          autoComplete="new-password"
+          required
+          error={mismatch ? "Passwords don't match" : undefined}
+          value={form.confirm}
+          onChange={(e) => setForm({ ...form, confirm: e.target.value })}
+        />
+        <Button
+          type="submit"
+          loading={saving}
+          disabled={mismatch || form.next.length < 8 || !form.current}
+        >
+          Update password
+        </Button>
+      </form>
+    </Section>
+  );
+}
+
+function TokenLedger({ tokens }) {
+  const { data, loading, error } = useAsync(() => tokenAPI.getTransactions(20), [tokens]);
+
+  return (
+    <Section
+      title="Tokens"
+      description="An interview costs 10 tokens, refunded automatically if you end one before answering."
+    >
+      <p className="mb-6 flex items-baseline gap-3">
+        <span className="tabular font-display text-[2.5rem] font-semibold leading-none tracking-[-0.03em] text-ink">
+          {tokens ?? "--"}
+        </span>
+        <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-ink-muted">
+          remaining
+        </span>
+      </p>
+
+      {/* Stated plainly rather than pointing somewhere that cannot help. */}
+      <p className="mb-6 max-w-[56ch] rounded-md border border-blue-rule bg-blue-wash px-4 py-3 text-sm text-blue-ink">
+        There&apos;s no way to buy more tokens yet. When your balance runs out, that&apos;s the end
+        of practice for now — we&apos;ll add top-ups before it becomes a problem.
+      </p>
+
+      {loading && <p className="text-sm text-ink-muted">Loading history</p>}
+      {error && <p className="text-sm text-mark-red">{error.message}</p>}
+      {data && data.transactions.length === 0 && (
+        <p className="text-sm text-ink-muted">No activity yet.</p>
+      )}
+      {data && data.transactions.length > 0 && (
+        <ul className="max-w-[520px]">
+          {data.transactions.map((t) => (
+            <li key={t.id} className="flex items-baseline justify-between gap-4 border-t border-rule py-3">
+              <span className="text-sm text-ink">{REASON_LABELS[t.reason] || t.reason}</span>
+              <span className="flex items-baseline gap-4">
+                <span className="font-mono text-[11px] text-ink-faint">
+                  {formatDateTime(t.createdAt)}
+                </span>
+                <span
+                  className={`tabular w-12 text-right font-mono text-sm ${
+                    t.delta > 0 ? "text-mark-green" : "text-ink-muted"
+                  }`}
+                >
+                  {t.delta > 0 ? "+" : ""}
+                  {t.delta}
+                </span>
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Section>
+  );
+}
+
+function DangerZone() {
+  const { logout } = useLearner();
+  const toast = useToast();
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const [password, setPassword] = useState("");
+  const [deleting, setDeleting] = useState(false);
+
+  const remove = async (event) => {
+    event.preventDefault();
+    setDeleting(true);
+    try {
+      await authAPI.deleteAccount(password);
+      logout();
+      navigate("/", { replace: true });
+    } catch (error) {
+      toast.error(error.message);
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <Section
+      title="Delete account"
+      description="Permanently removes your profile, interviews and token history. This can't be undone."
+    >
+      <Button variant="dangerOutline" onClick={() => setOpen(true)}>
+        Delete my account
+      </Button>
+
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Delete your account?"
+        description="Every interview, transcript and token record goes with it. There is no undo."
+      >
+        <form onSubmit={remove} className="space-y-4">
+          <PasswordInput
+            label="Confirm with your password"
+            autoComplete="current-password"
+            required
+            data-autofocus
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <div className="flex flex-wrap justify-end gap-2">
+            <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="danger" loading={deleting} disabled={!password}>
+              Permanently delete
+            </Button>
+          </div>
+        </form>
+      </Dialog>
+    </Section>
+  );
+}
+
+export default function SettingsPage() {
+  const { user, tokens } = useLearner();
+  const options = useAsync(() => interviewAPI.getOptions(), []);
+
+  return (
+    <div className="mx-auto w-full max-w-[920px]">
+      <h1 className="mb-10 font-display text-xl font-semibold tracking-[-0.02em] text-ink">Settings</h1>
+
+      <div className="space-y-12">
+        {/* Keyed on the loaded options so initial state is built once they exist. */}
+        <ProfileForm
+          key={options.data ? "ready" : "loading"}
+          user={user}
+          roles={options.data?.roles || {}}
+        />
+        <TokenLedger tokens={tokens} />
+        <PasswordForm />
+        <DangerZone />
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/SignUpPage.jsx b/src/pages/SignUpPage.jsx
index 7415570..a4d7782 100644
--- a/src/pages/SignUpPage.jsx
+++ b/src/pages/SignUpPage.jsx
@@ -1,174 +1,98 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useLearner } from "../context/LearnerContext";
+import AuthLayout from "../components/layout/AuthLayout";
 import Input from "../components/common/Input";
+import PasswordInput from "../components/common/PasswordInput";
+import FormError from "../components/common/FormError";
 import Button from "../components/common/Button";
-import { Sparkles, ArrowLeft, Mail, Lock, User } from "lucide-react";
+
+const MIN_PASSWORD = 8;
 
 export default function SignUpPage() {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const [form, setForm] = useState({ name: "", email: "", password: "" });
+  const [touchedPassword, setTouchedPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const { signup, isAuthenticated } = useLearner();
   const navigate = useNavigate();
 
-  // Redirect if already authenticated
   useEffect(() => {
-    if (isAuthenticated) {
-      navigate("/dashboard", { replace: true });
-    }
+    if (isAuthenticated) navigate("/dashboard", { replace: true });
   }, [isAuthenticated, navigate]);
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  // Shown as the user types rather than only after a failed submit.
+  const tooShort = touchedPassword && form.password.length > 0 && form.password.length < MIN_PASSWORD;
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
     setError("");
-    setLoading(true);
 
-    if (!name || !email || !password) {
-      setError("Please fill in all fields");
-      setLoading(false);
+    if (!form.name || !form.email || !form.password) {
+      setError("Fill in every field to create your account.");
       return;
     }
-
-    if (password.length < 6) {
-      setError("Password must be at least 6 characters");
-      setLoading(false);
+    if (form.password.length < MIN_PASSWORD) {
+      setError(`Your password needs at least ${MIN_PASSWORD} characters.`);
       return;
     }
 
-    const result = await signup(name, email, password, "", "", []);
+    setLoading(true);
+    const result = await signup(form);
     setLoading(false);
 
-    if (result.success) {
-      navigate("/dashboard");
-    } else {
-      setError(result.error || "Sign up failed. Please try again.");
-    }
+    if (result.success) navigate("/dashboard");
+    else setError(result.error || "We couldn't create your account. Please try again.");
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 flex items-center justify-center px-4 py-12">
-      {/* Back to Home Button */}
-      <Link
-        to="/"
-        className="fixed top-6 left-6 flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors group"
-      >
-        <ArrowLeft className="h-4 w-4 group-hover:-translate-x-1 transition-transform" />
-        Back to Home
-      </Link>
-
-      <div className="w-full max-w-md">
-        {/* Logo & Header */}
-        <div className="flex flex-col items-center text-center mb-8 space-y-4">
-          <Link to="/" className="flex items-center gap-2 group">
-            <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-blue-600 to-blue-700 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-105 transition-transform">
-              <Sparkles className="h-5 w-5 text-white" />
-            </div>
-            <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
-              EduNerve AI
-            </span>
+    <AuthLayout
+      title="Create your account"
+      subtitle="Your first interviews are on us"
+      footer={
+        <>
+          Already have an account?{" "}
+          <Link to="/login" className="text-ink underline underline-offset-4 hover:text-mark-red">
+            Sign in
           </Link>
-
-          <div className="space-y-2">
-            <h1 className="text-3xl md:text-4xl font-bold text-foreground">
-              Create Your Account
-            </h1>
-            <p className="text-muted-foreground">
-              Start your learning journey today
-            </p>
-          </div>
-        </div>
-
-        {/* Form Card */}
-        <div className="bg-white border border-border rounded-2xl p-8 shadow-xl">
-          <form onSubmit={handleSubmit} className="space-y-5">
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground flex items-center gap-2">
-                <User className="h-4 w-4 text-muted-foreground" />
-                Full Name
-              </label>
-              <Input
-                type="text"
-                placeholder="John Doe"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                className="h-11"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground flex items-center gap-2">
-                <Mail className="h-4 w-4 text-muted-foreground" />
-                Email Address
-              </label>
-              <Input
-                type="email"
-                placeholder="your@email.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="h-11"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground flex items-center gap-2">
-                <Lock className="h-4 w-4 text-muted-foreground" />
-                Password
-              </label>
-              <Input
-                type="password"
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="h-11"
-              />
-              <p className="text-xs text-muted-foreground">
-                Must be at least 6 characters
-              </p>
-            </div>
-
-            {error && (
-              <div className="bg-red-50 border border-red-200 rounded-lg p-3">
-                <p className="text-sm text-red-600">{error}</p>
-              </div>
-            )}
-
-            <Button
-              type="submit"
-              className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-semibold shadow-md hover:shadow-lg transition-all"
-              disabled={loading}
-            >
-              {loading ? "Creating Account..." : "Create Account"}
-            </Button>
-          </form>
-
-          <div className="mt-6 text-center">
-            <p className="text-sm text-muted-foreground">
-              Already have an account?{" "}
-              <Link
-                to="/login"
-                className="text-blue-600 hover:text-blue-700 font-semibold hover:underline transition-colors"
-              >
-                Sign in
-              </Link>
-            </p>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <p className="text-center text-xs text-muted-foreground mt-8">
-          By signing up, you agree to our{" "}
-          <a href="#" className="underline hover:text-foreground">
-            Terms of Service
-          </a>{" "}
-          and{" "}
-          <a href="#" className="underline hover:text-foreground">
-            Privacy Policy
-          </a>
-        </p>
-      </div>
-    </div>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+        <Input
+          label="Full name"
+          autoComplete="name"
+          placeholder="Jane Doe"
+          maxLength={80}
+          value={form.name}
+          onChange={(e) => setForm({ ...form, name: e.target.value })}
+        />
+        <Input
+          label="Email address"
+          type="email"
+          autoComplete="email"
+          placeholder="you@example.com"
+          value={form.email}
+          onChange={(e) => setForm({ ...form, email: e.target.value })}
+        />
+        <PasswordInput
+          label="Password"
+          autoComplete="new-password"
+          placeholder="At least 8 characters"
+          hint={`At least ${MIN_PASSWORD} characters.`}
+          error={tooShort ? `At least ${MIN_PASSWORD} characters.` : undefined}
+          value={form.password}
+          onBlur={() => setTouchedPassword(true)}
+          onChange={(e) => {
+            setTouchedPassword(true);
+            setForm({ ...form, password: e.target.value });
+          }}
+        />
+        <FormError message={error} />
+        <Button type="submit" size="lg" loading={loading} className="w-full">
+          {loading ? "Creating account..." : "Create account"}
+        </Button>
+      </form>
+    </AuthLayout>
   );
 }

From e52d3d14a48abb99c6893450835a5403848e17d7 Mon Sep 17 00:00:00 2001
From: NSTKrishna <krishnagehlot936@gmail.com>
Date: Sat, 3 Oct 2026 16:22:03 +0530
Subject: [PATCH 08/10] Rewrite the README for the current app

Documents the real feature set, the local setup including VITE_API_URL,
the script table, the project layout and the Vercel deploy, and points
at the backend repo's API_CONTRACT.md for the endpoint shapes.
---
 README.md | 110 ++++++++++++++++--------------------------------------
 1 file changed, 33 insertions(+), 77 deletions(-)

diff --git a/README.md b/README.md
index 2cac5b6..ff819a2 100644
--- a/README.md
+++ b/README.md
@@ -1,92 +1,48 @@
 # EduNerve AI Frontend
 
-Welcome to the frontend repository for **EduNerve AI**, an intelligent, AI-powered educational platform designed to enhance the learning experience. This repository contains a modern React application built with Vite, featuring interactive dashboards, quizzes, and mock interview practice.
+React 19 + Vite + Tailwind CSS 4 client for EduNerve AI: practice voice mock interviews with an AI interviewer (Vapi), then review scored feedback, transcripts and your progress.
 
-## 🚀 Features
+## Features
 
-- **Interactive Dashboard:** Track learning progress with intuitive charts (powered by Recharts).
-- **AI-Powered Assessments:**
-  - **Quiz Hub:** Take dynamic quizzes and review detailed results.
-  - **Interview Practice:** Participate in mock interviews with AI feedback (powered by Vapi AI).
-- **Authentication:** Secure user login and signup, including Google OAuth integration.
-- **Responsive UI:** Modern, accessible, and responsive styling built with Tailwind CSS and Radix UI components.
-- **Smooth Animations:** Engaging user interfaces using Framer Motion.
+- **Voice mock interviews** — pick a role, interview type and technologies; talk to the AI with live captions.
+- **Interview report** — scores out of 10, strengths, areas to improve, tips and the full transcript.
+- **Dashboard** — token balance, averages, score trend chart and recent interviews.
+- **History** — filterable, paginated list of every interview.
+- **Settings** — profile (role, experience, skills), token history, password change, account deletion.
 
-## 🛠️ Tech Stack
+## Run locally
 
-- **Framework:** [React 19](https://react.dev/) + [Vite](https://vitejs.dev/)
-- **Routing:** [React Router](https://reactrouter.com/)
-- **Styling:** [Tailwind CSS v4](https://tailwindcss.com/)
-- **UI Components:** [Radix UI](https://www.radix-ui.com/), [Lucide React](https://lucide.dev/) (Icons)
-- **Animations:** [Framer Motion](https://www.framer.com/motion/)
-- **Data Visualization:** [Recharts](https://recharts.org/)
-- **Auth:** [React Google OAuth](https://github.com/MomenSherif/react-oauth)
-
-## 📁 Project Structure
-
-```text
-src/
-├── assets/          # Static assets (images, icons)
-├── components/      # Reusable UI components
-│   ├── common/      # Generic buttons, inputs, badges, etc.
-│   ├── dashboard/   # Dashboard specific widgets (Stats, Cards)
-│   ├── layout/      # Navbar, Sidebar, Page Layouts
-│   ├── quiz/        # Quiz taking and result views
-│   └── ui/          # Core component primitives (shadcn-like)
-├── context/         # React Context for state management
-├── data/            # Mock data and structural content
-├── lib/             # Utility functions and API clients
-└── pages/           # Main route components (Home, Login, Dashboard, etc.)
+```bash
+npm install
+cp .env.example .env     # VITE_API_URL must point at the backend, including /api
+npm run dev
 ```
 
-## ⚙️ Getting Started
-
-### Prerequisites
-
-- Node.js (v18 or higher recommended)
-- npm or yarn
-
-### Installation
-
-1. **Clone the repository:**
-
-   ```bash
-   git clone https://github.com/NSTKrishna/EduNerve_AI_Frontend.git
-   cd EduNerve_AI_Frontend
-   ```
-
-2. **Install dependencies:**
+Needs the [backend](https://github.com/khuswant18/EduNerve_AI_Backend) running (default `http://localhost:3000`). Allow microphone access when starting an interview.
 
-   ```bash
-   npm install
-   ```
+| Script | |
+|---|---|
+| `npm run dev` | Dev server |
+| `npm run build` | Production build into `dist/` |
+| `npm run lint` | ESLint |
+| `npm test` | Vitest |
 
-3. **Environment Setup:**
-   Create a `.env` file in the root directory and add your required environment variables (e.g., Google OAuth App ID, Vapi API keys, backend API URLs).
+## Project layout
 
-4. **Start the development server:**
-
-   ```bash
-   npm run dev
-   ```
-
-5. **Build for production:**
-
-   ```bash
-   npm run build
-   ```
-
-## 📜 Scripts
-
-- `npm run dev`: Starts the local development server.
-- `npm run build`: Bundles the app for production.
-- `npm run preview`: Previews the production build locally.
-- `npm run lint`: Runs ESLint to check for code quality issues.
+```
+src/
+├── lib/api.js           # the only place that calls the backend (ApiError, typed endpoints)
+├── lib/format.js        # score / duration / date formatting (scores are 0-10)
+├── context/             # auth + token balance (LearnerContext)
+├── hooks/               # useVapiInterview (call + transcript + submit), useAsync
+├── pages/               # Landing, Login, SignUp, Dashboard, Interview, Report, History, Settings
+└── components/          # layout, interview/, dashboard/, common/, ui/
+```
 
-## 🤝 Contributing
+## Backend contract
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+The API shape (endpoints, error codes, score scale) is documented in the backend repo's `API_CONTRACT.md`. Failed requests throw `ApiError` with a stable `code`; switch on that, never on the message text.
 
-## 📄 License
+## Deploy
 
-This project is licensed under the MIT License.
+Vercel: set `VITE_API_URL` to the deployed backend URL (ending in `/api`). `vercel.json` rewrites every route to `index.html` for client-side routing. Add the deployed origin to the backend's `CORS_ORIGINS` if it isn't `*.vercel.app` for this project.

From 2748c2bbfd2ee8db18f6dca0e2d92a08faf04870 Mon Sep 17 00:00:00 2001
From: NSTKrishna <krishnagehlot936@gmail.com>
Date: Sat, 3 Oct 2026 16:22:03 +0530
Subject: [PATCH 09/10] Record product truth and the built design system

- PRODUCT.md captures the confirmed audience, the stack-specific
  positioning, the token economy, and the facts that must not be
  invented: no pricing, testimonials, customers or brand assets exist
- It also records that mark attribution is session-level and undecided
  beyond that, with the constraint that no surface may imply per-answer
  attribution until the API returns a turn reference
- DESIGN.md replaces a captured analysis of an unrelated company's
  brand, which was never this product's system, with the tokens, type
  ramp, marks and rules actually in the code

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 DESIGN.md  | 435 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 PRODUCT.md | 147 ++++++++++++++++++
 2 files changed, 582 insertions(+)
 create mode 100644 DESIGN.md
 create mode 100644 PRODUCT.md

diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..a1fe4cf
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,435 @@
+---
+name: EduNerve AI
+description: A warm worksheet-paper interface where interview results read as your own work marked up in the margin — hairlines divide, four annotation inks carry every judgement, and one enormous figure per view carries the hierarchy.
+colors:
+  paper: "#fbf7ef"
+  sheet: "#fffdf8"
+  sunk: "#f3ede0"
+  ink: "#1a1612"
+  ink-muted: "#645b4e"
+  ink-faint: "#776d5d"
+  rule: "#e4dbca"
+  rule-strong: "#cbbfa8"
+  mark-red: "#b8311a"
+  mark-green: "#16803c"
+  mark-ochre: "#8f6512"
+  mark-blue: "#3a4fb8"
+  red-wash: "#fbede9"
+  red-ink: "#8e2415"
+  red-rule: "#f0d3cb"
+  green-wash: "#e9f4ec"
+  green-ink: "#0e5a2a"
+  green-rule: "#cbe4d3"
+  ochre-wash: "#faf2df"
+  ochre-ink: "#70500c"
+  ochre-rule: "#ebdcb4"
+  blue-wash: "#ebedf9"
+  blue-ink: "#27357f"
+  blue-rule: "#d2d7ee"
+  primary: "#1a1612"
+  primary-ink: "#fffdf8"
+  primary-hover: "#312922"
+  focus: "#3a4fb8"
+  chart-1: "#c8371f"
+  chart-2: "#16803c"
+  chart-3: "#3a4fb8"
+  chart-4: "#b5801f"
+  dark-paper: "#17140f"
+  dark-sheet: "#201c16"
+  dark-sunk: "#2a251d"
+  dark-ink: "#f5efe2"
+  dark-ink-muted: "#a89c88"
+  dark-ink-faint: "#938876"
+  dark-rule: "#39322a"
+  dark-rule-strong: "#4e4539"
+  dark-mark-red: "#e3705a"
+  dark-mark-green: "#3fb89c"
+  dark-mark-ochre: "#d4a03c"
+  dark-mark-blue: "#8690f0"
+  dark-red-wash: "#2e1b16"
+  dark-red-ink: "#f0a896"
+  dark-red-rule: "#4a2b22"
+  dark-green-wash: "#132a24"
+  dark-green-ink: "#85d8c0"
+  dark-green-rule: "#1f4238"
+  dark-ochre-wash: "#2b2112"
+  dark-ochre-ink: "#e8c47e"
+  dark-ochre-rule: "#453620"
+  dark-blue-wash: "#1c1d33"
+  dark-blue-ink: "#b3b8f5"
+  dark-blue-rule: "#2e3050"
+  dark-primary-ink: "#17140f"
+  dark-primary-hover: "#ffffff"
+  dark-focus: "#8690f0"
+  dark-chart-1: "#dc6048"
+  dark-chart-2: "#2fa98f"
+  dark-chart-3: "#6b7be8"
+  dark-chart-4: "#b5841c"
+typography:
+  lead-figure:
+    fontFamily: "Bricolage Grotesque, Geist, ui-sans-serif, system-ui, sans-serif"
+    fontSize: "clamp(4.5rem, 12vw, 7rem)"
+    fontWeight: 600
+    lineHeight: 0.85
+    letterSpacing: "-0.045em"
+    fontFeature: "tnum 1"
+  display:
+    fontFamily: "Bricolage Grotesque, Geist, ui-sans-serif, system-ui, sans-serif"
+    fontSize: "clamp(2.75rem, 6.5vw, 4.25rem)"
+    fontWeight: 600
+    lineHeight: 0.98
+    letterSpacing: "-0.04em"
+  headline:
+    fontFamily: "Bricolage Grotesque, Geist, ui-sans-serif, system-ui, sans-serif"
+    fontSize: "clamp(2rem, 4.5vw, 2.75rem)"
+    fontWeight: 600
+    lineHeight: 1.05
+    letterSpacing: "-0.035em"
+  figure-sm:
+    fontFamily: "Bricolage Grotesque, Geist, ui-sans-serif, system-ui, sans-serif"
+    fontSize: "2.5rem"
+    fontWeight: 600
+    lineHeight: 1.05
+    letterSpacing: "-0.035em"
+    fontFeature: "tnum 1"
+  page-title:
+    fontFamily: "Bricolage Grotesque, Geist, ui-sans-serif, system-ui, sans-serif"
+    fontSize: "1.25rem"
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: "-0.02em"
+  title:
+    fontFamily: "Bricolage Grotesque, Geist, ui-sans-serif, system-ui, sans-serif"
+    fontSize: "1.125rem"
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: "-0.02em"
+  body:
+    fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif"
+    fontSize: "1rem"
+    fontWeight: 400
+    lineHeight: 1.625
+    letterSpacing: "normal"
+  body-sm:
+    fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif"
+    fontSize: "0.875rem"
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: "normal"
+  label:
+    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, monospace"
+    fontSize: "11px"
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: "0.14em"
+  label-fine:
+    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, monospace"
+    fontSize: "10px"
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: "0.14em"
+  measure:
+    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, monospace"
+    fontSize: "0.875rem"
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: "normal"
+    fontFeature: "tnum 1"
+rounded:
+  sm: "6px"
+  md: "10px"
+  lg: "14px"
+  xl: "20px"
+  2xl: "26px"
+  full: "999px"
+spacing:
+  hairline: "1px"
+  xs: "6px"
+  sm: "10px"
+  md: "16px"
+  lg: "24px"
+  xl: "40px"
+  margin-indent: "24px"
+  gutter: "16px"
+  gutter-lg: "40px"
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.primary-ink}"
+    rounded: "{rounded.md}"
+    padding: "0 16px"
+    height: "40px"
+    typography: "{typography.body-sm}"
+  button-primary-hover:
+    backgroundColor: "{colors.primary-hover}"
+    textColor: "{colors.primary-ink}"
+  button-outline:
+    backgroundColor: "{colors.sheet}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.md}"
+    padding: "0 16px"
+    height: "40px"
+  button-outline-hover:
+    backgroundColor: "{colors.sunk}"
+  button-ghost:
+    backgroundColor: "transparent"
+    textColor: "{colors.ink-muted}"
+    rounded: "{rounded.md}"
+    height: "40px"
+  button-ghost-hover:
+    backgroundColor: "{colors.sunk}"
+    textColor: "{colors.ink}"
+  button-wash:
+    backgroundColor: "{colors.sunk}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.md}"
+    height: "40px"
+  button-danger:
+    backgroundColor: "{colors.mark-red}"
+    textColor: "{colors.sheet}"
+    rounded: "{rounded.md}"
+    height: "40px"
+  button-danger-outline:
+    backgroundColor: "{colors.red-wash}"
+    textColor: "{colors.red-ink}"
+    rounded: "{rounded.md}"
+    height: "40px"
+  button-lg:
+    height: "48px"
+    padding: "0 24px"
+    typography: "{typography.body-sm}"
+  button-sm:
+    height: "32px"
+    padding: "0 12px"
+  input:
+    backgroundColor: "{colors.sheet}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.md}"
+    padding: "0 14px"
+    height: "44px"
+  input-label:
+    textColor: "{colors.ink-muted}"
+    typography: "{typography.label}"
+  status-badge:
+    backgroundColor: "{colors.green-wash}"
+    textColor: "{colors.green-ink}"
+    rounded: "{rounded.full}"
+    padding: "2px 10px"
+    typography: "{typography.label-fine}"
+  notice-info:
+    backgroundColor: "{colors.blue-wash}"
+    textColor: "{colors.blue-ink}"
+    rounded: "{rounded.md}"
+    padding: "12px 16px"
+  notice-caution:
+    backgroundColor: "{colors.ochre-wash}"
+    textColor: "{colors.ochre-ink}"
+    rounded: "{rounded.md}"
+    padding: "12px 16px"
+  notice-correction:
+    backgroundColor: "{colors.red-wash}"
+    textColor: "{colors.red-ink}"
+    rounded: "{rounded.md}"
+    padding: "10px 12px"
+  sheet-panel:
+    backgroundColor: "{colors.sheet}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.lg}"
+    padding: "24px"
+  progress-track:
+    backgroundColor: "{colors.sunk}"
+    rounded: "{rounded.full}"
+    height: "6px"
+  avatar:
+    backgroundColor: "{colors.sunk}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.full}"
+    size: "36px"
+---
+
+# Design System: EduNerve AI
+
+## Overview
+
+**Creative North Star: "The Worked Example"**
+
+The product is a sheet of warm worksheet paper with a coach's marks in the margin. A session is not a verdict handed down from a scorecard; it is the candidate's own work, shown, and then annotated beside the evidence it refers to. Every surface is built from four materials and nothing else: the paper ground (`#fbf7ef`), the sheet that sits on it (`#fffdf8`), the sunk recess (`#f3ede0`), and hairline rules in a dried-pencil beige. Judgement arrives in saturated annotation ink — red, green, ochre, blue — used as whole-region washes and margin marks, never scattered as decorative accent.
+
+Density is editorial rather than dashboard. There is exactly one enormous figure per view (the average score, the report score), set in the display face at up to 7rem with 0.85 leading, and everything else sits at label rank below it in 10–11px uppercase mono. That scale contrast is the only hierarchy device in play; the system has no second accent colour, no card chrome, and no shadow to fall back on. Both themes are designed, not flipped: dark is a warm near-black desk at night (`#17140f` paper, `#f5efe2` ink) that keeps the paper's temperature — never a blue-black slate.
+
+The interface refuses the category's default arrangement of four equal stat tiles above a line chart. Where that pattern would appear, facts of different kinds are set on one ruled register line at label rank instead.
+
+**Key Characteristics:**
+- Warm paper grounds in three tones; no pure white, no pure black, in either theme.
+- Four annotation inks with fixed meanings, each shipped in four parts (ink, wash, wash-ink, rule).
+- Division by hairline; zero box-shadows anywhere in the build.
+- One enormous display figure per view against small uppercase mono labels.
+- A 1px vertical margin rule in correction red that content is written to the right of.
+- Mono reserved strictly for measurement — scores, counts, references, labels.
+
+## Colors
+
+A warm, low-chroma paper palette carrying four saturated annotation inks that are the only colour the system permits.
+
+### Primary
+- **Boxed-Answer Ink** (`{colors.primary}`): the primary action is a boxed answer — solid ink fill, paper-coloured text. It appears once per view at most ("Start interview", "Save"). In dark it inverts to chalk on slate: the ink token is the near-white, and the label is the dark paper.
+
+### Secondary — the four annotation marks
+Each mark exists in four parts: the saturated ink for strokes and icons, a wash to fill a whole region, the ink that sits legibly on that wash, and the rule that bounds it.
+
+- **Correction Red** (`{colors.mark-red}`): what went wrong and what to fix. Carries the margin rule, destructive actions, input error borders, the active nav icon, the caret, and the logo's margin line.
+- **Tick Green** (`{colors.mark-green}`): what was right. Score band "Strong", completed status, strength annotations, the captured-turn tick on the live transcript.
+- **Caution Ochre** (`{colors.mark-ochre}`): in progress, incomplete, careful. Score band "Developing", in-progress status, "Work on this" annotations, and the text-selection wash.
+- **Pen Blue** (`{colors.mark-blue}`): a neutral note — the teacher's aside, and the student's own pen against the marker's. It labels the YOU speaker on every transcript, heads the "Next time" annotation, carries informational notices and toasts, and is the focus ring colour. It is the fourth mark, equal in standing to the other three.
+
+### Tertiary — the validated chart series
+- **Series 1–4** (`{colors.chart-1}` … `{colors.chart-4}`): four line hues for the score trend, with dark-theme counterparts. These are a validated artifact, not a preference: see **The Fixed Adjacency Rule** below.
+
+### Neutral
+- **Paper** (`{colors.paper}`): the page ground, body background, and the sticky header's backdrop.
+- **Sheet** (`{colors.sheet}`): the written-on surface — sidebar, inputs, dialogs, tooltips, the landing specimen panel.
+- **Sunk** (`{colors.sunk}`): the recess — progress tracks, avatars, hover fills, active nav item, skeletons, disabled fields.
+- **Ink / Ink Muted / Ink Faint** (`{colors.ink}` / `{colors.ink-muted}` / `{colors.ink-faint}`): primary copy, secondary copy, and the faint rank for placeholders, references, metadata, and axis ticks.
+- **Rule / Rule Strong** (`{colors.rule}` / `{colors.rule-strong}`): the hairline that divides sections and rows, and the heavier hairline that bounds a sheet, an input, a badge, or a chip.
+
+### Named Rules
+
+**The Fixed Adjacency Rule.** The chart series order is overall, technical, problem solving, communication — in that order, always. The four hues were validated for separation on the sheet ground under normal vision and under protan, deutan and tritan simulation *in that adjacency*. Reordering the series, dropping one from the middle, or reusing a chart hue outside the chart breaks the guarantee the palette was checked for.
+
+**The Four Marks Rule.** Colour in this system is annotation, and there are exactly four annotations: red is a correction, green is a tick, ochre is a caution, blue is a note. A new meaning does not get a new hue; it gets one of these four or it gets ink. Never introduce a fifth accent.
+
+**The Never Colour Alone Rule.** No status, score or series is identified by colour alone. A score band always ships its word ("Strong", "Developing", "Needs work", "Not scored") beside the figure; a status badge always carries its label; the trend chart carries a legend naming all four series and end-labels only the lead series, because four end-labels collapse into an unreadable stack when scores converge.
+
+**The Wash, Not Tint Rule.** Annotation colour fills whole regions — a notice, a badge, a toast — bounded by its own rule and carrying its own legible ink. It is never sprinkled as a tint on an otherwise neutral element.
+
+## Typography
+
+**Display Font:** Bricolage Grotesque (variable, opsz 12–96, wght 400–800), falling back to Geist
+**Body Font:** Geist (400 / 500 / 600)
+**Label/Mono Font:** Geist Mono (400 / 500)
+
+**Character:** A tight, slightly idiosyncratic grotesque carrying the big numbers and the few headlines, against a plain, highly legible UI sans and a mono that only ever counts things. Display type is set large and very tight (-0.02em to -0.045em, leading down to 0.85); labels are set small, wide and uppercase (0.08em to 0.14em). There is almost nothing in between, and that gap is the hierarchy.
+
+### Hierarchy
+- **Lead Figure** (display, 600, `clamp(4.5rem, 12vw, 7rem)`, 0.85 leading, -0.045em, tabular): the one enormous number per view. Dashboard average score. The report's score uses the same rank one step down (`clamp(4rem, 10vw, 5.5rem)`).
+- **Display** (display, 600, `clamp(2.75rem, 6.5vw, 4.25rem)`, 0.98 leading, -0.04em): the landing hero headline only.
+- **Headline** (display, 600, `clamp(2rem, 4.5vw, 2.75rem)` and `clamp(2.5rem, 7vw, 3.5rem)`, ~1.05 leading, -0.035em): landing closing statement; the 404 heading; the auth page title at a fixed 2.5rem.
+- **Page Title** (display, 600, 1.25rem / `text-xl`, -0.02em): the single shared rank for every Operate page heading — Dashboard, History, Settings, Report, Interview setup, live session. Deliberately demoted so the lead figure is unambiguously the headline.
+- **Title** (display, 600, 1.125rem / 1rem, -0.02em / -0.015em): dialog titles, settings section heads, specimen role lines.
+- **Body** (Geist, 400, 1rem, ~1.6 leading, max 46–62ch): prose, transcript turns, descriptions.
+- **Body Small** (Geist, 400, 0.875rem): row copy, captions, hints, nav items, button labels.
+- **Label** (Geist Mono, 400, 11px, uppercase, 0.12–0.14em, ink-muted): section headings, field labels, figure labels, status words. This is the rank every section heading on an Operate page occupies.
+- **Label Fine** (Geist Mono, 400, 10px, uppercase, 0.1–0.14em): transcript speaker labels, per-row band words.
+- **Measure** (Geist Mono, 400/500, 0.75–1.125rem, tabular figures): scores, token counts, durations, turn counts, session references (`EN-7K42`), chart axis ticks.
+
+### Named Rules
+
+**The Mono Is Measurement Rule.** Geist Mono appears only where something is being counted, scored, referenced or labelled — never as a "technical" costume on prose, buttons or navigation. Everything set in mono either is a number or names one. Numbers set in mono always carry tabular figures so columns line up.
+
+**The One Figure Rule.** Each view gets exactly one number at lead-figure rank. If a second number wants that size, it is not the view's headline and belongs at measure rank instead.
+
+**The Demoted Title Rule.** Page headings sit at 1.25rem, below the figure they introduce. A page title never competes with the measurement it frames.
+
+## Layout
+
+The app is a fixed 248px sheet-coloured sidebar (fixed, off-canvas below `lg` with a scrim and Escape-to-close) against a paper main column, with a sticky 72px header at `paper/92` plus backdrop blur. Main content is padded 16px / 32px vertically on mobile and 40px at `lg`. Content columns are capped: 920px for the dashboard register, 1100px for landing and auth, 760px for landing prose lists, 420px for the auth form, and prose measures are set in characters (46ch hero, 56–62ch body, 20ch for the closing headline).
+
+Rhythm is built on a 4px base expressed as a short set of steps actually in use: hairline (1px), 6px, 10px, 16px, 24px, 40px. Section-to-section spacing is 40px (`mt-10`, `gap-10`); within a block, 16–24px; inside a control, 10–16px. The margin indent is a constant 24px (`pl-6`) wherever the margin rule appears, 16–20px for nested annotations.
+
+Responsive behaviour is column collapse, never layout substitution: the dashboard's figure-plus-scores pair is a two-column grid at `md` and stacks below it; the report's annotation aside is a `260px + 1fr` grid at `lg` and stacks below; the landing hero is `1.05fr + 1fr` at `lg`. The mobile header substitutes a mono uppercase route label for the sidebar, because the only other cue to location is the page h1 and that scrolls away.
+
+**The Register Line Rule.** Facts of different kinds (interview counts, skills tracked, experience) sit on one hairline-topped register line at label rank, inline, never as a row of equally weighted stat tiles.
+
+## Elevation & Depth
+
+**There are no shadows in this system.** The build contains zero `box-shadow` declarations — not on cards, not on dialogs, not on the sidebar, not on hover. Depth is entirely tonal and linear: the paper ground recedes, the sheet sits on it, the sunk tone recesses into it, and annotation washes read as marks laid on top. Separation is done with 1px rules in `rule` (between rows and sections) or `rule-strong` (bounding a sheet, input, badge or chip). The modal is the only overlay, and it establishes depth with an ink scrim at 45% opacity plus a `rule-strong` border — not with a lift.
+
+### Named Rules
+
+**The Division Rule.** This world divides by hairline, never by drop-shadowed card. Any surface that needs to be set apart gets a rule, a change of paper tone, or an annotation wash. A shadow is never the answer, including on hover, including on the modal.
+
+**The Sticky Header Rule.** The only depth cue permitted at scroll boundaries is a bottom hairline plus a translucent paper backdrop (`paper/92` with blur). No shadow appears as the content passes under it.
+
+## Shapes
+
+Corners are generous and consistently stepped: 6px (skeletons, focus outlines), 10px (buttons, inputs, selects, notices, toasts, menus, tooltips), 14px (sheet panels, dialogs — the base radius), 20px and 26px available for larger surfaces, and fully round (999px) for badges, chips, avatars, progress tracks and the scrollbar thumb. Borders are always 1px; the only non-hairline strokes in the system are the SVG logo (1.5–2px) and the chart lines (2px for the lead series, 1.25px for the rest).
+
+The signature form is the **margin rule**: a 1px vertical line in correction red at 35–40% opacity, running the height of a block, with content written 24px to its right. It appears on the auth form, the dashboard lead figure, the sidebar nav, the landing hero, the landing specimen, the report transcript, the live session captions and the 404. Annotation blocks repeat the same device in their own mark colour at full strength.
+
+The brand mark restates the shape at 24×24: a sheet with a 5px-radius rounded corner, a `rule-strong` stroke, a red margin line at x=7, and two rounded ink writing lines of unequal length. It is drawn as SVG rather than stacked elements so it survives at 28px.
+
+## Components
+
+### Buttons
+- **Shape:** gently curved (10px), fixed heights of 32 / 40 / 48px, with a square 40px icon variant.
+- **Primary:** the boxed answer — ink fill, paper text, 16px horizontal padding at the default 40px height. One per view.
+- **Hover / Focus:** 150ms transition on background, border and opacity only; no transform, no shadow, no scale. Focus is the global 2px blue outline at 2px offset.
+- **Outline:** sheet background, `rule-strong` border, hovers to sunk. **Ghost:** transparent, muted ink, hovers to a sunk fill. **Wash:** sunk fill for a quiet third rank. **Danger:** red fill with sheet text. **Danger Outline:** red wash with red ink and a red rule, used for "End interview" — a destructive action that stays legible as a mark rather than shouting as a block.
+- **Disabled:** 45% opacity, pointer events off.
+
+### Inputs / Fields
+- **Style:** 44px tall, sheet background, 1px `rule-strong` border, 10px radius, 14px horizontal padding. Labels sit above in 11px uppercase mono at 0.12em in muted ink.
+- **Hover:** border shifts to `ink-faint`. **Focus:** the global blue outline.
+- **Error:** the border becomes correction red and a red message animates in beneath via `mark-in`; the field is `aria-invalid` and described by the message. **Disabled:** sunk fill, 70% opacity, not-allowed cursor.
+- **Select** is the same field with a chevron in faint ink at 12px from the right edge and the native appearance removed.
+
+### Status Badge
+- **Style:** fully round, 1px rule, wash fill, wash ink, 11px uppercase mono at 0.08em tracking, 10px horizontal padding.
+- **States:** completed is a green tick, in progress an ochre caution, abandoned ("Not finished") a neutral sunk fill with a `rule-strong` border. One state vocabulary, rendered identically everywhere it appears.
+
+### Sheet Panels / Containers
+- **Corner Style:** 14px. **Background:** sheet. **Shadow Strategy:** none — see Elevation & Depth. **Border:** 1px `rule` or `rule-strong`. **Internal Padding:** 24px.
+- Most "cards" in this system are not panels at all: they are a hairline-topped block on paper (`border-t border-rule pt-5`). The bordered sheet is reserved for the landing specimen, the dialog and the chart tooltip.
+
+### Navigation
+- 248px sidebar on sheet with a `rule` right edge, a 72px logo header, and the margin rule running down the nav list with items indented to its right.
+- Items are 14px Geist on a 10px radius with 12px/10px padding, muted ink by default. Active is a sunk fill, full ink, medium weight, with the item's icon in correction red; inactive icons are faint ink. Hover is a 60%-opacity sunk fill.
+- Sign out sits below a top rule and hovers to the red wash with red ink.
+- Mobile: a slide-in drawer (300ms ease-out transform) over an ink/45 scrim, closed by Escape, scrim click or any nav click.
+
+### Progress / Score Bar
+- A 6px fully round track in sunk with a stroke drawn along it in the score's band colour — green, ochre or red — widening over 700ms ease-out. The track is the ruled line; the stroke is the mark over it.
+- The score line above it pairs the subject label in body-small ink with the band word in 11px uppercase mono and the figure in tabular mono tinted to the band.
+
+### Dialog
+- Centred (bottom-sheet aligned below `sm`) on a 14px-radius sheet panel with a `rule-strong` border and 24px padding, over an ink/45 scrim, entering with `mark-in`. Title in display 1.125rem, description in muted body-small, a ghost icon button to close, and footer actions right-aligned with 8px gaps. Escape closes; focus is trapped while open and returned to the opener on close.
+
+### Toasts / Notices
+- Bottom-right, max 384px, 10px radius, wash fill with its matching rule and ink, a 16px lucide icon, and a 14px message. Success is a tick, error a correction, info a pen-blue note. Each enters with `mark-in`.
+- Inline notices (report, settings) use the same wash/rule/ink triplet at 16px/12px padding with no icon.
+
+### The Margin Annotation (signature)
+A block indented 16–24px with a 1px vertical rule in its own mark colour running its full height, headed by a 11px uppercase mono title with a 14px icon in the mark colour, carrying a list of 14px lines in full ink. Green heads "What worked", ochre "Work on this", blue "Next time". On the report these sit in a sticky aside beside the transcript they refer to, never stacked above it as a verdict — and the heading states that the marks cover the session as a whole, because the data carries no per-turn attribution.
+
+### The Score Trend Chart (signature)
+A hairline-topped block with a mono label heading and the sampled range stated in words ("showing 4–9 of a 0–10 scale"), because a fixed 0–10 axis squeezed every line into a fifth of the plot and read as flat. Horizontal grid lines only, in `rule`; no vertical grid, no axis line on Y; ticks in 11px mono faint ink. Four `monotone` lines, no dots, no entry animation, lead series at 2px and the rest at 1.25px. A legend above names all four; only the lead series is end-labelled. The tooltip is a sheet panel with a mono timestamp and a label/value list, each row prefixed by a 2px colour swatch.
+
+### Motion
+- **`mark-in`** (`mark-settle`, 500ms, `cubic-bezier(0.16, 1, 0.3, 1)`): opacity plus a 2px settle plus a left-to-right clip reveal. The world's only entrance — a mark drawn beside the thing it refers to, settling rather than sliding. Used on score bands, field errors, toasts, dialogs, menus and new transcript turns.
+- **`ink-breathe`** (2400ms, `cubic-bezier(0.4, 0, 0.6, 1)`, infinite): opacity 1 → 0.35 → 1, for the connecting state on the live session.
+- State transitions are 150ms on colour only. `prefers-reduced-motion: reduce` collapses all animation, transition and scroll behaviour.
+
+### Browser Surfaces
+The system claims the chrome too: selection is an ochre wash with ink text, the caret is correction red, `accent-color` is pen blue, the scrollbar is an 11px `rule-strong` thumb with a 3px paper border and round ends, links carry a 1px underline at 0.2em offset, and `:focus-visible` is a 2px blue outline at 2px offset with a 2px radius.
+
+## Do's and Don'ts
+
+### Do:
+- **Do** divide with a hairline — `rule` between rows and sections, `rule-strong` to bound a surface.
+- **Do** give each view exactly one lead figure, in the display face at `clamp(4.5rem, 12vw, 7rem)` with tabular numerals, and demote the page title to 1.25rem beneath it.
+- **Do** use the four marks for their fixed meanings: red corrects, green ticks, ochre cautions, blue notes.
+- **Do** ship the word beside the colour — band labels, status labels, a legend naming every chart series.
+- **Do** reach for the margin rule (1px, `mark-red` at 35–40%, content 24px to its right) when a block is the user's own work being shown.
+- **Do** keep Geist Mono for measurement — scores, counts, durations, references, labels — with tabular figures.
+- **Do** fill a whole region with a mark's wash, bounded by its rule and carrying its wash-ink.
+- **Do** design the dark theme as a warm night desk (`#17140f` / `#201c16`), keeping the paper's temperature.
+
+### Don't:
+- **Don't** add a `box-shadow` anywhere, including hover and the modal. The build has none and the whole look rests on that.
+- **Don't** introduce a fifth accent hue, or reuse a chart series colour outside the chart.
+- **Don't** reorder, re-hue, or drop a series from the trend chart — the palette was validated in that adjacency for protan/deutan/tritan separation.
+- **Don't** arrange facts as a row of equally weighted stat tiles above a chart; use the register line at label rank.
+- **Don't** set prose, buttons or navigation in mono to look technical.
+- **Don't** put a second number at lead-figure rank in the same view.
+- **Don't** animate by sliding, scaling or lifting; the entrance is `mark-in`, which settles.
+- **Don't** make dark mode a cool slate or an inverted sheet, and don't use pure white or pure black in either theme.
diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 0000000..7b0c2a7
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,147 @@
+# Product
+
+<!-- impeccable:product-schema 1 -->
+
+## Platform
+
+web
+
+## Users
+
+Early-career candidates preparing for software interviews on their own: students,
+freshers, and engineers with up to roughly three years of experience. The user
+signs up themselves, practices alone, and is usually working toward a specific
+upcoming interview. Access is self-serve — the individual chooses the product and
+pays for it; there is no institution or admin between them and the app.
+
+Settings offers a wider experience range (Student / Fresher, 0–1, 1–3, 3–5, 5+
+years), so later-career users are supported, but they are not who the product is
+designed around.
+
+## Product Purpose
+
+Practice a spoken mock interview with an AI interviewer, then review a scored
+report and track improvement across sessions.
+
+One session is a live voice call: the user picks a target role, an interview type
+and the technologies they want to be asked about, talks to the interviewer with
+live captions, and ends with a report containing scores, strengths, areas to
+improve, tips and the full transcript.
+
+Success is a user who comes back — who runs interviews repeatedly and whose
+scores rise over time. A single rehearsal is not the outcome; measurable
+improvement is.
+
+## Positioning
+
+The interview is generated from the user's actual target role plus the specific
+technologies they select, so the questions match the job being applied for rather
+than coming from a generic bank. The backend exposes a role → technologies map,
+and the user's selection is what configures the voice assistant for that session.
+
+A neighboring product can offer voice practice or scored feedback. What it cannot
+truthfully copy is that this interview was built around the stack the user named.
+
+## Operating Context
+
+- Runs in the browser and requires microphone permission. The app requests the
+  microphone **before** starting an interview, so a denied prompt costs nothing.
+- One interview is a live voice call through Vapi, of a fixed length the backend
+  sets per session, with live captions as the user speaks.
+- The flow is: setup (role, interview type, technologies) → live call → report.
+  Reports are reachable later from History.
+- Interview types: `technical`, `behavioral`, `mixed`.
+- Interview statuses: `completed`, `in_progress`, `abandoned`.
+- Requires the separate EduNerve AI backend. The API shape — endpoints, error
+  codes and the score scale — is documented in that repository's
+  `API_CONTRACT.md`, not in this one.
+- Deployed on Vercel; every route rewrites to `index.html` for client-side
+  routing.
+
+## Capabilities and Constraints
+
+**Scoring.** Scores run 0–10 on three axes — technical, communication, problem
+solving — plus an overall score. Any of them can be null when AI evaluation did
+not run; the UI must show that honestly rather than rendering a zero.
+
+**The report** carries feedback prose, strengths, areas to improve, tips, and the
+complete transcript.
+
+**Dashboard** shows token balance, average score, interview counts, skills
+tracked, a score trend across scored sessions, and recent interviews.
+
+**History** filters by status and interview type and is cursor-paginated.
+
+**Settings** covers profile (name, target role, experience level, up to 20
+skills), token transaction history, password change, and account deletion.
+
+**Auth.** JWT held in `localStorage` with the profile cached alongside it.
+Specific session-expiry error codes force a logout.
+
+**Tokens.** An interview costs 10 tokens. New accounts receive a signup grant. An
+interview that ends before any answers are recorded is refunded automatically. An
+admin adjustment reason exists in the ledger.
+
+Tokens are intended as **paid credits**: users are meant to buy more when they run
+out. **No purchase path exists in the product today** — there is no pricing, no
+packs, no checkout, and the API exposes only balance and transaction history.
+Until that is built, running out of tokens is a hard stop, and the product must
+say so plainly rather than directing the user somewhere that cannot help them.
+Prices, pack sizes and billing provider are **undecided and must not be
+invented.**
+
+**Mark attribution is session-level, and undecided beyond that.** The report
+returns `strengths`, `weakAreas` and `aiAnalysis.notes` as flat arrays with no
+reference to the transcript turn each one came from. The UI therefore presents
+them as marks on the session as a whole, read against the conversation, and says
+so on screen. Attaching a mark to the specific answer it refers to would require
+the API to return a turn reference with each item — **an open backend contract
+decision, not a frontend gap.** Until it is made, no surface may imply per-answer
+attribution.
+
+**Degraded AI.** AI feedback can be unavailable. The interview is still saved with
+its transcript and no scores; this is a normal state, not an error.
+
+**Error handling.** Failed requests throw `ApiError` with a stable `code`. Branch
+on the code, never on message text.
+
+**Terminology.** "Tokens" (not credits, coins or points). "Interview" (not quiz,
+test or assessment). "Role" and "technologies" for the setup choices. "Report"
+for the result.
+
+## Brand Commitments
+
+The product name is **EduNerve AI**. No other identity constraint, voice
+guideline or reference has been confirmed by the user.
+
+## Evidence on Hand
+
+- `README.md` — features, local setup, scripts, backend contract pointer, deploy
+  notes. Accurate as of this record.
+- The backend lives in a separate repository; `API_CONTRACT.md` is there, not
+  here.
+- **No logo or wordmark asset is committed.** `public/logo.png` was removed and
+  the mark is currently a generic icon. Future work must not claim a brand asset
+  exists or reference a file that does not.
+- The landing page currently states "7+ Job Roles", "40+ Technologies", "AI
+  Powered" and "24/7". These are UI copy, **not verified figures** — the real
+  counts come from the backend's options endpoint at runtime. Do not treat them
+  as confirmed numbers or repeat them as claims elsewhere.
+- **No testimonials, customers, case studies, press, pricing, benchmarks or
+  usage statistics exist.** None may be fabricated.
+
+## Product Principles
+
+1. **The stack the user named is the product.** An interview that could have been
+   generated without knowing their role and technologies has failed its core
+   promise.
+2. **Measure the same way every time.** One rubric across every session is what
+   makes progress real rather than anecdotal; changing what is measured breaks
+   the comparison the product exists to offer.
+3. **Never charge for a session the user did not get.** Permission is requested
+   before tokens are spent, and an interview with no answers is refunded.
+4. **The user's words survive the machinery.** A transcript is kept even when
+   scoring fails, because the recording of what they actually said is theirs.
+5. **State the true situation, including when the product cannot help.** A dead
+   end described honestly is better than a cheerful nudge toward a screen that
+   resolves nothing.

From 83b5e79144908754b4360fd9aa5b3db4d0e2255e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 3 Oct 2026 11:01:09 +0000
Subject: [PATCH 10/10] Fix build lint errors in sidebar and report components

Co-authored-by: NSTKrishna <178726204+NSTKrishna@users.noreply.github.com>
---
 src/components/layout/DashboardLayout.jsx |  3 ++-
 src/components/layout/LearningSidebar.jsx | 26 ++++++-----------------
 src/components/layout/navigation.js       | 14 ++++++++++++
 src/pages/ReportPage.jsx                  |  3 ++-
 4 files changed, 25 insertions(+), 21 deletions(-)
 create mode 100644 src/components/layout/navigation.js

diff --git a/src/components/layout/DashboardLayout.jsx b/src/components/layout/DashboardLayout.jsx
index dcf82af..66935c8 100644
--- a/src/components/layout/DashboardLayout.jsx
+++ b/src/components/layout/DashboardLayout.jsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { Link, Outlet, useLocation } from "react-router-dom";
 import { Menu } from "lucide-react";
-import LearningSidebar, { NAV_LINKS, isNavActive } from "./LearningSidebar";
+import LearningSidebar from "./LearningSidebar";
+import { NAV_LINKS, isNavActive } from "./navigation";
 import Button from "../common/Button";
 import ThemeToggle from "../common/ThemeToggle";
 import Avatar from "../common/Avatar";
diff --git a/src/components/layout/LearningSidebar.jsx b/src/components/layout/LearningSidebar.jsx
index 5bdf0c2..b03804f 100644
--- a/src/components/layout/LearningSidebar.jsx
+++ b/src/components/layout/LearningSidebar.jsx
@@ -1,22 +1,10 @@
-import { useEffect, useRef } from "react";
+import { createElement, useEffect, useRef } from "react";
 import { NavLink, useLocation } from "react-router-dom";
-import { History, LayoutDashboard, LogOut, Mic, Settings } from "lucide-react";
+import { LogOut } from "lucide-react";
 import { useLearner } from "../../context/LearnerContext";
 import Logo from "../brand/Logo";
 import { cn } from "../../lib/utils";
-
-export const NAV_LINKS = [
-  { label: "Dashboard", to: "/dashboard", icon: LayoutDashboard },
-  { label: "AI Interview", to: "/interviews", icon: Mic },
-  { label: "History", to: "/history", icon: History },
-  { label: "Settings", to: "/settings", icon: Settings },
-];
-
-// `/interviews/:id` is a report, which belongs to History; `/interviews` itself is the start page.
-export const isNavActive = (to, pathname) =>
-  to === "/history"
-    ? pathname === "/history" || pathname.startsWith("/interviews/")
-    : pathname === to;
+import { NAV_LINKS, isNavActive } from "./navigation";
 
 export default function LearningSidebar({ open = false, onClose }) {
   const location = useLocation();
@@ -70,10 +58,10 @@ export default function LearningSidebar({ open = false, onClose }) {
                     active ? "bg-sunk font-medium text-ink" : "text-ink-muted hover:bg-sunk/60 hover:text-ink",
                   )}
                 >
-                  <Icon
-                    className={cn("h-[18px] w-[18px] shrink-0", active ? "text-mark-red" : "text-ink-faint")}
-                    aria-hidden="true"
-                  />
+                  {createElement(Icon, {
+                    className: cn("h-[18px] w-[18px] shrink-0", active ? "text-mark-red" : "text-ink-faint"),
+                    "aria-hidden": true,
+                  })}
                   {label}
                 </NavLink>
               );
diff --git a/src/components/layout/navigation.js b/src/components/layout/navigation.js
new file mode 100644
index 0000000..3f2c3d3
--- /dev/null
+++ b/src/components/layout/navigation.js
@@ -0,0 +1,14 @@
+import { History, LayoutDashboard, Mic, Settings } from "lucide-react";
+
+export const NAV_LINKS = [
+  { label: "Dashboard", to: "/dashboard", icon: LayoutDashboard },
+  { label: "AI Interview", to: "/interviews", icon: Mic },
+  { label: "History", to: "/history", icon: History },
+  { label: "Settings", to: "/settings", icon: Settings },
+];
+
+// `/interviews/:id` is a report, which belongs to History; `/interviews` itself is the start page.
+export const isNavActive = (to, pathname) =>
+  to === "/history"
+    ? pathname === "/history" || pathname.startsWith("/interviews/")
+    : pathname === to;
diff --git a/src/pages/ReportPage.jsx b/src/pages/ReportPage.jsx
index 10c90bb..1cea32d 100644
--- a/src/pages/ReportPage.jsx
+++ b/src/pages/ReportPage.jsx
@@ -1,3 +1,4 @@
+import { createElement } from "react";
 import { Link, useParams } from "react-router-dom";
 import { ArrowLeft, Check, Lightbulb, Target } from "lucide-react";
 import { useAsync } from "../hooks/useAsync";
@@ -30,7 +31,7 @@ function Annotation({ icon: Icon, mark, title, items }) {
     <section className="relative pl-4">
       <span aria-hidden="true" className={`absolute inset-y-0.5 left-0 w-px ${tone.rule}`} />
       <h3 className="flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.12em] text-ink-muted">
-        <Icon className={`h-3.5 w-3.5 ${tone.icon}`} aria-hidden="true" />
+        {createElement(Icon, { className: `h-3.5 w-3.5 ${tone.icon}`, "aria-hidden": true })}
         {title}
       </h3>
       <ul className="mt-2.5 space-y-2">