.order-tabs {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  border-bottom: 2rpx solid var(--gray-6);
}

.tab-items {
  display: flex;
  padding: 0 24rpx;
}

.tab-item {
  padding: 24rpx 20rpx;
  font-size: 26rpx;
  color: var(--gray-3);
  position: relative;
  white-space: nowrap;
}

.tab-item.active {
  color: var(--primary);
  font-weight: 600;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20rpx;
  right: 20rpx;
  height: 4rpx;
  background: var(--primary);
  border-radius: 4rpx;
}

.order-header {
  margin-bottom: 12rpx;
}

.order-no {
  font-size: 22rpx;
  color: var(--gray-4);
}

.order-status {
  font-size: 24rpx;
  font-weight: 500;
}

.order-status.danger { color: var(--danger); }
.order-status.warning { color: var(--warning); }
.order-status.primary { color: var(--primary); }
.order-status.success { color: var(--success); }
.order-status.gray { color: var(--gray-4); }

.order-items {
  padding: 12rpx 0;
  border-top: 2rpx solid var(--gray-7);
  border-bottom: 2rpx solid var(--gray-7);
}

.order-preview-item {
  display: flex;
  gap: 12rpx;
  padding: 8rpx 0;
}

.order-item-thumb {
  width: 100rpx;
  height: 100rpx;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.oi-name {
  font-size: 24rpx;
}

.oi-price {
  font-size: 22rpx;
  color: var(--gray-4);
}

.oi-subtotal {
  font-size: 22rpx;
}

.order-footer {
  margin-top: 12rpx;
}

.order-time {
  font-size: 22rpx;
  color: var(--gray-4);
}

.order-amount {
  font-size: 24rpx;
}

.order-actions {
  display: flex;
  gap: 16rpx;
  justify-content: flex-end;
  margin-top: 16rpx;
}
