.credits-breakdown {
  display: flex;
  flex-direction: row;
  background: #ffffff;
  border-radius: 32rpx;
  padding: 48rpx 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(30, 109, 235, 0.04);
  border: 1rpx solid rgba(30, 109, 235, 0.06);

  .credits-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48rpx;
  }

  .credits-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rpx;
    width: 100%;

    &.clickable:active {
      opacity: 0.8;
    }

    .credits-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 10rpx;
    }

    .credits-label {
      font-size: 26rpx;
      color: #8c96a0;
      font-weight: 500;
    }

    .credits-btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 4rpx 16rpx;
      border-radius: 100rpx;
      border: 1rpx solid transparent;

      &.btn-blue {
        background-color: rgba(30, 109, 235, 0.06);
        border-color: rgba(30, 109, 235, 0.12);
      }

      &.btn-green {
        background-color: rgba(0, 139, 112, 0.06);
        border-color: rgba(0, 139, 112, 0.12);
      }

      .credits-btn-text {
        font-size: 20rpx;
        font-weight: 500;

        &.text-blue {
          color: #1e6deb;
        }

        &.text-green {
          color: #008b70;
        }
      }
    }

    .credits-value {
      font-size: 48rpx;
      font-weight: 700;
      color: #1d2129;

      &.color-blue {
        color: #1e6deb;
      }

      &.color-green {
        color: #008b70;
      }

      &.color-orange {
        color: #e28c00;
      }
    }
  }
}