.client-sync-save-status { position: fixed; z-index: 1100; bottom: 12px; left: max(16px, 22vw); max-width: calc(100vw - 32px); padding: 8px 12px; border: 1px solid var(--color-border, #dce3ed); border-radius: 8px; color: var(--color-text-secondary, #526174); background: #fff; box-shadow: 0 2px 8px #18294c0a; font-size: var(--text-body-sm); line-height: 1.5; pointer-events: none; }
html .compare-selection-dock { bottom: max(24px, var(--client-sync-notice-bottom-space, 0px)); }
html .client-sync-notice { position: fixed; z-index: 1100; bottom: 16px; left: max(16px, 22vw); right: auto; width: max-content; max-width: min(760px, 76vw); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 16px; border: 1px solid #dce4ef; border-radius: 14px; color: #34455e; background: #fff; box-shadow: 0 6px 24px #2338570f; font-size: 14px; line-height: 1.5; }
.client-sync-status-copy { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.client-sync-status-copy > span:last-child { overflow-wrap: anywhere; }
.client-sync-status-copy strong { font-weight: 600; color: #263b59; }
.client-sync-status-dot { width: 7px; height: 7px; flex: 0 0 auto; background: #bd852e; border-radius: 50%; }
.client-sync-status-note { margin-left: 12px; color: #69778b; }
html .client-sync-notice button, .client-sync-dialog button { font: inherit; font-size: 14px; font-weight: 600; border: 1px solid #d9e1ec; border-radius: 9px; padding: 9px 14px; color: #344966; background: #fff; cursor: pointer; transition: background .16s, border-color .16s; }
html .client-sync-notice .client-sync-open { border: 0; padding: 5px 0 5px 8px; color: #285ec8; white-space: nowrap; }
.client-sync-open span { padding-left: 6px; }
html .client-sync-notice button:hover, .client-sync-dialog button:hover { background: #f1f5fc; border-color: #adbfda; }
html .client-sync-notice button:focus-visible, .client-sync-dialog button:focus-visible, .client-sync-dialog summary:focus-visible, .client-sync-dialog input:focus-visible { outline: 3px solid #2f67df; outline-offset: 3px; }
.client-sync-dialog-overlay { position: fixed; inset: 0; z-index: 1400; background: #14213c55; }
.client-sync-dialog { position: fixed; z-index: 1401; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(800px, calc(100vw - 40px)); max-height: min(84dvh, 860px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e0e6f0; border-radius: 20px; color: #33445e; background: #fff; box-shadow: 0 24px 90px #0f254233; font-family: inherit; font-size: 15px; line-height: 1.65; }
.client-sync-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 26px 28px 20px; border-bottom: 1px solid #e7ecf3; }
.client-sync-eyebrow { display: block; font-size: 12px; color: #6b7d94; font-weight: 600; letter-spacing: .06em; }
.client-sync-dialog-header h2 { margin: 5px 0 7px; font-size: 23px; line-height: 1.4; font-weight: 650; color: #203b64; }
.client-sync-dialog-header p { margin: 0; color: #64748b; font-size: 14px; }
.client-sync-dialog .client-sync-close { padding: 0; width: 34px; height: 34px; flex: 0 0 34px; border-color: transparent; font-size: 25px; line-height: 1; font-weight: 400; color: #64748b; }
.client-sync-dialog-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 20px 28px 26px; }
.client-sync-dialog-body > p { margin: 0 0 14px; }
.client-sync-context { color: #42556f; }
.client-sync-safety-note { font-size: 14px; color: #64748b; }
.client-sync-backup { display: flex; gap: 16px; align-items: center; margin: 18px 0 22px; padding: 14px 0; border-block: 1px solid #e8edf4; }
.client-sync-backup button { flex: 0 0 auto; }
.client-sync-backup p { margin: 0; font-size: 13px; line-height: 1.65; color: #64748b; }
.client-sync-conflicts { margin: 0; padding: 0; list-style: none; }
.client-sync-conflicts > li { margin: 0 0 26px; padding: 0; }
.client-sync-conflicts h3 { margin: 0 0 5px; font-size: 16px; font-weight: 650; color: #263e60; overflow-wrap: anywhere; }
.client-sync-fields { margin: 0 0 10px; color: #697a91; font-size: 13px; }
.client-sync-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.client-sync-versions section { min-width: 0; padding: 16px; border: 1px solid #e2e8f1; background: #f8fafe; border-radius: 10px; }
.client-sync-versions h4 { margin: 0 0 10px; font-size: 13px; font-weight: 650; color: #506481; }
.client-sync-versions p { margin: 5px 0; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; white-space: pre-wrap; }
.client-sync-dialog pre { font: inherit; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.client-sync-baseline { margin-bottom: 12px; font-size: 13px; color: #64748b; }
.client-sync-baseline summary { cursor: pointer; width: fit-content; margin-bottom: 8px; }
.client-sync-approval { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 14px; }
.client-sync-approval input { margin: 5px 0 0; width: 16px; height: 16px; flex: 0 0 auto; accent-color: #3568d7; }
.client-sync-confirmation h3 { margin: 0 0 14px; color: #203b64; font-size: 20px; }
.client-sync-confirmation p { margin: 0 0 16px; }
.client-sync-confirmation ul { margin: 0 0 20px; padding-left: 22px; }
.client-sync-confirmation li { padding: 4px 0; overflow-wrap: anywhere; }
.client-sync-review-actions { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 28px; border-top: 1px solid #e7ecf3; background: #fff; }
.client-sync-choice-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.client-sync-dialog .client-sync-primary { background: #2c62d6; border-color: #2c62d6; color: #fff; }
.client-sync-dialog .client-sync-primary:hover { background: #214eb3; border-color: #214eb3; }
.client-sync-dialog button:disabled, html .client-sync-notice button:disabled { opacity: .5; cursor: not-allowed; }
.client-sync-error { width: 100%; margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid #c65548; background: #fff5f3; color: #9d372b; font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .client-sync-save-status { left: 12px; right: 12px; width: fit-content; }
  html .client-sync-notice { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; gap: 8px; padding: 10px 12px; }
  .client-sync-status-note { display: block; margin-left: 0; font-size: 12px; }
  .client-sync-dialog { width: calc(100vw - 20px); max-height: 90dvh; border-radius: 16px; }
  .client-sync-dialog-header { gap: 14px; padding: 20px 18px 16px; }
  .client-sync-dialog-header h2 { font-size: 20px; }
  .client-sync-dialog-body { padding: 16px 18px 20px; }
  .client-sync-versions { grid-template-columns: minmax(0, 1fr); }
  .client-sync-backup { align-items: flex-start; flex-direction: column; gap: 8px; }
  .client-sync-review-actions { padding: 14px 18px; align-items: stretch; flex-wrap: wrap; }
  .client-sync-choice-actions { width: 100%; }
  .client-sync-choice-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { html .client-sync-notice button, .client-sync-dialog button { transition: none; } }

/* T1 compatibility: override the published relative banner without changing app-main layout. */
html .app-main > .client-sync-notice { position: fixed; inset: auto  auto 16px max(16px, 22vw); z-index: 1100; flex: none; margin: 0; min-width: 0; width: max-content; max-width: min(760px, 76vw); max-height: none; overflow: visible; padding: 12px 16px; gap: 12px 24px; }
@media (max-width: 700px) { html .app-main > .client-sync-notice { inset: auto 12px 12px; width: auto; max-width: none; max-height: none; margin: 0; padding: 10px 12px; gap: 8px; } }