.hy-batch-table-form {
  position: relative;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
  .hy-batch-table-form-upload-box {
    height: 340px;
    position: relative;
    border-radius: 8px;
    border: 1px dashed rgba(var(--hy-auxiliary));
    box-sizing: border-box;
    &:hover {
      border-color: rgba(var(--hy-theme));
    }
    .upload-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      perspective: 800px;
      pointer-events: none;
      overflow: hidden;
      &::before {
        display: block;
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        /* 绘制网格线：使用青色，透明度调低，让它融合在 #14273a 背景里 */
        background-image:
          /* 纵向线 */ linear-gradient(
                90deg,
                rgba(0, 229, 255, 0.1) 1px,
                transparent 1px
        ),
          /* 横向线 */
        linear-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px);
  
        /* 网格尺寸 40px */
        background-size: 40px 40px;
  
        /* 3D 倒伏效果 */
        transform: rotateX(60deg);
  
        /* 动效：无限流动 */
        animation: grid-flow 20s linear infinite;
  
        /* 遮罩：四周渐隐，让网格不那么生硬 */
        mask-image: radial-gradient(
                circle at 50% 50%,
                black 10%,
                transparent 80%
        );
        -webkit-mask-image: radial-gradient(
                circle at 50% 50%,
                black 10%,
                transparent 80%
        );
      }
      &::after {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(
                circle at 50% 50%,
                rgba(0, 229, 255, 0.05) 0%,
                transparent 70%
        );
      }
    }
  
    .hy-el-upload {
      width: 100%;
      height: 100%;
      .hy-el-upload-dragger {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: none;
        &:hover {
          border-color: var(--theme);
          .type-icon-box {
            transform: translateY(-10px);
          }
        }
      }
    }
  }
  
  .hy-batch-table-form-step-box {
    width: 100%;
    height: 260px;
    font-size: 14px;
    margin-top: 16px;
    padding-top: 24px;
    border-radius: 8px;
    background-color: rgba(var(--hy-background-2), 0.5);
    .hy-el-step {
      .hy-el-step__description {
        padding-left: 0px !important;
        padding-right: 0px !important;
      }
    }
  }

  .hy-batch-table-form-template-box {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding: 0 16px 0 18px;
    border: 1px dashed rgba(var(--hy-auxiliary), 0.5);
    border-radius: 4px;
    background: rgba(var(--hy-background-2), 0.5);
  }

  .hy-batch-table-form-upload-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    perspective: 800px;
    pointer-events: none;
    overflow: hidden;
    &::before {
      display: block;
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      /* 绘制网格线：使用青色，透明度调低，让它融合在 #14273a 背景里 */
      background-image:
        /* 纵向线 */ linear-gradient(
              90deg,
              rgba(0, 229, 255, 0.1) 1px,
              transparent 1px
      ),
        /* 横向线 */
      linear-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px);

      /* 网格尺寸 40px */
      background-size: 40px 40px;

      /* 3D 倒伏效果 */
      transform: rotateX(60deg);

      /* 动效：无限流动 */
      animation: grid-flow 20s linear infinite;

      /* 遮罩：四周渐隐，让网格不那么生硬 */
      mask-image: radial-gradient(
              circle at 50% 50%,
              black 10%,
              transparent 80%
      );
      -webkit-mask-image: radial-gradient(
              circle at 50% 50%,
              black 10%,
              transparent 80%
      );
    }
    &::after {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(
              circle at 50% 50%,
              rgba(0, 229, 255, 0.05) 0%,
              transparent 70%
      );
    }
  }
}