/* AI Tools directory */
.tools-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; }
.tools-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  border: 1px solid var(--line, #e6efe9); background: #fff; color: var(--ink, #16261c);
  font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 14px; border-radius: 999px;
  cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.cat-chip:hover { border-color: var(--brand, #23a559); color: var(--brand, #23a559); }
.cat-chip.active { background: var(--brand, #23a559); border-color: var(--brand, #23a559); color: #fff; }

.tools-grid {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.tool-card {
  display: flex; flex-direction: column; height: 100%; position: relative;
  background: #fff; border: 1px solid var(--line, #e6efe9); border-radius: 16px;
  padding: 20px; text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tool-card:hover { border-color: var(--brand, #23a559); box-shadow: 0 10px 30px rgba(20,60,40,.08); transform: translateY(-2px); }
.tool-card.featured {
  border: 1.5px solid var(--brand, #23a559);
  background: linear-gradient(180deg, #f4fbf6, #ffffff);
  box-shadow: 0 12px 34px rgba(35,165,89,.14);
}
.tool-badge {
  position: absolute; top: -10px; left: 20px; background: var(--brand, #23a559); color: #fff;
  font-weight: 800; font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.tool-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tool-name { font-weight: 800; font-size: 18px; color: var(--ink, #16261c); }
.tool-price { font-weight: 700; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tool-price.free { background: #e7f7ee; color: #15803d; }
.tool-price.freemium { background: #eef1ff; color: #4f5bd5; }
.tool-price.paid { background: #fff2e6; color: #b45309; }
.tool-tag { font-size: 14px; line-height: 1.5; color: var(--muted, #5f7568); margin: 0 0 16px; flex: 1; }
.tool-foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.tool-cat { color: var(--muted, #5f7568); font-weight: 600; }
.tool-visit { color: var(--brand, #23a559); font-weight: 700; }