/* Shared loader animation: concentric rings with pulse */
.sync-loading-center { display: flex !important; justify-content: center; align-items: center; }
.loader { position: relative; width: 100px; height: 100px; margin: 0 auto; }
.loader::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 10px solid transparent; border-top-color: #3498db; border-radius: 50%; animation: rotate 1.5s linear infinite; }
.loader::after { content: ''; position: absolute; top: 10px; left: 10px; width: 80px; height: 80px; border: 10px solid transparent; border-right-color: #e74c3c; border-radius: 50%; animation: rotate 1s linear infinite reverse; }
.loader .inner { position: absolute; top: 20px; left: 20px; width: 60px; height: 60px; background: linear-gradient(45deg, #9b59b6, #1abc9c); border-radius: 50%; animation: pulse 2s ease-in-out infinite; display: flex; justify-content: center; align-items: center; color: white; font-size: 12px; text-align: center; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }