:root{
  --ink:#faf6f0; --ink-2:#ffffff; --ink-3:#f4ede3; --ink-4:#e9dfd2;
  --line:rgba(190,150,120,.18); --line-2:rgba(190,150,120,.32);
  --text:#44382c; --muted:#97887a; --muted-2:#b8aa99;
  --amber:#d9a05b; --coral:#e86a8a; --mint:#6fbf9e;
  --grad:linear-gradient(100deg,var(--amber),var(--coral));
  --player-h:88px;
  --font-d:'Space Grotesk',sans-serif;
  --font-b:'Inter',sans-serif;
  --font-m:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-b); color:var(--text); background:var(--ink);
  -webkit-font-smoothing:antialiased; overflow:hidden;
  background-image:
    radial-gradient(900px 500px at 78% -8%, rgba(232,106,138,.10), transparent 60%),
    radial-gradient(800px 600px at 0% 0%, rgba(217,160,91,.09), transparent 55%);
}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.02;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
[hidden]{display:none!important}

/* ---------- layout shell ---------- */
body{display:grid;grid-template-rows:auto auto 1fr var(--player-h);height:100vh}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:28px;padding:18px 30px 14px;position:relative;z-index:3}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand-mark{display:flex;align-items:flex-end;gap:3px;height:30px;width:34px}
.brand-mark span{flex:1;background:var(--grad);border-radius:2px;height:40%;
  animation:eq 1.1s ease-in-out infinite}
.brand-mark span:nth-child(1){animation-delay:0s;height:55%}
.brand-mark span:nth-child(2){animation-delay:.15s;height:90%}
.brand-mark span:nth-child(3){animation-delay:.3s;height:35%}
.brand-mark span:nth-child(4){animation-delay:.45s;height:75%}
.brand-mark span:nth-child(5){animation-delay:.6s;height:50%}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.brand-mark span{transform-origin:bottom}
.brand-text h1{font-family:var(--font-d);font-weight:700;font-size:22px;letter-spacing:1px;line-height:1}
.brand-text p{font-family:var(--font-m);font-size:10.5px;color:var(--muted);letter-spacing:.5px;margin-top:4px}

.search{flex:1;max-width:620px;margin-left:auto;display:flex;align-items:center;gap:10px;position:relative;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:7px 8px 7px 16px;
  box-shadow:0 2px 10px rgba(150,110,80,.06);
  transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:var(--line-2);box-shadow:0 0 0 4px rgba(232,106,138,.14)}
.search-icon{color:var(--muted);flex-shrink:0}
.search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:15px;font-family:var(--font-b)}
.search input::placeholder{color:var(--muted-2)}
.search button{background:var(--grad);color:#fff;font-weight:600;font-size:14px;
  padding:9px 22px;border-radius:9px;letter-spacing:.5px;transition:transform .12s,filter .2s}
.search button:hover{filter:brightness(1.06)}
.search button:active{transform:scale(.96)}
.search button:disabled{filter:grayscale(.4) brightness(.85);cursor:wait}

/* ---------- sourcebar ---------- */
.sourcebar{display:flex;align-items:center;gap:14px;padding:0 30px 16px;position:relative;z-index:3}
.sourcebar-label{font-family:var(--font-m);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-2)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:20px;
  background:var(--ink-2);border:1px solid var(--line);font-size:13px;color:var(--muted);
  transition:all .16s;user-select:none}
.chip:hover{color:var(--text);border-color:var(--line-2)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--muted-2);transition:all .16s}
.chip.on{color:var(--text);border-color:transparent;background:var(--ink-4)}
.chip.on .dot{background:var(--mint);box-shadow:0 0 8px var(--mint)}
.sourcebar-hint{margin-left:auto;font-family:var(--font-m);font-size:11.5px;color:var(--muted);
  display:flex;align-items:center;gap:8px;min-height:16px}
.sourcebar-hint .spin{width:11px;height:11px;border:2px solid var(--line-2);border-top-color:var(--coral);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- results ---------- */
.results-wrap{overflow-y:auto;padding:0 18px 30px;position:relative;z-index:2}
.results-head,.row{display:grid;
  grid-template-columns:52px minmax(160px,1.6fr) minmax(80px,1fr) 64px 78px 88px 96px;
  align-items:center;gap:14px;padding:0 14px}
.results-head{position:sticky;top:0;background:linear-gradient(var(--ink),var(--ink) 70%,transparent);
  padding-top:6px;padding-bottom:12px;z-index:2;
  font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-2)}
.col-dur,.col-size{text-align:right}
.results{list-style:none;display:flex;flex-direction:column;gap:2px}
.load-more{text-align:center;padding:14px 0 6px;font-size:12.5px;color:var(--muted-2);letter-spacing:.5px}
.load-more[hidden]{display:none}
.row{height:60px;border-radius:12px;transition:background .15s;cursor:default;
  animation:reveal .42s cubic-bezier(.2,.7,.3,1) both}
@keyframes reveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.row:hover{background:var(--ink-2);box-shadow:0 1px 6px rgba(150,110,80,.06)}
.row.playing{background:linear-gradient(90deg,rgba(232,106,138,.10),rgba(217,160,91,.06));
  box-shadow:inset 2px 0 0 var(--coral)}

.r-cover{width:44px;height:44px;border-radius:8px;background:var(--ink-3);overflow:hidden;position:relative;flex-shrink:0}
.r-cover img{width:100%;height:100%;object-fit:cover;display:block}
.r-cover .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted-2);font-size:18px}
.r-cover .eq{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:2px;background:rgba(120,80,60,.30)}
.row.playing .r-cover .eq{display:flex}
.row.playing .r-cover .ph,.row.playing .r-cover img{filter:brightness(.85)}
.r-cover .eq i{width:3px;height:40%;background:var(--coral);border-radius:2px;animation:eq .9s ease-in-out infinite;transform-origin:bottom}
.r-cover .eq i:nth-child(2){animation-delay:.2s}
.r-cover .eq i:nth-child(3){animation-delay:.4s}

.r-title{min-width:0}
.r-title .name{font-weight:500;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-title .artist{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.r-album{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-dur,.r-size{font-family:var(--font-m);font-size:12px;color:var(--muted);text-align:right}
.r-size.lossless{color:var(--mint)}
.r-src{font-family:var(--font-m);font-size:10px;letter-spacing:.5px}
.r-src .tag{padding:3px 8px;border-radius:6px;background:var(--ink-3);color:var(--muted);text-transform:uppercase}
.r-act{display:flex;gap:6px;justify-content:flex-end;opacity:0;transition:opacity .15s}
.row:hover .r-act,.row.playing .r-act{opacity:1}
.r-act button{width:32px;height:32px;border-radius:9px;background:var(--ink-3);color:var(--text);
  display:grid;place-items:center;transition:all .14s}
.r-act button:hover{background:var(--ink-4)}
.r-act .a-play:hover{background:var(--grad);color:#fff}
.r-act .a-dl.busy{pointer-events:none}
.r-act .a-dl.busy svg{animation:spin .8s linear infinite}
.row.resolving .a-play,.row.resolving .a-dl{opacity:.5;pointer-events:none}
.row.resolving .r-cover .eq{display:flex}
.row.resolving .r-cover .eq i{animation:spin 1s linear infinite;width:6px;height:6px;border-radius:50%}
.r-act .a-dl.busy svg{animation:spin .8s linear infinite}

/* ---------- placeholder ---------- */
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:8vh 20px;color:var(--muted)}
.placeholder-viz{display:flex;align-items:flex-end;gap:5px;height:54px;margin-bottom:26px}
.placeholder-viz span{width:6px;background:var(--grad);border-radius:3px;opacity:.65;
  animation:eq 1.3s ease-in-out infinite;transform-origin:bottom}
.placeholder-viz span:nth-child(1){height:30%;animation-delay:0s}
.placeholder-viz span:nth-child(2){height:65%;animation-delay:.1s}
.placeholder-viz span:nth-child(3){height:95%;animation-delay:.2s}
.placeholder-viz span:nth-child(4){height:50%;animation-delay:.3s}
.placeholder-viz span:nth-child(5){height:80%;animation-delay:.4s}
.placeholder-viz span:nth-child(6){height:40%;animation-delay:.5s}
.placeholder-viz span:nth-child(7){height:60%;animation-delay:.6s}
.placeholder h2{font-family:var(--font-d);font-weight:600;font-size:24px;color:var(--text);margin-bottom:10px}
.placeholder p{font-size:14px;max-width:380px;line-height:1.6}

/* ---------- player ---------- */
.player{display:grid;grid-template-columns:minmax(220px,1fr) minmax(360px,1.6fr) minmax(220px,1fr);
  align-items:center;gap:24px;padding:0 26px;background:rgba(255,253,248,.92);
  backdrop-filter:blur(20px);border-top:1px solid var(--line);position:relative;z-index:4}
.player[data-empty="true"] {
  display: none !important;  /* 默认整个隐藏；播放音乐时 JS 设 false 自动出现 */
}
.player[data-empty="false"] {
  display: grid;
  animation: playerIn .35s ease-out;
}
@keyframes playerIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.player[data-empty="true"] .np-center,.player[data-empty="true"] .np-right{opacity:.4;pointer-events:none}

.np-meta{display:flex;align-items:center;gap:13px;min-width:0}
.np-cover{width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--ink-3);flex-shrink:0;
  box-shadow:0 6px 18px rgba(150,110,80,.18)}
.np-cover img{width:100%;height:100%;object-fit:cover;display:block}
.np-cover-fallback{width:100%;height:100%;display:grid;place-items:center;color:var(--muted-2);font-size:22px}
.np-text{min-width:0}
.np-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-artist{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.np-lyric-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  font-family:var(--font-d);font-size:13px;color:var(--muted);flex-shrink:0;transition:all .15s}
.np-lyric-btn:hover,.np-lyric-btn.on{color:var(--coral);border-color:var(--coral);background:rgba(232,106,138,.10)}

.np-center{display:flex;flex-direction:column;align-items:center;gap:9px}
.transport{display:flex;align-items:center;gap:16px}
.t-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:all .14s}
.t-btn:hover{color:var(--text);transform:scale(1.08)}
.t-btn.play{width:46px;height:46px;background:var(--grad);color:#fff;box-shadow:0 4px 16px rgba(232,106,138,.30)}
.t-btn.play:hover{filter:brightness(1.06);transform:scale(1.05)}
.seek{display:flex;align-items:center;gap:11px;width:100%}
.time{font-family:var(--font-m);font-size:11px;color:var(--muted);min-width:36px}
.time:last-child{text-align:right}
.seek-track{flex:1;height:5px;background:var(--ink-4);border-radius:3px;position:relative;cursor:pointer}
.seek-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad);border-radius:3px}
.seek-knob{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:var(--coral);
  transform:translate(-50%,-50%) scale(0);transition:transform .12s;box-shadow:0 1px 6px rgba(150,110,80,.25)}
.seek-track:hover .seek-knob{transform:translate(-50%,-50%) scale(1)}

.np-right{display:flex;align-items:center;gap:18px;justify-content:flex-end}
.viz{width:220px;height:44px}
.vol{display:flex;align-items:center;gap:8px;color:var(--muted)}
.vol-track{width:78px;height:5px;background:var(--ink-4);border-radius:3px;position:relative;cursor:pointer}
.vol-fill{position:absolute;left:0;top:0;bottom:0;width:75%;background:var(--muted);border-radius:3px}
.vol:hover .vol-fill{background:var(--text)}

/* ---------- side panels ---------- */
.lyrics-panel,.dl-drawer,.qpl-panel{position:fixed;top:0;bottom:var(--player-h);width:340px;background:var(--ink-2);
  border-left:1px solid var(--line);z-index:6;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.lyrics-panel{right:0}.dl-drawer{right:0}.qpl-panel{right:0}
.lyrics-panel.open,.dl-drawer.open,.qpl-panel.open{transform:none;box-shadow:-20px 0 50px rgba(150,110,80,.16)}
.lyrics-head,.dl-head,.qpl-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 14px;
  font-family:var(--font-d);font-weight:600;font-size:16px}
.lyrics-head button,.dl-head button,.qpl-head button{font-size:16px;color:var(--muted);width:28px;height:28px;border-radius:8px}
.lyrics-head button:hover,.dl-head button:hover{color:var(--text);background:var(--ink-3)}
.lyrics-scroll,.qpl-scroll{flex:1;overflow-y:auto;padding:20px 26px 40px;scroll-behavior:smooth}
.lyrics-scroll .lr{font-size:15px;line-height:1.5;color:var(--muted-2);padding:9px 0;transition:color .25s,transform .25s;transform-origin:left}
.lyrics-scroll .lr.active{color:var(--coral);font-weight:600;transform:scale(1.04)}
.lyrics-scroll .empty{color:var(--muted-2);font-size:14px;margin-top:30px;text-align:center}


