css restoration in initial files..

frontend/css/initial.css

@@ -9,8 +9,10 @@
 
 body {
     font-family: 'Montserrat', sans-serif;
-    background-color: #000000;
+    background-color: #000000 !important;
     color: var(--t1);
+    margin: 0;
+    padding: 0;
 }
 
 .fade-in {
@@ -29,53 +31,102 @@ body {
     }
 }
 
-/* Executive Overrides */
-.traffic-dynamics-card {
+/* Executive Overrides for Pure Black Theme */
+.bg-black {
+    background-color: #000000 !important;
+}
+
+.bg-neutral-950 {
+    background-color: #050505 !important;
+}
+
+.bg-neutral-900 {
     background-color: #0a0a0a !important;
+}
+
+.text-white {
+    color: #f0ece6 !important;
+}
+
+.traffic-dynamics-card {
+    background-color: #050505 !important;
     border: 2px solid var(--cocoa) !important;
+    transition: all 0.3s ease;
 }
 
 .traffic-dynamics-card:hover {
     border-color: var(--cocoa-l) !important;
+    transform: translateY(-4px);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
 }
 
 #dropzone {
     transition: all 0.2s ease;
-    border-color: #2a2a2a;
+    border-color: #2a2a2a !important;
+    background-color: #020202 !important;
 }
 
 #dropzone:hover {
     border-color: var(--cocoa-l) !important;
-    background-color: #0a0a0a !important;
+    background-color: #050505 !important;
 }
 
 .core-badge {
     background-color: var(--cocoa) !important;
-    color: var(--t1) !important;
+    color: #000 !important;
+    font-weight: 800;
 }
 
 /* Onboarding */
 .onboard-overlay {
     position: fixed; inset: 0; z-index: 9999;
-    background: rgba(0,0,0,0.92);
+    background: rgba(0,0,0,0.95);
     display: flex; align-items: center; justify-content: center;
+    backdrop-filter: blur(4px);
 }
+
 .onboard-card {
-    background: #0a0a0a; border: 1px solid #2a2a2a;
-    border-radius: 16px; max-width: 440px; width: 90%;
+    background: #050505; border: 1px solid #2a2a2a;
+    border-radius: 20px; max-width: 440px; width: 90%;
     padding: 40px 32px; text-align: center;
+    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
 }
+
 .onboard-step { display: none; }
 .onboard-step.active { display: block; }
-.onboard-dots { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
+
+.onboard-dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
 .onboard-dot {
-    width: 8px; height: 8px; border-radius: 50%;
-    background: #333; transition: background 0.2s;
+    width: 6px; height: 6px; border-radius: 50%;
+    background: #222; transition: all 0.3s ease;
+}
+.onboard-dot.active { 
+    background: var(--cocoa-l); 
+    transform: scale(1.3);
+}
+
+#btn-proceed {
+    background-color: #c89a6c !important;
+    color: #000000 !important;
+    border: none !important;
+    box-shadow: 0 4px 15px rgba(200, 154, 108, 0.3) !important;
+    transition: all 0.3s ease !important;
+}
+
+#btn-proceed:hover {
+    background-color: #d4b08a !important;
+    transform: scale(1.05) translateY(-2px) !important;
+    box-shadow: 0 8px 25px rgba(200, 154, 108, 0.4) !important;
+}
+
+#upload-bar {
+    background-color: #c89a6c !important;
 }
-.onboard-dot.active { background: var(--cocoa-l); }
 
 /* Mobile responsive */
 @media (max-width: 768px) {
-    main { grid-template-columns: 1fr !important; padding: 16px !important; }
-    h1 { font-size: 2.2rem !important; }
+    main { grid-template-columns: 1fr !important; padding: 24px 16px !important; }
+    h1 { font-size: 2.5rem !important; line-height: 1.2 !important; }
+    header { mt-8 !important; }
 }
+

frontend/initial.html

@@ -125,7 +125,7 @@
 
                 <div class="flex flex-col items-center gap-3">
                     <button id="btn-proceed" onclick="startRun()"
-                        class="w-fit px-16 py-3.5 rounded-full font-bold transition-all text-center text-sm shadow-lg hover:scale-105 active:scale-95" style="background:#c89a6c;color:#000">
+                        class="w-fit px-16 py-3.5 rounded-full font-bold text-center text-sm shadow-lg">
                         Continue &nbsp;&rarr;
                     </button>
                     <button onclick="resetCanvas()"

frontend/js/initial.js

@@ -115,12 +115,19 @@ let imgNatW = 0, imgNatH = 0;
 
 function loadFirstFrame() {
     const img = document.getElementById('frame-img');
+    const placeholder = document.getElementById('frame-placeholder');
+    
+    img.onerror = () => {
+        console.error('Failed to load first frame');
+        placeholder.innerHTML = '<i class="fa-solid fa-circle-exclamation text-4xl mb-3 text-red-500 opacity-50"></i><span class="font-bold text-[10px] uppercase tracking-widest opacity-50">Frame Load Error</span>';
+    };
+
     img.src = '/first-frame/' + videoId;
     img.onload = () => {
         imgNatW = img.naturalWidth;
         imgNatH = img.naturalHeight;
         img.style.display = 'block';
-        document.getElementById('frame-placeholder').style.display = 'none';
+        placeholder.style.display = 'none';
         initCanvas();
     };
 }

frontend/vehicles.html

@@ -731,7 +731,7 @@
                             <!-- Emojis Grid -->
                             <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                 <div>
-                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Recommend Product to a friend/colleague</label>
+                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Recommend Product</label>
                                     <div class="flex gap-2" id="fb-recommend">
                                         <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Unlikely')"><i class="fa-solid fa-face-frown text-xl"></i><span class="block mt-1 text-[8px] uppercase">Unlikely</span></div>
                                         <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Maybe')"><i class="fa-solid fa-face-meh text-xl"></i><span class="block mt-1 text-[8px] uppercase">Maybe</span></div>