hopeless border fix..

frontend/vehicles.html

@@ -96,8 +96,8 @@
 
         <!-- TAB: About -->
         <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <div
-                class="bg-black border border-slate-800 rounded-xl p-12 shadow-2xl space-y-8 min-h-full flex flex-col justify-center">
+            <div class="max-w-6xl mx-auto w-full">
+                <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">
@@ -132,7 +132,7 @@
                     </p>
                 </div>
 
-                <div class="grid grid-cols-3 gap-8 pt-8 text-left border-t border-slate-900 max-w-5xl mx-auto">
+                <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="space-y-4">
                         <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What You Get
                         </h4>
@@ -205,7 +205,7 @@
                     </div>
                 </div>
 
-                <div class="text-center pt-6 border-t border-slate-900">
+                <div class="text-center pt-6 border-t" style="border-color:#1a1a1a">
                     <p class="text-[13px] leading-relaxed" style="color:#888">
                         We are an applied research team &mdash; that work on solving real problems, not controlled test
                         environments.
@@ -219,6 +219,7 @@
                 </div>
             </div>
         </div>
+    </div>
 
 
         <!-- Progress Bar (shared) -->
@@ -351,16 +352,16 @@
 
         <!-- TAB: Run -->
         <div id="tab-run-details" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <div class="space-y-6 w-full max-w-[1400px]">
+            <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 border-slate-200 shadow-sm overflow-hidden flex flex-col">
-                    <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
+                    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>
-                            <h3 class="font-bold text-slate-800 text-sm">Process Analytics</h3>
+                            <h3 class="font-bold text-sm" style="color:#f0ece6">Process Analytics</h3>
                             <p
-                                class="text-[10px] text-slate-400 mt-0.5 uppercase tracking-widest font-medium text-center">
+                                class="text-[10px] mt-0.5 uppercase tracking-widest font-medium text-center" style="color:#a89f97">
                                 Execution Telemetry</p>
                         </div>
                         <div class="flex items-center gap-3">
@@ -376,7 +377,7 @@
                     <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 border-slate-100 rounded-2xl col-span-3 text-slate-300">
+                                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>
@@ -386,27 +387,27 @@
 
                 <!-- Technical Context Row -->
                 <div class="grid grid-cols-2 gap-6">
-                    <div class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
-                        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
-                            <h3 class="font-bold text-slate-800 text-sm">Stream Source Profile</h3>
+                    <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 border-slate-200 shadow-sm flex flex-col overflow-hidden">
-                        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
-                            <h3 class="font-bold text-slate-800 text-sm">System Resource Utilization</h3>
+                    <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 border-slate-200 shadow-sm flex flex-col overflow-hidden">
-                        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
-                            <h3 class="font-bold text-slate-800 text-sm">Model Architecture &amp; Logic</h3>
+                    <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 border-slate-200 shadow-sm flex flex-col overflow-hidden">
-                        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
-                            <h3 class="font-bold text-slate-800 text-sm">Inference Parameters</h3>
+                    <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>
                         <div class="p-6 space-y-4" id="panel-infer"></div>
                     </div>
@@ -416,9 +417,9 @@
                 <div id="insights-panel" class="hidden">
                     <div class="grid grid-cols-2 gap-6 mt-6">
                         <div
-                            class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
-                            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
-                                <h3 class="font-bold text-slate-800 text-sm flex items-center">Speed Distribution
+                            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.
@@ -430,9 +431,9 @@
                             </div>
                         </div>
                         <div
-                            class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
-                            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
-                                <h3 class="font-bold text-slate-800 text-sm flex items-center">Congestion Insights
+                            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
                                     <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
@@ -540,15 +541,15 @@
         <div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div class="grid grid-cols-2 gap-6 w-full max-w-6xl mx-auto">
                 <!-- Processing Parameters -->
-                <div class="col-span-1 bg-black rounded-xl border border-slate-800 shadow-sm overflow-hidden flex flex-col">
-                    <div class="px-6 py-4 border-b border-slate-800 bg-[#050505]">
+                <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>
                         </h3>
-                        <p class="text-[10px] text-slate-400 mt-0.1 uppercase tracking-widest font-medium">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">
@@ -617,10 +618,10 @@
                 </div>
 
                 <!-- Artifact Generation Settings -->
-                <div class="col-span-1 bg-black rounded-xl border border-slate-800 shadow-sm overflow-hidden flex flex-col">
-                    <div class="px-6 py-4 border-b border-slate-800 bg-[#050505]">
+                <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] text-slate-400 mt-0.1 uppercase tracking-widest font-medium">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">
@@ -737,11 +738,11 @@
         <!-- TAB: Quick Help -->
         <div id="tab-help" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div class="max-w-6xl mx-auto space-y-6">
-                <div class="bg-black border border-slate-800 rounded-xl overflow-hidden shadow-sm">
-                    <div class="px-6 py-4 border-b border-slate-800 bg-[#050505] flex justify-between items-center">
+                <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>
                             <h3 class="font-bold text-white text-sm flex items-center">Knowledge Center</h3>
-                            <p class="text-[10px] text-slate-400 mt-0.1 uppercase tracking-widest font-medium">Quick
+                            <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">Quick
                                 assistance and platform documentation</p>
                         </div>
                     </div>