Optimize performance, caching, payload transfer, and complete dark mode visual redesign with Dubai Customs custom features

app.py

@@ -9,6 +9,7 @@ from typing import Optional
 from fastapi import FastAPI, HTTPException
 from fastapi.responses import FileResponse
 from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.gzip import GZipMiddleware
 from pydantic import BaseModel, Field
 
 from backend.ai_definition_service import AIDefinitionService
@@ -25,8 +26,17 @@ ROOT = Path(__file__).parent
 DATA = ROOT / "data"
 logging.basicConfig(level=logging.INFO)
 
+
+class CacheControlledStaticFiles(StaticFiles):
+    def file_response(self, *args, **kwargs):
+        response = super().file_response(*args, **kwargs)
+        response.headers["Cache-Control"] = "public, max-age=86400"
+        return response
+
+
 app = FastAPI(title="FalconScan", version="1.0.0", description="CPU-first customs terminology camera assistant")
-app.mount("/static", StaticFiles(directory=ROOT / "frontend"), name="static")
+app.add_middleware(GZipMiddleware, minimum_size=1000)
+app.mount("/static", CacheControlledStaticFiles(directory=ROOT / "frontend"), name="static")
 
 ocr = OCRService()
 Thread(target=ocr.warmup, daemon=True, name="falconscan-ocr-warmup").start()

backend/document_service.py

@@ -172,7 +172,7 @@ class DocumentService:
     @staticmethod
     def _result(image: Image.Image, terms: list, detections: list, unknown: list, method: str) -> dict:
         output = io.BytesIO()
