bio6 mock exam

bio6mockexam.jsx

import { useState, useEffect } from "react";
 
const questions = [
  // Cell Structure & Function
  { id: 1, section: "Cell Structure & Function", question: "Which of the following is NOT one of the 6 characteristics of living things?", options: ["Can reproduce", "Can photosynthesize", "Can maintain homeostasis", "Has one or more cells"], answer: 1 },
  { id: 2, section: "Cell Structure & Function", question: "Which of the following correctly states the Cell Theory?", options: ["Cells are the largest unit of life", "All living things are composed of cells, all cells come from existing cells, and cells are the smallest unit of life", "Only plants and animals are made of cells", "Cells can spontaneously generate under the right conditions"], answer: 1 },
  { id: 3, section: "Cell Structure & Function", question: "What do ALL cells have in common?", options: ["Cell wall, chloroplast, nucleus", "DNA, ribosomes, and a nucleoid or nucleus", "Mitochondria, Golgi apparatus, ER", "Cytoskeleton, centrioles, lysosomes"], answer: 1 },
  { id: 4, section: "Cell Structure & Function", question: "Which organelle is known as the 'powerhouse of the cell' and produces ATP?", options: ["Golgi Apparatus", "Ribosome", "Mitochondria", "Lysosome"], answer: 2 },
  { id: 5, section: "Cell Structure & Function", question: "What is the function of the Golgi Apparatus?", options: ["Site of protein synthesis", "Modifies, packages, and stores materials for the cell", "Contains digestive enzymes", "Carries materials between organelles"], answer: 1 },
  { id: 6, section: "Cell Structure & Function", question: "What is the difference between Eukaryotic and Prokaryotic cells?", options: ["Eukaryotic cells are smaller and have no nucleus", "Prokaryotic cells are bigger and contain DNA", "Eukaryotic cells are bigger and contain a true nucleus; Prokaryotic cells contain no true nucleus and include bacteria and archaea", "They are the same; the terms are interchangeable"], answer: 2 },
  { id: 7, section: "Cell Structure & Function", question: "What organelle is the site of protein synthesis?", options: ["Lysosome", "Ribosome", "Smooth ER", "Vesicle"], answer: 1 },
  { id: 8, section: "Cell Structure & Function", question: "Which structure is unique to plant cells?", options: ["Ribosome", "Cell membrane", "Chloroplast", "Cytoplasm"], answer: 2 },
 
  // Body Organization
  { id: 9, section: "Body Organization", question: "What is the correct order of body organization from smallest to largest?", options: ["Organ → Tissue → Cell → Organ System → Organism", "Cell → Tissue → Organ → Organ System → Organism", "Organism → Organ → Tissue → Cell", "Tissue → Cell → Organ → Organism"], answer: 1 },
  { id: 10, section: "Body Organization", question: "Homeostasis is best defined as:", options: ["The ability to reproduce", "The process of cell division", "The ability to maintain a stable internal environment to keep the body alive", "The conversion of sunlight to energy"], answer: 2 },
  { id: 11, section: "Body Organization", question: "Which type of tissue covers body surfaces and lines organs?", options: ["Connective", "Muscle", "Epithelial", "Nervous"], answer: 2 },
  { id: 12, section: "Body Organization", question: "Which body system sends chemical signals throughout the body?", options: ["Lymphatic", "Nervous", "Endocrine", "Urinary"], answer: 2 },
 
  // Skeletal System
  { id: 13, section: "Skeletal System", question: "Which type of bone marrow produces red blood cells, white blood cells, and platelets?", options: ["Yellow marrow", "Red marrow", "Compact marrow", "Spongy marrow"], answer: 1 },
  { id: 14, section: "Skeletal System", question: "What is the epiphyseal (growth) plate?", options: ["The dense outer layer of bone", "The hollow space in the diaphysis", "An area of cartilage near the epiphysis where bone grows in length", "The fibrous membrane covering bone"], answer: 2 },
  { id: 15, section: "Skeletal System", question: "What type of joint allows motion in only one plane (like your elbow)?", options: ["Ball and Socket", "Gliding/Sliding", "Pivot", "Hinge"], answer: 3 },
  { id: 16, section: "Skeletal System", question: "Osteoblasts and Osteoclasts are best described as:", options: ["Cells that produce bone marrow", "Cells that deposit minerals (osteoblasts) and dissolve minerals (osteoclasts)", "Cells found only in spongy bone", "Red and white bone marrow cells respectively"], answer: 1 },
  { id: 17, section: "Skeletal System", question: "What bone forms the shaft of a long bone?", options: ["Epiphysis", "Periosteum", "Diaphysis", "Cartilage"], answer: 2 },
 
  // Muscular System
  { id: 18, section: "Muscular System", question: "Which type of muscle is found in the heart?", options: ["Smooth", "Skeletal", "Cardiac", "Voluntary"], answer: 2 },
  { id: 19, section: "Muscular System", question: "What is the difference between voluntary and involuntary muscles?", options: ["Voluntary muscles work automatically; involuntary muscles require conscious effort", "Voluntary muscles are under conscious control; involuntary muscles are not", "Voluntary muscles are only in the heart; involuntary muscles are in the limbs", "There is no functional difference"], answer: 1 },
  { id: 20, section: "Muscular System", question: "In an antagonistic muscle pair, what is the role of the flexor?", options: ["Straightens a part of the body", "Connects muscle to bone", "Bends a part of the body", "Connects bone to bone"], answer: 2 },
  { id: 21, section: "Muscular System", question: "What connects muscle to bone?", options: ["Ligament", "Cartilage", "Tendon", "Periosteum"], answer: 2 },
 
  // Integumentary System
  { id: 22, section: "Integumentary System", question: "Which layer of the integumentary system is the outermost?", options: ["Dermis", "Subcutaneous tissue", "Hypodermis", "Epidermis"], answer: 3 },
  { id: 23, section: "Integumentary System", question: "What is the function of sebaceous glands?", options: ["Produce sweat to cool the body", "Produce sebum (oil)", "Make hair grow", "Sense temperature"], answer: 1 },
  { id: 24, section: "Integumentary System", question: "What gives skin its color?", options: ["Keratin", "Sebum", "Melanin", "Collagen"], answer: 2 },
  { id: 25, section: "Integumentary System", question: "What is the function of the Arrector Pili?", options: ["Produces melanin", "Secretes sweat", "Miniature muscles responsible for shivering/goosebumps", "Removes dead skin cells"], answer: 2 },
 
  // Cardiovascular System
  { id: 26, section: "Cardiovascular System", question: "Blood type is determined by:", options: ["Antibodies found in plasma", "Antigens found on the surface of red blood cells", "The type of white blood cells present", "Hemoglobin levels"], answer: 1 },
  { id: 27, section: "Cardiovascular System", question: "Which blood type is the universal donor?", options: ["AB", "A", "B", "O"], answer: 3 },
  { id: 28, section: "Cardiovascular System", question: "After leaving the lungs, blood travels to the:", options: ["Right atrium", "Right ventricle", "Left atrium", "Aorta"], answer: 2 },
  { id: 29, section: "Cardiovascular System", question: "What component of blood is responsible for clotting?", options: ["Plasma", "RBCs", "WBCs", "Platelets"], answer: 3 },
  { id: 30, section: "Cardiovascular System", question: "Where are antigens found and where are antibodies found?", options: ["Antigens in plasma; antibodies on RBCs", "Antigens on RBC surface; antibodies in plasma", "Both found in bone marrow", "Both found on white blood cells"], answer: 1 },
 
  // Lymphatic System
  { id: 31, section: "Lymphatic System", question: "What are the two main functions of the lymphatic system?", options: ["Pump blood and filter waste", "Collect lymph and help fight pathogens", "Produce hormones and regulate temperature", "Absorb nutrients and produce enzymes"], answer: 1 },
  { id: 32, section: "Lymphatic System", question: "Which white blood cells engulf and destroy pathogens?", options: ["B Cells", "T Cells", "Phagocytes", "Helper T Cells"], answer: 2 },
  { id: 33, section: "Lymphatic System", question: "B Cells are responsible for:", options: ["Killing cells that display a specific antigen", "Producing antibodies", "Engulfing pathogens", "Recognizing antigens and activating other immune cells"], answer: 1 },
 
  // Respiratory System
  { id: 34, section: "Respiratory System", question: "Where does gas exchange occur in the lungs?", options: ["Bronchi", "Bronchioles", "Trachea", "Alveoli"], answer: 3 },
  { id: 35, section: "Respiratory System", question: "What muscle controls breathing?", options: ["Pectoralis major", "Diaphragm", "Intercostal muscle", "Trapezius"], answer: 1 },
  { id: 36, section: "Respiratory System", question: "Why do cells need oxygen?", options: ["To produce melanin", "To create ATP through cellular respiration", "To synthesize proteins", "To filter waste from blood"], answer: 1 },
  { id: 37, section: "Respiratory System", question: "What is the correct pathway of air from outside the body to the alveoli?", options: ["Nose → Larynx → Pharynx → Trachea → Bronchi → Bronchioles → Alveoli", "Nose → Pharynx → Larynx → Trachea → Bronchi → Bronchioles → Alveoli", "Mouth → Trachea → Pharynx → Bronchi → Alveoli", "Nose → Trachea → Pharynx → Bronchioles → Alveoli"], answer: 1 },
 
  // Digestive System
  { id: 38, section: "Digestive System", question: "Where does most chemical digestion and nutrient absorption occur?", options: ["Stomach", "Large intestine", "Small intestine", "Mouth"], answer: 2 },
  { id: 39, section: "Digestive System", question: "Where does water absorption primarily occur?", options: ["Small intestine", "Stomach", "Esophagus", "Large intestine"], answer: 3 },
  { id: 40, section: "Digestive System", question: "Which organ performs both mechanical and chemical digestion through churning?", options: ["Mouth", "Esophagus", "Stomach", "Pancreas"], answer: 2 },
 
  // Urinary System
  { id: 41, section: "Urinary System", question: "What is the basic functional unit of the kidney?", options: ["Glomerulus", "Nephron", "Ureter", "Renal vein"], answer: 1 },
  { id: 42, section: "Urinary System", question: "Which blood vessel brings blood TO the kidney?", options: ["Renal vein", "Pulmonary artery", "Renal artery", "Inferior vena cava"], answer: 2 },
  { id: 43, section: "Urinary System", question: "Which systems help remove waste from the body? (select best answer)", options: ["Urinary only", "Digestive and cardiovascular", "Urinary, lymphatic, digestive, and integumentary", "Respiratory and nervous"], answer: 2 },
 
  // Nervous System
  { id: 44, section: "Nervous System", question: "What are the two main subdivisions of the nervous system?", options: ["Sensory and Motor", "Voluntary and Involuntary", "Central Nervous System and Peripheral Nervous System", "Brain and Spinal Cord"], answer: 2 },
  { id: 45, section: "Nervous System", question: "What is the function of the cerebellum?", options: ["Controls breathing and heart rate", "Handles higher thinking and decision making", "Coordinates movement and balance", "Regulates hormones"], answer: 2 },
  { id: 46, section: "Nervous System", question: "What is a reflex arc?", options: ["A conscious decision to move", "The pathway of a nerve impulse", "The reflex to do something immediately without conscious thought", "A bundle of neurons"], answer: 2 },
 
  // Endocrine System
  { id: 47, section: "Endocrine System", question: "How does the endocrine system differ from the nervous system?", options: ["It uses electrical signals and neurons", "It uses chemical messages (hormones) and metabolism rather than electrical signals and neurons", "It is faster than the nervous system", "It controls voluntary muscle movement"], answer: 1 },
  { id: 48, section: "Endocrine System", question: "Why is the pituitary gland called the 'master gland'?", options: ["It is the largest endocrine gland", "It is located in the brain", "It controls the other endocrine glands", "It produces the most hormones"], answer: 2 },
 
  // Immune System
  { id: 49, section: "Immune System", question: "What is the difference between innate and adaptive immunity?", options: ["Innate is specific; adaptive is general", "Innate is activated by chemical properties of antigens (non-specific); adaptive is antigen-specific and slower", "They are the same thing", "Adaptive immunity is present from birth; innate is learned"], answer: 1 },
  { id: 50, section: "Immune System", question: "What body structure provides the greatest barrier to infection?", options: ["The lymph nodes", "The white blood cells", "The skin", "The spleen"], answer: 2 },
  { id: 51, section: "Immune System", question: "Which of the following is an example of a non-infectious disease?", options: ["COVID-19", "Influenza", "Hemophilia", "Chicken pox"], answer: 2 },
 
  // Reproductive System
  { id: 52, section: "Reproductive System", question: "What is the difference between mitosis and meiosis?", options: ["Mitosis produces gametes; meiosis produces identical cells", "Mitosis results in two identical cells; meiosis is specialized division that produces gametes", "They are the same process", "Meiosis produces body cells; mitosis produces sex cells"], answer: 1 },
  { id: 53, section: "Reproductive System", question: "What is fertilization?", options: ["The release of a mature egg from the ovary", "The process in which a sperm joins an egg", "The implantation of a zygote", "The development of a fetus"], answer: 1 },
  { id: 54, section: "Reproductive System", question: "What is a zygote?", options: ["A mature egg cell", "A sperm cell ready to fertilize", "The single cell formed by fertilization", "An embryo after 9 weeks"], answer: 2 },
];
 
