/* Container */
.wmp-container{
  width:100%;
  max-width:1100px;
  margin:20px auto;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:20px;
  font-family:inherit; /* inherit site font */
  color:#111;
}

/* Layout */
.wmp-top{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:20px;
  align-items:stretch;
}
@media(max-width:900px){
  .wmp-top{grid-template-columns:1fr}
}

/* Left side (cover + info) */
.wmp-left{display:flex; gap:14px; align-items:center}
.wmp-cover{
  width:120px; height:120px; border-radius:16px; overflow:hidden; background:#f3f3f3;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.wmp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.wmp-info{display:flex; flex-direction:column; gap:6px; justify-content:center}
.wmp-title{font-size:1.05rem;font-weight:800}
.wmp-artist{font-size:.9rem;color:#444}

/* Right side */
.wmp-visualizer{
  height:46px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin-bottom:10px;
}
.wmp-visualizer span{
  width:6px;
  height:12px;
  border-radius:3px;
  background:#111;
  opacity:.15;
  animation:wmp-bounce 1.1s ease-in-out infinite;
  animation-play-state: paused;
}
/* different delays to look random */
.wmp-visualizer span:nth-child(2){animation-delay:.1s}
.wmp-visualizer span:nth-child(3){animation-delay:.2s}
.wmp-visualizer span:nth-child(4){animation-delay:.3s}
.wmp-visualizer span:nth-child(5){animation-delay:.4s}
.wmp-visualizer span:nth-child(6){animation-delay:.5s}
.wmp-visualizer span:nth-child(7){animation-delay:.6s}
.wmp-visualizer span:nth-child(8){animation-delay:.7s}
.wmp-visualizer span:nth-child(9){animation-delay:.8s}
.wmp-visualizer span:nth-child(10){animation-delay:.9s}

@keyframes wmp-bounce{
  0%,100%{ transform:scaleY(.35); opacity:.25 }
  50%{ transform:scaleY(1.3); opacity:.9 }
}
/* when playing, animate bars */
.wmp-container.is-playing .wmp-visualizer span{ animation-play-state: running; }

/* Controls */
.wmp-controls{display:flex; gap:12px; align-items:center}
.wmp-btn{
  width:44px; height:44px; border-radius:50%;
  background:#000; color:#fff; display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; transition:transform .12s ease, background .25s ease, opacity .25s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.wmp-btn:hover{ transform:translateY(-1px); background:#111 }
.wmp-btn:active{ transform:translateY(0) scale(.98) }
.wmp-btn svg{display:block}

/* Progress */
.wmp-progress{display:flex; align-items:center; gap:10px; margin-top:12px}
.wmp-current,.wmp-duration{font-feature-settings:'tnum' 1; font-variant-numeric: tabular-nums; color:#555; width:48px; text-align:center}
.wmp-seek{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:linear-gradient(90deg,#111 0%, #111 var(--wmp-progress,0%), #e8e8e8 var(--wmp-progress,0%), #e8e8e8 100%);
  outline:none; cursor:pointer;
}
.wmp-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:#000; border:2px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.2)
}
.wmp-seek::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:#000; border:2px solid #fff;
}

/* Playlist */
.wmp-playlist-wrap{margin-top:16px}
.wmp-playlist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; max-height:380px; overflow:auto}
.wmp-track{
  display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:12px;
  padding:10px; border-radius:12px; background:#fafafa; cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease, transform .1s ease;
  border:1px solid #f0f0f0;
}
.wmp-track:hover{ background:#f3f3f3 }
.wmp-track img{width:56px;height:56px;object-fit:cover;border-radius:10px}
.wmp-track .meta{display:flex;flex-direction:column;line-height:1.2}
.wmp-track .meta span{color:#666;font-size:.85rem}
.wmp-track.active{ background:#eaf0ff; border-color:#d6e2ff; box-shadow:0 4px 12px rgba(35,85,255,.08) }
.wmp-track small{color:#555}

/* Dark mode (optional: set .wmp-dark on container) */
.wmp-container.wmp-dark{background:#0f1115; color:#f2f2f2; box-shadow:0 10px 30px rgba(0,0,0,.45)}
.wmp-container.wmp-dark .wmp-track{background:#161a20; border-color:#1f2530}
.wmp-container.wmp-dark .wmp-track:hover{background:#1a1f27}
.wmp-container.wmp-dark .wmp-seek{background:linear-gradient(90deg,#fff 0%, #fff var(--wmp-progress,0%), #2a2f39 var(--wmp-progress,0%), #2a2f39 100%)}
.wmp-container.wmp-dark .wmp-btn{background:#fff;color:#000}