RELEASE: URBANFLOW: YOUR VISION PARTNER..

backend/engine.py

@@ -55,9 +55,7 @@ class ThreadedVideoWriter:
     def write(self, frame):
         if not self.stopped:
             try:
-                # If queue is full, we might want to wait or drop, but here we'll wait 
-                # to ensure the export video is complete and accurate.
-                self.queue.put(frame.copy())
+                self.queue.put(frame)   # no copy — frame ownership transfers to queue
             except Exception as e:
                 print(f"[BACKEND] Writer queue error: {e}")
 
@@ -240,10 +238,11 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
             "total_iters": total_iters,
             "total_frames": total,
             "active": active,
-            "congestion": congestion.copy(),
+            "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_times": flow_times.copy(),
+            "flow_count": len(flow_times),               # just the count
             "elapsed": round(elapsed, 2),
             "fps": round((frame_idx + 1) / elapsed, 2) if elapsed > 0 else 0,
         }

backend/server.py

@@ -397,7 +397,6 @@ async def ws_run(ws: WebSocket):
             "actual_fps": result["actual_fps"],
             "speed_vs_realtime": result["speed_vs_realtime"],
             "pcu": result.get("pcu", {}),
-            "speed_distribution": result.get("speed", {}).get("distribution", {}),
         }))
         await ws.close()
 
@@ -414,16 +413,19 @@ async def ws_run(ws: WebSocket):
 
 from fastapi.staticfiles import StaticFiles
 
-class NoCacheStaticFiles(StaticFiles):
+class SmartCacheStaticFiles(StaticFiles):
     def is_not_modified(self, response_headers, request_headers) -> bool:
         return False
-        
+
     async def get_response(self, path: str, scope):
         resp = await super().get_response(path, scope)
-        resp.headers["Cache-Control"] = "no-store, no-cache, must-revalidate, max-age=0"
+        if path.endswith(".html") or path in ("", "/"):
+            resp.headers["Cache-Control"] = "no-store, no-cache, must-revalidate, max-age=0"
+        else:
+            resp.headers["Cache-Control"] = "public, max-age=3600"
         return resp
 
-app.mount("/", NoCacheStaticFiles(directory=str(FRONTEND)), name="frontend")
+app.mount("/", SmartCacheStaticFiles(directory=str(FRONTEND)), name="frontend")
 
 if __name__ == "__main__":
     import uvicorn

frontend/css/initial.css

@@ -1,70 +1,476 @@
+/* =============================================
+   UrbanFlow — initial.css (Mobile-First)
+   Same design system, fully touch-friendly
+   ============================================= */
+
 :root {
-    --cocoa: #8b5e3c;
-    --cocoa-l: #c89a6c;
+    --cocoa:    #8b5e3c;
+    --cocoa-l:  #c89a6c;
     --cocoa-xl: #d4b08a;
-    --t1: #f0ece6;
-    --t2: #a89f97;
-    --border: #2a2a2a;
+    --t1:       #f0ece6;
+    --t2:       #a89f97;
+    --border:   #2a2a2a;
 }
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html {
+    scrollbar-width: none;
+}
+html::-webkit-scrollbar {
+    display: none;
+}
+
 body {
+    overflow-x: hidden;
+    width: 100%;
     font-family: 'Montserrat', sans-serif;
     background-color: #000000;
     color: var(--t1);
+    margin: 0;
+    -webkit-tap-highlight-color: transparent;
+    scrollbar-width: none; /* Firefox */
 }
+body::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Edge */
+}
+
+/* ---- Fade animation ---- */
 .fade-in {
     animation: fadeIn 0.4s ease-in-out forwards;
 }
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+    from { opacity: 0; transform: translateY(10px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ---- Feature List Animation ---- */
+@keyframes fadeSlideIn {
+    from { opacity: 0; transform: translateX(-8px); }
+    to   { opacity: 1; transform: translateX(0); }
 }
-/* Executive Overrides */
+.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 {
     background-color: #0a0a0a !important;
-    border: 2px solid var(--cocoa) !important;
+    border: none !important;
+    position: relative;
+    transition: box-shadow 0.3s ease;
+    z-index: 0;
+}
+
+/* Shimmer border — only on the 2px ring, not inside the card */
+.traffic-dynamics-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 2px;
+    background: linear-gradient(
+        90deg,
+        var(--cocoa) 0%,
+        var(--cocoa-l) 30%,
+        rgba(255,255,255,0.7) 50%,
+        var(--cocoa-l) 70%,
+        var(--cocoa) 100%
+    );
+    background-size: 200% 100%;
+    animation: borderShimmer 2.4s linear infinite;
+    -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+}
+@keyframes borderShimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+.traffic-dynamics-card:hover::before {
+    animation-duration: 1.2s;
 }
 .traffic-dynamics-card:hover {
-    border-color: var(--cocoa-l) !important;
+    box-shadow: 0 0 32px 0 rgba(200,154,108,0.18);
 }
+
+
+/* ---- Dropzone ---- */
 #dropzone {
     transition: all 0.2s ease;
     border-color: #2a2a2a;
+    /* finger-friendly minimum height */
+    min-height: 160px;
 }
-#dropzone:hover {
+#dropzone:hover,
+#dropzone:active,
+#dropzone.dz-active {
     border-color: var(--cocoa-l) !important;
-    background-color: #0a0a0a !important;
+    background-color: #0d0d0d !important;
 }
+
+/* ---- Core badge ---- */
 .core-badge {
     background-color: var(--cocoa) !important;
     color: var(--t1) !important;
 }
-/* Onboarding */
+
+/* ---- Onboarding ---- */
 .onboard-overlay {
     position: fixed; inset: 0; z-index: 9999;
     background: rgba(0,0,0,0.92);
     display: flex; align-items: center; justify-content: center;
+    padding: 16px;
 }
 .onboard-card {
-    background: #0a0a0a; border: 1px solid #2a2a2a;
-    border-radius: 16px; max-width: 440px; width: 90%;
-    padding: 40px 32px; text-align: center;
+    background: #0a0a0a;
+    border: 1px solid #2a2a2a;
+    border-radius: 16px;
+    max-width: 440px;
+    width: 100%;
+    padding: 32px 24px;
+    text-align: center;
 }
 .onboard-step { display: none; }
 .onboard-step.active { display: block; }
-.onboard-dots { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
+.onboard-dots {
+    display: flex; gap: 6px;
+    justify-content: center;
+    margin-top: 20px;
+}
 .onboard-dot {
-    width: 8px; height: 8px; border-radius: 50%;
-    background: #333; transition: background 0.2s;
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: #333;
+    transition: background 0.2s;
 }
 .onboard-dot.active { background: var(--cocoa-l); }
-/* Mobile responsive */
-@media (max-width: 768px) {
-    main { grid-template-columns: 1fr !important; padding: 16px !important; }
-    h1 { font-size: 2.2rem !important; }
-}
+
+/* Onboarding buttons — large touch targets */
+.onboard-card .flex.gap-3 button {
+    min-height: 44px;
+    padding: 10px 20px;
+    font-size: 11px;
+}
+
+/* Onboarding Icon Pulse */
+@keyframes iconPulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.12); }
+    100% { transform: scale(1); }
+}
+.pulse-once {
+    animation: iconPulse 0.35s ease;
+}
+
+/* ---- Canvas container — touch hint ---- */
+#drawing-canvas {
+    touch-action: none; /* prevents scroll while drawing */
+}
+
+/* ---- Upload progress ---- */
+#upload-progress-container {
+    padding: 0 4px;
+}
+#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%); }
+}
+
+/* =============================================
+   DESKTOP (≥1024px) — original layout
+   ============================================= */
+@media (min-width: 1024px) {
+    header { margin-top: 4rem; }
+
+    main {
+        display: grid !important;
+        grid-template-columns: repeat(12, 1fr) !important;
+        gap: 5rem !important;
+        padding: 2rem 2.5rem !important;
+        align-items: center;
+        min-height: 70vh !important;
+    }
+
+    /* Stable card on desktop */
+    main > div:last-child {
+        height: 520px !important;
+        overflow: hidden !important;
+        margin-bottom: 0 !important;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    /* Steps scroll internally */
+    #step-modules, #step-upload, #step-draw {
+        overflow-y: auto !important;
+        height: auto !important;
+        max-height: 100% !important;
+        padding-right: 8px;
+    }
+
+    /* Clamped font size to avoid overflow */
+    .hero-title { font-size: clamp(3rem, 4.5vw, 4.5rem) !important; line-height: 1.1 !important; }
+
+    #dropzone { min-height: 200px; }
+}
+
+/* =============================================
+   TABLET (640px – 1023px)
+   ============================================= */
+@media (min-width: 640px) and (max-width: 1023px) {
+    header { margin-top: 2rem; }
+    header img { height: 8rem !important; }
+
+    main {
+        display: flex !important;
+        flex-direction: column !important;
+        padding: 1.5rem !important;
+        gap: 2rem !important;
+    }
+
+    .hero-title { font-size: 2.8rem !important; }
+
+    /* Hero text section — centered on tablet */
+    main > div:first-child {
+        text-align: center;
+        padding-bottom: 0 !important;
+    }
+
+    main > div:first-child ul {
+        display: inline-block;
+        text-align: left;
+    }
+
+    /* Step card — full width */
+    main > div:last-child {
+        max-width: 100% !important;
+        width: 100% !important;
+    }
+
+    #dropzone { min-height: 180px; }
+}
+
+/* =============================================
+   MOBILE (< 640px) — redesigned mobile layout
+   ============================================= */
+@media (max-width: 639px) {
+
+    /* ---- Body: single-column scroll ---- */
+    body {
+        overflow-y: auto !important;
+        overflow-x: hidden !important;
+    }
+
+    /* ---- Header — compact logo ---- */
+    header {
+        margin-top: 2rem !important;
+        margin-bottom: 0 !important;
+        padding: 0 20px;
+    }
+    header img {
+        height: 7rem !important;
+    }
+
+    /* ---- Main — stacked column ---- */
+    main {
+        display: flex !important;
+        flex-direction: column !important;
+        padding: 20px 16px 8px !important;
+        gap: 20px !important;
+        max-width: 100% !important;
+    }
+
+    /* ---- Hero text: SHOW on mobile (compact) ---- */
+    .hero-text-section {
+        display: flex !important;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding-bottom: 0 !important;
+        order: 1;
+    }
+
+    /* Mobile hero title styling */
+    .hero-title {
+        font-size: 2.8rem !important;
+        line-height: 1.15 !important;
+        margin-top: 10px !important;
+        text-align: center !important;
+    }
+
+    /* DEMO badge + tagline row */
+    .hero-text-section > p:first-of-type {
+        font-size: 11.5px !important;
+        letter-spacing: 0.18em !important;
+        margin-bottom: 14px !important;
+        justify-content: center;
+    }
+
+    /* Feature bullets */
+    .hero-text-section ul {
+        display: flex !important;
+        flex-direction: column !important;
+        gap: 4px !important;
+        width: 100%;
+        text-align: left;
+    }
+
+    .hero-text-section ul li {
+        display: flex !important;
+        align-items: flex-start !important;
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 1.6 !important;
+        padding: 5px 0;
+        color: #a89f97 !important;
+    }
+    
+    .hero-text-section ul li i {
+        font-size: 14px !important;
+        margin-right: 10px !important;
+        margin-top: 2px;
+        flex-shrink: 0;
+    }
+
+    /* ---- Step card: full width, right below bullets ---- */
+    .step-card-section {
+        max-width: 100% !important;
+        width: 100% !important;
+        min-height: unset !important;
+        height: auto !important;
+        margin: 0 !important;
+        order: 2;
+    }
+
+    /* The fixed-height container that holds all steps */
+    main > div:last-child {
+        height: auto !important;
+        min-height: unset !important;
+    }
+
+    /* ---- Step headings ---- */
+    #step-modules h2,
+    #step-upload h2,
+    #step-draw h2 {
+        font-size: 1.4rem !important;
+        margin-bottom: 6px !important;
+    }
+
+    #step-modules p,
+    #step-upload p {
+        font-size: 11px !important;
+        margin-bottom: 20px !important;
+    }
+
+    /* ---- Traffic Dynamics card ---- */
+    .traffic-dynamics-card {
+        padding: 24px 20px !important;
+        border-radius: 1.5rem !important;
+    }
+
+    /* ---- Dropzone — warm glow tap target ---- */
+    #dropzone {
+        padding: 2rem 1.25rem !important;
+        min-height: 150px;
+        border-radius: 1.25rem !important;
+        border-color: #2a2a2a !important;
+    }
+
+    #dropzone span:first-of-type {
+        font-size: 0.95rem !important;
+    }
+
+    /* ---- Canvas wrapper ---- */
+    .relative.w-full.aspect-video {
+        aspect-ratio: 4/3 !important;
+        border-radius: 1rem !important;
+        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;
+    }
+
+    /* ---- Footer — padding only on mobile, layout handled by Tailwind ---- */
+    footer {
+        padding: 14px 20px 24px !important;
+    }
+
+    /* ---- Onboarding card ---- */
+    .onboard-card {
+        padding: 28px 20px !important;
+        border-radius: 18px !important;
+    }
+    .onboard-card h3 {
+        font-size: 1rem !important;
+    }
+    .onboard-card p {
+        font-size: 11px !important;
+    }
+}
+
+
+/* =============================================
+   TOUCH: remove drag-related cursor on mobile
+   ============================================= */
+@media (hover: none) and (pointer: coarse) {
+    #dropzone {
+        cursor: pointer;
+    }
+    #dropzone:hover {
+        /* no hover state on touch — only active */
+        border-color: #2a2a2a !important;
+        background-color: transparent !important;
+    }
+    #dropzone:active,
+    #dropzone.dz-active {
+        border-color: var(--cocoa-l) !important;
+        background-color: #0d0d0d !important;
+    }
+
+    /* Bigger touch targets for all buttons */
+    button {
+        min-height: 44px;
+    }
+
+    /* Canvas cursor for drawing */
+    #drawing-canvas {
+        cursor: crosshair;
+    }
+}

