/* Container */
.r24-container{
  max-width: 420px;
  margin: 24px auto;
  padding: 16px;
  border-radius: 18px;
  background: #0f1a1f;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  color: #eaf1f6;
  font-family: 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* Artwork */
.r24-art{
  width:100%;
  height: 240px;
  border-radius: 14px;
  background: #0b2a30;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 16px;
}
.r24-art img{ width:100%; height:100%; object-fit: cover; }

/* Titles */
.r24-titleblock{ text-align: center; margin-bottom: 8px; }
.r24-titleblock .r24-track-title{ font-size: 26px; font-weight: 800; line-height: 1.2; color: #eaf1f6; }
.r24-titleblock .r24-sub{ opacity: .7; margin-top: 6px; }

/* Progress */
.r24-progress{ margin: 14px 0 6px; }
.r24-bar{ width:100%; height:8px; border-radius: 6px; background:#1c2b33; position: relative; cursor: pointer; }
.r24-fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:#2da8ff; border-radius:6px; }
.r24-times{ display:flex; justify-content:space-between; font-size:12px; opacity:.85; }

/* Controls */
.r24-controls{ display:flex; align-items:center; justify-content:space-between; margin-top: 12px; }
.r24-ctrl{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:transparent; border:0; color:#cde8ff; cursor:pointer; transition: transform .05s ease; font-size:16px; }
.r24-ctrl:active{ transform: scale(0.98); }
.r24-ctrl.primary{ width:70px; height:70px; background:#2da8ff; color:#07202b; box-shadow:0 6px 20px rgba(45,168,255,.35); border: 4px solid rgba(255,255,255,.08); font-size:22px; }

/* Up Next */
.r24-upnext{ margin-top:16px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); }
.r24-upnext-title{ opacity:.8; margin-bottom:6px; font-weight:600; }
.r24-list{ margin:0; padding-left:16px; }

button.r24-ctrl.r24-prev, button.r24-ctrl.r24-back10, button.r24-ctrl.r24-fwd10, button.r24-ctrl.r24-next {
    visibility: hidden;
}
ul.r24-list {
    direction: rtl;
    line-height: 2em;
}