.process-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  
  .status-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
    min-width: 60px;
    
    .status-text {
      color: white;
      text-align: center;
    }
    
    // 已完成状态 - 绿色背景
    &.status-completed {
      background-color: #10b981;
      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
      
      &:hover {
        background-color: #059669;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
      }
    }
    
    // 进行中状态 - 红色背景
    &.status-in-progress {
      background-color: #ef4444;
      box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
      
      &:hover {
        background-color: #dc2626;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
      }
    }
    
    // 待完成状态 - 黄色背景
    &.status-pending {
      background-color: #f59e0b;
      box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
      
      &:hover {
        background-color: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
      }
    }
  }
  
  .status-separator {
    width: 8px;
    height: 1px;
    background-color: #e5e7eb;
    flex-shrink: 0;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .process-status-bar {
    gap: 4px;
    
    .status-item {
      padding: 4px 8px;
      font-size: 11px;
      min-width: 50px;
    }
    
    .status-separator {
      width: 4px;
    }
  }
}