major fixes & improvements..

backend/engine.py

@@ -194,7 +194,7 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
                 cx = int((box[0] + box[2]) / 2)
                 cy = int((box[1] + box[3]) / 2)
 
-                heatmap_points.append([cx, cy])
+                heatmap_points.append([cx, cy, float(r.boxes.conf.cpu().numpy()[list(ids).index(obj_id)])])
                 track_positions[obj_id].append((frame_idx, cx, cy))
 
                 current = _side((cx, cy), a, b)
@@ -280,4 +280,4 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
     if annotated_path and os.path.exists(annotated_path):
         result["annotated_video"] = annotated_path
 
-    return result
+    return result

backend/visualize.py

@@ -171,9 +171,31 @@ def export_csv(raw_events, out_dir):
     return "raw_data.csv"
 
 def spatial_heatmap(heatmap_points, video_path, out_dir, fmt="png"):
+    """
+    Confidence-Weighted Spatial Density Map (xAI / Explainability Overlay).
+
+    Each detection contributes a Gaussian kernel to the accumulation grid,
+    weighted by the model's own confidence score for that detection.
+    This means the heatmap directly encodes WHERE the model is most certain
+    vehicles exist — making it a faithful spatial explanation of the detector's
+    attention, without requiring backpropagation.
+
+    This is distinct from Grad-CAM (which needs a differentiable classifier) and
+    is the correct xAI approach for a post-processing YOLO/OpenVINO deployment
+    where gradients are not available at runtime.
+
+    Algorithm:
+      1. For each detection (cx, cy, conf): stamp a 2D Gaussian kernel of
+         radius proportional to frame size, weighted by conf.
+      2. Accumulate all weighted kernels into a float32 density grid.
+      3. Apply a mild additional Gaussian blur for visual smoothness.
+      4. Normalize [0, 255], apply COLORMAP_JET.
+      5. Blend over the original frame only where density > threshold.
+      6. Annotate with a legend showing the confidence scale.
+    """
     if not heatmap_points or not video_path or not os.path.exists(video_path):
         return None
-    
+
     cap = cv2.VideoCapture(video_path)
     ret, frame = cap.read()
     cap.release()
@@ -182,32 +204,111 @@ def spatial_heatmap(heatmap_points, video_path, out_dir, fmt="png"):
 
     h, w = frame.shape[:2]
     density = np.zeros((h, w), dtype=np.float32)
-    
+
+    # Kernel radius: ~3% of the shorter dimension, min 20px
+    kernel_r = max(20, int(min(h, w) * 0.03))
+    kernel_size = kernel_r * 2 + 1
+
+    # Pre-build a unit Gaussian kernel to stamp for each detection
+    _kx = cv2.getGaussianKernel(kernel_size, kernel_r / 2.5)
+    _unit_kernel = (_kx @ _kx.T).astype(np.float32)   # shape (ks, ks)
+
     for pt in heatmap_points:
         cx, cy = int(pt[0]), int(pt[1])
-        if 0 <= cx < w and 0 <= cy < h:
-            density[cy, cx] += 1.0
-    
-    density = cv2.GaussianBlur(density, (75, 75), 0)
-    
+        # Support both old [cx, cy] and new [cx, cy, conf] formats
+        conf = float(pt[2]) if len(pt) > 2 else 1.0
+
+        # Kernel bounding box (clip to frame)
+        x0 = max(0, cx - kernel_r)
+        y0 = max(0, cy - kernel_r)
+        x1 = min(w, cx + kernel_r + 1)
+        y1 = min(h, cy + kernel_r + 1)
+
+        # Corresponding slice in the kernel
+        kx0 = x0 - (cx - kernel_r)
+        ky0 = y0 - (cy - kernel_r)
+        kx1 = kx0 + (x1 - x0)
+        ky1 = ky0 + (y1 - y0)
+
+        if x1 > x0 and y1 > y0 and kx1 > kx0 and ky1 > ky0:
+            density[y0:y1, x0:x1] += conf * _unit_kernel[ky0:ky1, kx0:kx1]
+
+    # Mild additional smoothing pass
+    density = cv2.GaussianBlur(density, (31, 31), 0)
+
     max_val = np.max(density)
-    if max_val > 0:
-        density = (density / max_val) * 255.0
-    density = density.astype(np.uint8)
+    if max_val <= 0:
+        return None
+    density_norm = (density / max_val * 255.0).astype(np.uint8)
+
+    heatmap_color = cv2.applyColorMap(density_norm, cv2.COLORMAP_JET)
+
+    # Blend: only paint where density is meaningful (>4% of max)
+    threshold = int(0.04 * 255)
+    mask = density_norm > threshold
 
-    heatmap = cv2.applyColorMap(density, cv2.COLORMAP_JET)
-    mask = density > 10
-    
     overlay = frame.copy()
