page {
  background: #f2f4f5;
  padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
}
.page {
  min-height: 100vh;
  .container {
    margin: 160rpx 30rpx 0;
    padding: 0 30rpx 40rpx;
    background: #fff linear-gradient(to top, #ffffff 0%, #e8f0f1 100%) no-repeat top center/100% 200rpx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 2rpx solid #ffffff;
    .avatar {
      margin-top: -50rpx;
      width: 128rpx;
      height: 128rpx;
      .avatar-user {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .name {
      margin: -55rpx 0 0 150rpx;
      font-size: 40rpx;
      color: rgba(40, 48, 49, 1);
      font-weight: bold;
      line-height: 1;
    }
    .card {
      margin-top: 52rpx;
      padding: 32rpx;
      background: #ffffff;
      box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(40, 48, 49, 0.04);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 2rpx solid #f8f9f9;
      .content {
        display: flex;
        gap: 8rpx;
        align-items: start;
        font-size: 32rpx;
        color: rgba(40, 48, 49, 1);
        line-height: 1;
        .tag {
          flex-shrink: 0;
          padding: 4rpx 12rpx;
          font-size: 22rpx;
          color: rgba(229, 154, 41, 1);
          border-radius: 8rpx;
          background-color: rgba(229, 154, 41, 0.29);
        }
      }
      .c-row {
        margin-top: 32rpx;
        display: flex;
        gap: 12rpx;
        font-size: 32rpx;
        color: rgba(40, 48, 49, 1);
        line-height: 1;
        .icon {
          flex-shrink: 0;
          width: 32rpx;
          height: 32rpx;
        }
        .site-num {
          margin-top: 10rpx;
          flex-shrink: 0;
          font-size: 24rpx;
          color: #9b9ea6;
        }
      }
    }
    .row {
      margin-top: 32rpx;
      .r-title {
        width: 128rpx;
        height: 32rpx;
      }
      .r-content {
        margin-top: 16rpx;
        font-size: 28rpx;
        color: rgba(154, 161, 163, 1);
      }
    }
  }
  .invite {
    padding: 36rpx 30rpx 36rpx 168rpx;
    margin: 24rpx 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 24rpx;
    border: 2rpx solid #ffffff;
    .wrap {
      .title {
        font-size: 36rpx;
        color: rgba(40, 48, 49, 1);
      }
      .content {
        font-size: 28rpx;
        color: rgba(154, 161, 163, 1);
      }
    }
    .btn {
      width: 198rpx;
      height: 64rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: rgba(255, 255, 255, 1);
      background: #62bed0;
      border-radius: 136rpx 136rpx 136rpx 136rpx;
    }
  }
  .list {
    margin: 24rpx 30rpx 0;
    .list-item {
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      .left {
        display: flex;
        gap: 20rpx;
        align-items: center;
        .icon {
          width: 48rpx;
          height: 48rpx;
        }
        .name {
          font-size: 32rpx;
          color: rgba(40, 48, 49, 1);
        }
      }
      .more {
        color: #d4d9da;
        font-size: 32rpx;
      }
    }
  }
}