Run CV matcher entirely in the browser for free hosting

README.md

@@ -1,30 +1,15 @@
 ---
-title: Sri Lankan Job-Resume Matcher
+title: Free Browser CV Matcher
 emoji: "📄"
-colorFrom: blue
-colorTo: green
-sdk: gradio
-sdk_version: 5.0.0
-app_file: app.py
+colorFrom: indigo
+colorTo: purple
+sdk: static
+app_file: index.html
 pinned: false
 ---
 
-# Sri Lankan Job-Resume Matcher
+# Free browser-based CV matcher
 
-This Space hosts a fine-tuned Sentence-Transformers Cross-Encoder for estimating the relevance of a candidate profile to a job description. Upload a PDF, DOCX or TXT CV to pre-fill the candidate profile, then review the extracted fields before scoring.
+This is a static Hugging Face Space. CV text extraction and model scoring run in the visitor's browser, so the Space does not require paid CPU hosting. The ONNX model is hosted in the public [`Gehan77/cv-match-browser`](https://huggingface.co/Gehan77/cv-match-browser) model repository and is cached by the browser after the first load.
 
-The model was trained with job-relevant fields such as role, seniority, experience, industry, education, skills, summaries, responsibilities and requirements. Candidate names, phone numbers, addresses and location fields were excluded from matching features.
-
-## Model information
-
-- Base model: `cross-encoder/ms-marco-MiniLM-L6-v2`
-- Training pairs: 120,000
-- Decision threshold: `0.4399277865886688` (selected using validation F1)
-- Reported test F1: `0.7957`
-- Reported test ROC-AUC: `0.9098`
-
-## Intended use and limitations
-
-Use the score to help rank or review applications. It must not be used as the sole basis for hiring, rejection, or any other high-impact employment decision. Review the original CV and job requirements, check for missing or inaccurate information, and apply human judgment and applicable employment law.
-
-The training data and evaluation data are synthetic or task-specific as supplied with the model package; performance on real-world CVs and jobs may differ. The model does not verify qualifications, identity, work authorization or references.
+The result is an assistive ranking signal only. Review the original CV and job requirements before making any hiring decision.

app.js

