xiangqinxiaochengxu/miniprogram/pages/match/match.wxss

.match-page {
  padding: 24rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff8f4 0%, #f6f7fb 100%);
}

.match-page-activity {
  padding-top: 20rpx;
}

.loading-tip {
  text-align: center;
  padding: 40rpx;
  color: #9d7e74;
  font-size: 28rpx;
}

/* ===== Activity Mode Panel ===== */

.activity-mode-panel {
  margin-bottom: 24rpx;
  padding: 28rpx 28rpx 24rpx;
  border-radius: 30rpx;
  background: linear-gradient(180deg, #fff3eb 0%, #ffffff 100%);
  box-shadow: 0 16rpx 40rpx rgba(232, 89, 60, 0.08);
  border: 1rpx solid rgba(232, 89, 60, 0.08);
}

.activity-mode-pill {
  display: inline-flex;
  align-items: center;
  padding: 8rpx 18rpx;
  border-radius: 999rpx;
  background: rgba(232, 89, 60, 0.1);
  color: #d95c3d;
  font-size: 22rpx;
  font-weight: 600;
}

.activity-mode-title {
  margin-top: 14rpx;
  font-size: 38rpx;
  font-weight: 700;
  color: #2f1b16;
}

.activity-mode-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 18rpx;
}

.activity-mode-meta-item {
  padding: 10rpx 16rpx;
  border-radius: 999rpx;
  background: #fff8f5;
  color: #a06a5d;
  font-size: 22rpx;
}

.activity-mode-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18rpx;
}

.activity-mode-btn {
  padding: 0 26rpx;
  font-size: 24rpx;
}

/* ===== Hero Box ===== */

.hero-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
  margin-bottom: 24rpx;
  padding: 28rpx;
  border-radius: 28rpx;
  background: linear-gradient(135deg, #fff2ec, #ffffff);
}

.hero-title {
  font-size: 38rpx;
  font-weight: 700;
  color: #2f1b16;
}

.ai-btn {
  border-radius: 999rpx;
  background: linear-gradient(90deg, #ff9566, #e8593c);
  color: #ffffff;
  white-space: nowrap;
}

.ai-btn-loading {
  opacity: 0.72;
}

.ai-status {
  margin: 0 8rpx 24rpx;
  color: #b07a69;
  font-size: 22rpx;
}

.ai-status text {
  color: #d95c3d;
}

.activity-ai-row {
  display: flex;
  justify-content: center;
  margin-bottom: 24rpx;
}

.ai-btn-activity {
  width: 100%;
  font-size: 28rpx;
  padding: 20rpx 0;
}

/* ===== Candidate List ===== */

.candidate-list {
  padding: 8rpx 0;
}

.candidate-item {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 28rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(20, 28, 40, 0.06);
}

.candidate-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 24rpx;
  background: #f0f0f0;
}

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

.candidate-content {
  flex: 1;
  min-width: 0;
}

.candidate-name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 8rpx;
}

.candidate-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #2f1b16;
}

.score-chip-inline {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 14rpx;
  border-radius: 999rpx;
  font-size: 22rpx;
  font-weight: 600;
}

.score-chip-inline--high {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.score-chip-inline--mid {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.score-chip-inline--low {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.candidate-meta {
  font-size: 26rpx;
  color: #8a7570;
  margin-bottom: 4rpx;
}

.candidate-tags {
  margin-top: 10rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.candidate-arrow {
  font-size: 40rpx;
  color: #d5c8c3;
  margin-left: 16rpx;
  flex-shrink: 0;
}

/* ===== Detail Sheet ===== */

.mask {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.sheet {
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 32rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  background: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  display: block;
  box-sizing: border-box;
}

.sheet-header {
  display: flex;
  align-items: center;
  margin-bottom: 28rpx;
}

.sheet-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background: #f0f0f0;
}

.sheet-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 24rpx;
}

.sheet-header-info {
  flex: 1;
}

.sheet-nickname {
  font-size: 36rpx;
  font-weight: 700;
  color: #2f1b16;
}

.sheet-meta {
  margin-top: 6rpx;
  font-size: 26rpx;
  color: #8a7570;
}

.sheet-score {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 20rpx;
  padding: 16rpx 20rpx;
  border-radius: 16rpx;
  background: #fff8f5;
}

.sheet-score-label {
  font-size: 26rpx;
  color: #8a7570;
}

.sheet-score-value {
  font-size: 30rpx;
  font-weight: 700;
}

.sheet-section {
  display: flex;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #f5f0ee;
}

.sheet-label {
  width: 120rpx;
  color: #8a7570;
  font-size: 28rpx;
  flex-shrink: 0;
}

.sheet-value {
  flex: 1;
  font-size: 28rpx;
  color: #2f1b16;
}

.sheet-gallery {
  display: flex;
  gap: 12rpx;
  margin-bottom: 20rpx;
  overflow-x: auto;
  padding-bottom: 8rpx;
}

.sheet-gallery-image {
  width: 180rpx;
  height: 240rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
  background: #f0f0f0;
}

.sheet-section-intro {
  flex-direction: column;
  align-items: flex-start;
}

.sheet-intro {
  margin-top: 12rpx;
  line-height: 1.6;
  white-space: pre-wrap;
}

.sheet-reasons {
  margin: 20rpx 0;
  padding: 20rpx;
  border-radius: 18rpx;
  background: #fff8f5;
  line-height: 1.6;
}

.sheet-reasons-title {
  font-size: 24rpx;
  color: #d06b52;
  margin-bottom: 8rpx;
}

.sheet-reasons-text {
  font-size: 26rpx;
  color: #6a5148;
}

.sheet-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 28rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

.sheet-skip-btn {
  flex: 1;
}

.sheet-like-btn {
  flex: 2;
}

/* ===== Tags ===== */

.tag {
  padding: 10rpx 18rpx;
  border-radius: 999rpx;
  background: #fff1ee;
  color: #e8593c;
  font-size: 24rpx;
}

/* ===== Buttons ===== */

.primary-btn {
  background: #e8593c;
  color: #ffffff;
  border-radius: 999rpx;
}

.ghost-btn {
  background: #ffffff;
  color: #7d655d;
  border: 1rpx solid #ead8d1;
  border-radius: 999rpx;
}

/* ===== Empty State ===== */

.empty-card {
  margin-top: 32rpx;
  padding: 56rpx 36rpx;
  border-radius: 28rpx;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 16rpx 40rpx rgba(20, 28, 40, 0.06);
}

.empty-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #2f1b16;
}

/* ===== Mutual Match Modal ===== */

.success-mask {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48rpx;
  background: rgba(12, 16, 24, 0.56);
  z-index: 20;
}

.success-card {
  width: 100%;
  padding: 48rpx 36rpx;
  border-radius: 32rpx;
  background: linear-gradient(160deg, #fff6f0, #ffffff 55%, #fff2ef);
  text-align: center;
}

.success-badge {
  display: inline-block;
  padding: 10rpx 20rpx;
  border-radius: 999rpx;
  background: rgba(232, 89, 60, 0.12);
  color: #d95c3d;
  font-size: 22rpx;
  letter-spacing: 2rpx;
}

.success-title {
  margin-top: 20rpx;
  font-size: 42rpx;
  font-weight: 700;
  color: #2f1b16;
}

.success-desc {
  margin: 18rpx 0 28rpx;
  color: #7d655d;
  line-height: 1.7;
}

.success-actions {
  display: flex;
  gap: 16rpx;
}

.success-actions button {
  flex: 1;
}

.success-ghost-btn {
  background: #fffaf7;
}