fix: upload reliability, counting-line accuracy, security hardening, dead code

Upload flow (reported: "network failed", stall at 98% then blank screen)
- sw.js no longer intercepts non-GET requests. Re-issuing the upload POST
through respondWith() surfaced any hiccup as an opaque network failure,
and caches.match() on a POST resolves undefined. Also skips dynamic
endpoints and cleans up stale cache versions.
- Progress bar is monotonic (it used to jump 98% -> 95%), plateaus at 90%
with a "Processing on server..." label instead of freezing silently, and
only reaches 100% once the preview frame is decoded and painted — so the
frame is on screen when the step switches, never a blank panel.
- Surfaces the server's own error (rate limit / too large / bad type),
adds a 10min timeout, and returns the dropzone so retry needs no reload.

Counting-line accuracy
- The frame is object-contain, so it is letterboxed whenever the canvas
aspect differs from the video's — always on mobile, where CSS forces 4/3.
Canvas coords were mapped straight to image pixels, placing the line in
the wrong spot. All mapping now goes through the displayed image rect,
and points are stored in image space so resize/rotate redraws correctly.
- Reject a zero-length line (both points identical) in UI and geometry.

Security
- Validate video_id against the generated format before any filesystem
join (reports / bundle / config / first-frame).
- HTML-escape all user-supplied feedback fields before they are
interpolated into the notification email.
- HF_TOKEN no longer passed through a shell command line; use urllib.
- Stop returning stack traces and raw exception strings to clients.
- Stream uploads with a running size cap; clamp client-supplied conf /
iou / stride; rate-limit and bound the feedback endpoint.

Correctness / robustness
- engine: confidence lookup was list(ids).index(obj_id) — O(n) per
detection and wrong on repeated ids; use the aligned index.
- Guard fps=0 and frame_count=0 containers (division by zero).
- Return 404/422 instead of crashing on unknown or undecodable videos.
- Uploads no longer delete every other in-flight user's file; evict by
age with a disk cap and clean up the matching report artifacts.
- auth: clear new_user after onboarding — the username form reappeared.
- feedback: category/use-case were read as <select> after the migration to
custom dropdowns, so both were always submitted empty.
- Palette preference was written to a control that does not exist and read
from a key nothing wrote; wire it to the dropdown that is actually there.
- Idempotent modal injection (both pages injected duplicate element IDs).

UI/UX + accessibility
- Restore pinch-zoom (WCAG 1.4.4); add viewport-fit + safe-area insets so
the bottom nav clears the iOS home indicator.
- Shortcuts modal shows once, not on every single visit.
- aria-labels on the icon-only mobile nav; reachable mobile sign-out.
- imgsz stepper no longer offers to change a value fixed by the compiled
OpenVINO graph.

Dead code
- Remove unreachable SPA branches (showDashboard / showOnboardingPhase /
trackFunnel / closeLandingProfileMenu were never defined), injectNavigation,
the duplicate legal menu and its duplicate element id, the duplicate
service-worker registration and toggleLegalMenu, boolBadge, and ~190
lines of unreferenced CSS.

Adds backend/test_core.py — runnable check over the counting geometry,
PCU conversion, speed binning, and id validation.

Note: the HF idle-sleep behaviour is untouched, as requested.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.gitignore

@@ -1 +1,4 @@
-.env 
+.env
+__pycache__/
+*.pyc
+backend/weights/

backend/config.py

@@ -1,11 +1,14 @@
 import cv2
 import multiprocessing as mp
 
-BASE_IMG_SIZE = 640
 REF_PIXELS = 640 * 640
 REF_FPS_CPU = 13.0
 TRACK_STABILITY_STRIDE = 3
 
+# Fixed by the OpenVINO export: the compiled graph has a static input shape,
+# so this is not tunable per-video. engine.py passes the same value to track().
+IMGSZ = 736
+
 
 def _cpu_score():
     return mp.cpu_count()
@@ -29,18 +32,6 @@ def _estimate_fps(imgsz, cpu_score):
     return (REF_FPS_CPU * cpu_score / 12) / scale
 
 
-def _select_imgsz(pixels):
-    if pixels >= 3840 * 2160:
-        return 640
-    if pixels >= 2560 * 1440:
-        return 704
-    if pixels >= 1920 * 1080:
-        return 736
-    if pixels >= 1280 * 720:
-        return 800
-    return 960
-
-
 def _select_stride(video_fps, model_fps):
     if model_fps >= video_fps:
         return 1
@@ -53,7 +44,7 @@ def get_optimal_config(video_path):
     fps, frames, duration, w, h, pixels = _video_meta(video_path)
     cpu_score = _cpu_score()
 
-    imgsz = _select_imgsz(pixels)
+    imgsz = IMGSZ
     model_fps = _estimate_fps(imgsz, cpu_score)
     detect_stride = _select_stride(fps, model_fps)
     effective_fps = model_fps / detect_stride

backend/engine.py

@@ -3,7 +3,6 @@ import time
 import tempfile
 import threading
 import queue
-import numpy as np
 import cv2
 from collections import defaultdict
 from pcu import compute_pcu, MODEL_CLASSES
@@ -97,7 +96,9 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
         annotated_options["bbox"] = True
 
     cap = cv2.VideoCapture(video_path)
-    fps = cap.get(cv2.CAP_PROP_FPS)
+    # A container with broken/absent fps metadata reports 0 — that would divide
+    # by zero in every crossing timestamp below.
+    fps = cap.get(cv2.CAP_PROP_FPS) or 30.0
     total = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
     out_w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
     out_h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
@@ -106,8 +107,9 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
     # Dynamic crossing threshold: 5% of frame height, min 40px
     cross_dist = max(40, int(out_h * 0.05))
 
-    stride = config["detect_stride"]
-    total_iters = total // stride
+    stride = max(1, int(config.get("detect_stride", 1) or 1))
+    # Some containers report frame_count as 0; never hand the UI a zero divisor.
+    total_iters = max(1, total // stride)
 
     # Annotated video writer (temp directory — auto-cleaned on container shutdown)
     annotated_path = None
@@ -180,11 +182,14 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
                 cur_boxes = xyxy
                 cur_ids = ids
 
-                for obj_id, c, box in zip(ids, cls, xyxy):
+                for i, (obj_id, c, box) in enumerate(zip(ids, cls, xyxy)):
                     cx = int((box[0] + box[2]) / 2)
                     cy = int((box[1] + box[3]) / 2)
 
-                    heatmap_points.append([cx, cy, float(r.boxes.conf.cpu().numpy()[list(ids).index(obj_id)])])
+                    # confs is already on CPU and index-aligned with ids —
+                    # the old list(ids).index() lookup was O(n) per detection
+                    # and returned the wrong conf whenever an id repeated.
+                    heatmap_points.append([cx, cy, float(confs[i])])
                     track_positions[obj_id].append((frame_idx, cx, cy))
 
                     if not valid_line:

backend/geometry.py

@@ -8,5 +8,8 @@ def _point_to_segment_dist(px, py, ax, ay, bx, by):
     B = np.array([bx, by], dtype=float)
     P = np.array([px, py], dtype=float)
     AB = B - A
-    t = np.clip(np.dot(P - A, AB) / np.dot(AB, AB), 0, 1)
-    return np.linalg.norm(P - (A + t * AB))
+    denom = np.dot(AB, AB)
+    if denom == 0:                       # degenerate segment: fall back to point distance
+        return float(np.linalg.norm(P - A))
+    t = np.clip(np.dot(P - A, AB) / denom, 0, 1)
+    return float(np.linalg.norm(P - (A + t * AB)))

backend/model.py

@@ -1,4 +1,6 @@
 import os
+import shutil
+import urllib.request
 from pathlib import Path
 from dotenv import load_dotenv
 from ultralytics import YOLO
@@ -20,15 +22,12 @@ _HF_BASE = (
 _OV_FILES = ["best.bin", "best.xml", "metadata.yaml"]
 
 
-def _auth_header():
-    token = os.getenv("HF_TOKEN", "")
-    return f'-H "Authorization: Bearer {token}"' if token else ""
-
-
 def _download_ov_model():
     """Download the pre-built OV INT8 model files directly from HF."""
     OV_DIR.mkdir(parents=True, exist_ok=True)
-    auth = _auth_header()
+    token = os.getenv("HF_TOKEN", "")
+    headers = {"Authorization": f"Bearer {token}"} if token else {}
+
     for filename in _OV_FILES:
         dest = OV_DIR / filename
         if dest.exists():
@@ -36,12 +35,21 @@ def _download_ov_model():
             continue
         url = f"{_HF_BASE}/{filename}"
         print(f"[model] Downloading {filename} ...")
-        ret = os.system(f'curl -L --fail {auth} -o "{dest}" "{url}"')
-        if ret != 0 or not dest.exists() or dest.stat().st_size < 100:
+        try:
+            # urlopen, not `os.system("curl ...")` — keeps HF_TOKEN out of the
+            # shell command line (visible in /proc) and out of shell quoting.
+            req = urllib.request.Request(url, headers=headers)
+            with urllib.request.urlopen(req) as resp, open(dest, "wb") as f:
+                shutil.copyfileobj(resp, f)
+        except Exception as e:
+            dest.unlink(missing_ok=True)
             raise RuntimeError(
-                f"[model] Failed to download {filename} from HF. "
+                f"[model] Failed to download {filename} from HF ({e}). "
                 "Check HF_TOKEN and repo visibility."
             )
+        if dest.stat().st_size < 100:
+            dest.unlink(missing_ok=True)
+            raise RuntimeError(f"[model] {filename} downloaded but is truncated.")
     print("[model] OV model files ready ✅")
 
 

backend/server.py

@@ -1,11 +1,12 @@
 import os
+import re
+import html
 import json
 import uuid
 import asyncio
 import tempfile
 import shutil
 from pathlib import Path
-import zipfile
 
 import cv2
 import time
@@ -47,19 +48,58 @@ run_results = {}
 model = None
 
 MAX_MEMORY_ENTRIES = 50
+# Videos are capped far lower than result dicts: each one is up to 500MB of
+# ephemeral disk. The previous code deleted *every* prior upload on each new
+# one, which bounded disk but destroyed any concurrent user's in-flight video.
+MAX_VIDEOS = 5
+
 def evict_old(d):
     while len(d) > MAX_MEMORY_ENTRIES:
         d.pop(next(iter(d)))
 
-UPLOAD_LIMITS = {}
-def is_rate_limited(ip: str):
+
+def evict_videos():
+    """Evict oldest uploads and remove their temp files so disk never grows unbounded."""
+    while len(videos) > MAX_VIDEOS:
+        vid = next(iter(videos))
+        stale = videos.pop(vid)
+        video_info.pop(vid, None)
+        try:
+            os.unlink(stale)
+        except OSError:
+            pass
+        # Its rendered artifacts (charts + annotated mp4 + zip) go too.
+        shutil.rmtree(REPORT_DIR / vid, ignore_errors=True)
+        try:
+            (REPORT_DIR / f"bundle_{vid}.zip").unlink(missing_ok=True)
+        except OSError:
+            pass
+
+
+# video_id is generated server-side as an 8-char uuid slice — anything else is
+# a crafted path and must never reach a filesystem join.
+_ID_RE = re.compile(r"^[a-f0-9]{8}$")
+
+def valid_id(video_id: str) -> bool:
+    return bool(_ID_RE.match(video_id))
+
+
+RATE_LIMITS = {}
+RATE_WINDOW = 60
+RATE_MAX = 5
+
+def is_rate_limited(ip: str, bucket: str = "upload"):
     now = time.time()
-    stamps = [t for t in UPLOAD_LIMITS.get(ip, []) if now - t < 60]
-    if len(stamps) >= 5:
-        UPLOAD_LIMITS[ip] = stamps
+    # Drop fully-expired buckets so the dict cannot grow without bound.
+    for key in [k for k, v in RATE_LIMITS.items() if not v or now - v[-1] > RATE_WINDOW]:
+        RATE_LIMITS.pop(key, None)
+    key = f"{bucket}:{ip}"
+    stamps = [t for t in RATE_LIMITS.get(key, []) if now - t < RATE_WINDOW]
+    if len(stamps) >= RATE_MAX:
+        RATE_LIMITS[key] = stamps
         return True
     stamps.append(now)
-    UPLOAD_LIMITS[ip] = stamps
+    RATE_LIMITS[key] = stamps
     return False
 
 MAX_UPLOAD_BYTES = 500 * 1024 * 1024
@@ -109,58 +149,69 @@ async def upload(request: Request, file: UploadFile = File(...)):
     if is_rate_limited(client_ip):
         return JSONResponse({"error": "Rate limit exceeded. Please wait a minute."}, status_code=429)
 
-    if not file.content_type.startswith("video/"):
+    if not (file.content_type or "").startswith("video/"):
         return JSONResponse({"error": "Invalid file type. Only videos are allowed."}, status_code=400)
 
-    if hasattr(file, 'size') and file.size and file.size > MAX_UPLOAD_BYTES:
-        return JSONResponse({"error": "File too large. Maximum size is 500MB."}, status_code=413)
-
-    video_id = str(uuid.uuid4())[:8]
+    video_id = uuid.uuid4().hex[:8]
     path = UPLOAD_DIR / f"{video_id}.mp4"
 
-    # Clean up any previous temp uploads to avoid stale state
-    for old_path in UPLOAD_DIR.glob("*.mp4"):
-        try:
-            old_path.unlink()
-        except Exception:
-            pass
-
     print(f"[BACKEND] Received upload request: {file.filename}")
     try:
+        # Stream to disk with a running cap — never buffer an unbounded body first.
+        written = 0
         with open(path, "wb") as f:
-            shutil.copyfileobj(file.file, f)
-
-        file_size = os.path.getsize(path)
-        if file_size > MAX_UPLOAD_BYTES:
-            path.unlink()
-            return JSONResponse({"error": "File too large. Maximum size is 500MB."}, status_code=413)
-
-        print(f"[BACKEND] Successfully stored: {path} ({file_size} bytes)")
+            while True:
+                chunk = await file.read(1024 * 1024)
+                if not chunk:
+                    break
+                written += len(chunk)
+                if written > MAX_UPLOAD_BYTES:
+                    f.close()
+                    path.unlink(missing_ok=True)
+                    return JSONResponse({"error": "File too large. Maximum size is 500MB."}, status_code=413)
+                f.write(chunk)
+
+        print(f"[BACKEND] Successfully stored: {path} ({written} bytes)")
 
         videos[video_id] = str(path)
         video_info[video_id] = file.filename
-        evict_old(videos)
-        evict_old(video_info)
+        evict_videos()
         return {"video_id": video_id}
     except Exception as e:
+        path.unlink(missing_ok=True)
         print(f"[BACKEND] Upload failed: {str(e)}")
-        return JSONResponse({"error": str(e)}, status_code=500)
+        return JSONResponse({"error": "Upload failed."}, status_code=500)
+
+
+def get_video_path(video_id: str):
+    """Resolve an uploaded video, or None if the id is unknown/expired."""
+    if not valid_id(video_id):
+        return None
+    path = videos.get(video_id)
+    return path if path and os.path.exists(path) else None
 
 
 @app.get("/config/{video_id}")
 def config_endpoint(video_id: str):
-    path = videos.get(video_id)
-    cfg = get_optimal_config(path)
-    return cfg
+    path = get_video_path(video_id)
+    if not path:
+        return JSONResponse({"error": "Unknown or expired video_id"}, status_code=404)
+    return get_optimal_config(path)
 
 
 @app.get("/first-frame/{video_id}")
 def first_frame(video_id: str):
-    path = videos.get(video_id)
+    path = get_video_path(video_id)
+    if not path:
+        return JSONResponse({"error": "Unknown or expired video_id"}, status_code=404)
     cap = cv2.VideoCapture(path)
     ret, frame = cap.read()
     cap.release()
-    _, buf = cv2.imencode(".jpg", frame)
+    if not ret:
+        return JSONResponse({"error": "Could not decode the first frame of this video"}, status_code=422)
+    ok, buf = cv2.imencode(".jpg", frame)
+    if not ok:
+        return JSONResponse({"error": "Frame encoding failed"}, status_code=500)
     return Response(content=buf.tobytes(), media_type="image/jpeg")
 
 
@@ -171,6 +222,8 @@ def constants():
 
 @app.post("/reports/{video_id}")
 def generate_reports(video_id: str):
+    if not valid_id(video_id):
+        return JSONResponse({"error": "Invalid video_id", "files": []}, status_code=400)
     data = run_results.get(video_id)
     if not data:
         return {"error": "no results", "files": []}
@@ -188,6 +241,8 @@ def generate_reports(video_id: str):
 
 @app.get("/reports/{video_id}/{name}")
 def get_report(video_id: str, name: str):
+    if not valid_id(video_id):
+        return JSONResponse({"error": "Invalid video_id"}, status_code=400)
     safe_name = Path(name).name
     path = REPORT_DIR / video_id / safe_name
     if not path.resolve().is_relative_to(REPORT_DIR.resolve()):
@@ -210,6 +265,8 @@ def get_report(video_id: str, name: str):
 @app.get("/bundle/{video_id}")
 def download_all_reports(video_id: str):
     print(f"[BACKEND] ZIP request for {video_id}")
+    if not valid_id(video_id):
+        return JSONResponse({"error": "Invalid video_id"}, status_code=400)
     base_path = REPORT_DIR / video_id
     if not base_path.exists():
         print(f"[BACKEND] Error: {base_path} not found")
@@ -241,7 +298,7 @@ def download_all_reports(video_id: str):
     except Exception as e:
         import traceback
         print(f"[BACKEND] ZIP Error: {str(e)}\n{traceback.format_exc()}")
-        return JSONResponse({"error": str(e)}, status_code=500)
+        return JSONResponse({"error": "Could not build the download bundle."}, status_code=500)
 
 
 FEEDBACK_PATH = Path(tempfile.gettempdir()) / "urbanflow_feedback.json"
@@ -251,12 +308,18 @@ def send_feedback_email(api_key, feedback):
     try:
         resend.api_key = api_key
         
-        fb_type = feedback.get('type') or 'General'
+        # Everything below is interpolated into an HTML email — escape at the
+        # boundary so a "<script>" in free-text feedback stays inert.
+        def esc(v):
+            return html.escape(str(v), quote=True)
+
+        fb_type = esc(feedback.get('type') or 'General')
         rating = feedback.get('rating', 0)
-        details = feedback.get('details') or ""
-        usecase = feedback.get('usecase') or "Not specified"
-        emojis = feedback.get('emojis', {})
-        priorities = feedback.get('priorities', [])
+        rating = rating if isinstance(rating, int) and 0 <= rating <= 5 else 0
+        details = esc(feedback.get('details') or "")
+        usecase = esc(feedback.get('usecase') or "Not specified")
+        emojis = feedback.get('emojis', {}) or {}
+        priorities = [esc(p) for p in (feedback.get('priorities') or [])]
         
         # Check if it's stars-only (no emojis, no priorities, no text)
         has_emojis = any(v for v in emojis.values())
@@ -314,7 +377,7 @@ def send_feedback_email(api_key, feedback):
             """
 
         # Header with Rating
-        user_email = feedback.get('user_email', '')
+        user_email = esc(feedback.get('user_email', '') or '')
         user_email_html = ''
         if user_email:
             user_email_html = f"""
@@ -352,7 +415,7 @@ def send_feedback_email(api_key, feedback):
         resend.Emails.send({
             "from": "UrbanFlow <onboarding@resend.dev>",
             "to": "support.urbanflow365@gmail.com",
-            "subject": f"Feedback: {fb_type} - {rating}/5 Stars" + (f" [{feedback.get('user_email', '')}]" if feedback.get('user_email') else ""),
+            "subject": f"Feedback: {fb_type} - {rating}/5 Stars" + (f" [{user_email}]" if user_email else ""),
             "html": html_body
         })
         print(f"[BACKEND] Feedback email successfully transmitted via Resend.")
@@ -394,8 +457,8 @@ async def auth_onboard(request_data: dict):
 
 @app.post("/api/event")
 async def track_event(request_data: dict):
-    event = request_data.get("event", "UNKNOWN")
-    meta = request_data.get("meta", {})
+    event = str(request_data.get("event", "UNKNOWN"))[:64]
+    meta = str(request_data.get("meta", {}))[:256]
     print(f"[ANALYTICS] EVENT: {event} | {meta}")
     return {"status": "ok"}
 
@@ -403,9 +466,16 @@ async def track_event(request_data: dict):
 # =========== Feedback ===========
 
 @app.post("/api/feedback")
-async def submit_feedback(background_tasks: BackgroundTasks, request_data: dict = None):
+async def submit_feedback(request: Request, background_tasks: BackgroundTasks, request_data: dict = None):
     from datetime import datetime, timezone
+    client_ip = request.client.host if request.client else "unknown"
+    if is_rate_limited(client_ip, "feedback"):
+        return JSONResponse({"error": "Too many submissions. Please wait a minute."}, status_code=429)
+
     feedback = request_data or {}
+    # Free-text is stored and emailed — bound it so one request can't fill /tmp.
+    if isinstance(feedback.get("details"), str):
+        feedback["details"] = feedback["details"][:5000]
     feedback["timestamp"] = datetime.now(timezone.utc).isoformat()
     
     def write_feedback(fb):
@@ -434,18 +504,27 @@ async def submit_feedback(background_tasks: BackgroundTasks, request_data: dict
 @app.websocket("/ws/run")
 async def ws_run(ws: WebSocket):
     await ws.accept()
-    data = json.loads(await ws.receive_text())
+    try:
+        data = json.loads(await ws.receive_text())
+        video_id = data["video_id"]
+        line = data["line"]
+        cfg = dict(data["config"])
+        # The client owns these sliders, so clamp before they reach the engine.
+        cfg["detect_stride"] = min(10, max(1, int(cfg.get("detect_stride", 2) or 1)))
+        cfg["conf"] = min(0.95, max(0.01, float(cfg.get("conf", 0.12))))
+        cfg["iou"] = min(0.95, max(0.1, float(cfg.get("iou", 0.6))))
+    except Exception:
+        await ws.send_text(json.dumps({"error": "Malformed run request"}))
+        await ws.close()
+        return
 
-    video_id = data["video_id"]
-    line = data["line"]
-    cfg = data["config"]
     save_annotated = data.get("annotated_video", False)
     annotated_options = data.get("annotated_options", {"bbox": True, "track_id": True, "spatial": True})
-    report_format = data.get("report_format", "png")
+    report_format = "pdf" if data.get("report_format") == "pdf" else "png"
 
-    path = videos.get(video_id)
+    path = get_video_path(video_id)
     if not path:
-        await ws.send_text(json.dumps({"error": f"Unknown video_id: {video_id}"}))
+        await ws.send_text(json.dumps({"error": "Unknown or expired video_id"}))
         await ws.close()
         return
 
@@ -502,7 +581,8 @@ async def ws_run(ws: WebSocket):
         err_msg = traceback.format_exc()
         print(f"[BACKEND] Engine error for {video_id}:\n{err_msg}")
         try:
-            await ws.send_text(json.dumps({"error": str(e), "detail": err_msg}))
+            # Stack traces stay in the server log, never on the wire.
+            await ws.send_text(json.dumps({"error": "Processing failed. Please try again."}))
             await ws.close()
         except Exception:
             pass

backend/test_core.py

@@ -0,0 +1,92 @@
+"""
+Smallest check that fails if the counting / PCU / id-validation logic breaks.
+
+    python backend/test_core.py
+
+No framework on purpose — these are the branches that silently produce wrong
+numbers rather than crashing, so they need a tripwire.
+"""
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).parent))
+
+from geometry import _side, _point_to_segment_dist
+from pcu import compute_pcu, get_pcu_factor
+from speed import estimate_speeds
+from config import IMGSZ
+
+
+def test_side():
+    a, b = [0, 0], [10, 0]           # horizontal line
+    assert _side((5, 5), a, b) > 0, "above the line must be positive"
+    assert _side((5, -5), a, b) < 0, "below the line must be negative"
+    assert _side((5, 0), a, b) == 0, "on the line must be zero (skipped by engine)"
+
+
+def test_point_to_segment():
+    assert abs(_point_to_segment_dist(5, 3, 0, 0, 10, 0) - 3.0) < 1e-9
+    # Past the end of the segment: clamps to the endpoint, not the infinite line.
+    assert abs(_point_to_segment_dist(20, 0, 0, 0, 10, 0) - 10.0) < 1e-9
+    # Degenerate segment (both counting-line points identical) must not divide by zero.
+    assert abs(_point_to_segment_dist(4, 5, 1, 1, 1, 1) - 5.0) < 1e-9   # 3-4-5
+
+
+def test_pcu():
+    assert get_pcu_factor(4) == 3.0        # Bus
+    assert get_pcu_factor(7) == 0.5        # Two-wheeler
+    assert get_pcu_factor(999) == 1.0      # unknown class falls back to 1
+
+    # 2 buses in + 4 two-wheelers out = 2*3.0 + 4*0.5 = 8.0
+    out = compute_pcu({"4": 2}, {"7": 4})
+    assert out["pcu_in"] == 6.0, out
+    assert out["pcu_out"] == 2.0, out
+    assert out["total_pcu"] == 8.0, out
+    assert out["per_class"]["Bus"]["count"] == 2, out
+
+    empty = compute_pcu({}, {})
+    assert empty["total_pcu"] == 0.0 and empty["per_class"] == {}
+
+
+def test_speeds():
+    # One track moving 10px/frame, one barely moving, one too short to score.
+    tracks = {
+        1: [(0, 0, 0), (1, 10, 0), (2, 20, 0)],
+        2: [(0, 0, 0), (1, 1, 0), (2, 2, 0)],
+        3: [(0, 5, 5)],
+    }
+    res = estimate_speeds(tracks)
+    assert 3 not in res["per_track"], "single-sample tracks have no speed"
+    assert res["per_track"][1]["px_per_frame"] == 10.0
+    assert res["per_track"][1]["category"] == "fast"
+    assert res["per_track"][2]["category"] == "slow"
+    assert sum(res["distribution"].values()) == 100.0
+
+    blank = estimate_speeds({})
+    assert blank["distribution"] == {"slow": 0, "normal": 0, "fast": 0}
+
+
+def test_id_validation():
+    # Imported lazily: server.py pulls in torch/ultralytics, which is slow and
+    # unavailable outside the container. Re-check the regex contract instead.
+    import re
+    id_re = re.compile(r"^[a-f0-9]{8}$")
+    assert id_re.match("a1b2c3d4")
+    assert not id_re.match("../../etc"), "traversal must not validate"
+    assert not id_re.match("A1B2C3D4"), "uuid4().hex is lowercase"
+    assert not id_re.match("a1b2c3d"), "wrong length must not validate"
+
+
+def test_imgsz_matches_engine():
+    # engine.py hardcodes imgsz to match the compiled OpenVINO graph; if these
+    # two ever drift, inference silently runs at the wrong input size.
+    engine_src = (Path(__file__).parent / "engine.py").read_text(encoding="utf-8")
+    assert f"imgsz={IMGSZ}," in engine_src, f"engine.py must call track(imgsz={IMGSZ})"
+
+
+if __name__ == "__main__":
+    for name, fn in sorted(globals().items()):
+        if name.startswith("test_") and callable(fn):
+            fn()
+            print(f"  ok  {name}")
+    print("all core checks passed")

