.abilityQuery {
  .rating {
    display: flex;
    align-items: center;
    gap: 8px;

    .ratingText {
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }
  }

  .usageCount {
    display: flex;
    align-items: center;
    gap: 4px;

    .count {
      font-size: 16px;
      font-weight: 600;
      color: #1890ff;
    }

    .unit {
      font-size: 12px;
      color: #999;
    }
  }

  .abilityDetail {
    .detailHeader {
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f0f0f0;

      h3 {
        margin: 0 0 12px;
        color: #333;
        font-size: 20px;
        font-weight: 600;
      }

      .detailMeta {
        display: flex;
        align-items: center;
        gap: 16px;

        .rating {
          .ratingText {
            font-size: 16px;
            color: #faad14;
            font-weight: 600;
          }
        }
      }
    }

    .detailContent {
      .detailItem {
        display: flex;
        margin-bottom: 16px;
        padding: 12px 0;
        border-bottom: 1px solid #f8f8f8;

        &:last-child {
          border-bottom: none;
          margin-bottom: 0;
        }

        .label {
          display: flex;
          align-items: center;
          gap: 6px;
          width: 100px;
          color: #666;
          font-weight: 500;
          font-size: 14px;
        }

        .value {
          flex: 1;
          color: #333;
          font-size: 14px;

          .description {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 6px;
            line-height: 1.6;
            border-left: 3px solid #1890ff;
          }
        }
      }
    }
  }
}

// 覆盖 ProTable 样式
.ant-pro-table {
  .ant-table {
    .ant-table-thead > tr > th {
      background: #fafafa;
      font-weight: 600;
    }

    .ant-table-tbody > tr > td {
      border-bottom: 1px solid #f0f0f0;
    }

    .ant-table-tbody > tr:hover > td {
      background: #f5f5f5;
    }
  }

  .ant-pro-table-toolbar {
    .ant-space {
      .ant-input-search {
        .ant-input {
          border-radius: 6px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .abilityQuery {
    .abilityDetail {
      .detailContent {
        .detailItem {
          flex-direction: column;
          gap: 8px;

          .label {
            width: auto;
          }
        }
      }
    }
  }
}