.column-detail {
  padding: 24rpx;
  padding-bottom: 132rpx;
  background: #f4f8ff;
}

.column-detail__loading,
.column-detail__error,
.column-detail__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 32rpx;
  color: #9ca3af;
  font-size: 26rpx;
  gap: 24rpx;
}

.column-detail__back-btn {
  margin: 0;
  min-width: 180rpx;
  height: 72rpx;
  line-height: 72rpx;
  border: 0;
  border-radius: 18rpx;
  background: #123e7c;
  color: #ffffff;
  font-size: 26rpx;
  font-weight: 700;
}

.column-detail__back-btn::after {
  border: 0;
}

.column-detail__header {
  padding: 32rpx 16rpx 16rpx;
}

.column-detail__title {
  display: block;
  font-size: 40rpx;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
}

.column-detail__count {
  display: inline-block;
  margin-top: 12rpx;
  padding: 6rpx 20rpx;
  border-radius: 999rpx;
  background: #edf5ff;
  color: #123e7c;
  font-size: 22rpx;
  font-weight: 700;
}

.column-detail__desc {
  padding: 16rpx;
  margin-bottom: 16rpx;
  color: #6b7280;
  font-size: 26rpx;
  line-height: 1.7;
}

.column-detail__cover {
  width: 100%;
  height: 320rpx;
  border-radius: 18rpx;
  margin-bottom: 32rpx;
}

.column-detail__activities {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.column-card {
  padding: 20rpx;
  border: 1rpx solid #e4e9f0;
  border-radius: 18rpx;
  box-shadow: none;
}

.column-card__row {
  display: flex;
  gap: 24rpx;
}

.column-card__media {
  width: 180rpx;
  flex-shrink: 0;
}

.column-card__cover {
  width: 180rpx;
  height: 142rpx;
  border-radius: 14rpx;
  overflow: hidden;
  background: #f3f4f6;
}

.column-card__cover-image,
.column-card__cover-empty {
  width: 100%;
  height: 100%;
}

.column-card__cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 22rpx;
}

.column-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.column-card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 28rpx;
  font-weight: 850;
  color: #111827;
  line-height: 1.45;
}

.column-card__meta {
  margin-top: 18rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.column-card__meta-line {
  font-size: 24rpx;
  color: #6b7280;
  line-height: 1.4;
}

.column-card__footer {
  margin-top: 22rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.column-card__badge {
  min-height: 42rpx;
  padding: 0 18rpx;
  display: flex;
  align-items: center;
  border-radius: 999rpx;
  font-size: 22rpx;
  font-weight: 800;
  white-space: nowrap;
}

.column-card__badge.is-primary {
  background: #123e7c;
  color: #ffffff;
}

.column-card__badge.is-warn {
  background: #fff1df;
  color: #a8550b;
}

.column-card__badge.is-muted {
  background: #f2f4f7;
  color: #667085;
}

.column-card__badge.is-pending {
  background: #edf5ff;
  color: #123e7c;
}

.column-card__button {
  margin: 0;
  min-width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 24rpx;
  border: 0;
  border-radius: 999rpx;
  background: #123e7c;
  color: #ffffff;
  font-size: 24rpx;
  font-weight: 800;
  box-shadow: 0 10rpx 20rpx rgba(18, 62, 124, 0.18);
}

.column-card__button[disabled] {
  background: #e5e7eb;
  color: #9ca3af;
  box-shadow: none;
}

.column-card__button::after {
  border: 0;
}
