:root{
    --bg:#080b14;
    --card:rgba(20,26,42,.72);
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.16);
    --txt:#eaf0ff;
    --txt2:#9aa7c2;
    --txt3:#66718c;
    --accent:#4ea1ff;
    --grad:linear-gradient(120deg,#4ea1ff,#7d5cff 55%,#25e6c8);
    --danger:#ff6b81;
    --r:18px;
    --shadow:0 18px 50px rgba(0,0,0,.45);
    --mini-h:56px;
    --topbar-h:70px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
    font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--txt); background:var(--bg); min-height:100vh; overflow-x:hidden;
    padding-bottom:env(safe-area-inset-bottom);
}
body::before,body::after{
    content:""; position:fixed; border-radius:50%; filter:blur(110px); opacity:.35; z-index:-2; pointer-events:none;
}
body::before{ width:520px; height:520px; background:#2f6bff; top:-160px; left:-120px; }
body::after{ width:460px; height:460px; background:#8040ff; bottom:-180px; right:-120px; }
.grain{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
            radial-gradient(circle at 78% 12%, rgba(37,230,200,.10), transparent 45%),
            radial-gradient(circle at 12% 82%, rgba(125,92,255,.14), transparent 45%);
}
.app{ max-width:1180px; margin:0 auto;}

/* ================= 顶栏 ================= */
.topbar{
    display:flex; align-items:center; gap:16px; margin-bottom:14px;
    position:sticky; top:0; z-index:70; padding:12px 0;
    backdrop-filter:blur(14px); transition:top .22s ease;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo{
    width:34px; height:34px; border-radius:11px; background:var(--grad);
    display:grid; place-items:center; box-shadow:0 6px 20px rgba(78,161,255,.4);
}
.logo svg{ width:19px; height:19px; color:#08101f; }
.brand-name{ font-size:17px; font-weight:700; letter-spacing:.5px; white-space:nowrap; }
.brand-name span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-name em{ font-style:normal; color:var(--txt3); font-size:12px; margin-left:6px; font-weight:400; }
.search-wrap{ flex:1; position:relative; display:flex; align-items:center; min-width:0; }
.search-ico{ position:absolute; left:16px; color:var(--txt3); pointer-events:none; display:flex; }
.search-wrap input{
    width:100%; height:46px; border-radius:23px; border:1px solid var(--line);
    background:rgba(255,255,255,.045); color:var(--txt); padding:0 56px 0 46px;
    font-size:15px; outline:none; transition:.25s; backdrop-filter:blur(8px);
}
.search-wrap input::placeholder{ color:var(--txt3); }
.search-wrap input:focus{
    border-color:rgba(78,161,255,.6); background:rgba(78,161,255,.07);
    box-shadow:0 0 0 4px rgba(78,161,255,.12),0 0 26px rgba(78,161,255,.22);
}
.search-go{
    position:absolute; right:6px; width:36px; height:36px; border-radius:50%;
    border:none; background:var(--grad); color:#08101f; cursor:pointer;
    display:grid; place-items:center; transition:.2s; flex-shrink:0;
}
.search-go:hover{ transform:scale(1.06); box-shadow:0 6px 18px rgba(78,161,255,.45); }
.search-go:disabled{ opacity:.5; cursor:default; transform:none; }
.suggest{
    position:absolute; top:54px; left:0; right:0; z-index:80;
    background:rgba(16,21,35,.96); border:1px solid var(--line-strong);
    border-radius:16px; box-shadow:var(--shadow); backdrop-filter:blur(18px);
    padding:6px; display:none; max-height:340px; overflow:auto;
}
.suggest.show{ display:block; }
.s-item{
    display:flex; justify-content:space-between; gap:12px; align-items:center;
    padding:11px 14px; border-radius:10px; font-size:14px; cursor:pointer; color:var(--txt2);
}
.s-item:hover{ background:rgba(78,161,255,.14); color:var(--txt); }
.s-item b{ color:var(--accent); font-weight:600; }
.s-item i{ font-style:normal; font-size:12px; color:var(--txt3); flex-shrink:0; }

/* ================= 吸顶控制台（移动端：进度/时间/控制/音量/顺序） ================= */
.miniplayer{
    position:fixed; top:0; left:0; right:0; z-index:90; display:none;
    flex-direction:column; gap:7px; padding:9px 12px 10px;
    background:rgba(11,15,26,.95); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line-strong);
    transform:translateY(-101%); opacity:0;
    transition:transform .26s ease, opacity .26s ease;
    box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.miniplayer.show{ transform:translateY(0); opacity:1; }
.mp-row{ display:flex; align-items:center; gap:9px; }
.mp-cover{
    width:34px; height:34px; border-radius:9px; overflow:hidden; flex-shrink:0;
    background:linear-gradient(150deg,#1b2237,#101524);
}
.mp-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.mp-body{ flex:1; min-width:55px; cursor:pointer; overflow:hidden; }
.mp-title{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-artist{ font-size:11px; color:var(--txt2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-btn{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
    background:rgba(255,255,255,.06); color:var(--txt); display:grid; place-items:center;
    cursor:pointer; flex-shrink:0; transition:.2s; padding:0;
}
.mp-btn:active{ transform:scale(.92); }
.mp-btn.main{ background:var(--grad); color:#08101f; border:none; box-shadow:0 6px 16px rgba(78,161,255,.4); }
.mp-btn.small{ width:28px; height:28px; }
.mp-time{
    font-size:11px; color:var(--txt2); flex-shrink:0; font-variant-numeric:tabular-nums;
    min-width:34px; text-align:center;
}
.mp-time.now{ color:var(--accent); font-weight:600; }
.mp-bar{ flex:1; height:5px; min-width:50px; background:rgba(255,255,255,.12); }
.mp-vol{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.mp-vol input{ width:52px; accent-color:var(--accent); cursor:pointer; }

/* ================= 布局 ================= */
.layout{ display:grid; grid-template-columns:390px minmax(0,1fr); gap:20px; align-items:start; }
/* PC：整体铺满视口高度，列表内滚，不出页面滚动条 */
@media (min-width:1001px){
    .app{ height:100vh; padding:16px 20px 18px; display:flex; flex-direction:column; }
    .layout{ flex:1; min-height:0; align-items:stretch; }
    .player{ position:static; height:100%; overflow-y:auto; overflow-x:hidden; }
    /* 封面自适应缩小，保证整个播放器（信息/歌词/进度/控制）一屏显示 */
    .cover-stage{ max-width:clamp(130px, calc(100vh - 478px), 100%); margin:0 auto 12px; }
    .content{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
    .notice, .tabs{ flex-shrink:0; }
    .panel.show{ flex:1; min-height:140px; }
}

/* ================= 播放器 ================= */
.player{
    position:sticky; top:82px; border-radius:var(--r); padding:22px;
    background:linear-gradient(160deg,rgba(30,38,60,.85),rgba(16,21,35,.9));
    border:1px solid var(--line); box-shadow:var(--shadow);
    backdrop-filter:blur(20px);
}
.cover-stage{ position:relative; width:60%; aspect-ratio:1/1; margin-bottom:20px; }
.cover-ring{
    position:absolute; inset:-10px; border-radius:28px; opacity:0; transition:opacity .4s;
    background:conic-gradient(from 0deg,#4ea1ff,#7d5cff,#25e6c8,#4ea1ff); filter:blur(16px);
}
body.playing .cover-ring{ opacity:.55; animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.cover{
    position:relative; width:100%; height:100%; border-radius:20px; overflow:hidden;
    background:linear-gradient(150deg,#1b2237,#101524); cursor:pointer;
    box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.cover-mask{
    position:absolute; inset:0; display:grid; place-items:center;
    background:radial-gradient(circle at 50% 50%,rgba(5,8,16,.55),rgba(5,8,16,.15));
    opacity:0; transition:.25s;
}
.cover:hover .cover-mask{ opacity:1; }
.cover-mask .disc{
    width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
    backdrop-filter:blur(6px); color:#fff;
}
.stage-entry{
    position:absolute; top:12px; right:12px; z-index:3;
    display:flex; align-items:center; gap:6px; padding:7px 12px;
    border-radius:20px; border:1px solid rgba(255,255,255,.24);
    background:rgba(8,12,22,.55); backdrop-filter:blur(10px);
    color:#eaf6ff; font-size:12px; cursor:pointer; transition:.22s;
}
.stage-entry:hover{ background:rgba(78,161,255,.35); box-shadow:0 0 20px rgba(78,161,255,.5); transform:translateY(-1px); }
.stage-entry svg{ width:14px; height:14px; }
.eq{ position:absolute; left:14px; bottom:12px; display:none; gap:3px; align-items:flex-end; height:20px; }
body.playing .eq{ display:flex; }
.eq span{ width:3px; border-radius:2px; background:linear-gradient(180deg,#25e6c8,#4ea1ff); animation:eq .9s ease-in-out infinite; }
.eq span:nth-child(1){ height:30%; animation-delay:-.2s }
.eq span:nth-child(2){ height:80%; animation-delay:-.5s }
.eq span:nth-child(3){ height:50%; animation-delay:-.8s }
.eq span:nth-child(4){ height:95%; animation-delay:-.35s }
.eq span:nth-child(5){ height:40%; animation-delay:-.65s }
@keyframes eq{ 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(1) } }

.info{ margin-bottom:6px; }
.title{ font-size:20px; font-weight:700; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.title .alias{ color:var(--txt3); font-size:13px; font-weight:400; }
.artist{ font-size:13.5px; color:var(--txt2); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 播放卡 6 行歌词 */
.lyric{ display:flex; flex-direction:column; justify-content:center; gap:3px; margin:12px 0 2px; height:138px; overflow:hidden; }
.ly-line{
    font-size:12.5px; color:var(--txt3); line-height:20px; height:20px; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.6;
    transition:color .25s, opacity .25s, font-size .25s, line-height .25s;
}
.ly-line.near{ color:var(--txt2); opacity:.85; }
.ly-line.cur{ font-size:14.5px; line-height:23px; height:23px; color:var(--accent); font-weight:600; opacity:1; }

.progress{ padding:8px 0 2px; }
.bar{ position:relative; height:6px; border-radius:4px; cursor:pointer; background:rgba(255,255,255,.1); }
.bar::before{ content:""; position:absolute; left:0; right:0; top:-9px; bottom:-9px; }
.bar-fill{
    position:absolute; left:0; top:0; bottom:0; width:0; border-radius:4px;
    background:var(--grad); box-shadow:0 0 14px rgba(78,161,255,.6);
}
.bar-fill::after{
    content:""; position:absolute; right:-7px; top:50%; transform:translateY(-50%) scale(.6);
    width:14px; height:14px; border-radius:50%; background:#fff;
    box-shadow:0 0 12px rgba(78,161,255,.9); opacity:0; transition:.18s;
}
.bar:hover .bar-fill::after,.bar.dragging .bar-fill::after{ opacity:1; transform:translateY(-50%) scale(1); }
.time{
    display:flex; justify-content:space-between; font-size:12px; color:var(--txt3);
    margin-top:9px; font-variant-numeric:tabular-nums; letter-spacing:.4px;
}
.time b{ color:var(--accent); font-weight:600; }

.controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
.c-btn{
    border:none; background:rgba(255,255,255,.06); color:var(--txt2); cursor:pointer;
    width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
    transition:.2s; flex-shrink:0; border:1px solid var(--line);
}
.c-btn:hover{ color:var(--txt); background:rgba(78,161,255,.16); border-color:rgba(78,161,255,.35); }
.c-btn:active{ transform:scale(.94); }
.c-main{
    width:60px; height:60px; border-radius:50%; background:var(--grad); color:#08101f;
    border:none; box-shadow:0 10px 30px rgba(78,161,255,.45);
}
.c-main:hover{ transform:scale(1.05); background:var(--grad); color:#08101f; }
.c-main svg{ width:24px; height:24px; }
.side-ctrl{ display:flex; align-items:center; gap:10px; }
.mode-btn{ width:auto; padding:0 12px; gap:7px; display:flex; align-items:center; font-size:12.5px; white-space:nowrap; }
.mode-btn.act{ animation:pop .45s ease; }
@keyframes pop{ 0%{transform:scale(1)} 40%{transform:scale(1.14)} 100%{transform:scale(1)} }
.vol{ display:flex; align-items:center; }
.vol-slider{ width:0; overflow:hidden; transition:width .28s ease; }
.vol:hover .vol-slider,.vol-slider.open{ width:78px; }
.vol-slider input{ width:74px; margin-left:8px; accent-color:var(--accent); cursor:pointer; }

/* ================= 内容区 ================= */
.content{
    min-width:0; border-radius:var(--r); border:1px solid var(--line);
    background:var(--card); backdrop-filter:blur(18px); box-shadow:var(--shadow);
}
.notice{
    display:flex; align-items:center; gap:10px; padding:9px 14px;
    border-bottom:1px solid var(--line); border-radius:var(--r) var(--r) 0 0; overflow:hidden;
}
.notice-tag{
    flex-shrink:0; font-size:11px; padding:3px 9px; border-radius:20px; color:#08101f;
    background:var(--grad); font-weight:700; letter-spacing:.5px;
}
.notice-view{ flex:1; height:20px; overflow:hidden; position:relative; }
.notice-line{
    font-size:12.5px; color:var(--txt2); line-height:20px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; transition:opacity .35s, transform .35s;
}
.notice-line a{ color:var(--accent); text-decoration:none; border-bottom:1px dashed rgba(78,161,255,.6); }
.notice-line.out{ opacity:0; transform:translateY(-12px); }
.tabs{ display:flex; gap:4px; padding:10px 14px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
    padding:9px 16px; border-radius:12px; font-size:14px; color:var(--txt2);
    cursor:pointer; white-space:nowrap; transition:.2s; user-select:none; border:1px solid transparent;
}
.tab:hover{ color:var(--txt); background:rgba(255,255,255,.05); }
.tab.active{ color:#08101f; background:var(--grad); font-weight:600; box-shadow:0 6px 18px rgba(78,161,255,.35); }
.panel{ display:none; padding:8px 0 14px; min-height:220px; max-height:calc(110vh - 290px); overflow:auto; border-radius:0 0 var(--r) var(--r); }
.panel.show{ display:block; }
/* 空栏目面板：内容框自动铺满面板 */
#panelEmpty.show{ display:flex; flex-direction:column; }
#panelEmpty .empty{
    flex:1; margin:0; display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.panel::-webkit-scrollbar{ width:6px; }
.panel::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }
.view-title{ text-align:center; font-size:13px; color:var(--txt3); letter-spacing:2px; padding:10px 0 8px; }
/* ================= 歌单网格（最新 / 最热 / DJ） ================= */
.pl-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(158px,1fr));
    gap:20px 14px; padding:8px 4px 4px;
}
.pl-card{ cursor:pointer; min-width:0; }
.pl-cover{
    position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden;
    background:linear-gradient(150deg,#1b2237,#101524);
    box-shadow:0 4px 16px rgba(0,0,0,.35); transition:transform .25s, box-shadow .25s;
}
.pl-card:hover .pl-cover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(78,161,255,.28); }
.pl-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.pl-card:hover .pl-cover img{ transform:scale(1.07); }
.pl-cover::after{  /* 底部渐变压暗，承托播放数角标 */
    content:''; position:absolute; left:0; right:0; bottom:0; height:44%;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.55)); pointer-events:none;
}
.pl-cnt{
    position:absolute; left:8px; bottom:7px; z-index:2;
    display:flex; align-items:center; gap:4px;
    font-size:11px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6);
    font-variant-numeric:tabular-nums;
}
.pl-cnt svg{ width:11px; height:11px; }
.pl-name{
    margin-top:8px; font-size:13px; line-height:1.45; color:var(--txt);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pl-card:hover .pl-name{ color:var(--accent); }
@media (max-width:640px){
    .pl-grid{ grid-template-columns:repeat(3,1fr); gap:14px 10px; }
    .pl-cover{ border-radius:11px; }
    .pl-name{ font-size:12px; }
}
.list{ list-style:none; }
.row{
    position:relative; display:flex; align-items:center; gap:12px; padding:11px 16px;
    cursor:pointer; transition:background .18s;
}
.row::before{
    content:""; position:absolute; left:0; top:16%; bottom:16%; width:3px; border-radius:0 3px 3px 0;
    background:var(--grad); opacity:0; transition:.2s;
}
.row:hover{ background:rgba(255,255,255,.045); }
.row:hover::before{ opacity:.6; }
.row.playing{ background:rgba(78,161,255,.1); }
.row.playing::before{ opacity:1; }
.idx{ width:28px; flex-shrink:0; text-align:center; font-size:13px; color:var(--txt3); font-variant-numeric:tabular-nums; }
.row.playing .idx{ color:var(--accent); }
.info-col{ flex:1; min-width:0; }
.nm{ font-size:14.5px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row.playing .nm{ color:var(--accent); font-weight:600; }
.nm .alias{ color:var(--txt3); font-size:12.5px; font-weight:400; }
.meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--txt2); margin-top:4px; white-space:nowrap; }
.meta .a{ overflow:hidden; text-overflow:ellipsis; }
.dur{
    flex-shrink:0; font-size:11.5px; color:var(--txt2); padding:2px 8px; border-radius:20px;
    background:rgba(255,255,255,.06); border:1px solid var(--line); font-variant-numeric:tabular-nums;
}
.mini-eq{ display:none; gap:2px; align-items:flex-end; height:12px; flex-shrink:0; }
.row.playing .mini-eq{ display:flex; }
.mini-eq i{ width:2.5px; border-radius:2px; background:var(--accent); animation:eq .85s ease-in-out infinite; }
.mini-eq i:nth-child(1){ height:40% }
.mini-eq i:nth-child(2){ height:100%; animation-delay:-.4s }
.mini-eq i:nth-child(3){ height:60%; animation-delay:-.7s }
.more{
    width:34px; height:34px; border-radius:10px; border:1px solid transparent; background:none;
    color:var(--txt3); cursor:pointer; display:grid; place-items:center; flex-shrink:0; transition:.2s;
}
.more:hover{ color:var(--accent); background:rgba(78,161,255,.14); border-color:rgba(78,161,255,.3); }
.empty{ text-align:center; color:var(--txt3); padding:52px 20px; font-size:13.5px; line-height:2; }
.empty .big{ font-size:34px; opacity:.5; }
.loadmore{ text-align:center; font-size:12.5px; color:var(--txt3); padding:16px 0 6px; height:44px; }
.loadmore .spin{
    display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:-2px; margin-right:7px;
    border:2px solid rgba(78,161,255,.3); border-top-color:var(--accent); animation:rot .7s linear infinite;
}
@keyframes rot{ to{ transform:rotate(360deg) } }

/* 关于 */
.about{ padding:20px 22px; color:var(--txt2); font-size:13.5px; line-height:2; }
.about h3{
    font-size:14px; color:var(--txt); margin:4px 0 12px; padding-left:10px;
    border-left:3px solid var(--accent); letter-spacing:1px;
}
.about p{ margin-bottom:9px; }
.about .tags{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px; }
.about .tag{ padding:5px 12px; border-radius:20px; font-size:12px; color:var(--txt2); background:rgba(255,255,255,.05); border:1px solid var(--line); }
.reward{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
.reward-card{
    border-radius:14px; padding:12px; display:flex; flex-direction:column; align-items:center; gap:10px;
    border:1px solid var(--line); overflow:hidden;
}
.reward-card.wechat{ background:linear-gradient(160deg,rgba(7,193,96,.22),rgba(7,193,96,.05)); }
.reward-card.ali{ background:linear-gradient(160deg,rgba(22,119,255,.24),rgba(22,119,255,.05)); }
.reward-card .rc-title{ font-size:13px; font-weight:700; color:#fff; }
.reward-card img{
    width:100%; max-width:180px; aspect-ratio:1/1; object-fit:contain; border-radius:10px;
    background:#fff; padding:6px;
}
.reward-card .rc-fail{ font-size:12px; color:var(--txt3); padding:24px 0; }
.reward-card img{ cursor:zoom-in; transition:transform .25s, box-shadow .25s; }
.reward-card img:hover{ transform:scale(1.03); box-shadow:0 8px 24px rgba(0,0,0,.4); }

/* ================= 二维码放大弹窗 ================= */
.lightbox{
    position:fixed; inset:0; z-index:600; display:none;
    align-items:center; justify-content:center; flex-direction:column; gap:14px;
    background:rgba(4,6,14,.86); backdrop-filter:blur(14px);
    padding:24px; cursor:zoom-out;
}
.lightbox.show{ display:flex; animation:lbFade .22s ease; }
@keyframes lbFade{ from{ opacity:0 } to{ opacity:1 } }
.lightbox img{
    max-width:min(84vw,430px); max-height:74vh; width:auto; height:auto;
    border-radius:16px; background:#fff; padding:10px; display:block;
    box-shadow:0 24px 70px rgba(0,0,0,.65);
    animation:lbZoom .26s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes lbZoom{ from{ transform:scale(.86); opacity:0 } to{ transform:scale(1); opacity:1 } }
.lb-title{ font-size:15px; font-weight:700; color:#fff; letter-spacing:1px; }
.lb-tip{ font-size:12.5px; color:var(--txt2); }
.lb-close{
    position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px;
    width:40px; height:40px; border-radius:50%; cursor:pointer;
    display:grid; place-items:center; color:#fff;
    border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08);
    transition:.2s;
}
.lb-close:hover{ background:rgba(255,255,255,.18); transform:rotate(90deg); }
@media (max-width:640px){
    .lightbox img{ max-width:88vw; max-height:66vh; }
}

/* ================= 开发者工具检测遮罩 ================= */
.devmask{
    position:fixed; inset:0; z-index:900; display:none;
    align-items:center; justify-content:center; flex-direction:column; gap:14px;
    background:rgba(4,6,14,.97); text-align:center; padding:32px;
}
.devmask.show{ display:flex; }
.devmask .dm-ico{ font-size:44px; opacity:.85; }
.devmask .dm-title{ font-size:19px; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.devmask .dm-txt{ font-size:13.5px; color:var(--txt2); line-height:1.9; max-width:340px; }
/* 命中检测时同时虚化页面内容 + 阻断交互（遮罩之下不留可读内容） */
html.dev-blocked body{ pointer-events:none; }
html.dev-blocked .app,
html.dev-blocked .miniplayer,
html.dev-blocked .stage,
html.dev-blocked .lightbox{ filter:blur(13px); }
html.dev-blocked .devmask{ pointer-events:auto; }
/* 禁止图片拖拽 / 长按弹出菜单 / 选中 */
img{ -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }

/* ================= 菜单 ================= */
.menu{
    position:fixed; z-index:120; min-width:186px; padding:7px;
    background:rgba(18,23,38,.97); border:1px solid var(--line-strong); border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,.6); backdrop-filter:blur(20px);
    display:none; animation:menuIn .16s ease;
}
.menu.show{ display:block; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-6px) scale(.97) } to{ opacity:1; transform:none } }
.m-item{
    display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px;
    font-size:14px; color:var(--txt2); cursor:pointer; transition:.16s; white-space:nowrap;
}
.m-item:hover{ background:rgba(78,161,255,.16); color:var(--txt); }
.m-item.danger:hover{ background:rgba(255,107,129,.16); color:var(--danger); }
.m-item svg{ flex-shrink:0; }

/* ================= Toast ================= */
.toast{
    position:fixed; left:50%; bottom:34px; transform:translate(-50%,16px);
    padding:11px 24px; border-radius:30px; font-size:13.5px; color:var(--txt);
    background:rgba(18,23,38,.95); border:1px solid var(--line-strong);
    box-shadow:0 12px 34px rgba(0,0,0,.5); backdrop-filter:blur(14px);
    opacity:0; pointer-events:none; transition:.28s; z-index:300; max-width:86vw;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ================= 沉浸式视听舞台 ================= */
.stage{
    position:fixed; inset:0; z-index:400; display:none; background:#04060e; overflow:hidden;
}
.stage.on{ display:block; }
body.stage-on{ overflow:hidden; }
#stageCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.stage-ui{
    position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
    padding:18px 22px calc(16px + env(safe-area-inset-bottom));
    transition:opacity .45s; z-index:2; pointer-events:none;
}
.stage-ui > *{ pointer-events:auto; }
.stage-top{ display:flex; align-items:center; gap:12px; }
.stage-cover{
    width:44px; height:44px; border-radius:11px; overflow:hidden; flex-shrink:0;
    border:1px solid rgba(255,255,255,.2); box-shadow:0 6px 22px rgba(0,0,0,.5);
}
.stage-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.stage-song{ flex:1; min-width:0; }
.stage-title{ font-size:15.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.stage-artist{ font-size:12px; color:#a9b8d6; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stage-btn{
    width:38px; height:38px; border-radius:50%; flex-shrink:0; cursor:pointer;
    border:1px solid rgba(255,255,255,.24); background:rgba(12,18,32,.5);
    color:#eaf6ff; display:grid; place-items:center; backdrop-filter:blur(10px); transition:.2s; padding:0;
}
.stage-btn:hover{ background:rgba(78,161,255,.35); box-shadow:0 0 18px rgba(78,161,255,.5); }
.stage-btn:active{ transform:scale(.93); }
.stage-btn.main{ width:54px; height:54px; background:var(--grad); color:#08101f; border:none; box-shadow:0 8px 26px rgba(78,161,255,.5); }
.stage-btn:disabled{ opacity:.4; cursor:default; }

/* 四种视觉模式切换 */
.stage-modes{
    display:flex; gap:6px; padding:5px; border-radius:30px; margin:0 auto;
    background:rgba(12,18,32,.55); border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(12px); width:fit-content; max-width:100%; overflow-x:auto;
}
.stage-mode{
    padding:6px 13px; border-radius:20px; border:none; background:none; cursor:pointer;
    font-size:12px; color:#a9b8d6; white-space:nowrap; transition:.2s; font-family:inherit;
}
.stage-mode:hover{ color:#fff; background:rgba(255,255,255,.08); }
.stage-mode.on{ color:#08101f; background:var(--grad); font-weight:700; box-shadow:0 4px 14px rgba(78,161,255,.4); }

/* 14 行歌词（上下渐隐遮罩） */
.stage-lyric{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(88vw,800px); max-height:58vh; overflow:hidden; text-align:center; z-index:2;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
.sl-line{
    font-size:13px; color:rgba(188,203,228,.34); line-height:1.72;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color .25s, opacity .25s;
}
.sl-line.near{ color:rgba(200,214,236,.6); }
.sl-line.cur{
    font-size:20px; font-weight:700; color:#fff; line-height:1.65;
    text-shadow:0 0 22px rgba(78,161,255,.9),0 0 52px rgba(125,92,255,.65);
}
.stage-bottom{ display:flex; flex-direction:column; gap:11px; }
.stage-progress{ display:flex; align-items:center; gap:12px; font-size:12px; color:#a9b8d6; font-variant-numeric:tabular-nums; }
.stage-progress .bar{ flex:1; background:rgba(255,255,255,.14); }
.stage-controls{ display:flex; align-items:center; justify-content:center; gap:12px; }
.stage-side{ display:flex; align-items:center; gap:8px; }
.stage-vol{ display:flex; align-items:center; gap:6px; padding:0 6px; }
.stage-vol input{ width:80px; accent-color:var(--accent); }

/* ================= 响应式 ================= */
@media (max-width:1000px){
    .layout{ grid-template-columns:1fr; gap:16px; }
    .player{ position:static; }
    .app{ padding-bottom:0; }   /* 面板已按视口剩余空间定高，去掉底部留白避免不铺满 */
    /* 移动端吸顶层不透明，避免内容透出造成"布局错乱"观感 */
    .topbar{ background:rgba(8,11,20,.96); }
    .cover-stage{ max-width:300px; margin:0 auto 18px; }
    .panel{ max-height:none; }
    .miniplayer{ display:flex; }
    /* 移动端吸顶群组：吸顶控制台 → 搜索框 → Tab 选项 → 列表内容（偏移均为实测变量） */
    body.mini-on .topbar{ top:var(--mini-h); }
    .tabs{
        position:sticky; top:var(--topbar-h,70px); z-index:60;
        background:rgba(13,18,30,.95); backdrop-filter:blur(18px); transition:top .22s ease;
    }
    body.mini-on .tabs{ top:calc(var(--mini-h) + var(--topbar-h,70px)); }
}
@media (max-width:640px){
    .app{ padding:0px; }
    .topbar{ gap:10px; margin-bottom:10px; padding:10px 0; }
    .brand-name em{ display:none; }
    .player{ padding:16px; border-radius:16px; }
    .cover-stage{ max-width:228px; margin-bottom:14px; }
    .title{ font-size:17.5px; text-align:center; }
    .artist{ text-align:center; font-size:13px; }
    .lyric{ text-align:center; min-height:42px; margin:10px 0 2px; }
    .controls{ margin-top:14px; gap:8px; }
    .c-btn{ width:42px; height:42px; border-radius:13px; }
    .c-main{ width:56px; height:56px; }
    .mode-btn{ padding:0 9px; }
    .mode-btn .mode-txt{ display:none; }
    .vol-slider{ width:62px; }
    .vol-slider input{ width:56px; margin-left:6px; }
    .vol:hover .vol-slider{ width:62px; }
    .content{ border-radius:16px; }
    .notice{ padding:8px 12px; }
    .row{ padding:11px 12px; gap:9px; }
    .more{ width:32px; height:32px; }
    .menu{ min-width:200px; }
    .m-item{ padding:13px 14px; font-size:14.5px; }
    .toast{ bottom:22px; }
    .reward{ gap:10px; }
    /* 吸顶控制台更紧凑，减少占屏 */
    .miniplayer{ padding:7px 10px 8px; gap:6px; }
    .mp-cover{ width:30px; height:30px; border-radius:8px; }
    .mp-title{ font-size:12.5px; }
    .mp-artist{ font-size:10.5px; }
    .tabs{ padding:8px 12px; }
    .tab{ padding:8px 13px; font-size:13.5px; }
    .stage-ui{ padding:12px 12px calc(12px + env(safe-area-inset-bottom)); }
    .stage-title{ font-size:14px; }
    .stage-lyric{ width:94vw; max-height:52vh; }
    .sl-line.cur{ font-size:17px; }
    .sl-line{ font-size:11.5px; line-height:1.7; }
    .stage-modes{ gap:4px; padding:4px; }
    .stage-mode{ padding:5px 10px; font-size:11px; }
    .stage-controls{ gap:8px; }
    .stage-btn{ width:36px; height:36px; }
    .stage-btn.main{ width:50px; height:50px; }
    .stage-vol input{ width:56px; }
    .stage-cover{ width:38px; height:38px; }
    .mp-vol input{ width:46px; }
    .stage-entry{ padding:6px 10px; font-size:11px; }
}
@media (max-width:420px){
    .mp-vol input{ display:none; }
    .stage-mode{ padding:5px 8px; font-size:10.5px; }
}
@media (hover:none){
    .cover-mask{ opacity:1; background:radial-gradient(circle at 50% 50%,rgba(5,8,16,.45),rgba(5,8,16,.05)); }
    .vol-slider{ width:62px; }
}