.container {
  width: 100%;
  padding: 20px;

  .totalSection {
    text-align: center;
    // margin-bottom: 60px;
    position: relative;

    // &::after {
    //   content: '';
    //   position: absolute;
    //   bottom: -30px;
    //   left: 50%;
    //   transform: translateX(-50%);
    //   width: 80%;
    //   height: 1px;
    //   background: linear-gradient(
    //     90deg,
    //     rgba(81, 171, 255, 0) 0%,
    //     rgba(81, 171, 255, 0.6) 50%,
    //     rgba(81, 171, 255, 0) 100%
    //   );
    // }

    .totalRow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 20px;

      .totalTitle {
        color: #E4EDFF;
        font-size: 30px;
        font-weight: 400;
      }

      :global {
        .ant-statistic {
          .ant-statistic-content {
            
            background: linear-gradient(
                180deg,
                rgb(170, 255, 246),
                rgb(37, 187, 255)
              );
            position: relative;
            z-index: 2;

            
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 400;
            line-height: normal;
                font-size: 70px;
            font-family: D-DIN;
            // color: #00E1FF;
            // font-size: 48px;
            // font-weight: 700;
            // font-family: DINAlternate-Bold;
          }
        }
      }

      .unit {
        color: #E4EDFF;
        font-size: 30px;
        font-weight: 400;
      }
    }

    .newData {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      .label {
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 400;
      }

      :global {
        .ant-statistic {
          .ant-statistic-content {
            color: #09C35C;
            font-size: 20px;
            font-weight: 400;
            font-family: DINAlternate-Bold;
          }
        }
      }

      .unit {
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 400;
      }
    }
  }

  .dataTypeSection {
    position: relative;
    padding: 0 20px;
    // margin-top: 100px;

    .ellipseBg {
      position: absolute;
      top: 0;
    //   bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 682px;
      height: 341.05px;
    //   width: 100%;
    //   height: 134px;
      background: url('@/assets/images/DataGovernance/ellipse-central.png') no-repeat center bottom;
      background-size: contain;
    }

    .circleContainer {
      position: relative;
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-bottom: -67px; // 让圆形位于椭圆中间

      .dataTypeItem {
        text-align: center;

        .circle {
          width: 134px;
          height: 134px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          background-size: 100% 100%;

          &.circle1 { 
            background-image: url('@/assets/images/DataGovernance/round1.png'); 
            position: absolute;
            top: 50px;
            left: 28%;
            transform: translateX(-50%);
        }
          &.circle2 { 
            background-image: url('@/assets/images/DataGovernance/round2.png'); 
            position: absolute;
            top: 170px;
            left: 40%;
            transform: translateX(-50%);
        }
        &.circle3 { 
            background-image: url('@/assets/images/DataGovernance/round3.png'); 
            position: absolute;
            top: 170px;
            left: 60%;
            transform: translateX(-50%);
        }
        &.circle4 { 
            background-image: url('@/assets/images/DataGovernance/round4.png'); 
            position: absolute;
            top: 50px;
            left: 72%;
            transform: translateX(-50%);
        }
        // &.circle1 { background-image: url('@/assets/images/DataGovernance/round1.png'); }
        //   &.circle2 { background-image: url('@/assets/images/DataGovernance/round2.png'); }
        //   &.circle3 { background-image: url('@/assets/images/DataGovernance/round3.png'); }
          &.circle4 { background-image: url('@/assets/images/DataGovernance/round4.png'); }

          .innerCircle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(19, 122, 217, 0.23);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(2px);

            .valueRow {
              display: flex;
              align-items: center;
              gap: 4px;
              margin-bottom: 4px;

              :global {
                .ant-statistic {
                  .ant-statistic-content {
                    color: #FFFFFF;
                    font-size: 22px;
                    font-weight: 700;
                    font-family: DINAlternate-Bold;
                  }
                }
              }

              .unit {
                color: #FFFFFF;
                font-size: 14px;
              }
            }

            .label {
              color: #FFFFFF;
              font-size: 22px;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
} 