.sync-detail{padding:16px 18px;border:1px solid var(--line,#e3deec);border-radius:17px;background:var(--surface-alt,#f6f3fa);display:grid;gap:8px;color:var(--text,#302c38)}
.sync-detail-summary{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.55}.sync-detail-summary strong{font-weight:600}
.sync-detail-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--muted,#a49bac);box-shadow:0 0 0 4px color-mix(in srgb,var(--muted,#a49bac) 12%,transparent);transition:background .2s,box-shadow .2s}
.sync-detail[data-state=synced] .sync-detail-dot{background:#64856a;box-shadow:0 0 0 4px #64856a14}.sync-detail[data-state=error] .sync-detail-dot{background:#b68451}.sync-detail[data-state=pending] .sync-detail-dot,.sync-detail[data-state=syncing] .sync-detail-dot{background:var(--accent,#8a69b5)}
.sync-detail[data-state=syncing] .sync-detail-dot{animation:sync-detail-pulse 1.4s ease-in-out infinite}.sync-detail-help{font-size:11px;line-height:1.8;color:var(--muted,#91869f);margin:0}.sync-detail small{font-size:10px;color:var(--muted,#91869f)}.sync-detail-retry{justify-self:start;margin-top:3px;min-height:34px}
:root:is([data-theme=glass],[data-theme=custom]) .sync-detail{background:linear-gradient(125deg,#ffffff78,#ffffff24);border-color:#ffffff8c;box-shadow:inset 0 1px 0 #ffffffad;backdrop-filter:blur(24px) saturate(135%)}
@keyframes sync-detail-pulse{50%{opacity:.4;transform:scale(.85)}}@media(prefers-reduced-motion:reduce){.sync-detail-dot{animation:none!important;transition:none}}