.activity-page {
  padding: 24rpx;
}

.tabs {
  white-space: nowrap;
  margin-bottom: 24rpx;
}

.category-tip {
  margin-bottom: 20rpx;
  color: #8a8f99;
  font-size: 24rpx;
}

.tab-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140rpx;
  height: 72rpx;
  margin-right: 16rpx;
  border-radius: 999rpx;
  background: #ffffff;
  color: #666666;
}

.tab-item-active {
  background: #e8593c;
  color: #ffffff;
}

.activity-card {
  overflow: hidden;
  background: #ffffff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 14rpx 36rpx rgba(20, 28, 40, 0.06);
}

.cover {
  width: 100%;
  height: 280rpx;
  background: #f0f0f0;
}

.cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
}

.card-body {
  padding: 24rpx;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 12rpx;
}

.status-pill {
  padding: 8rpx 18rpx;
  border-radius: 999rpx;
  font-size: 22rpx;
  white-space: nowrap;
}

.status-active {
  background: #e9f9ef;
  color: #2f9a57;
}

.status-finished {
  background: #f0f2f5;
  color: #7d8795;
}

.status-default {
  background: #fff4e8;
  color: #db8a2d;
}

.meta {
  color: #666666;
  margin-bottom: 10rpx;
}

.progress-block {
  margin-top: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  background: #f8f8fb;
}

.progress-label,
.progress-summary {
  font-size: 24rpx;
  color: #666666;
}

.progress-track {
  height: 14rpx;
  margin: 14rpx 0;
  border-radius: 999rpx;
  background: #ebeef3;
  overflow: hidden;
}

.progress-value {
  height: 100%;
  border-radius: 999rpx;
  background: linear-gradient(90deg, #ffae7b, #e8593c);
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.register {
  color: #e8593c;
}

.arrow {
  color: #999999;
}