@@ -0,0 +1,261 @@
+import {
+  AutoModelForSequenceClassification,
+  AutoTokenizer,
+} from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1/+esm";
+import * as pdfjsLib from "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/build/pdf.min.mjs";
+
+const MODEL_ID = "Gehan77/cv-match-browser";
+const DECISION_THRESHOLD = 0.4399277865886688;
+pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/build/pdf.worker.min.mjs";
+
+const $ = (id) => document.getElementById(id);
+const cvFile = $("cvFile");
+const dropzone = $("dropzone");
+const fileLabel = $("fileLabel");
+const extractButton = $("extractButton");
+const scoreButton = $("scoreButton");
+const status = $("status");
+const preview = $("preview");
+const result = $("result");
+let selectedFile = null;
+let modelPromise = null;
+
+function setStatus(message, type = "") {
+  status.textContent = message;
+  status.className = `status ${type}`.trim();
+}
+
+function clean(value, fallback = "Not specified") {
+  const text = String(value ?? "").replace(/\s+/g, " ").trim();
+  return text || fallback;
+}
+
+function cleanList(value) {
+  const text = clean(value);
+  if (text === "Not specified") return text;
+  const items = text.split(/[|,;\n]+/).map((item) => item.trim()).filter(Boolean);
+  return items.length ? items.join(", ") : "Not specified";
+}
+
+const headerRules = [
+  ["summary", /^(?:professional\s+)?summary$|^profile$|^about\s+me$|^objective$|^career\s+objective$/i],
+  ["experience", /^(?:professional\s+)?(?:work\s+)?experience$|^employment\s+history$|^career\s+history$/i],
+  ["education", /^education(?:al\s+background)?$|^academic\s+qualifications?$/i],
+  ["skills", /^(?:technical\s+|core\s+|key\s+|professional\s+)?skills?$|^competenc(?:y|ies)$|^technologies$/i],
+];
+
+function headerName(line) {
+  const candidate = line.replace(/[#:|\-–—]+$/g, "").trim();
+  if (candidate.length > 45) return null;
+  return headerRules.find(([, pattern]) => pattern.test(candidate))?.[0] ?? null;
+}
+
+function parseSections(text) {
+  const sections = { other: [] };
+  let current = "other";
+  for (const rawLine of text.split(/\r?\n/)) {
+    const line = rawLine.replace(/^[\s•*\-–—]+/, "").trim();
+    if (!line) continue;
+    const header = headerName(line);
+    if (header) {
+      current = header;
+      sections[current] ??= [];
+      continue;
+    }
+    sections[current] ??= [];
+    sections[current].push(line);
+  }
+  return sections;
+}
+
+function firstNonContactLine(text) {
+  for (const rawLine of text.split(/\r?\n/).slice(0, 12)) {
+    const line = rawLine.replace(/^[\s•*\-–—]+/, "").trim();
+    if (!line || headerName(line)) continue;
+    if (/@|https?:\/\/|www\.|(?:\+?\d[\d ()-]{7,})/i.test(line)) continue;
+    if (line.split(/\s+/).length <= 10) return line;
+  }
+  return "";
+}
+
+function sectionText(section = [], limit = 800) {
+  return section.join(" ").trim().slice(0, limit);
+}
+
+function sectionItems(section = [], limit = 1200) {
+  return section.filter(Boolean).join("; ").slice(0, limit);
+}
+
+function extractCandidateFields(text) {
+  const sections = parseSections(text);
+  const allText = text.replace(/\s+/g, " ");
+  const firstLine = firstNonContactLine(text);
+  const roleKeywords = ["developer", "engineer", "manager", "analyst", "designer", "specialist", "officer", "assistant", "consultant", "accountant", "teacher", "intern"];
+  let role = "";
+  for (const line of (sections.other ?? []).slice(0, 8)) {
+    if (line === firstLine) continue;
+    if (roleKeywords.some((keyword) => line.toLowerCase().includes(keyword))) {
+      role = line;
+      break;
+    }
+  }
+  role ||= firstLine;
+
+  const seniorityMatch = allText.match(/\b(intern|internship|entry[- ]?level|junior|mid[- ]?level|intermediate|senior|lead|principal|manager|director|executive)\b/i);
+  const seniority = seniorityMatch ? seniorityMatch[1].replace("-", " ").replace(/\b\w/g, (letter) => letter.toUpperCase()) : "";
+  const yearsMatch = allText.match(/\b(\d+(?:\.\d+)?)\+?\s*(?:years?|yrs?)\b/i);
+  const industryTerms = ["FinTech", "Banking", "Finance", "Software", "Information Technology", "Healthcare", "Education", "Marketing", "Tourism", "Retail", "Logistics", "Construction", "Manufacturing", "Telecommunications", "Insurance", "Hospitality", "Government", "E-commerce"];
+  const industry = industryTerms.find((term) => new RegExp(term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i").test(allText)) ?? "";
+  const summary = sectionText(sections.summary) || sectionText((sections.other ?? []).slice(1, 5), 900);
+
+  return {
+    candidateRole: role,
+    candidateSeniority: seniority,
+    yearsExperience: yearsMatch?.[1] ?? "",
+    candidateIndustry: industry,
+    education: sectionItems(sections.education, 600),
+    candidateSkills: sectionItems(sections.skills),
+    summary,
+    experienceBullets: sectionItems(sections.experience, 1400),
+  };
+}
+
+function applyCandidateFields(fields) {
+  for (const [id, value] of Object.entries(fields)) $(id).value = value;
+}
+
+async function extractPdfText(file) {
+  const data = new Uint8Array(await file.arrayBuffer());
+  const pdf = await pdfjsLib.getDocument({ data }).promise;
+  const pages = [];
+  for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber += 1) {
+    const page = await pdf.getPage(pageNumber);
+    const content = await page.getTextContent();
+    pages.push(content.items.map((item) => item.str).join(" "));
+  }
+  return pages.join("\n");
+}
+
+async function extractFileText(file) {
+  const extension = file.name.split(".").pop().toLowerCase();
+  if (extension === "txt") return file.text();
+  if (extension === "pdf") return extractPdfText(file);
+  if (extension === "docx") {
+    if (!window.mammoth) throw new Error("DOCX reader could not be loaded. Try a PDF or TXT file.");
+    const result = await window.mammoth.extractRawText({ arrayBuffer: await file.arrayBuffer() });
+    return result.value;
+  }
+  throw new Error("Supported CV formats are PDF, DOCX and TXT.");
+}
+
+async function parseUploadedCv() {
+  if (!selectedFile) return;
+  extractButton.disabled = true;
+  setStatus("Reading your CV in the browser…");
+  try {
+    const text = (await extractFileText(selectedFile)).replace(/[ \t]+/g, " ").replace(/\n{3,}/g, "\n\n").trim();
+    if (!text) throw new Error("No selectable text found. This may be a scanned PDF.");
+    preview.value = `${text.slice(0, 2500)}${text.length > 2500 ? "…" : ""}`;
+    const fields = extractCandidateFields(text);
+    applyCandidateFields(fields);
+    const filled = Object.values(fields).filter(Boolean).length;
+    setStatus(`Extracted ${filled} of 8 candidate fields. Please review them before scoring.`, "success");
+  } catch (error) {
+    setStatus(error.message || "Could not read this file.", "error");
+  } finally {
+    extractButton.disabled = false;
+  }
+}
+
+function setSelectedFile(file) {
+  if (!file) return;
+  selectedFile = file;
+  fileLabel.textContent = file.name;
+  extractButton.disabled = false;
+  setStatus("File selected. Click Extract CV details to fill the form.");
+}
+
+function buildJobText() {
+  return clean(`
+    Job Title: ${clean($("jobTitle").value)}.
+    Required Seniority: ${clean($("jobSeniority").value)}.
+    Industry: ${clean($("jobIndustry").value)}.
+    Must-Have Skills: ${cleanList($("mustHaveSkills").value)}.
+    Nice-to-Have Skills: ${cleanList($("niceToHaveSkills").value)}.
+    Job Description: ${clean($("jobDescription").value)}.
+    Responsibilities: ${cleanList($("responsibilities").value)}.
+    Requirements: ${cleanList($("requirements").value)}.
+  `);
+}
+
+function buildResumeText() {
+  return clean(`
+    Candidate Role: ${clean($("candidateRole").value)}.
+    Seniority Level: ${clean($("candidateSeniority").value)}.
+    Years of Experience: ${clean($("yearsExperience").value)}.
+    Industry Experience: ${clean($("candidateIndustry").value)}.
+    Education: ${clean($("education").value)}.
+    Skills: ${cleanList($("candidateSkills").value)}.
+    Professional Summary: ${clean($("summary").value)}.
+    Experience Highlights: ${cleanList($("experienceBullets").value)}.
+  `);
+}
+
+async function loadBrowserModel() {
+  if (!modelPromise) {
+    modelPromise = Promise.all([
+      AutoTokenizer.from_pretrained(MODEL_ID),
+      AutoModelForSequenceClassification.from_pretrained(MODEL_ID, { dtype: "fp32" }),
+    ]);
+  }
+  return modelPromise;
+}
+
+async function scoreMatch() {
+  scoreButton.disabled = true;
+  scoreButton.textContent = "Loading model…";
+  setStatus("The browser model is loading. The first load may take a minute.");
+  result.hidden = true;
+  try {
+    const [tokenizer, model] = await loadBrowserModel();
+    setStatus("Scoring the job and candidate profile…");
+    const inputs = await tokenizer(buildJobText(), {
+      text_pair: buildResumeText(),
+      padding: "max_length",
+      truncation: true,
+      max_length: 256,
+    });
+    const output = await model(inputs);
+    const logit = Number(output.logits.data[0]);
+    const probability = 1 / (1 + Math.exp(-logit));
+    const verdict = probability >= DECISION_THRESHOLD ? "Suitable match" : "Needs review";
+    const percent = (probability * 100).toFixed(1);
+    result.innerHTML = `
+      <div class="result-top">
+        <div><h3>${verdict}</h3><p>Model-estimated relevance for this job and candidate profile.</p></div>
+        <div class="score-number">${percent}%</div>
+      </div>
+      <div class="score-bar"><span style="width:${Math.max(2, probability * 100)}%"></span></div>
+      <p>Decision threshold: ${(DECISION_THRESHOLD * 100).toFixed(1)}%</p>
+      <p class="result-note">This is an assistive ranking signal only. Review the original CV and job requirements before making any hiring decision.</p>
+    `;
+    result.hidden = false;
+    setStatus("Match scored in your browser.", "success");
+  } catch (error) {
+    setStatus(`Could not score this profile: ${error.message || error}`, "error");
+  } finally {
+    scoreButton.disabled = false;
+    scoreButton.innerHTML = 'Score match <span>→</span>';
+  }
+}
+
+cvFile.addEventListener("change", (event) => setSelectedFile(event.target.files[0]));
+extractButton.addEventListener("click", parseUploadedCv);
+scoreButton.addEventListener("click", scoreMatch);
+dropzone.addEventListener("dragover", (event) => { event.preventDefault(); dropzone.classList.add("dragging"); });
+dropzone.addEventListener("dragleave", () => dropzone.classList.remove("dragging"));
+dropzone.addEventListener("drop", (event) => {
+  event.preventDefault();
+  dropzone.classList.remove("dragging");
+  setSelectedFile(event.dataTransfer.files[0]);
+});

index.html

@@ -1,19 +1,86 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#0b1220" />
+    <title>CV Match - Free Browser App</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/mammoth@1.8.0/mammoth.browser.min.js"></script>
+  </head>
+  <body>
+    <main class="shell">
+      <header class="hero">
+        <div class="eyebrow"><span class="pulse"></span> Free browser-based CV matcher</div>
+        <h1>Find the right match<br /><em>with confidence.</em></h1>
+        <p class="hero-copy">Upload a CV, review the extracted details, and compare it with a job description using your trained model.</p>
+        <div class="privacy-note"><span>🔒</span> Your CV is processed in this browser. It is not uploaded to an application server.</div>
+      </header>
+
+      <section class="workflow">
+        <form class="panel" id="jobPanel">
+          <div class="panel-heading">
+            <span class="step-number">01</span>
+            <div><p class="overline">Start here</p><h2>Job details</h2></div>
+          </div>
+          <p class="panel-intro">Describe the role you are hiring for. More context usually gives a more useful ranking signal.</p>
+          <label>Job title<input id="jobTitle" value="Customer Support Specialist" /></label>
+          <div class="two-col">
+            <label>Required seniority<input id="jobSeniority" value="Junior" /></label>
+            <label>Industry<input id="jobIndustry" value="FinTech" /></label>
+          </div>
+          <label>Must-have skills<input id="mustHaveSkills" placeholder="Python, customer service, CRM" /></label>
+          <label>Nice-to-have skills<input id="niceToHaveSkills" placeholder="Separate skills with commas" /></label>
+          <label>Job description<textarea id="jobDescription" rows="4" placeholder="What is this person expected to do?"></textarea></label>
+          <label>Responsibilities<textarea id="responsibilities" rows="3" placeholder="List the main responsibilities"></textarea></label>
+          <label>Requirements<textarea id="requirements" rows="3" placeholder="List the essential requirements"></textarea></label>
+        </form>
+
+        <section class="panel" id="candidatePanel">
+          <div class="panel-heading">
+            <span class="step-number">02</span>
+            <div><p class="overline">Upload and review</p><h2>Candidate CV</h2></div>
+          </div>
+          <p class="panel-intro">PDF, DOCX and TXT files are supported. The first model download may take a minute and will be cached in your browser.</p>
+
+          <label class="dropzone" id="dropzone">
+            <input id="cvFile" type="file" accept=".pdf,.docx,.txt" />
+            <span class="upload-icon">↑</span>
+            <strong id="fileLabel">Choose a CV file</strong>
+            <small>or drag and drop it here</small>
+          </label>
+          <button class="button button-secondary" id="extractButton" type="button" disabled>Extract CV details</button>
+          <div class="status" id="status" role="status">Waiting for a CV upload.</div>
+
+          <label>Extracted text preview<textarea id="preview" rows="5" readonly placeholder="Your CV text preview will appear here."></textarea></label>
+
+          <div class="subheading"><span>Candidate details</span><small>Review before scoring</small></div>
+          <label>Candidate role<input id="candidateRole" /></label>
+          <div class="two-col">
+            <label>Seniority<input id="candidateSeniority" /></label>
+            <label>Years of experience<input id="yearsExperience" /></label>
+          </div>
+          <label>Industry experience<input id="candidateIndustry" /></label>
+          <label>Education<input id="education" /></label>
+          <label>Skills<input id="candidateSkills" placeholder="Separate skills with commas" /></label>
+          <label>Professional summary<textarea id="summary" rows="3"></textarea></label>
+          <label>Experience highlights<textarea id="experienceBullets" rows="4"></textarea></label>
+        </section>
+      </section>
+
+      <section class="score-section">
+        <div class="score-heading">
+          <div><p class="overline">Final step</p><h2>Score the match</h2></div>
+          <button class="button button-primary" id="scoreButton" type="button">Score match <span>→</span></button>
+        </div>
+        <div class="result" id="result" hidden></div>
+      </section>
+
+      <footer>
+        <span>Assistive ranking only - always review the original CV and job requirements.</span>
+        <a href="https://huggingface.co/Gehan77/cv-match-browser" target="_blank" rel="noreferrer">Model card ↗</a>
+      </footer>
+    </main>
+    <script type="module" src="app.js"></script>
+  </body>
 </html>

style.css

@@ -1,28 +1,93 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+:root {
+  color-scheme: dark;
+  --bg: #09101d;
+  --panel: rgba(18, 29, 49, 0.88);
+  --panel-2: #121e32;
+  --line: rgba(145, 167, 204, 0.18);
+  --muted: #93a3bd;
+  --text: #f5f7fb;
+  --accent: #7c8cff;
+  --accent-2: #5eead4;
+  --danger: #fb7185;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
+* { box-sizing: border-box; }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+body {
+  margin: 0;
+  min-width: 320px;
+  background: radial-gradient(circle at 50% -10%, #172949 0, transparent 46%), var(--bg);
+  color: var(--text);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
+button, input, textarea { font: inherit; }
+button { cursor: pointer; }
+
+.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 52px 0 30px; }
+.hero { padding: 24px 4px 42px; max-width: 730px; }
+.eyebrow, .overline { color: var(--accent-2); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 800; }
+.eyebrow { display: flex; align-items: center; gap: 9px; }
+.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 7px rgba(94, 234, 212, .12); }
+h1 { margin: 18px 0 14px; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.065em; }
+h1 em { color: var(--accent); font-style: normal; }
+.hero-copy { max-width: 630px; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
+.privacy-note { display: inline-flex; gap: 9px; align-items: center; margin-top: 19px; padding: 10px 13px; border: 1px solid rgba(94, 234, 212, .22); border-radius: 10px; color: #bdeee6; background: rgba(94, 234, 212, .06); font-size: .84rem; }
 
-.card p:last-child {
-	margin-bottom: 0;
+.workflow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
+.panel, .score-section { border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(22, 35, 58, .95), rgba(13, 22, 38, .92)); box-shadow: 0 20px 60px rgba(0, 0, 0, .18); }
+.panel { padding: 25px; }
+.panel-heading, .score-heading { display: flex; align-items: center; gap: 13px; }
+.step-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(124, 140, 255, .14); color: #b3bcff; font-size: .77rem; font-weight: 900; }
+.overline { margin: 0 0 4px; font-size: .65rem; }
+h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.035em; }
+.panel-intro { color: var(--muted); line-height: 1.55; font-size: .87rem; margin: 18px 0 22px; }
+label { display: block; color: #c5d0e3; font-size: .78rem; font-weight: 700; margin-top: 15px; }
+input, textarea { display: block; width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--text); background: rgba(5, 12, 24, .62); transition: border-color .2s, box-shadow .2s; }
+textarea { resize: vertical; line-height: 1.45; }
+input:focus, textarea:focus { border-color: rgba(124, 140, 255, .8); box-shadow: 0 0 0 3px rgba(124, 140, 255, .12); }
+input::placeholder, textarea::placeholder { color: #66758f; }
+.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+
+.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 142px; margin-top: 5px; border: 1px dashed rgba(124, 140, 255, .65); border-radius: 14px; color: #dae0ff; background: rgba(124, 140, 255, .07); text-align: center; cursor: pointer; transition: background .2s, transform .2s; }
+.dropzone:hover, .dropzone.dragging { background: rgba(124, 140, 255, .14); transform: translateY(-1px); }
+.dropzone input { display: none; }
+.upload-icon { display: grid; place-items: center; width: 37px; height: 37px; margin-bottom: 8px; border-radius: 50%; background: var(--accent); color: #0b1220; font-size: 1.4rem; font-weight: 800; }
+.dropzone small { margin-top: 6px; color: var(--muted); font-weight: 500; }
+.button { border: 0; border-radius: 11px; padding: 12px 17px; color: #f8fbff; font-weight: 800; transition: transform .2s, filter .2s, opacity .2s; }
+.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
+.button:disabled { cursor: not-allowed; opacity: .45; }
+.button-secondary { width: 100%; margin-top: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); }
+.button-primary { background: linear-gradient(120deg, #6d7df8, #8b5cf6); box-shadow: 0 10px 28px rgba(109, 125, 248, .25); }
+.button-primary span { margin-left: 7px; font-size: 1.1rem; }
+.status { min-height: 23px; margin-top: 11px; color: var(--muted); font-size: .79rem; line-height: 1.45; }
+.status.success { color: #8de9d8; }
+.status.error { color: #fda4af; }
+.subheading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 21px; padding-top: 19px; border-top: 1px solid var(--line); color: #e7ebf6; font-size: .83rem; font-weight: 800; }
+.subheading small { color: var(--muted); font-size: .72rem; font-weight: 500; }
+
+.score-section { margin-top: 20px; padding: 25px; }
+.score-heading { justify-content: space-between; }
+.result { margin-top: 23px; padding: 22px; border: 1px solid rgba(124, 140, 255, .3); border-radius: 15px; background: rgba(124, 140, 255, .08); }
+.result-top { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
+.result h3 { margin: 0 0 8px; font-size: 1.35rem; }
+.result p { color: var(--muted); line-height: 1.55; margin: 6px 0; font-size: .88rem; }
+.score-number { color: #b8c0ff; font-size: 2.1rem; font-weight: 900; white-space: nowrap; }
+.score-bar { height: 7px; margin: 18px 0 12px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.09); }
+.score-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
+.result-note { color: #aebbd0 !important; font-size: .77rem !important; }
+footer { display: flex; justify-content: space-between; gap: 15px; padding: 24px 4px 0; color: #65758f; font-size: .74rem; }
+footer a { color: #9ca9ff; text-decoration: none; }
+
+@media (max-width: 800px) {
+  .shell { width: min(100% - 24px, 620px); padding-top: 28px; }
+  .workflow { grid-template-columns: 1fr; }
+  .hero { padding-bottom: 27px; }
+  h1 { font-size: clamp(2.7rem, 13vw, 4.3rem); }
+}
+@media (max-width: 500px) {
+  .panel, .score-section { padding: 18px; border-radius: 15px; }
+  .two-col, .score-heading, .result-top, footer { grid-template-columns: 1fr; display: grid; }
+  .score-heading { gap: 17px; }
+  .button-primary { width: 100%; }
 }