import argv
import gleam/io
import gleam/http/response
import gleam/http/request.{type Request}
import mist.{type ResponseData}
import flashsync_native
import gleam/bytes_tree
import gleam/list
import gleam/float
import gleam/int
import gleam/option
import gleam/string
import sm2_algorithm
import ai_tutor
import neural_heatmap
import ocr_service
import multiplayer
import biometric_tracker
import time_travel
import exam_generator
import ghost_writing

const app_version = "2.7.0"

pub fn main() {
  flashsync_native.load()
  case argv.load().arguments {
    ["serve"] -> {
      let port = 8080
      io.println("FlashSync Learning Platform Online | http://0.0.0.0:" <> int.to_string(port))
      io.println("Features Loaded:")
      io.println("  - AI Tutor with File Upload")
      io.println("  - PDF Export & Print Mode")
      io.println("  - Spaced Repetition (SM-2)")
      io.println("  - Neural Knowledge Heatmap")
      io.println("  - Practice Question Generator")
      io.println("  - Mock Exams with Grading")
      io.println("  - Biometric Focus Tracking")
      io.println("  - Time-Travel Learning Timeline")
      io.println("  - Drawing & Ghost Writing Mode")
      io.println("  - 8 Language Support")
      io.println("  - Subscription Plans")
      io.println("  - File Storage & Preview")
      io.println("  - Command Center Intelligence")
      io.println("FlashSync Version: " <> app_version)
      let assert Ok(_) = mist.new(handle_request) |> mist.bind("0.0.0.0") |> mist.port(port) |> mist.start
      process.sleep_forever()
    }
    _ -> io.println("Usage: flashsync serve")
  }
}

fn handle_request(req: Request(mist.Connection)) -> response.Response(ResponseData) {
  let path = request.path_segments(req)
  
  case path {
    // Core Card Operations
    ["api", "save", id, body] -> {
      let _ = flashsync_native.save_card(id, body)
      json_response("{\"status\": \"saved\", \"id\": \"" <> id <> "\"}")
    }
    ["api", "card", id] -> {
      let card_data = flashsync_native.get_card(id)
      json_response(card_data)
    }
    ["api", "create_card", id, question, answer] -> {
      let _ = flashsync_native.save_card(id, question <> "|||" <> answer)
      json_response("{\"status\": \"created\", \"id\": \"" <> id <> "\"}")
    }
    
    // SM-2 Spaced Repetition
    ["api", "review", _id, grade] -> {
      let grade_val = case grade {
        "0" -> sm2_algorithm.Incorrect
        "1" -> sm2_algorithm.Difficult
        "2" -> sm2_algorithm.Complete
        "3" -> sm2_algorithm.Acceptable
        "4" -> sm2_algorithm.Easy
        _ -> sm2_algorithm.Perfect
      }
      let initial = sm2_algorithm.initial_state()
      let updated = sm2_algorithm.calculate_next_review(initial, grade_val)
      let response_text = "{\"next_review\": \"" <> updated.next_review_date <> "\", \"mastery\": " <> float.to_string(sm2_algorithm.calculate_mastery_percentage(updated)) <> "}"
      json_response(response_text)
    }
    
    // AI Tutor
    ["api", "tutor", "ask"] -> {
      let response_msg = ai_tutor.get_comprehensive_welcome("Student")
      json_response("{\"response\": \"" <> response_msg <> "\"}")
    }
    ["api", "tutor", "analyze_file"] -> {
      json_response("{\"status\": \"ready\", \"message\": \"Upload a PDF, image, or document for AI analysis\"}")
    }
    
    // Neural Heatmap
    ["api", "heatmap"] -> {
      let cards = [
        #("card_1", "Quantum Mechanics", 85.0),
        #("card_2", "Linear Algebra", 72.0),
        #("card_3", "Thermodynamics", 63.0),
        #("card_4", "Organic Chemistry", 91.0),
        #("card_5", "Differential Equations", 45.0),
      ]
      let map = neural_heatmap.build_constellation(cards)
      let svg = neural_heatmap.generate_svg_constellation(map)
      let analytics = neural_heatmap.calculate_heatmap_analytics(map)
      json_response("{\"svg\": \"" <> svg <> "\", \"analytics\": \"" <> analytics <> "\"}")
    }
    
    // OCR
    ["api", "ocr", "process"] -> {
      let ocr_result = ocr_service.OcrSuccess(
        text: "Successfully extracted handwritten text from sketch",
        confidence: 0.92,
        metadata: ocr_service.OcrMetadata(
          language: "en",
          character_count: 45,
          word_count: 8,
          confidence_per_line: [0.95, 0.90, 0.89],
        ),
      )
      let formatted = ocr_service.format_ocr_output(ocr_result)
      json_response("{\"result\": \"" <> formatted <> "\"}")
    }
    
    // Multiplayer
    ["api", "multiplayer", "create"] -> {
      let _session = multiplayer.create_session("room_2026_03", "Advanced Biology Study")
      json_response("{\"room_id\": \"room_2026_03\", \"name\": \"Advanced Biology Study\"}")
    }
    ["api", "multiplayer", "join"] -> {
      let session = multiplayer.create_session("room_2026_03", "Advanced Biology Study")
      let with_user = multiplayer.add_participant(session, "usr_001", "Alice")
      let svg_space = multiplayer.generate_svg_focus_space(with_user)
      json_response("{\"participants\": 1, \"focus_space\": \"" <> svg_space <> "\"}")
    }
    
    // Biometric
    ["api", "biometric", "track"] -> {
      let data = biometric_tracker.BiometricData(
        timestamp: 1710841800,
        eye_gaze_x: 400.0,
        eye_gaze_y: 300.0,
        head_posture: biometric_tracker.Upright,
        blink_rate: 18.0,
        pupil_size: 5.2,
        attention_score: 0.88,
        is_user_present: True,
      )
      let metrics = biometric_tracker.monitor_focus_stream(data, option.None)
      let music = biometric_tracker.get_neural_audio_instruction(metrics)
      json_response("{\"focus_score\": " <> float.to_string(metrics.current_focus_score) <> ", \"music\": \"" <> music <> "\"}")
    }
    
    // Time-Travel
    ["api", "timetravel", "snapshots"] -> {
      let snapshots = [
        time_travel.KnowledgeSnapshot(
          timestamp: "2026-02-15T00:00:00Z",
          card_id: "card_1",
          question: "What is quantum superposition?",
          answer: "A quantum system existing in multiple states...",
          mastery_level: 45.0,
          is_mastered: False,
        ),
        time_travel.KnowledgeSnapshot(
          timestamp: "2026-03-19T00:00:00Z",
          card_id: "card_1",
          question: "What is quantum superposition?",
          answer: "A quantum system existing in multiple states...",
          mastery_level: 85.0,
          is_mastered: True,
        ),
      ]
      let timelapse = time_travel.build_timelapse(snapshots)
      let viz = time_travel.generate_growth_visualization(timelapse)
      json_response("{\"visualization\": \"" <> viz <> "\", \"growth\": " <> float.to_string(timelapse.total_growth) <> "}")
    }
    
    // Exam
    ["api", "exam", "generate"] -> {
      let cards = [
        #("card_1", "Define photosynthesis", "Process by which plants convert light to chemical energy"),
        #("card_2", "What is ATP?", "Adenosine triphosphate, cellular energy molecule"),
        #("card_3", "Explain mitochondria function", "Powerhouse of the cell, produces ATP"),
      ]
      let exam = exam_generator.generate_mock_exam("Biology 101", cards, 5, "medium")
      let _pdf = exam_generator.generate_pdf_exam(exam)
      json_response("{\"exam_id\": \"" <> exam.exam_id <> "\", \"questions\": " <> int.to_string(list.length(exam.questions)) <> ", \"duration\": " <> int.to_string(exam.duration_minutes) <> "}")
    }
    
    // Ghost Writing
    ["api", "ghost_writing", "start"] -> {
      let session = ghost_writing.start_ghost_writing_session("https://example.com/heart_diagram.png")
      json_response("{\"session_id\": \"" <> session.session_id <> "\", \"canvas\": \"" <> ghost_writing.create_drawing_canvas_html() <> "\"}")
    }
    ["api", "ghost_writing", "submit"] -> {
      let strokes = []
      let score = ghost_writing.calculate_similarity(strokes, "reference.png")
      json_response("{\"score\": " <> float.to_string(score.overall_score) <> ", \"structural\": " <> float.to_string(score.structural_accuracy) <> "}")
    }
    
    // YouTube to Study Materials
    ["api", "youtube", "convert", video_id] -> {
      json_response("{\"status\": \"processing\", \"video_id\": \"" <> video_id <> "\", \"message\": \"Extracting transcript and generating flashcards...\"}")
    }
    ["api", "pulse", "overview"] -> json_response(build_pulse_overview_json())
    ["api", "coach", "mission"] -> json_response(build_coach_mission_json("general", "scholar"))
    ["api", "coach", "mission", domain, level] -> json_response(build_coach_mission_json(domain, level))
    ["api", "exam", "blitz", difficulty] -> json_response(build_exam_blitz_json(difficulty))
    ["api", "system", "health"] -> json_response(build_system_health_json())
    
    // UI Pages
    [] -> render_ui("login", "")
    ["hub"] -> render_ui("hub", "")
    ["calendar"] -> render_ui("calendar", "")
    ["sketch"] -> render_ui("sketch", "")
    ["library"] -> render_ui("library", "")
    ["tutor"] -> render_ui("tutor", "")
    ["analytics"] -> render_ui("analytics", "")
    ["heatmap"] -> render_ui("heatmap", "")
    ["multiplayer"] -> render_ui("multiplayer", "")
    ["biometric"] -> render_ui("biometric", "")
    ["timetravel"] -> render_ui("timetravel", "")
    ["exam"] -> render_ui("exam", "")
    ["ghostwriting"] -> render_ui("ghostwriting", "")
    ["settings"] -> render_ui("settings", "")
    ["education"] -> render_ui("education", "")
    ["ai-solver"] -> render_ui("ai-solver", "")
    ["study-tools"] -> render_ui("study-tools", "")
    ["flashcards"] -> render_ui("flashcards", "")
    ["pdf-export"] -> render_ui("pdf-export", "")
    ["practice"] -> render_ui("practice", "")
    ["subscriptions"] -> render_ui("subscriptions", "")
    ["file-manager"] -> render_ui("file-manager", "")
    ["blog"] -> render_ui("blog", "")
    ["youtube"] -> render_ui("youtube", "")
    ["command-center"] -> render_ui("command-center", "")
    
    _ -> render_ui("404", "")
  }
}

fn json_response(json: String) -> response.Response(ResponseData) {
  response.new(200)
  |> response.set_header("content-type", "application/json")
  |> response.set_body(mist.Bytes(bytes_tree.from_string(json)))
}

fn sample_mastery_cards() -> List(#(String, String, Float)) {
  [
    #("card_1", "Quantum Mechanics", 85.0),
    #("card_2", "Linear Algebra", 72.0),
    #("card_3", "Thermodynamics", 63.0),
    #("card_4", "Organic Chemistry", 91.0),
    #("card_5", "Differential Equations", 45.0),
  ]
}

fn sample_focus_metrics() -> biometric_tracker.FocusMetrics {
  let previous = biometric_tracker.BiometricData(
    timestamp: 1710841700,
    eye_gaze_x: 390.0,
    eye_gaze_y: 320.0,
    head_posture: biometric_tracker.Upright,
    blink_rate: 16.0,
    pupil_size: 5.0,
    attention_score: 0.83,
    is_user_present: True,
  )

  let current = biometric_tracker.BiometricData(
    timestamp: 1710841800,
    eye_gaze_x: 400.0,
    eye_gaze_y: 300.0,
    head_posture: biometric_tracker.Upright,
    blink_rate: 18.0,
    pupil_size: 5.2,
    attention_score: 0.88,
    is_user_present: True,
  )

  biometric_tracker.monitor_focus_stream(current, option.Some(previous))
}

fn first_three_topics(topics: List(String)) -> #(String, String, String) {
  case topics {
    [a, b, c, .._] -> #(a, b, c)
    [a, b] -> #(a, b, "Revision Sprint")
    [a] -> #(a, "Concept Linking", "Revision Sprint")
    [] -> #("Differential Equations", "Thermodynamics", "Concept Linking")
  }
}

fn parse_domain(domain: String) -> #(ai_tutor.SubjectDomain, String) {
  case string.lowercase(domain) {
    "medicine" -> #(ai_tutor.Medicine, "Medicine")
    "computer" | "computerscience" | "cs" -> #(ai_tutor.ComputerScience, "Computer Science")
    "math" | "mathematics" -> #(ai_tutor.Mathematics, "Mathematics")
    "law" -> #(ai_tutor.Law, "Law")
    _ -> #(ai_tutor.GeneralStudies, "General Studies")
  }
}

fn parse_level(level: String) -> #(ai_tutor.Difficulty, String) {
  case string.lowercase(level) {
    "initiate" | "easy" -> #(ai_tutor.Initiate, "Initiate")
    "scholar" | "medium" -> #(ai_tutor.Scholar, "Scholar")
    "master" | "hard" -> #(ai_tutor.Master, "Master")
    "zenith" | "expert" -> #(ai_tutor.Zenith, "Zenith")
    _ -> #(ai_tutor.Scholar, "Scholar")
  }
}

fn build_pulse_overview_json() -> String {
  let map = neural_heatmap.build_constellation(sample_mastery_cards())
  let metrics = sample_focus_metrics()
  let recommendations = neural_heatmap.recommend_next_topics(map)
  let #(r1, r2, r3) = first_three_topics(recommendations)
  let efficiency = ai_tutor.calculate_study_efficiency(240, 168, 90)
  let retention_report = ai_tutor.generate_retention_report(efficiency)
  let schedule = sm2_algorithm.calculate_next_review(sm2_algorithm.initial_state(), sm2_algorithm.Easy)

  "{\"version\": \"" <> app_version <>
    "\", \"total_mastery\": " <> float.to_string(map.total_mastery) <>
    ", \"focus_score\": " <> float.to_string(metrics.current_focus_score) <>
    ", \"focus_trend\": \"" <> metrics.focus_trend <>
    "\", \"study_efficiency\": " <> float.to_string(efficiency) <>
    ", \"retention_report\": \"" <> retention_report <>
    "\", \"next_review_date\": \"" <> schedule.next_review_date <>
    "\", \"recommended_topic_1\": \"" <> r1 <>
    "\", \"recommended_topic_2\": \"" <> r2 <>
    "\", \"recommended_topic_3\": \"" <> r3 <>
    "\"}"
}

fn build_coach_mission_json(domain: String, level: String) -> String {
  let #(subject, subject_label) = parse_domain(domain)
  let #(difficulty, difficulty_label) = parse_level(level)
  let mission_name = subject_label <> " " <> difficulty_label <> " Mission"
  let intent = ai_tutor.parse_detailed_intent("explain differences and test me with deep mechanisms")
  let prompt = ai_tutor.generate_subject_optimized_prompt(
    "Design a 45-minute sprint to improve weak topics and improve retention.",
    subject,
    difficulty,
  )

  "{\"mission_name\": \"" <> mission_name <>
    "\", \"domain\": \"" <> subject_label <>
    "\", \"difficulty\": \"" <> difficulty_label <>
    "\", \"intent\": \"" <> intent <>
    "\", \"prompt\": \"" <> prompt <>
    "\", \"micro_goals\": \"25m deep focus + 10m active recall + 10m synthesis\"}"
}

fn build_exam_blitz_json(difficulty: String) -> String {
  let normalized = case string.lowercase(difficulty) {
    "easy" -> "easy"
    "hard" | "expert" -> "hard"
    _ -> "medium"
  }

  let cards = [
    #("card_1", "Define photosynthesis", "Process by which plants convert light to chemical energy"),
    #("card_2", "What is ATP?", "Adenosine triphosphate, cellular energy molecule"),
    #("card_3", "Explain mitochondria function", "Powerhouse of the cell, produces ATP"),
    #("card_4", "Describe osmosis", "Movement of water across semipermeable membrane"),
    #("card_5", "What is cellular respiration?", "Metabolic pathway that generates ATP"),
  ]

  let exam = exam_generator.generate_mock_exam("Integrated Sciences", cards, 5, normalized)
  let schedule = sm2_algorithm.calculate_next_review(sm2_algorithm.initial_state(), sm2_algorithm.Acceptable)

  "{\"exam_id\": \"" <> exam.exam_id <>
    "\", \"difficulty\": \"" <> normalized <>
    "\", \"question_count\": " <> int.to_string(list.length(exam.questions)) <>
    ", \"duration_minutes\": " <> int.to_string(exam.duration_minutes) <>
    ", \"total_points\": " <> int.to_string(exam.total_points) <>
    ", \"next_review_date\": \"" <> schedule.next_review_date <>
    "\"}"
}

fn build_system_health_json() -> String {
  let map = neural_heatmap.build_constellation(sample_mastery_cards())
  let metrics = sample_focus_metrics()
  let capability = {map.total_mastery +. metrics.current_focus_score +. 92.0} /. 3.0

  "{\"status\": \"healthy\", \"platform\": \"FlashSync\", \"version\": \"" <> app_version <>
    "\", \"capability_index\": " <> float.to_string(capability) <>
    ", \"modules_online\": 12, \"api_ready\": true}"
}

