/* HomeView reference: central art, overlaid metadata, slim seek bar and
   unfilled transport icons. All geometry is for the 640 × 480 display. */
.music-page {
  padding: 0;
  background: #385461;
  color: #f7fbfc;
}
.music-backdrop {
  background-color: #3b5865;
  background-position: center;
  background-size: cover;
  filter: blur(36px) saturate(.65) brightness(.8);
  transform: scale(1.35);
  opacity: 1;
}
.music-shade {
  background: linear-gradient(180deg, #23414e32, #334e5855 40%, #253039ed 100%);
}
.music-header { position: absolute; inset: 0; height: auto; padding: 0; display: block; }
.music-source-button {
  position: absolute;
  top: 3.125cqw;
  left: 3.75cqw;
  width: 6.875cqw;
  height: 6.875cqw;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid #e4f5ff28;
  border-radius: 50%;
  background: #e0f3fa16;
  display: grid;
  place-items: center;
  z-index: 3;
}
.music-source-button .spotify-logo { color: #ecf7fb; width: 3.6cqw; height: 3.6cqw; }
.music-preview-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3.125cqw;
  min-height: 6.875cqw;
  padding: 1cqw 1.7cqw;
  font-size: 1.875cqw;
  color: #e6f2f6;
  border: 0;
  border-radius: 20px;
  background: transparent;
  z-index: 3;
  white-space: nowrap;
}
.music-preview-button[aria-pressed='true'] { background: #ffffff13; }
.music-output {
  position: absolute;
  right: 3.75cqw;
  top: 3.125cqw;
  display: flex;
  align-items: center;
  height: 6.875cqw;
  min-height: 36px;
  padding: 0 .5cqw;
  border: 1px solid #edf7ff28;
  border-radius: 24px;
  background: #dceefa16;
  backdrop-filter: blur(12px);
  z-index: 5;
}
.music-output .device-button,
.music-volume-button {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #e6f1f5;
  padding: 0;
  margin: 0;
  width: 6.875cqw;
  height: 6.875cqw;
  min-width: 36px;
  min-height: 36px;
}
.music-output svg { width: 2.8cqw; height: 2.8cqw; }
.music-volume-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(210px, 48cqw);
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #e7f5ff24;
  background: #344853f5;
  box-shadow: 0 8px 24px #07151c40;
  font-size: 14px;
}
.music-volume-panel label { display: flex; justify-content: space-between; margin-bottom: 8px; }
.music-volume-panel output{font-variant-numeric:tabular-nums;color:#e1ebf2b3}
.music-volume-panel input { --volume-level:50%;width:100%;height:32px;appearance:none;background:transparent;margin:0;touch-action:none; }
.music-volume-panel input::-webkit-slider-runnable-track{height:6px;border-radius:8px;background:linear-gradient(90deg,#fff var(--volume-level),#e6f0ff45 var(--volume-level))}
.music-volume-panel input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;margin-top:-6px;background:white;border:0;border-radius:50%;box-shadow:0 1px 5px #0004;transition:scale .12s}
.music-volume-panel input:active::-webkit-slider-thumb{scale:1.15}
.music-volume-panel input::-moz-range-track{height:6px;border-radius:8px;background:#e6f0ff45}
.music-volume-panel input::-moz-range-progress{height:6px;background:#fff;border-radius:8px}
.music-volume-panel input::-moz-range-thumb{width:18px;height:18px;background:#fff;border:0;border-radius:50%}
.music-main { position: static; display: block; padding: 0; margin: 0; }
.music-page .album-art {
  position: absolute;
  left: 50%;
  top: 12.5cqw;
  transform: translateX(-50%);
  width: 48cqw;
  height: 48cqw;
  border-radius: 2.5cqw;
  background: #c6dce326;
  box-shadow: 0 5px 18px #172b3736;
}
.music-page .album-art::after {
  content: '';
  position: absolute;
  inset: 52% 0 0;
  background: linear-gradient(180deg, #9eb5bd00, #263f5366);
  backdrop-filter: blur(5px);
  mask-image: linear-gradient(180deg, transparent, #000 80%);
  pointer-events: none;
}
.album-empty { background: #dceef414; }
.music-page .track-panel {
  position: absolute;
  top: 46.25cqw;
  left: 15cqw;
  right: 18.75cqw;
  z-index: 2;
}
.music-page .track-label { margin: 0; }
.music-page .track-panel h2 {
  display: block;
  font-size: 4.375cqw;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-shadow: 0 1px 10px #152d3c3d;
}
.music-page .track-artist {
  display: block;
  font-size: 2.8125cqw;
  line-height: 1.4;
  font-weight: 400;
  color: #e5f0f5bd;
  margin-top: .5cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px #152d3c30;
}
.music-more-button {
  position: absolute;
  right: 12.5cqw;
  top: 46.5cqw;
  border: 0;
  padding: 1.2cqw;
  width: 6.875cqw;
  height: 6.875cqw;
  border-radius: 50%;
  background: transparent;
  z-index: 3;
}
.music-more-button svg { width: 3.4cqw; height: 3.4cqw; }
.music-bottom { position: absolute; left: 15cqw; right: 15cqw; top: 58cqw; margin: 0; }
.music-page .seek-row { display: block; position: relative; height: 6cqw; font-size: 1.95cqw; color: #dbe8efc9; }
.seek-row input {
  --music-progress: 0%;
  position: absolute;
  inset: 0 0 auto;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  border: 0;
}
.seek-row input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #f5fbff var(--music-progress), #e6f5ff55 var(--music-progress));
}
.seek-row input::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #f5fbff;
  opacity: 0;
}
.seek-row input:hover::-webkit-slider-thumb,
.seek-row input:focus-visible::-webkit-slider-thumb { opacity: 1; }
.seek-row input::-moz-range-track { height: 3px; border-radius: 3px; background: #e6f5ff55; }
.seek-row input::-moz-range-progress { height: 3px; background: #f5fbff; }
.seek-row input::-moz-range-thumb { height: 8px; width: 8px; border: 0; background: #f5fbff; }
.music-page .seek-row > span { position: absolute; top: 3.125cqw; }
.music-page #elapsed { left: 0; }
.music-page #duration { right: 0; }
.music-actions {
  position: absolute;
  left: 15cqw;
  right: 15cqw;
  top: 64cqw;
  display: grid;
  grid-template-columns: 6.875cqw 1fr 6.875cqw;
  align-items: center;
}
.music-page .playback-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4.375cqw;
  margin: 0;
  max-width: none;
}
.music-page .playback-controls .icon-button { width: 8.75cqw; height: 8.75cqw; aspect-ratio:1; flex:none; border-radius:50%; padding: 1.5cqw; }
.music-page .playback-controls .icon-button svg { width: 4.375cqw; height: 4.375cqw; }
.music-page .play-button {
  width: 8.75cqw;
  height: 8.75cqw;
  padding: 1.5cqw;
  border-radius: 50%;
  background: transparent;
  color: #fff;
}
.music-page .play-button svg { width: 5cqw; height: 5cqw; }
.music-page .play-button:hover:not(:disabled) { background: #ffffff14; }
.music-page .music-side-action { width: 6.875cqw; height: 6.875cqw; aspect-ratio:1; flex:none; border-radius:50%; padding: 1.2cqw; color: #d2e3edb0; }
.music-side-action svg { width: 3.125cqw; height: 3.125cqw; }
.music-status { position: absolute; bottom: .8cqw; left: 12cqw; right: 12cqw; text-align: center; font-size: 1.8cqw; line-height: 1.4; color: #eef6fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-status[data-kind='info'] { width: 1px; height: 1px; clip-path: inset(50%); }
.display[data-page='music'] .utility-bar { right: auto; left: 11.875cqw; top: 3.125cqw; background: transparent; }
.music-source-button:hover, .music-preview-button:hover { background: #ffffff16; }
.music-volume-button:hover,.music-volume-button:active,.music-more-button:hover,.music-more-button:active{background:transparent}
.music-queue-row { padding: 12px 0; border-bottom: 1px solid #ffffff14; }
.music-queue-row strong { display: block; font-weight: 500; font-size: 15px; }
.music-queue-row span { display: block; color: #b9c6cd; font-size: 13px; margin-top: 5px; }
.lyrics-view{position:absolute;inset:0;z-index:8;background:#25313f73;backdrop-filter:blur(30px);padding:0 6.25cqw}
.music-page[data-lyrics=true]>.music-header,.music-page[data-lyrics=true]>.music-main,.music-page[data-lyrics=true]>.music-bottom,.music-page[data-lyrics=true]>.music-actions{visibility:hidden;pointer-events:none}
.lyrics-header{height:14cqw;display:flex;align-items:center;justify-content:space-between;gap:3cqw}
.lyrics-header>div{min-width:0}.lyrics-header h2{font-size:2.8cqw;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.lyrics-header p{font-size:2.1cqw;color:#ffffff90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyrics-header .icon-button{flex:none;background:#ffffff12;width:6.875cqw;height:6.875cqw}
.lyrics-scroll{position:absolute;top:14cqw;bottom:6.25cqw;left:6.25cqw;right:8.75cqw;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;mask-image:linear-gradient(transparent,#000 8%,#000 88%,transparent);padding:2.5cqw 0;outline-offset:-3px}
.lyrics-scroll::-webkit-scrollbar{display:none}#lyrics-lines{position:relative;padding-bottom:24cqw}
.lyric-line{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;font-size:4.7cqw;font-weight:650;line-height:1.42;letter-spacing:-.025em;padding:1.35cqw 0;opacity:.28;filter:blur(.35px);transition:opacity .25s,filter .25s}
.lyric-line.is-current{opacity:1;filter:none}.lyric-line.is-past{opacity:.4}.lyric-line.plain{opacity:.9;filter:none}.lyric-line:hover{opacity:1;filter:none}
.lyrics-message{font-size:3cqw;line-height:1.6;color:#e8edf4bc;padding-top:10cqw;max-width:75cqw}
.lyrics-credit{position:absolute;bottom:2.2cqw;left:6.25cqw;right:8.75cqw;display:flex;justify-content:space-between;font-size:1.65cqw;color:#e3ebf5a8}.lyrics-credit a{color:inherit;text-decoration:none}
.music-side-action[aria-pressed=true]{background:#ffffff22;color:#fff}