/* FRA Prop HQ v6.27.2 — compact account sync control */
#dashboardSyncButton.dashboard-sync-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 10px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 12%, var(--panel-2)),
    color-mix(in srgb, var(--accent) 5%, var(--panel-2))
  );
  color: color-mix(in srgb, var(--accent) 82%, white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 7px 18px rgba(0,0,0,.16);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .01em;
  white-space: nowrap;
}

#dashboardSyncButton.dashboard-sync-button::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 7h-5V2M4 17h5v5M5.1 9A8 8 0 0 1 18.2 5.2L20 7M4 17l1.8 1.8A8 8 0 0 0 18.9 15'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 7h-5V2M4 17h5v5M5.1 9A8 8 0 0 1 18.2 5.2L20 7M4 17l1.8 1.8A8 8 0 0 0 18.9 15'/%3E%3C/svg%3E") center / contain no-repeat;
}

#dashboardSyncButton.dashboard-sync-button:not(:disabled):hover {
  color: #ecfccb;
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 19%, var(--panel-2)),
    color-mix(in srgb, var(--accent) 9%, var(--panel-2))
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 9px 22px color-mix(in srgb, var(--accent) 10%, transparent);
}

#dashboardSyncButton.dashboard-sync-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.18);
}

#dashboardSyncButton.dashboard-sync-button:disabled {
  opacity: 1;
  color: #758177;
  border-color: rgba(133,150,137,.13);
  background: rgba(255,255,255,.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
  cursor: not-allowed;
}

#dashboardSyncButton.dashboard-sync-button:disabled::before {
  opacity: .72;
}

#dashboardSyncButton.dashboard-sync-button[aria-busy="true"]::before,
#dashboardSyncButton.dashboard-sync-button.is-syncing::before {
  animation: fra-sync-spin .8s linear infinite;
}

@keyframes fra-sync-spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  #dashboardSyncButton.dashboard-sync-button {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
  }
}
