/* Card Styles */
.card {
  @apply relative rounded-2xl overflow-hidden bg-gray-800/50 backdrop-blur-sm ring-1 ring-white/10 cursor-pointer transform transition hover:scale-105 hover:shadow-glow;
}

.card-thumb {
  @apply w-full aspect-video object-cover bg-gray-700 rounded-t-2xl;
}

.thumb-fallback {
  @apply flex items-center justify-center w-full aspect-video bg-gradient-to-tr from-indigo-500 to-pink-500 text-white font-bold text-2xl;
}

.card-body {
  @apply p-4 flex flex-col gap-1;
}

.card-title {
  @apply text-lg font-semibold truncate;
}

.card-desc {
  @apply text-gray-400 text-sm line-clamp-2;
}

.card-badge {
  @apply inline-block bg-gray-700 text-gray-300 px-2 py-0.5 rounded-full text-xs;
}

/* Modal Animations */
#modal {
  @apply flex transition-opacity duration-300 ease-in-out;
}

#modal.show {
  @apply opacity-100 visible;
}

#modal.hide {
  @apply opacity-0 invisible;
}

/* Scrollbar */
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
}
body::-webkit-scrollbar-thumb {
  background: rgba(236,72,153,0.6);
  border-radius: 10px;
}