.record-sync-panel {
  color: var(--suite-ink, #172e43);
  font: 400 18px/1.6 var(--suite-font, 'Source Sans 3', 'Segoe UI', sans-serif);
  min-width: 0;
  overflow-wrap: anywhere;
  container-type: inline-size;
}
.record-sync-panel *, .record-sync-panel *::before, .record-sync-panel *::after { box-sizing: border-box; }
.record-sync-panel h2, #account-sync .record-sync-panel h2 { font: 650 25px/1.3 var(--suite-font, 'Source Sans 3', 'Segoe UI', sans-serif); margin: 0 0 12px; }
.record-sync-panel h3 { font: 650 21px/1.35 var(--suite-font, 'Source Sans 3', 'Segoe UI', sans-serif); margin: 0 0 14px; }
.record-sync-panel h4 { font: 650 18px/1.4 var(--suite-font, 'Source Sans 3', 'Segoe UI', sans-serif); margin: 0 0 12px; }
.record-sync-panel p { font-size: 18px; line-height: 1.6; margin: 0 0 16px; }
.record-sync-panel .record-sync-intro, .record-sync-panel .record-sync-disclosure { color: var(--suite-muted, #526579); }
.record-sync-panel .record-sync-status { background: var(--suite-blue-soft, #eaf3fa); border-left: 3px solid var(--suite-blue, #176b98); border-radius: 3px; margin: 24px 0 20px; padding: 20px 22px; }
.record-sync-status > strong { display: block; font-weight: 650; margin-bottom: 7px; }
.record-sync-status > p:last-child { margin-bottom: 0; }
.record-sync-panel .record-sync-stamp { color: var(--suite-muted, #526579); font-size: 16px; margin-top: 12px; }
.record-sync-panel .record-sync-attention { background: #fff7e8; border-left-color: #916623; }
.record-sync-panel .record-sync-action-error { background: #fcf0f1; border-left: 3px solid #ae3944; color: #8f2d38; padding: 16px 20px; }
.record-sync-panel .record-sync-feedback { border-left: 3px solid var(--suite-line, #dce4ec); padding: 0 0 0 18px; }
.record-sync-action-error[hidden] { display: none; }
.record-sync-panel .record-sync-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 26px; }
.record-sync-panel .record-sync-button { align-items: center; background: white; border: 1px solid #aabac9; border-radius: 5px; color: var(--suite-ink, #172e43); cursor: pointer; display: inline-flex; font: 600 18px/1.4 var(--suite-font, 'Source Sans 3', 'Segoe UI', sans-serif); justify-content: center; min-height: 48px; padding: 11px 18px; text-align: center; text-decoration: none; white-space: normal; }
.record-sync-panel .record-sync-button:hover { background: #f0f5f9; border-color: var(--suite-blue, #176b98); }
.record-sync-panel .record-sync-primary { background: var(--suite-blue, #176b98); border-color: var(--suite-blue, #176b98); color: white; }
.record-sync-panel .record-sync-primary:hover { background: var(--suite-blue-hover, #105276); border-color: var(--suite-blue-hover, #105276); }
.record-sync-panel .record-sync-button:disabled { background: #e9edf1; border-color: #c6d1db; color: #526579; cursor: default; }
.record-sync-panel .record-sync-button:focus-visible { outline: 3px solid #4798ca; outline-offset: 3px; }
.record-sync-panel .record-sync-conflict, .record-sync-panel .record-sync-sessions, .record-sync-panel .record-sync-recovery { border-top: 1px solid var(--suite-line, #dce4ec); margin-top: 30px; padding-top: 26px; }
.record-sync-panel .record-sync-comparison { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0; }
.record-sync-panel .record-sync-version { background: #f5f7f9; border: 1px solid var(--suite-line, #dce4ec); border-radius: 5px; min-width: 0; padding: 18px; }
.record-sync-version dl, .record-sync-version dd { margin: 0; }
.record-sync-version dl { display: grid; gap: 19px; }
.record-sync-version dt { color: var(--suite-muted, #526579); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.record-sync-version dd { font-size: 18px; white-space: pre-wrap; }
.record-sync-panel .record-sync-original-note { color: var(--suite-muted, #526579); font-size: 17px; }
.record-sync-sessions ul { list-style: none; margin: 22px 0 0; padding: 0; }
.record-sync-sessions li { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 20px 0; }
.record-sync-sessions li + li { border-top: 1px solid var(--suite-line, #dce4ec); }
.record-sync-sessions li > div { flex: 1 1 220px; min-width: 0; }
.record-sync-sessions h4 { margin-bottom: 5px; }
.record-sync-sessions li p { color: var(--suite-muted, #526579); margin-bottom: 0; }
.record-sync-recovery ul { margin: 16px 0 22px; padding-left: 24px; }
.record-sync-recovery li + li { margin-top: 10px; }
.record-sync-panel .record-sync-disclosure { border-top: 1px solid var(--suite-line, #dce4ec); margin: 30px 0 0; padding-top: 22px; }
@media (max-width: 760px) {
  body #app .account-page:has(.record-sync-panel) { padding: 0; }
  body #app .account-main:has(.record-sync-panel) { padding: 24px 20px; }
  .record-sync-panel .record-sync-comparison { grid-template-columns: minmax(0, 1fr); }
  .record-sync-panel .record-sync-status { padding: 18px; }
}
@container (max-width: 560px) {
  .record-sync-panel .record-sync-comparison { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 390px) {
  .record-sync-panel .record-sync-actions { flex-direction: column; align-items: stretch; }
  .record-sync-panel .record-sync-button { width: 100%; }
  .record-sync-panel .record-sync-version { padding: 16px; }
}