[hidden]{display:none !important}
/* 20261028153058 网易云风格 */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--red:#fc3d49;--red2:#ec4141;--txt:#222;--sub:#888;--line:#eee;--bg:#f7f7f8}
html,body{height:100%;background:var(--bg);color:var(--txt);font-family:-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;font-size:14px;overflow:hidden}
button{border:0;background:none;color:inherit;font:inherit;cursor:pointer}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg .fill{fill:currentColor;stroke:none}
#app{height:100%;display:flex;flex-direction:column;position:relative}
.nobridge{padding:80px 30px;text-align:center;color:#666}.nb-logo{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:var(--red);color:#fff;font-size:34px;line-height:72px}.nobridge h2{margin-bottom:10px;color:#222}
/* 顶栏 */
.topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;height:52px;padding:env(safe-area-inset-top) 6px 0;color:#fff}
.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.topbar-title{flex:1;min-width:0;padding-left:8px}.brand{font-size:11px;opacity:.75}.path{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner{position:relative;z-index:6;margin:60px 12px -48px;padding:12px 14px;background:#fff;border-radius:12px;display:flex;gap:10px;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.banner p{font-size:12px;color:var(--sub);margin-top:3px}.banner.warn{color:#b35a00;font-size:13px}
.banner+.banner{margin-top:56px}
.btn-primary{flex:none;background:var(--red);color:#fff;border-radius:18px;padding:8px 16px;font-size:13px}
/* 浏览 */
.browse{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:80px}
.pl-head{position:relative;padding:calc(64px + env(safe-area-inset-top)) 16px 40px;color:#fff;overflow:hidden}
.pl-head-bg{position:absolute;inset:-40px;filter:blur(30px) brightness(.7);transform:scale(1.2)}
.pl-head::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.35))}
.pl-head-row{position:relative;z-index:1;display:flex;gap:14px;align-items:center}
.pl-cover,.folder-cover,.disc-inner,.mini-cover{background-size:cover!important;background-position:center!important}
.has-img{font-size:0!important;color:transparent!important}
.pl-cover{width:112px;height:112px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.pl-name{font-size:18px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pl-desc{margin-top:10px;font-size:12px;opacity:.75}
.sheet-body{position:relative;z-index:2;margin-top:-20px;background:#fff;border-radius:18px 18px 0 0;min-height:60vh;padding-top:8px}
.section-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 4px}.section-head h2{font-size:16px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;padding:8px 16px 10px}
.folder-card{text-align:left;min-width:0}
.folder-cover{position:relative;aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:700;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.folder-cover::before{content:"";position:absolute;left:8%;right:8%;top:-4px;height:8px;border-radius:6px;background:rgba(0,0,0,.08)}
.play-all{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:0}
.play-all svg{width:14px;height:14px;pointer-events:none}
.folder-name{margin-top:6px;font-size:13px;line-height:1.35;color:#333;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.playall-bar{position:sticky;top:0;z-index:3;background:#fff;padding:6px 10px}
.playall{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;padding:8px 6px}
.playall em{font-style:normal;font-size:13px;color:var(--sub);font-weight:400}
.pa-ic{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center}.pa-ic svg{width:14px;height:14px}
.track{width:100%;display:flex;align-items:center;text-align:left;padding:0 6px 0 0;height:60px}
.track-idx{width:52px;flex:none;text-align:center;color:#999;font-size:16px}
.track-body{flex:1;min-width:0}
.track-name{font-size:15px;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-meta{margin-top:4px;font-size:11.5px;color:#999;display:flex;align-items:center;gap:5px}
.tag{font-size:9px;color:var(--red);border:1px solid rgba(252,61,73,.6);border-radius:3px;padding:0 3px;line-height:13px}
.track-more{width:40px;color:#bbb;display:flex;justify-content:center}.track-more svg{width:20px}
.track.active .track-name,.track.active .track-idx{color:var(--red)}
.track.active .track-idx{font-size:0}.track.active .track-idx::after{content:"";display:inline-block;width:14px;height:14px;background:linear-gradient(var(--red),var(--red)) 0 100%/3px 60% no-repeat,linear-gradient(var(--red),var(--red)) 50% 100%/3px 100% no-repeat,linear-gradient(var(--red),var(--red)) 100% 100%/3px 40% no-repeat}
.empty{padding:50px;text-align:center;color:#aaa}
.loading{display:none;padding:30px;text-align:center;color:#999;font-size:13px}.loading.on{display:block}
.loading i{display:inline-block;width:3px;height:12px;margin:0 1px;background:var(--red);animation:eq .8s infinite ease-in-out}.loading i:nth-child(2){animation-delay:.2s}.loading i:nth-child(3){animation-delay:.4s}
@keyframes eq{50%{transform:scaleY(.3)}}
/* 播放页 */
.player-view{position:fixed;inset:0;z-index:20;color:#fff;display:flex;flex-direction:column;background:#222;overflow:hidden;animation:up .28s ease}
@keyframes up{from{transform:translateY(100%)}}
.player-bg{position:absolute;inset:-60px;background:#333;background-size:cover!important;filter:blur(40px) brightness(.55) saturate(1.2);transform:scale(1.3)}
.player-view::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.1) 40%,rgba(0,0,0,.45));z-index:0}
.player-view>*:not(.player-bg){position:relative;z-index:1}
.player-top{display:flex;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 6px 0;height:60px}
.player-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center}.player-close svg{width:28px;height:28px}
.pt-spacer{width:44px}
.player-meta{flex:1;min-width:0;text-align:center}
.player-meta h1{font-size:17px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-meta p{font-size:12px;opacity:.6;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-wrap{flex:1;position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:90px;min-height:0}
.disc{width:min(78vw,320px);aspect-ratio:1;border-radius:50%;padding:7px;background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(255,255,255,.06);animation:spin 22s linear infinite;animation-play-state:paused}
.disc::before{content:"";position:absolute;inset:7px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 1px,#1c1c1c 1.6px 2.6px),#151515}
.disc{position:relative}
.disc::after{content:"";position:absolute;inset:7px;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 10%,rgba(255,255,255,.08) 15%,transparent 22% 55%,rgba(255,255,255,.07) 62%,transparent 70%)}
.disc.spinning{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.disc-inner{position:absolute;inset:18%;z-index:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;color:#fff;box-shadow:0 0 0 4px #0d0d0d}
.needle{position:absolute;top:0;left:50%;margin-left:-16px;width:100px;height:180px;z-index:3;transform-origin:18px 18px;transform:rotate(-28deg);transition:transform .45s ease;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.needle svg{width:100%;height:100%;stroke:none}
.needle.on{transform:rotate(0)}
.act-row{display:flex;justify-content:space-around;padding:0 24px 18px}
.act{width:44px;height:44px;display:flex;align-items:center;justify-content:center;opacity:.9}
.act.rate{font-size:12px;border:1.5px solid rgba(255,255,255,.85);border-radius:7px;width:auto;height:22px;padding:0 5px;margin-top:11px}
.act.liked{color:var(--red)}.act.liked svg{fill:var(--red);stroke:var(--red)}
.seek{display:flex;align-items:center;gap:10px;padding:0 20px;font-size:11px;color:rgba(255,255,255,.6)}
.seek span{width:34px;text-align:center}
#seekBar{flex:1;-webkit-appearance:none;appearance:none;height:2px;background:rgba(255,255,255,.25);border-radius:2px;outline:none}
#seekBar::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.controls{display:flex;align-items:center;justify-content:space-around;padding:18px 14px calc(26px + env(safe-area-inset-bottom))}
.ctrl{width:52px;height:52px;display:flex;align-items:center;justify-content:center}.ctrl svg{width:26px;height:26px}
#btnPrev svg,#btnNext svg{width:30px;height:30px}
.ctrl.play{width:68px;height:68px;border:1.8px solid rgba(255,255,255,.9);border-radius:50%}.ctrl.play svg{width:30px;height:30px}
.queue-hint{position:absolute!important;bottom:4px;left:0;right:0;text-align:center;font-size:10px;opacity:.35}
/* 迷你条 */
.mini{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;height:calc(60px + env(safe-area-inset-bottom));padding:0 8px env(safe-area-inset-bottom) 14px;background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.04)}
.mini-disc{width:46px;height:46px;flex:none;margin-top:-14px;border-radius:50%;padding:7px;background:repeating-radial-gradient(circle,#111 0 1px,#222 1.5px 2.5px);box-shadow:0 2px 6px rgba(0,0,0,.25);animation:spin 12s linear infinite;animation-play-state:paused}
.mini.playing .mini-disc{animation-play-state:running}
.mini-cover{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.mini-info{flex:1;min-width:0;padding:0 12px}
.mini-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-sub{font-size:11px;color:#999;margin-top:2px}
.mini-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#333;position:relative}
.mini-btn.ring>svg:last-child{width:14px;height:14px}
.ring-svg{position:absolute;inset:4px;width:32px!important;height:32px!important;transform:rotate(-90deg)}
.ring-bg{stroke:#ddd;stroke-width:1.6}.ring-fg{stroke:#333;stroke-width:1.8;stroke-dasharray:100.5;transition:stroke-dashoffset .4s linear}
/* 菜单 */
.mask{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.45);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;background:#fff;border-radius:18px 18px 0 0;padding:8px 0 calc(10px + env(safe-area-inset-bottom));animation:up .25s ease}
.sheet-grip{width:36px;height:4px;border-radius:2px;background:#ddd;margin:2px auto 10px}
.sheet h3{font-size:15px;padding:4px 20px 8px;color:#333}
.sheet-item{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:14px 20px;font-size:15px;color:#222}
.sheet-item svg{width:22px;height:22px;color:#555}
.sheet-item.danger{justify-content:center;color:#999;border-top:8px solid #f5f5f5;margin-top:6px}
.sheet-note{font-size:11px;color:#aaa;padding:6px 20px}

/* 定时关闭 */
.act{position:relative}.act.on{color:#ffd36b}
.sleep-dot{position:absolute;top:9px;right:9px;width:6px;height:6px;border-radius:50%;background:#ffd36b}
.sleep-badge{text-align:center;font-size:12px;color:#ffd36b;margin:-8px 0 10px;letter-spacing:.5px}
.sheet-val{margin-left:auto;font-style:normal;font-size:13px;color:var(--red)}
.sleep-left{font-size:12px;font-weight:400;color:var(--red);margin-left:6px}
.sleep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px 20px 4px}
.chip{height:40px;border-radius:20px;background:#f4f4f6;font-size:14px;color:#333}.chip:active{background:#ffe3e5;color:var(--red)}
.chip.wide{grid-column:span 3}
.sleep-custom{display:flex;gap:10px;padding:12px 20px 6px}
.sleep-custom input{flex:1;height:40px;border-radius:20px;border:1px solid #e5e5e5;padding:0 16px;font-size:14px;outline:none;background:#fafafa}
