/* One scrolling interior keeps the close control anchored to the dialog frame. */
#player-dialog[open]{display:block;overflow:hidden;padding:0;max-height:92svh}
.player-scroll{display:grid;grid-template-columns:.9fr 1.1fr;max-height:min(90svh,840px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#player-dialog>.close{position:absolute;top:12px;right:14px;z-index:10;display:grid;place-items:center;width:40px;height:40px;background:#0b1722f5;backdrop-filter:blur(12px)}
.player-scroll .player-art{top:0}
#player-dialog .player-content{padding-top:60px}
#player-dialog .playing-bars{margin-right:30px}
#player-dialog .player-controls{justify-content:center;gap:clamp(12px,3vw,30px);margin:22px 0 16px}
#player-dialog .player-controls button,#full-mute{display:grid;place-items:center;position:relative;width:42px;height:42px;min-width:42px;padding:0;border-radius:50%;background:transparent;color:#a8becb;border:0}
#player-dialog .player-controls button:hover,#full-mute:hover{background:#bce6f410;color:#e1f4fc}
#player-dialog .player-controls button[aria-pressed=true]{color:#bce6f4;background:transparent}
#player-dialog .player-controls #play{width:58px;height:58px;min-width:58px;background:#d6e7ed;color:#0b1722;border-radius:50%}
#player-dialog .player-controls #play svg{width:24px;height:24px}
#player-dialog .repeat-one{position:absolute;right:6px;top:0;font-size:10px}
#player-dialog .volume{display:flex;justify-content:flex-end;gap:8px;margin:4px 0 26px}
#player-dialog #volume{width:96px;flex:none}
#player-dialog #full-mute{width:32px;height:32px;min-width:32px}
#player-dialog input[type=range]{appearance:none;-webkit-appearance:none;height:22px;background:transparent;cursor:pointer;--range-fill:0%;margin:0}
#player-dialog #seek{display:block;width:100%}
#player-dialog input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:5px;background:linear-gradient(to right,#bce6f4 var(--range-fill),#7891a43b var(--range-fill))}
#player-dialog input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#d9f4ff;margin-top:-3.5px}
#player-dialog input[type=range]::-moz-range-track{height:3px;border-radius:5px;background:#7891a43b}
#player-dialog input[type=range]::-moz-range-progress{height:3px;background:#bce6f4}
#player-dialog input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#d9f4ff}
#player-dialog input[type=range]:focus-visible{outline:1px solid #a4d4e8;outline-offset:3px}
#player-dialog .player-lyrics{display:grid;gap:10px;padding-top:20px;min-height:255px}
#player-dialog .player-lyrics[hidden]{display:none}
#player-dialog .player-lyrics button{margin:0;min-height:2.9em;line-height:1.45;display:flex;align-items:center;justify-content:center;white-space:pre-line;overflow-wrap:anywhere;word-break:normal}
#player-dialog .lyric-context{font-size:12px;color:#8295a3;font-weight:400}
#player-dialog .lyric-previous-far,#player-dialog .lyric-next-far{color:#586e7e}
#player-dialog .lyric-current{font-size:17px;color:#e9f5fa;font-weight:600;min-height:3em}
@media(max-width:700px){.player-scroll{display:block;max-height:92svh}.player-scroll .player-art{position:relative;padding:52px 26px 22px}.player-scroll .player-art>img{max-height:230px;width:100%;object-fit:cover}#player-dialog .player-content{padding:24px}#player-dialog .player-lyrics{gap:6px;min-height:220px}#player-dialog .lyric-current{font-size:16px}#player-dialog .lyric-context{font-size:12px}}

#player-dialog .player-controls{gap:clamp(4px,1.4vw,16px)}
#player-dialog .player-controls .volume{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:0 4px 0 0;width:30px;flex:0 0 30px}
#player-dialog #volume{writing-mode:vertical-lr;direction:rtl;width:24px;height:48px;flex:none}
#player-dialog #volume::-webkit-slider-runnable-track{width:3px;height:100%;background:linear-gradient(to top,#bce6f4 var(--range-fill),#7891a43b var(--range-fill))}
#player-dialog #volume::-webkit-slider-thumb{margin-top:0;margin-left:-3.5px}
#player-dialog #volume::-moz-range-track{width:3px;height:100%}
#player-dialog #volume::-moz-range-progress{width:3px}
#player-dialog #full-mute{width:26px;height:26px;min-width:26px;min-height:26px;order:1}
#player-dialog #full-mute svg{width:16px;height:16px}
#player-dialog #repeat .repeat-one,#dock-repeat .repeat-one{position:absolute;inset:0;display:grid;place-items:center;transform:none;margin:0;padding:0;background:transparent;font:600 10px/1 Arial,sans-serif;pointer-events:none}
#player-dialog .player-lyrics{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#player-dialog .player-lyrics button{width:100%;padding:3px 5px;border:0;border-radius:5px;background:transparent;font-family:inherit;text-align:center;-webkit-user-select:none;user-select:none;touch-action:pan-y}
#player-dialog .player-lyrics button:disabled{opacity:1;cursor:default}
#player-dialog .player-lyrics button:not(:disabled):hover{color:#e9f5fa;background:#bce6f408}
#player-dialog .player-lyrics button:focus-visible{outline:1px solid #a4d4e8;outline-offset:2px}
@media(max-width:360px){#player-dialog .player-content{padding-inline:16px}#player-dialog .player-controls{gap:3px}#player-dialog .player-controls button{width:36px;min-width:36px}}

/* Symmetrical slots keep play on the exact centerline; volume never shifts them. */
#player-dialog .player-controls{display:grid;grid-template-columns:32px 1fr 1fr 58px 1fr 1fr 32px;align-items:center;justify-items:center;gap:0;width:100%;max-width:440px;margin:26px auto}
#player-dialog .player-controls .volume{grid-column:1;grid-row:1;position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:42px;margin:0}
#player-dialog #shuffle{grid-column:2;grid-row:1}
#player-dialog #prev{grid-column:3;grid-row:1}
#player-dialog #play{grid-column:4;grid-row:1}
#player-dialog #next{grid-column:5;grid-row:1}
#player-dialog #repeat{grid-column:6;grid-row:1}
#player-dialog .player-controls button{width:32px;min-width:32px;height:42px;min-height:42px}
#player-dialog #full-mute{order:0;width:32px;height:42px;min-width:32px;min-height:42px}
#player-dialog #full-mute svg{width:20px;height:20px}
#player-dialog .volume-popover{position:absolute;bottom:calc(100% + 9px);left:0;width:142px;padding:12px 14px;border:1px solid #bdd3df30;border-radius:10px;background:#101e2bf5;box-shadow:0 10px 30px #0005;z-index:4;opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s}
#player-dialog .volume-popover:after{content:'';position:absolute;left:0;right:0;top:100%;height:12px}
#player-dialog .volume[data-open=true] .volume-popover{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
#player-dialog #volume{writing-mode:horizontal-tb;direction:ltr;width:112px;height:22px;display:block}
#player-dialog #volume::-webkit-slider-runnable-track{height:3px;width:100%;background:linear-gradient(to right,#bce6f4 var(--range-fill),#7891a43b var(--range-fill))}
#player-dialog #volume::-webkit-slider-thumb{margin-left:0;margin-top:-3.5px}
#player-dialog #volume::-moz-range-track{height:3px;width:100%}
#player-dialog #volume::-moz-range-progress{height:3px;width:auto}
@media(prefers-reduced-motion:reduce){#player-dialog .volume-popover{transition:none}}