frontend/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-zinc-950 text-white font-sans antialiased;
    background-image:
      radial-gradient(ellipse at 20% 50%, rgba(220,38,38,0.06) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 20%, rgba(251,191,36,0.04) 0%, transparent 60%);
  }
  * { box-sizing: border-box; }
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: #0a0806; }
  ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
}

@layer components {
  .btn-primary {
    @apply bg-red-600 hover:bg-red-700 text-white font-bold px-6 py-3 rounded-lg
           transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed
           active:scale-95;
  }
  .btn-ghost {
    @apply bg-white/10 hover:bg-white/15 border border-white/15 text-white
           font-medium px-5 py-2.5 rounded-lg transition-all duration-200;
  }
  .btn-gold {
    @apply bg-amber-500 hover:bg-amber-400 text-black font-bold px-6 py-3
           rounded-lg transition-all duration-200 active:scale-95;
  }
  .card {
    @apply bg-zinc-900/60 border border-zinc-800 rounded-2xl;
  }
  .input {
    @apply bg-zinc-900 border border-zinc-700 rounded-lg px-4 py-3 text-white
           placeholder-zinc-500 focus:outline-none focus:border-red-500
           focus:ring-1 focus:ring-red-500/30 transition-colors w-full;
  }
  .label {
    @apply text-sm font-medium text-zinc-400 mb-1.5 block;
  }
  .genre-pill {
    @apply px-4 py-2 rounded-full border text-sm font-semibold cursor-pointer
           transition-all duration-200 select-none;
  }
  .status-bar {
    @apply h-1.5 rounded-full bg-zinc-800 overflow-hidden;
  }
  .status-fill {
    @apply h-full rounded-full transition-all duration-500;
  }
}