feat: Improved sync editor

src/index.css

@@ -138,4 +138,40 @@
     width: 4px;
     border-radius: 0 4px 4px 0;
   }
+
+  /* ── Sync cup indicator ── */
+  .sync-cup-success {
+    animation: sync-cup-fade 2.4s ease-in-out forwards;
+  }
+
+  @keyframes sync-cup-fade {
+    0%   { opacity: 0; transform: scale(0.88); }
+    8%   { opacity: 1; transform: scale(1); }
+    68%  { opacity: 1; }
+    100% { opacity: 0; }
+  }
+
+  .sync-steam {
+    opacity: 0;
+  }
+
+  .sync-steam-1 { animation: sync-steam-rise 1.4s ease-out 0.1s forwards; }
+  .sync-steam-2 { animation: sync-steam-rise 1.4s ease-out 0.3s forwards; }
+  .sync-steam-3 { animation: sync-steam-rise 1.4s ease-out 0.5s forwards; }
+
+  @keyframes sync-steam-rise {
+    0%   { opacity: 0; transform: translateY(0); }
+    25%  { opacity: 0.5; }
+    100% { opacity: 0; transform: translateY(-4px); }
+  }
+
+  .sync-check {
+    stroke-dasharray: 14;
+    stroke-dashoffset: 14;
+    animation: sync-check-draw 0.45s ease-out 0.65s forwards;
+  }
+
+  @keyframes sync-check-draw {
+    to { stroke-dashoffset: 0; }
+  }
 }