page {
  background-color: #f7fafc;
}

.page-title {
  font-size: 36rpx;
  color: rgba(51, 51, 51, 1);
  padding-right: 100rpx;
}

.page {
  position: relative;
  min-height: 100vh;
  padding-bottom: 60rpx;
}

.bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 692rpx;
  opacity: 0.68;
  pointer-events: none;
}

// 吉祥物区域
.mascot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32rpx;
  position: relative;
}

.greeting-bubble {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 304rpx;
  height: 98rpx;

  .greeting-bg {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .greeting-text {
    position: relative;
    z-index: 1;
    font-size: 32rpx;
    font-weight: 700;
    color: #fff;
    line-height: 48rpx;
  }
}

.mascot {
  width: 302rpx;
  height: 384rpx;
  margin-top: 12rpx;
}

// 信息卡片
.info-card {
  margin: 24rpx 30rpx 0;
  padding: 32rpx;
  background: #fff;
  border-radius: 32rpx;
}

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

  .card-icon {
    width: 40rpx;
    height: 40rpx;
    flex-shrink: 0;
  }

  .card-title {
    font-size: 32rpx;
    font-weight: 700;
    color: #2f82a9;
    line-height: 48rpx;
  }
}

.card-desc {
  font-size: 28rpx;
  font-weight: 400;
  color: #475569;
  line-height: 48rpx;
}

// 升级按钮
.upgrade-btn {
  margin: 48rpx auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 434rpx;
  padding: 16rpx 0;
  background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%);
  border-radius: 32rpx;

  .upgrade-line1 {
    font-size: 28rpx;
    font-weight: 700;
    color: #fff;
    line-height: 42rpx;
  }

  .upgrade-line2 {
    font-size: 28rpx;
    font-weight: 400;
    color: #fff;
    line-height: 42rpx;
  }
}

// 通知勾选
.notify {
  margin: 32rpx 30rpx;
  font-size: 26rpx;
  color: rgba(148, 163, 184, 1);
  line-height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .check-content {
    padding-top: 4rpx;
    display: inline-block;
  }
  .wx-checkbox-input {
    width: 32rpx;
    height: 32rpx;
    border-radius: 8rpx;
    &.wx-checkbox-input-checked {
      border-color: #fff !important;
      background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%);
      background-clip: border-box;
      &::before {
        font-size: 28rpx;
        color: #fff;
      }
    }
  }
}