.genres {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 18px;
  scrollbar-width: none;
}

.genres::-webkit-scrollbar { display: none; }

.genres button {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  background: #171220;
  color: var(--soft);
  cursor: pointer;
}

.genres button.active {
  border-color: #d65aff;
  background: #d33cff1d;
  color: #fff;
}

.track small a { color: #e08cff; }
.downloaded { display: none; margin-left: 5px; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #75e6a4; color: #092415; font-weight: 900; }
.track.cached .downloaded,.library-track.cached .downloaded { display: inline-grid; }
.hero-actions .secondary.active { border-color: #d65aff; background: #d33cff22; color: #fff; }

.admin-track .genre { margin-top: 7px; color: #e9b8ff; }