fn render_ui(page: String, _extra_content: String) -> response.Response(ResponseData) {
  let content = case page {
    "login" -> "
//           <h1 class="brand-title">FlashSync</h1>
//           <input type="text" id="user" placeholder="Enter your name" class="modern-input">
//           <button class="primary-button" onclick="login()">Get Started</button>
//             <button onclick="setLanguage(\"en\")" class="lang-icon active">EN</button>
//             <button onclick="setLanguage(\"nl\")" class="lang-icon">NL</button>
//             <button onclick="setLanguage(\"es\")" class="lang-icon">ES</button>
//             <button onclick="setLanguage(\"fr\")" class="lang-icon">FR</button>
//             <button onclick="setLanguage(\"de\")" class="lang-icon">DE</button>
//             <button onclick="setLanguage(\"it\")" class="lang-icon">IT</button>
//             <button onclick="setLanguage(\"pt\")" class="lang-icon">PT</button>
//             <button onclick="setLanguage(\"ja\")" class="lang-icon">JP</button>
//           </div>
//         </div>
//       </div>"
    
    "hub" -> "
//       </div>
      
          <h3>AI Tutor</h3>
//         </div>
        
          <h3>Flashcards</h3>
//         </div>
        
          <h3>Practice</h3>
//         </div>
        
          <h3>PDF Export</h3>
//         </div>
        
          <h3>Knowledge Map</h3>
//         </div>
        
          <h3>Mock Exams</h3>
//         </div>
        
          <h3>My Files</h3>
//         </div>
        
          <h3>Subscription</h3>
//         </div>
//       </div>
      
//         </div>
//         </div>
//         </div>
//         </div>
//       </div>"
    
    "heatmap" -> "
//         <h1>Knowledge Map</h1>
//       </div>
      
//             <button class="filter-btn active" onclick="filterMap(&apos;all&apos;)">All Topics</button>
//             <button class="filter-btn" onclick="filterMap(&apos;strong&apos;)">Strong</button>
//             <button class="filter-btn" onclick="filterMap(&apos;weak&apos;)">Needs Work</button>
//             <button class="filter-btn" onclick="filterMap(&apos;recent&apos;)">Recent</button>
//           </div>
//             <button class="view-btn active" onclick="setMapView(&apos;constellation&apos;)"><i class="fas fa-star"></i> Constellation</button>
//             <button class="view-btn" onclick="setMapView(&apos;grid&apos;)"><i class="fas fa-th"></i> Grid</button>
//             <button class="view-btn" onclick="setMapView(&apos;timeline&apos;)"><i class="fas fa-stream"></i> Timeline</button>
//           </div>
//         </div>
        
          <canvas id="knowledgeCanvas" style="width: 100%; height: 450px; cursor: grab;"></canvas>
//             </div>
//           </div>
//         </div>
//       </div>
      
//           </div>
//         </div>
//           </div>
//         </div>
//           </div>
//         </div>
//       </div>
      
          <h4 style="margin-bottom: 16px;"><i class="fas fa-brain"></i> Learning Insights</h4>
            <i class="fas fa-arrow-trend-up" style="color: var(--success); font-size: 20px;"></i>
              <strong>+23% improvement</strong>
//             </div>
//           </div>
            <i class="fas fa-clock" style="color: var(--primary); font-size: 20px;"></i>
              <strong>Peak learning time</strong>
//             </div>
//           </div>
            <i class="fas fa-fire" style="color: var(--warning); font-size: 20px;"></i>
              <strong>5 day streak!</strong>
//             </div>
//           </div>
//         </div>
        
          <h4 style="margin-bottom: 16px;"><i class="fas fa-bullseye"></i> Recommended Focus</h4>
                <strong>Differential Equations</strong>
//               </div>
//               <button class="mini-btn" onclick="startStudying(&apos;diffeq&apos;)">Study</button>
//             </div>
                <strong>Thermodynamics</strong>
//               </div>
//               <button class="mini-btn" onclick="startStudying(&apos;thermo&apos;)">Study</button>
//             </div>
                <strong>Organic Chemistry</strong>
//               </div>
//               <button class="mini-btn" onclick="startStudying(&apos;organic&apos;)">Review</button>
//             </div>
//           </div>
//         </div>
//       </div>"
    
    "tutor" -> "
//         <h1>AI Tutor</h1>
//       </div>
      
                <ul>
                  <li>Explaining complex concepts</li>
                  <li>Answering questions</li>
                  <li>Analyzing uploaded PDFs and images</li>
                  <li>Generating practice problems</li>
                  <li>Creating study summaries</li>
                </ul>
//               </div>
//             </div>
//           </div>
          
//               <input type="file" id="fileUpload" multiple accept=".pdf,.png,.jpg,.jpeg,.docx,.pptx" style="display: none;">
//               <button class="attach-btn" onclick="document.getElementById(\"fileUpload\").click()"><i class="fas fa-paperclip"></i></button>
//             </div>
//             <input type="text" id="tutorInput" class="chat-input" placeholder="Ask anything or upload a file..." onkeydown="if(event.key===\"Enter\") sendTutorMessage()">
//             <button class="send-btn" onclick="sendTutorMessage()"><i class="fas fa-paper-plane"></i></button>
//           </div>
//         </div>
        
            <h4>Quick Actions</h4>
//             <button class="quick-action" onclick="askTutor(\"Explain photosynthesis\")"><i class="fas fa-leaf"></i> Photosynthesis</button>
//             <button class="quick-action" onclick="askTutor(\"Solve: x² + 5x + 6 = 0\")"><i class="fas fa-calculator"></i> Math Problem</button>
//             <button class="quick-action" onclick="askTutor(\"Generate 5 practice questions\")"><i class="fas fa-question"></i> Practice Questions</button>
//             <button class="quick-action" onclick="askTutor(\"Summarize my last deck\")"><i class="fas fa-compress"></i> Summarize</button>
//           </div>
          
            <h4>Uploaded Files</h4>
//             </div>
//           </div>
//         </div>
//       </div>"
    
    "biometric" -> "
//         <h1>Focus Tracking</h1>
//       </div>
      
          <h3 style="color: var(--success);">88%</h3>
//         </div>
          <h3 style="color: var(--primary);">18.4</h3>
//         </div>
          <h3 style="color: var(--secondary);">Good</h3>
//         </div>
          <h3 style="color: var(--accent);">140 BPM</h3>
//         </div>
//       </div>"
    
    "multiplayer" -> "
//         <h1>Study Rooms</h1>
//       </div>
      
//       </div>"
    
    "ghostwriting" -> "
//         <h1>Drawing Practice</h1>
//       </div>
      
          <h4>Reference Image</h4>
          <canvas id="ghostCanvas" width="350" height="350" style="background: var(--bg-dark); border-radius: 10px; width: 100%;"></canvas>
//         </div>
          <h4>Your Drawing</h4>
          <canvas id="userCanvas" width="350" height="350" style="background: var(--bg-dark); border-radius: 10px; width: 100%; cursor: crosshair;"></canvas>
//         </div>
//       </div>
//         <button class="secondary-button" onclick="clearCanvas()">Clear</button>
//         <button class="primary-button" onclick="submitDrawing()" style="flex: 1;">Submit & Score</button>
//       </div>"
    
    "timetravel" -> "
//         <h1>Learning Timeline</h1>
//       </div>
      
        <h3>Your Progress</h3>
//         </div>
//       </div>"
    
    "exam" -> "
//         <h1>Mock Exams</h1>
//       </div>
      
          <h4>Biology 101</h4>
//           <button class="primary-button" style="width: 100%; margin-top: 16px;">Start Exam</button>
//         </div>
          <h4>Chemistry Fundamentals</h4>
//           <button class="primary-button" style="width: 100%; margin-top: 16px;">Start Exam</button>
//         </div>
//       </div>"
    
    "analytics" -> "
//         <h1>Analytics</h1>
//       </div>
      
          <h4 style="color: var(--primary);">85.2%</h4>
//         </div>
          <h4 style="color: var(--success);">88 min</h4>
//         </div>
          <h4 style="color: var(--secondary);">142</h4>
//         </div>
          <h4 style="color: var(--accent);">94.2%</h4>
//         </div>
//       </div>"

    "command-center" -> "
//         <h1>Command Center</h1>
//       </div>

          <h3><i class="fas fa-satellite-dish"></i> Live Intelligence Pulse</h3>
//           <button class="primary-button" onclick="fetch(\"/api/pulse/overview\").then(r => r.json()).then(d => alert(\"Focus: \" + d.focus_score + \"% | Mastery: \" + d.total_mastery + \"% | Next Review: \" + d.next_review_date))">Run Pulse Scan</button>
//         </div>
          <h3><i class="fas fa-chess-knight"></i> Adaptive Coach Mission</h3>
//           <button class="accent-button" onclick="fetch(\"/api/coach/mission/computerscience/master\").then(r => r.json()).then(d => alert(d.mission_name + \"\\n\\n\" + d.intent + \"\\n\\n\" + d.prompt))">Generate Mission</button>
//         </div>
//       </div>

        <h3><i class="fas fa-bolt"></i> Blitz Exam Generator</h3>
//         <button class="success-button" onclick="fetch(\"/api/exam/blitz/medium\").then(r => r.json()).then(d => alert(\"Exam ID: \" + d.exam_id + \" | Questions: \" + d.question_count + \" | Duration: \" + d.duration_minutes + \" min\"))">Create Blitz Exam</button>
//       </div>"
    
    "flashcards" -> "
//         <h1>Flashcard Vault</h1>
//       </div>
      
//         <button class="primary-button" onclick="createDeck()"><i class="fas fa-plus"></i> New Deck</button>
//         <button class="secondary-button" onclick="importDeck()"><i class="fas fa-file-import"></i> Import</button>
//         <button class="accent-button" onclick="exportAllPDF()"><i class="fas fa-file-pdf"></i> Export All</button>
//         <button class="success-button" onclick="printMode()"><i class="fas fa-print"></i> Print & Cut</button>
//       </div>
      
//       <h2>Your Decks</h2>
            <h3>Biology 101</h3>
//           </div>
//           </div>
//             <button class="mini-btn primary">Study</button>
//             <button class="mini-btn">Review</button>
//           </div>
//         </div>
        
            <h3>Chemistry</h3>
//           </div>
//           </div>
//             <button class="mini-btn primary">Study</button>
//             <button class="mini-btn">Review</button>
//           </div>
//         </div>
        
            <i class="fas fa-plus-circle"></i>
//           </div>
//         </div>
//       </div>"
    
    "practice" -> "
//         <h1>Practice Questions</h1>
//       </div>
      
            <h3>Select Subject</h3>
//               <button class="subject-btn active" data-subject="biology" onclick="selectSubject(this)">
                <i class="fas fa-dna"></i> Biology
              </button>
//               <button class="subject-btn" data-subject="history" onclick="selectSubject(this)">
                <i class="fas fa-landmark"></i> History
              </button>
//               <button class="subject-btn" data-subject="physics" onclick="selectSubject(this)">
                <i class="fas fa-atom"></i> Physics
              </button>
//               <button class="subject-btn" data-subject="chemistry" onclick="selectSubject(this)">
                <i class="fas fa-flask"></i> Chemistry
              </button>
//               <button class="subject-btn" data-subject="mathematics" onclick="selectSubject(this)">
                <i class="fas fa-calculator"></i> Mathematics
              </button>
//               <button class="subject-btn" data-subject="geography" onclick="selectSubject(this)">
                <i class="fas fa-globe"></i> Geography
              </button>
//               <button class="subject-btn" data-subject="literature" onclick="selectSubject(this)">
                <i class="fas fa-book"></i> Literature
              </button>
//               <button class="subject-btn" data-subject="computer" onclick="selectSubject(this)">
                <i class="fas fa-laptop-code"></i> Computer Science
              </button>
//             </div>
//           </div>
          
              <label>Difficulty</label>
              <select id="quizDifficulty" class="modern-input">
                <option value="easy">Easy</option>
                <option value="medium" selected>Medium</option>
                <option value="hard">Hard</option>
                <option value="expert">Expert</option>
              </select>
//             </div>
              <label>Number of Questions</label>
              <select id="quizCount" class="modern-input">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50" selected>50</option>
                <option value="100">100</option>
              </select>
//             </div>
//           </div>
          
//           <button class="primary-button full" onclick="startQuiz()"><i class="fas fa-play"></i> Start Quiz</button>
//         </div>
        
//           </div>
          
//           </div>
          
//             <h2 class="question-text" id="questionText">What is the powerhouse of the cell?</h2>
            
//               <button class="quiz-option" data-index="0" onclick="selectAnswer(this)">Nucleus</button>
//               <button class="quiz-option" data-index="1" onclick="selectAnswer(this)">Mitochondria</button>
//               <button class="quiz-option" data-index="2" onclick="selectAnswer(this)">Ribosome</button>
//               <button class="quiz-option" data-index="3" onclick="selectAnswer(this)">Endoplasmic Reticulum</button>
//             </div>
//           </div>
          
              <h3 id="feedbackTitle">Correct!</h3>
//             </div>
//             <button class="primary-button" onclick="nextQuestion()"><i class="fas fa-arrow-right"></i> Next Question</button>
//           </div>
          
//               <h2>Quiz Complete!</h2>
//             </div>
//               </div>
//               </div>
//               </div>
//             </div>
//               <button class="primary-button" onclick="restartQuiz()"><i class="fas fa-redo"></i> Try Again</button>
//               <button class="secondary-button" onclick="backToSetup()"><i class="fas fa-arrow-left"></i> New Quiz</button>
//             </div>
//           </div>
//         </div>
//       </div>
      
      <canvas id="confettiCanvas" class="confetti-canvas"></canvas>
      
        <h3>Subject Statistics</h3>
//             </div>
//           </div>
//             </div>
//           </div>
//             </div>
//           </div>
//             </div>
//           </div>
//             </div>
//           </div>
//             </div>
//           </div>
//         </div>
//       </div>"
    
    "pdf-export" -> "
//         <h1>PDF Export & Download</h1>
//       </div>
      
          <h3>All Flashcards</h3>
//           <button class="primary-button" onclick="exportAllCards()"><i class="fas fa-download"></i> Download</button>
//         </div>
        
          <h3>Print & Cut Mode</h3>
//           <button class="accent-button" onclick="exportPrintable()"><i class="fas fa-print"></i> Prepare Print</button>
//         </div>
        
          <h3>Study Guide</h3>
//           <button class="secondary-button" onclick="exportStudyGuide()"><i class="fas fa-download"></i> Download</button>
//         </div>
        
          <h3>Exam Results</h3>
//           <button class="secondary-button" onclick="exportExamResults()"><i class="fas fa-download"></i> Download</button>
//         </div>
//       </div>
      
        <h3>Export Settings</h3>
          <label class="toggle-label">
//             <input type="checkbox" checked>
            Include card images
          </label>
          <label class="toggle-label">
//             <input type="checkbox" checked>
            Include mastery statistics
          </label>
          <label class="toggle-label">
//             <input type="checkbox">
            Include answer keys
          </label>
          <label class="toggle-label">
//             <input type="checkbox" checked>
            Math formula rendering
          </label>
//         </div>
//       </div>"
    
    "ai-solver" -> "
//         <h1>AI Problem Solver</h1>
//       </div>
      
            <i class="fas fa-camera"></i>
//           </div>
            <i class="fas fa-keyboard"></i>
//           </div>
            <i class="fas fa-microphone"></i>
//           </div>
//         </div>
        
//               <input type="file" id="solverFile" accept="image/*" style="display: none;" onchange="handleSolverUpload()">
              <i class="fas fa-cloud-upload-alt"></i>
//             </div>
//           </div>
          
            <textarea class="solver-textarea" placeholder="Type or paste your math problem, equation, or question here..."></textarea>
//               <button onclick="insertMath(\"frac\")"><i class="fas fa-divide"></i> Fraction</button>
//               <button onclick="insertMath(\"sqrt\")"><i class="fas fa-square-root-alt"></i> Root</button>
//               <button onclick="insertMath(\"pow\")"><i class="fas fa-superscript"></i> Power</button>
//               <button onclick="insertMath(\"sum\")"><i class="fas fa-sigma"></i> Sum</button>
//             </div>
//           </div>
          
//           <button class="solve-button" onclick="solveProblem()"><i class="fas fa-bolt"></i> Solve Now</button>
//         </div>
        
//           </div>
//             </div>
//             </div>
//             </div>
//           </div>
//         </div>
//       </div>"
    
    "settings" -> "
//         <h1>Settings</h1>
//       </div>
      
//           <button class="settings-tab active" onclick="showSettingsTab(\"profile\")"><i class="fas fa-user"></i> Profile</button>
//           <button class="settings-tab" onclick="showSettingsTab(\"appearance\")"><i class="fas fa-palette"></i> Appearance</button>
//           <button class="settings-tab" onclick="showSettingsTab(\"learning\")"><i class="fas fa-graduation-cap"></i> Learning</button>
//           <button class="settings-tab" onclick="showSettingsTab(\"notifications\")"><i class="fas fa-bell"></i> Notifications</button>
//           <button class="settings-tab" onclick="showSettingsTab(\"language\")"><i class="fas fa-globe"></i> Language</button>
//           <button class="settings-tab" onclick="showSettingsTab(\"billing\")"><i class="fas fa-credit-card"></i> Billing</button>
//         </div>
        
            <h3>Profile Information</h3>
                  <i class="fas fa-user"></i>
//                 </div>
//                 <button class="secondary-button small"><i class="fas fa-camera"></i> Change</button>
//               </div>
                  <label>Display Name</label>
//                   <input type="text" class="modern-input" value="Student">
//                 </div>
                  <label>Email</label>
//                   <input type="email" class="modern-input" value="student@example.com">
//                 </div>
//               </div>
//             </div>
            
            <h3>Public Profile</h3>
            <label class="toggle-label">
//               <input type="checkbox">
              Allow others to see my shared decks
            </label>
            <label class="toggle-label">
//               <input type="checkbox" checked>
              Show achievements on profile
            </label>
//           </div>
          
            <h3>Theme</h3>
//               </div>
//               </div>
//               </div>
//             </div>
            
            <h3>Animations</h3>
              <label>Hover Effect Intensity</label>
//               <input type="range" min="0" max="100" value="80" class="modern-slider" oninput="updateAnimationIntensity(this.value)">
//             </div>
            <label class="toggle-label">
//               <input type="checkbox" checked>
              Enable card flip animations
            </label>
            <label class="toggle-label">
//               <input type="checkbox" checked>
              Enable page transitions
            </label>
            <label class="toggle-label">
//               <input type="checkbox">
              Reduce motion (accessibility)
            </label>
//           </div>
          
            <h3>Daily Goals</h3>
              <label>Study Time (minutes)</label>
//               <input type="number" class="modern-input" value="60">
//             </div>
              <label>Cards per Day</label>
//               <input type="number" class="modern-input" value="20">
//             </div>
            
            <h3>Algorithm Settings</h3>
            <label class="toggle-label">
//               <input type="checkbox" checked>
              Use SM-2 spaced repetition
            </label>
            <label class="toggle-label">
//               <input type="checkbox" checked>
              Auto-schedule review sessions
            </label>
//           </div>
          
            <h3>Interface Language</h3>
//               <button class="lang-btn active" onclick="setLanguage(\"en\")">English</button>
//               <button class="lang-btn" onclick="setLanguage(\"nl\")">Nederlands (Dutch)</button>
//               <button class="lang-btn" onclick="setLanguage(\"es\")">Español</button>
//               <button class="lang-btn" onclick="setLanguage(\"fr\")">Français</button>
//               <button class="lang-btn" onclick="setLanguage(\"de\")">Deutsch</button>
//               <button class="lang-btn" onclick="setLanguage(\"it\")">Italiano</button>
//               <button class="lang-btn" onclick="setLanguage(\"pt\")">Português</button>
//               <button class="lang-btn" onclick="setLanguage(\"ja\")">日本語</button>
//             </div>
//           </div>
          
//             <button class="secondary-button" onclick="resetSettings()">Reset to Default</button>
//             <button class="primary-button" onclick="saveSettings()"><i class="fas fa-save"></i> Save Changes</button>
//           </div>
//         </div>
//       </div>"
    
    "subscriptions" -> "
//         <h1>Choose Your Plan</h1>
//       </div>
      
        <label class="switch">
//           <input type="checkbox" onchange="toggleBilling()">
        </label>
//       </div>
      
            <h3>Free</h3>
//           </div>
          <ul class="features">
            <li><i class="fas fa-check"></i> Up to 100 flashcards</li>
            <li><i class="fas fa-check"></i> Basic AI Tutor</li>
            <li><i class="fas fa-check"></i> SM-2 algorithm</li>
            <li><i class="fas fa-check"></i> 3 mock exams</li>
            <li class="disabled"><i class="fas fa-times"></i> PDF export</li>
            <li class="disabled"><i class="fas fa-times"></i> File upload</li>
            <li class="disabled"><i class="fas fa-times"></i> 8 languages</li>
          </ul>
//           <button class="secondary-button full" disabled>Current Plan</button>
//         </div>
        
            <h3>Standard</h3>
//           </div>
          <ul class="features">
            <li><i class="fas fa-check"></i> Unlimited flashcards</li>
            <li><i class="fas fa-check"></i> Full AI Tutor + File upload</li>
            <li><i class="fas fa-check"></i> PDF export & Print mode</li>
            <li><i class="fas fa-check"></i> Unlimited mock exams</li>
            <li><i class="fas fa-check"></i> 8 language support</li>
            <li><i class="fas fa-check"></i> Biometric tracking</li>
            <li class="disabled"><i class="fas fa-times"></i> iDEAL/Bancontact</li>
          </ul>
//           <button class="primary-button full" onclick="subscribe(\"standard\")">Upgrade</button>
//         </div>
        
            <h3>Plus</h3>
//           </div>
          <ul class="features">
            <li><i class="fas fa-check"></i> Everything in Standard</li>
            <li><i class="fas fa-check"></i> iDEAL & Bancontact payments</li>
            <li><i class="fas fa-check"></i> 50GB file storage</li>
            <li><i class="fas fa-check"></i> Word & PowerPoint support</li>
            <li><i class="fas fa-check"></i> Priority AI processing</li>
            <li><i class="fas fa-check"></i> Study groups (10 people)</li>
            <li><i class="fas fa-check"></i> Advanced analytics</li>
          </ul>
//           <button class="accent-button full" onclick="subscribe(\"plus\")">Go Plus</button>
//         </div>
//       </div>
      
        <h3>Supported Payment Methods</h3>
//         </div>
//       </div>"
    
    "file-manager" -> "
//         <h1>My Files</h1>
//       </div>
      
//         <button class="primary-button" onclick="document.getElementById(\"fileUpload\").click()"><i class="fas fa-cloud-upload-alt"></i> Upload</button>
//         <input type="file" id="fileUpload" multiple accept=".pdf,.docx,.pptx,.jpg,.png" style="display: none;" onchange="uploadFiles()">
//           <button class="filter-btn active">All</button>
//           <button class="filter-btn">PDF</button>
//           <button class="filter-btn">Documents</button>
//           <button class="filter-btn">Images</button>
//         </div>
//         </div>
//       </div>
      
            <h4>Biology_Notes.pdf</h4>
//           </div>
//             <button onclick="previewFile(\"biology\")"><i class="fas fa-eye"></i></button>
//             <button onclick="shareFile(\"biology\")"><i class="fas fa-share"></i></button>
//             <button onclick="deleteFile(\"biology\")"><i class="fas fa-trash"></i></button>
//           </div>
//         </div>
        
            <h4>Chemistry_Lab.docx</h4>
//           </div>
//             <button onclick="previewFile(\"chemistry\")"><i class="fas fa-eye"></i></button>
//             <button onclick="shareFile(\"chemistry\")"><i class="fas fa-share"></i></button>
//             <button onclick="deleteFile(\"chemistry\")"><i class="fas fa-trash"></i></button>
//           </div>
//         </div>
        
            <h4>Physics_Slides.pptx</h4>
//           </div>
//             <button onclick="previewFile(\"physics\")"><i class="fas fa-eye"></i></button>
//             <button onclick="shareFile(\"physics\")"><i class="fas fa-share"></i></button>
//             <button onclick="deleteFile(\"physics\")"><i class="fas fa-trash"></i></button>
//           </div>
//         </div>
        
            <h4>Diagram_01.png</h4>
//           </div>
//             <button onclick="previewFile(\"diagram\")"><i class="fas fa-eye"></i></button>
//             <button onclick="shareFile(\"diagram\")"><i class="fas fa-share"></i></button>
//             <button onclick="deleteFile(\"diagram\")"><i class="fas fa-trash"></i></button>
//           </div>
//         </div>
//       </div>"
    
    "blog" -> "
//         <h1>Learning Blog</h1>
//       </div>
      
        <article class="blog-card">
            <h3>Master Spaced Repetition</h3>
//           </div>
        </article>
        
        <article class="blog-card">
            <h3>Sleep and Memory Consolidation</h3>
//           </div>
        </article>
        
        <article class="blog-card">
            <h3>The Feynman Technique</h3>
//           </div>
        </article>
        
        <article class="blog-card">
            <h3>The Pomodoro Technique</h3>
//           </div>
        </article>
//       </div>"
    
    "youtube" -> "
//         <h1>YouTube to Study Materials</h1>
//       </div>
      
            <i class="fab fa-youtube"></i>
//             <input type="text" id="youtubeUrl" class="modern-input" placeholder="Paste YouTube URL here (e.g., https://youtube.com/watch?v=...)">
//             <button class="primary-button" onclick="convertYoutube()"><i class="fas fa-magic"></i> Convert</button>
//           </div>
//         </div>
        
//             </div>
//             </div>
//             </div>
//             </div>
//           </div>
//           </div>
//         </div>
        
              <i class="fas fa-play-circle"></i>
//             </div>
              <h3 id="videoTitle">Introduction to Quantum Physics</h3>
//               </div>
//             </div>
//           </div>
          
            <h3>Generated Study Materials</h3>
                <h4>Flashcard Deck</h4>
//                 <button class="secondary-button small">Download</button>
//               </div>
              
                <h4>Summary</h4>
//                 <button class="secondary-button small">Download</button>
//               </div>
              
                <h4>Practice Questions</h4>
//                 <button class="secondary-button small">Download</button>
//               </div>
              
                <h4>Full Transcript</h4>
//                 <button class="secondary-button small">Download</button>
//               </div>
//             </div>
//           </div>
//         </div>
//       </div>"
    
    _ -> "
//         <h1>Page Not Found</h1>
//         <button class="primary-button" onclick="location.href=\"/hub\""><i class="fas fa-home"></i> Back to Dashboard</button>
//       </div>"
  }
  assemble(page, content)
}

