diff --git a/src/web/templates/index.html b/src/web/templates/index.html
index 137c170..aceada3 100644
--- a/src/web/templates/index.html
+++ b/src/web/templates/index.html
@@ -107,19 +107,22 @@
         }
         .bottom-bar {
             display: flex;
-            align-items: center;
+            align-items: stretch;
             justify-content: center;
-            gap: 8px;
-            padding: 6px 8px;
+            gap: 6px;
+            padding: 4px 8px;
             background: #0d0d20;
             border-top: 1px solid #222;
+            height: 80px;
+            flex-shrink: 0;
         }
         .cam-thumb {
-            width: 200px;
+            height: 100%;
             flex-shrink: 0;
         }
         .cam-thumb img {
-            width: 100%;
+            height: 100%;
+            width: auto;
             border-radius: 4px;
             border: 1px solid #222;
             display: block;
@@ -128,33 +131,35 @@
         /* Sidebar panel (unused, kept for compat) */
         .sidebar-panel { display: none; }
         .btn-calibrate {
-            width: 100%;
-            padding: 8px 12px;
+            padding: 3px 8px;
             background: #4ecca3;
             color: #000;
             border: none;
-            border-radius: 6px;
-            font-size: 13px;
+            border-radius: 4px;
+            font-size: 9px;
             font-weight: 600;
             cursor: pointer;
-            transition: all 0.2s;
         }
         .btn-calibrate:hover { background: #3dbb92; }
         .btn-calibrate:disabled { background: #333; color: #666; cursor: not-allowed; }
         .calibrate-status {
-            font-size: 11px;
+            font-size: 8px;
             color: #666;
-            line-height: 1.6;
         }
         .calibrate-status .ok { color: #4ecca3; }
         .calibrate-status .fail { color: #ff4444; }
 
-        /* VAR panel (bottom bar version) */
+        /* VAR panel card */
         .var-panel-bottom {
             display: flex;
-            align-items: center;
-            gap: 10px;
-            padding: 4px 12px;
+            flex-direction: column;
+            justify-content: center;
+            gap: 2px;
+            padding: 4px 8px;
+            background: #111128;
+            border: 1px solid #2a2a4a;
+            border-radius: 4px;
+            font-size: 9px;
         }
         .var-indicator {
             display: flex;
@@ -208,31 +213,31 @@
             height: 60px;
         }
 
-        /* Camera params card (vertical) */
+        /* Camera params card */
         .cam-card {
             display: flex;
             flex-direction: column;
-            gap: 2px;
-            padding: 6px 10px;
+            justify-content: center;
+            gap: 1px;
+            padding: 4px 8px;
             background: #111128;
             border: 1px solid #2a2a4a;
-            border-radius: 6px;
-            font-size: 11px;
+            border-radius: 4px;
+            font-size: 9px;
             color: #888;
-            min-width: 120px;
         }
         .cc-title {
-            font-size: 10px;
+            font-size: 8px;
             font-weight: 700;
-            color: #666;
+            color: #555;
             text-transform: uppercase;
             letter-spacing: 0.5px;
-            margin-bottom: 2px;
         }
         .cc-item {
             display: flex;
             justify-content: space-between;
-            gap: 8px;
+            gap: 6px;
+            line-height: 1.2;
         }
         .cc-item b {
             color: #4ecca3;
@@ -240,7 +245,7 @@
         }
         .cc-divider {
             border-top: 1px solid #2a2a4a;
-            margin: 3px 0;
+            margin: 1px 0;
         }
 
         /* Event banner */
@@ -346,13 +351,9 @@
                     <div class="var-dot" id="varDot"></div>
                     <div class="var-label" id="varLabel">VAR</div>
                 </div>
-                <div class="var-info" id="varInfo">
-                    <div class="var-line" id="varLine">No events</div>
-                    <div class="var-timer" id="varTimer"></div>
-                    <div class="var-dist" id="varDist"></div>
-                </div>
-                <img class="var-snapshot" id="varSnapshot" style="display:none">
-                <div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div>
+                <div class="var-line" id="varLine" style="color:#ccc;font-size:9px">No events</div>
+                <div class="var-timer" id="varTimer" style="color:#ff6666;font-size:10px;font-weight:700"></div>
+                <div class="var-dist" id="varDist" style="color:#888;font-size:9px"></div>
             </div>
         </div>
     </div>
@@ -923,9 +924,12 @@ setInterval(function() {
             // Show snapshot
             if (data.snapshot_b64) {
                 var img = document.getElementById('varSnapshot');
-                img.src = 'data:image/jpeg;base64,' + data.snapshot_b64;
-                img.style.display = 'block';
-                document.getElementById('varSnapshotEmpty').style.display = 'none';
+                if (img) {
+                    img.src = 'data:image/jpeg;base64,' + data.snapshot_b64;
+                    img.style.display = 'block';
+                }
+                var empty = document.getElementById('varSnapshotEmpty');
+                if (empty) empty.style.display = 'none';
             }
         })
         .catch(function() {});