/* style.css */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
}

body{
  background:#070b14;
  font-family:Arial, Helvetica, sans-serif;
  color:rgba(240, 240, 243, 0.386);
  width:100%;
  height:100vh;
  overflow:hidden;
}

.app{
  width:100%;
  max-width:430px;
  height:100vh;
  margin:auto;
  overflow-y:auto;
  padding:20px 16px 120px;
  background:
  linear-gradient(
    180deg,
    #0d1321 0%,
    #111827 35%,
    #0a0f1a 100%
  );
}

.app::-webkit-scrollbar{
  width:0;
}

.topbar{
  margin-top:10px;
}

.topbar h1{
  font-size:32px;
  font-weight:800;
  letter-spacing:1px;
}

.topbar p{
  margin-top:6px;
  color:#6d6f71;
  font-size:14px;
}

.player-card{
  margin-top:25px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:28px;
  padding:22px;
  backdrop-filter:blur(10px);
  box-shadow:
  0 10px 40px rgba(0,0,0,0.45);
}

.cover{
  width:100%;
  height:270px;
  border-radius:24px;
  overflow:hidden;
}

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

.track-info{
  text-align:center;
  margin-top:20px;
}

.track-info h2{
  font-size:24px;
  font-weight:700;
}

.track-info span{
  display:block;
  margin-top:8px;
  color:#f0f0f198;
  font-size:14px;
}

.controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:28px;
}

.controls button{
  border:none;
  background:#1111113c;
  color:rgba(52, 8, 210, 0.815);
  border-radius:20px;
  cursor:pointer;
  transition:0.2s;
}

.controls button:active{
  transform:scale(0.95);
}

#playBtn{
  width:120px;
  height:60px;
  font-size:18px;
  font-weight:700;
  background:linear-gradient(
    135deg,
    #4f8cff,
    #4f8dffa1,
  );
  box-shadow:
  0 10px 30px rgba(79,140,255,0.4);
}

#prevBtn,
#nextBtn{
  width:60px;
  height:60px;
  font-size:20px;
}

.progress-area{
  margin-top:28px;
}

#progressBar{
  width:100%;
  height:6px;
  appearance:none;
  border-radius:50px;
  background:#1f2a3d;
  outline:none;
}

#progressBar::-webkit-slider-thumb{
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:white;
}

.timer-card{
  margin-top:22px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(36, 6, 134, 0.826);
  border-radius:28px;
  padding:22px;
}

.timer-top h3{
  font-size:20px;
}

.timer-buttons{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:18px;
}

.timer-btn{
  height:52px;
  border:none;
  border-radius:18px;
  background:#182234;
  color:rgba(191, 190, 194, 0.377);
  font-size:15px;
  font-weight:600;
}

.custom-time{
  display:flex;
  gap:10px;
  margin-top:16px;
}

.custom-time input{
  flex:1;
  height:52px;
  border:none;
  border-radius:18px;
  background:#111927;
  color:white;
  padding:0 16px;
  font-size:16px;
}

.custom-time button{
  width:110px;
  border:none;
  border-radius:18px;
  background:linear-gradient(
    135deg,
    #4f8cff,
    #6f6dff
  );
  color:white;
  font-weight:700;
}

.timer-display{
  margin-top:18px;
  text-align:center;
  color:#a9b4c7;
  font-size:15px;
}

#cancelTimer{
  margin-top:18px;
  width:100%;
  height:52px;
  border:none;
  border-radius:18px;
  background:#29151a;
  color:#ff8f9f;
  font-weight:700;
}

.playlist-section{
  margin-top:24px;
}

.playlist-title h3{
  font-size:22px;
  margin-bottom:18px;
}

.playlist{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.song{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(13, 6, 115, 0.824);
  border-radius:22px;
  cursor:pointer;
  transition:0.2s;
}

.song:active{
  transform:scale(0.98);
}

.song img{
  width:70px;
  height:70px;
  border-radius:18px;
  object-fit:cover;
}

.song-info{
  flex:1;
}

.song-info h4{
  font-size:17px;
  margin-bottom:6px;
}

.song-info p{
  color:#94a3b8;
  font-size:13px;
}

.active-song{
  border:1px solid #4f8cff;
  background:rgba(79,140,255,0.12);
}

@media (min-width:431px){

  body{
    display:flex;
    justify-content:center;
    background:black;
  }

}