Spaces:

Perception365
/

UrbanFlow

Running

App Files Files Community

Subh775 commited on 1 day ago

Commit

5cd1866

1 Parent(s): dde3ae9

RELEASE: auth; pf section added; bug/crash/ major improvements & fixes; refactoring pending..

Browse files

Files changed (18) hide show

backend/auth.py +85 -0
backend/email_template.html +16 -0
backend/engine.py +94 -100
backend/geometry.py +12 -0
backend/server.py +130 -38
frontend/css/auth.css +323 -0
frontend/css/initial.css +42 -26
frontend/css/shared.css +281 -0
frontend/css/vehicles.css +1525 -1410
frontend/initial.html +49 -109
frontend/js/auth.js +375 -0
frontend/js/initial.js +33 -7
frontend/js/shared.js +266 -0
frontend/js/templates.js +126 -0
frontend/js/vehicles.js +247 -36
frontend/sw.js +2 -0
frontend/vehicles.html +266 -358
requirements.txt +1 -0

backend/auth.py ADDED Viewed

	@@ -0,0 +1,85 @@

+"""
+Google OAuth token verification and lightweight user store.
+Uses google-auth to verify JWT credentials issued by Google Identity Services.
+User profiles are stored in a JSON file (/tmp) — ephemeral on HF Spaces,
+which is acceptable for a demo. Client-side localStorage persists the session.
+"""
+import json
+import os
+from pathlib import Path
+from datetime import datetime, timezone
+from google.oauth2 import id_token
+from google.auth.transport import requests as google_requests
+GOOGLE_CLIENT_ID = os.getenv("GOOGLE_CLIENT_ID", "")
+USER_STORE_PATH = Path(os.getenv("USER_STORE_PATH", "/tmp/urbanflow_users.json"))
+def _load_users() -> dict:
+    if USER_STORE_PATH.exists():
+        return json.loads(USER_STORE_PATH.read_text())
+    return {}
+def _save_users(users: dict):
+    USER_STORE_PATH.write_text(json.dumps(users, indent=2))
+def verify_google_token(credential: str) -> dict:
+    """
+    Verify a Google ID token (JWT) and return the decoded payload.
+    Raises ValueError on invalid/expired tokens.
+    """
+    idinfo = id_token.verify_oauth2_token(
+        credential,
+        google_requests.Request(),
+        GOOGLE_CLIENT_ID,
+    )
+    return {
+        "email": idinfo["email"],
+        "name": idinfo.get("name", ""),
+        "picture": idinfo.get("picture", ""),
+    }
+def get_or_create_user(email: str, name: str, picture: str) -> dict:
+    """
+    Look up a user by email. If they don't exist, create a stub record.
+    Returns the user record with a `new_user` flag.
+    """
+    users = _load_users()
+    is_new = email not in users
+    if is_new:
+        users[email] = {
+            "username": "",
+            "name": name,
+            "picture": picture,
+            "created_at": datetime.now(timezone.utc).isoformat(),
+        }
+        _save_users(users)
+    user = users[email]
+    return {
+        "email": email,
+        "username": user.get("username", ""),
+        "name": user.get("name", name),
+        "picture": user.get("picture", picture),
+        "new_user": is_new or not user.get("username"),
+    }
+def set_username(email: str, username: str) -> bool:
+    """
+    Save a display username for a first-time user.
+    Returns True on success, False if the user record doesn't exist.
+    """
+    users = _load_users()
+    if email not in users:
+        return False
+    users[email]["username"] = username.strip()
+    _save_users(users)
+    return True

backend/email_template.html ADDED Viewed

	@@ -0,0 +1,16 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap" rel="stylesheet">
+</head>
+<body style="margin: 0; padding: 0; background-color: #ffffff;">
+    <div style="font-family: 'Montserrat', sans-serif; color: #333; max-width: 600px; margin: 40px auto; padding: 0 20px;">
+        {final_content}
+        <div style="margin-top: 60px; padding-top: 30px; border-top: 1px solid #eee; text-align: center;">
+            <p style="font-size: 10px; color: #bbb; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin: 0;">Inference Engine Feedback Capture</p>
+            <p style="font-size: 9px; color: #ddd; margin-top: 5px;">&copy; 2026 UrbanFlow. All rights reserved.</p>
+        </div>
+    </div>
+</body>
+</html>

backend/engine.py CHANGED Viewed

@@ -9,19 +9,7 @@ from collections import defaultdict
 from pcu import compute_pcu, MODEL_CLASSES
 from tracker_config import get_tracker_path
 from speed import estimate_speeds
-def _side(p, a, b):
-    return np.sign((b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]))
-def _point_to_segment_dist(px, py, ax, ay, bx, by):
-    A = np.array([ax, ay], dtype=float)
-    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))
 # Lightweight drawing colors (BGR for OpenCV)
@@ -160,97 +148,103 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
         batch=2       # MUST match OpenVINO export batch size
     )
-    a = line[0]
-    b = line[1]
     iterator = iter(enumerate(results))
-    while True:
-        try:
-            frame_idx, r = next(iterator)
-        except StopIteration:
-            break
-        except RuntimeError as e:
-            if "incompatible" in str(e) and "shape=" in str(e):
-                print(f"[BACKEND] Ignored OpenVINO shape mismatch on final trailing batch.")
                 break
-            raise e
-        active = 0
-        cur_boxes = None
-        cur_ids = None
-        if r.boxes.id is not None:
-            ids = r.boxes.id.cpu().numpy()
-            cls = r.boxes.cls.cpu().numpy()
-            xyxy = r.boxes.xyxy.cpu().numpy()
-            active = len(ids)
-            confs = r.boxes.conf.cpu().numpy().tolist()
-            conf_scores.extend(confs)
-            cur_boxes = xyxy
-            cur_ids = ids
-            for obj_id, c, box in 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)])])
-                track_positions[obj_id].append((frame_idx, cx, cy))
-                current = _side((cx, cy), a, b)
-                # Skip if centroid is exactly on the line (cross-product == 0)
-                # — avoids misfired crossings due to floating-point boundary hits
-                if current == 0:
-                    continue
-                if obj_id in prev_side and obj_id not in counted_ids:
-                    if prev_side[obj_id] != current:
-                        dist = _point_to_segment_dist(cx, cy, a[0], a[1], b[0], b[1])
-                        if dist < cross_dist:
-                            t = frame_idx * stride / fps
-                            flow_times.append(round(t, 2))
-                            if current > 0:
-                                class_in[int(c)] += 1
-                                raw_events.append([frame_idx + 1, round(t, 2), int(obj_id), MODEL_CLASSES.get(int(c), f"cls_{int(c)}"), "IN"])
-                            else:
-                                class_out[int(c)] += 1
-                                raw_events.append([frame_idx + 1, round(t, 2), int(obj_id), MODEL_CLASSES.get(int(c), f"cls_{int(c)}"), "OUT"])
-                            counted_ids.add(obj_id)
-                prev_side[obj_id] = current
-        # Write annotated frame
-        cur_clses = cls if r.boxes.id is not None else None
         if writer is not None:
-            frame = r.orig_img.copy()
-            _draw_annotations(frame, cur_boxes, cur_ids, cur_clses, [a, b], annotated_options)
-            writer.write(frame)
-        congestion.append(active)
-        elapsed = time.time() - start
-        update = {
-            "frame_index": frame_idx + 1,
-            "total_iters": total_iters,
-            "total_frames": total,
-            "active": active,
-            "congestion_len": len(congestion),           # just the length, not the full list
-            "congestion_last": congestion[-1] if congestion else 0,  # only latest value
-            "class_in": {str(k): v for k, v in class_in.items()},
-            "class_out": {str(k): v for k, v in class_out.items()},
-            "flow_count": len(flow_times),               # just the count
-            "elapsed": round(elapsed, 2),
-            "fps": round((frame_idx + 1) / elapsed, 2) if elapsed > 0 else 0,
-        }
-        on_frame(update)
-    if writer is not None:
-        writer.stop()
     processing_time = round(time.time() - start, 2)
     actual_fps = round(total / processing_time, 2) if processing_time > 0 else 0

 from pcu import compute_pcu, MODEL_CLASSES
 from tracker_config import get_tracker_path
 from speed import estimate_speeds
+from geometry import _side, _point_to_segment_dist
 # Lightweight drawing colors (BGR for OpenCV)
         batch=2       # MUST match OpenVINO export batch size
     )
+    a = line[0] if line and len(line) > 1 else [None, None]
+    b = line[1] if line and len(line) > 1 else [None, None]
+    valid_line = not (a[0] is None or a[1] is None or b[0] is None or b[1] is None)
     iterator = iter(enumerate(results))
+    try:
+        while True:
+            try:
+                frame_idx, r = next(iterator)
+            except StopIteration:
                 break
+            except RuntimeError as e:
+                if "incompatible" in str(e) and "shape=" in str(e):
+                    print(f"[BACKEND] Ignored OpenVINO shape mismatch on final trailing batch.")
+                    break
+                raise e
+            active = 0
+            cur_boxes = None
+            cur_ids = None
+            if r.boxes.id is not None:
+                ids = r.boxes.id.cpu().numpy()
+                cls = r.boxes.cls.cpu().numpy()
+                xyxy = r.boxes.xyxy.cpu().numpy()
+                active = len(ids)
+                confs = r.boxes.conf.cpu().numpy().tolist()
+                conf_scores.extend(confs)
+                cur_boxes = xyxy
+                cur_ids = ids
+                for obj_id, c, box in 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)])])
+                    track_positions[obj_id].append((frame_idx, cx, cy))
+                    if not valid_line:
+                        current = 0
+                    else:
+                        current = _side((cx, cy), a, b)
+                    # Skip if centroid is exactly on the line (cross-product == 0)
+                    # — avoids misfired crossings due to floating-point boundary hits
+                    if current == 0:
+                        continue
+                    if obj_id in prev_side and obj_id not in counted_ids:
+                        if prev_side[obj_id] != current:
+                            dist = _point_to_segment_dist(cx, cy, a[0], a[1], b[0], b[1])
+                            if dist < cross_dist:
+                                t = frame_idx * stride / fps
+                                flow_times.append(round(t, 2))
+                                if current > 0:
+                                    class_in[int(c)] += 1
+                                    raw_events.append([frame_idx + 1, round(t, 2), int(obj_id), MODEL_CLASSES.get(int(c), f"cls_{int(c)}"), "IN"])
+                                else:
+                                    class_out[int(c)] += 1
+                                    raw_events.append([frame_idx + 1, round(t, 2), int(obj_id), MODEL_CLASSES.get(int(c), f"cls_{int(c)}"), "OUT"])
+                                counted_ids.add(obj_id)
+                    prev_side[obj_id] = current
+            # Write annotated frame
+            cur_clses = cls if r.boxes.id is not None else None
+            if writer is not None:
+                frame = r.orig_img.copy()
+                _draw_annotations(frame, cur_boxes, cur_ids, cur_clses, [a, b], annotated_options)
+                writer.write(frame)
+            congestion.append(active)
+            elapsed = time.time() - start
+            update = {
+                "frame_index": frame_idx + 1,
+                "total_iters": total_iters,
+                "total_frames": total,
+                "active": active,
+                "congestion_len": len(congestion),           # just the length, not the full list
+                "congestion_last": congestion[-1] if congestion else 0,  # only latest value
+                "class_in": {str(k): v for k, v in class_in.items()},
+                "class_out": {str(k): v for k, v in class_out.items()},
+                "flow_count": len(flow_times),               # just the count
+                "elapsed": round(elapsed, 2),
+                "fps": round((frame_idx + 1) / elapsed, 2) if elapsed > 0 else 0,
+            }
+            on_frame(update)
+    finally:
         if writer is not None:
+            writer.stop()
     processing_time = round(time.time() - start, 2)
     actual_fps = round(total / processing_time, 2) if processing_time > 0 else 0

backend/geometry.py ADDED Viewed

	@@ -0,0 +1,12 @@

+import numpy as np
+def _side(p, a, b):
+    return np.sign((b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]))
+def _point_to_segment_dist(px, py, ax, ay, bx, by):
+    A = np.array([ax, ay], dtype=float)
+    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))

backend/server.py CHANGED Viewed

@@ -8,15 +8,18 @@ from pathlib import Path
 import zipfile
 import cv2
-from fastapi import FastAPI, WebSocket, UploadFile, File, BackgroundTasks
-from fastapi.responses import FileResponse, Response
 from fastapi.staticfiles import StaticFiles
 import resend
 from model import load_model
 from config import get_optimal_config
 from engine import run
 from pcu import MODEL_CLASSES
 from visualize import generate_all
 BUSINESS_MAP = {
@@ -43,6 +46,23 @@ video_info = {}
 run_results = {}
 model = None
 @asynccontextmanager
 async def lifespan(app: FastAPI):
@@ -62,6 +82,15 @@ async def lifespan(app: FastAPI):
 app = FastAPI(lifespan=lifespan)
 @app.get("/")
 def index():
@@ -69,12 +98,23 @@ def index():
 @app.get("/vehicles.html")
 def vehicles():
     return FileResponse(FRONTEND / "vehicles.html")
 @app.post("/upload")
-async def upload(file: UploadFile = File(...)):
     video_id = str(uuid.uuid4())[:8]
     path = UPLOAD_DIR / f"{video_id}.mp4"
@@ -91,14 +131,20 @@ async def upload(file: UploadFile = File(...)):
             shutil.copyfileobj(file.file, f)
         file_size = os.path.getsize(path)
         print(f"[BACKEND] Successfully stored: {path} ({file_size} bytes)")
         videos[video_id] = str(path)
         video_info[video_id] = file.filename
         return {"video_id": video_id}
     except Exception as e:
         print(f"[BACKEND] Upload failed: {str(e)}")
-        return Response(content=str(e), status_code=500)
 @app.get("/config/{video_id}")
@@ -142,9 +188,12 @@ def generate_reports(video_id: str):
 @app.get("/reports/{video_id}/{name}")
 def get_report(video_id: str, name: str):
-    path = REPORT_DIR / video_id / name
     if not path.exists():
-        return Response(status_code=404)
     media = "image/png"
     if name.endswith(".pdf"):
         media = "application/pdf"
@@ -164,7 +213,7 @@ def download_all_reports(video_id: str):
     base_path = REPORT_DIR / video_id
     if not base_path.exists():
         print(f"[BACKEND] Error: {base_path} not found")
-        return Response(content=f"Report directory not found for {video_id}", status_code=404)
     try:
         zip_filename = f"bundle_{video_id}.zip"
@@ -174,12 +223,8 @@ def download_all_reports(video_id: str):
             zip_path.unlink()
         print(f"[BACKEND] Creating ZIP: {zip_path}")
-        with zipfile.ZipFile(zip_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
-            for root, _, files in os.walk(base_path):
-                for file in files:
-                    file_path = os.path.join(root, file)
-                    arcname = os.path.relpath(file_path, base_path)
-                    zipf.write(file_path, arcname)
         if not zip_path.exists():
              raise Exception("Zip file was not created")
@@ -196,7 +241,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 Response(content=str(e), status_code=500)
 FEEDBACK_PATH = Path(tempfile.gettempdir()) / "urbanflow_feedback.json"
@@ -269,11 +314,22 @@ def send_feedback_email(api_key, feedback):
             """
         # Header with Rating
         header_rating = f"""
         <div style="text-align: center; margin-bottom: 40px; padding: 20px; background: linear-gradient(180deg, #fff 0%, #fafafa 100%); border-radius: 20px;">
             <h2 style="color: #8b5e3c; margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -1px;">UrbanFlow Intelligence</h2>
             <div style="margin-top: 15px; font-size: 22px; color: #c89a6c; letter-spacing: 4px;">{'★' * rating}{'☆' * (5-rating)}</div>
             <p style="color: #aaa; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; font-weight: 700;">Overall Experience: {rating}/5 Stars</p>
         </div>
         """
@@ -289,45 +345,80 @@ def send_feedback_email(api_key, feedback):
                 {detailed_feedback_html}
             """
-        html_body = f"""
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap" rel="stylesheet">
-        </head>
-        <body style="margin: 0; padding: 0; background-color: #ffffff;">
-            <div style="font-family: 'Montserrat', sans-serif; color: #333; max-width: 600px; margin: 40px auto; padding: 0 20px;">
-                {final_content}
-                <div style="margin-top: 60px; padding-top: 30px; border-top: 1px solid #eee; text-align: center;">
-                    <p style="font-size: 10px; color: #bbb; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin: 0;">Inference Engine Feedback Capture</p>
-                    <p style="font-size: 9px; color: #ddd; margin-top: 5px;">&copy; 2026 UrbanFlow. All rights reserved.</p>
-                </div>
-            </div>
-        </body>
-        </html>
-        """
         resend.Emails.send({
             "from": "UrbanFlow <onboarding@resend.dev>",
             "to": "support.urbanflow365@gmail.com",
-            "subject": f"Feedback: {fb_type} - {rating}/5 Stars",
             "html": html_body
         })
         print(f"[BACKEND] Feedback email successfully transmitted via Resend.")
     except Exception as e:
         print(f"[BACKEND] Resend Error: {str(e)}")
 @app.post("/api/feedback")
 async def submit_feedback(background_tasks: BackgroundTasks, request_data: dict = None):
     from datetime import datetime, timezone
     feedback = request_data or {}
-    entries = []
-    if FEEDBACK_PATH.exists():
-        entries = json.loads(FEEDBACK_PATH.read_text())
     feedback["timestamp"] = datetime.now(timezone.utc).isoformat()
-    entries.append(feedback)
-    FEEDBACK_PATH.write_text(json.dumps(entries, indent=2))
     # Trigger Email via Resend if API key is present
     resend_key = os.getenv("RESEND_API_KEY")
@@ -395,6 +486,7 @@ async def ws_run(ws: WebSocket):
         result["export_json"] = data.get("export_json", False)
         result["export_csv"] = data.get("export_csv", False)
         run_results[video_id] = result
         await ws.send_text(json.dumps({
             "done": True,
             "video_id": video_id,

 import zipfile
 import cv2
+import time
+from fastapi import FastAPI, WebSocket, UploadFile, File, BackgroundTasks, Request
+from fastapi.responses import FileResponse, Response, JSONResponse
 from fastapi.staticfiles import StaticFiles
+from starlette.middleware.base import BaseHTTPMiddleware
 import resend
 from model import load_model
 from config import get_optimal_config
 from engine import run
 from pcu import MODEL_CLASSES
+from auth import verify_google_token, get_or_create_user, set_username, GOOGLE_CLIENT_ID
 from visualize import generate_all
 BUSINESS_MAP = {
 run_results = {}
 model = None
+MAX_MEMORY_ENTRIES = 50
+def evict_old(d):
+    while len(d) > MAX_MEMORY_ENTRIES:
+        d.pop(next(iter(d)))
+UPLOAD_LIMITS = {}
+def is_rate_limited(ip: str):
+    now = time.time()
+    stamps = [t for t in UPLOAD_LIMITS.get(ip, []) if now - t < 60]
+    if len(stamps) >= 5:
+        UPLOAD_LIMITS[ip] = stamps
+        return True
+    stamps.append(now)
+    UPLOAD_LIMITS[ip] = stamps
+    return False
+MAX_UPLOAD_BYTES = 500 * 1024 * 1024
 @asynccontextmanager
 async def lifespan(app: FastAPI):
 app = FastAPI(lifespan=lifespan)
+class SecurityHeaders(BaseHTTPMiddleware):
+    async def dispatch(self, request, call_next):
+        response = await call_next(request)
+        # response.headers["X-Frame-Options"] = "SAMEORIGIN"  # Removed for HF Spaces compatibility
+        response.headers["X-Content-Type-Options"] = "nosniff"
+        response.headers["Referrer-Policy"] = "strict-origin-when-cross-origin"
+        return response
+app.add_middleware(SecurityHeaders)
 @app.get("/")
 def index():
 @app.get("/vehicles.html")
+@app.get("/vehicles")
 def vehicles():
     return FileResponse(FRONTEND / "vehicles.html")
 @app.post("/upload")
+async def upload(request: Request, file: UploadFile = File(...)):
+    client_ip = request.client.host if request.client else "unknown"
+    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/"):
+        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]
     path = UPLOAD_DIR / f"{video_id}.mp4"
             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)")
         videos[video_id] = str(path)
         video_info[video_id] = file.filename
+        evict_old(videos)
+        evict_old(video_info)
         return {"video_id": video_id}
     except Exception as e:
         print(f"[BACKEND] Upload failed: {str(e)}")
+        return JSONResponse({"error": str(e)}, status_code=500)
 @app.get("/config/{video_id}")
 @app.get("/reports/{video_id}/{name}")
 def get_report(video_id: str, name: str):
+    safe_name = Path(name).name
+    path = REPORT_DIR / video_id / safe_name
+    if not path.resolve().is_relative_to(REPORT_DIR.resolve()):
+        return JSONResponse({"error": "Invalid path"}, status_code=400)
     if not path.exists():
+        return JSONResponse({"error": "File not found"}, status_code=404)
     media = "image/png"
     if name.endswith(".pdf"):
         media = "application/pdf"
     base_path = REPORT_DIR / video_id
     if not base_path.exists():
         print(f"[BACKEND] Error: {base_path} not found")
+        return JSONResponse({"error": f"Report directory not found for {video_id}"}, status_code=404)
     try:
         zip_filename = f"bundle_{video_id}.zip"
             zip_path.unlink()
         print(f"[BACKEND] Creating ZIP: {zip_path}")
+        # shutil.make_archive adds the .zip extension, so we strip it from the target path
+        shutil.make_archive(str(REPORT_DIR / f"bundle_{video_id}"), 'zip', str(base_path))
         if not zip_path.exists():
              raise Exception("Zip file was not created")
     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)
 FEEDBACK_PATH = Path(tempfile.gettempdir()) / "urbanflow_feedback.json"
             """
         # Header with Rating
+        user_email = feedback.get('user_email', '')
+        user_email_html = ''
+        if user_email:
+            user_email_html = f"""
+            <div style="margin-top: 14px; padding: 10px 20px; background: #fff; border: 1px solid #eee; border-radius: 10px; display: inline-block;">
+                <span style="font-size: 9px; font-weight: 800; color: #999; text-transform: uppercase; letter-spacing: 1px;">Submitted by</span><br>
+                <a href="mailto:{user_email}" style="color: #8b5e3c; font-size: 13px; font-weight: 700; text-decoration: none;">{user_email}</a>
+            </div>
+            """
         header_rating = f"""
         <div style="text-align: center; margin-bottom: 40px; padding: 20px; background: linear-gradient(180deg, #fff 0%, #fafafa 100%); border-radius: 20px;">
             <h2 style="color: #8b5e3c; margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -1px;">UrbanFlow Intelligence</h2>
             <div style="margin-top: 15px; font-size: 22px; color: #c89a6c; letter-spacing: 4px;">{'★' * rating}{'☆' * (5-rating)}</div>
             <p style="color: #aaa; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; font-weight: 700;">Overall Experience: {rating}/5 Stars</p>
+            {user_email_html}
         </div>
         """
                 {detailed_feedback_html}
             """
+        template_path = BASE / "backend" / "email_template.html"
+        html_template = template_path.read_text(encoding="utf-8") if template_path.exists() else "{final_content}"
+        html_body = html_template.format(final_content=final_content)
         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 ""),
             "html": html_body
         })
         print(f"[BACKEND] Feedback email successfully transmitted via Resend.")
     except Exception as e:
         print(f"[BACKEND] Resend Error: {str(e)}")
