:root
{
      --bg: #0a0a0a; --panel:#121212; --ink:#fff; --muted:#b3b3b3; --ring:#2a2a2a;
      --grad1:#8a2be2; --grad2:#06b6d4;
}

 html,body{background:linear-gradient(180deg, #000 0%, #0b0b0b 30%, #000 100%); color:var(--ink)}

.hero-blob
{
    position:absolute;
    inset: -10rem auto auto 50%;
    transform:translateX(-50%);
    width:42rem; height:42rem;
    filter:blur(120px);
    background: radial-gradient(30% 30% at 50% 50%, rgba(138,43,226,.35), transparent), radial-gradient(30% 30%, rgba(6,182,212,.25), transparent);
}
.hero_top
{
    min-height: 350px;
    margin-bottom: 50px;
}

.serie_op 
{
    display: flex;
    flex-wrap: wrap;
} 
.serie_op h2
{
    width: 50%;
}
.card-panel .flex,
.cont_d .border
{
    display: flex;
    flex-wrap: wrap;
}

.card-panel .track .small
{
    display: block;
    width: 100%;
}

.logo
{
    width: 100%;
    max-width: 50px;
    border-radius: 50px;
}


.avatar
{
    width: 100%;
    max-width: 150px;
    border-radius: 50%;
    margin: auto;
}


.card-panel
{
    background:rgba(18,18,18,.8);
    border:1px solid var(--ring);
    border-radius:1.25rem
}

.badge-id
{font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; background:linear-gradient(90deg, #64748b, #71717a); border-radius:999px; padding:.25rem .5rem
}
.grid 
{
    display:grid;
    gap:1.25rem
}


.is-playing 
{
  border-color: #ffffff66 !important;
  background: rgba(255,255,255,0.06) !important;
}

.uni_ob
{
    list-style: none;
    padding: 0;
    margin-bottom: 0;

}

.card-panel .book 
{
    width: 100%;
    max-width: 150px;
    border-radius: 10px;
}

.card-book 
{
    display: flex;
    flex-wrap: nowrap;
}




@media (min-width: 1034px)
{
    .serie_op 
    {
        flex-wrap: nowrap;
    } 

}

@media (max-width: 1204px)
{
    .card-panel .flex h3
    {
        width: 100%;
    }
    
    .badge-id
    {
        margin-top: 10px;
        display: block;
    }
    .card-book 
    {
      flex-wrap: wrap; 
    }
    .card-panel .book 
    {
        max-width: 200px;
        margin: auto;
    }
}

@media (max-width: 1400px)
{
    .serie_op h2
    {
        display: block;
        width: 100%;
    }
    .card-panel .track
    {
        display: block;
        flex-wrap: wrap;
        width: 100%;
    }    
}

@media (max-width: 991px)
{
    
    .card-panel .track,
    .cont_d .border 
    {
        display: flex;
    }
    .card-panel .track .small,
    .card-panel .tex_one .small
    
    {
        width: 100%;
        max-width: 180px;
    }
    .card-panel .track audio,
    .cont_d .border audio
    {
        display: block!important;
        margin: auto !important;
        text-align: center;        
    }
    
}


@media (max-width: 767px)
{
    .card-book 
    {
      flex-wrap: nowrap; 
    }
    .card-panel .book 
    {
        max-width: 150px;
    }
}

@media (max-width: 515px)
{
    .card-panel .track,
    .cont_d .border 
    {
        flex-wrap: nowrap;
    }

    .card-panel .track .small,
    .card-panel .tex_one .small
    
    {
        width: 100%;
        max-width: 500px;
    }
    .card-panel .track audio,
    .cont_d .border audio
    {
        width: 100%!important;
        max-width: 500px!important;
    }
}

@media (max-width: 400px)
{
    .card-panel .track,
    .cont_d .border 
    {
        flex-wrap: wrap;
    }
    .card-panel .track .small,
    .card-panel .tex_one .small
    {
        display: block;
        width: 200px!important;
    }
    .card-panel .track audio,
    .cont_d .border audio
    {
        width: 100%!important;
        margin: auto;
        text-align: center;
    }
        .card-book 
    {
      flex-wrap: wrap; 
    }
    .card-panel .book 
    {
        max-width: 200px;
        margin: auto;
    }
}


    @media (min-width: 768px){ .grid-cols-2{grid-template-columns: 1fr 1fr;} }
    .cover {aspect-ratio:16/9; width:100%; object-fit:cover; border-top-left-radius:1.25rem; border-top-right-radius:1.25rem}
    .track {display:flex; align-items:center; gap:.75rem; border:1px solid var(--ring); border-radius:1rem; padding:.75rem}
    .track.active{border-color:#ffffff55; background:#ffffff0d}
    .index{width:2rem; color:#a1a1aa; font-size:.85rem}
    .muted{color:var(--muted)}
    .btn-ghost{border:1px solid #ffffff22; color:#fff}
    .btn-ghost:hover{border-color:#ffffff66; color:#fff}
    .footer-link{color:#bfbfbf; text-decoration:none}
    .footer-link:hover{color:#fff}