*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Segoe UI,Arial,sans-serif;
}
body{

    margin:0;

    width:100%;
    height:100vh;

    overflow:hidden;

    background:
        radial-gradient(circle at 20% 20%,#3b82f633,transparent 40%),
        radial-gradient(circle at 80% 80%,#06b6d422,transparent 40%),
        linear-gradient(135deg,#182235,#202c42,#172033);

    color:#edf2ff;
}

#matrix{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    z-index:0;

    pointer-events:none;

    opacity:0.12;

}


.cover{
    width:180px;
    height:180px;
    margin:0 auto 20px;
    border-radius:20px;
    overflow:hidden;

    background:linear-gradient(135deg,#536dfe,#00b8ff);
    box-shadow:0 20px 40px rgba(0,0,0,.3);

    animation:float 5s ease-in-out infinite;
}

.cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:linear-gradient(135deg,#536dfe,#00b8ff);
}

@keyframes float{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

}

.player{

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    width:420px;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

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

    border-radius:24px;

    padding:30px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);

    z-index:2;
}

.player h2{
    text-align:center;
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:10px;
}

#songTitle{

    text-align:center;
    color:#8ac6ff;

    font-size:18px;

    margin-bottom:25px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.controls{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;

    margin:25px 0;
}

button{

    border:none;
    cursor:pointer;

    transition:.25s;

    color:white;

    background:#4458ff;

    box-shadow:
        0 8px 20px rgba(68,88,255,.35);
}

button:hover{

    transform:translateY(-2px) scale(1.05);

    background:#5b6eff;
}

button:active{

    transform:scale(.95);
}

#prev,#next{

    width:55px;
    height:55px;

    border-radius:50%;
}

#play{

    width:72px;
    height:72px;

    border-radius:50%;

    font-size:30px;
}

.progress-container{

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

    margin:18px 0;
}

.progress-container span{

    width:42px;
    font-size:13px;

    color:#c7d3ec;
}

input[type=range]{

    appearance:none;

    flex:1;

    height:6px;

    border-radius:10px;

    background:#475167;

    outline:none;
}

input[type=range]::-webkit-slider-thumb{

    appearance:none;

    width:16px;
    height:16px;

    border-radius:50%;

    background:#73b8ff;

    cursor:pointer;

    box-shadow:0 0 12px #73b8ff88;
}

.volume{

    display:flex;
    align-items:center;

    gap:12px;

    margin:25px 0 10px;
}

.volume input{

    flex:1;
}

ul{

    margin-top:20px;

    list-style:none;

    border-radius:15px;

    overflow:hidden;

    background:rgba(255,255,255,.03);
}

li{

    padding:14px 16px;

    cursor:pointer;

    transition:.2s;

    border-bottom:1px solid rgba(255,255,255,.05);
}

li:last-child{

    border:none;
}

li:hover{

    background:rgba(255,255,255,.06);
}

.active{

    background:linear-gradient(90deg,#4468ff44,#3bc4ff22);

    color:#8ac6ff;

    font-weight:600;
}

@media(max-width:480px){

.player{

    width:95%;
    padding:24px;
}

}