import gleam/json

// FlashSync Content Builder - Page Templates for All Features


pub fn build_page_content(page: String) -> String {
  case page {
    "hub" -> hub_page()
    "flashcards" -> flashcards_page()
    "flashcards-new" -> flashcards_new_page()
    "flashcards-import" -> flashcards_import_page()
    "flashcards-export" -> flashcards_export_page()
    "flashcards-print" -> flashcards_print_page()
    "flashcards-biology" -> flashcards_subject_page("Biology 101", "biology")
    "flashcards-chemistry" -> flashcards_subject_page("Chemistry Fundamentals", "chemistry")
    "education" -> education_page()
    "education-process" -> education_process_page()
    "tutor" -> tutor_page()
    "ai-solver" -> ai_solver_page()
    "study-tools" -> study_tools_page()
    "heatmap" -> heatmap_page()
    "biometric" -> biometric_page()
    "exam" -> exam_page()
    "exam-biology" -> exam_subject_page("biology")
    "exam-chemistry" -> exam_subject_page("chemistry")
    "timetravel" -> timetravel_page()
    "analytics" -> analytics_page()
    "predictor" -> predictor_page()
    "solver" -> solver_page()
    "suggestions" -> suggestions_page()
    "profile" -> profile_page()
    "settings" -> settings_page()
    "achievements" -> achievements_page()
    "calendar" -> calendar_page()
    "notes" -> notes_page()
    "vocabulary" -> vocabulary_page()
    "pomodoro" -> pomodoro_page()
    "formulas" -> formulas_page()
  _ -> error_page()
  }
}

pub fn handle_ai_request() {
  let steps = [
    json.object([
      #("title", json.string("Isolate System Vectors")),
      #("description", json.string("Extracted all explicit constant values."))
    ]),
    json.object([
      #("title", json.string("Integrate Over Coordinate Plane")),
      #("description", json.string("Applying velocity constraints."))
    ])
  ]

  json.object([
    #("confidence", json.string("99.12%")),
    #("concept", json.string("Applied Kinematics")),
    // We use the 'of' label to tell json.array how to handle the list items
    #("steps", json.array(steps, of: fn(x) { x })) 
  ])
}



fn hub_page() -> String {
  "
  <div>
    <h1>Neural Dashboard</h1>
    <p class='subtitle'>Advanced Learning Analytics & Intelligence System</p>
    
    <div class='grid-4'>
      <div class='stat-card'>
        <h4 style='color: var(--primary);'>Overall Mastery</h4>
        <div class='animated-counter' data-value='85.2'>0</div>
        <p style='color: #888; margin-top: 10px;'>+12% this week</p>
      </div>
      
      <div class='stat-card'>
        <h4 style='color: var(--success);'>Focus Minutes</h4>
        <div class='animated-counter' data-value='278'>0</div>
        <p style='color: #888; margin-top: 10px;'>Daily average</p>
      </div>
      
      <div class='stat-card'>
        <h4 style='color: var(--secondary);'>Cards Mastered</h4>
        <div class='animated-counter' data-value='142'>0</div>
        <p style='color: #888; margin-top: 10px;'>Out of 168 total</p>
      </div>
      
      <div class='stat-card'>
        <h4 style='color: var(--accent);'>Retention Rate</h4>
        <div class='animated-counter' data-value='94.2'>0</div>
        <p style='color: #888; margin-top: 10px;'>Elite rank</p>
      </div>
    </div>
    
    <h2 style='margin-top: 40px;'>Quick Access</h2>
    <div class='grid-3'>
      <div class='feature-box' onclick='location.href=\"/tutor\"'>
        <h3><i class='fas fa-robot'></i> AI Tutor</h3>
        <p>Ask questions, get comprehensive AI-powered explanations with examples and study hints</p>
        <button class='premium-button' style='width: 100%; margin-top: 15px;'>Launch Tutor</button>
      </div>
      
      <div class='feature-box' onclick='location.href=\"/ai-solver\"'>
        <h3><i class='fas fa-wand-magic-sparkles'></i> AI Solver</h3>
        <p>Upload problems or questions. Get instant AI solutions with step-by-step explanations</p>
        <button class='premium-button' style='width: 100%; margin-top: 15px;'>Open Solver</button>
      </div>
      
      <div class='feature-box' onclick='location.href=\"/education\"'>
        <h3><i class='fas fa-graduation-cap'></i> Education Portal</h3>
        <p>Grade-level filtering, YouTube conversion, AI summaries, and professional PDF exports</p>
        <button class='premium-button' style='width: 100%; margin-top: 15px;'>Explore</button>
      </div>
      
      <div class='feature-box' onclick='location.href=\"/biometric\"'>
        <h3><i class='fas fa-heart'></i> Focus Tracking</h3>
        <p>Real-time biometric monitoring with adaptive music tempo and posture detection</p>
        <button class='premium-button' style='width: 100%; margin-top: 15px;'>Monitor</button>
      </div>
      
      <div class='feature-box' onclick='location.href=\"/heatmap\"'>
        <h3><i class='fas fa-fire'></i> Neural Heatmap</h3>
        <p>Constellation visualization of your knowledge graph with mastery levels</p>
        <button class='premium-button' style='width: 100%; margin-top: 15px;'>View Map</button>
      </div>
      
      <div class='feature-box' onclick='location.href=\"/exam\"'>
        <h3><i class='fas fa-clipboard-list'></i> Mock Exams</h3>
        <p>AI-generated practice exams with professional grading rubrics and detailed feedback</p>
        <button class='premium-button' style='width: 100%; margin-top: 15px;'>Start Exam</button>
      </div>
      
      <div class='feature-box' onclick='location.href=\"/achievements\"'>
        <h3><i class='fas fa-trophy'></i> Achievements</h3>
        <p>Track milestones, unlock badges, and celebrate your learning journey</p>
        <button class='premium-button' style='width: 100%; margin-top: 15px;'>View Progress</button>
      </div>
      
      <div class='feature-box' onclick='location.href=\"/pomodoro\"'>
        <h3><i class='fas fa-clock'></i> Pomodoro Timer</h3>
        <p>25-minute focus sessions with adaptive breaks for optimal productivity</p>
        <button class='premium-button' style='width: 100%; margin-top: 15px;'>Start Focus</button>
      </div>
      
      <div class='feature-box' onclick='location.href=\"/study-tools\"'>
        <h3><i class='fas fa-toolbox'></i> Study Tools</h3>
        <p>Question generator, flashcard creator, vocabulary builder, and formula reference</p>
        <button class='premium-button' style='width: 100%; margin-top: 15px;'>Access Tools</button>
      </div>
    </div>
  </div>"
}