+# =========== Auth Endpoints ===========
+@app.get("/api/auth/client-id")
+def auth_client_id():
+    if not GOOGLE_CLIENT_ID:
+        return JSONResponse({"error": "GOOGLE_CLIENT_ID not configured"}, status_code=500)
+    return {"client_id": GOOGLE_CLIENT_ID}
+@app.post("/api/auth/verify")
+async def auth_verify(request_data: dict):
+    credential = request_data.get("credential", "")
+    if not credential:
+        return JSONResponse({"error": "Missing credential"}, status_code=400)
+    try:
+        token_info = verify_google_token(credential)
+    except ValueError as e:
+        return JSONResponse({"error": str(e)}, status_code=401)
+    user = get_or_create_user(token_info["email"], token_info["name"], token_info["picture"])
+    return user
+@app.post("/api/auth/onboard")
+async def auth_onboard(request_data: dict):
+    email = request_data.get("email", "")
+    username = request_data.get("username", "")
+    if not email or not username:
+        return JSONResponse({"error": "Email and username required"}, status_code=400)
+    ok = set_username(email, username)
+    if not ok:
+        return JSONResponse({"error": "User not found"}, status_code=404)
+    return {"status": "ok"}
+@app.post("/api/event")
+async def track_event(request_data: dict):
+    event = request_data.get("event", "UNKNOWN")
+    meta = request_data.get("meta", {})
+    print(f"[ANALYTICS] EVENT: {event} | {meta}")
+    return {"status": "ok"}
+# =========== Feedback ===========
 @app.post("/api/feedback")
 async def submit_feedback(background_tasks: BackgroundTasks, request_data: dict = None):
     from datetime import datetime, timezone
     feedback = request_data or {}
     feedback["timestamp"] = datetime.now(timezone.utc).isoformat()
+    def write_feedback(fb):
+        entries = []
+        if FEEDBACK_PATH.exists():
+            try:
+                entries = json.loads(FEEDBACK_PATH.read_text())
+            except Exception:
+                pass
+        entries.append(fb)
+        FEEDBACK_PATH.write_text(json.dumps(entries, indent=2))
+    background_tasks.add_task(write_feedback, feedback)
     # Trigger Email via Resend if API key is present
     resend_key = os.getenv("RESEND_API_KEY")
         result["export_json"] = data.get("export_json", False)
         result["export_csv"] = data.get("export_csv", False)
         run_results[video_id] = result
+        evict_old(run_results)
         await ws.send_text(json.dumps({
             "done": True,
             "video_id": video_id,

frontend/css/auth.css ADDED Viewed

	@@ -0,0 +1,323 @@

+/* ============================================
+   UrbanFlow — auth.css
+   Styles for auth overlay, onboarding, profile,
+   and logout confirmation. Matches the existing
+   design system (dark theme, #c89a6c accent).
+   ============================================ */
+/* ---- Auth Overlay (fullscreen backdrop) ---- */
+.auth-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.88);
+    z-index: 10000;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+}
+.auth-card {
+    background: #0a0a0a;
+    border: 1px solid #2a2a2a;
+    border-radius: 18px;
+    max-width: 400px;
+    width: 100%;
+    padding: 40px 32px;
+    text-align: center;
+    animation: authFadeIn 0.3s ease;
+}
+@keyframes authFadeIn {
+    from { opacity: 0; transform: translateY(12px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+.auth-card-header {
+    margin-bottom: 28px;
+}
+.auth-title {
+    color: #f0ece6;
+    font-size: 1.4rem;
+    font-weight: 800;
+    font-family: 'Montserrat', sans-serif;
+    margin: 0 0 6px;
+}
+.auth-subtitle {
+    color: #777;
+    font-size: 12px;
+    font-weight: 500;
+    margin: 0;
+    line-height: 1.6;
+}
+.auth-google-btn {
+    display: flex;
+    justify-content: center;
+    margin: 24px 0 16px;
+}
+.auth-error {
+    color: #ef4444;
+    font-size: 11px;
+    font-weight: 600;
+    margin-top: 12px;
+}
+.auth-footer {
+    color: #555;
+    font-size: 10px;
+    margin-top: 20px;
+}
+.auth-link {
+    color: #c89a6c;
+    background: none;
+    border: none;
+    font-weight: 700;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    font-size: inherit;
+    padding: 0;
+}
+.auth-link:hover {
+    color: #f0ece6;
+}
+/* ---- Onboarding Form ---- */
+.auth-avatar {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    margin: 0 auto 16px;
+    border: 2px solid #2a2a2a;
+    display: block;
+}
+.auth-label {
+    display: block;
+    text-align: left;
+    color: #a89f97;
+    font-size: 10px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 8px;
+}
+.auth-input {
+    width: 100%;
+    background: #111;
+    border: 1px solid #2a2a2a;
+    border-radius: 10px;
+    padding: 12px 16px;
+    color: #f0ece6;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    outline: none;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+}
+.auth-input:focus {
+    border-color: #c89a6c;
+}
+.auth-input::placeholder {
+    color: #555;
+    font-weight: 400;
+}
+.auth-onboard-form {
+    text-align: left;
+}
+.auth-submit-btn {
+    width: 100%;
+    margin-top: 18px;
+    padding: 12px 24px;
+    background: #c89a6c;
+    color: #000;
+    border: none;
+    border-radius: 10px;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 13px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: opacity 0.2s, transform 0.1s;
+}
+.auth-submit-btn:hover {
+    opacity: 0.9;
+}
+.auth-submit-btn:active {
+    transform: scale(0.97);
+}
+.auth-submit-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.auth-cancel-btn {
+    padding: 10px 24px;
+    background: transparent;
+    color: #a89f97;
+    border: 1px solid #2a2a2a;
+    border-radius: 10px;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: border-color 0.2s, color 0.2s;
+}
+.auth-cancel-btn:hover {
+    border-color: #555;
+    color: #f0ece6;
+}
+/* ---- Profile Section (Desktop Sidebar) ---- */
+.sidebar-profile {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+    border-bottom: 1px solid #1a1a1a;
+    margin-bottom: 8px;
+}
+.sidebar-profile-pic {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 1.5px solid #2a2a2a;
+    flex-shrink: 0;
+    object-fit: cover;
+}
+.sidebar-profile-info {
+    flex: 1;
+    min-width: 0;
+}
+.sidebar-profile-name {
+    color: #f0ece6;
+    font-size: 12px;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.sidebar-profile-email {
+    color: #666;
+    font-size: 9px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.sidebar-signout-btn {
+    background: none;
+    border: none;
+    color: #555;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 4px;
+    flex-shrink: 0;
+    transition: color 0.2s;
+}
+.sidebar-signout-btn:hover {
+    color: #ef4444;
+}
+/* ---- Profile in Mobile Three-Dot Menu ---- */
+.mobile-profile-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    border-bottom: 1px solid #1a1a1a;
+}
+.mobile-profile-pic {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 1px solid #2a2a2a;
+    flex-shrink: 0;
+    object-fit: cover;
+}
+.mobile-profile-name {
+    color: #f0ece6;
+    font-size: 11px;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+}
+.mobile-signout-btn {
+    width: 100%;
+    text-align: left;
+    padding: 10px 16px;
+    color: #ef4444;
+    font-size: 10px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    background: none;
+    border: none;
+    border-top: 1px solid #1a1a1a;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.mobile-signout-btn:hover {
+    background: #111;
+}
+/* ---- Custom "Continue with Google" Button ---- */
+.gsi-custom-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    background: #1a1a1a;
+    border: 1px solid #333;
+    border-radius: 24px;
+    padding: 12px 28px;
+    color: #f0ece6;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 13px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.2s, border-color 0.2s, transform 0.1s;
+    white-space: nowrap;
+}
+.gsi-custom-btn:hover {
+    background: #222;
+    border-color: #555;
+}
+.gsi-custom-btn:active {
+    transform: scale(0.97);
+}
+/* ---- Utility ---- */
+.hidden { display: none !important; }

frontend/css/initial.css CHANGED Viewed

@@ -29,10 +29,10 @@ body {
     color: var(--t1);
     margin: 0;
     -webkit-tap-highlight-color: transparent;
-    scrollbar-width: none; /* Firefox */
 }
 body::-webkit-scrollbar {
-    display: none; /* Chrome, Safari, Edge */
 }
 /* ---- Fade animation ---- */
@@ -44,20 +44,27 @@ body::-webkit-scrollbar {
     to   { opacity: 1; transform: translateY(0); }
 }
-/* ---- Feature List Animation ---- */
-@keyframes fadeSlideIn {
-    from { opacity: 0; transform: translateX(-8px); }
-    to   { opacity: 1; transform: translateX(0); }
 }
-.hero-text-section ul li {
-    opacity: 0;
-    animation: fadeSlideIn 0.4s ease-out forwards;
 }
-.hero-text-section ul li:nth-child(1) { animation-delay: 0.1s; }
-.hero-text-section ul li:nth-child(2) { animation-delay: 0.2s; }
-.hero-text-section ul li:nth-child(3) { animation-delay: 0.3s; }
-.hero-text-section ul li:nth-child(4) { animation-delay: 0.4s; }
-.hero-text-section ul li:nth-child(5) { animation-delay: 0.5s; }
 /* ---- Card ---- */
 .traffic-dynamics-card {
@@ -93,8 +100,8 @@ body::-webkit-scrollbar {
     pointer-events: none;
 }
 @keyframes borderShimmer {
-    0%   { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
 }
 .traffic-dynamics-card:hover::before {
     animation-duration: 1.2s;
@@ -184,19 +191,23 @@ body::-webkit-scrollbar {
 #upload-bar {
     transition: width 0.3s ease-out;
     position: relative;
 }
 /* Shimmer overlay */
 #upload-bar::after {
     content: '';
     position: absolute;
-    top: 0; right: 0; bottom: 0; left: 0;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-    transform: translateX(-100%);
-    animation: shimmer 1.5s infinite;
 }
 @keyframes shimmer {
-    100% { transform: translateX(100%); }
 }
 /* =============================================
@@ -285,6 +296,7 @@ body::-webkit-scrollbar {
         overflow-x: hidden !important;
     }
     /* ---- Header — compact logo ---- */
     header {
         margin-top: 2rem !important;
@@ -411,19 +423,21 @@ body::-webkit-scrollbar {
         max-height: 40vh; /* Keeps continue button above fold */
     }
-    /* ---- Proceed button — full width ---- */
     #btn-proceed {
-        width: 100% !important;
         padding: 14px !important;
         font-size: 0.9rem !important;
         border-radius: 999px !important;
     }
-    /* ---- Reset / Back buttons ---- */
     button[onclick="resetCanvas()"],
     button[onclick="showStep('modules')"] {
         font-size: 11px !important;
-        padding: 10px 0 !important;
         min-height: 40px;
     }
@@ -446,6 +460,8 @@ body::-webkit-scrollbar {
 }
 /* =============================================
    TOUCH: remove drag-related cursor on mobile
    ============================================= */
@@ -473,4 +489,4 @@ body::-webkit-scrollbar {
     #drawing-canvas {
         cursor: crosshair;
     }
-}

     color: var(--t1);
     margin: 0;
     -webkit-tap-highlight-color: transparent;
+    scrollbar-width: none;
 }
 body::-webkit-scrollbar {
+    display: none;
 }
 /* ---- Fade animation ---- */
     to   { opacity: 1; transform: translateY(0); }
 }
+/* ---- Hero Description Block ---- */
+.hero-desc {
+    max-width: 520px;
+}
+.hero-desc-lead {
+    font-size: clamp(1rem, 1.8vw, 1.15rem);
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    line-height: 1.4;
 }
+.hero-desc-body {
+    font-size: clamp(0.82rem, 1.3vw, 0.95rem);
+    font-weight: 500;
+    line-height: 1.8;
+    letter-spacing: 0.01em;
+}
+@media (max-width: 640px) {
+    .hero-desc { max-width: 100%; }
+    .hero-desc-lead { font-size: 1rem; }
+    .hero-desc-body { font-size: 0.85rem; line-height: 1.75; }
 }
 /* ---- Card ---- */
 .traffic-dynamics-card {
     pointer-events: none;
 }
 @keyframes borderShimmer {
+    0%   { background-position: 0% 50%; }
+    100% { background-position: 200% 50%; }
 }
 .traffic-dynamics-card:hover::before {
     animation-duration: 1.2s;
 #upload-bar {
     transition: width 0.3s ease-out;
     position: relative;
+    overflow: hidden;
 }
 /* Shimmer overlay */
 #upload-bar::after {
     content: '';
     position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -60%;
+    width: 60%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
+    animation: shimmer 1.4s ease-in-out infinite;
 }
 @keyframes shimmer {
+    0%   { left: -60%; }
+    100% { left: 160%; }
 }
 /* =============================================
         overflow-x: hidden !important;
     }
     /* ---- Header — compact logo ---- */
     header {
         margin-top: 2rem !important;
         max-height: 40vh; /* Keeps continue button above fold */
     }
+    /* ---- Proceed button — narrowed further ---- */
     #btn-proceed {
+        width: 60% !important;
+        max-width: 220px;
         padding: 14px !important;
         font-size: 0.9rem !important;
         border-radius: 999px !important;
     }
+    /* ---- Reset / Back buttons — fixed padding for rounded style ---- */
     button[onclick="resetCanvas()"],
     button[onclick="showStep('modules')"] {
         font-size: 11px !important;
+        padding: 10px 24px !important;
+        width: auto !important;
         min-height: 40px;
     }
 }
 /* =============================================
    TOUCH: remove drag-related cursor on mobile
    ============================================= */
     #drawing-canvas {
         cursor: crosshair;
     }
+}

frontend/css/shared.css ADDED Viewed

	@@ -0,0 +1,281 @@

