It looks like your template might not be configured correctly for the CSS to work. You see, the css works on callout metadata, which is specified after the callout type like so:
> [!callout-type|metadata] Callout title
> Callout content
Since you said you tested both with and without the cssclass “research-note” in the literature note’s properties, I assume that’s not the issue.
From what you’ve shown, it looks like the necessary callout metadata is not present in your callouts. Your test callout doesn’t follow the format I show above. You put the color as the callout type, rather than as callout metadata.
Alternatively, it could be that the template uses annotation.colorCategory (like “yellow”), but the CSS snippet expects annotation.color, which is the hex code of the color. This is a common pitfall.
But since you didn’t share your full template, the most helpful I can be is to suggest using another similar, but working, template - like the one shared here by apfelstrudelig: Zotero Integration – Import Templates? - #96 by apfelstrudelig
and its associated CSS snippet.
Edit: As for the advice already offered above, I want to emphasize that re-installing better-bibtex ought to have no effect whatsoever on how notes are rendered in Obsidian. Better-bibtex is a Zotero addon, after all. It does, however, have an effect on the ability of Zotero Integration to import data from Zotero, as better-bibtex provides the connection between the two. But that’s only relevant when you create notes or insert citations (thus requiring data from Zotero), not when assessing how imported literature notes look after an import. Hope that clarifies things.