[data-sync-panel] { margin: 0 0 1.5rem; }
.sync-content { border: 1px solid var(--border, #303645); border-radius: 10px; padding: 1rem 1.2rem; background: var(--bg-raised, #101524); }
.sync-summary, .sync-actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.sync-summary { justify-content: space-between; }
.sync-summary strong { font-size: .95rem; }
.sync-badge { font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; color: var(--text-muted, #8791a7); background: rgba(255,255,255,.06); }
.sync-synced { color: #86d2af; background: rgba(88,190,135,.12); }
.sync-offline, .sync-error { color: #edc282; background: rgba(230,168,73,.1); }
.sync-status, .sync-note, .sync-storage-warning { margin: .55rem 0 0; color: var(--text-muted, #8791a7); font-size: .85rem; line-height: 1.5; }
.sync-storage-warning { color: #edc282; }
.sync-email { display: block; margin-top: .65rem; overflow-wrap: anywhere; font-size: .85rem; }
.sync-actions { margin-top: .7rem; }
.sync-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-top: .8rem; }
.sync-form label { display: flex; flex: 1 1 220px; flex-direction: column; gap: .35rem; font-size: .8rem; color: var(--text-muted, #8791a7); }
.sync-form input { box-sizing: border-box; min-width: 0; width: 100%; }
.sync-form button, .sync-actions button { min-height: 40px; }
.sync-note { font-size: .75rem; }
@media (max-width: 520px) { .sync-content { padding: .9rem; } .sync-form button { width: 100%; } }