.tools-page{
  --fg:#111; --muted:#6b6b6b; --bg:#fafafa; --line:#ececec; --card:#fff; --brand:#111;
  --pill:#f5f7ff; --pill-b:#dfe6ff;
  color: var(--fg);
}

.tools-page *{box-sizing:border-box}

.tools-page .tools-header{padding:8px 0 18px;text-align:center}
.tools-page h1{margin:0 0 6px}
.tools-page .sub{color:var(--muted)}

.tools-page .hero{
  background:linear-gradient(135deg,#e9f7ff,#f5fff3);
  border:1px dashed #d6d6d6;border-radius:16px;padding:14px 16px;text-align:center;margin:16px 0 18px;
}

.tools-page .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.tools-page .cta a{padding:12px 16px;border-radius:12px;text-decoration:none;border:1px solid var(--brand)}
.tools-page .cta .primary{background:var(--brand);color:#fff}
.tools-page .cta .ghost{background:#fff;color:var(--brand)}

.tools-page .controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:8px 0 14px}
.tools-page .search{flex:1;min-width:240px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 12px}
.tools-page .search input{border:none;outline:none;flex:1;font:inherit}

.tools-page .tags{display:flex;gap:8px;flex-wrap:wrap}
.tools-page .tag{padding:6px 10px;border-radius:999px;background:var(--pill);border:1px solid var(--pill-b);font-size:13px;cursor:pointer}
.tools-page .tag[aria-pressed="true"]{background:#111;color:#fff;border-color:#111}

.tools-page .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){ .tools-page .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .tools-page .grid{grid-template-columns:1fr} }

.tools-page .card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.03);
}

.tools-page .badge{display:inline-block;font-size:12px;color:#111;background:#fff;border:1px solid #ddd;border-radius:999px;padding:3px 8px}
.tools-page .card h3{margin:2px 0 0}
.tools-page .card p{margin:0;color:var(--muted)}
.tools-page .meta{display:flex;gap:8px;flex-wrap:wrap}
.tools-page .meta span{font-size:12px;color:#555;background:#f7f7f7;border:1px solid #ececec;border-radius:999px;padding:3px 8px}

.tools-page .card a.btn{
  margin-top:auto;display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--brand);
  background:var(--brand);color:#fff;text-decoration:none
}
.tools-page .card a.btn.ghost{background:#fff;color:var(--brand)}

.tools-page .hidden{display:none !important}