/* Match the calculator's standard, glass and violet palettes in both modes.
   Explicit scope also overrides legacy styles in previously loaded bundles. */
html:root body .calculator-sync-status {
  background: var(--dk-surface-3, #f8fafc);
  color: var(--dk-success, #047857);
  border-bottom: 1px solid var(--dk-border, #e5e7eb);
}

html:root body .calculator-sync-status:is([data-status="offline"], [data-status="conflict"]) {
  background: var(--crm-dialog-warning-fill, color-mix(in srgb, var(--dk-warning, #92400e) 8%, transparent));
  color: var(--dk-warning, #92400e);
}

html:root body .calculator-sync-status button {
  color: inherit;
}

html:root body .calculator-sync-status button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

html:root body .calculator-sync-loading {
  background: var(--dk-surface-solid, #fff);
  color: var(--dk-text-primary, #1f2937);
  border-color: var(--dk-border-strong, #d1d5db);
}