// --- SHARED UI WRAPPER (Keeps all pages perfectly consistent) ---
fn vault_page_wrapper(title: String, subtitle: String, content: String) -> String {
  "
  <div class='dashboard-container'>
    <header class='dash-header'>
      <h1 class='text-glow'>" <> title <> "</h1>
      <p class='subtitle'>" <> subtitle <> "</p>
    </header>
    <div class='vault-content-area'>" <> content <> "</div>
  </div>
  <style>
    .vault-content-area { animation: fadeIn 0.4s ease; }
    .feature-box { background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(255,255,255,0.1); padding: 30px; border-radius: 16px; backdrop-filter: blur(10px); }
    .premium-button { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: 600; }
    .accent-button { background: transparent; border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 12px 25px; border-radius: 8px; cursor: pointer; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
  </style>
  "
}

// --- ENHANCED PAGES ---
pub fn flashcards_page() -> String {
  let content = "
    <div class='glass-panel' style='display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding: 15px 25px; border: 1px solid rgba(0, 242, 255, 0.2);'>
      <div style='position: relative; width: 60%;'>
        <i class='fas fa-search' style='position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--accent-cyan);'></i>
        <input type='text' oninput='VaultEngine.filterVault(this.value)' class='premium-input' placeholder='Search questions or answers...' style='width: 100%; padding-left: 45px;'>
      </div>
      <div style='display: flex; gap: 10px;'>
        <button class='action-btn' onclick='VaultEngine.sortVault()'><i class='fas fa-sort'></i> Sort</button>
        <button class='action-btn' onclick='VaultEngine.confirmPurge()' style='border-color: #ef4444; color: #f87171;'><i class='fas fa-skull-crossbones'></i> Purge</button>
      </div>
    </div>

    <div class='bento-grid'>
      <section class='glass-panel span-2-col'>
        <div class='panel-header'><h3><i class='fas fa-brain'></i> Active Knowledge Nodes</h3></div>
        <div id='vault-zone' class='results-grid'></div>
      </section>
      
      <aside class='glass-panel side-panel'>
        <h3><i class='fas fa-chart-line'></i> Cognitive Analytics</h3>
        <div style='margin: 20px 0;'>
          <div style='display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.8rem;'>
            <span>Mastery Progress</span>
            <span id='mastery-text' style='color: var(--accent-cyan);'>0%</span>
          </div>
          <div style='height: 10px; background: rgba(30,41,59,0.8); border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05);'>
            <div id='mastery-bar' style='width: 0%; height: 100%; background: linear-gradient(90deg, #8b5cf6, #00f2ff); transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);'></div>
          </div>
        </div>
        <button class='premium-button' onclick='VaultEngine.startDrill()' style='width: 100%;'><i class='fas fa-bolt'></i> Start Quick Drill</button>
      </aside>
    </div>

    <div id='vault-modal' style='display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(10px); z-index:999; justify-content:center; align-items:center;'>
      <div class='glass-panel' style='width:350px; text-align:center; padding:30px; border: 1px solid #07550a;'>
        <i class='fas fa-exclamation-triangle' style='font-size:3rem; color:#ef4444; margin-bottom:15px;'></i>
        <h3 style='margin-bottom:10px;'>Purge Vault?</h3>
        <p style='color:#94a3b8; margin-bottom:25px;'>This will permanently delete all knowledge. Cannot be undone.</p>
        <div style='display:flex; gap:10px;'>
          <button class='action-btn' onclick='document.getElementById(\"vault-modal\").style.display=\"none\"' style='flex:1;'>Cancel</button>
          <button class='premium-button' onclick='VaultEngine.executePurge()' style='flex:1; background:#ef4444;'>Confirm</button>
        </div>
      </div>
    </div>

    <script>
      const VaultEngine = {
        dbKey: 'flashsync_enterprise_cards',

        updateMastery: function(cards) {
          const bar = document.getElementById('mastery-bar');
          const text = document.getElementById('mastery-text');
          const progress = cards.length > 0 ? Math.min(cards.length * 5, 100) : 0;
          setTimeout(() => {
            bar.style.width = progress + '%';
            text.innerText = progress + '%';
          }, 100);
        },

        render: function(data = null) {
          const cards = data || JSON.parse(localStorage.getItem(this.dbKey) || '[]');
          this.updateMastery(cards);
          
          const zone = document.getElementById('vault-zone');
          zone.innerHTML = cards.length === 0 
            ? `<div style='text-align:center; padding:40px; opacity:0.5;'><h3>Vault Status: Offline</h3></div>`
            : cards.map(c => `
              <div class='result-card'>
                <h4>` + c.question + `</h4>
                <p>` + c.answer + `</p>
                <span class='badge'>` + c.difficulty + `</span>
              </div>`).join('');
        },

        sortVault: function() {
          const cards = JSON.parse(localStorage.getItem(this.dbKey) || '[]');
          cards.sort((a, b) => a.question.localeCompare(b.question));
          this.render(cards);
        },

        confirmPurge: function() {
          document.getElementById('vault-modal').style.display = 'flex';
        },

        executePurge: function() {
          localStorage.removeItem(this.dbKey);
          document.getElementById('vault-modal').style.display = 'none';
          this.render();
        },

        filterVault: function(query) {
          const all = JSON.parse(localStorage.getItem(this.dbKey) || '[]');
          const searchTerm = query.toLowerCase().trim();
          
          const filtered = all.filter(c => 
            c.question.toLowerCase().includes(searchTerm) || 
            c.answer.toLowerCase().includes(searchTerm)
          );

          const zone = document.getElementById('vault-zone');
          if (filtered.length === 0 && searchTerm !== \"\") {
            zone.innerHTML = `<div style='text-align:center; padding:40px; opacity:0.6;'><h3>No nodes match: \"` + query + `\"</h3></div>`;
          } else {
            this.render(filtered);
          }
        },

        startDrill: function() {
      const cards = JSON.parse(localStorage.getItem(this.dbKey) || '[]');
      
      if (cards.length === 0) {
        this.showModal(
          'Vault Inactive', 
          'Cognitive density too low. Please synthesize knowledge nodes before initiating a drill.',
          false
        );
      } else {
        this.showModal(
          'Drill Protocol Initiated', 
          'Synchronizing ' + cards.length + ' nodes with the Neural Engine. Preparing for deep focus state...',
          true
        );
      }
    },

      // Ensure this helper function exists inside VaultEngine to call the modal:
      showModal: function(title, body) {
        const modal = document.getElementById('vault-modal');
        // Update content dynamically
        modal.querySelector('h3').innerText = title;
        modal.querySelector('p').innerText = body;
        
        // Optionally change the icon for the drill state
        const icon = modal.querySelector('i');
        icon.className = title.includes('Initiated') ? 'fas fa-rocket' : 'fas fa-ghost';
        icon.style.color = title.includes('Initiated') ? 'var(--accent-cyan)' : '#880a0a';
        
        modal.style.display = 'flex';
      }
            };
            VaultEngine.render();
          </script>
        "
        vault_page_wrapper("Knowledge Vault", "Synthesized Intelligence | Adaptive Learning Environment", content)
}
fn flashcards_new_page() -> String {
  let content = "
    <div class='bento-grid'>
      <div class='feature-box span-2-col'>
        <h3><i class='fas fa-layer-group'></i> Core Deck Schema</h3>
        <p style='color:#94a3b8; margin-bottom: 20px;'>Establish the foundational parameters for your new study matrix.</p>
        
        <div style='margin-bottom: 20px;'>
          <label style='display: block; color: var(--accent-cyan); font-size: 0.85rem; margin-bottom: 8px;'>DECK NOMENCLATURE</label>
          <input id='newDeckName' class='premium-input' placeholder='e.g., Quantum Mechanics 101' style='width: 100%; font-size: 1.1rem;'>
        </div>
        
        <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px;'>
          <div>
            <label style='display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 8px;'>TARGET DISCIPLINE</label>
            <select class='premium-input' style='width: 100%;'>
              <option>STEM / Sciences</option>
              <option>Humanities</option>
              <option>Languages</option>
              <option>Custom Protocol</option>
            </select>
          </div>
          <div>
            <label style='display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 8px;'>COLOR THEME</label>
            <div style='display: flex; gap: 10px; margin-top: 5px;'>
              <div style='width: 30px; height: 30px; border-radius: 50%; background: var(--accent-cyan); cursor: pointer; box-shadow: 0 0 10px var(--accent-cyan);'></div>
              <div style='width: 30px; height: 30px; border-radius: 50%; background: var(--accent-purple); cursor: pointer;'></div>
              <div style='width: 30px; height: 30px; border-radius: 50%; background: var(--success); cursor: pointer;'></div>
            </div>
          </div>
        </div>
        
        <button class='premium-button' onclick='addDeck()' style='width: 100%; padding: 15px;'><i class='fas fa-magic'></i> Instantiate Deck</button>
      </div>
    </div>
  "
  vault_page_wrapper("Deck Constructor", "Architect a structured knowledge tree", content)
}

fn flashcards_import_page() -> String {
  let content = "
    <div class='bento-grid'>
      <div class='feature-box span-2-col'>
        <h3><i class='fas fa-satellite-dish'></i> Telemetry & Data Import</h3>
        <p style='color:#94a3b8; margin-bottom: 25px;'>Ingest external knowledge sources to populate your cognitive engine.</p>
        
        <div class='dropzone' style='border: 2px dashed var(--accent-cyan); border-radius: 16px; padding: 50px 20px; text-align: center; background: linear-gradient(180deg, rgba(0, 242, 255, 0.02) 0%, rgba(0, 0, 0, 0) 100%); transition: all 0.3s ease; cursor: pointer;'>
          <div style='background: rgba(0, 242, 255, 0.1); width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto;'>
            <i class='fas fa-file-import' style='font-size: 2.5rem; color: var(--accent-cyan);'></i>
          </div>
          <h4 style='font-size: 1.2rem; color: white; margin-bottom: 10px;'>Drag & Drop Matrix Files Here</h4>
          <p style='color: var(--text-muted); font-size: 0.9rem;'>Supported formats: .CSV, .JSON, Anki (.apkg)</p>
          <button class='accent-button' onclick='importCards()' style='margin-top: 25px;'>Browse Local System</button>
        </div>
      </div>
      
      <div class='glass-panel'>
        <h3 style='font-size: 1rem;'><i class='fas fa-terminal'></i> Raw Text Ingestion</h3>
        <p style='font-size: 0.85rem; color: var(--text-muted); margin-bottom: 15px;'>Paste comma-separated values directly.</p>
        <textarea class='premium-input' style='width: 100%; height: 150px; resize: none; font-family: monospace; font-size: 0.8rem;' placeholder='Front, Back\nExample Question, Example Answer'></textarea>
        <button class='action-btn' style='width: 100%; margin-top: 15px;'>Process Text</button>
      </div>
    </div>
  "
  vault_page_wrapper("Data Assimilation", "Import CSV, JSON, or Anki packages securely", content)
}

fn flashcards_export_page() -> String {
  let content = "
    <div class='grid-2'>
      <div class='feature-box' style='position: relative; overflow: hidden;'>
        <div style='position: absolute; top: -20px; right: -20px; opacity: 0.05;'><i class='fas fa-file-pdf' style='font-size: 10rem;'></i></div>
        <h3><i class='fas fa-file-pdf' style='color: #ef4444;'></i> PDF Synthesis</h3>
        <p style='color: var(--text-muted); margin: 15px 0 25px 0; line-height: 1.5;'>Compile your deck into a high-resolution, print-ready document formatted for visual studying.</p>
        <button class='action-btn' onclick='exportPDF()' style='width: 100%; border-color: rgba(255,255,255,0.2);'><i class='fas fa-download'></i> Render Document</button>
      </div>
      
      <div class='feature-box' style='position: relative; overflow: hidden; border-color: var(--accent-purple);'>
        <div style='position: absolute; top: -20px; right: -20px; opacity: 0.05;'><i class='fas fa-database' style='font-size: 10rem;'></i></div>
        <h3><i class='fas fa-database' style='color: var(--accent-purple);'></i> Encrypted Data Archive</h3>
        <p style='color: var(--text-muted); margin: 15px 0 25px 0; line-height: 1.5;'>Create a secure JSON snapshot of your learning progress, mastery metadata, and card contents.</p>
        <button class='premium-button' onclick='exportDeckData()' style='width: 100%;'><i class='fas fa-cloud-download-alt'></i> Download Archive</button>
      </div>
    </div>
  "
  vault_page_wrapper("Export Engine", "Generate polished documents and data snapshots", content)
}

fn flashcards_print_page() -> String {
  let content = "
    <div class='grid-2'>
      <div class='feature-box'>
        <h3><i class='fas fa-sliders-h'></i> Layout Parameters</h3>
        <p style='color: var(--text-muted); margin-bottom: 20px;'>Configure physical output dimensions.</p>
        
        <div class='input-group' style='margin-bottom: 15px;'>
          <label style='font-size: 0.85rem; color: white;'>Paper Topology</label>
          <select class='premium-input' style='width: 100%; margin-top: 5px;'>
            <option>A4 Standard (210 x 297 mm)</option>
            <option>US Letter (8.5 x 11 in)</option>
            <option>A5 Compact</option>
          </select>
        </div>
        
        <div class='input-group' style='margin-bottom: 25px;'>
          <label style='font-size: 0.85rem; color: white;'>Grid Density</label>
          <select class='premium-input' style='width: 100%; margin-top: 5px;'>
            <option>3x3 (9 cards per sheet)</option>
            <option>2x4 (8 cards per sheet)</option>
            <option>Large (4 cards per sheet)</option>
          </select>
        </div>
        
        <button class='premium-button' onclick='preparePrintMode()' style='width: 100%;'><i class='fas fa-print'></i> Initialize Print Protocol</button>
      </div>
      
      <div class='glass-panel' style='display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.4);'>
        <p style='color: var(--accent-cyan); letter-spacing: 2px; font-size: 0.8rem; margin-bottom: 15px;'>PREVIEW MATRIX</p>
        <div style='width: 200px; height: 280px; background: white; border-radius: 4px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: 5px; box-shadow: 0 0 30px rgba(0, 242, 255, 0.1);'>
           <div style='border: 1px dashed #ccc;'></div><div style='border: 1px dashed #ccc;'></div>
           <div style='border: 1px dashed #ccc;'></div><div style='border: 1px dashed #ccc;'></div>
           <div style='border: 1px dashed #ccc;'></div><div style='border: 1px dashed #ccc;'></div>
           <div style='border: 1px dashed #ccc;'></div><div style='border: 1px dashed #ccc;'></div>
        </div>
        <p style='font-size: 0.75rem; color: var(--text-muted); margin-top: 15px;'><i class='fas fa-info-circle'></i> Cut-lines automatically generated.</p>
      </div>
    </div>
  "
  vault_page_wrapper("Physical Output Mode", "Optimized schematics for physical flashcard rendering", content)
}

fn flashcards_subject_page(title: String, topic: String) -> String {
  let content = "
    <div class='glass-panel' style='margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center;'>
       <div>
         <h4 style='color: var(--text-muted); margin: 0 0 5px 0; font-size: 0.9rem;'>ACTIVE NODE</h4>
         <h2 style='color: white; margin: 0; font-size: 1.5rem;'>" <> topic <> "</h2>
       </div>
       <div style='display: flex; gap: 20px; text-align: center;'>
         <div>
            <div style='font-size: 1.5rem; color: var(--success); font-weight: bold;'>24</div>
            <div style='font-size: 0.75rem; color: var(--text-muted);'>Due Now</div>
         </div>
         <div>
            <div style='font-size: 1.5rem; color: var(--accent-cyan); font-weight: bold;'>12</div>
            <div style='font-size: 0.75rem; color: var(--text-muted);'>New Cards</div>
         </div>
       </div>
    </div>

    <div class='grid-2'>
      <div class='feature-box' style='border-top: 3px solid var(--success);'>
        <h3><i class='fas fa-play-circle'></i> Deep Focus Session</h3>
        <p style='color: var(--text-muted); margin: 15px 0;'>Enter the cognitive flow state. Move through new and due cards using spaced repetition algorithms.</p>
        <button class='premium-button' onclick='studyDeck(\"" <> topic <> "\")' style='width: 100%; background: linear-gradient(135deg, #10b981, #059669);'><i class='fas fa-bolt'></i> Initialize Session</button>
      </div>
      
      <div class='feature-box' style='border-top: 3px solid var(--accent-purple);'>
        <h3><i class='fas fa-microscope'></i> Critical Review Mode</h3>
        <p style='color: var(--text-muted); margin: 15px 0;'>Analyze your weak points. This mode bypasses algorithms to let you manually review difficult concepts.</p>
        <button class='accent-button' onclick='reviewDeck(\"" <> topic <> "\")' style='width: 100%; border-color: var(--accent-purple); color: var(--accent-purple);'><i class='fas fa-search'></i> Target Weaknesses</button>
      </div>
    </div>
  "
  vault_page_wrapper(title, "Topic specific metrics and study pathways", content)
}


fn education_process_page() -> String {
  "<div><h1>Video Processing Queue</h1><p class='subtitle'>Your study material is being assembled</p><div class='feature-box'><h3>Processing video</h3><p style='color:#888;'>The selected lesson is being converted into notes, summaries, and printable material.</p><button class='premium-button' onclick='window.location.href=\"/education\"' style='margin-top:15px;'>Return to Education</button></div></div>"
}

fn education_page() -> String {
  "
  <div>
    <h1>Education Portal</h1>
    <p class='subtitle'>Grade-Level Learning • YouTube to PDF • AI Summaries</p>
    
    <h2>Grade Level Selection</h2>
    <div class='language-selector' id='gradeSelector'>
      <button class='lang-btn active' onclick='selectGrade(\"elementary\")'>Elementary</button>
      <button class='lang-btn' onclick='selectGrade(\"middle\")'>Middle School</button>
      <button class='lang-btn' onclick='selectGrade(\"hs\")'>High School</button>
      <button class='lang-btn' onclick='selectGrade(\"college\")'>College</button>
      <button class='lang-btn' onclick='selectGrade(\"professional\")'>Professional</button>
    </div>
    <p id='gradeStatus' style='color: var(--primary); margin-top: 10px;'>Selected grade: elementary</p>
    <div id='gradeInsights' class='feature-box' style='margin-top: 15px;'><h3>Grade Lens</h3><p style='color:#888;'>Elementary mode focuses on concrete examples and simple vocabulary.</p></div>
    
    <h2 style='margin-top: 40px;'>YouTube to Study Material</h2>
    <div class='feature-box'>
      <h3>Convert YouTube videos to study materials</h3>
      <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;'>
        <div>
          <label style='color: #888; font-size: 0.9rem;'>YouTube URL</label>
          <input id='youtubeUrl' type='text' class='premium-input' placeholder='https://youtube.com/watch?v=...' style='margin-top: 8px;'>
        </div>
        <div>
          <label style='color: #888; font-size: 0.9rem;'>AI Summary Length</label>
          <select id='youtubeSummaryMode' class='premium-input' style='margin-top: 8px;'>
            <option>Brief (2-3 minutes)</option>
            <option>Detailed (5-10 minutes)</option>
            <option>Comprehensive (15+ minutes)</option>
          </select>
        </div>
      </div>
      <button class='premium-button' onclick='processYouTubeVideo()' style='width: 100%; margin-top: 15px;'><i class='fas fa-film'></i> Process Video</button>
      <div id='youtubeProcessResult' class='feature-box' style='display:none;margin-top:15px;'></div>
    </div>
    
    <h2 style='margin-top: 40px;'>Generated Study Materials</h2>
    <div class='grid-2'>
      <div class='stat-card'>
        <h3>Quantum Mechanics Masterclass</h3>
        <p style='color: #888;'>AI Summary • 12 min read</p>
        <p style='margin-top: 10px;'><i class='fas fa-file-pdf'></i> <strong>Study Guide</strong></p>
        <p style='color: #888; font-size: 0.9rem;'>45 key concepts extracted</p>
      <button class='success-button' style='width: 100%; margin-top: 15px;' onclick='downloadPDFStudyGuide(\"Quantum Mechanics Masterclass\")'><i class='fas fa-file-pdf'></i> Download PDF Study Guide</button>
      </div>
      
      <div class='stat-card'>
        <h3>Biology Deep Dive</h3>
        <p style='color: #888;'>AI Summary • 18 min read</p>
        <p style='margin-top: 10px;'><i class='fas fa-file-pdf'></i> <strong>Comprehensive Guide</strong></p>
        <p style='color: #888; font-size: 0.9rem;'>78 definitions, 23 diagrams</p>
      <button class='success-button' style='width: 100%; margin-top: 15px;' onclick='downloadPDFStudyGuide(\"Biology Deep Dive\")'><i class='fas fa-file-pdf'></i> Download PDF Study Guide</button>
      </div>
    </div>
  </div>"
}

fn tutor_page() -> String {
  "
  <div>
    <h1>AI Neural Tutor</h1>
    <p class='subtitle'>LLM-Powered • Gemini / GPT-4 • Real Responses</p>
    
    <div style='display: grid; grid-template-columns: 2.5fr 1fr; gap: 30px; margin-top: 30px;'>
      <div class='chat-window'>
        <div style='display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid rgba(0,242,255,0.1);'>
          <h3 style='margin:0;'>Chat</h3>
          <button class='accent-button compact-btn' onclick='clearChat()'><i class='fas fa-trash'></i> Clear Chat</button>
        </div>
        <div class='chat-messages' id='chatMessages'>
          <div class='message ai'>
            <strong>AI Tutor:</strong> Hello! I'm your advanced learning companion. I can help you with explanations, examples, practice problems, and study strategies. What would you like to learn about today?
          </div>
        </div>
        <div class='chat-input'>
          <input type='text' class='premium-input' id='tutorInput' placeholder='Ask anything - get AI-powered answers...'>
          <button class='premium-button' onclick='sendTutorMessage()' style='padding: 14px 24px;'><i class='fas fa-paper-plane'></i></button>
        </div>
      </div>
      
      <div>
        <h3>Quick Topics</h3>
        <div style='display: flex; flex-direction: column; gap: 10px;'>
          <button class='accent-button' style='width: 100%; justify-content: flex-start;' onclick='askTutor(\"Explain photosynthesis\")'><i class='fas fa-leaf'></i> Photosynthesis</button>
          <button class='accent-button' style='width: 100%; justify-content: flex-start;' onclick='askTutor(\"Quantum superposition explained\")'><i class='fas fa-atom'></i> Quantum Physics</button>
          <button class='accent-button' style='width: 100%; justify-content: flex-start;' onclick='askTutor(\"Generate practice questions\")'><i class='fas fa-question'></i> Practice Q's</button>
          <button class='accent-button' style='width: 100%; justify-content: flex-start;' onclick='askTutor(\"Study tips for exams\")'><i class='fas fa-lightbulb'></i> Study Tips</button>
          <button class='accent-button' style='width: 100%; justify-content: flex-start;' onclick='askTutor(\"Compare and contrast concepts\")'><i class='fas fa-code-compare'></i> Compare Topics</button>
        </div>
      </div>
    </div>
  </div>"
}

pub fn ai_solver_page() -> String {
  let ui_content =
    "<div class='glass-panel' style='margin-bottom: 25px; padding: 25px;'>" <>
    "<h1 style='margin: 0; color: var(--accent-cyan); display: flex; align-items: center; gap: 12px;'>" <>
    "<i class='fas fa-brain fa-pulse' style='color: var(--accent-cyan);'></i> Omni-Modal AI Solver" <>
    "</h1>" <>
    "<p style='color: #94a3b8; margin-top: 5px; margin-bottom: 0;'>" <>
    "Deploying deep visual reasoning models. Upload math, physics, or engineering structures for immediate multi-modal synthesis." <>
    "</p>" <>
    "</div>" <>
    "<div class='bento-grid'>" <>
    "<section class='glass-panel span-2-col'>" <>
    "<div class='panel-header'>" <>
    "<h3><i class='fas fa-satellite-dish'></i> Input Matrix Terminal</h3>" <>
    "<span class='badge' style='background: rgba(0, 242, 255, 0.15); color: var(--accent-cyan); border: 1px solid rgba(0, 242, 255, 0.3);'>Ready for Synthesis</span>" <>
    "</div>" <>
    "<div class='grid-2' style='margin-top:20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;'>" <>
    "<div id='drop-zone' style='border: 2px dashed rgba(0, 242, 255, 0.3); padding: 40px 20px; border-radius: 12px; text-align: center; background: rgba(0,0,0,0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative;'>" <>
    "<i class='fas fa-cloud-arrow-up' style='font-size: 2.5rem; color: var(--accent-cyan); margin-bottom: 15px;'></i>" <>
    "<h4 style='margin: 0 0 5px 0;'>Drag & Drop Media Matrix</h4>" <>
    "<p style='color: #64748b; font-size: 0.85rem; margin-bottom: 15px;'>PNG, JPG, MP4 Core Extractor, or Clipboard Paste</p>" <>
    "<input type='file' id='media-input' accept='image/*,video/mp4' style='display:none'>" <>
    "<button class='premium-button' onclick='document.getElementById(\"media-input\").click()' style='position: relative; z-index: 10;'>Mount Vector File</button>" <>
    "<div id='media-preview' style='display: none; margin-top: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px;'>" <>
    "<p id='file-meta' style='font-size: 0.8rem; color: var(--accent-cyan); margin-bottom: 10px; font-family: monospace;'></p>" <>
    "<img id='preview-img' style='max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; display: none; margin: 0 auto; border: 1px solid rgba(255,255,255,0.1);'>" <>
    "<video id='preview-vid' style='max-width: 100%; max-height: 220px; border-radius: 8px; display: none; margin: 0 auto;' controls></video>" <>
    "</div>" <>
    "</div>" <>
    "<div style='display: flex; flex-direction: column; justify-content: space-between;'>" <>
    "<textarea class='premium-input' id='txt-input' placeholder='Input your query variables or explicit contextual constraints here...' style='flex-grow: 1; min-height: 140px; resize: none; margin-bottom: 15px; background: rgba(0,0,0,0.4); color: #f8fafc; font-family: sans-serif; padding: 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;'></textarea>" <>
    "<div style='display: flex; gap: 10px;'>" <>
    "<select class='premium-input' id='solve-mode' style='width: 40%; background: #0f172a; color: #f8fafc; border: 1px solid rgba(255,255,255,0.1); padding: 10px; border-radius: 8px;'>" <>
    "<option value='step'>Step Breakdown Engine</option>" <>
    "<option value='direct'>Direct Answer Optimality</option>" <>
    "<option value='eli5'>Conceptual Reduction (ELI5)</option>" <>
    "</select>" <>
    "<button class='premium-button' id='synthesize-btn' onclick='window.AISolver.initiateAnalysis()' style='flex-grow: 1; background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)); border: none; color: white; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 8px;'>" <>
    "<i class='fas fa-bolt'></i> Synthesize Solution" <>
    "</button>" <>
    "</div>" <>
    "</div>" <>
    "</div>" <>
    "</section>" <>
    "<section id='result-panel' class='glass-panel span-2-col' style='display: none; transition: all 0.5s ease; margin-top: 20px;'>" <>
    "<div class='panel-header' style='border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; margin-bottom: 15px;'>" <>
    "<h3><i class='fas fa-network-wired'></i> Cognitive Breakdown Matrix</h3>" <>
    "<span id='confidence-badge' class='badge' style='background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3);'>Awaiting Core Data</span>" <>
    "</div>" <>
    "<div id='ai-loader' style='text-align: center; padding: 40px;'>" <>
    "<i class='fas fa-atom fa-spin' style='font-size: 2.5rem; color: var(--accent-cyan); margin-bottom: 15px;'></i>" <>
    "<p id='loader-text' style='color: #cbd5e1; font-family: monospace; letter-spacing: 1px;'>Warming Quantum Pipeline...</p>" <>
    "<div style='width: 50%; height: 4px; background: #1e293b; margin: 15px auto; border-radius: 2px; overflow: hidden;'>" <>
    "<div id='loader-bar' style='width: 0%; height: 100%; background: var(--accent-cyan); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);'></div>" <>
    "</div>" <>
    "</div>" <>
    "<div id='ai-solution' style='display: none;'>" <>
    "<div style='background: rgba(0,242,255,0.03); padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid rgba(0,242,255,0.1);'>" <>
    "<h4 style='color: #f8fafc; margin-top: 0; display: flex; align-items: center; gap: 8px;'><i class='fas fa-lightbulb' style='color: #fbbf24;'></i> Core Identity Target Matrix</h4>" <>
    "<p id='concept-tag' style='color: #94a3b8; font-size: 0.95rem; margin-bottom: 0; font-family: monospace;'>Processing execution block...</p>" <>
    "</div>" <>
    "<div id='step-container' style='padding-left: 20px; border-left: 2px solid var(--accent-purple); margin-bottom: 25px; display: flex; flex-direction: column; gap: 20px;'>" <>
    "</div>" <>
    "<div style='display: flex; gap: 12px; justify-content: flex-end;'>" <>
    "<button class='action-btn' style='background: rgba(255,255,255,0.05); color: white; border: 1px solid rgba(255,255,255,0.1); padding: 10px 16px; border-radius: 8px; cursor: pointer;' onclick='window.AISolver.generateSimilar()'><i class='fas fa-random'></i> Generate Identical Practice</button>" <>
    "<button class='premium-button' onclick='window.AISolver.sendToVault()' style='background: rgba(139, 92, 246, 0.2); border: 1px solid #8b5cf6; color: #c4b5fd; padding: 10px 16px; border-radius: 8px; cursor: pointer;'><i class='fas fa-plus'></i> Commit to Vector Vault</button>" <>
    "</div>" <>
    "</div>" <>
    "</section>" <>
    "</div>"

  let js_logic =
    "<script>" <>
    "window.AISolver = {" <>
    "activeFile: null," <>
    "analysisHistory: []," <>
    "showNotification: function(message, type) {" <>
    "let container = document.getElementById('notification-container');" <>
    "if (!container) {" <>
    "container = document.createElement('div');" <>
    "container.id = 'notification-container';" <>
    "container.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;';" <>
    "document.body.appendChild(container);" <>
    "}" <>
    "const notification = document.createElement('div');" <>
    "const bgColor = type === 'error' ? '#7f1d1d' : type === 'success' ? '#064e3b' : '#1e293b';" <>
    "const borderColor = type === 'error' ? '#ef4444' : type === 'success' ? '#10b981' : '#3b82f6';" <>
    "notification.style.cssText = 'background:' + bgColor + ';border:1px solid ' + borderColor + ';color:white;padding:15px;border-radius:8px;font-family:sans-serif;box-shadow:0 4px 6px rgba(0,0,0,0.3);position:relative;';" <>
    "const header = document.createElement('div');" <>
    "header.style.cssText = 'display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;';" <>
    "const title = document.createElement('strong');" <>
    "title.innerText = type ? type.toUpperCase() : 'INFO';" <>
    "const closeBtn = document.createElement('button');" <>
    "closeBtn.innerText = 'x';" <>
    "closeBtn.style.cssText = 'background:transparent;border:none;color:white;cursor:pointer;font-size:1.2rem;';" <>
    "closeBtn.onclick = function() { notification.remove(); };" <>
    "header.appendChild(title);" <>
    "header.appendChild(closeBtn);" <>
    "const bodyText = document.createElement('p');" <>
    "bodyText.style.margin = '0';" <>
    "bodyText.innerText = message;" <>
    "notification.appendChild(header);" <>
    "notification.appendChild(bodyText);" <>
    "container.appendChild(notification);" <>
    "setTimeout(function() { if (notification.parentElement) notification.remove(); }, 5000);" <>
    "}," <>
    "setupListeners: function() {" <>
    "const dropZone = document.getElementById('drop-zone');" <>
    "const fileInput = document.getElementById('media-input');" <>
    "if(dropZone && fileInput) {" <>
    "dropZone.addEventListener('dragover', (e) => { e.preventDefault(); });" <>
    "dropZone.addEventListener('drop', (e) => { e.preventDefault(); if(e.dataTransfer.files.length) this.handleFile(e.dataTransfer.files[0]); });" <>
    "fileInput.addEventListener('change', (e) => this.handleFile(e.target.files[0]));" <>
    "}" <>
    "}," <>
    "handleFile: function(file) {" <>
    "this.activeFile = file;" <>
    "const preview = document.getElementById('media-preview');" <>
    "const fileMeta = document.getElementById('file-meta');" <>
    "const previewImg = document.getElementById('preview-img');" <>
    "const previewVid = document.getElementById('preview-vid');" <>
    "if (preview && fileMeta) {" <>
    "preview.style.display = 'block';" <>
    "fileMeta.textContent = file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)';" <>
    "if (file.type.startsWith('image/')) {" <>
    "const reader = new FileReader();" <>
    "reader.onload = (e) => {" <>
    "if (previewImg) { previewImg.src = e.target.result; previewImg.style.display = 'block'; }" <>
    "if (previewVid) previewVid.style.display = 'none';" <>
    "this.showNotification('Image loaded: ' + file.name + ' - Ready for analysis', 'success');" <>
    "};" <>
    "reader.readAsDataURL(file);" <>
    "} else if (file.type.startsWith('video/')) {" <>
    "if (previewVid) { previewVid.src = URL.createObjectURL(file); previewVid.style.display = 'block'; }" <>
    "if (previewImg) previewImg.style.display = 'none';" <>
    "this.showNotification('Video loaded: ' + file.name + ' - Ready for analysis', 'success');" <>
    "}" <>
    "}" <>
    "}," <>
    "initiateAnalysis: async function() {" <>
    "const promptInput = document.getElementById('txt-input');" <>
    "const modeInput = document.getElementById('solve-mode');" <>
    "const synthBtn = document.getElementById('synthesize-btn');" <>
    "if (!promptInput.value.trim() && !this.activeFile) {" <>
    "this.showNotification('Analytical Error: Input query or media required.', 'error');" <>
    "return;" <>
    "}" <>
    "synthBtn.disabled = true;" <>
    "document.getElementById('result-panel').style.display = 'block';" <>
    "document.getElementById('ai-loader').style.display = 'block';" <>
    "try {" <>
    "const controller = new AbortController();" <>
    "const timeoutId = setTimeout(() => controller.abort(), 30000);" <>
    "const prompt = encodeURIComponent(promptInput.value);" <>
    "const mode = encodeURIComponent(modeInput.value);" <>
    "const fileInfo = this.activeFile ? '&file=' + encodeURIComponent(this.activeFile.name) : '';" <>
    "const response = await fetch('/api/ai-solver?prompt=' + prompt + '&mode=' + mode + fileInfo, {" <>
    "method: 'GET'," <>
    "headers: { 'Accept': 'application/json' }," <>
    "signal: controller.signal" <>
    "});" <>
    "clearTimeout(timeoutId);" <>
    "if (!response.ok) {" <>
    "const errorText = await response.text();" <>
    "throw new Error('Server error (' + response.status + '): ' + errorText.substring(0, 100));" <>
    "}" <>
    "const data = await response.json();" <>
    "if (data.error) {" <>
    "throw new Error(data.error);" <>
    "}" <>
    "this.renderServerOutput(data);" <>
    "this.showNotification('Analysis complete! Confidence: ' + data.confidence, 'success');" <>
    "} catch (err) {" <>
    "document.getElementById('ai-loader').style.display = 'none';" <>
    "document.getElementById('result-panel').style.display = 'none';" <>
    "let errorMsg = err.message;" <>
    "if (err.name === 'AbortError') {" <>
    "errorMsg = 'Request timed out. The analysis is taking too long. Please try again.';" <>
    "} else if (err.message.includes('Failed to fetch')) {" <>
    "errorMsg = 'Network error. Please check your connection and ensure the server is running.';" <>
    "}" <>
    "this.showNotification(errorMsg, 'error');" <>
    "console.error('AI Solver Error:', err);" <>
    "} finally {" <>
    "synthBtn.disabled = false;" <>
    "}" <>
    "}," <>
    "renderServerOutput: function(data) {" <>
    "document.getElementById('ai-loader').style.display = 'none';" <>
    "document.getElementById('ai-solution').style.display = 'block';" <>
    "const conceptTag = document.getElementById('concept-tag');" <>
    "if (conceptTag && data.concept) {" <>
    "conceptTag.textContent = data.concept;" <>
    "}" <>
    "const confidenceBadge = document.getElementById('confidence-badge');" <>
    "if (confidenceBadge && data.confidence) {" <>
    "confidenceBadge.textContent = 'Confidence: ' + data.confidence;" <>
    "}" <>
    "var container = document.getElementById('step-container');" <>
    "if (container) {" <>
    "container.innerHTML = '';" <>
    "if (data.steps && Array.isArray(data.steps)) {" <>
    "data.steps.forEach(function(step, idx) {" <>
    "var stepDiv = document.createElement('div');" <>
    "stepDiv.style.marginBottom = '15px';" <>
    "stepDiv.style.padding = '15px';" <>
    "stepDiv.style.background = 'rgba(0,0,0,0.2)';" <>
    "stepDiv.style.borderRadius = '8px';" <>
    "const stepTitle = document.createElement('h5');" <>
    "stepTitle.style.cssText = 'color:#00f2ff; margin-top:0;';" <>
    "stepTitle.innerText = 'STEP ' + (idx + 1) + ': ' + step.title;" <>
    "const stepDesc = document.createElement('p');" <>
    "stepDesc.style.cssText = 'color:#cbd5e1; margin-bottom:0;';" <>
    "stepDesc.innerText = step.description;" <>
    "stepDiv.appendChild(stepTitle);" <>
    "stepDiv.appendChild(stepDesc);" <>
    "container.appendChild(stepDiv);" <>
    "});" <>
    "}" <>
    "}" <>
    "if (data.verdict) {" <>
    "var verdictDiv = document.createElement('div');" <>
    "verdictDiv.style.cssText = 'background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);padding:15px;border-radius:8px;margin-top:15px;';" <>
    "verdictDiv.innerHTML = '<h5 style=\"color:#34d399;margin:0 0 8px 0;\"><i class=\"fas fa-gavel\"></i> AI Verdict</h5><p style=\"color:#cbd5e1;margin:0;\">' + data.verdict + '</p>';" <>
    "container.appendChild(verdictDiv);" <>
    "}" <>
    "if (data.facts && Array.isArray(data.facts)) {" <>
    "var factsDiv = document.createElement('div');" <>
    "factsDiv.style.cssText = 'background:rgba(0,242,255,0.05);border:1px solid rgba(0,242,255,0.15);padding:15px;border-radius:8px;margin-top:15px;';" <>
    "var factsHtml = '<h5 style=\"color:#00f2ff;margin:0 0 8px 0;\"><i class=\"fas fa-list-check\"></i> Key Facts</h5>';" <>
    "data.facts.forEach(function(f) { factsHtml += '<p style=\"color:#cbd5e1;margin:4px 0;font-size:0.9rem;\">• ' + f + '</p>'; });" <>
    "factsDiv.innerHTML = factsHtml;" <>
    "container.appendChild(factsDiv);" <>
    "}" <>
    "if (data.summary) {" <>
    "var summaryDiv = document.createElement('div');" <>
    "summaryDiv.style.cssText = 'background:rgba(139,92,246,0.08);border:1px solid rgba(139,92,246,0.2);padding:15px;border-radius:8px;margin-top:15px;';" <>
    "summaryDiv.innerHTML = '<h5 style=\"color:#a78bfa;margin:0 0 8px 0;\"><i class=\"fas fa-file-lines\"></i> Summary</h5><p style=\"color:#cbd5e1;margin:0;line-height:1.6;\">' + data.summary + '</p>';" <>
    "container.appendChild(summaryDiv);" <>
    "}" <>
    "if (data.image_description) {" <>
    "var imgDiv = document.createElement('div');" <>
    "imgDiv.style.cssText = 'background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);padding:15px;border-radius:8px;margin-top:15px;';" <>
    "imgDiv.innerHTML = '<h5 style=\"color:#f59e0b;margin:0 0 8px 0;\"><i class=\"fas fa-image\"></i> Media Analysis</h5><p style=\"color:#cbd5e1;margin:0;\">' + data.image_description + '</p>';" <>
    "container.appendChild(imgDiv);" <>
    "}" <>
    "this.analysisHistory.push({" <>
    "timestamp: new Date().toISOString()," <>
    "concept: data.concept," <>
    "confidence: data.confidence" <>
    "});" <>
    "}," <>
    "generateSimilar: function() {" <>
    "this.showNotification('Generating similar practice problem...', 'info');" <>
    "setTimeout(() => {" <>
    "this.showNotification('Practice problem generated! Check the result panel.', 'success');" <>
    "}, 1500);" <>
    "}," <>
    "sendToVault: function() {" <>
    "const concept = document.getElementById('concept-tag')?.textContent || 'Unknown';" <>
    "this.showNotification('Solution committed to Vector Vault: ' + concept, 'success');" <>
    "}" <>
    "};" <>
    "window.addEventListener('DOMContentLoaded', function() {" <>
    "window.AISolver.setupListeners();" <>
    "});" <>
    "</script>"

  "<div>" <> ui_content <> js_logic <> "</div>"
}
pub fn study_tools_page() -> String {
    "
    <div class='dashboard-container'>
      <header class='dash-header'>
        <div>
          <h1 class='text-glow'>Cognitive Study Engine</h1>
          <p class='subtitle'>Algorithmic Generation • Concept Mapping • Tool Hub</p>
        </div>
      </header>

      <div id='toast-container' class='toast-container'></div>

      <div class='bento-grid'>
        <section class='glass-panel span-2-col'>
          <div class='panel-header'>
            <h3><i class='fas fa-brain'></i> AI Synthesis Engine</h3>
          </div>
          
          <div class='generator-controls'>
            <div class='input-group'>
              <label>Target Concept</label>
              <input type='text' id='study-topic' class='premium-input' placeholder='e.g., Cellular Respiration, Quantum Entanglement'>
            </div>
            <div class='input-group'>
              <label>Cognitive Load (Difficulty)</label>
              <select id='study-diff' class='premium-input'>
                <option value='Standard'>Standard</option>
                <option value='Advanced'>Advanced</option>
                <option value='Expert'>Expert (Post-Grad)</option>
              </select>
            </div>
            <button class='action-btn primary-btn' onclick='StudyEngine.generateCards()'>
              <i class='fas fa-bolt'></i> Synthesize Questions
            </button>
          </div>

          <div id='generation-status' class='status-bar hidden'>
            <div class='loader-line'></div>
            <p>Compiling conceptual pathways...</p>
          </div>

          <div id='results-zone' class='results-grid hidden'></div>
        </section>

        <section class='glass-panel side-panel'>
          <div class='panel-header'>
            <h3><i class='fas fa-toolbox'></i> Quick Utilities</h3>
          </div>
          <div class='tool-list'>
            <div class='tool-card' onclick='StudyEngine.navigate(\"/formulas\")'>
              <div class='tool-icon accent-blue'><i class='fas fa-square-root-variable'></i></div>
              <div class='tool-text'>
                <h4>Formula Matrix</h4>
                <p>Universal equation reference</p>
              </div>
            </div>
            
            <div class='tool-card' onclick='StudyEngine.navigate(\"/vocabulary\")'>
              <div class='tool-icon accent-purple'><i class='fas fa-language'></i></div>
              <div class='tool-text'>
                <h4>Lexicon Builder</h4>
                <p>Academic vocabulary expansion</p>
              </div>
            </div>
            
            <div class='tool-card' onclick='StudyEngine.navigate(\"/notes\")'>
              <div class='tool-icon accent-green'><i class='fas fa-terminal'></i></div>
              <div class='tool-text'>
                <h4>Rapid Capture</h4>
                <p>Instant thought logging</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <style>
      :root {
        --bg-dark: #020617; --bg-panel: rgba(15, 23, 42, 0.6);
        --accent-cyan: #00f2ff; --accent-purple: #8b5cf6;
        --success: #10b981; --text-main: #f8fafc; --text-muted: #94a3b8;
        --border-light: rgba(255, 255, 255, 0.1);
      }
      .dashboard-container { min-height: 100vh; background: var(--bg-dark); color: var(--text-main); font-family: 'Inter', sans-serif; padding: 40px; }
      .dash-header { margin-bottom: 40px; border-bottom: 1px solid var(--border-light); padding-bottom: 20px; }
      .text-glow { background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.5rem; font-weight: 800; }
      .subtitle { color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; margin-top: 10px; }
      .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
      .span-2-col { grid-column: span 2; }
      .glass-panel { background: var(--bg-panel); backdrop-filter: blur(12px); border: 1px solid var(--border-light); border-radius: 16px; padding: 30px; }
      .panel-header { border-bottom: 1px solid var(--border-light); padding-bottom: 15px; margin-bottom: 25px; }
      .generator-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
      .input-group { display: flex; flex-direction: column; gap: 8px; }
      .premium-input { background: rgba(0,0,0,0.3); border: 1px solid var(--border-light); color: white; padding: 12px 15px; border-radius: 8px; }
      .action-btn { background: rgba(255,255,255,0.05); border: 1px solid var(--border-light); color: var(--text-main); padding: 12px 20px; border-radius: 8px; cursor: pointer; }
      .primary-btn { grid-column: span 2; background: linear-gradient(135deg, rgba(0,242,255,0.2), rgba(139,92,246,0.2)); border-color: var(--accent-cyan); color: var(--accent-cyan); }
      .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
      .result-card { background: rgba(0,0,0,0.4); border: 1px solid #1e293b; padding: 20px; border-radius: 12px; border-left: 3px solid var(--accent-purple); }
      .hidden { display: none !important; }
      .toast { position: fixed; bottom: 30px; right: 30px; background: #0f172a; border-left: 4px solid #10b981; color: white; padding: 15px; border-radius: 8px; }
    </style>

    <script>
      const StudyEngine = {
        dbKey: 'flashsync_enterprise_cards',

        generateCards: function() {
          const topic = document.getElementById('study-topic').value || 'General Knowledge';
          const diff = document.getElementById('study-diff').value;
          document.getElementById('generation-status').classList.remove('hidden');
          setTimeout(() => {
            document.getElementById('generation-status').classList.add('hidden');
            this.renderResults(topic, diff);
          }, 1200);
        },

        renderResults: function(topic, diff) {
          const zone = document.getElementById('results-zone');
          const q1 = 'Explain ' + topic + ' (' + diff + ')';
          const a1 = 'Core principles of ' + topic + '...';
          
          zone.innerHTML = `
            <div class='result-card'>
              <h4>Conceptual Analysis</h4>
              <p>` + q1 + `</p>
              <button class='action-btn' data-q='` + q1 + `' data-a='` + a1 + `' data-diff='` + diff + `' onclick='StudyEngine.saveCard(this)'>
                <i class='fas fa-plus'></i> Export to Flashcards
              </button>
            </div>
          `;
          zone.classList.remove('hidden');
        },

        saveCard: function(btnElement) {
          const q = btnElement.getAttribute('data-q');
          const a = btnElement.getAttribute('data-a');
          const diff = btnElement.getAttribute('data-diff');

          let existingCards = JSON.parse(localStorage.getItem(this.dbKey) || '[]');
          existingCards.push({ question: q, answer: a, difficulty: diff, dateAdded: new Date().toISOString() });
          localStorage.setItem(this.dbKey, JSON.stringify(existingCards));

          btnElement.innerHTML = '<i class=\"fas fa-check\"></i> Saved!';
          btnElement.style.borderColor = '#10b981';
          this.showToast('Synced to Vault');
        },

        showToast: function(msg) {
          const toast = document.createElement('div');
          toast.className = 'toast';
          toast.innerText = msg;
          document.body.appendChild(toast);
          setTimeout(() => toast.remove(), 3000);
        },

        navigate: function(path) { console.log('Navigating to ' + path); }
      };
    </script>
    "
}
pub fn heatmap_page() -> String {
  "
  <div id='neural-dashboard' class='dashboard-container'>
    <nav class='side-nav'>
      <div class='nav-logo'><i class='fas fa-dna'></i></div>
      <div class='nav-items'>
        <button class='nav-btn active' title='Heatmap' onclick='window.location.href=\"/heatmap\"'><i class='fas fa-project-diagram'></i></button>
        <button class='nav-btn' title='Analytics' onclick='window.location.href=\"/analytics\"'><i class='fas fa-chart-pie'></i></button>
        <button class='nav-btn' title='Settings' onclick='window.location.href=\"/settings\"'><i class='fas fa-cog'></i></button>
        <button class='nav-btn' title='Exam' onclick='window.location.href=\"/exam\"'><i class='fas fa-clipboard-list'></i></button>
        <button class='nav-btn' title='Hub' onclick='window.location.href=\"/hub\"'><i class='fas fa-home'></i></button>
      </div>
    </nav>

    <main class='dash-main'>
      <header class='dash-header'>
        <div class='header-title'>
          <h1 class='text-glow'>Neural Heatmap v3.0</h1>
          <p class='subtitle'>Cognitive Constellation • Real-time Synaptic Mapping</p>
        </div>
        <div class='global-metrics'>
          <div class='metric-badge'>
            <span class='label'>Neural Entropy</span>
            <span class='value warning'>Low</span>
          </div>
          <div class='metric-badge'>
            <span class='label'>Global Mastery</span>
            <span class='value success' id='globalMasteryVal'>82.4%</span>
          </div>
          <div class='metric-badge'>
            <span class='label'>Active Neurons</span>
            <span class='value success' id='activeNeuronCount'>5/8</span>
          </div>
        </div>
      </header>

      <div class='bento-grid'>
        
        <section class='glass-panel span-2-col'>
          <div class='panel-header'>
            <h3>🧠 Knowledge Constellation</h3>
            <div class='controls'>
              <button class='icon-btn' onclick='SystemCore.zoom(1.2)'><i class='fas fa-search-plus'></i></button>
              <button class='icon-btn' onclick='SystemCore.zoom(0.8)'><i class='fas fa-search-minus'></i></button>
              <button class='icon-btn' onclick='SystemCore.autoOrganize()' title='Auto-arrange nodes'><i class='fas fa-arrows-alt'></i></button>
            </div>
          </div>
          <div class='graph-container' id='graph-zone'>
            <div class='scanning-overlay'></div>
            <svg id='constellation-svg' viewBox='0 0 1000 500'></svg>
            
            <div id='node-inspector' class='floating-inspector hidden'>
              <div class='inspector-header'>
                <h4 id='node-title'>Node Data</h4>
                <button class='close-btn' onclick='SystemCore.closeInspector()'>&times;</button>
              </div>
              <div class='inspector-body'>
                <p id='node-desc'>Select a node to analyze.</p>
                <div class='progress-track'>
                  <div id='node-progress' class='progress-fill'></div>
                </div>
                <div class='inspector-stats'>
                  <span id='node-stat-1'></span>
                  <span id='node-stat-2' style='display:block;margin-top:8px;color:#94a3b8;font-size:0.85rem;'></span>
                  <button class='action-btn full-width mt-10' onclick='SystemCore.launchProtocol()'><i class='fas fa-rocket'></i> Generate Study Plan</button>
                  <button class='action-btn full-width mt-10' style='background:rgba(16,185,129,0.1);border-color:var(--success);color:var(--success);' onclick='SystemCore.saveNodeProgress()'><i class='fas fa-save'></i> Save to Profile</button>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class='glass-panel'>
          <div class='panel-header'>
            <h3><i class='fas fa-microchip'></i> Neural Activity Log</h3>
            <span class='live-indicator'>LIVE</span>
          </div>
          <div id='log-feed' class='terminal-feed'>
            </div>
          <div class='panel-footer' style='margin-top:15px;padding-top:15px;border-top:1px solid var(--border-light);'>
            <button class='action-btn full-width' onclick='SystemCore.clearLog()'><i class='fas fa-trash'></i> Clear Log</button>
          </div>
        </section>

        <section class='glass-panel'>
          <div class='panel-header'>
            <h3><i class='fas fa-radar'></i> Subject Radar</h3>
            <span class='badge' id='studyStreakBadge' style='background:rgba(245,158,11,0.2);color:var(--warning);padding:3px 8px;border-radius:12px;font-size:0.7rem;'>🔥 Streak: 0 days</span>
          </div>
          <div class='radar-container'>
            <div class='stat-row'><span>Quantum Mechanics</span><div class='bar-bg'><div class='bar-fill' style='width: 85%;'></div></div><small style='color:#94a3b8;'>Next review: tomorrow</small></div>
            <div class='stat-row'><span>Thermodynamics</span><div class='bar-bg'><div class='bar-fill warning-bg' style='width: 45%;'></div></div><small style='color:#94a3b8;'>Needs attention</small></div>
            <div class='stat-row'><span>Organic Chem</span><div class='bar-bg'><div class='bar-fill' style='width: 92%;'></div></div><small style='color:#94a3b8;'>Optimized ✓</small></div>
            <div class='stat-row'><span>Calculus III</span><div class='bar-bg'><div class='bar-fill danger-bg' style='width: 28%;'></div></div><small style='color:#ef4444;'>Critical - study now!</small></div>
            <div class='stat-row'><span>Data Structures</span><div class='bar-bg'><div class='bar-fill' style='width: 67%;'></div></div><small style='color:#94a3b8;'>Steady progress</small></div>
            <div class='stat-row'><span>Biology</span><div class='bar-bg'><div class='bar-fill' style='width: 73%;'></div></div><small style='color:#94a3b8;'>Good momentum</small></div>
          </div>
          <div style='margin-top:15px;'>
            <button class='action-btn full-width' onclick='SystemCore.simulateStudy()'><i class='fas fa-graduation-cap'></i> Simulate Study Session</button>
          </div>
        </section>

        <section class='glass-panel span-2-col'>
          <div class='panel-header'>
            <h3><i class='fas fa-crosshairs'></i> Personalized Action Engine</h3>
          </div>
          <div class='action-grid'>
            <div class='action-card danger-border'>
              <h4><i class='fas fa-exclamation-triangle' style='color:var(--danger);'></i> Critical Decay Detected</h4>
              <p>Calculus III pathways are degrading (28% mastery). Recommended intervention within 12 hours to prevent memory loss.</p>
              <div style='display:flex;gap:10px;margin-top:10px;'>
                <button class='action-btn full-width mt-10' onclick='SystemCore.launchProtocol()'>Generate Rescue Deck</button>
                <button class='action-btn full-width mt-10' style='background:rgba(239,68,68,0.1);border-color:var(--danger);color:var(--danger);' onclick='window.location.href=\"/tutor\"'>Ask AI Tutor</button>
              </div>
            </div>
            <div class='action-card warning-border'>
              <h4><i class='fas fa-clock' style='color:var(--warning);'></i> Spaced Repetition Due</h4>
              <p>Thermodynamics formulas are ready for Phase 3 consolidation. A 15-minute review can boost retention to 78%.</p>
              <div style='display:flex;gap:10px;margin-top:10px;'>
                <button class='action-btn full-width mt-10'>Start Review Cycle</button>
                <button class='action-btn full-width mt-10' style='background:rgba(245,158,11,0.1);border-color:var(--warning);color:var(--warning);' onclick='window.location.href=\"/flashcards\"'>Open Flashcards</button>
              </div>
            </div>
            <div class='action-card' style='border-left-color:var(--success);'>
              <h4><i class='fas fa-trophy' style='color:var(--success);'></i> Achievement Unlock Ready</h4>
              <p>Study for 3 more consecutive days to unlock the \"Neural Architect\" badge and earn 500 XP bonus!</p>
              <button class='action-btn full-width mt-10' onclick='window.location.href=\"/achievements\"'>View Achievements</button>
            </div>
            <div class='action-card' style='border-left-color:var(--accent-cyan);'>
              <h4><i class='fas fa-chart-line' style='color:var(--accent-cyan);'></i> Recommended Focus Area</h4>
              <p>Based on your knowledge graph gaps, prioritizing <strong>Calculus III</strong> will maximize your overall mastery.</p>
              <button class='action-btn full-width mt-10' onclick='window.location.href=\"/pomodoro\"'>Start Focus Session</button>
            </div>
          </div>
        </section>

        <section class='glass-panel span-2-col'>
          <div class='panel-header'>
            <h3><i class='fas fa-history'></i> Study Timeline & Predictions</h3>
          </div>
          <div class='timeline-container' style='display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;'>
            <div class='timeline-card' style='background:rgba(2,6,23,0.5);padding:15px;border-radius:12px;border:1px solid var(--border-light);text-align:center;'>
              <p style='color:var(--text-muted);font-size:0.8rem;text-transform:uppercase;'>Yesterday</p>
              <p style='font-size:1.5rem;font-weight:bold;color:var(--warning);'>47 min</p>
              <p style='color:#94a3b8;font-size:0.85rem;'>+3% mastery gain</p>
            </div>
            <div class='timeline-card' style='background:rgba(16,185,129,0.1);padding:15px;border-radius:12px;border:1px solid var(--success);text-align:center;'>
              <p style='color:var(--text-muted);font-size:0.8rem;text-transform:uppercase;'>Today</p>
              <p style='font-size:1.5rem;font-weight:bold;color:var(--success);'>32 min</p>
              <p style='color:#94a3b8;font-size:0.85rem;'>Current session</p>
            </div>
            <div class='timeline-card' style='background:rgba(0,242,255,0.05);padding:15px;border-radius:12px;border:1px solid var(--accent-cyan);text-align:center;'>
              <p style='color:var(--text-muted);font-size:0.8rem;text-transform:uppercase;'>Predicted</p>
              <p style='font-size:1.5rem;font-weight:bold;color:var(--accent-cyan);'>91.5%</p>
              <p style='color:#94a3b8;font-size:0.85rem;'>Mastery in 7 days</p>
            </div>
          </div>
          <div style='margin-top:15px;'>
            <button class='action-btn full-width' onclick='window.location.href=\"/predictor\"'><i class='fas fa-crystal-ball'></i> View Full Predictions Dashboard</button>
          </div>
        </section>

      </div>
    </main>
  </div>

  <div id='system-modal' class='modal-overlay hidden'>
    <div class='modal-content glass-panel'>
      <h2 class='text-glow'>🧠 Study Protocol Generated</h2>
      <p>Compiling optimal study paths based on selected neural node...</p>
      <div class='loader'></div>
      <div id='studyPlanResult' style='margin-top:20px;text-align:left;display:none;'>
        <h4 style='color:var(--success);margin-bottom:10px;'>✓ Study Plan Ready</h4>
        <p style='color:#94a3b8;font-size:0.9rem;'>• 15 min review session</p>
        <p style='color:#94a3b8;font-size:0.9rem;'>• 10 practice problems</p>
        <p style='color:#94a3b8;font-size:0.9rem;'>• 5 new flashcards</p>
        <button class='action-btn full-width mt-20' onclick='SystemCore.startStudyPlan()'><i class='fas fa-play'></i> Start Now</button>
      </div>
      <button class='action-btn mt-20' onclick='SystemCore.closeModal()'>Cancel</button>
    </div>
  </div>

  <style>
    :root {
      --bg-dark: #020617; --bg-panel: rgba(15, 23, 42, 0.7);
      --accent-cyan: #00f2ff; --accent-purple: #7000ff;
      --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
      --text-main: #f8fafc; --text-muted: #94a3b8;
      --border-light: rgba(255, 255, 255, 0.1);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    .dashboard-container { 
      display: flex; min-height: 100vh; background: var(--bg-dark); 
      color: var(--text-main); font-family: 'Inter', system-ui, sans-serif;
      overflow: hidden;
    }
    .side-nav { width: 80px; background: #0b1120; border-right: 1px solid var(--border-light); display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
    .nav-logo { font-size: 1.5rem; color: var(--accent-cyan); margin-bottom: 40px; }
    .nav-btn { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; margin-bottom: 20px; cursor: pointer; transition: 0.3s; width: 50px; height: 50px; border-radius: 12px; }
    .nav-btn:hover, .nav-btn.active { color: var(--accent-cyan); background: rgba(0, 242, 255, 0.1); }
    .dash-main { flex: 1; padding: 30px 40px; height: 100vh; overflow-y: auto; }
    .dash-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
    .text-glow { background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.5rem; font-weight: 800; filter: drop-shadow(0 0 15px rgba(0,242,255,0.3)); }
    .subtitle { color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; font-size: 0.85rem; margin-top: 5px; }
    .global-metrics { display: flex; gap: 15px; }
    .metric-badge { background: var(--bg-panel); border: 1px solid var(--border-light); padding: 10px 20px; border-radius: 8px; display: flex; flex-direction: column; align-items: flex-end; }
    .metric-badge .label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }
    .metric-badge .value { font-size: 1.2rem; font-weight: bold; }
    .success { color: var(--success); } .warning { color: var(--warning); }
    .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
    .span-2-col { grid-column: span 2; }
    .glass-panel { background: var(--bg-panel); backdrop-filter: blur(10px); border: 1px solid var(--border-light); border-radius: 16px; padding: 25px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
    .panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 15px; margin-bottom: 20px; }
    .panel-header h3 { font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
    .graph-container { height: 400px; position: relative; border-radius: 12px; background: radial-gradient(circle at center, #1e1b4b 0%, #020617 100%); overflow: hidden; border: 1px solid rgba(0,242,255,0.1); }
    #constellation-svg { width: 100%; height: 100%; transition: transform 0.3s ease; }
    .node { cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .node:hover { filter: drop-shadow(0 0 12px var(--accent-cyan)); stroke: #fff; stroke-width: 2px; }
    .link { stroke: rgba(0, 242, 255, 0.15); stroke-width: 1.5; stroke-dasharray: 4 2; animation: dash 20s linear infinite; }
    .floating-inspector { position: absolute; top: 20px; right: 20px; width: 280px; background: rgba(2, 6, 23, 0.95); border: 1px solid var(--accent-cyan); border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 10; transition: opacity 0.3s; }
    .inspector-header { display: flex; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; }
    .close-btn { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; }
    .progress-track { height: 6px; background: #1e293b; border-radius: 3px; margin: 15px 0; overflow: hidden; }
    .progress-fill { height: 100%; background: var(--accent-cyan); width: 0%; transition: width 1s ease; }
    .terminal-feed { height: 180px; overflow-y: auto; font-family: monospace; font-size: 0.85rem; color: var(--accent-cyan); display: flex; flex-direction: column; gap: 8px; }
    .log-line { border-left: 2px solid var(--border-light); padding-left: 10px; opacity: 0.8; animation: fadeIn 0.3s; }
    .live-indicator { font-size: 0.7rem; background: rgba(239, 68, 68, 0.2); color: var(--danger); padding: 3px 8px; border-radius: 12px; font-weight: bold; animation: pulse 2s infinite; }
    .stat-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
    .stat-row span { font-size: 0.85rem; color: var(--text-muted); }
    .bar-bg { width: 100%; height: 6px; background: #1e293b; border-radius: 3px; }
    .bar-fill { height: 100%; background: var(--accent-purple); border-radius: 3px; }
    .warning-bg { background: var(--warning); } .danger-bg { background: var(--danger); }
    .action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .action-card { background: rgba(2, 6, 23, 0.5); padding: 20px; border-radius: 12px; border-left: 4px solid var(--accent-cyan); }
    .danger-border { border-left-color: var(--danger); } .warning-border { border-left-color: var(--warning); }
    .action-btn { background: rgba(0, 242, 255, 0.1); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: 0.2s; }
    .action-btn:hover { background: var(--accent-cyan); color: #000; box-shadow: 0 0 15px rgba(0, 242, 255, 0.4); }
    .icon-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 5px; }
    .icon-btn:hover { color: #fff; }
    .full-width { width: 100%; } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; }
    .hidden { display: none !important; opacity: 0; pointer-events: none; }
    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); z-index: 100; display: flex; justify-content: center; align-items: center; }
    .modal-content { max-width: 500px; text-align: center; padding: 40px !important; }
    .loader { width: 40px; height: 40px; border: 3px solid rgba(0,242,255,0.2); border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; }
    .badge { display:inline-block; }
    @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
    @keyframes fadeIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes dash { to { stroke-dashoffset: -100; } }
    @keyframes spin { to { transform: rotate(360deg); } }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-dark); }
    ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }
  </style>

  <script>
    const SystemCore = {
      zoomLevel: 1,
      svgRoot: null,
      studyStreak: parseInt(localStorage.getItem('flashsync_study_streak') || '0'),
      
      nodes: [
        { id: 'n1', x: 200, y: 150, r: 28, color: '#00f2ff', label: 'Physics Core', mastery: 85, status: 'Stable' },
        { id: 'n2', x: 500, y: 80, r: 22, color: '#7000ff', label: 'Quantum Mech', mastery: 62, status: 'Developing' },
        { id: 'n3', x: 780, y: 180, r: 32, color: '#10b981', label: 'Organic Chem', mastery: 92, status: 'Optimized' },
        { id: 'n4', x: 300, y: 350, r: 24, color: '#ef4444', label: 'Calculus III', mastery: 28, status: 'Degrading' },
        { id: 'n5', x: 800, y: 380, r: 20, color: '#f59e0b', label: 'Thermodynamics', mastery: 45, status: 'Review Needed' },
        { id: 'n6', x: 600, y: 300, r: 18, color: '#8b5cf6', label: 'Data Struct', mastery: 67, status: 'Steady' },
        { id: 'n7', x: 100, y: 250, r: 16, color: '#06b6d4', label: 'Bio 101', mastery: 73, status: 'Good' },
        { id: 'n8', x: 680, y: 120, r: 14, color: '#f472b6', label: 'Algorithms', mastery: 55, status: 'Developing' }
      ],
      
      links: [
        { source: 0, target: 1 }, { source: 0, target: 3 }, { source: 1, target: 2 },
        { source: 3, target: 4 }, { source: 2, target: 4 }, { source: 0, target: 6 },
        { source: 1, target: 7 }, { source: 3, target: 5 }, { source: 5, target: 7 }
      ],

      logMessages: [
        '[SYSTEM] Recalculating synaptic weights...',
        '[ENGINE] Organic Chemistry retention verified at 92%.',
        '[ALERT] Cognitive decay detected in Calculus sector (28%).',
        '[OPTIMIZE] Compiling spaced repetition deck...',
        '[SYNC] Uploading progress to central neural net.',
        '[NEURAL] Physics core node is stable at 85%.',
        '[LEARN] New connection formed: Data Struct → Algorithms',
        '[STREAK] Study streak saved to local profile.'
      ],

      init() {
        this.svgRoot = document.getElementById('constellation-svg');
        this.renderGraph();
        this.startTerminalSimulation();
        this.updateStreak();
        document.getElementById('activeNeuronCount').innerText = this.nodes.length + '/8';
        this.logLocal('[BOOT] Neural Heatmap v3.0 initialized successfully');
      },

      renderGraph() {
        let svgContent = '';
        this.links.forEach(l => {
          const s = this.nodes[l.source];
          const t = this.nodes[l.target];
          const opacity = Math.min(s.mastery, t.mastery) / 100 * 0.4 + 0.1;
          svgContent += `<line x1='${s.x}' y1='${s.y}' x2='${t.x}' y2='${t.y}' class='link' style='stroke-opacity:${opacity}' />`;
        });
        this.nodes.forEach(n => {
          const glowFilter = n.mastery > 80 ? 'filter:drop-shadow(0 0 8px currentColor)' : '';
          svgContent += `<circle cx='${n.x}' cy='${n.y}' r='${n.r}' class='node' fill='${n.color}' onclick='SystemCore.inspectNode(\"${n.id}\")' style='${glowFilter}' />`;
          svgContent += `<text x='${n.x}' y='${n.y + n.r + 15}' fill='#94a3b8' font-size='11' text-anchor='middle' font-family='monospace'>${n.label} (${n.mastery}%)</text>`;
        });
        this.svgRoot.innerHTML = svgContent;
      },

      inspectNode(nodeId) {
        const node = this.nodes.find(n => n.id === nodeId);
        const inspector = document.getElementById('node-inspector');
        document.getElementById('node-title').innerText = node.label;
        document.getElementById('node-desc').innerHTML = `<strong>Status:</strong> ${node.status} &bull; <strong>Mastery:</strong> ${node.mastery}%`;
        document.getElementById('node-stat-1').innerHTML = `Neural Strength: <strong style='color:${node.color}'>${node.mastery > 70 ? 'Strong' : node.mastery > 40 ? 'Moderate' : 'Weak'}</strong>`;
        var warningMsg = 'Priority intervention recommended';
        var okMsg = 'On track';
        document.getElementById('node-stat-2').innerHTML = node.mastery < 50 ? '⚡ ' + warningMsg : '✓ ' + okMsg;
        inspector.classList.remove('hidden');
        setTimeout(() => {
          document.getElementById('node-progress').style.width = node.mastery + '%';
          document.getElementById('node-progress').style.backgroundColor = node.color;
        }, 100);
      },

      closeInspector() {
        document.getElementById('node-inspector').classList.add('hidden');
        document.getElementById('node-progress').style.width = '0%';
      },

      zoom(factor) {
        this.zoomLevel *= factor;
        this.svgRoot.style.transform = `scale(${this.zoomLevel})`;
        this.logLocal('[CONTROL] Zoom level: ' + Math.round(this.zoomLevel * 100) + '%');
      },

      autoOrganize() {
        this.nodes.forEach((n, i) => {
          n.x = 150 + (i % 4) * 220;
          n.y = 80 + Math.floor(i / 4) * 220;
        });
        this.renderGraph();
        this.logLocal('[SYSTEM] Nodes auto-arranged into optimal formation');
      },

      startTerminalSimulation() {
        const feed = document.getElementById('log-feed');
        setInterval(() => {
          const msg = this.logMessages[Math.floor(Math.random() * this.logMessages.length)];
          const time = new Date().toLocaleTimeString('en-US', { hour12: false });
          const el = document.createElement('div');
          el.className = 'log-line';
          el.innerText = '[' + time + '] ' + msg;
          feed.prepend(el);
          if(feed.children.length > 8) feed.removeChild(feed.lastChild);
        }, 4000);
      },

      clearLog() {
        document.getElementById('log-feed').innerHTML = '';
        this.logLocal('[SYSTEM] Activity log cleared');
      },

      logLocal(msg) {
        const feed = document.getElementById('log-feed');
        const time = new Date().toLocaleTimeString('en-US', { hour12: false });
        const el = document.createElement('div');
        el.className = 'log-line';
        el.innerText = '[' + time + '] ' + msg;
        feed.prepend(el);
        if(feed.children.length > 8) feed.removeChild(feed.lastChild);
      },

      launchProtocol() {
        document.getElementById('system-modal').classList.remove('hidden');
        document.getElementById('studyPlanResult').style.display = 'none';
        setTimeout(() => {
          document.querySelector('#system-modal .loader').style.display = 'none';
          document.getElementById('studyPlanResult').style.display = 'block';
        }, 2000);
        this.logLocal('[PROTOCOL] Study plan generated for selected node');
      },

      closeModal() {
        document.getElementById('system-modal').classList.add('hidden');
        document.querySelector('#system-modal .loader').style.display = '';
        document.getElementById('studyPlanResult').style.display = 'none';
      },

      startStudyPlan() {
        this.closeModal();
        this.studyStreak++;
        localStorage.setItem('flashsync_study_streak', this.studyStreak);
        this.updateStreak();
        this.logLocal('[STUDY] Study session started! Streak: ' + this.studyStreak + ' days');
        window.location.href = '/pomodoro';
      },

      updateStreak() {
        const badge = document.getElementById('studyStreakBadge');
        if (badge) badge.innerText = '🔥 Streak: ' + this.studyStreak + ' days';
      },

      saveNodeProgress() {
        localStorage.setItem('flashsync_last_node', document.getElementById('node-title').innerText);
        this.logLocal('[PROFILE] Node progress saved to profile');
        var btn = window.event.target;
        btn.innerText = '✓ Saved!';
        setTimeout(function() { btn.innerHTML = '<i class=\"fas fa-save\"></i> Save to Profile'; }, 2000);
      },

      simulateStudy() {
        const subjects = document.querySelectorAll('.stat-row');
        const increments = [3, 5, 2, 4, 6, 3];
        const progressBars = subjects.forEach((row, i) => {
          const fill = row.querySelector('.bar-fill');
          if (fill && i < increments.length) {
            const curr = parseFloat(fill.style.width) || 0;
            const newVal = Math.min(100, curr + increments[i]);
            fill.style.width = newVal + '%';
            if (newVal > 80) fill.style.background = 'var(--success)';
            else if (newVal > 50) fill.style.background = 'var(--accent-purple)';
          }
        });
        this.logLocal('[SIMULATE] Study session applied +3-6% gains across subjects');
        const masteryEl = document.getElementById('globalMasteryVal');
        if (masteryEl) {
          const curr = parseFloat(masteryEl.innerText) || 82.4;
          masteryEl.innerText = (curr + 1.2).toFixed(1) + '%';
        }
      }
    };
    window.onload = () => SystemCore.init();
  </script>
  "
}

fn biometric_page() -> String {
  "
  <div>
    <h1>Biometric Focus Tracking</h1>
    <p class='subtitle'>Live Eye-Tracking • Posture Analysis • Adaptive Music</p>
    
    <div class='grid-4'>
      <div class='stat-card'>
        <h3 style='color: var(--success);'>Focus Level</h3>
        <div>
          <svg width='100' height='100' style='margin: 10px auto; display: block;'>
            <circle cx='50' cy='50' r='45' fill='none' stroke='#222' stroke-width='8'></circle>
            <circle cx='50' cy='50' r='45' fill='none' stroke='var(--success)' stroke-width='8' stroke-dasharray='70.65 282.6' stroke-linecap='round' transform='rotate(-90 50 50)'></circle>
            <text x='50' y='55' text-anchor='middle' font-size='24' fill='var(--success)' font-weight='bold' id='focusLevel'>88%</text>
          </svg>
        </div>
      </div>
      
      <div class='stat-card'>
        <h3 style='color: var(--primary);'>Blink Rate</h3>
        <div style='font-size: 2.5rem; color: var(--primary); text-align: center; margin: 15px 0;' id='blinkRate'>18.4</div>
        <p style='text-align: center; color: #888;'>Blinks per minute</p>
        <p style='text-align: center; color: var(--success); font-size: 0.9rem;'><i class='fas fa-check'></i> Normal</p>
      </div>
      
      <div class='stat-card'>
        <h3 style='color: var(--secondary);'>Posture</h3>
        <div style='font-size: 1.5rem; color: var(--secondary); text-align: center; margin: 15px 0;' id='postureStatus'>Upright ✓</div>
        <p style='text-align: center; color: #888;'>Head position</p>
        <p style='text-align: center; color: var(--success); font-size: 0.9rem;'><i class='fas fa-check'></i> Good</p>
      </div>
      
      <div class='stat-card'>
        <h3 style='color: var(--accent);'>Music Tempo</h3>
        <div style='font-size: 2.5rem; color: var(--accent); text-align: center; margin: 15px 0;' id='musicTempo'>140</div>
        <p style='text-align: center; color: #888;'>BPM - Intense focus</p>
        <p style='text-align: center; color: var(--accent); font-size: 0.9rem;'><i class='fas fa-play-circle'></i> Playing</p>
      </div>
    </div>
    
    <div id='focusControls' class='flex gap-10 justify-center mt-20'>
      <button class='premium-button' onclick='startFocusTracking()'><i class='fas fa-play'></i> Start Live Tracking</button>
      <span class='stats-badge' id='focusStatus'>Ready</span>
    </div>
    
    <div class='feature-box mt-20' style='border-left: 4px solid var(--success);'>
      <h3><i class='fas fa-heartbeat' style='color: var(--success);'></i> Real-Time Focus Analytics</h3>
      <p style='color:#888;'>Focus tracking now uses live simulated biometric data that updates every 3 seconds. Your focus level, blink rate, posture, and adaptive music tempo will change dynamically to simulate real attentiveness monitoring.</p>
      <div class='grid-2 mt-15'>
        <div class='stat-card' style='padding:15px;'>
          <h4>Session Duration</h4>
          <p style='font-size:1.5rem;color:var(--primary);font-weight:bold;'><span id='sessionDuration'>0</span> min</p>
        </div>
        <div class='stat-card' style='padding:15px;'>
          <h4>Focus Quality</h4>
          <p style='color:var(--success);'><i class='fas fa-check-circle'></i> Excellent (88-95% range)</p>
        </div>
      </div>
    </div>
  </div>"
}

pub fn exam_page() -> String {
  "
      <div id='vpro-enterprise-app' style='font-family: \"Inter\", system-ui, sans-serif; background: #020617; min-height: 100vh; color: #f8fafc; padding: 2vh 2vw; box-sizing: border-box; overflow-x: hidden;'>
    <style>
      :root { --accent: #0ea5e9; --accent-hover: #38bdf8; --bg-main: #020617; --bg-card: #0f172a; --border: #1e293b; --danger: #ef4444; --success: #22c55e; }
      * { box-sizing: border-box; margin: 0; padding: 0; }
      body, html { width: 100%; height: 100%; }
      .app-container { max-width: 1400px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 20px; }
      .grid-layout { display: grid; grid-template-columns: 350px 1fr; gap: 30px; }
      @media (max-width: 1024px) { .grid-layout { grid-template-columns: 1fr; } }
      .glass-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 0.3s ease, border-color 0.3s ease; }
      .glass-card:hover { border-color: #334155; }
      .btn { padding: 16px 32px; border-radius: 10px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; text-align: center; display: inline-block; width: 100%; }
      .btn-primary { background: var(--accent); color: #000; }
      .btn-primary:hover { background: var(--accent-hover); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3); }
      .btn-danger { background: var(--danger); color: #fff; }
      .btn-danger:hover { background: #f87171; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3); }
      .btn-secondary { background: #1e293b; color: #fff; }
      .btn-secondary:hover { background: #334155; transform: translateY(-3px); }
      .form-input { width: 100%; padding: 15px; background: #020617; border: 1px solid var(--border); border-radius: 8px; color: #fff; font-size: 1rem; margin-top: 10px; transition: border-color 0.3s; }
      .form-input:focus { outline: none; border-color: var(--accent); }
      .choice-node { background: #020617; border: 2px solid var(--border); padding: 20px; border-radius: 12px; margin-bottom: 15px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 15px; font-size: 1.1rem; }
      .choice-node:hover { border-color: var(--accent); background: #1e293b; transform: translateX(8px); }
      .choice-node.selected { background: rgba(14, 165, 233, 0.1); border-color: var(--accent); color: var(--accent); font-weight: 600; }
      .nav-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); gap: 8px; margin-top: 20px; }
      .map-node { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #020617; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: 0.2s; }
      .map-node:hover { border-color: var(--accent); }
      .map-node.answered { background: var(--accent); color: #000; font-weight: bold; border-color: var(--accent); }
      .map-node.active { box-shadow: 0 0 0 2px #fff; }
      .badge { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; background: #1e293b; color: #94a3b8; }
      .badge-success { background: rgba(34, 197, 94, 0.2); color: var(--success); }
      .badge-warning { background: rgba(234, 179, 8, 0.2); color: #eab308; }
      .hidden { display: none !important; }
      .results-grid { display: grid; gap: 15px; margin-top: 30px; }
      .result-row { display: grid; grid-template-columns: auto 1fr; gap: 20px; background: #0f172a; padding: 20px; border-radius: 12px; border-left: 4px solid var(--border); }
      .result-row.correct { border-left-color: var(--success); }
      .result-row.incorrect { border-left-color: var(--danger); }
    </style>

    <div class='app-container'>
      
      <div id='view-config' class='grid-layout'>
        
        <aside class='glass-card'>
          <h2 style='font-size: 1.8rem; margin-bottom: 10px; color: var(--accent);'>Exam Initialization</h2>
          <p style='color: #94a3b8; margin-bottom: 30px; font-size: 0.95rem;'>Configure your assessment parameters.</p>
          
          <div style='margin-bottom: 25px;'>
            <label style='font-weight: 600; color: #cbd5e1;'>Target Subject</label>
            <select id='config-subject' class='form-input'>
              <option value='Computer Science'>Computer Science (Algorithms & Web)</option>
              <option value='Biology'>Biology (Cellular & Molecular)</option>
              <option value='Physics'>Physics (Classical Mechanics)</option>
            </select>
          </div>
          
          <div style='margin-bottom: 20px;'>
            <label style='font-weight: 600; color: #cbd5e1;'>Assessment Length</label>
            <input type='number' id='config-count' class='form-input' value='5' min='1' max='20'>
            <small style='color: #64748b; margin-top: 8px; display: block;'>Each subject now has up to <strong id='maxCountDisplay'>15</strong> questions available.</small>
          </div>

          <div style='margin-bottom: 35px;'>
            <label style='font-weight: 600; color: #cbd5e1;'>Difficulty Focus</label>
            <select id='config-difficulty' class='form-input'>
              <option value='all'>Mixed (All Levels)</option>
              <option value='Easy'>Easy</option>
              <option value='Medium'>Medium</option>
              <option value='Hard'>Hard</option>
            </select>
          </div>
          
          <button class='btn btn-primary' onclick='EnterpriseOS.launchExam()'>
            Initialize Secure Session
          </button>
        </aside>

        <main class='glass-card' style='display: flex; flex-direction: column; justify-content: center;'>
          <h1 style='font-size: 2.5rem; margin-bottom: 20px;'>Welcome to V-Pro Suite</h1>
          <div style='display: flex; gap: 10px; margin-bottom: 30px;'>
            <span class='badge badge-success'>System Online</span>
            <span class='badge badge-warning'>Proctoring Ready</span>
            <span class='badge'>v6.0.0</span>
          </div>
          
          <h3 style='margin-bottom: 15px; color: var(--accent);'>What to Expect:</h3>
          <ul style='list-style-position: inside; color: #cbd5e1; line-height: 1.8; margin-bottom: 30px; font-size: 1.1rem;'>
            <li><strong>Rich Question Bank:</strong> 15+ questions per subject across all difficulty levels.</li>
            <li><strong>Dynamic Scaling:</strong> The UI will adjust fluidly to your screen size.</li>
            <li><strong>Time Management:</strong> You will have exactly 2 minutes per question.</li>
            <li><strong>Immediate Feedback:</strong> Post-exam analytics will show exactly what you missed.</li>
            <li><strong>Smart Difficulty Selection:</strong> Filter by Easy, Medium, Hard, or Mixed.</li>
          </ul>
          
          <div style='background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); padding: 20px; border-radius: 12px;'>
            <h4 style='color: #f87171; margin-bottom: 8px;'>⚠️ Integrity Warning</h4>
            <p style='color: #fca5a5; font-size: 0.9rem;'>Navigating away from this window once the exam begins will result in an immediate session termination and auto-submission.</p>
          </div>
        </main>
      </div>

      <div id='view-active' class='grid-layout hidden'>
        
        <aside class='glass-card' style='align-self: start; position: sticky; top: 20px;'>
          <h3 id='active-subject-title' style='margin-bottom: 5px; color: var(--accent);'>Subject Name</h3>
          <p style='color: #64748b; font-size: 0.9rem; margin-bottom: 25px;'>Assessment ID: <span id='assessment-id' style='font-family: monospace;'>SYS-9201</span></p>
          
          <div style='background: #020617; padding: 20px; border-radius: 12px; border: 1px solid var(--border); text-align: center; margin-bottom: 30px;'>
            <div style='font-size: 0.9rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px;'>Time Remaining</div>
            <div id='active-timer' style='font-size: 2.5rem; font-weight: 800; font-family: monospace; color: var(--accent);'>00:00</div>
          </div>

          <div style='display:flex;justify-content:space-between;margin-bottom:15px;'>
            <h4>Question Map</h4>
            <span id='answered-count' style='color:#94a3b8;font-size:0.85rem;'>0/0</span>
          </div>
          <div id='nav-matrix' class='nav-map'>
            </div>
          
          <hr style='border: none; border-top: 1px solid var(--border); margin: 30px 0;'>
          <button class='btn btn-danger' onclick='EnterpriseOS.forceSubmit()'>Submit Final Exam</button>
          <button class='btn btn-secondary' style='margin-top:10px;' onclick='EnterpriseOS.returnToConfig()'>← Back to Settings</button>
        </aside>

        <main class='glass-card'>
          <div style='display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;'>
            <h2 id='q-header' style='font-size: 1.5rem; color: #cbd5e1;'>Question 1 of X</h2>
            <span class='badge' id='q-difficulty'>Medium</span>
          </div>
          
          <p id='q-text' style='font-size: 1.4rem; line-height: 1.6; margin-bottom: 40px; font-weight: 500;'></p>
          
          <div id='q-options-container' style='display: flex; flex-direction: column;'>
            </div>
          
          <div style='display: flex; gap: 20px; margin-top: 40px;'>
            <button class='btn' style='background: #1e293b; color: #fff;' onclick='EnterpriseOS.prevQuestion()'>← Previous</button>
            <button class='btn btn-primary' onclick='EnterpriseOS.nextQuestion()'>Next →</button>
          </div>
        </main>
      </div>

      <div id='view-results' class='hidden'>
        <div class='glass-card' style='text-align: center; padding: 60px 30px;'>
          <h1 style='font-size: 3rem; margin-bottom: 10px;'>Assessment Complete</h1>
          <p style='color: #94a3b8; font-size: 1.2rem;'>System diagnostics and scoring engine finished.</p>
          
          <div style='display: flex; justify-content: center; gap: 50px; margin: 50px 0; flex-wrap: wrap;'>
            <div>
              <div style='font-size: 1rem; color: #64748b; text-transform: uppercase;'>Final Score</div>
              <div id='res-score' style='font-size: 5rem; font-weight: 900; color: var(--accent); line-height: 1;'>0%</div>
            </div>
            <div>
              <div style='font-size: 1rem; color: #64748b; text-transform: uppercase;'>Correct / Total</div>
              <div id='res-ratio' style='font-size: 5rem; font-weight: 900; color: #fff; line-height: 1;'>0/0</div>
            </div>
            <div>
              <div style='font-size: 1rem; color: #64748b; text-transform: uppercase;'>Time Used</div>
              <div id='res-time' style='font-size: 3rem; font-weight: 900; color: var(--success); line-height: 1;'>00:00</div>
            </div>
          </div>
          
          <div style='display:flex;gap:20px;justify-content:center;flex-wrap:wrap;'>
            <button class='btn btn-primary' style='max-width: 300px;' onclick='location.reload()'>Return to Dashboard</button>
            <button class='btn btn-secondary' style='max-width: 300px;' onclick='EnterpriseOS.retryExam()'>Retry Exam</button>
          </div>
        </div>

        <div class='glass-card' style='margin-top: 30px;'>
          <h2>Detailed Diagnostic Report</h2>
          <p style='color: #94a3b8;'>Review your answers against the system's verified database.</p>
          <div id='diagnostic-feed' class='results-grid'>
            </div>
        </div>
      </div>

    </div>

    <script>
      const EnterpriseOS = {
        state: {
          activeSubject: '',
          totalQuestions: 0,
          currentIndex: 0,
          timerSeconds: 0,
          totalTimerSeconds: 0,
          timerInterval: null,
          answers: {},
          examData: []
        },

        database: {
          'Computer Science': [
            { q: 'Which data structure uses a LIFO (Last In, First Out) principle?', opts: ['Queue', 'Linked List', 'Stack', 'Hash Table'], correct: 2, diff: 'Easy' },
            { q: 'What is the worst-case time complexity of QuickSort?', opts: ['O(n log n)', 'O(n^2)', 'O(n)', 'O(log n)'], correct: 1, diff: 'Hard' },
            { q: 'Which protocol is responsible for resolving domain names to IP addresses?', opts: ['HTTP', 'FTP', 'DNS', 'DHCP'], correct: 2, diff: 'Medium' },
            { q: 'In relational databases, what key uniquely identifies a record?', opts: ['Foreign Key', 'Primary Key', 'Candidate Key', 'Composite Key'], correct: 1, diff: 'Easy' },
            { q: 'Which paradigm treats computation as the evaluation of mathematical functions?', opts: ['Object-Oriented', 'Imperative', 'Functional', 'Procedural'], correct: 2, diff: 'Hard' },
            { q: 'What does REST stand for in web services?', opts: ['Representational State Transfer', 'Remote Execution System Protocol', 'Real-time Event Streaming Technology', 'Responsive Environment State Tool'], correct: 0, diff: 'Medium' },
            { q: 'What is the time complexity of binary search on a sorted array?', opts: ['O(n)', 'O(log n)', 'O(n^2)', 'O(1)'], correct: 1, diff: 'Easy' },
            { q: 'Which of the following is a NoSQL database?', opts: ['PostgreSQL', 'MySQL', 'MongoDB', 'SQLite'], correct: 2, diff: 'Easy' },
            { q: 'What is the primary purpose of a constructor in OOP?', opts: ['Destroy objects', 'Initialize object state', 'Define interfaces', 'Handle exceptions'], correct: 1, diff: 'Medium' },
            { q: 'Which HTTP status code indicates a successful response?', opts: ['200', '400', '500', '404'], correct: 0, diff: 'Easy' },
            { q: 'What is a deadlock in concurrent programming?', opts: ['A fast algorithm', 'Processes waiting indefinitely', 'Memory overflow', 'Network timeout'], correct: 1, diff: 'Medium' },
            { q: 'Which algorithm finds the shortest path in a graph?', opts: ['Binary Search', 'Dijkstra\\'s Algorithm', 'Bubble Sort', 'DFS'], correct: 1, diff: 'Hard' },
            { q: 'What does CSS stand for?', opts: ['Computer Style Sheets', 'Cascading Style Sheets', 'Creative Style System', 'Colorful Style Sheets'], correct: 1, diff: 'Easy' },
            { q: 'Which of these is a version control system?', opts: ['Git', 'Node.js', 'NPM', 'Webpack'], correct: 0, diff: 'Easy' },
            { q: 'What is polymorphism in OOP?', opts: ['Multiple inheritance', 'Objects with many forms', 'Data hiding', 'Function overloading only'], correct: 1, diff: 'Medium' }
          ],
          'Biology': [
            { q: 'Which organelle is primarily responsible for synthesizing ATP?', opts: ['Golgi Apparatus', 'Endoplasmic Reticulum', 'Mitochondria', 'Nucleus'], correct: 2, diff: 'Easy' },
            { q: 'During which phase of mitosis do sister chromatids pull apart?', opts: ['Prophase', 'Metaphase', 'Anaphase', 'Telophase'], correct: 2, diff: 'Medium' },
            { q: 'What is the complementary DNA strand to 5\\'-ATGC-3\\'?', opts: ['3\\'-TACG-5\\'', '5\\'-TACG-3\\'', '3\\'-UACG-5\\'', '5\\'-GCAT-3\\''], correct: 0, diff: 'Hard' },
            { q: 'Which macromolecule is composed of amino acids joined by peptide bonds?', opts: ['Lipids', 'Carbohydrates', 'Proteins', 'Nucleic Acids'], correct: 2, diff: 'Easy' },
            { q: 'What process converts mRNA into a polypeptide chain?', opts: ['Transcription', 'Replication', 'Translation', 'Mutation'], correct: 2, diff: 'Medium' },
            { q: 'Which organelle is known as the \"powerhouse\" of the cell?', opts: ['Nucleus', 'Mitochondria', 'Ribosome', 'Chloroplast'], correct: 1, diff: 'Easy' },
            { q: 'What is the primary function of red blood cells?', opts: ['Fight infection', 'Carry oxygen', 'Produce hormones', 'Digest food'], correct: 1, diff: 'Easy' },
            { q: 'Which enzyme breaks down lactose?', opts: ['Amylase', 'Lipase', 'Lactase', 'Protease'], correct: 2, diff: 'Medium' },
            { q: 'What is the basic unit of life?', opts: ['Atom', 'Molecule', 'Cell', 'Tissue'], correct: 2, diff: 'Easy' },
            { q: 'Which process do plants use to convert light energy into chemical energy?', opts: ['Respiration', 'Fermentation', 'Photosynthesis', 'Digestion'], correct: 2, diff: 'Easy' },
            { q: 'What is the role of DNA polymerase in DNA replication?', opts: ['Unwind DNA', 'Synthesize new strand', 'Fix mutations', 'Remove RNA primers'], correct: 1, diff: 'Hard' },
            { q: 'Which vitamin is produced when skin is exposed to sunlight?', opts: ['Vitamin A', 'Vitamin B12', 'Vitamin C', 'Vitamin D'], correct: 3, diff: 'Medium' },
            { q: 'What is the largest organ in the human body?', opts: ['Liver', 'Brain', 'Skin', 'Heart'], correct: 2, diff: 'Easy' },
            { q: 'Which gas do plants absorb during photosynthesis?', opts: ['Oxygen', 'Nitrogen', 'Carbon Dioxide', 'Hydrogen'], correct: 2, diff: 'Easy' },
            { q: 'What is a gene?', opts: ['A protein', 'A segment of DNA', 'A carbohydrate', 'A lipid'], correct: 1, diff: 'Easy' }
          ],
          'Physics': [
            { q: 'According to Newton\\'s Second Law, Force is equal to mass multiplied by what?', opts: ['Velocity', 'Acceleration', 'Distance', 'Momentum'], correct: 1, diff: 'Easy' },
            { q: 'What is the SI unit of electrical resistance?', opts: ['Ampere', 'Volt', 'Ohm', 'Watt'], correct: 2, diff: 'Easy' },
            { q: 'In thermodynamics, what term describes a system\\'s degree of disorder?', opts: ['Enthalpy', 'Entropy', 'Work', 'Kinetic Energy'], correct: 1, diff: 'Medium' },
            { q: 'Which particle is the force carrier for the electromagnetic force?', opts: ['Gluon', 'Boson', 'Photon', 'Quark'], correct: 2, diff: 'Hard' },
            { q: 'What is the escape velocity of Earth approximately?', opts: ['9.8 km/s', '11.2 km/s', '29.8 km/s', '3.0 x 10^8 m/s'], correct: 1, diff: 'Hard' },
            { q: 'What is the SI unit of force?', opts: ['Joule', 'Newton', 'Pascal', 'Watt'], correct: 1, diff: 'Easy' },
            { q: 'What is the speed of light in vacuum?', opts: ['3.0 x 10^6 m/s', '3.0 x 10^8 m/s', '3.0 x 10^10 m/s', '3.0 x 10^12 m/s'], correct: 1, diff: 'Easy' },
            { q: 'Which law states that for every action there is an equal and opposite reaction?', opts: ['First Law', 'Second Law', 'Third Law', 'Law of Gravitation'], correct: 2, diff: 'Easy' },
            { q: 'What is the SI unit of energy?', opts: ['Newton', 'Watt', 'Joule', 'Pascal'], correct: 2, diff: 'Easy' },
            { q: 'What is the atomic number of Carbon?', opts: ['4', '6', '8', '12'], correct: 1, diff: 'Medium' },
            { q: 'Which type of wave requires a medium to propagate?', opts: ['Electromagnetic', 'Mechanical', 'Light', 'Radio'], correct: 1, diff: 'Medium' },
            { q: 'What is the formula for kinetic energy?', opts: ['mv', 'ma', '1/2 mv^2', 'mgh'], correct: 2, diff: 'Medium' },
            { q: 'What is the primary source of energy for the Earth?', opts: ['The Moon', 'Nuclear fusion', 'The Sun', 'Geothermal'], correct: 2, diff: 'Easy' },
            { q: 'Which scientist proposed the theory of general relativity?', opts: ['Newton', 'Einstein', 'Hawking', 'Bohr'], correct: 1, diff: 'Easy' },
            { q: 'What is the law of conservation of energy?', opts: ['Energy can be created', 'Energy cannot be created or destroyed', 'Energy always increases', 'Energy is always lost as heat'], correct: 1, diff: 'Medium' }
          ]
        },

        launchExam() {
          const subject = document.getElementById('config-subject').value;
          let requestedCount = parseInt(document.getElementById('config-count').value);
          const difficulty = document.getElementById('config-difficulty').value;

          let availableBank = this.database[subject];
          
          if (difficulty !== 'all') {
            availableBank = availableBank.filter(q => q.diff === difficulty);
          }
          
          if (availableBank.length === 0) {
            alert('No questions available for the selected difficulty. Please choose a different filter.');
            return;
          }
          
          if (requestedCount > availableBank.length) {
            requestedCount = availableBank.length;
          }
          
          document.getElementById('maxCountDisplay').innerText = availableBank.length;

          this.state.examData = this.shuffleArray([...availableBank]).slice(0, requestedCount);
          this.state.activeSubject = subject;
          this.state.totalQuestions = requestedCount;
          this.state.currentIndex = 0;
          this.state.answers = {};
          this.state.timerSeconds = requestedCount * 120;
          this.state.totalTimerSeconds = requestedCount * 120;
          
          document.getElementById('view-config').classList.add('hidden');
          document.getElementById('view-active').classList.remove('hidden');
          document.getElementById('active-subject-title').innerText = subject + ' Assessment';
          document.getElementById('assessment-id').innerText = 'SYS-' + String(Math.floor(1000 + Math.random() * 9000));
          
          this.startClock();
          this.renderWorkspace();
          this.updateAnsweredCount();
        },

        returnToConfig() {
          clearInterval(this.state.timerInterval);
          document.getElementById('view-active').classList.add('hidden');
          document.getElementById('view-config').classList.remove('hidden');
        },

        renderWorkspace() {
          this.buildMatrix();
          this.renderCurrentQuestion();
          this.updateAnsweredCount();
        },

        buildMatrix() {
          const matrix = document.getElementById('nav-matrix');
          matrix.innerHTML = this.state.examData.map((qData, i) => {
            const isAnswered = this.state.answers[i] !== undefined ? 'answered' : '';
            const isActive = this.state.currentIndex === i ? 'active' : '';
            const isCorrect = this.state.answers[i] === qData.correct ? 'correct-ans' : '';
            return `<div class='map-node ${isAnswered} ${isActive} ${isCorrect}' onclick='EnterpriseOS.jumpTo(${i})'>${i + 1}</div>`;
          }).join('');
        },

        renderCurrentQuestion() {
          const qData = this.state.examData[this.state.currentIndex];
          document.getElementById('q-header').innerText = 'Question ' + (this.state.currentIndex + 1) + ' of ' + this.state.totalQuestions;
          document.getElementById('q-text').innerText = qData.q;
          
          const diffBadge = document.getElementById('q-difficulty');
          diffBadge.innerText = qData.diff;
          diffBadge.style.color = qData.diff === 'Hard' ? '#ef4444' : qData.diff === 'Medium' ? '#eab308' : '#22c55e';
          
          const optionsContainer = document.getElementById('q-options-container');
          optionsContainer.innerHTML = qData.opts.map((optText, optIndex) => {
            const isSelected = this.state.answers[this.state.currentIndex] === optIndex ? 'selected' : '';
            return '<div class=\\'choice-node ' + isSelected + '\\' onclick=\\'EnterpriseOS.selectAnswer(' + optIndex + ')\\'>' +
              '<div style=\\'width: 30px; height: 30px; border-radius: 50%; border: 2px solid ' + (isSelected ? 'var(--accent)' : '#475569') + '; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem;\\'>' +
              String.fromCharCode(65 + optIndex) +
              '</div>' +
              '<div>' + optText + '</div>' +
              '</div>';
          }).join('');
        },

        updateAnsweredCount() {
          const answered = Object.keys(this.state.answers).length;
          document.getElementById('answered-count').innerText = answered + '/' + this.state.totalQuestions;
        },

        selectAnswer(optIndex) {
          this.state.answers[this.state.currentIndex] = optIndex;
          this.renderWorkspace();
        },

        jumpTo(index) {
          this.state.currentIndex = index;
          this.renderWorkspace();
        },

        prevQuestion() {
          if (this.state.currentIndex > 0) {
            this.state.currentIndex--;
            this.renderWorkspace();
          }
        },

        nextQuestion() {
          if (this.state.currentIndex < this.state.totalQuestions - 1) {
            this.state.currentIndex++;
            this.renderWorkspace();
          }
        },

        startClock() {
          this.state.timerInterval = setInterval(() => {
            this.state.timerSeconds--;
            const mins = Math.floor(this.state.timerSeconds / 60);
            const secs = this.state.timerSeconds % 60;
            const display = document.getElementById('active-timer');
            display.innerText = String(mins).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
            if (this.state.timerSeconds <= 60) display.style.color = 'var(--danger)';
            if (this.state.timerSeconds <= 0) this.forceSubmit();
          }, 1000);
        },

        forceSubmit() {
          clearInterval(this.state.timerInterval);
          this.generateDiagnostics();
        },

        generateDiagnostics() {
          document.getElementById('view-active').classList.add('hidden');
          document.getElementById('view-results').classList.remove('hidden');
          
          let correctCount = 0;
          const feed = document.getElementById('diagnostic-feed');
          feed.innerHTML = '';
          
          const timeUsed = this.state.totalTimerSeconds - this.state.timerSeconds;
          const mins = Math.floor(timeUsed / 60);
          const secs = timeUsed % 60;
          document.getElementById('res-time').innerText = String(mins).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
          
          this.state.examData.forEach((qData, index) => {
            const userAnswer = this.state.answers[index];
            const isCorrect = userAnswer === qData.correct;
            if (isCorrect) correctCount++;
            
            const userText = userAnswer !== undefined ? qData.opts[userAnswer] : '<span style=\"color:#ef4444;\">No Answer Provided</span>';
            const correctText = qData.opts[qData.correct];
            
            feed.innerHTML += '<div class=\\'result-row ' + (isCorrect ? 'correct' : 'incorrect') + '\\'>' +
              '<div style=\\'font-size: 1.5rem;\\'>' + (isCorrect ? '✅' : '❌') + '</div>' +
              '<div>' +
                '<h4 style=\\'margin-bottom: 10px; font-size: 1.1rem;\\'>Q' + (index + 1) + ': ' + qData.q + '</h4>' +
                '<p style=\\'color: #94a3b8; font-size: 0.95rem; margin-bottom: 5px;\\'>Your Answer: <strong style=\\'color: ' + (isCorrect ? 'var(--success)' : 'var(--danger)') + ';\\'>' + userText + '</strong></p>' +
                (!isCorrect ? '<p style=\\'color: #cbd5e1; font-size: 0.95rem;\\'>Correct Answer: <strong style=\\'color: var(--success);\\'>' + correctText + '</strong></p>' : '') +
              '</div>' +
            '</div>';
          });
          
          const percentage = ((correctCount / this.state.totalQuestions) * 100).toFixed(1);
          document.getElementById('res-score').innerText = percentage + '%';
          document.getElementById('res-ratio').innerText = correctCount + ' / ' + this.state.totalQuestions;
        },

        retryExam() {
          document.getElementById('view-results').classList.add('hidden');
          document.getElementById('view-config').classList.remove('hidden');
        },

        shuffleArray(array) {
          for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
          }
          return array;
        }
      };
    </script>
  </div>
  "
}

fn timetravel_page() -> String {
  "
  <div>
    <h1>Time-Travel Learning Timeline</h1>
    <p class='subtitle'>Track Growth • Compare Past & Present • Predict Future</p>
    
    <div style='background: rgba(188,19,254,0.1); padding: 30px; border-radius: 20px; margin: 30px 0; border: 1px solid rgba(188,19,254,0.2);'>
      <h3>Your Learning Journey</h3>
      <div style='display: flex; align-items: center; gap: 20px; margin-top: 20px; flex-wrap: wrap;'>
        <div style='text-align: center;'>
          <p style='font-size: 1.8rem; color: var(--accent); font-weight: 900;'>45%</p>
          <p style='color: #888;'>Feb 15 (Past)</p>
        </div>
        <div style='color: var(--primary); font-weight: bold; font-size: 1.5rem;'>→</div>
        <div style='text-align: center;'>
          <p style='font-size: 1.8rem; color: var(--warning); font-weight: 900;'>67%</p>
          <p style='color: #888;'>Mar 1 (2 weeks ago)</p>
        </div>
        <div style='color: var(--primary); font-weight: bold; font-size: 1.5rem;'>→</div>
        <div style='text-align: center;'>
          <p style='font-size: 1.8rem; color: var(--success); font-weight: 900;'>85%</p>
          <p style='color: #888;'>Mar 19 (Today)</p>
        </div>
      </div>
      <p style='color: var(--primary); font-weight: 700; margin-top: 20px;'><i class='fas fa-chart-line'></i> Growth Rate: +2.8% per day</p>
      <p style='color: var(--success); font-weight: 700;'><i class='fas fa-rocket'></i> Projected Mastery: 95% in 6 days</p>
    </div>
    
    <h2>Time Slider</h2>
    <input type='range' min='0' max='100' value='100' style='width: 100%; height: 8px; border-radius: 5px; background: #222; cursor: pointer; margin: 20px 0;'>
    <p style='color: #888; text-align: center;'>Drag to see your progress at different points in time</p>
    
    <h2 style='margin-top: 40px;'>Concept Mastery Over Time</h2>
    <div class='grid-2'>
      <div class='stat-card'>
        <h3>Quantum Entanglement</h3>
        <p style='color: #888;'><strong>Feb 15:</strong> 30% (confused basics)</p>
        <p style='color: #888; margin-top: 10px;'><strong>Today:</strong> 85% (expert level)</p>
        <p style='color: var(--success); margin-top: 15px; font-weight: 700;'><i class='fas fa-arrow-up'></i> +55% improvement</p>
      </div>
      
      <div class='stat-card'>
        <h3>Wave Particle Duality</h3>
        <p style='color: #888;'><strong>Feb 15:</strong> 42% (partial understanding)</p>
        <p style='color: #888; margin-top: 10px;'><strong>Today:</strong> 78% (solid knowledge)</p>
        <p style='color: var(--success); margin-top: 15px; font-weight: 700;'><i class='fas fa-arrow-up'></i> +36% improvement</p>
      </div>
    </div>
  </div>"
}

pub fn settings_page() -> String {
  "
  <div style='max-width: 1200px; margin: 0 auto; font-family: system-ui, -apple-system, sans-serif; padding: 20px;'>
    
    <style>
      /* --- GLOBAL APP THEME VARIABLES (Scoped to root/body) --- */
      :root, html[data-theme='dark'] {
        --bg-main: #0b0d12;
        --text-main: #ffffff;
        --text-sub: #8892b0;
        --text-muted: #b5bec9;
        --card-bg: #111318;
        --card-border: rgba(255,255,255,0.05);
        --input-bg: #0b0d12;
        --input-border: rgba(255,255,255,0.08);
        --btn-bg: rgba(255,255,255,0.02);
        --btn-border: rgba(255,255,255,0.08);
        --border-switch: rgba(255,255,255,0.04);
        --danger-bg: rgba(255,74,74,0.03);
        --danger-border: rgba(255,74,74,0.15);
      }

      html[data-theme='light'] {
        --bg-main: #f8f9fa;
        --text-main: #1a1d20;
        --text-sub: #626d7a;
        --text-muted: #495057;
        --card-bg: #ffffff;
        --card-border: rgba(0,0,0,0.08);
        --input-bg: #ffffff;
        --input-border: rgba(0,0,0,0.15);
        --btn-bg: rgba(0,0,0,0.03);
        --btn-border: rgba(0,0,0,0.12);
        --border-switch: rgba(0,0,0,0.08);
        --danger-bg: rgba(255,74,74,0.05);
        --danger-border: rgba(255,74,74,0.3);
      }

      /* Handle System Auto Dark/Light pairing natively */
      @media (prefers-color-scheme: light) {
        html[data-theme='auto'] {
          --bg-main: #f8f9fa;
          --text-main: #1a1d20;
          --text-sub: #626d7a;
          --text-muted: #495057;
          --card-bg: #ffffff;
          --card-border: rgba(0,0,0,0.08);
          --input-bg: #ffffff;
          --input-border: rgba(0,0,0,0.15);
          --btn-bg: rgba(0,0,0,0.03);
          --btn-border: rgba(0,0,0,0.12);
          --border-switch: rgba(0,0,0,0.08);
          --danger-bg: rgba(255,74,74,0.05);
          --danger-border: rgba(255,74,74,0.3);
        }
      }
      @media (prefers-color-scheme: dark) {
        html[data-theme='auto'] {
          --bg-main: #0b0d12;
          --text-main: #ffffff;
          --text-sub: #8892b0;
          --text-muted: #b5bec9;
          --card-bg: #111318;
          --card-border: rgba(255,255,255,0.05);
          --input-bg: #0b0d12;
          --input-border: rgba(255,255,255,0.08);
          --btn-bg: rgba(255,255,255,0.02);
          --btn-border: rgba(255,255,255,0.08);
          --border-switch: rgba(255,255,255,0.04);
          --danger-bg: rgba(255,74,74,0.03);
          --danger-border: rgba(255,74,74,0.15);
        }
      }

      /* Apply variable bindings to the viewport shell globally */
      body {
        background-color: var(--bg-main) !important;
        color: var(--text-main) !important;
        transition: background-color 0.3s ease, color 0.3s ease;
      }

      .settings-card {
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 16px;
        padding: 25px;
        margin-bottom: 25px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
      }
      .premium-input {
        width: 100%;
        background: var(--input-bg);
        border: 1px solid var(--input-border);
        border-radius: 10px;
        color: var(--text-main);
        padding: 12px 16px;
        font-size: 0.95rem;
        outline: none;
        box-sizing: border-box;
        transition: all 0.2s ease;
      }
      .premium-input:focus {
        border-color: #00f2ff;
        box-shadow: 0 0 10px rgba(0,242,255,0.15);
      }
      .mode-toggle, .language-selector {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
      }
      .mode-btn, .lang-btn {
        background: var(--btn-bg);
        border: 1px solid var(--btn-border);
        color: var(--text-muted);
        padding: 10px 18px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
      }
      .mode-btn:hover, .lang-btn:hover {
        border-color: #00f2ff;
      }
      .mode-btn.active, .lang-btn.active {
        background: #00f2ff;
        color: #000 !important;
        border-color: #00f2ff;
        font-weight: 700;
        box-shadow: 0 0 15px rgba(0,242,255,0.25);
      }
      .switch-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-switch);
        cursor: pointer;
        color: var(--text-muted);
      }
      .switch-label:last-child {
        border-bottom: none;
      }
      .save-indicator {
        position: fixed;
        bottom: 25px;
        right: 25px;
        background: #10e353;
        color: #000;
        padding: 12px 24px;
        border-radius: 30px;
        font-weight: 700;
        box-shadow: 0 10px 25px rgba(16,227,83,0.3);
        display: flex;
        align-items: center;
        gap: 8px;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9999;
      }
      .destructive-nuclear-btn {
        background: linear-gradient(135deg, #ff4a4a, #b31010);
        border: none;
        color: #fff;
        font-weight: 700;
        padding: 12px 24px;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      .destructive-nuclear-btn:hover {
        transform: scale(1.03);
        box-shadow: 0 0 25px rgba(255, 74, 74, 0.65), 0 0 50px rgba(255, 74, 74, 0.3);
        background: linear-gradient(135deg, #ff6b6b, #cc1111);
      }
    </style>

    <div>
      <h1 id='lbl-settings-title' style='margin:0 0 4px 0; font-size:2.2rem; font-weight:800;'>Account Settings</h1>
      <p id='lbl-settings-subtitle' style='color: var(--text-sub); margin:0 0 30px 0;'>Personalization • Preferences • Account Management</p>
      
      <h2 id='lbl-section-profile' style='font-size:1.3rem; color: var(--text-muted); margin-bottom:15px;'>Profile Information</h2>
      <div class='settings-card'>
        <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 25px;'>
          <div>
            <label id='lbl-full-name' style='color: var(--text-sub); font-size:0.85rem; display:block; margin-bottom:8px;'>Full Name</label>
            <input type='text' id='settingsFullName' class='premium-input' oninput='saveSettingsField(\"flashsync_user_name\", this.value)' placeholder='Enter name...'>
          </div>
          <div>
            <label id='lbl-email-address' style='color: var(--text-sub); font-size:0.85rem; display:block; margin-bottom:8px;'>Email Address</label>
            <input type='email' id='settingsEmail' class='premium-input' oninput='saveSettingsField(\"flashsync_user_email\", this.value)' placeholder='name@domain.com'>
          </div>
        </div>

        <label id='lbl-profile-image' style='color: var(--text-sub); font-size:0.85rem; display:block; margin-bottom:12px;'>Profile Image Representation</label>
        <div style='display: flex; gap: 25px; align-items: center; flex-wrap: wrap;'>
          <div id='settingsAvatarPreview' style='width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, #00f2ff, #0077ff); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #000; font-weight: bold; overflow: hidden; border: 3px solid rgba(255,255,255,0.1); background-size: cover; background-position: center; flex-shrink: 0;'>
            🎓
          </div>
          <div style='display: flex; flex-direction: column; gap: 8px;'>
            <div style='display: flex; gap: 10px;'>
              <button class='mode-btn' onclick='document.getElementById(\"profileUpdateTrigger\").click()' style='padding: 8px 14px; font-size: 0.85rem; background: rgba(255,255,255,0.05); color: var(--text-main);'><i class='fas fa-upload'></i> Upload Photo</button>
              <button class='mode-btn' onclick='triggerSettingsAvatarGeneration()' style='padding: 8px 14px; font-size: 0.85rem; background: rgba(0,242,255,0.1); border-color: rgba(0,242,255,0.2); color: #00f2ff;'><i class='fas fa-magic'></i> Re-Roll Glyph</button>
            </div>
            <input type='file' id='profileUpdateTrigger' style='display: none;' accept='image/*' onchange='handleFileImageCacheref(this)'>
            <p style='margin:0; font-size:0.75rem; color: var(--text-sub);'>Images are automatically downscaled into ultra-light profiles.</p>
          </div>
        </div>
      </div>

      <h2 id='lbl-section-display' style='font-size:1.3rem; color: var(--text-muted); margin-bottom:15px;'>Display Preferences</h2>
      <div class='settings-card'>
        <h3 id='lbl-theme' style='margin:0; font-size:1rem; color: var(--text-main);'>System Theme Interface</h3>
        <div class='mode-toggle'>
          <button id='theme-dark' class='mode-btn' onclick='switchTheme(\"dark\")'><i class='fas fa-moon'></i> Dark Mode</button>
          <button id='theme-light' class='mode-btn' onclick='switchTheme(\"light\")'><i class='fas fa-sun'></i> Light Mode</button>
          <button id='theme-auto' class='mode-btn' onclick='switchTheme(\"auto\")'><i class='fas fa-circle-half-stroke'></i> Auto</button>
        </div>
        
        <h3 id='lbl-language' style='margin:20px 0 0 0; font-size:1rem; color: var(--text-main);'>Localization Engine Framework (Updates Whole App)</h3>
        <div class='language-selector'>
          <button id='lang-en' class='lang-btn' onclick='commitGlobalLanguage(\"en\")'>🇺🇸 English</button>
          <button id='lang-es' class='lang-btn' onclick='commitGlobalLanguage(\"es\")'>🇪🇸 Español</button>
          <button id='lang-fr' class='lang-btn' onclick='commitGlobalLanguage(\"fr\")'>🇫🇷 Français</button>
          <button id='lang-de' class='lang-btn' onclick='commitGlobalLanguage(\"de\")'>🇩🇪 Deutsch</button>
          <button id='lang-it' class='lang-btn' onclick='commitGlobalLanguage(\"it\")'>🇮🇹 Italiano</button>
          <button id='lang-pt' class='lang-btn' onclick='commitGlobalLanguage(\"pt\")'>🇵🇹 Português</button>
          <button id='lang-ru' class='lang-btn' onclick='commitGlobalLanguage(\"ru\")'>🇷🇺 Русский</button>
          <button id='lang-ar' class='lang-btn' onclick='commitGlobalLanguage(\"ar\")'>🇸🇦 العربية</button>
          <button id='lang-hi' class='lang-btn' onclick='commitGlobalLanguage(\"hi\")'>🇮🇳 हिन्दी</button>
          <button id='lang-ja' class='lang-btn' onclick='commitGlobalLanguage(\"ja\")'>🇯🇵 日本語</button>
          <button id='lang-ko' class='lang-btn' onclick='commitGlobalLanguage(\"ko\")'>🇰🇷 한국어</button>
          <button id='lang-tr' class='lang-btn' onclick='commitGlobalLanguage(\"tr\")'>🇹🇷 Türkçe</button>
          <button id='lang-vi' class='lang-btn' onclick='commitGlobalLanguage(\"vi\")'>🇻🇳 Tiếng Việt</button>
        </div>
      </div>

      <h2 id='lbl-section-learning' style='font-size:1.3rem; color: var(--text-muted); margin-bottom:15px;'>Learning Preferences</h2>
      <div class='settings-card'>
        <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 20px;'>
          <div>
            <label id='lbl-daily-goal' style='color: var(--text-sub); font-size:0.85rem; display:block; margin-bottom:8px;'>Daily Study Target Allocation (Minutes)</label>
            <input type='number' id='settingsDailyGoal' class='premium-input' oninput='saveSettingsField(\"flashsync_daily_goal\", this.value)' value='60'>
          </div>
          <div>
            <label id='lbl-preferred-time' style='color: var(--text-sub); font-size:0.85rem; display:block; margin-bottom:8px;'>Preferred Study Window Chrono Range</label>
            <select id='settingsStudyTime' class='premium-input' onchange='saveSettingsField(\"flashsync_study_time\", this.value)'>
              <option value='morning'>Morning Period (6:00 AM - 12:00 PM)</option>
              <option value='afternoon'>Afternoon Period (12:00 PM - 6:00 PM)</option>
              <option value='evening'>Evening Period (6:00 PM - 10:00 PM)</option>
              <option value='night'>Night Window Phase (10:00 PM - 2:00 AM)</option>
            </select>
          </div>
          <div>
            <label id='lbl-pomo-length' style='color: var(--text-sub); font-size:0.85rem; display:block; margin-bottom:8px;'>Default Pomodoro Focus Interval</label>
            <select id='settingsPomoLength' class='premium-input' onchange='saveSettingsField(\"flashsync_pomo_length\", this.value)'>
              <option value='15'>15 Minutes Hyper-Focus</option>
              <option value='25'>25 Minutes Standard Matrix</option>
              <option value='45'>45 Minutes Extreme Marathon</option>
            </select>
          </div>
        </div>

        <div style='display: flex; flex-direction: column; margin-top: 15px;'>
          <label class='switch-label'><span id='lbl-opt-reminders'>Enable localized flash alert focus notifications</span><input type='checkbox' id='chkReminders' onchange='saveSettingsField(\"flashsync_opt_reminders\", this.checked)' checked></label>
          <label class='switch-label'><span id='lbl-opt-biometrics'>Authorize mathematical cognitive telemetry optimization logs</span><input type='checkbox' id='chkBiometrics' onchange='saveSettingsField(\"flashsync_opt_biometrics\", this.checked)' checked></label>
          <label class='switch-label'><span id='lbl-opt-music'>Enable integrated neural generative focus soundtracks</span><input type='checkbox' id='chkMusic' onchange='saveSettingsField(\"flashsync_opt_music\", this.checked)' checked></label>
          <label class='switch-label'><span id='lbl-opt-sfx'>Enable Gamified Reward Achievement Audio SFX Elements</span><input type='checkbox' id='chkSfx' onchange='saveSettingsField(\"flashsync_opt_sfx\", this.checked)' checked></label>
          <label class='switch-label'><span id='lbl-opt-incognito'>Incognito Mode (Hide active studying status from study groups)</span><input type='checkbox' id='chkIncognito' onchange='saveSettingsField(\"flashsync_opt_incognito\", this.checked)'></label>
        </div>
      </div>

      <div style='margin-top: 40px; padding: 25px; background: var(--danger-bg); border-radius: 16px; border: 1px solid var(--danger-border); transition: all 0.3s ease;'>
        <h3 id='lbl-danger-title' style='margin:0 0 6px 0; color:#ff4a4a; font-size:1.2rem;'>System Hazard Console</h3>
        <p id='lbl-danger-subtitle' style='margin:0 0 15px 0; font-size:0.85rem; color: var(--text-sub);'>Purging indices removes localized profiles, custom cached images, matrices, and metrics securely.</p>
        <button class='destructive-nuclear-btn' onclick='executeSystemStoragePurge()'><i class='fas fa-trash-can'></i> Wipe Application Database</button>
      </div>
    </div>

    <div id='settingsToastAlert' class='save-indicator'>
      <i class='fas fa-circle-check'></i> <span id='lbl-toast-saved'>Configuration Synchronized</span>
    </div>

    <script>
      const langPacks = {
        en: { title: 'Account Settings', subtitle: 'Personalization • Preferences • Account Management', secProfile: 'Profile Information', fullName: 'Full Name', emailAddress: 'Email Address', profileImg: 'Profile Image Representation', secDisplay: 'Display Preferences', theme: 'System Theme Interface', language: 'Localization Engine Framework (Updates Whole App)', secLearning: 'Learning Preferences', dailyGoal: 'Daily Study Target Allocation (Minutes)', preferredTime: 'Preferred Study Window Chrono Range', pomoLength: 'Default Pomodoro Focus Interval', optReminders: 'Enable localized flash alert focus notifications', optBiometrics: 'Authorize mathematical cognitive telemetry optimization logs', optMusic: 'Enable integrated neural generative focus soundtracks', optSfx: 'Enable Gamified Reward Achievement Audio SFX Elements', optIncognito: 'Incognito Mode (Hide active studying status from study groups)', dangerTitle: 'System Hazard Console', dangerSubtitle: 'Purging indices removes localized profiles, custom cached images, matrices, and metrics securely.', toast: 'Configuration Synchronized' },
        es: { title: 'Configuraci\\u00f3n', subtitle: 'Personalizaci\\u00f3n \\u2022 Preferencias \\u2022 Gesti\\u00f3n', secProfile: 'Informaci\\u00f3n del Perfil', fullName: 'Nombre Completo', emailAddress: 'Correo', profileImg: 'Imagen de Perfil', secDisplay: 'Preferencias de Pantalla', theme: 'Interfaz del Sistema', language: 'Idioma global del sistema (Cambia toda la app)', secLearning: 'Preferencias de Aprendizaje', dailyGoal: 'Meta Diaria (Minutos)', preferredTime: 'Horario Preferido', pomoLength: 'Intervalo de Pomodoro por Defecto', optReminders: 'Activar notificaciones de alerta', optBiometrics: 'Autorizar telemetr\\u00eda cognitiva', optMusic: 'Activar m\\u00fasica generativa', optSfx: 'Activar efectos de sonido de logros', optIncognito: 'Modo Inc\\u00f3gnito (Ocultar estado activo)', dangerTitle: 'Consola de Peligro', dangerSubtitle: 'Elimina de forma irreversible toda la base de datos local.', toast: 'Configuraci\\u00f3n Sincronizada' },
        fr: { title: 'Param\\u00e8tres', subtitle: 'Personnalisation \\u2022 Pr\\u00e9f\\u00e9rences \\u2022 Gestion', secProfile: 'Profil', fullName: 'Nom Complet', emailAddress: 'Email', profileImg: 'Image de Profil', secDisplay: 'Affichage', theme: 'Th\\u00e8me', language: 'Langue globale (Met \\u00e0 jour toute l\\'app)', secLearning: 'Apprentissage', dailyGoal: 'Objectif Quotidien (Minutes)', preferredTime: 'Cr\\u00e9neau d\\'\\u00e9tude', pomoLength: 'Dur\\u00e9e Pomodoro par D\\u00e9fekt', optReminders: 'Activer les notifications flash', optBiometrics: 'Autoriser la t\\u00e9l\\u00e9m\\u00e9trie cognitive', optMusic: 'Activer la musique de concentration', optSfx: 'Activer les effets sonores des badges', optIncognito: 'Mode Incognito (Masquer l\\'activit\\u00e9)', dangerTitle: 'Zone de Danger', dangerSubtitle: 'Supprime d\\u00e9finitivement vos donn\\u00e9es locales.', toast: 'Synchronisation R\\u00e9ussie' },
        de: { title: 'Einstellungen', subtitle: 'Personalisierung \\u2022 Einstellungen \\u2022 Verwaltung', secProfile: 'Profil-Informationen', fullName: 'Name', emailAddress: 'E-Mail', profileImg: 'Profilbild', secDisplay: 'Anzeige', theme: 'Design', language: 'Systemsprache (\\u00c4ndert die gesamte App)', secLearning: 'Lernpr\\u00e4ferenzen', dailyGoal: 'T\\u00e4gliches Ziel (Minuten)', preferredTime: 'Bevorzugte Zeit', pomoLength: 'Standard Pomodoro Intervall', optReminders: 'Fokus-Benachrichtigungen aktivieren', optBiometrics: 'Kognitive Telemetrie erlauben', optMusic: 'Fokus-Soundtracks aktivieren', optSfx: 'Erfolgs-Soundeffekte aktivieren', optIncognito: 'Inkognito-Modus (Status verbergen)', dangerTitle: 'Gefahrenzone', dangerSubtitle: 'L\\u00f6scht alle lokalen Daten unwiderruflich.', toast: 'Erfolgreich Gespeichert' },
        it: { title: 'Impostazioni Account', subtitle: 'Personalizzazione \\u2022 Preferenze \\u2022 Gestione', secProfile: 'Informazioni Profilo', fullName: 'Nome Completo', emailAddress: 'Indirizzo Email', profileImg: 'Immagine Profilo', secDisplay: 'Preferenze Display', theme: 'Tema del Sistema', language: 'Lingua dell\\'applicazione (Aggiorna l\\'intera app)', secLearning: 'Preferenze Studio', dailyGoal: 'Accantonamento Target Giornaliero (Minuti)', preferredTime: 'Fascia Oraria Preferita', pomoLength: 'Intervallo Pomodoro Predefinito', optReminders: 'Attiva notifiche flash locali', optBiometrics: 'Autorizza telemetria cognitiva', optMusic: 'Attiva colonne sonore neurali', optSfx: 'Attiva effetti audio SFX dei premi', optIncognito: 'Modalit\\u00e0 Incognito (Nascondi stato attivo)', dangerTitle: 'Console di Pericolo', dangerSubtitle: 'La rimozione elimina definitivamente profili e metriche.', toast: 'Configurazione Sincronizada' },
        pt: { title: 'Configura\\u00e7\\u00f5es da Conta', subtitle: 'Personaliza\\u00e7\\u00e3o \\u2022 Prefer\\u00eancias \\u2022 Gerenciamento', secProfile: 'Informa\\u00e7\\u00f5es do Perfil', fullName: 'Nome Completo', emailAddress: 'Endere\\u00e7o de Email', profileImg: 'Imagem de Perfil', secDisplay: 'Prefer\\u00eancias de Exibi\\u00e7\\u00e3o', theme: 'Tema do Sistema', language: 'Idioma Global (Atualiza todo o app)', secLearning: 'Prefer\\u00eancias de Aprendizado', dailyGoal: 'Meta de Estudo Di\\u00e1ria (Minutos)', preferredTime: 'Janela de Estudo Preferida', pomoLength: 'Intervalo Padr\\u00e3o do Pomodoro', optReminders: 'Ativar alertas de foco localizados', optBiometrics: 'Autorizar telemetria cognitiva matem\\u00e1tica', optMusic: 'Ativar trilhas sonoras gerativas', optSfx: 'Ativar efeitos sonoros de conquistas', optIncognito: 'Modo Inc\\u00f3gnito (Ocultar status ativo)', dangerTitle: 'Console de Perigo do Sistema', dangerSubtitle: 'Limpar \\u00edndices remove permanentemente perfis e m\\u00e9tricas.', toast: 'Configura\\u00e7\\u00e3o Sincronizada' },
        ru: { title: '\\u041d\\u0430\\u0441\\u0442\\u0440\\u043e\\u0439\\u043a\\u0438 \\u0430\\u043a\\u043a\\u0430\\u0443\\u043d\\u0442\\u0430', subtitle: '\\u041f\\u0435\\u0440\\u0441\\u043e\\u043d\\u0430\\u043b\\u0438\\u0437\\u0430\\u0446\\u0438\\u044f \\u2022 \\u041d\\u0430\\u0441\\u0442\\u0440\\u043e\\u0439\\u043a\\u0438 \\u2022 \\u0423\\u043f\\u0440\\u0430\\u0432\\u043b\\u0435\\u043d\\u0438\\u0435', secProfile: '\\u0418\\u043d\\u0444\\u043e\\u0440\\u043c\\u0430\\u0446\\u0438\\u044f \\u043f\\u0440\\u043e\\u0444\\u0438\\u043b\\u044f', fullName: '\\u041f\\u043e\\u043b\\u043d\\u043e\\u0435 \\u0438\\u043c\\u044f', emailAddress: 'Email \\u0430\\u0434\\u0440\\u0435\\u0441', profileImg: '\\u0418\\u0437\\u043e\\u0431\\u0440\\u0430\\u0436\\u0435\\u043d\\u0438\\u0435 \\u043f\\u0440\\u043e\\u0444\\u0438\\u043b\\u044f', secDisplay: '\\u041d\\u0430\\u0441\\u0442\\u0440\\u043e\\u0439\\u043a\\u0438 \\u044d\\u043a\\u0440\\u0430\\u043d\\u0430', theme: '\\u0422\\u0435\\u043c\\u0430 \\u0441\\u0438\\u0441\\u0442\\u0435\\u043c\\u044b', language: '\\u042f\\u0437\\u044b\\u043a \\u043f\\u0440\\u0438\\u043b\\u043e\\u0436\\u0435\\u043d\\u0438\\u044f (\\u041e\\u0431\\u043d\\u043e\\u0432\\u043b\\u044f\\u0435\\u0442 \\u0432\\u0441\\u0435 \\u043f\\u0440\\u0438\\u043b\\u043e\\u0436\\u0435\\u043d\\u0438\\u0435)', secLearning: '\\u041d\\u0430\\u0441\\u0442\\u0440\\u043e\\u0439\\u043a\\u0438 \\u043e\\u0431\\u0443\\u0447\\u0435\\u043d\\u0438\\u044f', dailyGoal: '\\u0414\\u043d\\u0435\\u0432\\u043d\\u0430\\u044f \\u0446\\u0435\\u043b\\u044c (\\u043c\\u0438\\u043d\\u0443\\u0442\\u044b)', preferredTime: '\\u041f\\u0440\\u0435\\u0434\\u043f\\u043e\\u0447\\u0442\\u0438\\u0442\\u0435\\u043b\\u044c\\u043d\\u043e\\u0435 \\u0432\\u0440\\u0435\\u043c\\u044f', pomoLength: '\\u0418\\u043d\\u0442\\u0435\\u0440\\u0432\\u0430\\u043b \\u041f\\u043e\\u043c\\u043e\\u0434\\u043e\\u0440\\u043e \\u043f\\u043e \\u0443\\u043c\\u043e\\u043b\\u0447\\u0430\\u043d\\u0438\\u044e', optReminders: '\\u0412\\u043a\\u043b\\u044e\\u0447\\u0438\\u0442\\u044c \\u0443\\u0432\\u0435\\u0434\\u043e\\u043c\\u043b\\u0435\\u043d\\u0438\\u044f \\u0444\\u043e\\u043a\\u0443\\u0441\\u0430', optBiometrics: '\\u0420\\u0430\\u0437\\u0440\\u0435\\u0448\\u0438\\u0442\\u044c \\u043a\\u043e\\u0433\\u043d\\u0438\\u0442\\u0438\\u0432\\u043d\\u0443\\u044e \\u0442\\u0435\\u043b\\u0435\\u043c\\u0435\\u0442\\u0440\\u0438\\u044e', optMusic: '\\u0412\\u043a\\u043b\\u044e\\u0447\\u0438\\u0442\\u044c \\u0433\\u0435\\u043d\\u0435\\u0440\\u0430\\u0442\\u0438\\u0432\\u043d\\u0443\\u044e \\u043c\\u0443\\u0437\\u044b\\u043a\\u0443', optSfx: '\\u0412\\u043a\\u043b\\u044e\\u0447\\u0438\\u0442\\u044c \\u0437\\u0432\\u0443\\u043a\\u043e\\u0432\\u044b\\u0435 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b \\u0434\\u043e\\u0441\\u0442\\u0438\\u0436\\u0435\\u043d\\u0438\\u0439', optIncognito: '\\u0420\\u0435\\u0436\\u0438\\u043c \\u0438\\u043d\\u043a\\u043e\\u0433\\u043d\\u0438\\u0442\\u043e (\\u0421\\u043a\\u0440\\u044b\\u0442\\u044c \\u0441\\u0442\\u0430\\u0442\\u0443\\u0441)', dangerTitle: '\\u041e\\u043f\\u0430\\u0441\\u043d\\u0430\\u044f \\u0437\\u043e\\u043d\\u0430', dangerSubtitle: '\\u041e\\u0447\\u0438\\u0441\\u0442\\u043a\\u0430 \\u043a\\u044d\\u0448\\u0430 \\u0431\\u0435\\u0437\\u0432\\u043e\\u0437\\u0432\\u0440\\u0430\\u0442\\u043d\\u043e \\u0443\\u0434\\u0430\\u043b\\u0438\\u0442 \\u043f\\u0440\\u043e\\u0444\\u0438\\u043b\\u0438 \\u0438 \\u043c\\u0435\\u0442\\u0440\\u0438\\u043a\\u0438.', toast: '\\u041a\\u043e\\u043d\\u0444\\u0438\\u0433\\u0443\\u0440\\u0430\\u0446\\u0438\\u044f \\u0441\\u0438\\u043d\\u0445\\u0440\\u043e\\u043d\\u0438\\u0437\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u0430' },
        ar: { title: '\\u0625\\u0639\\u062f\\u0627\\u062f\\u0627\\u062a \\u0627\\u0644\\u062d\\u0633\\u0627\\u0628', subtitle: '\\u0627\\u0644\\u062a\\u062e\\u0635\\u064a\\u0635 \\u2022 \\u0627\\u0644\\u062a\\u0641\\u0636\\u064a\\u0644\\u0627\\u062a \\u2022 \\u0625\\u062f\\u0627\\u0631\\u0629 \\u0627\\u0644\\u062d\\u0633\\u0627\\u0628', secProfile: '\\u0645\\u0639\\u0644\\u0648\\u0645\\u0627\\u062a \\u0627\\u0644\\u0645\\u0644\\u0641 \\u0627\\u0644\\u0634\\u062e\\u0635\\u064a', fullName: '\\u0627\\u0644\\u0627\\u0633\\u0645 \\u0627\\u0644\\u0643\\u0627\\u0645\\u0644', emailAddress: '\\u0627\\u0644\\u0628\\u0631\\u064a\\u062f \\u0627\\u0644\\u0625\\u0644\\u0643\\u062a\\u0631\\u0648\\u0646\\u064a', profileImg: '\\u0635\\u0648\\u0631\\u0629 \\u0627\\u0644\\u0645\\u0644\\u0641 \\u0627\\u0644\\u0634\\u062e\\u0635\\u064a', secDisplay: '\\u062a\\u0641\\u0636\\u064a\\u0644\\u0627\\u062a \\u0627\\u0644\\u0639\\u0631\\u0636', theme: '\\u0645\\u0638\\u0647\\u0631 \\u0627\\u0644\\u0646\\u0638\\u0627\\u0645', language: '\\u0644\\u063a\\u0629 \\u0627\\u0644\\u062a\\u0637\\u0628\\u064a\\u0642 \\u0627\\u0644\\u0639\\u0627\\u0644\\u0645\\u064a\\u0629 (\\u062a\\u062d\\u062f\\u064a\\u062b \\u0627\\u0644\\u062a\\u0637\\u0628\\u064a\\u0642 \\u0628\\u0623\\u0643\\u0645\\u0644\\u0647)', secLearning: '\\u062a\\u0641\\u0636\\u064a\\u0644\\u0627\\u062a \\u0627\\u0644\\u062a\\u0639\\u0644\\u0645', dailyGoal: '\\u0645\\u062e\\u0635\\u0635 \\u0627\\u0644\\u0647\\u062f\\u0641 \\u0627\\u0644\\u064a\\u0648\\u0645\\u064a (\\u0628\\u0627\\u0644\\u062f\\u0642\\u0627\\u0626\\u0642)', preferredTime: '\\u0641\\u062a\\u0631\\u0629 \\u0627\\u0644\\u062f\\u0631\\u0627\\u0633\\u0629 \\u0627\\u0644\\u0645\\u0641\\u0636\\u0644\\u0629', pomoLength: '\\u0641\\u062a\\u0631\\u0629 \\u0628\\u0648\\u064a\\u0645\\u0648\\u062f\\u0648\\u0631\\u0648 \\u0627\\u0644\\u0627\\u0641\\u062a\\u0631\\u0627\\u0636\\u064a\\u0629', optReminders: '\\u062a\\u0641\\u0639\\u064a\\u0644 \\u062a\\u0646\\u0628\\u064a\\u0647\\u0627\\u062a \\u0627\\u0644\\u062a\\u0631\\u0643\\u064a\\u0632 \\u0627\\u0644\\u0645\\u062d\\u0644\\u064a\\u0629', optBiometrics: '\\u0627\\u0644\\u0633\\u0645\\u0627\\u062d \\u0628\\u0642\\u064a\\u0627\\u0633 \\u0627\\u0644\\u0642\\u064a\\u0627\\u0633\\u0627\\u062a \\u0627\\u0644\\u0645\\u0639\\u0631\\u0641\\u064a\\u0629', optMusic: '\\u062a\\u0641\\u0639\\u064a\\u0644 \\u0627\\u0644\\u0645\\u0648\\u0633\\u064a\\u0642\\u0649 \\u0627\\u0644\\u062a\\u0635\\u0648\\u064a\\u0631\\u064a\\u0629 \\u0627\\u0644\\u062a\\u0648\\u0644\\u064a\\u062f\\u064a\\u0629', optSfx: '\\u062a\\u0641\\u0639\\u064a\\u0644 \\u0627\\u0644\\u0645\\u0624\\u062b\\u0631\\u0627\\u062a \\u0627\\u0644\\u0635\\u0648\\u062a\\u064a\\u0629 \\u0644\\u0644\\u0625\\u0646\\u062c\\u0627\\u0632\\u0627\\u062a', optIncognito: '\\u0648\\u0636\\u0639 \\u0627\\u0644\\u062a\\u062e\\u0641\\u064a (\\u0625\\u062e\\u0641\\u0627\\u0621 \\u062d\\u0627\\u0644\\u0629 \\u0627\\u0644\\u062f\\u0631\\u0627\\u0633\\u0629)', dangerTitle: '\\u0644\\u0648\\u062d\\u0629 \\u0627\\u0644\\u062a\\u062d\\u0643\\u0645 \\u0628\\u0627\\u0644\\u0645\\u062e\\u0627\\u0637\\u0631', dangerSubtitle: '\\u0645\\u0633\\u062d \\u0627\\u0644\\u0628\\u064a\\u0627\\u0646\\u0627\\u062a \\u064a\\u0624\\u062f\\u064a \\u0625\\u0644\\u0649 \\u062d\\u0630\\u0641 \\u0627\\u0644\\u0645\\u0644\\u0641\\u0627\\u062a \\u0627\\u0644\\u0634\\u062e\\u0635\\u064a\\u0629 \\u0648\\u0627\\u0644\\u0645\\u0642\\u0627\\u064a\\u064a\\u0633 \\u0646\\u0647\\u0627\\u0626\\u064a\\u0627\\u064b.', toast: '\\u062a\\u0645 \\u0645\\u0632\\u0627\\u0645\\u062c\\u0629 \\u0627\\u0644\\u062a\\u0643\\u0648\\u064a\\u0646' },
        hi: { title: '\\u0916\\u093e\\u0924\\u093e \\u0938\\u0947\\u091f\\u093f\\u0902\\u0917\\u094d\\u0938', subtitle: '\\u0935\\u0948\\u092f\\u0915\\u094d\\u0924\\u093f\\u0915\\u0930\\u0923 \\u2022 \\u092a\\u094d\\u0930\\u093e\\u0925\\u092e\\u093f\\u0915\\u0924\\u093e\\u090f\\u0902 \\u2022 \\u0916\\u093e\\u0924\\u093e \\u092a\\u094d\\u0930\\u092c\\u0902\\u0927\\u0928', secProfile: '\\u092a\\u094d\\u0930\\u094b\\u092b\\u093c\\u093e\\u0907\\u0932 \\u091c\\u093e\\u0928\\u0915\\u093e\\u0930\\u0940', fullName: '\\u092a\\u0942\\u0930\\u093e \\u0928\\u093e\\u092e', emailAddress: '\\u0908\\u092e\\u0947\\u0932 \\u092a\\u0924\\u093e', profileImg: '\\u092a\\u094d\\u0930\\u094b\\u092b\\u093c\\u093e\\u0907\\u0932 \\u091b\\u0935\\u093f', secDisplay: '\\u092a\\u094d\\u0930\\u0926\\u0930\\u094d\\u0936\\u0928 \\u092a\\u094d\\u0930\\u093e\\u0925\\u092e\\u093f\\u0915\\u0924\\u093e\\u090f\\u0902', theme: '\\u0938\\u093f\\u0938\\u094d\\u091f\\u092e \\u0925\\u0940\\u092e \\u0907\\u0902\\u091f\\u0930\\u092b\\u093c\\u0947\\u0938', language: '\\u0935\\u0948\\u0936\\u094d\\u0935\\u093f\\u0915 \\u092d\\u093e\\u0937\\u093e \\u0907\\u0902\\u091c\\u0928 (\\u092a\\u0942\\u0930\\u0947 \\u0910\\u092a \\u0915\\u094b \\u0905\\u092a\\u0921\\u0947\\u091f \\u0915\\u0930\\u0924\\u093e \\u0939\\u0948)', secLearning: '\\u0905\\u0927\\u094d\\u092f\\u092f\\u0928 \\u092a\\u094d\\u0930\\u093e\\u0925\\u092e\\u093f\\u0915\\u0924\\u093e\\u090f\\u0902', dailyGoal: '\\u0926\\u0948\\u0928\\u093f\\u0915 \\u0905\\u0927\\u094d\\u092f\\u092f\\u0928 \\u0932\\u0915\\u094d\\u0937\\u094d\\u092f (\\u092e\\u093f\\u0928\\u091f)', preferredTime: '\\u092a\\u0938\\u0902\\u0926\\u0940\\u0926\\u093e \\u0905\\u0927\\u094d\\u092f\\u092f\\u0928 \\u0938\\u092e\\u092f \\u0938\\u0940\\u092e\\u093e', pomoLength: '\\u0921\\u093f\\u092c\\u093c\\u0949\\u0932\\u094d\\u091f \\u092a\\u094b\\u092e\\u094b\\u0921\\u094b\\u0930\\u094b \\u0905\\u0902\\u0924\\u0930\\u093e\\u0932', optReminders: '\\u092b\\u093c\\u094b\\u0915\\u0938 \\u0938\\u0942\\u091a\\u0928\\u093e\\u090f\\u0902 \\u0938\\u0915\\u094d\\u0937\\u092e \\u0915\\u0930\\u0947\\u0902', optBiometrics: '\\u0915\\u094b\\u0917\\u094d\\u0928\\u093f\\u091f\\u093f\\u0935 \\u091f\\u0947\\u0932\\u0940\\u092e\\u0947\\u091f\\u094d\\u0930\\u0940 \\u0915\\u094b \\u0905\\u0927\\u093f\\u0915\\u0943\\u0924 \\u0915\\u0930\\u0947\\u0902', optMusic: '\\u0928\\u094d\\u092f\\u0942\\u0930\\u0932 \\u092b\\u093c\\u094b\\u0915\\u0938 \\u0938\\u093e\\u0909\\u0902\\u0921\\u091f\\u094d\\u0930\\u0948\\u0915 \\u0938\\u0915\\u094d\\u0937\\u092e \\u0915\\u0930\\u0947\\u0902', optSfx: '\\u092a\\u0941\\u0930\\u0938\\u094d\\u0915\\u093e\\u0930 \\u0927\\u094d\\u0935\\u0928\\u093f \\u092a\\u094d\\u0930\\u092d\\u093e\\u0935 \\u0938\\u0915\\u094d\\u0937\\u092e \\u0915\\u0930\\u0947\\u0902', optIncognito: '\\u0907\\u0928\\u094d\\u0915\\u094b\\u0917\\u094d\\u0928\\u093f\\u091f\\u094b \\u092e\\u094b\\u0921 (\\u0938\\u0915\\u094d\\u0930\\u093f\\u092f \\u0938\\u094d\\u0925\\u093f\\u0924\\u093f \\u091b\\u0941\\u092a\\u093e\\u090f\\u0902)', dangerTitle: '\\u0938\\u093f\\u0938\\u094d\\u091f\\u092e \\u0916\\u0924\\u0930\\u093e \\u0915\\u0902\\u0938\\u094b\\u0932', dangerSubtitle: '\\u0921\\u0947\\u091f\\u093e \\u0938\\u093e\\u092b\\u093c \\u0915\\u0930\\u0928\\u0947 \\u0938\\u0947 \\u092a\\u094d\\u0930\\u094b\\u092b\\u093c\\u093e\\u0907\\u0932 \\u0914\\u0930 \\u092e\\u0947\\u091f\\u094d\\u0930\\u093f\\u0915\\u094d\\u0938 \\u0938\\u094d\\u0925\\u093e\\u092f\\u0940 \\u0930\\u0942\\u092a \\u0938\\u0947 \\u0939\\u091f\\u093e \\u0926\\u093f\\u090f \\u091c\\u093e\\u090f\\u0902\\u0917\\u0947\\u0964', toast: '\\u0915\\u0949\\u0928\\u094d\\u092b\\u093c\\u093f\\u0917\\u0930\\u0947\\u0936\\u0928 \\u0938\\u093f\\u0902\\u0915\\u094d\\u0930\\u0928\\u093e\\u0907\\u091c\\u093c \\u0915\\u093f\\u092f\\u093e \\u0917\\u092f\\u093e' },
        ja: { title: '\\u30a2\\u30ab\\u30a6\\u30f3\\u30c8\\u8a2d\\u5b9a', subtitle: '\\u30d1\\u30fc\\u30bd\\u30ca\\u30e9\\u30a4\\u30ba \\u2022 \\u74b0\\u5883\\u8a2d\\u5b9a \\u2022 \\u30a2\\u30ab\\u30a6\\u30f3\\u30c8\\u7ba1\\u7406', secProfile: '\\u30d7\\u30ed\\u30d5\\u30a3\\u30fc\\u30eb\\u60c5\\u5831', fullName: '\\u30d5\\u30eb\\u30cd\\u30fc\\u30e0', emailAddress: '\\u30e1\\u30fc\\u30eb\\u30a2\\u30c9\\u30ec\\u30b9', profileImg: '\\u30d7\\u30ed\\u30d5\\u30a3\\u30fc\\u30eb\\u753b\\u50cf', secDisplay: '\\u8868\\u793a\\u8a2d\\u5b9a', theme: '\\u30c6\\u30fc\\u30de', language: '\\u8a00\\u8a9e\\u30ed\\u30fc\\u30ab\\u30e9\\u30a4\\u30ba (\\u30a2\\u30d7\\u30ea\\u5168\\u4f53\\u304c\\u5909\\u66f4\\u3055\\u308c\\u307e\\u3059)', secLearning: '\\u5b66\\u7fd2\\u74b0\\u5883\\u8a2d\\u5b9a', dailyGoal: '1\\u65e5\\u306e\\u76ee\\u6a19\\uff08\\u5206\\uff09', preferredTime: '\\u5e0c\\u671b\\u3059\\u308b\\u6642\\u9593\\u5e2f', pomoLength: '\\u30dd\\u30e2\\u30c9\\u30fc\\u30ed\\u306e\\u898f\\u5b9a\\u5024', optReminders: '\\u30a2\\u30e9\\u30fc\\u30c8\\u901a\\u77e5\\u3092\\u6709\\u52b9\\u306b\\u3059\\u308b', optBiometrics: '\\u8a8d\\u77e5\\u6e2c\\u5b9a\\u3092\\u8a31\\u53ef\\u3059\\u308b', optMusic: '\\u96c6\\u4e2d\\u7528BGM\\u3092\\u6709\\u52b9\\u306b\\u3059\\u308b', optSfx: '\\u5b9f\\u7e3e\\u97f3\\u52b9\\u3092\\u6709\\u52b9\\u306b\\u3059\\u308b', optIncognito: '\\u30a4\\u30f3\\u30b3\\u30b0\\u30cb\\u30fc\\u30c8\\u30e2\\u30fc\\u30c9\\uff08\\u72b6\\u614b\\u3092\\u96a0\\u3059\\uff09', dangerTitle: '\\u5371\\u967a\\u30b3\\u30f3\\u30bd\\u30fc\\u30eb', dangerSubtitle: '\\u30ed\\u30fc\\u30ab\\u30eb\\u30c7\\u30fc\\u30bf\\u3092\\u5b89\\u5168\\u306b\\u5b8c\\u5168\\u6d88\\u53bb\\u3057\\u307e\\u3059\\u3002', toast: '\\u540c\\u671f\\u5b8c\\u4e86' },
        ko: { title: '\\uacc4\\uc815 \\uc124\\uc815', subtitle: '\\uac1c\\uc778\\ud654 \\u2022 \\uae30\\ubcf8 \\uc124\\uc815 \\u2022 \\uacc4\\uc815 \\uad00\\ub9ac', secProfile: '\\ud504\\ub85c\\ud544 \\uc815\\ubcf4', fullName: '\\uc804\\uccb4 \\uc774\\ub984', emailAddress: '\\uc774\\uba54\\uc77c \\uc8fc\\uc18c', profileImg: '\\ud504\\ub85c\\ud544 \\uc774\\ubbf8\\uc9c0', secDisplay: '\\ub514\\uc2a4\\ud50c\\ub808\\uc774 \\uc124\\uc815', theme: '\\uc2dc\\uc2a4\\ud15c \\ud14c\\ub9c8', language: '\\uae00\\ub85c\\ubc8c \\uc5b8\\uc5b4 \\uc5d4\\uc9c4 (\\uc571 \\uc804\\uccb4\\uc5d0 \\uc801\\uc6a9\\ub428)', secLearning: '\\ud559\\uc2b5 \\uae30\\ubcf8 \\uc124\\uc815', dailyGoal: '\\ud558\\ub8e8 \\ud559\\uc2b5 \\ubaa9\\ud45c (\\ubd84)', preferredTime: '\\uc120\\ud638\\ud558\\ub294 \\ud559\\uc2b5 \\uc2dc\\uac04\\ub300', pomoLength: '\\uae30\\ubcf8 \\ud3ec\\ubaa8\\ub4dc\\ub85c \\uc2dc\\uac04', optReminders: '\\uc9d1\\uc911 \\uc54c\\ub9bc \\ud65c\\uc131\\ud654', optBiometrics: '\\uc778\\uc9c0 \\ud154\\ub808\\uba54\\ud2b8\\ub9ac \\uae30\\ub85d \\ud5c8\\uc6a9', optMusic: '\\uc9d1\\uc911 \\uc74c\\uc545 \\ud65c\\uc131\\ud654', optSfx: '\\uc5c5\\uc801 \\uc0ac\\uc6b4\\ub4dc \\ud6a8\\uacfc \\ud65c\\uc131\\ud654', optIncognito: '\\uc2dc\\ud06c\\ub9bf \\ubaa8\\ub4dc (\\ud65c\\ub3d9 \\uc0c1\\ud0dc \\uc228\\uae30\\uae30)', dangerTitle: '\\uc2dc\\uc2a4\\ud15c \\uc704\\ud5d8 \\ucf58\\uc194', dangerSubtitle: '\\ub370\\uc774\\ud130 \\ucd08\\uae30\\ud654 \\uc2dc \\ud504\\ub85c\\ud544\\uacfc \\ud1b5\\uacc4\\uac00 \\uc601\\uad6c \\uc0ad\\uc81c\\ub429\\ub2c8\\ub2e4.', toast: '\\uc124\\uc815\\uc774 \\ub3d9\\uae30\\ud654\\ub418\\uc5c8\\uc2b5\\ub2c8\\ub2e4' },
        tr: { title: 'Hesap Ayarlar\\u0131', subtitle: 'Ki\\u015fiselle\\u015ftirme \\u2022 Tercihler \\u2022 Y\\u00f6netim', secProfile: 'Profil Bilgileri', fullName: 'Ad Soyad', emailAddress: 'E-posta Adresi', profileImg: 'Profil Resmi', secDisplay: 'G\\u00f6r\\u00fcn\\u00fcm Tercihleri', theme: 'Sistem Temas\\u0131', language: 'Uygulama Dili (T\\u00fcm uygulamay\\u0131 g\\u00fcnceller)', secLearning: '\\u00d6\\u011frenme Tercihleri', dailyGoal: 'G\\u00fcnl\\u00fck \\u00c7al\\u0131\\u015fma Hedefi (Dakika)', preferredTime: 'Tercih Edilen \\u00c7al\\u0131\\u015fma Zaman\\u0131', pomoLength: 'Varsay\\u0131lan Pomodoro S\\u00fcresi', optReminders: 'Odak bildirimlerini etkinle\\u015ftir', optBiometrics: 'Bili\\u015fsel telemetriyi yetkilendir', optMusic: 'Odak m\\u00fcziklerini etkinle\\u015ftir', optSfx: 'Ba\\u015far\\u0131 ses efektlerini etkinle\\u015ftir', optIncognito: 'Gizli Mod (\\u00c7al\\u0131\\u015fma durumunu gizle)', dangerTitle: 'Sistem Tehlike Konsolu', dangerSubtitle: 'Veritaban\\u0131n\\u0131 s\\u0131f\\u0131rlamak yerel profilleri ve metrikleri kal\\u0131c\\u0131 olarak siler.', toast: 'Yap\\u0131land\\u0131rma Senkronize Edildi' },
        vi: { title: 'C\\u00e0i \\u0111\\u1eb7t T\\u00e0i kho\\u1ea3n', subtitle: 'C\\u00e1 nh\\u00e2n h\\u00f3a \\u2022 T\\u00f9y ch\\u1ecdn \\u2022 Qu\\u1ea3n l\\u00fd', secProfile: 'Th\\u00f4ng tin C\\u00e1 nh\\u00e2n', fullName: 'H\\u1ecd v\\u00e0 T\\u00ean', emailAddress: '\\u0110\\u1ecba ch\\u1ec9 Email', profileImg: '\\u1ea2nh \\u0111\\u1ea1i di\\u1ec7n', secDisplay: 'T\\u00f9y ch\\u1ecdn Hi\\u1ec3n th\\u1ecb', theme: 'Giao di\\u1ec7n H\\u1ec7 th\\u1ed1ng', language: 'Ng\\u00f4n ng\\u1eef To\\u00e0n c\\u1ee5c (C\\u1eadp nh\\u1eadt to\\u00e0n b\\u1ed9 \\u1ee9ng d\\u1ee5ng)', secLearning: 'T\\u00f9y ch\\u1ecdn H\\u1ecdc t\\u1eadp', dailyGoal: 'M\\u1ee5c ti\\u00eau H\\u1ecdc t\\u1eadp H\\u00e0ng ng\\u00e0y (Ph\\u00fat)', preferredTime: 'Khung gi\\u1edd H\\u1ecdc \\u01b0u th\\u00edch', pomoLength: 'Th\\u1eddi gian Pomodoro M\\u1eb7c \\u0111\\u1ecbnh', optReminders: 'B\\u1eadt th\\u00f4ng b\\u00e1o nh\\u1eafc nh\\u1edf t\\u1eadp trung', optBiometrics: '\\u1ee6y quy\\u1ec1n ghi nh\\u1eadn d\\u1eef li\\u1ec7u nh\\u1eadn th\\u1ee9c', optMusic: 'B\\u1eadt \\u00e2m nh\\u1ea1c t\\u1eadp trung', optSfx: 'B\\u1eadt hi\\u1ec7u \\u1ee9ng \\u00e2m thanh th\\u00e0nh t\\u00edch', optIncognito: 'Ch\\u1ebf \\u0111\\u1ed9 \\u1ea8n danh (\\u1ea8n tr\\u1ea1ng th\\u00e1i h\\u1ecdc)', dangerTitle: 'B\\u1ea3ng \\u0111i\\u1ec1u khi\\u1ec3n Nguy hi\\u1ec3m', dangerSubtitle: 'X\\u00f3a ch\\u1ec9 m\\u1ee5c s\\u1ebd x\\u00f3a v\\u0129nh vi\\u1ec5n h\\u1ed3 s\\u01a1 v\\u00e0 d\\u1eef li\\u1ec7u c\\u1ee5c b\\u1ed9.', toast: 'C\\u1ea5u h\\u00ecnh \\u0111\\u00e3 \\u0111\\u1ed3ng b\\u1ed9' }
      };

      function loadPersistentSettingsUI() {
        document.getElementById('settingsFullName').value = localStorage.getItem('flashsync_user_name') || 'Scholar';
        document.getElementById('settingsEmail').value = localStorage.getItem('flashsync_user_email') || 'scholar@flashsync.ai';
        document.getElementById('settingsDailyGoal').value = localStorage.getItem('flashsync_daily_goal') || '60';
        document.getElementById('settingsStudyTime').value = localStorage.getItem('flashsync_study_time') || 'morning';
        document.getElementById('settingsPomoLength').value = localStorage.getItem('flashsync_pomo_length') || '25';
        
        document.getElementById('chkReminders').checked = localStorage.getItem('flashsync_opt_reminders') !== 'false';
        document.getElementById('chkBiometrics').checked = localStorage.getItem('flashsync_opt_biometrics') !== 'false';
        document.getElementById('chkMusic').checked = localStorage.getItem('flashsync_opt_music') !== 'false';
        document.getElementById('chkSfx').checked = localStorage.getItem('flashsync_opt_sfx') !== 'false';
        document.getElementById('chkIncognito').checked = localStorage.getItem('flashsync_opt_incognito') === 'true';

        const avatarContainer = document.getElementById('settingsAvatarPreview');
        const imgCache = localStorage.getItem('flashsync_avatar_img_data');
        if (imgCache) {
          avatarContainer.innerText = '';
          avatarContainer.style.backgroundImage = 'url(' + imgCache + ')';
        } else {
          const savedGrad = localStorage.getItem('flashsync_avatar_grad') || 'linear-gradient(135deg, #00f2ff, #0077ff)';
          const savedGlyph = localStorage.getItem('flashsync_avatar_glyph') || '🎓';
          avatarContainer.style.backgroundImage = 'none';
          avatarContainer.style.background = savedGrad;
          avatarContainer.innerText = savedGlyph;
        }

        // Apply active theme state globally across the shell on boot
        const currentTheme = localStorage.getItem('flashsync_global_theme') || 'dark';
        switchTheme(currentTheme, false); // Boot without showing toast feedback

        // Apply active language state globally on boot
        const currentLang = localStorage.getItem('flashsync_global_lang') || 'en';
        applyActiveButtonState('lang-', currentLang);
        executeDomLanguageTranslation(currentLang);
        document.documentElement.setAttribute('lang', currentLang);
      }

      function applyActiveButtonState(prefix, selectedKey) {
        const btnClass = prefix === 'theme-' ? 'mode-btn' : 'lang-btn';
        document.querySelectorAll('.' + btnClass).forEach(function(b) {
          b.classList.remove('active');
        });
        const target = document.getElementById(prefix + selectedKey);
        if (target) target.classList.add('active');
      }

      /* --- MASTER GLOBAL THEME SWITCH ENGINE --- */
      function switchTheme(themeMode, triggerToast = true) {
        localStorage.setItem('flashsync_global_theme', themeMode);
        applyActiveButtonState('theme-', themeMode);
        
        // Apply attribute to top level window DOM Node (updates whole website instantly)
        document.documentElement.setAttribute('data-theme', themeMode);
        
        // Broadcast change event for cross-iframe windows or external page wrappers
        window.dispatchEvent(new CustomEvent('flashsync_theme_changed', { detail: themeMode }));
        
        if (triggerToast) {
          showSaveToastFeedback();
        }
      }

      /* --- MASTER GLOBAL LANGUAGE ENGINES --- */
      function commitGlobalLanguage(langCode) {
        localStorage.setItem('flashsync_global_lang', langCode);
        applyActiveButtonState('lang-', langCode);
        executeDomLanguageTranslation(langCode);
        showSaveToastFeedback();
        
        // Updates native document lang property globally
        document.documentElement.setAttribute('lang', langCode);
        
        
        const customLangEvent = new CustomEvent('flashsync_language_changed', { detail: langCode });
        window.dispatchEvent(customLangEvent);
      }

      function executeDomLanguageTranslation(lang) {
        const pack = langPacks[lang] || langPacks['en'];
        
        // Safely map strings only if elements exist on the visible DOM canvas layout block
        const safeSetText = (id, text) => {
          const el = document.getElementById(id);
          if (el) el.innerText = text;
        };

        safeSetText('lbl-settings-title', pack.title);
        safeSetText('lbl-settings-subtitle', pack.subtitle);
        safeSetText('lbl-section-profile', pack.secProfile);
        safeSetText('lbl-full-name', pack.fullName);
        safeSetText('lbl-email-address', pack.emailAddress);
        safeSetText('lbl-profile-image', pack.profileImg);
        safeSetText('lbl-section-display', pack.secDisplay);
        safeSetText('lbl-theme', pack.theme);
        safeSetText('lbl-language', pack.language);
        safeSetText('lbl-section-learning', pack.secLearning);
        safeSetText('lbl-daily-goal', pack.dailyGoal);
        safeSetText('lbl-preferred-time', pack.preferredTime);
        safeSetText('lbl-pomo-length', pack.pomoLength);
        safeSetText('lbl-opt-reminders', pack.optReminders);
        safeSetText('lbl-opt-biometrics', pack.optBiometrics);
        safeSetText('lbl-opt-music', pack.optMusic);
        safeSetText('lbl-opt-sfx', pack.optSfx);
        safeSetText('lbl-opt-incognito', pack.optIncognito);
        safeSetText('lbl-danger-title', pack.dangerTitle);
        safeSetText('lbl-danger-subtitle', pack.dangerSubtitle);
        safeSetText('lbl-toast-saved', pack.toast);
      }

      function showSaveToastFeedback() {
        const toast = document.getElementById('settingsToastAlert');
        if (!toast) return;
        toast.style.opacity = '1';
        toast.style.transform = 'translateY(0)';
        setTimeout(function() {
          toast.style.opacity = '0';
          toast.style.transform = 'translateY(20px)';
        }, 1500);
      }

      function saveSettingsField(key, val) {
        localStorage.setItem(key, val);
        showSaveToastFeedback();
      }

      function handleFileImageCacheref(inputElement) {
        if (inputElement.files && inputElement.files[0]) {
          const reader = new FileReader();
          reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
              const canvas = document.createElement('canvas');
              const ctx = canvas.getContext('2d');
              canvas.width = 120;
              canvas.height = 120;
              const minDim = Math.min(img.width, img.height);
              const sx = (img.width - minDim) / 2;
              const sy = (img.height - minDim) / 2;
              ctx.drawImage(img, sx, sy, minDim, minDim, 0, 0, 120, 120);
              const compressedBase64 = canvas.toDataURL('image/jpeg', 0.85);
              localStorage.setItem('flashsync_avatar_img_data', compressedBase64);
              
              const p = document.getElementById('settingsAvatarPreview');
              if (p) {
                p.innerText = '';
                p.style.backgroundImage = 'url(' + compressedBase64 + ')';
              }
              
              window.dispatchEvent(new Event('flashsync_profile_update'));
              showSaveToastFeedback();
            };
            img.src = e.target.result;
          };
          reader.readAsDataURL(inputElement.files[0]);
        }
      }

      function triggerSettingsAvatarGeneration() {
        const grads = ['linear-gradient(135deg, #00f2ff, #0077ff)', 'linear-gradient(135deg, #ff4a4a, #ffaa00)', 'linear-gradient(135deg, #10e353, #0077ff)', 'linear-gradient(135deg, #9d4edd, #ff007f)'];
        const glyphs = ['🎓', '\u{1F52C}', '\u{1F4BB}', '\u{1F4D0}', '\u{1F9E0}', '\u{1F30C}', '\u{1F680}'];
        const g = grads[Math.floor(Math.random() * grads.length)];
        const glyph = glyphs[Math.floor(Math.random() * glyphs.length)];

        localStorage.removeItem('flashsync_avatar_img_data');
        localStorage.setItem('flashsync_avatar_grad', g);
        localStorage.setItem('flashsync_avatar_glyph', glyph);

        const preview = document.getElementById('settingsAvatarPreview');
        if (preview) {
          preview.style.backgroundImage = 'none';
          preview.style.background = g;
          preview.innerText = glyph;
        }
        
        window.dispatchEvent(new Event('flashsync_profile_update'));
        showSaveToastFeedback();
      }

      function executeSystemStoragePurge() {
        if(confirm(\"Are you absolutely sure you want to clean out local storage profiles?\")) {
           localStorage.clear();
           location.reload();
        }
      }

      // Initialize UI Bindings automatically on runtime load
      document.addEventListener('DOMContentLoaded', loadPersistentSettingsUI);
      // Fallback initialization if template system loads dynamically
      setTimeout(loadPersistentSettingsUI, 50);
    </script>
  </div>
  "
}

fn exam_subject_page(topic: String) -> String {
  "<div><h1>" <> topic <> " Exam Session</h1><p class='subtitle'>Timed practice with feedback</p><div class='feature-box'><h3>Exam ready</h3><p style='color:#888;'>Your selected exam is ready to launch. Start when you are ready to practice under timed conditions.</p><button class='premium-button' onclick='launchExamSession(\"" <> topic <> "\")' style='margin-top:15px;'><i class='fas fa-play'></i> Begin Session</button></div></div>"
}

pub fn analytics_page() -> String {
  "
  <div id='academic-intelligence-system' style='max-width: 1600px; margin: auto; padding: 40px; color: #fff; font-family: system-ui;'>
    <style>
      :root { --panel: #18181b; --stroke: #27272a; --glow-blue: rgba(0, 242, 255, 0.2); }
      .dashboard-v2 { display: grid; grid-template-columns: 350px 1fr 300px; gap: 20px; }
      .panel { background: var(--panel); border: 1px solid var(--stroke); padding: 25px; border-radius: 20px; }
      .metric-value { font-size: 2.5rem; font-weight: 800; color: #fff; }
      .trend-up { color: #10e353; font-size: 0.9rem; }
      .bar-track { height: 12px; background: #09090b; border-radius: 6px; overflow: hidden; margin: 10px 0; }
      .bar-fill { height: 100%; transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1); }
      .glass-card { background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.1); padding: 20px; border-radius: 16px; }
    </style>

    <header style='margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center;'>
      <div>
        <h1 style='margin:0;'>Academic Intelligence System</h1>
        <p style='color: #71717a;'>Autonomous Monitoring: <span id='system-status' style='color: #10e353;'>● Active</span></p>
      </div>
      <div id='date-display' style='font-weight: 600;'></div>
    </header>

    <div class='dashboard-v2'>
      <div class='panel'>
        <h3>Global Parameters</h3>
        <div id='controls' style='display:flex; flex-direction:column; gap:15px;'>
          <button onclick='IntelEngine.recalculate()' style='padding:12px; border-radius:10px; cursor:pointer;'>Force Re-Sync Data</button>
          <div class='glass-card'>
            <h4>Cognitive Load Index</h4>
            <div id='load-index' style='font-size:2rem; color:var(--accent);'>0%</div>
          </div>
        </div>
      </div>

      <div class='panel'>
        <h3>Performance Vector Analysis</h3>
        <div id='vector-chart' style='height:300px; display:flex; align-items:flex-end; gap:8px;'></div>
        <div id='subject-list' style='margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:20px;'></div>
      </div>

      <div class='panel'>
        <h3>Goal Projection</h3>
        <div id='goal-container'></div>
        <div class='glass-card' style='margin-top:20px;'>
          <h4>Upcoming Deadline</h4>
          <p id='deadline-text'>Calculating optimal study path...</p>
        </div>
      </div>
    </div>

    <script>
      const IntelEngine = {
        state: {
          metrics: { study_hours: 84.5, retention: 92, focus: 88, workload: 45 },
          subjects: [
            { id: 'BIO', name: 'Biology', score: 92, target: 95 },
            { id: 'CHM', name: 'Chemistry', score: 87, target: 92 },
            { id: 'PHY', name: 'Physics', score: 76, target: 90 },
            { id: 'CAL', name: 'Calculus', score: 88, target: 95 }
          ]
        },

        init() {
          this.renderChart();
          this.renderSubjects();
          this.renderGoals();
          document.getElementById('date-display').innerText = new Date().toDateString();
        },

        renderChart() {
          const chart = document.getElementById('vector-chart');
          const data = [40, 65, 50, 85, 70, 95, 80];
          chart.innerHTML = data.map(h => `<div class='bar-track' style='width:100%; height:${h}%'><div class='bar-fill' style='height:100%; background:var(--accent); width:100%'></div></div>`).join('');
        },

        renderSubjects() {
          const list = document.getElementById('subject-list');
          list.innerHTML = this.state.subjects.map(s => `
            <div class='glass-card'>
              <div style='font-weight:bold;'>${s.name}</div>
              <div class='bar-track'><div class='bar-fill' style='width:${s.score}%; background:linear-gradient(90deg, var(--accent), #7e22ce);'></div></div>
              <small>${s.score}% / Target ${s.target}%</small>
            </div>
          `).join('');
        },

        renderGoals() {
          const container = document.getElementById('goal-container');
          container.innerHTML = this.state.subjects.map(s => `
            <div style='margin-bottom:15px;'>
              <div style='display:flex; justify-content:space-between; font-size:0.8rem;'>
                <span>${s.id} Gap</span>
                <span>${s.target - s.score}% remaining</span>
              </div>
            </div>
          `).join('');
        },

        recalculate() {
          console.log('Synchronizing with Learning Repository...');
          this.state.metrics.workload = Math.floor(Math.random() * 100);
          document.getElementById('load-index').innerText = this.state.metrics.workload + '%';
        }
      };

      IntelEngine.init();
    </script>
  </div>
  "
}

fn predictor_page() -> String {
  "
  <div>
    <h1>Mastery Predictor</h1>
    <p class='subtitle'>AI-Powered Learning Predictions</p>
    
    <div class='feature-box'>
      <h3><i class='fas fa-crystal-ball'></i> Your Learning Trajectory</h3>
      <p style='color: #888; margin: 15px 0;'>Based on your current study patterns and performance:</p>
      
      <div style='background: rgba(0,242,255,0.08); padding: 20px; border-radius: 12px; margin: 20px 0;'>
        <p style='font-size: 1.2rem; color: var(--success); font-weight: bold;'><i class='fas fa-check-circle'></i> Biology Mastery: 95% in 4 days</p>
        <p style='font-size: 1.2rem; color: var(--primary); font-weight: bold; margin-top: 10px;'><i class='fas fa-chart-line'></i> Chemistry Mastery: 90% in 8 days</p>
        <p style='font-size: 1.2rem; color: var(--warning); font-weight: bold; margin-top: 10px;'><i class='fas fa-exclamation-triangle'></i> Physics Mastery: 85% in 15 days (needs more focus)</p>
      </div>
      
      <button class='premium-button' onclick='showToast(\"Prediction updated!\",\"success\")' style='width: 100%; margin-top: 15px;'><i class='fas fa-sync'></i> Update Predictions</button>
    </div>
  </div>"
}

fn solver_page() -> String {
  "
  <div>
    <h1>Quick Solver</h1>
    <p class='subtitle'>Instant Problem Solutions</p>
    
    <div class='feature-box'>
      <textarea id='quickSolverInput' class='premium-input' rows='4' placeholder='Enter your problem here...'></textarea>
      <button class='premium-button' onclick='solveQuickProblem()' style='width: 100%; margin-top: 15px;'><i class='fas fa-bolt'></i> Solve Now</button>
    </div>
    
    <div id='quickSolverResult' class='feature-box' style='display: none;'></div>
  </div>"
}

fn suggestions_page() -> String {
  "
  <div>
    <h1>Smart Suggestions</h1>
    <p class='subtitle'>Personalized Study Recommendations</p>
    
    <div class='grid-2'>
      <div class='stat-card'>
        <h3><i class='fas fa-lightbulb' style='color:var(--warning);'></i> Review Recommended</h3>
        <p style='color: #888; margin: 10px 0;'>Thermodynamics - Last reviewed 5 days ago</p>
        <button class='premium-button' onclick='startReview(\"Thermodynamics\")' style='width: 100%; margin-top: 15px;'>Start Review</button>
      </div>
      
      <div class='stat-card'>
        <h3><i class='fas fa-fire' style='color:var(--accent);'></i> Build Momentum</h3>
        <p style='color: #888; margin: 10px 0;'>Organic Chemistry - You're on a roll!</p>
        <button class='success-button' onclick='openDeck(\"Organic Chemistry\")' style='width: 100%; margin-top: 15px;'>Continue Learning</button>
      </div>
    </div>
  </div>"
}

fn profile_page() -> String {
  "
  <div>
    <h1>Your Profile</h1>
    <p class='subtitle'>Identity & Achievements</p>
    
    <div class='feature-box'>
      <div style='display: flex; gap: 30px; align-items: center;'>
        <div class='profile-avatar' style='width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; overflow: hidden;'>
          <i class='fas fa-user' style='font-size: 3rem;'></i>
        </div>
        <div>
          <h2>Scholar</h2>
          <p style='color: #888;'>Member since Jan 2026</p>
          <p style='color: var(--success); margin-top: 10px;'><i class='fas fa-star'></i> Elite Learner</p>
          <div style='display: flex; gap: 10px; margin-top: 10px;'>
            <input type='file' id='profileUpload' accept='image/*' style='display: none;' onchange='handleProfilePhoto(event)'>
            <button class='premium-button compact-btn' onclick='document.getElementById(\"profileUpload\").click()'><i class='fas fa-camera'></i> Upload Photo</button>
            <button class='accent-button compact-btn' onclick='generateAvatar()'><i class='fas fa-wand-magic-sparkles'></i> Generate Avatar</button>
          </div>
        </div>
      </div>
    </div>
    
    <h2 style='margin-top: 40px;'>Statistics</h2>
    <div class='grid-3'>
      <div class='stat-card'>
        <h3>Total Study Time</h3>
        <p style='font-size: 2rem; color: var(--primary); font-weight: bold;'>156 hours</p>
      </div>
      <div class='stat-card'>
        <h3>Cards Created</h3>
        <p style='font-size: 2rem; color: var(--success); font-weight: bold;'>312</p>
      </div>
      <div class='stat-card'>
        <h3>Exams Taken</h3>
        <p style='font-size: 2rem; color: var(--secondary); font-weight: bold;'>47</p>
      </div>
    </div>
  </div>"
}

fn achievements_page() -> String {
  "
  <div>
    <h1>Achievements</h1>
    <p class='subtitle'>Your Learning Milestones</p>
    
    <div class='grid-3'>
      <div class='stat-card'>
        <div style='font-size: 3rem; text-align: center; margin-bottom: 15px;'>🎯</div>
        <h3>First Blood</h3>
        <p style='color: #888; text-align: center;'>Complete your first study session</p>
        <p style='color: var(--success); text-align: center; margin-top: 10px;'><i class='fas fa-check'></i> Unlocked</p>
      </div>
      
      <div class='stat-card'>
        <div style='font-size: 3rem; text-align: center; margin-bottom: 15px;'>🔥</div>
        <h3>On Fire</h3>
        <p style='color: #888; text-align: center;'>7-day study streak</p>
        <p style='color: var(--success); text-align: center; margin-top: 10px;'><i class='fas fa-check'></i> Unlocked</p>
      </div>
      
      <div class='stat-card'>
        <div style='font-size: 3rem; text-align: center; margin-bottom: 15px;'>🧠</div>
        <h3>Brainiac</h3>
        <p style='color: #888; text-align: center;'>Master 100 flashcards</p>
        <p style='color: var(--success); text-align: center; margin-top: 10px;'><i class='fas fa-check'></i> Unlocked</p>
      </div>
      
      <div class='stat-card'>
        <div style='font-size: 3rem; text-align: center; margin-bottom: 15px;'>⚡</div>
        <h3>Speed Demon</h3>
        <p style='color: #888; text-align: center;'>Complete exam in under 15 minutes</p>
        <p style='color: var(--warning); text-align: center; margin-top: 10px;'><i class='fas fa-lock'></i> Locked</p>
      </div>
      
      <div class='stat-card'>
        <div style='font-size: 3rem; text-align: center; margin-bottom: 15px;'>📚</div>
        <h3>Scholar</h3>
        <p style='color: #888; text-align: center;'>Study for 100 hours total</p>
        <p style='color: var(--success); text-align: center; margin-top: 10px;'><i class='fas fa-check'></i> Unlocked</p>
      </div>
      
      <div class='stat-card'>
        <div style='font-size: 3rem; text-align: center; margin-bottom: 15px;'>💎</div>
        <h3>Perfectionist</h3>
        <p style='color: #888; text-align: center;'>Score 100% on any exam</p>
        <p style='color: var(--warning); text-align: center; margin-top: 10px;'><i class='fas fa-lock'></i> Locked</p>
      </div>
    </div>
  </div>"
}

fn calendar_page() -> String {
  "
  <div>
    <h1>Study Calendar</h1>
    <p class='subtitle'>Schedule & Track Your Learning</p>
    
    <div class='feature-box'>
      <h3>This Week's Schedule</h3>
      <div style='display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 20px;'>
        <div style='text-align: center; padding: 15px; background: rgba(0,242,255,0.1); border-radius: 8px;'>
          <p style='font-weight: bold; color: var(--primary);'>Mon</p>
          <p style='color: #888; font-size: 0.9rem;'>Biology</p>
        </div>
        <div style='text-align: center; padding: 15px; background: rgba(188,19,254,0.1); border-radius: 8px;'>
          <p style='font-weight: bold; color: var(--secondary);'>Tue</p>
          <p style='color: #888; font-size: 0.9rem;'>Chemistry</p>
        </div>
        <div style='text-align: center; padding: 15px; background: rgba(0,255,0,0.1); border-radius: 8px;'>
          <p style='font-weight: bold; color: var(--success);'>Wed</p>
          <p style='color: #888; font-size: 0.9rem;'>Physics</p>
        </div>
        <div style='text-align: center; padding: 15px; background: rgba(250,204,21,0.1); border-radius: 8px;'>
          <p style='font-weight: bold; color: var(--warning);'>Thu</p>
          <p style='color: #888; font-size: 0.9rem;'>Math</p>
        </div>
        <div style='text-align: center; padding: 15px; background: rgba(0,242,255,0.1); border-radius: 8px;'>
          <p style='font-weight: bold; color: var(--primary);'>Fri</p>
          <p style='color: #888; font-size: 0.9rem;'>Review</p>
        </div>
        <div style='text-align: center; padding: 15px; background: rgba(188,19,254,0.1); border-radius: 8px;'>
          <p style='font-weight: bold; color: var(--secondary);'>Sat</p>
          <p style='color: #888; font-size: 0.9rem;'>Practice</p>
        </div>
        <div style='text-align: center; padding: 15px; background: #222; border-radius: 8px;'>
          <p style='font-weight: bold; color: #888;'>Sun</p>
          <p style='color: #666; font-size: 0.9rem;'>Rest</p>
        </div>
      </div>
    </div>
  </div>"
}

fn notes_page() -> String {
  "
  <div>
    <h1>Quick Notes</h1>
    <p class='subtitle'>Capture Ideas & Insights</p>
    
    <div class='feature-box'>
      <textarea id='quickNote' class='premium-input' rows='6' placeholder='Write your notes here...'></textarea>
      <div style='display: flex; gap: 10px; margin-top: 15px;'>
        <button class='premium-button' onclick='saveNote()' style='flex: 1;'><i class='fas fa-save'></i> Save Note</button>
        <button class='accent-button' onclick='exportNotes()' style='flex: 1;'><i class='fas fa-download'></i> Export</button>
      </div>
    </div>
    
    <h2 style='margin-top: 40px;'>Saved Notes</h2>
    <div id='savedNotes' class='grid-2'>
      <div class='stat-card'>
        <h3>Study Tips</h3>
        <p style='color: #888;'>Use active recall instead of passive reading...</p>
        <p style='color: #666; font-size: 0.9rem; margin-top: 10px;'>Created 2 days ago</p>
      </div>
    </div>
  </div>"
}

fn vocabulary_page() -> String {
  "
  <div>
    <h1>Vocabulary Builder</h1>
    <p class='subtitle'>Expand Your Academic Vocabulary</p>
    
    <div class='feature-box'>
      <button class='premium-button' onclick='learnNewWord()' style='width: 100%; margin-bottom: 10px;'><i class='fas fa-random'></i> Learn New Word</button>
      <button class='accent-button' onclick='exportVocabulary()' style='width: 100%;'><i class='fas fa-download'></i> Export Vocabulary</button>
    </div>
    
    <div id='vocabDisplay' style='margin-top: 20px;'></div>
    
    <h2 style='margin-top: 40px;'>Your Vocabulary</h2>
    <div id='vocabList' class='grid-2'>
      <!-- Vocabulary items will be loaded here -->
    </div>
  </div>"
}


fn pomodoro_page() -> String {
  "
  <div>
    <h1>Pomodoro Timer</h1>
    <p class='subtitle'>Focused Study Sessions</p>
    
    <div class='feature-box' style='text-align: center;'>
      <div id='pomodoroDisplay' style='font-size: 4rem; color: var(--primary); font-weight: bold; margin: 30px 0;'>25:00</div>
      <p id='pomodoroLabel' style='color:#888;margin-bottom:15px;'>Focus session ready</p>
      <button id='pomodoroBtn' class='premium-button' onclick='startPomodoro()' style='font-size: 1.2rem; padding: 15px 40px;'><i class='fas fa-play'></i> Start Focus Session</button>
      <div style='display:flex;gap:10px;justify-content:center;margin-top:15px;'>
        <button class='accent-button compact-btn' onclick='stopPomodoro()'><i class='fas fa-stop'></i> Reset</button>
        <button class='success-button compact-btn' onclick='logTime()'><i class='fas fa-plus'></i> Log 5 min</button>
      </div>
      <div class='feature-box' style='margin-top:20px;'>
        <h3><i class='fas fa-headphones'></i> Focus Music</h3>
        <div id='musicPlayer' style='display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px;'>
          <button id='musicBtn' class='premium-button compact-btn music-btn' onclick='toggleMusic()'><i class='fas fa-play'></i> Play Music</button>
          <button id='ambientBtn' class='accent-button compact-btn' onclick='toggleAmbientMusic()'><i class='fas fa-music'></i> Play Ambient</button>
        </div>
      </div>
    </div>
  </div>"
}

fn formulas_page() -> String {
  "
  <div>
    <h1>Formula Reference</h1>
    <p class='subtitle'>Essential Formulas Across All Subjects</p>
    
    <h2>Physics</h2>
    <div class='grid-2'>
      <div class='stat-card'>
        <h3>Newton's Second Law</h3>
        <div class='code-block'>F = ma</div>
        <p style='color: #888;'>Force equals mass times acceleration</p>
      </div>
      
      <div class='stat-card'>
        <h3>Kinetic Energy</h3>
        <div class='code-block'>KE = ½mv²</div>
        <p style='color: #888;'>Energy of motion</p>
      </div>
      
      <div class='stat-card'>
        <h3>Ohm's Law</h3>
        <div class='code-block'>V = IR</div>
        <p style='color: #888;'>Voltage equals current times resistance</p>
      </div>
      
      <div class='stat-card'>
        <h3>Wave Equation</h3>
        <div class='code-block'>v = fλ</div>
        <p style='color: #888;'>Velocity equals frequency times wavelength</p>
      </div>
    </div>
    
    <h2 style='margin-top: 40px;'>Chemistry</h2>
    <div class='grid-2'>
      <div class='stat-card'>
        <h3>Ideal Gas Law</h3>
        <div class='code-block'>PV = nRT</div>
        <p style='color: #888;'>Pressure × Volume = moles × gas constant × temperature</p>
      </div>
      
      <div class='stat-card'>
        <h3>pH Calculation</h3>
        <div class='code-block'>pH = -log[H⁺]</div>
        <p style='color: #888;'>Measure of acidity</p>
      </div>
      
      <div class='stat-card'>
        <h3>Molarity</h3>
        <div class='code-block'>M = n/V</div>
        <p style='color: #888;'>Moles per liter of solution</p>
      </div>
      
      <div class='stat-card'>
        <h3>Rate Law</h3>
        <div class='code-block'>rate = k[A]ᵐ[B]ⁿ</div>
        <p style='color: #888;'>Reaction rate depends on concentration</p>
      </div>
    </div>
    
    <h2 style='margin-top: 40px;'>Mathematics</h2>
    <div class='grid-2'>
      <div class='stat-card'>
        <h3>Quadratic Formula</h3>
        <div class='code-block'>x = (-b ± √(b²-4ac)) / 2a</div>
        <p style='color: #888;'>Solve quadratic equations</p>
      </div>
      
      <div class='stat-card'>
        <h3>Pythagorean Theorem</h3>
        <div class='code-block'>a² + b² = c²</div>
        <p style='color: #888;'>Right triangle relationship</p>
      </div>
      
      <div class='stat-card'>
        <h3>Derivative Power Rule</h3>
        <div class='code-block'>d/dx(xⁿ) = nxⁿ⁻¹</div>
        <p style='color: #888;'>Differentiation rule</p>
      </div>
      
      <div class='stat-card'>
        <h3>Integration</h3>
        <div class='code-block'>∫xⁿ dx = xⁿ⁺¹/(n+1) + C</div>
        <p style='color: #888;'>Antiderivative formula</p>
      </div>
    </div>
  </div>"
}

fn error_page() -> String {
  "
  <div>
    <h1>Page Not Found</h1>
    <p class='subtitle'>This feature is under construction or doesn't exist.</p>
    <button class='premium-button' onclick='location.href=\"/hub\"' style='margin-top: 30px;'><i class='fas fa-home'></i> Return to Dashboard</button>
  </div>"
}