:root {
  --player-glass-tint: color-mix(in srgb,var(--panel) 48%,transparent);
  --queue-glass-tint: color-mix(in srgb,var(--panel) 76%,transparent);
  --player-glass-edge: color-mix(in srgb,var(--ink) 12%,#ffffff80);
  --player-glass-reflection: #ffffff65;
  --player-glass-shadow: #142b2420;
}
:root[data-theme="dark"] {
  --player-glass-tint: color-mix(in srgb,var(--panel) 42%,transparent);
  --queue-glass-tint: color-mix(in srgb,var(--panel) 68%,transparent);
  --player-glass-edge: #ffffff20;
  --player-glass-reflection: #ffffff18;
  --player-glass-shadow: #00000045;
}
.player-symbols { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.player-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* The glass sits behind the controls so the queue can blur the page independently. */
body[data-route] .transport { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
.transport::before, .transport::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.transport::before {
  background: linear-gradient(125deg,#ffffff13,transparent 45%,color-mix(in srgb,var(--accent) 7%,transparent)),var(--player-glass-tint);
  backdrop-filter: blur(32px) saturate(145%); -webkit-backdrop-filter: blur(32px) saturate(145%);
  border-top: 1px solid var(--player-glass-edge);
  box-shadow: inset 0 1px 0 var(--player-glass-reflection),0 -8px 36px var(--player-glass-shadow);
}
.transport::after { background: url('/assets/glass-grain.svg') repeat; opacity: .045; }
.transport .transport-cover { border-radius: 11px; border: 1px solid var(--player-glass-edge); box-shadow: 0 4px 16px #00000018; }
.transport .transport-title { font-size: 13px; font-weight: 600; line-height: 1.5; }
.transport .transport-track small { font-size: 10px; }
.transport #playback-state { font-size: 9px; opacity: .75; }
.transport-buttons button, .transport-tools button {
  display: grid; place-items: center; border-radius: 50%; color: var(--ink);
  transition: background .25s,box-shadow .25s,transform .3s var(--motion-out);
}
.transport-buttons button:hover, .transport-tools button:hover { background: color-mix(in srgb,var(--ink) 7%,transparent); transform: translateY(-1px); }
.transport-buttons button:active:not(:disabled), .transport-tools button:active:not(:disabled) { transform: scale(.94); }
.transport-buttons .transport-play {
  width: 37px; height: 37px; background: var(--ink); color: var(--paper);
  box-shadow: inset 0 1px 0 #ffffff32,0 4px 14px #00000018;
}
.transport-buttons .transport-play:hover { background: var(--ink); box-shadow: inset 0 1px 0 #ffffff40,0 6px 20px #00000025; }
.transport-play .player-icon { width: 19px; height: 19px; }
.transport-play[data-icon="loading"] .player-icon { animation: player-pending 1s linear infinite; }
.transport #transport-queue-toggle[aria-expanded="true"] { background: color-mix(in srgb,var(--ink) 10%,transparent); box-shadow: inset 0 0 0 1px var(--player-glass-edge); }
.transport #transport-mode[aria-pressed="true"] { background: color-mix(in srgb,var(--ink) 9%,transparent); box-shadow: inset 0 0 0 1px var(--player-glass-edge); }
.transport-tools { gap: 8px; }
.transport-tools #volume { width: 70px; }
.transport #transport-mute[aria-pressed="true"] + #volume { opacity: .45; }
.transport .transport-progress .time { font-size: 10px; color: var(--muted); }
.transport input[type="range"] { appearance: none; -webkit-appearance: none; background: transparent; outline-offset: 3px; }
.transport #seek, .transport-tools #volume { height: 20px; }
.transport input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 10px;
  background: linear-gradient(to right,var(--ink) 0 var(--range-fill,0%),color-mix(in srgb,var(--ink) 18%,transparent) var(--range-fill,0%) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent);
}
.transport input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px;
  background: var(--ink); border: 1px solid var(--player-glass-edge); border-radius: 50%;
  box-shadow: 0 1px 5px #00000020; transition: transform .2s;
}
.transport input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.2); }
.transport input[type="range"]::-moz-range-track { height: 3px; border-radius: 10px; background: color-mix(in srgb,var(--ink) 18%,transparent); }
.transport input[type="range"]::-moz-range-progress { height: 3px; border-radius: 10px; background: var(--ink); }
.transport input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; background: var(--ink); border: 1px solid var(--player-glass-edge); border-radius: 50%; box-shadow: 0 1px 5px #00000020; }
.transport input[type="range"]:disabled { opacity: .45; cursor: default; }

.transport-queue {
  width: min(430px,calc(100vw - 32px)); right: 4%; bottom: calc(100% + 18px);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  color: var(--ink); background: var(--queue-glass-tint); border: 1px solid var(--player-glass-edge);
  backdrop-filter: blur(34px) saturate(135%); -webkit-backdrop-filter: blur(34px) saturate(135%);
  box-shadow: 0 18px 60px var(--player-glass-shadow),inset 0 1px 0 var(--player-glass-reflection);
}
.transport-queue[hidden] { display: none; }
.transport-queue:not([hidden]) { animation: queue-reveal .35s var(--motion-out); }
.transport-queue::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(145deg,#ffffff10,transparent 45%),url('/assets/glass-grain.svg') repeat; opacity: .08; }
.transport-queue header { padding: 22px 24px 17px; border-color: color-mix(in srgb,var(--ink) 8%,transparent); }
.queue-kicker { display: block; margin-bottom: 7px; color: var(--muted); font: 8px/1 Arial,sans-serif; letter-spacing: 2px; }
.transport-queue h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; }
.queue-source { max-width: 300px; margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-count { display: inline-grid; place-items: center; min-width: 28px; height: 21px; padding: 0 7px; background: color-mix(in srgb,var(--ink) 7%,transparent); border: 1px solid var(--player-glass-edge); border-radius: 8px; font: 10px Arial,sans-serif; font-variant-numeric: tabular-nums; }
.transport-queue header button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; color: var(--muted); }
.transport-queue header button:hover { color: var(--ink); background: color-mix(in srgb,var(--ink) 7%,transparent); }
.transport-queue header .player-icon { width: 17px; height: 17px; }
#queue-tracks { position: relative; min-height: 0; padding: 8px 12px 12px; max-height: min(440px,calc(100dvh - var(--player-height) - 180px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--ink) 25%,transparent) transparent; scrollbar-gutter: stable; }
#queue-tracks::-webkit-scrollbar { width: 5px; }
#queue-tracks::-webkit-scrollbar-thumb { border-radius: 5px; background: color-mix(in srgb,var(--ink) 25%,transparent); }
#queue-tracks .queue-track {
  display: grid; grid-template-columns: 20px 42px minmax(0,1fr) 34px; gap: 12px; align-items: center;
  min-height: 68px; width: 100%; margin: 3px 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 13px;
  text-align: left; color: var(--ink); background: transparent; transition: background .25s,border-color .25s;
}
#queue-tracks .queue-track:hover { color: var(--ink); background: color-mix(in srgb,var(--ink) 5%,transparent); }
#queue-tracks .queue-track.active { color: var(--ink); background: color-mix(in srgb,var(--accent) 11%,transparent); border-color: color-mix(in srgb,var(--accent) 20%,transparent); }
.queue-number { color: var(--muted); font: 10px Arial,sans-serif; font-variant-numeric: tabular-nums; }
.queue-art { position: relative; display: block; width: 42px; height: 42px; overflow: hidden; border-radius: 9px; border: 1px solid var(--player-glass-edge); background: var(--panel); }
.queue-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.queue-info { display: grid; min-width: 0; gap: 5px; }
#queue-tracks .queue-info strong { font-size: 12px; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#queue-tracks .queue-info small { color: var(--muted); font-size: 10px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-duration { justify-self: end; color: var(--muted); font: 10px Arial,sans-serif; font-variant-numeric: tabular-nums; }
.queue-equalizer { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 3px; background: #07171465; }
.queue-track.active .queue-equalizer { display: flex; }
.queue-equalizer i { width: 2px; height: 14px; border-radius: 2px; background: #fff; transform: scaleY(.4); }
.queue-equalizer i:nth-child(2) { transform: scaleY(.7); }
.playing .queue-equalizer i { animation: queue-meter .8s ease-in-out infinite alternate; }
.playing .queue-equalizer i:nth-child(2) { animation-delay: -.35s; animation-duration: .65s; }
.playing .queue-equalizer i:nth-child(3) { animation-delay: -.2s; animation-duration: 1s; }

@keyframes player-pending { to { transform: rotate(360deg); } }
@keyframes queue-reveal { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes queue-meter { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.view-source-link { display: block; width: fit-content; max-width: 100%; margin-top: 24px; pointer-events: auto; color: var(--muted); font: 11px/1.6 Arial,"Microsoft YaHei",sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-source-link[hidden] { display: none; }
.view-source-link:hover { color: var(--ink); }
.navigation nav a[aria-current="page"] { color: var(--ink); }
@media (min-width: 1001px) {
  body[data-route] .transport { grid-template-columns: 52px minmax(130px,1fr) minmax(280px,1.5fr) minmax(184px,1fr); }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .transport-tools #volume { width: 55px; }
}
@media (min-width: 601px) and (max-width: 760px) {
  body[data-route] .transport { grid-template-columns: 40px minmax(70px,1fr) minmax(175px,1.4fr) auto; gap: 10px; }
  .transport .transport-cover { width: 40px; height: 40px; }
  .transport-tools #volume { width: 42px; }
}
@media (max-width: 600px) {
  .transport .transport-title { font-size: 11px; }
  .transport .transport-track small { font-size: 9px; }
  .transport .transport-cover { border-radius: 9px; }
  .transport-buttons .transport-play { width: 32px; height: 32px; }
  .transport-buttons .player-icon { width: 17px; height: 17px; }
  .transport .transport-progress .time { font-size: 9px; }
  .transport .transport-progress { padding-right: 70px; }
  .queue-source { max-width: 230px; }
  .view-source-link { margin-top: 15px; font-size: 10px; }
  .transport-queue { right: 16px; bottom: calc(100% + 12px); border-radius: 18px; }
  .transport-queue header { padding: 18px 19px 14px; }
  #queue-tracks { padding: 6px 8px 10px; max-height: min(410px,calc(100dvh - var(--player-height) - 160px)); }
  #queue-tracks .queue-track { grid-template-columns: 17px 38px minmax(0,1fr) 30px; gap: 10px; padding: 9px; min-height: 62px; border-radius: 11px; }
  .queue-art { width: 38px; height: 38px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-theme="dark"] { --player-glass-tint: color-mix(in srgb,var(--panel) 94%,transparent); --queue-glass-tint: color-mix(in srgb,var(--panel) 97%,transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .transport-play[data-icon="loading"] .player-icon, .transport-queue:not([hidden]), .playing .queue-equalizer i { animation: none; }
}