/* Общая анимация */
.like-btn {
  cursor: pointer;
}

.like-btn .tn-atom {
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

.like-emoji .tn-atom,
.like-count .tn-atom {
  background-color: transparent !important;
  box-shadow: none !important;
  transition: transform 0.1s ease;
}

/* --- Базовые цвета + hover/liked для каждой кнопки --- */
/* Кнопка 1 */
.like-btn.like-id-1 .tn-atom {
  background-color: #f9f3e8; /* базовый */
}
.like-btn.like-id-1.like-hover .tn-atom {
  background-color: #f3ebdd; /* hover */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.like-btn.like-id-1.liked .tn-atom {
  background-color: #ece2cf; /* после клика */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transform: translateY(0);
}

/* Кнопка 2 (пример) */
.like-btn.like-id-2 .tn-atom {
  background-color: #eaf6ff;
}
.like-btn.like-id-2.like-hover .tn-atom {
  background-color: #d7ecff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.like-btn.like-id-2.liked .tn-atom {
  background-color: #c5e1ff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transform: translateY(0);
}

/* Кнопка 3 (пример) */
.like-btn.like-id-3 .tn-atom {
  background-color: #fbefff;
}
.like-btn.like-id-3.like-hover .tn-atom {
  background-color: #f4ddff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.like-btn.like-id-3.liked .tn-atom {
  background-color: #ebc9ff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transform: translateY(0);
}

/* ... по аналогии можешь добавить для like-id-4 .. like-id-9 */

/* Чтобы эмоджи и число подпрыгивали вместе с плашкой */
.like-btn.like-hover .tn-atom,
.like-emoji.like-hover .tn-atom,
.like-count.like-hover .tn-atom {
  transform: translateY(-1px);
}

/* На лайкнутой кнопке курсор обычный */
.like-btn.liked {
  cursor: default !important;
}