frontend/css/vehicles.css

@@ -1,450 +1,1389 @@
-
-        :root {
-            --cocoa: #8b5e3c;
-            --cocoa-l: #c89a6c;
-            --cocoa-xl: #d4b08a;
-        }
-
-        body {
-            font-family: 'Montserrat', sans-serif;
-            background-color: #000000;
-            color: #f0ece6;
-        }
-
-        .mono-font {
-            font-family: 'JetBrains Mono', monospace;
-        }
-
-        ::-webkit-scrollbar {
-            width: 4px;
-            height: 4px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: #000000;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: #222222;
-            border-radius: 4px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: #333333;
-        }
-
-        .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: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: #444444 !important;
-            color: #ffffff !important;
-            font-size: 7px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .info-btn:hover {
-            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;
-        }
-
-        /* 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;
-        }
-
-        /* Controls */
-        .toggle-track {
-            width: 32px;
-            height: 18px;
-            border-radius: 9px;
-            background: #222222;
-            position: relative;
-            cursor: pointer;
-        }
-
-        .toggle-track.active {
-            background: var(--cocoa-l);
-        }
-
-        .toggle-thumb {
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: #555555;
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            transition: all 0.2s ease;
-        }
-
-        .toggle-track.active .toggle-thumb {
-            transform: translateX(14px);
-            background: #000000;
-        }
-
-        .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;
-        }
-
-        .s-stepper {
-            display: inline-flex;
-            border: 1px solid #222222;
-            border-radius: 6px;
-            background: #111111;
-            overflow: hidden;
-        }
-
-        .s-stepper button {
-            padding: 4px 8px;
-            color: #666666;
-            font-size: 12px;
-        }
-
-        .s-stepper button:hover {
-            background: #1a1a1a;
-            color: #ffffff;
-        }
-
-        .s-stepper .s-val {
-            min-width: 40px;
-            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;
-        }
-
-        .s-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 12px 0;
-            border-bottom: 1px solid #1a1a1a;
-        }
-
-        .s-row:last-child {
-            border-bottom: none;
-        }
-
-        #proc-bar {
-            background-color: var(--cocoa-l) !important;
-        }
-
-        #proc-label {
-            color: #ffffff !important;
-        }
-
-        .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 {
-            pointer-events: none !important;
-            opacity: 0.5 !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: 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;
-        }
-
-        .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 {
-            height: 0;
-            opacity: 0;
-            overflow: hidden;
-            margin-top: 0;
-            padding-top: 0;
-            border-top: none;
-        }
-
-        /* Toast Notifications */
-        #toast-container {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 10000;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            pointer-events: none;
-        }
-        .toast {
-            background: #111;
-            border: 1px solid #2a2a2a;
-            color: #f0ece6;
-            font-size: 11px;
-            font-weight: 600;
-            padding: 10px 18px;
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            pointer-events: auto;
-            animation: toastIn 0.3s ease-out;
-            max-width: 320px;
-        }
-        .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: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
-        @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } }
-
-        /* Stats Empty State */
-        .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;
-        }
-
-        /* Mobile Responsive */
-        @media (max-width: 1024px) {
-            aside.w-60 { display: none; }
-            .mobile-nav { display: flex !important; }
-            #tab-overview { grid-template-columns: repeat(1, 1fr) !important; }
-            #tab-overview > div { grid-column: span 1 !important; }
-        }
-        @media (max-width: 768px) {
-            .grid-cols-3 { grid-template-columns: 1fr !important; }
-            .grid-cols-2 { grid-template-columns: 1fr !important; }
-            main { padding: 8px !important; }
-        }
-
-        /* 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: 8px 12px;
-            width: 100%;
-            font-family: 'Inter', sans-serif;
-        }
-        .fb-select:focus { outline: none; border-color: var(--cocoa-l); }
-        .fb-stars { display: flex; gap: 6px; }
-        .fb-star {
-            font-size: 22px;
-            color: #333;
-            cursor: pointer;
-            transition: color 0.15s;
-        }
-        .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: 12px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            text-align: center;
-            text-transform: uppercase;
-            tracking-widest: 0.05em;
-        }
-        .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: 10px 4px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .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);
-        }
-    
+/* =============================================
+   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;
+        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;
+    }
+
+    /* The annotated video row overrides — it is flex-col on desktop; force flex-row on mobile */
+    .s-row[data-param="annotated"] {
+        flex-direction: column !important;
+        align-items: stretch !important;
+    }
+
+    .s-row[data-param="annotated"]>.flex {
+        width: 100% !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;
+            align-items: center !important;
+            justify-content: space-between !important;
+            /* align toggles on right for discipline */
+            gap: 12px !important;
+            padding: 10px 16px !important;
+            width: 100% !important;
+            box-sizing: border-box !important;
+        }
+
+        .s-row[data-param="annotated"] {
+            flex-direction: column !important;
+            align-items: stretch !important;
+            padding: 12px 16px !important;
+            /* matches normal s-row padding */
+        }
+
+        .s-row:not([data-param="annotated"]) {
+            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;
+    }
+}
+

frontend/initial.html

@@ -16,16 +16,22 @@
         }
     </script>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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="icon" type="image/png" sizes="512x512" 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" sizes="512x512" href="assets/shurkien_b.png">
     <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">
+<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">
@@ -33,28 +39,31 @@
 
     <main class="flex-1 w-full max-w-[90rem] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 px-10 py-6 items-center z-10">
 
-        <div class="lg:col-span-7 flex flex-col justify-center xl:pl-10 pb-10 lg:pb-0">
-            <h1 class="text-5xl xl:text-[4.5rem] font-extrabold mb-4 leading-[1.1] tracking-tight"
-                style="background:linear-gradient(110deg,#f0ece6 0%,#f0ece6 35%,#c89a6c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
-                Automated <br>Vision Intelligence
+        <div class="hero-text-section lg:col-span-7 flex flex-col justify-center pb-6 lg:pb-0">
+            <h1 class="hero-title text-center sm:text-left font-extrabold mb-6 sm:mb-4 tracking-tight"
+                style="background:linear-gradient(135deg,#f0ece6 0%,#f0ece6 35%,#d4b08a 60%,#c89a6c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
+                <span class="block sm:inline">Automated</span>
+                <br class="hidden sm:block">
+                <span class="block sm:inline">Vision</span>
+                <span class="block sm:inline">Intelligence</span>
             </h1>
-            <p class="font-bold mb-8 text-sm uppercase tracking-[0.2em] flex items-center" style="color:#a89f97">
+            <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">DEMO</span>
                 Cloud-Native 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-5 text-xl" style="color:#c89a6c"></i> No new hardware &mdash; works with your existing cameras</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Granular vehicle counts across 14 classes</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Directional flow &amp; congestion insights in minutes</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Downloadable reports ready for planning &amp; compliance</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Built for Indian roads &mdash; tested on real field conditions</li>
+                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> No new hardware &mdash; works with your existing cameras</li>
+                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Granular vehicle counts across 14 classes</li>
+                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Directional flow &amp; congestion insights in minutes</li>
+                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Downloadable reports ready for planning &amp; compliance</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 &mdash; tested on real field conditions</li>
             </ul>
         </div>
 
-        <div class="lg:col-span-5 flex flex-col justify-center w-full max-w-[32rem] mx-auto min-h-[450px] mb-12 lg:mb-0">
+        <div class="step-card-section lg:col-span-5 flex flex-col justify-center w-full max-w-[32rem] mx-auto h-auto md:h-[480px] lg:h-[520px] mb-12 lg:mb-0">
 
             <!-- STEP: Modules -->
-            <div id="step-modules" class="w-full flex flex-col fade-in">
+            <div id="step-modules" class="w-full flex flex-col fade-in overflow-y-auto">
                 <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">Select an analytical module to continue.</p>
                 <div class="flex justify-center w-full">
@@ -70,16 +79,16 @@
             </div>
 
             <!-- STEP: Upload -->
-            <div id="step-upload" class="hidden w-full flex flex-col fade-in">
+            <div id="step-upload" class="hidden w-full flex flex-col fade-in overflow-y-auto">
                 <button onclick="showStep('modules')"
-                    class="text-neutral-500 hover:text-white transition flex items-center text-xs font-bold uppercase tracking-widest mb-6 w-fit">
+                    class="text-[#a89f97] hover:text-white hover:underline transition flex items-center text-xs font-bold uppercase tracking-widest mb-6 w-fit">
                     <i class="fa-solid fa-arrow-left mr-2"></i> Back
                 </button>
                 <h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">Source Media</h2>
                 <p class="text-[13px] font-medium mb-8 text-center" style="color:#a89f97">Submit camera footage to begin traffic analysis.</p>
                 <input id="file-input" type="file" accept="video/*" class="hidden">
                 <div id="dropzone" onclick="document.getElementById('file-input').click()"
-                    class="border border-dashed border-neutral-700 rounded-[2rem] p-12 flex flex-col items-center justify-center cursor-pointer transition-all duration-300 group">
+                    class="border border-dashed border-neutral-700 rounded-[2rem] p-8 md:p-12 flex flex-col items-center justify-center cursor-pointer transition-all duration-300 group">
                     <i class="fa-solid fa-arrow-up-from-bracket text-4xl mb-5 block mx-auto transition" style="color:#a89f97"></i>
                     <span class="font-semibold text-lg mb-2 text-center block" style="color:#f0ece6">Drop or select a video file</span>
                     <span class="text-[10px] font-bold uppercase tracking-widest text-center block" style="color:#a89f97">Any standard video format accepted</span>
@@ -93,10 +102,10 @@
                         <div id="upload-bar" class="h-full w-0 transition-all duration-75 ease-linear rounded-full" style="background:#c89a6c"></div>
                     </div>
                 </div>
-            </div> 
+            </div>
 
             <!-- STEP: Draw -->
-            <div id="step-draw" class="hidden w-full flex flex-col fade-in">
+            <div id="step-draw" class="hidden w-full flex flex-col fade-in overflow-y-auto">
                 <h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">Spatial Boundary</h2>
                 <p class="text-[11px] font-bold uppercase tracking-widest mb-6 text-center" style="color:#a89f97">Mark two points to define the vehicle counting threshold</p>
                 <div class="relative w-full aspect-video bg-neutral-950 rounded-3xl overflow-hidden cursor-crosshair mb-6">
@@ -115,7 +124,7 @@
                         Continue &nbsp;&rarr;
                     </button>
                     <button onclick="resetCanvas()"
-                        class="text-[10px] font-bold uppercase tracking-widest text-slate-500 hover:text-white transition"
+                        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 Boundary</button>
                 </div>
             </div>
@@ -123,16 +132,32 @@
         </div>
     </main>
 
-    <footer class="w-full max-w-[90rem] mx-auto px-10 py-8 mt-auto grid grid-cols-1 md:grid-cols-3 gap-4 items-center text-[11px] font-bold uppercase tracking-[0.2em] z-10" style="color:#777">
-        <div class="text-center md: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 & Conditions</button>
+    <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>
-        <div class="text-center md:text-right">
-            &copy; 2026 UrbanFlow. All rights reserved.
+
+        <!-- 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>
@@ -161,6 +186,7 @@
             <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 a production service.</li>
+                <li>UrbanFlow provides an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results may vary slightly across runs due to the nature of real-time frame-by-frame inference.</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>
@@ -199,7 +225,8 @@
                 <li>Misrepresent demo outputs as certified or regulatory-grade traffic data.</li>
             </ul>
             <p style="color:#a89f97;font-size:11px;text-align:left">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>
+                UrbanFlow provides an estimated accuracy of ±5–8% on dense mixed-traffic footage. For research or planning 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">Questions: <strong
                     style="color:#c89a6c">support.urbanflow365@gmail.com</strong></p>
         </div>
@@ -239,5 +266,12 @@
         </div>
     </div>
 
+    <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('./sw.js');
+            });
+        }
+    </script>
 </body>
 </html>

frontend/js/initial.js

@@ -1,6 +1,12 @@
-let videoId = null;
+// =============================================
+// UrbanFlow — initial.js (Mobile-First)
+// Added: touch events, mobile upload UX
+// =============================================
+
+let videoId  = null;
 let runConfig = {};
 
