soul/miniprogram/pages/match/match.wxss

/**
 * Soul创业实验 - 找伙伴页样式
 * 按H5网页端完全重构
 */

.page {
  min-height: 100vh;
  background: #000000;
  padding-bottom: 200rpx;
}

/* ===== 导航栏 ===== */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(40rpx);
}

.nav-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #ffffff;
}

.nav-settings {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #1c1c1e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-icon {
  font-size: 36rpx;
}

.nav-placeholder {
  width: 100%;
}

/* ===== 匹配次数条 ===== */
.match-count-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 24rpx 32rpx;
  padding: 24rpx 32rpx;
  background: #1c1c1e;
  border-radius: 24rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.05);
}

.count-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12rpx;
}

.count-icon {
  font-size: 28rpx;
  width: 32rpx;
  text-align: center;
}

.count-icon.icon-warning {
  color: #FFD700;
}

.count-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.7);
}

.count-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
}

.count-value {
  font-size: 32rpx;
  font-weight: 600;
}

.count-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.7);
}

.count-right {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.count-value {
  font-size: 32rpx;
  font-weight: 700;
}

.text-brand {
  color: #00CED1;
}

.text-red {
  color: #ff4444;
}

.text-gray {
  color: #666666;
}

.text-muted {
  color: rgba(255, 255, 255, 0.4);
}

.gold-text {
  color: #FFD700;
}

.unlock-mini-btn {
  padding: 12rpx 24rpx;
  background: rgba(255, 215, 0, 0.2);
  color: #FFD700;
  font-size: 22rpx;
  font-weight: 500;
  border-radius: 24rpx;
}

/* ===== 主内容区 ===== */
.main-content {
  padding: 0 32rpx;
}

/* ===== 匹配圆环 ===== */
.match-circle-wrapper {
  position: relative;
  width: 480rpx;
  height: 480rpx;
  margin: 48rpx auto;
}

.outer-glow {
  position: absolute;
  inset: -60rpx;
  border-radius: 50%;
  animation: pulseGlow 2s ease-in-out infinite;
}

.outer-glow.glow-active {
  background: radial-gradient(circle, transparent 50%, rgba(0, 229, 255, 0.1) 70%, transparent 100%);
}

.outer-glow.glow-inactive {
  background: radial-gradient(circle, transparent 50%, rgba(100, 100, 100, 0.1) 70%, transparent 100%);
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.middle-ring {
  position: absolute;
  inset: -30rpx;
  border-radius: 50%;
  border: 4rpx solid;
  animation: pulseRing 1.5s ease-in-out infinite;
}

.middle-ring.ring-active {
  border-color: rgba(0, 229, 255, 0.3);
}

.middle-ring.ring-inactive {
  border-color: rgba(100, 100, 100, 0.3);
}

@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.05); opacity: 0.6; }
}

.inner-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: floatSphere 3s ease-in-out infinite;
  overflow: hidden;
}

.inner-sphere.sphere-active {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  box-shadow: 0 0 120rpx rgba(0, 229, 255, 0.3), inset 0 0 120rpx rgba(123, 97, 255, 0.2);
}

.inner-sphere.sphere-inactive {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
  box-shadow: 0 0 60rpx rgba(100, 100, 100, 0.2);
}

@keyframes floatSphere {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10rpx); }
}

.sphere-gradient {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(123, 97, 255, 0.4) 0%, transparent 50%),
              radial-gradient(circle at 70% 70%, rgba(233, 30, 99, 0.3) 0%, transparent 50%);
}

.sphere-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sphere-icon {
  font-size: 96rpx;
  margin-bottom: 16rpx;
}

.sphere-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.sphere-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.6);
}

/* ===== 当前模式 ===== */
.current-mode {
  text-align: center;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16rpx;
}

/* ===== 免费次数提示 ===== */
.free-tip {
  text-align: center;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 32rpx;
}

/* ===== 购买提示卡片 ===== */
.purchase-tip-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.1) 0%, transparent 100%);
  border: 2rpx solid rgba(0, 229, 255, 0.2);
  border-radius: 24rpx;
  margin-bottom: 32rpx;
}

.tip-left {
  flex: 1;
}

.tip-title {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.tip-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}

.tip-btn {
  padding: 16rpx 32rpx;
  background: #00CED1;
  color: #000000;
  font-size: 26rpx;
  font-weight: 500;
  border-radius: 16rpx;
}

/* ===== 分隔线 ===== */
.divider {
  height: 2rpx;
  background: rgba(255, 255, 255, 0.1);
  margin: 32rpx 0;
}

/* ===== 匹配类型选择 ===== */
.type-section {
  margin-bottom: 32rpx;
}

.type-section-title {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-bottom: 24rpx;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  padding: 32rpx 16rpx;
  background: #1c1c1e;
  border-radius: 24rpx;
  border: 2rpx solid transparent;
  transition: all 0.2s;
}

.type-item.type-active {
  background: rgba(0, 229, 255, 0.1);
  border-color: rgba(0, 229, 255, 0.5);
}

.type-icon {
  font-size: 48rpx;
}

.type-label {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* ===== 匹配中状态 ===== */
.matching-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48rpx 0;
}

.matching-animation {
  position: relative;
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 48rpx;
}

