.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}
#migrationTools{margin:16px 0}#migrationTools>summary{min-height:44px;cursor:pointer;padding:10px 0}
@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}