Problemas com o CSS da transcrição da video aula

Ola amigo.
Pode descrever melhor o problema.
Se puder cola o código aqui para analise.
Aguardo seu feedback.
Bons estudos.

componente blazor:
@page "/playlist"
@inject MusicasAPI musicasAPI

Playlist

Minha Playlist Favorita

Uma seleção das melhores músicas para você curtir!

Pública

@if (musicas != null)
{

Carregando...

@code {
private ICollection? musicas;

protected override async Task OnInitializedAsync ()
{
    musicas = await musicasAPI.GetMusicaAsync();
}

}

O css que ele solicita copiar e colar. Porém temos alguns problema, onde o container fica escuro, as letras em branco e deixando de aparecer.

.playlist-container {
background: linear-gradient(to bottom, #1db954, #121212);
color: white;
padding: 2rem;
border-radius: 8px;
}

.playlist-header {
text-align: center;
margin-bottom: 2rem;
}

.playlist-table {
width: 100%;
border-collapse: collapse;
}

.playlist-table th, .playlist-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.playlist-table th {
font-weight: bold;
}

tr.playlist-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.playing {
background-color: rgba(29, 185, 84, 0.3);
position: relative;
}

.playing td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #1db954;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(29, 185, 84, 0.7);
}

70% {
    box-shadow: 0 0 10px 10px rgba(29, 185, 84, 0);
}

100% {
    box-shadow: 0 0 0 0 rgba(29, 185, 84, 0);
}

}

.progress-bar-container {
width: 100%;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 4px;
height: 4px;
margin-top: 5px;
}

.progress-bar {
height: 100%;
background-color: #1db954;
border-radius: 4px;
width: 0%; /* Será atualizado via JS */
}

.table > :not(caption) > * > * {
background-color: transparent;
color: white;
}

tr.playlist-item {
vertical-align: middle;
}

tr.playlist-item {
cursor: pointer;
}

.bi-play-fill::before {
content: "\f4b6"; /* fa-play */
color: transparent;
}

tr:hover .bi-play-fill::before {
content: "\f4b6"; /* fa-play */
color: black;
}

.bi-stop-fill::before {
content: "\f04d"; /* fa-stop */
color: red;
}

/* Esconde SVG interno do Bootstrap Icons se houver */
.bi-play-fill > svg,
.bi-stop-fill > svg {
display: none;
}
!print de exemplo do erro](https://cdn1.gnarususercontent.com.br/1/6313944/34553a08-3595-4735-92d4-3f860a95c0cf.png)

ficou quebrado.... irei colocar outro:

@page "/playlist"
@inject MusicasAPI musicasAPI

<h2>Playlist</h2>

<div class="playlist-header d-flex align-items-center mb-4 p-3 bg-dark text-bg-dark rounded">
    <img src="images/cardArtista.png" class="playlist-cover me-4" alt="">
    <div>
        <h3 class="mb-1">Minha Playlist Favorita</h3>
        <p class="text-white mb-2">Uma seleção das melhores músicas para você curtir!</p>
        <span class="badge bg-primary">Pública</span>
    </div>
</div>

@if (musicas != null)
{
    <div class="playlist-tracks bg-light rounded p-3">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th></th>
                    <th>Número</th>
                    <th>Música</th>
                    <th>Artista</th>
                    <th>Ano Lançamento</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var musica in musicas)
                {
                    <tr class="playlist-item">
                        <td>
                            <span class="bi fa-icon-playstop" />
                        </td>
                        <td>@musica.Id</td>
                        <td>@musica.Nome</td>
                        <td>@musica.NomeArtista</td>
                        <td>@musica.AnoLancamento</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
}
else
{
    <p>Carregando...</p>
}

@code {
    private ICollection<MusicaResponse>? musicas;

    protected override async Task OnInitializedAsync ()
    {
        musicas = await musicasAPI.GetMusicaAsync();
    }
}

.playlist-container {
    background: linear-gradient(to bottom, #1db954, #121212);
    color: white;
    padding: 2rem;
    border-radius: 8px;
}

.playlist-header {
    text-align: center;
    margin-bottom: 2rem;
}

.playlist-table {
    width: 100%;
    border-collapse: collapse;
}

.playlist-table th, .playlist-table td {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

  .playlist-table th {
        font-weight: bold;
    }

tr.playlist-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.playing {
    background-color: rgba(29, 185, 84, 0.3);
    position: relative;
}

    .playing td:first-child::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: #1db954;
        animation: pulse 1.5s infinite;
    }

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(29, 185, 84, 0.7);
    }

    70% {
        box-shadow: 0 0 10px 10px rgba(29, 185, 84, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(29, 185, 84, 0);
    }
}

.progress-bar-container {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    height: 4px;
    margin-top: 5px;
}

.progress-bar {
    height: 100%;
    background-color: #1db954;
    border-radius: 4px;
    width: 0%; /* Será atualizado via JS */
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: white;
}

tr.playlist-item {
    vertical-align: middle;
}

tr.playlist-item {
    cursor: pointer;
}

.bi-play-fill::before {
    content: "\f4b6"; /* fa-play */
    color: transparent;
}

tr:hover .bi-play-fill::before {
    content: "\f4b6"; /* fa-play */
    color: black;
}

.bi-stop-fill::before {
    content: "\f04d"; /* fa-stop */
    color: red;
}

/* Esconde SVG interno do Bootstrap Icons se houver */
.bi-play-fill > svg,
.bi-stop-fill > svg {
    display: none;
}

Ola.
Vamos tentar desenrolar esse problema...
Claro! Vamos entender o problema.
O seu layout usa Bootstrap e uma tabela clara, mas o seu CSS força muitos elementos a ficarem brancos, inclusive textos da tabela.
Além disso, você aplica:

.table > :not(caption) > * > * {
    background-color: transparent;
    color: white;
}

Esse seletor está deixando todas as células (td e th) com texto branco, então quando o fundo também é claro (ex: .bg-light), o texto some.
E mais: .playlist-container tem um fundo escuro, mas você não está usando essa classe no seu HTML.
Então parte do CSS nem deveria estar sendo aplicada.
Como corrigir?
1. Remova ou limite o seletor que deixa toda a tabela branca

Troque isso:

.table > :not(caption) > * > * {
    background-color: transparent;
    color: white;
}

Por algo mais seguro, que afete somente sua tabela personalizada, e não todas as tabelas Bootstrap:

.playlist-tracks table > :not(caption) > * > * {
    background-color: transparent;
    color: black; /* texto escuro para fundo claro */
}

2. Garanta que o fundo da tabela seja realmente claro

Você já usa:

<div class="playlist-tracks bg-light rounded p-3">

Isso está correto. O CSS acima permitirá que o texto apareça novamente.

3. Caso queira manter texto branco, ajuste o fundo

Se prefere letras brancas, você precisa usar um fundo escuro:

<div class="playlist-tracks bg-dark text-white rounded p-3">

E então no CSS:

.playlist-tracks table > :not(caption) > * > * {
    background-color: transparent;
    color: white;
}

4. Sua classe .playlist-container não está sendo usada

Você escreveu:

.playlist-container {
    background: linear-gradient(to bottom, #1db954, #121212);
    color: white;
    padding: 2rem;
    border-radius: 8px;
}

Mas o HTML não possui esse container.

Você pode aplicar assim:

<div class="playlist-container">
    ... todo o conteúdo ...
</div>

Se quiser realmente que o fundo seja escuro e gradiente.
Testa as modificações e veja se atinge o resultado esperado.
Avisa qualquer coisa.
Bons estudos.