-    overlay[mask] = cv2.addWeighted(frame[mask], 0.3, heatmap[mask], 0.7, 0).squeeze()
+    # Smooth alpha blend using the density as alpha weight
+    alpha_map = (density_norm.astype(np.float32) / 255.0) * 0.72
+    alpha_map = np.clip(alpha_map, 0, 0.72)
+    for c in range(3):
+        overlay[:, :, c] = np.where(
+            mask,
+            (1.0 - alpha_map) * frame[:, :, c] + alpha_map * heatmap_color[:, :, c],
+            frame[:, :, c]
+        ).astype(np.uint8)
+
+    # ── xAI legend bar ──────────────────────────────────────────────────────
+    # Draw a horizontal colorbar with labels in the bottom-left corner
+    bar_w, bar_h = min(240, w // 4), 14
+    bar_x, bar_y = 16, h - bar_h - 36
+
+    gradient = np.tile(np.arange(256, dtype=np.uint8), (bar_h, 1))
+    gradient_color = cv2.applyColorMap(gradient, cv2.COLORMAP_JET)  # (bar_h, 256, 3)
+    gradient_resized = cv2.resize(gradient_color, (bar_w, bar_h))
+
+    # Semi-transparent background panel behind the legend
+    panel_pad = 10
+    panel = overlay[bar_y - panel_pad : bar_y + bar_h + panel_pad + 18,
+                    bar_x - panel_pad : bar_x + bar_w + panel_pad]
+    if panel.size > 0:
+        dark = np.full_like(panel, 15)
+        overlay[bar_y - panel_pad : bar_y + bar_h + panel_pad + 18,
+                bar_x - panel_pad : bar_x + bar_w + panel_pad] = cv2.addWeighted(panel, 0.35, dark, 0.65, 0)
+
+    overlay[bar_y : bar_y + bar_h, bar_x : bar_x + bar_w] = gradient_resized
+
+    font      = cv2.FONT_HERSHEY_SIMPLEX
+    font_s    = 0.35
+    thickness = 1
+    label_color = (220, 220, 220)
+
+    cv2.putText(overlay, "Low Confidence", (bar_x, bar_y + bar_h + 14),
+                font, font_s, label_color, thickness, cv2.LINE_AA)
+    high_label = "High Confidence"
+    (tw, _), _ = cv2.getTextSize(high_label, font, font_s, thickness)
+    cv2.putText(overlay, high_label, (bar_x + bar_w - tw, bar_y + bar_h + 14),
+                font, font_s, label_color, thickness, cv2.LINE_AA)
+
+    # Title label above the bar
+    title_label = "Detection Confidence Density (xAI)"
+    (ttw, _), _ = cv2.getTextSize(title_label, font, 0.38, thickness)
+    cv2.putText(overlay, title_label,
+                (bar_x, bar_y - panel_pad + 8),
+                font, 0.38, (180, 180, 180), thickness, cv2.LINE_AA)
+    # ── end legend ──────────────────────────────────────────────────────────
 
     if fmt == "pdf":
-        # Wrap OpenCV image in matplotlib for PDF export
         overlay_rgb = cv2.cvtColor(overlay, cv2.COLOR_BGR2RGB)
-        fig, ax = plt.subplots(figsize=(10, 6), facecolor=C_BG)
+        fig, ax = plt.subplots(figsize=(12, 7), facecolor=C_BG)
         ax.imshow(overlay_rgb)
-        ax.set_title("Spatial Density Heatmap", fontsize=13, fontweight="700", color=C_PRIMARY, pad=14)
+        ax.set_title("Detection Confidence Density Map  ·  xAI Spatial Explanation",
+                     fontsize=13, fontweight="700", color=C_PRIMARY, pad=14)
         ax.axis('off')
+        fig.text(0.5, 0.01,
+                 "Brighter regions = higher accumulated detector confidence. "
+                 "Generated from confidence-weighted Gaussian kernel density estimation.",
+                 ha="center", fontsize=7, color=C_ACCENT)
         path = os.path.join(out_dir, "heatmap.pdf")
         fig.savefig(path, dpi=200, bbox_inches="tight", facecolor=C_BG, edgecolor="none")
         plt.close(fig)
@@ -261,4 +362,4 @@ def generate_all(data, model_classes, out_dir, report_format="png"):
         name = fn()
         if name:
             files.append(name)
-    return files
+    return files

frontend/css/vehicles.css

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

frontend/js/vehicles.js

@@ -1096,8 +1096,8 @@ function switchTab(tab) {
             'confidence_dist.png': { title: 'Confidence Curve', desc: 'Distribution of detection confidences' },
             'confidence_dist.pdf': { title: 'Confidence Curve', desc: 'Distribution of detection confidences' },
             'annotated.mp4': { title: 'Annotated Video Export', desc: 'Rendered video with tracking overlays' },
-            'heatmap.png': { title: 'Spatial Density Heatmap', desc: 'Aggregated path utilization mapping' },
-            'heatmap.pdf': { title: 'Spatial Density Heatmap', desc: 'Aggregated path utilization mapping' },
+            'heatmap.png': { title: 'Detection Confidence Density Map', desc: 'xAI spatial explanation — confidence-weighted Gaussian kernel density over all detections' },
+            'heatmap.pdf': { title: 'Detection Confidence Density Map', desc: 'xAI spatial explanation — confidence-weighted Gaussian kernel density over all detections' },
             'raw_data.csv': { title: 'Raw Analytics Export', desc: 'Comma-separated values of all crossings' },
             'analysis.json': { title: 'Structured JSON Export', desc: 'Complete analysis data with metadata for API consumption' }
         };
@@ -1158,11 +1158,9 @@ function switchTab(tab) {
 
                 const isHeatmap = name.includes('heatmap');
                 const tooltipHTML = isHeatmap ? `
-                    <span class="info-wrap ml-1.5 relative inline-flex items-center">
-                        <span class="info-btn cursor-pointer inline-flex items-center justify-center rounded-full border border-neutral-700 bg-neutral-900 text-[8px] text-slate-400 hover:text-white hover:border-slate-400 transition-all" style="width: 14px; height: 14px;">
-                            <i class="fa-solid fa-info"></i>
-                        </span>
-                        <span class="info-tip">Aggregated path utilization mapping. Hot spots represent true accumulated vehicle presence and dwell time across paths.</span>
+                    <span class="info-wrap">
+                        <span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                        <span class="info-tip">Confidence-weighted spatial density map — a faithful xAI explanation of WHERE the detector is most certain vehicles exist. Each detection stamps a Gaussian kernel scaled by its confidence score. Brighter regions = higher accumulated detection confidence.</span>
                     </span>` : '';
 
                 card.innerHTML = `
@@ -1223,13 +1221,15 @@ function switchTab(tab) {
         }
 
     function showRetryBubble() {
+        // Desktop has the sidebar nav always visible — the hint is redundant there.
+        const isMobile = window.innerWidth < 1024;
+        if (!isMobile) return;
+
         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';
 

frontend/vehicles.html

@@ -365,9 +365,10 @@
                     </div>
                     <div class="p-8">
                         <div id="run-results-content" class="grid grid-cols-3 gap-12">
-                            <div class="flex flex-col items-center justify-center p-12 rounded-2xl col-span-3"
-                                style="color:#555">
-                                <span class="text-[11px] font-bold uppercase tracking-[0.2em]">Initiate a run to view performance insights</span>
+                            <div class="flex flex-col items-center justify-center p-12 rounded-2xl col-span-3 text-center w-full"
+                                style="color:#555; min-height: 180px;">
+                                <i class="fa-solid fa-chart-line text-4xl mb-4" style="color:#3a3a3a;"></i>
+                                <span class="text-[11px] font-bold uppercase tracking-[0.2em] block w-full text-center">Initiate a run to view performance insights</span>
                             </div>
                         </div>
                     </div>
@@ -415,10 +416,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-8 flex flex-col items-center justify-center gap-4 min-h-[200px]">
+                class="mb-4 text-center p-8 flex flex-col items-center justify-center gap-4"
+                style="min-height: 60vh;">
+                <i class="fa-solid fa-hourglass-half text-5xl mb-2" style="color:#3a3230;"></i>
+                <div style="color:#c89a6c; font-size:13px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;">
+                    Processing Pending
+                </div>
                 <span id="reports-pending-text"
-                    class="text-xs text-[#a89f97] font-medium tracking-wide uppercase leading-relaxed max-w-[240px]">
-                    Return once processing is complete to access results.
+                    class="text-xs font-medium tracking-wide uppercase leading-relaxed text-center"
+                    style="color:#5a5450; max-width:220px; display:block;">
+                    Upload a video &amp; run analysis to access results and reports here.
                 </span>
             </div>
 
@@ -575,24 +582,22 @@
                                     <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</div>
-                                    <div class="uf-select-option" data-value="pdf" onclick="ufSelectPick('sv-report','pdf','PDF Document')">PDF</div>
+                                    <div class="uf-select-option uf-select-option-active" data-value="png" onclick="ufSelectPick('sv-report','png','PNG')">PNG</div>
+                                    <div class="uf-select-option" data-value="pdf" onclick="ufSelectPick('sv-report','pdf','PDF')">PDF</div>
                                 </div>
                                 <input type="hidden" id="sv-report" value="png">
                             </div>
                         </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>
-                                </div>
+                        <div class="s-row" data-param="annotated">
+                            <div>
+                                <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 id="chip-selector" class="chip-container hidden-chip-container">
+                            <div class="toggle-track" id="sv-annotated" onclick="toggleExportMaster(this)">
+                                <div class="toggle-thumb"></div>
+                            </div>
+                        </div>
+                        <div id="chip-selector" class="chip-container hidden-chip-container" data-param="annotated-chips">
                                 <div class="chip frozen" id="chip-bbox">
                                     <i class="fa-solid fa-check"></i> Bounding Boxes
                                 </div>
@@ -608,7 +613,6 @@
                                 <div class="chip" id="chip-track_id" onclick="toggleChip('track_id')">
                                     <i class="fa-solid fa-plus"></i> Track IDs
                                 </div>
-                            </div>
                         </div>
                         <div class="s-row">
                             <div>