+/* =============================================
+   UrbanFlow — shared.css
+   Reusable component classes shared across all pages.
+   Single source of truth for the design system.
+   ============================================= */
+/* ---- 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; }
+/* ---- Modal Overlay ---- */
+.modal-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.85);
+    z-index: 10001;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+}
+/* ---- Modal Card ---- */
+.modal-card {
+    background: #0a0a0a;
+    border: 1px solid #2a2a2a;
+    border-radius: 14px;
+    max-width: 480px;
+    width: 100%;
+    padding: 32px;
+    position: relative;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+.modal-card-sm {
+    max-width: 380px;
+    padding: 28px;
+    max-height: none;
+    overflow-y: visible;
+}
+.modal-close-btn {
+    position: absolute;
+    top: 16px;
+    right: 18px;
+    background: none;
+    border: none;
+    color: #a89f97;
+    font-size: 18px;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+.modal-close-btn:hover {
+    color: #f0ece6;
+}
+.modal-title {
+    color: #f0ece6;
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin-bottom: 8px;
+}
+.modal-subtitle {
+    color: #a89f97;
+    font-size: 11px;
+    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;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 0;
+    border-bottom: 1px solid #1a1a1a;
+}
+.shortcut-row:last-child {
+    border-bottom: none;
+}
+.shortcut-label {
+    color: #a89f97;
+    font-size: 11px;
+    font-weight: 500;
+}
+.kbd-key {
+    background: #1a1a1a;
+    color: #c89a6c;
+    font-size: 11px;
+    font-weight: 700;
+    padding: 3px 10px;
+    border-radius: 6px;
+    border: 1px solid #2a2a2a;
+    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 CHANGED Viewed

@@ -1,1410 +1,1525 @@
-/* =============================================
-   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;
-    }
-    /* Post-process cards */
-    #post-process-cards {
-        grid-template-columns: repeat(2, 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;
-    }
-}

+/* =============================================
+   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;
+}

frontend/initial.html CHANGED Viewed

@@ -23,11 +23,14 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/initial.css">
 </head>
 <body class="bg-black text-white min-h-screen w-full flex flex-col items-center selection:bg-white selection:text-black overflow-x-hidden">
     <header class="mt-16 flex flex-col items-center flex-shrink-0 w-full z-10">
         <img src="assets/uf_rf.png" alt="UrbanFlow Logo" class="h-44 md:h-52 w-auto object-contain mb-3">
     </header>
@@ -44,22 +47,21 @@
             </h1>
             <p class="font-bold mb-8 text-sm uppercase tracking-[0.2em] flex items-center justify-center sm:justify-start" style="color:#a89f97">
                 <span class="core-badge px-3 py-1 rounded-full text-[10px] mr-3">Beta</span>
-                MVP for traffic intelligence
             </p>
-            <ul class="space-y-4 xl:space-y-5 text-base xl:text-lg font-medium" style="color:#a89f97">
-                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Works with CCTV, webcam or mobile recorded clips</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Your Data is secure &amp; private</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Built for Indian Roads, conditions &amp; traffic patterns</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> No Hardware Installation; rapid &amp; scalable analysis.</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Tested on real field conditions</li>
-            </ul>
             <div class="mt-10 flex justify-center sm:justify-start">
-                <button onclick="openOnboarding()" class="pr-6 pl-2 py-2 rounded-full transition-all active:scale-95 flex items-center gap-4 hover:border-[#c89a6c] shadow-lg group cursor-pointer" style="background:#050505; border: 1px solid #1a1a1a">
-                    <div class="w-8 h-8 rounded-full flex items-center justify-center transition-transform group-hover:scale-110" style="background:#c89a6c; color:#000">
-                        <i class="fa-solid fa-play text-[10px] ml-0.5"></i>
-                    </div>
-                    <span class="uppercase tracking-widest text-[11px] font-bold" style="color:#c89a6c">Experience Guided Tour</span>
                 </button>
             </div>
         </div>
@@ -71,7 +73,7 @@
                 <h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">UrbanFlow</h2>
                 <p class="text-[13px] font-medium mb-8 text-center" style="color:#a89f97">Proceed to analysis</p>
                 <div class="flex justify-center w-full">
-                    <div onclick="showStep('upload')"
                         class="group relative border-2 rounded-[2rem] p-8 cursor-pointer hover:-translate-y-1 transition-all duration-300 text-center max-w-sm w-full traffic-dynamics-card">
                         <div class="absolute top-4 right-6 text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider"
                             style="background:#c89a6c;color:#000">BETA</div>
@@ -121,15 +123,19 @@
                     </div>
                     <canvas id="drawing-canvas" class="absolute inset-0 w-full h-full"></canvas>
                 </div>
                 <div class="flex flex-col items-center gap-3">
                     <button id="btn-proceed" onclick="startRun()"
                         class="w-fit px-16 py-3.5 rounded-full font-bold transition-all text-center text-sm shadow-lg hover:scale-105 active:scale-95"
-                        style="background:#c89a6c;color:#000">
                         Continue &nbsp;&rarr;
                     </button>
                     <button onclick="resetCanvas()"
-                        class="text-[10px] font-bold uppercase tracking-widest text-slate-500 hover:text-white transition px-4 py-2 mt-2"
-                        style="background:none;border:none;">Reset </button>
                 </div>
             </div>
@@ -138,103 +144,44 @@
     <footer class="w-full max-w-[90rem] mx-auto px-10 mt-auto z-10 text-[11px] font-bold uppercase tracking-[0.2em]" style="color:#777">
-        <!-- Desktop: Privacy Policy left | T&C center | © right — single row -->
-        <div class="hidden md:grid md:grid-cols-3 items-center py-6">
-            <div class="text-left">
-                <button onclick="openAppModal('privacyModal')" class="hover:text-white transition">Privacy Policy</button>
-            </div>
-            <div class="text-center">
-                <button onclick="openAppModal('termsModal')" class="hover:text-white transition">Terms &amp; Conditions</button>
-            </div>
-            <div class="text-right">
-                &copy; 2026 UrbanFlow. All rights reserved.
-            </div>
-        </div>
-        <!-- Mobile: Privacy Policy left | T&C right, then © centered below -->
-        <div class="md:hidden py-4">
-            <div class="flex items-center justify-between mb-2">
-                <button onclick="openAppModal('privacyModal')" class="hover:text-white transition">Privacy Policy</button>
-                <button onclick="openAppModal('termsModal')" class="hover:text-white transition">Terms &amp; Conditions</button>
-            </div>
-            <div class="text-center">
-                &copy; 2026 UrbanFlow. All rights reserved.
             </div>
         </div>
     </footer>
     <script src="js/initial.js"></script>
     <script>
-        function openAppModal(id) {
-            const el = document.getElementById('appModal-' + id);
-            if (el) { el.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
-        }
-        function closeAppModal(id) {
-            const el = document.getElementById('appModal-' + id);
-            if (el) { el.style.display = 'none'; document.body.style.overflow = ''; }
         }
-        document.addEventListener('keydown', function (e) {
-            if (e.key === 'Escape') { closeAppModal('privacyModal'); closeAppModal('termsModal'); }
         });
     </script>
-    <!-- Privacy Modal -->
-    <div id="appModal-privacyModal" onclick="if(event.target===this)closeAppModal('privacyModal')"
-        style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">
-        <div
-            style="background:#0a0a0a;border:1px solid #2a2a2a;border-radius:14px;max-width:480px;width:100%;padding:32px;position:relative;max-height:80vh;overflow-y:auto">
-            <button onclick="closeAppModal('privacyModal')"
-                style="position:absolute;top:16px;right:18px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">&times;</button>
-            <h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Privacy Policy</h2>
-            <p style="color:#a89f97;font-size:11px;margin-bottom:20px">We keep this simple and honest.</p>
-            <ul style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;text-align:left">
-                <li>This is a <strong style="color:#f0ece6">public demo</strong> hosted on Hugging Face Spaces. It is not yet a complete production service.</li>
-                <li>UrbanFlow provides an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results may vary across runs due to the nature of real-time frame-by-frame inference.</li>
-                <li>Footage you submit is processed with minimal delay and <strong style="color:#f0ece6">discarded immediately</strong> after the session ends. Nothing is stored on our servers.</li>
-                <li>We do not use your footage to train models, sell it, or share it with any third party.</li>
-                <li>Reports and annotated videos are generated temporarily and delivered to your device. We do not retain copies.</li>
-                <li>We do not use advertising cookies, behavioral tracking, or analytics scripts on this platform.</li>
-                <li>Your use of this demo may inform product requirements. No personally identifiable data is collected in that process.</li>
-                <li>For any queries: <strong style="color:#c89a6c">support.urbanflow365@gmail.com</strong></li>
-            </ul>
-            <p style="color:#555;font-size:10px;margin-top:20px;text-align:left">&mdash; Team UrbanFlow</p>
-        </div>
-    </div>
-    <!-- Terms Modal -->
-    <div id="appModal-termsModal" onclick="if(event.target===this)closeAppModal('termsModal')"
-        style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">
-        <div
-            style="background:#0a0a0a;border:1px solid #2a2a2a;border-radius:14px;max-width:480px;width:100%;padding:32px;position:relative;max-height:80vh;overflow-y:auto">
-            <button onclick="closeAppModal('termsModal')"
-                style="position:absolute;top:16px;right:18px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">&times;</button>
-            <h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Terms &amp; Conditions</h2>
-            <p style="color:#a89f97;font-size:11px;margin-bottom:20px">By using this application, you agree to the
-                following terms.</p>
-            <p style="color:#c89a6c;font-size:11px;font-weight:700;margin-bottom:6px;text-align:left">You can:</p>
-            <ul
-                style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;margin-bottom:16px;text-align:left">
-                <li>Use this application to evaluate UrbanFlow&rsquo;s traffic detection and analytics capabilities.</li>
-                <li>Export reports, annotated video outputs, and data artifacts to your own device.</li>
-                <li>Share feedback, feature requests, or questions with us at <strong style="color:#c89a6c">support.urbanflow365@gmail.com</strong>.</li>
-                <li>Reference this application in research or internal evaluation, with proper attribution.</li>
-            </ul>
-            <p style="color:#c89a6c;font-size:11px;font-weight:700;margin-bottom:6px;text-align:left">You cannot:</p>
-            <ul
-                style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;margin-bottom:16px;text-align:left">
-                <li>Commercially redistribute outputs or present them as your own product&rsquo;s capability.</li>
-                <li>Reverse-engineer, extract, or attempt to replicate the underlying model or processing pipeline.</li>
-                <li>Use the application for unlawful, harmful, or safety-critical operational purposes.</li>
-                <li>Misrepresent outputs as certified or regulatory-grade traffic data.</li>
-            </ul>
-            <p style="color:#a89f97;font-size:11px;text-align:left">This application is provided as-is for <strong style="color:#f0ece6">demonstration and evaluation purposes only</strong>.
-                UrbanFlow provides an estimated accuracy of ±5–8% on dense mixed-traffic footage. For research use, we recommend processing the same video 2–3 times and taking the average count.</p>
-            <p style="color:#a89f97;font-size:11px;text-align:left">Outputs are not intended for operational, regulatory, or safety-critical use. This is an early-stage research project, not a commercial product.</p>
-            <p style="color:#555;font-size:10px;margin-top:16px;text-align:left">For any queries: <strong
-                    style="color:#c89a6c">support.urbanflow365@gmail.com</strong></p>
-        </div>
-    </div>
     <!-- Onboarding Walkthrough -->
     <div id="onboard-overlay" class="onboard-overlay" style="display:none">
@@ -270,12 +217,5 @@
         </div>
     </div>
-    <script>
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', () => {
-                navigator.serviceWorker.register('./sw.js');
-            });
-        }
-    </script>
 </body>
 </html>

     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/shared.css">
     <link rel="stylesheet" href="css/initial.css">
+    <link rel="stylesheet" href="css/auth.css">
 </head>
 <body class="bg-black text-white min-h-screen w-full flex flex-col items-center selection:bg-white selection:text-black overflow-x-hidden">
     <header class="mt-16 flex flex-col items-center flex-shrink-0 w-full z-10">
         <img src="assets/uf_rf.png" alt="UrbanFlow Logo" class="h-44 md:h-52 w-auto object-contain mb-3">
     </header>
             </h1>
             <p class="font-bold mb-8 text-sm uppercase tracking-[0.2em] flex items-center justify-center sm:justify-start" style="color:#a89f97">
                 <span class="core-badge px-3 py-1 rounded-full text-[10px] mr-3">Beta</span>
+                Field Intelligence Platform
             </p>
+            <div class="hero-desc mb-10 text-center sm:text-left" style="color:#a89f97">
+                <p class="hero-desc-lead mb-4 font-semibold text-white">
+                    Transform video feeds into actionable intelligence.
+                </p>
+                <p class="hero-desc-body">
+                    UrbanFlow converts raw footage from any CCTV, dashcam, or drone into high-precision structured data—delivering instant vehicle counts, classifications, and flow analytics without requiring any hardware installation. Simply upload a clip, define your spatial boundaries, and receive enterprise-grade analytical reports in minutes.
+                </p>
+            </div>
             <div class="mt-10 flex justify-center sm:justify-start">
+                <button onclick="openOnboarding()" class="transition-all active:scale-95 hover:text-[#c89a6c] group cursor-pointer font-bold text-white text-base tracking-[0.15em] uppercase" style="font-family: 'Montserrat', sans-serif;">
+                    HOW TO USE?
                 </button>
             </div>
         </div>
                 <h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">UrbanFlow</h2>
                 <p class="text-[13px] font-medium mb-8 text-center" style="color:#a89f97">Proceed to analysis</p>
                 <div class="flex justify-center w-full">
+                    <div onclick="handleTrafficDynamicsClick()"
                         class="group relative border-2 rounded-[2rem] p-8 cursor-pointer hover:-translate-y-1 transition-all duration-300 text-center max-w-sm w-full traffic-dynamics-card">
                         <div class="absolute top-4 right-6 text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider"
                             style="background:#c89a6c;color:#000">BETA</div>
                     </div>
                     <canvas id="drawing-canvas" class="absolute inset-0 w-full h-full"></canvas>
                 </div>
+                <p class="text-[11px] text-center mb-6" style="color:#a89f97">
+                    <em>Draw across the lane of travel, not along it.</em>
+                    <!-- TODO: Add 3 correct angle visual graphics later -->
+                </p>
                 <div class="flex flex-col items-center gap-3">
                     <button id="btn-proceed" onclick="startRun()"
                         class="w-fit px-16 py-3.5 rounded-full font-bold transition-all text-center text-sm shadow-lg hover:scale-105 active:scale-95"
+                        style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)">
                         Continue &nbsp;&rarr;
                     </button>
                     <button onclick="resetCanvas()"
+                        class="text-[11px] font-bold uppercase tracking-widest text-slate-300 hover:text-white transition px-4 py-2 mt-2 bg-neutral-900 rounded-full border border-neutral-700"
+                        style="border-color:#333;">Reset </button>
                 </div>
             </div>
     <footer class="w-full max-w-[90rem] mx-auto px-10 mt-auto z-10 text-[11px] font-bold uppercase tracking-[0.2em]" style="color:#777">
+        <div class="py-6 w-full">
+            <!-- Mobile: two links side-by-side, copyright below centered -->
+            <!-- Desktop: three columns left / center / right -->
+            <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-2 md:gap-0">
+                <div class="flex justify-between md:block md:flex-none md:w-auto">
+                    <button onclick="openAppModal('privacyModal')" class="hover:text-white transition md:mr-6">Privacy Policy</button>
+                    <button onclick="openAppModal('termsModal')" class="hover:text-white transition">Terms &amp; Conditions</button>
+                </div>
+                <div class="text-center md:text-right">
+                    &copy; 2026 UrbanFlow. All rights reserved.
+                </div>
             </div>
         </div>
     </footer>
+    <script src="js/templates.js"></script>
+    <script src="js/shared.js"></script>
+    <script src="js/auth.js"></script>
     <script src="js/initial.js"></script>
     <script>
+        // Auth-gated entry into Traffic Dynamics
+        function handleTrafficDynamicsClick() {
+            if (isAuthenticated()) {
+                showStep('upload');
+            } else {
+                promptGoogleSignIn(function() {
+                    showStep('upload');
+                });
+            }
         }
+        document.addEventListener('DOMContentLoaded', function() {
+            injectLegalModals();
         });
     </script>
     <!-- Onboarding Walkthrough -->
     <div id="onboard-overlay" class="onboard-overlay" style="display:none">
         </div>
     </div>
 </body>
 </html>

frontend/js/auth.js ADDED Viewed

	@@ -0,0 +1,375 @@

+/**
+ * UrbanFlow — auth.js
+ * Client-side Google Identity Services integration.
+ *
+ * Session is persisted in localStorage so it survives page reloads
+ * and HF Space container restarts. The backend verifies the JWT on
+ * every sign-in and returns the canonical user record.
+ */
+const UF_AUTH_KEYS = {
+    email:    'uf_user_email',
+    name:     'uf_user_name',
+    picture:  'uf_user_picture',
+    username: 'uf_user_username',
+};
+// ---- Session helpers ----
+function getAuthSession() {
+    const email = localStorage.getItem(UF_AUTH_KEYS.email);
+    if (!email) return null;
+    return {
+        email:    email,
+        name:     localStorage.getItem(UF_AUTH_KEYS.name) || '',
+        picture:  localStorage.getItem(UF_AUTH_KEYS.picture) || '',
+        username: localStorage.getItem(UF_AUTH_KEYS.username) || '',
+    };
+}
+function isAuthenticated() {
+    return !!localStorage.getItem(UF_AUTH_KEYS.email);
+}
+function saveAuthSession(user) {
+    localStorage.setItem(UF_AUTH_KEYS.email,    user.email    || '');
+    localStorage.setItem(UF_AUTH_KEYS.name,     user.name     || '');
+    localStorage.setItem(UF_AUTH_KEYS.picture,  user.picture  || '');
+    localStorage.setItem(UF_AUTH_KEYS.username, user.username || '');
+}
+function clearAuthSession() {
+    Object.values(UF_AUTH_KEYS).forEach(k => localStorage.removeItem(k));
+}
+// ---- Google Identity Services ----
+let _gsiInitialized = false;
+/**
+ * Load GIS script and initialize. Returns a Promise that resolves
+ * once `google.accounts.id` is ready.
+ */
+function initGoogleAuth() {
+    return new Promise((resolve, reject) => {
+        if (_gsiInitialized) { resolve(); return; }
+        fetch('api/auth/client-id')
+            .then(r => r.json())
+            .then(data => {
+                if (data.error) { reject(data.error); return; }
+                const script = document.createElement('script');
+                script.src = 'https://accounts.google.com/gsi/client';
+                script.async = true;
+                script.defer = true;
+                script.onload = () => {
+                    google.accounts.id.initialize({
+                        client_id: data.client_id,
+                        callback: _handleCredentialResponse,
+                        auto_select: false,
+                        cancel_on_tap_outside: false,
+                    });
+                    _gsiInitialized = true;
+                    resolve();
+                };
+                script.onerror = () => reject('Failed to load Google Identity Services');
+                document.head.appendChild(script);
+            })
+            .catch(reject);
+    });
+}
+/**
+ * Click the hidden real Google button — this is the only reliable way
+ * to open the account chooser popup from a user gesture.
+ */
+function _triggerGoogleSignInPopup() {
+    const realBtn = document.querySelector('#gsi-hidden-btn [role="button"]');
+    if (realBtn) {
+        realBtn.click();
+    } else {
+        // Fallback: re-render and click once rendered
+        _renderHiddenGoogleBtn(function() {
+            const btn = document.querySelector('#gsi-hidden-btn [role="button"]');
+            if (btn) btn.click();
+        });
+    }
+}
+/**
+ * Render Google's real button into a hidden offscreen container,
+ * then call `cb` once the iframe/button is ready.
+ */
+function _renderHiddenGoogleBtn(cb) {
+    let container = document.getElementById('gsi-hidden-btn');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'gsi-hidden-btn';
+        container.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0;pointer-events:none;';
+        document.body.appendChild(container);
+    }
+    container.innerHTML = '';
+    google.accounts.id.renderButton(container, {
+        type: 'standard',
+        theme: 'filled_black',
+        size: 'large',
+        text: 'signin_with',
+        shape: 'pill',
+        width: 240,
+    });
+    // Give the iframe a tick to mount
+    setTimeout(function() {
+        container.style.pointerEvents = 'auto';
+        if (cb) cb();
+    }, 100);
+}
+// Internal: will be overridden by the page that triggers sign-in
+let _onAuthSuccess = null;
+function _handleCredentialResponse(response) {
+    fetch('api/auth/verify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ credential: response.credential }),
+    })
+        .then(r => {
+            if (!r.ok) throw new Error('Verification failed');
+            return r.json();
+        })
+        .then(user => {
+            saveAuthSession(user);
+            const handleSuccess = (u) => {
+                _hideAuthOverlay();
+                if (_onAuthSuccess) _onAuthSuccess(u);
+                else {
+                    if (typeof populateProfileUI === 'function') populateProfileUI();
+                }
+            };
+            if (user.new_user) {
+                _showOnboardingForm(user, function(u) {
+                    // After onboarding, check consent
+                    _checkConsentThenProceed(u, handleSuccess);
+                });
+            } else {
+                // Existing user — check consent
+                _checkConsentThenProceed(user, handleSuccess);
+            }
+        })
+        .catch(err => {
+            console.error('[AUTH]', err);
+            const overlay = document.getElementById('auth-overlay');
+            const errEl = overlay ? overlay.querySelector('.auth-error') : null;
+            if (errEl) {
+                errEl.textContent = 'Sign-in failed. Please try again.';
+                errEl.classList.remove('hidden');
+            }
+        });
+}
+/**
+ * Show the auth overlay, render the custom button that delegates
+ * to the real Google button click for a reliable account chooser.
+ */
+function promptGoogleSignIn(onSuccess) {
+    _onAuthSuccess = (user) => {
+        if (user.new_user) {
+            _showOnboardingForm(user, onSuccess);
+        } else {
+            _hideAuthOverlay();
+            onSuccess(user);
+        }
+    };
+    _showAuthOverlay();
+    initGoogleAuth().then(() => {
+        const btnContainer = document.getElementById('auth-google-btn');
+        if (!btnContainer) return;
+        // Render the hidden real Google button first so it's ready
+        _renderHiddenGoogleBtn(null);
+        // Show our styled button that delegates to it
+        btnContainer.innerHTML = TEMPLATES.authGoogleBtn;
+    });
+}
+// ---- Auth Overlay (injected into DOM) ----
+function _showAuthOverlay() {
+    let overlay = document.getElementById('auth-overlay');
+    if (!overlay) {
+        overlay = document.createElement('div');
+        overlay.id = 'auth-overlay';
+        overlay.className = 'auth-overlay';
+        overlay.innerHTML = TEMPLATES.authOverlay;
+        document.body.appendChild(overlay);
+        overlay.addEventListener('click', function(e) {
+            if (e.target === overlay) _hideAuthOverlay();
+        });
+    }
+    overlay.style.display = 'flex';
+    document.body.style.overflow = 'hidden';
+}
+function _hideAuthOverlay() {
+    const overlay = document.getElementById('auth-overlay');
+    if (overlay) {
+        overlay.style.display = 'none';
+        document.body.style.overflow = '';
+    }
+}
+// ---- Onboarding Form (username) ----
+function _showOnboardingForm(user, onSuccess) {
+    const overlay = document.getElementById('auth-overlay');
+    if (!overlay) return;
+    const card = overlay.querySelector('.auth-card');
+    card.innerHTML = getOnboardFormTemplate(user);
+    overlay._onboardUser = user;
+    overlay._onboardCallback = onSuccess;
+}
+function _submitOnboarding() {
+    const overlay = document.getElementById('auth-overlay');
+    const input = document.getElementById('auth-username-input');
+    const errEl = document.getElementById('auth-onboard-error');
+    const username = (input ? input.value : '').trim();
+    if (!username || username.length < 2) {
+        if (errEl) { errEl.textContent = 'Please enter at least 2 characters.'; errEl.classList.remove('hidden'); }
+        return;
+    }
+    const user = overlay._onboardUser;
+    const btn = document.getElementById('auth-onboard-submit');
+    if (btn) { btn.disabled = true; btn.textContent = 'Saving...'; }
+    fetch('api/auth/onboard', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: user.email, username: username }),
+    })
+        .then(r => {
+            if (!r.ok) throw new Error('Onboarding failed');
+            return r.json();
+        })
+        .then(() => {
+            user.username = username;
+            saveAuthSession(user);
+            _hideAuthOverlay();
+            if (overlay._onboardCallback) overlay._onboardCallback(user);
+        })
+        .catch(() => {
+            if (errEl) { errEl.textContent = 'Something went wrong. Please try again.'; errEl.classList.remove('hidden'); }
+            if (btn) { btn.disabled = false; btn.textContent = 'Continue'; }
+        });
+}
+// ---- Logout ----
+function showLogoutConfirm() {
+    let modal = document.getElementById('logout-confirm-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'logout-confirm-modal';
+        modal.className = 'auth-overlay';
+        modal.onclick = (e) => { if (e.target === modal) hideLogoutConfirm(); };
+        modal.innerHTML = TEMPLATES.logoutModal;
+        document.body.appendChild(modal);
+    }
+    modal.style.display = 'flex';
+    document.body.style.overflow = 'hidden';
+}
+function hideLogoutConfirm() {
+    const modal = document.getElementById('logout-confirm-modal');
+    if (modal) { modal.style.display = 'none'; document.body.style.overflow = ''; }
+}
+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('/');
+    }
+}
+// ---- Consent Modal ----
+let _consentCallback = null;
+let _consentUser = null;
+function _checkConsentThenProceed(user, callback) {
+    if (localStorage.getItem('uf_terms_accepted')) {
+        callback(user);
+        return;
+    }
+    // Show consent modal
+    _consentCallback = callback;
+    _consentUser = user;
+    _showConsentModal();
+}
+function _showConsentModal() {
+    let overlay = document.getElementById('consent-overlay');
+    if (!overlay) {
+        overlay = document.createElement('div');
+        overlay.id = 'consent-overlay';
+        overlay.className = 'auth-overlay';
+        overlay.innerHTML = TEMPLATES.consentModal;
+        document.body.appendChild(overlay);
+        // No click-to-close — user must agree
+    }
+    overlay.style.display = 'flex';
+    document.body.style.overflow = 'hidden';
+}
+function onConsentCheckboxChange() {
+    const cb = document.getElementById('consent-checkbox');
+    const btn = document.getElementById('consent-accept-btn');
+    const label = document.getElementById('consent-label');
+    if (!cb || !btn) return;
+    if (cb.checked) {
+        btn.disabled = false;
+        btn.style.background = '#0a0a0a';
+        btn.style.border = '1px solid var(--cocoa)';
+        btn.style.color = 'var(--cocoa-l)';
+        btn.style.cursor = 'pointer';
+        if (label) label.style.borderColor = 'var(--cocoa)';
+    } else {
+        btn.disabled = true;
+        btn.style.background = '#1a1a1a';
+        btn.style.border = '1px solid #222';
+        btn.style.color = '#555';
+        btn.style.cursor = 'not-allowed';
+        if (label) label.style.borderColor = '#222';
+    }
+}
+function acceptConsent() {
+    localStorage.setItem('uf_terms_accepted', 'true');
+    const overlay = document.getElementById('consent-overlay');
+    if (overlay) {
+        overlay.style.display = 'none';
+        document.body.style.overflow = '';
+    }
+    if (_consentCallback && _consentUser) {
+        _consentCallback(_consentUser);
+    }
+    _consentCallback = null;
+    _consentUser = null;
+}