/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--player-h) + 24px);transform:translateX(-50%) translateY(20px);
  background:#4a3d30;color:#fff;padding:11px 20px;border-radius:11px;font-size:13.5px;
  border:1px solid rgba(255,255,255,.12);opacity:0;pointer-events:none;transition:all .3s;z-index:20;box-shadow:0 10px 28px rgba(150,110,80,.22)}
.toast.show{opacity:1;transform:translateX(-50%)}

/* playlist entry link */
.pl-link{font-size:12.5px;color:var(--muted);text-decoration:none;padding:6px 12px;border:1px solid var(--line);
  border-radius:9px;white-space:nowrap;transition:all .15s;background:var(--ink-2)}
.pl-link:hover{color:var(--rose);border-color:var(--rose)}
@media (max-width:640px){.pl-link{font-size:11px;padding:5px 9px}}

/* video parse embed */
.vp-btn{cursor:pointer;font-family:inherit}
.vp-btn.vp-active{color:var(--rose);border-color:var(--rose);background:var(--ink-3)}
.vp-frame{position:fixed;inset:0;background:var(--ink);z-index:25}
.vp-frame[hidden]{display:none}
.vp-frame iframe{width:100%;height:100%;border:0;display:block}
.vp-close{position:fixed;top:14px;right:16px;z-index:30;font-family:inherit;
  background:rgba(255,255,255,.92);color:var(--text);border:1px solid var(--line-2);
  border-radius:10px;padding:9px 16px;font-size:12.5px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);
  backdrop-filter:blur(6px);transition:all .15s;font-weight:500}
.vp-close:hover{color:var(--rose);border-color:var(--rose)}
/* 视频解析全屏时：临时隐藏 topbar/sourcebar/播放器，让画面纯净 */
body[data-vp-open="true"] .topbar,
body[data-vp-open="true"] .sourcebar,
body[data-vp-open="true"] .player{display:none!important}
@media (max-width:640px){.vp-close{top:10px;right:10px;padding:7px 12px;font-size:11.5px}}

/* cover modal */
.cover-modal{position:fixed;inset:0;z-index:30;background:rgba(20,18,30,.82);display:grid;place-items:center;
  backdrop-filter:blur(8px);animation:fadein .2s ease}
.cover-modal[hidden]{display:none}
.cover-modal-img{max-width:min(560px,90vw);max-height:80vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);
  object-fit:contain;background:var(--ink-3)}
.cover-modal-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;font-size:18px;display:grid;place-items:center;transition:background .15s}
.cover-modal-close:hover{background:rgba(255,255,255,.3)}
.np-cover{cursor:zoom-in;transition:transform .15s}
.np-cover:hover{transform:scale(1.04)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* quality menu */
.quality-menu{position:fixed;z-index:25;width:250px;left:0;top:0;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:12px;
  box-shadow:0 18px 50px rgba(150,110,80,.25);animation:fadein .18s ease}
.quality-menu[hidden]{display:none}
.quality-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px;
  font-family:var(--font-d);font-weight:600;font-size:14px}
.quality-head button{font-size:15px;color:var(--muted);width:26px;height:26px;border-radius:7px}
.quality-head button:hover{color:var(--text);background:var(--ink-3)}
.q-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;
  border-radius:10px;font-size:13px;text-align:left;transition:background .13s}
.q-item:hover{background:var(--ink-3)}
.q-item .q-name{font-weight:600;color:var(--text)}
.q-item .q-desc{font-size:11px;color:var(--muted);margin-left:8px}

@media (max-width:880px){
  .results-head .col-album,.results-head .col-size,.r-album,.r-size{display:none}
  .results-head,.row{grid-template-columns:48px 1fr 56px 80px 84px}
  .np-right{display:none}
  .search button{padding:9px 16px}
  .lyrics-panel,.dl-drawer,.qpl-panel{width:100%}
}

/* ===== 移动端自适应（2026-08-19 新增） ===== */
@media (max-width:640px){
  :root{--player-h:74px}
  body{grid-template-rows:auto auto 1fr auto}
  .topbar{flex-direction:column;gap:10px;padding:14px 16px 10px}
  .brand{width:100%;justify-content:center}
  .search{max-width:100%;width:100%;margin-left:0}
  .sourcebar{padding:0 16px 10px;flex-wrap:wrap;gap:8px}
  .sourcebar-label{display:none}
  .sourcebar-hint{margin-left:0}
  .results-wrap{padding:0 8px 20px}
  .results-head,.row{grid-template-columns:48px 1fr 64px 88px;gap:8px;padding:0 8px}
  .results-head .col-dur,.r-dur{display:none}
  .row{height:56px}
  .r-title .name{font-size:13.5px}
  .r-title .artist{font-size:12px}
  .r-src .tag{font-size:9px;padding:2px 6px}
  .r-act button{width:30px;height:30px}
  .player{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:6px 14px;padding:10px 14px}
  .np-meta{grid-column:1;grid-row:1}
  .np-center{grid-column:1/3;grid-row:2}
  .np-cover{width:44px;height:44px}
  .t-btn.play{width:42px;height:42px}
  .seek{width:100%}
  .dl-fab{right:14px;bottom:calc(var(--player-h) + 12px);width:44px;height:44px}
  .lyrics-scroll{padding:16px 20px 36px}
  .lyrics-scroll .lr{font-size:14px}
  .placeholder{padding:6vh 16px}
  .placeholder h2{font-size:20px}
  .placeholder-viz{height:44px;margin-bottom:18px}
  .site-copy-mini{margin-left:0;margin-top:4px}
}

@media (max-width:400px){
  .results-head,.row{grid-template-columns:44px 1fr 80px}
  .results-head .col-src,.r-src{display:none}
  .brand-text h1{font-size:19px}
  .search input{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  /* ★ v39 修正：系统「减弱动态效果」此前会把全站动画连坐杀光
     （波浪可视化/均衡器/黑胶旋转全部静止，首页观感如同失效）。
     改为只静默纯装饰性的入场位移动画，保留核心节奏可视化元素 */
  #mePage, #hotPanel.hot-full, .mp-panel.open { animation: none !important; }
}


/* ---------- 播放列表面板 ---------- */
.qpl-scroll{flex:1;overflow-y:auto;padding:8px 14px 40px;scroll-behavior:smooth}
.qpl-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;transition:background .15s;border:1px solid transparent}
.qpl-row:hover{background:var(--ink-4)}
.qpl-row.active{background:linear-gradient(100deg,rgba(217,160,91,.14),rgba(232,106,138,.08));border-color:rgba(217,160,91,.35)}
.qpl-row.active .qpl-name{color:var(--coral);font-weight:600}
.qpl-info{flex:1;min-width:0}
.qpl-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qpl-artist{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qpl-dur{font-size:11.5px;color:var(--muted-2);font-family:var(--font-m);flex:none}
.qpl-del{flex:none;font-size:12px;color:var(--muted);width:24px;height:24px;border-radius:7px;line-height:1}
.qpl-del:hover{color:var(--coral);background:var(--ink-3)}
.qpl-head button{font-size:12.5px;padding:0 8px;width:auto}
#qplClear{color:var(--muted)}
#qplClear:hover{color:var(--coral)}

/* ---------- 播放模式按钮 ---------- */
.np-mode-btn{flex:none;padding:6px 10px;border-radius:10px;font-size:12px;font-weight:600;color:var(--muted);
  border:1.5px solid var(--line-2);background:transparent;cursor:pointer;transition:all .15s;font-family:var(--font-d)}
.np-mode-btn:hover{border-color:var(--amber);color:var(--amber)}
.np-mode-btn:active{transform:scale(.95)}

/* ---------- 播放列表按钮 on 态 ---------- */
.np-lyric-btn.on{background:var(--grad);color:#fff;border-color:transparent}


/* ---------- 加入播放列表按钮 ---------- */
.r-act .a-add{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);background:var(--ink-2);color:var(--muted);transition:all .15s}
.r-act .a-add:hover{border-color:var(--coral);color:var(--coral);transform:translateY(-1px)}
.r-act .a-add:active{transform:scale(.92)}
.r-act .a-add.added{opacity:.45;pointer-events:none;color:var(--amber);border-color:var(--amber)}

/* 已有 .a-play / .a-dl 样式保持 */


/* ---------- 搜索历史下拉 ---------- */
.search-history{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--ink-2);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(60,35,10,.28);
  z-index:50;max-height:min(420px,60vh);overflow-y:auto;padding:6px}
.search-history[hidden]{display:none}
.sh-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 6px;
  font-size:12px;color:var(--muted-2);font-weight:600}
.sh-head button{font-size:11.5px;color:var(--muted);padding:3px 10px;border-radius:8px}
.sh-head button:hover{color:var(--coral);background:var(--ink-3)}
.sh-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;transition:background .12s}
.sh-item:hover{background:var(--ink-4)}
.sh-txt{flex:1;font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-del{flex:none;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;color:var(--muted);width:20px;height:20px;border-radius:50%;font-size:12px;line-height:1;opacity:0;transition:opacity .15s}
.sh-item:hover .sh-del{opacity:1}
.sh-del:hover{color:var(--coral);background:var(--ink-3)}
.sh-empty{padding:18px 12px;text-align:center;font-size:12.5px;color:var(--muted-2)}


/* ---------- 播放栏 hover 自动弹出（Windows 任务栏效果） ---------- */
.player-hover-zone{position:fixed;left:0;right:0;bottom:0;height:16px;z-index:3;background:transparent}
.player[data-empty="true"].hover-show{display:grid !important;animation:playerIn .3s ease-out}
/* 触屏设备（手机/平板）：没有 hover 概念，禁用触发条（播放时仍正常弹出） */
@media (hover:none){.player-hover-zone{display:none}}

@media (max-width:640px){
  .np-meta{flex-wrap:wrap}
  .np-mode-btn{padding:4px 8px;font-size:11px}
}

/* 备案号小字（顶栏 logo 右侧）*/
.site-copy-mini{font-size:11px;color:var(--muted-2);margin-left:14px;display:inline-flex;align-items:center;gap:4px}
.site-copy-mini a{color:var(--muted-2);text-decoration:none}
.site-copy-mini a:hover{color:var(--coral);text-decoration:underline}


/* ---------- 我的歌单（左侧抽屉） ---------- */
.mp-panel{position:fixed;top:0;bottom:var(--player-h);left:0;width:380px;background:var(--ink-2);
  border-right:1px solid var(--line);z-index:6;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.mp-panel.open{transform:none;box-shadow:20px 0 50px rgba(150,110,80,.16)}
.mp-hover-zone{position:fixed;left:0;top:0;bottom:0;width:14px;z-index:3;background:transparent}
@media (hover:none){.mp-hover-zone{display:none}}
.mp-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 14px;
  font-family:var(--font-d);font-weight:600;font-size:16px}
.mp-head button{font-size:16px;color:var(--muted);width:28px;height:28px;border-radius:8px}
.mp-head button:hover{color:var(--text);background:var(--ink-3)}
.mp-body{flex:1;overflow-y:auto;padding:4px 16px 40px}
.mp-accounts{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:14px}
.mp-field{margin-bottom:10px}
.mp-field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600}
.mp-field input{width:100%;padding:10px 12px;border-radius:10px;background:var(--ink-3);
  border:1.5px solid var(--line-2);color:var(--text);font-size:13.5px;outline:none;font-family:var(--font-b)}
.mp-field input:focus{border-color:var(--coral)}
.mp-save{width:100%;padding:11px;border-radius:11px;background:var(--grad);color:#fff;
  font-size:13.5px;font-weight:600;margin-top:4px;box-shadow:0 6px 16px rgba(217,160,91,.35)}
.mp-save:hover{filter:brightness(1.06)}
.mp-hint{font-size:11.5px;color:var(--muted-2);margin-top:9px;line-height:1.5}
.mp-btn{flex:none;padding:6px 12px;border-radius:10px;font-size:12px;font-weight:600;
  color:var(--amber);border:1.5px solid var(--line-2);background:transparent;cursor:pointer;
  transition:all .15s;font-family:var(--font-d)}
