:root{
  --bg:#0b0c10;
  --card:#14161a;
  --card-hover:#1a1d23;
  --accent:#8fe96a;
  --accent-2:#5ebc3a;
  --muted:#8b8f97;
  --glass: rgba(255,255,255,0.06);
  --wave:#ccc;
  --wave-progress:#444;
  --timer:#d1d1d1;
}

/* базовые стили */
*{box-sizing:border-box;}
body{
  margin:0;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
}

header{
  background: linear-gradient(90deg,#0f1724,#0a0c10);
  padding:18px 24px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  text-align:center;
}
header h1{ margin:0; font-size:20px; color:#bfeec6; font-weight:600; }

.track-list{
  max-width:1100px;
  margin:22px auto;
  padding:0 18px 60px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.track {
  display: flex;
  align-items: center;
  gap:18px;
  padding:12px;
  background:var(--card);
  border-radius:12px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s;
  border:1px solid rgba(255,255,255,0.02);
}
.track:hover{
  transform: translateY(-6px);
  background: var(--card-hover);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

.track-cover{
  position: relative;
  width:120px;
  height:120px;
  flex: 0 0 120px;
  border-radius:10px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.track-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .35s ease;
}
.track:hover .track-cover img{ transform: scale(1.05); }

.play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.45);
  opacity:0;
  transition: opacity .22s ease;
}
.track-cover:hover .play-overlay,
.track.wave-hover .play-overlay{
  opacity:1;
}
.play-overlay button{
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  background: linear-gradient(180deg,var(--accent-2),var(--accent));
  color:#071006;
  font-size:20px;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(142,233,106,0.12), inset 0 -2px 6px rgba(0,0,0,0.12);
  transition: transform .15s ease;
}
.play-overlay button:hover{ transform: scale(1.06); }

.track-main{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
}
.track-title{
  font-size:15px;
  font-weight:600;
  color:#e6ffe8;
  margin:0;
}

.track-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.time-current{
  width:56px;
  text-align:center;
  color:var(--timer);
  font-size:13px;
}
.wave-container{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  height:72px;
  border-radius:8px;
  overflow:hidden;
  background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  padding:6px 6px;
}
.bitrate-badge{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:70px;
  color:#000;
  font-weight:700;
  pointer-events:none;
  opacity:0.85;
}
.time-duration{
  width:56px;
  text-align:center;
  color:var(--timer);
  font-size:13px;
  flex:0 0 56px;
}
.track-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  margin-left:8px;
}
.action-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.icon-btn{
  width:34px;
  height:34px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.02);
  color:var(--muted);
  cursor:pointer;
  transition: transform .12s, color .12s, background .12s;
  border: 1px solid rgba(255,255,255,0.02);
}
.icon-btn:hover{
  transform: translateY(-3px);
  color: var(--accent);
  background: rgba(142,233,106,0.06);
  border-color: rgba(142,233,106,0.12);
}
.icon-label{
  font-size:13px;
  color:var(--muted);
  min-width:36px;
  text-align:left;
}
.icon-btn[data-tooltip]:hover::after{
  content: attr(data-tooltip);
  position: absolute;
  margin-top: -44px;
  transform: translateX(-10%);
  background: rgba(0,0,0,0.75);
  color:#fff;
  padding:6px 8px;
  border-radius:6px;
  font-size:12px;
  white-space:nowrap;
  z-index:50;
}
.wave-container canvas{
  width:100% !important;
  height:100% !important;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}
@media (max-width:880px){
  .track { flex-direction:column; align-items:stretch; }
  .track-cover{ width:100%; height:200px; flex:0 0 auto; }
  .track-row{ flex-direction:row; gap:10px; align-items:center; }
  .track-actions{ flex-direction:row; justify-content:space-between; width:100%; margin-left:0; }
  .time-current, .time-duration{ display:none; }
}