#syncGroupsRoot { color: var(--text-primary, #162235); }
#syncGroupsRoot .sync-head, #syncGroupsRoot .sync-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
#syncGroupsRoot .sync-head { justify-content: space-between; margin-bottom: 1rem; }
#syncGroupsRoot h2 { font-size: 1.3rem; font-weight: 700; }
#syncGroupsRoot h3 { font-size: 1rem; font-weight: 700; margin-bottom: .7rem; }
#syncGroupsRoot p, #syncGroupsRoot small { color: var(--text-muted, #64748b); font-size: .85rem; }
#syncGroupsRoot .sync-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
#syncGroupsRoot .sync-card { background: var(--surface, #fff); border: 1px solid var(--border, #dbe4ef); border-radius: .7rem; padding: 1rem; margin-bottom: 1rem; }
#syncGroupsRoot label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
#syncGroupsRoot .sync-card > label, #syncGroupsRoot .sync-card > .sync-row, #syncGroupsRoot .sync-card > .sync-days { margin-bottom: .8rem; }
#syncGroupsRoot .sync-steps { margin: 0 0 1rem; padding: .8rem 1rem .8rem 2.2rem; background: var(--surface, #fff); border: 1px solid var(--border, #dbe4ef); border-radius: .7rem; font-size: .85rem; color: var(--text-muted, #64748b); }
#syncGroupsRoot .sync-steps strong { color: var(--text-primary, #162235); }
#syncGroupsRoot .sync-note { min-height: 1.2rem; margin-top: .5rem; font-weight: 600; color: #137a43; }
#syncGroupsRoot .sync-note.sync-error { color: #b42318; }
#syncGroupsRoot input:not([type=checkbox]):not([type=radio]), #syncGroupsRoot select { background: var(--surface, #fff); color: inherit; border: 1px solid var(--border, #cbd5e1); border-radius: .4rem; padding: .5rem; min-width: 0; }
#syncGroupsRoot button { border: 1px solid var(--border, #94a3b8); border-radius: .4rem; padding: .4rem .65rem; background: var(--surface, #fff); color: inherit; cursor: pointer; }
#syncGroupsRoot button:hover { border-color: #4264bd; }
#syncGroupsRoot button:focus-visible, #syncGroupsRoot input:focus-visible, #syncGroupsRoot select:focus-visible { outline: 2px solid #4264bd; outline-offset: 2px; }
#syncGroupsRoot ul, #syncGroupsRoot ol { margin: .65rem 0; padding-left: 1.4rem; }
#syncGroupsRoot li { margin: .3rem 0; }
#syncGroupsRoot .sync-items li { display: flex; align-items: center; gap: .3rem; }
#syncGroupsRoot .sync-items li span { flex: 1; overflow-wrap: anywhere; }
#syncGroupsRoot .sync-days { display: flex; flex-wrap: wrap; gap: .65rem; margin: .5rem 0; }
#syncGroupsRoot .sync-days label { flex-direction: row; align-items: center; }
#syncGroupsRoot .sync-member { display: grid; grid-template-columns: minmax(8rem, 1fr) 4rem 4rem minmax(9rem, 1fr); align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border, #e2e8f0); }
#syncGroupsRoot .sync-member-head { font-weight: 700; }
#syncGroupsRoot fieldset { margin: 1rem 0; }
#syncGroupsRoot .sync-group-list article { border-top: 1px solid var(--border, #e2e8f0); padding: .8rem 0; }
#syncGroupsRoot .sync-status { font-weight: 700; }
#syncGroupsRoot .sync-staged { color: #137a43; }
#syncGroupsRoot .sync-failed, #syncGroupsRoot .sync-error { color: #b42318; }
#syncGroupsRoot .sync-pending { color: #a05a00; }
@media (max-width: 700px) { #syncGroupsRoot .sync-grid { grid-template-columns: 1fr; } #syncGroupsRoot .sync-member { grid-template-columns: minmax(6rem,1fr) 3rem 3rem minmax(6rem,1fr); font-size: .8rem; } }

#syncGroupsRoot h2 { display: flex; align-items: center; gap: .5rem; }
#syncGroupsRoot .sync-help { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; font-size: .9rem; font-weight: 700; color: var(--text-muted); }
#syncGroupsRoot dialog { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; margin: auto; padding: 1.2rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--surface); color: var(--text-primary); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2); }
#syncGroupsRoot dialog::backdrop { background: rgba(0, 0, 0, .45); }
#syncGroupsRoot .sync-help-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#syncGroupsRoot .sync-help-heading h3 { margin: 0; }
#syncGroupsRoot dialog .sync-steps { border: 0; padding-left: 1.2rem; }