Update app.py

app.py

@@ -1687,7 +1687,7 @@ with col_insights:
 if col_speed and col_speed in df.columns:
 
     # --- Threshold FIX > 20 km/h ---
-    high_speed_threshold = 20  
+    high_speed_threshold = 20
 
     # --- Filter High-Speed Fatigue ---
     high_speed_fatigue = df[df[col_speed] > high_speed_threshold]
@@ -1695,32 +1695,39 @@ if col_speed and col_speed in df.columns:
     # --- Persentase ---
     high_speed_pct = (len(high_speed_fatigue) / len(df) * 100) if len(df) > 0 else 0
 
-    # --- Judul ---
-    st.markdown(f"### **High-Speed Fatigue Risk (Speed > {high_speed_threshold} km/h)**")
+    # --- Title (optional) ---
+    st.markdown(f"### High-Speed Fatigue Risk")
 
-    # --- Custom box merah ---
-    st.markdown(
-        f"""
-        <div style="
-            background-color:#d32f2f;
-            padding:18px;
-            border-radius:12px;
-            color:white;
-            font-size:22px;
-            font-weight:600;
-            text-align:center;
-            margin-bottom:10px;
-        ">
-            High-Speed Fatigue Events: {len(high_speed_fatigue)}  
-            <div style="font-size:16px; font-weight:400; margin-top:4px;">
-                {high_speed_pct:.1f}% of total alerts
+    # --- Small centered card (not full width) ---
+    col_left, col_center, col_right = st.columns([1, 2, 1])
+    with col_center:
+        st.markdown(
+            f"""
+            <div style="
+                max-width:320px;
+                margin:6px auto;
+                padding:12px 16px;
+                border-radius:10px;
+                background:#d32f2f;
+                color:#ffffff;
+                text-align:center;
+                box-shadow:0 6px 14px rgba(0,0,0,0.12);
+            ">
+                <div style="font-size:26px; font-weight:700; line-height:1;">
+                    {len(high_speed_fatigue)}
+                </div>
+                <div style="font-size:14px; margin-top:4px; opacity:0.95;">
+                    {high_speed_pct:.1f}% of total alerts
+                </div>
+                <div style="font-size:12px; margin-top:6px; opacity:0.85;">
+                    Speed &gt; {high_speed_threshold} km/h
+                </div>
             </div>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
+            """,
+            unsafe_allow_html=True
+        )
 
-    # --- Risk message ---
+    # --- Risk message below the card ---
     if high_speed_pct > 20:
         st.warning(
             f"High risk: {high_speed_pct:.1f}% of fatigue alerts occur at high speeds. "