feat(platform): enhance mileage statistics workspace

vehicle-data-platform/apps/web/src/styles/global.css

@@ -430,6 +430,85 @@ body {
   line-height: 20px;
 }
 
+.vp-stat-workspace {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.vp-stat-chart {
+  display: grid;
+  gap: 12px;
+}
+
+.vp-stat-bar-row {
+  min-height: 32px;
+  display: grid;
+  grid-template-columns: 110px minmax(0, 1fr) 96px;
+  align-items: center;
+  gap: 10px;
+}
+
+.vp-stat-bar-label,
+.vp-stat-bar-value {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.vp-stat-bar-value {
+  color: var(--vp-text);
+  text-align: right;
+}
+
+.vp-stat-bar-track {
+  height: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #eef4ff;
+}
+
+.vp-stat-bar-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--vp-primary);
+}
+
+.vp-stat-bar-fill-green {
+  background: var(--vp-success);
+}
+
+.vp-stat-insight-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.vp-stat-definition-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-stat-definition-grid > div {
+  min-height: 104px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+}
+
+.vp-stat-definition-grid p {
+  margin: 10px 0 0;
+  color: var(--vp-text-muted);
+  font-size: 13px;
+  line-height: 20px;
+}
+
 .vp-playback-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 260px;
@@ -603,6 +682,9 @@ body {
   .vp-monitor-layout,
   .vp-alert-flow,
   .vp-alert-ops-grid,
+  .vp-stat-workspace,
+  .vp-stat-insight-grid,
+  .vp-stat-definition-grid,
   .vp-playback-layout,
   .vp-playback-timeline {
     grid-template-columns: 1fr;