ai-c/pages/gift-shop/gift-shop.wxss

.page-container {
  min-height: 100vh;
  background: #FAF8FC;
}

.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: transparent;
}

.status-bar {
  background: transparent;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32rpx;
  background: transparent;
  position: relative;
}

.nav-back {
  position: absolute;
  left: 32rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #101828;
  line-height: 1;
}

.content-scroll {
  height: 100vh;
  box-sizing: border-box;
}

.content-wrap {
  padding: 30rpx 31rpx 0;
  box-sizing: border-box;
}

.love-card {
  width: 688rpx;
  height: 313rpx;
  border-radius: 46rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 8px 10px -6px rgba(252, 206, 232, 0.5), 0px 20px 25px -5px rgba(252, 206, 232, 0.5);
}

.love-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(176, 106, 179, 1) 0%, rgba(212, 137, 190, 1) 100%);
}

.love-card-blur {
  position: absolute;
  width: 366rpx;
  height: 366rpx;
  top: -92rpx;
  right: -92rpx;
  border-radius: 9999rpx;
  background: rgba(255, 255, 255, 0.1);
  filter: blur(128px);
}

.love-card-bottom-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 156rpx;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}

.love-card-content {
  position: relative;
  height: 100%;
  padding: 46rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.love-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.love-header {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.love-icon {
  width: 61rpx;
  height: 61rpx;
}

.love-label {
  font-size: 38rpx;
  font-weight: 700;
  line-height: 53rpx;
  letter-spacing: 1rpx;
  color: #FFFFFF;
}

.love-value {
  margin-top: 8rpx;
  font-size: 92rpx;
  font-weight: 900;
  line-height: 92rpx;
  letter-spacing: -2rpx;
  color: #FFFFFF;
  text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
}

.love-action {
  margin-top: 6rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  opacity: 0.8;
}

.love-action-text {
  font-size: 31rpx;
  font-weight: 700;
  line-height: 47rpx;
  color: #FFFFFF;
}

.love-action-arrow {
  width: 30rpx;
  height: 30rpx;
}

.love-decoration {
  width: 134rpx;
  height: 134rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.decoration-icon {
  width: 134rpx;
  height: 134rpx;
}

.gifts-section {
  margin-top: 30rpx;
}

.gifts-header {
  display: flex;
  align-items: center;
  gap: 15rpx;
  padding-left: 8rpx;
}

.gifts-icon {
  width: 46rpx;
  height: 46rpx;
}

.gifts-title {
  font-size: 46rpx;
  font-weight: 700;
  color: #101828;
  line-height: 61rpx;
}

.gifts-grid {
  margin-top: 30rpx;
  display: grid;
  grid-template-columns: 333rpx 333rpx;
  gap: 23rpx;
}

.gift-card {
  width: 333rpx;
  height: 485rpx;
  background: #FFFFFF;
  border: 2rpx solid #F9FAFB;
  border-radius: 31rpx;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  padding: 25rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.gift-image-wrap {
  width: 283rpx;
  height: 283rpx;
  background: #F9FAFB;
  border-radius: 27rpx;
  overflow: hidden;
  position: relative;
}

.gift-image {
  width: 100%;
  height: 100%;
}

.gift-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.05);
}

.gift-badge {
  position: absolute;
  right: 15rpx;
  bottom: 15rpx;
  width: 76rpx;
  height: 38rpx;
  border-radius: 9999rpx;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23rpx;
  font-weight: 700;
  line-height: 31rpx;
  color: #FFFFFF;
}

.gift-name {
  margin-top: 23rpx;
  font-size: 34rpx;
  font-weight: 700;
  line-height: 53rpx;
  color: #101828;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.gift-price {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.gift-heart-icon {
  width: 34rpx;
  height: 34rpx;
}

.gift-price-text {
  font-size: 34rpx;
  font-weight: 900;
  line-height: 53rpx;
  color: #B06AB3;
}

.gift-exchange-btn {
  width: 99rpx;
  height: 61rpx;
  border-radius: 19rpx;
  background: #B06AB3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27rpx;
  font-weight: 700;
  line-height: 38rpx;
  color: #FFFFFF;
  box-shadow: 0px 2px 4px -2px rgba(176, 106, 179, 0.2), 0px 4px 6px -1px rgba(176, 106, 179, 0.2);
}

.gifts-error {
  margin-top: 30rpx;
  padding: 32rpx;
  border-radius: 24rpx;
  background: #FFFFFF;
  border: 2rpx solid #F9FAFB;
}

.gifts-empty {
  margin-top: 30rpx;
  padding: 60rpx 32rpx;
  border-radius: 24rpx;
  background: #FFFFFF;
  border: 2rpx solid #F9FAFB;
  text-align: center;
}

.gifts-empty-text {
  font-size: 28rpx;
  color: #99A1AF;
}

.gifts-error-text {
  font-size: 28rpx;
  color: #6B7280;
}

.gifts-retry {
  margin-top: 18rpx;
  width: 160rpx;
  height: 60rpx;
  border-radius: 19rpx;
  background: #B06AB3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 700;
  color: #FFFFFF;
}

.gift-card.skeleton {
  box-shadow: none;
}

.gift-card.skeleton .gift-image-wrap {
  background: #F3F4F6;
}

.gift-name.skeleton-line,
.gift-price.skeleton-line {
  height: 28rpx;
  border-radius: 14rpx;
  background: #F3F4F6;
}

.gift-name.skeleton-line {
  margin-top: 23rpx;
}

.gift-price.skeleton-line {
  width: 140rpx;
}

.gift-exchange-btn.skeleton-btn {
  width: 99rpx;
  height: 61rpx;
  background: #F3F4F6;
  box-shadow: none;
}

.bottom-tip {
  padding: 60rpx 0 40rpx;
  text-align: center;
}

.tip-text {
  font-size: 27rpx;
  line-height: 40rpx;
  color: #99A1AF;
}