.modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.82);

    backdrop-filter:blur(8px);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:99999;

}

.modal.show{

    opacity:1;

    visibility:visible;

}

.modal-box{

    width:min(900px,92%);

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    overflow:hidden;

    display:grid;

    grid-template-columns:380px 1fr;

    transform:translateY(40px);

    transition:.35s;

}

.modal.show .modal-box{

    transform:translateY(0);

}

.modal-left{

    background:#000;

}

.modal-left img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.modal-right{

    padding:35px;

    color:#fff;

    display:flex;

    flex-direction:column;

}

.modal-right h1{

    font-size:34px;

    margin-bottom:6px;

}

.modal-role{

    color:#8ab4ff;

    font-weight:600;

    margin-bottom:20px;

}

.modal-description{

    color:#d8d8d8;

    line-height:1.7;

    margin-bottom:35px;

}

.modal-buttons{

    display:flex;

    gap:15px;

    margin-top:auto;

}

.modal-buttons a{

    flex:1;

    text-align:center;

    padding:14px;

    border-radius:12px;

    text-decoration:none;

    color:#fff;

    background:#1d1d1d;

    transition:.25s;

    font-weight:600;

}

.modal-buttons a:hover{

    background:#2962ff;

}

.modal-close{

    position:absolute;

    right:25px;

    top:25px;

    width:42px;

    height:42px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    font-size:22px;

    color:white;

    background:#202020;

}

.modal-close:hover{

    background:#2d2d2d;

}

@media(max-width:850px){

.modal-box{

grid-template-columns:1fr;

}

.modal-left{

height:350px;

}

}
.music-card{

    margin-top:30px;

    padding:18px;

    border-radius:16px;

    background:#171717;

    border:1px solid rgba(255,255,255,.08);

}

.music-label{

    font-size:12px;

    letter-spacing:2px;

    color:#8ab4ff;

    margin-bottom:12px;

    text-transform:uppercase;

}

#musicTitleText{

    font-size:20px;

    font-weight:700;

    color:#fff;

}

#musicArtistText{

    margin-top:5px;

    color:#bdbdbd;

    margin-bottom:18px;

}

#musicLinkBtn{

    display:inline-block;

    padding:12px 18px;

    border-radius:10px;

    background:#2962ff;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

#musicLinkBtn:hover{

    background:#3d75ff;

}
/* ===========================
   COPY TOAST
=========================== */

#copyToast{
    position:fixed;
    right:30px;
    bottom:30px;

    display:flex;
    align-items:center;
    gap:12px;

    background:rgba(30,30,30,.95);
    color:#fff;

    border:1px solid rgba(255,255,255,.08);
    border-left:4px solid #2ecc71;

    padding:16px 22px;

    border-radius:14px;

    font-size:15px;
    font-weight:600;

    backdrop-filter:blur(15px);

    transform:translateY(30px);
    opacity:0;

    transition:.35s ease;

    z-index:99999;

    pointer-events:none;
}

#copyToast.show{

    transform:translateY(0);
    opacity:1;

}

.toast-icon{

    width:28px;
    height:28px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#2ecc71;
    color:#fff;

    font-size:16px;
    font-weight:bold;

    flex-shrink:0;

}