const SECTION_COLORS = {
  "Cell Structure & Function": "#4ade80",
  "Body Organization": "#60a5fa",
  "Skeletal System": "#f59e0b",
  "Muscular System": "#f87171",
  "Integumentary System": "#a78bfa",
  "Cardiovascular System": "#fb7185",
  "Lymphatic System": "#34d399",
  "Respiratory System": "#38bdf8",
  "Digestive System": "#fbbf24",
  "Urinary System": "#818cf8",
  "Nervous System": "#e879f9",
  "Endocrine System": "#2dd4bf",
  "Immune System": "#fb923c",
  "Reproductive System": "#f472b6",
};
 
export default function BioExam() {
  const [started, setStarted] = useState(false);
  const [answers, setAnswers] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [current, setCurrent] = useState(0);
  const [showReview, setShowReview] = useState(false);
  const [timeLeft, setTimeLeft] = useState(54 * 60);
 
  useEffect(() => {
    if (!started || submitted) return;
    const t = setInterval(() => setTimeLeft(s => {
      if (s <= 1) { clearInterval(t); setSubmitted(true); return 0; }
      return s - 1;
    }), 1000);
    return () => clearInterval(t);
  }, [started, submitted]);
 
  const formatTime = s => `${String(Math.floor(s/60)).padStart(2,'0')}:${String(s%60).padStart(2,'0')}`;
  const score = questions.filter(q => answers[q.id] === q.answer).length;
  const pct = Math.round((score / questions.length) * 100);
 
  const grade = pct >= 90 ? "A" : pct >= 80 ? "B" : pct >= 70 ? "C" : pct >= 60 ? "D" : "F";
  const gradeColor = pct >= 90 ? "#4ade80" : pct >= 80 ? "#60a5fa" : pct >= 70 ? "#fbbf24" : "#f87171";
 
  if (!started) return (
    <div style={styles.cover}>
      <div style={styles.coverInner}>
        <div style={styles.badge}>BIOLOGY 6 COMP</div>
        <h1 style={styles.coverTitle}>Mock Comprehensive Exam</h1>
        <p style={styles.coverSub}>54 questions · 14 systems · 54 minutes</p>
        <div style={styles.sectionGrid}>
          {Object.entries(SECTION_COLORS).map(([s,c]) => (
            <span key={s} style={{...styles.sectionPill, background: c + "22", color: c, borderColor: c + "44"}}>{s}</span>
          ))}
        </div>
        <button style={styles.startBtn} onClick={() => setStarted(true)}>Begin Exam →</button>
        <p style={styles.coverNote}>Timer starts when you begin. Select the best answer for each question.</p>
      </div>
    </div>
  );
 
  if (submitted) {
    const wrong = questions.filter(q => answers[q.id] !== q.answer);
    const correct = questions.filter(q => answers[q.id] === q.answer);
    return (
      <div style={styles.resultsPage}>
        <div style={styles.resultsCard}>
          <div style={{...styles.gradeCircle, borderColor: gradeColor}}>
            <span style={{fontSize: 48, fontWeight: 900, color: gradeColor, fontFamily: "'Georgia', serif"}}>{grade}</span>
            <span style={{fontSize: 14, color: "#94a3b8", marginTop: 2}}>{pct}%</span>
          </div>
          <h2 style={styles.resultsTitle}>{score} / {questions.length} correct</h2>
          <p style={{color: "#94a3b8", fontSize: 14, marginBottom: 24}}>{pct >= 80 ? "Great work! You're ready." : pct >= 70 ? "Almost there — review the sections below." : "Keep studying — focus on the missed topics."}</p>
 
          <div style={styles.reviewToggle}>
            <button style={{...styles.reviewBtn, background: !showReview ? "#3b82f6" : "transparent"}} onClick={() => setShowReview(false)}>Summary</button>
            <button style={{...styles.reviewBtn, background: showReview ? "#3b82f6" : "transparent"}} onClick={() => setShowReview(true)}>Full Review</button>
          </div>
 
          {!showReview ? (
            <div>
              {Object.entries(SECTION_COLORS).map(([sec, col]) => {
                const qs = questions.filter(q => q.section === sec);
                const sc = qs.filter(q => answers[q.id] === q.answer).length;
                const w = Math.round((sc/qs.length)*100);
                return (
                  <div key={sec} style={styles.secRow}>
                    <span style={{color: col, fontSize: 13, flex: 1}}>{sec}</span>
                    <div style={styles.barBg}>
                      <div style={{...styles.barFill, width: `${w}%`, background: col}} />
                    </div>
                    <span style={{color: "#94a3b8", fontSize: 12, width: 40, textAlign: "right"}}>{sc}/{qs.length}</span>
                  </div>
                );
              })}
            </div>
          ) : (
            <div style={{maxHeight: 400, overflowY: "auto", paddingRight: 8}}>
              {questions.map(q => {
                const isCorrect = answers[q.id] === q.answer;
                return (
                  <div key={q.id} style={{...styles.reviewItem, borderLeftColor: isCorrect ? "#4ade80" : "#f87171"}}>
                    <p style={{fontSize: 13, color: "#e2e8f0", marginBottom: 6}}><strong>Q{q.id}.</strong> {q.question}</p>
                    {!isCorrect && answers[q.id] !== undefined && (
                      <p style={{fontSize: 12, color: "#f87171"}}>Your answer: {q.options[answers[q.id]]}</p>
                    )}
                    {!isCorrect && (
                      <p style={{fontSize: 12, color: "#4ade80"}}>✓ Correct: {q.options[q.answer]}</p>
                    )}
                    {isCorrect && <p style={{fontSize: 12, color: "#4ade80"}}>✓ Correct!</p>}
                  </div>
                );
              })}
            </div>
          )}
 
          <button style={{...styles.startBtn, marginTop: 24}} onClick={() => { setAnswers({}); setSubmitted(false); setCurrent(0); setTimeLeft(54*60); }}>Retake Exam</button>
        </div>
      </div>
    );
  }
 
  const q = questions[current];
  const answered = Object.keys(answers).length;
  const col = SECTION_COLORS[q.section];
 
  return (
    <div style={styles.examPage}>
      {/* Header */}
      <div style={styles.header}>
        <span style={styles.headerTitle}>Biology 6 Comp</span>
        <span style={{...styles.timer, color: timeLeft < 300 ? "#f87171" : "#e2e8f0"}}>⏱ {formatTime(timeLeft)}</span>
        <span style={styles.headerProg}>{answered}/{questions.length} answered</span>
      </div>
 
      {/* Progress bar */}
      <div style={styles.progressBg}>
        <div style={{...styles.progressFill, width: `${((current+1)/questions.length)*100}%`, background: col}} />
      </div>
 
      <div style={styles.examBody}>
        {/* Section tag */}
        <div style={{...styles.sectionTag, background: col + "22", color: col, borderColor: col + "55"}}>
          {q.section}
        </div>
 
        <p style={styles.qNum}>Question {current + 1} of {questions.length}</p>
        <h2 style={styles.qText}>{q.question}</h2>
 
        <div style={styles.optionsList}>
          {q.options.map((opt, i) => {
            const sel = answers[q.id] === i;
            return (
              <button key={i} style={{...styles.option, borderColor: sel ? col : "#334155", background: sel ? col + "22" : "transparent", color: sel ? col : "#cbd5e1"}}
                onClick={() => setAnswers(p => ({...p, [q.id]: i}))}>
                <span style={{...styles.optLetter, background: sel ? col : "#1e293b", color: sel ? "#0f172a" : "#94a3b8"}}>
                  {["A","B","C","D"][i]}
                </span>
                {opt}
              </button>
            );
          })}
        </div>
 
        <div style={styles.navRow}>
          <button style={styles.navBtn} disabled={current === 0} onClick={() => setCurrent(c => c-1)}>← Prev</button>
          <div style={styles.dotRow}>
            {questions.map((_, i) => (
              <div key={i} onClick={() => setCurrent(i)} style={{...styles.dot,
                background: answers[questions[i].id] !== undefined ? SECTION_COLORS[questions[i].section] : current === i ? "#475569" : "#1e293b",
                transform: current === i ? "scale(1.4)" : "scale(1)",
                cursor: "pointer"
              }} />
            ))}
          </div>
          {current < questions.length - 1
            ? <button style={{...styles.navBtn, background: col, color: "#0f172a"}} onClick={() => setCurrent(c => c+1)}>Next →</button>
            : <button style={{...styles.navBtn, background: "#4ade80", color: "#0f172a"}} onClick={() => setSubmitted(true)}>Submit ✓</button>
          }
        </div>
      </div>
    </div>
  );
}
 
