update

src/style.css

@@ -808,10 +808,10 @@ body {
   .modal-group-id { font-size: 36px; }
 }
 
-/* ── Reset Button in Header/Filter Bar ── */
-.reset-simulation-btn {
+/* ── Sync & Reset Buttons in Header/Filter Bar ── */
+.sync-scores-btn {
   background: var(--bg-element);
-  border: 1px dashed var(--border);
+  border: 1px solid var(--border);
   border-radius: 20px;
   color: var(--text-muted);
   cursor: pointer;
@@ -823,6 +823,40 @@ body {
   align-items: center;
   gap: 6px;
 }
+.sync-scores-btn:hover:not(:disabled) {
+  background: var(--bg-element-hover);
+  border-color: var(--gold);
+  color: var(--gold);
+  transform: translateY(-1px);
+}
+.sync-scores-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+.sync-scores-btn.success {
+  background: rgba(34, 197, 94, 0.1);
+  border-color: rgba(34, 197, 94, 0.4);
+  color: #22c55e;
+}
+.sync-scores-btn.error {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.4);
+  color: #ef4444;
+}
+
+.reset-simulation-btn {
+  background: var(--bg-element);
+  border: 1px dashed var(--border);
+  border-radius: 20px;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-family: inherit; font-size: 12px; font-weight: 600;
+  padding: 6px 14px;
+  transition: all var(--transition);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
 .reset-simulation-btn:hover {
   background: rgba(239, 68, 68, 0.1);
   border-color: rgba(239, 68, 68, 0.4);
@@ -830,6 +864,15 @@ body {
   transform: translateY(-1px);
 }
 
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.spin-anim {
+  animation: spin 1s linear infinite;
+  display: inline-block;
+}
+
 /* ── Group Card Ranks & Points ── */
 .team-rank {
   font-size: 11px;
@@ -997,7 +1040,7 @@ body {
     padding: 10px 6px;
     font-size: 13px;
   }
-  .reset-simulation-btn {
+  .sync-scores-btn, .reset-simulation-btn {
     margin-left: 0;
     margin-top: 10px;
     width: 100%;