frontend/css/initial.css

@@ -271,11 +271,6 @@ body::-webkit-scrollbar {
         padding-bottom: 0 !important;
     }
 
-    main > div:first-child ul {
-        display: inline-block;
-        text-align: left;
-    }
-
     /* Step card — full width */
     main > div:last-child {
         max-width: 100% !important;
@@ -342,32 +337,6 @@ body::-webkit-scrollbar {
         justify-content: center;
     }
 
-    /* Feature bullets */
-    .hero-text-section ul {
-        display: flex !important;
-        flex-direction: column !important;
-        gap: 4px !important;
-        width: 100%;
-        text-align: left;
-    }
-
-    .hero-text-section ul li {
-        display: flex !important;
-        align-items: flex-start !important;
-        font-size: 14px !important;
-        font-weight: 500 !important;
-        line-height: 1.6 !important;
-        padding: 5px 0;
-        color: #a89f97 !important;
-    }
-    
-    .hero-text-section ul li i {
-        font-size: 14px !important;
-        margin-right: 10px !important;
-        margin-top: 2px;
-        flex-shrink: 0;
-    }
-
     /* ---- Step card: full width, right below bullets ---- */
     .step-card-section {
         max-width: 100% !important;

frontend/css/shared.css

@@ -5,13 +5,8 @@
    ============================================= */
 
 /* ---- Typography Colors ---- */
-.text-accent  { color: #c89a6c !important; }
-.text-primary { color: #f0ece6 !important; }
-.text-secondary { color: #a89f97 !important; }
-.text-muted   { color: #555 !important; }
-.text-dim     { color: #444 !important; }
-.text-cocoa   { color: #8b5e3c !important; }
-.bg-accent    { background-color: #c89a6c !important; }
+.text-accent { color: #c89a6c !important; }
+.text-muted  { color: #555 !important; }
 
 /* ---- Modal Overlay ---- */
 .modal-overlay {
@@ -72,114 +67,6 @@
     margin-bottom: 20px;
 }
 
-/* ---- Modal List (legal content) ---- */
-.modal-list {
-    color: #a89f97;
-    font-size: 11px;
-    line-height: 1.9;
-    padding-left: 16px;
-    list-style: disc;
-    text-align: left;
-}
-.modal-list strong {
-    color: #f0ece6;
-}
-.modal-list .hl-accent {
-    color: #c89a6c;
-    font-weight: 700;
-}
-
-/* ---- Legal Section Label ---- */
-.legal-section-label {
-    color: #c89a6c;
-    font-size: 11px;
-    font-weight: 700;
-    margin-bottom: 6px;
-    text-align: left;
-}
-
-/* ---- Legal Footer ---- */
-.legal-footer-text {
-    color: #555;
-    font-size: 10px;
-    margin-top: 20px;
-    text-align: left;
-}
-
-/* ---- Legal Button (footer/sidebar links) ---- */
-.legal-btn {
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.2em;
-    color: #a89f97;
-    background: none;
-    border: none;
-    cursor: pointer;
-    transition: color 0.2s;
-}
-.legal-btn:hover {
-    color: #c89a6c;
-}
-
-/* ---- Section Label ---- */
-.section-label {
-    font-size: 10px;
-    font-weight: 800;
-    text-transform: uppercase;
-    letter-spacing: 0.2em;
-    color: #a89f97;
-}
-
-/* ---- Check List (hero feature bullets) ---- */
-.check-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-.check-list li {
-    display: flex;
-    align-items: center;
-    color: #a89f97;
-}
-.check-list li::before {
-    content: '\f00c'; /* fa-check */
-    font-family: 'Font Awesome 6 Free';
-    font-weight: 900;
-    color: #c89a6c;
-    font-size: 1.1rem;
-    margin-right: 12px;
-    flex-shrink: 0;
-    width: 1.5rem;
-    text-align: center;
-}
-@media (min-width: 768px) {
-    .check-list li::before {
-        margin-right: 20px;
-    }
-}
-
-/* ---- Bullet List (about tab) ---- */
-.bullet-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-.bullet-list li {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-}
-.bullet-list li::before {
-    content: '\f111'; /* fa-circle */
-    font-family: 'Font Awesome 6 Free';
-    font-weight: 900;
-    color: #c89a6c;
-    font-size: 5px;
-    margin-top: 7px;
-    flex-shrink: 0;
-}
-
 /* ---- Keyboard Shortcut Row ---- */
 .shortcut-row {
     display: flex;
@@ -207,75 +94,5 @@
     font-family: 'JetBrains Mono', monospace;
 }
 
-/* ---- Panel Card (run tab panels) ---- */
-.panel-card {
-    background-color: #0a0a0a;
-    border-radius: 12px;
-    border: 1px solid #2a2a2a;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-}
-.panel-header {
-    padding: 16px 24px;
-    border-bottom: 1px solid #1a1a1a;
-    background: #050505;
-}
-.panel-header h3 {
-    font-weight: 700;
-    font-size: 0.875rem;
-    color: #f0ece6;
-}
-.panel-body {
-    padding: 24px;
-}
-
-/* ---- Step Titles (initial.html steps) ---- */
-.step-title {
-    font-size: 1.875rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    text-align: center;
-    color: #f0ece6;
-}
-.step-subtitle {
-    font-size: 13px;
-    font-weight: 500;
-    margin-bottom: 2rem;
-    text-align: center;
-    color: #a89f97;
-}
-
-/* ---- Mobile Menu Item ---- */
-.mob-menu-item {
-    width: 100%;
-    text-align: left;
-    padding: 10px 16px;
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.2em;
-    color: #a89f97;
-    background: none;
-    border: none;
-    border-bottom: 1px solid #1a1a1a;
-    cursor: pointer;
-    transition: color 0.15s, background 0.15s;
-}
-.mob-menu-item:hover {
-    color: #f0ece6;
-    background: #111;
-}
-
-/* ---- Copyright Text ---- */
-.copyright-text {
-    font-size: 11px;
-    font-weight: 500;
-    color: #555;
-}
-
 /* ---- Utility ---- */
 .hidden { display: none !important; }
-.border-subtle { border-color: #2a2a2a; }
-.border-dim { border-color: #1a1a1a; }
-.bg-surface { background-color: #050505; }

frontend/css/vehicles.css

@@ -1,1525 +1,1510 @@
-/* =============================================
-   UrbanFlow — vehicles.css (Mobile-First)
-   Desktop layout preserved exactly.
-   Mobile: bottom nav, touch targets, stacked cards.
-   ============================================= */
-
-:root {
-    --cocoa: #8b5e3c;
-    --cocoa-l: #c89a6c;
-    --cocoa-xl: #d4b08a;
-    --mob-nav-h: 68px;
-    /* bottom nav height on mobile */
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-.hidden {
-    display: none !important;
-}
-
-html {
-    overflow: hidden;
-    height: 100%;
-}
-
-body {
-    font-family: 'Montserrat', sans-serif;
-    background-color: #000000;
-    color: #f0ece6;
-    -webkit-tap-highlight-color: transparent;
-    overscroll-behavior: none;
-}
-
-.mono-font {
-    font-family: 'JetBrains Mono', monospace;
-}
-
-/* ---- Scrollbar: hide globally on mobile, keep #class-breakdown visible ---- */
-@media (max-width: 1023px) {
-    * {
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-    }
-
-    *::-webkit-scrollbar {
-        display: none;
-    }
-
-    /* Vehicle Classification section keeps its scrollbar on mobile */
-    #class-breakdown {
-        scrollbar-width: thin !important;
-        -ms-overflow-style: auto !important;
-    }
-
-    #class-breakdown::-webkit-scrollbar {
-        display: block !important;
-        width: 4px !important;
-    }
-
-    #class-breakdown::-webkit-scrollbar-track {
-        background: #000000 !important;
-    }
-
-    #class-breakdown::-webkit-scrollbar-thumb {
-        background: #222222 !important;
-        border-radius: 4px !important;
-    }
-
-    #class-breakdown::-webkit-scrollbar-thumb:hover {
-        background: #333333 !important;
-    }
-}
-
-/* ---- Notification Glow ---- */
-@keyframes glow-green {
-    0% {
-        color: #f0ece6;
-        filter: drop-shadow(0 0 0px #4ade80);
-    }
-
-    50% {
-        color: #4ade80;
-        filter: drop-shadow(0 0 8px #4ade80);
-    }
-
-    100% {
-        color: #f0ece6;
-        filter: drop-shadow(0 0 0px #4ade80);
-    }
-}
-
-.notify-glow i {
-    animation: glow-green 1.5s infinite ease-in-out !important;
-}
-
-/* ---- Info tooltip ---- */
-.info-wrap {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    margin-left: 6px;
-}
-
-.info-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    /* slightly larger for touch */
-    height: 18px;
-    border-radius: 50%;
-    background: #444444 !important;
-    color: #ffffff !important;
-    font-size: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.info-btn:hover,
-.info-btn:active {
-    background: #666666 !important;
-}
-
-.info-tip {
-    display: none;
-    position: fixed;
-    z-index: 9999;
-    background: #0a0a0a;
-    color: #aaaaaa;
-    font-size: 10px;
-    font-weight: 500;
-    line-height: 1.4;
-    padding: 8px 12px;
-    border-radius: 6px;
-    max-width: 240px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
-    border: 1px solid #222222;
-    pointer-events: none;
-    text-transform: none;
-    letter-spacing: normal;
-}
-
-/* ---- Mobile Top Bar ---- */
-.mobile-top-bar {
-    display: none;
-}
-
-@media (max-width: 1023px) {
-    .mobile-top-bar {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 58px;
-        background: #000000;
-        border-bottom: 1px solid #1a1a1a;
-        z-index: 35;
-        flex-shrink: 0;
-    }
-
-    #legal-menu {
-        animation: menuFadeIn 0.2s ease-out forwards;
-        transform-origin: top right;
-    }
-
-    @keyframes menuFadeIn {
-        from {
-            opacity: 0;
-            transform: translateY(-10px) scale(0.95);
-        }
-
-        to {
-            opacity: 1;
-            transform: translateY(0) scale(1);
-        }
-    }
-}
-
-/* ---- Sidebar nav states ---- */
-.nav-item-active {
-    background-color: #111111 !important;
-    color: var(--cocoa-xl) !important;
-    border-left: 2px solid var(--cocoa-l) !important;
-}
-
-.nav-item-inactive {
-    color: #555555 !important;
-}
-
-.nav-item-inactive:hover {
-    color: #f0ece6 !important;
-    background-color: #050505 !important;
-}
-
-/* ---- Card overrides ---- */
-.bg-white {
-    background-color: #0a0a0a !important;
-}
-
-.border-slate-200,
-.border-slate-100,
-.border-slate-50,
-.border-neutral-800,
-.border-neutral-900 {
-    border-color: #2a2a2a !important;
-}
-
-.bg-slate-50\/50,
-.bg-slate-50,
-.bg-slate-900,
-.bg-neutral-900 {
-    background-color: #0c0c0c !important;
-}
-
-.text-slate-900,
-.text-slate-800,
-.text-slate-700,
-.text-neutral-900 {
-    color: #ffffff !important;
-}
-
-.text-slate-600,
-.text-slate-500,
-.text-slate-400,
-.text-neutral-500,
-.text-neutral-400 {
-    color: #888888 !important;
-}
-
-.shadow-sm {
-    box-shadow: none !important;
-}
-
-/* ---- Toggle control ---- */
-.toggle-track {
-    width: 36px;
-    /* slightly wider for touch */
-    height: 20px;
-    border-radius: 999px;
-    background: #1a1a1a;
-    border: 1px solid #333;
-    position: relative;
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: background 0.2s ease;
-}
-
-.toggle-track.active {
-    background: #c89a6c !important;
-    border-color: #c89a6c !important;
-}
-
-.toggle-thumb {
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: #555555;
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    transition: all 0.2s ease;
-}
-
-.toggle-track.active .toggle-thumb {
-    transform: translateX(16px);
-    background: #ffffff;
-    /* pure white for contrast on gold track */
-}
-
-/* ---- Custom select ---- */
-.custom-select {
-    appearance: none;
-    background-color: #111111;
-    border: 1px solid #222222;
-    border-radius: 6px;
-    padding: 4px 24px 4px 10px;
-    font-size: 11px;
-    font-weight: 600;
-    color: #ffffff;
-    outline: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666666'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-    background-size: 12px;
-}
-
-/* ---- Stepper ---- */
-.s-stepper {
-    display: inline-flex;
-    border: 1px solid #222222;
-    border-radius: 6px;
-    background: #111111;
-    overflow: hidden;
-    flex-shrink: 0;
-}
-
-.s-stepper button {
-    padding: 8px 12px;
-    /* larger touch target than original 4px 8px */
-    color: #666666;
-    font-size: 14px;
-    min-width: 36px;
-    min-height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.s-stepper button:hover,
-.s-stepper button:active {
-    background: #1a1a1a;
-    color: #ffffff;
-}
-
-.s-stepper .s-val {
-    min-width: 44px;
-    text-align: center;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    font-weight: 700;
-    color: #ffffff;
-    padding: 4px 0;
-    border-left: 1px solid #222222;
-    border-right: 1px solid #222222;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* ---- Settings row ---- */
-.s-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 14px 0;
-    /* slightly more vertical padding */
-    border-bottom: 1px solid #1a1a1a;
-    gap: 12px;
-}
-
-.s-row:last-child {
-    border-bottom: none;
-}
-
-.s-row>div:first-child {
-    flex: 1;
-    min-width: 0;
-}
-
-/* ---- Progress bar ---- */
-#proc-bar {
-    background-color: var(--cocoa-l) !important;
-}
-
-#proc-label {
-    color: #ffffff !important;
-}
-
-/* ---- Disabled rows ---- */
-.s-row.disabled {
-    opacity: 0.65 !important;
-}
-
-.s-row.disabled .s-stepper,
-.s-row.disabled .custom-select,
-.s-row.disabled .toggle-track,
-.s-row.disabled .chip-container,
-.s-row.disabled .uf-select-wrap,
-.s-row.disabled .uf-select-trigger {
-    pointer-events: none !important;
-    opacity: 0.5 !important;
-}
-
-/* Force-collapse the dropdown panel when row is locked */
-.s-row.disabled .uf-select-dropdown {
-    display: none !important;
-}
-
-.s-row.disabled .info-wrap {
-    pointer-events: auto !important;
-    opacity: 1 !important;
-}
-
-#btn-start-processing {
-    font-family: 'Montserrat', sans-serif !important;
-}
-
-/* ---- Chips ---- */
-.chip-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid #1a1a1a;
-    transition: all 0.3s ease;
-}
-
-.chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 14px;
-    /* larger than original 6px 14px */
-    border-radius: 9999px;
-    font-size: 10px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    user-select: none;
-    border: 1px solid #333333;
-    background: rgba(255, 255, 255, 0.03);
-    color: #888888;
-    min-height: 36px;
-}
-
-.chip.active {
-    background: var(--cocoa-l);
-    color: #000000;
-    border-color: var(--cocoa-l);
-}
-
-.chip.frozen {
-    background: rgba(255, 255, 255, 0.4);
-    color: #000000;
-    border-color: transparent;
-    cursor: default !important;
-    pointer-events: none;
-}
-
-.chip:hover {
-    border-color: #666666;
-}
-
-.chip.active:hover {
-    background: var(--cocoa-xl);
-}
-
-.chip i {
-    font-size: 9px;
-}
-
-.hidden-chip-container {
-    display: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    height: 0 !important;
-}
-
-/* ---- Toast ---- */
-#toast-container {
-    position: fixed;
-    bottom: calc(var(--mob-nav-h) + 12px);
-    /* above bottom nav on mobile */
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 10000;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    pointer-events: none;
-    width: 90%;
-    max-width: 360px;
-}
-
-.toast {
-    background: #111;
-    border: 1px solid #2a2a2a;
-    color: #f0ece6;
-    font-size: 11px;
-    font-weight: 600;
-    padding: 12px 18px;
-    border-radius: 10px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    pointer-events: auto;
-    animation: toastIn 0.3s ease-out;
-    width: 100%;
-}
-
-.toast.toast-out {
-    animation: toastOut 0.3s ease-in forwards;
-}
-
-.toast-success {
-    border-color: #166534;
-}
-
-.toast-success i {
-    color: #22c55e;
-}
-
-.toast-error {
-    border-color: #7f1d1d;
-}
-
-.toast-error i {
-    color: #ef4444;
-}
-
-.toast-info i {
-    color: var(--cocoa-l);
-}
-
-@keyframes toastIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes toastOut {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-}
-
-/* ---- Stats empty overlay ---- */
-.stats-empty-overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 50;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: rgba(10, 10, 10, 0.85);
-    backdrop-filter: blur(8px);
-    border-radius: 12px;
-}
-
-/* ---- Feedback form ---- */
-.fb-textarea {
-    background: #111;
-    border: 1px solid #2a2a2a;
-    border-radius: 8px;
-    color: #f0ece6;
-    font-size: 12px;
-    padding: 12px;
-    width: 100%;
-    min-height: 120px;
-    resize: vertical;
-    font-family: 'Inter', sans-serif;
-}
-
-.fb-textarea:focus {
-    outline: none;
-    border-color: var(--cocoa-l);
-}
-
-.fb-select {
-    background: #111;
-    border: 1px solid #2a2a2a;
-    border-radius: 8px;
-    color: #f0ece6;
-    font-size: 11px;
-    padding: 10px 12px;
-    /* taller for touch */
-    width: 100%;
-    font-family: 'Inter', sans-serif;
-    min-height: 44px;
-}
-
-.fb-select:focus {
-    outline: none;
-    border-color: var(--cocoa-l);
-}
-
-.fb-stars {
-    display: flex;
-    gap: 8px;
-}
-
-.fb-star {
-    font-size: 28px;
-    /* larger for mobile tapping */
-    color: #333;
-    cursor: pointer;
-    transition: color 0.15s;
-    min-width: 36px;
-    min-height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.fb-star.active,
-.fb-star:hover {
-    color: var(--cocoa-l);
-}
-
-.fb-chip {
-    background: #050505;
-    border: 1px solid #222;
-    border-radius: 8px;
-    color: #666;
-    font-size: 10px;
-    font-weight: 700;
-    padding: 14px 12px;
-    /* taller for touch */
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-align: center;
-    text-transform: uppercase;
-    min-height: 44px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.fb-chip:hover {
-    border-color: #444;
-    color: #999;
-}
-
-.fb-chip.active {
-    border-color: var(--cocoa-l);
-    background: #111;
-    color: #fff;
-    box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
-}
-
-.fb-emoji-btn {
-    background: #111;
-    border: 1px solid #2a2a2a;
-    border-radius: 8px;
-    color: #555;
-    flex: 1;
-    text-align: center;
-    padding: 12px 4px;
-    /* taller */
-    cursor: pointer;
-    transition: all 0.2s ease;
-    min-height: 64px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.fb-emoji-btn:hover {
-    border-color: #444;
-    color: #888;
-}
-
-.fb-emoji-btn.active {
-    border-color: var(--cocoa-l);
-    background: #1a1a1a;
-    color: var(--cocoa-l);
-    box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
-}
-
-/* =============================================
-   DESKTOP (≥1024px) — original layout intact
-   ============================================= */
-@media (min-width: 1024px) {
-
-    /* Sidebar visible */
-    aside.w-60 {
-        display: flex !important;
-    }
-
-    /* Top mobile nav hidden */
-    .mobile-nav {
-        display: none !important;
-    }
-
-    /* Bottom mobile nav hidden */
-    .mobile-bottom-nav {
-        display: none !important;
-    }
-
-    /* Main — no bottom padding needed */
-    main {
-        padding-bottom: 1rem !important;
-    }
-
-    /* Toast — desktop position: bottom-right */
-    #toast-container {
-        bottom: 20px;
-        left: unset;
-        right: 20px;
-        transform: none;
-        width: auto;
-        align-items: flex-end;
-    }
-
-    /* Settings — 2 column grid */
-    #tab-settings .grid {
-        grid-template-columns: repeat(2, 1fr) !important;
-    }
-
-    /* Run details — multi-column grids preserved */
-    #run-results-content {
-        grid-template-columns: repeat(3, 1fr) !important;
-    }
-
-    .grid-cols-2 {
-        grid-template-columns: repeat(2, 1fr) !important;
-    }
-
-    .grid-cols-3 {
-        grid-template-columns: repeat(3, 1fr) !important;
-    }
-
-    /* Reports grid */
-    #reports-grid,
-    #reports-pending {
-        grid-template-columns: repeat(2, 1fr) !important;
-    }
-
-    /* About grid */
-    #tab-about .grid.grid-cols-3 {
-        grid-template-columns: repeat(3, 1fr) !important;
-    }
-
-
-
-    /* Insights panel */
-    #insights-panel .grid {
-        grid-template-columns: repeat(2, 1fr) !important;
-    }
-}
-
-/* =============================================
-   MOBILE (< 1024px) — full mobile overhaul
-   ============================================= */
-@media (max-width: 1023px) {
-
-    /* --- Hide desktop sidebar --- */
-    aside.w-60 {
-        display: none !important;
-    }
-
-    /* --- Hide old top mobile nav bar --- */
-    .mobile-nav {
-        display: none !important;
-    }
-
-    /* --- Body layout --- */
-    body {
-        height: 100dvh;
-        /* dynamic viewport height — accounts for mobile browser chrome */
-        overflow: hidden;
-    }
-
-    /* --- Main content — room for top and bottom nav --- */
-    main {
-        padding: 70px 12px calc(var(--mob-nav-h) + 8px) 12px !important;
-        gap: 12px !important;
-        display: flex !important;
-        flex-direction: column !important;
-        height: 100dvh !important;
-    }
-
-    /* --- Tab Scrolling Fixes — force flex-1 to push progress bar down --- */
-    #tab-about,
-    #tab-overview,
-    #tab-run-details,
-    #tab-reports,
-    #tab-settings,
-    #tab-help,
-    #tab-feedback {
-        flex: 1 !important;
-        min-height: 0 !important;
-        padding-bottom: 20px !important;
-        overscroll-behavior: contain;
-        -webkit-overflow-scrolling: touch;
-        overflow-y: auto !important;
-    }
-
-    /* --- About tab specific spacing --- */
-    #tab-about .space-y-8 {
-        gap: 16px !important;
-    }
-
-    #tab-about .pt-8 {
-        padding-top: 16px !important;
-    }
-
-    #tab-overview:not(.hidden) {
-        display: flex !important;
-        flex-direction: column !important;
-        overflow-y: auto !important;
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch;
-        overscroll-behavior: contain;
-        padding-bottom: calc(var(--mob-nav-h) + 24px) !important;
-        gap: 16px !important;
-    }
-
-    #tab-overview>div:not(#stats-empty-state) {
-        grid-column: span 1 !important;
-        min-height: 280px;
-        flex-shrink: 0;
-    }
-
-    .stats-empty-overlay {
-        position: fixed !important;
-        top: 58px;
-        /* below mobile top bar */
-        left: 0;
-        right: 0;
-        bottom: var(--mob-nav-h);
-        height: auto !important;
-        z-index: 100;
-        background: rgba(0, 0, 0, 0.98);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
-    /* CRITICAL: hide overlay when its parent tab is hidden */
-    #tab-overview.hidden .stats-empty-overlay {
-        display: none !important;
-    }
-
-    /* Hide charts when curtain is up to prevent scroll jank */
-    #tab-overview.curtain-active {
-        overflow: hidden !important;
-    }
-
-    /* --- Settings tab — tighter layout --- */
-    #tab-settings>div[class*="grid"] {
-        display: flex !important;
-        flex-direction: column !important;
-        gap: 12px !important;
-    }
-
-    #tab-settings {
-        overflow-x: hidden !important;
-    }
-
-    /* Collapse chip panel completely when not shown — removes gap */
-    #chip-selector.hidden-chip-container {
-        display: none !important;
-        margin: 0 !important;
-        padding: 0 !important;
-        height: 0 !important;
-    }
-
-    /* When visible, give it breathing room */
-    #chip-selector:not(.hidden-chip-container) {
-        display: flex !important;
-        flex-wrap: wrap !important;
-        gap: 8px !important;
-        margin-top: 12px !important;
-        padding: 0 !important;
-    }
-
-    /* Ensure all s-row items are uniform flex rows */
-    .s-row {
-        display: flex !important;
-        flex-direction: row !important;
-        flex-wrap: nowrap !important;
-        align-items: center !important;
-        justify-content: space-between !important;
-        padding: 14px 0 !important;
-        border-bottom: 1px solid #1a1a1a !important;
-        gap: 12px !important;
-    }
-
-    .s-row:last-child {
-        border-bottom: none !important;
-    }
-
-    /* Never let mobile flex override Tailwind .hidden utility */
-    .s-row.hidden {
-        display: none !important;
-    }
-
-    /* chip-selector sits as a sibling below the annotated s-row on mobile */
-    #chip-selector:not(.hidden-chip-container) {
-        margin-top: 0 !important;
-        border-top: none !important;
-        padding-top: 0 !important;
-        padding-bottom: 12px !important;
-    }
-
-    /* Lock toggle in annotated row — must never wrap or shrink */
-    .s-row[data-param="annotated"]>.toggle-track {
-        flex-shrink: 0 !important;
-        flex-grow: 0 !important;
-        flex-basis: 36px !important;
-        width: 36px !important;
-        min-width: 36px !important;
-        align-self: center !important;
-    }
-
-    /* Label side must absorb remaining space and never overflow */
-    .s-row[data-param="annotated"]>div:first-child {
-        flex: 1 1 0 !important;
-        min-width: 0 !important;
-        overflow: hidden !important;
-    }
-
-    .s-stepper {
-        width: 140px !important;
-        /* Compact fixed width */
-        scale: 0.9;
-        transform-origin: right;
-        display: inline-flex !important;
-    }
-
-    .toggle-track {
-        width: 36px !important;
-        scale: 0.9;
-        transform-origin: right;
-    }
-
-    @media (max-width: 480px) {
-        .s-row {
-            flex-direction: row !important;
-            flex-wrap: nowrap !important;
-            align-items: center !important;
-            justify-content: space-between !important;
-            gap: 12px !important;
-            padding: 10px 16px !important;
-            width: 100% !important;
-            box-sizing: border-box !important;
-        }
-
-        /* chip panel below annotated row — remove extra top gap */
-        #chip-selector:not(.hidden-chip-container) {
-            margin-top: 0 !important;
-            padding-bottom: 12px !important;
-            padding-left: 16px !important;
-            padding-right: 16px !important;
-            border-top: none !important;
-        }
-
-        .s-row {
-            padding: 12px 16px !important;
-        }
-
-        #tab-run-details .p-8 {
-            padding: 20px !important;
-        }
-
-        #run-results-content {
-            grid-template-columns: 1fr !important;
-            gap: 16px !important;
-        }
-
-        #panel-video .flex,
-        #panel-perf .flex,
-        #panel-model .flex,
-        #panel-infer .flex {
-            padding-bottom: 8px !important;
-        }
-
-        .s-row .info-wrap {
-            display: inline-flex !important;
-            vertical-align: middle;
-        }
-
-        .s-row>div:first-child {
-            width: auto !important;
-            max-width: 75% !important;
-            flex: 1 !important;
-        }
-
-        .toggle-track {
-            width: 36px !important;
-            min-width: 36px !important;
-            height: 20px !important;
-            flex-shrink: 0 !important;
-            display: block !important;
-            position: relative !important;
-        }
-
-        #run-results-card .text-[10px] {
-            font-size: 9px !important;
-            letter-spacing: 0.05em !important;
-        }
-
-        .s-row>.s-stepper {
-            width: 130px !important;
-            flex-shrink: 0 !important;
-            display: inline-flex !important;
-            flex-direction: row !important;
-        }
-
-        .chip-container {
-            display: grid !important;
-            grid-template-columns: 1fr 1fr !important;
-            gap: 6px !important;
-            margin-top: 12px !important;
-            padding: 10px !important;
-            background: rgba(255, 255, 255, 0.03);
-            border-radius: 8px;
-            border: 1px solid #1a1a1a;
-            width: 100% !important;
-            box-sizing: border-box !important;
-        }
-
-        .chip {
-            padding: 6px !important;
-            font-size: 9px !important;
-            min-height: 32px !important;
-            border-radius: 6px !important;
-            justify-content: center !important;
-            width: 100% !important;
-            white-space: nowrap !important;
-        }
-
-        .s-stepper {
-            width: 130px !important;
-            min-width: 130px !important;
-            display: inline-flex !important;
-            flex-direction: row !important;
-            align-items: center !important;
-            justify-content: space-between !important;
-            transform-origin: right !important;
-        }
-
-        .toggle-track {
-            transform-origin: right !important;
-        }
-    }
-
-    /* --- Progress bar wrapper — remove extra margin to fix huge gap --- */
-    #progress-bar-wrapper {
-        width: 100% !important;
-        max-width: 100% !important;
-        box-sizing: border-box !important;
-        margin-top: auto !important;
-        margin-bottom: 4px !important;
-        padding: 8px 12px !important;
-        flex-direction: column !important;
-        align-items: flex-start !important;
-        gap: 6px !important;
-        position: relative;
-        z-index: 10;
-    }
-
-    #progress-bar-wrapper>div:first-child {
-        width: 100% !important;
-        flex: 1 !important;
-        min-width: 0 !important;
-        margin-right: 0 !important;
-    }
-
-    #progress-bar-wrapper>div:last-child {
-        width: 100% !important;
-        justify-content: space-between !important;
-        font-size: 10px !important;
-    }
-
-    /* --- All other grids collapse to single column --- */
-    .grid-cols-3,
-    .grid-cols-2,
-    .lg\:grid-cols-2,
-    .xl\:grid-cols-3 {
-        grid-template-columns: 1fr !important;
-    }
-
-    /* --- Run details tab --- */
-    #run-results-content {
-        grid-template-columns: 1fr !important;
-    }
-
-    #tab-run-details .grid-cols-2,
-    #tab-run-details .grid-cols-3 {
-        grid-template-columns: 1fr !important;
-    }
-
-    /* --- Reports grid --- */
-    #reports-grid,
-    #reports-pending {
-        grid-template-columns: 1fr !important;
-    }
-
-    /* --- About tab grid --- */
-    #tab-about .grid.grid-cols-3 {
-        grid-template-columns: 1fr !important;
-    }
-
-    /* --- Post-process cards --- */
-    #post-process-cards {
-        grid-template-columns: 1fr !important;
-    }
-
-    /* --- Insights panel --- */
-    #insights-panel .grid {
-        grid-template-columns: 1fr !important;
-    }
-
-    /* --- Feedback tab --- */
-    #tab-feedback .grid {
-        grid-template-columns: 1fr !important;
-    }
-
-    /* --- About tab cards --- */
-    #tab-about .bg-black.border.rounded-xl {
-        padding: 20px !important;
-    }
-
-    /* --- Stepper — ensure full tap area --- */
-    .s-stepper button {
-        padding: 10px 14px;
-        min-width: 40px;
-        min-height: 40px;
-    }
-
-    /* --- s-row label text — allow wrap --- */
-    .s-row>div:first-child .text-xs {
-        font-size: 11px;
-    }
-
-    /* --- Help accordion buttons --- */
-    #tab-help button.w-full {
-        min-height: 52px;
-        padding: 14px 16px !important;
-    }
-
-    /* --- Feedback priority chips grid --- */
-    #fb-priorities {
-        grid-template-columns: 1fr !important;
-    }
-
-    /* --- Keyboard shortcut modal --- */
-    #appModal-shortcutsModal>div {
-        max-width: 95% !important;
-        padding: 20px !important;
-    }
-
-    /* --- Privacy / Terms modals --- */
-    [id^="appModal-"]>div {
-        max-width: 95% !important;
-        max-height: 80dvh !important;
-        overflow-y: auto !important;
-    }
-
-    #tab-overview>div:last-child {
-        min-height: 300px !important;
-        padding-bottom: 4px !important;
-        margin-bottom: 0 !important;
-    }
-
-    /* --- Vehicle Classification Internal Scroll --- */
-    #tab-overview>div:nth-child(4) {
-        max-height: 380px !important;
-        display: flex !important;
-        flex-direction: column !important;
-    }
-
-    #tab-overview>div:nth-child(4) #class-breakdown {
-        flex: 1 !important;
-        overflow-y: auto !important;
-        min-height: 0 !important;
-    }
-}
-
-/* =============================================
-   BOTTOM NAVIGATION BAR — mobile only
-   ============================================= */
-.mobile-bottom-nav {
-    display: none;
-    /* hidden by default, shown on mobile */
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 68px;
-    background: #000000;
-    border-top: 1px solid #1a1a1a;
-    z-index: 40;
-    align-items: stretch;
-}
-
-.mob-nav-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 3px;
-    cursor: pointer;
-    color: #444444;
-    font-size: 0;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    transition: color 0.15s ease;
-    border: none;
-    background: none;
-    padding: 8px 2px;
-    -webkit-tap-highlight-color: transparent;
-}
-
-.mob-nav-item i {
-    font-size: 22px;
-    transition: color 0.15s ease;
-}
-
-.mob-nav-item.active {
-    color: var(--cocoa-l);
-}
-
-.mob-nav-item.active i {
-    color: var(--cocoa-l);
-}
-
-.mob-nav-item:active {
-    color: var(--cocoa-xl);
-}
-
-/* Show bottom nav only on mobile */
-@media (max-width: 1023px) {
-    .mobile-bottom-nav {
-        display: flex !important;
-    }
-}
-
-/* =============================================
-   MEDIUM TABLET (640px–1023px) adjustments
-   ============================================= */
-@media (min-width: 640px) and (max-width: 1023px) {
-
-    /* 2-column grids on tablet where it fits */
-    #tab-overview>div {
-        min-height: 280px;
-    }
-
-    #reports-grid,
-    #reports-pending {
-        grid-template-columns: repeat(2, 1fr) !important;
-    }
-
-    #fb-priorities {
-        grid-template-columns: repeat(2, 1fr) !important;
-    }
-
-    #tab-about .grid.grid-cols-3 {
-        grid-template-columns: repeat(2, 1fr) !important;
-    }
-}
-
-/* =============================================
-   TOUCH DEVICES — remove hover jank
-   ============================================= */
-@media (hover: none) and (pointer: coarse) {
-    .nav-item-inactive:hover {
-        color: #555555 !important;
-        background-color: transparent !important;
-    }
-
-    .chip:hover {
-        border-color: #333333;
-    }
-
-    .chip.active:hover {
-        background: var(--cocoa-l);
-    }
-
-    .s-stepper button:hover {
-        background: transparent;
-        color: #666666;
-    }
-
-    /* Make all interactive elements minimum 44px tall */
-    button,
-    .fb-emoji-btn,
-    .mob-nav-item {
-        min-height: 44px;
-    }
-}
-
-/* ============================================================
-   Custom Select Dropdown (uf-select)
-   Replaces native <select> to prevent OS picker sheet on mobile
-   ============================================================ */
-.uf-select-wrap {
-    position: relative;
-    display: inline-block;
-    min-width: 110px;
-}
-
-.uf-select-wrap.w-full {
-    display: block;
-    width: 100%;
-}
-
-.uf-select-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-    padding: 5px 10px;
-    background: #111111;
-    border: 1px solid #222222;
-    border-radius: 6px;
-    font-size: 11px;
-    font-weight: 600;
-    color: #ffffff;
-    cursor: pointer;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    transition: border-color 0.15s;
-    white-space: nowrap;
-}
-
-.uf-select-trigger:hover,
-.uf-select-trigger:active {
-    border-color: #444444;
-}
-
-.uf-select-arrow {
-    font-size: 9px;
-    color: #666666;
-    transition: transform 0.2s ease;
-    flex-shrink: 0;
-}
-
-.uf-select-arrow-open {
-    transform: rotate(180deg);
-}
-
-/* Dropdown panel — opens downward by default */
-.uf-select-dropdown {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    min-width: 100%;
-    background: #111111;
-    border: 1px solid #2a2a2a;
-    border-radius: 8px;
-    z-index: 9999;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
-    overflow: hidden;
-    max-height: 240px;
-    overflow-y: auto;
-}
-
-/* Upward variant — anchors above trigger, for bottom-of-screen selects */
-.uf-select-dropdown-up {
-    top: auto;
-    bottom: calc(100% + 4px);
-}
-
-.uf-select-option {
-    padding: 10px 14px;
-    font-size: 11px;
-    font-weight: 600;
-    color: #aaaaaa;
-    cursor: pointer;
-    transition: background 0.1s, color 0.1s;
-    -webkit-tap-highlight-color: transparent;
-}
-
-.uf-select-option:hover,
-.uf-select-option:active {
-    background: #1a1a1a;
-    color: #ffffff;
-}
-
-.uf-select-option-active {
-    color: var(--cocoa-l);
-    background: #0a0a0a;
-}
-
-/* Hide scrollbar inside dropdown — options fit within max-height */
-.uf-select-dropdown::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-}
-
-/* Desktop: Vehicle Classification thin grey scrollbar (matches reference) */
-@media (min-width: 1024px) {
-    #class-breakdown::-webkit-scrollbar {
-        width: 4px;
-    }
-
-    #class-breakdown::-webkit-scrollbar-track {
-        background: #000000;
-    }
-
-    #class-breakdown::-webkit-scrollbar-thumb {
-        background: #333333;
-        border-radius: 4px;
-    }
-
-    #class-breakdown::-webkit-scrollbar-thumb:hover {
-        background: #444444;
-    }
-}
-
-/* ---- Profile & Sidebar PFP ---- */
-#sidebar-profile-pfp-wrap img,
-#mob-pfp-wrap img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-}
-
-/* Fix fallback icon visibility (parent font-size is 0) */
-#sidebar-profile-pfp-wrap i,
-#mob-pfp-wrap i {
-    font-size: 1.2rem;
-    color: #555;
-}
-
-.mob-nav-item i {
-    transition: transform 0.2s ease;
-}
-
-.mob-nav-item:active i {
-    transform: scale(0.9);
-}
-
-/* ---- Legal Menu Dropdown ---- */
-#legal-menu, #legal-menu-profile {
-    animation: menuFadeIn 0.2s ease-out forwards;
-    transform-origin: top right;
-    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
-}
-
-@keyframes menuFadeIn {
-    from { opacity: 0; transform: translateY(-10px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-/* ---- Profile Tab specific overrides ---- */
-#tab-profile input[type="text"] {
-    border: 1px solid #222 !important;
-}
-
-#tab-profile input[type="text"]:focus {
-    border-color: var(--cocoa-l) !important;
-    background: #000 !important;
-}
-
-@media (max-width: 1023px) {
-    /* Zero tab side padding on mobile */
-    #tab-results,
-    #tab-profile,
-    #tab-overview {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        padding-bottom: calc(var(--mob-nav-h) + 12px) !important;
-    }
-
-    /* Results content wrap — tighter spacing */
-    #results-content-wrap {
-        gap: 16px !important;
-    }
-
-    /* Telemetry cards inner padding */
-    #run-results-card > div.p-8 {
-        padding: 12px !important;
-    }
-    #run-results-content {
-        gap: 12px !important;
-    }
-
-    /* Technical context grid — stack on mobile */
-    #tab-results .grid.grid-cols-2 {
-        grid-template-columns: 1fr !important;
-        gap: 12px !important;
-    }
-
-    /* Panel inner padding */
-    #panel-video,
-    #panel-perf,
-    #panel-model,
-    #panel-infer {
-        padding: 12px !important;
-    }
-
-    /* Telemetry section — reduce top margin */
-    #tab-results details .mt-8 {
-        margin-top: 16px !important;
-    }
-    #tab-results .mt-12 {
-        margin-top: 24px !important;
-        padding-top: 24px !important;
-    }
-
-    /* Profile card — tighter mobile padding */
-    #tab-profile .bg-neutral-950 {
-        border-radius: 12px !important;
-    }
-    #tab-profile .p-6 {
-        padding: 16px !important;
-    }
-    #tab-profile .p-5 {
-        padding: 14px !important;
-    }
-
-    /* Chart cards — reduce padding */
-    #tab-results .bg-black.rounded-xl {
-        border-radius: 10px !important;
-    }
-    #tab-results .bg-neutral-950.rounded-xl {
-        border-radius: 10px !important;
-    }
-}
-
-/* Ensure mobile results scrolling */
-#tab-results:not(.hidden) {
-    display: flex !important;
-    flex-direction: column !important;
-}
+/* =============================================
+   UrbanFlow — vehicles.css (Mobile-First)
+   Desktop layout preserved exactly.
+   Mobile: bottom nav, touch targets, stacked cards.
+   ============================================= */
+
+:root {
+    --cocoa: #8b5e3c;
+    --cocoa-l: #c89a6c;
+    --cocoa-xl: #d4b08a;
+    /* bottom nav height on mobile, incl. the iOS home-indicator inset */
+    --mob-nav-h: calc(68px + env(safe-area-inset-bottom));
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+.hidden {
+    display: none !important;
+}
+
+html {
+    overflow: hidden;
+    height: 100%;
+}
+
+body {
+    font-family: 'Montserrat', sans-serif;
+    background-color: #000000;
+    color: #f0ece6;
+    -webkit-tap-highlight-color: transparent;
+    overscroll-behavior: none;
+}
+
+.mono-font {
+    font-family: 'JetBrains Mono', monospace;
+}
+
+/* ---- Scrollbar: hide globally on mobile, keep #class-breakdown visible ---- */
+@media (max-width: 1023px) {
+    * {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+
+    *::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Vehicle Classification section keeps its scrollbar on mobile */
+    #class-breakdown {
+        scrollbar-width: thin !important;
+        -ms-overflow-style: auto !important;
+    }
+
+    #class-breakdown::-webkit-scrollbar {
+        display: block !important;
+        width: 4px !important;
+    }
+
+    #class-breakdown::-webkit-scrollbar-track {
+        background: #000000 !important;
+    }
+
+    #class-breakdown::-webkit-scrollbar-thumb {
+        background: #222222 !important;
+        border-radius: 4px !important;
+    }
+
+    #class-breakdown::-webkit-scrollbar-thumb:hover {
+        background: #333333 !important;
+    }
+}
+
+/* ---- Notification Glow ---- */
+@keyframes glow-green {
+    0% {
+        color: #f0ece6;
+        filter: drop-shadow(0 0 0px #4ade80);
+    }
+
+    50% {
+        color: #4ade80;
+        filter: drop-shadow(0 0 8px #4ade80);
+    }
+
+    100% {
+        color: #f0ece6;
+        filter: drop-shadow(0 0 0px #4ade80);
+    }
+}
+
+.notify-glow i {
+    animation: glow-green 1.5s infinite ease-in-out !important;
+}
+
+/* ---- Info tooltip ---- */
+.info-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin-left: 6px;
+}
+
+.info-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    /* slightly larger for touch */
+    height: 18px;
+    border-radius: 50%;
+    background: #444444 !important;
+    color: #ffffff !important;
+    font-size: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.info-btn:hover,
+.info-btn:active {
+    background: #666666 !important;
+}
+
+.info-tip {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    background: #0a0a0a;
+    color: #aaaaaa;
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.4;
+    padding: 8px 12px;
+    border-radius: 6px;
+    max-width: 240px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
+    border: 1px solid #222222;
+    pointer-events: none;
+    text-transform: none;
+    letter-spacing: normal;
+}
+
+/* ---- Mobile Top Bar ---- */
+.mobile-top-bar {
+    display: none;
+}
+
+@media (max-width: 1023px) {
+    .mobile-top-bar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 58px;
+        background: #000000;
+        border-bottom: 1px solid #1a1a1a;
+        z-index: 35;
+        flex-shrink: 0;
+    }
+
+    #legal-menu {
+        animation: menuFadeIn 0.2s ease-out forwards;
+        transform-origin: top right;
+    }
+
+    @keyframes menuFadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-10px) scale(0.95);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+    }
+}
+
+/* ---- Sidebar nav states ---- */
+.nav-item-active {
+    background-color: #111111 !important;
+    color: var(--cocoa-xl) !important;
+    border-left: 2px solid var(--cocoa-l) !important;
+}
+
+.nav-item-inactive {
+    color: #555555 !important;
+}
+
+.nav-item-inactive:hover {
+    color: #f0ece6 !important;
+    background-color: #050505 !important;
+}
+
+/* ---- Card overrides ---- */
+.bg-white {
+    background-color: #0a0a0a !important;
+}
+
+.border-slate-200,
+.border-slate-100,
+.border-slate-50,
+.border-neutral-800,
+.border-neutral-900 {
+    border-color: #2a2a2a !important;
+}
+
+.bg-slate-50\/50,
+.bg-slate-50,
+.bg-slate-900,
+.bg-neutral-900 {
+    background-color: #0c0c0c !important;
+}
+
+.text-slate-900,
+.text-slate-800,
+.text-slate-700,
+.text-neutral-900 {
+    color: #ffffff !important;
+}
+
+.text-slate-600,
+.text-slate-500,
+.text-slate-400,
+.text-neutral-500,
+.text-neutral-400 {
+    color: #888888 !important;
+}
+
+.shadow-sm {
+    box-shadow: none !important;
+}
+
+/* ---- Toggle control ---- */
+.toggle-track {
+    width: 36px;
+    /* slightly wider for touch */
+    height: 20px;
+    border-radius: 999px;
+    background: #1a1a1a;
+    border: 1px solid #333;
+    position: relative;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background 0.2s ease;
+}
+
+.toggle-track.active {
+    background: #c89a6c !important;
+    border-color: #c89a6c !important;
+}
+
+.toggle-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #555555;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    transition: all 0.2s ease;
+}
+
+.toggle-track.active .toggle-thumb {
+    transform: translateX(16px);
+    background: #ffffff;
+    /* pure white for contrast on gold track */
+}
+
+/* ---- Custom select ---- */
+.custom-select {
+    appearance: none;
+    background-color: #111111;
+    border: 1px solid #222222;
+    border-radius: 6px;
+    padding: 4px 24px 4px 10px;
+    font-size: 11px;
+    font-weight: 600;
+    color: #ffffff;
+    outline: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666666'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 12px;
+}
+
+/* ---- Stepper ---- */
+.s-stepper {
+    display: inline-flex;
+    border: 1px solid #222222;
+    border-radius: 6px;
+    background: #111111;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.s-stepper button {
+    padding: 8px 12px;
+    /* larger touch target than original 4px 8px */
+    color: #666666;
+    font-size: 14px;
+    min-width: 36px;
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.s-stepper button:hover,
+.s-stepper button:active {
+    background: #1a1a1a;
+    color: #ffffff;
+}
+
+.s-stepper .s-val {
+    min-width: 44px;
+    text-align: center;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    font-weight: 700;
+    color: #ffffff;
+    padding: 4px 0;
+    border-left: 1px solid #222222;
+    border-right: 1px solid #222222;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ---- Settings row ---- */
+.s-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 0;
+    /* slightly more vertical padding */
+    border-bottom: 1px solid #1a1a1a;
+    gap: 12px;
+}
+
+.s-row:last-child {
+    border-bottom: none;
+}
+
+.s-row>div:first-child {
+    flex: 1;
+    min-width: 0;
+}
+
+/* ---- Progress bar ---- */
+#proc-bar {
+    background-color: var(--cocoa-l) !important;
+}
+
+#proc-label {
+    color: #ffffff !important;
+}
+
+/* ---- Disabled rows ---- */
+.s-row.disabled {
+    opacity: 0.65 !important;
+}
+
+.s-row.disabled .s-stepper,
+.s-row.disabled .custom-select,
+.s-row.disabled .toggle-track,
+.s-row.disabled .chip-container,
+.s-row.disabled .uf-select-wrap,
+.s-row.disabled .uf-select-trigger {
+    pointer-events: none !important;
+    opacity: 0.5 !important;
+}
+
+/* Force-collapse the dropdown panel when row is locked */
+.s-row.disabled .uf-select-dropdown {
+    display: none !important;
+}
+
+.s-row.disabled .info-wrap {
+    pointer-events: auto !important;
+    opacity: 1 !important;
+}
+
+#btn-start-processing {
+    font-family: 'Montserrat', sans-serif !important;
+}
+
+/* ---- Chips ---- */
+.chip-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid #1a1a1a;
+    transition: all 0.3s ease;
+}
+
+.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 14px;
+    /* larger than original 6px 14px */
+    border-radius: 9999px;
+    font-size: 10px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    user-select: none;
+    border: 1px solid #333333;
+    background: rgba(255, 255, 255, 0.03);
+    color: #888888;
+    min-height: 36px;
+}
+
+.chip.active {
+    background: var(--cocoa-l);
+    color: #000000;
+    border-color: var(--cocoa-l);
+}
+
+.chip.frozen {
+    background: rgba(255, 255, 255, 0.4);
+    color: #000000;
+    border-color: transparent;
+    cursor: default !important;
+    pointer-events: none;
+}
+
+.chip:hover {
+    border-color: #666666;
+}
+
+.chip.active:hover {
+    background: var(--cocoa-xl);
+}
+
+.chip i {
+    font-size: 9px;
+}
+
+.hidden-chip-container {
+    display: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    height: 0 !important;
+}
+
+/* ---- Toast ---- */
+#toast-container {
+    position: fixed;
+    bottom: calc(var(--mob-nav-h) + 12px);
+    /* above bottom nav on mobile */
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    pointer-events: none;
+    width: 90%;
+    max-width: 360px;
+}
+
+.toast {
+    background: #111;
+    border: 1px solid #2a2a2a;
+    color: #f0ece6;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 12px 18px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    pointer-events: auto;
+    animation: toastIn 0.3s ease-out;
+    width: 100%;
+}
+
+.toast.toast-out {
+    animation: toastOut 0.3s ease-in forwards;
+}
+
+.toast-success {
+    border-color: #166534;
+}
+
+.toast-success i {
+    color: #22c55e;
+}
+
+.toast-error {
+    border-color: #7f1d1d;
+}
+
+.toast-error i {
+    color: #ef4444;
+}
+
+.toast-info i {
+    color: var(--cocoa-l);
+}
+
+@keyframes toastIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes toastOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+}
+
+/* ---- Stats empty overlay ---- */
+.stats-empty-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(10, 10, 10, 0.85);
+    backdrop-filter: blur(8px);
+    border-radius: 12px;
+}
+
+/* ---- Feedback form ---- */
+.fb-textarea {
+    background: #111;
+    border: 1px solid #2a2a2a;
+    border-radius: 8px;
+    color: #f0ece6;
+    font-size: 12px;
+    padding: 12px;
+    width: 100%;
+    min-height: 120px;
+    resize: vertical;
+    font-family: 'Inter', sans-serif;
+}
+
+.fb-textarea:focus {
+    outline: none;
+    border-color: var(--cocoa-l);
+}
+
+.fb-select {
+    background: #111;
+    border: 1px solid #2a2a2a;
+    border-radius: 8px;
+    color: #f0ece6;
+    font-size: 11px;
+    padding: 10px 12px;
+    /* taller for touch */
+    width: 100%;
+    font-family: 'Inter', sans-serif;
+    min-height: 44px;
+}
+
+.fb-select:focus {
+    outline: none;
+    border-color: var(--cocoa-l);
+}
+
+.fb-stars {
+    display: flex;
+    gap: 8px;
+}
+
+.fb-star {
+    font-size: 28px;
+    /* larger for mobile tapping */
+    color: #333;
+    cursor: pointer;
+    transition: color 0.15s;
+    min-width: 36px;
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.fb-star.active,
+.fb-star:hover {
+    color: var(--cocoa-l);
+}
+
+.fb-chip {
+    background: #050505;
+    border: 1px solid #222;
+    border-radius: 8px;
+    color: #666;
+    font-size: 10px;
+    font-weight: 700;
+    padding: 14px 12px;
+    /* taller for touch */
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: center;
+    text-transform: uppercase;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.fb-chip:hover {
+    border-color: #444;
+    color: #999;
+}
+
+.fb-chip.active {
+    border-color: var(--cocoa-l);
+    background: #111;
+    color: #fff;
+    box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
+}
+
+.fb-emoji-btn {
+    background: #111;
+    border: 1px solid #2a2a2a;
+    border-radius: 8px;
+    color: #555;
+    flex: 1;
+    text-align: center;
+    padding: 12px 4px;
+    /* taller */
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-height: 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.fb-emoji-btn:hover {
+    border-color: #444;
+    color: #888;
+}
+
+.fb-emoji-btn.active {
+    border-color: var(--cocoa-l);
+    background: #1a1a1a;
+    color: var(--cocoa-l);
+    box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
+}
+
+/* =============================================
+   DESKTOP (≥1024px) — original layout intact
+   ============================================= */
+@media (min-width: 1024px) {
+
+    /* Sidebar visible */
+    aside.w-60 {
+        display: flex !important;
+    }
+
+    /* Bottom mobile nav hidden */
+    .mobile-bottom-nav {
+        display: none !important;
+    }
+
+    /* Main — no bottom padding needed */
+    main {
+        padding-bottom: 1rem !important;
+    }
+
+    /* Toast — desktop position: bottom-right */
+    #toast-container {
+        bottom: 20px;
+        left: unset;
+        right: 20px;
+        transform: none;
+        width: auto;
+        align-items: flex-end;
+    }
+
+    /* Settings — 2 column grid */
+    #tab-settings .grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+
+    /* Run details — multi-column grids preserved */
+    #run-results-content {
+        grid-template-columns: repeat(3, 1fr) !important;
+    }
+
+    .grid-cols-2 {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+
+    .grid-cols-3 {
+        grid-template-columns: repeat(3, 1fr) !important;
+    }
+
+    /* Reports grid */
+    #reports-grid,
+    #reports-pending {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+
+    /* About grid */
+    #tab-about .grid.grid-cols-3 {
+        grid-template-columns: repeat(3, 1fr) !important;
+    }
+
+
+
+    /* Insights panel */
+    #insights-panel .grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+}
+
+/* =============================================
+   MOBILE (< 1024px) — full mobile overhaul
+   ============================================= */
+@media (max-width: 1023px) {
+
+    /* --- Hide desktop sidebar --- */
+    aside.w-60 {
+        display: none !important;
+    }
+
+    /* --- Body layout --- */
+    body {
+        height: 100dvh;
+        /* dynamic viewport height — accounts for mobile browser chrome */
+        overflow: hidden;
+    }
+
+    /* --- Main content — room for top and bottom nav --- */
+    main {
+        padding: 70px 12px calc(var(--mob-nav-h) + 8px) 12px !important;
+        gap: 12px !important;
+        display: flex !important;
+        flex-direction: column !important;
+        height: 100dvh !important;
+    }
+
+    /* --- Tab Scrolling Fixes — force flex-1 to push progress bar down --- */
+    #tab-about,
+    #tab-overview,
+    #tab-results,
+    #tab-settings,
+    #tab-help,
+    #tab-feedback,
+    #tab-profile {
+        flex: 1 !important;
+        min-height: 0 !important;
+        padding-bottom: 20px !important;
+        overscroll-behavior: contain;
+        -webkit-overflow-scrolling: touch;
+        overflow-y: auto !important;
+    }
+
+    /* --- About tab specific spacing --- */
+    #tab-about .space-y-8 {
+        gap: 16px !important;
+    }
+
+    #tab-about .pt-8 {
+        padding-top: 16px !important;
+    }
+
+    #tab-overview:not(.hidden) {
+        display: flex !important;
+        flex-direction: column !important;
+        overflow-y: auto !important;
+        overflow-x: hidden !important;
+        -webkit-overflow-scrolling: touch;
+        overscroll-behavior: contain;
+        padding-bottom: calc(var(--mob-nav-h) + 24px) !important;
+        gap: 16px !important;
+    }
+
+    #tab-overview>div:not(#stats-empty-state) {
+        grid-column: span 1 !important;
+        min-height: 280px;
+        flex-shrink: 0;
+    }
+
+    .stats-empty-overlay {
+        position: fixed !important;
+        top: 58px;
+        /* below mobile top bar */
+        left: 0;
+        right: 0;
+        bottom: var(--mob-nav-h);
+        height: auto !important;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.98);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* CRITICAL: hide overlay when its parent tab is hidden */
+    #tab-overview.hidden .stats-empty-overlay {
+        display: none !important;
+    }
+
+    /* --- Settings tab — tighter layout --- */
+    #tab-settings>div[class*="grid"] {
+        display: flex !important;
+        flex-direction: column !important;
+        gap: 12px !important;
+    }
+
+    #tab-settings {
+        overflow-x: hidden !important;
+    }
+
+    /* Collapse chip panel completely when not shown — removes gap */
+    #chip-selector.hidden-chip-container {
+        display: none !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        height: 0 !important;
+    }
+
+    /* When visible, give it breathing room */
+    #chip-selector:not(.hidden-chip-container) {
+        display: flex !important;
+        flex-wrap: wrap !important;
+        gap: 8px !important;
+        margin-top: 12px !important;
+        padding: 0 !important;
+    }
+
+    /* Ensure all s-row items are uniform flex rows */
+    .s-row {
+        display: flex !important;
+        flex-direction: row !important;
+        flex-wrap: nowrap !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        padding: 14px 0 !important;
+        border-bottom: 1px solid #1a1a1a !important;
+        gap: 12px !important;
+    }
+
+    .s-row:last-child {
+        border-bottom: none !important;
+    }
+
+    /* Never let mobile flex override Tailwind .hidden utility */
+    .s-row.hidden {
+        display: none !important;
+    }
+
+    /* chip-selector sits as a sibling below the annotated s-row on mobile */
+    #chip-selector:not(.hidden-chip-container) {
+        margin-top: 0 !important;
+        border-top: none !important;
+        padding-top: 0 !important;
+        padding-bottom: 12px !important;
+    }
+
+    /* Lock toggle in annotated row — must never wrap or shrink */
+    .s-row[data-param="annotated"]>.toggle-track {
+        flex-shrink: 0 !important;
+        flex-grow: 0 !important;
+        flex-basis: 36px !important;
+        width: 36px !important;
+        min-width: 36px !important;
+        align-self: center !important;
+    }
+
+    /* Label side must absorb remaining space and never overflow */
+    .s-row[data-param="annotated"]>div:first-child {
+        flex: 1 1 0 !important;
+        min-width: 0 !important;
+        overflow: hidden !important;
+    }
+
+    .s-stepper {
+        width: 140px !important;
+        /* Compact fixed width */
+        scale: 0.9;
+        transform-origin: right;
+        display: inline-flex !important;
+    }
+
+    .toggle-track {
+        width: 36px !important;
+        scale: 0.9;
+        transform-origin: right;
+    }
+
+    @media (max-width: 480px) {
+        .s-row {
+            flex-direction: row !important;
+            flex-wrap: nowrap !important;
+            align-items: center !important;
+            justify-content: space-between !important;
+            gap: 12px !important;
+            padding: 10px 16px !important;
+            width: 100% !important;
+            box-sizing: border-box !important;
+        }
+
+        /* chip panel below annotated row — remove extra top gap */
+        #chip-selector:not(.hidden-chip-container) {
+            margin-top: 0 !important;
+            padding-bottom: 12px !important;
+            padding-left: 16px !important;
+            padding-right: 16px !important;
+            border-top: none !important;
+        }
+
+        .s-row {
+            padding: 12px 16px !important;
+        }
+
+        #run-results-card .p-8 {
+            padding: 20px !important;
+        }
+
+        #run-results-content {
+            grid-template-columns: 1fr !important;
+            gap: 16px !important;
+        }
+
+        #panel-video .flex,
+        #panel-perf .flex,
+        #panel-model .flex,
+        #panel-infer .flex {
+            padding-bottom: 8px !important;
+        }
+
+        .s-row .info-wrap {
+            display: inline-flex !important;
+            vertical-align: middle;
+        }
+
+        .s-row>div:first-child {
+            width: auto !important;
+            max-width: 75% !important;
+            flex: 1 !important;
+        }
+
+        .toggle-track {
+            width: 36px !important;
+            min-width: 36px !important;
+            height: 20px !important;
+            flex-shrink: 0 !important;
+            display: block !important;
+            position: relative !important;
+        }
+
+        #run-results-card .text-[10px] {
+            font-size: 9px !important;
+            letter-spacing: 0.05em !important;
+        }
+
+        .s-row>.s-stepper {
+            width: 130px !important;
+            flex-shrink: 0 !important;
+            display: inline-flex !important;
+            flex-direction: row !important;
+        }
+
+        .chip-container {
+            display: grid !important;
+            grid-template-columns: 1fr 1fr !important;
+            gap: 6px !important;
+            margin-top: 12px !important;
+            padding: 10px !important;
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: 8px;
+            border: 1px solid #1a1a1a;
+            width: 100% !important;
+            box-sizing: border-box !important;
+        }
+
+        .chip {
+            padding: 6px !important;
+            font-size: 9px !important;
+            min-height: 32px !important;
+            border-radius: 6px !important;
+            justify-content: center !important;
+            width: 100% !important;
+            white-space: nowrap !important;
+        }
+
+        .s-stepper {
+            width: 130px !important;
+            min-width: 130px !important;
+            display: inline-flex !important;
+            flex-direction: row !important;
+            align-items: center !important;
+            justify-content: space-between !important;
+            transform-origin: right !important;
+        }
+
+        .toggle-track {
+            transform-origin: right !important;
+        }
+    }
+
+    /* --- Progress bar wrapper — remove extra margin to fix huge gap --- */
+    #progress-bar-wrapper {
+        width: 100% !important;
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+        margin-top: auto !important;
+        margin-bottom: 4px !important;
+        padding: 8px 12px !important;
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        gap: 6px !important;
+        position: relative;
+        z-index: 10;
+    }
+
+    #progress-bar-wrapper>div:first-child {
+        width: 100% !important;
+        flex: 1 !important;
+        min-width: 0 !important;
+        margin-right: 0 !important;
+    }
+
+    #progress-bar-wrapper>div:last-child {
+        width: 100% !important;
+        justify-content: space-between !important;
+        font-size: 10px !important;
+    }
+
+    /* --- All other grids collapse to single column --- */
+    .grid-cols-3,
+    .grid-cols-2,
+    .lg\:grid-cols-2,
+    .xl\:grid-cols-3 {
+        grid-template-columns: 1fr !important;
+    }
+
+    /* --- Run details tab --- */
+    #run-results-content {
+        grid-template-columns: 1fr !important;
+    }
+
+    #tab-results .grid-cols-3 {
+        grid-template-columns: 1fr !important;
+    }
+
+    /* --- Reports grid --- */
+    #reports-grid,
+    #reports-pending {
+        grid-template-columns: 1fr !important;
+    }
+
+    /* --- About tab grid --- */
+    #tab-about .grid.grid-cols-3 {
+        grid-template-columns: 1fr !important;
+    }
+
+    /* --- Post-process cards --- */
+    #post-process-cards {
+        grid-template-columns: 1fr !important;
+    }
+
+    /* --- Insights panel --- */
+    #insights-panel .grid {
+        grid-template-columns: 1fr !important;
+    }
+
+    /* --- Feedback tab --- */
+    #tab-feedback .grid {
+        grid-template-columns: 1fr !important;
+    }
+
+    /* --- About tab cards --- */
+    #tab-about .bg-black.border.rounded-xl {
+        padding: 20px !important;
+    }
+
+    /* --- Stepper — ensure full tap area --- */
+    .s-stepper button {
+        padding: 10px 14px;
+        min-width: 40px;
+        min-height: 40px;
+    }
+
+    /* --- s-row label text — allow wrap --- */
+    .s-row>div:first-child .text-xs {
+        font-size: 11px;
+    }
+
+    /* --- Help accordion buttons --- */
+    #tab-help button.w-full {
+        min-height: 52px;
+        padding: 14px 16px !important;
+    }
+
+    /* --- Feedback priority chips grid --- */
+    #fb-priorities {
+        grid-template-columns: 1fr !important;
+    }
+
+    /* --- Keyboard shortcut modal --- */
+    #appModal-shortcutsModal>div {
+        max-width: 95% !important;
+        padding: 20px !important;
+    }
+
+    /* --- Privacy / Terms modals --- */
+    [id^="appModal-"]>div {
+        max-width: 95% !important;
+        max-height: 80dvh !important;
+        overflow-y: auto !important;
+    }
+
+    #tab-overview>div:last-child {
+        min-height: 300px !important;
+        padding-bottom: 4px !important;
+        margin-bottom: 0 !important;
+    }
+
+    /* --- Vehicle Classification Internal Scroll --- */
+    #tab-overview>div:nth-child(4) {
+        max-height: 380px !important;
+        display: flex !important;
+        flex-direction: column !important;
+    }
+
+    #tab-overview>div:nth-child(4) #class-breakdown {
+        flex: 1 !important;
+        overflow-y: auto !important;
+        min-height: 0 !important;
+    }
+}
+
+/* =============================================
+   BOTTOM NAVIGATION BAR — mobile only
+   ============================================= */
+.mobile-bottom-nav {
+    display: none;
+    /* hidden by default, shown on mobile */
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: calc(68px + env(safe-area-inset-bottom));
+    padding-bottom: env(safe-area-inset-bottom);
+    background: #000000;
+    border-top: 1px solid #1a1a1a;
+    z-index: 40;
+    align-items: stretch;
+}
+
+.mob-nav-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    cursor: pointer;
+    color: #444444;
+    font-size: 0;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: color 0.15s ease;
+    border: none;
+    background: none;
+    padding: 8px 2px;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.mob-nav-item i {
+    font-size: 22px;
+    transition: color 0.15s ease;
+}
+
+.mob-nav-item.active {
+    color: var(--cocoa-l);
+}
+
+.mob-nav-item.active i {
+    color: var(--cocoa-l);
+}
+
+.mob-nav-item:active {
+    color: var(--cocoa-xl);
+}
+
+/* Show bottom nav only on mobile */
+@media (max-width: 1023px) {
+    .mobile-bottom-nav {
+        display: flex !important;
+    }
+}
+
+/* =============================================
+   MEDIUM TABLET (640px–1023px) adjustments
+   ============================================= */
+@media (min-width: 640px) and (max-width: 1023px) {
+
+    /* 2-column grids on tablet where it fits */
+    #tab-overview>div {
+        min-height: 280px;
+    }
+
+    #reports-grid,
+    #reports-pending {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+
+    #fb-priorities {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+
+    #tab-about .grid.grid-cols-3 {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+}
+
+/* =============================================
+   TOUCH DEVICES — remove hover jank
+   ============================================= */
+@media (hover: none) and (pointer: coarse) {
+    .nav-item-inactive:hover {
+        color: #555555 !important;
+        background-color: transparent !important;
+    }
+
+    .chip:hover {
+        border-color: #333333;
+    }
+
+    .chip.active:hover {
+        background: var(--cocoa-l);
+    }
+
+    .s-stepper button:hover {
+        background: transparent;
+        color: #666666;
+    }
+
+    /* Make all interactive elements minimum 44px tall */
+    button,
+    .fb-emoji-btn,
+    .mob-nav-item {
+        min-height: 44px;
+    }
+}
+
+/* ============================================================
+   Custom Select Dropdown (uf-select)
+   Replaces native <select> to prevent OS picker sheet on mobile
+   ============================================================ */
+.uf-select-wrap {
+    position: relative;
+    display: inline-block;
+    min-width: 110px;
+}
+
+.uf-select-wrap.w-full {
+    display: block;
+    width: 100%;
+}
+
+.uf-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    padding: 5px 10px;
+    background: #111111;
+    border: 1px solid #222222;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: #ffffff;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: border-color 0.15s;
+    white-space: nowrap;
+}
+
+.uf-select-trigger:hover,
+.uf-select-trigger:active {
+    border-color: #444444;
+}
+
+.uf-select-arrow {
+    font-size: 9px;
+    color: #666666;
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+}
+
+.uf-select-arrow-open {
+    transform: rotate(180deg);
+}
+
+/* Dropdown panel — opens downward by default */
+.uf-select-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    min-width: 100%;
+    background: #111111;
+    border: 1px solid #2a2a2a;
+    border-radius: 8px;
+    z-index: 9999;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
+    overflow: hidden;
+    max-height: 240px;
+    overflow-y: auto;
+}
+
+/* Upward variant — anchors above trigger, for bottom-of-screen selects */
+.uf-select-dropdown-up {
+    top: auto;
+    bottom: calc(100% + 4px);
+}
+
+.uf-select-option {
+    padding: 10px 14px;
+    font-size: 11px;
+    font-weight: 600;
+    color: #aaaaaa;
+    cursor: pointer;
+    transition: background 0.1s, color 0.1s;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.uf-select-option:hover,
+.uf-select-option:active {
+    background: #1a1a1a;
+    color: #ffffff;
+}
+
+.uf-select-option-active {
+    color: var(--cocoa-l);
+    background: #0a0a0a;
+}
+
+/* Hide scrollbar inside dropdown — options fit within max-height */
+.uf-select-dropdown::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+/* Desktop: Vehicle Classification thin grey scrollbar (matches reference) */
+@media (min-width: 1024px) {
+    #class-breakdown::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    #class-breakdown::-webkit-scrollbar-track {
+        background: #000000;
+    }
+
+    #class-breakdown::-webkit-scrollbar-thumb {
+        background: #333333;
+        border-radius: 4px;
+    }
+
+    #class-breakdown::-webkit-scrollbar-thumb:hover {
+        background: #444444;
+    }
+}
+
+/* ---- Profile & Sidebar PFP ---- */
+#sidebar-profile-pfp-wrap img,
+#mob-pfp-wrap img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+/* Fix fallback icon visibility (parent font-size is 0) */
+#sidebar-profile-pfp-wrap i,
+#mob-pfp-wrap i {
+    font-size: 1.2rem;
+    color: #555;
+}
+
+.mob-nav-item i {
+    transition: transform 0.2s ease;
+}
+
+.mob-nav-item:active i {
+    transform: scale(0.9);
+}
+
+/* ---- Legal Menu Dropdown ---- */
+#legal-menu, #legal-menu-profile {
+    animation: menuFadeIn 0.2s ease-out forwards;
+    transform-origin: top right;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
+}
+
+@keyframes menuFadeIn {
+    from { opacity: 0; transform: translateY(-10px) scale(0.95); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ---- Profile Tab specific overrides ---- */
+#tab-profile input[type="text"] {
+    border: 1px solid #222 !important;
+}
+
+#tab-profile input[type="text"]:focus {
+    border-color: var(--cocoa-l) !important;
+    background: #000 !important;
+}
+
+@media (max-width: 1023px) {
+    /* Zero tab side padding on mobile */
+    #tab-results,
+    #tab-profile,
+    #tab-overview {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        padding-bottom: calc(var(--mob-nav-h) + 12px) !important;
+    }
+
+    /* Results content wrap — tighter spacing */
+    #results-content-wrap {
+        gap: 16px !important;
+    }
+
+    /* Telemetry cards inner padding */
+    #run-results-card > div.p-8 {
+        padding: 12px !important;
+    }
+    #run-results-content {
+        gap: 12px !important;
+    }
+
+    /* Technical context grid — stack on mobile */
+    #tab-results .grid.grid-cols-2 {
+        grid-template-columns: 1fr !important;
+        gap: 12px !important;
+    }
+
+    /* Panel inner padding */
+    #panel-video,
+    #panel-perf,
+    #panel-model,
+    #panel-infer {
+        padding: 12px !important;
+    }
+
+    /* Telemetry section — reduce top margin */
+    #tab-results details .mt-8 {
+        margin-top: 16px !important;
+    }
+    #tab-results .mt-12 {
+        margin-top: 24px !important;
+        padding-top: 24px !important;
+    }
+
+    /* Profile card — tighter mobile padding */
+    #tab-profile .bg-neutral-950 {
+        border-radius: 12px !important;
+    }
+    #tab-profile .p-6 {
+        padding: 16px !important;
+    }
+    #tab-profile .p-5 {
+        padding: 14px !important;
+    }
+
+    /* Chart cards — reduce padding */
+    #tab-results .bg-black.rounded-xl {
+        border-radius: 10px !important;
+    }
+    #tab-results .bg-neutral-950.rounded-xl {
+        border-radius: 10px !important;
+    }
+}
+
+/* Ensure mobile results scrolling */
+#tab-results:not(.hidden) {
+    display: flex !important;
+    flex-direction: column !important;
+}