.mp-btn:hover{border-color:var(--amber);background:rgba(217,160,91,.08)}
.mp-btn.on{background:var(--grad);color:#fff;border-color:transparent}

/* 歌单列表 */
.mp-group-title{font-size:12.5px;font-weight:700;color:var(--text);margin:14px 2px 8px;display:flex;align-items:center;gap:6px}
.mp-group-title .g-src{font-size:10.5px;color:var(--muted-2);font-weight:500}
.mp-group-empty{font-size:12px;color:var(--muted-2);padding:8px 2px}
.mp-pl{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;cursor:pointer;transition:background .15s;border:1px solid transparent}
.mp-pl:hover{background:var(--ink-4)}
.mp-pl.active{background:linear-gradient(100deg,rgba(217,160,91,.14),rgba(232,106,138,.08));border-color:rgba(217,160,91,.35)}
.mp-pl-cover{width:42px;height:42px;border-radius:9px;overflow:hidden;background:var(--ink-3);flex:none;display:grid;place-items:center;color:var(--muted-2);font-size:17px}
.mp-pl-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mp-pl-info{flex:1;min-width:0}
.mp-pl-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-pl-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.mp-pl-cnt{font-size:11.5px;color:var(--muted-2);flex:none;font-family:var(--font-m)}

/* 歌曲列表 */
.mp-songs{background:var(--ink-3);border-radius:12px;padding:8px;margin-top:6px}
.mp-songs-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 8px}
.mp-songs-head .t{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-songs-head .all{font-size:11.5px;color:var(--amber);padding:4px 10px;border:1px solid var(--line-2);border-radius:8px}
.mp-songs-head .all:hover{background:rgba(217,160,91,.1)}
.mp-song{display:flex;align-items:center;gap:9px;padding:8px 8px;border-radius:9px;transition:background .12s}
.mp-song:hover{background:var(--ink-4)}
.mp-song .s-name{flex:1;min-width:0;font-size:12.8px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-song .s-art{font-size:11px;color:var(--muted);flex:none;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-song .s-add{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  color:var(--muted);display:grid;place-items:center;font-size:13px;transition:all .15s}
.mp-song .s-add:hover{border-color:var(--coral);color:var(--coral)}
.mp-song .s-add.added{opacity:.45;pointer-events:none;color:var(--amber);border-color:var(--amber)}
.mp-loading{padding:16px;text-align:center;color:var(--muted-2);font-size:12.5px}
@media (max-width:640px){.mp-panel{width:100%}}

/* ============================================================
   歌单左侧内联展开 (v2026-08-25 03:02，基于最原始版本)
   - 点"我的歌单"按钮 → 歌单作为页面左侧一列展开（占用布局空间，非浮层）
   - 再点 → 收回
   - 页面 body 保持 overflow:hidden 不滚动；歌单与结果各自内部滚动
   ============================================================ */
.main-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:0 18px;
  min-height:0;        /* 关键：允许 1fr 行内子元素收缩并内部滚动 */
  overflow:hidden;
}
.mp-panel{
  display:none !important;             /* 默认隐藏 */
  position:static !important;
  transform:none !important;
  width:100% !important;
  height:100% !important;
  z-index:auto !important;
  box-shadow:none !important;
}
.mp-panel.open{
  display:flex !important;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.main-wrap:has(.mp-panel.open){grid-template-columns:340px 1fr}
.mp-panel .mp-body{flex:1;min-height:0;overflow-y:auto}   /* 歌单内部独立滚动 */
.mp-hover-zone{display:none !important}                  /* 悬停触发不再适用 */
/* 移动端：歌单全宽堆叠在上方 */
@media (max-width:900px){
  .main-wrap{grid-template-columns:1fr !important}
  .mp-panel.open{height:auto !important;max-height:52vh}
}

/* ============================================================
   mini 播放栏始终显示 (v2026-08-25 09:58)
   - 取消"未播放时自动隐藏"（原 .player[data-empty="true"] display:none）
   - 控件也恢复可交互
   ============================================================ */
.player[data-empty="true"]{
  display:grid !important;
}
.player[data-empty="true"] .np-center,
.player[data-empty="true"] .np-right{
  opacity:1 !important;
  pointer-events:auto !important;
}

/* ============================================================
   账号下拉菜单 (2026-08-25 23:37)：
   把"我的歌单"、"音质"、"登录"合并到 topbar 右侧一个头像按钮
   ============================================================ */
.account-wrap{position:relative;display:inline-flex;align-items:center}
.avatar-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:99px;border:1px solid var(--line);
  background:rgba(255,255,255,.65);color:var(--text);cursor:pointer;
  font:inherit;font-size:13px;line-height:1;
  transition:all .15s;
}
.avatar-btn:hover{border-color:var(--coral);background:rgba(232,128,154,.08)}
.avatar-icon{font-size:14px}
.avatar-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caret{font-size:10px;opacity:.6;transform:translateY(-1px);transition:transform .2s}
.avatar-btn.open{background:rgba(232,128,154,.12);border-color:var(--coral);color:var(--coral)}
.avatar-btn.open .caret{transform:translateY(-1px) rotate(180deg)}

.account-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  width:min(300px,92vw);
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 50px rgba(60,35,10,.18);
  z-index:60;overflow:hidden;
  animation:amIn .18s ease-out;
}
@keyframes amIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.am-header{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:linear-gradient(135deg,rgba(232,128,154,.08),rgba(217,160,91,.08));
  border-bottom:1px solid var(--line);
}
.am-icon{font-size:18px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.7);border-radius:50%}
.am-name{font-weight:700;font-size:14px;line-height:1.2}
.am-name.am-logged{color:var(--coral)}

.am-section{padding:10px 14px;border-bottom:1px solid var(--line)}
.am-section:last-child{border-bottom:none}
.am-section-title{font-size:11.5px;color:var(--muted-2);letter-spacing:.6px;margin-bottom:7px;text-transform:uppercase}

.am-item{
  display:block;width:100%;padding:9px 10px;border-radius:8px;
  border:1px solid transparent;background:transparent;color:var(--text);
  text-align:left;cursor:pointer;font:inherit;font-size:13px;
  transition:all .12s;margin-bottom:4px;
}
.am-item:last-child{margin-bottom:0}
.am-item:hover{background:rgba(232,128,154,.06);border-color:var(--line-2)}
.am-item:active{transform:scale(.98)}
.am-item.am-danger{color:#c54b4b}
.am-item.am-danger:hover{background:rgba(197,75,75,.08);border-color:rgba(197,75,75,.3)}

.am-quality{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:2px}
.am-q{
  padding:6px 0;border-radius:6px;border:1px solid var(--line-2);background:transparent;
  color:var(--muted);font:inherit;font-size:12px;cursor:pointer;text-align:center;
  transition:all .12s;
}
.am-q:hover{border-color:var(--coral);color:var(--coral)}
.am-q.active{
  background:linear-gradient(135deg,var(--coral),var(--amber));color:#fff;
  border-color:transparent;font-weight:700;
  box-shadow:0 4px 12px rgba(232,128,154,.3);
}
.am-q.active::before{content:"✓ ";opacity:.85}

/* 移动端：下拉占满宽度 */
@media (max-width:900px){
  .avatar-name{max-width:80px}
  .account-menu{right:-10px;width:min(280px,92vw)}
  .am-quality{grid-template-columns:repeat(5,1fr)}
}
/* ============================================================
   歌单内歌曲播放按钮 (2026-08-25 23:47)
   - 嵌在 s-add 左边，绿色圆形 ▶ 按钮
   - 点击：加入播放列表 + 立即播放
   ============================================================ */
.mp-song .s-play{
  flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-2);
  background:linear-gradient(135deg,var(--coral),var(--amber));
  color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:all .15s;
  box-shadow:0 2px 5px rgba(232,128,154,.25);
}
.mp-song .s-play:hover{
  transform:scale(1.08);
  box-shadow:0 4px 10px rgba(232,128,154,.35);
}
.mp-song .s-play:active{transform:scale(.95)}
.mp-song .s-play svg{width:13px;height:13px}
/* ============================================================
   2026-08-26 01:00 增量改动（基于 SV8 基线）
   - 右侧歌曲视图 msvSongsView（默认 hidden，点歌单后显示）
   - .mp-song 行增加缩略图 + 大字样式
   ============================================================ */

