*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
background:black;
color:white;
font-family:Arial;

background-image:
linear-gradient(rgba(255,0,60,0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,0,60,0.08) 1px, transparent 1px);
background-size:40px 40px;
}


/* APP */

.app{
display:flex;
min-height:100vh;
}


/* SIDEBAR */

.sidebar{
width:200px;
background:#050505;
border-right:1px solid red;
padding:20px;
}

.sidebar h2{
color:red;
}

.sidebar a{
display:block;
color:white;
text-decoration:none;
margin:10px 0;
}

.sidebar a:hover{
color:red;
}


/* MAIN */

.main{
flex:1;
padding:20px;
display:flex;
flex-direction:column;
align-items:center;
}

.content{
max-width:700px;
width:100%;
}


/* SEARCH */

.searchBox{
width:260px;
padding:8px;
margin:10px auto;
display:block;
background:#050505;
color:white;
border:1px solid red;
box-shadow:0 0 6px #ff003c55;
}


/* TRACK GRID */

.trackList{
display:grid;
grid-template-columns:repeat(auto-fill,180px);
gap:20px;
justify-content:center;
margin-top:20px;
}

.track{
width:180px;
border:1px solid red;
padding:8px;
text-align:center;
cursor:pointer;
background:#050505;
transition:.2s;
}

.track:hover{
box-shadow:0 0 10px red;
transform:scale(1.05);
}

.trackTitle{
margin-top:6px;
font-size:14px;
}


/* COVER */

.coverBox{
position:relative;
width:100%;
height:150px;
overflow:hidden;
}

.coverBox img{
width:100%;
height:100%;
object-fit:cover;
}

.coverBox::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0);
transition:.3s;
}

.track:hover .coverBox::after{
background:rgba(0,0,0,.5);
}

.playIcon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
color:red;
font-size:30px;
transition:.3s;
}

.track:hover .playIcon{
transform:translate(-50%,-50%) scale(1.2);
}


/* ACTIVE */

.activeTrack{
background:#200000;
box-shadow:0 0 15px red;
}


/* PLAYER */

#floatingPlayer{
position:fixed;
bottom:0;
left:0;
width:100%;
background:black;
border-top:2px solid red;
display:flex;
justify-content:center;
padding:8px;
z-index:999;
}

.playerInner{
display:flex;
align-items:center;
gap:12px;
background:#050505;
padding:6px 12px;
border:1px solid red;
box-shadow:0 0 10px red;
}


/* COVER + RING */

#coverWrap{
position:relative;
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
}

#playerCover{
width:50px;
height:50px;
object-fit:cover;
border-radius:6px;
z-index:2;
}

/* RING */

#ring{
position:absolute;

width:60px;
height:60px;

border-radius:50%;
border:2px solid red;

top:50%;
left:50%;

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

opacity:0.4;
}

/* spin when playing */

#ring.playing{
animation:ringSpin 2s linear infinite;
box-shadow:0 0 12px red;
opacity:1;
}

@keyframes ringSpin{
from{transform:translate(-50%,-50%) rotate(0deg);}
to{transform:translate(-50%,-50%) rotate(360deg);}
}


/* NAME */

#trackName{
color:red;
font-size:13px;
min-width:120px;
}


/* AUDIO */

#audioPlayer{
width:300px;
}


/* BUTTON */

.playerInner button{
width:28px;
height:28px;
background:black;
color:red;
border:1px solid red;
cursor:pointer;
}

.playerInner button:hover{
background:red;
color:black;
}

.activeBtn{
background:red !important;
color:white !important;
box-shadow:0 0 10px red;
}


/* EQ */

#eq{
display:flex;
gap:3px;
height:18px;
align-items:flex-end;
opacity:0.3;
}

#eq div{
width:3px;
height:5px;
background:red;
}

#eq.playing div{
animation:eq .6s infinite ease-in-out;
}

#eq div:nth-child(2){animation-delay:.1s}
#eq div:nth-child(3){animation-delay:.2s}
#eq div:nth-child(4){animation-delay:.3s}

@keyframes eq{
0%{height:5px}
50%{height:18px}
100%{height:5px}
}