frontend/js/initial.js CHANGED Viewed

@@ -71,7 +71,7 @@ function uploadFile(file) {
     // Estimate upload duration: ~1 MB/s conservative, capped between 3s and 60s
     const fileMB       = file.size / (1024 * 1024);
     const estDurationMs = Math.min(Math.max(fileMB * 1000, 3000), 60000);
-    const targetPct    = 100;           // stop simulation at 100%, snap to 100% on load
     const tickMs       = 200;          // update every 200ms
     const totalTicks   = estDurationMs / tickMs;
     const stepPerTick  = targetPct / totalTicks;
@@ -87,6 +87,12 @@ function uploadFile(file) {
     const form = new FormData();
     form.append('file', file);
     const xhr = new XMLHttpRequest();
     currentXHR = xhr;
@@ -122,9 +128,9 @@ function uploadFile(file) {
             return;
         }
-        // Snap to 100% on successful upload response
-        bar.style.width = '100%';
-        pct.innerText   = '100%';
         const res = JSON.parse(xhr.responseText);
         videoId = res.video_id;
@@ -133,10 +139,19 @@ function uploadFile(file) {
         fetch('config/' + videoId)
             .then(r => r.json())
             .then(cfg => {
                 runConfig      = cfg;
                 runConfig.conf = 0.12;
                 runConfig.iou  = 0.60;
                 txt.innerText  = 'Initialization Complete';
                 if (fileInput) fileInput.value = '';
                 setTimeout(() => showStep('draw'), 800);
             })
@@ -278,9 +293,20 @@ function startRun() {
         config:   runConfig
     }));
     sessionStorage.setItem('uf_active_tab', 'settings');
-    // Navigate directly to vehicles.html — avoids the initial.html bootstrap entirely,
-    // which eliminates the white-flash / freeze glitch on the settings transition.
-    window.location.href = 'vehicles.html';
 }
 // =============================================

     // Estimate upload duration: ~1 MB/s conservative, capped between 3s and 60s
     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 form = new FormData();
     form.append('file', file);
+    fetch('/api/event', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ event: 'UPLOAD_STARTED', meta: { size: fileMB.toFixed(2) } })
+    }).catch(()=>{});
     const xhr = new XMLHttpRequest();
     currentXHR = xhr;
             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;
         fetch('config/' + videoId)
             .then(r => r.json())
             .then(cfg => {
+                bar.style.width = '100%';
+                pct.innerText   = '100%';
                 runConfig      = cfg;
                 runConfig.conf = 0.12;
                 runConfig.iou  = 0.60;
                 txt.innerText  = 'Initialization Complete';
+                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);
             })
         config:   runConfig
     }));
     sessionStorage.setItem('uf_active_tab', 'settings');
+    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');
+    }
 }
 // =============================================

frontend/js/shared.js ADDED Viewed

	@@ -0,0 +1,266 @@

+/**
+ * UrbanFlow — shared.js
+ * Shared utilities, modal management, and legal content injection.
+ * Loaded on every page before page-specific scripts.
+ */
+// =============================================
+// Modal Management
+// =============================================
+function openAppModal(id) {
+    const el = document.getElementById('appModal-' + id);
+    if (el) { el.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
+}
+function closeAppModal(id) {
+    const el = document.getElementById('appModal-' + id);
+    if (el) { el.style.display = 'none'; document.body.style.overflow = ''; }
+}
+// =============================================
+// Legal Modals — Single Source of Truth
+// =============================================
+const LEGAL_CONTENT = {
+    privacy: {
+        title: 'Privacy Policy',
+        subtitle: 'Last Updated: 28th April 2026',
+        content: `
+<p><strong>1. WHO WE ARE</strong><br>
+UrbanFlow is a computer vision software that analyses traffic video footage to produce structured traffic data. It is hosted on Hugging Face Spaces as a demonstration and research product by Perception365.<br>
+Contact: <strong style="color:#f0c674">support.urbanflow365@gmail.com</strong></p>
+<p><strong>2. WHAT DATA WE COLLECT</strong><br>
+<strong>a) Account Data:</strong> When you sign in with Google, we receive your name, email address, and profile picture. We store only what is necessary to identify your session.<br>
+<strong>b) Uploaded Video Footage:</strong> Videos you upload are processed temporarily for inference only. We do not store your original footage. All uploaded files are deleted automatically once processing is complete and session cache is cleared each run.<br>
+<strong>c) Analysis Outputs:</strong> Processed results are tied to your active session only. We do not sell or share this data with anyone.<br>
+<strong>d) Usage Logs:</strong> We collect standard server logs (IP address, browser type, timestamps) for security monitoring and platform improvement only.</p>
+<p><strong>3. HOW WE USE YOUR DATA</strong><br>
+We use your data solely to:<br>
+- Authenticate your identity and maintain your session<br>
+- Process uploaded footage and return results to you<br>
+- Detect and prevent misuse of the platform<br>
+- Comply with legal obligations<br>
+We do not use your data for advertising. We do not sell your data to any third party under any circumstances.</p>
+<p><strong>4. DATA SHARING</strong><br>
+We do not share your personal data with third parties except:<br>
+- Google — for authentication (governed by Google's Privacy Policy)<br>
+- Hugging Face — infrastructure hosting (see huggingface.co/privacy)<br>
+- Legal authorities — only if required by law<br>
+We have no control over Hugging Face's infrastructure-level data handling.</p>
+<p><strong>5. DATA SECURITY</strong><br>
+We apply reasonable technical measures to protect data in transit and at rest. However, no system is perfectly secure. We operate on shared cloud infrastructure and cannot guarantee absolute security. By using UrbanFlow, you acknowledge and accept this risk.<br>
+You should not upload footage containing sensitive personal information, private property interiors, classified content, or any material you are not authorised to share.</p>
+<p><strong>6. YOUR RIGHTS</strong><br>
+Since UrbanFlow does not maintain permanent user accounts, signing out clears your session and associated data entirely. You may also contact us to ask what data is held or to report a concern.<br>
+Contact: <strong style="color:#f0c674">support.urbanflow365@gmail.com</strong><br>
+We will respond within 30 days.</p>
+<p><strong>7. CHANGES TO THIS POLICY</strong><br>
+We may update this policy as the platform evolves. The "Last Updated" date at the top reflects the most recent revision. Continued use after changes constitutes acceptance of the updated policy.</p>
+`
+    },
+    terms: {
+        title: 'Terms & Conditions',
+        subtitle: 'Last Updated: 28th April 2026',
+        content: `
+<p><strong>1. ACCEPTANCE</strong><br>
+By accessing or using UrbanFlow, you confirm that you have read, understood, and agree to these Terms and Conditions in full. If you do not agree, do not use the platform.<br>
+We are not responsible for any risks arising from future use of the platform beyond what is expressly stated here.</p>
+<p><strong>2. NATURE OF THE PLATFORM</strong><br>
+UrbanFlow is a beta product provided for research, evaluation, and non-critical use only. It is not intended for use in life-safety systems, emergency response, legal proceedings, or any context where errors in traffic data could cause harm.<br>
+The platform may be modified, suspended, or discontinued at any time without prior notice.</p>
+<p><strong>3. ELIGIBILITY</strong><br>
+You must be at least 18 years old and hold a valid Google account to use UrbanFlow. By signing in, you confirm you meet these requirements.</p>
+<p><strong>4. ACCEPTABLE USE</strong><br>
+You agree to use UrbanFlow only for its intended purpose: analysing road or traffic video footage to obtain traffic flow data.<br>
+You must NOT:<br>
+a) Upload footage unrelated to traffic or road monitoring — including personal recordings, indoor footage, private events, or surveillance of individuals.<br>
+b) Upload footage you do not have the legal right to use or process.<br>
+c) Upload footage containing nudity, violence, illegal activity, or any content that violates applicable law.<br>
+d) Attempt to reverse-engineer, scrape, or abuse the platform or its API.<br>
+e) Use the platform to identify, track, or surveil specific individuals without their explicit consent.<br>
+f) Upload classified, confidential, or government-restricted materials.<br>
+g) Use bots or automated scripts to interact with the platform.<br>
+Violation of these terms may result in immediate access termination and, where applicable, reporting to relevant authorities.</p>
+<p><strong>5. YOUR RESPONSIBILITY FOR UPLOADED CONTENT</strong><br>
+You are solely responsible for any footage you upload. By uploading, you confirm that:<br>
+- You own the footage or hold explicit authorisation to process it<br>
+- The footage is relevant to traffic or road monitoring<br>
+- You are not violating any third party's rights, including privacy rights<br>
+- The footage does not contain content prohibited under Section 4<br>
+We do not review uploaded footage before processing and are not responsible for its content.</p>
+<p><strong>6. LIMITATION OF LIABILITY</strong><br>
+To the fullest extent permitted by applicable law:<br>
+a) UrbanFlow is not liable for any direct, indirect, incidental, or consequential damages arising from your use of the platform.<br>
+b) Analysis results are provided as-is. They should not be used as the sole basis for engineering, legal, or policy decisions without independent verification.<br>
+c) In the event of a data breach, system failure, or security incident, our liability is limited to the maximum extent permitted by law. We will make reasonable efforts to notify affected users but are not liable for resulting harm.<br>
+d) We are not responsible for platform availability or uptime, as it operates on Hugging Face's third-party infrastructure.</p>
+<p><strong>7. DATA BREACH NOTICE</strong><br>
+If a breach affecting user data occurs, we will notify affected users via their registered email address within a reasonable timeframe of becoming aware of the incident. Given that we collect only session-level identifiers and no permanent video data, the risk of significant harm from a breach is inherently limited.</p>
+<p><strong>8. INTELLECTUAL PROPERTY</strong><br>
+UrbanFlow, its models, interface, design, and associated technology are the intellectual property of Perception365. You may not copy, reproduce, or redistribute any part of the platform without written permission.<br>
+You retain ownership of all footage you upload. By uploading, you grant us a limited, temporary licence to process that footage for analysis. This licence expires once processing is complete and the footage is deleted.</p>
+<p><strong>9. THIRD-PARTY SERVICES</strong><br>
+UrbanFlow uses:<br>
+- Google Identity Services (authentication)<br>
+- Hugging Face Spaces (hosting and compute)<br>
+Use of these services is governed by their own terms and privacy policies. We are not responsible for the practices of these providers.</p>
+<p><strong>10. TERMINATION</strong><br>
+We reserve the right to suspend or terminate access to UrbanFlow at any time, with or without notice, for violations of these Terms or misuse of the platform.</p>
+<p><strong>11. GOVERNING LAW</strong><br>
+These Terms are governed by the laws of India. Any disputes shall be subject to the exclusive jurisdiction of the courts of Indore, Madhya Pradesh, India.</p>
+<p><strong>12. CHANGES TO THESE TERMS</strong><br>
+We may revise these Terms at any time. Continued use of the platform after changes are posted constitutes acceptance of the revised Terms.</p>
+<p><strong>CONTACT</strong><br>
+For any questions, concerns, or to report misuse:<br>
+Email: <strong style="color:#f0c674">support.urbanflow365@gmail.com</strong></p>
+`
+    },
+};
+function injectLegalModals() {
+    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;
+    document.body.appendChild(container);
+}
+// =============================================
+// Keyboard Shortcuts Modal (vehicles.html only)
+// =============================================
+const SHORTCUTS = [
+    { label: 'About',              key: '1' },
+    { label: 'Overview',           key: '2' },
+    { label: 'Results',            key: '3' },
+    { label: 'Settings',           key: '4' },
+    { label: 'Guide',              key: '5' },
+    { label: 'Feedback',           key: '6' },
+    { label: 'Profile',            key: '7' },
+    { label: 'Download Artifacts', key: 'D' },
+];
+function injectShortcutsModal() {
+    const rows = SHORTCUTS.map(s =>
+        `<div class="shortcut-row">
+            <span class="shortcut-label">${s.label}</span>
+            <kbd class="kbd-key">${s.key}</kbd>
+        </div>`
+    ).join('');
+    const html = getShortcutsModalTemplate(rows);
+    const container = document.createElement('div');
+    container.innerHTML = html;
+    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
+// =============================================
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        closeAppModal('privacyModal');
+        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');
+    }
+});
+// =============================================
+// Auto-inject legal modals on DOMContentLoaded
+// =============================================
+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
+// =============================================
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+        navigator.serviceWorker.register('./sw.js');
+    });
+}