.matching-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #00CED1, #7B61FF, #E91E63);
  animation: rotateRing 3s linear infinite;
}

@keyframes rotateRing {
  to { transform: rotate(360deg); }
}

.matching-center {
  position: absolute;
  inset: 16rpx;
  border-radius: 50%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matching-icon {
  font-size: 96rpx;
  animation: pulseIcon 1s ease-in-out infinite;
}

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4rpx solid rgba(0, 229, 255, 0.3);
  animation: rippleExpand 2s ease-out infinite;
}

.ripple-1 { animation-delay: 0s; }
.ripple-2 { animation-delay: 0.5s; }
.ripple-3 { animation-delay: 1s; }

@keyframes rippleExpand {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

.matching-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16rpx;
}

.matching-count {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 48rpx;
}

.cancel-btn {
  padding: 24rpx 64rpx;
  background: #1c1c1e;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 48rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.1);
}

/* ===== 匹配成功状态 ===== */
.matched-state {
  padding: 32rpx 0;
}

.success-icon-wrapper {
  text-align: center;
  margin-bottom: 32rpx;
}

.success-icon {
  font-size: 120rpx;
}

.match-card {
  background: #1c1c1e;
  border-radius: 32rpx;
  padding: 40rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.05);
  margin-bottom: 32rpx;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 32rpx;
}

.match-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  border: 4rpx solid #00CED1;
  flex-shrink: 0;
}

.match-info {
  flex: 1;
  min-width: 0;
}

.match-name {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12rpx;
}

.match-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.match-tag {
  padding: 8rpx 16rpx;
  background: rgba(0, 229, 255, 0.2);
  color: #00CED1;
  font-size: 20rpx;
  border-radius: 8rpx;
}

.match-score-box {
  text-align: center;
  flex-shrink: 0;
}

.score-value {
  display: block;
  font-size: 48rpx;
  font-weight: 700;
  color: #00CED1;
}

.score-label {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.5);
}

.card-section {
  padding-top: 24rpx;
  border-top: 2rpx solid rgba(255, 255, 255, 0.1);
  margin-top: 24rpx;
}

.section-title {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16rpx;
}

.interest-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.interest-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.interest-icon {
  font-size: 28rpx;
}

.interest-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
}

.concept-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* ===== 操作按钮 ===== */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.btn-primary {
  padding: 32rpx;
  background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%);
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
  text-align: center;
  border-radius: 24rpx;
}

.btn-secondary {
  padding: 32rpx;
  background: #1c1c1e;
  color: #ffffff;
  font-size: 32rpx;
  text-align: center;
  border-radius: 24rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.1);
}

.btn-disabled {
  opacity: 0.5;
}

/* ===== 弹窗 ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 48rpx;
}

.modal-content {
  width: 100%;
  max-width: 640rpx;
  background: #1c1c1e;
  border-radius: 32rpx;
  overflow: hidden;
}

/* ===== 加入弹窗 ===== */
.join-modal {
  padding: 40rpx;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
}

.close-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.6);
}

.form-tip {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24rpx;
}

.contact-tabs {
  display: flex;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.contact-tab {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 2rpx solid rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
}

.contact-tab.tab-active-phone {
  background: rgba(0, 229, 255, 0.2);
  color: #00CED1;
  border-color: rgba(0, 229, 255, 0.3);
}

.contact-tab.tab-active-wechat {
  background: rgba(7, 193, 96, 0.2);
  color: #07C160;
  border-color: rgba(7, 193, 96, 0.3);
}

.input-group {
  margin-bottom: 24rpx;
}

.input-label {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 12rpx;
}

.form-input {
  width: 100%;
  padding: 28rpx;
  background: rgba(0, 0, 0, 0.3);
  border: 2rpx solid rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  font-size: 32rpx;
  color: #ffffff;
  box-sizing: border-box;
}

.input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.error-text {
  display: block;
  font-size: 24rpx;
  color: #ff4444;
  margin-bottom: 16rpx;
}

.submit-btn {
  margin-top: 16rpx;
}

.form-notice {
  display: block;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  margin-top: 24rpx;
}

/* ===== 加入成功 ===== */
.join-success {
  padding: 48rpx;
  text-align: center;
}

.success-check {
  font-size: 128rpx;
  display: block;
  margin-bottom: 24rpx;
}

.success-title {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12rpx;
}

.success-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.6);
}

/* ===== 解锁弹窗 ===== */
.unlock-modal {
  padding: 48rpx;
  text-align: center;
}

.unlock-icon {
  width: 128rpx;
  height: 128rpx;
  margin: 0 auto 24rpx;
  background: rgba(255, 215, 0, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64rpx;
}

.unlock-title {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12rpx;
}

.unlock-desc {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 32rpx;
}

.unlock-info {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 32rpx;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rpx 0;
}

.info-label {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.6);
}

.info-value {
  font-size: 26rpx;
  font-weight: 500;
  color: #ffffff;
}

.unlock-buttons {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.btn-gold {
  padding: 28rpx;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #000000;
  font-size: 30rpx;
  font-weight: 600;
  text-align: center;
  border-radius: 24rpx;
}

.btn-ghost {
  padding: 28rpx;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 28rpx;
  text-align: center;
  border-radius: 24rpx;
}

/* ===== 底部留白 ===== */
.bottom-space {
  height: 40rpx;
}