Upload 3 files

script.js

@@ -0,0 +1,1076 @@
+/* ============================================================
+   SpeakFlow AI – script.js
+   Complete frontend logic for speech stuttering detection
+   ============================================================ */
+// Auto-detect the backend URL so this works both locally and when deployed
+// (e.g. Hugging Face Spaces). Locally it still points at the Flask dev
+// server on 127.0.0.1:5000, exactly like before. Everywhere else, it calls
+// the same origin the page was loaded from (no hardcoded localhost).
+const API_BASE = (['localhost', '127.0.0.1'].includes(window.location.hostname))
+  ? "http://127.0.0.1:5000"
+  : window.location.origin; // Flask backend
+'use strict';
+
+/* ─── GLOBAL STATE ─────────────────────────────────────────── */
+let currentFile    = null;   // Uploaded File object
+let currentResult  = null;   // Last analysis result object
+let mediaRecorder  = null;   // MediaRecorder instance
+let recordedChunks = [];     // Collected audio chunks
+let recordingTimer = null;   // Interval for timer
+let recordingSeconds = 0;    // Seconds elapsed
+let recBlob        = null;   // Blob from recorded audio
+let liveWaveformAnim = null; // rAF handle for live waveform
+let heroWaveformAnim = null; // rAF handle for hero waveform
+let pieChartInst   = null;
+let barChartInst   = null;
+let gaugeChartInst = null;
+let qualityChartInst = null;
+
+/* ─── DOM HELPERS ──────────────────────────────────────────── */
+const $  = (sel, ctx = document) => ctx.querySelector(sel);
+const $$ = (sel, ctx = document) => [...ctx.querySelectorAll(sel)];
+
+/* ─── DARK MODE ─────────────────────────────────────────────── */
+(function initDarkMode() {
+  const saved = localStorage.getItem('speakflow-theme') || 'light';
+  setTheme(saved);
+})();
+
+function setTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  const icon = $('#darkModeIcon');
+  icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+  localStorage.setItem('speakflow-theme', theme);
+}
+
+const darkToggle = $('#darkModeToggle');
+if (darkToggle) {
+  darkToggle.addEventListener('click', () => {
+    const current = document.documentElement.getAttribute('data-theme');
+    setTheme(current === 'dark' ? 'light' : 'dark');
+  });
+}
+
+/* ─── MOBILE MENU ───────────────────────────────────────────── */
+$('#hamburger').addEventListener('click', () => {
+  $('#navLinks').classList.toggle('open');
+});
+// Close menu on link click
+$$('#navLinks a').forEach(a => a.addEventListener('click', () => {
+  $('#navLinks').classList.remove('open');
+}));
+
+/* ─── NAVBAR SCROLL ─────────────────────────────────────────── */
+window.addEventListener('scroll', () => {
+  const navbar = $('#navbar');
+  if (window.scrollY > 40) {
+    navbar.style.boxShadow = '0 4px 24px rgba(0,0,0,0.12)';
+  } else {
+    navbar.style.boxShadow = 'none';
+  }
+  // Show/hide scroll-to-top button
+  const scrollBtn = $('#scrollTop');
+  if (window.scrollY > 400) {
+    scrollBtn.classList.add('visible');
+  } else {
+    scrollBtn.classList.remove('visible');
+  }
+});
+
+$('#scrollTop').addEventListener('click', () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
+/* ─── FLOATING PARTICLES ────────────────────────────────────── */
+(function createParticles() {
+  const container = $('#particles');
+  const count = 28;
+  for (let i = 0; i < count; i++) {
+    const p = document.createElement('div');
+    p.className = 'particle';
+    const size = Math.random() * 6 + 3;
+    const left = Math.random() * 100;
+    const delay = Math.random() * 15;
+    const duration = Math.random() * 20 + 15;
+    p.style.cssText = `
+      width: ${size}px;
+      height: ${size}px;
+      left: ${left}%;
+      bottom: -${size}px;
+      animation-duration: ${duration}s;
+      animation-delay: ${delay}s;
+      opacity: ${Math.random() * 0.5 + 0.1};
+    `;
+    container.appendChild(p);
+  }
+})();
+
+/* ─── HERO WAVEFORM ANIMATION ───────────────────────────────── */
+(function initHeroWaveform() {
+  const canvas = $('#heroWaveform');
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  let t = 0;
+
+  function draw() {
+    const W = canvas.width;
+    const H = canvas.height;
+    ctx.clearRect(0, 0, W, H);
+    ctx.beginPath();
+    ctx.strokeStyle = 'rgba(59,130,246,0.8)';
+    ctx.lineWidth = 2;
+    for (let x = 0; x < W; x++) {
+      const freq1 = Math.sin((x / W) * Math.PI * 6 + t);
+      const freq2 = Math.sin((x / W) * Math.PI * 12 + t * 1.5) * 0.4;
+      const y = H / 2 + (freq1 + freq2) * (H / 2 - 8);
+      x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+
+    // Secondary wave
+    ctx.beginPath();
+    ctx.strokeStyle = 'rgba(20,184,166,0.5)';
+    ctx.lineWidth = 1.5;
+    for (let x = 0; x < W; x++) {
+      const freq1 = Math.sin((x / W) * Math.PI * 8 + t * 1.2);
+      const y = H / 2 + freq1 * (H / 2 - 12);
+      x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+
+    t += 0.04;
+    heroWaveformAnim = requestAnimationFrame(draw);
+  }
+  draw();
+})();
+
+/* ─── FILE UPLOAD ────────────────────────────────────────────── */
+const dropZone  = $('#dropZone');
+const fileInput = $('#fileInput');
+const browseBtn = $('#browseBtn');
+
+browseBtn.addEventListener('click', () => fileInput.click());
+
+fileInput.addEventListener('change', () => {
+  if (fileInput.files[0]) handleFile(fileInput.files[0]);
+});
+
+// Drag & Drop events
+dropZone.addEventListener('dragover', e => {
+  e.preventDefault();
+  dropZone.classList.add('drag-over');
+});
+dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+dropZone.addEventListener('drop', e => {
+  e.preventDefault();
+  dropZone.classList.remove('drag-over');
+  const f = e.dataTransfer.files[0];
+  if (f) handleFile(f);
+});
+
+/**
+ * Validate and display file preview.
+ */
+function handleFile(file) {
+  const allowed = ['audio/wav', 'audio/mpeg', 'audio/mp3', 'audio/wave'];
+  const ext = file.name.split('.').pop().toLowerCase();
+  if (!allowed.includes(file.type) && !['wav','mp3'].includes(ext)) {
+    showToast('❌ Invalid file type. Please upload WAV or MP3.', 'error');
+    return;
+  }
+
+  currentFile = file;
+  const url = URL.createObjectURL(file);
+  const player = $('#audioPlayer');
+  player.src = url;
+
+  // File name & size
+  $('#fileName').textContent = file.name;
+  $('#fileSize').textContent = formatBytes(file.size);
+
+  // Get duration
+  const tempAudio = new Audio(url);
+  tempAudio.onloadedmetadata = () => {
+    $('#fileDuration').textContent = formatDuration(tempAudio.duration);
+  };
+
+  dropZone.style.display = 'none';
+  $('#filePreview').style.display = 'flex';
+  $('#filePreview').style.flexDirection = 'column';
+
+  showToast('✅ Audio file loaded successfully!', 'success');
+}
+
+function formatBytes(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / 1048576).toFixed(1) + ' MB';
+}
+
+function formatDuration(sec) {
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+// Clear file
+$('#clearFileBtn').addEventListener('click', clearFile);
+$('#clearBtn').addEventListener('click', clearFile);
+
+function clearFile() {
+  currentFile = null;
+  fileInput.value = '';
+  $('#audioPlayer').src = '';
+  $('#filePreview').style.display = 'none';
+  dropZone.style.display = 'block';
+}
+
+/* ─── ANALYZE BUTTON ─────────────────────────────────────────── */
+$('#analyzeBtn').addEventListener('click', () => {
+  if (!currentFile) { showToast('Please upload an audio file first.', 'error'); return; }
+  startAnalysis(currentFile.name);
+});
+
+/* ─── LIVE RECORDER ──────────────────────────────────────────── */
+const startRecBtn   = $('#startRecBtn');
+const stopRecBtn    = $('#stopRecBtn');
+const playRecBtn    = $('#playRecBtn');
+const deleteRecBtn  = $('#deleteRecBtn');
+const analyzeRecBtn = $('#analyzeRecBtn');
+const timerDisplay  = $('#timerDisplay');
+const recIndicator  = $('#recIndicator');
+const recPlayer     = $('#recPlayer');
+const liveCanvas    = $('#liveWaveform');
+const liveCtx       = liveCanvas.getContext('2d');
+
+let audioCtx, analyserNode, sourceNode, liveStream;
+
+startRecBtn.addEventListener('click', async () => {
+  try {
+    liveStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  } catch {
+    showToast('Microphone access denied. Please allow microphone permission.', 'error');
+    return;
+  }
+
+  // Audio analyser for live waveform
+  audioCtx    = new (window.AudioContext || window.webkitAudioContext)();
+  analyserNode = audioCtx.createAnalyser();
+  analyserNode.fftSize = 256;
+  sourceNode  = audioCtx.createMediaStreamSource(liveStream);
+  sourceNode.connect(analyserNode);
+  drawLiveWaveform();
+
+  recordedChunks = [];
+  mediaRecorder  = new MediaRecorder(liveStream);
+  mediaRecorder.ondataavailable = e => { if (e.data.size > 0) recordedChunks.push(e.data); };
+  mediaRecorder.onstop = () => {
+    recBlob = new Blob(recordedChunks, { type: 'audio/webm' });
+    recPlayer.src = URL.createObjectURL(recBlob);
+    playRecBtn.disabled   = false;
+    deleteRecBtn.disabled = false;
+    analyzeRecBtn.disabled = false;
+    analyzeRecBtn.style.display = 'inline-flex';
+    stopLiveWaveform();
+    audioCtx.close();
+    liveStream.getTracks().forEach(t => t.stop());
+  };
+  mediaRecorder.start();
+
+  // Timer
+  recordingSeconds = 0;
+  timerDisplay.textContent = '00:00';
+  recordingTimer = setInterval(() => {
+    recordingSeconds++;
+    const m = Math.floor(recordingSeconds / 60);
+    const s = recordingSeconds % 60;
+    timerDisplay.textContent = `${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
+  }, 1000);
+
+  recIndicator.classList.add('recording');
+  startRecBtn.disabled = true;
+  stopRecBtn.disabled  = false;
+  playRecBtn.disabled  = true;
+  deleteRecBtn.disabled = true;
+});
+
+stopRecBtn.addEventListener('click', () => {
+  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+    mediaRecorder.stop();
+  }
+  clearInterval(recordingTimer);
+  recIndicator.classList.remove('recording');
+  startRecBtn.disabled = false;
+  stopRecBtn.disabled  = true;
+});
+
+playRecBtn.addEventListener('click', () => { recPlayer.play(); });
+
+deleteRecBtn.addEventListener('click', () => {
+  recBlob = null;
+  recPlayer.src = '';
+  recordingSeconds = 0;
+  timerDisplay.textContent = '00:00';
+  playRecBtn.disabled   = true;
+  deleteRecBtn.disabled = true;
+  analyzeRecBtn.disabled = true;
+  analyzeRecBtn.style.display = 'none';
+  clearLiveWaveform();
+  showToast('Recording deleted.', 'info');
+});
+
+analyzeRecBtn.addEventListener('click', () => {
+  if (!recBlob) return;
+  startAnalysis('live-recording.webm');
+});
+
+/* Live waveform drawing */
+function drawLiveWaveform() {
+  const W = liveCanvas.width;
+  const H = liveCanvas.height;
+  const bufferLen = analyserNode.frequencyBinCount;
+  const dataArr   = new Uint8Array(bufferLen);
+
+  function render() {
+    liveWaveformAnim = requestAnimationFrame(render);
+    analyserNode.getByteTimeDomainData(dataArr);
+
+    liveCtx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--surface') || '#fff';
+    liveCtx.fillRect(0, 0, W, H);
+    liveCtx.lineWidth   = 2;
+    liveCtx.strokeStyle = '#2563EB';
+    liveCtx.beginPath();
+    const sliceW = W / bufferLen;
+    let x = 0;
+    for (let i = 0; i < bufferLen; i++) {
+      const v = dataArr[i] / 128.0;
+      const y = v * H / 2;
+      i === 0 ? liveCtx.moveTo(x, y) : liveCtx.lineTo(x, y);
+      x += sliceW;
+    }
+    liveCtx.lineTo(W, H / 2);
+    liveCtx.stroke();
+  }
+  render();
+}
+
+function stopLiveWaveform() {
+  if (liveWaveformAnim) cancelAnimationFrame(liveWaveformAnim);
+}
+
+function clearLiveWaveform() {
+  liveCtx.clearRect(0, 0, liveCanvas.width, liveCanvas.height);
+}
+
+/* ─── ANALYSIS SIMULATION ────────────────────────────────────── */
+/**
+ * Simulates the AI processing pipeline.
+ * In production this would POST to /api/predict and receive real results.
+ */
+function startAnalysis(fileName) {
+  if (!currentFile && !recBlob) return;
+
+  const fileToSend = currentFile || recBlob;
+  sendToBackend(fileToSend, fileName);
+}
+
+/**
+ * Generate a simulated AI result and render the dashboard.
+ */
+function generateResult(fileName) {
+  // Randomize result for demo purposes
+  const isNormal      = Math.random() > 0.45;
+  const confidence    = (Math.random() * 20 + 78).toFixed(1);  // 78–98%
+  const fluency       = isNormal
+    ? (Math.random() * 15 + 82).toFixed(1)
+    : (Math.random() * 30 + 30).toFixed(1);
+  const processingMs  = Math.floor(Math.random() * 600 + 800);
+  const normalProb    = isNormal
+    ? parseFloat(confidence)
+    : (100 - parseFloat(confidence)).toFixed(1);
+  const stutterProb   = (100 - parseFloat(normalProb)).toFixed(1);
+
+  currentResult = {
+    fileName,
+    isNormal,
+    confidence: parseFloat(confidence),
+    fluency: parseFloat(fluency),
+    processingMs,
+    normalProb: parseFloat(normalProb),
+    stutterProb: parseFloat(stutterProb),
+    date: new Date().toLocaleString(),
+  };
+
+  renderResults(currentResult);
+  saveToHistory(currentResult);
+  renderHistory();
+
+  // Scroll to results
+  document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
+  showToast('✅ Analysis complete!', 'success');
+}
+
+/* ─── RENDER RESULTS ─────────────────────────────────────────── */
+function renderResults(r) {
+  $('#resultsPlaceholder').style.display = 'none';
+  const content = $('#resultsContent');
+  content.style.display = 'flex';
+
+  // Prediction card
+  const card = $('#predictionCard');
+  card.className = 'prediction-card ' + (r.isNormal ? 'normal' : 'stutter');
+  $('#predIcon').textContent = r.isNormal ? '✅' : '⚠️';
+  $('#predLabel').textContent = r.isNormal ? 'Normal Speech Detected' : 'Speech Stuttering Detected';
+  $('#predLabel').style.color = r.isNormal ? 'var(--green)' : 'var(--red)';
+  $('#predSublabel').textContent = r.isNormal
+    ? 'Your speech shows normal fluency characteristics.'
+    : 'Stuttering patterns were identified in your speech.';
+
+  // Score cards
+  $('#confidenceScore').textContent = r.confidence + '%';
+  $('#fluencyScore').textContent    = r.fluency + '%';
+  $('#processingTime').textContent  = r.processingMs + 'ms';
+  $('#predProbability').textContent = (r.isNormal ? r.normalProb : r.stutterProb) + '%';
+
+  // Charts
+  renderPieChart(r);
+  renderBarChart();
+  renderGaugeChart(r);
+  renderQualityChart(r);
+  renderResultWaveform(r);
+}
+
+function renderPieChart(r) {
+  if (pieChartInst) pieChartInst.destroy();
+  const ctx = $('#pieChart').getContext('2d');
+  pieChartInst = new Chart(ctx, {
+    type: 'doughnut',
+    data: {
+      labels: ['Normal', 'Stutter'],
+      datasets: [{
+        data: [r.normalProb, r.stutterProb],
+        backgroundColor: ['rgba(16,185,129,0.80)', 'rgba(239,68,68,0.80)'],
+        borderColor: ['#10B981', '#EF4444'],
+        borderWidth: 2,
+        hoverOffset: 6,
+      }]
+    },
+    options: {
+      responsive: true,
+      cutout: '65%',
+      plugins: {
+        legend: { position: 'bottom', labels: { padding: 14, font: { size: 12 } } },
+        tooltip: { callbacks: { label: (i) => ` ${i.label}: ${i.raw}%` } }
+      }
+    }
+  });
+}
+
+function renderBarChart() {
+  if (barChartInst) barChartInst.destroy();
+  const ctx = $('#barChart').getContext('2d');
+  const features = ['MFCC 1','MFCC 2','MFCC 3','MFCC 4','MFCC 5','Energy','ZCR'];
+  const values   = features.map(() => +(Math.random() * 0.6 + 0.2).toFixed(2));
+  barChartInst = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: features,
+      datasets: [{
+        label: 'Importance',
+        data: values,
+        backgroundColor: 'rgba(37,99,235,0.75)',
+        borderColor: '#2563EB',
+        borderWidth: 1.5,
+        borderRadius: 6,
+      }]
+    },
+    options: {
+      responsive: true,
+      scales: {
+        y: { beginAtZero: true, max: 1, ticks: { font: { size: 11 } } },
+        x: { ticks: { font: { size: 11 } } }
+      },
+      plugins: { legend: { display: false } }
+    }
+  });
+}
+
+function renderGaugeChart(r) {
+  if (gaugeChartInst) gaugeChartInst.destroy();
+  const ctx = $('#gaugeChart').getContext('2d');
+  const val = r.confidence;
+  gaugeChartInst = new Chart(ctx, {
+    type: 'doughnut',
+    data: {
+      datasets: [{
+        data: [val, 100 - val],
+        backgroundColor: [
+          val >= 85 ? 'rgba(16,185,129,0.80)' : val >= 70 ? 'rgba(245,158,11,0.80)' : 'rgba(239,68,68,0.80)',
+          'rgba(226,232,240,0.40)'
+        ],
+        borderWidth: 0,
+        circumference: 180,
+        rotation: 270,
+      }]
+    },
+    options: {
+      responsive: true,
+      cutout: '72%',
+      plugins: {
+        legend: { display: false },
+        tooltip: { enabled: false },
+        afterDraw: (chart) => {
+          const { ctx: c, chartArea: { left, right, bottom } } = chart;
+          c.fillStyle = '#1E293B';
+          c.font = 'bold 22px Space Grotesk, sans-serif';
+          c.textAlign = 'center';
+          c.fillText(val + '%', (left + right) / 2, bottom - 8);
+        }
+      }
+    },
+    plugins: [{
+      id: 'centerText',
+      afterDraw(chart) {
+        const { ctx: c, chartArea: { left, right, bottom } } = chart;
+        c.save();
+        c.font = 'bold 20px Inter, sans-serif';
+        c.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--text') || '#1E293B';
+        c.textAlign = 'center';
+        c.fillText(val + '%', (left + right) / 2, bottom - 10);
+        c.restore();
+      }
+    }]
+  });
+}
+
+function renderQualityChart(r) {
+  if (qualityChartInst) qualityChartInst.destroy();
+  const ctx = $('#qualityChart').getContext('2d');
+  qualityChartInst = new Chart(ctx, {
+    type: 'radar',
+    data: {
+      labels: ['Fluency', 'Clarity', 'Rhythm', 'Pace', 'Pitch'],
+      datasets: [{
+        label: 'Speech Quality',
+        data: [
+          r.fluency,
+          +(Math.random() * 20 + 70).toFixed(1),
+          +(Math.random() * 20 + 65).toFixed(1),
+          +(Math.random() * 20 + 68).toFixed(1),
+          +(Math.random() * 20 + 72).toFixed(1),
+        ],
+        backgroundColor: 'rgba(20,184,166,0.20)',
+        borderColor: 'rgba(20,184,166,0.90)',
+        borderWidth: 2,
+        pointBackgroundColor: '#14B8A6',
+        pointRadius: 4,
+      }]
+    },
+    options: {
+      responsive: true,
+      scales: { r: { min: 0, max: 100, ticks: { stepSize: 25, font: { size: 10 } }, pointLabels: { font: { size: 11 } } } },
+      plugins: { legend: { display: false } }
+    }
+  });
+}
+
+function renderResultWaveform(r) {
+  const canvas = $('#resultWaveform');
+  const ctx    = canvas.getContext('2d');
+  const W = canvas.width, H = canvas.height;
+  ctx.clearRect(0, 0, W, H);
+
+  const color = r.isNormal ? '#10B981' : '#EF4444';
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  for (let x = 0; x < W; x++) {
+    const base  = Math.sin((x / W) * Math.PI * 10) * 0.6;
+    const noise = r.isNormal
+      ? Math.sin((x / W) * Math.PI * 20) * 0.2
+      : Math.sin((x / W) * Math.PI * 30) * 0.5 + (Math.random() - 0.5) * 0.4;
+    const y = H / 2 + (base + noise) * (H / 2 - 6);
+    x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+  }
+  ctx.stroke();
+}
+
+/* ─── LOCAL STORAGE HISTORY ──────────────────────────────────── */
+function getHistory() {
+  return JSON.parse(localStorage.getItem('sf_analysis_history') || '[]');
+}
+
+function saveToHistory(result) {
+  const history = getHistory();
+  history.unshift({
+    id: Date.now(),
+    date: result.date,
+    fileName: result.fileName,
+    isNormal: result.isNormal,
+    confidence: result.confidence,
+  });
+  // Keep max 50 records
+  localStorage.setItem('sf_analysis_history', JSON.stringify(history.slice(0, 50)));
+}
+
+function deleteHistoryItem(id) {
+  const history = getHistory().filter(item => item.id !== id);
+  localStorage.setItem('sf_analysis_history', JSON.stringify(history));
+  renderHistory();
+}
+
+function clearAllHistory() {
+  localStorage.removeItem('sf_analysis_history');
+  renderHistory();
+}
+
+/**
+ * Render the history table, optionally filtered by a query string.
+ */
+function renderHistory(filter = '') {
+  const tbody = $('#historyBody');
+  const emptyEl = $('#historyEmpty');
+  const history = getHistory();
+  const filtered = filter
+    ? history.filter(item =>
+        item.fileName.toLowerCase().includes(filter.toLowerCase()) ||
+        (item.isNormal ? 'normal' : 'stutter').includes(filter.toLowerCase())
+      )
+    : history;
+
+  tbody.innerHTML = '';
+
+  if (filtered.length === 0) {
+    emptyEl.style.display = 'block';
+    return;
+  }
+  emptyEl.style.display = 'none';
+
+  filtered.forEach((item, idx) => {
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td>${idx + 1}</td>
+      <td>${item.date}</td>
+      <td title="${item.fileName}">${item.fileName.length > 30 ? item.fileName.slice(0, 30) + '…' : item.fileName}</td>
+      <td><span class="badge ${item.isNormal ? 'badge-normal' : 'badge-stutter'}">${item.isNormal ? 'Normal' : 'Stutter'}</span></td>
+      <td>${item.confidence}%</td>
+      <td><button class="delete-row-btn" data-id="${item.id}"><i class="fas fa-trash"></i> Delete</button></td>
+    `;
+    tbody.appendChild(tr);
+  });
+
+  // Bind delete buttons
+  $$('.delete-row-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      deleteHistoryItem(parseInt(btn.dataset.id));
+    });
+  });
+}
+
+// Search
+$('#historySearch').addEventListener('input', e => renderHistory(e.target.value));
+
+// Clear all
+$('#clearAllBtn').addEventListener('click', () => {
+  if (confirm('Clear all detection history? This cannot be undone.')) clearAllHistory();
+});
+
+// Render on load
+renderHistory();
+
+/* ─── NEW ANALYSIS & RESET ───────────────────────────────────── */
+$('#newAnalysisBtn').addEventListener('click', () => {
+  currentResult = null;
+  currentFile   = null;
+  clearFile();
+  $('#resultsContent').style.display = 'none';
+  $('#resultsPlaceholder').style.display = 'block';
+  document.getElementById('analysis').scrollIntoView({ behavior: 'smooth' });
+});
+
+/* ─── PDF REPORT ─────────────────────────────────────────────── */
+$('#downloadReportBtn').addEventListener('click', () => {
+  if (!currentResult) { showToast('No result to export.', 'error'); return; }
+  generatePDFReport(currentResult);
+});
+
+function generatePDFReport(r) {
+  const { jsPDF } = window.jspdf;
+  const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
+
+  const blue   = [37, 99, 235];
+  const teal   = [20, 184, 166];
+  const dark   = [30, 41, 59];
+  const gray   = [100, 116, 139];
+  const light  = [241, 245, 249];
+  const green  = [16, 185, 129];
+  const red    = [239, 68, 68];
+  const W = 210, H = 297;
+
+  // Header background
+  doc.setFillColor(...blue);
+  doc.rect(0, 0, W, 50, 'F');
+
+  // Logo / title
+  doc.setTextColor(255, 255, 255);
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(22);
+  doc.text('SpeakFlow AI', 16, 22);
+  doc.setFontSize(11);
+  doc.setFont('helvetica', 'normal');
+  doc.text('Speech Stuttering Detection System', 16, 32);
+  doc.setFontSize(9);
+  doc.text('The University of Faisalabad  ·  BS Software Engineering', 16, 41);
+
+  // Report label
+  doc.setFillColor(...teal);
+  doc.roundedRect(W - 60, 16, 50, 16, 4, 4, 'F');
+  doc.setTextColor(255, 255, 255);
+  doc.setFontSize(10);
+  doc.setFont('helvetica', 'bold');
+  doc.text('ANALYSIS REPORT', W - 35, 26, { align: 'center' });
+
+  // Section: File Information
+  let y = 62;
+  sectionHeader(doc, 'File Information', 14, y, W, dark, light);
+  y += 14;
+  infoRow(doc, 'File Name',     r.fileName,    16, y, gray, dark); y += 9;
+  infoRow(doc, 'Analysis Date', r.date,        16, y, gray, dark); y += 9;
+  infoRow(doc, 'Processing',    r.processingMs + ' ms', 16, y, gray, dark); y += 16;
+
+  // Section: Prediction Result
+  sectionHeader(doc, 'Prediction Result', 14, y, W, dark, light);
+  y += 14;
+
+  const resColor = r.isNormal ? green : red;
+  doc.setFillColor(...resColor);
+  doc.roundedRect(16, y, W - 32, 22, 6, 6, 'F');
+  doc.setTextColor(255, 255, 255);
+  doc.setFontSize(14);
+  doc.setFont('helvetica', 'bold');
+  doc.text(r.isNormal ? '✓  Normal Speech Detected' : '✗  Speech Stuttering Detected', W / 2, y + 14, { align: 'center' });
+  y += 32;
+
+  // Section: Scores
+  sectionHeader(doc, 'Analysis Scores', 14, y, W, dark, light);
+  y += 16;
+
+  const scores = [
+    ['Confidence Score',     r.confidence + '%'],
+    ['Speech Fluency Score', r.fluency + '%'],
+    ['Prediction Probability', (r.isNormal ? r.normalProb : r.stutterProb) + '%'],
+    ['Processing Time',      r.processingMs + ' ms'],
+  ];
+
+  const colW = (W - 32) / 2;
+  scores.forEach((s, i) => {
+    const col = i % 2;
+    const row = Math.floor(i / 2);
+    const bx  = 16 + col * (colW + 4);
+    const by  = y + row * 28;
+    doc.setFillColor(...light);
+    doc.roundedRect(bx, by, colW, 22, 4, 4, 'F');
+    doc.setTextColor(...gray);
+    doc.setFontSize(8);
+    doc.setFont('helvetica', 'normal');
+    doc.text(s[0].toUpperCase(), bx + 8, by + 9);
+    doc.setTextColor(...blue);
+    doc.setFontSize(13);
+    doc.setFont('helvetica', 'bold');
+    doc.text(s[1], bx + 8, by + 18);
+  });
+  y += 70;
+
+  // Section: Model Information
+  sectionHeader(doc, 'Model Information', 14, y, W, dark, light);
+  y += 14;
+  infoRow(doc, 'Algorithm',       'Random Forest Classifier',       16, y, gray, dark); y += 9;
+  infoRow(doc, 'Feature Extraction', 'MFCC (40 Coefficients) via Librosa', 16, y, gray, dark); y += 9;
+  infoRow(doc, 'Dataset',         '8,000+ Labeled Audio Samples',  16, y, gray, dark); y += 9;
+  infoRow(doc, 'Classes',         'Normal Speech / Stuttered Speech', 16, y, gray, dark); y += 16;
+
+  // Disclaimer
+  doc.setFillColor(255, 247, 237);
+  doc.roundedRect(16, y, W - 32, 18, 4, 4, 'F');
+  doc.setTextColor(180, 100, 20);
+  doc.setFontSize(8);
+  doc.setFont('helvetica', 'italic');
+  doc.text('This report is generated by an AI system for educational/research purposes only. It does not constitute a medical diagnosis.', W / 2, y + 7, { align: 'center', maxWidth: W - 40 });
+  doc.text('Consult a qualified speech-language pathologist for clinical evaluation.', W / 2, y + 13, { align: 'center' });
+  y += 26;
+
+  // Footer
+  doc.setFillColor(...dark);
+  doc.rect(0, H - 18, W, 18, 'F');
+  doc.setTextColor(148, 163, 184);
+  doc.setFontSize(8);
+  doc.setFont('helvetica', 'normal');
+  doc.text('SpeakFlow AI  ·  The University of Faisalabad  ·  BS Software Engineering', W / 2, H - 7, { align: 'center' });
+
+  doc.save(`SpeakFlow_Report_${Date.now()}.pdf`);
+  showToast('📄 PDF report downloaded!', 'success');
+}
+
+function sectionHeader(doc, title, fontSize, y, W, dark, light) {
+  doc.setFillColor(...light);
+  doc.rect(0, y, W, 12, 'F');
+  doc.setTextColor(...dark);
+  doc.setFontSize(fontSize - 2);
+  doc.setFont('helvetica', 'bold');
+  doc.text(title, 16, y + 8);
+}
+
+function infoRow(doc, label, value, x, y, gray, dark) {
+  doc.setTextColor(...gray);
+  doc.setFontSize(8);
+  doc.setFont('helvetica', 'normal');
+  doc.text(label + ':', x, y);
+  doc.setTextColor(...dark);
+  doc.setFont('helvetica', 'bold');
+  doc.text(value, x + 56, y);
+}
+
+/* ─── ANIMATED COUNTERS ─────────────────────────────────────── */
+(function initCounters() {
+  const statCards = $$('.stat-card');
+  const observer  = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        animateCounter(entry.target);
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.4 });
+
+  statCards.forEach(card => observer.observe(card));
+})();
+
+function animateCounter(card) {
+  const target = parseInt(card.dataset.count);
+  const suffix = card.dataset.suffix || '';
+  const el     = card.querySelector('.stat-number');
+  const duration = 1800;
+  const start    = performance.now();
+
+  function update(now) {
+    const progress = Math.min((now - start) / duration, 1);
+    const ease     = 1 - Math.pow(1 - progress, 3); // cubic ease-out
+    const current  = Math.round(ease * target);
+    el.textContent = current.toLocaleString() + suffix;
+    if (progress < 1) requestAnimationFrame(update);
+  }
+  requestAnimationFrame(update);
+}
+
+/* ─── TOAST NOTIFICATIONS ────────────────────────────────────── */
+function showToast(message, type = 'info') {
+  // Remove existing toasts
+  $$('.toast').forEach(t => t.remove());
+
+  const toast = document.createElement('div');
+  toast.className = 'toast';
+  const colors = { success: '#10B981', error: '#EF4444', info: '#2563EB' };
+  toast.style.cssText = `
+    position: fixed;
+    bottom: 90px;
+    right: 24px;
+    background: var(--surface);
+    border: 1px solid ${colors[type] || colors.info};
+    border-left: 4px solid ${colors[type] || colors.info};
+    color: var(--text);
+    padding: 14px 20px;
+    border-radius: 12px;
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+    font-weight: 500;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+    z-index: 99999;
+    max-width: 320px;
+    animation: slideIn 0.3s ease;
+  `;
+  toast.textContent = message;
+
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+    @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
+  `;
+  if (!document.getElementById('toastStyle')) {
+    style.id = 'toastStyle';
+    document.head.appendChild(style);
+  }
+
+  document.body.appendChild(toast);
+  setTimeout(() => {
+    toast.style.animation = 'slideOut 0.3s ease forwards';
+    setTimeout(() => toast.remove(), 300);
+  }, 3500);
+}
+
+/* ─── SMOOTH SCROLL FOR ANCHOR LINKS ────────────────────────── */
+$$('a[href^="#"]').forEach(a => {
+  a.addEventListener('click', e => {
+    const target = document.querySelector(a.getAttribute('href'));
+    if (target) {
+      e.preventDefault();
+      const offset = 80; // navbar height
+      const top = target.getBoundingClientRect().top + window.scrollY - offset;
+      window.scrollTo({ top, behavior: 'smooth' });
+    }
+  });
+});
+
+/* ─── SCROLL REVEAL ─────────────────────────────────────────── */
+(function initScrollReveal() {
+  const elements = $$('.overview-card, .timeline-item, .stat-card, .score-card, .chart-card');
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.style.opacity  = '1';
+        entry.target.style.transform = 'translateY(0)';
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.12 });
+
+  elements.forEach((el, i) => {
+    el.style.opacity   = '0';
+    el.style.transform = 'translateY(24px)';
+    el.style.transition = `opacity 0.5s ease ${i * 0.06}s, transform 0.5s ease ${i * 0.06}s`;
+    observer.observe(el);
+  });
+})();
+
+/* ─── INIT ──────────────────────────────────────────────────── */
+console.log('%cSpeakFlow AI Initialized ✓', 'color: #2563EB; font-weight: bold; font-size: 14px;');
+
+/* ============================================================
+   SpeakFlow AI – Analysis History Storage (Auth Integration)
+   ============================================================ */
+(function patchAnalysisStorage() {
+  const observer = new MutationObserver(() => {
+    const resultSection =
+      document.getElementById('resultSection') ||
+      document.querySelector('.result-section') ||
+      document.querySelector('[id*="result"]');
+
+    if (!resultSection) return;
+
+    const innerObs = new MutationObserver(() => {
+      saveAnalysisToHistory();
+    });
+
+    innerObs.observe(resultSection, {
+      childList: true,
+      subtree: true
+    });
+
+    observer.disconnect();
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+
+  function saveAnalysisToHistory() {
+    try {
+      const session = JSON.parse(localStorage.getItem('sf_session') || 'null');
+      if (!session || !session.loggedIn) return;
+
+      const resultEl = document.querySelector('.result-label, .detection-result, [class*="result"]');
+      const confEl   = document.querySelector('.confidence-score, [class*="confidence"]');
+      const fileEl   = document.querySelector('.file-name, [class*="filename"]');
+
+      const resultText = resultEl ? resultEl.textContent.trim() : null;
+      if (!resultText || resultText.length < 3) return;
+
+      if (resultEl.dataset.saved === '1') return;
+      resultEl.dataset.saved = '1';
+
+      const history = JSON.parse(localStorage.getItem('sf_analysis_history') || '[]');
+
+      history.push({
+        id: 'ana_' + Date.now(),
+        userId: session.id || '',
+        userName: session.name || 'Unknown',
+        userEmail: session.email || '',
+        fileName: fileEl ? fileEl.textContent.trim() : ('recording_' + Date.now() + '.wav'),
+        date: new Date().toISOString(),
+        result: resultText.includes('Normal') ? 'Normal' : 'Stutter Detected',
+        confidence: confEl ? parseInt(confEl.textContent) || 85 : 85,
+      });
+
+      localStorage.setItem('sf_analysis_history', JSON.stringify(history));
+    } catch (err) {
+      console.warn('SpeakFlow: could not save analysis to history', err);
+    }
+  }
+})();
+
+/* ============================================================
+   BACKEND INTEGRATION
+   ============================================================ */
+
+async function sendToBackend(file, fileName = "audio.wav") {
+  const overlay = $('#loadingOverlay');
+  const bar = $('#progressBar');
+  const pct = $('#progressPct');
+
+  if (overlay) overlay.style.display = 'flex';
+  if (bar) bar.style.width = '30%';
+  if (pct) pct.textContent = '30%';
+
+  try {
+    const formData = new FormData();
+
+    if (file instanceof Blob) {
+      formData.append("file", file, fileName);
+    } else {
+      formData.append("file", file);
+    }
+
+    const res = await fetch(`${API_BASE}/api/predict`, {
+      method: "POST",
+      body: formData
+    });
+
+    if (!res.ok) throw new Error("Server error");
+
+    if (bar) bar.style.width = '80%';
+    if (pct) pct.textContent = '80%';
+
+    const data = await res.json();
+
+    const result = {
+      fileName: fileName || currentFile?.name || "recording",
+      date: new Date().toLocaleString(),
+      isNormal: data.isNormal,
+      confidence: data.confidence,
+      fluency: data.fluency,
+      processingMs: data.processingMs,
+      normalProb: data.normalProb,
+      stutterProb: data.stutterProb
+    };
+
+    currentResult = result;
+
+    renderResults(result);
+    saveToHistory(result);
+    renderHistory();
+
+    if (bar) bar.style.width = '100%';
+    if (pct) pct.textContent = '100%';
+
+    setTimeout(() => {
+      if (overlay) overlay.style.display = 'none';
+    }, 400);
+
+    showToast("Analysis complete!", "success");
+
+  } catch (err) {
+    console.error(err);
+    if (overlay) overlay.style.display = 'none';
+    showToast("Flask backend not running or API error", "error");
+  }
+}

session.js

@@ -0,0 +1,179 @@
+/* ============================================================
+   SpeakFlow AI – session.js
+   Shared session management for index.html
+   ============================================================ */
+'use strict';
+
+(function initSession() {
+  const session = JSON.parse(localStorage.getItem('sf_session') || 'null');
+
+  // Route protection – redirect to login if not logged in
+  if (!session || !session.loggedIn) {
+    window.location.href = 'login.html';
+    return;
+  }
+
+  // Show user info in navbar
+  const info = document.getElementById('navUserInfo');
+  const nameEl = document.getElementById('navUserName');
+  if (info && nameEl) {
+    nameEl.textContent = session.name || 'User';
+    info.style.display = 'flex';
+  }
+
+  // Profile button → open profile modal
+  const profileBtn = document.getElementById('navProfileBtn');
+  if (profileBtn) {
+    profileBtn.addEventListener('click', openProfileModal);
+  }
+
+  // Logout
+  const logoutBtn = document.getElementById('navLogoutBtn');
+  if (logoutBtn) {
+    logoutBtn.addEventListener('click', () => {
+      localStorage.removeItem('sf_session');
+      window.location.href = 'login.html';
+    });
+  }
+
+  // ── Profile Modal ────────────────────────────────────────
+  function openProfileModal() {
+    if (document.getElementById('sfProfileModal')) return;
+
+    const users = JSON.parse(localStorage.getItem('sf_users') || '[]');
+    const user = users.find(u => u.email === session.email) || {};
+    const history = JSON.parse(localStorage.getItem('sf_analysis_history') || '[]');
+    const userAnalyses = history.filter(h => h.userEmail === session.email).length;
+
+    const modal = document.createElement('div');
+    modal.id = 'sfProfileModal';
+    modal.innerHTML = `
+      <div class="sf-modal-overlay" id="sfModalOverlay">
+        <div class="sf-modal-box glass-card">
+          <div class="sf-modal-header">
+            <div class="sf-modal-avatar"><i class="fas fa-user-circle"></i></div>
+            <h2>My Profile</h2>
+            <button class="sf-modal-close" id="sfModalClose"><i class="fas fa-times"></i></button>
+          </div>
+          <div class="sf-modal-body" id="sfProfileView">
+            <div class="sf-profile-row"><span><i class="fas fa-user"></i> Full Name</span><strong id="pName">${session.name}</strong></div>
+            <div class="sf-profile-row"><span><i class="fas fa-envelope"></i> Email</span><strong>${session.email}</strong></div>
+            <div class="sf-profile-row"><span><i class="fas fa-chart-bar"></i> Total Analyses</span><strong>${userAnalyses}</strong></div>
+            <div class="sf-profile-row"><span><i class="fas fa-calendar-alt"></i> Member Since</span><strong>${user.createdAt ? new Date(user.createdAt).toLocaleDateString() : 'N/A'}</strong></div>
+            <div class="sf-modal-actions">
+              <button class="btn btn-primary" id="sfEditProfileBtn"><i class="fas fa-edit"></i> Edit Profile</button>
+              <button class="btn btn-outline" id="sfChangePassBtn"><i class="fas fa-key"></i> Change Password</button>
+            </div>
+          </div>
+          <div class="sf-modal-body" id="sfEditView" style="display:none;">
+            <label>Full Name</label>
+            <input class="sf-input" type="text" id="sfNewName" value="${session.name}" placeholder="Full Name" />
+            <div class="sf-modal-actions">
+              <button class="btn btn-primary" id="sfSaveNameBtn"><i class="fas fa-save"></i> Save Changes</button>
+              <button class="btn btn-ghost" id="sfCancelEditBtn"><i class="fas fa-arrow-left"></i> Back</button>
+            </div>
+            <p id="sfEditMsg" style="color:var(--green);margin-top:8px;display:none;"></p>
+          </div>
+          <div class="sf-modal-body" id="sfPassView" style="display:none;">
+            <label>Current Password</label>
+            <input class="sf-input" type="password" id="sfOldPass" placeholder="Current password" />
+            <label>New Password</label>
+            <input class="sf-input" type="password" id="sfNewPass" placeholder="New password" />
+            <label>Confirm New Password</label>
+            <input class="sf-input" type="password" id="sfConfPass" placeholder="Confirm new password" />
+            <div class="sf-modal-actions">
+              <button class="btn btn-primary" id="sfSavePassBtn"><i class="fas fa-save"></i> Update Password</button>
+              <button class="btn btn-ghost" id="sfCancelPassBtn"><i class="fas fa-arrow-left"></i> Back</button>
+            </div>
+            <p id="sfPassMsg" style="margin-top:8px;display:none;"></p>
+          </div>
+        </div>
+      </div>`;
+    document.body.appendChild(modal);
+
+    // inject modal CSS if not already
+    if (!document.getElementById('sfModalStyle')) {
+      const s = document.createElement('style');
+      s.id = 'sfModalStyle';
+      s.textContent = `
+        #sfProfileModal { position:fixed;inset:0;z-index:9999; }
+        .sf-modal-overlay { position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px; }
+        .sf-modal-box { background:var(--surface);border-radius:24px;padding:32px;width:100%;max-width:480px;position:relative;box-shadow:var(--shadow-lg); }
+        .sf-modal-header { display:flex;align-items:center;gap:16px;margin-bottom:24px; }
+        .sf-modal-avatar { font-size:2.5rem;color:var(--blue); }
+        .sf-modal-header h2 { font-size:1.4rem;font-weight:700;flex:1; }
+        .sf-modal-close { background:var(--surface-2);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;border:none;color:var(--text-muted); }
+        .sf-profile-row { display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:0.95rem; }
+        .sf-profile-row span { color:var(--text-muted);display:flex;align-items:center;gap:8px; }
+        .sf-modal-actions { display:flex;gap:12px;margin-top:24px;flex-wrap:wrap; }
+        .sf-input { width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:0.95rem;margin-bottom:16px;margin-top:4px;outline:none; }
+        .sf-input:focus { border-color:var(--blue); }
+        .sf-modal-body label { font-size:0.85rem;font-weight:600;color:var(--text-muted); }
+        .nav-user-info { display:flex;align-items:center;gap:8px; }
+        .btn-user-profile { display:flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(37,99,235,0.1);border-radius:50px;color:var(--blue);font-weight:600;font-size:0.9rem;cursor:pointer;border:none;transition:all .2s; }
+        .btn-user-profile:hover { background:rgba(37,99,235,0.2); }
+        .btn-logout { display:flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(239,68,68,0.1);border-radius:50px;color:var(--red);font-weight:600;font-size:0.9rem;cursor:pointer;border:none;transition:all .2s; }
+        .btn-logout:hover { background:rgba(239,68,68,0.2); }
+      `;
+      document.head.appendChild(s);
+    }
+
+    document.getElementById('sfModalClose').onclick = closeModal;
+    document.getElementById('sfModalOverlay').onclick = (e) => { if(e.target.id==='sfModalOverlay') closeModal(); };
+
+    document.getElementById('sfEditProfileBtn').onclick = () => {
+      document.getElementById('sfProfileView').style.display = 'none';
+      document.getElementById('sfEditView').style.display = 'block';
+    };
+    document.getElementById('sfCancelEditBtn').onclick = () => {
+      document.getElementById('sfEditView').style.display = 'none';
+      document.getElementById('sfProfileView').style.display = 'block';
+    };
+    document.getElementById('sfSaveNameBtn').onclick = () => {
+      const newName = document.getElementById('sfNewName').value.trim();
+      if (!newName) return;
+      // Update user in localStorage
+      const users2 = JSON.parse(localStorage.getItem('sf_users') || '[]');
+      const idx = users2.findIndex(u => u.email === session.email);
+      if (idx !== -1) { users2[idx].name = newName; localStorage.setItem('sf_users', JSON.stringify(users2)); }
+      session.name = newName;
+      localStorage.setItem('sf_session', JSON.stringify(session));
+      document.getElementById('navUserName').textContent = newName;
+      document.getElementById('pName').textContent = newName;
+      const msg = document.getElementById('sfEditMsg');
+      msg.textContent = '✅ Name updated successfully!';
+      msg.style.display = 'block';
+    };
+
+    document.getElementById('sfChangePassBtn').onclick = () => {
+      document.getElementById('sfProfileView').style.display = 'none';
+      document.getElementById('sfPassView').style.display = 'block';
+    };
+    document.getElementById('sfCancelPassBtn').onclick = () => {
+      document.getElementById('sfPassView').style.display = 'none';
+      document.getElementById('sfProfileView').style.display = 'block';
+    };
+    document.getElementById('sfSavePassBtn').onclick = () => {
+      const old = document.getElementById('sfOldPass').value;
+      const nw = document.getElementById('sfNewPass').value;
+      const conf = document.getElementById('sfConfPass').value;
+      const msg = document.getElementById('sfPassMsg');
+      const users3 = JSON.parse(localStorage.getItem('sf_users') || '[]');
+      const idx = users3.findIndex(u => u.email === session.email);
+      if (idx === -1 || users3[idx].password !== old) {
+        msg.textContent = '❌ Current password is incorrect.'; msg.style.color='var(--red)'; msg.style.display='block'; return;
+      }
+      if (nw.length < 6) { msg.textContent = '❌ Password must be at least 6 characters.'; msg.style.color='var(--red)'; msg.style.display='block'; return; }
+      if (nw !== conf) { msg.textContent = '❌ Passwords do not match.'; msg.style.color='var(--red)'; msg.style.display='block'; return; }
+      users3[idx].password = nw;
+      localStorage.setItem('sf_users', JSON.stringify(users3));
+      msg.textContent = '✅ Password updated!'; msg.style.color='var(--green)'; msg.style.display='block';
+    };
+  }
+
+  function closeModal() {
+    const m = document.getElementById('sfProfileModal');
+    if (m) m.remove();
+  }
+
+})();

style.css

@@ -0,0 +1,918 @@
+/* ============================================================
+   SpeakFlow AI – style.css
+   Modern AI Healthcare Platform
+   ============================================================ */
+
+/* ─── CSS CUSTOM PROPERTIES ─────────────────────────────── */
+:root {
+  --blue:        #2563EB;
+  --blue-light:  #3B82F6;
+  --blue-dark:   #1D4ED8;
+  --teal:        #14B8A6;
+  --teal-light:  #2DD4BF;
+  --purple:      #7C3AED;
+  --purple-light:#A78BFA;
+  --green:       #10B981;
+  --orange:      #F59E0B;
+  --red:         #EF4444;
+  --red-light:   #FCA5A5;
+
+  --bg:          #F8FAFC;
+  --bg-alt:      #EEF2FF;
+  --surface:     #FFFFFF;
+  --surface-2:   #F1F5F9;
+  --border:      #E2E8F0;
+  --text:        #1E293B;
+  --text-muted:  #64748B;
+  --text-light:  #94A3B8;
+
+  --radius-sm:   8px;
+  --radius:      16px;
+  --radius-lg:   24px;
+  --radius-xl:   32px;
+
+  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
+  --shadow:      0 4px 16px rgba(0,0,0,0.10);
+  --shadow-lg:   0 16px 48px rgba(0,0,0,0.12);
+  --shadow-glow: 0 0 32px rgba(37,99,235,0.25);
+
+  --font-display: 'Space Grotesk', sans-serif;
+  --font-body:    'Inter', sans-serif;
+
+  --transition:  0.25s ease;
+}
+
+[data-theme="dark"] {
+  --bg:          #0F172A;
+  --bg-alt:      #1E1B4B;
+  --surface:     #1E293B;
+  --surface-2:   #263148;
+  --border:      #334155;
+  --text:        #F1F5F9;
+  --text-muted:  #94A3B8;
+  --text-light:  #64748B;
+  --shadow:      0 4px 16px rgba(0,0,0,0.40);
+  --shadow-lg:   0 16px 48px rgba(0,0,0,0.50);
+}
+
+/* ─── RESET ─────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body {
+  font-family: var(--font-body);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  transition: background var(--transition), color var(--transition);
+}
+img { max-width: 100%; display: block; }
+a { color: inherit; text-decoration: none; }
+button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }
+ul { list-style: none; }
+canvas { display: block; }
+
+/* ─── UTILITY ────────────────────────────────────────────── */
+.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
+.gradient-text {
+  background: linear-gradient(135deg, var(--blue), var(--teal));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.mt-16 { margin-top: 16px; }
+.text-muted { color: var(--text-muted); }
+
+/* ─── BUTTONS ────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 50px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.btn-primary {
+  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
+  color: #fff;
+  box-shadow: 0 4px 20px rgba(37,99,235,0.30);
+}
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(37,99,235,0.40);
+}
+.btn-outline {
+  border: 2px solid var(--blue);
+  color: var(--blue);
+  background: transparent;
+}
+.btn-outline:hover {
+  background: var(--blue);
+  color: #fff;
+  transform: translateY(-2px);
+}
+.btn-ghost {
+  background: var(--surface-2);
+  color: var(--text-muted);
+  border-radius: 50px;
+}
+.btn-ghost:hover { background: var(--border); color: var(--text); }
+.btn-danger {
+  background: var(--red);
+  color: #fff;
+  border-radius: 50px;
+}
+.btn-danger:hover { background: #DC2626; }
+.btn-sm { padding: 8px 18px; font-size: 0.875rem; }
+.btn-lg { padding: 16px 36px; font-size: 1.05rem; }
+
+/* ─── NAVBAR ─────────────────────────────────────────────── */
+.navbar {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  z-index: 1000;
+  background: rgba(255,255,255,0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  transition: background var(--transition);
+}
+[data-theme="dark"] .navbar {
+  background: rgba(15,23,42,0.90);
+}
+.nav-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 16px 24px;
+}
+.nav-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--font-display);
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.nav-logo i { color: var(--blue); font-size: 1.5rem; }
+.logo-ai { color: var(--blue); }
+.nav-links {
+  display: flex;
+  gap: 4px;
+}
+.nav-links a {
+  padding: 8px 14px;
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  transition: all var(--transition);
+}
+.nav-links a:hover { color: var(--blue); background: var(--bg-alt); }
+.nav-actions { display: flex; align-items: center; gap: 12px; }
+.dark-mode-toggle {
+  width: 40px; height: 40px;
+  border-radius: 50%;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 1rem;
+  display: flex; align-items: center; justify-content: center;
+  transition: all var(--transition);
+}
+.dark-mode-toggle:hover { color: var(--blue); border-color: var(--blue); }
+.hamburger {
+  display: none;
+  width: 40px; height: 40px;
+  align-items: center; justify-content: center;
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: 1.1rem;
+}
+
+/* ─── SECTIONS ───────────────────────────────────────────── */
+.section { padding: 96px 0; }
+.section-alt { background: var(--bg-alt); }
+[data-theme="dark"] .section-alt { background: rgba(124,58,237,0.05); }
+
+.section-header { text-align: center; margin-bottom: 56px; }
+.section-eyebrow {
+  display: inline-block;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--blue);
+  background: rgba(37,99,235,0.10);
+  padding: 6px 16px;
+  border-radius: 50px;
+  margin-bottom: 16px;
+}
+.section-title {
+  font-family: var(--font-display);
+  font-size: clamp(1.8rem, 3vw, 2.6rem);
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 16px;
+  line-height: 1.25;
+}
+.section-desc { font-size: 1.05rem; color: var(--text-muted); max-width: 520px; margin: 0 auto; }
+
+/* ─── HERO ───────────────────────────────────────────────── */
+.hero {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  padding: 120px 0 80px;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(145deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%);
+}
+.particles {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+.particle {
+  position: absolute;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(37,99,235,0.6), transparent);
+  animation: floatParticle linear infinite;
+}
+@keyframes floatParticle {
+  0%   { transform: translateY(0) scale(1); opacity: 0.6; }
+  50%  { opacity: 0.2; }
+  100% { transform: translateY(-120vh) scale(0.5); opacity: 0; }
+}
+
+.hero-container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 64px;
+  position: relative;
+  z-index: 1;
+}
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(37,99,235,0.20);
+  border: 1px solid rgba(37,99,235,0.40);
+  color: #93C5FD;
+  padding: 6px 16px;
+  border-radius: 50px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+.hero-title {
+  font-family: var(--font-display);
+  font-size: clamp(2.4rem, 5vw, 3.6rem);
+  font-weight: 700;
+  color: #fff;
+  line-height: 1.15;
+  margin-bottom: 24px;
+}
+.hero-subtitle {
+  font-size: 1.1rem;
+  color: #94A3B8;
+  margin-bottom: 40px;
+  max-width: 480px;
+  line-height: 1.7;
+}
+.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
+.hero-stats {
+  display: flex;
+  gap: 32px;
+  flex-wrap: wrap;
+}
+.hero-stat span {
+  display: block;
+  font-family: var(--font-display);
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: #fff;
+}
+.hero-stat label { font-size: 0.8rem; color: #64748B; }
+
+/* AI Sphere */
+.hero-visual { display: flex; flex-direction: column; align-items: center; gap: 32px; }
+.ai-sphere {
+  position: relative;
+  width: 240px; height: 240px;
+  display: flex; align-items: center; justify-content: center;
+}
+.sphere-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid transparent;
+}
+.ring-1 {
+  width: 240px; height: 240px;
+  border-color: rgba(37,99,235,0.30);
+  animation: spinRing 8s linear infinite;
+}
+.ring-2 {
+  width: 180px; height: 180px;
+  border-color: rgba(20,184,166,0.40);
+  animation: spinRing 5s linear infinite reverse;
+}
+.ring-3 {
+  width: 120px; height: 120px;
+  border-color: rgba(124,58,237,0.50);
+  animation: spinRing 3s linear infinite;
+}
+@keyframes spinRing {
+  from { transform: rotateY(0deg) rotateX(20deg); }
+  to   { transform: rotateY(360deg) rotateX(20deg); }
+}
+.sphere-core {
+  width: 80px; height: 80px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--blue), var(--purple));
+  display: flex; align-items: center; justify-content: center;
+  font-size: 2rem; color: #fff;
+  box-shadow: 0 0 40px rgba(37,99,235,0.50);
+  animation: pulse 2s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(37,99,235,0.50); }
+  50%       { transform: scale(1.05); box-shadow: 0 0 60px rgba(37,99,235,0.70); }
+}
+.waveform-container {
+  width: 100%;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.10);
+  border-radius: var(--radius);
+  padding: 12px;
+  backdrop-filter: blur(10px);
+}
+
+/* ─── OVERVIEW GRID ──────────────────────────────────────── */
+.overview-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 20px;
+}
+.overview-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 28px 20px;
+  text-align: center;
+  transition: all var(--transition);
+  position: relative;
+  overflow: hidden;
+}
+.overview-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--blue), var(--teal));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--transition);
+}
+.overview-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
+.overview-card:hover::before { transform: scaleX(1); }
+.card-icon {
+  width: 52px; height: 52px;
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1.4rem;
+  margin: 0 auto 16px;
+}
+.icon-blue   { background: rgba(37,99,235,0.12);  color: var(--blue);   }
+.icon-teal   { background: rgba(20,184,166,0.12); color: var(--teal);   }
+.icon-purple { background: rgba(124,58,237,0.12); color: var(--purple); }
+.icon-green  { background: rgba(16,185,129,0.12); color: var(--green);  }
+.icon-orange { background: rgba(245,158,11,0.12); color: var(--orange); }
+
+.overview-card h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
+.overview-card p  { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
+.card-tag {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 50px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: rgba(37,99,235,0.10);
+  color: var(--blue);
+}
+
+/* ─── ANALYSIS SECTION ───────────────────────────────────── */
+.analysis-layout {
+  display: grid;
+  grid-template-columns: 1fr 380px;
+  gap: 32px;
+  align-items: start;
+}
+.upload-panel { display: flex; flex-direction: column; gap: 20px; }
+
+.drop-zone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  padding: 56px 32px;
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--transition);
+  position: relative;
+}
+.drop-zone.drag-over {
+  border-color: var(--blue);
+  background: rgba(37,99,235,0.05);
+  transform: scale(1.01);
+}
+.drop-icon {
+  font-size: 3rem;
+  color: var(--blue);
+  margin-bottom: 16px;
+  animation: float 3s ease-in-out infinite;
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50%       { transform: translateY(-8px); }
+}
+.drop-zone h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
+.drop-zone p  { color: var(--text-muted); margin-bottom: 20px; font-size: 0.95rem; }
+
+.file-preview {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.file-icon {
+  width: 52px; height: 52px;
+  background: rgba(37,99,235,0.10);
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--blue);
+  font-size: 1.4rem;
+  flex-shrink: 0;
+}
+.file-name { font-weight: 600; font-size: 0.95rem; display: block; margin-bottom: 4px; }
+.file-meta { font-size: 0.82rem; color: var(--text-muted); display: flex; gap: 8px; }
+.file-remove {
+  margin-left: auto;
+  width: 34px; height: 34px;
+  border-radius: 50%;
+  background: rgba(239,68,68,0.10);
+  color: var(--red);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1rem;
+  transition: all var(--transition);
+  flex-shrink: 0;
+}
+.file-remove:hover { background: var(--red); color: #fff; }
+audio { width: 100%; border-radius: var(--radius-sm); }
+.action-buttons { display: flex; gap: 12px; }
+
+.upload-info {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+}
+.upload-info h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: var(--blue); }
+.info-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
+.info-list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
+.info-list li i { color: var(--green); }
+.format-chips { display: flex; gap: 8px; }
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 14px;
+  border-radius: 50px;
+  font-size: 0.82rem; font-weight: 600;
+}
+.chip-blue   { background: rgba(37,99,235,0.12);  color: var(--blue); }
+.chip-teal   { background: rgba(20,184,166,0.12); color: var(--teal); }
+
+/* ─── LOADING OVERLAY ────────────────────────────────────── */
+.loading-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(15,23,42,0.90);
+  backdrop-filter: blur(10px);
+  display: flex; align-items: center; justify-content: center;
+}
+.loading-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: 48px 40px;
+  max-width: 440px;
+  width: 90%;
+  text-align: center;
+  box-shadow: var(--shadow-lg);
+}
+.loading-sphere {
+  width: 80px; height: 80px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--blue), var(--purple));
+  display: flex; align-items: center; justify-content: center;
+  font-size: 2rem; color: #fff;
+  margin: 0 auto 24px;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.loading-card h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 8px; }
+.loading-card p  { color: var(--text-muted); margin-bottom: 28px; }
+.progress-bar-wrap {
+  background: var(--surface-2);
+  border-radius: 50px;
+  height: 8px;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--blue), var(--teal));
+  border-radius: 50px;
+  width: 0%;
+  transition: width 0.3s ease;
+}
+.progress-pct { font-family: var(--font-display); font-weight: 700; color: var(--blue); margin-bottom: 28px; }
+.loading-steps { text-align: left; display: flex; flex-direction: column; gap: 12px; }
+.step { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--text-muted); }
+.step.done { color: var(--green); }
+.step.done i::before { content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
+.step.active { color: var(--blue); }
+
+/* ─── RECORDER ───────────────────────────────────────────── */
+.recorder-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: 40px;
+  max-width: 680px;
+  margin: 0 auto;
+  text-align: center;
+  box-shadow: var(--shadow);
+}
+.recorder-top { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; }
+.timer-display {
+  font-family: var(--font-display);
+  font-size: 2.4rem;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: 0.05em;
+}
+.rec-indicator {
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  background: var(--text-light);
+  transition: background var(--transition);
+}
+.rec-indicator.recording {
+  background: var(--red);
+  animation: blink 1s ease-in-out infinite;
+}
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
+
+#liveWaveform { width: 100%; border-radius: var(--radius); margin-bottom: 28px; }
+.recorder-controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+.rec-btn {
+  padding: 12px 20px;
+  border-radius: 50px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  display: flex; align-items: center; gap: 8px;
+  transition: all var(--transition);
+  border: 2px solid transparent;
+}
+.btn-start { background: linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; }
+.btn-start:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.35); }
+.btn-stop  { background: rgba(239,68,68,0.12); color: var(--red); border-color: var(--red); }
+.btn-stop:hover:not(:disabled)  { background: var(--red); color:#fff; }
+.btn-play  { background: rgba(16,185,129,0.12); color: var(--green); border-color: var(--green); }
+.btn-play:hover:not(:disabled)  { background: var(--green); color:#fff; }
+.btn-delete{ background: rgba(245,158,11,0.12); color: var(--orange); border-color: var(--orange); }
+.btn-delete:hover:not(:disabled){ background: var(--orange); color:#fff; }
+.rec-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+
+/* ─── RESULTS ────────────────────────────────────────────── */
+.results-placeholder {
+  text-align: center;
+  padding: 80px 20px;
+  color: var(--text-muted);
+}
+.results-placeholder i { font-size: 4rem; margin-bottom: 16px; color: var(--border); }
+.results-content { display: flex; flex-direction: column; gap: 32px; }
+.results-grid { display: flex; flex-direction: column; gap: 24px; }
+
+.prediction-card {
+  border-radius: var(--radius-lg);
+  padding: 36px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+.prediction-card.normal {
+  background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(20,184,166,0.10));
+  border: 2px solid rgba(16,185,129,0.40);
+}
+.prediction-card.stutter {
+  background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(245,158,11,0.10));
+  border: 2px solid rgba(239,68,68,0.40);
+}
+.pred-icon { font-size: 3rem; }
+.pred-label { font-family: var(--font-display); font-size: 2rem; font-weight: 700; }
+.pred-sublabel { font-size: 0.95rem; color: var(--text-muted); }
+
+.score-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+.score-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px 20px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+.score-value {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--blue);
+  margin-bottom: 6px;
+}
+.score-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 500; }
+.score-icon {
+  position: absolute;
+  top: 16px; right: 16px;
+  font-size: 1rem;
+  color: var(--border);
+}
+
+.charts-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+.chart-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px 16px;
+  text-align: center;
+}
+.chart-card h4 {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+}
+.chart-card canvas { width: 100% !important; }
+
+.waveform-result-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+}
+.waveform-result-card h4 { font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
+#resultWaveform { width: 100% !important; }
+
+.report-section { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
+
+/* ─── HISTORY ────────────────────────────────────────────── */
+.history-controls { display: flex; gap: 16px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
+.search-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 50px;
+  padding: 10px 20px;
+  min-width: 220px;
+}
+.search-box i { color: var(--text-muted); }
+.search-box input {
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--text);
+  font-size: 0.9rem;
+  width: 100%;
+  font-family: var(--font-body);
+}
+.history-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
+.history-table { width: 100%; border-collapse: collapse; }
+.history-table thead { background: var(--bg-alt); }
+.history-table th {
+  padding: 14px 20px;
+  text-align: left;
+  font-size: 0.82rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+.history-table td { padding: 14px 20px; font-size: 0.9rem; border-top: 1px solid var(--border); }
+.history-table tbody tr:hover { background: var(--bg-alt); }
+.badge {
+  display: inline-block;
+  padding: 3px 12px;
+  border-radius: 50px;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+.badge-normal  { background: rgba(16,185,129,0.15); color: var(--green); }
+.badge-stutter { background: rgba(239,68,68,0.15);  color: var(--red);   }
+.history-empty {
+  display: none;
+  text-align: center;
+  padding: 60px;
+  color: var(--text-muted);
+}
+.history-empty i { font-size: 3rem; margin-bottom: 14px; color: var(--border); }
+.delete-row-btn {
+  background: rgba(239,68,68,0.10);
+  color: var(--red);
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: all var(--transition);
+}
+.delete-row-btn:hover { background: var(--red); color: #fff; }
+
+/* ─── TIMELINE ───────────────────────────────────────────── */
+.timeline { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
+.timeline-item {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  gap: 24px;
+  position: relative;
+}
+.timeline-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 27px;
+  top: 56px;
+  bottom: -24px;
+  width: 2px;
+  background: var(--border);
+}
+.timeline-dot {
+  width: 56px; height: 56px;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1.2rem;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+.dot-blue   { background: rgba(37,99,235,0.15);  color: var(--blue);   border: 2px solid var(--blue);   }
+.dot-teal   { background: rgba(20,184,166,0.15); color: var(--teal);   border: 2px solid var(--teal);   }
+.dot-purple { background: rgba(124,58,237,0.15); color: var(--purple); border: 2px solid var(--purple); }
+.dot-green  { background: rgba(16,185,129,0.15); color: var(--green);  border: 2px solid var(--green);  }
+.dot-orange { background: rgba(245,158,11,0.15); color: var(--orange); border: 2px solid var(--orange); }
+
+.timeline-content { padding: 8px 0 40px; }
+.timeline-step {
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--blue);
+  margin-bottom: 8px;
+}
+.timeline-content h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; }
+.timeline-content p  { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }
+
+/* ─── STATS SECTION ──────────────────────────────────────── */
+.stats-section {
+  background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%);
+}
+.stats-section .section-eyebrow { background: rgba(37,99,235,0.25); color: #93C5FD; }
+.stats-section .section-title { color: #fff; }
+.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
+.stat-card {
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.10);
+  border-radius: var(--radius-lg);
+  padding: 36px 24px;
+  text-align: center;
+  backdrop-filter: blur(10px);
+  transition: all var(--transition);
+}
+.stat-card:hover { transform: translateY(-6px); background: rgba(37,99,235,0.15); }
+.stat-icon { font-size: 2rem; color: var(--teal); margin-bottom: 16px; }
+.stat-number {
+  font-family: var(--font-display);
+  font-size: 2.8rem;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 8px;
+}
+.stat-label { color: #94A3B8; font-size: 0.9rem; }
+
+/* ─── FOOTER ─────────────────────────────────────────────── */
+.footer { background: #020617; color: #94A3B8; padding: 64px 0 32px; }
+.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 48px; }
+.footer-brand .nav-logo { color: #fff; margin-bottom: 16px; }
+.footer-brand p { font-size: 0.9rem; line-height: 1.7; max-width: 320px; }
+.footer-info { display: flex; gap: 48px; }
+.footer-block h4 { color: #fff; font-weight: 600; margin-bottom: 10px; }
+.footer-block p { font-size: 0.9rem; line-height: 1.8; }
+.footer-bottom {
+  border-top: 1px solid rgba(255,255,255,0.08);
+  padding-top: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.footer-copy { font-size: 0.85rem; }
+.footer-socials { display: flex; gap: 12px; }
+.social-link {
+  width: 40px; height: 40px;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,0.15);
+  display: flex; align-items: center; justify-content: center;
+  color: #94A3B8;
+  transition: all var(--transition);
+}
+.social-link:hover { border-color: var(--blue); color: var(--blue); background: rgba(37,99,235,0.10); }
+
+/* ─── SCROLL TO TOP ──────────────────────────────────────── */
+.scroll-top {
+  position: fixed;
+  bottom: 32px; right: 32px;
+  width: 48px; height: 48px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
+  color: #fff;
+  font-size: 1rem;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 4px 16px rgba(37,99,235,0.40);
+  opacity: 0;
+  transform: translateY(16px);
+  transition: all var(--transition);
+  z-index: 999;
+}
+.scroll-top.visible { opacity: 1; transform: translateY(0); }
+.scroll-top:hover { transform: translateY(-4px); }
+
+/* ─── RESPONSIVE ─────────────────────────────────────────── */
+@media (max-width: 1024px) {
+  .overview-grid    { grid-template-columns: repeat(3, 1fr); }
+  .score-cards      { grid-template-columns: repeat(2, 1fr); }
+  .charts-row       { grid-template-columns: repeat(2, 1fr); }
+  .analysis-layout  { grid-template-columns: 1fr; }
+  .stats-grid       { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 768px) {
+  .nav-links        { display: none; flex-direction: column; position: fixed; top: 73px; left: 0; right: 0; background: var(--surface); padding: 20px; border-bottom: 1px solid var(--border); z-index: 999; }
+  .nav-links.open   { display: flex; }
+  .hamburger        { display: flex; }
+  .hero-container   { grid-template-columns: 1fr; text-align: center; gap: 40px; }
+  .hero-visual      { display: none; }
+  .hero-buttons     { justify-content: center; }
+  .hero-stats       { justify-content: center; }
+  .overview-grid    { grid-template-columns: repeat(2, 1fr); }
+  .score-cards      { grid-template-columns: 1fr 1fr; }
+  .charts-row       { grid-template-columns: 1fr 1fr; }
+  .footer-top       { grid-template-columns: 1fr; }
+  .footer-info      { flex-direction: column; gap: 24px; }
+  .stats-grid       { grid-template-columns: 1fr 1fr; }
+  .recorder-controls{ gap: 8px; }
+  .rec-btn          { padding: 10px 14px; font-size: 0.82rem; }
+  .section          { padding: 64px 0; }
+}
+@media (max-width: 480px) {
+  .overview-grid { grid-template-columns: 1fr; }
+  .score-cards   { grid-template-columns: 1fr; }
+  .charts-row    { grid-template-columns: 1fr; }
+  .stats-grid    { grid-template-columns: 1fr; }
+  .prediction-card { flex-direction: column; gap: 12px; }
+  .pred-label    { font-size: 1.5rem; }
+  .hero-title    { font-size: 2rem; }
+}