.pl-app { --pl-green:#16b84e; --pl-muted:#65676d; color:#101412; font-family:var(--font-ui,Arial,sans-serif); font-size:14px; line-height:1.45; text-align:left; }
.pl-app *, .pl-app *::before, .pl-app *::after { box-sizing:border-box; }
.pl-app button,.pl-app input,.pl-app textarea,.pl-app select { font:inherit; }
.pl-app button { cursor:pointer; color:inherit; }
.pl-app button:disabled { opacity:.45; cursor:default; }
.pl-app button:focus-visible,.pl-app input:focus-visible,.pl-app textarea:focus-visible,.pl-app select:focus-visible,.pl-app a:focus-visible { outline:3px solid #75d99a; outline-offset:3px; }
.pl-app svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.pl-app h1,.pl-app h2,.pl-app p { margin:0; letter-spacing:normal; font-family:inherit; }
.pl-app h1 { font-size:26px; font-weight:750; line-height:1.22; }
.pl-app h2 { font-size:22px; font-weight:750; line-height:1.3; }
.pl-app p { color:var(--pl-muted); }
.pl-app .pl-main { max-width:700px; margin:auto; padding:24px 22px 130px; min-height:70dvh; }
.pl-heading { margin-bottom:15px; }
.pl-heading p { margin:8px 0 19px; font-size:15px; }
.pl-app .pl-primary { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:48px; padding:12px 16px; border:1px solid #09a942; border-radius:16px; background:linear-gradient(110deg,#15b84d,#1fb957); color:white; font-size:15px; font-weight:650; text-decoration:none; box-shadow:none; }
.pl-primary svg { width:20px; height:20px; }
.pl-tabs { display:flex; border-bottom:1px solid #edf0ee; gap:16px; margin-bottom:8px; }
.pl-tabs button { background:none; border:0; border-bottom:2px solid transparent; padding:13px 8px; font-size:13px; white-space:nowrap; }
.pl-tabs button[aria-selected=true] { color:#06a842; border-color:#16b84e; }
.pl-list-row { display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid #f4f6f5; }
.pl-row-main { display:flex; flex:1; gap:14px; align-items:center; text-align:left; min-width:0; padding:0; border:0; background:none; }
.pl-cover { display:flex; flex-shrink:0; width:76px; height:76px; align-items:center; justify-content:center; overflow:hidden; border-radius:9px; background:linear-gradient(135deg,#e2f8eb,#b7e8cc); color:#18ac51; }
.pl-cover>img { width:100%; height:100%; object-fit:cover; }
.pl-cover>svg { width:45%; height:45%; }
.pl-copy { min-width:0; display:grid; gap:5px; flex:1; }
.pl-copy strong { font-size:14px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-copy small { color:var(--pl-muted); font-size:12px; }
.pl-copy .pl-track-meta { display:flex; align-items:center; min-width:0; }
.pl-track-meta .mobile-playlist-meta-item svg { width:10px; height:10px; color:#12985a; stroke-width:2.25; }
.pl-track-meta .pl-style-item { min-width:0; }
.pl-track-meta .pl-duration-item { flex-shrink:0; }
.pl-track-style { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-track-duration { flex-shrink:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pl-app .pl-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 36px; padding:7px; background:#f3f4f4; border:0; border-radius:12px; }
.pl-icon>span { display:none; }
.pl-app .pl-row-menu { width:32px; height:32px; flex-basis:32px; }
.pl-top,.pl-detail-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pl-top { justify-content:flex-start; gap:12px; }
.pl-top h1 { font-size:22px; }
.pl-detail-top { position:relative; z-index:1; }
.pl-detail { text-align:center; margin-top:-36px; margin-bottom:20px; }
.pl-hero-cover { position:relative; width:190px; margin:0 auto 14px; }
.pl-hero-cover>.pl-cover { width:190px; height:190px; border-radius:12px; }
.pl-detail h1 { font-size:23px; overflow-wrap:anywhere; margin-bottom:5px; }
.pl-detail p { font-size:13px; }
.pl-detail .pl-description { margin:9px auto 0; max-width:420px; white-space:pre-wrap; overflow-wrap:anywhere; }
.pl-mobile-hero { display:flow-root; margin-bottom:20px; }
.pl-mobile-hero .pl-detail { margin-bottom:0; }
.pl-hero-title,.pl-hero-meta { display:inline-block; max-width:100%; vertical-align:top; }
.pl-visibility { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:9px!important; }
.pl-visibility svg { width:16px; height:16px; }
.pl-hero-meta>span[aria-hidden] { margin:0 5px; }
.pl-add-tracks { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:48px; margin:20px 0 14px; padding:10px 15px; border:0; border-radius:28px; background:#eaf8f2; font-weight:650!important; }
.pl-add-tracks svg { color:#06b353; }
.pl-detail-toolbar + .pl-tracks { margin-top:22px; }
.pl-playback-controls { display:flex; justify-content:space-around; gap:12px; padding:16px 0; }
.pl-playback-controls button[aria-pressed=true] { color:#08a74e; background:#e8f8ef; }
.pl-actions { display:flex; justify-content:space-around; margin:16px 0 20px; }
.pl-actions button { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; border:0; background:none; padding:0 4px; }
.pl-actions svg { width:42px; height:42px; background:#f3f4f4; border-radius:50%; padding:10px; }
.pl-track { display:flex; align-items:center; gap:10px; padding:8px 0; }
.pl-track.is-playing { background:#e3f7ed; border-radius:9px; }
.pl-track.is-playing .pl-copy strong { color:#009c49; }
.pl-track .pl-cover,.pl-pick .pl-cover { width:54px; height:54px; border-radius:7px; }
.pl-track .pl-row-main { gap:12px; }
.pl-track .pl-icon { background:none; width:30px; flex-basis:30px; padding:6px; }
.pl-app .pl-heart { background:none; }
.pl-heart.is-favorite { color:#ff162b; }
.pl-heart.is-favorite svg { fill:currentColor; }
.pl-empty { min-height:440px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:45px 8px; }
.pl-empty h2 { font-size:20px; margin:20px 0 8px; }
.pl-empty p { max-width:330px; margin-bottom:27px; font-size:14px; }
.pl-empty .pl-primary { width:auto; padding-inline:24px; }
.pl-empty-art { position:relative; display:grid; place-items:center; width:160px; height:140px; border-radius:55% 45% 35% 60%; background:#e9f8f0; transform:rotate(-8deg); }
.pl-empty-art>svg { width:77px; height:77px; color:#15b54f; stroke-width:1.2; fill:#27c362; filter:drop-shadow(0 4px 1px #fff); }
.pl-empty-art span { position:absolute; left:0; top:-10px; font-size:25px; color:#b6e9d0; }
.pl-empty-art span:last-child { left:auto; right:-5px; top:100px; }
.pl-notice { background:#eaf8ef; padding:12px; border-radius:12px; margin-bottom:14px!important; font-size:13px; overflow-wrap:anywhere; }
.pl-notice[hidden] { display:none; }
.pl-loading { padding:70px 24px; text-align:center; }
.pl-library-loading { display:grid; place-items:center; width:100%; min-height:65dvh; padding:36px 16px 90px; font-family:var(--font-ui,Arial,sans-serif); }
.pl-library-loading .account-auth-loading { display:grid; }
.pl-overlay>.pl-library-loading { width:min(600px,100%); align-self:center; }
.pl-dismiss { margin:0 0 15px auto; }
.pl-first-playlist { min-height:65dvh; }
.pl-overlay { position:fixed; z-index:12000; inset:0; background:#0008; overflow:auto; display:grid; place-items:start center; padding:24px; }
.pl-overlay>.pl-main { width:100%; max-width:600px; background:#fff; border-radius:22px; margin:0 auto; }
.pl-overlay.hidden { display:none; }
.pl-sheet-layer { position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; z-index:13000; }
.pl-backdrop { position:absolute; inset:0; background:#0009; border:0; backdrop-filter:blur(2px); }
.pl-sheet { position:relative; width:min(100%,500px); max-height:92dvh; overflow:auto; overscroll-behavior:contain; padding:28px 22px max(26px,env(safe-area-inset-bottom)); background:linear-gradient(135deg,#fff,#fcfffd); border-radius:26px 26px 0 0; box-shadow:0 -5px 40px #1232; }
.pl-sheet h2 { margin:6px 0 8px; }
.pl-sheet>p { margin-bottom:23px; font-size:14px; }
.pl-sheet-close { margin:0 0 24px auto; background:none!important; }
.pl-sheet form { display:grid; gap:17px; }
.pl-sheet form>label:not(.pl-upload) { display:grid; gap:7px; font-size:14px; font-weight:550; }
.pl-sheet input:not([type=file]),.pl-sheet textarea,.pl-sheet select { width:100%; min-width:0; border:1px solid #e4e7e5; border-radius:10px; background:#fafbfb; color:#24292c; padding:13px; min-height:46px; outline-offset:2px; }
.pl-sheet textarea { height:100px; resize:vertical; }
.pl-sheet label small { text-align:right; font-size:12px; font-weight:400; color:var(--pl-muted); }
.pl-upload { position:relative; min-height:185px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; border:1.5px dashed #b8e9ca; border-radius:13px; background:#f6fcf9; text-align:center; color:var(--pl-muted); overflow:hidden; cursor:pointer; }
.pl-upload input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.pl-upload:focus-within { outline:3px solid #75d99a; }
.pl-upload .pl-cover { width:100%; height:185px; border-radius:0; }
.pl-camera { width:70px; height:70px; display:grid; place-items:center; background:#e2f6eb; color:#09ad45; border-radius:50%; }
.pl-camera svg { width:30px; height:30px; }
.pl-submit { margin-top:18px; }
.pl-handle { height:4px; width:35px; border-radius:5px; background:#dedfe0; margin:-18px auto 22px; }
.pl-sheet:has(.pl-handle) .pl-sheet-close { position:absolute; right:16px; top:18px; }
.pl-options { display:grid; margin-top:10px; }
.pl-options button { display:flex; align-items:center; gap:17px; border:0; border-bottom:1px solid #f3f4f3; min-height:53px; padding:12px 8px; background:none; text-align:left; }
.pl-options button>span { flex:1; }
.pl-options .pl-danger { color:#ed272c; margin-top:18px; border:0; }
.pl-switch { width:45px; height:28px; background:#dedfe0; border-radius:20px; padding:3px; }
.pl-switch::after { content:""; display:block; width:22px; height:22px; background:white; border-radius:50%; box-shadow:0 1px 2px #0002; }
.pl-switch.on { background:#16b84e; }
.pl-switch.on::after { transform:translateX(17px); }
.pl-cancel { display:block; margin:15px auto 0; padding:10px 25px; background:none; border:0; }
.pl-app .pl-delete { background:#e83238; border-color:#e83238; }
.pl-search { display:flex; align-items:center; padding-left:12px; background:#f3f4f4; border-radius:13px; margin:20px 0 12px; color:#85898e; }
.pl-sheet .pl-search input { border:0; background:none; padding:11px; font-size:13px; }
.pl-filters { display:flex; gap:7px; margin:0 0 10px; overflow:auto; }
.pl-filters button { padding:6px 12px; border:0; border-radius:25px; background:#f4f5f4; font-size:12px; }
.pl-filters button[aria-pressed=true] { background:#18b953; color:white; }
.pl-pick { display:flex; align-items:center; gap:12px; position:relative; padding:7px 0; cursor:pointer; }
.pl-pick input { position:absolute; opacity:0; width:22px!important; }
.pl-check { flex:0 0 21px; height:21px; border:1.5px solid #c4c8c6; border-radius:50%; }
.pl-check svg { width:18px; height:18px; color:transparent; }
.pl-pick input:checked+.pl-check { background:#088b34; border-color:#088b34; }
.pl-pick input:checked+.pl-check svg { color:white; }
.pl-pick input:focus-visible+.pl-check { outline:3px solid #75d99a; outline-offset:3px; }
.pl-sticky { position:sticky; bottom:0; margin-top:20px; box-shadow:0 -10px 20px #fff!important; }
.pl-empty-tracks { text-align:center; padding:30px 10px; }
.pl-player { position:fixed; z-index:100; bottom:16px; left:50%; transform:translateX(-50%); width:min(660px,calc(100% - 32px)); display:flex; gap:12px; align-items:center; padding:12px 16px 15px; border:1px solid #e3eee7; border-radius:16px; background:#ffffffef; backdrop-filter:blur(14px); box-shadow:0 -3px 16px #1231; }
.pl-player .pl-cover { width:40px; height:40px; border-radius:6px; }
.pl-player .pl-copy strong { font-size:12px; }
.pl-player .pl-copy small { font-size:10px; }
.pl-player .pl-player-play { background:#17b953; border-radius:50%; color:white; }
.pl-player .pl-player-play svg { fill:currentColor; width:18px; }
.pl-app .pl-player { display:grid; grid-template-columns:40px minmax(0,1fr) 44px; padding-bottom:18px; }
.pl-player .pl-mobile-controls { grid-column:1 / -1; display:flex; justify-content:center; gap:24px; }
.pl-app .pl-player .pl-mobile-controls .pl-icon,.pl-app .pl-player .pl-player-play { width:44px; height:44px; }
.pl-player .pl-mobile-controls .pl-icon { background:transparent; }
.pl-player .pl-mobile-controls .pl-icon[aria-pressed=true] { color:#099743; background:#e4f8eb; }
.pl-player .pl-mobile-controls svg { width:21px; height:21px; }
.pl-app .pl-player input.pl-progress { --pl-progress:0%; position:absolute; left:16px; bottom:0; width:calc(100% - 32px); height:24px; min-height:0; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.pl-app .pl-progress::-webkit-slider-runnable-track { height:3px; border:0; border-radius:3px; background:linear-gradient(to right,#16b84e 0 var(--pl-progress),#e0ebe4 var(--pl-progress) 100%); }
.pl-app .pl-progress::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:10px; margin-top:-3.5px; border:0; border-radius:50%; background:#16b84e; box-shadow:none; }
.pl-app .pl-progress::-moz-range-track { height:3px; border:0; border-radius:3px; background:#e0ebe4; }
.pl-app .pl-progress::-moz-range-progress { height:3px; border-radius:3px; background:#16b84e; }
.pl-app .pl-progress::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:#16b84e; box-shadow:none; }
.pl-app .pl-player input.pl-progress:focus-visible { outline:2px solid #75d99a; outline-offset:0; border-radius:6px; }
.pl-app .pl-player input.pl-progress:disabled { cursor:default; }
.pl-sheet-status:not(:empty) { position:sticky; bottom:0; padding:10px; background:#fff2ec; color:#a62e21; border-radius:10px; }
.library-page { background:#fff; }
body:has(.pl-sheet-layer) { overflow:hidden; }
.library-page .page-shell { min-height:100dvh; }
.library-page .site-footer { margin-top:0; }
.library-nav-link.hidden { display:none!important; }
.pl-persistent-player.hidden { display:none!important; }
@media(min-width:861px) {
  .pl-persistent-player { display:none; }
  .library-page .pl-main { margin-top:25px; padding:34px 38px 120px; border:1px solid #edf1ed; border-radius:24px; background:#fff; }
  .pl-sheet-layer { align-items:center; }
  .pl-sheet { border-radius:24px; }
  .pl-full-sheet { max-height:94dvh; }
}
@media(max-width:860px) {
  body.mobile-account-dashboard-active.mobile-playlist-player-visible:not(.library-page) #mobile-account-dashboard { padding-bottom:calc(160px + env(safe-area-inset-bottom)); }
  .library-page:has(.pl-mobile-hero) { background:radial-gradient(ellipse at 100% 0,#e4f7ed 0,transparent 30%),radial-gradient(ellipse at 0 20%,#e5f7ec 0,transparent 23%),#fff; }
  .pl-app .pl-mobile-hero { margin-bottom:14px; }
  .pl-app .pl-detail-top { margin-bottom:12px; }
  .pl-app .pl-detail-top .pl-icon { background:transparent; padding:4px; }
  .pl-app .pl-detail { display:grid; grid-template-columns:34% minmax(0,1fr); align-items:center; gap:20px; margin:0; text-align:left; }
  .pl-app .pl-hero-cover { width:100%; margin:0; }
  .pl-app .pl-hero-cover>.pl-cover { width:100%; height:auto; aspect-ratio:1; border-radius:12px; box-shadow:0 6px 12px #17302110; }
  .pl-app .pl-hero-info { min-width:0; }
  .pl-app .pl-detail h1 { font-size:clamp(19px,5.5vw,27px); line-height:1.2; margin-bottom:10px; font-weight:750; }
  .pl-app .pl-detail p { font-size:clamp(11px,3.15vw,15px); line-height:1.45; }
  .pl-app .pl-hero-meta { display:block; }
  .pl-app .pl-visibility { justify-content:flex-start; }
  .pl-app .pl-detail .pl-description { margin-top:8px; font-size:12px; }
  .pl-detail-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 37%; gap:14px; align-items:start; }
  .pl-detail-toolbar .pl-actions { gap:8px; justify-content:space-between; margin:0; }
  .pl-detail-toolbar .pl-actions button { gap:4px; padding:0; min-width:0; font-size:9px; }
  .pl-detail-toolbar .pl-actions svg { width:clamp(34px,9.7vw,42px); height:clamp(34px,9.7vw,42px); padding:10px; background:#ffffffda; box-shadow:0 2px 9px #18302310; color:#08734c; }
  .pl-detail-toolbar .pl-actions button:first-child svg { color:#00b955; }
  .pl-detail-toolbar .pl-actions button[data-pl-action=shuffle] svg { color:#111; }
  .pl-detail-toolbar .pl-actions button[data-pl-action=shuffle][aria-pressed=true] svg { color:#00b955; }
  .pl-detail-toolbar .pl-actions button[aria-pressed=true] svg { background:#d4f5e3; }
  .pl-detail-toolbar .pl-primary { min-height:52px; padding:12px 10px; border-radius:32px; font-size:15px; gap:9px; background:linear-gradient(110deg,#07b654,#00bc48); border:0; }
  .pl-detail-toolbar .pl-primary svg { fill:currentColor; width:23px; height:23px; }
  .pl-app .pl-add-tracks { margin:22px 0 14px; font-size:15px; }
  .pl-app .pl-add-tracks svg { width:26px; height:26px; }
  .pl-app .pl-track { padding:5px 0; gap:10px; min-height:70px; }
  .pl-app .pl-track .pl-cover { width:60px; height:60px; border-radius:8px; }
  .pl-app .pl-track .pl-row-main { gap:16px; }
  .pl-app .pl-track .pl-copy strong { font-size:15px; line-height:1.35; font-weight:650; }
  .pl-app .pl-track .pl-track-meta { font-size:12px; gap:8px; color:#65706d; }
  .pl-track-meta .mobile-playlist-meta-item svg { width:13px; height:13px; }
  .pl-track-meta .pl-duration-item svg { display:none; }
  .pl-track-meta .pl-duration-item::before { content:"•"; margin-right:4px; color:#7e8582; }
  :is(.library-page .pl-app, .pl-persistent-player) .pl-player { bottom:calc(max(52px, calc(42px + env(safe-area-inset-bottom))) + 4px); width:calc(100% - 16px); max-width:504px; border-radius:15px; background:#effaf5f5; border:1px solid #dfeee6; box-shadow:0 0 12px #193f2414; padding:8px 12px 12px; gap:10px; grid-template-columns:48px minmax(0,1fr) 36px; }
  :is(.library-page, .pl-persistent-player) .pl-player .pl-cover { width:48px; height:48px; border-radius:5px; }
  :is(.library-page, .pl-persistent-player) .pl-player .pl-copy strong { font-size:12px; }
  :is(.library-page, .pl-persistent-player) .pl-player .pl-copy small { font-size:11px; }
  :is(.library-page .pl-app, .pl-persistent-player) .pl-player .pl-icon { padding:4px; width:32px; height:40px; background:none; border-radius:0; color:#101e23; }
  :is(.library-page, .pl-persistent-player) .pl-player .pl-player-play svg { width:24px; height:24px; stroke-width:3.5; }
  :is(.library-page .pl-app, .pl-persistent-player) .pl-player input.pl-progress { left:5px; width:calc(100% - 10px); height:12px; bottom:-4px; }
  :is(.library-page, .pl-persistent-player) .pl-player input.pl-progress::-webkit-slider-thumb { background:transparent; }
  :is(.library-page, .pl-persistent-player) .pl-player input.pl-progress::-moz-range-thumb { background:transparent; }
  .library-page .page-shell { padding:0; width:100%; max-width:none; }
  .library-page .pl-main { padding:12px 20px 170px; max-width:520px; }
  .library-page .mobile-brand-header { margin-bottom:0; }
  .library-page:has(#playlist-page .pl-mobile-hero) .mobile-brand-header { display:none; }
  .library-page .site-footer { display:none; }
  .library-page #mobile-dashboard-tabbar { --mobile-dashboard-scale:1; z-index:110; }
  .mobile-dashboard-tabbar:has(.library-nav-link:not(.hidden)) { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mobile-dashboard-tabbar .library-nav-link { flex:1; }
  .pl-player { bottom:calc(66px + env(safe-area-inset-bottom)); width:100%; max-width:520px; border-radius:14px 14px 0 0; padding:10px 16px 13px; }
  .pl-overlay { padding:0; background:white; display:block; }
  .pl-overlay>.pl-main { min-height:100dvh; border-radius:0; }
  .pl-overlay .pl-player { bottom:0; }
  .pl-full-sheet { min-height:94dvh; max-height:100dvh; padding-top:16px; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  .pl-app:has(.pl-sheet-layer) .pl-main { pointer-events:none; }
}
@media(prefers-reduced-motion:no-preference) { .pl-sheet { animation:pl-slide .2s ease-out; } @keyframes pl-slide { from { transform:translateY(30px); opacity:.4; } to { transform:none; opacity:1; } } }

/* Expanded mobile view of the existing playlist audio. */
.pl-app .pl-player-open { position:absolute; inset:0 0 12px; z-index:1; border:0; border-radius:inherit; background:transparent; }
.pl-player-open span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.pl-player-open { touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.pl-player-carousel { position:relative; grid-column:1 / 3; min-width:0; overflow:hidden; border-radius:7px; }
.pl-player-slide { display:flex; align-items:center; gap:12px; width:100%; min-width:0; }
.pl-player-preview { position:absolute; inset:0; }
.pl-player-carousel::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; background:linear-gradient(105deg,#11d67238,transparent 35%,transparent 65%,#36c9d538); }
.pl-swipe-dragging::after { opacity:var(--swipe-strength,0); }
.pl-swipe-hint::after { animation:pl-swipe-hint 1.6s ease-in-out 2; }
.pl-swipe-arriving::after { animation:pl-swipe-hint .35s ease-out; }
@keyframes pl-swipe-hint { 0%,100% { opacity:0; } 45% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .pl-swipe-hint::after,.pl-swipe-arriving::after { animation:none; } }
.pl-player .pl-player-play,.pl-player .pl-progress { position:relative; z-index:2; }
html.pl-expanded-open,body.pl-expanded-open { overflow:hidden; overscroll-behavior:none; }
/* Landscape phones may cross the site's desktop breakpoint while this is open. */
body.pl-expanded-open { zoom:1; }
.pl-app .pl-expanded-player { position:fixed; inset:0; width:100%; max-width:none; height:var(--pl-expanded-height,100dvh); max-height:none; margin:0; padding:0; border:0; color:#f7faf7; background:radial-gradient(circle at 19% 20%,#6de89252 0 1px,transparent 2px),radial-gradient(circle at 78% 13%,#68ec9638 0 1px,transparent 2px),radial-gradient(circle at 88% 38%,#70e79a42 0 1px,transparent 2px),radial-gradient(circle at 22% 61%,#68ec9638 0 1px,transparent 2px),radial-gradient(ellipse at 50% 100%,#59e0943d,transparent 16%),linear-gradient(160deg,#071414 0%,#020708 58%,#000203 100%); overflow:hidden; overscroll-behavior:none; color-scheme:dark; }
.pl-expanded-player::backdrop { background:#06100e; }
/* One fixed composition, uniformly fitted inside the phone's safe area. */
.pl-expanded-viewport { position:absolute; inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); overflow:hidden; contain:strict; }
.pl-expanded-stage { position:absolute; left:50%; top:50%; width:393px; height:800px; transform:translate(-50%,-50%) scale(var(--pl-expanded-scale,1)); transform-origin:center; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.pl-expanded-header { position:absolute; inset:18px 24px auto; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:16px; height:44px; padding:0; }
.pl-expanded-header>span { text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#c6d6ce; }
.pl-app .pl-expanded-control { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; padding:8px; border:0; border-radius:50%; color:#fff; background:transparent; }
.pl-expanded-header .pl-expanded-control { background:#04171057; box-shadow:0 0 0 1px #79ffa929,0 12px 28px #0004; }
.pl-expanded-header [data-expanded-action="close"] svg { transform:rotate(-90deg); }
.pl-expanded-content { position:absolute; inset:0 26px; margin:0; padding:0; pointer-events:none; }
.pl-expanded-content> * { position:absolute; left:50%; transform:translateX(-50%); margin:0; pointer-events:auto; }
.pl-expanded-content .pl-expanded-cover { top:104px; width:230px; height:250px; border:1px solid #5cff97b8; border-radius:21px; box-shadow:0 0 35px #00ff7061,0 15px 40px #0009; background:#0a2b20; }
.pl-app .pl-expanded-content h2 { top:378px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0; width:100%; max-height:56px; color:#f7faf7; font-size:24px; font-weight:400; line-height:28px; text-align:center; overflow-wrap:anywhere; text-shadow:0 8px 17px #0009; }
.pl-expanded-content [data-expanded-style] { top:442px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; width:100%; max-height:38px; margin:0; color:#f5f8f6b8; font-size:15px; line-height:19px; text-align:center; }
.pl-expanded-wave { top:496px; display:flex; justify-content:space-between; align-items:center; width:100%; height:58px; margin:0; color:#00f078; filter:drop-shadow(0 0 4px #00ff70b8); }
.pl-expanded-wave i { width:2px; height:var(--bar-height,50%); border-radius:9px; background:linear-gradient(transparent,currentColor 36%,currentColor 64%,transparent); transform-origin:center; animation:pl-equalizer-bounce var(--bar-speed,900ms) ease-in-out var(--bar-delay,0ms) infinite alternate; animation-play-state:paused; }
.pl-expanded-player[open].is-playing .pl-expanded-wave i { animation-play-state:running; }
@keyframes pl-equalizer-bounce { 0% { transform:scaleY(.2); } 30% { transform:scaleY(.9); } 55% { transform:scaleY(.35); } 80% { transform:scaleY(1); } 100% { transform:scaleY(.45); } }
@media (prefers-reduced-motion:reduce) { .pl-expanded-wave i { animation:none; transform:scaleY(.5); } }
.pl-expanded-timeline { top:568px; width:86%; }
.pl-app .pl-expanded-progress { display:block; width:100%; height:26px; margin:0; padding:0; border:0; box-shadow:none; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.pl-expanded-timeline>div { display:flex; justify-content:space-between; color:#fffffff2; font-size:12px; font-variant-numeric:tabular-nums; }
.pl-app .pl-expanded-progress::-webkit-slider-runnable-track { height:4px; background:linear-gradient(to right,#00f078 0 var(--pl-progress),#7e959552 var(--pl-progress) 100%); }
.pl-app .pl-expanded-progress::-webkit-slider-thumb { width:12px; height:12px; margin-top:-4px; background:#00f078; box-shadow:0 0 11px #00ff70b3; }
.pl-app .pl-expanded-progress::-moz-range-track { height:4px; background:#7e959552; }
.pl-app .pl-expanded-progress::-moz-range-progress { height:4px; background:#00f078; }
.pl-app .pl-expanded-progress::-moz-range-thumb { width:12px; height:12px; background:#00f078; box-shadow:0 0 11px #00ff70b3; }
.pl-expanded-transport { top:626px; display:flex; justify-content:center; align-items:center; gap:32px; margin:0; }
.pl-expanded-transport .pl-expanded-control { width:50px; height:60px; }
.pl-expanded-transport svg { width:30px; height:30px; }
.pl-expanded-transport .pl-expanded-play { width:78px; height:78px; border:1px solid #00ff70d6; background:radial-gradient(circle at 50% 38%,#ffffff2e,transparent 44%),radial-gradient(circle at 50% 68%,#00ff703d,transparent 54%),#00381c6b; box-shadow:0 0 22px #00ff7057,inset 0 0 14px #00ff702b; }
.pl-expanded-play svg { width:32px; height:32px; fill:currentColor; }
.pl-expanded-player.is-playing .pl-expanded-play svg { fill:none; stroke-width:5px; }
.pl-expanded-volume { top:730px; display:flex; align-items:center; width:65%; gap:14px; margin:0; }
.pl-expanded-volume svg { width:20px; height:20px; }
.pl-expanded-volume input { min-width:0; width:100%; height:24px; padding:0; border:0; box-shadow:none; background:transparent; accent-color:#00f078; }
.pl-expanded-content .pl-expanded-status { top:766px; width:100%; max-height:32px; overflow:hidden; color:#ffd7d7; font-size:12px; line-height:16px; margin:0; text-align:center; }

.pl-expanded-transport.has-lyrics-control { gap:22px; }
.pl-expanded-transport .pl-expanded-lyrics-action { position:absolute; left:calc(100% + 4px); width:44px; height:48px; color:#d7eee2; }
.pl-expanded-transport .pl-expanded-lyrics-action svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; }
.pl-expanded-lyrics-action[aria-expanded="true"] { color:#76ffb2; background:#76ffb215; }
.pl-expanded-content > :is(.pl-expanded-cover,h2,[data-expanded-style],.pl-expanded-wave,.pl-expanded-timeline,.pl-expanded-transport,.pl-expanded-volume) { transition:top 360ms ease,width 360ms ease,height 360ms ease,font-size 360ms ease; }
.pl-expanded-content .pl-expanded-lyrics { top:510px; width:100%; height:250px; padding:12px 4px; box-sizing:border-box; border-top:1px solid #76ffb224; opacity:0; visibility:hidden; transform:translate(-50%,18px); transition:opacity 260ms ease,transform 360ms ease,visibility 360ms; pointer-events:none; }
.pl-expanded-player.has-lyrics-open .pl-expanded-cover { top:78px; width:120px; height:130px; }
.pl-app .pl-expanded-player.has-lyrics-open h2 { top:222px; font-size:21px; max-height:28px; -webkit-line-clamp:1; }
.pl-expanded-player.has-lyrics-open [data-expanded-style] { top:260px; }
.pl-expanded-player.has-lyrics-open .pl-expanded-wave { top:304px; height:30px; }
.pl-expanded-player.has-lyrics-open .pl-expanded-timeline { top:346px; }
.pl-expanded-player.has-lyrics-open .pl-expanded-transport { top:402px; }
.pl-expanded-player.has-lyrics-open .pl-expanded-volume { top:482px; }
.pl-expanded-player.has-lyrics-open .pl-expanded-lyrics { top:526px; height:230px; opacity:1; visibility:visible; transform:translateX(-50%); pointer-events:auto; }
.pl-expanded-lyrics-heading { display:flex; align-items:center; gap:8px; font:12px Inter,sans-serif; color:#ecfff3; }
.pl-expanded-lyrics-heading small { flex:1; font-size:9px; color:#a9c9bc; }
.pl-app .pl-lyrics-retry { padding:5px 8px; border:1px solid #76ffb24d; border-radius:9px; background:#76ffb212; color:#baffd2; font:500 10px Inter,sans-serif; }
.pl-app .pl-lyrics-retry[hidden] { display:none; }
.pl-expanded-lyrics-lines { position:relative; height:calc(100% - 24px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#328366 transparent; text-align:center; padding:4px 0; color:#8aaca0; }
.pl-app .pl-lyrics-line { margin:8px 0; font:500 17px/1.5 Inter,sans-serif; color:#8aaca0; }
.pl-app .pl-lyrics-line.is-active { color:#f5fff8; font-weight:700; }
.pl-app .pl-lyrics-line.is-gap { height:1.5em; margin:0; }
.pl-lyrics-line .is-sung { color:#76ffb2; }
.pl-lyrics-line .is-current { color:#baffd2; text-shadow:0 0 9px #76ffb280; text-decoration:underline; text-underline-offset:4px; }
@media(prefers-reduced-motion:reduce) {
  .pl-expanded-content > :is(.pl-expanded-cover,h2,[data-expanded-style],.pl-expanded-wave,.pl-expanded-timeline,.pl-expanded-transport,.pl-expanded-volume,.pl-expanded-lyrics) { transition:none; }
}

@media(max-width:860px) {
  .library-page .pl-mobile-library-list .pl-main { padding:6px 8px 155px; }
  .pl-library-banner { position:relative; overflow:hidden; min-height:148px; padding:18px; border-radius:20px; background:radial-gradient(ellipse at 73% 35%,#a2f0cd,transparent 60%),linear-gradient(120deg,#effcf6,#d9f9ec); }
  .pl-banner-copy { position:relative; z-index:1; width:64%; }
  .pl-app .pl-library-banner h1 { color:#12312b; font-size:29px; font-weight:750; line-height:1.12; }
  .pl-app .pl-library-banner p { margin:6px 0 12px; color:#52626c; font-size:13px; line-height:1.5; }
  .pl-library-banner p small { display:block; font-size:11px; white-space:nowrap; }
  .pl-app .pl-library-banner .pl-primary { width:100%; min-height:38px; padding:8px; border-radius:13px; font-size:13px; background:linear-gradient(110deg,#00aa62,#00b45d); }
  .pl-banner-art { position:absolute; right:8px; top:25px; width:34%; height:110px; pointer-events:none; }
  .pl-banner-art i { position:absolute; left:2px; top:5px; width:62px; height:86px; border-radius:7px; background:#08c87845; transform:rotate(-24deg); }
  .pl-banner-art i:nth-child(2) { left:10px; top:8px; background:#00bb7270; transform:rotate(-15deg); }
  .pl-banner-art i:nth-child(3) { display:grid; place-items:center; left:20px; background:#eafff0c9; border:1px solid white; transform:rotate(-10deg); box-shadow:0 12px 25px #00955324; }
  .pl-banner-art i svg { color:#00bc62; width:39px; height:49px; stroke-width:3; }
  .pl-banner-art>span { position:absolute; right:0; top:18px; color:#219c6a; font-family:cursive; font-size:11px; font-style:italic; line-height:1.2; transform:rotate(-8deg); }
  .pl-library-tabs { position:relative; display:flex; align-items:center; gap:8px; margin-top:7px; }
  .pl-library-tabs .pl-tabs { flex:1; min-width:0; gap:10px; border:0; margin:0; }
  .pl-library-tabs .pl-tabs button { padding:14px 5px 12px; font-size:12px; }
  .pl-library-tabs .pl-tabs button[aria-selected=true] { font-weight:650; }
  .pl-app .pl-library-tabs>.pl-icon { width:32px; height:32px; flex-basis:32px; border-radius:50%; border:1px solid #dcefe7; color:#087654; background:#fff; }
  .pl-library-tabs .pl-tabs { transition:opacity 160ms ease; }
  .pl-library-tabs.is-search-open .pl-tabs { opacity:0; pointer-events:none; }
  .pl-library-search-open { transition:opacity 140ms ease; }
  .is-search-open .pl-library-search-open { opacity:0; pointer-events:none; }
  .pl-library-tabs .pl-mobile-library-search { position:absolute; z-index:2; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:9px; width:32px; height:40px; margin:0; padding:0 6px 0 12px; overflow:hidden; border:1px solid #cfe8dc; border-radius:999px; background:#f8fffb; color:#087654; box-shadow:0 4px 14px #116a3810; opacity:0; visibility:hidden; transition:width 260ms cubic-bezier(.2,.8,.2,1),opacity 160ms ease,visibility 0s 260ms; }
  .pl-library-tabs.is-search-open .pl-mobile-library-search { width:100%; opacity:1; visibility:visible; transition-delay:0s; }
  .pl-mobile-library-search>svg { width:19px; height:19px; flex-shrink:0; }
  .pl-app .pl-mobile-library-search input { min-width:0; flex:1; width:100%; height:36px; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#18382d; font-size:13px; }
  .pl-mobile-library-search input::placeholder { color:#7b9187; }
  .pl-library-tabs .pl-mobile-library-search { background:linear-gradient(110deg,#fff,#f0faf5); border-color:#d0eae1; box-shadow:none; color:#087654; }
  .pl-library-tabs .pl-mobile-library-search:focus-within { border-color:#85c6a6; }
  .pl-app .pl-mobile-library-search input:focus,.pl-app .pl-mobile-library-search input:focus-visible { outline:none; box-shadow:none; border:0; }
  .pl-mobile-library-search input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
  .pl-app .pl-mobile-library-search .pl-library-search-close { width:28px; height:28px; flex-basis:28px; padding:6px; border:0; border-radius:50%; background:transparent; color:#087654; box-shadow:none; }
  .pl-app .pl-mobile-library-search .pl-library-search-close:hover { background:#e6f5ed; }
  .pl-app .pl-mobile-library-search .pl-library-search-close:focus-visible { outline:1px solid #087654; outline-offset:-2px; }
  @media(prefers-reduced-motion:reduce) { .pl-library-tabs .pl-mobile-library-search,.pl-library-tabs .pl-tabs,.pl-library-search-open { transition:none; } }
  .pl-mobile-library-rows { display:grid; gap:2px; margin-top:6px; }
  .pl-library-card { display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:16px; background:#ffffffdf; border:1px solid #f3f7f5; }
  .pl-library-card .pl-row-main { gap:12px; }
  .pl-library-card .pl-cover { width:60px; height:60px; border-radius:9px; }
  .pl-library-card .pl-copy { gap:2px; }
  .pl-library-card .pl-copy strong { font-size:14px; font-weight:650; }
  .pl-library-card .pl-copy small { font-size:11px; color:#758096; }
  .pl-library-updated { display:flex; align-items:center; gap:4px; font-size:10px; color:#758096; }
  .pl-library-updated svg { width:12px; height:12px; }
  .pl-library-public { display:inline-flex; align-items:center; gap:4px; justify-self:start; padding:1px 6px; color:#00a954; background:#e6f9ee; border-radius:20px; font-size:10px; font-weight:600; }
  .pl-library-public svg { width:12px; height:12px; }
  .pl-app .pl-library-play { width:35px; height:35px; flex-basis:35px; border-radius:50%; color:#00ad5c; border:1px solid #e0f3eb; background:#f0fcf6; }
  .pl-library-play svg { fill:currentColor; width:18px; height:18px; }
  .pl-app .pl-library-menu { width:27px; height:27px; flex-basis:27px; padding:5px; border:1px solid #e9edf0; border-radius:50%; background:#fff; color:#758096; }
}

/* Small shared vinyl indicator for requested operations and audio buffering. */
@media(max-width:860px) {
  /* Empty lists need only the actual bottom navigation clearance, not the
     scrolling list's player allowance and 440px placeholder. */
  .library-page .pl-mobile-library-list:has(> .pl-main .pl-empty) .pl-main {
    min-height:0;
    padding-bottom:calc(64px + env(safe-area-inset-bottom));
  }
  .library-page.mobile-playlist-player-visible .pl-mobile-library-list:has(> .pl-main .pl-empty) .pl-main,
  .library-page .pl-mobile-library-list:has(.pl-player):has(> .pl-main .pl-empty) .pl-main {
    padding-bottom:calc(140px + env(safe-area-inset-bottom));
  }
  .pl-mobile-library-list .pl-empty { min-height:0; padding:20px 8px; }
  .pl-mobile-library-list .pl-empty-art { width:96px; height:84px; flex:none; }
  .pl-mobile-library-list .pl-empty-art>svg { width:50px; height:50px; }
  .pl-mobile-library-list .pl-empty-art span:last-child { top:60px; }
  .pl-mobile-library-list .pl-empty h2 { font-size:18px; margin:14px 0 12px; }
}
@media(max-width:860px) and (max-height:700px) {
  .pl-mobile-library-list .pl-empty { padding:12px 8px; }
  .pl-mobile-library-list .pl-empty-art { display:none; }
  .pl-mobile-library-list .pl-empty h2 { margin:0 0 10px; }
}
@media(max-width:860px) and (max-height:500px) {
  .pl-mobile-library-list:has(> .pl-main .pl-empty) .pl-library-banner { min-height:0; padding:10px 14px; }
  .pl-mobile-library-list:has(> .pl-main .pl-empty) .pl-library-banner h1 { font-size:23px; margin-bottom:8px; }
  .pl-mobile-library-list:has(> .pl-main .pl-empty) .pl-library-banner p { display:none; }
  .pl-mobile-library-list .pl-empty { padding:6px 8px; }
  .pl-mobile-library-list .pl-empty .pl-primary { min-height:36px; padding:6px 14px; }
}

.pl-app .pl-action-loading { display:block; position:fixed; z-index:2100; top:50%; left:50%; width:38px; height:38px; transform:translate(-50%,-50%); pointer-events:none; }
.pl-action-loading .pl-loading-vinyl-scale { display:grid; place-items:center; width:38px; height:38px; }
.pl-action-loading .am-vinyl-mini { --am-vinyl-size:38px; }
.pl-app .pl-control-loading { position:relative; }
.pl-app .pl-control-loading>svg,.pl-app .pl-control-loading>span:not(.pl-action-loading) { visibility:hidden; }
.pl-app .pl-action-loading.is-inline { position:absolute; z-index:3; width:28px; height:28px; }
.pl-action-loading.is-inline .pl-loading-vinyl-scale { width:28px; height:28px; }
.pl-action-loading.is-inline .am-vinyl-mini { --am-vinyl-size:24px; }
.pl-app .pl-action-loading:not(.is-inline) { inset:0; width:auto; height:auto; transform:none; display:grid; place-items:center; background:rgb(255 255 255 / 16%); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.pl-action-loading:not(.is-inline) .pl-loading-vinyl-scale { width:38px; height:38px; }
.pl-list-placeholder { display:grid; gap:10px; width:100%; grid-column:1/-1; }
.pl-list-placeholder>div { display:flex; align-items:center; gap:14px; padding:12px; border:1px solid #edf3f0; border-radius:16px; background:#ffffffb8; }
.pl-list-placeholder i { width:60px; height:60px; flex-shrink:0; border-radius:9px; background:#eaf3ee; }
.pl-list-placeholder span { flex:1; display:grid; gap:10px; }
.pl-list-placeholder b { display:block; height:10px; width:70%; border-radius:5px; background:#eaf3ee; }
.pl-list-placeholder b:last-child { width:45%; height:8px; }
/* Keep the song picker header and action outside the scrolling song list. */
.pl-app .pl-sheet.pl-add-sheet { display:flex; flex-direction:column; width:min(100%,540px); height:min(780px,92dvh); min-height:0; max-height:92dvh; padding:0; overflow:hidden; background:#fbfefc; }
.pl-add-sheet .pl-pick-header { flex:none; padding:22px 20px 12px; background:linear-gradient(135deg,#fff,#f2fbf6); border-bottom:1px solid #e7f0eb; }
.pl-pick-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pl-add-sheet .pl-pick-heading h2 { margin:0; font-size:23px; letter-spacing:-.5px; }
.pl-app .pl-pick-heading>.pl-icon { width:44px; height:44px; flex-basis:44px; border:1px solid #e4ede8; border-radius:50%; background:#fff; color:#365447; }
.pl-add-sheet .pl-pick-header>p { margin:4px 0 18px; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.pl-pick-header>p strong { color:#385d4c; font-weight:550; }
.pl-pick-toolbar { position:relative; display:flex; align-items:center; gap:8px; min-height:44px; }
.pl-pick-toolbar .pl-filters { flex:1; min-width:0; gap:5px; margin:0; scrollbar-width:none; transition:opacity 160ms ease; }
.pl-pick-toolbar .pl-filters::-webkit-scrollbar { display:none; }
.pl-pick-toolbar .pl-filters button { flex-shrink:0; min-height:44px; padding:8px 11px; border:1px solid #e4ede8; border-radius:24px; background:#fff; font-size:12px; color:#53645a; white-space:nowrap; }
.pl-pick-toolbar .pl-filters button[aria-pressed=true] { border-color:#00a756; background:#00ac59; color:#fff; }
.pl-app .pl-pick-search-open { width:44px; height:44px; flex-basis:44px; border:1px solid #dceee4; border-radius:50%; background:#fff; color:#087654; transition:opacity 140ms ease; }
.pl-pick-toolbar.is-search-open .pl-filters,.pl-pick-toolbar.is-search-open .pl-pick-search-open { opacity:0; pointer-events:none; }
.pl-pick-search { position:absolute; z-index:2; right:0; top:0; display:flex; align-items:center; gap:9px; width:44px; height:44px; padding:0 3px 0 13px; overflow:hidden; border:1px solid #d0eae1; border-radius:24px; background:linear-gradient(110deg,#fff,#f0faf5); color:#087654; opacity:0; visibility:hidden; transition:width 260ms cubic-bezier(.2,.8,.2,1),opacity 160ms ease,visibility 0s 260ms; }
.pl-pick-toolbar.is-search-open .pl-pick-search { width:100%; opacity:1; visibility:visible; transition-delay:0s; }
.pl-pick-search:focus-within { border-color:#85c6a6; }
.pl-pick-search>svg { width:20px; height:20px; }
.pl-app .pl-pick-search input { flex:1; width:100%; min-width:0; height:42px; min-height:0; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#18382d; font-size:16px; }
.pl-app .pl-pick-search input:focus,.pl-app .pl-pick-search input:focus-visible { outline:none; border:0; box-shadow:none; }
.pl-pick-search input::placeholder { color:#7b9187; font-size:14px; }
.pl-pick-search input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.pl-app .pl-pick-search-close { width:38px; height:38px; flex-basis:38px; padding:9px; border:0; border-radius:50%; background:transparent; color:#087654; }
.pl-add-sheet .pl-pick-list { flex:1; min-height:0; overflow-y:auto; overflow-anchor:none; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#cdded4 transparent; padding:10px 12px 14px; scroll-padding-block:10px; }
.pl-pick-more { display:grid; justify-items:center; gap:5px; padding:12px 0 8px; }
.pl-pick-more button { min-height:44px; padding:10px 18px; border:1px solid #d9ece1; border-radius:24px; background:#f0faf4; color:#087654; font-size:13px; }
.pl-pick-more small { font-size:11px; color:#73847a; }
.pl-add-sheet .pl-pick { min-width:0; min-height:76px; gap:12px; padding:10px; margin:0 0 4px; border:1px solid transparent; border-radius:16px; background:#fff; text-align:left; transition:background 140ms ease,border-color 140ms ease; -webkit-tap-highlight-color:transparent; }
.pl-add-sheet .pl-pick:has(input:checked) { background:#edf9f2; border-color:#bfe8cf; }
.pl-add-sheet .pl-pick input { right:10px; width:24px!important; height:24px; min-height:0; margin:0; padding:0; }
.pl-add-sheet .pl-pick .pl-check { order:3; flex:0 0 24px; height:24px; display:grid; place-items:center; border-color:#cddbd3; background:#fff; }
.pl-add-sheet .pl-pick input:checked+.pl-check { border-color:#00a85b; background:#00a85b; }
.pl-add-sheet .pl-pick .pl-cover { width:54px; height:54px; border-radius:10px; }
.pl-add-sheet .pl-pick .pl-copy { gap:6px; text-align:left; }
.pl-add-sheet .pl-pick .pl-copy strong { font-size:14px; font-weight:600; line-height:1.35; }
.pl-add-sheet .pl-track-meta { display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:8px; font-size:12px; line-height:1.3; color:#6c7b73; }
.pl-add-sheet .mobile-playlist-meta-item { display:inline-flex; align-items:center; gap:4px; }
.pl-add-sheet .pl-track-meta svg { width:13px; height:13px; }
.pl-add-sheet .pl-pick-footer { flex:none; padding:12px 20px max(16px,env(safe-area-inset-bottom)); border-top:1px solid #e3eee7; background:#fff; box-shadow:0 -6px 20px #1c503a06; }
.pl-add-sheet .pl-pick-footer .pl-primary { min-height:50px; border-radius:26px; background:linear-gradient(110deg,#00b862,#00a951); border:0; }
.pl-add-sheet .pl-pick-footer .pl-primary:disabled { opacity:1; background:#e9f2ec; color:#83968a; }
.pl-add-sheet .pl-sheet-status { margin:0; font-size:13px; }
.pl-add-sheet .pl-sheet-status:empty { display:none; }
.pl-add-sheet .pl-sheet-status:not(:empty) { position:static; margin:0 0 10px; }
.pl-pick-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:240px; height:100%; padding:24px; text-align:center; }
.pl-pick-empty>svg { width:42px; height:42px; padding:10px; border-radius:50%; background:#e8f6ee; color:#148756; }
.pl-pick-empty>p { max-width:280px; font-size:13px; }
@media(max-width:860px) {
  .pl-app .pl-sheet.pl-add-sheet { width:100%; height:100dvh; max-height:100dvh; border-radius:0; }
  .pl-add-sheet .pl-pick-header { padding:calc(16px + env(safe-area-inset-top)) 16px 12px; }
  .pl-add-sheet .pl-pick-footer { padding-inline:16px; }
  .pl-add-sheet .pl-pick-list { padding-inline:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .pl-pick-search,.pl-pick-toolbar .pl-filters,.pl-pick-search-open,.pl-add-sheet .pl-pick { transition:none; }
}
@media(max-width:860px) {
  body.mobile-account-dashboard-active.library-page #mobile-account-dashboard { padding:0; }
  body.mobile-account-dashboard-active.library-page #playlist-page { width:100%; min-width:0; }
  #playlist-page.hidden { display:none; }
}

/* Playlist creation: the three cover choices share one compact bottom sheet. */
.pl-app .pl-sheet.pl-editor-sheet { display:block; flex:none; width:min(100%,500px); height:var(--pl-editor-fit-height,calc(100dvh - 24px)); min-height:0; max-height:none; overflow:hidden; padding:0; border:0; border-radius:26px 26px 0 0; background:linear-gradient(135deg,#fff 65%,#fafffc); color:#081922; box-shadow:0 -8px 48px #092b2320; }
.pl-editor-layer { top:var(--pl-editor-viewport-top,0px); bottom:auto; height:var(--pl-editor-viewport-height,100dvh); padding-top:clamp(12px,5dvh,48px); box-sizing:border-box; overflow:clip; }
.pl-editor-stage { position:absolute; top:0; left:50%; display:flex; flex-direction:column; width:100%; transform:translateX(-50%) scale(var(--pl-editor-scale,1)); transform-origin:top center; }
.pl-editor-layer .pl-backdrop { background:#07100e91; backdrop-filter:blur(2px); }
.pl-app .pl-sheet.pl-editor-sheet { overflow:clip; }
html:has(.pl-editor-layer) { overflow:hidden; overscroll-behavior:none; }
.pl-editor-handle { flex:none; width:38px; height:5px; border-radius:8px; margin:11px auto 0; background:#d7d8dc; }
.pl-editor-header { position:relative; flex:none; padding:18px 22px 12px; }
.pl-app .pl-editor-header h2 { margin:0 24px 7px 0; font-size:25px; font-weight:750; line-height:1.2; letter-spacing:-.8px; }
.pl-app .pl-editor-header p { color:#68748a; font-size:14px; line-height:1.45; }
.pl-app .pl-editor-close { position:absolute; top:-8px; right:10px; width:36px; height:36px; padding:8px; color:#081922; background:transparent; }
.pl-editor-sheet .pl-editor-form { display:flex; flex:none; flex-direction:column; gap:0; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.pl-editor-fields { flex:none; overflow:visible; padding:0 22px 6px; }
.pl-editor-name { display:grid; gap:7px; font-size:13px; font-weight:650; }
.pl-app .pl-editor-name input { min-height:40px; height:40px; border:1px solid #dfe3e9; background:#fdfdfe; border-radius:8px; padding:10px 12px; font-size:16px; font-weight:400; box-shadow:none; }
.pl-editor-name small { margin-top:-4px; color:#69758b; line-height:16px; }
.pl-editor-cover { min-width:0; border:0; margin:14px 0 0; padding:0; }
.pl-editor-cover legend { padding:0; margin-bottom:8px; font-size:13px; font-weight:650; }
.pl-cover-modes { display:grid; grid-template-columns:.95fr 1.25fr 1fr; gap:6px; }
.pl-app .pl-cover-mode { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:38px; padding:8px 5px; border:1px solid #e1e5eb; border-radius:9px; background:#fff; box-shadow:0 2px 5px #24374203; color:#101a27; font-size:clamp(10px,2.85vw,12px); white-space:nowrap; transition:background .16s,color .16s,border-color .16s; }
.pl-cover-mode svg { width:18px; height:18px; stroke-width:1.9; }
.pl-app .pl-cover-mode[aria-selected=true] { color:#00ad62; border-color:#00bc6e; background:#eefbf4; }
.pl-app .pl-cover-mode[data-id=presets][aria-selected=true] { color:#fff; background:linear-gradient(120deg,#00b56c,#00be65); }
.pl-cover-panel { min-height:0; padding-top:10px; }
.pl-cover-presets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:7px; row-gap:9px; }
.pl-app .pl-cover-preset { display:grid; gap:4px; min-width:0; padding:0; border:0; background:transparent; text-align:center; font-size:11px; color:#101a25; }
.pl-preset-image { position:relative; display:block; width:100%; aspect-ratio:1.04; overflow:hidden; border:2px solid transparent; border-radius:10px; background:#eef4ef; }
.pl-preset-image img { display:block; width:100%; height:100%; object-fit:cover; }
.pl-cover-preset[aria-pressed=true] .pl-preset-image { border-color:#00be69; box-shadow:0 0 0 1px #00be6920; }
.pl-preset-image i { display:grid; place-items:center; position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; background:#fff; color:#00b566; box-shadow:0 2px 6px #0001; }
.pl-preset-image i svg { width:17px; height:17px; stroke-width:3; }
.pl-cover-upload-box { display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 12px 8px; min-height:156px; border:1px dashed #b5e9d6; border-radius:8px; background:linear-gradient(125deg,#f4fcf8,#f0faf6); text-align:center; }
.pl-upload-symbol { display:grid; place-items:center; width:40px; height:40px; margin:0; border-radius:50%; background:#ddf7eb; color:#00b96a; }
.pl-upload-symbol svg { width:27px; height:27px; }
.pl-cover-upload-box strong { font-size:13px; font-weight:550; }
.pl-app .pl-cover-upload-box p { color:#68748a; font-size:11px; line-height:1.25; }
.pl-app .pl-choose-cover { width:100%; margin-top:4px; padding:8px; min-height:34px; border:0; border-radius:7px; background:#e1f6ec; color:#00a85c; font-weight:600; font-size:13px; }
.pl-cover-upload-box .pl-upload-preview { width:65px; height:65px; border-radius:9px; margin-bottom:4px; }
.pl-cover-upload-box.has-image { padding-top:9px; }
.pl-cover-upload-box.has-image p { display:none; }
.pl-recent-covers { margin-top:8px; }
.pl-app .pl-recent-covers p { color:#68748a; font-size:11px; margin-bottom:8px; }
.pl-recent-covers>div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.pl-app .pl-recent-covers button { min-width:0; aspect-ratio:1; padding:0; border:2px solid transparent; border-radius:9px; overflow:hidden; background:#f4faf6; }
.pl-recent-covers button[aria-pressed=true] { border-color:#00b66a; }
.pl-recent-covers .pl-cover { width:100%; height:100%; border-radius:6px; }
.pl-cover-auto { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px; padding:12px; border-radius:8px; background:linear-gradient(130deg,#f2fbf7,#f3faf7); text-align:center; }
.pl-auto-art { position:relative; display:grid; place-items:center; width:124px; height:90px; margin-bottom:7px; }
.pl-auto-art i,.pl-auto-art>span { position:absolute; width:73px; height:78px; border-radius:8px; background:#caeee0; }
.pl-auto-art i:first-child { transform:translate(-10px,-4px) rotate(-13deg); }
.pl-auto-art i:nth-child(2) { transform:translate(12px,-3px) rotate(13deg); background:#d7f3e7; }
.pl-auto-art>span { display:grid; place-items:center; background:linear-gradient(145deg,#fafffd,#effaf5); color:#37c890; box-shadow:0 9px 16px #36bb8d18; }
.pl-auto-art svg { width:40px; height:40px; fill:currentColor; stroke-width:1; }
.pl-cover-auto strong { font-size:14px; margin-bottom:5px; }
.pl-app .pl-cover-auto p { color:#68748a; font-size:12px; line-height:1.5; }
.pl-app .pl-auto-info { display:flex; gap:9px; align-items:center; margin-top:9px; padding:10px; border-radius:8px; background:#eef6ff; color:#627394; font-size:11px; line-height:1.45; }
.pl-auto-info svg { color:#0aade6; width:19px; height:19px; }
.pl-editor-description { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:12px; color:#68748a; font-size:13px; }
.pl-app .pl-description-toggle { display:flex; align-items:center; gap:9px; min-height:36px; padding:0; background:none; border:0; color:#00af63; font-size:13px; font-weight:600; }
.pl-description-toggle svg { width:20px; height:20px; }
.pl-description-field { flex-basis:100%; display:grid; gap:4px; }
.pl-description-field[hidden] { display:none; }
.pl-app .pl-description-field textarea { height:76px; min-height:76px; resize:none; padding:10px; border:1px solid #dfe3e9; font-size:16px; background:#fcfefd; }
.pl-description-field small { text-align:right; font-size:11px; color:#68748a; }
.pl-app .pl-editor-public { display:flex; align-items:center; gap:13px; width:100%; min-height:50px; padding:6px 0; margin-top:6px; border:0; background:transparent; color:#0b1925; font-size:14px; text-align:left; }
.pl-editor-public>svg { width:27px; height:27px; }
.pl-editor-public>span { flex:1; }
.pl-editor-public .pl-switch { width:49px; height:28px; flex:none; transition:background .18s; }
.pl-editor-public .pl-switch::after { transition:transform .18s; }
.pl-editor-public .pl-switch.on::after { transform:translateX(21px); }
.pl-editor-footer { flex:none; padding:10px 22px max(16px,env(safe-area-inset-bottom)); background:#fffffff5; box-shadow:0 -8px 18px #fff; }
.pl-app .pl-editor-footer .pl-submit { min-height:54px; margin:0; border:0; border-radius:13px; background:linear-gradient(115deg,#00ad69,#00bd68); font-size:15px; font-weight:650; }
.pl-editor-footer .pl-sheet-status:empty { display:none; }
.pl-editor-footer .pl-sheet-status:not(:empty) { position:static; margin-bottom:10px; font-size:12px; }
@media(min-width:861px) { .pl-app .pl-sheet.pl-editor-sheet { border-radius:26px; } }
@media(max-width:360px) { .pl-editor-header,.pl-editor-fields { padding-left:16px; padding-right:16px; } .pl-editor-header h2 { font-size:23px; } .pl-editor-footer { padding-inline:16px; } }
@media(prefers-reduced-motion:reduce) { .pl-cover-mode,.pl-editor-public .pl-switch,.pl-editor-public .pl-switch::after { transition:none; } }

.pl-destination-list { display:grid; gap:8px; max-height:45dvh; overflow-y:auto; overscroll-behavior:contain; margin:16px 0; padding:3px; }
.pl-app .pl-destination { display:flex; align-items:center; gap:12px; width:100%; padding:10px; border:1px solid #dfede5; border-radius:13px; background:#f8fcf9; text-align:left; }
.pl-destination .pl-cover { width:48px; height:48px; }
.pl-destination>svg { color:#00a960; }
.pl-destination .pl-copy small { white-space:normal; }
.pl-destination-empty { padding:24px 0; text-align:center; }