.sync-trigger{font-size:12px;max-width:220px;white-space:normal;text-align:left;color:var(--secondary);background:var(--field-surface)}
#syncDialog{width:min(550px,calc(100% - 24px))}
#syncDialog pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 ui-monospace,monospace;background:var(--field-surface);padding:12px;border-radius:var(--radius-field)}
#syncDialog section{padding:12px 0;border-bottom:1px solid var(--separator)}
#syncDialog button{margin:4px 0;overflow-wrap:anywhere}
#syncDialog input[type=file]{max-width:100%}
#syncDialog h2:focus{outline:none}
@media(max-width:480px){.sync-trigger{max-width:155px;font-size:11px}#syncDialog .buttons{flex-wrap:wrap}}

/* Keep both footer actions readable when sync messages or text size grow. */
.app-footer{flex-wrap:wrap}
.app-footer .sync-trigger{min-width:0;max-width:100%;flex:0 1 auto;overflow-wrap:anywhere}
.app-footer .settings-trigger{margin-left:auto}

/* One short status on the footer; explanations live in the existing account dialog. */
.app-footer .sync-trigger{display:inline-flex;align-items:center;gap:8px}
#syncIcon{flex-shrink:0}
.sync-trigger[data-status="saved"] #syncIcon{color:var(--chart-positive)}
.sync-trigger[data-status="attention"] #syncIcon{color:var(--error-color)}
#syncDialog .sync-overview{padding-top:0}
.sync-overview h3{font-size:16px;margin:16px 0 8px}
.sync-overview p{margin:8px 0}
#syncPending:empty,#syncCount:empty,#syncOfflineWarning:empty{display:none}
#syncOfflineWarning{color:var(--secondary)}