:root{
  --player-bg: linear-gradient(135deg,#0f1724 0%, #122033 100%);
  --accent: #ff3d91;
  --muted: #9aa4b2;
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.02);
  --radius: 12px;
  --control-size: 48px;
}

/* Core player layout */
.track-plaer{
  max-width:1000px;
  margin:18px auto;
  padding:14px;
  background:var(--player-bg);
  color:#e6eef8;
  border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(2,6,23,0.6);
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
}

.track-info-p{ display:flex; gap:12px; align-items:center; min-width:160px }
.track-curent-number{
  display:inline-grid; place-items:center;
  width:56px; height:56px; border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color:var(--accent); font-weight:700; font-size:14px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,0.3);
}

.track-info-p p{ margin:0; font-size:14px; color:var(--muted) }

.curent-t{ margin-left:auto; font-size:13px; color:var(--muted) }
.curent-t .current-time{ margin-right:8px }

/* Seek bar */
#seekBar{
  -webkit-appearance:none; appearance:none;
  width:100%;  height:6px; border-radius:6px; background:var(--glass-2);
  outline:none; margin:8px 0;
}
#seekBar::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,0.5)}
#seekBar::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--accent) }

/* Controls */
.hero-track-controls{
  display:flex; gap:10px; align-items:center; margin-left:auto; flex-wrap:wrap;
}
.hero-track-controls button{ 
  width:var(--control-size);
   height:var(--control-size);
   border-radius:12px; 
  border:0; 
  background-size:20px 20px;
  background-repeat:no-repeat;
  background-position:center;
  color:var(--accent); 
  cursor:pointer;
   display:inline-grid; 
  place-items:center; 
  transition:transform .14s ease, background .14s ease 
}
.hero-track-controls button:active{ transform:scale(.98) }
.hero-track-controls button:focus{ outline:2px solid rgba(255,61,145,0.2); outline-offset:2px }

.play-btn-pay{ width:64px; height:64px; background:linear-gradient(135deg, rgba(255,61,145,0.14), rgba(255,61,145,0.06)); font-size:18px; border-radius:14px }
.playback-options{ display:grid; gap:8px; align-items:center }
.repeat{
  position: relative;
  background-image:url('https://img.icons8.com/?size=100&id=15163&format=png&color=000000');
  background-size:16px 16px;
  background-repeat:no-repeat;
  background-position:center;
  bottom: 18px; 
  width:32px; 
  height:32px; 
  border-radius:8px; 
  display:flex; 
  justify-content:center ;
  align-items:center;
  cursor:pointer;
  font-size:14px;
  }

  .active-repeat{
    background-image:url('https://img.icons8.com/?size=100&id=HUYuk7CmaDfq&format=png&color=000000');
    background-size:16px 16px;
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer;
  }
  .shuffle{
  position: relative;
  background-image:url('https://img.icons8.com/?size=100&id=15164&format=png&color=000000');
  background-size:16px 16px;
  background-repeat:no-repeat;
  background-position:center;
  bottom: 18px; 
  width:32px; 
  height:32px; 
  border-radius:8px; 
  display:flex; 
  justify-content:center ;
  align-items:center;
  cursor:pointer;
  font-size:14px;
  }
  .active-shuffle{
    background-image:url('https://img.icons8.com/?size=100&id=fGIGItP9pLhy&format=png&color=000000');
    background-size:16px 16px;
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer;
  }

.volume-control{ width:35px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center }
#volumeSlider{ width:100px }

/* Equalizer */
.music-equalizer{ display:flex; gap:6px; align-items:flex-end; margin-left:8px }
.music-equalizer span{ width:6px; height:12px; background:linear-gradient(180deg,var(--accent),#ffd6f0); border-radius:3px; display:inline-block; transform-origin:bottom center; animation:peak 900ms infinite ease-in-out; opacity:.95 }
.music-equalizer span:nth-child(odd){ animation-duration:780ms }
.music-equalizer span:nth-child(2n){ animation-duration:640ms }
.music-equalizer span:nth-child(3n){ animation-duration:980ms }
.music-equalizer span:nth-child(4n){ animation-duration:540ms }
.music-equalizer span:nth-child(5n){ animation-duration:840ms }
.music-equalizer span:nth-child(6n){ animation-duration:720ms }
.music-equalizer span:nth-child(7n){ animation-duration:880ms }
.music-equalizer span:nth-child(8n){ animation-duration:660ms }
.music-equalizer span:nth-child(9n){ animation-duration:760ms }
.music-equalizer span:nth-child(10n){ animation-duration:820ms }

@keyframes peak{ 0%{transform:scaleY(.25)} 50%{transform:scaleY(1.75)} 100%{transform:scaleY(.25)} }

/* Compact and responsive rules */
@media (max-width:880px){
  .track-plaer{ padding:12px; gap:10px }
  .track-info-p{ min-width:120px }
  .hero-track-controls{ width:100%; justify-content:space-between }
  #seekBar{ max-width:100% }
  .repeat{ width:12px; height:12px; background-size:10px 10px; }
}

@media (max-width:520px){
  .track-plaer{ padding:12px; align-items:stretch }
  .track-info-p{ width:100%;  }
  .curent-t{ order:3; text-align:left }
  .hero-track-controls{ order:2 }
  .music-equalizer{ display: none; }
  .shuffle{ width:12px; height:12px; background-size:10px 10px; }
}

/* Small polish for dark/light compatibility */
@media (prefers-color-scheme: light){
  :root{ --player-bg: linear-gradient(135deg,#f6f8fb 0%, #fff 100%); --accent:#ff3d91; --muted:#475569; color-scheme:light }
  .track-plaer{ color:#0b1320 }
  .track-curent-number{ background:linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01)); color:var(--accent) }
}