/* ==== Simple Music Player (responsive, icon-safe) ==== */

.smp-player{
  --bg1:#ffffff; --bg2:#f3f3f3; --fg:#374151;
  --muted:#222222; --accent:#f59e0b; --accent2:#64748b;
  --grad-from:#fbbe24; --grad-to:#ef4543;

  --radius:1.125rem;         /* 18px */
  --maxw:46.25rem;           /* 740px */

  --btn-nav:1.375rem;        /* prev/next */
  --btn-util:1.2rem;           /* shuffle/repeat */
  --play:2.063rem;           /* main play */
  --vinyl:1.75rem;           /* vinyl ikon */

  --hover:1.08;
  --tl-h:.75rem;             /* 12px timeline */
  --handle:1.375rem;         /* 22px */

  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--fg);
  padding:1.125rem;
  border-radius:var(--radius);
	border:1px solid #9393934a;
  max-width:var(--maxw);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  position:relative;
}

/* Header */
.smp-cover-area{ display:flex; gap:1rem; align-items:center; will-change: transform, opacity; }
.smp-cover{ width:8.75rem; height:8.75rem; border-radius:.75rem; overflow:hidden; background:#111; flex:0 0 auto; }
.smp-cover img{ width:100%; height:100%!important; object-fit:cover; object-position:center; display:block }
.smp-meta{ display:flex; flex-direction:column; gap:.375rem }
.smp-title{ font-size:1.375rem; font-weight:800; color:#181818; letter-spacing:.0125rem }
.smp-player h1,
.smp-player h2,
.smp-player h3,
.smp-player h4,
.smp-player h5,
.smp-player h6,
.smp-player strong{ color:#181818; }
.smp-artist{ font-size:.9375rem; color:var(--muted) }

/* Controls */
.smp-controls{ display:flex; align-items:center; justify-content:space-between; gap:0; margin:1.125rem 1.125rem; flex-wrap:nowrap }
.smp-ctrls{ display:flex; align-items:center; gap:.625rem; flex:0 1 auto }
.smp-btn{ flex:0 0 auto; background:transparent no-repeat center/contain; border:0; padding:0; cursor:pointer; transition: transform .12s ease, filter .2s ease }
.smp-btn:hover{ transform:scale(var(--hover)) }
.smp-play{ width:var(--play); height:var(--play); min-width:var(--play); min-height:var(--play) }
.smp-prev, .smp-next{ width:var(--btn-nav); height:var(--btn-nav); min-width:var(--btn-nav); min-height:var(--btn-nav) }
.smp-shuffle, .smp-repeat{ width:var(--btn-util); height:var(--btn-util); min-width:var(--btn-util); min-height:var(--btn-util) }

/* Vinyl */
.smp-vinyl{ width:var(--vinyl); height:var(--vinyl); flex:0 0 auto; background:center/contain no-repeat; will-change: transform; filter: drop-shadow(0 0 .125rem rgba(0,0,0,.25)); animation: smp-spin 3.2s linear infinite; animation-play-state: paused }
@keyframes smp-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.smp-player.is-playing .smp-vinyl{ animation-play-state: running }

/* Volume */
.smp-volume{ display:flex; align-items:center; gap:.625rem; flex:0 0 auto }
.smp-vol-icon{ width:1.5rem; height:1.5rem; flex:0 0 auto; background:no-repeat center/contain; cursor:pointer; transition:transform .12s ease }
.smp-vol-icon:hover{ transform:scale(1.1) }
.smp-vol-range{ appearance:none; width:10rem; height:.375rem; border-radius:999rem; background: linear-gradient(90deg, #e7e7e7, #939393); outline:none; flex:0 0 auto }
.smp-vol-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:1.125rem; height:1.125rem; border-radius:50%; background:#fff; box-shadow:0 .125rem .375rem rgba(0,0,0,.35) }
.smp-vol-range::-moz-range-thumb{ width:1.125rem; height:1.125rem; border-radius:50%; background:#fff; border:none; box-shadow:0 .125rem .375rem rgba(0,0,0,.35) }

/* Timeline */
.smp-timeline{ position:relative; height:var(--tl-h); border-radius:999rem; background:#dbdbdb; cursor:pointer; user-select:none; margin:.625rem .125rem .375rem }
.smp-progress{ position:absolute; inset:0 auto 0 0; height:var(--tl-h); width:0%; background:#939393; border-radius:999rem; transition:width .08s linear; will-change:width }
.smp-handle{ position:absolute; top:50%; transform:translate(-17%,-50%); left:0%; width:var(--handle); height:var(--handle); border-radius:50%; background:#fff; box-shadow: 0 0 1.5rem rgba(0, 0, 0, .3); transition:left .08s linear; will-change:left }
.smp-player.is-seeking .smp-progress,
.smp-player.is-seeking .smp-handle{ transition:none }
.smp-time{ display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; color:var(--muted); font-size:.875rem }

/* Playlist */
.smp-playlist{ margin-top:.875rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:.875rem; max-height:43.75rem; overflow:auto }

.smp-list{
  list-style:none;
  margin:0;
  padding:.375rem;
  max-height:24.75rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.smp-item{ transform:translateX(0); opacity:1; }
.smp-item.is-animating{ animation: smp-track-slide-in .28s ease forwards; }
@keyframes smp-track-slide-in{
  from{ transform:translateX(-0.75rem); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}
.smp-item-btn{ width:100%; text-align:left; background:transparent; color:inherit; border:0; padding:.625rem; display:flex; align-items:center; gap:.625rem; cursor:pointer; transition:transform .1s ease }
.smp-item-btn:hover{ transform: translateX(.125rem) }
.smp-item-cover{ width:2.75rem; height:2.75rem; border-radius:.5rem; background:#1f2937 center/cover no-repeat; flex:0 0 auto }
.smp-item-text{ display:flex; flex-direction:column; gap:.125rem }
.smp-item-text strong{ font-weight:700; font-size:.875rem }
.smp-item-text em{ font-size:.75rem; color:var(--muted); font-style:normal }
.smp-item-text strong{ color:#181818; }
.smp-item.is-active{ background:none; border-radius:0.75rem; border: 1px solid #9393934a;  }
.smp-item--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:3.5rem;
  padding:1.25rem;
  text-align:center;
  color:var(--muted);
  font-style:italic;
  pointer-events:none;
}

/* Responsive 550px */
@media (max-width: 34.375rem){
  .smp-cover-area{ flex-direction:column; align-items:center; text-align:center }
  .smp-cover{ width:6.875rem; height:6.875rem }
  .smp-title{ font-size:1.125rem }
  .smp-controls{ flex-direction:column; align-items:center; justify-content:center; gap:.625rem }
  .smp-ctrls{ justify-content:center; gap:.625rem }
  .smp-volume{ width:auto; justify-content:center }
  .smp-vol-range{ width:7.5rem }
}

/* No shrink */
.smp-controls > .smp-btn,
.smp-controls > .smp-volume{ flex:0 0 auto }

.smp-player--no-volume .smp-volume{
  display:none;
}
.smp-player--no-volume .smp-controls{
  justify-content:center;
}

.smp-player--no-tracks .smp-btn,
.smp-player--no-tracks .smp-vol-icon,
.smp-player--no-tracks .smp-vol-range,
.smp-player--no-tracks .smp-timeline,
.smp-player--no-tracks .smp-handle{
  opacity:.45;
  pointer-events:none;
  cursor:not-allowed;
}