.page {
  padding:32rpx;
  background:var(--color-primary-lighter);
  min-height:100vh;
}

.header {
  text-align:center;
  margin-bottom:32rpx;
}

.title {
  font-size:36rpx;
  font-weight:bold;
  color:var(--color-text-strong);
  display:block;
}

.activity-name {
  font-size:24rpx;
  color:var(--color-text-tertiary);
  display:block;
  margin-top:8rpx;
}

.loading-state, .empty-state {
  text-align:center;
  padding:100rpx 32rpx;
  color:var(--color-text-tertiary);
}

.empty-icon {
  font-size:80rpx;
  color:var(--color-primary-strong);
  display:block;
  margin-bottom:24rpx;
}

.empty-hint {
  font-size:24rpx;
  color:var(--color-text-disabled);
  display:block;
  margin-top:16rpx;
}

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

.match-card {
  background:var(--color-bg-card);
  border-radius:20rpx;
  padding:24rpx;
  display:flex;
  align-items:center;
  box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
}

.match-avatar {
  width:100rpx;
  height:100rpx;
  border-radius:50rpx;
  background:var(--color-bg-subtle);
  flex-shrink:0;
}

.match-info {
  flex:1;
  margin-left:24rpx;
}

.match-name {
  font-size:30rpx;
  font-weight:bold;
  color:var(--color-text-strong);
  display:block;
}

.match-meta {
  font-size:24rpx;
  color:var(--color-text-tertiary);
  display:block;
  margin-top:8rpx;
}

.btn-chat {
  background:var(--color-primary-solid);
  color:var(--color-text-inverse);
  font-size:24rpx;
  padding:12rpx 28rpx;
  border-radius:24rpx;
  border:none;
  line-height:1.4;
}

.btn-refresh {
  margin-top:32rpx;
  background:transparent;
  color:var(--color-text-tertiary);
  border:1rpx solid var(--color-border-strong);
  border-radius:44rpx;
  min-height:var(--tap-min);
  line-height:var(--tap-min);
  font-size:26rpx;
min-width:var(--tap-min);}