-        image.save(output, format="JPEG", quality=80, optimize=True)
+        image.save(output, format="JPEG", quality=70, optimize=True)
         return {
             "detected_terms": terms,
             "ocr_items": detections,

backend/glossary_service.py

@@ -26,26 +26,57 @@ class GlossaryService:
         self.corrections_path = corrections_path
         self.approved_path = approved_path
         self.lock = RLock()
+        self._glossary_cache = None
+        self._aliases_cache = None
+        self._corrections_cache = None
+        self._corrections_mtime = 0.0
+        self._approved_cache = None
+        self._approved_mtime = 0.0
+        self._init_glossary()
+
+    def _init_glossary(self):
+        with self.lock:
+            self._glossary_cache = self._read(self.glossary_path)
+            self._aliases_cache = {}
+            for canonical, entry in self._glossary_cache.items():
+                for alias in [canonical, *entry.get("aliases", [])]:
+                    self._aliases_cache[normalize(alias)] = canonical
 
     @staticmethod
     def _read(path: Path) -> dict:
-        return json.loads(path.read_text(encoding="utf-8"))
+        try:
+            return json.loads(path.read_text(encoding="utf-8"))
+        except FileNotFoundError:
+            return {}
+
+    def _get_corrections(self) -> dict:
+        try:
+            mtime = self.corrections_path.stat().st_mtime
+        except FileNotFoundError:
+            mtime = 0.0
+        if self._corrections_cache is None or mtime > self._corrections_mtime:
+            with self.lock:
+                self._corrections_cache = self._read(self.corrections_path)
+                self._corrections_mtime = mtime
+        return self._corrections_cache
 
-    def _index(self) -> tuple[dict, dict]:
-        glossary = self._read(self.glossary_path)
-        aliases: dict[str, str] = {}
-        for canonical, entry in glossary.items():
-            for alias in [canonical, *entry.get("aliases", [])]:
-                aliases[normalize(alias)] = canonical
-        return glossary, aliases
+    def _get_approved(self) -> dict:
+        try:
+            mtime = self.approved_path.stat().st_mtime
+        except FileNotFoundError:
+            mtime = 0.0
+        if self._approved_cache is None or mtime > self._approved_mtime:
+            with self.lock:
+                self._approved_cache = self._read(self.approved_path)
+                self._approved_mtime = mtime
+        return self._approved_cache
 
     def find_match(self, text: str, threshold: float = 0.78) -> dict | None:
-        glossary, aliases = self._index()
         target = normalize(text)
         if not target:
             return None
         # Prefer longest contained phrases, then fuzzy matching for OCR errors.
-        contained = [(alias, canonical) for alias, canonical in aliases.items()
+        contained = [(alias, canonical) for alias, canonical in self._aliases_cache.items()
                      if alias and re.search(rf"(?<!\w){re.escape(alias)}(?!\w)", target)]
         match_type, score = "exact", 1.0
         if contained:
@@ -53,14 +84,14 @@ class GlossaryService:
             match_type = "exact" if alias == target else "phrase"
         else:
             alias, canonical, score = "", "", 0.0
-            for candidate, name in aliases.items():
+            for candidate, name in self._aliases_cache.items():
                 candidate_score = SequenceMatcher(None, target, candidate).ratio()
                 if candidate_score > score:
                     alias, canonical, score = candidate, name, candidate_score
             if score < threshold:
                 return None
             match_type = "fuzzy"
-        return {"canonical": canonical, "entry": glossary[canonical],
+        return {"canonical": canonical, "entry": self._glossary_cache[canonical],
                 "match_type": match_type, "match_confidence": round(score, 3)}
 
     def definition(self, term: str) -> dict | None:
@@ -68,8 +99,8 @@ class GlossaryService:
             matched = self.find_match(term)
             canonical = matched["canonical"] if matched else term
             norm = normalize(canonical)
-            approved = self._read(self.approved_path)
-            corrections = self._read(self.corrections_path)
+            approved = self._get_approved()
+            corrections = self._get_corrections()
             # SME approval is official and intentionally overrides pending user correction.
             selected = next((v for k, v in approved.items() if normalize(k) == norm), None)
             if selected:
@@ -82,8 +113,8 @@ class GlossaryService:
                 return self._response(canonical, item, "user_corrected", 0.9, matched)
             if matched:
                 return self._response(canonical, matched["entry"],
-                                      matched["entry"].get("source", "verified_glossary"),
-                                      matched["match_confidence"], matched)
+                                       matched["entry"].get("source", "verified_glossary"),
+                                       matched["match_confidence"], matched)
             return None
 
     @staticmethod
@@ -117,7 +148,7 @@ class GlossaryService:
 
     def match_regions(self, regions: list[dict]) -> list[dict]:
         """Find every known canonical term inside positioned text regions."""
-        _, aliases = self._index()
+        aliases = self._aliases_cache
         found: list[dict] = []
         seen: set[tuple[str, tuple[int, ...]]] = set()
         for region in regions:

backend/progress_service.py

@@ -8,15 +8,32 @@ class ProgressService:
     def __init__(self, path: Path):
         self.path = path
         self.lock = RLock()
+        self._cache = None
+        self._mtime = 0.0
 
     def get(self) -> dict:
-        with self.lock:
-            return json.loads(self.path.read_text(encoding="utf-8"))
+        try:
+            mtime = self.path.stat().st_mtime
+        except FileNotFoundError:
+            mtime = 0.0
+        if self._cache is None or mtime > self._mtime:
+            with self.lock:
+                try:
+                    self._cache = json.loads(self.path.read_text(encoding="utf-8"))
+                except FileNotFoundError:
+                    self._cache = {}
+                self._mtime = mtime
+        return self._cache
 
     def update(self, **changes) -> dict:
         with self.lock:
-            data = self.get()
+            data = dict(self.get())
             data.update(changes)
             data["last_updated"] = datetime.now(timezone.utc).isoformat()
             self.path.write_text(json.dumps(data, ensure_ascii=False, indent=2), encoding="utf-8")
+            self._cache = data
+            try:
+                self._mtime = self.path.stat().st_mtime
+            except FileNotFoundError:
+                self._mtime = 0.0
             return data

frontend/camera.js

@@ -113,7 +113,7 @@
     setStatus("Finding document terms", source === "upload" ? "Reading the uploaded page securely." : "Reading one clear camera frame.");
     showProgress("Recognizing text and matching business terminology…");
     const payload = {
-      image_base64: canvas.toDataURL("image/jpeg", 0.86),
+      image_base64: canvas.toDataURL("image/jpeg", 0.75),
       frame_width: canvas.width,
       frame_height: canvas.height,
       language_preference: $("#language").value,
@@ -227,7 +227,7 @@
       canvas.width = Math.max(1, Math.round(image.naturalWidth * scale));
       canvas.height = Math.max(1, Math.round(image.naturalHeight * scale));
       canvas.getContext("2d").drawImage(image, 0, 0, canvas.width, canvas.height);
-      const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.80));
+      const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.70));
       return { base64: await readBase64(blob), filename: "optimized-upload.jpg" };
     } finally {
       URL.revokeObjectURL(objectUrl);

frontend/feedback.js

@@ -1 +1 @@
-window.FalconFeedback=(()=>{let current=null;const $=s=>document.querySelector(s);function init(){document.querySelectorAll('[data-close]').forEach(b=>b.onclick=()=>close(b.dataset.close));$('#thumbUp').onclick=()=>submit('thumbs_up');$('#thumbDown').onclick=()=>{$('#correctionForm').hidden=false;$('#correctionText').focus()};$('#correctionForm').onsubmit=e=>{e.preventDefault();submit('thumbs_down',$('#correctionText').value)};$('#adminButton').onclick=openAdmin;loadCount()}function open(item){current=item;const lang=$('#language').value;const arabic=lang==='ar'&&item.definition_ar;$('#definitionModal').classList.add('open');$('#definitionModal').setAttribute('aria-hidden','false');$('.definition-card').dir=arabic?'rtl':'ltr';$('#definitionCategory').textContent=item.category||'CUSTOMS TERM';$('#definitionTerm').textContent=item.term;$('#definitionFullForm').textContent=item.full_form||'';$('#definitionText').textContent=arabic?item.definition_ar:item.definition;$('#definitionSource').textContent=item.source_label;$('#definitionConfidence').textContent=`${Math.round(item.confidence*100)}% confidence`;$('#relatedTerms').textContent=item.related_terms?.length?`Related: ${item.related_terms.join(' · ')}`:'';$('#correctionForm').hidden=true;$('#correctionText').value='';$('#feedbackMessage').textContent=''}function close(id){$('#'+id).classList.remove('open');$('#'+id).setAttribute('aria-hidden','true')}async function submit(type,correction=null){if(!current)return;const response=await fetch('/submit-feedback',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({term:current.term,old_definition:current.definition,corrected_definition:correction,feedback_type:type})});const data=await response.json();$('#feedbackMessage').textContent=response.ok?data.message:(data.detail||'Could not save feedback');if(response.ok&&correction){current.definition=correction;current.source='user_corrected';current.source_label='User correction (pending SME review)';loadCount();setTimeout(()=>close('definitionModal'),1000)}}async function loadCount(){const badge=$('#reviewCount'),button=$('#adminButton');try{const data=await fetch('/admin/corrections').then(r=>{if(!r.ok)throw new Error('Review queue unavailable');return r.json()});const count=Array.isArray(data.items)?data.items.length:0;badge.textContent=String(count);badge.hidden=count===0;button.setAttribute('aria-label',count?`Open SME review queue, ${count} pending ${count===1?'correction':'corrections'}`:'Open SME review queue')}catch{badge.hidden=true;button.setAttribute('aria-label','Open SME review queue; count unavailable')}}async function openAdmin(){$('#adminModal').classList.add('open');const list=$('#adminList');list.innerHTML='<p class="muted">Loading…</p>';const data=await fetch('/admin/corrections').then(r=>r.json());list.innerHTML=data.items.length?data.items.map(item=>`<article class="admin-item"><h3>${escapeHtml(item.term)}</h3><p class="muted">Current: ${escapeHtml(item.old_definition||item.previous_definition||'—')}</p><p><strong>Suggestion:</strong> ${escapeHtml(item.corrected_definition)}</p><small>Suggested by ${escapeHtml(item.suggested_by)} · ${new Date(item.created_at).toLocaleString()}</small><div class="admin-actions"><button class="approve" data-review="approve" data-term="${escapeHtml(item.term)}">Approve</button><button class="reject" data-review="reject" data-term="${escapeHtml(item.term)}">Reject</button></div></article>`).join(''):'<p class="muted">No corrections are waiting for review.</p>';list.querySelectorAll('[data-review]').forEach(b=>b.onclick=()=>review(b.dataset.term,b.dataset.review))}async function review(term,action){await fetch('/admin/review',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({term,action,reviewer:'FalconScan SME'})});openAdmin();loadCount()}function escapeHtml(s){return String(s||'').replace(/[&<>'"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[c]))}return{init,open}})();
+window.FalconFeedback=(()=>{let current=null;const $=s=>document.querySelector(s);function init(){document.querySelectorAll('[data-close]').forEach(b=>b.onclick=()=>close(b.dataset.close));$('#thumbUp').onclick=()=>submit('thumbs_up');$('#thumbDown').onclick=()=>{$('#correctionForm').hidden=false;$('#correctionText').focus()};$('#correctionForm').onsubmit=e=>{e.preventDefault();submit('thumbs_down',$('#correctionText').value)};$('#adminButton').onclick=openAdmin;loadCount()}function open(item){current=item;const lang=$('#language').value;const arabic=lang==='ar'&&item.definition_ar;$('#definitionModal').classList.add('open');$('#definitionModal').setAttribute('aria-hidden','false');$('.definition-card').dir=arabic?'rtl':'ltr';$('#definitionCategory').textContent=item.category||'CUSTOMS TERM';$('#definitionTerm').textContent=item.term;$('#definitionFullForm').textContent=item.full_form||'';$('#definitionText').textContent=arabic?item.definition_ar:item.definition;$('#definitionSource').textContent=item.source_label;const confPercent=Math.round(item.confidence*100);$('#definitionConfidence').textContent=`${confPercent}% confidence`;$('#definitionConfidence').className='confidence-score '+(confPercent>=90?'conf-good':confPercent>=70?'conf-neutral':'conf-bad');$('#relatedTerms').textContent=item.related_terms?.length?`Related: ${item.related_terms.join(' · ')}`:'';$('#correctionForm').hidden=true;$('#correctionText').value='';$('#feedbackMessage').textContent=''}function close(id){$('#'+id).classList.remove('open');$('#'+id).setAttribute('aria-hidden','true')}async function submit(type,correction=null){if(!current)return;const response=await fetch('/submit-feedback',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({term:current.term,old_definition:current.definition,corrected_definition:correction,feedback_type:type})});const data=await response.json();$('#feedbackMessage').textContent=response.ok?data.message:(data.detail||'Could not save feedback');if(response.ok&&correction){current.definition=correction;current.source='user_corrected';current.source_label='User correction (pending SME review)';loadCount();setTimeout(()=>close('definitionModal'),1000)}}async function loadCount(){const badge=$('#reviewCount'),button=$('#adminButton');try{const data=await fetch('/admin/corrections').then(r=>{if(!r.ok)throw new Error('Review queue unavailable');return r.json()});const count=Array.isArray(data.items)?data.items.length:0;badge.textContent=String(count);badge.hidden=count===0;button.setAttribute('aria-label',count?`Open SME review queue, ${count} pending ${count===1?'correction':'corrections'}`:'Open SME review queue')}catch{badge.hidden=true;button.setAttribute('aria-label','Open SME review queue; count unavailable')}}async function openAdmin(){$('#adminModal').classList.add('open');const list=$('#adminList');list.innerHTML='<p class="muted">Loading…</p>';const data=await fetch('/admin/corrections').then(r=>r.json());list.innerHTML=data.items.length?data.items.map(item=>`<article class="admin-item"><h3>${escapeHtml(item.term)}</h3><p class="muted">Current: ${escapeHtml(item.old_definition||item.previous_definition||'—')}</p><p><strong>Suggestion:</strong> ${escapeHtml(item.corrected_definition)}</p><small>Suggested by ${escapeHtml(item.suggested_by)} · ${new Date(item.created_at).toLocaleString()}</small><div class="admin-actions"><button class="approve" data-review="approve" data-term="${escapeHtml(item.term)}">Approve</button><button class="reject" data-review="reject" data-term="${escapeHtml(item.term)}">Reject</button></div></article>`).join(''):'<p class="muted">No corrections are waiting for review.</p>';list.querySelectorAll('[data-review]').forEach(b=>b.onclick=()=>review(b.dataset.term,b.dataset.review))}async function review(term,action){await fetch('/admin/review',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({term,action,reviewer:'FalconScan SME'})});openAdmin();loadCount()}function escapeHtml(s){return String(s||'').replace(/[&<>'"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[c]))}return{init,open}})();

frontend/index.html

@@ -19,7 +19,7 @@
   <main>
     <section class="intro">
       <div><p class="eyebrow">LIVE DOCUMENT ASSISTANT</p><h1>Point. Pause. Understand.</h1>
-        <p>FalconScan finds customs and freight terminology on physical documents, then explains it without taking you away from the camera.</p></div>
+        <p>FalconScan is a premium customs intelligence assistant designed to empower Dubai Customs officers in their daily operations. By scanning and explaining complex freight and clearance terminology directly on physical documents, it simplifies workflows, enhances decision confidence, and makes daily customs tasks seamless and efficient.</p></div>
     </section>
 
     <aside class="trust-note" aria-label="Privacy note">
@@ -64,11 +64,11 @@
     <section class="trust-row"><div><b>EN + AR</b><span>Bilingual OCR</span></div><div><b>LOCAL FIRST</b><span>Glossary lookup</span></div><div><b>HUMAN LED</b><span>SME-approved knowledge</span></div><div><b>CPU READY</b><span>Built for free Spaces</span></div></section>
   </main>
 
-  <div id="definitionModal" class="modal" aria-hidden="true"><div class="definition-card" role="dialog" aria-modal="true"><button class="close" data-close="definitionModal">×</button><p class="eyebrow" id="definitionCategory">CUSTOMS TERM</p><h2 id="definitionTerm"></h2><p id="definitionFullForm" class="full-form"></p><p id="definitionText" class="definition-text"></p><div class="definition-meta"><span id="definitionSource"></span><span id="definitionConfidence"></span></div><div class="related" id="relatedTerms"></div><div class="feedback-row"><span>Was this useful?</span><button id="thumbUp" aria-label="Helpful">↑</button><button id="thumbDown" aria-label="Incorrect">↓</button></div><form id="correctionForm" hidden><label>Suggest a clearer, correct definition<textarea id="correctionText" required maxlength="2000"></textarea></label><button class="primary" type="submit">Save for review</button></form><p id="feedbackMessage" class="feedback-message"></p></div></div>
+  <div id="definitionModal" class="modal" aria-hidden="true"><div class="definition-card" role="dialog" aria-modal="true"><button class="close" data-close="definitionModal">×</button><p class="eyebrow" id="definitionCategory">CUSTOMS TERM</p><h2 id="definitionTerm"></h2><p id="definitionFullForm" class="full-form"></p><p id="definitionText" class="definition-text"></p><div class="definition-meta"><span id="definitionSource"></span><span id="definitionConfidence"></span></div><div class="related" id="relatedTerms"></div><div class="feedback-row"><span>Was this useful?</span><button id="thumbUp" aria-label="Helpful">👍</button><button id="thumbDown" aria-label="Incorrect">👎</button></div><form id="correctionForm" hidden><label>Suggest a clearer, correct definition<textarea id="correctionText" required maxlength="2000"></textarea></label><button class="primary" type="submit">Save for review</button></form><p id="feedbackMessage" class="feedback-message"></p></div></div>
 
   <div id="adminModal" class="modal" aria-hidden="true"><div class="admin-card" role="dialog" aria-modal="true"><button class="close" data-close="adminModal">×</button><p class="eyebrow">KNOWLEDGE GOVERNANCE</p><h2>SME correction review</h2><p class="muted">Approve suggestions to make them the official definition.</p><div id="adminList" class="admin-list"></div></div></div>
   <div id="insightModal" class="modal" aria-hidden="true"><div class="insight-card" role="dialog" aria-modal="true" aria-labelledby="insightTitle"><button id="insightClose" class="close" aria-label="Close insight">×</button><p class="eyebrow">LIVE DOCUMENT INSIGHT</p><h2 id="insightTitle">Selection insight</h2><blockquote id="insightSelection"></blockquote><section><small>SUMMARY</small><p id="insightSummary"></p></section><section><small>BUSINESS MEANING</small><p id="insightBusiness"></p></section><div id="insightTerms" class="insight-terms"></div><div class="definition-meta"><span id="insightSource"></span><span id="insightConfidence"></span></div></div></div>
   <div id="toast" class="toast"></div>
-  <script src="/static/insights.js"></script><script src="/static/overlay.js"></script><script src="/static/feedback.js"></script><script src="/static/camera.js"></script>
+  <script src="/static/insights.js" defer></script><script src="/static/overlay.js" defer></script><script src="/static/feedback.js" defer></script><script src="/static/camera.js" defer></script>
 </body>
 </html>

frontend/insights.js

@@ -25,7 +25,10 @@ window.FalconInsights = (() => {
       $("#insightSummary").textContent = data.summary;
       $("#insightBusiness").textContent = data.business_meaning;
       $("#insightSource").textContent = data.source_label;
-      $("#insightConfidence").textContent = `${Math.round(data.confidence * 100)}% confidence`;
+      const confPercent = Math.round(data.confidence * 100);
+      const confEl = $("#insightConfidence");
+      confEl.textContent = `${confPercent}% confidence`;
+      confEl.className = 'confidence-score ' + (confPercent >= 90 ? 'conf-good' : confPercent >= 70 ? 'conf-neutral' : 'conf-bad');
       $("#insightTerms").innerHTML = (data.recognized_terms || []).map((item) => `<button type="button" data-term="${escapeHtml(item.term)}">${escapeHtml(item.term)}</button>`).join("");
       $("#insightTerms").querySelectorAll("button").forEach((button) => {
         button.onclick = () => {

frontend/overlay.js

@@ -6,6 +6,7 @@ window.FalconOverlay = (() => {
   let uploadedPreview;
   let documentScroller;
   let activePopover = null;
+  let currentDotIndex = 0;
 
   function init() {
     viewport = document.querySelector("#viewport");
@@ -38,6 +39,7 @@ window.FalconOverlay = (() => {
     terms = items;
     overlay.innerHTML = "";
     activePopover = null;
+    currentDotIndex = 0;
     const layout = geometry(frameWidth, frameHeight);
     renderSelectionLayer(textRegions, layout);
     renderMarkers(items, layout);
@@ -46,44 +48,49 @@ window.FalconOverlay = (() => {
 
   function renderMarkers(items, layout) {
     if (!items.length) return;
-    const visible = [...items].sort((a, b) => b.confidence - a.confidence).slice(0, 3);
-    const occupied = [];
-
-    visible.forEach((item, index) => {
-      const [x1, y1, x2, y2] = item.bbox;
-      let left = layout.offsetX + x2 * layout.scale + 7;
-      let top = layout.offsetY + ((y1 + y2) / 2) * layout.scale - 12;
-      if (left > layout.viewRect.width - 34) left = layout.offsetX + x1 * layout.scale - 31;
-      left = clamp(left, 7, layout.viewRect.width - 31);
-      top = clamp(top, 46, layout.viewRect.height - 38);
-      let attempts = 0;
-      while (occupied.some((point) => Math.hypot(point.left - left, point.top - top) < 31) && attempts < 12) {
-        top = clamp(top + 32, 46, layout.viewRect.height - 38);
-        if (top >= layout.viewRect.height - 39) left = clamp(left - 34, 7, layout.viewRect.width - 31);
-        attempts += 1;
+    const sorted = [...items].sort((a, b) => b.confidence - a.confidence);
+    renderSingleMarker(sorted, layout);
+  }
+
+  function renderSingleMarker(sortedItems, layout) {
+    // Remove existing non-user markers
+    overlay.querySelectorAll(".term-marker:not(.user-triggered)").forEach(m => m.remove());
+    if (!sortedItems.length) return;
+
+    const item = sortedItems[currentDotIndex % sortedItems.length];
+    const [x1, y1, x2, y2] = item.bbox;
+    let left = layout.offsetX + x2 * layout.scale + 7;
+    let top = layout.offsetY + ((y1 + y2) / 2) * layout.scale - 12;
+    if (left > layout.viewRect.width - 34) left = layout.offsetX + x1 * layout.scale - 31;
+    left = clamp(left, 7, layout.viewRect.width - 31);
+    top = clamp(top, 46, layout.viewRect.height - 38);
+
+    const marker = document.createElement("button");
+    marker.className = "term-marker";
+    marker.type = "button";
+    marker.style.left = `${left}px`;
+    marker.style.top = `${top}px`;
+    marker.setAttribute("aria-label", `Explain ${item.term}`);
+    marker.innerHTML = `<span></span>`;
+    
+    let dragged = false;
+    enableDrag(marker, layout, () => { dragged = true; });
+    marker.onclick = (event) => {
+      event.stopPropagation();
+      if (dragged) {
+        dragged = false;
+        return;
       }
-      occupied.push({ left, top });
-
-      const marker = document.createElement("button");
-      marker.className = "term-marker";
-      marker.type = "button";
-      marker.style.left = `${left}px`;
-      marker.style.top = `${top}px`;
-      marker.style.setProperty("--marker-delay", `${Math.min(index * 35, 350)}ms`);
-      marker.setAttribute("aria-label", `Explain ${item.term}`);
-      marker.innerHTML = `<span></span>`;
-      let dragged = false;
-      enableDrag(marker, layout, () => { dragged = true; });
-      marker.onclick = (event) => {
-        event.stopPropagation();
-        if (dragged) {
-          dragged = false;
-          return;
-        }
-        openPopover(item, marker, layout);
-      };
-      overlay.appendChild(marker);
-    });
+      openPopover(item, marker, layout);
+      if (sortedItems.length > 1) {
+        currentDotIndex = (currentDotIndex + 1) % sortedItems.length;
+        setTimeout(() => {
+          marker.remove();
+          renderSingleMarker(sortedItems, layout);
+        }, 150);
+      }
+    };
+    overlay.appendChild(marker);
   }
 
   function enableDrag(marker, layout, onDrag) {
@@ -172,7 +179,9 @@ window.FalconOverlay = (() => {
     popover.style.left = `${left}px`;
     popover.style.top = `${top}px`;
     popover.style.width = `${width}px`;
-    popover.innerHTML = `<div class="popover-heading"><span class="callout-dot"></span><span class="callout-line"></span><strong>${escapeHtml(item.term)}</strong><small>${Math.round(item.confidence * 100)}%</small></div><p>${escapeHtml(item.definition)}</p><button type="button">Open full meaning</button>`;
+    const confPercent = Math.round(item.confidence * 100);
+    const confClass = confPercent >= 90 ? 'conf-good' : confPercent >= 70 ? 'conf-neutral' : 'conf-bad';
+    popover.innerHTML = `<div class="popover-heading"><span class="callout-dot"></span><span class="callout-line"></span><strong>${escapeHtml(item.term)}</strong><small class="${confClass}">${confPercent}%</small></div><p>${escapeHtml(item.definition)}</p><button type="button">Open full meaning</button>`;
     popover.querySelector("button").onclick = (event) => {
       event.stopPropagation();
       window.FalconFeedback.open(item);

frontend/styles.css

@@ -1,189 +1,440 @@
 :root {
-  --ink: #14201d;
-  --muted: #64706c;
-  --paper: #f5f5f2;
-  --white: #fff;
-  --green: #087a5b;
-  --lime: #c9f257;
-  --line: #dfe3df;
-  --dark: #081c18;
-  --glass: rgba(255, 255, 255, .78);
-  --shadow: 0 22px 70px rgba(20, 38, 33, .12);
+  --ink: #f1f6f4;
+  --muted: #8ea7a1;
+  --paper: #09100e;
+  --white: #0e1715;
+  --green: #10b981;
+  --lime: #b5f21d; /* Electric neon lime accent */
+  --line: #1b2d29;
+  --dark: #050807;
+  --glass: rgba(14, 23, 21, 0.72);
+  --shadow: 0 25px 80px rgba(0, 0, 0, 0.65);
   --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --selection-bg: rgba(181, 242, 29, 0.35);
 }
 
 * { box-sizing: border-box; }
 html { scroll-behavior: smooth; }
-body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% -10%, #fff 0, var(--paper) 48%); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
+body {
+  margin: 0;
+  min-width: 320px;
+  background: radial-gradient(circle at 50% -20%, #172c26 0%, var(--paper) 68%);
+  color: var(--ink);
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, ui-sans-serif, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
 button, select, textarea { font: inherit; }
 button { cursor: pointer; }
 
-/* Mobile is the base layout. Larger screens progressively enhance it. */
+/* Global Focus Outline for Accessibility */
+button:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
+  outline: 2px solid var(--lime);
+  outline-offset: 3px;
+}
+
+/* Header styling: Translucent & blur effects */
 header {
   position: sticky; top: 0; z-index: 10;
   min-height: 64px; padding: 10px 14px;
   display: flex; align-items: center; justify-content: space-between; gap: 10px;
-  border-bottom: 1px solid rgba(20, 35, 31, .08); background: rgba(247, 247, 244, .82);
+  border-bottom: 1px solid var(--line);
+  background: rgba(9, 16, 14, 0.78);
   backdrop-filter: saturate(180%) blur(20px);
 }
 .brand { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 16px; }
 .brand small { display: none; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
-.mark { position: relative; display: block; flex: 0 0 auto; width: 38px; height: 38px; overflow: hidden; background: var(--dark); border-radius: 11px; box-shadow: 0 7px 18px rgba(8,28,24,.18); isolation: isolate; }
-.mark::before { content: ""; position: absolute; z-index: 0; width: 30px; height: 8px; left: 5px; top: 15px; background: linear-gradient(90deg,var(--lime),#79cfa9); border-radius: 99px; transform: rotate(-43deg); opacity: .38; }
-.mark-f,.mark-s { position: absolute; z-index: 1; top: 5px; font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif; font-size: 24px; font-weight: 850; line-height: 28px; letter-spacing: -.12em; }
+
+/* Interactive Monogram Mark */
+.mark {
+  position: relative; display: block; flex: 0 0 auto; width: 38px; height: 38px;
+  overflow: hidden; background: var(--dark); border-radius: 11px;
+  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3); isolation: isolate;
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
+}
+.brand:hover .mark {
+  transform: rotate(6deg) scale(1.05);
+  box-shadow: 0 0 16px rgba(181, 242, 29, 0.25);
+}
+.mark::before { content: ""; position: absolute; z-index: 0; width: 30px; height: 8px; left: 5px; top: 15px; background: linear-gradient(90deg, var(--lime), var(--green)); border-radius: 99px; transform: rotate(-43deg); opacity: .45; }
+.mark-f, .mark-s { position: absolute; z-index: 1; top: 5px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif; font-size: 24px; font-weight: 850; line-height: 28px; letter-spacing: -.12em; }
 .mark-f { left: 7px; color: var(--lime); }
 .mark-s { left: 17px; color: #fff; mix-blend-mode: screen; }
+
 .header-actions { display: flex; align-items: center; gap: 6px; }
-.header-actions select, .ghost { min-height: 38px; border: 1px solid rgba(20, 35, 31, .1); background: rgba(255,255,255,.64); border-radius: 11px; padding: 7px 9px; color: var(--ink); }
+.header-actions select, .ghost {
+  min-height: 38px; border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.05); border-radius: 11px;
+  padding: 7px 9px; color: var(--ink);
+  transition: border-color 0.2s, background 0.2s;
+}
+.header-actions select:hover, .ghost:hover {
+  border-color: rgba(181, 242, 29, 0.5);
+  background: rgba(255, 255, 255, 0.08);
+}
+.header-actions select option { background: var(--paper); color: var(--ink); }
 .ghost { width: 42px; overflow: hidden; white-space: nowrap; font-size: 0; }
 .ghost::before { content: "SME"; font-size: 10px; font-weight: 800; }
-.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 2px; padding: 0 5px; background: var(--lime); border-radius: 99px; font-size: 10px; color: var(--dark); }
+.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 2px; padding: 0 5px; background: var(--lime); border-radius: 99px; font-size: 10px; color: var(--dark); font-weight: 700; }
 .count[hidden] { display: none; }
 
 main { width: 100%; max-width: 1320px; margin: auto; padding: 30px 14px calc(64px + var(--safe-bottom)); }
 .intro { margin-bottom: 18px; }
-.intro h1 { max-width: 10ch; margin: 2px 0 12px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif; font-weight: 680; font-size: clamp(39px, 12vw, 64px); line-height: .98; letter-spacing: -.055em; }
+
+/* Subtle title text gradient */
+.intro h1 {
+  max-width: 10ch; margin: 2px 0 12px;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif;
+  font-weight: 780; font-size: clamp(39px, 12vw, 64px); line-height: .98; letter-spacing: -.055em;
+  background: linear-gradient(135deg, #ffffff 40%, var(--muted) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
 .intro > div > p:last-child { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
-.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 10px; letter-spacing: .18em; font-weight: 800; }
-.trust-note { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center; margin: 18px 0; padding: 13px 14px; border: 1px solid rgba(8,122,91,.12); background: rgba(232,247,240,.66); border-radius: 15px; }
-.trust-icon { display: grid; place-items: center; width: 34px; height: 34px; background: #d7f4e8; color: var(--green); border-radius: 50%; font-weight: 800; }
-.trust-note strong { display: block; font-size: 13px; }
-.trust-note p { margin: 2px 0 0; color: #53645f; font-size: 11px; line-height: 1.45; }
-.trust-label { display: none; color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
-
-.scanner-shell { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--white); border: 1px solid rgba(20,35,31,.06); border-radius: 20px; box-shadow: var(--shadow); transition: grid-template-columns .42s cubic-bezier(.22,1,.36,1); }
-.viewport { position: relative; min-height: min(62svh, 560px); background: radial-gradient(circle at center, #23423a, #071a18 72%); overflow: hidden; }
+.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 9px; letter-spacing: .18em; font-weight: 800; }
+
+/* Private by design trust-note */
+.trust-note {
+  display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center; margin: 18px 0;
+  padding: 13px 14px; border: 1px solid rgba(16, 185, 129, 0.25);
+  background: rgba(16, 185, 129, 0.06); border-radius: 15px;
+}
+.trust-icon { display: grid; place-items: center; width: 34px; height: 34px; background: rgba(16, 185, 129, 0.15); color: var(--green); border-radius: 50%; font-weight: 800; }
+.trust-note strong { display: block; font-size: 13px; color: #fff; }
+.trust-note p { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
+.trust-label { display: none; color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
+
+/* Scanner Shell: Sleek border transitions and glows */
+.scanner-shell {
+  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
+  background: var(--white); border: 1px solid var(--line);
+  border-radius: 20px; box-shadow: var(--shadow);
+  transition: grid-template-columns .42s cubic-bezier(.22,1,.36,1), border-color 0.3s, box-shadow 0.3s;
+}
+.scanner-shell:hover {
+  border-color: rgba(181, 242, 29, 0.15);
+  box-shadow: 0 0 35px rgba(181, 242, 29, 0.05), var(--shadow);
+}
+.viewport { position: relative; min-height: min(62svh, 560px); background: radial-gradient(circle at center, #112722, #040908 72%); overflow: hidden; }
 .viewport video { position: absolute; width: 100%; height: 100%; object-fit: contain; }
-.document-scroller { position: absolute; inset: 0; z-index: 1; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: #71827c #162a25; scrollbar-width: auto; background: #152622; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
+
+/* Document scroller styling */
+.document-scroller {
+  position: absolute; inset: 0; z-index: 1; overflow: auto; overscroll-behavior: contain;
+  scrollbar-gutter: stable; scrollbar-color: #556c65 var(--paper); scrollbar-width: auto;
+  background: var(--paper); -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
+}
 .document-scroller[hidden] { display: none; }
 .document-scroller::-webkit-scrollbar { width: 11px; height: 11px; }
-.document-scroller::-webkit-scrollbar-track { background: #162a25; }
-.document-scroller::-webkit-scrollbar-thumb { border: 3px solid #162a25; background: #71827c; border-radius: 99px; }
+.document-scroller::-webkit-scrollbar-track { background: var(--paper); }
+.document-scroller::-webkit-scrollbar-thumb { border: 3px solid var(--paper); background: #556c65; border-radius: 99px; }
 .document-stage { position: relative; width: 100%; min-height: 100%; background: #fff; }
 .uploaded-preview { display: block; width: 100%; height: auto; min-height: 100%; object-fit: contain; object-position: top center; background: #fff; }
 .document-stage > .overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
 .overlay { position: absolute; inset: 0; pointer-events: none; }
-.term-marker { position: absolute; z-index: 4; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,.9); padding: 0; background: rgba(8,28,24,.9); border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,.26); pointer-events: auto; cursor: grab; touch-action: none; animation: marker-in .35s var(--marker-delay, 0ms) both cubic-bezier(.22,1,.36,1); }
+
+/* Term markers and active glow overlays */
+.term-marker {
+  position: absolute; z-index: 4; display: grid; place-items: center; width: 18px; height: 18px;
+  border: 1.5px solid rgba(255,255,255,.9); padding: 0; background: rgba(5,8,7,.9); border-radius: 50%;
+  box-shadow: 0 4px 12px rgba(0,0,0,.5); pointer-events: auto; cursor: grab; touch-action: none;
+  animation: marker-in .35s var(--marker-delay, 0ms) both cubic-bezier(.22,1,.36,1);
+  transition: border-color 0.2s, transform 0.2s;
+}
 .term-marker:active { cursor: grabbing; }
-.term-marker span { width: 6px; height: 6px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 3px rgba(201,242,87,.16); }
-.term-marker:hover, .term-marker:focus-visible, .term-marker.active { border-color: var(--lime); transform: scale(1.1); }
+.term-marker span {
+  width: 6px; height: 6px; background: var(--lime); border-radius: 50%;
+  box-shadow: 0 0 0 3px rgba(181, 242, 29, 0.25);
+  transition: transform 0.2s;
+}
+.term-marker:hover, .term-marker:focus-visible, .term-marker.active {
+  border-color: var(--lime); transform: scale(1.15);
+  box-shadow: 0 0 10px rgba(181, 242, 29, 0.4);
+}
+.term-marker:hover span { transform: scale(1.2); }
 @keyframes marker-in { from { opacity: 0; transform: scale(.4); } }
-.term-popover { position: absolute; z-index: 6; border: 1px solid rgba(255,255,255,.16); padding: 13px; background: rgba(8,28,24,.94); color: white; border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.38); backdrop-filter: saturate(160%) blur(18px); pointer-events: auto; animation: popover-in .22s cubic-bezier(.22,1,.36,1); }
+
+/* Dynamic popover over document elements */
+.term-popover {
+  position: absolute; z-index: 6; border: 1px solid rgba(255,255,255,.12); padding: 13px;
+  background: rgba(14, 23, 21, 0.94); color: white; border-radius: 14px;
+  box-shadow: 0 18px 48px rgba(0,0,0,.6); backdrop-filter: saturate(160%) blur(18px);
+  pointer-events: auto; animation: popover-in .22s cubic-bezier(.22,1,.36,1);
+}
 @keyframes popover-in { from { opacity: 0; transform: translateY(7px) scale(.97); } }
 .popover-heading { display: grid; grid-template-columns: 9px 1px minmax(0,1fr) auto; align-items: center; gap: 8px; }
-.callout-dot { width: 9px; height: 9px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 3px rgba(201,242,87,.16); }
-.callout-line { align-self: stretch; width: 1px; min-height: 20px; background: rgba(255,255,255,.22); }
-.popover-heading strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
-.popover-heading small { color: #c4cfcb; font-size: 9px; font-variant-numeric: tabular-nums; }
-.term-popover p { margin: 11px 0; color: #d8e1de; font-size: 11px; line-height: 1.5; }
-.term-popover button { width: 100%; min-height: 36px; border: 0; background: var(--lime); color: var(--dark); border-radius: 8px; font-size: 10px; font-weight: 750; }
-.selection-hint { position: absolute; z-index: 3; left: 50%; bottom: 66px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 7px 10px; background: rgba(255,255,255,.88); color: var(--dark); border-radius: 99px; backdrop-filter: blur(12px); font-size: 9px; font-weight: 650; text-align: center; white-space: nowrap; }
+.callout-dot { width: 9px; height: 9px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 3px rgba(181, 242, 29, 0.2); }
+.callout-line { align-self: stretch; width: 1px; min-height: 20px; background: rgba(255,255,255,.15); }
+.popover-heading strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
+.popover-heading small { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
+.term-popover p { margin: 11px 0; color: #d1deda; font-size: 11px; line-height: 1.5; }
+
+/* Interactive button effects */
+.term-popover button {
+  width: 100%; min-height: 36px; border: 0; background: var(--lime); color: var(--dark);
+  border-radius: 8px; font-size: 10px; font-weight: 750;
+  transition: filter 0.15s, transform 0.15s;
+}
+.term-popover button:hover {
+  filter: brightness(1.05); transform: translateY(-0.5px);
+}
+
+.selection-hint {
+  position: absolute; z-index: 3; left: 50%; bottom: 58px; transform: translateX(-50%);
+  max-width: calc(100% - 32px); padding: 7px 12px; background: rgba(14, 23, 21, 0.86);
+  color: var(--ink); border: 1px solid var(--line); border-radius: 99px;
+  backdrop-filter: blur(12px); font-size: 9px; font-weight: 650; text-align: center;
+  white-space: nowrap; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+}
 .selection-hint[hidden] { display: none; }
-.document-info { position: absolute; z-index: 5; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 7px; min-height: 40px; border: 1px solid #ffffff24; padding: 7px 11px 7px 7px; background: rgba(8,28,24,.82); color: white; border-radius: 99px; backdrop-filter: blur(16px); pointer-events: auto; }
+
+.document-info {
+  position: absolute; z-index: 5; right: 12px; top: 14px; display: flex; align-items: center; gap: 7px;
+  min-height: 40px; border: 1px solid rgba(255, 255, 255, 0.15); padding: 7px 11px 7px 7px;
+  background: rgba(14, 23, 21, 0.85); color: white; border-radius: 99px;
+  backdrop-filter: blur(16px); pointer-events: auto; transition: background 0.2s, border-color 0.2s;
+}
+.document-info:hover {
+  background: rgba(22, 38, 34, 0.9);
+  border-color: rgba(181, 242, 29, 0.4);
+}
 .document-info[hidden] { display: none; }
 .document-info span { display: grid; place-items: center; width: 25px; height: 25px; background: var(--lime); color: var(--dark); border-radius: 50%; font-family: Georgia, serif; font-weight: 800; }
 .document-info b { display: none; font-size: 10px; }
+
 .selection-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
 .selectable-region { position: absolute; display: block; overflow: hidden; color: transparent; line-height: 1; white-space: pre-wrap; user-select: text; -webkit-user-select: text; pointer-events: auto; cursor: text; touch-action: pan-x pan-y; }
+.selectable-region::selection { background: var(--selection-bg); color: rgba(255,255,255,0.9); }
+
 .term-marker.user-triggered { animation: marker-pulse .28s cubic-bezier(.22,1,.36,1); }
 @keyframes marker-pulse { from { opacity: 0; transform: scale(.2); } 70% { transform: scale(1.25); } }
-.selectable-region::selection { background: rgba(201,242,87,.72); color: rgba(8,28,24,.9); }
-@keyframes pop { from { scale: .2; opacity: 0; } }
-.corner { position: absolute; width: 34px; height: 34px; border-color: var(--lime); border-style: solid; opacity: .8; }
+
+/* Corner brackets: pulsing scan visual states */
+.corner { position: absolute; width: 34px; height: 34px; border-color: var(--lime); border-style: solid; opacity: .45; }
 .tl { top: 28px; left: 20px; border-width: 2px 0 0 2px; }
 .tr { top: 28px; right: 20px; border-width: 2px 2px 0 0; }
 .bl { bottom: 28px; left: 20px; border-width: 0 0 2px 2px; }
 .br { right: 20px; bottom: 28px; border-width: 0 2px 2px 0; }
-.empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: white; text-align: center; background: linear-gradient(130deg, #102c27dd, #071a18ee); }
+@keyframes corner-glow {
+  0%, 100% { opacity: 0.45; }
+  50% { opacity: 0.95; filter: drop-shadow(0 0 4px var(--lime)); }
+}
+.viewport.active .corner {
+  animation: corner-glow 2.2s infinite ease-in-out;
+}
+
+.empty-state {
+  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: white; text-align: center;
+  background: linear-gradient(130deg, rgba(14, 28, 25, 0.94), rgba(7, 14, 12, 0.98));
+}
 .empty-state.hidden { display: none; }
-.empty-state span { max-width: 250px; color: #a8b7b2; font-size: 14px; }
+.empty-state span { max-width: 250px; color: var(--muted); font-size: 14px; }
 .lens { margin-bottom: 8px; color: var(--lime); font-size: 50px; }
-.primary, .panel-actions button { min-height: 48px; border: 0; border-radius: 12px; padding: 12px 18px; background: var(--lime); color: var(--dark); font-weight: 720; box-shadow: 0 8px 20px #8aaa3030; transition: transform .18s ease, filter .18s ease; }
-.primary:hover, .panel-actions button:hover:not(:disabled) { filter: brightness(1.025); transform: translateY(-1px); }
+
+/* Buttons & drawer layout overrides */
+.primary, .panel-actions button {
+  min-height: 48px; border: 0; border-radius: 12px; padding: 12px 18px;
+  background: var(--lime); color: var(--dark); font-weight: 750;
+  box-shadow: 0 8px 20px rgba(181, 242, 29, 0.15);
+  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
+}
+.primary:hover, .panel-actions button:hover:not(:disabled) {
+  filter: brightness(1.05); transform: translateY(-1.5px);
+  box-shadow: 0 10px 24px rgba(181, 242, 29, 0.25);
+}
+.primary:active, .panel-actions button:active:not(:disabled) {
+  transform: translateY(0);
+}
 .empty-state .primary { margin-top: 14px; }
-.scan-line { display: none; position: absolute; left: 7%; right: 7%; top: 50%; height: 1px; background: var(--lime); box-shadow: 0 0 20px var(--lime); animation: scan 2.4s ease-in-out infinite; }
+
+/* Active scanning laser bar */
+.scan-line {
+  display: none; position: absolute; left: 7%; right: 7%; top: 50%; height: 2px;
+  background: linear-gradient(90deg, transparent, var(--lime), transparent);
+  box-shadow: 0 0 15px var(--lime); animation: scan 2.5s ease-in-out infinite;
+}
 .viewport.active .scan-line { display: block; }
-@keyframes scan { 0%, 100% { top: 12%; opacity: .1; } 50% { top: 88%; opacity: .9; } }
-.status-pill, .quality-pill { position: absolute; top: 14px; max-width: 46%; overflow: hidden; border: 1px solid #ffffff22; background: #071a18bb; color: #fff; backdrop-filter: blur(10px); border-radius: 99px; padding: 7px 10px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+@keyframes scan { 0%, 100% { top: 12%; opacity: .15; } 50% { top: 88%; opacity: .95; } }
+
+.status-pill, .quality-pill {
+  position: absolute; top: 14px; max-width: 46%; overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(9, 16, 14, 0.82);
+  color: #fff; backdrop-filter: blur(12px); border-radius: 99px;
+  padding: 7px 12px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap;
+}
 .status-pill { left: 12px; }
-.quality-pill { right: 12px; }
-.status-pill i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #80908b; border-radius: 50%; }
-.status-pill.live i { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
+.quality-pill { right: 12px; top: 58px; }
+.status-pill i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #647570; border-radius: 50%; }
 
-.details-toggle { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; min-height: 42px; border: 1px solid #ffffff24; padding: 8px 11px 8px 14px; background: rgba(8,28,24,.76); color: white; border-radius: 99px; backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 8px 30px #0003; font-size: 11px; font-weight: 650; }
+/* Status pill indicator pulsing animation */
+@keyframes pulse-live {
+  0% { box-shadow: 0 0 0 0 rgba(181, 242, 29, 0.6); }
+  70% { box-shadow: 0 0 0 6px rgba(181, 242, 29, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(181, 242, 29, 0); }
+}
+.status-pill.live i {
+  background: var(--lime);
+  animation: pulse-live 1.8s infinite ease-in-out;
+}
+
+/* Drawer Toggle Control */
+.details-toggle {
+  position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%);
+  display: flex; align-items: center; gap: 8px; min-height: 42px;
+  border: 1px solid rgba(255, 255, 255, 0.16); padding: 8px 11px 8px 14px;
+  background: rgba(14, 23, 21, 0.85); color: white; border-radius: 99px;
+  backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 8px 30px rgba(0,0,0,.4);
+  font-size: 11px; font-weight: 650; transition: border-color 0.2s, background 0.2s;
+}
+.details-toggle:hover {
+  background: rgba(22, 38, 34, 0.95);
+  border-color: rgba(181, 242, 29, 0.3);
+}
 .details-toggle i { font-style: normal; transition: transform .3s ease; }
 .details-open .details-toggle i { transform: rotate(180deg); }
 
-.control-panel { position: relative; display: flex; flex-direction: column; max-height: 0; overflow: hidden; padding: 0 18px; opacity: 0; transform: translateY(18px); transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .25s ease, transform .4s cubic-bezier(.22,1,.36,1), padding .4s ease; }
+.control-panel {
+  position: relative; display: flex; flex-direction: column; max-height: 0; overflow: hidden;
+  padding: 0 18px; opacity: 0; transform: translateY(18px);
+  transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .25s ease, transform .4s cubic-bezier(.22,1,.36,1), padding .4s ease;
+}
 .details-open .control-panel { max-height: 740px; padding: 26px 18px calc(20px + var(--safe-bottom)); opacity: 1; transform: translateY(0); }
-.details-close { position: absolute; top: 15px; right: 14px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: #f0f2ef; color: var(--muted); border-radius: 50%; font-size: 21px; line-height: 1; }
+.details-close {
+  position: absolute; top: 15px; right: 14px; z-index: 2; display: grid; place-items: center;
+  width: 32px; height: 32px; border: 0; background: rgba(255,255,255,0.06);
+  color: var(--muted); border-radius: 50%; font-size: 21px; line-height: 1;
+  transition: background 0.2s, color 0.2s;
+}
+.details-close:hover {
+  background: rgba(255,255,255,0.12);
+  color: var(--lime);
+}
 .panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 0 38px 14px 0; }
-.panel-heading h2 { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif; font-size: 24px; font-weight: 680; letter-spacing: -.035em; }
-.panel-heading > span { flex: 0 0 auto; padding: 6px 9px; background: #eef0e8; border-radius: 99px; font-size: 11px; }
+.panel-heading h2 { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif; font-size: 24px; font-weight: 780; letter-spacing: -.035em; color: #fff; }
+.panel-heading > span { flex: 0 0 auto; padding: 6px 9px; background: rgba(255,255,255,0.05); border-radius: 99px; font-size: 11px; color: var(--lime); font-weight: 600; }
 .status-message { padding: 14px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
+
 .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
-.metrics > div { min-width: 0; background: #f3f4ef; padding: 10px 8px; border-radius: 9px; }
+.metrics > div { min-width: 0; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04); padding: 10px 8px; border-radius: 9px; }
 .metrics small, .metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; }
 .metrics small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
-.metrics strong { margin-top: 5px; font-size: 11px; white-space: nowrap; }
+.metrics strong { margin-top: 5px; font-size: 11px; white-space: nowrap; color: #fff; }
+
 .terms-list { max-height: 230px; overflow: auto; padding: 14px 0; }
 .hint-card { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 13px; }
 .hint-card span { color: var(--green); font-family: Georgia, serif; font-size: 22px; }
-.instruction-card { padding: 13px 14px; background: #f3f5f1; border-radius: 12px; }
-.instruction-card strong { font-size: 12px; }
+
+.instruction-card { padding: 13px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; }
+.instruction-card strong { font-size: 12px; color: #fff; }
 .instruction-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
-.analysis-progress { display: flex; align-items: center; gap: 10px; padding: 14px; background: #f3f5f1; border-radius: 12px; color: var(--muted); font-size: 11px; }
-.analysis-progress i { width: 16px; height: 16px; border: 2px solid #d9dfdb; border-top-color: var(--green); border-radius: 50%; animation: progress-spin .8s linear infinite; }
+
+.analysis-progress { display: flex; align-items: center; gap: 10px; padding: 14px; background: rgba(255,255,255,0.03); border-radius: 12px; color: var(--muted); font-size: 11px; }
+.analysis-progress i { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--lime); border-radius: 50%; animation: progress-spin .8s linear infinite; }
 @keyframes progress-spin { to { transform: rotate(360deg); } }
-.empty-result { padding: 14px; border: 1px dashed #d5dbd7; color: var(--muted); border-radius: 12px; font-size: 11px; line-height: 1.5; }
-.upload-card { display: grid; gap: 10px; margin: 4px 0 14px; padding: 13px; border: 1px solid var(--line); background: #f6f7f4; border-radius: 12px; }
+.empty-result { padding: 14px; border: 1px dashed rgba(255,255,255,0.12); color: var(--muted); border-radius: 12px; font-size: 11px; line-height: 1.5; }
+
+.upload-card { display: grid; gap: 10px; margin: 4px 0 14px; padding: 13px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); border-radius: 12px; }
 .upload-card strong, .upload-card span { display: block; }
-.upload-card strong { font-size: 12px; }
+.upload-card strong { font-size: 12px; color: #fff; }
 .upload-card span { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
-.upload-card button { min-height: 40px; border: 1px solid #ced5d1; background: white; color: var(--ink); border-radius: 9px; font-size: 11px; font-weight: 700; }
-.upload-card button:hover { border-color: var(--green); color: var(--green); }
+.upload-card button {
+  min-height: 40px; border: 1px solid var(--line); background: rgba(255,255,255,0.04);
+  color: var(--ink); border-radius: 9px; font-size: 11px; font-weight: 700;
+  transition: border-color 0.2s, color 0.2s, background 0.2s;
+}
+.upload-card button:hover { border-color: var(--lime); color: var(--lime); background: rgba(255,255,255,0.08); }
+
 .panel-actions { display: grid; gap: 8px; }
-.panel-actions button:disabled { opacity: .4; cursor: not-allowed; }
-.panel-actions .secondary { background: var(--dark); color: white; }
+.panel-actions button:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; transform: none; }
+.panel-actions .secondary {
+  background: rgba(255, 255, 255, 0.08); color: white; border: 1px solid var(--line);
+  box-shadow: none;
+}
+.panel-actions .secondary:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25);
+  box-shadow: none;
+}
 
-.trust-row { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; overflow: hidden; border: 1px solid rgba(20,35,31,.08); background: var(--glass); border-radius: 16px; box-shadow: 0 12px 40px rgba(20,38,33,.05); }
-.trust-row div { display: flex; flex-direction: column; padding: 15px; border-right: 1px solid #d8d8cf; border-bottom: 1px solid #d8d8cf; }
+.trust-row { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--glass); border-radius: 16px; box-shadow: var(--shadow); }
+.trust-row div { display: flex; flex-direction: column; padding: 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
 .trust-row div:nth-child(2n) { border-right: 0; }
 .trust-row div:nth-last-child(-n+2) { border-bottom: 0; }
-.trust-row b { color: var(--green); font-size: 9px; letter-spacing: .1em; }
+.trust-row b { color: var(--lime); font-size: 9px; letter-spacing: .1em; font-weight: 700; }
 .trust-row span { margin-top: 4px; color: var(--muted); font-size: 11px; }
 
-.modal { position: fixed; inset: 0; z-index: 20; display: none; place-items: end center; padding: 12px 12px calc(12px + var(--safe-bottom)); background: #071a18aa; backdrop-filter: blur(5px); }
+/* Modals & sheets details */
+.modal {
+  position: fixed; inset: 0; z-index: 20; display: none; place-items: end center;
+  padding: 12px 12px calc(12px + var(--safe-bottom)); background: rgba(3, 5, 4, 0.78);
+  backdrop-filter: blur(10px);
+}
 .modal.open { display: grid; }
-.definition-card, .admin-card, .insight-card { position: relative; width: 100%; max-height: 88svh; overflow: auto; background: white; border-radius: 20px 20px 14px 14px; padding: 28px 20px; box-shadow: 0 30px 100px #0006; }
-.close { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; color: var(--muted); font-size: 27px; }
-.definition-card h2, .admin-card h2, .insight-card h2 { margin: 0 0 2px; font-family: Georgia, serif; font-size: 32px; }
-.full-form { margin: 0; color: var(--green); font-weight: 700; }
-.definition-text { font-family: Georgia, serif; font-size: 20px; line-height: 1.45; }
-.definition-meta { display: grid; gap: 5px; padding: 10px; background: #f0f3ec; border-radius: 9px; font-size: 11px; }
+.definition-card, .admin-card, .insight-card {
+  position: relative; width: 100%; max-height: 88svh; overflow: auto;
+  background: rgba(17, 28, 25, 0.97); border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 20px 20px 14px 14px; padding: 28px 20px; box-shadow: 0 30px 100px rgba(0,0,0,0.7);
+}
+.close {
+  position: absolute; top: 10px; right: 14px; border: 0; background: transparent;
+  color: var(--muted); font-size: 27px; line-height: 1; transition: color 0.15s;
+}
+.close:hover { color: var(--lime); }
+.definition-card h2, .admin-card h2, .insight-card h2 { margin: 0 0 2px; font-family: Georgia, serif; font-size: 24px; color: #fff; }
+.full-form { margin: 0; color: var(--lime); font-weight: 700; }
+.definition-text { font-family: Georgia, serif; font-size: 20px; line-height: 1.45; color: #f2fbf7; }
+
+.definition-meta {
+  display: grid; gap: 5px; padding: 10px; background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 9px; font-size: 11px;
+}
 .related { padding: 12px 0; color: var(--muted); font-size: 11px; }
+
 .feedback-row { display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--line); padding-top: 16px; }
 .feedback-row span { margin-right: auto; font-size: 12px; }
-.feedback-row button { width: 42px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: white; }
-textarea { width: 100%; min-height: 90px; margin: 7px 0 9px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
-form label { font-size: 12px; font-weight: 700; }
+.feedback-row button {
+  width: 42px; height: 40px; border: 1px solid var(--line); border-radius: 8px;
+  background: rgba(255,255,255,0.04); color: var(--ink);
+  transition: border-color 0.2s, background 0.2s;
+}
+.feedback-row button:hover { border-color: var(--lime); background: rgba(255,255,255,0.08); }
+
+textarea {
+  width: 100%; min-height: 90px; margin: 7px 0 9px; padding: 10px;
+  border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,0.25);
+  color: var(--ink);
+}
+textarea:focus { border-color: var(--lime); outline: none; }
+form label { font-size: 12px; font-weight: 700; color: var(--muted); }
 #correctionForm { margin-top: 15px; }
-.feedback-message { color: var(--green); font-size: 12px; }
-.insight-card blockquote { margin: 16px 0; padding: 12px 14px; background: #f2f4f0; color: var(--muted); border-left: 3px solid var(--lime); border-radius: 4px 10px 10px 4px; font-size: 12px; line-height: 1.45; }
+.feedback-message { color: var(--lime); font-size: 12px; }
+
+.insight-card blockquote { margin: 16px 0; padding: 12px 14px; background: rgba(255,255,255,0.03); color: var(--muted); border-left: 3px solid var(--lime); border-radius: 4px 10px 10px 4px; font-size: 12px; line-height: 1.45; }
 .insight-card section { padding: 13px 0; border-top: 1px solid var(--line); }
-.insight-card section small { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
+.insight-card section small { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
 .insight-card section p { margin: 7px 0 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
+
 .insight-terms { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 16px; }
-.insight-terms button { border: 1px solid #ced8d3; padding: 6px 9px; background: #f7faf7; color: var(--green); border-radius: 99px; font-size: 10px; font-weight: 700; }
-.admin-item { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
-.admin-item h3 { margin: 0; }
+.insight-terms button {
+  border: 1px solid var(--line); padding: 6px 9px; background: rgba(255,255,255,0.03);
+  color: var(--lime); border-radius: 99px; font-size: 10px; font-weight: 700;
+  transition: background 0.2s, border-color 0.2s;
+}
+.insight-terms button:hover { background: rgba(181, 242, 29, 0.08); border-color: rgba(181, 242, 29, 0.35); }
+
+.admin-item { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.02); }
+.admin-item h3 { margin: 0; color: #fff; }
 .admin-item p { font-size: 13px; }
 .admin-actions { display: flex; gap: 8px; margin-top: 12px; }
-.admin-actions button { min-height: 40px; border: 0; border-radius: 7px; padding: 8px 12px; }
-.approve { background: var(--lime); }
-.reject { background: #f1dddd; }
+.admin-actions button { min-height: 40px; border: 0; border-radius: 7px; padding: 8px 12px; font-weight: 700; }
+.approve { background: var(--lime); color: var(--dark); }
+.reject { background: #4f2222; color: #f5c4c4; border: 1px solid #733131; }
 .muted { color: var(--muted); }
-.toast { position: fixed; left: 14px; right: 14px; bottom: calc(16px + var(--safe-bottom)); z-index: 30; transform: translateY(20px); opacity: 0; background: var(--dark); color: white; padding: 11px 16px; border-radius: 9px; transition: .2s; text-align: center; }
+
+.toast {
+  position: fixed; left: 14px; right: 14px; bottom: calc(16px + var(--safe-bottom)); z-index: 30;
+  transform: translateY(20px); opacity: 0; background: var(--dark); color: white;
+  border: 1px solid var(--line); padding: 11px 16px; border-radius: 9px;
+  transition: .25s ease-out; text-align: center; box-shadow: var(--shadow);
+}
 .toast.show { opacity: 1; transform: translateY(0); }
 [dir=rtl] .definition-card { text-align: right; }
 
@@ -217,18 +468,28 @@ form label { font-size: 12px; font-weight: 700; }
   .scanner-shell { display: grid; grid-template-columns: minmax(0, 1fr) 0; min-height: 590px; border-radius: 24px; }
   .scanner-shell.details-open { grid-template-columns: minmax(0, 1.65fr) minmax(330px, .7fr); }
   .viewport { min-height: 590px; }
-  .control-panel { max-height: none; min-width: 0; height: 590px; padding: 28px; opacity: 1; transform: translateX(24px); transition: opacity .22s ease, transform .42s cubic-bezier(.22,1,.36,1); }
+  
+  .control-panel {
+    max-height: none; min-width: 0; height: 590px; padding: 28px; opacity: 1;
+    transform: translateX(24px); transition: opacity .22s ease, transform .42s cubic-bezier(.22,1,.36,1);
+  }
   .details-closed .control-panel { visibility: hidden; padding-inline: 0; opacity: 0; pointer-events: none; }
   .details-open .control-panel { max-height: none; padding: 28px; opacity: 1; transform: translateX(0); }
   .details-toggle { left: auto; right: 18px; bottom: 18px; transform: none; }
   .details-open .details-toggle { right: 18px; }
   .panel-actions { grid-template-columns: 1fr; }
   .terms-list { flex: 1; max-height: 300px; }
+  
   .trust-row { grid-template-columns: repeat(4, 1fr); margin-top: 20px; }
-  .trust-row div, .trust-row div:nth-child(2n) { border-right: 1px solid #d8d8cf; border-bottom: 0; padding: 18px 24px; }
+  .trust-row div, .trust-row div:nth-child(2n) { border-right: 1px solid var(--line); border-bottom: 0; padding: 18px 24px; }
   .trust-row div:last-child { border-right: 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
 }
+
+.conf-good { color: var(--lime) !important; font-weight: 700; }
+.conf-neutral { color: #f59e0b !important; font-weight: 600; }
+.conf-bad { color: #ef4444 !important; font-weight: 600; }
+