@media (min-width: 761px) {
  .app-global-player--queue [data-global-player-queue-list] {
    scrollbar-width: thin;
    scrollbar-color: rgba(54, 146, 244, .72) transparent;
  }

  .app-global-player--queue [data-global-player-queue-list]::-webkit-scrollbar { width: 6px; }
  .app-global-player--queue [data-global-player-queue-list]::-webkit-scrollbar-track { background: transparent; }
  .app-global-player--queue [data-global-player-queue-list]::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 99px;
    background: rgba(54, 146, 244, .72);
    background-clip: padding-box;
  }
  .app-global-player--queue [data-global-player-queue-list]::-webkit-scrollbar-thumb:hover { background-color: #3692f4; }

  .app-global-player--timeline input::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #3692f4 0 var(--seek-progress, 0%), #d9e1ea var(--seek-progress, 0%) 100%);
  }
  .app-global-player--timeline input::-moz-range-progress { height: 4px; border-radius: 99px; background: #3692f4; }
  .app-global-player--volume input::-webkit-slider-runnable-track {
    height: 4px;
    border: 0;
    border-radius: 99px;
    background: linear-gradient(to right, #3692f4 0 var(--volume-progress, 100%), #d9e1ea var(--volume-progress, 100%) 100%);
  }
  .app-global-player--volume input::-moz-range-track { height: 4px; border: 0; border-radius: 99px; background: #d9e1ea; }
  .app-global-player--volume input::-moz-range-progress { height: 4px; border-radius: 99px; background: #3692f4; }
  .app-global-player--volume input::-webkit-slider-thumb { width:14px; height:14px; margin-top:-5px; border:0; border-radius:50%; background:#3692f4; -webkit-appearance:none; }
  .app-global-player--volume input::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:#3692f4; }

  html[data-theme="dark"] .app-global-player--queue [data-global-player-queue-list] {
    scrollbar-color: rgba(167, 139, 250, .76) transparent;
  }
  html[data-theme="dark"] .app-global-player--queue [data-global-player-queue-list]::-webkit-scrollbar-thumb { background-color: rgba(167, 139, 250, .76); }
  html[data-theme="dark"] .app-global-player--timeline input::-webkit-slider-runnable-track { background: linear-gradient(to right, #5b9fff 0 var(--seek-progress, 0%), #332b45 var(--seek-progress, 0%) 100%); }
  html[data-theme="dark"] .app-global-player--timeline input::-moz-range-progress { background: #5b9fff; }
  html[data-theme="dark"] .app-global-player--volume input::-webkit-slider-runnable-track { background: linear-gradient(to right, #5b9fff 0 var(--volume-progress, 100%), #332b45 var(--volume-progress, 100%) 100%); }
  html[data-theme="dark"] .app-global-player--volume input::-moz-range-track { background:#332b45; }
  html[data-theme="dark"] .app-global-player--volume input::-moz-range-progress { background:#5b9fff; }
  html[data-theme="dark"] .app-global-player button:hover:not(:disabled),
  html[data-theme="dark"] .app-global-player button[aria-pressed="true"] {
    color: #5b9fff;
    background: rgba(91, 159, 255, .14);
  }
}

.app-global-player--queue {
  bottom: calc(100% + 10px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(52vh, 420px);
  overflow: hidden;
}
.app-global-player--queue[hidden] { display: none !important; }
.app-global-player--track img.app-image-pending {
  background-size: 80% auto !important;
}
.app-global-player--queue header { padding: 12px 15px; }
.app-global-player--queue [data-global-player-queue-list] {
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}
.app-global-player button.app-global-player--queue-item {
  direction: ltr;
  display: grid;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  place-items: stretch;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 40px;
  grid-template-areas: "meta cover";
  column-gap: 10px;
  min-height: 50px;
  margin: 0 0 6px;
  padding: 5px;
  border-radius: 6px;
  transition: none;
}
.app-global-player button.app-global-player--queue-item:last-child { margin-bottom: 0; }
.app-global-player button.app-global-player--queue-item:hover:not(.is-current) {
  color: #2f8df3 !important;
  background: rgba(91, 159, 255, .12) !important;
}
html[data-theme="dark"] .app-global-player button.app-global-player--queue-item:hover:not(.is-current) { color: #7db7ff !important; }
.app-global-player button.app-global-player--queue-item img {
  grid-area: cover;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.app-global-player button.app-global-player--queue-item span { grid-area: meta; direction: rtl; text-align: right; }
.app-global-player button.app-global-player--queue-item strong { font-size: 12px; line-height: 1.25; }
.app-global-player button.app-global-player--queue-item small { margin-top: 1px; font-size: 10px; line-height: 1.2; }
.app-global-player button.app-global-player--queue-item time { display: none; }
.app-global-player button.app-global-player--queue-item.is-current {
  color: #fff;
  background: #3692f4;
}
.app-global-player button.app-global-player--queue-item.is-current:hover {
  color: #fff !important;
  background: #3692f4 !important;
}

@media (max-width: 760px) {
  .app-global-player--queue {
    bottom: calc(100% + 8px);
    height: min(58vh, 460px);
  }

  .app-global-player:not(.is-empty) .app-global-player--bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "track controls" "timeline actions";
  }
  .app-global-player--actions button:not([data-global-player-open-queue]) { display: grid; }
  .app-global-player--actions { justify-content: flex-end; }
}
.app-global-player--volume input {
    height: 14px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.app-global-player--timeline input,
.app-global-player--volume input {
  --range-fill: #3692f4;
  --range-track: #d9e1ea;
  height: 14px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}
.app-global-player--timeline input { --range-progress: var(--seek-progress, 0%); }
.app-global-player--volume input { --range-progress: var(--volume-progress, 100%); }
.app-global-player--timeline input::-webkit-slider-runnable-track,
.app-global-player--volume input::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(to right, var(--range-fill) 0 var(--range-progress), var(--range-track) var(--range-progress) 100%);
}
.app-global-player--timeline input::-moz-range-track,
.app-global-player--volume input::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: var(--range-track);
}
.app-global-player--timeline input::-moz-range-progress,
.app-global-player--volume input::-moz-range-progress {
  height: 4px;
  border-radius: 99px;
  background: var(--range-fill);
}
.app-global-player--timeline input::-webkit-slider-thumb,
.app-global-player--volume input::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--range-fill);
  -webkit-appearance: none;
}
.app-global-player--timeline input::-moz-range-thumb,
.app-global-player--volume input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--range-fill);
}
html[data-theme="dark"] .app-global-player--timeline input,
html[data-theme="dark"] .app-global-player--volume input {
  --range-fill: #5b9fff;
  --range-track: #332b45;
}
html[data-theme="dark"] .app-global-player--actions button[aria-pressed="true"] {
  color: #7db7ff;
  background: rgba(91, 159, 255, .2);
}

body { padding-bottom: 0; }
.app-global-player-safe-area {
  height: 76px;
  background: var(--page-bg);
  pointer-events: none;
}

@media (min-width: 761px) {
  .app-global-player--bar {
    min-height: 58px;
    gap: 11px;
    padding: 6px 11px;
  }
  .app-global-player--track img { width: 46px; height: 46px; }
  .app-global-player--toggle { width: 34px !important; height: 34px !important; }
  .app-global-player button { width: 27px; height: 27px; }
}
@media (max-width: 760px) {
  .app-global-player-safe-area { height: 120px; }
}

.app-global-player--track img.is-fallback-cover {
  box-sizing: border-box;
  padding: 10%;
  object-fit: contain;
  background-color: #171321;
}
html:not([data-theme="dark"]) .app-global-player--track img.is-fallback-cover {
  background-color: #f1f2f4;
}
.app-global-player--timeline>div {
  margin-top: 1px;
  font-size: 7px;
}

[data-global-player-current],
[data-global-player-duration] {
  font-size: 13px;
  line-height: 1;
}