*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#0a0a14;color:#fff}
body{display:flex;flex-direction:column;position:relative;height:100vh;}

.bg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;filter:blur(40px) brightness(.55) saturate(1.3);transform:scale(1.2);transition:background-image .6s ease,opacity .6s ease;opacity:0}
.bg.show{opacity:1}
.bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0,rgba(0,0,0,.55) 100%)}

.top-nav{position:fixed;top:0;left:0;right:0;height:54px;background:rgba(255,255,255,.12);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;padding:0 12px;z-index:100;box-shadow:0 1px 8px rgba(0,0,0,.15)}
.site-info{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 4px;text-align:center;min-width:0}
.site-name{font-size:20px;font-weight:700;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.site-saying{font-size:11px;color:rgba(255,255,255,.85);line-height:1.2;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;text-shadow:0 1px 4px rgba(0,0,0,.3)}

.top-download{background:none;border:none;cursor:pointer;padding:8px;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:40px;height:40px;transition:background .2s;margin-left:auto}
.top-download:active{background:rgba(255,255,255,.15)}
.top-download svg{width:22px;height:22px}

.main{flex:1;margin-top:54px;margin-bottom:60px;overflow-y:auto;padding:24px 16px 100px;position:relative;z-index:1;-webkit-overflow-scrolling:touch;}

.player{display:flex;flex-direction:column;align-items:center;padding-top:12px;position:relative}
.cover-wrap{position:relative;margin-bottom:24px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cover-wrap:active .cover{transform:scale(.98)}
.cover{width:260px;height:260px;border-radius:50%;background:linear-gradient(135deg,rgba(106,137,204,.6),rgba(164,176,230,.6));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:80px;overflow:hidden;animation:spin 24s linear infinite;animation-play-state:paused;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.cover.playing{animation-play-state:running}
.cover img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.cover.no-img{background:linear-gradient(135deg,#6a89cc,#a4b0e6)}
.cover.no-img .placeholder{display:flex}
.placeholder{display:none;z-index:1}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.track-info{text-align:center;margin-bottom:18px;width:100%}
.track-title{font-size:22px;font-weight:700;color:#fff;margin-bottom:6px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.track-artist{font-size:14px;color:rgba(255,255,255,.8);text-shadow:0 1px 4px rgba(0,0,0,.4)}

.progress-row{display:flex;align-items:center;gap:10px;margin-bottom:20px;width:100%;max-width:400px;position:relative}
.progress-row span{font-size:11px;color:rgba(255,255,255,.7);min-width:36px;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.progress{flex:1;height:4px;background:rgba(255,255,255,.25);border-radius:2px;cursor:pointer;position:relative}
.progress:hover{height:6px}
.progress-bar{height:100%;background:linear-gradient(to right,#a4b0e6,#fff);border-radius:2px;width:0%;transition:width .1s linear;box-shadow:0 0 8px rgba(164,176,230,.5);pointer-events:none}
.progress-thumb{position:absolute;top:50%;width:12px;height:12px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.4);left:0;opacity:0;transition:opacity .2s;pointer-events:none}
.progress:hover .progress-thumb{opacity:1}
.bubble{position:absolute;bottom:24px;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:4px 10px;border-radius:6px;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);z-index:10}
.bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:rgba(0,0,0,.78)}
.bubble.show{opacity:1}

.controls{display:flex;justify-content:center;align-items:center;gap:20px}
.ctrl-btn{background:none;border:none;cursor:pointer;padding:8px;color:#fff;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.ctrl-btn:active{transform:scale(.92)}
.ctrl-btn.play{width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.95);color:#6a89cc;box-shadow:0 6px 20px rgba(0,0,0,.3);filter:none}
.ctrl-btn svg{width:28px;height:28px;display:block}
.ctrl-btn.play svg{width:32px;height:32px}
.ctrl-btn.lyric-btn-nav{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:20px;color:#fff;font-size:13px;font-weight:600;width:auto;height:36px;padding:0 14px;letter-spacing:2px;filter:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);align-items:center;justify-content:center}
.ctrl-btn.lyric-btn-nav:active{background:rgba(255,255,255,.25)}
.ctrl-btn.active{color:#a4b0e6}

.section-title{font-size:15px;font-weight:600;color:rgba(255,255,255,.9);padding:0 4px 10px;display:flex;justify-content:space-between;align-items:center;margin-top:24px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.section-title .badge{font-size:11px;color:rgba(255,255,255,.6);font-weight:400}
.song-list{background:rgba(255,255,255,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.song-item{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;gap:12px;transition:background .15s}
.song-item:last-child{border-bottom:none}
.song-item:active{background:rgba(255,255,255,.1)}
.song-item.active{background:rgba(106,137,204,.25);color:#fff}
.song-item .idx{width:24px;text-align:center;font-size:13px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.song-item.active .idx{color:#fff;font-weight:700}
.song-item .meta{flex:1;min-width:0}
.song-item .name{font-size:14px;font-weight:500;color:rgba(255,255,255,.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-item.active .name{color:#fff}
.song-item .artist{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loading,.error{padding:40px 20px;text-align:center;color:rgba(255,255,255,.5);font-size:14px}

.fav-btn{background:none;border:none;color:rgba(255,255,255,.4);padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fav-btn svg{width:20px;height:20px}
.fav-btn.faved{color:#ff6b81}
.fav-btn.faved svg{fill:#ff6b81}

.view-full{position:absolute;inset:0;z-index:5;background:#0a0a14;display:none;}
.view-full.active{display:block;}
.view-full iframe{width:100%;height:100%;border:none;display:block;background:#0a0a14;}

.lyric-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.lyric-overlay.show{opacity:1;visibility:visible}
.lyric-overlay-header{height:54px;display:flex;align-items:center;padding:0 12px;flex-shrink:0;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1);position:relative}
.lyric-overlay-header .title{flex:1;text-align:center;font-size:16px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 12px}
.lyric-overlay-header .badge{position:absolute;right:16px;font-size:11px;color:rgba(255,255,255,.5);font-weight:400}
.lyric-overlay-header .close-btn{position:absolute;left:12px;background:none;border:none;cursor:pointer;padding:8px;color:#fff;display:flex;align-items:center;justify-content:center}
.lyric-overlay-header .close-btn svg{width:24px;height:24px}
.lyric-overlay-body{flex:1;overflow:hidden;position:relative}
.lyric-overlay-scroll{position:absolute;inset:0;overflow-y:auto;padding:18vh 24px 40vh;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lyric-overlay-scroll::-webkit-scrollbar{display:none}
.lyric-line{text-align:center;font-size:16px;line-height:2.2;color:rgba(255,255,255,.45);transition:color .6s ease,transform .8s ease,font-size .4s ease,opacity .6s ease,filter .6s ease;opacity:.85;padding:6px 0;word-wrap:break-word;transform:translateY(0)}
.lyric-line.prev{opacity:.3;color:rgba(255,255,255,.3);transform:translateY(3px) scale(.98)}
.lyric-line.active{color:#fff;font-weight:600;font-size:20px;opacity:1;transform:translateY(-8px);text-shadow:0 0 20px rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.3)}
.lyric-line.translate{font-size:13px;color:rgba(255,255,255,.35);opacity:.7;line-height:1.8}
.lyric-line.translate.active{color:rgba(255,255,255,.8);font-size:14px;opacity:1;transform:translateY(-4px)}
.lyric-word{color:rgba(255,255,255,.4);display:inline;transition:color .3s ease}
.lyric-word.past{color:#fff}
.lyric-empty,.lyric-loading{text-align:center;color:rgba(255,255,255,.4);font-size:14px;padding:40px 0}
.lyric-progress-row{padding:18px 20px 28px;display:flex;align-items:center;gap:10px;flex-shrink:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);position:relative;z-index:5}
.lyric-progress-row span{font-size:12px;color:rgba(255,255,255,.85);min-width:38px;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.lyric-progress-wrap{flex:1;position:relative;height:24px;display:flex;align-items:center;cursor:pointer}
.lyric-progress-track{width:100%;height:6px;background:rgba(255,255,255,.25);border-radius:3px;position:relative;overflow:visible}
.lyric-progress-bar{position:absolute;left:0;top:0;height:100%;background:linear-gradient(to right,#a4b0e6,#fff);border-radius:3px;width:0%;transition:width .1s linear;box-shadow:0 0 10px rgba(164,176,230,.7)}
.lyric-progress-thumb{position:absolute;top:50%;width:14px;height:14px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.5);left:0;opacity:0;transition:opacity .2s;pointer-events:none}
.lyric-progress-wrap:hover .lyric-progress-thumb{opacity:1}
.lyric-bubble{position:absolute;bottom:24px;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:4px 10px;border-radius:6px;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);z-index:10}
.lyric-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:rgba(0,0,0,.78)}
.lyric-bubble.show{opacity:1}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:60px;background:rgba(20,20,30,.95);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-around;align-items:center;z-index:100;box-shadow:0 -2px 12px rgba(0,0,0,.3);}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:100%;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.6);padding:8px;transition:all .2s;border-radius:8px;}
.bottom-nav-item:active{background:rgba(255,255,255,.1);transform:scale(.95);}
.bottom-nav-item.active{color:#a4b0e6;}
.bottom-nav-item svg{width:24px;height:24px;margin-bottom:2px;}
.bottom-nav-item span{font-size:11px;font-weight:500;}

@media(max-width:480px){
  .cover{width:220px;height:220px;font-size:64px}
  .top-nav{height:48px}
  .main{margin-top:48px;margin-bottom:56px;padding:20px 14px 100px;}
  .site-name{font-size:17px}
  .lyric-line{font-size:15px}
  .lyric-line.active{font-size:18px}
  .bottom-nav{height:56px;}
}