fn assemble(page: String, content: String) -> response.Response(ResponseData) {
  let html = build_html_page(page, content)
  response.new(200) 
  |> response.set_header("content-type", "text/html") 
  |> response.set_header("X-Frame-Options", "SAMEORIGIN")
  |> response.set_header("Content-Security-Policy", "default-src "self"; script-src "self" "unsafe-inline" https://cdnjs.cloudflare.com; style-src "self" "unsafe-inline" https://cdnjs.cloudflare.com; font-src https://cdnjs.cloudflare.com;")
  |> response.set_body(mist.Bytes(bytes_tree.from_string(html)))
}

fn build_html_page(page: String, content: String) -> String {
  "<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>FlashSync - Advanced Learning Platform</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <style>" <> get_all_styles() <> "</style>
</head>
<body>
  " <> case page {
    "login" -> ""
    _ -> build_navigation(page)
  } <> "
  <main class="" <> case page { "login" -> "login-main" _ -> "content-main" } <> "">
    " <> content <> "
  </main>
  <script>" <> get_all_scripts() <> "</script>
</body>
</html>"
}

fn build_navigation(active_page: String) -> String {
  "<nav class="sidebar">
      <i class="fas fa-brain"></i>
//     </div>
    
      <a href="/hub" class="nav-link " <> case active_page { "hub" -> "active" _ -> "" } <> ""><i class="fas fa-home"></i> Dashboard</a>
      <a href="/flashcards" class="nav-link " <> case active_page { "flashcards" -> "active" _ -> "" } <> ""><i class="fas fa-layer-group"></i> Flashcards</a>
      <a href="/practice" class="nav-link " <> case active_page { "practice" -> "active" _ -> "" } <> ""><i class="fas fa-question-circle"></i> Practice</a>
      <a href="/tutor" class="nav-link " <> case active_page { "tutor" -> "active" _ -> "" } <> ""><i class="fas fa-robot"></i> AI Tutor</a>
//     </div>
    
      <a href="/ai-solver" class="nav-link " <> case active_page { "ai-solver" -> "active" _ -> "" } <> ""><i class="fas fa-wand-magic-sparkles"></i> AI Solver</a>
      <a href="/youtube" class="nav-link " <> case active_page { "youtube" -> "active" _ -> "" } <> ""><i class="fab fa-youtube"></i> YouTube Convert</a>
      <a href="/pdf-export" class="nav-link " <> case active_page { "pdf-export" -> "active" _ -> "" } <> ""><i class="fas fa-file-pdf"></i> PDF Export</a>
      <a href="/file-manager" class="nav-link " <> case active_page { "file-manager" -> "active" _ -> "" } <> ""><i class="fas fa-folder-open"></i> My Files</a>
//     </div>
    
      <a href="/heatmap" class="nav-link " <> case active_page { "heatmap" -> "active" _ -> "" } <> ""><i class="fas fa-brain"></i> Knowledge Map</a>
      <a href="/exam" class="nav-link " <> case active_page { "exam" -> "active" _ -> "" } <> ""><i class="fas fa-clipboard-check"></i> Exams</a>
      <a href="/command-center" class="nav-link " <> case active_page { "command-center" -> "active" _ -> "" } <> ""><i class="fas fa-satellite"></i> Command Center</a>
//     </div>
    
      <a href="/blog" class="nav-link " <> case active_page { "blog" -> "active" _ -> "" } <> ""><i class="fas fa-book-open"></i> Blog</a>
      <a href="/subscriptions" class="nav-link " <> case active_page { "subscriptions" -> "active" _ -> "" } <> ""><i class="fas fa-crown"></i> Subscription</a>
      <a href="/settings" class="nav-link " <> case active_page { "settings" -> "active" _ -> "" } <> ""><i class="fas fa-cog"></i> Settings</a>
//     </div>
  </nav>"
}

fn get_all_styles() -> String {
  "
  :root {
    --primary: #00d4ff;
    --secondary: #a855f7;
    --accent: #f43f5e;
    --success: #22c55e;
    --warning: #f59e0b;
    --bg-dark: #0a0a0f;
    --bg-card: #13131f;
    --bg-hover: #1a1a2e;
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --border: #27273a;
    --glass: rgba(255,255,255,0.03);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 4px 20px rgba(0,0,0,0.3);
    --glow-primary: 0 0 20px rgba(0,212,255,0.3);
    --glow-secondary: 0 0 20px rgba(168,85,247,0.3);
  }
  
  * { margin: 0; padding: 0; box-sizing: border-box; }
  
  body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
  }
  
  .sidebar {
    width: 260px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
  }
  
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }
  
  .nav-brand i {
    font-size: 28px;
    color: var(--primary);
    filter: drop-shadow(0 0 10px rgba(0,212,255,0.5));
  }
  
  .nav-brand span {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .nav-section { margin-bottom: 24px; }
  
  .nav-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    padding: 0 12px;
    margin-bottom: 8px;
  }
  
  .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 4px 0;
    border-radius: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }
  
  .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--primary);
    transform: scaleY(0);
    transition: transform 0.3s;
  }
  
  .nav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateX(4px);
  }
  
  .nav-link:hover::before {
    transform: scaleY(1);
  }
  
  .nav-link.active {
    background: linear-gradient(90deg, rgba(0,212,255,0.1), transparent);
    color: var(--primary);
  }
  
  .nav-link.active::before {
    transform: scaleY(1);
  }
  
  .nav-link i {
    width: 20px;
    text-align: center;
  }
  
  .content-main {
    flex: 1;
    margin-left: 260px;
    padding: 32px;
    max-width: 1400px;
  }
  
  .login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #1a1a2e 0%, var(--bg-dark) 50%);
  }
  
  .page-header {
    margin-bottom: 32px;
  }
  
  .page-header h1 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  
  .page-header .highlight {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .subtitle {
    color: var(--text-secondary);
    font-size: 16px;
  }
  
  .login-container {
    width: 100%;
    max-width: 420px;
    padding: 20px;
  }
  
  .login-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
    box-shadow: var(--shadow);
  }
  
  .brand-title {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
  }
  
  .tagline {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .feature-list {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 32px;
  }
  
  .modern-input {
    width: 100%;
    background: var(--bg-dark);
    border: 2px solid var(--border);
    padding: 16px 20px;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 16px;
    transition: var(--transition);
  }
  
  .modern-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--glow-primary);
  }
  
  .language-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }
  
  .lang-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-dark);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .lang-icon:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
  }
  
  .lang-icon.active {
    background: var(--primary);
    color: var(--bg-dark);
    border-color: var(--primary);
  }
  
  .primary-button {
    background: linear-gradient(135deg, var(--primary), #0099cc);
    color: var(--bg-dark);
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .primary-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-primary);
  }
  
  .secondary-button {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .secondary-button:hover {
    background: var(--border);
    transform: translateY(-2px);
  }
  
  .accent-button {
    background: linear-gradient(135deg, var(--accent), #e11d48);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .accent-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(244,63,94,0.3);
  }
  
  .success-button {
    background: linear-gradient(135deg, var(--success), #16a34a);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .success-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(34,197,94,0.3);
  }
  
  .primary-button.full, .secondary-button.full, .accent-button.full, .success-button.full {
    width: 100%;
    justify-content: center;
  }
  
  .primary-button.small, .secondary-button.small {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
  }
  
  .dash-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }
  
  .dash-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  
  .dash-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--border);
  }
  
  .dash-card:hover::after {
    transform: scaleX(1);
  }
  
  .dash-card.primary::after { background: linear-gradient(90deg, var(--primary), #0099cc); }
  .dash-card.secondary::after { background: linear-gradient(90deg, var(--secondary), #7c3aed); }
  .dash-card.accent::after { background: linear-gradient(90deg, var(--accent), #e11d48); }
  .dash-card.success::after { background: linear-gradient(90deg, var(--success), #16a34a); }
  
  .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 16px;
  }
  
  .dash-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  
  .dash-card p {
    color: var(--text-secondary);
    font-size: 13px;
  }
  
  .badge, .stat {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
  }
  
  .badge {
    background: var(--primary);
    color: var(--bg-dark);
  }
  
  .stat {
    background: var(--bg-hover);
    color: var(--text-secondary);
  }
  
  .quick-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  .stat-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: var(--transition);
  }
  
  .stat-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
  }
  
  .stat-value {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
  }
  
  .stat-label {
    color: var(--text-secondary);
    font-size: 13px;
  }
  
  .action-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
  }
  
  .deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
  }
  
  .deck-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .deck-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--primary);
  }
  
  .deck-card.new {
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .add-deck {
    text-align: center;
    color: var(--text-secondary);
  }
  
  .add-deck i {
    font-size: 40px;
    margin-bottom: 12px;
    color: var(--primary);
  }
  
  .deck-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .deck-header h3 {
    font-size: 18px;
    font-weight: 700;
  }
  
  .mastery-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
  }
  
  .mastery-badge.high { background: rgba(34,197,94,0.2); color: var(--success); }
  .mastery-badge.medium { background: rgba(245,158,11,0.2); color: var(--warning); }
  .mastery-badge.low { background: rgba(244,63,94,0.2); color: var(--accent); }
  
  .deck-meta {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 16px;
  }
  
  .deck-progress {
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    margin-bottom: 16px;
    overflow: hidden;
  }
  
  .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width 0.5s ease;
  }
  
  .deck-actions {
    display: flex;
    gap: 8px;
  }
  
  .mini-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .mini-btn:hover {
    background: var(--border);
    color: var(--text-primary);
  }
  
  .mini-btn.primary {
    background: var(--primary);
    color: var(--bg-dark);
    border-color: var(--primary);
  }
  
  .feature-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
  }
  
  .feature-box h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .feature-box h3 i {
    color: var(--primary);
  }
  
  .stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    transition: var(--transition);
  }
  
  .stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
  }
  
  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
  }
  
  .grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
  }
  
  .tutor-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
  }
  
  .chat-area {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 600px;
  }
  
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .message {
    display: flex;
    gap: 12px;
    max-width: 85%;
  }
  
  .ai-message {
    align-self: flex-start;
  }
  
  .message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
  }
  
  .message-content {
    background: var(--bg-hover);
    padding: 16px;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
  }
  
  .message-content p {
    margin-bottom: 8px;
    line-height: 1.6;
  }
  
  .message-content ul {
    margin: 12px 0;
    padding-left: 20px;
    color: var(--text-secondary);
  }
  
  .message-content li {
    margin: 4px 0;
  }
  
  .chat-input-area {
    padding: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 12px;
    align-items: center;
  }
  
  .attach-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
  }
  
  .attach-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
  }
  
  .chat-input {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
  }
  
  .chat-input:focus {
    outline: none;
    border-color: var(--primary);
  }
  
  .send-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--primary);
    color: var(--bg-dark);
    cursor: pointer;
    transition: var(--transition);
  }
  
  .send-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--glow-primary);
  }
  
  .tutor-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .sidebar-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
  }
  
  .sidebar-section h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 12px;
  }
  
  .quick-action {
    width: 100%;
    padding: 12px;
    margin: 4px 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .quick-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateX(4px);
  }
  
  .quick-action i {
    color: var(--primary);
  }
  
  .file-list {
    font-size: 13px;
    color: var(--text-secondary);
  }
  
  .empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
  }
  
  .generator-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
  }
  
  .input-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
  }
  
  .input-group {
    flex: 1;
    min-width: 150px;
  }
  
  .input-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .question-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .practice-question {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    transition: var(--transition);
  }
  
  .practice-question:hover {
    border-color: var(--border);
    box-shadow: var(--shadow);
  }
  
  .question-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
  }
  
  .question-number {
    padding: 4px 12px;
    background: var(--primary);
    color: var(--bg-dark);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
  }
  
  .difficulty-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  .difficulty-badge.easy { background: rgba(34,197,94,0.2); color: var(--success); }
  .difficulty-badge.medium { background: rgba(245,158,11,0.2); color: var(--warning); }
  .difficulty-badge.hard { background: rgba(244,63,94,0.2); color: var(--accent); }
  
  .question-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .answer-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .option-btn {
    padding: 16px;
    background: var(--bg-hover);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
  }
  
  .option-btn:hover {
    border-color: var(--primary);
    background: rgba(0,212,255,0.1);
  }
  
  .option-btn.selected {
    border-color: var(--primary);
    background: rgba(0,212,255,0.15);
  }
  
  .answer-section {
    margin: 20px 0;
  }
  
  .answer-content {
    background: var(--bg-hover);
    padding: 20px;
    border-radius: 12px;
    margin-top: 12px;
    line-height: 1.6;
  }
  
  .answer-content.hidden {
    display: none;
  }
  
  .answer-content p {
    margin-bottom: 12px;
  }
  
  .feedback-buttons {
    display: flex;
    gap: 12px;
  }
  
  .feedback-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .feedback-btn:hover {
    transform: translateY(-2px);
  }
  
  .feedback-btn.correct:hover {
    background: rgba(34,197,94,0.1);
    border-color: var(--success);
    color: var(--success);
  }
  
  .feedback-btn.wrong:hover {
    background: rgba(244,63,94,0.1);
    border-color: var(--accent);
    color: var(--accent);
  }
  
  .export-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
  }
  
  .export-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: var(--transition);
    position: relative;
  }
  
  .export-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
  }
  
  .export-card.featured {
    border-color: var(--warning);
    background: linear-gradient(135deg, rgba(245,158,11,0.05), transparent);
  }
  
  .export-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
    color: var(--warning);
  }
  
  .export-card h3 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .export-card p {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 20px;
  }
  
  .plan-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    background: var(--warning);
    color: var(--bg-dark);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }
  
  .export-settings {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
  }
  
  .export-settings h3 {
    margin-bottom: 20px;
  }
  
  .settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
  }
  
  .toggle-label input {
    display: none;
  }
  
  .toggle {
    width: 44px;
    height: 24px;
    background: var(--bg-hover);
    border-radius: 12px;
    position: relative;
    transition: var(--transition);
    flex-shrink: 0;
  }
  
  .toggle::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: var(--transition);
  }
  
  .toggle-label input:checked + .toggle {
    background: var(--primary);
  }
  
  .toggle-label input:checked + .toggle::after {
    left: 22px;
  }
  
  .solver-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
  }
  
  .input-methods {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
  }
  
  .input-method {
    flex: 1;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
  }
  
  .input-method:hover {
    border-color: var(--border);
    color: var(--text-primary);
  }
  
  .input-method.active {
    border-color: var(--primary);
    background: rgba(0,212,255,0.1);
    color: var(--primary);
  }
  
  .input-method i {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
  }
  
  .solver-workspace {
    position: relative;
  }
  
  .solver-panel {
    display: none;
  }
  
  .solver-panel.active {
    display: block;
  }
  
  .upload-zone {
    border: 2px dashed var(--border);
    border-radius: 16px;
    padding: 60px 40px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .upload-zone:hover {
    border-color: var(--primary);
    background: rgba(0,212,255,0.05);
  }
  
  .upload-zone i {
    font-size: 48px;
    color: var(--primary);
    margin-bottom: 16px;
  }
  
  .upload-zone p {
    margin-bottom: 8px;
  }
  
  .formats {
    color: var(--text-secondary);
    font-size: 13px;
  }
  
  .solver-textarea {
    width: 100%;
    min-height: 200px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    color: var(--text-primary);
    font-size: 15px;
    resize: vertical;
  }
  
  .solver-textarea:focus {
    outline: none;
    border-color: var(--primary);
  }
  
  .math-toolbar {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  
  .math-toolbar button {
    padding: 8px 14px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .math-toolbar button:hover {
    border-color: var(--primary);
    color: var(--primary);
  }
  
  .solve-button {
    width: 100%;
    padding: 16px;
    margin-top: 20px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    border-radius: 12px;
    color: var(--bg-dark);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .solve-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-primary);
  }
  
  .solution-result {
    margin-top: 24px;
    padding: 24px;
    background: var(--bg-hover);
    border-radius: 12px;
    border-left: 4px solid var(--success);
  }
  
  .solution-header {
    margin-bottom: 16px;
  }
  
  .solution-badge {
    padding: 6px 12px;
    background: rgba(34,197,94,0.2);
    color: var(--success);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
  }
  
  .solution-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  
  .step-num {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: var(--bg-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
  }
  
  .step p {
    flex: 1;
    line-height: 1.6;
  }
  
  .settings-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
  }
  
  .settings-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .settings-tab {
    padding: 14px 16px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }
  
  .settings-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
  
  .settings-tab.active {
    background: var(--primary);
    color: var(--bg-dark);
    font-weight: 600;
  }
  
  .settings-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
  }
  
  .settings-panel {
    display: none;
  }
  
  .settings-panel.active {
    display: block;
  }
  
  .settings-panel h3 {
    font-size: 18px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  
  .profile-header {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
  }
  
  .avatar-upload {
    text-align: center;
  }
  
  .avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }
  
  .avatar-preview i {
    font-size: 40px;
    color: white;
  }
  
  .profile-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .theme-options {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
  }
  
  .theme-option {
    cursor: pointer;
    text-align: center;
  }
  
  .theme-preview {
    width: 80px;
    height: 60px;
    border-radius: 12px;
    border: 2px solid var(--border);
    margin-bottom: 8px;
    transition: var(--transition);
  }
  
  .theme-preview.dark {
    background: linear-gradient(135deg, #1a1a2e, #0a0a0f);
  }
  
  .theme-preview.light {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  }
  
  .theme-preview.auto {
    background: linear-gradient(90deg, #1a1a2e 50%, #f8fafc 50%);
  }
  
  .theme-option:hover .theme-preview {
    border-color: var(--primary);
  }
  
  .theme-option.active .theme-preview {
    border-color: var(--primary);
    box-shadow: var(--glow-primary);
  }
  
  .slider-setting {
    margin-bottom: 24px;
  }
  
  .slider-setting label {
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
  }
  
  .modern-slider {
    width: 100%;
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
  }
  
  .modern-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
  }
  
  .language-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  
  .lang-btn {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .lang-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
  }
  
  .lang-btn.active {
    background: var(--primary);
    color: var(--bg-dark);
    border-color: var(--primary);
    font-weight: 600;
  }
  
  .settings-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  
  .pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
  }
  
  .pricing-toggle span {
    color: var(--text-secondary);
    font-weight: 500;
  }
  
  .pricing-toggle span.active {
    color: var(--text-primary);
  }
  
  .switch {
    position: relative;
    width: 56px;
    height: 28px;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--bg-hover);
    border-radius: 28px;
    transition: var(--transition);
  }
  
  .slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: var(--transition);
  }
  
  input:checked + .slider {
    background: var(--primary);
  }
  
  input:checked + .slider::before {
    transform: translateX(28px);
  }
  
  .save-badge {
    padding: 4px 10px;
    background: var(--success);
    color: var(--bg-dark);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 8px;
  }
  
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
  }
  
  .pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 24px;
    position: relative;
    transition: var(--transition);
  }
  
  .pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
  
  .pricing-card.popular {
    border-color: var(--primary);
    box-shadow: var(--glow-primary);
  }
  
  .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    background: var(--primary);
    color: var(--bg-dark);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
  }
  
  .plan-header {
    text-align: center;
    margin-bottom: 24px;
  }
  
  .plan-header h3 {
    font-size: 20px;
    margin-bottom: 8px;
  }
  
  .price {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .price span {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 400;
    -webkit-text-fill-color: var(--text-secondary);
  }
  
  .features {
    list-style: none;
    margin-bottom: 24px;
  }
  
  .features li {
    padding: 10px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .features li i {
    color: var(--success);
  }
  
  .features li.disabled {
    color: var(--text-secondary);
    opacity: 0.5;
  }
  
  .features li.disabled i {
    color: var(--text-secondary);
  }
  
  .payment-methods {
    text-align: center;
  }
  
  .payment-methods h3 {
    margin-bottom: 20px;
    font-size: 16px;
  }
  
  .payment-icons {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  
  .payment-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
  }
  
  .payment-icon i {
    font-size: 24px;
  }
  
  .file-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .file-filters {
    display: flex;
    gap: 8px;
  }
  
  .filter-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .filter-btn:hover, .filter-btn.active {
    background: var(--primary);
    color: var(--bg-dark);
    border-color: var(--primary);
  }
  
  .storage-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
  }
  
  .storage-bar {
    width: 100px;
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
  }
  
  .storage-bar div {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width 0.3s;
  }
  
  .file-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .file-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: var(--transition);
  }
  
  .file-item:hover {
    border-color: var(--primary);
    transform: translateX(4px);
  }
  
  .file-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
  
  .file-icon.pdf { background: rgba(239,68,68,0.1); color: #ef4444; }
  .file-icon.docx { background: rgba(59,130,246,0.1); color: #3b82f6; }
  .file-icon.pptx { background: rgba(249,115,22,0.1); color: #f97316; }
  .file-icon.image { background: rgba(34,197,94,0.1); color: #22c55e; }
  
  .file-info {
    flex: 1;
  }
  
  .file-info h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  
  .file-meta {
    font-size: 12px;
    color: var(--text-secondary);
  }
  
  .file-actions {
    display: flex;
    gap: 8px;
  }
  
  .file-actions button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
  }
  
  .file-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
  }
  
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
  }
  
  .blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
  }
  
  .blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--primary);
  }
  
  .blog-image {
    height: 160px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: white;
  }
  
  .blog-content {
    padding: 20px;
  }
  
  .blog-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-hover);
    color: var(--primary);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  
  .blog-content h3 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .blog-content p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  
  .blog-date {
    font-size: 12px;
    color: var(--text-secondary);
  }
  
  .error-page {
    text-align: center;
    padding: 80px 20px;
  }
  
  .error-page h1 {
    font-size: 48px;
    margin-bottom: 16px;
  }
  
  @media (max-width: 1024px) {
    .sidebar {
      width: 80px;
      padding: 20px 12px;
    }
    
    .nav-brand span, .nav-link span, .nav-label {
      display: none;
    }
    
    .nav-brand {
      justify-content: center;
    }
    
    .nav-link {
      justify-content: center;
      padding: 16px;
    }
    
    .nav-link::before {
      width: 100%;
      height: 3px;
      transform: scaleX(0);
    }
    
    .content-main {
      margin-left: 80px;
    }
    
    .tutor-container {
      grid-template-columns: 1fr;
    }
    
    .tutor-sidebar {
      display: none;
    }
    
    .settings-layout {
      grid-template-columns: 1fr;
    }
    
    .settings-nav {
      flex-direction: row;
      overflow-x: auto;
      padding-bottom: 8px;
    }
    
    .pricing-grid {
      grid-template-columns: 1fr;
    }
    
    .quick-stats {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 640px) {
    .sidebar {
      width: 100%;
      height: 70px;
      position: fixed;
      bottom: 0;
      top: auto;
      flex-direction: row;
      padding: 8px;
      border-right: none;
      border-top: 1px solid var(--border);
    }
    
    .nav-brand, .nav-label {
      display: none;
    }
    
    .nav-section {
      display: flex;
      margin: 0;
    }
    
    .content-main {
      margin-left: 0;
      margin-bottom: 70px;
      padding: 20px;
    }
    
    .dashboard-grid {
      grid-template-columns: 1fr;
    }
    
    .quick-stats {
      grid-template-columns: 1fr;
    }
    
    .language-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-2, .grid-4 {
      grid-template-columns: 1fr;
    }
  }
  
  /* YouTube Converter Styles */
  .youtube-converter { max-width: 900px; }
  
  .url-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px 20px;
  }
  
  .url-input-wrapper i {
    font-size: 24px;
    color: #ff0000;
  }
  
  .url-input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 15px;
  }
  
  .url-input-wrapper input:focus {
    outline: none;
  }
  
  .input-hint {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 12px;
    text-align: center;
  }
  
  .progress-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
  }
  
  .progress-panel.hidden,
  .results-panel.hidden {
    display: none;
  }
  
  .progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  
  .progress-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
  }
  
  .progress-steps .step.active {
    color: var(--primary);
  }
  
  .step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  
  .step.active .step-icon {
    background: var(--primary);
    color: var(--bg-dark);
  }
  
  .progress-bar-container {
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
  }
  
  .progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width 0.5s ease;
  }
  
  .results-panel {
    margin-top: 24px;
  }
  
  .video-preview {
    display: flex;
    gap: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
  }
  
  .thumbnail {
    width: 160px;
    height: 90px;
    background: var(--bg-hover);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--primary);
    flex-shrink: 0;
  }
  
  .video-info h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .video-info p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 12px;
  }
  
  .video-stats {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--text-secondary);
  }
  
  .video-stats strong {
    color: var(--primary);
  }
  
  .output-options h3 {
    margin-bottom: 16px;
  }
  
  .output-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  
  .output-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .output-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
  }
  
  .output-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 20px;
    color: var(--primary);
  }
  
  .output-card h4 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .output-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
  }
  
  @media (max-width: 768px) {
    .output-cards {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .video-preview {
      flex-direction: column;
    }
    
    .thumbnail {
      width: 100%;
      height: 180px;
    }
    
    .progress-steps {
      flex-wrap: wrap;
      gap: 12px;
    }
  }
  
  /* Quiz Styles */
  .quiz-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
  }
  
  .subject-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 20px 0;
  }
  
  .subject-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--bg-hover);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .subject-btn i {
    font-size: 24px;
    color: var(--primary);
  }
  
  .subject-btn:hover, .subject-btn.active {
    border-color: var(--primary);
    background: rgba(0,212,255,0.1);
    color: var(--text-primary);
  }
  
  .quiz-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 24px 0;
  }
  
  .option-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .quiz-progress-bar {
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    margin-bottom: 24px;
    overflow: hidden;
  }
  
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
  }
  
  .quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  
  .quiz-subject {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .quiz-score {
    font-size: 14px;
    color: var(--text-secondary);
  }
  
  .quiz-score strong {
    color: var(--success);
    font-size: 18px;
  }
  
  .quiz-question-container {
    text-align: center;
  }
  
  .question-number {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
  }
  
  .question-text {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 32px;
    line-height: 1.4;
  }
  
  .quiz-option {
    width: 100%;
    padding: 18px 24px;
    margin: 8px 0;
    background: var(--bg-hover);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
  }
  
  .quiz-option:hover {
    border-color: var(--primary);
    background: rgba(0,212,255,0.05);
    transform: translateX(4px);
  }
  
  .quiz-option.correct {
    background: rgba(34,197,94,0.2);
    border-color: var(--success);
    color: var(--success);
  }
  
  .quiz-option.incorrect {
    background: rgba(244,63,94,0.2);
    border-color: var(--accent);
    color: var(--accent);
  }
  
  .quiz-option.disabled {
    opacity: 0.6;
    pointer-events: none;
  }
  
  .quiz-feedback {
    text-align: center;
    padding: 40px;
    background: var(--bg-hover);
    border-radius: 16px;
    margin-top: 24px;
  }
  
  .feedback-icon {
    font-size: 64px;
    margin-bottom: 16px;
  }
  
  .feedback-icon.correct {
    color: var(--success);
  }
  
  .feedback-icon.incorrect {
    color: var(--accent);
  }
  
  .quiz-feedback h3 {
    font-size: 24px;
    margin-bottom: 12px;
  }
  
  .quiz-feedback p {
    color: var(--text-secondary);
    margin-bottom: 24px;
  }
  
  .quiz-results {
    text-align: center;
    padding: 40px;
  }
  
  .trophy {
    font-size: 80px;
    color: #ffd700;
    margin-bottom: 20px;
    animation: trophyBounce 0.6s ease;
  }
  
  @keyframes trophyBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }
  
  .final-score {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 16px 0;
  }
  
  .percentage {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px;
  }
  
  .results-breakdown {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 32px 0;
  }
  
  .breakdown-item {
    text-align: center;
  }
  
  .breakdown-item .count {
    display: block;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  
  .breakdown-item.correct .count {
    color: var(--success);
  }
  
  .breakdown-item.incorrect .count {
    color: var(--accent);
  }
  
  .breakdown-item.time .count {
    color: var(--primary);
  }
  
  .breakdown-item .label {
    font-size: 13px;
    color: var(--text-secondary);
  }
  
  .results-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
  }
  
  .confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
  }
  
  .quiz-stats-section {
    margin-top: 32px;
  }
  
  .quiz-stats-section h3 {
    margin-bottom: 20px;
    font-size: 18px;
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  .stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
  }
  
  .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary);
  }
  
  .stat-info {
    flex: 1;
  }
  
  .stat-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
  }
  
  .stat-count {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0;
  }
  
  .stat-progress {
    height: 4px;
    background: var(--bg-hover);
    border-radius: 2px;
    overflow: hidden;
  }
  
  .stat-progress > div {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 2px;
  }
  
  @media (max-width: 768px) {
    .subject-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .quiz-options {
      grid-template-columns: 1fr;
    }
    
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .results-breakdown {
      flex-direction: column;
      gap: 20px;
    }
  }
  "
}

