.sync-strip { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px; width: min(100%,440px); min-height: 46px; margin: 0 auto; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid #f0e1da; color: #826c61; background: rgba(255,248,242,.97); backdrop-filter: blur(15px); }.sync-strip #sync-status { flex: 1; min-width: 0; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }.sync-button { padding: 9px 12px; border: 1px solid #efd9cc; border-radius: 12px; color: #a76857; background: #fff5ee; font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer; }.sync-strip .sync-button { flex: 0 0 auto; padding: 7px; font-size: 10px; }.sync-strip [hidden] { display: none; }.has-sync-strip .phone-shell { margin-top: 0; }.sync-dialog { width: min(calc(100% - 24px),420px); max-height: calc(100dvh - 32px); padding: 0; overflow-y: auto; border: 0; border-radius: 25px; color: #3d2927; background: #fffdfb; box-shadow: 0 20px 70px #58372c33; }.sync-dialog::backdrop { background: #432a2357; backdrop-filter: blur(4px); }.sync-card { padding: 23px 20px; }.sync-close { float: right; position: sticky; top: 0; }.sync-eyebrow { margin: 0 0 8px; color: #b89781; font-size: 9px; letter-spacing: .16em; }.sync-card h2 { margin: 5px 0 18px; font-size: 23px; }.sync-card h3 { margin: 23px 0 10px; font-size: 16px; }.sync-card p { font-size: 12px; line-height: 1.9; }.sync-card form { margin: 18px 0; padding: 2px 0 18px; border-bottom: 1px solid #f0e1da; }.sync-field { display: block; margin: 12px 0; color: #92776c; font-size: 12px; line-height: 1.7; }.sync-field input,.sync-field select { display: block; width: 100%; min-width: 0; margin: 6px 0; padding: 12px; border: 1px solid #f0e1da; border-radius: 12px; color: #3d2927; background: #fff8f2; font: inherit; font-size: 16px; }.sync-card .sync-button { margin: 5px 5px 5px 0; }.sync-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; color: #92776c; font-size: 12px; line-height: 1.8; }.sync-check input { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0; accent-color: #df695f; }.sync-warning,.sync-install-tip { padding: 12px; border-radius: 13px; color: #8b705c; background: #fff3e7; }.sync-message { clear: both; color: #c16752; overflow-wrap: anywhere; }.sync-card input[readonly] { font-family: ui-monospace,monospace; font-size: 12px; }.sync-dialog input:focus-visible,.sync-dialog button:focus-visible { outline: 3px solid #f1847877; outline-offset: 2px; }body[data-sync-locked=true] .sync-strip { border-bottom-color: #e3be8d; background: #fff2de; }body[data-sync-locked=true] #app .primary-button:not([data-sync-readonly]) { opacity: .65; }
.sync-modal-note { position: sticky; bottom: 0; margin-top: 14px; padding: 12px; border: 1px solid #e3be8d; border-radius: 12px; background: #fff2de; color: #8b705c; font-size: 12px; box-shadow: 0 -4px 16px #fffdfbcc; }.sync-modal-note p { margin: 0 0 5px; line-height: 1.6; }
@media (max-width: 350px) { .sync-strip { padding-left: 8px; padding-right: 8px; gap: 4px; }.sync-strip .sync-button { padding: 6px 5px; } }