/* Card */
.song-card {
  display: flex;
  flex-direction: column;
  background: #10101e;
  border: 1px solid #181830;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.song-card:hover {
  border-color: #4080e0;
  transform: translateY(-2px);
}

/* Cover art */
.card-art {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0a0a12;
  overflow: hidden;
}
.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-art .art-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #222244;
}

/* Stems badge overlay */
.stems-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(128, 0, 255, 0.85);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Arrangement badges */
.arr-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.arr-lead   { background: #1a3a1a; color: #4caf50; }
.arr-rhythm { background: #1a2e3a; color: #4090c0; }
.arr-bass   { background: #2a1a3a; color: #a060e0; }
.arr-combo  { background: #3a2a1a; color: #e0a040; }
.arr-keys   { background: #3a1a2a; color: #e040a0; }
.arr-other  { background: #1e1e1e; color: #888; }

/* Tuning badge */
.tuning-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #1a2a1a;
  color: #4caf50;
}
.tuning-badge.alt { background: #3a2a10; color: #e8c040; }

/* Lyrics badge */
.lyrics-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #2a1040;
  color: #c084f0;
}

/* Filter drawer */
.filter-drawer {
  transition: transform 0.2s ease;
}
.filter-drawer.open {
  transform: translateX(0) !important;
}

/* Filter arrangement buttons */
.arr-filter-btn {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid #222244;
  background: #10101e;
  color: #888;
  cursor: pointer;
  transition: all 0.1s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.arr-filter-btn[data-state="require"] {
  border-color: #4caf50;
  color: #4caf50;
  background: #1a3a1a;
}
.arr-filter-btn[data-state="exclude"] {
  border-color: #ef5350;
  color: #ef5350;
  background: #3a1a1a;
  text-decoration: line-through;
}

/* Tuning filter chips */
.tuning-chip {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid #222244;
  background: #10101e;
  color: #888;
  cursor: pointer;
  transition: all 0.1s;
}
.tuning-chip.active {
  border-color: #4080e0;
  color: #4080e0;
  background: #0a1a3a;
}

/* Active filter chips bar */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 600;
  background: #0a1a3a;
  border: 1px solid #4080e0;
  color: #4080e0;
  cursor: pointer;
}
.filter-chip:hover { background: #4080e0; color: #fff; }