frontend/js/templates.js ADDED Viewed

	@@ -0,0 +1,126 @@

+/**
+ * UrbanFlow — templates.js
+ * Stores large HTML string templates extracted from shared.js and auth.js
+ */
+const TEMPLATES = {
+    authOverlay: `
+        <div class="auth-card">
+            <div class="auth-card-header">
+                <h2 class="auth-title">Sign In</h2>
+                <p class="auth-subtitle">Authenticate with your Google account to continue</p>
+            </div>
+            <div id="auth-google-btn" class="auth-google-btn"></div>
+            <p class="auth-error hidden"></p>
+            <p class="auth-footer">Your data is handled per our <button onclick="openAppModal('privacyModal')" class="auth-link">Privacy Policy</button></p>
+        </div>
+    `,
+    authGoogleBtn: `
+        <button class="gsi-custom-btn" onclick="_triggerGoogleSignInPopup()">
+            <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+                <path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/>
+                <path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/>
+                <path fill="#FBBC05" d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"/>
+                <path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z"/>
+            </svg>
+            <span>Continue with Google</span>
+        </button>
+    `,
+    logoutModal: `
+        <div class="auth-card" style="max-width:340px">
+            <h2 class="auth-title" style="margin-bottom:8px">Sign Out</h2>
+            <p class="auth-subtitle" style="margin-bottom:24px">Are you sure you want to sign out of UrbanFlow?</p>
+            <div style="display:flex;gap:12px">
+                <button onclick="hideLogoutConfirm()" class="auth-cancel-btn" style="flex:1;text-align:center;padding:12px 0">Cancel</button>
+                <button onclick="executeLogout()" style="flex:1;padding:12px 0;background:rgba(220,38,38,0.15);color:#ef4444;border:1px solid rgba(220,38,38,0.4);border-radius:10px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:background 0.2s" onmouseover="this.style.background='rgba(220,38,38,0.3)'" onmouseout="this.style.background='rgba(220,38,38,0.15)'">Yes</button>
+            </div>
+        </div>
+    `,
+    consentModal: `
+        <div class="auth-card" style="max-width:400px">
+            <div style="text-align:center;margin-bottom:20px">
+                <i class="fa-solid fa-shield-halved" style="font-size:28px;color:var(--cocoa-l);margin-bottom:12px;display:block"></i>
+                <h2 class="auth-title" style="margin-bottom:6px">Before you continue</h2>
+                <p class="auth-subtitle" style="margin-bottom:0">Please review and accept our policies to use UrbanFlow.</p>
+            </div>
+            <label id="consent-label" style="display:flex;align-items:flex-start;gap:12px;padding:16px;background:#111;border:1px solid #222;border-radius:12px;cursor:pointer;margin-bottom:20px;transition:border-color 0.2s">
+                <input type="checkbox" id="consent-checkbox" onchange="onConsentCheckboxChange()" style="margin-top:3px;accent-color:var(--cocoa-l);width:18px;height:18px;flex-shrink:0;cursor:pointer">
+                <span style="font-size:12px;color:#a89f97;line-height:1.6">
+                    I have read and agree to the
+                    <button onclick="event.preventDefault();openAppModal('privacyModal')" style="color:var(--cocoa-l);background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:700;text-decoration:underline;padding:0">Privacy Policy</button>
+                    and
+                    <button onclick="event.preventDefault();openAppModal('termsModal')" style="color:var(--cocoa-l);background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:700;text-decoration:underline;padding:0">Terms & Conditions</button>.
+                </span>
+            </label>
+            <button id="consent-accept-btn" onclick="acceptConsent()" disabled
+                style="width:100%;padding:14px 0;background:#1a1a1a;color:#555;border:1px solid #222;border-radius:12px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;cursor:not-allowed;transition:all 0.3s">
+                Agree & Continue
+            </button>
+        </div>
+    `
+};
+function getPrivacyModalTemplate(p) {
+    return `
+    <div id="appModal-privacyModal" class="modal-overlay" onclick="if(event.target===this)closeAppModal('privacyModal')">
+        <div class="modal-card" style="max-width: 600px; max-height: 85vh; overflow-y: auto;">
+            <button class="modal-close-btn" onclick="closeAppModal('privacyModal')">&times;</button>
+            <h2 class="modal-title">${p.title}</h2>
+            <p class="modal-subtitle mb-6" style="margin-bottom: 24px;">${p.subtitle}</p>
+            <div class="legal-document text-xs text-slate-300 space-y-4" style="line-height: 1.6; font-size: 12px; color: #cbd5e1; display: flex; flex-direction: column; gap: 16px; text-align: left;">
+                ${p.content}
+            </div>
+        </div>
+    </div>`;
+}
+function getTermsModalTemplate(t) {
+    return `
+    <div id="appModal-termsModal" class="modal-overlay" onclick="if(event.target===this)closeAppModal('termsModal')">
+        <div class="modal-card" style="max-width: 600px; max-height: 85vh; overflow-y: auto;">
+            <button class="modal-close-btn" onclick="closeAppModal('termsModal')">&times;</button>
+            <h2 class="modal-title">${t.title}</h2>
+            <p class="modal-subtitle mb-6" style="margin-bottom: 24px;">${t.subtitle}</p>
+            <div class="legal-document text-xs text-slate-300 space-y-4" style="line-height: 1.6; font-size: 12px; color: #cbd5e1; display: flex; flex-direction: column; gap: 16px; text-align: left;">
+                ${t.content}
+            </div>
+        </div>
+    </div>`;
+}
+function getShortcutsModalTemplate(rows) {
+    return `
+    <div id="appModal-shortcutsModal" class="modal-overlay" onclick="if(event.target===this)closeAppModal('shortcutsModal')">
+        <div class="modal-card modal-card-sm">
+            <button class="modal-close-btn" onclick="closeAppModal('shortcutsModal')">&times;</button>
+            <h2 class="modal-title" style="font-size:1rem">
+                <i class="fa-solid fa-keyboard text-accent" style="margin-right:6px"></i>Keyboard Shortcuts
+            </h2>
+            <p class="text-muted" style="font-size:10px;margin-bottom:16px">Navigate faster with these shortcuts</p>
+            <div style="display:flex;flex-direction:column;gap:8px">${rows}</div>
+            <p style="color:#333;font-size:9px;margin-top:14px;text-align:center">Press <strong style="color:#555">Esc</strong> to close</p>
+        </div>
+    </div>`;
+};
+function getOnboardFormTemplate(user) {
+    return `
+        <div class="auth-card-header">
+            <img src="${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">
+            <p id="auth-onboard-error" class="auth-error hidden"></p>
+            <button id="auth-onboard-submit" class="auth-submit-btn" onclick="_submitOnboarding()">
+                Continue
+            </button>
+        </div>
+    `;
+}

frontend/js/vehicles.js CHANGED Viewed

