[hidden] { display: none !important; }
.sync-intro { border-top: 5px solid var(--brand-purple); }
.eyebrow, .step-label { color: var(--brand-purple); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.carer-label { font-size: 12px; color: var(--muted); white-space: nowrap; margin-top: 3px; }
.range-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
button.preset { background: transparent; border: 1px solid #d9ccec; color: var(--brand-purple); font-size: 13px; padding: 8px 12px; border-radius: 24px; width: auto; }
button.preset:hover { background: #f1eafc; }
.date-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.date-field { background: #f5f0fc; border: 1px solid #dfd2f2; border-radius: 12px; padding: 12px; min-width: 0; }
.date-field span { color: var(--brand-purple); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.date-field input { min-width: 0; width: 100%; padding: 10px; border-color: #dfd2f2; }
.range-arrow { color: var(--brand-purple); font-size: 24px; }
.range-summary { font-size: 16px; font-weight: 700; margin: 14px 0 5px; }
.field-hint { color: var(--muted); font-size: 13px; line-height: 1.5; }
.sync-options { margin-top: 18px; border-top: 1px solid #e9e2d1; padding-top: 14px; }
.remove-option { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; margin: 14px 0; line-height: 1.5; }
.remove-option input { flex: 0 0 auto; width: auto; margin-top: 4px; }
.status-card { background: #f5f0fc; border-color: #dfd2f2; color: var(--brand-purple); }
.status-card.error { background: #fff1f0; border-color: #edb9b4; color: #952b28; }
#syncStatus { line-height: 1.5; }
.preview-range { font-size: 13px; font-weight: 700; color: var(--muted); padding-top: 4px; }
.count-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0 24px; }
.count-card { background: #f4f2ed; border: 1px solid #e5e0d5; border-radius: 12px; padding: 14px; }
.count-number { display: block; font-size: 30px; line-height: 1.1; font-weight: 700; margin-bottom: 6px; }
.count-label { font-size: 12px; font-weight: 700; }
.count-create { color: #2d6946; background: #eef8f0; border-color: #d0e6d5; }
.count-update { color: #5f3399; background: #f4edfc; border-color: #e0d3f0; }
.count-delete { color: #9a4529; background: #fff3ed; border-color: #f0d7c9; }
.count-unchanged { color: #626373; }
.sync-changes { max-height: 560px; overflow-y: auto; }
.change-day { margin: 0 0 20px; }
.change-date { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid #e9e2d1; padding-bottom: 10px; margin: 0 0 8px; font-size: 16px; }
.change-date span { color: var(--muted); font-size: 12px; font-weight: 500; }
.change-list { list-style: none; padding: 0; margin: 0; }
.change-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 2px; border-bottom: 1px solid #f0eadc; }
.change-icon { font-size: 18px; text-align: center; font-weight: 700; }
.change-subject { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.change-badge { font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 20px; white-space: nowrap; }
.action-create { color: #2d6946; }
.action-update { color: #5f3399; }
.action-delete { color: #9a4529; }
.action-unchanged { color: #626373; }
.action-create .change-badge { background: #eef8f0; }
.action-update .change-badge { background: #f4edfc; }
.action-delete .change-badge { background: #fff3ed; }
.action-unchanged .change-badge { background: #f0efe9; }
.sync-action { border-top: 2px solid #e3d5f6; margin-top: 20px; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sync-action h3 { margin: 0 0 5px; }
.sync-action button { width: auto; min-width: 190px; flex-shrink: 0; }
.success-banner { display: flex; gap: 16px; background: #e8f6ed; border: 1px solid #b7dac4; border-radius: 14px; padding: 22px; margin-bottom: 24px; color: #24563b; }
.success-icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; background: #28764b; border-radius: 50%; color: white; font-size: 27px; }
.success-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px; }
.success-banner h2 { font-size: 21px; }
.success-banner p { line-height: 1.5; }
.success-banner a { display: inline-block; margin-top: 12px; color: #24563b; font-size: 13px; font-weight: 700; }
.preview-card.completed { border-color: #b7dac4; }
.empty-changes { padding: 18px; background: #f5f0fc; border-radius: 12px; color: var(--muted); }
button:disabled { opacity: .5; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 580px) {
  .section-heading { flex-direction: column; gap: 4px; }
  .date-range { gap: 7px; }
  .date-field { padding: 9px; }
  .date-field input { padding: 9px 4px; font-size: 14px; }
  .count-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-actions { flex-direction: column; align-items: stretch; }
  .profile-actions button { width: 100%; }
  .sync-action { flex-direction: column; align-items: stretch; }
  .sync-action button { width: 100%; }
  .success-banner { padding: 16px; gap: 12px; }
  .success-icon { width: 34px; height: 34px; font-size: 22px; }
  .success-banner h2 { font-size: 18px; }
}