/* Likes & Dislikes – nutzt die Farben des aktiven Styles */
.votes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vote-form { display: inline-flex; gap: 6px; margin: 0; }
.vote-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted);
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; line-height: 1.4;
  transition: transform .12s, background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.vote-btn:hover:not(:disabled) { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-1px); }
.vote-btn:disabled { cursor: default; opacity: .75; }
.vote-btn .vote-n { min-width: 1ch; font-variant-numeric: tabular-nums; }
.vote-up.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px var(--accent-glow);
}
.vote-down.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #4b4f5c, #2c2f38); }
.vote-btn.pop { animation: vote-pop .35s ease; }
@keyframes vote-pop { 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .vote-btn.pop { animation: none; } }
.vote-who { font-size: .8rem; color: var(--muted); }
.vote-author { font-size: .78rem; margin-top: 8px; color: var(--text); }
.vote-rank {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-2); font-weight: 800; font-size: .8rem;
}
.vote-pill { font-size: .78rem; font-weight: 700; white-space: nowrap; color: var(--text); }