.tabsWrap {
  margin-top: 16px;
  position: relative;
}

.cardsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 128px;
  gap: 16px;
}

.cardItem {
  border-radius: 16px;
  padding: 16px 16px 0;
  display: flex;
  overflow: hidden;
  position: relative;
  &:hover {
    .cardBtns {
      transform: translateY(0);
    }
    .mask {
      opacity: 1;
    }
    .editBtn {
      opacity: 1;
    }
  }
}

.cardTitle {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
}

.poster {
  width: 84px;
  height: 112px; // 84 * 4/3 = 112px，确保3:4比例
  margin-left: 8px;
  position: relative;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  overflow: hidden;
}

.posterImage {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.cardBtns {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  transition: transform 0.15s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  & > button {
    width: 62.5%;
  }
  & > button:first-child {
    // UED设计是不要居中，往下一点
    margin-top: 20px;
  }
}

.mask {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  background: linear-gradient(180deg, #f9f9fc00 0%, #f9f9fc 33.95%);
}

.gradientBtn {
  --stop-color-1: #3150ff;
  --stop-color-2: #c067ff;
  &:hover {
    border: none;
    background: linear-gradient(90deg, var(--stop-color-1), var(--stop-color-2)) !important;

    // 内部容器，保持原有的背景色和圆角
    &::before {
      content: '';
      position: absolute;
      top: 1px;
      left: 1px;
      right: 1px;
      bottom: 1px;
      background: #fff;
      border-radius: calc(var(~'--@{antPrefix}-border-radius-sm') - 1px);
      z-index: 0;
    }

    .gradientText {
      color: transparent;
      background: linear-gradient(90deg, var(--stop-color-1) 0%, var(--stop-color-2) 100%);
      background-clip: text;
    }
    .gradientIcon path {
      fill: var(--linear-gradient-url);
    }
  }
  & > * {
    position: relative;
    z-index: 1;
  }
}

.gradientText {
  font-weight: 500;
}

.gradientIcon {
  font-size: 15px;
}

.editBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
