/* Карточки шаблонов Nano Banana — общие для главной и /shablony/ */
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 18px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  color: #dfe3ee; font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.filters button.on { background: linear-gradient(90deg, #7c5cff, #22c3ee); border-color: transparent; color: #fff; }
.filters button small { opacity: .7; margin-left: 6px; font-size: 13px; }

.tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tpl { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10); transition: transform .2s, border-color .2s; }
.tpl:hover { transform: translateY(-2px); border-color: rgba(124,92,255,.6); }
.tpl .pic { position: relative; aspect-ratio: 3 / 4; background: #151935; overflow: hidden; }
.tpl .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.tpl .uses { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(11,13,24,.72); backdrop-filter: blur(6px); color: #fff; }
.tpl .note { position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: #ffd166; color: #1a1400; }
.tpl .body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; flex: 1; }
.tpl h3 { font-size: 15.5px; line-height: 1.3; font-weight: 700; flex: 1; }
.tpl .go { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 12px; font-weight: 700; font-size: 15px;
  background: linear-gradient(90deg, #7c5cff, #22c3ee); color: #fff; }
.tpl-empty { color: #aab1c8; grid-column: 1 / -1; }
.tpl-more { display: flex; justify-content: center; margin-top: 22px; }

@media (max-width: 980px) { .tpl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .tpl-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tpl { border-radius: 16px; }
  .tpl .body { padding: 10px 10px 12px; gap: 8px; }
  .tpl h3 { font-size: 14.5px; }
  .tpl .go { height: 38px; font-size: 14px; }
  /* на главной тренды листаются вбок */
  .tpl-grid.row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px;
    scrollbar-width: none; }
  .tpl-grid.row::-webkit-scrollbar { display: none; }
  .tpl-grid.row .tpl { flex: 0 0 44%; scroll-snap-align: start; }
}