new design

packages/frontend/src/components/PipelineProgress.css

@@ -1,14 +1,14 @@
 /* ── Pipeline Progress ──────────────────────────────────── */
 
 .pipeline-progress {
-  padding: 40px 0;
+  padding: var(--sp-8) 0;
 }
 
 .pipeline-title {
   font-size: 18px;
   font-weight: 600;
   color: var(--text);
-  margin-bottom: 24px;
+  margin-bottom: var(--sp-6);
 }
 
 .pipeline-steps {
@@ -23,15 +23,21 @@
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
-  background: var(--bg-surface);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
+    var(--bg-surface);
+  backdrop-filter: blur(14px) saturate(150%);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
+  border-radius: var(--radius-md);
   font-size: 14px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
 }
 
 .pipeline-step--running {
-  border-color: var(--accent);
-  background: var(--accent-dim);
+  border-color: rgba(232, 168, 124, 0.3);
+  background:
+    linear-gradient(180deg, rgba(232, 168, 124, 0.08), transparent 100%),
+    rgba(28, 25, 42, 0.82);
 }
 
 .pipeline-step--done {