/* Templates grid page */
.tpl-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  max-width:var(--maxw);margin:0 auto;padding:30px 24px 10px;flex-wrap:wrap;
}
.filter-pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--border);
  font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;transition:.2s;
}
.pill:hover{border-color:var(--gold)}
.pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}

.tpl-grid{
  max-width:var(--maxw);margin:0 auto;padding:24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
@media (max-width:980px){.tpl-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.tpl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.tpl-grid{grid-template-columns:1fr}}

.tpl-card{
  background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--border);
  transition:all .3s;display:flex;flex-direction:column;
}
.tpl-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tpl-card .thumb-wrap{padding:14px;background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.tpl-card .tpl-thumb{box-shadow:var(--shadow-sm)}
.tpl-card .meta{padding:16px 18px 18px;text-align:center}
.tpl-card .meta h4{font-size:17px;margin-bottom:2px}
.tpl-card .meta small{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.tpl-card .actions{display:flex;gap:8px;padding:0 14px 14px}
.tpl-card .actions .btn{flex:1;padding:10px 12px;font-size:13px}
.tpl-card.selected{box-shadow:0 0 0 3px var(--gold),var(--shadow)}