+// ---- Step navigation ----
 function showStep(name) {
     ['modules', 'upload', 'draw'].forEach(s => {
         const el = document.getElementById('step-' + s);
@@ -20,7 +26,8 @@ function showStep(name) {
     if (name === 'draw') loadFirstFrame();
 }
 
-const dropzone = document.getElementById('dropzone');
+// ---- File input / dropzone ----
+const dropzone  = document.getElementById('dropzone');
 const fileInput = document.getElementById('file-input');
 
 if (fileInput) {
@@ -30,34 +37,54 @@ if (fileInput) {
 }
 
 if (dropzone) {
+    // Desktop drag-and-drop
     dropzone.addEventListener('dragover', e => {
         e.preventDefault();
-        dropzone.classList.add('border-white', 'bg-neutral-950');
+        dropzone.classList.add('dz-active');
     });
     dropzone.addEventListener('dragleave', () => {
-        dropzone.classList.remove('border-white', 'bg-neutral-950');
+        dropzone.classList.remove('dz-active');
     });
     dropzone.addEventListener('drop', e => {
         e.preventDefault();
-        dropzone.classList.remove('border-white', 'bg-neutral-950');
+        dropzone.classList.remove('dz-active');
         if (e.dataTransfer.files.length) uploadFile(e.dataTransfer.files[0]);
     });
 }
 
+// ---- Upload ----
 let currentXHR = null;
 
 function uploadFile(file) {
     if (currentXHR) currentXHR.abort();
 
     const dropzoneEl = document.getElementById('dropzone');
-    const prog     = document.getElementById('upload-progress-container');
-    const bar      = document.getElementById('upload-bar');
-    const pct      = document.getElementById('upload-percentage');
-    const txt      = document.getElementById('upload-text');
+    const prog       = document.getElementById('upload-progress-container');
+    const bar        = document.getElementById('upload-bar');
+    const pct        = document.getElementById('upload-percentage');
+    const txt        = document.getElementById('upload-text');
 
     if (dropzoneEl) dropzoneEl.classList.add('hidden');
     if (prog)       prog.classList.remove('hidden');
 
+    // ---- Simulated progress (proxy-buffer-safe) ----
+    // Estimate upload duration: ~1 MB/s conservative, capped between 3s and 60s
+    const fileMB       = file.size / (1024 * 1024);
+    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;
+
+    let simPct = 0;
+    let simInterval = setInterval(() => {
+        if (simPct < targetPct) {
+            simPct = Math.min(simPct + stepPerTick, targetPct);
+            bar.style.width = simPct.toFixed(1) + '%';
+            pct.innerText   = Math.floor(simPct) + '%';
+        }
+    }, tickMs);
+
     const form = new FormData();
     form.append('file', file);
 
@@ -65,54 +92,68 @@ function uploadFile(file) {
     currentXHR = xhr;
     xhr.open('POST', 'upload');
 
+    // Real progress override — fires if proxy reports actual bytes (rare but handle it)
     xhr.upload.onprogress = e => {
         if (e.lengthComputable) {
-            const p = Math.round(e.loaded / e.total * 100);
-            bar.style.width = p + '%';
-            pct.innerText = p + '%';
+            const realPct = Math.round(e.loaded / e.total * 100);
+            // Only override simulation if real progress is AHEAD of it
+            if (realPct > simPct) {
+                simPct = realPct;
+                bar.style.width = simPct + '%';
+                pct.innerText   = simPct + '%';
+            }
         }
     };
 
     xhr.onerror = () => {
+        clearInterval(simInterval);
         txt.innerText = 'Error: Network failure';
         txt.classList.add('text-red-500');
-        fileInput.value = '';
+        if (fileInput) fileInput.value = '';
     };
 
     xhr.onload = () => {
+        clearInterval(simInterval);
+
         if (xhr.status !== 200) {
             txt.innerText = 'Error: ' + xhr.status;
             txt.classList.add('text-red-500');
-            fileInput.value = '';
+            if (fileInput) fileInput.value = '';
             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;
         txt.innerText = 'Extracting Metadata...';
-        bar.style.width = '100%';
-        pct.innerText = '100%';
 
         fetch('config/' + videoId)
             .then(r => r.json())
             .then(cfg => {
-                runConfig = cfg;
+                runConfig      = cfg;
                 runConfig.conf = 0.12;
                 runConfig.iou  = 0.60;
-                txt.innerText = 'Initialization Complete';
-                fileInput.value = '';
+                txt.innerText  = 'Initialization Complete';
+                if (fileInput) fileInput.value = '';
                 setTimeout(() => showStep('draw'), 800);
             })
             .catch(() => {
                 txt.innerText = 'Metadata Failed';
                 txt.classList.add('text-red-500');
-                fileInput.value = '';
+                if (fileInput) fileInput.value = '';
             });
     };
 
     xhr.send(form);
 }
 
-// Draw Canvas
+// =============================================
+// CANVAS — Spatial Boundary Drawing
+// Supports both mouse (desktop) and touch (mobile)
+// =============================================
 const canvas = document.getElementById('drawing-canvas');
 const ctx    = canvas ? canvas.getContext('2d') : null;
 let points   = [];
@@ -125,7 +166,9 @@ function loadFirstFrame() {
     img.onerror = () => {
         console.error('Failed to load first frame');
         if (placeholder) {
-            placeholder.innerHTML = '<i class="fa-solid fa-circle-exclamation text-4xl mb-3 opacity-50" style="color:#c89a6c"></i><span class="font-bold text-[10px] uppercase tracking-widest opacity-50 block mt-2">Frame Load Error</span>';
+            placeholder.innerHTML =
+                '<i class="fa-solid fa-circle-exclamation text-4xl mb-3 opacity-50" style="color:#c89a6c"></i>' +
+                '<span class="font-bold text-[10px] uppercase tracking-widest opacity-50 block mt-2">Frame Load Error</span>';
         }
     };
 
@@ -140,31 +183,69 @@ function loadFirstFrame() {
 }
 
 function initCanvas() {
-    if (canvas) {
-        canvas.width  = canvas.offsetWidth;
-        canvas.height = canvas.offsetHeight;
-    }
+    if (!canvas) return;
+    canvas.width  = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+    // Redraw existing points after resize
+    redrawCanvas();
 }
 
 window.addEventListener('resize', initCanvas);
 
+// ---- Coordinate helpers ----
+function getCanvasCoords(clientX, clientY) {
+    const rect = canvas.getBoundingClientRect();
+    const cx   = clientX - rect.left;
+    const cy   = clientY - rect.top;
+    const rx   = (cx / canvas.width)  * imgNatW;
+    const ry   = (cy / canvas.height) * imgNatH;
+    return { cx, cy, rx: Math.round(rx), ry: Math.round(ry) };
+}
+
+function addPoint(coords) {
+    if (points.length >= 2) return;
+    points.push(coords);
+    redrawCanvas();
+    if (points.length === 2 && canvas) {
+        canvas.style.cursor = 'default';
+    }
+}
+
+function redrawCanvas() {
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    points.forEach(p => drawDot(p.cx, p.cy));
+    if (points.length === 2) drawLine();
+}
+
+// ---- Mouse events (desktop) ----
 if (canvas) {
     canvas.addEventListener('mousedown', e => {
-        if (points.length >= 2) return;
-        const rect = canvas.getBoundingClientRect();
-        const cx   = e.clientX - rect.left;
-        const cy   = e.clientY - rect.top;
-        const rx   = (cx / canvas.width)  * imgNatW;
-        const ry   = (cy / canvas.height) * imgNatH;
-        points.push({ cx, cy, rx: Math.round(rx), ry: Math.round(ry) });
-        drawDot(cx, cy);
-        if (points.length === 2) drawLine();
+        e.preventDefault();
+        addPoint(getCanvasCoords(e.clientX, e.clientY));
     });
 }
 
+// ---- Touch events (mobile) ----
+if (canvas) {
+    canvas.addEventListener('touchstart', e => {
+        e.preventDefault(); // prevent scroll while drawing
+        if (e.touches.length === 0) return;
+        const touch = e.touches[0];
+        addPoint(getCanvasCoords(touch.clientX, touch.clientY));
+    }, { passive: false });
+
+    // touchmove: prevent page scroll when finger is on canvas
+    canvas.addEventListener('touchmove', e => {
+        e.preventDefault();
+    }, { passive: false });
+}
+
+// ---- Drawing helpers ----
 function drawDot(x, y) {
+    if (!ctx) return;
     ctx.beginPath();
-    ctx.arc(x, y, 5, 0, Math.PI * 2);
+    ctx.arc(x, y, 6, 0, Math.PI * 2); // slightly larger dot for mobile visibility
     ctx.fillStyle   = '#c89a6c';
     ctx.fill();
     ctx.strokeStyle = '#f0ece6';
@@ -173,6 +254,7 @@ function drawDot(x, y) {
 }
 
 function drawLine() {
+    if (!ctx || points.length < 2) return;
     ctx.beginPath();
     ctx.moveTo(points[0].cx, points[0].cy);
     ctx.lineTo(points[1].cx, points[1].cy);
@@ -184,6 +266,7 @@ function drawLine() {
 function resetCanvas() {
     points = [];
     if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (canvas) canvas.style.cursor = 'crosshair';
 }
 
 function startRun() {
@@ -194,26 +277,41 @@ function startRun() {
         line:     line,
         config:   runConfig
     }));
+    sessionStorage.setItem('uf_active_tab', 'settings');
     window.location.href = './';
 }
 
+// =============================================
 // Onboarding
+// =============================================
 let _obStep = 0;
 
+function triggerIconPulse() {
+    const activeStep = document.querySelector('.onboard-step.active i');
+    if (activeStep) {
+        activeStep.classList.add('pulse-once');
+        setTimeout(() => activeStep.classList.remove('pulse-once'), 400);
+    }
+}
+
 function nextOnboardStep() {
     _obStep++;
     if (_obStep >= 3) { closeOnboarding(); return; }
     document.querySelectorAll('.onboard-step').forEach((s, i) => s.classList.toggle('active', i === _obStep));
     document.querySelectorAll('.onboard-dot').forEach((d, i)  => d.classList.toggle('active', i === _obStep));
     if (_obStep === 2) document.getElementById('onboard-next').innerText = 'Get Started';
+    triggerIconPulse();
 }
 
 function closeOnboarding() {
-    document.getElementById('onboard-overlay').style.display = 'none';
+    const overlay = document.getElementById('onboard-overlay');
+    if (overlay) overlay.style.display = 'none';
 }
 
-// Show onboarding on every page load
 document.addEventListener('DOMContentLoaded', () => {
     const onboard = document.getElementById('onboard-overlay');
-    if (onboard) onboard.style.display = 'flex';
-});
+    if (onboard) {
+        onboard.style.display = 'flex';
+        triggerIconPulse();
+    }
+});

frontend/js/vehicles.js

@@ -1,5 +1,70 @@
+// =========== Custom Select Dropdowns ===========
+    function ufSelectToggle(id) {
+        const wrap     = document.getElementById(id + '-wrap') || document.getElementById(id + '-trigger')?.closest('.uf-select-wrap');
+        const trigger  = document.getElementById(id + '-trigger');
+        const dropdown = document.getElementById(id + '-dropdown');
+        const arrow    = document.getElementById(id + '-arrow');
+        if (!dropdown) return;
+
+        const isOpen = !dropdown.classList.contains('hidden');
+
+        // Close all open dropdowns first
+        document.querySelectorAll('.uf-select-dropdown').forEach(d => {
+            d.classList.add('hidden');
+            d.classList.remove('uf-select-dropdown-up');
+        });
+        document.querySelectorAll('.uf-select-arrow').forEach(a => a.classList.remove('uf-select-arrow-open'));
+
+        if (!isOpen) {
+            // Detect direction: open upward only if there's not enough space below
+            if (trigger) {
+                const rect       = trigger.getBoundingClientRect();
+                const spaceBelow = window.innerHeight - rect.bottom;
+                const spaceAbove = rect.top;
+                const dropH      = 240; // max-height of dropdown
+                if (spaceBelow < dropH && spaceAbove > spaceBelow) {
+                    dropdown.classList.add('uf-select-dropdown-up');
+                }
+            }
+            dropdown.classList.remove('hidden');
+            if (arrow) arrow.classList.add('uf-select-arrow-open');
+        }
+    }
+
+    function ufSelectPick(id, value, label) {
+        const hidden   = document.getElementById(id);
+        const labelEl  = document.getElementById(id + '-label');
+        const dropdown = document.getElementById(id + '-dropdown');
+        const arrow    = document.getElementById(id + '-arrow');
+
+        if (hidden)  hidden.value    = value;
+        if (labelEl) {
+            labelEl.textContent = label;
+            labelEl.style.color = '#ffffff'; // selected = white, placeholder was grey
+        }
+        if (dropdown) dropdown.classList.add('hidden');
+        if (arrow)    arrow.classList.remove('uf-select-arrow-open');
+
+        // Mark active option
+        if (dropdown) {
+            dropdown.querySelectorAll('.uf-select-option').forEach(opt => {
+                opt.classList.toggle('uf-select-option-active', opt.dataset.value === value);
+            });
+        }
+
+        // Fire side-effects by id
+        if (id === 'live-palette') applyPalette(value);
+    }
+
+    // Close on outside click
+    document.addEventListener('click', function(e) {
+        if (!e.target.closest('.uf-select-wrap')) {
+            document.querySelectorAll('.uf-select-dropdown').forEach(d => d.classList.add('hidden'));
+            document.querySelectorAll('.uf-select-arrow').forEach(a => a.classList.remove('uf-select-arrow-open'));
+        }
+    });
 
-        // =========== Rolling Counter ===========
+// =========== Rolling Counter ===========
         function animateValue(obj, start, end, duration) {
             let startTimestamp = null;
             const isPct = typeof end === 'string' && end.includes('%');
@@ -27,72 +92,97 @@
             window.requestAnimationFrame(step);
         }
 
-        // =========== Tooltip ===========
-        // Position and toggle tooltip visibility
-        document.addEventListener('mouseover', e => {
-            const wrap = e.target.closest('.info-wrap');
-            if (!wrap) return;
-            const tip = wrap.querySelector('.info-tip');
-            if (!tip) return;
-
-            tip.style.display = 'block';
-            const rect = wrap.getBoundingClientRect();
-            const tipH = tip.offsetHeight || 60;
-            if (rect.bottom + tipH + 10 > window.innerHeight) {
-                tip.style.top = (rect.top - tipH - 6) + 'px';
+// Close all open tooltips
+function closeAllTips() {
+    document.querySelectorAll('.info-tip').forEach(tip => {
+        tip.style.display = 'none';
+    });
+}
+
+function positionTip(tip, wrap) {
+    const rect = wrap.getBoundingClientRect();
+    const tipH = tip.offsetHeight || 60;
+    if (rect.bottom + tipH + 10 > window.innerHeight) {
+        tip.style.top = (rect.top - tipH - 6) + 'px';
+    } else {
+        tip.style.top = (rect.bottom + 6) + 'px';
+    }
+    tip.style.left = Math.min(rect.left, window.innerWidth - 260) + 'px';
+}
+
+// Desktop hover only — never fires on touch
+document.addEventListener('mouseover', e => {
+    if (window.matchMedia('(hover: none)').matches) return;
+    const wrap = e.target.closest('.info-wrap');
+    if (!wrap) return;
+    const tip = wrap.querySelector('.info-tip');
+    if (!tip) return;
+    tip.style.display = 'block';
+    positionTip(tip, wrap);
+});
+
+document.addEventListener('mouseout', e => {
+    if (window.matchMedia('(hover: none)').matches) return;
+    const wrap = e.target.closest('.info-wrap');
+    if (!wrap) return;
+    const tip = wrap.querySelector('.info-tip');
+    if (tip) tip.style.display = 'none';
+});
+
+// Tap/click toggle — works on both desktop and mobile
+document.addEventListener('click', e => {
+    const btn = e.target.closest('.info-btn');
+    if (!btn) {
+        if (!e.target.closest('.info-tip') && !e.target.closest('.info-wrap')) {
+            closeAllTips();
+        }
+        return;
+    }
+    e.stopPropagation();
+    const wrap = btn.closest('.info-wrap');
+    if (!wrap) return;
+    const tip = wrap.querySelector('.info-tip');
+    if (!tip) return;
+
+    const isVisible = tip.style.display === 'block';
+    closeAllTips();
+    if (!isVisible) {
+        tip.style.display = 'block';
+        positionTip(tip, wrap);
+    }
+});
+
+// ---- 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) {
+                nav.classList.add('nav-item-active');
+                nav.classList.remove('nav-item-inactive');
             } else {
-                tip.style.top = (rect.bottom + 6) + 'px';
+                nav.classList.remove('nav-item-active');
+                nav.classList.add('nav-item-inactive');
             }
-            tip.style.left = Math.min(rect.left, window.innerWidth - 300) + 'px';
-        });
-
-        document.addEventListener('mouseout', e => {
-            const wrap = e.target.closest('.info-wrap');
-            if (!wrap) return;
-            const tip = wrap.querySelector('.info-tip');
-            if (tip) tip.style.display = 'none';
-        });
+        }
 
-        document.addEventListener('click', e => {
-            const btn = e.target.closest('.info-btn');
-            if (!btn) return;
-            const wrap = btn.closest('.info-wrap');
-            if (!wrap) return;
-            const tip = wrap.querySelector('.info-tip');
-            if (!tip) return;
-
-            const isVisible = tip.style.display === 'block';
-            tip.style.display = isVisible ? 'none' : 'block';
-
-            if (!isVisible) {
-                const rect = wrap.getBoundingClientRect();
-                const tipH = tip.offsetHeight || 60;
-                if (rect.bottom + tipH + 10 > window.innerHeight) {
-                    tip.style.top = (rect.top - tipH - 6) + 'px';
-                } else {
-                    tip.style.top = (rect.bottom + 6) + 'px';
-                }
-                tip.style.left = Math.min(rect.left, window.innerWidth - 300) + 'px';
+        // 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');
             }
-        });
-
-        // =========== Tab switching ===========
-        function switchTab(tab) {
-            ['about', 'overview', 'run-details', 'reports', 'settings', 'help', 'feedback'].forEach(t => {
-                const el = document.getElementById('tab-' + t);
-                const nav = document.getElementById('nav-' + t);
-                if (el) el.classList.toggle('hidden', tab !== t);
-                if (nav) {
-                    if (tab === t) {
-                        nav.classList.add('nav-item-active');
-                        nav.classList.remove('nav-item-inactive');
-                    } else {
-                        nav.classList.remove('nav-item-active');
-                        nav.classList.add('nav-item-inactive');
-                    }
-                }
-            });
         }
+    });
+}
 
         // =========== Toast System ===========
         function showToast(message, type) {
@@ -244,66 +334,72 @@
             const panel = document.getElementById('insights-panel');
             panel.classList.remove('hidden');
 
-            // Speed distribution bars
-            const dist = d.speed_distribution || {};
-            const bars = document.getElementById('speed-bars');
-            const colors = { slow: '#ef4444', normal: '#eab308', fast: '#22c55e' };
-            const labels = { slow: 'Slow', normal: 'Normal', fast: 'Fast' };
-            bars.innerHTML = ['slow', 'normal', 'fast'].map(cat => {
-                const pct = dist[cat] || 0;
-                const h = Math.max(8, pct * 1.2);
-                return `<div class="flex flex-col items-center gap-1">
-                    <span class="text-[10px] font-bold" style="color:${colors[cat]}">${pct}%</span>
-                    <div style="width:36px;height:${h}px;background:${colors[cat]};border-radius:6px;transition:height 0.5s"></div>
-                    <span class="text-[9px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
-                </div>`;
-            }).join('');
-
             // Congestion insights
             const ci = document.getElementById('congestion-insights');
             const pcu = d.pcu || {};
             ci.innerHTML = [
                 infoRow('Total PCU', pcu.total_pcu || 0, 'Passenger Car Units (IRC:106-1990). Normalizes mixed traffic.'),
                 infoRow('PCU In / Out', `${pcu.pcu_in || 0} / ${pcu.pcu_out || 0}`, 'Directional PCU split.'),
-                infoRow('Speed Profile', `${dist.slow || 0}% slow · ${dist.normal || 0}% normal · ${dist.fast || 0}% fast`, 'Relative speed categories within this video.'),
             ].join('');
 
-            // ---- Also populate Stats tab cards ----
-            // Speed card in Stats
-            const speedCard = document.getElementById('speed-stats-card');
-            if (speedCard) {
-                speedCard.innerHTML = `<div class="flex gap-5 items-end justify-center w-full">
-                    ${['slow', 'normal', 'fast'].map(cat => {
-                        const pct = dist[cat] || 0;
-                        const h = Math.max(12, pct * 1.0);
-                        return `<div class="flex flex-col items-center gap-1.5 flex-1">
-                            <span class="text-lg font-black" style="color:${colors[cat]}">${pct}%</span>
-                            <div style="width:100%;max-width:48px;height:${h}px;background:${colors[cat]};border-radius:8px;transition:height 0.5s"></div>
-                            <span class="text-[10px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
-                        </div>`;
-                    }).join('')}
-                </div>`;
-            }
-
             // PCU card in Stats
             const pcuCard = document.getElementById('pcu-stats-card');
             if (pcuCard) {
-                pcuCard.innerHTML = `<div class="space-y-3 w-full">
-                    <div class="flex justify-between items-center">
-                        <span class="text-xs font-medium text-slate-500">Total PCU</span>
-                        <span class="text-2xl font-black" style="color:#8b5e3c">${pcu.total_pcu || 0}</span>
-                    </div>
-                    <div class="flex gap-3">
-                        <div class="flex-1 bg-green-50 rounded-lg p-2.5 text-center border border-green-100">
-                            <div class="text-lg font-bold text-green-700">${pcu.pcu_in || 0}</div>
-                            <div class="text-[9px] font-bold text-green-500 uppercase">PCU In</div>
+                const totalPcu = pcu.total_pcu || 0;
+
+                // Capacity label based on total PCU volume
+                let capLabel, capColor, capNote;
+                if (totalPcu < 50) {
+                    capLabel = 'Very Low Volume'; capColor = '#22c55e';
+                    capNote  = 'Minimal traffic on this segment';
+                } else if (totalPcu < 200) {
+                    capLabel = 'Low Volume';      capColor = '#22c55e';
+                    capNote  = 'Below typical urban arterial demand';
+                } else if (totalPcu < 500) {
+                    capLabel = 'Moderate Volume'; capColor = '#c89a6c';
+                    capNote  = 'Typical mixed urban traffic';
+                } else if (totalPcu < 900) {
+                    capLabel = 'High Volume';     capColor = '#f97316';
+                    capNote  = 'Approaching single-lane capacity (IRC:106)';
+                } else {
+                    capLabel = 'Near/Over Capacity'; capColor = '#ef4444';
+                    capNote  = 'Exceeds IRC single-lane urban reference (1000 PCU)';
+                }
+
+                // Dominant class from per_class breakdown
+                let domClass = '—', domFactor = '—';
+                if (pcu.per_class && Object.keys(pcu.per_class).length > 0) {
+                    const sorted = Object.entries(pcu.per_class)
+                        .sort((a, b) => b[1].pcu - a[1].pcu);
+                    domClass  = sorted[0][0];
+                    domFactor = sorted[0][1].factor;
+                }
+
+                pcuCard.innerHTML = `
+                    <div class="w-full space-y-3">
+                        <div>
+                            <span class="text-base font-black uppercase tracking-wide"
+                                  style="color:${capColor}">${capLabel}</span>
+                            <p class="text-[10px] mt-0.5" style="color:#a89f97">${capNote}</p>
+                            <p class="text-[10px] mt-1" style="color:#666">
+                                Dominant: ${domClass} · PCU factor ${domFactor}
+                            </p>
                         </div>
-                        <div class="flex-1 bg-red-50 rounded-lg p-2.5 text-center border border-red-100">
-                            <div class="text-lg font-bold text-red-700">${pcu.pcu_out || 0}</div>
-                            <div class="text-[9px] font-bold text-red-500 uppercase">PCU Out</div>
+                        <div class="flex justify-between items-center pt-1">
+                            <span class="text-xs font-medium text-slate-500">Total PCU</span>
+                            <span class="text-2xl font-black" style="color:#8b5e3c">${totalPcu}</span>
                         </div>
-                    </div>
-                </div>`;
+                        <div class="flex gap-3">
+                            <div class="flex-1 bg-green-950 rounded-lg p-2.5 text-center border border-green-900">
+                                <div class="text-lg font-bold text-green-400">${pcu.pcu_in || 0}</div>
+                                <div class="text-[9px] font-bold text-green-600 uppercase">PCU In</div>
+                            </div>
+                            <div class="flex-1 bg-red-950 rounded-lg p-2.5 text-center border border-red-900">
+                                <div class="text-lg font-bold text-red-400">${pcu.pcu_out || 0}</div>
+                                <div class="text-[9px] font-bold text-red-600 uppercase">PCU Out</div>
+                            </div>
+                        </div>
+                    </div>`;
             }
         }
 
@@ -336,9 +432,9 @@
             const res = c.resolution || [0, 0];
 
             document.getElementById('panel-video').innerHTML =
-                detailRow('video_fps', c.video_fps) +
+                detailRow('video_fps', (c.video_fps || 0).toFixed(2)) +
                 detailRow('frames', c.frames) +
-                detailRow('duration', c.duration + ' sec') +
+                detailRow('duration', (c.duration || 0).toFixed(2) + ' sec') +
                 detailRow('resolution', res[0] + ' <span class="text-slate-400 text-xs">x</span> ' + res[1]) +
                 detailRow('pixels', (c.pixels || 0).toLocaleString());
 
@@ -394,101 +490,127 @@
             gold: { congestion: '#fbbf24', congestionBg: 'rgba(251,191,36,0.08)', dominance: '#a8a29e', flow: '#f5f5f4', doughIn: '#f5f5f4', doughOut: '#fbbf24' }
         };
 
-        // Read settings from sessionStorage (set by settings.html)
-        const rawRun = sessionStorage.getItem('funky_run');
-        const runSettings = rawRun ? (JSON.parse(rawRun).settings || {}) : {};
-        let currentPalette = runSettings.palette || 'default';
-        let activePalette = PALETTES[currentPalette];
-
-        // =========== Charts ===========
-        Chart.defaults.font.family = "'Montserrat', sans-serif";
-        Chart.defaults.color = '#888888';
-        Chart.defaults.borderColor = '#222222';
-        Chart.defaults.plugins.tooltip.backgroundColor = '#0a0a0a';
-        Chart.defaults.plugins.tooltip.titleColor = '#ffffff';
-        Chart.defaults.plugins.tooltip.bodyColor = '#aaaaaa';
-        Chart.defaults.plugins.tooltip.borderColor = '#222222';
-        Chart.defaults.plugins.tooltip.borderWidth = 1;
-
+        // =========== Global State (Initialized in initApp) ===========
+        let currentPalette = 'default';
+        let activePalette = PALETTES.default;
         let MODEL_CLASSES = {};
         let BUSINESS_MAP = {};
-
-        const congChart = new Chart(document.getElementById('congestionChart').getContext('2d'), {
-            type: 'line',
-            data: {
-                labels: [], datasets: [{
-                    data: [],
-                    borderColor: activePalette.congestion,
-                    backgroundColor: activePalette.congestionBg,
-                    fill: true,
-                    tension: 0.2,
-                    borderWidth: 1.5,
-                    pointRadius: 0
-                }]
-            },
-            options: {
-                responsive: true, maintainAspectRatio: false,
-                plugins: { legend: { display: false } },
-                scales: {
-                    x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Frame Index', font: { size: 10, weight: '700' }, color: '#888888' } },
-                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Active Vehicles', font: { size: 10, weight: '700' }, color: '#888888' } }
+        let congChart, doughChart, domChart, flowChart;
+
+        async function initApp() {
+            // Read settings from sessionStorage
+            const rawRun = sessionStorage.getItem('funky_run');
+            const runSettings = rawRun ? (JSON.parse(rawRun).settings || {}) : {};
+            currentPalette = runSettings.palette || 'default';
+            activePalette = PALETTES[currentPalette];
+
+            // =========== Charts ===========
+            Chart.defaults.font.family = "'Montserrat', sans-serif";
+            Chart.defaults.color = '#888888';
+            Chart.defaults.borderColor = '#222222';
+            Chart.defaults.plugins.tooltip.backgroundColor = '#0a0a0a';
+            Chart.defaults.plugins.tooltip.titleColor = '#ffffff';
+            Chart.defaults.plugins.tooltip.bodyColor = '#aaaaaa';
+            Chart.defaults.plugins.tooltip.borderColor = '#222222';
+            Chart.defaults.plugins.tooltip.borderWidth = 1;
+
+            congChart = new Chart(document.getElementById('congestionChart').getContext('2d'), {
+                type: 'line',
+                data: {
+                    labels: [], datasets: [{
+                        data: [],
+                        borderColor: activePalette.congestion,
+                        backgroundColor: activePalette.congestionBg,
+                        fill: true,
+                        tension: 0.2,
+                        borderWidth: 1.5,
+                        pointRadius: 0
+                    }]
                 },
-                animation: { duration: 0 }
-            },
-            plugins: []
-        });
+                options: {
+                    responsive: true, maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Frame Index', font: { size: 10, weight: '700' }, color: '#888888' } },
+                        y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Active Vehicles', font: { size: 10, weight: '700' }, color: '#888888' } }
+                    },
+                    animation: { duration: 0 }
+                },
+                plugins: []
+            });
 
-        const doughChart = new Chart(document.getElementById('doughnutChart').getContext('2d'), {
-            type: 'doughnut',
-            data: {
-                labels: ['Incoming', 'Outgoing'], datasets: [{
-                    data: [0, 0],
-                    backgroundColor: [activePalette.doughIn, activePalette.doughOut],
-                    borderColor: '#0a0a0a',
-                    borderWidth: 3,
-                    hoverOffset: 6
-                }]
-            },
-            options: {
-                responsive: true, maintainAspectRatio: false,
-                cutout: '68%',
-                plugins: {
-                    legend: { display: true, position: 'bottom', labels: { padding: 12, usePointStyle: true, pointStyle: 'circle', font: { size: 10, weight: '600' } } }
+            doughChart = new Chart(document.getElementById('doughnutChart').getContext('2d'), {
+                type: 'doughnut',
+                data: {
+                    labels: ['Incoming', 'Outgoing'], datasets: [{
+                        data: [0, 0],
+                        backgroundColor: [activePalette.doughIn, activePalette.doughOut],
+                        borderColor: '#0a0a0a',
+                        borderWidth: 3,
+                        hoverOffset: 6
+                    }]
                 },
-                animation: { duration: 0 }
-            },
-            plugins: []
-        });
+                options: {
+                    responsive: true, maintainAspectRatio: false,
+                    cutout: '68%',
+                    plugins: {
+                        legend: { display: true, position: 'bottom', labels: { padding: 12, usePointStyle: true, pointStyle: 'circle', font: { size: 10, weight: '600' } } }
+                    },
+                    animation: { duration: 0 }
+                },
+                plugins: []
+            });
 
-        const domChart = new Chart(document.getElementById('dominanceChart').getContext('2d'), {
-            type: 'bar',
-            data: { labels: [], datasets: [{ data: [], backgroundColor: activePalette.dominance, borderRadius: 2 }] },
-            options: {
-                responsive: true, maintainAspectRatio: false,
-                plugins: { legend: { display: false } },
-                scales: {
-                    x: { grid: { display: false }, ticks: { font: { size: 10, weight: '500' }, color: '#666666' } },
-                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Total Vehicle Count', font: { size: 10, weight: '700' }, color: '#888888' } }
+            domChart = new Chart(document.getElementById('dominanceChart').getContext('2d'), {
+                type: 'bar',
+                data: { labels: [], datasets: [{ data: [], backgroundColor: activePalette.dominance, borderRadius: 2 }] },
+                options: {
+                    responsive: true, maintainAspectRatio: false,
+                    layout: { padding: { bottom: 12 } },
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        x: { grid: { display: false }, ticks: { font: { size: 9, weight: '500' }, color: '#666666', maxRotation: 45, minRotation: 30, autoSkip: false } },
+                        y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Total Vehicle Count', font: { size: 10, weight: '700' }, color: '#888888' } }
+                    },
+                    animation: { duration: 0 }
                 },
-                animation: { duration: 0 }
-            },
-            plugins: []
-        });
+                plugins: []
+            });
 
-        const flowChart = new Chart(document.getElementById('flowChart').getContext('2d'), {
-            type: 'bar',
-            data: { labels: [], datasets: [{ data: [], backgroundColor: activePalette.flow, borderColor: '#0a0a0a', borderWidth: 1.5, barPercentage: 1.0, categoryPercentage: 1.0 }] },
-            options: {
-                responsive: true, maintainAspectRatio: false,
-                plugins: { legend: { display: false } },
-                scales: {
-                    x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Time (seconds)', font: { size: 10, weight: '700' }, color: '#888888' } },
-                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Vehicles Crossed', font: { size: 10, weight: '700' }, color: '#888888' } }
+            flowChart = new Chart(document.getElementById('flowChart').getContext('2d'), {
+                type: 'bar',
+                data: { labels: [], datasets: [{ data: [], backgroundColor: activePalette.flow, borderColor: '#0a0a0a', borderWidth: 1.5, barPercentage: 1.0, categoryPercentage: 1.0 }] },
+                options: {
+                    responsive: true, maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Time (seconds)', font: { size: 10, weight: '700' }, color: '#888888' } },
+                        y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Vehicles Crossed', font: { size: 10, weight: '700' }, color: '#888888' } }
+                    },
+                    animation: { duration: 0 }
                 },
-                animation: { duration: 0 }
-            },
-            plugins: []
-        });
+                plugins: []
+            });
+
+            // Original init() logic
+            const raw = sessionStorage.getItem('funky_run');
+            if (!raw) { window.location.href = './'; return; }
+
+            _params = JSON.parse(raw);
+            sessionStorage.removeItem('funky_run');
+
+            const cRes = await fetch('constants');
+            const cData = await cRes.json();
+            MODEL_CLASSES = cData.classes;
+            BUSINESS_MAP = cData.business_map;
+
+            populateAndInit(_params);
+            sessionStorage.removeItem('funky_run');
+            
+            // Sync current active tab from session if set
+            const activeTab = sessionStorage.getItem('uf_active_tab') || 'settings';
+            switchTab(activeTab);
+        }
 
         // =========== Update functions ===========
         function sumValues(obj) { return Object.values(obj).reduce((a, b) => a + b, 0); }
@@ -587,6 +709,14 @@
             });
             const reportRow = document.getElementById('sv-report');
             if (reportRow) reportRow.closest('.s-row').classList.add('disabled');
