/* Playlist skin. The player and ear-monitor controls retain their existing layout. */
body{background:#e8ede9}
.stage{background:radial-gradient(ellipse at 50% 28%,#f8fbf8,transparent 58%),#e8ede9;gap:0;padding:36px;justify-content:center}
.phone:not(.is-player){box-shadow:0 0 0 9px #222825,0 0 0 10.5px #66736b,0 28px 65px #15332526;border-radius:44px}
.page-list{background:#fff;color:#1b2520}
.phone:not(.is-player) .statusbar{background:#e5f2eb;color:#17291f}
.playlist-nav{padding:55px 12px 3px;min-height:102px;display:flex;align-items:center;justify-content:space-between;flex:none;position:relative;background:#e5f2eb}
.playlist-nav>span{font-size:17px;font-weight:600;position:absolute;bottom:15px;left:50%;transform:translateX(-50%)}
.nav-tools{display:flex;gap:1px}
.nav-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;flex:none}
.nav-icon svg{width:22px;height:22px;stroke-width:1.7}
.nav-icon:active{background:#17492d0a}
.playlist-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;background:#fff;padding-bottom:32px}
.playlist-scroll::-webkit-scrollbar{display:none}
.playlist-hero{padding:15px 22px 0;background:linear-gradient(180deg,#e5f2eb 0%,#edf6f0 65%,#f7faf8 100%)}
.playlist-intro{display:flex;align-items:center;gap:17px;min-width:0}
.playlist-cover{height:120px;width:120px;border-radius:9px;object-fit:cover;flex:none;box-shadow:0 7px 17px #2049331c}
.playlist-info{min-width:0;flex:1}
.playlist-info h1{font-size:18px;font-weight:650;line-height:1.55;letter-spacing:.05px}
.playlist-creator{display:flex;align-items:center;gap:6px;min-height:38px;font-size:11.5px;color:#687c70;margin-top:3px;max-width:100%}
.creator-avatar{width:21px;height:21px;background:#345945;color:#e6f8b9;display:grid;place-items:center;border-radius:50%}
.creator-avatar svg{width:13px;height:13px;stroke-width:1.5}
.playlist-creator .chevron{width:12px;height:12px;color:#8ca194}
.playlist-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:0}
.playlist-tags span{border:1px solid #b9cbc05c;border-radius:3px;padding:2px 5px;font-size:9px;line-height:1.3;color:#75877b;letter-spacing:.4px}
.playlist-description{display:flex;align-items:center;justify-content:space-between;width:100%;gap:4px;margin-top:10px;min-height:35px;text-align:left;font-size:11px;line-height:1.5;color:#7b8b81}
.playlist-description svg{width:15px;height:15px;flex:none}
.playlist-description span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.playlist-actions{display:flex;align-items:center;justify-content:center;padding:6px 0 19px;gap:12px}
.playlist-actions button{min-height:39px;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:22px;background:#ffffffa8;font-size:12px;color:#34483a;border:1px solid #ffffffb3;transition:background .18s}
.playlist-actions button svg{width:18px;height:18px;stroke-width:1.65}
.playlist-actions button:active{background:#e3eee7}
.playlist-actions button[aria-pressed="true"]{color:#17b57a}
.playlist-actions button[aria-pressed="true"] svg{fill:#17b57a;stroke:#17b57a}
.playlist-tracks{background:white;border-radius:19px 19px 0 0;margin-top:-3px;position:relative;min-height:310px}
.track-toolbar{display:flex;align-items:center;justify-content:space-between;padding:9px 22px 5px;gap:4px;min-height:64px}
#playAll{display:flex;align-items:center;gap:8px;min-height:44px;text-align:left}
.play-all-icon{height:27px;width:27px;border-radius:50%;background:#1fc78a;display:grid;place-items:center;color:#fff}
.play-all-icon svg{width:17px;height:17px;margin-left:2px}
#playAll b{font-size:16px;font-weight:620;letter-spacing:.1px}
#playlistCount{font-size:11px;color:#a2aaa5;font-weight:400;margin-left:0}
.track-total{font-size:10px;color:#a6aea9;white-space:nowrap}
.songlist{padding:0 12px}
.songlist li{padding:0;gap:0;border-radius:8px;min-height:73px}
.songlist li.playing{background:#f2faf6}
.songlist li:active{background:#f4f7f5}
.song-play{min-width:0;flex:1;display:flex;gap:11px;align-items:center;text-align:left;min-height:73px;padding:9px 0 9px 5px;border-radius:8px}
.song-number{width:19px;flex:none;text-align:center;font-size:13px;color:#a5ada8;font-variant-numeric:tabular-nums;display:grid;place-items:center}
.song-thumb{width:43px;height:43px;border-radius:5px;flex:none;object-fit:cover;box-shadow:0 2px 5px #193a2710}
.song-meta{min-width:0;flex:1}
.song-meta .song-title-line{display:flex;align-items:center;gap:5px;min-width:0;margin-top:0;overflow:visible}
.song-meta b{font-size:15px;color:#24312a;font-weight:500;line-height:1.45;min-width:0}
.songlist li.playing .song-meta b{color:#12b877}
.song-meta .song-artist{font-size:10.5px;color:#a0aaa3;line-height:1.6;margin-top:3px;font-weight:400}
.song-title-line .badge-ear,.song-title-line .badge-swap{border-radius:3px;font-size:8px;padding:1px 3px;line-height:1.2;font-weight:500;display:inline-block;margin:0;flex:none}
.song-title-line .badge-ear{background:#fff;color:#25b984;border:1px solid #2abb8266}
.song-title-line .badge-swap{color:#8095a6;border:1px solid #abbac55c;background:#fff}
.song-menu{width:36px;min-height:52px;flex:none;display:grid;place-items:center;color:#a0aaa3}
.song-menu svg{width:19px;height:19px;stroke-width:1.5}
.song-number .eq{height:13px;gap:2px}
.song-number .eq i{width:2px;background:#1fc78a}
.phone:not(.playing) .song-number .eq i{animation-play-state:paused}
.track-list-end{display:flex;justify-content:center;align-items:center;gap:11px;margin:26px 32px 23px;color:#b6bcb8;font-size:10px}
.track-list-end span{height:1px;width:27px;background:#edf0ee}
.listen-note{display:flex;gap:11px;align-items:center;border-top:1px solid #f0f3f1;border-bottom:1px solid #f0f3f1;margin:0 22px;padding:18px 0}
.note-icon{height:35px;width:35px;border-radius:50%;display:grid;place-items:center;background:#eff8f2;color:#6f9b80;flex:none}
.note-icon svg{height:19px;width:19px;stroke-width:1.6}
.listen-note b{font-size:11.5px;font-weight:500;color:#708578;display:block;margin-bottom:5px}
.listen-note p{font-size:10px;color:#a2afa6;line-height:1.5}
.note-dot{width:5px;height:5px;border-radius:50%;background:#b7d6c2;margin-left:auto;flex:none}
.prototype-mark{font-size:9px;color:#bdc6bf;text-align:center;margin:18px 0 0;letter-spacing:.3px}
.playlist-search{margin:3px 20px 9px;border-radius:8px;background:#f3f6f4;display:flex;align-items:center;gap:7px;padding:2px 8px;min-height:44px}
.playlist-search svg{width:17px;height:17px;color:#91a396;flex:none}
.playlist-search input{min-width:0;width:100%;background:transparent;border:0;outline:0;color:#33463a;font-size:16px;line-height:40px;font-family:inherit}
.playlist-search input:focus-visible{outline:2px solid #1fc78a;outline-offset:1px;border-radius:4px}
.playlist-search input::placeholder{font-size:12px;color:#99a69d}
.playlist-search button{flex:none;padding:8px 0 8px 5px;min-height:40px;font-size:12px;color:#6e8174}
.search-empty{padding:35px 18px;text-align:center;color:#95a49b;font-size:12px}
.mini-player{position:relative;display:flex;align-items:center;flex:none;gap:7px;padding:7px 18px 24px 19px;min-height:87px;background:#fffffff5;border-top:1px solid #ecf1ed;box-shadow:0 -4px 15px #23402a03}
.mini-open{flex:1;min-width:0;display:flex;align-items:center;gap:11px;min-height:47px;text-align:left}
.mini-disc{width:42px;height:42px;background:#182820;border-radius:50%;padding:5px;flex:none;box-shadow:0 0 0 1px #1828200d;display:grid;place-items:center;position:relative}
.mini-disc img{height:100%;width:100%;border-radius:50%;object-fit:cover}
.mini-disc::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#15271a;transform:translate(-50%,-50%)}
.mini-copy{min-width:0}
.mini-copy b{display:block;font-size:13px;line-height:1.5;color:#293b2f;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-copy>span{display:block;font-size:10px;line-height:1.5;color:#9eaaa2;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-toggle,.mini-queue{display:grid;place-items:center;width:40px;height:44px;flex:none;color:#34473c}
.mini-toggle svg{border:1.6px solid #34473c;border-radius:50%;width:29px;height:29px;padding:5px}
.mini-queue svg{width:24px;height:24px;stroke-width:1.7}
.mini-progress{position:absolute;top:-1px;left:0;right:0;height:1px;overflow:hidden}
.mini-progress i{display:block;height:100%;width:0;background:#2bc790}
.playlist-dialog{position:absolute;inset:0;z-index:70;display:flex;align-items:flex-end;isolation:isolate}
.playlist-dialog-scrim{position:absolute;inset:0;background:#0c241849;z-index:-1}
.playlist-dialog-body{width:100%;max-height:80%;overflow-y:auto;padding:12px 24px 38px;border-radius:23px 23px 0 0;background:#fff;color:#273a2d;box-shadow:0 -8px 30px #17291f0a}
.dialog-grip{width:34px;height:4px;background:#e1e8e3;border-radius:3px;margin:0 auto 5px}
.playlist-dialog-body header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0 14px}
.playlist-dialog-body h2{font-size:17px;font-weight:600}
.playlist-dialog-body p{font-size:13px;color:#809086;line-height:1.9;margin-bottom:14px}
.playlist-dialog-body .dialog-label{font-size:10px;color:#2eaf7c;letter-spacing:1px;margin:0 0 7px}
.playlist-dialog-body .queue-song{display:flex;gap:11px;align-items:center;width:100%;text-align:left;padding:10px 0;border-bottom:1px solid #f1f4f2;font-size:13px;min-height:60px}
.queue-song img{width:36px;height:36px;border-radius:5px;object-fit:cover}
.queue-song span{flex:1;min-width:0}.queue-song b{font-weight:500}.queue-song small{color:#96a79b;font-size:10px;margin-left:8px}.queue-song.active{color:#16b87c}
.queue-song svg{width:18px;height:18px}
.song-detail-cover{width:65px;height:65px;border-radius:8px;float:left;margin:0 15px 12px 0}
.copy-link{background:#f1f6f2;padding:12px;border-radius:8px;width:100%;border:1px solid #e0e9e2;color:#547260;font-size:11px}
.usage-guide{display:none;min-width:0;color:#6d8174}
.usage-guide-label{display:flex;align-items:center;gap:7px;color:#6f967f;font-size:10px;letter-spacing:1px;margin-bottom:13px}
.usage-guide-label svg{width:15px;height:15px;stroke-width:1.6}
.usage-guide h1{color:#294935;font-size:24px;line-height:1.4;font-weight:600;letter-spacing:.3px;margin:0 0 27px}
.usage-guide-steps{list-style:none;counter-reset:guide-step;display:flex;flex-direction:column;gap:19px}
.usage-guide-steps li{counter-increment:guide-step;position:relative;padding-left:37px}
.usage-guide-steps li::before{content:counter(guide-step,decimal-leading-zero);position:absolute;left:0;top:1px;width:23px;height:23px;display:grid;place-items:center;border:1px solid #bdd3c4;border-radius:50%;font-size:10px;font-weight:500;color:#5b8f70;font-variant-numeric:tabular-nums}
.usage-guide h2{font-size:13px;font-weight:600;line-height:1.8;color:#3e5b49;margin-bottom:4px}
.usage-guide p{font-size:12px;line-height:1.85}
.usage-guide strong{font-weight:500;color:#486b56}
.cue-words{white-space:nowrap;color:#426f53}
.usage-guide-tip{margin-top:24px;padding-top:18px;border-top:1px solid #c5d3c966;color:#8a9c90}
.usage-guide-tip>strong{display:block;margin-bottom:3px}
@media(min-width:1120px){
 .stage{display:grid;grid-template-columns:minmax(0,1fr) 390px minmax(0,1fr);column-gap:40px}
 .stage>.phone{grid-column:2;grid-row:1}
 .usage-guide{display:block;grid-column:3;grid-row:1;width:min(300px,100%);justify-self:start;align-self:center}
}
@media(max-width:520px){
 body,.stage{background:#fff}.stage{padding:0}.phone:not(.is-player){border-radius:0;box-shadow:none}
 .playlist-nav{padding-top:env(safe-area-inset-top);min-height:calc(51px + env(safe-area-inset-top));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
 .playlist-nav>span{bottom:16px}.playlist-hero{padding-top:14px}
 .mini-player{padding-bottom:calc(8px + env(safe-area-inset-bottom));min-height:calc(66px + env(safe-area-inset-bottom));padding-right:max(16px,env(safe-area-inset-right));padding-left:max(18px,env(safe-area-inset-left))}
 .playlist-dialog-body{padding-bottom:calc(25px + env(safe-area-inset-bottom))}
}
@media(max-width:355px){
 .playlist-hero{padding-left:17px;padding-right:17px}.playlist-intro{gap:12px}.playlist-cover{width:105px;height:105px}
 .playlist-info h1{font-size:16px}.playlist-creator{font-size:10.5px}.playlist-tags span{font-size:8px}
 .track-toolbar{padding-left:17px;padding-right:17px}#playlistCount{font-size:10px}.track-total{font-size:9px}
 .songlist{padding:0 8px}.song-play{gap:8px}.song-number{width:16px}.song-thumb{width:38px;height:38px}.song-menu{width:31px}.song-meta b{font-size:14px}
 .song-meta .song-artist{font-size:10px}.song-meta .song-title-line{gap:3px}.listen-note{margin:0 17px}.listen-note p{font-size:9px}
 .mini-player{gap:3px;padding-left:14px;padding-right:12px}
}