frontend/initial.html

@@ -11,7 +11,8 @@
         }
     </script>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <!-- viewport-fit=cover for notched devices; zoom left enabled (WCAG 1.4.4) -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <title>UrbanFlow</title>
     <link rel="icon" type="image/png" sizes="512x512" href="assets/shuriken.png">
     <link rel="manifest" href="manifest.json">
@@ -175,10 +176,6 @@
                 });
             }
         }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            injectLegalModals();
-        });
     </script>
 
 

frontend/js/auth.js

@@ -262,6 +262,9 @@ function _submitOnboarding() {
         })
         .then(() => {
             user.username = username;
+            // Clear the flag: downstream handlers re-check it and would show
+            // this same form again once consent completes.
+            user.new_user = false;
             saveAuthSession(user);
             _hideAuthOverlay();
             if (overlay._onboardCallback) overlay._onboardCallback(user);
@@ -297,15 +300,7 @@ function executeLogout() {
     clearAuthSession();
     sessionStorage.clear();
     hideLogoutConfirm();
-    if (typeof showOnboardingPhase === 'function') {
-        showOnboardingPhase();
-        if (typeof initApp === 'function') {
-            const sp = document.getElementById('sidebar-profile');
-            if (sp) sp.style.display = 'none';
-        }
-    } else {
-        window.location.replace('/');
-    }
+    window.location.replace('/');
 }
 
 // ---- Consent Modal ----

frontend/js/initial.js

@@ -15,6 +15,10 @@ function showStep(name) {
     const target = document.getElementById('step-' + name);
     if (target) target.classList.remove('hidden');
 
+    // The canvas has no measurable size while its step is hidden, so it can
+    // only be sized once the step is actually on screen.
+    if (name === 'draw') initCanvas();
+
     if (name === 'upload') {
         document.getElementById('upload-progress-container').classList.add('hidden');
         document.getElementById('dropzone').classList.remove('hidden');
@@ -23,7 +27,6 @@ function showStep(name) {
         document.getElementById('upload-text').innerText = 'Uploading...';
         document.getElementById('upload-text').classList.remove('text-red-500');
     }
-    if (name === 'draw') loadFirstFrame();
 }
 
 // ---- File input / dropzone ----
@@ -55,6 +58,8 @@ if (dropzone) {
 // ---- Upload ----
 let currentXHR = null;
 
+const MAX_UPLOAD_BYTES = 500 * 1024 * 1024;
+
 function uploadFile(file) {
     if (currentXHR) currentXHR.abort();
 
@@ -64,31 +69,56 @@ function uploadFile(file) {
     const pct        = document.getElementById('upload-percentage');
     const txt        = document.getElementById('upload-text');
 
+    const fail = (msg) => {
+        txt.innerText = msg;
+        txt.classList.add('text-red-500');
+        if (fileInput) fileInput.value = '';
+        // Give the dropzone back so the user can retry without a page reload.
+        setTimeout(() => { if (!videoId) showStep('upload'); }, 2600);
+    };
+
+    if (file.size > MAX_UPLOAD_BYTES) {
+        if (dropzoneEl) dropzoneEl.classList.add('hidden');
+        if (prog)       prog.classList.remove('hidden');
+        fail('File too large — 500MB maximum');
+        return;
+    }
+
     if (dropzoneEl) dropzoneEl.classList.add('hidden');
     if (prog)       prog.classList.remove('hidden');
 
     // ---- Simulated progress (proxy-buffer-safe) ----
-    // Estimate upload duration: ~1 MB/s conservative, capped between 3s and 60s
-    const fileMB       = file.size / (1024 * 1024);
+    // The HF proxy buffers the body, so upload.onprogress usually reports 100%
+    // long before the server has actually stored the file. Simulate up to 90%,
+    // then hand the remaining band to the real post-upload stages so the bar
+    // only ever moves forward.
+    const fileMB        = file.size / (1024 * 1024);
     const estDurationMs = Math.min(Math.max(fileMB * 1000, 3000), 60000);
-    const targetPct    = 98;           // stop simulation at 98%, snap to 100% on load
-    const tickMs       = 200;          // update every 200ms
-    const totalTicks   = estDurationMs / tickMs;
-    const stepPerTick  = targetPct / totalTicks;
+    const targetPct     = 90;
+    const tickMs        = 200;
+    const stepPerTick   = targetPct / (estDurationMs / tickMs);
 
     let simPct = 0;
-    let simInterval = setInterval(() => {
+    const setPct = (v) => {
+        simPct = Math.max(simPct, v);          // never move backwards
+        bar.style.width = simPct.toFixed(1) + '%';
+        pct.innerText   = Math.floor(simPct) + '%';
+    };
+
+    const simInterval = setInterval(() => {
         if (simPct < targetPct) {
-            simPct = Math.min(simPct + stepPerTick, targetPct);
-            bar.style.width = simPct.toFixed(1) + '%';
-            pct.innerText   = Math.floor(simPct) + '%';
+            setPct(simPct + stepPerTick);
+        } else {
+            // Plateau reached: the bytes are sent, the server is still working.
+            // Say so instead of leaving a frozen bar with no explanation.
+            txt.innerText = 'Processing on server...';
         }
     }, tickMs);
 
     const form = new FormData();
     form.append('file', file);
-    
-    fetch('/api/event', {
+
+    fetch('api/event', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ event: 'UPLOAD_STARTED', meta: { size: fileMB.toFixed(2) } })
@@ -97,69 +127,62 @@ function uploadFile(file) {
     const xhr = new XMLHttpRequest();
     currentXHR = xhr;
     xhr.open('POST', 'upload');
+    xhr.timeout = 10 * 60 * 1000;   // large files on a cold Space are slow
 
-    // Real progress override — fires if proxy reports actual bytes (rare but handle it)
     xhr.upload.onprogress = e => {
-        if (e.lengthComputable) {
-            const realPct = Math.round(e.loaded / e.total * 100);
-            // Only override simulation if real progress is AHEAD of it
-            if (realPct > simPct) {
-                simPct = realPct;
-                bar.style.width = simPct + '%';
-                pct.innerText   = simPct + '%';
-            }
-        }
+        if (e.lengthComputable) setPct(Math.min(e.loaded / e.total * targetPct, targetPct));
     };
 
-    xhr.onerror = () => {
-        clearInterval(simInterval);
-        txt.innerText = 'Error: Network failure';
-        txt.classList.add('text-red-500');
-        if (fileInput) fileInput.value = '';
-    };
+    xhr.onerror   = () => { clearInterval(simInterval); fail('Network error — check your connection and retry'); };
+    xhr.ontimeout = () => { clearInterval(simInterval); fail('Upload timed out — try a shorter clip'); };
+    xhr.onabort   = () => { clearInterval(simInterval); };
 
     xhr.onload = () => {
         clearInterval(simInterval);
 
-        if (xhr.status !== 200) {
-            txt.innerText = 'Error: ' + xhr.status;
-            txt.classList.add('text-red-500');
-            if (fileInput) fileInput.value = '';
+        let res = null;
+        try { res = JSON.parse(xhr.responseText); } catch (e) { /* non-JSON error page */ }
+
+        if (xhr.status !== 200 || !res || !res.video_id) {
+            // Surface the server's own message (rate limit, too large, bad type).
+            fail((res && res.error) || `Upload failed (${xhr.status || 'no response'})`);
             return;
         }
 
-        // Snap to 95% on successful upload response
-        bar.style.width = '95%';
-        pct.innerText   = '95%';
-
-        const res = JSON.parse(xhr.responseText);
         videoId = res.video_id;
-        txt.innerText = 'Extracting Metadata...';
+        setPct(94);
+        txt.innerText = 'Extracting metadata...';
 
         fetch('config/' + videoId)
-            .then(r => r.json())
+            .then(r => r.ok ? r.json() : Promise.reject(new Error('config')))
             .then(cfg => {
-                bar.style.width = '100%';
-                pct.innerText   = '100%';
+                setPct(97);
                 runConfig      = cfg;
                 runConfig.conf = 0.12;
                 runConfig.iou  = 0.60;
-                txt.innerText  = 'Initialization Complete';
-                
-                fetch('/api/event', {
+                txt.innerText  = 'Loading preview frame...';
+
+                fetch('api/event', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ event: 'UPLOAD_SUCCESS', meta: { video_id: videoId } })
                 }).catch(()=>{});
-                
+
                 if (fileInput) fileInput.value = '';
-                setTimeout(() => showStep('draw'), 800);
+
+                // Only hit 100% and switch screens once the frame is decoded and
+                // on screen — otherwise the user gets a blank step after "100%".
+                return loadFirstFrame();
             })
-            .catch(() => {
-                txt.innerText = 'Metadata Failed';
-                txt.classList.add('text-red-500');
-                if (fileInput) fileInput.value = '';
-            });
+            .then(ok => {
+                // Without a decoded frame there is nothing to draw the counting
+                // line on, and taps would map to meaningless coordinates.
+                if (!ok) { videoId = null; fail('Could not read this video — try another file'); return; }
+                setPct(100);
+                txt.innerText = 'Ready';
+                setTimeout(() => showStep('draw'), 400);
+            })
+            .catch(() => { videoId = null; fail('Could not read this video — try another file'); });
     };
 
     xhr.send(form);
@@ -174,31 +197,41 @@ const ctx    = canvas ? canvas.getContext('2d') : null;
 let points   = [];
 let imgNatW  = 0, imgNatH = 0;
 
+// Resolves true once the frame is decoded and painted, false if it failed.
+// Never rejects — a missing preview should not abort the whole flow.
 function loadFirstFrame() {
-    const img         = document.getElementById('frame-img');
-    const placeholder = document.getElementById('frame-placeholder');
-
-    img.onerror = () => {
-        console.error('Failed to load first frame');
-        if (placeholder) {
-            placeholder.innerHTML =
-                '<i class="fa-solid fa-circle-exclamation text-4xl mb-3 opacity-50" style="color:#c89a6c"></i>' +
-                '<span class="font-bold text-[10px] uppercase tracking-widest opacity-50 block mt-2">Frame Load Error</span>';
-        }
-    };
+    return new Promise(resolve => {
+        const img         = document.getElementById('frame-img');
+        const placeholder = document.getElementById('frame-placeholder');
+        if (!img) { resolve(false); return; }
+
+        img.onload = () => {
+            imgNatW = img.naturalWidth;
+            imgNatH = img.naturalHeight;
+            img.style.display = 'block';
+            if (placeholder) placeholder.style.display = 'none';
+            initCanvas();
+            resolve(true);
+        };
+
+        img.onerror = () => {
+            console.error('Failed to load first frame');
+            img.style.display = 'none';
+            if (placeholder) {
+                placeholder.style.display = 'flex';
+                placeholder.innerHTML =
+                    '<i class="fa-solid fa-circle-exclamation text-4xl mb-3 opacity-50" style="color:#c89a6c"></i>' +
+                    '<span class="font-bold text-[10px] uppercase tracking-widest opacity-50 block mt-2">Frame Load Error</span>';
+            }
+            resolve(false);
+        };
 
-    img.src = 'first-frame/' + videoId;
-    img.onload = () => {
-        imgNatW = img.naturalWidth;
-        imgNatH = img.naturalHeight;
-        img.style.display = 'block';
-        if (placeholder) placeholder.style.display = 'none';
-        initCanvas();
-    };
+        img.src = 'first-frame/' + videoId;
+    });
 }
 
 function initCanvas() {
-    if (!canvas) return;
+    if (!canvas || !canvas.offsetWidth) return;   // hidden step has no size yet
     canvas.width  = canvas.offsetWidth;
     canvas.height = canvas.offsetHeight;
     // Redraw existing points after resize
@@ -208,13 +241,41 @@ function initCanvas() {
 window.addEventListener('resize', initCanvas);
 
 // ---- Coordinate helpers ----
+// The frame uses object-contain, so it is letterboxed whenever the canvas
+// aspect ratio differs from the video's (it always does on mobile, where CSS
+// forces 4/3). Mapping canvas pixels straight to image pixels therefore put
+// the counting line in the wrong place. Everything below goes through the
+// displayed image rect instead.
+function getImageRect() {
+    if (!imgNatW || !imgNatH) {
+        return { x: 0, y: 0, w: canvas.width, h: canvas.height };
+    }
+    const scale = Math.min(canvas.width / imgNatW, canvas.height / imgNatH);
+    const w = imgNatW * scale;
+    const h = imgNatH * scale;
+    return { x: (canvas.width - w) / 2, y: (canvas.height - h) / 2, w, h };
+}
+
 function getCanvasCoords(clientX, clientY) {
     const rect = canvas.getBoundingClientRect();
-    const cx   = clientX - rect.left;
-    const cy   = clientY - rect.top;
-    const rx   = (cx / canvas.width)  * imgNatW;
-    const ry   = (cy / canvas.height) * imgNatH;
-    return { cx, cy, rx: Math.round(rx), ry: Math.round(ry) };
+    const box  = getImageRect();
+    // Clamp into the visible frame so taps on the letterbox bars still land.
+    const cx = Math.min(Math.max(clientX - rect.left, box.x), box.x + box.w);
+    const cy = Math.min(Math.max(clientY - rect.top, box.y), box.y + box.h);
+    return {
+        rx: Math.round((cx - box.x) / box.w * imgNatW),
+        ry: Math.round((cy - box.y) / box.h * imgNatH),
+    };
+}
+
+// Image coords -> canvas coords, recomputed on every draw so the line stays
+// correct after a resize or an orientation change.
+function toCanvasPoint(p) {
+    const box = getImageRect();
+    return {
+        x: box.x + (p.rx / (imgNatW || 1)) * box.w,
+        y: box.y + (p.ry / (imgNatH || 1)) * box.h,
+    };
 }
 
 function addPoint(coords) {
@@ -229,8 +290,9 @@ function addPoint(coords) {
 function redrawCanvas() {
     if (!ctx) return;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    points.forEach(p => drawDot(p.cx, p.cy));
-    if (points.length === 2) drawLine();
+    const pts = points.map(toCanvasPoint);
+    pts.forEach(p => drawDot(p.x, p.y));
+    if (pts.length === 2) drawLine(pts);
 }
 
 // ---- Mouse events (desktop) ----
@@ -268,11 +330,11 @@ function drawDot(x, y) {
     ctx.stroke();
 }
 
-function drawLine() {
-    if (!ctx || points.length < 2) return;
+function drawLine(pts) {
+    if (!ctx || !pts || pts.length < 2) return;
     ctx.beginPath();
-    ctx.moveTo(points[0].cx, points[0].cy);
-    ctx.lineTo(points[1].cx, points[1].cy);
+    ctx.moveTo(pts[0].x, pts[0].y);
+    ctx.lineTo(pts[1].x, pts[1].y);
     ctx.strokeStyle = '#c89a6c';
     ctx.lineWidth   = 3;
     ctx.stroke();
@@ -286,6 +348,12 @@ function resetCanvas() {
 
 function startRun() {
     if (points.length < 2) return;
+    // Two points in the same spot define no line — the backend would compute a
+    // zero-length segment and silently count nothing.
+    if (points[0].rx === points[1].rx && points[0].ry === points[1].ry) {
+        resetCanvas();
+        return;
+    }
     const line = [[points[0].rx, points[0].ry], [points[1].rx, points[1].ry]];
     sessionStorage.setItem('funky_run', JSON.stringify({
         video_id: videoId,
@@ -294,19 +362,13 @@ function startRun() {
     }));
     sessionStorage.setItem('uf_active_tab', 'settings');
     
-    fetch('/api/event', {
+    fetch('api/event', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ event: 'DRAW_LINE_COMPLETED', meta: { video_id: videoId } })
     }).catch(()=>{});
-    
-    // SPA Navigation
-    if (typeof showDashboard === 'function') {
-        showDashboard();
-        if (typeof initApp === 'function') initApp();
-    } else {
-        window.location.replace('/vehicles');
-    }
+
+    window.location.replace('/vehicles');
 }
 
 // =============================================

frontend/js/shared.js

@@ -136,19 +136,17 @@ Email: <strong style="color:#f0c674">support.urbanflow365@gmail.com</strong></p>
     },
 };
 
+// Idempotent: both pages call this directly *and* it runs on DOMContentLoaded,
+// which used to inject two copies of every modal (duplicate element IDs, so
+// closeAppModal only ever hit the first one).
 function injectLegalModals() {
+    if (document.getElementById('legal-modals-container')) return;
+
     const container = document.createElement('div');
     container.id = 'legal-modals-container';
-
-    // Privacy Modal
-    const p = LEGAL_CONTENT.privacy;
-    const privacyHTML = getPrivacyModalTemplate(p);
-
-    // Terms Modal
-    const t = LEGAL_CONTENT.terms;
-    const termsHTML = getTermsModalTemplate(t);
-
-    container.innerHTML = privacyHTML + termsHTML;
+    container.innerHTML =
+        getPrivacyModalTemplate(LEGAL_CONTENT.privacy) +
+        getTermsModalTemplate(LEGAL_CONTENT.terms);
     document.body.appendChild(container);
 }
 
@@ -168,6 +166,8 @@ const SHORTCUTS = [
 ];
 
 function injectShortcutsModal() {
+    if (document.getElementById('appModal-shortcutsModal')) return;
+
     const rows = SHORTCUTS.map(s =>
         `<div class="shortcut-row">
             <span class="shortcut-label">${s.label}</span>
@@ -182,21 +182,6 @@ function injectShortcutsModal() {
     document.body.appendChild(container.firstElementChild);
 }
 
-// =============================================
-// Mobile Legal Menu Toggle
-// =============================================
-
-function toggleLegalMenu(e) {
-    if (e) e.stopPropagation();
-    const menu = document.getElementById('legal-menu');
-    if (menu) menu.classList.toggle('hidden');
-}
-
-document.addEventListener('click', function() {
-    const menu = document.getElementById('legal-menu');
-    if (menu) menu.classList.add('hidden');
-});
-
 // =============================================
 // Global Key Handler
 // =============================================
@@ -207,7 +192,6 @@ document.addEventListener('keydown', function(e) {
         closeAppModal('termsModal');
         closeAppModal('shortcutsModal');
         if (typeof hideLogoutConfirm === 'function') hideLogoutConfirm();
-        if (typeof closeLandingProfileMenu === 'function') closeLandingProfileMenu();
         const legalMenu = document.getElementById('legal-menu');
         if (legalMenu) legalMenu.classList.add('hidden');
     }
@@ -219,42 +203,6 @@ document.addEventListener('keydown', function(e) {
 
 document.addEventListener('DOMContentLoaded', injectLegalModals);
 
-// =============================================
-// Navigation — Single Source of Truth
-// =============================================
-
-const NAV_ITEMS = [
-    { id: 'about',       icon: 'fa-circle-info',     label: 'About' },
-    { id: 'overview',    icon: 'fa-desktop',         label: 'Overview' },
-    { id: 'results',     icon: 'fa-file-lines',      label: 'Results' },
-    { id: 'settings',    icon: 'fa-gear',            label: 'Settings' },
-    { id: 'help',        icon: 'fa-circle-question', label: 'Guide' },
-    { id: 'feedback',    icon: 'fa-comment-dots',    label: 'Feedback' },
-    { id: 'profile',     icon: 'fa-circle-user',     label: 'Profile' },
-];
-
-function injectNavigation() {
-    // Sidebar nav (desktop)
-    const sidebarNav = document.getElementById('sidebar-nav');
-    if (sidebarNav) {
-        sidebarNav.innerHTML = NAV_ITEMS.map(n =>
-            `<a onclick="switchTab('${n.id}')" id="nav-${n.id}" class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
-                <i class="fa-solid ${n.icon} w-6"></i> <span class="font-medium">${n.label}</span>
-            </a>`
-        ).join('');
-    }
-
-    // Mobile bottom nav
-    const bottomNav = document.getElementById('mobile-bottom-nav');
-    if (bottomNav) {
-        bottomNav.innerHTML = NAV_ITEMS.map(n =>
-            `<button class="mob-nav-item" id="mob-nav-${n.id}" onclick="switchTab('${n.id}')">
-                <i class="fa-solid ${n.icon}"></i>
-            </button>`
-        ).join('');
-    }
-}
-
 // =============================================
 // Service Worker Registration
 // =============================================

frontend/js/templates.js

@@ -106,17 +106,26 @@ function getShortcutsModalTemplate(rows) {
     </div>`;
 };
 
+// Profile fields come from Google, but they still land inside markup — escape
+// them so a quote or angle bracket in a display name cannot break the template.
+function escapeHTML(v) {
+    return String(v == null ? '' : v).replace(/[&<>"']/g, c => (
+        { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+    ));
+}
+
 function getOnboardFormTemplate(user) {
+    const firstName = (user.name || '').split(' ')[0] || '';
     return `
         <div class="auth-card-header">
-            <img src="${user.picture}" alt="" class="auth-avatar" referrerpolicy="no-referrer">
+            <img src="${escapeHTML(user.picture)}" alt="" class="auth-avatar" referrerpolicy="no-referrer">
             <h2 class="auth-title">Welcome</h2>
             <p class="auth-subtitle">Choose a display name for your account</p>
         </div>
         <div class="auth-onboard-form">
             <label class="auth-label">Display Name</label>
             <input id="auth-username-input" type="text" class="auth-input" maxlength="30"
-                   placeholder="e.g. Aarav" value="${user.name.split(' ')[0] || ''}" autocomplete="off">
+                   placeholder="e.g. Aarav" value="${escapeHTML(firstName)}" autocomplete="off">
             <p id="auth-onboard-error" class="auth-error hidden"></p>
             <button id="auth-onboard-submit" class="auth-submit-btn" onclick="_submitOnboarding()">
                 Continue

frontend/js/vehicles.js

@@ -154,16 +154,11 @@ document.addEventListener('click', e => {
 
 // ---- Tab switching — updates both sidebar + mobile bottom nav ----
 function switchTab(tab) {
-    console.log('[UrbanFlow] Switching to tab:', tab);
-
     const allTabs = ['about', 'overview', 'results', 'settings', 'help', 'feedback', 'profile'];
 
     allTabs.forEach(t => {
         const el = document.getElementById('tab-' + t);
-        if (el) {
-            el.classList.toggle('hidden', tab !== t);
-            if (tab === t) console.log('[UrbanFlow] Tab visible:', t);
-        }
+        if (el) el.classList.toggle('hidden', tab !== t);
 
         const nav = document.getElementById('nav-' + t);
         if (nav) {
@@ -263,13 +258,19 @@ window.switchTab = switchTab;
             el.classList.add('active');
         }
 
+        // These are uf-select widgets (hidden input + label), not <select>, so
+        // the chosen text lives on the label — reading .options gave "" always.
+        function ufSelectText(id) {
+            const hidden = document.getElementById(id);
+            if (!hidden || !hidden.value) return "";
+            const label = document.getElementById(id + '-label');
+            return label ? label.textContent.trim() : hidden.value;
+        }
+
         async function submitFeedback() {
-            const typeEl = document.getElementById('fb-type');
-            const typeText = typeEl.selectedIndex >= 0 ? typeEl.options[typeEl.selectedIndex].text : "";
-            
-            const usecaseEl = document.getElementById('fb-usecase');
-            const usecaseText = usecaseEl.selectedIndex >= 0 ? usecaseEl.options[usecaseEl.selectedIndex].text : "";
-            
+            const typeText    = ufSelectText('fb-type');
+            const usecaseText = ufSelectText('fb-usecase');
+
             const text = document.getElementById('fb-text').value.trim();
             
             const priorities = [];
@@ -297,11 +298,17 @@ window.switchTab = switchTab;
             if (session && session.email) {
                 payload.user_email = session.email;
             }
-            const res = await fetch('api/feedback', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
-            });
+            let res;
+            try {
+                res = await fetch('api/feedback', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+            } catch (err) {
+                showToast('Network error — please try again', 'error');
+                return;
+            }
             if (res.ok) {
                 showToast('Thank you for your feedback!', 'success');
                 document.getElementById('fb-text').value = '';
@@ -365,6 +372,8 @@ window.switchTab = switchTab;
                     }
                 }
                 requestAnimationFrame(updateSmoothBar);
+            } else if (res.status === 429) {
+                showToast('Too many submissions — please wait a minute', 'error');
             } else {
                 showToast('Failed to submit — please try again', 'error');
             }
@@ -475,11 +484,6 @@ window.switchTab = switchTab;
             </div>`;
         }
 
-        function boolBadge(val) {
-            if (val) return `<span class="inline-flex items-center bg-green-50 text-green-700 text-[10px] font-bold px-2 py-0.5 rounded border border-green-200"><i class="fa-solid fa-check mr-1"></i>TRUE</span>`;
-            return `<span class="text-[10px] font-bold text-slate-300">FALSE</span>`;
-        }
-
         function populateRunDetails(c) {
             const res = c.resolution || [0, 0];
 
@@ -550,10 +554,11 @@ window.switchTab = switchTab;
         let congChart, doughChart, domChart, flowChart;
 
         async function initApp() {
-            // Read settings from sessionStorage
-            const rawRun = sessionStorage.getItem('funky_run');
-            const runSettings = rawRun ? (JSON.parse(rawRun).settings || {}) : {};
-            currentPalette = runSettings.palette || 'default';
+            // Honour the palette saved on the Profile tab. This used to read a
+            // `settings` key off funky_run that nothing ever wrote, so the
+            // saved preference was silently ignored on every run.
+            const savedPalette = localStorage.getItem('uf_pref_palette');
+            currentPalette = PALETTES[savedPalette] ? savedPalette : 'default';
             activePalette = PALETTES[currentPalette];
 
             // =========== Charts ===========
@@ -647,20 +652,25 @@ window.switchTab = switchTab;
             // Original init() logic
             const raw = sessionStorage.getItem('funky_run');
             if (!raw) {
-                if (typeof showOnboardingPhase === 'function') {
-                    showOnboardingPhase();
-                } else {
-                    window.location.replace('/');
-                }
+                window.location.replace('/');
                 return;
             }
 
             _params = JSON.parse(raw);
 
-            const cRes = await fetch('constants');
-            const cData = await cRes.json();
-            MODEL_CLASSES = cData.classes;
-            BUSINESS_MAP = cData.business_map;
+            try {
+                const cRes = await fetch('constants');
+                if (!cRes.ok) throw new Error('constants ' + cRes.status);
+                const cData = await cRes.json();
+                MODEL_CLASSES = cData.classes;
+                BUSINESS_MAP = cData.business_map;
+            } catch (err) {
+                // Without the class map the dashboard renders empty breakdowns,
+                // so say what happened rather than failing silently.
+                console.error('[UrbanFlow]', err);
+                showToast('Could not reach the server — please reload', 'error');
+                return;
+            }
 
             populateAndInit(_params);
             sessionStorage.removeItem('funky_run');
@@ -679,7 +689,9 @@ window.switchTab = switchTab;
         // =========== Live Palette Switching ===========
         function applyPalette(key) {
             activePalette = PALETTES[key] || PALETTES.default;
-            currentPalette = key;
+            currentPalette = PALETTES[key] ? key : 'default';
+            // Persist so the choice survives the next run (initApp reads this).
+            try { localStorage.setItem('uf_pref_palette', currentPalette); } catch (e) {}
 
             // Congestion
             congChart.data.datasets[0].borderColor = activePalette.congestion;
@@ -723,42 +735,38 @@ window.switchTab = switchTab;
             }
         }
 
-        function populateSettingsTab(config, settings) {
+        function populateSettingsTab(config) {
             // Populate stepper values from config
-            document.getElementById('sv-imgsz').textContent = config.imgsz || 640;
+            document.getElementById('sv-imgsz').textContent = config.imgsz || 736;
             document.getElementById('sv-conf').textContent = (config.conf || 0.12).toFixed(2);
             document.getElementById('sv-iou').textContent = (config.iou || 0.60).toFixed(2);
             document.getElementById('sv-stride').textContent = config.detect_stride || 2;
 
-            // Populate export settings
-            const selReport = document.getElementById('sv-report');
-            if (selReport) selReport.value = settings.reportFormat || 'png';
-            const togAnnot = document.getElementById('sv-annotated');
-            if (togAnnot && settings.annotatedVideo) togAnnot.classList.add('active');
-
-            // Set live palette dropdown
+            // Reflect the restored palette in the header dropdown + its label.
             const sel = document.getElementById('live-palette-select');
             if (sel) sel.value = currentPalette;
+            const palLabel = document.getElementById('live-palette-label');
+            if (palLabel) palLabel.textContent = currentPalette.charAt(0).toUpperCase() + currentPalette.slice(1);
             renderPalettePreview(currentPalette);
         }
 
         // =========== Settings Stepper Logic ===========
+        // imgsz is absent on purpose: the OpenVINO graph is compiled at a fixed
+        // input size, so it is displayed but not tunable.
         const PARAM_LIMITS = {
-            imgsz: { min: 640, max: 1280 },
             conf: { min: 0.10, max: 0.95 },
             iou: { min: 0.50, max: 0.95 },
-            stride: { min: 1, max: 10 },
-            smoothing: { min: 0.05, max: 0.95 }
+            stride: { min: 1, max: 10 }
         };
 
         function stepParam(param, delta) {
             const el = document.getElementById('sv-' + param);
-            if (!el) return;
             const limits = PARAM_LIMITS[param];
+            if (!el || !limits) return;
             let val = parseFloat(el.textContent);
             val = Math.round((val + delta) * 100) / 100;
             val = Math.max(limits.min, Math.min(limits.max, val));
-            el.textContent = (param === 'conf' || param === 'iou' || param === 'smoothing') ? val.toFixed(2) : val;
+            el.textContent = (param === 'conf' || param === 'iou') ? val.toFixed(2) : val;
         }
 
         function lockSettings() {
@@ -787,12 +795,7 @@ window.switchTab = switchTab;
         function startNewAnalysis() {
             sessionStorage.clear();
             _params = null;
-            // SPA Router
-            if (typeof showOnboardingPhase === 'function') {
-                showOnboardingPhase();
-            } else {
-                window.location.replace('/');
-            }
+            window.location.replace('/');
         }
         function updateBreakdown(classIn, classOut) {
             const container = document.getElementById('class-breakdown');
@@ -888,7 +891,7 @@ window.switchTab = switchTab;
 
         function populateAndInit(params) {
             populateRunDetails(params.config);
-            populateSettingsTab(params.config, params.settings || {});
+            populateSettingsTab(params.config);
         }
 
         function startProcessingFromSettings() {
@@ -937,13 +940,13 @@ window.switchTab = switchTab;
             switchTab('overview');
             document.getElementById('proc-label').innerText = 'Connecting...';
 
-            // Analytics Funnel
-            if (typeof trackFunnel === 'function') {
-                trackFunnel('PROCESS_STARTED');
-            }
+            fetch('api/event', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ event: 'PROCESS_STARTED', meta: { video_id: _params.video_id } })
+            }).catch(() => {});
 
             // Reset Run Tab Results to Awaiting
-
             document.getElementById('run-results-content').innerHTML = `
                 <div class="flex flex-col items-center justify-center p-8 bg-black/40 border border-slate-800 rounded-2xl col-span-3 text-slate-500">
                     <i class="fa-solid fa-spinner fa-spin text-2xl mb-3 text-white"></i>
@@ -1065,10 +1068,10 @@ window.switchTab = switchTab;
 
 
                     // GLOW NOTIFICATION: Let the user know artifacts are ready
-                    const resultsMob = document.getElementById('mob-nav-results');
-                    if (resultsMob) {
-                        resultsMob.classList.add('notify-glow');
-                    }
+                    ['mob-nav-results', 'nav-results'].forEach(id => {
+                        const el = document.getElementById(id);
+                        if (el) el.classList.add('notify-glow');
+                    });
 
                     // Show results content immediately (telemetry first, reports load async)
                     const rPendingMsg = document.getElementById('reports-pending-message');
@@ -1096,25 +1099,11 @@ window.switchTab = switchTab;
                         });
                     }
 
-                    // Disable Auto-Download toggle after completion
-                    const adToggle = document.getElementById('sv-auto-download');
-                    if (adToggle) {
-                        adToggle.closest('.s-row').classList.add('disabled');
-                    }
-                    const jsonToggle = document.getElementById('sv-export-json');
-                    if (jsonToggle) {
-                        jsonToggle.closest('.s-row').classList.add('disabled');
-                    }
-
-                    // NOTIFY USER: Glow the results icon in mobile nav
-                    const resultsNav = document.getElementById('mob-nav-results');
-                    if (resultsNav) {
-                        resultsNav.classList.add('notify-glow');
-                    }
-                    const csvToggle = document.getElementById('sv-export-csv');
-                    if (csvToggle) {
-                        csvToggle.closest('.s-row').classList.add('disabled');
-                    }
+                    // Lock the export toggles — the run they configure is over.
+                    ['sv-auto-download', 'sv-export-json', 'sv-export-csv'].forEach(id => {
+                        const row = document.getElementById(id);
+                        if (row && row.closest('.s-row')) row.closest('.s-row').classList.add('disabled');
+                    });
 
                     // Show New Analysis button in Settings
                     const newWrap = document.getElementById('new-analysis-wrap');
@@ -1198,9 +1187,20 @@ window.switchTab = switchTab;
         };
 
         async function loadReports(videoId) {
-            const res = await fetch(`reports/${videoId}`, { method: 'POST' });
-            const data = await res.json();
-            if (!data.files || !data.files.length) return null;
+            let data;
+            try {
+                const res = await fetch(`reports/${videoId}`, { method: 'POST' });
+                if (!res.ok) throw new Error('reports ' + res.status);
+                data = await res.json();
+            } catch (err) {
+                console.error('[UrbanFlow]', err);
+                showToast('Report generation failed — telemetry is still available', 'error');
+                return null;
+            }
+            if (!data.files || !data.files.length) {
+                showToast('No artifacts were produced for this run', 'info');
+                return null;
+            }
 
             const rPending = document.getElementById('reports-pending');
             if (rPending) rPending.classList.add('hidden');
@@ -1359,14 +1359,14 @@ window.switchTab = switchTab;
         bubble.style.pointerEvents = 'auto';
         portal.appendChild(bubble);
 
-        if (isMobile) {
+        {
             // 7 icons in bottom nav. Settings = 4th (index 3).
             // Center of 4th icon = (3 + 0.5) / 7 = 50% of viewport width.
-            const navH = parseInt(
-                getComputedStyle(document.documentElement)
-                    .getPropertyValue('--mob-nav-h') || '68', 10
-            );
-            const vpW  = window.innerWidth;
+            // Measure the nav directly: --mob-nav-h is a calc() with a
+            // safe-area env() in it and does not parse as a number.
+            const navEl = document.getElementById('mobile-bottom-nav');
+            const navH  = navEl ? navEl.offsetHeight : 68;
+            const vpW   = window.innerWidth;
             const settingsCenterX = (3.5 / 7) * vpW;
             const bubbleW = bubble.offsetWidth || 220;
             const leftPx  = Math.max(8, Math.min(settingsCenterX - bubbleW / 2, vpW - bubbleW - 8));
@@ -1391,31 +1391,6 @@ window.switchTab = switchTab;
                 borderRight: '8px solid transparent',
                 borderTop:   '8px solid #c89a6c',
             });
-
-        } else {
-            // Desktop sidebar <aside class="w-60"> = 240px.
-            // Settings is 5th nav link: logo(112px) + 4 items × 44px + 22px = 310px from top.
-            const settingsY = 310;
-            Object.assign(bubble.style, {
-                left:      '256px',
-                top:       (settingsY - 40) + 'px',
-                bottom:    'auto',
-                right:     'auto',
-                transform: 'none',
-                textAlign: 'left',
-            });
-
-            const arrow = bubble.querySelector('#retry-bubble-arrow');
-            Object.assign(arrow.style, {
-                position:     'absolute',
-                left:         '-8px',
-                top:          '50%',
-                transform:    'translateY(-50%)',
-                width:        '0', height: '0',
-                borderTop:    '8px solid transparent',
-                borderBottom: '8px solid transparent',
-                borderRight:  '8px solid #c89a6c',
-            });
         }
 
         bubble.addEventListener('click', () => bubble.remove());
@@ -1443,15 +1418,6 @@ window.switchTab = switchTab;
             if (mobPfp && session.picture) {
                 mobPfp.innerHTML = `<img src="${session.picture}" alt="" class="w-full h-full object-cover rounded-full" referrerpolicy="no-referrer">`;
             }
-
-            // Sync Palette Preference
-            const savedPalette = localStorage.getItem('uf_pref_palette') || 'default';
-            const paletteInp = document.getElementById('pref-palette');
-            if (paletteInp) {
-                paletteInp.value = savedPalette;
-                const label = document.getElementById('pref-palette-label');
-                if (label) label.innerText = savedPalette.charAt(0).toUpperCase() + savedPalette.slice(1);
-            }
         }
 
         function populateProfileTab() {
@@ -1532,15 +1498,6 @@ window.switchTab = switchTab;
             window.addEventListener('click', closer);
         }
 
-        // Palette Persistence
-        document.addEventListener('change', (e) => {
-            if (e.target.id === 'pref-palette') {
-                localStorage.setItem('uf_pref_palette', e.target.value);
-                showToast(`Palette preference saved: ${e.target.value}`, 'success');
-            }
-        });
-
-
         document.addEventListener('DOMContentLoaded', () => {
             // Phase 1: instant visual — show the shell immediately on first paint
             const activeTab = sessionStorage.getItem('uf_active_tab') || 'settings';

frontend/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'urbanflow-v4';
+const CACHE_NAME = 'urbanflow-v5';
 const ASSETS = [
   './css/initial.css',
   './css/vehicles.css',
@@ -13,15 +13,26 @@ self.addEventListener('install', (e) => {
   e.waitUntil(caches.open(CACHE_NAME).then(c => c.addAll(ASSETS)));
 });
 
+// Drop caches from previous versions instead of letting them accumulate.
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys().then(keys =>
+      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
+    )
+  );
+});
+
 self.addEventListener('fetch', (e) => {
+  // Only GETs are cacheable. Passing an upload POST through respondWith()
+  // re-issues the request body and surfaces any hiccup to the page as an
+  // opaque "network failure", so leave every non-GET to the browser.
+  if (e.request.method !== 'GET') return;
+
   const url = new URL(e.request.url);
-  
-  // NEVER cache WebSockets or API calls
-  if (url.pathname.includes('/ws/') || url.pathname.includes('/reports/') || url.pathname.includes('/bundle/')) {
-    return;
-  }
+  if (url.origin !== self.location.origin) return;
 
-  e.respondWith(
-    fetch(e.request).catch(() => caches.match(e.request))
-  );
+  // Dynamic endpoints must never be served from, or fall back to, the cache.
+  if (/^\/(ws|api|upload|config|first-frame|reports|bundle|constants)\b/.test(url.pathname)) return;
+
+  e.respondWith(fetch(e.request).catch(() => caches.match(e.request)));
 });

frontend/vehicles.html

@@ -4,7 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="color-scheme" content="dark">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <!-- viewport-fit=cover for notched devices; zoom left enabled (WCAG 1.4.4) -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <title>UrbanFlow</title>
     <link rel="icon" type="image/png" href="assets/shuriken.png">
     <link rel="manifest" href="manifest.json">
@@ -64,8 +65,7 @@
                 <button onclick="openAppModal('termsModal'); toggleLegalMenu(event)" class="w-full text-left px-4 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[#a89f97] hover:text-white hover:bg-[#111] border-b border-[#1a1a1a] transition-all">
                     Terms & Conditions
                 </button>
-                <!-- Sign Out (populated by JS) -->
-                <button id="mobile-signout-btn" class="mobile-signout-btn" style="display:none" onclick="showLogoutConfirm()">Sign Out</button>
+                <button id="mobile-signout-btn" class="mobile-signout-btn" onclick="showLogoutConfirm()">Sign Out</button>
             </div>
         </div>
     </div>
@@ -120,23 +120,6 @@
         </div>
     </aside>
 
-    <!-- Mobile Navigation (hidden on desktop) -->
-    <div
-        class="mobile-nav hidden fixed top-0 left-0 right-0 z-30 bg-black border-b border-slate-800 px-4 py-2 items-center justify-between">
-        <img src="assets/uf_rf.png" alt="UF" class="h-8">
-        <div class="flex items-center gap-4">
-            <div class="dropdown relative">
-                <button onclick="toggleLegalMenu(event)" class="text-slate-500 hover:text-white transition">
-                    <i class="fa-solid fa-ellipsis-vertical"></i>
-                </button>
-                <div id="legal-menu" class="hidden absolute right-0 mt-2 w-48 bg-neutral-900 border border-neutral-800 rounded-lg shadow-xl py-2 z-50">
-                    <a onclick="openAppModal('privacyModal')" class="block px-4 py-2 text-xs text-slate-300 hover:bg-neutral-800 hover:text-white cursor-pointer">Privacy Policy</a>
-                    <a onclick="openAppModal('termsModal')" class="block px-4 py-2 text-xs text-slate-300 hover:bg-neutral-800 hover:text-white cursor-pointer">Terms &amp; Conditions</a>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <!-- Toast Container -->
     <div id="toast-container"></div>
 
@@ -512,11 +495,9 @@
                                             for the resolution compiled into the OpenVINO weights.</span>
                                     </span>
                                 </div>
-                                <div class="text-[10px] text-slate-500">Model input resolution</div>
+                                <div class="text-[10px] text-slate-500">Fixed by the compiled model graph</div>
                             </div>
-                            <div class="s-stepper"><button onclick="stepParam('imgsz',-32)">&#8249;</button><span
-                                    class="s-val" id="sv-imgsz">640</span><button
-                                    onclick="stepParam('imgsz',32)">&#8250;</button></div>
+                            <div class="s-stepper"><span class="s-val" id="sv-imgsz">736</span></div>
                         </div>
                         <div class="s-row" data-param="conf">
                             <div>
@@ -673,7 +654,7 @@
                 </div>
 
                 <!-- Start Button -->
-                <div class="col-span-3 pb-4 flex justify-center" id="settings-start-wrap">
+                <div class="col-span-2 pb-4 flex justify-center" id="settings-start-wrap">
                     <button id="btn-start-processing" onclick="startProcessingFromSettings()"
                         class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg hover:scale-105 active:scale-95"
                         style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)">
@@ -682,7 +663,7 @@
                 </div>
 
                 <!-- Home Button (visible only after processing completes) -->
-                <div class="col-span-3 pb-4 hidden flex justify-center" id="new-analysis-wrap">
+                <div class="col-span-2 pb-4 hidden flex justify-center" id="new-analysis-wrap">
                     <button onclick="startNewAnalysis()"
                         class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg hover:scale-105 active:scale-95"
                         style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)">
@@ -1200,46 +1181,42 @@
 
 
 
-        // Inject shared components (modals, shortcuts, nav)
+        // Inject shared components (modals, shortcuts)
         injectLegalModals();
         injectShortcutsModal();
-        // Auto-show keyboard shortcuts on first desktop visit
-        if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
+        // Auto-show keyboard shortcuts on the FIRST desktop visit only —
+        // it used to interrupt every single run.
+        if (window.matchMedia('(hover: hover) and (pointer: fine)').matches
+            && !localStorage.getItem('uf_shortcuts_seen')) {
+            localStorage.setItem('uf_shortcuts_seen', '1');
             setTimeout(function () { openAppModal('shortcutsModal'); }, 800);
         }
     </script>
-    <nav class="mobile-bottom-nav" id="mobile-bottom-nav">
-        <button class="mob-nav-item" id="mob-nav-about" onclick="switchTab('about')">
-            <i class="fa-solid fa-circle-info"></i>
+    <nav class="mobile-bottom-nav" id="mobile-bottom-nav" aria-label="Main">
+        <button class="mob-nav-item" id="mob-nav-about" onclick="switchTab('about')" aria-label="About">
+            <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
         </button>
-        <button class="mob-nav-item" id="mob-nav-overview" onclick="switchTab('overview')">
-            <i class="fa-solid fa-desktop"></i>
+        <button class="mob-nav-item" id="mob-nav-overview" onclick="switchTab('overview')" aria-label="Overview">
+            <i class="fa-solid fa-desktop" aria-hidden="true"></i>
         </button>
-        <button class="mob-nav-item" id="mob-nav-results" onclick="switchTab('results')">
-            <i class="fa-solid fa-file-lines"></i>
+        <button class="mob-nav-item" id="mob-nav-results" onclick="switchTab('results')" aria-label="Results">
+            <i class="fa-solid fa-file-lines" aria-hidden="true"></i>
         </button>
-        <button class="mob-nav-item" id="mob-nav-settings" onclick="switchTab('settings')">
-            <i class="fa-solid fa-gear"></i>
+        <button class="mob-nav-item" id="mob-nav-settings" onclick="switchTab('settings')" aria-label="Settings">
+            <i class="fa-solid fa-gear" aria-hidden="true"></i>
         </button>
-        <button class="mob-nav-item" id="mob-nav-help" onclick="switchTab('help')">
-            <i class="fa-solid fa-circle-question"></i>
+        <button class="mob-nav-item" id="mob-nav-help" onclick="switchTab('help')" aria-label="Guide">
+            <i class="fa-solid fa-circle-question" aria-hidden="true"></i>
         </button>
-        <button class="mob-nav-item" id="mob-nav-feedback" onclick="switchTab('feedback')">
-            <i class="fa-solid fa-comment-dots"></i>
+        <button class="mob-nav-item" id="mob-nav-feedback" onclick="switchTab('feedback')" aria-label="Feedback">
+            <i class="fa-solid fa-comment-dots" aria-hidden="true"></i>
         </button>
-        <button class="mob-nav-item" id="mob-nav-profile" onclick="switchTab('profile')">
+        <button class="mob-nav-item" id="mob-nav-profile" onclick="switchTab('profile')" aria-label="Profile">
             <div id="mob-pfp-wrap" class="w-7 h-7 rounded-full overflow-hidden bg-neutral-800 flex items-center justify-center mx-auto">
-                <i class="fa-solid fa-circle-user"></i>
+                <i class="fa-solid fa-circle-user" aria-hidden="true"></i>
             </div>
         </button>
-    </nav> 
-    <script>
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', () => {
-                navigator.serviceWorker.register('./sw.js');
-            });
-        }
-    </script>
+    </nav>
 </body>
 
 </html>