const styles = {
  cover: { minHeight: "100vh", background: "#0a0f1e", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, fontFamily: "'Georgia', serif" },
  coverInner: { maxWidth: 640, width: "100%", textAlign: "center" },
  badge: { display: "inline-block", background: "#1e293b", color: "#60a5fa", fontSize: 11, letterSpacing: 3, padding: "6px 16px", borderRadius: 20, marginBottom: 20, textTransform: "uppercase", fontFamily: "monospace" },
  coverTitle: { fontSize: 38, fontWeight: 900, color: "#f1f5f9", margin: "0 0 8px", lineHeight: 1.1, fontFamily: "'Georgia', serif" },
  coverSub: { color: "#64748b", fontSize: 15, marginBottom: 28, fontFamily: "monospace" },
  sectionGrid: { display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "center", marginBottom: 32 },
  sectionPill: { fontSize: 11, padding: "4px 10px", borderRadius: 12, border: "1px solid", fontFamily: "monospace" },
  startBtn: { background: "#3b82f6", color: "#fff", border: "none", padding: "14px 40px", borderRadius: 8, fontSize: 16, fontWeight: 700, cursor: "pointer", fontFamily: "'Georgia', serif" },
  coverNote: { color: "#475569", fontSize: 12, marginTop: 16, fontFamily: "monospace" },
 
  examPage: { minHeight: "100vh", background: "#0a0f1e", display: "flex", flexDirection: "column", fontFamily: "'Georgia', serif" },
  header: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 20px", background: "#0f172a", borderBottom: "1px solid #1e293b" },
  headerTitle: { color: "#60a5fa", fontWeight: 700, fontSize: 15, fontFamily: "monospace" },
  timer: { fontSize: 18, fontWeight: 700, fontFamily: "monospace", letterSpacing: 2 },
  headerProg: { color: "#475569", fontSize: 13, fontFamily: "monospace" },
  progressBg: { height: 3, background: "#1e293b" },
  progressFill: { height: "100%", transition: "width 0.3s ease" },
  examBody: { flex: 1, maxWidth: 680, margin: "0 auto", padding: "28px 20px", width: "100%" },
  sectionTag: { display: "inline-block", fontSize: 11, padding: "4px 12px", borderRadius: 12, border: "1px solid", marginBottom: 16, fontFamily: "monospace", letterSpacing: 1 },
  qNum: { color: "#475569", fontSize: 12, fontFamily: "monospace", marginBottom: 8 },
  qText: { color: "#f1f5f9", fontSize: 19, fontWeight: 700, lineHeight: 1.4, marginBottom: 28 },
  optionsList: { display: "flex", flexDirection: "column", gap: 12 },
  option: { display: "flex", alignItems: "flex-start", gap: 14, padding: "14px 16px", borderRadius: 10, border: "1px solid", cursor: "pointer", textAlign: "left", fontSize: 14, lineHeight: 1.5, transition: "all 0.15s ease" },
  optLetter: { minWidth: 28, height: 28, borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 700, fontFamily: "monospace", flexShrink: 0 },
  navRow: { display: "flex", alignItems: "center", gap: 16, marginTop: 32, justifyContent: "space-between" },
  navBtn: { padding: "10px 20px", borderRadius: 8, border: "1px solid #334155", background: "#1e293b", color: "#94a3b8", cursor: "pointer", fontSize: 14, fontWeight: 600 },
  dotRow: { display: "flex", flexWrap: "wrap", gap: 4, justifyContent: "center", flex: 1, maxWidth: 340 },
  dot: { width: 8, height: 8, borderRadius: "50%", transition: "all 0.2s ease" },
 
  resultsPage: { minHeight: "100vh", background: "#0a0f1e", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, fontFamily: "'Georgia', serif" },
  resultsCard: { maxWidth: 600, width: "100%", background: "#0f172a", borderRadius: 16, padding: "32px 28px", border: "1px solid #1e293b" },
  gradeCircle: { width: 100, height: 100, borderRadius: "50%", border: "4px solid", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", margin: "0 auto 20px" },
  resultsTitle: { color: "#f1f5f9", fontSize: 24, fontWeight: 700, textAlign: "center", marginBottom: 6 },
  reviewToggle: { display: "flex", gap: 4, background: "#1e293b", borderRadius: 8, padding: 4, marginBottom: 20 },
  reviewBtn: { flex: 1, padding: "8px", borderRadius: 6, border: "none", color: "#f1f5f9", cursor: "pointer", fontSize: 13, fontWeight: 600, transition: "background 0.2s" },
  secRow: { display: "flex", alignItems: "center", gap: 12, marginBottom: 10 },
  barBg: { flex: 1, height: 6, background: "#1e293b", borderRadius: 3, overflow: "hidden" },
  barFill: { height: "100%", borderRadius: 3, transition: "width 0.5s ease" },
  reviewItem: { borderLeft: "3px solid", paddingLeft: 12, marginBottom: 16, paddingBottom: 12, borderBottom: "1px solid #1e293b" },
};