/* 1) 右侧歌曲视图容器（与 search results 占同一 grid 列，二选一显示） */
.mp-songs-view{
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.mp-songs-view[hidden]{ display: none; }

/* 头部 */
.msv-head{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.msv-back{
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--muted); cursor: pointer; font-size: 15px;
  display: grid; place-items: center; transition: all .15s;
}
.msv-back:hover{ border-color: var(--coral); color: var(--coral); }
.msv-title{
  flex: 1; font-size: 17px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msv-head .all{
  flex: none; padding: 8px 16px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, var(--coral), var(--amber));
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.msv-head .all:hover{ transform: scale(1.03); box-shadow: 0 4px 12px rgba(232,128,154,.3); }

/* 主体（可滚动） */
.msv-body{
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 10px 12px;
}

/* 2) 歌曲行：缩略图 + 大字（仿网抑云样式） */
.msv-body .mp-song{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  transition: background .12s !important;
  border-bottom: 1px solid var(--line) !important;
}
.msv-body .mp-song:hover{ background: var(--ink-3) !important; }
.msv-body .mp-song:last-child{ border-bottom: none !important; }

/* 缩略图 */
.msv-body .mp-song .s-cov{
  flex: none;
  width: 56px; height: 56px;
  border-radius: 8px;
  background: var(--ink-4);
  background-size: cover;
  background-position: center;
  display: grid; place-items: center;
  color: var(--muted); font-size: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  overflow: hidden;
}
.msv-body .mp-song .s-cov img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* 歌名 + 歌手 */
.msv-body .mp-song .s-info{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.msv-body .mp-song .s-name{
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.msv-body .mp-song .s-art{
  font-size: 12.5px !important;
  color: var(--muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 播放 / 加入按钮放大版 */
.msv-body .mp-song .s-play,
.msv-body .mp-song .s-add{
  flex: none;
}
.msv-body .mp-song .s-play{
  width: 32px !important; height: 32px !important;
}

/* 3) 仅 SV8 的 grid：兼容 .main-wrap 单列/双列布局 */
.results-wrap{ grid-column: 1; grid-row: 1; min-width: 0; }
.main-wrap:has(.mp-panel.open) .results-wrap{ grid-column: 1; grid-row: 1; }
.main-wrap:has(.mp-panel.open) .mp-songs-view{ grid-column: 2; grid-row: 1; }

/* ============================================================
   修复 (2026-08-26 01:04) — mpPanel 占错位置
   原因：SV8 用 :has(.mp-panel.open) 触发双列，部分浏览器/状态
   下 :has() 不重排 grid-template-columns → mpPanel 占主区全宽。
   改为：mpOpen 时 body 加 .mp-shown，CSS class 直接控制 grid 双列，
   100% 可靠不依赖 :has()。
   ============================================================ */
.main-wrap.mp-shown{
  grid-template-columns: 340px 1fr !important;
}
.main-wrap.mp-shown .mp-panel{
  /* L464 的 position:static 已让 mpPanel 参与 grid（双列模式下自动占 col1 = 260px） */
  width:100% !important; height:100% !important;
}
.main-wrap.mp-shown .results-wrap{
  grid-column: 2 !important; grid-row: 1 !important; min-width:0;
}
.main-wrap.mp-shown .mp-songs-view{
  grid-column: 2 !important; grid-row: 1 !important; min-width:0;
}

/* mp-songs-view 默认 hidden，点歌单显示 */
.mp-songs-view{ grid-column: 1; grid-row: 1; min-width: 0; }

/* ============================================================
   v2026-08-26: mp-songs-view 批量下载直链弹窗 + 顶部按钮
   ============================================================ */
.msv-dl{
  background:#fff;
  color:#7a4a2b;
  border:1.5px solid #d6c0a4;
  border-radius:14px;
  padding:6px 14px; font-size:13px; font-weight:500; cursor:pointer;
  margin-right:8px; font-family:inherit;
  transition:all .15s;
}
.msv-dl:hover{ background:#fff5ed; border-color:#ff8c69; color:#5a2c10; }
.msv-dl:active{ transform:translateY(1px); }
.msv-dl:disabled{ opacity:.55; cursor:wait; }

.msv-link-modal{
  position:fixed; inset:0; background:rgba(20,14,5,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:20px;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.msv-link-modal[hidden]{ display:none; }
.msv-link-modal .msv-lm-box{
  background:var(--ink-2); border-radius:16px;
  width:100%; max-width:780px; max-height:80vh;
  display:flex; flex-direction:column;
  box-shadow:0 12px 40px rgba(150,110,80,.22);
  overflow:hidden; border:1px solid var(--ink-4);
}
.msv-link-modal .msv-lm-head{
  padding:14px 20px; border-bottom:1px solid var(--ink-4);
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg, var(--ink-2), var(--ink-3));
}
.msv-link-modal .msv-lm-head h3{ margin:0; font-size:15px; color:var(--text); font-weight:600; }
.msv-link-modal .msv-lm-close{
  background:transparent; border:0; font-size:22px; cursor:pointer;
  color:var(--text); opacity:.5; line-height:1; padding:2px 8px;
}
.msv-link-modal .msv-lm-close:hover{ opacity:1; }
.msv-link-modal .msv-lm-tools{
  display:flex; align-items:center; gap:8px;
  padding:10px 20px; border-bottom:1px solid var(--ink-4);
  background:var(--ink-2); flex-wrap:wrap;
}
.msv-link-modal .msv-lm-tools select{
  background:#fff; color:var(--text);
  border:1px solid var(--ink-4); border-radius:10px;
  padding:6px 10px; font-size:12px; cursor:pointer;
}
.msv-link-modal .msv-lm-tools select:focus{ outline:none; border-color:var(--brand,#ff8c69); }
.msv-link-modal .msv-lm-spring{ flex:1; }
.msv-link-modal .msv-lm-tool{
  background:#fff; border:1px solid var(--ink-4);
  border-radius:10px; padding:6px 12px; cursor:pointer;
  font-size:12px; color:var(--text); white-space:nowrap;
  transition:background .15s, border-color .15s;
}
.msv-link-modal .msv-lm-tool:hover{ background:var(--ink-3); border-color:var(--brand,#ff8c69); }
.msv-link-modal .msv-lm-tool:disabled{ opacity:.45; cursor:not-allowed; }
.msv-link-modal .msv-lm-tool.primary{
  background:linear-gradient(135deg,#ff8c69,#ff5e9e); color:#fff;
  border:0; font-weight:500;
  box-shadow:0 3px 10px rgba(255,140,105,.3);
}
.msv-link-modal .msv-lm-tool.primary:hover{ background:linear-gradient(135deg,#ff7a55,#ff4e8e); border:0; }
.msv-link-modal .msv-lm-tool.primary:disabled{ opacity:.5; cursor:not-allowed; }
.msv-link-modal .msv-lm-list{
  padding:6px 20px 12px; overflow:auto; flex:1; min-height:0;
}
.msv-link-modal .msv-lm-loading{
  padding:40px 20px; text-align:center; color:var(--muted); font-size:13px;
}
.msv-link-modal .msv-lm-placeholder{
  padding:60px 20px; text-align:center; color:var(--muted); font-size:13px;
  background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(190,150,120,.04) 12px,rgba(190,150,120,.04) 24px);
}
.msv-link-modal .msv-lm-row{
  display:grid; grid-template-columns:1fr auto; gap:6px 10px;
  padding:12px 0; border-bottom:1px dashed var(--ink-4);
  align-items:start;
}
.msv-link-modal .msv-lm-row:last-child{ border-bottom:0; }
.msv-link-modal .msv-lm-name{
  font-size:13.5px; color:var(--text); font-weight:500;
  word-break:break-all;
}
.msv-link-modal .msv-lm-name small{
  display:block; color:var(--muted); font-size:11px; margin-top:4px; font-weight:400;
}
.msv-link-modal .msv-lm-name em{
  color:#e86a8a; font-style:normal; font-size:10px; margin-left:6px;
}
.msv-link-modal .msv-lm-url{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px; line-height:1.5;
  color:var(--text);
  padding:5px 8px; background:var(--ink-3); border-radius:6px;
  margin-top:4px; word-break:break-all;
}
.msv-link-modal .msv-lm-err{
  font-size:12px; color:#c33; margin-top:4px;
}
.msv-link-modal .msv-lm-cp{
  background:#fff; border:1px solid var(--ink-4);
  border-radius:10px; padding:6px 12px; cursor:pointer;
  font-size:12px; color:var(--text); white-space:nowrap;
  align-self:start; transition:background .15s, border-color .15s;
}
.msv-link-modal .msv-lm-cp:hover{ background:var(--ink-3); border-color:var(--brand,#ff8c69); }
.msv-link-modal .msv-lm-foot{
  padding:10px 20px; border-top:1px solid var(--ink-4);
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--muted); background:var(--ink-2);
}
.msv-link-modal .msv-lm-copyall{
  background:linear-gradient(135deg,#ff8c69,#ff5e9e); color:#fff;
  border:0; border-radius:14px; padding:8px 18px; cursor:pointer;
  font-size:13px; font-weight:500;
  box-shadow:0 3px 10px rgba(255,140,105,.3);
}
.msv-link-modal .msv-lm-copyall:hover{ opacity:.92; }
.msv-link-modal .msv-lm-copyall:disabled{ opacity:.5; cursor:not-allowed; }

@media (max-width:640px){
  .msv-link-modal{ padding:8px; }
  .msv-link-modal .msv-lm-box{ max-height:90vh; }
  .msv-link-modal .msv-lm-list{ padding:6px 12px 10px; }
  .msv-link-modal .msv-lm-head{ padding:10px 14px; }
  .msv-link-modal .msv-lm-foot{ padding:8px 14px; }
}


/* ============================================================
   手机端适配 v2026-08-26（≤640px 专用，桌面端零影响）
   核心：我的歌单面板 / 歌曲视图 / 搜索结果 三视图互斥独占。
   状态由 JS 维护：.mp-shown（面板开）+ .msv-solo（歌曲视图独占），
   两个 class 仅在此媒体查询内有样式，桌面端加了也不生效。
   ============================================================ */
@media (max-width:640px){
  /* ---- 1. 三视图互斥 ---- */
  /* 状态A：面板打开（未进入歌曲视图）→ 面板独占全屏 */
  .main-wrap.mp-shown:not(.msv-solo){ grid-template-columns:1fr !important }
  .main-wrap.mp-shown:not(.msv-solo) .mp-panel{
    height:100% !important; max-height:none !important;    /* 覆盖旧 52vh 半屏限制 */
  }
  .main-wrap.mp-shown:not(.msv-solo) .results-wrap{ display:none !important }
  .main-wrap.mp-shown:not(.msv-solo) .mp-songs-view{ display:none !important }

  /* 状态B：歌曲视图独占 → 隐藏面板与搜索结果 */
  .main-wrap.msv-solo{ grid-template-columns:1fr !important }
  .main-wrap.msv-solo .mp-panel{ display:none !important }
  .main-wrap.msv-solo .results-wrap{ display:none !important }
  .main-wrap.msv-solo .mp-songs-view{
    display:flex !important; grid-column:1 !important; grid-row:1 !important;
  }

  /* ---- 2. 我的歌单面板内部 ---- */
  .mp-head{ padding:14px 16px 10px; font-size:15px }
  .mp-head button{ width:32px; height:32px }
  .mp-body{ padding:4px 12px 32px }
  .mp-pl{ padding:10px 8px }
  .mp-pl-cover{ width:48px; height:48px }
  .mp-pl-name{ font-size:14px }
  .mp-field input{ font-size:16px }          /* ≥16px 防 iOS 聚焦自动放大 */
  .mp-save{ font-size:14px; padding:12px }

  /* ---- 3. 歌曲视图（手机主界面）---- */
  .msv-head{ padding:10px 12px; gap:8px; flex-wrap:wrap }
  .msv-back{ width:38px; height:38px; font-size:16px }
  .msv-title{ font-size:15px }
  .msv-head .all{ padding:8px 12px; font-size:12px }
  .msv-dl{ padding:8px 12px; font-size:12px; margin-right:0 }
  .msv-body{ padding:6px 8px }
  .msv-body .mp-song{ padding:12px 10px !important; gap:10px !important }
  .msv-body .mp-song .s-name{ font-size:14px }
  .msv-body .mp-song .s-art{ font-size:12px; max-width:150px }
  .msv-body .mp-song .s-cov{ width:44px; height:44px }

  /* ---- 4. 下载直链弹窗（手机端收紧）---- */
  .msv-link-modal .msv-lm-tools{ padding:8px 12px; gap:6px }
  .msv-link-modal .msv-lm-tools select{ max-width:46vw; font-size:13px }
  .msv-link-modal .msv-lm-tool{ padding:8px 10px; font-size:13px }
  .msv-link-modal .msv-lm-copyall{ padding:9px 16px; font-size:14px }
  .msv-link-modal .msv-lm-head h3{ font-size:14px }

  /* ---- 5. 顶部搜索区防溢出 ---- */
  .search input{ font-size:16px }            /* 防 iOS 聚焦放大 */
  .search button{ font-size:14px; padding:10px 14px }
}


/* ================================================================
   ★★★ 2026-08-27 新功能视觉层（v29）★★★
   氛围背景 / 搜索联想 / 热歌榜 / PWA 更新提示 / 移动端歌词增强
   ================================================================ */

/* ---------- 1. 封面主色氛围背景（amb-layer 双层 cross-fade） ----------
   注意：html 未设背景时 body 背景会上移到 canvas 绘制，
   因此 z-index:-1 的定位层会落在「canvas 背景之上、内容之下」，天然可用 */
.amb-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background-repeat:no-repeat;background-size:100% 100%;transition:opacity 1.2s ease}
@media (prefers-reduced-motion:reduce){
  .amb-layer{transition-duration:.3s}
}

/* ---------- 2. 搜索联想（容器复用 .search-history 下拉体系） ---------- */
.search-suggest{max-height:min(340px,52vh)}   /* 联想条目少，收窄高度 */
.sg-artist{font-style:normal;color:var(--muted-2);font-size:12px;margin-left:6px;
  white-space:nowrap}
.sh-item:hover .sg-artist{color:var(--muted)}

/* ---------- 3. 热歌榜（主页初始态展示，播放/加入由用户显式点击） ---------- */
.hot-panel{margin:6px auto 34px;max-width:760px;padding:0 6px;position:relative;z-index:2}
.hot-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hot-title{font-family:var(--font-d);font-weight:700;font-size:17px;color:var(--text);letter-spacing:.3px}
/* ★ v42：ht-ico 火焰 SVG 原本无任何尺寸规则——无 width/height 属性的 SVG 按默认
   替换元素尺寸渲染（桌面端实测撑到 177×177 巨图）。显式钉死为行内小图标 */
.hot-title .ht-ico{width:17px;height:17px;flex:none;vertical-align:-3px;margin-right:6px}
.hot-title em{font-style:normal;font-family:var(--font-m);font-weight:400;font-size:10.5px;
  color:var(--muted-2);letter-spacing:.8px;margin-left:8px;text-transform:none}
/* ★ v44 热榜双源切换 pill（网易/QQ） */
.hot-src{display:flex;gap:3px;background:rgba(0,0,0,.055);border-radius:10px;padding:3px;flex:none}
.hot-src-btn{font-size:11.5px;font-weight:700;color:var(--muted);padding:4px 12px;border-radius:8px;
  transition:all .18s ease;white-space:nowrap}
.hot-src-btn.on{background:#fff;color:var(--coral);box-shadow:0 1px 4px rgba(0,0,0,.09)}
.hot-src-btn:not(.on):hover{color:var(--text)}
.hot-refresh{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);
  padding:6px 12px;border-radius:9px;border:1px solid var(--line);
  background:var(--ink-2);transition:all .16s}
.hot-refresh:hover{color:var(--text);border-color:var(--line-2)}
.hot-refresh:active{transform:scale(.95)}

.hot-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;align-content:start}
.hot-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;
  cursor:pointer;transition:background .15s;min-width:0}
.hot-item:hover{background:rgba(255,255,255,.55)}
.hot-idx{flex:none;width:22px;text-align:center;font-family:var(--font-m);font-size:12px;
  color:var(--muted-2);font-weight:600}
/* 前三名序号高亮（金/银/铜渐进色） */
.hot-item:nth-child(1) .hot-idx{color:var(--amber)}
.hot-item:nth-child(2) .hot-idx{color:#b99a72}
.hot-item:nth-child(3) .hot-idx{color:#c48a63}
.hot-cov{flex:none;width:42px;height:42px;border-radius:9px;object-fit:cover;background:var(--ink-4);
  box-shadow:0 2px 8px rgba(150,110,80,.12)}
.hot-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hot-name{font-size:13.5px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hot-art{font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hot-dur{flex:none;font-family:var(--font-m);font-size:11px;color:var(--muted-2)}
.hot-play,.hot-add{flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
  color:var(--muted);background:transparent;border:1px solid transparent;
  transition:all .15s}
.hot-play{color:var(--coral)}
.hot-play:hover{background:rgba(232,106,138,.1);border-color:rgba(232,106,138,.25)}
.hot-play svg{width:13px;height:13px;display:block}
.hot-add{font-size:16px;padding-bottom:1px}   /* ＋ 号视觉居中微调 */
.hot-add:hover{background:rgba(217,160,91,.12);border-color:rgba(217,160,91,.3);color:var(--amber)}
.hot-empty{grid-column:1/-1;padding:26px 12px;text-align:center;font-size:12.5px;color:var(--muted-2)}

/* ---------- 4. PWA 更新提示条 ---------- */
/* ★ v43：更新提示条改为屏幕正中顶层展示——原 bottom:calc(var(--player-h)+Npx) + z40
   在移动端正好卡进迷你播放栏(z65)/Tab栏(z62)下方被遮挡；现垂直居中 + z1200（全站最高，
   高于登录弹窗 1100），任何页面状态下都完整可见 */
#pwaUpdateBar{position:fixed;left:50%;top:50%;bottom:auto;z-index:1200;
  transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;
  width:max-content;max-width:88vw;
  padding:12px 14px 12px 20px;border-radius:14px;
  background:rgba(68,56,44,.95);color:#fff;font-size:13px;letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 48px rgba(60,35,10,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:updateBarIn .35s ease-out}
#pwaUpdateBar[hidden]{display:none}
#pwaUpdateBar button{background:var(--grad);color:#fff;font-weight:600;font-size:12.5px;
  padding:7px 14px;border-radius:9px;white-space:nowrap;transition:filter .15s}
#pwaUpdateBar button:hover{filter:brightness(1.08)}
@keyframes updateBarIn{from{opacity:0;transform:translate(-50%,-50%) translateY(14px)}
  to{opacity:1;transform:translate(-50%,-50%) translateY(0)}}

/* ---------- 5. 移动端适配（640px）----------
   桌面端样式完全不受本块影响 */
@media (max-width:640px){
  /* 热歌榜：单列铺满、隐藏时长列 */
  .hot-panel{padding:0 2px;margin-bottom:24px}
  .hot-list{grid-template-columns:1fr;gap:2px}
  .hot-dur{display:none}
  .hot-item{padding:9px 8px}
  .hot-name{font-size:14px}

  /* 歌词/下载/队列面板：全屏化沉浸体验 */
  .lyrics-panel,.dl-drawer,.qpl-panel{width:100vw;right:0;left:auto;border-left:none;
    box-shadow:0 -10px 40px rgba(60,35,10,.2)}
  .lyrics-scroll,.qpl-scroll{padding:14px 20px calc(env(safe-area-inset-bottom,0px) + 34px)}
  .lyrics-scroll .lr{font-size:16px;padding:10px 0}
  .lyrics-head,.dl-head,.qpl-head{padding:18px 20px 12px}

  /* 更新提示条：移动端同样正中顶层（v43），仅字号/内距微调 */
  #pwaUpdateBar{left:50%;right:auto;top:50%;justify-content:space-between;
    font-size:12.5px;padding:11px 12px 11px 16px;
    animation:updateBarInM .3s ease-out}
  @keyframes updateBarInM{from{opacity:0}to{opacity:1}}
}

/* =========================================================================
   ★ v33 移动端 QQ 音乐风格 UI（2026-08-27）
   黑胶播放页 / 沉浸歌词 / 底部 4 Tab / 我的页
   —— 桌面端一律 display:none，仅 @media(max-width:768px) 生效，不影响 PC 布局
   ========================================================================= */
/* ★ v34 修复：兜底规则改包进反向媒体查询。
   原写法（媒体查询外 display:none!important）会永久压制移动端媒体查询内
   的普通 display 声明，导致三块新 UI 在手机上永远不可见 */
@media (min-width: 769px) {
  /* ★ v48：#playerPage 移出名单——桌面端解锁黑胶播放页 */
  #mobileTabs, #mePage { display: none !important; }
}

@media (max-width: 768px) {
  /* ---------- 底部 Tab 栏 ---------- */
  #mobileTabs {
    display: flex; position: fixed; left: 0; right: 0;
    bottom: var(--player-h); height: 54px; z-index: 45;
    background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
  }
  .mtab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: 10.5px; color: var(--muted); font-weight: 600; }
  .mtab span { font-size: 20px; line-height: 1; filter: grayscale(1) opacity(.55); transition: all .2s; }
  .mtab.on { color: var(--coral); }
  .mtab.on span { filter: none; transform: translateY(-1px) scale(1.08); }
  /* 内容区给 Tab 栏腾位 */
  .results-wrap { padding-bottom: 130px !important; }

  /* ---------- 热榜 Tab：hotPanel 全屏化 ---------- */
  #hotPanel.hot-full {
    position: fixed; inset: 0; bottom: calc(var(--player-h) + 54px); z-index: 55;
    background: var(--ink); max-width: none; margin: 0; padding: 14px 14px 30px;
    overflow-y: auto;
  }

  /* ---------- 我的页 ---------- */
  #mePage {
    display: flex; flex-direction: column; position: fixed; inset: 0;
    bottom: calc(var(--player-h) + 54px); z-index: 60;
    background: var(--ink); overflow-y: auto; padding: 18px 16px 30px;
  }
  .me-amb { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background: radial-gradient(700px 420px at 85% -6%, rgba(217,160,91,.14), transparent 60%),
                radial-gradient(640px 480px at 0% 4%, rgba(232,106,138,.10), transparent 55%); }
  .me-head { display: flex; align-items: center; gap: 14px; padding: 8px 4px 18px; }
  .me-avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--grad); color: #fff;
    display: grid; place-items: center; font-size: 26px; box-shadow: 0 8px 20px rgba(217,160,91,.30); }
  .me-user { flex: 1; min-width: 0; }
  .me-name { font-size: 19px; font-weight: 800; color: var(--text); }
  .me-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .me-login-btn { padding: 8px 18px; border-radius: 999px; background: var(--grad); color: #fff;
    font-size: 13px; font-weight: 700; box-shadow: 0 5px 14px rgba(232,106,138,.3); }
  .me-login-btn.out { background: var(--ink-3); color: var(--muted); box-shadow: none; }
  .me-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px;
    padding: 15px 16px; margin-bottom: 14px; box-shadow: 0 4px 16px rgba(190,150,120,.08); }
  .me-card-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between; }
  .me-clear { font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 3px 10px;
    border-radius: 999px; background: var(--ink-3); }
  .me-cookie-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; }
  .mc-label { font-size: 13px; color: var(--text); font-weight: 600; }
  .mc-val { font-size: 12.5px; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
  .mc-val.ok { color: #1d7a4f; background: rgba(111,191,158,.16); }
  .mc-val.bad { color: var(--coral); background: rgba(232,106,138,.10); }
  .me-cookie-sub { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
  .me-recent-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 6px;
    scrollbar-width: none; }
  .me-recent-scroll::-webkit-scrollbar { display: none; }
  .me-r-item { flex: none; width: 88px; display: flex; flex-direction: column; gap: 6px; }
  .me-r-cov { width: 88px; height: 88px; border-radius: 14px; object-fit: cover;
    background: var(--ink-3); box-shadow: 0 6px 14px rgba(190,150,120,.18); }
  .me-r-name { font-size: 11.5px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .me-r-art { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .me-empty { font-size: 12.5px; color: var(--muted-2); padding: 10px 2px; }
  .me-quality { display: flex; gap: 8px; flex-wrap: wrap; }
  .me-q { padding: 8px 16px; border-radius: 999px; background: var(--ink-3); color: var(--muted);
    font-size: 12.5px; font-weight: 700; border: 1.5px solid transparent; }
  .me-q.active { background: rgba(232,106,138,.10); color: var(--coral); border-color: var(--coral); }
  .me-links { padding: 6px 8px; }
  .me-link { display: block; width: 100%; text-align: left; padding: 13px 10px; font-size: 14px;
    font-weight: 600; color: var(--text); border-bottom: 1px dashed var(--line); }
  .me-link:last-of-type { border-bottom: none; }
  .me-foot { text-align: center; font-size: 10.5px; color: var(--muted-2); padding: 12px 0 4px; }

  /* ---------- 黑胶播放页 ---------- */
  #playerPage {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 70;
    background: #f7f3ea; border-radius: 22px 22px 0 0;
    transform: translateY(100%); transition: transform .34s cubic-bezier(.32,.72,.28,1);
    will-change: transform; overflow: hidden;
  }
  #playerPage.open { transform: translateY(0); }
  .pp-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
    background: linear-gradient(175deg,
      var(--pp-c1, rgba(217,160,91,.28)) 0%,
      var(--pp-c2, rgba(247,243,234,.6)) 46%,
      var(--pp-c3, #f7f3ea) 78%);
    transition: background 1.2s ease; }
  .pp-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 6px; }
  .pp-down { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.72);
    color: var(--text); font-size: 13px; box-shadow: 0 3px 10px rgba(120,90,60,.14); }
  .pp-head-title { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
  .pp-qbadge { font-size: 11px; font-weight: 800; color: var(--coral);
    background: rgba(255,255,255,.8); padding: 4px 12px; border-radius: 999px; min-width: 20px; text-align: center; }
  .pp-stage { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; padding: 6px 22px 0; min-height: 0; overflow-y: auto; }
  .pp-disc-wrap { position: relative; width: min(66vw, 270px); margin-top: 12px; }
  .pp-disc { width: 100%; aspect-ratio: 1; border-radius: 50%; position: relative;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0 10.5%, transparent 11%),
      repeating-radial-gradient(circle at 50% 50%, #23201c 0 1.6px, #35302a 1.6px 3px, #2a2620 3px 4.6px);
    box-shadow: 0 18px 44px rgba(70,50,30,.35), inset 0 0 0 1px rgba(255,255,255,.10);
    animation: ppSpin 9s linear infinite; animation-play-state: paused; }
  #playerPage.playing .pp-disc { animation-play-state: running; }
  @keyframes ppSpin { to { transform: rotate(360deg); } }
  .pp-disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 200deg, rgba(255,255,255,.22), transparent 55deg, transparent 190deg, rgba(255,255,255,.12) 245deg, transparent 300deg); }
  .pp-disc-cover { position: absolute; top: 50%; left: 50%; width: 41%; height: 41%;
    transform: translate(-50%,-50%); border-radius: 50%; overflow: hidden;
    border: 4px solid rgba(255,255,255,.9); background: var(--ink-3);
    animation: ppSpin 9s linear infinite; animation-play-state: paused; }
  #playerPage.playing .pp-disc-cover { animation-play-state: running; }
  .pp-disc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pp-arm { position: absolute; top: -34px; right: -8px; width: 8px; height: 46%;
    z-index: 3; transform-origin: top center; transform: rotate(-26deg);
    transition: transform .45s cubic-bezier(.34,1.3,.4,1); pointer-events: none; }
  .pp-arm::before { content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, #b9b2a6); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
  .pp-arm i { position: absolute; inset: 0; display: block; background: linear-gradient(#efe9df, #b6ada0);
    border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,.18); }
  .pp-arm i::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 12px; border-radius: 4px; background: #d9d2c6; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
  #playerPage.playing .pp-arm { transform: rotate(16deg); }
  .pp-meta { text-align: center; margin-top: 22px; width: 100%; }
  .pp-title { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pp-artist { font-size: 14px; color: var(--muted); margin-top: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-tags { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
  .pp-tags span { font-size: 10.5px; font-weight: 700; color: var(--muted);
    background: rgba(255,255,255,.75); padding: 3px 10px; border-radius: 999px; }
  .pp-tags span.hi { color: var(--coral); }
  .pp-lrc-one { margin-top: 16px; font-size: 14px; color: var(--text); opacity: .85; min-height: 20px;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
  .pp-actions { position: relative; z-index: 2; display: flex; justify-content: space-around;
    padding: 14px 26px 2px; }
  .pp-act { display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; color: var(--muted); font-weight: 600; }
  .pp-act span { font-size: 19px; line-height: 1.2; font-style: normal; }
  .pp-act em { font-style: normal; }
  .pp-progress { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px;
    padding: 10px 22px 0; }
  .pp-time { font-size: 10.5px; color: var(--muted); font-family: var(--font-m); min-width: 34px; }
  .pp-seek { flex: 1; position: relative; height: 3.5px; border-radius: 3px;
    background: rgba(120,90,60,.18); touch-action: none; }
  .pp-seek::before { content: ''; position: absolute; inset: -12px 0; }
  .pp-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
    background: var(--grad); border-radius: 3px; }
  .pp-seek-knob { position: absolute; left: 0%; top: 50%; width: 11px; height: 11px;
    transform: translate(-50%,-50%); border-radius: 50%; background: #fff;
    box-shadow: 0 1px 5px rgba(120,90,60,.5); }
  .pp-ctrl { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-evenly;
    padding: 12px 18px 6px; color: var(--text); }
  .pp-ctrl button { font-size: 26px; color: var(--text); }
  .pp-ctrl .pp-play { width: 64px; height: 64px; border-radius: 50%; background: #241d14; color: #ffe9d2;
    font-size: 24px; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(40,25,10,.35); }
  .pp-tip { position: relative; z-index: 2; text-align: center; font-size: 11.5px; color: var(--muted);
    margin: 4px 26px 18px; background: rgba(255,255,255,.55); border-radius: 999px; padding: 7px 12px; }

  /* ---------- 沉浸歌词视图 ---------- */
  .pp-lyric-view { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
    /* ★ v34：第二层实色打底，修复取色渐变半透明导致唱片/标题穿透 */
    background:
      linear-gradient(175deg, var(--pp-c1, rgba(217,160,91,.30)) 0%, var(--pp-c3, #f7f3ea) 62%),
      #f7f3ea;
    transform: translateX(100%); transition: transform .3s ease; }
  .pp-lyric-view.open { transform: translateX(0); }
  .pplv-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 8px; }
  .pplv-meta { min-width: 0; }
  .pplv-title { font-size: 17px; font-weight: 800; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pplv-artist { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .pp-lyric-scroll { flex: 1; overflow-y: auto; padding: 24px 30px 120px; }
  .pp-lyric-scroll .plr { font-size: 19px; font-weight: 700; color: var(--muted-2); opacity: .55;
    padding: 11px 0; line-height: 1.5; transition: all .3s; cursor: pointer;
    transform: scale(.94); transform-origin: left center; }
  .pp-lyric-scroll .plr.active { color: var(--text); opacity: 1; transform: scale(1.04); }
  .pp-lyric-scroll .empty { color: var(--muted); font-size: 14px; text-align: center; padding-top: 60px; }

  /* 迷你栏：移动端曲名区可点击展开播放页 */
  .np-text { cursor: pointer; }
  .np-text::after { content: '⌃'; display: inline-block; margin-left: 5px; color: var(--muted-2);
    transform: rotate(45deg); font-size: 11px; }
}

/* ★ v33 层级补丁：面板/菜单需高于黑胶播放页(70)与我的页(60)，否则被全屏层盖住 */
@media (max-width: 768px) {
  .mp-panel, .mp-songs-view, .qpl-panel { z-index: 80 !important; }
  .quality-menu { z-index: 85 !important; }
}

/* =========================================================================
   ★ v35 移动端 QQ 音乐风格全面复刻（2026-08-27）
   原则：纯覆盖层，全部锁在 max-width:768px 内，桌面端零影响
   QQ 视觉：白/浅灰底 · 近黑文字 · 品牌红 #FA233B · 大圆角胶囊 · 排行榜式列表 · 深色黑胶页
   ========================================================================= */
@media (max-width: 768px) {
  :root {
    --player-h: 74px;
    --coral: #fa233b;
    --grad: linear-gradient(135deg, #ff5f5f, #fa233b);
    --ink: #ffffff;
    --ink-2: #ffffff;
    --ink-3: #f2f3f6;
    --ink-4: #e8e9ee;
    --line: #ececf0;
    --line-2: #dddde3;
    --text: #202024;
    --muted: #8f8f98;
    --muted-2: #b0b0b8;
    --amber: #fa233b;
  }
  body { background: #f5f6f8; background-image: none; }
  .grain { display: none; }

  /* ---------- 顶栏：藏 brand（协议/备案移至我的页），搜索胶囊 QQ 化 ---------- */
  .topbar { padding: 12px 14px 4px; }
  .brand { display: none; }
  .search {
    max-width: 100%; width: 100%; margin: 0;
    background: #eceef2; border-radius: 999px; border: none; box-shadow: none;
    padding: 4px 4px 4px 16px; min-height: 44px;
  }
  .search input { background: transparent; font-size: 14.5px; color: var(--text); }
  .search input::placeholder { color: #a7a7b0; }
  .search #searchBtn {
    background: var(--grad); color: #fff; border-radius: 999px;
    padding: 9px 20px; font-size: 14px; font-weight: 700; letter-spacing: 2px;
  }
  .search-history { background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(20,20,30,.12); }

  /* ---------- 音乐源 chips：QQ 筛选胶囊 ---------- */
  .sourcebar { padding: 4px 14px 10px; gap: 8px; }
  .chip {
    background: #eceef2; color: #6d6d76; border: none; border-radius: 999px;
    padding: 7px 13px; font-size: 12.5px; font-weight: 600;
  }
  .chip .dot { background: #c2c2ca; }
  .chip.on { background: rgba(250,35,59,.08); color: var(--coral); }
  .chip.on .dot { background: var(--coral); }
  .avatar-btn { background: #eceef2; border: none; border-radius: 999px; }

  /* ---------- 主内容区 ---------- */
  .results-wrap { padding-bottom: 150px !important; }

  /* ---------- 热歌榜：QQ 排行榜页复刻 ---------- */
  #hotPanel.hot-full {
    background: #f5f6f8; padding: 0 0 46px; border-radius: 0;
  }
  #hotPanel.hot-full .hot-head {
    margin: 0; padding: 24px 20px 20px; border-radius: 0 0 24px 24px;
    background: linear-gradient(160deg, #ff7a63 0%, #fa233b 55%, #e01030 100%);
    box-shadow: 0 10px 28px rgba(250,35,59,.28);
  }
  #hotPanel.hot-full .hot-title { color: #fff; font-size: 22px; letter-spacing: 1px; }
  #hotPanel.hot-full .hot-title em { color: rgba(255,255,255,.78); }
  #hotPanel.hot-full .hot-refresh {
    color: #fff; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.16);
    border-radius: 999px; padding: 6px 14px;
  }
  #hotPanel.hot-full .hot-list {
    grid-template-columns: 1fr;      /* 单列排行榜 */
    padding: 8px 8px 0; gap: 0;
  }
  #hotPanel.hot-full .hot-item { background: transparent !important; border-radius: 12px; padding: 9px 10px; gap: 12px; }
  #hotPanel.hot-full .hot-item:active { background: #e9eaef; }
  #hotPanel.hot-full .hot-idx { width: 26px; font-size: 15px; font-style: italic; font-weight: 800; color: #c0c0c8; }
  #hotPanel.hot-full .hot-item:nth-child(1) .hot-idx,
  #hotPanel.hot-full .hot-item:nth-child(2) .hot-idx,
  #hotPanel.hot-full .hot-item:nth-child(3) .hot-idx { color: #fa233b; }
  #hotPanel.hot-full .hot-cov { width: 46px; height: 46px; border-radius: 9px; box-shadow: 0 3px 10px rgba(20,20,30,.10); }
  #hotPanel.hot-full .hot-name { font-size: 15px; color: #202024; }
  #hotPanel.hot-full .hot-art { font-size: 11.5px; color: #8f8f98; }
  #hotPanel.hot-full .hot-dur { display: none; }
  #hotPanel.hot-full .hot-play { color: #6d6d76; }
  #hotPanel.hot-full .hot-add { color: #6d6d76; }

  /* ---------- 底部 Tab：QQ 白底红选中 ---------- */
  #mobileTabs { background: #fff; border-top: 1px solid #ececf0; height: 52px; }
  .mtab { color: #9a9aa2; font-size: 10px; }
  .mtab span { filter: grayscale(1) opacity(.55); }
  .mtab.on { color: #fa233b; font-weight: 800; }
  .mtab.on span { filter: none; transform: none; }

  /* ---------- 迷你播放栏：QQ 悬浮圆角卡片（单行） ---------- */
  .player {
    left: 10px; right: 10px; bottom: calc(52px + 10px); width: auto;
    display: flex; align-items: center; gap: 10px;
    grid-template-columns: none; grid-template-rows: none;
    padding: 8px 12px; border-radius: 16px;
    background: #fff; border: 1px solid #ececf0; box-shadow: 0 8px 28px rgba(20,20,30,.10);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .np-meta { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .np-cover { width: 42px; height: 42px; border-radius: 10px; }
  .np-text::after { display: none; }
  .np-title { font-size: 13.5px; font-weight: 700; color: #202024; }
  .np-artist { font-size: 11px; color: #8f8f98; }
  .player #lyricsToggle, .player #modeBtn, .player #dlCurrentBtn, .player #prevBtn,
  .player .seek, .player .np-right, .player .viz { display: none !important; }
  .player #plListBtn { color: #6d6d76; }
  .transport { display: flex; align-items: center; gap: 4px; }
  .t-btn { color: #303036; }
  .t-btn.play {
    width: 44px; height: 44px; background: var(--grad); color: #fff;
    box-shadow: 0 6px 16px rgba(250,35,59,.32);
  }

  /* ---------- 黑胶播放页：QQ 深色主题 ---------- */
  #playerPage { background: #101014; border-radius: 0; }
  .pp-amb {
    opacity: 1;
    background: linear-gradient(175deg,
      var(--pp-c1, rgba(250,35,59,.26)) 0%,
      rgba(16,16,20,0) 52%,
      #101014 82%);
  }
  .pp-down { background: rgba(255,255,255,.10); color: #fff; box-shadow: none; }
  .pp-head-title { color: rgba(255,255,255,.60); }
  .pp-qbadge { background: rgba(255,255,255,.12); color: #fff; }
  .pp-title { color: #fff; }
  .pp-artist { color: rgba(255,255,255,.60); }
  .pp-tags span { background: rgba(255,255,255,.10); color: rgba(255,255,255,.78); }
  .pp-tags span.hi { color: #ff7a86; }
  .pp-lrc-one { color: rgba(255,255,255,.88); }
  .pp-act { color: rgba(255,255,255,.60); }
  .pp-time { color: rgba(255,255,255,.45); }
  .pp-seek { background: rgba(255,255,255,.18); }
  .pp-seek-fill { background: #fa233b; }
  .pp-seek-knob { box-shadow: 0 1px 5px rgba(0,0,0,.55); }
  .pp-ctrl { color: #fff; }
  .pp-ctrl button { color: #fff; }
  .pp-ctrl .pp-play {
    background: var(--grad); color: #fff;
    box-shadow: 0 10px 26px rgba(250,35,59,.42);
  }
  .pp-tip { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); }
  .pp-disc { box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); }

  /* ---------- 沉浸歌词页：深色 ---------- */
  .pp-lyric-view {
    background:
      linear-gradient(175deg, var(--pp-c1, rgba(250,35,59,.26)) 0%, rgba(16,16,20,0) 58%),
      #101014;
  }
  .pplv-title { color: #fff; }
  .pplv-artist { color: rgba(255,255,255,.55); }
  .pp-lyric-scroll .plr { color: rgba(255,255,255,.40); }
  .pp-lyric-scroll .plr.active { color: #fff; }
  .pp-lyric-scroll .empty { color: rgba(255,255,255,.45); }

  /* ---------- 弹层统一白卡（搜索联想/音质菜单/歌单面板已由变量接管） ---------- */
  .quality-menu { background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(20,20,30,.14); }
  .mp-panel, .qpl-panel { background: #fff; }
}

/* ★ v35b 补充：首页内嵌热歌榜（非 Tab 全屏态）同步 QQ 化——统一渐变横幅 + 单列排行榜 */
@media (max-width: 768px) {
  .hot-panel { background: #fff; border-radius: 18px; padding: 0 0 8px; margin: 4px 10px 24px;
    box-shadow: 0 4px 18px rgba(20,20,30,.05); overflow: hidden; }
  .hot-panel .hot-head {
    margin: 0 0 6px; padding: 16px 16px 14px;
    background: linear-gradient(160deg, #ff7a63 0%, #fa233b 55%, #e01030 100%);
    border-radius: 0;
  }
  .hot-panel .hot-title { color: #fff; font-size: 17px; }
  .hot-panel .hot-title em { color: rgba(255,255,255,.78); }
  .hot-panel .hot-refresh {
    color: #fff; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.16);
    border-radius: 999px; padding: 5px 12px; font-size: 11.5px;
  }
  .hot-panel .hot-list { grid-template-columns: 1fr; padding: 4px 6px 0; gap: 0; }
  /* v44 双源 pill 深色态 */
  .hot-panel .hot-title em { display: none; }
  #hotPanel.hot-full .hot-src { background: rgba(255, 255, 255, .14); }
  #hotPanel.hot-full .hot-src-btn { color: rgba(255, 255, 255, .65); }
  #hotPanel.hot-full .hot-src-btn.on { background: rgba(255, 255, 255, .94); color: #e8354d; }
  .hot-panel .hot-item { padding: 8px 8px; gap: 11px; }
  .hot-panel .hot-item:active { background: #f2f3f6; }
  .hot-panel .hot-idx { width: 22px; font-size: 14px; font-style: italic; font-weight: 800; color: #c0c0c8; }
  .hot-panel .hot-item:nth-child(-n+3) .hot-idx { color: #fa233b; }
  .hot-panel .hot-cov { width: 42px; height: 42px; border-radius: 8px; }
  .hot-panel .hot-name { font-size: 14px; color: #202024; }
  .hot-panel .hot-art { font-size: 11px; color: #8f8f98; }
  .hot-panel .hot-dur { display: none; }
  .hot-panel .hot-play, .hot-panel .hot-add { color: #6d6d76; }
}

/* =========================================================================
   ★ v36 移动端布局修复（2026-08-27）
   1) Tab 栏贴底（修复与迷你栏重叠/悬空 74px），适配 iPhone 安全区
   2) 歌单面板从「内嵌 52vh 卡片」改为「歌单页」：占 Tab+迷你栏上方整屏，
      Tab 高亮停留「歌单」，关闭由 mpClose 归位首页
   ========================================================================= */
@media (max-width: 768px) {
  :root { --player-h: 66px; }   /* 52 Tab + 10 间隙 + 58 卡片 = 120 = 66+54（mePage/hot-full 对齐） */

  #mobileTabs {
    bottom: 0; height: auto; min-height: 52px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .player { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

  /* 歌单页化：覆盖窄屏内嵌卡片模式（464-486 行段），沿用 display 切换机制 */
  .mp-panel {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    bottom: calc(var(--player-h) + 54px + env(safe-area-inset-bottom, 0px));
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    z-index: 80 !important;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(20,20,30,.10) !important;
  }
}

/* ★ v36b：迷你栏 np-center 纵向残留导致 transport 换行 → 强制单行 */
@media (max-width: 768px) {
  .player .np-center { flex-direction: row; align-items: center; gap: 2px; margin: 0; padding: 0; }
  .player .transport { gap: 2px; }
}

/* ★ v36c：mp-shown 高特异性规则(729/887 行)把面板 height:100%!important 顶到全屏
   → 同特异性覆写，歌单页高度锁定在 Tab+迷你栏上方 */
@media (max-width: 768px) {
  .mp-panel,
  .main-wrap .mp-panel,
  .main-wrap.mp-shown .mp-panel,
  .main-wrap.mp-shown:not(.msv-solo) .mp-panel {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    bottom: calc(var(--player-h) + 54px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    z-index: 80 !important;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(20,20,30,.10) !important;
  }
}

/* ★ v36d：空态 .player[data-empty="true"]{display:grid!important} 把迷你栏打回两行 grid
   → 移动端两种空/非空态统一锁单行 flex 卡片 */
@media (max-width: 768px) {
  .player, .player[data-empty="true"], .player[data-empty="false"] {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }
}

/* =========================================================================
   ★ v37 移动端体验修复（2026-08-27）
   1) 灵动岛/刘海安全区：全局 padding-top + 各全屏层 top 让出状态栏
   2) 首页精简：内嵌热歌榜隐藏（热榜 Tab 承载）、登录按钮移除（功能在「我的」页）
   3) SVG 图标对齐（Tab 栏/播放页/我的页已换内联矢量图）
   4) Tab 页面切换滑入动画
   ========================================================================= */
@media (max-width: 768px) {
  /* ---- 安全区：灵动岛/刘海遮挡 ---- */
  body { padding-top: env(safe-area-inset-top, 0px); }
  #playerPage { top: env(safe-area-inset-top, 0px); }
  .pp-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  #mePage { top: env(safe-area-inset-top, 0px); }
  #hotPanel.hot-full { top: env(safe-area-inset-top, 0px); }
  .mp-panel { top: env(safe-area-inset-top, 0px) !important; }

  /* ---- 首页精简 ---- */
  .hot-panel:not(.hot-full) { display: none !important; }
  .sourcebar .account-wrap { display: none !important; }
  .results-wrap { padding-top: 10px; }

  /* ---- SVG 图标对齐 ---- */
  .mtab span { filter: none; display: flex; align-items: center; justify-content: center; }
  .mtab span svg { width: 22px; height: 22px; display: block; }
  .mtab.on span { transform: none; }
  .pp-act span { display: flex; align-items: center; justify-content: center; height: 20px; }
  .pp-act span svg { width: 20px; height: 20px; }
  .pp-act .pp-act-txt { font-size: 15px; font-weight: 800; line-height: 20px; }
  .pp-ctrl button svg { display: block; }
  .pp-ctrl .pp-ic-play svg, .pp-ctrl .pp-ic-pause svg { display: block; margin: 0 auto; }
  .me-ico { width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; color: var(--coral); }
  .me-avatar svg { display: block; }
  .ht-ico { width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; }

  /* ---- Tab 页面切换动画 ---- */
  #mePage, #hotPanel.hot-full { animation: v37tabIn .26s ease; }
  .mp-panel.open { animation: v37tabIn .26s ease; }
  @keyframes v37tabIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* =========================================================================
   ★ v38 移动端体验修复三连（2026-08-27）
   1) 全屏层满屏化：撤销 v37 的 top:env 悬空（「我的」像弹窗、黑胶页顶漏一条
      的根因）——各全屏层背景直达屏幕边缘，状态栏改由内容内部 padding 避让；
      body 上方的 padding-top(env) 保留 = 搜索栏依旧不挡灵动岛。
      「我的」/热榜页 bottom 改 0 背景贯穿到底，Tab 栏(半透明)悬浮其上，
      彻底去掉底部悬浮缝隙 → 真正的整页切换观感。
   2) 迷你播放栏：fixed 化悬浮卡片，z65 盖过「我的/热榜」页；恢复上一首按钮
   3) 播放列表改为底部弹出 sheet：圆角顶 + 把手，下滑退出 / 遮罩点击退出，
      z95 盖过黑胶播放页(z70)。transform 不加 !important——给拖拽跟手留通道
   ========================================================================= */
@media (max-width: 768px) {
  /* ---- 1) 全屏层满屏化 ---- */
  #playerPage { top: 0 !important; }                       /* 黑胶页占满全屏（pp-head 内部已有 env 避让） */
  #mePage {
    top: 0 !important; bottom: 0 !important;               /* 背景贯穿状态栏→屏底 */
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(var(--player-h) + 74px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #hotPanel.hot-full {
    top: 0 !important; bottom: 0 !important;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--player-h) + 74px + env(safe-area-inset-bottom, 0px));
  }
  /* mp-panel 特异性对齐 v36c 覆写组 */
  .mp-panel, .main-wrap .mp-panel,
  .main-wrap.mp-shown .mp-panel,
  .main-wrap.mp-shown:not(.msv-solo) .mp-panel {
    top: 0 !important;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    border-radius: 0;
  }

  /* ---- 2) 迷你播放栏悬浮卡片 fixed 化 + 上一首回归 ---- */
  .player { position: fixed !important; left: 10px; right: 10px; z-index: 65 !important; }
  .transport #prevBtn { display: grid !important; width: 36px; height: 36px; }
  .transport #prevBtn svg { width: 19px; height: 19px; }

  /* ---- 3) 播放列表：底部弹出 sheet ---- */
  .sheet-mask {
    position: fixed; inset: 0; z-index: 94;
    background: rgba(20, 20, 30, .48);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  .sheet-mask.on { opacity: 1; pointer-events: auto; }

  #qplPanel {
    top: auto !important; bottom: 0 !important;
    left: 0 !important; right: auto !important;
    width: 100% !important;
    height: auto !important; max-height: 72vh !important;
    border-radius: 22px 22px 0 0 !important;
    border: none !important;
    display: flex !important; flex-direction: column !important;
    background: #fff !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: none !important;
    z-index: 95 !important;
    transform: translateY(100%);                            /* ★无 important：inline 拖拽可接管 */
    transition: transform .34s cubic-bezier(.32, .72, .28, 1);
  }
  #qplPanel.open {
    transform: none;                                        /* 同特异性 (1,1,0) 压过旧 .qpl-panel.open */
    box-shadow: 0 -18px 50px rgba(20, 20, 30, .28) !important;
  }
  /* 把手：顶部居中小灰条 */
  #qplPanel::before {
    content: ''; position: absolute; top: 8px; left: 50%; margin-left: -20px;
    width: 40px; height: 4px; border-radius: 4px; background: #e4e4ea;
    pointer-events: none;
  }
  #qplPanel .qpl-head { padding-top: 22px; position: relative; cursor: grab; }
}

/* =========================================================================
   ★ v39 移动端体验修复（2026-08-27）
   1) Tab 栏从页面底浮起：v38 将「我的/热榜」背景贯穿到屏底(z60/z55)，
      原 Tab 栏 z45 被压没 → 提至 62（仍低于迷你栏 65、黑胶页 70：
      黑胶沉浸态保持全屏覆盖属预期）。歌单页被 Tab 切走时由 JS 收起。
   2) 波浪动画"失效"根因修复：prefers-reduced-motion 一刀切已收窄（见上文 317 行）
   3) 黑胶播放页封面：放大占唱片直径 ~57%、去掉自转动画——随唱片整体旋转，
      与参考图（QQ音乐黑胶）一致；仅移动端，桌面黑胶保持原行为
   ========================================================================= */
@media (max-width: 768px) {
  #mobileTabs { z-index: 62 !important; }

  .pp-disc-cover {
    width: 57%; height: 57%;
    border-width: 5px;
    animation: none !important;              /* 不自转：嵌在唱片中心随之转动 */
  }
  #playerPage.playing .pp-disc-cover { animation: none !important; }
}

/* =========================================================================
   ★ v40 移动端体验修复（2026-08-27）
   1) 下载音质菜单 sheet 化：#qualityMenu 在移动端从底部弹出（全宽圆角顶 +
      遮罩 + 把手），替代原左上角小下拉卡（曾顶到灵动岛、深色页上突兀）
   2) 黑胶播放页中部标签只显当前播放音质（JS 只渲染一项），间距居中收紧
   3) 单行歌词 → 三行轮播（上一句/当前句/下一句）
   4) 歌词页头部避让灵动岛：pplv-head 补 safe-area-inset-top
   ========================================================================= */
@media (max-width: 768px) {
  /* ---- 1) 下载音质菜单底部弹出化 ---- */
  #qualityMenu.as-sheet {
    position: fixed !important;
    top: auto !important; bottom: 0 !important;
    left: 0 !important; right: auto !important;
    width: 100% !important;
    max-height: 70vh; overflow-y: auto;
    border-radius: 22px 22px 0 0 !important;
    border: none !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: none !important;
    z-index: 96 !important;                     /* 高于播放列表 sheet(z95) */
    transform: translateY(100%);                /* 无 important：动画期间可被 JS 接管 */
    transition: transform .32s cubic-bezier(.32, .72, .28, 1);
  }
  #qualityMenu.as-sheet.showing {
    transform: none;
    box-shadow: 0 -18px 50px rgba(20, 20, 30, .28) !important;
  }
  #qualityMenu.as-sheet::before {               /* 把手 */
    content: ''; position: absolute; top: 8px; left: 50%; margin-left: -20px;
    width: 40px; height: 4px; border-radius: 4px; background: #e4e4ea; pointer-events: none;
  }
  #qualityMenu.as-sheet .quality-head { padding-top: 24px; }

  /* ---- 2) 播放页中部标签居中单枚 ---- */
  .pp-tags { justify-content: center; }

  /* ---- 3) 三行歌词轮播 ---- */
  .pp-lrc-one { min-height: 72px; display: flex; align-items: center; justify-content: center; }
  .pp-lrc3 { display: flex; flex-direction: column; align-items: center; gap: 7px; }
  .pp-lrc3 span {
    font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .34);
    max-width: 92vw; white-space: normal; word-break: break-word; text-align: center;
    transition: color .45s ease, transform .45s ease;
  }
  .pp-lrc3 span.on { color: rgba(255, 255, 255, .96); font-weight: 700; transform: scale(1.03); }

  /* ---- 4) 歌词页头部避让灵动岛 ---- */
  .pplv-head { padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important; }

  /* ---- 5) 我的页：账号 ID 中性徽章（替代绿钻/已配置彩签） ---- */
  .mc-val.id { color: #5a5a64; background: #f1f1f4; }
}

/* =========================================================================
   ★ v41 移动端体验修复（2026-08-27）
   1) 我的页 Cookie 卡：显示完整绑定 ID + 行内编辑（点击账号行展开输入框）
   2) 播放页轮播歌词 3 行 → 6 行（当前句第 3 行高亮）
   3) 下载：先弹窗选音质再后台解析（JS 逻辑，无 CSS 变化）
   4) 歌单面板已绑定则隐藏绑定框（JS 逻辑）；同步入口移至「我的」页
   ========================================================================= */
@media (max-width: 768px) {
  .me-cookie-row.tap { cursor: pointer; }
  .me-cookie-row.tap:active { background: rgba(0, 0, 0, .03); border-radius: 8px; }

  .mc-edit { display: flex; gap: 8px; margin: 8px 0 4px; }
  .mc-edit input {
    flex: 1; min-width: 0; height: 38px;
    border: 1.5px solid var(--line); border-radius: 11px;
    background: #f7f7f9; padding: 0 12px;
    font-size: 14px; font-weight: 600; color: var(--text);
  }
  .mc-edit input:focus { outline: none; border-color: var(--coral); background: #fff; }
  .mc-edit button {
    height: 38px; padding: 0 16px; border-radius: 11px;
    background: var(--grad); color: #fff; font-size: 13px; font-weight: 800;
    box-shadow: 0 4px 12px rgba(250, 35, 59, .25);
  }
  .mc-edit button:disabled { opacity: .5; }

  /* 六行轮播歌词 */
  .pp-lrc-one { min-height: 138px; }
  .pp-lrc3 { gap: 6px; }
}

/* =========================================================================
   ★ v42 移动端体验修复（2026-08-27）
   1) 桌面端热歌榜 ht-ico 巨图修复（基础区，见 .hot-title .ht-ico）
   2) 黑胶页长歌词不再截断（v40 段 .pp-lrc3 span 改两行换行居中）
   3) 黑胶播放页下滑手势退出（JS 实现）；防浏览器下拉刷新干扰
   ========================================================================= */
@media (max-width: 768px) {
  #playerPage { overscroll-behavior: contain; }
  /* 当前行换行成两行时轮播容器整体会被撑高，行距微收紧保持 6 行可视平衡 */
  .pp-lrc-one { min-height: 148px; }
  .pp-lrc3 { gap: 5px; }
}

/* =========================================================================
   ★ v48 桌面端黑胶播放页（2026-09-02）
   复用移动端 #playerPage 的 DOM 与 JS 同步逻辑，仅解锁显示 + 宽屏双栏适配。
   本段全部锁在 min-width:769px，不改动任何移动端规则（其仍锁在 max-width:768px）。
   布局：左侧唱片/曲目信息，右侧歌词面板（点"词"淡入），底部通栏控制条。
   ========================================================================= */
@media (min-width: 769px) {
  /* 层级：黑胶页(z70)打开时，播放列表面板/音质菜单需浮于其上 */
  .mp-panel, .qpl-panel { z-index: 80 !important; }
  .quality-menu { z-index: 85 !important; }

  #playerPage {
    display: grid; position: fixed; inset: 0; z-index: 70;
    grid-template-columns: minmax(400px, 1.05fr) 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "head head"
      "stage lrc"
      "actions actions"
      "progress progress"
      "ctrl ctrl";
    background: #f7f3ea;
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(.32,.72,.28,1);
    will-change: transform; overflow: hidden;
  }
  #playerPage[hidden] { display: none; }
  #playerPage.open { transform: translateY(0); }

  .pp-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
    background: linear-gradient(175deg,
      var(--pp-c1, rgba(217,160,91,.28)) 0%,
      var(--pp-c2, rgba(247,243,234,.6)) 46%,
      var(--pp-c3, #f7f3ea) 78%);
    transition: background 1.2s ease; }

  /* 顶栏 */
  .pp-head { grid-area: head; position: relative; z-index: 2; display: flex; align-items: center;
    gap: 12px; padding: 18px 28px 4px; }
  .pp-down { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.72);
    color: var(--text); font-size: 13px; box-shadow: 0 3px 10px rgba(120,90,60,.14); cursor: pointer; }
  .pp-down:hover { background: #fff; }
  .pp-head-title { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
  .pp-qbadge { font-size: 11px; font-weight: 800; color: var(--coral);
    background: rgba(255,255,255,.8); padding: 4px 12px; border-radius: 999px; min-width: 20px; text-align: center; }

  /* 左栏：唱片 + 曲目信息 + 单行歌词 */
  .pp-stage { grid-area: stage; position: relative; z-index: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 10px 44px; min-height: 0; }
  .pp-disc-wrap { position: relative; width: min(24vw, 330px); margin-top: 0; }
  .pp-disc { width: 100%; aspect-ratio: 1; border-radius: 50%; position: relative;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0 10.5%, transparent 11%),
      repeating-radial-gradient(circle at 50% 50%, #23201c 0 1.6px, #35302a 1.6px 3px, #2a2620 3px 4.6px);
    box-shadow: 0 18px 44px rgba(70,50,30,.35), inset 0 0 0 1px rgba(255,255,255,.10);
    animation: ppSpinD 9s linear infinite; animation-play-state: paused; }
  #playerPage.playing .pp-disc { animation-play-state: running; }
  @keyframes ppSpinD { to { transform: rotate(360deg); } }
  .pp-disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 200deg, rgba(255,255,255,.22), transparent 55deg, transparent 190deg, rgba(255,255,255,.12) 245deg, transparent 300deg); }
  /* ★ v50：封面固定居中、随唱片整体旋转（封面自身不转——animation 会覆盖 translate(-50%,-50%) 导致偏位） */
  .pp-disc-cover { position: absolute; top: 50%; left: 50%; width: 78%; height: 78%;
    transform: translate(-50%,-50%); border-radius: 50%; overflow: hidden;
    border: 4px solid rgba(255,255,255,.9); background: var(--ink-3);
    animation: none; }
  #playerPage.playing .pp-disc-cover { animation-play-state: running; }
  .pp-disc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pp-arm { position: absolute; top: -34px; right: -8px; width: 8px; height: 46%;
    z-index: 3; transform-origin: top center; transform: rotate(-26deg);
    transition: transform .45s cubic-bezier(.34,1.3,.4,1); pointer-events: none; }
  .pp-arm::before { content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, #b9b2a6); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
  .pp-arm i { position: absolute; inset: 0; display: block; background: linear-gradient(#efe9df, #b6ada0);
    border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,.18); }
  .pp-arm i::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 12px; border-radius: 4px; background: #d9d2c6; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
  #playerPage.playing .pp-arm { transform: rotate(16deg); }

  .pp-meta { text-align: center; margin-top: 20px; width: 100%; }
  .pp-title { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pp-artist { font-size: 14px; color: var(--muted); margin-top: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-tags { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
  .pp-tags span { font-size: 10.5px; font-weight: 700; color: var(--muted);
    background: rgba(255,255,255,.75); padding: 3px 10px; border-radius: 999px; }
  .pp-tags span.hi { color: var(--coral); }
  /* ★ v49：歌词固定显示在右栏，黑胶下方单行歌词不再显示 */
  .pp-lrc-one { display: none; }

  /* 右栏：歌词面板（点"词"或单行歌词淡入；JS 沿用 class 切换，零改动） */
  /* ★ v49：歌词常驻右栏（隐藏 hidden 态，切歌自动刷新） */
  .pp-lyric-view { grid-area: lrc; position: relative; z-index: 5; display: flex; flex-direction: column;
    background: transparent; border-left: 1px solid rgba(120,90,60,.14);
    transform: none; opacity: 1; pointer-events: auto; }
  .pplv-head { display: flex; align-items: center; gap: 12px; padding: 16px 30px 8px; }
  .pplv-meta { min-width: 0; }
  .pplv-title { font-size: 17px; font-weight: 800; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pplv-artist { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .pp-lyric-scroll { flex: 1; overflow-y: auto; padding: 20px 34px 40px; }
  .pp-lyric-scroll .plr { font-size: 17px; font-weight: 700; color: var(--muted-2); opacity: .55;
    padding: 10px 0; line-height: 1.5; transition: all .3s; cursor: pointer;
    transform: scale(.94); transform-origin: left center; }
  .pp-lyric-scroll .plr:hover { opacity: .8; }
  .pp-lyric-scroll .plr.active { color: var(--text); opacity: 1; transform: scale(1.04); }
  .pp-lyric-scroll .empty { color: var(--muted); font-size: 14px; text-align: center; padding-top: 60px; }

  /* 底部：功能按钮 / 进度 / 播放控制（通栏居中） */
  /* ★ v50：恢复图标按钮排显示 */
  .pp-actions { grid-area: actions; position: relative; z-index: 2; display: flex;
    justify-content: center; gap: 56px; padding: 14px 26px 2px; }

  /* ★ v52 下载菜单浮层（音乐/歌词/封面） */
  .pp-dl-menu { position: fixed; z-index: 90; min-width: 190px; background: #fff;
    border-radius: 12px; box-shadow: 0 12px 40px rgba(70,50,30,.28); padding: 6px; }
  .pp-dl-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
  .pp-dl-menu button:hover { background: rgba(232,106,138,.08); }

  /* ★ v55 音量控件（仅桌面段，注入于 pp-ctrl 末尾） */
  .pp-vol { display: flex; align-items: center; gap: 8px; margin-left: 18px; }
  .pp-vol button { font-size: 18px; color: var(--text); background: none; cursor: pointer; }
  .pp-vol .vol-track { width: 92px; }  /* 2026-09-07 与 mini 栏同款滑块，仅宽度略宽适配桌面 */
  .pp-act { display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; color: var(--muted); font-weight: 600; background: none; cursor: pointer; }
  .pp-act:hover { color: var(--text); }
  .pp-act span { font-size: 19px; line-height: 1.2; font-style: normal; }
  .pp-act span { display: flex; align-items: center; justify-content: center; height: 20px; }
  .pp-act span svg { width: 20px; height: 20px; }
  .pp-act em { font-style: normal; }
  .pp-progress { grid-area: progress; position: relative; z-index: 2; display: flex; align-items: center;
    gap: 12px; padding: 10px 28px 0; width: min(860px, 88%); margin: 0 auto; }
  .pp-time { font-size: 10.5px; color: var(--muted); font-family: var(--font-m); min-width: 34px; }
  .pp-seek { flex: 1; position: relative; height: 3.5px; border-radius: 3px;
    background: rgba(120,90,60,.18); touch-action: none; cursor: pointer; }
  .pp-seek::before { content: ''; position: absolute; inset: -12px 0; }
  .pp-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
    background: var(--grad); border-radius: 3px; }
  .pp-seek-knob { position: absolute; left: 0%; top: 50%; width: 11px; height: 11px;
    transform: translate(-50%,-50%); border-radius: 50%; background: #fff;
    box-shadow: 0 1px 5px rgba(120,90,60,.5); }
  .pp-ctrl { grid-area: ctrl; position: relative; z-index: 2; display: flex; align-items: center;
    justify-content: center; gap: 56px; padding: 10px 18px 24px; color: var(--text); }
  .pp-ctrl button { font-size: 28px; color: var(--text); cursor: pointer; background: none; }
  .pp-ctrl button:hover { color: var(--coral); }
  .pp-ctrl .pp-play { width: 66px; height: 66px; border-radius: 50%; background: #241d14; color: #ffe9d2;
    font-size: 24px; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(40,25,10,.35); }
  .pp-ctrl .pp-play:hover { color: #ffe9d2; background: #3a2f1f; }

  /* 提示条：桌面改为控制区上方悬浮胶囊 */
  .pp-tip { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 6; text-align: center; font-size: 11.5px; color: var(--muted);
    margin: 0; background: rgba(255,255,255,.72); backdrop-filter: blur(6px);
    border-radius: 999px; padding: 7px 14px; box-shadow: 0 4px 14px rgba(120,90,60,.18); }
}

/* ==================== v56 UX 优化（2026-09-03） ==================== */
/* 移动端搜索结果：触屏无 hover，操作按钮常显 + 精简列（桌面 769px+ 不受影响） */
@media (max-width:768px){
  .results-head .col-album,.row .r-album,
  .results-head .col-dur,.row .r-dur,
  .results-head .col-size,.row .r-size,
  .results-head .col-src,.row .r-src{display:none}
  .results-head,.row{grid-template-columns:48px 1fr 102px;gap:8px}
  .r-act{opacity:1}
}
/* 黑胶页音量滑条：全局珊瑚粉（原规则锁在桌面媒体查询内） */
.pp-vol .vol-fill{background:var(--muted)}  /* 2026-09-07 同 mini 栏观感 */
/* 播放列表拖拽反馈 */
.qpl-row.dragging{opacity:.45}
.qpl-row.drag-over{border-color:var(--coral);background:rgba(232,106,138,.08)}
/* 热歌全部播放按钮 */
.hot-head-right{display:flex;align-items:center;gap:8px}
.hot-playall{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#fff;background:var(--grad);border:none;border-radius:10px;padding:7px 14px;cursor:pointer;box-shadow:0 3px 10px rgba(232,106,138,.25);transition:all .15s}
.hot-playall:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(232,106,138,.35)}
.hot-playall:active{transform:scale(.96)}
/* 账号菜单登录提示 */
.am-login-hint{margin:6px 10px 2px;padding:8px 10px;border-radius:9px;background:rgba(232,106,138,.08);font-size:11.5px;color:var(--muted);line-height:1.5}
/* 歌单面板未登录引导 */
.mp-guide{padding:16px 12px;text-align:center}
.mp-guide-emoji{font-size:34px;margin-bottom:6px}
.mp-guide-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px}
.mp-guide-list{list-style:none;margin:0 0 14px;padding:0;text-align:left}
.mp-guide-list li{font-size:12.5px;color:var(--muted);padding:5px 0 5px 20px;position:relative;line-height:1.5}
.mp-guide-list li::before{content:'\2713';position:absolute;left:2px;color:var(--coral);font-weight:700}
.mp-guide .mp-save{width:100%}
.mp-guide-sub{margin-top:10px;font-size:11px;color:var(--muted)}