+            // Also directly hide the wrap and close dropdown — CSS may be cached
+            const svWrap = document.getElementById('sv-report-wrap');
+            if (svWrap) {
+                svWrap.style.pointerEvents = 'none';
+                svWrap.style.opacity = '0.4';
+                const dd = document.getElementById('sv-report-dropdown');
+                if (dd) dd.classList.add('hidden');
+            }
             const annotatedRow = document.getElementById('sv-annotated');
             if (annotatedRow) annotatedRow.closest('.s-row').classList.add('disabled');
             const wrap = document.getElementById('settings-start-wrap');
@@ -694,28 +824,6 @@
         // =========== Main ===========
         let _params = null;
 
-        async function init() {
-            const raw = sessionStorage.getItem('funky_run');
-            if (!raw) { window.location.href = './'; return; }
-
-            _params = JSON.parse(raw);
-
-            // SECURITY: Clear session storage so refresh always redirects home
-            sessionStorage.removeItem('funky_run');
-
-            const cRes = await fetch('constants');
-            const cData = await cRes.json();
-            MODEL_CLASSES = cData.classes;
-            BUSINESS_MAP = cData.business_map;
-
-            populateAndInit(_params);
-
-            // SECURITY: Clear session storage after populate so refresh triggers redirect
-            sessionStorage.removeItem('funky_run');
-
-            // Show Settings tab first, but also initialized with About implicitly in sidebar hierarchy
-            switchTab('settings');
-        }
 
         function populateAndInit(params) {
             populateRunDetails(params.config);
@@ -763,16 +871,7 @@
             document.getElementById('proc-label').innerText = 'Processing';
 
             // Reset Run Tab Results to Awaiting
-            const analyzeAgainBtn = document.getElementById('run-analyze-again-btn');
-            if (analyzeAgainBtn) {
-                analyzeAgainBtn.classList.add('hidden');
-            }
 
-            const badge = document.getElementById('results-status-badge');
-            if (badge) {
-                badge.innerText = 'Processing';
-                badge.className = 'px-2.5 py-1 bg-slate-800 text-white text-[10px] font-bold rounded-full uppercase tracking-tighter animate-pulse';
-            }
             document.getElementById('run-results-content').innerHTML = `
                 <div class="flex flex-col items-center justify-center p-8 bg-black/40 border border-slate-800 rounded-2xl col-span-3 text-slate-500">
                     <i class="fa-solid fa-spinner fa-spin text-2xl mb-3 text-white"></i>
@@ -783,15 +882,16 @@
             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 = 'Generating artifacts & rendering analytics... Please wait';
+            if (repText) repText.innerText = 'Artifacts will be available after processing completes... Please wait';
 
 
             // Start WebSocket
             const videoDuration = _params.config.duration || 10;
 
             const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-            const wsPath = location.pathname.endsWith('/') ? location.pathname : location.pathname + '/';
-            const ws = new WebSocket(`${proto}://${location.host}${wsPath}ws/run`);
+            // Get the directory path (e.g., /app/ or /) rather than the full filename
+            const dirPath = location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1);
+            const ws = new WebSocket(`${proto}://${location.host}${dirPath}ws/run`);
 
             ws.onopen = () => {
                 ws.send(JSON.stringify({
@@ -810,10 +910,6 @@
                 console.error('WS Error:', e);
                 document.getElementById('proc-label').innerText = 'Connection Error';
                 showToast('Connection error — server may be busy', 'error');
-                if (badge) {
-                    badge.innerText = 'Pipeline Failed';
-                    badge.className = 'px-2.5 py-1 bg-red-900/40 text-red-100 text-[10px] font-bold rounded-full uppercase tracking-tighter';
-                }
             };
 
             let processingDone = false;
@@ -823,11 +919,6 @@
                 if (!processingDone) {
                     // Closed before done=True received — show error state
                     document.getElementById('proc-label').innerText = 'Disconnected';
-                    const badge = document.getElementById('results-status-badge');
-                    if (badge) {
-                        badge.innerText = 'Connection Lost';
-                        badge.className = 'px-2.5 py-1 bg-red-900/40 text-red-300 text-[10px] font-bold rounded-full uppercase tracking-tighter';
-                    }
                     document.getElementById('run-results-content').innerHTML = `
                         <div class="flex flex-col items-center justify-center p-8 border-2 border-dashed border-red-900/40 rounded-2xl col-span-3 text-slate-400">
                             <i class="fa-solid fa-triangle-exclamation text-2xl mb-3 text-red-400"></i>
@@ -841,6 +932,8 @@
             };
 
             let lastUIUpdate = 0;
+            let liveCongestion = [];
+            let liveFlowTimes = [];
 
             ws.onmessage = e => {
                 const d = JSON.parse(e.data);
@@ -851,11 +944,6 @@
                 if (d.error) {
                     processingDone = true;
                     document.getElementById('proc-label').innerText = 'Engine Error';
-                    const badge = document.getElementById('results-status-badge');
-                    if (badge) {
-                        badge.innerText = 'Failed';
-                        badge.className = 'px-2.5 py-1 bg-red-900/40 text-red-300 text-[10px] font-bold rounded-full uppercase tracking-tighter';
-                    }
                     console.error('[UrbanFlow] Engine error:', d.detail || d.error);
                     document.getElementById('run-results-content').innerHTML = `
                         <div class="flex flex-col items-center justify-center p-8 border-2 border-dashed border-red-900/40 rounded-2xl col-span-3 text-slate-400">
@@ -884,22 +972,18 @@
                         }
                     }
 
-                    // Update Run Tab Badge
-                    const badge = document.getElementById('results-status-badge');
-                    if (badge) {
-                        badge.innerText = 'Completed';
-                        badge.className = 'px-2.5 py-1 bg-white text-black text-[10px] font-bold rounded-full uppercase tracking-tighter';
-                    }
 
-                    const analyzeAgainBtn = document.getElementById('run-analyze-again-btn');
-                    if (analyzeAgainBtn) {
-                        analyzeAgainBtn.classList.remove('hidden');
+                    // 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 + ' sec') +
-                        infoRow('Throughput (FPS)', d.actual_fps, 'Measured frame throughput during processing.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
-                        infoRow('Real-time Ratio', d.speed_vs_realtime + 'x', 'Processing speed relative to video playback rate.');
+                        detailRow('Inference Time', (d.processing_time || 0).toFixed(2) + ' sec') +
+                        infoRow('Throughput (FPS)', (d.actual_fps || 0).toFixed(2), 'Measured frame throughput during processing.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
+                        infoRow('Real-time Ratio', (d.speed_vs_realtime || 0).toFixed(2) + 'x', 'Processing speed relative to video playback rate.');
 
                     if (d.video_id) {
                         loadReports(d.video_id).then(data => {
@@ -925,6 +1009,12 @@
                     if (jsonToggle) {
                         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) {
                         csvToggle.closest('.s-row').classList.add('disabled');
@@ -937,6 +1027,7 @@
                     // Toast + Insights
                     showToast('Processing complete — artifacts ready', 'success');
                     renderInsights(d);
+                    showRetryBubble();
 
                     // Store video_id for keyboard shortcut download
                     document.body.setAttribute('data-last-video-id', d.video_id);
@@ -969,14 +1060,26 @@
                 doughChart.data.datasets[0].data = [totalIn, totalOut];
                 doughChart.update();
 
+                // Live history management (Backend sends incremental updates now)
+                if (d.congestion_last !== undefined) {
+                    liveCongestion.push(d.congestion_last);
+                }
+                if (d.flow_count !== undefined) {
+                    // Approximate timestamps for new crossings based on current frame
+                    const videoFps = _params.config.video_fps || 30;
+                    while (liveFlowTimes.length < d.flow_count) {
+                        liveFlowTimes.push(d.frame_index * stride / videoFps);
+                    }
+                }
+
                 const now = performance.now();
                 if (now - lastUIUpdate < 300) return;
                 lastUIUpdate = now;
 
-                updateCongestion(d.congestion, stride);
+                updateCongestion(liveCongestion, stride);
                 updateBreakdown(d.class_in, d.class_out);
                 updateDominance(d.class_in, d.class_out);
-                buildFlowHistogram(d.flow_times, videoDuration);
+                buildFlowHistogram(liveFlowTimes, videoDuration);
             };
         }
 
@@ -1003,8 +1106,10 @@
             const data = await res.json();
             if (!data.files || !data.files.length) return null;
 
-            document.getElementById('reports-pending').classList.add('hidden');
-            document.getElementById('reports-pending-message').classList.add('hidden');
+            const rPending = document.getElementById('reports-pending');
+            if (rPending) rPending.classList.add('hidden');
+            const rMsg = document.getElementById('reports-pending-message');
+            if (rMsg) rMsg.classList.add('hidden');
             document.getElementById('post-process-cards').classList.remove('hidden');
             const grid = document.getElementById('reports-grid');
             grid.classList.remove('hidden');
@@ -1105,5 +1210,121 @@
             }
         }
 
-        init();
-    
+    function showRetryBubble() {
+        if (sessionStorage.getItem('uf_retry_shown')) return;
+        sessionStorage.setItem('uf_retry_shown', '1');
+
+        const existing = document.getElementById('retry-bubble');
+        if (existing) existing.remove();
+
+        const isMobile = window.innerWidth < 1024;
+        const bubble   = document.createElement('div');
+        bubble.id      = 'retry-bubble';
+
+        Object.assign(bubble.style, {
+            position:     'fixed',
+            background:   '#111111',
+            border:       '1px solid #c89a6c',
+            borderRadius: '12px',
+            padding:      '12px 16px',
+            fontFamily:   'Montserrat, sans-serif',
+            color:        '#f0ece6',
+            zIndex:       '9000',
+            boxShadow:    '0 8px 32px rgba(0,0,0,0.8)',
+            maxWidth:     '220px',
+            textAlign:    'center',
+            lineHeight:   '1.4',
+        });
+
+        bubble.innerHTML = `
+            <p style="color:#c89a6c;font-weight:800;font-size:13px;margin:0 0 5px 0">
+                Want to try another video?
+            </p>
+            <p style="color:#a89f97;font-size:11px;margin:0">
+                Tap <b style="color:#f0ece6">&#9881; Settings</b> to reset &amp; re-run
+            </p>
+            <div id="retry-bubble-arrow"></div>
+        `;
+
+        // Append to fixed portal so overflow:hidden on body/main never clips it
+        const portal = document.getElementById('fixed-portal') || document.body;
+        portal.style.pointerEvents = 'none';
+        bubble.style.pointerEvents = 'auto';
+        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));
+
+            Object.assign(bubble.style, {
+                bottom:    (navH + 10) + 'px',
+                left:      leftPx + 'px',
+                top:       'auto',
+                right:     'auto',
+                transform: 'none',
+            });
+
+            const arrowLeft = settingsCenterX - leftPx;
+            const arrow = bubble.querySelector('#retry-bubble-arrow');
+            Object.assign(arrow.style, {
+                position:    'absolute',
+                bottom:      '-8px',
+                left:        arrowLeft + 'px',
+                transform:   'translateX(-50%)',
+                width:       '0', height: '0',
+                borderLeft:  '8px solid transparent',
+                borderRight: '8px solid transparent',
+                borderTop:   '8px solid #c89a6c',
+            });
+
+        } else {
+            // Desktop sidebar <aside class="w-60"> = 240px.
+            // Settings is 5th nav link: logo(112px) + 4 items × 44px + 22px = 310px from top.
+            const settingsY = 310;
+            Object.assign(bubble.style, {
+                left:      '256px',
+                top:       (settingsY - 40) + 'px',
+                bottom:    'auto',
+                right:     'auto',
+                transform: 'none',
+                textAlign: 'left',
+            });
+
+            const arrow = bubble.querySelector('#retry-bubble-arrow');
+            Object.assign(arrow.style, {
+                position:     'absolute',
+                left:         '-8px',
+                top:          '50%',
+                transform:    'translateY(-50%)',
+                width:        '0', height: '0',
+                borderTop:    '8px solid transparent',
+                borderBottom: '8px solid transparent',
+                borderRight:  '8px solid #c89a6c',
+            });
+        }
+
+        bubble.addEventListener('click', () => bubble.remove());
+        setTimeout(() => {
+            const el = document.getElementById('retry-bubble');
+            if (el) el.remove();
+        }, 6000);
+    }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            // Phase 1: instant visual — show the shell immediately on first paint
+            const activeTab = sessionStorage.getItem('uf_active_tab') || 'settings';
+            switchTab(activeTab);
+
+            // Phase 2: defer all heavy init until after browser completes first paint
+            requestAnimationFrame(() => {
+                setTimeout(initApp, 0);
+            });
+        });