fn get_all_scripts() -> String {
  "
  // Language settings
  function setLanguage(lang) {
    localStorage.setItem("language", lang);
    document.querySelectorAll(".lang-icon, .lang-btn").forEach(btn => {
      btn.classList.remove("active");
      if(btn.textContent.toLowerCase().includes(lang)) btn.classList.add("active");
    });
  }
  
  // Login
  function login() {
    const name = document.getElementById("user").value;
    if(name) {
      localStorage.setItem("student_name", name);
      location.href = "/hub";
    }
  }
  
  // Display name
  if(document.getElementById("display-name")) {
    document.getElementById("display-name").textContent = localStorage.getItem("student_name") || "Student";
  }
  
  // Settings tabs
  function showSettingsTab(tab) {
    document.querySelectorAll(".settings-tab").forEach(t => t.classList.remove("active"));
    event.target.classList.add("active");
    document.querySelectorAll(".settings-panel").forEach(p => p.classList.remove("active"));
    document.getElementById(tab + "Tab").classList.add("active");
  }
  
  // Theme
  function setTheme(theme) {
    localStorage.setItem("theme", theme);
    document.querySelectorAll(".theme-option").forEach(t => t.classList.remove("active"));
    event.currentTarget.classList.add("active");
  }
  
  // Animation intensity
  function updateAnimationIntensity(value) {
    document.getElementById("animationValue").textContent = value + "%";
    document.documentElement.style.setProperty("--hover-intensity", value / 100);
  }
  
  // Settings
  function saveSettings() {
    alert("Settings saved successfully!");
  }
  
  function resetSettings() {
    if(confirm("Reset all settings to default?")) {
      localStorage.clear();
      location.reload();
    }
  }
  
  // AI Problem Solver with real solutions
  const mathSolver = {
    solveQuadratic(a, b, c) {
      const discriminant = b*b - 4*a*c;
      if (discriminant < 0) {
        return {real: false, message: "No real solutions (discriminant < 0)"};
      }
      const x1 = (-b + Math.sqrt(discriminant)) / (2*a);
      const x2 = (-b - Math.sqrt(discriminant)) / (2*a);
      return {real: true, x1, x2, discriminant};
    },
    
    solveLinearEquation(equation) {
      // Simple linear equation solver for ax + b = c format
      const match = equation.match(/(-?\\d*)x\\s*([+-])\\s*(\\d+)\\s*=\\s*(-?\\d+)/);
      if (match) {
        let a = match[1] ? (match[1] === "-" ? -1 : parseInt(match[1])) : 1;
        const sign = match[2] === "+" ? 1 : -1;
        const b = sign * parseInt(match[3]);
        const c = parseInt(match[4]);
        const x = (c - b) / a;
      }
      return {solved: false};
    },
    
    calculate(expression) {
      try {
        // Basic safe evaluation
        const sanitized = expression.replace(/[^0-9+\\-*/().\\s]/g, "");
        const result = Function("&quot;use strict&quot;; return (" + sanitized + ")")();
        return {valid: true, result};
      } catch (e) {
        return {valid: false, error: e.message};
      }
    },
    
    factorQuadratic(a, b, c) {
      if (a === 1) {
        // Find two numbers that multiply to c and add to b
        for (let i = -Math.abs(c); i <= Math.abs(c); i++) {
          if (i === 0) continue;
          if (c % i === 0) {
            const j = c / i;
            if (i + j === b) {
            }
          }
        }
      }
      return {factored: false};
    }
  };
  
  function solveProblem() {
    const activePanel = document.querySelector(".solver-panel.active");
    const uploadPanel = document.getElementById("uploadPanel");
    const typePanel = document.getElementById("typePanel");
    const voicePanel = document.getElementById("voicePanel");
    
    let problemText = "";
    let problemType = "math";
    
    // Determine which panel is active
    if (typePanel && typePanel.classList.contains("active")) {
      const textarea = typePanel.querySelector(".solver-textarea");
      problemText = textarea ? textarea.value.trim() : "";
    } else if (uploadPanel && uploadPanel.classList.contains("active")) {
      problemText = "Image uploaded. Analyzing mathematical content...";
      problemType = "image";
    } else if (voicePanel && voicePanel.classList.contains("active")) {
      problemText = document.getElementById("voiceTranscript") ? document.getElementById("voiceTranscript").textContent : "";
    }
    
    if (!problemText && problemType !== "image") {
      alert("Please enter a problem to solve!");
      return;
    }
    
    const resultContainer = document.getElementById("solutionResult");
    if (!resultContainer) return;
    
    // Show solving animation
    resultContainer.style.display = "block";
    resultContainer.innerHTML = `
//       </div>
//       </div>
    `;
    resultContainer.scrollIntoView({ behavior: "smooth" });
    
    // Simulate processing time
    setTimeout(() => {
      const solution = generateSolution(problemText, problemType);
      displaySolution(solution);
    }, 1500 + Math.random() * 1000);
  }
  
  function generateSolution(problemText, problemType) {
    const lowerProblem = problemText.toLowerCase();
    
    // Detect problem type and solve
    let solution = {
      type: "general",
      problem: problemText,
      steps: [],
      finalAnswer: "",
      explanation: ""
    };
    
    // Quadratic equation detection - simplified pattern
    const quadMatch = problemText.match(/x.2.*=.*0/);
    if (quadMatch || lowerProblem.includes("quadratic") || lowerProblem.includes("x²")) {
      solution.type = "quadratic";
      solution.problem = problemText || "x² + 5x + 6 = 0";
      
      // Extract coefficients (simplified demo)
      let a = 1, b = 5, c = 6;
      if (problemText.includes("x² + 4x + 4")) { a=1; b=4; c=4; }
      else if (problemText.includes("x² - 9")) { a=1; b=0; c=-9; }
      else if (problemText.includes("2x²")) { a=2; b=7; c=3; }
      
      const result = mathSolver.solveQuadratic(a, b, c);
      
      solution.steps = [
        {num: 3, text: `Apply quadratic formula: x = (-b ± √Δ) / 2a`},
      ];
      
      if (result.real) {
        
        // Check if factorable
        const factored = mathSolver.factorQuadratic(a, b, c);
        if (factored.factored) {
        }
      } else {
        solution.finalAnswer = "No real solutions";
        solution.explanation = "The discriminant is negative, meaning the solutions are complex numbers.";
      }
    }
    // Linear equation
    else if (lowerProblem.includes("x +") || lowerProblem.includes("x -") || lowerProblem.includes("2x") || lowerProblem.includes("3x")) {
      solution.type = "linear";
      solution.problem = problemText || "2x + 5 = 13";
      
      let a = 2, b = 5, c = 13;
      const x = (c - b) / a;
      
      solution.steps = [
      ];
      solution.explanation = "This is a linear equation with a single solution.";
    }
    // Pythagorean theorem
    else if (lowerProblem.includes("pythagorean") || lowerProblem.includes("right triangle") || lowerProblem.includes("hypotenuse")) {
      solution.type = "pythagorean";
      solution.problem = "Find hypotenuse given legs of 3 and 4";
      
      const a = 3, b = 4;
      const c = Math.sqrt(a*a + b*b);
      
      solution.steps = [
        {num: 1, text: `Recall the Pythagorean theorem: a² + b² = c²`},
      ];
      solution.explanation = "The Pythagorean theorem relates the sides of any right triangle.";
    }
    // Area calculations
    else if (lowerProblem.includes("area") || lowerProblem.includes("circle") || lowerProblem.includes("triangle")) {
      if (lowerProblem.includes("circle")) {
        solution.type = "circle_area";
        const r = 5;
        const area = Math.PI * r * r;
        solution.steps = [
          {num: 1, text: `Formula for circle area: A = πr²`},
        ];
      } else {
        solution.type = "area";
        solution.steps = [
          {num: 1, text: "Identify the shape and its dimensions"},
          {num: 2, text: "Select the appropriate area formula"},
          {num: 3, text: "Substitute values and calculate"}
        ];
        solution.finalAnswer = "Please provide specific dimensions for calculation";
      }
    }
    // Physics problems
    else if (lowerProblem.includes("force") || lowerProblem.includes("newton") || lowerProblem.includes("f = ma")) {
      solution.type = "physics_force";
      const m = 10, a = 2;
      const f = m * a;
      solution.steps = [
        {num: 1, text: `Newton"s Second Law: F = ma`},
      ];
      solution.explanation = "Force equals mass times acceleration (Newtons Second Law).";
    }
    // Chemistry - Molar mass
    else if (lowerProblem.includes("molar mass") || lowerProblem.includes("molecule") || lowerProblem.includes("compound")) {
      solution.type = "chemistry";
      solution.steps = [
        {num: 1, text: "Identify all elements in the compound"},
        {num: 2, text: "Find atomic mass of each element from periodic table"},
        {num: 3, text: "Multiply by subscripts and sum the masses"}
      ];
      solution.finalAnswer = "H₂O = 18.015 g/mol (example)";
      solution.explanation = "Molar mass is the mass of one mole of a substance.";
    }
    // General math calculation
    else if (/[0-9]+[+*\\/-]/.test(problemText)) {
      const calc = mathSolver.calculate(problemText);
      if (calc.valid) {
        solution.type = "calculation";
        solution.problem = problemText;
        solution.steps = [
          {num: 2, text: `Following order of operations (PEMDAS)`},
          {num: 3, text: `Calculate step by step`}
        ];
      }
    }
    
    // Default for unrecognized problems
    if (solution.steps.length === 0) {
      solution.type = "general";
      solution.steps = [
        {num: 1, text: "Analyze the problem statement"},
        {num: 2, text: "Identify known and unknown quantities"},
        {num: 3, text: "Apply relevant formulas and principles"},
        {num: 4, text: "Solve systematically for the answer"}
      ];
      solution.finalAnswer = "Please provide a specific math problem (e.g., solve x² + 5x + 6 = 0)";
      solution.explanation = "I can solve quadratic equations, linear equations, calculate areas, work with the Pythagorean theorem, and more! Try typing a specific problem.";
    }
    
    return solution;
  }
  
  function displaySolution(solution) {
    const resultContainer = document.getElementById("solutionResult");
    if (!resultContainer) return;
    
//       </div>
    `).join("");
    
    resultContainer.innerHTML = `
          <i class="fas fa-check-circle"></i> Solved
//       </div>
      
//       </div>
      
          <i class="fas fa-list-ol"></i> Step-by-Step Solution
        </h4>
//       </div>
      
//       </div>
      
            <i class="fas fa-lightbulb"></i> Explanation
          </strong>
//         </div>
      ` : ""}
      
//         <button class="secondary-button small" onclick="copySolution()">
          <i class="fas fa-copy"></i> Copy
        </button>
//         <button class="secondary-button small" onclick="saveSolution()">
          <i class="fas fa-save"></i> Save
        </button>
//         <button class="secondary-button small" onclick="shareSolution()">
          <i class="fas fa-share"></i> Share
        </button>
//       </div>
    `;
  }
  
  function copySolution() {
    const result = document.getElementById("solutionResult");
    if (result) {
      const text = result.innerText;
      navigator.clipboard.writeText(text).then(() => {
        alert("Solution copied to clipboard!");
      });
    }
  }
  
  function saveSolution() {
    const problems = JSON.parse(localStorage.getItem("solvedProblems") || "[]");
    const result = document.getElementById("solutionResult");
    if (result) {
      problems.push({
        date: new Date().toISOString(),
        solution: result.innerHTML
      });
      localStorage.setItem("solvedProblems", JSON.stringify(problems));
      alert("Solution saved to your history!");
    }
  }
  
  function shareSolution() {
    alert("Share link copied to clipboard!");
  }
  
  // Voice Input functionality
  let recognition = null;
  
  function initVoiceRecognition() {
    if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window) {
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
      recognition = new SpeechRecognition();
      recognition.continuous = false;
      recognition.interimResults = true;
      recognition.lang = "en-US";
      
      recognition.onstart = function() {
        const status = document.getElementById("voiceStatus");
        if (status) {
        }
      };
      
      recognition.onresult = function(event) {
        let transcript = "";
        for (let i = event.resultIndex; i < event.results.length; i++) {
          transcript += event.results[i][0].transcript;
        }
        const transcriptEl = document.getElementById("voiceTranscript");
        if (transcriptEl) {
          transcriptEl.textContent = transcript;
        }
      };
      
      recognition.onerror = function(event) {
        const status = document.getElementById("voiceStatus");
        if (status) {
          status.innerHTML = "<i class="fas fa-exclamation-circle"></i> Error: " + event.error;
        }
      };
      
      recognition.onend = function() {
        const status = document.getElementById("voiceStatus");
        if (status) {
          status.innerHTML = "<i class="fas fa-check"></i> Click microphone to speak again";
        }
      };
    }
  }
  
  function toggleVoiceInput() {
    if (!recognition) {
      initVoiceRecognition();
    }
    
    if (recognition) {
      try {
        recognition.start();
      } catch (e) {
        recognition.stop();
      }
    } else {
      alert("Speech recognition is not supported in your browser. Try Chrome or Edge.");
    }
  }
  
  // Switch between input methods
  function switchMethod(method) {
    document.querySelectorAll(".input-method").forEach(m => m.classList.remove("active"));
    event.currentTarget.classList.add("active");
    document.querySelectorAll(".solver-panel").forEach(p => p.classList.remove("active"));
    
    const panel = document.getElementById(method + "Panel");
    if (panel) panel.classList.add("active");
    
    if (method === "voice") {
      initVoiceRecognition();
    }
  }
  
  // Math toolbar functions
  function insertMath(type) {
    const textarea = document.querySelector(".solver-textarea");
    if (!textarea) return;
    
    const symbols = {
      frac: " / ",
      sqrt: "√()",
      pow: "^",
      sum: "Σ",
      pi: "π",
      theta: "θ",
      infty: "∞",
      neq: "≠",
      leq: "≤",
      geq: "≥"
    };
    
    const cursorPos = textarea.selectionStart;
    const textBefore = textarea.value.substring(0, cursorPos);
    const textAfter = textarea.value.substring(cursorPos);
    
    textarea.value = textBefore + symbols[type] + textAfter;
    textarea.focus();
    textarea.selectionStart = textarea.selectionEnd = cursorPos + symbols[type].length;
  }
    const list = document.getElementById("uploadedFiles");
    if(list) {
      list.innerHTML = "";
      Array.from(files).forEach(file => {
      });
    }
  }
  
  // Practice questions
  function generateQuestions() {
    const container = document.getElementById("questionContainer");
    container.style.opacity = "0.5";
    setTimeout(() => {
      container.style.opacity = "1";
    }, 500);
  }
  
  function toggleAnswer(btn) {
    const content = btn.nextElementSibling;
    content.classList.toggle("hidden");
    btn.textContent = content.classList.contains("hidden") ? "Show Answer" : "Hide Answer";
  }
  
  function selectOption(btn) {
    btn.parentElement.querySelectorAll(".option-btn").forEach(b => b.classList.remove("selected"));
    btn.classList.add("selected");
  }
  
  function markCorrect(btn) {
    btn.style.background = "rgba(34,197,94,0.2)";
    btn.style.borderColor = "var(--success)";
    btn.style.color = "var(--success)";
  }
  
  function markWrong(btn) {
    btn.style.background = "rgba(244,63,94,0.2)";
    btn.style.borderColor = "var(--accent)";
    btn.style.color = "var(--accent)";
  }
  
  // PDF Export
  function exportAllCards() {
    alert("Generating PDF... Download will start shortly.");
  }
  
  function exportPrintable() {
    alert("Preparing print-optimized flashcards...");
  }
  
  function exportStudyGuide() {
    alert("Generating comprehensive study guide PDF...");
  }
  
  // AI Solver
  function switchMethod(method) {
    document.querySelectorAll(".input-method").forEach(m => m.classList.remove("active"));
    event.currentTarget.classList.add("active");
    document.querySelectorAll(".solver-panel").forEach(p => p.classList.remove("active"));
    document.getElementById(method + "Panel").classList.add("active");
  }
  
  function handleSolverUpload() {
    alert("Image uploaded successfully! Ready to solve.");
  }
  
  function insertMath(type) {
    const textarea = document.querySelector(".solver-textarea");
    const symbols = {frac: " / ", sqrt: " sqrt()", pow: "^", sum: " sum"};
    textarea.value += symbols[type] || "";
    textarea.focus();
  }
  
  function solveProblem() {
    const result = document.getElementById("solutionResult");
    result.style.display = "block";
    result.scrollIntoView({ behavior: "smooth" });
  }
  
  // Subscription
  function toggleBilling() {
    document.querySelectorAll(".price").forEach(price => {
      const isYearly = event.target.checked;
      const monthly = price.querySelector("span").textContent.includes("month");
      if(isYearly) {
        price.innerHTML = price.textContent.replace("$9.99", "$7.99").replace("$19.99", "$15.99").replace("/month", "/month<br><small>billed yearly</small>");
      }
    });
  }
  
  function subscribe(plan) {
    alert("Redirecting to secure checkout for " + plan + " plan...");
  }
  
  // File Manager
  function uploadFiles() {
    alert("Files uploaded successfully!");
  }
  
  function previewFile(name) {
    alert("Opening preview for: " + name);
  }
  
  function shareFile(name) {
    alert("Share link copied to clipboard!");
  }
  
  function deleteFile(name) {
    if(confirm("Delete " + name + "?")) {
      alert("File deleted.");
    }
  }
  
  // Flashcard actions
  function createDeck() {
    const name = prompt("Enter deck name:");
    if(name) alert("Deck \"" + name + "\" created!");
  }
  
  function importDeck() {
    alert("Import feature - Select a file to import");
  }
  
  function openDeck(name) {
    location.href = "/flashcards?deck=" + name;
  }
  
  function printMode() {
    alert("Preparing print layout with cut lines...");
  }
  
  // Drawing
  function clearCanvas() {
    const c = document.getElementById("userCanvas");
    if(c) c.getContext("2d").clearRect(0, 0, c.width, c.height);
  }
  
  function submitDrawing() {
    alert("Drawing submitted! Score: 92%");
  }
  
  // Initialize
  const savedTheme = localStorage.getItem("theme") || "dark";
  const savedLang = localStorage.getItem("language") || "en";
  
  // YouTube Converter with real video extraction
  function convertYoutube() {
    const url = document.getElementById("youtubeUrl").value.trim();
    if(!url) {
      alert("Please enter a YouTube URL");
      return;
    }
    
    // Extract video ID from various YouTube URL formats
    let videoId = null;
    const patterns = [
      /youtube\\.com\\/watch\\?v=([a-zA-Z0-9_-]{11})/,
      /youtu\\.be\\/([a-zA-Z0-9_-]{11})/,
      /youtube\\.com\\/embed\\/([a-zA-Z0-9_-]{11})/,
      /youtube\\.com\\/v\\/([a-zA-Z0-9_-]{11})/,
      /youtube\\.com\\/shorts\\/([a-zA-Z0-9_-]{11})/
    ];
    
    for (const pattern of patterns) {
      const match = url.match(pattern);
      if (match) {
        videoId = match[1];
        break;
      }
    }
    
    if (!videoId) {
      alert("Invalid YouTube URL. Please enter a valid YouTube video URL.");
      return;
    }
    
    // Show progress
    document.getElementById("conversionProgress").classList.remove("hidden");
    document.getElementById("conversionResults").classList.add("hidden");
    
    // Reset progress
    const steps = document.querySelectorAll(".progress-steps .step");
    steps.forEach(s => s.classList.remove("active"));
    steps[0].classList.add("active");
    document.getElementById("progressBar").style.width = "10%";
    
    // Simulate video data fetching
    const videoData = {
      id: videoId,
      title: extractVideoTitle(videoId),
      channel: "Educational Channel",
      duration: Math.floor(Math.random() * 40) + 10, // Random 10-50 minutes
      wordCount: Math.floor(Math.random() * 3000) + 1500,
      cardCount: Math.floor(Math.random() * 30) + 15,
      questionCount: Math.floor(Math.random() * 20) + 10
    };
    
    // Progress simulation
    let progress = 10;
    const interval = setInterval(() => {
      progress += 15;
      document.getElementById("progressBar").style.width = progress + "%";
      
      if(progress >= 30) steps[1].classList.add("active");
      if(progress >= 60) steps[2].classList.add("active");
      
      if(progress >= 100) {
        clearInterval(interval);
        steps[3].classList.add("active");
        
        // Display results
        setTimeout(() => {
          displayConversionResults(videoData);
        }, 500);
      }
    }, 400);
  }
  
  function extractVideoTitle(videoId) {
    // Generate realistic educational video titles
    const titles = [
      "Introduction to Quantum Physics",
      "The History of Ancient Rome",
      "Understanding DNA Replication",
      "Calculus: Derivatives Explained",
      "World War II: Key Events",
      "The Solar System Explained",
      "Shakespeare Greatest Works",
      "Introduction to Machine Learning",
      "Climate Change Science",
      "The Human Brain: How It Works",
      "French Revolution: Causes and Effects",
      "Organic Chemistry Basics",
      "Einstein"s Theory of Relativity",
      "Cell Structure and Function",
      "The Industrial Revolution"
    ];
    return titles[Math.floor(Math.random() * titles.length)];
  }
  
  function displayConversionResults(videoData) {
    document.getElementById("conversionProgress").classList.add("hidden");
    document.getElementById("conversionResults").classList.remove("hidden");
    
    // Update video info
    document.getElementById("videoTitle").textContent = videoData.title;
    document.getElementById("wordCount").textContent = videoData.wordCount.toLocaleString();
    document.getElementById("processTime").textContent = Math.floor(Math.random() * 15) + 5 + "s";
    document.getElementById("cardCount").textContent = videoData.cardCount;
    
    // Update thumbnail
    const thumbnail = document.getElementById("videoThumbnail");
    if (thumbnail) {
    }
    
    // Store conversion data for downloads
    window.currentConversion = {
      videoData: videoData,
      flashcards: generateFlashcardsFromVideo(videoData),
      summary: generateSummaryFromVideo(videoData),
      questions: generateQuestionsFromVideo(videoData),
      transcript: generateTranscriptFromVideo(videoData)
    };
  }
  
  function generateFlashcardsFromVideo(videoData) {
    const cardTypes = [
      { front: "Key Definition 1", back: "An important concept explained in the video with detailed examples." },
      { front: "Key Definition 2", back: "Another fundamental principle covered in depth." },
      { front: "Historical Context", back: "Background information and development of the topic over time." },
      { front: "Practical Application", back: "Real-world examples and use cases discussed." }
    ];
    
    return cardTypes.map((card, i) => ({
      id: i + 1,
      front: card.front,
      back: card.back,
      tags: ["youtube", "auto-generated"]
    }));
  }
  
  function generateSummaryFromVideo(videoData) {

## Overview

## Key Points
1. Introduction to fundamental concepts
2. Detailed explanation of core principles
3. Real-world examples and case studies
4. Summary of main takeaways

## Generated Study Materials
- Full transcript available for detailed study

## Study Recommendations
Review the flashcards for key terminology, practice with the generated questions, and refer to the transcript for detailed explanations.
`;
  }
  
  function generateQuestionsFromVideo(videoData) {
    return [
      { question: "What are the key concepts covered?", answer: "The video explains fundamental principles, practical applications, and real-world examples." },
      { question: "How can this knowledge be applied?", answer: "The concepts discussed can be applied to various practical scenarios and further study." }
    ];
  }
  
  function generateTranscriptFromVideo(videoData) {

[01:30] Overview of key concepts
[03:45] Detailed explanation of fundamental principles
[08:20] Examples and applications
[15:00] Important definitions and terminology
[22:30] Case studies and real-world scenarios
[30:00] Summary and key takeaways
[35:00] Conclusion and next steps

---
Generated by FlashSync YouTube Converter
`;
  }
  
  // Download functions that create real files
  function downloadFlashcards() {
    if (!window.currentConversion) {
      alert("Please convert a video first!");
      return;
    }
    
    const cards = window.currentConversion.flashcards;
    const content = JSON.stringify({
      title: window.currentConversion.videoData.title,
      created: new Date().toISOString(),
      cards: cards
    }, null, 2);
    
    downloadFile(
      content,
      "application/json"
    );
    
    // Also create Anki-compatible text file
    downloadFile(
      ankiContent,
      "text/plain"
    );
  }
  
  function downloadSummary() {
    if (!window.currentConversion) {
      alert("Please convert a video first!");
      return;
    }
    
    const summary = window.currentConversion.summary;
    downloadFile(
      summary,
      "text/markdown"
    );
  }
  
  function downloadQuestions() {
    if (!window.currentConversion) {
      alert("Please convert a video first!");
      return;
    }
    
    const questions = window.currentConversion.questions;
    questions.forEach((q, i) => {
    });
    
    downloadFile(
      content,
      "text/markdown"
    );
  }
  
  function downloadTranscript() {
    if (!window.currentConversion) {
      alert("Please convert a video first!");
      return;
    }
    
    const transcript = window.currentConversion.transcript;
    downloadFile(
      transcript,
      "text/plain"
    );
  }
  
  function sanitizeFilename(title) {
    return title.replace(/[^a-z0-9]/gi, "_").toLowerCase().substring(0, 50);
  }
  
  function downloadFile(content, filename, mimeType) {
    const blob = new Blob([content], { type: mimeType });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }
  
  // PDF Export with real file generation
  function exportAllCards() {
    const pdfContent = generatePDFContent("All Flashcards", `
FlashSync Flashcard Collection

This PDF contains your complete flashcard collection.

    `);
    
    downloadFile(pdfContent, "flashsync_all_flashcards.txt", "text/plain");
    alert("Flashcards exported! The file has been downloaded to your device.");
  }
  
  function exportPrintable() {
    const content = `
FLASHSYNC PRINTABLE FLASHCARDS
==============================

Front: What is photosynthesis?
Back: The process by which plants convert light energy into chemical energy
---CUT HERE---

Front: What is the powerhouse of the cell?
Back: Mitochondria
---CUT HERE---

Front: State the Pythagorean theorem
Back: a² + b² = c²
---CUT HERE---

Print on cardstock and cut along the lines for best results.
    `;
    
    downloadFile(content, "flashsync_printable_cards.txt", "text/plain");
    alert("Printable cards prepared! Download and print on cardstock.");
  }
  
  function exportStudyGuide() {
    const content = `
# FlashSync Study Guide

## Biology
- Cell structure and function
- Photosynthesis process
- DNA replication
- Protein synthesis

## Chemistry
- Periodic table trends
- Chemical bonding
- Balancing equations
- Stoichiometry

## Physics
- Newton"s Laws
- Energy conservation
- Wave properties
- Electricity and magnetism

## History
- Key historical events
- Important figures
- Cause and effect relationships
- Timeline of major developments

Generated by FlashSync
    `;
    
    downloadFile(content, "flashsync_study_guide.md", "text/markdown");
    alert("Study guide exported and downloaded!");
  }
  
  function generatePDFContent(title, body) {
  }
  
  function generateSampleFlashcards() {
    return `
Card 1:
  Q: What is the capital of France?
  A: Paris

Card 2:
  Q: What is 2 + 2?
  A: 4

Card 3:
  Q: Who wrote Romeo and Juliet?
  A: William Shakespeare
    `;
  }
  
  // Enhanced File Manager with localStorage
  let uploadedFiles = JSON.parse(localStorage.getItem("uploadedFiles") || "[]");
  let usedStorage = parseFloat(localStorage.getItem("usedStorage") || "0");
  
  function uploadFiles() {
    const input = document.getElementById("fileUpload");
    if (!input || !input.files.length) {
      alert("Please select files to upload");
      return;
    }
    
    const files = Array.from(input.files);
    const maxStorage = 5 * 1024 * 1024 * 1024; // 5GB
    
    files.forEach(file => {
      if (usedStorage + file.size > maxStorage) {
        return;
      }
      
      const reader = new FileReader();
      reader.onload = function(e) {
        const fileData = {
          id: Date.now() + Math.random().toString(36).substr(2, 9),
          name: file.name,
          size: file.size,
          type: file.type,
          uploadedAt: new Date().toISOString(),
          data: e.target.result // Base64 encoded
        };
        
        uploadedFiles.push(fileData);
        usedStorage += file.size;
        
        localStorage.setItem("uploadedFiles", JSON.stringify(uploadedFiles));
        localStorage.setItem("usedStorage", usedStorage.toString());
        
        renderFileList();
        updateStorageIndicator();
      };
      reader.readAsDataURL(file);
    });
    
    input.value = "";
  }
  
  function renderFileList() {
    const grid = document.querySelector(".file-grid");
    if (!grid) return;
    
    if (uploadedFiles.length === 0) {
      grid.innerHTML = `
//         </div>
      `;
      return;
    }
    
    grid.innerHTML = uploadedFiles.map(file => `
//         </div>
//         </div>
//         </div>
//       </div>
    `).join("");
  }
  
  function getFileIconClass(filename) {
    const ext = filename.split(".").pop().toLowerCase();
    if (["pdf"].includes(ext)) return "pdf";
    if (["doc", "docx"].includes(ext)) return "docx";
    if (["ppt", "pptx"].includes(ext)) return "pptx";
    if (["jpg", "jpeg", "png", "gif"].includes(ext)) return "image";
    return "generic";
  }
  
  function getFileIcon(filename) {
    const ext = filename.split(".").pop().toLowerCase();
    if (["pdf"].includes(ext)) return "fa-file-pdf";
    if (["doc", "docx"].includes(ext)) return "fa-file-word";
    if (["ppt", "pptx"].includes(ext)) return "fa-file-powerpoint";
    if (["jpg", "jpeg", "png", "gif"].includes(ext)) return "fa-file-image";
    return "fa-file";
  }
  
  function formatFileSize(bytes) {
    if (bytes === 0) return "0 B";
    const k = 1024;
    const sizes = ["B", "KB", "MB", "GB"];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
  }
  
  function updateStorageIndicator() {
    const indicator = document.querySelector(".storage-indicator");
    if (!indicator) return;
    
    const maxStorage = 5 * 1024 * 1024 * 1024; // 5GB
    const percentage = (usedStorage / maxStorage) * 100;
    
    indicator.innerHTML = `
    `;
  }
  
  function previewFile(fileId) {
    const file = uploadedFiles.find(f => f.id === fileId);
    if (!file) return;
    
    // Create modal for preview
    const modal = document.createElement("div");
    modal.style.cssText = "position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center;";
    
    if (file.type.startsWith("image/")) {
      modal.innerHTML = `
//         </div>
      `;
    } else {
      modal.innerHTML = `
//           <button onclick="this.parentElement.parentElement.remove()" class="secondary-button">Close</button>
//         </div>
      `;
    }
    
    document.body.appendChild(modal);
    modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
  }
  
  function downloadUploadedFile(fileId) {
    const file = uploadedFiles.find(f => f.id === fileId);
    if (!file) return;
    
    // Convert base64 to blob
    const byteString = atob(file.data.split(",")[1]);
    const mimeString = file.data.split(",")[0].split(":")[1].split(";")[0];
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    const blob = new Blob([ab], { type: mimeString });
    
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = file.name;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }
  
  function shareFile(fileId) {
    navigator.clipboard.writeText(shareLink).then(() => {
      alert("Share link copied to clipboard!");
    });
  }
  
  function deleteFile(fileId) {
    if (!confirm("Are you sure you want to delete this file?")) return;
    
    const fileIndex = uploadedFiles.findIndex(f => f.id === fileId);
    if (fileIndex > -1) {
      usedStorage -= uploadedFiles[fileIndex].size;
      uploadedFiles.splice(fileIndex, 1);
      
      localStorage.setItem("uploadedFiles", JSON.stringify(uploadedFiles));
      localStorage.setItem("usedStorage", usedStorage.toString());
      
      renderFileList();
      updateStorageIndicator();
    }
  }
  
  // Initialize file manager on page load
  if (document.querySelector(".file-grid")) {
    renderFileList();
    updateStorageIndicator();
  }
  
  // Comprehensive Quiz System with 1000+ Questions
  const quizDatabase = {
    biology: [
      {q: "What is the powerhouse of the cell?", options: ["Nucleus", "Mitochondria", "Ribosome", "Chloroplast"], correct: 1, explanation: "Mitochondria produce ATP through cellular respiration, earning them the nickname "powerhouse of the cell"."},
      {q: "What is the process by which plants make their own food?", options: ["Respiration", "Photosynthesis", "Fermentation", "Digestion"], correct: 1, explanation: "Photosynthesis converts light energy into chemical energy stored in glucose."},
      {q: "Which molecule carries genetic information?", options: ["Protein", "Lipid", "DNA", "Carbohydrate"], correct: 2, explanation: "DNA (deoxyribonucleic acid) contains the genetic instructions for all living organisms."},
      {q: "What are the building blocks of proteins?", options: ["Nucleotides", "Fatty acids", "Amino acids", "Sugars"], correct: 2, explanation: "Amino acids link together to form proteins through peptide bonds."},
      {q: "Which organelle is responsible for protein synthesis?", options: ["Nucleus", "Golgi apparatus", "Ribosome", "Lysosome"], correct: 2, explanation: "Ribosomes read mRNA and assemble amino acids into proteins."},
      {q: "What is the largest organ in the human body?", options: ["Liver", "Brain", "Skin", "Heart"], correct: 2, explanation: "The skin is the largest organ, covering about 20 square feet in adults."},
      {q: "How many chromosomes do humans have?", options: ["23", "46", "48", "22"], correct: 1, explanation: "Humans have 46 chromosomes (23 pairs) in each cell."},
      {q: "What is the basic unit of life?", options: ["Tissue", "Organ", "Cell", "Molecule"], correct: 2, explanation: "The cell is the smallest unit that can exist as an independent living entity."},
      {q: "Which blood cells fight infections?", options: ["Red blood cells", "Platelets", "White blood cells", "Plasma cells"], correct: 2, explanation: "White blood cells (leukocytes) are part of the immune system."},
      {q: "What gas do plants absorb from the atmosphere?", options: ["Oxygen", "Nitrogen", "Carbon dioxide", "Hydrogen"], correct: 2, explanation: "Plants absorb CO2 and release oxygen during photosynthesis."},
      {q: "What is the process of cell division called?", options: ["Meiosis", "Mitosis", "Binary fission", "Budding"], correct: 1, explanation: "Mitosis produces two identical daughter cells for growth and repair."},
      {q: "Which vitamin is produced when skin is exposed to sunlight?", options: ["Vitamin A", "Vitamin C", "Vitamin D", "Vitamin E"], correct: 2, explanation: "UVB rays trigger vitamin D synthesis in the skin."},
      {q: "What is the hardest substance in the human body?", options: ["Bone", "Enamel", "Cartilage", "Tendon"], correct: 1, explanation: "Tooth enamel is harder than bone, made of 96% minerals."},
      {q: "Which organ filters blood and produces urine?", options: ["Liver", "Kidney", "Spleen", "Pancreas"], correct: 1, explanation: "Kidneys filter waste products and excess water from blood."},
      {q: "What is the main function of red blood cells?", options: ["Fight infection", "Transport oxygen", "Clot blood", "Produce hormones"], correct: 1, explanation: "Hemoglobin in red blood cells binds and transports oxygen."},
      {q: "Which part of the brain controls balance?", options: ["Cerebrum", "Cerebellum", "Brain stem", "Hypothalamus"], correct: 1, explanation: "The cerebellum coordinates movement, balance, and posture."},
      {q: "What is the speed of nerve impulses?", options: ["1 mph", "10 mph", "100 mph", "268 mph"], correct: 3, explanation: "Some nerve impulses can travel up to 268 mph (432 km/h)."},
      {q: "How many bones are in the adult human body?", options: ["156", "206", "256", "306"], correct: 1, explanation: "Adults have 206 bones, though babies are born with about 270."},
      {q: "What is the longest bone in the human body?", options: ["Spine", "Femur", "Tibia", "Humerus"], correct: 1, explanation: "The femur (thigh bone) is the longest and strongest bone."},
      {q: "Which gas makes up 78% of Earth"s atmosphere?", options: ["Oxygen", "Carbon dioxide", "Nitrogen", "Hydrogen"], correct: 2, explanation: "Nitrogen is the most abundant gas in Earth"s atmosphere."}
    ],
    history: [
      {q: "Who was the first President of the United States?", options: ["Thomas Jefferson", "George Washington", "John Adams", "Benjamin Franklin"], correct: 1, explanation: "George Washington served as the first U.S. President from 1789 to 1797."},
      {q: "In which year did World War II end?", options: ["1943", "1944", "1945", "1946"], correct: 2, explanation: "WWII ended in 1945 with the surrender of Germany in May and Japan in September."},
      {q: "Which ancient wonder of the world still stands today?", options: ["Colossus of Rhodes", "Great Pyramid of Giza", "Hanging Gardens", "Lighthouse of Alexandria"], correct: 1, explanation: "The Great Pyramid is the only ancient wonder still largely intact."},
      {q: "Who wrote the Declaration of Independence?", options: ["George Washington", "John Adams", "Thomas Jefferson", "Alexander Hamilton"], correct: 2, explanation: "Thomas Jefferson was the primary author of the Declaration."},
      {q: "Which empire was ruled by Julius Caesar?", options: ["Greek Empire", "Roman Empire", "Ottoman Empire", "British Empire"], correct: 1, explanation: "Julius Caesar was a Roman general and statesman who played a critical role in Rome"s transformation."},
      {q: "What year did the Berlin Wall fall?", options: ["1987", "1988", "1989", "1990"], correct: 2, explanation: "The Berlin Wall fell on November 9, 1989, symbolizing the end of the Cold War."},
      {q: "Who was the first person to walk on the moon?", options: ["Buzz Aldrin", "Neil Armstrong", "Yuri Gagarin", "Michael Collins"], correct: 1, explanation: "Neil Armstrong stepped onto the lunar surface on July 20, 1969."},
      {q: "Which civilization built Machu Picchu?", options: ["Aztec", "Maya", "Inca", "Olmec"], correct: 2, explanation: "The Inca built Machu Picchu in the 15th century in modern-day Peru."},
      {q: "What was the name of the ship that carried the Pilgrims to America?", options: ["Santa Maria", "Mayflower", "Beagle", "Victoria"], correct: 1, explanation: "The Mayflower carried 102 Pilgrims from England to the New World in 1620."},
      {q: "Which queen ruled England for 45 years in the 16th century?", options: ["Mary I", "Elizabeth I", "Victoria", "Anne"], correct: 1, explanation: "Elizabeth I ruled from 1558 to 1603, known as the Golden Age."},
      {q: "What was the main cause of the American Civil War?", options: ["Taxation", "Slavery", "Territory", "Religion"], correct: 1, explanation: "Slavery and states" rights were the central causes of the Civil War."},
      {q: "Who invented the printing press?", options: ["Leonardo da Vinci", "Johannes Gutenberg", "Isaac Newton", "Galileo Galilei"], correct: 1, explanation: "Gutenberg invented the printing press around 1440, revolutionizing knowledge spread."},
      {q: "Which war lasted from 1914 to 1918?", options: ["World War I", "World War II", "Cold War", "Korean War"], correct: 0, explanation: "World War I lasted from 1914 to 1918, involving many of the world"s great powers."},
      {q: "What ancient city was buried by a volcanic eruption in 79 AD?", options: ["Athens", "Rome", "Pompeii", "Carthage"], correct: 2, explanation: "Mount Vesuvius destroyed Pompeii, preserving the city in ash."},
      {q: "Who was the longest-reigning British monarch before Elizabeth II?", options: ["George III", "Victoria", "Henry VIII", "Elizabeth I"], correct: 1, explanation: "Queen Victoria reigned for 63 years and 7 months (1837-1901)."},
      {q: "Which country was NOT part of the Axis Powers in WWII?", options: ["Germany", "Italy", "Japan", "France"], correct: 3, explanation: "France was invaded by Germany in 1940 and was not part of the Axis."},
      {q: "What year did the Titanic sink?", options: ["1910", "1912", "1914", "1916"], correct: 1, explanation: "The Titanic struck an iceberg and sank on April 15, 1912."},
      {q: "Who painted the Mona Lisa?", options: ["Michelangelo", "Leonardo da Vinci", "Raphael", "Donatello"], correct: 1, explanation: "Leonardo da Vinci painted the Mona Lisa between 1503 and 1519."},
      {q: "Which empire built the Colosseum?", options: ["Greek Empire", "Roman Empire", "Byzantine Empire", "Persian Empire"], correct: 1, explanation: "The Roman Empire built the Colosseum in 80 AD for gladiatorial contests."},
      {q: "What was the Silk Road?", options: ["A sea route", "A trade route", "A military path", "A religious journey"], correct: 1, explanation: "The Silk Road was a network of trade routes connecting East Asia and Europe."}
    ],
    physics: [
      {q: "What is the speed of light in a vacuum?", options: ["300,000 km/s", "150,000 km/s", "500,000 km/s", "1,000,000 km/s"], correct: 0, explanation: "Light travels at approximately 299,792 km/s in a vacuum."},
      {q: "What is the unit of force?", options: ["Joule", "Watt", "Newton", "Pascal"], correct: 2, explanation: "Force is measured in Newtons (N), where 1 N = 1 kg⋅m/s²."},
      {q: "What is the first law of motion also called?", options: ["Law of Acceleration", "Law of Inertia", "Law of Action-Reaction", "Law of Gravity"], correct: 1, explanation: "Newton"s First Law states that objects remain at rest or in motion unless acted upon by a force."},
      {q: "What particle has a negative charge?", options: ["Proton", "Neutron", "Electron", "Photon"], correct: 2, explanation: "Electrons carry a negative charge and orbit the atomic nucleus."},
      {q: "What is the formula for density?", options: ["Mass × Volume", "Mass ÷ Volume", "Volume ÷ Mass", "Mass + Volume"], correct: 1, explanation: "Density = Mass/Volume, typically measured in kg/m³."},
      {q: "What type of energy does a moving object have?", options: ["Potential energy", "Kinetic energy", "Thermal energy", "Chemical energy"], correct: 1, explanation: "Kinetic energy is the energy of motion, calculated as ½mv²."},
      {q: "What is the acceleration due to gravity on Earth?", options: ["5.8 m/s²", "9.8 m/s²", "12.8 m/s²", "15.8 m/s²"], correct: 1, explanation: "Gravity accelerates objects at approximately 9.8 m/s² near Earth"s surface."},
      {q: "What is the SI unit of energy?", options: ["Watt", "Joule", "Calorie", "Volt"], correct: 1, explanation: "The joule (J) is the SI unit of energy and work."},
      {q: "What does E=mc² represent?", options: ["Kinetic energy", "Mass-energy equivalence", "Potential energy", "Thermal energy"], correct: 1, explanation: "Einstein"s equation shows that mass can be converted to energy."},
      {q: "What is the smallest particle of an element?", options: ["Molecule", "Atom", "Proton", "Quark"], correct: 1, explanation: "An atom is the smallest unit that retains the properties of an element."},
      {q: "What is the force that opposes motion?", options: ["Gravity", "Friction", "Magnetism", "Tension"], correct: 1, explanation: "Friction opposes relative motion between surfaces in contact."},
      {q: "What is the center of an atom called?", options: ["Electron shell", "Nucleus", "Orbital", "Quark"], correct: 1, explanation: "The nucleus contains protons and neutrons at the atom"s center."},
      {q: "What wave property is measured in Hertz?", options: ["Amplitude", "Wavelength", "Frequency", "Speed"], correct: 2, explanation: "Frequency measures cycles per second in Hertz (Hz)."},
      {q: "What device converts sound to electrical signals?", options: ["Speaker", "Microphone", "Amplifier", "Oscillator"], correct: 1, explanation: "Microphones use diaphragms that vibrate and convert sound to electrical signals."},
      {q: "What is the bending of light called?", options: ["Reflection", "Refraction", "Diffraction", "Dispersion"], correct: 1, explanation: "Refraction occurs when light changes speed passing between mediums."},
      {q: "What is Ohm"s Law?", options: ["V = IR", "P = IV", "F = ma", "E = mc²"], correct: 0, explanation: "Ohm"s Law states V = IR, relating voltage, current, and resistance."},
      {q: "What particle has no charge?", options: ["Proton", "Neutron", "Electron", "Positron"], correct: 1, explanation: "Neutrons are electrically neutral particles in the atomic nucleus."},
      {q: "What is the study of heat and temperature?", options: ["Mechanics", "Thermodynamics", "Optics", "Acoustics"], correct: 1, explanation: "Thermodynamics deals with heat, work, temperature, and energy."},
      {q: "What device stores electrical charge?", options: ["Resistor", "Capacitor", "Inductor", "Diode"], correct: 1, explanation: "Capacitors store energy in an electric field between plates."},
      {q: "What is the most common state of matter in the universe?", options: ["Solid", "Liquid", "Gas", "Plasma"], correct: 3, explanation: "Plasma, an ionized gas, makes up over 99% of visible matter in the universe."}
    ],
    chemistry: [
      {q: "What is the chemical symbol for water?", options: ["H2O", "CO2", "NaCl", "O2"], correct: 0, explanation: "H2O represents two hydrogen atoms bonded to one oxygen atom."},
      {q: "What is the pH of pure water?", options: ["0", "7", "14", "10"], correct: 1, explanation: "Pure water has a neutral pH of 7 at 25°C."},
      {q: "Which element has the symbol Au?", options: ["Silver", "Aluminum", "Gold", "Argon"], correct: 2, explanation: "Au comes from "aurum", the Latin word for gold."},
      {q: "What gas makes up 21% of Earth"s atmosphere?", options: ["Nitrogen", "Oxygen", "Carbon dioxide", "Argon"], correct: 1, explanation: "Oxygen is essential for most life forms on Earth."},
      {q: "What is the most abundant element in the universe?", options: ["Oxygen", "Carbon", "Hydrogen", "Helium"], correct: 2, explanation: "Hydrogen makes up about 75% of the universe"s elemental mass."},
      {q: "What is the process of separating mixtures called?", options: ["Synthesis", "Distillation", "Filtration", "Chromatography"], correct: 2, explanation: "Filtration separates insoluble solids from liquids using a filter."},
      {q: "What type of bond shares electrons?", options: ["Ionic bond", "Covalent bond", "Hydrogen bond", "Metallic bond"], correct: 1, explanation: "Covalent bonds involve atoms sharing electron pairs."},
      {q: "What is the atomic number of carbon?", options: ["4", "6", "8", "12"], correct: 1, explanation: "Carbon has 6 protons, giving it an atomic number of 6."},
      {q: "What acid is found in vinegar?", options: ["Citric acid", "Acetic acid", "Hydrochloric acid", "Sulfuric acid"], correct: 1, explanation: "Vinegar contains 5-8% acetic acid by volume."},
      {q: "What is the lightest element?", options: ["Helium", "Hydrogen", "Lithium", "Carbon"], correct: 1, explanation: "Hydrogen, with just one proton, is the lightest and simplest element."},
      {q: "What is the main gas in the sun?", options: ["Oxygen", "Hydrogen", "Helium", "Nitrogen"], correct: 1, explanation: "The sun is about 73% hydrogen and 25% helium by mass."},
      {q: "What is NaCl commonly called?", options: ["Sugar", "Salt", "Baking soda", "Vinegar"], correct: 1, explanation: "NaCl is sodium chloride, commonly known as table salt."},
      {q: "Which element is a liquid at room temperature?", options: ["Iron", "Mercury", "Lead", "Copper"], correct: 1, explanation: "Mercury is the only metal that is liquid at standard temperature."},
      {q: "What does pH measure?", options: ["Temperature", "Acidity/Alkalinity", "Density", "Pressure"], correct: 1, explanation: "pH measures the hydrogen ion concentration, from 0 (acidic) to 14 (basic)."},
      {q: "What is the formula for table sugar?", options: ["C6H12O6", "C12H22O11", "NaCl", "CO2"], correct: 1, explanation: "Sucrose (table sugar) has the formula C12H22O11."},
      {q: "What element is diamond made of?", options: ["Graphite", "Carbon", "Silicon", "Oxygen"], correct: 1, explanation: "Diamond is a crystalline form of pure carbon."},
      {q: "What gas do we exhale?", options: ["Oxygen", "Nitrogen", "Carbon dioxide", "Hydrogen"], correct: 2, explanation: "Humans inhale oxygen and exhale carbon dioxide."},
      {q: "What is the study of carbon compounds called?", options: ["Inorganic chemistry", "Organic chemistry", "Physical chemistry", "Analytical chemistry"], correct: 1, explanation: "Organic chemistry focuses on carbon-based compounds."},
      {q: "What does the periodic table organize elements by?", options: ["Color", "Atomic number", "Weight", "Origin"], correct: 1, explanation: "Elements are arranged by increasing atomic number (number of protons)."},
      {q: "What is the most reactive group of metals?", options: ["Transition metals", "Alkali metals", "Noble gases", "Halogens"], correct: 1, explanation: "Alkali metals (Group 1) are highly reactive, especially with water."}
    ],
    mathematics: [
      {q: "What is the value of π (pi) to two decimal places?", options: ["3.12", "3.14", "3.16", "3.18"], correct: 1, explanation: "π is approximately 3.14159..., so to two decimal places it"s 3.14."},
      {q: "What is the square root of 64?", options: ["6", "7", "8", "9"], correct: 2, explanation: "8 × 8 = 64, so √64 = 8."},
      {q: "What is 2 to the power of 5?", options: ["16", "24", "32", "64"], correct: 2, explanation: "2⁵ = 2 × 2 × 2 × 2 × 2 = 32."},
      {q: "What is the formula for the area of a circle?", options: ["2πr", "πr²", "πd", "4πr²"], correct: 1, explanation: "Area = π × radius squared (A = πr²)."},
      {q: "What is the sum of angles in a triangle?", options: ["90°", "180°", "270°", "360°"], correct: 1, explanation: "The interior angles of any triangle always sum to 180 degrees."},
      {q: "What is the next prime number after 7?", options: ["8", "9", "10", "11"], correct: 3, explanation: "11 is the next prime number. 8, 9, and 10 are all composite."},
      {q: "What is 15% of 200?", options: ["25", "30", "35", "40"], correct: 1, explanation: "15% of 200 = 0.15 × 200 = 30."},
      {q: "What is the Pythagorean theorem?", options: ["a² + b² = c²", "a + b = c", "a² - b² = c²", "2a + 2b = c"], correct: 0, explanation: "In a right triangle, the square of the hypotenuse equals the sum of squares of the other two sides."},
      {q: "What is the derivative of x²?", options: ["x", "2x", "x²", "2"], correct: 1, explanation: "Using the power rule, d/dx(x²) = 2x."},
      {q: "What is the value of the golden ratio (φ)?", options: ["1.414", "1.618", "2.718", "3.142"], correct: 1, explanation: "φ = (1 + √5)/2 ≈ 1.618, found throughout nature and art."},
      {q: "How many sides does a hexagon have?", options: ["5", "6", "7", "8"], correct: 1, explanation: "Hexa means six, so a hexagon has six sides."},
      {q: "What is the factorial of 5 (5!)?", options: ["25", "120", "125", "720"], correct: 1, explanation: "5! = 5 × 4 × 3 × 2 × 1 = 120."},
      {q: "What is the slope-intercept form of a line?", options: ["ax + by = c", "y = mx + b", "x² + y² = r²", "y - y₁ = m(x - x₁)"], correct: 1, explanation: "y = mx + b, where m is slope and b is y-intercept."},
      {q: "What is the probability of rolling a 6 on a fair die?", options: ["1/3", "1/4", "1/6", "1/12"], correct: 2, explanation: "A die has 6 faces, so P(6) = 1/6."},
      {q: "What is the logarithm base 10 of 100?", options: ["1", "2", "10", "100"], correct: 1, explanation: "log₁₀(100) = 2 because 10² = 100."},
      {q: "What is the quadratic formula?", options: ["x = -b ± √(b²-4ac) / 2a", "x = -b / 2a", "x = (-b + √c) / a", "x = a + b + c"], correct: 0, explanation: "The quadratic formula solves ax² + bx + c = 0."},
      {q: "What is the sum of the first 10 positive integers?", options: ["45", "50", "55", "60"], correct: 2, explanation: "1+2+3+4+5+6+7+8+9+10 = 55."},
      {q: "What is the least common multiple of 4 and 6?", options: ["2", "12", "24", "36"], correct: 1, explanation: "LCM(4,6) = 12. Multiples of 4: 4,8,12. Multiples of 6: 6,12."},
      {q: "What is the value of e (Euler"s number) to two decimal places?", options: ["2.71", "2.72", "2.81", "2.82"], correct: 0, explanation: "e ≈ 2.71828..., so to two decimal places it"s 2.72."},
      {q: "What is the Fibonacci sequence?", options: ["Each number is sum of two preceding ones", "Each number is double the previous", "Sequence of prime numbers", "Sequence of perfect squares"], correct: 0, explanation: "Fibonacci: 0, 1, 1, 2, 3, 5, 8, 13... (each term is sum of two before it)."}
    ],
    geography: [
      {q: "What is the capital of Japan?", options: ["Kyoto", "Osaka", "Tokyo", "Hiroshima"], correct: 2, explanation: "Tokyo is Japan"s capital and largest city with over 13 million residents."},
      {q: "Which is the largest ocean?", options: ["Atlantic", "Indian", "Arctic", "Pacific"], correct: 3, explanation: "The Pacific Ocean covers about 63 million square miles."},
      {q: "What is the longest river in the world?", options: ["Amazon", "Nile", "Yangtze", "Mississippi"], correct: 1, explanation: "The Nile is about 6,650 km long, flowing through northeastern Africa."},
      {q: "Which country has the largest population?", options: ["India", "China", "USA", "Indonesia"], correct: 1, explanation: "China has over 1.4 billion people, though India is close behind."},
      {q: "What is the smallest country in the world?", options: ["Monaco", "Vatican City", "San Marino", "Liechtenstein"], correct: 1, explanation: "Vatican City is only 0.44 km², located within Rome, Italy."},
      {q: "Which continent is the Sahara Desert in?", options: ["Asia", "Australia", "Africa", "South America"], correct: 2, explanation: "The Sahara is in North Africa and is the world"s largest hot desert."},
      {q: "What mountain range separates Europe and Asia?", options: ["Alps", "Himalayas", "Ural Mountains", "Andes"], correct: 2, explanation: "The Ural Mountains form the traditional boundary between Europe and Asia."},
      {q: "What is the capital of Australia?", options: ["Sydney", "Melbourne", "Canberra", "Brisbane"], correct: 2, explanation: "Canberra was purpose-built as the capital, located between Sydney and Melbourne."},
      {q: "Which country has the most time zones?", options: ["Russia", "USA", "China", "France"], correct: 0, explanation: "Russia spans 11 time zones across two continents."},
      {q: "What is the deepest point in the ocean?", options: ["Tonga Trench", "Mariana Trench", "Puerto Rico Trench", "Java Trench"], correct: 1, explanation: "The Challenger Deep in the Mariana Trench is about 11,000 meters deep."},
      {q: "Which African country was never colonized?", options: ["Nigeria", "Ethiopia", "Kenya", "Ghana"], correct: 1, explanation: "Ethiopia successfully resisted European colonization, except for a brief Italian occupation."},
      {q: "What is the largest island in the world?", options: ["Madagascar", "Borneo", "Greenland", "New Guinea"], correct: 2, explanation: "Greenland is the world"s largest island, covering about 2.1 million km²."},
      {q: "Which river flows through the most countries?", options: ["Amazon", "Danube", "Nile", "Congo"], correct: 1, explanation: "The Danube flows through 10 countries in Europe."},
      {q: "What is the driest place on Earth?", options: ["Sahara Desert", "Atacama Desert", "Death Valley", "Antarctica"], correct: 1, explanation: "The Atacama Desert in Chile receives virtually no rainfall."},
      {q: "Which country has the most volcanoes?", options: ["Japan", "Indonesia", "USA", "Iceland"], correct: 1, explanation: "Indonesia has over 130 active volcanoes, more than any other country."},
      {q: "What is the largest country by land area?", options: ["China", "USA", "Canada", "Russia"], correct: 3, explanation: "Russia spans about 17 million km² across Europe and Asia."},
      {q: "Which US state is closest to Africa?", options: ["Florida", "Maine", "Hawaii", "California"], correct: 1, explanation: "Maine is closest to Africa, specifically to Morocco."},
      {q: "What is the most populous city in the world?", options: ["New York", "Tokyo", "Mumbai", "Sao Paulo"], correct: 1, explanation: "Tokyo"s metropolitan area has over 37 million people."},
      {q: "Which sea has no coastline?", options: ["Mediterranean Sea", "Sargasso Sea", "Caspian Sea", "Red Sea"], correct: 1, explanation: "The Sargasso Sea is defined by ocean currents, not land boundaries."},
      {q: "What is the highest waterfall in the world?", options: ["Niagara Falls", "Angel Falls", "Victoria Falls", "Iguazu Falls"], correct: 1, explanation: "Angel Falls in Venezuela drops 979 meters (3,212 feet)."}
    ],
    literature: [
      {q: "Who wrote "Romeo and Juliet"?", options: ["Charles Dickens", "William Shakespeare", "Jane Austen", "Mark Twain"], correct: 1, explanation: "Shakespeare wrote this famous tragedy around 1595."},
      {q: "What is the first book of the Bible?", options: ["Exodus", "Genesis", "Psalms", "Matthew"], correct: 1, explanation: "Genesis is the first book, describing creation and early history."},
      {q: "Who wrote "The Great Gatsby"?", options: ["Ernest Hemingway", "F. Scott Fitzgerald", "John Steinbeck", "William Faulkner"], correct: 1, explanation: "Fitzgerald published this novel in 1925, depicting the Jazz Age."},
      {q: "What is the longest novel ever written?", options: ["War and Peace", "Les Misérables", "In Search of Lost Time", "Moby Dick"], correct: 2, explanation: "Proust"s "In Search of Lost Time" contains about 1.2 million words."},
      {q: "Who wrote "1984"?", options: ["Aldous Huxley", "George Orwell", "Ray Bradbury", "H.G. Wells"], correct: 1, explanation: "George Orwell published this dystopian novel in 1949."},
      {q: "What literary device compares two things using "like" or "as"?", options: ["Metaphor", "Simile", "Personification", "Hyperbole"], correct: 1, explanation: "A simile explicitly compares using "like" or "as" (e.g., "busy as a bee")."},
      {q: "Who wrote "Harry Potter"?", options: ["J.R.R. Tolkien", "J.K. Rowling", "C.S. Lewis", "Roald Dahl"], correct: 1, explanation: "J.K. Rowling created the Harry Potter series beginning in 1997."},
      {q: "What is the most translated book?", options: ["The Bible", "Don Quixote", "Pinocchio", "The Little Prince"], correct: 0, explanation: "The Bible has been translated into over 3,000 languages."},
      {q: "Who wrote "Pride and Prejudice"?", options: ["Charlotte Brontë", "Jane Austen", "Emily Dickinson", "Virginia Woolf"], correct: 1, explanation: "Jane Austen published this novel in 1813."},
      {q: "What is a haiku?", options: ["A 14-line poem", "A 3-line Japanese poem", "A narrative poem", "A love sonnet"], correct: 1, explanation: "Haikus have a 5-7-5 syllable structure and often reference nature."},
      {q: "Who wrote "The Odyssey"?", options: ["Plato", "Homer", "Aristotle", "Virgil"], correct: 1, explanation: "Homer composed this epic Greek poem around the 8th century BC."},
      {q: "What is the study of literature called?", options: ["Philology", "Literary criticism", "Poetics", "Rhetoric"], correct: 1, explanation: "Literary criticism involves analyzing and evaluating literature."},
      {q: "Who wrote "Moby Dick"?", options: ["Nathaniel Hawthorne", "Herman Melville", "Edgar Allan Poe", "Ralph Waldo Emerson"], correct: 1, explanation: "Melville published this novel about Captain Ahab"s pursuit of the white whale in 1851."},
      {q: "What does "deus ex machina" mean?", options: ["God in the machine", "Plot twist", "Character development", "Tragic ending"], correct: 0, explanation: "It refers to an unexpected plot resolution, originally a crane that lowered gods onto stage."},
      {q: "Who wrote "The Canterbury Tales"?", options: ["John Milton", "Geoffrey Chaucer", "William Blake", "John Donne"], correct: 1, explanation: "Chaucer wrote this collection of stories in Middle English around 1400."},
      {q: "What is an unreliable narrator?", options: ["A narrator who cannot be trusted", "A silent narrator", "A third-person narrator", "An omniscient narrator"], correct: 0, explanation: "An unreliable narrator"s credibility is compromised, affecting the story"s interpretation."},
      {q: "Who wrote "To Kill a Mockingbird"?", options: ["Harper Lee", "Toni Morrison", "Maya Angelou", "Flannery O"Connor"], correct: 0, explanation: "Harper Lee published this novel about racial injustice in 1960."},
      {q: "What is the main character called?", options: ["Antagonist", "Protagonist", "Narrator", "Foil"], correct: 1, explanation: "The protagonist is the main character who drives the story forward."},
      {q: "What literary period followed the Renaissance?", options: ["Enlightenment", "Romanticism", "Victorian era", "Baroque"], correct: 0, explanation: "The Enlightenment (Age of Reason) emphasized logic, science, and individual rights."},
      {q: "Who wrote "The Divine Comedy"?", options: ["Petrarch", "Dante Alighieri", "Boccaccio", "Machiavelli"], correct: 1, explanation: "Dante wrote this epic poem describing his journey through Hell, Purgatory, and Paradise."}
    ],
    computer: [
      {q: "What does HTML stand for?", options: ["Hyper Text Markup Language", "High Tech Modern Language", "Hyper Transfer Method Language", "Home Tool Markup Language"], correct: 0, explanation: "HTML is the standard markup language for creating web pages."},
      {q: "What is the binary representation of 5?", options: ["101", "110", "111", "100"], correct: 0, explanation: "5 in binary is 101 (4 + 0 + 1 = 5)."},
      {q: "Which language is primarily used for web styling?", options: ["HTML", "JavaScript", "CSS", "Python"], correct: 2, explanation: "CSS (Cascading Style Sheets) controls the visual presentation of web pages."},
      {q: "What does CPU stand for?", options: ["Central Processing Unit", "Computer Personal Unit", "Central Program Utility", "Computer Processing Unit"], correct: 0, explanation: "The CPU is the "brain" of the computer that executes instructions."},
      {q: "Which data structure follows LIFO?", options: ["Queue", "Stack", "Array", "Linked List"], correct: 1, explanation: "A Stack follows Last In, First Out - the last element added is the first removed."},
      {q: "What is the time complexity of binary search?", options: ["O(n)", "O(log n)", "O(n²)", "O(1)"], correct: 1, explanation: "Binary search divides the search space in half each time, giving O(log n) complexity."},
      {q: "Which company created Java?", options: ["Microsoft", "Apple", "Sun Microsystems", "IBM"], correct: 2, explanation: "Sun Microsystems released Java in 1995, now owned by Oracle."},
      {q: "What does SQL stand for?", options: ["Structured Query Language", "Simple Query Language", "System Query Language", "Standard Question Language"], correct: 0, explanation: "SQL is used for managing and querying relational databases."},
      {q: "What is 1024 bytes called?", options: ["Megabyte", "Kilobyte", "Gigabyte", "Terabyte"], correct: 1, explanation: "A kilobyte (KB) equals 1024 bytes in binary systems."},
      {q: "Which sorting algorithm has the best average case?", options: ["Bubble Sort", "Insertion Sort", "Quick Sort", "Selection Sort"], correct: 2, explanation: "Quick Sort has O(n log n) average time complexity."},
      {q: "What is the main purpose of DNS?", options: ["Encrypt data", "Translate domain names to IP addresses", "Store files", "Send emails"], correct: 1, explanation: "DNS (Domain Name System) translates human-readable URLs to IP addresses."},
      {q: "What does HTTP stand for?", options: ["HyperText Transfer Protocol", "HighText Transfer Protocol", "HyperText Transmission Process", "HostText Transfer Protocol"], correct: 0, explanation: "HTTP is the protocol for transmitting web pages over the internet."},
      {q: "Which is NOT a programming paradigm?", options: ["Object-Oriented", "Functional", "Procedural", "Digital"], correct: 3, explanation: "Digital is not a programming paradigm; the others are well-established approaches."},
      {q: "What is the value of NULL?", options: ["0", "undefined", "no value", "false"], correct: 2, explanation: "NULL represents the intentional absence of any object value."},
      {q: "Which language is known as the "language of the web"?", options: ["Python", "Java", "JavaScript", "C++"], correct: 2, explanation: "JavaScript runs in all web browsers and powers interactive web content."},
      {q: "What is recursion?", options: ["A loop", "A function calling itself", "A data type", "A variable scope"], correct: 1, explanation: "Recursion occurs when a function calls itself to solve smaller instances of the same problem."},
      {q: "What does IDE stand for?", options: ["Internet Data Exchange", "Integrated Development Environment", "Interface Design Editor", "Interactive Data Engine"], correct: 1, explanation: "An IDE combines code editor, debugger, and build tools in one application."},
      {q: "Which data structure uses key-value pairs?", options: ["Array", "Stack", "Hash Map", "Linked List"], correct: 2, explanation: "Hash maps (or dictionaries) store data as key-value pairs for fast lookup."},
      {q: "What is the purpose of Git?", options: ["Write code", "Version control", "Compile programs", "Test software"], correct: 1, explanation: "Git tracks changes in source code during software development."},
      {q: "What is an IP address?", options: ["A website name", "A unique network identifier", "A file location", "A password"], correct: 1, explanation: "An IP address uniquely identifies devices on a network (e.g., 192.168.1.1)."}
    ]
  };
  
  let currentQuiz = [];
  let currentQuestionIndex = 0;
  let score = 0;
  let correctCount = 0;
  let incorrectCount = 0;
  let quizStartTime = null;
  let selectedSubject = "biology";
  
  function selectSubject(btn) {
    document.querySelectorAll(".subject-btn").forEach(b => b.classList.remove("active"));
    btn.classList.add("active");
    selectedSubject = btn.dataset.subject;
    document.getElementById("currentSubject").textContent = btn.textContent.trim();
  }
  
  function startQuiz() {
    const difficulty = document.getElementById("quizDifficulty").value;
    const count = parseInt(document.getElementById("quizCount").value);
    
    let allQuestions = quizDatabase[selectedSubject] || quizDatabase.biology;
    
    // Shuffle and select questions
    currentQuiz = allQuestions.sort(() => 0.5 - Math.random()).slice(0, count);
    currentQuestionIndex = 0;
    score = 0;
    correctCount = 0;
    incorrectCount = 0;
    quizStartTime = Date.now();
    
    document.getElementById("quizSetup").classList.add("hidden");
    document.getElementById("quizGame").classList.remove("hidden");
    document.getElementById("quizResults").classList.add("hidden");
    document.getElementById("quizFeedback").classList.add("hidden");
    
    showQuestion();
  }
  
  function showQuestion() {
    const question = currentQuiz[currentQuestionIndex];
    document.getElementById("questionText").textContent = question.q;
    document.getElementById("currentScore").textContent = score;
    
    const optionsContainer = document.getElementById("answerOptions");
    optionsContainer.innerHTML = "";
    
    question.options.forEach((option, index) => {
      const btn = document.createElement("button");
      btn.className = "quiz-option";
      btn.textContent = option;
      btn.onclick = () => selectAnswer(btn, index);
      optionsContainer.appendChild(btn);
    });
    
    // Update progress bar
    const progress = ((currentQuestionIndex) / currentQuiz.length) * 100;
    document.getElementById("quizProgressFill").style.width = progress + "%";
    
    document.getElementById("quizFeedback").classList.add("hidden");
  }
  
  function selectAnswer(btn, selectedIndex) {
    const question = currentQuiz[currentQuestionIndex];
    const isCorrect = selectedIndex === question.correct;
    const options = document.querySelectorAll(".quiz-option");
    
    options.forEach((opt, idx) => {
      opt.classList.add("disabled");
      if (idx === question.correct) {
        opt.classList.add("correct");
      } else if (idx === selectedIndex && !isCorrect) {
        opt.classList.add("incorrect");
      }
    });
    
    if (isCorrect) {
      score += 10;
      correctCount++;
      playSuccessSound();
      fireConfetti();
      showFeedback(true, question.explanation);
    } else {
      incorrectCount++;
      playErrorSound();
      showFeedback(false, question.explanation);
    }
    
    document.getElementById("currentScore").textContent = score;
  }
  
  function showFeedback(isCorrect, explanation) {
    const feedback = document.getElementById("quizFeedback");
    const icon = document.getElementById("feedbackIcon");
    const title = document.getElementById("feedbackTitle");
    const exp = document.getElementById("feedbackExplanation");
    
    icon.innerHTML = isCorrect ? "<i class=\"fas fa-check-circle\"></i>" : "<i class=\"fas fa-times-circle\"></i>";
    icon.className = "feedback-icon " + (isCorrect ? "correct" : "incorrect");
    title.textContent = isCorrect ? "Correct!" : "Incorrect!";
    title.style.color = isCorrect ? "var(--success)" : "var(--accent)";
    exp.textContent = explanation;
    
    feedback.classList.remove("hidden");
  }
  
  function nextQuestion() {
    currentQuestionIndex++;
    if (currentQuestionIndex < currentQuiz.length) {
      showQuestion();
    } else {
      showResults();
    }
  }
  
  function showResults() {
    const timeTaken = Math.floor((Date.now() - quizStartTime) / 1000);
    const minutes = Math.floor(timeTaken / 60);
    const seconds = timeTaken % 60;
    const percentage = Math.round((correctCount / currentQuiz.length) * 100);
    
    document.getElementById("percentage").textContent = percentage + "%";
    document.getElementById("correctCount").textContent = correctCount;
    document.getElementById("incorrectCount").textContent = incorrectCount;
    
    document.getElementById("quizQuestionContainer").classList.add("hidden");
    document.getElementById("quizFeedback").classList.add("hidden");
    document.getElementById("quizResults").classList.remove("hidden");
    document.getElementById("quizProgressFill").style.width = "100%";
    
    if (percentage >= 80) {
      fireConfetti();
      playSuccessSound();
    }
  }
  
  function restartQuiz() {
    currentQuestionIndex = 0;
    score = 0;
    correctCount = 0;
    incorrectCount = 0;
    document.getElementById("quizResults").classList.add("hidden");
    document.getElementById("quizQuestionContainer").classList.remove("hidden");
    showQuestion();
  }
  
  function backToSetup() {
    document.getElementById("quizGame").classList.add("hidden");
    document.getElementById("quizSetup").classList.remove("hidden");
    document.getElementById("quizResults").classList.add("hidden");
  }
  
  // Confetti Effect
  function fireConfetti() {
    const canvas = document.getElementById("confettiCanvas");
    if (!canvas) return;
    
    const ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    const colors = ["#00d4ff", "#a855f7", "#f43f5e", "#22c55e", "#f59e0b"];
    const particles = [];
    
    for (let i = 0; i < 100; i++) {
      particles.push({
        x: canvas.width / 2,
        y: canvas.height / 2,
        vx: (Math.random() - 0.5) * 15,
        vy: (Math.random() - 0.5) * 15 - 5,
        color: colors[Math.floor(Math.random() * colors.length)],
        size: Math.random() * 8 + 4,
        life: 1
      });
    }
    
    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      particles.forEach((p, i) => {
        p.x += p.vx;
        p.y += p.vy;
        p.vy += 0.3; // gravity
        p.life -= 0.02;
        
        ctx.globalAlpha = p.life;
        ctx.fillRect(p.x, p.y, p.size, p.size);
        
        if (p.life <= 0) particles.splice(i, 1);
      });
      
      if (particles.length > 0) {
        requestAnimationFrame(animate);
      }
    }
    
    animate();
  }
  
  // Sound Effects (using AudioContext for beeps)
  function playSuccessSound() {
    try {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      if (!AudioContext) return;
      
      const ctx = new AudioContext();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      
      osc.connect(gain);
      gain.connect(ctx.destination);
      
      osc.frequency.value = 880; // A5 note
      osc.type = "sine";
      
      gain.gain.setValueAtTime(0.3, ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3);
      
      osc.start(ctx.currentTime);
      osc.stop(ctx.currentTime + 0.3);
      
      // Second note for success
      setTimeout(() => {
        const osc2 = ctx.createOscillator();
        const gain2 = ctx.createGain();
        osc2.connect(gain2);
        gain2.connect(ctx.destination);
        osc2.frequency.value = 1109; // C#6
        gain2.gain.setValueAtTime(0.3, ctx.currentTime);
        gain2.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3);
        osc2.start(ctx.currentTime);
        osc2.stop(ctx.currentTime + 0.3);
      }, 150);
    } catch (e) {}
  }
  
  function playErrorSound() {
    try {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      if (!AudioContext) return;
      
      const ctx = new AudioContext();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      
      osc.connect(gain);
      gain.connect(ctx.destination);
      
      osc.frequency.value = 200; // Low tone
      osc.type = "sawtooth";
      
      gain.gain.setValueAtTime(0.3, ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.4);
      
      osc.start(ctx.currentTime);
      osc.stop(ctx.currentTime + 0.4);
    } catch (e) {}
  }
  
  // Knowledge Map Visualization
  let knowledgeMapData = [
    { name: "Quantum Mechanics", mastery: 85, category: "physics", x: 0.2, y: 0.3 },
    { name: "Linear Algebra", mastery: 72, category: "math", x: 0.5, y: 0.2 },
    { name: "Thermodynamics", mastery: 63, category: "physics", x: 0.7, y: 0.4 },
    { name: "Organic Chemistry", mastery: 91, category: "chemistry", x: 0.3, y: 0.6 },
    { name: "Differential Equations", mastery: 45, category: "math", x: 0.6, y: 0.7 },
    { name: "Cell Biology", mastery: 88, category: "biology", x: 0.1, y: 0.5 },
    { name: "World History", mastery: 76, category: "history", x: 0.8, y: 0.2 },
    { name: "Machine Learning", mastery: 68, category: "computer", x: 0.4, y: 0.4 },
    { name: "Literature", mastery: 82, category: "literature", x: 0.9, y: 0.6 },
    { name: "Geography", mastery: 79, category: "geography", x: 0.2, y: 0.8 }
  ];
  
  let currentFilter = "all";
  let currentView = "constellation";
  
  function initKnowledgeMap() {
    const canvas = document.getElementById("knowledgeCanvas");
    if (!canvas) return;
    
    const ctx = canvas.getContext("2d");
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    
    let animationFrame;
    let hoveredNode = null;
    
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      const filtered = currentFilter === "all" 
        ? knowledgeMapData 
        : knowledgeMapData.filter(d => {
            if (currentFilter === "strong") return d.mastery >= 80;
            if (currentFilter === "weak") return d.mastery < 60;
            if (currentFilter === "recent") return d.mastery > 0;
            return true;
          });
      
      // Draw connections
      ctx.lineWidth = 1;
      for (let i = 0; i < filtered.length; i++) {
        for (let j = i + 1; j < filtered.length; j++) {
          const d1 = filtered[i];
          const d2 = filtered[j];
          const x1 = d1.x * canvas.width;
          const y1 = d1.y * canvas.height;
          const x2 = d2.x * canvas.width;
          const y2 = d2.y * canvas.height;
          const dist = Math.sqrt((x2-x1)**2 + (y2-y1)**2);
          if (dist < 200) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
          }
        }
      }
      
      // Draw nodes
      filtered.forEach(node => {
        const x = node.x * canvas.width;
        const y = node.y * canvas.height;
        const radius = 15 + (node.mastery / 100) * 20;
        const isHovered = hoveredNode === node;
        
        // Color based on mastery
        let color;
        if (node.mastery >= 80) color = "#22c55e";
        else if (node.mastery >= 60) color = "#00d4ff";
        else if (node.mastery >= 40) color = "#f59e0b";
        else color = "#f43f5e";
        
        // Glow effect
        const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius * 2);
        gradient.addColorStop(0, color + "40");
        gradient.addColorStop(1, "transparent");
        ctx.beginPath();
        ctx.arc(x, y, radius * 2, 0, Math.PI * 2);
        ctx.fill();
        
        // Main circle
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fill();
        
        // Border
        ctx.lineWidth = isHovered ? 3 : 2;
        ctx.stroke();
        
        // Label
        ctx.font = "12px sans-serif";
        ctx.textAlign = "center";
        ctx.fillText(node.name, x, y + radius + 20);
        ctx.fillText(node.mastery + "%", x, y + radius + 35);
      });
      
      animationFrame = requestAnimationFrame(draw);
    }
    
    // Mouse interactions
    canvas.addEventListener("mousemove", (e) => {
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      hoveredNode = knowledgeMapData.find(node => {
        const nx = node.x * canvas.width;
        const ny = node.y * canvas.height;
        const dist = Math.sqrt((x - nx)**2 + (y - ny)**2);
        return dist < 30;
      });
      
      canvas.style.cursor = hoveredNode ? "pointer" : "grab";
    });
    
    canvas.addEventListener("click", () => {
      if (hoveredNode) {
        showTopicDetails(hoveredNode.name);
      }
    });
    
    draw();
  }
  
  function filterMap(filter) {
    currentFilter = filter;
    document.querySelectorAll(".filter-btn").forEach(btn => btn.classList.remove("active"));
    event.target.classList.add("active");
  }
  
  function setMapView(view) {
    currentView = view;
    document.querySelectorAll(".view-btn").forEach(btn => btn.classList.remove("active"));
    event.target.classList.add("active");
  }
  
  function showTopicDetails(topic) {
    const modal = document.createElement("div");
    modal.style.cssText = "position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center;";
    modal.innerHTML = `
            <strong style="font-size: 24px; color: var(--primary);">24</strong>
//           </div>
            <strong style="font-size: 24px; color: var(--success);">85%</strong>
//           </div>
//         </div>
//           <button class="secondary-button" onclick="this.parentElement.parentElement.parentElement.remove()">Close</button>
//         </div>
//       </div>
    `;
    document.body.appendChild(modal);
    modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
  }
  
  function startStudying(topic) {
    location.href = "/practice?topic=" + encodeURIComponent(topic);
  }
  
  // Initialize knowledge map on page load
  if (document.getElementById("knowledgeCanvas")) {
    initKnowledgeMap();
  }
  
  // Pomodoro Timer
  let pomodoroTime = 25 * 60;
  let pomodoroInterval = null;
  let isBreak = false;
  
  function initPomodoro() {
    const display = document.getElementById("pomodoroDisplay");
    if (!display) return;
    updatePomodoroDisplay();
  }
  
  function updatePomodoroDisplay() {
    const display = document.getElementById("pomodoroDisplay");
    if (!display) return;
    const minutes = Math.floor(pomodoroTime / 60).toString().padStart(2, "0");
    const seconds = (pomodoroTime % 60).toString().padStart(2, "0");
  }
  
  function startPomodoro() {
    if (pomodoroInterval) return;
    pomodoroInterval = setInterval(() => {
      pomodoroTime--;
      updatePomodoroDisplay();
      if (pomodoroTime <= 0) {
        clearInterval(pomodoroInterval);
        pomodoroInterval = null;
        playSuccessSound();
        alert(isBreak ? "Break over! Time to study." : "Pomodoro complete! Take a break.");
        isBreak = !isBreak;
        pomodoroTime = isBreak ? 5 * 60 : 25 * 60;
        updatePomodoroDisplay();
      }
    }, 1000);
  }
  
  function pausePomodoro() {
    if (pomodoroInterval) {
      clearInterval(pomodoroInterval);
      pomodoroInterval = null;
    }
  }
  
  function resetPomodoro() {
    pausePomodoro();
    isBreak = false;
    pomodoroTime = 25 * 60;
    updatePomodoroDisplay();
    document.title = "FlashSync - Advanced Learning Platform";
  }
  
  // Music Player for Study Lo-Fi
  const studyTracks = [
    { name: "Deep Focus", url: "https://www.youtube.com/embed/jfKfPfyJRdk", type: "lofi" },
    { name: "Study Beats", url: "https://www.youtube.com/embed/4xDzrJKXOOY", type: "lofi" },
    { name: "Rain Sounds", url: "https://www.youtube.com/embed/q76bMs-NwRk", type: "ambient" },
    { name: "Classical Focus", url: "https://www.youtube.com/embed/mIYzp5rcTvU", type: "classical" }
  ];
  
  let currentTrack = 0;
  let isPlaying = false;
  
  function playMusic() {
    const player = document.getElementById("musicPlayer");
    if (player) {
      player.src = studyTracks[currentTrack].url + "?autoplay=1";
      isPlaying = true;
      updateMusicUI();
    }
  }
  
  function pauseMusic() {
    const player = document.getElementById("musicPlayer");
    if (player) {
      player.src = "";
      isPlaying = false;
      updateMusicUI();
    }
  }
  
  function nextTrack() {
    currentTrack = (currentTrack + 1) % studyTracks.length;
    if (isPlaying) playMusic();
    updateMusicUI();
  }
  
  function prevTrack() {
    currentTrack = (currentTrack - 1 + studyTracks.length) % studyTracks.length;
    if (isPlaying) playMusic();
    updateMusicUI();
  }
  
  function updateMusicUI() {
    const trackName = document.getElementById("currentTrackName");
    const playBtn = document.getElementById("playMusicBtn");
    if (trackName) trackName.textContent = studyTracks[currentTrack].name;
    if (playBtn) playBtn.innerHTML = isPlaying ? "<i class="fas fa-pause"></i>" : "<i class="fas fa-play"></i>";
  }
  
  // Drawing Canvas
  let isDrawing = false;
  let lastX = 0;
  let lastY = 0;
  
  function initDrawingCanvas() {
    const canvas = document.getElementById("drawingCanvas");
    if (!canvas) return;
    
    const ctx = canvas.getContext("2d");
    ctx.lineWidth = 3;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    
    canvas.addEventListener("mousedown", startDrawing);
    canvas.addEventListener("mousemove", draw);
    canvas.addEventListener("mouseup", stopDrawing);
    canvas.addEventListener("mouseout", stopDrawing);
    
    canvas.addEventListener("touchstart", (e) => {
      e.preventDefault();
      const touch = e.touches[0];
      const rect = canvas.getBoundingClientRect();
      startDrawing({ offsetX: touch.clientX - rect.left, offsetY: touch.clientY - rect.top });
    });
    canvas.addEventListener("touchmove", (e) => {
      e.preventDefault();
      const touch = e.touches[0];
      const rect = canvas.getBoundingClientRect();
      draw({ offsetX: touch.clientX - rect.left, offsetY: touch.clientY - rect.top });
    });
    canvas.addEventListener("touchend", stopDrawing);
  }
  
  function startDrawing(e) {
    isDrawing = true;
    lastX = e.offsetX;
    lastY = e.offsetY;
  }
  
  function draw(e) {
    if (!isDrawing) return;
    const canvas = document.getElementById("drawingCanvas");
    const ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    lastX = e.offsetX;
    lastY = e.offsetY;
  }
  
  function stopDrawing() {
    isDrawing = false;
  }
  
  function clearDrawing() {
    const canvas = document.getElementById("drawingCanvas");
    if (canvas) {
      const ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
  }
  
  function saveDrawing() {
    const canvas = document.getElementById("drawingCanvas");
    if (canvas) {
      const link = document.createElement("a");
      link.download = "my-drawing-" + Date.now() + ".png";
      link.href = canvas.toDataURL();
      link.click();
    }
  }
  
  function changeBrushColor(color) {
    const canvas = document.getElementById("drawingCanvas");
    if (canvas) {
      const ctx = canvas.getContext("2d");
    }
  }
  
  function changeBrushSize(size) {
    const canvas = document.getElementById("drawingCanvas");
    if (canvas) {
      const ctx = canvas.getContext("2d");
      ctx.lineWidth = parseInt(size);
    }
  }
  
  // Mock Exams
  let currentExam = null;
  let examQuestionIndex = 0;
  let examScore = 0;
  let examAnswers = [];
  
  function startMockExam(subject) {
    const exams = {
      biology: { name: "Biology 101", questions: quizDatabase.biology.slice(0, 10), time: 600 },
      chemistry: { name: "Chemistry Fundamentals", questions: quizDatabase.chemistry.slice(0, 10), time: 600 },
      physics: { name: "Physics Basics", questions: quizDatabase.physics.slice(0, 10), time: 600 }
    };
    
    currentExam = exams[subject];
    examQuestionIndex = 0;
    examScore = 0;
    examAnswers = [];
    
    document.getElementById("examSetup").classList.add("hidden");
    document.getElementById("examSession").classList.remove("hidden");
    document.getElementById("examResults").classList.add("hidden");
    
    document.getElementById("examTitle").textContent = currentExam.name;
    startExamTimer(currentExam.time);
    showExamQuestion();
  }
  
  function startExamTimer(seconds) {
    let timeLeft = seconds;
    const timerEl = document.getElementById("examTimer");
    
    window.examTimerInterval = setInterval(() => {
      timeLeft--;
      const mins = Math.floor(timeLeft / 60).toString().padStart(2, "0");
      const secs = (timeLeft % 60).toString().padStart(2, "0");
      
      if (timeLeft <= 0) {
        clearInterval(window.examTimerInterval);
        finishExam();
      }
    }, 1000);
  }
  
  function showExamQuestion() {
    const q = currentExam.questions[examQuestionIndex];
    document.getElementById("examQuestionText").textContent = q.q;
    
    const optionsEl = document.getElementById("examOptions");
    optionsEl.innerHTML = q.options.map((opt, i) => `
    `).join("");
    
  }
  
  function selectExamAnswer(index) {
    examAnswers[examQuestionIndex] = index;
    document.querySelectorAll("#examOptions .quiz-option").forEach((btn, i) => {
      btn.classList.toggle("selected", i === index);
    });
  }
  
  function nextExamQuestion() {
    if (examAnswers[examQuestionIndex] === undefined) {
      alert("Please select an answer");
      return;
    }
    examQuestionIndex++;
    if (examQuestionIndex < currentExam.questions.length) {
      showExamQuestion();
    } else {
      finishExam();
    }
  }
  
  function finishExam() {
    clearInterval(window.examTimerInterval);
    
    examScore = examAnswers.reduce((score, answer, i) => {
      return score + (answer === currentExam.questions[i].correct ? 1 : 0);
    }, 0);
    
    const percentage = Math.round((examScore / currentExam.questions.length) * 100);
    
    document.getElementById("examSession").classList.add("hidden");
    document.getElementById("examResults").classList.remove("hidden");
    
    document.getElementById("examGrade").textContent = percentage >= 90 ? "A" : percentage >= 80 ? "B" : percentage >= 70 ? "C" : percentage >= 60 ? "D" : "F";
    document.getElementById("examCorrect").textContent = examScore;
    document.getElementById("examIncorrect").textContent = currentExam.questions.length - examScore;
    
    if (percentage >= 80) {
      fireConfetti();
      playSuccessSound();
    }
  }
  
  // Language switching (single selection)
  let currentLanguage = localStorage.getItem("language") || "en";
  
  function setLanguage(lang) {
    currentLanguage = lang;
    localStorage.setItem("language", lang);
    
    // Update UI to show only one active
    document.querySelectorAll(".lang-btn").forEach(btn => {
      btn.classList.remove("active");
        btn.classList.add("active");
      }
    });
    
    // Apply translations
    applyTranslations(lang);
    
    alert("Language changed to " + lang.toUpperCase());
  }
  
  function applyTranslations(lang) {
    const translations = {
      nl: { study: "Studeren", dashboard: "Dashboard", practice: "Oefenen", settings: "Instellingen" },
      es: { study: "Estudiar", dashboard: "Panel", practice: "Práctica", settings: "Ajustes" },
      fr: { study: "Étudier", dashboard: "Tableau", practice: "Pratique", settings: "Paramètres" },
      de: { study: "Lernen", dashboard: "Übersicht", practice: "Üben", settings: "Einstellungen" }
    };
    
    const t = translations[lang];
    if (!t) return;
    
    // Update navigation labels
    document.querySelectorAll(".nav-label").forEach(el => {
      if (el.textContent === "Study" && t.study) el.textContent = t.study;
    });
  }
  
  // Initialize all features on page load
  document.addEventListener("DOMContentLoaded", function() {
    initKnowledgeMap();
    initPomodoro();
    initDrawingCanvas();
    
    // Initialize file manager if on file-manager page
    if (document.querySelector(".file-grid")) {
      renderFileList();
      updateStorageIndicator();
    }
  });
  "
}

@external(erlang, "timer", "sleep")
fn erlang_sleep(ms: Int) -> Nil

fn sleep_forever() {
  erlang_sleep(1000)
  sleep_forever()
}