@@ -154,14 +154,17 @@ document.addEventListener('click', e => {
 // ---- Tab switching — updates both sidebar + mobile bottom nav ----
 function switchTab(tab) {
-    const allTabs = ['about', 'overview', 'run-details', 'reports', 'settings', 'help', 'feedback'];
     allTabs.forEach(t => {
-        // Content panels
         const el = document.getElementById('tab-' + t);
-        if (el) el.classList.toggle('hidden', tab !== t);
-        // Desktop sidebar nav items
         const nav = document.getElementById('nav-' + t);
         if (nav) {
             if (tab === t) {
@@ -173,17 +176,29 @@ function switchTab(tab) {
             }
         }
-        // Mobile bottom nav items
         const mobNav = document.getElementById('mob-nav-' + t);
-        if (mobNav) {
-            mobNav.classList.toggle('active', tab === t);
-            if (tab === 'reports' && t === 'reports') {
-                mobNav.classList.remove('notify-glow');
-            }
-        }
     });
 }
         // =========== Toast System ===========
         function showToast(message, type) {
             type = type || 'info';
@@ -196,12 +211,22 @@ function switchTab(tab) {
         }
         // =========== Keyboard Shortcuts ===========
-        const TAB_KEYS = { '1': 'about', '2': 'overview', '3': 'run-details', '4': 'reports', '5': 'settings', '6': 'help', '7': 'feedback' };
         function downloadArtifacts() {
             const vid = document.body.dataset.lastVideoId;
             if (vid) {
                 window.open(`bundle/${vid}`, '_blank');
-                showToast('Download started', 'success');
             }
         }
@@ -266,6 +291,12 @@ function switchTab(tab) {
                 details: text,
                 timestamp: new Date().toISOString()
             };
             const res = await fetch('api/feedback', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -274,8 +305,23 @@ function switchTab(tab) {
             if (res.ok) {
                 showToast('Thank you for your feedback!', 'success');
                 document.getElementById('fb-text').value = '';
-                document.getElementById('fb-usecase').selectedIndex = 0;
-                document.getElementById('fb-type').selectedIndex = 0;
                 document.querySelectorAll('#fb-priorities .fb-chip').forEach(c => c.classList.remove('active'));
                 // Reset Emojis
@@ -600,7 +646,14 @@ function switchTab(tab) {
             // Original init() logic
             const raw = sessionStorage.getItem('funky_run');
-            if (!raw) { window.location.replace('initial.html'); return; }
             _params = JSON.parse(raw);
@@ -615,6 +668,9 @@ function switchTab(tab) {
             // Sync current active tab from session if set
             const activeTab = sessionStorage.getItem('uf_active_tab') || 'settings';
             switchTab(activeTab);
         }
         // =========== Update functions ===========
@@ -731,8 +787,12 @@ function switchTab(tab) {
         function startNewAnalysis() {
             sessionStorage.clear();
             _params = null;
-            // Navigate to initial page directly — skips SPA router
-            window.location.replace('initial.html');
         }
         function updateBreakdown(classIn, classOut) {
             const container = document.getElementById('class-breakdown');
@@ -841,7 +901,6 @@ function switchTab(tab) {
             const stride = parseInt(document.getElementById('sv-stride').textContent);
             const reportFmt = document.getElementById('sv-report').value;
             const annotated = document.getElementById('sv-annotated').classList.contains('active');
-            _alpha = parseFloat(document.getElementById('sv-smoothing').textContent) || 0.25;
             // Annotation Options
             const annotated_options = {
@@ -867,9 +926,21 @@ function switchTab(tab) {
             // Lock settings
             lockSettings();
             // Switch to overview
             switchTab('overview');
-            document.getElementById('proc-label').innerText = 'Processing';
             // Reset Run Tab Results to Awaiting
@@ -879,11 +950,14 @@ function switchTab(tab) {
                     <span class="text-xs font-semibold">Executing inference pipeline... results pending</span>
                 </div>`;
-            // Update Reports tab pending message
             const repIcon = document.getElementById('reports-pending-icon');
-            if (repIcon) repIcon.className = 'fa-solid fa-circle-notch fa-spin text-[#c89a6c]';
             const repText = document.getElementById('reports-pending-text');
-            if (repText) repText.innerText = 'Artifacts will be available after processing completes... Please wait';
             // Start WebSocket
@@ -914,6 +988,7 @@ function switchTab(tab) {
             };
             let processingDone = false;
             ws.onclose = () => {
                 console.log('WS Closed');
@@ -926,7 +1001,7 @@ function switchTab(tab) {
                             <span class="text-xs font-semibold mb-1">Processing connection was lost.</span>
                             <span class="text-[10px] text-slate-500 mb-4">The server may have timed out or restarted. Please try again.</span>
                             <button onclick="startNewAnalysis()" class="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full" style="background:#111;border:1px solid #2a2a2a;color:#c89a6c">
-                                &larr; Start New Analysis
                             </button>
                         </div>`;
                 }
@@ -939,6 +1014,11 @@ function switchTab(tab) {
             ws.onmessage = e => {
                 const d = JSON.parse(e.data);
                 // Hide empty state on first data
                 const emptyState = document.getElementById('stats-empty-state');
                 if (emptyState) emptyState.style.display = 'none';
@@ -952,7 +1032,7 @@ function switchTab(tab) {
                             <span class="text-xs font-semibold mb-1">Inference pipeline failed.</span>
                             <span class="text-[10px] text-slate-500 mb-4 text-center max-w-xs">${d.error}</span>
                             <button onclick="startNewAnalysis()" class="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full" style="background:#111;border:1px solid #2a2a2a;color:#c89a6c">
-                                &larr; Start New Analysis
                             </button>
                         </div>`;
                     return;
@@ -960,9 +1040,19 @@ function switchTab(tab) {
                 if (d.done) {
                     processingDone = true;
                     document.getElementById('proc-label').innerText = 'Complete';
                     document.getElementById('proc-bar').style.width = '100%';
                     document.getElementById('proc-pct').innerText = '100%';
                     // Force frame counter to n/n
                     const framesEl = document.getElementById('proc-frames');
                     if (framesEl) {
@@ -975,11 +1065,16 @@ function switchTab(tab) {
                     // GLOW NOTIFICATION: Let the user know artifacts are ready
-                    const reportsMob = document.getElementById('mob-nav-reports');
-                    if (reportsMob) {
-                        reportsMob.classList.add('notify-glow');
                     }
                     document.getElementById('run-results-content').innerHTML =
                         detailRow('Inference Time', (d.processing_time || 0).toFixed(2) + ' sec') +
@@ -1011,10 +1106,10 @@ function switchTab(tab) {
                         jsonToggle.closest('.s-row').classList.add('disabled');
                     }
-                    // NOTIFY USER: Glow the artifacts (reports) icon in mobile nav
-                    const reportsNav = document.getElementById('mob-nav-reports');
-                    if (reportsNav) {
-                        reportsNav.classList.add('notify-glow');
                     }
                     const csvToggle = document.getElementById('sv-export-csv');
                     if (csvToggle) {
@@ -1253,7 +1348,7 @@ function switchTab(tab) {
                 Want to try another video?
             </p>
             <p style="color:#a89f97;font-size:11px;margin:0">
-                Go to <b style="color:#f0ece6">&#9881; Settings</b> &amp; click 'Analyze again'
             </p>
             <div id="retry-bubble-arrow"></div>
         `;
@@ -1265,14 +1360,14 @@ function switchTab(tab) {
         portal.appendChild(bubble);
         if (isMobile) {
-            // 7 icons in bottom nav. Settings = 5th (index 4).
-            // Center of 5th icon = (4 + 0.5) / 7 = 64.28% of viewport width.
             const navH = parseInt(
                 getComputedStyle(document.documentElement)
                     .getPropertyValue('--mob-nav-h') || '68', 10
             );
             const vpW  = window.innerWidth;
-            const settingsCenterX = (4.5 / 7) * vpW;
             const bubbleW = bubble.offsetWidth || 220;
             const leftPx  = Math.max(8, Math.min(settingsCenterX - bubbleW / 2, vpW - bubbleW - 8));
@@ -1330,6 +1425,122 @@ function switchTab(tab) {
         }, 6000);
     }
         document.addEventListener('DOMContentLoaded', () => {
             // Phase 1: instant visual — show the shell immediately on first paint
             const activeTab = sessionStorage.getItem('uf_active_tab') || 'settings';

 // ---- 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);
+        }
         const nav = document.getElementById('nav-' + t);
         if (nav) {
             if (tab === t) {
             }
         }
         const mobNav = document.getElementById('mob-nav-' + t);
+        if (mobNav) mobNav.classList.toggle('active', tab === t);
     });
+    // Refresh Profile UI every switch
+    if (typeof populateProfileUI === 'function') populateProfileUI();
+    if (tab === 'profile') populateProfileTab();
+    // Stop glow notification when user views Results
+    if (tab === 'results') {
+        const mobResults = document.getElementById('mob-nav-results');
+        if (mobResults) mobResults.classList.remove('notify-glow');
+        const navResults = document.getElementById('nav-results');
+        if (navResults) navResults.classList.remove('notify-glow');
+    }
+    // Store active tab
+    sessionStorage.setItem('uf_active_tab', tab);
 }
+// Ensure global access
+window.switchTab = switchTab;
         // =========== Toast System ===========
         function showToast(message, type) {
             type = type || 'info';
         }
         // =========== Keyboard Shortcuts ===========
+        const TAB_KEYS = { '1': 'about', '2': 'overview', '3': 'results', '4': 'settings', '5': 'help', '6': 'feedback', '7': 'profile' };
         function downloadArtifacts() {
             const vid = document.body.dataset.lastVideoId;
             if (vid) {
+                const btn = document.getElementById('btn-download-bundle');
+                if (btn) {
+                    const originalHTML = btn.innerHTML;
+                    btn.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i> Zipping...`;
+                    btn.disabled = true;
+                    setTimeout(() => {
+                        btn.innerHTML = originalHTML;
+                        btn.disabled = false;
+                    }, 4000);
+                }
                 window.open(`bundle/${vid}`, '_blank');
+                showToast('Preparing download bundle...', 'info');
             }
         }
                 details: text,
                 timestamp: new Date().toISOString()
             };
+            // Attach authenticated user email if available
+            const session = (typeof getAuthSession === 'function') ? getAuthSession() : null;
+            if (session && session.email) {
+                payload.user_email = session.email;
+            }
             const res = await fetch('api/feedback', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
             if (res.ok) {
                 showToast('Thank you for your feedback!', 'success');
                 document.getElementById('fb-text').value = '';
+                // Reset custom uf-select dropdowns
+                ['fb-usecase', 'fb-type'].forEach(function(id) {
+                    var hidden = document.getElementById(id);
+                    var label  = document.getElementById(id + '-label');
+                    var dropdown = document.getElementById(id + '-dropdown');
+                    if (hidden) hidden.value = '';
+                    if (label) {
+                        label.textContent = id === 'fb-usecase' ? 'Select your use case' : 'General Feedback';
+                        label.style.color = '#666';
+                    }
+                    if (dropdown) {
+                        dropdown.querySelectorAll('.uf-select-option').forEach(function(opt) {
+                            opt.classList.remove('uf-select-option-active');
+                        });
+                    }
+                });
                 document.querySelectorAll('#fb-priorities .fb-chip').forEach(c => c.classList.remove('active'));
                 // Reset Emojis
             // Original init() logic
             const raw = sessionStorage.getItem('funky_run');
+            if (!raw) {
+                if (typeof showOnboardingPhase === 'function') {
+                    showOnboardingPhase();
+                } else {
+                    window.location.replace('/');
+                }
+                return;
+            }
             _params = JSON.parse(raw);
             // Sync current active tab from session if set
             const activeTab = sessionStorage.getItem('uf_active_tab') || 'settings';
             switchTab(activeTab);
+            // Populate auth profile UI
+            populateProfileUI();
         }
         // =========== Update functions ===========
         function startNewAnalysis() {
             sessionStorage.clear();
             _params = null;
+            // SPA Router
+            if (typeof showOnboardingPhase === 'function') {
+                showOnboardingPhase();
+            } else {
+                window.location.replace('/');
+            }
         }
         function updateBreakdown(classIn, classOut) {
             const container = document.getElementById('class-breakdown');
             const stride = parseInt(document.getElementById('sv-stride').textContent);
             const reportFmt = document.getElementById('sv-report').value;
             const annotated = document.getElementById('sv-annotated').classList.contains('active');
             // Annotation Options
             const annotated_options = {
             // Lock settings
             lockSettings();
+            // Freeze annotation chips during processing
+            const chipSelector = document.getElementById('chip-selector');
+            if (chipSelector) {
+                chipSelector.style.pointerEvents = 'none';
+                chipSelector.style.opacity = '0.5';
+            }
             // Switch to overview
             switchTab('overview');
+            document.getElementById('proc-label').innerText = 'Connecting...';
+            // Analytics Funnel
+            if (typeof trackFunnel === 'function') {
+                trackFunnel('PROCESS_STARTED');
+            }
             // Reset Run Tab Results to Awaiting
                     <span class="text-xs font-semibold">Executing inference pipeline... results pending</span>
                 </div>`;
+            // Update Results tab pending message
             const repIcon = document.getElementById('reports-pending-icon');
+            if (repIcon) {
+                repIcon.className = 'fa-solid fa-satellite-dish animate-pulse text-5xl mb-2';
+                repIcon.style.color = '#c89a6c';
+            }
             const repText = document.getElementById('reports-pending-text');
+            if (repText) repText.innerText = 'Transmission in progress...';
             // Start WebSocket
             };
             let processingDone = false;
+            let firstMessageReceived = false;
             ws.onclose = () => {
                 console.log('WS Closed');
                             <span class="text-xs font-semibold mb-1">Processing connection was lost.</span>
                             <span class="text-[10px] text-slate-500 mb-4">The server may have timed out or restarted. Please try again.</span>
                             <button onclick="startNewAnalysis()" class="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full" style="background:#111;border:1px solid #2a2a2a;color:#c89a6c">
+                                <i class="fa-solid fa-house mr-1"></i> Home
                             </button>
                         </div>`;
                 }
             ws.onmessage = e => {
                 const d = JSON.parse(e.data);
+                if (!firstMessageReceived) {
+                    firstMessageReceived = true;
+                    document.getElementById('proc-label').innerText = 'Processing';
+                }
                 // Hide empty state on first data
                 const emptyState = document.getElementById('stats-empty-state');
                 if (emptyState) emptyState.style.display = 'none';
                             <span class="text-xs font-semibold mb-1">Inference pipeline failed.</span>
                             <span class="text-[10px] text-slate-500 mb-4 text-center max-w-xs">${d.error}</span>
                             <button onclick="startNewAnalysis()" class="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full" style="background:#111;border:1px solid #2a2a2a;color:#c89a6c">
+                                <i class="fa-solid fa-house mr-1"></i> Home
                             </button>
                         </div>`;
                     return;
                 if (d.done) {
                     processingDone = true;
+                    // Stats Tracking (Scoped by email)
+                    const session = (typeof getAuthSession === 'function') ? getAuthSession() : null;
+                    const emailKey = session ? `_${session.email}` : '';
+                    let currentRuns = parseInt(localStorage.getItem(`uf_total_runs${emailKey}`) || '0');
+                    localStorage.setItem(`uf_total_runs${emailKey}`, currentRuns + 1);
+                    localStorage.setItem(`uf_last_active${emailKey}`, new Date().toLocaleString());
                     document.getElementById('proc-label').innerText = 'Complete';
                     document.getElementById('proc-bar').style.width = '100%';
                     document.getElementById('proc-pct').innerText = '100%';
                     // Force frame counter to n/n
                     const framesEl = document.getElementById('proc-frames');
                     if (framesEl) {
                     // GLOW NOTIFICATION: Let the user know artifacts are ready
+                    const resultsMob = document.getElementById('mob-nav-results');
+                    if (resultsMob) {
+                        resultsMob.classList.add('notify-glow');
                     }
+                    // Show results content immediately (telemetry first, reports load async)
+                    const rPendingMsg = document.getElementById('reports-pending-message');
+                    if (rPendingMsg) rPendingMsg.classList.add('hidden');
+                    const rContentWrap = document.getElementById('results-content-wrap');
+                    if (rContentWrap) rContentWrap.classList.remove('hidden');
                     document.getElementById('run-results-content').innerHTML =
                         detailRow('Inference Time', (d.processing_time || 0).toFixed(2) + ' sec') +
                         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) {
                 Want to try another video?
             </p>
             <p style="color:#a89f97;font-size:11px;margin:0">
+                Tap <b style="color:#f0ece6">&#9881; Settings</b> &amp; click '<b style="color:#f0ece6">Home</b>'
             </p>
             <div id="retry-bubble-arrow"></div>
         `;
         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;
+            const settingsCenterX = (3.5 / 7) * vpW;
             const bubbleW = bubble.offsetWidth || 220;
             const leftPx  = Math.max(8, Math.min(settingsCenterX - bubbleW / 2, vpW - bubbleW - 8));
         }, 6000);
     }
+        // =========== Auth & Profile UI ===========
+        function populateProfileUI() {
+            const session = (typeof getAuthSession === 'function') ? getAuthSession() : null;
+            if (!session) return;
+            // Update PFP in Desktop Sidebar
+            const sidebarPfp = document.getElementById('sidebar-profile-pfp-wrap');
+            if (sidebarPfp && session.picture) {
+                sidebarPfp.innerHTML = `<img src="${session.picture}" alt="" class="w-full h-full object-cover rounded-full" referrerpolicy="no-referrer">`;
+            }
+            // Update PFP in Mobile Bottom Nav
+            const mobPfp = document.getElementById('mob-pfp-wrap');
+            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() {
+            const session = (typeof getAuthSession === 'function') ? getAuthSession() : null;
+            if (!session) return;
+            // Identity
+            const pfpLarge = document.getElementById('profile-pfp-large');
+            if (pfpLarge && session.picture) pfpLarge.src = session.picture;
+            const emailEl = document.getElementById('profile-email');
+            if (emailEl) emailEl.innerText = session.email;
+            const nameInp = document.getElementById('profile-username-input');
+            if (nameInp) nameInp.value = session.username || session.name || '';
+            // Stats (Scoped by email)
+            const emailKey = `_${session.email}`;
+            const totalRuns = localStorage.getItem(`uf_total_runs${emailKey}`) || '0';
+            const lastActive = localStorage.getItem(`uf_last_active${emailKey}`) || 'Never';
+            if (document.getElementById('profile-total-runs'))
+                document.getElementById('profile-total-runs').innerText = totalRuns;
+            if (document.getElementById('profile-last-active'))
+                document.getElementById('profile-last-active').innerText = lastActive;
+        }
+        async function saveProfileUsername() {
+            const session = (typeof getAuthSession === 'function') ? getAuthSession() : null;
+            if (!session) return;
+            const input = document.getElementById('profile-username-input');
+            const newName = input.value.trim();
+            if (!newName) return showToast('Name cannot be empty', 'error');
+            const btn = document.getElementById('btn-save-username');
+            btn.disabled = true;
+            btn.innerText = 'Saving...';
+            try {
+                // Save locally first (always works)
+                session.username = newName;
+                if (typeof saveAuthSession === 'function') saveAuthSession(session);
+                // Try backend as best-effort
+                fetch('api/auth/onboard', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email: session.email, username: newName })
+                }).catch(() => {});
+                showToast('Profile updated successfully', 'success');
+                populateProfileUI();
+            } catch (err) {
+                showToast('Failed to update profile', 'error');
+            } finally {
+                btn.disabled = false;
+                btn.innerText = 'Save';
+            }
+        }
+        function toggleLegalMenu(e) {
+            e.stopPropagation();
+            const menus = ['legal-menu', 'legal-menu-profile'];
+            menus.forEach(m => {
+                const el = document.getElementById(m);
+                if (el) el.classList.toggle('hidden');
+            });
+            // Close on click outside
+            const closer = () => {
+                menus.forEach(m => {
+                    const el = document.getElementById(m);
+                    if (el) el.classList.add('hidden');
+                });
+                window.removeEventListener('click', closer);
+            };
+            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 CHANGED Viewed

@@ -2,6 +2,8 @@ const CACHE_NAME = 'urbanflow-v4';
 const ASSETS = [
   './css/initial.css',
   './css/vehicles.css',
   './assets/shuriken.png',
   './assets/shurkien_b.png',
   './assets/uf_rf.png'

 const ASSETS = [
   './css/initial.css',
   './css/vehicles.css',
+  './css/shared.css',
+  './css/auth.css',
   './assets/shuriken.png',
   './assets/shurkien_b.png',
   './assets/uf_rf.png'

frontend/vehicles.html CHANGED Viewed

@@ -6,13 +6,13 @@
     <meta name="color-scheme" content="dark">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>UrbanFlow</title>
-    <link rel="icon" type="image/png" href="assets/rf.png">
     <link rel="manifest" href="manifest.json">
     <meta name="theme-color" content="#000000">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="apple-mobile-web-app-title" content="UrbanFlow">
-    <link rel="apple-touch-icon" href="assets/icon-192.png">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -20,7 +20,30 @@
         href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800;900&display=swap"
         rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/vehicles.css">
 </head>
 <body class="bg-black text-white h-screen w-screen flex" style="overflow:hidden">
@@ -31,16 +54,18 @@
         <!-- Mobile Legal Overflow -->
         <div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center">
-            <button onclick="toggleLegalMenu(event)" class="text-[#a89f97] hover:text-white p-2 transition-colors" aria-label="Legal Menu">
-                <i class="fa-solid fa-ellipsis-vertical text-lg"></i>
             </button>
             <div id="legal-menu" class="hidden absolute right-0 top-full mt-2 w-48 bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg shadow-2xl z-50 overflow-hidden">
                 <button onclick="openAppModal('privacyModal'); 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">
                     Privacy Policy
                 </button>
-                <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] transition-all">
                     Terms & Conditions
                 </button>
             </div>
         </div>
     </div>
@@ -57,15 +82,11 @@
             </a>
             <a onclick="switchTab('overview')" id="nav-overview"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
-                <i class="fa-solid fa-desktop w-6"></i> <span class="font-medium">Stats</span>
-            </a>
-            <a onclick="switchTab('run-details')" id="nav-run-details"
-                class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
-                <i class="fa-solid fa-microchip w-6"></i> <span class="font-medium">Run</span>
             </a>
-            <a onclick="switchTab('reports')" id="nav-reports"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
-                <i class="fa-solid fa-file-lines w-6"></i> <span class="font-medium">Artifacts</span>
             </a>
             <a onclick="switchTab('settings')" id="nav-settings"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
@@ -79,6 +100,11 @@
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
                 <i class="fa-solid fa-comment-dots w-6"></i> <span class="font-medium">Feedback</span>
             </a>
         </nav>
         <div class="mt-auto border-t p-4 flex flex-col items-center gap-2 bg-black flex-shrink-0"
             style="border-color:#2a2a2a">
@@ -90,29 +116,24 @@
                 class="text-[10px] font-bold uppercase tracking-widest transition w-full text-center py-1 rounded"
                 style="color:#a89f97" onmouseover="this.style.color='#c89a6c'"
                 onmouseout="this.style.color='#a89f97'">Terms &amp; Conditions</button>
-            <p class="text-[11px] font-medium mt-1 mb-1" style="color:#555">&#169; 2026 UrbanFlow</p>
         </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-2 py-1.5 items-center justify-between">
         <img src="assets/uf_rf.png" alt="UF" class="h-8">
-        <div class="flex gap-1">
-            <button onclick="switchTab('about')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i
-                    class="fa-solid fa-circle-info"></i></button>
-            <button onclick="switchTab('overview')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i
-                    class="fa-solid fa-desktop"></i></button>
-            <button onclick="switchTab('run-details')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i
-                    class="fa-solid fa-microchip"></i></button>
-            <button onclick="switchTab('reports')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i
-                    class="fa-solid fa-file-lines"></i></button>
-            <button onclick="switchTab('settings')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i
-                    class="fa-solid fa-sliders"></i></button>
-            <button onclick="switchTab('help')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i
-                    class="fa-solid fa-circle-question"></i></button>
-            <button onclick="switchTab('feedback')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i
-                    class="fa-solid fa-comment-dots"></i></button>
         </div>
     </div>
@@ -121,6 +142,41 @@
     <main class="flex-1 flex flex-col h-full min-w-0 p-4 gap-4">
         <!-- TAB: About -->
         <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div class="bg-black border rounded-xl p-12 shadow-2xl space-y-8 flex flex-col justify-center"
@@ -158,7 +214,7 @@
                     </p>
                 </div>
-                <div class="grid grid-cols-2 gap-12 pt-8 text-left border-t max-w-5xl mx-auto"
                     style="border-color:#1a1a1a">
                     <div class="space-y-4">
                         <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What You Will Get Here</h4>
@@ -173,7 +229,7 @@
                             </li>
                             <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                     style="color:#c89a6c"></i>
-                                <span>Congestion Analytics,Peak Detection, and temporal Trends</span>
                             </li>
                             <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                     style="color:#c89a6c"></i>
@@ -187,13 +243,30 @@
                         </h4>
                         <p class="text-xs leading-relaxed" style="color:#a89f97">
                             UrbanFlow delivers an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results
-                            may vary slightly across runs due to frame-by-frame inference variability
                         </p>
                         <p class="text-xs leading-relaxed" style="color:#a89f97">
                             For research or planning use, process the same footage 2–3 times
                             and average the results for improved reliability.
                         </p>
                     </div>
                 </div>
                 <div class="text-center pt-6 border-t" style="border-color:#1a1a1a">
@@ -212,42 +285,6 @@
         </div>
-        <!-- Progress Bar (shared) -->
-        <div id="progress-bar-wrapper"
-            class="w-full bg-neutral-950 rounded-xl px-6 py-4 border border-neutral-800 shadow-sm flex items-center justify-between flex-shrink-0">
-            <div class="flex items-center space-x-4 flex-1 mr-6">
-                <span class="text-[11px] font-black text-white uppercase tracking-wider whitespace-nowrap"
-                    id="proc-label">Waiting</span>
-                <div class="flex-1 h-2 bg-[#111111] rounded-full overflow-hidden relative border border-[#1a1a1a]">
-                    <div id="proc-bar" class="h-full bg-[#444444] rounded-full transition-all duration-500 ease-out"
-                        style="width: 0%"></div>
-                </div>
-            </div>
-            <div class="flex items-center space-x-6 text-xs font-bold text-white whitespace-nowrap">
-                <span id="proc-frames">Awaiting Input</span>
-                <span id="proc-pct">Idle</span>
-                <div class="uf-select-wrap" id="live-palette-wrap">
-                    <div class="uf-select-trigger" id="live-palette-trigger" onclick="ufSelectToggle('live-palette')">
-                        <span class="uf-select-label" id="live-palette-label">Default</span>
-                        <i class="fa-solid fa-chevron-down uf-select-arrow" id="live-palette-arrow"></i>
-                    </div>
-                    <div class="uf-select-dropdown hidden" id="live-palette-dropdown">
-                        <div class="uf-select-option" data-value="default" onclick="ufSelectPick('live-palette','default','Default')">Default</div>
-                        <div class="uf-select-option" data-value="vibrant" onclick="ufSelectPick('live-palette','vibrant','Vibrant')">Vibrant</div>
-                        <div class="uf-select-option" data-value="corporate" onclick="ufSelectPick('live-palette','corporate','Corporate')">Corporate</div>
-                        <div class="uf-select-option" data-value="neon" onclick="ufSelectPick('live-palette','neon','Neon Night')">Neon Night</div>
-                        <div class="uf-select-option" data-value="earth" onclick="ufSelectPick('live-palette','earth','Earth Tones')">Earth Tones</div>
-                        <div class="uf-select-option" data-value="ocean" onclick="ufSelectPick('live-palette','ocean','Ocean Breeze')">Ocean Breeze</div>
-                        <div class="uf-select-option" data-value="sunset" onclick="ufSelectPick('live-palette','sunset','Sunset Glow')">Sunset Glow</div>
-                        <div class="uf-select-option" data-value="midnight" onclick="ufSelectPick('live-palette','midnight','Midnight Deep')">Midnight Deep</div>
-                        <div class="uf-select-option" data-value="gold" onclick="ufSelectPick('live-palette','gold','Monochrome Gold')">Monochrome Gold</div>
-                    </div>
-                    <input type="hidden" id="live-palette-select" value="default">
-                </div>
-            </div>
-        </div>
-        <!-- TAB: Overview -->
         <div id="tab-overview" class="hidden grid grid-cols-12 gap-4 flex-1 min-h-0 overflow-hidden"
             style="position:relative">
@@ -339,88 +376,17 @@
                 <div class="flex-1 w-full relative min-h-[220px]">
                     <canvas id="flowChart"></canvas>
                 </div>
-            </div>
-        </div>
-        </div>
-        <!-- TAB: Run -->
-        <div id="tab-run-details" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <div class="space-y-6 w-full max-w-[1400px] mx-auto">
-                <!-- HERO: Process Analytics -->
-                <div id="run-results-card" class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm overflow-hidden flex flex-col"
-                    style="border-color:#2a2a2a">
-                    <div class="px-6 py-4 border-b flex flex-col lg:flex-row justify-between items-center gap-4"
-                        style="border-color:#1a1a1a;background:#050505">
-                        <div class="text-center lg:text-left">
-                            <h3 class="font-bold text-sm" style="color:#f0ece6">Process Analytics</h3>
-                            <p class="text-[10px] mt-0.5 uppercase tracking-widest font-medium"
-                                style="color:#a89f97">
-                                Execution Telemetry</p>
-                        </div>
-                        <div class="flex items-center gap-3">
-                        </div>
-                    </div>
-                    <div class="p-8">
-                        <div id="run-results-content" class="grid grid-cols-3 gap-12">
-                            <div class="flex flex-col items-center justify-center p-12 rounded-2xl col-span-3 text-center w-full"
-                                style="color:#555; min-height: 180px;">
-                                <i class="fa-solid fa-chart-line text-4xl mb-4" style="color:#3a3a3a;"></i>
-                                <span class="text-[11px] font-bold uppercase tracking-[0.2em] block w-full text-center">Initiate a run to view performance insights</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- Technical Context Row -->
-                <div class="grid grid-cols-2 gap-6">
-                    <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"
-                        style="border-color:#2a2a2a">
-                        <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
-                            <h3 class="font-bold text-sm" style="color:#f0ece6">Stream Source Profile</h3>
-                        </div>
-                        <div class="p-6 space-y-4" id="panel-video"></div>
-                    </div>
-                    <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"
-                        style="border-color:#2a2a2a">
-                        <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
-                            <h3 class="font-bold text-sm" style="color:#f0ece6">System Resource Utilization</h3>
-                        </div>
-                        <div class="p-6 space-y-4" id="panel-perf"></div>
-                    </div>
-                    <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"
-                        style="border-color:#2a2a2a">
-                        <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
-                            <h3 class="font-bold text-sm" style="color:#f0ece6">Model Architecture &amp; Logic</h3>
-                        </div>
-                        <div class="p-6 space-y-4" id="panel-model"></div>
-                    </div>
-                    <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"
-                        style="border-color:#2a2a2a">
-                        <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
-                            <h3 class="font-bold text-sm" style="color:#f0ece6">Inference Parameters</h3>
-                        </div>
-                        <div class="p-6 space-y-4" id="panel-infer"></div>
-                    </div>
-                </div>
             </div>
         </div>
-        <!-- TAB: Reports -->
-        <div id="tab-reports" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div id="reports-pending-message"
                 class="mb-4 text-center p-8 flex flex-col items-center justify-center gap-4"
                 style="min-height: 60vh;">
                 <i class="fa-solid fa-hourglass-half text-5xl mb-2" style="color:#3a3230;"></i>
                 <div style="color:#c89a6c; font-size:13px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;">
-                    Processing Pending
                 </div>
                 <span id="reports-pending-text"
                     class="text-xs font-medium tracking-wide uppercase leading-relaxed text-center"
@@ -429,31 +395,91 @@
                 </span>
             </div>
-            <!-- Post-Processing Insights (Populated after completion) -->
-            <div id="post-process-cards" class="hidden mb-4">
-                <!-- PCU Summary -->
-                <div class="bg-black rounded-xl p-6 border border-slate-800 shadow-sm flex flex-col min-h-[140px]">
-                    <div class="flex justify-between items-center mb-4 relative">
-                        <h3 class="font-bold text-white text-sm flex items-center">PCU Analysis
-                            <span class="info-wrap"><span class="info-btn" style="background:#222;color:#888"><i
-                                        class="fa-solid fa-info"></i></span>
-                                <span class="info-tip">Passenger Car Units (IRC:106-1990). Converts heterogeneous Indian
-                                    traffic into standardized units for road capacity analysis.</span></span>
-                        </h3>
-                    </div>
-                    <div class="flex-1 flex items-center justify-center" id="pcu-stats-card">
-                        <div class="text-center text-slate-600 text-xs"><i></i><br>Available after processing</div>
-                    </div>
                 </div>
-            </div>
-            <div id="reports-grid" class="hidden grid grid-cols-2 xl:grid-cols-3 gap-4"></div>
-            <!-- Mobile Download Button (visible at the very bottom of Artifacts tab after processing) -->
-            <div id="mobile-download-wrap" class="hidden lg:hidden flex justify-center mt-6 mb-4">
-                <button onclick="downloadArtifacts()" class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg active:scale-95" style="background:var(--cocoa-l);color:#000">
-                    <i class="fa-solid fa-download"></i> Download All
-                </button>
             </div>
         </div>
@@ -461,7 +487,7 @@
         <div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div class="grid grid-cols-2 gap-6 w-full">
                 <!-- Processing Parameters -->
-                <div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col"
                     style="border-color:#2a2a2a">
                     <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
                         <h3 class="font-bold text-white text-sm flex items-center">Inference Configuration Profile
@@ -475,7 +501,7 @@
                         <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
                             Auto-configured pipeline parameters</p>
                     </div>
-                    <div class="px-6 py-2 flex-1" id="settings-params">
                         <div class="s-row" data-param="imgsz">
                             <div>
                                 <div class="text-xs font-semibold text-slate-300 flex items-center">Image Size
@@ -541,24 +567,6 @@
                                     onclick="stepParam('stride',1)">&#8250;</button></div>
                         </div>
-                        <div class="s-row" data-param="smoothing">
-                            <div>
-                                <div class="text-xs font-semibold text-slate-300 flex items-center gap-1">
-                                    <span>Congestion Smoothing</span>
-                                    <span class="info-wrap">
-                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i
-                                                class="fa-solid fa-info"></i></span>
-                                        <span class="info-tip">Reduces jitter/noise in the line chart. Low values
-                                            (0.05-0.2) create very smooth trends; high values (0.8+) show raw spiky
-                                            data.</span>
-                                    </span>
-                                </div>
-                                <div class="text-[10px] text-slate-500">EMA Alpha factor for the rolling average</div>
-                            </div>
-                            <div class="s-stepper"><button onclick="stepParam('smoothing',-0.05)">&#8249;</button><span
-                                    class="s-val" id="sv-smoothing">0.25</span><button
-                                    onclick="stepParam('smoothing',0.05)">&#8250;</button></div>
-                        </div>
                     </div>
                 </div>
@@ -661,14 +669,6 @@
                                 <div class="toggle-thumb"></div>
                             </div>
                         </div>
-                        <div class="s-row hidden">
-                            <div>
-                                <div class="text-xs font-semibold text-slate-300">Interface Mode</div>
-                                <div class="text-[10px] text-slate-500">Locked to Professional Dark</div>
-                            </div>
-                            <div class="text-xs font-bold text-white px-3 py-1 bg-slate-800 rounded-full">Dark Mode Only
-                            </div>
-                        </div>
                     </div>
                 </div>
@@ -681,12 +681,12 @@
                     </button>
                 </div>
-                <!-- New Analysis Button (visible only after processing completes) -->
                 <div class="col-span-3 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:var(--cocoa-l);color:#000">
-                        <span>Analyze again <i class="fa-solid fa-rotate-left ml-2 text-[10px]"></i></span>
                     </button>
                 </div>
             </div>
@@ -755,8 +755,8 @@
                                     </button>
                                     <div id="h3-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
                                         style="color:#777">
-                                        To analyze a new video, go to 'Settings' and click 'Analyze again'
-                                        This resets current session state and return you
                                         to the Home screen.
                                     </div>
                                 </div>
@@ -1130,174 +1130,80 @@
             </div>
         </div>
-    </main>
-    <script src="js/vehicles.js"></script>
-    <!-- Privacy Modal -->
-    <div id="appModal-privacyModal" onclick="if(event.target===this)closeAppModal('privacyModal')"
-        style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">
-        <div
-            style="background:#0a0a0a;border:1px solid #2a2a2a;border-radius:14px;max-width:480px;width:100%;padding:32px;position:relative;max-height:80vh;overflow-y:auto">
-            <button onclick="closeAppModal('privacyModal')"
-                style="position:absolute;top:16px;right:18px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">&times;</button>
-            <h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Privacy Policy</h2>
-            <p style="color:#a89f97;font-size:11px;margin-bottom:20px">We keep this simple and honest.</p>
-            <ul style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc">
-                <li>This is a <strong style="color:#f0ece6">public demo</strong> hosted on Hugging Face Spaces. It is
-                    not yet a complete production service.</li>
-                <li>Footage you submit is processed in real time and <strong style="color:#f0ece6">discarded
-                        immediately</strong> after the session ends. Nothing is stored on our servers.</li>
-                <li>We do not use your footage to train models, sell it, or share it with any third party.</li>
-                <li>Reports and annotated videos are generated temporarily and delivered to your device. We do not
-                    retain copies.</li>
-                <li>We do not use advertising cookies, behavioral tracking, or analytics scripts on this platform.</li>
-                <li>Your use of this demo may inform product requirements. No personally identifiable data is collected
-                    in that process.</li>
-                <li>For any queries: <strong style="color:#c89a6c">support.urbanflow365@gmail.com</strong></li>
-            </ul>
-            <p style="color:#555;font-size:10px;margin-top:20px">&mdash; Team UrbanFlow</p>
-        </div>
-    </div>
-    <!-- Terms Modal -->
-    <div id="appModal-termsModal" onclick="if(event.target===this)closeAppModal('termsModal')"
-        style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">
-        <div
-            style="background:#0a0a0a;border:1px solid #2a2a2a;border-radius:14px;max-width:480px;width:100%;padding:32px;position:relative;max-height:80vh;overflow-y:auto">
-            <button onclick="closeAppModal('termsModal')"
-                style="position:absolute;top:16px;right:18px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">&times;</button>
-            <h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Terms &amp; Conditions</h2>
-            <p style="color:#a89f97;font-size:11px;margin-bottom:20px">By using this application, you agree to the
-                following terms.</p>
-            <p style="color:#c89a6c;font-size:11px;font-weight:700;margin-bottom:6px">You can:</p>
-            <ul
-                style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;margin-bottom:16px">
-                <li>Use this demo to evaluate UrbanFlow&rsquo;s traffic detection and analytics capabilities.</li>
-                <li>Export reports, annotated video outputs, and data artifacts to your own device.</li>
-                <li>Share feedback, feature requests, or questions with us at <strong
-                        style="color:#c89a6c">support.urbanflow365@gmail.com</strong>.</li>
-                <li>Reference this demo in research or internal evaluation, with proper attribution.</li>
-            </ul>
-            <p style="color:#c89a6c;font-size:11px;font-weight:700;margin-bottom:6px">You cannot:</p>
-            <ul
-                style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;margin-bottom:16px">
-                <li>Commercially redistribute outputs or present them as your own product&rsquo;s capability.</li>
-                <li>Reverse-engineer, extract, or attempt to replicate the underlying model or processing pipeline.</li>
-                <li>Use the platform for unlawful, harmful, or safety-critical operational purposes.</li>
-                <li>Misrepresent demo outputs as certified or regulatory-grade traffic data.</li>
-            </ul>
-            <p style="color:#a89f97;font-size:11px">This platform is provided as-is for <strong
-                    style="color:#f0ece6">demonstration and evaluation purposes only</strong>.
-                Outputs are not intended for operational, regulatory, or safety-critical use. This is an early-stage
-                research project, not a commercial product.</p>
-            <p style="color:#555;font-size:10px;margin-top:16px">Questions: <strong
-                    style="color:#c89a6c">support.urbanflow365@gmail.com</strong></p>
-        </div>
-    </div>
-    <!-- Keyboard Shortcuts Modal -->
-    <div id="appModal-shortcutsModal" onclick="if(event.target===this)closeAppModal('shortcutsModal')"
-        style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">
-        <div
-            style="background:#0a0a0a;border:1px solid #2a2a2a;border-radius:14px;max-width:380px;width:100%;padding:28px;position:relative">
-            <button onclick="closeAppModal('shortcutsModal')"
-                style="position:absolute;top:14px;right:16px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">&times;</button>
-            <h2 style="color:#f0ece6;font-size:1rem;font-weight:700;margin-bottom:4px">
-                <i class="fa-solid fa-keyboard" style="color:#c89a6c;margin-right:6px"></i>Keyboard Shortcuts
-            </h2>
-            <p style="color:#555;font-size:10px;margin-bottom:16px">Navigate faster with these shortcuts</p>
-            <div style="display:flex;flex-direction:column;gap:8px">
-                <div
-                    style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
-                    <span style="color:#a89f97;font-size:11px;font-weight:500">About</span>
-                    <kbd
-                        style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">1</kbd>
-                </div>
-                <div
-                    style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
-                    <span style="color:#a89f97;font-size:11px;font-weight:500">Stats</span>
-                    <kbd
-                        style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">2</kbd>
-                </div>
-                <div
-                    style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
-                    <span style="color:#a89f97;font-size:11px;font-weight:500">Run</span>
-                    <kbd
-                        style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">3</kbd>
-                </div>
-                <div
-                    style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
-                    <span style="color:#a89f97;font-size:11px;font-weight:500">Artifacts</span>
-                    <kbd
-                        style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">4</kbd>
-                </div>
-                <div
-                    style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
-                    <span style="color:#a89f97;font-size:11px;font-weight:500">Settings</span>
-                    <kbd
-                        style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">5</kbd>
                 </div>
-                <div
-                    style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
-                    <span style="color:#a89f97;font-size:11px;font-weight:500">Quick Help</span>
-                    <kbd
-                        style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">6</kbd>
                 </div>
-                <div
-                    style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
-                    <span style="color:#a89f97;font-size:11px;font-weight:500">Feedback</span>
-                    <kbd
-                        style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">7</kbd>
                 </div>
-                <div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0">
-                    <span style="color:#a89f97;font-size:11px;font-weight:500">Download Artifacts</span>
-                    <kbd
-                        style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">D</kbd>
                 </div>
             </div>
-            <p style="color:#333;font-size:9px;margin-top:14px;text-align:center">Press <strong
-                    style="color:#555">Esc</strong> to close</p>
         </div>
-    </div>
     <script>
-        function openAppModal(id) {
-            const el = document.getElementById('appModal-' + id);
-            if (el) { el.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
-        }
-        function closeAppModal(id) {
-            const el = document.getElementById('appModal-' + id);
-            if (el) { el.style.display = 'none'; document.body.style.overflow = ''; }
-        }
-        // 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(e) {
-            const menu = document.getElementById('legal-menu');
-            if (menu && !menu.classList.contains('hidden')) {
-                if (!e.target.closest('.mobile-top-bar')) {
-                    menu.classList.add('hidden');
-                }
-            }
-        });
-        document.addEventListener('keydown', function (e) {
-            if (e.key === 'Escape') {
-                closeAppModal('privacyModal');
-                closeAppModal('termsModal');
-                closeAppModal('shortcutsModal');
-                const menu = document.getElementById('legal-menu');
-                if (menu) menu.classList.add('hidden');
-            }
-        });
-        // Auto-show keyboard shortcuts on every page visit (Desktop only)
         if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
             setTimeout(function () { openAppModal('shortcutsModal'); }, 800);
         }
@@ -1309,10 +1215,7 @@
         <button class="mob-nav-item" id="mob-nav-overview" onclick="switchTab('overview')">
             <i class="fa-solid fa-desktop"></i>
         </button>
-        <button class="mob-nav-item" id="mob-nav-run-details" onclick="switchTab('run-details')">
-            <i class="fa-solid fa-microchip"></i>
-        </button>
-        <button class="mob-nav-item" id="mob-nav-reports" onclick="switchTab('reports')">
             <i class="fa-solid fa-file-lines"></i>
         </button>
         <button class="mob-nav-item" id="mob-nav-settings" onclick="switchTab('settings')">
@@ -1324,7 +1227,12 @@
         <button class="mob-nav-item" id="mob-nav-feedback" onclick="switchTab('feedback')">
             <i class="fa-solid fa-comment-dots"></i>
         </button>
-    </nav>
     <script>
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', () => {

     <meta name="color-scheme" content="dark">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>UrbanFlow</title>
+    <link rel="icon" type="image/png" href="assets/shuriken.png">
     <link rel="manifest" href="manifest.json">
     <meta name="theme-color" content="#000000">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="apple-mobile-web-app-title" content="UrbanFlow">
+    <link rel="apple-touch-icon" href="assets/shurkien_b.png">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
         href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800;900&display=swap"
         rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/shared.css">
     <link rel="stylesheet" href="css/vehicles.css">
+    <link rel="stylesheet" href="css/auth.css">
+    <!-- SPA Guard: no active run OR page refresh → go back to landing -->
+    <script>
+        (function() {
+            // SPA: rewrite URL to root so /vehicles never shows in the address bar
+            if (window.location.pathname !== '/') {
+                history.replaceState(null, '', '/');
+            }
+            var hasRun = sessionStorage.getItem('funky_run');
+            var consumed = sessionStorage.getItem('funky_run_consumed');
+            if (!hasRun || consumed) {
+                sessionStorage.removeItem('funky_run');
+                sessionStorage.removeItem('funky_run_consumed');
+                sessionStorage.removeItem('uf_active_tab');
+                window.location.replace('/');
+            } else {
+                // Mark as consumed immediately — any refresh from here will redirect
+                sessionStorage.setItem('funky_run_consumed', '1');
+            }
+        })();
+    </script>
 </head>
 <body class="bg-black text-white h-screen w-screen flex" style="overflow:hidden">
         <!-- Mobile Legal Overflow -->
         <div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center">
+            <button id="mobile-menu-trigger" onclick="toggleLegalMenu(event)" class="text-[#a89f97] hover:text-white p-2 transition-colors" aria-label="Menu">
+                <i id="mobile-menu-icon" class="fa-solid fa-ellipsis-vertical text-lg"></i>
             </button>
             <div id="legal-menu" class="hidden absolute right-0 top-full mt-2 w-48 bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg shadow-2xl z-50 overflow-hidden">
                 <button onclick="openAppModal('privacyModal'); 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">
                     Privacy Policy
                 </button>
+                <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>
             </div>
         </div>
     </div>
             </a>
             <a onclick="switchTab('overview')" id="nav-overview"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
+                <i class="fa-solid fa-desktop w-6"></i> <span class="font-medium">Overview</span>
             </a>
+            <a onclick="switchTab('results')" id="nav-results"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
+                <i class="fa-solid fa-file-lines w-6"></i> <span class="font-medium">Results</span>
             </a>
             <a onclick="switchTab('settings')" id="nav-settings"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
                 <i class="fa-solid fa-comment-dots w-6"></i> <span class="font-medium">Feedback</span>
             </a>
+            <a onclick="switchTab('profile')" id="nav-profile"
+                class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
+                <div id="sidebar-profile-pfp-wrap" class="w-6 h-6 inline-flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-circle-user"></i></div>
+                <span class="font-medium ml-3">Profile</span>
+            </a>
         </nav>
         <div class="mt-auto border-t p-4 flex flex-col items-center gap-2 bg-black flex-shrink-0"
             style="border-color:#2a2a2a">
                 class="text-[10px] font-bold uppercase tracking-widest transition w-full text-center py-1 rounded"
                 style="color:#a89f97" onmouseover="this.style.color='#c89a6c'"
                 onmouseout="this.style.color='#a89f97'">Terms &amp; Conditions</button>
+            <p class="text-[11px] font-medium mt-2 mb-1 text-center" style="color:#555">&#169; 2026 UrbanFlow<br><span class="text-[9px] text-[#444] block mt-1">All rights reserved.</span></p>
         </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>
     <main class="flex-1 flex flex-col h-full min-w-0 p-4 gap-4">
+        <!-- Progress Bar (shared) -->
+        <div id="progress-bar-wrapper"
+            class="w-full bg-neutral-950 rounded-xl px-6 py-4 border border-neutral-800 shadow-sm flex items-center justify-between flex-shrink-0">
+            <div class="flex items-center space-x-4 flex-1 mr-6">
+                <span class="text-[11px] font-black text-white uppercase tracking-wider whitespace-nowrap"
+                    id="proc-label">Waiting</span>
+                <div class="flex-1 h-2 bg-[#111111] rounded-full overflow-hidden relative border border-[#1a1a1a]">
+                    <div id="proc-bar" class="h-full bg-[#444444] rounded-full transition-all duration-500 ease-out"
+                        style="width: 0%"></div>
+                </div>
+            </div>
+            <div class="flex items-center space-x-6 text-xs font-bold text-white whitespace-nowrap">
+                <span id="proc-frames">Awaiting Input</span>
+                <span id="proc-pct">Idle</span>
+                <div class="uf-select-wrap" id="live-palette-wrap">
+                    <div class="uf-select-trigger" id="live-palette-trigger" onclick="ufSelectToggle('live-palette')">
+                        <span class="uf-select-label" id="live-palette-label">Default</span>
+                        <i class="fa-solid fa-chevron-down uf-select-arrow" id="live-palette-arrow"></i>
+                    </div>
+                    <div class="uf-select-dropdown hidden" id="live-palette-dropdown">
+                        <div class="uf-select-option" data-value="default" onclick="ufSelectPick('live-palette','default','Default')">Default</div>
+                        <div class="uf-select-option" data-value="vibrant" onclick="ufSelectPick('live-palette','vibrant','Vibrant')">Vibrant</div>
+                        <div class="uf-select-option" data-value="corporate" onclick="ufSelectPick('live-palette','corporate','Corporate')">Corporate</div>
+                        <div class="uf-select-option" data-value="neon" onclick="ufSelectPick('live-palette','neon','Neon Night')">Neon Night</div>
+                        <div class="uf-select-option" data-value="earth" onclick="ufSelectPick('live-palette','earth','Earth Tones')">Earth Tones</div>
+                        <div class="uf-select-option" data-value="ocean" onclick="ufSelectPick('live-palette','ocean','Ocean Breeze')">Ocean Breeze</div>
+                        <div class="uf-select-option" data-value="sunset" onclick="ufSelectPick('live-palette','sunset','Sunset Glow')">Sunset Glow</div>
+                        <div class="uf-select-option" data-value="midnight" onclick="ufSelectPick('live-palette','midnight','Midnight Deep')">Midnight Deep</div>
+                        <div class="uf-select-option" data-value="gold" onclick="ufSelectPick('live-palette','gold','Monochrome Gold')">Monochrome Gold</div>
+                    </div>
+                    <input type="hidden" id="live-palette-select" value="default">
+                </div>
+            </div>
+        </div>
         <!-- TAB: About -->
         <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div class="bg-black border rounded-xl p-12 shadow-2xl space-y-8 flex flex-col justify-center"
                     </p>
                 </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-12 pt-8 text-left border-t max-w-6xl mx-auto"
                     style="border-color:#1a1a1a">
                     <div class="space-y-4">
                         <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What You Will Get Here</h4>
                             </li>
                             <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                     style="color:#c89a6c"></i>
+                                <span>Congestion Analytics, Peak Detection, and temporal Trends</span>
                             </li>
                             <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                     style="color:#c89a6c"></i>
                         </h4>
                         <p class="text-xs leading-relaxed" style="color:#a89f97">
                             UrbanFlow delivers an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results
+                            may vary slightly across runs due to frame-by-frame inference variability.
                         </p>
                         <p class="text-xs leading-relaxed" style="color:#a89f97">
                             For research or planning use, process the same footage 2–3 times
                             and average the results for improved reliability.
                         </p>
                     </div>
+                    <div class="space-y-4">
+                        <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What's Next (Roadmap)</h4>
+                        <ul class="text-xs space-y-3 pl-1">
+                            <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
+                                    style="color:#c89a6c"></i>
+                                <span><strong>RTSP Streaming Integration:</strong> Live CCTV stream processing directly from your network.</span>
+                            </li>
+                            <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
+                                    style="color:#c89a6c"></i>
+                                <span><strong>ANPR / ALPR:</strong> Automated Number Plate Recognition for localized enforcement.</span>
+                            </li>
+                            <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
+                                    style="color:#c89a6c"></i>
+                                <span><strong>Helmet Detection:</strong> Real-time compliance tracking for two-wheelers.</span>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
                 <div class="text-center pt-6 border-t" style="border-color:#1a1a1a">
         </div>
         <div id="tab-overview" class="hidden grid grid-cols-12 gap-4 flex-1 min-h-0 overflow-hidden"
             style="position:relative">
                 <div class="flex-1 w-full relative min-h-[220px]">
                     <canvas id="flowChart"></canvas>
                 </div>
             </div>
         </div>
+        <!-- TAB: Results (Merged Artifacts + Run) -->
+        <div id="tab-results" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div id="reports-pending-message"
                 class="mb-4 text-center p-8 flex flex-col items-center justify-center gap-4"
                 style="min-height: 60vh;">
                 <i class="fa-solid fa-hourglass-half text-5xl mb-2" style="color:#3a3230;"></i>
                 <div style="color:#c89a6c; font-size:13px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;">
+                    Results Pending
                 </div>
                 <span id="reports-pending-text"
                     class="text-xs font-medium tracking-wide uppercase leading-relaxed text-center"
                 </span>
             </div>
+            <div id="results-content-wrap" class="hidden space-y-8 w-full pb-6">
+                <!-- Download Button -->
+                <div class="flex justify-center lg:hidden">
+                    <button onclick="downloadArtifacts()" id="btn-download-bundle" class="w-fit px-8 py-3 font-bold text-xs rounded-full transition flex items-center justify-center gap-2 shadow-lg active:scale-95 hover:scale-105"
+                        style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)">
+                        <i class="fa-solid fa-download"></i> Download All Artifacts
+                    </button>
                 </div>
+                <!-- Section: Performance Insights (formerly Run tab) -->
+                <div class="space-y-6">
+                    <!-- PCU + Report Grid (unified) -->
+                    <div id="post-process-cards" class="mb-4">
+                        <div class="bg-black rounded-xl p-6 border border-neutral-800 shadow-sm flex flex-col min-h-[140px]">
+                            <div class="flex justify-between items-center mb-4 relative">
+                                <h3 class="font-bold text-white text-sm flex items-center">PCU Analysis
+                                    <span class="info-wrap"><span class="info-btn" style="background:#222;color:#888"><i
+                                                class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Passenger Car Units (IRC:106-1990). Converts heterogeneous Indian
+                                            traffic into standardized units for road capacity analysis.</span></span>
+                                </h3>
+                            </div>
+                            <div class="flex-1 flex items-center justify-center" id="pcu-stats-card">
+                                <div class="text-center text-slate-600 text-xs">Available after processing</div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Report Grid -->
+                    <div id="reports-grid" class="grid grid-cols-1 lg:grid-cols-2 gap-4"></div>
+                    <!-- Collapsible Technical Telemetry (formerly Run tab) -->
+                    <div class="mt-12 pt-12 border-t border-neutral-900">
+                        <details class="group">
+                            <summary class="flex items-center justify-between cursor-pointer list-none text-slate-500 hover:text-slate-300 transition">
+                                <div class="flex items-center gap-3">
+                                    <i class="fa-solid fa-microchip text-xs"></i>
+                                    <span class="text-sm font-bold uppercase tracking-widest">Technical Runtime Telemetry</span>
+                                </div>
+                                <i class="fa-solid fa-chevron-down text-[10px] group-open:rotate-180 transition-transform"></i>
+                            </summary>
+                            <div class="mt-8 space-y-8 animate-in fade-in slide-in-from-top-4 duration-500">
+                                <!-- Process Analytics -->
+                                <div id="run-results-card" class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm overflow-hidden flex flex-col">
+                                    <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
+                                        <h3 class="font-bold text-sm text-white">Execution Telemetry</h3>
+                                    </div>
+                                    <div class="p-8">
+                                        <div id="run-results-content" class="grid grid-cols-3 gap-8"></div>
+                                    </div>
+                                </div>
+                                <!-- Technical Context Row -->
+                                <div class="grid grid-cols-2 gap-6">
+                                    <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden">
+                                        <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
+                                            <h3 class="font-bold text-sm text-white">Stream Source Profile</h3>
+                                        </div>
+                                        <div class="p-6 space-y-4 text-xs text-slate-400" id="panel-video"></div>
+                                    </div>
+                                    <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden">
+                                        <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
+                                            <h3 class="font-bold text-sm text-white">System Resource Utilization</h3>
+                                        </div>
+                                        <div class="p-6 space-y-4 text-xs text-slate-400" id="panel-perf"></div>
+                                    </div>
+                                    <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden">
+                                        <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
+                                            <h3 class="font-bold text-sm text-white">Model Architecture &amp; Logic</h3>
+                                        </div>
+                                        <div class="p-6 space-y-4 text-xs text-slate-400" id="panel-model"></div>
+                                    </div>
+                                    <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden">
+                                        <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
+                                            <h3 class="font-bold text-sm text-white">Inference Parameters</h3>
+                                        </div>
+                                        <div class="p-6 space-y-4 text-xs text-slate-400" id="panel-infer"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </details>
+                    </div>
+                </div>
             </div>
         </div>
         <div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div class="grid grid-cols-2 gap-6 w-full">
                 <!-- Processing Parameters -->
+                <div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col self-start"
                     style="border-color:#2a2a2a">
                     <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
                         <h3 class="font-bold text-white text-sm flex items-center">Inference Configuration Profile
                         <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
                             Auto-configured pipeline parameters</p>
                     </div>
+                    <div class="px-6 py-2" id="settings-params">
                         <div class="s-row" data-param="imgsz">
                             <div>
                                 <div class="text-xs font-semibold text-slate-300 flex items-center">Image Size
                                     onclick="stepParam('stride',1)">&#8250;</button></div>
                         </div>
                     </div>
                 </div>
                                 <div class="toggle-thumb"></div>
                             </div>
                         </div>
                     </div>
                 </div>
                     </button>
                 </div>
+                <!-- Home Button (visible only after processing completes) -->
                 <div class="col-span-3 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)">
+                        <span><i class="fa-solid fa-house mr-2 text-sm"></i> Home</span>
                     </button>
                 </div>
             </div>
                                     </button>
                                     <div id="h3-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
                                         style="color:#777">
+                                        To analyze a new video, go to 'Settings' and click 'Home'.
+                                        This resets your current session and returns you
                                         to the Home screen.
                                     </div>
                                 </div>
             </div>
         </div>
+        <!-- TAB: Profile -->
+        <div id="tab-profile" class="hidden flex-1 min-h-0 overflow-y-auto">
+            <!-- Single unified card — full width -->
+            <div class="bg-neutral-950 rounded-2xl border border-neutral-900 overflow-hidden">
+                <!-- Identity Section -->
+                <div class="p-6 lg:p-8 flex flex-col items-center lg:flex-row lg:items-start gap-6 border-b border-neutral-900">
+                    <div class="relative group flex-shrink-0">
+                        <img id="profile-pfp-large" src="" alt="" class="w-20 h-20 lg:w-24 lg:h-24 rounded-full border-2 border-neutral-800 shadow-2xl object-cover">
+                        <div class="absolute inset-0 rounded-full bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-[10px] font-bold text-white uppercase text-center p-2">Managed by Google</div>
+                    </div>
+                    <div class="flex-1 w-full text-center lg:text-left space-y-4">
+                        <div>
+                            <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500 block mb-1">Email Address</label>
+                            <div id="profile-email" class="text-sm font-medium text-slate-300"></div>
+                        </div>
+                        <div>
+                            <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500 block mb-1">Display Name</label>
+                            <div class="flex items-center gap-3 justify-center lg:justify-start">
+                                <input type="text" id="profile-username-input" class="bg-neutral-900 border border-neutral-800 rounded-lg px-4 py-2 text-sm text-white focus:outline-none focus:border-neutral-600 transition w-full max-w-[240px]">
+                                <button onclick="saveProfileUsername()" id="btn-save-username" class="px-4 py-2 bg-neutral-800 hover:bg-neutral-700 text-[10px] font-bold uppercase tracking-widest rounded-lg text-slate-300 transition">Save</button>
+                            </div>
+                            <p class="text-[9px] text-slate-600 mt-1">This name will be used on exported reports.</p>
+                        </div>
+                    </div>
                 </div>
+                <!-- Stats Row -->
+                <div class="grid grid-cols-2 gap-0 border-b border-neutral-900">
+                    <div class="p-5 lg:p-6 border-r border-neutral-900">
+                        <div class="text-[9px] font-bold uppercase tracking-widest text-slate-600 mb-1">Total Runs</div>
+                        <div id="profile-total-runs" class="text-2xl font-bold text-white">0</div>
+                    </div>
+                    <div class="p-5 lg:p-6">
+                        <div class="text-[9px] font-bold uppercase tracking-widest text-slate-600 mb-1">Last Active</div>
+                        <div id="profile-last-active" class="text-sm font-bold text-slate-300">Never</div>
+                    </div>
                 </div>
+                <!-- Terms Acceptance Indicator -->
+                <div class="p-5 lg:p-6 flex items-center gap-3 border-b border-neutral-900">
+                    <i class="fa-solid fa-circle-check text-emerald-500"></i>
+                    <div>
+                        <div class="text-xs font-bold text-slate-300">Terms & Privacy Accepted</div>
+                        <div class="text-[9px] text-slate-600">You have agreed to the Privacy Policy and Terms & Conditions.</div>
+                    </div>
                 </div>
+                <!-- Sign Out -->
+                <div class="p-5 lg:p-6 flex items-center justify-between">
+                    <div>
+                        <h3 class="text-xs font-bold uppercase tracking-widest text-red-400">Account Access</h3>
+                        <p class="text-[10px] text-slate-500 mt-1">Sign out clears your local session.</p>
+                    </div>
+                    <button onclick="showLogoutConfirm()" class="px-6 py-2.5 bg-red-900/20 hover:bg-red-900/30 text-red-400 border border-red-900/30 text-[10px] font-bold uppercase tracking-widest rounded-xl transition">Sign Out</button>
                 </div>
             </div>
         </div>
+    </main>
+    <script src="js/templates.js"></script>
+    <script src="js/shared.js"></script>
+    <script src="js/auth.js"></script>
+    <script src="js/vehicles.js"></script>
     <script>
+        // Inject shared components (modals, shortcuts, nav)
+        injectLegalModals();
+        injectShortcutsModal();
+        // Auto-show keyboard shortcuts on first desktop visit
         if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
             setTimeout(function () { openAppModal('shortcutsModal'); }, 800);
         }
         <button class="mob-nav-item" id="mob-nav-overview" onclick="switchTab('overview')">
             <i class="fa-solid fa-desktop"></i>
         </button>
+        <button class="mob-nav-item" id="mob-nav-results" onclick="switchTab('results')">
             <i class="fa-solid fa-file-lines"></i>
         </button>
         <button class="mob-nav-item" id="mob-nav-settings" onclick="switchTab('settings')">
         <button class="mob-nav-item" id="mob-nav-feedback" onclick="switchTab('feedback')">
             <i class="fa-solid fa-comment-dots"></i>
         </button>
+        <button class="mob-nav-item" id="mob-nav-profile" onclick="switchTab('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>
+            </div>
+        </button>
+    </nav>
     <script>
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', () => {

requirements.txt CHANGED Viewed

@@ -10,6 +10,7 @@ websockets==12.0
 openvino>=2024.0.0
 lap>=0.5.12
 resend
 torch==2.1.0+cpu
 torchvision==0.16.0+cpu
 --extra-index-url https://download.pytorch.org/whl/cpu

 openvino>=2024.0.0
 lap>=0.5.12
 resend
+google-auth>=2.20.0
 torch==2.1.0+cpu
 torchvision==0.16.0+cpu
 --extra-index-url https://download.pytorch.org/whl/cpu