.template-library {
  height: 100%;
  display: flex;
  flex-direction: column;
  // padding: 20px;
  // background: #f5f5f5;

  // A块：顶部操作栏
  .template-header {
    // background: #fff;
    // padding: 16px 24px;
    border-radius: 4px;
    margin-bottom: 20px;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .create-btn {
      background: rgba(0, 212, 138, 1);
      border-color: rgba(0, 212, 138, 1);
      color: #fff;
      height: 32px;
      font-size: 14px;

      &:hover {
        background: rgba(0, 232, 151, 1);
        border-color: rgba(0, 232, 151, 1);
      }
    }

    .filter-group {
      display: flex;
      align-items: center;
      gap: 12px;

      .filter-label {
        color: #333;
        font-size: 14px;
        white-space: nowrap;
      }

      .ant-select {
        min-width: 150px;
      }

      .ant-btn-primary {
        background: #1890ff;
        border-color: #1890ff;

        &:hover {
          background: #40a9ff;
          border-color: #40a9ff;
        }
      }

      .search-btn {
        background: #fff;
        color: rgba(51, 51, 51, 1);
        border: 1px solid rgba(215, 215, 215, 1);

        &:hover,
        &:focus {
          background: #fff;
          color: rgba(51, 51, 51, 1);
          border-color: rgba(215, 215, 215, 1);
        }
      }
    }
  }

  // B块：内容区域
  .template-content {
    flex: 1;
    // background: #fff;
    // padding: 24px;
    // border-radius: 4px;
    overflow-y: auto;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    .card-container {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      height: 100%;
    }

    .card-wrapper {
      width: 32%;
      height:44%;
    }
    .template-card {
      height: 100%;
      background: #fff;
      border-radius: 2px;
      // transition: all 0.3s;
      border: 1px solid #3333;
      padding: 15px;
      display: flex;
      flex-direction: column;

      &:hover {
        // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        // transform: translateY(-2px);
      }

      .card-header {
        margin-bottom: 12px;
        .card-title {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin: 0;
          line-height: 1.5;
        }
      }
      .card-body {
        flex: 1;
        display: flex;
        gap: 12px;
      }

      .card-left {
        width: 60%;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .info-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333;

        .info-label {
          color: #666;
          margin-right: 8px;
          white-space: nowrap;
        }

        .info-value {
          color: #333;
        }
      }

      .card-actions {
        margin-top: auto;
        display: flex;
        gap: 12px;

        .ant-btn {
          flex: 1;
          height: 32px;
          font-size: 14px;
        }

        .use-btn {
          background: rgba(0, 212, 138, 1);
          border-color: rgba(0, 212, 138, 1);
          color: #fff;

          &:hover {
            background: rgba(0, 232, 151, 1);
            border-color: rgba(0, 232, 151, 1);
          }
        }

        .preview-btn {
          color: #13c2c2;
          border-color: #13c2c2;

          &:hover {
            color: #36cfc9;
            border-color: #36cfc9;
          }
        }
      }

      .card-right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }

    .pagination-wrapper {
      display: flex;
      justify-content: flex-end;
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid #f0f0f0;

      .ant-pagination {
        .ant-pagination-item-active {
          border-color: rgba(0, 212, 138, 1);
          background-color: rgba(0, 212, 138, 1);

          a {
            color: #fff;
          }
        }
      }
    }
  }
}