frontend/manifest.json

@@ -0,0 +1,24 @@
+{
+  "name": "UrbanFlow: Your Vision Partner",
+  "short_name": "UrbanFlow",
+  "description": "Premium Traffic Intelligence Application",
+  "start_url": "/?pwa=true",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "orientation": "portrait",
+  "icons": [
+    {
+      "src": "assets/shuriken.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "assets/shurkien_b.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

frontend/sw.js

@@ -0,0 +1,25 @@
+const CACHE_NAME = 'urbanflow-v4';
+const ASSETS = [
+  './css/initial.css',
+  './css/vehicles.css',
+  './assets/shuriken.png',
+  './assets/shurkien_b.png',
+  './assets/uf_rf.png'
+];
+
+self.addEventListener('install', (e) => {
+  e.waitUntil(caches.open(CACHE_NAME).then(c => c.addAll(ASSETS)));
+});
+
+self.addEventListener('fetch', (e) => {
+  const url = new URL(e.request.url);
+  
+  // NEVER cache WebSockets or API calls
+  if (url.pathname.includes('/ws/') || url.pathname.includes('/reports/') || url.pathname.includes('/bundle/')) {
+    return;
+  }
+
+  e.respondWith(
+    fetch(e.request).catch(() => caches.match(e.request))
+  );
+});

frontend/vehicles.html

@@ -3,9 +3,15 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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">
@@ -16,7 +22,27 @@
     <link rel="stylesheet" href="css/vehicles.css">
 </head>
 
-<body class="bg-black text-white h-screen w-screen overflow-hidden flex">
+<body class="bg-black text-white h-screen w-screen flex" style="overflow:hidden">
+    <!-- Fixed portal: bubbles, toasts, overlays append here — never clipped -->
+    <div id="fixed-portal" style="position:fixed;inset:0;pointer-events:none;z-index:8999"></div>
+    <div class="mobile-top-bar" id="mobile-top-bar">
+        <img src="assets/uf_rf.png" alt="UrbanFlow" class="h-14 w-auto object-contain">
+        
+        <!-- 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>
 
     <!-- Sidebar -->
     <aside class="w-60 bg-white shadow-xl flex flex-col z-20 flex-shrink-0 border-r border-slate-200 relative">
@@ -96,7 +122,8 @@
 
         <!-- 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" style="border-color:#2a2a2a">
+            <div class="bg-black border rounded-xl p-12 shadow-2xl space-y-8 flex flex-col justify-center"
+                style="border-color:#2a2a2a">
                 <div class="text-center">
                     <p class="text-sm italic font-bold leading-relaxed max-w-3xl mx-auto"
                         style="color:#c89a6c;font-family:'Montserrat',sans-serif">
@@ -131,7 +158,8 @@
                     </p>
                 </div>
 
-                <div class="grid grid-cols-3 gap-8 pt-8 text-left border-t max-w-5xl mx-auto" style="border-color:#1a1a1a">
+                <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 Get
                         </h4>
@@ -155,52 +183,17 @@
                         </ul>
                     </div>
                     <div class="space-y-4">
-                        <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">How It Works
-                        </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>Upload footage from any existing camera &mdash; phone, CCTV, dashcam</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>Draw a counting boundary on the first frame</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>Inference runs in the cloud &mdash; no local GPU or setup needed</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>Review live KPIs and download artifacts when complete</span>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="space-y-4">
-                        <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What's Coming
+                        <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">Precision &
+                            Accuracy
                         </h4>
-                        <ul class="text-xs space-y-3 pl-1" style="color:#a89f97">
-                            <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
-                                    style="color:#8b5e3c"></i>
-                                <span>RTSP live-stream support &mdash; connect directly to IP cameras</span>
-                            </li>
-                            <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
-                                    style="color:#8b5e3c"></i>
-                                <span>ANPR &mdash; automatic number plate recognition and logging</span>
-                            </li>
-                            <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
-                                    style="color:#8b5e3c"></i>
-                                <span>Helmet compliance detection &mdash; rider safety enforcement</span>
-                            </li>
-                            <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
-                                    style="color:#8b5e3c"></i>
-                                <span>Traffic rule violation detection &mdash; signal jumping, wrong-way driving</span>
-                            </li>
-                            <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
-                                    style="color:#8b5e3c"></i>
-                                <span>Enterprise deployment with dedicated SLAs and onboarding</span>
-                            </li>
-                        </ul>
+                        <p class="text-xs leading-relaxed" style="color:#a89f97">
+                            UrbanFlow provides an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results
+                            may vary slightly across runs due to the nature of real-time frame-by-frame inference.
+                        </p>
+                        <p class="text-xs leading-relaxed" style="color:#a89f97">
+                            For research or planning use, we recommend processing the same video 2–3 times and taking
+                            the average count for maximum reliability.
+                        </p>
                     </div>
                 </div>
 
@@ -221,8 +214,8 @@
 
 
         <!-- Progress Bar (shared) -->
-        <div
-            class="bg-white rounded-xl px-6 py-4 border border-slate-200 shadow-sm flex items-center justify-between flex-shrink-0">
+        <div id="progress-bar-wrapper"
+            class="w-full bg-white rounded-xl px-6 py-4 border border-slate-200 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>
@@ -234,18 +227,24 @@
             <div class="flex items-center space-x-6 text-xs font-bold text-white whitespace-nowrap">
                 <span id="proc-frames">0 / 0 Frames</span>
                 <span id="proc-pct">0%</span>
-                <select class="custom-select" id="live-palette-select" onchange="applyPalette(this.value)"
-                    style="font-size:10px;padding:3px 20px 3px 8px">
-                    <option value="default" selected>Default</option>
-                    <option value="vibrant">Vibrant</option>
-                    <option value="corporate">Corporate</option>
-                    <option value="neon">Neon Night</option>
-                    <option value="earth">Earth Tones</option>
-                    <option value="ocean">Ocean Breeze</option>
-                    <option value="sunset">Sunset Glow</option>
-                    <option value="midnight">Midnight Deep</option>
-                    <option value="gold">Monochrome Gold</option>
-                </select>
+                <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>
 
@@ -320,7 +319,8 @@
                         <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
                             <span class="info-tip">Aggregated vehicle count grouped by dominant category.</span></span>
                     </h3>
-                    <span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Dominant
+                    <span
+                        class="text-[10px] text-slate-500 font-bold uppercase tracking-wider whitespace-nowrap">Dominant
                         Intelligence</span>
                 </div>
                 <div class="flex-1 w-full relative min-h-[220px]">
@@ -353,31 +353,24 @@
             <div class="space-y-6 w-full max-w-[1400px] mx-auto">
 
                 <!-- HERO: Process Analytics -->
-                <div id="run-results-card"
-                    class="bg-white rounded-xl border shadow-sm overflow-hidden flex flex-col" style="border-color:#2a2a2a">
-                    <div class="px-6 py-4 border-b flex justify-between items-center" style="border-color:#1a1a1a;background:#050505">
-                        <div>
+                <div id="run-results-card" class="bg-white rounded-xl border 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 text-center" style="color:#a89f97">
+                            <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">
-                            <button id="run-analyze-again-btn" onclick="switchTab('settings')"
-                                class="hidden px-4 py-1.5 bg-[#c89a6c] text-white text-[10px] font-bold rounded-full shadow-sm hover:bg-[#8b5e3c] transition-colors"><i
-                                    class="fa-solid fa-gear mr-1"></i> Configure & Analyze Again</button>
-                            <div id="results-status-badge"
-                                class="px-3 py-1.5 bg-amber-900/30 border border-amber-800/50 text-amber-500 text-[10px] font-bold rounded-full uppercase tracking-widest shadow-sm flex items-center gap-2">
-                                <div class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></div>System Standby
-                            </div>
                         </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-8 border-2 border-dashed rounded-2xl col-span-3" style="border-color:#2a2a2a;color:#777">
-                                <i class="fa-solid fa-chart-line text-4xl mb-4"></i>
-                                <span class="text-xs font-semibold">Initiate a run to view performance insights</span>
+                            <div class="flex flex-col items-center justify-center p-12 rounded-2xl col-span-3"
+                                style="color:#555">
+                                <span class="text-[11px] font-bold uppercase tracking-[0.2em]">Initiate a run to view performance insights</span>
                             </div>
                         </div>
                     </div>
@@ -385,25 +378,29 @@
 
                 <!-- Technical Context Row -->
                 <div class="grid grid-cols-2 gap-6">
-                    <div class="bg-white rounded-xl border shadow-sm flex flex-col overflow-hidden" style="border-color:#2a2a2a">
+                    <div class="bg-white rounded-xl border 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-white rounded-xl border shadow-sm flex flex-col overflow-hidden" style="border-color:#2a2a2a">
+                    <div class="bg-white rounded-xl border 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-white rounded-xl border shadow-sm flex flex-col overflow-hidden" style="border-color:#2a2a2a">
+                    <div class="bg-white rounded-xl border 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-white rounded-xl border shadow-sm flex flex-col overflow-hidden" style="border-color:#2a2a2a">
+                    <div class="bg-white rounded-xl border 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>
@@ -413,25 +410,12 @@
 
                 <!-- Insights Panel (xAI) -->
                 <div id="insights-panel" class="hidden">
-                    <div class="grid grid-cols-2 gap-6 mt-6">
-                        <div
-                            class="bg-white rounded-xl border 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 flex items-center" style="color:#f0ece6">Speed Distribution
-                                    <span class="info-wrap"><span class="info-btn"><i
-                                                class="fa-solid fa-info"></i></span>
-                                        <span class="info-tip">Relative speed categories based on pixel displacement.
-                                            Slow/Normal/Fast are percentile-based within this video.</span></span>
-                                </h3>
-                            </div>
-                            <div class="p-6" id="speed-dist-content">
-                                <div class="flex gap-4 items-end justify-center h-32" id="speed-bars"></div>
-                            </div>
-                        </div>
-                        <div
-                            class="bg-white rounded-xl border shadow-sm flex flex-col overflow-hidden" style="border-color:#2a2a2a">
+                    <div class="mt-6">
+                        <div class="bg-white rounded-xl border 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 flex items-center" style="color:#f0ece6">Congestion Insights
+                                <h3 class="font-bold text-sm flex items-center" style="color:#f0ece6">Congestion
+                                    Insights
                                     <span class="info-wrap"><span class="info-btn"><i
                                                 class="fa-solid fa-info"></i></span>
                                         <span class="info-tip">Automated peak detection and congestion
@@ -451,70 +435,16 @@
         <!-- 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-4 border border-[#222] bg-[#0a0a0a] rounded-xl flex items-center justify-center gap-3 shadow-sm">
-                <i id="reports-pending-icon" class="fa-solid fa-layer-group text-[#c89a6c]"></i>
+                class="mb-4 text-center p-8 border border-[#222] bg-[#0a0a0a] rounded-xl flex flex-col items-center justify-center gap-4 shadow-sm min-h-[200px]">
+                <i id="reports-pending-icon" class="fa-solid fa-layer-group text-3xl text-[#c89a6c] opacity-50"></i>
                 <span id="reports-pending-text"
-                    class="text-xs text-[#a89f97] font-medium tracking-wide uppercase">Trigger process from settings.
-                    Artifacts will be available here once processing completes.</span>
-            </div>
-            <div id="reports-pending" class="grid grid-cols-2 xl:grid-cols-3 gap-4 w-full">
-                <!-- Skeleton Loader 1 -->
-                <div
-                    class="bg-[#0a0a0a] rounded-xl border border-[#222] shadow-sm flex flex-col overflow-hidden animate-pulse">
-                    <div class="flex flex-col items-center justify-center py-12">
-                        <div class="w-16 h-16 bg-[#1a1a1a] rounded mb-4"></div>
-                        <div class="w-24 h-2 bg-[#1a1a1a] rounded"></div>
-                    </div>
-                    <div class="px-5 py-4 border-t border-[#1a1a1a] bg-[#050505]">
-                        <div class="w-3/4 h-3 bg-[#1a1a1a] rounded mb-2"></div>
-                        <div class="w-1/2 h-2 bg-[#111] rounded"></div>
-                    </div>
-                </div>
-                <!-- Skeleton Loader 2 -->
-                <div class="bg-[#0a0a0a] rounded-xl border border-[#222] shadow-sm flex flex-col overflow-hidden animate-pulse"
-                    style="animation-delay: 150ms;">
-                    <div class="flex flex-col items-center justify-center py-12">
-                        <div class="w-16 h-16 bg-[#1a1a1a] rounded mb-4"></div>
-                        <div class="w-24 h-2 bg-[#1a1a1a] rounded"></div>
-                    </div>
-                    <div class="px-5 py-4 border-t border-[#1a1a1a] bg-[#050505]">
-                        <div class="w-2/3 h-3 bg-[#1a1a1a] rounded mb-2"></div>
-                        <div class="w-1/3 h-2 bg-[#111] rounded"></div>
-                    </div>
-                </div>
-                <!-- Skeleton Loader 3 -->
-                <div class="bg-[#0a0a0a] rounded-xl border border-[#222] shadow-sm flex flex-col overflow-hidden animate-pulse"
-                    style="animation-delay: 300ms;">
-                    <div class="flex flex-col items-center justify-center py-12">
-                        <div class="w-16 h-16 bg-[#1a1a1a] rounded mb-4"></div>
-                        <div class="w-24 h-2 bg-[#1a1a1a] rounded"></div>
-                    </div>
-                    <div class="px-5 py-4 border-t border-[#1a1a1a] bg-[#050505]">
-                        <div class="w-4/5 h-3 bg-[#1a1a1a] rounded mb-2"></div>
-                        <div class="w-1/2 h-2 bg-[#111] rounded"></div>
-                    </div>
-                </div>
+                    class="text-xs text-[#a89f97] font-medium tracking-wide uppercase leading-relaxed max-w-[240px]">
+                    Please return once processing is 100% complete to access artifacts.
+                </span>
             </div>
 
             <!-- Post-Processing Insights (Populated after completion) -->
-            <div id="post-process-cards" class="hidden grid grid-cols-2 gap-4 mb-4">
-                <!-- Speed Distribution -->
-                <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">Speed Profile
-                            <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">Relative speed categories based on pixel displacement between
-                                    frames. Slow/Normal/Fast are percentile-based within this video — not
-                                    km/h.</span></span>
-                        </h3>
-                    </div>
-                    <div class="flex-1 flex items-center justify-center" id="speed-stats-card">
-                        <div class="text-center text-slate-600 text-xs"><i
-                                class="fa-solid fa-gauge-high text-2xl mb-2"></i><br>Available after processing</div>
-                    </div>
-                </div>
-
+            <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">
@@ -539,104 +469,138 @@
         <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="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
                             <span class="info-wrap ml-2">
-                                <span class="info-btn" style="background:#1a1a1a;color:#888"><i class="fa-solid fa-info"></i></span>
-                                <span class="info-tip">Figures and numbers below are auto-calculated for best performance.</span>
+                                <span class="info-btn" style="background:#1a1a1a;color:#888"><i
+                                        class="fa-solid fa-info"></i></span>
+                                <span class="info-tip">Figures and numbers below are auto-calculated for best
+                                    performance.</span>
                             </span>
                         </h3>
-                        <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">Auto-configured pipeline parameters</p>
+                        <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
                                     <span class="info-wrap ml-1">
-                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i class="fa-solid fa-info"></i></span>
-                                        <span class="info-tip">Input resolution fed to the detection model. Locked to the value compiled into the OpenVINO graph.</span>
+                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i
+                                                class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Input resolution fed to the detection model. Optimized
+                                            for the resolution compiled into the OpenVINO weights.</span>
                                     </span>
                                 </div>
                                 <div class="text-[10px] text-slate-500">Model input resolution</div>
                             </div>
-                            <div class="s-stepper"><button onclick="stepParam('imgsz',-32)">&#8249;</button><span class="s-val" id="sv-imgsz">640</span><button onclick="stepParam('imgsz',32)">&#8250;</button></div>
+                            <div class="s-stepper"><button onclick="stepParam('imgsz',-32)">&#8249;</button><span
+                                    class="s-val" id="sv-imgsz">640</span><button
+                                    onclick="stepParam('imgsz',32)">&#8250;</button></div>
                         </div>
                         <div class="s-row" data-param="conf">
                             <div>
                                 <div class="text-xs font-semibold text-slate-300 flex items-center">Confidence
                                     <span class="info-wrap ml-1">
-                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i class="fa-solid fa-info"></i></span>
-                                        <span class="info-tip">Minimum score a detection must reach to be counted. Lower values detect more but may include false positives.</span>
+                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i
+                                                class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Minimum score a detection must reach to be counted. Lower
+                                            values detect more but may include false positives.</span>
                                     </span>
                                 </div>
                                 <div class="text-[10px] text-slate-500">Minimum detection threshold</div>
                             </div>
-                            <div class="s-stepper"><button onclick="stepParam('conf',-0.01)">&#8249;</button><span class="s-val" id="sv-conf">0.12</span><button onclick="stepParam('conf',0.01)">&#8250;</button></div>
+                            <div class="s-stepper"><button onclick="stepParam('conf',-0.01)">&#8249;</button><span
+                                    class="s-val" id="sv-conf">0.12</span><button
+                                    onclick="stepParam('conf',0.01)">&#8250;</button></div>
                         </div>
                         <div class="s-row" data-param="iou">
                             <div>
                                 <div class="text-xs font-semibold text-slate-300 flex items-center">IoU Threshold
                                     <span class="info-wrap ml-1">
-                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i class="fa-solid fa-info"></i></span>
-                                        <span class="info-tip">Controls how aggressively overlapping detections are merged. Higher values allow more overlap before suppression.</span>
+                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i
+                                                class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Controls how aggressively overlapping detections are
+                                            merged. Higher values allow more overlap before suppression.</span>
                                     </span>
                                 </div>
                                 <div class="text-[10px] text-slate-500">Non-max suppression overlap</div>
                             </div>
-                            <div class="s-stepper"><button onclick="stepParam('iou',-0.05)">&#8249;</button><span class="s-val" id="sv-iou">0.60</span><button onclick="stepParam('iou',0.05)">&#8250;</button></div>
+                            <div class="s-stepper"><button onclick="stepParam('iou',-0.05)">&#8249;</button><span
+                                    class="s-val" id="sv-iou">0.60</span><button
+                                    onclick="stepParam('iou',0.05)">&#8250;</button></div>
                         </div>
                         <div class="s-row" data-param="stride">
                             <div>
                                 <div class="text-xs font-semibold text-slate-300 flex items-center">Frame Stride
                                     <span class="info-wrap ml-1">
-                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i class="fa-solid fa-info"></i></span>
-                                        <span class="info-tip">Number of frames skipped between each detection pass. Higher values trade accuracy for speed.</span>
+                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i
+                                                class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Number of frames skipped between each detection pass.
+                                            Higher values trade accuracy for speed.</span>
                                     </span>
                                 </div>
                                 <div class="text-[10px] text-slate-500">Frames skipped between detections</div>
                             </div>
-                            <div class="s-stepper"><button onclick="stepParam('stride',-1)">&#8249;</button><span class="s-val" id="sv-stride">2</span><button onclick="stepParam('stride',1)">&#8250;</button></div>
+                            <div class="s-stepper"><button onclick="stepParam('stride',-1)">&#8249;</button><span
+                                    class="s-val" id="sv-stride">2</span><button
+                                    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">
-                                    Congestion Smoothing
-                                    <span class="info-wrap ml-1">
-                                        <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>
+                                <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 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>
 
                 <!-- Artifact Generation Settings -->
-                <div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col" style="border-color:#2a2a2a">
+                <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">Artifact Settings</h3>
-                        <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">Configured visual overlay options</p>
+                        <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
+                            Configured visual overlay options</p>
                     </div>
                     <div class="px-6 py-4 flex-1 flex flex-col">
                         <div class="s-row" data-param="report">
                             <div>
-                                <div class="text-xs font-semibold text-slate-300">Individual Chart Type</div>
+                                <div class="text-xs font-semibold text-slate-300">Chart Format</div>
                                 <div class="text-[10px] text-slate-500">Format for separate KPI chart files</div>
                             </div>
-                            <select class="custom-select" id="sv-report">
-                                <option value="png" selected>PNG Image</option>
-                                <option value="pdf">PDF Document</option>
-                            </select>
+                            <div class="uf-select-wrap" id="sv-report-wrap">
+                                <div class="uf-select-trigger" id="sv-report-trigger" onclick="ufSelectToggle('sv-report')">
+                                    <span class="uf-select-label" id="sv-report-label">PNG Image</span>
+                                    <i class="fa-solid fa-chevron-down uf-select-arrow" id="sv-report-arrow"></i>
+                                </div>
+                                <div class="uf-select-dropdown hidden" id="sv-report-dropdown">
+                                    <div class="uf-select-option uf-select-option-active" data-value="png" onclick="ufSelectPick('sv-report','png','PNG Image')">PNG Image</div>
+                                    <div class="uf-select-option" data-value="pdf" onclick="ufSelectPick('sv-report','pdf','PDF Document')">PDF Document</div>
+                                </div>
+                                <input type="hidden" id="sv-report" value="png">
+                            </div>
                         </div>
-                        <div class="s-row flex-col items-stretch" data-param="annotated">
-                            <div class="flex items-center justify-between w-full">
-                                <div>
-                                    <div class="text-xs font-semibold text-slate-300">Export Annotated Video</div>
-                                    <div class="text-[10px] text-slate-500">Layered visual overlays for diagnostic analysis</div>
+                        <div class="s-row flex-col items-stretch !gap-0" data-param="annotated">
+                            <div class="flex items-center justify-between w-full py-2">
+                                <div class="flex-1 pr-2">
+                                    <div class="text-xs font-semibold text-slate-300">Export Annotated Video</div> 
+                                    <div class="text-[10px] text-slate-500">Diagnostic visual overlays</div>
                                 </div>
                                 <div class="toggle-track" id="sv-annotated" onclick="toggleExportMaster(this)">
                                     <div class="toggle-thumb"></div>
@@ -663,10 +627,12 @@
                         </div>
                         <div class="s-row">
                             <div>
-                                <div class="text-xs font-semibold text-slate-300 flex items-center">Export Run Details (JSON)
+                                <div class="text-xs font-semibold text-slate-300 flex items-center">Export Run Details
                                     <span class="info-wrap ml-1">
-                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i class="fa-solid fa-info"></i></span>
-                                        <span class="info-tip">Include analysis.json payload with all run parameters and data structures.</span>
+                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i
+                                                class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Include analysis.json payload with all run parameters and
+                                            data structures.</span>
                                     </span>
                                 </div>
                                 <div class="text-[10px] text-slate-500">Structurally represented technical details</div>
@@ -679,7 +645,8 @@
                             <div>
                                 <div class="text-xs font-semibold text-slate-300 flex items-center">Export CSV Results
                                     <span class="info-wrap ml-1">
-                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i class="fa-solid fa-info"></i></span>
+                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i
+                                                class="fa-solid fa-info"></i></span>
                                         <span class="info-tip">Include frame-by-frame data in raw CSV format.</span>
                                     </span>
                                 </div>
@@ -693,8 +660,11 @@
                             <div>
                                 <div class="text-xs font-semibold text-slate-300 flex items-center">Auto-Download Report
                                     <span class="info-wrap ml-1">
-                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i class="fa-solid fa-info"></i></span>
-                                        <span class="info-tip">Enable before processing starts. The artifact bundle (ZIP) will download automatically once analysis completes. Cannot be changed after processing finishes.</span>
+                                        <span class="info-btn" style="background:#1a1a1a;color:#888"><i
+                                                class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Enable before processing starts. The artifact bundle
+                                            (ZIP) will download automatically once analysis completes. Cannot be changed
+                                            after processing finishes.</span>
                                     </span>
                                 </div>
                                 <div class="text-[10px] text-slate-500">Save reports automatically</div>
@@ -708,7 +678,8 @@
                                 <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 class="text-xs font-bold text-white px-3 py-1 bg-slate-800 rounded-full">Dark Mode Only
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -737,10 +708,12 @@
         <div id="tab-help" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div class="space-y-6 w-full">
                 <div class="bg-black border rounded-xl overflow-hidden shadow-sm" style="border-color:#2a2a2a">
-                    <div class="px-6 py-4 border-b flex justify-between items-center" style="border-color:#1a1a1a;background:#050505">
+                    <div class="px-6 py-4 border-b flex justify-between items-center"
+                        style="border-color:#1a1a1a;background:#050505">
                         <div>
                             <h3 class="font-bold text-white text-sm flex items-center">Navigator</h3>
-                            <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">Quick
+                            <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
+                                Quick
                                 assistance and platform documentation</p>
                         </div>
                     </div>
@@ -800,10 +773,12 @@
                                         to the upload interface without requiring a full browser refresh.
                                     </div>
                                 </div>
-                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
+                                <div
+                                    class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
                                     <button onclick="toggleHelp('h4')"
                                         class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
-                                        <span class="text-sm font-semibold" style="color:#a89f97">How accurate are UrbanFlow's
+                                        <span class="text-sm font-semibold" style="color:#a89f97">How accurate are
+                                            UrbanFlow's
                                             traffic calculations?</span>
                                         <i id="h4-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
                                     </button>
@@ -816,10 +791,12 @@
                                         human-level perception.
                                     </div>
                                 </div>
-                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
+                                <div
+                                    class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
                                     <button onclick="toggleHelp('h5')"
                                         class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
-                                        <span class="text-sm font-semibold" style="color:#a89f97">What is PCU analysis and
+                                        <span class="text-sm font-semibold" style="color:#a89f97">What is PCU analysis
+                                            and
                                             which speed metrics are calculated?</span>
                                         <i id="h5-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
                                     </button>
@@ -957,16 +934,18 @@
 
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
                     <!-- Left Side: Experience & Requirements (All Selective Choices) -->
-                    <div
-                        class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col" style="border-color:#2a2a2a">
+                    <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 bg-[#050505]" style="border-color:#1a1a1a">
                             <h3 class="font-bold text-white text-sm flex items-center">Experience & Priorities</h3>
-                            <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">Rate your
+                            <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
+                                Rate your
                                 experience</p>
                         </div>
                         <div class="p-6 flex-1 space-y-8">
                             <!-- Overall Experience Centered -->
-                            <div class="flex flex-col items-center justify-center border-b pb-6" style="border-color:#1a1a1a">
+                            <div class="flex flex-col items-center justify-center border-b pb-6"
+                                style="border-color:#1a1a1a">
                                 <label class="text-[10px] font-bold uppercase tracking-widest block mb-3 text-center"
                                     style="color:#a89f97">Overall Experience</label>
                                 <div class="fb-stars" id="fb-stars">
@@ -986,7 +965,8 @@
                                     <div class="flex gap-2" id="fb-recommend">
                                         <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Unlikely')">
                                             <i class="fa-solid fa-face-frown text-xl"></i><span
-                                                class="block mt-1 text-[8px] uppercase">Unlikely</span></div>
+                                                class="block mt-1 text-[8px] uppercase">Unlikely</span>
+                                        </div>
                                         <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Maybe')"><i
                                                 class="fa-solid fa-face-meh text-xl"></i><span
                                                 class="block mt-1 text-[8px] uppercase">Maybe</span></div>
@@ -1094,11 +1074,12 @@
                     </div>
 
                     <!-- Right Side: Categorization & Feedback Text -->
-                    <div
-                        class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col" style="border-color:#2a2a2a">
+                    <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 bg-[#050505]" style="border-color:#1a1a1a">
                             <h3 class="font-bold text-white text-sm flex items-center">Categorization & Feedback</h3>
-                            <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">Detailed
+                            <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
+                                Detailed
                                 workflow insights</p>
                         </div>
                         <div class="p-6 flex-1 flex flex-col space-y-6">
@@ -1106,25 +1087,37 @@
                                 <div>
                                     <label class="text-[10px] font-bold uppercase tracking-widest block mb-3"
                                         style="color:#a89f97">Primary Use Case</label>
-                                    <select class="fb-select w-full" id="fb-usecase">
-                                        <option value="" disabled selected>Select your use case</option>
-                                        <option value="research">Academic Research</option>
-                                        <option value="planning">Urban Planning</option>
-                                        <option value="highway">Business Modelling</option>
-                                        <option value="smartcity">Smart City Investment</option>
-                                        <option value="other">Other...</option>
-                                    </select>
+                                    <div class="uf-select-wrap w-full" id="fb-usecase-wrap">
+                                        <div class="uf-select-trigger" id="fb-usecase-trigger" onclick="ufSelectToggle('fb-usecase')">
+                                            <span class="uf-select-label" id="fb-usecase-label" style="color:#666">Select your use case</span>
+                                            <i class="fa-solid fa-chevron-down uf-select-arrow" id="fb-usecase-arrow"></i>
+                                        </div>
+                                        <div class="uf-select-dropdown hidden" id="fb-usecase-dropdown">
+                                            <div class="uf-select-option" data-value="research" onclick="ufSelectPick('fb-usecase','research','Academic Research')">Academic Research</div>
+                                            <div class="uf-select-option" data-value="planning" onclick="ufSelectPick('fb-usecase','planning','Urban Planning')">Urban Planning</div>
+                                            <div class="uf-select-option" data-value="highway" onclick="ufSelectPick('fb-usecase','highway','Business Modelling')">Business Modelling</div>
+                                            <div class="uf-select-option" data-value="smartcity" onclick="ufSelectPick('fb-usecase','smartcity','Smart City Investment')">Smart City Investment</div>
+                                            <div class="uf-select-option" data-value="other" onclick="ufSelectPick('fb-usecase','other','Other...')">Other...</div>
+                                        </div>
+                                        <input type="hidden" id="fb-usecase" value="">
+                                    </div>
                                 </div>
                                 <div>
                                     <label class="text-[10px] font-bold uppercase tracking-widest block mb-3"
                                         style="color:#a89f97">Feedback Category</label>
-                                    <select class="fb-select w-full" id="fb-type">
-                                        <option value="" disabled selected>General Feedback</option>
-                                        <option value="bug">Technical Issue / Bug Report</option>
-                                        <option value="feature">Feature Request</option>
-                                        <option value="accuracy">Inference Accuracy Review</option>
-                                        <option value="ux">UI/ UX</option>
-                                    </select>
+                                    <div class="uf-select-wrap w-full" id="fb-type-wrap">
+                                        <div class="uf-select-trigger" id="fb-type-trigger" onclick="ufSelectToggle('fb-type')">
+                                            <span class="uf-select-label" id="fb-type-label" style="color:#666">General Feedback</span>
+                                            <i class="fa-solid fa-chevron-down uf-select-arrow" id="fb-type-arrow"></i>
+                                        </div>
+                                        <div class="uf-select-dropdown hidden" id="fb-type-dropdown">
+                                            <div class="uf-select-option" data-value="bug" onclick="ufSelectPick('fb-type','bug','Technical Issue / Bug Report')">Technical Issue / Bug Report</div>
+                                            <div class="uf-select-option" data-value="feature" onclick="ufSelectPick('fb-type','feature','Feature Request')">Feature Request</div>
+                                            <div class="uf-select-option" data-value="accuracy" onclick="ufSelectPick('fb-type','accuracy','Inference Accuracy Review')">Inference Accuracy Review</div>
+                                            <div class="uf-select-option" data-value="ux" onclick="ufSelectPick('fb-type','ux','UI / UX')">UI / UX</div>
+                                        </div>
+                                        <input type="hidden" id="fb-type" value="">
+                                    </div>
                                 </div>
                             </div>
 
@@ -1302,12 +1295,67 @@
             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'); }
+            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
-        setTimeout(function () { openAppModal('shortcutsModal'); }, 800);
+        // Auto-show keyboard shortcuts on every page visit (Desktop only)
+        if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
+            setTimeout(function () { openAppModal('shortcutsModal'); }, 800);
+        }
+    </script>
+    <nav class="mobile-bottom-nav" id="mobile-bottom-nav">
+        <button class="mob-nav-item" id="mob-nav-about" onclick="switchTab('about')">
+            <i class="fa-solid fa-circle-info"></i>
+        </button>
+        <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')">
+            <i class="fa-solid fa-sliders"></i>
+        </button>
+        <button class="mob-nav-item" id="mob-nav-help" onclick="switchTab('help')">
+            <i class="fa-solid fa-circle-question"></i>
+        </button>
+        <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', () => {
+                navigator.serviceWorker.register('./sw.js');
+            });
+        }
     </script>
 </body>
 

requirements.txt

@@ -7,11 +7,7 @@ ultralytics>=8.3.0
 numpy>=1.23.0,<2.0.0
 python-dotenv==1.0.0
 websockets==12.0
-onnxruntime
 openvino>=2024.0.0
-nncf>=2.14.0,<3.0.0
-onnx>=1.12.0
-onnxslim>=0.1.71
 lap>=0.5.12
 resend
 torch==2.1.0+cpu